fabi/EventSnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
2026-05-24 22:50:28 +02:00
parent b241ba6415
commit 309c25bc06
36 changed files with 1751 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/routes/upload/+page.svelte
View File

@@ -7,6 +7,8 @@
import { get } from 'svelte/store';
import { onMount, onDestroy } from 'svelte';
import { quotaStore, refreshQuota } from '$lib/quota-store';
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
import { vibrate } from '$lib/haptics';
import type { PendingFile } from '$lib/pending-upload-store';
interface StagedFile extends PendingFile {
@@ -17,6 +19,7 @@
let caption = $state('');
let submitting = $state(false);
let captionEl: HTMLTextAreaElement;
let discardConfirmOpen = $state(false);
const MAX_CAPTION_LENGTH = 2000;
@@ -66,6 +69,16 @@
}
function cancel() {
if (stagedFiles.length > 0 || caption.trim().length > 0) {
discardConfirmOpen = true;
return;
}
clearPending();
goto('/feed');
}
function confirmDiscard() {
discardConfirmOpen = false;
clearPending();
goto('/feed');
}
@@ -74,6 +87,7 @@
if (stagedFiles.length === 0 || submitting) return;
if (caption.length > MAX_CAPTION_LENGTH) return;
submitting = true;
vibrate(10);
const hashtagsString = captionTags.join(',');
for (const sf of stagedFiles) {
await addToQueue(sf.file, caption, hashtagsString);
@@ -221,12 +235,29 @@
style="width: {quotaPercent}%"
></div>
</div>
{#if quotaPercent >= 100}
<p class="mt-1 font-medium text-red-600 dark:text-red-400">Limit erreicht — bitte alte Beiträge löschen.</p>
{:else if quotaPercent >= 95}
<p class="mt-1 font-medium text-amber-600 dark:text-amber-400">Fast voll.</p>
{/if}
</div>
{/if}
<div class="h-8"></div>
</div>
<!-- Discard confirmation — appears only when the composer has unsaved content. -->
<ConfirmSheet
open={discardConfirmOpen}
title="Verwerfen?"
message="Deine Auswahl und der Text gehen verloren."
confirmLabel="Verwerfen"
cancelLabel="Weiter bearbeiten"
tone="danger"
onConfirm={confirmDiscard}
onCancel={() => (discardConfirmOpen = false)}
/>
<!-- Sticky submit button at bottom (mobile-primary) -->
<div class="border-t border-gray-100 px-4 py-3 dark:border-gray-800">
<button