@tuturuuu/ui 0.5.0 → 0.6.0

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

@@ -3,6 +3,7 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { getCurrentUserProfile } from '@tuturuuu/internal-api';
 import { getWorkspaceTask } from '@tuturuuu/internal-api/tasks';
+import { getUserConfig } from '@tuturuuu/internal-api/users';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import { useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -12,6 +13,10 @@ import {
   WorkspacePresenceProvider,
 } from '../providers/workspace-presence-provider';
 import { dispatchRecentSidebarVisit } from './recent-sidebar-events';
+import {
+  normalizeTaskDialogPresentation,
+  TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID,
+} from './task-dialog-presentation';
 import { TaskEditDialog } from './task-edit-dialog';
 import {
   dispatchTaskOpenResult,
@@ -146,19 +151,23 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
   // Read draft mode preference from user config (same query key as useUserBooleanConfig)
   const { data: draftModeRaw } = useQuery({
     queryKey: ['user-config', 'TASK_DRAFT_MODE_ENABLED'],
-    queryFn: async () => {
-      const res = await fetch(
-        '/api/v1/users/me/configs/TASK_DRAFT_MODE_ENABLED',
-        { cache: 'no-store' }
-      );
-      if (!res.ok) return 'false';
-      const data = await res.json();
-      return (data.value as string) ?? 'false';
-    },
+    queryFn: async () =>
+      (await getUserConfig('TASK_DRAFT_MODE_ENABLED')).value ?? 'false',
     staleTime: 5 * 60 * 1000,
   });
   const draftModeEnabled = draftModeRaw === 'true';
 
+  const { data: defaultPresentationRaw } = useQuery({
+    queryKey: ['user-config', TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID],
+    queryFn: async () =>
+      (await getUserConfig(TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID)).value ??
+      'compact',
+    staleTime: 5 * 60 * 1000,
+  });
+  const defaultPresentation = normalizeTaskDialogPresentation(
+    defaultPresentationRaw
+  );
+
   const handleClose = () => {
     triggerClose();
   };
@@ -226,30 +235,12 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
 
   const openTaskFromCurrentWorkspace = useCallback(
     async (taskId: string) => {
-      try {
-        const { task } = await getWorkspaceTask(wsId, taskId, {
-          fetch: (input, init) =>
-            fetch(new URL(String(input), window.location.origin).toString(), {
-              ...init,
-              cache: 'no-store',
-            }),
-        });
-
-        const boardId = task.board_id;
-        if (!boardId) {
-          return false;
-        }
-
-        openTask(task as Task, boardId, undefined, false, {
-          taskWsId: wsId,
-          taskWorkspacePersonal: isPersonalWorkspace,
-        });
-        return true;
-      } catch {
-        return false;
-      }
+      return openTaskById(taskId, {
+        taskWsId: wsId,
+        taskWorkspacePersonal: isPersonalWorkspace,
+      });
     },
-    [isPersonalWorkspace, openTask, wsId]
+    [isPersonalWorkspace, openTaskById, wsId]
   );
 
   useEffect(() => {
@@ -269,40 +260,12 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       };
 
       void (async () => {
-        if (requestedWsId) {
-          try {
-            const { task } = await getWorkspaceTask(requestedWsId, taskId, {
-              fetch: (input, init) =>
-                fetch(
-                  new URL(String(input), window.location.origin).toString(),
-                  {
-                    ...init,
-                    cache: 'no-store',
-                  }
-                ),
-            });
-
-            const taskWithList = task as {
-              board_id?: string | null;
-              list?: {
-                board_id?: string | null;
-              } | null;
-            };
-            const boardId =
-              taskWithList.board_id || taskWithList.list?.board_id;
-            if (boardId) {
-              openTask(task as Task, boardId, undefined, false, {
-                taskWsId: requestedWsId,
-              });
-              emitOpenResult(true);
-              return;
-            }
-          } catch {
-            // Fall through to the generic current-user lookup below.
-          }
-        }
-
-        const opened = await openTaskById(taskId);
+        const opened = await openTaskById(taskId, {
+          taskWsId: requestedWsId,
+          taskWorkspacePersonal: requestedWsId
+            ? undefined
+            : isPersonalWorkspace,
+        });
         emitOpenResult(opened);
       })();
     };
@@ -318,7 +281,7 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
         handleTaskOpenRequest as EventListener
       );
     };
