From b3807f0f606eb862fb6ae21f383fcfa0bfdc330f Mon Sep 17 00:00:00 2001
From: Kagamine Rin <rin.kagamine@captcouch.xyz>
Date: Fri, 29 May 2026 23:03:51 -0400
Subject: [PATCH] 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 | 94 +++++++++++++----------
 1 file changed, 54 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index 4c393ba..257eacc 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/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,59 +288,72 @@ 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>
 
-            <div className="p-4 space-y-4">
-              {/* Clear Waveforms */}
-              <div className="flex items-start gap-4">
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm text-white font-medium">Clear Waveform Cache</p>
-                  <p className="text-xs text-lyria-muted mt-0.5">Delete all cached SVGs. They regenerate on next view.</p>
+            {dangerExpanded && (
+              <div className="p-4 space-y-4">
+                {/* Clear Waveforms */}
+                <div className="flex items-start gap-4">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-white font-medium">Clear Waveform Cache</p>
+                    <p className="text-xs text-lyria-muted mt-0.5">Delete all cached SVGs. They regenerate on next view.</p>
+                  </div>
+                  <button
+                    onClick={handleClearWaveforms}
+                    disabled={loading}
+                    className="shrink-0 px-3 py-1.5 text-sm rounded bg-white/5 text-white hover:bg-white/10 disabled:opacity-50 transition-colors border border-white/10"
+                  >
+                    Clear
+                  </button>
                 </div>
-                <button
-                  onClick={handleClearWaveforms}
-                  disabled={loading}
-                  className="shrink-0 px-3 py-1.5 text-sm rounded bg-white/5 text-white hover:bg-white/10 disabled:opacity-50 transition-colors border border-white/10"
-                >
-                  Clear
-                </button>
-              </div>
 
-              <hr className="border-white/5" />
+                <hr className="border-white/5" />
 
-              {/* Delete All */}
-              <div className="flex items-start gap-4">
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm text-white font-medium">Delete All Tracks</p>
-                  <p className="text-xs text-lyria-muted mt-0.5">
-                    Remove {clipCount} clip{clipCount !== 1 ? 's' : ''}. Cannot be undone.
-                  </p>
-                  {confirmDelete && (
-                    <p className="text-xs text-red-400 mt-1.5">
-                      Click again to confirm permanent deletion.
+                {/* Delete All */}
+                <div className="flex items-start gap-4">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm text-white font-medium">Delete All Tracks</p>
+                    <p className="text-xs text-lyria-muted mt-0.5">
+                      Remove {clipCount} clip{clipCount !== 1 ? 's' : ''}. Cannot be undone.
                     </p>
-                  )}
+                    {confirmDelete && (
+                      <p className="text-xs text-red-400 mt-1.5">
+                        Click again to confirm permanent deletion.
+                      </p>
+                    )}
+                  </div>
+                  <button
+                    onClick={handleDeleteAll}
+                    disabled={loading || clipCount === 0}
+                    className={`shrink-0 px-3 py-1.5 text-sm rounded transition-colors border whitespace-nowrap ${
+                      confirmDelete
+                        ? 'bg-red-500 text-white hover:bg-red-600 border-red-500'
+                        : 'bg-white/5 text-red-400 hover:bg-red-500/10 border-red-500/30'
+                    } disabled:opacity-30`}
+                  >
+                    {confirmDelete ? 'Confirm' : 'Delete All'}
+                  </button>
                 </div>
-                <button
-                  onClick={handleDeleteAll}
-                  disabled={loading || clipCount === 0}
-                  className={`shrink-0 px-3 py-1.5 text-sm rounded transition-colors border whitespace-nowrap ${
-                    confirmDelete
-                      ? 'bg-red-500 text-white hover:bg-red-600 border-red-500'
-                      : 'bg-white/5 text-red-400 hover:bg-red-500/10 border-red-500/30'
-                  } disabled:opacity-30`}
-                >
-                  {confirmDelete ? 'Confirm' : 'Delete All'}
-                </button>
               </div>
-            </div>
+            )}
           </div>
         </div>
       </div>