generated from nhcarrigan/template
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:
@@ -15,6 +15,7 @@
|
|||||||
let showDeleteConfirm = $state<string | null>(null);
|
let showDeleteConfirm = $state<string | null>(null);
|
||||||
let showExportMenu = $state<string | null>(null);
|
let showExportMenu = $state<string | null>(null);
|
||||||
let isImporting = $state(false);
|
let isImporting = $state(false);
|
||||||
|
let showClearAllConfirm = $state(false);
|
||||||
|
|
||||||
const sessions = $derived(sessionsStore.sessions);
|
const sessions = $derived(sessionsStore.sessions);
|
||||||
const isLoading = $derived(sessionsStore.isLoading);
|
const isLoading = $derived(sessionsStore.isLoading);
|
||||||
@@ -121,6 +122,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function handleClearAll(): Promise<void> {
|
||||||
|
await sessionsStore.clearAllSessions();
|
||||||
|
showClearAllConfirm = false;
|
||||||
|
}
|
||||||
|
|
||||||
function toggleExportMenu(sessionId: string): void {
|
function toggleExportMenu(sessionId: string): void {
|
||||||
if (showExportMenu === sessionId) {
|
if (showExportMenu === sessionId) {
|
||||||
showExportMenu = null;
|
showExportMenu = null;
|
||||||
@@ -186,6 +192,22 @@
|
|||||||
</svg>
|
</svg>
|
||||||
{isImporting ? "Importing..." : "Import"}
|
{isImporting ? "Importing..." : "Import"}
|
||||||
</button>
|
</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}
|
{/if}
|
||||||
<button
|
<button
|
||||||
onclick={onClose}
|
onclick={onClose}
|
||||||
@@ -428,6 +450,64 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
<style>
|
||||||
[role="dialog"] {
|
[role="dialog"] {
|
||||||
animation: slideIn 0.2s ease-out;
|
animation: slideIn 0.2s ease-out;
|
||||||
|
|||||||
Reference in New Issue
Block a user