-  }, [openTaskById, openTask]);
+  }, [isPersonalWorkspace, openTaskById]);
 
   useEffect(() => {
     const canonicalTaskId = searchParams.get('task');
@@ -348,7 +311,10 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       return;
     }
 
-    void openTaskById(legacyTaskId);
+    void openTaskById(legacyTaskId, {
+      taskWsId: wsId,
+      taskWorkspacePersonal: isPersonalWorkspace,
+    });
     const nextSearchParams = new URLSearchParams(searchParams.toString());
     nextSearchParams.delete('openTaskId');
 
@@ -358,7 +324,7 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       : window.location.pathname;
 
     window.history.replaceState(window.history.state, '', nextUrl);
-  }, [openTaskById, searchParams]);
+  }, [isPersonalWorkspace, openTaskById, searchParams, wsId]);
 
   // Open subtask creation dialog for the current task
   const handleAddSubtask = useCallback(() => {
@@ -411,6 +377,31 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
   const handleAddBlockedByTask = () => handleAddRelationship('blocked-by');
   const handleAddRelatedTask = () => handleAddRelationship('related');
 
+  const handleRetryTaskLoad = useCallback(() => {
+    if (!state.task?.id) return;
+
+    void openTaskById(state.task.id, {
+      initialTask: state.task,
+      boardId: state.boardId,
+      availableLists: state.availableLists,
+      fakeTaskUrl: state.fakeTaskUrl,
+      taskWsId: state.taskWsId,
+      taskWorkspacePersonal: state.taskWorkspacePersonal,
+      taskWorkspaceTier: state.taskWorkspaceTier,
+      initialSharedContext: state.initialSharedContext,
+    });
+  }, [
+    openTaskById,
+    state.initialSharedContext,
+    state.availableLists,
+    state.boardId,
+    state.fakeTaskUrl,
+    state.task,
+    state.taskWorkspacePersonal,
+    state.taskWorkspaceTier,
+    state.taskWsId,
+  ]);
+
   // Track presence location when the dialog is open in edit mode.
   // On kanban boards, BoardUserPresenceAvatarsComponent also calls updateLocation
   // with the same args — this is idempotent (same location = no-op).
@@ -419,7 +410,14 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
   const wsUpdateLocation = wsPresence?.updateLocation;
 
   useEffect(() => {
-    if (!wsUpdateLocation || !state.isOpen || state.mode === 'create') return;
+    if (
+      !wsUpdateLocation ||
+      !state.isOpen ||
+      state.mode === 'create' ||
+      state.isHydratingTask ||
+      state.taskLoadError
+    )
+      return;
     const taskId = state.task?.id;
     const boardId = state.boardId;
     if (!taskId || !boardId) return;
@@ -433,6 +431,8 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
     wsUpdateLocation,
     state.isOpen,
     state.mode,
+    state.isHydratingTask,
+    state.taskLoadError,
     state.task?.id,
     state.boardId,
   ]);
@@ -441,7 +441,9 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
     if (
       typeof window === 'undefined' ||
       !state.isOpen ||
-      state.mode === 'create'
+      state.mode === 'create' ||
+      state.isHydratingTask ||
+      state.taskLoadError
     ) {
       return;
     }
@@ -493,19 +495,24 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
   }, [
     state.boardId,
     state.isOpen,
+    state.isHydratingTask,
     state.mode,
     state.task,
     state.taskWsId,
     state.taskWorkspacePersonal,
+    state.taskLoadError,
     isPersonalWorkspace,
     wsId,
   ]);
 
-  // Determine if the task needs its own presence provider (cross-workspace tasks)
+  // Determine if the task needs its own presence provider (cross-workspace tasks).
+  // Keep the provider shell mounted from the initial snapshot when taskWsId is
+  // already known, otherwise hydration can wrap the open dialog in a new
+  // provider and Radix replays the compact dialog entrance animation.
   const needsOwnProvider =
