feat(frontend): UX review followups — primitives + a11y/UX fixes across 4 passes

New shared primitives: - Toaster + toast-store, ConfirmSheet, Modal, focusTrap action, pullToRefresh action, avatarPalette + initials helper, Skeleton, HeartBurst, haptics, export-status store with onClearAuth hook Critical UX/a11y: - Replaced window.confirm with branded ConfirmSheet - Focus management + Escape on every modal (PIN, Lightbox, Onboarding, ContextSheet, data-mode sheet, leave-confirm, HTML guide, host/admin ban + PIN-display modals) - Sheet backdrops are real buttons with aria-label - Silent ApiError catches now surface via global Toaster Major polish: - Dark-mode parity on HashtagChips + avatars (shared palette) - Conditional Export tab in BottomNav (badge dot when ZIP ready) - Back chevrons on /recover (history-aware) and /export - Upload composer discard confirmation when content is staged - Camera segmented Photo/Video shutter - PIN auto-submit on 4th digit, paste-flash-free (controlled input) - Welcome-back toast on /feed after PIN recovery Minor: - Skeleton states on feed; pull-to-refresh with live drag indicator - Haptics on like / capture / submit / PIN-copy / onboarding complete - Comment 500-char counter; quota "Fast voll" / "Limit erreicht" labels - Onboarding pip ≥24px tap targets; long-press hint step - overscroll-behavior lock on <html> while feed mounted - teardownExportStatus wired via onClearAuth (covers 401 + explicit logout) - ConfirmSheet per-instance titleId; Modal requires titleId or ariaLabel Tests (7 new Playwright specs): - 01-auth/pin-auto-submit, 01-auth/back-chevron - 03-feed/confirm-sheet-delete, 03-feed/toast-on-failure - 09-mobile/focus-trap, 09-mobile/sheet-escape, 09-mobile/upload-cancel-confirm FOLLOWUPS.md captures the deferred AT inert containment work with acceptance criteria + implementation sketches. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-24 22:50:28 +02:00
parent b241ba6415
commit 309c25bc06
36 changed files with 1751 additions and 433 deletions
--- a/frontend/src/lib/components/Toaster.svelte
+++ b/frontend/src/lib/components/Toaster.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { toasts, dismissToast, type Toast } from '$lib/toast-store';
+
+	function toneClasses(tone: Toast['tone']): string {
+		switch (tone) {
+			case 'success':
+				return 'bg-green-600 text-white dark:bg-green-500';
+			case 'warning':
+				return 'bg-amber-500 text-white dark:bg-amber-400 dark:text-gray-900';
+			case 'error':
+				return 'bg-red-600 text-white dark:bg-red-500';
+			default:
+				return 'bg-gray-900 text-white dark:bg-gray-800';
+		}
+	}
+</script>
+
+<div
+	class="pointer-events-none fixed inset-x-0 z-[60] flex flex-col items-center gap-2 px-4"
+	style="bottom: calc(env(safe-area-inset-bottom) + 5rem)"
+	role="region"
+	aria-live="polite"
+	aria-label="Benachrichtigungen"
+	data-testid="toaster"
+>
+	{#each $toasts as t (t.id)}
+		<button
+			type="button"
+			onclick={() => dismissToast(t.id)}
+			class="pointer-events-auto w-full max-w-sm rounded-xl px-4 py-3 text-left text-sm font-medium shadow-lg transition active:scale-[0.98] {toneClasses(t.tone)}"
+			data-testid="toast"
+			data-toast-tone={t.tone}
+		>
+			{t.message}
+		</button>
+	{/each}
+</div>