refactor(channels): share one ChannelLink + channelYouTubeUrl helper

The "avatar + name + open-on-YouTube" cell and the @handle-or-/channel/<id>
URL were copy-pasted across the channel manager, the discovery tab, the
subscribe notice and the player. Extract a single ChannelLink component
(optional in-app onView, middle-click opens YouTube) and a channelYouTubeUrl
helper, and route all four through them. Removes the NameCell / DiscoveryNameCell
duplication (the latter introduced with the discovery tab).

frontend/src/components/Channels.tsx

@@ -5,7 +5,6 @@ import {
   ArrowDown,
   ArrowUp,
   Check,
-  ExternalLink,
   Eye,
   EyeOff,
   History,
@@ -18,8 +17,8 @@ import { api, HttpError, type ManagedChannel, type Tag } from "../lib/api";
 import { formatEta, formatViews, relativeTime } from "../lib/format";
 import { notify } from "../lib/notifications";
 import Tooltip from "./Tooltip";
-import Avatar from "./Avatar";
 import DataTable, { type Column } from "./DataTable";
+import ChannelLink from "./ChannelLink";
 import ChannelDiscovery from "./ChannelDiscovery";
 import TagManager from "./TagManager";
 import { useConfirm } from "./ConfirmProvider";
@@ -242,7 +241,15 @@ export default function Channels({
       sortValue: (c) => (c.title ?? c.id).toLowerCase(),
       filter: { kind: "text", get: (c) => `${c.title ?? ""} ${c.handle ?? ""}` },
       cardPrimary: true,
-      render: (c) => <NameCell c={c} onView={() => onView(c)} />,
+      render: (c) => (
+        <ChannelLink
+          id={c.id}
+          title={c.title}
+          handle={c.handle}
+          thumbnailUrl={c.thumbnail_url}
+          onView={() => onView(c)}
+        />
+      ),
     },
     {
       key: "stored",
@@ -567,45 +574,6 @@ function PriorityCell({ c, onPriority }: { c: ManagedChannel; onPriority: (delta
   );
 }
 
-function NameCell({ c, onView }: { c: ManagedChannel; onView: () => void }) {
-  const { t } = useTranslation();
-  const ytUrl = c.handle
-    ? `https://www.youtube.com/@${c.handle.replace(/^@/, "")}`
-    : `https://www.youtube.com/channel/${c.id}`;
-  return (
-    <div className="flex items-center gap-2 min-w-0">
-      <Avatar src={c.thumbnail_url} fallback={c.title ?? ""} className="w-8 h-8 rounded-full shrink-0" />
-      <button
-        onClick={onView}
-        onAuxClick={(e) => {
-          // Middle-click opens the channel's YouTube page in a new tab; left-click
-          // keeps opening the in-app channel detail.
-          if (e.button === 1) {
-            e.preventDefault();
-            window.open(ytUrl, "_blank", "noopener,noreferrer");
-          }
-        }}
-        onMouseDown={(e) => {
-          if (e.button === 1) e.preventDefault(); // suppress middle-click autoscroll
-        }}
-        className="text-sm font-medium truncate hover:text-accent text-left min-w-0"
-      >
-        {c.title ?? c.id}
-      </button>
-      <Tooltip hint={t("channels.row.openOnYouTube")}>
-        <a
-          href={ytUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-muted hover:text-accent shrink-0"
-          aria-label={t("channels.row.openOnYouTube")}
-        >
-          <ExternalLink className="w-3.5 h-3.5" />
-        </a>
-      </Tooltip>
-    </div>
-  );
-}
 
 // Status only — the backfill *action* lives in the Actions column. When both recent and
 // full history are in, collapse to a single "fully synced" chip; otherwise show what's