ENG-1819: Make global left sidebar fold toggle personal

apps/roam/src/components/LeftSidebarView.tsx

@@ -32,6 +32,7 @@ import {
   isQueryBlockRef,
   type LeftSidebarConfig,
   type LeftSidebarPersonalSectionConfig,
+  getGlobalSectionFoldedMarkerText,
   mergeGlobalSectionWithAccessor,
   mergePersonalSectionsWithAccessor,
 } from "~/utils/getLeftSidebarSettings";
@@ -51,7 +52,6 @@ import {
   PERSONAL_KEYS,
   GLOBAL_KEYS,
   LEFT_SIDEBAR_KEYS,
-  LEFT_SIDEBAR_SETTINGS_KEYS,
 } from "~/components/settings/utils/settingKeys";
 import type { LeftSidebarGlobalSettings } from "~/components/settings/utils/zodSchema";
 import { createBlock } from "roamjs-components/writes";
@@ -617,53 +617,46 @@ const PersonalSections = ({
 
 const GlobalSection = ({
   config,
+  folded,
+  leftSidebarUid,
   onGlobalChildrenReorder,
   onloadArgs,
 }: {
   config: LeftSidebarConfig["global"];
+  folded: boolean;
+  leftSidebarUid: string;
   onGlobalChildrenReorder: (oldIndex: number, newIndex: number) => void;
   onloadArgs: OnloadArgs;
 }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(!config.settings?.folded.value);
+  const [isOpen, setIsOpen] = useState<boolean>(!folded);
   const isTogglingRef = useRef(false);
   if (!config.children?.length) return null;
-  const isCollapsable = config.settings?.collapsable.value;
 
   const handleToggle = async () => {
-    if (!isCollapsable || !config.settings) return;
     if (isTogglingRef.current) return;
     isTogglingRef.current = true;
     try {
-      const settings = config.settings;
       const nextIsOpen = !isOpen;
       setIsOpen(nextIsOpen);
-      if (nextIsOpen) {
-        const children = getBasicTreeByParentUid(settings.uid);
-        await Promise.all(
-          children
-            .filter((c) => c.text === "Folded")
-            .map((c) => deleteBlock(c.uid)),
-        );
-        settings.folded.uid = undefined;
-        settings.folded.value = false;
-      } else {
-        const newUid = window.roamAlphaAPI.util.generateUID();
-        await createBlock({
-          parentUid: settings.uid,
-          node: { text: "Folded", uid: newUid },
-        });
-        settings.folded.uid = newUid;
-        settings.folded.value = true;
+      const userUid = window.roamAlphaAPI.user.uid();
+      if (userUid) {
+        const markerText = getGlobalSectionFoldedMarkerText(userUid);
+        if (nextIsOpen) {
+          const children = getBasicTreeByParentUid(leftSidebarUid);
+          await Promise.all(
+            children
+              .filter((c) => c.text === markerText)
+              .map((c) => deleteBlock(c.uid)),
+          );
+        } else {
+          await createBlock({
+            parentUid: leftSidebarUid,
+            node: { text: markerText },
+          });
+        }
+        refreshConfigTree();
       }
-      refreshConfigTree();
-      setGlobalSetting(
-        [
-          GLOBAL_KEYS.leftSidebar,
-          LEFT_SIDEBAR_KEYS.settings,
-          LEFT_SIDEBAR_SETTINGS_KEYS.folded,
-        ],
-        !nextIsOpen,
-      );
+      setPersonalSetting([PERSONAL_KEYS.globalSectionFolded], !nextIsOpen);
     } finally {
       isTogglingRef.current = false;
     }
@@ -690,18 +683,12 @@ const GlobalSection = ({
       >
         <div className="flex w-full items-center justify-between">
           <span>GLOBAL</span>
-          {isCollapsable && (
-            <span className="sidebar-title-button-chevron p-1">
-              <Icon icon={isOpen ? "chevron-down" : "chevron-right"} />
-            </span>
-          )}
+          <span className="sidebar-title-button-chevron p-1">
+            <Icon icon={isOpen ? "chevron-down" : "chevron-right"} />
+          </span>
         </div>
       </div>
-      {isCollapsable ? (
-        <Collapse isOpen={isOpen}>{children}</Collapse>
-      ) : (
-        children
-      )}
+      <Collapse isOpen={isOpen}>{children}</Collapse>
     </>
   );
 };
@@ -718,6 +705,9 @@ const buildConfig = (snapshot?: SettingsSnapshot): LeftSidebarConfig => {
     : getPersonalSetting<
         ReturnType<typeof getPersonalSettings>[typeof PERSONAL_KEYS.leftSidebar]
       >([PERSONAL_KEYS.leftSidebar]);
+  const globalSectionFoldedValue = snapshot
+    ? snapshot.personalSettings[PERSONAL_KEYS.globalSectionFolded]
+    : getPersonalSetting<boolean>([PERSONAL_KEYS.globalSectionFolded]);
 
   // Read UIDs from old system (needed for fold CRUD during dual-write)
   const oldConfig = getCurrentLeftSidebarConfig();
@@ -727,6 +717,10 @@ const buildConfig = (snapshot?: SettingsSnapshot): LeftSidebarConfig => {
     favoritesMigrated: oldConfig.favoritesMigrated,
     sidebarMigrated: oldConfig.sidebarMigrated,
     global: mergeGlobalSectionWithAccessor(oldConfig.global, globalValues),
+    globalSectionFolded: {
+      uid: oldConfig.globalSectionFolded.uid,
+      value: globalSectionFoldedValue ?? oldConfig.globalSectionFolded.value,
+    },
     personal: {
       uid: oldConfig.personal.uid,
       sections: mergePersonalSectionsWithAccessor(
@@ -916,6 +910,8 @@ const LeftSidebarView = ({
       <FavoritesPopover onloadArgs={onloadArgs} />
       <GlobalSection
         config={config.global}
+        folded={config.globalSectionFolded.value}
+        leftSidebarUid={config.uid}
         onGlobalChildrenReorder={reorderGlobalChildren}
         onloadArgs={onloadArgs}
       />

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

@@ -1,15 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState, memo } from "react";
 import { Button, ButtonGroup, Collapse } from "@blueprintjs/core";
 import { arrayMove } from "@dnd-kit/sortable";
-import { GlobalFlagPanel } from "~/components/settings/components/BlockPropSettingPanels";
 import {
   setGlobalSetting,
   type SettingsSnapshot,
 } from "~/components/settings/utils/accessors";
 import {
   GLOBAL_KEYS,
   LEFT_SIDEBAR_KEYS,
-  LEFT_SIDEBAR_SETTINGS_KEYS,
 } from "~/components/settings/utils/settingKeys";
 import AutocompleteInput from "roamjs-components/components/AutocompleteInput";
 import getAllPageNames from "roamjs-components/queries/getAllPageNames";
@@ -118,11 +116,6 @@ const LeftSidebarGlobalSectionsContent = ({
             order: 0,
             node: { text: globalSectionText },
           });
-          const settingsUid = await createBlock({
-            parentUid: globalSectionUid,
-            order: 0,
-            node: { text: "Settings" },
-          });
           const childrenUid = await createBlock({
             parentUid: globalSectionUid,
             order: 0,
@@ -132,11 +125,6 @@ const LeftSidebarGlobalSectionsContent = ({
           setPages([]);
           setGlobalSection({
             uid: globalSectionUid,
-            settings: {
-              uid: settingsUid,
-              collapsable: { uid: undefined, value: false },
-              folded: { uid: undefined, value: false },
-            },
             childrenUid,
             children: [],
           });
@@ -289,27 +277,6 @@ const LeftSidebarGlobalSectionsContent = ({
 
   return (
     <div className="flex flex-col gap-4 p-1">
-      <div
-        className="global-section-settings rounded-md p-3 hover:bg-gray-50"
-        style={{
-          border: "1px solid rgba(51, 51, 51, 0.2)",
-        }}
-      >
-        <GlobalFlagPanel
-          title="Collapsable"
-          description="Make global section collapsable"
-          settingKeys={[
-            GLOBAL_KEYS.leftSidebar,
-            LEFT_SIDEBAR_KEYS.settings,
-            LEFT_SIDEBAR_SETTINGS_KEYS.collapsable,
-          ]}
-          initialValue={globalSection.settings?.collapsable?.value || false}
-          order={0}
-          uid={globalSection.settings?.collapsable?.uid || ""}
-          parentUid={globalSection.settings?.uid || ""}
-        />
-      </div>
-
       <div
         className="global-section-children rounded-md p-3 hover:bg-gray-50"
         style={{

apps/roam/src/components/settings/utils/accessors.ts

@@ -307,6 +307,11 @@ const getLegacyPersonalSetting = (keys: string[]): unknown => {
     return readPathValue(leftSidebarSettings, keys.slice(1));
   }
 
+  if (keys[0] === "Global section folded") {
+    return getLeftSidebarSettings(discourseConfigRef.tree).globalSectionFolded
+      .value;
+  }
+
   return undefined;
 };
 
@@ -403,14 +408,6 @@ const getLegacyGlobalSetting = (keys: string[]): unknown => {
     leftSidebarSettings["Children"] = sidebar.global.children.map(
       (c) => c.text,
     );
-    const sidebarSettingValues: Record<string, unknown> = {};
-    sidebarSettingValues["Collapsable"] =
-      sidebar.global.settings?.collapsable.value ??
-      DEFAULT_GLOBAL_SETTINGS["Left sidebar"].Settings.Collapsable;
-    sidebarSettingValues["Folded"] =
-      sidebar.global.settings?.folded.value ??
-      DEFAULT_GLOBAL_SETTINGS["Left sidebar"].Settings.Folded;
-    leftSidebarSettings["Settings"] = sidebarSettingValues;
     if (keys.length === 1) return leftSidebarSettings;
     return readPathValue(leftSidebarSettings, keys.slice(1));
   }

apps/roam/src/components/settings/utils/init.ts

@@ -125,7 +125,7 @@ const ensureLegacyConfigBlocks = async (pageUid: string): Promise<void> => {
   const globalSectionMap = buildBlockMap(leftSidebarMap["Global-Section"]);
   await ensureBlocksExist(
     leftSidebarMap["Global-Section"],
-    ["Children", "Settings"],
+    ["Children"],
     globalSectionMap,
   );
 

apps/roam/src/components/settings/utils/settingKeys.ts

@@ -32,6 +32,7 @@ export const PERSONAL_KEYS = {
   personalNodeMenuTrigger: "Personal node menu trigger",
   nodeSearchMenuTrigger: "Node search menu trigger",
   leftSidebar: "Left sidebar",
+  globalSectionFolded: "Global section folded",
   query: "Query",
   reifiedRelationTriples: "Reified relation triples",
   canvasNodeShortcuts: "Canvas node shortcuts",
@@ -61,7 +62,6 @@ export const SUGGESTIVE_MODE_KEYS = {
 
 export const LEFT_SIDEBAR_KEYS = {
   children: "Children",
-  settings: "Settings",
 } as const satisfies Record<string, keyof LeftSidebarGlobalSettings>;
 
 export const EXPORT_KEYS = {
@@ -74,14 +74,6 @@ export const EXPORT_KEYS = {
   frontmatter: "Frontmatter",
 } as const satisfies Record<string, keyof ExportSettings>;
 
-export const LEFT_SIDEBAR_SETTINGS_KEYS = {
-  collapsable: "Collapsable",
-  folded: "Folded",
-} as const satisfies Record<
-  string,
-  keyof LeftSidebarGlobalSettings["Settings"]
->;
-
 export const DISCOURSE_NODE_KEYS = {
   canvasSettings: "canvasSettings",
   overlay: "overlay",

apps/roam/src/components/settings/utils/zodSchema.example.ts

@@ -137,21 +137,13 @@ const suggestiveModeGlobalSettings: SuggestiveModeGlobalSettings = {
 
 const leftSidebarGlobalSettings: LeftSidebarGlobalSettings = {
   Children: ["daily-notes-uid", "quick-capture-uid", "inbox-uid"],
-  Settings: {
-    Collapsable: true,
-    Folded: false,
-  },
 };
 
 const globalSettings: GlobalSettings = {
   Trigger: ";;",
   "Canvas page format": "Canvas - {date} - {title}",
   "Left sidebar": {
     Children: ["daily-notes-uid", "quick-capture-uid", "inbox-uid"],
-    Settings: {
-      Collapsable: true,
-      Folded: false,
-    },
   },
   Export: {
     "Remove special characters": true,
@@ -255,10 +247,6 @@ const defaultGlobalSettings: GlobalSettings = {
   "Canvas page format": "",
   "Left sidebar": {
     Children: [],
-    Settings: {
-      Collapsable: false,
-      Folded: false,
-    },
   },
   Export: {
     "Remove special characters": false,
@@ -372,6 +360,7 @@ const personalSettings: PersonalSettings = {
       },
     },
   ],
+  "Global section folded": false,
   "Personal node menu trigger": { modifiers: 0, key: ";;" },
   "Node search menu trigger": "//",
   "Discourse tool shortcut": { modifiers: 0, key: "d" },
@@ -404,6 +393,7 @@ const personalSettings: PersonalSettings = {
 
 const defaultPersonalSettings: PersonalSettings = {
   "Left sidebar": [],
+  "Global section folded": false,
   "Personal node menu trigger": { modifiers: 0, key: "" },
   "Node search menu trigger": "",
   "Discourse tool shortcut": { modifiers: 0, key: "" },

apps/roam/src/components/settings/utils/zodSchema.ts

@@ -185,12 +185,6 @@ export const SuggestiveModeGlobalSettingsSchema = z.object({
 
 export const LeftSidebarGlobalSettingsSchema = z.object({
   Children: z.array(z.string()).default([]),
-  Settings: z
-    .object({
-      Collapsable: z.boolean().default(false),
-      Folded: z.boolean().default(false),
-    })
-    .default({}),
 });
 
 export const GlobalSettingsSchema = z.object({
@@ -242,6 +236,7 @@ export const QuerySettingsSchema = z.object({
 
 export const PersonalSettingsSchema = z.object({
   "Left sidebar": LeftSidebarPersonalSettingsSchema,
+  "Global section folded": z.boolean().default(false),
   "Personal node menu trigger": z
     .union([
       z.object({ modifiers: z.number(), key: z.string() }),