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",