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.
2026-08-14 00:49:09 +02:00
parent 6062007947
commit 002ef0ab84
2 changed files with 94 additions and 63 deletions
@@ -0,0 +1,70 @@
+import { type ReactNode } from "react";
+import ChannelLink from "./ChannelLink";
+
+// The presentation shared by the channel manager's "excluded channel" tabs — Hidden and Blocked.
+// A responsive grid of proper channel cards (avatar + name + open-on-YouTube, via ChannelLink) each
+// with one reversing action, instead of a bare row of name chips. Both tabs pass the same shape; only
+// the header icon/label, the action, and the copy differ.
+export interface ExcludedChannel {
+  id: string;
+  title: string | null;
+  handle?: string | null;
+  thumbnail_url: string | null;
+}
+
+export default function ExcludedChannelList({
+  channels,
+  icon,
+  title,
+  hint,
+  emptyText,
+  actionLabel,
+  actionIcon,
+  onAction,
+  onView,
+}: {
+  channels: ExcludedChannel[];
+  icon: ReactNode;
+  title: string;
+  hint: string;
+  emptyText: string;
+  actionLabel: string;
+  actionIcon: ReactNode;
+  onAction: (id: string) => void;
+  onView?: (c: ExcludedChannel) => void;
+}) {
+  if (channels.length === 0) return <p className="text-sm text-muted py-8">{emptyText}</p>;
+  return (
+    <>
+      <div className="flex items-center gap-2 mb-3">
+        {icon}
+        <span className="text-xs uppercase tracking-wide text-muted">{title}</span>
+      </div>
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+        {channels.map((c) => (
+          <div key={c.id} className="glass-card flex items-center gap-2 rounded-xl px-3 py-2">
+            <div className="min-w-0 flex-1">
+              <ChannelLink
+                id={c.id}
+                title={c.title}
+                handle={c.handle}
+                thumbnailUrl={c.thumbnail_url}
+                onView={onView ? () => onView(c) : undefined}
+              />
+            </div>
+            <button
+              onClick={() => onAction(c.id)}
+              title={actionLabel}
+              aria-label={actionLabel}
+              className="shrink-0 inline-flex items-center gap-1 rounded-full border border-border px-2 py-1 text-xs text-muted transition hover:border-accent hover:text-accent"
+            >
+              {actionIcon}
+              {actionLabel}
+            </button>
+          </div>
+        ))}
+      </div>
+      <p className="text-2xs text-muted mt-3">{hint}</p>
+    </>
+  );
+}