@tuturuuu/ui 0.6.2 → 0.8.0

package/src/components/ui/tu-do/shared/task-edit-dialog/hooks/task-api.ts

@@ -1,11 +1,27 @@
 import {
+  abortWorkspaceTaskDescriptionChunks,
+  appendWorkspaceTaskDescriptionChunk,
+  beginWorkspaceTaskDescriptionChunks,
+  commitWorkspaceTaskDescriptionChunks,
   createWorkspaceTaskProject,
   getWorkspaceTask,
+  getWorkspaceTaskDescription,
+  updateWorkspaceTaskDescription as updateWorkspaceTaskDescriptionViaApi,
   updateWorkspaceTask as updateWorkspaceTaskViaApi,
+  type WorkspaceTaskDescriptionChunkField,
+  type WorkspaceTaskDescriptionChunkFields,
+  type WorkspaceTaskDescriptionResponse,
+  type WorkspaceTaskDescriptionUpdatePayload,
   type WorkspaceTaskUpdatePayload,
 } from '@tuturuuu/internal-api/tasks';
 import type { WorkspaceTaskLabel } from '../types';
 
+const TASK_DESCRIPTION_DIRECT_BODY_LIMIT_BYTES = 192 * 1024;
+const TASK_DESCRIPTION_CHUNK_TEXT_LENGTH = 96 * 1024;
+const TASK_DESCRIPTION_TOO_LARGE_MESSAGE =
+  'Description content is too large. Please shorten it or split it into smaller documents.';
+const textEncoder = new TextEncoder();
+
 async function getErrorMessage(
   response: Response,
   fallback: string,
@@ -38,59 +54,207 @@ export async function fetchWorkspaceTask(wsId: string, taskId: string) {
   return getWorkspaceTask(wsId, taskId);
 }
 
-interface TaskDescriptionResponse {
-  description: string | null;
-  description_yjs_state: number[] | null;
-}
-
 export async function fetchWorkspaceTaskDescription(
   wsId: string,
   taskId: string
 ) {
-  const requestPath = `/api/v1/workspaces/${wsId}/tasks/${taskId}/description`;
-  const response = await fetch(requestPath, {
-    method: 'GET',
-    cache: 'no-store',
-  });
+  return getWorkspaceTaskDescription(wsId, taskId);
+}
 
-  if (!response.ok) {
-    throw new Error(
-      await getErrorMessage(response, 'Failed to fetch task description', {
-        requestPath,
-      })
+export async function updateWorkspaceTaskDescription(
+  wsId: string,
+  taskId: string,
+  payload: WorkspaceTaskDescriptionUpdatePayload
+) {
+  if (shouldChunkTaskDescriptionPayload(payload)) {
+    return updateWorkspaceTaskDescriptionChunked(wsId, taskId, payload);
+  }
+
+  try {
+    return await updateWorkspaceTaskDescriptionViaApi(wsId, taskId, payload);
+  } catch (error) {
+    if (isPayloadTooLargeError(error)) {
+      return updateWorkspaceTaskDescriptionChunked(wsId, taskId, payload);
+    }
+
+    throw normalizeTaskDescriptionError(
+      error,
+      'Failed to update task description'
     );
   }
+}
 
-  return (await response.json()) as TaskDescriptionResponse;
+export function shouldChunkTaskDescriptionPayload(
+  payload: WorkspaceTaskDescriptionUpdatePayload
+) {
+  return getJsonByteLength(payload) > TASK_DESCRIPTION_DIRECT_BODY_LIMIT_BYTES;
 }
 
-export async function updateWorkspaceTaskDescription(
+export async function updateWorkspaceTaskDescriptionChunked(
   wsId: string,
   taskId: string,
-  payload: {
-    description?: string | null;
-    description_yjs_state?: number[] | null;
+  payload: WorkspaceTaskDescriptionUpdatePayload
+): Promise<WorkspaceTaskDescriptionResponse> {
+  const chunksByField = buildTaskDescriptionChunks(payload);
+  const fields = buildTaskDescriptionChunkFields(chunksByField);
+
+  if (Object.keys(fields).length === 0) {
+    return updateWorkspaceTaskDescriptionViaApi(wsId, taskId, payload);
   }
-) {
-  const requestPath = `/api/v1/workspaces/${wsId}/tasks/${taskId}/description`;
-  const response = await fetch(requestPath, {
-    method: 'PATCH',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(payload),
-    cache: 'no-store',
-  });
 
-  if (!response.ok) {
-    throw new Error(
-      await getErrorMessage(response, 'Failed to update task description', {
-        requestPath,
-      })
+  const { session_id: sessionId } = await beginWorkspaceTaskDescriptionChunks(
+    wsId,
+    taskId,
+    fields
+  );
+
+  try {
+    for (const field of ['description', 'description_yjs_state'] as const) {
+      const chunks = chunksByField[field];
+      if (!chunks) continue;
+
+      for (let index = 0; index < chunks.length; index += 1) {
+        await appendWorkspaceTaskDescriptionChunk(wsId, taskId, {
+          chunk: chunks[index] ?? '',
+          chunk_index: index,
+          field,
+          session_id: sessionId,
+        });
+      }
+    }
+
+    return await commitWorkspaceTaskDescriptionChunks(wsId, taskId, sessionId);
+  } catch (error) {
+    await abortWorkspaceTaskDescriptionChunks(wsId, taskId, sessionId).catch(
+      () => undefined
+    );
+
+    throw normalizeTaskDescriptionError(
+      error,
+      'Failed to update task description'
     );
   }
+}
+
+function getJsonByteLength(value: unknown) {
+  return textEncoder.encode(JSON.stringify(value)).byteLength;
+}
+
+function isPayloadTooLargeError(error: unknown) {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'status' in error &&
+    (error as { status?: unknown }).status === 413
+  );
+}
+
+function normalizeTaskDescriptionError(error: unknown, fallback: string) {
+  if (isPayloadTooLargeError(error)) {
+    return new Error(TASK_DESCRIPTION_TOO_LARGE_MESSAGE);
+  }
+
+  return error instanceof Error ? error : new Error(fallback);
+}
+
+function splitStringIntoChunks(value: string) {
+  const chunks: string[] = [];
+
+  for (
+    let index = 0;
+    index < value.length;
+    index += TASK_DESCRIPTION_CHUNK_TEXT_LENGTH
+  ) {
+    chunks.push(value.slice(index, index + TASK_DESCRIPTION_CHUNK_TEXT_LENGTH));
+  }
+
+  return chunks.length > 0 ? chunks : [''];
+}
+
+function bytesToBase64(bytes: number[]) {
+  const byteArray = Uint8Array.from(bytes);
+
+  if (typeof btoa === 'function') {
+    let binary = '';
+    const step = 0x8000;
+
+    for (let index = 0; index < byteArray.length; index += step) {
+      binary += String.fromCharCode(...byteArray.subarray(index, index + step));
+    }
+
+    return btoa(binary);
+  }
+
+  const nodeBuffer = (
+    globalThis as typeof globalThis & {
+      Buffer?: {
+        from: (value: Uint8Array) => {
+          toString: (encoding: 'base64') => string;
+        };
+      };
+    }
+  ).Buffer;
+
+  if (!nodeBuffer) {
+    throw new Error('Unable to encode task description state.');
+  }
+
+  return nodeBuffer.from(byteArray).toString('base64');
+}
+
+function buildTaskDescriptionChunks(
+  payload: WorkspaceTaskDescriptionUpdatePayload
+): Partial<Record<WorkspaceTaskDescriptionChunkField, string[] | null>> {
+  const chunks: Partial<
+    Record<WorkspaceTaskDescriptionChunkField, string[] | null>
+  > = {};
+
+  if ('description' in payload) {
+    chunks.description =
+      payload.description === null
+        ? null
+        : splitStringIntoChunks(payload.description ?? '');
+  }
+
+  if ('description_yjs_state' in payload) {
+    chunks.description_yjs_state =
+      payload.description_yjs_state === null
+        ? null
+        : splitStringIntoChunks(
+            bytesToBase64(payload.description_yjs_state ?? [])
+          );
+  }
+
+  return chunks;
+}
+
+function buildTaskDescriptionChunkFields(
+  chunksByField: Partial<
+    Record<WorkspaceTaskDescriptionChunkField, string[] | null>
+  >
+) {
+  const fields: WorkspaceTaskDescriptionChunkFields = {};
+
+  for (const field of ['description', 'description_yjs_state'] as const) {
+    const chunks = chunksByField[field];
+    if (chunks === undefined) continue;
+
+    if (chunks === null) {
+      fields[field] = {
+        chunk_count: 0,
+        is_null: true,
+        total_length: 0,
+      };
+      continue;
+    }
+
+    fields[field] = {
+      chunk_count: chunks.length,
+      total_length: chunks.join('').length,
+    };
+  }
 
-  return (await response.json()) as TaskDescriptionResponse;
+  return fields;
 }
 
 export async function createWorkspaceLabel(

package/src/components/ui/tu-do/shared/task-edit-dialog/hooks/use-task-save.ts

@@ -34,6 +34,7 @@ import {
   updateTaskDescriptionCaches,
 } from '../utils';
 import {
+  shouldChunkTaskDescriptionPayload,
   updateWorkspaceTask,
   updateWorkspaceTaskDescription,
 } from './task-api';
@@ -945,9 +946,17 @@ export async function handleCreateTask({
       ];
     }
 
+    const createDescriptionPayload = {
+      description: descriptionString || '',
+      description_yjs_state: descriptionYjsState ?? undefined,
+    };
+    const shouldDeferDescription = shouldChunkTaskDescriptionPayload(
+      createDescriptionPayload
+    );
+
     const taskData: Partial<Task> = {
       name: name.trim(),
-      description: descriptionString || '',
+      description: shouldDeferDescription ? '' : descriptionString || '',
       priority: priority,
       start_date: startDate ? startDate.toISOString() : undefined,
       end_date: endDate ? endDate.toISOString() : undefined,
@@ -957,7 +966,9 @@ export async function handleCreateTask({
     };
     const newTask = await createTask(wsId, selectedListId, {
       ...taskData,
-      description_yjs_state: descriptionYjsState ?? undefined,
+      description_yjs_state: shouldDeferDescription
+        ? undefined
+        : (descriptionYjsState ?? undefined),
       label_ids: selectedLabels.map((label) => label.id),
       assignee_ids: desiredAssignees
         .map((assignee) => assignee.user_id || assignee.id)
@@ -965,6 +976,14 @@ export async function handleCreateTask({
       project_ids: selectedProjects.map((project) => project.id),
     });
 
+    if (shouldDeferDescription) {
+      await updateWorkspaceTaskDescription(wsId, newTask.id, {
+        description: descriptionString,
+        description_yjs_state: descriptionYjsState,
+      });
+      newTask.description = descriptionString ?? undefined;
+    }
+
     // Save per-user scheduling settings for the creator (if any were provided)
     const hasAnySchedulingValue =
       totalDuration != null ||

package/src/components/ui/tu-do/shared/task-edit-dialog.tsx

@@ -47,6 +47,7 @@ import { createInitialSuggestionState } from './mention-system/types';
 import { SyncWarningDialog } from './sync-warning-dialog';
 import {
   normalizeTaskDialogPresentation,
+  resolveTaskDialogOpeningPresentation,
   type TaskDialogPresentation,
 } from './task-dialog-presentation';
 import { CompactTaskDialogPanel } from './task-edit-dialog/components/compact-task-create-popover';
@@ -107,6 +108,7 @@ import {
   getDescriptionContent,
   getDraftStorageKey,
   getTaskDescriptionPercentLeft,
+  getTaskDescriptionPreviewText,
   getTaskDescriptionStorageLength,
   saveAndVerifyYjsDescriptionToDatabase,
   saveYjsDescriptionToDatabase,
@@ -494,6 +496,23 @@ export function TaskEditDialog({
     taskSearchQuery,
     sharedContext,
   });
+  const currentList = availableLists?.find(
+    (list) => list.id === formState.selectedListId
+  );
+  const normalizedDefaultPresentation = useMemo(
+    () => normalizeTaskDialogPresentation(defaultPresentation),
+    [defaultPresentation]
+  );
+  const openingPresentation = useMemo(
+    () =>
+      resolveTaskDialogOpeningPresentation({
+        defaultPresentation: normalizedDefaultPresentation,
+        draftId,
+        mode,
+        selectedListStatus: currentList?.status,
+      }),
+    [currentList?.status, draftId, mode, normalizedDefaultPresentation]
+  );
 
   // Update browser tab title
   useEffect(() => {
@@ -552,13 +571,8 @@ export function TaskEditDialog({
     useState(false);
   const [showShareDialog, setShowShareDialog] = useState(false);
   const [saveAsDraft, setSaveAsDraft] = useState(draftModeEnabled);
-  const normalizedDefaultPresentation = useMemo(
-    () => normalizeTaskDialogPresentation(defaultPresentation),
-    [defaultPresentation]
-  );
-  const [presentation, setPresentation] = useState<TaskDialogPresentation>(
-    normalizedDefaultPresentation
-  );
+  const [presentation, setPresentation] =
+    useState<TaskDialogPresentation>(openingPresentation);
   const [smartSuggestions, setSmartSuggestions] = useState<
     WorkspaceTaskSuggestionTask[]
   >([]);
@@ -849,9 +863,6 @@ export function TaskEditDialog({
     onUpdate,
   });
 
-  const currentList = availableLists?.find(
-    (list) => list.id === formState.selectedListId
-  );
   const doneList = availableLists?.find(
     (list) => list.status === 'done' && !list.deleted
   );
@@ -1946,7 +1957,7 @@ export function TaskEditDialog({
     previousOpenRef.current = isOpen;
 
     if (!isOpen) {
-      setPresentation(normalizedDefaultPresentation);
+      setPresentation(openingPresentation);
       setSmartSuggestions([]);
       setSelectedSmartSuggestionIds([]);
       setSmartSuggestionError(null);
@@ -1957,9 +1968,14 @@ export function TaskEditDialog({
     }
 
     if (justOpened) {
-      setPresentation(draftId ? 'fullscreen' : normalizedDefaultPresentation);
+      setPresentation(openingPresentation);
+      return;
+    }
+
+    if (!isCreateMode && currentList?.status === 'documents') {
+      setPresentation('fullscreen');
     }
-  }, [isOpen, draftId, normalizedDefaultPresentation]);
+  }, [currentList?.status, isCreateMode, isOpen, openingPresentation]);
 
   // Track whether the title input is scrolled out of view
   useEffect(() => {
@@ -2023,6 +2039,15 @@ export function TaskEditDialog({
   ]);
 
   const showCompactDialog = presentation === 'compact' && !draftId;
+  const compactDescriptionPreview = useMemo(() => {
+    if (isCreateMode) return null;
+
+    const previewText = getTaskDescriptionPreviewText(
+      formState.description
+    ).trim();
+
+    return previewText || null;
+  }, [formState.description, isCreateMode]);
   const taskHydrationNotice = taskLoadError ? (
     <div
       className="mx-4 mb-2 flex items-center justify-between gap-3 rounded-md border border-dynamic-red/30 bg-dynamic-red/10 px-3 py-2 text-dynamic-red text-sm md:mx-8"
@@ -2235,7 +2260,7 @@ export function TaskEditDialog({
           showCloseButton={false}
           className={
             showCompactDialog
-              ? 'w-[min(calc(100vw-2rem),30rem)] max-w-[30rem] gap-0 overflow-hidden rounded-lg border p-0 shadow-xl'
+              ? 'w-[min(calc(100vw-2rem),30rem)] max-w-[30rem] gap-0 overflow-visible rounded-lg border p-0 shadow-xl'
               : 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-bottom-2 data-[state=open]:slide-in-from-bottom-2 inset-0! top-0! left-0! flex h-screen max-h-screen w-screen max-w-none! translate-x-0! translate-y-0! gap-0 rounded-none! border-0 p-0'
           }
           onContextMenu={(e) => {
@@ -2271,6 +2296,8 @@ export function TaskEditDialog({
               iconBgClass={compactHeaderInfo.iconBgClass}
               iconRingClass={compactHeaderInfo.iconRingClass}
               showHeaderTitle={isCreateMode}
+              descriptionPreview={compactDescriptionPreview}
+              descriptionPreviewLabel={dialogT('open_fullscreen')}
               titleInput={
                 <TaskNameInput
                   name={formState.name}
@@ -2311,6 +2338,7 @@ export function TaskEditDialog({
               }
               onClose={handleAttemptClose}
               onFullscreen={() => setPresentation('fullscreen')}
+              onDescriptionPreviewClick={() => setPresentation('fullscreen')}
               onSave={
                 isCreateMode && !taskControlsDisabled ? handleSave : undefined
               }

package/src/hooks/__tests__/useBoardRealtime.test.tsx

@@ -248,7 +248,7 @@ describe('useBoardRealtime', () => {
       expect(mockChannel.subscribe).toHaveBeenCalledTimes(1);
     });
 
-    it('should create channel with self: false config', () => {
+    it('should create a private channel with self: false config', () => {
       renderHook(() => useBoardRealtime('board-1', { enabled: true }), {
         wrapper,
       });
@@ -258,7 +258,7 @@ describe('useBoardRealtime', () => {
       )();
       expect(supabaseInstance.channel).toHaveBeenCalledWith(
         'board-realtime-board-1',
-        { config: { broadcast: { self: false } } }
+        { config: { broadcast: { self: false }, private: true } }
       );
     });
 

package/src/hooks/__tests__/useCursorTracking.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { createClient } from '@tuturuuu/supabase/next/client';
+import type { RefObject } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { PRIVATE_TASK_REALTIME_CHANNEL_CONFIG } from '../useBoardRealtime.types';
+import { useCursorTracking } from '../useCursorTracking';
+
+type BroadcastListener = (message: {
+  payload: Record<string, unknown>;
+}) => void;
+
+type MockSupabaseClient = {
+  channel: ReturnType<typeof vi.fn>;
+  removeChannel: ReturnType<typeof vi.fn>;
+};
+
+type MockCreateClientFn = {
+  (): MockSupabaseClient;
+  mockReturnValue: (value: MockSupabaseClient) => void;
+};
+
+vi.mock('@tuturuuu/supabase/next/client', () => ({
+  createClient: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/utils/constants', () => ({
+  DEV_MODE: false,
+}));
+
+function createContainerRef(): RefObject<HTMLDivElement | null> {
+  const element = document.createElement('div');
+  element.getBoundingClientRect = () =>
+    ({
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    }) as DOMRect;
+  document.body.append(element);
+  return { current: element };
+}
+
+describe('useCursorTracking', () => {
+  let broadcastListeners: Map<string, BroadcastListener>;
+  let mockChannel: {
+    on: ReturnType<typeof vi.fn>;
+    send: ReturnType<typeof vi.fn>;
+    subscribe: ReturnType<typeof vi.fn>;
+  };
+  let mockRemoveChannel: ReturnType<typeof vi.fn>;
+  let requestAnimationFrameMock: ReturnType<typeof vi.fn>;
+  let animationFrameCallbacks: FrameRequestCallback[];
+
+  beforeEach(() => {
+    broadcastListeners = new Map();
+    animationFrameCallbacks = [];
+
+    requestAnimationFrameMock = vi.fn((callback: FrameRequestCallback) => {
+      animationFrameCallbacks.push(callback);
+      return animationFrameCallbacks.length;
+    });
+    vi.stubGlobal('requestAnimationFrame', requestAnimationFrameMock);
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+
+    mockChannel = {
+      on: vi.fn(
+        (
+          type: string,
+          config: { event?: string },
+          callback: BroadcastListener
+        ) => {
+          if (type === 'broadcast' && config.event) {
+            broadcastListeners.set(config.event, callback);
+          }
+          return mockChannel;
+        }
+      ),
+      send: vi.fn(),
+      subscribe: vi.fn(() => mockChannel),
+    };
+    mockRemoveChannel = vi.fn();
+
+    const mockCreateClient = createClient as unknown as MockCreateClientFn;
+    mockCreateClient.mockReturnValue({
+      channel: vi.fn(() => mockChannel),
+      removeChannel: mockRemoveChannel,
+    });
+  });
+
+  afterEach(() => {
+    document.body.replaceChildren();
+    vi.unstubAllGlobals();
+  });
+
+  it('subscribes to cursor channels with private realtime authorization', () => {
+    const containerRef = createContainerRef();
+
+    renderHook(() =>
+      useCursorTracking('board-realtime-board-1', containerRef, {
+        display_name: 'Current User',
+        id: 'user-current',
+      })
+    );
+
+    const supabaseInstance = (createClient as unknown as MockCreateClientFn)();
+    expect(supabaseInstance.channel).toHaveBeenCalledWith(
+      'board-realtime-board-1',
+      PRIVATE_TASK_REALTIME_CHANNEL_CONFIG
+    );
+  });
+
+  it('broadcasts cursor payloads without private profile fields', async () => {
+    const containerRef = createContainerRef();
+
+    renderHook(() =>
+      useCursorTracking(
+        'board-realtime-board-1',
+        containerRef,
+        {
+          avatar_url: 'https://example.com/avatar.png',
+          display_name: 'Current User',
+          email: 'current@example.com',
+          id: 'user-current',
+        },
+        { cursorScope: { boardId: 'board-1', type: 'board' } }
+      )
+    );
+
+    act(() => {
+      containerRef.current?.dispatchEvent(
+        new MouseEvent('mousemove', { clientX: 80, clientY: 40 })
+      );
+      animationFrameCallbacks.shift()?.(0);
+    });
+
+    await waitFor(() => expect(mockChannel.send).toHaveBeenCalled());
+    expect(mockChannel.send).toHaveBeenCalledWith({
+      event: 'cursor-move',
+      payload: {
+        metadata: { cursorScope: { boardId: 'board-1', type: 'board' } },
+        user: {
+          avatar_url: 'https://example.com/avatar.png',
+          display_name: 'Current User',
+          id: 'user-current',
+        },
+        x: expect.any(Number),
+        y: expect.any(Number),
+      },
+      type: 'broadcast',
+    });
+  });
+
+  it('accepts only well-formed cursor payloads and strips private fields', () => {
+    const containerRef = createContainerRef();
+    const { result } = renderHook(() =>
+      useCursorTracking('board-realtime-board-1', containerRef, {
+        display_name: 'Current User',
+        id: 'user-current',
+      })
+    );
+
+    const listener = broadcastListeners.get('cursor-move');
+    expect(listener).toBeDefined();
+
+    act(() => {
+      listener?.({
+        payload: {
+          user: { email: 'bad@example.com' },
+          x: 12,
+          y: 18,
+        },
+      });
+    });
+    expect(result.current.cursors.size).toBe(0);
+
+    act(() => {
+      listener?.({
+        payload: {
+          metadata: { cursorScope: { boardId: 'board-1', type: 'board' } },
+          user: {
+            avatar_url: 'https://example.com/other.png',
+            display_name: 'Other User',
+            email: 'other@example.com',
+            id: 'user-other',
+          },
+          x: 12,
+          y: 18,
+        },
+      });
+    });
+
+    expect(result.current.cursors.get('user-other')).toEqual({
+      lastUpdatedAt: expect.any(Number),
+      metadata: { cursorScope: { boardId: 'board-1', type: 'board' } },
+      user: {
+        avatar_url: 'https://example.com/other.png',
+        display_name: 'Other User',
+        id: 'user-other',
+      },
+      x: 12,
+      y: 18,
+    });
+  });
+});