fix: keep Rating + Tags pills in their sections, only hide Flag in Discarded

Rated and Tags sections still benefit from their respective pill —
Rating because the user can refine the section's ratingMin >= 1 to a
higher floor, Tags because they can intersect the tag-grouped view
with a specific tag id list. Flag in Discarded is the only pill where
the section locks the only useful value, so it stays hidden there.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-08 21:07:26 +02:00
parent d7f953d0a9
commit 7a0f738aa8

View File

@@ -47,14 +47,12 @@ export function FilterBar() {
const tagIds = useFilterStore((s) => s.tagIds)
const currentSection = useFilterStore((s) => s.currentSection)
// Section-locked pills: each section has a preset filter that defines
// it (Rated → ratingMin, Discarded → flag, Tags → groupBy=tag). The
// matching pill is hidden while you're inside that section because
// toggling it would either be a no-op or break the section. The user
// can still navigate away to change the locked dimension.
const hideRatingPill = currentSection === 'rated'
// Only the Flag pill is hidden inside the Discarded section. Flag has
// exactly two values and the section locks one of them, so the pill
// would only ever toggle the section off — useless. Rating + Tags
// pills stay visible in their sections because the user can refine
// them further (ratingMin >= 3, restrict to specific tag ids).
const hideFlagPill = currentSection === 'discarded'
const hideTagsPill = currentSection === 'tags'
const setDateFrom = useFilterStore((s) => s.setDateFrom)
const setDateTo = useFilterStore((s) => s.setDateTo)
@@ -226,40 +224,36 @@ export function FilterBar() {
</div>
</FilterPill>
{/* Rating — hidden in the Rated section since the section already
* pins ratingMin and the only useful tweak (ratingMin >= N) lives
* in the section preset itself. */}
{!hideRatingPill && (
<FilterPill
label="Rating"
value={ratingValue}
isActive={ratingActive}
onClear={() => setRatingMin(0)}
>
<div>
<p className="mb-1 text-[11px] text-text-muted">Minimum</p>
<div className="flex gap-1">
{[1, 2, 3, 4, 5].map((n) => (
<button
key={n}
onClick={() => setRatingMin(ratingMin === n ? 0 : n)}
className="p-0.5"
title={`At least ${n} star${n > 1 ? 's' : ''}`}
>
<Star
className={clsx(
'h-5 w-5 transition-colors',
n <= ratingMin
? 'fill-star text-star'
: 'text-text-muted hover:text-star'
)}
/>
</button>
))}
</div>
{/* Rating */}
<FilterPill
label="Rating"
value={ratingValue}
isActive={ratingActive}
onClear={() => setRatingMin(0)}
>
<div>
<p className="mb-1 text-[11px] text-text-muted">Minimum</p>
<div className="flex gap-1">
{[1, 2, 3, 4, 5].map((n) => (
<button
key={n}
onClick={() => setRatingMin(ratingMin === n ? 0 : n)}
className="p-0.5"
title={`At least ${n} star${n > 1 ? 's' : ''}`}
>
<Star
className={clsx(
'h-5 w-5 transition-colors',
n <= ratingMin
? 'fill-star text-star'
: 'text-text-muted hover:text-star'
)}
/>
</button>
))}
</div>
</FilterPill>
)}
</div>
</FilterPill>
{/* Color */}
<FilterPill
@@ -332,10 +326,8 @@ export function FilterBar() {
</FilterPill>
)}
{/* Tags — hidden in the Tags section since the section already
* groups everything by tag and re-applying a tag filter on top
* collapses the view to a single bucket. */}
{!hideTagsPill && allTags.length > 0 && (
{/* Tags */}
{allTags.length > 0 && (
<FilterPill
label="Tags"
value={tagValue}