feat: add "Clear All Sessions" button to Session History Panel

Adds a "Clear All Sessions" button to the Session History Panel that
allows users to delete all saved sessions at once to manage disk usage.

Features:
- Red "Clear All" button with trash icon next to Import button
- Automatically disabled when there are no sessions to clear
- Confirmation dialog with warning styling shows exact session count
- Warning icon and "This action cannot be undone" message
- Keyboard support (Escape to cancel)
- Uses existing clearAllSessions() backend command

Benefits:
- Gives users control over disk usage
- Prevents unbounded growth of session files
- Safety confirmation prevents accidental deletions
- Improves performance for users with many sessions

Closes: #130
This commit is contained in:
2026-02-07 14:24:50 -08:00
committed by Naomi Carrigan
parent 5d4fa75278
commit 9b3c242333
@@ -15,6 +15,7 @@
let showDeleteConfirm = $state<string | null>(null);
let showExportMenu = $state<string | null>(null);
let isImporting = $state(false);
let showClearAllConfirm = $state(false);
const sessions = $derived(sessionsStore.sessions);
const isLoading = $derived(sessionsStore.isLoading);
@@ -121,6 +122,11 @@
}
}
async function handleClearAll(): Promise<void> {
await sessionsStore.clearAllSessions();
showClearAllConfirm = false;
}
function toggleExportMenu(sessionId: string): void {
if (showExportMenu === sessionId) {
showExportMenu = null;
@@ -186,6 +192,22 @@
</svg>
{isImporting ? "Importing..." : "Import"}
</button>
<button
onclick={() => (showClearAllConfirm = true)}
disabled={sessions.length === 0}
class="px-3 py-1.5 text-sm font-medium bg-red-500/10 text-red-500 border border-red-500/30 rounded hover:bg-red-500/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
title="Clear all sessions"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
Clear All
</button>
{/if}
<button
onclick={onClose}
@@ -428,6 +450,64 @@
</div>
</div>
{#if showClearAllConfirm}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60] flex items-center justify-center p-4"
onclick={() => (showClearAllConfirm = false)}
role="button"
tabindex="0"
onkeydown={(e) => e.key === "Escape" && (showClearAllConfirm = false)}
>
<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
<div
class="bg-[var(--bg-primary)] border border-red-500/30 rounded-lg shadow-xl max-w-md w-full p-6"
onclick={(e) => e.stopPropagation()}
role="dialog"
aria-labelledby="clear-all-title"
aria-describedby="clear-all-description"
tabindex="-1"
>
<div class="flex items-start gap-4">
<div class="flex-shrink-0 text-red-500">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="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>
</div>
<div class="flex-1">
<h3 id="clear-all-title" class="text-lg font-semibold text-[var(--text-primary)] mb-2">
Clear All Sessions?
</h3>
<p id="clear-all-description" class="text-[var(--text-secondary)] mb-4">
This will permanently delete all {sessions.length} session{sessions.length === 1
? ""
: "s"}. This action cannot be undone.
</p>
<div class="flex justify-end gap-3">
<button
onclick={() => (showClearAllConfirm = false)}
class="px-4 py-2 text-sm font-medium bg-[var(--bg-secondary)] text-[var(--text-primary)] border border-[var(--border-color)] rounded hover:bg-[var(--bg-tertiary)] transition-colors"
>
Cancel
</button>
<button
onclick={handleClearAll}
class="px-4 py-2 text-sm font-medium bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
>
Clear All Sessions
</button>
</div>
</div>
</div>
</div>
</div>
{/if}
<style>
[role="dialog"] {
animation: slideIn 0.2s ease-out;