@tuturuuu/ui 0.6.2 → 0.8.0

package/src/components/ui/tu-do/shared/task-dialog-presentation.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+import { resolveTaskDialogOpeningPresentation } from './task-dialog-presentation';
+
+describe('resolveTaskDialogOpeningPresentation', () => {
+  it('opens existing document-list tasks fullscreen', () => {
+    expect(
+      resolveTaskDialogOpeningPresentation({
+        defaultPresentation: 'compact',
+        mode: 'edit',
+        selectedListStatus: 'documents',
+      })
+    ).toBe('fullscreen');
+  });
+
+  it('keeps create mode compact even in document lists', () => {
+    expect(
+      resolveTaskDialogOpeningPresentation({
+        defaultPresentation: 'fullscreen',
+        mode: 'create',
+        selectedListStatus: 'documents',
+      })
+    ).toBe('compact');
+  });
+
+  it('respects the user default for existing non-document tasks', () => {
+    expect(
+      resolveTaskDialogOpeningPresentation({
+        defaultPresentation: 'compact',
+        mode: 'edit',
+        selectedListStatus: 'active',
+      })
+    ).toBe('compact');
+
+    expect(
+      resolveTaskDialogOpeningPresentation({
+        defaultPresentation: 'fullscreen',
+        mode: 'edit',
+        selectedListStatus: 'not_started',
+      })
+    ).toBe('fullscreen');
+  });
+
+  it('keeps drafts fullscreen', () => {
+    expect(
+      resolveTaskDialogOpeningPresentation({
+        defaultPresentation: 'compact',
+        draftId: 'draft-1',
+        mode: 'create',
+        selectedListStatus: 'documents',
+      })
+    ).toBe('fullscreen');
+  });
+});

package/src/components/ui/tu-do/shared/task-dialog-presentation.ts

@@ -2,6 +2,7 @@ export const TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID =
   'TASK_DIALOG_DEFAULT_PRESENTATION';
 
 export type TaskDialogPresentation = 'compact' | 'fullscreen';
