ENG-853 left sidebar global and personal settings

[sid597]

https://www.loom.com/share/6f453441c5eb418cb728a6e165387340?sid=3a9e642d-413e-4717-bc01-1cc1882486a6

Summary by CodeRabbit

• New Features

  • Added Left Sidebar settings to the Settings dialog with two tabs: Personal and Global.
  • Global: Create and manage a “Global Section,” toggle folded/collapsible, add/remove pages with autocomplete, and expand/collapse children.
  • Personal: Create a per-user “Personal Section,” add sections or pages, convert sections to advanced mode with settings and children, edit per-section options (folded, alias, truncate), and manage child items.

• UX Improvements

  • Real-time updates, duplicate prevention, keyboard add (Enter), tooltips, and clear loading/empty states.

[linear]

ENG-853 Left sidebar global and personal settings

[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-853 left sidebar global and personal settings #441 👈 (View in Graphite)
• ENG-852 Render left sidebar based on fetched sections and settings #440 : 1 other dependent PR (#456 )
• ENG-851 Get left sidebar sections and settings from config page #439
• 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

Adds new left-sidebar configuration UIs: a global sections panel and a per-user personal sections panel. Integrates both as tabs in Settings. Extends left sidebar settings utilities by exporting additional types/functions and returning the Left Sidebar uid. Implements block creation, retrieval, and updates for sections, settings, and children.

Changes

Cohort / File(s)	Summary
Left Sidebar Global Settings Panel apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx	New component LeftSidebarGlobalSections. Initializes/loads Global-Section under Left Sidebar, manages folded/collapsable flags, Children container, and page list CRUD with autocomplete. Exposes internal UI pieces for list rendering and input handling.
Left Sidebar Personal Settings Panel apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx	New component LeftSidebarPersonalSections. Ensures per-user Personal-Section exists. Supports creating sections, converting to complex (Settings/Children), editing flags/numbers/text, and managing children with autocomplete. Handles block CRUD and dialog-driven settings.
Settings Dialog Integration apps/roam/src/components/settings/Settings.tsx	Adds two tabs: Personal Settings and Global Settings. Renders LeftSidebarPersonalSections and LeftSidebarGlobalSections.
Left Sidebar Settings Utils apps/roam/src/utils/getLeftSidebarSettings.ts	Exports LeftSidebarGlobalSectionConfig, getLeftSidebarGlobalSectionConfig, getLeftSidebarPersonalSectionConfig. Updates LeftSidebarConfig to include uid and populates it in getLeftSidebarSettings.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant SettingsDialog
  participant GlobalPanel as LeftSidebarGlobalSections
  participant Utils as getLeftSidebarSettings/*Config
  participant Roam as Roam Blocks API

  User->>SettingsDialog: Open Settings
  SettingsDialog->>GlobalPanel: Mount Global Tab
  GlobalPanel->>Utils: getLeftSidebarSettings (includes uid)
  Utils-->>GlobalPanel: { uid, tree }
  alt Global-Section missing
    GlobalPanel->>Roam: createBlock(Global-Section)
    GlobalPanel->>Roam: createBlock(Folded, Children)
  else Global-Section exists
    GlobalPanel->>Utils: getLeftSidebarGlobalSectionConfig
    Utils-->>GlobalPanel: { folded, collapsable, childrenUid, pages }
  end
  User->>GlobalPanel: Add/Remove Page
  GlobalPanel->>Roam: createBlock/deleteBlock
  Roam-->>GlobalPanel: Ack
  GlobalPanel-->>User: Updated list

Loading

sequenceDiagram
  autonumber
  actor User
  participant SettingsDialog
  participant PersonalPanel as LeftSidebarPersonalSections
  participant Utils as getLeftSidebarSettings/*Personal
  participant Roam as Roam Blocks API

  User->>SettingsDialog: Open Settings
  SettingsDialog->>PersonalPanel: Mount Personal Tab
  PersonalPanel->>Utils: getLeftSidebarSettings (Left Sidebar subtree)
  alt Personal-Section missing
    PersonalPanel->>Roam: createBlock(Personal-Section for user)
  end
  PersonalPanel->>Utils: getLeftSidebarPersonalSectionConfig
  Utils-->>PersonalPanel: Sections + refs
  User->>PersonalPanel: Add Section / Convert to Complex / Edit Settings / Manage Children
  alt Convert to Complex
    PersonalPanel->>Roam: createBlock(Settings, Children)
  end
  PersonalPanel->>Roam: createBlock/updateBlock/deleteBlock
  Roam-->>PersonalPanel: Ack
  PersonalPanel-->>User: Updated sections and children

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• Move personal settings to DG:settings dialog #86: Also updates Settings.tsx to adjust personal settings placement; overlaps in settings UI structure.
• Eng 286 show when GitHub sync is disabled globally #143: Modifies SettingsDialog usage of NodeConfig in Settings.tsx; may interact with newly added tabs/components.

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 "ENG-853 left sidebar global and personal settings" is concise and accurately summarizes the primary change in the changeset — adding global and per-user left-sidebar settings and related UI/logic; including the ticket reference is appropriate and the phrasing is specific and relevant for teammates scanning history.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

---

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: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

108-161: Fix potential crash when Personal-Section subtree is missing

personalLeftSidebarNode can be undefined; accessing .uid will throw.

Apply this diff:

-export const getLeftSidebarPersonalSectionConfig = (
+export const getLeftSidebarPersonalSectionConfig = (
   leftSidebarChildren: RoamBasicNode[],
 ): { uid: string; sections: LeftSidebarPersonalSectionConfig[] } => {
   const userName = getCurrentUserDisplayName();

   const personalLeftSidebarNode = getSubTree({
     tree: leftSidebarChildren,
     key: userName + "/Personal-Section",
   });

-  if (personalLeftSidebarNode.uid === "") {
+  if (!personalLeftSidebarNode?.uid) {
     return {
       uid: "",
       sections: [],
     };
   }

-  const sections = (personalLeftSidebarNode?.children || []).map(
+  const sections = (personalLeftSidebarNode.children || []).map(
     (sectionNode): LeftSidebarPersonalSectionConfig => {
       const settingsNode = sectionNode.children?.find(
         (child) => child.text === "Settings",
       );
       const childrenNode = sectionNode.children?.find(
         (child) => child.text === "Children",
       );
@@
   );

   return {
-    uid: personalLeftSidebarNode.uid,
+    uid: personalLeftSidebarNode.uid,
     sections,
   };
 }

🧹 Nitpick comments (3)

apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx (2)

51-55: Guard extractRef usage to avoid empty UID lookups

Calling getTextByBlockUid with an empty/invalid UID can error; add a guard.

Apply this diff:

-    const ref = extractRef(section.text);
-    const blockText = getTextByBlockUid(ref);
+    const ref = extractRef(section.text);
+    const blockText = ref ? getTextByBlockUid(ref) : "";

---

20-88: Minor rendering perf: avoid recomputing originalName on every render

Wrap originalName in useMemo keyed by section.text to reduce DOM queries on re-renders.

-    const ref = extractRef(section.text);
-    const blockText = ref ? getTextByBlockUid(ref) : "";
-    const originalName = blockText || section.text;
+    const originalName = useMemo(() => {
+      const ref = extractRef(section.text);
+      const blockText = ref ? getTextByBlockUid(ref) : "";
+      return blockText || section.text;
+    }, [section.text]);

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

110-140: Duplicate check OK; consider normalizing case

Optional: normalize to avoid “Page” vs “page” duplicates if desired UX.

-      if (pages.some((p) => p.text === pageName)) {
+      if (pages.some((p) => p.text.toLowerCase() === pageName.toLowerCase())) {

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4c9444d and 607445d.

📒 Files selected for processing (4)

• apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx (1 hunks)
• apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx (1 hunks)
• apps/roam/src/components/settings/Settings.tsx (3 hunks)
• apps/roam/src/utils/getLeftSidebarSettings.ts (4 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check

🔇 Additional comments (10)

apps/roam/src/utils/getLeftSidebarSettings.ts (4)

29-35: Exporting Global config type looks good

Public surface area addition is fine and consistent with usage in settings panels.

---

37-44: Including Left Sidebar uid in the config is a good addition

This enables downstream writes without re-deriving the container uid.

---

46-70: Global-section extraction logic LGTM

Defaults on missing nodes are handled safely.

---

169-175: Returning leftSidebarUid is correct and backward compatible

Safe optional chaining and defaults.

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

30-31: New imports are correct and scoped

No side effects; components render inside Tabs only.

---

152-157: Personal Left Sidebar tab wiring looks good

Distinct TabId, lazy render via panel. No state leaks.

---

173-178: Global Left Sidebar tab wiring looks good

Matches personal tab pattern; no prop mismatches.

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

185-205: Panels parent/uid usage is correct given the fix above

Once real UIDs are captured/derived, these controls will persist reliably.

---

170-173: Disable add button logic is sound

Prevents duplicates without extra queries.

---

1-15: Imports organization

New import for getBasicTreeByParentUid is required by the creation fix.

[mdroidian]

Some requested changes.

The bugs from up the stack hinder doing a full review, so I'll stop here.

The "complexSection" in personal settings is a little confusing from a UX perspective.

EG

• Can a user set an Alias if the section isn't complex?
• Is the only way to add children to click the settings icon to change to "complexSection?
• Maybe we can add a "Add Children" button if the section isn't "complex" yet.

Additional questions

• can you set an alias to a child of a complex section? I image that will be a request quite quickly :)

We can talk through this at our next sync

[sid597]

what if there is no button to add children and it always present, if its enpty don't show them if not then show? @mdroidian

[mdroidian]

Couple nits but

[sid597]

cc @mdroidian https://www.loom.com/share/b2fd93135c404ec1a79f06e7407ef7c8?sid=bced4b4c-acd3-4e2c-8e2f-c1807d54fd22