feat: implement admin dashboard

Add Admin Dashboard at /admin for server configuration, disk usage
monitoring, and export job status, plus a public export/status endpoint.

Backend — new /api/v1/admin/* endpoints (RequireAdmin auth):
- GET  /admin/stats           → user/upload/comment counts + disk usage
- GET  /admin/config          → all config key/value pairs
- PATCH /admin/config         → update any subset of config keys; validates
                                 key whitelist and numeric values
- GET  /admin/export/jobs     → export_job rows for the event

Backend — public (AuthUser) endpoint:
- GET  /export/status         → released flag + zip/html job status/progress

Frontend — /admin page:
- Stats grid: guest count, upload count, comment count
- Disk usage bar with GB/MB formatting; red ≥ 90%, amber ≥ 75%
- Config form: labelled numeric inputs for all eight config keys,
  sends only changed values on save
- Export jobs list: type label, status badge, progress bar for running jobs,
  error message if failed; manual refresh button

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/src/handlers/admin.rs

@@ -0,0 +1,202 @@
+use axum::extract::State;
+use axum::http::StatusCode;
+use axum::Json;
+use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
+use sysinfo::System;
+
+use crate::auth::middleware::RequireAdmin;
+use crate::error::AppError;
+use crate::state::AppState;
+
+// ── DTOs ─────────────────────────────────────────────────────────────────────
+
+#[derive(Serialize)]
+pub struct StatsDto {
+    pub user_count: i64,
+    pub upload_count: i64,
+    pub comment_count: i64,
+    pub disk_total_bytes: u64,
+    pub disk_used_bytes: u64,
+    pub disk_free_bytes: u64,
+}
+
+#[derive(Serialize, sqlx::FromRow)]
+pub struct ExportJobDto {
+    pub id: uuid::Uuid,
+    pub r#type: String,
+    pub status: String,
+    pub progress_pct: i16,
+    pub error_message: Option<String>,
+    pub created_at: chrono::DateTime<chrono::Utc>,
+    pub completed_at: Option<chrono::DateTime<chrono::Utc>>,
+}
+
+// ── Handlers ─────────────────────────────────────────────────────────────────
+
+pub async fn get_stats(
+    State(state): State<AppState>,
+    RequireAdmin(_auth): RequireAdmin,
+) -> Result<Json<StatsDto>, AppError> {
+    let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    let (user_count,): (i64,) =
+        sqlx::query_as("SELECT COUNT(*) FROM \"user\" WHERE event_id = $1")
+            .bind(event.id)
+            .fetch_one(&state.pool)
+            .await?;
+
+    let (upload_count,): (i64,) = sqlx::query_as(
+        "SELECT COUNT(*) FROM upload WHERE event_id = $1 AND deleted_at IS NULL",
+    )
+    .bind(event.id)
+    .fetch_one(&state.pool)
+    .await?;
+
+    let (comment_count,): (i64,) = sqlx::query_as(
+        "SELECT COUNT(*) FROM comment c
+         JOIN upload u ON u.id = c.upload_id
+         WHERE u.event_id = $1 AND c.deleted_at IS NULL",
+    )
+    .bind(event.id)
+    .fetch_one(&state.pool)
+    .await?;
+
+    // Disk usage via sysinfo
+    let mut sys = System::new();
+    sys.refresh_all();
+
+    let media_path = state.config.media_path.to_string_lossy().to_string();
+    let (disk_total, disk_free) = sysinfo::Disks::new_with_refreshed_list()
+        .iter()
+        .find(|d| media_path.starts_with(d.mount_point().to_string_lossy().as_ref()))
+        .map(|d| (d.total_space(), d.available_space()))
+        .unwrap_or_else(|| {
+            // Fall back to the root disk
+            sysinfo::Disks::new_with_refreshed_list()
+                .iter()
+                .find(|d| d.mount_point().to_string_lossy() == "/")
+                .map(|d| (d.total_space(), d.available_space()))
+                .unwrap_or((0, 0))
+        });
+
+    let disk_used = disk_total.saturating_sub(disk_free);
+
+    Ok(Json(StatsDto {
+        user_count,
+        upload_count,
+        comment_count,
+        disk_total_bytes: disk_total,
+        disk_used_bytes: disk_used,
+        disk_free_bytes: disk_free,
+    }))
+}
+
+pub async fn get_config(
+    State(state): State<AppState>,
+    RequireAdmin(_auth): RequireAdmin,
+) -> Result<Json<HashMap<String, String>>, AppError> {
+    let rows: Vec<(String, String)> =
+        sqlx::query_as("SELECT key, value FROM config ORDER BY key")
+            .fetch_all(&state.pool)
+            .await?;
+
+    Ok(Json(rows.into_iter().collect()))
+}
+
+#[derive(Deserialize)]
+pub struct PatchConfigRequest(pub HashMap<String, String>);
+
+pub async fn patch_config(
+    State(state): State<AppState>,
+    RequireAdmin(_auth): RequireAdmin,
+    Json(body): Json<HashMap<String, String>>,
+) -> Result<StatusCode, AppError> {
+    const ALLOWED_KEYS: &[&str] = &[
+        "max_image_size_mb",
+        "max_video_size_mb",
+        "upload_rate_per_hour",
+        "feed_rate_per_min",
+        "export_rate_per_day",
+        "quota_tolerance",
+        "estimated_guest_count",
+        "compression_concurrency",
+    ];
+
+    for (key, value) in &body {
+        if !ALLOWED_KEYS.contains(&key.as_str()) {
+            return Err(AppError::BadRequest(format!("Unbekannter Konfigurationsschlüssel: {key}")));
+        }
+        // Validate numeric values
+        if value.parse::<f64>().is_err() {
+            return Err(AppError::BadRequest(format!("Ungültiger Wert für {key}: muss eine Zahl sein.")));
+        }
+        sqlx::query(
+            "INSERT INTO config (key, value, updated_at) VALUES ($1, $2, NOW())
+             ON CONFLICT (key) DO UPDATE SET value = EXCLUDED.value, updated_at = NOW()",
+        )
+        .bind(key)
+        .bind(value)
+        .execute(&state.pool)
+        .await?;
+    }
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
+pub async fn get_export_jobs(
+    State(state): State<AppState>,
+    RequireAdmin(_auth): RequireAdmin,
+) -> Result<Json<Vec<ExportJobDto>>, AppError> {
+    let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    let jobs = sqlx::query_as::<_, ExportJobDto>(
+        "SELECT id, type::text, status::text, progress_pct, error_message, created_at, completed_at
+         FROM export_job
+         WHERE event_id = $1
+         ORDER BY created_at DESC",
+    )
+    .bind(event.id)
+    .fetch_all(&state.pool)
+    .await?;
+
+    Ok(Json(jobs))
+}
+
+/// Also expose export status to all authenticated users (guests need it for the export page)
+pub async fn export_status(
+    State(state): State<AppState>,
+    _auth: crate::auth::middleware::AuthUser,
+) -> Result<Json<serde_json::Value>, AppError> {
+    let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
+        .await?
+        .ok_or_else(|| AppError::NotFound("Event nicht gefunden.".into()))?;
+
+    let released = event.export_released_at.is_some();
+
+    let jobs: Vec<(String, String, i16)> = sqlx::query_as(
+        "SELECT type::text, status::text, progress_pct FROM export_job WHERE event_id = $1",
+    )
+    .bind(event.id)
+    .fetch_all(&state.pool)
+    .await?;
+
+    let job_status = |type_name: &str| {
+        jobs.iter()
+            .find(|(t, _, _)| t == type_name)
+            .map(|(_, status, pct)| {
+                serde_json::json!({ "status": status, "progress_pct": pct })
+            })
+            .unwrap_or_else(|| serde_json::json!({ "status": "locked", "progress_pct": 0 }))
+    };
+
+    Ok(Json(serde_json::json!({
+        "released": released,
+        "zip": job_status("zip"),
+        "html": job_status("html"),
+    })))
+}

backend/src/handlers/host.rs

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

backend/src/handlers/mod.rs

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

backend/src/main.rs

@@ -58,7 +58,27 @@ async fn main() -> Result<()> {
         )
         .route("/api/v1/comment/{id}", delete(handlers::social::delete_comment))
         // SSE
-        .route("/api/v1/stream", get(handlers::sse::stream));
+        .route("/api/v1/stream", get(handlers::sse::stream))
+        // Host Dashboard
+        .route("/api/v1/host/event", get(handlers::host::get_event_status))
+        .route("/api/v1/host/event/close", post(handlers::host::close_event))
+        .route("/api/v1/host/event/open", post(handlers::host::open_event))
+        .route("/api/v1/host/gallery/release", post(handlers::host::release_gallery))
+        .route("/api/v1/host/users", get(handlers::host::list_users))
+        .route("/api/v1/host/users/{id}/ban", post(handlers::host::ban_user))
+        .route("/api/v1/host/users/{id}/unban", post(handlers::host::unban_user))
+        .route("/api/v1/host/users/{id}/role", patch(handlers::host::set_role))
+        .route("/api/v1/host/upload/{id}", delete(handlers::host::host_delete_upload))
+        .route("/api/v1/host/comment/{id}", delete(handlers::host::host_delete_comment))
+        // Export status (all authenticated users)
+        .route("/api/v1/export/status", get(handlers::admin::export_status))
+        // Admin Dashboard
+        .route("/api/v1/admin/stats", get(handlers::admin::get_stats))
+        .route(
+            "/api/v1/admin/config",
+            get(handlers::admin::get_config).patch(handlers::admin::patch_config),
+        )
+        .route("/api/v1/admin/export/jobs", get(handlers::admin::get_export_jobs));
 
     // Serve media files from disk
     let media_service = ServeDir::new(&config.media_path);

frontend/src/lib/auth.ts

@@ -38,6 +38,17 @@ export function clearAuth(): void {
 	isAuthenticated.set(false);
 }
 
+export function getRole(): 'guest' | 'host' | 'admin' | null {
+	const token = getToken();
+	if (!token) return null;
+	try {
+		const payload = JSON.parse(atob(token.split('.')[1]));
+		return payload.role ?? null;
+	} catch {
+		return null;
+	}
+}
+
 export function initAuth(): void {
 	if (!browser) return;
 	isAuthenticated.set(!!getToken());

frontend/src/lib/components/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/routes/admin/+page.svelte

@@ -0,0 +1,266 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken, getRole } from '$lib/auth';
+	import { api } from '$lib/api';
+	import { onMount } from 'svelte';
+
+	interface StatsDto {
+		user_count: number;
+		upload_count: number;
+		comment_count: number;
+		disk_total_bytes: number;
+		disk_used_bytes: number;
+		disk_free_bytes: number;
+	}
+
+	interface ExportJob {
+		id: string;
+		type: string;
+		status: string;
+		progress_pct: number;
+		error_message: string | null;
+		created_at: string;
+		completed_at: string | null;
+	}
+
+	const CONFIG_LABELS: Record<string, string> = {
+		max_image_size_mb: 'Max. Bildgröße (MB)',
+		max_video_size_mb: 'Max. Videogröße (MB)',
+		upload_rate_per_hour: 'Upload-Limit pro Stunde',
+		feed_rate_per_min: 'Feed-Anfragen pro Minute',
+		export_rate_per_day: 'Export-Downloads pro Tag',
+		quota_tolerance: 'Speicherkontingent-Toleranz (0–1)',
+		estimated_guest_count: 'Geschätzte Gästezahl',
+		compression_concurrency: 'Kompressions-Worker'
+	};
+
+	let stats = $state<StatsDto | null>(null);
+	let config = $state<Record<string, string>>({});
+	let configDraft = $state<Record<string, string>>({});
+	let exportJobs = $state<ExportJob[]>([]);
+	let loading = $state(true);
+	let saving = $state(false);
+	let error = $state<string | null>(null);
+	let toast = $state<string | null>(null);
+
+	onMount(async () => {
+		const token = getToken();
+		const role = getRole();
+		if (!token || role !== 'admin') {
+			goto('/join');
+			return;
+		}
+		await reload();
+	});
+
+	async function reload() {
+		loading = true;
+		error = null;
+		try {
+			[stats, config, exportJobs] = await Promise.all([
+				api.get<StatsDto>('/admin/stats'),
+				api.get<Record<string, string>>('/admin/config'),
+				api.get<ExportJob[]>('/admin/export/jobs')
+			]);
+			configDraft = { ...config };
+		} catch (e: unknown) {
+			error = e instanceof Error ? e.message : 'Fehler beim Laden.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function showToast(msg: string) {
+		toast = msg;
+		setTimeout(() => (toast = null), 3000);
+	}
+
+	async function saveConfig() {
+		saving = true;
+		try {
+			// Only send changed values
+			const changes: Record<string, string> = {};
+			for (const key of Object.keys(configDraft)) {
+				if (configDraft[key] !== config[key]) {
+					changes[key] = configDraft[key];
+				}
+			}
+			if (Object.keys(changes).length === 0) {
+				showToast('Keine Änderungen.');
+				return;
+			}
+			await api.patch('/admin/config', changes);
+			config = { ...configDraft };
+			showToast('Konfiguration gespeichert.');
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler beim Speichern.');
+		} finally {
+			saving = false;
+		}
+	}
+
+	function formatBytes(bytes: number): string {
+		if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
+		if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+		return `${(bytes / 1024).toFixed(1)} KB`;
+	}
+
+	function diskPct(stats: StatsDto): number {
+		if (stats.disk_total_bytes === 0) return 0;
+		return Math.round((stats.disk_used_bytes / stats.disk_total_bytes) * 100);
+	}
+
+	function jobLabel(type: string): string {
+		return type === 'zip' ? 'ZIP-Archiv' : 'HTML-Viewer';
+	}
+
+	function statusBadgeClass(status: string): string {
+		switch (status) {
+			case 'done': return 'bg-green-100 text-green-700';
+			case 'running': return 'bg-blue-100 text-blue-700';
+			case 'failed': return 'bg-red-100 text-red-700';
+			default: return 'bg-gray-100 text-gray-600';
+		}
+	}
+
+	function statusLabel(status: string): string {
+		switch (status) {
+			case 'pending': return 'Ausstehend';
+			case 'running': return 'Läuft';
+			case 'done': return 'Fertig';
+			case 'failed': return 'Fehlgeschlagen';
+			default: return status;
+		}
+	}
+</script>
+
+<!-- Toast -->
+{#if toast}
+	<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
+		{toast}
+	</div>
+{/if}
+
+<div class="min-h-screen bg-gray-50">
+	<!-- Header -->
+	<div class="border-b border-gray-200 bg-white">
+		<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
+			<h1 class="text-xl font-bold text-gray-900">Admin Dashboard</h1>
+			<div class="flex items-center gap-3">
+				<a href="/host" class="text-sm text-blue-600 hover:underline">Host-Dashboard</a>
+				<a href="/feed" class="text-sm text-gray-500 hover:text-gray-700">Galerie</a>
+			</div>
+		</div>
+	</div>
+
+	<div class="mx-auto max-w-3xl space-y-4 p-4">
+		{#if loading}
+			<div class="py-16 text-center text-gray-400">Laden…</div>
+		{:else if error}
+			<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
+		{:else}
+			<!-- Stats -->
+			{#if stats}
+				<div class="rounded-xl border border-gray-200 bg-white p-5">
+					<h2 class="mb-4 font-semibold text-gray-900">Statistiken</h2>
+					<div class="grid grid-cols-3 gap-4 text-center">
+						<div class="rounded-lg bg-gray-50 p-3">
+							<p class="text-2xl font-bold text-gray-900">{stats.user_count}</p>
+							<p class="text-xs text-gray-500">Gäste</p>
+						</div>
+						<div class="rounded-lg bg-gray-50 p-3">
+							<p class="text-2xl font-bold text-gray-900">{stats.upload_count}</p>
+							<p class="text-xs text-gray-500">Uploads</p>
+						</div>
+						<div class="rounded-lg bg-gray-50 p-3">
+							<p class="text-2xl font-bold text-gray-900">{stats.comment_count}</p>
+							<p class="text-xs text-gray-500">Kommentare</p>
+						</div>
+					</div>
+
+					<!-- Disk usage -->
+					<div class="mt-4">
+						<div class="mb-1 flex items-center justify-between text-xs text-gray-500">
+							<span>Speicher</span>
+							<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)} ({diskPct(stats)} %)</span>
+						</div>
+						<div class="h-2 overflow-hidden rounded-full bg-gray-200">
+							<div
+								class="h-full rounded-full transition-all {diskPct(stats) >= 90 ? 'bg-red-500' : diskPct(stats) >= 75 ? 'bg-amber-500' : 'bg-blue-500'}"
+								style="width: {diskPct(stats)}%"
+							></div>
+						</div>
+						<p class="mt-1 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
+					</div>
+				</div>
+			{/if}
+
+			<!-- Config -->
+			<div class="rounded-xl border border-gray-200 bg-white p-5">
+				<h2 class="mb-4 font-semibold text-gray-900">Konfiguration</h2>
+				<div class="space-y-3">
+					{#each Object.entries(CONFIG_LABELS) as [key, label]}
+						<div class="flex items-center gap-3">
+							<label for={key} class="w-56 shrink-0 text-sm text-gray-700">{label}</label>
+							<input
+								id={key}
+								type="number"
+								step="any"
+								bind:value={configDraft[key]}
+								class="w-32 rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
+							/>
+						</div>
+					{/each}
+				</div>
+				<button
+					onclick={saveConfig}
+					disabled={saving}
+					class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
+				>
+					{saving ? 'Wird gespeichert…' : 'Speichern'}
+				</button>
+			</div>
+
+			<!-- Export jobs -->
+			<div class="rounded-xl border border-gray-200 bg-white p-5">
+				<div class="mb-4 flex items-center justify-between">
+					<h2 class="font-semibold text-gray-900">Export-Jobs</h2>
+					<button onclick={reload} class="text-xs text-blue-600 hover:underline">Aktualisieren</button>
+				</div>
+				{#if exportJobs.length === 0}
+					<p class="text-sm text-gray-400">Noch keine Export-Jobs.</p>
+				{:else}
+					<div class="space-y-3">
+						{#each exportJobs as job}
+							<div class="rounded-lg border border-gray-100 p-3">
+								<div class="flex items-center justify-between">
+									<span class="text-sm font-medium text-gray-900">{jobLabel(job.type)}</span>
+									<span class="rounded-full px-2 py-0.5 text-xs font-medium {statusBadgeClass(job.status)}">
+										{statusLabel(job.status)}
+									</span>
+								</div>
+								{#if job.status === 'running'}
+									<div class="mt-2">
+										<div class="mb-1 flex justify-between text-xs text-gray-500">
+											<span>Fortschritt</span>
+											<span>{job.progress_pct} %</span>
+										</div>
+										<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
+											<div
+												class="h-full rounded-full bg-blue-500 transition-all"
+												style="width: {job.progress_pct}%"
+											></div>
+										</div>
+									</div>
+								{/if}
+								{#if job.error_message}
+									<p class="mt-1 text-xs text-red-600">{job.error_message}</p>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,318 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { getToken, getRole } from '$lib/auth';
+	import { api } from '$lib/api';
+	import { onMount } from 'svelte';
+
+	interface UserSummary {
+		id: string;
+		display_name: string;
+		role: string;
+		is_banned: boolean;
+		uploads_hidden: boolean;
+		upload_count: number;
+		total_upload_bytes: number;
+		created_at: string;
+	}
+
+	interface EventStatus {
+		name: string;
+		is_active: boolean;
+		uploads_locked: boolean;
+		export_released: boolean;
+	}
+
+	let event = $state<EventStatus | null>(null);
+	let users = $state<UserSummary[]>([]);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	// Ban modal state
+	let banTarget = $state<UserSummary | null>(null);
+	let banHideUploads = $state(false);
+	let banSubmitting = $state(false);
+
+	// Toast state
+	let toast = $state<string | null>(null);
+
+	onMount(async () => {
+		const token = getToken();
+		const role = getRole();
+		if (!token || (role !== 'host' && role !== 'admin')) {
+			goto('/join');
+			return;
+		}
+		await reload();
+	});
+
+	async function reload() {
+		loading = true;
+		error = null;
+		try {
+			[event, users] = await Promise.all([
+				api.get<EventStatus>('/host/event'),
+				api.get<UserSummary[]>('/host/users')
+			]);
+		} catch (e: unknown) {
+			error = e instanceof Error ? e.message : 'Fehler beim Laden.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function showToast(msg: string) {
+		toast = msg;
+		setTimeout(() => (toast = null), 3000);
+	}
+
+	async function toggleEventLock() {
+		if (!event) return;
+		try {
+			if (event.uploads_locked) {
+				await api.post('/host/event/open');
+				showToast('Uploads wurden wieder geöffnet.');
+			} else {
+				await api.post('/host/event/close');
+				showToast('Uploads wurden gesperrt.');
+			}
+			await reload();
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	async function releaseGallery() {
+		try {
+			await api.post('/host/gallery/release');
+			showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
+			await reload();
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	function openBanModal(user: UserSummary) {
+		banTarget = user;
+		banHideUploads = false;
+	}
+
+	async function confirmBan() {
+		if (!banTarget) return;
+		banSubmitting = true;
+		try {
+			await api.post(`/host/users/${banTarget.id}/ban`, { hide_uploads: banHideUploads });
+			showToast(`${banTarget.display_name} wurde gesperrt.`);
+			banTarget = null;
+			await reload();
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		} finally {
+			banSubmitting = false;
+		}
+	}
+
+	async function unban(user: UserSummary) {
+		try {
+			await api.post(`/host/users/${user.id}/unban`);
+			showToast(`Sperre für ${user.display_name} aufgehoben.`);
+			await reload();
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	async function promoteToHost(user: UserSummary) {
+		try {
+			await api.patch(`/host/users/${user.id}/role`, { role: 'host' });
+			showToast(`${user.display_name} ist jetzt Host.`);
+			await reload();
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	async function demoteToGuest(user: UserSummary) {
+		try {
+			await api.patch(`/host/users/${user.id}/role`, { role: 'guest' });
+			showToast(`${user.display_name} ist jetzt Gast.`);
+			await reload();
+		} catch (e: unknown) {
+			showToast(e instanceof Error ? e.message : 'Fehler.');
+		}
+	}
+
+	function formatBytes(bytes: number): string {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	}
+
+	const myRole = getRole();
+</script>
+
+<!-- Ban modal -->
+{#if banTarget}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+		<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
+			<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
+			<p class="mb-4 text-sm text-gray-600">
+				Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
+			</p>
+			<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
+				<input
+					type="checkbox"
+					bind:checked={banHideUploads}
+					class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500"
+				/>
+				<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
+			</label>
+			<div class="flex gap-2">
+				<button
+					onclick={() => (banTarget = null)}
+					class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50"
+				>
+					Abbrechen
+				</button>
+				<button
+					onclick={confirmBan}
+					disabled={banSubmitting}
+					class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50"
+				>
+					{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<!-- Toast -->
+{#if toast}
+	<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
+		{toast}
+	</div>
+{/if}
+
+<div class="min-h-screen bg-gray-50">
+	<!-- Header -->
+	<div class="border-b border-gray-200 bg-white">
+		<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
+			<div>
+				<h1 class="text-xl font-bold text-gray-900">Host Dashboard</h1>
+				{#if event}
+					<p class="text-sm text-gray-500">{event.name}</p>
+				{/if}
+			</div>
+			<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
+		</div>
+	</div>
+
+	<div class="mx-auto max-w-3xl space-y-4 p-4">
+		{#if loading}
+			<div class="py-16 text-center text-gray-400">Laden…</div>
+		{:else if error}
+			<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
+		{:else if event}
+			<!-- Event controls -->
+			<div class="rounded-xl border border-gray-200 bg-white p-5">
+				<h2 class="mb-4 font-semibold text-gray-900">Veranstaltung</h2>
+				<div class="flex flex-wrap gap-3">
+					<button
+						onclick={toggleEventLock}
+						class="rounded-lg px-4 py-2 text-sm font-medium {event.uploads_locked
+							? 'bg-green-600 text-white hover:bg-green-700'
+							: 'bg-amber-500 text-white hover:bg-amber-600'}"
+					>
+						{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
+					</button>
+					<button
+						onclick={releaseGallery}
+						disabled={event.export_released}
+						class="rounded-lg px-4 py-2 text-sm font-medium {event.export_released
+							? 'cursor-default bg-gray-100 text-gray-400'
+							: 'bg-blue-600 text-white hover:bg-blue-700'}"
+					>
+						{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
+					</button>
+				</div>
+				<div class="mt-3 flex gap-4 text-xs text-gray-500">
+					<span class="flex items-center gap-1">
+						<span class="h-2 w-2 rounded-full {event.uploads_locked ? 'bg-red-500' : 'bg-green-500'}"></span>
+						Uploads {event.uploads_locked ? 'gesperrt' : 'offen'}
+					</span>
+					<span class="flex items-center gap-1">
+						<span class="h-2 w-2 rounded-full {event.export_released ? 'bg-blue-500' : 'bg-gray-300'}"></span>
+						Export {event.export_released ? 'freigegeben' : 'gesperrt'}
+					</span>
+				</div>
+			</div>
+
+			<!-- User management -->
+			<div class="rounded-xl border border-gray-200 bg-white">
+				<div class="border-b border-gray-100 px-5 py-4">
+					<h2 class="font-semibold text-gray-900">Gäste ({users.length})</h2>
+				</div>
+				{#if users.length === 0}
+					<p class="px-5 py-8 text-center text-sm text-gray-400">Noch keine Gäste.</p>
+				{:else}
+					<div class="divide-y divide-gray-100">
+						{#each users as user}
+							<div class="flex items-center gap-3 px-5 py-3">
+								<div class="min-w-0 flex-1">
+									<div class="flex items-center gap-2">
+										<span class="truncate font-medium text-gray-900">{user.display_name}</span>
+										{#if user.role === 'host'}
+											<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
+										{:else if user.role === 'admin'}
+											<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
+										{/if}
+										{#if user.is_banned}
+											<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
+										{/if}
+									</div>
+									<p class="text-xs text-gray-400">
+										{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
+									</p>
+								</div>
+								<div class="flex shrink-0 gap-1.5">
+									{#if user.role !== 'admin'}
+										{#if user.is_banned}
+											<button
+												onclick={() => unban(user)}
+												class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
+											>
+												Entsperren
+											</button>
+										{:else}
+											{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
+												<button
+													onclick={() => promoteToHost(user)}
+													class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
+												>
+													Host
+												</button>
+											{/if}
+											{#if user.role === 'host' && myRole === 'admin'}
+												<button
+													onclick={() => demoteToGuest(user)}
+													class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200"
+												>
+													Degradieren
+												</button>
+											{/if}
+											<button
+												onclick={() => openBanModal(user)}
+												class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100"
+											>
+												Sperren
+											</button>
+										{/if}
+									{/if}
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -3,11 +3,13 @@
 	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()) {
@@ -30,8 +32,23 @@
 		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">
@@ -40,23 +57,39 @@
 		</div>
 
 		<div class="rounded-lg border border-gray-200 bg-white p-4">
-			<label
+			<div class="grid grid-cols-2 gap-3">
-				class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 transition hover:border-blue-400 hover:bg-blue-50"
+				<!-- File picker -->
-			>
+				<label
-				<svg class="mb-2 h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					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"
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 16V4m0 0l-4 4m4-4l4 4M4 20h16" />
+				>
-				</svg>
+					<svg class="mb-2 h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-				<span class="text-sm font-medium text-gray-600">Fotos oder Videos auswählen</span>
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 16V4m0 0l-4 4m4-4l4 4M4 20h16" />
-				<span class="mt-1 text-xs text-gray-400">Mehrere Dateien möglich</span>
+					</svg>
-				<input
+					<span class="text-center text-sm font-medium text-gray-600">Galerie</span>
-					bind:this={fileInput}
+					<span class="mt-1 text-center text-xs text-gray-400">Mehrere Dateien</span>
-					type="file"
+					<input
-					accept="image/*,video/*"
+						bind:this={fileInput}
-					multiple
+						type="file"
-					class="hidden"
+						accept="image/*,video/*"
-					onchange={handleFiles}
+						multiple
-				/>
+						class="hidden"
-			</label>
+						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