feat(channels): leading '＋ Tag' pill + detail-page Unhide affordance (S6)

Item 6 — the tag add-trigger now LEADS the chip row (a stable left anchor)
instead of trailing it, so on the detail page (bounded=false) adding chips
grows the row to its right and the '+'/its editor popover no longer drift.
Compact icon in the width-bounded manager cell; a labelled '＋ Tag' pill
where there's free width (the detail header).

Item 7 — surface the per-subscription 'hidden' flag on the detail GET
(channel_detail was omitting it) and add an Eye/EyeOff hide/unhide toggle
next to Block on the channel page, mirroring the manager. FE ChannelDetail
gains 'hidden'; new channel.* i18n keys (HU+EN).

Tests: +3 backend (channel_detail surfaces hidden, both states + unsubscribed
default). Gate green: backend pytest 471, FE vitest 498.

backend/app/routes/channels.py

@@ -229,6 +229,7 @@ def _channel_detail_dict(
     count_live: int,
     deep_requested: bool,
     priority: int,
+    hidden: bool,
     tag_ids: list[int],
 ) -> dict:
     return {
@@ -262,6 +263,9 @@ def _channel_detail_dict(
         # This user's per-subscription feed priority (0 when not subscribed) so the channel page can
         # offer the same priority stepper as the manager. Editable only while subscribed.
         "priority": priority,
+        # This user's per-subscription "hide from feed" flag (False when not subscribed), so the
+        # channel page can offer the same Unhide toggle the manager has. Editable only while subscribed.
+        "hidden": hidden,
         "backfill_done": channel.backfill_done,
         "from_explore": channel.from_explore,
         "details_synced": channel.details_synced_at is not None,
@@ -344,6 +348,7 @@ def channel_detail(
         count_live=count_live,
         deep_requested=bool(sub.deep_requested) if sub else False,
         priority=int(sub.priority) if sub else 0,
+        hidden=bool(sub.hidden) if sub else False,
         tag_ids=tag_ids,
     )
 

backend/tests/test_channel_backfill.py

@@ -55,6 +55,49 @@ def test_channel_detail_returns_normal_shorts_live_counts(db, monkeypatch):
     assert body["count_normal"] == 2
 
 
+@pytest.mark.parametrize("hidden", [True, False])
+def test_channel_detail_surfaces_subscription_hidden_flag(db, monkeypatch, hidden):
+    # S6: the detail GET must expose the per-subscription `hidden` flag so the channel page can offer
+    # the same Unhide toggle the manager has (the flag was previously omitted from the detail dict).
+    ch = Channel(id="UC_hid", title="Hidden?", published_at=_PUB)
+    db.add(ch)
+    me = User(email="hid@example.com")
+    db.add(me)
+    db.flush()
+    db.add(Subscription(user_id=me.id, channel_id=ch.id, hidden=hidden))
+    db.commit()
+
+    monkeypatch.setattr(state, "_configured_cache", True)
+    app.dependency_overrides[get_db] = lambda: db
+    app.dependency_overrides[current_user] = lambda: me
+    try:
+        resp = TestClient(app).get(f"/api/channels/{ch.id}")
+    finally:
+        app.dependency_overrides.clear()
+
+    assert resp.status_code == 200, resp.text
+    assert resp.json()["hidden"] is hidden
+
+
+def test_channel_detail_hidden_defaults_false_when_not_subscribed(db, monkeypatch):
+    # No subscription row → the flag can't be True; it must serialize as False, not raise.
+    ch = Channel(id="UC_hid_ns", title="Unsub", published_at=_PUB)
+    me = User(email="hidns@example.com")
+    db.add_all([ch, me])
+    db.commit()
+
+    monkeypatch.setattr(state, "_configured_cache", True)
+    app.dependency_overrides[get_db] = lambda: db
+    app.dependency_overrides[current_user] = lambda: me
+    try:
+        resp = TestClient(app).get(f"/api/channels/{ch.id}")
+    finally:
+        app.dependency_overrides.clear()
+
+    assert resp.status_code == 200, resp.text
+    assert resp.json()["hidden"] is False
+
+
 def _setup_channel_and_sub(db, *, email, is_demo=False):
     ch = Channel(
         id="UC_wire",

frontend/src/components/ChannelPage.tsx

@@ -12,6 +12,8 @@ import {
   Ban,
   Check,
   ExternalLink,
+  Eye,
+  EyeOff,
   History,
   Loader2,
   Plus,
@@ -137,6 +139,17 @@ export default function ChannelPage({
     // a caller toast here would just double it.
   });
 
+  // "Hide from feed": the same per-subscription flag the manager toggles (updateChannel {hidden}).
+  // Local DB op — keeps the subscription, only drops the channel's videos from the feed/explore.
+  const toggleHidden = useMutation({
+    mutationFn: () => api.updateChannel(channelId, { hidden: !ch?.hidden }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: qk.channel(channelId) });
+      qc.invalidateQueries({ queryKey: qk.feed() });
+      qc.invalidateQueries({ queryKey: qk.channels() });
+    },
+  });
+
   const subscribe = useMutation({
     mutationFn: () => api.subscribeChannel(channelId),
     onSuccess: () => {
@@ -470,6 +483,24 @@ export default function ChannelPage({
                   <Ban className="w-4 h-4" />
                 </button>
               )}
+              {/* Hide-from-feed toggle — subscription-scoped, so offered only on a followed channel
+                  (mirrors the manager's Eye/EyeOff). Keeps the subscription; only drops its videos
+                  from the feed. EyeOff = currently hidden (click to unhide). */}
+              {ch?.subscribed && !me.is_demo && (
+                <button
+                  onClick={() => toggleHidden.mutate()}
+                  disabled={toggleHidden.isPending}
+                  title={ch.hidden ? t("channel.hiddenHint") : t("channel.hideHint")}
+                  aria-label={ch.hidden ? t("channel.unhide") : t("channel.hide")}
+                  className={`inline-flex items-center justify-center w-9 h-9 rounded-lg border disabled:opacity-50 transition ${
+                    ch.hidden
+                      ? "border-accent text-accent"
+                      : "border-border text-muted hover:text-fg hover:border-fg/40"
+                  }`}
+                >
+                  {ch.hidden ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              )}
               {!me.is_demo &&
                 !ch?.blocked &&
                 (ch?.subscribed ? (

frontend/src/components/ChannelTags.tsx

@@ -9,8 +9,8 @@ import { useChipOverflowFit } from "../lib/useChipOverflowFit";
 
 // The channel tag surface, shared by the channel manager (table + cards) and the channel detail
 // page. Built on the R8 popover platform. Two design goals it fixes over the old inline TagsCell:
-//   1. Stable edit anchor — the "+" edit trigger sits in a FIXED slot at the end, so toggling tags
-//      (which grows the chip row) never moves it, and the editor popover doesn't drift.
+//   1. Stable edit anchor — the "+" edit trigger LEADS the row (fixed left slot), so toggling tags
+//      (which grows the chip row to its right) never moves it, and the editor popover doesn't drift.
 //   2. Fixed footprint — the chip row lives in a width-bounded, single-line, overflow-hidden box and
 //      collapses the excess into a "+N" pill (hover reveals the full set). The cell therefore never
 //      wraps to a 2nd line, so it can't widen its table column and reflow every other row.
@@ -281,9 +281,9 @@ function TagEditorMenu({
   );
 }
 
-/** The full tag control for a channel: a width-bounded chip row with "+N" overflow (hover reveals
- *  all), followed by a stable "+" trigger that opens the shared editor. Fills its container width,
- *  so a table cell bounds it via the column width and a card bounds it via the card. */
+/** The full tag control for a channel: a stable leading "+" trigger (opens the shared editor),
+ *  followed by a width-bounded chip row with "+N" overflow (hover reveals all). Fills its container
+ *  width, so a table cell bounds it via the column width and a card bounds it via the card. */
 export function ChannelTagsControl({
   userTags,
   attachedIds,
@@ -376,6 +376,25 @@ export function ChannelTagsControl({
     <div
       className={`relative flex items-center gap-1 min-w-0 ${bounded ? "w-48 max-w-full" : "w-full"}`}
     >
+      {/* The add trigger LEADS the row — a stable left anchor that never moves as chips are added
+          (they grow to its right), so its editor popover can't drift. Compact icon in the width-
+          bounded manager cell; a labelled "＋ Tag" pill where there's free width (the detail header). */}
+      <button
+        ref={editPop.refs.setReference}
+        type="button"
+        title={t("channels.row.editTags")}
+        aria-label={t("channels.row.editTags")}
+        className={
+          bounded
+            ? "shrink-0 w-5 h-5 inline-flex items-center justify-center rounded-full border border-dashed border-border text-muted hover:text-accent hover:border-accent transition"
+            : "shrink-0 inline-flex items-center gap-1 h-6 pl-1.5 pr-2 rounded-full border border-dashed border-border text-2xs font-medium text-muted hover:text-accent hover:border-accent transition"
+        }
+        {...editPop.getReferenceProps()}
+      >
+        <Plus className="w-3 h-3 shrink-0" />
+        {!bounded && <span className="whitespace-nowrap">{t("channels.tags.add")}</span>}
+      </button>
+
       {/* Untagged + has suggestions → the ghost-chip lane (its own overflow "+N"); otherwise the
           attached-chip lane. The two are mutually exclusive: suggestions are computed for untagged
           channels only, and accepting one removes the channel from the suggestion set — so a channel
@@ -437,17 +456,6 @@ export function ChannelTagsControl({
         </>
       )}
 
-      <button
-        ref={editPop.refs.setReference}
-        type="button"
-        title={t("channels.row.editTags")}
-        aria-label={t("channels.row.editTags")}
-        className="shrink-0 w-5 h-5 inline-flex items-center justify-center rounded-full border border-dashed border-border text-muted hover:text-accent hover:border-accent transition"
-        {...editPop.getReferenceProps()}
-      >
-        <Plus className="w-3 h-3" />
-      </button>
-
       {/* Hover: reveal every attached tag when some are collapsed into "+N". */}
       <PopoverSurface
         popover={overflowPop}

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

@@ -22,6 +22,10 @@
   "block": "Block channel",
   "unblock": "Unblock channel",
   "blockedBadge": "Blocked",
+  "hide": "Hide from feed",
+  "unhide": "Unhide",
+  "hideHint": "Hide this channel's videos from your feed. It stays subscribed; this doesn't unsubscribe on YouTube.",
+  "hiddenHint": "Hidden — this channel's videos are kept out of your feed. Click to show them again.",
   "country": "Country",
   "language": "Language",
   "topics": "Topics",

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

@@ -47,6 +47,7 @@
   },
   "tags": {
     "label": "Tags",
+    "add": "Tag",
     "yourTagsHint": "Your personal labels. Attach them to channels below, then filter the feed by tag from the sidebar. (Separate from the automatic language/topic tags.)",
     "noneYet": "No tags yet — create one below.",
     "create": "Create tag",

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

@@ -22,6 +22,10 @@
   "block": "Csatorna tiltása",
   "unblock": "Tiltás feloldása",
   "blockedBadge": "Tiltva",
+  "hide": "Elrejtés a hírfolyamból",
+  "unhide": "Megjelenítés",
+  "hideHint": "A csatorna videóinak elrejtése a hírfolyamodból. Feliratkozva marad; ez nem iratkoztat le a YouTube-on.",
+  "hiddenHint": "Elrejtve — a csatorna videói nem jelennek meg a hírfolyamodban. Kattints, hogy újra láthatóak legyenek.",
   "country": "Ország",
   "language": "Nyelv",
   "topics": "Témák",

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

@@ -47,6 +47,7 @@
   },
   "tags": {
     "label": "Címkék",
+    "add": "Címke",
     "yourTagsHint": "Saját személyes címkéid. Csatold őket az alábbi csatornákhoz, majd szűrd a hírfolyamot címke szerint az oldalsávból. (Az automatikus nyelvi/téma címkéktől függetlenül.)",
     "noneYet": "Még nincs címke — hozz létre egyet lent.",
     "create": "Címke létrehozása",

frontend/src/lib/api/channels.ts

@@ -32,6 +32,7 @@ export interface ChannelDetail {
   count_live: number;
   deep_requested: boolean;
   priority: number;
+  hidden: boolean;
   backfill_done: boolean;
   from_explore: boolean;
   details_synced: boolean;