@tuturuuu/ui 0.7.0 → 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.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 } }
       );
     });