feat(pwa): Toast-Store + Renderer
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m19s
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:
25
src/lib/client/toast.svelte.ts
Normal file
25
src/lib/client/toast.svelte.ts
Normal 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();
|
||||
Reference in New Issue
Block a user