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

feat(ui): v0.16 features + dark mode across every page

Browse Source 
Wires up everything from the previous commits into actual UI surfaces, and
applies Tailwind dark: variants throughout. All pages now support the
'system' / 'light' / 'dark' preference set in the onboarding step or in
Mein Konto → Design.

Layout & nav:
- routes/+layout.svelte: initTheme(), global pin-reset SSE handler that
  filters by user_id and calls clearPin(), one-shot /me/context fetch
  on boot to hydrate privacyNote + quota.
- components/BottomNav.svelte: dark variants on the frosted-glass bar.
- components/UploadSheet.svelte: dark variants on backdrop, sheet,
  source buttons.
- components/OnboardingGuide.svelte: new "Helles oder dunkles Design?"
  step (3-option custom-radio grid), reactive currentStep with proper
  type narrowing, dark variants throughout. Privacy-note nudge appears
  on the PIN step only when one is configured.

Feed:
- routes/feed/+page.svelte: diashow entry icon (tablet/desktop only),
  long-press → ContextSheet (Löschen for own posts, Original anzeigen
  for all), upload-deleted + feed-delta SSE handlers, dark variants on
  header, search, autocomplete, filter chips, empty states.
- components/FeedListCard.svelte: long-press wireup, double-tap-to-like,
  data-mode-aware mediaSrc via pickMediaUrl, kebab fallback for desktop,
  isOwn prop, dark variants.
- components/FeedGrid.svelte: long-press wireup, dark variants.
- components/LightboxModal.svelte: data-mode-aware src, double-tap heart
  burst, dark variants on card / comments / input.
- components/HashtagChips.svelte: dark variants.

Account:
- routes/account/+page.svelte: theme picker (3-button radio grid), data
  mode picker (with confirm sheet for Original), live quota widget,
  preformatted Datenschutzhinweis block, diashow tile (mobile only),
  pin now sourced from the $currentPin store so a global pin-reset
  clears it live, clearQueue() on explicit logout, dark variants
  across every card + both bottom sheets.

Upload:
- routes/upload/+page.svelte: per-user quota progress bar above the
  submit button, dark variants.

Host & Admin:
- routes/host/+page.svelte: PIN-reset confirm + one-time PIN modal,
  hosts may demote other hosts, canResetPinFor() helper, dark variants
  on all cards, modals, stats, toast.
- routes/admin/+page.svelte: Config form rebuilt as CONFIG_GROUPS with
  per-field kind (number / bool / text), renders toggles for the
  rate-limit + quota switches and a textarea for the privacy_note;
  Nutzer tab gains PIN reset + hosts-may-demote-hosts wiring; same
  one-time PIN modal; dark variants everywhere.
- routes/admin/login/+page.svelte: dark variants.

Join / Recover / Export:
- routes/join/+page.svelte: rename inline link to
  "Ich habe bereits einen Account", dark variants.
- routes/recover/+page.svelte: dark variants.
- routes/export/+page.svelte: dark variants on status cards + HTML
  guide modal.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-05-16 14:33:30 +02:00
parent 8a769b52bf
commit e619a3bd64
17 changed files with 1295 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
frontend/src/routes/account/+page.svelte
View File

