From dfcdfbe335b739e90435060c6972ae19717a37d0 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Fri, 27 Mar 2026 20:40:33 +0100
Subject: [PATCH] fix: restore Goal Mode cards and fix focus areas display

- Restored GOAL_MODES constant and selection cards at top
- Fixed focusAreas/focusPreferences variable confusion
- Legacy 6 focus preferences show correctly in Fokus-Bereiche card
- Dynamic 26 focus areas should display in goal form
- Goal Mode cards now visible and functional again
---
 frontend/src/pages/GoalsPage.jsx | 105 +++++++++++++++++++++++++++++--
 1 file changed, 100 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/GoalsPage.jsx b/frontend/src/pages/GoalsPage.jsx
index 43d8b62..2afcb27 100644
--- a/frontend/src/pages/GoalsPage.jsx
+++ b/frontend/src/pages/GoalsPage.jsx
@@ -5,6 +5,45 @@ import dayjs from 'dayjs'
 import 'dayjs/locale/de'
 dayjs.locale('de')
 
+// Goal Mode Definitions
+const GOAL_MODES = [
+  {
+    id: 'weight_loss',
+    icon: '📉',
+    label: 'Gewichtsreduktion',
+    description: 'Kaloriendefizit, Fettabbau',
+    color: '#D85A30'
+  },
+  {
+    id: 'strength',
+    icon: '💪',
+    label: 'Kraftaufbau',
+    description: 'Muskelwachstum, progressive Belastung',
+    color: '#378ADD'
+  },
+  {
+    id: 'endurance',
+    icon: '🏃',
+    label: 'Ausdauer',
+    description: 'VO2Max, aerobe Kapazität',
+    color: '#1D9E75'
+  },
+  {
+    id: 'recomposition',
+    icon: '⚖️',
+    label: 'Körperkomposition',
+    description: 'Gleichzeitig Fett ab- & Muskeln aufbauen',
+    color: '#7B68EE'
+  },
+  {
+    id: 'health',
+    icon: '❤️',
+    label: 'Gesundheit',
+    description: 'Vitals, Regeneration, Wohlbefinden',
+    color: '#E67E22'
+  }
+]
+
 // Goal Categories
 const GOAL_CATEGORIES = {
   body: { label: 'Körper', icon: '📉', color: '#D85A30', description: 'Gewicht, Körperfett, Muskelmasse' },
@@ -403,15 +442,71 @@ export default function GoalsPage() {
         </div>
       )}
 
+      {/* Goal Mode Selection - Strategic Layer */}
+      <div className="card" style={{ marginBottom: 16 }}>
+        <h2 style={{ marginBottom: 8 }}>🎯 Trainingsmodus</h2>
+        <p style={{ color: 'var(--text2)', fontSize: 14, marginBottom: 16 }}>
+          Wähle deinen primären Trainingsmodus. Dies beeinflusst die Gewichtung der Fokus-Bereiche und KI-Analysen.
+        </p>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12 }}>
+          {GOAL_MODES.map(mode => (
+            <div
+              key={mode.id}
+              onClick={() => handleGoalModeChange(mode.id)}
+              style={{
+                padding: 16,
+                borderRadius: 8,
+                border: `2px solid ${goalMode === mode.id ? mode.color : 'var(--border)'}`,
+                background: goalMode === mode.id ? `${mode.color}15` : 'var(--surface)',
+                cursor: 'pointer',
+                transition: 'all 0.2s',
+                position: 'relative'
+              }}
+            >
+              <div style={{ fontSize: 32, marginBottom: 8 }}>{mode.icon}</div>
+              <div style={{
+                fontWeight: 600,
+                marginBottom: 4,
+                color: goalMode === mode.id ? mode.color : 'var(--text1)'
+              }}>
+                {mode.label}
+              </div>
+              <div style={{ fontSize: 13, color: 'var(--text2)', lineHeight: 1.4 }}>
+                {mode.description}
+              </div>
+              {goalMode === mode.id && (
+                <div style={{
+                  position: 'absolute',
+                  top: 8,
+                  right: 8,
+                  width: 20,
+                  height: 20,
+                  borderRadius: '50%',
+                  background: mode.color,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  color: 'white',
+                  fontSize: 12,
+                  fontWeight: 700
+                }}>
+                  ✓
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
       {/* Focus Areas (v2.0) */}
       <div className="card" style={{ marginBottom: 16 }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
           <h2 style={{ margin: 0 }}>🎯 Fokus-Bereiche</h2>
-          {!focusEditing && focusAreas && (
+          {!focusEditing && focusPreferences && (
             <button
               className="btn-secondary"
               onClick={() => {
-                setFocusTemp(focusAreas) // Sync temp state before editing
+                setFocusTemp(focusPreferences) // Sync temp state before editing
                 setFocusEditing(true)
               }}
               style={{ padding: '6px 12px' }}
@@ -545,7 +640,7 @@ export default function GoalsPage() {
               </button>
             </div>
           </>
-        ) : focusAreas && (
+        ) : focusPreferences && (
           /* Display Mode */
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12 }}>
             {[
@@ -555,7 +650,7 @@ export default function GoalsPage() {
               { key: 'endurance_pct', label: 'Ausdauer', icon: '🏃', color: '#1D9E75' },
               { key: 'flexibility_pct', label: 'Beweglichkeit', icon: '🤸', color: '#E67E22' },
               { key: 'health_pct', label: 'Gesundheit', icon: '❤️', color: '#F59E0B' }
-            ].filter(area => focusAreas[area.key] > 0).map(area => (
+            ].filter(area => focusPreferences[area.key] > 0).map(area => (
               <div
                 key={area.key}
                 style={{
@@ -568,7 +663,7 @@ export default function GoalsPage() {
               >
                 <div style={{ fontSize: 24, marginBottom: 4 }}>{area.icon}</div>
                 <div style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 4 }}>{area.label}</div>
-                <div style={{ fontSize: 20, fontWeight: 700, color: area.color }}>{focusAreas[area.key]}%</div>
+                <div style={{ fontSize: 20, fontWeight: 700, color: area.color }}>{focusPreferences[area.key]}%</div>
               </div>
             ))}
           </div>