From 5be52bcfeb966e6f6dac4e1331698f9e290c5b88 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Thu, 26 Mar 2026 16:50:22 +0100
Subject: [PATCH] feat: goals navigation + UX improvements

Analysis Page:
- Add 'Ziele' button next to page title
- Direct navigation to /goals from analysis page
- Thematic link: goals influence AI analysis weighting

Goals Page:
- Fix text-align for text inputs (name, date, description)
- Text fields now left-aligned (numbers remain right-aligned)
- Better UX for non-numeric inputs

Navigation strategy: Goals accessible from Analysis page where
goal_mode directly impacts score calculation and interpretation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/Analysis.jsx  | 15 +++++++++++++--
 frontend/src/pages/GoalsPage.jsx |  6 +++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/Analysis.jsx b/frontend/src/pages/Analysis.jsx
index 4cba2e8..8c3b2aa 100644
--- a/frontend/src/pages/Analysis.jsx
+++ b/frontend/src/pages/Analysis.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { Brain, Trash2, ChevronDown, ChevronUp } from 'lucide-react'
+import { Brain, Trash2, ChevronDown, ChevronUp, Target } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
 import { api } from '../utils/api'
 import { useAuth } from '../context/AuthContext'
 import Markdown from '../utils/Markdown'
@@ -277,6 +278,7 @@ function InsightCard({ ins, onDelete, defaultOpen=false, prompts=[] }) {
 
 export default function Analysis() {
   const { canUseAI } = useAuth()
+  const navigate = useNavigate()
   const [prompts,     setPrompts]     = useState([])
   const [allInsights, setAllInsights] = useState([])
   const [loading,     setLoading]     = useState(null)
@@ -386,7 +388,16 @@ export default function Analysis() {
 
   return (
     <div>
-      <h1 className="page-title">KI-Analyse</h1>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <h1 className="page-title" style={{ margin: 0 }}>KI-Analyse</h1>
+        <button
+          className="btn btn-secondary"
+          onClick={() => navigate('/goals')}
+          style={{ fontSize: 13, padding: '6px 12px' }}
+        >
+          <Target size={14} /> Ziele
+        </button>
+      </div>
 
       <div className="tabs">
         <button className={'tab'+(tab==='run'?' active':'')} onClick={()=>setTab('run')}>Analysen starten</button>
diff --git a/frontend/src/pages/GoalsPage.jsx b/frontend/src/pages/GoalsPage.jsx
index bded3b3..84f091f 100644
--- a/frontend/src/pages/GoalsPage.jsx
+++ b/frontend/src/pages/GoalsPage.jsx
@@ -509,7 +509,7 @@ export default function GoalsPage() {
               <input
                 type="text"
                 className="form-input"
-                style={{ width: '100%' }}
+                style={{ width: '100%', textAlign: 'left' }}
                 value={formData.name}
                 onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
                 placeholder="z.B. Sommerfigur 2026"
@@ -572,7 +572,7 @@ export default function GoalsPage() {
               <input
                 type="date"
                 className="form-input"
-                style={{ width: '100%' }}
+                style={{ width: '100%', textAlign: 'left' }}
                 value={formData.target_date}
                 onChange={e => setFormData(f => ({ ...f, target_date: e.target.value }))}
               />
@@ -591,7 +591,7 @@ export default function GoalsPage() {
               </label>
               <textarea
                 className="form-input"
-                style={{ width: '100%', minHeight: 80 }}
+                style={{ width: '100%', minHeight: 80, textAlign: 'left' }}
                 value={formData.description}
                 onChange={e => setFormData(f => ({ ...f, description: e.target.value }))}
                 rows={3}