fix: Synth button opens modal with inline track selector

Remove external track dropdown. Add select dropdown inside the
instrument selector modal between title and search box. Users
can switch tracks without closing the modal.

app/static/js/app.jsx

@@ -6779,18 +6779,6 @@ const App = () => {
   };
   const [instrumentSelectorTrackId, setInstrumentSelectorTrackId] = useState(null);
   const [synthTrackDropdownId, setSynthTrackDropdownId] = useState(null);
-  const [synthBtnRect, setSynthBtnRect] = useState(null);
-  const synthDropdownRef = useRef(null);
-  useEffect(function() {
-    var handler = function(e) {
-      if (synthDropdownRef.current && !synthDropdownRef.current.contains(e.target)) {
-        setSynthTrackDropdownId(null);
-        setSynthBtnRect(null);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return function() { document.removeEventListener('mousedown', handler); };
-  }, []);
   const [fxSelectorTrackId, setFxSelectorTrackId] = useState(null);
   const handleSetTrackFx = (trackId, fxType) => {
     updateActiveTracks(prev => prev.map(t => t.id === trackId ? { ...t, fxType } : t));
@@ -17060,7 +17048,7 @@ const App = () => {
       })), " FX: ", /*#__PURE__*/React.createElement("span", {
         className: "text-zinc-500 font-normal"
       }, track.fxType || "None")), /*#__PURE__*/React.createElement("button", {
-        onClick: (e) => { e.stopPropagation(); var r = e.currentTarget.getBoundingClientRect(); setSynthBtnRect({ top: r.bottom + 4, left: r.left }); setSynthTrackDropdownId(synthTrackDropdownId === track.id ? null : track.id); },
+        onClick: (e) => { e.stopPropagation(); openInstrumentSelector(track.id); },
         className: "px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-amber-400 border border-amber-800 rounded text-xs font-bold flex items-center gap-1 max-w-[120px]"
       }, /*#__PURE__*/React.createElement("span", {
         className: "inline-flex items-center shrink-0"
@@ -18342,24 +18330,23 @@ const App = () => {
   }), /*#__PURE__*/React.createElement(AIPresetModal, {
     isOpen: aiPresetModalOpen,
     onClose: () => { setAiPresetModalOpen(false); setAiPresetVersion(v => v + 1); }
-  }), synthTrackDropdownId && synthBtnRect && /*#__PURE__*/React.createElement("div", {
-    ref: synthDropdownRef,
-    className: "fixed z-[100] bg-[#1e1e1e] border border-zinc-700 rounded shadow-xl w-[200px] max-h-[260px] overflow-y-auto py-1",
-    style: { top: synthBtnRect.top + 'px', left: synthBtnRect.left + 'px' }
-  }, activeTracks.map(function(at) { return /*#__PURE__*/React.createElement("button", {
-    key: at.id,
-    onClick: function(ev) { ev.stopPropagation(); setSynthTrackDropdownId(null); setSynthBtnRect(null); openInstrumentSelector(at.id); },
-    className: "w-full text-left px-3 py-1.5 text-xs hover:bg-zinc-700 flex items-center gap-2 border-b border-zinc-800 last:border-0"
-  }, /*#__PURE__*/React.createElement("span", { className: "text-[9px] text-zinc-500 font-mono shrink-0 w-16 truncate" }, at.name), /*#__PURE__*/React.createElement("span", { className: "truncate text-zinc-400" }, at.instrumentName || 'No Synth')); })), instrumentSelectorTrackId && /*#__PURE__*/React.createElement("div", {
+  }), instrumentSelectorTrackId && /*#__PURE__*/React.createElement("div", {
     className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm",
     onClick: closeInstrumentSelector
   }, /*#__PURE__*/React.createElement("div", {
     className: "bg-[#262626] border border-[#383838] rounded-xl shadow-2xl w-full max-w-4xl p-5 text-slate-200",
     onClick: e => e.stopPropagation()
   },
-    /*#__PURE__*/React.createElement("div", { className: "flex justify-between items-center pb-3 border-b border-[#383838]" },
+      /*#__PURE__*/React.createElement("div", { className: "flex justify-between items-center pb-3 border-b border-[#383838]" },
       /*#__PURE__*/React.createElement("h3", { className: "text-sm font-bold text-amber-400" }, "Select Instrument"),
-      /*#__PURE__*/React.createElement("button", { onClick: closeInstrumentSelector, className: "text-slate-400 hover:text-slate-200" }, "\u2715")
+      /*#__PURE__*/React.createElement("div", { className: "flex items-center gap-2" },
+        /*#__PURE__*/React.createElement("select", {
+          value: instrumentSelectorTrackId || '',
+          onChange: e => { var tid = e.target.value; if (tid) { openInstrumentSelector(tid); } },
+          className: "bg-[#1e1e1e] text-zinc-300 border border-zinc-700 rounded px-2 py-1 text-xs font-mono cursor-pointer"
+        }, activeTracks.map(function(at) { return /*#__PURE__*/React.createElement("option", { key: at.id, value: at.id }, at.name + ' (' + (at.instrumentName || 'Synth') + ')'); })),
+        /*#__PURE__*/React.createElement("button", { onClick: closeInstrumentSelector, className: "text-slate-400 hover:text-slate-200" }, "\u2715")
+      )
     ),
     /*#__PURE__*/React.createElement("input", {
       type: "text",

wiki.md

@@ -813,3 +813,9 @@
 - **Các file ảnh hưởng:** `app/static/js/app.jsx`
 - **Ghi chú/Test (nếu có):** `npm run build` — build passes.
 ---
+
+### [2026-07-29 11:57] Task: Fix Synth button — track selector inside instrument modal
+- **Tóm tắt thay đổi:** Xóa dropdown track riêng (synthTrackDropdownId). Thêm `<select>` track list trong modal Select Instrument, giữa title và textbox tìm kiếm. Chọn track → mở instrument cho track đó trong cùng modal.
+- **Các file ảnh hưởng:** `app/static/js/app.jsx`
+- **Ghi chú/Test (nếu có):** `npm run build` — build passes.
+---