@tuturuuu/ui 0.37.2 → 0.38.0

package/src/components/ui/text-editor/tool-bar.tsx

@@ -46,9 +46,7 @@ import { ToolbarButton, ToolbarSeparator } from './toolbar-controls';
 
 type LinkEditorContext = 'bubble' | 'popover' | null;
 
-// ---------------------------------------------------------------------------
 // Main ToolBar (BubbleMenu)
-// ---------------------------------------------------------------------------
 
 interface ToolBarProps {
   editor: Editor | null;
@@ -59,12 +57,14 @@ interface ToolBarProps {
   onConvertToTask?: () => void | Promise<void>;
   /** When true, the BubbleMenu is hidden because the fixed toolbar is visible */
   fixedToolbarVisible?: boolean;
+  allowEmbeds?: boolean;
   toggleBlockLabel?: string;
 }
 
 export function ToolBar({
   editor,
   fixedToolbarVisible,
+  allowEmbeds = true,
   workspaceId,
   onImageUpload,
   onConvertToTask,
@@ -459,9 +459,7 @@ export function ToolBar({
     toast.success('YouTube video added');
   }, [editor, youtubeUrl]);
 
-  // -----------------------------------------------------------------------
   // Render helpers
-  // -----------------------------------------------------------------------
 
   /** Renders the core formatting buttons (used by both fixed and bubble toolbar) */
   const renderFormattingOptions = useCallback(
@@ -478,11 +476,9 @@ export function ToolBar({
           />
         ))}
 
-        {/* Color controls */}
         <ToolbarSeparator />
         <TextEditorColorControls editor={editor} />
 
-        {/* Link */}
         <ToolbarSeparator />
         <ToolbarButton
           id="link"
@@ -491,8 +487,7 @@ export function ToolBar({
           onClick={() => openLinkEditor(source)}
         />
 
-        {/* Media uploads */}
-        {workspaceId && onImageUpload && (
+        {onImageUpload && (
           <>
             <ToolbarSeparator />
             <ToolbarButton
@@ -508,30 +503,33 @@ export function ToolBar({
               onClick={triggerImageUpload}
               disabled={isUploadingImage}
             />
-            <ToolbarButton
-              id="video"
-              icon={
-                isUploadingVideo ? (
-                  <Loader2 className="size-4 animate-spin" />
-                ) : (
-                  <FileVideo className="size-4" />
-                )
-              }
-              pressed={false}
-              onClick={triggerVideoUpload}
-              disabled={isUploadingVideo}
-            />
+            {workspaceId && (
+              <ToolbarButton
+                id="video"
+                icon={
+                  isUploadingVideo ? (
+                    <Loader2 className="size-4 animate-spin" />
+                  ) : (
+                    <FileVideo className="size-4" />
+                  )
+                }
+                pressed={false}
+                onClick={triggerVideoUpload}
+                disabled={isUploadingVideo}
+              />
+            )}
           </>
         )}
 
-        <ToolbarButton
-          id="youtube"
-          icon={<YoutubeIcon className="size-4" />}
-          pressed={showYoutubeInput}
-          onClick={() => setShowYoutubeInput(!showYoutubeInput)}
-        />
+        {allowEmbeds && (
+          <ToolbarButton
+            id="youtube"
+            icon={<YoutubeIcon className="size-4" />}
+            pressed={showYoutubeInput}
+            onClick={() => setShowYoutubeInput(!showYoutubeInput)}
+          />
+        )}
 
-        {/* Convert to task */}
         {onConvertToTask && (
           <>
             <ToolbarSeparator />
@@ -557,6 +555,7 @@ export function ToolBar({
       triggerVideoUpload,
       isUploadingVideo,
       showYoutubeInput,
+      allowEmbeds,
       onConvertToTask,
       toggleBlockLabel,
     ]
@@ -1133,8 +1132,7 @@ export function FixedToolbar({
       <ToolbarSeparator />
       <TextEditorColorControls editor={editor} />
 
-      {/* Media group */}
-      {workspaceId && onImageUpload && (
+      {onImageUpload && (
         <>
           <ToolbarSeparator />
           <ToolbarButton
@@ -1150,23 +1148,24 @@ export function FixedToolbar({
             onClick={() => fileInputRef.current?.click()}
             disabled={isUploadingImage}
           />
-          <ToolbarButton
-            id="video"
-            icon={
-              isUploadingVideo ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <FileVideo className="size-4" />
-              )
-            }
-            pressed={false}
-            onClick={() => videoInputRef.current?.click()}
-            disabled={isUploadingVideo}
-          />
+          {workspaceId && (
+            <ToolbarButton
+              id="video"
+              icon={
+                isUploadingVideo ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <FileVideo className="size-4" />
+                )
+              }
+              pressed={false}
+              onClick={() => videoInputRef.current?.click()}
+              disabled={isUploadingVideo}
+            />
+          )}
         </>
       )}
 
-      {/* Convert to task */}
       {onConvertToTask && (
         <>
           <ToolbarSeparator />

package/src/hooks/__tests__/collaboration-awareness.test.ts

@@ -0,0 +1,106 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import * as awarenessProtocol from 'y-protocols/awareness';
+import * as Y from 'yjs';
+import SupabaseProvider from '../supabase-provider';
+
+vi.mock('@tuturuuu/internal-api/realtime', () => ({
+  createRealtimeClient: () => {
+    const channel = {
+      on: () => channel,
+      subscribe: () => channel,
+      send: vi.fn(),
+    };
+    return { channel: () => channel, removeChannel: vi.fn() };
+  },
+}));
+afterEach(() => vi.useRealTimers());
+describe('collaboration cursor batching', () => {
+  it('merges all changed client IDs and flushes during continuous updates', async () => {
+    vi.useFakeTimers();
+    const doc = new Y.Doc();
+    const provider = new SupabaseProvider(
+      doc,
+      {} as ConstructorParameters<typeof SupabaseProvider>[1],
+      {
+        channel: 'task-editor-fixture',
+        id: 'fixture',
+        tableName: 'tasks',
+        columnName: 'description_yjs_state',
+        loadState: async () => null,
+        saveState: async () => true,
+        resyncInterval: false,
+      }
+    );
+    const a = new Y.Doc();
+    const b = new Y.Doc();
+    const first = new awarenessProtocol.Awareness(a);
+    const second = new awarenessProtocol.Awareness(b);
+    first.setLocalState({ user: { id: 'a' }, cursor: 1 });
+    second.setLocalState({ user: { id: 'b' }, cursor: 2 });
+    const sent = vi.fn();
+    provider.on('awareness', sent);
+    awarenessProtocol.applyAwarenessUpdate(
+      provider.awareness,
+      awarenessProtocol.encodeAwarenessUpdate(first, [a.clientID]),
+      'local-fixture'
+    );
+    await vi.advanceTimersByTimeAsync(100);
+    awarenessProtocol.applyAwarenessUpdate(
+      provider.awareness,
+      awarenessProtocol.encodeAwarenessUpdate(second, [b.clientID]),
+      'local-fixture'
+    );
+    await vi.advanceTimersByTimeAsync(50);
+    expect(sent).toHaveBeenCalledOnce();
+    const receiverDoc = new Y.Doc();
+    const receiver = new awarenessProtocol.Awareness(receiverDoc);
+    awarenessProtocol.applyAwarenessUpdate(
+      receiver,
+      sent.mock.calls[0]![0],
+      'fixture'
+    );
+    expect(receiver.getStates().get(a.clientID)).toMatchObject({ cursor: 1 });
+    expect(receiver.getStates().get(b.clientID)).toMatchObject({ cursor: 2 });
+    provider.destroy();
+    provider.awareness.destroy();
+    first.destroy();
+    second.destroy();
+    receiver.destroy();
+    for (const d of [doc, a, b, receiverDoc]) d.destroy();
+  });
+  it('does not rebroadcast peer awareness back to the room', async () => {
+    vi.useFakeTimers();
+    const doc = new Y.Doc();
+    const peerDoc = new Y.Doc();
+    const provider = new SupabaseProvider(
+      doc,
+      {} as ConstructorParameters<typeof SupabaseProvider>[1],
+      {
+        channel: 'task-editor-fixture',
+        id: 'fixture',
+        tableName: 'tasks',
+        columnName: 'description_yjs_state',
+        loadState: async () => null,
+        saveState: async () => true,
+        resyncInterval: false,
+      }
+    );
+    const peer = new awarenessProtocol.Awareness(peerDoc);
+    peer.setLocalState({ cursor: 4 });
+    const sent = vi.fn();
+    provider.on('awareness', sent);
+    provider.onAwareness(
+      awarenessProtocol.encodeAwarenessUpdate(peer, [peerDoc.clientID])
+    );
+    await vi.advanceTimersByTimeAsync(200);
+    expect(sent).not.toHaveBeenCalled();
+    expect(provider.awareness.getStates().get(peerDoc.clientID)).toMatchObject({
+      cursor: 4,
+    });
+    provider.destroy();
+    provider.awareness.destroy();
+    peer.destroy();
+    doc.destroy();
+    peerDoc.destroy();
+  });
+});

package/src/hooks/__tests__/supabase-provider.test.ts

@@ -5,6 +5,14 @@ import SupabaseProvider, {
   SUPABASE_PROVIDER_SYNC_ORIGIN,
 } from '../supabase-provider';
 
+const realtimeMock = vi.hoisted(() => ({ channel: null as unknown }));
+vi.mock('@tuturuuu/internal-api/realtime', () => ({
+  createRealtimeClient: () => ({
+    channel: () => realtimeMock.channel,
+    removeChannel: vi.fn(),
+  }),
+}));
+
 function createRealtimeChannel() {
   let subscribeHandler:
     | ((status: string, err?: { message?: string }) => void)
@@ -22,6 +30,7 @@ function createRealtimeChannel() {
     },
   };
 
+  realtimeMock.channel = channel;
   return channel;
 }
 

package/src/hooks/__tests__/use-calendar-readonly.test.tsx

@@ -294,10 +294,15 @@ describe('CalendarProvider Read-Only Mode', () => {
       await createPromise!;
     });
 
+    const optimisticId = calendarMockState.patchVisibleEvents.mock.calls.find(
+      ([, options]) => options?.status === 'creating'
+    )?.[0]?.[0]?.id;
+    expect(optimisticId).toMatch(/^optimistic[0-9a-f]{32}$/);
+
     expect(calendarMockState.patchVisibleEvents).toHaveBeenLastCalledWith(
       [serverEvent],
       expect.objectContaining({
-        clearIds: [expect.stringMatching(/^optimistic-/)],
+        clearIds: [optimisticId],
       })
     );
   });
@@ -322,10 +327,15 @@ describe('CalendarProvider Read-Only Mode', () => {
       ).rejects.toThrow('create failed');
     });
 
+    const optimisticId = calendarMockState.patchVisibleEvents.mock.calls.find(
+      ([, options]) => options?.status === 'creating'
+    )?.[0]?.[0]?.id;
+    expect(optimisticId).toMatch(/^optimistic[0-9a-f]{32}$/);
+
     expect(calendarMockState.patchVisibleEvents).toHaveBeenLastCalledWith(
       [],
       expect.objectContaining({
-        clearIds: [expect.stringMatching(/^optimistic-/)],
+        clearIds: [optimisticId],
       })
     );
   });

package/src/hooks/__tests__/use-notifications-subscription.test.tsx

@@ -11,7 +11,7 @@ import {
 } from '../use-notifications';
 
 const createRealtimeClient = vi.hoisted(() => vi.fn());
-vi.mock('@tuturuuu/supabase/next/realtime-browser', () => ({
+vi.mock('@tuturuuu/internal-api/realtime', () => ({
   createRealtimeClient,
 }));
 
@@ -31,6 +31,10 @@ describe('notification API refresh subscriptions', () => {
       configurable: true,
       value: 'visible',
     });
+    Object.defineProperty(navigator, 'onLine', {
+      configurable: true,
+      value: true,
+    });
   });
   afterEach(() => {
     __resetNotificationSubscriptionRegistryForTests();
@@ -51,6 +55,32 @@ describe('notification API refresh subscriptions', () => {
     client.clear();
   });
 
+  it('makes 30 shared refreshes per visible hour, pauses offline, and refreshes on reconnect', () => {
+    const client = new QueryClient();
+    const invalidate = vi.spyOn(client, 'invalidateQueries');
+    const hook = renderHook(() => useNotificationSubscription(null, 'user-1'), {
+      wrapper: wrapper(client),
+    });
+    act(() => vi.advanceTimersByTime(60 * 60_000));
+    expect(invalidate).toHaveBeenCalledTimes(30);
+    Object.defineProperty(navigator, 'onLine', {
+      configurable: true,
+      value: false,
+    });
+    act(() => vi.advanceTimersByTime(60 * 60_000));
+    expect(invalidate).toHaveBeenCalledTimes(30);
+    Object.defineProperty(navigator, 'onLine', {
+      configurable: true,
+      value: true,
+    });
+    act(() => window.dispatchEvent(new Event('online')));
+    expect(invalidate).toHaveBeenCalledTimes(31);
+    hook.unmount();
+    act(() => window.dispatchEvent(new Event('online')));
+    expect(invalidate).toHaveBeenCalledTimes(31);
+    client.clear();
+  });
+
   it('shares one refresh per user and query client without opening a denied realtime channel', () => {
     const client = new QueryClient();
     const invalidate = vi.spyOn(client, 'invalidateQueries');

package/src/hooks/__tests__/use-workspace-presence.test.tsx

@@ -3,7 +3,7 @@
  */
 
 import { act, renderHook, waitFor } from '@testing-library/react';
-import type { RealtimePresenceState } from '@tuturuuu/supabase/next/realtime';
+import type { RealtimePresenceState } from '@tuturuuu/internal-api/realtime';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import {
   type UseWorkspacePresenceResult,
@@ -16,8 +16,8 @@ const { createClientMock, getCurrentUserProfileMock } = vi.hoisted(() => ({
   getCurrentUserProfileMock: vi.fn(),
 }));
 
-vi.mock('@tuturuuu/supabase/next/client', () => ({
-  createClient: createClientMock,
+vi.mock('@tuturuuu/internal-api/realtime', () => ({
+  createRealtimeClient: createClientMock,
 }));
 
 vi.mock('@tuturuuu/internal-api/users', () => ({

package/src/hooks/__tests__/use-yjs-collaboration.test.tsx

@@ -0,0 +1,108 @@
+import { act, renderHook } from '@testing-library/react';
+import { type ReactNode, StrictMode } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useYjsCollaboration } from '../use-yjs-collaboration';
+
+const instances = vi.hoisted(
+  () =>
+    [] as {
+      id: number;
+      destroyed: boolean;
+      emit: (event: string, value: unknown) => void;
+    }[]
+);
+vi.mock('@tuturuuu/supabase/next/client', () => ({ createClient: () => ({}) }));
+vi.mock('@tuturuuu/ui/hooks/supabase-provider', () => ({
+  default: class {
+    id: number;
+    destroyed = false;
+    awareness: { destroy: () => void };
+    private listeners = new Map<string, (value: unknown) => void>();
+    constructor(
+      private doc: { clientID: number; destroy: () => void },
+      _client: unknown,
+      config: { awareness: { destroy: () => void } }
+    ) {
+      this.id = doc.clientID;
+      this.awareness = config.awareness;
+      instances.push(this);
+    }
+    on(event: string, callback: (value: unknown) => void) {
+      this.listeners.set(event, callback);
+    }
+    emit(event: string, value: unknown) {
+      this.listeners.get(event)?.(value);
+    }
+    destroy() {
+      this.destroyed = true;
+      this.awareness.destroy();
+      this.doc.destroy();
+    }
+  },
+}));
+const user = { id: 'actor', name: 'Ada', color: '#123456' };
+const config = {
+  channel: 'task-editor-one',
+  tableName: 'tasks',
+  columnName: 'description_yjs_state',
+  id: 'one',
+  user,
+};
+const wrapper = ({ children }: { children: ReactNode }) => (
+  <StrictMode>{children}</StrictMode>
+);
+describe('collaboration hook lifecycle', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    instances.length = 0;
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+  it('does not start awareness before authentication and reuses StrictMode providers', async () => {
+    const { result, rerender, unmount } = renderHook(
+      (actor) => useYjsCollaboration({ ...config, user: actor }),
+      { wrapper, initialProps: null as typeof user | null }
+    );
+    expect(result.current.doc).toBeNull();
+    expect(result.current.awareness).toBeNull();
+    expect(instances).toHaveLength(0);
+    rerender(user);
+    expect(instances).toHaveLength(1);
+    const provider = result.current.provider;
+    expect(provider).not.toBeNull();
+    rerender({ ...user, name: 'Ada updated' });
+    expect(result.current.provider).toBe(provider);
+    expect(result.current.awareness?.getLocalState()?.user.name).toBe(
+      'Ada updated'
+    );
+    unmount();
+    await act(() => vi.advanceTimersByTimeAsync(100));
+    expect(instances[0]?.destroyed).toBe(true);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+  it('isolates account/resource switches and ignores late callbacks from old providers', async () => {
+    const { result, rerender, unmount } = renderHook(
+      (id) =>
+        useYjsCollaboration({ ...config, id, channel: `task-editor-${id}` }),
+      { wrapper, initialProps: 'one' }
+    );
+    const first = instances[0]!;
+    const firstDoc = result.current.doc;
+    rerender('two');
+    expect(instances).toHaveLength(2);
+    expect(first.destroyed).toBe(true);
+    expect(result.current.doc).not.toBe(firstDoc);
+    const second = instances[1]!;
+    act(() => second.emit('status', [{ status: 'connected' }]));
+    expect(result.current.connected).toBe(true);
+    act(() => first.emit('disconnect', []));
+    expect(result.current.connected).toBe(true);
+    act(() => first.emit('synced', [true]));
+    expect(result.current.synced).toBe(false);
+    unmount();
+    await act(() => vi.advanceTimersByTimeAsync(100));
+    expect(second.destroyed).toBe(true);
+    expect(vi.getTimerCount()).toBe(0);
+  });
+});

package/src/hooks/calendar-creation-request.test.ts

@@ -0,0 +1,62 @@
+import { validate, version } from 'uuid';
+import { expect, it } from 'vitest';
+import {
+  createCalendarCreationRequests,
+  createOptimisticEventId,
+  newCalendarCreationRequestId,
+} from './calendar-creation-request';
+
+it('keeps explicit draft IDs on lost responses and separates manual and AI drafts', () => {
+  const ids = createCalendarCreationRequests();
+  const manual = newCalendarCreationRequestId();
+  const ai = [newCalendarCreationRequestId(), newCalendarCreationRequestId()];
+  expect(new Set([manual, ...ai]).size).toBe(3);
+  for (const [index, id] of [manual, ...ai].entries()) {
+    expect(validate(id)).toBe(true);
+    expect(version(id)).toBe(7);
+    const payload = {
+      title: `draft ${index}`,
+      source: { provider: 'google', connectionId: 'owned' },
+    };
+    expect(ids.forAttempt(payload, id)).toBe(id);
+    expect(ids.forAttempt({ ...payload }, id)).toBe(id);
+  }
+});
+it('rejects changed intent for an uncertain draft before dispatch', () => {
+  const ids = createCalendarCreationRequests();
+  const id = newCalendarCreationRequestId();
+  ids.forAttempt({ title: 'Original' }, id);
+  expect(() => ids.forAttempt({ title: 'Edited' }, id)).toThrow(
+    'draft changed'
+  );
+  expect(
+    ids.forAttempt({ title: 'Edited' }, newCalendarCreationRequestId())
+  ).not.toBe(id);
+});
+it('allocates a new independent intent per call unless the caller supplies a retry ID', () => {
+  const ids = createCalendarCreationRequests();
+  const event = { title: 'Same independent contents' };
+  expect(ids.forAttempt(event)).not.toBe(ids.forAttempt(event));
+});
+
+it('accepts the same serialized intent when object key order changes', () => {
+  const ids = createCalendarCreationRequests();
+  const id = newCalendarCreationRequestId();
+  ids.forAttempt(
+    { title: 'Same', source: { provider: 'google', connectionId: 'owned' } },
+    id
+  );
+  expect(
+    ids.forAttempt(
+      { source: { connectionId: 'owned', provider: 'google' }, title: 'Same' },
+      id
+    )
+  ).toBe(id);
+});
+
+it('keeps optimistic identifiers separate from multi-day segment delimiters', () => {
+  const id = createOptimisticEventId();
+  expect(id).toMatch(/^optimistic[a-zA-Z0-9]+$/);
+  expect(id).not.toContain('-');
+  expect(createOptimisticEventId()).not.toBe(id);
+});

package/src/hooks/calendar-creation-request.ts

@@ -0,0 +1,34 @@
+import { v7 } from 'uuid';
+
+export const newCalendarCreationRequestId = () => v7();
+/** Explicit draft IDs survive retries. Independent calls receive separate IDs;
+ * changed intent after an uncertain response must start an explicit new draft. */
+export function createCalendarCreationRequests() {
+  const intents = new Map<string, string>();
+  return {
+    forAttempt(event: object, requestId?: string) {
+      const id = requestId ?? v7();
+      const intent = JSON.stringify(event, (_key, value) =>
+        value && typeof value === 'object' && !Array.isArray(value)
+          ? Object.fromEntries(
+              Object.keys(value)
+                .sort()
+                .map((key) => [key, value[key]])
+            )
+          : value
+      );
+      const previous = intents.get(id);
+      if (previous !== undefined && previous !== intent)
+        throw new Error(
+          'This calendar draft changed after submission; recover it before starting a new draft'
+        );
+      if (requestId) intents.set(id, intent);
+      return id;
+    },
+  };
+}
+export const createOptimisticEventId = () => {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function')
+    return `optimistic${crypto.randomUUID().replaceAll('-', '')}`;
+  return `optimistic${Date.now()}${Math.random().toString(36).slice(2)}`;
+};

package/src/hooks/calendar-event-write-payload.ts

@@ -0,0 +1,24 @@
+import type { WorkspaceCalendarEventUpdatePayload } from '@tuturuuu/internal-api';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+
+export function calendarEventUpdatePayload(
+  input: Partial<CalendarEvent>
+): WorkspaceCalendarEventUpdatePayload {
+  const payload: WorkspaceCalendarEventUpdatePayload = {};
+  for (const field of [
+    'title',
+    'description',
+    'location',
+    'start_at',
+    'end_at',
+    'locked',
+    'source',
+    'providerColor',
+  ] as const) {
+    if (input[field] !== undefined)
+      Object.assign(payload, { [field]: input[field] });
+  }
+  if (!input.providerColor && input.color !== undefined)
+    payload.color = input.color;
+  return payload;
+}

package/src/hooks/notification-subscription.ts

@@ -1,7 +1,7 @@
 import { type QueryClient, useQueryClient } from '@tanstack/react-query';
 import { useEffect } from 'react';
 
-export const NOTIFICATION_REFRESH_INTERVAL_MS = 30_000;
+export const NOTIFICATION_REFRESH_INTERVAL_MS = 120_000;
 
 interface NotificationSubscriptionEntry {
   queryClients: Map<QueryClient, number>;
@@ -12,7 +12,8 @@ interface NotificationSubscriptionEntry {
 const registry = new Map<string, NotificationSubscriptionEntry>();
 
 function invalidateVisibleNotifications(entry: NotificationSubscriptionEntry) {
-  if (document.visibilityState === 'hidden') return;
+  if (document.visibilityState === 'hidden' || navigator.onLine === false)
+    return;
   for (const queryClient of entry.queryClients.keys()) {
     // Only active queries refetch; closed inboxes remain lazy.
     void queryClient.invalidateQueries({ queryKey: ['notifications'] });
@@ -22,6 +23,7 @@ function invalidateVisibleNotifications(entry: NotificationSubscriptionEntry) {
 function stopEntry(entry: NotificationSubscriptionEntry) {
   clearInterval(entry.interval);
   document.removeEventListener('visibilitychange', entry.onVisibilityChange);
+  window.removeEventListener('online', entry.onVisibilityChange);
 }
 
 /**
@@ -50,6 +52,7 @@ export function useNotificationSubscription(
       };
       registry.set(userId, entry);
       document.addEventListener('visibilitychange', refresh);
+      window.addEventListener('online', refresh);
     }
     entry.queryClients.set(
       queryClient,