From d4826c8df49c3f97dc988721e8ec248fec0e6080 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sat, 21 Mar 2026 19:02:25 +0100
Subject: [PATCH] feat: add training type badges to activity list (v9d Phase 1b
 complete)

- Load training categories in ActivityPage
- Display colored badge next to activity name in list view
- Badge shows category icon + name with category color
- Only shown if training_category is set
- Completes v9d Phase 1b

Ready for testing and production deployment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/ActivityPage.jsx | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/ActivityPage.jsx b/frontend/src/pages/ActivityPage.jsx
index 05730cc..dad77b4 100644
--- a/frontend/src/pages/ActivityPage.jsx
+++ b/frontend/src/pages/ActivityPage.jsx
@@ -180,6 +180,7 @@ export default function ActivityPage() {
   const [saved,    setSaved]    = useState(false)
   const [error,    setError]    = useState(null)
   const [activityUsage, setActivityUsage] = useState(null)  // Phase 4: Usage badge
+  const [categories, setCategories] = useState({})  // v9d: Training categories
 
   const load = async () => {
     const [e, s] = await Promise.all([api.listActivity(), api.activityStats()])
@@ -196,6 +197,7 @@ export default function ActivityPage() {
   useEffect(()=>{
     load()
     loadUsage()
+    api.getTrainingCategories().then(setCategories).catch(err => console.error('Failed to load categories:', err))
   },[])
 
   const handleSave = async () => {
@@ -351,7 +353,26 @@ export default function ActivityPage() {
                   <div>
                     <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
                       <div style={{flex:1}}>
-                        <div style={{fontSize:14,fontWeight:600}}>{e.activity_type}</div>
+                        <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:2}}>
+                          <div style={{fontSize:14,fontWeight:600}}>{e.activity_type}</div>
+                          {e.training_category && categories[e.training_category] && (
+                            <div style={{
+                              display:'inline-flex',
+                              alignItems:'center',
+                              gap:3,
+                              padding:'2px 6px',
+                              background:categories[e.training_category].color + '22',
+                              border:`1px solid ${categories[e.training_category].color}`,
+                              borderRadius:4,
+                              fontSize:10,
+                              fontWeight:600,
+                              color:categories[e.training_category].color
+                            }}>
+                              <span>{categories[e.training_category].icon}</span>
+                              <span>{categories[e.training_category].name_de}</span>
+                            </div>
+                          )}
+                        </div>
                         <div style={{fontSize:11,color:'var(--text3)',marginBottom:4}}>
                           {dayjs(e.date).format('dd, DD. MMMM YYYY')}
                           {e.start_time && e.start_time.length>10 && ` · ${e.start_time.slice(11,16)}`}