Add sub_sport editing to activity edit drawer

site/src/components/EditDrawer.svelte

@@ -8,6 +8,13 @@
   const dispatch = createEventDispatcher<{ saved: { title: string; description: string }; close: void; deleted: void }>();
 
   const SPORTS: Sport[] = ['cycling', 'running', 'hiking', 'walking', 'swimming', 'skiing', 'other'];
+
+  const SUB_SPORTS: Partial<Record<Sport, { key: string; label: string }[]>> = {
+    cycling:  [{ key: 'road', label: 'Road' }, { key: 'mountain', label: 'Mountain' }, { key: 'gravel', label: 'Gravel' }, { key: 'indoor', label: 'Indoor' }],
+    running:  [{ key: 'trail', label: 'Trail' }, { key: 'track', label: 'Track' }, { key: 'indoor', label: 'Indoor' }],
+    swimming: [{ key: 'open_water', label: 'Open water' }, { key: 'pool', label: 'Pool' }],
+    skiing:   [{ key: 'nordic', label: 'Nordic' }, { key: 'alpine', label: 'Alpine' }],
+  };
   const STAT_PANELS = [
     { key: 'elevation',   label: 'Elevation' },
     { key: 'speed',       label: 'Speed' },
@@ -32,6 +39,7 @@
   // Form state
   let title = '';
   let sport: Sport = 'cycling';
+  let subSport = '';
   let gear = '';
   let description = '';
   let highlight = false;
@@ -55,6 +63,7 @@
       const d = await res.json();
       title       = d.title       ?? '';
       sport       = d.sport       ?? 'cycling';
+      subSport    = d.sub_sport   ?? '';
       gear        = d.gear        ?? '';
       // Strip any auto-inserted image markdown refs — images are tracked via custom.images
       description = (d.description ?? '').replace(/!\[[^\]]*\]\([^)]+\)\n?/g, '').trim();
@@ -79,7 +88,7 @@
       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 }),
+        body: JSON.stringify({ title, sport, sub_sport: subSport || null, gear, description, highlight, private: isPrivate, hide_stats: hideStats }),
       });
       if (!res.ok) throw new Error(await res.text());
       saveStatus = 'Saved';
@@ -204,13 +213,14 @@
         />
       </div>
 
-      <!-- Sport + Gear -->
-      <div class="grid grid-cols-2 gap-3 mb-4">
+      <!-- Sport + Sub-sport + Gear -->
+      <div class="grid grid-cols-2 gap-3 mb-3">
         <div>
           <label class="block text-xs text-zinc-500 mb-1" for="ed-sport">Sport</label>
           <select
             id="ed-sport"
             bind:value={sport}
+            on:change={() => { if (!SUB_SPORTS[sport]?.some(o => o.key === subSport)) subSport = ''; }}
             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}
@@ -229,6 +239,23 @@
           />
         </div>
       </div>
+      {#if SUB_SPORTS[sport]}
+      <div class="mb-4">
+        <label class="block text-xs text-zinc-500 mb-1" for="ed-subsport">Sub-sport</label>
+        <select
+          id="ed-subsport"
+          bind:value={subSport}
+          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"
+        >
+          <option value="">— Auto (from file) —</option>
+          {#each SUB_SPORTS[sport] as o}
+            <option value={o.key}>{o.label}</option>
+          {/each}
+        </select>
+      </div>
+      {:else}
+      <div class="mb-4"></div>
+      {/if}
 
       <!-- Description -->
       <div class="mb-4">