peter
002ef0ab84
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.
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|