feat: jump to a channel by name, and queue the whole channel

A video's channel name under the thumbnail is now a link — click it in
either list or tile view and the feed narrows to that channel. It
clears the search box on the way, so arriving at a channel shows the
channel rather than whatever you had been searching for.

On a channel page, an icon button to the right of Local queues every
video listed there. The backend already runs two downloads at a time
and parks the rest, so the whole channel goes into the queue at once
and comes down in order. The button is only there when there is
something left to fetch, and a video that fails reports it on its own
row rather than raising a dialog per failure.

Cancelling a queued download now actually cancels it. Before, a video
waiting for a slot ignored the cancel and started anyway once its turn
came — barely reachable with one-at-a-time downloading, unmissable
when a whole channel is queued. A download re-reads its own state
after claiming a slot and stands down if it is no longer wanted.

src/components/TopBar.tsx

@@ -21,6 +21,9 @@ interface Props {
   onShowSidebar: () => void;
   /** Present only when there is something to delete. */
   onDeleteAll?: () => void;
+  /** Present only on a channel page with videos still to fetch. */
+  onDownloadAll?: () => void;
+  downloadAllCount?: number;
   /** Matches the sidebar's inset so the two headers share a baseline. */
   titleBarInset: boolean;
 }
@@ -58,7 +61,8 @@ export default function TopBar({
   search, onSearch, downloadedOnly, onDownloadedOnly,
   online, reachable, forcedOffline, onToggleForcedOffline,
   onRefresh, refreshing, refreshProgress, resultCount, view, onView,
-  sidebarHidden, onShowSidebar, onDeleteAll, titleBarInset,
+  sidebarHidden, onShowSidebar, onDeleteAll, onDownloadAll, downloadAllCount = 0,
+  titleBarInset,
 }: Props) {
   const pct = refreshProgress && refreshProgress.total > 0
     ? (refreshProgress.done / refreshProgress.total) * 100
@@ -105,6 +109,26 @@ export default function TopBar({
           Local
         </Toggle>
 
+        {onDownloadAll && (
+          <button
+            onClick={onDownloadAll}
+            title={`Download all ${downloadAllCount} video${
+              downloadAllCount === 1 ? "" : "s"
+            } listed here, one after another`}
+            aria-label="Download all listed videos"
+            className={`${ICON_BTN} border border-slate-300 text-slate-500 hover:border-sky-500
+                        hover:text-sky-600 dark:border-slate-700 dark:text-slate-400
+                        dark:hover:border-sky-500 dark:hover:text-sky-400`}
+          >
+            <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor"
+              strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 3v10.5" />
+              <path d="M7.5 9.5L12 14l4.5-4.5" />
+              <path d="M4 17.5v1A2.5 2.5 0 006.5 21h11a2.5 2.5 0 002.5-2.5v-1" />
+            </svg>
+          </button>
+        )}
+
         {downloadedOnly && onDeleteAll && (
           <button
             onClick={onDeleteAll}

src/components/VideoRow.tsx

@@ -4,19 +4,22 @@ import type { FeedItem } from "../types";
 import DownloadButton from "./DownloadButton";
 import WatchBar from "./WatchBar";
 import { clockDuration, compactViews, relativeTime } from "./format";
+import { CHANNEL_LINK } from "./ui";
 
 interface Props {
   item: FeedItem;
   live?: LiveDownload;
   online: boolean;
   onOpen: () => void;
+  /** Jump to this video's channel. */
+  onOpenChannel: () => void;
   onDownload: () => void;
   onCancel: () => void;
   onDelete: () => void;
 }
 
 export default function VideoRow({
-  item, live, online, onOpen, onDownload, onCancel, onDelete,
+  item, live, online, onOpen, onOpenChannel, onDownload, onCancel, onDelete,
 }: Props) {
   const downloaded = (live?.state ?? item.state) === "done";
   const src = thumbSrc(item, online);
@@ -70,9 +73,13 @@ export default function VideoRow({
         <button onClick={onOpen} className="w-full cursor-pointer text-left">
           <h3 className="line-clamp-2 text-[13px] font-medium leading-snug">{item.title}</h3>
         </button>
-        <div className="mt-1 truncate text-[12px] text-slate-500 dark:text-slate-400">
+        <button
+          onClick={onOpenChannel}
+          title={`Show only ${item.channel_title}`}
+          className={CHANNEL_LINK + " mt-1"}
+        >
           {item.channel_title}
-        </div>
+        </button>
         <div className="mt-0.5 text-[11px] text-slate-400 dark:text-slate-500">
           {[compactViews(item.views), relativeTime(item.published)].filter(Boolean).join(" · ")}
         </div>

src/components/VideoTile.tsx

@@ -4,12 +4,15 @@ import type { FeedItem } from "../types";
 import DownloadButton from "./DownloadButton";
 import WatchBar from "./WatchBar";
 import { clockDuration, compactViews, relativeTime } from "./format";
+import { CHANNEL_LINK } from "./ui";
 
 interface Props {
   item: FeedItem;
   live?: LiveDownload;
   online: boolean;
   onOpen: () => void;
+  /** Jump to this video's channel. */
+  onOpenChannel: () => void;
   onDownload: () => void;
   onCancel: () => void;
   onDelete: () => void;
@@ -17,7 +20,7 @@ interface Props {
 
 /** Grid cell: thumbnail on top, metadata beneath — the familiar YouTube shape. */
 export default function VideoTile({
-  item, live, online, onOpen, onDownload, onCancel, onDelete,
+  item, live, online, onOpen, onOpenChannel, onDownload, onCancel, onDelete,
 }: Props) {
   const downloaded = (live?.state ?? item.state) === "done";
   const src = thumbSrc(item, online);
@@ -74,12 +77,13 @@ export default function VideoTile({
             {item.title}
           </h3>
         </button>
-        <div
-          className="mt-1 h-4 truncate text-[12px] leading-4 text-slate-500 dark:text-slate-400"
-          title={item.channel_title}
+        <button
+          onClick={onOpenChannel}
+          title={`Show only ${item.channel_title}`}
+          className={CHANNEL_LINK + " mt-1 h-4 leading-4"}
         >
           {item.channel_title}
-        </div>
+        </button>
         <div className="mt-0.5 h-4 truncate text-[11px] leading-4 text-slate-400 dark:text-slate-500">
           {[compactViews(item.views), relativeTime(item.published)].filter(Boolean).join(" · ")}
         </div>

src/components/ui.tsx

@@ -145,6 +145,11 @@ export function Toast({ message }: { message: string | null }) {
   );
 }
 
+/** A channel name that takes you to its channel. Quiet until hovered. */
+export const CHANNEL_LINK =
+  "block w-full cursor-pointer truncate text-left text-[12px] text-slate-500 " +
+  "transition-colors hover:text-sky-600 dark:text-slate-400 dark:hover:text-sky-400";
+
 /** States a fact in passing — a quality, a status. Never a control. */
 export function Badge({
   children,