fix(header): show per-user sync status instead of the global catalog
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:
parent
930381f2d4
commit
6d2f84f791
2 changed files with 14 additions and 9 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue