From ddb6b3ea8ae3129efe7c68523af5cc211d9ada4b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 18 Dec 2025 16:29:35 +0200
Subject: [PATCH] feat(right_pane): store expansion state

---
 .../src/widgets/sidebar/HighlightsList.tsx    |  2 +-
 .../widgets/sidebar/RightPanelContainer.tsx   | 10 ++-------
 .../src/widgets/sidebar/RightPanelWidget.tsx  | 21 ++++++++++++++++---
 .../src/widgets/sidebar/TableOfContents.tsx   |  2 +-
 apps/server/src/routes/api/options.ts         |  3 ++-
 apps/server/src/services/options_init.ts      |  1 +
 packages/commons/src/lib/options_interface.ts |  1 +
 7 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/widgets/sidebar/HighlightsList.tsx b/apps/client/src/widgets/sidebar/HighlightsList.tsx
index ad634935f..ed73bac60 100644
--- a/apps/client/src/widgets/sidebar/HighlightsList.tsx
+++ b/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>
diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
index 1a837bd1d..a12bb447c 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
+++ b/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>
     );
 }
diff --git a/apps/client/src/widgets/sidebar/RightPanelWidget.tsx b/apps/client/src/widgets/sidebar/RightPanelWidget.tsx
index 7f2aceedf..6b3a56925 100644
--- a/apps/client/src/widgets/sidebar/RightPanelWidget.tsx
+++ b/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) {
-    const [ expanded, setExpanded ] = useState(true);
+export default function RightPanelWidget({ id, title, buttons, children }: RightPanelWidgetProps) {
+    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"
diff --git a/apps/client/src/widgets/sidebar/TableOfContents.tsx b/apps/client/src/widgets/sidebar/TableOfContents.tsx
index 46967655f..48c5217e9 100644
--- a/apps/client/src/widgets/sidebar/TableOfContents.tsx
+++ b/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>
diff --git a/apps/server/src/routes/api/options.ts b/apps/server/src/routes/api/options.ts
index 0a6940cb7..e7377bdfd 100644
--- a/apps/server/src/routes/api/options.ts
+++ b/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",
diff --git a/apps/server/src/services/options_init.ts b/apps/server/src/services/options_init.ts
index 30754ab11..e8ef3c694 100644
--- a/apps/server/src/services/options_init.ts
+++ b/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
diff --git a/packages/commons/src/lib/options_interface.ts b/packages/commons/src/lib/options_interface.ts
index 4bf445c12..fc1564e33 100644
--- a/packages/commons/src/lib/options_interface.ts
+++ b/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;