ENG-1470: Fix dual-read gaps found during flag-ON validation

apps/roam/src/components/LeftSidebarView.tsx

@@ -36,6 +36,7 @@ import { getLeftSidebarSettings } from "~/utils/getLeftSidebarSettings";
 import {
   getGlobalSetting,
   getPersonalSetting,
+  getPersonalSettings,
   setGlobalSetting,
   setPersonalSetting,
 } from "~/components/settings/utils/accessors";
@@ -45,10 +46,7 @@ import {
   LEFT_SIDEBAR_KEYS,
   LEFT_SIDEBAR_SETTINGS_KEYS,
 } from "~/components/settings/utils/settingKeys";
-import type {
-  LeftSidebarGlobalSettings,
-  PersonalSection,
-} from "~/components/settings/utils/zodSchema";
+import type { LeftSidebarGlobalSettings } from "~/components/settings/utils/zodSchema";
 import { createBlock } from "roamjs-components/writes";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
@@ -112,7 +110,7 @@ const openTarget = async (e: React.MouseEvent, targetUid: string) => {
   }
 };
 
-const toggleFoldedState = ({
+const toggleFoldedState = async ({
   isOpen,
   setIsOpen,
   folded,
@@ -130,23 +128,26 @@ const toggleFoldedState = ({
   const newFolded = !isOpen;
 
   if (isOpen) {
-    setIsOpen(false);
-    if (folded.uid) {
-      void deleteBlock(folded.uid);
-      folded.uid = undefined;
-      folded.value = false;
-    }
+    const children = getBasicTreeByParentUid(parentUid);
+    await Promise.all(
+      children
+        .filter((c) => c.text === "Folded")
+        .map((c) => deleteBlock(c.uid)),
+    );
+    folded.uid = undefined;
+    folded.value = false;
   } else {
-    setIsOpen(true);
     const newUid = window.roamAlphaAPI.util.generateUID();
-    void createBlock({
+    await createBlock({
       parentUid,
       node: { text: "Folded", uid: newUid },
     });
     folded.uid = newUid;
     folded.value = true;
   }
 
+  refreshConfigTree();
+
   if (isGlobal) {
     setGlobalSetting(
       [
@@ -157,13 +158,20 @@ const toggleFoldedState = ({
       newFolded,
     );
   } else if (sectionIndex !== undefined) {
-    const sections =
-      getPersonalSetting<PersonalSection[]>([PERSONAL_KEYS.leftSidebar]) || [];
+    const sections = [...getPersonalSettings()[PERSONAL_KEYS.leftSidebar]];
     if (sections[sectionIndex]) {
-      sections[sectionIndex].Settings.Folded = newFolded;
+      sections[sectionIndex] = {
+        ...sections[sectionIndex],
+        Settings: {
+          ...sections[sectionIndex].Settings,
+          Folded: newFolded,
+        },
+      };
       setPersonalSetting([PERSONAL_KEYS.leftSidebar], sections);
     }
   }
+
+  setIsOpen(newFolded);
 };
 
 const SectionChildren = ({
@@ -225,7 +233,7 @@ const PersonalSectionItem = ({
   const handleChevronClick = () => {
     if (!section.settings) return;
 
-    toggleFoldedState({
+    void toggleFoldedState({
       isOpen,
       setIsOpen,
       folded: section.settings.folded,
@@ -297,7 +305,7 @@ const GlobalSection = ({ config }: { config: LeftSidebarConfig["global"] }) => {
         className="sidebar-title-button flex w-full items-center border-none bg-transparent py-1 pl-6 pr-2.5 font-semibold outline-none"
         onClick={() => {
           if (!isCollapsable || !config.settings) return;
-          toggleFoldedState({
+          void toggleFoldedState({
             isOpen,
             setIsOpen,
             folded: config.settings.folded,
@@ -333,9 +341,9 @@ const buildConfig = (): LeftSidebarConfig => {
   const globalValues = getGlobalSetting<LeftSidebarGlobalSettings>([
     GLOBAL_KEYS.leftSidebar,
   ]);
-  const personalValues = getPersonalSetting<PersonalSection[]>([
-    PERSONAL_KEYS.leftSidebar,
-  ]);
+  const personalValues = getPersonalSetting<
+    ReturnType<typeof getPersonalSettings>[typeof PERSONAL_KEYS.leftSidebar]
+  >([PERSONAL_KEYS.leftSidebar]);
 
   // Read UIDs from old system (needed for fold CRUD during dual-write)
   const oldConfig = getCurrentLeftSidebarConfig();

apps/roam/src/components/settings/AdminPanel.tsx

@@ -276,7 +276,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
     };
   }, []);
 
-  const [suggestiveModeEnabled, setSuggestiveModeEnabled] = useState(
+  const [suggestiveModeEnabled, setSuggestiveModeEnabled] = useState(() =>
     getFeatureFlag("Suggestive mode enabled"),
   );
   const [suggestiveModeUid, setSuggestiveModeUid] = useState(
@@ -294,12 +294,15 @@ const FeatureFlagsTab = (): React.ReactElement => {
           if (checked) {
             setIsAlertOpen(true);
           } else {
-            if (suggestiveModeUid) {
-              void deleteBlock(suggestiveModeUid);
-              setSuggestiveModeUid(undefined);
-            }
-            setSuggestiveModeEnabled(false);
-            setFeatureFlag("Suggestive mode enabled", false);
+            void (async () => {
+              if (suggestiveModeUid) {
+                await deleteBlock(suggestiveModeUid);
+                setSuggestiveModeUid(undefined);
+              }
+              refreshConfigTree();
+              setSuggestiveModeEnabled(false);
+              setFeatureFlag("Suggestive mode enabled", false);
+            })();
           }
         }}
         labelElement={
@@ -321,6 +324,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
             node: { text: "(BETA) Suggestive Mode Enabled" },
           }).then((uid) => {
             setSuggestiveModeUid(uid);
+            refreshConfigTree();
             setSuggestiveModeEnabled(true);
             setFeatureFlag("Suggestive mode enabled", true);
             setIsAlertOpen(false);

apps/roam/src/components/settings/DiscourseNodeCanvasSettings.tsx

@@ -142,13 +142,13 @@ const DiscourseNodeCanvasSettings = ({
         settingKeys={[DISCOURSE_NODE_KEYS.canvasSettings, CANVAS_KEYS.keyImage]}
         initialValue={isKeyImage}
         onChange={(checked) => {
-          setIsKeyImage(checked);
           if (checked && !keyImageOption) setKeyImageOption("first-image");
           void setInputSetting({
             blockUid: uid,
             key: "key-image",
             value: checked ? "true" : "false",
           });
+          setTimeout(() => setIsKeyImage(checked), 100);
         }}
       />
       <RadioGroup

apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx

@@ -125,14 +125,9 @@ const SectionItem = memo(
             order: 0,
             node: { text: "Settings" },
           });
-          const foldedUid = await createBlock({
-            parentUid: settingsUid,
-            order: 0,
-            node: { text: "Folded" },
-          });
           const truncateSettingUid = await createBlock({
             parentUid: settingsUid,
-            order: 1,
+            order: 0,
             node: { text: "Truncate-result?", children: [{ text: "75" }] },
           });
 
@@ -149,7 +144,7 @@ const SectionItem = memo(
                   ...s,
                   settings: {
                     uid: settingsUid,
-                    folded: { uid: foldedUid, value: false },
+                    folded: { uid: undefined, value: false },
                     truncateResult: { uid: truncateSettingUid, value: 75 },
                   },
                   childrenUid,
@@ -167,7 +162,7 @@ const SectionItem = memo(
                     ...s,
                     settings: {
                       uid: settingsUid,
-                      folded: { uid: foldedUid, value: false },
+                      folded: { uid: undefined, value: false },
                       truncateResult: { uid: truncateSettingUid, value: 75 },
                     },
                     children: [],

apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx

@@ -18,6 +18,7 @@ import {
 import Description from "roamjs-components/components/Description";
 import useSingleChildValue from "roamjs-components/components/ConfigPanels/useSingleChildValue";
 import getShallowTreeByParentUid from "roamjs-components/queries/getShallowTreeByParentUid";
+import refreshConfigTree from "~/utils/refreshConfigTree";
 import {
   getGlobalSetting,
   getPersonalSetting,
@@ -143,8 +144,11 @@ const BaseTextPanel = ({
     window.clearTimeout(debounceRef.current);
     debounceRef.current = window.setTimeout(() => {
       if (errorRef.current) return;
-      setter(settingKeys, newValue);
       syncToBlock?.(newValue);
+      setTimeout(() => {
+        refreshConfigTree();
+        setter(settingKeys, newValue);
+      }, 100);
     }, DEBOUNCE_MS);
   };
 
@@ -227,9 +231,10 @@ const BaseFlagPanel = ({
     }
 
     setInternalValue(checked);
-    setter(settingKeys, checked);
     await syncFlagToBlock(checked);
-    onChange?.(checked);
+    refreshConfigTree();
+    setter(settingKeys, checked);
+    setTimeout(() => onChange?.(checked), 100);
   };
 
   return (
@@ -276,8 +281,9 @@ const BaseNumberPanel = ({
   const handleChange = (valueAsNumber: number) => {
     if (Number.isNaN(valueAsNumber)) return;
     setValue(valueAsNumber);
-    setter(settingKeys, valueAsNumber);
     syncToBlock?.(valueAsNumber);
+    refreshConfigTree();
+    setter(settingKeys, valueAsNumber);
     onChange?.(valueAsNumber);
   };
 
@@ -323,8 +329,9 @@ const BaseSelectPanel = ({
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const newValue = e.target.value;
     setValue(newValue);
-    setter(settingKeys, newValue);
     syncToBlock?.(newValue);
+    refreshConfigTree();
+    setter(settingKeys, newValue);
   };
 
   return (
@@ -400,6 +407,7 @@ const BaseMultiTextPanel = ({
           },
         });
         childUidsRef.current = [...childUidsRef.current, valueUid];
+        refreshConfigTree();
       }
     }
   };
@@ -408,7 +416,6 @@ const BaseMultiTextPanel = ({
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const newValues = values.filter((_, i) => i !== index);
     setValues(newValues);
-    setter(settingKeys, newValues);
     onChange?.(newValues);
 
     if (hasBlockSync) {
@@ -420,7 +427,9 @@ const BaseMultiTextPanel = ({
         // eslint-disable-next-line @typescript-eslint/naming-convention
         (_, i) => i !== index,
       );
+      refreshConfigTree();
     }
+    setter(settingKeys, newValues);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {