fabi/EventSnap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(eventsnap): UX review batch-3 — feed virtualization, a11y/UX fixes, shared primitives

Browse Source 
Frontend
- Feed: DOM-windowing via @tanstack/svelte-virtual (new VirtualFeed). The window
  virtualizer keeps the sticky header, pull-to-refresh, infinite-scroll sentinel and
  bottom nav working. List = dynamic measured heights keyed by upload id +
  anchorTo:start so an SSE prepend doesn't jump a scrolled reader; grid = measured
  square rows. Drops the content-visibility band-aid and the old FeedGrid.
  measureElement(null) on row unmount prevents ResizeObserver retention; stable
  option callbacks + guarded setOptions avoid O(n) re-measure on like/comment patches.
- Global: viewport-fit=cover (activates safe-area insets), lang=de, PWA manifest +
  maskable icon + apple-touch metas, prefers-reduced-motion, safe-area-top headers.
- Feed reactivity: like/comment SSE patch the single card in place; upload-processed
  debounced in-place merge; IntersectionObserver leak fixed; shared 60s clock.
- CLS: list cards reserve the skeleton aspect box.
- Destructive actions (promote/demote/unban, gallery release) routed through
  ConfirmSheet (host + admin).
- Export OOM: streamed download via single-use ticket instead of res.blob().
- Shared primitives: IconButton (44px hit area), scrollLock action; UploadSheet a11y.
- Polish: api timeout + non-JSON guard, focus-trap offsetParent fix, pull-to-refresh
  passive:false + guards, diashow keyboard a11y, Toaster assertive errors, dark-mode
  gaps, aria-pressed on like/chip state, CameraCapture mic-on-video + retry,
  ConfirmSheet spinner, upload beforeunload warning, emoji->SVG icons.

Backend
- social.rs: like/comment SSE broadcasts now carry the fresh count so feed clients
  patch one card in place instead of refetching page 1.
- admin.rs / main.rs: supporting changes for the above.

Verified: svelte-check 0 errors, frontend build clean, /feed SSR 200. Runtime feed
scroll-feel validation still owed (documented in FOLLOWUPS.md).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
fabi
2026-06-30 19:16:48 +02:00
parent bbec815854
commit e79e020566
42 changed files with 1245 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
FOLLOWUPS.md
View File

@@ -46,6 +46,55 @@ is the smallest patch.
- [frontend/src/lib/components/Toaster.svelte](frontend/src/lib/components/Toaster.svelte) — add passthrough marker (if approach 2) or move to a portal (if approach 1) - [frontend/src/lib/components/Toaster.svelte](frontend/src/lib/components/Toaster.svelte) — add passthrough marker (if approach 2) or move to a portal (if approach 1)
- [frontend/src/app.html](frontend/src/app.html) — add `<div id="modal-root">` (if approach 1) - [frontend/src/app.html](frontend/src/app.html) — add `<div id="modal-root">` (if approach 1)
## Feed — DOM-windowing virtualization (IMPLEMENTED — residual validation owed)
**Status.** Implemented in [frontend/src/lib/components/VirtualFeed.svelte](frontend/src/lib/components/VirtualFeed.svelte)
using `@tanstack/svelte-virtual`'s `createWindowVirtualizer`. Both the **list**
view (dynamic `measureElement` heights, keyed by upload id with `anchorTo:'start'`
so an SSE prepend doesn't yank a scrolled-down reader) and the **grid** view
(three measured square tiles per row) now keep only the on-screen window (+overscan)
in the DOM instead of one node per upload. The window virtualizer scrolls the
document, so the sticky header, pull-to-refresh, the infinite-scroll sentinel and
the bottom nav are untouched. The earlier `content-visibility` band-aid was removed
from `FeedListCard` (it interferes with real-height measurement), and the old
`FeedGrid.svelte` was deleted (its sole consumer migrated to `VirtualFeed`).
**Verified.** `svelte-check` 0 errors, production build clean. The integration
follows the library's documented window-virtualizer contract (confirmed against
`virtual-core` source: item `start` includes `scrollMargin`, `getTotalSize()`
excludes it; the SSR path is guarded by `getScrollElement()` returning null).
**Residual validation owed (needs the running app — could not be done headless).**
- Manual scroll testing on a ~1000-item event: confirm no jank, correct scrollbar
size, and that an SSE `new-upload` / `feed-delta` prepend while scrolled down does
not jump the viewport (the `anchorTo:'start'` + id-key path).
- `scrollMargin` re-measure when grid filter chips change the header height (handled
reactively via the `uploads`-length-driven effect, but unverified visually).
- A new e2e spec that scrolls far down, likes an item via SSE, and asserts scroll
position is retained — the existing suite only asserts a single card is visible,
so it cannot catch a scroll regression.
**Files.**
- [frontend/src/lib/components/VirtualFeed.svelte](frontend/src/lib/components/VirtualFeed.svelte) — new windowing component (list + grid)
- [frontend/src/routes/feed/+page.svelte](frontend/src/routes/feed/+page.svelte) — renders `VirtualFeed` for both views
- [frontend/src/lib/components/FeedListCard.svelte](frontend/src/lib/components/FeedListCard.svelte) — `content-visibility` removed
## Feed — per-image exact CLS reservation
**Problem.** `FeedListCard` now reserves a default `aspect-[4/5]` box for photos so
the card doesn't collapse to height 0 and reflow as images stream in (matching
`Skeleton`). But no image dimensions are stored anywhere (not on `FeedUpload`, the
`upload` table, or any migration), so the box is a uniform guess that crops to fit —
the original is one tap away in the lightbox.
**Acceptance criterion.** Extract image width/height during the compression worker,
store them on `upload`, expose them on `FeedUpload`, and have the card reserve the
*true* aspect ratio (no crop, zero shift).
**Files to touch.**
- backend: `services/compression.rs`, `models/upload.rs`, `handlers/feed.rs`, a migration
- [frontend/src/lib/types.ts](frontend/src/lib/types.ts), [FeedListCard.svelte](frontend/src/lib/components/FeedListCard.svelte)
## Smaller nits, optional ## Smaller nits, optional
- **Auto-submit on retried 4th digit.** [recover/+page.svelte](frontend/src/routes/recover/+page.svelte), [join/+page.svelte](frontend/src/routes/join/+page.svelte) — after a wrong PIN, deleting one digit and retyping triggers an immediate submit. Backend's 3-attempts/15-min lockout makes this safe; could feel hair-trigger after a typo. Consider gating the second auto-submit per input session behind an explicit button press. - **Auto-submit on retried 4th digit.** [recover/+page.svelte](frontend/src/routes/recover/+page.svelte), [join/+page.svelte](frontend/src/routes/join/+page.svelte) — after a wrong PIN, deleting one digit and retyping triggers an immediate submit. Backend's 3-attempts/15-min lockout makes this safe; could feel hair-trigger after a typo. Consider gating the second auto-submit per input session behind an explicit button press.

40
backend/src/handlers/admin.rs
View File

