feat(ui): Cancel button to discard an accidental recording

src/App.svelte

@@ -14,7 +14,7 @@
   import { api, type NoteTemplate } from "./lib/api";
   import { onMount } from "svelte";
   import ThemeToggle from "./lib/components/ThemeToggle.svelte";
-  import { Circle, Square, Settings as SettingsIcon, AlertTriangle } from "@lucide/svelte";
+  import { Circle, Square, Trash2, Settings as SettingsIcon, AlertTriangle } from "@lucide/svelte";
 
   let showSettings = $state(false);
   let showConsent = $state(false);
@@ -99,6 +99,12 @@
     else recording.stop();
   }
 
+  async function cancelRecording() {
+    if (!confirm("Discard this recording? Its audio and transcript will be deleted.")) return;
+    await recording.cancel();
+    meetings.deselect();
+  }
+
   // Global shortcuts (T7.4, FR-UX-3): record start/stop, view toggles.
   function isEditableTarget(target: EventTarget | null): boolean {
     if (!(target instanceof HTMLElement)) return false;
@@ -199,6 +205,14 @@
         <Square size={11} fill="currentColor" aria-hidden="true" />
         Stop
       </button>
+      <button
+        class="cancel-btn"
+        onclick={cancelRecording}
+        title="Discard this recording and delete it"
+      >
+        <Trash2 size={12} aria-hidden="true" />
+        Cancel
+      </button>
       <span class="rec">
         <span class="rec-dot" aria-hidden="true"></span>
         Recording…
@@ -461,6 +475,25 @@
   .stop-btn:hover {
     background: var(--border);
   }
+  .cancel-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.7rem;
+    border-radius: var(--radius-full);
+    background: transparent;
+    color: var(--muted);
+    border: 1px solid var(--border);
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition:
+      color 150ms ease-out,
+      border-color 150ms ease-out;
+  }
+  .cancel-btn:hover {
+    color: var(--danger);
+    border-color: var(--danger);
+  }
   .rec {
     display: inline-flex;
     align-items: center;