From 368701610f039241eeb0fda27db28803b607527e Mon Sep 17 00:00:00 2001
From: yhua1998 <101091026+yhua1998@users.noreply.github.com>
Date: Wed, 13 Sep 2023 13:57:30 +0800
Subject: [PATCH 1/3] fix: Width changes abruptly when dragging the sidebar
 (jumps)

In useRef is non-responsive, we can't get the modified config.sidebarWidth dynamic modification value in handleMouseUp
---
 app/components/sidebar.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 634639f1d40..c42138efc63 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useCallback } from "react";
 
 import styles from "./home.module.scss";
 
@@ -53,7 +53,7 @@ function useHotKey() {
 }
 
 function useDragSideBar() {
-  const limit = (x: number) => Math.min(MAX_SIDEBAR_WIDTH, x);
+  const limit = useCallback((x: number) => Math.min(MAX_SIDEBAR_WIDTH, x));
 
   const config = useAppConfig();
   const startX = useRef(0);
@@ -71,14 +71,16 @@ function useDragSideBar() {
   });
 
   const handleMouseUp = useRef(() => {
-    startDragWidth.current = config.sidebarWidth ?? 300;
+    // In useRef the data is non-responsive, so `config.sidebarWidth` can't get the dynamic sidebarWidth
+    // startDragWidth.current = config.sidebarWidth ?? 300;
     window.removeEventListener("mousemove", handleMouseMove.current);
     window.removeEventListener("mouseup", handleMouseUp.current);
   });
 
   const onDragMouseDown = (e: MouseEvent) => {
     startX.current = e.clientX;
-
+    // Remembers the initial width each time the mouse is pressed
+    startDragWidth.current = config.sidebarWidth
     window.addEventListener("mousemove", handleMouseMove.current);
     window.addEventListener("mouseup", handleMouseUp.current);
   };

From 28103c901dba611a531117fca2589cbc73f43b55 Mon Sep 17 00:00:00 2001
From: yhua1998 <101091026+yhua1998@users.noreply.github.com>
Date: Wed, 13 Sep 2023 16:24:21 +0800
Subject: [PATCH 2/3] Refactor: sidebar drag

---
 app/components/sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index c42138efc63..db13bc9b42e 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -53,7 +53,7 @@ function useHotKey() {
 }
 
 function useDragSideBar() {
-  const limit = useCallback((x: number) => Math.min(MAX_SIDEBAR_WIDTH, x));
+  const limit = (x: number) => Math.min(MAX_SIDEBAR_WIDTH, x);
 
   const config = useAppConfig();
   const startX = useRef(0);

From 48e6087b1be1562c50de3b4aa648445df5510539 Mon Sep 17 00:00:00 2001
From: yhua1998 <385362330@qq.com>
Date: Wed, 13 Sep 2023 16:55:31 +0800
Subject: [PATCH 3/3] fix: The width of the sidebar changes abruptly by
 dragging it multiple times over and over again (bouncing)

---
 app/components/sidebar.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index db13bc9b42e..4519c4be941 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -67,7 +67,13 @@ function useDragSideBar() {
     lastUpdateTime.current = Date.now();
     const d = e.clientX - startX.current;
     const nextWidth = limit(startDragWidth.current + d);
-    config.update((config) => (config.sidebarWidth = nextWidth));
+    config.update((config) => {
+      if (nextWidth < MIN_SIDEBAR_WIDTH) {
+        config.sidebarWidth = NARROW_SIDEBAR_WIDTH;
+      } else {
+        config.sidebarWidth = nextWidth;
+      }
+    });
   });
 
   const handleMouseUp = useRef(() => {
@@ -80,7 +86,7 @@ function useDragSideBar() {
   const onDragMouseDown = (e: MouseEvent) => {
     startX.current = e.clientX;
     // Remembers the initial width each time the mouse is pressed
-    startDragWidth.current = config.sidebarWidth
+    startDragWidth.current = config.sidebarWidth;
     window.addEventListener("mousemove", handleMouseMove.current);
     window.addEventListener("mouseup", handleMouseUp.current);
   };