peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(header): show per-user sync status instead of the global catalog

Browse source 
The header status bar read the global /api/sync/status (videos_total +
channels_backfilling), so every user saw the whole catalog's numbers —
confusing and a small cross-user info leak (e.g. "3 syncing" for a user with 2
channels). It now uses /api/sync/my-status: the user's own available video count
and how many of their own channels are still being fetched
(channels_recent_pending). The pause control stays admin-only via an isAdmin prop.
This commit is contained in:
npeter83 2026-06-14 06:55:18 +02:00
parent 9683d8aeb6
commit e299287a5e
2 changed files with 14 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/Header.tsx
View file

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

21
frontend/src/components/SyncStatus.tsx
View file

@ -3,38 +3,43 @@ import { Database, Loader2, Pause, Play } from "lucide-react";
import { api } from "../lib/api"; import { api } from "../lib/api";
import { formatViews } from "../lib/format"; 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 qc = useQueryClient();
const { data } = useQuery({ const { data } = useQuery({
queryKey: ["sync-status"], queryKey: ["my-status"],
queryFn: api.status, queryFn: api.myStatus,
refetchInterval: 30_000, refetchInterval: 30_000,
staleTime: 25_000, staleTime: 25_000,
}); });
const toggle = useMutation({ const toggle = useMutation({
mutationFn: () => (data?.paused ? api.resumeSync() : api.pauseSync()), mutationFn: () => (data?.paused ? api.resumeSync() : api.pauseSync()),
onSuccess: () => qc.invalidateQueries({ queryKey: ["sync-status"] }), onSuccess: () => qc.invalidateQueries({ queryKey: ["my-status"] }),
}); });
if (!data) return null; if (!data) return null;
const syncing = data.channels_recent_pending;
return ( return (
<div className="hidden lg:flex items-center gap-2 text-xs text-muted"> <div className="hidden lg:flex items-center gap-2 text-xs text-muted">
<Database className="w-3.5 h-3.5" /> <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> <span className="opacity-40">·</span>
{data.paused ? ( {data.paused ? (
<span className="text-accent font-medium">paused</span> <span className="text-accent font-medium">paused</span>
) : data.channels_backfilling > 0 ? ( ) : syncing > 0 ? (
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Loader2 className="w-3.5 h-3.5 animate-spin" /> <Loader2 className="w-3.5 h-3.5 animate-spin" />
{data.channels_backfilling} syncing {syncing} syncing
</span> </span>
) : ( ) : (
<span>all synced</span> <span>all synced</span>
)} )}
{data.is_admin && ( {isAdmin && (
<button <button
onClick={() => toggle.mutate()} onClick={() => toggle.mutate()}
disabled={toggle.isPending} disabled={toggle.isPending}