Merge: per-user header sync status

frontend/src/components/Header.tsx

@@ -36,7 +36,7 @@ export default function Header({
         Sift<span className="text-accent">lode</span>
       </button>
 
-      <SyncStatus />
+      <SyncStatus isAdmin={me.role === "admin"} />
 
       {page === "feed" ? (
         <div className="flex-1 max-w-xl mx-auto relative">

frontend/src/components/SyncStatus.tsx

@@ -3,38 +3,43 @@ import { Database, Loader2, Pause, Play } from "lucide-react";
 import { api } from "../lib/api";
 import { formatViews } from "../lib/format";
 
-export default function SyncStatus() {
+// Per-user status (not the global catalog): shows the number of videos available to *this*
+// user and how many of *their* channels are still being fetched. The pause control is
+// admin-only (it pauses the shared background sync).
+export default function SyncStatus({ isAdmin }: { isAdmin: boolean }) {
   const qc = useQueryClient();
   const { data } = useQuery({
-    queryKey: ["sync-status"],
+    queryKey: ["my-status"],
-    queryFn: api.status,
+    queryFn: api.myStatus,
     refetchInterval: 30_000,
     staleTime: 25_000,
   });
 
   const toggle = useMutation({
     mutationFn: () => (data?.paused ? api.resumeSync() : api.pauseSync()),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["sync-status"] }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ["my-status"] }),
   });
 
   if (!data) return null;
 
+  const syncing = data.channels_recent_pending;
+
   return (
     <div className="hidden lg:flex items-center gap-2 text-xs text-muted">
       <Database className="w-3.5 h-3.5" />
-      <span>{formatViews(data.videos_total)} videos</span>
+      <span>{formatViews(data.my_videos)} videos</span>
       <span className="opacity-40">·</span>
       {data.paused ? (
         <span className="text-accent font-medium">paused</span>
-      ) : data.channels_backfilling > 0 ? (
+      ) : syncing > 0 ? (
         <span className="flex items-center gap-1">
           <Loader2 className="w-3.5 h-3.5 animate-spin" />
-          {data.channels_backfilling} syncing
+          {syncing} syncing
         </span>
       ) : (
         <span>all synced</span>
       )}
-      {data.is_admin && (
+      {isAdmin && (
         <button
           onClick={() => toggle.mutate()}
           disabled={toggle.isPending}