feat(right_pane): store expansion state

apps/client/src/widgets/sidebar/HighlightsList.tsx

@@ -24,7 +24,7 @@ export default function HighlightsList() {
     const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
 
     return (
-        <RightPanelWidget title={t("highlights_list_2.title")}>
+        <RightPanelWidget id="highlights" title={t("highlights_list_2.title")}>
             {((noteType === "text" && isReadOnly) || (noteType === "doc")) && <ReadOnlyTextHighlightsList />}
             {noteType === "text" && !isReadOnly && <EditableTextHighlightsList />}
         </RightPanelWidget>

apps/client/src/widgets/sidebar/RightPanelContainer.tsx

@@ -28,16 +28,10 @@ export default function RightPanelContainer() {
         return () => splitInstance.destroy();
     }, []);
 
-    const items = [
-        <TableOfContents />,
-        <HighlightsList />
-    ];
-
-    const sizesBeforeCollapse = useRef(new WeakMap<HTMLElement, number>());
-
     return (
         <div id="right-pane">
-            {items}
+            <TableOfContents />
+            <HighlightsList />
         </div>
     );
 }

apps/client/src/widgets/sidebar/RightPanelWidget.tsx

@@ -2,17 +2,20 @@ import clsx from "clsx";
 import { ComponentChildren } from "preact";
 import { useContext, useRef, useState } from "preact/hooks";
 
+import { useTriliumOptionJson } from "../react/hooks";
 import Icon from "../react/Icon";
 import { ParentComponent } from "../react/react_utils";
 
 interface RightPanelWidgetProps {
+    id: string;
     title: string;
     children: ComponentChildren;
     buttons?: ComponentChildren;
 }
 
-export default function RightPanelWidget({ title, buttons, children }: RightPanelWidgetProps) {
+export default function RightPanelWidget({ id, title, buttons, children }: RightPanelWidgetProps) {
-    const [ expanded, setExpanded ] = useState(true);
+    const [ rightPaneCollapsedItems, setRightPaneCollapsedItems ] = useTriliumOptionJson<string[]>("rightPaneCollapsedItems");
+    const [ expanded, setExpanded ] = useState(!rightPaneCollapsedItems.includes(id));
     const containerRef = useRef<HTMLDivElement>(null);
     const parentComponent = useContext(ParentComponent);
 
@@ -27,7 +30,19 @@ export default function RightPanelWidget({ title, buttons, children }: RightPane
         >
             <div
                 class="card-header"
-                onClick={() => setExpanded(!expanded)}
+                onClick={() => {
+                    const newExpanded = !expanded;
+                    setExpanded(newExpanded);
+                    const rightPaneCollapsedItemsSet = new Set(rightPaneCollapsedItems);
+                    if (newExpanded) {
+                        rightPaneCollapsedItemsSet.delete(id);
+                    } else {
+                        rightPaneCollapsedItemsSet.add(id);
+                    }
+                    if (rightPaneCollapsedItemsSet.size !== rightPaneCollapsedItems.length) {
+                        setRightPaneCollapsedItems(Array.from(rightPaneCollapsedItemsSet));
+                    }
+                }}
             >
                 <Icon
                     icon="bx bx-chevron-down"

apps/client/src/widgets/sidebar/TableOfContents.tsx

@@ -26,7 +26,7 @@ export default function TableOfContents() {
     const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
 
     return (
-        <RightPanelWidget title={t("toc.table_of_contents")}>
+        <RightPanelWidget id="toc" title={t("toc.table_of_contents")}>
             {((noteType === "text" && isReadOnly) || (noteType === "doc")) && <ReadOnlyTextTableOfContents />}
             {noteType === "text" && !isReadOnly && <EditableTextTableOfContents />}
         </RightPanelWidget>

apps/server/src/routes/api/options.ts

@@ -51,8 +51,9 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "imageMaxWidthHeight",
     "imageJpegQuality",
     "leftPaneWidth",
-    "rightPaneWidth",
     "leftPaneVisible",
+    "rightPaneWidth",
+    "rightPaneCollapsedItems",
     "rightPaneVisible",
     "nativeTitleBarVisible",
     "headingStyle",

apps/server/src/services/options_init.ts

@@ -105,6 +105,7 @@ const defaultOptions: DefaultOption[] = [
     { name: "leftPaneVisible", value: "true", isSynced: false },
     { name: "rightPaneWidth", value: "25", isSynced: false },
     { name: "rightPaneVisible", value: "true", isSynced: false },
+    { name: "rightPaneCollapsedItems", value: "[]", isSynced: false },
     { name: "nativeTitleBarVisible", value: "false", isSynced: false },
     { name: "eraseEntitiesAfterTimeInSeconds", value: "604800", isSynced: true }, // default is 7 days
     { name: "eraseEntitiesAfterTimeScale", value: "86400", isSynced: true }, // default 86400 seconds = Day

packages/commons/src/lib/options_interface.ts

@@ -77,6 +77,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     imageJpegQuality: number;
     leftPaneWidth: number;
     rightPaneWidth: number;
+    rightPaneCollapsedItems: string;
     eraseEntitiesAfterTimeInSeconds: number;
     eraseEntitiesAfterTimeScale: number;
     autoReadonlySizeText: number;