@tuturuuu/ui 0.31.0 → 0.33.0

package/src/components/ui/text-editor/task-item-status-picker.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { Check, Minus, Square } from '@tuturuuu/icons';
+import { useTranslations } from 'next-intl';
+import { type ReactNode, useEffect, useRef, useState } from 'react';
+import { Popover, PopoverAnchor, PopoverContent } from '../popover';
+import type { TriStateChecked } from './task-item-checkbox';
+
+export function TaskItemStatusPicker({
+  children,
+  state,
+  disabled,
+  onSelect,
+}: {
+  children: ReactNode;
+  state: TriStateChecked;
+  disabled: boolean;
+  onSelect: (state: TriStateChecked) => void;
+}) {
+  const t = useTranslations('common.checklist');
+  const [open, setOpen] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const keyboardOpen = useRef(false);
+  const anchor = useRef<HTMLDivElement>(null);
+  const cancelTimer = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  useEffect(() => {
+    if (!disabled) return;
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+    keyboardOpen.current = false;
+    setOpen(false);
+  }, [disabled]);
+  const closeSoon = () => {
+    cancelTimer();
+    if (keyboardOpen.current) return;
+    timer.current = setTimeout(() => setOpen(false), 200);
+  };
+  const options = [
+    { value: false, label: t('unchecked'), Icon: Square },
+    { value: 'indeterminate', label: t('in_progress'), Icon: Minus },
+    { value: true, label: t('completed'), Icon: Check },
+  ] as const;
+
+  return (
+    <Popover open={open && !disabled} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <div
+          ref={anchor}
+          onPointerEnter={(event) => {
+            if (disabled || event.pointerType === 'touch') return;
+            cancelTimer();
+            keyboardOpen.current = false;
+            timer.current = setTimeout(() => setOpen(true), 500);
+          }}
+          onContextMenu={(event) => {
+            if (disabled) return;
+            event.preventDefault();
+            cancelTimer();
+            keyboardOpen.current = true;
+            setOpen(true);
+          }}
+          onPointerLeave={closeSoon}
+          onKeyDown={(event) => {
+            if (disabled || event.key !== 'ArrowDown') return;
+            event.preventDefault();
+            event.stopPropagation();
+            cancelTimer();
+            keyboardOpen.current = true;
+            setOpen(true);
+          }}
+        >
+          {children}
+        </div>
+      </PopoverAnchor>
+      <PopoverContent
+        side="top"
+        align="start"
+        sideOffset={6}
+        className="w-auto max-w-[calc(100vw-2rem)] p-1"
+        contentEditable={false}
+        aria-label={t('status')}
+        onPointerEnter={cancelTimer}
+        onPointerLeave={closeSoon}
+        onFocusCapture={cancelTimer}
+        onInteractOutside={() => {
+          keyboardOpen.current = false;
+          cancelTimer();
+        }}
+        onOpenAutoFocus={(event) => {
+          if (!keyboardOpen.current) event.preventDefault();
+        }}
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          if (keyboardOpen.current)
+            anchor.current?.querySelector('button')?.focus();
+        }}
+      >
+        <div className="flex items-center gap-0.5">
+          {options.map(({ value, label, Icon }) => (
+            <button
+              key={String(value)}
+              type="button"
+              aria-label={label}
+              aria-pressed={state === value}
+              className="flex min-h-9 items-center gap-1.5 rounded-sm px-2 text-muted-foreground text-xs hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-accent aria-pressed:text-accent-foreground"
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                onSelect(value);
+                cancelTimer();
+                setOpen(false);
+              }}
+            >
+              <Icon className="size-3.5 shrink-0" />
+              {label}
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -50,7 +50,7 @@ function renderCalendarSync({
     </QueryClientProvider>
   );
 
-  return renderHook(() => useCalendarSync(), { wrapper });
+  return { ...renderHook(() => useCalendarSync(), { wrapper }), queryClient };
 }
 
 function mockCalendarFetch(
@@ -570,3 +570,22 @@ describe('CalendarSyncProvider optimistic visible events', () => {
     });
   });
 });
