From 9fdf27442219d8966d3bc385429f6881cb071a90 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Sat, 15 Aug 2026 01:17:46 +0200
Subject: [PATCH] refactor(ui): ChannelPage Videos/About tabs -> shared Tabs
 (R13 S2c)

The channel page's underline tab pair was the last hand-rolled tab idiom on a
swept surface. It now uses the shared <Tabs> (rounded-lg pill, active accent
shadow) like every other tab-set, sitting inline with the channel action
buttons on the same separator row. Drops the bespoke tabClass helper. Only the
NavSidebar icon rail (aria-current, icon-only app nav) stays a distinct idiom.
Self-E2E'd: Videos/About switch, content flips. gate green (tsc/eslint-0/
prettier). Branch not merged.
---
 frontend/src/components/ChannelPage.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/ChannelPage.tsx b/frontend/src/components/ChannelPage.tsx
index 318518b7..8cca3732 100644
--- a/frontend/src/components/ChannelPage.tsx
+++ b/frontend/src/components/ChannelPage.tsx
@@ -17,6 +17,7 @@ import {
   SlidersHorizontal,
 } from "lucide-react";
 import Avatar from "./Avatar";
+import Tabs from "./Tabs";
 import Feed from "./Feed";
 import ChannelAboutContent from "./ChannelAbout";
 import { PageToolbar, PageToolbarSlot } from "./PageShell";
@@ -265,11 +266,6 @@ export default function ChannelPage({
       : null,
     joined ? t("channel.joined", { date: joined }) : null,
   ].filter(Boolean) as string[];
-  const tabClass = (active: boolean) =>
-    active
-      ? "pb-2 text-sm font-medium border-b-2 border-fg text-fg"
-      : "pb-2 text-sm text-muted hover:text-fg border-b-2 border-transparent";
-
   // The channel page owns no scroller of its own (PageShell provides the one app scroller). Its
   // whole chrome is fixed — wrapped in <PageToolbar> it portals into the shell's fixed band, so the
   // banner/identity/tabs/toolbar stay put and only the video grid scrolls.
@@ -370,14 +366,17 @@ export default function ChannelPage({
           {/* Tabs — the channel actions ride along here rather than off in the header's top-right
             corner: there are only ever two tabs, so there's room, and it keeps the things you click
             within a few pixels of each other instead of across the page. */}
-          <div className="flex items-center gap-4 mt-3 border-b border-border">
-            <button onClick={() => setTab("videos")} className={tabClass(tab === "videos")}>
-              {t("channel.tabVideos")}
-            </button>
-            <button onClick={() => setTab("about")} className={tabClass(tab === "about")}>
-              {t("channel.tabAbout")}
-            </button>
-            <div className="ml-2 flex items-center gap-2 pb-1.5">
+          <div className="flex items-center gap-2 mt-3 border-b border-border pb-2">
+            <Tabs
+              className="flex gap-1"
+              active={tab}
+              onChange={(id) => setTab(id as "videos" | "about")}
+              tabs={[
+                { id: "videos", label: t("channel.tabVideos") },
+                { id: "about", label: t("channel.tabAbout") },
+              ]}
+            />
+            <div className="ml-2 flex items-center gap-2">
               <a
                 href={ytUrl}
                 target="_blank"