feat: Implement responsive analysis page layout with horizontal navigation for mobile and vertical navigation for desktop

docs/issues/PHASE_PLAN_RESPONSIVE_UI.md

@@ -3,7 +3,7 @@
 > **Gitea:** [#30 – Responsive UI](http://192.168.2.144:3000/Lars/mitai-jinkendo/issues/30)  
 > **Spec:** `.claude/docs/functional/RESPONSIVE_UI.md`  
 > **Breakpoint:** `<1024px` = Mobile (Bottom-Nav, bestehendes Verhalten), `≥1024px` = Desktop (Sidebar 220px)  
-> **Letzte Plan-Aktualisierung:** 2026-04-04
+> **Letzte Plan-Aktualisierung:** 2026-04-04 (P5)
 
 ---
 
@@ -16,7 +16,7 @@
 | P2 | Globales Layout & Content-Bereich (CSS) | ☑ erledigt | Desktop: Header aus, Content max 1200px; Mobile unverändert Bottom-Nav |
 | P3 | Dashboard (Desktop-Grid) | ☑ erledigt | 4-spaltige Kennzahlen; Begrüßung; Ernährung/Aktivität 2-spaltig |
 | P4 | Verlauf (Tabs links / Content rechts) | ☑ erledigt | `History.jsx` + `.history-*` in `app.css`; Tab-State bei `location.state.tab` |
-| P5 | Analyse (Prompts links / Ergebnis rechts) | ☐ pending | |
+| P5 | Analyse (Prompts links / Ergebnis rechts) | ☑ erledigt | `Analysis.jsx` + `.analysis-split*` in `app.css` |
 | P6 | Erfassung / Capture & Formularseiten | ☐ pending | |
 | P7 | Admin & restliche Vollbreiten-Seiten | ☐ pending | |
 | P8 | Abschluss, Regression, Spec-Pflege | ☐ pending | |

frontend/src/app.css

@@ -225,6 +225,113 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
   }
 }
 
