From 0fbb7822df1286c4963f76dd47e6eb2d05ffb41d Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Fri, 15 May 2026 00:52:34 +0200
Subject: [PATCH] EditDrawer: show sub_sport badge immediately after save
 without page reload

---
 site/src/components/ActivityDetail.svelte | 9 ++++++---
 site/src/components/EditDrawer.svelte     | 4 ++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/site/src/components/ActivityDetail.svelte b/site/src/components/ActivityDetail.svelte
index 36bedcb..9cf8ff1 100644
--- a/site/src/components/ActivityDetail.svelte
+++ b/site/src/components/ActivityDetail.svelte
@@ -39,7 +39,9 @@
   // Local overrides applied immediately after a save (no re-fetch needed)
   let localTitle = '';
   let localDescription = '';
+  let localSubSport: string | null | undefined = undefined;
   $: displayTitle = localTitle || activity.title;
+  $: displaySubSport = localSubSport !== undefined ? localSubSport : activity.sub_sport;
 
   onMount(async () => {
     fetch('/api/me', { credentials: 'include' })
@@ -81,10 +83,11 @@
     }
   });
 
-  function onSaved(e: CustomEvent<{ title: string; description: string }>) {
+  function onSaved(e: CustomEvent<{ title: string; description: string; sub_sport: string | null }>) {
     editOpen = false;
     localTitle = e.detail.title;
     localDescription = e.detail.description;
+    localSubSport = e.detail.sub_sport;
   }
 
   $: trackUrl = activity.track_url
@@ -267,12 +270,12 @@
       >
         {sportIcon(activity.sport)} {sportLabel(activity.sport)}
       </span>
-      {#if activity.sub_sport && activity.sub_sport !== 'generic'}
+      {#if displaySubSport && displaySubSport !== 'generic'}
         <span
           class="text-xs font-medium px-2 py-0.5 rounded-full"
           style="background:{color}11;color:{color}cc"
         >
-          {sportLabel(activity.sport, activity.sub_sport).split(' ')[0]}
+          {sportLabel(activity.sport, displaySubSport).split(' ')[0]}
         </span>
       {/if}
       <span class="text-xs text-zinc-500">
diff --git a/site/src/components/EditDrawer.svelte b/site/src/components/EditDrawer.svelte
index 06b0161..38f5363 100644
--- a/site/src/components/EditDrawer.svelte
+++ b/site/src/components/EditDrawer.svelte
@@ -5,7 +5,7 @@
   export let activityId: string;
   export let editUrl: string;
 
-  const dispatch = createEventDispatcher<{ saved: { title: string; description: string }; close: void; deleted: void }>();
+  const dispatch = createEventDispatcher<{ saved: { title: string; description: string; sub_sport: string | null }; close: void; deleted: void }>();
 
   const SPORTS: Sport[] = ['cycling', 'running', 'hiking', 'walking', 'swimming', 'skiing', 'other'];
 
@@ -94,7 +94,7 @@
       saveStatus = 'Saved';
       saveOk = true;
       await new Promise(r => setTimeout(r, 900));
-      dispatch('saved', { title, description });
+      dispatch('saved', { title, description, sub_sport: subSport || null });
     } catch (e: any) {
       saveStatus = e.message;
       saveOk = false;