refactor(managers): full About overlay + center the wider channel content (E4 S2 follow-up)

- The About overlay now shows the FULL channel About (description, external links,
  country, language, topics, keywords) — the same content as the detail page's About
  tab, via a new shared ChannelAboutContent component (reused by ChannelPage + AboutCell)
- AboutCell fetches the channel detail ON DEMAND on hover (shared [channel,id] react-query
  cache with the channel page), so the list stays light; the overlay is interactive
  (scrollable + clickable links) via a small hover-bridge, and closes on page scroll/resize
- Center the content: max-w-7xl -> max-w-[96rem] on the channel tables + header, so the
  wider About table stays symmetric with the header (mx-auto handles the responsive centering)
- Topic chips are display-only for now; the future search epic makes them clickable

frontend/src/components/ChannelPage.tsx

@@ -5,6 +5,7 @@ import { useNavigationActions } from "./NavigationProvider";
 import { ArrowLeft, Ban, Check, ExternalLink, Loader2, Plus, RefreshCw, SlidersHorizontal } from "lucide-react";
 import Avatar from "./Avatar";
 import Feed from "./Feed";
+import ChannelAboutContent from "./ChannelAbout";
 import { PageToolbar, PageToolbarSlot } from "./PageShell";
 import { useFeedFilters } from "./FeedFiltersProvider";
 import { useConfirm } from "./ConfirmProvider";
@@ -14,39 +15,6 @@ import { api, type FeedFilters, type Me } from "../lib/api";
 import type { FeedView } from "../lib/feedView";
 import { channelYouTubeUrl, formatViews } from "../lib/format";
 
-// --- About-tab metadata helpers ---
-// ISO 3166-1 alpha-2 code → 🇺🇸 regional-indicator flag emoji.
-function countryFlag(code: string): string {
-  if (!/^[A-Za-z]{2}$/.test(code)) return "";
-  return String.fromCodePoint(...[...code.toUpperCase()].map((c) => 0x1f1e6 + c.charCodeAt(0) - 65));
-}
-function displayName(code: string, lang: string, type: "region" | "language"): string {
-  try {
-    return new Intl.DisplayNames([lang], { type }).of(type === "region" ? code.toUpperCase() : code) ?? code;
-  } catch {
-    return code;
-  }
-}
-// YouTube keywords are ONE space-separated string with multi-word tags quoted: gaming "let's play".
-function parseKeywords(s: string): string[] {
-  return (s.match(/"[^"]+"|\S+/g) ?? []).map((k) => k.replace(/^"|"$/g, "")).filter(Boolean);
-}
-// topicCategories are Wikipedia URLs (…/wiki/Music) → a readable label, de-duplicated.
-function topicLabels(urls: string[]): string[] {
-  const seen = new Set<string>();
-  for (const url of urls) {
-    const seg = url.split("/wiki/")[1] ?? url.split("/").pop() ?? url;
-    let label = seg;
-    try {
-      label = decodeURIComponent(seg);
-    } catch {
-      /* keep raw */
-    }
-    label = label.replace(/_/g, " ").trim();
-    if (label) seen.add(label);
-  }
-  return [...seen];
-}
 
 // A dedicated channel page: an "About"-style header (banner, avatar, stats, subscribe) over the
 // channel's videos (the catalog filtered to this channel). For an un-subscribed channel it
@@ -209,10 +177,6 @@ export default function ChannelPage({
     ch?.total_view_count != null ? t("channel.totalViews", { formatted: formatViews(ch.total_view_count) }) : null,
     joined ? t("channel.joined", { date: joined }) : null,
   ].filter(Boolean) as string[];
-  const topics = ch?.topic_categories?.length ? topicLabels(ch.topic_categories) : [];
-  const keywords = ch?.keywords ? parseKeywords(ch.keywords) : [];
-  const hasAboutDetails =
-    !!ch?.country || !!ch?.default_language || topics.length > 0 || keywords.length > 0;
   const tabClass = (active: boolean) =>
     active
       ? "pb-2 text-sm font-medium border-b-2 border-fg text-fg"
@@ -422,69 +386,11 @@ export default function ChannelPage({
         </>
       ) : (
         <div className="px-4 sm:px-6 py-4 max-w-3xl">
-          {ch?.description ? (
-            <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">{ch.description}</p>
+          {ch ? (
+            <ChannelAboutContent ch={ch} />
           ) : (
             <p className="text-sm text-muted">{t("channel.noDescription")}</p>
           )}
-          {ch?.external_links && ch.external_links.length > 0 && (
-            <div className="mt-4 flex flex-wrap gap-2">
-              {ch.external_links.map((l, i) => (
-                <a
-                  key={i}
-                  href={l.url}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="inline-flex items-center gap-1.5 text-sm text-accent hover:underline"
-                >
-                  <ExternalLink className="w-3.5 h-3.5" />
-                  {l.title || l.url}
-                </a>
-              ))}
-            </div>
-          )}
-          {hasAboutDetails && (
-            <div className="mt-5 space-y-2.5 text-sm border-t border-border pt-4">
-              {ch?.country && (
-                <div className="flex gap-2">
-                  <span className="text-muted w-24 shrink-0">{t("channel.country")}</span>
-                  <span>
-                    {countryFlag(ch.country)} {displayName(ch.country, i18n.language, "region")}
-                  </span>
-                </div>
-              )}
-              {ch?.default_language && (
-                <div className="flex gap-2">
-                  <span className="text-muted w-24 shrink-0">{t("channel.language")}</span>
-                  <span>{displayName(ch.default_language, i18n.language, "language")}</span>
-                </div>
-              )}
-              {topics.length > 0 && (
-                <div className="flex gap-2">
-                  <span className="text-muted w-24 shrink-0 pt-0.5">{t("channel.topics")}</span>
-                  <div className="flex flex-wrap gap-1.5">
-                    {topics.map((tp) => (
-                      <span key={tp} className="glass-card px-2 py-0.5 rounded-full text-xs">
-                        {tp}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-              {keywords.length > 0 && (
-                <div className="flex gap-2">
-                  <span className="text-muted w-24 shrink-0 pt-0.5">{t("channel.keywords")}</span>
-                  <div className="flex flex-wrap gap-1.5">
-                    {keywords.map((kw, i) => (
-                      <span key={i} className="glass-card px-2 py-0.5 rounded-full text-xs">
-                        {kw}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
         </div>
       )}
       </PageToolbarSlot.Provider>