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.
This commit is contained in:
rin.kagamine committed
1 parent
fe6ec467c6
commit
b3807f0f60
1 file changed
+54
-40
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user