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:
@@ -2,11 +2,14 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { uploadSheetOpen } from '$lib/ui-store';
|
||||
import { pendingFiles } from '$lib/pending-upload-store';
|
||||
import { scrollLock } from '$lib/actions/scroll-lock';
|
||||
import CameraCapture from '$lib/components/CameraCapture.svelte';
|
||||
import type { PendingFile } from '$lib/pending-upload-store';
|
||||
|
||||
let showCamera = $state(false);
|
||||
let fileInput: HTMLInputElement;
|
||||
let sheet = $state<HTMLDivElement | null>(null);
|
||||
let returnFocus: HTMLElement | null = null;
|
||||
|
||||
// Keep the sheet and backdrop always in the DOM for smooth CSS transitions.
|
||||
let open = $derived($uploadSheetOpen);
|
||||
@@ -15,6 +18,47 @@
|
||||
uploadSheetOpen.set(false);
|
||||
}
|
||||
|
||||
// Focus-trap + Escape, wired manually because the sheet stays mounted for its
|
||||
// translate-y animation (so use:focusTrap, which activates on mount, won't do).
|
||||
// Mirrors ContextSheet. Suspended while the camera overlay owns the screen.
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (showCamera) return;
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
close();
|
||||
return;
|
||||
}
|
||||
if (e.key !== 'Tab' || !sheet) return;
|
||||
const list = Array.from(sheet.querySelectorAll<HTMLElement>('button:not([disabled])'));
|
||||
if (list.length === 0) return;
|
||||
const first = list[0];
|
||||
const last = list[list.length - 1];
|
||||
const active = document.activeElement as HTMLElement | null;
|
||||
if (e.shiftKey && (active === first || !sheet.contains(active))) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
} else if (!e.shiftKey && active === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
returnFocus = (document.activeElement as HTMLElement | null) ?? null;
|
||||
requestAnimationFrame(() => {
|
||||
if (showCamera) return;
|
||||
const first = sheet?.querySelector<HTMLButtonElement>('button:not([disabled])');
|
||||
first?.focus({ preventScroll: true });
|
||||
});
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
return () => window.removeEventListener('keydown', onKeyDown);
|
||||
} else if (returnFocus) {
|
||||
try { returnFocus.focus({ preventScroll: true }); } catch { /* element gone */ }
|
||||
returnFocus = null;
|
||||
}
|
||||
});
|
||||
|
||||
function openGallery() {
|
||||
fileInput?.click();
|
||||
}
|
||||
@@ -68,22 +112,34 @@
|
||||
onchange={handleFiles}
|
||||
/>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
<!-- Lock body scroll only while open (sheet stays mounted for its animation). -->
|
||||
{#if open && !showCamera}
|
||||
<div use:scrollLock class="hidden"></div>
|
||||
{/if}
|
||||
|
||||
<!-- Backdrop — real <button> so keyboard / switch-control users get parity. -->
|
||||
<button
|
||||
type="button"
|
||||
class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300"
|
||||
class:opacity-0={!open}
|
||||
class:pointer-events-none={!open}
|
||||
class:opacity-100={open}
|
||||
onclick={close}
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
tabindex="-1"
|
||||
aria-label="Schließen"
|
||||
></button>
|
||||
|
||||
<!-- Sheet -->
|
||||
<div
|
||||
bind:this={sheet}
|
||||
class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300 dark:bg-gray-900"
|
||||
class:translate-y-full={!open}
|
||||
class:translate-y-0={open}
|
||||
style="padding-bottom: env(safe-area-inset-bottom)"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Hochladen"
|
||||
tabindex="-1"
|
||||
>
|
||||
<!-- Drag handle -->
|
||||
<div class="flex justify-center pt-3 pb-1">
|
||||
|
||||
Reference in New Issue
Block a user