@tuturuuu/ui 0.5.0 → 0.6.0

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

@@ -1,18 +1,23 @@
 'use client';
 
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import type { Editor, JSONContent } from '@tiptap/react';
+import { Archive, CheckCircle2, Trash2 } from '@tuturuuu/icons';
 import {
   checkWorkspacePermission,
   createWorkspaceTask,
+  createWorkspaceTaskSuggestions,
   updateWorkspaceCalendarEvent,
   uploadWorkspaceTaskFile,
 } from '@tuturuuu/internal-api';
+import type { WorkspaceTaskSuggestionTask } from '@tuturuuu/internal-api/tasks';
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import { Button } from '@tuturuuu/ui/button';
 import { Dialog, DialogContent, DialogTitle } from '@tuturuuu/ui/dialog';
 import { useYjsCollaboration } from '@tuturuuu/ui/hooks/use-yjs-collaboration';
 import { toast } from '@tuturuuu/ui/sonner';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
 import { MAX_TASK_DESCRIPTION_LENGTH } from '@tuturuuu/utils/constants';
 import { convertListItemToTask } from '@tuturuuu/utils/editor';
 import {
@@ -40,8 +45,16 @@ import {
 import { DescriptionOverflowWarningDialog } from './description-overflow-warning-dialog';
 import { createInitialSuggestionState } from './mention-system/types';
 import { SyncWarningDialog } from './sync-warning-dialog';
-import { CompactTaskCreatePopover } from './task-edit-dialog/components/compact-task-create-popover';
+import {
+  normalizeTaskDialogPresentation,
+  type TaskDialogPresentation,
+} from './task-dialog-presentation';
+import { CompactTaskDialogPanel } from './task-edit-dialog/components/compact-task-create-popover';
 import { MobileFloatingSaveButton } from './task-edit-dialog/components/mobile-floating-save-button';
+import {
+  SmartTaskSuggestionsButton,
+  SmartTaskSuggestionsPanel,
+} from './task-edit-dialog/components/smart-task-suggestions-panel';
 import { TaskDescriptionEditor } from './task-edit-dialog/components/task-description-editor';
 import {
   getTaskDialogHeaderInfo,
@@ -91,6 +104,7 @@ import {
 import {
   broadcastTaskDescriptionUpsert,
   clearDraft,
+  getDescriptionContent,
   getDraftStorageKey,
   getTaskDescriptionPercentLeft,
   getTaskDescriptionStorageLength,
@@ -129,6 +143,9 @@ export interface TaskEditDialogProps {
   collaborationMode?: boolean;
   /** Whether realtime features (Yjs sync, presence avatars) are enabled - true for all tiers */
   realtimeEnabled?: boolean;
+  isHydratingTask?: boolean;
+  taskLoadError?: boolean;
+  taskHydrationVersion?: number;
   isPersonalWorkspace?: boolean;
   parentTaskId?: string;
   parentTaskName?: string;
@@ -138,6 +155,8 @@ export interface TaskEditDialogProps {
   sharedContext?: SharedTaskContext;
   /** Whether draft mode is enabled from user settings */
   draftModeEnabled?: boolean;
+  /** Preferred opening presentation for normal task dialogs */
+  defaultPresentation?: TaskDialogPresentation;
   /** When editing an existing draft, this is the draft ID */
   draftId?: string;
   onClose: () => void;
@@ -148,6 +167,7 @@ export interface TaskEditDialogProps {
   onAddBlockingTask?: () => void;
   onAddBlockedByTask?: () => void;
   onAddRelatedTask?: () => void;
+  onRetryTaskLoad?: () => void;
 }
 
 export function TaskEditDialog({
@@ -163,6 +183,9 @@ export function TaskEditDialog({
   mode = 'edit',
   collaborationMode = false,
   realtimeEnabled = false,
+  isHydratingTask = false,
+  taskLoadError = false,
+  taskHydrationVersion = 0,
   isPersonalWorkspace = false,
   parentTaskId,
   parentTaskName,
@@ -170,6 +193,7 @@ export function TaskEditDialog({
   currentUser: propsCurrentUser,
   sharedContext,
   draftModeEnabled = false,
+  defaultPresentation = 'compact',
   draftId,
   onClose,
   onUpdate,
@@ -179,6 +203,7 @@ export function TaskEditDialog({
   onAddBlockingTask,
   onAddBlockedByTask,
   onAddRelatedTask,
+  onRetryTaskLoad,
 }: TaskEditDialogProps) {
   const isCreateMode = mode === 'create';
   const effectiveTaskWsId = !isCreateMode ? (taskWsId ?? wsId) : wsId;
@@ -196,6 +221,12 @@ export function TaskEditDialog({
   // Disable editing if we are viewing via a shared link
   // User requested: always disable editing for shared tasks, regardless of permission
   const disabled = !!shareCode;
+  const taskControlsDisabled = disabled || isHydratingTask || taskLoadError;
+  const taskTitleDisabled = disabled || taskLoadError;
+  const effectiveRealtimeEnabled =
+    realtimeEnabled && !isHydratingTask && !taskLoadError;
+  const effectiveCollaborationMode =
+    collaborationMode && !isHydratingTask && !taskLoadError;
 
   // Keep this permission query disabled when `disabled` shared-link mode is active
   // (`enabled` becomes false) so `canManageTaskMedia` stays undefined while
@@ -217,7 +248,7 @@ export function TaskEditDialog({
         );
         return result.hasPermission;
       },
-      enabled: Boolean(effectiveTaskWsId) && !disabled,
+      enabled: Boolean(effectiveTaskWsId) && !taskControlsDisabled,
       staleTime: 5 * 60 * 1000,
     });
 
@@ -235,7 +266,7 @@ export function TaskEditDialog({
   });
 
   // Refs
-  const titleInputRef = useRef<HTMLInputElement>(null);
+  const titleInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
   const editorRef = useRef<HTMLDivElement>(null);
   const richTextEditorRef = useRef<HTMLDivElement>(null);
   const lastCursorPositionRef = useRef<number | null>(null);
@@ -245,6 +276,7 @@ export function TaskEditDialog({
   );
   const nameUpdateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pendingNameRef = useRef<string | null>(null);
+  const nameEditedDuringHydrationRef = useRef(false);
   const quickDueRef = useRef<(days: number | null) => void>(() => {});
   const updateEstimationRef = useRef<(points: number | null) => void>(() => {});
   const handleConvertToTaskRef = useRef<(() => Promise<void>) | null>(null);
@@ -256,6 +288,17 @@ export function TaskEditDialog({
     descriptionRef.current = formState.description;
   }, [formState.description]);
 
+  const setTaskName = useCallback(
+    (value: string) => {
+      if (isHydratingTask) {
+        nameEditedDuringHydrationRef.current = true;
+      }
+
+      formState.setName(value);
+    },
+    [formState.setName, isHydratingTask]
+  );
+
   // User state
   const [user, setUser] = useState<TaskDialogUserIdentity | null>(
     propsCurrentUser ? normalizeTaskDialogCurrentUser(propsCurrentUser) : null
@@ -386,7 +429,7 @@ export function TaskEditDialog({
     columnName: 'description_yjs_state',
     id: task?.id || '',
     user: yjsUser,
-    enabled: isOpen && !isCreateMode && realtimeEnabled && !!task?.id,
+    enabled: isOpen && !isCreateMode && effectiveRealtimeEnabled && !!task?.id,
     broadcastDebounceMs: workspaceTier && workspaceTier !== 'FREE' ? 0 : 200,
     saveDebounceMs: 5000,
     loadDocumentState: loadTaskDescriptionState,
@@ -396,7 +439,7 @@ export function TaskEditDialog({
   const [hasHydratedYjsState, setHasHydratedYjsState] = useState(false);
 
   useEffect(() => {
-    if (!isOpen || isCreateMode || !realtimeEnabled || !task?.id) {
+    if (!isOpen || isCreateMode || !effectiveRealtimeEnabled || !task?.id) {
       setHasHydratedYjsState(false);
       return;
     }
@@ -404,13 +447,13 @@ export function TaskEditDialog({
     if (synced) {
       setHasHydratedYjsState(true);
     }
-  }, [isOpen, isCreateMode, realtimeEnabled, task?.id, synced]);
+  }, [isOpen, isCreateMode, effectiveRealtimeEnabled, task?.id, synced]);
 
   const isYjsSyncing = useMemo(() => {
     return (
       isOpen &&
       !isCreateMode &&
-      realtimeEnabled &&
+      effectiveRealtimeEnabled &&
       !!task?.id &&
       !hasHydratedYjsState &&
       !synced
@@ -419,7 +462,7 @@ export function TaskEditDialog({
     hasHydratedYjsState,
     isOpen,
     isCreateMode,
-    realtimeEnabled,
+    effectiveRealtimeEnabled,
     task?.id,
     synced,
   ]);
@@ -509,7 +552,30 @@ export function TaskEditDialog({
     useState(false);
   const [showShareDialog, setShowShareDialog] = useState(false);
   const [saveAsDraft, setSaveAsDraft] = useState(draftModeEnabled);
-  const [isCreateFullscreen, setIsCreateFullscreen] = useState(false);
+  const normalizedDefaultPresentation = useMemo(
+    () => normalizeTaskDialogPresentation(defaultPresentation),
+    [defaultPresentation]
+  );
+  const [presentation, setPresentation] = useState<TaskDialogPresentation>(
+    normalizedDefaultPresentation
+  );
+  const [smartSuggestions, setSmartSuggestions] = useState<
+    WorkspaceTaskSuggestionTask[]
+  >([]);
+  const [selectedSmartSuggestionIds, setSelectedSmartSuggestionIds] = useState<
+    string[]
+  >([]);
+  const [smartSuggestionError, setSmartSuggestionError] = useState<
+    string | null
+  >(null);
+  const [smartCreateErrors, setSmartCreateErrors] = useState<
+    Record<string, string>
+  >({});
+  const [creatingSmartSuggestionIds, setCreatingSmartSuggestionIds] = useState<
+    string[]
+  >([]);
+  const [isCreatingSmartSuggestions, setIsCreatingSmartSuggestions] =
+    useState(false);
   const previousOpenRef = useRef(false);
   const [isTitleVisible, setIsTitleVisible] = useState(true);
   const [scrollContainer, setScrollContainer] = useState<HTMLDivElement | null>(
@@ -709,8 +775,8 @@ export function TaskEditDialog({
       selectedLabels: formState.selectedLabels,
       selectedAssignees: formState.selectedAssignees,
       isCreateMode,
-      isLoading,
-      collaborationMode,
+      isLoading: isLoading || taskControlsDisabled,
+      collaborationMode: effectiveCollaborationMode,
       draftId,
     });
 
@@ -733,7 +799,7 @@ export function TaskEditDialog({
     boardId,
     isCreateMode,
     isOpen,
-    realtimeEnabled,
+    realtimeEnabled: effectiveRealtimeEnabled,
     isPersonalWorkspace,
     name: formState.name,
     priority: formState.priority,
@@ -783,6 +849,41 @@ export function TaskEditDialog({
     onUpdate,
   });
 
+  const currentList = availableLists?.find(
+    (list) => list.id === formState.selectedListId
+  );
+  const doneList = availableLists?.find(
+    (list) => list.status === 'done' && !list.deleted
+  );
+  const closedList = availableLists?.find(
+    (list) => list.status === 'closed' && !list.deleted
+  );
+  const isDeletedTask = Boolean(
+    task?.deleted_at ||
+      (task as (Task & { deleted?: boolean }) | undefined)?.deleted
+  );
+  const canShowCompactEditActions =
+    !isCreateMode &&
+    !!task?.id &&
+    task.id !== 'new' &&
+    !isDeletedTask &&
+    !disabled &&
+    !taskLoadError;
+  const compactEditActionsDisabled = isLoading || isHydratingTask;
+  const canShowCompactStatusActions =
+    canShowCompactEditActions && currentList?.status !== 'documents';
+  const showCompactDoneAction =
+    canShowCompactStatusActions &&
+    !!doneList &&
+    doneList.id !== formState.selectedListId &&
+    currentList?.status !== 'done';
+  const showCompactClosedAction =
+    canShowCompactStatusActions &&
+    !!closedList &&
+    closedList.id !== formState.selectedListId &&
+    closedList.id !== doneList?.id &&
+    currentList?.status !== 'closed';
+
   // Task relationships
   const {
     toggleLabel,
@@ -861,6 +962,8 @@ export function TaskEditDialog({
     isCreateMode,
     task,
     filters,
+    taskHydrationVersion,
+    preserveNameOnHydration: nameEditedDuringHydrationRef.current,
     setName: formState.setName,
     setDescription: formState.setDescription,
     setPriority: formState.setPriority,
@@ -873,6 +976,12 @@ export function TaskEditDialog({
     setSelectedProjects: formState.setSelectedProjects,
   });
 
+  useEffect(() => {
+    if (!isHydratingTask) {
+      nameEditedDuringHydrationRef.current = false;
+    }
+  }, [isHydratingTask]);
+
   // Yjs sync
   useTaskYjsSync({
     taskId: task?.id,
@@ -880,7 +989,7 @@ export function TaskEditDialog({
     boardId,
     isOpen,
     isCreateMode,
-    realtimeEnabled,
+    realtimeEnabled: effectiveRealtimeEnabled,
     editorInstance,
     doc,
     yjsProvider: provider,
@@ -1203,7 +1312,7 @@ export function TaskEditDialog({
     saveAsDraft: isCreateMode && (!!draftId || saveAsDraft),
     draftId,
     isCreateMode,
-    collaborationMode,
+    collaborationMode: effectiveCollaborationMode,
     isPersonalWorkspace,
     shareCode,
     sharedPermission,
@@ -1252,6 +1361,309 @@ export function TaskEditDialog({
     setSelectedProjects: formState.setSelectedProjects,
   });
 
+  const smartSuggestionsMutation = useMutation({
+    mutationFn: async () => {
+      const prompt = formState.name.trim();
+      if (!prompt) {
+        throw new Error(dialogT('smart_prompt_required'));
+      }
+
+      const currentDescription =
+        flushEditorPendingRef.current?.() ?? formState.description;
+
+      return createWorkspaceTaskSuggestions(effectiveTaskWsId, {
+        boardId,
+        prompt,
+        description: serializeTaskDescriptionContent(currentDescription),
+        currentListId: formState.selectedListId || undefined,
+        clientTimezone:
+          Intl.DateTimeFormat().resolvedOptions().timeZone || undefined,
+        clientTimestamp: new Date().toISOString(),
+      });
+    },
+    onMutate: () => {
+      setSmartSuggestionError(null);
+      setSmartCreateErrors({});
+    },
+    onSuccess: (response) => {
+      const suggestions = response.tasks ?? [];
+      setSmartSuggestions(suggestions);
+      setSelectedSmartSuggestionIds(
+        suggestions.map((suggestion) => suggestion.id)
+      );
+      if (!suggestions.length) {
+        setSmartSuggestionError(dialogT('smart_no_suggestions'));
+      }
+    },
+    onError: (error) => {
+      setSmartSuggestionError(
+        error instanceof Error
+          ? error.message
+          : dialogT('smart_suggestions_failed_description')
+      );
+    },
+  });
+
+  const canUseSmartSuggestions =
+    isCreateMode && !draftId && !disabled && Boolean(boardId);
+
+  const handleGenerateSmartSuggestions = useCallback(() => {
+    if (!canUseSmartSuggestions) return;
+
+    if (!formState.name.trim()) {
+      toast.error(dialogT('smart_prompt_required'));
+      return;
+    }
+
+    smartSuggestionsMutation.mutate();
+  }, [
+    canUseSmartSuggestions,
+    dialogT,
+    formState.name,
+    smartSuggestionsMutation,
+  ]);
+
+  const applySmartSuggestion = useCallback(
+    (suggestion: WorkspaceTaskSuggestionTask) => {
+      formState.setName(suggestion.title);
+      formState.setDescription(getDescriptionContent(suggestion.description));
+      formState.setPriority(suggestion.priority);
+      formState.setEndDate(
+        suggestion.endDate ? new Date(suggestion.endDate) : undefined
+      );
+      formState.setSelectedListId(suggestion.listId);
+      formState.setEstimationPoints(suggestion.estimationPoints);
+      formState.setSelectedLabels(
+        suggestion.labels.map((label) => ({
+          id: label.id,
+          name: label.name,
+          color: label.color ?? '',
+          created_at: label.created_at ?? '',
+        }))
+      );
+      formState.setSelectedProjects(
+        suggestion.projects.map((project) => ({
+          id: project.id,
+          name: project.name,
+          status: project.status ?? 'active',
+        }))
+      );
+      formState.setTotalDuration(
+        suggestion.durationMinutes ? suggestion.durationMinutes / 60 : null
+      );
+      formState.setIsSplittable(suggestion.isSplittable);
+      formState.setMinSplitDurationMinutes(suggestion.minSplitDurationMinutes);
+      formState.setMaxSplitDurationMinutes(suggestion.maxSplitDurationMinutes);
+      formState.setCalendarHours(suggestion.calendarHours ?? null);
+      formState.setAutoSchedule(suggestion.autoSchedule);
+      toast.success(dialogT('smart_suggestion_applied'));
+    },
+    [
+      dialogT,
+      formState.setAutoSchedule,
+      formState.setCalendarHours,
+      formState.setDescription,
+      formState.setEndDate,
+      formState.setEstimationPoints,
+      formState.setIsSplittable,
+      formState.setMaxSplitDurationMinutes,
+      formState.setMinSplitDurationMinutes,
+      formState.setName,
+      formState.setPriority,
+      formState.setSelectedLabels,
+      formState.setSelectedListId,
+      formState.setSelectedProjects,
+      formState.setTotalDuration,
+    ]
+  );
+
+  const handleToggleSmartSuggestion = useCallback((suggestionId: string) => {
+    setSelectedSmartSuggestionIds((current) =>
+      current.includes(suggestionId)
+        ? current.filter((id) => id !== suggestionId)
+        : [...current, suggestionId]
+    );
+  }, []);
+
+  const handleCreateSelectedSmartSuggestions = useCallback(async () => {
+    if (!selectedSmartSuggestionIds.length) return;
+
+    const selectedSuggestions = smartSuggestions.filter((suggestion) =>
+      selectedSmartSuggestionIds.includes(suggestion.id)
+    );
+    if (!selectedSuggestions.length) return;
+
+    setIsCreatingSmartSuggestions(true);
+    setSmartCreateErrors({});
+    setCreatingSmartSuggestionIds(selectedSuggestions.map((s) => s.id));
+
+    let resolvedUserId = user?.id;
+    if (!resolvedUserId && isPersonalWorkspace) {
+      resolvedUserId = userForSave?.id;
+    }
+
+    const currentAssigneeIds = formState.selectedAssignees
+      .map((assignee) => assignee.user_id || assignee.id)
+      .filter((assigneeId): assigneeId is string => !!assigneeId);
+    const desiredAssigneeIds =
+      currentAssigneeIds.length > 0
+        ? currentAssigneeIds
+        : userTaskSettings?.task_auto_assign_to_self &&
+            resolvedUserId &&
+            !isPersonalWorkspace
+          ? [resolvedUserId]
+          : [];
+    const nextErrors: Record<string, string> = {};
+    const broadcast = getActiveBroadcast() ?? taskRealtimeBroadcastRef.current;
+
+    for (const suggestion of selectedSuggestions) {
+      setCreatingSmartSuggestionIds((current) =>
+        current.includes(suggestion.id) ? current : [...current, suggestion.id]
+      );
+
+      try {
+        const response = await createWorkspaceTask(effectiveTaskWsId, {
+          name: suggestion.title,
+          description: suggestion.description,
+          listId: suggestion.listId,
+          priority: suggestion.priority,
+          end_date: suggestion.endDate,
+          estimation_points: suggestion.estimationPoints,
+          label_ids: suggestion.labelIds,
+          project_ids: suggestion.projectIds,
+          assignee_ids: desiredAssigneeIds,
+          total_duration: suggestion.durationMinutes
+            ? suggestion.durationMinutes / 60
+            : null,
+          is_splittable: suggestion.isSplittable,
+          min_split_duration_minutes: suggestion.minSplitDurationMinutes,
+          max_split_duration_minutes: suggestion.maxSplitDurationMinutes,
+          calendar_hours: suggestion.calendarHours,
+          auto_schedule: suggestion.autoSchedule,
+        });
+
+        const createdTask: Task = {
+          ...(response.task as Task),
+          labels: suggestion.labels.map((label) => ({
+            id: label.id,
+            name: label.name,
+            color: label.color ?? '',
+            created_at: label.created_at ?? '',
+          })),
+          assignees: desiredAssigneeIds.map((assigneeId) => ({
+            id: assigneeId,
+          })),
+          projects: suggestion.projects.map((project) => ({
+            id: project.id,
+            name: project.name,
+            status: project.status ?? 'active',
+          })),
+        };
+
+        queryClient.setQueryData(
+          ['tasks', boardId],
+          (old: Task[] | undefined) => {
+            if (!old) return [createdTask];
+            if (old.some((task) => task.id === createdTask.id)) return old;
+            return [...old, createdTask];
+          }
+        );
+        broadcast?.('task:upsert', { task: createdTask });
+        if (
+          suggestion.labelIds.length ||
+          suggestion.projectIds.length ||
+          desiredAssigneeIds.length
+        ) {
+          broadcast?.('task:relations-changed', { taskId: createdTask.id });
+        }
+      } catch (error) {
+        nextErrors[suggestion.id] =
+          error instanceof Error
+            ? error.message
+            : dialogT('smart_create_failed');
+      } finally {
+        setCreatingSmartSuggestionIds((current) =>
+          current.filter((id) => id !== suggestion.id)
+        );
+      }
+    }
+
+    await invalidateTaskCaches(queryClient, boardId);
+    onUpdate();
+
+    setSmartCreateErrors(nextErrors);
+    const failedIds = Object.keys(nextErrors);
+    setSelectedSmartSuggestionIds(failedIds);
+
+    if (failedIds.length) {
+      toast.error(dialogT('smart_create_partial_failed'));
+    } else {
+      toast.success(
+        dialogT('smart_create_selected_success', {
+          count: selectedSuggestions.length,
+        })
+      );
+      setSmartSuggestions([]);
+      setSelectedSmartSuggestionIds([]);
+      onClose();
+    }
+
+    setIsCreatingSmartSuggestions(false);
+    setCreatingSmartSuggestionIds([]);
+  }, [
+    boardId,
+    dialogT,
+    effectiveTaskWsId,
+    formState.selectedAssignees,
+    isPersonalWorkspace,
+    onClose,
+    onUpdate,
+    queryClient,
+    selectedSmartSuggestionIds,
+    smartSuggestions,
+    user?.id,
+    userForSave?.id,
+    userTaskSettings?.task_auto_assign_to_self,
+  ]);
+
+  const smartSuggestionsPanel =
+    canUseSmartSuggestions &&
+    (smartSuggestionsMutation.isPending ||
+      smartSuggestionError ||
+      smartSuggestions.length > 0) ? (
+      <SmartTaskSuggestionsPanel
+        suggestions={smartSuggestions}
+        selectedSuggestionIds={selectedSmartSuggestionIds}
+        createErrors={smartCreateErrors}
+        creatingSuggestionIds={creatingSmartSuggestionIds}
+        errorMessage={smartSuggestionError}
+        isCreatingSelected={isCreatingSmartSuggestions}
+        isLoading={smartSuggestionsMutation.isPending}
+        onApplyFirst={() => {
+          const firstSuggestion = smartSuggestions[0];
+          if (firstSuggestion) applySmartSuggestion(firstSuggestion);
+        }}
+        onApplySuggestion={applySmartSuggestion}
+        onClose={() => {
+          setSmartSuggestions([]);
+          setSelectedSmartSuggestionIds([]);
+          setSmartSuggestionError(null);
+          setSmartCreateErrors({});
+        }}
+        onCreateSelected={handleCreateSelectedSmartSuggestions}
+        onRetry={handleGenerateSmartSuggestions}
+        onToggleSuggestion={handleToggleSmartSuggestion}
+      />
+    ) : null;
+
+  const smartSuggestionsButton = canUseSmartSuggestions ? (
+    <SmartTaskSuggestionsButton
+      disabled={smartSuggestionsMutation.isPending || isLoading}
+      isLoading={smartSuggestionsMutation.isPending}
+      onClick={handleGenerateSmartSuggestions}
+    />
+  ) : null;
+
   const persistTaskDescriptionOnClose = useCallback(async () => {
     if (isCreateMode || !task?.id || !flushEditorPendingRef.current) {
       return true;
@@ -1335,7 +1747,7 @@ export function TaskEditDialog({
     useTaskDialogClose({
       taskId: task?.id,
       isCreateMode,
-      collaborationMode,
+      collaborationMode: effectiveCollaborationMode,
       synced,
       connected,
       draftStorageKey,
@@ -1483,8 +1895,8 @@ export function TaskEditDialog({
     isOpen,
     canSave,
     isCreateMode,
-    collaborationMode,
-    disabled,
+    collaborationMode: effectiveCollaborationMode,
+    disabled: taskControlsDisabled,
     editorInstance,
     boardConfig,
     slashState: suggestionMenus.slashState,
@@ -1534,14 +1946,20 @@ export function TaskEditDialog({
     previousOpenRef.current = isOpen;
 
     if (!isOpen) {
-      setIsCreateFullscreen(false);
+      setPresentation(normalizedDefaultPresentation);
+      setSmartSuggestions([]);
+      setSelectedSmartSuggestionIds([]);
+      setSmartSuggestionError(null);
+      setSmartCreateErrors({});
+      setCreatingSmartSuggestionIds([]);
+      setIsCreatingSmartSuggestions(false);
       return;
     }
 
-    if (justOpened && isCreateMode && !draftId) {
-      setIsCreateFullscreen(false);
+    if (justOpened) {
+      setPresentation(draftId ? 'fullscreen' : normalizedDefaultPresentation);
     }
-  }, [isOpen, isCreateMode, draftId]);
+  }, [isOpen, draftId, normalizedDefaultPresentation]);
 
   // Track whether the title input is scrolled out of view
   useEffect(() => {
@@ -1604,8 +2022,25 @@ export function TaskEditDialog({
     taskSearchQuery,
   ]);
 
-  const showCompactCreate =
-    isCreateMode && !draftId && !isCreateFullscreen && !disabled;
+  const showCompactDialog = presentation === 'compact' && !draftId;
+  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"
+      role="alert"
+    >
+      <span>{t('please_try_again_later')}</span>
+      {onRetryTaskLoad && (
+        <Button
+          type="button"
+          variant="secondary"
+          size="xs"
+          onClick={onRetryTaskLoad}
+        >
+          {t('retry')}
+        </Button>
+      )}
+    </div>
+  ) : null;
   const compactHeaderInfo = useMemo(
     () =>
       getTaskDialogHeaderInfo(
@@ -1627,6 +2062,62 @@ export function TaskEditDialog({
       rootT,
     ]
   );
+  const compactEditActions = canShowCompactEditActions ? (
+    <>
+      {showCompactDoneAction && doneList && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              aria-label={t('mark_as_done')}
+              disabled={compactEditActionsDisabled}
+              className="h-8 w-8 text-muted-foreground hover:text-foreground"
+              onClick={() => void updateList(doneList.id)}
+            >
+              <CheckCircle2 className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="top">{t('mark_as_done')}</TooltipContent>
+        </Tooltip>
+      )}
+      {showCompactClosedAction && closedList && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              aria-label={t('archive')}
+              disabled={compactEditActionsDisabled}
+              className="h-8 w-8 text-muted-foreground hover:text-foreground"
+              onClick={() => void updateList(closedList.id)}
+            >
+              <Archive className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="top">{t('archive')}</TooltipContent>
+        </Tooltip>
+      )}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            aria-label={t('delete_task')}
+            disabled={compactEditActionsDisabled}
+            className="h-8 w-8 text-muted-foreground hover:text-foreground"
+            onClick={() => setShowDeleteConfirm(true)}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">{t('delete_task')}</TooltipContent>
+      </Tooltip>
+    </>
+  ) : undefined;
 
   // Update refs
   quickDueRef.current = handleQuickDueDate;
@@ -1702,7 +2193,7 @@ export function TaskEditDialog({
       onSaveSchedulingSettings={saveSchedulingSettings}
       schedulingSaving={schedulingSaving}
       scheduledEvents={localCalendarEvents}
-      disabled={disabled}
+      disabled={taskControlsDisabled}
       isDraftMode={!!draftId || (isCreateMode && saveAsDraft)}
       variant={variant}
     />
@@ -1743,7 +2234,7 @@ export function TaskEditDialog({
         <DialogContent
           showCloseButton={false}
           className={
-            showCompactCreate
+            showCompactDialog
               ? 'w-[min(calc(100vw-2rem),30rem)] max-w-[30rem] gap-0 overflow-hidden 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'
           }
@@ -1772,13 +2263,14 @@ export function TaskEditDialog({
               e.preventDefault();
           }}
         >
-          {showCompactCreate ? (
-            <CompactTaskCreatePopover
+          {showCompactDialog ? (
+            <CompactTaskDialogPanel
               title={compactHeaderInfo.title}
               description={compactHeaderInfo.description}
               icon={compactHeaderInfo.icon}
               iconBgClass={compactHeaderInfo.iconBgClass}
               iconRingClass={compactHeaderInfo.iconRingClass}
+              showHeaderTitle={isCreateMode}
               titleInput={
                 <TaskNameInput
                   name={formState.name}
@@ -1787,25 +2279,41 @@ export function TaskEditDialog({
                   editorRef={editorRef}
                   lastCursorPositionRef={lastCursorPositionRef}
                   targetEditorCursorRef={targetEditorCursorRef}
-                  setName={formState.setName}
+                  setName={setTaskName}
                   updateName={updateName}
                   flushNameUpdate={flushNameUpdate}
-                  disabled={disabled}
+                  disabled={taskTitleDisabled}
                   variant="compact"
-                  onSubmit={handleSave}
+                  onSubmit={
+                    isCreateMode && !taskControlsDisabled
+                      ? handleSave
+                      : undefined
+                  }
                 />
               }
               propertyControls={renderTaskPropertiesSection('compact')}
-              saveAsDraft={saveAsDraft}
-              createMultiple={createMultiple}
-              canSave={canSave && !isDescriptionOverLimit}
+              taskStatus={taskHydrationNotice}
+              smartAction={smartSuggestionsButton}
+              smartPanel={smartSuggestionsPanel}
+              saveAsDraft={isCreateMode ? saveAsDraft : undefined}
+              createMultiple={isCreateMode ? createMultiple : undefined}
+              canSave={
+                isCreateMode
+                  ? canSave && !isDescriptionOverLimit && !taskControlsDisabled
+                  : undefined
+              }
               isLoading={isLoading}
               isPersonalWorkspace={isPersonalWorkspace}
-              onSaveAsDraftChange={setSaveAsDraft}
-              onCreateMultipleChange={setCreateMultiple}
+              editActions={compactEditActions}
+              onSaveAsDraftChange={isCreateMode ? setSaveAsDraft : undefined}
+              onCreateMultipleChange={
+                isCreateMode ? setCreateMultiple : undefined
+              }
               onClose={handleAttemptClose}
-              onFullscreen={() => setIsCreateFullscreen(true)}
-              onSave={handleSave}
+              onFullscreen={() => setPresentation('fullscreen')}
+              onSave={
+                isCreateMode && !taskControlsDisabled ? handleSave : undefined
+              }
             />
           ) : (
             <>
@@ -1816,8 +2324,8 @@ export function TaskEditDialog({
                 {!disabled && (
                   <TaskDialogHeader
                     isCreateMode={isCreateMode}
-                    collaborationMode={collaborationMode}
-                    realtimeEnabled={realtimeEnabled}
+                    collaborationMode={effectiveCollaborationMode}
+                    realtimeEnabled={effectiveRealtimeEnabled}
                     isOpen={isOpen}
                     synced={synced}
                     connected={connected}
@@ -1847,7 +2355,11 @@ export function TaskEditDialog({
                     wsId={effectiveTaskWsId}
                     boardId={boardId}
                     pathname={pathname}
-                    canSave={canSave && !isDescriptionOverLimit}
+                    canSave={
+                      canSave &&
+                      !isDescriptionOverLimit &&
+                      !taskControlsDisabled
+                    }
                     isLoading={isLoading}
                     setCreateMultiple={setCreateMultiple}
                     handleClose={handleAttemptClose}
@@ -1866,8 +2378,11 @@ export function TaskEditDialog({
                         : undefined
                     }
                     disabled={disabled}
+                    controlsDisabled={taskControlsDisabled}
                     onScrollToUserCursor={
-                      collaborationMode ? scrollToUserCursor : undefined
+                      effectiveCollaborationMode
+                        ? scrollToUserCursor
+                        : undefined
                     }
                   />
                 )}
@@ -1884,15 +2399,29 @@ export function TaskEditDialog({
                       editorRef={editorRef}
                       lastCursorPositionRef={lastCursorPositionRef}
                       targetEditorCursorRef={targetEditorCursorRef}
-                      setName={formState.setName}
+                      setName={setTaskName}
                       updateName={updateName}
                       flushNameUpdate={flushNameUpdate}
-                      disabled={disabled}
+                      disabled={taskTitleDisabled}
                     />
 
+                    {smartSuggestionsButton && (
+                      <div className="flex justify-end px-4 pb-2 md:px-8">
+                        {smartSuggestionsButton}
+                      </div>
+                    )}
+
                     {!disabled && renderTaskPropertiesSection()}
 
-                    {!disabled && !isCreateMode && (
+                    {taskHydrationNotice}
+
+                    {smartSuggestionsPanel && (
+                      <div className="px-4 pb-3 md:px-8">
+                        {smartSuggestionsPanel}
+                      </div>
+                    )}
+
+                    {!taskControlsDisabled && !isCreateMode && (
                       <PersonalOverridesSection
                         taskId={task?.id}
                         isCreateMode={isCreateMode}
@@ -1901,7 +2430,7 @@ export function TaskEditDialog({
                       />
                     )}
 
-                    {!disabled &&
+                    {!taskControlsDisabled &&
                       !draftId &&
                       !(isCreateMode && saveAsDraft) && (
                         <TaskRelationshipsProperties
@@ -1950,7 +2479,7 @@ export function TaskEditDialog({
                           onAddExistingAsSubtask={addChildTask}
                           isSaving={!!savingRelationship}
                           savingTaskId={savingRelationship}
-                          disabled={disabled}
+                          disabled={taskControlsDisabled}
                         />
                       )}
 
@@ -1959,8 +2488,8 @@ export function TaskEditDialog({
                       setDescription={formState.setDescription}
                       isOpen={isOpen}
                       isCreateMode={isCreateMode}
-                      collaborationMode={collaborationMode}
-                      realtimeEnabled={realtimeEnabled}
+                      collaborationMode={effectiveCollaborationMode}
+                      realtimeEnabled={effectiveRealtimeEnabled}
                       isYjsSyncing={isYjsSyncing}
                       wsId={effectiveTaskWsId}
                       boardId={boardId}
@@ -1994,7 +2523,7 @@ export function TaskEditDialog({
                       descriptionPercentLeft={descriptionPercentLeft}
                       descriptionLimit={MAX_TASK_DESCRIPTION_LENGTH}
                       isDescriptionOverLimit={isDescriptionOverLimit}
-                      disabled={disabled}
+                      disabled={taskControlsDisabled}
                       mentionTranslations={{
                         delete_task: t('delete_task'),
                         delete_task_confirmation: (name: string) =>
@@ -2075,11 +2604,13 @@ export function TaskEditDialog({
 
               <MobileFloatingSaveButton
                 isCreateMode={isCreateMode}
-                collaborationMode={collaborationMode}
+                collaborationMode={effectiveCollaborationMode}
                 isLoading={isLoading}
-                canSave={canSave && !isDescriptionOverLimit}
+                canSave={
+                  canSave && !isDescriptionOverLimit && !taskControlsDisabled
+                }
                 handleSave={handleSave}
-                disabled={disabled}
+                disabled={taskControlsDisabled}
               />
             </>
           )}