From 1b9928f806a9b9d4a8b13eb495de4a820774daa5 Mon Sep 17 00:00:00 2001
From: Hendrik <hsiegeln@gmx.net>
Date: Fri, 17 Apr 2026 17:15:21 +0200
Subject: [PATCH] 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        |  41 +++++++
 src/lib/components/ConfirmDialog.svelte | 147 ++++++++++++++++++++++++
 src/routes/+layout.svelte               |   3 +
 src/routes/admin/domains/+page.svelte   |  15 ++-
 src/routes/admin/profiles/+page.svelte  |  14 ++-
 src/routes/recipes/[id]/+page.svelte    |   9 +-
 src/routes/wishlist/+page.svelte        |   9 +-
 7 files changed, 229 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/client/confirm.svelte.ts
 create mode 100644 src/lib/components/ConfirmDialog.svelte

diff --git a/src/lib/client/confirm.svelte.ts b/src/lib/client/confirm.svelte.ts
new file mode 100644
index 0000000..3fa1aef
--- /dev/null
+++ b/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);
+}
diff --git a/src/lib/components/ConfirmDialog.svelte b/src/lib/components/ConfirmDialog.svelte
new file mode 100644
index 0000000..f9986d4
--- /dev/null
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5284db5..eadd109 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { profileStore } from '$lib/client/profile.svelte';
   import ProfileSwitcher from '$lib/components/ProfileSwitcher.svelte';
+  import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 
   let { children } = $props();
 
@@ -10,6 +11,8 @@
   });
 </script>
 
+<ConfirmDialog />
+
 <header class="bar">
   <a href="/" class="brand">Kochwas</a>
   <div class="bar-right">
diff --git a/src/routes/admin/domains/+page.svelte b/src/routes/admin/domains/+page.svelte
index c14c476..0b59c21 100644
--- a/src/routes/admin/domains/+page.svelte
+++ b/src/routes/admin/domains/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import type { AllowedDomain } from '$lib/types';
+  import { confirmAction } from '$lib/client/confirm.svelte';
 
   let domains = $state<AllowedDomain[]>([]);
   let loading = $state(true);
@@ -38,9 +39,15 @@
     await load();
   }
 
-  async function remove(id: number) {
-    if (!confirm('Domain entfernen?')) return;
-    await fetch(`/api/domains/${id}`, { method: 'DELETE' });
+  async function remove(d: AllowedDomain) {
+    const ok = await confirmAction({
+      title: 'Domain entfernen?',
+      message: `${d.domain} wird nicht mehr durchsucht. Gespeicherte Rezepte bleiben erhalten.`,
+      confirmLabel: 'Entfernen',
+      destructive: true
+    });
+    if (!ok) return;
+    await fetch(`/api/domains/${d.id}`, { method: 'DELETE' });
     await load();
   }
 
@@ -80,7 +87,7 @@
           <div class="dom">{d.domain}</div>
           {#if d.display_name}<div class="label">{d.display_name}</div>{/if}
         </div>
-        <button class="btn danger" onclick={() => remove(d.id)}>Löschen</button>
+        <button class="btn danger" onclick={() => remove(d)}>Löschen</button>
       </li>
     {/each}
   </ul>
diff --git a/src/routes/admin/profiles/+page.svelte b/src/routes/admin/profiles/+page.svelte
index c7bacc8..18f847e 100644
--- a/src/routes/admin/profiles/+page.svelte
+++ b/src/routes/admin/profiles/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { profileStore } from '$lib/client/profile.svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
 
   let newName = $state('');
   let newEmoji = $state('🍳');
@@ -36,8 +37,15 @@
     await profileStore.load();
   }
 
-  async function remove(id: number) {
-    if (!confirm('Profil wirklich löschen? Bewertungen, Favoriten und Kochjournal dieses Profils werden mit gelöscht.')) return;
+  async function remove(id: number, name: string) {
+    const ok = await confirmAction({
+      title: `Profil „${name}" löschen?`,
+      message:
+        'Bewertungen, Favoriten und Kochjournal-Einträge dieses Profils werden mit gelöscht. Rezepte und Kommentare bleiben erhalten.',
+      confirmLabel: 'Löschen',
+      destructive: true
+    });
+    if (!ok) return;
     await fetch(`/api/profiles/${id}`, { method: 'DELETE' });
     if (profileStore.activeId === id) profileStore.clear();
     await profileStore.load();
@@ -82,7 +90,7 @@
         </div>
         <div class="actions">
           <button class="btn" onclick={() => rename(p.id, p.name)}>Umbenennen</button>
-          <button class="btn danger" onclick={() => remove(p.id)}>Löschen</button>
+          <button class="btn danger" onclick={() => remove(p.id, p.name)}>Löschen</button>
         </div>
       </li>
     {/each}
diff --git a/src/routes/recipes/[id]/+page.svelte b/src/routes/recipes/[id]/+page.svelte
index be6f4de..0670eeb 100644
--- a/src/routes/recipes/[id]/+page.svelte
+++ b/src/routes/recipes/[id]/+page.svelte
@@ -4,6 +4,7 @@
   import RecipeView from '$lib/components/RecipeView.svelte';
   import StarRating from '$lib/components/StarRating.svelte';
   import { profileStore } from '$lib/client/profile.svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
   import type { CommentRow } from '$lib/server/recipes/actions';
 
   let { data } = $props();
@@ -109,7 +110,13 @@
   }
 
   async function deleteRecipe() {
-    if (!confirm(`Rezept „${data.recipe.title}" wirklich löschen?`)) return;
+    const ok = await confirmAction({
+      title: 'Rezept löschen?',
+      message: `„${data.recipe.title}" wird endgültig entfernt — mit Bewertungen, Kommentaren und Kochjournal-Einträgen.`,
+      confirmLabel: 'Löschen',
+      destructive: true
+    });
+    if (!ok) return;
     await fetch(`/api/recipes/${data.recipe.id}`, { method: 'DELETE' });
     goto('/');
   }
diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 6b24569..4db9413 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { profileStore } from '$lib/client/profile.svelte';
+  import { confirmAction } from '$lib/client/confirm.svelte';
   import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
 
   let entries = $state<WishlistEntry[]>([]);
@@ -39,7 +40,13 @@
   }
 
   async function remove(entry: WishlistEntry) {
-    if (!confirm(`„${entry.title}" von der Wunschliste entfernen?`)) return;
+    const ok = await confirmAction({
+      title: 'Von der Wunschliste entfernen?',
+      message: `„${entry.title}" wird aus der Wunschliste entfernt. Das Rezept selbst bleibt gespeichert.`,
+      confirmLabel: 'Entfernen',
+      destructive: true
+    });
+    if (!ok) return;
     await fetch(`/api/wishlist/${entry.recipe_id}`, { method: 'DELETE' });
     await load();
   }