From 7a0f738aa84d10e00805add619afea2b182f26ac Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 8 Apr 2026 21:07:26 +0200
Subject: [PATCH] fix: keep Rating + Tags pills in their sections, only hide
 Flag in Discarded
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/components/filter/FilterBar.tsx | 80 +++++++++-----------
 1 file changed, 36 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/filter/FilterBar.tsx b/frontend/src/components/filter/FilterBar.tsx
index adbe736..d220a0a 100644
--- a/frontend/src/components/filter/FilterBar.tsx
+++ b/frontend/src/components/filter/FilterBar.tsx
@@ -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}