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="flex bg-white border border-[#808080] m-1 mr-0 text-xs select-none shrink-0 overflow-hidden">
-          <div className="space-y-0.5 font-sans">
+          <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 */}

app/templates/index.html

@@ -23,7 +23,7 @@
     <script src="/static/js/services/midiExtractor.js?v=202607281052"></script>
     <script src="/static/js/services/promptTemplateManager.js?v=202607281039"></script>
     <script src="/static/js/services/undoRedoEngine.js?v=202607290941"></script>
-    <script src="/static/js/app.precompiled.js?v=202608021455" defer></script>
+    <script src="/static/js/app.precompiled.js?v=202608021640" defer></script>
     <link rel="stylesheet" href="/static/css/styles.css?v=202607271016">
     <style>
         :root {

wiki.md

@@ -1094,3 +1094,8 @@
 - **Tóm tắt thay đổi:** Fix file list folder rows gọi `browseComputerDir(f.path)` (chuỗi) → đổi thành `browseComputerDir(f)` (entry object) để client mode duyệt đúng qua handle. Khi nhấn My Computer (client-side, `showDirectoryPicker`): picker chọn thư mục → tree trái hiện root, file list phải merge `dirs + files` (folder `fa-folder` + file theo kind), click folder trong list → vào thư mục.
 - **Các file ảnh hưởng:** `app/static/js/app.jsx`, `app/static/js/app.precompiled.js`, `app/templates/index.html`
 - **Ghi chú/Test (nếu có):** Smoke jsdom mock FS handle: picker → root `C:` → list Users(folder)+readme.txt → click Users row → vào `root/Users` → me hiển thị OK. Hard reload.
+
+### [2026-08-02 16:40] Task: Media Explorer panel — resize cây thư mục
+- **Tóm tắt thay đổi:** `MediaExplorerPanel` directory tree bỏ class `w-44` cố định → width động qua state `treeWidth` (default 176px, min 110 max 420, ref `treeWidthRef`). Thêm drag handle `w-1.5 cursor-ew-resize` bên phải tree (mousedown/mousemove/mouseup trên document, `startTreeResize`). File list bên phải tự co giãn theo `flex-1`.
+- **Các file ảnh hưởng:** `app/static/js/app.jsx`, `app/static/js/app.precompiled.js`, `app/templates/index.html`
+- **Ghi chú/Test (nếu có):** Smoke jsdom: kéo handle +80px → tree width 176→256px OK, clamp 110–420. Hard reload.