integrate edit button into astro site
This commit is contained in:
Davide Scaini
@@ -199,44 +199,46 @@ Sidecars work for *remote* activities too: if you include someone else's BAS fee
|
||||
you can write local `.md` sidecars for their activity IDs. Your render stage applies
|
||||
your overrides on top of their data. This is a natural extension of the local case.
|
||||
|
||||
### Editing UX: `bincio edit --serve`
|
||||
### Editing UX: drawer in Astro + `bincio edit` write API
|
||||
|
||||
A separate FastAPI server (`bincio edit --serve`, default port 4041) handles all writes.
|
||||
The static site and Astro are untouched — no hybrid mode, no dead-code API routes in prod.
|
||||
The edit UI is a **slide-in drawer** (`EditDrawer.svelte`) in the Astro site.
|
||||
The drawer fetches from and POSTs to the `bincio edit` FastAPI server (write API only —
|
||||
the server no longer serves its own HTML UI).
|
||||
|
||||
**How it works:**
|
||||
|
||||
```
|
||||
bincio edit --serve --data ~/bincio_data # starts on :4041
|
||||
bincio render --serve # Astro dev server, port 4321
|
||||
bincio edit --data-dir ~/… # write API only, port 4041
|
||||
```
|
||||
|
||||
- Serves a bundled Svelte UI (single compiled HTML, reuses existing Svelte investment)
|
||||
- `GET /api/activity/{id}` — returns merged BAS JSON + existing sidecar fields
|
||||
- `POST /api/activity/{id}` — writes `edits/{id}.md` to the data dir
|
||||
- Edit button appears on the activity detail page **only when `PUBLIC_EDIT_URL` is set** in `site/.env`
|
||||
- Clicking Edit opens the drawer in the same page — no navigation, no copy-pasting IDs
|
||||
- Drawer fetches `GET /api/activity/{id}` to pre-fill, `POST /api/activity/{id}` to save
|
||||
- After save: server runs `merge_all()` automatically → Astro serves updated data immediately on refresh
|
||||
- Closing the drawer applies `title` + `description` changes optimistically to the local page state
|
||||
(no full reload required to see the text change)
|
||||
|
||||
**`PUBLIC_EDIT_URL` as feature flag:**
|
||||
- **Unset** → no Edit button, no drawer. Works as a normal static site. Safe for public hosting.
|
||||
- **Set** (e.g. `http://localhost:4041`) → editing enabled. Lives in `site/.env` (gitignored).
|
||||
Each deployment opts in explicitly.
|
||||
|
||||
**Edit server API (`bincio edit --data-dir <dir>`):**
|
||||
- `GET /api/activity/{id}` — current values (sidecar overrides layered on BAS JSON)
|
||||
- `POST /api/activity/{id}` — write sidecar `.md`, trigger `merge_all()`
|
||||
- `POST /api/activity/{id}/images` — multipart upload → `edits/images/{id}/{filename}`
|
||||
- The Astro dev server's file watcher picks up `.md` writes → incremental rebuild
|
||||
- `DELETE /api/activity/{id}/images/{filename}` — remove uploaded image
|
||||
|
||||
**Edit UI features:**
|
||||
- Title text input (pre-filled from BAS JSON)
|
||||
- Sport dropdown (pre-filled, shows all known sport types)
|
||||
- Markdown textarea for description, with minimal toolbar (bold, italic, link, image insert)
|
||||
- Live markdown preview panel
|
||||
- `hide_stats` checkbox group: elevation, speed, heart_rate, cadence, power
|
||||
- `highlight` toggle (feature in feed)
|
||||
- `private` toggle (suppress from feed at render time)
|
||||
- Image drag-and-drop zone → uploads to `edits/images/{id}/`, inserts `![]()` into textarea
|
||||
- Save button → POST to API → success toast
|
||||
**Edit drawer features:**
|
||||
- Title, sport dropdown, gear
|
||||
- Markdown textarea for description (images inserted as `` references)
|
||||
- Image drag-and-drop zone with chip list + delete
|
||||
- Hide stat panels (elevation, speed, heart_rate, cadence, power) — toggle buttons
|
||||
- Highlight flag (★ — sorts to top of feed, visual badge)
|
||||
- Private flag (⊘ — suppressed from index at render time)
|
||||
|
||||
**Workflow (typical):**
|
||||
1. User browses the Astro dev server on :4040
|
||||
2. Activity detail page has an "Edit" button (rendered only when `PUBLIC_EDIT_URL` env var is set)
|
||||
3. Button links to `:4041/edit/{id}` — opens the FastAPI-served edit UI
|
||||
4. User fills in form, saves → sidecar written → Astro rebuilds → refreshing :4040 shows changes
|
||||
|
||||
The `PUBLIC_EDIT_URL` env var in `.env` controls whether the Edit button appears;
|
||||
leave it unset for production builds, set to `http://localhost:4041` for local dev.
|
||||
|
||||
### Image storage
|
||||
### Image storage and serving
|
||||
|
||||
```
|
||||
~/bincio_data/
|
||||
@@ -249,17 +251,20 @@ leave it unset for production builds, set to `http://localhost:4041` for local d
|
||||
```
|
||||
|
||||
Images are referenced in the markdown body with relative paths: ``.
|
||||
The render stage resolves relative image paths against `edits/images/{id}/` and copies them
|
||||
to `site/public/images/activities/{id}/` so they're served from the static site.
|
||||
`merge_all()` symlinks `edits/images/{id}/` → `_merged/activities/images/{id}/` so images
|
||||
are served at `data/activities/images/{id}/{filename}` by the Astro dev server.
|
||||
`ActivityDetail.svelte` rewrites relative image paths to this URL when rendering markdown.
|
||||
|
||||
**Note:** browsers cannot display `.HEIC` files. Convert to JPEG/PNG first:
|
||||
`sips -s format jpeg photo.HEIC --out photo.jpg` (macOS).
|
||||
|
||||
### Decided
|
||||
|
||||
- **Sidecar location**: `edits/` subdirectory (not co-located with JSON) — cleaner, easier to
|
||||
backup/sync just your customisations independently of the extracted data
|
||||
- **`private: true`**: suppresses from `index.json` at render time (not client-side hide) —
|
||||
safer for public hosting
|
||||
- **`highlight`**: visual badge in feed + sorted before non-highlighted activities
|
||||
- **Edit UI**: `bincio edit --serve` FastAPI server (Option B) — not integrated into Astro
|
||||
- **Sidecar location**: `edits/` subdirectory — cleaner, easier to backup/sync independently
|
||||
- **Merge output**: `data/_merged/` — extracted data stays pristine; `public/data` → `_merged/`
|
||||
- **`private: true`**: suppressed from `index.json` at render time (not client-side hide)
|
||||
- **`highlight`**: sorts to top of feed; visual badge TBD
|
||||
- **Edit UI**: drawer in Astro site, `bincio edit` is a pure write API (no HTML serving)
|
||||
|
||||
## Known issues / next steps
|
||||
|
||||
@@ -282,9 +287,12 @@ to `site/public/images/activities/{id}/` so they're served from the static site.
|
||||
- [ ] Map thumbnail in activity cards (SVG path from GeoJSON)
|
||||
- [ ] GitHub Actions template for auto-publish
|
||||
- [ ] Karoo/Garmin Connect importers beyond Strava
|
||||
- [ ] `bincio.render.merge` module: walk `edits/`, parse sidecars, produce enriched data for Astro
|
||||
- [ ] `bincio render --watch` incremental rebuild on sidecar changes
|
||||
- [ ] Sidecar `.md` format: title, sport, description, hide_stats, highlight, private, images
|
||||
- [ ] `bincio edit --serve` FastAPI server with Svelte edit UI (port 4041)
|
||||
- [ ] Edit button on activity detail pages (visible when `PUBLIC_EDIT_URL` env var set)
|
||||
- [ ] Image upload → `edits/images/{id}/`, render stage copies to `public/images/activities/{id}/`
|
||||
- [x] `bincio.render.merge` — sidecar parser, `_merged/` output, private filter, highlight sort
|
||||
- [x] `bincio edit` FastAPI write API (GET/POST activity, image upload/delete, triggers merge)
|
||||
- [x] `EditDrawer.svelte` — slide-in edit UI in the Astro site (no separate HTML from server)
|
||||
- [x] `PUBLIC_EDIT_URL` feature flag — unset = no edit UI, set = drawer enabled
|
||||
- [x] Markdown rendering in activity description with image path rewriting
|
||||
- [x] `hide_stats` support in activity detail stats panel
|
||||
- [ ] `bincio render --watch` incremental rebuild on sidecar/data changes
|
||||
- [ ] Highlight badge in activity feed cards
|
||||
- [ ] Image format warning (HEIC → JPEG conversion hint in the upload UI)
|
||||
|
||||
@@ -403,6 +403,11 @@ async def save_activity(activity_id: str, payload: dict[str, Any]) -> JSONRespon
|
||||
content += "\n" + description + "\n"
|
||||
|
||||
sidecar_path.write_text(content, encoding="utf-8")
|
||||
|
||||
# Re-merge so the Astro dev server immediately serves updated data
|
||||
from bincio.render.merge import merge_all
|
||||
merge_all(dd)
|
||||
|
||||
return JSONResponse({"ok": True, "sidecar": str(sidecar_path)})
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
BINCIO_DATA_DIR=/tmp/bincio_test
|
||||
PUBLIC_EDIT_URL=http://localhost:4041
|
||||
+2
-1
@@ -12,9 +12,10 @@
|
||||
"dependencies": {
|
||||
"@astrojs/svelte": "^7.0.0",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@observablehq/plot": "^0.6.0",
|
||||
"astro": "^5.0.0",
|
||||
"maplibre-gl": "^5.0.0",
|
||||
"@observablehq/plot": "^0.6.0",
|
||||
"marked": "^17.0.5",
|
||||
"svelte": "^5.0.0",
|
||||
"tailwindcss": "^3.4.0"
|
||||
},
|
||||
|
||||
@@ -1,17 +1,26 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { marked } from 'marked';
|
||||
import type { ActivitySummary, ActivityDetail } from '../lib/types';
|
||||
import { formatDistance, formatDuration, formatElevation, formatSpeed, formatDate, formatTime, sportIcon, sportLabel, sportColor } from '../lib/format';
|
||||
import ActivityMap from './ActivityMap.svelte';
|
||||
import ActivityCharts from './ActivityCharts.svelte';
|
||||
import EditDrawer from './EditDrawer.svelte';
|
||||
|
||||
export let activity: ActivitySummary;
|
||||
export let base: string = '/';
|
||||
|
||||
const editUrl = import.meta.env.PUBLIC_EDIT_URL;
|
||||
|
||||
let detail: ActivityDetail | null = null;
|
||||
let error = '';
|
||||
// Linked hover index shared between map and charts
|
||||
let hoveredIdx: number | null = null;
|
||||
let editOpen = false;
|
||||
|
||||
// Local overrides applied immediately after a save (no re-fetch needed)
|
||||
let localTitle = '';
|
||||
let localDescription = '';
|
||||
$: displayTitle = localTitle || activity.title;
|
||||
|
||||
onMount(async () => {
|
||||
if (!activity.detail_url) return;
|
||||
@@ -24,22 +33,48 @@
|
||||
}
|
||||
});
|
||||
|
||||
function onSaved(e: CustomEvent<{ title: string; description: string }>) {
|
||||
editOpen = false;
|
||||
localTitle = e.detail.title;
|
||||
localDescription = e.detail.description;
|
||||
}
|
||||
|
||||
$: trackUrl = activity.track_url ? `${base}data/${activity.track_url}` : null;
|
||||
$: color = sportColor(activity.sport);
|
||||
|
||||
const stat = (label: string, value: string) => ({ label, value });
|
||||
$: rawDescription = localDescription || detail?.description || '';
|
||||
$: descriptionHtml = (() => {
|
||||
if (!rawDescription) return '';
|
||||
const imageBase = `${base}data/activities/images/${activity.id}/`;
|
||||
const renderer = new marked.Renderer();
|
||||
renderer.image = ({ href, title, text }) => {
|
||||
const src = href && !href.startsWith('http') && !href.startsWith('/') && !href.startsWith('data:')
|
||||
? imageBase + href
|
||||
: href ?? '';
|
||||
const titleAttr = title ? ` title="${title}"` : '';
|
||||
return `<img src="${src}" alt="${text}"${titleAttr} class="rounded-lg max-w-full my-2">`;
|
||||
};
|
||||
return marked(rawDescription, { renderer }) as string;
|
||||
})();
|
||||
|
||||
const stat = (label: string, value: string, key?: string) => ({ label, value, key });
|
||||
$: hiddenStats = new Set<string>((detail?.custom as any)?.hide_stats ?? []);
|
||||
$: stats = [
|
||||
stat('Distance', formatDistance(activity.distance_m)),
|
||||
stat('Moving time', formatDuration(activity.moving_time_s ?? activity.duration_s)),
|
||||
stat('Elevation ↑', formatElevation(activity.elevation_gain_m)),
|
||||
stat('Avg speed', formatSpeed(activity.avg_speed_kmh)),
|
||||
stat('Max speed', formatSpeed(activity.max_speed_kmh)),
|
||||
stat('Avg HR', activity.avg_hr_bpm ? `${activity.avg_hr_bpm} bpm` : '—'),
|
||||
stat('Max HR', activity.max_hr_bpm ? `${activity.max_hr_bpm} bpm` : '—'),
|
||||
stat('Cadence', activity.avg_cadence_rpm ? `${activity.avg_cadence_rpm} rpm` : '—'),
|
||||
];
|
||||
stat('Elevation ↑', formatElevation(activity.elevation_gain_m), 'elevation'),
|
||||
stat('Avg speed', formatSpeed(activity.avg_speed_kmh), 'speed'),
|
||||
stat('Max speed', formatSpeed(activity.max_speed_kmh), 'speed'),
|
||||
stat('Avg HR', activity.avg_hr_bpm ? `${activity.avg_hr_bpm} bpm` : '—', 'heart_rate'),
|
||||
stat('Max HR', activity.max_hr_bpm ? `${activity.max_hr_bpm} bpm` : '—', 'heart_rate'),
|
||||
stat('Cadence', activity.avg_cadence_rpm ? `${activity.avg_cadence_rpm} rpm` : '—', 'cadence'),
|
||||
].filter(s => !s.key || !hiddenStats.has(s.key));
|
||||
</script>
|
||||
|
||||
{#if editOpen && editUrl}
|
||||
<EditDrawer activityId={activity.id} {editUrl} on:saved={onSaved} />
|
||||
{/if}
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-start gap-4 mb-6">
|
||||
<a href={`${base}`} class="text-zinc-500 hover:text-white transition-colors mt-1 shrink-0">
|
||||
@@ -57,9 +92,21 @@
|
||||
{formatDate(activity.started_at)} · {formatTime(activity.started_at)}
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold text-white">{activity.title}</h1>
|
||||
{#if detail?.description}
|
||||
<p class="text-zinc-400 mt-1 text-sm">{detail.description}</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<h1 class="text-2xl font-bold text-white">{displayTitle}</h1>
|
||||
{#if editUrl}
|
||||
<button
|
||||
class="text-xs px-2 py-0.5 rounded border border-zinc-700 text-zinc-400 hover:border-zinc-500 hover:text-white transition-colors shrink-0"
|
||||
on:click={() => editOpen = true}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if descriptionHtml}
|
||||
<div class="text-zinc-400 mt-2 text-sm leading-relaxed [&_img]:rounded-lg [&_img]:my-2 [&_p]:my-1 [&_a]:text-blue-400">
|
||||
{@html descriptionHtml}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,291 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Sport } from '../lib/types';
|
||||
|
||||
export let activityId: string;
|
||||
export let editUrl: string;
|
||||
|
||||
const dispatch = createEventDispatcher<{ saved: { title: string; description: string } }>();
|
||||
|
||||
const SPORTS: Sport[] = ['cycling', 'running', 'hiking', 'walking', 'swimming', 'skiing', 'other'];
|
||||
const STAT_PANELS = [
|
||||
{ key: 'elevation', label: 'Elevation' },
|
||||
{ key: 'speed', label: 'Speed' },
|
||||
{ key: 'heart_rate', label: 'Heart rate' },
|
||||
{ key: 'cadence', label: 'Cadence' },
|
||||
{ key: 'power', label: 'Power' },
|
||||
];
|
||||
|
||||
let loading = true;
|
||||
let loadError = '';
|
||||
let saving = false;
|
||||
let saveStatus = '';
|
||||
let saveOk = false;
|
||||
|
||||
// Form state
|
||||
let title = '';
|
||||
let sport: Sport = 'cycling';
|
||||
let gear = '';
|
||||
let description = '';
|
||||
let highlight = false;
|
||||
let isPrivate = false;
|
||||
let hideStats: string[] = [];
|
||||
let images: string[] = [];
|
||||
|
||||
// Image upload
|
||||
let uploading = false;
|
||||
let fileInput: HTMLInputElement;
|
||||
|
||||
const api = `${editUrl}/api/activity/${activityId}`;
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
loadError = '';
|
||||
try {
|
||||
const res = await fetch(api);
|
||||
if (!res.ok) throw new Error(`Edit server returned ${res.status} — is bincio edit running?`);
|
||||
const d = await res.json();
|
||||
title = d.title ?? '';
|
||||
sport = d.sport ?? 'cycling';
|
||||
gear = d.gear ?? '';
|
||||
description = d.description ?? '';
|
||||
highlight = d.highlight ?? false;
|
||||
isPrivate = d.private ?? false;
|
||||
hideStats = d.hide_stats ?? [];
|
||||
images = d.images ?? [];
|
||||
} catch (e: any) {
|
||||
loadError = e.message;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
saving = true;
|
||||
saveStatus = '';
|
||||
saveOk = false;
|
||||
try {
|
||||
const res = await fetch(api, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title, sport, gear, description, highlight, private: isPrivate, hide_stats: hideStats }),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
saveStatus = 'Saved';
|
||||
saveOk = true;
|
||||
dispatch('saved', { title, description });
|
||||
} catch (e: any) {
|
||||
saveStatus = e.message;
|
||||
saveOk = false;
|
||||
} finally {
|
||||
saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadImages(files: FileList) {
|
||||
uploading = true;
|
||||
for (const file of Array.from(files)) {
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
const res = await fetch(`${api}/images`, { method: 'POST', body: fd });
|
||||
if (res.ok) {
|
||||
const d = await res.json();
|
||||
if (!images.includes(d.filename)) images = [...images, d.filename];
|
||||
// Insert markdown reference at cursor or end
|
||||
const ref = `\n![${d.filename.replace(/\.[^.]+$/, '')}](${d.filename})`;
|
||||
description = description.trimEnd() + ref;
|
||||
}
|
||||
}
|
||||
uploading = false;
|
||||
}
|
||||
|
||||
async function deleteImage(filename: string) {
|
||||
await fetch(`${api}/images/${encodeURIComponent(filename)}`, { method: 'DELETE' });
|
||||
images = images.filter(f => f !== filename);
|
||||
// Remove the markdown reference too
|
||||
description = description.replace(new RegExp(`!\\[[^\\]]*\\]\\(${filename}\\)`, 'g'), '').trim();
|
||||
}
|
||||
|
||||
function toggleStat(key: string) {
|
||||
hideStats = hideStats.includes(key)
|
||||
? hideStats.filter(s => s !== key)
|
||||
: [...hideStats, key];
|
||||
}
|
||||
|
||||
load();
|
||||
</script>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
class="fixed inset-0 bg-black/60 z-40 backdrop-blur-sm"
|
||||
on:click={() => dispatch('saved', { title, description })}
|
||||
role="presentation"
|
||||
/>
|
||||
|
||||
<!-- Drawer -->
|
||||
<aside class="fixed top-0 right-0 h-full w-full max-w-md bg-zinc-950 border-l border-zinc-800 z-50 flex flex-col shadow-2xl">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-5 py-4 border-b border-zinc-800 shrink-0">
|
||||
<h2 class="font-semibold text-white text-sm">Edit activity</h2>
|
||||
<button
|
||||
class="text-zinc-500 hover:text-white transition-colors text-xl leading-none"
|
||||
on:click={() => dispatch('saved', { title, description })}
|
||||
aria-label="Close"
|
||||
>×</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="flex-1 overflow-y-auto px-5 py-4">
|
||||
{#if loading}
|
||||
<div class="space-y-3 animate-pulse">
|
||||
{#each Array(4) as _}
|
||||
<div class="h-9 rounded bg-zinc-800" />
|
||||
{/each}
|
||||
</div>
|
||||
{:else if loadError}
|
||||
<p class="text-red-400 text-sm">{loadError}</p>
|
||||
{:else}
|
||||
<!-- Title -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-xs text-zinc-500 mb-1" for="ed-title">Title</label>
|
||||
<input
|
||||
id="ed-title"
|
||||
type="text"
|
||||
bind:value={title}
|
||||
class="w-full px-3 py-2 bg-zinc-900 border border-zinc-700 rounded-lg text-sm text-white outline-none focus:border-blue-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Sport + Gear -->
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<div>
|
||||
<label class="block text-xs text-zinc-500 mb-1" for="ed-sport">Sport</label>
|
||||
<select
|
||||
id="ed-sport"
|
||||
bind:value={sport}
|
||||
class="w-full px-3 py-2 bg-zinc-900 border border-zinc-700 rounded-lg text-sm text-white outline-none focus:border-blue-500 transition-colors"
|
||||
>
|
||||
{#each SPORTS as s}
|
||||
<option value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-zinc-500 mb-1" for="ed-gear">Gear</label>
|
||||
<input
|
||||
id="ed-gear"
|
||||
type="text"
|
||||
bind:value={gear}
|
||||
placeholder="e.g. Trek Domane"
|
||||
class="w-full px-3 py-2 bg-zinc-900 border border-zinc-700 rounded-lg text-sm text-white placeholder-zinc-600 outline-none focus:border-blue-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-xs text-zinc-500 mb-1" for="ed-desc">Description <span class="text-zinc-600">(markdown)</span></label>
|
||||
<textarea
|
||||
id="ed-desc"
|
||||
bind:value={description}
|
||||
rows={6}
|
||||
placeholder="Write about this activity…"
|
||||
class="w-full px-3 py-2 bg-zinc-900 border border-zinc-700 rounded-lg text-sm text-white placeholder-zinc-600 outline-none focus:border-blue-500 transition-colors resize-y"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Images -->
|
||||
<div class="mb-4">
|
||||
<p class="text-xs text-zinc-500 mb-2">Images</p>
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="border border-dashed border-zinc-700 rounded-lg px-4 py-3 text-center text-xs text-zinc-500 cursor-pointer hover:border-zinc-500 hover:text-zinc-300 transition-colors"
|
||||
on:click={() => fileInput.click()}
|
||||
on:dragover|preventDefault
|
||||
on:drop|preventDefault={e => e.dataTransfer?.files && uploadImages(e.dataTransfer.files)}
|
||||
>
|
||||
{uploading ? 'Uploading…' : 'Drop images or click to upload'}
|
||||
</div>
|
||||
<input bind:this={fileInput} type="file" accept="image/*" multiple class="hidden"
|
||||
on:change={e => e.currentTarget.files && uploadImages(e.currentTarget.files)} />
|
||||
{#if images.length}
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
{#each images as img}
|
||||
<span class="flex items-center gap-1 text-xs bg-zinc-800 border border-zinc-700 rounded-full px-2 py-0.5">
|
||||
{img}
|
||||
<button class="text-zinc-500 hover:text-red-400 transition-colors" on:click={() => deleteImage(img)}>×</button>
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Hide stats -->
|
||||
<div class="mb-4">
|
||||
<p class="text-xs text-zinc-500 mb-2">Hide stat panels</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each STAT_PANELS as panel}
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs px-3 py-1 rounded-full border transition-colors"
|
||||
class:border-zinc-700={!hideStats.includes(panel.key)}
|
||||
class:text-zinc-400={!hideStats.includes(panel.key)}
|
||||
class:border-blue-500={hideStats.includes(panel.key)}
|
||||
class:text-white={hideStats.includes(panel.key)}
|
||||
style={hideStats.includes(panel.key) ? 'background:rgba(59,130,246,.15)' : ''}
|
||||
on:click={() => toggleStat(panel.key)}
|
||||
>
|
||||
{panel.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flags -->
|
||||
<div class="flex gap-3 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-2 text-xs px-3 py-1.5 rounded-lg border transition-colors"
|
||||
class:border-zinc-700={!highlight}
|
||||
class:text-zinc-400={!highlight}
|
||||
class:border-yellow-500={highlight}
|
||||
class:text-yellow-300={highlight}
|
||||
style={highlight ? 'background:rgba(234,179,8,.1)' : ''}
|
||||
on:click={() => highlight = !highlight}
|
||||
>
|
||||
★ Highlight
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center gap-2 text-xs px-3 py-1.5 rounded-lg border transition-colors"
|
||||
class:border-zinc-700={!isPrivate}
|
||||
class:text-zinc-400={!isPrivate}
|
||||
class:border-red-500={isPrivate}
|
||||
class:text-red-300={isPrivate}
|
||||
style={isPrivate ? 'background:rgba(239,68,68,.1)' : ''}
|
||||
on:click={() => isPrivate = !isPrivate}
|
||||
>
|
||||
⊘ Private
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
{#if !loading && !loadError}
|
||||
<div class="px-5 py-4 border-t border-zinc-800 flex items-center gap-3 shrink-0">
|
||||
<button
|
||||
class="px-4 py-2 bg-blue-600 hover:bg-blue-500 disabled:opacity-40 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
disabled={saving}
|
||||
on:click={save}
|
||||
>
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
{#if saveStatus}
|
||||
<span class="text-xs" class:text-green-400={saveOk} class:text-red-400={!saveOk}>
|
||||
{saveStatus}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
Reference in New Issue
Block a user