FIX: Đã sắp xếp lại (v202608061030)

app/static/js/app.jsx

@@ -7082,6 +7082,18 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClos
   }, []);
   const [keyTargetRoot, setKeyTargetRoot] = React.useState('C');
   const [keyTargetScale, setKeyTargetScale] = React.useState('major');
+  // Auto-detect scale khi MỞ midi item → hiển thị ở dropdown chuyển giọng.
+  // Key theo st.target_id (item id) — sửa note cùng item KHÔNG reset lựa chọn
+  // của user; mở item khác → detect lại.
+  React.useEffect(() => {
+    const itemNotes = st.notes || [];
+    if (itemNotes.length) {
+      const k = detectKey(itemNotes);
+      setKeyTargetRoot(k.root);
+      setKeyTargetScale(k.scale);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [st.target_id]);
   const applyTransposeToKey = React.useCallback(() => {
     if (!notes || !notes.length) { showToast('Không có nốt nào để chuyển giọng.', 'warning'); return; }
     const srcKey = detectKey(notes);
@@ -8550,7 +8562,13 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
         return showGhostNotes ? base + 'bg-purple-900/60 text-purple-300 border border-purple-700' : base + 'text-zinc-500 hover:text-zinc-300';
       }(),
       title: "Toggle ghost notes visibility"
-    }, "\\uD83D\\uDC7B MIDI ghost notes"), React.createElement("div", {
+    }, "👻 MIDI ghost notes"), React.createElement("button", {
+      onClick: onClose,
+      className: "px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 border border-zinc-700 rounded text-xs flex items-center gap-1 transition ml-auto"
+    }, React.createElement("i", {
+      "data-lucide": "x",
+      className: "w-3 h-3"
+    }), "Đóng"), React.createElement("div", {
       style: { flexBasis: "100%", height: 0 }
     }), React.createElement("button", {
       onClick: applyHumanize,
@@ -8588,8 +8606,8 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
       key: "btn", onClick: applyTransposeToKey,
       className: "px-2 py-1 rounded text-xs bg-violet-900/40 text-violet-300 border border-violet-700/60 hover:bg-violet-800/50 transition",
       title: "Chuyển giọng: map degree hiện tại sang giọng đích (auto-detect key nguồn)"
-    }, "\uD83C\uDFB5 Chuy\u1EC3n gi\u1ECDng")), React.createElement("div", {
-      className: "flex items-center gap-1"
+    }, "🎵 Chuyển giọng")), React.createElement("div", {
+      className: "flex items-center gap-1 ml-auto"
     }, React.createElement("button", {
       onClick: () => onSaveNotes(st.id, st.trackId, st.target_id, notes),
       className: "px-2.5 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded text-xs flex items-center gap-1 transition font-semibold"
@@ -8643,13 +8661,7 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
         showToast('Đã xuất file MIDI!', 'success');
       },
       className: "px-2.5 py-1 bg-amber-700 hover:bg-amber-600 text-white rounded text-xs flex items-center gap-1 transition font-semibold"
-    }, React.createElement("i", { "data-lucide": "file-down", className: "w-3 h-3" }), "Export"), React.createElement("button", {
-      onClick: onClose,
-      className: "px-2.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 border border-zinc-700 rounded text-xs flex items-center gap-1 transition"
-    }, React.createElement("i", {
-      "data-lucide": "x",
-      className: "w-3 h-3"
-    }), "Đóng"))), 
+    }, React.createElement("i", { "data-lucide": "file-down", className: "w-3 h-3" }), "Export MIDI"))), 
 
     /* 2. BAR RULER */
     React.createElement("div", {