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
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { getToken } from '$lib/auth';
|
||||
import { browser } from '$app/environment';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(() => {
|
||||
@@ -12,3 +11,11 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Brief branded splash so the redirect doesn't flash a blank page. -->
|
||||
<div class="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400"></div>
|
||||
<p class="text-sm font-medium text-gray-400 dark:text-gray-500">EventSnap</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -127,9 +127,9 @@
|
||||
|
||||
function roleColor(r: string | null): string {
|
||||
switch (r) {
|
||||
case 'admin': return 'bg-red-100 text-red-700';
|
||||
case 'host': return 'bg-purple-100 text-purple-700';
|
||||
default: return 'bg-blue-100 text-blue-700';
|
||||
case 'admin': return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200';
|
||||
case 'host': return 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200';
|
||||
default: return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
|
||||
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
|
||||
<!-- Header -->
|
||||
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
|
||||
<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
|
||||
<div class="mx-auto flex max-w-lg items-center px-4 py-4">
|
||||
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Mein Konto</h1>
|
||||
</div>
|
||||
@@ -213,7 +213,7 @@
|
||||
<span class="font-mono text-4xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{$pin}</span>
|
||||
<button
|
||||
onclick={copyPin}
|
||||
class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
|
||||
class="inline-flex min-h-11 items-center rounded-md bg-amber-100 px-4 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
|
||||
>
|
||||
{pinCopied ? 'Kopiert!' : 'Kopieren'}
|
||||
</button>
|
||||
@@ -250,9 +250,9 @@
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 p-3" role="radiogroup" aria-label="Design">
|
||||
{#each [
|
||||
{ value: 'system', label: 'System', icon: '🖥️' },
|
||||
{ value: 'light', label: 'Hell', icon: '☀️' },
|
||||
{ value: 'dark', label: 'Dunkel', icon: '🌙' }
|
||||
{ value: 'system', label: 'System' },
|
||||
{ value: 'light', label: 'Hell' },
|
||||
{ value: 'dark', label: 'Dunkel' }
|
||||
] as opt (opt.value)}
|
||||
{@const selected = $themePreference === opt.value}
|
||||
<button
|
||||
@@ -265,7 +265,16 @@
|
||||
? 'border-blue-600 bg-blue-50 text-blue-700 dark:border-blue-500 dark:bg-blue-950/40 dark:text-blue-200'
|
||||
: 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700/50'}"
|
||||
>
|
||||
<span class="text-2xl leading-none">{opt.icon}</span>
|
||||
<!-- SVG icons render consistently everywhere (emoji show as tofu on some Android). -->
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
|
||||
{#if opt.value === 'system'}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z" />
|
||||
{:else if opt.value === 'light'}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
|
||||
{:else}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
|
||||
{/if}
|
||||
</svg>
|
||||
<span class="font-medium">{opt.label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
import { toast, toastError } from '$lib/toast-store';
|
||||
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import IconButton from '$lib/components/IconButton.svelte';
|
||||
|
||||
interface StatsDto {
|
||||
user_count: number;
|
||||
@@ -136,6 +137,24 @@
|
||||
|
||||
const myRole = getRole();
|
||||
|
||||
// Generic confirm-then-run for irreversible / privilege-changing actions
|
||||
// (promote, demote, unban, release gallery). Reuses the shared ConfirmSheet.
|
||||
interface PendingConfirm {
|
||||
title: string;
|
||||
message: string;
|
||||
confirmLabel: string;
|
||||
tone: 'default' | 'danger';
|
||||
run: () => Promise<void>;
|
||||
}
|
||||
let confirmAction = $state<PendingConfirm | null>(null);
|
||||
|
||||
async function runConfirmAction() {
|
||||
const action = confirmAction;
|
||||
if (!action) return;
|
||||
await action.run();
|
||||
confirmAction = null;
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
const token = getToken();
|
||||
const role = getRole();
|
||||
@@ -173,7 +192,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Keys rendered as number inputs — used to reject empty/invalid numeric saves.
|
||||
const NUMBER_KEYS = new Set(
|
||||
CONFIG_GROUPS.flatMap((g) => g.fields.filter((f) => f.kind === 'number').map((f) => f.key))
|
||||
);
|
||||
|
||||
async function saveConfig() {
|
||||
// Don't let a cleared number field persist as an empty/NaN config value.
|
||||
for (const key of NUMBER_KEYS) {
|
||||
const v = configDraft[key];
|
||||
if (v !== undefined && v !== config[key] && (String(v).trim() === '' || !Number.isFinite(Number(v)))) {
|
||||
toastError(new Error('Bitte gib für alle Zahlenfelder einen gültigen Wert ein.'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
saving = true;
|
||||
try {
|
||||
const changes: Record<string, string> = {};
|
||||
@@ -323,6 +355,17 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Confirmation for irreversible / privilege-changing actions (promote/demote/unban/release). -->
|
||||
<ConfirmSheet
|
||||
open={confirmAction !== null}
|
||||
title={confirmAction?.title ?? ''}
|
||||
message={confirmAction?.message ?? ''}
|
||||
confirmLabel={confirmAction?.confirmLabel ?? 'Bestätigen'}
|
||||
tone={confirmAction?.tone ?? 'default'}
|
||||
onConfirm={runConfirmAction}
|
||||
onCancel={() => (confirmAction = null)}
|
||||
/>
|
||||
|
||||
<!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
|
||||
<ConfirmSheet
|
||||
open={pinResetTarget !== null}
|
||||
@@ -380,17 +423,13 @@
|
||||
|
||||
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
|
||||
<!-- Header -->
|
||||
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
|
||||
<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
|
||||
<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
|
||||
<button
|
||||
onclick={() => goto('/account')}
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
|
||||
aria-label="Zurück"
|
||||
>
|
||||
<IconButton label="Zurück" onclick={() => goto('/account')} class="shrink-0">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</button>
|
||||
</IconButton>
|
||||
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Admin-Dashboard</h1>
|
||||
</div>
|
||||
</div>
|
||||
@@ -414,7 +453,7 @@
|
||||
{#if loading}
|
||||
<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
|
||||
{:else if error}
|
||||
<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
|
||||
<div role="alert" class="rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-950/40 dark:text-red-300">{error}</div>
|
||||
{:else}
|
||||
|
||||
<!-- ── Stats tab ────────────────────────────────────────────────── -->
|
||||
@@ -500,6 +539,8 @@
|
||||
id={field.key}
|
||||
type="number"
|
||||
step="any"
|
||||
min="0"
|
||||
inputmode="decimal"
|
||||
bind:value={configDraft[field.key]}
|
||||
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
@@ -532,7 +573,13 @@
|
||||
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
|
||||
<h3 class="mb-3 font-semibold text-gray-900 dark:text-gray-100">Galerie</h3>
|
||||
<button
|
||||
onclick={releaseGallery}
|
||||
onclick={() => (confirmAction = {
|
||||
title: 'Galerie freigeben?',
|
||||
message: 'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
|
||||
confirmLabel: 'Freigeben',
|
||||
tone: 'danger',
|
||||
run: releaseGallery
|
||||
})}
|
||||
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
|
||||
>
|
||||
Galerie freigeben
|
||||
@@ -625,17 +672,35 @@
|
||||
<div class="flex shrink-0 flex-wrap justify-end gap-1.5">
|
||||
{#if user.role !== 'admin'}
|
||||
{#if user.is_banned}
|
||||
<button onclick={() => unban(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
|
||||
<button onclick={() => (confirmAction = {
|
||||
title: 'Sperre aufheben?',
|
||||
message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
|
||||
confirmLabel: 'Entsperren',
|
||||
tone: 'default',
|
||||
run: () => unban(user)
|
||||
})} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
|
||||
Entsperren
|
||||
</button>
|
||||
{:else}
|
||||
{#if user.role === 'guest'}
|
||||
<button onclick={() => promoteToHost(user)} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60">
|
||||
<button onclick={() => (confirmAction = {
|
||||
title: 'Zum Host befördern?',
|
||||
message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
|
||||
confirmLabel: 'Befördern',
|
||||
tone: 'default',
|
||||
run: () => promoteToHost(user)
|
||||
})} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60">
|
||||
Host
|
||||
</button>
|
||||
{/if}
|
||||
{#if user.role === 'host'}
|
||||
<button onclick={() => demoteToGuest(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
|
||||
<button onclick={() => (confirmAction = {
|
||||
title: 'Zum Gast degradieren?',
|
||||
message: `${user.display_name} verliert alle Host-Rechte.`,
|
||||
confirmLabel: 'Degradieren',
|
||||
tone: 'danger',
|
||||
run: () => demoteToGuest(user)
|
||||
})} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
|
||||
Degradieren
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@@ -98,6 +98,14 @@
|
||||
overlayHideTimer = setTimeout(() => (showOverlay = false), 4000);
|
||||
}
|
||||
|
||||
// Manual toggle from the always-visible control button — stays open (no
|
||||
// auto-hide) so keyboard users can tab through the controls without them
|
||||
// vanishing mid-interaction.
|
||||
function toggleOverlay() {
|
||||
if (overlayHideTimer) clearTimeout(overlayHideTimer);
|
||||
showOverlay = !showOverlay;
|
||||
}
|
||||
|
||||
function togglePause() {
|
||||
paused = !paused;
|
||||
if (paused) {
|
||||
@@ -166,19 +174,52 @@
|
||||
<div class="text-white/60">Lade…</div>
|
||||
{/if}
|
||||
|
||||
<!-- Always-visible controls: keyboard-reachable, so the show is never a trap and
|
||||
the controls are reachable without a pointer. Honours the notch. -->
|
||||
<div
|
||||
class="absolute right-0 top-0 z-10 flex gap-2 p-3"
|
||||
style="padding-top: calc(env(safe-area-inset-top) + 0.75rem)"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => { e.stopPropagation(); toggleOverlay(); }}
|
||||
aria-label="Steuerung anzeigen"
|
||||
aria-expanded={showOverlay}
|
||||
class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={(e) => { e.stopPropagation(); exit(); }}
|
||||
aria-label="Diashow beenden"
|
||||
class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if showOverlay}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="absolute inset-x-0 bottom-0 flex flex-col gap-3 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-6 pb-10"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={togglePause}
|
||||
class="rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
|
||||
class="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
|
||||
>
|
||||
{paused ? '▶ Fortsetzen' : '⏸ Pause'}
|
||||
{#if paused}
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
|
||||
Fortsetzen
|
||||
{:else}
|
||||
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg>
|
||||
Pause
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<label class="flex items-center gap-2 rounded-full bg-white/10 px-3 py-2 text-sm">
|
||||
@@ -206,9 +247,10 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={exit}
|
||||
class="ml-auto rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
|
||||
class="ml-auto inline-flex items-center gap-1.5 rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
|
||||
>
|
||||
✕ Beenden
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
|
||||
Beenden
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
|
||||
import { toastError } from '$lib/toast-store';
|
||||
import { focusTrap } from '$lib/actions/focus-trap';
|
||||
import IconButton from '$lib/components/IconButton.svelte';
|
||||
|
||||
interface JobStatus {
|
||||
status: 'locked' | 'pending' | 'running' | 'done' | 'failed';
|
||||
@@ -75,35 +76,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadFile(endpoint: string, filename: string) {
|
||||
// Stream the (potentially multi-GB) archive straight to disk via a top-level
|
||||
// download navigation instead of fetch()+blob() — buffering the whole ZIP in
|
||||
// memory crashes mobile Safari/Chrome. The navigation can't send the Bearer
|
||||
// header, so we first exchange the token for a single-use ticket and pass it
|
||||
// as a query param; the server responds with Content-Disposition: attachment,
|
||||
// so the browser downloads it and we stay on the page.
|
||||
async function downloadFile(endpoint: string) {
|
||||
try {
|
||||
const token = getToken();
|
||||
const res = await fetch(endpoint, {
|
||||
headers: token ? { Authorization: `Bearer ${token}` } : {}
|
||||
});
|
||||
if (!res.ok) {
|
||||
toastError(new Error(`Download fehlgeschlagen (${res.status}).`));
|
||||
return;
|
||||
}
|
||||
const blob = await res.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const { ticket } = await api.post<{ ticket: string }>('/export/ticket');
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.href = `${endpoint}?ticket=${encodeURIComponent(ticket)}`;
|
||||
a.rel = 'noopener';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
a.remove();
|
||||
} catch (e) {
|
||||
toastError(e);
|
||||
}
|
||||
}
|
||||
|
||||
function downloadZip() {
|
||||
downloadFile('/api/v1/export/zip', 'Gallery.zip');
|
||||
downloadFile('/api/v1/export/zip');
|
||||
}
|
||||
|
||||
function downloadHtml() {
|
||||
if (localStorage.getItem(HTML_GUIDE_KEY)) {
|
||||
downloadFile('/api/v1/export/html', 'Memories.zip');
|
||||
downloadFile('/api/v1/export/html');
|
||||
} else {
|
||||
showHtmlGuide = true;
|
||||
}
|
||||
@@ -112,7 +111,7 @@
|
||||
function confirmHtmlDownload() {
|
||||
localStorage.setItem(HTML_GUIDE_KEY, '1');
|
||||
showHtmlGuide = false;
|
||||
downloadFile('/api/v1/export/html', 'Memories.zip');
|
||||
downloadFile('/api/v1/export/html');
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -154,19 +153,13 @@
|
||||
{/if}
|
||||
|
||||
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
|
||||
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
|
||||
<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
|
||||
<div class="mx-auto flex max-w-lg items-center gap-2 px-4 py-4">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => goto('/feed')}
|
||||
data-testid="export-back"
|
||||
class="-ml-2 flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700"
|
||||
aria-label="Zurück"
|
||||
>
|
||||
<IconButton label="Zurück" onclick={() => goto('/feed')} data-testid="export-back" class="-ml-2">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</IconButton>
|
||||
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Export</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,8 +4,7 @@
|
||||
import { api } from '$lib/api';
|
||||
import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import FeedGrid from '$lib/components/FeedGrid.svelte';
|
||||
import FeedListCard from '$lib/components/FeedListCard.svelte';
|
||||
import VirtualFeed from '$lib/components/VirtualFeed.svelte';
|
||||
import HashtagChips from '$lib/components/HashtagChips.svelte';
|
||||
import LightboxModal from '$lib/components/LightboxModal.svelte';
|
||||
import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
|
||||
@@ -28,6 +27,8 @@
|
||||
let pullProgress = $state(0); // 0–1+ during the drag, 0 when idle
|
||||
let selectedUpload = $state<FeedUpload | null>(null);
|
||||
let sentinel: HTMLDivElement;
|
||||
let feedObserver: IntersectionObserver | null = null;
|
||||
let inPlaceRefreshTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let pendingDeleteId = $state<string | null>(null);
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────
|
||||
@@ -190,7 +191,10 @@
|
||||
uploads = [upload, ...uploads];
|
||||
} catch { /* ignore */ }
|
||||
}),
|
||||
onSseEvent('upload-processed', () => loadFeed(true)),
|
||||
// A processed upload gains preview/thumbnail URLs. Coalesce bursts (bulk
|
||||
// uploads fire one per file) into a single in-place merge so the feed
|
||||
// neither hammers the server nor collapses to page 1 / loses scroll.
|
||||
onSseEvent('upload-processed', () => scheduleInPlaceRefresh()),
|
||||
onSseEvent('upload-deleted', (data) => {
|
||||
try {
|
||||
const payload = JSON.parse(data) as { upload_id: string };
|
||||
@@ -198,8 +202,11 @@
|
||||
if (selectedUpload?.id === payload.upload_id) selectedUpload = null;
|
||||
} catch { /* ignore */ }
|
||||
}),
|
||||
onSseEvent('like-update', () => loadFeed(true)),
|
||||
onSseEvent('new-comment', () => loadFeed(true)),
|
||||
// Patch the single affected card in place from the SSE payload instead of
|
||||
// refetching page 1 — a busy event fires these constantly and a full reload
|
||||
// would yank every scrolled-down user back to the top on each reaction.
|
||||
onSseEvent('like-update', (data) => patchCount(data, 'like_count')),
|
||||
onSseEvent('new-comment', (data) => patchCount(data, 'comment_count')),
|
||||
// Synthetic event from the SSE client after a foreground reconnect — merge
|
||||
// any uploads + deletions we missed while the tab was hidden.
|
||||
onSseEvent('feed-delta', (data) => {
|
||||
@@ -219,21 +226,68 @@
|
||||
);
|
||||
|
||||
if (sentinel) {
|
||||
const observer = new IntersectionObserver(
|
||||
feedObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && nextCursor && !loadingMore) loadMore();
|
||||
},
|
||||
{ rootMargin: '200px' }
|
||||
);
|
||||
observer.observe(sentinel);
|
||||
feedObserver.observe(sentinel);
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
disconnectSse();
|
||||
for (const unsub of unsubscribers) unsub();
|
||||
feedObserver?.disconnect();
|
||||
if (inPlaceRefreshTimer) clearTimeout(inPlaceRefreshTimer);
|
||||
});
|
||||
|
||||
// Patch a single upload's like/comment count from an SSE payload without
|
||||
// disturbing scroll position or the rest of the loaded feed.
|
||||
function patchCount(data: string, field: 'like_count' | 'comment_count') {
|
||||
try {
|
||||
const payload = JSON.parse(data) as {
|
||||
upload_id: string;
|
||||
like_count?: number;
|
||||
comment_count?: number;
|
||||
};
|
||||
const value = payload[field];
|
||||
if (value === undefined) return;
|
||||
uploads = uploads.map((u) => (u.id === payload.upload_id ? { ...u, [field]: value } : u));
|
||||
if (selectedUpload?.id === payload.upload_id) {
|
||||
selectedUpload = { ...selectedUpload, [field]: value };
|
||||
}
|
||||
} catch { /* ignore malformed payloads */ }
|
||||
}
|
||||
|
||||
// Debounced page-1 fetch that *merges* (updates existing cards in place, prepends
|
||||
// genuinely new ones) rather than replacing the array — preserves scroll and any
|
||||
// pages already loaded below the fold.
|
||||
function scheduleInPlaceRefresh() {
|
||||
if (inPlaceRefreshTimer) return;
|
||||
inPlaceRefreshTimer = setTimeout(() => {
|
||||
inPlaceRefreshTimer = null;
|
||||
void refreshFeedInPlace();
|
||||
}, 800);
|
||||
}
|
||||
|
||||
async function refreshFeedInPlace() {
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (selectedHashtag) params.set('hashtag', selectedHashtag);
|
||||
params.set('limit', '20');
|
||||
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
||||
const byId = new Map(res.uploads.map((u) => [u.id, u]));
|
||||
const known = new Set(uploads.map((u) => u.id));
|
||||
uploads = uploads.map((u) => byId.get(u.id) ?? u);
|
||||
const fresh = res.uploads.filter((u) => !known.has(u.id));
|
||||
if (fresh.length) uploads = [...fresh, ...uploads];
|
||||
} catch {
|
||||
// Background refresh — stay quiet, the next event or pull-to-refresh retries.
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFeed(refresh = false) {
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
@@ -359,7 +413,7 @@
|
||||
<!-- 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="pointer-events-none fixed left-0 right-0 top-[calc(env(safe-area-inset-top)+0.5rem)] 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)}"
|
||||
@@ -386,7 +440,7 @@
|
||||
</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="sticky top-0 z-30 border-b border-gray-200 bg-white/95 pt-[env(safe-area-inset-top)] 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>
|
||||
|
||||
@@ -538,35 +592,38 @@
|
||||
<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Tippe auf den Plus-Button unten!</p>
|
||||
</div>
|
||||
{:else if viewMode === 'list'}
|
||||
<!-- List view: chronological full-width cards -->
|
||||
<!-- List view: chronological full-width cards (DOM-windowed) -->
|
||||
<div class="mx-auto max-w-2xl">
|
||||
{#each uploads as upload (upload.id)}
|
||||
<FeedListCard
|
||||
{upload}
|
||||
isOwn={upload.user_id === myUserId}
|
||||
onlike={handleLike}
|
||||
oncomment={openComments}
|
||||
onselect={(u) => (selectedUpload = u)}
|
||||
oncontextmenu={openContextSheet}
|
||||
/>
|
||||
{/each}
|
||||
<VirtualFeed
|
||||
mode="list"
|
||||
uploads={uploads}
|
||||
{myUserId}
|
||||
onlike={handleLike}
|
||||
oncomment={openComments}
|
||||
onselect={(u) => (selectedUpload = u)}
|
||||
oncontextmenu={openContextSheet}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Grid view: 3-col, filters applied -->
|
||||
<!-- Grid view: 3-col, filters applied (DOM-windowed by row) -->
|
||||
<div class="mx-auto max-w-2xl">
|
||||
{#if displayUploads.length === 0}
|
||||
<div class="py-16 text-center">
|
||||
<p class="text-sm text-gray-400 dark:text-gray-500">Keine Treffer für die gewählten Filter.</p>
|
||||
{#if nextCursor}
|
||||
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Es sind noch nicht alle Beiträge geladen — scrolle weiter, um mehr zu durchsuchen.</p>
|
||||
{/if}
|
||||
<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline dark:text-blue-400">Filter zurücksetzen</button>
|
||||
</div>
|
||||
{:else}
|
||||
<FeedGrid
|
||||
<VirtualFeed
|
||||
mode="grid"
|
||||
uploads={displayUploads}
|
||||
{myUserId}
|
||||
onlike={handleLike}
|
||||
oncomment={openComments}
|
||||
onselect={(u) => (selectedUpload = u)}
|
||||
oncontextmenu={openContextSheet}
|
||||
threeCol={true}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
import { toast, toastError } from '$lib/toast-store';
|
||||
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
|
||||
import Modal from '$lib/components/Modal.svelte';
|
||||
import IconButton from '$lib/components/IconButton.svelte';
|
||||
|
||||
interface UserSummary {
|
||||
id: string;
|
||||
@@ -56,6 +57,25 @@
|
||||
|
||||
const myRole = getRole();
|
||||
|
||||
// Generic confirm-then-run for the irreversible / privilege-changing actions
|
||||
// (promote, demote, unban, release gallery) that previously fired on one tap.
|
||||
// Reuses the shared ConfirmSheet; the wrapped fns keep their own toast/reload.
|
||||
interface PendingConfirm {
|
||||
title: string;
|
||||
message: string;
|
||||
confirmLabel: string;
|
||||
tone: 'default' | 'danger';
|
||||
run: () => Promise<void>;
|
||||
}
|
||||
let confirmAction = $state<PendingConfirm | null>(null);
|
||||
|
||||
async function runConfirmAction() {
|
||||
const action = confirmAction;
|
||||
if (!action) return;
|
||||
await action.run();
|
||||
confirmAction = null;
|
||||
}
|
||||
|
||||
/** Mirrors backend `handlers::host::reset_user_pin` authorisation rules. */
|
||||
function canResetPinFor(target: UserSummary): boolean {
|
||||
if (target.role === 'admin') return false;
|
||||
@@ -196,6 +216,17 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Confirmation for irreversible / privilege-changing actions (promote/demote/unban/release). -->
|
||||
<ConfirmSheet
|
||||
open={confirmAction !== null}
|
||||
title={confirmAction?.title ?? ''}
|
||||
message={confirmAction?.message ?? ''}
|
||||
confirmLabel={confirmAction?.confirmLabel ?? 'Bestätigen'}
|
||||
tone={confirmAction?.tone ?? 'default'}
|
||||
onConfirm={runConfirmAction}
|
||||
onCancel={() => (confirmAction = null)}
|
||||
/>
|
||||
|
||||
<!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
|
||||
<ConfirmSheet
|
||||
open={pinResetTarget !== null}
|
||||
@@ -266,17 +297,13 @@
|
||||
|
||||
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
|
||||
<!-- Header -->
|
||||
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
|
||||
<div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
|
||||
<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
|
||||
<button
|
||||
onclick={() => goto('/account')}
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
|
||||
aria-label="Zurück"
|
||||
>
|
||||
<IconButton label="Zurück" onclick={() => goto('/account')} class="shrink-0">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</button>
|
||||
</IconButton>
|
||||
<div class="min-w-0">
|
||||
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Host-Dashboard</h1>
|
||||
{#if event}
|
||||
@@ -297,6 +324,7 @@
|
||||
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
|
||||
<button
|
||||
onclick={() => (statsOpen = !statsOpen)}
|
||||
aria-expanded={statsOpen}
|
||||
class="flex w-full items-center justify-between px-5 py-4"
|
||||
>
|
||||
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Statistiken</h2>
|
||||
@@ -337,6 +365,7 @@
|
||||
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
|
||||
<button
|
||||
onclick={() => (settingsOpen = !settingsOpen)}
|
||||
aria-expanded={settingsOpen}
|
||||
class="flex w-full items-center justify-between px-5 py-4"
|
||||
>
|
||||
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Event-Einstellungen</h2>
|
||||
@@ -357,7 +386,13 @@
|
||||
{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
|
||||
</button>
|
||||
<button
|
||||
onclick={releaseGallery}
|
||||
onclick={() => (confirmAction = {
|
||||
title: 'Galerie freigeben?',
|
||||
message: 'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
|
||||
confirmLabel: 'Freigeben',
|
||||
tone: 'danger',
|
||||
run: releaseGallery
|
||||
})}
|
||||
disabled={event.export_released}
|
||||
class="rounded-lg px-4 py-2 text-sm font-medium transition
|
||||
{event.export_released ? 'cursor-default bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500' : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400'}"
|
||||
@@ -372,6 +407,7 @@
|
||||
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
|
||||
<button
|
||||
onclick={() => (usersOpen = !usersOpen)}
|
||||
aria-expanded={usersOpen}
|
||||
class="flex w-full items-center justify-between px-5 py-4"
|
||||
>
|
||||
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Nutzerverwaltung</h2>
|
||||
@@ -424,7 +460,13 @@
|
||||
{#if user.role !== 'admin'}
|
||||
{#if user.is_banned}
|
||||
<button
|
||||
onclick={() => unban(user)}
|
||||
onclick={() => (confirmAction = {
|
||||
title: 'Sperre aufheben?',
|
||||
message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
|
||||
confirmLabel: 'Entsperren',
|
||||
tone: 'default',
|
||||
run: () => unban(user)
|
||||
})}
|
||||
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
|
||||
>
|
||||
Entsperren
|
||||
@@ -432,7 +474,13 @@
|
||||
{:else}
|
||||
{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
|
||||
<button
|
||||
onclick={() => promoteToHost(user)}
|
||||
onclick={() => (confirmAction = {
|
||||
title: 'Zum Host befördern?',
|
||||
message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
|
||||
confirmLabel: 'Befördern',
|
||||
tone: 'default',
|
||||
run: () => promoteToHost(user)
|
||||
})}
|
||||
class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60"
|
||||
>
|
||||
Host
|
||||
@@ -441,7 +489,13 @@
|
||||
{#if user.role === 'host'}
|
||||
<!-- Hosts may demote other Hosts (never themselves); backend enforces. -->
|
||||
<button
|
||||
onclick={() => demoteToGuest(user)}
|
||||
onclick={() => (confirmAction = {
|
||||
title: 'Zum Gast degradieren?',
|
||||
message: `${user.display_name} verliert alle Host-Rechte.`,
|
||||
confirmLabel: 'Degradieren',
|
||||
tone: 'danger',
|
||||
run: () => demoteToGuest(user)
|
||||
})}
|
||||
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
|
||||
>
|
||||
Degradieren
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { api, ApiError } from '$lib/api';
|
||||
import { setAuth, getPin, getToken } from '$lib/auth';
|
||||
import { browser } from '$app/environment';
|
||||
import IconButton from '$lib/components/IconButton.svelte';
|
||||
|
||||
function goBack() {
|
||||
// Prefer the actual previous page (most users land here from /join or /account).
|
||||
@@ -67,19 +68,13 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-screen flex-col bg-gray-50 px-4 dark:bg-gray-950">
|
||||
<div class="flex min-h-screen flex-col bg-gray-50 px-4 pt-[env(safe-area-inset-top)] dark:bg-gray-950">
|
||||
<div class="-mx-4 flex items-center px-2 py-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick={goBack}
|
||||
data-testid="recover-back"
|
||||
class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700"
|
||||
aria-label="Zurück"
|
||||
>
|
||||
<IconButton label="Zurück" onclick={goBack} data-testid="recover-back">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="m-auto w-full max-w-sm">
|
||||
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { quotaStore, refreshQuota } from '$lib/quota-store';
|
||||
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
|
||||
import IconButton from '$lib/components/IconButton.svelte';
|
||||
import { vibrate } from '$lib/haptics';
|
||||
import type { PendingFile } from '$lib/pending-upload-store';
|
||||
|
||||
@@ -47,9 +48,14 @@
|
||||
// Auto-focus caption textarea after a short delay (let layout settle)
|
||||
setTimeout(() => captionEl?.focus(), 80);
|
||||
|
||||
// Revoke blob URLs if user abandons the upload page
|
||||
const handleBeforeUnload = () => {
|
||||
clearPending();
|
||||
// Warn before a hard browser navigation (close / reload / external link) drops
|
||||
// staged files or an unsent caption. In-app navigation is already guarded by
|
||||
// the discard ConfirmSheet in cancel().
|
||||
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
|
||||
if (stagedFiles.length > 0 || caption.trim().length > 0) {
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
}
|
||||
};
|
||||
window.addEventListener('beforeunload', handleBeforeUnload);
|
||||
|
||||
@@ -60,6 +66,9 @@
|
||||
|
||||
onDestroy(() => {
|
||||
showBottomNav.set(true);
|
||||
// Revoke any staged preview blob URLs on leave so they don't leak. The queue
|
||||
// holds the underlying File objects, so this is safe after submit too.
|
||||
for (const sf of stagedFiles) URL.revokeObjectURL(sf.previewUrl);
|
||||
});
|
||||
|
||||
function removeFile(idx: number) {
|
||||
@@ -118,16 +127,12 @@
|
||||
<!-- Full-screen composer — bottom nav is suppressed -->
|
||||
<div class="flex min-h-screen flex-col bg-white dark:bg-gray-950">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800">
|
||||
<button
|
||||
onclick={cancel}
|
||||
class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
|
||||
aria-label="Abbrechen"
|
||||
>
|
||||
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 pt-[calc(env(safe-area-inset-top)+0.75rem)] dark:border-gray-800">
|
||||
<IconButton label="Abbrechen" onclick={cancel}>
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</IconButton>
|
||||
<h1 class="text-base font-semibold text-gray-900 dark:text-gray-100">Neuer Beitrag</h1>
|
||||
<!-- Submit button in header for desktop convenience -->
|
||||
<button
|
||||
@@ -158,10 +163,10 @@
|
||||
{/if}
|
||||
<button
|
||||
onclick={() => removeFile(i)}
|
||||
class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white"
|
||||
class="absolute right-1 top-1 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white"
|
||||
aria-label="Entfernen"
|
||||
>
|
||||
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user