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>

frontend/src/routes/feed/+page.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { getToken, getRole } from '$lib/auth';
+	import { getToken } from '$lib/auth';
 	import { api } from '$lib/api';
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
 	import { onMount, onDestroy } from 'svelte';
 	import FeedGrid from '$lib/components/FeedGrid.svelte';
+	import FeedListCard from '$lib/components/FeedListCard.svelte';
 	import HashtagChips from '$lib/components/HashtagChips.svelte';
 	import LightboxModal from '$lib/components/LightboxModal.svelte';
 	import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
@@ -18,9 +19,75 @@
 	let selectedUpload = $state<FeedUpload | null>(null);
 	let sentinel: HTMLDivElement;
 
-	const role = getRole();
+	// View mode
+	let viewMode = $state<'list' | 'grid'>('list');
+
+	// Grid search / filter state
+	let searchQuery = $state('');
+	let showAutocomplete = $state(false);
+
+	interface Filter { type: 'tag' | 'user'; value: string }
+	let activeFilters = $state<Filter[]>([]);
+
 	let unsubscribers: (() => void)[] = [];
 
+	// ── Autocomplete derived from loaded uploads (no extra API calls) ────────
+	let allTags = $derived.by(() => {
+		const freq = new Map<string, number>();
+		for (const u of uploads) {
+			for (const m of (u.caption ?? '').matchAll(/#(\w+)/g)) {
+				const t = m[1].toLowerCase();
+				freq.set(t, (freq.get(t) ?? 0) + 1);
+			}
+		}
+		return [...freq.entries()].sort((a, b) => b[1] - a[1]).map(([t]) => t);
+	});
+
+	let allUploaders = $derived([...new Set(uploads.map((u) => u.uploader_name))].sort());
+
+	let suggestions = $derived.by((): Filter[] => {
+		const q = searchQuery.trim();
+		if (!q) {
+			// Show top suggestions on focus
+			if (!showAutocomplete) return [];
+			return [
+				...allUploaders.slice(0, 3).map((u) => ({ type: 'user' as const, value: u })),
+				...allTags.slice(0, 3).map((t) => ({ type: 'tag' as const, value: t })),
+			];
+		}
+		if (q.startsWith('#')) {
+			const prefix = q.slice(1).toLowerCase();
+			return allTags
+				.filter((t) => t.startsWith(prefix))
+				.slice(0, 8)
+				.map((t) => ({ type: 'tag' as const, value: t }));
+		}
+		const lower = q.toLowerCase();
+		return [
+			...allUploaders
+				.filter((u) => u.toLowerCase().includes(lower))
+				.slice(0, 4)
+				.map((u) => ({ type: 'user' as const, value: u })),
+			...allTags
+				.filter((t) => t.includes(lower))
+				.slice(0, 4)
+				.map((t) => ({ type: 'tag' as const, value: t })),
+		];
+	});
+
+	// ── Filtered uploads for grid view ───────────────────────────────────────
+	let displayUploads = $derived.by(() => {
+		if (viewMode === 'list' || activeFilters.length === 0) return uploads;
+		const tags = activeFilters.filter((f) => f.type === 'tag').map((f) => f.value);
+		const users = activeFilters.filter((f) => f.type === 'user').map((f) => f.value);
+		return uploads.filter((u) => {
+			const cap = (u.caption ?? '').toLowerCase();
+			const passTag = !tags.length || tags.some((t) => cap.includes('#' + t));
+			const passUser = !users.length || users.includes(u.uploader_name);
+			return passTag && passUser;
+		});
+	});
+
 	onMount(async () => {
 		if (!getToken()) {
 			goto('/join');
@@ -37,25 +104,15 @@
 					uploads = [upload, ...uploads];
 				} catch { /* ignore */ }
 			}),
-			onSseEvent('upload-processed', () => {
-				// Reload feed to get updated preview URLs
-				loadFeed(true);
-			}),
-			onSseEvent('like-update', () => {
-				loadFeed(true);
-			}),
-			onSseEvent('new-comment', () => {
-				loadFeed(true);
-			})
+			onSseEvent('upload-processed', () => loadFeed(true)),
+			onSseEvent('like-update', () => loadFeed(true)),
+			onSseEvent('new-comment', () => loadFeed(true))
 		);
 