@@ -1,36 +1,105 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { getToken, getPin, getDisplayName, getExpiry, getRole, clearAuth } from '$lib/auth';
import { getToken, getDisplayName, getExpiry, getRole, clearAuth, currentPin } from '$lib/auth';
import { clearQueue } from '$lib/upload-queue';
import { api } from '$lib/api';
import { onMount } from 'svelte';
import { onMount, onDestroy } from 'svelte';
import { dataMode } from '$lib/data-mode-store';
import { themePreference, type ThemePreference } from '$lib/theme-store';
import { privacyNote } from '$lib/privacy-note-store';
import { quotaStore, refreshQuota } from '$lib/quota-store';
import { onSseEvent } from '$lib/sse';
import type { MeContextDto } from '$lib/types';
let pin = $state<string | null>(null);
let displayName = $state<string | null>(null);
let role = $state<'guest' | 'host' | 'admin' | null>(null);
let expiry = $state<Date | null>(null);
let pinCopied = $state(false);
let leaveConfirmOpen = $state(false);
let dataModeWarningOpen = $state(false);
onMount(() => {
// `pin` is sourced from the shared `currentPin` store so a global pin-reset SSE
// event (handled in the layout) clears the display live without a reload.
const pin = currentPin;
const unsubs: Array<() => void> = [];
onMount(async () => {
if (!getToken()) {
goto('/join');
return;
}
pin = getPin();
displayName = getDisplayName();
role = getRole();
expiry = getExpiry();
// Refresh server-driven state. Quota + privacy note may have changed since last visit.
try {
const ctx = await api.get<MeContextDto>('/me/context');
privacyNote.set(ctx.privacy_note);
} catch {
// non-fatal
}
void refreshQuota();
// If admin edits the privacy note while we're sitting on the page, pick it up.
unsubs.push(
onSseEvent('event-updated', async () => {
try {
const ctx = await api.get<MeContextDto>('/me/context');
privacyNote.set(ctx.privacy_note);
} catch {
// ignore
}
})
// Note: `pin-reset` is handled globally in the root layout.
);
});
onDestroy(() => {
for (const u of unsubs) u();
});
function chooseDataMode(mode: 'saver' | 'original') {
if (mode === 'original' && $dataMode !== 'original') {
dataModeWarningOpen = true;
return;
}
dataMode.set(mode);
}
function confirmOriginalMode() {
dataMode.set('original');
dataModeWarningOpen = false;
}
function formatBytes(bytes: number | null | undefined): string {
if (bytes == null || bytes <= 0) return '0 MB';
const mb = bytes / (1024 * 1024);
if (mb < 1024) return `${mb.toFixed(mb < 10 ? 1 : 0)} MB`;
return `${(mb / 1024).toFixed(1)} GB`;
}
const quotaPercent = $derived(
$quotaStore.limit_bytes && $quotaStore.limit_bytes > 0
? Math.min(100, ($quotaStore.used_bytes / $quotaStore.limit_bytes) * 100)
: 0
);
function copyPin() {
if (!pin) return;
navigator.clipboard.writeText(pin);
const value = $pin;
if (!value) return;
navigator.clipboard.writeText(value);
pinCopied = true;
setTimeout(() => (pinCopied = false), 2000);
}
async function handleLogout() {
try { await api.delete('/session'); } catch { /* ignore */ }
// Wipe the IndexedDB upload queue so a second guest using the same device can't
// inherit (or be blamed for) this guest's pending uploads. Not done on a 401
// auto-clear — that path preserves the queue in case the user re-authenticates.
try { await clearQueue(); } catch { /* ignore */ }
clearAuth();
goto('/join');
}
@@ -64,17 +133,17 @@
}
</script>
<div class="min-h-screen bg-gray-50 pb-24">
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<!-- Header -->
<div class="border-b border-gray-200 bg-white">
<div class="border-b border-gray-200 bg-white 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">Mein Konto</h1>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Mein Konto</h1>
</div>
</div>
<div class="mx-auto max-w-lg space-y-3 p-4">
<!-- Profile card -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<div class="flex items-center gap-4">
<div
class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
@@ -83,47 +152,47 @@
{displayName ? displayName[0].toUpperCase() : '?'}
</div>
<div class="min-w-0">
<p class="truncate text-lg font-bold text-gray-900">{displayName ?? 'Unbekannt'}</p>
<p class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">{displayName ?? 'Unbekannt'}</p>
<span class="mt-0.5 inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold {roleColor(role)}">
{roleLabel(role)}
</span>
</div>
</div>
{#if expiry}
<p class="mt-3 text-xs text-gray-400">Sitzung gültig bis {formatDate(expiry)}</p>
<p class="mt-3 text-xs text-gray-400 dark:text-gray-500">Sitzung gültig bis {formatDate(expiry)}</p>
{/if}
</div>
<!-- Dashboards section (host + admin only) -->
{#if role === 'host' || role === 'admin'}
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="border-b border-gray-100 px-5 py-3">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Dashboards</h2>
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Dashboards</h2>
</div>
<a
href="/host"
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50 dark:hover:bg-gray-700/50"
>
<!-- Star icon -->
<svg class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
<span class="flex-1 font-medium text-gray-900">Host-Dashboard</span>
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<span class="flex-1 font-medium text-gray-900 dark:text-gray-100">Host-Dashboard</span>
<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
{#if role === 'admin'}
<a
href="/admin"
class="flex items-center gap-3 border-t border-gray-100 px-5 py-4 transition hover:bg-gray-50"
class="flex items-center gap-3 border-t border-gray-100 px-5 py-4 transition hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/50"
>
<!-- Shield icon -->
<svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<svg class="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
</svg>
<span class="flex-1 font-medium text-gray-900">Admin-Dashboard</span>
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<span class="flex-1 font-medium text-gray-900 dark:text-gray-100">Admin-Dashboard</span>
<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
@@ -132,44 +201,169 @@
{/if}
<!-- PIN card -->
<div class="rounded-xl border border-amber-200 bg-amber-50 p-5">
<h2 class="mb-1 font-semibold text-amber-900">Wiederherstellungs-PIN</h2>
<p class="mb-3 text-sm text-amber-700">
<div class="rounded-xl border border-amber-200 bg-amber-50 p-5 dark:border-amber-800/60 dark:bg-amber-950/30">
<h2 class="mb-1 font-semibold text-amber-900 dark:text-amber-200">Wiederherstellungs-PIN</h2>
<p class="mb-3 text-sm text-amber-700 dark:text-amber-300/90">
Du brauchst diesen PIN, um dein Konto auf einem anderen Gerät wiederherzustellen. Schreib ihn auf!
</p>
{#if pin}
<div class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm">
<span class="font-mono text-4xl font-bold tracking-widest text-gray-900">{pin}</span>
{#if $pin}
<div class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm dark:bg-gray-900">
<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"
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"
>
{pinCopied ? 'Kopiert!' : 'Kopieren'}
</button>
</div>
{:else}
<div class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm">
<div class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm dark:bg-gray-900 dark:text-gray-500">
PIN nicht gespeichert. Nutze die Wiederherstellungs-Seite, um dich mit deinem PIN anzumelden.
</div>
{/if}
</div>
<!-- Diashow tile — primarily mobile, where the feed header doesn't show the icon. -->
<a
href="/diashow"
class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white px-5 py-4 transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700/50 sm:hidden"
>
<svg class="h-5 w-5 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 7.5A2.25 2.25 0 0 1 6 5.25h12A2.25 2.25 0 0 1 20.25 7.5v9A2.25 2.25 0 0 1 18 18.75H6A2.25 2.25 0 0 1 3.75 16.5v-9Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M10 9.75 14.5 12 10 14.25v-4.5Z" />
</svg>
<div class="flex-1">
<p class="font-medium text-gray-900 dark:text-gray-100">Diashow starten</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Vollbild-Präsentation der Beiträge</p>
</div>
<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
<!-- Theme / Design -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Design</h2>
</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: '🌙' }
] as opt (opt.value)}
{@const selected = $themePreference === opt.value}
<button
type="button"
role="radio"
aria-checked={selected}
onclick={() => themePreference.set(opt.value as ThemePreference)}
class="flex flex-col items-center gap-1 rounded-lg border-2 px-2 py-3 text-sm transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-200
{selected
? '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>
<span class="font-medium">{opt.label}</span>
</button>
{/each}
</div>
</div>
<!-- Data mode -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Datennutzung</h2>
</div>
<!--
Custom buttons styled as radios. The store is the single source of truth;
we don't lean on `<input type="radio">` because the native checked-state
model fights the "show confirm sheet first, then maybe commit" UX
(Svelte's reactive `checked={…}` and the browser's interactive state
model drift apart on cancel and on subsequent switches).
-->
<div class="px-5 py-4 space-y-2" role="radiogroup" aria-label="Datenmodus">
{#each [
{ value: 'saver', title: 'Datensparer (empfohlen)', body: 'Lädt komprimierte Vorschauen. Schnell und mobildatenfreundlich.' },
{ value: 'original', title: 'Original', body: 'Lädt die Originaldateien. Bessere Qualität, höherer Datenverbrauch.' }
] as opt (opt.value)}
{@const selected = $dataMode === opt.value}
<button
type="button"
role="radio"
aria-checked={selected}
onclick={() => chooseDataMode(opt.value as 'saver' | 'original')}
class="flex w-full cursor-pointer items-start gap-3 rounded-lg p-1 text-left transition hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-200 dark:hover:bg-gray-700/50"
>
<span
class="mt-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition {selected ? 'border-blue-600 dark:border-blue-400' : 'border-gray-300 dark:border-gray-600'}"
>
{#if selected}
<span class="block h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-400"></span>
{/if}
</span>
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">{opt.title}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{opt.body}</p>
</div>
</button>
{/each}
</div>
</div>
<!-- Per-user quota widget -->
{#if $quotaStore.enabled && $quotaStore.limit_bytes != null}
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
Dein Speicherkontingent
</h2>
<div class="flex items-baseline justify-between">
<span class="text-2xl font-bold text-gray-900 dark:text-gray-100">
{formatBytes($quotaStore.used_bytes)}
</span>
<span class="text-sm text-gray-500 dark:text-gray-400">von {formatBytes($quotaStore.limit_bytes)}</span>
</div>
<div class="mt-2 h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
<div
class="h-full transition-all"
class:bg-blue-500={quotaPercent < 80}
class:bg-amber-500={quotaPercent >= 80 && quotaPercent < 95}
class:bg-red-500={quotaPercent >= 95}
style="width: {quotaPercent}%"
></div>
</div>
<p class="mt-2 text-xs text-gray-400 dark:text-gray-500">
Geschätzt für {$quotaStore.active_uploaders} aktive Beitragende.
</p>
</div>
{/if}
<!-- Datenschutzhinweis (preformatted, plain text) -->
{#if $privacyNote.trim()}
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
Datenschutzhinweis
</h2>
<pre class="whitespace-pre-wrap font-sans text-sm text-gray-700 dark:text-gray-300">{$privacyNote}</pre>
</div>
{/if}
<!-- Konto section -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="border-b border-gray-100 px-5 py-3">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Konto</h2>
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<div class="border-b border-gray-100 px-5 py-3 dark:border-gray-700">
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Konto</h2>
</div>
<!-- Recover / device switch -->
<a
href="/recover"
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50 dark:hover:bg-gray-700/50"
>
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3h3m-3 3h3" />
</svg>
<span class="flex-1 text-sm font-medium text-gray-700">Gerät wechseln / PIN nutzen</span>
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<span class="flex-1 text-sm font-medium text-gray-700 dark:text-gray-300">Gerät wechseln / PIN nutzen</span>
<svg class="h-4 w-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</a>
@@ -177,22 +371,22 @@
<!-- Leave / logout -->
<button
onclick={() => (leaveConfirmOpen = true)}
class="flex w-full items-center gap-3 border-t border-gray-100 px-5 py-4 text-left transition hover:bg-red-50"
class="flex w-full items-center gap-3 border-t border-gray-100 px-5 py-4 text-left transition hover:bg-red-50 dark:border-gray-700 dark:hover:bg-red-950/30"
>
<svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<svg class="h-5 w-5 text-red-500 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
</svg>
<span class="flex-1 text-sm font-medium text-red-600">Event verlassen</span>
<span class="flex-1 text-sm font-medium text-red-600 dark:text-red-400">Event verlassen</span>
</button>
</div>
</div>
</div>
<!-- Leave-confirm bottom sheet -->
{#if leaveConfirmOpen}
<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)} aria-hidden="true">
<!-- Data-mode warning bottom sheet — shown once when the user picks Original. -->
{#if dataModeWarningOpen}
<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (dataModeWarningOpen = false)} aria-hidden="true">
<div
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6"
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()}
role="dialog"
@@ -200,21 +394,55 @@
tabindex="-1"
>
<div class="mb-4 flex justify-center">
<div class="h-1 w-10 rounded-full bg-gray-300"></div>
<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
</div>
<h3 class="mb-1 text-center text-lg font-bold text-gray-900">Event verlassen?</h3>
<p class="mb-6 text-center text-sm text-gray-500">
Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Original-Dateien laden?</h3>
<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
Original-Dateien können deutlich mehr Datenvolumen verbrauchen. Am besten im WLAN aktivieren.
</p>
<button
onclick={handleLogout}
class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700"
onclick={confirmOriginalMode}
class="mb-3 w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700"
>
Abmelden
Aktivieren
</button>
<button
onclick={() => (leaveConfirmOpen = false)}
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
onclick={() => (dataModeWarningOpen = false)}
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Abbrechen
</button>
</div>
</div>
{/if}
<!-- Leave-confirm bottom sheet -->
{#if leaveConfirmOpen}
<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)} aria-hidden="true">
<div
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
onclick={(e) => e.stopPropagation()}
onkeydown={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
tabindex="-1"
>
<div class="mb-4 flex justify-center">
<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
</div>
<h3 class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">Event verlassen?</h3>
<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">
Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
</p>
<button
onclick={handleLogout}
class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400"
>
Abmelden
</button>
<button
onclick={() => (leaveConfirmOpen = false)}
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Abbrechen
</button>