From 9b3c242333b56e96639bbff5b9f3cd524d7db42c Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Sat, 7 Feb 2026 14:24:50 -0800
Subject: [PATCH] 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
---
 src/lib/components/SessionHistoryPanel.svelte | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/src/lib/components/SessionHistoryPanel.svelte b/src/lib/components/SessionHistoryPanel.svelte
index 61a69f6..e674cac 100644
--- a/src/lib/components/SessionHistoryPanel.svelte
+++ b/src/lib/components/SessionHistoryPanel.svelte
@@ -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;