-
- L
+
+
+
+ L
+
+
Lyria Studio
+
v0.1
-
Lyria Studio
-
v0.1
+
@@ -168,6 +203,14 @@ function App() {
onRemoveArtwork={handleRemoveArtwork}
/>
)}
+
+
setSettingsOpen(false)}
+ onClearWaveforms={handleClearWaveforms}
+ onDeleteAll={handleDeleteAll}
+ clipCount={clips.length}
+ />
)
}
diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
new file mode 100644
index 0000000..dfcde65
--- /dev/null
+++ b/frontend/src/components/SettingsModal.tsx
@@ -0,0 +1,129 @@
+import { useState } from 'react'
+
+interface Props {
+ isOpen: boolean
+ onClose: () => void
+ onClearWaveforms: () => Promise
+ onDeleteAll: () => Promise
+ 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 (
+
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+ {/* Header */}
+
+
+ {/* Content */}
+
+ {/* Danger Zone */}
+
+
+
+
+ {/* Clear Waveforms */}
+
+
+
Clear Waveform Cache
+
Delete all cached SVGs. They regenerate on next view.
+
+
+
+
+
+
+ {/* Delete All */}
+
+
+
+
Delete All Tracks
+
+ Remove {clipCount} clip{clipCount !== 1 ? 's' : ''}, MP3s, artwork, and waveforms. Cannot be undone.
+
+
+
+
+
+ {confirmDelete && (
+
+ Click again to confirm. This permanently deletes everything.
+
+ )}
+
+
+
+
+
+
+ )
+}