feat(ui): v0.16 features + dark mode across every page
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
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user