+export type TaskDialogMode = 'edit' | 'create';
 
 export function normalizeTaskDialogPresentation(
   value: unknown,
@@ -9,3 +10,21 @@ export function normalizeTaskDialogPresentation(
 ): TaskDialogPresentation {
   return value === 'fullscreen' || value === 'compact' ? value : fallback;
 }
+
+export function resolveTaskDialogOpeningPresentation({
+  defaultPresentation,
+  draftId,
+  mode = 'edit',
+  selectedListStatus,
+}: {
+  defaultPresentation?: unknown;
+  draftId?: string;
+  mode?: TaskDialogMode;
+  selectedListStatus?: string | null;
+}): TaskDialogPresentation {
+  if (draftId) return 'fullscreen';
+  if (mode === 'create') return 'compact';
+  if (selectedListStatus === 'documents') return 'fullscreen';
+
+  return normalizeTaskDialogPresentation(defaultPresentation);
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/components/compact-task-create-popover.test.tsx

@@ -178,6 +178,63 @@ describe('CompactTaskCreatePopover', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('renders compact description preview without affecting panel layout', () => {
+    const onDescriptionPreviewClick = vi.fn();
+
+    render(
+      <Dialog open={true}>
+        <CompactTaskCreatePopover
+          title="Edit task"
+          titleInput={<input aria-label="Task title" defaultValue="Existing" />}
+          propertyControls={
+            <button type="button" aria-label="List: Inbox">
+              List
+            </button>
+          }
+          descriptionPreview="Confirm the plan and publish the final notes."
+          descriptionPreviewLabel="Open full task"
+          onDescriptionPreviewClick={onDescriptionPreviewClick}
+          onClose={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </Dialog>
+    );
+
+    const preview = screen.getByTestId('compact-task-description-preview');
+
+    expect(preview).toHaveTextContent(
+      'Confirm the plan and publish the final notes.'
+    );
+    expect(preview).toHaveAttribute('aria-label', 'Open full task');
+    expect(preview).toHaveClass('absolute', 'top-full');
+
+    fireEvent.click(preview);
+
+    expect(onDescriptionPreviewClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('omits compact description preview when the caller does not provide one', () => {
+    render(
+      <Dialog open={true}>
+        <CompactTaskCreatePopover
+          title="Create task"
+          titleInput={<input aria-label="Task title" defaultValue="New" />}
+          propertyControls={
+            <button type="button" aria-label="List: Inbox">
+              List
+            </button>
+          }
+          onClose={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </Dialog>
+    );
+
+    expect(
+      screen.queryByTestId('compact-task-description-preview')
+    ).not.toBeInTheDocument();
+  });
+
   it('renders compact edit actions when provided', () => {
     const onDelete = vi.fn();
     const onDone = vi.fn();

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

@@ -25,6 +25,8 @@ interface CompactTaskDialogPanelProps {
   iconRingClass?: string;
   titleInput: ReactNode;
   showHeaderTitle?: boolean;
+  descriptionPreview?: string | null;
+  descriptionPreviewLabel?: string;
   taskStatus?: ReactNode;
   propertyControls: ReactNode;
   editActions?: ReactNode;
@@ -39,6 +41,7 @@ interface CompactTaskDialogPanelProps {
   onCreateMultipleChange?: (value: boolean) => void;
   onClose: () => void;
   onFullscreen: () => void;
+  onDescriptionPreviewClick?: () => void;
   onSave?: () => void;
 }
 
@@ -84,6 +87,8 @@ export function CompactTaskDialogPanel({
   iconRingClass = 'ring-dynamic-orange/20',
   titleInput,
   showHeaderTitle = true,
+  descriptionPreview,
+  descriptionPreviewLabel,
   taskStatus,
   propertyControls,
   editActions,
@@ -98,6 +103,7 @@ export function CompactTaskDialogPanel({
   onCreateMultipleChange,
   onClose,
   onFullscreen,
+  onDescriptionPreviewClick,
   onSave,
 }: CompactTaskDialogPanelProps) {
   const t = useTranslations();
@@ -114,127 +120,146 @@ export function CompactTaskDialogPanel({
   const hasHeaderTitle = showHeaderTitle;
 
   return (
-    <div
-      data-testid="compact-task-dialog-panel"
-      className="flex max-h-[calc(100vh-2rem)] min-h-0 flex-col overflow-hidden rounded-lg bg-background"
-    >
+    <div className="relative">
       <div
-        className={cn(
-          'flex items-start gap-3 border-b px-4 py-3',
-          hasHeaderTitle ? 'justify-between' : 'justify-end'
-        )}
+        data-testid="compact-task-dialog-panel"
+        className="flex max-h-[calc(100vh-2rem)] min-h-0 flex-col overflow-hidden rounded-lg bg-background"
       >
-        {hasHeaderTitle ? (
-          <div className="flex min-w-0 items-start gap-2.5">
-            <div
-              className={cn(
-                'mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ring-1',
-                iconBgClass,
-                iconRingClass
-              )}
-            >
-              {icon ?? <ListTodo className="h-4 w-4 text-dynamic-orange" />}
-            </div>
-            <div className="min-w-0 space-y-0.5">
-              <DialogTitle className="truncate font-semibold text-base">
-                {title}
-              </DialogTitle>
-              {description && (
-                <DialogDescription className="truncate text-muted-foreground text-xs">
-                  {description}
-                </DialogDescription>
-              )}
+        <div
+          className={cn(
+            'flex items-start gap-3 border-b px-4 py-3',
+            hasHeaderTitle ? 'justify-between' : 'justify-end'
+          )}
+        >
+          {hasHeaderTitle ? (
+            <div className="flex min-w-0 items-start gap-2.5">
+              <div
+                className={cn(
+                  'mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ring-1',
+                  iconBgClass,
+                  iconRingClass
+                )}
+              >
+                {icon ?? <ListTodo className="h-4 w-4 text-dynamic-orange" />}
+              </div>
+              <div className="min-w-0 space-y-0.5">
+                <DialogTitle className="truncate font-semibold text-base">
+                  {title}
+                </DialogTitle>
+                {description && (
+                  <DialogDescription className="truncate text-muted-foreground text-xs">
+                    {description}
+                  </DialogDescription>
+                )}
+              </div>
             </div>
+          ) : (
+            <DialogTitle className="sr-only">{title}</DialogTitle>
+          )}
+          <div className="flex shrink-0 items-center gap-1">
+            {smartAction}
+            {editActions}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  aria-label={t('ws-task-boards.dialog.open_fullscreen')}
+                  className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                  onClick={onFullscreen}
+                >
+                  <Maximize2 className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                {t('ws-task-boards.dialog.open_fullscreen')}
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  aria-label={t('common.close')}
+                  className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                  onClick={onClose}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">{t('common.close')}</TooltipContent>
+            </Tooltip>
           </div>
-        ) : (
-          <DialogTitle className="sr-only">{title}</DialogTitle>
-        )}
-        <div className="flex shrink-0 items-center gap-1">
-          {smartAction}
-          {editActions}
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                aria-label={t('ws-task-boards.dialog.open_fullscreen')}
-                className="h-8 w-8 text-muted-foreground hover:text-foreground"
-                onClick={onFullscreen}
-              >
-                <Maximize2 className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">
-              {t('ws-task-boards.dialog.open_fullscreen')}
-            </TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                aria-label={t('common.close')}
-                className="h-8 w-8 text-muted-foreground hover:text-foreground"
-                onClick={onClose}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">{t('common.close')}</TooltipContent>
-          </Tooltip>
         </div>
-      </div>
 
-      <div className="min-h-0 space-y-3 overflow-y-auto px-4 py-3">
-        {titleInput}
-        {taskStatus}
-        <div className="flex flex-wrap items-center gap-1.5">
-          {propertyControls}
+        <div className="min-h-0 space-y-3 overflow-y-auto px-4 py-3">
+          {titleInput}
+          {taskStatus}
+          <div className="flex flex-wrap items-center gap-1.5">
+            {propertyControls}
+          </div>
+          {smartPanel}
         </div>
-        {smartPanel}
-      </div>
 
-      {hasCreateActions && (
-        <div className="flex items-center justify-between gap-2 border-t bg-muted/20 px-4 py-3">
-          <div className="flex items-center gap-1">
-            <CompactIconButton
-              active={!!saveAsDraft}
-              label={t('task-drafts.save_as_draft')}
-              onClick={() => onSaveAsDraftChange?.(!saveAsDraft)}
-            >
-              <FileEdit className="h-4 w-4" />
-            </CompactIconButton>
-            <CompactIconButton
-              active={!!createMultiple}
-              label={t('ws-task-boards.dialog.create_multiple')}
-              onClick={() => onCreateMultipleChange?.(!createMultiple)}
+        {hasCreateActions && (
+          <div className="flex items-center justify-between gap-2 border-t bg-muted/20 px-4 py-3">
+            <div className="flex items-center gap-1">
+              <CompactIconButton
+                active={!!saveAsDraft}
+                label={t('task-drafts.save_as_draft')}
+                onClick={() => onSaveAsDraftChange?.(!saveAsDraft)}
+              >
+                <FileEdit className="h-4 w-4" />
+              </CompactIconButton>
+              <CompactIconButton
+                active={!!createMultiple}
+                label={t('ws-task-boards.dialog.create_multiple')}
+                onClick={() => onCreateMultipleChange?.(!createMultiple)}
+              >
+                <Copy className="h-4 w-4" />
+              </CompactIconButton>
+              <QuickSettingsPopover isPersonalWorkspace={isPersonalWorkspace} />
+            </div>
+            <Button
+              type="button"
+              size="sm"
+              disabled={!canSave}
+              onClick={() => onSave?.()}
+              className="min-w-28"
             >
-              <Copy className="h-4 w-4" />
-            </CompactIconButton>
-            <QuickSettingsPopover isPersonalWorkspace={isPersonalWorkspace} />
+              {isLoading ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  {t('ws-task-boards.dialog.saving')}
+                </>
+              ) : (
+                <>
+                  <Check className="h-4 w-4" />
+                  {saveLabel}
+                </>
+              )}
+            </Button>
           </div>
-          <Button
-            type="button"
-            size="sm"
-            disabled={!canSave}
-            onClick={() => onSave?.()}
-            className="min-w-28"
-          >
-            {isLoading ? (
-              <>
-                <Loader2 className="h-4 w-4 animate-spin" />
-                {t('ws-task-boards.dialog.saving')}
-              </>
-            ) : (
-              <>
-                <Check className="h-4 w-4" />
-                {saveLabel}
-              </>
-            )}
-          </Button>
-        </div>
+        )}
+      </div>
+
+      {descriptionPreview && onDescriptionPreviewClick && (
+        <button
+          type="button"
+          data-testid="compact-task-description-preview"
+          aria-label={
+            descriptionPreviewLabel ??
+            t('ws-task-boards.dialog.open_fullscreen')
+          }
+          className="absolute top-full left-1/2 mt-2 w-full max-w-[30rem] -translate-x-1/2 rounded-lg border bg-background/95 px-4 py-3 text-left opacity-70 shadow-xl ring-1 ring-border/60 backdrop-blur transition hover:bg-muted/70 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onClick={onDescriptionPreviewClick}
+        >
+          <span className="line-clamp-3 whitespace-pre-line text-muted-foreground text-sm leading-relaxed">
+            {descriptionPreview}
+          </span>
+        </button>
       )}
     </div>
   );

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

@@ -4,6 +4,7 @@ import type { QueryClient } from '@tanstack/react-query';
 import type { Editor, JSONContent } from '@tiptap/react';
 import { Loader2 } from '@tuturuuu/icons';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { getBoardRealtimeChannelName } from '@tuturuuu/ui/hooks/useBoardRealtime.types';
 import { toast } from '@tuturuuu/ui/sonner';
 import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
@@ -352,8 +353,9 @@ export function TaskDescriptionEditor({
 
         {showCollaborationCursors && taskId && (
           <CursorOverlayMultiWrapper
-            channelName={`task-cursor-${taskId}`}
+            channelName={getBoardRealtimeChannelName(boardId)}
             containerRef={richTextEditorRef}
+            cursorScope={{ taskId, type: 'task-description' }}
           />
         )}
 

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

@@ -0,0 +1,171 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const internalApiMocks = vi.hoisted(() => ({
+  abortWorkspaceTaskDescriptionChunks: vi.fn(),
+  appendWorkspaceTaskDescriptionChunk: vi.fn(),
+  beginWorkspaceTaskDescriptionChunks: vi.fn(),
+  commitWorkspaceTaskDescriptionChunks: vi.fn(),
+  createWorkspaceTaskProject: vi.fn(),
+  getWorkspaceTask: vi.fn(),
+  getWorkspaceTaskDescription: vi.fn(),
+  updateWorkspaceTask: vi.fn(),
+  updateWorkspaceTaskDescription: vi.fn(),
+}));
+
+vi.mock('@tuturuuu/internal-api/tasks', () => internalApiMocks);
+
+import {
+  shouldChunkTaskDescriptionPayload,
+  updateWorkspaceTaskDescription,
+} from './task-api';
+
+describe('task-api description persistence', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    internalApiMocks.abortWorkspaceTaskDescriptionChunks.mockResolvedValue({
+      success: true,
+    });
+    internalApiMocks.appendWorkspaceTaskDescriptionChunk.mockResolvedValue({
+      success: true,
+    });
+    internalApiMocks.beginWorkspaceTaskDescriptionChunks.mockResolvedValue({
+      session_id: 'chunk-session-1',
+    });
+    internalApiMocks.commitWorkspaceTaskDescriptionChunks.mockResolvedValue({
+      description: 'persisted',
+      description_yjs_state: [1, 2, 3],
+    });
+    internalApiMocks.updateWorkspaceTaskDescription.mockResolvedValue({
+      description: 'small',
+      description_yjs_state: [1, 2, 3],
+    });
+  });
+
+  it('uses the direct description update for small payloads', async () => {
+    const payload = {
+      description: JSON.stringify({
+        type: 'doc',
+        content: [{ type: 'paragraph', content: [{ text: 'Small' }] }],
+      }),
+      description_yjs_state: [1, 2, 3],
+    };
+
+    await expect(
+      updateWorkspaceTaskDescription('ws-1', 'task-1', payload)
+    ).resolves.toEqual({
+      description: 'small',
+      description_yjs_state: [1, 2, 3],
+    });
+
+    expect(
+      internalApiMocks.updateWorkspaceTaskDescription
+    ).toHaveBeenCalledWith('ws-1', 'task-1', payload);
+    expect(
+      internalApiMocks.beginWorkspaceTaskDescriptionChunks
+    ).not.toHaveBeenCalled();
+  });
+
+  it('uploads large description updates through ordered chunks', async () => {
+    const yjsState = Array.from({ length: 220_000 }, (_, index) => index % 256);
+    const payload = {
+      description: JSON.stringify({
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [{ type: 'text', text: 'Large paste' }],
+          },
+        ],
+      }),
+      description_yjs_state: yjsState,
+    };
+
+    expect(shouldChunkTaskDescriptionPayload(payload)).toBe(true);
+
+    await updateWorkspaceTaskDescription('ws-1', 'task-1', payload);
+
+    expect(
+      internalApiMocks.updateWorkspaceTaskDescription
+    ).not.toHaveBeenCalled();
+    expect(
+      internalApiMocks.beginWorkspaceTaskDescriptionChunks
+    ).toHaveBeenCalledWith(
+      'ws-1',
+      'task-1',
+      expect.objectContaining({
+        description: expect.objectContaining({
+          chunk_count: 1,
+        }),
+        description_yjs_state: expect.objectContaining({
+          chunk_count: expect.any(Number),
+        }),
+      })
+    );
+
+    const appendCalls =
+      internalApiMocks.appendWorkspaceTaskDescriptionChunk.mock.calls;
+    expect(appendCalls.length).toBeGreaterThan(2);
+    expect(appendCalls[0]).toEqual([
+      'ws-1',
+      'task-1',
+      expect.objectContaining({
+        chunk_index: 0,
+        field: 'description',
+        session_id: 'chunk-session-1',
+      }),
+    ]);
+    expect(
+      appendCalls
+        .filter((call) => call[2].field === 'description_yjs_state')
+        .map((call) => call[2].chunk_index)
+    ).toEqual(
+      appendCalls
+        .filter((call) => call[2].field === 'description_yjs_state')
+        .map((_, index) => index)
+    );
+    expect(
+      internalApiMocks.commitWorkspaceTaskDescriptionChunks
+    ).toHaveBeenCalledWith('ws-1', 'task-1', 'chunk-session-1');
+  });
+
+  it('falls back to chunked upload when a direct save hits the proxy body limit', async () => {
+    internalApiMocks.updateWorkspaceTaskDescription.mockRejectedValueOnce({
+      status: 413,
+    });
+
+    await updateWorkspaceTaskDescription('ws-1', 'task-1', {
+      description: 'small enough to try directly',
+      description_yjs_state: [1, 2, 3],
+    });
+
+    expect(
+      internalApiMocks.beginWorkspaceTaskDescriptionChunks
+    ).toHaveBeenCalled();
+    expect(
+      internalApiMocks.commitWorkspaceTaskDescriptionChunks
+    ).toHaveBeenCalled();
+  });
+
+  it('aborts the chunk session when an append fails', async () => {
+    internalApiMocks.appendWorkspaceTaskDescriptionChunk.mockRejectedValueOnce(
+      new Error('network down')
+    );
+
+    await expect(
+      updateWorkspaceTaskDescription('ws-1', 'task-1', {
+        description: 'x'.repeat(10),
+        description_yjs_state: Array.from(
+          { length: 220_000 },
+          (_, index) => index % 256
+        ),
+      })
+    ).rejects.toThrow('network down');
+
+    expect(
+      internalApiMocks.abortWorkspaceTaskDescriptionChunks
+    ).toHaveBeenCalledWith('ws-1', 'task-1', 'chunk-session-1');
+    expect(
+      internalApiMocks.commitWorkspaceTaskDescriptionChunks
+    ).not.toHaveBeenCalled();
+  });
+});