feat: implement camera capture step

Add in-app camera capture to the upload flow. Guests can now take photos
and record videos directly via getUserMedia without leaving the app.
The captured media is immediately queued through the existing IndexedDB
upload pipeline alongside library-picked files.

- CameraCapture.svelte: fullscreen overlay with live preview, photo
  capture (JPEG via canvas), video recording (WebM/MP4 via MediaRecorder),
  front/back camera toggle, recording timer, and permission-denied error state
- Upload page: side-by-side "Gallery" and "Camera" pickers; shared
  caption/hashtags fields apply to both sources; Blob→File conversion
  with timestamped filename before enqueue
- .env.test: reference environment config for local testing

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/mod.rs

@@ -0,0 +1,4 @@
+pub mod feed;
+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,49 @@ async fn main() -> Result<()> {
         .with(tracing_subscriber::fmt::layer())
         .init();
 
-    let database_url =
+    let config = AppConfig::from_env()?;
-        std::env::var("DATABASE_URL").expect("DATABASE_URL must be set");
+    let pool = db::create_pool(&config.database_url).await?;
-    let port: u16 = std::env::var("APP_PORT")
+    let state = AppState::new(pool, config.clone());
-        .unwrap_or_else(|_| "3000".to_string())
-        .parse()?;
 
-    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()
+    let api = Router::new()
-        .route("/health", axum::routing::get(|| async { "ok" }));
+        // 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));
 
-    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,44 @@
+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 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>
+<script lang="ts">
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+	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/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>