@@ -1,7 +1,7 @@
use std::collections::HashMap; use std::collections::HashMap;
use std::time::Duration; use std::time::Duration;
use axum::extract::State; use axum::extract::{Query, State};
use axum::http::{HeaderMap, StatusCode}; use axum::http::{HeaderMap, StatusCode};
use axum::Json; use axum::Json;
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
@@ -223,11 +223,44 @@ pub async fn get_export_jobs(
// ── Export download endpoints (authenticated guests) ───────────────────────── // ── Export download endpoints (authenticated guests) ─────────────────────────
#[derive(Deserialize)]
pub struct DownloadQuery {
pub ticket: String,
}
/// Mint a short-lived ticket for a browser-driven export download. The download
/// is a top-level navigation so the multi-GB ZIP streams straight to disk instead
/// of being buffered in memory by `fetch()` + `blob()` — but a navigation can't
/// carry an `Authorization` header, so the client exchanges its Bearer token for
/// an opaque ticket here, then hits `/export/zip?ticket=...`. Reuses the same
/// single-use, 30s-TTL store as the SSE stream.
pub async fn export_ticket(
State(state): State<AppState>,
auth: crate::auth::middleware::AuthUser,
) -> Json<serde_json::Value> {
let ticket = state.sse_tickets.issue(auth.token_hash);
Json(serde_json::json!({ "ticket": ticket }))
}
/// Validate a download ticket (single-use) and confirm its session still exists.
async fn authenticate_download_ticket(state: &AppState, ticket: &str) -> Result<(), AppError> {
let token_hash = state
.sse_tickets
.consume(ticket)
.ok_or_else(|| AppError::Unauthorized("Ticket ungültig oder abgelaufen.".into()))?;
crate::models::session::Session::find_by_token_hash(&state.pool, &token_hash)
.await
.map_err(|e| AppError::Internal(e.into()))?
.ok_or_else(|| AppError::Unauthorized("Sitzung nicht gefunden.".into()))?;
Ok(())
}
pub async fn download_zip( pub async fn download_zip(
State(state): State<AppState>, State(state): State<AppState>,
_auth: crate::auth::middleware::AuthUser, Query(q): Query<DownloadQuery>,
headers: HeaderMap, headers: HeaderMap,
) -> Result<axum::response::Response, AppError> { ) -> Result<axum::response::Response, AppError> {
authenticate_download_ticket(&state, &q.ticket).await?;
enforce_export_rate(&state, &headers).await?; enforce_export_rate(&state, &headers).await?;
let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug) let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)
@@ -250,9 +283,10 @@ pub async fn download_zip(
pub async fn download_html( pub async fn download_html(
State(state): State<AppState>, State(state): State<AppState>,
_auth: crate::auth::middleware::AuthUser, Query(q): Query<DownloadQuery>,
headers: HeaderMap, headers: HeaderMap,
) -> Result<axum::response::Response, AppError> { ) -> Result<axum::response::Response, AppError> {
authenticate_download_ticket(&state, &q.ticket).await?;
enforce_export_rate(&state, &headers).await?; enforce_export_rate(&state, &headers).await?;
let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug) let event = crate::models::event::Event::find_by_slug(&state.pool, &state.config.event_slug)

22
backend/src/handlers/social.rs
View File

@@ -43,10 +43,18 @@ pub async fn toggle_like(
.await?; .await?;
} }
// Fresh count so feed clients can patch the single card in place instead of
// refetching page 1 (mirrors v_feed.like_count = COUNT(DISTINCT user_id)).
let like_count: i64 =
sqlx::query_scalar("SELECT COUNT(DISTINCT user_id) FROM \"like\" WHERE upload_id = $1")
.bind(upload_id)
.fetch_one(&state.pool)
.await?;
// Broadcast SSE // Broadcast SSE
let _ = state.sse_tx.send(crate::state::SseEvent { let _ = state.sse_tx.send(crate::state::SseEvent {
event_type: "like-update".to_string(), event_type: "like-update".to_string(),
data: serde_json::json!({ "upload_id": upload_id }).to_string(), data: serde_json::json!({ "upload_id": upload_id, "like_count": like_count }).to_string(),
}); });
Ok(StatusCode::NO_CONTENT) Ok(StatusCode::NO_CONTENT)
@@ -114,10 +122,20 @@ pub async fn add_comment(
.await?; .await?;
} }
// Fresh count so feed clients can patch the single card in place instead of
// refetching page 1 (mirrors v_feed.comment_count = COUNT(DISTINCT c.id)).
let comment_count: i64 = sqlx::query_scalar(
"SELECT COUNT(*) FROM comment WHERE upload_id = $1 AND deleted_at IS NULL",
)
.bind(upload_id)
.fetch_one(&state.pool)
.await?;
// Broadcast SSE // Broadcast SSE
let _ = state.sse_tx.send(crate::state::SseEvent { let _ = state.sse_tx.send(crate::state::SseEvent {
event_type: "new-comment".to_string(), event_type: "new-comment".to_string(),
data: serde_json::json!({ "upload_id": upload_id }).to_string(), data: serde_json::json!({ "upload_id": upload_id, "comment_count": comment_count })
.to_string(),
}); });
let dto = CommentDto { let dto = CommentDto {

1
backend/src/main.rs
View File

@@ -102,6 +102,7 @@ async fn main() -> Result<()> {
.route("/api/v1/host/comment/{id}", delete(handlers::host::host_delete_comment)) .route("/api/v1/host/comment/{id}", delete(handlers::host::host_delete_comment))
// Export (all authenticated users) // Export (all authenticated users)
.route("/api/v1/export/status", get(handlers::admin::export_status)) .route("/api/v1/export/status", get(handlers::admin::export_status))
.route("/api/v1/export/ticket", post(handlers::admin::export_ticket))
.route("/api/v1/export/zip", get(handlers::admin::download_zip)) .route("/api/v1/export/zip", get(handlers::admin::download_zip))
.route("/api/v1/export/html", get(handlers::admin::download_html)) .route("/api/v1/export/html", get(handlers::admin::download_html))
// Admin Dashboard // Admin Dashboard

12
e2e/specs/06-export/export.spec.ts
View File

@@ -46,11 +46,17 @@ test.describe('Export — release and download', () => {
const g = await guest('NoFile'); const g = await guest('NoFile');
await db.setExportReleased(SLUG, true); await db.setExportReleased(SLUG, true);
await db.fakeExportJob(SLUG, 'zip', 'done'); await db.fakeExportJob(SLUG, 'zip', 'done');
// Real backend additionally checks event.export_zip_ready. The faked row is const base = process.env.E2E_FRONTEND_URL ?? 'http://localhost:3101';
// enough for /status; the download path needs the boolean flag too. // Browser downloads stream straight to disk via a top-level navigation, so the
const res = await fetch((process.env.E2E_FRONTEND_URL ?? 'http://localhost:3101') + '/api/v1/export/zip', { // download endpoint authenticates with a single-use ticket (no Bearer header).
const ticketRes = await fetch(base + '/api/v1/export/ticket', {
method: 'POST',
headers: { Authorization: `Bearer ${g.jwt}` }, headers: { Authorization: `Bearer ${g.jwt}` },
}); });
const { ticket } = await ticketRes.json();
// Real backend additionally checks event.export_zip_ready. The faked row is
// enough for /status; the download path needs the boolean flag too.
const res = await fetch(base + '/api/v1/export/zip?ticket=' + encodeURIComponent(ticket));
// Either 404 ("not available" OR "file not found") — both are valid states for this setup. // Either 404 ("not available" OR "file not found") — both are valid states for this setup.
expect([404, 200]).toContain(res.status); expect([404, 200]).toContain(res.status);
}); });

2
e2e/specs/09-mobile/gestures-longpress.spec.ts
View File

@@ -2,7 +2,7 @@
* Phase 3 mobile — long-press gesture. * Phase 3 mobile — long-press gesture.
* *
* The `longpress` action attaches to `<article>` in FeedListCard and to * The `longpress` action attaches to `<article>` in FeedListCard and to
* grid cells in FeedGrid. Holding for ≥ 500 ms fires `onlongpress`, * grid cells in VirtualFeed (grid mode). Holding for ≥ 500 ms fires `onlongpress`,
* which opens the ContextSheet bottom sheet via the feed page's * which opens the ContextSheet bottom sheet via the feed page's
* `contextTarget` state. * `contextTarget` state.
* *

55
frontend/package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "frontend", "name": "frontend",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@tanstack/svelte-virtual": "^3.13.30",
"idb": "^8.0.3", "idb": "^8.0.3",
"qrcode": "^1.5.4" "qrcode": "^1.5.4"
}, },
@@ -471,7 +472,6 @@
"version": "0.3.13", "version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -482,7 +482,6 @@
"version": "2.3.5", "version": "2.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/gen-mapping": "^0.3.5",
@@ -493,7 +492,6 @@
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=6.0.0" "node": ">=6.0.0"
@@ -503,14 +501,12 @@
"version": "1.5.5", "version": "1.5.5",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@jridgewell/trace-mapping": { "node_modules/@jridgewell/trace-mapping": {
"version": "0.3.31", "version": "0.3.31",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/resolve-uri": "^3.1.0",
@@ -991,7 +987,6 @@
"version": "1.0.9", "version": "1.0.9",
"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.9.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.9.tgz",
"integrity": "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==", "integrity": "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==",
"dev": true,
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
"acorn": "^8.9.0" "acorn": "^8.9.0"
@@ -1029,7 +1024,6 @@
"integrity": "sha512-MdFRjevVxmAknf2NbaUkDF16jSIzXMWd4Nfah0Qp8TtQVoSp3bV4jKt8mX7z7qTUTWvgSaxtR0EG5WJf53gcuA==", "integrity": "sha512-MdFRjevVxmAknf2NbaUkDF16jSIzXMWd4Nfah0Qp8TtQVoSp3bV4jKt8mX7z7qTUTWvgSaxtR0EG5WJf53gcuA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@standard-schema/spec": "^1.0.0", "@standard-schema/spec": "^1.0.0",
"@sveltejs/acorn-typescript": "^1.0.5", "@sveltejs/acorn-typescript": "^1.0.5",
@@ -1072,7 +1066,6 @@
"integrity": "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA==", "integrity": "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
"deepmerge": "^4.3.1", "deepmerge": "^4.3.1",
@@ -1378,6 +1371,32 @@
"vite": "^5.2.0 || ^6 || ^7 || ^8" "vite": "^5.2.0 || ^6 || ^7 || ^8"
} }
}, },
"node_modules/@tanstack/svelte-virtual": {
"version": "3.13.30",
"resolved": "https://registry.npmjs.org/@tanstack/svelte-virtual/-/svelte-virtual-3.13.30.tgz",
"integrity": "sha512-Yj6FOrUhYZ48kaSrc/CqOWM57wAJivoyW+L3V9zgL7vtDOvFU02aOnvmcmd/9Qypl/V29+ySwEzKA7f1Rpv0Xw==",
"license": "MIT",
"dependencies": {
"@tanstack/virtual-core": "3.17.2"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"svelte": "^3.48.0 || ^4.0.0 || ^5.0.0"
}
},
"node_modules/@tanstack/virtual-core": {
"version": "3.17.2",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.17.2.tgz",
"integrity": "sha512-w43MvWvmShpb6kIC9MOoLyUkLmRTLPjt61bHWs+X29hACSpX+n8DvgZ3qM7cUfflKlRRcHR9KVJE6TmcqnQvcA==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@types/cookie": { "node_modules/@types/cookie": {
"version": "0.6.0", "version": "0.6.0",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -1389,7 +1408,6 @@
"version": "1.0.8", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
@@ -1423,14 +1441,12 @@
"version": "2.0.7", "version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==", "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@typescript-eslint/types": { "node_modules/@typescript-eslint/types": {
"version": "8.58.0", "version": "8.58.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.58.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.58.0.tgz",
"integrity": "sha512-O9CjxypDT89fbHxRfETNoAnHj/i6IpRK0CvbVN3qibxlLdo5p5hcLmUuCCrHMpxiWSwKyI8mCP7qRNYuOJ0Uww==", "integrity": "sha512-O9CjxypDT89fbHxRfETNoAnHj/i6IpRK0CvbVN3qibxlLdo5p5hcLmUuCCrHMpxiWSwKyI8mCP7qRNYuOJ0Uww==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0" "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1444,9 +1460,7 @@
"version": "8.16.0", "version": "8.16.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==", "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
"dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
}, },
@@ -1482,7 +1496,6 @@
"version": "5.3.1", "version": "5.3.1",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
"integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==", "integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
"dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
@@ -1492,7 +1505,6 @@
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==", "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
"dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"engines": { "engines": {
"node": ">= 0.4" "node": ">= 0.4"
@@ -1538,7 +1550,6 @@
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=6" "node": ">=6"
@@ -1612,7 +1623,6 @@
"version": "5.6.4", "version": "5.6.4",
"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.4.tgz", "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.4.tgz",
"integrity": "sha512-Gp6rDldRsFh/7XuouDbxMH3Mx8GMCcgzIb1pDTvNyn8pZGQ22u+Wa+lGV9dQCltFQ7uVw0MhRyb8XDskNFOReA==", "integrity": "sha512-Gp6rDldRsFh/7XuouDbxMH3Mx8GMCcgzIb1pDTvNyn8pZGQ22u+Wa+lGV9dQCltFQ7uVw0MhRyb8XDskNFOReA==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/dijkstrajs": { "node_modules/dijkstrajs": {
@@ -1687,14 +1697,12 @@
"version": "1.2.2", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz", "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==", "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/esrap": { "node_modules/esrap": {
"version": "2.2.4", "version": "2.2.4",
"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.4.tgz", "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.4.tgz",
"integrity": "sha512-suICpxAmZ9A8bzJjEl/+rLJiDKC0X4gYWUxT6URAWBLvlXmtbZd5ySMu/N2ZGEtMCAmflUDPSehrP9BQcsGcSg==", "integrity": "sha512-suICpxAmZ9A8bzJjEl/+rLJiDKC0X4gYWUxT6URAWBLvlXmtbZd5ySMu/N2ZGEtMCAmflUDPSehrP9BQcsGcSg==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15", "@jridgewell/sourcemap-codec": "^1.4.15",
@@ -1835,7 +1843,6 @@
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==", "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@types/estree": "^1.0.6" "@types/estree": "^1.0.6"
@@ -2126,7 +2133,6 @@
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==", "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/locate-path": { "node_modules/locate-path": {
@@ -2145,7 +2151,6 @@
"version": "0.30.21", "version": "0.30.21",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.5" "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -2384,7 +2389,6 @@
"integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==", "integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@types/estree": "1.0.8" "@types/estree": "1.0.8"
}, },
@@ -2518,9 +2522,7 @@
"version": "5.55.1", "version": "5.55.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.1.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.1.tgz",
"integrity": "sha512-QjvU7EFemf6mRzdMGlAFttMWtAAVXrax61SZYHdkD6yoVGQ89VeyKfZD4H1JrV1WLmJBxWhFch9H6ig/87VGjw==", "integrity": "sha512-QjvU7EFemf6mRzdMGlAFttMWtAAVXrax61SZYHdkD6yoVGQ89VeyKfZD4H1JrV1WLmJBxWhFch9H6ig/87VGjw==",
"dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@jridgewell/remapping": "^2.3.4", "@jridgewell/remapping": "^2.3.4",
"@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -2621,7 +2623,6 @@
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
@@ -2643,7 +2644,6 @@
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"esbuild": "^0.27.0", "esbuild": "^0.27.0",
"fdir": "^6.5.0", "fdir": "^6.5.0",
@@ -2798,7 +2798,6 @@
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz", "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==", "integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
"dev": true,
"license": "MIT" "license": "MIT"
} }
} }

1
frontend/package.json
View File

@@ -25,6 +25,7 @@
"vite": "^7.3.1" "vite": "^7.3.1"
}, },
"dependencies": { "dependencies": {
"@tanstack/svelte-virtual": "^3.13.30",
"idb": "^8.0.3", "idb": "^8.0.3",
"qrcode": "^1.5.4" "qrcode": "^1.5.4"
} }

14
frontend/src/app.css
View File

@@ -1 +1,15 @@
@import "./tailwind-theme.css"; @import "./tailwind-theme.css";
/* Respect the OS "reduce motion" setting. Collapses every animation/transition
* (HeartBurst, Skeleton pulse, diashow cross-fades, sheet/FAB slides) to a
* near-instant change rather than removing them outright, so state still updates. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

17
frontend/src/app.html
View File

@@ -1,10 +1,21 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- viewport-fit=cover activates the env(safe-area-inset-*) padding used by the
bottom nav, sheets, toasts and FAB on notched / home-indicator devices. -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="text-scale" content="scale" /> <meta name="text-scale" content="scale" />
<meta name="theme-color" content="#ffffff" /> <!-- Light/dark theme-color so the browser chrome matches the active theme. -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#030712" media="(prefers-color-scheme: dark)" />
<!-- Installable PWA keepsake: manifest + Apple home-screen metadata. -->
<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
<link rel="icon" href="%sveltekit.assets%/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="%sveltekit.assets%/icon.svg" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="EventSnap" />
<!-- <!--
FOUC guard: apply the dark class *before* paint, so reloads of pages with FOUC guard: apply the dark class *before* paint, so reloads of pages with
theme=dark don't flash a white screen. Mirrors the logic in theme=dark don't flash a white screen. Mirrors the logic in

30
frontend/src/lib/actions/doubletap.ts
View File

@@ -1,9 +1,14 @@
// Svelte action — fires a `doubletap` CustomEvent when two pointerup events occur // Svelte action — the single source of truth for tap gestures on a media element.
// within `interval` ms on roughly the same spot. Used in the lightbox for the // Fires a `doubletap` CustomEvent when two pointerup events occur within `interval`
// Instagram-style "double-tap to like" gesture. // ms on roughly the same spot (Instagram-style "double-tap to like"), and a
// `singletap` CustomEvent once `interval` has elapsed with no second tap. Owning
// both gestures in one place means a component no longer juggles its own debounce
// timer alongside a separate onclick handler.
// //
// Native `dblclick` exists, but on iOS Safari it also zooms the page; gating on // Native `dblclick` exists, but on iOS Safari it also zooms the page; gating on
// pointer events lets us preventDefault selectively and avoid the zoom. // pointer events lets us preventDefault selectively and avoid the zoom. Keyboard
// activation still arrives as a normal `click` (detail === 0) — handle that on the
// element itself for an immediate, latency-free open.
import type { ActionReturn } from 'svelte/action'; import type { ActionReturn } from 'svelte/action';
@@ -16,6 +21,7 @@ export interface DoubletapOptions {
interface DoubletapAttributes { interface DoubletapAttributes {
'ondoubletap'?: (event: CustomEvent<void>) => void; 'ondoubletap'?: (event: CustomEvent<void>) => void;
'onsingletap'?: (event: CustomEvent<void>) => void;
} }
export function doubletap( export function doubletap(
@@ -26,12 +32,21 @@ export function doubletap(
let lastTime = 0; let lastTime = 0;
let lastX = 0; let lastX = 0;
let lastY = 0; let lastY = 0;
let singleTimer: ReturnType<typeof setTimeout> | null = null;
const clearSingle = () => {
if (singleTimer) {
clearTimeout(singleTimer);
singleTimer = null;
}
};
const onPointerUp = (e: PointerEvent) => { const onPointerUp = (e: PointerEvent) => {
const now = performance.now(); const now = performance.now();
const dx = Math.abs(e.clientX - lastX); const dx = Math.abs(e.clientX - lastX);
const dy = Math.abs(e.clientY - lastY); const dy = Math.abs(e.clientY - lastY);
if (now - lastTime < interval && dx < MOVE_THRESHOLD && dy < MOVE_THRESHOLD) { if (now - lastTime < interval && dx < MOVE_THRESHOLD && dy < MOVE_THRESHOLD) {
clearSingle(); // the pending single-tap was actually the first of a double
e.preventDefault(); e.preventDefault();
node.dispatchEvent(new CustomEvent('doubletap')); node.dispatchEvent(new CustomEvent('doubletap'));
lastTime = 0; // reset so a triple-tap doesn't re-fire lastTime = 0; // reset so a triple-tap doesn't re-fire
@@ -40,6 +55,12 @@ export function doubletap(
lastTime = now; lastTime = now;
lastX = e.clientX; lastX = e.clientX;
lastY = e.clientY; lastY = e.clientY;
// Defer the single-tap action until we're sure no second tap follows.
clearSingle();
singleTimer = setTimeout(() => {
singleTimer = null;
node.dispatchEvent(new CustomEvent('singletap'));
}, interval);
}; };
node.addEventListener('pointerup', onPointerUp); node.addEventListener('pointerup', onPointerUp);
@@ -49,6 +70,7 @@ export function doubletap(
interval = newOptions.interval ?? INTERVAL_MS; interval = newOptions.interval ?? INTERVAL_MS;
}, },
destroy() { destroy() {
clearSingle();
node.removeEventListener('pointerup', onPointerUp); node.removeEventListener('pointerup', onPointerUp);
} }
}; };

5
frontend/src/lib/actions/focus-trap.ts
View File

@@ -17,8 +17,11 @@ const FOCUSABLE =
'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]'; 'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
function focusables(root: HTMLElement): HTMLElement[] { function focusables(root: HTMLElement): HTMLElement[] {
// `offsetParent` is null for any `position: fixed` element (and our sheets/modals
// are fixed), so it would wrongly drop their buttons. `getClientRects().length`
// is true whenever the element is actually rendered — fixed or not.
return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter( return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
(el) => !el.hasAttribute('disabled') && el.offsetParent !== null (el) => !el.hasAttribute('disabled') && el.getClientRects().length > 0
); );
} }

53
frontend/src/lib/actions/pull-to-refresh.ts
View File

@@ -22,8 +22,17 @@ export function pullToRefresh(
): ActionReturn<PullToRefreshOptions> { ): ActionReturn<PullToRefreshOptions> {
let opts = options; let opts = options;
let startY = 0; let startY = 0;
let startX = 0;
let pulling = false; let pulling = false;
let triggered = false; let triggered = false;
let intentLocked = false; // have we decided this gesture is a vertical pull?
// Distance the finger must travel before we commit to "this is a vertical pull"
// vs. a horizontal swipe or an incidental tap.
const INTENT_SLOP = 8;
// Rubber-band resistance: the sheet follows the finger at a fraction of 1:1 so
// the pull feels elastic rather than rigid.
const RESISTANCE = 0.5;
function scroller(): HTMLElement | (Window & typeof globalThis) { function scroller(): HTMLElement | (Window & typeof globalThis) {
return node.scrollHeight > node.clientHeight ? node : window; return node.scrollHeight > node.clientHeight ? node : window;
@@ -40,17 +49,54 @@ export function pullToRefresh(
opts.onpull(Math.max(0, delta), Math.max(0, delta) / threshold); opts.onpull(Math.max(0, delta), Math.max(0, delta) / threshold);
} }
function reset() {
pulling = false;
intentLocked = false;
}
function onTouchStart(e: TouchEvent) { function onTouchStart(e: TouchEvent) {
if (opts.disabled) return; if (opts.disabled) return;
// Ignore pinch / multi-finger gestures entirely.
if (e.touches.length !== 1) {
reset();
return;
}
if (scrollTop() > 0) return; if (scrollTop() > 0) return;
startY = e.touches[0].clientY; startY = e.touches[0].clientY;
startX = e.touches[0].clientX;
pulling = true; pulling = true;
triggered = false; triggered = false;
intentLocked = false;
} }
function onTouchMove(e: TouchEvent) { function onTouchMove(e: TouchEvent) {
if (!pulling || triggered) return; if (!pulling || triggered) return;
const delta = e.touches[0].clientY - startY; // A second finger landing mid-gesture cancels the pull.
if (e.touches.length !== 1) {
reset();
return;
}
const rawDy = e.touches[0].clientY - startY;
const dx = e.touches[0].clientX - startX;
// Decide intent once, after the finger has moved past the slop. A
// horizontal-dominant or upward move is not a pull — bail and let the
// browser scroll normally.
if (!intentLocked) {
if (Math.abs(rawDy) < INTENT_SLOP && Math.abs(dx) < INTENT_SLOP) return;
if (rawDy <= 0 || Math.abs(rawDy) <= Math.abs(dx)) {
reset();
return;
}
intentLocked = true;
}
// Committed vertical pull at the top edge: stop the browser's own
// overscroll / pull-to-refresh from competing for the gesture.
if (e.cancelable) e.preventDefault();
const delta = rawDy * RESISTANCE;
reportPull(delta); reportPull(delta);
if (delta > (opts.threshold ?? 60)) { if (delta > (opts.threshold ?? 60)) {
triggered = true; triggered = true;
@@ -60,11 +106,12 @@ export function pullToRefresh(
function onTouchEnd() { function onTouchEnd() {
if (pulling && !triggered) reportPull(0); if (pulling && !triggered) reportPull(0);
pulling = false; reset();
} }
node.addEventListener('touchstart', onTouchStart, { passive: true }); node.addEventListener('touchstart', onTouchStart, { passive: true });
node.addEventListener('touchmove', onTouchMove, { passive: true }); // Non-passive so we can preventDefault() once a top-edge pull is in progress.
node.addEventListener('touchmove', onTouchMove, { passive: false });
node.addEventListener('touchend', onTouchEnd); node.addEventListener('touchend', onTouchEnd);
node.addEventListener('touchcancel', onTouchEnd); node.addEventListener('touchcancel', onTouchEnd);

50
frontend/src/lib/actions/scroll-lock.ts Normal file
View File

@@ -0,0 +1,50 @@
// Body scroll-lock for open dialogs/sheets. While any locker is active, the
// document body can't scroll behind the overlay. Ref-counted so that nested or
// stacked dialogs (e.g. a ConfirmSheet opened from the LightboxModal) don't let
// the first one to close unlock the page out from under the others. Compensates
// for the vanished scrollbar width so the layout doesn't jump on lock.
import type { ActionReturn } from 'svelte/action';
let lockCount = 0;
let savedOverflow = '';
let savedPaddingRight = '';
function lock() {
if (typeof document === 'undefined') return;
if (lockCount === 0) {
const body = document.body;
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
savedOverflow = body.style.overflow;
savedPaddingRight = body.style.paddingRight;
body.style.overflow = 'hidden';
if (scrollbarWidth > 0) {
const current = parseFloat(getComputedStyle(body).paddingRight) || 0;
body.style.paddingRight = `${current + scrollbarWidth}px`;
}
}
lockCount++;
}
function unlock() {
if (typeof document === 'undefined') return;
lockCount = Math.max(0, lockCount - 1);
if (lockCount === 0) {
document.body.style.overflow = savedOverflow;
document.body.style.paddingRight = savedPaddingRight;
}
}
/**
* Locks body scroll for the lifetime of the node. Mount the node only while the
* dialog is open (e.g. inside `{#if open}` or alongside a `class:` toggle) so the
* action's create/destroy line up with open/close.
*/
export function scrollLock(node: HTMLElement): ActionReturn {
lock();
return {
destroy() {
unlock();
}
};
}

