@tuturuuu/ui 0.30.2 → 0.32.0

package/src/hooks/calendar-event-lookup.test.ts

@@ -0,0 +1,77 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { describe, expect, it, vi } from 'vitest';
+import { createCalendarEventLookup } from './calendar-event-lookup';
+import {
+  type CalendarCache,
+  updateCalendarRangeCache,
+} from './calendar-range-cache';
+
+const event = (id: string, start: string, end: string): CalendarEvent => ({
+  id,
+  start_at: start,
+  end_at: end,
+});
+describe('indexed calendar lookup', () => {
+  it('preserves event order and exclusive all-day ends across a year boundary', () => {
+    const events = [
+      event('timed', '2026-12-31T23:00:00', '2027-01-01T01:00:00'),
+      event('all-day', '2026-12-31T00:00:00', '2027-01-01T00:00:00'),
+    ];
+    const lookup = createCalendarEventLookup(events);
+    expect(lookup(new Date(2026, 11, 31)).map((item) => item.id)).toEqual([
+      'timed',
+      'all-day',
+    ]);
+    expect(lookup(new Date(2027, 0, 1)).map((item) => item.id)).toEqual([
+      'timed',
+    ]);
+    expect(lookup(new Date(2027, 0, 1))).toBe(lookup(new Date(2027, 0, 1)));
+  });
+  it('excludes the end day of all-day events across daylight saving changes', () => {
+    vi.stubEnv('TZ', 'America/New_York');
+    try {
+      const lookup = createCalendarEventLookup([
+        event('dst', '2026-03-08T00:00:00-05:00', '2026-03-09T00:00:00-04:00'),
+      ]);
+      expect(lookup(new Date(2026, 2, 8))).toHaveLength(1);
+      expect(lookup(new Date(2026, 2, 9))).toHaveLength(0);
+    } finally {
+      vi.unstubAllEnvs();
+    }
+  });
+  it('handles sparse busy years and invalid event dates', () => {
+    const events = Array.from({ length: 3000 }, (_, index) =>
+      event(
+        String(index),
+        new Date(2026, 0, 1 + index, 9).toISOString(),
+        new Date(2026, 0, 1 + index, 10).toISOString()
+      )
+    );
+    const lookup = createCalendarEventLookup([
+      ...events,
+      event('invalid', 'invalid', 'invalid'),
+    ]);
+    expect(lookup(new Date(2026, 11, 31)).map((item) => item.id)).toEqual([
+      '364',
+    ]);
+  });
+  it('bounds workspace-scoped range snapshots and preserves partial cache updates', () => {
+    let cache: CalendarCache = {};
+    for (let index = 1; index <= 15; index++)
+      cache = updateCalendarRangeCache(cache, `workspace:${index}`, {
+        dbLastUpdated: index,
+      });
+    expect(Object.keys(cache)).toHaveLength(12);
+    expect(cache['workspace:1']).toBeUndefined();
+    cache = updateCalendarRangeCache(cache, 'other-workspace:15', {
+      googleLastUpdated: 20,
+    });
+    expect(cache['workspace:15']?.dbLastUpdated).toBe(15);
+    expect(cache['other-workspace:15']?.dbLastUpdated).toBe(0);
+    cache = updateCalendarRangeCache(cache, 'active-range', {
+      dbLastUpdated: 0,
+    });
+    expect(cache['active-range']).toBeDefined();
+    expect(Object.keys(cache)).toHaveLength(12);
+  });
+});

package/src/hooks/calendar-event-lookup.ts