+
+it('refetches invalidated event ranges even while the local range cache is fresh', async () => {
+  const fetchMock = mockCalendarFetch([createEvent('before')]);
+  vi.stubGlobal('fetch', fetchMock);
+  const { result, queryClient } = renderCalendarSync();
+  act(() => result.current.setDates(createWeekDates('2026-06-22')));
+  await waitFor(() =>
+    expect(result.current.events.map((event) => event.id)).toEqual(['before'])
+  );
+  fetchMock.mockImplementation(mockCalendarFetch([createEvent('after')]));
+  await act(() =>
+    queryClient.invalidateQueries({
+      queryKey: ['databaseCalendarEvents', 'workspace-1'],
+    })
+  );
+  await waitFor(() =>
+    expect(result.current.events.map((event) => event.id)).toEqual(['after'])
+  );
+});

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

@@ -1,230 +1,149 @@
-/**
- * @vitest-environment jsdom
- */
-
+/** @vitest-environment jsdom */
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { renderHook, waitFor } from '@testing-library/react';
+import { act, renderHook } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { NOTIFICATION_REFRESH_INTERVAL_MS } from '../notification-subscription';
 import {
   __resetNotificationSubscriptionRegistryForTests,
-  UNREAD_COUNT_FALLBACK_INTERVAL_MS,
-  UNREAD_COUNT_STALE_TIME_MS,
   useInfiniteNotifications,
   useNotificationSubscription,
-  useUnreadCount,
 } from '../use-notifications';
 
-type RealtimePayload = {
-  new?: {
-    read_at?: string | null;
-    data?: {
-      action_taken?: boolean;
-    };
-  };
-};
-
-const {
-  channelMock,
-  createRealtimeClientMock,
-  postgresCallbacks,
-  removeChannelMock,
-  subscribeMock,
-} = vi.hoisted(() => {
-  const postgresCallbacks: Array<(payload: RealtimePayload) => void> = [];
-  const removeChannelMock = vi.fn();
-  const subscribeMock = vi.fn();
-  const channel = {
-    on: vi.fn(
-      (
-        type: string,
-        _config: Record<string, unknown>,
-        callback: (payload: RealtimePayload) => void
-      ) => {
-        if (type === 'postgres_changes') {
-          postgresCallbacks.push(callback);
-        }
-
-        return channel;
-      }
-    ),
-    subscribe: subscribeMock,
-  };
-
-  const channelMock = vi.fn(() => channel);
-
-  subscribeMock.mockReturnValue(channel);
-
-  return {
-    channelMock,
-    createRealtimeClientMock: vi.fn(() => ({
-      channel: channelMock,
-      removeChannel: removeChannelMock,
-    })),
-    postgresCallbacks,
-    removeChannelMock,
-    subscribeMock,
-  };
-});
-
+const createRealtimeClient = vi.hoisted(() => vi.fn());
 vi.mock('@tuturuuu/supabase/next/realtime-browser', () => ({
-  createRealtimeClient: createRealtimeClientMock,
+  createRealtimeClient,
 }));
 
