From 4f7c76c908bab51a810a991be44b7b7b375238eb Mon Sep 17 00:00:00 2001
From: Hendrik <hsiegeln@gmx.net>
Date: Fri, 17 Apr 2026 17:23:07 +0200
Subject: [PATCH] feat(ui): custom dialog replaces all remaining window.alert()
 calls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

alertAction({title, message}) returns Promise<void> and renders the
same ConfirmDialog with infoOnly:true — single OK button, no Abbrechen.
Replaces:
- 'Bitte Profil wählen.' (recipe rating / favorite / cooked / comment)
- 'Bitte Profil wählen, um zu liken.' (wishlist)
- 'Profil konnte nicht angelegt werden' (ProfileSwitcher)
- 'Umbenennen fehlgeschlagen' (admin/profiles)
- 'Speichern fehlgeschlagen' (preview)

No window.alert() or window.confirm() left in the codebase.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/client/confirm.svelte.ts          | 13 +++++++++++++
 src/lib/components/ConfirmDialog.svelte   | 16 +++++++++-------
 src/lib/components/ProfileSwitcher.svelte |  6 +++++-
 src/routes/admin/profiles/+page.svelte    |  7 +++++--
 src/routes/preview/+page.svelte           |  6 +++++-
 src/routes/recipes/[id]/+page.svelte      | 22 +++++++++++++++++-----
 src/routes/wishlist/+page.svelte          |  7 +++++--
 7 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/src/lib/client/confirm.svelte.ts b/src/lib/client/confirm.svelte.ts
index 3fa1aef..368c3eb 100644
--- a/src/lib/client/confirm.svelte.ts
+++ b/src/lib/client/confirm.svelte.ts
@@ -4,6 +4,8 @@ export type ConfirmOptions = {
   confirmLabel?: string;
   cancelLabel?: string;
   destructive?: boolean;
+  /** If true, hide the cancel button — used for simple info/alert dialogs. */
+  infoOnly?: boolean;
 };
 
 type PendingRequest = ConfirmOptions & {
@@ -39,3 +41,14 @@ export function confirmAction(options: ConfirmOptions): Promise<boolean> {
   if (typeof window === 'undefined') return Promise.resolve(false);
   return confirmStore.ask(options);
 }
+
+/**
+ * Show a modal info dialog with a single OK button. Resolves when dismissed.
+ * Use instead of window.alert().
+ */
+export function alertAction(options: Omit<ConfirmOptions, 'destructive' | 'cancelLabel' | 'infoOnly'>): Promise<void> {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return confirmStore
+    .ask({ ...options, infoOnly: true, confirmLabel: options.confirmLabel ?? 'OK' })
+    .then(() => undefined);
+}
diff --git a/src/lib/components/ConfirmDialog.svelte b/src/lib/components/ConfirmDialog.svelte
index f9986d4..cd63486 100644
--- a/src/lib/components/ConfirmDialog.svelte
+++ b/src/lib/components/ConfirmDialog.svelte
@@ -41,13 +41,15 @@
         <p class="message">{p.message}</p>
       {/if}
       <div class="actions">
-        <button
-          type="button"
-          class="btn cancel"
-          onclick={() => confirmStore.answer(false)}
-        >
-          {p.cancelLabel ?? 'Abbrechen'}
-        </button>
+        {#if !p.infoOnly}
+          <button
+            type="button"
+            class="btn cancel"
+            onclick={() => confirmStore.answer(false)}
+          >
+            {p.cancelLabel ?? 'Abbrechen'}
+          </button>
+        {/if}
         <button
           type="button"
           class="btn confirm"
diff --git a/src/lib/components/ProfileSwitcher.svelte b/src/lib/components/ProfileSwitcher.svelte
index 36d2640..4e32b49 100644
--- a/src/lib/components/ProfileSwitcher.svelte
+++ b/src/lib/components/ProfileSwitcher.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { profileStore } from '$lib/client/profile.svelte';
+  import { alertAction } from '$lib/client/confirm.svelte';
 
   let showModal = $state(false);
   let newName = $state('');
@@ -13,7 +14,10 @@
       newName = '';
       showModal = false;
     } catch (e) {
-      alert((e as Error).message);
+      await alertAction({
+        title: 'Profil konnte nicht angelegt werden',
+        message: (e as Error).message
+      });
     }
   }
 </script>
