ENG-1273: Migrate small personal settings

[sid597]

NOTE: No usage video I tested all these and they work. The video will not be helpful because not able to show the console logs in loom video.

Summary by CodeRabbit

Release Notes

• Refactor

  • Migrated settings to be personalized per user instead of applied globally, enabling individual control over features like Discourse Context Overlay, Suggestive Mode Overlay, Page Preview, Text Selection Popup, and sidebar behavior.
  • Streamlined personal settings interface with consolidated UI components.

• Documentation

  • Added comprehensive migration guide documenting settings system updates.

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

---

[linear]

ENG-1273 Migrate all small 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]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• port discourse node config #718
• port query settings #717
• migrate personal left sidebar setting #705
• global left sidebar settings #704
• ENG-1280 Discourse node: Query builder and editor component for block props  #697
• ENG-1225: Discourse node migration simple settings #696
• ENG-1273: Migrate small personal settings #691 👈 (View in Graphite)
• ENG-1272 Migrate all small global settings components #688 : 1 other dependent PR (#690 )
• ENG-1345: Modify existing RoamJS component onChange to also change props #745 : 1 other dependent PR (#684 )
• ENG-1190 Replace existing roam-js components with blockProp based ones #689
• ENG-1188: prod: pull watchers for prop based settings #682
• ENG-1187: Prod: Implement get and set for block prop based settings #669
• ENG-1189: Prod: Init block prop based schema #666
• ENG-1330: zod schema for discourse relations #719
• main

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

[coderabbitai]

✅ Actions performed

Full review triggered.

[coderabbitai]

📝 Walkthrough

Walkthrough

A settings migration refactor replaces direct extensionAPI.settings access with getPersonalSetting accessor calls across multiple components and utilities. HomePersonalSettings.tsx consolidates individual checkbox UI into PersonalFlagPanel components. A comprehensive CLAUDE.md migration guide is added documenting patterns and status.

Changes

Cohort / File(s)	Change Summary
Documentation CLAUDE.md	New comprehensive migration guide covering settings migration mistakes, checklist, key files, block prop settings migration phases, pattern references, Zod schemas, and pending migration items for Discourse Node settings and sidebar configurations.
Settings Migration - Accessors apps/roam/src/components/DiscourseFloatingMenu.tsx, apps/roam/src/utils/createDiscourseNode.ts, apps/roam/src/utils/initializeObserversAndListeners.ts, apps/roam/src/utils/registerCommandPaletteCommands.ts	Replaced extensionAPI.settings access with getPersonalSetting lookup for "Hide Feedback Button", "Disable Sidebar Open", "Suggestive Mode Overlay", "Page Preview", "Discourse Context Overlay", and "Text Selection Popup" settings. Updated registerCommandPaletteCommands to use synchronous getPersonalSetting/setPersonalSetting for toggleDiscourseContextOverlay, removing async/try-catch.
Settings UI Consolidation apps/roam/src/components/settings/HomePersonalSettings.tsx	Consolidated individual Checkbox-based settings into PersonalFlagPanel components for Overlay, Suggestive Mode Overlay, Text Selection Popup, Preview, Hide Feedback Button, Auto Canvas Relations, Canvas Overlay, Streamline Styling, and Disable Product Diagnostics. Removed direct checkbox state management and extensionAPI.settings calls, replacing with onChange handlers triggering observers and actions. Implemented inline DOM manipulation for Streamline Styling CSS loading.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Consolidate UI settings #109: Both PRs heavily refactor HomePersonalSettings.tsx, consolidating individual checkbox controls into unified panel components.
• Add Personal Node Menu Trigger, style Node Menu #40: Both PRs modify initializeObserversAndListeners.ts to change how per-user settings are read, replacing extensionAPI.settings with getPersonalSetting accessor calls.
• Roam: Add feedback toggle #118: Both PRs update the feedback button visibility flow, shifting from extensionAPI.settings to personal-setting accessors in HomePersonalSettings and DiscourseFloatingMenu.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title 'ENG-1273: Migrate small personal settings' directly and clearly describes the main change in the pull request: migrating personal settings from extension-wide settings to user-specific personal settings across multiple components and utilities.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

---

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

[devin-ai-integration]

Devin Review found 2 potential issues.

View issues and 4 additional flags in Devin Review.

[mdroidian]

Could you please record a loom video showing the working changed UI. Show the settings being updating in both the legacy as well as the new prop storage.

Please also format all files with prettier.

[sid597]

Note we are using getSetting and setSetting from the extensionAPI, so when we use these panel we save to both the extensionApi and the blockProps.