ENG-1217: Port section component in left sidebar

[sid597]

https://www.loom.com/share/f375f9fab2864d4ab06cd020eeafeaea

---

Summary by CodeRabbit

• Bug Fixes

  • Fixed left sidebar page changes not persisting when reordering, adding, or removing pages.

• Improvements

  • Enhanced synchronization of personal settings to ensure configuration changes are properly saved.
  • Improved flexibility in settings panel configuration options.

[linear]

ENG-1217 Section components in Left sidebar

[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-1217: Port section component in left sidebar #804 👈 (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

The PR migrates left-sidebar settings components to new block-prop driven persistence approaches. Global settings now wire GlobalFlagPanel with setGlobalSetting for page operations (add/move/remove), while personal settings implement PersonalNumberPanel with a new sectionsToBlockProps synchronization layer and setPersonalSetting persistence. Zod schemas are updated to use UID-based identifiers and array-based structures.

Changes

Cohort / File(s)	Summary
Global Settings Migration apps/roam/src/components/settings/LeftSidebarGlobalSettings.tsx	Replaced FlagPanel with GlobalFlagPanel for global-section flags. Added pagesToUids helper to map pages to UIDs. Wired setGlobalSetting persistence for page reorder (movePage), add (addPage), and remove (removePage) operations. Updated state-first-then-persist flow.
Personal Settings Migration apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx	Replaced NumberPanel with PersonalNumberPanel. Introduced sectionsToBlockProps and syncAllSectionsToBlockProps helpers to map section config to nested block-props structure. Added sectionsRef shared reference to avoid stale closures. Wired setPersonalSetting persistence across multiple mutation paths (add/move/edit sections, alias changes). Expanded aliasDebounceRef usage for debounced sync operations.
Block Prop Components apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx	Extended NumberWrapperProps with optional setter?: NumberSetter field. Updated PersonalNumberPanel to destructure and forward setter prop, defaulting to personalAccessors.number.setter when not provided, enabling per-instance setter override.
Schema Updates apps/roam/src/components/settings/utils/zodSchema.ts	Added required name: string field to PersonalSectionSchema. Replaced Page string with uid: string in Children items. Changed LeftSidebarPersonalSettingsSchema from record<string, ...> (default \{\}) to array of PersonalSectionSchema (default \[\]).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• ENG-1187: Prod: Implement get and set for block prop based settings #669 — Introduces the new setGlobalSetting and setPersonalSetting accessors that this PR directly wires into the settings components for persistence.
• ENG-1105: zod schema for all the settings #664 — Modifies PersonalSection and LeftSidebarPersonalSettings Zod schemas, directly overlapping with the schema field and structure changes in this PR.
• ENG-853 left sidebar global and personal settings #441 — Updates the same LeftSidebarGlobalSettings and LeftSidebarPersonalSettings files to alter add/remove/reorder logic and persistence, sharing control-flow concerns with this PR.

🚥 Pre-merge checks | ✅ 3

✅ 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 'Port section component in left sidebar' directly relates to the main changes in the PR, which involve porting/refactoring section-related components in the left sidebar settings files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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.}

[mdroidian]

The audio in the loom is mostly inaudible. Please review the looms before submitting.
Also, a couple files are not formatted again.

There's a single comment asking to explain why caused the PersonalNumberPanel to break the pattern from the others. I think it would be worth exploring that deeper to see if there are alternative solutions prior to breaking the pattern.

[mdroidian]

format with prettier

[mdroidian]

format with prettier

[mdroidian]

Why is this panel breaking the pattern with setter? What is the reason/need for this?