ENG-1472: Refactor BlockPropSettingPanels to add accessor-backed default reads

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

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}

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,
@@ -500,7 +504,6 @@ export const FeatureFlagPanel = ({
   title,
   description,
   featureKey,
-  initialValue,
   onBeforeEnable,
   onAfterChange,
   parentUid,
@@ -510,7 +513,6 @@ export const FeatureFlagPanel = ({
   title: string;
   description: string;
   featureKey: keyof FeatureFlags;
-  initialValue?: boolean;
   onBeforeEnable?: () => Promise<boolean>;
   onAfterChange?: (checked: boolean) => void;
 } & RoamBlockSyncProps) => {
@@ -531,7 +533,7 @@ export const FeatureFlagPanel = ({
       description={description}
       settingKeys={[featureKey as string]}
       setter={featureFlagSetter}
-      initialValue={initialValue}
+      initialValue={getFeatureFlag(featureKey)}
       onBeforeChange={handleBeforeChange}
       onChange={onAfterChange}
       parentUid={parentUid}
@@ -542,31 +544,73 @@ export const FeatureFlagPanel = ({
 };
 
 export const GlobalTextPanel = (props: TextWrapperProps) => (
-  <BaseTextPanel {...props} {...globalAccessors.text} />
+  <BaseTextPanel
+    {...props}
+    initialValue={
+      getGlobalSetting<string>(props.settingKeys) ?? props.initialValue
+    }
+    {...globalAccessors.text}
+  />
 );
 
 export const GlobalFlagPanel = (props: FlagWrapperProps) => (
-  <BaseFlagPanel {...props} {...globalAccessors.flag} />
+  <BaseFlagPanel
+    {...props}
+    initialValue={
+      getGlobalSetting<boolean>(props.settingKeys) ?? props.initialValue
+    }
+    {...globalAccessors.flag}
+  />
 );
 
 export const GlobalNumberPanel = (props: NumberWrapperProps) => (
-  <BaseNumberPanel {...props} {...globalAccessors.number} />
+  <BaseNumberPanel
+    {...props}
+    initialValue={
+      getGlobalSetting<number>(props.settingKeys) ?? props.initialValue
+    }
+    {...globalAccessors.number}
+  />
 );
 
 export const GlobalSelectPanel = (props: SelectWrapperProps) => (
-  <BaseSelectPanel {...props} {...globalAccessors.text} />
+  <BaseSelectPanel
+    {...props}
+    initialValue={
+      getGlobalSetting<string>(props.settingKeys) ?? props.initialValue
+    }
+    {...globalAccessors.text}
+  />
 );
 
 export const GlobalMultiTextPanel = (props: MultiTextWrapperProps) => (
-  <BaseMultiTextPanel {...props} {...globalAccessors.multiText} />
+  <BaseMultiTextPanel
+    {...props}
+    initialValue={
+      getGlobalSetting<string[]>(props.settingKeys) ?? props.initialValue
+    }
+    {...globalAccessors.multiText}
+  />
 );
 
 export const PersonalTextPanel = ({ setter, ...props }: TextWrapperProps) => (
-  <BaseTextPanel {...props} setter={setter ?? personalAccessors.text.setter} />
+  <BaseTextPanel
+    {...props}
+    initialValue={
+      getPersonalSetting<string>(props.settingKeys) ?? props.initialValue
+    }
+    setter={setter ?? personalAccessors.text.setter}
+  />
 );
 
 export const PersonalFlagPanel = (props: FlagWrapperProps) => (
-  <BaseFlagPanel {...props} {...personalAccessors.flag} />
+  <BaseFlagPanel
+    {...props}
+    initialValue={
+      getPersonalSetting<boolean>(props.settingKeys) ?? props.initialValue
+    }
+    {...personalAccessors.flag}
+  />
 );
 
 export const PersonalNumberPanel = ({
@@ -575,16 +619,31 @@ export const PersonalNumberPanel = ({
 }: NumberWrapperProps) => (
   <BaseNumberPanel
     {...props}
+    initialValue={
+      getPersonalSetting<number>(props.settingKeys) ?? props.initialValue
+    }
     setter={setter ?? personalAccessors.number.setter}
   />
 );
 
 export const PersonalSelectPanel = (props: SelectWrapperProps) => (
-  <BaseSelectPanel {...props} {...personalAccessors.text} />
+  <BaseSelectPanel
+    {...props}
+    initialValue={
+      getPersonalSetting<string>(props.settingKeys) ?? props.initialValue
+    }
+    {...personalAccessors.text}
+  />
 );
 
 export const PersonalMultiTextPanel = (props: MultiTextWrapperProps) => (
-  <BaseMultiTextPanel {...props} {...personalAccessors.multiText} />
+  <BaseMultiTextPanel
+    {...props}
+    initialValue={
+      getPersonalSetting<string[]>(props.settingKeys) ?? props.initialValue
+    }
+    {...personalAccessors.multiText}
+  />
 );
 
 const createDiscourseNodeSetter =
@@ -610,7 +669,14 @@ export const DiscourseNodeTextPanel = ({
     error?: string;
     onChange?: (value: string) => void;
   }) => (
-  <BaseTextPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />
+  <BaseTextPanel
+    {...props}
+    initialValue={
+      getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
+      props.initialValue
+    }
+    setter={createDiscourseNodeSetter(nodeType)}
+  />
 );
 
 export const DiscourseNodeFlagPanel = ({
@@ -623,15 +689,29 @@ export const DiscourseNodeFlagPanel = ({
     onBeforeChange?: (checked: boolean) => Promise<boolean>;
     onChange?: (checked: boolean) => void;
   }) => (
-  <BaseFlagPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />
+  <BaseFlagPanel
+    {...props}
+    initialValue={
+      getDiscourseNodeSetting<boolean>(nodeType, props.settingKeys) ??
+      props.initialValue
+    }
+    setter={createDiscourseNodeSetter(nodeType)}
+  />
 );
 
 export const DiscourseNodeSelectPanel = ({
   nodeType,
   ...props
 }: DiscourseNodeBaseProps &
   RoamBlockSyncProps & { options: string[]; initialValue?: string }) => (
-  <BaseSelectPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />
+  <BaseSelectPanel
+    {...props}
+    initialValue={
+      getDiscourseNodeSetting<string>(nodeType, props.settingKeys) ??
+      props.initialValue
+    }
+    setter={createDiscourseNodeSetter(nodeType)}
+  />
 );
 
 export const DiscourseNodeNumberPanel = ({
@@ -643,5 +723,12 @@ export const DiscourseNodeNumberPanel = ({
     min?: number;
     max?: number;
   }) => (
-  <BaseNumberPanel {...props} setter={createDiscourseNodeSetter(nodeType)} />
+  <BaseNumberPanel
+    {...props}
+    initialValue={
+      getDiscourseNodeSetting<number>(nodeType, props.settingKeys) ??
+      props.initialValue
+    }
+    setter={createDiscourseNodeSetter(nodeType)}
+  />
 );