-function createQueryClient() {
-  return new QueryClient({
-    defaultOptions: {
-      mutations: { retry: false },
-      queries: { retry: false },
-    },
-  });
-}
-
-function createWrapper(queryClient: QueryClient) {
+function wrapper(client: QueryClient) {
   return function Wrapper({ children }: { children: ReactNode }) {
     return (
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
     );
   };
 }
 
-describe('useNotificationSubscription', () => {
+describe('notification API refresh subscriptions', () => {
   beforeEach(() => {
-    channelMock.mockClear();
-    createRealtimeClientMock.mockClear();
-    postgresCallbacks.length = 0;
-    removeChannelMock.mockClear();
-    subscribeMock.mockClear();
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      value: 'visible',
+    });
   });
-
   afterEach(() => {
     __resetNotificationSubscriptionRegistryForTests();
+    vi.useRealTimers();
     vi.unstubAllGlobals();
   });
 
-  it('defers notification list requests until the consumer enables them', () => {
-    const fetchMock = vi.fn();
-    vi.stubGlobal('fetch', fetchMock);
-    const queryClient = createQueryClient();
-
-    renderHook(
-      () =>
-        useInfiniteNotifications({
-          enabled: false,
-          unreadOnly: true,
-        }),
-      { wrapper: createWrapper(queryClient) }
-    );
-
-    expect(fetchMock).not.toHaveBeenCalled();
-  });
-
-  it('uses realtime-first unread counts with a low-frequency fallback', () => {
-    const fetchMock = vi.fn();
-    vi.stubGlobal('fetch', fetchMock);
-    const queryClient = createQueryClient();
-
-    renderHook(() => useUnreadCount(undefined, { enabled: false }), {
-      wrapper: createWrapper(queryClient),
-    });
-
-    const queryOptions = queryClient.getQueryCache().find({
-      queryKey: ['notifications', 'unread-count', 'all'],
-    })?.options as { refetchInterval?: number; staleTime?: number } | undefined;
-
-    expect(fetchMock).not.toHaveBeenCalled();
-    expect(queryOptions?.staleTime).toBe(UNREAD_COUNT_STALE_TIME_MS);
-    expect(queryOptions?.refetchInterval).toBe(
-      UNREAD_COUNT_FALLBACK_INTERVAL_MS
+  it('keeps closed inbox requests lazy', () => {
+    const fetch = vi.fn();
+    vi.stubGlobal('fetch', fetch);
+    const client = new QueryClient();
+    const hook = renderHook(
+      () => useInfiniteNotifications({ enabled: false, unreadOnly: true }),
+      { wrapper: wrapper(client) }
     );
+    expect(fetch).not.toHaveBeenCalled();
+    hook.unmount();
+    client.clear();
   });
 
-  it('shares one realtime channel across multiple consumers for the same user', async () => {
-    const queryClient = createQueryClient();
-    const wrapper = createWrapper(queryClient);
-
+  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');
     const first = renderHook(
       () => useNotificationSubscription(null, 'user-1'),
-      { wrapper }
+      { wrapper: wrapper(client) }
     );
     const second = renderHook(
-      () => useNotificationSubscription('workspace-1', 'user-1'),
-      { wrapper }
+      () => useNotificationSubscription('workspace', 'user-1'),
+      { wrapper: wrapper(client) }
     );
 
-    await waitFor(() => {
-      expect(channelMock).toHaveBeenCalledTimes(1);
-      expect(subscribeMock).toHaveBeenCalledTimes(1);
-    });
-
+    act(() => vi.advanceTimersByTime(NOTIFICATION_REFRESH_INTERVAL_MS));
+    expect(invalidate).toHaveBeenCalledTimes(1);
+    expect(invalidate).toHaveBeenCalledWith({ queryKey: ['notifications'] });
+    expect(createRealtimeClient).not.toHaveBeenCalled();
     first.unmount();
-
-    expect(removeChannelMock).not.toHaveBeenCalled();
-
+    act(() => vi.advanceTimersByTime(NOTIFICATION_REFRESH_INTERVAL_MS));
+    expect(invalidate).toHaveBeenCalledTimes(2);
     second.unmount();
-
-    expect(removeChannelMock).toHaveBeenCalledTimes(1);
-  });
-
-  it('invalidates unread counts for read-state-only realtime updates', async () => {
-    const queryClient = createQueryClient();
-    const invalidate = vi.spyOn(queryClient, 'invalidateQueries');
-    const subscription = renderHook(
-      () => useNotificationSubscription(null, 'user-1'),
-      { wrapper: createWrapper(queryClient) }
-    );
-
-    await waitFor(() => {
-      expect(postgresCallbacks).toHaveLength(3);
-    });
-
-    postgresCallbacks[1]?.({ new: { read_at: new Date().toISOString() } });
-
-    expect(invalidate).toHaveBeenCalledWith({
-      queryKey: ['notifications'],
-    });
-    expect(invalidate).toHaveBeenCalledWith({
-      queryKey: ['notifications', 'unread-count'],
-    });
-
-    subscription.unmount();
+    act(() => vi.advanceTimersByTime(NOTIFICATION_REFRESH_INTERVAL_MS));
+    expect(invalidate).toHaveBeenCalledTimes(2);
+    client.clear();
   });
 
-  it('invalidates every mounted query client from the shared subscription', async () => {
-    const firstQueryClient = createQueryClient();
-    const secondQueryClient = createQueryClient();
-    const firstInvalidate = vi.spyOn(firstQueryClient, 'invalidateQueries');
-    const secondInvalidate = vi.spyOn(secondQueryClient, 'invalidateQueries');
-
+  it('refreshes every mounted query client and removes unmounted clients', () => {
+    const a = new QueryClient();
+    const b = new QueryClient();
+    const invalidateA = vi.spyOn(a, 'invalidateQueries');
+    const invalidateB = vi.spyOn(b, 'invalidateQueries');
     const first = renderHook(
       () => useNotificationSubscription(null, 'user-1'),
-      { wrapper: createWrapper(firstQueryClient) }
+      { wrapper: wrapper(a) }
     );
     const second = renderHook(
-      () => useNotificationSubscription('workspace-1', 'user-1'),
-      { wrapper: createWrapper(secondQueryClient) }
+      () => useNotificationSubscription(null, 'user-1'),
+      { wrapper: wrapper(b) }
     );
+    act(() => vi.advanceTimersByTime(NOTIFICATION_REFRESH_INTERVAL_MS));
+    expect(invalidateA).toHaveBeenCalledTimes(1);
+    expect(invalidateB).toHaveBeenCalledTimes(1);
+    first.unmount();
+    act(() => vi.advanceTimersByTime(NOTIFICATION_REFRESH_INTERVAL_MS));
+    expect(invalidateA).toHaveBeenCalledTimes(1);
+    expect(invalidateB).toHaveBeenCalledTimes(2);
+    second.unmount();
+    a.clear();
+    b.clear();
+  });
 
-    await waitFor(() => {
-      expect(postgresCallbacks).toHaveLength(3);
-    });
-
-    postgresCallbacks[0]?.({});
-
-    expect(firstInvalidate).toHaveBeenCalledWith({
-      queryKey: ['notifications'],
-    });
-    expect(firstInvalidate).toHaveBeenCalledWith({
-      queryKey: ['notifications', 'unread-count'],
+  it('pauses hidden tabs and refreshes when they become visible', () => {
+    const client = new QueryClient();
+    const invalidate = vi.spyOn(client, 'invalidateQueries');
+    const hook = renderHook(() => useNotificationSubscription(null, 'user-1'), {
+      wrapper: wrapper(client),
     });
-    expect(secondInvalidate).toHaveBeenCalledWith({
-      queryKey: ['notifications'],
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      value: 'hidden',
     });
-    expect(secondInvalidate).toHaveBeenCalledWith({
-      queryKey: ['notifications', 'unread-count'],
+    act(() => vi.advanceTimersByTime(NOTIFICATION_REFRESH_INTERVAL_MS * 3));
+    expect(invalidate).not.toHaveBeenCalled();
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      value: 'visible',
     });
+    act(() => document.dispatchEvent(new Event('visibilitychange')));
+    expect(invalidate).toHaveBeenCalledTimes(1);
+    hook.unmount();
+    act(() => document.dispatchEvent(new Event('visibilitychange')));
+    expect(invalidate).toHaveBeenCalledTimes(1);
+    client.clear();
+  });
 
-    first.unmount();
-    second.unmount();
+  it('does not refresh without an actor and cleans up when signing out', () => {
+    const client = new QueryClient();
+    const invalidate = vi.spyOn(client, 'invalidateQueries');
+    const hook = renderHook(
+      ({ user }) => useNotificationSubscription(null, user),
+      {
+        initialProps: { user: '' },
+        wrapper: wrapper(client),
+      }
+    );
+    act(() => vi.advanceTimersByTime(NOTIFICATION_REFRESH_INTERVAL_MS));
+    expect(invalidate).not.toHaveBeenCalled();
+    hook.rerender({ user: 'user-1' });
+    act(() => vi.advanceTimersByTime(NOTIFICATION_REFRESH_INTERVAL_MS));
+    expect(invalidate).toHaveBeenCalledTimes(1);
+    hook.rerender({ user: '' });
+    act(() => vi.advanceTimersByTime(NOTIFICATION_REFRESH_INTERVAL_MS));
+    expect(invalidate).toHaveBeenCalledTimes(1);
+    hook.unmount();
+    client.clear();
   });
 });

package/src/hooks/calendar-provider-sync.ts

@@ -0,0 +1,33 @@
+import type { QueryClient } from '@tanstack/react-query';
+import {
+  type CalendarSyncResult,
+  syncWorkspaceCalendar,
+} from '@tuturuuu/internal-api/calendar';
+
+const activeRequests = new WeakMap<
+  QueryClient,
+  Map<string, Promise<CalendarSyncResult>>
+>();
+
+export function isCalendarProviderSyncRunning(
+  client: QueryClient,
+  wsId: string
+) {
+  return activeRequests.get(client)?.has(wsId) ?? false;
+}
+
+/** Manual, legacy and automatic controls share the same in-flight request. */
+export function runCalendarProviderSync(client: QueryClient, wsId: string) {
+  let requests = activeRequests.get(client);
+  if (!requests) {
+    requests = new Map();
+    activeRequests.set(client, requests);
+  }
+  const active = requests.get(wsId);
+  if (active) return active;
+  const pending = syncWorkspaceCalendar(wsId).finally(() =>
+    requests.delete(wsId)
+  );
+  requests.set(wsId, pending);
+  return pending;
+}

package/src/hooks/notification-subscription.ts

@@ -0,0 +1,74 @@
+import { type QueryClient, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+export const NOTIFICATION_REFRESH_INTERVAL_MS = 30_000;
+
+interface NotificationSubscriptionEntry {
+  queryClients: Map<QueryClient, number>;
+  interval: ReturnType<typeof setInterval>;
+  onVisibilityChange: () => void;
+}
+
+const registry = new Map<string, NotificationSubscriptionEntry>();
+
+function invalidateVisibleNotifications(entry: NotificationSubscriptionEntry) {
+  if (document.visibilityState === 'hidden') return;
+  for (const queryClient of entry.queryClients.keys()) {
+    // Only active queries refetch; closed inboxes remain lazy.
+    void queryClient.invalidateQueries({ queryKey: ['notifications'] });
+  }
+}
+
+function stopEntry(entry: NotificationSubscriptionEntry) {
+  clearInterval(entry.interval);
+  document.removeEventListener('visibilitychange', entry.onVisibilityChange);
+}
+
+/**
+ * Share authenticated API refreshes across notification consumers.
+ * Notifications are server-owned: postgres_changes cannot filter their columns
+ * using browser roles, even when a user has a valid application session.
+ */
+export function useNotificationSubscription(
+  _wsId: string | null,
+  userId: string
+) {
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    if (!userId) return;
+    let entry = registry.get(userId);
+    if (!entry) {
+      const queryClients = new Map<QueryClient, number>();
+      const refresh = () => {
+        const current = registry.get(userId);
+        if (current) invalidateVisibleNotifications(current);
+      };
+      entry = {
+        queryClients,
+        interval: setInterval(refresh, NOTIFICATION_REFRESH_INTERVAL_MS),
+        onVisibilityChange: refresh,
+      };
+      registry.set(userId, entry);
+      document.addEventListener('visibilitychange', refresh);
+    }
+    entry.queryClients.set(
+      queryClient,
+      (entry.queryClients.get(queryClient) ?? 0) + 1
+    );
+
+    return () => {
+      const count = entry.queryClients.get(queryClient) ?? 0;
+      if (count <= 1) entry.queryClients.delete(queryClient);
+      else entry.queryClients.set(queryClient, count - 1);
+      if (entry.queryClients.size === 0) {
+        stopEntry(entry);
+        registry.delete(userId);
+      }
+    };
+  }, [userId, queryClient]);
+}
+
+export function __resetNotificationSubscriptionRegistryForTests() {
+  for (const entry of registry.values()) stopEntry(entry);
+  registry.clear();
+}

package/src/hooks/use-calendar-sync.tsx

@@ -1,10 +1,7 @@
 'use client';
 
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  listWorkspaceCalendars,
-  syncWorkspaceCalendar,
-} from '@tuturuuu/internal-api/calendar';
+import { listWorkspaceCalendars } from '@tuturuuu/internal-api/calendar';
 import type {
   Workspace,
   WorkspaceCalendarEvent,
@@ -24,6 +21,7 @@ import {
   useState,
 } from 'react';
 import { toast } from '../components/ui/sonner';
+import { runCalendarProviderSync } from './calendar-provider-sync';
 import {
   type CacheUpdate,
   type CalendarCache,
@@ -308,13 +306,7 @@ export const CalendarSyncProvider = ({
     const isCurrentWeek = includesCurrentWeek(dateRange);
     // 30 seconds for current week, 5 minutes for other weeks
     const staleTime = isCurrentWeek ? 30 * 1000 : 5 * 60 * 1000; // 30 seconds
-    const isStale = Date.now() - lastUpdated >= staleTime;
-
-    if (isCurrentWeek && isStale) {
-      // Current week cache is stale, forcing fresh fetch
-    }
-
-    return isStale;
+    return Date.now() - lastUpdated >= staleTime;
   };
 
   const updateCache = useCallback((cacheKey: string, update: CacheUpdate) => {
@@ -414,7 +406,12 @@ export const CalendarSyncProvider = ({
       if (
         cachedData &&
         !isCacheStaleEnhanced(cachedData.dbLastUpdated, dates) &&
-        !isForcedRef.current
+        !isForcedRef.current &&
+        !queryClient.getQueryState([
+          'databaseCalendarEvents',
+          wsId,
+          activeCacheKey,
+        ])?.isInvalidated
       ) {
         return cachedData.dbEvents;
       }
@@ -596,7 +593,7 @@ export const CalendarSyncProvider = ({
       });
 
       try {
-        const result = await syncWorkspaceCalendar(wsId);
+        const result = await runCalendarProviderSync(queryClient, wsId);
         // Partial imports can change events even when another calendar fails.
         refresh();
         if (!result.ok) throw new Error(result.error || 'Calendar sync failed');
@@ -640,7 +637,7 @@ export const CalendarSyncProvider = ({
         setIsSyncing(false);
       }
     },
-    [wsId, isActiveSyncOn, refresh]
+    [wsId, isActiveSyncOn, refresh, queryClient]
   );
 
   // Trigger refetch from DB when changing views (optimized to reduce load)

package/src/hooks/use-calendar.tsx

@@ -5,7 +5,6 @@ import {
   type WorkspaceCalendarEventCreatePayload,
   type WorkspaceCalendarEventUpdatePayload,
 } from '@tuturuuu/internal-api';
-import { syncWorkspaceCalendar } from '@tuturuuu/internal-api/calendar';
 import { createClient } from '@tuturuuu/supabase/next/client';
 import type {
   Workspace,
@@ -16,6 +15,7 @@ import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors'
 import { createAllDayEvent } from '@tuturuuu/utils/calendar-utils';
 import dayjs from 'dayjs';
 import moment from 'moment';
+import { runCalendarProviderSync } from './calendar-provider-sync';
 import 'moment/locale/vi';
 import {
   createContext,
@@ -1368,7 +1368,7 @@ export const CalendarProvider = ({
           });
         }
 
-        const result = await syncWorkspaceCalendar(ws.id);
+        const result = await runCalendarProviderSync(queryClient, ws.id);
         await queryClient.invalidateQueries({
           queryKey: ['databaseCalendarEvents', ws.id],
           exact: false,