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:
@@ -3,9 +3,22 @@
|
||||
import '../app.css';
|
||||
import { initAuth } from '$lib/auth';
|
||||
import { onMount } 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';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
// Slim progress bar: ratio of completed items to total, shown while processing.
|
||||
let progressPct = $derived.by(() => {
|
||||
const total = $queueItems.length;
|
||||
if (total === 0) return 0;
|
||||
const done = $queueItems.filter((i) => i.status === 'done').length;
|
||||
return Math.round((done / total) * 100);
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
initAuth();
|
||||
});
|
||||
@@ -16,3 +29,23 @@
|
||||
</svelte:head>
|
||||
|
||||
{@render children()}
|
||||
|
||||
<!-- Slim upload progress bar — sits just above the bottom nav -->
|
||||
{#if $isProcessing && $isAuthenticated && $showBottomNav}
|
||||
<div
|
||||
class="fixed z-30 h-0.5 bg-gray-200 transition-all"
|
||||
style="bottom: calc(3.5rem + env(safe-area-inset-bottom)); left: 0; right: 0"
|
||||
>
|
||||
<div
|
||||
class="h-full bg-blue-500 transition-all duration-500"
|
||||
style="width: {progressPct}%"
|
||||
></div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- UploadSheet is always mounted for smooth enter/exit animation -->
|
||||
<UploadSheet />
|
||||
|
||||
{#if $showBottomNav && $isAuthenticated}
|
||||
<BottomNav />
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user