feat(feed): removable active-filter chips above the feed

With the filter panel now collapsed to a tab, there was no way to see what was
narrowing the feed without opening it. Every applied filter is now a chip you
can drop on its own, with a Clear all when more than one is on.

The panel's count badge and the chip row read the SAME list (lib/useActiveFilters),
so they can't disagree about what's applied; that list also owns the reset both
"Clear all"s share. Replaces the hand-summed activeCount in Sidebar.

frontend/src/components/ActiveFilterChips.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next";
+import { X } from "lucide-react";
+import type { ActiveFilter } from "../lib/useActiveFilters";
+
+// The applied-filter row above the feed: every narrowing currently in force, each removable on its
+// own. It exists because the filter panel now sits collapsed as a tab — without this you'd have to
+// open the panel just to see what you'd filtered by.
+export default function ActiveFilterChips({
+  filters,
+  onClearAll,
+}: {
+  filters: ActiveFilter[];
+  onClearAll: () => void;
+}) {
+  const { t } = useTranslation();
+  if (filters.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 pb-3" aria-label={t("feed.chips.label")}>
+      <span className="text-[11px] uppercase tracking-wider text-muted mr-0.5">
+        {t("feed.chips.label")}
+      </span>
+      {filters.map((f) => (
+        <button
+          key={f.key}
+          onClick={f.remove}
+          title={t("feed.chips.remove", { name: f.label })}
+          aria-label={t("feed.chips.remove", { name: f.label })}
+          className="group inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-full border border-accent/40 bg-accent/10 text-accent text-xs hover:border-accent hover:bg-accent/20 transition"
+        >
+          <span className="max-w-[14rem] truncate">{f.label}</span>
+          <X className="w-3 h-3 shrink-0 opacity-60 group-hover:opacity-100" />
+        </button>
+      ))}
+      {filters.length > 1 && (
+        <button
+          onClick={onClearAll}
+          className="ml-0.5 text-xs text-muted hover:text-fg underline underline-offset-2 transition"
+        >
+          {t("sidebar.clearAll")}
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/Feed.tsx

@@ -14,6 +14,8 @@ import {
   SORT_KEYS,
   type SortKey,
 } from "../lib/feedSort";
+import { clearedFilters, useActiveFilters } from "../lib/useActiveFilters";
+import ActiveFilterChips from "./ActiveFilterChips";
 import VirtualFeed from "./VirtualFeed";
 // Lazy: the in-app YouTube player (IFrame API) loads only when a video is first opened.
 const PlayerModal = lazy(() => import("./PlayerModal"));
@@ -84,6 +86,8 @@ export default function Feed({
   channelScoped?: boolean;
 }) {
   const { t } = useTranslation();
+  // Same list the panel's badge counts — see lib/useActiveFilters.
+  const activeFilters = useActiveFilters(filters, setFilters);
   const sortKeys = channelScoped
     ? SORT_KEYS.filter((k) => k !== "subscribers" && k !== "priority")
     : SORT_KEYS;
@@ -625,6 +629,7 @@ export default function Feed({
   return (
     <div className="p-4">
       {toolbar}
+      <ActiveFilterChips filters={activeFilters} onClearAll={() => setFilters(clearedFilters(filters))} />
       {items.length === 0 ? (
         <div className="py-16 text-center text-muted">
           <p>{t("feed.noMatches")}</p>

frontend/src/components/Sidebar.tsx

@@ -7,6 +7,7 @@ import { defaultLayout, type PanelLayout } from "../lib/panelLayout";
 import { shareUrl } from "../lib/urlState";
 import { notify } from "../lib/notifications";
 import { useDebounced } from "../lib/useDebounced";
+import { clearedFilters, useActiveFilters } from "../lib/useActiveFilters";
 import TagManager from "./TagManager";
 import SavedViewsWidget from "./SavedViewsWidget";
 import SidePanel from "./SidePanel";
@@ -21,18 +22,6 @@ const DATE_PRESETS: { days: number; key: string }[] = [
   { days: 365, key: "1year" },
 ];
 
-// Filter values owned by the sidebar (everything except the header search `q` and the
-// `scope` mode, both preserved across a "Clear all").
-const DEFAULT_SIDEBAR_FILTERS: Omit<FeedFilters, "q" | "scope"> = {
-  tags: [],
-  tagMode: "or",
-  sort: "newest",
-  includeNormal: true,
-  includeShorts: false,
-  includeLive: false,
-  show: "unwatched",
-};
-
 function TagChip({
   tag,
   count,
@@ -143,21 +132,9 @@ export default function Sidebar({
     });
   }
 
-  const dateActive = !!filters.maxAgeDays || !!filters.dateFrom || !!filters.dateTo;
-  const contentChanged =
-    !filters.includeNormal || filters.includeShorts || filters.includeLive;
-  const scopeActive = filters.scope === "all";
-  const sourceActive =
-    filters.scope === "all" && !!filters.librarySource && filters.librarySource !== "organic";
-  const activeCount =
-    filters.tags.length +
-    (filters.show !== "unwatched" ? 1 : 0) +
-    (filters.sort !== "newest" && filters.sort !== "relevance" ? 1 : 0) +
-    (contentChanged ? 1 : 0) +
-    (filters.channelId ? 1 : 0) +
-    (dateActive ? 1 : 0) +
-    (scopeActive ? 1 : 0) +
-    (sourceActive ? 1 : 0);
+  // The badge counts exactly what the chip row above the feed shows — same list, so they can't
+  // disagree about what's applied.
+  const activeCount = useActiveFilters(filters, setFilters).length;
   const active = activeCount > 0;
 
   async function shareView() {
@@ -171,7 +148,7 @@ export default function Sidebar({
 
   function clearAll() {
     setCustomDates(false);
-    setFilters({ ...DEFAULT_SIDEBAR_FILTERS, q: filters.q, scope: "my" });
+    setFilters(clearedFilters(filters));
   }
 
   const available: Record<string, boolean> = {