@@ -0,0 +1,47 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { isAllDayEvent } from '@tuturuuu/utils/calendar-utils';
+
+const dayStamp = (date: Date) =>
+  new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+/** Parse once, binary-search starts, and prune intervals that already ended. */
+export function createCalendarEventLookup(events: CalendarEvent[]) {
+  const intervals = events
+    .map((event, order) => ({
+      event,
+      order,
+      start: dayStamp(new Date(event.start_at)),
+      end: dayStamp(new Date(event.end_at)) - (isAllDayEvent(event) ? 1 : 0),
+    }))
+    .filter((item) => Number.isFinite(item.start) && Number.isFinite(item.end))
+    .sort((a, b) => a.start - b.start);
+  let max = -Infinity;
+  const latestEnd = intervals.map((item) => (max = Math.max(max, item.end)));
+  const cache = new Map<number, CalendarEvent[]>();
+  return (date = new Date()) => {
+    const target = dayStamp(date);
+    const cached = cache.get(target);
+    if (cached) return cached;
+    let low = 0,
+      high = intervals.length;
+    while (low < high) {
+      const mid = (low + high) >>> 1;
+      if (intervals[mid]!.start <= target) low = mid + 1;
+      else high = mid;
+    }
+    const matches: typeof intervals = [];
+    for (
+      let index = low - 1;
+      index >= 0 && latestEnd[index]! >= target;
+      index--
+    ) {
+      const interval = intervals[index]!;
+      if (interval.end >= target) matches.push(interval);
+    }
+    const result = matches
+      .sort((a, b) => a.order - b.order)
+      .map((item) => item.event);
+    if (cache.size >= 400) cache.delete(cache.keys().next().value!);
+    cache.set(target, result);
+    return result;
+  };
+}

package/src/hooks/calendar-range-cache.ts

@@ -0,0 +1,52 @@
+import type { WorkspaceCalendarEvent } from '@tuturuuu/types';
+// Add a type for the cache
+export type CalendarCache = {
+  [key: string]: {
+    dbEvents: WorkspaceCalendarEvent[];
+    googleEvents: WorkspaceCalendarEvent[];
+    dbLastUpdated: number;
+    googleLastUpdated: number;
+  };
+};
+
+// Helper type for cache updates
+export type CacheUpdate = {
+  dbEvents?: WorkspaceCalendarEvent[];
+  googleEvents?: WorkspaceCalendarEvent[];
+  dbLastUpdated?: number;
+  googleLastUpdated?: number;
+};
+
+/** Bound private in-memory snapshots; nothing is persisted to browser disk. */
+export function updateCalendarRangeCache(
+  previous: CalendarCache,
+  key: string,
+  update: CacheUpdate
+): CalendarCache {
+  const existing = previous[key] ?? {
+    dbEvents: [],
+    googleEvents: [],
+    dbLastUpdated: 0,
+    googleLastUpdated: 0,
+  };
+  const next = {
+    ...previous,
+    [key]: {
+      ...existing,
+      ...Object.fromEntries(
+        Object.entries(update).filter(([, value]) => value !== undefined)
+      ),
+    },
+  };
+  return Object.fromEntries(
+    Object.entries(next)
+      .filter(([entryKey]) => entryKey !== key)
+      .sort(
+        (a, b) =>
+          Math.max(b[1].dbLastUpdated, b[1].googleLastUpdated) -
+          Math.max(a[1].dbLastUpdated, a[1].googleLastUpdated)
+      )
+      .slice(0, 11)
+      .concat([[key, next[key]!]])
+  );
+}

package/src/hooks/pwa-install-prompt.ts

@@ -0,0 +1,44 @@
+export interface PwaInstallPrompt extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+}
+type InstallStore = {
+  prompt: PwaInstallPrompt | null;
+  listeners: Set<() => void>;
+};
+declare global {
+  interface Window {
+    __tuturuuuPwaInstall?: InstallStore;
+  }
+}
+/** Capture before hydration, retaining the one-shot prompt across component mounts. */
+export function initializePwaInstall() {
+  if (typeof window === 'undefined' || window.__tuturuuuPwaInstall) return;
+  const store: InstallStore = { prompt: null, listeners: new Set() };
+  window.__tuturuuuPwaInstall = store;
+  window.addEventListener('beforeinstallprompt', (event) => {
+    event.preventDefault();
+    store.prompt = event as PwaInstallPrompt;
+    for (const listener of store.listeners) listener();
+  });
+  window.addEventListener('appinstalled', clearPwaInstallPrompt);
+}
+export function getPwaInstallPrompt() {
+  return typeof window === 'undefined'
+    ? null
+    : (window.__tuturuuuPwaInstall?.prompt ?? null);
+}
+export function subscribePwaInstall(listener: () => void) {
+  initializePwaInstall();
+  const store = window.__tuturuuuPwaInstall!;
+  store.listeners.add(listener);
+  return () => {
+    store.listeners.delete(listener);
+  };
+}
+export function clearPwaInstallPrompt() {
+  const store = window.__tuturuuuPwaInstall;
+  if (!store) return;
+  store.prompt = null;
+  for (const listener of store.listeners) listener();
+}

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

