From fe8983e212606be1a5cabe9ac1b6dbe17b008032 Mon Sep 17 00:00:00 2001
From: CY <19247537+cyappdev@users.noreply.github.com>
Date: Thu, 29 Jan 2026 07:53:24 +0800
Subject: [PATCH] feat: Folder column size adjustment (#384)

---
 frontend/components/ResizablePane.tsx          | 18 ++++++++++++------
 .../[projectId]/folders/FoldersPane.tsx        |  2 +-
 .../projects/[projectId]/folders/layout.tsx    | 12 ++++++++----
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/frontend/components/ResizablePane.tsx b/frontend/components/ResizablePane.tsx
index 5330539..9668c18 100644
--- a/frontend/components/ResizablePane.tsx
+++ b/frontend/components/ResizablePane.tsx
@@ -4,16 +4,22 @@ import { useState, useRef, useEffect, ReactNode } from 'react';
 type Props = {
   leftPane: ReactNode;
   rightPane: ReactNode;
+  minLeftWidth?: number;
+  minRightWidth?: number;
+  defaultLeftWidth?: number;
 };
 
-export default function ResizablePanes({ leftPane, rightPane }: Props) {
-  const [leftWidth, setLeftWidth] = useState(70); // default 70%
+export default function ResizablePanes({
+  leftPane,
+  rightPane,
+  minLeftWidth = 40,
+  minRightWidth = 15,
+  defaultLeftWidth = 70,
+}: Props) {
+  const [leftWidth, setLeftWidth] = useState(defaultLeftWidth); // default 70%
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const minLeftWidth = 40; // left panel min width 40%
-  const minRightWidth = 15; // right panel min width 15%
-
   const handleMouseDown = () => {
     setIsDragging(true);
   };
@@ -45,7 +51,7 @@ export default function ResizablePanes({ leftPane, rightPane }: Props) {
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
     };
-  }, [isDragging]);
+  }, [isDragging, minLeftWidth, minRightWidth]);
 
   return (
     <div ref={containerRef} className="flex h-full" style={{ userSelect: isDragging ? 'none' : 'auto' }}>
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
index f88cd94..1064ecb 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
@@ -132,7 +132,7 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
 
   return (
     <>
-      <div className="w-80 min-h-[calc(100vh-64px)] border-r-1 dark:border-neutral-700">
+      <div className="min-h-[calc(100vh-64px)] border-r-1 dark:border-neutral-700">
         <Button
           startContent={<Plus size={16} />}
           size="sm"
diff --git a/frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx b/frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx
index a0f674f..6929281 100644
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/layout.tsx
@@ -1,5 +1,6 @@
 import { useTranslations } from 'next-intl';
 import FoldersPane from './FoldersPane';
+import ResizablePanes from '@/components/ResizablePane';
 
 export default function FoldersLayout({
   children,
@@ -25,9 +26,12 @@ export default function FoldersLayout({
   };
 
   return (
-    <div className="flex w-full">
-      <FoldersPane projectId={params.projectId} messages={messages} locale={params.locale} />
-      <div className="flex-grow w-full">{children}</div>
-    </div>
+    <ResizablePanes
+      minLeftWidth={15}
+      minRightWidth={40}
+      defaultLeftWidth={20}
+      leftPane={<FoldersPane projectId={params.projectId} messages={messages} locale={params.locale} />}
+      rightPane={children}
+    />
   );
 }