@tuturuuu/ui 0.38.0 → 0.39.1

package/src/components/ui/legacy/calendar/provider-readonly-dialog.tsx

@@ -0,0 +1,48 @@
+'use client';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { Dialog, DialogContent } from '@tuturuuu/ui/dialog';
+import { useFormatter } from 'next-intl';
+import { EventModalHeader } from './event-modal-header';
+
+/** Unsupported provider rules never mount the ordinary editable event form. */
+export function ProviderReadonlyDialog({
+  event,
+  open,
+  onOpenChange,
+}: {
+  event: CalendarEvent;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const format = useFormatter();
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg gap-0 overflow-hidden p-0">
+        <EventModalHeader event={event} isEditing />
+        <div className="space-y-4 px-6 py-5">
+          <p className="text-muted-foreground text-sm">
+            <time dateTime={event.start_at}>
+              {format.dateTime(new Date(event.start_at), {
+                dateStyle: 'medium',
+                timeStyle: 'short',
+              })}
+            </time>
+            {' – '}
+            <time dateTime={event.end_at}>
+              {format.dateTime(new Date(event.end_at), {
+                dateStyle: 'medium',
+                timeStyle: 'short',
+              })}
+            </time>
+          </p>
+          {event.location && <p className="text-sm">{event.location}</p>}
+          {event.description && (
+            <p className="max-h-64 overflow-auto whitespace-pre-wrap text-sm">
+              {event.description}
+            </p>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/legacy/calendar/use-calendar-draft-save.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { act, renderHook } from '@testing-library/react';
-import { expect, it, vi } from 'vitest';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { expect, it, vi } from 'vitest';
 import { useCalendarDraftSave } from './use-calendar-draft-save';
 
 const query = vi.hoisted(() => ({

package/src/components/ui/legacy/calendar/use-calendar-draft-save.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import {
-  getGoogleCalendarColorOptions,
   type CalendarSourceOption,
+  getGoogleCalendarColorOptions,
 } from '@tuturuuu/internal-api';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { Button } from '@tuturuuu/ui/button';

package/src/components/ui/legacy/calendar/use-provider-recurrence-operation.test.tsx

@@ -0,0 +1,185 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { InternalApiError } from '@tuturuuu/internal-api/client';
+import type { PropsWithChildren } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+  reserve: vi.fn(),
+  read: vi.fn(),
+  retry: vi.fn(),
+}));
+vi.mock('@tuturuuu/internal-api/calendar-provider-series', () => ({
+  reserveCalendarProviderSeriesOperation: mocks.reserve,
+  getCalendarProviderSeriesOperation: mocks.read,
+  retryCalendarProviderSeriesOperation: mocks.retry,
+}));
+
+import { useProviderRecurrenceOperation } from './use-provider-recurrence-operation';
+
+const clients: QueryClient[] = [];
+const payload = {
+  requestId: '11111111-1111-4111-8111-111111111111',
+  action: 'create' as const,
+  source: { provider: 'google' as const, connectionId: 'connection' },
+  rule: {
+    version: 1 as const,
+    timeZone: 'UTC',
+    frequency: 'daily' as const,
+    interval: 1,
+    end: { type: 'never' as const },
+  },
+  anchor: {
+    startLocal: '2026-10-06T09:00:00',
+    endLocal: '2026-10-06T10:00:00',
+    allDay: false,
+  },
+  event: { title: 'Test series' },
+};
+function setup(
+  client = new QueryClient({ defaultOptions: { queries: { retry: false } } }),
+  actorId = 'actor'
+) {
+  clients.push(client);
+  const applied = vi.fn(),
+    assertActive = vi.fn();
+  const actor = {
+    actorId,
+    lifetime: { active: true },
+    assertActive,
+  } as Parameters<typeof useProviderRecurrenceOperation>[0]['actor'];
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  );
+  const hook = renderHook(
+    () =>
+      useProviderRecurrenceOperation({
+        wsId: 'workspace',
+        actor,
+        identity: 'new',
+        onApplied: applied,
+      }),
+    { wrapper }
+  );
+  return { ...hook, client, applied, assertActive };
+}
+beforeEach(() => {
+  vi.clearAllMocks();
+  sessionStorage.clear();
+  mocks.read.mockResolvedValue({
+    operationId: '11111111-1111-4111-8111-111111111111',
+    status: 'pending',
+  });
+  mocks.reserve.mockResolvedValue({
+    operationId: '11111111-1111-4111-8111-111111111111',
+    status: 'pending',
+  });
+  mocks.retry.mockResolvedValue({
+    operationId: '11111111-1111-4111-8111-111111111111',
+    status: 'pending',
+  });
+});
+afterEach(() => {
+  for (const client of clients.splice(0)) client.clear();
+});
+describe('recoverable provider operation UI state', () => {
+  it('does not finish a pending reservation and retries the exact confirmed operation', async () => {
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.pending).toBe(true));
+    await waitFor(() =>
+      expect(h.result.current.submission.isSuccess).toBe(true)
+    );
+    expect(h.applied).not.toHaveBeenCalled();
+    act(() => h.result.current.retry());
+    await waitFor(() =>
+      expect(mocks.retry).toHaveBeenCalledWith(
+        'workspace',
+        '11111111-1111-4111-8111-111111111111'
+      )
+    );
+    expect(mocks.reserve).toHaveBeenCalledTimes(1);
+    h.unmount();
+  });
+  it('retains an ambiguous admission across dialog dismissal and never creates a new intent', async () => {
+    mocks.reserve.mockRejectedValue(new Error('Response lost'));
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.submission.isError).toBe(true));
+    h.unmount();
+    const reopened = setup(h.client);
+    expect(reopened.result.current.pending).toBe(true);
+    mocks.reserve.mockResolvedValue({
+      operationId: '11111111-1111-4111-8111-111111111111',
+      status: 'pending',
+    });
+    act(() => reopened.result.current.retry());
+    await waitFor(() => expect(mocks.reserve).toHaveBeenCalledTimes(2));
+    expect(mocks.reserve.mock.calls[1]).toEqual(['workspace', payload]);
+    reopened.unmount();
+  });
+  it('finishes only a matching applied receipt and clears the retained intent', async () => {
+    mocks.reserve.mockResolvedValue({
+      operationId: '11111111-1111-4111-8111-111111111111',
+      status: 'applied',
+      result: {},
+    });
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.applied).toHaveBeenCalledTimes(1));
+    expect(h.result.current.pending).toBe(false);
+    h.unmount();
+  });
+
+  it('recovers only the operation UUID after reload without persisting event contents', async () => {
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() =>
+      expect(h.result.current.submission.isSuccess).toBe(true)
+    );
+    expect(JSON.stringify(sessionStorage)).not.toContain('Test series');
+    h.unmount();
+    const restored = setup();
+    expect(restored.result.current.pending).toBe(true);
+    act(() => restored.result.current.retry());
+    await waitFor(() =>
+      expect(mocks.retry).toHaveBeenCalledWith('workspace', payload.requestId)
+    );
+    expect(mocks.reserve).toHaveBeenCalledTimes(1);
+    restored.unmount();
+  });
+
+  it('releases a completed preflight rejection only after an authoritative absent operation', async () => {
+    mocks.reserve.mockRejectedValue(new InternalApiError('Unsupported', 422));
+    mocks.read.mockRejectedValue(new InternalApiError('Absent', 404));
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.submission.isError).toBe(true));
+    expect(h.result.current.pending).toBe(false);
+    expect(sessionStorage.length).toBe(0);
+    h.unmount();
+  });
+  it('blocks dispatch when UUID recovery storage is unavailable', async () => {
+    const storage = vi
+      .spyOn(Storage.prototype, 'setItem')
+      .mockImplementation(() => {
+        throw new Error('Storage denied');
+      });
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.submission.isError).toBe(true));
+    expect(mocks.reserve).not.toHaveBeenCalled();
+    expect(h.result.current.pending).toBe(false);
+    h.unmount();
+    storage.mockRestore();
+  });
+  it('does not carry another actor’s pending draft into the new session', async () => {
+    const h = setup();
+    act(() => h.result.current.submission.mutate(payload));
+    await waitFor(() => expect(h.result.current.pending).toBe(true));
+    h.unmount();
+    const other = setup(h.client, 'another-actor');
+    expect(other.result.current.pending).toBe(false);
+    other.unmount();
+  });
+});

