From 3d9efb23eca45f88fa49ba0ef741ade2a338719c Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 19 Dec 2025 21:11:46 +0200
Subject: [PATCH] chore(right_pane): make right pane collapsible

---
 .../widgets/sidebar/RightPanelContainer.css   |  1 -
 .../widgets/sidebar/RightPanelContainer.tsx   | 38 ++++++++++---------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.css b/apps/client/src/widgets/sidebar/RightPanelContainer.css
index 39c67fd9a..9afce65e8 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.css
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.css
@@ -1,5 +1,4 @@
 body.experimental-feature-new-layout #right-pane {
-    width: 300px;
     display: flex;
     flex-direction: column;
 
diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
index e10fae749..bb15ee10a 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
@@ -16,37 +16,41 @@ import TableOfContents from "./TableOfContents";
 const MIN_WIDTH_PERCENT = 5;
 
 export default function RightPanelContainer() {
-    useSplit();
-
     const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
+    useSplit(rightPaneVisible);
+
     const { note } = useActiveNoteContext();
     const noteType = useNoteProperty(note, "type");
-    const items = [
+    const items = (rightPaneVisible ? [
         (noteType === "text" || noteType === "doc") && <TableOfContents />,
         noteType === "text" && <HighlightsList />
-    ].filter(Boolean);
+    ] : []).filter(Boolean);
 
     return (
         <div id="right-pane">
-            {items.length > 0 ? (
-                items
-            ) : (
-                <div className="no-items">
-                    <Icon icon="bx bx-sidebar" />
-                    {t("right_pane.empty_message")}
-                    <Button
-                        text={t("right_pane.empty_button")}
-                        onClick={() => setRightPaneVisible(!rightPaneVisible)}
-                    />
-                </div>
+            {rightPaneVisible && (
+                items.length > 0 ? (
+                    items
+                ) : (
+                    <div className="no-items">
+                        <Icon icon="bx bx-sidebar" />
+                        {t("right_pane.empty_message")}
+                        <Button
+                            text={t("right_pane.empty_button")}
+                            onClick={() => setRightPaneVisible(!rightPaneVisible)}
+                        />
+                    </div>
+                )
             )}
         </div>
     );
 }
 
-function useSplit() {
+function useSplit(visible: boolean) {
     // Split between right pane and the content pane.
     useEffect(() => {
+        if (!visible) return;
+
         // We are intentionally omitting useTriliumOption to avoid re-render due to size change.
         const rightPaneWidth = Math.max(MIN_WIDTH_PERCENT, options.getInt("rightPaneWidth") ?? MIN_WIDTH_PERCENT);
         const splitInstance = Split(["#center-pane", "#right-pane"], {
@@ -57,5 +61,5 @@ function useSplit() {
             onDragEnd: (sizes) => options.save("rightPaneWidth", Math.round(sizes[1]))
         });
         return () => splitInstance.destroy();
-    }, []);
+    }, [ visible ]);
 }