From 13394314cf69dce5557bdf6b1d57c38d3ddff00c Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Mon, 23 Feb 2026 02:41:36 +0530
Subject: [PATCH 1/2] ENG-1472: Refactor BlockPropSettingPanels to add
 accessor-backed default reads (with initialValue fallback)

---
 .../components/BlockPropSettingPanels.tsx     | 139 ++++++++++++++++--
 1 file changed, 125 insertions(+), 14 deletions(-)

diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
index 65d5225f5..ba9b26ce0 100644
--- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
+++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
@@ -19,6 +19,10 @@ import Description from "roamjs-components/components/Description";
 import useSingleChildValue from "roamjs-components/components/ConfigPanels/useSingleChildValue";
 import getShallowTreeByParentUid from "roamjs-components/queries/getShallowTreeByParentUid";
 import {
+  getGlobalSetting,
+  getPersonalSetting,
+  getFeatureFlag,
+  getDiscourseNodeSetting,
   setGlobalSetting,
   setPersonalSetting,
   setFeatureFlag,
@@ -482,6 +486,18 @@ const createAccessors = <T,>(
   setter: setFn,
 });
 
+const readWithFallback = <T,>(
+  reader: () => T | undefined,
+  fallback?: T,
+): T | undefined => {
+  try {
+    const value = reader();
+    return value ?? fallback;
+  } catch {
+    return fallback;
+  }
+};
+
 const globalAccessors = {
   text: createAccessors<string>(setGlobalSetting),
   flag: createAccessors<boolean>(setGlobalSetting),
@@ -531,7 +547,7 @@ export const FeatureFlagPanel = ({
       description={description}
       settingKeys={[featureKey as string]}
       setter={featureFlagSetter}
-      initialValue={initialValue}
+      initialValue={readWithFallback(() => getFeatureFlag(featureKey), initialValue)}
       onBeforeChange={handleBeforeChange}
       onChange={onAfterChange}
       parentUid={parentUid}
@@ -542,31 +558,80 @@ export const FeatureFlagPanel = ({
 };
 
 export const GlobalTextPanel = (props: TextWrapperProps) => (
-  <BaseTextPanel {...props} {...globalAccessors.text} />
+  <BaseTextPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getGlobalSetting<string>(props.settingKeys),
+      props.initialValue,
+    )}
+    {...globalAccessors.text}
+  />
 );
 
 export const GlobalFlagPanel = (props: FlagWrapperProps) => (
-  <BaseFlagPanel {...props} {...globalAccessors.flag} />
+  <BaseFlagPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getGlobalSetting<boolean>(props.settingKeys),
+      props.initialValue,
+    )}
+    {...globalAccessors.flag}
+  />
 );
 
 export const GlobalNumberPanel = (props: NumberWrapperProps) => (
-  <BaseNumberPanel {...props} {...globalAccessors.number} />
+  <BaseNumberPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getGlobalSetting<number>(props.settingKeys),
+      props.initialValue,
+    )}
+    {...globalAccessors.number}
+  />
 );
 
 export const GlobalSelectPanel = (props: SelectWrapperProps) => (
-  <BaseSelectPanel {...props} {...globalAccessors.text} />
+  <BaseSelectPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getGlobalSetting<string>(props.settingKeys),
+      props.initialValue,
+    )}
+    {...globalAccessors.text}
+  />
 );
 
 export const GlobalMultiTextPanel = (props: MultiTextWrapperProps) => (
-  <BaseMultiTextPanel {...props} {...globalAccessors.multiText} />
+  <BaseMultiTextPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getGlobalSetting<string[]>(props.settingKeys),
+      props.initialValue,
+    )}
+    {...globalAccessors.multiText}
+  />
 );
 
 export const PersonalTextPanel = ({ setter, ...props }: TextWrapperProps) => (
-  <BaseTextPanel {...props} setter={setter ?? personalAccessors.text.setter} />
+  <BaseTextPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getPersonalSetting<string>(props.settingKeys),
+      props.initialValue,
+    )}
+    setter={setter ?? personalAccessors.text.setter}
+  />
 );
 
 export const PersonalFlagPanel = (props: FlagWrapperProps) => (
-  <BaseFlagPanel {...props} {...personalAccessors.flag} />
+  <BaseFlagPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getPersonalSetting<boolean>(props.settingKeys),
+      props.initialValue,
+    )}
+    {...personalAccessors.flag}
+  />
 );
 
 export const PersonalNumberPanel = ({
@@ -575,16 +640,34 @@ export const PersonalNumberPanel = ({
 }: NumberWrapperProps) => (
   <BaseNumberPanel
     {...props}
+    initialValue={readWithFallback(
+      () => getPersonalSetting<number>(props.settingKeys),
+      props.initialValue,
+    )}
     setter={setter ?? personalAccessors.number.setter}
   />
 );
 
 export const PersonalSelectPanel = (props: SelectWrapperProps) => (
-  <BaseSelectPanel {...props} {...personalAccessors.text} />
+  <BaseSelectPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getPersonalSetting<string>(props.settingKeys),
+      props.initialValue,
+    )}
+    {...personalAccessors.text}
+  />
 );
 
 export const PersonalMultiTextPanel = (props: MultiTextWrapperProps) => (
-  <BaseMultiTextPanel {...props} {...personalAccessors.multiText} />
+  <BaseMultiTextPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getPersonalSetting<string[]>(props.settingKeys),
+      props.initialValue,
+    )}
+    {...personalAccessors.multiText}
+  />
 );
 
 const createDiscourseNodeSetter =
