feat(channel): enrich the About tab + fix the tab-switch header shift

- fix: reserve the scrollbar gutter (scrollbar-gutter:stable) on the channel
  page's scroll container, so switching between the tall Videos tab and the
  short About tab no longer shifts the banner/avatar/buttons a few px sideways
  (the vertical scrollbar was appearing/disappearing between the two tabs).
- About tab now shows Country (flag + localized name), Language, Topics
  (topicCategories → readable chips), and Keywords (brandingSettings keywords
  parsed into chips, quoted multi-word tags kept whole). country/language/topics
  were already stored; keywords is new (migration 0055_channel_keywords, mapped
  in apply_channel_details, returned by channel_detail).
- Discovery → channel page: the Channel-manager "Discover from playlists" tab now
  links each channel name to its in-app channel page (ChannelLink onView), so a
  discovered channel's About/videos can be inspected BEFORE subscribing (was
  subscribe-only, plain text before).

Note: the channel info-card epic itself was already delivered in v0.19.0; this is
the About-tab enrichment follow-up + the header-shift fix. external_links stays
empty by design (YouTube removed the field from the Data API ~2023).
This commit is contained in:
npeter83 2026-07-12 16:12:39 +02:00
parent fe387f06af
commit 45d16452f2
11 changed files with 141 additions and 6 deletions

View file

@ -18,9 +18,11 @@ import { useConfirm } from "./ConfirmProvider";
export default function ChannelDiscovery({
canWrite,
onOpenWizard,
onViewChannel,
}: {
canWrite: boolean;
onOpenWizard: () => void;
onViewChannel: (id: string, name: string) => void;
}) {
const { t } = useTranslation();
const qc = useQueryClient();
@ -76,7 +78,13 @@ export default function ChannelDiscovery({
filter: { kind: "text", get: (c) => `${c.title ?? ""} ${c.handle ?? ""}` },
cardPrimary: true,
render: (c) => (
<ChannelLink id={c.id} title={c.title} handle={c.handle} thumbnailUrl={c.thumbnail_url} />
<ChannelLink
id={c.id}
title={c.title}
handle={c.handle}
thumbnailUrl={c.thumbnail_url}
onView={() => onViewChannel(c.id, c.title ?? c.id)}
/>
),
},
subsColumn<DiscoveredChannel>(t),