43
frontend/src/lib/api.ts
View File

@@ -13,6 +13,8 @@ export class ApiError extends Error {
} }
} }
const TIMEOUT_MS = 20_000;
async function request<T>( async function request<T>(
method: string, method: string,
path: string, path: string,
@@ -27,23 +29,50 @@ async function request<T>(
headers['Content-Type'] = 'application/json'; headers['Content-Type'] = 'application/json';
} }
const res = await fetch(`${BASE}${path}`, { // Abort hung requests so a dead connection surfaces as a friendly error
method, // instead of a spinner that never resolves.
headers, const controller = new AbortController();
body: body !== undefined ? JSON.stringify(body) : undefined const timer = setTimeout(() => controller.abort(), TIMEOUT_MS);
});
let res: Response;
try {
res = await fetch(`${BASE}${path}`, {
method,
headers,
body: body !== undefined ? JSON.stringify(body) : undefined,
signal: controller.signal
});
} catch (e) {
if (e instanceof DOMException && e.name === 'AbortError') {
throw new ApiError(0, 'timeout', 'Zeitüberschreitung – bitte erneut versuchen.');
}
throw new ApiError(0, 'network', 'Netzwerkfehler – bitte Verbindung prüfen.');
} finally {
clearTimeout(timer);
}
if (res.status === 204) { if (res.status === 204) {
return undefined as T; return undefined as T;
} }
const data = await res.json(); // A 5xx behind a proxy (or a crash page) can return HTML, not JSON — parsing
// it directly would throw an opaque SyntaxError. Read text, parse defensively.
const raw = await res.text();
let data: { error?: string; message?: string } | unknown = null;
if (raw) {
try {
data = JSON.parse(raw);
} catch {
data = null;
}
}
if (!res.ok) { if (!res.ok) {
if (res.status === 401) { if (res.status === 401) {
clearAuth(); clearAuth();
} }
throw new ApiError(res.status, data.error ?? 'unknown', data.message ?? 'Fehler'); const d = (data ?? {}) as { error?: string; message?: string };
throw new ApiError(res.status, d.error ?? 'unknown', d.message ?? `Serverfehler (${res.status}).`);
} }
return data as T; return data as T;

36
frontend/src/lib/components/CameraCapture.svelte
View File

@@ -48,7 +48,9 @@
try { try {
stream = await navigator.mediaDevices.getUserMedia({ stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode, width: { ideal: 1920 }, height: { ideal: 1080 } }, video: { facingMode, width: { ideal: 1920 }, height: { ideal: 1080 } },
audio: true // Only request the mic for video — a photo-only session shouldn't trigger
// a mic permission prompt (which also blocks capture on mic-less devices).
audio: mode === 'video'
}); });
if (videoEl) { if (videoEl) {
videoEl.srcObject = stream; videoEl.srcObject = stream;
@@ -78,6 +80,14 @@
await startCamera(); await startCamera();
} }
// Switching between photo and video changes whether we need the mic, so
// re-acquire the stream (lazily adding the mic for video, dropping it for photo).
async function setMode(next: 'photo' | 'video') {
if (mode === next) return;
mode = next;
await startCamera();
}
function capturePhoto() { function capturePhoto() {
if (!videoEl || !canvasEl) return; if (!videoEl || !canvasEl) return;
const ctx = canvasEl.getContext('2d'); const ctx = canvasEl.getContext('2d');
@@ -156,12 +166,20 @@
<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" /> <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> </svg>
<p class="text-sm text-white">{error}</p> <p class="text-sm text-white">{error}</p>
<button <div class="mt-4 flex justify-center gap-2">
onclick={onclose} <button
class="mt-4 rounded-lg bg-white/20 px-4 py-2 text-sm text-white" onclick={startCamera}
> class="rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-900"
Schliessen >
</button> Erneut versuchen
</button>
<button
onclick={onclose}
class="rounded-lg bg-white/20 px-4 py-2 text-sm text-white"
>
Schließen
</button>
</div>
</div> </div>
</div> </div>
{:else} {:else}
@@ -198,7 +216,7 @@
type="button" type="button"
role="tab" role="tab"
aria-selected={mode === 'photo'} aria-selected={mode === 'photo'}
onclick={() => (mode = 'photo')} onclick={() => setMode('photo')}
data-testid="camera-mode-photo" data-testid="camera-mode-photo"
class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'photo' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}" class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'photo' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
> >
@@ -208,7 +226,7 @@
type="button" type="button"
role="tab" role="tab"
aria-selected={mode === 'video'} aria-selected={mode === 'video'}
onclick={() => (mode = 'video')} onclick={() => setMode('video')}
data-testid="camera-mode-video" data-testid="camera-mode-video"
class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'video' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}" class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'video' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
> >

11
frontend/src/lib/components/ConfirmSheet.svelte
View File

