ENG-1154: Reload graph when left sidebar is enabled

[sid597]

Summary by CodeRabbit

Release Notes

• New Features
  • Replaced Beta panel with an interactive checkbox to enable/disable the left sidebar feature
  • Added reload confirmation alert that appears when enabling the feature

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

ENG-1154 If you have to reload the graph for the left sidebar to take effect, we should say so

[supabase]

This pull request has been ignored for the connected project zytfjzqyijgagqxrzbmz because there are no changes detected in packages/database/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[sid597]

• ENG-1154: Reload graph when left sidebar is enabled #605 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[sid597]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

A Beta feature panel is replaced with an interactive Checkbox control in the GeneralSettings component. When toggled, the Checkbox triggers block creation or deletion and displays a reload confirmation dialog, managing local state for enabled status, block UID, and alert visibility.

Changes

Cohort / File(s)	Summary
Left Sidebar Feature Toggle Refactor apps/roam/src/components/settings/GeneralSettings.tsx	Replaces Beta feature panel with interactive Checkbox; adds local state (leftSidebarEnabled, leftSidebarUid, isAlertOpen); integrates Alert component for reload prompt; implements onChange handler for block creation/deletion via createBlock and deleteBlock utilities; adds imports for Alert, Checkbox, Intent, and Description.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10–15 minutes

• Single file modification with localized scope
• Clear logic flow: checkbox toggle → block create/delete → state management
• Three new local state variables require validation for proper initialization and updates
• Integration with block operations (createBlock/deleteBlock) warrants verification of UID tracking and cleanup logic
• Alert component integration should be checked for proper user prompts and reload handling

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately describes the main change: replacing a Beta feature panel with a Checkbox that enables left sidebar functionality and triggers a graph reload when enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/roam/src/components/settings/GeneralSettings.tsx (1)

50-53: Consider specifying the order parameter for consistent positioning.

The createBlock call doesn't include an order parameter, which means the Left Sidebar setting will appear at an unpredictable position. Other settings in this file explicitly specify order (0, 1, 3).

Apply this diff to add an order parameter:

  createBlock({
    parentUid: settings.settingsUid,
-   node: { text: "(BETA) Left Sidebar" },
+   node: { text: "(BETA) Left Sidebar" },
+   order: 2,
  })

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 193e67d and ccb70e1.

📒 Files selected for processing (1)

• apps/roam/src/components/settings/GeneralSettings.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (5)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/main.mdc)

**/*.{ts,tsx}: Use Tailwind CSS for styling where possible
When refactoring inline styles, use tailwind classes
Prefer type over interface in TypeScript
Use explicit return types for functions
Avoid any types when possible
Prefer arrow functions over regular function declarations
Use named parameters (object destructuring) when a function has more than 2 parameters
Use PascalCase for components and types
Use camelCase for variables and functions
Use UPPERCASE for constants
Function names should describe their purpose clearly
Prefer early returns over nested conditionals for better readability

Files:

• apps/roam/src/components/settings/GeneralSettings.tsx

apps/roam/**/*.{js,ts,tsx,jsx,json}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Prefer existing dependencies from package.json when working on the Roam Research extension

Files:

• apps/roam/src/components/settings/GeneralSettings.tsx

apps/roam/**/*.{ts,tsx,jsx,js,css,scss}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Files:

• apps/roam/src/components/settings/GeneralSettings.tsx

apps/roam/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

apps/roam/**/*.{ts,tsx,js,jsx}: Use the roamAlphaApi docs from https://roamresearch.com/#/app/developer-documentation/page/tIaOPdXCj when implementing Roam functionality
Use Roam Depot/Extension API docs from https://roamresearch.com/#/app/developer-documentation/page/y31lhjIqU when implementing extension functionality

Files:

• apps/roam/src/components/settings/GeneralSettings.tsx

apps/roam/**

📄 CodeRabbit inference engine (.cursor/rules/roam.mdc)

Implement the Discourse Graph protocol in the Roam Research extension

Files:

• apps/roam/src/components/settings/GeneralSettings.tsx

🧠 Learnings (2)

📚 Learning: 2025-11-25T00:52:41.934Z

Learnt from: CR
Repo: DiscourseGraphs/discourse-graph PR: 0
File: .cursor/rules/roam.mdc:0-0
Timestamp: 2025-11-25T00:52:41.934Z
Learning: Applies to apps/roam/**/*.{ts,tsx,jsx,js,css,scss} : Use BlueprintJS 3 components and Tailwind CSS for platform-native UI in the Roam Research extension

Applied to files:

• apps/roam/src/components/settings/GeneralSettings.tsx

📚 Learning: 2025-08-11T19:09:58.252Z

Learnt from: maparent
Repo: DiscourseGraphs/discourse-graph PR: 337
File: apps/roam/src/components/DiscourseFloatingMenu.tsx:43-43
Timestamp: 2025-08-11T19:09:58.252Z
Learning: The roam subdirectory (apps/roam) is constrained to React 17 and cannot use React 18+ features like createRoot API. ReactDOM.render should be used instead of createRoot in this subdirectory.

Applied to files:

• apps/roam/src/components/settings/GeneralSettings.tsx

🧬 Code graph analysis (1)

apps/roam/src/components/settings/GeneralSettings.tsx (1)

apps/roam/src/utils/discourseConfigRef.ts (1)

• getFormattedConfigTree (51-86)

🔇 Additional comments (3)

apps/roam/src/components/settings/GeneralSettings.tsx (3)

1-1: LGTM! Imports follow guidelines.

The new imports properly support the Left Sidebar toggle functionality using BlueprintJS 3 components and existing roamjs-components utilities.

Also applies to: 7-10

---

18-24: LGTM! State initialization is correct.

The state variables properly initialize from settings with appropriate fallbacks.

---

75-85: Alert should clarify the consequence of clicking "Later".

When users click "Later" after enabling the Left Sidebar, the feature config is persisted but non-functional until reload. Consider adding clarity to the alert message about the interim state, or alternatively, prevent dismissal without reload to avoid user confusion about why the feature doesn't work immediately.

The asymmetric Alert behavior (only shown on enable, not disable) is intentional—the observer dynamically checks the enabled setting on each DOM mutation, so disabling takes effect without requiring a reload.