improved zone handling

frontend/src/App.tsx

@@ -8,7 +8,7 @@ import ExportDialog from './components/ExportDialog';
 import SettingsPanel from './components/SettingsPanel';
 import DevPanel from './components/DevPanel';
 import SilenceTrimmerPanel from './components/SilenceTrimmerPanel';
-import VolumePanel from './components/VolumePanel';
+import ZoneEditor from './components/ZoneEditor';
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
 import {
   Film,
@@ -20,15 +20,15 @@ import {
   Save,
   Scissors,
   VolumeX,
-  Volume2,
   SlidersHorizontal,
   FilePlus2,
   RefreshCw,
+  Grid3x3,
 } from 'lucide-react';
 
 const LAST_MEDIA_PATH_KEY = 'talkedit:lastMediaPath';
 
-type Panel = 'ai' | 'settings' | 'export' | 'silence' | 'volume' | null;
+type Panel = 'ai' | 'settings' | 'export' | 'silence' | 'zones' | null;
 
 export default function App() {
   const {
@@ -459,17 +459,29 @@ export default function App() {
             onClick={handleMute}
             active={muteMode}
           />
+          <div className="flex items-center gap-1">
+            <ToolbarButton
+              icon={<SlidersHorizontal className="w-4 h-4" />}
+              label="Gain Zone"
+              onClick={handleGain}
+              active={gainMode}
+            />
+            <input
+              type="number"
+              min={-24}
+              max={24}
+              step={0.5}
+              value={gainModeDb}
+              onChange={(e) => setGainModeDb(Math.max(-24, Math.min(24, Number(e.target.value) || 0)))}
+              className="w-16 px-1.5 py-1 text-xs bg-editor-surface border border-editor-border rounded text-editor-text focus:outline-none focus:border-editor-accent"
+              title="Gain dB for new gain zones"
+            />
+          </div>
           <ToolbarButton
-            icon={<SlidersHorizontal className="w-4 h-4" />}
-            label="Gain Zone"
-            onClick={handleGain}
-            active={gainMode}
-          />
-          <ToolbarButton
-            icon={<Volume2 className="w-4 h-4" />}
-            label="Volume"
-            active={activePanel === 'volume'}
-            onClick={() => togglePanel('volume')}
+            icon={<Grid3x3 className="w-4 h-4" />}
+            label="Zones"
+            active={activePanel === 'zones'}
+            onClick={() => togglePanel('zones')}
             disabled={!videoPath}
           />
           <ToolbarButton
@@ -571,7 +583,12 @@ export default function App() {
                   </div>
                 </div>
               ) : words.length > 0 ? (
-                <TranscriptEditor />
+                <TranscriptEditor
+                  cutMode={cutMode}
+                  muteMode={muteMode}
+                  gainMode={gainMode}
+                  gainModeDb={gainModeDb}
+                />
               ) : (
                 <div className="flex-1 flex items-center justify-center text-editor-text-muted text-sm">
                   No transcript yet
@@ -589,13 +606,8 @@ export default function App() {
         {/* Right panel (AI / Export / Settings) */}
         {activePanel && (
           <div className="w-80 border-l border-editor-border overflow-y-auto shrink-0">
-            {activePanel === 'volume' && (
-              <VolumePanel
-                gainMode={gainMode}
-                onToggleGainMode={handleGain}
-                timelineGainDb={gainModeDb}
-                onTimelineGainDbChange={setGainModeDb}
-              />
+            {activePanel === 'zones' && (
+              <ZoneEditor />
             )}
             {activePanel === 'silence' && <SilenceTrimmerPanel />}
             {activePanel === 'ai' && <AIPanel />}