From bfb636f0bc9c85311ce14d803422d37449e73af9 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Sun, 26 Jul 2026 17:25:38 +0700
Subject: [PATCH] fix(ui): remove duplicate Synth button, fix MIDI keyboard
 handler

- Remove small Synth button between ARM and Monitor (duplicate)
- Remove empty try/catch that swallowed all MIDI handler errors
- Ensure MIDI keyboard passes synth_engine context to playNote
- Direct fallback to armed main track when no PIANO_ROLL sub-tab armed
---
 app/static/js/app.jsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/static/js/app.jsx b/app/static/js/app.jsx
index d6e589d..721a90b 100644
--- a/app/static/js/app.jsx
+++ b/app/static/js/app.jsx
@@ -6655,12 +6655,11 @@ const App = () => {
                 setLastMidiNote({ pitch, velocity, length: 0, time: Date.now() });
                 activeMidiPitchesRef.current.add(pitch);
                 setActiveMidiPitches(new Set(activeMidiPitchesRef.current));
-                try {
-                  const ar = activeTabRef && subTabsRef && subTabsRef.current.find(s => s.id === activeTabRef.current && s.type === 'PIANO_ROLL' && s.isArmed);
-                  if (ar && window.SonicSF) {
-                    window.SonicSF.playNote(pitch, velocity, 500, undefined, ar.instrumentProgram, null, undefined, ar.synth_engine);
-                  } else if (window.SonicSF) {
-                    // No armed PIANO_ROLL tab — check main session for armed track
+                { if (window.SonicSF) {
+                  const arSub = subTabsRef && subTabsRef.current && activeTabRef && subTabsRef.current.find(s => s.id === activeTabRef.current && s.type === 'PIANO_ROLL' && s.isArmed);
+                  if (arSub) {
+                    window.SonicSF.playNote(pitch, velocity, 500, undefined, arSub.instrumentProgram, null, undefined, arSub.synth_engine);
+                  } else {
                     const armedTrack = activeTracksRef.current ? activeTracksRef.current.find(t => t.isArmed) : null;
                     if (armedTrack) {
                       const prog = armedTrack.instrumentProgram;
@@ -6669,7 +6668,7 @@ const App = () => {
                       window.SonicSF.playNote(pitch, velocity, 500, undefined, prog, dest, undefined, se);
                     }
                   }
-                } catch (e) {}
+                } }
               } else if (cmd === 0x8 || (cmd === 0x9 && velocity === 0)) {
                 activeMidiPitchesRef.current.delete(pitch);
                 setActiveMidiPitches(new Set(activeMidiPitchesRef.current));
@@ -15575,10 +15574,6 @@ const App = () => {
         title: "ARM (Record)",
         className: `px-1.5 py-0.5 text-[10px] rounded font-mono font-bold border transition flex items-center gap-0.5 ${track.isArmed ? 'bg-red-600 text-white border-red-500 hover:bg-red-500' : 'bg-zinc-800 text-zinc-400 border-transparent hover:text-zinc-200'}`
       }, /*#__PURE__*/React.createElement("i", { "data-lucide": "circle", className: `w-2.5 h-2.5 ${track.isArmed ? 'fill-white' : ''}` })), /*#__PURE__*/React.createElement("button", {
-        onClick: e => { e.stopPropagation(); const btn = e.currentTarget; setInstrumentDropdownTrackId(prev => prev === track.id ? null : track.id); setInstrumentDropdownBtnRect(btn.getBoundingClientRect()); setInstrumentSearchQuery(''); },
-        title: track.instrumentName || track.instrumentId || "Synth",
-        className: `px-1.5 py-0.5 text-[10px] rounded font-mono font-bold border transition flex items-center gap-0.5 max-w-[60px] ${track.instrumentId ? 'bg-violet-900 text-violet-300 border-violet-700' : 'bg-zinc-800 text-zinc-500 border-transparent hover:text-zinc-300'}`
-      }, /*#__PURE__*/React.createElement("i", { "data-lucide": "music", className: "w-3 h-3 shrink-0" }), /*#__PURE__*/React.createElement("span", { className: "truncate text-[9px]" }, track.instrumentName || track.instrumentId || (instrumentDropdownTrackId === track.id ? '' : 'Synth')), /*#__PURE__*/React.createElement("i", { "data-lucide": "chevron-down", className: "w-2.5 h-2.5 shrink-0" })), /*#__PURE__*/React.createElement("button", {
         onClick: e => {
           e.stopPropagation();
           toggleTrackMonitor(track.id);