From d7f953d0a9495ab71de20739a68f686d6b004416 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 8 Apr 2026 21:04:45 +0200
Subject: [PATCH] fix: hide section-locked filter pills in their own sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/frontend/src/components/filter/FilterBar.tsx b/frontend/src/components/filter/FilterBar.tsx
index 89b3c2f..adbe736 100644
--- a/frontend/src/components/filter/FilterBar.tsx
+++ b/frontend/src/components/filter/FilterBar.tsx
@@ -45,6 +45,16 @@ export function FilterBar() {
   const sortBy = useFilterStore((s) => s.sortBy)
   const sortOrder = useFilterStore((s) => s.sortOrder)
   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 setDateTo = useFilterStore((s) => s.setDateTo)
@@ -216,36 +226,40 @@ export function FilterBar() {
         </div>
       </FilterPill>
 
-      {/* 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>
-            ))}
+      {/* 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>
           </div>
-        </div>
-      </FilterPill>
+        </FilterPill>
+      )}
 
       {/* Color */}
       <FilterPill
@@ -282,41 +296,46 @@ export function FilterBar() {
         </div>
       </FilterPill>
 
-      {/* Flag — discarded toggle */}
-      <FilterPill
-        label="Flag"
-        value={flagValue}
-        isActive={flagActive}
-        onClear={() => setFlag('any')}
-      >
-        <div className="flex flex-col gap-1">
-          <button
-            onClick={() => setFlag('any')}
-            className={clsx(
-              'rounded px-2 py-1 text-left text-xs transition-colors',
-              flag === 'any'
-                ? 'bg-primary text-white'
-                : 'bg-surface-2 text-text-muted hover:bg-surface-offset hover:text-text'
-            )}
-          >
-            Any
-          </button>
-          <button
-            onClick={() => setFlag('discarded')}
-            className={clsx(
-              'rounded px-2 py-1 text-left text-xs transition-colors',
-              flag === 'discarded'
-                ? 'bg-primary text-white'
-                : 'bg-surface-2 text-text-muted hover:bg-surface-offset hover:text-text'
-            )}
-          >
-            Discarded
-          </button>
-        </div>
-      </FilterPill>
+      {/* Flag — hidden in the Discarded section, where the flag is
+       *  pinned to "discarded" by the section preset. */}
+      {!hideFlagPill && (
+        <FilterPill
+          label="Flag"
+          value={flagValue}
+          isActive={flagActive}
+          onClear={() => setFlag('any')}
+        >
+          <div className="flex flex-col gap-1">
+            <button
+              onClick={() => setFlag('any')}
+              className={clsx(
+                'rounded px-2 py-1 text-left text-xs transition-colors',
+                flag === 'any'
+                  ? 'bg-primary text-white'
+                  : 'bg-surface-2 text-text-muted hover:bg-surface-offset hover:text-text'
+              )}
+            >
+              Any
+            </button>
+            <button
+              onClick={() => setFlag('discarded')}
+              className={clsx(
+                'rounded px-2 py-1 text-left text-xs transition-colors',
+                flag === 'discarded'
+                  ? 'bg-primary text-white'
+                  : 'bg-surface-2 text-text-muted hover:bg-surface-offset hover:text-text'
+              )}
+            >
+              Discarded
+            </button>
+          </div>
+        </FilterPill>
+      )}
 
-      {/* Tags */}
-      {allTags.length > 0 && (
+      {/* 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 && (
         <FilterPill
           label="Tags"
           value={tagValue}