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
@@ -10,7 +10,12 @@
|
||||
import LightboxModal from '$lib/components/LightboxModal.svelte';
|
||||
import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
|
||||
import ContextSheet, { type ContextAction } from '$lib/components/ContextSheet.svelte';
|
||||
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
|
||||
import Skeleton from '$lib/components/Skeleton.svelte';
|
||||
import { refreshQuota } from '$lib/quota-store';
|
||||
import { toast, toastError } from '$lib/toast-store';
|
||||
import { pullToRefresh } from '$lib/actions/pull-to-refresh';
|
||||
import { vibrate } from '$lib/haptics';
|
||||
import type { FeedUpload, FeedResponse, HashtagCount, DeltaResponse } from '$lib/types';
|
||||
|
||||
let uploads = $state<FeedUpload[]>([]);
|
||||
@@ -18,8 +23,26 @@
|
||||
let selectedHashtag = $state<string | null>(null);
|
||||
let nextCursor = $state<string | null>(null);
|
||||
let loadingMore = $state(false);
|
||||
let initialLoading = $state(true);
|
||||
let refreshing = $state(false);
|
||||
let pullProgress = $state(0); // 0–1+ during the drag, 0 when idle
|
||||
let selectedUpload = $state<FeedUpload | null>(null);
|
||||
let sentinel: HTMLDivElement;
|
||||
let pendingDeleteId = $state<string | null>(null);
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// onMount A — DOM side-effects only (overscroll lock). Synchronous, returns
|
||||
// its own cleanup. Kept separate from the data-loading onMount below so its
|
||||
// cleanup can't be accidentally clobbered when someone edits the async one.
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
onMount(() => {
|
||||
if (typeof document === 'undefined') return;
|
||||
const prev = document.documentElement.style.overscrollBehaviorY;
|
||||
document.documentElement.style.overscrollBehaviorY = 'contain';
|
||||
return () => {
|
||||
document.documentElement.style.overscrollBehaviorY = prev;
|
||||
};
|
||||
});
|
||||
|
||||
// View mode
|
||||
let viewMode = $state<'list' | 'grid'>('list');
|
||||
@@ -54,7 +77,7 @@
|
||||
label: 'Löschen',
|
||||
icon: '🗑',
|
||||
tone: 'danger',
|
||||
onClick: () => deleteUpload(target.id)
|
||||
onClick: () => { pendingDeleteId = target.id; }
|
||||
});
|
||||
}
|
||||
return actions;
|
||||
@@ -64,15 +87,17 @@
|
||||
contextTarget = upload;
|
||||
}
|
||||
|
||||
async function deleteUpload(id: string) {
|
||||
if (!confirm('Diesen Beitrag wirklich löschen?')) return;
|
||||
async function confirmDelete() {
|
||||
const id = pendingDeleteId;
|
||||
if (!id) return;
|
||||
pendingDeleteId = null;
|
||||
try {
|
||||
await api.delete(`/upload/${id}`);
|
||||
uploads = uploads.filter((u) => u.id !== id);
|
||||
if (selectedUpload?.id === id) selectedUpload = null;
|
||||
void refreshQuota();
|
||||
} catch {
|
||||
// ignore — toast handled by ApiError elsewhere
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -133,12 +158,28 @@
|
||||
});
|
||||
});
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
// onMount B — auth gate, recovery toast, data load, SSE subscriptions,
|
||||
// infinite-scroll observer. Cleanup of the SSE handlers lives in onDestroy
|
||||
// below (not in a returned cleanup) because this callback is async.
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
onMount(async () => {
|
||||
if (!getToken()) {
|
||||
goto('/join');
|
||||
return;
|
||||
}
|
||||
|
||||
// Surface the welcome-back toast set by /recover. Lives here (not on /account)
|
||||
// because /feed is the first hydrated route after a successful PIN recovery —
|
||||
// the toast should land in the same beat as the "you're in" feeling.
|
||||
if (typeof sessionStorage !== 'undefined') {
|
||||
const welcome = sessionStorage.getItem('eventsnap_just_recovered');
|
||||
if (welcome) {
|
||||
sessionStorage.removeItem('eventsnap_just_recovered');
|
||||
toast(`Willkommen zurück, ${welcome}!`, 'success');
|
||||
}
|
||||
}
|
||||
|
||||
await Promise.all([loadFeed(), loadHashtags()]);
|
||||
connectSse();
|
||||
|
||||
@@ -202,7 +243,12 @@
|
||||
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
||||
uploads = res.uploads;
|
||||
nextCursor = res.next_cursor;
|
||||
} catch { /* ignore */ }
|
||||
} catch (e) {
|
||||
// Initial / user-triggered refresh is worth surfacing — background SSE refetches are noisier and silenced below.
|
||||
if (!refresh) toastError(e);
|
||||
} finally {
|
||||
initialLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMore() {
|
||||
@@ -216,7 +262,9 @@
|
||||
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
||||
uploads = [...uploads, ...res.uploads];
|
||||
nextCursor = res.next_cursor;
|
||||
} catch { /* ignore */ } finally {
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
} finally {
|
||||
loadingMore = false;
|
||||
}
|
||||
}
|
||||
@@ -224,7 +272,22 @@
|
||||
async function loadHashtags() {
|
||||
try {
|
||||
hashtags = await api.get<HashtagCount[]>('/hashtags');
|
||||
} catch { /* ignore */ }
|
||||
} catch {
|
||||
// Hashtag panel is a discoverability nicety — silent fail is acceptable; the feed still works.
|
||||
}
|
||||
}
|
||||
|
||||
async function pullRefresh() {
|
||||
if (refreshing) return;
|
||||
refreshing = true;
|
||||
pullProgress = 0;
|
||||
vibrate(10);
|
||||
try {
|
||||
nextCursor = null;
|
||||
await Promise.all([loadFeed(true), loadHashtags()]);
|
||||
} finally {
|
||||
refreshing = false;
|
||||
}
|
||||
}
|
||||
|
||||
function selectHashtag(tag: string | null) {
|
||||
@@ -236,6 +299,7 @@
|
||||
async function handleLike(id: string) {
|
||||
try {
|
||||
await api.post(`/upload/${id}/like`);
|
||||
vibrate(10);
|
||||
uploads = uploads.map((u) =>
|
||||
u.id === id
|
||||
? { ...u, liked_by_me: !u.liked_by_me, like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1 }
|
||||
@@ -248,7 +312,9 @@
|
||||
like_count: selectedUpload.liked_by_me ? selectedUpload.like_count - 1 : selectedUpload.like_count + 1,
|
||||
};
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
}
|
||||
}
|
||||
|
||||
function openComments(id: string) {
|
||||
@@ -282,9 +348,45 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
|
||||
<!-- Sticky header -->
|
||||
<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur dark:border-gray-800 dark:bg-gray-900/95">
|
||||
<div
|
||||
class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950"
|
||||
use:pullToRefresh={{
|
||||
onrefresh: pullRefresh,
|
||||
onpull: (_, progress) => (pullProgress = progress),
|
||||
disabled: initialLoading
|
||||
}}
|
||||
>
|
||||
<!-- Live pull-progress indicator: grows during the drag, rotates past threshold,
|
||||
swaps to a spinner once the network refresh kicks off. -->
|
||||
{#if refreshing || pullProgress > 0}
|
||||
<div class="pointer-events-none fixed left-0 right-0 top-2 z-40 flex justify-center">
|
||||
<div
|
||||
class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-blue-600 shadow transition-opacity dark:bg-gray-900/90 dark:text-blue-300"
|
||||
style="opacity: {refreshing ? 1 : Math.min(1, pullProgress)}"
|
||||
>
|
||||
{#if refreshing}
|
||||
<span class="inline-flex items-center gap-2">
|
||||
<span class="inline-block h-3 w-3 animate-spin rounded-full border-2 border-blue-200 border-t-blue-600 dark:border-blue-700 dark:border-t-blue-300"></span>
|
||||
Aktualisiere…
|
||||
</span>
|
||||
{:else}
|
||||
<svg
|
||||
class="inline-block h-4 w-4 transition-transform"
|
||||
style="transform: rotate({Math.min(180, pullProgress * 180)}deg)"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Sticky header — opaque fallback for browsers without backdrop-filter. -->
|
||||
<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur supports-[not(backdrop-filter:blur(0))]:bg-white dark:border-gray-800 dark:bg-gray-900/95 dark:supports-[not(backdrop-filter:blur(0))]:bg-gray-900">
|
||||
<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
|
||||
<h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Galerie</h1>
|
||||
|
||||
@@ -347,7 +449,11 @@
|
||||
type="search"
|
||||
placeholder="Nutzer oder #Tag suchen…"
|
||||
bind:value={searchQuery}
|
||||
onfocus={() => (showAutocomplete = true)}
|
||||
onfocus={(e) => {
|
||||
showAutocomplete = true;
|
||||
// Push the input above the virtual keyboard so suggestions stay visible.
|
||||
(e.currentTarget as HTMLInputElement).scrollIntoView({ block: 'center', behavior: 'smooth' });
|
||||
}}
|
||||
onblur={() => setTimeout(() => (showAutocomplete = false), 150)}
|
||||
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500"
|
||||
/>
|
||||
@@ -412,7 +518,21 @@
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
{#if uploads.length === 0}
|
||||
{#if initialLoading && uploads.length === 0}
|
||||
<div class="mx-auto max-w-2xl" data-testid="feed-skeleton">
|
||||
{#if viewMode === 'list'}
|
||||
{#each Array(3) as _}
|
||||
<Skeleton variant="card" />
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="grid grid-cols-3 gap-0.5">
|
||||
{#each Array(9) as _}
|
||||
<Skeleton variant="tile" />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if uploads.length === 0}
|
||||
<div class="py-20 text-center">
|
||||
<p class="text-lg text-gray-400 dark:text-gray-500">Noch keine Fotos.</p>
|
||||
<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Tippe auf den Plus-Button unten!</p>
|
||||
@@ -479,5 +599,16 @@
|
||||
onClose={() => (contextTarget = null)}
|
||||
/>
|
||||
|
||||
<!-- Branded delete confirmation — replaces window.confirm() -->
|
||||
<ConfirmSheet
|
||||
open={pendingDeleteId !== null}
|
||||
title="Beitrag löschen?"
|
||||
message="Diese Aktion kann nicht rückgängig gemacht werden."
|
||||
confirmLabel="Löschen"
|
||||
tone="danger"
|
||||
onConfirm={confirmDelete}
|
||||
onCancel={() => (pendingDeleteId = null)}
|
||||
/>
|
||||
|
||||
<!-- First-visit onboarding guide -->
|
||||
<OnboardingGuide />
|
||||
|
||||
Reference in New Issue
Block a user