refactor: replace local quality filter with info banner (Issue #31)
All checks were successful
Deploy Development / deploy (push) Successful in 50s
Build Test / lint-backend (push) Successful in 0s
Build Test / build-frontend (push) Successful in 14s

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>
This commit is contained in:
Lars 2026-03-24 08:06:20 +01:00
parent 302948a248
commit 5796c6a21a

View File

@ -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'],