@@ -1,7 +1,10 @@
 'use client';
 
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { listWorkspaceCalendars } from '@tuturuuu/internal-api/calendar';
+import {
+  listWorkspaceCalendars,
+  syncWorkspaceCalendar,
+} from '@tuturuuu/internal-api/calendar';
 import type {
   Workspace,
   WorkspaceCalendarEvent,
@@ -12,6 +15,7 @@ import { isAllDayEvent } from '@tuturuuu/utils/calendar-utils';
 import dayjs from 'dayjs';
 import {
   createContext,
+  type SetStateAction,
   useCallback,
   useContext,
   useEffect,
@@ -20,6 +24,11 @@ import {
   useState,
 } from 'react';
 import { toast } from '../components/ui/sonner';
+import {
+  type CacheUpdate,
+  type CalendarCache,
+  updateCalendarRangeCache,
+} from './calendar-range-cache';
 
 // Type for calendar connection
 type CalendarConnection = {
@@ -119,7 +128,9 @@ const CalendarSyncContext = createContext<{
   calendarConnections: CalendarConnection[];
   enabledCalendarIds: Set<string>;
   updateCalendarConnection: (connectionId: string, isEnabled: boolean) => void;
-  setCalendarConnections: (connections: CalendarConnection[]) => void;
+  setCalendarConnections: (
+    connections: SetStateAction<CalendarConnection[]>
+  ) => void;
 
   // Sync status
   syncStatus: SyncStatus;
@@ -164,24 +175,6 @@ const CalendarSyncContext = createContext<{
   isSyncing: false,
 });
 
-// Add a type for the cache
-type CalendarCache = {
-  [key: string]: {
-    dbEvents: WorkspaceCalendarEvent[];
-    googleEvents: WorkspaceCalendarEvent[];
-    dbLastUpdated: number;
-    googleLastUpdated: number;
-  };
-};
-
-// Helper type for cache updates
-type CacheUpdate = {
-  dbEvents?: WorkspaceCalendarEvent[];
-  googleEvents?: WorkspaceCalendarEvent[];
-  dbLastUpdated?: number;
-  googleLastUpdated?: number;
-};
-
 export const CalendarSyncProvider = ({
   children,
   wsId,
@@ -264,12 +257,7 @@ export const CalendarSyncProvider = ({
     []
   );
 
-  const setCalendarConnections = useCallback(
-    (connections: CalendarConnection[]) => {
-      setCalendarConnectionsState(connections);
-    },
-    []
-  );
+  const setCalendarConnections = setCalendarConnectionsState;
 
   // Helper to generate cache key from dates
   const getCacheKey = useCallback((dateRange: Date[]) => {
@@ -280,8 +268,8 @@ export const CalendarSyncProvider = ({
   }, []);
 
   const activeCacheKey = useMemo(
-    () => getCacheKey(dates),
-    [dates, getCacheKey]
+    () => (dates.length ? `${wsId}:${getCacheKey(dates)}` : ''),
+    [dates, getCacheKey, wsId]
   );
   const activeCachedDatabaseEvents = activeCacheKey
     ? calendarCache[activeCacheKey]?.dbEvents
@@ -329,36 +317,10 @@ export const CalendarSyncProvider = ({
     return isStale;
   };
 
-  // Helper to update cache safely
   const updateCache = useCallback((cacheKey: string, update: CacheUpdate) => {
-    setCalendarCache((prev) => {
-      const existing = prev[cacheKey] || {
-        dbEvents: [],
-        googleEvents: [],
-        dbLastUpdated: 0,
-        googleLastUpdated: 0,
-      };
-
-      return {
-        ...prev,
-        [cacheKey]: {
-          dbEvents:
-            update.dbEvents !== undefined ? update.dbEvents : existing.dbEvents,
-          googleEvents:
-            update.googleEvents !== undefined
-              ? update.googleEvents
-              : existing.googleEvents,
-          dbLastUpdated:
-            update.dbLastUpdated !== undefined
-              ? update.dbLastUpdated
-              : existing.dbLastUpdated,
-          googleLastUpdated:
-            update.googleLastUpdated !== undefined
-              ? update.googleLastUpdated
-              : existing.googleLastUpdated,
-        },
-      };
-    });
+    setCalendarCache((prev) =>
+      updateCalendarRangeCache(prev, cacheKey, update)
+    );
   }, []);
 
   const isVisibleInCurrentRange = useCallback(
@@ -634,46 +596,10 @@ export const CalendarSyncProvider = ({
       });
 
       try {
-        // Use fixed date range for consistent incremental sync (60 days past, 90 days future)
-        // This ensures sync tokens work properly instead of constantly changing ranges
-        // Reduced from 270 days to 150 days for better performance
-        const activeSyncResponse = await fetch(
-          `/api/v1/workspaces/${wsId}/calendar/sync`,
-          {
-            method: 'POST',
-            credentials: 'include',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              direction: 'inbound',
-              source: 'manual',
-            }),
-          }
-        );
-
-        if (!activeSyncResponse.ok) {
-          const errorData = await activeSyncResponse.json();
-          const errorMessage =
-            errorData.error ||
-            (errorData.code === 'sync_already_running'
-              ? 'sync_in_progress'
-              : 'Failed to sync calendar');
-
-          setError(new Error(errorMessage));
-          setSyncStatus({
-            state: 'error',
-            message: errorMessage,
-            lastSyncTime: new Date(),
-          });
-
-          // Show detailed error toast
-          toast.error('Calendar sync failed', {
-            description: errorMessage,
-            duration: 5000,
-          });
-          return;
-        }
-
-        await activeSyncResponse.json();
+        const result = await syncWorkspaceCalendar(wsId);
+        // Partial imports can change events even when another calendar fails.
+        refresh();
+        if (!result.ok) throw new Error(result.error || 'Calendar sync failed');
 
         setError(null);
         setSyncStatus({
@@ -683,9 +609,6 @@ export const CalendarSyncProvider = ({
           direction: 'google-to-tuturuuu',
         });
 
-        // Refresh the cache to trigger queryClient to refetch the data from database
-        refresh();
-
         if (progressCallback) {
           progressCallback({
             phase: 'complete',

package/src/hooks/use-calendar.tsx

@@ -5,6 +5,7 @@ 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,
@@ -12,10 +13,7 @@ import type {
 } from '@tuturuuu/types';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
-import {
-  createAllDayEvent,
-  isAllDayEvent,
-} from '@tuturuuu/utils/calendar-utils';
+import { createAllDayEvent } from '@tuturuuu/utils/calendar-utils';
 import dayjs from 'dayjs';
 import moment from 'moment';
 import 'moment/locale/vi';
@@ -30,20 +28,10 @@ import {
   useState,
 } from 'react';
 import { getTaskApiUrl } from '../lib/tasks-app-url';
+import { roundToNearest15Minutes } from './calendar-date-utils';
+import { createCalendarEventLookup } from './calendar-event-lookup';
 import { useCalendarSync } from './use-calendar-sync';
-
-// Utility function to round time to nearest 15-minute interval
-const roundToNearest15Minutes = (date: Date): Date => {
-  const minutes = date.getMinutes();
-  const remainder = minutes % 15;
-  const roundedMinutes =
-    remainder < 8 ? minutes - remainder : minutes + (15 - remainder);
-  const roundedDate = new Date(date);
-  roundedDate.setMinutes(roundedMinutes);
-  roundedDate.setSeconds(0);
-  roundedDate.setMilliseconds(0);
-  return roundedDate;
-};
+import { useOpenInitialCalendarEvent } from './use-open-initial-calendar-event';
 
 type TaskDragData = {
   name?: string;
@@ -426,6 +414,7 @@ export const CalendarProvider = ({
   useQueryClient,
   children,
   experimentalGoogleToken: _experimentalGoogleToken,
+  initialEventId,
   eventAdapter,
   readOnly = false,
 }: {
@@ -434,24 +423,22 @@ export const CalendarProvider = ({
   useQueryClient: any;
   children: ReactNode;
   experimentalGoogleToken?: WorkspaceCalendarGoogleTokenClient | null;
+  initialEventId?: string;
   eventAdapter?: CalendarEventAdapter;
   readOnly?: boolean;
 }) => {
   const queryClient = useQueryClient();
 
-  // Add debounce timer reference for update events
   const updateDebounceTimerRef = useRef<NodeJS.Timeout | null>(null);
   const pendingUpdatesRef = useRef<Map<string, PendingEventUpdate>>(
     new Map<string, PendingEventUpdate>()
   );
 
-  // Queue for processing updates in order
   const updateQueueRef = useRef<PendingEventUpdate[]>([]);
   const isProcessingQueueRef = useRef<boolean>(false);
 
   const { events, refresh, patchVisibleEvents } = useCalendarSync();
 
-  // Modal state
   const [activeEventId, setActiveEventId] = useState<string | null>(null);
   const [previewEventId, setPreviewEventId] = useState<string | null>(null);
   const [isModalHidden, setModalHidden] = useState(false);
@@ -461,7 +448,6 @@ export const CalendarProvider = ({
     'manual'
   );
 
-  // Callback for when a task is scheduled (allows components to refresh)
   const [onTaskScheduled, setOnTaskScheduled] = useState<
     (() => void) | undefined
   >(undefined);
@@ -516,44 +502,8 @@ export const CalendarProvider = ({
     [events]
   );
 
-  const getCurrentEvents = useCallback(
-    (date?: Date) => {
-      const targetDate = date || new Date();
-      const targetDay = new Date(
-        targetDate.getFullYear(),
-        targetDate.getMonth(),
-        targetDate.getDate()
-      );
-
-      return events.filter((e: CalendarEvent) => {
-        const eventStart = new Date(e.start_at);
-        const eventEnd = new Date(e.end_at);
-
-        // Normalize dates to compare just the date part (ignoring time)
-        const eventStartDay = new Date(
-          eventStart.getFullYear(),
-          eventStart.getMonth(),
-          eventStart.getDate()
-        );
-
-        const eventEndDay = new Date(
-          eventEnd.getFullYear(),
-          eventEnd.getMonth(),
-          eventEnd.getDate()
-        );
-
-        // Use only time-based logic for all-day detection
-        const isAllDay = isAllDayEvent(e);
-
-        // For all-day events, treat end date as exclusive (consistent with week view)
-        // For timed events, treat end date as inclusive
-        if (isAllDay) {
-          return eventStartDay <= targetDay && eventEndDay > targetDay;
-        } else {
-          return eventStartDay <= targetDay && eventEndDay >= targetDay;
-        }
-      });
-    },
+  const getCurrentEvents = useMemo(
+    () => createCalendarEventLookup(events),
     [events]
   );
 
@@ -1310,6 +1260,12 @@ export const CalendarProvider = ({
     [ws?.id, eventAdapter, events]
   );
 
+  useOpenInitialCalendarEvent({
+    events,
+    initialEventId,
+    onOpen: openEventEditor,
+  });
+
   const openModal = useCallback(
     (
       eventId?: string,
@@ -1412,19 +1368,12 @@ export const CalendarProvider = ({
           });
         }
 
-        const response = await fetch(
-          `/api/v1/workspaces/${ws.id}/calendar/sync`,
-          {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ direction: 'inbound', source: 'manual' }),
-          }
-        );
-
-        const result = await response.json().catch(() => null);
-        if (!response.ok) {
-          throw new Error(result?.error || 'Calendar sync failed');
-        }
+        const result = await syncWorkspaceCalendar(ws.id);
+        await queryClient.invalidateQueries({
+          queryKey: ['databaseCalendarEvents', ws.id],
+          exact: false,
+        });
+        if (!result.ok) throw new Error(result.error || 'Calendar sync failed');
 
         const inserted =
           (result?.summary?.google?.inserted ?? 0) +
@@ -1437,11 +1386,6 @@ export const CalendarProvider = ({
           (result?.summary?.microsoft?.deleted ?? 0);
         const changesMade = inserted + updated + deleted > 0;
 
-        await queryClient.invalidateQueries({
-          queryKey: ['databaseCalendarEvents', ws.id],
-          exact: false,
-        });
-
         if (progressCallback) {
           progressCallback({
             phase: 'complete',