From 6109e0c6f10a9e21ab9bc7abfc32b923dcfb76d8 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 21 Aug 2026 17:36:33 +0200
Subject: [PATCH] feat(feed): convert the Source filter to the FilterSelect
 dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the native <select> "Source" control with a labeled FilterSelect pill, matching
the Watch state / Content types pills — one consistent toolbar idiom. Single-select over
the three librarySource values (organic / all / search-only).

Sort and View are intentionally left as-is: Sort is a two-dimensional key+direction control
(plus reshuffle and a tables-only "no sort") shared across five surfaces, and View is already
on the same AnchoredPopover platform with an icon-only trigger tuned for this packed toolbar —
FilterSelect's text trigger would regress it. Neither fits FilterSelect's one-dimensional model.
---
 frontend/src/components/Feed.tsx | 34 +++++++++++++++-----------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index 0ba3d09a..68c9be33 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -598,24 +598,22 @@ export default function Feed({
         {!channelScoped && (
           <>
             <span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
-            <label className="inline-flex items-center gap-1.5 text-xs text-muted">
-              <span>{t("feed.source.label")}</span>
-              <select
-                value={filters.librarySource ?? "organic"}
-                onChange={(e) =>
-                  setFilters({
-                    ...filters,
-                    librarySource: e.target.value as FeedFilters["librarySource"],
-                  })
-                }
-                title={t("feed.source.tip")}
-                className="bg-surface border border-border rounded-lg px-2 py-1 text-xs focus:outline-hidden focus:ring-2 focus:ring-accent/40"
-              >
-                <option value="organic">{t("feed.source.organic")}</option>
-                <option value="all">{t("feed.source.all")}</option>
-                <option value="search">{t("feed.source.only")}</option>
-              </select>
-            </label>
+            <FilterSelect
+              label={t("feed.source.label")}
+              testId="feed-source"
+              options={[
+                { value: "organic", label: t("feed.source.organic") },
+                { value: "all", label: t("feed.source.all") },
+                { value: "search", label: t("feed.source.only") },
+              ]}
+              selected={[filters.librarySource ?? "organic"]}
+              onChange={(next) =>
+                setFilters({
+                  ...filters,
+                  librarySource: next[0] as FeedFilters["librarySource"],
+                })
+              }
+            />
           </>
         )}
         <span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />