@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/tu-do/shared/special-task-list-pins.ts

@@ -0,0 +1,51 @@
+export type SpecialTaskListPin =
+  | 'closed_tasks'
+  | 'external_tasks'
+  | 'overdue'
+  | 'upcoming';
+
+export const SPECIAL_TASK_LIST_PIN_VALUES: readonly SpecialTaskListPin[] = [
+  'overdue',
+  'upcoming',
+  'external_tasks',
+  'closed_tasks',
+];
+
+const SPECIAL_TASK_LIST_PIN_SET = new Set<string>(SPECIAL_TASK_LIST_PIN_VALUES);
+
+export type SpecialTaskListPinState = Partial<
+  Record<SpecialTaskListPin, boolean>
+>;
+
+export function parseSpecialTaskListPins(
+  raw: string | null | undefined
+): SpecialTaskListPinState {
+  if (!raw) return {};
+
+  const parseValues = (value: unknown) => {
+    if (!Array.isArray(value)) return [];
+    return value.filter((item): item is SpecialTaskListPin => {
+      return typeof item === 'string' && SPECIAL_TASK_LIST_PIN_SET.has(item);
+    });
+  };
+
+  let values: SpecialTaskListPin[] = [];
+
+  try {
+    values = parseValues(JSON.parse(raw));
+  } catch {
+    values = parseValues(raw.split(',').map((item) => item.trim()));
+  }
+
+  return values.reduce<SpecialTaskListPinState>((acc, pin) => {
+    acc[pin] = true;
+    return acc;
+  }, {});
+}
+
+export function serializeSpecialTaskListPins(
+  state: SpecialTaskListPinState
+): string | null {
+  const pins = SPECIAL_TASK_LIST_PIN_VALUES.filter((pin) => state[pin]);
+  return pins.length > 0 ? JSON.stringify(pins) : null;
+}

package/src/components/ui/tu-do/shared/task-board-loading-state.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import { KanbanSkeleton } from '../boards/boardId/kanban/rendering/kanban-skeleton';
+
+export function TaskBoardLoadingState({
+  className,
+  root = false,
+}: {
+  className?: string;
+  root?: boolean;
+}) {
+  return (
+    <div
+      aria-busy="true"
+      className={cn(
+        'w-full overflow-hidden bg-transparent',
+        root
+          ? '-m-4 h-[calc(100dvh+2rem)] min-h-[calc(32rem+2rem)]'
+          : 'h-[calc(100dvh-1rem)] min-h-[32rem]',
+        className
+      )}
+      data-testid="task-board-loading-state"
+    >
+      <KanbanSkeleton />
+    </div>
+  );
+}

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/field-diff-viewer.tsx

@@ -373,8 +373,9 @@ function DescriptionDiff({
     </>
   );
 
-  // If both exist and there are text changes, show the full diff viewer
-  if (hasSnapshot && hasCurrent && hasTextChanges) {
+  // Show the full viewer whenever either side has content so users can inspect
+  // content-only, empty/content, and structural editor changes.
+  if (hasSnapshot || hasCurrent || hasTextChanges) {
     return (
       <div className="text-sm">
         <div className="flex items-center gap-2">

package/src/components/ui/tu-do/shared/task-edit-dialog/selective-revert-panel.test.tsx

@@ -0,0 +1,91 @@
+import '@testing-library/jest-dom/vitest';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { SelectiveRevertPanel } from './selective-revert-panel';
+
+vi.mock('./description-diff-viewer', () => ({
+  DescriptionDiffViewer: () => (
+    <button type="button">view-description-diff</button>
+  ),
+}));
+
+const t = (key: string, options?: { defaultValue?: string }) => {
+  const messages: Record<string, string> = {
+    changed: 'Changed',
+    'field.description': 'Description',
+    'field.name': 'Name',
+    'field.priority': 'Priority',
+    unchanged_fields: 'Unchanged fields',
+  };
+
+  return messages[key] ?? options?.defaultValue ?? key;
+};
+
+const snapshot = {
+  assignees: [],
+  completed: false,
+  description: {
+    content: [
+      {
+        content: [{ text: 'Previous description', type: 'text' }],
+        type: 'paragraph',
+      },
+    ],
+    type: 'doc',
+  },
+  end_date: null,
+  estimation_points: null,
+  id: 'task-1',
+  labels: [],
+  list_id: 'list-1',
+  list_name: 'Review',
+  name: 'Previous task name',
+  priority: 'normal' as const,
+  projects: [],
+  start_date: null,
+};
+
+const currentTask = {
+  ...snapshot,
+  description: {
+    content: [
+      {
+        content: [{ text: 'Current description', type: 'text' }],
+        type: 'paragraph',
+      },
+    ],
+    type: 'doc',
+  },
+  list_name: 'Review',
+  name: 'Current task name',
+};
+
+describe('SelectiveRevertPanel', () => {
+  it('renders changed fields first and keeps unchanged fields collapsed', () => {
+    render(
+      <SelectiveRevertPanel
+        currentTask={currentTask}
+        isReverting={false}
+        onRevert={vi.fn()}
+        snapshot={snapshot}
+        t={t}
+      />
+    );
+
+    expect(screen.getByText('Core Fields')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('view-description-diff')).toBeInTheDocument();
+
+    const unchangedButton = screen.getByRole('button', {
+      name: /Unchanged fields/i,
+    });
+    expect(unchangedButton).toBeInTheDocument();
+    expect(screen.queryByText('Priority')).not.toBeInTheDocument();
+
+    fireEvent.click(unchangedButton);
+
+    expect(screen.getByText('Priority')).toBeInTheDocument();
+  });
+});