integrate edit button into astro site

CLAUDE.md

@@ -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 edit UI is a **slide-in drawer** (`EditDrawer.svelte`) in the Astro site.
-The static site and Astro are untouched — no hybrid mode, no dead-code API routes in prod.
+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)
+- Edit button appears on the activity detail page **only when `PUBLIC_EDIT_URL` is set** in `site/.env`
-- `GET /api/activity/{id}` — returns merged BAS JSON + existing sidecar fields
+- Clicking Edit opens the drawer in the same page — no navigation, no copy-pasting IDs
-- `POST /api/activity/{id}` — writes `edits/{id}.md` to the data dir
+- 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:**
+**Edit drawer features:**
-- Title text input (pre-filled from BAS JSON)
+- Title, sport dropdown, gear
-- Sport dropdown (pre-filled, shows all known sport types)
+- Markdown textarea for description (images inserted as `![name](filename)` references)
-- Markdown textarea for description, with minimal toolbar (bold, italic, link, image insert)
+- Image drag-and-drop zone with chip list + delete
-- Live markdown preview panel
+- Hide stat panels (elevation, speed, heart_rate, cadence, power) — toggle buttons
-- `hide_stats` checkbox group: elevation, speed, heart_rate, cadence, power
+- Highlight flag (★ — sorts to top of feed, visual badge)
-- `highlight` toggle (feature in feed)
+- Private flag (⊘ — suppressed from index at render time)
-- `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
 
-**Workflow (typical):**
+### Image storage and serving
-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
 
 ```
 ~/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: `![Summit](col-summit.jpg)`.
-The render stage resolves relative image paths against `edits/images/{id}/` and copies them
+`merge_all()` symlinks `edits/images/{id}/` → `_merged/activities/images/{id}/` so images
-to `site/public/images/activities/{id}/` so they're served from the static site.
+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
+- **Sidecar location**: `edits/` subdirectory — cleaner, easier to backup/sync independently
-  backup/sync just your customisations independently of the extracted data
+- **Merge output**: `data/_merged/` — extracted data stays pristine; `public/data` → `_merged/`
-- **`private: true`**: suppresses from `index.json` at render time (not client-side hide) —
+- **`private: true`**: suppressed from `index.json` at render time (not client-side hide)
-  safer for public hosting
+- **`highlight`**: sorts to top of feed; visual badge TBD
-- **`highlight`**: visual badge in feed + sorted before non-highlighted activities
+- **Edit UI**: drawer in Astro site, `bincio edit` is a pure write API (no HTML serving)
-- **Edit UI**: `bincio edit --serve` FastAPI server (Option B) — not integrated into Astro
 
 ## 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
+- [x] `bincio.render.merge` — sidecar parser, `_merged/` output, private filter, highlight sort
-- [ ] `bincio render --watch` incremental rebuild on sidecar changes
+- [x] `bincio edit` FastAPI write API (GET/POST activity, image upload/delete, triggers merge)
-- [ ] Sidecar `.md` format: title, sport, description, hide_stats, highlight, private, images
+- [x] `EditDrawer.svelte` — slide-in edit UI in the Astro site (no separate HTML from server)
-- [ ] `bincio edit --serve` FastAPI server with Svelte edit UI (port 4041)
+- [x] `PUBLIC_EDIT_URL` feature flag — unset = no edit UI, set = drawer enabled
-- [ ] Edit button on activity detail pages (visible when `PUBLIC_EDIT_URL` env var set)
+- [x] Markdown rendering in activity description with image path rewriting
-- [ ] Image upload → `edits/images/{id}/`, render stage copies to `public/images/activities/{id}/`
+- [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)

bincio/edit/server.py

@@ -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)})
 
 

site/.env

@@ -0,0 +1,2 @@
+BINCIO_DATA_DIR=/tmp/bincio_test
+PUBLIC_EDIT_URL=http://localhost:4041

site/package.json

@@ -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"
   },

site/src/components/ActivityDetail.svelte

@@ -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('Elevation ↑', formatElevation(activity.elevation_gain_m),                    'elevation'),
-    stat('Avg speed',   formatSpeed(activity.avg_speed_kmh)),
+    stat('Avg speed',   formatSpeed(activity.avg_speed_kmh),                           'speed'),
-    stat('Max speed',   formatSpeed(activity.max_speed_kmh)),
+    stat('Max speed',   formatSpeed(activity.max_speed_kmh),                           'speed'),
-    stat('Avg HR',      activity.avg_hr_bpm ? `${activity.avg_hr_bpm} bpm` : '—'),
+    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` : '—'),
+    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` : '—'),
+    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>
+    <div class="flex items-center gap-3">
-    {#if detail?.description}
+      <h1 class="text-2xl font-bold text-white">{displayTitle}</h1>
-      <p class="text-zinc-400 mt-1 text-sm">{detail.description}</p>
+      {#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>

site/src/components/EditDrawer.svelte

@@ -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>