docs: add mobile testing guide

Comprehensive testing guide for the v0.15.0 mobile-first UI
covering bottom nav, upload FAB/sheet, feed views, search,
account, host/admin dashboards, and edge cases.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

TEST_GUIDE.md

@@ -0,0 +1,107 @@
+## Frontend Testing — Step by Step
+
+Please test each step in order and report any errors (console errors, wrong text, broken UI, API errors).
+
+### Step 1 — Join flow + PIN modal
+1. Open **http://localhost:5173/** in your browser (or navigate there if already open)
+2. You should land on the **join page** (`/join`) with a name input
+3. Enter your name (e.g. `Max`) and click **Beitreten**
+4. ✅ Expected: A modal appears showing your 4-digit PIN in large monospace font with a "Kopieren" button
+5. Click **Weiter zur Galerie**
+
+### Step 2 — Onboarding guide
+6. You should land on the **feed page** (`/feed`)
+7. ✅ Expected: A dark overlay appears at the bottom (or center on desktop) — the onboarding guide — showing step 1 of 4 with a step indicator and the Willkommen screen
+8. Click **Weiter** through all 4 steps, then **Los geht's!**
+9. ✅ Expected: Overlay disappears
+
+### Step 3 — Feed & navigation
+10. ✅ Expected: Feed shows "Noch keine Fotos." empty state with an upload button
+11. ✅ Expected: Top-right has an **upload button** (blue) and a **person icon** link
+
+### Step 4 — My Account page
+12. Click the **person icon** in the top-right
+13. ✅ Expected: `/account` page shows your name (`Max`), a blue "Gast" badge, session expiry date, and your PIN displayed large in an amber box
+14. Click **Kopieren** — check clipboard contains your PIN
+15. ✅ Expected: Button briefly shows "Kopiert!"
+16. Click **Zur Galerie** to go back to the feed
+
+### Step 5 — Upload
+17. Click **Hochladen** — this takes you to `/upload`
+18. Try uploading a photo from your device library
+19. ✅ Expected: Photo appears in queue with a progress bar, then completes
+20. Go back to `/feed` — ✅ Expected: your photo appears in the feed grid
+
+### Step 6 — Onboarding guide not shown again
+21. Reload the page at `/feed`
+22. ✅ Expected: The onboarding overlay does **not** appear (already dismissed)
+
+### Step 7 — Recover (open a private/incognito window)
+23. Open a new **private/incognito** window at **http://localhost:5173/recover**
+24. Enter the same name (`Max`) and the PIN you copied
+25. ✅ Expected: You're redirected to the feed with the same account
+
+### Step 8 — Upload rate-limit auto-retry
+26. Upload more than 20 photos in one hour to trigger the rate limit
+27. ✅ Expected: When the limit is hit, remaining items stay **Wartend** (not error)
+28. ✅ Expected: An amber banner appears in the queue: "Upload-Limit erreicht. Wird in Xs automatisch fortgesetzt."
+29. ✅ Expected: The countdown ticks down and uploads resume automatically when it reaches 0
+
+### Step 9 — Name uniqueness (case-insensitive)
+30. In a private/incognito window go to **http://localhost:5173/join**
+31. Enter `max` or `MAX` — the same name already taken in Step 1 (different case)
+32. ✅ Expected: Instead of creating a new account, an amber warning appears: „Max ist bereits vergeben." with name tips
+33. ✅ Expected: A PIN input and **Anmelden** button appear, plus an **Anderen Namen wählen** button
+34. Enter your PIN from Step 1 and click **Anmelden**
+35. ✅ Expected: You're signed in to the existing `Max` account and redirected to the feed
+36. Alternatively, click **Anderen Namen wählen** — ✅ Expected: the name input reappears with `max` pre-filled so you can edit it
+
+---
+
+## Admin & Host Features
+
+For these steps you need an admin session. Go to **http://localhost:5173/admin/login** and enter the admin password (`admin123` for the dev environment). You'll be redirected to the dashboard automatically.
+
+### Step 10 — Admin Dashboard: Stats & Config
+1. Go to **http://localhost:5173/admin**
+2. ✅ Expected: Stats card shows user count, upload count, comment count, and a disk-usage progress bar
+3. In the **Konfiguration** section, change **Upload-Limit pro Stunde** to a different value (e.g. `5`) and click **Speichern**
+4. ✅ Expected: Toast "Konfiguration gespeichert." appears briefly
+5. Reload — ✅ Expected: the changed value persists
+
+### Step 11 — Admin Dashboard: Export Jobs
+6. The **Export-Jobs** section shows all past jobs (likely empty if gallery hasn't been released yet)
+7. Click **Aktualisieren** — ✅ Expected: list refreshes without a full page reload
+
+### Step 12 — Host Dashboard: Event Controls
+8. Navigate to **http://localhost:5173/host** (or click "Host-Dashboard" from the admin page)
+9. ✅ Expected: Event name shown in the header; two status dots (Uploads open/locked, Export released/locked)
+10. Click **Uploads sperren**
+11. ✅ Expected: Toast "Uploads wurden gesperrt."; button changes to "Uploads wieder öffnen"; status dot turns red
+12. Try uploading a photo as a guest — ✅ Expected: "Uploads sind gesperrt." error
+13. Click **Uploads wieder öffnen** — ✅ Expected: dot turns green; uploads work again
+
+### Step 13 — Host Dashboard: User Management
+14. The **Gäste** list shows all registered users with upload counts and sizes
+15. Find a guest and click **Host** next to their name
+16. ✅ Expected: Toast "X ist jetzt Host."; a blue "Host" badge appears next to their name
+17. As admin, a **Degradieren** button is now visible — click it
+18. ✅ Expected: Toast "X ist jetzt Gast."; badge disappears
+
+### Step 14 — Host Dashboard: Ban & Unban
+19. Click **Sperren** next to a guest
+20. ✅ Expected: A confirmation modal opens asking what to do with their uploads, with a checkbox "Uploads aus der Galerie ausblenden"
+21. Leave the checkbox unchecked and click **Sperren**
+22. ✅ Expected: Toast "X wurde gesperrt."; a red "Gesperrt" badge appears; buttons change to **Entsperren**
+23. Try uploading as that banned user — ✅ Expected: "Du bist gesperrt." error
+24. Click **Entsperren** — ✅ Expected: ban lifted; badge gone
+
+### Step 15 — Gallery Release & Export
+25. Make sure you have at least a few photos uploaded, then on the Host Dashboard click **Galerie freigeben**
+26. ✅ Expected: Toast "Galerie wurde freigegeben. Export wird vorbereitet…"; button becomes disabled "Galerie bereits freigegeben"
+27. Navigate to **http://localhost:5173/export** as any logged-in user
+28. ✅ Expected: Two cards — **ZIP-Archiv** and **HTML-Viewer** — both initially showing "Wird vorbereitet…" or a progress bar
+29. Wait for both to show "Bereit zum Download" (reload or wait for SSE to update the UI)
+30. Click **Download** on the ZIP card — ✅ Expected: `Gallery.zip` downloads
+31. Click **Download** on the HTML card — ✅ Expected: A guide modal appears explaining how to open the file; click **Herunterladen** to get `Memories.zip`
+32. In the Admin Dashboard → **Export-Jobs**, click **Aktualisieren** — ✅ Expected: both jobs show "Fertig" with green badges

backend/Cargo.toml

@@ -29,7 +29,7 @@ sysinfo = "0.32"
 image = "0.25"
 oxipng = "9"
 async_zip = { version = "0.0.17", features = ["tokio", "deflate"] }
-minijinja = "2"
+minijinja = { version = "2", features = ["json"] }
 
 [profile.release]
 opt-level = 3

backend/migrations/007_user_name_unique.down.sql

@@ -0,0 +1,4 @@
+DROP INDEX IF EXISTS idx_user_event_name_ci;
+
+CREATE INDEX idx_user_event_name
+    ON "user"(event_id, display_name);

backend/migrations/007_user_name_unique.up.sql

@@ -0,0 +1,15 @@
+-- Deduplicate users with the same name (case-insensitive) per event,
+-- keeping the oldest account so no real data is lost.
+DELETE FROM "user"
+WHERE id NOT IN (
+    SELECT DISTINCT ON (event_id, LOWER(display_name)) id
+    FROM "user"
+    ORDER BY event_id, LOWER(display_name), created_at ASC
+);
+
+-- Drop the old non-unique index (replaced below)
+DROP INDEX IF EXISTS idx_user_event_name;
+
+-- Unique index enforces one account per name per event (case-insensitive)
+CREATE UNIQUE INDEX idx_user_event_name_ci
+    ON "user" (event_id, LOWER(display_name));

backend/src/auth/handlers.rs

@@ -39,6 +39,7 @@ pub async fn join(
     if !state.rate_limiter.check(format!("join:{ip}"), 5, Duration::from_secs(60)) {
         return Err(AppError::TooManyRequests(
             "Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(),
+            None,
         ));
     }
 
@@ -56,6 +57,14 @@ pub async fn join(
     )
     .await?;
 
+    // Reject if a user with this name (case-insensitive) already exists
+    if User::name_taken(&state.pool, event.id, display_name).await? {
+        return Err(AppError::Conflict(format!(
+            "Der Name \"{}\" ist bereits vergeben.",
+            display_name
+        )));
+    }
+
     // Generate a 4-digit PIN
     let pin: String = format!("{:04}", rand::rng().random_range(0..10000u32));
     let pin_hash =
@@ -124,6 +133,7 @@ pub async fn recover(
             if Utc::now() < locked_until {
                 return Err(AppError::TooManyRequests(
                     "Zu viele Versuche. Bitte warte 15 Minuten.".into(),
+                    None,
                 ));
             }
         }

backend/src/error.rs

@@ -1,6 +1,5 @@
 use axum::http::StatusCode;
 use axum::response::{IntoResponse, Response};
-use serde_json::json;
 
 #[derive(Debug)]
 pub enum AppError {
@@ -8,7 +7,9 @@ pub enum AppError {
     Unauthorized(String),
     Forbidden(String),
     NotFound(String),
-    TooManyRequests(String),
+    Conflict(String),
+    /// Second field: optional retry-after seconds to include in the response.
+    TooManyRequests(String, Option<u64>),
     Internal(anyhow::Error),
 }
 
@@ -19,7 +20,8 @@ impl AppError {
             Self::Unauthorized(_) => (StatusCode::UNAUTHORIZED, "unauthorized"),
             Self::Forbidden(_) => (StatusCode::FORBIDDEN, "forbidden"),
             Self::NotFound(_) => (StatusCode::NOT_FOUND, "not_found"),
-            Self::TooManyRequests(_) => (StatusCode::TOO_MANY_REQUESTS, "too_many_requests"),
+            Self::Conflict(_) => (StatusCode::CONFLICT, "conflict"),
+            Self::TooManyRequests(..) => (StatusCode::TOO_MANY_REQUESTS, "too_many_requests"),
             Self::Internal(_) => (StatusCode::INTERNAL_SERVER_ERROR, "internal_error"),
         }
     }
@@ -30,7 +32,8 @@ impl AppError {
             | Self::Unauthorized(msg)
             | Self::Forbidden(msg)
             | Self::NotFound(msg)
-            | Self::TooManyRequests(msg) => msg.clone(),
+            | Self::Conflict(msg) => msg.clone(),
+            Self::TooManyRequests(msg, _) => msg.clone(),
             Self::Internal(err) => {
                 tracing::error!("internal error: {err:#}");
                 "Ein interner Fehler ist aufgetreten.".to_string()
@@ -42,13 +45,29 @@ impl AppError {
 impl IntoResponse for AppError {
     fn into_response(self) -> Response {
         let (status, code) = self.status_and_code();
+        let retry_after_secs = if let Self::TooManyRequests(_, Some(secs)) = &self {
+            Some(*secs)
+        } else {
+            None
+        };
         let message = self.message();
-        let body = json!({
+
+        let mut body = serde_json::json!({
             "error": code,
             "message": message,
             "status": status.as_u16(),
         });
-        (status, axum::Json(body)).into_response()
+        if let Some(secs) = retry_after_secs {
+            body["retry_after_secs"] = secs.into();
+        }
+
+        let mut resp = (status, axum::Json(body)).into_response();
+        if let Some(secs) = retry_after_secs {
+            if let Ok(val) = axum::http::HeaderValue::from_str(&secs.to_string()) {
+                resp.headers_mut().insert(axum::http::header::RETRY_AFTER, val);
+            }
+        }
+        resp
     }
 }
 

backend/src/handlers/admin.rs

@@ -180,9 +180,7 @@ pub async fn download_zip(
     let ip = client_ip(&headers, "unknown");
     let limit = get_config_usize(&state.pool, "export_rate_per_day", 3).await;
     if !state.rate_limiter.check(format!("export:{ip}"), limit, Duration::from_secs(86400)) {
-        return Err(AppError::TooManyRequests(
+        return Err(AppError::TooManyRequests("Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(), None));
-            "Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(),
-        ));
     }
 
     let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
@@ -211,9 +209,7 @@ pub async fn download_html(
     let ip = client_ip(&headers, "unknown");
     let limit = get_config_usize(&state.pool, "export_rate_per_day", 3).await;
     if !state.rate_limiter.check(format!("export:{ip}"), limit, Duration::from_secs(86400)) {
-        return Err(AppError::TooManyRequests(
+        return Err(AppError::TooManyRequests("Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(), None));
-            "Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(),
-        ));
     }
 
     let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)

backend/src/handlers/feed.rs

@@ -63,9 +63,7 @@ pub async fn feed(
     let ip = client_ip(&headers, "unknown");
     let rate_limit = get_config_usize(&state.pool, "feed_rate_per_min", 60).await;
     if !state.rate_limiter.check(format!("feed:{ip}"), rate_limit, Duration::from_secs(60)) {
-        return Err(AppError::TooManyRequests(
+        return Err(AppError::TooManyRequests("Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(), None));
-            "Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(),
-        ));
     }
 
     let limit = q.limit.unwrap_or(20).min(100);

backend/src/handlers/upload.rs

@@ -20,12 +20,14 @@ pub async fn upload(
 ) -> Result<(StatusCode, Json<UploadDto>), AppError> {
     // Rate limit: N uploads per hour per user
     let upload_rate = get_config_i64(&state.pool, "upload_rate_per_hour", 10).await as usize;
-    if !state
+    if let Err(retry_after_secs) = state
         .rate_limiter
-        .check(format!("upload:{}", auth.user_id), upload_rate, Duration::from_secs(3600))
+        .check_with_retry(format!("upload:{}", auth.user_id), upload_rate, Duration::from_secs(3600))
     {
+        drain_multipart(multipart).await;
         return Err(AppError::TooManyRequests(
             "Du hast dein Upload-Limit für diese Stunde erreicht.".into(),
+            Some(retry_after_secs),
         ));
     }
 
@@ -34,6 +36,7 @@ pub async fn upload(
         .await?
         .ok_or_else(|| AppError::NotFound("Benutzer nicht gefunden.".into()))?;
     if user.is_banned {
+        drain_multipart(multipart).await;
         return Err(AppError::Forbidden("Du bist gesperrt.".into()));
     }
 
@@ -42,6 +45,7 @@ pub async fn upload(
         .await?
         .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
     if event.uploads_locked_at.is_some() {
+        drain_multipart(multipart).await;
         return Err(AppError::Forbidden("Uploads sind gesperrt.".into()));
     }
 
@@ -239,6 +243,15 @@ pub async fn delete_upload(
     Ok(StatusCode::NO_CONTENT)
 }
 
+/// Drain a multipart body so the HTTP connection stays clean when returning an early error.
+/// Without draining, the client may still be sending the body after we've sent our response,
+/// which can corrupt the keep-alive connection for subsequent requests.
+async fn drain_multipart(mut mp: Multipart) {
+    while let Ok(Some(mut field)) = mp.next_field().await {
+        while field.chunk().await.ok().flatten().is_some() {}
+    }
+}
+
 async fn get_config_i64(pool: &sqlx::PgPool, key: &str, default: i64) -> i64 {
     let row: Option<(String,)> =
         sqlx::query_as("SELECT value FROM config WHERE key = $1")

backend/src/main.rs

@@ -1,7 +1,9 @@
 use anyhow::Result;
+use axum::extract::DefaultBodyLimit;
 use axum::routing::{delete, get, patch, post};
 use axum::Router;
 use tower_http::services::ServeDir;
+use tower_http::trace::TraceLayer;
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
 mod auth;
@@ -40,8 +42,9 @@ async fn main() -> Result<()> {
         .route("/api/v1/recover", post(auth::handlers::recover))
         .route("/api/v1/admin/login", post(auth::handlers::admin_login))
         .route("/api/v1/session", delete(auth::handlers::logout))
-        // Upload
+        // Upload — body limit disabled; size validation is done inside the handler
-        .route("/api/v1/upload", post(handlers::upload::upload))
+        .route("/api/v1/upload", post(handlers::upload::upload)
+            .route_layer(DefaultBodyLimit::disable()))
         .route(
             "/api/v1/upload/{id}",
             patch(handlers::upload::edit_upload).delete(handlers::upload::delete_upload),
@@ -89,6 +92,7 @@ async fn main() -> Result<()> {
         .route("/health", get(|| async { "ok" }))
         .merge(api)
         .nest_service("/media", media_service)
+        .layer(TraceLayer::new_for_http())
         .with_state(state);
 
     let listener = tokio::net::TcpListener::bind(("0.0.0.0", config.app_port)).await?;

backend/src/models/user.rs

@@ -4,6 +4,7 @@ use sqlx::PgPool;
 use uuid::Uuid;
 
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize, sqlx::Type)]
+#[serde(rename_all = "lowercase")]
 #[sqlx(type_name = "user_role", rename_all = "lowercase")]
 pub enum UserRole {
     Guest,
@@ -58,7 +59,7 @@ impl User {
         display_name: &str,
     ) -> Result<Vec<Self>, sqlx::Error> {
         sqlx::query_as::<_, Self>(
-            "SELECT * FROM \"user\" WHERE event_id = $1 AND display_name = $2",
+            "SELECT * FROM \"user\" WHERE event_id = $1 AND LOWER(display_name) = LOWER($2)",
         )
         .bind(event_id)
         .bind(display_name)
@@ -66,6 +67,21 @@ impl User {
         .await
     }
 
+    pub async fn name_taken(
+        pool: &PgPool,
+        event_id: Uuid,
+        display_name: &str,
+    ) -> Result<bool, sqlx::Error> {
+        let row: (bool,) = sqlx::query_as(
+            "SELECT EXISTS(SELECT 1 FROM \"user\" WHERE event_id = $1 AND LOWER(display_name) = LOWER($2))",
+        )
+        .bind(event_id)
+        .bind(display_name)
+        .fetch_one(pool)
+        .await?;
+        Ok(row.0)
+    }
+
     pub async fn increment_failed_pin(pool: &PgPool, id: Uuid) -> Result<i16, sqlx::Error> {
         let row: (i16,) = sqlx::query_as(
             "UPDATE \"user\"

backend/src/services/rate_limiter.rs

@@ -19,17 +19,26 @@ impl RateLimiter {
 
     /// Returns `true` if the request is allowed, `false` if rate-limited.
     pub fn check(&self, key: impl Into<String>, max: usize, window: Duration) -> bool {
+        self.check_with_retry(key, max, window).is_ok()
+    }
+
+    /// Returns `Ok(())` if allowed, `Err(retry_after_secs)` if rate-limited.
+    /// `retry_after_secs` is how long until the oldest slot in the window expires.
+    pub fn check_with_retry(&self, key: impl Into<String>, max: usize, window: Duration) -> Result<(), u64> {
         let now = Instant::now();
         let key = key.into();
         let mut map = self.windows.lock().unwrap();
         let timestamps = map.entry(key).or_default();
-        // Drop entries outside the window
         timestamps.retain(|&t| now.duration_since(t) < window);
         if timestamps.len() < max {
             timestamps.push(now);
-            true
+            Ok(())
         } else {
-            false
+            // The oldest timestamp expires at oldest + window; compute remaining seconds
+            let oldest = timestamps[0];
+            let elapsed = now.duration_since(oldest);
+            let remaining = window.saturating_sub(elapsed);
+            Err(remaining.as_secs().max(1))
         }
     }
 }

docs/CONCEPT_HTML_VIEWER.md

@@ -0,0 +1,278 @@
+# HTML Viewer Export Concept
+
+## Overview
+
+The HTML Viewer export produces a **self-contained offline ZIP** that is a read-only clone
+of the live EventSnap feed. Opening `index.html` in any modern browser shows the full event
+gallery — list view, grid view, search, filter, lightbox — with no internet connection or
+server required.
+
+It **replaces the current HTML export job type**. The old HTML export produced a raw
+minijinja-rendered template; the new viewer supersedes it entirely. The existing `html`
+job variant in the backend is repurposed to run this flow instead of being kept alongside
+it.
+
+It is distinct from the ZIP archive export (which is raw media files). The viewer is a
+polished, navigable web app bundled with the event's content.
+
+---
+
+## User-Facing Behavior
+
+- Download `event_name_viewer.zip`, unzip, open `index.html`
+- Full list view (chronological, newest first) and grid view with search/filter
+- Likes, comments, and reaction counts shown (static snapshot from export time)
+- Read-only: no uploads, no auth, no dashboards
+- Works offline, no CDN or external resources
+
+---
+
+## Architecture
+
+### Separate Static SvelteKit App
+
+A new mini SvelteKit project lives at `frontend/export-viewer/` within the same monorepo.
+It uses `adapter-static` and is kept completely independent of the main app.
+
+**Why separate rather than a shared route:**
+- The viewer must be distributable as a standalone static bundle; the main app uses
+  `adapter-node` and cannot be mixed
+- Keeping it separate avoids auth, store, and routing dependencies leaking in
+- Simpler to reason about: the viewer has exactly two concerns (list view, grid view)
+
+**Why same repo:**
+- Shares Tailwind config and design tokens → visual parity with the main app
+- Single `pnpm` workspace, no separate CI needed
+- Backend can reference the pre-built output by relative path
+
+### Pre-Built Output Committed to Repo
+
+The viewer is built once and its output committed to `backend/static/export-viewer/`.
+The backend export job **does not run a Node build** at runtime — it just copies the
+pre-built assets and injects event data alongside them.
+
+When the viewer source changes, a developer rebuilds it locally (`pnpm build` in
+`frontend/export-viewer/`) and commits the updated `backend/static/export-viewer/` output.
+
+---
+
+## ZIP Structure
+
+```
+event_name_viewer.zip/
+├── index.html                  ← entry point; open this in any browser
+├── _app/
+│   └── immutable/
+│       ├── viewer.[hash].js    ← all Svelte/app logic, single bundle
+│       └── viewer.[hash].css   ← all styles including Tailwind output
+├── data.json                   ← injected by backend at export time
+└── media/
+    ├── abc123_thumb.jpg        ← ~400 px wide, used in grid cells
+    ├── abc123_full.jpg         ← original or capped (see Media Strategy)
+    ├── def456_thumb.jpg
+    └── def456.mp4              ← videos included as-is
+```
+
+No external font CDN, no Google Fonts, no remote scripts. All assets are local.
+
+---
+
+## data.json Schema
+
+Generated by the backend export job. The viewer fetches this file on startup via
+`fetch('./data.json')` (relative path, works from filesystem).
+
+```json
+{
+  "event": {
+    "name": "Sommerfest 2025",
+    "exported_at": "2025-07-15T20:00:00Z"
+  },
+  "posts": [
+    {
+      "id": "abc123",
+      "uploader": "MaxMustermann",
+      "caption": "Tolle Stimmung! #party #spaß",
+      "tags": ["party", "spaß"],
+      "timestamp": "2025-07-15T18:30:00Z",
+      "likes": 12,
+      "comments": [
+        {
+          "author": "AnnaSchulz",
+          "text": "So schön!",
+          "timestamp": "2025-07-15T18:35:00Z"
+        }
+      ],
+      "media": [
+        {
+          "type": "image",
+          "thumb": "media/abc123_thumb.jpg",
+          "full": "media/abc123_full.jpg",
+          "width": 1920,
+          "height": 1080
+        }
+      ]
+    }
+  ]
+}
+```
+
+All post data (likes, comments, tags) reflects the state at export time. No live updates.
+
+---
+
+## Media Strategy
+
+### Images
+
+| Variant | Purpose | Max dimension | Format |
+|---------|---------|---------------|--------|
+| `_thumb` | Grid cells, list post thumbnail | 400 px wide | JPEG q75 |
+| `_full` | Lightbox / full-screen view | Original, or 2000 px cap if >5 MB | JPEG q85 |
+
+The backend applies compression only when the original exceeds a threshold (e.g. >5 MB for
+images). Below that threshold the original is used as `_full` unchanged.
+
+The full-resolution original is always available via the separate ZIP archive export.
+
+### Videos
+
+Included as-is (no server-side transcoding). The viewer uses a standard `<video>` element.
+The `_thumb` variant for videos is a JPEG frame extracted at the 1-second mark.
+
+---
+
+## SvelteKit SSG Configuration
+
+```
+// frontend/export-viewer/src/routes/+layout.ts
+export const prerender = true;
+export const ssr = false;
+```
+
+`ssr = false` produces a pure client-side SPA: SvelteKit emits a minimal `index.html` shell
+and the JavaScript bundle hydrates it entirely in the browser. This is correct for a ZIP
+distribution where no server exists to handle SSR.
+
+```
+// frontend/export-viewer/svelte.config.js
+import adapter from '@sveltejs/adapter-static';
+
+export default {
+  kit: {
+    adapter: adapter({
+      fallback: 'index.html',
+      pages: '../../backend/static/export-viewer',
+      assets: '../../backend/static/export-viewer',
+    })
+  }
+};
+```
+
+The build output is written directly into `backend/static/export-viewer/` so the backend
+can reference it without a copy step.
+
+### Shared Tailwind Config
+
+```
+// frontend/export-viewer/tailwind.config.js
+import baseConfig from '../tailwind.config.js';
+export default { ...baseConfig, content: ['./src/**/*.{svelte,ts}'] };
+```
+
+Imports the main app's Tailwind config to guarantee visual parity. Only the `content` glob
+is overridden.
+
+---
+
+## Viewer Feature Set
+
+| Feature | Included | Notes |
+|---------|----------|-------|
+| List view (chronological, newest first) | ✓ | Full-width cards, same layout as live app |
+| Grid view (3-column) | ✓ | Square cells, video duration badge |
+| List/grid toggle | ✓ | Same toggle icons as live app |
+| Search bar (grid view only) | ✓ | Appears only in grid view |
+| Tag filter chips | ✓ | Built from tags in data.json |
+| Uploader filter | ✓ | Dropdown from uploaders in data.json |
+| Autocomplete suggestions | ✓ | From data.json — no network requests |
+| Lightbox (tap to expand) | ✓ | Swipe left/right navigates filtered set |
+| Like counts (static) | ✓ | Snapshot from export time |
+| Comment list (static) | ✓ | Expandable under each post |
+| Like/comment actions | ✗ | Read-only export |
+| Upload button / FAB | ✗ | |
+| Account / Host / Admin | ✗ | |
+| Authentication | ✗ | No JWT, no PIN |
+| Service Worker (offline cache) | Future | Could be added later for PWA behavior |
+
+---
+
+## Backend Export Job Flow
+
+The `html` job variant is repurposed. The old minijinja template rendering path is removed
+and replaced entirely by the steps below.
+
+```
+1. Query all posts, media, reactions, and comments for the event from the DB
+2. Copy pre-built viewer assets:
+     backend/static/export-viewer/ → tmp/{job_id}/
+3. Generate data.json:
+     - Build the JSON structure from queried data
+     - Write to tmp/{job_id}/data.json
+4. Process and copy media:
+     For each media file:
+       a. Copy original; if image >5 MB, also produce compressed _full variant
+       b. Generate _thumb (resize to 400 px wide via image library)
+       c. For video, extract JPEG frame for _thumb
+       d. Write to tmp/{job_id}/media/
+5. Create ZIP:
+     zip -r event_name_viewer.zip tmp/{job_id}/
+6. Store ZIP path, mark job as complete
+7. Clean up tmp/{job_id}/
+```
+
+The backend needs an image processing dependency (e.g. `image` crate in Rust) for thumbnail
+generation and compression. Video frame extraction requires `ffmpeg` available in the
+deployment environment (already used for video handling if applicable, otherwise add to
+docker-compose).
+
+---
+
+## Monorepo Structure After Implementation
+
+```
+EventSnap/
+├── backend/
+│   ├── static/
+│   │   └── export-viewer/        ← pre-built viewer output (committed)
+│   │       ├── index.html
+│   │       └── _app/...
+│   └── src/
+│       └── handlers/
+│           └── export.rs          ← export job assembles ZIP
+├── frontend/
+│   ├── export-viewer/             ← new mini SvelteKit project
+│   │   ├── package.json
+│   │   ├── svelte.config.js       ← adapter-static, output → backend/static/export-viewer
+│   │   ├── tailwind.config.js     ← extends ../tailwind.config.js
+│   │   └── src/
+│   │       └── routes/
+│   │           ├── +layout.ts     ← prerender=true, ssr=false
+│   │           └── +page.svelte   ← list/grid feed, lightbox, search
+│   └── src/                       ← existing main app (unchanged)
+└── docs/
+    ├── CONCEPT_MOBILE_UI.md
+    └── CONCEPT_HTML_VIEWER.md
+```
+
+---
+
+## Open Questions for Implementation
+
+1. **Image processing library**: The `image` crate handles JPEG resize/compress; is it
+   already a backend dependency, or does it need to be added?
+2. **Video thumbnail extraction**: Is `ffmpeg` available in the Docker environment?
+   If not, a fallback (no video thumb, use a placeholder) is needed.
+3. **Viewer rebuild workflow**: Add a `make build-viewer` or `pnpm --filter export-viewer build`
+   step to the developer workflow docs and CI so the committed output stays in sync.
+4. **ZIP file naming**: `{event_slug}_viewer_{date}.zip` or a fixed name?

docs/CONCEPT_MOBILE_UI.md

@@ -0,0 +1,420 @@
+# Mobile-First UI/UX Redesign Concept
+
+## Overview
+
+EventSnap is intended for mobile use at live events, but the current UI is desktop-oriented.
+This document describes a full mobile-first redesign covering navigation, the feed/gallery,
+account page, host dashboard, and admin dashboard.
+
+---
+
+## 1. Navigation: Bottom Tab Bar
+
+Replace all per-page top-right icon links with a single **persistent bottom tab bar** present
+on every page. The bar sits at the very bottom with proper `padding-bottom` for iPhone home
+indicator (safe-area-inset-bottom).
+
+### Tab Composition by Role
+
+| Role  | Tabs |
+|-------|------|
+| Guest | 🏠 Feed · [📷+] · 👤 Account |
+| Host  | 🏠 Feed · [📷+] · 👤 Account |
+| Admin | 🏠 Feed · [📷+] · 👤 Account |
+
+All roles see the same three tabs. Role-specific dashboard links (Host, Admin) live inside
+the Account page — not as separate tabs. This keeps the bar simple and avoids conditional
+tab rendering.
+
+### Visual Style
+
+- Frosted glass background: `bg-white/85 backdrop-blur-md`
+- Thin top border: `border-t border-gray-200`
+- Subtle shadow upward
+- Active tab: colored icon + small label below
+- Inactive tab: gray icon, small gray label
+
+### Upload FAB (Floating Action Button)
+
+The center tab is an elevated circular button, not a flat tab icon:
+
+- Circle ~56 px diameter, `bg-blue-600`
+- Icon: camera outline with a small `+` badge overlaid at bottom-right
+- Raised above the bar with a drop shadow
+- Press: slight scale-down (`scale-95`) + haptic feedback where available
+- Communicates "capture new or upload existing"
+
+---
+
+## 2. Feed / Gallery Page
+
+### Header
+
+```
+┌─────────────────────────────────────────┐
+│  Sommerfest 2025              ≡  ⊞      │
+└─────────────────────────────────────────┘
+```
+
+- Event name left-aligned
+- List/grid view toggle icons right-aligned (≡ list, ⊞ grid)
+- Header collapses on downward scroll (only toggle remains visible), expands on upward scroll
+
+---
+
+### View A — Chronological List (default)
+
+Full-width post cards, newest at top, infinite scroll.
+
+```
+┌─────────────────────────────────────────┐
+│  👤 MaxMustermann          · vor 2 Min  │
+│ ┌───────────────────────────────────┐   │
+│ │                                   │   │
+│ │          [photo / video]          │   │
+│ │                                   │   │
+│ └───────────────────────────────────┘   │
+│  Tolle Stimmung! #party #spaß           │
+│  ❤️ 12   💬 3                           │
+└─────────────────────────────────────────┘
+```
+
+- Media: full-width, native aspect ratio, capped at 80 vh
+- Avatar: colored initial circle, no photo
+- Timestamp: relative ("vor 2 Min", "vor 1 Std")
+- Tap media → fullscreen lightbox, swipe left/right navigates feed
+- No search bar in list view
+
+---
+
+### View B — Grid View
+
+Transition animation when toggling: list collapses, grid fades/scales in (~200 ms).
+
+#### Search Bar (grid view only)
+
+```
+┌─────────────────────────────────────────┐
+│  🔍  Nutzer oder #Tag suchen…      ×   │
+└─────────────────────────────────────────┘
+```
+
+- Appears below the header only in grid view
+- Slides in as part of the view transition
+- `×` clears current input
+- Auto-focuses when grid view is activated
+
+#### Autocomplete Dropdown
+
+Appears immediately on focus and updates on every keystroke. Data source: the already-loaded
+posts in memory — **no extra API calls**.
+
+Two suggestion lists are derived at load time:
+- `allTags`: unique hashtags from all post captions, sorted by frequency descending
+- `allUploaders`: unique display names, sorted alphabetically
+
+| User input | Suggestions shown |
+|------------|-------------------|
+| (focus, empty) | Top 3 tags by frequency + top 3 uploaders |
+| `#` | All tags, frequency-sorted |
+| `#par` | Tags with prefix "par": `#party`, `#parade` |
+| `Max` | Uploaders matching "max" (case-insensitive) |
+| `a` | Uploaders containing "a" + tags containing "a" |
+
+Dropdown layout:
+
+```
+┌─────────────────────────────────────────┐
+│  👤 Nutzer                              │
+│     MaxMustermann                       │
+│     AnnaSchulz                          │
+│  # Tags                                 │
+│     #party    #tanz    #spaß            │
+└─────────────────────────────────────────┘
+```
+
+Max ~5 total suggestions. Tapping a suggestion adds it as an active filter chip and clears
+the search bar for another entry.
+
+#### Active Filter Chips
+
+```
+┌─────────────────────────────────────────┐
+│  👤 MaxMustermann ×   # party ×         │
+│  Alle Filter löschen                    │  ← shown when 2+ chips active
+└─────────────────────────────────────────┘
+```
+
+Filter combination logic:
+
+| Combination | Logic |
+|-------------|-------|
+| Two tags: `#party` + `#tanz` | OR — posts with either tag |
+| Two uploaders: Max + Anna | OR — posts from either |
+| Uploader + tag: Max + `#party` | AND — posts by Max that also have `#party` |
+
+#### Grid Layout
+
+```
+┌───────┬───────┬───────┐
+│       │       │       │
+│       │       │       │  3-column, equal square cells
+├───────┼───────┼───────┤  small gap (2 px)
+│       │  ▶    │       │  ← video: small ▶ badge + duration
+│       │  0:42 │       │
+└───────┴───────┴───────┘
+```
+
+- Tap cell → fullscreen lightbox, swipe navigates filtered set only
+- Virtualized grid for performance on large events
+
+---
+
+## 3. Upload Flow
+
+### Step 1 — Source Selection (Bottom Sheet)
+
+Tapping the FAB slides up a bottom sheet (~300 ms spring animation).
+Frosted glass, rounded top corners, drag handle at top. Tap outside or swipe down to dismiss.
+
+```
+┌──────────────────────────────────┐
+│          ▬  (drag handle)        │
+│                                  │
+│  📸  Kamera                      │
+│      Jetzt aufnehmen             │
+│                                  │
+│  🖼  Galerie                     │
+│      Foto oder Video wählen      │
+│                                  │
+│  [  Abbrechen  ]                 │
+└──────────────────────────────────┘
+```
+
+### Step 2a — Camera
+
+Triggers `<input type="file" accept="image/*,video/*" capture="environment">`.
+Native camera opens. After capture → Step 3.
+
+### Step 2b — Gallery
+
+Triggers `<input type="file" accept="image/*,video/*" multiple>`.
+Native gallery picker with multi-select (up to ~10 items). After selection → Step 3.
+
+### Step 3 — Preview & Metadata Screen
+
+Full-screen, pushes in from right. Bottom nav hidden (immersive).
+
+```
+┌──────────────────────────────────┐
+│  ×  Abbrechen      Hochladen →  │
+├──────────────────────────────────┤
+│                                  │
+│  ┌────┐ ┌────┐ ┌────┐  →        │  ← horizontal scroll, tap to preview
+│  │img │ │img │ │ ×  │           │    × on each thumbnail to remove
+│  └────┘ └────┘ └────┘           │
+│                                  │
+│  Beschreibung (optional)         │
+│  ┌────────────────────────────┐  │
+│  │                            │  │  ← auto-focused
+│  └────────────────────────────┘  │
+│                                  │
+│  # Schnell-Tags                  │
+│  [#Feier] [#Spaß] [#Party] …   │  ← tap to append to caption
+│                                  │
+├──────────────────────────────────┤
+│  ┌────────────────────────────┐  │
+│  │      📤 Hochladen          │  │  ← sticky, disabled until ≥1 file
+│  └────────────────────────────┘  │
+└──────────────────────────────────┘
+```
+
+### Step 4 — Background Upload + Feedback
+
+- Tapping "Hochladen" immediately returns to the feed (optimistic UX)
+- Slim progress bar above the bottom tab bar while queue is active
+- FAB gets a small spinning ring badge while uploads are in progress
+- On completion: brief toast near the bottom ("✓ Hochgeladen")
+- Rate-limit countdown banner anchored above the bottom bar (existing behavior)
+
+---
+
+## 4. Account Page
+
+Single entry point for profile info and role-based dashboard navigation.
+
+```
+┌─────────────────────────────────────────┐
+│              Mein Account               │
+├─────────────────────────────────────────┤
+│                                         │
+│        ┌───────┐                        │
+│        │  M    │   MaxMustermann        │
+│        └───────┘   🏷 Gast              │
+│                    Sommerfest 2025      │
+│                    7 Uploads            │
+│                                         │
+├── Dashboards ───────────────────────────┤  (entire section absent for guests)
+│                                         │
+│  ⭐  Host-Dashboard                →    │  (host + admin only)
+│  🛡  Admin-Dashboard               →    │  (admin only)
+│                                         │
+├── Konto ────────────────────────────────┤
+│                                         │
+│  ✏️  Anzeigename ändern             →    │
+│  🔑  PIN ändern                     →    │
+│  🚪  Event verlassen                →    │  (red text, confirm sheet)
+│                                         │
+└─────────────────────────────────────────┘
+│  🏠 Feed  ·  [📷+]  ·  👤 Account       │
+└─────────────────────────────────────────┘
+```
+
+- "Dashboards" section is entirely absent in the DOM for plain guests — not just hidden
+- "Event verlassen" triggers a bottom-sheet confirmation before action
+- Avatar: colored circle with initial letter
+
+---
+
+## 5. Host Dashboard
+
+Accessed via Account → ⭐ Host-Dashboard. Full-screen page, bottom nav visible.
+
+```
+┌─────────────────────────────────────────┐
+│  ←   🎉 Host-Dashboard                  │
+├─────────────────────────────────────────┤
+│                                         │
+│  ── Statistiken ──────────────────────  │
+│  ┌──────────┐  ┌──────────┐            │
+│  │    24    │  │   156    │            │
+│  │  Nutzer  │  │ Uploads  │            │
+│  └──────────┘  └──────────┘            │
+│                                         │
+│  ── Event-Einstellungen ──────────────  │  ← collapsible section
+│                                         │
+│  Neue Uploads sperren                   │
+│  ○────────────●  Gesperrt              │  ← toggle
+│  Keine neuen Uploads möglich            │
+│                                         │
+│  ── Nutzerverwaltung ─────────────────  │  ← collapsible section
+│                                         │
+│  🔍  Nutzer suchen…                     │
+│  ┌───────────────────────────────────┐  │
+│  │  👤  MaxMustermann   Gast  [🚫]   │  │
+│  │  👤  AnnaSchulz      Gast  [🚫]   │  │
+│  │  👤  GesperrterNutzer      [↩]    │  │  ← banned: undo icon
+│  └───────────────────────────────────┘  │
+│                                         │
+└─────────────────────────────────────────┘
+│  🏠 Feed  ·  [📷+]  ·  👤 Account       │
+└─────────────────────────────────────────┘
+```
+
+- Sections have a chevron toggle to collapse/expand (helps on small phones)
+- Ban/unban: icon tap + bottom sheet confirmation ("Nutzer wirklich sperren?")
+- User list virtualized for large events
+
+---
+
+## 6. Admin Dashboard
+
+Most complex page. Uses an **inner tab bar** directly below the header to divide the four
+functional areas. The inner tabs are independent of the bottom nav.
+
+```
+┌─────────────────────────────────────────┐
+│  ←   🛡 Admin-Dashboard                 │
+├─────────────────────────────────────────┤
+│  [Stats] [Config] [Export] [Nutzer]     │  ← inner tab bar (scrollable if needed)
+├─────────────────────────────────────────┤
+│                                         │
+│  [Tab content]                          │
+│                                         │
+└─────────────────────────────────────────┘
+│  🏠 Feed  ·  [📷+]  ·  👤 Account       │
+└─────────────────────────────────────────┘
+```
+
+### Stats Tab
+
+```
+  ┌──────────┐  ┌──────────┐
+  │  156     │  │  24      │
+  │ Uploads  │  │ Nutzer   │
+  └──────────┘  └──────────┘
+  ┌──────────┐  ┌──────────┐
+  │  2.1 GB  │  │  3       │
+  │ Speicher │  │ Gesperrt │
+  └──────────┘  └──────────┘
+```
+
+2×2 metric card grid. Values large and prominent. Optionally expandable to show time-series
+charts on tap.
+
+### Config Tab
+
+```
+  Upload-Limit / Nutzer
+  ┌────────────────────────────────┐
+  │  10                            │
+  └────────────────────────────────┘
+
+  Zeitfenster (Sek.)
+  ┌────────────────────────────────┐
+  │  60                            │
+  └────────────────────────────────┘
+
+  Max. Dateigröße (MB)
+  ┌────────────────────────────────┐
+  │  50                            │
+  └────────────────────────────────┘
+
+  ┌────────────────────────────────┐
+  │        💾 Speichern            │  ← sticky at bottom of tab scroll area
+  └────────────────────────────────┘
+```
+
+Each setting: full-width label + input. Save button always reachable without scrolling.
+
+### Export Tab
+
+```
+  ── Galerie ──────────────────────────
+  [  🔓 Galerie freigeben  ]
+
+  ── Export-Jobs ──────────────────────
+  [  🔄 Aktualisieren  ]
+
+  ┌───────────────────────────────────┐
+  │  HTML-Viewer   ● Fertig  [↓ ZIP]  │
+  │  JSON-Export   ⏳ Läuft…          │
+  │  ZIP-Archiv    ✗ Fehler   [↺]     │
+  └───────────────────────────────────┘
+
+  [  + Neuer Export-Job  ]
+```
+
+- Status chips: green (Fertig), amber (Läuft), red (Fehler)
+- Download button inline per completed job
+- Only the jobs list refreshes on "Aktualisieren" — no full page re-render
+
+### Nutzer Tab
+
+Same structure as Host Nutzerverwaltung, with any additional admin-only actions
+(e.g. role assignment) added as extra controls per row.
+
+---
+
+## Design Principles Summary
+
+| Principle | Application |
+|-----------|-------------|
+| Thumb zone | All primary actions in bottom ~20% of screen |
+| One-hand operation | FAB centered, bottom sheets dismissable with swipe |
+| Minimal taps to upload | Source → picker → preview → upload: 4 taps |
+| Immediate feedback | Optimistic return to feed, background upload |
+| Progressive disclosure | Caption/tags optional; CTA always reachable |
+| No role clutter in nav | Role links only in Account, bar stays clean |
+| Collapsible sections | Long management pages stay usable on small phones |
+| Inner tabs for complex pages | Admin dashboard split across 4 focused tabs |

docs/MOBILE_TESTING_GUIDE.md

@@ -0,0 +1,392 @@
+# Mobile Testing Guide — EventSnap v0.15.0
+
+## Setup
+
+### Dev Servers
+
+| Service | URL | Notes |
+|---------|-----|-------|
+| Frontend | `http://localhost:5173` | Vite dev server, hot-reload |
+| Backend API | `http://localhost:3000` | Rust/Axum |
+| Database | `localhost:5432` | PostgreSQL (Docker) |
+
+The frontend dev server proxies `/api` and `/media` to the backend automatically.
+
+**Mobile device access:** Connect your phone to the same Wi-Fi network.
+Find your machine's local IP (`ip a | grep 192.168` or `hostname -I`), then open
+`http://<your-ip>:5173` on your phone.
+
+### Browser DevTools Mobile Emulation (quick testing without a phone)
+
+1. Open Chrome → DevTools (`F12`) → Toggle device toolbar (`Ctrl+Shift+M`)
+2. Select **iPhone 14 Pro** or **Pixel 7** from the device dropdown
+3. Reload the page — safe-area insets and viewport are emulated
+4. To test touch gestures: enable "Touch" in the three-dot menu inside the device toolbar
+
+---
+
+## Test Accounts
+
+Use the following to get all three roles:
+
+| Role | How to get it |
+|------|--------------|
+| Guest | Join at `/join` with any name |
+| Host | Promote a guest via Host Dashboard, or set role in DB |
+| Admin | POST to `/api/v1/admin/login` or navigate to `/admin/login` |
+
+Admin password: `admin123` (set in `.env`)
+
+---
+
+## Section 1 — Bottom Navigation Bar
+
+**Goal:** Verify the tab bar is present, thumb-accessible, and correct per role.
+
+### 1.1 Bar Presence & Safe Area
+- [ ] Open `/feed` — a bottom tab bar with **Galerie**, a blue circle FAB, and **Konto** appears
+- [ ] On a real iPhone/Safari: the bar does **not** overlap the home indicator (safe-area padding)
+- [ ] On Chrome DevTools with an iPhone device: the bar is above the viewport bottom
+- [ ] Scroll down on a long feed — the bar stays **fixed** at the bottom at all times
+- [ ] The bar has a frosted-glass blur effect (`bg-white/90 backdrop-blur-md`)
+
+### 1.2 Active Tab Indicator
+- [ ] On `/feed` — the Galerie icon is **blue**; Konto icon is gray
+- [ ] Tap **Konto** — navigates to `/account`; Konto icon turns blue, Galerie goes gray
+- [ ] Tap **Galerie** — navigates back to `/feed`
+
+### 1.3 Role Gating
+- [ ] Log in as a **guest** — bar shows Galerie · FAB · Konto (3 items)
+- [ ] Log in as a **host** — same 3 items (dashboard links are inside Account, not the bar)
+- [ ] Log in as **admin** — same 3 items
+
+### 1.4 Auth Pages Hide the Bar
+- [ ] Visit `/join` — **no** bottom bar
+- [ ] Visit `/recover` — **no** bottom bar
+- [ ] Visit `/admin/login` — **no** bottom bar
+
+---
+
+## Section 2 — Upload FAB & Bottom Sheet
+
+**Goal:** Verify the FAB opens the upload sheet and both source options work.
+
+### 2.1 FAB Appearance
+- [ ] The FAB is a blue circle elevated ~12 px above the tab bar
+- [ ] A camera icon with an implicit "+" meaning is shown
+- [ ] When uploads are in the queue (pending or uploading), a **red badge number** appears on the FAB
+
+### 2.2 Sheet Opens & Closes
+- [ ] Tap the FAB — a bottom sheet slides up smoothly (~300 ms) from below
+- [ ] Sheet shows: **Galerie** (blue icon), **Kamera** (purple icon), **Abbrechen**
+- [ ] Tap the gray backdrop — sheet slides **back down** and closes
+- [ ] Tap **Abbrechen** — sheet closes
+- [ ] Swipe the drag handle downward — sheet closes *(if touch gestures are enabled)*
+
+### 2.3 Gallery Source
+- [ ] Tap **Galerie** — the native file picker opens
+- [ ] Select 1–3 images or videos
+- [ ] Sheet closes; you are navigated to `/upload` (the composer page)
+- [ ] Thumbnail strip at the top shows your selected files
+- [ ] **Bottom nav is gone** on this page (immersive full-screen)
+
+### 2.4 Camera Source
+- [ ] Tap the FAB → **Kamera**
+- [ ] Browser asks for camera permission — grant it
+- [ ] Full-screen camera UI appears (existing CameraCapture component)
+- [ ] Take a photo
+- [ ] Camera closes; you are navigated to `/upload` with the captured image in the strip
+
+### 2.5 Upload Composer Page
+- [ ] Back `×` button top-left → returns to `/feed`, clears pending files
+- [ ] Thumbnail strip scrolls horizontally when >3 files
+- [ ] Each thumbnail has a small `×` to remove it — tapping removes that file only
+- [ ] Caption `<textarea>` is **auto-focused** (keyboard opens on mobile)
+- [ ] Type `#party #spaß` in the caption — **quick-tag chips** appear below the textarea in real time
+- [ ] Quick-tag chips are read-only (they reflect what's already in the caption)
+- [ ] The **"Hochladen"** sticky button at the bottom shows the file count: "2 Dateien hochladen"
+- [ ] Button is **disabled** when the strip is empty
+- [ ] Also a smaller "Hochladen" button in the header (convenient on desktop/landscape)
+- [ ] Tap **Hochladen** — files are queued, you are returned to `/feed`
+- [ ] A **slim blue progress bar** appears just above the bottom tab bar while uploading
+- [ ] FAB shows a **red badge** during upload; badge disappears when done
+- [ ] A brief "Fertig" / completed state appears in the UploadQueue (check queue store)
+
+---
+
+## Section 3 — Feed: List View
+
+**Goal:** Verify the default chronological list view.
+
+### 3.1 Default State
+- [ ] Open `/feed` — **list view** is active by default (≡ icon highlighted in the toggle)
+- [ ] Posts appear as full-width cards in reverse-chronological order (newest first)
+
+### 3.2 List Card Anatomy
+For each card, verify:
+- [ ] **Avatar circle** with the uploader's initial letter and a deterministic color
+- [ ] **Display name** + **relative timestamp** ("vor 2 Min.", "vor 1 Std.", etc.)
+- [ ] **Media**: full-width image, or video with a play button overlay
+- [ ] **Caption** below the media (truncated to 3 lines with `...` if long)
+- [ ] **Like count** (❤️) and **Comment count** (💬) action buttons
+- [ ] Tapping the ❤️ toggles the like optimistically (count changes immediately)
+- [ ] Tapping 💬 or the media opens the **Lightbox Modal** (existing behavior, unchanged)
+
+### 3.3 Hashtag Chips (List View Only)
+- [ ] Below the main header, hashtag filter chips are visible in **list view**
+- [ ] Tap a hashtag chip — feed re-fetches filtered by that tag
+- [ ] Tap **Alle** — returns to unfiltered feed
+- [ ] Chips are **not visible** when grid view is active
+
+### 3.4 Infinite Scroll
+- [ ] Scroll to the bottom — more posts load automatically
+- [ ] A spinner appears briefly while loading more
+- [ ] Scroll sentinel triggers ~200 px before the actual bottom
+
+### 3.5 Real-Time Updates (SSE)
+- [ ] Open the feed on two devices/tabs simultaneously
+- [ ] Upload a photo on one — it appears at the **top** of the other's list view in real time
+- [ ] Like a post on one — the count updates on the other
+
+---
+
+## Section 4 — Feed: Grid View & Search
+
+**Goal:** Verify the 3-column grid, search bar, autocomplete, and filter chips.
+
+### 4.1 Switching to Grid View
+- [ ] Tap the ⊞ grid icon in the header — view switches to a 3-column grid
+- [ ] The ≡/⊞ toggle shows ⊞ as active (white background, shadow)
+- [ ] Hashtag chips **disappear**; a **search bar** slides in below the header
+
+### 4.2 Grid Layout
+- [ ] Grid is **3 columns** with equal square cells (no 2-column fallback on mobile)
+- [ ] Videos show a ▶ play button overlay
+- [ ] Tapping a cell opens the Lightbox Modal
+- [ ] Grid background is seamless (0.5px gap between cells)
+
+### 4.3 Search Bar
+- [ ] Search bar shows: 🔍 icon, placeholder "Nutzer oder #Tag suchen…", × clear button
+- [ ] Tapping the bar focuses it and opens the keyboard
+- [ ] × button appears only when there is text in the input; tapping it clears the query
+
+### 4.4 Autocomplete — On Focus (Empty)
+- [ ] Focus the search bar with no text — a dropdown appears with:
+  - Up to 3 uploader names (person icon)
+  - Up to 3 popular tags (#)
+- [ ] The dropdown disappears when the input loses focus (150 ms delay)
+
+### 4.5 Autocomplete — Tag Suggestions
+- [ ] Type `#` — only **tag suggestions** appear (no users), sorted by frequency
+- [ ] Type `#par` — only tags starting with "par" remain (e.g. `#party`, `#parade`)
+- [ ] Tap a suggestion — it's added as a **blue filter chip** below the search bar; input clears
+
+### 4.6 Autocomplete — User Suggestions
+- [ ] Type a partial name (e.g. `max`) — users matching "max" appear first, then tags containing "max"
+- [ ] Tap a user suggestion — chip added: shows the name without `#` prefix
+
+### 4.7 Filter Chips
+- [ ] After selecting a tag filter — grid shows only posts with that tag in the caption
+- [ ] Select a second tag — grid shows posts with **either** tag (OR logic)
+- [ ] Select a user **and** a tag — grid shows posts by that user **that also** have that tag (AND across types)
+- [ ] Each chip has an **× remove button**; tapping it removes only that chip
+- [ ] When 2+ chips are active: **"Alle löschen"** link appears; tapping clears all filters
+- [ ] When no results match: "Keine Treffer für die gewählten Filter." + "Filter zurücksetzen" button
+
+### 4.8 Switching Back to List View
+- [ ] Tap ≡ — list view returns; search bar gone; hashtag chips reappear
+- [ ] Active grid filters are **reset** when switching back to list (no stale state)
+
+---
+
+## Section 5 — Account Page
+
+**Goal:** Verify the profile card, dashboard links, and leave-confirm flow.
+
+### 5.1 Profile Card
+- [ ] Open `/account` via the Konto tab
+- [ ] **Avatar circle** shows your initial letter in a deterministic color
+- [ ] **Display name** and **role badge** (Gast / Gastgeber / Admin) shown
+- [ ] Session expiry date shown in small text below
+
+### 5.2 Dashboard Links (Host/Admin Only)
+- [ ] Log in as a **guest** — no "Dashboards" section visible at all
+- [ ] Log in as a **host** — "Dashboards" section shows ⭐ **Host-Dashboard** → chevron
+  - [ ] Tapping it navigates to `/host`
+  - [ ] No Admin-Dashboard link visible
+- [ ] Log in as **admin** — both links appear:
+  - [ ] ⭐ Host-Dashboard → `/host`
+  - [ ] 🛡 Admin-Dashboard → `/admin`
+
+### 5.3 PIN Card
+- [ ] Amber card shows the 4-digit PIN in large monospace font
+- [ ] **Kopieren** button copies to clipboard; label changes to "Kopiert!" for 2 seconds
+- [ ] If no PIN is stored: fallback message shown
+
+### 5.4 Konto Section
+- [ ] **Gerät wechseln / PIN nutzen** → navigates to `/recover`
+- [ ] **Event verlassen** (red text) → tapping opens a **leave-confirm bottom sheet**
+  - [ ] Sheet shows: "Event verlassen?", "Du wirst abgemeldet…", red "Abmelden" + "Abbrechen"
+  - [ ] Tap backdrop — sheet closes, you remain logged in
+  - [ ] Tap **Abbrechen** — same
+  - [ ] Tap **Abmelden** — you are logged out and redirected to `/join`
+
+### 5.5 No Stale Nav Links
+- [ ] **No** "Zur Galerie" link in the header (navigation is via the bottom bar)
+
+---
+
+## Section 6 — Host Dashboard
+
+**Goal:** Verify the back arrow, collapsible sections, and all existing host actions still work.
+
+### 6.1 Navigation
+- [ ] Open Host Dashboard via Account → ⭐ Host-Dashboard
+- [ ] Page shows a **← back arrow** in the top-left header
+- [ ] Tapping it navigates to `/account`
+- [ ] **No** shield/gallery header icons (removed)
+- [ ] Bottom tab bar is still visible
+
+### 6.2 Statistiken Section (Collapsible)
+- [ ] Section is **expanded** by default with a downward chevron
+- [ ] Shows a 2×2 grid of stat cards: Gäste, Uploads, Uploads status (Offen/Gesperrt), Freigegeben (Ja/Nein)
+- [ ] Numbers are large and readable on mobile
+- [ ] Tap the **Statistiken** header button — section collapses (smooth max-height animation)
+- [ ] Chevron rotates 180° to point upward when collapsed
+- [ ] Tap again — section expands
+
+### 6.3 Event-Einstellungen Section (Collapsible)
+- [ ] Collapse/expand works same as above
+- [ ] Shows **"Uploads sperren"** (amber) / **"Uploads wieder öffnen"** (green) button
+- [ ] Shows **"Galerie freigeben"** (blue) / "Galerie bereits freigegeben" (disabled gray)
+- [ ] Tap "Uploads sperren" — toast confirms, button switches to "Uploads wieder öffnen"
+- [ ] Existing functionality unchanged
+
+### 6.4 Nutzerverwaltung Section (Collapsible)
+- [ ] **Search bar** at top of section filters the user list in real time (client-side)
+- [ ] Each user row shows name, role badge, banned badge (if applicable), upload count/bytes
+- [ ] **Sperren** button triggers the existing ban modal (confirm + hide-uploads checkbox)
+- [ ] **Entsperren** appears for banned users
+- [ ] **Host** button promotes a guest to host role
+- [ ] **Degradieren** appears for hosts (admin only)
+- [ ] Toast notifications appear above the bottom bar (not obscured by it)
+
+---
+
+## Section 7 — Admin Dashboard
+
+**Goal:** Verify the inner tab bar, all 4 tabs, and the new Nutzer tab.
+
+### 7.1 Navigation
+- [ ] Open Admin Dashboard via Account → 🛡 Admin-Dashboard
+- [ ] Page shows **← back arrow** → `/account`
+- [ ] **No** star/gallery header icons
+- [ ] Bottom tab bar visible
+
+### 7.2 Inner Tab Bar
+- [ ] A second tab bar appears **below the main header**, sticky on scroll
+- [ ] 4 tabs: **Stats · Config · Export · Nutzer**
+- [ ] Active tab has a blue bottom border and blue text
+- [ ] Inactive tabs are gray
+- [ ] Tabs are scrollable horizontally (try narrowing viewport)
+- [ ] Switching tabs is instant with no page reload
+
+### 7.3 Stats Tab
+- [ ] Shows a **2×2 grid** of metric cards: Gäste, Uploads, Kommentare, Speicher %
+- [ ] Values are large (`text-3xl`)
+- [ ] Below the grid: a full-width disk usage bar with color coding
+  - Blue ≤ 74%, Amber 75–89%, Red ≥ 90%
+- [ ] Exact used/total/free values shown
+
+### 7.4 Config Tab
+- [ ] Shows stacked label + full-width input for each of the 8 config keys
+- [ ] Inputs are `type="number"` with large touch targets
+- [ ] A **"Speichern"** button is **sticky at the bottom** of the tab (always visible, even on long scroll)
+- [ ] Edit a value → tap Speichern → toast "Konfiguration gespeichert."
+- [ ] Tap Speichern with no changes → toast "Keine Änderungen."
+
+### 7.5 Export Tab
+- [ ] **"Galerie freigeben"** button triggers gallery release
+- [ ] **"Aktualisieren"** button refreshes the jobs list only (no full page flash)
+- [ ] Export jobs listed with status chips: Ausstehend (gray) / Läuft (blue) / Fertig (green) / Fehlgeschlagen (red)
+- [ ] Running jobs show a progress bar
+- [ ] Failed jobs show the error message in red
+
+### 7.6 Nutzer Tab (New)
+- [ ] Users are loaded from `/host/users` (admin shares host permissions)
+- [ ] **Search bar** filters list in real time
+- [ ] Same ban/unban/promote/demote actions as Host dashboard
+- [ ] After an action (e.g. ban) only the users list refreshes, not the whole page
+
+---
+
+## Section 8 — Toast Position
+
+- [ ] On host/admin pages, toasts appear at `bottom-24` (above the bottom nav bar)
+- [ ] Toasts are **not** obscured by the nav bar
+
+---
+
+## Section 9 — Desktop Usability (Second Citizen)
+
+**Goal:** Confirm all pages are still usable on a wide viewport.
+
+### 9.1 Layout Centering
+- [ ] On a 1280px+ viewport, all pages center their content at `max-w-2xl` or `max-w-3xl`
+- [ ] Bottom tab bar spans full width but content columns remain centered
+- [ ] No content is clipped or overflows horizontally
+
+### 9.2 Feed Desktop
+- [ ] List view: cards are centered, readable at 672px max width
+- [ ] Grid view: 3 columns at max-width — cells are larger and look good
+- [ ] Search bar is full-width within the max-width container
+
+### 9.3 Upload Composer Desktop
+- [ ] Upload page is full-height, centered column
+- [ ] Both the header "Hochladen" button AND the sticky bottom button are present
+- [ ] Desktop users can click the header button (more convenient without reaching to bottom)
+
+### 9.4 Host / Admin Desktop
+- [ ] Host collapsible sections work with mouse clicks
+- [ ] Admin inner tabs work with mouse clicks; all 4 tabs visible without scrolling at 1280px
+- [ ] Config tab sticky save is visible on desktop scroll
+
+---
+
+## Section 10 — Edge Cases
+
+### 10.1 Upload with No Files Selected
+- [ ] Navigate directly to `/upload` in the browser
+- [ ] No files pending → "Keine Dateien ausgewählt" screen shown with "Zurück" button
+- [ ] "Hochladen" button is disabled
+
+### 10.2 Rate Limiting
+- [ ] Upload rapidly beyond the configured limit (default: 10/hour)
+- [ ] A `429` response is received
+- [ ] The countdown banner appears above the bottom nav: "Upload-Limit erreicht. Wird in X Sek. automatisch fortgesetzt."
+- [ ] After the countdown, the queue resumes automatically
+
+### 10.3 SSE Reconnect
+- [ ] Stop the backend briefly and restart
+- [ ] The feed reconnects (SSE) — new uploads appear once the backend is back
+
+### 10.4 Back Navigation from Upload
+- [ ] Pick files → navigate to `/upload`
+- [ ] Tap `×` → files are discarded (`clearPending()` runs, object URLs are revoked)
+- [ ] Navigate back to `/upload` directly — "Keine Dateien ausgewählt" shown (not stale files)
+
+### 10.5 Grid Filter Persistence
+- [ ] Set a filter chip in grid view
+- [ ] Switch to list view — filter is cleared (list always shows full unfiltered feed)
+- [ ] Switch back to grid — search bar is empty, no stale chips
+
+---
+
+## Known Limitations (Not Bugs)
+
+| Item | Status |
+|------|--------|
+| "Anzeigename ändern" in Account | Deferred — shown as disabled; requires `/me` PATCH endpoint |
+| Upload count in Account profile card | Deferred — requires `/me` GET endpoint |
+| CSS collapse animation on host sections | Uses `max-h` trick; may be slightly sluggish for very large user lists |
+| Autocomplete results | Derived from currently-loaded posts only; new posts via SSE update the pool automatically |

frontend/src/lib/components/BottomNav.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { uploadSheetOpen, uploadBadgeCount } from '$lib/ui-store';
+
+	function isActive(path: string): boolean {
+		return $page.url.pathname.startsWith(path);
+	}
+</script>
+
+<!-- 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"
+	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">
+		<!-- Feed tab -->
+		<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'}"
+			aria-label="Galerie"
+		>
+			<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>Galerie</span>
+		</a>
+
+		<!-- Upload FAB (center, elevated) -->
+		<div class="relative -translate-y-3">
+			<button
+				onclick={() => ($uploadSheetOpen = true)}
+				class="relative flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition active:scale-95 hover:bg-blue-700"
+				aria-label="Hochladen"
+			>
+				<!-- Camera + plus icon -->
+				<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>
+				<!-- Badge -->
+				{#if $uploadBadgeCount > 0}
+					<span
+						class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
+					>
+						{$uploadBadgeCount > 9 ? '9+' : $uploadBadgeCount}
+					</span>
+				{/if}
+			</button>
+		</div>
+
+		<!-- Account tab -->
+		<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'}"
+			aria-label="Konto"
+		>
+			<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" />
+			</svg>
+			<span>Konto</span>
+		</a>
+	</div>
+</nav>

frontend/src/lib/components/FeedGrid.svelte

@@ -6,9 +6,10 @@
 		onlike: (id: string) => void;
 		oncomment: (id: string) => void;
 		onselect: (upload: FeedUpload) => void;
+		threeCol?: boolean;
 	}
 
-	let { uploads, onlike, oncomment, onselect }: Props = $props();
+	let { uploads, onlike, oncomment, onselect, threeCol = false }: Props = $props();
 
 	function isVideo(mime: string): boolean {
 		return mime.startsWith('video/');
@@ -21,7 +22,7 @@
 	}
 </script>
 
-<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
+<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">
 			<button

frontend/src/lib/components/FeedListCard.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import type { FeedUpload } from '$lib/types';
+
+	interface Props {
+		upload: FeedUpload;
+		onlike: (id: string) => void;
+		oncomment: (id: string) => void;
+		onselect: (upload: FeedUpload) => void;
+	}
+
+	let { upload, onlike, oncomment, onselect }: Props = $props();
+
+	function isVideo(mime: string): boolean {
+		return mime.startsWith('video/');
+	}
+
+	function mediaUrl(u: FeedUpload): string {
+		return u.preview_url ?? u.thumbnail_url ?? '';
+	}
+
+	function relativeTime(iso: string): string {
+		const diff = Date.now() - new Date(iso).getTime();
+		const mins = Math.floor(diff / 60000);
+		if (mins < 1) return 'gerade eben';
+		if (mins < 60) return `vor ${mins} Min.`;
+		const hrs = Math.floor(mins / 60);
+		if (hrs < 24) return `vor ${hrs} Std.`;
+		const days = Math.floor(hrs / 24);
+		return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
+	}
+
+	function initial(name: string): string {
+		return name[0]?.toUpperCase() ?? '?';
+	}
+
+	// Deterministic color from name
+	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',
+		'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];
+	}
+</script>
+
+<article class="bg-white">
+	<!-- 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>
+	</div>
+
+	<!-- Media -->
+	<button
+		class="block w-full"
+		onclick={() => onselect(upload)}
+		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}
+				<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">
+						<svg class="h-7 w-7 pl-0.5" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M8 5v14l11-7z" />
+						</svg>
+					</span>
+				</div>
+			</div>
+		{:else if mediaUrl(upload)}
+			<img
+				src={mediaUrl(upload)}
+				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">
+					<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>
+		{/if}
+	</button>
+
+	<!-- Actions row -->
+	<div class="flex items-center gap-4 px-4 py-2">
+		<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'}"
+		>
+			<svg
+				class="h-5 w-5 {upload.liked_by_me ? 'fill-red-500' : ''}"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+			</svg>
+			{upload.like_count}
+		</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"
+		>
+			<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>
+	</div>
+
+	<!-- Caption -->
+	{#if upload.caption}
+		<p class="px-4 pb-3 text-sm text-gray-800 [overflow-wrap:anywhere]">
+			{upload.caption}
+		</p>
+	{/if}
+
+	<div class="border-b border-gray-100"></div>
+</article>

frontend/src/lib/components/OnboardingGuide.svelte

@@ -15,7 +15,7 @@
 		{
 			icon: '⬆️',
 			title: 'Fotos & Videos hochladen',
-			body: 'Tippe oben auf „Hochladen", um Fotos aus deiner Galerie oder direkt mit der Kamera aufzunehmen. Mehrere Dateien auf einmal sind kein Problem!'
+			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!'
 		},
 		{
 			icon: '#️⃣',

frontend/src/lib/components/UploadQueue.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { queueItems, isProcessing, retryItem, removeItem, clearCompleted } from '$lib/upload-queue';
+	import { queueItems, isProcessing, retryItem, removeItem, clearCompleted, rateLimitRetryAt } from '$lib/upload-queue';
 	import type { QueueItem } from '$lib/upload-queue';
 
 	function formatSize(bytes: number): string {
@@ -28,6 +28,25 @@
 
 	let items = $derived($queueItems);
 	let hasCompleted = $derived(items.some((i) => i.status === 'done'));
+
+	// Countdown for rate-limit banner
+	let countdown = $state(0);
+
+	$effect(() => {
+		const retryAt = $rateLimitRetryAt;
+		if (!retryAt) {
+			countdown = 0;
+			return;
+		}
+
+		countdown = Math.ceil((retryAt - Date.now()) / 1000);
+		const interval = setInterval(() => {
+			countdown = Math.ceil((retryAt - Date.now()) / 1000);
+			if (countdown <= 0) clearInterval(interval);
+		}, 1000);
+
+		return () => clearInterval(interval);
+	});
 </script>
 
 {#if items.length > 0}
@@ -49,6 +68,12 @@
 			{/if}
 		</div>
 
+		{#if $rateLimitRetryAt && countdown > 0}
+			<div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800">
+				Upload-Limit erreicht. Wird in {countdown} Sek. automatisch fortgesetzt.
+			</div>
+		{/if}
+
 		<ul class="divide-y divide-gray-100">
 			{#each items as item (item.id)}
 				<li class="px-4 py-3">

frontend/src/lib/components/UploadSheet.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { uploadSheetOpen } from '$lib/ui-store';
+	import { pendingFiles } from '$lib/pending-upload-store';
+	import CameraCapture from '$lib/components/CameraCapture.svelte';
+	import type { PendingFile } from '$lib/pending-upload-store';
+
+	let showCamera = $state(false);
+	let fileInput: HTMLInputElement;
+
+	// Keep the sheet and backdrop always in the DOM for smooth CSS transitions.
+	let open = $derived($uploadSheetOpen);
+
+	function close() {
+		uploadSheetOpen.set(false);
+	}
+
+	function openGallery() {
+		fileInput?.click();
+	}
+
+	function openCamera() {
+		showCamera = true;
+	}
+
+	async function handleFiles() {
+		const files = fileInput?.files;
+		if (!files || files.length === 0) return;
+
+		const staged: PendingFile[] = [];
+		for (const file of files) {
+			staged.push({ file, previewUrl: URL.createObjectURL(file) });
+		}
+		pendingFiles.set(staged);
+		fileInput.value = '';
+		close();
+		await goto('/upload');
+	}
+
+	async function handleCapture(blob: Blob, type: 'photo' | 'video') {
+		const ext = type === 'photo' ? 'jpg' : blob.type.includes('mp4') ? 'mp4' : 'webm';
+		const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+		const fileName = `${type}_${timestamp}.${ext}`;
+		const file = new File([blob], fileName, { type: blob.type });
+		pendingFiles.set([{ file, previewUrl: URL.createObjectURL(file) }]);
+		showCamera = false;
+		close();
+		await goto('/upload');
+	}
+
+	function handleCameraClose() {
+		showCamera = false;
+	}
+</script>
+
+<!-- Camera (rendered outside sheet so it gets full viewport) -->
+{#if showCamera}
+	<CameraCapture oncapture={handleCapture} onclose={handleCameraClose} />
+{/if}
+
+<!-- Hidden file input -->
+<input
+	bind:this={fileInput}
+	type="file"
+	accept="image/*,video/*"
+	multiple
+	class="hidden"
+	onchange={handleFiles}
+/>
+
+<!-- Backdrop -->
+<div
+	class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300"
+	class:opacity-0={!open}
+	class:pointer-events-none={!open}
+	class:opacity-100={open}
+	onclick={close}
+	aria-hidden="true"
+></div>
+
+<!-- Sheet -->
+<div
+	class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300"
+	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>
+
+	<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"
+		>
+			<span class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-100 text-blue-600">
+				<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>
+			</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"
+		>
+			<span class="flex h-11 w-11 items-center justify-center rounded-full bg-purple-100 text-purple-600">
+				<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>
+			</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"
+		>
+			Abbrechen
+		</button>
+	</div>
+</div>

frontend/src/lib/pending-upload-store.ts

@@ -0,0 +1,17 @@
+import { writable } from 'svelte/store';
+
+export interface PendingFile {
+	file: File;
+	previewUrl: string; // URL.createObjectURL result — revoke after use
+}
+
+export const pendingFiles = writable<PendingFile[]>([]);
+export const pendingCaption = writable('');
+
+export function clearPending() {
+	pendingFiles.update((files) => {
+		for (const f of files) URL.revokeObjectURL(f.previewUrl);
+		return [];
+	});
+	pendingCaption.set('');
+}

frontend/src/lib/ui-store.ts

@@ -0,0 +1,13 @@
+import { writable, derived } from 'svelte/store';
+import { queueItems } from './upload-queue';
+
+// Controls BottomNav visibility. Upload page sets this false on mount and restores on destroy.
+export const showBottomNav = writable(true);
+
+// Controls the UploadSheet overlay. FAB sets true; sheet sets false.
+export const uploadSheetOpen = writable(false);
+
+// Count of items currently pending or uploading — shown as FAB badge.
+export const uploadBadgeCount = derived(queueItems, ($items) =>
+	$items.filter((i) => i.status === 'pending' || i.status === 'uploading').length
+);

frontend/src/lib/upload-queue.ts

@@ -18,6 +18,9 @@ export interface QueueItem {
 export const queueItems = writable<QueueItem[]>([]);
 export const isProcessing = writable(false);
 
+/** Set to the timestamp (ms) at which the rate-limit lifts, or null when clear. */
+export const rateLimitRetryAt = writable<number | null>(null);
+
 const DB_NAME = 'eventsnap-uploads';
 const STORE_NAME = 'queue';
 
@@ -35,6 +38,14 @@ async function getDb(): Promise<IDBPDatabase> {
 	return db;
 }
 
+class RateLimitError extends Error {
+	retryAfterSecs: number;
+	constructor(secs: number) {
+		super('rate_limited');
+		this.retryAfterSecs = secs;
+	}
+}
+
 export async function loadQueue(): Promise<void> {
 	const database = await getDb();
 	const all = await database.getAll(STORE_NAME);
@@ -136,7 +147,21 @@ async function processQueue(): Promise<void> {
 			const next = items.find((item) => item.status === 'pending');
 			if (!next) break;
 
+			try {
 				await uploadItem(next.id);
+			} catch (e) {
+				if (e instanceof RateLimitError) {
+					// Keep all pending items as-is; schedule queue resume when limit lifts
+					const retryAt = Date.now() + e.retryAfterSecs * 1000;
+					rateLimitRetryAt.set(retryAt);
+					setTimeout(() => {
+						rateLimitRetryAt.set(null);
+						processQueue();
+					}, e.retryAfterSecs * 1000);
+					break;
+				}
+				// Other errors are already handled inside uploadItem (marked as 'error')
+			}
 		}
 	} finally {
 		processing = false;
@@ -148,7 +173,6 @@ async function uploadItem(id: string): Promise<void> {
 	const database = await getDb();
 	const entry = await database.get(STORE_NAME, id);
 	if (!entry || !entry.blob) {
-		// No blob — mark as error
 		updateItemStatus(id, 'error', 'Datei nicht gefunden.');
 		return;
 	}
@@ -184,6 +208,14 @@ async function uploadItem(id: string): Promise<void> {
 			xhr.addEventListener('load', () => {
 				if (xhr.status >= 200 && xhr.status < 300) {
 					resolve();
+				} else if (xhr.status === 429) {
+					try {
+						const body = JSON.parse(xhr.responseText);
+						const secs = typeof body.retry_after_secs === 'number' ? body.retry_after_secs : 60;
+						reject(new RateLimitError(secs));
+					} catch {
+						reject(new RateLimitError(60));
+					}
 				} else {
 					try {
 						const body = JSON.parse(xhr.responseText);
@@ -205,6 +237,13 @@ async function uploadItem(id: string): Promise<void> {
 		await database.put(STORE_NAME, entry);
 		updateItemStatus(id, 'done');
 	} catch (e) {
+		if (e instanceof RateLimitError) {
+			// Reset to pending so it will be retried when the queue resumes
+			entry.status = 'pending';
+			await database.put(STORE_NAME, entry);
+			updateItemStatus(id, 'pending');
+			throw e; // Propagate to processQueue for scheduling
+		}
 		const msg = e instanceof Error ? e.message : 'Upload fehlgeschlagen.';
 		entry.status = 'error';
 		entry.error = msg;
@@ -224,7 +263,7 @@ function updateItemStatus(
 				? {
 						...item,
 						status,
-						progress: status === 'done' ? 100 : status === 'error' ? item.progress : item.progress,
+						progress: status === 'done' ? 100 : status === 'pending' ? 0 : item.progress,
 						error
 					}
 				: item

frontend/src/routes/+layout.svelte

@@ -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}

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

@@ -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 items-center gap-4">
-				<div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-xl font-bold text-blue-600">
+				<div
-					{#if displayName}
+					class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
-						{displayName[0].toUpperCase()}
+						{avatarColor(displayName)}"
-					{:else}
+				>
-						?
+					{displayName ? displayName[0].toUpperCase() : '?'}
-					{/if}
 				</div>
-				<div>
+				<div class="min-w-0">
-					<p class="font-semibold text-gray-900">{displayName ?? 'Unbekannt'}</p>
+					<p class="truncate text-lg font-bold text-gray-900">{displayName ?? 'Unbekannt'}</p>
-					<span class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {roleColor(role)}">
+					<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 -->
+		<!-- Konto section -->
-		<div class="rounded-xl border border-gray-200 bg-white p-5">
+		<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
-			<h2 class="mb-1 font-semibold text-gray-900">Gerät wechseln?</h2>
+			<div class="border-b border-gray-100 px-5 py-3">
-			<p class="text-sm text-gray-600">
+				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Konto</h2>
-				Auf einem anderen Gerät kannst du dein Konto mit deinem Namen und PIN wiederherstellen.
-			</p>
-			<a
-				href="/recover"
-				class="mt-3 inline-block text-sm font-medium text-blue-600 hover:underline"
-			>
-				Zur Wiederherstellungs-Seite →
-			</a>
 			</div>
 
-		<!-- Logout -->
+			<!-- Recover / device switch -->
+			<a
+				href="/recover"
+				class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
+			>
+				<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>
+
+			<!-- 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="w-full rounded-xl border border-red-200 bg-white py-3 text-sm font-medium text-red-600 transition hover:bg-red-50"
+				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>
+	</div>
+{/if}

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

@@ -23,6 +23,17 @@
 		completed_at: string | null;
 	}
 
+	interface UserSummary {
+		id: string;
+		display_name: string;
+		role: string;
+		is_banned: boolean;
+		uploads_hidden: boolean;
+		upload_count: number;
+		total_upload_bytes: number;
+		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)',
@@ -34,20 +45,42 @@
 		compression_concurrency: 'Kompressions-Worker'
 	};
 
+	type AdminTab = 'stats' | 'config' | 'export' | 'users';
+	const TAB_LABELS: Record<AdminTab, string> = { stats: 'Stats', config: 'Config', export: 'Export', users: 'Nutzer' };
+
+	let activeTab = $state<AdminTab>('stats');
+
 	let stats = $state<StatsDto | null>(null);
 	let config = $state<Record<string, string>>({});
 	let configDraft = $state<Record<string, string>>({});
 	let exportJobs = $state<ExportJob[]>([]);
+	let users = $state<UserSummary[]>([]);
 	let loading = $state(true);
 	let saving = $state(false);
 	let error = $state<string | null>(null);
 	let toast = $state<string | null>(null);
+	let exportJobsRefreshing = $state(false);
+
+	// Nutzer tab state
+	let userSearch = $state('');
+	let filteredUsers = $derived(
+		userSearch.trim()
+			? users.filter((u) => u.display_name.toLowerCase().includes(userSearch.toLowerCase()))
+			: users
+	);
+
+	// Ban modal state
+	let banTarget = $state<UserSummary | null>(null);
+	let banHideUploads = $state(false);
+	let banSubmitting = $state(false);
+
+	const myRole = getRole();
 
 	onMount(async () => {
 		const token = getToken();
 		const role = getRole();
 		if (!token || role !== 'admin') {
-			goto('/join');
+			goto('/admin/login');
 			return;
 		}
 		await reload();
@@ -57,10 +90,11 @@
 		loading = true;
 		error = null;
 		try {
-			[stats, config, exportJobs] = await Promise.all([
+			[stats, config, exportJobs, users] = await Promise.all([
 				api.get<StatsDto>('/admin/stats'),
 				api.get<Record<string, string>>('/admin/config'),
-				api.get<ExportJob[]>('/admin/export/jobs')
+				api.get<ExportJob[]>('/admin/export/jobs'),
+				api.get<UserSummary[]>('/host/users')
 			]);
 			configDraft = { ...config };
 		} catch (e: unknown) {
@@ -70,6 +104,15 @@
 		}
 	}
 
+	async function refreshExportJobs() {
+		exportJobsRefreshing = true;
+		try {
+			exportJobs = await api.get<ExportJob[]>('/admin/export/jobs');
+		} finally {
+			exportJobsRefreshing = false;
+		}
+	}
+
 	function showToast(msg: string) {
 		toast = msg;
 		setTimeout(() => (toast = null), 3000);
@@ -78,11 +121,10 @@
 	async function saveConfig() {
 		saving = true;
 		try {
-			// Only send changed values
 			const changes: Record<string, string> = {};
 			for (const key of Object.keys(configDraft)) {
 				if (configDraft[key] !== config[key]) {
-					changes[key] = configDraft[key];
+					changes[key] = String(configDraft[key]);
 				}
 			}
 			if (Object.keys(changes).length === 0) {
@@ -99,15 +141,74 @@
 		}
 	}
 
+	async function releaseGallery() {
+		try {
+			await api.post('/host/gallery/release');
+			showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	function openBanModal(user: UserSummary) {
+		banTarget = user;
+		banHideUploads = false;
+	}
+
+	async function confirmBan() {
+		if (!banTarget) return;
+		banSubmitting = true;
+		try {
+			await api.post(`/host/users/${banTarget.id}/ban`, { hide_uploads: banHideUploads });
+			showToast(`${banTarget.display_name} wurde gesperrt.`);
+			banTarget = null;
+			users = await api.get<UserSummary[]>('/host/users');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		} finally {
+			banSubmitting = false;
+		}
+	}
+
+	async function unban(user: UserSummary) {
+		try {
+			await api.post(`/host/users/${user.id}/unban`);
+			showToast(`Sperre für ${user.display_name} aufgehoben.`);
+			users = await api.get<UserSummary[]>('/host/users');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	async function promoteToHost(user: UserSummary) {
+		try {
+			await api.patch(`/host/users/${user.id}/role`, { role: 'host' });
+			showToast(`${user.display_name} ist jetzt Host.`);
+			users = await api.get<UserSummary[]>('/host/users');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	async function demoteToGuest(user: UserSummary) {
+		try {
+			await api.patch(`/host/users/${user.id}/role`, { role: 'guest' });
+			showToast(`${user.display_name} ist jetzt Gast.`);
+			users = await api.get<UserSummary[]>('/host/users');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
 	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`;
 		return `${(bytes / 1024).toFixed(1)} KB`;
 	}
 
-	function diskPct(stats: StatsDto): number {
+	function diskPct(s: StatsDto): number {
-		if (stats.disk_total_bytes === 0) return 0;
+		if (s.disk_total_bytes === 0) return 0;
-		return Math.round((stats.disk_used_bytes / stats.disk_total_bytes) * 100);
+		return Math.round((s.disk_used_bytes / s.disk_total_bytes) * 100);
 	}
 
 	function jobLabel(type: string): string {
@@ -134,98 +235,167 @@
 	}
 </script>
 
+<!-- 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">
+				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>
+			<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">
+					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <!-- Toast -->
 {#if toast}
-	<div class="fixed bottom-6 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">
 		{toast}
 	</div>
 {/if}
 
-<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-3xl items-center justify-between px-4 py-4">
+		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
-			<h1 class="text-xl font-bold text-gray-900">Admin Dashboard</h1>
+			<button
-			<div class="flex items-center gap-3">
+				onclick={() => goto('/account')}
-				<a href="/host" class="text-sm text-blue-600 hover:underline">Host-Dashboard</a>
+				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
-				<a href="/feed" class="text-sm text-gray-500 hover:text-gray-700">Galerie</a>
+				aria-label="Zurück"
-			</div>
+			>
+				<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>
 		</div>
 	</div>
 
-	<div class="mx-auto max-w-3xl space-y-4 p-4">
+	<!-- Inner tab bar -->
+	<div class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white">
+		<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'}"
+				>
+					{label}
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	<div class="mx-auto max-w-3xl p-4">
 		{#if loading}
 			<div class="py-16 text-center text-gray-400">Laden…</div>
 		{:else if error}
 			<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
 		{:else}
-			<!-- Stats -->
-			{#if stats}
-				<div class="rounded-xl border border-gray-200 bg-white p-5">
-					<h2 class="mb-4 font-semibold text-gray-900">Statistiken</h2>
-					<div class="grid grid-cols-3 gap-4 text-center">
-						<div class="rounded-lg bg-gray-50 p-3">
-							<p class="text-2xl font-bold text-gray-900">{stats.user_count}</p>
-							<p class="text-xs text-gray-500">Gäste</p>
-						</div>
-						<div class="rounded-lg bg-gray-50 p-3">
-							<p class="text-2xl font-bold text-gray-900">{stats.upload_count}</p>
-							<p class="text-xs text-gray-500">Uploads</p>
-						</div>
-						<div class="rounded-lg bg-gray-50 p-3">
-							<p class="text-2xl font-bold text-gray-900">{stats.comment_count}</p>
-							<p class="text-xs text-gray-500">Kommentare</p>
-						</div>
-					</div>
 
-					<!-- Disk usage -->
+			<!-- ── Stats tab ────────────────────────────────────────────────── -->
-					<div class="mt-4">
+			{#if activeTab === 'stats'}
-						<div class="mb-1 flex items-center justify-between text-xs text-gray-500">
+				<div class="space-y-3">
-							<span>Speicher</span>
+					{#if stats}
-							<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)} ({diskPct(stats)} %)</span>
+						<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>
-						<div class="h-2 overflow-hidden rounded-full bg-gray-200">
+							<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>
+							<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>
+							<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>
+						</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">
+								<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-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 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
+							<p class="mt-1.5 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
-					</div>
 						</div>
 					{/if}
+				</div>
 
-			<!-- Config -->
+			<!-- ── Config tab ───────────────────────────────────────────────── -->
-			<div class="rounded-xl border border-gray-200 bg-white p-5">
+			{:else if activeTab === 'config'}
-				<h2 class="mb-4 font-semibold text-gray-900">Konfiguration</h2>
+				<div class="relative">
-				<div class="space-y-3">
+					<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 class="flex items-center gap-3">
+							<div>
-							<label for={key} class="w-56 shrink-0 text-sm text-gray-700">{label}</label>
+								<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-32 rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
+									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>
 						{/each}
 					</div>
+					<!-- Sticky save button -->
+					<div class="sticky bottom-0 border-t border-gray-100 bg-white px-5 py-3">
 						<button
 							onclick={saveConfig}
 							disabled={saving}
-					class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white 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"
 						>
 							{saving ? 'Wird gespeichert…' : 'Speichern'}
 						</button>
 					</div>
+				</div>
+
+			<!-- ── Export tab ───────────────────────────────────────────────── -->
+			{: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>
+						<button
+							onclick={releaseGallery}
+							class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700"
+						>
+							Galerie freigeben
+						</button>
+					</div>
 
 					<!-- Export jobs -->
 					<div class="rounded-xl border border-gray-200 bg-white p-5">
 						<div class="mb-4 flex items-center justify-between">
-					<h2 class="font-semibold text-gray-900">Export-Jobs</h2>
+							<h3 class="font-semibold text-gray-900">Export-Jobs</h3>
-					<button onclick={reload} class="text-xs text-blue-600 hover:underline">Aktualisieren</button>
+							<button
+								onclick={refreshExportJobs}
+								disabled={exportJobsRefreshing}
+								class="text-xs text-blue-600 hover:underline disabled:opacity-50"
+							>
+								{exportJobsRefreshing ? 'Lädt…' : 'Aktualisieren'}
+							</button>
 						</div>
 						{#if exportJobs.length === 0}
 							<p class="text-sm text-gray-400">Noch keine Export-Jobs.</p>
@@ -242,14 +412,10 @@
 										{#if job.status === 'running'}
 											<div class="mt-2">
 												<div class="mb-1 flex justify-between text-xs text-gray-500">
-											<span>Fortschritt</span>
+													<span>Fortschritt</span><span>{job.progress_pct} %</span>
-											<span>{job.progress_pct} %</span>
 												</div>
 												<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
-											<div
+													<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {job.progress_pct}%"></div>
-												class="h-full rounded-full bg-blue-500 transition-all"
-												style="width: {job.progress_pct}%"
-											></div>
 												</div>
 											</div>
 										{/if}
@@ -261,6 +427,76 @@
 							</div>
 						{/if}
 					</div>
+				</div>
+
+			<!-- ── Nutzer tab ───────────────────────────────────────────────── -->
+			{:else if activeTab === 'users'}
+				<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+					<!-- 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">
+								<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"
+							/>
+						</div>
+					</div>
+					{#if filteredUsers.length === 0}
+						<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
+					{:else}
+						<div class="divide-y divide-gray-100">
+							{#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>
+											{#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>
+											{: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>
+											{/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>
+											{/if}
+										</div>
+										<p class="text-xs text-gray-400">
+											{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
+												</button>
+											{/if}
+										{/if}
+									</div>
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			{/if}
 		{/if}
 	</div>
 </div>

frontend/src/routes/admin/login/+page.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { api, ApiError } from '$lib/api';
+	import { setAuth, getRole } from '$lib/auth';
+	import { browser } from '$app/environment';
+
+	// Already logged in as admin → go straight to dashboard
+	if (browser && getRole() === 'admin') {
+		goto('/admin');
+	}
+
+	let password = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	async function handleLogin() {
+		if (!password) return;
+		loading = true;
+		error = '';
+		try {
+			const res = await api.post<{ jwt: string }>('/admin/login', { password });
+			// Admin sessions have no PIN; pass null so setAuth doesn't overwrite a guest PIN
+			setAuth(res.jwt, null, '');
+			goto('/admin');
+		} catch (e) {
+			if (e instanceof ApiError) {
+				error = e.message;
+			} else {
+				error = 'Ein Fehler ist aufgetreten.';
+			}
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
+	<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>
+
+		<form onsubmit={(e) => { e.preventDefault(); handleLogin(); }}>
+			<input
+				type="password"
+				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"
+			/>
+
+			{#if error}
+				<p class="mb-3 text-sm text-red-600">{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"
+			>
+				{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>
+	</div>
+</div>

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

@@ -72,13 +72,28 @@
 		}
 	}
 
+	async function downloadFile(endpoint: string, filename: string) {
+		const token = getToken();
+		const res = await fetch(endpoint, {
+			headers: token ? { Authorization: `Bearer ${token}` } : {}
+		});
+		if (!res.ok) return;
+		const blob = await res.blob();
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = filename;
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+
 	function downloadZip() {
-		window.location.href = '/api/v1/export/zip';
+		downloadFile('/api/v1/export/zip', 'Gallery.zip');
 	}
 
 	function downloadHtml() {
 		if (localStorage.getItem(HTML_GUIDE_KEY)) {
-			window.location.href = '/api/v1/export/html';
+			downloadFile('/api/v1/export/html', 'Memories.zip');
 		} else {
 			showHtmlGuide = true;
 		}
@@ -87,7 +102,7 @@
 	function confirmHtmlDownload() {
 		localStorage.setItem(HTML_GUIDE_KEY, '1');
 		showHtmlGuide = false;
-		window.location.href = '/api/v1/export/html';
+		downloadFile('/api/v1/export/html', 'Memories.zip');
 	}
 </script>
 
@@ -122,11 +137,10 @@
 	</div>
 {/if}
 
-<div class="min-h-screen bg-gray-50">
+<div class="min-h-screen bg-gray-50 pb-24">
 	<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">Export</h1>
-			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
 		</div>
 	</div>
 

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

@@ -5,6 +5,7 @@
 	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,8 +19,75 @@
 	let selectedUpload = $state<FeedUpload | null>(null);
 	let sentinel: HTMLDivElement;
 
+	// 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');
@@ -36,25 +104,15 @@
 					uploads = [upload, ...uploads];
 				} catch { /* ignore */ }
 			}),
-			onSseEvent('upload-processed', () => {
+			onSseEvent('upload-processed', () => loadFeed(true)),
-				// Reload feed to get updated preview URLs
+			onSseEvent('like-update', () => loadFeed(true)),
-				loadFeed(true);
+			onSseEvent('new-comment', () => 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) {
+					if (entries[0].isIntersecting && nextCursor && !loadingMore) loadMore();
-						loadMore();
-					}
 				},
 				{ rootMargin: '200px' }
 			);
@@ -73,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;
-			}
 			nextCursor = res.next_cursor;
-		} catch {
+		} catch { /* ignore */ }
-			// Ignore
-		}
 	}
 
 	async function loadMore() {
@@ -95,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 {
+		} catch { /* ignore */ } finally {
-			// Ignore
-		} finally {
 			loadingMore = false;
 		}
 	}
@@ -109,9 +156,7 @@
 	async function loadHashtags() {
 		try {
 			hashtags = await api.get<HashtagCount[]>('/hashtags');
-		} catch {
+		} catch { /* ignore */ }
-			// Ignore
-		}
 	}
 
 	function selectHashtag(tag: string | null) {
@@ -123,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
+					like_count: selectedUpload.liked_by_me ? selectedUpload.like_count - 1 : selectedUpload.like_count + 1,
-						? selectedUpload.like_count - 1
-						: selectedUpload.like_count + 1
 				};
 			}
-		} catch {
+		} catch { /* ignore */ }
-			// Ignore
-		}
 	}
 
 	function openComments(id: string) {
@@ -153,61 +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">
+<div class="min-h-screen bg-gray-50 pb-24">
-	<!-- Header -->
+	<!-- Sticky header -->
-	<div class="sticky top-0 z-40 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">
 		<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
+			<!-- List / Grid toggle -->
-					href="/upload"
+			<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
-					class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-blue-700"
+				<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
+					<!-- bars-3 -->
-				</a>
+					<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-				<a
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-					href="/account"
-					class="text-sm text-gray-500 hover:text-gray-700"
-					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" />
 					</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 -->
+		<!-- 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>
+		{/if}
+
+		<!-- 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>
 
-	<!-- Feed grid -->
+					<!-- Autocomplete dropdown -->
-	<div class="mx-auto max-w-2xl p-4">
+					{#if showAutocomplete && suggestions.length > 0}
-		{#if uploads.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="py-16 text-center">
+							{#each suggestions as item}
-				<p class="text-lg text-gray-400">Noch keine Fotos.</p>
+								<button
-				<p class="mt-1 text-sm text-gray-400">Sei der Erste und lade etwas hoch!</p>
+									class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50"
-				<a href="/upload" class="mt-4 inline-block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white">
+									onmousedown={() => selectSuggestion(item)}
-					Jetzt hochladen
+								>
-				</a>
+									{#if item.type === 'user'}
-			</div>
+										<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}
-			<FeedGrid
+										<span class="text-blue-500 font-medium">#</span>
-				{uploads}
+										<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>

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

@@ -27,14 +27,28 @@
 	let loading = $state(true);
 	let error = $state<string | null>(null);
 
+	// Collapsible section state
+	let statsOpen = $state(true);
+	let settingsOpen = $state(true);
+	let usersOpen = $state(true);
+
+	// User search
+	let userSearch = $state('');
+	let filteredUsers = $derived(
+		userSearch.trim()
+			? users.filter((u) => u.display_name.toLowerCase().includes(userSearch.toLowerCase()))
+			: users
+	);
+
 	// Ban modal state
 	let banTarget = $state<UserSummary | null>(null);
 	let banHideUploads = $state(false);
 	let banSubmitting = $state(false);
 
-	// Toast state
 	let toast = $state<string | null>(null);
 
+	const myRole = getRole();
+
 	onMount(async () => {
 		const token = getToken();
 		const role = getRole();
@@ -146,8 +160,6 @@
 		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
 		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 	}
-
-	const myRole = getRole();
 </script>
 
 <!-- Ban modal -->
@@ -187,79 +199,154 @@
 
 <!-- Toast -->
 {#if toast}
-	<div class="fixed bottom-6 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">
 		{toast}
 	</div>
 {/if}
 
-<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-3xl items-center justify-between px-4 py-4">
+		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
-			<div>
+			<button
-				<h1 class="text-xl font-bold text-gray-900">Host Dashboard</h1>
+				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"
+				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>
+			<div class="min-w-0">
+				<h1 class="text-xl font-bold text-gray-900">Host-Dashboard</h1>
 				{#if event}
-					<p class="text-sm text-gray-500">{event.name}</p>
+					<p class="truncate text-sm text-gray-500">{event.name}</p>
 				{/if}
 			</div>
-			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
 		</div>
 	</div>
 
-	<div class="mx-auto max-w-3xl space-y-4 p-4">
+	<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>
 		{:else if error}
 			<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
 		{:else if event}
-			<!-- Event controls -->
+
-			<div class="rounded-xl border border-gray-200 bg-white p-5">
+			<!-- ── Statistiken ─────────────────────────────────────────────── -->
-				<h2 class="mb-4 font-semibold text-gray-900">Veranstaltung</h2>
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
-				<div class="flex flex-wrap gap-3">
+				<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>
+					<svg
+						class="h-5 w-5 text-gray-400 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>
+						<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>
+						<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'}">
+								{event.uploads_locked ? 'Gesperrt' : 'Offen'}
+							</p>
+							<p class="mt-0.5 text-xs text-gray-500">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'}">
+								{event.export_released ? 'Ja' : 'Nein'}
+							</p>
+							<p class="mt-0.5 text-xs text-gray-500">Freigegeben</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- ── Event-Einstellungen ─────────────────────────────────────── -->
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+				<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>
+					<svg
+						class="h-5 w-5 text-gray-400 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">
 						<button
 							onclick={toggleEventLock}
-						class="rounded-lg px-4 py-2 text-sm font-medium {event.uploads_locked
+							class="rounded-lg px-4 py-2 text-sm font-medium transition
-							? 'bg-green-600 text-white hover:bg-green-700'
+								{event.uploads_locked ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-amber-500 text-white hover:bg-amber-600'}"
-							: 'bg-amber-500 text-white hover:bg-amber-600'}"
 						>
 							{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
 						</button>
 						<button
 							onclick={releaseGallery}
 							disabled={event.export_released}
-						class="rounded-lg px-4 py-2 text-sm font-medium {event.export_released
+							class="rounded-lg px-4 py-2 text-sm font-medium transition
-							? 'cursor-default bg-gray-100 text-gray-400'
+								{event.export_released ? 'cursor-default bg-gray-100 text-gray-400' : 'bg-blue-600 text-white hover:bg-blue-700'}"
-							: 'bg-blue-600 text-white hover:bg-blue-700'}"
 						>
 							{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
 						</button>
 					</div>
-				<div class="mt-3 flex gap-4 text-xs text-gray-500">
-					<span class="flex items-center gap-1">
-						<span class="h-2 w-2 rounded-full {event.uploads_locked ? 'bg-red-500' : 'bg-green-500'}"></span>
-						Uploads {event.uploads_locked ? 'gesperrt' : 'offen'}
-					</span>
-					<span class="flex items-center gap-1">
-						<span class="h-2 w-2 rounded-full {event.export_released ? 'bg-blue-500' : 'bg-gray-300'}"></span>
-						Export {event.export_released ? 'freigegeben' : 'gesperrt'}
-					</span>
 				</div>
 			</div>
 
-			<!-- User management -->
+			<!-- ── Nutzerverwaltung ───────────────────────────────────────── -->
-			<div class="rounded-xl border border-gray-200 bg-white">
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
-				<div class="border-b border-gray-100 px-5 py-4">
+				<button
-					<h2 class="font-semibold text-gray-900">Gäste ({users.length})</h2>
+					onclick={() => (usersOpen = !usersOpen)}
+					class="flex w-full items-center justify-between px-5 py-4"
+				>
+					<h2 class="font-semibold text-gray-900">Nutzerverwaltung</h2>
+					<svg
+						class="h-5 w-5 text-gray-400 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">
+						<!-- 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">
+									<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"
+								/>
 							</div>
-				{#if users.length === 0}
+						</div>
-					<p class="px-5 py-8 text-center text-sm text-gray-400">Noch keine Gäste.</p>
+						{#if filteredUsers.length === 0}
+							<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
 						{:else}
 							<div class="divide-y divide-gray-100">
-						{#each users as user}
+								{#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 items-center gap-2">
+											<div class="flex flex-wrap items-center gap-1.5">
-										<span class="truncate font-medium text-gray-900">{user.display_name}</span>
+												<span class="font-medium text-gray-900">{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>
 												{:else if user.role === 'admin'}
@@ -313,6 +400,8 @@
 							</div>
 						{/if}
 					</div>
+				</div>
+			</div>
 		{/if}
 	</div>
 </div>

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

@@ -10,6 +10,13 @@
 	let pin = $state('');
 	let copied = $state(false);
 
+	// Name-taken state — shown instead of the normal form
+	let nameTaken = $state(false);
+	let takenName = $state('');
+	let recoveryPin = $state('');
+	let recoveryError = $state('');
+	let recoveryLoading = $state(false);
+
 	async function handleJoin() {
 		if (!displayName.trim()) return;
 		loading = true;
@@ -26,7 +33,10 @@
 			pin = res.pin;
 			showPinModal = true;
 		} catch (e) {
-			if (e instanceof ApiError) {
+			if (e instanceof ApiError && e.code === 'conflict') {
+				takenName = displayName.trim();
+				nameTaken = true;
+			} else if (e instanceof ApiError) {
 				error = e.message;
 			} else {
 				error = 'Ein Fehler ist aufgetreten.';
@@ -36,6 +46,35 @@
 		}
 	}
 
+	async function handleInlineRecover() {
+		if (recoveryPin.length < 4) return;
+		recoveryLoading = true;
+		recoveryError = '';
+		try {
+			const res = await api.post<{ jwt: string; user_id: string }>(
+				'/recover',
+				{ display_name: takenName, pin: recoveryPin.trim() }
+			);
+			setAuth(res.jwt, recoveryPin.trim(), res.user_id, takenName);
+			goto('/feed');
+		} catch (e) {
+			if (e instanceof ApiError) {
+				recoveryError = e.message;
+			} else {
+				recoveryError = 'Ein Fehler ist aufgetreten.';
+			}
+		} finally {
+			recoveryLoading = false;
+		}
+	}
+
+	function tryDifferentName() {
+		nameTaken = false;
+		recoveryPin = '';
+		recoveryError = '';
+		// Keep displayName so the user can edit it slightly
+	}
+
 	function copyPin() {
 		navigator.clipboard.writeText(pin);
 		copied = true;
@@ -49,6 +88,54 @@
 
 <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4">
 	<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">
+					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">
+				Falls du das bist, melde dich mit deinem PIN an:
+			</p>
+
+			<form onsubmit={(e) => { e.preventDefault(); handleInlineRecover(); }}>
+				<input
+					type="text"
+					bind:value={recoveryPin}
+					placeholder="4-stelliger PIN"
+					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"
+				/>
+
+				{#if recoveryError}
+					<p class="mb-3 text-sm text-red-600">{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"
+				>
+					{recoveryLoading ? 'Wird angemeldet...' : 'Anmelden'}
+				</button>
+			</form>
+
+			<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"
+			>
+				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>
 
@@ -78,6 +165,8 @@
 				Schon dabei?
 				<a href="/recover" class="text-blue-600 hover:underline">Mit PIN wiederherstellen</a>
 			</p>
+		{/if}
+
 	</div>
 </div>
 

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

@@ -2,111 +2,193 @@
 	import { goto } from '$app/navigation';
 	import { getToken } from '$lib/auth';
 	import { addToQueue, loadQueue } from '$lib/upload-queue';
-	import UploadQueue from '$lib/components/UploadQueue.svelte';
+	import { showBottomNav } from '$lib/ui-store';
-	import CameraCapture from '$lib/components/CameraCapture.svelte';
+	import { pendingFiles, pendingCaption, clearPending } from '$lib/pending-upload-store';
-	import { onMount } from 'svelte';
+	import { get } from 'svelte/store';
+	import { onMount, onDestroy } from 'svelte';
+	import type { PendingFile } from '$lib/pending-upload-store';
 
+	interface StagedFile extends PendingFile {
+		// previewUrl and file inherited from PendingFile
+	}
+
+	let stagedFiles = $state<StagedFile[]>([]);
 	let caption = $state('');
-	let hashtags = $state('');
+	let submitting = $state(false);
-	let fileInput: HTMLInputElement;
+	let captionEl: HTMLTextAreaElement;
-	let showCamera = $state(false);
+
+	// Quick-tag chips derived from caption as the user types
+	let captionTags = $derived.by(() => {
+		const matches = [...caption.matchAll(/#(\w+)/g)];
+		return [...new Set(matches.map((m) => m[1].toLowerCase()))];
+	});
 
 	onMount(() => {
+		showBottomNav.set(false);
 		if (!getToken()) {
 			goto('/join');
 			return;
 		}
 		loadQueue();
+
+		// Pull staged files from the pending store (written by UploadSheet)
+		const pf = get(pendingFiles);
+		const pc = get(pendingCaption);
+		stagedFiles = pf;
+		caption = pc;
+
+		// Auto-focus caption textarea after a short delay (let layout settle)
+		setTimeout(() => captionEl?.focus(), 80);
 	});
 
-	async function handleFiles() {
+	onDestroy(() => {
-		const files = fileInput?.files;
+		showBottomNav.set(true);
-		if (!files || files.length === 0) return;
+	});
 
-		for (const file of files) {
+	function removeFile(idx: number) {
-			await addToQueue(file, caption, hashtags);
+		const removed = stagedFiles[idx];
+		URL.revokeObjectURL(removed.previewUrl);
+		stagedFiles = stagedFiles.filter((_, i) => i !== idx);
 	}
 
-		// Reset form
+	function cancel() {
-		caption = '';
+		clearPending();
-		hashtags = '';
+		goto('/feed');
-		if (fileInput) fileInput.value = '';
 	}
 
-	async function handleCapture(blob: Blob, type: 'photo' | 'video') {
+	async function handleSubmit() {
-		const ext = type === 'photo' ? 'jpg' : blob.type.includes('mp4') ? 'mp4' : 'webm';
+		if (stagedFiles.length === 0 || submitting) return;
-		const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+		submitting = true;
-		const fileName = `${type}_${timestamp}.${ext}`;
+		for (const sf of stagedFiles) {
-		const file = new File([blob], fileName, { type: blob.type });
+			await addToQueue(sf.file, caption, '');
-		await addToQueue(file, caption, hashtags);
+		}
+		clearPending();
+		goto('/feed');
+	}
+
+	function isVideo(file: File): boolean {
+		return file.type.startsWith('video/');
 	}
 </script>
 
-{#if showCamera}
+<!-- Full-screen composer — bottom nav is suppressed -->
-	<CameraCapture
+<div class="flex min-h-screen flex-col bg-white">
-		oncapture={handleCapture}
+	<!-- Header -->
-		onclose={() => (showCamera = false)}
+	<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
-	/>
-{/if}
-
-<div class="min-h-screen bg-gray-50 p-4">
-	<div class="mx-auto max-w-lg">
-		<div class="mb-6 flex items-center justify-between">
-			<h1 class="text-xl font-bold text-gray-900">Hochladen</h1>
-			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
-		</div>
-
-		<div class="rounded-lg border border-gray-200 bg-white p-4">
-			<div class="grid grid-cols-2 gap-3">
-				<!-- File picker -->
-				<label
-					class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition hover:border-blue-400 hover:bg-blue-50"
-				>
-					<svg class="mb-2 h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 16V4m0 0l-4 4m4-4l4 4M4 20h16" />
-					</svg>
-					<span class="text-center text-sm font-medium text-gray-600">Galerie</span>
-					<span class="mt-1 text-center text-xs text-gray-400">Mehrere Dateien</span>
-					<input
-						bind:this={fileInput}
-						type="file"
-						accept="image/*,video/*"
-						multiple
-						class="hidden"
-						onchange={handleFiles}
-					/>
-				</label>
-
-				<!-- Camera button -->
 		<button
-					onclick={() => (showCamera = true)}
+			onclick={cancel}
-					class="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition hover:border-blue-400 hover:bg-blue-50"
+			class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
+			aria-label="Abbrechen"
 		>
-					<svg class="mb-2 h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+			<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" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
 			</svg>
-					<span class="text-sm font-medium text-gray-600">Kamera</span>
+		</button>
-					<span class="mt-1 text-xs text-gray-400">Foto & Video</span>
+		<h1 class="text-base font-semibold text-gray-900">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"
+		>
+			{submitting ? 'Wird hochgeladen…' : 'Hochladen'}
 		</button>
 	</div>
 
-			<div class="mt-4 space-y-3">
+	<div class="flex flex-1 flex-col overflow-y-auto">
-				<input
+		<!-- Thumbnail strip -->
-					type="text"
+		{#if stagedFiles.length > 0}
-					bind:value={caption}
+			<div class="flex gap-2 overflow-x-auto px-4 py-3 scrollbar-none">
-					placeholder="Beschreibung (optional, #hashtags möglich)"
+				{#each stagedFiles as sf, i}
-					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 h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100">
-				/>
+						{#if isVideo(sf.file)}
-				<input
+							<div class="flex h-full w-full items-center justify-center bg-gray-800">
-					type="text"
+								<svg class="h-7 w-7 text-white/70" fill="currentColor" viewBox="0 0 24 24">
-					bind:value={hashtags}
+									<path d="M8 5v14l11-7z" />
-					placeholder="Hashtags (kommagetrennt, z.B. hochzeit, party)"
+								</svg>
-					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>
+						{:else}
+							<img src={sf.previewUrl} alt="" class="h-full w-full object-cover" />
+						{/if}
+						<button
+							onclick={() => removeFile(i)}
+							class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white"
+							aria-label="Entfernen"
+						>
+							<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+							</svg>
+						</button>
+					</div>
+				{/each}
+			</div>
+			<div class="border-b border-gray-100"></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">
+					<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>
+				</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"
+				>
+					Zurück
+				</button>
+			</div>
+		{/if}
+
+		<!-- Caption textarea -->
+		<div class="px-4 pt-4">
+			<textarea
+				bind:this={captionEl}
+				bind:value={caption}
+				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"
+			></textarea>
 		</div>
 
-		<UploadQueue />
+		<!-- 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">
+						#{tag}
+					</span>
+				{/each}
+			</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">
+		<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"
+		>
+			{#if submitting}
+				<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+				</svg>
+				Wird hochgeladen…
+			{:else}
+				<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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+				</svg>
+				{stagedFiles.length > 0 ? `${stagedFiles.length} Datei${stagedFiles.length > 1 ? 'en' : ''} hochladen` : 'Hochladen'}
+			{/if}
+		</button>
 	</div>
 </div>

frontend/vite.config.ts

@@ -3,5 +3,11 @@ import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
+	plugins: [tailwindcss(), sveltekit()],
+	server: {
+		proxy: {
+			'/api': 'http://localhost:3000',
+			'/media': 'http://localhost:3000'
+		}
+	}
 });