-    state.realtimeEnabled &&
-    state.taskWsId &&
-    (!wsPresence?.realtimeEnabled || state.taskWsId !== wsId);
+    state.taskWsId && (!wsPresence?.realtimeEnabled || state.taskWsId !== wsId);
+  const ownProviderEnabled =
+    !!state.realtimeEnabled && !state.taskWorkspacePersonal;
 
   if (!state.isOpen || !state.task) {
     return null;
@@ -519,16 +526,25 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       boardId={state.boardId || ''}
       isOpen={state.isOpen}
       availableLists={state.availableLists}
+      sharedContext={
+        state.isHydratingTask || state.taskLoadError
+          ? state.initialSharedContext
+          : undefined
+      }
       filters={state.filters}
       mode={state.mode}
       collaborationMode={state.collaborationMode}
       realtimeEnabled={state.realtimeEnabled}
+      isHydratingTask={state.isHydratingTask}
+      taskLoadError={state.taskLoadError}
+      taskHydrationVersion={state.taskHydrationVersion}
       isPersonalWorkspace={isPersonalWorkspace}
       parentTaskId={state.parentTaskId}
       parentTaskName={state.parentTaskName}
       pendingRelationship={state.pendingRelationship}
       currentUser={currentUser || undefined}
       draftModeEnabled={draftModeEnabled}
+      defaultPresentation={defaultPresentation}
       draftId={state.draftId}
       onClose={handleClose}
       onUpdate={triggerUpdate}
@@ -538,6 +554,7 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       onAddBlockingTask={handleAddBlockingTask}
       onAddBlockedByTask={handleAddBlockedByTask}
       onAddRelatedTask={handleAddRelatedTask}
+      onRetryTaskLoad={handleRetryTaskLoad}
     />
   );
 
