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

Author: esimkowitz

src/app/common/common.tsx

@@ -1304,21 +1304,23 @@ 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);
         })();
     }
 
     @boundMethod
     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;
-
-        let tempCollapsed = mainSidebarModel.getCollapsed();
-        let width = MagicLayout.MainSidebarDefaultWidth;
-        let newWidth;
-        if (tempCollapsed) {
-            newWidth = width;
-        } else {
-            newWidth = MagicLayout.MainSidebarMinWidth;
-        }
+        const mainSidebarModel = GlobalModel.mainSidebarModel;
 
-        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 }}>

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,23 +2656,21 @@ 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;
             }
             const snapPoint = MagicLayout.MainSidebarMinWidth + MagicLayout.MainSidebarSnapThreshold;
             if (width < snapPoint || width > MagicLayout.MainSidebarMaxWidth) {
                 width = MagicLayout.MainSidebarDefaultWidth;
             }
-            this.setTempWidthAndTempCollapsed(width, false);
-            return width;
         }
-        this.setTempWidthAndTempCollapsed(width, this.getCollapsed());
         return width;
     }