feat(ui): custom confirmation dialog replacing native window.confirm

Single reusable dialog with a promise-based API: confirmAction({...})
returns Promise<boolean>. Supports title, optional message body,
confirm/cancel labels, and a 'destructive' flag that paints the confirm
button red.

Accessibility: Escape cancels, Enter confirms, confirm button auto-focus,
role=dialog + aria-labelledby, backdrop click = cancel.

Rolled out to: recipe delete, domain remove, profile delete, wishlist
remove. Native confirm() is gone from the codebase.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/lib/client/confirm.svelte.ts

@@ -0,0 +1,41 @@
+export type ConfirmOptions = {
+  title: string;
+  message?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  destructive?: boolean;
+};
+
+type PendingRequest = ConfirmOptions & {
+  resolve: (result: boolean) => void;
+};
+
+class ConfirmStore {
+  pending = $state<PendingRequest | null>(null);
+
+  ask(options: ConfirmOptions): Promise<boolean> {
+    // If another dialog is already open, close it as cancelled so we don't stack.
+    if (this.pending) this.pending.resolve(false);
+    return new Promise<boolean>((resolve) => {
+      this.pending = { ...options, resolve };
+    });
+  }
+
+  answer(result: boolean): void {
+    if (!this.pending) return;
+    const p = this.pending;
+    this.pending = null;
+    p.resolve(result);
+  }
+}
+
+export const confirmStore = new ConfirmStore();
+
+/**
+ * Show a modal confirmation dialog. Resolves to true on confirm, false on cancel/Escape.
+ * Safe on the server: falls back to the native confirm() only in the browser.
+ */
+export function confirmAction(options: ConfirmOptions): Promise<boolean> {
+  if (typeof window === 'undefined') return Promise.resolve(false);
+  return confirmStore.ask(options);
+}

src/lib/components/ConfirmDialog.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte';
+  import { confirmStore } from '$lib/client/confirm.svelte';
+
+  let confirmButton = $state<HTMLButtonElement | null>(null);
+
+  $effect(() => {
+    if (confirmStore.pending) {
+      void tick().then(() => confirmButton?.focus());
+    }
+  });
+
+  function onKey(e: KeyboardEvent) {
+    if (!confirmStore.pending) return;
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      confirmStore.answer(false);
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      confirmStore.answer(true);
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  });
+</script>
+
+{#if confirmStore.pending}
+  {@const p = confirmStore.pending}
+  <div class="backdrop" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
+    <button
+      class="backdrop-close"
+      aria-label="Abbrechen"
+      onclick={() => confirmStore.answer(false)}
+    ></button>
+    <div class="dialog" role="document">
+      <h2 id="confirm-title">{p.title}</h2>
+      {#if p.message}
+        <p class="message">{p.message}</p>
+      {/if}
+      <div class="actions">
+        <button
+          type="button"
+          class="btn cancel"
+          onclick={() => confirmStore.answer(false)}
+        >
+          {p.cancelLabel ?? 'Abbrechen'}
+        </button>
+        <button
+          type="button"
+          class="btn confirm"
+          class:destructive={p.destructive}
+          bind:this={confirmButton}
+          onclick={() => confirmStore.answer(true)}
+        >
+          {p.confirmLabel ?? 'Bestätigen'}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+    z-index: 200;
+  }
+  .backdrop-close {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    background: rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+  }
+  .dialog {
+    position: relative;
+    background: white;
+    border-radius: 16px;
+    padding: 1.4rem 1.25rem 1.1rem;
+    width: min(420px, 100%);
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
+    animation: pop 0.14s ease-out;
+  }
+  @keyframes pop {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  h2 {
+    margin: 0 0 0.4rem;
+    font-size: 1.15rem;
+    line-height: 1.3;
+    color: #1a1a1a;
+  }
+  .message {
+    margin: 0 0 1.1rem;
+    color: #555;
+    line-height: 1.45;
+    font-size: 0.95rem;
+  }
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+  .btn {
+    padding: 0.7rem 1.1rem;
+    min-height: 44px;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    cursor: pointer;
+    font: inherit;
+  }
+  .cancel {
+    background: white;
+    color: #444;
+    border: 1px solid #cfd9d1;
+  }
+  .cancel:hover {
+    background: #f4f8f5;
+  }
+  .confirm {
+    background: #2b6a3d;
+    color: white;
+    border: 0;
+  }
+  .confirm.destructive {
+    background: #c53030;
+  }
+  .confirm:focus-visible,
+  .cancel:focus-visible {
+    outline: 2px solid #1a1a1a;
+    outline-offset: 2px;
+  }
+</style>