@tuturuuu/ui 0.38.0 → 0.39.0

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

@@ -1,5 +1,6 @@
 import type { WorkspaceCalendarEventUpdatePayload } from '@tuturuuu/internal-api';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { isProviderRecurrenceReadonly } from '@tuturuuu/utils/calendar-provider-readonly';
 
 export function calendarEventUpdatePayload(
   input: Partial<CalendarEvent>
@@ -22,3 +23,35 @@ export function calendarEventUpdatePayload(
     payload.color = input.color;
   return payload;
 }
+
+export function cleanCalendarEventUpdates(input: Partial<CalendarEvent>) {
+  const result: Partial<CalendarEvent> = {};
+  for (const field of [
+    'title',
+    'description',
+    'start_at',
+    'end_at',
+    'color',
+    'location',
+    'locked',
+    'source',
+  ] as const) {
+    if (input[field] !== undefined)
+      Object.assign(result, { [field]: input[field] });
+  }
+  return result;
+}
+export function calendarEventByIdentity(events: CalendarEvent[], id: string) {
+  return events.find((event) => event.id === id || event._originalId === id);
+}
+export function assertOrdinaryCalendarEvent(
+  events: CalendarEvent[],
+  id: string
+) {
+  if (isProviderRecurrenceReadonly(calendarEventByIdentity(events, id)))
+    throw new Error('Unsupported provider recurrence is read only');
+  if (calendarEventByIdentity(events, id)?.seriesId)
+    throw new Error(
+      'Recurring occurrences require an explicit series edit scope'
+    );
+}

package/src/hooks/collaboration-document-hydration.ts

@@ -0,0 +1,35 @@
+interface DocumentHydrationOptions {
+  load: () => Promise<number[] | null>;
+  apply: (state: Uint8Array) => void;
+  isActive: () => boolean;
+  onLoaded: () => void;
+  onError: () => void;
+}
+
+/** Coalesces durable reads and fences late completion after resource teardown. */
+export class DocumentHydration {
+  private pending: Promise<boolean> | undefined;
+
+  constructor(private readonly options: DocumentHydrationOptions) {}
+
+  load(): Promise<boolean> {
+    if (this.pending) return this.pending;
+    this.pending = this.read().finally(() => {
+      this.pending = undefined;
+    });
+    return this.pending;
+  }
+
+  private async read(): Promise<boolean> {
+    try {
+      const state = await this.options.load();
+      if (!this.options.isActive()) return false;
+      if (state?.length) this.options.apply(Uint8Array.from(state));
+      this.options.onLoaded();
+      return true;
+    } catch {
+      if (this.options.isActive()) this.options.onError();
+      return false;
+    }
+  }
+}

package/src/hooks/supabase-provider.ts

@@ -7,6 +7,7 @@ import debug from 'debug';
 import { EventEmitter } from 'eventemitter3';
 import * as awarenessProtocol from 'y-protocols/awareness';
 import * as Y from 'yjs';
+import { DocumentHydration } from './collaboration-document-hydration';
 import { isPageVisible } from './use-page-visibility';
 
 export const SUPABASE_PROVIDER_SYNC_ORIGIN = Symbol.for(
@@ -31,6 +32,9 @@ export interface SupabaseProviderConfig {
 export default class SupabaseProvider extends EventEmitter {
   public awareness: awarenessProtocol.Awareness;
   public connected = false;
+  public hydrated = false;
+  private connectionGeneration = 0;
+  private hydration: DocumentHydration;
   private channel: RealtimeChannel | null = null;
   private realtime = createRealtimeClient();
   private pendingAwarenessClients = new Set<number>();
@@ -78,12 +82,10 @@ export default class SupabaseProvider extends EventEmitter {
     }
 
     if (!this.connected || this.destroyed) {
-      this.logger('skipping broadcast - not connected or destroyed');
       return;
     }
 
     if (!update || update.length === 0) {
-      this.logger('skipping broadcast - empty update');
       return;
     }
 
@@ -125,7 +127,6 @@ export default class SupabaseProvider extends EventEmitter {
 
     this.saveTimeout = setTimeout(() => {
       this.saveTimeout = undefined;
-      this.logger('debounce period elapsed, saving to database');
       void this.save();
     }, this.saveDebounceMs);
   }
@@ -145,7 +146,6 @@ export default class SupabaseProvider extends EventEmitter {
     if (this.saveTimeout) {
       clearTimeout(this.saveTimeout);
       this.saveTimeout = undefined;
-      this.logger('flushing pending save immediately');
       await this.save();
     }
   }
@@ -269,39 +269,20 @@ export default class SupabaseProvider extends EventEmitter {
   }
 
   private async onConnect() {
-    this.logger('connected');
-
     this.reconnectAttempts = 0;
     if (this.reconnectTimeout) {
       clearTimeout(this.reconnectTimeout);
       this.reconnectTimeout = undefined;
     }
 
-    const persistedState = this.config.loadState
-      ? await this.config.loadState()
-      : await (async () => {
-          const { data, status } = await this.supabase
-            .from(this.config.tableName as any)
-            .select<string, { [key: string]: number[] }>(
-              `${this.config.columnName}`
-            )
-            .eq(this.config.idName || 'id', this.config.id)
-            .single();
-
-          this.logger('retrieved data from supabase', status);
-          return data?.[this.config.columnName] ?? null;
-        })();
-
-    if (persistedState && persistedState.length > 0) {
-      this.logger('applying update to yjs');
-      try {
-        this.applyUpdate(Uint8Array.from(persistedState), this);
-      } catch (error) {
-        this.logger(error);
-      }
-    }
+    const generation = this.connectionGeneration;
+    if (
+      !(await this.hydration.load()) ||
+      this.destroyed ||
+      generation !== this.connectionGeneration
+    )
+      return;
 
-    this.logger('setting connected flag to true');
     this.isOnline(true);
 
     this.synced = true;
@@ -416,9 +397,33 @@ export default class SupabaseProvider extends EventEmitter {
     this.logger = debug(`y-${doc.clientID}`);
     this.logger.enabled = true;
 
-    this.logger('constructor initializing');
-    this.logger('connecting to Cloudflare realtime', doc.guid);
-    this.logger(`save debounce set to ${this.saveDebounceMs}ms`);
+    this.hydration = new DocumentHydration({
+      load:
+        this.config.loadState ??
+        (async () => {
+          const { data, error } = await this.supabase
+            .from(this.config.tableName as any)
+            .select<string, { [key: string]: number[] }>(this.config.columnName)
+            .eq(this.config.idName || 'id', this.config.id)
+            .single();
+          if (error) throw error;
+          return data?.[this.config.columnName] ?? null;
+        }),
+      apply: (state) => Y.applyUpdate(this.doc, state, this),
+      isActive: () => !this.destroyed,
+      onLoaded: () => {
+        this.hydrated = true;
+        this.emit('hydrated');
+      },
+      onError: () =>
+        this.emit('error', {
+          message: 'Unable to load collaboration document',
+          channel: this.config.channel,
+          status: 'DOCUMENT_ERROR',
+        }),
+    });
+    // Durable reads must not depend on a successful peer transport connection.
+    void this.hydration.load();
 
     if (
       this.config.resyncInterval ||
@@ -438,12 +443,10 @@ export default class SupabaseProvider extends EventEmitter {
         }
 
         if (!isPageVisible()) {
-          this.logger('skipping resync - page not visible');
           return;
         }
 
         if (!this._dirty) {
-          this.logger('skipping resync - no local changes');
           return;
         }
 
@@ -542,7 +545,6 @@ export default class SupabaseProvider extends EventEmitter {
 
   public onConnecting() {
     if (!this.isOnline()) {
-      this.logger('connecting');
       this.emit('status', [{ status: 'connecting' }]);
     }
   }
@@ -551,7 +553,6 @@ export default class SupabaseProvider extends EventEmitter {
     if (this.destroyed || this.reconnectTimeout) return;
 
     if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      this.logger('max reconnect attempts reached');
       this.emit('reconnect-failed');
       return;
     }
@@ -581,7 +582,6 @@ export default class SupabaseProvider extends EventEmitter {
   public resetAndReconnect() {
     if (this.destroyed || this.connected) return;
 
-    this.logger('resetAndReconnect: resetting backoff and reconnecting');
     this.reconnectAttempts = 0;
 
     if (this.reconnectTimeout) {
@@ -594,11 +594,10 @@ export default class SupabaseProvider extends EventEmitter {
   }
 
   public onDisconnect() {
-    this.logger('disconnected');
+    this.connectionGeneration++;
 
     this.synced = false;
     this.isOnline(false);
-    this.logger('set connected flag to false');
     if (this.isOnline()) {
       this.emit('status', [{ status: 'disconnected' }]);
     }
@@ -633,7 +632,6 @@ export default class SupabaseProvider extends EventEmitter {
     if (!message) {
       this.logger(`Permission denied to channel`);
     }
-    this.logger('processed message (type = MessageAuth)');
   }
 
   public destroy() {

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

@@ -26,6 +26,7 @@ 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,
@@ -33,7 +34,13 @@ import {
 } from './calendar-creation-request';
 import { roundToNearest15Minutes } from './calendar-date-utils';
 import { createCalendarEventLookup } from './calendar-event-lookup';
-import { calendarEventUpdatePayload } from './calendar-event-write-payload';
+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';
 
@@ -229,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;
@@ -484,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]
   );
@@ -917,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) {
@@ -1075,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
@@ -1618,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-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,
+  };
+}