From dce104221d511fb5101072eb12ecba776e5f14f0 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Sun, 19 Jul 2026 12:51:24 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20b=E1=BB=91=20c=E1=BB=A5c=20l=E1=BA=A1i?=
 =?UTF-8?q?=20UI/button=20v=E1=BB=9Bi=20float=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/templates/index.html | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index 7905f51..f8b14af 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -3963,6 +3963,9 @@
                                 { label: 'Split at Playhead', icon: 'scissors', shortcut: 'S', action: () => handleSplitTrack(selectedTrackId) },
                                 { label: 'Merge Tracks', icon: 'combine', shortcut: 'Ctrl+M', action: () => { handleMergeTracks(); } },
                                 { sep: true },
+                                { label: 'Undo', icon: 'undo', shortcut: 'Ctrl+Z', action: () => { handleUndo(); } },
+                                { label: 'Redo', icon: 'redo', shortcut: 'Ctrl+Y', action: () => { handleRedo(); } },
+                                { sep: true },
                                 { label: 'Copy', icon: 'copy', shortcut: 'Ctrl+C', action: () => { handleCopyTrack(); } },
                                 { label: 'Cut', icon: 'scissors', shortcut: 'Ctrl+X', action: () => { handleCutTrack(); } },
                                 { label: 'Paste', icon: 'clipboard', shortcut: 'Ctrl+V', action: handlePasteTrack },
@@ -4152,6 +4155,17 @@
                                 title="Paste (Ctrl+V)">
                                 <i data-lucide="clipboard" className="w-3.5 h-3.5"></i>
                             </button>
+                            <div className="w-[1px] h-4 bg-zinc-700 mx-0.5"></div>
+                            <button onClick={handleUndo} disabled={undoStack.length === 0}
+                                className="p-0.5 rounded text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 disabled:opacity-30"
+                                title="Undo (Ctrl+Z)">
+                                <i data-lucide="undo" className="w-3.5 h-3.5"></i>
+                            </button>
+                            <button onClick={handleRedo} disabled={redoStack.length === 0}
+                                className="p-0.5 rounded text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 disabled:opacity-30"
+                                title="Redo (Ctrl+Y)">
+                                <i data-lucide="redo" className="w-3.5 h-3.5"></i>
+                            </button>
                         </div>
 
                         <div className="w-[1px] h-5 bg-zinc-800 mx-0.5"></div>
@@ -4261,12 +4275,16 @@
                                         <div className="text-zinc-500">// <span className="text-zinc-300">{analysisState.status}</span></div>
                                         {analysisState.data && <div className="text-emerald-500 font-semibold">BPM: {analysisState.data.bpm}</div>}
                                     </div>
-                                    <div className="flex gap-1">
-                                        <button onClick={handleMarkSelection} className="flex-1 py-1 bg-purple-900 hover:bg-purple-800 text-purple-100 font-bold rounded text-[9px] border border-purple-700">Mark</button>
-                                        <button onClick={handleAICutToNewTrack} disabled={analysisState.isRunning} className="flex-1 py-1 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded text-[9px]">Cut</button>
-                                        <button onClick={triggerAIAnalysis} disabled={analysisState.isRunning} className="p-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700"><i data-lucide="sparkles" className="w-3 h-3"></i></button>
-                                        <button onClick={handleUndo} disabled={undoStack.length === 0} className="px-1.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700 text-[9px]"><i data-lucide="undo" className="w-3 h-3"></i></button>
-                                        <button onClick={handleRedo} disabled={redoStack.length === 0} className="px-1.5 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700 text-[9px]"><i data-lucide="redo" className="w-3 h-3"></i></button>
+                                    <div className="grid grid-cols-3 gap-1">
+                                        <button onClick={handleMarkSelection} className="py-1 bg-purple-900 hover:bg-purple-800 text-purple-100 font-bold rounded text-[9px] border border-purple-700 flex items-center justify-center gap-1">
+                                            <i data-lucide="map-pin" className="w-3 h-3"></i> Mark
+                                        </button>
+                                        <button onClick={handleAICutToNewTrack} disabled={analysisState.isRunning} className="py-1 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded text-[9px] flex items-center justify-center gap-1">
+                                            <i data-lucide="scissors" className="w-3 h-3"></i> AI Cut
+                                        </button>
+                                        <button onClick={triggerAIAnalysis} disabled={analysisState.isRunning} className="py-1 bg-zinc-700 hover:bg-zinc-600 text-zinc-200 font-bold rounded text-[9px] border border-zinc-600 flex items-center justify-center gap-1">
+                                            <i data-lucide="sparkles" className="w-3 h-3"></i> Analyze
+                                        </button>
                                     </div>
                                 </div>
                             );