-		// Infinite scroll via IntersectionObserver
 		if (sentinel) {
 			const observer = new IntersectionObserver(
 				(entries) => {
-					if (entries[0].isIntersecting && nextCursor && !loadingMore) {
-						loadMore();
-					}
+					if (entries[0].isIntersecting && nextCursor && !loadingMore) loadMore();
 				},
 				{ rootMargin: '200px' }
 			);
@@ -74,18 +131,10 @@
 			if (!refresh && nextCursor) params.set('cursor', nextCursor);
 			if (selectedHashtag) params.set('hashtag', selectedHashtag);
 			params.set('limit', '20');
-
 			const res = await api.get<FeedResponse>(`/feed?${params}`);
-
-			if (refresh) {
-				uploads = res.uploads;
-			} else {
-				uploads = res.uploads;
-			}
+			uploads = res.uploads;
 			nextCursor = res.next_cursor;
-		} catch {
-			// Ignore
-		}
+		} catch { /* ignore */ }
 	}
 
 	async function loadMore() {
@@ -96,13 +145,10 @@
 			params.set('cursor', nextCursor);
 			if (selectedHashtag) params.set('hashtag', selectedHashtag);
 			params.set('limit', '20');
-
 			const res = await api.get<FeedResponse>(`/feed?${params}`);
 			uploads = [...uploads, ...res.uploads];
 			nextCursor = res.next_cursor;
-		} catch {
-			// Ignore
-		} finally {
+		} catch { /* ignore */ } finally {
 			loadingMore = false;
 		}
 	}
@@ -110,9 +156,7 @@
 	async function loadHashtags() {
 		try {
 			hashtags = await api.get<HashtagCount[]>('/hashtags');
-		} catch {
-			// Ignore
-		}
+		} catch { /* ignore */ }
 	}
 
 	function selectHashtag(tag: string | null) {
@@ -124,29 +168,19 @@
 	async function handleLike(id: string) {
 		try {
 			await api.post(`/upload/${id}/like`);
-			// Toggle locally for instant feedback
 			uploads = uploads.map((u) =>
 				u.id === id
-					? {
-							...u,
-							liked_by_me: !u.liked_by_me,
-							like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1
-						}
+					? { ...u, liked_by_me: !u.liked_by_me, like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1 }
 					: u
 			);
-			// Also update lightbox if open
 			if (selectedUpload?.id === id) {
 				selectedUpload = {
 					...selectedUpload,
 					liked_by_me: !selectedUpload.liked_by_me,
-					like_count: selectedUpload.liked_by_me
-						? selectedUpload.like_count - 1
-						: selectedUpload.like_count + 1
+					like_count: selectedUpload.liked_by_me ? selectedUpload.like_count - 1 : selectedUpload.like_count + 1,
 				};
 			}
-		} catch {
-			// Ignore
-		}
+		} catch { /* ignore */ }
 	}
 
 	function openComments(id: string) {
@@ -154,77 +188,187 @@
 		if (u) selectedUpload = u;
 	}
 
+	function selectSuggestion(item: Filter) {
+		if (!activeFilters.some((f) => f.type === item.type && f.value === item.value)) {
+			activeFilters = [...activeFilters, item];
+		}
+		searchQuery = '';
+		showAutocomplete = false;
+	}
 
+	function removeFilter(item: Filter) {
+		activeFilters = activeFilters.filter((f) => !(f.type === item.type && f.value === item.value));
+	}
+
+	function clearFilters() {
+		activeFilters = [];
+		searchQuery = '';
+	}
+
+	function switchView(mode: 'list' | 'grid') {
+		viewMode = mode;
+		if (mode === 'list') {
+			searchQuery = '';
+			showAutocomplete = false;
+		}
+	}
 </script>
 
-<div class="min-h-screen bg-gray-50">
-	<!-- Header -->
-	<div class="sticky top-0 z-40 border-b border-gray-200 bg-white/95 backdrop-blur">
+<div class="min-h-screen bg-gray-50 pb-24">
+	<!-- Sticky header -->
+	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur">
 		<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>
-			<div class="flex items-center gap-3">
-				<a
-					href="/upload"
-					class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-blue-700"
+
+			<!-- List / Grid toggle -->
+			<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
+				<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"
 				>