+/* KI-Analyse (P5): Mobile Prompt-Leiste oben / horizontal, Desktop links ~300px (RESPONSIVE_UI §5.3) */
+.analysis-page__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.analysis-split {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.analysis-split__nav {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  overflow-x: auto;
+  padding-bottom: 6px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.analysis-split__nav::-webkit-scrollbar {
+  display: none;
+}
+
+.analysis-split__nav-item {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 20px;
+  border: 1.5px solid var(--border2);
+  background: var(--surface);
+  color: var(--text2);
+  font-family: var(--font);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.analysis-split__nav-item:hover {
+  border-color: var(--accent);
+  color: var(--text1);
+}
+
+.analysis-split__nav-item--active {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: white;
+}
+
+.analysis-split__nav-item--active:hover {
+  color: white;
+}
+
+.analysis-split__nav-item--active .muted {
+  color: rgba(255, 255, 255, 0.88) !important;
+}
+
+.analysis-split__main {
+  min-width: 0;
+}
+
+@media (min-width: 1024px) {
+  .analysis-split {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 24px;
+  }
+
+  .analysis-split__nav-wrap {
+    flex: 0 0 300px;
+    max-width: 320px;
+    position: sticky;
+    top: 16px;
+    align-self: flex-start;
+  }
+
+  .analysis-split__nav {
+    flex-direction: column;
+    overflow-x: visible;
+    overflow-y: auto;
+    max-height: calc(100vh - 140px);
+    padding-bottom: 0;
+    gap: 8px;
+  }
+
+  .analysis-split__nav-item {
+    width: 100%;
+    justify-content: flex-start;
+    text-align: left;
+    border-radius: 10px;
+    white-space: normal;
+  }
+
+  .analysis-split__main {
+    flex: 1;
+  }
+}
+
 .muted { color: var(--text3); font-size: 13px; }
 .empty-state { text-align: center; padding: 48px 16px; color: var(--text3); }
 .empty-state h3 { font-size: 16px; color: var(--text2); margin-bottom: 6px; }

frontend/src/pages/Analysis.jsx

@@ -286,6 +286,8 @@ export default function Analysis() {
   const [tab,         setTab]         = useState('run')
   const [newResult,   setNewResult]   = useState(null)
   const [aiUsage, setAiUsage] = useState(null)
+  const [activePipelineSlug, setActivePipelineSlug] = useState(null)
+  const [historyScopePick, setHistoryScopePick]     = useState(null)
 
   const loadAll = async () => {
     const [p, i] = await Promise.all([
@@ -305,6 +307,19 @@ export default function Analysis() {
     }).catch(err => console.error('Failed to load usage:', err))
   },[])
 
+  useEffect(() => {
+    const list = prompts.filter(p => p.active && p.type === 'pipeline')
+    setActivePipelineSlug(prev => {
+      if (!list.length) return null
+      if (prev && list.some(p => p.slug === prev)) return prev
+      return list[0].slug
+    })
+  }, [prompts])
+
+  useEffect(() => {
+    if (newResult?.scope) setActivePipelineSlug(newResult.scope)
+  }, [newResult?.scope])
+
   const runPrompt = async (slug) => {
     setLoading(slug); setError(null); setNewResult(null)
     try {
@@ -386,11 +401,20 @@ export default function Analysis() {
   // Show only active pipeline-type prompts
   const pipelinePrompts = prompts.filter(p => p.active && p.type === 'pipeline')
 
+  const historyScopeKeys = Object.keys(grouped).sort((a, b) => a.localeCompare(b))
+  const activeHistoryScope =
+    historyScopeKeys.length === 0
+      ? null
+      : historyScopeKeys.includes(historyScopePick)
+        ? historyScopePick
+        : historyScopeKeys[0]
+
   return (
-    <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+    <div className="analysis-page">
+      <div className="analysis-page__header">
         <h1 className="page-title" style={{ margin: 0 }}>KI-Analyse</h1>
         <button
+          type="button"
           className="btn btn-secondary"
           onClick={() => navigate('/goals')}
           style={{ fontSize: 13, padding: '6px 12px' }}
@@ -400,8 +424,8 @@ export default function Analysis() {
       </div>
 
       <div className="tabs">
-        <button className={'tab'+(tab==='run'?' active':'')} onClick={()=>setTab('run')}>Analysen starten</button>
-        <button className={'tab'+(tab==='history'?' active':'')} onClick={()=>setTab('history')}>
+        <button type="button" className={'tab'+(tab==='run'?' active':'')} onClick={()=>setTab('run')}>Analysen starten</button>
+        <button type="button" className={'tab'+(tab==='history'?' active':'')} onClick={()=>setTab('history')}>
           Verlauf
           {allInsights.length>0 && <span style={{marginLeft:4,fontSize:10,background:'var(--accent)',
             color:'white',padding:'1px 5px',borderRadius:8}}>{allInsights.length}</span>}
@@ -452,58 +476,88 @@ export default function Analysis() {
           )}
 
           {canUseAI && pipelinePrompts.length > 0 && (
-            <p style={{fontSize:13,color:'var(--text2)',marginBottom:14,lineHeight:1.6}}>
-              Wähle eine mehrstufige KI-Analyse:
-            </p>
-          )}
-
-          {pipelinePrompts.map(p => {
-            const existing = allInsights.find(i=>i.scope===p.slug)
-            return (
-              <div key={p.id} className="card" style={{marginBottom:16,borderColor:'var(--accent)',borderWidth:2}}>
-                <div style={{display:'flex',alignItems:'flex-start',gap:12}}>
-                  <div style={{flex:1}}>
-                    <div className="badge-container-right" style={{fontWeight:700,fontSize:15,color:'var(--accent)'}}>
-                      <span>{p.display_name || SLUG_LABELS[p.slug] || p.name}</span>
-                      {aiUsage && <UsageBadge {...aiUsage} />}
-                    </div>
-                    {p.description && (
-                      <div style={{fontSize:12,color:'var(--text2)',marginTop:3,lineHeight:1.5}}>
-                        {p.description}
-                      </div>
-                    )}
-                    {existing && (
-                      <div style={{fontSize:11,color:'var(--text3)',marginTop:3}}>
-                        Letzte Analyse: {dayjs(existing.created).format('DD.MM.YYYY, HH:mm')}
-                      </div>
-                    )}
-                  </div>
-                  <div
-                    title={aiUsage && !aiUsage.allowed ? `Limit erreicht (${aiUsage.used}/${aiUsage.limit}). Kontaktiere den Admin oder warte bis zum nächsten Reset.` : ''}
-                    style={{display:'inline-block'}}
-                  >
-                    <button
-                      className="btn btn-primary"
-                      style={{flexShrink:0,minWidth:100, cursor: (aiUsage && !aiUsage.allowed) ? 'not-allowed' : 'pointer'}}
-                      onClick={()=>runPrompt(p.slug)}
-                      disabled={!!loading||!canUseAI||(aiUsage && !aiUsage.allowed)}
-                    >
-                      {loading===p.slug
-                        ? <><div className="spinner" style={{width:13,height:13}}/> Läuft…</>
-                        : (aiUsage && !aiUsage.allowed) ? '🔒 Limit'
-                        : <><Brain size={13}/> Starten</>}
-                    </button>
-                  </div>
+            <>
+              <p style={{fontSize:13,color:'var(--text2)',marginBottom:14,lineHeight:1.6}}>
+                Wähle in der Liste eine Analyse; auf dem Desktop erscheint der Detailbereich rechts, auf schmalen Screens darunter.
+              </p>
+              <div className="analysis-split">
+                <div className="analysis-split__nav-wrap">
+                  <nav className="analysis-split__nav" aria-label="Verfügbare KI-Analysen">
+                    {pipelinePrompts.map(p => {
+                      const existing = allInsights.find(i => i.scope === p.slug)
+                      return (
+                        <button
+                          key={p.id}
+                          type="button"
+                          className={'analysis-split__nav-item' + (activePipelineSlug === p.slug ? ' analysis-split__nav-item--active' : '')}
+                          onClick={() => setActivePipelineSlug(p.slug)}
+                          aria-current={activePipelineSlug === p.slug ? 'page' : undefined}
+                        >
+                          {p.display_name || SLUG_LABELS[p.slug] || p.name}
+                          {existing && (
+                            <span className="muted" style={{ fontSize: 11, fontWeight: 400 }}>
+                              {' '}· {dayjs(existing.created).format('DD.MM.')}
+                            </span>
+                          )}
+                        </button>
+                      )
+                    })}
+                  </nav>
+                </div>
+                <div className="analysis-split__main">
+                  {activePipelineSlug && (() => {
+                    const p = pipelinePrompts.find(x => x.slug === activePipelineSlug)
+                    if (!p) return null
+                    const existing = allInsights.find(i => i.scope === p.slug)
+                    return (
+                      <div key={p.id} className="card" style={{marginBottom:16,borderColor:'var(--accent)',borderWidth:2}}>
+                        <div style={{display:'flex',alignItems:'flex-start',gap:12,flexWrap:'wrap'}}>
+                          <div style={{flex:1,minWidth:0}}>
+                            <div className="badge-container-right" style={{fontWeight:700,fontSize:15,color:'var(--accent)'}}>
+                              <span>{p.display_name || SLUG_LABELS[p.slug] || p.name}</span>
+                              {aiUsage && <UsageBadge {...aiUsage} />}
+                            </div>
+                            {p.description && (
+                              <div style={{fontSize:12,color:'var(--text2)',marginTop:3,lineHeight:1.5}}>
+                                {p.description}
+                              </div>
+                            )}
+                            {existing && (
+                              <div style={{fontSize:11,color:'var(--text3)',marginTop:3}}>
+                                Letzte Analyse: {dayjs(existing.created).format('DD.MM.YYYY, HH:mm')}
+                              </div>
+                            )}
+                          </div>
+                          <div
+                            title={aiUsage && !aiUsage.allowed ? `Limit erreicht (${aiUsage.used}/${aiUsage.limit}). Kontaktiere den Admin oder warte bis zum nächsten Reset.` : ''}
+                            style={{display:'inline-block'}}
+                          >
+                            <button
+                              type="button"
+                              className="btn btn-primary"
+                              style={{flexShrink:0,minWidth:100, cursor: (aiUsage && !aiUsage.allowed) ? 'not-allowed' : 'pointer'}}
+                              onClick={() => runPrompt(p.slug)}
+                              disabled={!!loading||!canUseAI||(aiUsage && !aiUsage.allowed)}
+                            >
+                              {loading===p.slug
+                                ? <><div className="spinner" style={{width:13,height:13}}/> Läuft…</>
+                                : (aiUsage && !aiUsage.allowed) ? '🔒 Limit'
+                                : <><Brain size={13}/> Starten</>}
+                            </button>
+                          </div>
+                        </div>
+                        {existing && newResult?.id !== existing.id && (
+                          <div style={{marginTop:8,borderTop:'1px solid var(--border)',paddingTop:8}}>
+                            <InsightCard ins={existing} onDelete={deleteInsight} defaultOpen={false} prompts={prompts}/>
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })()}
                 </div>
-                {/* Show existing result collapsed */}
-                {existing && newResult?.id !== existing.id && (
-                  <div style={{marginTop:8,borderTop:'1px solid var(--border)',paddingTop:8}}>
-                    <InsightCard ins={existing} onDelete={deleteInsight} defaultOpen={false} prompts={prompts}/>
-                  </div>
-                )}
               </div>
-            )
-          })}
+            </>
+          )}
 
           {canUseAI && pipelinePrompts.length === 0 && (
             <div className="empty-state">
@@ -519,18 +573,33 @@ export default function Analysis() {
       {/* ── Verlauf gruppiert ── */}
       {tab==='history' && (
         <div>
-          {allInsights.length===0
-            ? <div className="empty-state"><h3>Noch keine Analysen</h3></div>
-            : Object.entries(grouped).map(([scope, ins]) => (
-              <div key={scope} style={{marginBottom:20}}>
-                <div style={{fontSize:13,fontWeight:700,color:'var(--text3)',
-                  textTransform:'uppercase',letterSpacing:'0.05em',marginBottom:8}}>
-                  {prompts.find(p => p.slug === scope)?.display_name || SLUG_LABELS[scope] || scope} ({ins.length})
-                </div>
-                {ins.map(i => <InsightCard key={i.id} ins={i} onDelete={deleteInsight} prompts={prompts}/>)}
+          {allInsights.length===0 ? (
+            <div className="empty-state"><h3>Noch keine Analysen</h3></div>
+          ) : (
+            <div className="analysis-split">
+              <div className="analysis-split__nav-wrap">
+                <nav className="analysis-split__nav" aria-label="Gespeicherte Analysen">
+                  {historyScopeKeys.map(scope => (
+                    <button
+                      key={scope}
+                      type="button"
+                      className={'analysis-split__nav-item' + (activeHistoryScope === scope ? ' analysis-split__nav-item--active' : '')}
+                      onClick={() => setHistoryScopePick(scope)}
+                      aria-current={activeHistoryScope === scope ? 'page' : undefined}
+                    >
+                      {prompts.find(pr => pr.slug === scope)?.display_name || SLUG_LABELS[scope] || scope}
+                      <span className="muted" style={{ fontSize: 12 }}> ({grouped[scope].length})</span>
+                    </button>
+                  ))}
+                </nav>
               </div>
-            ))
-          }
+              <div className="analysis-split__main">
+                {activeHistoryScope && grouped[activeHistoryScope]?.map(i => (
+                  <InsightCard key={i.id} ins={i} onDelete={deleteInsight} prompts={prompts}/>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>