fix: Danger Zone collapsible in SettingsModal

Previously the Danger Zone was always expanded, unlike the Image Generation
and Text Generation sections which were collapsible.

Now:
- Danger Zone has a clickable header with warning icon + chevron
- Collapsed by default (consistent with other sections)
- Click to expand and reveal Clear Waveforms + Delete All buttons
- Chevron rotates on expand/collapse
- Red styling maintained for visual distinction

This keeps the settings modal clean and uncluttered by default.

frontend/src/components/SettingsModal.tsx

@@ -110,6 +110,7 @@ function useGenSettings(apiPrefix: string) {
 export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDeleteAll, clipCount }: Props) {
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [loading, setLoading] = useState(false)
+  const [dangerExpanded, setDangerExpanded] = useState(false)
 
   const imageGen = useGenSettings('image-gen')
   const textGen = useGenSettings('text-gen')
@@ -287,15 +288,27 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
 
           {/* Danger Zone */}
           <div className="border border-red-500/30 rounded-lg overflow-hidden">
-            <div className="bg-red-500/10 px-4 py-2 border-b border-red-500/20">
+            <button
+              onClick={() => setDangerExpanded(!dangerExpanded)}
+              className="w-full flex items-center justify-between px-4 py-3 bg-red-500/10 hover:bg-red-500/20 transition-colors"
+            >
               <div className="flex items-center gap-2">
                 <svg className="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                 </svg>
                 <span className="text-sm font-medium text-red-400">Danger Zone</span>
               </div>
-            </div>
+              <svg
+                className={`w-4 h-4 text-red-400 transition-transform ${dangerExpanded ? 'rotate-180' : ''}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
 
+            {dangerExpanded && (
               <div className="p-4 space-y-4">
                 {/* Clear Waveforms */}
                 <div className="flex items-start gap-4">
@@ -340,6 +353,7 @@ export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDel
                   </button>
                 </div>
               </div>
+            )}
           </div>
         </div>
       </div>