JakeBreath
487d14c617
Jobs already run on the server — leaving the page or closing the tab does not stop them — but the SPA lost its link to them because the task id lived in component state. The online detail page now looks up the newest task for the post: an active one resumes the progress bar and cancel button, and a finished one shows "your last download for this post finished — J-xx". The downloads list accepts a post_id filter for that lookup. The footer's Active Workers count is also a link to the staff stats dashboard, which is the global view of running jobs.
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { Folder, Zap } from "lucide-react";
|
|
import { Link } from "react-router-dom";
|
|
|
|
import type { SystemStatus } from "@/lib/types";
|
|
|
|
export function StatusFooter({
|
|
status,
|
|
staff,
|
|
}: {
|
|
status?: SystemStatus;
|
|
staff?: boolean;
|
|
}) {
|
|
const workers = (
|
|
<>
|
|
<Zap className="h-3 w-3" />
|
|
<span>
|
|
Active Workers:{" "}
|
|
{status
|
|
? `${status.workers.active} running | ${status.workers.queued} pending`
|
|
: "…"}
|
|
</span>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<footer className="fixed inset-x-0 bottom-0 z-30 border-t border-ctp-surface0 bg-ctp-crust">
|
|
<div className="mx-auto flex h-8 w-full max-w-[1600px] items-center gap-4 px-4 font-mono text-[11px] text-ctp-overlay0">
|
|
<span
|
|
className="flex min-w-0 items-center gap-1.5"
|
|
title={status?.watched_folder ?? ""}
|
|
>
|
|
<Folder className="h-3 w-3 shrink-0" />
|
|
<span className="hidden shrink-0 sm:inline">Local Storage:</span>
|
|
<span className="truncate">{status?.watched_folder ?? "…"}</span>
|
|
</span>
|
|
|
|
{staff ? (
|
|
<Link
|
|
to="/stats"
|
|
className="ml-auto hidden shrink-0 items-center gap-1.5 transition hover:text-ctp-text md:flex"
|
|
title="Open the stats dashboard"
|
|
>
|
|
{workers}
|
|
</Link>
|
|
) : (
|
|
<span
|
|
className="ml-auto hidden shrink-0 items-center gap-1.5 md:flex"
|
|
title="Active background jobs"
|
|
>
|
|
{workers}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|