From 5796c6a21aa17b90406c9a01e4586f19c8f6d291 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Tue, 24 Mar 2026 08:06:20 +0100
Subject: [PATCH] refactor: replace local quality filter with info banner
 (Issue #31)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed local quality filter UI from History page since backend now
handles filtering globally. Activities are already filtered when loaded.

Changes:
- Removed qualityLevel local state
- Simplified filtA to only filter by period
- Replaced filter buttons with info banner showing active global filter
- Added 'Hier ändern →' link to Settings

User can now only change quality filter in Settings (global), not per
page. History shows which filter is active with link to change it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/History.jsx | 62 ++++++++++++----------------------
 1 file changed, 21 insertions(+), 41 deletions(-)

diff --git a/frontend/src/pages/History.jsx b/frontend/src/pages/History.jsx
index cd6f36a..9e96686 100644
--- a/frontend/src/pages/History.jsx
+++ b/frontend/src/pages/History.jsx
@@ -589,23 +589,13 @@ function NutritionSection({ nutrition, weights, profile, insights, onRequest, lo
 // ── Activity Section ──────────────────────────────────────────────────────────
 function ActivitySection({ activities, insights, onRequest, loadingSlug, filterActiveSlugs, globalQualityLevel }) {
   const [period, setPeriod] = useState(30)
-  // Issue #31: Use global quality filter from profile as default
-  const [qualityLevel, setQualityLevel] = useState(globalQualityLevel || 'all')
   if (!activities?.length) return (
     <EmptySection text="Noch keine Aktivitätsdaten." to="/activity" toLabel="Aktivität erfassen"/>
   )
   const cutoff = dayjs().subtract(period,'day').format('YYYY-MM-DD')
 
-  // Issue #24: Mehrstufiger Quality-Filter
-  const filtA = activities.filter(d => {
-    if (period !== 9999 && d.date < cutoff) return false
-
-    if (qualityLevel === 'all') return true
-    if (qualityLevel === 'quality') return ['excellent', 'good', 'acceptable'].includes(d.quality_label)
-    if (qualityLevel === 'very_good') return ['excellent', 'good'].includes(d.quality_label)
-    if (qualityLevel === 'excellent') return d.quality_label === 'excellent'
-    return true
-  })
+  // Issue #31: Backend already filters by global quality level - only filter by period here
+  const filtA = activities.filter(d => period === 9999 || d.date >= cutoff)
 
   const byDate={}
   filtA.forEach(a=>{ byDate[a.date]=(byDate[a.date]||0)+(a.kcal_active||0) })
@@ -634,36 +624,26 @@ function ActivitySection({ activities, insights, onRequest, loadingSlug, filterA
       <SectionHeader title="🏋️ Aktivität" to="/activity" toLabel="Alle Einträge" lastUpdated={activities[0]?.date}/>
       <PeriodSelector value={period} onChange={setPeriod}/>
 
-      {/* Issue #24: Mehrstufiger Quality-Filter */}
-      <div style={{marginBottom:12}}>
-        <div style={{fontSize:11,fontWeight:600,color:'var(--text3)',marginBottom:6}}>QUALITÄTSFILTER</div>
-        <div style={{display:'flex',gap:4}}>
-          {[
-            {v:'all', l:'Alle', icon:'📊'},
-            {v:'quality', l:'Hochwertig', icon:'✓'},
-            {v:'very_good', l:'Sehr gut', icon:'✓✓'},
-            {v:'excellent', l:'Exzellent', icon:'⭐'}
-          ].map(o => (
-            <button key={o.v} onClick={() => setQualityLevel(o.v)}
-              style={{flex:1,padding:'6px 8px',borderRadius:8,fontSize:11,fontWeight:500,
-                border:'1.5px solid',cursor:'pointer',fontFamily:'var(--font)',transition:'all 0.2s',
-                background:qualityLevel===o.v?'var(--accent)':'transparent',
-                borderColor:qualityLevel===o.v?'var(--accent)':'var(--border2)',
-                color:qualityLevel===o.v?'white':'var(--text2)'}}>
-              <span style={{marginRight:4}}>{o.icon}</span>
-              {o.l}
-            </button>
-          ))}
+      {/* Issue #31: Show active global quality filter */}
+      {globalQualityLevel && globalQualityLevel !== 'all' && (
+        <div style={{
+          marginBottom:12, padding:'8px 12px', borderRadius:8,
+          background:'var(--surface2)', border:'1px solid var(--border)',
+          fontSize:12, color:'var(--text2)', display:'flex', alignItems:'center', gap:8
+        }}>
+          <span>
+            {globalQualityLevel === 'quality' && '✓ Filter: Hochwertig (excellent, good, acceptable)'}
+            {globalQualityLevel === 'very_good' && '✓✓ Filter: Sehr gut (excellent, good)'}
+            {globalQualityLevel === 'excellent' && '⭐ Filter: Exzellent (nur excellent)'}
+          </span>
+          <a href="/settings" style={{
+            marginLeft:'auto', color:'var(--accent)', textDecoration:'none',
+            fontSize:11, fontWeight:500, whiteSpace:'nowrap'
+          }}>
+            Hier ändern →
+          </a>
         </div>
-        {qualityLevel !== 'all' && (
-          <div style={{fontSize:10,color:'var(--text3)',marginTop:6}}>
-            {filtA.length} von {activities.filter(d=>period===9999||d.date>=cutoff).length} Aktivitäten
-            {qualityLevel === 'quality' && ' (excellent, good, acceptable)'}
-            {qualityLevel === 'very_good' && ' (excellent, good)'}
-            {qualityLevel === 'excellent' && ' (nur excellent)'}
-          </div>
-        )}
-      </div>
+      )}
 
       <div style={{display:'flex',gap:6,marginBottom:12}}>
         {[['Trainings',filtA.length,'var(--text1)'],['Kcal',totalKcal,'#EF9F27'],