@agent-native/core 0.87.0 → 0.90.1

package/corpus/templates/calendar/app/hooks/use-grid-create-drag.ts

@@ -0,0 +1,254 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+
+export const CREATE_DRAG_SNAP_MINUTES = 15;
+
+interface CreateDragState {
+  /** Day/column index the drag started in (week view cross-day drags are not supported — stays put) */
+  dayIndex: number;
+  /** Pointer Y relative to grid top at drag start */
+  startPointerY: number;
+  /** Snapped minutes (from grid start hour) at the current pointer position */
+  startMinutes: number;
+  /** Snapped minutes (from grid start hour) at the current pointer position */
+  currentMinutes: number;
+  /** Whether we've moved enough to count as a drag (vs a plain click) */
+  hasMoved: boolean;
+}
+
+export interface CreateDragGhost {
+  dayIndex: number;
+  /** Top of the ghost block in px, relative to the grid */
+  top: number;
+  /** Height of the ghost block in px */
+  height: number;
+  /** Snapped range, in minutes from the grid's start hour */
+  startMinutes: number;
+  endMinutes: number;
+}
+
+export interface UseGridCreateDragOptions {
+  hourHeight: number;
+  startHour: number;
+  /** Reference to the scroll container for computing offsets */
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>;
+  /** Called when a drag (movement past the threshold) completes, with the snapped range in minutes from startHour */
+  onCreate: (
+    dayIndex: number,
+    startMinutes: number,
+    endMinutes: number,
+  ) => void;
+  /** Minutes to snap to; defaults to the same increment use-event-drag uses */
+  snapMinutes?: number;
+}
+
+/**
+ * Pointer-down-drag-up on empty grid background to draw a live ghost block
+ * and commit the dragged range on release. A plain click (no movement past
+ * the threshold) never calls onCreate — callers keep their existing
+ * fixed-duration click-to-create handler for that case.
+ */
+export function useGridCreateDrag({
+  hourHeight,
+  startHour,
+  scrollContainerRef,
+  onCreate,
+  snapMinutes = CREATE_DRAG_SNAP_MINUTES,
+}: UseGridCreateDragOptions) {
+  const [dragState, setDragState] = useState<CreateDragState | null>(null);
+  const dragStateRef = useRef<CreateDragState | null>(null);
+  /** Tracks if a create-drag just ended — used to suppress the trailing click */
+  const justCreatedRef = useRef(false);
+  const pendingMoveEventRef = useRef<PointerEvent | null>(null);
+  const rafIdRef = useRef<number | null>(null);
+
+  const getGridTop = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return 0;
+    return container.getBoundingClientRect().top;
+  }, [scrollContainerRef]);
+
+  const getScrollTop = useCallback(() => {
+    return scrollContainerRef.current?.scrollTop ?? 0;
+  }, [scrollContainerRef]);
+
+  const pxToMinutes = useCallback(
+    (px: number): number => {
+      const raw = (px / hourHeight) * 60;
+      return Math.round(raw / snapMinutes) * snapMinutes;
+    },
+    [hourHeight, snapMinutes],
+  );
+
+  const startCreateDrag = useCallback(
+    (e: React.PointerEvent, dayIndex: number) => {
+      if (e.button !== 0) return;
+      const container = scrollContainerRef.current;
+      if (!container) return;
+
+      const gridTop = getGridTop();
+      const scrollTop = getScrollTop();
+      const pointerYInGrid = e.clientY - gridTop + scrollTop;
+      const startMinutes = Math.max(0, pxToMinutes(pointerYInGrid));
+
+      const state: CreateDragState = {
+        dayIndex,
+        startPointerY: pointerYInGrid,
+        startMinutes,
+        currentMinutes: startMinutes,
+        hasMoved: false,
+      };
+
+      dragStateRef.current = state;
+      setDragState(state);
+    },
+    [scrollContainerRef, getGridTop, getScrollTop, pxToMinutes],
+  );
+
+  const computeNextDragState = useCallback(
+    (state: CreateDragState, e: PointerEvent): CreateDragState => {
+      const gridTop = getGridTop();
+      const scrollTop = getScrollTop();
+      const pointerYInGrid = e.clientY - gridTop + scrollTop;
+      const dy = pointerYInGrid - state.startPointerY;
+      const hasMoved = state.hasMoved || Math.abs(dy) > 3;
+      const currentMinutes = Math.max(0, pxToMinutes(pointerYInGrid));
+
+      return { ...state, currentMinutes, hasMoved };
+    },
+    [getGridTop, getScrollTop, pxToMinutes],
+  );
+
+  const flushPendingMove = useCallback(() => {
+    rafIdRef.current = null;
+    const pending = pendingMoveEventRef.current;
+    pendingMoveEventRef.current = null;
+    const state = dragStateRef.current;
+    if (!pending || !state) return;
+
+    const updated = computeNextDragState(state, pending);
+    dragStateRef.current = updated;
+    setDragState(updated);
+  }, [computeNextDragState]);
+
+  const onPointerMove = useCallback(
+    (e: PointerEvent) => {
+      if (!dragStateRef.current) return;
+      pendingMoveEventRef.current = e;
+      if (rafIdRef.current === null) {
+        rafIdRef.current = requestAnimationFrame(flushPendingMove);
+      }
+    },
+    [flushPendingMove],
+  );
+
+  const flushAndCancelPendingMove = useCallback(() => {
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    const pending = pendingMoveEventRef.current;
+    pendingMoveEventRef.current = null;
+    const state = dragStateRef.current;
+    if (pending && state) {
+      dragStateRef.current = computeNextDragState(state, pending);
+    }
+  }, [computeNextDragState]);
+
+  const onPointerUp = useCallback(() => {
+    flushAndCancelPendingMove();
+    const state = dragStateRef.current;
+    dragStateRef.current = null;
+    setDragState(null);
+    if (!state) return;
+
+    if (state.hasMoved) {
+      justCreatedRef.current = true;
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          justCreatedRef.current = false;
+        }, 0);
+      });
+
+      const rangeStart = Math.min(state.startMinutes, state.currentMinutes);
+      const rangeEnd = Math.max(
+        rangeStart + snapMinutes,
+        Math.max(state.startMinutes, state.currentMinutes),
+      );
+      onCreate(state.dayIndex, rangeStart, rangeEnd);
+    }
+  }, [flushAndCancelPendingMove, onCreate, snapMinutes]);
+
+  const cancelCreateDrag = useCallback(() => {
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    pendingMoveEventRef.current = null;
+    dragStateRef.current = null;
+    setDragState(null);
+  }, []);
+
+  useEffect(() => {
+    if (!dragState) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        cancelCreateDrag();
+      }
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("keydown", onKeyDown);
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      pendingMoveEventRef.current = null;
+    };
+  }, [dragState, onPointerMove, onPointerUp, cancelCreateDrag]);
+
+  /** The live ghost to render, or null when not actively dragging (past the move threshold) */
+  const ghost: CreateDragGhost | null =
+    dragState && dragState.hasMoved
+      ? {
+          dayIndex: dragState.dayIndex,
+          top:
+            (Math.min(dragState.startMinutes, dragState.currentMinutes) / 60) *
+            hourHeight,
+          height:
+            (Math.max(
+              snapMinutes,
+              Math.abs(dragState.currentMinutes - dragState.startMinutes),
+            ) /
+              60) *
+            hourHeight,
+          startMinutes: Math.min(
+            dragState.startMinutes,
+            dragState.currentMinutes,
+          ),
+          endMinutes: Math.max(
+            Math.min(dragState.startMinutes, dragState.currentMinutes) +
+              snapMinutes,
+            Math.max(dragState.startMinutes, dragState.currentMinutes),
+          ),
+        }
+      : null;
+
+  const isCreateDragging = dragState !== null && dragState.hasMoved;
+
+  const shouldSuppressClick = useCallback(() => {
+    return justCreatedRef.current;
+  }, []);
+
+  return {
+    startCreateDrag,
+    ghost,
+    isCreateDragging,
+    shouldSuppressClick,
+    cancelCreateDrag,
+  };
+}

