fix: hide section-locked filter pills in their own sections

Each section's preset locks one filter dimension that defines the
section: Rated → ratingMin, Discarded → flag, Tags → groupBy=tag.
Showing the matching pill in the toolbar while you're inside that
section is either redundant (it's already on) or actively breaks the
view (toggling it would either become a no-op or filter the section
into one bucket).

Hide the corresponding pill in each section: Rating in Rated, Flag in
Discarded, Tags in Tags. The user navigates away to a different
section to change the locked dimension.

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

View File

@@ -45,6 +45,16 @@ export function FilterBar() {
const sortBy = useFilterStore((s) => s.sortBy) const sortBy = useFilterStore((s) => s.sortBy)
const sortOrder = useFilterStore((s) => s.sortOrder) const sortOrder = useFilterStore((s) => s.sortOrder)
const tagIds = useFilterStore((s) => s.tagIds) 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'
const hideFlagPill = currentSection === 'discarded'
const hideTagsPill = currentSection === 'tags'
const setDateFrom = useFilterStore((s) => s.setDateFrom) const setDateFrom = useFilterStore((s) => s.setDateFrom)
const setDateTo = useFilterStore((s) => s.setDateTo) const setDateTo = useFilterStore((s) => s.setDateTo)
@@ -216,7 +226,10 @@ export function FilterBar() {
</div> </div>
</FilterPill> </FilterPill>
{/* Rating */} {/* 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 <FilterPill
label="Rating" label="Rating"
value={ratingValue} value={ratingValue}
@@ -246,6 +259,7 @@ export function FilterBar() {
</div> </div>
</div> </div>
</FilterPill> </FilterPill>
)}
{/* Color */} {/* Color */}
<FilterPill <FilterPill
@@ -282,7 +296,9 @@ export function FilterBar() {
</div> </div>
</FilterPill> </FilterPill>
{/* Flag — discarded toggle */} {/* Flag — hidden in the Discarded section, where the flag is
* pinned to "discarded" by the section preset. */}
{!hideFlagPill && (
<FilterPill <FilterPill
label="Flag" label="Flag"
value={flagValue} value={flagValue}
@@ -314,9 +330,12 @@ export function FilterBar() {
</button> </button>
</div> </div>
</FilterPill> </FilterPill>
)}
{/* Tags */} {/* Tags — hidden in the Tags section since the section already
{allTags.length > 0 && ( * groups everything by tag and re-applying a tag filter on top
* collapses the view to a single bucket. */}
{!hideTagsPill && allTags.length > 0 && (
<FilterPill <FilterPill
label="Tags" label="Tags"
value={tagValue} value={tagValue}