UI improvements, moved file name and moved buttons left

frontend/src/components/ZoneEditor.tsx

@@ -1,25 +1,28 @@
 import { useState } from 'react';
 import { useEditorStore } from '../store/editorStore';
-import { Trash2, Scissors, Volume2, SlidersHorizontal } from 'lucide-react';
+import { Trash2, Scissors, Volume2, SlidersHorizontal, Gauge } from 'lucide-react';
 
 export default function ZoneEditor() {
-  const [viewMode, setViewMode] = useState<'all' | 'cut' | 'mute' | 'gain'>('all');
+  const [viewMode, setViewMode] = useState<'all' | 'cut' | 'mute' | 'gain' | 'speed'>('all');
   
   const {
     cutRanges,
     muteRanges,
     gainRanges,
+    speedRanges,
     globalGainDb,
     setGlobalGainDb,
     removeCutRange,
     removeMuteRange,
     removeGainRange,
+    removeSpeedRange,
     updateGainRange,
+    updateSpeedRange,
   } = useEditorStore();
 
-  const totalZones = cutRanges.length + muteRanges.length + gainRanges.length;
+  const totalZones = cutRanges.length + muteRanges.length + gainRanges.length + speedRanges.length;
 
-  const getZoneTypeColor = (type: 'cut' | 'mute' | 'gain') => {
+  const getZoneTypeColor = (type: 'cut' | 'mute' | 'gain' | 'speed') => {
     switch (type) {
       case 'cut':
         return 'border-red-500/40 bg-red-500/5';
@@ -27,6 +30,8 @@ export default function ZoneEditor() {
         return 'border-orange-500/40 bg-orange-500/5';
       case 'gain':
         return 'border-amber-500/40 bg-amber-500/5';
+      case 'speed':
+        return 'border-emerald-500/40 bg-emerald-500/5';
     }
   };
 
@@ -85,6 +90,16 @@ export default function ZoneEditor() {
           >
             Gain
           </button>
+          <button
+            onClick={() => setViewMode('speed')}
+            className={`px-2 py-1 text-xs rounded transition-colors ${
+              viewMode === 'speed'
+                ? 'bg-emerald-500/30 text-emerald-500'
+                : 'text-editor-text-muted hover:text-editor-text'
+            }`}
+          >
+            Speed
+          </button>
         </div>
       </div>
 
@@ -230,6 +245,50 @@ export default function ZoneEditor() {
               </div>
             </div>
           )}
+
+          {/* Speed Zones */}
+          {(viewMode === 'all' || viewMode === 'speed') && speedRanges.length > 0 && (
+            <div className="space-y-2">
+              <div className="text-xs font-semibold text-emerald-500/80 flex items-center gap-2">
+                <Gauge className="w-3.5 h-3.5" />
+                Speed Zones ({speedRanges.length})
+              </div>
+              <div className="space-y-1">
+                {speedRanges.map((range) => (
+                  <div
+                    key={range.id}
+                    className={`px-2 py-1.5 rounded border text-xs flex items-center gap-2 group ${getZoneTypeColor('speed')}`}
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">
+                        {range.start.toFixed(2)}s – {range.end.toFixed(2)}s
+                      </div>
+                      <div className="text-editor-text-muted text-[10px]">
+                        {range.speed.toFixed(2)}x
+                      </div>
+                    </div>
+                    <input
+                      type="number"
+                      min={0.25}
+                      max={4}
+                      step={0.05}
+                      value={range.speed}
+                      onChange={(e) => updateSpeedRange(range.id, Number(e.target.value) || 1)}
+                      className="w-16 px-1.5 py-0.5 text-xs bg-editor-surface border border-editor-border rounded focus:border-editor-accent focus:outline-none"
+                      title="Speed multiplier"
+                    />
+                    <button
+                      onClick={() => removeSpeedRange(range.id)}
+                      className="p-1 rounded hover:bg-emerald-500/20 text-emerald-500/70 hover:text-emerald-500 opacity-0 group-hover:opacity-100 transition-opacity"
+                      title="Delete speed zone"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>