package/src/components/ui/legacy/calendar/use-provider-recurrence-operation.ts

@@ -0,0 +1,186 @@
+'use client';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  type CalendarProviderSeriesOperationPayload,
+  type CalendarProviderSeriesOperationResult,
+  getCalendarProviderSeriesOperation,
+  reserveCalendarProviderSeriesOperation,
+  retryCalendarProviderSeriesOperation,
+} from '@tuturuuu/internal-api/calendar-provider-series';
+import { InternalApiError } from '@tuturuuu/internal-api/client';
+import { useEffect, useMemo } from 'react';
+import type { useWorkspaceActor } from '../../../../hooks/use-workspace-visibility';
+
+type Pending = {
+  operationId: string;
+  payload?: CalendarProviderSeriesOperationPayload;
+  confirmed: boolean;
+};
+/** Retained within the actor-scoped query cache so dismissing a pending dialog cannot create another intent. */
+export function useProviderRecurrenceOperation({
+  wsId,
+  actor,
+  identity,
+  onApplied,
+}: {
+  wsId: string;
+  actor: NonNullable<ReturnType<typeof useWorkspaceActor>>;
+  identity: string;
+  onApplied: () => void;
+}) {
+  const client = useQueryClient();
+  const key = useMemo(
+    () => ['calendar-provider-pending', wsId, actor.actorId, identity],
+    [wsId, actor.actorId, identity]
+  );
+  const storageKey = `calendar-provider-operation:${wsId}:${actor.actorId}:${identity}`;
+  const retained = useQuery<Pending | null>({
+    queryKey: key,
+    queryFn: () => null,
+    enabled: false,
+    initialData: () => {
+      try {
+        const id = sessionStorage.getItem(storageKey);
+        return id && /^[0-9a-f]{8}-[0-9a-f-]{27,40}$/i.test(id)
+          ? { operationId: id, confirmed: true }
+          : null;
+      } catch {
+        return null;
+      }
+    },
+    gcTime: Infinity,
+  });
+  const pending = retained.data;
+  const status = useQuery({
+    queryKey: [
+      'calendar-provider-operation',
+      wsId,
+      actor.actorId,
+      pending?.operationId,
+    ],
+    enabled: !!pending,
+    queryFn: async ({ signal }) => {
+      actor.assertActive();
+      const value = await getCalendarProviderSeriesOperation(
+        wsId,
+        pending!.operationId,
+        { signal }
+      );
+      actor.assertActive();
+      return value;
+    },
+    retry: false,
+    refetchInterval: (query) => {
+      if (query.state.data?.status === 'applied') return false;
+      const error = query.state.error;
+      if (
+        error instanceof InternalApiError &&
+        [401, 403, 404, 409, 422, 429].includes(error.status)
+      )
+        return false;
+      // Network/server failures need an explicit retry, not a repeated request storm.
+      return error ? false : 2000;
+    },
+  });
+  const submission = useMutation({
+    mutationFn: async (payload?: CalendarProviderSeriesOperationPayload) => {
+      actor.assertActive();
+      const current = client.getQueryData<Pending | null>(key);
+      const intent = current?.payload ?? payload;
+      const operationId = current?.operationId ?? intent?.requestId;
+      if (!operationId) throw new Error('No provider operation');
+      // UUID only: preserve recovery across reloads without storing event content or credentials.
+      // If storage is unavailable, fail before admitting a request that cannot be recovered.
+      sessionStorage.setItem(storageKey, operationId);
+      // Retain before sending: a failed response may follow a successful remote reservation.
+      client.setQueryData<Pending>(key, {
+        operationId,
+        payload: intent,
+        confirmed: current?.confirmed ?? false,
+      });
+      let value: CalendarProviderSeriesOperationResult;
+      try {
+        value =
+          current?.confirmed || !intent
+            ? await retryCalendarProviderSeriesOperation(wsId, operationId)
+            : await reserveCalendarProviderSeriesOperation(wsId, intent);
+      } catch (error) {
+        // Only a completed rejection plus authoritative absence can release an intent.
+        // Transport errors retain it because the server may already have reserved it.
+        if (
+          !current?.confirmed &&
+          error instanceof InternalApiError &&
+          [400, 403, 404, 409, 422].includes(error.status)
+        ) {
+          try {
+            await getCalendarProviderSeriesOperation(wsId, operationId);
+          } catch (lookupError) {
+            actor.assertActive();
+            if (
+              lookupError instanceof InternalApiError &&
+              lookupError.status === 404
+            ) {
+              sessionStorage.removeItem(storageKey);
+              client.setQueryData(key, null);
+            }
+          }
+        }
+        throw error;
+      }
+      actor.assertActive();
+      const operationKey = [
+        'calendar-provider-operation',
+        wsId,
+        actor.actorId,
+        operationId,
+      ];
+      const observed =
+        client.getQueryData<CalendarProviderSeriesOperationResult>(
+          operationKey
+        );
+      if (
+        observed?.status === 'applied' &&
+        observed.operationId === operationId
+      )
+        return observed;
+      client.setQueryData<Pending>(key, {
+        operationId,
+        payload: intent,
+        confirmed: true,
+      });
+      client.setQueryData<CalendarProviderSeriesOperationResult>(
+        ['calendar-provider-operation', wsId, actor.actorId, operationId],
+        value
+      );
+      return value;
+    },
+  });
+  const receipt =
+    status.data?.status === 'applied' ? status.data : submission.data;
+  const applied =
+    !!pending &&
+    receipt?.status === 'applied' &&
+    receipt.operationId === pending.operationId;
+  useEffect(() => {
+    if (!applied) return;
+    try {
+      actor.assertActive();
+    } catch {
+      return;
+    }
+    if (!client.getQueryData<Pending | null>(key)) return;
+    try {
+      sessionStorage.removeItem(storageKey);
+    } catch {
+      /* An applied UUID is safe to recover again. */
+    }
+    client.setQueryData(key, null);
+    onApplied();
+  }, [applied, actor, client, key, storageKey, onApplied]);
+  return {
+    pending: !!pending,
+    submission,
+    status,
+    retry: () => submission.mutate(undefined),
+  };
+}

