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

6
frontend/src/lib/components/BottomNav.svelte
View File

@@ -9,7 +9,7 @@
<!-- Bottom navigation bar — fixed, full-width, safe-area aware -->
<nav
class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/90 backdrop-blur-md"
class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/90 backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/90"
style="padding-bottom: env(safe-area-inset-bottom)"
>
<div class="mx-auto flex h-14 max-w-2xl items-end justify-around px-4 pb-1">
@@ -17,7 +17,7 @@
<a
href="/feed"
class="flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
{isActive('/feed') ? 'text-blue-600' : 'text-gray-400 hover:text-gray-600'}"
{isActive('/feed') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
aria-label="Galerie"
>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
@@ -53,7 +53,7 @@
<a
href="/account"
class="flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
{isActive('/account') ? 'text-blue-600' : 'text-gray-400 hover:text-gray-600'}"
{isActive('/account') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
aria-label="Konto"
>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">

26
frontend/src/lib/components/FeedGrid.svelte
View File

@@ -1,30 +1,40 @@
<script lang="ts">
import type { FeedUpload } from '$lib/types';
import { dataMode } from '$lib/data-mode-store';
import { longpress } from '$lib/actions/longpress';
interface Props {
uploads: FeedUpload[];
onlike: (id: string) => void;
oncomment: (id: string) => void;
onselect: (upload: FeedUpload) => void;
oncontextmenu?: (upload: FeedUpload) => void;
threeCol?: boolean;
}
let { uploads, onlike, oncomment, onselect, threeCol = false }: Props = $props();
let { uploads, onlike, oncomment, onselect, oncontextmenu, threeCol = false }: Props =
$props();
function isVideo(mime: string): boolean {
return mime.startsWith('video/');
}
function imageUrl(upload: FeedUpload): string {
// Grid uses small thumbnails by design even in Original mode — full media is one tap
// away in the lightbox, where the data-mode picker decides for real.
function tileUrl(upload: FeedUpload): string {
if (upload.thumbnail_url) return upload.thumbnail_url;
if (upload.preview_url) return upload.preview_url;
return '';
return $dataMode === 'original' ? `/api/v1/upload/${upload.id}/original` : '';
}
</script>
<div class="grid gap-0.5 {threeCol ? 'grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'}">
{#each uploads as upload (upload.id)}
<div class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100">
<div
class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
use:longpress={{ duration: 500 }}
onlongpress={() => oncontextmenu?.(upload)}
>
<button
onclick={() => onselect(upload)}
class="block h-full w-full"
@@ -32,8 +42,8 @@
>
{#if isVideo(upload.mime_type)}
<div class="flex h-full items-center justify-center bg-gray-800">
{#if imageUrl(upload)}
<img src={imageUrl(upload)} alt="" class="h-full w-full object-cover" />
{#if tileUrl(upload)}
<img src={tileUrl(upload)} alt="" class="h-full w-full object-cover" />
{/if}
<div class="absolute inset-0 flex items-center justify-center">
<svg class="h-10 w-10 text-white/80" fill="currentColor" viewBox="0 0 24 24">
@@ -41,8 +51,8 @@
</svg>
</div>
</div>
{:else if imageUrl(upload)}
<img src={imageUrl(upload)} alt="" class="h-full w-full object-cover" loading="lazy" />
{:else if tileUrl(upload)}
<img src={tileUrl(upload)} alt="" class="h-full w-full object-cover" loading="lazy" />
{:else}
<div class="flex h-full items-center justify-center text-gray-400">
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">

93
frontend/src/lib/components/FeedListCard.svelte
View File

@@ -1,22 +1,32 @@
<script lang="ts">
import type { FeedUpload } from '$lib/types';
import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
import { longpress } from '$lib/actions/longpress';
import { doubletap } from '$lib/actions/doubletap';
interface Props {
upload: FeedUpload;
isOwn?: boolean;
onlike: (id: string) => void;
oncomment: (id: string) => void;
onselect: (upload: FeedUpload) => void;
oncontextmenu?: (upload: FeedUpload) => void;
}
let { upload, onlike, oncomment, onselect }: Props = $props();
let {
upload,
isOwn = false,
onlike,
oncomment,
onselect,
oncontextmenu
}: Props = $props();
function isVideo(mime: string): boolean {
return mime.startsWith('video/');
}
function mediaUrl(u: FeedUpload): string {
return u.preview_url ?? u.thumbnail_url ?? '';
}
const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
function relativeTime(iso: string): string {
const diff = Date.now() - new Date(iso).getTime();
@@ -40,40 +50,68 @@
'bg-green-100 text-green-700',
'bg-amber-100 text-amber-700',
'bg-rose-100 text-rose-700',
'bg-teal-100 text-teal-700',
'bg-teal-100 text-teal-700'
];
function avatarColor(name: string): string {
let hash = 0;
for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
return COLORS[hash % COLORS.length];
}
function openContext() {
oncontextmenu?.(upload);
}
</script>
<article class="bg-white">
<article
class="bg-white dark:bg-gray-900"
use:longpress={{ duration: 500 }}
onlongpress={openContext}
>
<!-- Uploader row -->
<div class="flex items-center gap-3 px-4 py-3">
<div
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
{avatarColor(upload.uploader_name)}"
>
{initial(upload.uploader_name)}
</div>
<div class="min-w-0">
<p class="truncate text-sm font-semibold text-gray-900">{upload.uploader_name}</p>
<p class="text-xs text-gray-400">{relativeTime(upload.created_at)}</p>
<div class="flex items-center justify-between gap-3 px-4 py-3">
<div class="flex min-w-0 items-center gap-3">
<div
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
{avatarColor(upload.uploader_name)}"
>
{initial(upload.uploader_name)}
</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>
</div>
</div>
{#if oncontextmenu}
<!-- Desktop kebab — same actions as the mobile long-press context sheet. -->
<button
type="button"
onclick={(e) => { e.stopPropagation(); openContext(); }}
class="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-200"
aria-label="Mehr Aktionen"
>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
</button>
{/if}
</div>
<!-- Media -->
<button
class="block w-full"
onclick={() => onselect(upload)}
use:doubletap
ondoubletap={() => onlike(upload.id)}
aria-label="Bild vergrößern"
>
{#if isVideo(upload.mime_type)}
<div class="relative aspect-video w-full bg-gray-900">
{#if mediaUrl(upload)}
<img src={mediaUrl(upload)} alt="" class="h-full w-full object-cover opacity-80" />
{#if upload.thumbnail_url || upload.preview_url}
<img
src={upload.thumbnail_url ?? upload.preview_url ?? ''}
alt=""
class="h-full w-full object-cover opacity-80"
/>
{/if}
<div class="absolute inset-0 flex items-center justify-center">
<span class="flex h-14 w-14 items-center justify-center rounded-full bg-black/50 text-white">
@@ -83,17 +121,17 @@
</span>
</div>
</div>
{:else if mediaUrl(upload)}
{:else if mediaSrc}
<img
src={mediaUrl(upload)}
src={mediaSrc}
alt=""
class="w-full object-cover"
style="max-height: 80svh"
loading="lazy"
/>
{:else}
<div class="flex aspect-square w-full items-center justify-center bg-gray-100">
<svg class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
@@ -105,7 +143,7 @@
<button
onclick={() => onlike(upload.id)}
class="flex items-center gap-1.5 text-sm font-medium transition-colors
{upload.liked_by_me ? 'text-red-500' : 'text-gray-500 hover:text-red-400'}"
{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 dark:text-gray-400 dark:hover:text-red-400'}"
>
<svg
class="h-5 w-5 {upload.liked_by_me ? 'fill-red-500' : ''}"
@@ -120,21 +158,24 @@
</button>
<button
onclick={() => oncomment(upload.id)}
class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500"
class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400"
>
<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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
{upload.comment_count}
</button>
{#if isOwn}
<span class="ml-auto text-xs text-gray-400 dark:text-gray-500">Eigener Beitrag</span>
{/if}
</div>
<!-- Caption -->
{#if upload.caption}
<p class="px-4 pb-3 text-sm text-gray-800 [overflow-wrap:anywhere]">
<p class="px-4 pb-3 text-sm text-gray-800 [overflow-wrap:anywhere] dark:text-gray-200">
{upload.caption}
</p>
{/if}
<div class="border-b border-gray-100"></div>
<div class="border-b border-gray-100 dark:border-gray-800"></div>
</article>

4
frontend/src/lib/components/HashtagChips.svelte
View File

@@ -19,8 +19,8 @@
onclick={() => onselect(null)}
class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
selected === null
? 'bg-blue-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
? 'bg-blue-600 text-white dark:bg-blue-500'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
}"
>
Alle

103
frontend/src/lib/components/LightboxModal.svelte
View File

@@ -1,7 +1,9 @@
<script lang="ts">
import type { FeedUpload } from '$lib/types';
import { api, ApiError } from '$lib/api';
import { api } from '$lib/api';
import { getUserId } from '$lib/auth';
import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
import { doubletap } from '$lib/actions/doubletap';
interface CommentDto {
id: string;
@@ -24,6 +26,15 @@
let newComment = $state('');
let loading = $state(false);
let userId = getUserId();
let heartBurst = $state(false);
const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
function triggerHeartBurst() {
heartBurst = true;
onlike(upload.id);
setTimeout(() => (heartBurst = false), 700);
}
$effect(() => {
loadComments();
@@ -77,10 +88,19 @@
}
</script>
<style>
@keyframes heart-burst {
0% { transform: scale(0.5); opacity: 0; }
30% { transform: scale(1.2); opacity: 1; }
70% { transform: scale(1); opacity: 1; }
100% { transform: scale(1.4); opacity: 0; }
}
</style>
<svelte:window onkeydown={handleKeydown} />
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4" role="dialog">
<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white">
<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900">
<!-- Media -->
<div class="relative bg-black">
<button onclick={onclose} class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70">
@@ -88,36 +108,59 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
{#if isVideo(upload.mime_type)}
<video
src={upload.preview_url ?? ''}
controls
class="max-h-[50vh] w-full object-contain"
poster={upload.thumbnail_url ?? undefined}
></video>
{:else}
<img
src={upload.preview_url ?? ''}
alt=""
class="max-h-[50vh] w-full object-contain"
/>
{/if}
<div
class="relative"
use:doubletap
ondoubletap={triggerHeartBurst}
>
{#if isVideo(upload.mime_type)}
<video
src={mediaSrc}
controls
class="max-h-[50vh] w-full object-contain"
poster={upload.thumbnail_url ?? undefined}
></video>
{:else}
<img
src={mediaSrc}
alt=""
class="max-h-[50vh] w-full object-contain select-none"
draggable="false"
/>
{/if}
{#if heartBurst}
<span
class="pointer-events-none absolute inset-0 flex items-center justify-center"
aria-hidden="true"
>
<svg
class="h-24 w-24 text-red-500 drop-shadow-lg"
style="animation: heart-burst 700ms ease-out forwards;"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z" />
</svg>
</span>
{/if}
</div>
</div>
<!-- Info + Comments -->
<div class="flex flex-1 flex-col overflow-hidden">
<div class="border-b border-gray-100 p-3">
<div class="border-b border-gray-100 p-3 dark:border-gray-800">
<div class="flex items-center justify-between">
<div>
<span class="font-medium text-gray-900">{upload.uploader_name}</span>
<span class="ml-2 text-xs text-gray-400">{formatTime(upload.created_at)}</span>
<span class="font-medium text-gray-900 dark:text-gray-100">{upload.uploader_name}</span>
<span class="ml-2 text-xs text-gray-400 dark:text-gray-500">{formatTime(upload.created_at)}</span>
</div>
<button
onclick={() => onlike(upload.id)}
class="flex items-center gap-1 rounded-full px-2.5 py-1 text-sm transition {
upload.liked_by_me
? 'bg-red-50 text-red-600'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
? 'bg-red-50 text-red-600 dark:bg-red-950/40 dark:text-red-300'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
}"
>
<svg class="h-4 w-4 {upload.liked_by_me ? 'fill-current' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -127,27 +170,27 @@
</button>
</div>
{#if upload.caption}
<p class="mt-1 text-sm text-gray-700">{upload.caption}</p>
<p class="mt-1 text-sm text-gray-700 dark:text-gray-300">{upload.caption}</p>
{/if}
</div>
<!-- Comments list -->
<div class="flex-1 overflow-y-auto p-3">
{#if comments.length === 0}
<p class="text-center text-sm text-gray-400">Noch keine Kommentare.</p>
<p class="text-center text-sm text-gray-400 dark:text-gray-500">Noch keine Kommentare.</p>
{:else}
<div class="space-y-3">
{#each comments as comment (comment.id)}
<div class="flex items-start gap-2">
<div class="flex-1">
<span class="text-sm font-medium text-gray-900">{comment.uploader_name}</span>
<span class="ml-1 text-sm text-gray-700">{comment.body}</span>
<div class="mt-0.5 text-xs text-gray-400">{formatTime(comment.created_at)}</div>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{comment.uploader_name}</span>
<span class="ml-1 text-sm text-gray-700 dark:text-gray-300">{comment.body}</span>
<div class="mt-0.5 text-xs text-gray-400 dark:text-gray-500">{formatTime(comment.created_at)}</div>
</div>
{#if comment.user_id === userId}
<button
onclick={() => deleteComment(comment.id)}
class="shrink-0 text-gray-400 hover:text-red-500"
class="shrink-0 text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400"
aria-label="Löschen"
>
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -164,19 +207,19 @@
<!-- Comment input -->
<form
onsubmit={(e) => { e.preventDefault(); submitComment(); }}
class="flex gap-2 border-t border-gray-100 p-3"
class="flex gap-2 border-t border-gray-100 p-3 dark:border-gray-800"
>
<input
type="text"
bind:value={newComment}
placeholder="Kommentar schreiben..."
maxlength={500}
class="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
/>
<button
type="submit"
disabled={loading || !newComment.trim()}
class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Senden
</button>

97
frontend/src/lib/components/OnboardingGuide.svelte
View File

@@ -1,32 +1,63 @@
<script lang="ts">
import { browser } from '$app/environment';
import { privacyNote } from '$lib/privacy-note-store';
import { themePreference, type ThemePreference } from '$lib/theme-store';
const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
type Step =
| { kind: 'text'; icon: string; title: string; body: string }
| { kind: 'theme'; icon: string; title: string };
let visible = $state(false);
let step = $state(0);
const steps = [
// The PIN step gets an extra line when the admin has set a Datenschutzhinweis. Done
// reactively so the nudge appears as soon as the note loads from `/me/context`,
// even if the user opens the onboarding before the request returns.
let hasPrivacyNote = $derived($privacyNote.trim().length > 0);
let steps: Step[] = $derived([
{
kind: 'text',
icon: '📸',
title: 'Willkommen bei EventSnap!',
body: 'Hier kannst du Fotos und Videos mit allen Gästen teilen — in Echtzeit, ganz ohne App-Store.'
},
{
kind: 'text',
icon: '⬆️',
title: 'Fotos & Videos hochladen',
body: 'Tippe auf den Plus-Button unten in der Mitte, um Fotos aus deiner Galerie zu wählen oder direkt mit der Kamera aufzunehmen. Mehrere Dateien auf einmal sind kein Problem!'
},
{
kind: 'text',
icon: '#️⃣',
title: 'Hashtags nutzen',
body: 'Füge in deiner Bildunterschrift #hashtags ein, um Fotos zu gruppieren — z.B. #tanz, #buffet oder #reden. Du kannst danach filtern.'
},
{
kind: 'theme',
icon: '🌗',
title: 'Helles oder dunkles Design?'
},
{
kind: 'text',
icon: '🔑',
title: 'Deinen PIN merken!',
body: 'Du hast beim Registrieren einen 4-stelligen PIN erhalten. Speichere ihn — du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen. Er ist immer unter „Mein Konto" zu finden.'
body:
'Du hast beim Registrieren einen 4-stelligen PIN erhalten. Speichere ihn — du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen. Er ist immer unter „Mein Konto" zu finden.' +
(hasPrivacyNote ? ' Den Datenschutzhinweis findest du ebenfalls unter „Mein Konto".' : '')
}
]);
// Derived in the script so TypeScript can narrow on `.kind` inside the template.
let currentStep = $derived(steps[step]);
const THEME_OPTIONS: Array<{ value: ThemePreference; label: string; hint: string; icon: string }> = [
{ value: 'system', label: 'System', hint: 'Folgt der Geräteeinstellung', icon: '🖥️' },
{ value: 'light', label: 'Hell', hint: 'Heller Hintergrund', icon: '☀️' },
{ value: 'dark', label: 'Dunkel', hint: 'Dunkler Hintergrund', icon: '🌙' }
];
if (browser && !localStorage.getItem(GUIDE_SEEN_KEY)) {
@@ -50,32 +81,80 @@
{#if visible}
<!-- Backdrop -->
<div class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 sm:items-center">
<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-2xl">
<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl">
<!-- Step indicator -->
<div class="mb-5 flex justify-center gap-1.5">
{#each steps as _, i}
<div class="h-1.5 rounded-full transition-all {i === step ? 'w-6 bg-blue-600' : 'w-1.5 bg-gray-200'}"></div>
<div
class="h-1.5 rounded-full transition-all {i === step
? 'w-6 bg-blue-600 dark:bg-blue-500'
: 'w-1.5 bg-gray-200 dark:bg-gray-700'}"
></div>
{/each}
</div>
<!-- Content -->
<div class="mb-6 text-center">
<div class="mb-3 text-5xl">{steps[step].icon}</div>
<h2 class="mb-2 text-xl font-bold text-gray-900">{steps[step].title}</h2>
<p class="text-sm leading-relaxed text-gray-600">{steps[step].body}</p>
<div class="mb-3 text-5xl">{currentStep.icon}</div>
<h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
{currentStep.title}
</h2>
{#if currentStep.kind === 'text'}
<p class="text-sm leading-relaxed text-gray-600 dark:text-gray-300">
{currentStep.body}
</p>
{:else}
<p class="mb-4 text-sm text-gray-600 dark:text-gray-300">
Du kannst die Wahl jederzeit unter „Mein Konto" ändern.
</p>
<div class="space-y-2 text-left" role="radiogroup" aria-label="Design">
{#each THEME_OPTIONS as opt (opt.value)}
{@const selected = $themePreference === opt.value}
<button
type="button"
role="radio"
aria-checked={selected}
onclick={() => themePreference.set(opt.value)}
class="flex w-full cursor-pointer items-center gap-3 rounded-xl border-2 p-3 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-200
{selected
? 'border-blue-600 bg-blue-50 dark:border-blue-500 dark:bg-blue-950/40'
: 'border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800'}"
>
<span class="text-2xl leading-none">{opt.icon}</span>
<div class="flex-1">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{opt.label}</p>
<p class="text-xs text-gray-500 dark:text-gray-400">{opt.hint}</p>
</div>
<span
class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2
{selected
? 'border-blue-600 bg-blue-600 dark:border-blue-500 dark:bg-blue-500'
: 'border-gray-300 dark:border-gray-600'}"
>
{#if selected}
<svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
{/if}
</span>
</button>
{/each}
</div>
{/if}
</div>
<!-- Buttons -->
<div class="flex gap-2">
<button
onclick={dismiss}
class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50"
class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
>
Überspringen
</button>
<button
onclick={next}
class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700"
class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
</button>

22
frontend/src/lib/components/UploadSheet.svelte
View File

@@ -80,54 +80,54 @@
<!-- Sheet -->
<div
class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300"
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)"
>
<!-- Drag handle -->
<div class="flex justify-center pt-3 pb-1">
<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>
<div class="space-y-3 px-4 pb-4 pt-2">
<!-- Gallery option -->
<button
onclick={openGallery}
class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200"
class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:active:bg-gray-600"
>
<span class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-100 text-blue-600">
<span class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-300">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
</svg>
</span>
<div>
<p class="font-semibold text-gray-900">Galerie</p>
<p class="text-sm text-gray-500">Foto oder Video wählen</p>
<p class="font-semibold text-gray-900 dark:text-gray-100">Galerie</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Foto oder Video wählen</p>
</div>
</button>
<!-- Camera option -->
<button
onclick={openCamera}
class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200"
class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 dark:active:bg-gray-600"
>
<span class="flex h-11 w-11 items-center justify-center rounded-full bg-purple-100 text-purple-600">
<span class="flex h-11 w-11 items-center justify-center rounded-full bg-purple-100 text-purple-600 dark:bg-purple-900/40 dark:text-purple-300">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
</svg>
</span>
<div>
<p class="font-semibold text-gray-900">Kamera</p>
<p class="text-sm text-gray-500">Jetzt aufnehmen</p>
<p class="font-semibold text-gray-900 dark:text-gray-100">Kamera</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Jetzt aufnehmen</p>
</div>
</button>
<!-- Cancel -->
<button
onclick={close}
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-600 transition hover:bg-gray-50"
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-600 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Abbrechen
</button>

47
frontend/src/routes/+layout.svelte
View File

@@ -1,16 +1,24 @@
<script lang="ts">
import favicon from '$lib/assets/favicon.svg';
import '../app.css';
import { initAuth } from '$lib/auth';
import { onMount } from 'svelte';
import { initAuth, getToken, getUserId, clearPin } from '$lib/auth';
import { initTheme } from '$lib/theme-store';
import { onMount, onDestroy } from 'svelte';
import BottomNav from '$lib/components/BottomNav.svelte';
import UploadSheet from '$lib/components/UploadSheet.svelte';
import { showBottomNav } from '$lib/ui-store';
import { isAuthenticated } from '$lib/auth';
import { queueItems, isProcessing } from '$lib/upload-queue';
import { privacyNote } from '$lib/privacy-note-store';
import { refreshQuota } from '$lib/quota-store';
import { onSseEvent } from '$lib/sse';
import { api } from '$lib/api';
import type { MeContextDto } from '$lib/types';
let { children } = $props();
let unsubs: Array<() => void> = [];
// Slim progress bar: ratio of completed items to total, shown while processing.
let progressPct = $derived.by(() => {
const total = $queueItems.length;
@@ -19,8 +27,41 @@
return Math.round((done / total) * 100);
});
onMount(() => {
onMount(async () => {
initAuth();
// Hooks up the appliedTheme → <html class="dark"> sync. Must run early so the
// first paint after hydration matches the saved preference.
initTheme();
// Hydrate cross-cutting stores once on boot if the user is already authenticated.
// Page-level mounts will refresh again as needed.
if (getToken()) {
try {
const ctx = await api.get<MeContextDto>('/me/context');
privacyNote.set(ctx.privacy_note);
} catch {
// non-fatal; users without a session land on /join anyway
}
void refreshQuota();
}
// Global pin-reset listener — clears the now-invalid plaintext PIN from
// localStorage no matter which route the user is currently on. The reactive
// `currentPin` store carries the change into any page that reads it (My
// Account in particular).
unsubs.push(
onSseEvent('pin-reset', (data) => {
try {
const payload = JSON.parse(data) as { user_id: string };
if (payload.user_id === getUserId()) clearPin();
} catch {
// ignore malformed payload
}
})
);
});
onDestroy(() => {
for (const unsub of unsubs) unsub();
});
</script>

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>

388
frontend/src/routes/admin/+page.svelte
View File

@@ -34,16 +34,68 @@
created_at: string;
}
const CONFIG_LABELS: Record<string, string> = {
max_image_size_mb: 'Max. Bildgröße (MB)',
max_video_size_mb: 'Max. Videogröße (MB)',
upload_rate_per_hour: 'Upload-Limit pro Stunde',
feed_rate_per_min: 'Feed-Anfragen pro Minute',
export_rate_per_day: 'Export-Downloads pro Tag',
quota_tolerance: 'Speicherkontingent-Toleranz (0–1)',
estimated_guest_count: 'Geschätzte Gästezahl',
compression_concurrency: 'Kompressions-Worker'
};
type ConfigKind = 'number' | 'bool' | 'text';
interface ConfigField {
key: string;
label: string;
kind: ConfigKind;
hint?: string;
}
interface ConfigGroup {
title: string;
fields: ConfigField[];
}
// Grouped sections — adding a new key is one entry in the right group, no other
// code changes required. The form renders each field based on `kind`.
const CONFIG_GROUPS: ConfigGroup[] = [
{
title: 'Limits & Größen',
fields: [
{ key: 'max_image_size_mb', label: 'Max. Bildgröße (MB)', kind: 'number' },
{ key: 'max_video_size_mb', label: 'Max. Videogröße (MB)', kind: 'number' },
{ key: 'compression_concurrency', label: 'Kompressions-Worker', kind: 'number' }
]
},
{
title: 'Rate-Limits',
fields: [
{ key: 'rate_limits_enabled', label: 'Rate-Limits aktiv', kind: 'bool', hint: 'Hauptschalter — wenn aus, sind alle Rate-Limits deaktiviert.' },
{ key: 'upload_rate_enabled', label: 'Upload-Limit aktiv', kind: 'bool' },
{ key: 'feed_rate_enabled', label: 'Feed-Limit aktiv', kind: 'bool' },
{ key: 'export_rate_enabled', label: 'Export-Limit aktiv', kind: 'bool' },
{ key: 'join_rate_enabled', label: 'Join-Limit aktiv', kind: 'bool' },
{ key: 'upload_rate_per_hour', label: 'Upload-Limit pro Stunde', kind: 'number' },
{ key: 'feed_rate_per_min', label: 'Feed-Anfragen pro Minute', kind: 'number' },
{ key: 'export_rate_per_day', label: 'Export-Downloads pro Tag', kind: 'number' }
]
},
{
title: 'Quoten',
fields: [
{ key: 'quota_enabled', label: 'Quoten aktiv', kind: 'bool', hint: 'Hauptschalter — wenn aus, wird nichts geprüft.' },
{ key: 'storage_quota_enabled', label: 'Speicher-Quote aktiv', kind: 'bool' },
{ key: 'upload_count_quota_enabled', label: 'Upload-Anzahl-Quote aktiv', kind: 'bool', hint: 'Reserviert für künftige Anzahl-Limits.' },
{ key: 'quota_tolerance', label: 'Toleranz (0–1)', kind: 'number' },
{ key: 'estimated_guest_count', label: 'Geschätzte Gästezahl', kind: 'number' }
]
},
{
title: 'Datenschutzhinweis',
fields: [
{ key: 'privacy_note', label: 'Datenschutzhinweis (freier Text)', kind: 'text', hint: 'Wird wörtlich im Konto-Bereich angezeigt. Kein HTML — Leerzeichen und Zeilenumbrüche werden übernommen.' }
]
}
];
function isTrue(v: string | undefined): boolean {
if (!v) return false;
return ['true', '1', 'yes', 'on'].includes(v.trim().toLowerCase());
}
function toggleBool(key: string) {
configDraft = { ...configDraft, [key]: isTrue(configDraft[key]) ? 'false' : 'true' };
}
type AdminTab = 'stats' | 'config' | 'export' | 'users';
const TAB_LABELS: Record<AdminTab, string> = { stats: 'Stats', config: 'Config', export: 'Export', users: 'Nutzer' };
@@ -74,6 +126,12 @@
let banHideUploads = $state(false);
let banSubmitting = $state(false);
// PIN reset state — `pinModal` holds the freshly-issued plaintext PIN. We forget it
// the moment the modal closes.
let pinResetTarget = $state<UserSummary | null>(null);
let pinResetSubmitting = $state(false);
let pinModal = $state<{ name: string; pin: string } | null>(null);
const myRole = getRole();
onMount(async () => {
@@ -200,6 +258,39 @@
}
}
function askResetPin(user: UserSummary) {
pinResetTarget = user;
}
async function confirmResetPin() {
if (!pinResetTarget) return;
pinResetSubmitting = true;
try {
const res = await api.post<{ pin: string }>(`/host/users/${pinResetTarget.id}/pin-reset`);
pinModal = { name: pinResetTarget.display_name, pin: res.pin };
pinResetTarget = null;
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
} finally {
pinResetSubmitting = false;
}
}
function copyPinModal() {
if (!pinModal) return;
navigator.clipboard.writeText(pinModal.pin);
showToast('PIN kopiert.');
}
/** True iff the current caller may reset this target's PIN. Mirrors the backend
* rules in `handlers::host::reset_user_pin`. */
function canResetPinFor(target: UserSummary): boolean {
if (target.role === 'admin') return false;
if (myRole === 'admin') return true; // any non-admin
if (myRole === 'host') return target.role === 'guest';
return false;
}
function formatBytes(bytes: number): string {
if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
@@ -217,10 +308,10 @@
function statusBadgeClass(status: string): string {
switch (status) {
case 'done': return 'bg-green-100 text-green-700';
case 'running': return 'bg-blue-100 text-blue-700';
case 'failed': return 'bg-red-100 text-red-700';
default: return 'bg-gray-100 text-gray-600';
case 'done': return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-200';
case 'running': return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200';
case 'failed': return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200';
default: return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
}
}
@@ -235,21 +326,63 @@
}
</script>
<!-- PIN reset confirmation -->
{#if pinResetTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
</p>
<div class="flex gap-2">
<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
</button>
</div>
</div>
</div>
{/if}
<!-- One-time PIN display modal -->
{#if pinModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
</p>
<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
Kopieren
</button>
</div>
<button
onclick={() => (pinModal = null)}
class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Schließen
</button>
</div>
</div>
{/if}
<!-- Ban modal -->
{#if banTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
<p class="mb-4 text-sm text-gray-600">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
</p>
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500" />
<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600" />
<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
</label>
<div class="flex gap-2">
<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50">Abbrechen</button>
<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50">
<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400">
{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
</button>
</div>
@@ -259,36 +392,36 @@
<!-- Toast -->
{#if toast}
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
{toast}
</div>
{/if}
<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-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"
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"
>
<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>
<h1 class="text-xl font-bold text-gray-900">Admin-Dashboard</h1>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Admin-Dashboard</h1>
</div>
</div>
<!-- Inner tab bar -->
<div class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white">
<div class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-3xl min-w-max">
{#each Object.entries(TAB_LABELS) as [tab, label]}
<button
onclick={() => (activeTab = tab as AdminTab)}
class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors
{activeTab === tab ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'}"
{activeTab === tab ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}"
>
{label}
</button>
@@ -298,7 +431,7 @@
<div class="mx-auto max-w-3xl p-4">
{#if loading}
<div class="py-16 text-center text-gray-400">Laden…</div>
<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>
{:else}
@@ -308,63 +441,103 @@
<div class="space-y-3">
{#if stats}
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
<p class="text-3xl font-bold text-gray-900">{stats.user_count}</p>
<p class="mt-0.5 text-xs text-gray-500">Gäste</p>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{stats.user_count}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Gäste</p>
</div>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
<p class="text-3xl font-bold text-gray-900">{stats.upload_count}</p>
<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{stats.upload_count}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
</div>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
<p class="text-3xl font-bold text-gray-900">{stats.comment_count}</p>
<p class="mt-0.5 text-xs text-gray-500">Kommentare</p>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{stats.comment_count}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Kommentare</p>
</div>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
<p class="text-3xl font-bold text-gray-900">{diskPct(stats)} %</p>
<p class="mt-0.5 text-xs text-gray-500">Speicher</p>
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center dark:border-gray-700 dark:bg-gray-800">
<p class="text-3xl font-bold text-gray-900 dark:text-gray-100">{diskPct(stats)} %</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Speicher</p>
</div>
</div>
<!-- Disk bar -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<div class="mb-1 flex items-center justify-between text-xs text-gray-500">
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<div class="mb-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
<span>Speicherauslastung</span>
<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)}</span>
</div>
<div class="h-2.5 overflow-hidden rounded-full bg-gray-200">
<div class="h-2.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div
class="h-full rounded-full transition-all {diskPct(stats) >= 90 ? 'bg-red-500' : diskPct(stats) >= 75 ? 'bg-amber-500' : 'bg-blue-500'}"
style="width: {diskPct(stats)}%"
></div>
</div>
<p class="mt-1.5 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
<p class="mt-1.5 text-xs text-gray-400 dark:text-gray-500">{formatBytes(stats.disk_free_bytes)} frei</p>
</div>
{/if}
</div>
<!-- ── Config tab ───────────────────────────────────────────────── -->
{:else if activeTab === 'config'}
<div class="relative">
<div class="space-y-3 rounded-xl border border-gray-200 bg-white p-5 pb-20">
{#each Object.entries(CONFIG_LABELS) as [key, label]}
<div>
<label for={key} class="mb-1 block text-sm font-medium text-gray-700">{label}</label>
<input
id={key}
type="number"
step="any"
bind:value={configDraft[key]}
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
/>
<div class="relative space-y-3 pb-20">
{#each CONFIG_GROUPS as group (group.title)}
<div class="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">
<h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{group.title}</h3>
</div>
{/each}
</div>
<div class="space-y-4 px-5 py-4">
{#each group.fields as field (field.key)}
<div>
{#if field.kind === 'bool'}
<label class="flex cursor-pointer items-start gap-3" for={field.key}>
<input
id={field.key}
type="checkbox"
class="mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
checked={isTrue(configDraft[field.key])}
onchange={() => toggleBool(field.key)}
/>
<div class="min-w-0">
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{field.label}</span>
{#if field.hint}
<p class="text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
{/if}
</div>
</label>
{:else if field.kind === 'text'}
<label for={field.key} class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{field.label}</label>
<textarea
id={field.key}
rows="6"
bind:value={configDraft[field.key]}
class="w-full resize-none rounded-lg border border-gray-300 bg-white px-3 py-2 font-mono 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"
></textarea>
{#if field.hint}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
{/if}
{:else}
<label for={field.key} class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{field.label}</label>
<input
id={field.key}
type="number"
step="any"
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"
/>
{#if field.hint}
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{field.hint}</p>
{/if}
{/if}
</div>
{/each}
</div>
</div>
{/each}
<!-- Sticky save button -->
<div class="sticky bottom-0 border-t border-gray-100 bg-white px-5 py-3">
<div class="sticky bottom-0 -mx-4 border-t border-gray-100 bg-white px-5 py-3 dark:border-gray-800 dark:bg-gray-900 sm:mx-0 sm:rounded-b-xl">
<button
onclick={saveConfig}
disabled={saving}
class="w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:opacity-50"
class="w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{saving ? 'Wird gespeichert…' : 'Speichern'}
</button>
@@ -375,52 +548,52 @@
{:else if activeTab === 'export'}
<div class="space-y-3">
<!-- Gallery release -->
<div class="rounded-xl border border-gray-200 bg-white p-5">
<h3 class="mb-3 font-semibold text-gray-900">Galerie</h3>
<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}
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700"
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
</button>
</div>
<!-- Export jobs -->
<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="mb-4 flex items-center justify-between">
<h3 class="font-semibold text-gray-900">Export-Jobs</h3>
<h3 class="font-semibold text-gray-900 dark:text-gray-100">Export-Jobs</h3>
<button
onclick={refreshExportJobs}
disabled={exportJobsRefreshing}
class="text-xs text-blue-600 hover:underline disabled:opacity-50"
class="text-xs text-blue-600 hover:underline disabled:opacity-50 dark:text-blue-400"
>
{exportJobsRefreshing ? 'Lädt…' : 'Aktualisieren'}
</button>
</div>
{#if exportJobs.length === 0}
<p class="text-sm text-gray-400">Noch keine Export-Jobs.</p>
<p class="text-sm text-gray-400 dark:text-gray-500">Noch keine Export-Jobs.</p>
{:else}
<div class="space-y-3">
{#each exportJobs as job}
<div class="rounded-lg border border-gray-100 p-3">
<div class="rounded-lg border border-gray-100 p-3 dark:border-gray-700">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-900">{jobLabel(job.type)}</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{jobLabel(job.type)}</span>
<span class="rounded-full px-2 py-0.5 text-xs font-medium {statusBadgeClass(job.status)}">
{statusLabel(job.status)}
</span>
</div>
{#if job.status === 'running'}
<div class="mt-2">
<div class="mb-1 flex justify-between text-xs text-gray-500">
<div class="mb-1 flex justify-between text-xs text-gray-500 dark:text-gray-400">
<span>Fortschritt</span><span>{job.progress_pct} %</span>
</div>
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {job.progress_pct}%"></div>
</div>
</div>
{/if}
{#if job.error_message}
<p class="mt-1 text-xs text-red-600">{job.error_message}</p>
<p class="mt-1 text-xs text-red-600 dark:text-red-400">{job.error_message}</p>
{/if}
</div>
{/each}
@@ -431,66 +604,71 @@
<!-- ── Nutzer tab ───────────────────────────────────────────────── -->
{:else if activeTab === 'users'}
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<!-- Search -->
<div class="p-4">
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-900">
<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<input
type="search"
placeholder="Nutzer suchen…"
bind:value={userSearch}
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
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"
/>
</div>
</div>
{#if filteredUsers.length === 0}
<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
<p class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">Keine Treffer.</p>
{:else}
<div class="divide-y divide-gray-100">
<div class="divide-y divide-gray-100 dark:divide-gray-700">
{#each filteredUsers as user}
<div class="flex items-center gap-3 px-5 py-3">
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-1.5">
<span class="font-medium text-gray-900">{user.display_name}</span>
<span class="font-medium text-gray-900 dark:text-gray-100">{user.display_name}</span>
{#if user.role === 'host'}
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">Host</span>
{:else if user.role === 'admin'}
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">Admin</span>
{/if}
{#if user.is_banned}
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/40 dark:text-red-200">Gesperrt</span>
{/if}
</div>
<p class="text-xs text-gray-400">
<p class="text-xs text-gray-400 dark:text-gray-500">
{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
</p>
</div>
<div class="flex shrink-0 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">
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">
Host
</button>
{/if}
{#if user.role === 'host' && myRole === 'admin'}
<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">
Degradieren
</button>
{/if}
<button onclick={() => openBanModal(user)} class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100">
Sperren
<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">
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">
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">
Degradieren
</button>
{/if}
{#if canResetPinFor(user)}
<button onclick={() => askResetPin(user)} class="rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-100 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
PIN zurücksetzen
</button>
{/if}
<button onclick={() => openBanModal(user)} class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60">
Sperren
</button>
{/if}
</div>
{/if}
</div>
</div>
{/each}
</div>

16
frontend/src/routes/admin/login/+page.svelte
View File

@@ -34,10 +34,10 @@
}
</script>
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
<div class="w-full max-w-sm">
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Admin-Login</h1>
<p class="mb-6 text-center text-gray-500 text-sm">Nur für Veranstalter</p>
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Admin-Login</h1>
<p class="mb-6 text-center text-gray-500 text-sm dark:text-gray-400">Nur für Veranstalter</p>
<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>
<input
@@ -45,24 +45,24 @@
bind:value={password}
placeholder="Passwort"
autocomplete="current-password"
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
/>
{#if error}
<p class="mb-3 text-sm text-red-600">{error}</p>
<p class="mb-3 text-sm text-red-600 dark:text-red-400">{error}</p>
{/if}
<button
type="submit"
disabled={loading || !password}
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{loading ? 'Wird angemeldet…' : 'Anmelden'}
</button>
</form>
<p class="mt-4 text-center text-sm text-gray-500">
<a href="/join" class="text-blue-600 hover:underline">Zurück zum Event</a>
<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
<a href="/join" class="text-blue-600 hover:underline dark:text-blue-400">Zurück zum Event</a>
</p>
</div>
</div>

60
frontend/src/routes/export/+page.svelte
View File

@@ -109,26 +109,26 @@
<!-- HTML guide modal -->
{#if showHtmlGuide}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
<h2 class="mb-3 text-lg font-bold text-gray-900">Hinweis zum HTML-Viewer</h2>
<ol class="mb-4 space-y-2 text-sm text-gray-700">
<li class="flex gap-2"><span class="font-bold text-blue-600">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
<li class="flex gap-2"><span class="font-bold text-blue-600">2.</span> <strong>index.html</strong> im Browser öffnen.</li>
<li class="flex gap-2"><span class="font-bold text-blue-600">3.</span> Kein Internet nötig — alles ist lokal gespeichert.</li>
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-3 text-lg font-bold text-gray-900 dark:text-gray-100">Hinweis zum HTML-Viewer</h2>
<ol class="mb-4 space-y-2 text-sm text-gray-700 dark:text-gray-300">
<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">2.</span> <strong>index.html</strong> im Browser öffnen.</li>
<li class="flex gap-2"><span class="font-bold text-blue-600 dark:text-blue-400">3.</span> Kein Internet nötig — alles ist lokal gespeichert.</li>
</ol>
<p class="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
<p class="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:bg-amber-950/30 dark:text-amber-300">
Tipp: Am besten im WLAN herunterladen — die Datei kann mehrere GB groß sein.
</p>
<div class="flex gap-2">
<button
onclick={() => (showHtmlGuide = false)}
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50"
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Abbrechen
</button>
<button
onclick={confirmHtmlDownload}
class="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700"
class="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Herunterladen
</button>
@@ -137,48 +137,48 @@
</div>
{/if}
<div class="min-h-screen bg-gray-50 pb-24">
<div class="border-b border-gray-200 bg-white">
<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="mx-auto flex max-w-lg items-center px-4 py-4">
<h1 class="text-xl font-bold text-gray-900">Export</h1>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Export</h1>
</div>
</div>
<div class="mx-auto max-w-lg space-y-4 p-4">
{#if loading}
<div class="py-16 text-center text-gray-400">Laden…</div>
<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
{:else if !status?.released}
<div class="rounded-xl border border-gray-200 bg-white p-6 text-center">
<svg class="mx-auto mb-3 h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<div class="rounded-xl border border-gray-200 bg-white p-6 text-center dark:border-gray-700 dark:bg-gray-800">
<svg class="mx-auto mb-3 h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
<p class="font-medium text-gray-700">Export noch nicht verfügbar</p>
<p class="mt-1 text-sm text-gray-500">Schau nach der Veranstaltung noch einmal vorbei.</p>
<p class="font-medium text-gray-700 dark:text-gray-300">Export noch nicht verfügbar</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Schau nach der Veranstaltung noch einmal vorbei.</p>
</div>
{:else if status}
<p class="text-sm text-gray-500">Wähle dein bevorzugtes Format:</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Wähle dein bevorzugtes Format:</p>
<!-- ZIP 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-start justify-between gap-4">
<div class="min-w-0">
<h2 class="font-semibold text-gray-900">ZIP-Archiv</h2>
<p class="mt-0.5 text-sm text-gray-500">Alle Original-Fotos und Videos in strukturierten Ordnern.</p>
<p class="mt-1 text-xs {status.zip.status === 'done' ? 'text-green-600' : status.zip.status === 'failed' ? 'text-red-500' : 'text-gray-400'}">
<h2 class="font-semibold text-gray-900 dark:text-gray-100">ZIP-Archiv</h2>
<p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">Alle Original-Fotos und Videos in strukturierten Ordnern.</p>
<p class="mt-1 text-xs {status.zip.status === 'done' ? 'text-green-600 dark:text-green-400' : status.zip.status === 'failed' ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'}">
{statusText(status.zip)}
</p>
</div>
<button
onclick={downloadZip}
disabled={status.zip.status !== 'done'}
class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.zip.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}"
class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.zip.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400' : 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'}"
>
Download
</button>
</div>
{#if status.zip.status === 'running'}
<div class="mt-3">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {status.zip.progress_pct}%"></div>
</div>
</div>
@@ -186,26 +186,26 @@
</div>
<!-- HTML 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-start justify-between gap-4">
<div class="min-w-0">
<h2 class="font-semibold text-gray-900">HTML-Viewer</h2>
<p class="mt-0.5 text-sm text-gray-500">Schöne Offline-Galerie mit Filterung, Kommentaren und Likes — kein Internet nötig.</p>
<p class="mt-1 text-xs {status.html.status === 'done' ? 'text-green-600' : status.html.status === 'failed' ? 'text-red-500' : 'text-gray-400'}">
<h2 class="font-semibold text-gray-900 dark:text-gray-100">HTML-Viewer</h2>
<p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">Schöne Offline-Galerie mit Filterung, Kommentaren und Likes — kein Internet nötig.</p>
<p class="mt-1 text-xs {status.html.status === 'done' ? 'text-green-600 dark:text-green-400' : status.html.status === 'failed' ? 'text-red-500 dark:text-red-400' : 'text-gray-400 dark:text-gray-500'}">
{statusText(status.html)}
</p>
</div>
<button
onclick={downloadHtml}
disabled={status.html.status !== 'done'}
class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.html.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}"
class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.html.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400' : 'bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'}"
>
Download
</button>
</div>
{#if status.html.status === 'running'}
<div class="mt-3">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {status.html.progress_pct}%"></div>
</div>
</div>

175
frontend/src/routes/feed/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { getToken } from '$lib/auth';
import { getToken, getUserId } from '$lib/auth';
import { api } from '$lib/api';
import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
import { onMount, onDestroy } from 'svelte';
@@ -9,7 +9,9 @@
import HashtagChips from '$lib/components/HashtagChips.svelte';
import LightboxModal from '$lib/components/LightboxModal.svelte';
import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
import type { FeedUpload, FeedResponse, HashtagCount } from '$lib/types';
import ContextSheet, { type ContextAction } from '$lib/components/ContextSheet.svelte';
import { refreshQuota } from '$lib/quota-store';
import type { FeedUpload, FeedResponse, HashtagCount, DeltaResponse } from '$lib/types';
let uploads = $state<FeedUpload[]>([]);
let hashtags = $state<HashtagCount[]>([]);
@@ -31,6 +33,49 @@
let unsubscribers: (() => void)[] = [];
// Long-press / context-sheet state for post actions
let contextTarget = $state<FeedUpload | null>(null);
const myUserId = getUserId();
const contextActions = $derived<ContextAction[]>(buildContextActions(contextTarget));
function buildContextActions(target: FeedUpload | null): ContextAction[] {
if (!target) return [];
const actions: ContextAction[] = [
{
label: 'Original anzeigen',
icon: '⤓',
onClick: () => {
window.open(`/api/v1/upload/${target.id}/original`, '_blank');
}
}
];
if (target.user_id === myUserId) {
actions.unshift({
label: 'Löschen',
icon: '🗑',
tone: 'danger',
onClick: () => deleteUpload(target.id)
});
}
return actions;
}
function openContextSheet(upload: FeedUpload) {
contextTarget = upload;
}
async function deleteUpload(id: string) {
if (!confirm('Diesen Beitrag wirklich löschen?')) return;
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
}
}
// ── Autocomplete derived from loaded uploads (no extra API calls) ────────
let allTags = $derived.by(() => {
const freq = new Map<string, number>();
@@ -105,8 +150,31 @@
} catch { /* ignore */ }
}),
onSseEvent('upload-processed', () => loadFeed(true)),
onSseEvent('upload-deleted', (data) => {
try {
const payload = JSON.parse(data) as { upload_id: string };
uploads = uploads.filter((u) => u.id !== payload.upload_id);
if (selectedUpload?.id === payload.upload_id) selectedUpload = null;
} catch { /* ignore */ }
}),
onSseEvent('like-update', () => loadFeed(true)),
onSseEvent('new-comment', () => loadFeed(true))
onSseEvent('new-comment', () => loadFeed(true)),
// 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) => {
try {
const delta = JSON.parse(data) as DeltaResponse;
if (delta.uploads.length) {
const seen = new Set(uploads.map((u) => u.id));
const fresh = delta.uploads.filter((u) => !seen.has(u.id));
if (fresh.length) uploads = [...fresh, ...uploads];
}
if (delta.deleted_ids.length) {
const dead = new Set(delta.deleted_ids);
uploads = uploads.filter((u) => !dead.has(u.id));
}
} catch { /* ignore */ }
})
);
if (sentinel) {
@@ -214,34 +282,49 @@
}
</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">
<!-- Sticky header -->
<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur">
<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="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
<h1 class="text-lg font-bold text-gray-900">Galerie</h1>
<h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Galerie</h1>
<!-- List / Grid toggle -->
<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
<div class="flex items-center gap-2">
<!-- Diashow entry — tablet/desktop only (mobile uses the Account page tile). -->
<button
onclick={() => switchView('list')}
class="rounded-md p-1.5 transition-colors {viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
aria-label="Listenansicht"
onclick={() => goto('/diashow')}
class="hidden rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100 sm:inline-flex"
aria-label="Diashow starten"
title="Diashow"
>
<!-- bars-3 -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<button
onclick={() => switchView('grid')}
class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
aria-label="Rasteransicht"
>
<!-- squares-2x2 -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
<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>
</button>
<!-- List / Grid toggle -->
<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800">
<button
onclick={() => switchView('list')}
class="rounded-md p-1.5 transition-colors {viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-100' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
aria-label="Listenansicht"
>
<!-- bars-3 -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<button
onclick={() => switchView('grid')}
class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-gray-100' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
aria-label="Rasteransicht"
>
<!-- squares-2x2 -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
</svg>
</button>
</div>
</div>
</div>
@@ -256,8 +339,8 @@
{#if viewMode === 'grid'}
<div class="mx-auto max-w-2xl px-4 pb-3">
<div class="relative">
<div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200">
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200 dark:border-gray-700 dark:bg-gray-800 dark:focus-within:border-blue-500 dark:focus-within:bg-gray-800">
<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
<input
@@ -266,12 +349,12 @@
bind:value={searchQuery}
onfocus={() => (showAutocomplete = true)}
onblur={() => setTimeout(() => (showAutocomplete = false), 150)}
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
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"
/>
{#if searchQuery}
<button
onclick={() => { searchQuery = ''; }}
class="shrink-0 text-gray-400 hover:text-gray-600"
class="shrink-0 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
aria-label="Suche löschen"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -283,20 +366,20 @@
<!-- Autocomplete dropdown -->
{#if showAutocomplete && suggestions.length > 0}
<div class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
<div class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
{#each suggestions as item}
<button
class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50"
class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-800"
onmousedown={() => selectSuggestion(item)}
>
{#if item.type === 'user'}
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<svg class="h-4 w-4 shrink-0 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="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
<span class="font-medium text-gray-900">{item.value}</span>
<span class="font-medium text-gray-900 dark:text-gray-100">{item.value}</span>
{:else}
<span class="text-blue-500 font-medium">#</span>
<span class="font-medium text-gray-900">{item.value}</span>
<span class="font-medium text-blue-500 dark:text-blue-400">#</span>
<span class="font-medium text-gray-900 dark:text-gray-100">{item.value}</span>
{/if}
</button>
{/each}
@@ -308,9 +391,9 @@
{#if activeFilters.length > 0}
<div class="mt-2 flex flex-wrap items-center gap-1.5">
{#each activeFilters as filter}
<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">
<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
{filter.type === 'tag' ? '#' : ''}{filter.value}
<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900" aria-label="Filter entfernen">
<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100" aria-label="Filter entfernen">
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
@@ -318,7 +401,7 @@
</span>
{/each}
{#if activeFilters.length >= 2}
<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600">
<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
Alle löschen
</button>
{/if}
@@ -331,8 +414,8 @@
<!-- Content -->
{#if uploads.length === 0}
<div class="py-20 text-center">
<p class="text-lg text-gray-400">Noch keine Fotos.</p>
<p class="mt-1 text-sm text-gray-400">Tippe auf den Plus-Button unten!</p>
<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>
</div>
{:else if viewMode === 'list'}
<!-- List view: chronological full-width cards -->
@@ -340,9 +423,11 @@
{#each uploads as upload (upload.id)}
<FeedListCard
{upload}
isOwn={upload.user_id === myUserId}
onlike={handleLike}
oncomment={openComments}
onselect={(u) => (selectedUpload = u)}
oncontextmenu={openContextSheet}
/>
{/each}
</div>
@@ -351,8 +436,8 @@
<div class="mx-auto max-w-2xl">
{#if displayUploads.length === 0}
<div class="py-16 text-center">
<p class="text-sm text-gray-400">Keine Treffer für die gewählten Filter.</p>
<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline">Filter zurücksetzen</button>
<p class="text-sm text-gray-400 dark:text-gray-500">Keine Treffer für die gewählten Filter.</p>
<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline dark:text-blue-400">Filter zurücksetzen</button>
</div>
{:else}
<FeedGrid
@@ -360,6 +445,7 @@
onlike={handleLike}
oncomment={openComments}
onselect={(u) => (selectedUpload = u)}
oncontextmenu={openContextSheet}
threeCol={true}
/>
{/if}
@@ -371,7 +457,7 @@
<div bind:this={sentinel} class="h-4"></div>
{#if loadingMore}
<div class="py-4 text-center">
<div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
<div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400"></div>
</div>
{/if}
</div>
@@ -386,5 +472,12 @@
/>
{/if}
<!-- Context sheet for post long-press / kebab tap -->
<ContextSheet
open={contextTarget !== null}
actions={contextActions}
onClose={() => (contextTarget = null)}
/>
<!-- First-visit onboarding guide -->
<OnboardingGuide />

205
frontend/src/routes/host/+page.svelte
View File

@@ -45,10 +45,24 @@
let banHideUploads = $state(false);
let banSubmitting = $state(false);
// PIN reset modal state. `pinModal` holds the freshly-issued plaintext PIN; it is
// shown once and forgotten on close.
let pinResetTarget = $state<UserSummary | null>(null);
let pinResetSubmitting = $state(false);
let pinModal = $state<{ name: string; pin: string } | null>(null);
let toast = $state<string | null>(null);
const myRole = getRole();
/** Mirrors backend `handlers::host::reset_user_pin` authorisation rules. */
function canResetPinFor(target: UserSummary): boolean {
if (target.role === 'admin') return false;
if (myRole === 'admin') return true;
if (myRole === 'host') return target.role === 'guest';
return false;
}
onMount(async () => {
const token = getToken();
const role = getRole();
@@ -155,6 +169,30 @@
}
}
function askResetPin(user: UserSummary) {
pinResetTarget = user;
}
async function confirmResetPin() {
if (!pinResetTarget) return;
pinResetSubmitting = true;
try {
const res = await api.post<{ pin: string }>(`/host/users/${pinResetTarget.id}/pin-reset`);
pinModal = { name: pinResetTarget.display_name, pin: res.pin };
pinResetTarget = null;
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : 'Fehler beim Zurücksetzen.');
} finally {
pinResetSubmitting = false;
}
}
function copyPinModal() {
if (!pinModal) return;
navigator.clipboard.writeText(pinModal.pin);
showToast('PIN kopiert.');
}
function formatBytes(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -162,33 +200,75 @@
}
</script>
<!-- PIN reset confirmation -->
{#if pinResetTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">PIN zurücksetzen</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Eine neue PIN für <strong>{pinResetTarget.display_name}</strong> wird erzeugt. Die alte PIN funktioniert dann nicht mehr.
</p>
<div class="flex gap-2">
<button onclick={() => (pinResetTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">Abbrechen</button>
<button onclick={confirmResetPin} disabled={pinResetSubmitting} class="flex-1 rounded-lg bg-amber-500 py-2 text-sm font-medium text-white hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-500 dark:hover:bg-amber-400">
{pinResetSubmitting ? 'Wird erzeugt…' : 'Neue PIN erzeugen'}
</button>
</div>
</div>
</div>
{/if}
<!-- One-time PIN display modal -->
{#if pinModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Neue PIN für {pinModal.name}</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Zeige diese PIN dem Benutzer. Sie wird nur einmal angezeigt — beim Schließen wird sie verworfen.
</p>
<div class="mb-4 flex items-center justify-between rounded-lg bg-amber-50 px-4 py-3 dark:bg-amber-950/30">
<span class="font-mono text-3xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{pinModal.pin}</span>
<button onclick={copyPinModal} class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60">
Kopieren
</button>
</div>
<button
onclick={() => (pinModal = null)}
class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Schließen
</button>
</div>
</div>
{/if}
<!-- Ban modal -->
{#if banTarget}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
<p class="mb-4 text-sm text-gray-600">
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
<h2 class="mb-1 text-lg font-bold text-gray-900 dark:text-gray-100">Benutzer sperren</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
</p>
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3 dark:border-gray-700">
<input
type="checkbox"
bind:checked={banHideUploads}
class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500"
class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500 dark:border-gray-600"
/>
<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
<span class="text-sm text-gray-700 dark:text-gray-300">Uploads aus der Galerie ausblenden</span>
</label>
<div class="flex gap-2">
<button
onclick={() => (banTarget = null)}
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50"
class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Abbrechen
</button>
<button
onclick={confirmBan}
disabled={banSubmitting}
class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 dark:bg-red-500 dark:hover:bg-red-400"
>
{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
</button>
@@ -199,18 +279,18 @@
<!-- Toast -->
{#if toast}
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">
{toast}
</div>
{/if}
<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-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"
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"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -218,9 +298,9 @@
</svg>
</button>
<div class="min-w-0">
<h1 class="text-xl font-bold text-gray-900">Host-Dashboard</h1>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Host-Dashboard</h1>
{#if event}
<p class="truncate text-sm text-gray-500">{event.name}</p>
<p class="truncate text-sm text-gray-500 dark:text-gray-400">{event.name}</p>
{/if}
</div>
</div>
@@ -228,71 +308,71 @@
<div class="mx-auto max-w-3xl space-y-3 p-4">
{#if loading}
<div class="py-16 text-center text-gray-400">Laden…</div>
<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 class="rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-300">{error}</div>
{:else if event}
<!-- ── Statistiken ─────────────────────────────────────────────── -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<button
onclick={() => (statsOpen = !statsOpen)}
class="flex w-full items-center justify-between px-5 py-4"
>
<h2 class="font-semibold text-gray-900">Statistiken</h2>
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Statistiken</h2>
<svg
class="h-5 w-5 text-gray-400 transition-transform duration-200 {statsOpen ? 'rotate-180' : ''}"
class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {statsOpen ? 'rotate-180' : ''}"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="overflow-hidden transition-[max-height] duration-200 {statsOpen ? 'max-h-[500px]' : 'max-h-0'}">
<div class="grid grid-cols-2 gap-3 border-t border-gray-100 p-4 sm:grid-cols-4">
<div class="rounded-xl bg-gray-50 p-4 text-center">
<p class="text-2xl font-bold text-gray-900">{users.length}</p>
<p class="mt-0.5 text-xs text-gray-500">Gäste</p>
<div class="grid grid-cols-2 gap-3 border-t border-gray-100 p-4 dark:border-gray-700 sm:grid-cols-4">
<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{users.length}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Gäste</p>
</div>
<div class="rounded-xl bg-gray-50 p-4 text-center">
<p class="text-2xl font-bold text-gray-900">{users.reduce((s, u) => s + u.upload_count, 0)}</p>
<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
<p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{users.reduce((s, u) => s + u.upload_count, 0)}</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
</div>
<div class="rounded-xl bg-gray-50 p-4 text-center">
<p class="text-2xl font-bold {event.uploads_locked ? 'text-red-600' : 'text-green-600'}">
<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
<p class="text-2xl font-bold {event.uploads_locked ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}">
{event.uploads_locked ? 'Gesperrt' : 'Offen'}
</p>
<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Uploads</p>
</div>
<div class="rounded-xl bg-gray-50 p-4 text-center">
<p class="text-2xl font-bold {event.export_released ? 'text-blue-600' : 'text-gray-400'}">
<div class="rounded-xl bg-gray-50 p-4 text-center dark:bg-gray-900/60">
<p class="text-2xl font-bold {event.export_released ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-gray-500'}">
{event.export_released ? 'Ja' : 'Nein'}
</p>
<p class="mt-0.5 text-xs text-gray-500">Freigegeben</p>
<p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">Freigegeben</p>
</div>
</div>
</div>
</div>
<!-- ── Event-Einstellungen ─────────────────────────────────────── -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<button
onclick={() => (settingsOpen = !settingsOpen)}
class="flex w-full items-center justify-between px-5 py-4"
>
<h2 class="font-semibold text-gray-900">Event-Einstellungen</h2>
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Event-Einstellungen</h2>
<svg
class="h-5 w-5 text-gray-400 transition-transform duration-200 {settingsOpen ? 'rotate-180' : ''}"
class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {settingsOpen ? 'rotate-180' : ''}"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="overflow-hidden transition-[max-height] duration-200 {settingsOpen ? 'max-h-[500px]' : 'max-h-0'}">
<div class="flex flex-wrap gap-3 border-t border-gray-100 p-5">
<div class="flex flex-wrap gap-3 border-t border-gray-100 p-5 dark:border-gray-700">
<button
onclick={toggleEventLock}
class="rounded-lg px-4 py-2 text-sm font-medium transition
{event.uploads_locked ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-amber-500 text-white hover:bg-amber-600'}"
{event.uploads_locked ? 'bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400' : 'bg-amber-500 text-white hover:bg-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400'}"
>
{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
</button>
@@ -300,7 +380,7 @@
onclick={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' : 'bg-blue-600 text-white hover:bg-blue-700'}"
{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'}"
>
{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
</button>
@@ -309,63 +389,63 @@
</div>
<!-- ── Nutzerverwaltung ───────────────────────────────────────── -->
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<button
onclick={() => (usersOpen = !usersOpen)}
class="flex w-full items-center justify-between px-5 py-4"
>
<h2 class="font-semibold text-gray-900">Nutzerverwaltung</h2>
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Nutzerverwaltung</h2>
<svg
class="h-5 w-5 text-gray-400 transition-transform duration-200 {usersOpen ? 'rotate-180' : ''}"
class="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform duration-200 {usersOpen ? 'rotate-180' : ''}"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</button>
<div class="overflow-hidden transition-[max-height] duration-300 {usersOpen ? 'max-h-[9999px]' : 'max-h-0'}">
<div class="border-t border-gray-100">
<div class="border-t border-gray-100 dark:border-gray-700">
<!-- Search -->
<div class="px-4 py-3">
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 dark:border-gray-700 dark:bg-gray-900">
<svg class="h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<input
type="search"
placeholder="Nutzer suchen…"
bind:value={userSearch}
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
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"
/>
</div>
</div>
{#if filteredUsers.length === 0}
<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
<p class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">Keine Treffer.</p>
{:else}
<div class="divide-y divide-gray-100">
<div class="divide-y divide-gray-100 dark:divide-gray-700">
{#each filteredUsers as user}
<div class="flex items-center gap-3 px-5 py-3">
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-1.5">
<span class="font-medium text-gray-900">{user.display_name}</span>
<span class="font-medium text-gray-900 dark:text-gray-100">{user.display_name}</span>
{#if user.role === 'host'}
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">Host</span>
{:else if user.role === 'admin'}
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">Admin</span>
{/if}
{#if user.is_banned}
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/40 dark:text-red-200">Gesperrt</span>
{/if}
</div>
<p class="text-xs text-gray-400">
<p class="text-xs text-gray-400 dark:text-gray-500">
{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
</p>
</div>
<div class="flex shrink-0 gap-1.5">
<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"
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>
@@ -373,22 +453,31 @@
{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
<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"
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' && myRole === 'admin'}
{#if user.role === 'host'}
<!-- Hosts may demote other Hosts (never themselves); backend enforces. -->
<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"
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}
{#if canResetPinFor(user)}
<button
onclick={() => askResetPin(user)}
class="rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700 hover:bg-amber-100 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
>
PIN zurücksetzen
</button>
{/if}
<button
onclick={() => openBanModal(user)}
class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100"
class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60"
>
Sperren
</button>

47
frontend/src/routes/join/+page.svelte
View File

@@ -86,20 +86,20 @@
}
</script>
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
<div class="w-full max-w-sm">
{#if nameTaken}
<!-- Name-taken state: sign in with PIN or choose a different name -->
<div class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4">
<p class="font-semibold text-amber-900">„{takenName}" ist bereits vergeben.</p>
<p class="mt-1 text-sm text-amber-800">
<div class="mb-5 rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800/60 dark:bg-amber-950/30">
<p class="font-semibold text-amber-900 dark:text-amber-200">„{takenName}" ist bereits vergeben.</p>
<p class="mt-1 text-sm text-amber-800 dark:text-amber-300/90">
Wähle einen anderen Namen, z.&nbsp;B. einen Spitznamen oder füge deinen Nachnamen hinzu
(„{takenName} M." oder „{takenName} aus Berlin").
</p>
</div>
<p class="mb-3 text-sm font-medium text-gray-700">
<p class="mb-3 text-sm font-medium text-gray-700 dark:text-gray-300">
Falls du das bist, melde dich mit deinem PIN an:
</p>
@@ -111,17 +111,17 @@
maxlength={4}
inputmode="numeric"
pattern="[0-9]*"
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-2xl font-mono tracking-widest focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-center text-2xl font-mono tracking-widest text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
/>
{#if recoveryError}
<p class="mb-3 text-sm text-red-600">{recoveryError}</p>
<p class="mb-3 text-sm text-red-600 dark:text-red-400">{recoveryError}</p>
{/if}
<button
type="submit"
disabled={recoveryLoading || recoveryPin.length < 4}
class="mb-3 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
class="mb-3 w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{recoveryLoading ? 'Wird angemeldet...' : 'Anmelden'}
</button>
@@ -129,15 +129,15 @@
<button
onclick={tryDifferentName}
class="w-full rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition hover:bg-gray-50"
class="w-full rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Anderen Namen wählen
</button>
{:else}
<!-- Normal join form -->
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Willkommen!</h1>
<p class="mb-6 text-center text-gray-600">Gib deinen Namen ein, um dem Event beizutreten.</p>
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Willkommen!</h1>
<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen ein, um dem Event beizutreten.</p>
<form onsubmit={(e) => { e.preventDefault(); handleJoin(); }}>
<input
@@ -145,25 +145,24 @@
bind:value={displayName}
placeholder="Dein Name"
maxlength={50}
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
/>
{#if error}
<p class="mb-3 text-sm text-red-600">{error}</p>
<p class="mb-3 text-sm text-red-600 dark:text-red-400">{error}</p>
{/if}
<button
type="submit"
disabled={loading || !displayName.trim()}
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{loading ? 'Wird geladen...' : 'Beitreten'}
</button>
</form>
<p class="mt-4 text-center text-sm text-gray-500">
Schon dabei?
<a href="/recover" class="text-blue-600 hover:underline">Mit PIN wiederherstellen</a>
<p class="mt-4 text-center text-sm">
<a href="/recover" class="text-blue-600 hover:underline dark:text-blue-400">Ich habe bereits einen Account</a>
</p>
{/if}
@@ -172,17 +171,17 @@
{#if showPinModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg">
<h2 class="mb-2 text-xl font-bold text-gray-900">Dein Wiederherstellungs-PIN</h2>
<p class="mb-4 text-sm text-gray-600">
<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-gray-900">
<h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">Dein Wiederherstellungs-PIN</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">
Merke dir diesen PIN! Du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen.
</p>
<div class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4">
<span class="text-4xl font-mono font-bold tracking-widest text-gray-900">{pin}</span>
<div class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
<span class="text-4xl font-mono font-bold tracking-widest text-gray-900 dark:text-gray-100">{pin}</span>
<button
onclick={copyPin}
class="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300"
class="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
>
{copied ? 'Kopiert!' : 'Kopieren'}
</button>
@@ -190,7 +189,7 @@
<button
onclick={goToFeed}
class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700"
class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
>
Weiter zur Galerie
</button>

18
frontend/src/routes/recover/+page.svelte
View File

@@ -39,10 +39,10 @@
}
</script>
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-gray-950">
<div class="w-full max-w-sm">
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900">Konto wiederherstellen</h1>
<p class="mb-6 text-center text-gray-600">Gib deinen Namen und deinen PIN ein.</p>
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>
<p class="mb-6 text-center text-gray-600 dark:text-gray-400">Gib deinen Namen und deinen PIN ein.</p>
<form onsubmit={(e) => { e.preventDefault(); handleRecover(); }}>
<input
@@ -50,7 +50,7 @@
bind:value={displayName}
placeholder="Dein Name"
maxlength={50}
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-lg focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
/>
<input
type="text"
@@ -59,25 +59,25 @@
maxlength={4}
inputmode="numeric"
pattern="[0-9]*"
class="mb-3 w-full rounded-lg border border-gray-300 px-4 py-3 text-center text-2xl font-mono tracking-widest focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
class="mb-3 w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-center text-2xl font-mono tracking-widest text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500"
/>
{#if error}
<p class="mb-3 text-sm text-red-600">{error}</p>
<p class="mb-3 text-sm text-red-600 dark:text-red-400">{error}</p>
{/if}
<button
type="submit"
disabled={loading || !displayName.trim() || pin.length < 4}
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
class="w-full rounded-lg bg-blue-600 px-4 py-3 text-lg font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{loading ? 'Wird geladen...' : 'Wiederherstellen'}
</button>
</form>
<p class="mt-4 text-center text-sm text-gray-500">
<p class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
Noch kein Konto?
<a href="/join" class="text-blue-600 hover:underline">Neu beitreten</a>
<a href="/join" class="text-blue-600 hover:underline dark:text-blue-400">Neu beitreten</a>
</p>
</div>
</div>

90
frontend/src/routes/upload/+page.svelte
View File

@@ -6,6 +6,7 @@
import { pendingFiles, pendingCaption, clearPending } from '$lib/pending-upload-store';
import { get } from 'svelte/store';
import { onMount, onDestroy } from 'svelte';
import { quotaStore, refreshQuota } from '$lib/quota-store';
import type { PendingFile } from '$lib/pending-upload-store';
interface StagedFile extends PendingFile {
@@ -17,6 +18,8 @@
let submitting = $state(false);
let captionEl: HTMLTextAreaElement;
const MAX_CAPTION_LENGTH = 2000;
// Quick-tag chips derived from caption as the user types
let captionTags = $derived.by(() => {
const matches = [...caption.matchAll(/#(\w+)/g)];
@@ -30,6 +33,7 @@
return;
}
loadQueue();
void refreshQuota();
// Pull staged files from the pending store (written by UploadSheet)
const pf = get(pendingFiles);
@@ -39,6 +43,16 @@
// 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();
};
window.addEventListener('beforeunload', handleBeforeUnload);
return () => {
window.removeEventListener('beforeunload', handleBeforeUnload);
};
});
onDestroy(() => {
@@ -58,9 +72,11 @@
async function handleSubmit() {
if (stagedFiles.length === 0 || submitting) return;
if (caption.length > MAX_CAPTION_LENGTH) return;
submitting = true;
const hashtagsString = captionTags.join(',');
for (const sf of stagedFiles) {
await addToQueue(sf.file, caption, '');
await addToQueue(sf.file, caption, hashtagsString);
}
clearPending();
goto('/feed');
@@ -69,28 +85,42 @@
function isVideo(file: File): boolean {
return file.type.startsWith('video/');
}
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 totalStagedBytes = $derived(stagedFiles.reduce((sum, sf) => sum + sf.file.size, 0));
const quotaPercent = $derived(
$quotaStore.limit_bytes && $quotaStore.limit_bytes > 0
? Math.min(100, (($quotaStore.used_bytes + totalStagedBytes) / $quotaStore.limit_bytes) * 100)
: 0
);
</script>
<!-- Full-screen composer — bottom nav is suppressed -->
<div class="flex min-h-screen flex-col bg-white">
<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">
<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"
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"
>
<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>
<h1 class="text-base font-semibold text-gray-900">Neuer Beitrag</h1>
<h1 class="text-base font-semibold text-gray-900 dark:text-gray-100">Neuer Beitrag</h1>
<!-- Submit button in header for desktop convenience -->
<button
onclick={handleSubmit}
disabled={stagedFiles.length === 0 || submitting}
class="rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white transition
hover:bg-blue-700 disabled:opacity-40"
hover:bg-blue-700 disabled:opacity-40 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{submitting ? 'Wird hochgeladen…' : 'Hochladen'}
</button>
@@ -101,9 +131,9 @@
{#if stagedFiles.length > 0}
<div class="flex gap-2 overflow-x-auto px-4 py-3 scrollbar-none">
{#each stagedFiles as sf, i}
<div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100">
<div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
{#if isVideo(sf.file)}
<div class="flex h-full w-full items-center justify-center bg-gray-800">
<div class="flex h-full w-full items-center justify-center bg-gray-800 dark:bg-gray-700">
<svg class="h-7 w-7 text-white/70" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
@@ -123,20 +153,20 @@
</div>
{/each}
</div>
<div class="border-b border-gray-100"></div>
<div class="border-b border-gray-100 dark:border-gray-800"></div>
{:else}
<!-- No files: prompt to go back and pick some -->
<div class="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
<svg class="h-16 w-16 text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<svg class="h-16 w-16 text-gray-200 dark:text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M9 9.75h.008v.008H9V9.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
</svg>
<div>
<p class="font-medium text-gray-500">Keine Dateien ausgewählt</p>
<p class="mt-1 text-sm text-gray-400">Geh zurück und tippe auf den Plus-Button.</p>
<p class="font-medium text-gray-500 dark:text-gray-400">Keine Dateien ausgewählt</p>
<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Geh zurück und tippe auf den Plus-Button.</p>
</div>
<button
onclick={cancel}
class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
>
Zurück
</button>
@@ -148,34 +178,60 @@
<textarea
bind:this={captionEl}
bind:value={caption}
maxlength={MAX_CAPTION_LENGTH}
placeholder="Beschreibung hinzufügen… (#hashtags möglich)"
rows="4"
class="w-full resize-none rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900
placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-200"
placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-200
dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:bg-gray-800"
></textarea>
<div class="mt-1 text-xs text-gray-500 text-right dark:text-gray-400">
{caption.length} / {MAX_CAPTION_LENGTH}
</div>
</div>
<!-- Quick-tag chips (derived from typed caption) -->
{#if captionTags.length > 0}
<div class="flex flex-wrap gap-1.5 px-4 pt-2">
{#each captionTags as tag}
<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-600">
<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-600 dark:bg-blue-950/40 dark:text-blue-300">
#{tag}
</span>
{/each}
</div>
{/if}
<!-- Per-user quota — hidden when admin disabled enforcement -->
{#if $quotaStore.enabled && $quotaStore.limit_bytes != null}
<div class="px-4 pt-3 text-xs text-gray-500 dark:text-gray-400">
<div class="flex items-center justify-between">
<span>Speicher: {formatBytes($quotaStore.used_bytes + totalStagedBytes)} / {formatBytes($quotaStore.limit_bytes)}</span>
<span class:text-amber-600={quotaPercent >= 80} class:dark:text-amber-400={quotaPercent >= 80} class:text-red-600={quotaPercent >= 95} class:dark:text-red-400={quotaPercent >= 95}>
{Math.round(quotaPercent)}%
</span>
</div>
<div class="mt-1 h-1.5 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
<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>
</div>
{/if}
<div class="h-8"></div>
</div>
<!-- Sticky submit button at bottom (mobile-primary) -->
<div class="border-t border-gray-100 px-4 py-3">
<div class="border-t border-gray-100 px-4 py-3 dark:border-gray-800">
<button
onclick={handleSubmit}
disabled={stagedFiles.length === 0 || submitting}
class="flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 py-3.5 text-sm font-semibold
text-white transition hover:bg-blue-700 active:scale-[0.98] disabled:opacity-40"
text-white transition hover:bg-blue-700 active:scale-[0.98] disabled:opacity-40 dark:bg-blue-500 dark:hover:bg-blue-400"
>
{#if submitting}
<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">