@@ -6,6 +6,7 @@
<script lang="ts"> <script lang="ts">
import { focusTrap } from '$lib/actions/focus-trap'; import { focusTrap } from '$lib/actions/focus-trap';
import { scrollLock } from '$lib/actions/scroll-lock';
interface Props { interface Props {
open: boolean; open: boolean;
@@ -50,6 +51,7 @@
class="fixed inset-0 z-50 bg-black/40" class="fixed inset-0 z-50 bg-black/40"
aria-label="Schließen" aria-label="Schließen"
onclick={onCancel} onclick={onCancel}
disabled={busy}
tabindex="-1" tabindex="-1"
></button> ></button>
<div <div
@@ -60,6 +62,7 @@
aria-labelledby={titleId} aria-labelledby={titleId}
data-testid="confirm-sheet" data-testid="confirm-sheet"
use:focusTrap={{ onclose: onCancel }} use:focusTrap={{ onclose: onCancel }}
use:scrollLock
> >
<div class="mb-4 flex justify-center"> <div class="mb-4 flex justify-center">
<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div> <div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
@@ -77,17 +80,21 @@
onclick={handleConfirm} onclick={handleConfirm}
disabled={busy} disabled={busy}
data-testid="confirm-sheet-confirm" data-testid="confirm-sheet-confirm"
class="mb-3 w-full rounded-xl py-3 text-sm font-semibold text-white transition disabled:opacity-60 {tone === 'danger' class="mb-3 flex w-full items-center justify-center gap-2 rounded-xl py-3 text-sm font-semibold text-white transition disabled:opacity-60 {tone === 'danger'
? 'bg-red-600 hover:bg-red-700 active:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400' ? 'bg-red-600 hover:bg-red-700 active:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400'
: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400'}" : 'bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400'}"
> >
{#if busy}
<span class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" aria-hidden="true"></span>
{/if}
{confirmLabel} {confirmLabel}
</button> </button>
<button <button
type="button" type="button"
onclick={onCancel} onclick={onCancel}
disabled={busy}
data-testid="confirm-sheet-cancel" data-testid="confirm-sheet-cancel"
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800" class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 active:bg-gray-100 disabled:opacity-60 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
> >
{cancelLabel} {cancelLabel}
</button> </button>

8
frontend/src/lib/components/ContextSheet.svelte
View File

@@ -22,6 +22,8 @@
title?: string; title?: string;
} }
import { scrollLock } from '$lib/actions/scroll-lock';
let { open, actions, onClose, title }: Props = $props(); let { open, actions, onClose, title }: Props = $props();
let sheet = $state<HTMLDivElement | null>(null); let sheet = $state<HTMLDivElement | null>(null);
@@ -76,6 +78,12 @@
} }
</script> </script>
<!-- This sheet stays mounted (translate-y animation), so a sentinel that mounts only
while open drives the shared body scroll-lock. -->
{#if open}
<div use:scrollLock class="hidden"></div>
{/if}
<!-- Backdrop — real <button> so keyboard / switch-control users get parity. --> <!-- Backdrop — real <button> so keyboard / switch-control users get parity. -->
<button <button
type="button" type="button"

91
frontend/src/lib/components/FeedGrid.svelte
View File

@@ -1,91 +0,0 @@
<script lang="ts">
import type { FeedUpload } from '$lib/types';
import { dataMode } from '$lib/data-mode-store';
import { longpress } from '$lib/actions/longpress';
interface Props {
uploads: FeedUpload[];
onlike: (id: string) => void;
oncomment: (id: string) => void;
onselect: (upload: FeedUpload) => void;
oncontextmenu?: (upload: FeedUpload) => void;
threeCol?: boolean;
}
let { uploads, onlike, oncomment, onselect, oncontextmenu, threeCol = false }: Props =
$props();
function isVideo(mime: string): boolean {
return mime.startsWith('video/');
}
// Grid uses small thumbnails by design even in Original mode — full media is one tap
// away in the lightbox, where the data-mode picker decides for real.
function tileUrl(upload: FeedUpload): string {
if (upload.thumbnail_url) return upload.thumbnail_url;
if (upload.preview_url) return upload.preview_url;
return $dataMode === 'original' ? `/api/v1/upload/${upload.id}/original` : '';
}
</script>
<div class="grid gap-0.5 {threeCol ? 'grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'}">
{#each uploads as upload (upload.id)}
<div
class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
use:longpress={{ duration: 500 }}
onlongpress={() => oncontextmenu?.(upload)}
>
<button
onclick={() => onselect(upload)}
class="block h-full w-full"
aria-label="Upload anzeigen"
>
{#if isVideo(upload.mime_type)}
<div class="flex h-full items-center justify-center bg-gray-800">
{#if tileUrl(upload)}
<img src={tileUrl(upload)} alt="" class="h-full w-full object-cover" />
{/if}
<div class="absolute inset-0 flex items-center justify-center">
<svg class="h-10 w-10 text-white/80" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
</div>
</div>
{:else if tileUrl(upload)}
<img src={tileUrl(upload)} alt="" class="h-full w-full object-cover" loading="lazy" />
{:else}
<div class="flex h-full items-center justify-center text-gray-400">
<svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
{/if}
</button>
<!-- Overlay with name and stats -->
<div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2">
<p class="truncate text-xs font-medium text-white">{upload.uploader_name}</p>
<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
<button
class="pointer-events-auto flex items-center gap-0.5"
onclick={(e) => { e.stopPropagation(); onlike(upload.id); }}
>
<svg class="h-3.5 w-3.5 {upload.liked_by_me ? 'fill-red-400 text-red-400' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
{upload.like_count}
</button>
<button
class="pointer-events-auto flex items-center gap-0.5"
onclick={(e) => { e.stopPropagation(); oncomment(upload.id); }}
>
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
{upload.comment_count}
</button>
</div>
</div>
</div>
{/each}
</div>

69
frontend/src/lib/components/FeedListCard.svelte
View File

@@ -6,11 +6,9 @@
import { doubletap } from '$lib/actions/doubletap'; import { doubletap } from '$lib/actions/doubletap';
import { avatarPalette, initials } from '$lib/avatar'; import { avatarPalette, initials } from '$lib/avatar';
import { vibrate } from '$lib/haptics'; import { vibrate } from '$lib/haptics';
import { now } from '$lib/now';
import HeartBurst from './HeartBurst.svelte'; import HeartBurst from './HeartBurst.svelte';
// Single-tap debounce so a double-tap doesn't briefly open the lightbox.
const SINGLE_TAP_DELAY_MS = 260;
interface Props { interface Props {
upload: FeedUpload; upload: FeedUpload;
isOwn?: boolean; isOwn?: boolean;
@@ -35,8 +33,8 @@
const mediaSrc = $derived(pickMediaUrl($dataMode, upload)); const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
function relativeTime(iso: string): string { function relativeTime(iso: string, nowMs: number): string {
const diff = Date.now() - new Date(iso).getTime(); const diff = nowMs - new Date(iso).getTime();
const mins = Math.floor(diff / 60000); const mins = Math.floor(diff / 60000);
if (mins < 1) return 'gerade eben'; if (mins < 1) return 'gerade eben';
if (mins < 60) return `vor ${mins} Min.`; if (mins < 60) return `vor ${mins} Min.`;
@@ -46,44 +44,35 @@
return `vor ${days} Tag${days === 1 ? '' : 'en'}`; return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
} }
// Re-derives off the shared 60s clock so "vor 5 Min." actually advances.
const relTime = $derived(relativeTime(upload.created_at, $now));
function openContext() { function openContext() {
oncontextmenu?.(upload); oncontextmenu?.(upload);
} }
// Inline heart-burst on double-tap (consistent with the lightbox). // Inline heart-burst on double-tap (consistent with the lightbox).
let heartBurst = $state(false); let heartBurst = $state(false);
let singleTapTimer: ReturnType<typeof setTimeout> | null = null; let burstTimer: ReturnType<typeof setTimeout> | null = null;
function handleMediaClick() {
// Delay single-tap so a quick second tap (double-tap-to-like) wins.
if (singleTapTimer) clearTimeout(singleTapTimer);
singleTapTimer = setTimeout(() => {
singleTapTimer = null;
onselect(upload);
}, SINGLE_TAP_DELAY_MS);
}
function handleDoubleTap() { function handleDoubleTap() {
if (singleTapTimer) {
clearTimeout(singleTapTimer);
singleTapTimer = null;
}
heartBurst = true; heartBurst = true;
vibrate(10); vibrate(10);
onlike(upload.id); onlike(upload.id);
setTimeout(() => (heartBurst = false), 700); if (burstTimer) clearTimeout(burstTimer);
burstTimer = setTimeout(() => (heartBurst = false), 700);
} }
// A feed-delta SSE event can remove this card mid-pending-tap. Clear the timer // Clear the burst timer on unmount (a feed-delta SSE event can remove this
// on unmount so we don't call onselect with a stale upload reference. // card mid-animation) so it can't fire against a stale component.
onDestroy(() => { onDestroy(() => {
if (singleTapTimer) { if (burstTimer) clearTimeout(burstTimer);
clearTimeout(singleTapTimer);
singleTapTimer = null;
}
}); });
</script> </script>
<!-- Off-screen cards are removed from the DOM entirely by the parent VirtualFeed
window-virtualizer, so this card no longer needs content-visibility — and must
not use it, since the virtualizer measures each card's real rendered height. -->
<article <article
class="bg-white dark:bg-gray-900" class="bg-white dark:bg-gray-900"
use:longpress={{ duration: 500 }} use:longpress={{ duration: 500 }}
@@ -100,7 +89,7 @@
</div> </div>
<div class="min-w-0"> <div class="min-w-0">
<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{upload.uploader_name}</p> <p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{upload.uploader_name}</p>
<p class="text-xs text-gray-400 dark:text-gray-500">{relativeTime(upload.created_at)}</p> <p class="text-xs text-gray-400 dark:text-gray-500">{relTime}</p>
</div> </div>
</div> </div>
@@ -120,9 +109,10 @@
<!-- Media --> <!-- Media -->
<button <button
class="relative block w-full" class="relative block w-full"
onclick={handleMediaClick}
use:doubletap use:doubletap
onsingletap={() => onselect(upload)}
ondoubletap={handleDoubleTap} ondoubletap={handleDoubleTap}
onclick={(e) => { if (e.detail === 0) onselect(upload); }}
aria-label="Bild vergrößern" aria-label="Bild vergrößern"
> >
<HeartBurst active={heartBurst} /> <HeartBurst active={heartBurst} />
@@ -133,6 +123,8 @@
src={upload.thumbnail_url ?? upload.preview_url ?? ''} src={upload.thumbnail_url ?? upload.preview_url ?? ''}
alt="" alt=""
class="h-full w-full object-cover opacity-80" class="h-full w-full object-cover opacity-80"
loading="lazy"
decoding="async"
/> />
{/if} {/if}
<div class="absolute inset-0 flex items-center justify-center"> <div class="absolute inset-0 flex items-center justify-center">
@@ -144,13 +136,18 @@
</div> </div>
</div> </div>
{:else if mediaSrc} {:else if mediaSrc}
<img <!-- Reserve the same 4/5 box the skeleton uses so the card doesn't collapse
src={mediaSrc} to height 0 and reflow as images stream in. The uncropped original is one
alt="" tap away in the lightbox. -->
class="w-full object-cover" <div class="aspect-[4/5] w-full bg-gray-100 dark:bg-gray-800">
style="max-height: 80svh" <img
loading="lazy" src={mediaSrc}
/> alt=""
class="h-full w-full object-cover"
loading="lazy"
decoding="async"
/>
</div>
{:else} {:else}
<div class="flex aspect-square w-full items-center justify-center bg-gray-100 dark:bg-gray-800"> <div class="flex aspect-square w-full items-center justify-center bg-gray-100 dark:bg-gray-800">
<svg class="h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -164,6 +161,8 @@
<div class="flex items-center gap-4 px-4 py-2"> <div class="flex items-center gap-4 px-4 py-2">
<button <button
onclick={() => { vibrate(10); onlike(upload.id); }} onclick={() => { vibrate(10); onlike(upload.id); }}
aria-pressed={upload.liked_by_me}
aria-label={upload.liked_by_me ? 'Gefällt mir nicht mehr' : 'Gefällt mir'}
class="flex items-center gap-1.5 text-sm font-medium transition-colors class="flex items-center gap-1.5 text-sm font-medium transition-colors
{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 active:text-red-400 dark:text-gray-400 dark:hover:text-red-400 dark:active:text-red-400'}" {upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 active:text-red-400 dark:text-gray-400 dark:hover:text-red-400 dark:active:text-red-400'}"
> >

6
frontend/src/lib/components/HashtagChips.svelte
View File

@@ -17,7 +17,8 @@
<div class="flex gap-2 overflow-x-auto pb-2"> <div class="flex gap-2 overflow-x-auto pb-2">
<button <button
onclick={() => onselect(null)} onclick={() => onselect(null)}
class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition { aria-pressed={selected === null}
class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {
selected === null selected === null
? 'bg-blue-600 text-white dark:bg-blue-500' ? 'bg-blue-600 text-white dark:bg-blue-500'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700' : 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
@@ -28,7 +29,8 @@
{#each hashtags as h (h.tag)} {#each hashtags as h (h.tag)}
<button <button
onclick={() => onselect(h.tag)} onclick={() => onselect(h.tag)}
class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition { aria-pressed={selected === h.tag}
class="inline-flex min-h-11 shrink-0 items-center rounded-full px-4 py-2 text-sm font-medium transition {
selected === h.tag selected === h.tag
? 'bg-blue-600 text-white dark:bg-blue-500' ? 'bg-blue-600 text-white dark:bg-blue-500'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700' : 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'

55
frontend/src/lib/components/IconButton.svelte Normal file
View File

@@ -0,0 +1,55 @@
<script lang="ts">
// Icon-only button with a guaranteed ≥44px touch target (WCAG 2.5.5 / Apple HIG).
// The visible icon stays whatever size the caller renders; the hit area is
// enforced via min-h-11 min-w-11 (44px) so small glyphs are still comfortably
// tappable. Always require an `aria-label` since there's no text content.
import type { Snippet } from 'svelte';
interface Props {
/** Accessible name — required, the button has no visible text. */
label: string;
onclick?: (e: MouseEvent) => void;
disabled?: boolean;
title?: string;
type?: 'button' | 'submit';
tone?: 'neutral' | 'danger';
/** Marks toggle state for AT (e.g. like buttons). Omit for plain actions. */
pressed?: boolean;
/** Extra classes appended after the base styles. */
class?: string;
'data-testid'?: string;
children: Snippet;
}
let {
label,
onclick,
disabled = false,
title,
type = 'button',
tone = 'neutral',
pressed,
class: extra = '',
'data-testid': testid,
children
}: Props = $props();
const toneClass = $derived(
tone === 'danger'
? 'text-red-600 hover:bg-red-50 active:bg-red-100 dark:text-red-400 dark:hover:bg-red-950/40 dark:active:bg-red-950/60'
: 'text-gray-500 hover:bg-gray-100 active:bg-gray-200 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:hover:text-gray-100'
);
</script>
<button
{type}
{onclick}
{disabled}
{title}
aria-label={label}
aria-pressed={pressed}
data-testid={testid}
class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-full transition-colors disabled:opacity-50 disabled:pointer-events-none {toneClass} {extra}"
>
{@render children()}
</button>

13
frontend/src/lib/components/LightboxModal.svelte
View File

@@ -1,10 +1,12 @@
<script lang="ts"> <script lang="ts">
import { onDestroy } from 'svelte';
import type { FeedUpload } from '$lib/types'; import type { FeedUpload } from '$lib/types';
import { api } from '$lib/api'; import { api } from '$lib/api';
import { getUserId } from '$lib/auth'; import { getUserId } from '$lib/auth';
import { dataMode, pickMediaUrl } from '$lib/data-mode-store'; import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
import { doubletap } from '$lib/actions/doubletap'; import { doubletap } from '$lib/actions/doubletap';
import { focusTrap } from '$lib/actions/focus-trap'; import { focusTrap } from '$lib/actions/focus-trap';
import { scrollLock } from '$lib/actions/scroll-lock';
import { toastError } from '$lib/toast-store'; import { toastError } from '$lib/toast-store';
import { vibrate } from '$lib/haptics'; import { vibrate } from '$lib/haptics';
import HeartBurst from './HeartBurst.svelte'; import HeartBurst from './HeartBurst.svelte';
@@ -33,6 +35,7 @@
let loading = $state(false); let loading = $state(false);
let userId = getUserId(); let userId = getUserId();
let heartBurst = $state(false); let heartBurst = $state(false);
let burstTimer: ReturnType<typeof setTimeout> | null = null;
const mediaSrc = $derived(pickMediaUrl($dataMode, upload)); const mediaSrc = $derived(pickMediaUrl($dataMode, upload));
@@ -40,9 +43,14 @@
heartBurst = true; heartBurst = true;
vibrate(10); vibrate(10);
onlike(upload.id); onlike(upload.id);
setTimeout(() => (heartBurst = false), 700); if (burstTimer) clearTimeout(burstTimer);
burstTimer = setTimeout(() => (heartBurst = false), 700);
} }
onDestroy(() => {
if (burstTimer) clearTimeout(burstTimer);
});
$effect(() => { $effect(() => {
loadComments(); loadComments();
}); });
@@ -97,6 +105,7 @@
aria-modal="true" aria-modal="true"
aria-labelledby="lightbox-title" aria-labelledby="lightbox-title"
use:focusTrap={{ onclose }} use:focusTrap={{ onclose }}
use:scrollLock
> >
<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900"> <div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900">
<!-- Media --> <!-- Media -->
@@ -104,7 +113,7 @@
<button <button
onclick={onclose} onclick={onclose}
aria-label="Schließen" aria-label="Schließen"
class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70 active:bg-black/70" class="absolute right-2 top-2 z-10 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 active:bg-black/70"
> >
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

2
frontend/src/lib/components/Modal.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { focusTrap } from '$lib/actions/focus-trap'; import { focusTrap } from '$lib/actions/focus-trap';
import { scrollLock } from '$lib/actions/scroll-lock';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
// Accessible name is REQUIRED. Pass `titleId` when the dialog renders its own // Accessible name is REQUIRED. Pass `titleId` when the dialog renders its own
@@ -48,6 +49,7 @@
aria-labelledby={titleId} aria-labelledby={titleId}
aria-label={titleId ? undefined : ariaLabel} aria-label={titleId ? undefined : ariaLabel}
use:focusTrap={{ onclose: onClose }} use:focusTrap={{ onclose: onClose }}
use:scrollLock
> >
<div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900"> <div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
{@render children()} {@render children()}

2
frontend/src/lib/components/OnboardingGuide.svelte
View File

@@ -3,6 +3,7 @@
import { privacyNote } from '$lib/privacy-note-store'; import { privacyNote } from '$lib/privacy-note-store';
import { themePreference, type ThemePreference } from '$lib/theme-store'; import { themePreference, type ThemePreference } from '$lib/theme-store';
import { focusTrap } from '$lib/actions/focus-trap'; import { focusTrap } from '$lib/actions/focus-trap';
import { scrollLock } from '$lib/actions/scroll-lock';
import { vibrate } from '$lib/haptics'; import { vibrate } from '$lib/haptics';
const GUIDE_SEEN_KEY = 'eventsnap_guide_seen'; const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';
@@ -100,6 +101,7 @@
aria-modal="true" aria-modal="true"
aria-labelledby="onboarding-title" aria-labelledby="onboarding-title"
use:focusTrap={{ onclose: dismiss }} use:focusTrap={{ onclose: dismiss }}
use:scrollLock
> >
<!-- Step indicator — tap a pip to jump back. The visible dot is small but <!-- Step indicator — tap a pip to jump back. The visible dot is small but
the touch target is padded to ~44 px so it remains tappable on mobile. --> the touch target is padded to ~44 px so it remains tappable on mobile. -->

4
frontend/src/lib/components/Toaster.svelte
View File

@@ -19,15 +19,17 @@
class="pointer-events-none fixed inset-x-0 z-[60] flex flex-col items-center gap-2 px-4" class="pointer-events-none fixed inset-x-0 z-[60] flex flex-col items-center gap-2 px-4"
style="bottom: calc(env(safe-area-inset-bottom) + 5rem)" style="bottom: calc(env(safe-area-inset-bottom) + 5rem)"
role="region" role="region"
aria-live="polite"
aria-label="Benachrichtigungen" aria-label="Benachrichtigungen"
data-testid="toaster" data-testid="toaster"
> >
{#each $toasts as t (t.id)} {#each $toasts as t (t.id)}
<!-- Errors/warnings interrupt (assertive/alert); successes wait their turn (polite/status). -->
<button <button
type="button" type="button"
onclick={() => dismissToast(t.id)} onclick={() => dismissToast(t.id)}
class="pointer-events-auto w-full max-w-sm rounded-xl px-4 py-3 text-left text-sm font-medium shadow-lg transition active:scale-[0.98] {toneClasses(t.tone)}" class="pointer-events-auto w-full max-w-sm rounded-xl px-4 py-3 text-left text-sm font-medium shadow-lg transition active:scale-[0.98] {toneClasses(t.tone)}"
role={t.tone === 'error' || t.tone === 'warning' ? 'alert' : 'status'}
aria-live={t.tone === 'error' || t.tone === 'warning' ? 'assertive' : 'polite'}
data-testid="toast" data-testid="toast"
data-toast-tone={t.tone} data-toast-tone={t.tone}
> >

34
frontend/src/lib/components/UploadQueue.svelte
View File

@@ -19,10 +19,10 @@
function statusColor(status: QueueItem['status']): string { function statusColor(status: QueueItem['status']): string {
switch (status) { switch (status) {
case 'pending': return 'text-gray-500'; case 'pending': return 'text-gray-500 dark:text-gray-400';
case 'uploading': return 'text-blue-600'; case 'uploading': return 'text-blue-600 dark:text-blue-400';
case 'done': return 'text-green-600'; case 'done': return 'text-green-600 dark:text-green-400';
case 'error': return 'text-red-600'; case 'error': return 'text-red-600 dark:text-red-400';
} }
} }
@@ -50,9 +50,9 @@
</script> </script>
{#if items.length > 0} {#if items.length > 0}
<div class="mt-4 rounded-lg border border-gray-200 bg-white"> <div class="mt-4 rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3"> <div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800">
<h3 class="text-sm font-semibold text-gray-900"> <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
Upload-Warteschlange Upload-Warteschlange
{#if $isProcessing} {#if $isProcessing}
<span class="ml-2 inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500"></span> <span class="ml-2 inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500"></span>
@@ -61,7 +61,7 @@
{#if hasCompleted} {#if hasCompleted}
<button <button
onclick={() => clearCompleted()} onclick={() => clearCompleted()}
class="text-xs text-gray-500 hover:text-gray-700" class="inline-flex min-h-11 items-center px-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
> >
Fertige entfernen Fertige entfernen
</button> </button>
@@ -69,18 +69,18 @@
</div> </div>
{#if $rateLimitRetryAt && countdown > 0} {#if $rateLimitRetryAt && countdown > 0}
<div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800"> <div class="border-b border-amber-100 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-300">
Upload-Limit erreicht. Wird in {countdown} Sek. automatisch fortgesetzt. Upload-Limit erreicht. Wird in {countdown} Sek. automatisch fortgesetzt.
</div> </div>
{/if} {/if}
<ul class="divide-y divide-gray-100"> <ul class="divide-y divide-gray-100 dark:divide-gray-800">
{#each items as item (item.id)} {#each items as item (item.id)}
<li class="px-4 py-3"> <li class="px-4 py-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-gray-900">{item.fileName}</p> <p class="truncate text-sm font-medium text-gray-900 dark:text-gray-100">{item.fileName}</p>
<p class="text-xs text-gray-500">{formatSize(item.fileSize)}</p> <p class="text-xs text-gray-500 dark:text-gray-400">{formatSize(item.fileSize)}</p>
</div> </div>
<div class="ml-3 flex items-center gap-2"> <div class="ml-3 flex items-center gap-2">
<span class="text-xs font-medium {statusColor(item.status)}"> <span class="text-xs font-medium {statusColor(item.status)}">
@@ -89,7 +89,7 @@
{#if item.status === 'error'} {#if item.status === 'error'}
<button <button
onclick={() => retryItem(item.id)} onclick={() => retryItem(item.id)}
class="rounded bg-red-100 px-2 py-0.5 text-xs text-red-700 hover:bg-red-200" class="inline-flex min-h-11 items-center rounded bg-red-100 px-3 text-xs font-medium text-red-700 hover:bg-red-200 dark:bg-red-950/40 dark:text-red-300 dark:hover:bg-red-950/60"
> >
Erneut Erneut
</button> </button>
@@ -97,7 +97,7 @@
{#if item.status === 'done' || item.status === 'error'} {#if item.status === 'done' || item.status === 'error'}
<button <button
onclick={() => removeItem(item.id)} onclick={() => removeItem(item.id)}
class="text-gray-400 hover:text-gray-600" class="inline-flex h-9 w-9 items-center justify-center text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
aria-label="Entfernen" aria-label="Entfernen"
> >
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -109,17 +109,17 @@
</div> </div>
{#if item.status === 'uploading'} {#if item.status === 'uploading'}
<div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200"> <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div <div
class="h-full rounded-full bg-blue-500 transition-all duration-300" class="h-full rounded-full bg-blue-500 transition-all duration-300"
style="width: {item.progress}%" style="width: {item.progress}%"
></div> ></div>
</div> </div>
<p class="mt-1 text-right text-xs text-gray-400">{item.progress}%</p> <p class="mt-1 text-right text-xs text-gray-400 dark:text-gray-500">{item.progress}%</p>
{/if} {/if}
{#if item.error} {#if item.error}
<p class="mt-1 text-xs text-red-500">{item.error}</p> <p class="mt-1 text-xs text-red-500 dark:text-red-400">{item.error}</p>
{/if} {/if}
</li> </li>
{/each} {/each}

64
frontend/src/lib/components/UploadSheet.svelte
View File

@@ -2,11 +2,14 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { uploadSheetOpen } from '$lib/ui-store'; import { uploadSheetOpen } from '$lib/ui-store';
import { pendingFiles } from '$lib/pending-upload-store'; import { pendingFiles } from '$lib/pending-upload-store';
import { scrollLock } from '$lib/actions/scroll-lock';
import CameraCapture from '$lib/components/CameraCapture.svelte'; import CameraCapture from '$lib/components/CameraCapture.svelte';
import type { PendingFile } from '$lib/pending-upload-store'; import type { PendingFile } from '$lib/pending-upload-store';
let showCamera = $state(false); let showCamera = $state(false);
let fileInput: HTMLInputElement; let fileInput: HTMLInputElement;
let sheet = $state<HTMLDivElement | null>(null);
let returnFocus: HTMLElement | null = null;
// Keep the sheet and backdrop always in the DOM for smooth CSS transitions. // Keep the sheet and backdrop always in the DOM for smooth CSS transitions.
let open = $derived($uploadSheetOpen); let open = $derived($uploadSheetOpen);
@@ -15,6 +18,47 @@
uploadSheetOpen.set(false); uploadSheetOpen.set(false);
} }
// Focus-trap + Escape, wired manually because the sheet stays mounted for its
// translate-y animation (so use:focusTrap, which activates on mount, won't do).
// Mirrors ContextSheet. Suspended while the camera overlay owns the screen.
function onKeyDown(e: KeyboardEvent) {
if (showCamera) return;
if (e.key === 'Escape') {
e.preventDefault();
close();
return;
}
if (e.key !== 'Tab' || !sheet) return;
const list = Array.from(sheet.querySelectorAll<HTMLElement>('button:not([disabled])'));
if (list.length === 0) return;
const first = list[0];
const last = list[list.length - 1];
const active = document.activeElement as HTMLElement | null;
if (e.shiftKey && (active === first || !sheet.contains(active))) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && active === last) {
e.preventDefault();
first.focus();
}
}
$effect(() => {
if (open) {
returnFocus = (document.activeElement as HTMLElement | null) ?? null;
requestAnimationFrame(() => {
if (showCamera) return;
const first = sheet?.querySelector<HTMLButtonElement>('button:not([disabled])');
first?.focus({ preventScroll: true });
});
window.addEventListener('keydown', onKeyDown);
return () => window.removeEventListener('keydown', onKeyDown);
} else if (returnFocus) {
try { returnFocus.focus({ preventScroll: true }); } catch { /* element gone */ }
returnFocus = null;
}
});
function openGallery() { function openGallery() {
fileInput?.click(); fileInput?.click();
} }
@@ -68,22 +112,34 @@
onchange={handleFiles} onchange={handleFiles}
/> />
<!-- Backdrop --> <!-- Lock body scroll only while open (sheet stays mounted for its animation). -->
<div {#if open && !showCamera}
<div use:scrollLock class="hidden"></div>
{/if}
<!-- Backdrop — real <button> so keyboard / switch-control users get parity. -->
<button
type="button"
class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300" class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300"
class:opacity-0={!open} class:opacity-0={!open}
class:pointer-events-none={!open} class:pointer-events-none={!open}
class:opacity-100={open} class:opacity-100={open}
onclick={close} onclick={close}
aria-hidden="true" tabindex="-1"
></div> aria-label="Schließen"
></button>
<!-- Sheet --> <!-- Sheet -->
<div <div
bind:this={sheet}
class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300 dark:bg-gray-900" class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300 dark:bg-gray-900"
class:translate-y-full={!open} class:translate-y-full={!open}
class:translate-y-0={open} class:translate-y-0={open}
style="padding-bottom: env(safe-area-inset-bottom)" style="padding-bottom: env(safe-area-inset-bottom)"
role="dialog"
aria-modal="true"
aria-label="Hochladen"
tabindex="-1"
> >
<!-- Drag handle --> <!-- Drag handle -->
<div class="flex justify-center pt-3 pb-1"> <div class="flex justify-center pt-3 pb-1">

295
frontend/src/lib/components/VirtualFeed.svelte Normal file
View File

@@ -0,0 +1,295 @@
<script lang="ts">
// DOM-windowing for the feed. Only the cards/rows inside (and a small overscan
// around) the viewport are kept in the DOM — at ~1000 uploads this is the
// difference between ~1000 heavy cards (each with its own image, HeartBurst,
// long-press + double-tap listeners) and ~10-15.
//
// We use TanStack's *window* virtualizer (not an inner scroll container) on
// purpose: the feed scrolls the document, and the page's sticky header,
// pull-to-refresh, infinite-scroll sentinel and bottom nav all rely on that.
// The window virtualizer measures against `window` scroll, so every one of
// those keeps working untouched.
//
// Two layouts share one mechanism:
// list — one full-width FeedListCard per row, heights *measured* (captions
// make them variable). Keyed by upload id + `anchorTo:'start'` so an
// SSE prepend (new upload) doesn't yank a scrolled-down reader.
// grid — three square tiles per row, uniform height; still measured to shrug
// off sub-pixel drift over hundreds of rows.
import { createWindowVirtualizer } from '@tanstack/svelte-virtual';
import { untrack } from 'svelte';
import { get } from 'svelte/store';
import { browser } from '$app/environment';
import type { FeedUpload } from '$lib/types';
import { dataMode } from '$lib/data-mode-store';
import { longpress } from '$lib/actions/longpress';
import FeedListCard from './FeedListCard.svelte';
interface Props {
uploads: FeedUpload[];
mode: 'list' | 'grid';
myUserId: string | null;
onlike: (id: string) => void;
oncomment: (id: string) => void;
onselect: (upload: FeedUpload) => void;
oncontextmenu?: (upload: FeedUpload) => void;
}
let { uploads, mode, myUserId, onlike, oncomment, onselect, oncontextmenu }: Props =
$props();
const COLS = 3;
const GRID_GAP = 2; // px — matches the `gap-0.5` the non-virtual grid used.
const LIST_ESTIMATE = 700; // px — first-paint guess; real heights replace it on measure.
let listEl = $state<HTMLDivElement>();
let containerWidth = $state(0);
// Distance from the top of the document to the list container, i.e. the height
// of everything above it (sticky header + chips/search). Items' `start` values
// are document-absolute (they include this margin), so we feed it back as
// `scrollMargin` and subtract it again when positioning. Read live from layout
// (getBoundingClientRect + scrollY is scroll-independent) so it self-corrects
// when the header grows — e.g. grid filter chips appear.
let scrollMargin = $state(0);
const rowCount = $derived(mode === 'grid' ? Math.ceil(uploads.length / COLS) : uploads.length);
const colWidth = $derived(
containerWidth > 0 ? (containerWidth - (COLS - 1) * GRID_GAP) / COLS : 120
);
function isVideo(mime: string): boolean {
return mime.startsWith('video/');
}
// Grid tiles always use the small thumbnail — full media is one tap away in the
// lightbox where the data-mode picker decides for real.
function tileUrl(upload: FeedUpload): string {
if (upload.thumbnail_url) return upload.thumbnail_url;
if (upload.preview_url) return upload.preview_url;
return $dataMode === 'original' ? `/api/v1/upload/${upload.id}/original` : '';
}
// STABLE option callbacks — created once, never swapped. They read the live
// reactive values (`colWidth`, `uploads`, `mode`) at *call* time, so they stay
// current without needing a new function reference. This matters: `getItemKey`
// is a dependency of virtual-core's measurements memo, so handing it a fresh
// closure on every render would force an O(n) recompute. List keys by upload id
// (so an SSE prepend keeps measured heights attached to the right card); grid
// keys by row index (uniform rows, nothing to preserve).
const estimateSize = (_i: number) => (mode === 'grid' ? colWidth : LIST_ESTIMATE);
const getItemKey = (i: number) => (mode === 'list' ? (uploads[i]?.id ?? i) : i);
// `mode` is fixed for the lifetime of an instance (list and grid are rendered as
// separate <VirtualFeed> elements in the parent's {#if} branches, so toggling
// remounts rather than mutating this prop). Snapshot it without a reactive read
// to set the layout-constant options once.
const isGrid = untrack(() => mode === 'grid');
// Created with static placeholder count/margin; `applyOptions` pushes those.
const virtualizer = createWindowVirtualizer<HTMLDivElement>({
count: 0,
estimateSize,
getItemKey,
overscan: isGrid ? 4 : 3,
gap: isGrid ? GRID_GAP : 0,
anchorTo: 'start',
scrollMargin: 0
});
// Only `count` (load-more / prepend / delete) and `scrollMargin` (header height
// shifts) actually need to be pushed into the virtualizer. Like/comment SSE
// patches reassign `uploads` without changing its length — those must NOT
// trigger a setOptions (and its getBoundingClientRect reflow + store churn); the
// affected card re-renders through normal reactivity instead. We read the raw
// instance via `get()` rather than `$virtualizer` so writing never re-triggers
// this effect (that would loop).
let appliedCount = -1;
let appliedMargin = Number.NaN;
function applyOptions() {
const count = rowCount;
const margin = listEl ? listEl.getBoundingClientRect().top + window.scrollY : 0;
scrollMargin = margin; // drives the template transforms
if (count === appliedCount && Math.abs(margin - appliedMargin) < 0.5) return;
appliedCount = count;
appliedMargin = margin;
get(virtualizer).setOptions({ count, scrollMargin: margin });
}
// Re-apply when the row count or column width changes (load-more, prepend,
// delete, filter, rotate). `colWidth`/`rowCount` are the only tracked reads, so a
// length-stable like/comment patch doesn't re-run this.
$effect(() => {
void rowCount;
void colWidth;
applyOptions();
});
// Header offset can also shift on resize without a count change (orientation,
// on-screen keyboard, font scaling).
$effect(() => {
if (!browser) return;
const onResize = () => applyOptions();
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
});
// Hand each rendered row to the virtualizer's ResizeObserver (it reads the row's
// `data-index` and caches the real height by item key). On `destroy` we call
// `measureElement(null)`, which sweeps now-disconnected nodes out of the
// internal cache + ResizeObserver — without it, every card that scrolls out of
// the window stays observed and retained, defeating the point of virtualizing.
function measure(node: HTMLDivElement) {
get(virtualizer).measureElement(node);
return {
update() {
get(virtualizer).measureElement(node);
},
destroy() {
get(virtualizer).measureElement(null);
}
};
}
</script>
<div bind:this={listEl} bind:clientWidth={containerWidth} class="w-full">
{#if browser}
<div style="position: relative; width: 100%; height: {$virtualizer.getTotalSize()}px;">
{#each $virtualizer.getVirtualItems() as item (item.key)}
{#if mode === 'list'}
{@const upload = uploads[item.index]}
<div
data-index={item.index}
use:measure
style="position: absolute; top: 0; left: 0; width: 100%; transform: translateY({item.start -
scrollMargin}px);"
>
{#if upload}
<FeedListCard
{upload}
isOwn={upload.user_id === myUserId}
{onlike}
{oncomment}
{onselect}
{oncontextmenu}
/>
{/if}
</div>
{:else}
<div
data-index={item.index}
use:measure
style="position: absolute; top: 0; left: 0; width: 100%; transform: translateY({item.start -
scrollMargin}px);"
>
<div class="grid grid-cols-3 gap-0.5">
{#each uploads.slice(item.index * COLS, item.index * COLS + COLS) as upload (upload.id)}
<!-- Tile — mirrors the markup the old FeedGrid used. -->
<div
class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
use:longpress={{ duration: 500 }}
onlongpress={() => oncontextmenu?.(upload)}
>
<button
onclick={() => onselect(upload)}
class="block h-full w-full"
aria-label="Upload anzeigen"
>
{#if isVideo(upload.mime_type)}
<div class="flex h-full items-center justify-center bg-gray-800">
{#if tileUrl(upload)}
<img
src={tileUrl(upload)}
alt=""
class="h-full w-full object-cover"
loading="lazy"
decoding="async"
/>
{/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 tileUrl(upload)}
<img
src={tileUrl(upload)}
alt=""
class="h-full w-full object-cover"
loading="lazy"
decoding="async"
/>
{: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>
<div
class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2"
>
<p class="truncate text-xs font-medium text-white">{upload.uploader_name}</p>
<div class="mt-0.5 flex items-center gap-3 text-xs text-white/80">
<button
class="pointer-events-auto -m-1 flex items-center gap-0.5 p-1"
onclick={(e) => {
e.stopPropagation();
onlike(upload.id);
}}
aria-pressed={upload.liked_by_me}
aria-label={upload.liked_by_me ? 'Gefällt mir nicht mehr' : 'Gefällt mir'}
>
<svg
class="h-4 w-4 {upload.liked_by_me ? 'fill-red-400 text-red-400' : ''}"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
{upload.like_count}
</button>
<button
class="pointer-events-auto -m-1 flex items-center gap-0.5 p-1"
onclick={(e) => {
e.stopPropagation();
oncomment(upload.id);
}}
aria-label="Kommentare anzeigen"
>
<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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
{upload.comment_count}
</button>
</div>
</div>
</div>
{/each}
</div>
</div>
{/if}
{/each}
</div>
{/if}
</div>

2
frontend/src/lib/data-mode-store.ts
View File

@@ -5,7 +5,7 @@
// of the device the guest is currently holding, not their identity. // of the device the guest is currently holding, not their identity.
// //
// Used by: // Used by:
// - Feed cards (FeedListCard / FeedGrid) to pick which URL to render // - Feed cards (FeedListCard / VirtualFeed grid tiles) to pick which URL to render
// - Lightbox // - Lightbox
// - Diashow // - Diashow
// See [docs/FEATURES.md §2.5] for the user-facing model. // See [docs/FEATURES.md §2.5] for the user-facing model.

10
frontend/src/lib/now.ts Normal file
View File

@@ -0,0 +1,10 @@
import { readable } from 'svelte/store';
// A single 60-second clock shared by every component that renders a relative
// timestamp ("vor 5 Min."). One interval for the whole app — not one per card —
// so a 1000-item feed stays cheap, and the interval is torn down automatically
// when the last subscriber unsubscribes.
export const now = readable(Date.now(), (set) => {
const id = setInterval(() => set(Date.now()), 60_000);
return () => clearInterval(id);
});

9
frontend/src/routes/+page.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { getToken } from '$lib/auth'; import { getToken } from '$lib/auth';
import { browser } from '$app/environment';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
onMount(() => { onMount(() => {
@@ -12,3 +11,11 @@
} }
}); });
</script> </script>
<!-- Brief branded splash so the redirect doesn't flash a blank page. -->
<div class="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950">
<div class="flex flex-col items-center gap-3">
<div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 dark:border-gray-700 dark:border-t-blue-400"></div>
<p class="text-sm font-medium text-gray-400 dark:text-gray-500">EventSnap</p>
</div>
</div>

27
frontend/src/routes/account/+page.svelte
View File

@@ -127,9 +127,9 @@
function roleColor(r: string | null): string { function roleColor(r: string | null): string {
switch (r) { switch (r) {
case 'admin': return 'bg-red-100 text-red-700'; case 'admin': return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200';
case 'host': return 'bg-purple-100 text-purple-700'; case 'host': return 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200';
default: return 'bg-blue-100 text-blue-700'; default: return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200';
} }
} }
@@ -137,7 +137,7 @@
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950"> <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<!-- Header --> <!-- Header -->
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"> <div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-lg items-center px-4 py-4"> <div class="mx-auto flex max-w-lg items-center px-4 py-4">
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Mein Konto</h1> <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Mein Konto</h1>
</div> </div>
@@ -213,7 +213,7 @@
<span class="font-mono text-4xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{$pin}</span> <span class="font-mono text-4xl font-bold tracking-widest text-gray-900 dark:text-gray-100">{$pin}</span>
<button <button
onclick={copyPin} onclick={copyPin}
class="rounded-md bg-amber-100 px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60" class="inline-flex min-h-11 items-center rounded-md bg-amber-100 px-4 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-200 dark:bg-amber-900/40 dark:text-amber-200 dark:hover:bg-amber-900/60"
> >
{pinCopied ? 'Kopiert!' : 'Kopieren'} {pinCopied ? 'Kopiert!' : 'Kopieren'}
</button> </button>
@@ -250,9 +250,9 @@
</div> </div>
<div class="grid grid-cols-3 gap-2 p-3" role="radiogroup" aria-label="Design"> <div class="grid grid-cols-3 gap-2 p-3" role="radiogroup" aria-label="Design">
{#each [ {#each [
{ value: 'system', label: 'System', icon: '🖥️' }, { value: 'system', label: 'System' },
{ value: 'light', label: 'Hell', icon: '☀️' }, { value: 'light', label: 'Hell' },
{ value: 'dark', label: 'Dunkel', icon: '🌙' } { value: 'dark', label: 'Dunkel' }
] as opt (opt.value)} ] as opt (opt.value)}
{@const selected = $themePreference === opt.value} {@const selected = $themePreference === opt.value}
<button <button
@@ -265,7 +265,16 @@
? 'border-blue-600 bg-blue-50 text-blue-700 dark:border-blue-500 dark:bg-blue-950/40 dark:text-blue-200' ? 'border-blue-600 bg-blue-50 text-blue-700 dark:border-blue-500 dark:bg-blue-950/40 dark:text-blue-200'
: 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700/50'}" : 'border-gray-200 text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700/50'}"
> >
<span class="text-2xl leading-none">{opt.icon}</span> <!-- SVG icons render consistently everywhere (emoji show as tofu on some Android). -->
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
{#if opt.value === 'system'}
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25A2.25 2.25 0 0 1 5.25 3h13.5A2.25 2.25 0 0 1 21 5.25Z" />
{:else if opt.value === 'light'}
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
{:else}
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
{/if}
</svg>
<span class="font-medium">{opt.label}</span> <span class="font-medium">{opt.label}</span>
</button> </button>
{/each} {/each}

89
frontend/src/routes/admin/+page.svelte
View File

@@ -6,6 +6,7 @@
import { toast, toastError } from '$lib/toast-store'; import { toast, toastError } from '$lib/toast-store';
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte'; import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
import Modal from '$lib/components/Modal.svelte'; import Modal from '$lib/components/Modal.svelte';
import IconButton from '$lib/components/IconButton.svelte';
interface StatsDto { interface StatsDto {
user_count: number; user_count: number;
@@ -136,6 +137,24 @@
const myRole = getRole(); const myRole = getRole();
// Generic confirm-then-run for irreversible / privilege-changing actions
// (promote, demote, unban, release gallery). Reuses the shared ConfirmSheet.
interface PendingConfirm {
title: string;
message: string;
confirmLabel: string;
tone: 'default' | 'danger';
run: () => Promise<void>;
}
let confirmAction = $state<PendingConfirm | null>(null);
async function runConfirmAction() {
const action = confirmAction;
if (!action) return;
await action.run();
confirmAction = null;
}
onMount(async () => { onMount(async () => {
const token = getToken(); const token = getToken();
const role = getRole(); const role = getRole();
@@ -173,7 +192,20 @@
} }
} }
// Keys rendered as number inputs — used to reject empty/invalid numeric saves.
const NUMBER_KEYS = new Set(
CONFIG_GROUPS.flatMap((g) => g.fields.filter((f) => f.kind === 'number').map((f) => f.key))
);
async function saveConfig() { async function saveConfig() {
// Don't let a cleared number field persist as an empty/NaN config value.
for (const key of NUMBER_KEYS) {
const v = configDraft[key];
if (v !== undefined && v !== config[key] && (String(v).trim() === '' || !Number.isFinite(Number(v)))) {
toastError(new Error('Bitte gib für alle Zahlenfelder einen gültigen Wert ein.'));
return;
}
}
saving = true; saving = true;
try { try {
const changes: Record<string, string> = {}; const changes: Record<string, string> = {};
@@ -323,6 +355,17 @@
} }
</script> </script>
<!-- Confirmation for irreversible / privilege-changing actions (promote/demote/unban/release). -->
<ConfirmSheet
open={confirmAction !== null}
title={confirmAction?.title ?? ''}
message={confirmAction?.message ?? ''}
confirmLabel={confirmAction?.confirmLabel ?? 'Bestätigen'}
tone={confirmAction?.tone ?? 'default'}
onConfirm={runConfirmAction}
onCancel={() => (confirmAction = null)}
/>
<!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. --> <!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
<ConfirmSheet <ConfirmSheet
open={pinResetTarget !== null} open={pinResetTarget !== null}
@@ -380,17 +423,13 @@
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950"> <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<!-- Header --> <!-- Header -->
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"> <div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4"> <div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
<button <IconButton label="Zurück" onclick={() => goto('/account')} class="shrink-0">
onclick={() => goto('/account')}
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
aria-label="Zurück"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg> </svg>
</button> </IconButton>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Admin-Dashboard</h1> <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Admin-Dashboard</h1>
</div> </div>
</div> </div>
@@ -414,7 +453,7 @@
{#if loading} {#if loading}
<div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div> <div class="py-16 text-center text-gray-400 dark:text-gray-500">Laden…</div>
{:else if error} {:else if error}
<div class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div> <div role="alert" class="rounded-lg bg-red-50 p-4 text-sm text-red-700 dark:bg-red-950/40 dark:text-red-300">{error}</div>
{:else} {:else}
<!-- ── Stats tab ────────────────────────────────────────────────── --> <!-- ── Stats tab ────────────────────────────────────────────────── -->
@@ -500,6 +539,8 @@
id={field.key} id={field.key}
type="number" type="number"
step="any" step="any"
min="0"
inputmode="decimal"
bind:value={configDraft[field.key]} bind:value={configDraft[field.key]}
class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100" class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
/> />
@@ -532,7 +573,13 @@
<div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800"> <div class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-700 dark:bg-gray-800">
<h3 class="mb-3 font-semibold text-gray-900 dark:text-gray-100">Galerie</h3> <h3 class="mb-3 font-semibold text-gray-900 dark:text-gray-100">Galerie</h3>
<button <button
onclick={releaseGallery} onclick={() => (confirmAction = {
title: 'Galerie freigeben?',
message: 'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
confirmLabel: 'Freigeben',
tone: 'danger',
run: releaseGallery
})}
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400" class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
> >
Galerie freigeben Galerie freigeben
@@ -625,17 +672,35 @@
<div class="flex shrink-0 flex-wrap justify-end gap-1.5"> <div class="flex shrink-0 flex-wrap justify-end gap-1.5">
{#if user.role !== 'admin'} {#if user.role !== 'admin'}
{#if user.is_banned} {#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 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"> <button onclick={() => (confirmAction = {
title: 'Sperre aufheben?',
message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
confirmLabel: 'Entsperren',
tone: 'default',
run: () => unban(user)
})} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
Entsperren Entsperren
</button> </button>
{:else} {:else}
{#if user.role === 'guest'} {#if user.role === 'guest'}
<button onclick={() => promoteToHost(user)} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60"> <button onclick={() => (confirmAction = {
title: 'Zum Host befördern?',
message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
confirmLabel: 'Befördern',
tone: 'default',
run: () => promoteToHost(user)
})} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60">
Host Host
</button> </button>
{/if} {/if}
{#if user.role === 'host'} {#if user.role === 'host'}
<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 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"> <button onclick={() => (confirmAction = {
title: 'Zum Gast degradieren?',
message: `${user.display_name} verliert alle Host-Rechte.`,
confirmLabel: 'Degradieren',
tone: 'danger',
run: () => demoteToGuest(user)
})} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
Degradieren Degradieren
</button> </button>
{/if} {/if}

54
frontend/src/routes/diashow/+page.svelte
View File

@@ -98,6 +98,14 @@
overlayHideTimer = setTimeout(() => (showOverlay = false), 4000); overlayHideTimer = setTimeout(() => (showOverlay = false), 4000);
} }
// Manual toggle from the always-visible control button — stays open (no
// auto-hide) so keyboard users can tab through the controls without them
// vanishing mid-interaction.
function toggleOverlay() {
if (overlayHideTimer) clearTimeout(overlayHideTimer);
showOverlay = !showOverlay;
}
function togglePause() { function togglePause() {
paused = !paused; paused = !paused;
if (paused) { if (paused) {
@@ -166,19 +174,52 @@
<div class="text-white/60">Lade…</div> <div class="text-white/60">Lade…</div>
{/if} {/if}
<!-- Always-visible controls: keyboard-reachable, so the show is never a trap and
the controls are reachable without a pointer. Honours the notch. -->
<div
class="absolute right-0 top-0 z-10 flex gap-2 p-3"
style="padding-top: calc(env(safe-area-inset-top) + 0.75rem)"
>
<button
type="button"
onclick={(e) => { e.stopPropagation(); toggleOverlay(); }}
aria-label="Steuerung anzeigen"
aria-expanded={showOverlay}
class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
</svg>
</button>
<button
type="button"
onclick={(e) => { e.stopPropagation(); exit(); }}
aria-label="Diashow beenden"
class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
{#if showOverlay} {#if showOverlay}
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
<div <div
class="absolute inset-x-0 bottom-0 flex flex-col gap-3 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-6 pb-10" class="absolute inset-x-0 bottom-0 flex flex-col gap-3 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-6 pb-10"
onclick={(e) => e.stopPropagation()}
> >
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-2">
<button <button
type="button" type="button"
onclick={togglePause} onclick={togglePause}
class="rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20" class="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
> >
{paused ? '▶ Fortsetzen' : '⏸ Pause'} {#if paused}
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
Fortsetzen
{:else}
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z" /></svg>
Pause
{/if}
</button> </button>
<label class="flex items-center gap-2 rounded-full bg-white/10 px-3 py-2 text-sm"> <label class="flex items-center gap-2 rounded-full bg-white/10 px-3 py-2 text-sm">
@@ -206,9 +247,10 @@
<button <button
type="button" type="button"
onclick={exit} onclick={exit}
class="ml-auto rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20" class="ml-auto inline-flex items-center gap-1.5 rounded-full bg-white/10 px-4 py-2 text-sm font-medium hover:bg-white/20"
> >
✕ Beenden <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>
Beenden
</button> </button>
</div> </div>

45
frontend/src/routes/export/+page.svelte
View File

@@ -6,6 +6,7 @@
import { connectSse, disconnectSse, onSseEvent } from '$lib/sse'; import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
import { toastError } from '$lib/toast-store'; import { toastError } from '$lib/toast-store';
import { focusTrap } from '$lib/actions/focus-trap'; import { focusTrap } from '$lib/actions/focus-trap';
import IconButton from '$lib/components/IconButton.svelte';
interface JobStatus { interface JobStatus {
status: 'locked' | 'pending' | 'running' | 'done' | 'failed'; status: 'locked' | 'pending' | 'running' | 'done' | 'failed';
@@ -75,35 +76,33 @@
} }
} }
async function downloadFile(endpoint: string, filename: string) { // Stream the (potentially multi-GB) archive straight to disk via a top-level
// download navigation instead of fetch()+blob() — buffering the whole ZIP in
// memory crashes mobile Safari/Chrome. The navigation can't send the Bearer
// header, so we first exchange the token for a single-use ticket and pass it
// as a query param; the server responds with Content-Disposition: attachment,
// so the browser downloads it and we stay on the page.
async function downloadFile(endpoint: string) {
try { try {
const token = getToken(); const { ticket } = await api.post<{ ticket: string }>('/export/ticket');
const res = await fetch(endpoint, {
headers: token ? { Authorization: `Bearer ${token}` } : {}
});
if (!res.ok) {
toastError(new Error(`Download fehlgeschlagen (${res.status}).`));
return;
}
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; a.href = `${endpoint}?ticket=${encodeURIComponent(ticket)}`;
a.download = filename; a.rel = 'noopener';
document.body.appendChild(a);
a.click(); a.click();
URL.revokeObjectURL(url); a.remove();
} catch (e) { } catch (e) {
toastError(e); toastError(e);
} }
} }
function downloadZip() { function downloadZip() {
downloadFile('/api/v1/export/zip', 'Gallery.zip'); downloadFile('/api/v1/export/zip');
} }
function downloadHtml() { function downloadHtml() {
if (localStorage.getItem(HTML_GUIDE_KEY)) { if (localStorage.getItem(HTML_GUIDE_KEY)) {
downloadFile('/api/v1/export/html', 'Memories.zip'); downloadFile('/api/v1/export/html');
} else { } else {
showHtmlGuide = true; showHtmlGuide = true;
} }
@@ -112,7 +111,7 @@
function confirmHtmlDownload() { function confirmHtmlDownload() {
localStorage.setItem(HTML_GUIDE_KEY, '1'); localStorage.setItem(HTML_GUIDE_KEY, '1');
showHtmlGuide = false; showHtmlGuide = false;
downloadFile('/api/v1/export/html', 'Memories.zip'); downloadFile('/api/v1/export/html');
} }
</script> </script>
@@ -154,19 +153,13 @@
{/if} {/if}
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950"> <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"> <div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-lg items-center gap-2 px-4 py-4"> <div class="mx-auto flex max-w-lg items-center gap-2 px-4 py-4">
<button <IconButton label="Zurück" onclick={() => goto('/feed')} data-testid="export-back" class="-ml-2">
type="button"
onclick={() => goto('/feed')}
data-testid="export-back"
class="-ml-2 flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700"
aria-label="Zurück"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg> </svg>
</button> </IconButton>
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Export</h1> <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Export</h1>
</div> </div>
</div> </div>

103
frontend/src/routes/feed/+page.svelte
View File

@@ -4,8 +4,7 @@
import { api } from '$lib/api'; import { api } from '$lib/api';
import { connectSse, disconnectSse, onSseEvent } from '$lib/sse'; import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import FeedGrid from '$lib/components/FeedGrid.svelte'; import VirtualFeed from '$lib/components/VirtualFeed.svelte';
import FeedListCard from '$lib/components/FeedListCard.svelte';
import HashtagChips from '$lib/components/HashtagChips.svelte'; import HashtagChips from '$lib/components/HashtagChips.svelte';
import LightboxModal from '$lib/components/LightboxModal.svelte'; import LightboxModal from '$lib/components/LightboxModal.svelte';
import OnboardingGuide from '$lib/components/OnboardingGuide.svelte'; import OnboardingGuide from '$lib/components/OnboardingGuide.svelte';
@@ -28,6 +27,8 @@
let pullProgress = $state(0); // 0–1+ during the drag, 0 when idle let pullProgress = $state(0); // 0–1+ during the drag, 0 when idle
let selectedUpload = $state<FeedUpload | null>(null); let selectedUpload = $state<FeedUpload | null>(null);
let sentinel: HTMLDivElement; let sentinel: HTMLDivElement;
let feedObserver: IntersectionObserver | null = null;
let inPlaceRefreshTimer: ReturnType<typeof setTimeout> | null = null;
let pendingDeleteId = $state<string | null>(null); let pendingDeleteId = $state<string | null>(null);
// ───────────────────────────────────────────────────────────────────────── // ─────────────────────────────────────────────────────────────────────────
@@ -190,7 +191,10 @@
uploads = [upload, ...uploads]; uploads = [upload, ...uploads];
} catch { /* ignore */ } } catch { /* ignore */ }
}), }),
onSseEvent('upload-processed', () => loadFeed(true)), // A processed upload gains preview/thumbnail URLs. Coalesce bursts (bulk
// uploads fire one per file) into a single in-place merge so the feed
// neither hammers the server nor collapses to page 1 / loses scroll.
onSseEvent('upload-processed', () => scheduleInPlaceRefresh()),
onSseEvent('upload-deleted', (data) => { onSseEvent('upload-deleted', (data) => {
try { try {
const payload = JSON.parse(data) as { upload_id: string }; const payload = JSON.parse(data) as { upload_id: string };
@@ -198,8 +202,11 @@
if (selectedUpload?.id === payload.upload_id) selectedUpload = null; if (selectedUpload?.id === payload.upload_id) selectedUpload = null;
} catch { /* ignore */ } } catch { /* ignore */ }
}), }),
onSseEvent('like-update', () => loadFeed(true)), // Patch the single affected card in place from the SSE payload instead of
onSseEvent('new-comment', () => loadFeed(true)), // refetching page 1 — a busy event fires these constantly and a full reload
// would yank every scrolled-down user back to the top on each reaction.
onSseEvent('like-update', (data) => patchCount(data, 'like_count')),
onSseEvent('new-comment', (data) => patchCount(data, 'comment_count')),
// Synthetic event from the SSE client after a foreground reconnect — merge // Synthetic event from the SSE client after a foreground reconnect — merge
// any uploads + deletions we missed while the tab was hidden. // any uploads + deletions we missed while the tab was hidden.
onSseEvent('feed-delta', (data) => { onSseEvent('feed-delta', (data) => {
@@ -219,21 +226,68 @@
); );
if (sentinel) { if (sentinel) {
const observer = new IntersectionObserver( feedObserver = new IntersectionObserver(
(entries) => { (entries) => {
if (entries[0].isIntersecting && nextCursor && !loadingMore) loadMore(); if (entries[0].isIntersecting && nextCursor && !loadingMore) loadMore();
}, },
{ rootMargin: '200px' } { rootMargin: '200px' }
); );
observer.observe(sentinel); feedObserver.observe(sentinel);
} }
}); });
onDestroy(() => { onDestroy(() => {
disconnectSse(); disconnectSse();
for (const unsub of unsubscribers) unsub(); for (const unsub of unsubscribers) unsub();
feedObserver?.disconnect();
if (inPlaceRefreshTimer) clearTimeout(inPlaceRefreshTimer);
}); });
// Patch a single upload's like/comment count from an SSE payload without
// disturbing scroll position or the rest of the loaded feed.
function patchCount(data: string, field: 'like_count' | 'comment_count') {
try {
const payload = JSON.parse(data) as {
upload_id: string;
like_count?: number;
comment_count?: number;
};
const value = payload[field];
if (value === undefined) return;
uploads = uploads.map((u) => (u.id === payload.upload_id ? { ...u, [field]: value } : u));
if (selectedUpload?.id === payload.upload_id) {
selectedUpload = { ...selectedUpload, [field]: value };
}
} catch { /* ignore malformed payloads */ }
}
// Debounced page-1 fetch that *merges* (updates existing cards in place, prepends
// genuinely new ones) rather than replacing the array — preserves scroll and any
// pages already loaded below the fold.
function scheduleInPlaceRefresh() {
if (inPlaceRefreshTimer) return;
inPlaceRefreshTimer = setTimeout(() => {
inPlaceRefreshTimer = null;
void refreshFeedInPlace();
}, 800);
}
async function refreshFeedInPlace() {
try {
const params = new URLSearchParams();
if (selectedHashtag) params.set('hashtag', selectedHashtag);
params.set('limit', '20');
const res = await api.get<FeedResponse>(`/feed?${params}`);
const byId = new Map(res.uploads.map((u) => [u.id, u]));
const known = new Set(uploads.map((u) => u.id));
uploads = uploads.map((u) => byId.get(u.id) ?? u);
const fresh = res.uploads.filter((u) => !known.has(u.id));
if (fresh.length) uploads = [...fresh, ...uploads];
} catch {
// Background refresh — stay quiet, the next event or pull-to-refresh retries.
}
}
async function loadFeed(refresh = false) { async function loadFeed(refresh = false) {
try { try {
const params = new URLSearchParams(); const params = new URLSearchParams();
@@ -359,7 +413,7 @@
<!-- Live pull-progress indicator: grows during the drag, rotates past threshold, <!-- Live pull-progress indicator: grows during the drag, rotates past threshold,
swaps to a spinner once the network refresh kicks off. --> swaps to a spinner once the network refresh kicks off. -->
{#if refreshing || pullProgress > 0} {#if refreshing || pullProgress > 0}
<div class="pointer-events-none fixed left-0 right-0 top-2 z-40 flex justify-center"> <div class="pointer-events-none fixed left-0 right-0 top-[calc(env(safe-area-inset-top)+0.5rem)] z-40 flex justify-center">
<div <div
class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-blue-600 shadow transition-opacity dark:bg-gray-900/90 dark:text-blue-300" class="rounded-full bg-white/90 px-3 py-1 text-xs font-medium text-blue-600 shadow transition-opacity dark:bg-gray-900/90 dark:text-blue-300"
style="opacity: {refreshing ? 1 : Math.min(1, pullProgress)}" style="opacity: {refreshing ? 1 : Math.min(1, pullProgress)}"
@@ -386,7 +440,7 @@
</div> </div>
{/if} {/if}
<!-- Sticky header — opaque fallback for browsers without backdrop-filter. --> <!-- Sticky header — opaque fallback for browsers without backdrop-filter. -->
<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur supports-[not(backdrop-filter:blur(0))]:bg-white dark:border-gray-800 dark:bg-gray-900/95 dark:supports-[not(backdrop-filter:blur(0))]:bg-gray-900"> <div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 pt-[env(safe-area-inset-top)] backdrop-blur supports-[not(backdrop-filter:blur(0))]:bg-white dark:border-gray-800 dark:bg-gray-900/95 dark:supports-[not(backdrop-filter:blur(0))]:bg-gray-900">
<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3"> <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 dark:text-gray-100">Galerie</h1> <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Galerie</h1>
@@ -538,35 +592,38 @@
<p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Tippe auf den Plus-Button unten!</p> <p class="mt-1 text-sm text-gray-400 dark:text-gray-500">Tippe auf den Plus-Button unten!</p>
</div> </div>
{:else if viewMode === 'list'} {:else if viewMode === 'list'}
<!-- List view: chronological full-width cards --> <!-- List view: chronological full-width cards (DOM-windowed) -->
<div class="mx-auto max-w-2xl"> <div class="mx-auto max-w-2xl">
{#each uploads as upload (upload.id)} <VirtualFeed
<FeedListCard mode="list"
{upload} uploads={uploads}
isOwn={upload.user_id === myUserId} {myUserId}
onlike={handleLike} onlike={handleLike}
oncomment={openComments} oncomment={openComments}
onselect={(u) => (selectedUpload = u)} onselect={(u) => (selectedUpload = u)}
oncontextmenu={openContextSheet} oncontextmenu={openContextSheet}
/> />
{/each}
</div> </div>
{:else} {:else}
<!-- Grid view: 3-col, filters applied --> <!-- Grid view: 3-col, filters applied (DOM-windowed by row) -->
<div class="mx-auto max-w-2xl"> <div class="mx-auto max-w-2xl">
{#if displayUploads.length === 0} {#if displayUploads.length === 0}
<div class="py-16 text-center"> <div class="py-16 text-center">
<p class="text-sm text-gray-400 dark:text-gray-500">Keine Treffer für die gewählten Filter.</p> <p class="text-sm text-gray-400 dark:text-gray-500">Keine Treffer für die gewählten Filter.</p>
{#if nextCursor}
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">Es sind noch nicht alle Beiträge geladen — scrolle weiter, um mehr zu durchsuchen.</p>
{/if}
<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline dark:text-blue-400">Filter zurücksetzen</button> <button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline dark:text-blue-400">Filter zurücksetzen</button>
</div> </div>
{:else} {:else}
<FeedGrid <VirtualFeed
mode="grid"
uploads={displayUploads} uploads={displayUploads}
{myUserId}
onlike={handleLike} onlike={handleLike}
oncomment={openComments} oncomment={openComments}
onselect={(u) => (selectedUpload = u)} onselect={(u) => (selectedUpload = u)}
oncontextmenu={openContextSheet} oncontextmenu={openContextSheet}
threeCol={true}
/> />
{/if} {/if}
</div> </div>

76
frontend/src/routes/host/+page.svelte
View File

@@ -6,6 +6,7 @@
import { toast, toastError } from '$lib/toast-store'; import { toast, toastError } from '$lib/toast-store';
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte'; import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
import Modal from '$lib/components/Modal.svelte'; import Modal from '$lib/components/Modal.svelte';
import IconButton from '$lib/components/IconButton.svelte';
interface UserSummary { interface UserSummary {
id: string; id: string;
@@ -56,6 +57,25 @@
const myRole = getRole(); const myRole = getRole();
// Generic confirm-then-run for the irreversible / privilege-changing actions
// (promote, demote, unban, release gallery) that previously fired on one tap.
// Reuses the shared ConfirmSheet; the wrapped fns keep their own toast/reload.
interface PendingConfirm {
title: string;
message: string;
confirmLabel: string;
tone: 'default' | 'danger';
run: () => Promise<void>;
}
let confirmAction = $state<PendingConfirm | null>(null);
async function runConfirmAction() {
const action = confirmAction;
if (!action) return;
await action.run();
confirmAction = null;
}
/** Mirrors backend `handlers::host::reset_user_pin` authorisation rules. */ /** Mirrors backend `handlers::host::reset_user_pin` authorisation rules. */
function canResetPinFor(target: UserSummary): boolean { function canResetPinFor(target: UserSummary): boolean {
if (target.role === 'admin') return false; if (target.role === 'admin') return false;
@@ -196,6 +216,17 @@
} }
</script> </script>
<!-- Confirmation for irreversible / privilege-changing actions (promote/demote/unban/release). -->
<ConfirmSheet
open={confirmAction !== null}
title={confirmAction?.title ?? ''}
message={confirmAction?.message ?? ''}
confirmLabel={confirmAction?.confirmLabel ?? 'Bestätigen'}
tone={confirmAction?.tone ?? 'default'}
onConfirm={runConfirmAction}
onCancel={() => (confirmAction = null)}
/>
<!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. --> <!-- PIN reset confirmation — pure yes/no, uses the shared ConfirmSheet. -->
<ConfirmSheet <ConfirmSheet
open={pinResetTarget !== null} open={pinResetTarget !== null}
@@ -266,17 +297,13 @@
<div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950"> <div class="min-h-screen bg-gray-50 pb-24 dark:bg-gray-950">
<!-- Header --> <!-- Header -->
<div class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"> <div class="border-b border-gray-200 bg-white pt-[env(safe-area-inset-top)] dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4"> <div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
<button <IconButton label="Zurück" onclick={() => goto('/account')} class="shrink-0">
onclick={() => goto('/account')}
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
aria-label="Zurück"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
</svg> </svg>
</button> </IconButton>
<div class="min-w-0"> <div class="min-w-0">
<h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Host-Dashboard</h1> <h1 class="text-xl font-bold text-gray-900 dark:text-gray-100">Host-Dashboard</h1>
{#if event} {#if event}
@@ -297,6 +324,7 @@
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"> <div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<button <button
onclick={() => (statsOpen = !statsOpen)} onclick={() => (statsOpen = !statsOpen)}
aria-expanded={statsOpen}
class="flex w-full items-center justify-between px-5 py-4" class="flex w-full items-center justify-between px-5 py-4"
> >
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Statistiken</h2> <h2 class="font-semibold text-gray-900 dark:text-gray-100">Statistiken</h2>
@@ -337,6 +365,7 @@
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"> <div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<button <button
onclick={() => (settingsOpen = !settingsOpen)} onclick={() => (settingsOpen = !settingsOpen)}
aria-expanded={settingsOpen}
class="flex w-full items-center justify-between px-5 py-4" class="flex w-full items-center justify-between px-5 py-4"
> >
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Event-Einstellungen</h2> <h2 class="font-semibold text-gray-900 dark:text-gray-100">Event-Einstellungen</h2>
@@ -357,7 +386,13 @@
{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'} {event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
</button> </button>
<button <button
onclick={releaseGallery} onclick={() => (confirmAction = {
title: 'Galerie freigeben?',
message: 'Gäste können dann alle Fotos herunterladen. Das kann nicht rückgängig gemacht werden.',
confirmLabel: 'Freigeben',
tone: 'danger',
run: releaseGallery
})}
disabled={event.export_released} disabled={event.export_released}
class="rounded-lg px-4 py-2 text-sm font-medium transition class="rounded-lg px-4 py-2 text-sm font-medium transition
{event.export_released ? 'cursor-default bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500' : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400'}" {event.export_released ? 'cursor-default bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500' : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400'}"
@@ -372,6 +407,7 @@
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"> <div class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
<button <button
onclick={() => (usersOpen = !usersOpen)} onclick={() => (usersOpen = !usersOpen)}
aria-expanded={usersOpen}
class="flex w-full items-center justify-between px-5 py-4" class="flex w-full items-center justify-between px-5 py-4"
> >
<h2 class="font-semibold text-gray-900 dark:text-gray-100">Nutzerverwaltung</h2> <h2 class="font-semibold text-gray-900 dark:text-gray-100">Nutzerverwaltung</h2>
@@ -424,7 +460,13 @@
{#if user.role !== 'admin'} {#if user.role !== 'admin'}
{#if user.is_banned} {#if user.is_banned}
<button <button
onclick={() => unban(user)} onclick={() => (confirmAction = {
title: 'Sperre aufheben?',
message: `${user.display_name} kann danach wieder hochladen, liken und kommentieren.`,
confirmLabel: 'Entsperren',
tone: 'default',
run: () => unban(user)
})}
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600" class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
> >
Entsperren Entsperren
@@ -432,7 +474,13 @@
{:else} {:else}
{#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')} {#if user.role === 'guest' && (myRole === 'host' || myRole === 'admin')}
<button <button
onclick={() => promoteToHost(user)} onclick={() => (confirmAction = {
title: 'Zum Host befördern?',
message: `${user.display_name} erhält Host-Rechte: sperren, PIN zurücksetzen und Galerie verwalten. Das lässt sich nur durch Degradieren rückgängig machen.`,
confirmLabel: 'Befördern',
tone: 'default',
run: () => promoteToHost(user)
})}
class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60" class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-200 dark:hover:bg-blue-900/60"
> >
Host Host
@@ -441,7 +489,13 @@
{#if user.role === 'host'} {#if user.role === 'host'}
<!-- Hosts may demote other Hosts (never themselves); backend enforces. --> <!-- Hosts may demote other Hosts (never themselves); backend enforces. -->
<button <button
onclick={() => demoteToGuest(user)} onclick={() => (confirmAction = {
title: 'Zum Gast degradieren?',
message: `${user.display_name} verliert alle Host-Rechte.`,
confirmLabel: 'Degradieren',
tone: 'danger',
run: () => demoteToGuest(user)
})}
class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600" class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
> >
Degradieren Degradieren

13
frontend/src/routes/recover/+page.svelte
View File

@@ -3,6 +3,7 @@
import { api, ApiError } from '$lib/api'; import { api, ApiError } from '$lib/api';
import { setAuth, getPin, getToken } from '$lib/auth'; import { setAuth, getPin, getToken } from '$lib/auth';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import IconButton from '$lib/components/IconButton.svelte';
function goBack() { function goBack() {
// Prefer the actual previous page (most users land here from /join or /account). // Prefer the actual previous page (most users land here from /join or /account).
@@ -67,19 +68,13 @@
} }
</script> </script>
<div class="flex min-h-screen flex-col bg-gray-50 px-4 dark:bg-gray-950"> <div class="flex min-h-screen flex-col bg-gray-50 px-4 pt-[env(safe-area-inset-top)] dark:bg-gray-950">
<div class="-mx-4 flex items-center px-2 py-3"> <div class="-mx-4 flex items-center px-2 py-3">
<button <IconButton label="Zurück" onclick={goBack} data-testid="recover-back">
type="button"
onclick={goBack}
data-testid="recover-back"
class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 active:bg-gray-200 dark:text-gray-400 dark:hover:bg-gray-800 dark:active:bg-gray-700"
aria-label="Zurück"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg> </svg>
</button> </IconButton>
</div> </div>
<div class="m-auto w-full max-w-sm"> <div class="m-auto w-full max-w-sm">
<h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1> <h1 class="mb-2 text-center text-2xl font-bold text-gray-900 dark:text-gray-100">Konto wiederherstellen</h1>

29
frontend/src/routes/upload/+page.svelte
View File

@@ -8,6 +8,7 @@
import { onMount, onDestroy } from 'svelte'; import { onMount, onDestroy } from 'svelte';
import { quotaStore, refreshQuota } from '$lib/quota-store'; import { quotaStore, refreshQuota } from '$lib/quota-store';
import ConfirmSheet from '$lib/components/ConfirmSheet.svelte'; import ConfirmSheet from '$lib/components/ConfirmSheet.svelte';
import IconButton from '$lib/components/IconButton.svelte';
import { vibrate } from '$lib/haptics'; import { vibrate } from '$lib/haptics';
import type { PendingFile } from '$lib/pending-upload-store'; import type { PendingFile } from '$lib/pending-upload-store';
@@ -47,9 +48,14 @@
// Auto-focus caption textarea after a short delay (let layout settle) // Auto-focus caption textarea after a short delay (let layout settle)
setTimeout(() => captionEl?.focus(), 80); setTimeout(() => captionEl?.focus(), 80);
// Revoke blob URLs if user abandons the upload page // Warn before a hard browser navigation (close / reload / external link) drops
const handleBeforeUnload = () => { // staged files or an unsent caption. In-app navigation is already guarded by
clearPending(); // the discard ConfirmSheet in cancel().
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
if (stagedFiles.length > 0 || caption.trim().length > 0) {
e.preventDefault();
e.returnValue = '';
}
}; };
window.addEventListener('beforeunload', handleBeforeUnload); window.addEventListener('beforeunload', handleBeforeUnload);
@@ -60,6 +66,9 @@
onDestroy(() => { onDestroy(() => {
showBottomNav.set(true); showBottomNav.set(true);
// Revoke any staged preview blob URLs on leave so they don't leak. The queue
// holds the underlying File objects, so this is safe after submit too.
for (const sf of stagedFiles) URL.revokeObjectURL(sf.previewUrl);
}); });
function removeFile(idx: number) { function removeFile(idx: number) {
@@ -118,16 +127,12 @@
<!-- Full-screen composer — bottom nav is suppressed --> <!-- Full-screen composer — bottom nav is suppressed -->
<div class="flex min-h-screen flex-col bg-white dark:bg-gray-950"> <div class="flex min-h-screen flex-col bg-white dark:bg-gray-950">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 dark:border-gray-800"> <div class="flex items-center justify-between border-b border-gray-100 px-4 py-3 pt-[calc(env(safe-area-inset-top)+0.75rem)] dark:border-gray-800">
<button <IconButton label="Abbrechen" onclick={cancel}>
onclick={cancel}
class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
aria-label="Abbrechen"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg> </svg>
</button> </IconButton>
<h1 class="text-base font-semibold text-gray-900 dark:text-gray-100">Neuer Beitrag</h1> <h1 class="text-base font-semibold text-gray-900 dark:text-gray-100">Neuer Beitrag</h1>
<!-- Submit button in header for desktop convenience --> <!-- Submit button in header for desktop convenience -->
<button <button
@@ -158,10 +163,10 @@
{/if} {/if}
<button <button
onclick={() => removeFile(i)} onclick={() => removeFile(i)}
class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white" class="absolute right-1 top-1 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white"
aria-label="Entfernen" aria-label="Entfernen"
> >
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg> </svg>
</button> </button>

12
frontend/static/icon.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="EventSnap">
<!-- Full-bleed brand background keeps the icon "maskable": safe content sits within the centre 80%. -->
<rect width="512" height="512" fill="#2563eb"/>
<g fill="none" stroke="#ffffff" stroke-width="22" stroke-linejoin="round" stroke-linecap="round">
<!-- Camera body -->
<rect x="116" y="172" width="280" height="200" rx="34"/>
<!-- Viewfinder bump -->
<path d="M212 172l24-34h40l24 34" fill="#ffffff" stroke="none"/>
<!-- Lens -->
<circle cx="256" cy="276" r="58"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 634 B

20
frontend/static/manifest.webmanifest Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "EventSnap",
"short_name": "EventSnap",
"description": "Teile und sammle Fotos eures Events an einem Ort.",
"lang": "de",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{
"src": "/icon.svg",
"type": "image/svg+xml",
"sizes": "any",
"purpose": "any maskable"
}
]
}