diff --git a/src/routes/admin/profiles/+page.svelte b/src/routes/admin/profiles/+page.svelte
index 18f847e..9a58807 100644
--- a/src/routes/admin/profiles/+page.svelte
+++ b/src/routes/admin/profiles/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { profileStore } from '$lib/client/profile.svelte';
-  import { confirmAction } from '$lib/client/confirm.svelte';
+  import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
 
   let newName = $state('');
   let newEmoji = $state('🍳');
@@ -31,7 +31,10 @@
     });
     if (!res.ok) {
       const body = await res.json().catch(() => ({}));
-      alert(`Fehler: ${body.message ?? res.status}`);
+      await alertAction({
+        title: 'Umbenennen fehlgeschlagen',
+        message: body.message ?? `HTTP ${res.status}`
+      });
       return;
     }
     await profileStore.load();
diff --git a/src/routes/preview/+page.svelte b/src/routes/preview/+page.svelte
index bb32fac..671bf50 100644
--- a/src/routes/preview/+page.svelte
+++ b/src/routes/preview/+page.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
   import RecipeView from '$lib/components/RecipeView.svelte';
+  import { alertAction } from '$lib/client/confirm.svelte';
   import type { Recipe } from '$lib/types';
 
   let targetUrl = $state(($page.url.searchParams.get('url') ?? '').trim());
@@ -45,7 +46,10 @@
     saving = false;
     if (!res.ok) {
       const body = await res.json().catch(() => ({}));
-      alert(`Speichern fehlgeschlagen: ${body.message ?? res.status}`);
+      await alertAction({
+        title: 'Speichern fehlgeschlagen',
+        message: body.message ?? `HTTP ${res.status}`
+      });
       return;
     }
     const body = await res.json();
diff --git a/src/routes/recipes/[id]/+page.svelte b/src/routes/recipes/[id]/+page.svelte
index 0670eeb..41b4210 100644
--- a/src/routes/recipes/[id]/+page.svelte
+++ b/src/routes/recipes/[id]/+page.svelte
@@ -4,7 +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 { confirmAction, alertAction } from '$lib/client/confirm.svelte';
   import type { CommentRow } from '$lib/server/recipes/actions';
 
   let { data } = $props();
@@ -40,7 +40,10 @@
 
   async function setRating(stars: number) {
     if (!profileStore.active) {
-      alert('Bitte erst Profil wählen.');
+      await alertAction({
+        title: 'Kein Profil gewählt',
+        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
+      });
       return;
     }
     await fetch(`/api/recipes/${data.recipe.id}/rating`, {
@@ -55,7 +58,10 @@
 
   async function toggleFavorite() {
     if (!profileStore.active) {
-      alert('Bitte erst Profil wählen.');
+      await alertAction({
+        title: 'Kein Profil gewählt',
+        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
+      });
       return;
     }
     const method = isFav ? 'DELETE' : 'PUT';
@@ -69,7 +75,10 @@
 
   async function logCooked() {
     if (!profileStore.active) {
-      alert('Bitte erst Profil wählen.');
+      await alertAction({
+        title: 'Kein Profil gewählt',
+        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
+      });
       return;
     }
     const res = await fetch(`/api/recipes/${data.recipe.id}/cooked`, {
@@ -83,7 +92,10 @@
 
   async function addComment() {
     if (!profileStore.active) {
-      alert('Bitte erst Profil wählen.');
+      await alertAction({
+        title: 'Kein Profil gewählt',
+        message: 'Tippe oben rechts auf „Profil wählen", dann klappt die Aktion.'
+      });
       return;
     }
     const text = newComment.trim();
diff --git a/src/routes/wishlist/+page.svelte b/src/routes/wishlist/+page.svelte
index 4db9413..60cd6e5 100644
--- a/src/routes/wishlist/+page.svelte
+++ b/src/routes/wishlist/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { profileStore } from '$lib/client/profile.svelte';
-  import { confirmAction } from '$lib/client/confirm.svelte';
+  import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
   import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
 
   let entries = $state<WishlistEntry[]>([]);
@@ -27,7 +27,10 @@
 
   async function toggleLike(entry: WishlistEntry) {
     if (!profileStore.active) {
-      alert('Bitte Profil wählen, um zu liken.');
+      await alertAction({
+        title: 'Kein Profil gewählt',
+        message: 'Tippe oben rechts auf „Profil wählen", um zu liken.'
+      });
       return;
     }
     const method = entry.liked_by_me ? 'DELETE' : 'PUT';