@tuturuuu/ui 0.37.1 → 0.38.0

package/src/components/ui/legacy/calendar/event-modal.tsx

@@ -25,11 +25,7 @@ import {
   Unlock,
   X,
 } from '@tuturuuu/icons';
-import {
-  type CalendarSourceInput,
-  type CalendarSourceOption,
-  getWorkspaceCalendarDefaultSource,
-} from '@tuturuuu/internal-api';
+import { getWorkspaceCalendarDefaultSource } from '@tuturuuu/internal-api';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
 import { Badge } from '@tuturuuu/ui/badge';
@@ -44,6 +40,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@tuturuuu/ui/form';
+import { newCalendarCreationRequestId } from '@tuturuuu/ui/hooks/calendar-creation-request';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
 import { useForm } from '@tuturuuu/ui/hooks/use-form';
 import { notifySave } from '@tuturuuu/ui/save-notification';
@@ -76,13 +73,12 @@ import {
   useState,
 } from 'react';
 import { z } from 'zod';
+import { useCalendarDraftSave } from './use-calendar-draft-save';
 import { Alert, AlertDescription, AlertTitle } from '../../alert';
 import { AutosizeTextarea } from '../../custom/autosize-textarea';
-import { getCalendarMeetingMetadata } from './calendar-meeting-link';
 import {
   COLOR_OPTIONS,
   DateError,
-  EventColorPicker,
   EventDateTimePicker,
   EventDescriptionInput,
   EventLocationInput,
@@ -92,7 +88,17 @@ import {
 } from './event-form-components';
 import { EventModalHeader } from './event-modal-header';
 import { eventEndPickerBounds } from './event-picker-bounds';
-import { saveCalendarEventDrafts } from './save-calendar-event-drafts';
+import { eventModalDraft, eventModalSavePayload } from './event-save-payload';
+import {
+  eventSourceChanged,
+  selectedEventSource,
+  sourceInputFromOption,
+} from './event-source-selection';
+import { ProviderColorPicker } from './provider-color-picker';
+import {
+  prepareCalendarEventDrafts,
+  saveCalendarEventDrafts,
+} from './save-calendar-event-drafts';
 import { useCalendarSettings } from './settings/settings-context';
 import { useEventDraftSession } from './use-event-draft-session';
 
@@ -107,53 +113,6 @@ const AIFormSchema = z.object({
   smart_scheduling: z.boolean().default(true),
 });
 
-function sourceInputFromOption(
-  option?: CalendarSourceOption | null
-): CalendarSourceInput | undefined {
-  if (!option) return undefined;
-
-  if (option.provider === 'tuturuuu') {
-    return {
-      provider: 'tuturuuu',
-      workspaceCalendarId: option.workspaceCalendarId,
-    };
-  }
-
-  return {
-    provider: option.provider,
-    connectionId: option.connectionId,
-  };
-}
-
-function findEventSourceOption(
-  options: CalendarSourceOption[],
-  event: Partial<CalendarEvent>
-) {
-  if (event.provider === 'google' || event.provider === 'microsoft') {
-    return options.find((option) => {
-      if (option.provider === 'tuturuuu') return false;
-      if (option.provider !== event.provider) return false;
-      if (
-        event.source_calendar_id &&
-        option.workspaceCalendarId === event.source_calendar_id
-      ) {
-        return true;
-      }
-
-      return (
-        option.externalCalendarId ===
-        (event.external_calendar_id ?? event.google_calendar_id)
-      );
-    });
-  }
-
-  return options.find(
-    (option) =>
-      option.provider === 'tuturuuu' &&
-      option.workspaceCalendarId === event.source_calendar_id
-  );
-}
-
 export function EventModal() {
   const toast = notifySave;
   const startPickerRef = useRef<HTMLButtonElement>(null);
@@ -195,11 +154,12 @@ export function EventModal() {
     () => sourceData?.options ?? [],
     [sourceData?.options]
   );
-  const selectedSourceOption =
-    sourceOptions.find((option) => option.id === selectedSourceId) ??
-    findEventSourceOption(sourceOptions, event) ??
-    sourceData?.defaultSource ??
-    sourceOptions[0];
+  const selectedSourceOption = selectedEventSource(
+    sourceOptions,
+    event,
+    selectedSourceId,
+    sourceData?.defaultSource
+  );
 
   // State for AI event generation
   const [generatedEvents, setGeneratedEvents] =
@@ -284,7 +244,7 @@ export function EventModal() {
 
   const receiveGeneratedEvents = useEffectEvent(() => {
     const processedEvents = (object?.events || []) as Partial<CalendarEvent>[];
-    setGeneratedEvents(processedEvents);
+    setGeneratedEvents(prepareCalendarEventDrafts(processedEvents));
     setCurrentEventIndex(0);
     const firstEvent = processedEvents[0];
     if (
@@ -307,32 +267,16 @@ export function EventModal() {
     workspaceId: activeEvent?.ws_id,
     initialize: () => {
       if (activeEvent) {
-        const cleanEventData: Partial<CalendarEvent> = {
-          id: activeEvent.id,
-          title: activeEvent.title || '',
-          description: activeEvent.description || '',
-          start_at: activeEvent.start_at,
-          end_at: activeEvent.end_at,
-          color: activeEvent.color || 'BLUE',
-          location: activeEvent.location || '',
-          locked: activeEvent.locked || false,
-          ws_id: activeEvent.ws_id,
-          provider: activeEvent.provider,
-          source_calendar_id: activeEvent.source_calendar_id,
-          external_calendar_id: activeEvent.external_calendar_id,
-          external_event_id: activeEvent.external_event_id,
-          google_event_id: activeEvent.google_event_id,
-          google_calendar_id: activeEvent.google_calendar_id,
-          scheduling_metadata: getCalendarMeetingMetadata(activeEvent),
-        };
+        const cleanEventData = eventModalDraft(activeEvent);
 
         setEvent(cleanEventData);
-        const sourceOption = findEventSourceOption(
-          sourceOptions,
-          cleanEventData
-        );
         setSelectedSourceId(
-          sourceOption?.id ?? sourceData?.defaultSource?.id ?? null
+          selectedEventSource(
+            sourceOptions,
+            cleanEventData,
+            null,
+            sourceData?.defaultSource
+          )?.id ?? null
         );
 
         if (activeEvent.id !== 'new') {
@@ -350,6 +294,7 @@ export function EventModal() {
         const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
 
         const newEvent = {
+          requestId: newCalendarCreationRequestId(),
           title: '',
           description: '',
           start_at: now.toISOString(),
@@ -372,61 +317,38 @@ export function EventModal() {
     },
   });
 
-  // Handle manual event save
+  const draftSave = useCalendarDraftSave({
+    draft: event,
+    original: activeEvent,
+    buildPayload: () =>
+      eventModalSavePayload(
+        event,
+        activeEvent,
+        sourceInputFromOption(selectedSourceOption),
+        eventSourceChanged(sourceOptions, activeEvent ?? {}, selectedSourceId)
+      ),
+    addEvent,
+    updateEvent,
+    closeModal,
+    setIsSaving,
+    isSaving,
+    source: selectedSourceOption,
+    wsId,
+    onError: () =>
+      toast({
+        title: 'Error',
+        description: 'Failed to save or sync event. Please try again.',
+        variant: 'destructive',
+      }),
+  });
   const handleManualSave = async () => {
     if (!event.start_at || !event.end_at) return;
-
-    const startDate = new Date(event.start_at);
-    const endDate = new Date(event.end_at);
-
-    if (endDate <= startDate) {
+    if (new Date(event.end_at) <= new Date(event.start_at)) {
       setDateError('End date must be after start date');
       return;
     }
-
     setDateError(null);
-    setIsSaving(true);
-
-    try {
-      // Clean event data to only include fields that should be updated
-      const eventData: Partial<CalendarEvent> = {
-        title: event.title || '',
-        description: event.description || '',
-        start_at: event.start_at,
-        end_at: event.end_at,
-        color: event.color || 'BLUE',
-        location: event.location || '',
-        locked: event.locked || false,
-        source: sourceInputFromOption(selectedSourceOption),
-      };
-
-      if (activeEvent?.id === 'new') {
-        const saved = await addEvent(eventData as Omit<CalendarEvent, 'id'>);
-        if (!saved?.id) throw new Error();
-      } else if (activeEvent?.id) {
-        // For multi-day events, always use the original event ID
-        // The activeEvent should already contain the original event from the database
-        const eventId = activeEvent.id;
-
-        if (eventId && eventId !== 'new') {
-          await updateEvent(eventId, eventData);
-        } else {
-          throw new Error('Invalid event ID');
-        }
-      } else {
-        throw new Error('No event to save');
-      }
-
-      closeModal();
-    } catch (_) {
-      toast({
-        title: 'Error',
-        description: 'Failed to save or sync event. Please try again.',
-        variant: 'destructive',
-      });
-    } finally {
-      setIsSaving(false);
-    }
+    await draftSave.save();
   };
 
   // Handle AI event generation
@@ -993,7 +915,13 @@ export function EventModal() {
                       </div>
                       <Select
                         value={selectedSourceOption?.id}
-                        onValueChange={(value) => setSelectedSourceId(value)}
+                        onValueChange={(value) => {
+                          setSelectedSourceId(value);
+                          setEvent((previous) => ({
+                            ...previous,
+                            providerColor: undefined,
+                          }));
+                        }}
                         disabled={sourceOptions.length === 0 || isSaving}
                       >
                         <SelectTrigger id="event-source" className="w-full">
@@ -1087,10 +1015,21 @@ export function EventModal() {
 
                       {/* Color and Options Row */}
                       <div className="flex items-end justify-between gap-4">
-                        <EventColorPicker
+                        <ProviderColorPicker
+                          wsId={wsId}
+                          source={selectedSourceOption}
                           value={event.color || 'BLUE'}
-                          onChange={(value) =>
-                            setEvent({ ...event, color: value })
+                          metadata={event.scheduling_metadata}
+                          choice={event.providerColor}
+                          onNativeChange={(value) =>
+                            setEvent({
+                              ...event,
+                              color: value,
+                              providerColor: undefined,
+                            })
+                          }
+                          onProviderChange={(providerColor) =>
+                            setEvent({ ...event, providerColor })
                           }
                         />
                         <button
@@ -1147,6 +1086,7 @@ export function EventModal() {
 
                 {/* Action Buttons */}
                 <div className="mt-auto border-t p-2">
+                  {draftSave.recoveryNotice}
                   <div className="flex justify-between">
                     {isEditing ? (
                       <Button

package/src/components/ui/legacy/calendar/event-save-payload.test.ts

@@ -0,0 +1,40 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { expect, it } from 'vitest';
+import { calendarEventUpdatePayload } from '../../../../hooks/calendar-event-write-payload';
+import { eventSavePayload } from './event-save-payload';
+
+const original = {
+  id: 'saved',
+  title: 'Synthetic',
+  description: '',
+  location: '',
+  start_at: '2026-10-02T10:00:00Z',
+  end_at: '2026-10-02T11:00:00Z',
+  color: 'BLUE',
+  locked: false,
+} as CalendarEvent;
+it('sends only a provider color command for an unchanged existing event', () => {
+  const providerColor = { connectionId: 'owned', kind: 'inherit' as const };
+  const payload = eventSavePayload(
+    {
+      ...original,
+      providerColor,
+      source: { provider: 'google', connectionId: 'owned' },
+    },
+    original,
+    false
+  );
+  expect(payload).toEqual({ providerColor });
+  expect(calendarEventUpdatePayload(payload)).toEqual({ providerColor });
+});
+it('does not include unchanged native color or source with an ordinary title edit', () => {
+  expect(eventSavePayload({ ...original, title: 'Changed' }, original)).toEqual(
+    { title: 'Changed' }
+  );
+});
+it('includes a calendar transfer only when its source actually changed', () => {
+  const source = { provider: 'google' as const, connectionId: 'new' };
+  expect(eventSavePayload({ ...original, source }, original, true)).toEqual({
+    source,
+  });
+});

package/src/components/ui/legacy/calendar/event-save-payload.ts

@@ -0,0 +1,79 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { newCalendarCreationRequestId } from '../../../../hooks/calendar-creation-request';
+
+/** Existing edits send only changed fields so a color-only command neither
+ * broadcasts invitations nor accidentally becomes a calendar transfer. */
+export function eventSavePayload(
+  draft: Partial<CalendarEvent>,
+  original?: Partial<CalendarEvent>,
+  sourceChanged = false
+) {
+  if (!original || original.id === 'new') return draft;
+  const updates: Partial<CalendarEvent> = {};
+  for (const field of [
+    'title',
+    'description',
+    'location',
+    'start_at',
+    'end_at',
+    'locked',
+  ] as const) {
+    if (
+      (draft[field] ?? (field === 'locked' ? false : '')) !==
+      (original[field] ?? (field === 'locked' ? false : ''))
+    )
+      Object.assign(updates, { [field]: draft[field] });
+  }
+  if (draft.providerColor) updates.providerColor = draft.providerColor;
+  else if (draft.color !== original.color) updates.color = draft.color;
+  if (sourceChanged) updates.source = draft.source;
+  return updates;
+}
+
+export function eventModalSavePayload(
+  draft: Partial<CalendarEvent>,
+  original: Partial<CalendarEvent> | undefined,
+  source: CalendarEvent['source'],
+  sourceChanged: boolean
+) {
+  return eventSavePayload(
+    {
+      title: draft.title || '',
+      description: draft.description || '',
+      start_at: draft.start_at,
+      end_at: draft.end_at,
+      color: draft.color || 'BLUE',
+      location: draft.location || '',
+      locked: draft.locked || false,
+      source,
+      providerColor: draft.providerColor,
+    },
+    original,
+    sourceChanged
+  );
+}
+
+export function eventModalDraft(
+  activeEvent: CalendarEvent
+): Partial<CalendarEvent> {
+  return {
+    id: activeEvent.id,
+    requestId:
+      activeEvent.id === 'new' ? newCalendarCreationRequestId() : undefined,
+    title: activeEvent.title || '',
+    description: activeEvent.description || '',
+    start_at: activeEvent.start_at,
+    end_at: activeEvent.end_at,
+    color: activeEvent.color || 'BLUE',
+    location: activeEvent.location || '',
+    locked: activeEvent.locked || false,
+    ws_id: activeEvent.ws_id,
+    provider: activeEvent.provider,
+    source_calendar_id: activeEvent.source_calendar_id,
+    external_calendar_id: activeEvent.external_calendar_id,
+    external_event_id: activeEvent.external_event_id,
+    google_event_id: activeEvent.google_event_id,
+    google_calendar_id: activeEvent.google_calendar_id,
+    scheduling_metadata: activeEvent.scheduling_metadata,
+  };
+}

package/src/components/ui/legacy/calendar/event-source-selection.test.ts

@@ -0,0 +1,95 @@
+import type { CalendarSourceOption } from '@tuturuuu/internal-api';
+import { expect, it } from 'vitest';
+import { eventModalSavePayload } from './event-save-payload';
+import {
+  eventSourceChanged,
+  findEventSourceOption,
+  selectedEventSource,
+} from './event-source-selection';
+
+const options = ['one', 'two'].map((id) => ({
+  id,
+  provider: 'google',
+  connectionId: id,
+  workspaceCalendarId: id,
+  externalCalendarId: 'shared-provider-calendar',
+})) as CalendarSourceOption[];
+it('matches the canonical workspace source despite identical provider calendar IDs', () => {
+  expect(
+    findEventSourceOption(options, {
+      provider: 'google',
+      source_calendar_id: 'two',
+      external_calendar_id: 'shared-provider-calendar',
+    })?.id
+  ).toBe('two');
+  expect(
+    findEventSourceOption(options, {
+      provider: 'google',
+      source_calendar_id: 'missing',
+      external_calendar_id: 'shared-provider-calendar',
+    })
+  ).toBeUndefined();
+});
+it('fails closed when a legacy external calendar ID is ambiguous across accounts', () => {
+  expect(
+    findEventSourceOption(options, {
+      provider: 'google',
+      external_calendar_id: 'shared-provider-calendar',
+    })
+  ).toBeUndefined();
+  expect(
+    findEventSourceOption(options.slice(0, 1), {
+      provider: 'google',
+      external_calendar_id: 'shared-provider-calendar',
+    })?.id
+  ).toBe('one');
+});
+
+it('leaves an unresolved existing event on its original source and preserves new defaults', () => {
+  const original = {
+    id: 'saved',
+    provider: 'google' as const,
+    source_calendar_id: 'missing',
+    external_calendar_id: 'shared-provider-calendar',
+  };
+  expect(
+    selectedEventSource(options, original, null, options[0])
+  ).toBeUndefined();
+  expect(eventSourceChanged(options, original, null)).toBe(false);
+  expect(
+    selectedEventSource(options, { id: 'new' }, null, options[0])?.id
+  ).toBe('one');
+  expect(selectedEventSource(options, original, 'two', options[0])?.id).toBe(
+    'two'
+  );
+  expect(eventSourceChanged(options, original, 'two')).toBe(true);
+});
+
+it('sends only a title edit when an existing source cannot be resolved', () => {
+  const original = {
+    id: 'saved',
+    title: 'Original',
+    color: 'BLUE' as const,
+    provider: 'google' as const,
+    source_calendar_id: 'missing',
+    start_at: '2026-10-02T10:00:00Z',
+    end_at: '2026-10-02T11:00:00Z',
+  };
+  const selected = selectedEventSource(options, original, null, options[0]);
+  expect(
+    eventModalSavePayload(
+      { ...original, title: 'Changed' },
+      original,
+      selected?.provider === 'google'
+        ? { provider: 'google', connectionId: selected.connectionId }
+        : undefined,
+      eventSourceChanged(options, original, null)
+    )
+  ).toEqual({ title: 'Changed' });
+});
+
+it('recognizes a legacy Google event before considering native sources', () => {
+  const legacy = { google_event_id: 'external', source_calendar_id: 'two' };
+  expect(findEventSourceOption(options, legacy)?.id).toBe('two');
+  expect(eventSourceChanged(options, legacy, 'two')).toBe(false);
+});

package/src/components/ui/legacy/calendar/event-source-selection.ts

@@ -0,0 +1,78 @@
+import type {
+  CalendarSourceInput,
+  CalendarSourceOption,
+} from '@tuturuuu/internal-api';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+
+export function sourceInputFromOption(
+  option?: CalendarSourceOption | null
+): CalendarSourceInput | undefined {
+  if (!option) return undefined;
+
+  if (option.provider === 'tuturuuu') {
+    return {
+      provider: 'tuturuuu',
+      workspaceCalendarId: option.workspaceCalendarId,
+    };
+  }
+
+  return {
+    provider: option.provider,
+    connectionId: option.connectionId,
+  };
+}
+
+export function findEventSourceOption(
+  options: CalendarSourceOption[],
+  event: Partial<CalendarEvent>
+) {
+  const provider =
+    event.provider ?? (event.google_event_id ? 'google' : undefined);
+  if (provider === 'google' || provider === 'microsoft') {
+    const matches = options.filter((option) => {
+      if (option.provider === 'tuturuuu' || option.provider !== provider)
+        return false;
+      if (event.source_calendar_id)
+        return option.workspaceCalendarId === event.source_calendar_id;
+      return (
+        option.externalCalendarId ===
+        (event.external_calendar_id ?? event.google_calendar_id)
+      );
+    });
+    // Legacy rows without a canonical source must not choose another account
+    // merely because it contains the same provider calendar ID.
+    return matches.length === 1 ? matches[0] : undefined;
+  }
+
+  return options.find(
+    (option) =>
+      option.provider === 'tuturuuu' &&
+      option.workspaceCalendarId === event.source_calendar_id
+  );
+}
+
+export function selectedEventSource(
+  options: CalendarSourceOption[],
+  event: Partial<CalendarEvent>,
+  selectedId: string | null,
+  defaultSource?: CalendarSourceOption
+) {
+  const selected = options.find((option) => option.id === selectedId);
+  const existing = !!event.id && event.id !== 'new';
+  return (
+    selected ??
+    findEventSourceOption(options, event) ??
+    (existing ? undefined : (defaultSource ?? options[0]))
+  );
+}
+export function eventSourceChanged(
+  options: CalendarSourceOption[],
+  event: Partial<CalendarEvent>,
+  selectedId: string | null
+) {
+  return (
+    selectedId !== null &&
+    options.some((option) => option.id === selectedId) &&
+    selectedId !== findEventSourceOption(options, event)?.id
+  );
+}