feat(ui): custom confirmation dialog replacing native window.confirm
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 51s

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>
This commit is contained in:
2026-04-17 17:15:21 +02:00
parent 3b1950713f
commit 1b9928f806
7 changed files with 229 additions and 9 deletions

View File

@@ -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>