feat: Media Explorer resize chiều rộng cây thư mục

app/static/js/app.jsx

@@ -9031,6 +9031,23 @@ const MediaExplorerPanel = ({ height }) => {
   const [computerFiles, setComputerFiles] = React.useState([]);
   const [computerMode, setComputerMode] = React.useState('server');
   const [clientRoot, setClientRoot] = React.useState(null);
+  const [treeWidth, setTreeWidth] = React.useState(176);
+  const treeWidthRef = React.useRef(176);
+  treeWidthRef.current = treeWidth;
+  const startTreeResize = (e) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startW = treeWidthRef.current;
+    const onMove = (ev) => {
+      setTreeWidth(Math.max(110, Math.min(420, startW + (ev.clientX - startX))));
+    };
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
   const canvasRef = React.useRef(null);
   const playStateRef = React.useRef(null);
   const rafRef = React.useRef(null);
@@ -9469,8 +9486,9 @@ const MediaExplorerPanel = ({ height }) => {
       {/* 2. MIDDLE SPLIT VIEW */}
       <div className="flex-1 flex overflow-hidden min-h-0">
         {/* DIRECTORY TREE */}
-        <div className="w-44 bg-white border border-[#808080] m-1 mr-0 overflow-y-auto p-1 text-xs select-none shrink-0">
-          <div className="space-y-0.5 font-sans">
+        <div className="flex bg-white border border-[#808080] m-1 mr-0 text-xs select-none shrink-0 overflow-hidden">
+          <div className="overflow-y-auto p-1" style={{ width: treeWidth + 'px', minWidth: treeWidth + 'px', maxWidth: treeWidth + 'px' }}>
+            <div className="space-y-0.5 font-sans">
             <div className="flex items-center gap-1 px-1 py-0.5 text-slate-700"><span className="w-3"></span> &lt;Track Templates&gt;</div>
             <div className="flex items-center gap-1 px-1 py-0.5 text-slate-700"><span className="w-3"></span> &lt;Project Directory&gt;</div>
             <div className={`flex items-center gap-1 px-1 py-0.5 cursor-pointer rounded-sm ${folder === 'computer' ? 'bg-slate-300 text-slate-900 font-semibold' : 'hover:bg-slate-200 text-slate-800'}`} onClick={openMyComputer}>
@@ -9495,6 +9513,10 @@ const MediaExplorerPanel = ({ height }) => {
             <div className="flex items-center gap-1 px-1 py-0.5 text-slate-700"><i className="fa-solid fa-plus text-[9px] text-slate-500"></i> Desktop</div>
             <div className="flex items-center gap-1 px-1 py-0.5 text-slate-700"><i className="fa-solid fa-plus text-[9px] text-slate-500"></i> My Documents</div>
           </div>
+          </div>
+          <div className="w-1.5 cursor-ew-resize hover:bg-blue-500/40 active:bg-blue-500/60 transition-colors shrink-0"
+            onMouseDown={startTreeResize}
+            title="Kéo để thay đổi chiều rộng"></div>
         </div>
 
         {/* FILE LIST */}