@tuturuuu/ui 0.37.2 → 0.38.0

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
+  );
+}

package/src/components/ui/legacy/calendar/provider-color-picker.test.tsx

@@ -0,0 +1,147 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { GoogleProviderColorOptions } from '@tuturuuu/types/primitives/google-calendar-color';
+import type { ComponentProps, ReactNode } from 'react';
+import { beforeEach, expect, it, vi } from 'vitest';
+import { ProviderColorPicker } from './provider-color-picker';
+
+const mocks = vi.hoisted(() => ({ query: vi.fn(), get: vi.fn() }));
+vi.mock('@tanstack/react-query', () => ({ useQuery: mocks.query }));
+vi.mock('@tuturuuu/internal-api', () => ({
+  getGoogleCalendarColorOptions: mocks.get,
+}));
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
+vi.mock('@tuturuuu/ui/label', () => ({
+  Label: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+}));
+vi.mock('./event-form-components', () => ({
+  EventColorPicker: () => <div>Legacy palette</div>,
+}));
+vi.mock('@tuturuuu/ui/select', () => ({
+  Select: ({
+    children,
+    value,
+    onValueChange,
+  }: {
+    children: ReactNode;
+    value?: string;
+    onValueChange: (value: string) => void;
+  }) => (
+    <select
+      aria-label="Provider palette"
+      value={value}
+      onChange={(event) => onValueChange(event.target.value)}
+    >
+      {children}
+    </select>
+  ),
+  SelectContent: ({ children }: { children: ReactNode }) => children,
+  SelectTrigger: () => null,
+  SelectValue: () => null,
+  SelectItem: ({ children, value }: { children: ReactNode; value: string }) => (
+    <option value={value}>{children}</option>
+  ),
+}));
+const options: GoogleProviderColorOptions = {
+  provider: 'google',
+  providerColorWrites: true,
+  connectionId: 'owned',
+  calendarId: 'source',
+  sourceColor: { background: '#123456', foreground: '#ffffff' },
+  options: [
+    {
+      kind: 'inherit',
+      id: null,
+      name: null,
+      background: '#123456',
+      foreground: null,
+    },
+    {
+      kind: 'event',
+      id: '3',
+      name: null,
+      background: '#987654',
+      foreground: null,
+    },
+    {
+      kind: 'label',
+      id: 'label-id',
+      name: 'Synthetic label',
+      background: '#abcdef',
+      foreground: null,
+    },
+  ],
+};
+const props = (): ComponentProps<typeof ProviderColorPicker> => ({
+  wsId: 'workspace',
+  source: { id: 'source', provider: 'google', connectionId: 'owned' } as never,
+  value: 'BLUE',
+  onNativeChange: vi.fn(),
+  onProviderChange: vi.fn(),
+});
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.query.mockReturnValue({ data: options });
+});
+it('keeps the legacy picker when capability is disabled', () => {
+  mocks.query.mockReturnValue({
+    data: { ...options, providerColorWrites: false },
+  });
+  render(<ProviderColorPicker {...props()} />);
+  expect(screen.getByText('Legacy palette')).toBeTruthy();
+  expect(screen.queryByRole('combobox')).toBeNull();
+});
+it('keeps another connection palette from supplying choices', () => {
+  mocks.query.mockReturnValue({
+    data: { ...options, connectionId: 'foreign' },
+  });
+  render(<ProviderColorPicker {...props()} />);
+  expect(screen.getByText('Legacy palette')).toBeTruthy();
+});
+it('sends exact provider namespace and ID for label and inherited choices', () => {
+  const input = props();
+  render(<ProviderColorPicker {...input} />);
+  fireEvent.change(screen.getByRole('combobox'), {
+    target: { value: 'label:label-id' },
+  });
+  expect(input.onProviderChange).toHaveBeenLastCalledWith({
+    connectionId: 'owned',
+    kind: 'label',
+    id: 'label-id',
+  });
+  fireEvent.change(screen.getByRole('combobox'), {
+    target: { value: 'inherit' },
+  });
+  expect(input.onProviderChange).toHaveBeenLastCalledWith({
+    connectionId: 'owned',
+    kind: 'inherit',
+  });
+  expect(input.onNativeChange).not.toHaveBeenCalled();
+  mocks.query.mock.calls[0]?.[0].queryFn();
+  expect(mocks.get).toHaveBeenCalledWith('workspace', 'owned');
+});
+it('initializes an imported label identity rather than the compatibility color', () => {
+  render(
+    <ProviderColorPicker
+      {...props()}
+      metadata={{
+        google_color: {
+          version: 1,
+          event_label_id: 'label-id',
+          inherited: false,
+          resolved_rgb: '#abcdef',
+        },
+      }}
+    />
+  );
+  expect((screen.getByRole('combobox') as HTMLSelectElement).value).toBe(
+    'label:label-id'
+  );
+});
+
+it('keeps the legacy picker while query data is unavailable', () => {
+  mocks.query.mockReturnValue({ data: undefined });
+  render(<ProviderColorPicker {...props()} />);
+  expect(screen.getByText('Legacy palette')).toBeTruthy();
+  expect(screen.queryByRole('combobox')).toBeNull();
+});

