v17: Select Instrument modal highlight instrument dang load (SF preset + VST)

app/static/js/app.jsx

@@ -17869,6 +17869,7 @@ const App = () => {
     if (id === 'export') setShowExportPanel(true); else if (id === 'ai') setShowAIPanel(true); else if (id === 'python_tools') setShowPythonToolsPanel(true); else if (id === 'selection') setShowSelectionPanel(true);
   };
   const [instrumentSelectorTrackId, setInstrumentSelectorTrackId] = useState(null);
+  const [selectorLoadedInst, setSelectorLoadedInst] = useState(null); // instrument dang load cua track (de highlight)
   const [synthTrackDropdownId, setSynthTrackDropdownId] = useState(null);
   const [fxSelectorTrackId, setFxSelectorTrackId] = useState(null);
   const handleSetTrackFx = (trackId, fxType) => {
@@ -17883,6 +17884,26 @@ const App = () => {
     setSfPresetSearchQuery('');
     setInstrumentRefreshKey(k => k + 1);
     setSfPresets(null);
+    // Highlight instrument dang load cua track (v17: nhan lai nut Synth -> show lai instrument da load)
+    var selTracks = activeTracksRef.current || tracks;
+    var selTrk = null;
+    for (var si = 0; si < selTracks.length; si++) { if (selTracks[si].id === trackId) { selTrk = selTracks[si]; break; } }
+    var loaded = null;
+    if (selTrk && selTrk.instrumentId && String(selTrk.instrumentId).indexOf('sf_') === 0) {
+      var sfEng = selTrk.synth_engine || {};
+      loaded = {
+        sfId: selTrk.instrumentId,
+        bank: selTrk.soundfont_bank !== undefined ? selTrk.soundfont_bank : (sfEng.soundfont_bank !== undefined ? sfEng.soundfont_bank : 0),
+        prog: selTrk.instrumentProgram !== undefined ? selTrk.instrumentProgram : (sfEng.soundfont_program !== undefined ? sfEng.soundfont_program : 0)
+      };
+      setSelectedSoundFontId(selTrk.instrumentId);
+      setSynthCategory('soundfont');
+    } else {
+      if (selTrk && selTrk.instrumentId) loaded = { instId: selTrk.instrumentId };
+      setSelectedSoundFontId(null);
+      setSynthCategory(null);
+    }
+    setSelectorLoadedInst(loaded);
     // Fetch instruments fresh from API for all soundfonts
     window.SonicAPI.listPlugins().then(async data => {
       var sfonts = data.soundfonts || [];
@@ -17911,6 +17932,7 @@ const App = () => {
     setInstrumentSelectorTrackId(null);
     setSynthCategory(null);
     setSelectedSoundFontId(null);
+    setSelectorLoadedInst(null);
     setSfPresetSearchQuery('');
   };
   const [synthCategory, setSynthCategory] = useState(null); // 'vst' | 'soundfont'
@@ -35218,7 +35240,7 @@ STRICT CONSTRAINTS:
         /*#__PURE__*/React.createElement("div", { className: "w-1/3 border-r border-[#383838] overflow-y-auto space-y-0.5 pr-2" },
           /*#__PURE__*/React.createElement("button", {
             onClick: () => { setSelectedSoundFontId(null); setSynthCategory(null); },
-            className: "w-full text-left px-3 py-2 text-sm rounded " + (!selectedSoundFontId ? "bg-amber-700 text-white" : "bg-zinc-800 hover:bg-zinc-700 text-zinc-300")
+            className: "w-full text-left px-3 py-2 text-sm rounded " + ((!selectedSoundFontId && !(selectorLoadedInst && selectorLoadedInst.instId)) ? "bg-amber-700 text-white" : "bg-zinc-800 hover:bg-zinc-700 text-zinc-300")
           }, "All Instruments"),
           (instrumentSelectorData?.soundfonts || []).map(sf => {
             const sfId = sf.id.startsWith('sf_') ? sf.id : 'sf_' + sf.id;
@@ -35250,7 +35272,7 @@ STRICT CONSTRAINTS:
               setTrackInstrumentWithUndo(instrumentSelectorTrackId, v.id, v.name || v.id);
               closeInstrumentSelector();
             },
-            className: "w-full text-left px-3 py-2 text-sm rounded bg-zinc-800 hover:bg-violet-800 text-zinc-300 flex items-center justify-between gap-2"
+            className: "w-full text-left px-3 py-2 text-sm rounded " + ((selectorLoadedInst && selectorLoadedInst.instId === v.id) ? "bg-violet-800 text-white" : "bg-zinc-800 hover:bg-violet-800 text-zinc-300") + " flex items-center justify-between gap-2"
           }, /*#__PURE__*/React.createElement("span", { className: "truncate" }, v.name || v.id), /*#__PURE__*/React.createElement("span", { className: "text-[9px] text-cyan-400 shrink-0" }, v.type || "VST")))
         ),
         /*#__PURE__*/React.createElement("div", { className: "flex-1 overflow-y-auto space-y-0.5" },
@@ -35269,7 +35291,7 @@ STRICT CONSTRAINTS:
                   key: i,
                   onClick: () => setTrackInstrumentWithUndo(instrumentSelectorTrackId, p._sfId, p.name || 'Preset ' + p.program, p.bank, p.program),
                   onDoubleClick: () => { setTrackInstrumentWithUndo(instrumentSelectorTrackId, p._sfId, p.name || 'Preset ' + p.program, p.bank, p.program); closeInstrumentSelector(); },
-                  className: "w-full text-left px-3 py-2 text-sm rounded bg-zinc-800/60 hover:bg-amber-800 text-zinc-300 truncate flex items-center gap-2"
+                  className: "w-full text-left px-3 py-2 text-sm rounded " + ((selectorLoadedInst && selectorLoadedInst.sfId === p._sfId && selectorLoadedInst.bank === p.bank && selectorLoadedInst.prog === p.program) ? "bg-amber-800/80 text-white ring-1 ring-amber-400/60" : "bg-zinc-800/60 hover:bg-amber-800 text-zinc-300") + " truncate flex items-center gap-2"
                 },
                   /*#__PURE__*/React.createElement("span", { className: "text-xs text-zinc-500 shrink-0" }, p._sfDisplay),
                   p.bank === 128 ? /*#__PURE__*/React.createElement("span", { className: "mr-1" }, "🥁") : null,

app/templates/index.html

@@ -51,7 +51,7 @@
     <script src="/static/js/services/promptTemplateManager.js?v=202607281039"></script>
     <script src="/static/js/services/undoRedoEngine.js?v=202607290941"></script>
     <script src="/static/js/services/chordTheory.js?v=202608211300"></script>
-    <script src="/static/js/app.precompiled.js?v=202608292200" defer></script>
+    <script src="/static/js/app.precompiled.js?v=202608292201" defer></script>
     <link rel="stylesheet" href="/static/css/styles.css?v=202607271016">
     <style>
         :root {