feat(channels): proper channel cards for Hidden + Blocked tabs (R13 S2)

The Hidden and Blocked tabs were a bare row of name chips ("two withered
chips"). Both now render a responsive grid of real channel cards via a shared
ExcludedChannelList: avatar + name + open-on-YouTube (reusing ChannelLink) and
one labelled reversing action (Unhide / Unblock). One presentation, parameterised
by icon/label/action/copy — the two "excluded channel" tabs now match.

Gate green: tsc/eslint-0/prettier/knip clean. Self-E2E'd: Hidden tab renders both
channels as cards with avatars, YT links, and Unhide buttons.

frontend/src/components/Channels.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { qk } from "../lib/queryKeys";
 import { Ban, Eye, EyeOff, History, LayoutGrid, Pencil, RefreshCw, Table, X } from "lucide-react";
+import ExcludedChannelList from "./ExcludedChannelList";
 import { api, type ManagedChannel } from "../lib/api";
 import { notifyYouTubeActionError } from "../lib/youtubeErrors";
 import { accountKey, LS } from "../lib/storage";
@@ -522,73 +523,33 @@ export default function Channels() {
       ) : view === "blocked" ? (
         /* Blocked channels — videos from these are hidden everywhere and dropped from live search. */
         <div className="px-4 pb-4 pt-3 max-w-384 mx-auto">
-          {(blockedQuery.data?.length ?? 0) === 0 ? (
-            <p className="text-sm text-muted py-8">{t("channels.blocked.empty")}</p>
-          ) : (
-            <>
-              <div className="flex items-center gap-2 mb-3">
-                <Ban className="w-4 h-4 text-muted" />
-                <span className="text-xs uppercase tracking-wide text-muted">
-                  {t("channels.blocked.title")}
-                </span>
-              </div>
-              <div className="flex flex-wrap gap-1.5">
-                {blockedQuery.data!.map((c) => (
-                  <span
-                    key={c.id}
-                    className="inline-flex items-center gap-1.5 text-xs pl-2.5 pr-1 py-1 rounded-full bg-card border border-border"
-                  >
-                    {c.title ?? c.id}
-                    <button
-                      onClick={() => unblock.mutate(c.id)}
-                      title={t("channel.unblock")}
-                      aria-label={t("channel.unblock")}
-                      className="rounded-full p-0.5 text-muted hover:text-danger transition"
-                    >
-                      <X className="w-3 h-3" />
-                    </button>
-                  </span>
-                ))}
-              </div>
-              <p className="text-2xs text-muted mt-2">{t("channels.blocked.hint")}</p>
-            </>
-          )}
+          <ExcludedChannelList
+            channels={blockedQuery.data ?? []}
+            icon={<Ban className="w-4 h-4 text-muted" />}
+            title={t("channels.blocked.title")}
+            hint={t("channels.blocked.hint")}
+            emptyText={t("channels.blocked.empty")}
+            actionLabel={t("channel.unblock")}
+            actionIcon={<X className="w-3.5 h-3.5" />}
+            onAction={(id) => unblock.mutate(id)}
+            onView={(c) => onViewChannel(c.id, c.title ?? t("channels.row.thisChannel"))}
+          />
         </div>
       ) : view === "hidden" ? (
         /* Hidden channels — kept out of the Mine feed but still in the shared Library; managed here
-           instead of dimmed in the subscribed table. Mirrors the Blocked tab (flat list + one action). */
+           instead of dimmed in the subscribed table. Same card grid as Blocked (ExcludedChannelList). */
         <div className="px-4 pb-4 pt-3 max-w-384 mx-auto">
-          {hiddenChannels.length === 0 ? (
-            <p className="text-sm text-muted py-8">{t("channels.hidden.empty")}</p>
-          ) : (
-            <>
-              <div className="flex items-center gap-2 mb-3">
-                <EyeOff className="w-4 h-4 text-muted" />
-                <span className="text-xs uppercase tracking-wide text-muted">
-                  {t("channels.hidden.title")}
-                </span>
-              </div>
-              <div className="flex flex-wrap gap-1.5">
-                {hiddenChannels.map((c) => (
-                  <span
-                    key={c.id}
-                    className="inline-flex items-center gap-1.5 text-xs pl-2.5 pr-1 py-1 rounded-full bg-card border border-border"
-                  >
-                    {c.title ?? c.id}
-                    <button
-                      onClick={() => patch.mutate({ id: c.id, body: { hidden: false } })}
-                      title={t("channels.hidden.unhide")}
-                      aria-label={t("channels.hidden.unhide")}
-                      className="rounded-full p-0.5 text-muted hover:text-accent transition"
-                    >
-                      <Eye className="w-3 h-3" />
-                    </button>
-                  </span>
-                ))}
-              </div>
-              <p className="text-2xs text-muted mt-2">{t("channels.hidden.hint")}</p>
-            </>
-          )}
+          <ExcludedChannelList
+            channels={hiddenChannels}
+            icon={<EyeOff className="w-4 h-4 text-muted" />}
+            title={t("channels.hidden.title")}
+            hint={t("channels.hidden.hint")}
+            emptyText={t("channels.hidden.empty")}
+            actionLabel={t("channels.hidden.unhide")}
+            actionIcon={<Eye className="w-3.5 h-3.5" />}
+            onAction={(id) => patch.mutate({ id, body: { hidden: false } })}
+            onView={(c) => onViewChannel(c.id, c.title ?? t("channels.row.thisChannel"))}
+          />
         </div>
       ) : (
         /* No top padding: the sticky header sits flush at the scroller top so it doesn't shift when