feat: Folder column size adjustment (#384)

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) {
+export default function ResizablePanes({
-  const [leftWidth, setLeftWidth] = useState(70); // default 70%
+  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' }}>

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"

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">
+    <ResizablePanes
-      <FoldersPane projectId={params.projectId} messages={messages} locale={params.locale} />
+      minLeftWidth={15}
-      <div className="flex-grow w-full">{children}</div>
+      minRightWidth={40}
-    </div>
+      defaultLeftWidth={20}
+      leftPane={<FoldersPane projectId={params.projectId} messages={messages} locale={params.locale} />}
+      rightPane={children}
+    />
   );
 }