improvement(channel): bring the actions to the tabs, list every channel

Channel page: the actions sat in the header's top-right corner, a page-width
mouse trip from anything else you'd click. There are only ever two tabs, so
they ride the tab row now, right next to About.

Channel picker: drop the 50-row cap — 320 plain buttons cost nothing to render
(the feed virtualises thousands), so the whole list scrolls in the same box. The
cap was caution, not a measurement. The box gets the app's usual edge-fade to
hint at more, and a line saying "Priority first, then A-Z" — the backend orders
by `priority DESC, lower(title)`, which reads as random to anyone who hasn't set
a priority.

frontend/src/components/ChannelPage.tsx

@@ -284,7 +284,26 @@ export default function ChannelPage({
               ))}
             </div>
           </div>
-          <div className="flex items-center gap-2 shrink-0 pb-1">
+        </div>
+
+        {exploring && (
+          <div className="flex items-center gap-2 text-xs text-muted mt-2">
+            <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            {t("channel.loadingVideos")}
+          </div>
+        )}
+
+        {/* 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">
             <a
               href={ytUrl}
               target="_blank"
@@ -344,23 +363,6 @@ export default function ChannelPage({
               ))}
           </div>
         </div>
-
-        {exploring && (
-          <div className="flex items-center gap-2 text-xs text-muted mt-2">
-            <Loader2 className="w-3.5 h-3.5 animate-spin" />
-            {t("channel.loadingVideos")}
-          </div>
-        )}
-
-        {/* Tabs */}
-        <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>
       </div>
 
       {/* Tab content */}