@@ -610,7 +693,14 @@ export const DiscourseNodeTextPanel = ({
     error?: string;
     onChange?: (value: string) => void;
   }) => (
-  <BaseTextPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />
+  <BaseTextPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getDiscourseNodeSetting<string>(nodeType, props.settingKeys),
+      props.initialValue,
+    )}
+    setter={createDiscourseNodeSetter(nodeType)}
+  />
 );
 
 export const DiscourseNodeFlagPanel = ({
@@ -623,7 +713,14 @@ export const DiscourseNodeFlagPanel = ({
     onBeforeChange?: (checked: boolean) => Promise<boolean>;
     onChange?: (checked: boolean) => void;
   }) => (
-  <BaseFlagPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />
+  <BaseFlagPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getDiscourseNodeSetting<boolean>(nodeType, props.settingKeys),
+      props.initialValue,
+    )}
+    setter={createDiscourseNodeSetter(nodeType)}
+  />
 );
 
 export const DiscourseNodeSelectPanel = ({
@@ -631,7 +728,14 @@ export const DiscourseNodeSelectPanel = ({
   ...props
 }: DiscourseNodeBaseProps &
   RoamBlockSyncProps & { options: string[]; initialValue?: string }) => (
-  <BaseSelectPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />
+  <BaseSelectPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getDiscourseNodeSetting<string>(nodeType, props.settingKeys),
+      props.initialValue,
+    )}
+    setter={createDiscourseNodeSetter(nodeType)}
+  />
 );
 
 export const DiscourseNodeNumberPanel = ({
@@ -643,5 +747,12 @@ export const DiscourseNodeNumberPanel = ({
     min?: number;
     max?: number;
   }) => (
-  <BaseNumberPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />
+  <BaseNumberPanel
+    {...props}
+    initialValue={readWithFallback(
+      () => getDiscourseNodeSetting<number>(nodeType, props.settingKeys),
+      props.initialValue,
+    )}
+    setter={createDiscourseNodeSetter(nodeType)}
+  />
 );

From fe4caa1604906de6bf5264c4151b8bfe9d14a74a Mon Sep 17 00:00:00 2001
From: sid597 <sid597athens@gmail.com>
Date: Wed, 25 Feb 2026 15:54:51 +0530
Subject: [PATCH 2/2] review, fix

---
 .../src/components/settings/AdminPanel.tsx    |   2 -
 .../components/settings/GeneralSettings.tsx   |   1 -
 .../components/BlockPropSettingPanels.tsx     | 118 +++++++-----------
 3 files changed, 47 insertions(+), 74 deletions(-)

diff --git a/apps/roam/src/components/settings/AdminPanel.tsx b/apps/roam/src/components/settings/AdminPanel.tsx
index e9ad85d87..481e13259 100644
--- a/apps/roam/src/components/settings/AdminPanel.tsx
+++ b/apps/roam/src/components/settings/AdminPanel.tsx
@@ -40,7 +40,6 @@ import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
 import posthog from "posthog-js";
 import { setFeatureFlag } from "~/components/settings/utils/accessors";
 import { FeatureFlagPanel } from "./components/BlockPropSettingPanels";
-import { getFeatureFlag } from "./utils/accessors";
 
 const NodeRow = ({ node }: { node: PConceptFull }) => {
   return (
@@ -473,7 +472,6 @@ const FeatureFlagsTab = (): React.ReactElement => {
         title="Use new settings store"
         description="When enabled, accessor getters read from block props instead of the old system. Surfaces dual-write gaps during development."
         featureKey="Use new settings store"
-        initialValue={getFeatureFlag("Use new settings store")}
       />
 
       <Button
diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx
index f28631ba8..7792d0b77 100644
--- a/apps/roam/src/components/settings/GeneralSettings.tsx
+++ b/apps/roam/src/components/settings/GeneralSettings.tsx
@@ -43,7 +43,6 @@ const DiscourseGraphHome = () => {
       <FeatureFlagPanel
         title="(BETA) Left Sidebar"
         description="Whether or not to enable the left sidebar."
-        initialValue={settings.leftSidebarEnabled.value}
         featureKey="Enable left sidebar"
         order={2}
         uid={settings.leftSidebarEnabled.uid}
diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
index ba9b26ce0..81f8fc62f 100644
--- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
+++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx
@@ -486,18 +486,6 @@ const createAccessors = <T,>(
   setter: setFn,
 });
 
-const readWithFallback = <T,>(
-  reader: () => T | undefined,
-  fallback?: T,
-): T | undefined => {
-  try {
-    const value = reader();
-    return value ?? fallback;
-  } catch {
-    return fallback;
-  }
-};
-
 const globalAccessors = {
   text: createAccessors<string>(setGlobalSetting),
   flag: createAccessors<boolean>(setGlobalSetting),
@@ -516,7 +504,6 @@ export const FeatureFlagPanel = ({
   title,
   description,
   featureKey,
-  initialValue,
   onBeforeEnable,
   onAfterChange,
   parentUid,
@@ -526,7 +513,6 @@ export const FeatureFlagPanel = ({
   title: string;
   description: string;
   featureKey: keyof FeatureFlags;
-  initialValue?: boolean;
   onBeforeEnable?: () => Promise<boolean>;
   onAfterChange?: (checked: boolean) => void;
 } & RoamBlockSyncProps) => {
@@ -547,7 +533,7 @@ export const FeatureFlagPanel = ({
       description={description}
       settingKeys={[featureKey as string]}
       setter={featureFlagSetter}
-      initialValue={readWithFallback(() => getFeatureFlag(featureKey), initialValue)}
+      initialValue={getFeatureFlag(featureKey)}
       onBeforeChange={handleBeforeChange}
       onChange={onAfterChange}
       parentUid={parentUid}
@@ -560,10 +546,9 @@ export const FeatureFlagPanel = ({
 export const GlobalTextPanel = (props: TextWrapperProps) => (
   <BaseTextPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getGlobalSetting<string>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getGlobalSetting<string>(props.settingKeys) ?? props.initialValue
+    }
     {...globalAccessors.text}
   />
 );
@@ -571,10 +556,9 @@ export const GlobalTextPanel = (props: TextWrapperProps) => (
 export const GlobalFlagPanel = (props: FlagWrapperProps) => (
   <BaseFlagPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getGlobalSetting<boolean>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getGlobalSetting<boolean>(props.settingKeys) ?? props.initialValue
+    }
     {...globalAccessors.flag}
   />
 );
@@ -582,10 +566,9 @@ export const GlobalFlagPanel = (props: FlagWrapperProps) => (
 export const GlobalNumberPanel = (props: NumberWrapperProps) => (
   <BaseNumberPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getGlobalSetting<number>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getGlobalSetting<number>(props.settingKeys) ?? props.initialValue
+    }
     {...globalAccessors.number}
   />
 );
@@ -593,10 +576,9 @@ export const GlobalNumberPanel = (props: NumberWrapperProps) => (
 export const GlobalSelectPanel = (props: SelectWrapperProps) => (
   <BaseSelectPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getGlobalSetting<string>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getGlobalSetting<string>(props.settingKeys) ?? props.initialValue
+    }
     {...globalAccessors.text}
   />
 );
@@ -604,10 +586,9 @@ export const GlobalSelectPanel = (props: SelectWrapperProps) => (
 export const GlobalMultiTextPanel = (props: MultiTextWrapperProps) => (
   <BaseMultiTextPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getGlobalSetting<string[]>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getGlobalSetting<string[]>(props.settingKeys) ?? props.initialValue
+    }
     {...globalAccessors.multiText}
   />
 );
@@ -615,10 +596,9 @@ export const GlobalMultiTextPanel = (props: MultiTextWrapperProps) => (
 export const PersonalTextPanel = ({ setter, ...props }: TextWrapperProps) => (
   <BaseTextPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getPersonalSetting<string>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getPersonalSetting<string>(props.settingKeys) ?? props.initialValue
+    }
     setter={setter ?? personalAccessors.text.setter}
   />
 );
@@ -626,10 +606,9 @@ export const PersonalTextPanel = ({ setter, ...props }: TextWrapperProps) => (
 export const PersonalFlagPanel = (props: FlagWrapperProps) => (
   <BaseFlagPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getPersonalSetting<boolean>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getPersonalSetting<boolean>(props.settingKeys) ?? props.initialValue
+    }
     {...personalAccessors.flag}
   />
 );
@@ -640,10 +619,9 @@ export const PersonalNumberPanel = ({
 }: NumberWrapperProps) => (
   <BaseNumberPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getPersonalSetting<number>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getPersonalSetting<number>(props.settingKeys) ?? props.initialValue
+    }
     setter={setter ?? personalAccessors.number.setter}
   />
 );
@@ -651,10 +629,9 @@ export const PersonalNumberPanel = ({
 export const PersonalSelectPanel = (props: SelectWrapperProps) => (
   <BaseSelectPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getPersonalSetting<string>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getPersonalSetting<string>(props.settingKeys) ?? props.initialValue
+    }
     {...personalAccessors.text}
   />
 );
@@ -662,10 +639,9 @@ export const PersonalSelectPanel = (props: SelectWrapperProps) => (
 export const PersonalMultiTextPanel = (props: MultiTextWrapperProps) => (
   <BaseMultiTextPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getPersonalSetting<string[]>(props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getPersonalSetting<string[]>(props.settingKeys) ?? props.initialValue
+    }
     {...personalAccessors.multiText}
   />
 );
@@ -695,10 +671,10 @@ export const DiscourseNodeTextPanel = ({
   }) => (
   <BaseTextPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getDiscourseNodeSetting<string>(nodeType, props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
+      props.initialValue
+    }
     setter={createDiscourseNodeSetter(nodeType)}
   />
 );
@@ -715,10 +691,10 @@ export const DiscourseNodeFlagPanel = ({
   }) => (
   <BaseFlagPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getDiscourseNodeSetting<boolean>(nodeType, props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getDiscourseNodeSetting<boolean>(nodeType, props.settingKeys) ??
+      props.initialValue
+    }
     setter={createDiscourseNodeSetter(nodeType)}
   />
 );
@@ -730,10 +706,10 @@ export const DiscourseNodeSelectPanel = ({
   RoamBlockSyncProps & { options: string[]; initialValue?: string }) => (
   <BaseSelectPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getDiscourseNodeSetting<string>(nodeType, props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
+      props.initialValue
+    }
     setter={createDiscourseNodeSetter(nodeType)}
   />
 );
@@ -749,10 +725,10 @@ export const DiscourseNodeNumberPanel = ({
   }) => (
   <BaseNumberPanel
     {...props}
-    initialValue={readWithFallback(
-      () => getDiscourseNodeSetting<number>(nodeType, props.settingKeys),
-      props.initialValue,
-    )}
+    initialValue={
+      getDiscourseNodeSetting<number>(nodeType, props.settingKeys) ??
+      props.initialValue
+    }
     setter={createDiscourseNodeSetter(nodeType)}
   />
 );