feat: mobile-first UI redesign (v0.15.0)
- Persistent bottom tab bar (Feed · FAB · Account) on all authenticated pages - Upload FAB triggers bottom sheet (Galerie / Kamera) → navigates to composer - Upload page redesigned as full-screen composer with thumbnail strip, textarea, quick-tag chips, sticky submit button; bottom nav suppressed while composing - Slim upload progress bar above bottom nav driven by queue state - Feed: list/grid view toggle; list = chronological full-width FeedListCard; grid = 3-col with search bar, autocomplete from loaded posts, filter chips - Account page: role-gated dashboard links (Host / Admin); Konto section with leave-confirm bottom sheet; no more per-page header nav icons - Host dashboard: back arrow, collapsible sections, 2-col stats, user search - Admin dashboard: back arrow, inner tab bar (Stats/Config/Export/Nutzer), stacked config inputs with sticky save, new Nutzer tab - BottomNav hidden on unauthenticated pages via isAuthenticated store - FeedGrid: threeCol prop; OnboardingGuide upload step updated for FAB - Concept docs added to docs/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -2,15 +2,14 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { getToken, getPin, getDisplayName, getExpiry, getRole, clearAuth } from '$lib/auth';
|
||||
import { api } from '$lib/api';
|
||||
import { browser } from '$app/environment';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
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 copied = $state(false);
|
||||
let pinCopied = $state(false);
|
||||
let leaveConfirmOpen = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
if (!getToken()) {
|
||||
@@ -55,31 +54,37 @@
|
||||
default: return 'bg-blue-100 text-blue-700';
|
||||
}
|
||||
}
|
||||
|
||||
function avatarColor(name: string | null): string {
|
||||
if (!name) return 'bg-gray-100 text-gray-500';
|
||||
const COLORS = ['bg-blue-100 text-blue-700','bg-purple-100 text-purple-700','bg-green-100 text-green-700','bg-amber-100 text-amber-700','bg-rose-100 text-rose-700'];
|
||||
let hash = 0;
|
||||
for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
|
||||
return COLORS[hash % COLORS.length];
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<div class="min-h-screen bg-gray-50 pb-24">
|
||||
<!-- Header -->
|
||||
<div class="border-b border-gray-200 bg-white">
|
||||
<div class="mx-auto flex max-w-lg items-center justify-between px-4 py-4">
|
||||
<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>
|
||||
<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-lg space-y-4 p-4">
|
||||
<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="flex items-center gap-3">
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-xl font-bold text-blue-600">
|
||||
{#if displayName}
|
||||
{displayName[0].toUpperCase()}
|
||||
{:else}
|
||||
?
|
||||
{/if}
|
||||
<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
|
||||
{avatarColor(displayName)}"
|
||||
>
|
||||
{displayName ? displayName[0].toUpperCase() : '?'}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-gray-900">{displayName ?? 'Unbekannt'}</p>
|
||||
<span class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {roleColor(role)}">
|
||||
<div class="min-w-0">
|
||||
<p class="truncate text-lg font-bold text-gray-900">{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>
|
||||
@@ -89,6 +94,43 @@
|
||||
{/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>
|
||||
<a
|
||||
href="/host"
|
||||
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-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">
|
||||
<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"
|
||||
>
|
||||
<!-- Shield icon -->
|
||||
<svg class="h-5 w-5 text-blue-600" 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/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>
|
||||
@@ -112,26 +154,70 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Recovery hint -->
|
||||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||||
<h2 class="mb-1 font-semibold text-gray-900">Gerät wechseln?</h2>
|
||||
<p class="text-sm text-gray-600">
|
||||
Auf einem anderen Gerät kannst du dein Konto mit deinem Namen und PIN wiederherstellen.
|
||||
</p>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Recover / device switch -->
|
||||
<a
|
||||
href="/recover"
|
||||
class="mt-3 inline-block text-sm font-medium text-blue-600 hover:underline"
|
||||
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
|
||||
>
|
||||
Zur Wiederherstellungs-Seite →
|
||||
<svg class="h-5 w-5 text-gray-400" 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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Logout -->
|
||||
<button
|
||||
onclick={handleLogout}
|
||||
class="w-full rounded-xl border border-red-200 bg-white py-3 text-sm font-medium text-red-600 transition hover:bg-red-50"
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
<!-- 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"
|
||||
>
|
||||
<svg class="h-5 w-5 text-red-500" 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>
|
||||
</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">
|
||||
<div
|
||||
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6"
|
||||
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"></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.
|
||||
</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"
|
||||
>
|
||||
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"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user