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
@@ -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>
+  )
+}