From 263c970320e0f40963d07cddfd9d1e33fb2c7ddd Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Wed, 6 Nov 2024 09:10:15 +0500
Subject: [PATCH] web: add support for macOS like pane resizing logic

---
 apps/web/src/app.tsx                         |  8 +++--
 apps/web/src/components/split-pane/index.tsx | 32 +++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app.tsx b/apps/web/src/app.tsx
index 8951874eb..24aa6d1e9 100644
--- a/apps/web/src/app.tsx
+++ b/apps/web/src/app.tsx
@@ -156,7 +156,7 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
             </Flex>
           ) : (
             !isFocusMode && (
-              <Pane minSize={50} snapSize={120}>
+              <Pane minSize={50} snapSize={120} maxSize={300}>
                 <NavigationMenu
                   toggleNavigationContainer={(state) => {
                     setShow(state || !show);
@@ -167,7 +167,11 @@ function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
             )
           )}
           {!isFocusMode && show && (
-            <Pane style={{ flex: 1, display: "flex" }} snapSize={200}>
+            <Pane
+              style={{ flex: 1, display: "flex" }}
+              snapSize={200}
+              maxSize={500}
+            >
               <ScopedThemeProvider
                 className="listMenu"
                 scope="list"
diff --git a/apps/web/src/components/split-pane/index.tsx b/apps/web/src/components/split-pane/index.tsx
index 86caf3902..6a36281f7 100644
--- a/apps/web/src/components/split-pane/index.tsx
+++ b/apps/web/src/components/split-pane/index.tsx
@@ -228,7 +228,10 @@ export const SplitPane = React.forwardRef<
   );
 
   const onDragging = useCallback(
-    function (e: React.MouseEvent<HTMLDivElement, MouseEvent>, i: number) {
+    function onDragging(
+      e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+      i: number
+    ) {
       const curAxis = { x: e.pageX, y: e.pageY };
       let distanceX = curAxis[splitAxis] - axis.current[splitAxis];
       axis.current = { x: e.pageX, y: e.pageY };
@@ -241,16 +244,29 @@ export const SplitPane = React.forwardRef<
       if (currentSize + distanceX >= rightBorder)
         distanceX = rightBorder - currentSize;
 
-      if (currentSize + distanceX < currentPaneLimits.min) return;
-      if (currentSize + distanceX > currentPaneLimits.max) return;
-
       const nextSizes = [...sizes.current];
+
+      // if current pane size is out of limit, adjust the previous pane
+      if (
+        currentSize + distanceX > currentPaneLimits.max ||
+        currentSize + distanceX < currentPaneLimits.min
+      ) {
+        if (i - 1 >= 0) {
+          // reset axis
+          axis.current[splitAxis] += -distanceX;
+          onDragging(e, i - 1);
+        }
+        return;
+      }
+
       nextSizes[i] += distanceX;
-      nextSizes[i + 1] -= distanceX;
-
-      if (nextSizes[i + 1] < nextPaneLimits.min)
-        nextSizes[i + 1] = nextPaneLimits.min;
+      // keep the next pane size in the min-max range
+      nextSizes[i + 1] = Math.min(
+        nextPaneLimits.max,
+        Math.max(nextPaneLimits.min, nextSizes[i + 1] - distanceX)
+      );
 
+      // snapping logic
       if (currentPaneLimits.snap > 0 && distanceX <= 0) {
         if (nextSizes[i] <= currentPaneLimits.snap / 2)
           nextSizes[i] = currentPaneLimits.min;