diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 99e4eda..bdce358 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -36,7 +36,7 @@ export default function Header({ Siftlode - + {page === "feed" ? (
diff --git a/frontend/src/components/SyncStatus.tsx b/frontend/src/components/SyncStatus.tsx index b79fb7b..88c4288 100644 --- a/frontend/src/components/SyncStatus.tsx +++ b/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"], - queryFn: api.status, + queryKey: ["my-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 (
- {formatViews(data.videos_total)} videos + {formatViews(data.my_videos)} videos ยท {data.paused ? ( paused - ) : data.channels_backfilling > 0 ? ( + ) : syncing > 0 ? ( - {data.channels_backfilling} syncing + {syncing} syncing ) : ( all synced )} - {data.is_admin && ( + {isAdmin && (