feat: Settings modal with danger zone admin operations

Backend: - POST /api/admin/clear-waveforms — deletes all cached waveform SVGs - POST /api/admin/delete-all-clips — nuclear option: deletes all clips, MP3s, artwork, and waveforms. Returns deleted count. - database.py: delete_all_clips() for bulk DB wipe - Clip deletion cascade-removes waveform SVGs Frontend: - SettingsModal.tsx: center-stage modal with backdrop blur (bg-black/60 backdrop-blur-sm). Danger zone with red-styled border and header. - Two-step confirmation for Delete All (click once to arm, click again to confirm). Shows clip count dynamically. - Gear icon trigger in header bar - App.tsx: handleClearWaveforms + handleDeleteAll handlers Docs: - Architecture KB updated with album art, waveform, settings modal sections - Tasks KB updated with T-021 (waveform) and TASK-001 (album art) marked done - T-026 (settings modal) added to backlog
2026-05-29 20:21:05 -04:00
1 parent 744f0ae6e5
commit e74c89e1b0
@@ -3,6 +3,7 @@ import Generator from './components/Generator'
 import Gallery from './components/Gallery'
 import Player from './components/Player'
 import DetailPanel from './components/DetailPanel'
+import SettingsModal from './components/SettingsModal'

 interface Clip {
  id: string
@@ -22,6 +23,7 @@ function App() {
  const [currentClip, setCurrentClip] = useState<Clip | null>(null)
  const [isPlaying, setIsPlaying] = useState(false)
  const [selectedClip, setSelectedClip] = useState<Clip | null>(null)
+  const [settingsOpen, setSettingsOpen] = useState(false)

  const fetchClips = async () => {
    try {
@@ -117,15 +119,48 @@ function App() {
    }
  }

+  const handleClearWaveforms = async () => {
+    try {
+      await fetch('/api/admin/clear-waveforms', { method: 'POST' })
+    } catch (err) {
+      console.error('Failed to clear waveforms:', err)
+    }
+  }
+
+  const handleDeleteAll = async () => {
+    try {
+      await fetch('/api/admin/delete-all-clips', { method: 'POST' })
+      setClips([])
+      setCurrentClip(null)
+      setIsPlaying(false)
+      setSelectedClip(null)
+    } catch (err) {
+      console.error('Failed to delete all clips:', err)
+    }
+  }
+
  return (
    <div className="min-h-screen bg-lyria-dark">
      <header className="border-b border-white/10 px-6 py-4">
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 rounded bg-lyria-accent flex items-center justify-center text-white font-bold text-sm">
-            L
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded bg-lyria-accent flex items-center justify-center text-white font-bold text-sm">
+              L
+            </div>
+            <h1 className="text-xl font-bold text-white">Lyria Studio</h1>
+            <span className="text-xs text-lyria-muted bg-white/5 px-2 py-0.5 rounded">v0.1</span>
          </div>
-          <h1 className="text-xl font-bold text-white">Lyria Studio</h1>
-          <span className="text-xs text-lyria-muted bg-white/5 px-2 py-0.5 rounded">v0.1</span>
+          <button
+            onClick={() => setSettingsOpen(true)}
+            className="text-lyria-muted hover:text-white transition-colors p-1 rounded hover:bg-white/5"
+            title="Settings"
+            aria-label="Open settings"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          </button>
        </div>
      </header>

@@ -168,6 +203,14 @@ function App() {
          onRemoveArtwork={handleRemoveArtwork}
        />
      )}
+
+      <SettingsModal
+        isOpen={settingsOpen}
+        onClose={() => setSettingsOpen(false)}
+        onClearWaveforms={handleClearWaveforms}
+        onDeleteAll={handleDeleteAll}
+        clipCount={clips.length}
+      />
    </div>
  )
 }
@@ -0,0 +1,129 @@
+import { useState } from 'react'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  onClearWaveforms: () => Promise<void>
+  onDeleteAll: () => Promise<void>
+  clipCount: number
+}
+
+export default function SettingsModal({ isOpen, onClose, onClearWaveforms, onDeleteAll, clipCount }: Props) {
+  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  if (!isOpen) return null
+
+  const handleClearWaveforms = async () => {
+    setLoading(true)
+    try {
+      await onClearWaveforms()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDeleteAll = async () => {
+    if (!confirmDelete) {
+      setConfirmDelete(true)
+      return
+    }
+    setLoading(true)
+    try {
+      await onDeleteAll()
+      setConfirmDelete(false)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative bg-lyria-surface border border-white/10 rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
+          <h2 className="text-lg font-semibold text-white">Settings</h2>
+          <button
+            onClick={onClose}
+            className="text-lyria-muted hover:text-white transition-colors"
+            aria-label="Close settings"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-6 py-5 space-y-6">
+          {/* 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">
+              <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>
+
+            <div className="p-4 space-y-4">
+              {/* Clear Waveforms */}
+              <div className="flex items-center justify-between">
+                <div>
+                  <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="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" />
+
+              {/* Delete All */}
+              <div>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <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' : ''}, MP3s, artwork, and waveforms. Cannot be undone.
+                    </p>
+                  </div>
+                  <button
+                    onClick={handleDeleteAll}
+                    disabled={loading || clipCount === 0}
+                    className={`px-3 py-1.5 text-sm rounded transition-colors border ${
+                      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' : 'Delete All'}
+                  </button>
+                </div>
+
+                {confirmDelete && (
+                  <p className="text-xs text-red-400 mt-2">
+                    Click again to confirm. This permanently deletes everything.
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}