feat(eventsnap): UX review batch-3 — feed virtualization, a11y/UX fixes, shared primitives
Frontend - Feed: DOM-windowing via @tanstack/svelte-virtual (new VirtualFeed). The window virtualizer keeps the sticky header, pull-to-refresh, infinite-scroll sentinel and bottom nav working. List = dynamic measured heights keyed by upload id + anchorTo:start so an SSE prepend doesn't jump a scrolled reader; grid = measured square rows. Drops the content-visibility band-aid and the old FeedGrid. measureElement(null) on row unmount prevents ResizeObserver retention; stable option callbacks + guarded setOptions avoid O(n) re-measure on like/comment patches. - Global: viewport-fit=cover (activates safe-area insets), lang=de, PWA manifest + maskable icon + apple-touch metas, prefers-reduced-motion, safe-area-top headers. - Feed reactivity: like/comment SSE patch the single card in place; upload-processed debounced in-place merge; IntersectionObserver leak fixed; shared 60s clock. - CLS: list cards reserve the skeleton aspect box. - Destructive actions (promote/demote/unban, gallery release) routed through ConfirmSheet (host + admin). - Export OOM: streamed download via single-use ticket instead of res.blob(). - Shared primitives: IconButton (44px hit area), scrollLock action; UploadSheet a11y. - Polish: api timeout + non-JSON guard, focus-trap offsetParent fix, pull-to-refresh passive:false + guards, diashow keyboard a11y, Toaster assertive errors, dark-mode gaps, aria-pressed on like/chip state, CameraCapture mic-on-video + retry, ConfirmSheet spinner, upload beforeunload warning, emoji->SVG icons. Backend - social.rs: like/comment SSE broadcasts now carry the fresh count so feed clients patch one card in place instead of refetching page 1. - admin.rs / main.rs: supporting changes for the above. Verified: svelte-check 0 errors, frontend build clean, /feed SSR 200. Runtime feed scroll-feel validation still owed (documented in FOLLOWUPS.md). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
fabi
@@ -6,11 +6,9 @@
|
||||
import { doubletap } from '$lib/actions/doubletap';
|
||||
import { avatarPalette, initials } from '$lib/avatar';
|
||||
import { vibrate } from '$lib/haptics';
|
||||
import { now } from '$lib/now';
|
||||
import HeartBurst from './HeartBurst.svelte';
|
||||
|
||||
// Single-tap debounce so a double-tap doesn't briefly open the lightbox.
|
||||
const SINGLE_TAP_DELAY_MS = 260;
|
||||
|
||||
interface Props {
|
||||
upload: FeedUpload;
|
||||
isOwn?: boolean;
|
||||
@@ -35,8 +33,8 @@
|
||||
|
||||
const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
|
||||
|
||||
function relativeTime(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime();
|
||||
function relativeTime(iso: string, nowMs: number): string {
|
||||
const diff = nowMs - new Date(iso).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 1) return 'gerade eben';
|
||||
if (mins < 60) return `vor ${mins} Min.`;
|
||||
@@ -46,44 +44,35 @@
|
||||
return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
|
||||
}
|
||||
|
||||
// Re-derives off the shared 60s clock so "vor 5 Min." actually advances.
|
||||
const relTime = $derived(relativeTime(upload.created_at, $now));
|
||||
|
||||
function openContext() {
|
||||
oncontextmenu?.(upload);
|
||||
}
|
||||
|
||||
// Inline heart-burst on double-tap (consistent with the lightbox).
|
||||
let heartBurst = $state(false);
|
||||
let singleTapTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function handleMediaClick() {
|
||||
// Delay single-tap so a quick second tap (double-tap-to-like) wins.
|
||||
if (singleTapTimer) clearTimeout(singleTapTimer);
|
||||
singleTapTimer = setTimeout(() => {
|
||||
singleTapTimer = null;
|
||||
onselect(upload);
|
||||
}, SINGLE_TAP_DELAY_MS);
|
||||
}
|
||||
let burstTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
function handleDoubleTap() {
|
||||
if (singleTapTimer) {
|
||||
clearTimeout(singleTapTimer);
|
||||
singleTapTimer = null;
|
||||
}
|
||||
heartBurst = true;
|
||||
vibrate(10);
|
||||
onlike(upload.id);
|
||||
setTimeout(() => (heartBurst = false), 700);
|
||||
if (burstTimer) clearTimeout(burstTimer);
|
||||
burstTimer = setTimeout(() => (heartBurst = false), 700);
|
||||
}
|
||||
|
||||
// A feed-delta SSE event can remove this card mid-pending-tap. Clear the timer
|
||||
// on unmount so we don't call onselect with a stale upload reference.
|
||||
// Clear the burst timer on unmount (a feed-delta SSE event can remove this
|
||||
// card mid-animation) so it can't fire against a stale component.
|
||||
onDestroy(() => {
|
||||
if (singleTapTimer) {
|
||||
clearTimeout(singleTapTimer);
|
||||
singleTapTimer = null;
|
||||
}
|
||||
if (burstTimer) clearTimeout(burstTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Off-screen cards are removed from the DOM entirely by the parent VirtualFeed
|
||||
window-virtualizer, so this card no longer needs content-visibility — and must
|
||||
not use it, since the virtualizer measures each card's real rendered height. -->
|
||||
<article
|
||||
class="bg-white dark:bg-gray-900"
|
||||
use:longpress={{ duration: 500 }}
|
||||
@@ -100,7 +89,7 @@
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{upload.uploader_name}</p>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500">{relativeTime(upload.created_at)}</p>
|
||||
<p class="text-xs text-gray-400 dark:text-gray-500">{relTime}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -120,9 +109,10 @@
|
||||
<!-- Media -->
|
||||
<button
|
||||
class="relative block w-full"
|
||||
onclick={handleMediaClick}
|
||||
use:doubletap
|
||||
onsingletap={() => onselect(upload)}
|
||||
ondoubletap={handleDoubleTap}
|
||||
onclick={(e) => { if (e.detail === 0) onselect(upload); }}
|
||||
aria-label="Bild vergrößern"
|
||||
>
|
||||
<HeartBurst active={heartBurst} />
|
||||
@@ -133,6 +123,8 @@
|
||||
src={upload.thumbnail_url ?? upload.preview_url ?? ''}
|
||||
alt=""
|
||||
class="h-full w-full object-cover opacity-80"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
{/if}
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
@@ -144,13 +136,18 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else if mediaSrc}
|
||||
<img
|
||||
src={mediaSrc}
|
||||
alt=""
|
||||
class="w-full object-cover"
|
||||
style="max-height: 80svh"
|
||||
loading="lazy"
|
||||
/>
|
||||
<!-- Reserve the same 4/5 box the skeleton uses so the card doesn't collapse
|
||||
to height 0 and reflow as images stream in. The uncropped original is one
|
||||
tap away in the lightbox. -->
|
||||
<div class="aspect-[4/5] w-full bg-gray-100 dark:bg-gray-800">
|
||||
<img
|
||||
src={mediaSrc}
|
||||
alt=""
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex aspect-square w-full items-center justify-center bg-gray-100 dark:bg-gray-800">
|
||||
<svg class="h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
@@ -164,6 +161,8 @@
|
||||
<div class="flex items-center gap-4 px-4 py-2">
|
||||
<button
|
||||
onclick={() => { vibrate(10); onlike(upload.id); }}
|
||||
aria-pressed={upload.liked_by_me}
|
||||
aria-label={upload.liked_by_me ? 'Gefällt mir nicht mehr' : 'Gefällt mir'}
|
||||
class="flex items-center gap-1.5 text-sm font-medium transition-colors
|
||||
{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 active:text-red-400 dark:text-gray-400 dark:hover:text-red-400 dark:active:text-red-400'}"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user