ENG-1190 Replace existing roam-js components with blockProp based ones

[sid597]

https://www.loom.com/share/8ff86c595970423bbf1ec161baf5efa4

---

Summary by CodeRabbit

• New Features
  • Added configurable settings panels for global and personal preferences, including text, boolean toggles, numeric inputs, dropdown selections, and multi-value options
  • Introduced feature flag configuration panel with validation and change callbacks for enhanced control

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

[linear]

ENG-1190 Replace existing roam-js components with blockProp based ones

[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-1345: Modify existing RoamJS component onChange to also change props #745 : 2 dependent PRs (#684 , #688 )
• ENG-1190 Replace existing roam-js components with blockProp based ones #689 👈 (View in Graphite)
• 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]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx`:
- Around line 171-174: The handler for NumericInput (handleChange) must guard
against valueAsNumber being NaN to avoid storing NaN in settings: update
handleChange to check Number.isNaN(valueAsNumber) and in that case
setValue(undefined) (or another explicit empty sentinel) and call
setter(settingKeys, undefined) (or skip calling setter), otherwise call
setValue(valueAsNumber) and setter(settingKeys, valueAsNumber); reference the
handleChange function, NumericInput, setValue, setter and settingKeys when
making the change.
- Around line 131-147: The event handler handleChange uses
React.ChangeEvent<HTMLInputElement> but BlueprintJS Checkbox passes a
React.FormEvent<HTMLInputElement>; change the signature of handleChange to (e:
React.FormEvent<HTMLInputElement>) and read the value via
e.currentTarget.checked (or cast e.target to HTMLInputElement), update any
related references (handleChange usage and declaration) so setter(settingKeys,
checked) and onChange?.(checked) receive the correct boolean; keep the async
onBeforeChange flow intact and ensure imports/types reference React.FormEvent
where needed.

🧹 Nitpick comments (1)

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

200-202: Consider guarding against empty options array.

If options is an empty array and defaultValue is not provided, options[0] evaluates to undefined, which could cause unexpected behavior in HTMLSelect.

💡 Suggested defensive check

   const [value, setValue] = useState(
-    () => getter(settingKeys) ?? defaultValue ?? options[0],
+    () => getter(settingKeys) ?? defaultValue ?? options[0] ?? "",
   );

[mdroidian]

A few changes to make sure you do before merging.

Also, make sure to format with prettier before merging.

[devin-ai-integration]

Devin Review found 1 new potential issue.

View issue and 9 additional flags in Devin Review.

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 9 additional findings in Devin Review.