feat(pwa): Toast-Store + Renderer
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m19s

Toast-Queue als $state-Store mit Auto-Dismiss nach 3 s und manuellem
dismiss(id). Drei Kinds: info/error/success (Farbe). Renderer als
<Toast /> im Root-Layout, fix-positioniert oben mittig. Wird
vom Offline-Check der Schreib-Aktionen genutzt und später auch für
Sync-Abschluss-Meldungen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-18 16:21:14 +02:00
parent 04641355df
commit 0c66bd677e
4 changed files with 117 additions and 0 deletions

View File

@@ -0,0 +1,25 @@
export type ToastKind = 'info' | 'error' | 'success';
export type Toast = { id: number; kind: ToastKind; message: string };
class ToastStore {
toasts = $state<Toast[]>([]);
private nextId = 1;
private readonly dismissMs = 3000;
private push(kind: ToastKind, message: string): number {
const id = this.nextId++;
this.toasts = [...this.toasts, { id, kind, message }];
setTimeout(() => this.dismiss(id), this.dismissMs);
return id;
}
info(message: string): number { return this.push('info', message); }
error(message: string): number { return this.push('error', message); }
success(message: string): number { return this.push('success', message); }
dismiss(id: number): void {
this.toasts = this.toasts.filter((t) => t.id !== id);
}
}
export const toastStore = new ToastStore();