@tuturuuu/ui 0.37.2 → 0.39.0

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

@@ -21,6 +21,14 @@ import {
 } from 'react';
 import { toast } from '../components/ui/sonner';
 import { calendarQueryRange } from '../lib/calendar-day';
+import type {
+  CalendarConnection,
+  CalendarOptimisticStatus,
+  OptimisticCalendarPatchOptions,
+  OptimisticCalendarState,
+  OptimisticCalendarSyncEvent,
+  CalendarSyncStatus as SyncStatus,
+} from './calendar-connection-types';
 import { runCalendarProviderSync } from './calendar-provider-sync';
 import {
   type CacheUpdate,
@@ -32,22 +40,10 @@ import {
   calendarRangeCacheKey,
   calendarRangeIncludesToday,
 } from './calendar-sync-range';
-
-// Type for calendar connection
-type CalendarConnection = {
-  id: string;
-  ws_id: string;
-  calendar_id: string;
-  calendar_name: string;
-  is_enabled: boolean;
-  color: string | null;
-  provider?: 'google' | 'microsoft' | string;
-  auth_token_id?: string | null;
-  workspace_calendar_id?: string | null;
-  access_role?: string | null;
-  created_at: string;
-  updated_at: string;
-};
+import {
+  nativeOccurrencesKey,
+  useNativeCalendarOccurrences,
+} from './use-native-calendar-occurrences';
 
 // Extended CalendarEvent type with habit flags
 export type CalendarEventWithHabitInfo = CalendarEvent & {
@@ -56,40 +52,7 @@ export type CalendarEventWithHabitInfo = CalendarEvent & {
   _optimisticStatus?: CalendarOptimisticStatus;
 };
 
-// Sync status type
-type SyncStatus = {
-  state: 'idle' | 'syncing' | 'success' | 'error';
-  message?: string;
-  lastSyncTime?: Date;
-  direction?: 'google-to-tuturuuu' | 'tuturuuu-to-google' | 'both';
-};
-
-export type CalendarOptimisticStatus =
-  | 'creating'
-  | 'updating'
-  | 'deleting'
-  | 'error';
-
-type OptimisticCalendarSyncEvent = Partial<
-  Omit<CalendarEvent, 'color' | 'description' | 'location'>
-> &
-  Pick<CalendarEvent, 'id'> & {
-    color?: CalendarEvent['color'] | string | null;
-    description?: string | null;
-    location?: string | null;
-    _optimisticStatus?: CalendarOptimisticStatus;
-  };
-
-type OptimisticCalendarPatchOptions = {
-  removeIds?: string[];
-  clearIds?: string[];
-  status?: CalendarOptimisticStatus;
-};
-
-type OptimisticCalendarState = {
-  events: Record<string, OptimisticCalendarSyncEvent>;
-  removedIds: string[];
-};
+export type { CalendarOptimisticStatus } from './calendar-connection-types';
 
 const CalendarSyncContext = createContext<{
   data: WorkspaceCalendarEvent[] | null;
@@ -222,6 +185,12 @@ export const CalendarSyncProvider = ({
   const isForcedRef = useRef<boolean>(false);
   const lastSyncTimeRef = useRef<number>(0);
   const queryClient = useQueryClient();
+  const nativeOccurrences = useNativeCalendarOccurrences(
+    wsId,
+    dates,
+    timezone,
+    hasExternalEvents
+  );
 
   // Calendar connections state
   const [calendarConnections, setCalendarConnectionsState] = useState<
@@ -514,6 +483,7 @@ export const CalendarSyncProvider = ({
     if (!activeCacheKey) return null;
 
     isForcedRef.current = true;
+    queryClient.invalidateQueries({ queryKey: nativeOccurrencesKey(wsId) });
 
     queryClient.invalidateQueries({
       queryKey: ['databaseCalendarEvents', wsId, activeCacheKey],
@@ -641,8 +611,17 @@ export const CalendarSyncProvider = ({
     () =>
       hasExternalEvents
         ? ((externalEvents ?? []) as WorkspaceCalendarEvent[])
-        : (fetchedData ?? activeCachedDatabaseEvents ?? []),
-    [activeCachedDatabaseEvents, externalEvents, fetchedData, hasExternalEvents]
+        : [
+            ...(fetchedData ?? activeCachedDatabaseEvents ?? []),
+            ...nativeOccurrences.data,
+          ],
+    [
+      activeCachedDatabaseEvents,
+      externalEvents,
+      fetchedData,
+      hasExternalEvents,
+      nativeOccurrences.data,
+    ]
   );
 
   const visibleEventsWithOptimisticState = useMemo(() => {
@@ -768,20 +747,16 @@ export const CalendarSyncProvider = ({
   const eventsWithoutAllDays = useMemo(() => {
     // Process events immediately when they change
     return events.filter((event) => {
-      // Note: We can't access settings here easily, so we use default timezone detection
-      // This is acceptable since this is used for layout purposes mainly
-      return !isAllDayEvent(event);
+      return !isAllDayEvent(event, timezone);
     });
-  }, [events]);
+  }, [events, timezone]);
 
   const allDayEvents = useMemo(() => {
     // Process events immediately when they change
     return events.filter((event) => {
-      // Note: We can't access settings here easily, so we use default timezone detection
-      // This is acceptable since this is used for layout purposes mainly
-      return isAllDayEvent(event);
+      return isAllDayEvent(event, timezone);
     });
-  }, [events]);
+  }, [events, timezone]);
 
   const syncToGoogle = useCallback(async () => {
     toast.info('Provider events sync when you create or edit them.');
@@ -798,7 +773,7 @@ export const CalendarSyncProvider = ({
       ? ((externalEvents ?? []) as WorkspaceCalendarEvent[])
       : (fetchedData ?? activeCachedDatabaseEvents ?? null),
     googleData,
-    error,
+    error: error ?? nativeOccurrences.error,
     dates,
     setDates,
     timezone,
@@ -828,7 +803,11 @@ export const CalendarSyncProvider = ({
     syncStatus,
 
     // Loading states
-    isLoading: externalEventsLoading || isDatabaseLoading || isGoogleLoading,
+    isLoading:
+      externalEventsLoading ||
+      isDatabaseLoading ||
+      isGoogleLoading ||
+      (!hasExternalEvents && dates.length > 0 && nativeOccurrences.isLoading),
     isSyncing,
   };
 

package/src/hooks/use-calendar.tsx

@@ -3,7 +3,6 @@ import {
   deleteWorkspaceCalendarEvent,
   updateWorkspaceCalendarEvent,
   type WorkspaceCalendarEventCreatePayload,
-  type WorkspaceCalendarEventUpdatePayload,
 } from '@tuturuuu/internal-api';
 import { createClient } from '@tuturuuu/supabase/next/client';
 import type {
@@ -27,9 +26,21 @@ import {
   useRef,
   useState,
 } from 'react';
+import { NativeRecurrenceContextMenu } from '../components/ui/legacy/calendar/native-recurrence-context-menu';
 import { getTaskApiUrl } from '../lib/tasks-app-url';
+import {
+  createCalendarCreationRequests,
+  createOptimisticEventId,
+} from './calendar-creation-request';
 import { roundToNearest15Minutes } from './calendar-date-utils';
 import { createCalendarEventLookup } from './calendar-event-lookup';
+import type { PendingEventUpdate } from './calendar-event-update-queue-types';
+import {
+  assertOrdinaryCalendarEvent,
+  calendarEventByIdentity,
+  calendarEventUpdatePayload,
+  cleanCalendarEventUpdates,
+} from './calendar-event-write-payload';
 import { useCalendarSync } from './use-calendar-sync';
 import { useOpenInitialCalendarEvent } from './use-open-initial-calendar-event';
 
@@ -39,17 +50,6 @@ type TaskDragData = {
   totalDuration?: number;
 };
 
-const createOptimisticEventId = () => {
-  if (
-    typeof crypto !== 'undefined' &&
-    typeof crypto.randomUUID === 'function'
-  ) {
-    return `optimistic-${crypto.randomUUID()}`;
-  }
-
-  return `optimistic-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-};
-
 const noStoreFetchOptions = {
   fetch: (input: RequestInfo | URL, init?: RequestInit) =>
     fetch(input, { ...init, cache: 'no-store' }),
@@ -101,7 +101,8 @@ const CalendarContext = createContext<{
   getGoogleEvents: () => CalendarEvent[];
   getEventLevel: (eventId: string) => number;
   addEvent: (
-    event: Omit<CalendarEvent, 'id'>
+    event: Omit<CalendarEvent, 'id'>,
+    options?: { requestId?: string }
   ) => Promise<CalendarEvent | undefined>;
   addEmptyEvent: (date: Date, isAllDay?: boolean) => CalendarEvent;
   addEmptyEventWithDuration: (startDate: Date, endDate: Date) => CalendarEvent;
@@ -235,18 +236,6 @@ const CalendarContext = createContext<{
   readOnly: false,
 });
 
-// Add this interface before the updateEvent function
-interface PendingEventUpdate extends Partial<CalendarEvent> {
-  _updateId?: string;
-  _timestamp: number;
-  _eventId: string;
-  _previousEvent?: CalendarEvent;
-  _resolvers?: Array<{
-    resolve: (value: CalendarEvent) => void;
-    reject: (reason: unknown) => void;
-  }>;
-}
-
 export type CalendarEventAdapter = {
   disableBuiltInEventUi?: boolean;
   preservePastEventOpacity?: boolean;
@@ -265,11 +254,7 @@ export type CalendarEventAdapter = {
   ) => Promise<CalendarEvent | undefined> | CalendarEvent | undefined;
 };
 
-/**
- * Syncs task total_duration after a calendar event is resized or moved.
- * - Uses canonical workspace calendar events as the source of truth
- * - If total scheduled time exceeds task's total_duration, auto-increase it
- */
+/** Increase task duration when its canonical calendar schedule exceeds it. */
 async function syncTaskDurationAfterEventChange(
   supabase: any,
   eventId: string,
@@ -442,6 +427,7 @@ export const CalendarProvider = ({
   const [activeEventId, setActiveEventId] = useState<string | null>(null);
   const [previewEventId, setPreviewEventId] = useState<string | null>(null);
   const [isModalHidden, setModalHidden] = useState(false);
+  const creationRequests = useRef(createCalendarCreationRequests());
   const [pendingNewEvent, setPendingNewEvent] =
     useState<Partial<CalendarEvent> | null>(null);
   const [defaultNewEventTab, setDefaultNewEventTab] = useState<'manual' | 'ai'>(
@@ -493,11 +479,7 @@ export const CalendarProvider = ({
   // Event getters
   const getEvent = useCallback(
     (eventId: string) => {
-      // Handle IDs for split multi-day events (they contain a dash and date)
-      const originalId = eventId.includes('-')
-        ? eventId.split('-')[0]
-        : eventId;
-      return events.find((e: Partial<CalendarEvent>) => e.id === originalId);
+      return calendarEventByIdentity(events, eventId);
     },
     [events]
   );
@@ -583,13 +565,15 @@ export const CalendarProvider = ({
 
   // CRUD operations with Supabase
   const addEvent = useCallback(
-    async (event: Omit<CalendarEvent, 'id'>) => {
+    async (
+      event: Omit<CalendarEvent, 'id'>,
+      options?: { requestId?: string }
+    ) => {
       if (readOnly) {
         console.warn('Calendar is in read-only mode');
         return undefined;
       }
 
-      // Round start and end times to nearest 15-minute interval
       const startDate = roundToNearest15Minutes(new Date(event.start_at));
       const endDate = roundToNearest15Minutes(new Date(event.end_at));
 
@@ -619,7 +603,13 @@ export const CalendarProvider = ({
         locked: true,
         task_id: (event as CalendarEvent & { task_id?: string | null }).task_id,
         source: event.source,
+        ...(event.providerColor && { providerColor: event.providerColor }),
       };
+      if (event.providerColor) delete payload.color;
+      payload.requestId = creationRequests.current.forAttempt(
+        { wsId: ws.id, ...payload },
+        options?.requestId
+      );
       const optimisticId = createOptimisticEventId();
       const optimisticEvent = {
         ...event,
@@ -670,10 +660,7 @@ export const CalendarProvider = ({
 
   const addEmptyEvent = useCallback(
     (date: Date, isAllDay?: boolean) => {
-      // NOTE: This implementation uses createAllDayEvent helper for proper timezone handling
-      // This ensures all-day events are created at midnight in the user's timezone rather than UTC
-      // The workaround is necessary because dayjs timezone handling for all-day events can be inconsistent
-      // across different browsers and timezone configurations
+      // Keep all-day boundaries in the user timezone.
       const selectedDate = dayjs(date);
 
       let start_at: string;
@@ -701,10 +688,8 @@ export const CalendarProvider = ({
         end_at = endTime.toISOString();
       }
 
-      // Use default color
       const defaultColor = 'BLUE';
 
-      // Create a new event with default values
       const newEvent: CalendarEvent = {
         id: 'new',
         title: '',
@@ -736,14 +721,11 @@ export const CalendarProvider = ({
 
   const addEmptyEventWithDuration = useCallback(
     (startDate: Date, endDate: Date) => {
-      // Round start and end times to nearest 15-minute interval
       const roundedStartDate = roundToNearest15Minutes(startDate);
       const roundedEndDate = roundToNearest15Minutes(endDate);
 
-      // Use default color
       const defaultColor = 'BLUE';
 
-      // Create a new event with default values
       const newEvent: CalendarEvent = {
         id: 'new',
         title: '',
@@ -832,22 +814,7 @@ export const CalendarProvider = ({
 
       try {
         // Clean up the update data to ensure no undefined values and exclude system fields
-        const cleanUpdateData: WorkspaceCalendarEventUpdatePayload = {
-          ...(updateData.title !== undefined && { title: updateData.title }),
-          ...(updateData.description !== undefined && {
-            description: updateData.description,
-          }),
-          ...(updateData.start_at !== undefined && {
-            start_at: updateData.start_at,
-          }),
-          ...(updateData.end_at !== undefined && { end_at: updateData.end_at }),
-          ...(updateData.color !== undefined && { color: updateData.color }),
-          ...(updateData.location !== undefined && {
-            location: updateData.location,
-          }),
-          ...(updateData.locked !== undefined && { locked: updateData.locked }),
-          ...(updateData.source !== undefined && { source: updateData.source }),
-        };
+        const cleanUpdateData = calendarEventUpdatePayload(updateData);
 
         // ws is guaranteed to be defined here (validated above at line 732)
         const wsId = ws!.id;
@@ -941,24 +908,8 @@ export const CalendarProvider = ({
         return undefined;
       }
 
-      // Clean and validate the event updates - only allow known CalendarEvent fields
-      const allowedFields: (keyof CalendarEvent)[] = [
-        'title',
-        'description',
-        'start_at',
-        'end_at',
-        'color',
-        'location',
-        'locked',
-        'source',
-      ];
-
-      const cleanedUpdates: Partial<CalendarEvent> = {};
-      for (const field of allowedFields) {
-        if (eventUpdates[field] !== undefined) {
-          (cleanedUpdates as any)[field] = eventUpdates[field];
-        }
-      }
+      assertOrdinaryCalendarEvent(events, eventId);
+      const cleanedUpdates = cleanCalendarEventUpdates(eventUpdates);
 
       // Round start and end times to nearest 15-minute interval if they exist
       if (cleanedUpdates.start_at) {
@@ -1099,6 +1050,7 @@ export const CalendarProvider = ({
         console.warn('Calendar is in read-only mode');
         return;
       }
+      assertOrdinaryCalendarEvent(events, eventId);
       // If this is a pending new event that hasn't been saved yet
       if (pendingNewEvent && eventId === 'new') {
         // Just clear the pending event
@@ -1642,8 +1594,18 @@ export const CalendarProvider = ({
     defaultNewEventTab,
     disableBuiltInEventUi: eventAdapter?.disableBuiltInEventUi ?? false,
     preservePastEventOpacity: eventAdapter?.preservePastEventOpacity ?? false,
-    renderEventContextMenu: eventAdapter?.renderContextMenu,
-    isEventReadOnly: eventAdapter?.isEventReadOnly ?? (() => false),
+    renderEventContextMenu: (event: CalendarEvent) =>
+      event.seriesId ? (
+        <NativeRecurrenceContextMenu
+          onEdit={() => openEventEditor(event._originalId ?? event.id)}
+          readOnly={readOnly}
+        />
+      ) : (
+        eventAdapter?.renderContextMenu?.(event)
+      ),
+    isEventReadOnly: (event: CalendarEvent) =>
+      Boolean(event.seriesId) ||
+      (eventAdapter?.isEventReadOnly?.(event) ?? false),
     readOnly,
   };
 

package/src/hooks/use-exchange-rates.ts

@@ -1,23 +1,12 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import type { ExchangeRate } from '@tuturuuu/utils/exchange-rates';
-
-interface ExchangeRatesResponse {
-  data: ExchangeRate[];
-  date: string | null;
-}
+import { getExchangeRates } from '@tuturuuu/internal-api/finance-exchange-rates';
 
 export function useExchangeRates() {
-  return useQuery<ExchangeRatesResponse>({
+  return useQuery({
     queryKey: ['exchange-rates', 'latest'],
-    queryFn: async () => {
-      const res = await fetch('/api/v1/exchange-rates', {
-        cache: 'no-store',
-      });
-      if (!res.ok) throw new Error('Failed to fetch exchange rates');
-      return res.json();
-    },
-    staleTime: 60 * 60 * 1000, // 1 hour — rates update daily
+    queryFn: () => getExchangeRates(),
+    staleTime: 60 * 60 * 1000,
   });
 }

package/src/hooks/use-local-storage.ts

@@ -9,16 +9,14 @@ export const useLocalStorage = <T>(
   const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
-    // Retrieve from localStorage
-    const item = window.localStorage.getItem(key);
-    if (item) {
-      try {
-        setStoredValue(JSON.parse(item));
-      } catch (error) {
-        console.error(error);
-      }
+    try {
+      const item = window.localStorage.getItem(key);
+      if (item) setStoredValue(JSON.parse(item));
+    } catch {
+      console.error('Unable to read browser preferences.');
+    } finally {
+      setInitialized(true);
     }
-    setInitialized(true);
   }, [key]);
 
   const setValue = useCallback(
@@ -29,8 +27,8 @@ export const useLocalStorage = <T>(
         // Save to localStorage
         try {
           window.localStorage.setItem(key, JSON.stringify(valueToStore));
-        } catch (error) {
-          console.error(error);
+        } catch {
+          console.error('Unable to save browser preferences.');
         }
         return valueToStore;
       });

package/src/hooks/use-native-calendar-occurrences.ts

@@ -0,0 +1,85 @@
+'use client';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { listNativeCalendarOccurrences } from '@tuturuuu/internal-api/calendar-series';
+import { InternalApiError } from '@tuturuuu/internal-api/client';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { useEffect } from 'react';
+import { calendarQueryRange } from '../lib/calendar-day';
+import { useWorkspaceActor } from './use-workspace-visibility';
+export const EMPTY_NATIVE_OCCURRENCES: CalendarEvent[] = [];
+export const nativeOccurrencesKey = (wsId: string) =>
+  ['native-calendar-occurrences', wsId] as const;
+export function deniedNativeOccurrences(error: unknown) {
+  return (
+    error instanceof InternalApiError &&
+    (error.status === 401 ||
+      error.status === 404 ||
+      (error.status === 403 && error.code !== 'MFA_REQUIRED'))
+  );
+}
+/** A denied snapshot is never rendered as stale data. MFA is a recoverable challenge. */
+export function visibleNativeOccurrences(
+  data: CalendarEvent[] | undefined,
+  error: unknown
+) {
+  return deniedNativeOccurrences(error)
+    ? EMPTY_NATIVE_OCCURRENCES
+    : (data ?? EMPTY_NATIVE_OCCURRENCES);
+}
+export function useNativeCalendarOccurrences(
+  wsId: string,
+  dates: Date[],
+  timezone: string | undefined,
+  external: boolean
+) {
+  const actor = useWorkspaceActor();
+  const actorId = actor?.actorId;
+  const client = useQueryClient();
+  const range = dates.length ? calendarQueryRange(dates, timezone) : undefined;
+  const from = range?.start.toISOString();
+  const to = range?.end.toISOString();
+  const key = [...nativeOccurrencesKey(wsId), actorId, from, to];
+  const enabled = !external && !!actor && !!wsId && !!from && !!to;
+  useEffect(
+    () => () => {
+      client.removeQueries({
+        queryKey: [...nativeOccurrencesKey(wsId), actorId],
+      });
+    },
+    [client, wsId, actorId]
+  );
+  const query = useQuery({
+    queryKey: key,
+    enabled,
+    queryFn: async ({ signal }) => {
+      actor!.assertActive();
+      try {
+        const result = await listNativeCalendarOccurrences(
+          wsId,
+          { from: from!, to: to! },
+          { signal }
+        );
+        actor!.assertActive();
+        return result.data;
+      } catch (error) {
+        if (deniedNativeOccurrences(error))
+          client.setQueryData(key, EMPTY_NATIVE_OCCURRENCES);
+        throw error;
+      }
+    },
+    staleTime: 30_000,
+    gcTime: 30 * 60_000,
+    retry: (count, error) =>
+      !(
+        error instanceof InternalApiError &&
+        error.status >= 400 &&
+        error.status < 500
+      ) && count < 2,
+  });
+  return {
+    ...query,
+    data: enabled
+      ? visibleNativeOccurrences(query.data, query.error)
+      : EMPTY_NATIVE_OCCURRENCES,
+  };
+}

package/src/hooks/use-workspace-presence.ts

@@ -1,8 +1,8 @@
 'use client';
 
+import type { RealtimePresenceState } from '@tuturuuu/internal-api/realtime';
+import { createRealtimeClient } from '@tuturuuu/internal-api/realtime';
 import { getCurrentUserProfile } from '@tuturuuu/internal-api/users';
-import { createClient } from '@tuturuuu/supabase/next/client';
-import type { RealtimePresenceState } from '@tuturuuu/supabase/next/realtime';
 import type { User } from '@tuturuuu/types/primitives/User';
 import { DEV_MODE } from '@tuturuuu/utils/constants';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -149,14 +149,14 @@ export function useWorkspacePresence({
     if (setupPromiseRef.current) return setupPromiseRef.current;
 
     const promise = (async (): Promise<boolean> => {
-      const supabase = createClient();
+      const realtime = createRealtimeClient();
 
       try {
         if (isCleanedUpRef.current) return false;
 
         const {
           data: { user },
-        } = await supabase.auth.getUser();
+        } = await realtime.auth.getUser();
 
         if (!user?.id || isCleanedUpRef.current) return false;
 
@@ -184,12 +184,12 @@ export function useWorkspacePresence({
 
         // Clean up any stale channel
         if (channelRef.current) {
-          await supabase.removeChannel(channelRef.current);
+          await realtime.removeChannel(channelRef.current);
           channelRef.current = null;
           lastTrackSignatureRef.current = null;
         }
 
-        const channel = supabase.channel(channelKey, {
+        const channel = realtime.channel(channelKey, {
           config: {
             presence: {
               key: user.id,
@@ -238,7 +238,7 @@ export function useWorkspacePresence({
                   setupPromiseRef.current = null;
                   lastTrackSignatureRef.current = null;
                   if (deadCh) {
-                    supabase.removeChannel(deadCh).catch(() => {});
+                    realtime.removeChannel(deadCh).catch(() => {});
                   }
                   if (
                     retryCountRef.current < MAX_RETRIES &&
@@ -269,7 +269,7 @@ export function useWorkspacePresence({
                     setupPromiseRef.current = null;
                     lastTrackSignatureRef.current = null;
                     if (deadCh) {
-                      supabase.removeChannel(deadCh).catch(() => {});
+                      realtime.removeChannel(deadCh).catch(() => {});
                     }
                     // Attempt reconnection
                     if (retryCountRef.current < MAX_RETRIES) {
@@ -320,7 +320,7 @@ export function useWorkspacePresence({
       setupPromiseRef.current = null;
       if (channelRef.current) {
         channelRef.current.untrack?.().catch(() => {});
-        createClient().removeChannel(channelRef.current);
+        createRealtimeClient().removeChannel(channelRef.current);
         channelRef.current = null;
         lastTrackSignatureRef.current = null;
       }