silence trimmer

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import AIPanel from './components/AIPanel';
 import ExportDialog from './components/ExportDialog';
 import SettingsPanel from './components/SettingsPanel';
 import DevPanel from './components/DevPanel';
+import SilenceTrimmerPanel from './components/SilenceTrimmerPanel';
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
 import {
   Film,
@@ -23,7 +24,7 @@ import {
 
 const IS_ELECTRON = !!window.electronAPI;
 
-type Panel = 'ai' | 'settings' | 'export' | null;
+type Panel = 'ai' | 'settings' | 'export' | 'silence' | null;
 
 export default function App() {
   const {
@@ -166,6 +167,10 @@ export default function App() {
     }
   };
 
+  const togglePanel = (panel: Panel) => {
+    setActivePanel((prev) => (prev === panel ? null : panel));
+  };
+
   const handleCut = () => {
     if (selectedWordIndices.length > 0) {
       // If words are selected, apply cut immediately
@@ -337,6 +342,13 @@ export default function App() {
             onClick={handleMute}
             active={muteMode}
           />
+          <ToolbarButton
+            icon={<span className="text-[10px] font-semibold">PA</span>}
+            label="Pause Trim"
+            active={activePanel === 'silence'}
+            onClick={() => togglePanel('silence')}
+            disabled={!videoPath}
+          />
           <ToolbarButton
             icon={<Sparkles className="w-4 h-4" />}
             label="AI"
@@ -411,6 +423,7 @@ 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 === 'silence' && <SilenceTrimmerPanel />}
             {activePanel === 'ai' && <AIPanel />}
             {activePanel === 'export' && <ExportDialog />}
             {activePanel === 'settings' && <SettingsPanel />}