feat(sync-ui): add live progress + disable Sync Now until background sync completes

Author: marcus

src/components/sync-button.tsx

@@ -3,23 +3,34 @@
 import { Button } from "@/components/ui/button";
 import { useSyncMutation } from "@/lib/api/hooks";
 import { useAppToast } from "@/components/providers";
-import { startSyncWatch } from "@/lib/sync-watch";
+import { isSyncWatchActive, startSyncWatch } from "@/lib/sync-watch";
 import { RefreshCw } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export function SyncButton() {
   const router = useRouter();
   const { pushToast } = useAppToast();
   const syncMutation = useSyncMutation();
   const [state, setState] = useState<"idle" | "queueing" | "queued" | "failed">("idle");
+  const [watchActive, setWatchActive] = useState(false);
+
+  useEffect(() => {
+    setWatchActive(isSyncWatchActive());
+    const timer = setInterval(() => {
+      setWatchActive(isSyncWatchActive());
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
 
   async function trigger() {
+    if (watchActive || state === "queueing") return;
     setState("queueing");
     try {
       await syncMutation.mutateAsync();
       setState("queued");
       startSyncWatch();
+      setWatchActive(true);
       pushToast(
         {
           title: "Sync queued",
@@ -34,11 +45,19 @@ export function SyncButton() {
     }
   }
 
-  const label = state === "idle" ? "Sync now" : state === "queueing" ? "Syncing..." : state === "queued" ? "Queued" : "Failed";
+  const isBusy = state === "queueing" || watchActive;
+  const label =
+    isBusy
+      ? "Syncing..."
+      : state === "idle"
+        ? "Sync now"
+        : state === "queued"
+          ? "Queued"
+          : "Failed";
 
   return (
-    <Button onClick={trigger} disabled={state === "queueing"} className="gap-2" size={"lg"}>
-      <RefreshCw className={state === "queueing" ? "size-4 animate-spin" : "size-4"}/>
+    <Button onClick={trigger} disabled={isBusy} className="gap-2" size={"lg"}>
+      <RefreshCw className={isBusy ? "size-4 animate-spin" : "size-4"} />
       {label}
     </Button>
   );