feat(channels): search box + clickable tag chips; fix(feed): contextual Your-tags

- Channels manager: prominent channel-name search box and the 'Your tags' chips are now
  clickable to filter the table by tag (replacing the hidden per-column DataTable popovers).
  Both filter client-side over the status-filtered list; a focus-channel intent seeds the
  search, the reset intent clears both.
- Feed 'Your tags' sidebar: count user tags in the facet endpoint (the 'other' category) and
  make the widget contextual like language/topic — counts reflect the current filter and
  zero-count chips hide (e.g. a source=search view with no tagged channels shows 'no matching
  tags' instead of the full static list). EN/HU/DE searchPlaceholder.

backend/app/routes/feed.py

@@ -535,7 +535,7 @@ def get_facets(
     (tag ids)."""
     visible = or_(ChannelTag.user_id.is_(None), ChannelTag.user_id == user.id)
     counts: dict[int, int] = {}
-    for category in ("language", "topic"):
+    for category in ("language", "topic", "other"):
         # Disjunctive (OR) facets drop the category's own selections so its chips keep
         # independent counts (you can OR more of them in). Conjunctive (AND, topics only)
         # keeps them applied, so each remaining chip narrows to channels that ALSO have all

frontend/src/components/Channels.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -11,7 +11,9 @@ import {
   Pencil,
   Plus,
   RefreshCw,
+  Search,
   UserMinus,
+  X,
 } from "lucide-react";
 import { api, HttpError, type ManagedChannel, type Tag } from "../lib/api";
 import { useDismiss } from "../lib/useDismiss";
@@ -181,9 +183,26 @@ export default function Channels({
     onError: (e) => notifyActionError(e, "channels.notify.fullHistoryFailed"),
   });
 
+  // Channel-name search + tag-chip filtering, applied client-side over the status-filtered list
+  // (prominent controls instead of the DataTable's hidden per-column popovers).
+  const [search, setSearch] = useState("");
+  const [tagFilter, setTagFilter] = useState<number[]>([]);
+  // A focus-channel intent (header "without full history" / tag manager) seeds the search box.
+  useEffect(() => {
+    if (focusChannelName) setSearch(focusChannelName);
+  }, [focusChannelName]);
+  // The header's reset intent clears the search + tag chips (skip the initial mount).
+  const resetRef = useRef(filtersResetToken);
+  useEffect(() => {
+    if (filtersResetToken === resetRef.current) return;
+    resetRef.current = filtersResetToken;
+    setSearch("");
+    setTagFilter([]);
+  }, [filtersResetToken]);
+
   // The Sync-status filter stays a top-level chip set (not a column filter) because the
-  // header's "go to full history" deep-link drives it; the DataTable then handles name
+  // header's "go to full history" deep-link drives it; search/tag filtering + sort + pagination
-  // search, tag filtering, sort and pagination over whatever the status chip leaves.
+  // run over whatever the status chip leaves.
   const channels = (channelsQuery.data ?? []).filter((c) =>
     statusFilter === "needs_full"
       ? !c.backfill_done
@@ -193,6 +212,12 @@ export default function Channels({
           ? c.hidden
           : true
   );
+  const q = search.trim().toLowerCase();
+  const visibleChannels = channels.filter((c) => {
+    if (q && !`${c.title ?? ""} ${c.handle ?? ""}`.toLowerCase().includes(q)) return false;
+    if (tagFilter.length && !tagFilter.some((id) => c.tag_ids.includes(id))) return false;
+    return true;
+  });
   const s = statusQuery.data;
 
   const onView = (c: ManagedChannel) =>
@@ -231,7 +256,6 @@ export default function Channels({
       header: t("channels.cols.channel"),
       sortable: true,
       sortValue: (c) => (c.title ?? c.id).toLowerCase(),
-      filter: { kind: "text", get: (c) => `${c.title ?? ""} ${c.handle ?? ""}` },
       cardPrimary: true,
       render: (c) => (
         <ChannelLink
@@ -305,12 +329,6 @@ export default function Channels({
       key: "tags",
       header: t("channels.cols.tags"),
       cardLabel: false,
-      filter: {
-        kind: "multi",
-        options: userTags.map((tg) => ({ value: String(tg.id), label: tg.name })),
-        // OR semantics: show channels carrying any of the selected tags.
-        test: (c, values) => values.some((v) => c.tag_ids.includes(Number(v))),
-      },
       render: (c) => (
         <TagsCell
           c={c}
@@ -468,21 +486,60 @@ export default function Channels({
         />
       </p>
 
-      {/* Your tags — read-only overview; add/rename/delete live in the manager dialog. */}
+      {/* Channel-name search */}
+      <div className="relative mb-3 max-w-sm">
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted pointer-events-none" />
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={t("channels.searchPlaceholder")}
+          className="w-full bg-card border border-border rounded-lg pl-8 pr-8 py-2 text-sm outline-none focus:border-accent"
+        />
+        {search && (
+          <button
+            onClick={() => setSearch("")}
+            aria-label={t("common.cancel")}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted hover:text-fg"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+
+      {/* Your tags — click a chip to filter the table by it (add/rename/delete live in the manager). */}
       <div className="flex flex-wrap items-center gap-1.5 mb-4">
         <Tooltip hint={t("channels.tags.yourTagsHint")}>
           <span className="text-xs uppercase tracking-wide text-muted mr-1 cursor-help underline decoration-dotted decoration-muted/40 underline-offset-4">
             {t("channels.tags.yourTags")}
           </span>
         </Tooltip>
-        {userTags.map((tg) => (
+        {userTags.map((tg) => {
-          <span
+          const active = tagFilter.includes(tg.id);
-            key={tg.id}
+          return (
-            className="text-xs px-2 py-1 rounded-full bg-card border border-border"
+            <button
+              key={tg.id}
+              onClick={() =>
+                setTagFilter((f) => (active ? f.filter((x) => x !== tg.id) : [...f, tg.id]))
+              }
+              aria-pressed={active}
+              className={`text-xs px-2 py-1 rounded-full border transition ${
+                active
+                  ? "bg-accent text-accent-fg border-accent"
+                  : "bg-card border-border text-muted hover:text-fg hover:border-accent"
+              }`}
+            >
+              {tg.name}
+            </button>
+          );
+        })}
+        {tagFilter.length > 0 && (
+          <button
+            onClick={() => setTagFilter([])}
+            className="text-xs px-2 py-1 text-muted hover:text-accent transition"
           >
-            {tg.name}
+            {t("datatable.clear")}
-          </span>
+          </button>
-        ))}
+        )}
         <button
           onClick={() => setTagManagerOpen(true)}
           className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full border border-dashed border-border text-muted hover:text-accent hover:border-accent transition"
@@ -500,14 +557,12 @@ export default function Channels({
         <div className="text-muted py-8">{t("channels.loading")}</div>
       ) : (
         <DataTable
-          rows={channels}
+          rows={visibleChannels}
           columns={columns}
           rowKey={(c) => c.id}
           persistKey="siftlode.channelsTable"
           controlsPosition="top"
           controlsLeading={statusChips}
-          externalFilter={focusChannelName ? { key: "channel", value: focusChannelName } : null}
-          resetFiltersToken={filtersResetToken}
           rowClassName={(c) => (c.hidden ? "opacity-60" : "")}
           emptyText={t("channels.empty")}
         />

frontend/src/components/Sidebar.tsx

@@ -182,7 +182,8 @@ export default function Sidebar({
   const languages = tags.filter((t) => t.category === "language");
   const topics = tags.filter((t) => t.category === "topic");
   // The user's own (non-system) tags — those assigned to channels in the Channel manager.
-  // Facets only cover language/topic, so these show their static channel_count.
+  // Facets cover them too now (the "other" category), so they're contextual like the rest:
+  // zero-count chips hide once facets load, counts reflect the current filter.
   const userTags = tags.filter((t) => !t.system);
   const [customDates, setCustomDates] = useState(false);
   const [tagManagerOpen, setTagManagerOpen] = useState(false);
@@ -407,18 +408,22 @@ export default function Sidebar({
           </>
         );
       }
-      case "tags":
+      case "tags": {
+        const tagChips = visibleChips(userTags);
         return (
           <div className="flex flex-wrap items-center gap-1.5">
-            {userTags.map((tg) => (
+            {tagChips.map((tg) => (
               <TagChip
                 key={tg.id}
                 tag={tg}
-                count={tg.channel_count}
+                count={chipCount(tg)}
                 active={filters.tags.includes(tg.id)}
                 onClick={() => toggleTag(tg.id)}
               />
             ))}
+            {facetsReady && tagChips.length === 0 && (
+              <span className="text-[11px] text-muted">{t("sidebar.noMatchingTags")}</span>
+            )}
             <button
               onClick={() => setTagManagerOpen(true)}
               title={t("sidebar.manageTags")}
@@ -429,6 +434,7 @@ export default function Sidebar({
             </button>
           </div>
         );
+      }
     }
   }
 

frontend/src/i18n/locales/de/channels.json

@@ -122,5 +122,6 @@
     "resetFailed": "Kanal konnte nicht zurückgesetzt werden"
   },
   "confirmUnsubscribe": "Kanal „{{name}}“ bei YouTube abbestellen? Dies ändert dein echtes YouTube-Konto. Um ihn nur aus deinem Feed zu entfernen, blende ihn stattdessen aus.",
-  "confirmReset": "Kanal „{{name}}“ von Grund auf neu laden? Dies startet den Backfill neu (aktuell + vollständiger Verlauf) und verbraucht etwas API-Kontingent."
+  "confirmReset": "Kanal „{{name}}“ von Grund auf neu laden? Dies startet den Backfill neu (aktuell + vollständiger Verlauf) und verbraucht etwas API-Kontingent.",
+  "searchPlaceholder": "Kanäle suchen…"
 }

frontend/src/i18n/locales/en/channels.json

@@ -122,5 +122,6 @@
     "resetFailed": "Couldn't reset this channel"
   },
   "confirmUnsubscribe": "Unsubscribe from \"{{name}}\" on YouTube? This changes your real YouTube account. To just remove it from your feed, hide it instead.",
-  "confirmReset": "Re-fetch \"{{name}}\" from scratch? This re-runs its backfill (recent + full history) and spends some API quota."
+  "confirmReset": "Re-fetch \"{{name}}\" from scratch? This re-runs its backfill (recent + full history) and spends some API quota.",
+  "searchPlaceholder": "Search channels…"
 }

frontend/src/i18n/locales/hu/channels.json

@@ -122,5 +122,6 @@
     "resetFailed": "Nem sikerült resetelni a csatornát"
   },
   "confirmUnsubscribe": "Leiratkozol a(z) „{{name}}” csatornáról a YouTube-on? Ez megváltoztatja a valódi YouTube-fiókodat. Ha csak a hírfolyamodból szeretnéd eltávolítani, inkább rejtsd el.",
-  "confirmReset": "Újraletöltöd a(z) „{{name}}” csatornát a nulláról? Ez újrafuttatja a backfillt (legutóbbi + teljes előzmény), és némi API-kvótát fogyaszt."
+  "confirmReset": "Újraletöltöd a(z) „{{name}}” csatornát a nulláról? Ez újrafuttatja a backfillt (legutóbbi + teljes előzmény), és némi API-kvótát fogyaszt.",
+  "searchPlaceholder": "Csatornák keresése…"
 }