-					Hochladen
-				</a>
-				{#if role === 'host' || role === 'admin'}
-					<a href="/host" class="text-gray-400 hover:text-gray-600" aria-label="Host Dashboard">
-						<!-- star icon -->
-						<svg xmlns="http://www.w3.org/2000/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="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
-						</svg>
-					</a>
-				{/if}
-				{#if role === 'admin'}
-					<a href="/admin" class="text-gray-400 hover:text-gray-600" aria-label="Admin Dashboard">
-						<!-- shield icon -->
-						<svg xmlns="http://www.w3.org/2000/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="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 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>
-					</a>
-				{/if}
-				<a
-					href="/account"
-					class="text-gray-400 hover:text-gray-600"
-					aria-label="Mein Konto"
-				>
-					<svg xmlns="http://www.w3.org/2000/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="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" />
+					<!-- 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>
-				</a>
+				</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" />
+					</svg>
+				</button>
 			</div>
 		</div>
 
-		<!-- Hashtag filter chips -->
-		<div class="mx-auto max-w-2xl px-4 pb-2">
-			<HashtagChips {hashtags} selected={selectedHashtag} onselect={selectHashtag} />
-		</div>
-	</div>
-
-	<!-- Feed grid -->
-	<div class="mx-auto max-w-2xl p-4">
-		{#if uploads.length === 0}
-			<div class="py-16 text-center">
-				<p class="text-lg text-gray-400">Noch keine Fotos.</p>
-				<p class="mt-1 text-sm text-gray-400">Sei der Erste und lade etwas hoch!</p>
-				<a href="/upload" class="mt-4 inline-block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white">
-					Jetzt hochladen
-				</a>
+		<!-- List view: hashtag chips -->
+		{#if viewMode === 'list'}
+			<div class="mx-auto max-w-2xl px-4 pb-2">
+				<HashtagChips {hashtags} selected={selectedHashtag} onselect={selectHashtag} />
 			</div>
-		{:else}
-			<FeedGrid
-				{uploads}
-				onlike={handleLike}
-				oncomment={openComments}
-				onselect={(u) => (selectedUpload = u)}
-			/>
 		{/if}
 
-		<!-- Infinite scroll sentinel -->
-		<div bind:this={sentinel} class="h-4"></div>
+		<!-- Grid view: search bar + autocomplete -->
+		{#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">
+							<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
+							type="search"
+							placeholder="Nutzer oder #Tag suchen…"
+							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"
+						/>
+						{#if searchQuery}
+							<button
+								onclick={() => { searchQuery = ''; }}
+								class="shrink-0 text-gray-400 hover:text-gray-600"
+								aria-label="Suche löschen"
+							>
+								<svg class="h-4 w-4" 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>
+						{/if}
+					</div>
 
+					<!-- 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">
+							{#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"
+									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">
+											<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>
+									{:else}
+										<span class="text-blue-500 font-medium">#</span>
+										<span class="font-medium text-gray-900">{item.value}</span>
+									{/if}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Active filter chips -->
+				{#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">
+								{filter.type === 'tag' ? '#' : ''}{filter.value}
+								<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900" 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>
+								</button>
+							</span>
+						{/each}
+						{#if activeFilters.length >= 2}
+							<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600">
+								Alle löschen
+							</button>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- 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>
+		</div>
+	{:else if viewMode === 'list'}
+		<!-- List view: chronological full-width cards -->
+		<div class="mx-auto max-w-2xl">
+			{#each uploads as upload (upload.id)}
+				<FeedListCard
+					{upload}
+					onlike={handleLike}
+					oncomment={openComments}
+					onselect={(u) => (selectedUpload = u)}
+				/>
+			{/each}
+		</div>
+	{:else}
+		<!-- Grid view: 3-col, filters applied -->
+		<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>
+				</div>
+			{:else}
+				<FeedGrid
+					uploads={displayUploads}
+					onlike={handleLike}
+					oncomment={openComments}
+					onselect={(u) => (selectedUpload = u)}
+					threeCol={true}
+				/>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Infinite scroll sentinel -->
+	<div class="mx-auto max-w-2xl">
+		<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>