Add popular fetch progress to Downloads page

- Track active background tasks in an in-memory dict with a lock
- Expose GET /api/channels/tasks returning running task list
- _fetch_popular_task updates done count as each video fetch completes
- Downloads page polls /tasks every 2s and shows progress bars

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/api/index.js

@@ -64,6 +64,7 @@ export const renameChannelGroup = (id, name) => api.patch(`/channels/groups/${id
 export const addChannelToGroup = (groupId, channelId) => api.post(`/channels/groups/${groupId}/channels/${channelId}`);
 export const removeChannelFromGroup = (groupId, channelId) => api.delete(`/channels/groups/${groupId}/channels/${channelId}`);
 export const bulkChannelAction = (channel_ids, action) => api.post("/channels/bulk-action", { channel_ids, action });
+export const getActiveTasks = () => api.get("/channels/tasks");
 
 // Videos
 export const homeFeed = (page = 0, limit = 25, mode = "ranked", duration = "") =>

frontend/src/pages/Downloads.jsx

@@ -1,7 +1,7 @@
 import { useState, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { getDownloads, deleteDownload, deleteAllDownloads, restoreDownload } from "../api";
+import { getDownloads, deleteDownload, deleteAllDownloads, restoreDownload, getActiveTasks } from "../api";
 import SortPicker from "../components/SortPicker";
 
 const HISTORY_SORTS = [
@@ -66,6 +66,12 @@ export default function DownloadsPage() {
     },
   });
 
+  const { data: activeTasks = [] } = useQuery({
+    queryKey: ["active-tasks"],
+    queryFn: () => getActiveTasks().then((r) => r.data),
+    refetchInterval: (query) => (query.state.data?.length > 0 ? 2000 : 5000),
+  });
+
   const clearAllMut = useMutation({
     mutationFn: deleteAllDownloads,
     onSuccess: () => {
@@ -127,6 +133,26 @@ export default function DownloadsPage() {
         )}
       </div>
 
+      {activeTasks.length > 0 && (
+        <section>
+          <h2 className="font-display font-semibold text-base text-zinc-400 mb-3">Background Tasks</h2>
+          <div className="flex flex-col gap-3">
+            {activeTasks.map((task) => {
+              const pct = task.total > 0 ? (task.done / task.total) * 100 : 0;
+              return (
+                <div key={task.id} className="bg-zinc-900 rounded-xl p-4">
+                  <div className="flex items-center justify-between mb-1">
+                    <p className="text-sm font-medium text-zinc-100">{task.label}</p>
+                    <span className="text-xs text-zinc-400 tabular-nums">{task.done}/{task.total}</span>
+                  </div>
+                  <ProgressBar pct={pct} />
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
       {active.length > 0 && (
         <section>
           <h2 className="font-display font-semibold text-base text-zinc-400 mb-3">Active</h2>