package/src/components/ui/public-link-button.test.tsx

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+import { act, type ComponentProps } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { PublicLinkButton } from './public-link-button';
+
+vi.mock('./button', () => ({
+  Button: ({
+    variant: _variant,
+    ...props
+  }: ComponentProps<'button'> & { variant?: string }) => <button {...props} />,
+}));
+vi.mock('./input', () => ({
+  Input: (props: ComponentProps<'input'>) => <input {...props} />,
+}));
+const container = document.createElement('div');
+document.body.append(container);
+let root = createRoot(container);
+const copy = vi.fn(),
+  url = 'https://tuturuuu.com/u/creator';
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+beforeEach(() => {
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: { writeText: copy },
+  });
+  copy.mockResolvedValue(undefined);
+});
+afterEach(async () => {
+  await act(() => root.unmount());
+  root = createRoot(container);
+  vi.clearAllMocks();
+});
+async function render(link: string | null = url) {
+  await act(() =>
+    root.render(
+      <PublicLinkButton
+        url={link}
+        label="Copy link"
+        copiedLabel="Copied"
+        errorLabel="Failed"
+        manualCopyLabel="Manual link"
+      />
+    )
+  );
+}
+async function click() {
+  await act(() => container.querySelector('button')!.click());
+}
+it('copies only after an explicit click and announces success', async () => {
+  await render();
+  expect(copy).not.toHaveBeenCalled();
+  expect(container.querySelector('input')).toBeNull();
+  await click();
+  expect(copy).toHaveBeenCalledWith(url);
+  expect(container.querySelector('[role=status]')!.textContent).toBe('Copied');
+});
+it('excludes invalid/private URLs entirely', async () => {
+  await render('https://tuturuuu.com/private/settings');
+  expect(container.querySelector('button')).toBeNull();
+  expect(copy).not.toHaveBeenCalled();
+});
+it('supports manual selection and retry after a clipboard denial', async () => {
+  await render();
+  copy.mockRejectedValueOnce(new Error('Denied'));
+  await click();
+  expect(container.querySelector('[role=alert]')!.textContent).toBe('Failed');
+  const input = container.querySelector('input')!;
+  expect(input.value).toBe(url);
+  expect(input.readOnly).toBe(true);
+  await act(() => input.focus());
+  expect(input.selectionEnd).toBe(url.length);
+  await click();
+  expect(container.querySelector('input')).toBeNull();
+  expect(container.querySelector('[role=status]')!.textContent).toBe('Copied');
+});
+it('provides manual copy when Clipboard API is unavailable', async () => {
+  Object.defineProperty(navigator, 'clipboard', {
+    configurable: true,
+    value: undefined,
+  });
+  await render();
+  await click();
+  expect(container.querySelector('input')!.value).toBe(url);
+});
+it('fences rapid duplicate clicks and suppresses stale success after URL replacement', async () => {
+  let finish!: () => void;
+  copy.mockReturnValue(
+    new Promise<void>((resolve) => {
+      finish = resolve;
+    })
+  );
+  await render();
+  await act(() => {
+    container.querySelector('button')!.click();
+    container.querySelector('button')!.click();
+  });
+  expect(copy).toHaveBeenCalledTimes(1);
+  await render('https://tuturuuu.com/u/other');
+  await act(() => finish());
+  expect(container.querySelector('[role=status]')).toBeNull();
+  expect(container.querySelector('input')).toBeNull();
+});
+it('suppresses stale failure after unmount', async () => {
+  let fail!: (error: Error) => void;
+  copy.mockReturnValue(
+    new Promise<void>((_, reject) => {
+      fail = reject;
+    })
+  );
+  await render();
+  await act(() => container.querySelector('button')!.click());
+  await act(() => root.render(null));
+  await act(() => fail(new Error('Denied')));
+  expect(container.innerHTML).toBe('');
+});

