feat: mobile-first UI redesign (v0.15.0)
- Persistent bottom tab bar (Feed · FAB · Account) on all authenticated pages - Upload FAB triggers bottom sheet (Galerie / Kamera) → navigates to composer - Upload page redesigned as full-screen composer with thumbnail strip, textarea, quick-tag chips, sticky submit button; bottom nav suppressed while composing - Slim upload progress bar above bottom nav driven by queue state - Feed: list/grid view toggle; list = chronological full-width FeedListCard; grid = 3-col with search bar, autocomplete from loaded posts, filter chips - Account page: role-gated dashboard links (Host / Admin); Konto section with leave-confirm bottom sheet; no more per-page header nav icons - Host dashboard: back arrow, collapsible sections, 2-col stats, user search - Admin dashboard: back arrow, inner tab bar (Stats/Config/Export/Nutzer), stacked config inputs with sticky save, new Nutzer tab - BottomNav hidden on unauthenticated pages via isAuthenticated store - FeedGrid: threeCol prop; OnboardingGuide upload step updated for FAB - Concept docs added to docs/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MechaCat02
278
docs/CONCEPT_HTML_VIEWER.md
Normal file
278
docs/CONCEPT_HTML_VIEWER.md
Normal file
@@ -0,0 +1,278 @@
|
|||||||
|
# HTML Viewer Export Concept
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
The HTML Viewer export produces a **self-contained offline ZIP** that is a read-only clone
|
||||||
|
of the live EventSnap feed. Opening `index.html` in any modern browser shows the full event
|
||||||
|
gallery — list view, grid view, search, filter, lightbox — with no internet connection or
|
||||||
|
server required.
|
||||||
|
|
||||||
|
It **replaces the current HTML export job type**. The old HTML export produced a raw
|
||||||
|
minijinja-rendered template; the new viewer supersedes it entirely. The existing `html`
|
||||||
|
job variant in the backend is repurposed to run this flow instead of being kept alongside
|
||||||
|
it.
|
||||||
|
|
||||||
|
It is distinct from the ZIP archive export (which is raw media files). The viewer is a
|
||||||
|
polished, navigable web app bundled with the event's content.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## User-Facing Behavior
|
||||||
|
|
||||||
|
- Download `event_name_viewer.zip`, unzip, open `index.html`
|
||||||
|
- Full list view (chronological, newest first) and grid view with search/filter
|
||||||
|
- Likes, comments, and reaction counts shown (static snapshot from export time)
|
||||||
|
- Read-only: no uploads, no auth, no dashboards
|
||||||
|
- Works offline, no CDN or external resources
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Separate Static SvelteKit App
|
||||||
|
|
||||||
|
A new mini SvelteKit project lives at `frontend/export-viewer/` within the same monorepo.
|
||||||
|
It uses `adapter-static` and is kept completely independent of the main app.
|
||||||
|
|
||||||
|
**Why separate rather than a shared route:**
|
||||||
|
- The viewer must be distributable as a standalone static bundle; the main app uses
|
||||||
|
`adapter-node` and cannot be mixed
|
||||||
|
- Keeping it separate avoids auth, store, and routing dependencies leaking in
|
||||||
|
- Simpler to reason about: the viewer has exactly two concerns (list view, grid view)
|
||||||
|
|
||||||
|
**Why same repo:**
|
||||||
|
- Shares Tailwind config and design tokens → visual parity with the main app
|
||||||
|
- Single `pnpm` workspace, no separate CI needed
|
||||||
|
- Backend can reference the pre-built output by relative path
|
||||||
|
|
||||||
|
### Pre-Built Output Committed to Repo
|
||||||
|
|
||||||
|
The viewer is built once and its output committed to `backend/static/export-viewer/`.
|
||||||
|
The backend export job **does not run a Node build** at runtime — it just copies the
|
||||||
|
pre-built assets and injects event data alongside them.
|
||||||
|
|
||||||
|
When the viewer source changes, a developer rebuilds it locally (`pnpm build` in
|
||||||
|
`frontend/export-viewer/`) and commits the updated `backend/static/export-viewer/` output.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ZIP Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
event_name_viewer.zip/
|
||||||
|
├── index.html ← entry point; open this in any browser
|
||||||
|
├── _app/
|
||||||
|
│ └── immutable/
|
||||||
|
│ ├── viewer.[hash].js ← all Svelte/app logic, single bundle
|
||||||
|
│ └── viewer.[hash].css ← all styles including Tailwind output
|
||||||
|
├── data.json ← injected by backend at export time
|
||||||
|
└── media/
|
||||||
|
├── abc123_thumb.jpg ← ~400 px wide, used in grid cells
|
||||||
|
├── abc123_full.jpg ← original or capped (see Media Strategy)
|
||||||
|
├── def456_thumb.jpg
|
||||||
|
└── def456.mp4 ← videos included as-is
|
||||||
|
```
|
||||||
|
|
||||||
|
No external font CDN, no Google Fonts, no remote scripts. All assets are local.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## data.json Schema
|
||||||
|
|
||||||
|
Generated by the backend export job. The viewer fetches this file on startup via
|
||||||
|
`fetch('./data.json')` (relative path, works from filesystem).
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"event": {
|
||||||
|
"name": "Sommerfest 2025",
|
||||||
|
"exported_at": "2025-07-15T20:00:00Z"
|
||||||
|
},
|
||||||
|
"posts": [
|
||||||
|
{
|
||||||
|
"id": "abc123",
|
||||||
|
"uploader": "MaxMustermann",
|
||||||
|
"caption": "Tolle Stimmung! #party #spaß",
|
||||||
|
"tags": ["party", "spaß"],
|
||||||
|
"timestamp": "2025-07-15T18:30:00Z",
|
||||||
|
"likes": 12,
|
||||||
|
"comments": [
|
||||||
|
{
|
||||||
|
"author": "AnnaSchulz",
|
||||||
|
"text": "So schön!",
|
||||||
|
"timestamp": "2025-07-15T18:35:00Z"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"media": [
|
||||||
|
{
|
||||||
|
"type": "image",
|
||||||
|
"thumb": "media/abc123_thumb.jpg",
|
||||||
|
"full": "media/abc123_full.jpg",
|
||||||
|
"width": 1920,
|
||||||
|
"height": 1080
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
All post data (likes, comments, tags) reflects the state at export time. No live updates.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Media Strategy
|
||||||
|
|
||||||
|
### Images
|
||||||
|
|
||||||
|
| Variant | Purpose | Max dimension | Format |
|
||||||
|
|---------|---------|---------------|--------|
|
||||||
|
| `_thumb` | Grid cells, list post thumbnail | 400 px wide | JPEG q75 |
|
||||||
|
| `_full` | Lightbox / full-screen view | Original, or 2000 px cap if >5 MB | JPEG q85 |
|
||||||
|
|
||||||
|
The backend applies compression only when the original exceeds a threshold (e.g. >5 MB for
|
||||||
|
images). Below that threshold the original is used as `_full` unchanged.
|
||||||
|
|
||||||
|
The full-resolution original is always available via the separate ZIP archive export.
|
||||||
|
|
||||||
|
### Videos
|
||||||
|
|
||||||
|
Included as-is (no server-side transcoding). The viewer uses a standard `<video>` element.
|
||||||
|
The `_thumb` variant for videos is a JPEG frame extracted at the 1-second mark.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## SvelteKit SSG Configuration
|
||||||
|
|
||||||
|
```
|
||||||
|
// frontend/export-viewer/src/routes/+layout.ts
|
||||||
|
export const prerender = true;
|
||||||
|
export const ssr = false;
|
||||||
|
```
|
||||||
|
|
||||||
|
`ssr = false` produces a pure client-side SPA: SvelteKit emits a minimal `index.html` shell
|
||||||
|
and the JavaScript bundle hydrates it entirely in the browser. This is correct for a ZIP
|
||||||
|
distribution where no server exists to handle SSR.
|
||||||
|
|
||||||
|
```
|
||||||
|
// frontend/export-viewer/svelte.config.js
|
||||||
|
import adapter from '@sveltejs/adapter-static';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
kit: {
|
||||||
|
adapter: adapter({
|
||||||
|
fallback: 'index.html',
|
||||||
|
pages: '../../backend/static/export-viewer',
|
||||||
|
assets: '../../backend/static/export-viewer',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
The build output is written directly into `backend/static/export-viewer/` so the backend
|
||||||
|
can reference it without a copy step.
|
||||||
|
|
||||||
|
### Shared Tailwind Config
|
||||||
|
|
||||||
|
```
|
||||||
|
// frontend/export-viewer/tailwind.config.js
|
||||||
|
import baseConfig from '../tailwind.config.js';
|
||||||
|
export default { ...baseConfig, content: ['./src/**/*.{svelte,ts}'] };
|
||||||
|
```
|
||||||
|
|
||||||
|
Imports the main app's Tailwind config to guarantee visual parity. Only the `content` glob
|
||||||
|
is overridden.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Viewer Feature Set
|
||||||
|
|
||||||
|
| Feature | Included | Notes |
|
||||||
|
|---------|----------|-------|
|
||||||
|
| List view (chronological, newest first) | ✓ | Full-width cards, same layout as live app |
|
||||||
|
| Grid view (3-column) | ✓ | Square cells, video duration badge |
|
||||||
|
| List/grid toggle | ✓ | Same toggle icons as live app |
|
||||||
|
| Search bar (grid view only) | ✓ | Appears only in grid view |
|
||||||
|
| Tag filter chips | ✓ | Built from tags in data.json |
|
||||||
|
| Uploader filter | ✓ | Dropdown from uploaders in data.json |
|
||||||
|
| Autocomplete suggestions | ✓ | From data.json — no network requests |
|
||||||
|
| Lightbox (tap to expand) | ✓ | Swipe left/right navigates filtered set |
|
||||||
|
| Like counts (static) | ✓ | Snapshot from export time |
|
||||||
|
| Comment list (static) | ✓ | Expandable under each post |
|
||||||
|
| Like/comment actions | ✗ | Read-only export |
|
||||||
|
| Upload button / FAB | ✗ | |
|
||||||
|
| Account / Host / Admin | ✗ | |
|
||||||
|
| Authentication | ✗ | No JWT, no PIN |
|
||||||
|
| Service Worker (offline cache) | Future | Could be added later for PWA behavior |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Backend Export Job Flow
|
||||||
|
|
||||||
|
The `html` job variant is repurposed. The old minijinja template rendering path is removed
|
||||||
|
and replaced entirely by the steps below.
|
||||||
|
|
||||||
|
```
|
||||||
|
1. Query all posts, media, reactions, and comments for the event from the DB
|
||||||
|
2. Copy pre-built viewer assets:
|
||||||
|
backend/static/export-viewer/ → tmp/{job_id}/
|
||||||
|
3. Generate data.json:
|
||||||
|
- Build the JSON structure from queried data
|
||||||
|
- Write to tmp/{job_id}/data.json
|
||||||
|
4. Process and copy media:
|
||||||
|
For each media file:
|
||||||
|
a. Copy original; if image >5 MB, also produce compressed _full variant
|
||||||
|
b. Generate _thumb (resize to 400 px wide via image library)
|
||||||
|
c. For video, extract JPEG frame for _thumb
|
||||||
|
d. Write to tmp/{job_id}/media/
|
||||||
|
5. Create ZIP:
|
||||||
|
zip -r event_name_viewer.zip tmp/{job_id}/
|
||||||
|
6. Store ZIP path, mark job as complete
|
||||||
|
7. Clean up tmp/{job_id}/
|
||||||
|
```
|
||||||
|
|
||||||
|
The backend needs an image processing dependency (e.g. `image` crate in Rust) for thumbnail
|
||||||
|
generation and compression. Video frame extraction requires `ffmpeg` available in the
|
||||||
|
deployment environment (already used for video handling if applicable, otherwise add to
|
||||||
|
docker-compose).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Monorepo Structure After Implementation
|
||||||
|
|
||||||
|
```
|
||||||
|
EventSnap/
|
||||||
|
├── backend/
|
||||||
|
│ ├── static/
|
||||||
|
│ │ └── export-viewer/ ← pre-built viewer output (committed)
|
||||||
|
│ │ ├── index.html
|
||||||
|
│ │ └── _app/...
|
||||||
|
│ └── src/
|
||||||
|
│ └── handlers/
|
||||||
|
│ └── export.rs ← export job assembles ZIP
|
||||||
|
├── frontend/
|
||||||
|
│ ├── export-viewer/ ← new mini SvelteKit project
|
||||||
|
│ │ ├── package.json
|
||||||
|
│ │ ├── svelte.config.js ← adapter-static, output → backend/static/export-viewer
|
||||||
|
│ │ ├── tailwind.config.js ← extends ../tailwind.config.js
|
||||||
|
│ │ └── src/
|
||||||
|
│ │ └── routes/
|
||||||
|
│ │ ├── +layout.ts ← prerender=true, ssr=false
|
||||||
|
│ │ └── +page.svelte ← list/grid feed, lightbox, search
|
||||||
|
│ └── src/ ← existing main app (unchanged)
|
||||||
|
└── docs/
|
||||||
|
├── CONCEPT_MOBILE_UI.md
|
||||||
|
└── CONCEPT_HTML_VIEWER.md
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Open Questions for Implementation
|
||||||
|
|
||||||
|
1. **Image processing library**: The `image` crate handles JPEG resize/compress; is it
|
||||||
|
already a backend dependency, or does it need to be added?
|
||||||
|
2. **Video thumbnail extraction**: Is `ffmpeg` available in the Docker environment?
|
||||||
|
If not, a fallback (no video thumb, use a placeholder) is needed.
|
||||||
|
3. **Viewer rebuild workflow**: Add a `make build-viewer` or `pnpm --filter export-viewer build`
|
||||||
|
step to the developer workflow docs and CI so the committed output stays in sync.
|
||||||
|
4. **ZIP file naming**: `{event_slug}_viewer_{date}.zip` or a fixed name?
|
||||||
420
docs/CONCEPT_MOBILE_UI.md
Normal file
420
docs/CONCEPT_MOBILE_UI.md
Normal file
@@ -0,0 +1,420 @@
|
|||||||
|
# Mobile-First UI/UX Redesign Concept
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
EventSnap is intended for mobile use at live events, but the current UI is desktop-oriented.
|
||||||
|
This document describes a full mobile-first redesign covering navigation, the feed/gallery,
|
||||||
|
account page, host dashboard, and admin dashboard.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Navigation: Bottom Tab Bar
|
||||||
|
|
||||||
|
Replace all per-page top-right icon links with a single **persistent bottom tab bar** present
|
||||||
|
on every page. The bar sits at the very bottom with proper `padding-bottom` for iPhone home
|
||||||
|
indicator (safe-area-inset-bottom).
|
||||||
|
|
||||||
|
### Tab Composition by Role
|
||||||
|
|
||||||
|
| Role | Tabs |
|
||||||
|
|-------|------|
|
||||||
|
| Guest | 🏠 Feed · [📷+] · 👤 Account |
|
||||||
|
| Host | 🏠 Feed · [📷+] · 👤 Account |
|
||||||
|
| Admin | 🏠 Feed · [📷+] · 👤 Account |
|
||||||
|
|
||||||
|
All roles see the same three tabs. Role-specific dashboard links (Host, Admin) live inside
|
||||||
|
the Account page — not as separate tabs. This keeps the bar simple and avoids conditional
|
||||||
|
tab rendering.
|
||||||
|
|
||||||
|
### Visual Style
|
||||||
|
|
||||||
|
- Frosted glass background: `bg-white/85 backdrop-blur-md`
|
||||||
|
- Thin top border: `border-t border-gray-200`
|
||||||
|
- Subtle shadow upward
|
||||||
|
- Active tab: colored icon + small label below
|
||||||
|
- Inactive tab: gray icon, small gray label
|
||||||
|
|
||||||
|
### Upload FAB (Floating Action Button)
|
||||||
|
|
||||||
|
The center tab is an elevated circular button, not a flat tab icon:
|
||||||
|
|
||||||
|
- Circle ~56 px diameter, `bg-blue-600`
|
||||||
|
- Icon: camera outline with a small `+` badge overlaid at bottom-right
|
||||||
|
- Raised above the bar with a drop shadow
|
||||||
|
- Press: slight scale-down (`scale-95`) + haptic feedback where available
|
||||||
|
- Communicates "capture new or upload existing"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Feed / Gallery Page
|
||||||
|
|
||||||
|
### Header
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ Sommerfest 2025 ≡ ⊞ │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- Event name left-aligned
|
||||||
|
- List/grid view toggle icons right-aligned (≡ list, ⊞ grid)
|
||||||
|
- Header collapses on downward scroll (only toggle remains visible), expands on upward scroll
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### View A — Chronological List (default)
|
||||||
|
|
||||||
|
Full-width post cards, newest at top, infinite scroll.
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ 👤 MaxMustermann · vor 2 Min │
|
||||||
|
│ ┌───────────────────────────────────┐ │
|
||||||
|
│ │ │ │
|
||||||
|
│ │ [photo / video] │ │
|
||||||
|
│ │ │ │
|
||||||
|
│ └───────────────────────────────────┘ │
|
||||||
|
│ Tolle Stimmung! #party #spaß │
|
||||||
|
│ ❤️ 12 💬 3 │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- Media: full-width, native aspect ratio, capped at 80 vh
|
||||||
|
- Avatar: colored initial circle, no photo
|
||||||
|
- Timestamp: relative ("vor 2 Min", "vor 1 Std")
|
||||||
|
- Tap media → fullscreen lightbox, swipe left/right navigates feed
|
||||||
|
- No search bar in list view
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### View B — Grid View
|
||||||
|
|
||||||
|
Transition animation when toggling: list collapses, grid fades/scales in (~200 ms).
|
||||||
|
|
||||||
|
#### Search Bar (grid view only)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ 🔍 Nutzer oder #Tag suchen… × │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- Appears below the header only in grid view
|
||||||
|
- Slides in as part of the view transition
|
||||||
|
- `×` clears current input
|
||||||
|
- Auto-focuses when grid view is activated
|
||||||
|
|
||||||
|
#### Autocomplete Dropdown
|
||||||
|
|
||||||
|
Appears immediately on focus and updates on every keystroke. Data source: the already-loaded
|
||||||
|
posts in memory — **no extra API calls**.
|
||||||
|
|
||||||
|
Two suggestion lists are derived at load time:
|
||||||
|
- `allTags`: unique hashtags from all post captions, sorted by frequency descending
|
||||||
|
- `allUploaders`: unique display names, sorted alphabetically
|
||||||
|
|
||||||
|
| User input | Suggestions shown |
|
||||||
|
|------------|-------------------|
|
||||||
|
| (focus, empty) | Top 3 tags by frequency + top 3 uploaders |
|
||||||
|
| `#` | All tags, frequency-sorted |
|
||||||
|
| `#par` | Tags with prefix "par": `#party`, `#parade` |
|
||||||
|
| `Max` | Uploaders matching "max" (case-insensitive) |
|
||||||
|
| `a` | Uploaders containing "a" + tags containing "a" |
|
||||||
|
|
||||||
|
Dropdown layout:
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ 👤 Nutzer │
|
||||||
|
│ MaxMustermann │
|
||||||
|
│ AnnaSchulz │
|
||||||
|
│ # Tags │
|
||||||
|
│ #party #tanz #spaß │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
Max ~5 total suggestions. Tapping a suggestion adds it as an active filter chip and clears
|
||||||
|
the search bar for another entry.
|
||||||
|
|
||||||
|
#### Active Filter Chips
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ 👤 MaxMustermann × # party × │
|
||||||
|
│ Alle Filter löschen │ ← shown when 2+ chips active
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
Filter combination logic:
|
||||||
|
|
||||||
|
| Combination | Logic |
|
||||||
|
|-------------|-------|
|
||||||
|
| Two tags: `#party` + `#tanz` | OR — posts with either tag |
|
||||||
|
| Two uploaders: Max + Anna | OR — posts from either |
|
||||||
|
| Uploader + tag: Max + `#party` | AND — posts by Max that also have `#party` |
|
||||||
|
|
||||||
|
#### Grid Layout
|
||||||
|
|
||||||
|
```
|
||||||
|
┌───────┬───────┬───────┐
|
||||||
|
│ │ │ │
|
||||||
|
│ │ │ │ 3-column, equal square cells
|
||||||
|
├───────┼───────┼───────┤ small gap (2 px)
|
||||||
|
│ │ ▶ │ │ ← video: small ▶ badge + duration
|
||||||
|
│ │ 0:42 │ │
|
||||||
|
└───────┴───────┴───────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- Tap cell → fullscreen lightbox, swipe navigates filtered set only
|
||||||
|
- Virtualized grid for performance on large events
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Upload Flow
|
||||||
|
|
||||||
|
### Step 1 — Source Selection (Bottom Sheet)
|
||||||
|
|
||||||
|
Tapping the FAB slides up a bottom sheet (~300 ms spring animation).
|
||||||
|
Frosted glass, rounded top corners, drag handle at top. Tap outside or swipe down to dismiss.
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────┐
|
||||||
|
│ ▬ (drag handle) │
|
||||||
|
│ │
|
||||||
|
│ 📸 Kamera │
|
||||||
|
│ Jetzt aufnehmen │
|
||||||
|
│ │
|
||||||
|
│ 🖼 Galerie │
|
||||||
|
│ Foto oder Video wählen │
|
||||||
|
│ │
|
||||||
|
│ [ Abbrechen ] │
|
||||||
|
└──────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 2a — Camera
|
||||||
|
|
||||||
|
Triggers `<input type="file" accept="image/*,video/*" capture="environment">`.
|
||||||
|
Native camera opens. After capture → Step 3.
|
||||||
|
|
||||||
|
### Step 2b — Gallery
|
||||||
|
|
||||||
|
Triggers `<input type="file" accept="image/*,video/*" multiple>`.
|
||||||
|
Native gallery picker with multi-select (up to ~10 items). After selection → Step 3.
|
||||||
|
|
||||||
|
### Step 3 — Preview & Metadata Screen
|
||||||
|
|
||||||
|
Full-screen, pushes in from right. Bottom nav hidden (immersive).
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────┐
|
||||||
|
│ × Abbrechen Hochladen → │
|
||||||
|
├──────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ ┌────┐ ┌────┐ ┌────┐ → │ ← horizontal scroll, tap to preview
|
||||||
|
│ │img │ │img │ │ × │ │ × on each thumbnail to remove
|
||||||
|
│ └────┘ └────┘ └────┘ │
|
||||||
|
│ │
|
||||||
|
│ Beschreibung (optional) │
|
||||||
|
│ ┌────────────────────────────┐ │
|
||||||
|
│ │ │ │ ← auto-focused
|
||||||
|
│ └────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
│ # Schnell-Tags │
|
||||||
|
│ [#Feier] [#Spaß] [#Party] … │ ← tap to append to caption
|
||||||
|
│ │
|
||||||
|
├──────────────────────────────────┤
|
||||||
|
│ ┌────────────────────────────┐ │
|
||||||
|
│ │ 📤 Hochladen │ │ ← sticky, disabled until ≥1 file
|
||||||
|
│ └────────────────────────────┘ │
|
||||||
|
└──────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Step 4 — Background Upload + Feedback
|
||||||
|
|
||||||
|
- Tapping "Hochladen" immediately returns to the feed (optimistic UX)
|
||||||
|
- Slim progress bar above the bottom tab bar while queue is active
|
||||||
|
- FAB gets a small spinning ring badge while uploads are in progress
|
||||||
|
- On completion: brief toast near the bottom ("✓ Hochgeladen")
|
||||||
|
- Rate-limit countdown banner anchored above the bottom bar (existing behavior)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Account Page
|
||||||
|
|
||||||
|
Single entry point for profile info and role-based dashboard navigation.
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ Mein Account │
|
||||||
|
├─────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ ┌───────┐ │
|
||||||
|
│ │ M │ MaxMustermann │
|
||||||
|
│ └───────┘ 🏷 Gast │
|
||||||
|
│ Sommerfest 2025 │
|
||||||
|
│ 7 Uploads │
|
||||||
|
│ │
|
||||||
|
├── Dashboards ───────────────────────────┤ (entire section absent for guests)
|
||||||
|
│ │
|
||||||
|
│ ⭐ Host-Dashboard → │ (host + admin only)
|
||||||
|
│ 🛡 Admin-Dashboard → │ (admin only)
|
||||||
|
│ │
|
||||||
|
├── Konto ────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ ✏️ Anzeigename ändern → │
|
||||||
|
│ 🔑 PIN ändern → │
|
||||||
|
│ 🚪 Event verlassen → │ (red text, confirm sheet)
|
||||||
|
│ │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
│ 🏠 Feed · [📷+] · 👤 Account │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- "Dashboards" section is entirely absent in the DOM for plain guests — not just hidden
|
||||||
|
- "Event verlassen" triggers a bottom-sheet confirmation before action
|
||||||
|
- Avatar: colored circle with initial letter
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Host Dashboard
|
||||||
|
|
||||||
|
Accessed via Account → ⭐ Host-Dashboard. Full-screen page, bottom nav visible.
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ ← 🎉 Host-Dashboard │
|
||||||
|
├─────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ ── Statistiken ────────────────────── │
|
||||||
|
│ ┌──────────┐ ┌──────────┐ │
|
||||||
|
│ │ 24 │ │ 156 │ │
|
||||||
|
│ │ Nutzer │ │ Uploads │ │
|
||||||
|
│ └──────────┘ └──────────┘ │
|
||||||
|
│ │
|
||||||
|
│ ── Event-Einstellungen ────────────── │ ← collapsible section
|
||||||
|
│ │
|
||||||
|
│ Neue Uploads sperren │
|
||||||
|
│ ○────────────● Gesperrt │ ← toggle
|
||||||
|
│ Keine neuen Uploads möglich │
|
||||||
|
│ │
|
||||||
|
│ ── Nutzerverwaltung ───────────────── │ ← collapsible section
|
||||||
|
│ │
|
||||||
|
│ 🔍 Nutzer suchen… │
|
||||||
|
│ ┌───────────────────────────────────┐ │
|
||||||
|
│ │ 👤 MaxMustermann Gast [🚫] │ │
|
||||||
|
│ │ 👤 AnnaSchulz Gast [🚫] │ │
|
||||||
|
│ │ 👤 GesperrterNutzer [↩] │ │ ← banned: undo icon
|
||||||
|
│ └───────────────────────────────────┘ │
|
||||||
|
│ │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
│ 🏠 Feed · [📷+] · 👤 Account │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- Sections have a chevron toggle to collapse/expand (helps on small phones)
|
||||||
|
- Ban/unban: icon tap + bottom sheet confirmation ("Nutzer wirklich sperren?")
|
||||||
|
- User list virtualized for large events
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Admin Dashboard
|
||||||
|
|
||||||
|
Most complex page. Uses an **inner tab bar** directly below the header to divide the four
|
||||||
|
functional areas. The inner tabs are independent of the bottom nav.
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────┐
|
||||||
|
│ ← 🛡 Admin-Dashboard │
|
||||||
|
├─────────────────────────────────────────┤
|
||||||
|
│ [Stats] [Config] [Export] [Nutzer] │ ← inner tab bar (scrollable if needed)
|
||||||
|
├─────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ [Tab content] │
|
||||||
|
│ │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
│ 🏠 Feed · [📷+] · 👤 Account │
|
||||||
|
└─────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stats Tab
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────┐ ┌──────────┐
|
||||||
|
│ 156 │ │ 24 │
|
||||||
|
│ Uploads │ │ Nutzer │
|
||||||
|
└──────────┘ └──────────┘
|
||||||
|
┌──────────┐ ┌──────────┐
|
||||||
|
│ 2.1 GB │ │ 3 │
|
||||||
|
│ Speicher │ │ Gesperrt │
|
||||||
|
└──────────┘ └──────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
2×2 metric card grid. Values large and prominent. Optionally expandable to show time-series
|
||||||
|
charts on tap.
|
||||||
|
|
||||||
|
### Config Tab
|
||||||
|
|
||||||
|
```
|
||||||
|
Upload-Limit / Nutzer
|
||||||
|
┌────────────────────────────────┐
|
||||||
|
│ 10 │
|
||||||
|
└────────────────────────────────┘
|
||||||
|
|
||||||
|
Zeitfenster (Sek.)
|
||||||
|
┌────────────────────────────────┐
|
||||||
|
│ 60 │
|
||||||
|
└────────────────────────────────┘
|
||||||
|
|
||||||
|
Max. Dateigröße (MB)
|
||||||
|
┌────────────────────────────────┐
|
||||||
|
│ 50 │
|
||||||
|
└────────────────────────────────┘
|
||||||
|
|
||||||
|
┌────────────────────────────────┐
|
||||||
|
│ 💾 Speichern │ ← sticky at bottom of tab scroll area
|
||||||
|
└────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
Each setting: full-width label + input. Save button always reachable without scrolling.
|
||||||
|
|
||||||
|
### Export Tab
|
||||||
|
|
||||||
|
```
|
||||||
|
── Galerie ──────────────────────────
|
||||||
|
[ 🔓 Galerie freigeben ]
|
||||||
|
|
||||||
|
── Export-Jobs ──────────────────────
|
||||||
|
[ 🔄 Aktualisieren ]
|
||||||
|
|
||||||
|
┌───────────────────────────────────┐
|
||||||
|
│ HTML-Viewer ● Fertig [↓ ZIP] │
|
||||||
|
│ JSON-Export ⏳ Läuft… │
|
||||||
|
│ ZIP-Archiv ✗ Fehler [↺] │
|
||||||
|
└───────────────────────────────────┘
|
||||||
|
|
||||||
|
[ + Neuer Export-Job ]
|
||||||
|
```
|
||||||
|
|
||||||
|
- Status chips: green (Fertig), amber (Läuft), red (Fehler)
|
||||||
|
- Download button inline per completed job
|
||||||
|
- Only the jobs list refreshes on "Aktualisieren" — no full page re-render
|
||||||
|
|
||||||
|
### Nutzer Tab
|
||||||
|
|
||||||
|
Same structure as Host Nutzerverwaltung, with any additional admin-only actions
|
||||||
|
(e.g. role assignment) added as extra controls per row.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Design Principles Summary
|
||||||
|
|
||||||
|
| Principle | Application |
|
||||||
|
|-----------|-------------|
|
||||||
|
| Thumb zone | All primary actions in bottom ~20% of screen |
|
||||||
|
| One-hand operation | FAB centered, bottom sheets dismissable with swipe |
|
||||||
|
| Minimal taps to upload | Source → picker → preview → upload: 4 taps |
|
||||||
|
| Immediate feedback | Optimistic return to feed, background upload |
|
||||||
|
| Progressive disclosure | Caption/tags optional; CTA always reachable |
|
||||||
|
| No role clutter in nav | Role links only in Account, bar stays clean |
|
||||||
|
| Collapsible sections | Long management pages stay usable on small phones |
|
||||||
|
| Inner tabs for complex pages | Admin dashboard split across 4 focused tabs |
|
||||||
65
frontend/src/lib/components/BottomNav.svelte
Normal file
65
frontend/src/lib/components/BottomNav.svelte
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { uploadSheetOpen, uploadBadgeCount } from '$lib/ui-store';
|
||||||
|
|
||||||
|
function isActive(path: string): boolean {
|
||||||
|
return $page.url.pathname.startsWith(path);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Bottom navigation bar — fixed, full-width, safe-area aware -->
|
||||||
|
<nav
|
||||||
|
class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/90 backdrop-blur-md"
|
||||||
|
style="padding-bottom: env(safe-area-inset-bottom)"
|
||||||
|
>
|
||||||
|
<div class="mx-auto flex h-14 max-w-2xl items-end justify-around px-4 pb-1">
|
||||||
|
<!-- Feed tab -->
|
||||||
|
<a
|
||||||
|
href="/feed"
|
||||||
|
class="flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
|
||||||
|
{isActive('/feed') ? 'text-blue-600' : 'text-gray-400 hover:text-gray-600'}"
|
||||||
|
aria-label="Galerie"
|
||||||
|
>
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
||||||
|
</svg>
|
||||||
|
<span>Galerie</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Upload FAB (center, elevated) -->
|
||||||
|
<div class="relative -translate-y-3">
|
||||||
|
<button
|
||||||
|
onclick={() => ($uploadSheetOpen = true)}
|
||||||
|
class="relative flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg transition active:scale-95 hover:bg-blue-700"
|
||||||
|
aria-label="Hochladen"
|
||||||
|
>
|
||||||
|
<!-- Camera + plus icon -->
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
|
||||||
|
</svg>
|
||||||
|
<!-- Badge -->
|
||||||
|
{#if $uploadBadgeCount > 0}
|
||||||
|
<span
|
||||||
|
class="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
|
||||||
|
>
|
||||||
|
{$uploadBadgeCount > 9 ? '9+' : $uploadBadgeCount}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Account tab -->
|
||||||
|
<a
|
||||||
|
href="/account"
|
||||||
|
class="flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
|
||||||
|
{isActive('/account') ? 'text-blue-600' : 'text-gray-400 hover:text-gray-600'}"
|
||||||
|
aria-label="Konto"
|
||||||
|
>
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
||||||
|
</svg>
|
||||||
|
<span>Konto</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
@@ -6,9 +6,10 @@
|
|||||||
onlike: (id: string) => void;
|
onlike: (id: string) => void;
|
||||||
oncomment: (id: string) => void;
|
oncomment: (id: string) => void;
|
||||||
onselect: (upload: FeedUpload) => void;
|
onselect: (upload: FeedUpload) => void;
|
||||||
|
threeCol?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { uploads, onlike, oncomment, onselect }: Props = $props();
|
let { uploads, onlike, oncomment, onselect, threeCol = false }: Props = $props();
|
||||||
|
|
||||||
function isVideo(mime: string): boolean {
|
function isVideo(mime: string): boolean {
|
||||||
return mime.startsWith('video/');
|
return mime.startsWith('video/');
|
||||||
@@ -21,7 +22,7 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
<div class="grid gap-0.5 {threeCol ? 'grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'}">
|
||||||
{#each uploads as upload (upload.id)}
|
{#each uploads as upload (upload.id)}
|
||||||
<div class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100">
|
<div class="group relative aspect-square cursor-pointer overflow-hidden rounded-lg bg-gray-100">
|
||||||
<button
|
<button
|
||||||
|
|||||||
140
frontend/src/lib/components/FeedListCard.svelte
Normal file
140
frontend/src/lib/components/FeedListCard.svelte
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { FeedUpload } from '$lib/types';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
upload: FeedUpload;
|
||||||
|
onlike: (id: string) => void;
|
||||||
|
oncomment: (id: string) => void;
|
||||||
|
onselect: (upload: FeedUpload) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { upload, onlike, oncomment, onselect }: Props = $props();
|
||||||
|
|
||||||
|
function isVideo(mime: string): boolean {
|
||||||
|
return mime.startsWith('video/');
|
||||||
|
}
|
||||||
|
|
||||||
|
function mediaUrl(u: FeedUpload): string {
|
||||||
|
return u.preview_url ?? u.thumbnail_url ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function relativeTime(iso: string): string {
|
||||||
|
const diff = Date.now() - new Date(iso).getTime();
|
||||||
|
const mins = Math.floor(diff / 60000);
|
||||||
|
if (mins < 1) return 'gerade eben';
|
||||||
|
if (mins < 60) return `vor ${mins} Min.`;
|
||||||
|
const hrs = Math.floor(mins / 60);
|
||||||
|
if (hrs < 24) return `vor ${hrs} Std.`;
|
||||||
|
const days = Math.floor(hrs / 24);
|
||||||
|
return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initial(name: string): string {
|
||||||
|
return name[0]?.toUpperCase() ?? '?';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Deterministic color from name
|
||||||
|
const COLORS = [
|
||||||
|
'bg-blue-100 text-blue-700',
|
||||||
|
'bg-purple-100 text-purple-700',
|
||||||
|
'bg-green-100 text-green-700',
|
||||||
|
'bg-amber-100 text-amber-700',
|
||||||
|
'bg-rose-100 text-rose-700',
|
||||||
|
'bg-teal-100 text-teal-700',
|
||||||
|
];
|
||||||
|
function avatarColor(name: string): string {
|
||||||
|
let hash = 0;
|
||||||
|
for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
|
||||||
|
return COLORS[hash % COLORS.length];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<article class="bg-white">
|
||||||
|
<!-- Uploader row -->
|
||||||
|
<div class="flex items-center gap-3 px-4 py-3">
|
||||||
|
<div
|
||||||
|
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
|
||||||
|
{avatarColor(upload.uploader_name)}"
|
||||||
|
>
|
||||||
|
{initial(upload.uploader_name)}
|
||||||
|
</div>
|
||||||
|
<div class="min-w-0">
|
||||||
|
<p class="truncate text-sm font-semibold text-gray-900">{upload.uploader_name}</p>
|
||||||
|
<p class="text-xs text-gray-400">{relativeTime(upload.created_at)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Media -->
|
||||||
|
<button
|
||||||
|
class="block w-full"
|
||||||
|
onclick={() => onselect(upload)}
|
||||||
|
aria-label="Bild vergrößern"
|
||||||
|
>
|
||||||
|
{#if isVideo(upload.mime_type)}
|
||||||
|
<div class="relative aspect-video w-full bg-gray-900">
|
||||||
|
{#if mediaUrl(upload)}
|
||||||
|
<img src={mediaUrl(upload)} alt="" class="h-full w-full object-cover opacity-80" />
|
||||||
|
{/if}
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<span class="flex h-14 w-14 items-center justify-center rounded-full bg-black/50 text-white">
|
||||||
|
<svg class="h-7 w-7 pl-0.5" fill="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path d="M8 5v14l11-7z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else if mediaUrl(upload)}
|
||||||
|
<img
|
||||||
|
src={mediaUrl(upload)}
|
||||||
|
alt=""
|
||||||
|
class="w-full object-cover"
|
||||||
|
style="max-height: 80svh"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<div class="flex aspect-square w-full items-center justify-center bg-gray-100">
|
||||||
|
<svg class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Actions row -->
|
||||||
|
<div class="flex items-center gap-4 px-4 py-2">
|
||||||
|
<button
|
||||||
|
onclick={() => onlike(upload.id)}
|
||||||
|
class="flex items-center gap-1.5 text-sm font-medium transition-colors
|
||||||
|
{upload.liked_by_me ? 'text-red-500' : 'text-gray-500 hover:text-red-400'}"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 {upload.liked_by_me ? 'fill-red-500' : ''}"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||||
|
</svg>
|
||||||
|
{upload.like_count}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onclick={() => oncomment(upload.id)}
|
||||||
|
class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500"
|
||||||
|
>
|
||||||
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||||
|
</svg>
|
||||||
|
{upload.comment_count}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Caption -->
|
||||||
|
{#if upload.caption}
|
||||||
|
<p class="px-4 pb-3 text-sm text-gray-800 [overflow-wrap:anywhere]">
|
||||||
|
{upload.caption}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="border-b border-gray-100"></div>
|
||||||
|
</article>
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
{
|
{
|
||||||
icon: '⬆️',
|
icon: '⬆️',
|
||||||
title: 'Fotos & Videos hochladen',
|
title: 'Fotos & Videos hochladen',
|
||||||
body: 'Tippe oben auf „Hochladen", um Fotos aus deiner Galerie oder direkt mit der Kamera aufzunehmen. Mehrere Dateien auf einmal sind kein Problem!'
|
body: 'Tippe auf den Plus-Button unten in der Mitte, um Fotos aus deiner Galerie zu wählen oder direkt mit der Kamera aufzunehmen. Mehrere Dateien auf einmal sind kein Problem!'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: '#️⃣',
|
icon: '#️⃣',
|
||||||
|
|||||||
135
frontend/src/lib/components/UploadSheet.svelte
Normal file
135
frontend/src/lib/components/UploadSheet.svelte
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
import { uploadSheetOpen } from '$lib/ui-store';
|
||||||
|
import { pendingFiles } from '$lib/pending-upload-store';
|
||||||
|
import CameraCapture from '$lib/components/CameraCapture.svelte';
|
||||||
|
import type { PendingFile } from '$lib/pending-upload-store';
|
||||||
|
|
||||||
|
let showCamera = $state(false);
|
||||||
|
let fileInput: HTMLInputElement;
|
||||||
|
|
||||||
|
// Keep the sheet and backdrop always in the DOM for smooth CSS transitions.
|
||||||
|
let open = $derived($uploadSheetOpen);
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
uploadSheetOpen.set(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function openGallery() {
|
||||||
|
fileInput?.click();
|
||||||
|
}
|
||||||
|
|
||||||
|
function openCamera() {
|
||||||
|
showCamera = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleFiles() {
|
||||||
|
const files = fileInput?.files;
|
||||||
|
if (!files || files.length === 0) return;
|
||||||
|
|
||||||
|
const staged: PendingFile[] = [];
|
||||||
|
for (const file of files) {
|
||||||
|
staged.push({ file, previewUrl: URL.createObjectURL(file) });
|
||||||
|
}
|
||||||
|
pendingFiles.set(staged);
|
||||||
|
fileInput.value = '';
|
||||||
|
close();
|
||||||
|
await goto('/upload');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleCapture(blob: Blob, type: 'photo' | 'video') {
|
||||||
|
const ext = type === 'photo' ? 'jpg' : blob.type.includes('mp4') ? 'mp4' : 'webm';
|
||||||
|
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
||||||
|
const fileName = `${type}_${timestamp}.${ext}`;
|
||||||
|
const file = new File([blob], fileName, { type: blob.type });
|
||||||
|
pendingFiles.set([{ file, previewUrl: URL.createObjectURL(file) }]);
|
||||||
|
showCamera = false;
|
||||||
|
close();
|
||||||
|
await goto('/upload');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCameraClose() {
|
||||||
|
showCamera = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Camera (rendered outside sheet so it gets full viewport) -->
|
||||||
|
{#if showCamera}
|
||||||
|
<CameraCapture oncapture={handleCapture} onclose={handleCameraClose} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Hidden file input -->
|
||||||
|
<input
|
||||||
|
bind:this={fileInput}
|
||||||
|
type="file"
|
||||||
|
accept="image/*,video/*"
|
||||||
|
multiple
|
||||||
|
class="hidden"
|
||||||
|
onchange={handleFiles}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Backdrop -->
|
||||||
|
<div
|
||||||
|
class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-300"
|
||||||
|
class:opacity-0={!open}
|
||||||
|
class:pointer-events-none={!open}
|
||||||
|
class:opacity-100={open}
|
||||||
|
onclick={close}
|
||||||
|
aria-hidden="true"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- Sheet -->
|
||||||
|
<div
|
||||||
|
class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-300"
|
||||||
|
class:translate-y-full={!open}
|
||||||
|
class:translate-y-0={open}
|
||||||
|
style="padding-bottom: env(safe-area-inset-bottom)"
|
||||||
|
>
|
||||||
|
<!-- Drag handle -->
|
||||||
|
<div class="flex justify-center pt-3 pb-1">
|
||||||
|
<div class="h-1 w-10 rounded-full bg-gray-300"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-3 px-4 pb-4 pt-2">
|
||||||
|
<!-- Gallery option -->
|
||||||
|
<button
|
||||||
|
onclick={openGallery}
|
||||||
|
class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200"
|
||||||
|
>
|
||||||
|
<span class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-100 text-blue-600">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-gray-900">Galerie</p>
|
||||||
|
<p class="text-sm text-gray-500">Foto oder Video wählen</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Camera option -->
|
||||||
|
<button
|
||||||
|
onclick={openCamera}
|
||||||
|
class="flex w-full items-center gap-4 rounded-xl bg-gray-50 px-5 py-4 text-left transition hover:bg-gray-100 active:bg-gray-200"
|
||||||
|
>
|
||||||
|
<span class="flex h-11 w-11 items-center justify-center rounded-full bg-purple-100 text-purple-600">
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<p class="font-semibold text-gray-900">Kamera</p>
|
||||||
|
<p class="text-sm text-gray-500">Jetzt aufnehmen</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Cancel -->
|
||||||
|
<button
|
||||||
|
onclick={close}
|
||||||
|
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-600 transition hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
17
frontend/src/lib/pending-upload-store.ts
Normal file
17
frontend/src/lib/pending-upload-store.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
export interface PendingFile {
|
||||||
|
file: File;
|
||||||
|
previewUrl: string; // URL.createObjectURL result — revoke after use
|
||||||
|
}
|
||||||
|
|
||||||
|
export const pendingFiles = writable<PendingFile[]>([]);
|
||||||
|
export const pendingCaption = writable('');
|
||||||
|
|
||||||
|
export function clearPending() {
|
||||||
|
pendingFiles.update((files) => {
|
||||||
|
for (const f of files) URL.revokeObjectURL(f.previewUrl);
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
pendingCaption.set('');
|
||||||
|
}
|
||||||
13
frontend/src/lib/ui-store.ts
Normal file
13
frontend/src/lib/ui-store.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { writable, derived } from 'svelte/store';
|
||||||
|
import { queueItems } from './upload-queue';
|
||||||
|
|
||||||
|
// Controls BottomNav visibility. Upload page sets this false on mount and restores on destroy.
|
||||||
|
export const showBottomNav = writable(true);
|
||||||
|
|
||||||
|
// Controls the UploadSheet overlay. FAB sets true; sheet sets false.
|
||||||
|
export const uploadSheetOpen = writable(false);
|
||||||
|
|
||||||
|
// Count of items currently pending or uploading — shown as FAB badge.
|
||||||
|
export const uploadBadgeCount = derived(queueItems, ($items) =>
|
||||||
|
$items.filter((i) => i.status === 'pending' || i.status === 'uploading').length
|
||||||
|
);
|
||||||
@@ -3,9 +3,22 @@
|
|||||||
import '../app.css';
|
import '../app.css';
|
||||||
import { initAuth } from '$lib/auth';
|
import { initAuth } from '$lib/auth';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import BottomNav from '$lib/components/BottomNav.svelte';
|
||||||
|
import UploadSheet from '$lib/components/UploadSheet.svelte';
|
||||||
|
import { showBottomNav } from '$lib/ui-store';
|
||||||
|
import { isAuthenticated } from '$lib/auth';
|
||||||
|
import { queueItems, isProcessing } from '$lib/upload-queue';
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
|
// Slim progress bar: ratio of completed items to total, shown while processing.
|
||||||
|
let progressPct = $derived.by(() => {
|
||||||
|
const total = $queueItems.length;
|
||||||
|
if (total === 0) return 0;
|
||||||
|
const done = $queueItems.filter((i) => i.status === 'done').length;
|
||||||
|
return Math.round((done / total) * 100);
|
||||||
|
});
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
initAuth();
|
initAuth();
|
||||||
});
|
});
|
||||||
@@ -16,3 +29,23 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
{@render children()}
|
{@render children()}
|
||||||
|
|
||||||
|
<!-- Slim upload progress bar — sits just above the bottom nav -->
|
||||||
|
{#if $isProcessing && $isAuthenticated && $showBottomNav}
|
||||||
|
<div
|
||||||
|
class="fixed z-30 h-0.5 bg-gray-200 transition-all"
|
||||||
|
style="bottom: calc(3.5rem + env(safe-area-inset-bottom)); left: 0; right: 0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="h-full bg-blue-500 transition-all duration-500"
|
||||||
|
style="width: {progressPct}%"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- UploadSheet is always mounted for smooth enter/exit animation -->
|
||||||
|
<UploadSheet />
|
||||||
|
|
||||||
|
{#if $showBottomNav && $isAuthenticated}
|
||||||
|
<BottomNav />
|
||||||
|
{/if}
|
||||||
|
|||||||
@@ -2,15 +2,14 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { getToken, getPin, getDisplayName, getExpiry, getRole, clearAuth } from '$lib/auth';
|
import { getToken, getPin, getDisplayName, getExpiry, getRole, clearAuth } from '$lib/auth';
|
||||||
import { api } from '$lib/api';
|
import { api } from '$lib/api';
|
||||||
import { browser } from '$app/environment';
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
let pin = $state<string | null>(null);
|
let pin = $state<string | null>(null);
|
||||||
let displayName = $state<string | null>(null);
|
let displayName = $state<string | null>(null);
|
||||||
let role = $state<'guest' | 'host' | 'admin' | null>(null);
|
let role = $state<'guest' | 'host' | 'admin' | null>(null);
|
||||||
let expiry = $state<Date | null>(null);
|
let expiry = $state<Date | null>(null);
|
||||||
let copied = $state(false);
|
|
||||||
let pinCopied = $state(false);
|
let pinCopied = $state(false);
|
||||||
|
let leaveConfirmOpen = $state(false);
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (!getToken()) {
|
if (!getToken()) {
|
||||||
@@ -55,31 +54,37 @@
|
|||||||
default: return 'bg-blue-100 text-blue-700';
|
default: return 'bg-blue-100 text-blue-700';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function avatarColor(name: string | null): string {
|
||||||
|
if (!name) return 'bg-gray-100 text-gray-500';
|
||||||
|
const COLORS = ['bg-blue-100 text-blue-700','bg-purple-100 text-purple-700','bg-green-100 text-green-700','bg-amber-100 text-amber-700','bg-rose-100 text-rose-700'];
|
||||||
|
let hash = 0;
|
||||||
|
for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
|
||||||
|
return COLORS[hash % COLORS.length];
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-h-screen bg-gray-50">
|
<div class="min-h-screen bg-gray-50 pb-24">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="border-b border-gray-200 bg-white">
|
<div class="border-b border-gray-200 bg-white">
|
||||||
<div class="mx-auto flex max-w-lg items-center justify-between 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">Mein Konto</h1>
|
<h1 class="text-xl font-bold text-gray-900">Mein Konto</h1>
|
||||||
<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mx-auto max-w-lg space-y-4 p-4">
|
<div class="mx-auto max-w-lg space-y-3 p-4">
|
||||||
<!-- Profile card -->
|
<!-- Profile card -->
|
||||||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-4">
|
||||||
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 text-xl font-bold text-blue-600">
|
<div
|
||||||
{#if displayName}
|
class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl font-bold
|
||||||
{displayName[0].toUpperCase()}
|
{avatarColor(displayName)}"
|
||||||
{:else}
|
>
|
||||||
?
|
{displayName ? displayName[0].toUpperCase() : '?'}
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="min-w-0">
|
||||||
<p class="font-semibold text-gray-900">{displayName ?? 'Unbekannt'}</p>
|
<p class="truncate text-lg font-bold text-gray-900">{displayName ?? 'Unbekannt'}</p>
|
||||||
<span class="inline-block rounded-full px-2 py-0.5 text-xs font-medium {roleColor(role)}">
|
<span class="mt-0.5 inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold {roleColor(role)}">
|
||||||
{roleLabel(role)}
|
{roleLabel(role)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -89,6 +94,43 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Dashboards section (host + admin only) -->
|
||||||
|
{#if role === 'host' || role === 'admin'}
|
||||||
|
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
|
<div class="border-b border-gray-100 px-5 py-3">
|
||||||
|
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Dashboards</h2>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="/host"
|
||||||
|
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
<!-- Star icon -->
|
||||||
|
<svg class="h-5 w-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="flex-1 font-medium text-gray-900">Host-Dashboard</span>
|
||||||
|
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
{#if role === 'admin'}
|
||||||
|
<a
|
||||||
|
href="/admin"
|
||||||
|
class="flex items-center gap-3 border-t border-gray-100 px-5 py-4 transition hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
<!-- Shield icon -->
|
||||||
|
<svg class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||||
|
</svg>
|
||||||
|
<span class="flex-1 font-medium text-gray-900">Admin-Dashboard</span>
|
||||||
|
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<!-- PIN card -->
|
<!-- PIN card -->
|
||||||
<div class="rounded-xl border border-amber-200 bg-amber-50 p-5">
|
<div class="rounded-xl border border-amber-200 bg-amber-50 p-5">
|
||||||
<h2 class="mb-1 font-semibold text-amber-900">Wiederherstellungs-PIN</h2>
|
<h2 class="mb-1 font-semibold text-amber-900">Wiederherstellungs-PIN</h2>
|
||||||
@@ -112,26 +154,70 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Recovery hint -->
|
<!-- Konto section -->
|
||||||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
<h2 class="mb-1 font-semibold text-gray-900">Gerät wechseln?</h2>
|
<div class="border-b border-gray-100 px-5 py-3">
|
||||||
<p class="text-sm text-gray-600">
|
<h2 class="text-xs font-semibold uppercase tracking-wide text-gray-500">Konto</h2>
|
||||||
Auf einem anderen Gerät kannst du dein Konto mit deinem Namen und PIN wiederherstellen.
|
|
||||||
</p>
|
|
||||||
<a
|
|
||||||
href="/recover"
|
|
||||||
class="mt-3 inline-block text-sm font-medium text-blue-600 hover:underline"
|
|
||||||
>
|
|
||||||
Zur Wiederherstellungs-Seite →
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Logout -->
|
<!-- Recover / device switch -->
|
||||||
<button
|
<a
|
||||||
onclick={handleLogout}
|
href="/recover"
|
||||||
class="w-full rounded-xl border border-red-200 bg-white py-3 text-sm font-medium text-red-600 transition hover:bg-red-50"
|
class="flex items-center gap-3 px-5 py-4 transition hover:bg-gray-50"
|
||||||
>
|
>
|
||||||
Abmelden
|
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 8.25h3m-3 3h3m-3 3h3" />
|
||||||
|
</svg>
|
||||||
|
<span class="flex-1 text-sm font-medium text-gray-700">Gerät wechseln / PIN nutzen</span>
|
||||||
|
<svg class="h-4 w-4 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Leave / logout -->
|
||||||
|
<button
|
||||||
|
onclick={() => (leaveConfirmOpen = true)}
|
||||||
|
class="flex w-full items-center gap-3 border-t border-gray-100 px-5 py-4 text-left transition hover:bg-red-50"
|
||||||
|
>
|
||||||
|
<svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
|
||||||
|
</svg>
|
||||||
|
<span class="flex-1 text-sm font-medium text-red-600">Event verlassen</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Leave-confirm bottom sheet -->
|
||||||
|
{#if leaveConfirmOpen}
|
||||||
|
<div class="fixed inset-0 z-50 flex items-end bg-black/40" onclick={() => (leaveConfirmOpen = false)} aria-hidden="true">
|
||||||
|
<div
|
||||||
|
class="w-full rounded-t-2xl bg-white px-5 pb-10 pt-6"
|
||||||
|
onclick={(e) => e.stopPropagation()}
|
||||||
|
onkeydown={(e) => e.stopPropagation()}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div class="mb-4 flex justify-center">
|
||||||
|
<div class="h-1 w-10 rounded-full bg-gray-300"></div>
|
||||||
|
</div>
|
||||||
|
<h3 class="mb-1 text-center text-lg font-bold text-gray-900">Event verlassen?</h3>
|
||||||
|
<p class="mb-6 text-center text-sm text-gray-500">
|
||||||
|
Du wirst abgemeldet. Mit deinem PIN kannst du jederzeit zurückkehren.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onclick={handleLogout}
|
||||||
|
class="mb-3 w-full rounded-xl bg-red-600 py-3 text-sm font-semibold text-white transition hover:bg-red-700"
|
||||||
|
>
|
||||||
|
Abmelden
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onclick={() => (leaveConfirmOpen = false)}
|
||||||
|
class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Abbrechen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|||||||
@@ -23,6 +23,17 @@
|
|||||||
completed_at: string | null;
|
completed_at: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface UserSummary {
|
||||||
|
id: string;
|
||||||
|
display_name: string;
|
||||||
|
role: string;
|
||||||
|
is_banned: boolean;
|
||||||
|
uploads_hidden: boolean;
|
||||||
|
upload_count: number;
|
||||||
|
total_upload_bytes: number;
|
||||||
|
created_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
const CONFIG_LABELS: Record<string, string> = {
|
const CONFIG_LABELS: Record<string, string> = {
|
||||||
max_image_size_mb: 'Max. Bildgröße (MB)',
|
max_image_size_mb: 'Max. Bildgröße (MB)',
|
||||||
max_video_size_mb: 'Max. Videogröße (MB)',
|
max_video_size_mb: 'Max. Videogröße (MB)',
|
||||||
@@ -34,14 +45,36 @@
|
|||||||
compression_concurrency: 'Kompressions-Worker'
|
compression_concurrency: 'Kompressions-Worker'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type AdminTab = 'stats' | 'config' | 'export' | 'users';
|
||||||
|
const TAB_LABELS: Record<AdminTab, string> = { stats: 'Stats', config: 'Config', export: 'Export', users: 'Nutzer' };
|
||||||
|
|
||||||
|
let activeTab = $state<AdminTab>('stats');
|
||||||
|
|
||||||
let stats = $state<StatsDto | null>(null);
|
let stats = $state<StatsDto | null>(null);
|
||||||
let config = $state<Record<string, string>>({});
|
let config = $state<Record<string, string>>({});
|
||||||
let configDraft = $state<Record<string, string>>({});
|
let configDraft = $state<Record<string, string>>({});
|
||||||
let exportJobs = $state<ExportJob[]>([]);
|
let exportJobs = $state<ExportJob[]>([]);
|
||||||
|
let users = $state<UserSummary[]>([]);
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
let saving = $state(false);
|
let saving = $state(false);
|
||||||
let error = $state<string | null>(null);
|
let error = $state<string | null>(null);
|
||||||
let toast = $state<string | null>(null);
|
let toast = $state<string | null>(null);
|
||||||
|
let exportJobsRefreshing = $state(false);
|
||||||
|
|
||||||
|
// Nutzer tab state
|
||||||
|
let userSearch = $state('');
|
||||||
|
let filteredUsers = $derived(
|
||||||
|
userSearch.trim()
|
||||||
|
? users.filter((u) => u.display_name.toLowerCase().includes(userSearch.toLowerCase()))
|
||||||
|
: users
|
||||||
|
);
|
||||||
|
|
||||||
|
// Ban modal state
|
||||||
|
let banTarget = $state<UserSummary | null>(null);
|
||||||
|
let banHideUploads = $state(false);
|
||||||
|
let banSubmitting = $state(false);
|
||||||
|
|
||||||
|
const myRole = getRole();
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const token = getToken();
|
const token = getToken();
|
||||||
@@ -57,10 +90,11 @@
|
|||||||
loading = true;
|
loading = true;
|
||||||
error = null;
|
error = null;
|
||||||
try {
|
try {
|
||||||
[stats, config, exportJobs] = await Promise.all([
|
[stats, config, exportJobs, users] = await Promise.all([
|
||||||
api.get<StatsDto>('/admin/stats'),
|
api.get<StatsDto>('/admin/stats'),
|
||||||
api.get<Record<string, string>>('/admin/config'),
|
api.get<Record<string, string>>('/admin/config'),
|
||||||
api.get<ExportJob[]>('/admin/export/jobs')
|
api.get<ExportJob[]>('/admin/export/jobs'),
|
||||||
|
api.get<UserSummary[]>('/host/users')
|
||||||
]);
|
]);
|
||||||
configDraft = { ...config };
|
configDraft = { ...config };
|
||||||
} catch (e: unknown) {
|
} catch (e: unknown) {
|
||||||
@@ -70,8 +104,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let exportJobsRefreshing = $state(false);
|
|
||||||
|
|
||||||
async function refreshExportJobs() {
|
async function refreshExportJobs() {
|
||||||
exportJobsRefreshing = true;
|
exportJobsRefreshing = true;
|
||||||
try {
|
try {
|
||||||
@@ -89,7 +121,6 @@
|
|||||||
async function saveConfig() {
|
async function saveConfig() {
|
||||||
saving = true;
|
saving = true;
|
||||||
try {
|
try {
|
||||||
// Only send changed values
|
|
||||||
const changes: Record<string, string> = {};
|
const changes: Record<string, string> = {};
|
||||||
for (const key of Object.keys(configDraft)) {
|
for (const key of Object.keys(configDraft)) {
|
||||||
if (configDraft[key] !== config[key]) {
|
if (configDraft[key] !== config[key]) {
|
||||||
@@ -110,15 +141,74 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function releaseGallery() {
|
||||||
|
try {
|
||||||
|
await api.post('/host/gallery/release');
|
||||||
|
showToast('Galerie wurde freigegeben. Export wird vorbereitet…');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
showToast(e instanceof Error ? e.message : 'Fehler.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openBanModal(user: UserSummary) {
|
||||||
|
banTarget = user;
|
||||||
|
banHideUploads = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirmBan() {
|
||||||
|
if (!banTarget) return;
|
||||||
|
banSubmitting = true;
|
||||||
|
try {
|
||||||
|
await api.post(`/host/users/${banTarget.id}/ban`, { hide_uploads: banHideUploads });
|
||||||
|
showToast(`${banTarget.display_name} wurde gesperrt.`);
|
||||||
|
banTarget = null;
|
||||||
|
users = await api.get<UserSummary[]>('/host/users');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
showToast(e instanceof Error ? e.message : 'Fehler.');
|
||||||
|
} finally {
|
||||||
|
banSubmitting = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function unban(user: UserSummary) {
|
||||||
|
try {
|
||||||
|
await api.post(`/host/users/${user.id}/unban`);
|
||||||
|
showToast(`Sperre für ${user.display_name} aufgehoben.`);
|
||||||
|
users = await api.get<UserSummary[]>('/host/users');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
showToast(e instanceof Error ? e.message : 'Fehler.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function promoteToHost(user: UserSummary) {
|
||||||
|
try {
|
||||||
|
await api.patch(`/host/users/${user.id}/role`, { role: 'host' });
|
||||||
|
showToast(`${user.display_name} ist jetzt Host.`);
|
||||||
|
users = await api.get<UserSummary[]>('/host/users');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
showToast(e instanceof Error ? e.message : 'Fehler.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function demoteToGuest(user: UserSummary) {
|
||||||
|
try {
|
||||||
|
await api.patch(`/host/users/${user.id}/role`, { role: 'guest' });
|
||||||
|
showToast(`${user.display_name} ist jetzt Gast.`);
|
||||||
|
users = await api.get<UserSummary[]>('/host/users');
|
||||||
|
} catch (e: unknown) {
|
||||||
|
showToast(e instanceof Error ? e.message : 'Fehler.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function formatBytes(bytes: number): string {
|
function formatBytes(bytes: number): string {
|
||||||
if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
|
if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
|
||||||
if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
|
if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
|
||||||
return `${(bytes / 1024).toFixed(1)} KB`;
|
return `${(bytes / 1024).toFixed(1)} KB`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function diskPct(stats: StatsDto): number {
|
function diskPct(s: StatsDto): number {
|
||||||
if (stats.disk_total_bytes === 0) return 0;
|
if (s.disk_total_bytes === 0) return 0;
|
||||||
return Math.round((stats.disk_used_bytes / stats.disk_total_bytes) * 100);
|
return Math.round((s.disk_used_bytes / s.disk_total_bytes) * 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
function jobLabel(type: string): string {
|
function jobLabel(type: string): string {
|
||||||
@@ -145,102 +235,165 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- Ban modal -->
|
||||||
|
{#if banTarget}
|
||||||
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
|
||||||
|
<div class="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
|
||||||
|
<h2 class="mb-1 text-lg font-bold text-gray-900">Benutzer sperren</h2>
|
||||||
|
<p class="mb-4 text-sm text-gray-600">
|
||||||
|
Was soll mit den Uploads von <strong>{banTarget.display_name}</strong> passieren?
|
||||||
|
</p>
|
||||||
|
<label class="mb-4 flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-3">
|
||||||
|
<input type="checkbox" bind:checked={banHideUploads} class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500" />
|
||||||
|
<span class="text-sm text-gray-700">Uploads aus der Galerie ausblenden</span>
|
||||||
|
</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button onclick={() => (banTarget = null)} class="flex-1 rounded-lg border border-gray-300 py-2 text-sm text-gray-700 hover:bg-gray-50">Abbrechen</button>
|
||||||
|
<button onclick={confirmBan} disabled={banSubmitting} class="flex-1 rounded-lg bg-red-600 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50">
|
||||||
|
{banSubmitting ? 'Wird gesperrt…' : 'Sperren'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<!-- Toast -->
|
<!-- Toast -->
|
||||||
{#if toast}
|
{#if toast}
|
||||||
<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
|
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
|
||||||
{toast}
|
{toast}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="min-h-screen bg-gray-50">
|
<div class="min-h-screen bg-gray-50 pb-24">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="border-b border-gray-200 bg-white">
|
<div class="border-b border-gray-200 bg-white">
|
||||||
<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
|
<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
|
||||||
<h1 class="text-xl font-bold text-gray-900">Admin Dashboard</h1>
|
<button
|
||||||
<div class="flex items-center gap-3">
|
onclick={() => goto('/account')}
|
||||||
<a href="/host" class="text-gray-400 hover:text-gray-600" aria-label="Host Dashboard">
|
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
aria-label="Zurück"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
|
>
|
||||||
|
<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" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</button>
|
||||||
<a href="/feed" class="text-sm text-gray-500 hover:text-gray-700">Galerie</a>
|
<h1 class="text-xl font-bold text-gray-900">Admin-Dashboard</h1>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mx-auto max-w-3xl space-y-4 p-4">
|
<!-- Inner tab bar -->
|
||||||
|
<div class="sticky top-0 z-20 overflow-x-auto border-b border-gray-200 bg-white">
|
||||||
|
<div class="mx-auto flex max-w-3xl min-w-max">
|
||||||
|
{#each Object.entries(TAB_LABELS) as [tab, label]}
|
||||||
|
<button
|
||||||
|
onclick={() => (activeTab = tab as AdminTab)}
|
||||||
|
class="px-5 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors
|
||||||
|
{activeTab === tab ? 'border-blue-600 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'}"
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mx-auto max-w-3xl p-4">
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<div class="py-16 text-center text-gray-400">Laden…</div>
|
<div class="py-16 text-center text-gray-400">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 class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
|
||||||
{:else}
|
{:else}
|
||||||
<!-- Stats -->
|
|
||||||
{#if stats}
|
|
||||||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
|
||||||
<h2 class="mb-4 font-semibold text-gray-900">Statistiken</h2>
|
|
||||||
<div class="grid grid-cols-3 gap-4 text-center">
|
|
||||||
<div class="rounded-lg bg-gray-50 p-3">
|
|
||||||
<p class="text-2xl font-bold text-gray-900">{stats.user_count}</p>
|
|
||||||
<p class="text-xs text-gray-500">Gäste</p>
|
|
||||||
</div>
|
|
||||||
<div class="rounded-lg bg-gray-50 p-3">
|
|
||||||
<p class="text-2xl font-bold text-gray-900">{stats.upload_count}</p>
|
|
||||||
<p class="text-xs text-gray-500">Uploads</p>
|
|
||||||
</div>
|
|
||||||
<div class="rounded-lg bg-gray-50 p-3">
|
|
||||||
<p class="text-2xl font-bold text-gray-900">{stats.comment_count}</p>
|
|
||||||
<p class="text-xs text-gray-500">Kommentare</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Disk usage -->
|
<!-- ── Stats tab ────────────────────────────────────────────────── -->
|
||||||
<div class="mt-4">
|
{#if activeTab === 'stats'}
|
||||||
<div class="mb-1 flex items-center justify-between text-xs text-gray-500">
|
<div class="space-y-3">
|
||||||
<span>Speicher</span>
|
{#if stats}
|
||||||
<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)} ({diskPct(stats)} %)</span>
|
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||||
|
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
|
||||||
|
<p class="text-3xl font-bold text-gray-900">{stats.user_count}</p>
|
||||||
|
<p class="mt-0.5 text-xs text-gray-500">Gäste</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-2 overflow-hidden rounded-full bg-gray-200">
|
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
|
||||||
|
<p class="text-3xl font-bold text-gray-900">{stats.upload_count}</p>
|
||||||
|
<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
|
||||||
|
<p class="text-3xl font-bold text-gray-900">{stats.comment_count}</p>
|
||||||
|
<p class="mt-0.5 text-xs text-gray-500">Kommentare</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl bg-white border border-gray-200 p-4 text-center">
|
||||||
|
<p class="text-3xl font-bold text-gray-900">{diskPct(stats)} %</p>
|
||||||
|
<p class="mt-0.5 text-xs text-gray-500">Speicher</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Disk bar -->
|
||||||
|
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||||||
|
<div class="mb-1 flex items-center justify-between text-xs text-gray-500">
|
||||||
|
<span>Speicherauslastung</span>
|
||||||
|
<span>{formatBytes(stats.disk_used_bytes)} / {formatBytes(stats.disk_total_bytes)}</span>
|
||||||
|
</div>
|
||||||
|
<div class="h-2.5 overflow-hidden rounded-full bg-gray-200">
|
||||||
<div
|
<div
|
||||||
class="h-full rounded-full transition-all {diskPct(stats) >= 90 ? 'bg-red-500' : diskPct(stats) >= 75 ? 'bg-amber-500' : 'bg-blue-500'}"
|
class="h-full rounded-full transition-all {diskPct(stats) >= 90 ? 'bg-red-500' : diskPct(stats) >= 75 ? 'bg-amber-500' : 'bg-blue-500'}"
|
||||||
style="width: {diskPct(stats)}%"
|
style="width: {diskPct(stats)}%"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<p class="mt-1 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
|
<p class="mt-1.5 text-xs text-gray-400">{formatBytes(stats.disk_free_bytes)} frei</p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Config -->
|
<!-- ── Config tab ───────────────────────────────────────────────── -->
|
||||||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
{:else if activeTab === 'config'}
|
||||||
<h2 class="mb-4 font-semibold text-gray-900">Konfiguration</h2>
|
<div class="relative">
|
||||||
<div class="space-y-3">
|
<div class="space-y-3 rounded-xl border border-gray-200 bg-white p-5 pb-20">
|
||||||
{#each Object.entries(CONFIG_LABELS) as [key, label]}
|
{#each Object.entries(CONFIG_LABELS) as [key, label]}
|
||||||
<div class="flex items-center gap-3">
|
<div>
|
||||||
<label for={key} class="w-56 shrink-0 text-sm text-gray-700">{label}</label>
|
<label for={key} class="mb-1 block text-sm font-medium text-gray-700">{label}</label>
|
||||||
<input
|
<input
|
||||||
id={key}
|
id={key}
|
||||||
type="number"
|
type="number"
|
||||||
step="any"
|
step="any"
|
||||||
bind:value={configDraft[key]}
|
bind:value={configDraft[key]}
|
||||||
class="w-32 rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
|
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Sticky save button -->
|
||||||
|
<div class="sticky bottom-0 border-t border-gray-100 bg-white px-5 py-3">
|
||||||
<button
|
<button
|
||||||
onclick={saveConfig}
|
onclick={saveConfig}
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
class="w-full rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white transition hover:bg-blue-700 disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{saving ? 'Wird gespeichert…' : 'Speichern'}
|
{saving ? 'Wird gespeichert…' : 'Speichern'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── Export tab ───────────────────────────────────────────────── -->
|
||||||
|
{:else if activeTab === 'export'}
|
||||||
|
<div class="space-y-3">
|
||||||
|
<!-- Gallery release -->
|
||||||
|
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||||||
|
<h3 class="mb-3 font-semibold text-gray-900">Galerie</h3>
|
||||||
|
<button
|
||||||
|
onclick={releaseGallery}
|
||||||
|
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700"
|
||||||
|
>
|
||||||
|
Galerie freigeben
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Export jobs -->
|
<!-- Export jobs -->
|
||||||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
||||||
<div class="mb-4 flex items-center justify-between">
|
<div class="mb-4 flex items-center justify-between">
|
||||||
<h2 class="font-semibold text-gray-900">Export-Jobs</h2>
|
<h3 class="font-semibold text-gray-900">Export-Jobs</h3>
|
||||||
<button onclick={refreshExportJobs} disabled={exportJobsRefreshing} class="text-xs text-blue-600 hover:underline disabled:opacity-50">
|
<button
|
||||||
|
onclick={refreshExportJobs}
|
||||||
|
disabled={exportJobsRefreshing}
|
||||||
|
class="text-xs text-blue-600 hover:underline disabled:opacity-50"
|
||||||
|
>
|
||||||
{exportJobsRefreshing ? 'Lädt…' : 'Aktualisieren'}
|
{exportJobsRefreshing ? 'Lädt…' : 'Aktualisieren'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -259,14 +412,10 @@
|
|||||||
{#if job.status === 'running'}
|
{#if job.status === 'running'}
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
<div class="mb-1 flex justify-between text-xs text-gray-500">
|
<div class="mb-1 flex justify-between text-xs text-gray-500">
|
||||||
<span>Fortschritt</span>
|
<span>Fortschritt</span><span>{job.progress_pct} %</span>
|
||||||
<span>{job.progress_pct} %</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
|
<div class="h-1.5 overflow-hidden rounded-full bg-gray-200">
|
||||||
<div
|
<div class="h-full rounded-full bg-blue-500 transition-all" style="width: {job.progress_pct}%"></div>
|
||||||
class="h-full rounded-full bg-blue-500 transition-all"
|
|
||||||
style="width: {job.progress_pct}%"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -278,6 +427,76 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── Nutzer tab ───────────────────────────────────────────────── -->
|
||||||
|
{:else if activeTab === 'users'}
|
||||||
|
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="p-4">
|
||||||
|
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
|
||||||
|
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||||
|
</svg>
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
placeholder="Nutzer suchen…"
|
||||||
|
bind:value={userSearch}
|
||||||
|
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{#if filteredUsers.length === 0}
|
||||||
|
<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
|
||||||
|
{:else}
|
||||||
|
<div class="divide-y divide-gray-100">
|
||||||
|
{#each filteredUsers as user}
|
||||||
|
<div class="flex items-center gap-3 px-5 py-3">
|
||||||
|
<div class="min-w-0 flex-1">
|
||||||
|
<div class="flex flex-wrap items-center gap-1.5">
|
||||||
|
<span class="font-medium text-gray-900">{user.display_name}</span>
|
||||||
|
{#if user.role === 'host'}
|
||||||
|
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
|
||||||
|
{:else if user.role === 'admin'}
|
||||||
|
<span class="rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700">Admin</span>
|
||||||
|
{/if}
|
||||||
|
{#if user.is_banned}
|
||||||
|
<span class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">Gesperrt</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<p class="text-xs text-gray-400">
|
||||||
|
{user.upload_count} Upload{user.upload_count !== 1 ? 's' : ''} · {formatBytes(user.total_upload_bytes)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex shrink-0 gap-1.5">
|
||||||
|
{#if user.role !== 'admin'}
|
||||||
|
{#if user.is_banned}
|
||||||
|
<button onclick={() => unban(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200">
|
||||||
|
Entsperren
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
{#if user.role === 'guest'}
|
||||||
|
<button onclick={() => promoteToHost(user)} class="rounded-lg bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100">
|
||||||
|
Host
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
{#if user.role === 'host' && myRole === 'admin'}
|
||||||
|
<button onclick={() => demoteToGuest(user)} class="rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-200">
|
||||||
|
Degradieren
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
<button onclick={() => openBanModal(user)} class="rounded-lg bg-red-50 px-3 py-1.5 text-xs font-medium text-red-700 hover:bg-red-100">
|
||||||
|
Sperren
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -137,11 +137,10 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="min-h-screen bg-gray-50">
|
<div class="min-h-screen bg-gray-50 pb-24">
|
||||||
<div class="border-b border-gray-200 bg-white">
|
<div class="border-b border-gray-200 bg-white">
|
||||||
<div class="mx-auto flex max-w-lg items-center justify-between 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">Export</h1>
|
<h1 class="text-xl font-bold text-gray-900">Export</h1>
|
||||||
<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,11 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { getToken, getRole } from '$lib/auth';
|
import { getToken } from '$lib/auth';
|
||||||
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 FeedGrid from '$lib/components/FeedGrid.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';
|
||||||
@@ -18,9 +19,75 @@
|
|||||||
let selectedUpload = $state<FeedUpload | null>(null);
|
let selectedUpload = $state<FeedUpload | null>(null);
|
||||||
let sentinel: HTMLDivElement;
|
let sentinel: HTMLDivElement;
|
||||||
|
|
||||||
const role = getRole();
|
// View mode
|
||||||
|
let viewMode = $state<'list' | 'grid'>('list');
|
||||||
|
|
||||||
|
// Grid search / filter state
|
||||||
|
let searchQuery = $state('');
|
||||||
|
let showAutocomplete = $state(false);
|
||||||
|
|
||||||
|
interface Filter { type: 'tag' | 'user'; value: string }
|
||||||
|
let activeFilters = $state<Filter[]>([]);
|
||||||
|
|
||||||
let unsubscribers: (() => void)[] = [];
|
let unsubscribers: (() => void)[] = [];
|
||||||
|
|
||||||
|
// ── Autocomplete derived from loaded uploads (no extra API calls) ────────
|
||||||
|
let allTags = $derived.by(() => {
|
||||||
|
const freq = new Map<string, number>();
|
||||||
|
for (const u of uploads) {
|
||||||
|
for (const m of (u.caption ?? '').matchAll(/#(\w+)/g)) {
|
||||||
|
const t = m[1].toLowerCase();
|
||||||
|
freq.set(t, (freq.get(t) ?? 0) + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return [...freq.entries()].sort((a, b) => b[1] - a[1]).map(([t]) => t);
|
||||||
|
});
|
||||||
|
|
||||||
|
let allUploaders = $derived([...new Set(uploads.map((u) => u.uploader_name))].sort());
|
||||||
|
|
||||||
|
let suggestions = $derived.by((): Filter[] => {
|
||||||
|
const q = searchQuery.trim();
|
||||||
|
if (!q) {
|
||||||
|
// Show top suggestions on focus
|
||||||
|
if (!showAutocomplete) return [];
|
||||||
|
return [
|
||||||
|
...allUploaders.slice(0, 3).map((u) => ({ type: 'user' as const, value: u })),
|
||||||
|
...allTags.slice(0, 3).map((t) => ({ type: 'tag' as const, value: t })),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
if (q.startsWith('#')) {
|
||||||
|
const prefix = q.slice(1).toLowerCase();
|
||||||
|
return allTags
|
||||||
|
.filter((t) => t.startsWith(prefix))
|
||||||
|
.slice(0, 8)
|
||||||
|
.map((t) => ({ type: 'tag' as const, value: t }));
|
||||||
|
}
|
||||||
|
const lower = q.toLowerCase();
|
||||||
|
return [
|
||||||
|
...allUploaders
|
||||||
|
.filter((u) => u.toLowerCase().includes(lower))
|
||||||
|
.slice(0, 4)
|
||||||
|
.map((u) => ({ type: 'user' as const, value: u })),
|
||||||
|
...allTags
|
||||||
|
.filter((t) => t.includes(lower))
|
||||||
|
.slice(0, 4)
|
||||||
|
.map((t) => ({ type: 'tag' as const, value: t })),
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Filtered uploads for grid view ───────────────────────────────────────
|
||||||
|
let displayUploads = $derived.by(() => {
|
||||||
|
if (viewMode === 'list' || activeFilters.length === 0) return uploads;
|
||||||
|
const tags = activeFilters.filter((f) => f.type === 'tag').map((f) => f.value);
|
||||||
|
const users = activeFilters.filter((f) => f.type === 'user').map((f) => f.value);
|
||||||
|
return uploads.filter((u) => {
|
||||||
|
const cap = (u.caption ?? '').toLowerCase();
|
||||||
|
const passTag = !tags.length || tags.some((t) => cap.includes('#' + t));
|
||||||
|
const passUser = !users.length || users.includes(u.uploader_name);
|
||||||
|
return passTag && passUser;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
if (!getToken()) {
|
if (!getToken()) {
|
||||||
goto('/join');
|
goto('/join');
|
||||||
@@ -37,25 +104,15 @@
|
|||||||
uploads = [upload, ...uploads];
|
uploads = [upload, ...uploads];
|
||||||
} catch { /* ignore */ }
|
} catch { /* ignore */ }
|
||||||
}),
|
}),
|
||||||
onSseEvent('upload-processed', () => {
|
onSseEvent('upload-processed', () => loadFeed(true)),
|
||||||
// Reload feed to get updated preview URLs
|
onSseEvent('like-update', () => loadFeed(true)),
|
||||||
loadFeed(true);
|
onSseEvent('new-comment', () => loadFeed(true))
|
||||||
}),
|
|
||||||
onSseEvent('like-update', () => {
|
|
||||||
loadFeed(true);
|
|
||||||
}),
|
|
||||||
onSseEvent('new-comment', () => {
|
|
||||||
loadFeed(true);
|
|
||||||
})
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Infinite scroll via IntersectionObserver
|
|
||||||
if (sentinel) {
|
if (sentinel) {
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
(entries) => {
|
(entries) => {
|
||||||
if (entries[0].isIntersecting && nextCursor && !loadingMore) {
|
if (entries[0].isIntersecting && nextCursor && !loadingMore) loadMore();
|
||||||
loadMore();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{ rootMargin: '200px' }
|
{ rootMargin: '200px' }
|
||||||
);
|
);
|
||||||
@@ -74,18 +131,10 @@
|
|||||||
if (!refresh && nextCursor) params.set('cursor', nextCursor);
|
if (!refresh && nextCursor) params.set('cursor', nextCursor);
|
||||||
if (selectedHashtag) params.set('hashtag', selectedHashtag);
|
if (selectedHashtag) params.set('hashtag', selectedHashtag);
|
||||||
params.set('limit', '20');
|
params.set('limit', '20');
|
||||||
|
|
||||||
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
||||||
|
|
||||||
if (refresh) {
|
|
||||||
uploads = res.uploads;
|
uploads = res.uploads;
|
||||||
} else {
|
|
||||||
uploads = res.uploads;
|
|
||||||
}
|
|
||||||
nextCursor = res.next_cursor;
|
nextCursor = res.next_cursor;
|
||||||
} catch {
|
} catch { /* ignore */ }
|
||||||
// Ignore
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadMore() {
|
async function loadMore() {
|
||||||
@@ -96,13 +145,10 @@
|
|||||||
params.set('cursor', nextCursor);
|
params.set('cursor', nextCursor);
|
||||||
if (selectedHashtag) params.set('hashtag', selectedHashtag);
|
if (selectedHashtag) params.set('hashtag', selectedHashtag);
|
||||||
params.set('limit', '20');
|
params.set('limit', '20');
|
||||||
|
|
||||||
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
const res = await api.get<FeedResponse>(`/feed?${params}`);
|
||||||
uploads = [...uploads, ...res.uploads];
|
uploads = [...uploads, ...res.uploads];
|
||||||
nextCursor = res.next_cursor;
|
nextCursor = res.next_cursor;
|
||||||
} catch {
|
} catch { /* ignore */ } finally {
|
||||||
// Ignore
|
|
||||||
} finally {
|
|
||||||
loadingMore = false;
|
loadingMore = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -110,9 +156,7 @@
|
|||||||
async function loadHashtags() {
|
async function loadHashtags() {
|
||||||
try {
|
try {
|
||||||
hashtags = await api.get<HashtagCount[]>('/hashtags');
|
hashtags = await api.get<HashtagCount[]>('/hashtags');
|
||||||
} catch {
|
} catch { /* ignore */ }
|
||||||
// Ignore
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectHashtag(tag: string | null) {
|
function selectHashtag(tag: string | null) {
|
||||||
@@ -124,29 +168,19 @@
|
|||||||
async function handleLike(id: string) {
|
async function handleLike(id: string) {
|
||||||
try {
|
try {
|
||||||
await api.post(`/upload/${id}/like`);
|
await api.post(`/upload/${id}/like`);
|
||||||
// Toggle locally for instant feedback
|
|
||||||
uploads = uploads.map((u) =>
|
uploads = uploads.map((u) =>
|
||||||
u.id === id
|
u.id === id
|
||||||
? {
|
? { ...u, liked_by_me: !u.liked_by_me, like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1 }
|
||||||
...u,
|
|
||||||
liked_by_me: !u.liked_by_me,
|
|
||||||
like_count: u.liked_by_me ? u.like_count - 1 : u.like_count + 1
|
|
||||||
}
|
|
||||||
: u
|
: u
|
||||||
);
|
);
|
||||||
// Also update lightbox if open
|
|
||||||
if (selectedUpload?.id === id) {
|
if (selectedUpload?.id === id) {
|
||||||
selectedUpload = {
|
selectedUpload = {
|
||||||
...selectedUpload,
|
...selectedUpload,
|
||||||
liked_by_me: !selectedUpload.liked_by_me,
|
liked_by_me: !selectedUpload.liked_by_me,
|
||||||
like_count: selectedUpload.liked_by_me
|
like_count: selectedUpload.liked_by_me ? selectedUpload.like_count - 1 : selectedUpload.like_count + 1,
|
||||||
? selectedUpload.like_count - 1
|
|
||||||
: selectedUpload.like_count + 1
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
} catch {
|
} catch { /* ignore */ }
|
||||||
// Ignore
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function openComments(id: string) {
|
function openComments(id: string) {
|
||||||
@@ -154,77 +188,187 @@
|
|||||||
if (u) selectedUpload = u;
|
if (u) selectedUpload = u;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function selectSuggestion(item: Filter) {
|
||||||
|
if (!activeFilters.some((f) => f.type === item.type && f.value === item.value)) {
|
||||||
|
activeFilters = [...activeFilters, item];
|
||||||
|
}
|
||||||
|
searchQuery = '';
|
||||||
|
showAutocomplete = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeFilter(item: Filter) {
|
||||||
|
activeFilters = activeFilters.filter((f) => !(f.type === item.type && f.value === item.value));
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearFilters() {
|
||||||
|
activeFilters = [];
|
||||||
|
searchQuery = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function switchView(mode: 'list' | 'grid') {
|
||||||
|
viewMode = mode;
|
||||||
|
if (mode === 'list') {
|
||||||
|
searchQuery = '';
|
||||||
|
showAutocomplete = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-h-screen bg-gray-50">
|
<div class="min-h-screen bg-gray-50 pb-24">
|
||||||
<!-- Header -->
|
<!-- Sticky header -->
|
||||||
<div class="sticky top-0 z-40 border-b border-gray-200 bg-white/95 backdrop-blur">
|
<div class="sticky top-0 z-30 border-b border-gray-200 bg-white/95 backdrop-blur">
|
||||||
<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
|
<div class="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">
|
||||||
<h1 class="text-lg font-bold text-gray-900">Galerie</h1>
|
<h1 class="text-lg font-bold text-gray-900">Galerie</h1>
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<a
|
<!-- List / Grid toggle -->
|
||||||
href="/upload"
|
<div class="flex items-center gap-1 rounded-lg bg-gray-100 p-1">
|
||||||
class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-blue-700"
|
<button
|
||||||
|
onclick={() => switchView('list')}
|
||||||
|
class="rounded-md p-1.5 transition-colors {viewMode === 'list' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
|
||||||
|
aria-label="Listenansicht"
|
||||||
>
|
>
|
||||||
Hochladen
|
<!-- bars-3 -->
|
||||||
</a>
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
{#if role === 'host' || role === 'admin'}
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||||
<a href="/host" class="text-gray-400 hover:text-gray-600" aria-label="Host Dashboard">
|
|
||||||
<!-- star icon -->
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
|
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</button>
|
||||||
{/if}
|
<button
|
||||||
{#if role === 'admin'}
|
onclick={() => switchView('grid')}
|
||||||
<a href="/admin" class="text-gray-400 hover:text-gray-600" aria-label="Admin Dashboard">
|
class="rounded-md p-1.5 transition-colors {viewMode === 'grid' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-400 hover:text-gray-600'}"
|
||||||
<!-- shield icon -->
|
aria-label="Rasteransicht"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
<a
|
|
||||||
href="/account"
|
|
||||||
class="text-gray-400 hover:text-gray-600"
|
|
||||||
aria-label="Mein Konto"
|
|
||||||
>
|
>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
<!-- squares-2x2 -->
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Hashtag filter chips -->
|
<!-- List view: hashtag chips -->
|
||||||
|
{#if viewMode === 'list'}
|
||||||
<div class="mx-auto max-w-2xl px-4 pb-2">
|
<div class="mx-auto max-w-2xl px-4 pb-2">
|
||||||
<HashtagChips {hashtags} selected={selectedHashtag} onselect={selectHashtag} />
|
<HashtagChips {hashtags} selected={selectedHashtag} onselect={selectHashtag} />
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Grid view: search bar + autocomplete -->
|
||||||
|
{#if viewMode === 'grid'}
|
||||||
|
<div class="mx-auto max-w-2xl px-4 pb-3">
|
||||||
|
<div class="relative">
|
||||||
|
<div class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2 focus-within:border-blue-400 focus-within:bg-white focus-within:ring-1 focus-within:ring-blue-200">
|
||||||
|
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||||||
|
</svg>
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
placeholder="Nutzer oder #Tag suchen…"
|
||||||
|
bind:value={searchQuery}
|
||||||
|
onfocus={() => (showAutocomplete = true)}
|
||||||
|
onblur={() => setTimeout(() => (showAutocomplete = false), 150)}
|
||||||
|
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
|
||||||
|
/>
|
||||||
|
{#if searchQuery}
|
||||||
|
<button
|
||||||
|
onclick={() => { searchQuery = ''; }}
|
||||||
|
class="shrink-0 text-gray-400 hover:text-gray-600"
|
||||||
|
aria-label="Suche löschen"
|
||||||
|
>
|
||||||
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Feed grid -->
|
<!-- Autocomplete dropdown -->
|
||||||
<div class="mx-auto max-w-2xl p-4">
|
{#if showAutocomplete && suggestions.length > 0}
|
||||||
{#if uploads.length === 0}
|
<div class="absolute left-0 right-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
|
||||||
<div class="py-16 text-center">
|
{#each suggestions as item}
|
||||||
<p class="text-lg text-gray-400">Noch keine Fotos.</p>
|
<button
|
||||||
<p class="mt-1 text-sm text-gray-400">Sei der Erste und lade etwas hoch!</p>
|
class="flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm hover:bg-gray-50"
|
||||||
<a href="/upload" class="mt-4 inline-block rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white">
|
onmousedown={() => selectSuggestion(item)}
|
||||||
Jetzt hochladen
|
>
|
||||||
</a>
|
{#if item.type === 'user'}
|
||||||
</div>
|
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
||||||
|
</svg>
|
||||||
|
<span class="font-medium text-gray-900">{item.value}</span>
|
||||||
{:else}
|
{:else}
|
||||||
<FeedGrid
|
<span class="text-blue-500 font-medium">#</span>
|
||||||
{uploads}
|
<span class="font-medium text-gray-900">{item.value}</span>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Active filter chips -->
|
||||||
|
{#if activeFilters.length > 0}
|
||||||
|
<div class="mt-2 flex flex-wrap items-center gap-1.5">
|
||||||
|
{#each activeFilters as filter}
|
||||||
|
<span class="flex items-center gap-1 rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">
|
||||||
|
{filter.type === 'tag' ? '#' : ''}{filter.value}
|
||||||
|
<button onclick={() => removeFilter(filter)} class="ml-0.5 hover:text-blue-900" aria-label="Filter entfernen">
|
||||||
|
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
{/each}
|
||||||
|
{#if activeFilters.length >= 2}
|
||||||
|
<button onclick={clearFilters} class="text-xs text-gray-400 hover:text-gray-600">
|
||||||
|
Alle löschen
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
{#if uploads.length === 0}
|
||||||
|
<div class="py-20 text-center">
|
||||||
|
<p class="text-lg text-gray-400">Noch keine Fotos.</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-400">Tippe auf den Plus-Button unten!</p>
|
||||||
|
</div>
|
||||||
|
{:else if viewMode === 'list'}
|
||||||
|
<!-- List view: chronological full-width cards -->
|
||||||
|
<div class="mx-auto max-w-2xl">
|
||||||
|
{#each uploads as upload (upload.id)}
|
||||||
|
<FeedListCard
|
||||||
|
{upload}
|
||||||
onlike={handleLike}
|
onlike={handleLike}
|
||||||
oncomment={openComments}
|
oncomment={openComments}
|
||||||
onselect={(u) => (selectedUpload = u)}
|
onselect={(u) => (selectedUpload = u)}
|
||||||
/>
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<!-- Grid view: 3-col, filters applied -->
|
||||||
|
<div class="mx-auto max-w-2xl">
|
||||||
|
{#if displayUploads.length === 0}
|
||||||
|
<div class="py-16 text-center">
|
||||||
|
<p class="text-sm text-gray-400">Keine Treffer für die gewählten Filter.</p>
|
||||||
|
<button onclick={clearFilters} class="mt-2 text-sm text-blue-600 hover:underline">Filter zurücksetzen</button>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<FeedGrid
|
||||||
|
uploads={displayUploads}
|
||||||
|
onlike={handleLike}
|
||||||
|
oncomment={openComments}
|
||||||
|
onselect={(u) => (selectedUpload = u)}
|
||||||
|
threeCol={true}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Infinite scroll sentinel -->
|
<!-- Infinite scroll sentinel -->
|
||||||
|
<div class="mx-auto max-w-2xl">
|
||||||
<div bind:this={sentinel} class="h-4"></div>
|
<div bind:this={sentinel} class="h-4"></div>
|
||||||
|
|
||||||
{#if loadingMore}
|
{#if loadingMore}
|
||||||
<div class="py-4 text-center">
|
<div class="py-4 text-center">
|
||||||
<div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
|
<div class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"></div>
|
||||||
|
|||||||
@@ -27,14 +27,28 @@
|
|||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
let error = $state<string | null>(null);
|
let error = $state<string | null>(null);
|
||||||
|
|
||||||
|
// Collapsible section state
|
||||||
|
let statsOpen = $state(true);
|
||||||
|
let settingsOpen = $state(true);
|
||||||
|
let usersOpen = $state(true);
|
||||||
|
|
||||||
|
// User search
|
||||||
|
let userSearch = $state('');
|
||||||
|
let filteredUsers = $derived(
|
||||||
|
userSearch.trim()
|
||||||
|
? users.filter((u) => u.display_name.toLowerCase().includes(userSearch.toLowerCase()))
|
||||||
|
: users
|
||||||
|
);
|
||||||
|
|
||||||
// Ban modal state
|
// Ban modal state
|
||||||
let banTarget = $state<UserSummary | null>(null);
|
let banTarget = $state<UserSummary | null>(null);
|
||||||
let banHideUploads = $state(false);
|
let banHideUploads = $state(false);
|
||||||
let banSubmitting = $state(false);
|
let banSubmitting = $state(false);
|
||||||
|
|
||||||
// Toast state
|
|
||||||
let toast = $state<string | null>(null);
|
let toast = $state<string | null>(null);
|
||||||
|
|
||||||
|
const myRole = getRole();
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const token = getToken();
|
const token = getToken();
|
||||||
const role = getRole();
|
const role = getRole();
|
||||||
@@ -146,8 +160,6 @@
|
|||||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const myRole = getRole();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Ban modal -->
|
<!-- Ban modal -->
|
||||||
@@ -187,88 +199,154 @@
|
|||||||
|
|
||||||
<!-- Toast -->
|
<!-- Toast -->
|
||||||
{#if toast}
|
{#if toast}
|
||||||
<div class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
|
<div class="fixed bottom-24 left-1/2 z-50 -translate-x-1/2 rounded-full bg-gray-900 px-5 py-2.5 text-sm text-white shadow-lg">
|
||||||
{toast}
|
{toast}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="min-h-screen bg-gray-50">
|
<div class="min-h-screen bg-gray-50 pb-24">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="border-b border-gray-200 bg-white">
|
<div class="border-b border-gray-200 bg-white">
|
||||||
<div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
|
<div class="mx-auto flex max-w-3xl items-center gap-3 px-4 py-4">
|
||||||
<div>
|
<button
|
||||||
<h1 class="text-xl font-bold text-gray-900">Host Dashboard</h1>
|
onclick={() => goto('/account')}
|
||||||
{#if event}
|
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
|
||||||
<p class="text-sm text-gray-500">{event.name}</p>
|
aria-label="Zurück"
|
||||||
{/if}
|
>
|
||||||
</div>
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
<div class="flex items-center gap-3">
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
|
||||||
{#if myRole === 'admin'}
|
|
||||||
<a href="/admin" class="text-gray-400 hover:text-gray-600" aria-label="Admin Dashboard">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
|
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</button>
|
||||||
|
<div class="min-w-0">
|
||||||
|
<h1 class="text-xl font-bold text-gray-900">Host-Dashboard</h1>
|
||||||
|
{#if event}
|
||||||
|
<p class="truncate text-sm text-gray-500">{event.name}</p>
|
||||||
{/if}
|
{/if}
|
||||||
<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mx-auto max-w-3xl space-y-4 p-4">
|
<div class="mx-auto max-w-3xl space-y-3 p-4">
|
||||||
{#if loading}
|
{#if loading}
|
||||||
<div class="py-16 text-center text-gray-400">Laden…</div>
|
<div class="py-16 text-center text-gray-400">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 class="rounded-lg bg-red-50 p-4 text-sm text-red-700">{error}</div>
|
||||||
{:else if event}
|
{:else if event}
|
||||||
<!-- Event controls -->
|
|
||||||
<div class="rounded-xl border border-gray-200 bg-white p-5">
|
<!-- ── Statistiken ─────────────────────────────────────────────── -->
|
||||||
<h2 class="mb-4 font-semibold text-gray-900">Veranstaltung</h2>
|
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
<div class="flex flex-wrap gap-3">
|
<button
|
||||||
|
onclick={() => (statsOpen = !statsOpen)}
|
||||||
|
class="flex w-full items-center justify-between px-5 py-4"
|
||||||
|
>
|
||||||
|
<h2 class="font-semibold text-gray-900">Statistiken</h2>
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 text-gray-400 transition-transform duration-200 {statsOpen ? 'rotate-180' : ''}"
|
||||||
|
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="overflow-hidden transition-[max-height] duration-200 {statsOpen ? 'max-h-[500px]' : 'max-h-0'}">
|
||||||
|
<div class="grid grid-cols-2 gap-3 border-t border-gray-100 p-4 sm:grid-cols-4">
|
||||||
|
<div class="rounded-xl bg-gray-50 p-4 text-center">
|
||||||
|
<p class="text-2xl font-bold text-gray-900">{users.length}</p>
|
||||||
|
<p class="mt-0.5 text-xs text-gray-500">Gäste</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl bg-gray-50 p-4 text-center">
|
||||||
|
<p class="text-2xl font-bold text-gray-900">{users.reduce((s, u) => s + u.upload_count, 0)}</p>
|
||||||
|
<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl bg-gray-50 p-4 text-center">
|
||||||
|
<p class="text-2xl font-bold {event.uploads_locked ? 'text-red-600' : 'text-green-600'}">
|
||||||
|
{event.uploads_locked ? 'Gesperrt' : 'Offen'}
|
||||||
|
</p>
|
||||||
|
<p class="mt-0.5 text-xs text-gray-500">Uploads</p>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl bg-gray-50 p-4 text-center">
|
||||||
|
<p class="text-2xl font-bold {event.export_released ? 'text-blue-600' : 'text-gray-400'}">
|
||||||
|
{event.export_released ? 'Ja' : 'Nein'}
|
||||||
|
</p>
|
||||||
|
<p class="mt-0.5 text-xs text-gray-500">Freigegeben</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── Event-Einstellungen ─────────────────────────────────────── -->
|
||||||
|
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
|
<button
|
||||||
|
onclick={() => (settingsOpen = !settingsOpen)}
|
||||||
|
class="flex w-full items-center justify-between px-5 py-4"
|
||||||
|
>
|
||||||
|
<h2 class="font-semibold text-gray-900">Event-Einstellungen</h2>
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 text-gray-400 transition-transform duration-200 {settingsOpen ? 'rotate-180' : ''}"
|
||||||
|
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="overflow-hidden transition-[max-height] duration-200 {settingsOpen ? 'max-h-[500px]' : 'max-h-0'}">
|
||||||
|
<div class="flex flex-wrap gap-3 border-t border-gray-100 p-5">
|
||||||
<button
|
<button
|
||||||
onclick={toggleEventLock}
|
onclick={toggleEventLock}
|
||||||
class="rounded-lg px-4 py-2 text-sm font-medium {event.uploads_locked
|
class="rounded-lg px-4 py-2 text-sm font-medium transition
|
||||||
? 'bg-green-600 text-white hover:bg-green-700'
|
{event.uploads_locked ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-amber-500 text-white hover:bg-amber-600'}"
|
||||||
: 'bg-amber-500 text-white hover:bg-amber-600'}"
|
|
||||||
>
|
>
|
||||||
{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
|
{event.uploads_locked ? 'Uploads wieder öffnen' : 'Uploads sperren'}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onclick={releaseGallery}
|
onclick={releaseGallery}
|
||||||
disabled={event.export_released}
|
disabled={event.export_released}
|
||||||
class="rounded-lg px-4 py-2 text-sm font-medium {event.export_released
|
class="rounded-lg px-4 py-2 text-sm font-medium transition
|
||||||
? 'cursor-default bg-gray-100 text-gray-400'
|
{event.export_released ? 'cursor-default bg-gray-100 text-gray-400' : 'bg-blue-600 text-white hover:bg-blue-700'}"
|
||||||
: 'bg-blue-600 text-white hover:bg-blue-700'}"
|
|
||||||
>
|
>
|
||||||
{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
|
{event.export_released ? 'Galerie bereits freigegeben' : 'Galerie freigeben'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 flex gap-4 text-xs text-gray-500">
|
|
||||||
<span class="flex items-center gap-1">
|
|
||||||
<span class="h-2 w-2 rounded-full {event.uploads_locked ? 'bg-red-500' : 'bg-green-500'}"></span>
|
|
||||||
Uploads {event.uploads_locked ? 'gesperrt' : 'offen'}
|
|
||||||
</span>
|
|
||||||
<span class="flex items-center gap-1">
|
|
||||||
<span class="h-2 w-2 rounded-full {event.export_released ? 'bg-blue-500' : 'bg-gray-300'}"></span>
|
|
||||||
Export {event.export_released ? 'freigegeben' : 'gesperrt'}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- User management -->
|
<!-- ── Nutzerverwaltung ───────────────────────────────────────── -->
|
||||||
<div class="rounded-xl border border-gray-200 bg-white">
|
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white">
|
||||||
<div class="border-b border-gray-100 px-5 py-4">
|
<button
|
||||||
<h2 class="font-semibold text-gray-900">Gäste ({users.length})</h2>
|
onclick={() => (usersOpen = !usersOpen)}
|
||||||
|
class="flex w-full items-center justify-between px-5 py-4"
|
||||||
|
>
|
||||||
|
<h2 class="font-semibold text-gray-900">Nutzerverwaltung</h2>
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 text-gray-400 transition-transform duration-200 {usersOpen ? 'rotate-180' : ''}"
|
||||||
|
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
|
||||||
|
>
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="overflow-hidden transition-[max-height] duration-300 {usersOpen ? 'max-h-[9999px]' : 'max-h-0'}">
|
||||||
|
<div class="border-t border-gray-100">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="px-4 py-3">
|
||||||
|
<div class="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
|
||||||
|
<svg class="h-4 w-4 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||||
|
</svg>
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
placeholder="Nutzer suchen…"
|
||||||
|
bind:value={userSearch}
|
||||||
|
class="min-w-0 flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400 outline-none"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{#if users.length === 0}
|
</div>
|
||||||
<p class="px-5 py-8 text-center text-sm text-gray-400">Noch keine Gäste.</p>
|
{#if filteredUsers.length === 0}
|
||||||
|
<p class="px-5 py-8 text-center text-sm text-gray-400">Keine Treffer.</p>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="divide-y divide-gray-100">
|
<div class="divide-y divide-gray-100">
|
||||||
{#each users as user}
|
{#each filteredUsers as user}
|
||||||
<div class="flex items-center gap-3 px-5 py-3">
|
<div class="flex items-center gap-3 px-5 py-3">
|
||||||
<div class="min-w-0 flex-1">
|
<div class="min-w-0 flex-1">
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex flex-wrap items-center gap-1.5">
|
||||||
<span class="truncate font-medium text-gray-900">{user.display_name}</span>
|
<span class="font-medium text-gray-900">{user.display_name}</span>
|
||||||
{#if user.role === 'host'}
|
{#if user.role === 'host'}
|
||||||
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
|
<span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">Host</span>
|
||||||
{:else if user.role === 'admin'}
|
{:else if user.role === 'admin'}
|
||||||
@@ -322,6 +400,8 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,111 +2,193 @@
|
|||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { getToken } from '$lib/auth';
|
import { getToken } from '$lib/auth';
|
||||||
import { addToQueue, loadQueue } from '$lib/upload-queue';
|
import { addToQueue, loadQueue } from '$lib/upload-queue';
|
||||||
import UploadQueue from '$lib/components/UploadQueue.svelte';
|
import { showBottomNav } from '$lib/ui-store';
|
||||||
import CameraCapture from '$lib/components/CameraCapture.svelte';
|
import { pendingFiles, pendingCaption, clearPending } from '$lib/pending-upload-store';
|
||||||
import { onMount } from 'svelte';
|
import { get } from 'svelte/store';
|
||||||
|
import { onMount, onDestroy } from 'svelte';
|
||||||
|
import type { PendingFile } from '$lib/pending-upload-store';
|
||||||
|
|
||||||
|
interface StagedFile extends PendingFile {
|
||||||
|
// previewUrl and file inherited from PendingFile
|
||||||
|
}
|
||||||
|
|
||||||
|
let stagedFiles = $state<StagedFile[]>([]);
|
||||||
let caption = $state('');
|
let caption = $state('');
|
||||||
let hashtags = $state('');
|
let submitting = $state(false);
|
||||||
let fileInput: HTMLInputElement;
|
let captionEl: HTMLTextAreaElement;
|
||||||
let showCamera = $state(false);
|
|
||||||
|
// Quick-tag chips derived from caption as the user types
|
||||||
|
let captionTags = $derived.by(() => {
|
||||||
|
const matches = [...caption.matchAll(/#(\w+)/g)];
|
||||||
|
return [...new Set(matches.map((m) => m[1].toLowerCase()))];
|
||||||
|
});
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
showBottomNav.set(false);
|
||||||
if (!getToken()) {
|
if (!getToken()) {
|
||||||
goto('/join');
|
goto('/join');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
loadQueue();
|
loadQueue();
|
||||||
|
|
||||||
|
// Pull staged files from the pending store (written by UploadSheet)
|
||||||
|
const pf = get(pendingFiles);
|
||||||
|
const pc = get(pendingCaption);
|
||||||
|
stagedFiles = pf;
|
||||||
|
caption = pc;
|
||||||
|
|
||||||
|
// Auto-focus caption textarea after a short delay (let layout settle)
|
||||||
|
setTimeout(() => captionEl?.focus(), 80);
|
||||||
});
|
});
|
||||||
|
|
||||||
async function handleFiles() {
|
onDestroy(() => {
|
||||||
const files = fileInput?.files;
|
showBottomNav.set(true);
|
||||||
if (!files || files.length === 0) return;
|
});
|
||||||
|
|
||||||
for (const file of files) {
|
function removeFile(idx: number) {
|
||||||
await addToQueue(file, caption, hashtags);
|
const removed = stagedFiles[idx];
|
||||||
|
URL.revokeObjectURL(removed.previewUrl);
|
||||||
|
stagedFiles = stagedFiles.filter((_, i) => i !== idx);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset form
|
function cancel() {
|
||||||
caption = '';
|
clearPending();
|
||||||
hashtags = '';
|
goto('/feed');
|
||||||
if (fileInput) fileInput.value = '';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleCapture(blob: Blob, type: 'photo' | 'video') {
|
async function handleSubmit() {
|
||||||
const ext = type === 'photo' ? 'jpg' : blob.type.includes('mp4') ? 'mp4' : 'webm';
|
if (stagedFiles.length === 0 || submitting) return;
|
||||||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
|
submitting = true;
|
||||||
const fileName = `${type}_${timestamp}.${ext}`;
|
for (const sf of stagedFiles) {
|
||||||
const file = new File([blob], fileName, { type: blob.type });
|
await addToQueue(sf.file, caption, '');
|
||||||
await addToQueue(file, caption, hashtags);
|
}
|
||||||
|
clearPending();
|
||||||
|
goto('/feed');
|
||||||
|
}
|
||||||
|
|
||||||
|
function isVideo(file: File): boolean {
|
||||||
|
return file.type.startsWith('video/');
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if showCamera}
|
<!-- Full-screen composer — bottom nav is suppressed -->
|
||||||
<CameraCapture
|
<div class="flex min-h-screen flex-col bg-white">
|
||||||
oncapture={handleCapture}
|
<!-- Header -->
|
||||||
onclose={() => (showCamera = false)}
|
<div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="min-h-screen bg-gray-50 p-4">
|
|
||||||
<div class="mx-auto max-w-lg">
|
|
||||||
<div class="mb-6 flex items-center justify-between">
|
|
||||||
<h1 class="text-xl font-bold text-gray-900">Hochladen</h1>
|
|
||||||
<a href="/feed" class="text-sm text-blue-600 hover:underline">Zur Galerie</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rounded-lg border border-gray-200 bg-white p-4">
|
|
||||||
<div class="grid grid-cols-2 gap-3">
|
|
||||||
<!-- File picker -->
|
|
||||||
<label
|
|
||||||
class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition hover:border-blue-400 hover:bg-blue-50"
|
|
||||||
>
|
|
||||||
<svg class="mb-2 h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 16V4m0 0l-4 4m4-4l4 4M4 20h16" />
|
|
||||||
</svg>
|
|
||||||
<span class="text-center text-sm font-medium text-gray-600">Galerie</span>
|
|
||||||
<span class="mt-1 text-center text-xs text-gray-400">Mehrere Dateien</span>
|
|
||||||
<input
|
|
||||||
bind:this={fileInput}
|
|
||||||
type="file"
|
|
||||||
accept="image/*,video/*"
|
|
||||||
multiple
|
|
||||||
class="hidden"
|
|
||||||
onchange={handleFiles}
|
|
||||||
/>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- Camera button -->
|
|
||||||
<button
|
<button
|
||||||
onclick={() => (showCamera = true)}
|
onclick={cancel}
|
||||||
class="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-6 transition hover:border-blue-400 hover:bg-blue-50"
|
class="flex h-9 w-9 items-center justify-center rounded-full text-gray-500 transition hover:bg-gray-100"
|
||||||
|
aria-label="Abbrechen"
|
||||||
>
|
>
|
||||||
<svg class="mb-2 h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<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" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
||||||
</svg>
|
</svg>
|
||||||
<span class="text-sm font-medium text-gray-600">Kamera</span>
|
</button>
|
||||||
<span class="mt-1 text-xs text-gray-400">Foto & Video</span>
|
<h1 class="text-base font-semibold text-gray-900">Neuer Beitrag</h1>
|
||||||
|
<!-- Submit button in header for desktop convenience -->
|
||||||
|
<button
|
||||||
|
onclick={handleSubmit}
|
||||||
|
disabled={stagedFiles.length === 0 || submitting}
|
||||||
|
class="rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white transition
|
||||||
|
hover:bg-blue-700 disabled:opacity-40"
|
||||||
|
>
|
||||||
|
{submitting ? 'Wird hochgeladen…' : 'Hochladen'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-4 space-y-3">
|
<div class="flex flex-1 flex-col overflow-y-auto">
|
||||||
<input
|
<!-- Thumbnail strip -->
|
||||||
type="text"
|
{#if stagedFiles.length > 0}
|
||||||
bind:value={caption}
|
<div class="flex gap-2 overflow-x-auto px-4 py-3 scrollbar-none">
|
||||||
placeholder="Beschreibung (optional, #hashtags möglich)"
|
{#each stagedFiles as sf, i}
|
||||||
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
|
<div class="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-100">
|
||||||
/>
|
{#if isVideo(sf.file)}
|
||||||
<input
|
<div class="flex h-full w-full items-center justify-center bg-gray-800">
|
||||||
type="text"
|
<svg class="h-7 w-7 text-white/70" fill="currentColor" viewBox="0 0 24 24">
|
||||||
bind:value={hashtags}
|
<path d="M8 5v14l11-7z" />
|
||||||
placeholder="Hashtags (kommagetrennt, z.B. hochzeit, party)"
|
</svg>
|
||||||
class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-200"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
{:else}
|
||||||
|
<img src={sf.previewUrl} alt="" class="h-full w-full object-cover" />
|
||||||
|
{/if}
|
||||||
|
<button
|
||||||
|
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"
|
||||||
|
aria-label="Entfernen"
|
||||||
|
>
|
||||||
|
<svg class="h-3 w-3" 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" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="border-b border-gray-100"></div>
|
||||||
|
{:else}
|
||||||
|
<!-- No files: prompt to go back and pick some -->
|
||||||
|
<div class="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
|
||||||
|
<svg class="h-16 w-16 text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M9 9.75h.008v.008H9V9.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
|
||||||
|
</svg>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium text-gray-500">Keine Dateien ausgewählt</p>
|
||||||
|
<p class="mt-1 text-sm text-gray-400">Geh zurück und tippe auf den Plus-Button.</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onclick={cancel}
|
||||||
|
class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
|
||||||
|
>
|
||||||
|
Zurück
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Caption textarea -->
|
||||||
|
<div class="px-4 pt-4">
|
||||||
|
<textarea
|
||||||
|
bind:this={captionEl}
|
||||||
|
bind:value={caption}
|
||||||
|
placeholder="Beschreibung hinzufügen… (#hashtags möglich)"
|
||||||
|
rows="4"
|
||||||
|
class="w-full resize-none rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-900
|
||||||
|
placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-blue-200"
|
||||||
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<UploadQueue />
|
<!-- Quick-tag chips (derived from typed caption) -->
|
||||||
|
{#if captionTags.length > 0}
|
||||||
|
<div class="flex flex-wrap gap-1.5 px-4 pt-2">
|
||||||
|
{#each captionTags as tag}
|
||||||
|
<span class="rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-600">
|
||||||
|
#{tag}
|
||||||
|
</span>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="h-8"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sticky submit button at bottom (mobile-primary) -->
|
||||||
|
<div class="border-t border-gray-100 px-4 py-3">
|
||||||
|
<button
|
||||||
|
onclick={handleSubmit}
|
||||||
|
disabled={stagedFiles.length === 0 || submitting}
|
||||||
|
class="flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 py-3.5 text-sm font-semibold
|
||||||
|
text-white transition hover:bg-blue-700 active:scale-[0.98] disabled:opacity-40"
|
||||||
|
>
|
||||||
|
{#if submitting}
|
||||||
|
<svg class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||||
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
||||||
|
</svg>
|
||||||
|
Wird hochgeladen…
|
||||||
|
{:else}
|
||||||
|
<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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
|
||||||
|
</svg>
|
||||||
|
{stagedFiles.length > 0 ? `${stagedFiles.length} Datei${stagedFiles.length > 1 ? 'en' : ''} hochladen` : 'Hochladen'}
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user