From e69de820286161aef1bb7d0a49069b5d91d0fe65 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Tue, 5 May 2026 15:18:54 +0200
Subject: [PATCH] feat: enhance TrainingPlanningPage with improved view
 selection

- Added a new view selection component allowing users to toggle between list and calendar views for training planning.
- Updated styling and accessibility features for the view buttons, enhancing user experience.
- Removed the old view selection implementation to streamline the interface and improve maintainability.
---
 frontend/src/pages/TrainingPlanningPage.jsx | 118 ++++++++++++++------
 1 file changed, 82 insertions(+), 36 deletions(-)

diff --git a/frontend/src/pages/TrainingPlanningPage.jsx b/frontend/src/pages/TrainingPlanningPage.jsx
index b41099f..33b8b55 100644
--- a/frontend/src/pages/TrainingPlanningPage.jsx
+++ b/frontend/src/pages/TrainingPlanningPage.jsx
@@ -549,6 +549,88 @@ function TrainingPlanningPage() {
   return (
     <div className="app-page">
         <h1 style={{ marginBottom: '0.35rem' }}>Trainingsplanung</h1>
+
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: '12px',
+            marginBottom: '1rem',
+          }}
+        >
+          <span
+            className="form-label"
+            style={{
+              marginBottom: 0,
+              fontSize: '0.9rem',
+              color: 'var(--text2)',
+            }}
+          >
+            Ansicht
+          </span>
+          <div
+            role="group"
+            aria-label="Darstellung Liste oder Kalender"
+            style={{
+              display: 'inline-flex',
+              borderRadius: '10px',
+              border: '1.5px solid var(--border2)',
+              overflow: 'hidden',
+              background: 'var(--surface2)',
+              boxSizing: 'border-box',
+            }}
+          >
+            <button
+              type="button"
+              aria-pressed={planView === 'list'}
+              onClick={() => setPlanView('list')}
+              style={{
+                border: 'none',
+                padding: '10px 20px',
+                fontWeight: 600,
+                fontSize: '0.92rem',
+                cursor: 'pointer',
+                background: planView === 'list' ? 'var(--accent-dark)' : 'transparent',
+                color: planView === 'list' ? '#fff' : 'var(--text1)',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              Liste
+            </button>
+            <button
+              type="button"
+              aria-pressed={planView === 'calendar'}
+              onClick={() => {
+                setPlanView('calendar')
+                setCalendarMonthStr((prev) => {
+                  const fromList = (startDate || '').slice(0, 7)
+                  if (/^\d{4}-\d{2}$/.test(fromList)) return fromList
+                  return prev || new Date().toISOString().slice(0, 7)
+                })
+              }}
+              style={{
+                border: 'none',
+                borderLeft: '1.5px solid var(--border2)',
+                padding: '10px 20px',
+                fontWeight: 600,
+                fontSize: '0.92rem',
+                cursor: 'pointer',
+                background: planView === 'calendar' ? 'var(--accent-dark)' : 'transparent',
+                color: planView === 'calendar' ? '#fff' : 'var(--text1)',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              Kalender
+            </button>
+          </div>
+          <span style={{ fontSize: '0.8rem', color: 'var(--text3)', lineHeight: 1.35, maxWidth: '22rem' }}>
+            {planView === 'list'
+              ? 'Zeitraum unten mit Von/Bis filtern.'
+              : 'Monat unten wechseln; Termine erscheinen im Raster.'}
+          </span>
+        </div>
+
         <p style={{ color: 'var(--text2)', fontSize: '0.95rem', marginBottom: '1.25rem' }}>
           Wähle eine Trainingsgruppe, lege dann Termine mit Inhalt (Abschnitte und Übungen) an — ein Plan entsteht aus einer oder mehreren{' '}
           <strong>Trainingseinheiten</strong> im gewählten Zeitraum.
@@ -608,42 +690,6 @@ function TrainingPlanningPage() {
               </select>
             </div>
 
-            <div>
-              <span className="form-label" style={{ display: 'block' }}>
-                Ansicht
-              </span>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', marginTop: '4px' }}>
-                <button
-                  type="button"
-                  className={planView === 'list' ? 'btn btn-primary' : 'btn btn-secondary'}
-                  aria-pressed={planView === 'list'}
-                  onClick={() => setPlanView('list')}
-                  style={{ minWidth: '6.5rem' }}
-                >
-                  Liste
-                </button>
-                <button
-                  type="button"
-                  className={planView === 'calendar' ? 'btn btn-primary' : 'btn btn-secondary'}
-                  aria-pressed={planView === 'calendar'}
-                  onClick={() => {
-                    setPlanView('calendar')
-                    setCalendarMonthStr((prev) => {
-                      const fromList = (startDate || '').slice(0, 7)
-                      if (/^\d{4}-\d{2}$/.test(fromList)) return fromList
-                      return prev || new Date().toISOString().slice(0, 7)
-                    })
-                  }}
-                  style={{ minWidth: '6.5rem' }}
-                >
-                  Kalender
-                </button>
-              </div>
-              <p style={{ fontSize: '0.75rem', color: 'var(--text3)', marginTop: '0.35rem', marginBottom: 0 }}>
-                Liste: Zeitraum filtern · Kalender: Monatsraster aus Gruppenterminen (Mo–So)
-              </p>
-            </div>
-
             {planView === 'list' ? (
               <>
                 <div>