From 679e85a84ad75780f94cb6b0758cff989588bb33 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Tue, 30 Jan 2024 22:04:25 -0800
Subject: [PATCH] Fix sidebar width not persisting when un-collapsing (#267)

* Do not persist collapsed width to db

* remove console.logs

* one more

* one more

* remove setTemp from getWidth and add to the startResize call
---
 src/app/common/common.tsx | 45 +++++++++++++++++----------------------
 src/model/model.ts        | 23 +++++++++++---------
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/app/common/common.tsx b/src/app/common/common.tsx
index 9f4b21439..787ace340 100644
--- a/src/app/common/common.tsx
+++ b/src/app/common/common.tsx
@@ -1304,7 +1304,9 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
 
         document.body.style.cursor = "col-resize";
         mobx.action(() => {
-            GlobalModel.mainSidebarModel.isDragging.set(true);
+            const sbm = GlobalModel.mainSidebarModel;
+            sbm.setTempWidthAndTempCollapsed(this.resizeStartWidth, sbm.getCollapsed());
+            sbm.isDragging.set(true);
         })();
     }
 
@@ -1312,13 +1314,13 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
     onMouseMove(event: MouseEvent) {
         event.preventDefault();
 
-        let { parentRef, enableSnap, position } = this.props;
-        let parentRect = parentRef.current?.getBoundingClientRect();
-        let mainSidebarModel = GlobalModel.mainSidebarModel;
+        const { parentRef, enableSnap, position } = this.props;
+        const parentRect = parentRef.current?.getBoundingClientRect();
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
 
         if (!mainSidebarModel.isDragging.get() || !parentRect) return;
 
-        let delta, newWidth;
+        let delta: number, newWidth: number;
 
         if (position === "right") {
             delta = parentRect.right - event.clientX - this.startX;
@@ -1329,10 +1331,10 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
         newWidth = this.resizeStartWidth + delta;
 
         if (enableSnap) {
-            let minWidth = MagicLayout.MainSidebarMinWidth;
-            let snapPoint = minWidth + MagicLayout.MainSidebarSnapThreshold;
-            let dragResistance = MagicLayout.MainSidebarDragResistance;
-            let dragDirection;
+            const minWidth = MagicLayout.MainSidebarMinWidth;
+            const snapPoint = minWidth + MagicLayout.MainSidebarSnapThreshold;
+            const dragResistance = MagicLayout.MainSidebarDragResistance;
+            let dragDirection: string;
 
             if (delta - this.prevDelta > 0) {
                 dragDirection = "+";
@@ -1387,26 +1389,19 @@ class ResizableSidebar extends React.Component<ResizableSidebarProps> {
 
     @boundMethod
     toggleCollapsed() {
-        let mainSidebarModel = GlobalModel.mainSidebarModel;
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
 
-        let tempCollapsed = mainSidebarModel.getCollapsed();
-        let width = MagicLayout.MainSidebarDefaultWidth;
-        let newWidth;
-        if (tempCollapsed) {
-            newWidth = width;
-        } else {
-            newWidth = MagicLayout.MainSidebarMinWidth;
-        }
-
-        mainSidebarModel.setTempWidthAndTempCollapsed(newWidth, !tempCollapsed);
-        GlobalCommandRunner.clientSetSidebar(newWidth, !tempCollapsed);
+        const tempCollapsed = mainSidebarModel.getCollapsed();
+        const width = mainSidebarModel.getWidth(true);
+        mainSidebarModel.setTempWidthAndTempCollapsed(width, !tempCollapsed);
+        GlobalCommandRunner.clientSetSidebar(width, !tempCollapsed);
     }
 
     render() {
-        let { className, children } = this.props;
-        let mainSidebarModel = GlobalModel.mainSidebarModel;
-        let width = mainSidebarModel.getWidth();
-        let isCollapsed = mainSidebarModel.getCollapsed();
+        const { className, children } = this.props;
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
+        const width = mainSidebarModel.getWidth();
+        const isCollapsed = mainSidebarModel.getCollapsed();
 
         return (
             <div className={cn("sidebar", className, { collapsed: isCollapsed })} style={{ width }}>
diff --git a/src/model/model.ts b/src/model/model.ts
index 9dc093669..7829d4b51 100644
--- a/src/model/model.ts
+++ b/src/model/model.ts
@@ -2638,7 +2638,12 @@ class MainSidebarModel {
         })();
     }
 
-    getWidth(): number {
+    /**
+     * Gets the intended width for the sidebar. If the sidebar is being dragged, returns the tempWidth. If the sidebar is collapsed, returns the default width.
+     * @param ignoreCollapse If true, returns the persisted width even if the sidebar is collapsed.
+     * @returns The intended width for the sidebar or the default width if the sidebar is collapsed. Can be overridden using ignoreCollapse.
+     */
+    getWidth(ignoreCollapse: boolean = false): number {
         const clientData = GlobalModel.clientData.get();
         let width = clientData?.clientopts?.mainsidebar?.width ?? MagicLayout.MainSidebarDefaultWidth;
         if (this.isDragging.get()) {
@@ -2651,12 +2656,13 @@ class MainSidebarModel {
             return this.tempWidth.get();
         }
         // Set by CLI and collapsed
-        if (this.getCollapsed() && width != MagicLayout.MainSidebarMinWidth) {
-            this.setTempWidthAndTempCollapsed(MagicLayout.MainSidebarMinWidth, true);
-            return MagicLayout.MainSidebarMinWidth;
-        }
-        // Set by CLI and not collapsed
-        if (!this.getCollapsed()) {
+        if (this.getCollapsed()) {
+            if (ignoreCollapse) {
+                return width;
+            } else {
+                return MagicLayout.MainSidebarMinWidth;
+            }
+        } else {
             if (width <= MagicLayout.MainSidebarMinWidth) {
                 width = MagicLayout.MainSidebarDefaultWidth;
             }
@@ -2664,10 +2670,7 @@ class MainSidebarModel {
             if (width < snapPoint || width > MagicLayout.MainSidebarMaxWidth) {
                 width = MagicLayout.MainSidebarDefaultWidth;
             }
-            this.setTempWidthAndTempCollapsed(width, false);
-            return width;
         }
-        this.setTempWidthAndTempCollapsed(width, this.getCollapsed());
         return width;
     }