feat(import): run catalog synchronizations as durable jobs

src/components/admin/studio/furniture-sync-queue.tsx

@@ -0,0 +1,73 @@
+"use client";
+import { useTranslations } from "next-intl";
+import { useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { adminFetch } from "@/lib/admin-fetch";
+import { FurnitureJobHistory } from "./furniture-jobs";
+import { useFurnitureJobs } from "./use-furniture-jobs";
+
+export function FurnitureSyncQueue({ kind }: { kind: "official" | "clone" }) {
+	const t = useTranslations("pages.admin.syncQueue");
+	const history = useFurnitureJobs(() => {}, true);
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState("");
+	const [queued, setQueued] = useState(false);
+	const requestId = useRef<string | null>(null);
+	const submitting = useRef(false);
+	async function start() {
+		if (submitting.current) return;
+		submitting.current = true;
+		setBusy(true);
+		setError("");
+		setQueued(false);
+		// Keep the ID after an uncertain response, including a browser reload.
+		const key = `furniture-sync-request:${kind}`;
+		try {
+			if (!requestId.current) {
+				try {
+					requestId.current = sessionStorage.getItem(key);
+				} catch {}
+				requestId.current ||= crypto.randomUUID();
+			}
+			try {
+				sessionStorage.setItem(key, requestId.current);
+			} catch {}
+			const response = await adminFetch(`/api/admin/import/${kind}/sync-all`, {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ id: requestId.current }),
+			});
+			const result = await response.json().catch(() => ({}));
+			if (response.status >= 400 && response.status < 500) {
+				requestId.current = null;
+				try {
+					sessionStorage.removeItem(key);
+				} catch {}
+			}
+			if (!response.ok) throw Error(result.error || t("failed"));
+			if (result.job?.id !== requestId.current) throw Error(t("failed"));
+			try {
+				sessionStorage.removeItem(key);
+			} catch {}
+			requestId.current = null;
+			setQueued(true);
+			await history.refresh();
+		} catch (error) {
+			setError(error instanceof Error ? error.message : t("failed"));
+		} finally {
+			submitting.current = false;
+			setBusy(false);
+		}
+	}
+	return (
+		<div className="space-y-4">
+			<p className="text-sm text-muted-foreground">{t("description")}</p>
+			<Button disabled={busy} onClick={() => void start()}>
+				{busy ? t("preparing") : t("start")}
+			</Button>
+			{error && <p role="alert">{error}</p>}
+			{queued && <p role="status">{t("queued")}</p>}
+			<FurnitureJobHistory state={history} expanded />
+		</div>
+	);
+}