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.lock

@@ -907,6 +907,7 @@ dependencies = [
  "sysinfo",
  "tokio",
  "tokio-stream",
+ "tokio-util",
  "tower",
  "tower-http",
  "tower_governor",

backend/Cargo.toml

@@ -17,6 +17,7 @@ bcrypt = "0.15"
 uuid = { version = "1", features = ["v4", "serde"] }
 chrono = { version = "0.4", features = ["serde"] }
 tokio-stream = { version = "0.1", features = ["sync"] }
+tokio-util = { version = "0.7", features = ["io", "compat"] }
 futures = "0.3"
 sha2 = "0.10"
 rand = "0.9"
@@ -28,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

@@ -1,7 +1,9 @@
+use std::time::Duration;
+
 use axum::extract::State;
-use axum::http::StatusCode;
+use axum::http::{HeaderMap, StatusCode};
 use axum::Json;
-use chrono::{Duration, Utc};
+use chrono::Utc;
 use rand::Rng;
 use serde::{Deserialize, Serialize};
 use uuid::Uuid;
@@ -12,6 +14,7 @@ use crate::error::AppError;
 use crate::models::event::Event;
 use crate::models::session::Session;
 use crate::models::user::{User, UserRole};
+use crate::services::rate_limiter::client_ip;
 use crate::state::AppState;
 
 #[derive(Deserialize)]
@@ -29,8 +32,17 @@ pub struct JoinResponse {
 
 pub async fn join(
     State(state): State<AppState>,
+    headers: HeaderMap,
     Json(body): Json<JoinRequest>,
 ) -> Result<(StatusCode, Json<JoinResponse>), AppError> {
+    let ip = client_ip(&headers, "unknown");
+    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,
+        ));
+    }
+
     let display_name = body.display_name.trim();
     if display_name.is_empty() || display_name.len() > 50 {
         return Err(AppError::BadRequest(
@@ -45,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 =
@@ -62,7 +82,7 @@ pub async fn join(
     .map_err(|e| AppError::Internal(anyhow::anyhow!(e)))?;
 
     let token_hash = jwt::hash_token(&token);
-    let expires_at = Utc::now() + Duration::days(state.config.session_expiry_days);
+    let expires_at = Utc::now() + chrono::Duration::days(state.config.session_expiry_days);
     Session::create(&state.pool, user.id, &token_hash, expires_at).await?;
 
     Ok((
@@ -113,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,
                 ));
             }
         }
@@ -134,7 +155,7 @@ pub async fn recover(
             .map_err(|e| AppError::Internal(anyhow::anyhow!(e)))?;
 
             let token_hash = jwt::hash_token(&token);
-            let expires_at = Utc::now() + Duration::days(state.config.session_expiry_days);
+            let expires_at = Utc::now() + chrono::Duration::days(state.config.session_expiry_days);
             Session::create(&state.pool, user.id, &token_hash, expires_at).await?;
 
             return Ok(Json(RecoverResponse {
@@ -146,7 +167,7 @@ pub async fn recover(
         // Wrong PIN — increment failure count
         let attempts = User::increment_failed_pin(&state.pool, user.id).await?;
         if attempts >= 3 {
-            let lockout = Utc::now() + Duration::minutes(15);
+            let lockout = Utc::now() + chrono::Duration::minutes(15);
             User::lock_pin(&state.pool, user.id, lockout).await?;
         }
     }
@@ -217,7 +238,7 @@ pub async fn admin_login(
     .map_err(|e| AppError::Internal(anyhow::anyhow!(e)))?;
 
     let token_hash = jwt::hash_token(&token);
-    let expires_at = Utc::now() + Duration::days(1);
+    let expires_at = Utc::now() + chrono::Duration::days(1);
     Session::create(&state.pool, admin_user.id, &token_hash, expires_at).await?;
 
     Ok(Json(AdminLoginResponse { jwt: token }))

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

@@ -0,0 +1,306 @@
+use std::collections::HashMap;
+use std::time::Duration;
+
+use axum::extract::State;
+use axum::http::{HeaderMap, StatusCode};
+use axum::Json;
+use serde::{Deserialize, Serialize};
+use sysinfo::System;
+
+use crate::auth::middleware::RequireAdmin;
+use crate::error::AppError;
+use crate::services::rate_limiter::client_ip;
+use crate::state::AppState;
+
+// ── DTOs ─────────────────────────────────────────────────────────────────────
+
+#[derive(Serialize)]
+pub struct StatsDto {
+    pub user_count: i64,
+    pub upload_count: i64,
+    pub comment_count: i64,
+    pub disk_total_bytes: u64,
+    pub disk_used_bytes: u64,
+    pub disk_free_bytes: u64,
+}
+
+#[derive(Serialize, sqlx::FromRow)]
+pub struct ExportJobDto {
+    pub id: uuid::Uuid,
+    pub r#type: String,
+    pub status: String,
+    pub progress_pct: i16,
+    pub error_message: Option<String>,
+    pub created_at: chrono::DateTime<chrono::Utc>,
+    pub completed_at: Option<chrono::DateTime<chrono::Utc>>,
+}
+
+// ── Handlers ─────────────────────────────────────────────────────────────────
+
+pub async fn get_stats(
+    State(state): State<AppState>,
+    RequireAdmin(_auth): RequireAdmin,
+) -> Result<Json<StatsDto>, AppError> {
+    let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    let (user_count,): (i64,) =
+        sqlx::query_as("SELECT COUNT(*) FROM \"user\" WHERE event_id = $1")
+            .bind(event.id)
+            .fetch_one(&state.pool)
+            .await?;
+
+    let (upload_count,): (i64,) = sqlx::query_as(
+        "SELECT COUNT(*) FROM upload WHERE event_id = $1 AND deleted_at IS NULL",
+    )
+    .bind(event.id)
+    .fetch_one(&state.pool)
+    .await?;
+
+    let (comment_count,): (i64,) = sqlx::query_as(
+        "SELECT COUNT(*) FROM comment c
+         JOIN upload u ON u.id = c.upload_id
+         WHERE u.event_id = $1 AND c.deleted_at IS NULL",
+    )
+    .bind(event.id)
+    .fetch_one(&state.pool)
+    .await?;
+
+    // Disk usage via sysinfo
+    let mut sys = System::new();
+    sys.refresh_all();
+
+    let media_path = state.config.media_path.to_string_lossy().to_string();
+    let (disk_total, disk_free) = sysinfo::Disks::new_with_refreshed_list()
+        .iter()
+        .find(|d| media_path.starts_with(d.mount_point().to_string_lossy().as_ref()))
+        .map(|d| (d.total_space(), d.available_space()))
+        .unwrap_or_else(|| {
+            // Fall back to the root disk
+            sysinfo::Disks::new_with_refreshed_list()
+                .iter()
+                .find(|d| d.mount_point().to_string_lossy() == "/")
+                .map(|d| (d.total_space(), d.available_space()))
+                .unwrap_or((0, 0))
+        });
+
+    let disk_used = disk_total.saturating_sub(disk_free);
+
+    Ok(Json(StatsDto {
+        user_count,
+        upload_count,
+        comment_count,
+        disk_total_bytes: disk_total,
+        disk_used_bytes: disk_used,
+        disk_free_bytes: disk_free,
+    }))
+}
+
+pub async fn get_config(
+    State(state): State<AppState>,
+    RequireAdmin(_auth): RequireAdmin,
+) -> Result<Json<HashMap<String, String>>, AppError> {
+    let rows: Vec<(String, String)> =
+        sqlx::query_as("SELECT key, value FROM config ORDER BY key")
+            .fetch_all(&state.pool)
+            .await?;
+
+    Ok(Json(rows.into_iter().collect()))
+}
+
+#[derive(Deserialize)]
+pub struct PatchConfigRequest(pub HashMap<String, String>);
+
+pub async fn patch_config(
+    State(state): State<AppState>,
+    RequireAdmin(_auth): RequireAdmin,
+    Json(body): Json<HashMap<String, String>>,
+) -> Result<StatusCode, AppError> {
+    const ALLOWED_KEYS: &[&str] = &[
+        "max_image_size_mb",
+        "max_video_size_mb",
+        "upload_rate_per_hour",
+        "feed_rate_per_min",
+        "export_rate_per_day",
+        "quota_tolerance",
+        "estimated_guest_count",
+        "compression_concurrency",
+    ];
+
+    for (key, value) in &body {
+        if !ALLOWED_KEYS.contains(&key.as_str()) {
+            return Err(AppError::BadRequest(format!("Unbekannter Konfigurationsschlüssel: {key}")));
+        }
+        // Validate numeric values
+        if value.parse::<f64>().is_err() {
+            return Err(AppError::BadRequest(format!("Ungültiger Wert für {key}: muss eine Zahl sein.")));
+        }
+        sqlx::query(
+            "INSERT INTO config (key, value, updated_at) VALUES ($1, $2, NOW())
+             ON CONFLICT (key) DO UPDATE SET value = EXCLUDED.value, updated_at = NOW()",
+        )
+        .bind(key)
+        .bind(value)
+        .execute(&state.pool)
+        .await?;
+    }
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn get_export_jobs(
+    State(state): State<AppState>,
+    RequireAdmin(_auth): RequireAdmin,
+) -> Result<Json<Vec<ExportJobDto>>, AppError> {
+    let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    let jobs = sqlx::query_as::<_, ExportJobDto>(
+        "SELECT id, type::text, status::text, progress_pct, error_message, created_at, completed_at
+         FROM export_job
+         WHERE event_id = $1
+         ORDER BY created_at DESC",
+    )
+    .bind(event.id)
+    .fetch_all(&state.pool)
+    .await?;
+
+    Ok(Json(jobs))
+}
+
+// ── Export download endpoints (authenticated guests) ─────────────────────────
+
+pub async fn download_zip(
+    State(state): State<AppState>,
+    _auth: crate::auth::middleware::AuthUser,
+    headers: HeaderMap,
+) -> Result<axum::response::Response, AppError> {
+    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("Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(), None));
+    }
+
+    let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    if !event.export_zip_ready {
+        return Err(AppError::NotFound(
+            "Der ZIP-Export ist noch nicht verfügbar.".into(),
+        ));
+    }
+
+    let path = state.config.media_path.join("exports").join("Gallery.zip");
+    if !path.exists() {
+        return Err(AppError::NotFound("Exportdatei nicht gefunden.".into()));
+    }
+
+    serve_file(path, "Gallery.zip", "application/zip").await
+}
+
+pub async fn download_html(
+    State(state): State<AppState>,
+    _auth: crate::auth::middleware::AuthUser,
+    headers: HeaderMap,
+) -> Result<axum::response::Response, AppError> {
+    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("Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(), None));
+    }
+
+    let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    if !event.export_html_ready {
+        return Err(AppError::NotFound(
+            "Der HTML-Export ist noch nicht verfügbar.".into(),
+        ));
+    }
+
+    let path = state.config.media_path.join("exports").join("Memories.zip");
+    if !path.exists() {
+        return Err(AppError::NotFound("Exportdatei nicht gefunden.".into()));
+    }
+
+    serve_file(path, "Memories.zip", "application/zip").await
+}
+
+async fn serve_file(
+    path: std::path::PathBuf,
+    filename: &str,
+    content_type: &str,
+) -> Result<axum::response::Response, AppError> {
+    use axum::body::Body;
+    use axum::http::{header, Response, StatusCode};
+    use tokio_util::io::ReaderStream;
+
+    let file = tokio::fs::File::open(&path)
+        .await
+        .map_err(|e| AppError::Internal(e.into()))?;
+    let metadata = file
+        .metadata()
+        .await
+        .map_err(|e| AppError::Internal(e.into()))?;
+    let stream = ReaderStream::new(file);
+
+    let disposition = format!("attachment; filename=\"{filename}\"");
+
+    let response = Response::builder()
+        .status(StatusCode::OK)
+        .header(header::CONTENT_TYPE, content_type)
+        .header(header::CONTENT_DISPOSITION, disposition)
+        .header(header::CONTENT_LENGTH, metadata.len())
+        .body(Body::from_stream(stream))
+        .map_err(|e| AppError::Internal(e.into()))?;
+
+    Ok(response)
+}
+
+/// Also expose export status to all authenticated users (guests need it for the export page)
+pub async fn export_status(
+    State(state): State<AppState>,
+    _auth: crate::auth::middleware::AuthUser,
+) -> Result<Json<serde_json::Value>, AppError> {
+    let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    let released = event.export_released_at.is_some();
+
+    let jobs: Vec<(String, String, i16)> = sqlx::query_as(
+        "SELECT type::text, status::text, progress_pct FROM export_job WHERE event_id = $1",
+    )
+    .bind(event.id)
+    .fetch_all(&state.pool)
+    .await?;
+
+    let job_status = |type_name: &str| {
+        jobs.iter()
+            .find(|(t, _, _)| t == type_name)
+            .map(|(_, status, pct)| {
+                serde_json::json!({ "status": status, "progress_pct": pct })
+            })
+            .unwrap_or_else(|| serde_json::json!({ "status": "locked", "progress_pct": 0 }))
+    };
+
+    Ok(Json(serde_json::json!({
+        "released": released,
+        "zip": job_status("zip"),
+        "html": job_status("html"),
+    })))
+}
+
+async fn get_config_usize(pool: &sqlx::PgPool, key: &str, default: usize) -> usize {
+    let row: Option<(String,)> =
+        sqlx::query_as("SELECT value FROM config WHERE key = $1")
+            .bind(key)
+            .fetch_optional(pool)
+            .await
+            .unwrap_or(None);
+    row.and_then(|r| r.0.parse().ok()).unwrap_or(default)
+}

backend/src/handlers/feed.rs

@@ -1,4 +1,7 @@
+use std::time::Duration;
+
 use axum::extract::{Query, State};
+use axum::http::HeaderMap;
 use axum::Json;
 use chrono::{DateTime, Utc};
 use serde::{Deserialize, Serialize};
@@ -6,6 +9,7 @@ use uuid::Uuid;
 
 use crate::auth::middleware::AuthUser;
 use crate::error::AppError;
+use crate::services::rate_limiter::client_ip;
 use crate::state::AppState;
 
 #[derive(Deserialize)]
@@ -53,8 +57,15 @@ struct FeedRow {
 pub async fn feed(
     State(state): State<AppState>,
     auth: AuthUser,
+    headers: HeaderMap,
     Query(q): Query<FeedQuery>,
 ) -> Result<Json<FeedResponse>, AppError> {
+    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("Zu viele Anfragen. Bitte warte kurz und versuche es erneut.".into(), None));
+    }
+
     let limit = q.limit.unwrap_or(20).min(100);
 
     let rows = if let Some(hashtag) = &q.hashtag {
@@ -227,6 +238,16 @@ pub async fn hashtags(
     ))
 }
 
+async fn get_config_usize(pool: &sqlx::PgPool, key: &str, default: usize) -> usize {
+    let row: Option<(String,)> =
+        sqlx::query_as("SELECT value FROM config WHERE key = $1")
+            .bind(key)
+            .fetch_optional(pool)
+            .await
+            .unwrap_or(None);
+    row.and_then(|r| r.0.parse().ok()).unwrap_or(default)
+}
+
 async fn get_cursor_time(pool: &sqlx::PgPool, cursor_id: Uuid) -> Option<DateTime<Utc>> {
     let row: Option<(DateTime<Utc>,)> =
         sqlx::query_as("SELECT created_at FROM upload WHERE id = $1")

backend/src/handlers/host.rs

@@ -0,0 +1,269 @@
+use axum::extract::{Path, State};
+use axum::http::StatusCode;
+use axum::Json;
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+use uuid::Uuid;
+
+use crate::auth::middleware::RequireHost;
+use crate::error::AppError;
+use crate::models::comment::Comment;
+use crate::models::event::Event;
+use crate::models::upload::Upload;
+use crate::state::AppState;
+
+// ── DTOs ─────────────────────────────────────────────────────────────────────
+
+#[derive(Serialize, sqlx::FromRow)]
+pub struct UserSummary {
+    pub id: Uuid,
+    pub display_name: String,
+    pub role: String,
+    pub is_banned: bool,
+    pub uploads_hidden: bool,
+    pub upload_count: i64,
+    pub total_upload_bytes: i64,
+    pub created_at: DateTime<Utc>,
+}
+
+#[derive(Serialize)]
+pub struct EventStatus {
+    pub name: String,
+    pub is_active: bool,
+    pub uploads_locked: bool,
+    pub export_released: bool,
+}
+
+#[derive(Deserialize)]
+pub struct BanRequest {
+    pub hide_uploads: bool,
+}
+
+#[derive(Deserialize)]
+pub struct SetRoleRequest {
+    pub role: String,
+}
+
+// ── Handlers ─────────────────────────────────────────────────────────────────
+
+pub async fn get_event_status(
+    State(state): State<AppState>,
+    RequireHost(_auth): RequireHost,
+) -> Result<Json<EventStatus>, AppError> {
+    let event = Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    Ok(Json(EventStatus {
+        name: event.name,
+        is_active: event.is_active,
+        uploads_locked: event.uploads_locked_at.is_some(),
+        export_released: event.export_released_at.is_some(),
+    }))
+}
+
+pub async fn list_users(
+    State(state): State<AppState>,
+    RequireHost(auth): RequireHost,
+) -> Result<Json<Vec<UserSummary>>, AppError> {
+    let rows = sqlx::query_as::<_, UserSummary>(
+        "SELECT u.id,
+                u.display_name,
+                u.role::text AS role,
+                u.is_banned,
+                u.uploads_hidden,
+                COALESCE(COUNT(up.id), 0) AS upload_count,
+                u.total_upload_bytes,
+                u.created_at
+         FROM \"user\" u
+         LEFT JOIN upload up ON up.user_id = u.id AND up.deleted_at IS NULL
+         WHERE u.event_id = $1
+         GROUP BY u.id
+         ORDER BY u.created_at ASC",
+    )
+    .bind(auth.event_id)
+    .fetch_all(&state.pool)
+    .await?;
+
+    Ok(Json(rows))
+}
+
+pub async fn ban_user(
+    State(state): State<AppState>,
+    RequireHost(auth): RequireHost,
+    Path(user_id): Path<Uuid>,
+    Json(body): Json<BanRequest>,
+) -> Result<StatusCode, AppError> {
+    // Cannot ban yourself or another host/admin
+    if user_id == auth.user_id {
+        return Err(AppError::BadRequest("Du kannst dich nicht selbst sperren.".into()));
+    }
+    let target = sqlx::query_as::<_, (String,)>(
+        "SELECT role::text FROM \"user\" WHERE id = $1 AND event_id = $2",
+    )
+    .bind(user_id)
+    .bind(auth.event_id)
+    .fetch_optional(&state.pool)
+    .await?
+    .ok_or_else(|| AppError::NotFound("Benutzer nicht gefunden.".into()))?;
+
+    if target.0 == "admin" || (target.0 == "host" && auth.role != crate::models::user::UserRole::Admin) {
+        return Err(AppError::Forbidden("Du kannst diesen Benutzer nicht sperren.".into()));
+    }
+
+    sqlx::query(
+        "UPDATE \"user\" SET is_banned = TRUE, uploads_hidden = $2 WHERE id = $1",
+    )
+    .bind(user_id)
+    .bind(body.hide_uploads)
+    .execute(&state.pool)
+    .await?;
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn unban_user(
+    State(state): State<AppState>,
+    RequireHost(_auth): RequireHost,
+    Path(user_id): Path<Uuid>,
+) -> Result<StatusCode, AppError> {
+    sqlx::query("UPDATE \"user\" SET is_banned = FALSE WHERE id = $1")
+        .bind(user_id)
+        .execute(&state.pool)
+        .await?;
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn set_role(
+    State(state): State<AppState>,
+    RequireHost(auth): RequireHost,
+    Path(user_id): Path<Uuid>,
+    Json(body): Json<SetRoleRequest>,
+) -> Result<StatusCode, AppError> {
+    if user_id == auth.user_id {
+        return Err(AppError::BadRequest("Du kannst deine eigene Rolle nicht ändern.".into()));
+    }
+    let new_role = match body.role.as_str() {
+        "guest" => "guest",
+        "host" => "host",
+        _ => return Err(AppError::BadRequest("Ungültige Rolle. Erlaubt: guest, host.".into())),
+    };
+    sqlx::query("UPDATE \"user\" SET role = $2::user_role WHERE id = $1 AND event_id = $3")
+        .bind(user_id)
+        .bind(new_role)
+        .bind(auth.event_id)
+        .execute(&state.pool)
+        .await?;
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn host_delete_upload(
+    State(state): State<AppState>,
+    RequireHost(_auth): RequireHost,
+    Path(upload_id): Path<Uuid>,
+) -> Result<StatusCode, AppError> {
+    let upload = Upload::find_by_id(&state.pool, upload_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Upload nicht gefunden.".into()))?;
+
+    Upload::soft_delete(&state.pool, upload_id).await?;
+
+    let _ = state.sse_tx.send(crate::state::SseEvent {
+        event_type: "upload-deleted".to_string(),
+        data: serde_json::json!({ "upload_id": upload.id }).to_string(),
+    });
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn host_delete_comment(
+    State(state): State<AppState>,
+    RequireHost(_auth): RequireHost,
+    Path(comment_id): Path<Uuid>,
+) -> Result<StatusCode, AppError> {
+    Comment::find_by_id(&state.pool, comment_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Kommentar nicht gefunden.".into()))?;
+
+    Comment::soft_delete(&state.pool, comment_id).await?;
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn close_event(
+    State(state): State<AppState>,
+    RequireHost(_auth): RequireHost,
+) -> Result<StatusCode, AppError> {
+    sqlx::query(
+        "UPDATE event SET uploads_locked_at = NOW() WHERE slug = $1 AND uploads_locked_at IS NULL",
+    )
+    .bind(&state.config.event_slug)
+    .execute(&state.pool)
+    .await?;
+
+    let _ = state.sse_tx.send(crate::state::SseEvent {
+        event_type: "event-closed".to_string(),
+        data: "{}".to_string(),
+    });
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn open_event(
+    State(state): State<AppState>,
+    RequireHost(_auth): RequireHost,
+) -> Result<StatusCode, AppError> {
+    sqlx::query(
+        "UPDATE event SET uploads_locked_at = NULL WHERE slug = $1",
+    )
+    .bind(&state.config.event_slug)
+    .execute(&state.pool)
+    .await?;
+
+    let _ = state.sse_tx.send(crate::state::SseEvent {
+        event_type: "event-opened".to_string(),
+        data: "{}".to_string(),
+    });
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn release_gallery(
+    State(state): State<AppState>,
+    RequireHost(_auth): RequireHost,
+) -> Result<StatusCode, AppError> {
+    let event = Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    if event.export_released_at.is_some() {
+        return Err(AppError::BadRequest("Galerie wurde bereits freigegeben.".into()));
+    }
+
+    sqlx::query("UPDATE event SET export_released_at = NOW() WHERE slug = $1")
+        .bind(&state.config.event_slug)
+        .execute(&state.pool)
+        .await?;
+
+    // Enqueue export jobs
+    for export_type in ["zip", "html"] {
+        sqlx::query(
+            "INSERT INTO export_job (event_id, type) VALUES ($1, $2::export_type)
+             ON CONFLICT (event_id, type) DO NOTHING",
+        )
+        .bind(event.id)
+        .bind(export_type)
+        .execute(&state.pool)
+        .await?;
+    }
+
+    // Spawn export workers
+    crate::services::export::spawn_export_jobs(
+        event.id,
+        event.name,
+        state.pool.clone(),
+        state.config.media_path.clone(),
+        state.sse_tx.clone(),
+    );
+
+    Ok(StatusCode::NO_CONTENT)
+}

backend/src/handlers/mod.rs

@@ -1,4 +1,6 @@
+pub mod admin;
 pub mod feed;
+pub mod host;
 pub mod social;
 pub mod sse;
 pub mod upload;

backend/src/handlers/upload.rs

@@ -1,3 +1,5 @@
+use std::time::Duration;
+
 use axum::extract::{Multipart, Path, State};
 use axum::http::StatusCode;
 use axum::Json;
@@ -16,11 +18,25 @@ pub async fn upload(
     auth: AuthUser,
     mut multipart: Multipart,
 ) -> 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 let Err(retry_after_secs) = state
+        .rate_limiter
+        .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),
+        ));
+    }
+
     // Check if user is banned
     let user = User::find_by_id(&state.pool, auth.user_id)
         .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()));
     }
 
@@ -29,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()));
     }
 
@@ -226,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
-        .route("/api/v1/upload", post(handlers::upload::upload))
+        // Upload — body limit disabled; size validation is done inside the handler
+        .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),
@@ -58,7 +61,29 @@ async fn main() -> Result<()> {
         )
         .route("/api/v1/comment/{id}", delete(handlers::social::delete_comment))
         // SSE
-        .route("/api/v1/stream", get(handlers::sse::stream));
+        .route("/api/v1/stream", get(handlers::sse::stream))
+        // Host Dashboard
+        .route("/api/v1/host/event", get(handlers::host::get_event_status))
+        .route("/api/v1/host/event/close", post(handlers::host::close_event))
+        .route("/api/v1/host/event/open", post(handlers::host::open_event))
+        .route("/api/v1/host/gallery/release", post(handlers::host::release_gallery))
+        .route("/api/v1/host/users", get(handlers::host::list_users))
+        .route("/api/v1/host/users/{id}/ban", post(handlers::host::ban_user))
+        .route("/api/v1/host/users/{id}/unban", post(handlers::host::unban_user))
+        .route("/api/v1/host/users/{id}/role", patch(handlers::host::set_role))
+        .route("/api/v1/host/upload/{id}", delete(handlers::host::host_delete_upload))
+        .route("/api/v1/host/comment/{id}", delete(handlers::host::host_delete_comment))
+        // Export (all authenticated users)
+        .route("/api/v1/export/status", get(handlers::admin::export_status))
+        .route("/api/v1/export/zip", get(handlers::admin::download_zip))
+        .route("/api/v1/export/html", get(handlers::admin::download_html))
+        // Admin Dashboard
+        .route("/api/v1/admin/stats", get(handlers::admin::get_stats))
+        .route(
+            "/api/v1/admin/config",
+            get(handlers::admin::get_config).patch(handlers::admin::patch_config),
+        )
+        .route("/api/v1/admin/export/jobs", get(handlers::admin::get_export_jobs));
 
     // Serve media files from disk
     let media_service = ServeDir::new(&config.media_path);
@@ -67,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/export.rs

@@ -0,0 +1,569 @@
+use std::path::{Path, PathBuf};
+
+use anyhow::{Context, Result};
+use async_zip::tokio::write::ZipFileWriter;
+use async_zip::{Compression, ZipEntryBuilder};
+use chrono::{DateTime, Utc};
+use futures::io::{copy as fcopy, AllowStdIo};
+use serde::Serialize;
+use sqlx::PgPool;
+use tokio::sync::broadcast;
+use tokio_util::compat::TokioAsyncReadCompatExt;
+use uuid::Uuid;
+
+use crate::state::SseEvent;
+
+// ── DB query rows ────────────────────────────────────────────────────────────
+
+#[derive(sqlx::FromRow)]
+struct ExportUploadRow {
+    id: Uuid,
+    original_path: String,
+    mime_type: String,
+    caption: Option<String>,
+    uploader_name: String,
+    like_count: i64,
+    created_at: DateTime<Utc>,
+}
+
+#[derive(sqlx::FromRow)]
+struct ExportCommentRow {
+    upload_id: Uuid,
+    uploader_name: String,
+    body: String,
+    created_at: DateTime<Utc>,
+}
+
+// ── Template context structs ─────────────────────────────────────────────────
+
+#[derive(Serialize)]
+struct TmplComment {
+    uploader_name: String,
+    body: String,
+    created_at: String,
+}
+
+#[derive(Serialize)]
+struct TmplUpload {
+    id: String,
+    path: String,
+    is_video: bool,
+    caption: String,
+    uploader_name: String,
+    like_count: i64,
+    created_at: String,
+    comments: Vec<TmplComment>,
+    hashtags: Vec<String>,
+}
+
+// ── Entry point ──────────────────────────────────────────────────────────────
+
+pub fn spawn_export_jobs(
+    event_id: Uuid,
+    event_name: String,
+    pool: PgPool,
+    media_path: PathBuf,
+    sse_tx: broadcast::Sender<SseEvent>,
+) {
+    let pool2 = pool.clone();
+    let media_path2 = media_path.clone();
+    let sse_tx2 = sse_tx.clone();
+    let event_name2 = event_name.clone();
+
+    tokio::spawn(async move {
+        if let Err(e) = run_zip_export(event_id, &pool, &media_path, &sse_tx).await {
+            tracing::error!("ZIP export failed for event {event_id}: {e:#}");
+            mark_failed(&pool, event_id, "zip", &e.to_string()).await;
+        }
+        maybe_broadcast_complete(&pool, event_id, &sse_tx).await;
+    });
+
+    tokio::spawn(async move {
+        if let Err(e) =
+            run_html_export(event_id, &event_name2, &pool2, &media_path2, &sse_tx2).await
+        {
+            tracing::error!("HTML export failed for event {event_id}: {e:#}");
+            mark_failed(&pool2, event_id, "html", &e.to_string()).await;
+        }
+        maybe_broadcast_complete(&pool2, event_id, &sse_tx2).await;
+    });
+}
+
+// ── ZIP export ───────────────────────────────────────────────────────────────
+
+async fn run_zip_export(
+    event_id: Uuid,
+    pool: &PgPool,
+    media_path: &Path,
+    sse_tx: &broadcast::Sender<SseEvent>,
+) -> Result<()> {
+    mark_running(pool, event_id, "zip").await;
+
+    let uploads = query_uploads(pool, event_id).await?;
+    let total = uploads.len().max(1) as f32;
+
+    let exports_dir = media_path.join("exports");
+    tokio::fs::create_dir_all(&exports_dir).await?;
+
+    let tmp_path = exports_dir.join("Gallery.zip.tmp");
+    let out_path = exports_dir.join("Gallery.zip");
+
+    {
+        let file = tokio::fs::File::create(&tmp_path).await?;
+        let mut zip = ZipFileWriter::with_tokio(file);
+
+        for (i, row) in uploads.iter().enumerate() {
+            let src = media_path.join(&row.original_path);
+            if !src.exists() {
+                continue;
+            }
+            let ext = ext_from_path(&row.original_path);
+            let date = row.created_at.format("%Y-%m-%d_%H-%M").to_string();
+            let name_safe = sanitize_name(&row.uploader_name);
+            let folder = if row.mime_type.starts_with("video/") { "Videos" } else { "Photos" };
+            let entry_name = format!("{folder}/{date}_{name_safe}_{}.{ext}", row.id);
+
+            let builder = ZipEntryBuilder::new(entry_name.into(), Compression::Stored);
+            let mut entry = zip.write_entry_stream(builder).await?;
+
+            let mut f = tokio::fs::File::open(&src).await?.compat();
+            fcopy(&mut f, &mut entry).await?;
+            entry.close().await?;
+
+            let pct = ((i + 1) as f32 / total * 100.0) as i16;
+            update_progress(pool, event_id, "zip", pct.min(99)).await;
+        }
+
+        zip.close().await?;
+    }
+
+    tokio::fs::rename(&tmp_path, &out_path).await?;
+
+    sqlx::query(
+        "UPDATE export_job SET status = 'done', progress_pct = 100, file_path = $2, completed_at = NOW()
+         WHERE event_id = $1 AND type = 'zip'::export_type",
+    )
+    .bind(event_id)
+    .bind("exports/Gallery.zip")
+    .execute(pool)
+    .await?;
+
+    sqlx::query("UPDATE event SET export_zip_ready = TRUE WHERE id = $1")
+        .bind(event_id)
+        .execute(pool)
+        .await?;
+
+    let _ = sse_tx.send(SseEvent {
+        event_type: "export-progress".to_string(),
+        data: serde_json::json!({ "type": "zip", "progress_pct": 100 }).to_string(),
+    });
+
+    tracing::info!("ZIP export complete for event {event_id}");
+    Ok(())
+}
+
+// ── HTML export ──────────────────────────────────────────────────────────────
+
+async fn run_html_export(
+    event_id: Uuid,
+    event_name: &str,
+    pool: &PgPool,
+    media_path: &Path,
+    sse_tx: &broadcast::Sender<SseEvent>,
+) -> Result<()> {
+    mark_running(pool, event_id, "html").await;
+
+    let uploads = query_uploads(pool, event_id).await?;
+    let comments = query_comments(pool, event_id).await?;
+    let hashtags_per_upload = query_hashtags(pool, event_id).await?;
+    let total = uploads.len().max(1) as f32;
+
+    let exports_dir = media_path.join("exports");
+    tokio::fs::create_dir_all(&exports_dir).await?;
+
+    // Build template context
+    let mut tmpl_uploads: Vec<TmplUpload> = Vec::new();
+    for (i, row) in uploads.iter().enumerate() {
+        let ext = ext_from_path(&row.original_path);
+        let date_str = row.created_at.format("%Y-%m-%d_%H-%M").to_string();
+        let name_safe = sanitize_name(&row.uploader_name);
+        let folder = if row.mime_type.starts_with("video/") { "Videos" } else { "Photos" };
+        let filename = format!("{date_str}_{name_safe}_{}.{ext}", row.id);
+
+        let upload_comments: Vec<TmplComment> = comments
+            .iter()
+            .filter(|c| c.upload_id == row.id)
+            .map(|c| TmplComment {
+                uploader_name: c.uploader_name.clone(),
+                body: c.body.clone(),
+                created_at: c.created_at.format("%d.%m.%Y %H:%M").to_string(),
+            })
+            .collect();
+
+        let tags: Vec<String> = hashtags_per_upload
+            .iter()
+            .filter(|(uid, _)| *uid == row.id)
+            .map(|(_, tag)| tag.clone())
+            .collect();
+
+        tmpl_uploads.push(TmplUpload {
+            id: row.id.to_string(),
+            path: format!("{folder}/{filename}"),
+            is_video: row.mime_type.starts_with("video/"),
+            caption: row.caption.clone().unwrap_or_default(),
+            uploader_name: row.uploader_name.clone(),
+            like_count: row.like_count,
+            created_at: row.created_at.format("%d.%m.%Y %H:%M").to_string(),
+            comments: upload_comments,
+            hashtags: tags,
+        });
+
+        let pct = ((i + 1) as f32 / total * 50.0) as i16;
+        update_progress(pool, event_id, "html", pct.min(49)).await;
+    }
+
+    // Render HTML
+    let mut env = minijinja::Environment::new();
+    env.add_template("memories", MEMORIES_TEMPLATE)
+        .context("template compile error")?;
+    let tmpl = env.get_template("memories").unwrap();
+    let html = tmpl
+        .render(minijinja::context!(
+            event_name => event_name,
+            uploads => minijinja::Value::from_serialize(&tmpl_uploads),
+            generated_at => Utc::now().format("%d.%m.%Y").to_string(),
+        ))
+        .context("template render error")?;
+
+    update_progress(pool, event_id, "html", 55).await;
+
+    let tmp_path = exports_dir.join("Memories.zip.tmp");
+    let out_path = exports_dir.join("Memories.zip");
+
+    {
+        let file = tokio::fs::File::create(&tmp_path).await?;
+        let mut zip = ZipFileWriter::with_tokio(file);
+
+        // Memories.html
+        {
+            let builder =
+                ZipEntryBuilder::new("Memories/Memories.html".into(), Compression::Deflate);
+            let mut entry = zip.write_entry_stream(builder).await?;
+            let mut cursor = AllowStdIo::new(std::io::Cursor::new(html.as_bytes()));
+            fcopy(&mut cursor, &mut entry).await?;
+            entry.close().await?;
+        }
+
+        update_progress(pool, event_id, "html", 60).await;
+
+        // README.txt
+        {
+            let builder =
+                ZipEntryBuilder::new("Memories/README.txt".into(), Compression::Deflate);
+            let mut entry = zip.write_entry_stream(builder).await?;
+            let mut cursor = AllowStdIo::new(std::io::Cursor::new(README_TEXT.as_bytes()));
+            fcopy(&mut cursor, &mut entry).await?;
+            entry.close().await?;
+        }
+
+        // Media files
+        for (i, row) in uploads.iter().enumerate() {
+            let src = media_path.join(&row.original_path);
+            if !src.exists() {
+                continue;
+            }
+            let ext = ext_from_path(&row.original_path);
+            let date_str = row.created_at.format("%Y-%m-%d_%H-%M").to_string();
+            let name_safe = sanitize_name(&row.uploader_name);
+            let folder = if row.mime_type.starts_with("video/") { "Videos" } else { "Photos" };
+            let filename = format!("{date_str}_{name_safe}_{}.{ext}", row.id);
+            let entry_name = format!("Memories/{folder}/{filename}");
+
+            let builder = ZipEntryBuilder::new(entry_name.into(), Compression::Stored);
+            let mut entry = zip.write_entry_stream(builder).await?;
+            let mut f = tokio::fs::File::open(&src).await?.compat();
+            fcopy(&mut f, &mut entry).await?;
+            entry.close().await?;
+
+            let pct = 60 + ((i + 1) as f32 / total * 39.0) as i16;
+            update_progress(pool, event_id, "html", pct.min(99)).await;
+        }
+
+        zip.close().await?;
+    }
+
+    tokio::fs::rename(&tmp_path, &out_path).await?;
+
+    sqlx::query(
+        "UPDATE export_job SET status = 'done', progress_pct = 100, file_path = $2, completed_at = NOW()
+         WHERE event_id = $1 AND type = 'html'::export_type",
+    )
+    .bind(event_id)
+    .bind("exports/Memories.zip")
+    .execute(pool)
+    .await?;
+
+    sqlx::query("UPDATE event SET export_html_ready = TRUE WHERE id = $1")
+        .bind(event_id)
+        .execute(pool)
+        .await?;
+
+    let _ = sse_tx.send(SseEvent {
+        event_type: "export-progress".to_string(),
+        data: serde_json::json!({ "type": "html", "progress_pct": 100 }).to_string(),
+    });
+
+    tracing::info!("HTML export complete for event {event_id}");
+    Ok(())
+}
+
+// ── DB helpers ───────────────────────────────────────────────────────────────
+
+async fn query_uploads(pool: &PgPool, event_id: Uuid) -> Result<Vec<ExportUploadRow>> {
+    Ok(sqlx::query_as::<_, ExportUploadRow>(
+        "SELECT u.id, u.original_path, u.mime_type, u.caption,
+                usr.display_name AS uploader_name,
+                COUNT(DISTINCT l.user_id) AS like_count,
+                u.created_at
+         FROM upload u
+         JOIN \"user\" usr ON usr.id = u.user_id
+         LEFT JOIN \"like\" l ON l.upload_id = u.id
+         WHERE u.event_id = $1 AND u.deleted_at IS NULL AND usr.uploads_hidden = FALSE
+         GROUP BY u.id, usr.display_name
+         ORDER BY u.created_at ASC",
+    )
+    .bind(event_id)
+    .fetch_all(pool)
+    .await?)
+}
+
+async fn query_comments(pool: &PgPool, event_id: Uuid) -> Result<Vec<ExportCommentRow>> {
+    Ok(sqlx::query_as::<_, ExportCommentRow>(
+        "SELECT c.upload_id, usr.display_name AS uploader_name, c.body, c.created_at
+         FROM comment c
+         JOIN \"user\" usr ON usr.id = c.user_id
+         JOIN upload u ON u.id = c.upload_id
+         WHERE u.event_id = $1 AND c.deleted_at IS NULL AND u.deleted_at IS NULL
+         ORDER BY c.created_at ASC",
+    )
+    .bind(event_id)
+    .fetch_all(pool)
+    .await?)
+}
+
+async fn query_hashtags(pool: &PgPool, event_id: Uuid) -> Result<Vec<(Uuid, String)>> {
+    let rows: Vec<(Uuid, String)> = sqlx::query_as(
+        "SELECT uh.upload_id, h.tag
+         FROM upload_hashtag uh
+         JOIN hashtag h ON h.id = uh.hashtag_id
+         JOIN upload u ON u.id = uh.upload_id
+         WHERE h.event_id = $1 AND u.deleted_at IS NULL",
+    )
+    .bind(event_id)
+    .fetch_all(pool)
+    .await?;
+    Ok(rows)
+}
+
+async fn mark_running(pool: &PgPool, event_id: Uuid, export_type: &str) {
+    let _ = sqlx::query(
+        "UPDATE export_job SET status = 'running' WHERE event_id = $1 AND type = $2::export_type",
+    )
+    .bind(event_id)
+    .bind(export_type)
+    .execute(pool)
+    .await;
+}
+
+async fn mark_failed(pool: &PgPool, event_id: Uuid, export_type: &str, msg: &str) {
+    let _ = sqlx::query(
+        "UPDATE export_job SET status = 'failed', error_message = $3
+         WHERE event_id = $1 AND type = $2::export_type",
+    )
+    .bind(event_id)
+    .bind(export_type)
+    .bind(msg)
+    .execute(pool)
+    .await;
+}
+
+async fn update_progress(pool: &PgPool, event_id: Uuid, export_type: &str, pct: i16) {
+    let _ = sqlx::query(
+        "UPDATE export_job SET progress_pct = $3 WHERE event_id = $1 AND type = $2::export_type",
+    )
+    .bind(event_id)
+    .bind(export_type)
+    .bind(pct)
+    .execute(pool)
+    .await;
+}
+
+async fn maybe_broadcast_complete(
+    pool: &PgPool,
+    event_id: Uuid,
+    sse_tx: &broadcast::Sender<SseEvent>,
+) {
+    let row: Option<(bool, bool)> = sqlx::query_as(
+        "SELECT export_zip_ready, export_html_ready FROM event WHERE id = $1",
+    )
+    .bind(event_id)
+    .fetch_optional(pool)
+    .await
+    .unwrap_or(None);
+
+    if let Some((zip_ready, html_ready)) = row {
+        if zip_ready && html_ready {
+            let _ = sse_tx.send(SseEvent {
+                event_type: "export-available".to_string(),
+                data: serde_json::json!({ "types": ["zip", "html"] }).to_string(),
+            });
+        }
+    }
+}
+
+fn ext_from_path(path: &str) -> &str {
+    path.rsplit('.').next().unwrap_or("bin")
+}
+
+fn sanitize_name(name: &str) -> String {
+    name.chars()
+        .map(|c| if c.is_alphanumeric() || c == '-' { c } else { '_' })
+        .collect()
+}
+
+// ── Static content ───────────────────────────────────────────────────────────
+
+const README_TEXT: &str = "Willkommen in der Event-Galerie!\n\
+\n\
+So geht's:\n\
+1. Entpacke diese ZIP-Datei\n\
+   (Windows: Rechtsklick > \"Alle extrahieren\"; Mac: Doppelklick;\n\
+    Handy: Dateimanager-App verwenden).\n\
+2. Öffne die Datei \"Memories.html\" in deinem Browser\n\
+   (z. B. Chrome, Safari oder Firefox).\n\
+3. Stöbere durch alle Fotos und Videos.\n\
+   Du kannst nach Hashtags filtern — klicke einfach auf einen Hashtag.\n\
+4. Eine Internetverbindung ist nicht nötig.\n\
+   Alles ist lokal auf deinem Gerät gespeichert.\n\
+\n\
+Viel Freude mit den Erinnerungen!\n";
+
+const MEMORIES_TEMPLATE: &str = r#"<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{ event_name }} – Erinnerungen</title>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+body{font-family:Georgia,serif;background:#faf7f2;color:#3d2b1f;min-height:100vh}
+header{background:#fff8f0;border-bottom:1px solid #e8d9c8;padding:1.5rem 1rem;text-align:center}
+header h1{font-size:1.75rem;font-weight:700;color:#5c3317;letter-spacing:.02em}
+header p{font-size:.85rem;color:#9a7060;margin-top:.25rem}
+.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem;justify-content:center;border-bottom:1px solid #e8d9c8;background:#fff8f0}
+.chip{cursor:pointer;padding:.3rem .8rem;border-radius:999px;border:1px solid #c8a98a;font-size:.8rem;color:#6b4c36;background:#fff;transition:all .15s}
+.chip:hover,.chip.active{background:#c8a98a;color:#fff;border-color:#c8a98a}
+.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;padding:1.25rem;max-width:1100px;margin:0 auto}
+.card{background:#fff;border-radius:.75rem;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;transition:transform .15s,box-shadow .15s}
+.card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.12)}
+.card.hidden{display:none}
+.thumb-wrap{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#e8d9c8}
+.thumb{width:100%;height:100%;object-fit:cover;display:block}
+.vid-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.5rem;pointer-events:none}
+.card-info{padding:.6rem .75rem}
+.card-uploader{font-size:.75rem;color:#9a7060;margin-bottom:.2rem}
+.card-caption{font-size:.85rem;color:#3d2b1f;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.card-meta{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.75rem;color:#b08060}
+.lb{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.88);overflow-y:auto}
+.lb.open{display:flex;flex-direction:column}
+.lb-close{position:fixed;top:.75rem;right:1rem;font-size:1.75rem;color:#fff;cursor:pointer;z-index:101;line-height:1}
+.lb-close:hover{color:#e8c89a}
+.lb-media{max-width:900px;width:100%;margin:3rem auto 0;padding:0 .5rem}
+.lb-media img,.lb-media video{width:100%;border-radius:.5rem;max-height:70vh;object-fit:contain;background:#1a1a1a;display:block}
+.lb-details{max-width:900px;width:100%;margin:1rem auto 2rem;padding:0 1rem}
+.lb-caption{font-size:1rem;color:#fff;margin-bottom:.5rem}
+.lb-meta{font-size:.8rem;color:#b08060;margin-bottom:.75rem}
+.lb-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
+.lb-tag{font-size:.75rem;color:#e8c89a;background:rgba(255,255,255,.1);padding:.2rem .6rem;border-radius:999px}
+.lb-likes{font-size:.85rem;color:#d4a574;margin-bottom:.75rem}
+.lb-comments h3{font-size:.9rem;color:#e8d9c8;margin-bottom:.5rem;font-weight:600}
+.comment{border-top:1px solid rgba(255,255,255,.1);padding:.5rem 0}
+.comment-name{font-size:.75rem;color:#b08060}
+.comment-body{font-size:.85rem;color:#e8d9c8;margin-top:.15rem}
+.empty{text-align:center;padding:3rem 1rem;color:#b08060;font-size:.95rem}
+footer{text-align:center;padding:1.5rem;font-size:.75rem;color:#b08060;border-top:1px solid #e8d9c8;margin-top:2rem}
+</style>
+</head>
+<body>
+<header>
+  <h1>{{ event_name }}</h1>
+  <p>Erinnerungen · Erstellt am {{ generated_at }}</p>
+</header>
+{% set ns = namespace(all_tags=[]) %}
+{% for u in uploads %}{% for t in u.hashtags %}{% if t not in ns.all_tags %}{% set ns.all_tags = ns.all_tags + [t] %}{% endif %}{% endfor %}{% endfor %}
+{% if ns.all_tags %}
+<div class="chips" id="chips">
+  <span class="chip active" data-tag="">Alle</span>
+  {% for tag in ns.all_tags %}<span class="chip" data-tag="{{ tag }}">#{{ tag }}</span>{% endfor %}
+</div>
+{% endif %}
+{% if uploads %}
+<div class="grid" id="grid">
+  {% for u in uploads %}
+  <div class="card" data-tags="{{ u.hashtags | join(',') }}" onclick="openLb({{ loop.index0 }})">
+    <div class="thumb-wrap">
+      {% if u.is_video %}
+      <video class="thumb" src="{{ u.path }}" preload="none"></video>
+      <div class="vid-icon">▶</div>
+      {% else %}
+      <img class="thumb" src="{{ u.path }}" alt="" loading="lazy">
+      {% endif %}
+    </div>
+    <div class="card-info">
+      <div class="card-uploader">{{ u.uploader_name }} · {{ u.created_at }}</div>
+      {% if u.caption %}<div class="card-caption">{{ u.caption }}</div>{% endif %}
+      <div class="card-meta">
+        <span>♡ {{ u.like_count }}</span>
+        {% if u.comments %}<span>💬 {{ u.comments | length }}</span>{% endif %}
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% else %}
+<div class="empty">Noch keine Fotos vorhanden.</div>
+{% endif %}
+<div class="lb" id="lb">
+  <span class="lb-close" onclick="closeLb()">×</span>
+  <div class="lb-media" id="lb-media"></div>
+  <div class="lb-details" id="lb-details"></div>
+</div>
+<footer>{{ event_name }} · Offline-Galerie · EventSnap</footer>
+<script>
+const uploads = {{ uploads | tojson }};
+let activeTag = '';
+function filterCards(){document.querySelectorAll('#grid .card').forEach((card,i)=>{const tags=(card.dataset.tags||'').split(',').filter(Boolean);card.classList.toggle('hidden',activeTag!==''&&!tags.includes(activeTag));});}
+document.querySelectorAll('#chips .chip').forEach(chip=>{chip.addEventListener('click',()=>{document.querySelectorAll('#chips .chip').forEach(c=>c.classList.remove('active'));chip.classList.add('active');activeTag=chip.dataset.tag;filterCards();});});
+function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
+function openLb(idx){
+  const u=uploads[idx];
+  const lb=document.getElementById('lb');
+  const media=document.getElementById('lb-media');
+  const details=document.getElementById('lb-details');
+  if(u.is_video){media.innerHTML=`<video src="${esc(u.path)}" controls autoplay playsinline></video>`;}
+  else{media.innerHTML=`<img src="${esc(u.path)}" alt="${esc(u.caption)}">`;}
+  const tags=u.hashtags.map(t=>`<span class="lb-tag">#${esc(t)}</span>`).join('');
+  const comments=u.comments.map(c=>`<div class="comment"><div class="comment-name">${esc(c.uploader_name)} · ${esc(c.created_at)}</div><div class="comment-body">${esc(c.body)}</div></div>`).join('');
+  details.innerHTML=(u.caption?`<div class="lb-caption">${esc(u.caption)}</div>`:'')+
+    `<div class="lb-meta">${esc(u.uploader_name)} · ${esc(u.created_at)}</div>`+
+    (tags?`<div class="lb-tags">${tags}</div>`:'')+
+    `<div class="lb-likes">♡ ${u.like_count} Likes</div>`+
+    (u.comments.length?`<div class="lb-comments"><h3>Kommentare (${u.comments.length})</h3>${comments}</div>`:'');
+  lb.classList.add('open');document.body.style.overflow='hidden';
+}
+function closeLb(){document.getElementById('lb').classList.remove('open');document.getElementById('lb-media').innerHTML='';document.body.style.overflow='';}
+document.getElementById('lb').addEventListener('click',e=>{if(e.target===e.currentTarget)closeLb();});
+document.addEventListener('keydown',e=>{if(e.key==='Escape')closeLb();});
+</script>
+</body>
+</html>"#;

backend/src/services/mod.rs

@@ -1 +1,3 @@
 pub mod compression;
+pub mod export;
+pub mod rate_limiter;

backend/src/services/rate_limiter.rs

@@ -0,0 +1,55 @@
+use std::collections::HashMap;
+use std::sync::{Arc, Mutex};
+use std::time::{Duration, Instant};
+
+/// Thread-safe sliding-window rate limiter backed by an in-memory HashMap.
+/// Each key (e.g. `"join:{ip}"` or `"upload:{user_id}"`) tracks timestamps
+/// of recent requests and rejects new ones once the window is full.
+#[derive(Clone)]
+pub struct RateLimiter {
+    windows: Arc<Mutex<HashMap<String, Vec<Instant>>>>,
+}
+
+impl RateLimiter {
+    pub fn new() -> Self {
+        Self {
+            windows: Arc::new(Mutex::new(HashMap::new())),
+        }
+    }
+
+    /// 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();
+        timestamps.retain(|&t| now.duration_since(t) < window);
+        if timestamps.len() < max {
+            timestamps.push(now);
+            Ok(())
+        } else {
+            // 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))
+        }
+    }
+}
+
+/// Extract the client IP from X-Forwarded-For (Caddy sets this) or fall back
+/// to a provided socket address string.
+pub fn client_ip(headers: &axum::http::HeaderMap, fallback: &str) -> String {
+    headers
+        .get("x-forwarded-for")
+        .and_then(|v| v.to_str().ok())
+        .and_then(|s| s.split(',').next())
+        .map(|s| s.trim().to_owned())
+        .unwrap_or_else(|| fallback.to_owned())
+}

backend/src/state.rs

@@ -3,6 +3,7 @@ use tokio::sync::broadcast;
 
 use crate::config::AppConfig;
 use crate::services::compression::CompressionWorker;
+use crate::services::rate_limiter::RateLimiter;
 
 #[derive(Clone, Debug)]
 pub struct SseEvent {
@@ -16,6 +17,7 @@ pub struct AppState {
     pub config: AppConfig,
     pub sse_tx: broadcast::Sender<SseEvent>,
     pub compression: CompressionWorker,
+    pub rate_limiter: RateLimiter,
 }
 
 impl AppState {
@@ -28,6 +30,7 @@ impl AppState {
             config,
             sse_tx,
             compression,
+            rate_limiter: RateLimiter::new(),
         }
     }
 }

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/package-lock.json

@@ -1029,6 +1029,7 @@
 			"integrity": "sha512-MdFRjevVxmAknf2NbaUkDF16jSIzXMWd4Nfah0Qp8TtQVoSp3bV4jKt8mX7z7qTUTWvgSaxtR0EG5WJf53gcuA==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@standard-schema/spec": "^1.0.0",
 				"@sveltejs/acorn-typescript": "^1.0.5",
@@ -1071,6 +1072,7 @@
 			"integrity": "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
 				"deepmerge": "^4.3.1",
@@ -1444,6 +1446,7 @@
 			"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -2381,6 +2384,7 @@
 			"integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/estree": "1.0.8"
 			},
@@ -2516,6 +2520,7 @@
 			"integrity": "sha512-QjvU7EFemf6mRzdMGlAFttMWtAAVXrax61SZYHdkD6yoVGQ89VeyKfZD4H1JrV1WLmJBxWhFch9H6ig/87VGjw==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@jridgewell/remapping": "^2.3.4",
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -2616,6 +2621,7 @@
 			"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
 			"dev": true,
 			"license": "Apache-2.0",
+			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -2637,6 +2643,7 @@
 			"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.27.0",
 				"fdir": "^6.5.0",

frontend/src/lib/auth.ts

@@ -4,6 +4,7 @@ import { browser } from '$app/environment';
 const TOKEN_KEY = 'eventsnap_jwt';
 const PIN_KEY = 'eventsnap_pin';
 const USER_ID_KEY = 'eventsnap_user_id';
+const DISPLAY_NAME_KEY = 'eventsnap_display_name';
 
 export const isAuthenticated = writable(false);
 
@@ -22,11 +23,28 @@ export function getUserId(): string | null {
 	return localStorage.getItem(USER_ID_KEY);
 }
 
-export function setAuth(jwt: string, pin: string | null, userId: string): void {
+export function getDisplayName(): string | null {
+	if (!browser) return null;
+	return localStorage.getItem(DISPLAY_NAME_KEY);
+}
+
+export function getExpiry(): Date | null {
+	const token = getToken();
+	if (!token) return null;
+	try {
+		const payload = JSON.parse(atob(token.split('.')[1]));
+		return payload.exp ? new Date(payload.exp * 1000) : null;
+	} catch {
+		return null;
+	}
+}
+
+export function setAuth(jwt: string, pin: string | null, userId: string, displayName?: string): void {
 	if (!browser) return;
 	localStorage.setItem(TOKEN_KEY, jwt);
 	if (pin) localStorage.setItem(PIN_KEY, pin);
 	localStorage.setItem(USER_ID_KEY, userId);
+	if (displayName) localStorage.setItem(DISPLAY_NAME_KEY, displayName);
 	isAuthenticated.set(true);
 }
 
@@ -38,6 +56,17 @@ export function clearAuth(): void {
 	isAuthenticated.set(false);
 }
 
+export function getRole(): 'guest' | 'host' | 'admin' | null {
+	const token = getToken();
+	if (!token) return null;
+	try {
+		const payload = JSON.parse(atob(token.split('.')[1]));
+		return payload.role ?? null;
+	} catch {
+		return null;
+	}
+}
+
 export function initAuth(): void {
 	if (!browser) return;
 	isAuthenticated.set(!!getToken());

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/CameraCapture.svelte

@@ -8,8 +8,8 @@
 
 	let { oncapture, onclose }: Props = $props();
 
-	let videoEl: HTMLVideoElement;
-	let canvasEl: HTMLCanvasElement;
+	let videoEl: HTMLVideoElement = $state()!;
+	let canvasEl: HTMLCanvasElement = $state()!;
 	let stream: MediaStream | null = $state(null);
 	let facingMode = $state<'environment' | 'user'>('environment');
 	let recording = $state(false);

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+
+	const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
+
+	let visible = $state(false);
+	let step = $state(0);
+
+	const steps = [
+		{
+			icon: '📸',
+			title: 'Willkommen bei EventSnap!',
+			body: 'Hier kannst du Fotos und Videos mit allen Gästen teilen — in Echtzeit, ganz ohne App-Store.'
+		},
+		{
+			icon: '⬆️',
+			title: 'Fotos & Videos hochladen',
+			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: '#️⃣',
+			title: 'Hashtags nutzen',
+			body: 'Füge in deiner Bildunterschrift #hashtags ein, um Fotos zu gruppieren — z.B. #tanz, #buffet oder #reden. Du kannst danach filtern.'
+		},
+		{
+			icon: '🔑',
+			title: 'Deinen PIN merken!',
+			body: 'Du hast beim Registrieren einen 4-stelligen PIN erhalten. Speichere ihn — du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen. Er ist immer unter „Mein Konto" zu finden.'
+		}
+	];
+
+	if (browser && !localStorage.getItem(GUIDE_SEEN_KEY)) {
+		visible = true;
+	}
+
+	function next() {
+		if (step < steps.length - 1) {
+			step++;
+		} else {
+			dismiss();
+		}
+	}
+
+	function dismiss() {
+		if (browser) localStorage.setItem(GUIDE_SEEN_KEY, '1');
+		visible = false;
+	}
+</script>
+
+{#if visible}
+	<!-- Backdrop -->
+	<div class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 sm:items-center">
+		<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-2xl">
+			<!-- Step indicator -->
+			<div class="mb-5 flex justify-center gap-1.5">
+				{#each steps as _, i}
+					<div class="h-1.5 rounded-full transition-all {i === step ? 'w-6 bg-blue-600' : 'w-1.5 bg-gray-200'}"></div>
+				{/each}
+			</div>
+
+			<!-- Content -->
+			<div class="mb-6 text-center">
+				<div class="mb-3 text-5xl">{steps[step].icon}</div>
+				<h2 class="mb-2 text-xl font-bold text-gray-900">{steps[step].title}</h2>
+				<p class="text-sm leading-relaxed text-gray-600">{steps[step].body}</p>
+			</div>
+
+			<!-- Buttons -->
+			<div class="flex gap-2">
+				<button
+					onclick={dismiss}
+					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50"
+				>
+					Überspringen
+				</button>
+				<button
+					onclick={next}
+					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700"
+				>
+					{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,223 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken, getPin, getDisplayName, getExpiry, getRole, clearAuth } from '$lib/auth';
+	import { api } from '$lib/api';
+	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 pinCopied = $state(false);
+	let leaveConfirmOpen = $state(false);
+
+	onMount(() => {
+		if (!getToken()) {
+			goto('/join');
+			return;
+		}
+		pin = getPin();
+		displayName = getDisplayName();
+		role = getRole();
+		expiry = getExpiry();
+	});
+
+	function copyPin() {
+		if (!pin) return;
+		navigator.clipboard.writeText(pin);
+		pinCopied = true;
+		setTimeout(() => (pinCopied = false), 2000);
+	}
+
+	async function handleLogout() {
+		try { await api.delete('/session'); } catch { /* ignore */ }
+		clearAuth();
+		goto('/join');
+	}
+
+	function formatDate(d: Date): string {
+		return d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
+	}
+
+	function roleLabel(r: string | null): string {
+		switch (r) {
+			case 'admin': return 'Admin';
+			case 'host': return 'Gastgeber';
+			default: return 'Gast';
+		}
+	}
+
+	function roleColor(r: string | null): string {
+		switch (r) {
+			case 'admin': return 'bg-red-100 text-red-700';
+			case 'host': return 'bg-purple-100 text-purple-700';
+			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 pb-24">
+	<!-- Header -->
+	<div class="border-b border-gray-200 bg-white">
+		<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>
+		</div>
+	</div>
+
+	<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-4">
+				<div
+					class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
+						{avatarColor(displayName)}"
+				>
+					{displayName ? displayName[0].toUpperCase() : '?'}
+				</div>
+				<div class="min-w-0">
+					<p class="truncate text-lg font-bold text-gray-900">{displayName ?? 'Unbekannt'}</p>
+					<span class="mt-0.5 inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold {roleColor(role)}">
+						{roleLabel(role)}
+					</span>
+				</div>
+			</div>
+			{#if expiry}
+				<p class="mt-3 text-xs text-gray-400">Sitzung gültig bis {formatDate(expiry)}</p>
+			{/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>
+			<p class="mb-3 text-sm text-amber-700">
+				Du brauchst diesen PIN, um dein Konto auf einem anderen Gerät wiederherzustellen. Schreib ihn auf!
+			</p>
+			{#if pin}
+				<div class="flex items-center justify-between rounded-lg bg-white px-4 py-3 shadow-sm">
+					<span class="font-mono text-4xl font-bold tracking-widest text-gray-900">{pin}</span>
+					<button
+						onclick={copyPin}
+						class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-200"
+					>
+						{pinCopied ? 'Kopiert!' : 'Kopieren'}
+					</button>
+				</div>
+			{:else}
+				<div class="rounded-lg bg-white px-4 py-3 text-sm text-gray-400 shadow-sm">
+					PIN nicht gespeichert. Nutze die Wiederherstellungs-Seite, um dich mit deinem PIN anzumelden.
+				</div>
+			{/if}
+		</div>
+
+		<!-- Konto section -->
+		<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+			<div class="border-b border-gray-100 px-5 py-3">
+				<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Konto</h2>
+			</div>
+
+			<!-- Recover / device switch -->
+			<a
+				href="/recover"
+				class="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="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700"
+			>
+				Abmelden
+			</button>
+			<button
+				onclick={() => (leaveConfirmOpen = false)}
+				class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+			>
+				Abbrechen
+			</button>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,502 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken, getRole } from '$lib/auth';
+	import { api } from '$lib/api';
+	import { onMount } from 'svelte';
+
+	interface StatsDto {
+		user_count: number;
+		upload_count: number;
+		comment_count: number;
+		disk_total_bytes: number;
+		disk_used_bytes: number;
+		disk_free_bytes: number;
+	}
+
+	interface ExportJob {
+		id: string;
+		type: string;
+		status: string;
+		progress_pct: number;
+		error_message: string | null;
+		created_at: string;
+		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)',
+		upload_rate_per_hour: 'Upload-Limit pro Stunde',
+		feed_rate_per_min: 'Feed-Anfragen pro Minute',
+		export_rate_per_day: 'Export-Downloads pro Tag',
+		quota_tolerance: 'Speicherkontingent-Toleranz (0–1)',
+		estimated_guest_count: 'Geschätzte Gästezahl',
+		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('/admin/login');
+			return;
+		}
+		await reload();
+	});
+
+	async function reload() {
+		loading = true;
+		error = null;
+		try {
+			[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<UserSummary[]>('/host/users')
+			]);
+			configDraft = { ...config };
+		} catch (e: unknown) {
+			error = e instanceof Error ? e.message : 'Fehler beim Laden.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	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);
+	}
+
+	async function saveConfig() {
+		saving = true;
+		try {
+			const changes: Record<string, string> = {};
+			for (const key of Object.keys(configDraft)) {
+				if (configDraft[key] !== config[key]) {
+					changes[key] = String(configDraft[key]);
+				}
+			}
+			if (Object.keys(changes).length === 0) {
+				showToast('Keine Änderungen.');
+				return;
+			}
+			await api.patch('/admin/config', changes);
+			config = { ...configDraft };
+			showToast('Konfiguration gespeichert.');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler beim Speichern.');
+		} finally {
+			saving = false;
+		}
+	}
+
+	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(s: StatsDto): number {
+		if (s.disk_total_bytes === 0) return 0;
+		return Math.round((s.disk_used_bytes / s.disk_total_bytes) * 100);
+	}
+
+	function jobLabel(type: string): string {
+		return type === 'zip' ? 'ZIP-Archiv' : 'HTML-Viewer';
+	}
+
+	function statusBadgeClass(status: string): string {
+		switch (status) {
+			case 'done': return 'bg-green-100 text-green-700';
+			case 'running': return 'bg-blue-100 text-blue-700';
+			case 'failed': return 'bg-red-100 text-red-700';
+			default: return 'bg-gray-100 text-gray-600';
+		}
+	}
+
+	function statusLabel(status: string): string {
+		switch (status) {
+			case 'pending': return 'Ausstehend';
+			case 'running': return 'Läuft';
+			case 'done': return 'Fertig';
+			case 'failed': return 'Fehlgeschlagen';
+			default: return status;
+		}
+	}
+</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-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 pb-24">
+	<!-- Header -->
+	<div class="border-b border-gray-200 bg-white">
+		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
+			<button
+				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>
+			<h1 class="text-xl font-bold text-gray-900">Admin-Dashboard</h1>
+		</div>
+	</div>
+
+	<!-- 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 tab ────────────────────────────────────────────────── -->
+			{#if activeTab === 'stats'}
+				<div class="space-y-3">
+					{#if stats}
+						<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="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.5 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
+						</div>
+					{/if}
+				</div>
+
+			<!-- ── Config tab ───────────────────────────────────────────────── -->
+			{:else if activeTab === 'config'}
+				<div class="relative">
+					<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>
+								<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-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="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">
+							<h3 class="font-semibold text-gray-900">Export-Jobs</h3>
+							<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>
+						{:else}
+							<div class="space-y-3">
+								{#each exportJobs as job}
+									<div class="rounded-lg border border-gray-100 p-3">
+										<div class="flex items-center justify-between">
+											<span class="text-sm font-medium text-gray-900">{jobLabel(job.type)}</span>
+											<span class="rounded-full px-2 py-0.5 text-xs font-medium {statusBadgeClass(job.status)}">
+												{statusLabel(job.status)}
+											</span>
+										</div>
+										{#if job.status === 'running'}
+											<div class="mt-2">
+												<div class="mb-1 flex justify-between text-xs text-gray-500">
+													<span>Fortschritt</span><span>{job.progress_pct} %</span>
+												</div>
+												<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
+													<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {job.progress_pct}%"></div>
+												</div>
+											</div>
+										{/if}
+										{#if job.error_message}
+											<p class="mt-1 text-xs text-red-600">{job.error_message}</p>
+										{/if}
+									</div>
+								{/each}
+							</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

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken } from '$lib/auth';
+	import { api } from '$lib/api';
+	import { onMount, onDestroy } from 'svelte';
+	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
+
+	interface JobStatus {
+		status: 'locked' | 'pending' | 'running' | 'done' | 'failed';
+		progress_pct: number;
+	}
+
+	interface ExportStatus {
+		released: boolean;
+		zip: JobStatus;
+		html: JobStatus;
+	}
+
+	const HTML_GUIDE_KEY = 'eventsnap_html_guide_seen';
+
+	let status = $state<ExportStatus | null>(null);
+	let showHtmlGuide = $state(false);
+	let loading = $state(true);
+
+	let unsubscribers: (() => void)[] = [];
+
+	onMount(async () => {
+		if (!getToken()) {
+			goto('/join');
+			return;
+		}
+
+		await loadStatus();
+		connectSse();
+
+		unsubscribers.push(
+			onSseEvent('export-progress', async () => {
+				await loadStatus();
+			}),
+			onSseEvent('export-available', async () => {
+				await loadStatus();
+			})
+		);
+	});
+
+	onDestroy(() => {
+		disconnectSse();
+		for (const unsub of unsubscribers) unsub();
+	});
+
+	async function loadStatus() {
+		try {
+			status = await api.get<ExportStatus>('/export/status');
+		} catch {
+			// ignore
+		} finally {
+			loading = false;
+		}
+	}
+
+	function jobLabel(type: 'zip' | 'html'): string {
+		return type === 'zip' ? 'ZIP-Archiv (Gallery.zip)' : 'HTML-Viewer (Memories.zip)';
+	}
+
+	function statusText(job: JobStatus): string {
+		switch (job.status) {
+			case 'locked': return 'Noch nicht freigegeben';
+			case 'pending': return 'Wird vorbereitet…';
+			case 'running': return `Wird erstellt (${job.progress_pct} %)`;
+			case 'done': return 'Bereit zum Download';
+			case 'failed': return 'Fehlgeschlagen';
+		}
+	}
+
+	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() {
+		downloadFile('/api/v1/export/zip', 'Gallery.zip');
+	}
+
+	function downloadHtml() {
+		if (localStorage.getItem(HTML_GUIDE_KEY)) {
+			downloadFile('/api/v1/export/html', 'Memories.zip');
+		} else {
+			showHtmlGuide = true;
+		}
+	}
+
+	function confirmHtmlDownload() {
+		localStorage.setItem(HTML_GUIDE_KEY, '1');
+		showHtmlGuide = false;
+		downloadFile('/api/v1/export/html', 'Memories.zip');
+	}
+</script>
+
+<!-- HTML guide modal -->
+{#if showHtmlGuide}
+	<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-3 text-lg font-bold text-gray-900">Hinweis zum HTML-Viewer</h2>
+			<ol class="mb-4 space-y-2 text-sm text-gray-700">
+				<li class="flex gap-2"><span class="font-bold text-blue-600">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
+				<li class="flex gap-2"><span class="font-bold text-blue-600">2.</span> <strong>Memories.html</strong> im Browser öffnen.</li>
+				<li class="flex gap-2"><span class="font-bold text-blue-600">3.</span> Kein Internet nötig — alles ist lokal gespeichert.</li>
+			</ol>
+			<p class="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
+				Tipp: Am besten im WLAN herunterladen — die Datei kann mehrere GB groß sein.
+			</p>
+			<div class="flex gap-2">
+				<button
+					onclick={() => (showHtmlGuide = false)}
+					class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50"
+				>
+					Abbrechen
+				</button>
+				<button
+					onclick={confirmHtmlDownload}
+					class="flex-1 rounded-lg bg-blue-600 py-2 text-sm font-medium text-white hover:bg-blue-700"
+				>
+					Herunterladen
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<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 px-4 py-4">
+			<h1 class="text-xl font-bold text-gray-900">Export</h1>
+		</div>
+	</div>
+
+	<div class="mx-auto max-w-lg space-y-4 p-4">
+		{#if loading}
+			<div class="py-16 text-center text-gray-400">Laden…</div>
+		{:else if !status?.released}
+			<div class="rounded-xl border border-gray-200 bg-white p-6 text-center">
+				<svg class="mx-auto mb-3 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+				</svg>
+				<p class="font-medium text-gray-700">Export noch nicht verfügbar</p>
+				<p class="mt-1 text-sm text-gray-500">Schau nach der Veranstaltung noch einmal vorbei.</p>
+			</div>
+		{:else if status}
+			<p class="text-sm text-gray-500">Wähle dein bevorzugtes Format:</p>
+
+			<!-- ZIP card -->
+			<div class="rounded-xl border border-gray-200 bg-white p-5">
+				<div class="flex items-start justify-between gap-4">
+					<div class="min-w-0">
+						<h2 class="font-semibold text-gray-900">ZIP-Archiv</h2>
+						<p class="mt-0.5 text-sm text-gray-500">Alle Original-Fotos und Videos in strukturierten Ordnern.</p>
+						<p class="mt-1 text-xs {status.zip.status === 'done' ? 'text-green-600' : status.zip.status === 'failed' ? 'text-red-500' : 'text-gray-400'}">
+							{statusText(status.zip)}
+						</p>
+					</div>
+					<button
+						onclick={downloadZip}
+						disabled={status.zip.status !== 'done'}
+						class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.zip.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}"
+					>
+						Download
+					</button>
+				</div>
+				{#if status.zip.status === 'running'}
+					<div class="mt-3">
+						<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
+							<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {status.zip.progress_pct}%"></div>
+						</div>
+					</div>
+				{/if}
+			</div>
+
+			<!-- HTML card -->
+			<div class="rounded-xl border border-gray-200 bg-white p-5">
+				<div class="flex items-start justify-between gap-4">
+					<div class="min-w-0">
+						<h2 class="font-semibold text-gray-900">HTML-Viewer</h2>
+						<p class="mt-0.5 text-sm text-gray-500">Schöne Offline-Galerie mit Filterung, Kommentaren und Likes — kein Internet nötig.</p>
+						<p class="mt-1 text-xs {status.html.status === 'done' ? 'text-green-600' : status.html.status === 'failed' ? 'text-red-500' : 'text-gray-400'}">
+							{statusText(status.html)}
+						</p>
+					</div>
+					<button
+						onclick={downloadHtml}
+						disabled={status.html.status !== 'done'}
+						class="shrink-0 rounded-lg px-4 py-2 text-sm font-medium {status.html.status === 'done' ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-gray-100 text-gray-400 cursor-not-allowed'}"
+					>
+						Download
+					</button>
+				</div>
+				{#if status.html.status === 'running'}
+					<div class="mt-3">
+						<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
+							<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {status.html.progress_pct}%"></div>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { getToken, clearAuth } from '$lib/auth';
+	import { getToken } from '$lib/auth';
 	import { api } from '$lib/api';
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
 	import { onMount, onDestroy } from 'svelte';
 	import FeedGrid from '$lib/components/FeedGrid.svelte';
+	import FeedListCard from '$lib/components/FeedListCard.svelte';
 	import HashtagChips from '$lib/components/HashtagChips.svelte';
 	import LightboxModal from '$lib/components/LightboxModal.svelte';
+	import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
 	import type { FeedUpload, FeedResponse, HashtagCount } from '$lib/types';
 
 	let uploads = $state<FeedUpload[]>([]);
@@ -17,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');
@@ -35,25 +104,15 @@
 					uploads = [upload, ...uploads];
 				} catch { /* ignore */ }
 			}),
-			onSseEvent('upload-processed', () => {
-				// Reload feed to get updated preview URLs
-				loadFeed(true);
-			}),
-			onSseEvent('like-update', () => {
-				loadFeed(true);
-			}),
-			onSseEvent('new-comment', () => {
-				loadFeed(true);
-			})
+			onSseEvent('upload-processed', () => loadFeed(true)),
+			onSseEvent('like-update', () => loadFeed(true)),
+			onSseEvent('new-comment', () => loadFeed(true))
 		);
 
-		// Infinite scroll via IntersectionObserver
 		if (sentinel) {
 			const observer = new IntersectionObserver(
 				(entries) => {
-					if (entries[0].isIntersecting && nextCursor && !loadingMore) {
-						loadMore();
-					}
+					if (entries[0].isIntersecting && nextCursor && !loadingMore) loadMore();
 				},
 				{ rootMargin: '200px' }
 			);
@@ -72,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 {
-			// Ignore
-		}
+		} catch { /* ignore */ }
 	}
 
 	async function loadMore() {
@@ -94,13 +145,10 @@
 			params.set('cursor', nextCursor);
 			if (selectedHashtag) params.set('hashtag', selectedHashtag);
 			params.set('limit', '20');
-
 			const res = await api.get<FeedResponse>(`/feed?${params}`);
 			uploads = [...uploads, ...res.uploads];
 			nextCursor = res.next_cursor;
-		} catch {
-			// Ignore
-		} finally {
+		} catch { /* ignore */ } finally {
 			loadingMore = false;
 		}
 	}
@@ -108,9 +156,7 @@
 	async function loadHashtags() {
 		try {
 			hashtags = await api.get<HashtagCount[]>('/hashtags');
-		} catch {
-			// Ignore
-		}
+		} catch { /* ignore */ }
 	}
 
 	function selectHashtag(tag: string | null) {
@@ -122,29 +168,19 @@
 	async function handleLike(id: string) {
 		try {
 			await api.post(`/upload/${id}/like`);
-			// Toggle locally for instant feedback
 			uploads = uploads.map((u) =>
 				u.id === id
-					? {
-							...u,
-							liked_by_me: !u.liked_by_me,
-							like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1
-						}
+					? { ...u, liked_by_me: !u.liked_by_me, like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1 }
 					: u
 			);
-			// Also update lightbox if open
 			if (selectedUpload?.id === id) {
 				selectedUpload = {
 					...selectedUpload,
 					liked_by_me: !selectedUpload.liked_by_me,
-					like_count: selectedUpload.liked_by_me
-						? selectedUpload.like_count - 1
-						: selectedUpload.like_count + 1
+					like_count: selectedUpload.liked_by_me ? selectedUpload.like_count - 1 : selectedUpload.like_count + 1,
 				};
 			}
-		} catch {
-			// Ignore
-		}
+		} catch { /* ignore */ }
 	}
 
 	function openComments(id: string) {
@@ -152,62 +188,187 @@
 		if (u) selectedUpload = u;
 	}
 
-	async function handleLogout() {
-		try { await api.delete('/session'); } catch { /* ignore */ }
-		clearAuth();
-		goto('/join');
+	function selectSuggestion(item: Filter) {
+		if (!activeFilters.some((f) => f.type === item.type && f.value === item.value)) {
+			activeFilters = [...activeFilters, item];
+		}
+		searchQuery = '';
+		showAutocomplete = false;
+	}
+
+	function removeFilter(item: Filter) {
+		activeFilters = activeFilters.filter((f) => !(f.type === item.type && f.value === item.value));
+	}
+
+	function clearFilters() {
+		activeFilters = [];
+		searchQuery = '';
+	}
+
+	function switchView(mode: 'list' | 'grid') {
+		viewMode = mode;
+		if (mode === 'list') {
+			searchQuery = '';
+			showAutocomplete = false;
+		}
 	}
 </script>
 
-<div class="min-h-screen bg-gray-50">
-	<!-- Header -->
-	<div class="sticky top-0 z-40 border-b border-gray-200 bg-white/95 backdrop-blur">
+<div class="min-h-screen bg-gray-50 pb-24">
+	<!-- Sticky header -->
+	<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur">
 		<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
 			<h1 class="text-lg font-bold text-gray-900">Galerie</h1>
-			<div class="flex items-center gap-3">
-				<a
-					href="/upload"
-					class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-blue-700"
-				>
-					Hochladen
-				</a>
+
+			<!-- List / Grid toggle -->
+			<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
 				<button
-					onclick={handleLogout}
-					class="text-sm text-gray-500 hover:text-gray-700"
+					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"
 				>
-					Abmelden
+					<!-- bars-3 -->
+					<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+					</svg>
+				</button>
+				<button
+					onclick={() => switchView('grid')}
+					class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
+					aria-label="Rasteransicht"
+				>
+					<!-- squares-2x2 -->
+					<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+					</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 -->
-	<div class="mx-auto max-w-2xl p-4">
-		{#if uploads.length === 0}
-			<div class="py-16 text-center">
-				<p class="text-lg text-gray-400">Noch keine Fotos.</p>
-				<p class="mt-1 text-sm text-gray-400">Sei der Erste und lade etwas hoch!</p>
-				<a href="/upload" class="mt-4 inline-block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white">
-					Jetzt hochladen
-				</a>
-			</div>
+					<!-- Autocomplete dropdown -->
+					{#if showAutocomplete && suggestions.length > 0}
+						<div class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
+							{#each suggestions as item}
+								<button
+									class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50"
+									onmousedown={() => selectSuggestion(item)}
+								>
+									{#if item.type === 'user'}
+										<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+											<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+										</svg>
+										<span class="font-medium text-gray-900">{item.value}</span>
 									{:else}
-			<FeedGrid
-				{uploads}
+										<span class="text-blue-500 font-medium">#</span>
+										<span class="font-medium text-gray-900">{item.value}</span>
+									{/if}
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Active filter chips -->
+				{#if activeFilters.length > 0}
+					<div class="mt-2 flex flex-wrap items-center gap-1.5">
+						{#each activeFilters as filter}
+							<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">
+								{filter.type === 'tag' ? '#' : ''}{filter.value}
+								<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900" aria-label="Filter entfernen">
+									<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+									</svg>
+								</button>
+							</span>
+						{/each}
+						{#if activeFilters.length >= 2}
+							<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600">
+								Alle löschen
+							</button>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Content -->
+	{#if uploads.length === 0}
+		<div class="py-20 text-center">
+			<p class="text-lg text-gray-400">Noch keine Fotos.</p>
+			<p class="mt-1 text-sm text-gray-400">Tippe auf den Plus-Button unten!</p>
+		</div>
+	{:else if viewMode === 'list'}
+		<!-- List view: chronological full-width cards -->
+		<div class="mx-auto max-w-2xl">
+			{#each uploads as upload (upload.id)}
+				<FeedListCard
+					{upload}
 					onlike={handleLike}
 					oncomment={openComments}
 					onselect={(u) => (selectedUpload = u)}
 				/>
+			{/each}
+		</div>
+	{:else}
+		<!-- Grid view: 3-col, filters applied -->
+		<div class="mx-auto max-w-2xl">
+			{#if displayUploads.length === 0}
+				<div class="py-16 text-center">
+					<p class="text-sm text-gray-400">Keine Treffer für die gewählten Filter.</p>
+					<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline">Filter zurücksetzen</button>
+				</div>
+			{:else}
+				<FeedGrid
+					uploads={displayUploads}
+					onlike={handleLike}
+					oncomment={openComments}
+					onselect={(u) => (selectedUpload = u)}
+					threeCol={true}
+				/>
+			{/if}
+		</div>
 	{/if}
 
 	<!-- Infinite scroll sentinel -->
+	<div class="mx-auto max-w-2xl">
 		<div bind:this={sentinel} class="h-4"></div>
-
 		{#if loadingMore}
 			<div class="py-4 text-center">
 				<div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
@@ -224,3 +385,6 @@
 		onlike={handleLike}
 	/>
 {/if}
+
+<!-- First-visit onboarding guide -->
+<OnboardingGuide />

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

@@ -0,0 +1,407 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken, getRole } from '$lib/auth';
+	import { api } from '$lib/api';
+	import { onMount } from 'svelte';
+
+	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;
+	}
+
+	interface EventStatus {
+		name: string;
+		is_active: boolean;
+		uploads_locked: boolean;
+		export_released: boolean;
+	}
+
+	let event = $state<EventStatus | null>(null);
+	let users = $state<UserSummary[]>([]);
+	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);
+
+	let toast = $state<string | null>(null);
+
+	const myRole = getRole();
+
+	onMount(async () => {
+		const token = getToken();
+		const role = getRole();
+		if (!token || (role !== 'host' && role !== 'admin')) {
+			goto('/join');
+			return;
+		}
+		await reload();
+	});
+
+	async function reload() {
+		loading = true;
+		error = null;
+		try {
+			[event, users] = await Promise.all([
+				api.get<EventStatus>('/host/event'),
+				api.get<UserSummary[]>('/host/users')
+			]);
+		} catch (e: unknown) {
+			error = e instanceof Error ? e.message : 'Fehler beim Laden.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function showToast(msg: string) {
+		toast = msg;
+		setTimeout(() => (toast = null), 3000);
+	}
+
+	async function toggleEventLock() {
+		if (!event) return;
+		try {
+			if (event.uploads_locked) {
+				await api.post('/host/event/open');
+				showToast('Uploads wurden wieder geöffnet.');
+			} else {
+				await api.post('/host/event/close');
+				showToast('Uploads wurden gesperrt.');
+			}
+			await reload();
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	async function releaseGallery() {
+		try {
+			await api.post('/host/gallery/release');
+			showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
+			await reload();
+		} 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;
+			await reload();
+		} 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.`);
+			await reload();
+		} 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.`);
+			await reload();
+		} 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.`);
+			await reload();
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	function formatBytes(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	}
+</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-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 pb-24">
+	<!-- Header -->
+	<div class="border-b border-gray-200 bg-white">
+		<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
+			<button
+				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="truncate text-sm text-gray-500">{event.name}</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+
+	<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}
+
+			<!-- ── Statistiken ─────────────────────────────────────────────── -->
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+				<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 transition
+								{event.uploads_locked ? 'bg-green-600 text-white hover:bg-green-700' : '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 transition
+								{event.export_released ? 'cursor-default bg-gray-100 text-gray-400' : 'bg-blue-600 text-white hover:bg-blue-700'}"
+						>
+							{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
+						</button>
+					</div>
+				</div>
+			</div>
+
+			<!-- ── Nutzerverwaltung ───────────────────────────────────────── -->
+			<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
+				<button
+					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>
+						</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' && (myRole === 'host' || myRole === 'admin')}
+														<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>
+				</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;
@@ -22,11 +29,14 @@
 				is_new: boolean;
 			}>('/join', { display_name: displayName.trim() });
 
-			setAuth(res.jwt, res.pin, res.user_id);
+			setAuth(res.jwt, res.pin, res.user_id, displayName.trim());
 			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/recover/+page.svelte

@@ -25,7 +25,7 @@
 				user_id: string;
 			}>('/recover', { display_name: displayName.trim(), pin: pin.trim() });
 
-			setAuth(res.jwt, pin.trim(), res.user_id);
+			setAuth(res.jwt, pin.trim(), res.user_id, displayName.trim());
 			goto('/feed');
 		} catch (e) {
 			if (e instanceof ApiError) {

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

@@ -2,78 +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 { onMount } from 'svelte';
+	import { showBottomNav } from '$lib/ui-store';
+	import { pendingFiles, pendingCaption, clearPending } from '$lib/pending-upload-store';
+	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 fileInput: HTMLInputElement;
+	let submitting = $state(false);
+	let captionEl: HTMLTextAreaElement;
+
+	// 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() {
-		const files = fileInput?.files;
-		if (!files || files.length === 0) return;
+	onDestroy(() => {
+		showBottomNav.set(true);
+	});
 
-		for (const file of files) {
-			await addToQueue(file, caption, hashtags);
+	function removeFile(idx: number) {
+		const removed = stagedFiles[idx];
+		URL.revokeObjectURL(removed.previewUrl);
+		stagedFiles = stagedFiles.filter((_, i) => i !== idx);
 	}
 
-		// Reset form
-		caption = '';
-		hashtags = '';
-		if (fileInput) fileInput.value = '';
+	function cancel() {
+		clearPending();
+		goto('/feed');
+	}
+
+	async function handleSubmit() {
+		if (stagedFiles.length === 0 || submitting) return;
+		submitting = true;
+		for (const sf of stagedFiles) {
+			await addToQueue(sf.file, caption, '');
+		}
+		clearPending();
+		goto('/feed');
+	}
+
+	function isVideo(file: File): boolean {
+		return file.type.startsWith('video/');
 	}
 </script>
 
-<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">
-			<label
-				class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 transition hover:border-blue-400 hover:bg-blue-50"
+<!-- Full-screen composer — bottom nav is suppressed -->
+<div class="flex min-h-screen flex-col bg-white">
+	<!-- Header -->
+	<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
+		<button
+			onclick={cancel}
+			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-10 w-10 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 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="M6 18 18 6M6 6l12 12" />
 			</svg>
-				<span class="text-sm font-medium text-gray-600">Fotos oder Videos auswählen</span>
-				<span class="mt-1 text-xs text-gray-400">Mehrere Dateien möglich</span>
-				<input
-					bind:this={fileInput}
-					type="file"
-					accept="image/*,video/*"
-					multiple
-					class="hidden"
-					onchange={handleFiles}
-				/>
-			</label>
+		</button>
+		<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">
-				<input
-					type="text"
+	<div class="flex flex-1 flex-col overflow-y-auto">
+		<!-- Thumbnail strip -->
+		{#if stagedFiles.length > 0}
+			<div class="flex gap-2 overflow-x-auto px-4 py-3 scrollbar-none">
+				{#each stagedFiles as sf, i}
+					<div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100">
+						{#if isVideo(sf.file)}
+							<div class="flex h-full w-full items-center justify-center bg-gray-800">
+								<svg class="h-7 w-7 text-white/70" fill="currentColor" viewBox="0 0 24 24">
+									<path d="M8 5v14l11-7z" />
+								</svg>
+							</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 (optional, #hashtags möglich)"
-					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"
-				/>
-				<input
-					type="text"
-					bind:value={hashtags}
-					placeholder="Hashtags (kommagetrennt, z.B. hochzeit, party)"
-					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>
+				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'
+		}
+	}
 });