@tuturuuu/ui 0.37.2 → 0.39.0

package/src/components/ui/legacy/calendar/month-calendar.tsx

@@ -34,6 +34,7 @@ import { formatLunarDay, getLunarDate } from '../../../../lib/lunar-calendar';
 import { Button } from '../../button';
 import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
 import { calendarDraftDate } from './calendar-period';
+import { pastEventTreatment } from './past-event-treatment';
 import { useCalendarSettings } from './settings/settings-context';
 
 dayjs.extend(utc);
@@ -61,6 +62,7 @@ function MonthEvent({
   zone?: string;
   onOpen: (id: string) => void;
 }) {
+  const { preservePastEventOpacity } = useCalendar();
   const t = useTranslations('calendar');
   const title = event.title || t('views.untitled_event');
   const allDay = isAllDayEvent(event);
@@ -72,8 +74,9 @@ function MonthEvent({
       title={title}
       style={calendarEventStyle(event)}
       className={cn(
-        'flex w-full min-w-0 items-center gap-1 rounded px-1 py-1 text-left text-[10px] leading-tight transition-colors hover:ring-1 hover:ring-current focus-visible:outline-2 focus-visible:outline-ring sm:px-1.5 sm:text-xs',
-        allDay && 'font-medium'
+        'relative flex w-full min-w-0 items-center gap-1 rounded px-1 py-1 text-left text-[10px] leading-tight transition-colors hover:ring-1 hover:ring-current focus-visible:outline-2 focus-visible:outline-ring sm:px-1.5 sm:text-xs',
+        allDay && 'font-medium',
+        pastEventTreatment(event, preservePastEventOpacity)
       )}
     >
       {continued ? (

package/src/components/ui/legacy/calendar/native-recurrence-context-menu.tsx

@@ -0,0 +1,21 @@
+import { Repeat } from '@tuturuuu/icons';
+import { useTranslations } from 'next-intl';
+import { ContextMenuContent, ContextMenuItem } from '../../context-menu';
+
+export function NativeRecurrenceContextMenu({
+  onEdit,
+  readOnly,
+}: {
+  onEdit: () => void;
+  readOnly: boolean;
+}) {
+  const t = useTranslations('calendar.recurrence');
+  return (
+    <ContextMenuContent>
+      <ContextMenuItem disabled={readOnly} onSelect={onEdit}>
+        <Repeat className="size-4" />
+        {t('edit')}
+      </ContextMenuItem>
+    </ContextMenuContent>
+  );
+}

package/src/components/ui/legacy/calendar/native-recurrence-dialog.test.tsx

@@ -0,0 +1,245 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { InternalApiError } from '@tuturuuu/internal-api/client';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mock = vi.hoisted(() => ({
+  create: vi.fn(),
+  read: vi.fn(),
+  mutate: vi.fn(),
+  actor: { actorId: 'actor', assertActive: vi.fn() },
+}));
+vi.mock('@tuturuuu/internal-api/calendar-series', () => ({
+  createNativeCalendarSeries: mock.create,
+  getNativeCalendarSeries: mock.read,
+  mutateNativeCalendarSeries: mock.mutate,
+}));
+vi.mock('../../../../hooks/use-workspace-visibility', () => ({
+  useWorkspaceActor: () => mock.actor,
+}));
+vi.mock('next-intl', () => ({ useTranslations: () => (key: string) => key }));
+
+import { NativeRecurrenceDialog } from './native-recurrence-dialog';
+
+const series = {
+  id: 'series',
+  ws_id: 'ws',
+  revision: 4,
+  workspace_calendar_id: null,
+  rule: {
+    version: 1,
+    frequency: 'daily',
+    interval: 1,
+    timeZone: 'UTC',
+    end: { type: 'never' },
+  },
+  anchor: {
+    startLocal: '2026-10-05T09:00:00',
+    endLocal: '2026-10-05T10:00:00',
+    allDay: false,
+  },
+  payload: { title: 'Daily' },
+  exceptions: [],
+};
+const occurrence = {
+  id: 'event',
+  ws_id: 'ws',
+  seriesId: 'series',
+  seriesRevision: 2,
+  originalStartLocal: '2026-10-06T09:00:00',
+  start_at: '2026-10-06T09:00:00Z',
+  end_at: '2026-10-06T10:00:00Z',
+  title: 'Occurrence',
+};
+function setup(
+  props: Partial<Parameters<typeof NativeRecurrenceDialog>[0]> = {}
+) {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  const close = vi.fn();
+  const view = render(
+    <QueryClientProvider client={client}>
+      <NativeRecurrenceDialog
+        wsId="ws"
+        timezone="UTC"
+        open
+        onOpenChange={close}
+        {...props}
+      />
+    </QueryClientProvider>
+  );
+  return { ...view, close, client };
+}
+beforeEach(() => {
+  vi.resetAllMocks();
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+  );
+  mock.actor.actorId = 'actor';
+  mock.create.mockResolvedValue(series);
+  mock.read.mockResolvedValue(series);
+  mock.mutate.mockResolvedValue(series);
+});
+describe('native recurrence form interactions', () => {
+  it('creates through the series API and closes only after success', async () => {
+    const { close } = setup();
+    fireEvent.change(screen.getByLabelText('title'), {
+      target: { value: 'Planning' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'save' }));
+    await waitFor(() => expect(mock.create).toHaveBeenCalledTimes(1));
+    expect(mock.create.mock.calls[0]?.[0]).toBe('ws');
+    expect(mock.create.mock.calls[0]?.[1]).toMatchObject({
+      event: { title: 'Planning' },
+      rule: { version: 1, frequency: 'weekly', timeZone: 'UTC' },
+      requestId: expect.any(String),
+    });
+    await waitFor(() => expect(close).toHaveBeenCalledWith(false));
+  });
+  it('retains the draft and request ID after transport failure for an idempotent retry', async () => {
+    mock.create.mockRejectedValueOnce(new InternalApiError('failed', 503));
+    const { close } = setup();
+    fireEvent.change(screen.getByLabelText('title'), {
+      target: { value: 'Planning' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'save' }));
+    await screen.findByRole('alert');
+    expect(close).not.toHaveBeenCalled();
+    expect(screen.getByLabelText('title')).toHaveValue('Planning');
+    fireEvent.click(screen.getByRole('button', { name: 'save' }));
+    await waitFor(() => expect(mock.create).toHaveBeenCalledTimes(2));
+    expect(mock.create.mock.calls[1]?.[1].requestId).toBe(
+      mock.create.mock.calls[0]?.[1].requestId
+    );
+  });
+  it('rejects an invalid form before sending a mutation', async () => {
+    setup();
+    fireEvent.change(screen.getByLabelText('title'), {
+      target: { value: 'Planning' },
+    });
+    fireEvent.change(screen.getByLabelText('interval'), {
+      target: { value: '0' },
+    });
+    fireEvent.submit(
+      screen.getByRole('button', { name: 'save' }).closest('form')!
+    );
+    expect(screen.getByRole('alert')).toHaveTextContent('invalid');
+    expect(mock.create).not.toHaveBeenCalled();
+  });
+  it('disables writes in a read-only calendar', () => {
+    setup({ readOnly: true });
+    expect(screen.getByRole('button', { name: 'save' })).toBeDisabled();
+    expect(screen.getByLabelText('title')).toBeDisabled();
+    expect(mock.create).not.toHaveBeenCalled();
+  });
+  it('fences writes when the verified account scope changed', () => {
+    mock.actor.assertActive.mockImplementation(() => {
+      throw new Error('actor changed');
+    });
+    setup();
+    fireEvent.change(screen.getByLabelText('title'), {
+      target: { value: 'Planning' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'save' }));
+    expect(screen.getByRole('alert')).toHaveTextContent('invalid');
+    expect(mock.create).not.toHaveBeenCalled();
+  });
+  it('edits a virtual occurrence using the loaded series revision and immutable original slot', async () => {
+    setup({ occurrence });
+    const title = await screen.findByLabelText('title');
+    fireEvent.change(title, { target: { value: 'New title' } });
+    fireEvent.click(screen.getByRole('button', { name: 'save' }));
+    await waitFor(() => expect(mock.mutate).toHaveBeenCalledTimes(1));
+    expect(mock.mutate.mock.calls[0]?.slice(0, 2)).toEqual(['ws', 'series']);
+    expect(mock.mutate.mock.calls[0]?.[2]).toMatchObject({
+      scope: 'this',
+      expectedRevision: 4,
+      originalStartLocal: '2026-10-06T09:00:00',
+      event: { title: 'New title' },
+    });
+    expect(mock.mutate.mock.calls[0]?.[2].rule).toBeUndefined();
+    expect(mock.create).not.toHaveBeenCalled();
+  });
+  it.each(['all', 'future'] as const)(
+    'saves the selected %s scope with its original slot and recurrence rule',
+    async (scope) => {
+      setup({ occurrence });
+      await screen.findByLabelText('title');
+      fireEvent.keyDown(screen.getByRole('combobox', { name: 'scope' }), {
+        key: 'ArrowDown',
+      });
+      expect(
+        screen.queryByText('futureExceptionsReset')
+      ).not.toBeInTheDocument();
+      fireEvent.click(await screen.findByRole('option', { name: scope }));
+      if (scope === 'future') {
+        expect(screen.getByText('futureExceptionsReset')).toBeVisible();
+      } else {
+        expect(
+          screen.queryByText('futureExceptionsReset')
+        ).not.toBeInTheDocument();
+      }
+      fireEvent.click(screen.getByRole('button', { name: 'save' }));
+      await waitFor(() => expect(mock.mutate).toHaveBeenCalledTimes(1));
+      expect(mock.mutate.mock.calls[0]?.[2]).toMatchObject({
+        scope,
+        expectedRevision: 4,
+        originalStartLocal: occurrence.originalStartLocal,
+        rule: { frequency: 'daily' },
+        anchor: {
+          startLocal:
+            scope === 'all'
+              ? series.anchor.startLocal
+              : occurrence.originalStartLocal,
+        },
+      });
+    }
+  );
+  it('omits the tail-reset notice when the first occurrence becomes a whole-series edit', async () => {
+    setup({
+      occurrence: {
+        ...occurrence,
+        originalStartLocal: series.anchor.startLocal,
+      },
+    });
+    await screen.findByLabelText('title');
+    fireEvent.keyDown(screen.getByRole('combobox', { name: 'scope' }), {
+      key: 'ArrowDown',
+    });
+    fireEvent.click(await screen.findByRole('option', { name: 'future' }));
+    expect(screen.queryByText('futureExceptionsReset')).not.toBeInTheDocument();
+  });
+  it('keeps permission failures visible without closing or pretending a save succeeded', async () => {
+    mock.mutate.mockRejectedValue(new InternalApiError('denied', 403));
+    const { close } = setup({ occurrence });
+    await screen.findByLabelText('title');
+    fireEvent.click(screen.getByRole('button', { name: 'save' }));
+    await screen.findByRole('alert');
+    expect(close).not.toHaveBeenCalled();
+    expect(screen.getByLabelText('title')).toHaveValue('Occurrence');
+  });
+  it('resets draft and retry identity when reopened in a different workspace', async () => {
+    const { rerender, client, close } = setup();
+    fireEvent.change(screen.getByLabelText('title'), {
+      target: { value: 'Private draft' },
+    });
+    rerender(
+      <QueryClientProvider client={client}>
+        <NativeRecurrenceDialog
+          wsId="other"
+          timezone="UTC"
+          open
+          onOpenChange={close}
+        />
+      </QueryClientProvider>
+    );
+    expect(screen.getByLabelText('title')).toHaveValue('');
+  });
+});

package/src/components/ui/legacy/calendar/native-recurrence-dialog.tsx

@@ -0,0 +1,95 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import { getCalendarProviderSeriesCapabilities } from '@tuturuuu/internal-api/calendar-provider-series';
+import { getNativeCalendarSeries } from '@tuturuuu/internal-api/calendar-series';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { useTranslations } from 'next-intl';
+import { useWorkspaceActor } from '../../../../hooks/use-workspace-visibility';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../../dialog';
+import { NativeRecurrenceForm } from './native-recurrence-form';
+export function NativeRecurrenceDialog({
+  wsId,
+  open,
+  onOpenChange,
+  occurrence,
+  timezone,
+  readOnly = false,
+}: {
+  wsId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  occurrence?: CalendarEvent;
+  timezone?: string;
+  readOnly?: boolean;
+}) {
+  const actor = useWorkspaceActor();
+  const t = useTranslations('calendar.recurrence');
+  const series = useQuery({
+    queryKey: [
+      'native-calendar-series',
+      wsId,
+      actor?.actorId,
+      occurrence?.seriesId,
+    ],
+    enabled: open && !!actor && !!occurrence?.seriesId,
+    queryFn: async ({ signal }) => {
+      actor!.assertActive();
+      const value = await getNativeCalendarSeries(wsId, occurrence!.seriesId!, {
+        signal,
+      });
+      actor!.assertActive();
+      return value;
+    },
+    retry: false,
+  });
+  const capabilities = useQuery({
+    queryKey: ['calendar-provider-capabilities', wsId, actor?.actorId],
+    enabled: open && !!actor && !readOnly,
+    queryFn: async ({ signal }) => {
+      actor!.assertActive();
+      const value = await getCalendarProviderSeriesCapabilities(wsId, {
+        signal,
+      });
+      actor!.assertActive();
+      return value;
+    },
+    retry: false,
+    staleTime: 0,
+  });
+  if (!open) return null;
+  const known = !!actor && (!occurrence || (!!series.data && !series.isError));
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>{t(occurrence ? 'edit' : 'create')}</DialogTitle>
+          <DialogDescription>{t('description')}</DialogDescription>
+        </DialogHeader>
+        {known ? (
+          <NativeRecurrenceForm
+            key={`${actor!.actorId}:${wsId}:${occurrence?.id ?? 'new'}:${series.data?.revision ?? 0}`}
+            wsId={wsId}
+            actor={actor!}
+            series={series.data}
+            occurrence={occurrence}
+            timezone={timezone}
+            readOnly={readOnly}
+            capabilities={capabilities.data}
+            onDone={() => onOpenChange(false)}
+            onReload={() => void series.refetch()}
+          />
+        ) : (
+          <p role="status">
+            {t(series.isPending && actor ? 'loading' : 'unavailable')}
+          </p>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/legacy/calendar/native-recurrence-fields.tsx

@@ -0,0 +1,137 @@
+'use client';
+import { useTranslations } from 'next-intl';
+import { Checkbox } from '../../checkbox';
+import { Input } from '../../input';
+import { Label } from '../../label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../select';
+import {
+  type RecurrenceDraft,
+  recurrenceAllDay,
+} from './native-recurrence-model';
+import { NativeRecurrencePatternFields } from './native-recurrence-pattern-fields';
+export function NativeRecurrenceFields({
+  draft,
+  setDraft,
+  occurrenceOnly,
+  disabled,
+  nativeStorageHint = true,
+}: {
+  draft: RecurrenceDraft;
+  setDraft: (draft: RecurrenceDraft) => void;
+  occurrenceOnly: boolean;
+  disabled: boolean;
+  nativeStorageHint?: boolean;
+}) {
+  const t = useTranslations('calendar.recurrence');
+  const field = (key: keyof RecurrenceDraft, value: unknown) =>
+    setDraft({ ...draft, [key]: value });
+  return (
+    <fieldset disabled={disabled} className="space-y-3">
+      <div className="space-y-1">
+        <Label htmlFor="series-title">{t('title')}</Label>
+        <Input
+          id="series-title"
+          value={draft.title}
+          maxLength={1000}
+          onChange={(e) => field('title', e.target.value)}
+          required
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-3">
+        {(['startLocal', 'endLocal'] as const).map((key) => (
+          <div key={key} className="space-y-1">
+            <Label htmlFor={key}>
+              {t(key === 'startLocal' ? 'start' : 'end')}
+            </Label>
+            <Input
+              id={key}
+              type="datetime-local"
+              value={draft[key]}
+              onChange={(e) => field(key, e.target.value)}
+              required
+            />
+          </div>
+        ))}
+      </div>
+      <div className="space-y-1">
+        <Label htmlFor="series-timezone">{t('timezone')}</Label>
+        <Input
+          id="series-timezone"
+          value={draft.timeZone}
+          onChange={(e) => field('timeZone', e.target.value)}
+          disabled={occurrenceOnly || !!draft.retainedRule}
+          required
+        />
+      </div>
+      <label className="flex items-center gap-2">
+        <Checkbox
+          checked={draft.allDay}
+          disabled={occurrenceOnly}
+          onCheckedChange={(value) =>
+            setDraft(recurrenceAllDay(draft, value === true))
+          }
+        />
+        {t('allDay')}
+      </label>
+      {draft.retainedRule && !occurrenceOnly && (
+        <p className="text-muted-foreground text-xs">{t('advancedPattern')}</p>
+      )}
+      {!occurrenceOnly && !draft.retainedRule && (
+        <>
+          <NativeRecurrencePatternFields draft={draft} setDraft={setDraft} />
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <Label>{t('ending')}</Label>
+              <Select
+                value={draft.endType}
+                onValueChange={(value) => field('endType', value)}
+              >
+                <SelectTrigger aria-label={t('ending')}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {(['never', 'count', 'until'] as const).map((value) => (
+                    <SelectItem value={value} key={value}>
+                      {t(value)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {draft.endType !== 'never' && (
+              <div>
+                <Label htmlFor="series-endvalue">{t(draft.endType)}</Label>
+                <Input
+                  id="series-endvalue"
+                  type={draft.endType === 'count' ? 'number' : 'date'}
+                  min={draft.endType === 'count' ? 1 : undefined}
+                  max={draft.endType === 'count' ? 10000 : undefined}
+                  value={draft.endValue}
+                  onChange={(e) => field('endValue', e.target.value)}
+                  required
+                />
+              </div>
+            )}
+          </div>
+        </>
+      )}
+      <div>
+        <Label htmlFor="series-location">{t('location')}</Label>
+        <Input
+          id="series-location"
+          value={draft.location}
+          onChange={(e) => field('location', e.target.value)}
+        />
+      </div>
+      {nativeStorageHint && (
+        <p className="text-muted-foreground text-xs">{t('nativeOnly')}</p>
+      )}
+    </fieldset>
+  );
+}