package/corpus/templates/calendar/app/hooks/use-mobile.ts

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/hooks/use-mobile";

package/corpus/templates/calendar/app/hooks/use-view-preferences.ts

@@ -1,5 +1,5 @@
-import { agentNativePath } from "@agent-native/core/client";
-import { useState, useCallback, useEffect } from "react";
+import { agentNativePath, callAction } from "@agent-native/core/client";
+import { useState, useCallback, useEffect, useRef } from "react";
 
 import {
   CALENDAR_COLOR_MODE_KEY,
@@ -9,11 +9,20 @@ import {
   DEFAULT_CALENDAR_VIEW_PREFERENCES,
   calendarViewPreferencesEqual,
   normalizeCalendarViewPreferences,
+  type CalendarColorMode,
   type CalendarViewPreferences,
 } from "@/lib/calendar-view-preferences";
 
 export type ViewPreferences = CalendarViewPreferences;
 
+const PENDING_ACCOUNT_COLORS_KEY = `${CALENDAR_VIEW_PREFERENCES_KEY}:pending-account-colors`;
+const PENDING_ACCOUNT_COLORS_TTL_MS = 30_000;
+
+interface PendingAccountColors {
+  colors: Record<string, string>;
+  expiresAt: number;
+}
+
 function load(): CalendarViewPreferences {
   try {
     const raw = localStorage.getItem(CALENDAR_VIEW_PREFERENCES_KEY);
@@ -30,6 +39,62 @@ function load(): CalendarViewPreferences {
   }
 }
 
+function loadPendingAccountPreferences(): PendingAccountColors | null {
+  try {
+    const raw = localStorage.getItem(PENDING_ACCOUNT_COLORS_KEY);
+    if (!raw) return null;
+    const pending = JSON.parse(raw) as PendingAccountColors;
+    if (!pending.expiresAt || pending.expiresAt < Date.now()) {
+      localStorage.removeItem(PENDING_ACCOUNT_COLORS_KEY);
+      return null;
+    }
+    return pending.colors && typeof pending.colors === "object"
+      ? pending
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+function loadPendingAccountColors(): Record<string, string> {
+  return loadPendingAccountPreferences()?.colors ?? {};
+}
+
+function savePendingAccountColor(accountEmail: string, accountColor: string) {
+  try {
+    localStorage.setItem(
+      PENDING_ACCOUNT_COLORS_KEY,
+      JSON.stringify({
+        colors: {
+          ...loadPendingAccountColors(),
+          [accountEmail]: accountColor,
+        },
+        expiresAt: Date.now() + PENDING_ACCOUNT_COLORS_TTL_MS,
+      } satisfies PendingAccountColors),
+    );
+  } catch {}
+}
+
+function clearPendingAccountColor(accountEmail: string) {
+  try {
+    const pending = loadPendingAccountPreferences();
+    if (!pending) return;
+    const colors = { ...pending.colors };
+    delete colors[accountEmail];
+    if (Object.keys(colors).length === 0) {
+      localStorage.removeItem(PENDING_ACCOUNT_COLORS_KEY);
+      return;
+    }
+    localStorage.setItem(
+      PENDING_ACCOUNT_COLORS_KEY,
+      JSON.stringify({
+        colors,
+        expiresAt: Date.now() + PENDING_ACCOUNT_COLORS_TTL_MS,
+      } satisfies PendingAccountColors),
+    );
+  } catch {}
+}
+
 function save(prefs: CalendarViewPreferences) {
   try {
     localStorage.setItem(CALENDAR_VIEW_PREFERENCES_KEY, JSON.stringify(prefs));
@@ -49,23 +114,12 @@ async function readAppStatePreferences(): Promise<CalendarViewPreferences | null
   return normalizeCalendarViewPreferences(await res.json());
 }
 
-function writeAppStatePreferences(prefs: CalendarViewPreferences) {
-  fetch(
-    agentNativePath(
-      `/_agent-native/application-state/${CALENDAR_VIEW_PREFERENCES_KEY}`,
-    ),
-    {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(prefs),
-    },
-  ).catch(() => {});
-}
-
 export function useViewPreferences() {
   const [prefs, setPrefs] = useState<ViewPreferences>(load);
+  const accountColorRequestIds = useRef<Record<string, number>>({});
+  const accountModeRequestIds = useRef<Record<string, number>>({});
+  const pendingAccountColors = useRef<Record<string, string>>({});
 
-  // Sync across components in the same tab via custom event
   useEffect(() => {
     function handle() {
       setPrefs(load());
@@ -90,12 +144,37 @@ export function useViewPreferences() {
         const remote = await readAppStatePreferences();
         if (!cancelled && remote) {
           setPrefs((current) => {
-            if (calendarViewPreferencesEqual(current, remote)) return current;
-            save(remote);
+            const pendingPreferences = loadPendingAccountPreferences();
+            const pendingColors = {
+              ...(pendingPreferences?.colors ?? {}),
+              ...pendingAccountColors.current,
+            };
+            const next =
+              Object.keys(pendingColors).length > 0
+                ? normalizeCalendarViewPreferences({
+                    ...remote,
+                    accountColorModes: {
+                      ...remote.accountColorModes,
+                      ...Object.fromEntries(
+                        Object.keys(pendingColors).map((accountEmail) => [
+                          accountEmail,
+                          "single" as const,
+                        ]),
+                      ),
+                    },
+                    accountColors: {
+                      ...remote.accountColors,
+                      ...pendingColors,
+                    },
+                  })
+                : remote;
+
+            if (calendarViewPreferencesEqual(current, next)) return current;
+            save(next);
             window.dispatchEvent(
               new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT),
             );
-            return remote;
+            return next;
           });
         }
       } catch {
@@ -117,11 +196,198 @@ export function useViewPreferences() {
     setPrefs((prev) => {
       const next = normalizeCalendarViewPreferences({ ...prev, ...patch });
       save(next);
-      writeAppStatePreferences(next);
       window.dispatchEvent(new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT));
       return next;
     });
+    callAction("update-calendar-visual-preferences", patch).catch(() => {});
   }, []);
 
-  return { prefs, update };
+  const updateAccountColor = useCallback(
+    (accountEmail: string, accountColor: string) => {
+      const requestId = (accountColorRequestIds.current[accountEmail] ?? 0) + 1;
+      accountColorRequestIds.current[accountEmail] = requestId;
+      pendingAccountColors.current[accountEmail] = accountColor;
+      savePendingAccountColor(accountEmail, accountColor);
+      let rollbackPrefs: CalendarViewPreferences | null = null;
+
+      setPrefs((prev) => {
+        rollbackPrefs = prev;
+        const next = normalizeCalendarViewPreferences({
+          ...prev,
+          accountColorModes: {
+            ...prev.accountColorModes,
+            [accountEmail]: "single",
+          },
+          accountColors: {
+            ...prev.accountColors,
+            [accountEmail]: accountColor,
+          },
+        });
+        save(next);
+        window.dispatchEvent(new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT));
+        return next;
+      });
+
+      callAction("update-calendar-visual-preferences", {
+        accountEmail,
+        accountColor,
+      })
+        .then((result) => {
+          if (accountColorRequestIds.current[accountEmail] !== requestId) {
+            return;
+          }
+          delete pendingAccountColors.current[accountEmail];
+          clearPendingAccountColor(accountEmail);
+
+          const preferences = (result as { preferences?: unknown }).preferences;
+          if (!preferences) return;
+          const serverPrefs = normalizeCalendarViewPreferences(preferences);
+          setPrefs((current) => {
+            const next = normalizeCalendarViewPreferences({
+              ...current,
+              accountColorModes: {
+                ...current.accountColorModes,
+                [accountEmail]:
+                  serverPrefs.accountColorModes[accountEmail] ?? "single",
+              },
+              accountColors: {
+                ...current.accountColors,
+                [accountEmail]:
+                  serverPrefs.accountColors[accountEmail] ?? accountColor,
+              },
+            });
+            if (calendarViewPreferencesEqual(current, next)) return current;
+            save(next);
+            window.dispatchEvent(
+              new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT),
+            );
+            return next;
+          });
+        })
+        .catch(() => {
+          if (accountColorRequestIds.current[accountEmail] === requestId) {
+            delete pendingAccountColors.current[accountEmail];
+            clearPendingAccountColor(accountEmail);
+            setPrefs((current) => {
+              if (!rollbackPrefs) return current;
+              const accountColors = { ...current.accountColors };
+              const accountColorModes = { ...current.accountColorModes };
+              const previousAccountColor =
+                rollbackPrefs.accountColors[accountEmail];
+              const previousAccountMode =
+                rollbackPrefs.accountColorModes[accountEmail];
+              if (current.accountColors[accountEmail] === accountColor) {
+                if (previousAccountColor) {
+                  accountColors[accountEmail] = previousAccountColor;
+                } else {
+                  delete accountColors[accountEmail];
+                }
+                if (previousAccountMode) {
+                  accountColorModes[accountEmail] = previousAccountMode;
+                } else {
+                  delete accountColorModes[accountEmail];
+                }
+              }
+              const next = normalizeCalendarViewPreferences({
+                ...current,
+                accountColorModes,
+                accountColors,
+              });
+              if (calendarViewPreferencesEqual(current, next)) return current;
+              save(next);
+              window.dispatchEvent(
+                new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT),
+              );
+              return next;
+            });
+          }
+        });
+    },
+    [],
+  );
+
+  const updateAccountColorMode = useCallback(
+    (accountEmail: string, accountColorMode: CalendarColorMode) => {
+      const requestId = (accountModeRequestIds.current[accountEmail] ?? 0) + 1;
+      accountModeRequestIds.current[accountEmail] = requestId;
+      let rollbackPrefs: CalendarViewPreferences | null = null;
+
+      setPrefs((prev) => {
+        rollbackPrefs = prev;
+        const next = normalizeCalendarViewPreferences({
+          ...prev,
+          accountColorModes: {
+            ...prev.accountColorModes,
+            [accountEmail]: accountColorMode,
+          },
+        });
+        save(next);
+        window.dispatchEvent(new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT));
+        return next;
+      });
+
+      callAction("update-calendar-visual-preferences", {
+        accountEmail,
+        accountColorMode,
+      })
+        .then((result) => {
+          if (accountModeRequestIds.current[accountEmail] !== requestId) {
+            return;
+          }
+          const preferences = (result as { preferences?: unknown }).preferences;
+          if (!preferences) return;
+          const serverPrefs = normalizeCalendarViewPreferences(preferences);
+          setPrefs((current) => {
+            const next = normalizeCalendarViewPreferences({
+              ...current,
+              accountColorModes: {
+                ...current.accountColorModes,
+                [accountEmail]:
+                  serverPrefs.accountColorModes[accountEmail] ??
+                  accountColorMode,
+              },
+            });
+            if (calendarViewPreferencesEqual(current, next)) return current;
+            save(next);
+            window.dispatchEvent(
+              new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT),
+            );
+            return next;
+          });
+        })
+        .catch(() => {
+          if (accountModeRequestIds.current[accountEmail] === requestId) {
+            setPrefs((current) => {
+              if (!rollbackPrefs) return current;
+              if (
+                current.accountColorModes[accountEmail] !== accountColorMode
+              ) {
+                return current;
+              }
+              const accountColorModes = { ...current.accountColorModes };
+              const previousAccountMode =
+                rollbackPrefs.accountColorModes[accountEmail];
+              if (previousAccountMode) {
+                accountColorModes[accountEmail] = previousAccountMode;
+              } else {
+                delete accountColorModes[accountEmail];
+              }
+              const next = normalizeCalendarViewPreferences({
+                ...current,
+                accountColorModes,
+              });
+              if (calendarViewPreferencesEqual(current, next)) return current;
+              save(next);
+              window.dispatchEvent(
+                new Event(CALENDAR_VIEW_PREFERENCES_CHANGE_EVENT),
+              );
+              return next;
+            });
+          }
+        });
+    },
+    [],
+  );
+
+  return { prefs, update, updateAccountColor, updateAccountColorMode };
 }

package/corpus/templates/calendar/app/hooks/use-zoom-auth.ts

@@ -23,31 +23,68 @@ async function fetchJson<T>(input: string, init?: RequestInit): Promise<T> {
   return (await res.json()) as T;
 }
 
-export function useZoomStatus() {
-  const queryClient = useQueryClient();
-  useEffect(() => {
-    const refresh = () =>
-      queryClient.invalidateQueries({ queryKey: ["zoom-status"] });
+// ---------------------------------------------------------------------------
+// Shared Zoom OAuth-completion listener
+//
+// Every mounted useZoomStatus() call (one per rendered EventDetailPopover,
+// plus Settings/CreateEventDialog/BookingLinksPage) needs to react to the
+// OAuth popup finishing. Rather than each instance opening its own
+// window "message" listener and BroadcastChannel, a single module-level pair
+// attaches when the first subscriber joins and detaches when the last
+// leaves, fanning the "connected" signal out to every subscriber.
+// ---------------------------------------------------------------------------
 
-    const onMessage = (event: MessageEvent) => {
-      if (event.origin !== window.location.origin) return;
-      if (event.data?.type === "agent-native:zoom-connected") refresh();
-    };
+const zoomAuthSubscribers = new Set<() => void>();
+let zoomAuthChannel: BroadcastChannel | null = null;
+let zoomAuthWindowListenerAttached = false;
 
-    window.addEventListener("message", onMessage);
+function notifyZoomAuthSubscribers(): void {
+  for (const subscriber of zoomAuthSubscribers) subscriber();
+}
+
+function onZoomAuthWindowMessage(event: MessageEvent): void {
+  if (event.origin !== window.location.origin) return;
+  if (event.data?.type === "agent-native:zoom-connected") {
+    notifyZoomAuthSubscribers();
+  }
+}
+
+function onZoomAuthChannelMessage(event: MessageEvent): void {
+  if (event.data?.type === "agent-native:zoom-connected") {
+    notifyZoomAuthSubscribers();
+  }
+}
 
-    let channel: BroadcastChannel | null = null;
+function subscribeZoomAuthConnected(subscriber: () => void): () => void {
+  if (zoomAuthSubscribers.size === 0) {
+    window.addEventListener("message", onZoomAuthWindowMessage);
+    zoomAuthWindowListenerAttached = true;
     if ("BroadcastChannel" in window) {
-      channel = new BroadcastChannel("agent-native-zoom-oauth");
-      channel.onmessage = (event) => {
-        if (event.data?.type === "agent-native:zoom-connected") refresh();
-      };
+      zoomAuthChannel = new BroadcastChannel("agent-native-zoom-oauth");
+      zoomAuthChannel.onmessage = onZoomAuthChannelMessage;
+    }
+  }
+  zoomAuthSubscribers.add(subscriber);
+
+  return () => {
+    zoomAuthSubscribers.delete(subscriber);
+    if (zoomAuthSubscribers.size === 0) {
+      if (zoomAuthWindowListenerAttached) {
+        window.removeEventListener("message", onZoomAuthWindowMessage);
+        zoomAuthWindowListenerAttached = false;
+      }
+      zoomAuthChannel?.close();
+      zoomAuthChannel = null;
     }
+  };
+}
 
-    return () => {
-      window.removeEventListener("message", onMessage);
-      channel?.close();
-    };
+export function useZoomStatus() {
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    const refresh = () =>
+      queryClient.invalidateQueries({ queryKey: ["zoom-status"] });
+    return subscribeZoomAuthConnected(refresh);
   }, [queryClient]);
 
   return useQuery<ZoomAuthStatus>({