fix: update export page guide text for new viewer

Change "Memories.html" to "index.html" in the HTML export download guide modal. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
feat: replace HTML export with SvelteKit viewer
2026-04-06 21:26:06 +02:00 · 2026-04-06 21:26:03 +02:00 · 2026-04-06 21:01:08 +02:00 · 2026-04-06 21:01:01 +02:00
34 changed files with 3208 additions and 612 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,8 @@ backend/target/
 frontend/node_modules/
 frontend/.svelte-kit/
 frontend/build/
+frontend/export-viewer/node_modules/
+frontend/export-viewer/.svelte-kit/

 # Media uploads (mounted volume in production)
 media/
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -896,8 +896,8 @@ dependencies = [
 "dotenvy",
 "futures",
 "image",
+ "include_dir",
 "jsonwebtoken",
- "minijinja",
 "oxipng",
 "rand 0.9.2",
 "serde",
@@ -1577,6 +1577,25 @@ version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e7c5cedc30da3a610cac6b4ba17597bdf7152cf974e8aab3afb3d54455e371c8"

+[[package]]
+name = "include_dir"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "923d117408f1e49d914f1a379a309cffe4f18c05cf4e3d12e613a15fc81bd0dd"
+dependencies = [
+ "include_dir_macros",
+]
+
+[[package]]
+name = "include_dir_macros"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7cab85a7ed0bd5f0e76d93846e0147172bed2e2d3f859bcc33a8d9699cad1a75"
+dependencies = [
+ "proc-macro2",
+ "quote",
+]
+
 [[package]]
 name = "indexmap"
 version = "2.13.0"
@@ -1832,12 +1851,6 @@ version = "2.8.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f8ca58f447f06ed17d5fc4043ce1b10dd205e060fb3ce5b979b8ed8e59ff3f79"

-[[package]]
-name = "memo-map"
-version = "0.3.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "38d1115007560874e373613744c6fba374c17688327a71c1476d1a5954cc857b"
-
 [[package]]
 name = "mime"
 version = "0.3.17"
@@ -1854,16 +1867,6 @@ dependencies = [
 "unicase",
 ]

-[[package]]
-name = "minijinja"
-version = "2.18.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "328251e58ad8e415be6198888fc207502727dc77945806421ab34f35bf012e7d"
-dependencies = [
- "memo-map",
- "serde",
-]
-
 [[package]]
 name = "miniz_oxide"
 version = "0.8.9"
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -29,7 +29,7 @@ sysinfo = "0.32"
 image = "0.25"
 oxipng = "9"
 async_zip = { version = "0.0.17", features = ["tokio", "deflate"] }
-minijinja = { version = "2", features = ["json"] }
+include_dir = "0.7"

 [profile.release]
 opt-level = 3
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -11,6 +11,7 @@ RUN mkdir src && echo "fn main(){}" > src/main.rs && \
    rm -rf src

 COPY src ./src
+COPY static ./static
 RUN touch src/main.rs && cargo build --release

 # --- Runtime stage ---
--- a/backend/src/services/export.rs
+++ b/backend/src/services/export.rs
@@ -5,6 +5,7 @@ use async_zip::tokio::write::ZipFileWriter;
 use async_zip::{Compression, ZipEntryBuilder};
 use chrono::{DateTime, Utc};
 use futures::io::{copy as fcopy, AllowStdIo};
+use include_dir::{include_dir, Dir};
 use serde::Serialize;
 use sqlx::PgPool;
 use tokio::sync::broadcast;
@@ -13,6 +14,10 @@ use uuid::Uuid;

 use crate::state::SseEvent;

+// ── Embedded viewer assets (pre-built SvelteKit static output) ──────────────
+
+static VIEWER_DIR: Dir<'_> = include_dir!("$CARGO_MANIFEST_DIR/static/export-viewer");
+
 // ── DB query rows ────────────────────────────────────────────────────────────

 #[derive(sqlx::FromRow)]
@@ -34,26 +39,45 @@ struct ExportCommentRow {
    created_at: DateTime<Utc>,
 }

-// ── Template context structs ─────────────────────────────────────────────────
+// ── Viewer JSON structs (serialised to data.json) ───────────────────────────

 #[derive(Serialize)]
-struct TmplComment {
-    uploader_name: String,
-    body: String,
-    created_at: String,
+struct ViewerData {
+    event: ViewerEvent,
+    posts: Vec<ViewerPost>,
 }

 #[derive(Serialize)]
-struct TmplUpload {
+struct ViewerEvent {
+    name: String,
+    exported_at: String,
+}
+
+#[derive(Serialize)]
+struct ViewerPost {
    id: String,
-    path: String,
-    is_video: bool,
+    uploader: String,
    caption: String,
-    uploader_name: String,
-    like_count: i64,
-    created_at: String,
-    comments: Vec<TmplComment>,
-    hashtags: Vec<String>,
+    tags: Vec<String>,
+    timestamp: String,
+    likes: i64,
+    comments: Vec<ViewerComment>,
+    media: ViewerMedia,
+}
+
+#[derive(Serialize)]
+struct ViewerComment {
+    author: String,
+    text: String,
+    timestamp: String,
+}
+
+#[derive(Serialize)]
+struct ViewerMedia {
+    #[serde(rename = "type")]
+    media_type: String,
+    thumb: String,
+    full: String,
 }

 // ── Entry point ──────────────────────────────────────────────────────────────
@@ -162,7 +186,7 @@ async fn run_zip_export(
    Ok(())
 }

-// ── HTML export ──────────────────────────────────────────────────────────────
+// ── HTML viewer export ──────────────────────────────────────────────────────

 async fn run_html_export(
    event_id: Uuid,
@@ -173,70 +197,180 @@ async fn run_html_export(
 ) -> Result<()> {
    mark_running(pool, event_id, "html").await;

+    // 1. Query data
    let uploads = query_uploads(pool, event_id).await?;
    let comments = query_comments(pool, event_id).await?;
    let hashtags_per_upload = query_hashtags(pool, event_id).await?;
    let total = uploads.len().max(1) as f32;

+    update_progress(pool, event_id, "html", 5).await;
+
    let exports_dir = media_path.join("exports");
    tokio::fs::create_dir_all(&exports_dir).await?;

-    // Build template context
-    let mut tmpl_uploads: Vec<TmplUpload> = Vec::new();
-    for (i, row) in uploads.iter().enumerate() {
-        let ext = ext_from_path(&row.original_path);
-        let date_str = row.created_at.format("%Y-%m-%d_%H-%M").to_string();
-        let name_safe = sanitize_name(&row.uploader_name);
-        let folder = if row.mime_type.starts_with("video/") { "Videos" } else { "Photos" };
-        let filename = format!("{date_str}_{name_safe}_{}.{ext}", row.id);
+    // 2. Create temp directory for media processing
+    let tmp_dir = exports_dir.join(format!("viewer_tmp_{event_id}"));
+    let media_tmp = tmp_dir.join("media");
+    tokio::fs::create_dir_all(&media_tmp).await?;

-        let upload_comments: Vec<TmplComment> = comments
+    // 3. Process media and build post data
+    let mut viewer_posts: Vec<ViewerPost> = Vec::new();
+
+    for (i, row) in uploads.iter().enumerate() {
+        let src = media_path.join(&row.original_path);
+        if !src.exists() {
+            continue;
+        }
+
+        let is_video = row.mime_type.starts_with("video/");
+        let id_str = row.id.to_string();
+
+        // Generate thumbnail and full variant
+        let (thumb_name, full_name) = if is_video {
+            let thumb = format!("{id_str}_thumb.jpg");
+            let full_ext = ext_from_path(&row.original_path);
+            let full = format!("{id_str}.{full_ext}");
+
+            // Video thumbnail via ffmpeg
+            let thumb_path = media_tmp.join(&thumb);
+            let ffmpeg_result = tokio::process::Command::new("ffmpeg")
+                .args([
+                    "-i",
+                    src.to_str().unwrap_or_default(),
+                    "-vframes",
+                    "1",
+                    "-ss",
+                    "00:00:01",
+                    "-vf",
+                    "scale=400:-1",
+                    "-y",
+                    thumb_path.to_str().unwrap_or_default(),
+                ])
+                .output()
+                .await;
+
+            match ffmpeg_result {
+                Ok(output) if output.status.success() => {}
+                _ => {
+                    tracing::warn!("ffmpeg thumbnail failed for upload {}, skipping thumb", row.id);
+                    // Create empty thumb entry — viewer handles missing thumbs gracefully
+                }
+            }
+
+            // Copy video as-is
+            tokio::fs::copy(&src, media_tmp.join(&full)).await?;
+
+            (thumb, full)
+        } else {
+            let thumb = format!("{id_str}_thumb.jpg");
+            let ext = ext_from_path(&row.original_path);
+            let full = format!("{id_str}_full.{ext}");
+
+            // Image thumbnail: resize to 400px wide
+            let src_clone = src.clone();
+            let thumb_path = media_tmp.join(&thumb);
+            let thumb_path_clone = thumb_path.clone();
+
+            let thumb_result = tokio::task::spawn_blocking(move || -> Result<()> {
+                let img = image::open(&src_clone).context("failed to open image for thumbnail")?;
+                let resized = img.resize(400, 400, image::imageops::FilterType::Lanczos3);
+                resized
+                    .save_with_format(&thumb_path_clone, image::ImageFormat::Jpeg)
+                    .context("failed to save thumbnail")?;
+                Ok(())
+            })
+            .await?;
+
+            if let Err(e) = thumb_result {
+                tracing::warn!("thumbnail generation failed for upload {}: {e:#}", row.id);
+            }
+
+            // Full variant: compress if >5MB, otherwise copy original
+            let src_meta = tokio::fs::metadata(&src).await?;
+            let full_path = media_tmp.join(&full);
+
+            if src_meta.len() > 5_000_000 {
+                // Resize to max 2000px
+                let src_clone = src.clone();
+                let full_path_clone = full_path.clone();
+
+                let compress_result = tokio::task::spawn_blocking(move || -> Result<()> {
+                    let img =
+                        image::open(&src_clone).context("failed to open image for compression")?;
+                    let resized = img.resize(2000, 2000, image::imageops::FilterType::Lanczos3);
+                    resized
+                        .save_with_format(&full_path_clone, image::ImageFormat::Jpeg)
+                        .context("failed to save compressed full image")?;
+                    Ok(())
+                })
+                .await?;
+
+                if let Err(e) = compress_result {
+                    tracing::warn!("compression failed for upload {}, copying original: {e:#}", row.id);
+                    tokio::fs::copy(&src, &full_path).await?;
+                }
+            } else {
+                tokio::fs::copy(&src, &full_path).await?;
+            }
+
+            (thumb, full)
+        };
+
+        // Build comments for this upload
+        let post_comments: Vec<ViewerComment> = comments
            .iter()
            .filter(|c| c.upload_id == row.id)
-            .map(|c| TmplComment {
-                uploader_name: c.uploader_name.clone(),
-                body: c.body.clone(),
-                created_at: c.created_at.format("%d.%m.%Y %H:%M").to_string(),
+            .map(|c| ViewerComment {
+                author: c.uploader_name.clone(),
+                text: c.body.clone(),
+                timestamp: c.created_at.to_rfc3339(),
            })
            .collect();

+        // Build tags for this upload
        let tags: Vec<String> = hashtags_per_upload
            .iter()
            .filter(|(uid, _)| *uid == row.id)
            .map(|(_, tag)| tag.clone())
            .collect();

-        tmpl_uploads.push(TmplUpload {
-            id: row.id.to_string(),
-            path: format!("{folder}/{filename}"),
-            is_video: row.mime_type.starts_with("video/"),
+        viewer_posts.push(ViewerPost {
+            id: id_str,
+            uploader: row.uploader_name.clone(),
            caption: row.caption.clone().unwrap_or_default(),
-            uploader_name: row.uploader_name.clone(),
-            like_count: row.like_count,
-            created_at: row.created_at.format("%d.%m.%Y %H:%M").to_string(),
-            comments: upload_comments,
-            hashtags: tags,
+            tags,
+            timestamp: row.created_at.to_rfc3339(),
+            likes: row.like_count,
+            comments: post_comments,
+            media: ViewerMedia {
+                media_type: if is_video {
+                    "video".to_string()
+                } else {
+                    "image".to_string()
+                },
+                thumb: format!("media/{thumb_name}"),
+                full: format!("media/{full_name}"),
+            },
        });

-        let pct = ((i + 1) as f32 / total * 50.0) as i16;
-        update_progress(pool, event_id, "html", pct.min(49)).await;
+        let pct = 10 + ((i + 1) as f32 / total * 60.0) as i16;
+        update_progress(pool, event_id, "html", pct.min(69)).await;
    }

-    // Render HTML
-    let mut env = minijinja::Environment::new();
-    env.add_template("memories", MEMORIES_TEMPLATE)
-        .context("template compile error")?;
-    let tmpl = env.get_template("memories").unwrap();
-    let html = tmpl
-        .render(minijinja::context!(
-            event_name => event_name,
-            uploads => minijinja::Value::from_serialize(&tmpl_uploads),
-            generated_at => Utc::now().format("%d.%m.%Y").to_string(),
-        ))
-        .context("template render error")?;
+    // 4. Build data.json
+    let viewer_data = ViewerData {
+        event: ViewerEvent {
+            name: event_name.to_string(),
+            exported_at: Utc::now().to_rfc3339(),
+        },
+        posts: viewer_posts,
+    };
+    let data_json =
+        serde_json::to_string_pretty(&viewer_data).context("failed to serialize data.json")?;

-    update_progress(pool, event_id, "html", 55).await;
+    update_progress(pool, event_id, "html", 72).await;

+    // 5. Create ZIP
    let tmp_path = exports_dir.join("Memories.zip.tmp");
    let out_path = exports_dir.join("Memories.zip");

@@ -244,56 +378,69 @@ async fn run_html_export(
        let file = tokio::fs::File::create(&tmp_path).await?;
        let mut zip = ZipFileWriter::with_tokio(file);

-        // Memories.html
+        // Write embedded viewer assets (index.html, _app/*, etc.)
+        write_dir_to_zip(&VIEWER_DIR, &mut zip).await?;
+
+        update_progress(pool, event_id, "html", 75).await;
+
+        // Write data.json
        {
-            let builder =
-                ZipEntryBuilder::new("Memories/Memories.html".into(), Compression::Deflate);
+            let builder = ZipEntryBuilder::new("data.json".into(), Compression::Deflate);
            let mut entry = zip.write_entry_stream(builder).await?;
-            let mut cursor = AllowStdIo::new(std::io::Cursor::new(html.as_bytes()));
+            let mut cursor = AllowStdIo::new(std::io::Cursor::new(data_json.as_bytes()));
            fcopy(&mut cursor, &mut entry).await?;
            entry.close().await?;
        }

-        update_progress(pool, event_id, "html", 60).await;
-
-        // README.txt
+        // Write README.txt
        {
-            let builder =
-                ZipEntryBuilder::new("Memories/README.txt".into(), Compression::Deflate);
+            let builder = ZipEntryBuilder::new("README.txt".into(), Compression::Deflate);
            let mut entry = zip.write_entry_stream(builder).await?;
            let mut cursor = AllowStdIo::new(std::io::Cursor::new(README_TEXT.as_bytes()));
            fcopy(&mut cursor, &mut entry).await?;
            entry.close().await?;
        }

-        // Media files
-        for (i, row) in uploads.iter().enumerate() {
-            let src = media_path.join(&row.original_path);
-            if !src.exists() {
-                continue;
+        update_progress(pool, event_id, "html", 78).await;
+
+        // Write media files from temp directory
+        let mut media_entries = tokio::fs::read_dir(&media_tmp).await?;
+        let mut file_count = 0u32;
+        let mut files_written = 0u32;
+
+        // Count files first
+        {
+            let mut counter = tokio::fs::read_dir(&media_tmp).await?;
+            while counter.next_entry().await?.is_some() {
+                file_count += 1;
            }
-            let ext = ext_from_path(&row.original_path);
-            let date_str = row.created_at.format("%Y-%m-%d_%H-%M").to_string();
-            let name_safe = sanitize_name(&row.uploader_name);
-            let folder = if row.mime_type.starts_with("video/") { "Videos" } else { "Photos" };
-            let filename = format!("{date_str}_{name_safe}_{}.{ext}", row.id);
-            let entry_name = format!("Memories/{folder}/{filename}");
+        }
+        let file_total = file_count.max(1) as f32;
+
+        while let Some(dir_entry) = media_entries.next_entry().await? {
+            let filename = dir_entry.file_name();
+            let entry_name = format!("media/{}", filename.to_string_lossy());

            let builder = ZipEntryBuilder::new(entry_name.into(), Compression::Stored);
-            let mut entry = zip.write_entry_stream(builder).await?;
-            let mut f = tokio::fs::File::open(&src).await?.compat();
-            fcopy(&mut f, &mut entry).await?;
-            entry.close().await?;
+            let mut zip_entry = zip.write_entry_stream(builder).await?;
+            let mut f = tokio::fs::File::open(dir_entry.path()).await?.compat();
+            fcopy(&mut f, &mut zip_entry).await?;
+            zip_entry.close().await?;

-            let pct = 60 + ((i + 1) as f32 / total * 39.0) as i16;
-            update_progress(pool, event_id, "html", pct.min(99)).await;
+            files_written += 1;
+            let pct = 78 + (files_written as f32 / file_total * 20.0) as i16;
+            update_progress(pool, event_id, "html", pct.min(98)).await;
        }

        zip.close().await?;
    }

+    // 6. Finalise
    tokio::fs::rename(&tmp_path, &out_path).await?;

+    // Clean up temp directory
+    let _ = tokio::fs::remove_dir_all(&tmp_dir).await;
+
    sqlx::query(
        "UPDATE export_job SET status = 'done', progress_pct = 100, file_path = $2, completed_at = NOW()
         WHERE event_id = $1 AND type = 'html'::export_type",
@@ -313,7 +460,7 @@ async fn run_html_export(
        data: serde_json::json!({ "type": "html", "progress_pct": 100 }).to_string(),
    });

-    tracing::info!("HTML export complete for event {event_id}");
+    tracing::info!("HTML viewer export complete for event {event_id}");
    Ok(())
 }

@@ -421,6 +568,26 @@ async fn maybe_broadcast_complete(
    }
 }

+/// Recursively write all files from an embedded `include_dir::Dir` into a ZIP.
+async fn write_dir_to_zip(
+    dir: &include_dir::Dir<'_>,
+    zip: &mut ZipFileWriter<tokio::fs::File>,
+) -> Result<()> {
+    for file in dir.files() {
+        let path = file.path().to_string_lossy().to_string();
+        let contents = file.contents();
+        let builder = ZipEntryBuilder::new(path.into(), Compression::Deflate);
+        let mut entry = zip.write_entry_stream(builder).await?;
+        let mut cursor = AllowStdIo::new(std::io::Cursor::new(contents));
+        fcopy(&mut cursor, &mut entry).await?;
+        entry.close().await?;
+    }
+    for sub_dir in dir.dirs() {
+        Box::pin(write_dir_to_zip(sub_dir, zip)).await?;
+    }
+    Ok(())
+}
+
 fn ext_from_path(path: &str) -> &str {
    path.rsplit('.').next().unwrap_or("bin")
 }
@@ -433,137 +600,18 @@ fn sanitize_name(name: &str) -> String {

 // ── Static content ───────────────────────────────────────────────────────────

-const README_TEXT: &str = "Willkommen in der Event-Galerie!\n\
+const README_TEXT: &str = "EventSnap Offline-Galerie\n\
 \n\
 So geht's:\n\
 1. Entpacke diese ZIP-Datei\n\
   (Windows: Rechtsklick > \"Alle extrahieren\"; Mac: Doppelklick;\n\
    Handy: Dateimanager-App verwenden).\n\
-2. Öffne die Datei \"Memories.html\" in deinem Browser\n\
+2. Öffne \"index.html\" im Browser\n\
   (z. B. Chrome, Safari oder Firefox).\n\
 3. Stöbere durch alle Fotos und Videos.\n\
-   Du kannst nach Hashtags filtern — klicke einfach auf einen Hashtag.\n\
+   Du kannst zwischen Listen- und Rasteransicht wechseln,\n\
+   nach Hashtags filtern und nach Nutzern suchen.\n\
 4. Eine Internetverbindung ist nicht nötig.\n\
   Alles ist lokal auf deinem Gerät gespeichert.\n\
 \n\
 Viel Freude mit den Erinnerungen!\n";
-
-const MEMORIES_TEMPLATE: &str = r#"<!DOCTYPE html>
-<html lang="de">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>{{ event_name }} – Erinnerungen</title>
-<style>
-*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-body{font-family:Georgia,serif;background:#faf7f2;color:#3d2b1f;min-height:100vh}
-header{background:#fff8f0;border-bottom:1px solid #e8d9c8;padding:1.5rem 1rem;text-align:center}
-header h1{font-size:1.75rem;font-weight:700;color:#5c3317;letter-spacing:.02em}
-header p{font-size:.85rem;color:#9a7060;margin-top:.25rem}
-.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem;justify-content:center;border-bottom:1px solid #e8d9c8;background:#fff8f0}
-.chip{cursor:pointer;padding:.3rem .8rem;border-radius:999px;border:1px solid #c8a98a;font-size:.8rem;color:#6b4c36;background:#fff;transition:all .15s}
-.chip:hover,.chip.active{background:#c8a98a;color:#fff;border-color:#c8a98a}
-.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;padding:1.25rem;max-width:1100px;margin:0 auto}
-.card{background:#fff;border-radius:.75rem;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;transition:transform .15s,box-shadow .15s}
-.card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.12)}
-.card.hidden{display:none}
-.thumb-wrap{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#e8d9c8}
-.thumb{width:100%;height:100%;object-fit:cover;display:block}
-.vid-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.5rem;pointer-events:none}
-.card-info{padding:.6rem .75rem}
-.card-uploader{font-size:.75rem;color:#9a7060;margin-bottom:.2rem}
-.card-caption{font-size:.85rem;color:#3d2b1f;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
-.card-meta{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.75rem;color:#b08060}
-.lb{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.88);overflow-y:auto}
-.lb.open{display:flex;flex-direction:column}
-.lb-close{position:fixed;top:.75rem;right:1rem;font-size:1.75rem;color:#fff;cursor:pointer;z-index:101;line-height:1}
-.lb-close:hover{color:#e8c89a}
-.lb-media{max-width:900px;width:100%;margin:3rem auto 0;padding:0 .5rem}
-.lb-media img,.lb-media video{width:100%;border-radius:.5rem;max-height:70vh;object-fit:contain;background:#1a1a1a;display:block}
-.lb-details{max-width:900px;width:100%;margin:1rem auto 2rem;padding:0 1rem}
-.lb-caption{font-size:1rem;color:#fff;margin-bottom:.5rem}
-.lb-meta{font-size:.8rem;color:#b08060;margin-bottom:.75rem}
-.lb-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
-.lb-tag{font-size:.75rem;color:#e8c89a;background:rgba(255,255,255,.1);padding:.2rem .6rem;border-radius:999px}
-.lb-likes{font-size:.85rem;color:#d4a574;margin-bottom:.75rem}
-.lb-comments h3{font-size:.9rem;color:#e8d9c8;margin-bottom:.5rem;font-weight:600}
-.comment{border-top:1px solid rgba(255,255,255,.1);padding:.5rem 0}
-.comment-name{font-size:.75rem;color:#b08060}
-.comment-body{font-size:.85rem;color:#e8d9c8;margin-top:.15rem}
-.empty{text-align:center;padding:3rem 1rem;color:#b08060;font-size:.95rem}
-footer{text-align:center;padding:1.5rem;font-size:.75rem;color:#b08060;border-top:1px solid #e8d9c8;margin-top:2rem}
-</style>
-</head>
-<body>
-<header>
-  <h1>{{ event_name }}</h1>
-  <p>Erinnerungen · Erstellt am {{ generated_at }}</p>
-</header>
-{% set ns = namespace(all_tags=[]) %}
-{% for u in uploads %}{% for t in u.hashtags %}{% if t not in ns.all_tags %}{% set ns.all_tags = ns.all_tags + [t] %}{% endif %}{% endfor %}{% endfor %}
-{% if ns.all_tags %}
-<div class="chips" id="chips">
-  <span class="chip active" data-tag="">Alle</span>
-  {% for tag in ns.all_tags %}<span class="chip" data-tag="{{ tag }}">#{{ tag }}</span>{% endfor %}
-</div>
-{% endif %}
-{% if uploads %}
-<div class="grid" id="grid">
-  {% for u in uploads %}
-  <div class="card" data-tags="{{ u.hashtags | join(',') }}" onclick="openLb({{ loop.index0 }})">
-    <div class="thumb-wrap">
-      {% if u.is_video %}
-      <video class="thumb" src="{{ u.path }}" preload="none"></video>
-      <div class="vid-icon">▶</div>
-      {% else %}
-      <img class="thumb" src="{{ u.path }}" alt="" loading="lazy">
-      {% endif %}
-    </div>
-    <div class="card-info">
-      <div class="card-uploader">{{ u.uploader_name }} · {{ u.created_at }}</div>
-      {% if u.caption %}<div class="card-caption">{{ u.caption }}</div>{% endif %}
-      <div class="card-meta">
-        <span>♡ {{ u.like_count }}</span>
-        {% if u.comments %}<span>💬 {{ u.comments | length }}</span>{% endif %}
-      </div>
-    </div>
-  </div>
-  {% endfor %}
-</div>
-{% else %}
-<div class="empty">Noch keine Fotos vorhanden.</div>
-{% endif %}
-<div class="lb" id="lb">
-  <span class="lb-close" onclick="closeLb()">×</span>
-  <div class="lb-media" id="lb-media"></div>
-  <div class="lb-details" id="lb-details"></div>
-</div>
-<footer>{{ event_name }} · Offline-Galerie · EventSnap</footer>
-<script>
-const uploads = {{ uploads | tojson }};
-let activeTag = '';
-function filterCards(){document.querySelectorAll('#grid .card').forEach((card,i)=>{const tags=(card.dataset.tags||'').split(',').filter(Boolean);card.classList.toggle('hidden',activeTag!==''&&!tags.includes(activeTag));});}
-document.querySelectorAll('#chips .chip').forEach(chip=>{chip.addEventListener('click',()=>{document.querySelectorAll('#chips .chip').forEach(c=>c.classList.remove('active'));chip.classList.add('active');activeTag=chip.dataset.tag;filterCards();});});
-function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
-function openLb(idx){
-  const u=uploads[idx];
-  const lb=document.getElementById('lb');
-  const media=document.getElementById('lb-media');
-  const details=document.getElementById('lb-details');
-  if(u.is_video){media.innerHTML=`<video src="${esc(u.path)}" controls autoplay playsinline></video>`;}
-  else{media.innerHTML=`<img src="${esc(u.path)}" alt="${esc(u.caption)}">`;}
-  const tags=u.hashtags.map(t=>`<span class="lb-tag">#${esc(t)}</span>`).join('');
-  const comments=u.comments.map(c=>`<div class="comment"><div class="comment-name">${esc(c.uploader_name)} · ${esc(c.created_at)}</div><div class="comment-body">${esc(c.body)}</div></div>`).join('');
-  details.innerHTML=(u.caption?`<div class="lb-caption">${esc(u.caption)}</div>`:'')+
-    `<div class="lb-meta">${esc(u.uploader_name)} · ${esc(u.created_at)}</div>`+
-    (tags?`<div class="lb-tags">${tags}</div>`:'')+
-    `<div class="lb-likes">♡ ${u.like_count} Likes</div>`+
-    (u.comments.length?`<div class="lb-comments"><h3>Kommentare (${u.comments.length})</h3>${comments}</div>`:'');
-  lb.classList.add('open');document.body.style.overflow='hidden';
-}
-function closeLb(){document.getElementById('lb').classList.remove('open');document.getElementById('lb-media').innerHTML='';document.body.style.overflow='';}
-document.getElementById('lb').addEventListener('click',e=>{if(e.target===e.currentTarget)closeLb();});
-document.addEventListener('keydown',e=>{if(e.key==='Escape')closeLb();});
-</script>
-</body>
-</html>"#;
--- a/backend/static/export-viewer/_app/env.js
+++ b/backend/static/export-viewer/_app/env.js
@@ -0,0 +1 @@
+export const env={}
--- a/backend/static/export-viewer/_app/immutable/assets/0.DHiZegc-.css
+++ b/backend/static/export-viewer/_app/immutable/assets/0.DHiZegc-.css
--- a/backend/static/export-viewer/_app/immutable/chunks/BJ__EZ0W.js
+++ b/backend/static/export-viewer/_app/immutable/chunks/BJ__EZ0W.js
@@ -0,0 +1 @@
+import{u as o,n as t,o as c}from"./CcONa1Mr.js";function u(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function r(e){t===null&&u(),o(()=>{const n=c(e);if(typeof n=="function")return n})}export{r as o};
--- a/backend/static/export-viewer/_app/immutable/chunks/BRDva_z9.js
+++ b/backend/static/export-viewer/_app/immutable/chunks/BRDva_z9.js
@@ -0,0 +1 @@
+import{f as l,g as o,p as u,i as n,j as d,k as m,h as p,e as _,m as v,l as k}from"./CcONa1Mr.js";class w{anchor;#t=new Map;#s=new Map;#e=new Map;#i=new Set;#f=!0;constructor(t,s=!0){this.anchor=t,this.#f=s}#a=t=>{if(this.#t.has(t)){var s=this.#t.get(t),e=this.#s.get(s);if(e)l(e),this.#i.delete(s);else{var f=this.#e.get(s);f&&(this.#s.set(s,f.effect),this.#e.delete(s),f.fragment.lastChild.remove(),this.anchor.before(f.fragment),e=f.effect)}for(const[i,a]of this.#t){if(this.#t.delete(i),i===t)break;const r=this.#e.get(a);r&&(o(r.effect),this.#e.delete(a))}for(const[i,a]of this.#s){if(i===s||this.#i.has(i))continue;const r=()=>{if(Array.from(this.#t.values()).includes(i)){var c=document.createDocumentFragment();v(a,c),c.append(n()),this.#e.set(i,{effect:a,fragment:c})}else o(a);this.#i.delete(i),this.#s.delete(i)};this.#f||!e?(this.#i.add(i),u(a,r,!1)):r()}}};#r=t=>{this.#t.delete(t);const s=Array.from(this.#t.values());for(const[e,f]of this.#e)s.includes(e)||(o(f.effect),this.#e.delete(e))};ensure(t,s){var e=m,f=k();if(s&&!this.#s.has(t)&&!this.#e.has(t))if(f){var i=document.createDocumentFragment(),a=n();i.append(a),this.#e.set(t,{effect:d(()=>s(a)),fragment:i})}else this.#s.set(t,d(()=>s(this.anchor)));if(this.#t.set(e,t),f){for(const[r,h]of this.#s)r===t?e.unskip_effect(h):e.skip_effect(h);for(const[r,h]of this.#e)r===t?e.unskip_effect(h.effect):e.skip_effect(h.effect);e.oncommit(this.#a),e.ondiscard(this.#r)}else p&&(this.anchor=_),this.#a(e)}}export{w as B};
--- a/backend/static/export-viewer/_app/immutable/chunks/Bb9JxzU7.js
+++ b/backend/static/export-viewer/_app/immutable/chunks/Bb9JxzU7.js
--- a/backend/static/export-viewer/_app/immutable/chunks/Bxn6SmGf.js
+++ b/backend/static/export-viewer/_app/immutable/chunks/Bxn6SmGf.js
@@ -0,0 +1 @@
+import{b as c,h as o,a as l,E as b,r as p,s as v,c as g,d,e as m}from"./CcONa1Mr.js";import{B as y}from"./BRDva_z9.js";function k(f,h,_=!1){var n;o&&(n=m,l());var s=new y(f),u=_?b:0;function t(a,r){if(o){var e=p(n);if(a!==parseInt(e.substring(1))){var i=v();g(i),s.anchor=i,d(!1),s.ensure(a,r),d(!0);return}}s.ensure(a,r)}c(()=>{var a=!1;h((r,e=0)=>{a=!0,t(e,r)}),a||t(-1,null)},u)}export{k as i};
--- a/backend/static/export-viewer/_app/immutable/chunks/CcONa1Mr.js
+++ b/backend/static/export-viewer/_app/immutable/chunks/CcONa1Mr.js
--- a/backend/static/export-viewer/_app/immutable/chunks/Dy1jDy4J.js
+++ b/backend/static/export-viewer/_app/immutable/chunks/Dy1jDy4J.js
--- a/backend/static/export-viewer/_app/immutable/chunks/RsTAN2PN.js
+++ b/backend/static/export-viewer/_app/immutable/chunks/RsTAN2PN.js
@@ -0,0 +1 @@
+import{A as v,i as d,B as l,C as u,D as T,T as p,F as h,h as i,e as s,R as E,a as y,G as g,c as w,H as N}from"./CcONa1Mr.js";const A=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:t=>t});function M(t){return A?.createHTML(t)??t}function x(t){var r=v("template");return r.innerHTML=M(t.replaceAll("<!>","<!---->")),r.content}function n(t,r){var e=l;e.nodes===null&&(e.nodes={start:t,end:r,a:null,t:null})}function b(t,r){var e=(r&p)!==0,f=(r&h)!==0,a,_=!t.startsWith("<!>");return()=>{if(i)return n(s,null),s;a===void 0&&(a=x(_?t:"<!>"+t),e||(a=u(a)));var o=f||T?document.importNode(a,!0):a.cloneNode(!0);if(e){var c=u(o),m=o.lastChild;n(c,m)}else n(o,o);return o}}function C(t=""){if(!i){var r=d(t+"");return n(r,r),r}var e=s;return e.nodeType!==g?(e.before(e=d()),w(e)):N(e),n(e,e),e}function O(){if(i)return n(s,null),s;var t=document.createDocumentFragment(),r=document.createComment(""),e=d();return t.append(r,e),n(r,e),t}function P(t,r){if(i){var e=l;((e.f&E)===0||e.nodes.end===null)&&(e.nodes.end=s),y();return}t!==null&&t.before(r)}const L="5";typeof window<"u"&&((window.__svelte??={}).v??=new Set).add(L);export{P as a,n as b,O as c,b as f,C as t};
--- a/backend/static/export-viewer/_app/immutable/entry/app.jfkZT8Zg.js
+++ b/backend/static/export-viewer/_app/immutable/entry/app.jfkZT8Zg.js
--- a/backend/static/export-viewer/_app/immutable/entry/start.ctwmcI8C.js
+++ b/backend/static/export-viewer/_app/immutable/entry/start.ctwmcI8C.js
@@ -0,0 +1 @@
+import{l as o,a as r}from"../chunks/Dy1jDy4J.js";export{o as load_css,r as start};
--- a/backend/static/export-viewer/_app/immutable/nodes/0.CTJa-e61.js
+++ b/backend/static/export-viewer/_app/immutable/nodes/0.CTJa-e61.js
@@ -0,0 +1 @@
+import{c as s,a as c}from"../chunks/RsTAN2PN.js";import{b as l,E as p,t as i}from"../chunks/CcONa1Mr.js";import{B as m}from"../chunks/BRDva_z9.js";function u(n,r,...e){var o=new m(n);l(()=>{const t=r()??null;o.ensure(t,t&&(a=>t(a,...e)))},p)}const f=!0,_=!1,g=Object.freeze(Object.defineProperty({__proto__:null,prerender:f,ssr:_},Symbol.toStringTag,{value:"Module"}));function h(n,r){var e=s(),o=i(e);u(o,()=>r.children),c(n,e)}export{h as component,g as universal};
--- a/backend/static/export-viewer/_app/immutable/nodes/1.GLhNnP-h.js
+++ b/backend/static/export-viewer/_app/immutable/nodes/1.GLhNnP-h.js
@@ -0,0 +1 @@
+import{a as i,f as h}from"../chunks/RsTAN2PN.js";import{q as g,t as v,v as d,w as l,x as s,y as a,z as x}from"../chunks/CcONa1Mr.js";import{s as o}from"../chunks/Bb9JxzU7.js";import{s as _,p}from"../chunks/Dy1jDy4J.js";const $={get error(){return p.error},get status(){return p.status}};_.updated.check;const m=$;var k=h("<h1> </h1> <p> </p>",1);function z(c,f){g(f,!0);var t=k(),r=v(t),n=s(r,!0);a(r);var e=x(r,2),u=s(e,!0);a(e),d(()=>{o(n,m.status),o(u,m.error?.message)}),i(c,t),l()}export{z as component};
--- a/backend/static/export-viewer/_app/immutable/nodes/2.CkuIG73r.js
+++ b/backend/static/export-viewer/_app/immutable/nodes/2.CkuIG73r.js
--- a/backend/static/export-viewer/_app/version.json
+++ b/backend/static/export-viewer/_app/version.json
@@ -0,0 +1 @@
+{"version":"1775501323159"}
--- a/backend/static/export-viewer/index.html
+++ b/backend/static/export-viewer/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="de">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link href="/_app/immutable/entry/start.ctwmcI8C.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/Dy1jDy4J.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/CcONa1Mr.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/BJ__EZ0W.js" rel="modulepreload">
+		<link href="/_app/immutable/entry/app.jfkZT8Zg.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/Bb9JxzU7.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/RsTAN2PN.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/Bxn6SmGf.js" rel="modulepreload">
+		<link href="/_app/immutable/chunks/BRDva_z9.js" rel="modulepreload">
+		
+	</head>
+	<body>
+		<div style="display: contents">
+			<script>
+				{
+					__sveltekit_ftrcoq = {
+						base: ""
+					};
+
+					const element = document.currentScript.parentElement;
+
+					Promise.all([
+						import("/_app/immutable/entry/start.ctwmcI8C.js"),
+						import("/_app/immutable/entry/app.jfkZT8Zg.js")
+					]).then(([kit, app]) => {
+						kit.start(app, element);
+					});
+				}
+			</script>
+		</div>
+	</body>
+</html>
--- a/docs/MOBILE_TESTING_GUIDE.md
+++ b/docs/MOBILE_TESTING_GUIDE.md
@@ -1,392 +0,0 @@
-# Mobile Testing Guide — EventSnap v0.15.0
-
-## Setup
-
-### Dev Servers
-
-| Service | URL | Notes |
-|---------|-----|-------|
-| Frontend | `http://localhost:5173` | Vite dev server, hot-reload |
-| Backend API | `http://localhost:3000` | Rust/Axum |
-| Database | `localhost:5432` | PostgreSQL (Docker) |
-
-The frontend dev server proxies `/api` and `/media` to the backend automatically.
-
-**Mobile device access:** Connect your phone to the same Wi-Fi network.
-Find your machine's local IP (`ip a | grep 192.168` or `hostname -I`), then open
-`http://<your-ip>:5173` on your phone.
-
-### Browser DevTools Mobile Emulation (quick testing without a phone)
-
-1. Open Chrome → DevTools (`F12`) → Toggle device toolbar (`Ctrl+Shift+M`)
-2. Select **iPhone 14 Pro** or **Pixel 7** from the device dropdown
-3. Reload the page — safe-area insets and viewport are emulated
-4. To test touch gestures: enable "Touch" in the three-dot menu inside the device toolbar
-
---
-
-## Test Accounts
-
-Use the following to get all three roles:
-
-| Role | How to get it |
-|------|--------------|
-| Guest | Join at `/join` with any name |
-| Host | Promote a guest via Host Dashboard, or set role in DB |
-| Admin | POST to `/api/v1/admin/login` or navigate to `/admin/login` |
-
-Admin password: `admin123` (set in `.env`)
-
---
-
-## Section 1 — Bottom Navigation Bar
-
-**Goal:** Verify the tab bar is present, thumb-accessible, and correct per role.
-
-### 1.1 Bar Presence & Safe Area
- [ ] Open `/feed` — a bottom tab bar with **Galerie**, a blue circle FAB, and **Konto** appears
- [ ] On a real iPhone/Safari: the bar does **not** overlap the home indicator (safe-area padding)
- [ ] On Chrome DevTools with an iPhone device: the bar is above the viewport bottom
- [ ] Scroll down on a long feed — the bar stays **fixed** at the bottom at all times
- [ ] The bar has a frosted-glass blur effect (`bg-white/90 backdrop-blur-md`)
-
-### 1.2 Active Tab Indicator
- [ ] On `/feed` — the Galerie icon is **blue**; Konto icon is gray
- [ ] Tap **Konto** — navigates to `/account`; Konto icon turns blue, Galerie goes gray
- [ ] Tap **Galerie** — navigates back to `/feed`
-
-### 1.3 Role Gating
- [ ] Log in as a **guest** — bar shows Galerie · FAB · Konto (3 items)
- [ ] Log in as a **host** — same 3 items (dashboard links are inside Account, not the bar)
- [ ] Log in as **admin** — same 3 items
-
-### 1.4 Auth Pages Hide the Bar
- [ ] Visit `/join` — **no** bottom bar
- [ ] Visit `/recover` — **no** bottom bar
- [ ] Visit `/admin/login` — **no** bottom bar
-
---
-
-## Section 2 — Upload FAB & Bottom Sheet
-
-**Goal:** Verify the FAB opens the upload sheet and both source options work.
-
-### 2.1 FAB Appearance
- [ ] The FAB is a blue circle elevated ~12 px above the tab bar
- [ ] A camera icon with an implicit "+" meaning is shown
- [ ] When uploads are in the queue (pending or uploading), a **red badge number** appears on the FAB
-
-### 2.2 Sheet Opens & Closes
- [ ] Tap the FAB — a bottom sheet slides up smoothly (~300 ms) from below
- [ ] Sheet shows: **Galerie** (blue icon), **Kamera** (purple icon), **Abbrechen**
- [ ] Tap the gray backdrop — sheet slides **back down** and closes
- [ ] Tap **Abbrechen** — sheet closes
- [ ] Swipe the drag handle downward — sheet closes *(if touch gestures are enabled)*
-
-### 2.3 Gallery Source
- [ ] Tap **Galerie** — the native file picker opens
- [ ] Select 1–3 images or videos
- [ ] Sheet closes; you are navigated to `/upload` (the composer page)
- [ ] Thumbnail strip at the top shows your selected files
- [ ] **Bottom nav is gone** on this page (immersive full-screen)
-
-### 2.4 Camera Source
- [ ] Tap the FAB → **Kamera**
- [ ] Browser asks for camera permission — grant it
- [ ] Full-screen camera UI appears (existing CameraCapture component)
- [ ] Take a photo
- [ ] Camera closes; you are navigated to `/upload` with the captured image in the strip
-
-### 2.5 Upload Composer Page
- [ ] Back `×` button top-left → returns to `/feed`, clears pending files
- [ ] Thumbnail strip scrolls horizontally when >3 files
- [ ] Each thumbnail has a small `×` to remove it — tapping removes that file only
- [ ] Caption `<textarea>` is **auto-focused** (keyboard opens on mobile)
- [ ] Type `#party #spaß` in the caption — **quick-tag chips** appear below the textarea in real time
- [ ] Quick-tag chips are read-only (they reflect what's already in the caption)
- [ ] The **"Hochladen"** sticky button at the bottom shows the file count: "2 Dateien hochladen"
- [ ] Button is **disabled** when the strip is empty
- [ ] Also a smaller "Hochladen" button in the header (convenient on desktop/landscape)
- [ ] Tap **Hochladen** — files are queued, you are returned to `/feed`
- [ ] A **slim blue progress bar** appears just above the bottom tab bar while uploading
- [ ] FAB shows a **red badge** during upload; badge disappears when done
- [ ] A brief "Fertig" / completed state appears in the UploadQueue (check queue store)
-
---
-
-## Section 3 — Feed: List View
-
-**Goal:** Verify the default chronological list view.
-
-### 3.1 Default State
- [ ] Open `/feed` — **list view** is active by default (≡ icon highlighted in the toggle)
- [ ] Posts appear as full-width cards in reverse-chronological order (newest first)
-
-### 3.2 List Card Anatomy
-For each card, verify:
- [ ] **Avatar circle** with the uploader's initial letter and a deterministic color
- [ ] **Display name** + **relative timestamp** ("vor 2 Min.", "vor 1 Std.", etc.)
- [ ] **Media**: full-width image, or video with a play button overlay
- [ ] **Caption** below the media (truncated to 3 lines with `...` if long)
- [ ] **Like count** (❤️) and **Comment count** (💬) action buttons
- [ ] Tapping the ❤️ toggles the like optimistically (count changes immediately)
- [ ] Tapping 💬 or the media opens the **Lightbox Modal** (existing behavior, unchanged)
-
-### 3.3 Hashtag Chips (List View Only)
- [ ] Below the main header, hashtag filter chips are visible in **list view**
- [ ] Tap a hashtag chip — feed re-fetches filtered by that tag
- [ ] Tap **Alle** — returns to unfiltered feed
- [ ] Chips are **not visible** when grid view is active
-
-### 3.4 Infinite Scroll
- [ ] Scroll to the bottom — more posts load automatically
- [ ] A spinner appears briefly while loading more
- [ ] Scroll sentinel triggers ~200 px before the actual bottom
-
-### 3.5 Real-Time Updates (SSE)
- [ ] Open the feed on two devices/tabs simultaneously
- [ ] Upload a photo on one — it appears at the **top** of the other's list view in real time
- [ ] Like a post on one — the count updates on the other
-
---
-
-## Section 4 — Feed: Grid View & Search
-
-**Goal:** Verify the 3-column grid, search bar, autocomplete, and filter chips.
-
-### 4.1 Switching to Grid View
- [ ] Tap the ⊞ grid icon in the header — view switches to a 3-column grid
- [ ] The ≡/⊞ toggle shows ⊞ as active (white background, shadow)
- [ ] Hashtag chips **disappear**; a **search bar** slides in below the header
-
-### 4.2 Grid Layout
- [ ] Grid is **3 columns** with equal square cells (no 2-column fallback on mobile)
- [ ] Videos show a ▶ play button overlay
- [ ] Tapping a cell opens the Lightbox Modal
- [ ] Grid background is seamless (0.5px gap between cells)
-
-### 4.3 Search Bar
- [ ] Search bar shows: 🔍 icon, placeholder "Nutzer oder #Tag suchen…", × clear button
- [ ] Tapping the bar focuses it and opens the keyboard
- [ ] × button appears only when there is text in the input; tapping it clears the query
-
-### 4.4 Autocomplete — On Focus (Empty)
- [ ] Focus the search bar with no text — a dropdown appears with:
-  - Up to 3 uploader names (person icon)
-  - Up to 3 popular tags (#)
- [ ] The dropdown disappears when the input loses focus (150 ms delay)
-
-### 4.5 Autocomplete — Tag Suggestions
- [ ] Type `#` — only **tag suggestions** appear (no users), sorted by frequency
- [ ] Type `#par` — only tags starting with "par" remain (e.g. `#party`, `#parade`)
- [ ] Tap a suggestion — it's added as a **blue filter chip** below the search bar; input clears
-
-### 4.6 Autocomplete — User Suggestions
- [ ] Type a partial name (e.g. `max`) — users matching "max" appear first, then tags containing "max"
- [ ] Tap a user suggestion — chip added: shows the name without `#` prefix
-
-### 4.7 Filter Chips
- [ ] After selecting a tag filter — grid shows only posts with that tag in the caption
- [ ] Select a second tag — grid shows posts with **either** tag (OR logic)
- [ ] Select a user **and** a tag — grid shows posts by that user **that also** have that tag (AND across types)
- [ ] Each chip has an **× remove button**; tapping it removes only that chip
- [ ] When 2+ chips are active: **"Alle löschen"** link appears; tapping clears all filters
- [ ] When no results match: "Keine Treffer für die gewählten Filter." + "Filter zurücksetzen" button
-
-### 4.8 Switching Back to List View
- [ ] Tap ≡ — list view returns; search bar gone; hashtag chips reappear
- [ ] Active grid filters are **reset** when switching back to list (no stale state)
-
---
-
-## Section 5 — Account Page
-
-**Goal:** Verify the profile card, dashboard links, and leave-confirm flow.
-
-### 5.1 Profile Card
- [ ] Open `/account` via the Konto tab
- [ ] **Avatar circle** shows your initial letter in a deterministic color
- [ ] **Display name** and **role badge** (Gast / Gastgeber / Admin) shown
- [ ] Session expiry date shown in small text below
-
-### 5.2 Dashboard Links (Host/Admin Only)
- [ ] Log in as a **guest** — no "Dashboards" section visible at all
- [ ] Log in as a **host** — "Dashboards" section shows ⭐ **Host-Dashboard** → chevron
-  - [ ] Tapping it navigates to `/host`
-  - [ ] No Admin-Dashboard link visible
- [ ] Log in as **admin** — both links appear:
-  - [ ] ⭐ Host-Dashboard → `/host`
-  - [ ] 🛡 Admin-Dashboard → `/admin`
-
-### 5.3 PIN Card
- [ ] Amber card shows the 4-digit PIN in large monospace font
- [ ] **Kopieren** button copies to clipboard; label changes to "Kopiert!" for 2 seconds
- [ ] If no PIN is stored: fallback message shown
-
-### 5.4 Konto Section
- [ ] **Gerät wechseln / PIN nutzen** → navigates to `/recover`
- [ ] **Event verlassen** (red text) → tapping opens a **leave-confirm bottom sheet**
-  - [ ] Sheet shows: "Event verlassen?", "Du wirst abgemeldet…", red "Abmelden" + "Abbrechen"
-  - [ ] Tap backdrop — sheet closes, you remain logged in
-  - [ ] Tap **Abbrechen** — same
-  - [ ] Tap **Abmelden** — you are logged out and redirected to `/join`
-
-### 5.5 No Stale Nav Links
- [ ] **No** "Zur Galerie" link in the header (navigation is via the bottom bar)
-
---
-
-## Section 6 — Host Dashboard
-
-**Goal:** Verify the back arrow, collapsible sections, and all existing host actions still work.
-
-### 6.1 Navigation
- [ ] Open Host Dashboard via Account → ⭐ Host-Dashboard
- [ ] Page shows a **← back arrow** in the top-left header
- [ ] Tapping it navigates to `/account`
- [ ] **No** shield/gallery header icons (removed)
- [ ] Bottom tab bar is still visible
-
-### 6.2 Statistiken Section (Collapsible)
- [ ] Section is **expanded** by default with a downward chevron
- [ ] Shows a 2×2 grid of stat cards: Gäste, Uploads, Uploads status (Offen/Gesperrt), Freigegeben (Ja/Nein)
- [ ] Numbers are large and readable on mobile
- [ ] Tap the **Statistiken** header button — section collapses (smooth max-height animation)
- [ ] Chevron rotates 180° to point upward when collapsed
- [ ] Tap again — section expands
-
-### 6.3 Event-Einstellungen Section (Collapsible)
- [ ] Collapse/expand works same as above
- [ ] Shows **"Uploads sperren"** (amber) / **"Uploads wieder öffnen"** (green) button
- [ ] Shows **"Galerie freigeben"** (blue) / "Galerie bereits freigegeben" (disabled gray)
- [ ] Tap "Uploads sperren" — toast confirms, button switches to "Uploads wieder öffnen"
- [ ] Existing functionality unchanged
-
-### 6.4 Nutzerverwaltung Section (Collapsible)
- [ ] **Search bar** at top of section filters the user list in real time (client-side)
- [ ] Each user row shows name, role badge, banned badge (if applicable), upload count/bytes
- [ ] **Sperren** button triggers the existing ban modal (confirm + hide-uploads checkbox)
- [ ] **Entsperren** appears for banned users
- [ ] **Host** button promotes a guest to host role
- [ ] **Degradieren** appears for hosts (admin only)
- [ ] Toast notifications appear above the bottom bar (not obscured by it)
-
---
-
-## Section 7 — Admin Dashboard
-
-**Goal:** Verify the inner tab bar, all 4 tabs, and the new Nutzer tab.
-
-### 7.1 Navigation
- [ ] Open Admin Dashboard via Account → 🛡 Admin-Dashboard
- [ ] Page shows **← back arrow** → `/account`
- [ ] **No** star/gallery header icons
- [ ] Bottom tab bar visible
-
-### 7.2 Inner Tab Bar
- [ ] A second tab bar appears **below the main header**, sticky on scroll
- [ ] 4 tabs: **Stats · Config · Export · Nutzer**
- [ ] Active tab has a blue bottom border and blue text
- [ ] Inactive tabs are gray
- [ ] Tabs are scrollable horizontally (try narrowing viewport)
- [ ] Switching tabs is instant with no page reload
-
-### 7.3 Stats Tab
- [ ] Shows a **2×2 grid** of metric cards: Gäste, Uploads, Kommentare, Speicher %
- [ ] Values are large (`text-3xl`)
- [ ] Below the grid: a full-width disk usage bar with color coding
-  - Blue ≤ 74%, Amber 75–89%, Red ≥ 90%
- [ ] Exact used/total/free values shown
-
-### 7.4 Config Tab
- [ ] Shows stacked label + full-width input for each of the 8 config keys
- [ ] Inputs are `type="number"` with large touch targets
- [ ] A **"Speichern"** button is **sticky at the bottom** of the tab (always visible, even on long scroll)
- [ ] Edit a value → tap Speichern → toast "Konfiguration gespeichert."
- [ ] Tap Speichern with no changes → toast "Keine Änderungen."
-
-### 7.5 Export Tab
- [ ] **"Galerie freigeben"** button triggers gallery release
- [ ] **"Aktualisieren"** button refreshes the jobs list only (no full page flash)
- [ ] Export jobs listed with status chips: Ausstehend (gray) / Läuft (blue) / Fertig (green) / Fehlgeschlagen (red)
- [ ] Running jobs show a progress bar
- [ ] Failed jobs show the error message in red
-
-### 7.6 Nutzer Tab (New)
- [ ] Users are loaded from `/host/users` (admin shares host permissions)
- [ ] **Search bar** filters list in real time
- [ ] Same ban/unban/promote/demote actions as Host dashboard
- [ ] After an action (e.g. ban) only the users list refreshes, not the whole page
-
---
-
-## Section 8 — Toast Position
-
- [ ] On host/admin pages, toasts appear at `bottom-24` (above the bottom nav bar)
- [ ] Toasts are **not** obscured by the nav bar
-
---
-
-## Section 9 — Desktop Usability (Second Citizen)
-
-**Goal:** Confirm all pages are still usable on a wide viewport.
-
-### 9.1 Layout Centering
- [ ] On a 1280px+ viewport, all pages center their content at `max-w-2xl` or `max-w-3xl`
- [ ] Bottom tab bar spans full width but content columns remain centered
- [ ] No content is clipped or overflows horizontally
-
-### 9.2 Feed Desktop
- [ ] List view: cards are centered, readable at 672px max width
- [ ] Grid view: 3 columns at max-width — cells are larger and look good
- [ ] Search bar is full-width within the max-width container
-
-### 9.3 Upload Composer Desktop
- [ ] Upload page is full-height, centered column
- [ ] Both the header "Hochladen" button AND the sticky bottom button are present
- [ ] Desktop users can click the header button (more convenient without reaching to bottom)
-
-### 9.4 Host / Admin Desktop
- [ ] Host collapsible sections work with mouse clicks
- [ ] Admin inner tabs work with mouse clicks; all 4 tabs visible without scrolling at 1280px
- [ ] Config tab sticky save is visible on desktop scroll
-
---
-
-## Section 10 — Edge Cases
-
-### 10.1 Upload with No Files Selected
- [ ] Navigate directly to `/upload` in the browser
- [ ] No files pending → "Keine Dateien ausgewählt" screen shown with "Zurück" button
- [ ] "Hochladen" button is disabled
-
-### 10.2 Rate Limiting
- [ ] Upload rapidly beyond the configured limit (default: 10/hour)
- [ ] A `429` response is received
- [ ] The countdown banner appears above the bottom nav: "Upload-Limit erreicht. Wird in X Sek. automatisch fortgesetzt."
- [ ] After the countdown, the queue resumes automatically
-
-### 10.3 SSE Reconnect
- [ ] Stop the backend briefly and restart
- [ ] The feed reconnects (SSE) — new uploads appear once the backend is back
-
-### 10.4 Back Navigation from Upload
- [ ] Pick files → navigate to `/upload`
- [ ] Tap `×` → files are discarded (`clearPending()` runs, object URLs are revoked)
- [ ] Navigate back to `/upload` directly — "Keine Dateien ausgewählt" shown (not stale files)
-
-### 10.5 Grid Filter Persistence
- [ ] Set a filter chip in grid view
- [ ] Switch to list view — filter is cleared (list always shows full unfiltered feed)
- [ ] Switch back to grid — search bar is empty, no stale chips
-
---
-
-## Known Limitations (Not Bugs)
-
-| Item | Status |
-|------|--------|
-| "Anzeigename ändern" in Account | Deferred — shown as disabled; requires `/me` PATCH endpoint |
-| Upload count in Account profile card | Deferred — requires `/me` GET endpoint |
-| CSS collapse animation on host sections | Uses `max-h` trick; may be slightly sluggish for very large user lists |
-| Autocomplete results | Derived from currently-loaded posts only; new posts via SSE update the pool automatically |
--- a/frontend/export-viewer/package-lock.json
+++ b/frontend/export-viewer/package-lock.json
--- a/frontend/export-viewer/package.json
+++ b/frontend/export-viewer/package.json
@@ -0,0 +1,22 @@
+{
+	"name": "export-viewer",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^3.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/vite": "^4.2.2",
+		"svelte": "^5.54.0",
+		"tailwindcss": "^4.2.2",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
+	}
+}
--- a/frontend/export-viewer/src/app.css
+++ b/frontend/export-viewer/src/app.css
@@ -0,0 +1 @@
+@import "tailwindcss";
--- a/frontend/export-viewer/src/app.html
+++ b/frontend/export-viewer/src/app.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="de">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/frontend/export-viewer/src/lib/types.ts
+++ b/frontend/export-viewer/src/lib/types.ts
@@ -0,0 +1,28 @@
+export interface ViewerData {
+	event: {
+		name: string;
+		exported_at: string;
+	};
+	posts: ViewerPost[];
+}
+
+export interface ViewerPost {
+	id: string;
+	uploader: string;
+	caption: string;
+	tags: string[];
+	timestamp: string;
+	likes: number;
+	comments: ViewerComment[];
+	media: {
+		type: 'image' | 'video';
+		thumb: string;
+		full: string;
+	};
+}
+
+export interface ViewerComment {
+	author: string;
+	text: string;
+	timestamp: string;
+}
--- a/frontend/export-viewer/src/routes/+layout.svelte
+++ b/frontend/export-viewer/src/routes/+layout.svelte
@@ -0,0 +1,6 @@
+<script>
+	import '../app.css';
+	let { children } = $props();
+</script>
+
+{@render children()}
--- a/frontend/export-viewer/src/routes/+layout.ts
+++ b/frontend/export-viewer/src/routes/+layout.ts
@@ -0,0 +1,2 @@
+export const prerender = true;
+export const ssr = false;
--- a/frontend/export-viewer/src/routes/+page.svelte
+++ b/frontend/export-viewer/src/routes/+page.svelte
@@ -0,0 +1,613 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { ViewerData, ViewerPost, ViewerComment } from '$lib/types';
+
+	let data = $state<ViewerData | null>(null);
+	let loading = $state(true);
+	let error = $state('');
+
+	// View mode
+	let viewMode = $state<'list' | 'grid'>('list');
+
+	// Grid search / filter state
+	let searchQuery = $state('');
+	let showAutocomplete = $state(false);
+
+	interface Filter { type: 'tag' | 'user'; value: string }
+	let activeFilters = $state<Filter[]>([]);
+
+	// Lightbox state
+	let selectedPost = $state<ViewerPost | null>(null);
+	let lightboxIndex = $state(0);
+	let touchStartX = 0;
+
+	// List view hashtag filter
+	let selectedHashtag = $state<string | null>(null);
+
+	// ── Derived data ────────────────────────────────────────────────────────────
+
+	let posts = $derived(data?.posts ?? []);
+
+	let allTags = $derived.by(() => {
+		const freq = new Map<string, number>();
+		for (const p of posts) {
+			for (const t of p.tags) {
+				const lower = t.toLowerCase();
+				freq.set(lower, (freq.get(lower) ?? 0) + 1);
+			}
+		}
+		return [...freq.entries()].sort((a, b) => b[1] - a[1]);
+	});
+
+	let allUploaders = $derived([...new Set(posts.map((p) => p.uploader))].sort());
+
+	let suggestions = $derived.by((): Filter[] => {
+		const q = searchQuery.trim();
+		if (!q) {
+			if (!showAutocomplete) return [];
+			return [
+				...allUploaders.slice(0, 3).map((u) => ({ type: 'user' as const, value: u })),
+				...allTags.slice(0, 3).map(([t]) => ({ type: 'tag' as const, value: t })),
+			];
+		}
+		if (q.startsWith('#')) {
+			const prefix = q.slice(1).toLowerCase();
+			return allTags
+				.filter(([t]) => t.startsWith(prefix))
+				.slice(0, 8)
+				.map(([t]) => ({ type: 'tag' as const, value: t }));
+		}
+		const lower = q.toLowerCase();
+		return [
+			...allUploaders
+				.filter((u) => u.toLowerCase().includes(lower))
+				.slice(0, 4)
+				.map((u) => ({ type: 'user' as const, value: u })),
+			...allTags
+				.filter(([t]) => t.includes(lower))
+				.slice(0, 4)
+				.map(([t]) => ({ type: 'tag' as const, value: t })),
+		];
+	});
+
+	// List view: filter by selected hashtag
+	let listPosts = $derived.by(() => {
+		if (!selectedHashtag) return posts;
+		return posts.filter((p) => p.tags.some((t) => t.toLowerCase() === selectedHashtag));
+	});
+
+	// Grid view: filter by active filters (OR within type, AND across types)
+	let filteredPosts = $derived.by(() => {
+		if (activeFilters.length === 0) return posts;
+		const tags = activeFilters.filter((f) => f.type === 'tag').map((f) => f.value);
+		const users = activeFilters.filter((f) => f.type === 'user').map((f) => f.value);
+		return posts.filter((p) => {
+			const postTags = p.tags.map((t) => t.toLowerCase());
+			const passTag = !tags.length || tags.some((t) => postTags.includes(t));
+			const passUser = !users.length || users.includes(p.uploader);
+			return passTag && passUser;
+		});
+	});
+
+	let displayPosts = $derived(viewMode === 'list' ? listPosts : filteredPosts);
+
+	// ── Data loading ────────────────────────────────────────────────────────────
+
+	onMount(async () => {
+		try {
+			const res = await fetch('./data.json');
+			if (!res.ok) throw new Error(`HTTP ${res.status}`);
+			data = await res.json();
+		} catch (e) {
+			error = 'Daten konnten nicht geladen werden. Stelle sicher, dass data.json im selben Ordner liegt.';
+		} finally {
+			loading = false;
+		}
+	});
+
+	// ── Helpers ──────────────────────────────────────────────────────────────────
+
+	function formatDate(iso: string): string {
+		const d = new Date(iso);
+		return d.toLocaleString('de-DE', {
+			day: '2-digit', month: '2-digit', year: 'numeric',
+			hour: '2-digit', minute: '2-digit',
+		});
+	}
+
+	function formatShortDate(iso: string): string {
+		return new Date(iso).toLocaleString('de-DE', {
+			day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit',
+		});
+	}
+
+	function initial(name: string): string {
+		return name[0]?.toUpperCase() ?? '?';
+	}
+
+	const COLORS = [
+		'bg-blue-100 text-blue-700',
+		'bg-purple-100 text-purple-700',
+		'bg-green-100 text-green-700',
+		'bg-amber-100 text-amber-700',
+		'bg-rose-100 text-rose-700',
+		'bg-teal-100 text-teal-700',
+	];
+	function avatarColor(name: string): string {
+		let hash = 0;
+		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
+		return COLORS[hash % COLORS.length];
+	}
+
+	// ── View switching ──────────────────────────────────────────────────────────
+
+	function switchView(mode: 'list' | 'grid') {
+		viewMode = mode;
+		if (mode === 'list') {
+			searchQuery = '';
+			showAutocomplete = false;
+		}
+	}
+
+	// ── Search / filter ─────────────────────────────────────────────────────────
+
+	function selectSuggestion(item: Filter) {
+		if (!activeFilters.some((f) => f.type === item.type && f.value === item.value)) {
+			activeFilters = [...activeFilters, item];
+		}
+		searchQuery = '';
+		showAutocomplete = false;
+	}
+
+	function removeFilter(item: Filter) {
+		activeFilters = activeFilters.filter((f) => !(f.type === item.type && f.value === item.value));
+	}
+
+	function clearFilters() {
+		activeFilters = [];
+		searchQuery = '';
+	}
+
+	function selectHashtag(tag: string | null) {
+		selectedHashtag = tag;
+	}
+
+	// ── Lightbox ────────────────────────────────────────────────────────────────
+
+	function openLightbox(post: ViewerPost) {
+		const idx = displayPosts.indexOf(post);
+		lightboxIndex = idx >= 0 ? idx : 0;
+		selectedPost = post;
+	}
+
+	function closeLightbox() {
+		selectedPost = null;
+	}
+
+	function navigateLightbox(delta: number) {
+		const len = displayPosts.length;
+		if (len === 0) return;
+		lightboxIndex = (lightboxIndex + delta + len) % len;
+		selectedPost = displayPosts[lightboxIndex];
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (!selectedPost) return;
+		if (e.key === 'Escape') closeLightbox();
+		else if (e.key === 'ArrowLeft') navigateLightbox(-1);
+		else if (e.key === 'ArrowRight') navigateLightbox(1);
+	}
+
+	function handleTouchStart(e: TouchEvent) {
+		touchStartX = e.touches[0].clientX;
+	}
+
+	function handleTouchEnd(e: TouchEvent) {
+		const diff = e.changedTouches[0].clientX - touchStartX;
+		if (Math.abs(diff) > 50) {
+			navigateLightbox(diff > 0 ? -1 : 1);
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if loading}
+	<div class="flex min-h-screen items-center justify-center bg-gray-50">
+		<div class="inline-block h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
+	</div>
+{:else if error}
+	<div class="flex min-h-screen items-center justify-center bg-gray-50 p-4">
+		<div class="rounded-xl border border-red-200 bg-red-50 p-6 text-center">
+			<p class="text-sm text-red-700">{error}</p>
+		</div>
+	</div>
+{:else if data}
+	<div class="min-h-screen bg-gray-50 pb-8">
+		<!-- Sticky header -->
+		<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur">
+			<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
+				<h1 class="text-lg font-bold text-gray-900">{data.event.name}</h1>
+
+				<!-- List / Grid toggle -->
+				<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
+					<button
+						onclick={() => switchView('list')}
+						class="rounded-md p-1.5 transition-colors {viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
+						aria-label="Listenansicht"
+					>
+						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+						</svg>
+					</button>
+					<button
+						onclick={() => switchView('grid')}
+						class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
+						aria-label="Rasteransicht"
+					>
+						<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+							<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+						</svg>
+					</button>
+				</div>
+			</div>
+
+			<!-- List view: hashtag chips -->
+			{#if viewMode === 'list' && allTags.length > 0}
+				<div class="mx-auto max-w-2xl px-4 pb-2">
+					<div class="flex gap-2 overflow-x-auto pb-2">
+						<button
+							onclick={() => selectHashtag(null)}
+							class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
+								selectedHashtag === null
+									? 'bg-blue-600 text-white'
+									: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+							}"
+						>
+							Alle
+						</button>
+						{#each allTags as [tag, count] (tag)}
+							<button
+								onclick={() => selectHashtag(tag)}
+								class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
+									selectedHashtag === tag
+										? 'bg-blue-600 text-white'
+										: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+								}"
+							>
+								#{tag}
+								<span class="ml-1 text-xs opacity-70">{count}</span>
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			<!-- Grid view: search bar + autocomplete -->
+			{#if viewMode === 'grid'}
+				<div class="mx-auto max-w-2xl px-4 pb-3">
+					<div class="relative">
+						<div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200">
+							<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+							</svg>
+							<input
+								type="search"
+								placeholder="Nutzer oder #Tag suchen..."
+								bind:value={searchQuery}
+								onfocus={() => (showAutocomplete = true)}
+								onblur={() => setTimeout(() => (showAutocomplete = false), 150)}
+								class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
+							/>
+							{#if searchQuery}
+								<button
+									onclick={() => { searchQuery = ''; }}
+									class="shrink-0 text-gray-400 hover:text-gray-600"
+									aria-label="Suche loschen"
+								>
+									<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+										<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+									</svg>
+								</button>
+							{/if}
+						</div>
+
+						<!-- Autocomplete dropdown -->
+						{#if showAutocomplete && suggestions.length > 0}
+							<div class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
+								{#each suggestions as item}
+									<button
+										class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50"
+										onmousedown={() => selectSuggestion(item)}
+									>
+										{#if item.type === 'user'}
+											<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+												<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+											</svg>
+											<span class="font-medium text-gray-900">{item.value}</span>
+										{:else}
+											<span class="font-medium text-blue-500">#</span>
+											<span class="font-medium text-gray-900">{item.value}</span>
+										{/if}
+									</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
+
+					<!-- Active filter chips -->
+					{#if activeFilters.length > 0}
+						<div class="mt-2 flex flex-wrap items-center gap-1.5">
+							{#each activeFilters as filter}
+								<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">
+									{filter.type === 'tag' ? '#' : ''}{filter.value}
+									<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900" aria-label="Filter entfernen">
+										<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+											<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+										</svg>
+									</button>
+								</span>
+							{/each}
+							{#if activeFilters.length >= 2}
+								<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600">
+									Alle loschen
+								</button>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Content -->
+		{#if displayPosts.length === 0}
+			<div class="py-20 text-center">
+				<p class="text-lg text-gray-400">Noch keine Fotos.</p>
+				{#if activeFilters.length > 0}
+					<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline">Filter zurucksetzen</button>
+				{/if}
+			</div>
+		{:else if viewMode === 'list'}
+			<!-- List view: chronological full-width cards -->
+			<div class="mx-auto max-w-2xl">
+				{#each displayPosts as post (post.id)}
+					<article class="bg-white">
+						<!-- Uploader row -->
+						<div class="flex items-center gap-3 px-4 py-3">
+							<div
+								class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
+									{avatarColor(post.uploader)}"
+							>
+								{initial(post.uploader)}
+							</div>
+							<div class="min-w-0">
+								<p class="truncate text-sm font-semibold text-gray-900">{post.uploader}</p>
+								<p class="text-xs text-gray-400">{formatDate(post.timestamp)}</p>
+							</div>
+						</div>
+
+						<!-- Media -->
+						<button
+							class="block w-full"
+							onclick={() => openLightbox(post)}
+							aria-label="Bild vergrößern"
+						>
+							{#if post.media.type === 'video'}
+								<div class="relative aspect-video w-full bg-gray-900">
+									{#if post.media.thumb}
+										<img src={post.media.thumb} alt="" class="h-full w-full object-cover opacity-80" />
+									{/if}
+									<div class="absolute inset-0 flex items-center justify-center">
+										<span class="flex h-14 w-14 items-center justify-center rounded-full bg-black/50 text-white">
+											<svg class="h-7 w-7 pl-0.5" fill="currentColor" viewBox="0 0 24 24">
+												<path d="M8 5v14l11-7z" />
+											</svg>
+										</span>
+									</div>
+								</div>
+							{:else if post.media.full}
+								<img
+									src={post.media.full}
+									alt=""
+									class="w-full object-cover"
+									style="max-height: 80svh"
+									loading="lazy"
+								/>
+							{:else}
+								<div class="flex aspect-square w-full items-center justify-center bg-gray-100">
+									<svg class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+									</svg>
+								</div>
+							{/if}
+						</button>
+
+						<!-- Stats row (read-only) -->
+						<div class="flex items-center gap-4 px-4 py-2">
+							<span class="flex items-center gap-1.5 text-sm font-medium text-gray-500">
+								<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="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>
+								{post.likes}
+							</span>
+							<span class="flex items-center gap-1.5 text-sm font-medium text-gray-500">
+								<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+									<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+								</svg>
+								{post.comments.length}
+							</span>
+						</div>
+
+						<!-- Caption -->
+						{#if post.caption}
+							<p class="px-4 pb-3 text-sm text-gray-800 [overflow-wrap:anywhere]">
+								{post.caption}
+							</p>
+						{/if}
+
+						<div class="border-b border-gray-100"></div>
+					</article>
+				{/each}
+			</div>
+		{:else}
+			<!-- Grid view: 3-col -->
+			<div class="mx-auto max-w-2xl">
+				<div class="grid grid-cols-3 gap-0.5">
+					{#each displayPosts as post (post.id)}
+						<div class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100">
+							<button
+								onclick={() => openLightbox(post)}
+								class="block h-full w-full"
+								aria-label="Upload anzeigen"
+							>
+								{#if post.media.type === 'video'}
+									<div class="flex h-full items-center justify-center bg-gray-800">
+										{#if post.media.thumb}
+											<img src={post.media.thumb} 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 post.media.thumb}
+									<img src={post.media.thumb} 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">{post.uploader}</p>
+								<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
+									<span class="flex items-center gap-0.5">
+										<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="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>
+										{post.likes}
+									</span>
+									<span class="flex items-center gap-0.5">
+										<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>
+										{post.comments.length}
+									</span>
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Footer -->
+		<footer class="mt-8 border-t border-gray-200 py-6 text-center text-xs text-gray-400">
+			<p>{data.event.name} &middot; Offline-Galerie &middot; EventSnap</p>
+			<p class="mt-1">Exportiert am {formatDate(data.event.exported_at)}</p>
+		</footer>
+	</div>
+
+	<!-- Lightbox -->
+	{#if selectedPost}
+		<div
+			class="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
+			role="dialog"
+			tabindex="-1"
+			onclick={(e) => { if (e.target === e.currentTarget) closeLightbox(); }}
+			ontouchstart={handleTouchStart}
+			ontouchend={handleTouchEnd}
+		>
+			<div class="flex max-h-[95vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white sm:m-4">
+				<!-- Media -->
+				<div class="relative bg-black">
+					<button onclick={closeLightbox} 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>
+
+					<!-- Nav arrows -->
+					{#if displayPosts.length > 1}
+						<button
+							onclick={() => navigateLightbox(-1)}
+							class="absolute left-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70"
+							aria-label="Vorheriges"
+						>
+							<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+							</svg>
+						</button>
+						<button
+							onclick={() => navigateLightbox(1)}
+							class="absolute right-2 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70"
+							aria-label="Nachstes"
+						>
+							<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+							</svg>
+						</button>
+					{/if}
+
+					{#if selectedPost.media.type === 'video'}
+						<video
+							src={selectedPost.media.full}
+							controls
+							class="max-h-[50vh] w-full object-contain"
+							poster={selectedPost.media.thumb || undefined}
+						></video>
+					{:else}
+						<img
+							src={selectedPost.media.full}
+							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">{selectedPost.uploader}</span>
+								<span class="ml-2 text-xs text-gray-400">{formatShortDate(selectedPost.timestamp)}</span>
+							</div>
+							<span class="flex items-center gap-1 rounded-full bg-gray-100 px-2.5 py-1 text-sm text-gray-600">
+								<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="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>
+								{selectedPost.likes}
+							</span>
+						</div>
+						{#if selectedPost.caption}
+							<p class="mt-1 text-sm text-gray-700 [overflow-wrap:anywhere]">{selectedPost.caption}</p>
+						{/if}
+					</div>
+
+					<!-- Comments list -->
+					<div class="flex-1 overflow-y-auto p-3">
+						{#if selectedPost.comments.length === 0}
+							<p class="text-center text-sm text-gray-400">Keine Kommentare.</p>
+						{:else}
+							<div class="space-y-3">
+								{#each selectedPost.comments as comment}
+									<div>
+										<span class="text-sm font-medium text-gray-900">{comment.author}</span>
+										<span class="ml-1 text-sm text-gray-700">{comment.text}</span>
+										<div class="mt-0.5 text-xs text-gray-400">{formatShortDate(comment.timestamp)}</div>
+									</div>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+{/if}
--- a/frontend/export-viewer/svelte.config.js
+++ b/frontend/export-viewer/svelte.config.js
@@ -0,0 +1,21 @@
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	compilerOptions: {
+		runes: true
+	},
+	kit: {
+		adapter: adapter({
+			pages: '../../backend/static/export-viewer',
+			assets: '../../backend/static/export-viewer',
+			fallback: 'index.html',
+			strict: false
+		}),
+		paths: {
+			relative: true
+		}
+	}
+};
+
+export default config;
--- a/frontend/export-viewer/tsconfig.json
+++ b/frontend/export-viewer/tsconfig.json
@@ -0,0 +1,15 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+}
--- a/frontend/export-viewer/vite.config.ts
+++ b/frontend/export-viewer/vite.config.ts
@@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [tailwindcss(), sveltekit()]
+});
--- a/frontend/src/routes/export/+page.svelte
+++ b/frontend/src/routes/export/+page.svelte
@@ -113,7 +113,7 @@
 			<h2 class="mb-3 text-lg font-bold text-gray-900">Hinweis zum HTML-Viewer</h2>
 			<ol class="mb-4 space-y-2 text-sm text-gray-700">
 				<li class="flex gap-2"><span class="font-bold text-blue-600">1.</span> ZIP-Datei entpacken (Windows: Rechtsklick → "Alle extrahieren"; Mac: Doppelklick).</li>
-				<li class="flex gap-2"><span class="font-bold text-blue-600">2.</span> <strong>Memories.html</strong> im Browser öffnen.</li>
+				<li class="flex gap-2"><span class="font-bold text-blue-600">2.</span> <strong>index.html</strong> im Browser öffnen.</li>
 				<li class="flex gap-2"><span class="font-bold text-blue-600">3.</span> Kein Internet nötig — alles ist lokal gespeichert.</li>
 			</ol>
 			<p class="mb-4 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-700">
Author	SHA1	Message	Date
MechaCat02	1685bf105c	fix: update export page guide text for new viewer Change "Memories.html" to "index.html" in the HTML export download guide modal. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-06 21:26:06 +02:00
MechaCat02	ffc926bf4d	feat: replace HTML export with SvelteKit viewer Replace the minijinja-based HTML export with a full SvelteKit static viewer app. The new export produces a ZIP with: - Pre-built viewer assets (index.html + JS/CSS bundle) - data.json with all posts, comments, tags, and like counts - Processed media: 400px thumbnails for grid, full images (2000px cap if >5MB), video thumbnails via ffmpeg Remove minijinja dependency, add include_dir to embed viewer assets at compile time. Update Dockerfile to copy static/ for builds. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-06 21:26:03 +02:00
MechaCat02	2fd66a800a	chore: build and commit export-viewer static output Pre-built SvelteKit static output for embedding into HTML export ZIPs. When viewer source changes, rebuild with `npm run build` in frontend/export-viewer/ and re-commit this directory. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-06 21:01:08 +02:00
MechaCat02	4f966533fe	feat: add export-viewer SvelteKit static app Standalone SvelteKit project at frontend/export-viewer/ using adapter-static. Replicates the live feed experience as a read-only offline gallery: list/grid views, search with autocomplete, hashtag filtering, lightbox with swipe navigation and comments. Built output goes to backend/static/export-viewer/ for embedding into the HTML export ZIP. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-06 21:01:01 +02:00
				`@@ -0,0 +1 @@`
				`import{u as o,n as t,o as c}from"./CcONa1Mr.js";function u(e){throw new Error("https://svelte.dev/e/lifecycle_outside_component")}function r(e){t===null&&u(),o(()=>{const n=c(e);if(typeof n=="function")return n})}export{r as o};`
				`@@ -0,0 +1 @@`
				import{f as l,g as o,p as u,i as n,j as d,k as m,h as p,e as _,m as v,l as k}from"./CcONa1Mr.js";class w{anchor;#t=new Map;#s=new Map;#e=new Map;#i=new Set;#f=!0;constructor(t,s=!0){this.anchor=t,this.#f=s}#a=t=>{if(this.#t.has(t)){var s=this.#t.get(t),e=this.#s.get(s);if(e)l(e),this.#i.delete(s);else{var f=this.#e.get(s);f&&(this.#s.set(s,f.effect),this.#e.delete(s),f.fragment.lastChild.remove(),this.anchor.before(f.fragment),e=f.effect)}for(const[i,a]of this.#t){if(this.#t.delete(i),i===t)break;const r=this.#e.get(a);r&&(o(r.effect),this.#e.delete(a))}for(const[i,a]of this.#s){if(i===s\|\|this.#i.has(i))continue;const r=()=>{if(Array.from(this.#t.values()).includes(i)){var c=document.createDocumentFragment();v(a,c),c.append(n()),this.#e.set(i,{effect:a,fragment:c})}else o(a);this.#i.delete(i),this.#s.delete(i)};this.#f\|\|!e?(this.#i.add(i),u(a,r,!1)):r()}}};#r=t=>{this.#t.delete(t);const s=Array.from(this.#t.values());for(const[e,f]of this.#e)s.includes(e)\|\|(o(f.effect),this.#e.delete(e))};ensure(t,s){var e=m,f=k();if(s&&!this.#s.has(t)&&!this.#e.has(t))if(f){var i=document.createDocumentFragment(),a=n();i.append(a),this.#e.set(t,{effect:d(()=>s(a)),fragment:i})}else this.#s.set(t,d(()=>s(this.anchor)));if(this.#t.set(e,t),f){for(const[r,h]of this.#s)r===t?e.unskip_effect(h):e.skip_effect(h);for(const[r,h]of this.#e)r===t?e.unskip_effect(h.effect):e.skip_effect(h.effect);e.oncommit(this.#a),e.ondiscard(this.#r)}else p&&(this.anchor=_),this.#a(e)}}export{w as B};
				`@@ -0,0 +1 @@`
				`import{b as c,h as o,a as l,E as b,r as p,s as v,c as g,d,e as m}from"./CcONa1Mr.js";import{B as y}from"./BRDva_z9.js";function k(f,h,_=!1){var n;o&&(n=m,l());var s=new y(f),u=_?b:0;function t(a,r){if(o){var e=p(n);if(a!==parseInt(e.substring(1))){var i=v();g(i),s.anchor=i,d(!1),s.ensure(a,r),d(!0);return}}s.ensure(a,r)}c(()=>{var a=!1;h((r,e=0)=>{a=!0,t(e,r)}),a\|\|t(-1,null)},u)}export{k as i};`
				`@@ -0,0 +1 @@`
				import{A as v,i as d,B as l,C as u,D as T,T as p,F as h,h as i,e as s,R as E,a as y,G as g,c as w,H as N}from"./CcONa1Mr.js";const A=globalThis?.window?.trustedTypes&&globalThis.window.trustedTypes.createPolicy("svelte-trusted-html",{createHTML:t=>t});function M(t){return A?.createHTML(t)??t}function x(t){var r=v("template");return r.innerHTML=M(t.replaceAll("<!>","<!---->")),r.content}function n(t,r){var e=l;e.nodes===null&&(e.nodes={start:t,end:r,a:null,t:null})}function b(t,r){var e=(r&p)!==0,f=(r&h)!==0,a,_=!t.startsWith("<!>");return()=>{if(i)return n(s,null),s;a===void 0&&(a=x(_?t:"<!>"+t),e\|\|(a=u(a)));var o=f\|\|T?document.importNode(a,!0):a.cloneNode(!0);if(e){var c=u(o),m=o.lastChild;n(c,m)}else n(o,o);return o}}function C(t=""){if(!i){var r=d(t+"");return n(r,r),r}var e=s;return e.nodeType!==g?(e.before(e=d()),w(e)):N(e),n(e,e),e}function O(){if(i)return n(s,null),s;var t=document.createDocumentFragment(),r=document.createComment(""),e=d();return t.append(r,e),n(r,e),t}function P(t,r){if(i){var e=l;((e.f&E)===0\|\|e.nodes.end===null)&&(e.nodes.end=s),y();return}t!==null&&t.before(r)}const L="5";typeof window<"u"&&((window.__svelte??={}).v??=new Set).add(L);export{P as a,n as b,O as c,b as f,C as t};
				`@@ -0,0 +1 @@`
				`import{l as o,a as r}from"../chunks/Dy1jDy4J.js";export{o as load_css,r as start};`
				`@@ -0,0 +1 @@`
				`import{c as s,a as c}from"../chunks/RsTAN2PN.js";import{b as l,E as p,t as i}from"../chunks/CcONa1Mr.js";import{B as m}from"../chunks/BRDva_z9.js";function u(n,r,...e){var o=new m(n);l(()=>{const t=r()??null;o.ensure(t,t&&(a=>t(a,...e)))},p)}const f=!0,_=!1,g=Object.freeze(Object.defineProperty({__proto__:null,prerender:f,ssr:_},Symbol.toStringTag,{value:"Module"}));function h(n,r){var e=s(),o=i(e);u(o,()=>r.children),c(n,e)}export{h as component,g as universal};`
				`@@ -0,0 +1 @@`
				import{a as i,f as h}from"../chunks/RsTAN2PN.js";import{q as g,t as v,v as d,w as l,x as s,y as a,z as x}from"../chunks/CcONa1Mr.js";import{s as o}from"../chunks/Bb9JxzU7.js";import{s as _,p}from"../chunks/Dy1jDy4J.js";const $={get error(){return p.error},get status(){return p.status}};_.updated.check;const m=$;var k=h("<h1> </h1> <p> </p>",1);function z(c,f){g(f,!0);var t=k(),r=v(t),n=s(r,!0);a(r);var e=x(r,2),u=s(e,!0);a(e),d(()=>{o(n,m.status),o(u,m.error?.message)}),i(c,t),l()}export{z as component};