feat: implement host dashboard

Add Host Dashboard for event and guest management, accessible at /host.

Backend — new /api/v1/host/* endpoints (RequireHost auth):
- GET  /host/event                    → event name + lock/release state
- POST /host/event/close|open         → lock or unlock uploads; SSE broadcast
- POST /host/gallery/release          → set release timestamp, enqueue export jobs
- GET  /host/users                    → all guests with upload count & bytes
- POST /host/users/{id}/ban           → ban with optional upload-hide choice
- POST /host/users/{id}/unban         → lift ban
- PATCH /host/users/{id}/role         → promote guest→host or demote host→guest
- DELETE /host/upload/{id}            → host-level soft-delete + SSE
- DELETE /host/comment/{id}           → host-level soft-delete

Frontend — /host page:
- Event controls: lock/unlock toggle and release-gallery button with status badges
- Guest table: display name, role badge, upload count, storage used
- Ban flow: modal asking whether to keep or hide the user's uploads
- Promote/demote buttons respecting caller role (host can promote guests; admin can demote hosts)
- auth.ts: getRole() decodes JWT payload client-side to gate the route

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

.env.test

@@ -0,0 +1,45 @@
+# ── Domain ────────────────────────────────────────────────────────────────────
+# Public domain Caddy will serve and obtain a TLS certificate for.
+DOMAIN=my-event.example.com
+
+# ── App server ────────────────────────────────────────────────────────────────
+APP_PORT=3000
+
+# ── Database ──────────────────────────────────────────────────────────────────
+DATABASE_URL=postgres://eventsnap:secret@db:5432/eventsnap
+POSTGRES_USER=eventsnap
+POSTGRES_PASSWORD=secret
+POSTGRES_DB=eventsnap
+
+# ── Authentication ────────────────────────────────────────────────────────────
+# Generate with: openssl rand -hex 64
+JWT_SECRET=change_me_to_a_random_64_byte_hex_string
+SESSION_EXPIRY_DAYS=30
+
+# Admin dashboard password (bcrypt hash).
+# Generate with: htpasswd -bnBC 12 "" yourpassword | tr -d ':\n'
+ADMIN_PASSWORD_HASH=$2y$12$placeholder_replace_me
+
+# ── Event ─────────────────────────────────────────────────────────────────────
+EVENT_NAME=Max & Maria's Wedding
+EVENT_SLUG=max-maria-2026
+
+# ── Storage ───────────────────────────────────────────────────────────────────
+MEDIA_PATH=/media
+
+# ── Upload limits ─────────────────────────────────────────────────────────────
+DEFAULT_MAX_IMAGE_SIZE_MB=20
+DEFAULT_MAX_VIDEO_SIZE_MB=500
+
+# ── Rate limiting ─────────────────────────────────────────────────────────────
+DEFAULT_UPLOAD_RATE_PER_HOUR=10
+DEFAULT_FEED_RATE_PER_MIN=60
+DEFAULT_EXPORT_RATE_PER_DAY=3
+
+# ── Capacity ──────────────────────────────────────────────────────────────────
+DEFAULT_ESTIMATED_GUEST_COUNT=100
+# Fraction of total storage that triggers the "low storage" warning (0.0–1.0)
+DEFAULT_QUOTA_TOLERANCE=0.75
+
+# ── Workers ───────────────────────────────────────────────────────────────────
+COMPRESSION_WORKER_CONCURRENCY=2

backend/Cargo.lock

@@ -894,15 +894,19 @@ dependencies = [
  "bcrypt",
  "chrono",
  "dotenvy",
+ "futures",
  "image",
  "jsonwebtoken",
  "minijinja",
  "oxipng",
+ "rand 0.9.2",
  "serde",
  "serde_json",
+ "sha2",
  "sqlx",
  "sysinfo",
  "tokio",
+ "tokio-stream",
  "tower",
  "tower-http",
  "tower_governor",
@@ -3251,6 +3255,7 @@ dependencies = [
  "futures-core",
  "pin-project-lite",
  "tokio",
+ "tokio-util",
 ]
 
 [[package]]

backend/Cargo.toml

@@ -16,6 +16,10 @@ jsonwebtoken = "9"
 bcrypt = "0.15"
 uuid = { version = "1", features = ["v4", "serde"] }
 chrono = { version = "0.4", features = ["serde"] }
+tokio-stream = { version = "0.1", features = ["sync"] }
+futures = "0.3"
+sha2 = "0.10"
+rand = "0.9"
 anyhow = "1"
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }

backend/migrations/006_user_pin_lockout.down.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "user" DROP COLUMN IF EXISTS pin_locked_until;
+ALTER TABLE "user" DROP COLUMN IF EXISTS failed_pin_attempts;

backend/migrations/006_user_pin_lockout.up.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "user" ADD COLUMN failed_pin_attempts SMALLINT NOT NULL DEFAULT 0;
+ALTER TABLE "user" ADD COLUMN pin_locked_until TIMESTAMPTZ;

backend/src/auth/handlers.rs

@@ -0,0 +1,232 @@
+use axum::extract::State;
+use axum::http::StatusCode;
+use axum::Json;
+use chrono::{Duration, Utc};
+use rand::Rng;
+use serde::{Deserialize, Serialize};
+use uuid::Uuid;
+
+use crate::auth::jwt;
+use crate::auth::middleware::AuthUser;
+use crate::error::AppError;
+use crate::models::event::Event;
+use crate::models::session::Session;
+use crate::models::user::{User, UserRole};
+use crate::state::AppState;
+
+#[derive(Deserialize)]
+pub struct JoinRequest {
+    pub display_name: String,
+}
+
+#[derive(Serialize)]
+pub struct JoinResponse {
+    pub jwt: String,
+    pub pin: String,
+    pub user_id: Uuid,
+    pub is_new: bool,
+}
+
+pub async fn join(
+    State(state): State<AppState>,
+    Json(body): Json<JoinRequest>,
+) -> Result<(StatusCode, Json<JoinResponse>), AppError> {
+    let display_name = body.display_name.trim();
+    if display_name.is_empty() || display_name.len() > 50 {
+        return Err(AppError::BadRequest(
+            "Name muss zwischen 1 und 50 Zeichen lang sein.".into(),
+        ));
+    }
+
+    let event = Event::find_or_create(
+        &state.pool,
+        &state.config.event_slug,
+        &state.config.event_name,
+    )
+    .await?;
+
+    // Generate a 4-digit PIN
+    let pin: String = format!("{:04}", rand::rng().random_range(0..10000u32));
+    let pin_hash =
+        bcrypt::hash(&pin, 12).map_err(|e| AppError::Internal(anyhow::anyhow!(e)))?;
+
+    let user = User::create(&state.pool, event.id, display_name, &pin_hash).await?;
+
+    let token = jwt::create_token(
+        user.id,
+        event.id,
+        user.role.clone(),
+        &state.config.jwt_secret,
+        state.config.session_expiry_days,
+    )
+    .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);
+    Session::create(&state.pool, user.id, &token_hash, expires_at).await?;
+
+    Ok((
+        StatusCode::CREATED,
+        Json(JoinResponse {
+            jwt: token,
+            pin,
+            user_id: user.id,
+            is_new: true,
+        }),
+    ))
+}
+
+#[derive(Deserialize)]
+pub struct RecoverRequest {
+    pub display_name: String,
+    pub pin: String,
+}
+
+#[derive(Serialize)]
+pub struct RecoverResponse {
+    pub jwt: String,
+    pub user_id: Uuid,
+}
+
+pub async fn recover(
+    State(state): State<AppState>,
+    Json(body): Json<RecoverRequest>,
+) -> Result<Json<RecoverResponse>, AppError> {
+    let display_name = body.display_name.trim();
+
+    let event = Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    let users =
+        User::find_by_event_and_name(&state.pool, event.id, display_name).await?;
+
+    if users.is_empty() {
+        return Err(AppError::NotFound(
+            "Kein Benutzer mit diesem Namen gefunden.".into(),
+        ));
+    }
+
+    for user in &users {
+        // Check PIN lockout
+        if let Some(locked_until) = user.pin_locked_until {
+            if Utc::now() < locked_until {
+                return Err(AppError::TooManyRequests(
+                    "Zu viele Versuche. Bitte warte 15 Minuten.".into(),
+                ));
+            }
+        }
+
+        let pin_matches = bcrypt::verify(&body.pin, &user.recovery_pin_hash)
+            .unwrap_or(false);
+
+        if pin_matches {
+            // Reset failed attempts on success
+            User::reset_pin_attempts(&state.pool, user.id).await?;
+
+            let token = jwt::create_token(
+                user.id,
+                event.id,
+                user.role.clone(),
+                &state.config.jwt_secret,
+                state.config.session_expiry_days,
+            )
+            .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);
+            Session::create(&state.pool, user.id, &token_hash, expires_at).await?;
+
+            return Ok(Json(RecoverResponse {
+                jwt: token,
+                user_id: user.id,
+            }));
+        }
+
+        // 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);
+            User::lock_pin(&state.pool, user.id, lockout).await?;
+        }
+    }
+
+    Err(AppError::Unauthorized("PIN ist falsch.".into()))
+}
+
+#[derive(Deserialize)]
+pub struct AdminLoginRequest {
+    pub password: String,
+}
+
+#[derive(Serialize)]
+pub struct AdminLoginResponse {
+    pub jwt: String,
+}
+
+pub async fn admin_login(
+    State(state): State<AppState>,
+    Json(body): Json<AdminLoginRequest>,
+) -> Result<Json<AdminLoginResponse>, AppError> {
+    if state.config.admin_password_hash.is_empty() {
+        return Err(AppError::Forbidden(
+            "Admin-Login ist nicht konfiguriert.".into(),
+        ));
+    }
+
+    let valid = bcrypt::verify(&body.password, &state.config.admin_password_hash)
+        .unwrap_or(false);
+
+    if !valid {
+        return Err(AppError::Unauthorized("Falsches Passwort.".into()));
+    }
+
+    let event = Event::find_or_create(
+        &state.pool,
+        &state.config.event_slug,
+        &state.config.event_name,
+    )
+    .await?;
+
+    // Find or create the admin user for this event
+    let admin_name = "Admin";
+    let users = User::find_by_event_and_name(&state.pool, event.id, admin_name).await?;
+    let admin_user = if let Some(u) = users.into_iter().find(|u| u.role == UserRole::Admin) {
+        u
+    } else {
+        // Create admin user with a dummy PIN (admin authenticates via password)
+        let dummy_hash = bcrypt::hash("0000", 4)
+            .map_err(|e| AppError::Internal(anyhow::anyhow!(e)))?;
+        let user = User::create(&state.pool, event.id, admin_name, &dummy_hash).await?;
+        sqlx::query("UPDATE \"user\" SET role = 'admin' WHERE id = $1")
+            .bind(user.id)
+            .execute(&state.pool)
+            .await?;
+        User::find_by_id(&state.pool, user.id)
+            .await?
+            .ok_or_else(|| AppError::Internal(anyhow::anyhow!("admin user creation failed")))?
+    };
+
+    let token = jwt::create_token(
+        admin_user.id,
+        event.id,
+        UserRole::Admin,
+        &state.config.jwt_secret,
+        1, // Admin sessions expire after 1 day
+    )
+    .map_err(|e| AppError::Internal(anyhow::anyhow!(e)))?;
+
+    let token_hash = jwt::hash_token(&token);
+    let expires_at = Utc::now() + Duration::days(1);
+    Session::create(&state.pool, admin_user.id, &token_hash, expires_at).await?;
+
+    Ok(Json(AdminLoginResponse { jwt: token }))
+}
+
+pub async fn logout(
+    State(state): State<AppState>,
+    auth: AuthUser,
+) -> Result<StatusCode, AppError> {
+    Session::delete_by_token_hash(&state.pool, &auth.token_hash).await?;
+    Ok(StatusCode::NO_CONTENT)
+}

backend/src/auth/jwt.rs

@@ -0,0 +1,53 @@
+use chrono::{Duration, Utc};
+use jsonwebtoken::{DecodingKey, EncodingKey, Header, Validation};
+use serde::{Deserialize, Serialize};
+use sha2::{Digest, Sha256};
+use uuid::Uuid;
+
+use crate::models::user::UserRole;
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct Claims {
+    pub sub: Uuid,
+    pub event_id: Uuid,
+    pub role: UserRole,
+    pub exp: i64,
+    pub iat: i64,
+}
+
+pub fn create_token(
+    user_id: Uuid,
+    event_id: Uuid,
+    role: UserRole,
+    secret: &str,
+    expiry_days: i64,
+) -> Result<String, jsonwebtoken::errors::Error> {
+    let now = Utc::now();
+    let claims = Claims {
+        sub: user_id,
+        event_id,
+        role,
+        iat: now.timestamp(),
+        exp: (now + Duration::days(expiry_days)).timestamp(),
+    };
+    jsonwebtoken::encode(
+        &Header::default(),
+        &claims,
+        &EncodingKey::from_secret(secret.as_bytes()),
+    )
+}
+
+pub fn verify_token(token: &str, secret: &str) -> Result<Claims, jsonwebtoken::errors::Error> {
+    let data = jsonwebtoken::decode::<Claims>(
+        token,
+        &DecodingKey::from_secret(secret.as_bytes()),
+        &Validation::default(),
+    )?;
+    Ok(data.claims)
+}
+
+pub fn hash_token(token: &str) -> String {
+    let mut hasher = Sha256::new();
+    hasher.update(token.as_bytes());
+    format!("{:x}", hasher.finalize())
+}

backend/src/auth/middleware.rs

@@ -0,0 +1,96 @@
+use axum::extract::{FromRequestParts, State};
+use axum::http::request::Parts;
+use uuid::Uuid;
+
+use crate::auth::jwt;
+use crate::error::AppError;
+use crate::models::session::Session;
+use crate::models::user::UserRole;
+use crate::state::AppState;
+
+#[derive(Debug, Clone)]
+pub struct AuthUser {
+    pub user_id: Uuid,
+    pub event_id: Uuid,
+    pub role: UserRole,
+    pub token_hash: String,
+}
+
+impl FromRequestParts<AppState> for AuthUser {
+    type Rejection = AppError;
+
+    async fn from_request_parts(
+        parts: &mut Parts,
+        state: &AppState,
+    ) -> Result<Self, Self::Rejection> {
+        let header = parts
+            .headers
+            .get("authorization")
+            .and_then(|v| v.to_str().ok())
+            .ok_or_else(|| AppError::Unauthorized("Token fehlt.".into()))?;
+
+        let token = header
+            .strip_prefix("Bearer ")
+            .ok_or_else(|| AppError::Unauthorized("Ungültiges Token-Format.".into()))?;
+
+        let claims = jwt::verify_token(token, &state.config.jwt_secret)
+            .map_err(|_| AppError::Unauthorized("Token ungültig oder abgelaufen.".into()))?;
+
+        let token_hash = jwt::hash_token(token);
+
+        let session = Session::find_by_token_hash(&state.pool, &token_hash)
+            .await
+            .map_err(|e| AppError::Internal(e.into()))?
+            .ok_or_else(|| AppError::Unauthorized("Sitzung nicht gefunden oder abgelaufen.".into()))?;
+
+        // Update last_seen_at in the background (fire-and-forget)
+        let pool = state.pool.clone();
+        let session_id = session.id;
+        tokio::spawn(async move {
+            let _ = Session::touch(&pool, session_id).await;
+        });
+
+        Ok(Self {
+            user_id: claims.sub,
+            event_id: claims.event_id,
+            role: claims.role,
+            token_hash,
+        })
+    }
+}
+
+/// Extractor that requires at least Host role.
+pub struct RequireHost(pub AuthUser);
+
+impl FromRequestParts<AppState> for RequireHost {
+    type Rejection = AppError;
+
+    async fn from_request_parts(
+        parts: &mut Parts,
+        state: &AppState,
+    ) -> Result<Self, Self::Rejection> {
+        let auth = AuthUser::from_request_parts(parts, state).await?;
+        match auth.role {
+            UserRole::Host | UserRole::Admin => Ok(Self(auth)),
+            _ => Err(AppError::Forbidden("Nur für Hosts und Admins.".into())),
+        }
+    }
+}
+
+/// Extractor that requires Admin role.
+pub struct RequireAdmin(pub AuthUser);
+
+impl FromRequestParts<AppState> for RequireAdmin {
+    type Rejection = AppError;
+
+    async fn from_request_parts(
+        parts: &mut Parts,
+        state: &AppState,
+    ) -> Result<Self, Self::Rejection> {
+        let auth = AuthUser::from_request_parts(parts, state).await?;
+        match auth.role {
+            UserRole::Admin => Ok(Self(auth)),
+            _ => Err(AppError::Forbidden("Nur für Admins.".into())),
+        }
+    }
+}

backend/src/auth/mod.rs

@@ -0,0 +1,3 @@
+pub mod handlers;
+pub mod jwt;
+pub mod middleware;

backend/src/config.rs

@@ -0,0 +1,43 @@
+use std::path::PathBuf;
+
+use anyhow::{Context, Result};
+
+#[derive(Clone, Debug)]
+pub struct AppConfig {
+    pub database_url: String,
+    pub jwt_secret: String,
+    pub session_expiry_days: i64,
+    pub admin_password_hash: String,
+    pub event_name: String,
+    pub event_slug: String,
+    pub media_path: PathBuf,
+    pub app_port: u16,
+}
+
+impl AppConfig {
+    pub fn from_env() -> Result<Self> {
+        Ok(Self {
+            database_url: std::env::var("DATABASE_URL")
+                .context("DATABASE_URL must be set")?,
+            jwt_secret: std::env::var("JWT_SECRET")
+                .context("JWT_SECRET must be set")?,
+            session_expiry_days: std::env::var("SESSION_EXPIRY_DAYS")
+                .unwrap_or_else(|_| "30".to_string())
+                .parse()
+                .context("SESSION_EXPIRY_DAYS must be a number")?,
+            admin_password_hash: std::env::var("ADMIN_PASSWORD_HASH")
+                .unwrap_or_default(),
+            event_name: std::env::var("EVENT_NAME")
+                .unwrap_or_else(|_| "EventSnap".to_string()),
+            event_slug: std::env::var("EVENT_SLUG")
+                .context("EVENT_SLUG must be set")?,
+            media_path: PathBuf::from(
+                std::env::var("MEDIA_PATH").unwrap_or_else(|_| "/media".to_string()),
+            ),
+            app_port: std::env::var("APP_PORT")
+                .unwrap_or_else(|_| "3000".to_string())
+                .parse()
+                .context("APP_PORT must be a number")?,
+        })
+    }
+}

backend/src/error.rs

@@ -0,0 +1,65 @@
+use axum::http::StatusCode;
+use axum::response::{IntoResponse, Response};
+use serde_json::json;
+
+#[derive(Debug)]
+pub enum AppError {
+    BadRequest(String),
+    Unauthorized(String),
+    Forbidden(String),
+    NotFound(String),
+    TooManyRequests(String),
+    Internal(anyhow::Error),
+}
+
+impl AppError {
+    fn status_and_code(&self) -> (StatusCode, &str) {
+        match self {
+            Self::BadRequest(_) => (StatusCode::BAD_REQUEST, "bad_request"),
+            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::Internal(_) => (StatusCode::INTERNAL_SERVER_ERROR, "internal_error"),
+        }
+    }
+
+    fn message(&self) -> String {
+        match self {
+            Self::BadRequest(msg)
+            | Self::Unauthorized(msg)
+            | Self::Forbidden(msg)
+            | Self::NotFound(msg)
+            | Self::TooManyRequests(msg) => msg.clone(),
+            Self::Internal(err) => {
+                tracing::error!("internal error: {err:#}");
+                "Ein interner Fehler ist aufgetreten.".to_string()
+            }
+        }
+    }
+}
+
+impl IntoResponse for AppError {
+    fn into_response(self) -> Response {
+        let (status, code) = self.status_and_code();
+        let message = self.message();
+        let body = json!({
+            "error": code,
+            "message": message,
+            "status": status.as_u16(),
+        });
+        (status, axum::Json(body)).into_response()
+    }
+}
+
+impl From<anyhow::Error> for AppError {
+    fn from(err: anyhow::Error) -> Self {
+        Self::Internal(err)
+    }
+}
+
+impl From<sqlx::Error> for AppError {
+    fn from(err: sqlx::Error) -> Self {
+        Self::Internal(err.into())
+    }
+}

backend/src/handlers/feed.rs

@@ -0,0 +1,258 @@
+use axum::extract::{Query, State};
+use axum::Json;
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+use uuid::Uuid;
+
+use crate::auth::middleware::AuthUser;
+use crate::error::AppError;
+use crate::state::AppState;
+
+#[derive(Deserialize)]
+pub struct FeedQuery {
+    pub cursor: Option<Uuid>,
+    pub limit: Option<i64>,
+    pub hashtag: Option<String>,
+}
+
+#[derive(Serialize)]
+pub struct FeedUpload {
+    pub id: Uuid,
+    pub user_id: Uuid,
+    pub uploader_name: String,
+    pub preview_url: Option<String>,
+    pub thumbnail_url: Option<String>,
+    pub mime_type: String,
+    pub caption: Option<String>,
+    pub like_count: i64,
+    pub comment_count: i64,
+    pub liked_by_me: bool,
+    pub created_at: DateTime<Utc>,
+}
+
+#[derive(Serialize)]
+pub struct FeedResponse {
+    pub uploads: Vec<FeedUpload>,
+    pub next_cursor: Option<Uuid>,
+}
+
+#[derive(sqlx::FromRow)]
+struct FeedRow {
+    id: Uuid,
+    user_id: Uuid,
+    uploader_name: String,
+    preview_path: Option<String>,
+    thumbnail_path: Option<String>,
+    mime_type: String,
+    caption: Option<String>,
+    like_count: i64,
+    comment_count: i64,
+    created_at: DateTime<Utc>,
+}
+
+pub async fn feed(
+    State(state): State<AppState>,
+    auth: AuthUser,
+    Query(q): Query<FeedQuery>,
+) -> Result<Json<FeedResponse>, AppError> {
+    let limit = q.limit.unwrap_or(20).min(100);
+
+    let rows = if let Some(hashtag) = &q.hashtag {
+        let tag = hashtag.trim().trim_start_matches('#').to_lowercase();
+        sqlx::query_as::<_, FeedRow>(
+            "SELECT v.id, v.user_id, v.uploader_name, v.preview_path, v.thumbnail_path,
+                    v.mime_type, v.caption, v.like_count, v.comment_count, v.created_at
+             FROM v_feed v
+             JOIN upload_hashtag uh ON uh.upload_id = v.id
+             JOIN hashtag h ON h.id = uh.hashtag_id AND h.tag = $1
+             WHERE v.event_id = $2
+               AND ($3::timestamptz IS NULL OR v.created_at < $3)
+             ORDER BY v.created_at DESC
+             LIMIT $4",
+        )
+        .bind(&tag)
+        .bind(auth.event_id)
+        .bind(
+            if let Some(cursor) = q.cursor {
+                get_cursor_time(&state.pool, cursor).await
+            } else {
+                None
+            },
+        )
+        .bind(limit + 1)
+        .fetch_all(&state.pool)
+        .await?
+    } else {
+        sqlx::query_as::<_, FeedRow>(
+            "SELECT id, user_id, uploader_name, preview_path, thumbnail_path,
+                    mime_type, caption, like_count, comment_count, created_at
+             FROM v_feed
+             WHERE event_id = $1
+               AND ($2::timestamptz IS NULL OR created_at < $2)
+             ORDER BY created_at DESC
+             LIMIT $3",
+        )
+        .bind(auth.event_id)
+        .bind(
+            if let Some(cursor) = q.cursor {
+                get_cursor_time(&state.pool, cursor).await
+            } else {
+                None
+            },
+        )
+        .bind(limit + 1)
+        .fetch_all(&state.pool)
+        .await?
+    };
+
+    let has_more = rows.len() as i64 > limit;
+    let rows: Vec<FeedRow> = rows.into_iter().take(limit as usize).collect();
+    let next_cursor = if has_more { rows.last().map(|r| r.id) } else { None };
+
+    // Batch check which uploads the current user has liked
+    let upload_ids: Vec<Uuid> = rows.iter().map(|r| r.id).collect();
+    let liked_set = get_liked_set(&state.pool, auth.user_id, &upload_ids).await;
+
+    let uploads = rows
+        .into_iter()
+        .map(|r| {
+            let preview_url = r.preview_path.map(|p| format!("/media/{p}"));
+            let thumbnail_url = r.thumbnail_path.map(|p| format!("/media/{p}"));
+            FeedUpload {
+                liked_by_me: liked_set.contains(&r.id),
+                id: r.id,
+                user_id: r.user_id,
+                uploader_name: r.uploader_name,
+                preview_url,
+                thumbnail_url,
+                mime_type: r.mime_type,
+                caption: r.caption,
+                like_count: r.like_count,
+                comment_count: r.comment_count,
+                created_at: r.created_at,
+            }
+        })
+        .collect();
+
+    Ok(Json(FeedResponse {
+        uploads,
+        next_cursor,
+    }))
+}
+
+#[derive(Deserialize)]
+pub struct DeltaQuery {
+    pub since: DateTime<Utc>,
+}
+
+#[derive(Serialize)]
+pub struct DeltaResponse {
+    pub uploads: Vec<FeedUpload>,
+    pub deleted_ids: Vec<Uuid>,
+}
+
+pub async fn feed_delta(
+    State(state): State<AppState>,
+    auth: AuthUser,
+    Query(q): Query<DeltaQuery>,
+) -> Result<Json<DeltaResponse>, AppError> {
+    let rows = sqlx::query_as::<_, FeedRow>(
+        "SELECT id, user_id, uploader_name, preview_path, thumbnail_path,
+                mime_type, caption, like_count, comment_count, created_at
+         FROM v_feed
+         WHERE event_id = $1 AND created_at > $2
+         ORDER BY created_at DESC",
+    )
+    .bind(auth.event_id)
+    .bind(q.since)
+    .fetch_all(&state.pool)
+    .await?;
+
+    let deleted_ids: Vec<(Uuid,)> = sqlx::query_as(
+        "SELECT id FROM upload
+         WHERE event_id = $1 AND deleted_at IS NOT NULL AND deleted_at > $2",
+    )
+    .bind(auth.event_id)
+    .bind(q.since)
+    .fetch_all(&state.pool)
+    .await?;
+
+    let upload_ids: Vec<Uuid> = rows.iter().map(|r| r.id).collect();
+    let liked_set = get_liked_set(&state.pool, auth.user_id, &upload_ids).await;
+
+    let uploads = rows
+        .into_iter()
+        .map(|r| FeedUpload {
+            liked_by_me: liked_set.contains(&r.id),
+            id: r.id,
+            user_id: r.user_id,
+            uploader_name: r.uploader_name,
+            preview_url: r.preview_path.map(|p| format!("/media/{p}")),
+            thumbnail_url: r.thumbnail_path.map(|p| format!("/media/{p}")),
+            mime_type: r.mime_type,
+            caption: r.caption,
+            like_count: r.like_count,
+            comment_count: r.comment_count,
+            created_at: r.created_at,
+        })
+        .collect();
+
+    Ok(Json(DeltaResponse {
+        uploads,
+        deleted_ids: deleted_ids.into_iter().map(|r| r.0).collect(),
+    }))
+}
+
+#[derive(Serialize)]
+pub struct HashtagCount {
+    pub tag: String,
+    pub count: i64,
+}
+
+pub async fn hashtags(
+    State(state): State<AppState>,
+    auth: AuthUser,
+) -> Result<Json<Vec<HashtagCount>>, AppError> {
+    let rows: Vec<(String, i64)> = sqlx::query_as(
+        "SELECT tag, upload_count FROM v_hashtag_counts WHERE event_id = $1",
+    )
+    .bind(auth.event_id)
+    .fetch_all(&state.pool)
+    .await?;
+
+    Ok(Json(
+        rows.into_iter()
+            .map(|(tag, count)| HashtagCount { tag, count })
+            .collect(),
+    ))
+}
+
+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")
+            .bind(cursor_id)
+            .fetch_optional(pool)
+            .await
+            .ok()?;
+    row.map(|r| r.0)
+}
+
+async fn get_liked_set(
+    pool: &sqlx::PgPool,
+    user_id: Uuid,
+    upload_ids: &[Uuid],
+) -> std::collections::HashSet<Uuid> {
+    if upload_ids.is_empty() {
+        return std::collections::HashSet::new();
+    }
+    let rows: Vec<(Uuid,)> = sqlx::query_as(
+        "SELECT upload_id FROM \"like\" WHERE user_id = $1 AND upload_id = ANY($2)",
+    )
+    .bind(user_id)
+    .bind(upload_ids)
+    .fetch_all(pool)
+    .await
+    .unwrap_or_default();
+
+    rows.into_iter().map(|r| r.0).collect()
+}

backend/src/handlers/host.rs

@@ -0,0 +1,260 @@
+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 (processed by the export worker in a later step)
+    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?;
+    }
+
+    Ok(StatusCode::NO_CONTENT)
+}

backend/src/handlers/mod.rs

@@ -0,0 +1,5 @@
+pub mod feed;
+pub mod host;
+pub mod social;
+pub mod sse;
+pub mod upload;

backend/src/handlers/social.rs

@@ -0,0 +1,136 @@
+use axum::extract::{Path, State};
+use axum::http::StatusCode;
+use axum::Json;
+use serde::Deserialize;
+use uuid::Uuid;
+
+use crate::auth::middleware::AuthUser;
+use crate::error::AppError;
+use crate::models::comment::{Comment, CommentDto};
+use crate::models::hashtag::{self, Hashtag};
+use crate::state::AppState;
+
+pub async fn toggle_like(
+    State(state): State<AppState>,
+    auth: AuthUser,
+    Path(upload_id): Path<Uuid>,
+) -> Result<StatusCode, AppError> {
+    // Check if user is banned
+    let user = crate::models::user::User::find_by_id(&state.pool, auth.user_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Benutzer nicht gefunden.".into()))?;
+    if user.is_banned {
+        return Err(AppError::Forbidden("Du bist gesperrt.".into()));
+    }
+
+    // Try to insert; if conflict, delete (toggle)
+    let result = sqlx::query(
+        "INSERT INTO \"like\" (upload_id, user_id) VALUES ($1, $2)
+         ON CONFLICT (upload_id, user_id) DO NOTHING",
+    )
+    .bind(upload_id)
+    .bind(auth.user_id)
+    .execute(&state.pool)
+    .await?;
+
+    if result.rows_affected() == 0 {
+        // Already liked — remove
+        sqlx::query("DELETE FROM \"like\" WHERE upload_id = $1 AND user_id = $2")
+            .bind(upload_id)
+            .bind(auth.user_id)
+            .execute(&state.pool)
+            .await?;
+    }
+
+    // Broadcast SSE
+    let _ = state.sse_tx.send(crate::state::SseEvent {
+        event_type: "like-update".to_string(),
+        data: serde_json::json!({ "upload_id": upload_id }).to_string(),
+    });
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn list_comments(
+    State(state): State<AppState>,
+    _auth: AuthUser,
+    Path(upload_id): Path<Uuid>,
+) -> Result<Json<Vec<CommentDto>>, AppError> {
+    let comments = Comment::list_for_upload(&state.pool, upload_id).await?;
+    Ok(Json(comments))
+}
+
+#[derive(Deserialize)]
+pub struct AddCommentRequest {
+    pub body: String,
+}
+
+pub async fn add_comment(
+    State(state): State<AppState>,
+    auth: AuthUser,
+    Path(upload_id): Path<Uuid>,
+    Json(body): Json<AddCommentRequest>,
+) -> Result<(StatusCode, Json<CommentDto>), AppError> {
+    let user = crate::models::user::User::find_by_id(&state.pool, auth.user_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Benutzer nicht gefunden.".into()))?;
+    if user.is_banned {
+        return Err(AppError::Forbidden("Du bist gesperrt.".into()));
+    }
+
+    let text = body.body.trim();
+    if text.is_empty() || text.len() > 500 {
+        return Err(AppError::BadRequest(
+            "Kommentar muss zwischen 1 und 500 Zeichen lang sein.".into(),
+        ));
+    }
+
+    let comment = Comment::create(&state.pool, upload_id, auth.user_id, text).await?;
+
+    // Process hashtags in comment body
+    let tags = hashtag::extract_hashtags(text);
+    for tag in &tags {
+        let h = Hashtag::upsert(&state.pool, auth.event_id, tag).await?;
+        sqlx::query(
+            "INSERT INTO comment_hashtag (comment_id, hashtag_id) VALUES ($1, $2) ON CONFLICT DO NOTHING",
+        )
+        .bind(comment.id)
+        .bind(h.id)
+        .execute(&state.pool)
+        .await?;
+    }
+
+    // Broadcast SSE
+    let _ = state.sse_tx.send(crate::state::SseEvent {
+        event_type: "new-comment".to_string(),
+        data: serde_json::json!({ "upload_id": upload_id }).to_string(),
+    });
+
+    let dto = CommentDto {
+        id: comment.id,
+        upload_id,
+        user_id: auth.user_id,
+        uploader_name: user.display_name,
+        body: comment.body,
+        created_at: comment.created_at,
+    };
+
+    Ok((StatusCode::CREATED, Json(dto)))
+}
+
+pub async fn delete_comment(
+    State(state): State<AppState>,
+    auth: AuthUser,
+    Path(comment_id): Path<Uuid>,
+) -> Result<StatusCode, AppError> {
+    let comment = Comment::find_by_id(&state.pool, comment_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Kommentar nicht gefunden.".into()))?;
+
+    if comment.user_id != auth.user_id {
+        return Err(AppError::Forbidden("Nur eigene Kommentare löschen.".into()));
+    }
+
+    Comment::soft_delete(&state.pool, comment_id).await?;
+    Ok(StatusCode::NO_CONTENT)
+}

backend/src/handlers/sse.rs

@@ -0,0 +1,50 @@
+use std::convert::Infallible;
+use std::time::Duration;
+
+use axum::extract::{Query, State};
+use axum::response::sse::{Event, KeepAlive, Sse};
+use futures::stream::Stream;
+use serde::Deserialize;
+use tokio_stream::wrappers::BroadcastStream;
+use tokio_stream::StreamExt;
+
+use crate::auth::jwt;
+use crate::error::AppError;
+use crate::models::session::Session;
+use crate::state::AppState;
+
+#[derive(Deserialize)]
+pub struct SseQuery {
+    pub token: String,
+}
+
+/// SSE stream endpoint. Accepts JWT via query param since EventSource
+/// doesn't support custom headers.
+pub async fn stream(
+    State(state): State<AppState>,
+    Query(q): Query<SseQuery>,
+) -> Result<Sse<impl Stream<Item = Result<Event, Infallible>>>, AppError> {
+    // Verify token
+    let _claims = jwt::verify_token(&q.token, &state.config.jwt_secret)
+        .map_err(|_| AppError::Unauthorized("Token ungültig.".into()))?;
+
+    let token_hash = jwt::hash_token(&q.token);
+    Session::find_by_token_hash(&state.pool, &token_hash)
+        .await
+        .map_err(|e| AppError::Internal(e.into()))?
+        .ok_or_else(|| AppError::Unauthorized("Sitzung nicht gefunden.".into()))?;
+
+    let rx = state.sse_tx.subscribe();
+    let stream = BroadcastStream::new(rx).filter_map(|msg| match msg {
+        Ok(sse_event) => Some(Ok(Event::default()
+            .event(sse_event.event_type)
+            .data(sse_event.data))),
+        Err(_) => None,
+    });
+
+    Ok(Sse::new(stream).keep_alive(
+        KeepAlive::new()
+            .interval(Duration::from_secs(30))
+            .text("ping"),
+    ))
+}

backend/src/handlers/upload.rs

@@ -0,0 +1,237 @@
+use axum::extract::{Multipart, Path, State};
+use axum::http::StatusCode;
+use axum::Json;
+use serde::Deserialize;
+use uuid::Uuid;
+
+use crate::auth::middleware::AuthUser;
+use crate::error::AppError;
+use crate::models::hashtag::{self, Hashtag};
+use crate::models::upload::{Upload, UploadDto};
+use crate::models::user::User;
+use crate::state::AppState;
+
+pub async fn upload(
+    State(state): State<AppState>,
+    auth: AuthUser,
+    mut multipart: Multipart,
+) -> Result<(StatusCode, Json<UploadDto>), AppError> {
+    // 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 {
+        return Err(AppError::Forbidden("Du bist gesperrt.".into()));
+    }
+
+    // Check if uploads are locked
+    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.uploads_locked_at.is_some() {
+        return Err(AppError::Forbidden("Uploads sind gesperrt.".into()));
+    }
+
+    // Read config limits from DB
+    let max_image_mb: i64 = get_config_i64(&state.pool, "max_image_size_mb", 20).await;
+    let max_video_mb: i64 = get_config_i64(&state.pool, "max_video_size_mb", 500).await;
+
+    let mut file_data: Option<Vec<u8>> = None;
+    let mut file_name: Option<String> = None;
+    let mut content_type: Option<String> = None;
+    let mut caption: Option<String> = None;
+    let mut hashtags_csv: Option<String> = None;
+
+    while let Some(field) = multipart.next_field().await.map_err(|e| AppError::BadRequest(e.to_string()))? {
+        let name = field.name().unwrap_or_default().to_string();
+        match name.as_str() {
+            "file" => {
+                file_name = field.file_name().map(|s| s.to_string());
+                content_type = field.content_type().map(|s| s.to_string());
+                file_data = Some(
+                    field.bytes().await
+                        .map_err(|e| AppError::BadRequest(format!("Datei konnte nicht gelesen werden: {e}")))?
+                        .to_vec(),
+                );
+            }
+            "caption" => {
+                caption = Some(
+                    field.text().await
+                        .map_err(|e| AppError::BadRequest(e.to_string()))?,
+                );
+            }
+            "hashtags" => {
+                hashtags_csv = Some(
+                    field.text().await
+                        .map_err(|e| AppError::BadRequest(e.to_string()))?,
+                );
+            }
+            _ => {}
+        }
+    }
+
+    let data = file_data.ok_or_else(|| AppError::BadRequest("Keine Datei hochgeladen.".into()))?;
+    let mime = content_type.unwrap_or_else(|| "application/octet-stream".to_string());
+    let size = data.len() as i64;
+
+    // Validate file size
+    let max_bytes = if mime.starts_with("video/") {
+        max_video_mb * 1024 * 1024
+    } else {
+        max_image_mb * 1024 * 1024
+    };
+    if size > max_bytes {
+        return Err(AppError::BadRequest(format!(
+            "Datei ist zu groß. Maximum: {} MB.",
+            max_bytes / (1024 * 1024)
+        )));
+    }
+
+    // Determine file extension
+    let ext = file_name
+        .as_deref()
+        .and_then(|n| n.rsplit('.').next())
+        .unwrap_or(if mime.starts_with("video/") { "mp4" } else { "jpg" });
+
+    let upload_id = Uuid::new_v4();
+    let event_slug = &state.config.event_slug;
+    let relative_path = format!("originals/{event_slug}/{upload_id}.{ext}");
+    let absolute_path = state.config.media_path.join(&relative_path);
+
+    // Ensure directory exists and write file
+    if let Some(parent) = absolute_path.parent() {
+        tokio::fs::create_dir_all(parent).await.map_err(|e| AppError::Internal(e.into()))?;
+    }
+    tokio::fs::write(&absolute_path, &data).await.map_err(|e| AppError::Internal(e.into()))?;
+
+    // Update user's total upload bytes
+    sqlx::query("UPDATE \"user\" SET total_upload_bytes = total_upload_bytes + $2 WHERE id = $1")
+        .bind(auth.user_id)
+        .bind(size)
+        .execute(&state.pool)
+        .await?;
+
+    // Insert upload record
+    let upload = Upload::create(
+        &state.pool,
+        auth.event_id,
+        auth.user_id,
+        &relative_path,
+        &mime,
+        size,
+        caption.as_deref(),
+    )
+    .await?;
+
+    // Process hashtags from caption and explicit CSV
+    let mut tags: Vec<String> = Vec::new();
+    if let Some(ref cap) = caption {
+        tags.extend(hashtag::extract_hashtags(cap));
+    }
+    if let Some(ref csv) = hashtags_csv {
+        for tag in csv.split(',') {
+            let t = tag.trim().trim_start_matches('#').to_lowercase();
+            if !t.is_empty() {
+                tags.push(t);
+            }
+        }
+    }
+    tags.sort();
+    tags.dedup();
+
+    for tag in &tags {
+        let h = Hashtag::upsert(&state.pool, auth.event_id, tag).await?;
+        Hashtag::link_to_upload(&state.pool, upload.id, h.id).await?;
+    }
+
+    // Spawn compression task
+    state
+        .compression
+        .process(upload.id, relative_path, mime.clone());
+
+    // Broadcast SSE event
+    let dto = UploadDto {
+        id: upload.id,
+        user_id: auth.user_id,
+        uploader_name: user.display_name,
+        preview_url: None,
+        thumbnail_url: None,
+        mime_type: mime,
+        caption,
+        hashtags: tags,
+        like_count: 0,
+        comment_count: 0,
+        liked_by_me: false,
+        created_at: upload.created_at,
+    };
+
+    let _ = state.sse_tx.send(crate::state::SseEvent {
+        event_type: "new-upload".to_string(),
+        data: serde_json::to_string(&dto).unwrap_or_default(),
+    });
+
+    Ok((StatusCode::CREATED, Json(dto)))
+}
+
+#[derive(Deserialize)]
+pub struct EditUploadRequest {
+    pub caption: Option<String>,
+    pub hashtags: Option<Vec<String>>,
+}
+
+pub async fn edit_upload(
+    State(state): State<AppState>,
+    auth: AuthUser,
+    Path(upload_id): Path<Uuid>,
+    Json(body): Json<EditUploadRequest>,
+) -> Result<StatusCode, AppError> {
+    let upload = Upload::find_by_id(&state.pool, upload_id)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Upload nicht gefunden.".into()))?;
+
+    if upload.user_id != auth.user_id {
+        return Err(AppError::Forbidden("Nur eigene Uploads bearbeiten.".into()));
+    }
+
+    if let Some(ref caption) = body.caption {
+        Upload::update_caption(&state.pool, upload_id, Some(caption)).await?;
+    }
+
+    if let Some(ref hashtags) = body.hashtags {
+        Hashtag::unlink_all_from_upload(&state.pool, upload_id).await?;
+        for tag in hashtags {
+            let h = Hashtag::upsert(&state.pool, auth.event_id, tag).await?;
+            Hashtag::link_to_upload(&state.pool, upload_id, h.id).await?;
+        }
+    }
+
+    Ok(StatusCode::OK)
+}
+
+pub async fn delete_upload(
+    State(state): State<AppState>,
+    auth: AuthUser,
+    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()))?;
+
+    if upload.user_id != auth.user_id {
+        return Err(AppError::Forbidden("Nur eigene Uploads löschen.".into()));
+    }
+
+    Upload::soft_delete(&state.pool, upload_id).await?;
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+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")
+            .bind(key)
+            .fetch_optional(pool)
+            .await
+            .unwrap_or(None);
+    row.and_then(|r| r.0.parse().ok()).unwrap_or(default)
+}

backend/src/main.rs

@@ -1,7 +1,20 @@
 use anyhow::Result;
+use axum::routing::{delete, get, patch, post};
+use axum::Router;
+use tower_http::services::ServeDir;
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
+mod auth;
+mod config;
 mod db;
+mod error;
+mod handlers;
+mod models;
+mod services;
+mod state;
+
+use config::AppConfig;
+use state::AppState;
 
 #[tokio::main]
 async fn main() -> Result<()> {
@@ -14,18 +27,60 @@ async fn main() -> Result<()> {
         .with(tracing_subscriber::fmt::layer())
         .init();
 
-    let database_url =
-        std::env::var("DATABASE_URL").expect("DATABASE_URL must be set");
-    let port: u16 = std::env::var("APP_PORT")
-        .unwrap_or_else(|_| "3000".to_string())
-        .parse()?;
+    let config = AppConfig::from_env()?;
+    let pool = db::create_pool(&config.database_url).await?;
+    let state = AppState::new(pool, config.clone());
 
-    let _pool = db::create_pool(&database_url).await?;
+    // Ensure media directories exist
+    tokio::fs::create_dir_all(&config.media_path).await.ok();
 
-    let router = axum::Router::new()
-        .route("/health", axum::routing::get(|| async { "ok" }));
+    let api = Router::new()
+        // Auth
+        .route("/api/v1/join", post(auth::handlers::join))
+        .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))
+        .route(
+            "/api/v1/upload/{id}",
+            patch(handlers::upload::edit_upload).delete(handlers::upload::delete_upload),
+        )
+        // Feed
+        .route("/api/v1/feed", get(handlers::feed::feed))
+        .route("/api/v1/feed/delta", get(handlers::feed::feed_delta))
+        .route("/api/v1/hashtags", get(handlers::feed::hashtags))
+        // Social
+        .route("/api/v1/upload/{id}/like", post(handlers::social::toggle_like))
+        .route(
+            "/api/v1/upload/{id}/comments",
+            get(handlers::social::list_comments).post(handlers::social::add_comment),
+        )
+        .route("/api/v1/comment/{id}", delete(handlers::social::delete_comment))
+        // SSE
+        .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));
 
-    let listener = tokio::net::TcpListener::bind(("0.0.0.0", port)).await?;
+    // Serve media files from disk
+    let media_service = ServeDir::new(&config.media_path);
+
+    let router = Router::new()
+        .route("/health", get(|| async { "ok" }))
+        .merge(api)
+        .nest_service("/media", media_service)
+        .with_state(state);
+
+    let listener = tokio::net::TcpListener::bind(("0.0.0.0", config.app_port)).await?;
     tracing::info!("listening on {}", listener.local_addr()?);
     axum::serve(listener, router).await?;
 

backend/src/models/comment.rs

@@ -0,0 +1,72 @@
+use chrono::{DateTime, Utc};
+use serde::Serialize;
+use sqlx::PgPool;
+use uuid::Uuid;
+
+#[derive(Debug, sqlx::FromRow)]
+pub struct Comment {
+    pub id: Uuid,
+    pub upload_id: Uuid,
+    pub user_id: Uuid,
+    pub body: String,
+    pub created_at: DateTime<Utc>,
+    pub deleted_at: Option<DateTime<Utc>>,
+}
+
+#[derive(Debug, Serialize, sqlx::FromRow)]
+pub struct CommentDto {
+    pub id: Uuid,
+    pub upload_id: Uuid,
+    pub user_id: Uuid,
+    pub uploader_name: String,
+    pub body: String,
+    pub created_at: DateTime<Utc>,
+}
+
+impl Comment {
+    pub async fn create(
+        pool: &PgPool,
+        upload_id: Uuid,
+        user_id: Uuid,
+        body: &str,
+    ) -> Result<Self, sqlx::Error> {
+        sqlx::query_as::<_, Self>(
+            "INSERT INTO comment (upload_id, user_id, body) VALUES ($1, $2, $3) RETURNING *",
+        )
+        .bind(upload_id)
+        .bind(user_id)
+        .bind(body)
+        .fetch_one(pool)
+        .await
+    }
+
+    pub async fn list_for_upload(pool: &PgPool, upload_id: Uuid) -> Result<Vec<CommentDto>, sqlx::Error> {
+        sqlx::query_as::<_, CommentDto>(
+            "SELECT c.id, c.upload_id, c.user_id, u.display_name AS uploader_name, c.body, c.created_at
+             FROM comment c
+             JOIN \"user\" u ON u.id = c.user_id
+             WHERE c.upload_id = $1 AND c.deleted_at IS NULL
+             ORDER BY c.created_at ASC",
+        )
+        .bind(upload_id)
+        .fetch_all(pool)
+        .await
+    }
+
+    pub async fn find_by_id(pool: &PgPool, id: Uuid) -> Result<Option<Self>, sqlx::Error> {
+        sqlx::query_as::<_, Self>(
+            "SELECT * FROM comment WHERE id = $1 AND deleted_at IS NULL",
+        )
+        .bind(id)
+        .fetch_optional(pool)
+        .await
+    }
+
+    pub async fn soft_delete(pool: &PgPool, id: Uuid) -> Result<(), sqlx::Error> {
+        sqlx::query("UPDATE comment SET deleted_at = NOW() WHERE id = $1")
+            .bind(id)
+            .execute(pool)
+            .await?;
+        Ok(())
+    }
+}

backend/src/models/event.rs

@@ -0,0 +1,47 @@
+use chrono::{DateTime, Utc};
+use sqlx::PgPool;
+use uuid::Uuid;
+
+#[derive(Debug, sqlx::FromRow)]
+pub struct Event {
+    pub id: Uuid,
+    pub slug: String,
+    pub name: String,
+    pub cover_image_path: Option<String>,
+    pub is_active: bool,
+    pub uploads_locked_at: Option<DateTime<Utc>>,
+    pub export_released_at: Option<DateTime<Utc>>,
+    pub export_zip_ready: bool,
+    pub export_html_ready: bool,
+    pub created_at: DateTime<Utc>,
+}
+
+impl Event {
+    pub async fn find_by_slug(pool: &PgPool, slug: &str) -> Result<Option<Self>, sqlx::Error> {
+        sqlx::query_as::<_, Self>("SELECT * FROM event WHERE slug = $1")
+            .bind(slug)
+            .fetch_optional(pool)
+            .await
+    }
+
+    pub async fn create(pool: &PgPool, slug: &str, name: &str) -> Result<Self, sqlx::Error> {
+        sqlx::query_as::<_, Self>(
+            "INSERT INTO event (slug, name) VALUES ($1, $2) RETURNING *",
+        )
+        .bind(slug)
+        .bind(name)
+        .fetch_one(pool)
+        .await
+    }
+
+    pub async fn find_or_create(
+        pool: &PgPool,
+        slug: &str,
+        name: &str,
+    ) -> Result<Self, sqlx::Error> {
+        if let Some(event) = Self::find_by_slug(pool, slug).await? {
+            return Ok(event);
+        }
+        Self::create(pool, slug, name).await
+    }
+}

backend/src/models/hashtag.rs

@@ -0,0 +1,77 @@
+use sqlx::PgPool;
+use uuid::Uuid;
+
+#[derive(Debug, sqlx::FromRow)]
+pub struct Hashtag {
+    pub id: Uuid,
+    pub event_id: Uuid,
+    pub tag: String,
+}
+
+impl Hashtag {
+    /// Upsert a hashtag (insert if not exists, return existing if it does).
+    pub async fn upsert(pool: &PgPool, event_id: Uuid, tag: &str) -> Result<Self, sqlx::Error> {
+        let normalized = tag.trim().trim_start_matches('#').to_lowercase();
+        sqlx::query_as::<_, Self>(
+            "INSERT INTO hashtag (event_id, tag) VALUES ($1, $2)
+             ON CONFLICT (event_id, tag) DO UPDATE SET tag = EXCLUDED.tag
+             RETURNING *",
+        )
+        .bind(event_id)
+        .bind(&normalized)
+        .fetch_one(pool)
+        .await
+    }
+
+    pub async fn link_to_upload(
+        pool: &PgPool,
+        upload_id: Uuid,
+        hashtag_id: Uuid,
+    ) -> Result<(), sqlx::Error> {
+        sqlx::query(
+            "INSERT INTO upload_hashtag (upload_id, hashtag_id) VALUES ($1, $2)
+             ON CONFLICT DO NOTHING",
+        )
+        .bind(upload_id)
+        .bind(hashtag_id)
+        .execute(pool)
+        .await?;
+        Ok(())
+    }
+
+    pub async fn unlink_all_from_upload(
+        pool: &PgPool,
+        upload_id: Uuid,
+    ) -> Result<(), sqlx::Error> {
+        sqlx::query("DELETE FROM upload_hashtag WHERE upload_id = $1")
+            .bind(upload_id)
+            .execute(pool)
+            .await?;
+        Ok(())
+    }
+
+    pub async fn tags_for_upload(
+        pool: &PgPool,
+        upload_id: Uuid,
+    ) -> Result<Vec<String>, sqlx::Error> {
+        let rows: Vec<(String,)> = sqlx::query_as(
+            "SELECT h.tag FROM hashtag h
+             JOIN upload_hashtag uh ON uh.hashtag_id = h.id
+             WHERE uh.upload_id = $1
+             ORDER BY h.tag",
+        )
+        .bind(upload_id)
+        .fetch_all(pool)
+        .await?;
+        Ok(rows.into_iter().map(|r| r.0).collect())
+    }
+}
+
+/// Extract #hashtags from text (caption or body).
+pub fn extract_hashtags(text: &str) -> Vec<String> {
+    text.split_whitespace()
+        .filter(|w| w.starts_with('#') && w.len() > 1)
+        .map(|w| w.trim_start_matches('#').to_lowercase())
+        .filter(|t| !t.is_empty())
+        .collect()
+}

backend/src/models/mod.rs

@@ -0,0 +1,6 @@
+pub mod comment;
+pub mod event;
+pub mod hashtag;
+pub mod session;
+pub mod upload;
+pub mod user;

backend/src/models/session.rs

@@ -0,0 +1,64 @@
+use chrono::{DateTime, Utc};
+use sqlx::PgPool;
+use uuid::Uuid;
+
+#[derive(Debug, sqlx::FromRow)]
+pub struct Session {
+    pub id: Uuid,
+    pub user_id: Uuid,
+    pub token_hash: String,
+    pub expires_at: DateTime<Utc>,
+    pub last_seen_at: DateTime<Utc>,
+    pub created_at: DateTime<Utc>,
+}
+
+impl Session {
+    pub async fn create(
+        pool: &PgPool,
+        user_id: Uuid,
+        token_hash: &str,
+        expires_at: DateTime<Utc>,
+    ) -> Result<Self, sqlx::Error> {
+        sqlx::query_as::<_, Self>(
+            "INSERT INTO session (user_id, token_hash, expires_at)
+             VALUES ($1, $2, $3)
+             RETURNING *",
+        )
+        .bind(user_id)
+        .bind(token_hash)
+        .bind(expires_at)
+        .fetch_one(pool)
+        .await
+    }
+
+    pub async fn find_by_token_hash(
+        pool: &PgPool,
+        token_hash: &str,
+    ) -> Result<Option<Self>, sqlx::Error> {
+        sqlx::query_as::<_, Self>(
+            "SELECT * FROM session WHERE token_hash = $1 AND expires_at > NOW()",
+        )
+        .bind(token_hash)
+        .fetch_optional(pool)
+        .await
+    }
+
+    pub async fn touch(pool: &PgPool, id: Uuid) -> Result<(), sqlx::Error> {
+        sqlx::query("UPDATE session SET last_seen_at = NOW() WHERE id = $1")
+            .bind(id)
+            .execute(pool)
+            .await?;
+        Ok(())
+    }
+
+    pub async fn delete_by_token_hash(
+        pool: &PgPool,
+        token_hash: &str,
+    ) -> Result<(), sqlx::Error> {
+        sqlx::query("DELETE FROM session WHERE token_hash = $1")
+            .bind(token_hash)
+            .execute(pool)
+            .await?;
+        Ok(())
+    }
+}

backend/src/models/upload.rs

@@ -0,0 +1,117 @@
+use chrono::{DateTime, Utc};
+use serde::Serialize;
+use sqlx::PgPool;
+use uuid::Uuid;
+
+#[derive(Debug, sqlx::FromRow)]
+pub struct Upload {
+    pub id: Uuid,
+    pub event_id: Uuid,
+    pub user_id: Uuid,
+    pub original_path: String,
+    pub preview_path: Option<String>,
+    pub thumbnail_path: Option<String>,
+    pub mime_type: String,
+    pub original_size_bytes: i64,
+    pub caption: Option<String>,
+    pub created_at: DateTime<Utc>,
+    pub deleted_at: Option<DateTime<Utc>>,
+}
+
+#[derive(Debug, Serialize)]
+pub struct UploadDto {
+    pub id: Uuid,
+    pub user_id: Uuid,
+    pub uploader_name: String,
+    pub preview_url: Option<String>,
+    pub thumbnail_url: Option<String>,
+    pub mime_type: String,
+    pub caption: Option<String>,
+    pub hashtags: Vec<String>,
+    pub like_count: i64,
+    pub comment_count: i64,
+    pub liked_by_me: bool,
+    pub created_at: DateTime<Utc>,
+}
+
+impl Upload {
+    pub async fn create(
+        pool: &PgPool,
+        event_id: Uuid,
+        user_id: Uuid,
+        original_path: &str,
+        mime_type: &str,
+        original_size_bytes: i64,
+        caption: Option<&str>,
+    ) -> Result<Self, sqlx::Error> {
+        sqlx::query_as::<_, Self>(
+            "INSERT INTO upload (event_id, user_id, original_path, mime_type, original_size_bytes, caption)
+             VALUES ($1, $2, $3, $4, $5, $6)
+             RETURNING *",
+        )
+        .bind(event_id)
+        .bind(user_id)
+        .bind(original_path)
+        .bind(mime_type)
+        .bind(original_size_bytes)
+        .bind(caption)
+        .fetch_one(pool)
+        .await
+    }
+
+    pub async fn find_by_id(pool: &PgPool, id: Uuid) -> Result<Option<Self>, sqlx::Error> {
+        sqlx::query_as::<_, Self>(
+            "SELECT * FROM upload WHERE id = $1 AND deleted_at IS NULL",
+        )
+        .bind(id)
+        .fetch_optional(pool)
+        .await
+    }
+
+    pub async fn set_preview_path(
+        pool: &PgPool,
+        id: Uuid,
+        preview_path: &str,
+    ) -> Result<(), sqlx::Error> {
+        sqlx::query("UPDATE upload SET preview_path = $2 WHERE id = $1")
+            .bind(id)
+            .bind(preview_path)
+            .execute(pool)
+            .await?;
+        Ok(())
+    }
+
+    pub async fn set_thumbnail_path(
+        pool: &PgPool,
+        id: Uuid,
+        thumbnail_path: &str,
+    ) -> Result<(), sqlx::Error> {
+        sqlx::query("UPDATE upload SET thumbnail_path = $2 WHERE id = $1")
+            .bind(id)
+            .bind(thumbnail_path)
+            .execute(pool)
+            .await?;
+        Ok(())
+    }
+
+    pub async fn soft_delete(pool: &PgPool, id: Uuid) -> Result<(), sqlx::Error> {
+        sqlx::query("UPDATE upload SET deleted_at = NOW() WHERE id = $1")
+            .bind(id)
+            .execute(pool)
+            .await?;
+        Ok(())
+    }
+
+    pub async fn update_caption(
+        pool: &PgPool,
+        id: Uuid,
+        caption: Option<&str>,
+    ) -> Result<(), sqlx::Error> {
+        sqlx::query("UPDATE upload SET caption = $2 WHERE id = $1")
+            .bind(id)
+            .bind(caption)
+            .execute(pool)
+            .await?;
+        Ok(())
+    }
+}

backend/src/models/user.rs

@@ -0,0 +1,102 @@
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+use sqlx::PgPool;
+use uuid::Uuid;
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize, sqlx::Type)]
+#[sqlx(type_name = "user_role", rename_all = "lowercase")]
+pub enum UserRole {
+    Guest,
+    Host,
+    Admin,
+}
+
+#[derive(Debug, sqlx::FromRow)]
+pub struct User {
+    pub id: Uuid,
+    pub event_id: Uuid,
+    pub display_name: String,
+    pub role: UserRole,
+    pub is_banned: bool,
+    pub uploads_hidden: bool,
+    pub recovery_pin_hash: String,
+    pub total_upload_bytes: i64,
+    pub failed_pin_attempts: i16,
+    pub pin_locked_until: Option<DateTime<Utc>>,
+    pub created_at: DateTime<Utc>,
+}
+
+impl User {
+    pub async fn create(
+        pool: &PgPool,
+        event_id: Uuid,
+        display_name: &str,
+        pin_hash: &str,
+    ) -> Result<Self, sqlx::Error> {
+        sqlx::query_as::<_, Self>(
+            "INSERT INTO \"user\" (event_id, display_name, recovery_pin_hash)
+             VALUES ($1, $2, $3)
+             RETURNING *",
+        )
+        .bind(event_id)
+        .bind(display_name)
+        .bind(pin_hash)
+        .fetch_one(pool)
+        .await
+    }
+
+    pub async fn find_by_id(pool: &PgPool, id: Uuid) -> Result<Option<Self>, sqlx::Error> {
+        sqlx::query_as::<_, Self>("SELECT * FROM \"user\" WHERE id = $1")
+            .bind(id)
+            .fetch_optional(pool)
+            .await
+    }
+
+    pub async fn find_by_event_and_name(
+        pool: &PgPool,
+        event_id: Uuid,
+        display_name: &str,
+    ) -> Result<Vec<Self>, sqlx::Error> {
+        sqlx::query_as::<_, Self>(
+            "SELECT * FROM \"user\" WHERE event_id = $1 AND display_name = $2",
+        )
+        .bind(event_id)
+        .bind(display_name)
+        .fetch_all(pool)
+        .await
+    }
+
+    pub async fn increment_failed_pin(pool: &PgPool, id: Uuid) -> Result<i16, sqlx::Error> {
+        let row: (i16,) = sqlx::query_as(
+            "UPDATE \"user\"
+             SET failed_pin_attempts = failed_pin_attempts + 1
+             WHERE id = $1
+             RETURNING failed_pin_attempts",
+        )
+        .bind(id)
+        .fetch_one(pool)
+        .await?;
+        Ok(row.0)
+    }
+
+    pub async fn lock_pin(pool: &PgPool, id: Uuid, until: DateTime<Utc>) -> Result<(), sqlx::Error> {
+        sqlx::query(
+            "UPDATE \"user\" SET pin_locked_until = $2 WHERE id = $1",
+        )
+        .bind(id)
+        .bind(until)
+        .execute(pool)
+        .await?;
+        Ok(())
+    }
+
+    pub async fn reset_pin_attempts(pool: &PgPool, id: Uuid) -> Result<(), sqlx::Error> {
+        sqlx::query(
+            "UPDATE \"user\" SET failed_pin_attempts = 0, pin_locked_until = NULL WHERE id = $1",
+        )
+        .bind(id)
+        .execute(pool)
+        .await?;
+        Ok(())
+    }
+}

backend/src/services/compression.rs

@@ -0,0 +1,139 @@
+use std::path::{Path, PathBuf};
+use std::sync::Arc;
+
+use anyhow::{Context, Result};
+use sqlx::PgPool;
+use tokio::sync::Semaphore;
+use uuid::Uuid;
+
+use crate::models::upload::Upload;
+
+#[derive(Clone)]
+pub struct CompressionWorker {
+    semaphore: Arc<Semaphore>,
+    pool: PgPool,
+    media_path: PathBuf,
+}
+
+impl CompressionWorker {
+    pub fn new(pool: PgPool, media_path: PathBuf, concurrency: usize) -> Self {
+        Self {
+            semaphore: Arc::new(Semaphore::new(concurrency)),
+            pool,
+            media_path,
+        }
+    }
+
+    /// Spawn a background task to process an uploaded file.
+    pub fn process(&self, upload_id: Uuid, original_path: String, mime_type: String) {
+        let worker = self.clone();
+        tokio::spawn(async move {
+            let _permit = worker.semaphore.acquire().await;
+            if let Err(e) = worker.do_process(upload_id, &original_path, &mime_type).await {
+                tracing::error!("compression failed for upload {upload_id}: {e:#}");
+            }
+        });
+    }
+
+    async fn do_process(
+        &self,
+        upload_id: Uuid,
+        original_path: &str,
+        mime_type: &str,
+    ) -> Result<()> {
+        let original = self.media_path.join(original_path);
+
+        if mime_type.starts_with("image/") {
+            let preview_rel = self.generate_image_preview(upload_id, &original, mime_type).await?;
+            Upload::set_preview_path(&self.pool, upload_id, &preview_rel).await?;
+            tracing::info!("preview generated for upload {upload_id}");
+        } else if mime_type.starts_with("video/") {
+            let thumb_rel = self.generate_video_thumbnail(upload_id, &original).await?;
+            Upload::set_thumbnail_path(&self.pool, upload_id, &thumb_rel).await?;
+            tracing::info!("thumbnail generated for upload {upload_id}");
+        }
+
+        Ok(())
+    }
+
+    async fn generate_image_preview(
+        &self,
+        upload_id: Uuid,
+        original: &Path,
+        mime_type: &str,
+    ) -> Result<String> {
+        let previews_dir = self.media_path.join("previews");
+        tokio::fs::create_dir_all(&previews_dir).await?;
+
+        let preview_filename = format!("{upload_id}.jpg");
+        let preview_path = previews_dir.join(&preview_filename);
+        let original = original.to_path_buf();
+        let preview_path_clone = preview_path.clone();
+        let mime_owned = mime_type.to_string();
+
+        // Run blocking image operations in a spawn_blocking task
+        tokio::task::spawn_blocking(move || -> Result<()> {
+            let img = image::open(&original)
+                .context("failed to open image")?;
+
+            // Resize to max 800px wide, preserving aspect ratio
+            let preview = img.resize(800, 800, image::imageops::FilterType::Lanczos3);
+            preview.save_with_format(&preview_path_clone, image::ImageFormat::Jpeg)
+                .context("failed to save preview")?;
+
+            // If the original is PNG, try lossless compression in-place
+            if mime_owned == "image/png" {
+                let opts = oxipng::Options::from_preset(2);
+                let _ = oxipng::optimize(
+                    &oxipng::InFile::Path(original),
+                    &oxipng::OutFile::Path {
+                        path: None,
+                        preserve_attrs: true,
+                    },
+                    &opts,
+                );
+            }
+
+            Ok(())
+        })
+        .await??;
+
+        Ok(format!("previews/{preview_filename}"))
+    }
+
+    async fn generate_video_thumbnail(
+        &self,
+        upload_id: Uuid,
+        original: &Path,
+    ) -> Result<String> {
+        let thumbs_dir = self.media_path.join("thumbnails");
+        tokio::fs::create_dir_all(&thumbs_dir).await?;
+
+        let thumb_filename = format!("{upload_id}.jpg");
+        let thumb_path = thumbs_dir.join(&thumb_filename);
+
+        let output = tokio::process::Command::new("ffmpeg")
+            .args([
+                "-i",
+                original.to_str().unwrap_or_default(),
+                "-vframes",
+                "1",
+                "-ss",
+                "00:00:01",
+                "-vf",
+                "scale=800:-1",
+                "-y",
+                thumb_path.to_str().unwrap_or_default(),
+            ])
+            .output()
+            .await
+            .context("failed to run ffmpeg")?;
+
+        if !output.status.success() {
+            let stderr = String::from_utf8_lossy(&output.stderr);
+            anyhow::bail!("ffmpeg failed: {stderr}");
+        }
+
+        Ok(format!("thumbnails/{thumb_filename}"))
+    }
+}

backend/src/services/mod.rs

@@ -0,0 +1 @@
+pub mod compression;

backend/src/state.rs

@@ -0,0 +1,33 @@
+use sqlx::PgPool;
+use tokio::sync::broadcast;
+
+use crate::config::AppConfig;
+use crate::services::compression::CompressionWorker;
+
+#[derive(Clone, Debug)]
+pub struct SseEvent {
+    pub event_type: String,
+    pub data: String,
+}
+
+#[derive(Clone)]
+pub struct AppState {
+    pub pool: PgPool,
+    pub config: AppConfig,
+    pub sse_tx: broadcast::Sender<SseEvent>,
+    pub compression: CompressionWorker,
+}
+
+impl AppState {
+    pub fn new(pool: PgPool, config: AppConfig) -> Self {
+        let (sse_tx, _) = broadcast::channel(256);
+        let compression =
+            CompressionWorker::new(pool.clone(), config.media_path.clone(), 2);
+        Self {
+            pool,
+            config,
+            sse_tx,
+            compression,
+        }
+    }
+}

frontend/src/lib/api.ts

@@ -0,0 +1,57 @@
+import { getToken, clearAuth } from './auth';
+
+const BASE = '/api/v1';
+
+export class ApiError extends Error {
+	status: number;
+	code: string;
+
+	constructor(status: number, code: string, message: string) {
+		super(message);
+		this.status = status;
+		this.code = code;
+	}
+}
+
+async function request<T>(
+	method: string,
+	path: string,
+	body?: unknown
+): Promise<T> {
+	const headers: Record<string, string> = {};
+	const token = getToken();
+	if (token) {
+		headers['Authorization'] = `Bearer ${token}`;
+	}
+	if (body !== undefined) {
+		headers['Content-Type'] = 'application/json';
+	}
+
+	const res = await fetch(`${BASE}${path}`, {
+		method,
+		headers,
+		body: body !== undefined ? JSON.stringify(body) : undefined
+	});
+
+	if (res.status === 204) {
+		return undefined as T;
+	}
+
+	const data = await res.json();
+
+	if (!res.ok) {
+		if (res.status === 401) {
+			clearAuth();
+		}
+		throw new ApiError(res.status, data.error ?? 'unknown', data.message ?? 'Fehler');
+	}
+
+	return data as T;
+}
+
+export const api = {
+	get: <T>(path: string) => request<T>('GET', path),
+	post: <T>(path: string, body?: unknown) => request<T>('POST', path, body),
+	patch: <T>(path: string, body?: unknown) => request<T>('PATCH', path, body),
+	delete: <T>(path: string) => request<T>('DELETE', path)
+};

frontend/src/lib/auth.ts

@@ -0,0 +1,55 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const TOKEN_KEY = 'eventsnap_jwt';
+const PIN_KEY = 'eventsnap_pin';
+const USER_ID_KEY = 'eventsnap_user_id';
+
+export const isAuthenticated = writable(false);
+
+export function getToken(): string | null {
+	if (!browser) return null;
+	return localStorage.getItem(TOKEN_KEY);
+}
+
+export function getPin(): string | null {
+	if (!browser) return null;
+	return localStorage.getItem(PIN_KEY);
+}
+
+export function getUserId(): string | null {
+	if (!browser) return null;
+	return localStorage.getItem(USER_ID_KEY);
+}
+
+export function setAuth(jwt: string, pin: string | null, userId: string): void {
+	if (!browser) return;
+	localStorage.setItem(TOKEN_KEY, jwt);
+	if (pin) localStorage.setItem(PIN_KEY, pin);
+	localStorage.setItem(USER_ID_KEY, userId);
+	isAuthenticated.set(true);
+}
+
+export function clearAuth(): void {
+	if (!browser) return;
+	localStorage.removeItem(TOKEN_KEY);
+	localStorage.removeItem(USER_ID_KEY);
+	// PIN is intentionally kept so the user can recover
+	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/CameraCapture.svelte

@@ -0,0 +1,238 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+
+	interface Props {
+		oncapture: (blob: Blob, type: 'photo' | 'video') => void;
+		onclose: () => void;
+	}
+
+	let { oncapture, onclose }: Props = $props();
+
+	let videoEl: HTMLVideoElement = $state()!;
+	let canvasEl: HTMLCanvasElement = $state()!;
+	let stream: MediaStream | null = $state(null);
+	let facingMode = $state<'environment' | 'user'>('environment');
+	let recording = $state(false);
+	let recordingTime = $state(0);
+	let error = $state<string | null>(null);
+	let mediaRecorder: MediaRecorder | null = null;
+	let recordedChunks: Blob[] = [];
+	let recordingInterval: ReturnType<typeof setInterval> | null = null;
+
+	onMount(() => {
+		startCamera();
+	});
+
+	onDestroy(() => {
+		stopCamera();
+		if (recordingInterval) clearInterval(recordingInterval);
+	});
+
+	async function startCamera() {
+		error = null;
+		stopCamera();
+
+		try {
+			stream = await navigator.mediaDevices.getUserMedia({
+				video: { facingMode, width: { ideal: 1920 }, height: { ideal: 1080 } },
+				audio: true
+			});
+			if (videoEl) {
+				videoEl.srcObject = stream;
+			}
+		} catch (err) {
+			if (err instanceof DOMException && err.name === 'NotAllowedError') {
+				error = 'Kamerazugriff wurde verweigert. Bitte erlaube den Zugriff in den Browsereinstellungen.';
+			} else if (err instanceof DOMException && err.name === 'NotFoundError') {
+				error = 'Keine Kamera gefunden.';
+			} else {
+				error = 'Kamera konnte nicht gestartet werden.';
+			}
+		}
+	}
+
+	function stopCamera() {
+		if (stream) {
+			for (const track of stream.getTracks()) {
+				track.stop();
+			}
+			stream = null;
+		}
+	}
+
+	async function toggleCamera() {
+		facingMode = facingMode === 'environment' ? 'user' : 'environment';
+		await startCamera();
+	}
+
+	function capturePhoto() {
+		if (!videoEl || !canvasEl) return;
+		const ctx = canvasEl.getContext('2d');
+		if (!ctx) return;
+
+		canvasEl.width = videoEl.videoWidth;
+		canvasEl.height = videoEl.videoHeight;
+		ctx.drawImage(videoEl, 0, 0);
+
+		canvasEl.toBlob(
+			(blob) => {
+				if (blob) oncapture(blob, 'photo');
+			},
+			'image/jpeg',
+			0.92
+		);
+	}
+
+	function startRecording() {
+		if (!stream) return;
+
+		recordedChunks = [];
+		recordingTime = 0;
+
+		const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
+			? 'video/webm;codecs=vp9'
+			: MediaRecorder.isTypeSupported('video/webm')
+				? 'video/webm'
+				: 'video/mp4';
+
+		mediaRecorder = new MediaRecorder(stream, { mimeType });
+
+		mediaRecorder.ondataavailable = (e) => {
+			if (e.data.size > 0) recordedChunks.push(e.data);
+		};
+
+		mediaRecorder.onstop = () => {
+			const blob = new Blob(recordedChunks, { type: mediaRecorder?.mimeType ?? mimeType });
+			oncapture(blob, 'video');
+			recordedChunks = [];
+		};
+
+		mediaRecorder.start(1000);
+		recording = true;
+
+		recordingInterval = setInterval(() => {
+			recordingTime += 1;
+		}, 1000);
+	}
+
+	function stopRecording() {
+		if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+			mediaRecorder.stop();
+		}
+		recording = false;
+		if (recordingInterval) {
+			clearInterval(recordingInterval);
+			recordingInterval = null;
+		}
+	}
+
+	function formatRecordingTime(seconds: number): string {
+		const m = Math.floor(seconds / 60);
+		const s = seconds % 60;
+		return `${m}:${String(s).padStart(2, '0')}`;
+	}
+</script>
+
+<div class="fixed inset-0 z-50 flex flex-col bg-black">
+	<!-- Camera preview -->
+	<div class="relative flex-1 overflow-hidden">
+		{#if error}
+			<div class="flex h-full items-center justify-center p-8">
+				<div class="rounded-lg bg-gray-900 p-6 text-center">
+					<svg class="mx-auto mb-3 h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l-4 4m0-4l4 4m6-4a9 9 0 11-18 0 9 9 0 0118 0z" />
+					</svg>
+					<p class="text-sm text-white">{error}</p>
+					<button
+						onclick={onclose}
+						class="mt-4 rounded-lg bg-white/20 px-4 py-2 text-sm text-white"
+					>
+						Schliessen
+					</button>
+				</div>
+			</div>
+		{:else}
+			<!-- svelte-ignore a11y_media_has_caption -->
+			<video
+				bind:this={videoEl}
+				autoplay
+				playsinline
+				muted
+				class="h-full w-full object-cover {facingMode === 'user' ? 'scale-x-[-1]' : ''}"
+			></video>
+
+			{#if recording}
+				<div class="absolute left-4 top-4 flex items-center gap-2 rounded-full bg-red-600 px-3 py-1">
+					<div class="h-2 w-2 animate-pulse rounded-full bg-white"></div>
+					<span class="text-sm font-medium text-white">{formatRecordingTime(recordingTime)}</span>
+				</div>
+			{/if}
+		{/if}
+	</div>
+
+	<!-- Controls -->
+	{#if !error}
+		<div class="flex items-center justify-center gap-8 bg-black/80 px-4 py-6">
+			<!-- Close -->
+			<button
+				onclick={onclose}
+				class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
+				aria-label="Schliessen"
+			>
+				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+			</button>
+
+			<!-- Capture photo / record video -->
+			{#if recording}
+				<button
+					onclick={stopRecording}
+					class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-red-600"
+					aria-label="Aufnahme stoppen"
+				>
+					<div class="h-6 w-6 rounded-sm bg-white"></div>
+				</button>
+			{:else}
+				<button
+					onclick={capturePhoto}
+					class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-white/20 transition active:bg-white/40"
+					aria-label="Foto aufnehmen"
+				>
+					<div class="h-12 w-12 rounded-full bg-white"></div>
+				</button>
+			{/if}
+
+			<!-- Toggle camera / start recording -->
+			{#if recording}
+				<div class="h-12 w-12"></div>
+			{:else}
+				<button
+					onclick={toggleCamera}
+					class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
+					aria-label="Kamera wechseln"
+				>
+					<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+					</svg>
+				</button>
+			{/if}
+		</div>
+
+		<!-- Video record button -->
+		{#if !recording}
+			<div class="flex justify-center bg-black/80 pb-4">
+				<button
+					onclick={startRecording}
+					class="flex items-center gap-2 rounded-full bg-red-600/80 px-4 py-2 text-sm text-white transition hover:bg-red-600"
+				>
+					<div class="h-2.5 w-2.5 rounded-full bg-white"></div>
+					Video aufnehmen
+				</button>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<!-- Hidden canvas for photo capture -->
+<canvas bind:this={canvasEl} class="hidden"></canvas>

frontend/src/lib/components/FeedGrid.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { FeedUpload } from '$lib/types';
+
+	interface Props {
+		uploads: FeedUpload[];
+		onlike: (id: string) => void;
+		oncomment: (id: string) => void;
+		onselect: (upload: FeedUpload) => void;
+	}
+
+	let { uploads, onlike, oncomment, onselect }: Props = $props();
+
+	function isVideo(mime: string): boolean {
+		return mime.startsWith('video/');
+	}
+
+	function imageUrl(upload: FeedUpload): string {
+		if (upload.thumbnail_url) return upload.thumbnail_url;
+		if (upload.preview_url) return upload.preview_url;
+		return '';
+	}
+</script>
+
+<div class="grid grid-cols-2 gap-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
+				onclick={() => onselect(upload)}
+				class="block h-full w-full"
+				aria-label="Upload anzeigen"
+			>
+				{#if isVideo(upload.mime_type)}
+					<div class="flex h-full items-center justify-center bg-gray-800">
+						{#if imageUrl(upload)}
+							<img src={imageUrl(upload)} alt="" class="h-full w-full object-cover" />
+						{/if}
+						<div class="absolute inset-0 flex items-center justify-center">
+							<svg class="h-10 w-10 text-white/80" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M8 5v14l11-7z" />
+							</svg>
+						</div>
+					</div>
+				{:else if imageUrl(upload)}
+					<img src={imageUrl(upload)} alt="" class="h-full w-full object-cover" loading="lazy" />
+				{:else}
+					<div class="flex h-full items-center justify-center text-gray-400">
+						<svg class="h-8 w-8" 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>
+
+			<!-- Overlay with name and stats -->
+			<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2">
+				<p class="truncate text-xs font-medium text-white">{upload.uploader_name}</p>
+				<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
+					<button
+						class="pointer-events-auto flex items-center gap-0.5"
+						onclick={(e) => { e.stopPropagation(); onlike(upload.id); }}
+					>
+						<svg class="h-3.5 w-3.5 {upload.liked_by_me ? 'fill-red-400 text-red-400' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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
+						class="pointer-events-auto flex items-center gap-0.5"
+						onclick={(e) => { e.stopPropagation(); oncomment(upload.id); }}
+					>
+						<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
+			</div>
+		</div>
+	{/each}
+</div>

frontend/src/lib/components/HashtagChips.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	interface HashtagCount {
+		tag: string;
+		count: number;
+	}
+
+	interface Props {
+		hashtags: HashtagCount[];
+		selected: string | null;
+		onselect: (tag: string | null) => void;
+	}
+
+	let { hashtags, selected, onselect }: Props = $props();
+</script>
+
+{#if hashtags.length > 0}
+	<div class="flex gap-2 overflow-x-auto pb-2">
+		<button
+			onclick={() => onselect(null)}
+			class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
+				selected === null
+					? 'bg-blue-600 text-white'
+					: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+			}"
+		>
+			Alle
+		</button>
+		{#each hashtags as h (h.tag)}
+			<button
+				onclick={() => onselect(h.tag)}
+				class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
+					selected === h.tag
+						? 'bg-blue-600 text-white'
+						: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+				}"
+			>
+				#{h.tag}
+				<span class="ml-1 text-xs opacity-70">{h.count}</span>
+			</button>
+		{/each}
+	</div>
+{/if}

frontend/src/lib/components/LightboxModal.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import type { FeedUpload } from '$lib/types';
+	import { api, ApiError } from '$lib/api';
+	import { getUserId } from '$lib/auth';
+
+	interface CommentDto {
+		id: string;
+		upload_id: string;
+		user_id: string;
+		uploader_name: string;
+		body: string;
+		created_at: string;
+	}
+
+	interface Props {
+		upload: FeedUpload;
+		onclose: () => void;
+		onlike: (id: string) => void;
+	}
+
+	let { upload, onclose, onlike }: Props = $props();
+
+	let comments = $state<CommentDto[]>([]);
+	let newComment = $state('');
+	let loading = $state(false);
+	let userId = getUserId();
+
+	$effect(() => {
+		loadComments();
+	});
+
+	async function loadComments() {
+		try {
+			comments = await api.get<CommentDto[]>(`/upload/${upload.id}/comments`);
+		} catch {
+			// Ignore
+		}
+	}
+
+	async function submitComment() {
+		if (!newComment.trim()) return;
+		loading = true;
+		try {
+			const comment = await api.post<CommentDto>(`/upload/${upload.id}/comment`, {
+				body: newComment.trim()
+			});
+			comments = [...comments, comment];
+			newComment = '';
+		} catch {
+			// Ignore
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function deleteComment(id: string) {
+		try {
+			await api.delete(`/comment/${id}`);
+			comments = comments.filter((c) => c.id !== id);
+		} catch {
+			// Ignore
+		}
+	}
+
+	function isVideo(mime: string): boolean {
+		return mime.startsWith('video/');
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') onclose();
+	}
+
+	function formatTime(iso: string): string {
+		return new Date(iso).toLocaleString('de-DE', {
+			day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
+		});
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4" role="dialog">
+	<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white">
+		<!-- Media -->
+		<div class="relative bg-black">
+			<button onclick={onclose} class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70">
+				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+			</button>
+			{#if isVideo(upload.mime_type)}
+				<video
+					src={upload.preview_url ?? ''}
+					controls
+					class="max-h-[50vh] w-full object-contain"
+					poster={upload.thumbnail_url ?? undefined}
+				></video>
+			{:else}
+				<img
+					src={upload.preview_url ?? ''}
+					alt=""
+					class="max-h-[50vh] w-full object-contain"
+				/>
+			{/if}
+		</div>
+
+		<!-- Info + Comments -->
+		<div class="flex flex-1 flex-col overflow-hidden">
+			<div class="border-b border-gray-100 p-3">
+				<div class="flex items-center justify-between">
+					<div>
+						<span class="font-medium text-gray-900">{upload.uploader_name}</span>
+						<span class="ml-2 text-xs text-gray-400">{formatTime(upload.created_at)}</span>
+					</div>
+					<button
+						onclick={() => onlike(upload.id)}
+						class="flex items-center gap-1 rounded-full px-2.5 py-1 text-sm transition {
+							upload.liked_by_me
+								? 'bg-red-50 text-red-600'
+								: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+						}"
+					>
+						<svg class="h-4 w-4 {upload.liked_by_me ? 'fill-current' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
+				</div>
+				{#if upload.caption}
+					<p class="mt-1 text-sm text-gray-700">{upload.caption}</p>
+				{/if}
+			</div>
+
+			<!-- Comments list -->
+			<div class="flex-1 overflow-y-auto p-3">
+				{#if comments.length === 0}
+					<p class="text-center text-sm text-gray-400">Noch keine Kommentare.</p>
+				{:else}
+					<div class="space-y-3">
+						{#each comments as comment (comment.id)}
+							<div class="flex items-start gap-2">
+								<div class="flex-1">
+									<span class="text-sm font-medium text-gray-900">{comment.uploader_name}</span>
+									<span class="ml-1 text-sm text-gray-700">{comment.body}</span>
+									<div class="mt-0.5 text-xs text-gray-400">{formatTime(comment.created_at)}</div>
+								</div>
+								{#if comment.user_id === userId}
+									<button
+										onclick={() => deleteComment(comment.id)}
+										class="shrink-0 text-gray-400 hover:text-red-500"
+										aria-label="Löschen"
+									>
+										<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+										</svg>
+									</button>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+
+			<!-- Comment input -->
+			<form
+				onsubmit={(e) => { e.preventDefault(); submitComment(); }}
+				class="flex gap-2 border-t border-gray-100 p-3"
+			>
+				<input
+					type="text"
+					bind:value={newComment}
+					placeholder="Kommentar schreiben..."
+					maxlength={500}
+					class="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
+				/>
+				<button
+					type="submit"
+					disabled={loading || !newComment.trim()}
+					class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50"
+				>
+					Senden
+				</button>
+			</form>
+		</div>
+	</div>
+</div>

frontend/src/lib/components/UploadQueue.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { queueItems, isProcessing, retryItem, removeItem, clearCompleted } from '$lib/upload-queue';
+	import type { QueueItem } from '$lib/upload-queue';
+
+	function formatSize(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`;
+	}
+
+	function statusLabel(status: QueueItem['status']): string {
+		switch (status) {
+			case 'pending': return 'Wartend';
+			case 'uploading': return 'Wird hochgeladen';
+			case 'done': return 'Fertig';
+			case 'error': return 'Fehler';
+		}
+	}
+
+	function statusColor(status: QueueItem['status']): string {
+		switch (status) {
+			case 'pending': return 'text-gray-500';
+			case 'uploading': return 'text-blue-600';
+			case 'done': return 'text-green-600';
+			case 'error': return 'text-red-600';
+		}
+	}
+
+	let items = $derived($queueItems);
+	let hasCompleted = $derived(items.some((i) => i.status === 'done'));
+</script>
+
+{#if items.length > 0}
+	<div class="mt-4 rounded-lg border border-gray-200 bg-white">
+		<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
+			<h3 class="text-sm font-semibold text-gray-900">
+				Upload-Warteschlange
+				{#if $isProcessing}
+					<span class="ml-2 inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500"></span>
+				{/if}
+			</h3>
+			{#if hasCompleted}
+				<button
+					onclick={() => clearCompleted()}
+					class="text-xs text-gray-500 hover:text-gray-700"
+				>
+					Fertige entfernen
+				</button>
+			{/if}
+		</div>
+
+		<ul class="divide-y divide-gray-100">
+			{#each items as item (item.id)}
+				<li class="px-4 py-3">
+					<div class="flex items-center justify-between">
+						<div class="min-w-0 flex-1">
+							<p class="truncate text-sm font-medium text-gray-900">{item.fileName}</p>
+							<p class="text-xs text-gray-500">{formatSize(item.fileSize)}</p>
+						</div>
+						<div class="ml-3 flex items-center gap-2">
+							<span class="text-xs font-medium {statusColor(item.status)}">
+								{statusLabel(item.status)}
+							</span>
+							{#if item.status === 'error'}
+								<button
+									onclick={() => retryItem(item.id)}
+									class="rounded bg-red-100 px-2 py-0.5 text-xs text-red-700 hover:bg-red-200"
+								>
+									Erneut
+								</button>
+							{/if}
+							{#if item.status === 'done' || item.status === 'error'}
+								<button
+									onclick={() => removeItem(item.id)}
+									class="text-gray-400 hover:text-gray-600"
+									aria-label="Entfernen"
+								>
+									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+									</svg>
+								</button>
+							{/if}
+						</div>
+					</div>
+
+					{#if item.status === 'uploading'}
+						<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
+							<div
+								class="h-full rounded-full bg-blue-500 transition-all duration-300"
+								style="width: {item.progress}%"
+							></div>
+						</div>
+						<p class="mt-1 text-right text-xs text-gray-400">{item.progress}%</p>
+					{/if}
+
+					{#if item.error}
+						<p class="mt-1 text-xs text-red-500">{item.error}</p>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	</div>
+{/if}

frontend/src/lib/sse.ts

@@ -0,0 +1,86 @@
+import { getToken } from './auth';
+
+type EventHandler = (data: string) => void;
+
+let eventSource: EventSource | null = null;
+let lastEventTime: string | null = null;
+const handlers: Map<string, EventHandler[]> = new Map();
+
+export function onSseEvent(eventType: string, handler: EventHandler): () => void {
+	if (!handlers.has(eventType)) {
+		handlers.set(eventType, []);
+	}
+	handlers.get(eventType)!.push(handler);
+
+	// Return unsubscribe function
+	return () => {
+		const list = handlers.get(eventType);
+		if (list) {
+			const idx = list.indexOf(handler);
+			if (idx >= 0) list.splice(idx, 1);
+		}
+	};
+}
+
+export function connectSse(): void {
+	const token = getToken();
+	if (!token || eventSource) return;
+
+	// EventSource doesn't support custom headers, so pass token as query param
+	// The backend will need to accept this — or we use a polyfill / fetch-based SSE
+	// For simplicity, use native EventSource with token in URL
+	eventSource = new EventSource(`/api/v1/stream?token=${encodeURIComponent(token)}`);
+
+	eventSource.onopen = () => {
+		lastEventTime = new Date().toISOString();
+	};
+
+	eventSource.addEventListener('new-upload', (e) => dispatch('new-upload', e.data));
+	eventSource.addEventListener('upload-processed', (e) => dispatch('upload-processed', e.data));
+	eventSource.addEventListener('like-update', (e) => dispatch('like-update', e.data));
+	eventSource.addEventListener('new-comment', (e) => dispatch('new-comment', e.data));
+	eventSource.addEventListener('export-available', (e) => dispatch('export-available', e.data));
+
+	eventSource.onerror = () => {
+		// EventSource auto-reconnects, but we track the time for delta-fetch
+		disconnectSse();
+		// Reconnect after a short delay
+		setTimeout(connectSse, 3000);
+	};
+}
+
+export function disconnectSse(): void {
+	if (eventSource) {
+		eventSource.close();
+		eventSource = null;
+	}
+}
+
+export function getLastEventTime(): string | null {
+	return lastEventTime;
+}
+
+export function setLastEventTime(time: string): void {
+	lastEventTime = time;
+}
+
+function dispatch(eventType: string, data: string): void {
+	lastEventTime = new Date().toISOString();
+	const list = handlers.get(eventType);
+	if (list) {
+		for (const handler of list) {
+			handler(data);
+		}
+	}
+}
+
+// Page Visibility API integration
+if (typeof document !== 'undefined') {
+	document.addEventListener('visibilitychange', () => {
+		if (document.hidden) {
+			disconnectSse();
+		} else {
+			connectSse();
+		}
+	});
+}

frontend/src/lib/types.ts

@@ -0,0 +1,23 @@
+export interface FeedUpload {
+	id: string;
+	user_id: string;
+	uploader_name: string;
+	preview_url: string | null;
+	thumbnail_url: string | null;
+	mime_type: string;
+	caption: string | null;
+	like_count: number;
+	comment_count: number;
+	liked_by_me: boolean;
+	created_at: string;
+}
+
+export interface FeedResponse {
+	uploads: FeedUpload[];
+	next_cursor: string | null;
+}
+
+export interface HashtagCount {
+	tag: string;
+	count: number;
+}

frontend/src/lib/upload-queue.ts

@@ -0,0 +1,233 @@
+import { openDB, type IDBPDatabase } from 'idb';
+import { writable, get } from 'svelte/store';
+import { getToken } from './auth';
+
+export interface QueueItem {
+	id: string;
+	fileName: string;
+	fileSize: number;
+	mimeType: string;
+	caption: string;
+	hashtags: string;
+	status: 'pending' | 'uploading' | 'done' | 'error';
+	progress: number;
+	error?: string;
+}
+
+// Store does NOT hold file blobs — those stay in IndexedDB only
+export const queueItems = writable<QueueItem[]>([]);
+export const isProcessing = writable(false);
+
+const DB_NAME = 'eventsnap-uploads';
+const STORE_NAME = 'queue';
+
+let db: IDBPDatabase | null = null;
+
+async function getDb(): Promise<IDBPDatabase> {
+	if (db) return db;
+	db = await openDB(DB_NAME, 1, {
+		upgrade(database) {
+			if (!database.objectStoreNames.contains(STORE_NAME)) {
+				database.createObjectStore(STORE_NAME, { keyPath: 'id' });
+			}
+		}
+	});
+	return db;
+}
+
+export async function loadQueue(): Promise<void> {
+	const database = await getDb();
+	const all = await database.getAll(STORE_NAME);
+	const items: QueueItem[] = all.map((entry) => ({
+		id: entry.id,
+		fileName: entry.fileName,
+		fileSize: entry.fileSize,
+		mimeType: entry.mimeType,
+		caption: entry.caption ?? '',
+		hashtags: entry.hashtags ?? '',
+		status: entry.status === 'uploading' ? 'pending' : entry.status,
+		progress: entry.status === 'done' ? 100 : 0,
+		error: entry.error
+	}));
+	queueItems.set(items);
+}
+
+export async function addToQueue(
+	file: File,
+	caption: string,
+	hashtags: string
+): Promise<void> {
+	const database = await getDb();
+	const id = crypto.randomUUID();
+	const entry = {
+		id,
+		fileName: file.name,
+		fileSize: file.size,
+		mimeType: file.type,
+		caption,
+		hashtags,
+		status: 'pending',
+		blob: file
+	};
+	await database.put(STORE_NAME, entry);
+
+	queueItems.update((items) => [
+		...items,
+		{
+			id,
+			fileName: file.name,
+			fileSize: file.size,
+			mimeType: file.type,
+			caption,
+			hashtags,
+			status: 'pending',
+			progress: 0
+		}
+	]);
+
+	processQueue();
+}
+
+export async function retryItem(id: string): Promise<void> {
+	const database = await getDb();
+	const entry = await database.get(STORE_NAME, id);
+	if (!entry) return;
+
+	entry.status = 'pending';
+	entry.error = undefined;
+	await database.put(STORE_NAME, entry);
+
+	queueItems.update((items) =>
+		items.map((item) =>
+			item.id === id ? { ...item, status: 'pending' as const, progress: 0, error: undefined } : item
+		)
+	);
+
+	processQueue();
+}
+
+export async function removeItem(id: string): Promise<void> {
+	const database = await getDb();
+	await database.delete(STORE_NAME, id);
+	queueItems.update((items) => items.filter((item) => item.id !== id));
+}
+
+export async function clearCompleted(): Promise<void> {
+	const database = await getDb();
+	const items = get(queueItems);
+	for (const item of items) {
+		if (item.status === 'done') {
+			await database.delete(STORE_NAME, item.id);
+		}
+	}
+	queueItems.update((items) => items.filter((item) => item.status !== 'done'));
+}
+
+let processing = false;
+
+async function processQueue(): Promise<void> {
+	if (processing) return;
+	processing = true;
+	isProcessing.set(true);
+
+	try {
+		while (true) {
+			const items = get(queueItems);
+			const next = items.find((item) => item.status === 'pending');
+			if (!next) break;
+
+			await uploadItem(next.id);
+		}
+	} finally {
+		processing = false;
+		isProcessing.set(false);
+	}
+}
+
+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;
+	}
+
+	updateItemStatus(id, 'uploading');
+
+	const token = getToken();
+	if (!token) {
+		updateItemStatus(id, 'error', 'Nicht angemeldet.');
+		return;
+	}
+
+	try {
+		const formData = new FormData();
+		formData.append('file', entry.blob, entry.fileName);
+		if (entry.caption) formData.append('caption', entry.caption);
+		if (entry.hashtags) formData.append('hashtags', entry.hashtags);
+
+		await new Promise<void>((resolve, reject) => {
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', '/api/v1/upload');
+			xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+
+			xhr.upload.addEventListener('progress', (e) => {
+				if (e.lengthComputable) {
+					const pct = Math.round((e.loaded / e.total) * 100);
+					queueItems.update((items) =>
+						items.map((item) => (item.id === id ? { ...item, progress: pct } : item))
+					);
+				}
+			});
+
+			xhr.addEventListener('load', () => {
+				if (xhr.status >= 200 && xhr.status < 300) {
+					resolve();
+				} else {
+					try {
+						const body = JSON.parse(xhr.responseText);
+						reject(new Error(body.message || `HTTP ${xhr.status}`));
+					} catch {
+						reject(new Error(`HTTP ${xhr.status}`));
+					}
+				}
+			});
+
+			xhr.addEventListener('error', () => reject(new Error('Netzwerkfehler')));
+			xhr.addEventListener('abort', () => reject(new Error('Abgebrochen')));
+			xhr.send(formData);
+		});
+
+		// Success — remove blob from IndexedDB, mark done
+		entry.status = 'done';
+		delete entry.blob;
+		await database.put(STORE_NAME, entry);
+		updateItemStatus(id, 'done');
+	} catch (e) {
+		const msg = e instanceof Error ? e.message : 'Upload fehlgeschlagen.';
+		entry.status = 'error';
+		entry.error = msg;
+		await database.put(STORE_NAME, entry);
+		updateItemStatus(id, 'error', msg);
+	}
+}
+
+function updateItemStatus(
+	id: string,
+	status: QueueItem['status'],
+	error?: string
+): void {
+	queueItems.update((items) =>
+		items.map((item) =>
+			item.id === id
+				? {
+						...item,
+						status,
+						progress: status === 'done' ? 100 : status === 'error' ? item.progress : item.progress,
+						error
+					}
+				: item
+		)
+	);
+}

frontend/src/routes/+layout.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
 	import '../app.css';
+	import { initAuth } from '$lib/auth';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
+
+	onMount(() => {
+		initAuth();
+	});
 </script>
 
 <svelte:head>

frontend/src/routes/+page.svelte

@@ -1,2 +1,14 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken } from '$lib/auth';
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		if (getToken()) {
+			goto('/feed');
+		} else {
+			goto('/join');
+		}
+	});
+</script>

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

@@ -0,0 +1,226 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken, clearAuth } 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 HashtagChips from '$lib/components/HashtagChips.svelte';
+	import LightboxModal from '$lib/components/LightboxModal.svelte';
+	import type { FeedUpload, FeedResponse, HashtagCount } from '$lib/types';
+
+	let uploads = $state<FeedUpload[]>([]);
+	let hashtags = $state<HashtagCount[]>([]);
+	let selectedHashtag = $state<string | null>(null);
+	let nextCursor = $state<string | null>(null);
+	let loadingMore = $state(false);
+	let selectedUpload = $state<FeedUpload | null>(null);
+	let sentinel: HTMLDivElement;
+
+	let unsubscribers: (() => void)[] = [];
+
+	onMount(async () => {
+		if (!getToken()) {
+			goto('/join');
+			return;
+		}
+
+		await Promise.all([loadFeed(), loadHashtags()]);
+		connectSse();
+
+		unsubscribers.push(
+			onSseEvent('new-upload', (data) => {
+				try {
+					const upload: FeedUpload = JSON.parse(data);
+					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);
+			})
+		);
+
+		// Infinite scroll via IntersectionObserver
+		if (sentinel) {
+			const observer = new IntersectionObserver(
+				(entries) => {
+					if (entries[0].isIntersecting && nextCursor && !loadingMore) {
+						loadMore();
+					}
+				},
+				{ rootMargin: '200px' }
+			);
+			observer.observe(sentinel);
+		}
+	});
+
+	onDestroy(() => {
+		disconnectSse();
+		for (const unsub of unsubscribers) unsub();
+	});
+
+	async function loadFeed(refresh = false) {
+		try {
+			const params = new URLSearchParams();
+			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
+		}
+	}
+
+	async function loadMore() {
+		if (!nextCursor || loadingMore) return;
+		loadingMore = true;
+		try {
+			const params = new URLSearchParams();
+			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 {
+			loadingMore = false;
+		}
+	}
+
+	async function loadHashtags() {
+		try {
+			hashtags = await api.get<HashtagCount[]>('/hashtags');
+		} catch {
+			// Ignore
+		}
+	}
+
+	function selectHashtag(tag: string | null) {
+		selectedHashtag = tag;
+		nextCursor = null;
+		loadFeed();
+	}
+
+	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
+			);
+			// 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
+				};
+			}
+		} catch {
+			// Ignore
+		}
+	}
+
+	function openComments(id: string) {
+		const u = uploads.find((u) => u.id === id);
+		if (u) selectedUpload = u;
+	}
+
+	async function handleLogout() {
+		try { await api.delete('/session'); } catch { /* ignore */ }
+		clearAuth();
+		goto('/join');
+	}
+</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="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>
+				<button
+					onclick={handleLogout}
+					class="text-sm text-gray-500 hover:text-gray-700"
+				>
+					Abmelden
+				</button>
+			</div>
+		</div>
+
+		<!-- Hashtag filter chips -->
+		<div class="mx-auto max-w-2xl px-4 pb-2">
+			<HashtagChips {hashtags} selected={selectedHashtag} onselect={selectHashtag} />
+		</div>
+	</div>
+
+	<!-- Feed grid -->
+	<div class="mx-auto max-w-2xl p-4">
+		{#if uploads.length === 0}
+			<div class="py-16 text-center">
+				<p class="text-lg text-gray-400">Noch keine Fotos.</p>
+				<p class="mt-1 text-sm text-gray-400">Sei der Erste und lade etwas hoch!</p>
+				<a href="/upload" class="mt-4 inline-block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white">
+					Jetzt hochladen
+				</a>
+			</div>
+		{:else}
+			<FeedGrid
+				{uploads}
+				onlike={handleLike}
+				oncomment={openComments}
+				onselect={(u) => (selectedUpload = u)}
+			/>
+		{/if}
+
+		<!-- Infinite scroll sentinel -->
+		<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>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<!-- Lightbox -->
+{#if selectedUpload}
+	<LightboxModal
+		upload={selectedUpload}
+		onclose={() => (selectedUpload = null)}
+		onlike={handleLike}
+	/>
+{/if}

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

@@ -0,0 +1,318 @@
+<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);
+
+	// Ban modal state
+	let banTarget = $state<UserSummary | null>(null);
+	let banHideUploads = $state(false);
+	let banSubmitting = $state(false);
+
+	// Toast state
+	let toast = $state<string | null>(null);
+
+	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`;
+	}
+
+	const myRole = getRole();
+</script>
+
+<!-- Ban modal -->
+{#if banTarget}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
+			<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
+			<p class="mb-4 text-sm text-gray-600">
+				Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
+			</p>
+			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
+				<input
+					type="checkbox"
+					bind:checked={banHideUploads}
+					class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500"
+				/>
+				<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
+			</label>
+			<div class="flex gap-2">
+				<button
+					onclick={() => (banTarget = null)}
+					class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50"
+				>
+					Abbrechen
+				</button>
+				<button
+					onclick={confirmBan}
+					disabled={banSubmitting}
+					class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
+				>
+					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Toast -->
+{#if toast}
+	<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
+		{toast}
+	</div>
+{/if}
+
+<div class="min-h-screen bg-gray-50">
+	<!-- Header -->
+	<div class="border-b border-gray-200 bg-white">
+		<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
+			<div>
+				<h1 class="text-xl font-bold text-gray-900">Host Dashboard</h1>
+				{#if event}
+					<p class="text-sm text-gray-500">{event.name}</p>
+				{/if}
+			</div>
+			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
+		</div>
+	</div>
+
+	<div class="mx-auto max-w-3xl space-y-4 p-4">
+		{#if loading}
+			<div class="py-16 text-center text-gray-400">Laden…</div>
+		{:else if error}
+			<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
+		{:else if event}
+			<!-- Event controls -->
+			<div class="rounded-xl border border-gray-200 bg-white p-5">
+				<h2 class="mb-4 font-semibold text-gray-900">Veranstaltung</h2>
+				<div class="flex flex-wrap gap-3">
+					<button
+						onclick={toggleEventLock}
+						class="rounded-lg px-4 py-2 text-sm font-medium {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 {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 class="mt-3 flex gap-4 text-xs text-gray-500">
+					<span class="flex items-center gap-1">
+						<span class="h-2 w-2 rounded-full {event.uploads_locked ? 'bg-red-500' : 'bg-green-500'}"></span>
+						Uploads {event.uploads_locked ? 'gesperrt' : 'offen'}
+					</span>
+					<span class="flex items-center gap-1">
+						<span class="h-2 w-2 rounded-full {event.export_released ? 'bg-blue-500' : 'bg-gray-300'}"></span>
+						Export {event.export_released ? 'freigegeben' : 'gesperrt'}
+					</span>
+				</div>
+			</div>
+
+			<!-- User management -->
+			<div class="rounded-xl border border-gray-200 bg-white">
+				<div class="border-b border-gray-100 px-5 py-4">
+					<h2 class="font-semibold text-gray-900">Gäste ({users.length})</h2>
+				</div>
+				{#if users.length === 0}
+					<p class="px-5 py-8 text-center text-sm text-gray-400">Noch keine Gäste.</p>
+				{:else}
+					<div class="divide-y divide-gray-100">
+						{#each users as user}
+							<div class="flex items-center gap-3 px-5 py-3">
+								<div class="min-w-0 flex-1">
+									<div class="flex items-center gap-2">
+										<span class="truncate 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>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { api, ApiError } from '$lib/api';
+	import { setAuth } from '$lib/auth';
+
+	let displayName = $state('');
+	let error = $state('');
+	let loading = $state(false);
+	let showPinModal = $state(false);
+	let pin = $state('');
+	let copied = $state(false);
+
+	async function handleJoin() {
+		if (!displayName.trim()) return;
+		loading = true;
+		error = '';
+		try {
+			const res = await api.post<{
+				jwt: string;
+				pin: string;
+				user_id: string;
+				is_new: boolean;
+			}>('/join', { display_name: displayName.trim() });
+
+			setAuth(res.jwt, res.pin, res.user_id);
+			pin = res.pin;
+			showPinModal = true;
+		} catch (e) {
+			if (e instanceof ApiError) {
+				error = e.message;
+			} else {
+				error = 'Ein Fehler ist aufgetreten.';
+			}
+		} finally {
+			loading = false;
+		}
+	}
+
+	function copyPin() {
+		navigator.clipboard.writeText(pin);
+		copied = true;
+		setTimeout(() => (copied = false), 2000);
+	}
+
+	function goToFeed() {
+		goto('/feed');
+	}
+</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">Willkommen!</h1>
+		<p class="mb-6 text-center text-gray-600">Gib deinen Namen ein, um dem Event beizutreten.</p>
+
+		<form onsubmit={(e) => { e.preventDefault(); handleJoin(); }}>
+			<input
+				type="text"
+				bind:value={displayName}
+				placeholder="Dein Name"
+				maxlength={50}
+				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 || !displayName.trim()}
+				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 geladen...' : 'Beitreten'}
+			</button>
+		</form>
+
+		<p class="mt-4 text-center text-sm text-gray-500">
+			Schon dabei?
+			<a href="/recover" class="text-blue-600 hover:underline">Mit PIN wiederherstellen</a>
+		</p>
+	</div>
+</div>
+
+{#if showPinModal}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
+		<div class="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg">
+			<h2 class="mb-2 text-xl font-bold text-gray-900">Dein Wiederherstellungs-PIN</h2>
+			<p class="mb-4 text-sm text-gray-600">
+				Merke dir diesen PIN! Du brauchst ihn, um dein Konto auf einem anderen Gerät wiederherzustellen.
+			</p>
+
+			<div class="mb-4 flex items-center justify-center gap-3 rounded-lg bg-gray-100 p-4">
+				<span class="text-4xl font-mono font-bold tracking-widest text-gray-900">{pin}</span>
+				<button
+					onclick={copyPin}
+					class="rounded-md bg-gray-200 px-3 py-1 text-sm font-medium text-gray-700 hover:bg-gray-300"
+				>
+					{copied ? 'Kopiert!' : 'Kopieren'}
+				</button>
+			</div>
+
+			<button
+				onclick={goToFeed}
+				class="w-full rounded-lg bg-blue-600 px-4 py-3 font-medium text-white transition hover:bg-blue-700"
+			>
+				Weiter zur Galerie
+			</button>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { api, ApiError } from '$lib/api';
+	import { setAuth, getPin } from '$lib/auth';
+	import { browser } from '$app/environment';
+
+	let displayName = $state('');
+	let pin = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	// Pre-fill PIN from localStorage if available
+	if (browser) {
+		const savedPin = getPin();
+		if (savedPin) pin = savedPin;
+	}
+
+	async function handleRecover() {
+		if (!displayName.trim() || !pin.trim()) return;
+		loading = true;
+		error = '';
+		try {
+			const res = await api.post<{
+				jwt: string;
+				user_id: string;
+			}>('/recover', { display_name: displayName.trim(), pin: pin.trim() });
+
+			setAuth(res.jwt, pin.trim(), res.user_id);
+			goto('/feed');
+		} 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">Konto wiederherstellen</h1>
+		<p class="mb-6 text-center text-gray-600">Gib deinen Namen und deinen PIN ein.</p>
+
+		<form onsubmit={(e) => { e.preventDefault(); handleRecover(); }}>
+			<input
+				type="text"
+				bind:value={displayName}
+				placeholder="Dein Name"
+				maxlength={50}
+				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"
+			/>
+			<input
+				type="text"
+				bind:value={pin}
+				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 error}
+				<p class="mb-3 text-sm text-red-600">{error}</p>
+			{/if}
+
+			<button
+				type="submit"
+				disabled={loading || !displayName.trim() || pin.length < 4}
+				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 geladen...' : 'Wiederherstellen'}
+			</button>
+		</form>
+
+		<p class="mt-4 text-center text-sm text-gray-500">
+			Noch kein Konto?
+			<a href="/join" class="text-blue-600 hover:underline">Neu beitreten</a>
+		</p>
+	</div>
+</div>

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

@@ -0,0 +1,112 @@
+<script lang="ts">
+	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 CameraCapture from '$lib/components/CameraCapture.svelte';
+	import { onMount } from 'svelte';
+
+	let caption = $state('');
+	let hashtags = $state('');
+	let fileInput: HTMLInputElement;
+	let showCamera = $state(false);
+
+	onMount(() => {
+		if (!getToken()) {
+			goto('/join');
+			return;
+		}
+		loadQueue();
+	});
+
+	async function handleFiles() {
+		const files = fileInput?.files;
+		if (!files || files.length === 0) return;
+
+		for (const file of files) {
+			await addToQueue(file, caption, hashtags);
+		}
+
+		// Reset form
+		caption = '';
+		hashtags = '';
+		if (fileInput) fileInput.value = '';
+	}
+
+	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 });
+		await addToQueue(file, caption, hashtags);
+	}
+</script>
+
+{#if showCamera}
+	<CameraCapture
+		oncapture={handleCapture}
+		onclose={() => (showCamera = false)}
+	/>
+{/if}
+
+<div class="min-h-screen bg-gray-50 p-4">
+	<div class="mx-auto max-w-lg">
+		<div class="mb-6 flex items-center justify-between">
+			<h1 class="text-xl font-bold text-gray-900">Hochladen</h1>
+			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
+		</div>
+
+		<div class="rounded-lg border border-gray-200 bg-white p-4">
+			<div class="grid grid-cols-2 gap-3">
+				<!-- File picker -->
+				<label
+					class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition hover:border-blue-400 hover:bg-blue-50"
+				>
+					<svg class="mb-2 h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 16V4m0 0l-4 4m4-4l4 4M4 20h16" />
+					</svg>
+					<span class="text-center text-sm font-medium text-gray-600">Galerie</span>
+					<span class="mt-1 text-center text-xs text-gray-400">Mehrere Dateien</span>
+					<input
+						bind:this={fileInput}
+						type="file"
+						accept="image/*,video/*"
+						multiple
+						class="hidden"
+						onchange={handleFiles}
+					/>
+				</label>
+
+				<!-- Camera button -->
+				<button
+					onclick={() => (showCamera = true)}
+					class="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition hover:border-blue-400 hover:bg-blue-50"
+				>
+					<svg class="mb-2 h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+					</svg>
+					<span class="text-sm font-medium text-gray-600">Kamera</span>
+					<span class="mt-1 text-xs text-gray-400">Foto & Video</span>
+				</button>
+			</div>
+
+			<div class="mt-4 space-y-3">
+				<input
+					type="text"
+					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>
+		</div>
+
+		<UploadQueue />
+	</div>
+</div>