@@ -546,7 +563,7 @@ export function TaskDialogManager({ wsId }: { wsId: string }) {
       <WorkspacePresenceProvider
         wsId={state.taskWsId}
         tier={state.taskWorkspaceTier ?? null}
-        enabled={!state.taskWorkspacePersonal}
+        enabled={ownProviderEnabled}
       >
         {dialog}
       </WorkspacePresenceProvider>

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

@@ -0,0 +1,11 @@
+export const TASK_DIALOG_DEFAULT_PRESENTATION_CONFIG_ID =
+  'TASK_DIALOG_DEFAULT_PRESENTATION';
+
+export type TaskDialogPresentation = 'compact' | 'fullscreen';
+
+export function normalizeTaskDialogPresentation(
+  value: unknown,
+  fallback: TaskDialogPresentation = 'compact'
+): TaskDialogPresentation {
+  return value === 'fullscreen' || value === 'compact' ? value : fallback;
+}

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

@@ -64,7 +64,7 @@ describe('CompactTaskCreatePopover', () => {
   it('renders compact create content with accessible icon actions', () => {
     renderCompactTaskCreatePopover();
 
-    expect(screen.getByTestId('compact-task-create-popover')).toBeTruthy();
+    expect(screen.getByTestId('compact-task-dialog-panel')).toBeTruthy();
     expect(screen.getByText('Create task')).toBeTruthy();
     expect(screen.getByLabelText('Task title')).toHaveProperty(
       'value',
@@ -138,4 +138,131 @@ describe('CompactTaskCreatePopover', () => {
       screen.getAllByRole('button', { name: 'task-drafts.save_as_draft' })
     ).toHaveLength(2);
   });
+
+  it('renders compact edit content without create-only footer actions', () => {
+    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>
+          }
+          smartAction={
+            <button type="button" aria-label="Smart action">
+              Smart
+            </button>
+          }
+          onClose={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </Dialog>
+    );
+
+    expect(screen.getByText('Edit task')).toBeTruthy();
+    expect(screen.getByLabelText('Task title')).toHaveProperty(
+      'value',
+      'Existing'
+    );
+    expect(screen.getByLabelText('List: Inbox')).toBeTruthy();
+    expect(screen.getByLabelText('Smart action')).toBeTruthy();
+    expect(
+      screen.queryByLabelText('task-drafts.save_as_draft')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', {
+        name: 'ws-task-boards.dialog.create_task',
+      })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders compact edit actions when provided', () => {
+    const onDelete = vi.fn();
+    const onDone = vi.fn();
+    const onClosed = 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>
+          }
+          editActions={
+            <>
+              <button
+                type="button"
+                aria-label="common.mark_as_done"
+                onClick={onDone}
+              >
+                Done
+              </button>
+              <button
+                type="button"
+                aria-label="common.archive"
+                onClick={onClosed}
+              >
+                Archive
+              </button>
+              <button
+                type="button"
+                aria-label="common.delete_task"
+                onClick={onDelete}
+              >
+                Delete
+              </button>
+            </>
+          }
+          onClose={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </Dialog>
+    );
+
+    fireEvent.click(screen.getByLabelText('common.mark_as_done'));
+    fireEvent.click(screen.getByLabelText('common.archive'));
+    fireEvent.click(screen.getByLabelText('common.delete_task'));
+
+    expect(
+      screen.getByLabelText('common.delete_task').closest('.border-b')
+    ).toBeTruthy();
+    expect(
+      screen.getByLabelText('common.delete_task').closest('.border-t')
+    ).toBeNull();
+    expect(onDone).toHaveBeenCalledTimes(1);
+    expect(onClosed).toHaveBeenCalledTimes(1);
+    expect(onDelete).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps the compact edit title accessible but not visibly rendered', () => {
+    render(
+      <Dialog open={true}>
+        <CompactTaskCreatePopover
+          title="Edit task"
+          showHeaderTitle={false}
+          titleInput={<input aria-label="Task title" defaultValue="Existing" />}
+          propertyControls={
+            <button type="button" aria-label="List: Inbox">
+              List
+            </button>
+          }
+          editActions={
+            <button type="button" aria-label="common.delete_task">
+              Delete
+            </button>
+          }
+          onClose={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </Dialog>
+    );
+
+    expect(screen.getByText('Edit task')).toHaveClass('sr-only');
+    expect(screen.getByLabelText('common.delete_task')).toBeTruthy();
+  });
 });

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

@@ -17,24 +17,29 @@ import { useTranslations } from 'next-intl';
 import type { ReactNode } from 'react';
 import { QuickSettingsPopover } from './quick-settings-popover';
 
-interface CompactTaskCreatePopoverProps {
+interface CompactTaskDialogPanelProps {
   title: string;
   description?: ReactNode;
   icon?: ReactNode;
   iconBgClass?: string;
   iconRingClass?: string;
   titleInput: ReactNode;
+  showHeaderTitle?: boolean;
+  taskStatus?: ReactNode;
   propertyControls: ReactNode;
-  saveAsDraft: boolean;
-  createMultiple: boolean;
-  canSave: boolean;
-  isLoading: boolean;
+  editActions?: ReactNode;
+  smartAction?: ReactNode;
+  smartPanel?: ReactNode;
+  saveAsDraft?: boolean;
+  createMultiple?: boolean;
+  canSave?: boolean;
+  isLoading?: boolean;
   isPersonalWorkspace?: boolean;
-  onSaveAsDraftChange: (value: boolean) => void;
-  onCreateMultipleChange: (value: boolean) => void;
+  onSaveAsDraftChange?: (value: boolean) => void;
+  onCreateMultipleChange?: (value: boolean) => void;
   onClose: () => void;
   onFullscreen: () => void;
-  onSave: () => void;
+  onSave?: () => void;
 }
 
 function CompactIconButton({
@@ -71,58 +76,82 @@ function CompactIconButton({
   );
 }
 
-export function CompactTaskCreatePopover({
+export function CompactTaskDialogPanel({
   title,
   description,
   icon,
   iconBgClass = 'bg-dynamic-orange/10',
   iconRingClass = 'ring-dynamic-orange/20',
   titleInput,
+  showHeaderTitle = true,
+  taskStatus,
   propertyControls,
+  editActions,
+  smartAction,
+  smartPanel,
   saveAsDraft,
   createMultiple,
   canSave,
-  isLoading,
+  isLoading = false,
   isPersonalWorkspace,
   onSaveAsDraftChange,
   onCreateMultipleChange,
   onClose,
   onFullscreen,
   onSave,
-}: CompactTaskCreatePopoverProps) {
+}: CompactTaskDialogPanelProps) {
   const t = useTranslations();
+  const hasCreateActions =
+    typeof saveAsDraft === 'boolean' &&
+    typeof createMultiple === 'boolean' &&
+    typeof canSave === 'boolean' &&
+    !!onSave &&
+    !!onSaveAsDraftChange &&
+    !!onCreateMultipleChange;
   const saveLabel = saveAsDraft
     ? t('task-drafts.save_as_draft')
     : t('ws-task-boards.dialog.create_task');
+  const hasHeaderTitle = showHeaderTitle;
 
   return (
     <div
-      data-testid="compact-task-create-popover"
+      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="flex items-start justify-between gap-3 border-b px-4 py-3">
-        <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>
-        </div>
+        ) : (
+          <DialogTitle className="sr-only">{title}</DialogTitle>
+        )}
         <div className="flex shrink-0 items-center gap-1">
+          {smartAction}
+          {editActions}
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
@@ -160,49 +189,55 @@ export function CompactTaskCreatePopover({
 
       <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>
 
-      <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>
   );
 }
+
+export const CompactTaskCreatePopover = CompactTaskDialogPanel;