package/src/components/ui/public-link-button.tsx

@@ -0,0 +1,81 @@
+'use client';
+import { safePublicContentLink } from '@tuturuuu/utils/public-content-link';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from './button';
+import { Input } from './input';
+
+type Props = {
+  url: string | null;
+  label: string;
+  copiedLabel: string;
+  errorLabel: string;
+  manualCopyLabel: string;
+};
+export function PublicLinkButton(props: Props) {
+  const url = safePublicContentLink(props.url);
+  return url ? <CopyButton key={url} {...props} url={url} /> : null;
+}
+function CopyButton({
+  url,
+  label,
+  copiedLabel,
+  errorLabel,
+  manualCopyLabel,
+}: Props & { url: string }) {
+  const [status, setStatus] = useState<
+    'idle' | 'pending' | 'copied' | 'failed'
+  >('idle');
+  const active = useRef(true),
+    busy = useRef(false);
+  useEffect(() => {
+    active.current = true;
+    return () => {
+      active.current = false;
+    };
+  }, []);
+  return (
+    <div className="space-y-2">
+      <Button
+        variant="outline"
+        disabled={status === 'pending'}
+        onClick={async () => {
+          if (busy.current) return;
+          busy.current = true;
+          setStatus('pending');
+          try {
+            if (!navigator.clipboard?.writeText)
+              throw new Error('Clipboard unavailable');
+            await navigator.clipboard.writeText(url);
+            if (active.current) setStatus('copied');
+          } catch {
+            if (active.current) setStatus('failed');
+          } finally {
+            busy.current = false;
+          }
+        }}
+      >
+        {label}
+      </Button>
+      {status === 'copied' && (
+        <p role="status" className="text-muted-foreground text-sm">
+          {copiedLabel}
+        </p>
+      )}
+      {status === 'failed' && (
+        <>
+          <p role="alert" className="text-sm">
+            {errorLabel}
+          </p>
+          <label className="block space-y-1 text-sm">
+            {manualCopyLabel}
+            <Input
+              readOnly
+              value={url}
+              onFocus={(event) => event.target.select()}
+            />
+          </label>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/ui/text-editor/editor.tsx

@@ -132,6 +132,7 @@ export interface RichTextEditorProps {
   };
   renderTaskMention?: TaskMentionNodeViewRenderer;
   toolbarLeadingContent?: React.ReactNode;
+  toolbarToolsLabel?: string;
   toggleBlockLabel?: string;
   copyLabels?: EditorCopyLabels;
 }
@@ -164,6 +165,7 @@ export function RichTextEditor({
   mentionTranslations,
   renderTaskMention,
   toolbarLeadingContent,
+  toolbarToolsLabel,
   toggleBlockLabel,
   copyLabels,
 }: RichTextEditorProps) {
@@ -651,6 +653,7 @@ export function RichTextEditor({
           onImageUpload={onImageUpload}
           onConvertToTask={onConvertToTask}
           leadingContent={toolbarLeadingContent}
+          toolsLabel={toolbarToolsLabel}
           toggleBlockLabel={toggleBlockLabel}
           copyLabels={copyLabels}
         />