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>
This commit is contained in:
MechaCat02
@@ -9,6 +9,10 @@
|
||||
import { privacyNote } from '$lib/privacy-note-store';
|
||||
import { quotaStore, refreshQuota } from '$lib/quota-store';
|
||||
import { onSseEvent } from '$lib/sse';
|
||||
import { focusTrap } from '$lib/actions/focus-trap';
|
||||
import { avatarPalette, initials } from '$lib/avatar';
|
||||
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
|
||||
import { vibrate } from '$lib/haptics';
|
||||
import type { MeContextDto } from '$lib/types';
|
||||
|
||||
let displayName = $state<string | null>(null);
|
||||
@@ -91,15 +95,20 @@
|
||||
if (!value) return;
|
||||
navigator.clipboard.writeText(value);
|
||||
pinCopied = true;
|
||||
vibrate([0, 8, 60, 8]);
|
||||
setTimeout(() => (pinCopied = false), 2000);
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
try { await api.delete('/session'); } catch { /* ignore */ }
|
||||
// Session-delete is best-effort: the JWT is going away on this device either way,
|
||||
// so a network failure shouldn't block the user from leaving the event.
|
||||
try { await api.delete('/session'); } catch { /* best-effort logout */ }
|
||||
// Wipe the IndexedDB upload queue so a second guest using the same device can't
|
||||
// inherit (or be blamed for) this guest's pending uploads. Not done on a 401
|
||||
// auto-clear — that path preserves the queue in case the user re-authenticates.
|
||||
try { await clearQueue(); } catch { /* ignore */ }
|
||||
try { await clearQueue(); } catch { /* best-effort cleanup */ }
|
||||
// Note: export-status teardown is wired via the onClearAuth hook in
|
||||
// export-status-store, so it runs for both this explicit path and api.ts's 401.
|
||||
clearAuth();
|
||||
goto('/join');
|
||||
}
|
||||
@@ -124,13 +133,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function avatarColor(name: string | null): string {
|
||||
if (!name) return 'bg-gray-100 text-gray-500';
|
||||
const COLORS = ['bg-blue-100 text-blue-700','bg-purple-100 text-purple-700','bg-green-100 text-green-700','bg-amber-100 text-amber-700','bg-rose-100 text-rose-700'];
|
||||
let hash = 0;
|
||||
for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
|
||||
return COLORS[hash % COLORS.length];
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
|
||||
@@ -147,9 +149,9 @@
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
|
||||
{avatarColor(displayName)}"
|
||||
{avatarPalette(displayName)}"
|
||||
>
|
||||
{displayName ? displayName[0].toUpperCase() : '?'}
|
||||
{initials(displayName)}
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{displayName ?? 'Unbekannt'}</p>
|
||||
@@ -384,68 +386,50 @@
|
||||
|
||||
<!-- Data-mode warning bottom sheet — shown once when the user picks Original. -->
|
||||
{#if dataModeWarningOpen}
|
||||
<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (dataModeWarningOpen = false)}>
|
||||
<div
|
||||
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="mb-4 flex justify-center">
|
||||
<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
|
||||
</div>
|
||||
<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Original-Dateien laden?</h3>
|
||||
<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
|
||||
</p>
|
||||
<button
|
||||
onclick={confirmOriginalMode}
|
||||
class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700"
|
||||
>
|
||||
Aktivieren
|
||||
</button>
|
||||
<button
|
||||
onclick={() => (dataModeWarningOpen = false)}
|
||||
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="fixed inset-0 z-50 bg-black/40"
|
||||
aria-label="Schließen"
|
||||
tabindex="-1"
|
||||
onclick={() => (dataModeWarningOpen = false)}
|
||||
></button>
|
||||
<div
|
||||
class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white px-5 pt-6 dark:bg-gray-900"
|
||||
style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="data-mode-title"
|
||||
use:focusTrap={{ onclose: () => (dataModeWarningOpen = false) }}
|
||||
>
|
||||
<div class="mb-4 flex justify-center">
|
||||
<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
|
||||
</div>
|
||||
<h3 id="data-mode-title" class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Original-Dateien laden?</h3>
|
||||
<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
|
||||
</p>
|
||||
<button
|
||||
onclick={confirmOriginalMode}
|
||||
class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 active:bg-blue-700"
|
||||
>
|
||||
Aktivieren
|
||||
</button>
|
||||
<button
|
||||
onclick={() => (dataModeWarningOpen = false)}
|
||||
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Leave-confirm bottom sheet -->
|
||||
{#if leaveConfirmOpen}
|
||||
<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)}>
|
||||
<div
|
||||
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="mb-4 flex justify-center">
|
||||
<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
|
||||
</div>
|
||||
<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Event verlassen?</h3>
|
||||
<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
|
||||
</p>
|
||||
<button
|
||||
onclick={handleLogout}
|
||||
class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400"
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
<button
|
||||
onclick={() => (leaveConfirmOpen = false)}
|
||||
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<ConfirmSheet
|
||||
open={leaveConfirmOpen}
|
||||
title="Event verlassen?"
|
||||
message="Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren."
|
||||
confirmLabel="Abmelden"
|
||||
tone="danger"
|
||||
onConfirm={handleLogout}
|
||||
onCancel={() => (leaveConfirmOpen = false)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user