@tuturuuu/ui 0.38.0 → 0.39.0

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/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}
         />

package/src/components/ui/text-editor/fixed-toolbar-contents.test.tsx

@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { Editor } from '@tiptap/react';
+import { TooltipProvider } from '@tuturuuu/ui/tooltip';
+import { describe, expect, it, vi } from 'vitest';
+import { FixedToolbarContents } from './fixed-toolbar-contents';
+
+vi.mock('./color-controls', () => ({
+  TextEditorColorControls: () => <button type="button">Colors</button>,
+}));
+vi.mock('./copy-menu', () => ({
+  EditorCopyMenu: () => <button type="button">Copy tools</button>,
+}));
+
+function mount(toolsLabel?: string) {
+  const heading = vi.fn();
+  const bold = vi.fn();
+  const options = new Map([
+    ['bold', { icon: <span>B</span>, pressed: false, onClick: bold }],
+    ['heading-1', { icon: <span>H1</span>, pressed: false, onClick: heading }],
+  ]);
+  render(
+    <TooltipProvider>
+      <FixedToolbarContents
+        editor={{} as Editor}
+        options={options}
+        toolsLabel={toolsLabel}
+        imageUpload={false}
+        videoUpload={false}
+        uploadingImage={false}
+        uploadingVideo={false}
+        onImage={vi.fn()}
+        onVideo={vi.fn()}
+      />
+    </TooltipProvider>
+  );
+  return { heading, bold };
+}
+
+describe('optional compact document toolbar', () => {
+  it('retains the existing full toolbar by default', () => {
+    const { heading } = mount();
+    expect(screen.queryByRole('button', { name: 'Tools' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Heading 1' }));
+    expect(heading).toHaveBeenCalledOnce();
+    expect(screen.getByRole('button', { name: 'Colors' })).toBeTruthy();
+  });
+  it('keeps primary formatting reachable and places secondary controls in Tools', () => {
+    const { heading, bold } = mount('Tools');
+    expect(screen.queryByRole('button', { name: 'Heading 1' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Colors' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Bold' }));
+    expect(bold).toHaveBeenCalledOnce();
+    fireEvent.click(screen.getByRole('button', { name: 'Tools' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Heading 1' }));
+    expect(heading).toHaveBeenCalledOnce();
+    expect(screen.getByRole('button', { name: 'Colors' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Copy tools' })).toBeTruthy();
+  });
+});

package/src/components/ui/text-editor/fixed-toolbar-contents.tsx

@@ -0,0 +1,156 @@
+import type { Editor } from '@tiptap/react';
+import {
+  CirclePlus,
+  FileVideo,
+  ImageIcon,
+  Loader2,
+  Settings2,
+} from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
+import type { ReactNode } from 'react';
+import { TextEditorColorControls } from './color-controls';
+import { type EditorCopyLabels, EditorCopyMenu } from './copy-menu';
+import { TOOLBAR_GROUPS } from './toolbar-config';
+import { ToolbarButton, ToolbarSeparator } from './toolbar-controls';
+
+interface Props {
+  editor: Editor;
+  options: Map<
+    string,
+    { onClick: () => void; pressed: boolean; icon: ReactNode }
+  >;
+  toolsLabel?: string;
+  toggleBlockLabel?: string;
+  copyLabels?: EditorCopyLabels;
+  imageUpload: boolean;
+  videoUpload: boolean;
+  uploadingImage: boolean;
+  uploadingVideo: boolean;
+  onImage: () => void;
+  onVideo: () => void;
+  onConvertToTask?: () => void | Promise<void>;
+}
+
+/** Optional compact presentation; existing editors keep the full toolbar. */
+export function FixedToolbarContents({
+  editor,
+  options,
+  toolsLabel,
+  toggleBlockLabel,
+  copyLabels,
+  imageUpload,
+  videoUpload,
+  uploadingImage,
+  uploadingVideo,
+  onImage,
+  onVideo,
+  onConvertToTask,
+}: Props) {
+  function control(key: string) {
+    const option = options.get(key);
+    if (!option) return null;
+    return (
+      <ToolbarButton
+        key={key}
+        id={key}
+        label={key === 'toggle-block' ? toggleBlockLabel : undefined}
+        icon={option.icon}
+        pressed={option.pressed}
+        onClick={option.onClick}
+      />
+    );
+  }
+  const primary = new Set(['bold', 'italic', 'strike']);
+  const groups = TOOLBAR_GROUPS.map((group, index) => {
+    const keys = toolsLabel ? group.filter((key) => !primary.has(key)) : group;
+    if (!keys.length) return null;
+    return (
+      <div
+        key={index}
+        className={toolsLabel ? 'flex items-center gap-1' : 'contents'}
+      >
+        {!toolsLabel && index > 0 && <ToolbarSeparator />}
+        {keys.map(control)}
+      </div>
+    );
+  });
+  const secondary = (
+    <>
+      {groups}
+      <ToolbarSeparator />
+      <TextEditorColorControls editor={editor} />
+      {imageUpload && (
+        <>
+          <ToolbarSeparator />
+          <ToolbarButton
+            id="image"
+            icon={
+              uploadingImage ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <ImageIcon className="size-4" />
+              )
+            }
+            pressed={false}
+            onClick={onImage}
+            disabled={uploadingImage}
+          />
+          {videoUpload && (
+            <ToolbarButton
+              id="video"
+              icon={
+                uploadingVideo ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <FileVideo className="size-4" />
+                )
+              }
+              pressed={false}
+              onClick={onVideo}
+              disabled={uploadingVideo}
+            />
+          )}
+        </>
+      )}
+      {onConvertToTask && (
+        <>
+          <ToolbarSeparator />
+          <ToolbarButton
+            id="convert-to-task"
+            icon={<CirclePlus className="size-4" />}
+            pressed={false}
+            onClick={onConvertToTask}
+          />
+        </>
+      )}
+      <ToolbarSeparator />
+      <EditorCopyMenu editor={editor} labels={copyLabels} />
+    </>
+  );
+  if (!toolsLabel) return secondary;
+  return (
+    <>
+      {[...primary].map(control)}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-8 shrink-0"
+          >
+            <Settings2 className="size-4" aria-hidden="true" />
+            {toolsLabel}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="flex w-80 max-w-[calc(100vw-2rem)] flex-wrap items-center gap-1"
+        >
+          {secondary}
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}