feat: finish the homepage plugin, move service links and canvas out of core (B19)

plugins/homepage/src/frontend/use-page-visible-interval.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from "react";
+
+function isDocumentVisible(): boolean {
+  if (typeof document === "undefined") return true;
+  return document.visibilityState !== "hidden";
+}
+
+type Options = {
+  /** Run callback once when the effect mounts (if visible). Default true. */
+  runOnMount?: boolean;
+};
+
+/**
+ * Runs `callback` on `intervalMs` while the page is visible.
+ * Pauses when the tab is backgrounded; fires once on resume.
+ */
+export function usePageVisibleInterval(
+  callback: () => void,
+  intervalMs: number,
+  enabled = true,
+  options: Options = {},
+): void {
+  const { runOnMount = true } = options;
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  useEffect(() => {
+    if (!enabled || intervalMs <= 0) return;
+
+    let intervalId: ReturnType<typeof setInterval> | null = null;
+
+    const tick = () => {
+      callbackRef.current();
+    };
+
+    const start = () => {
+      if (intervalId !== null) return;
+      intervalId = setInterval(tick, intervalMs);
+    };
+
+    const stop = () => {
+      if (intervalId === null) return;
+      clearInterval(intervalId);
+      intervalId = null;
+    };
+
+    const onVisibility = () => {
+      if (isDocumentVisible()) {
+        tick();
+        start();
+      } else {
+        stop();
+      }
+    };
+
+    if (isDocumentVisible()) {
+      if (runOnMount) tick();
+      start();
+    }
+
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [intervalMs, enabled, runOnMount]);
+}