package/src/components/ui/legacy/calendar/provider-color-picker.tsx

@@ -0,0 +1,115 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import {
+  type CalendarSourceOption,
+  type GoogleProviderColorChoice,
+  getGoogleCalendarColorOptions,
+} from '@tuturuuu/internal-api';
+import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
+import { Label } from '@tuturuuu/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { readGoogleEventColor } from '@tuturuuu/utils/google-calendar-colors';
+import { useTranslations } from 'next-intl';
+import { EventColorPicker } from './event-form-components';
+
+export function ProviderColorPicker({
+  wsId,
+  source,
+  value,
+  metadata,
+  choice,
+  onNativeChange,
+  onProviderChange,
+}: {
+  wsId?: string;
+  source?: CalendarSourceOption;
+  value: SupportedColor;
+  metadata?: unknown;
+  choice?: GoogleProviderColorChoice;
+  onNativeChange: (value: SupportedColor) => void;
+  onProviderChange: (choice: GoogleProviderColorChoice) => void;
+}) {
+  const t = useTranslations('calendar');
+  const connectionId =
+    source?.provider === 'google' ? source.connectionId : null;
+  const { data } = useQuery({
+    queryKey: ['google-calendar-color-options', wsId, connectionId],
+    enabled: !!wsId && !!connectionId,
+    queryFn: () => getGoogleCalendarColorOptions(wsId!, connectionId!),
+  });
+  if (
+    !connectionId ||
+    !data?.providerColorWrites ||
+    data.connectionId !== connectionId ||
+    !data.options.length
+  )
+    return <EventColorPicker value={value} onChange={onNativeChange} />;
+  const current = readGoogleEventColor(metadata);
+  const selected =
+    choice?.connectionId === connectionId
+      ? choice.kind === 'inherit'
+        ? 'inherit'
+        : `${choice.kind}:${choice.id}`
+      : current?.inherited
+        ? 'inherit'
+        : current?.event_label_id
+          ? `label:${current.event_label_id}`
+          : current?.color_id
+            ? `event:${current.color_id}`
+            : undefined;
+  return (
+    <div className="space-y-1">
+      <Label>{t('provider_color_label')}</Label>
+      <Select
+        value={selected}
+        onValueChange={(key) => {
+          const option = data.options.find(
+            (item) =>
+              (item.kind === 'inherit'
+                ? 'inherit'
+                : `${item.kind}:${item.id}`) === key
+          );
+          if (option)
+            onProviderChange(
+              option.kind === 'inherit'
+                ? { connectionId, kind: 'inherit' }
+                : { connectionId, kind: option.kind, id: option.id! }
+            );
+        }}
+      >
+        <SelectTrigger aria-label={t('provider_color_label')}>
+          <SelectValue placeholder={t('provider_color_label')} />
+        </SelectTrigger>
+        <SelectContent>
+          {data.options.map((option) => (
+            <SelectItem
+              key={`${option.kind}:${option.id}`}
+              value={
+                option.kind === 'inherit'
+                  ? 'inherit'
+                  : `${option.kind}:${option.id}`
+              }
+            >
+              <span className="flex items-center gap-2">
+                <span
+                  className="size-3 rounded-full"
+                  style={{ backgroundColor: option.background }}
+                />
+                {option.kind === 'inherit'
+                  ? t('inherit_calendar_color')
+                  : (option.name ??
+                    t('google_event_color', { id: option.id ?? '' }))}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

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

@@ -1,6 +1,13 @@
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { expect, it, vi } from 'vitest';
-import { saveCalendarEventDrafts } from './save-calendar-event-drafts';
+import {
+  createCalendarCreationRequests,
+  newCalendarCreationRequestId,
+} from '../../../../hooks/calendar-creation-request';
+import {
+  prepareCalendarEventDrafts,
+  saveCalendarEventDrafts,
+} from './save-calendar-event-drafts';
 
 it('retains rejected or unconfirmed drafts and retries only those events', async () => {
   const drafts = [
@@ -23,3 +30,30 @@ it('retains rejected or unconfirmed drafts and retries only those events', async
     'Unconfirmed',
   ]);
 });
+
+it('retains distinct AI draft IDs and immutable payload across a lost-response batch retry', async () => {
+  const controller = createCalendarCreationRequests();
+  const manualId = newCalendarCreationRequestId();
+  controller.forAttempt({ title: 'Manual' }, manualId);
+  const drafts = prepareCalendarEventDrafts(
+    ['First AI', 'Second AI'].map((title) => ({ title }))
+  );
+  const attempts: { id: string; event: unknown }[] = [];
+  const addEvent = vi.fn(async (event, options) => {
+    attempts.push({
+      id: controller.forAttempt(event, options?.requestId),
+      event,
+    });
+    if (attempts.length <= 2) throw new Error('lost response');
+    return { id: 'confirmed' } as CalendarEvent;
+  });
+  const failed = await saveCalendarEventDrafts(drafts, addEvent, undefined);
+  expect(failed.failedEvents).toEqual(drafts);
+  await saveCalendarEventDrafts(failed.failedEvents, addEvent, undefined);
+  expect(new Set([manualId, attempts[0]!.id, attempts[1]!.id]).size).toBe(3);
+  expect(attempts[2]).toEqual(attempts[0]);
+  expect(attempts[3]).toEqual(attempts[1]);
+  expect(drafts.map((d) => d.requestId)).toEqual(
+    attempts.slice(0, 2).map((a) => a.id)
+  );
+});

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

@@ -1,10 +1,12 @@
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { newCalendarCreationRequestId } from '../../../../hooks/calendar-creation-request';
 
 /** Keep only unconfirmed drafts after a batch so retry never resends saved events. */
 export async function saveCalendarEventDrafts(
   drafts: Partial<CalendarEvent>[],
   addEvent: (
-    event: Omit<CalendarEvent, 'id'>
+    event: Omit<CalendarEvent, 'id'>,
+    options?: { requestId?: string }
   ) => Promise<CalendarEvent | undefined>,
   source: CalendarEvent['source']
 ) {
@@ -12,16 +14,19 @@ export async function saveCalendarEventDrafts(
   const failedEvents: Partial<CalendarEvent>[] = [];
   for (const draft of drafts) {
     try {
-      const saved = await addEvent({
-        title: draft.title || 'New Event',
-        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,
-      });
+      const saved = await addEvent(
+        {
+          title: draft.title || 'New Event',
+          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,
+        },
+        { requestId: draft.requestId }
+      );
       if (saved?.id) savedEvents.push(saved);
       else failedEvents.push(draft);
     } catch {
@@ -30,3 +35,10 @@ export async function saveCalendarEventDrafts(
   }
   return { savedEvents, failedEvents };
 }
+
+export function prepareCalendarEventDrafts(drafts: Partial<CalendarEvent>[]) {
+  return drafts.map((draft) => ({
+    ...draft,
+    requestId: newCalendarCreationRequestId(),
+  }));
+}