@tuturuuu/ui 0.4.1 → 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,9 +45,21 @@ import {
 import { DescriptionOverflowWarningDialog } from './description-overflow-warning-dialog';
 import { createInitialSuggestionState } from './mention-system/types';
 import { SyncWarningDialog } from './sync-warning-dialog';
+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 { TaskDialogHeader } from './task-edit-dialog/components/task-dialog-header';
+import {
+  getTaskDialogHeaderInfo,
+  TaskDialogHeader,
+} from './task-edit-dialog/components/task-dialog-header';
 import { TaskNameInput } from './task-edit-dialog/components/task-name-input';
 import { TaskSuggestionMenus } from './task-edit-dialog/components/task-suggestion-menus';
 import { NAME_UPDATE_DEBOUNCE_MS } from './task-edit-dialog/constants';
@@ -87,6 +104,7 @@ import {
 import {
   broadcastTaskDescriptionUpsert,
   clearDraft,
+  getDescriptionContent,
   getDraftStorageKey,
   getTaskDescriptionPercentLeft,
   getTaskDescriptionStorageLength,
@@ -125,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;
@@ -134,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;
@@ -144,6 +167,7 @@ export interface TaskEditDialogProps {
   onAddBlockingTask?: () => void;
   onAddBlockedByTask?: () => void;
   onAddRelatedTask?: () => void;
+  onRetryTaskLoad?: () => void;
 }
 
 export function TaskEditDialog({
@@ -159,6 +183,9 @@ export function TaskEditDialog({
   mode = 'edit',
   collaborationMode = false,
   realtimeEnabled = false,
+  isHydratingTask = false,
+  taskLoadError = false,
+  taskHydrationVersion = 0,
   isPersonalWorkspace = false,
   parentTaskId,
   parentTaskName,
@@ -166,6 +193,7 @@ export function TaskEditDialog({
   currentUser: propsCurrentUser,
   sharedContext,
   draftModeEnabled = false,
+  defaultPresentation = 'compact',
   draftId,
   onClose,
   onUpdate,
@@ -175,12 +203,14 @@ export function TaskEditDialog({
   onAddBlockingTask,
   onAddBlockedByTask,
   onAddRelatedTask,
+  onRetryTaskLoad,
 }: TaskEditDialogProps) {
   const isCreateMode = mode === 'create';
   const effectiveTaskWsId = !isCreateMode ? (taskWsId ?? wsId) : wsId;
   const pathname = usePathname();
   const queryClient = useQueryClient();
   const t = useTranslations('common');
+  const rootT = useTranslations();
   const dialogT = useTranslations('ws-task-boards.dialog');
   const { registerCloseRequestHandler } = useTaskDialogContext();
 
@@ -191,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
@@ -212,7 +248,7 @@ export function TaskEditDialog({
         );
         return result.hasPermission;
       },
-      enabled: Boolean(effectiveTaskWsId) && !disabled,
+      enabled: Boolean(effectiveTaskWsId) && !taskControlsDisabled,
       staleTime: 5 * 60 * 1000,
     });
 
@@ -230,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);
@@ -240,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);
@@ -251,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
@@ -381,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,
@@ -391,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;
     }
@@ -399,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
@@ -414,7 +462,7 @@ export function TaskEditDialog({
     hasHydratedYjsState,
     isOpen,
     isCreateMode,
-    realtimeEnabled,
+    effectiveRealtimeEnabled,
     task?.id,
     synced,
   ]);
@@ -504,6 +552,31 @@ 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 [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>(
     null
@@ -702,8 +775,8 @@ export function TaskEditDialog({
       selectedLabels: formState.selectedLabels,
       selectedAssignees: formState.selectedAssignees,
       isCreateMode,
-      isLoading,
-      collaborationMode,
+      isLoading: isLoading || taskControlsDisabled,
+      collaborationMode: effectiveCollaborationMode,
       draftId,
     });
 
@@ -726,7 +799,7 @@ export function TaskEditDialog({
     boardId,
     isCreateMode,
     isOpen,
-    realtimeEnabled,
+    realtimeEnabled: effectiveRealtimeEnabled,
     isPersonalWorkspace,
     name: formState.name,
     priority: formState.priority,
@@ -776,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,
@@ -854,6 +962,8 @@ export function TaskEditDialog({
     isCreateMode,
     task,
     filters,
+    taskHydrationVersion,
+    preserveNameOnHydration: nameEditedDuringHydrationRef.current,
     setName: formState.setName,
     setDescription: formState.setDescription,
     setPriority: formState.setPriority,
@@ -866,6 +976,12 @@ export function TaskEditDialog({
     setSelectedProjects: formState.setSelectedProjects,
   });
 
+  useEffect(() => {
+    if (!isHydratingTask) {
+      nameEditedDuringHydrationRef.current = false;
+    }
+  }, [isHydratingTask]);
+
   // Yjs sync
   useTaskYjsSync({
     taskId: task?.id,
@@ -873,7 +989,7 @@ export function TaskEditDialog({
     boardId,
     isOpen,
     isCreateMode,
-    realtimeEnabled,
+    realtimeEnabled: effectiveRealtimeEnabled,
     editorInstance,
     doc,
     yjsProvider: provider,
@@ -1196,7 +1312,7 @@ export function TaskEditDialog({
     saveAsDraft: isCreateMode && (!!draftId || saveAsDraft),
     draftId,
     isCreateMode,
-    collaborationMode,
+    collaborationMode: effectiveCollaborationMode,
     isPersonalWorkspace,
     shareCode,
     sharedPermission,
@@ -1245,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;
@@ -1328,7 +1747,7 @@ export function TaskEditDialog({
     useTaskDialogClose({
       taskId: task?.id,
       isCreateMode,
-      collaborationMode,
+      collaborationMode: effectiveCollaborationMode,
       synced,
       connected,
       draftStorageKey,
@@ -1476,8 +1895,8 @@ export function TaskEditDialog({
     isOpen,
     canSave,
     isCreateMode,
-    collaborationMode,
-    disabled,
+    collaborationMode: effectiveCollaborationMode,
+    disabled: taskControlsDisabled,
     editorInstance,
     boardConfig,
     slashState: suggestionMenus.slashState,
@@ -1522,6 +1941,26 @@ export function TaskEditDialog({
     }
   }, [isOpen, draftModeEnabled, draftId]);
 
+  useEffect(() => {
+    const justOpened = isOpen && !previousOpenRef.current;
+    previousOpenRef.current = isOpen;
+
+    if (!isOpen) {
+      setPresentation(normalizedDefaultPresentation);
+      setSmartSuggestions([]);
+      setSelectedSmartSuggestionIds([]);
+      setSmartSuggestionError(null);
+      setSmartCreateErrors({});
+      setCreatingSmartSuggestionIds([]);
+      setIsCreatingSmartSuggestions(false);
+      return;
+    }
+
+    if (justOpened) {
+      setPresentation(draftId ? 'fullscreen' : normalizedDefaultPresentation);
+    }
+  }, [isOpen, draftId, normalizedDefaultPresentation]);
+
   // Track whether the title input is scrolled out of view
   useEffect(() => {
     const el = titleInputRef.current;
@@ -1583,11 +2022,183 @@ export function TaskEditDialog({
     taskSearchQuery,
   ]);
 
+  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(
+        {
+          isCreateMode,
+          parentTaskId,
+          parentTaskName,
+          pendingRelationship,
+          draftId,
+        },
+        rootT
+      ),
+    [
+      isCreateMode,
+      parentTaskId,
+      parentTaskName,
+      pendingRelationship,
+      draftId,
+      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;
   updateEstimationRef.current = updateEstimation;
   handleConvertToTaskRef.current = handleConvertToTask;
 
+  const renderTaskPropertiesSection = (
+    variant: 'default' | 'compact' = 'default'
+  ) => (
+    <TaskPropertiesSection
+      wsId={effectiveTaskWsId}
+      boardId={boardId}
+      taskId={task?.id}
+      priority={formState.priority}
+      startDate={formState.startDate}
+      endDate={formState.endDate}
+      estimationPoints={formState.estimationPoints}
+      selectedLabels={formState.selectedLabels}
+      selectedProjects={formState.selectedProjects}
+      selectedListId={formState.selectedListId}
+      selectedAssignees={formState.selectedAssignees}
+      isLoading={isLoading}
+      isPersonalWorkspace={isPersonalWorkspace}
+      totalDuration={formState.totalDuration}
+      isSplittable={formState.isSplittable}
+      minSplitDurationMinutes={formState.minSplitDurationMinutes}
+      maxSplitDurationMinutes={formState.maxSplitDurationMinutes}
+      calendarHours={formState.calendarHours}
+      autoSchedule={formState.autoSchedule}
+      availableLists={availableLists}
+      availableLabels={availableLabels}
+      taskProjects={taskProjects}
+      workspaceMembers={workspaceMembers}
+      boardConfig={boardConfig}
+      onPriorityChange={updatePriority}
+      onStartDateChange={updateStartDate}
+      onEndDateChange={updateEndDate}
+      onEstimationChange={updateEstimation}
+      onLabelToggle={toggleLabel}
+      onProjectToggle={toggleProject}
+      onListChange={updateList}
+      onAssigneeToggle={toggleAssignee}
+      onQuickDueDate={handleQuickDueDate}
+      onShowNewLabelDialog={() => {
+        setNewLabelColor((previousColor) =>
+          getRandomNewLabelColor(previousColor)
+        );
+        setShowNewLabelDialog(true);
+      }}
+      onShowNewProjectDialog={() => setShowNewProjectDialog(true)}
+      onShowEstimationConfigDialog={() => setShowEstimationConfigDialog(true)}
+      onTotalDurationChange={formState.setTotalDuration}
+      onIsSplittableChange={formState.setIsSplittable}
+      onMinSplitDurationChange={formState.setMinSplitDurationMinutes}
+      onMaxSplitDurationChange={formState.setMaxSplitDurationMinutes}
+      onCalendarHoursChange={formState.setCalendarHours}
+      onAutoScheduleChange={formState.setAutoSchedule}
+      isCreateMode={isCreateMode}
+      savedSchedulingSettings={
+        personalScheduleData?.task
+          ? {
+              totalDuration: personalScheduleData.task.total_duration ?? null,
+              isSplittable: !!personalScheduleData.task.is_splittable,
+              minSplitDurationMinutes:
+                personalScheduleData.task.min_split_duration_minutes ?? null,
+              maxSplitDurationMinutes:
+                personalScheduleData.task.max_split_duration_minutes ?? null,
+              calendarHours: personalScheduleData.task.calendar_hours ?? null,
+              autoSchedule: !!personalScheduleData.task.auto_schedule,
+            }
+          : undefined
+      }
+      onSaveSchedulingSettings={saveSchedulingSettings}
+      schedulingSaving={schedulingSaving}
+      scheduledEvents={localCalendarEvents}
+      disabled={taskControlsDisabled}
+      isDraftMode={!!draftId || (isCreateMode && saveAsDraft)}
+      variant={variant}
+    />
+  );
+
   return (
     <>
       <TaskSuggestionMenus
@@ -1622,7 +2233,11 @@ export function TaskEditDialog({
       <Dialog open={isOpen} onOpenChange={handleDialogOpenChange} modal={true}>
         <DialogContent
           showCloseButton={false}
-          className="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"
+          className={
+            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'
+          }
           onContextMenu={(e) => {
             if (shouldPreserveNativeContextMenu(e.target)) {
               return;
@@ -1648,74 +2263,15 @@ export function TaskEditDialog({
               e.preventDefault();
           }}
         >
-          <div className="flex min-w-0 flex-1 flex-col bg-background transition-all duration-300">
-            {disabled && (
-              <DialogTitle className="sr-only">Task Details</DialogTitle>
-            )}
-            {!disabled && (
-              <TaskDialogHeader
-                isCreateMode={isCreateMode}
-                collaborationMode={collaborationMode}
-                realtimeEnabled={realtimeEnabled}
-                isOpen={isOpen}
-                synced={synced}
-                connected={connected}
-                taskId={task?.id}
-                parentTaskId={parentTaskId}
-                parentTaskName={parentTaskName}
-                pendingRelationship={pendingRelationship}
-                saveAsDraft={saveAsDraft}
-                setSaveAsDraft={setSaveAsDraft}
-                draftId={draftId}
-                isTitleVisible={isTitleVisible}
-                taskName={formState.name}
-                ticketPrefix={boardConfig?.ticket_prefix}
-                displayNumber={task?.display_number}
-                user={
-                  user
-                    ? {
-                        id: user.id || '',
-                        display_name: user.display_name ?? null,
-                        avatar_url: user.avatar_url ?? null,
-                        email: user.email ?? null,
-                      }
-                    : null
-                }
-                createMultiple={createMultiple}
-                hasDraft={formState.hasDraft}
-                wsId={effectiveTaskWsId}
-                boardId={boardId}
-                pathname={pathname}
-                canSave={canSave && !isDescriptionOverLimit}
-                isLoading={isLoading}
-                setCreateMultiple={setCreateMultiple}
-                handleClose={handleAttemptClose}
-                setShowDeleteConfirm={setShowDeleteConfirm}
-                clearDraftState={formState.clearDraftState}
-                handleSave={handleSave}
-                onNavigateBack={
-                  isCreateMode && (pendingRelationship || parentTaskId)
-                    ? handleNavigateBack
-                    : undefined
-                }
-                isPersonalWorkspace={isPersonalWorkspace}
-                onOpenShareDialog={
-                  !isCreateMode && task?.id
-                    ? () => setShowShareDialog(true)
-                    : undefined
-                }
-                disabled={disabled}
-                onScrollToUserCursor={
-                  collaborationMode ? scrollToUserCursor : undefined
-                }
-              />
-            )}
-
-            <div
-              ref={setScrollContainer}
-              className="relative flex min-h-0 flex-1 flex-col overflow-y-auto"
-            >
-              <div className="flex flex-col">
+          {showCompactDialog ? (
+            <CompactTaskDialogPanel
+              title={compactHeaderInfo.title}
+              description={compactHeaderInfo.description}
+              icon={compactHeaderInfo.icon}
+              iconBgClass={compactHeaderInfo.iconBgClass}
+              iconRingClass={compactHeaderInfo.iconRingClass}
+              showHeaderTitle={isCreateMode}
+              titleInput={
                 <TaskNameInput
                   name={formState.name}
                   isCreateMode={isCreateMode}
@@ -1723,278 +2279,341 @@ 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={
+                    isCreateMode && !taskControlsDisabled
+                      ? handleSave
+                      : undefined
+                  }
                 />
-
+              }
+              propertyControls={renderTaskPropertiesSection('compact')}
+              taskStatus={taskHydrationNotice}
+              smartAction={smartSuggestionsButton}
+              smartPanel={smartSuggestionsPanel}
+              saveAsDraft={isCreateMode ? saveAsDraft : undefined}
+              createMultiple={isCreateMode ? createMultiple : undefined}
+              canSave={
+                isCreateMode
+                  ? canSave && !isDescriptionOverLimit && !taskControlsDisabled
+                  : undefined
+              }
+              isLoading={isLoading}
+              isPersonalWorkspace={isPersonalWorkspace}
+              editActions={compactEditActions}
+              onSaveAsDraftChange={isCreateMode ? setSaveAsDraft : undefined}
+              onCreateMultipleChange={
+                isCreateMode ? setCreateMultiple : undefined
+              }
+              onClose={handleAttemptClose}
+              onFullscreen={() => setPresentation('fullscreen')}
+              onSave={
+                isCreateMode && !taskControlsDisabled ? handleSave : undefined
+              }
+            />
+          ) : (
+            <>
+              <div className="flex min-w-0 flex-1 flex-col bg-background transition-all duration-300">
+                {disabled && (
+                  <DialogTitle className="sr-only">Task Details</DialogTitle>
+                )}
                 {!disabled && (
-                  <TaskPropertiesSection
-                    wsId={effectiveTaskWsId}
-                    boardId={boardId}
-                    taskId={task?.id}
-                    priority={formState.priority}
-                    startDate={formState.startDate}
-                    endDate={formState.endDate}
-                    estimationPoints={formState.estimationPoints}
-                    selectedLabels={formState.selectedLabels}
-                    selectedProjects={formState.selectedProjects}
-                    selectedListId={formState.selectedListId}
-                    selectedAssignees={formState.selectedAssignees}
-                    isLoading={isLoading}
-                    isPersonalWorkspace={isPersonalWorkspace}
-                    totalDuration={formState.totalDuration}
-                    isSplittable={formState.isSplittable}
-                    minSplitDurationMinutes={formState.minSplitDurationMinutes}
-                    maxSplitDurationMinutes={formState.maxSplitDurationMinutes}
-                    calendarHours={formState.calendarHours}
-                    autoSchedule={formState.autoSchedule}
-                    availableLists={availableLists}
-                    availableLabels={availableLabels}
-                    taskProjects={taskProjects}
-                    workspaceMembers={workspaceMembers}
-                    boardConfig={boardConfig}
-                    onPriorityChange={updatePriority}
-                    onStartDateChange={updateStartDate}
-                    onEndDateChange={updateEndDate}
-                    onEstimationChange={updateEstimation}
-                    onLabelToggle={toggleLabel}
-                    onProjectToggle={toggleProject}
-                    onListChange={updateList}
-                    onAssigneeToggle={toggleAssignee}
-                    onQuickDueDate={handleQuickDueDate}
-                    onShowNewLabelDialog={() => {
-                      setNewLabelColor((previousColor) =>
-                        getRandomNewLabelColor(previousColor)
-                      );
-                      setShowNewLabelDialog(true);
-                    }}
-                    onShowNewProjectDialog={() => setShowNewProjectDialog(true)}
-                    onShowEstimationConfigDialog={() =>
-                      setShowEstimationConfigDialog(true)
-                    }
-                    onTotalDurationChange={formState.setTotalDuration}
-                    onIsSplittableChange={formState.setIsSplittable}
-                    onMinSplitDurationChange={
-                      formState.setMinSplitDurationMinutes
-                    }
-                    onMaxSplitDurationChange={
-                      formState.setMaxSplitDurationMinutes
-                    }
-                    onCalendarHoursChange={formState.setCalendarHours}
-                    onAutoScheduleChange={formState.setAutoSchedule}
+                  <TaskDialogHeader
                     isCreateMode={isCreateMode}
-                    savedSchedulingSettings={
-                      personalScheduleData?.task
+                    collaborationMode={effectiveCollaborationMode}
+                    realtimeEnabled={effectiveRealtimeEnabled}
+                    isOpen={isOpen}
+                    synced={synced}
+                    connected={connected}
+                    taskId={task?.id}
+                    parentTaskId={parentTaskId}
+                    parentTaskName={parentTaskName}
+                    pendingRelationship={pendingRelationship}
+                    saveAsDraft={saveAsDraft}
+                    setSaveAsDraft={setSaveAsDraft}
+                    draftId={draftId}
+                    isTitleVisible={isTitleVisible}
+                    taskName={formState.name}
+                    ticketPrefix={boardConfig?.ticket_prefix}
+                    displayNumber={task?.display_number}
+                    user={
+                      user
                         ? {
-                            totalDuration:
-                              personalScheduleData.task.total_duration ?? null,
-                            isSplittable:
-                              !!personalScheduleData.task.is_splittable,
-                            minSplitDurationMinutes:
-                              personalScheduleData.task
-                                .min_split_duration_minutes ?? null,
-                            maxSplitDurationMinutes:
-                              personalScheduleData.task
-                                .max_split_duration_minutes ?? null,
-                            calendarHours:
-                              personalScheduleData.task.calendar_hours ?? null,
-                            autoSchedule:
-                              !!personalScheduleData.task.auto_schedule,
+                            id: user.id || '',
+                            display_name: user.display_name ?? null,
+                            avatar_url: user.avatar_url ?? null,
+                            email: user.email ?? null,
                           }
-                        : undefined
+                        : null
                     }
-                    onSaveSchedulingSettings={saveSchedulingSettings}
-                    schedulingSaving={schedulingSaving}
-                    scheduledEvents={localCalendarEvents}
-                    disabled={disabled}
-                    isDraftMode={!!draftId || (isCreateMode && saveAsDraft)}
-                  />
-                )}
-
-                {!disabled && !isCreateMode && (
-                  <PersonalOverridesSection
-                    taskId={task?.id}
-                    isCreateMode={isCreateMode}
-                    boardConfig={boardConfig}
-                    onUpdate={onUpdate}
-                  />
-                )}
-
-                {!disabled && !draftId && !(isCreateMode && saveAsDraft) && (
-                  <TaskRelationshipsProperties
+                    createMultiple={createMultiple}
+                    hasDraft={formState.hasDraft}
                     wsId={effectiveTaskWsId}
-                    taskId={task?.id}
                     boardId={boardId}
-                    listId={task?.list_id}
-                    isCreateMode={isCreateMode}
-                    initialActiveTab={
-                      seededPendingRelationships.initialActiveTab
-                    }
-                    initialDependencySubTab={
-                      seededPendingRelationships.initialDependencySubTab
-                    }
-                    parentTask={parentTask}
-                    childTasks={childTasks}
-                    blockingTasks={blockingTasks}
-                    blockedByTasks={blockedByTasks}
-                    relatedTasks={relatedTasks}
-                    isLoading={dependenciesLoading}
-                    onSetParent={setParentTask}
-                    onRemoveParent={() => setParentTask(null)}
-                    onAddBlockingTask={addBlockingTask}
-                    onRemoveBlockingTask={removeBlockingTask}
-                    onAddBlockedByTask={addBlockedByTask}
-                    onRemoveBlockedByTask={removeBlockedByTask}
-                    onAddRelatedTask={addRelatedTask}
-                    onRemoveRelatedTask={removeRelatedTask}
-                    onNavigateToTask={async (taskId) => {
-                      if (onNavigateToTask) await onNavigateToTask(taskId);
-                    }}
-                    onAddSubtask={isCreateMode ? undefined : onAddSubtask}
-                    onAddParentTask={isCreateMode ? undefined : onAddParentTask}
-                    onAddBlockingTaskDialog={
-                      isCreateMode ? undefined : onAddBlockingTask
+                    pathname={pathname}
+                    canSave={
+                      canSave &&
+                      !isDescriptionOverLimit &&
+                      !taskControlsDisabled
                     }
-                    onAddBlockedByTaskDialog={
-                      isCreateMode ? undefined : onAddBlockedByTask
+                    isLoading={isLoading}
+                    setCreateMultiple={setCreateMultiple}
+                    handleClose={handleAttemptClose}
+                    setShowDeleteConfirm={setShowDeleteConfirm}
+                    clearDraftState={formState.clearDraftState}
+                    handleSave={handleSave}
+                    onNavigateBack={
+                      isCreateMode && (pendingRelationship || parentTaskId)
+                        ? handleNavigateBack
+                        : undefined
                     }
-                    onAddRelatedTaskDialog={
-                      isCreateMode ? undefined : onAddRelatedTask
+                    isPersonalWorkspace={isPersonalWorkspace}
+                    onOpenShareDialog={
+                      !isCreateMode && task?.id
+                        ? () => setShowShareDialog(true)
+                        : undefined
                     }
-                    onAddExistingAsSubtask={addChildTask}
-                    isSaving={!!savingRelationship}
-                    savingTaskId={savingRelationship}
                     disabled={disabled}
+                    controlsDisabled={taskControlsDisabled}
+                    onScrollToUserCursor={
+                      effectiveCollaborationMode
+                        ? scrollToUserCursor
+                        : undefined
+                    }
                   />
                 )}
 
-                <TaskDescriptionEditor
-                  description={formState.description}
-                  setDescription={formState.setDescription}
-                  isOpen={isOpen}
-                  isCreateMode={isCreateMode}
-                  collaborationMode={collaborationMode}
-                  realtimeEnabled={realtimeEnabled}
-                  isYjsSyncing={isYjsSyncing}
-                  wsId={effectiveTaskWsId}
-                  boardId={boardId}
-                  taskId={task?.id}
-                  availableLists={availableLists}
-                  queryClient={queryClient}
-                  editorRef={editorRef}
-                  richTextEditorRef={richTextEditorRef}
-                  titleInputRef={titleInputRef}
-                  lastCursorPositionRef={lastCursorPositionRef}
-                  targetEditorCursorRef={targetEditorCursorRef}
-                  flushEditorPendingRef={flushEditorPendingRef}
-                  yjsDoc={doc}
-                  yjsProvider={provider ?? undefined}
-                  collaborationUser={
-                    user
-                      ? {
-                          id: user.id || '',
-                          name: userDisplayName,
-                          color: userColor || '',
-                        }
-                      : null
-                  }
-                  onImageUpload={imageUploadHandler}
-                  onEditorReady={handleEditorReady}
-                  onConvertToTask={handleConvertToTask}
-                  onDescriptionStorageLengthChange={
-                    handleDescriptionStorageLengthChange
-                  }
-                  descriptionStorageLength={descriptionStorageLength}
-                  descriptionPercentLeft={descriptionPercentLeft}
-                  descriptionLimit={MAX_TASK_DESCRIPTION_LENGTH}
-                  isDescriptionOverLimit={isDescriptionOverLimit}
-                  disabled={disabled}
-                  mentionTranslations={{
-                    delete_task: t('delete_task'),
-                    delete_task_confirmation: (name: string) =>
-                      t('delete_task_confirmation', { name }),
-                    cancel: t('cancel'),
-                    deleting: t('deleting'),
-                    set_custom_due_date: t('set_custom_due_date'),
-                    custom_due_date_description: t(
-                      'custom_due_date_description'
-                    ),
-                    remove_due_date: t('remove_due_date'),
-                    create_new_label: t('create_new_label'),
-                    create_new_label_description: t(
-                      'create_new_label_description'
-                    ),
-                    label_name: t('label_name'),
-                    color: t('color'),
-                    preview: t('preview'),
-                    creating: t('creating'),
-                    create_label: t('create_label'),
-                    create_new_project: t('create_new_project'),
-                    create_new_project_description: t(
-                      'create_new_project_description'
-                    ),
-                    project_name: t('project_name'),
-                    create_project: t('create_project'),
-                  }}
-                />
-
-                {!isCreateMode && localCalendarEvents && (
-                  <TaskInstancesSection
-                    wsId={effectiveTaskWsId}
-                    taskId={task?.id}
-                    scheduledEvents={localCalendarEvents}
-                    onLockToggle={handleLockToggle}
-                    isLocking={lockingEventId}
-                  />
-                )}
-
-                {!disabled && !isCreateMode && task && (
-                  <TaskActivitySection
-                    wsId={effectiveTaskWsId}
-                    taskId={task.id}
-                    boardId={boardId}
-                    currentTask={{
-                      id: task.id,
-                      name: formState.name || task.name || '',
-                      description: formState.description,
-                      priority: formState.priority,
-                      start_date: formState.startDate?.toISOString() || null,
-                      end_date: formState.endDate?.toISOString() || null,
-                      estimation_points: formState.estimationPoints ?? null,
-                      list_id: formState.selectedListId || task.list_id || '',
-                      list_name:
-                        availableLists?.find(
-                          (l) => l.id === formState.selectedListId
-                        )?.name || null,
-                      completed: !!task.completed_at,
-                      assignees: formState.selectedAssignees.map((a) => ({
-                        id: a.id,
-                        user_id: a.id,
-                      })),
-                      labels: formState.selectedLabels.map((l) => ({
-                        id: l.id,
-                      })),
-                      projects: formState.selectedProjects.map((p) => ({
-                        id: p.id,
-                      })),
-                    }}
-                    revertDisabled={true}
-                  />
-                )}
+                <div
+                  ref={setScrollContainer}
+                  className="relative flex min-h-0 flex-1 flex-col overflow-y-auto"
+                >
+                  <div className="flex flex-col">
+                    <TaskNameInput
+                      name={formState.name}
+                      isCreateMode={isCreateMode}
+                      titleInputRef={titleInputRef}
+                      editorRef={editorRef}
+                      lastCursorPositionRef={lastCursorPositionRef}
+                      targetEditorCursorRef={targetEditorCursorRef}
+                      setName={setTaskName}
+                      updateName={updateName}
+                      flushNameUpdate={flushNameUpdate}
+                      disabled={taskTitleDisabled}
+                    />
+
+                    {smartSuggestionsButton && (
+                      <div className="flex justify-end px-4 pb-2 md:px-8">
+                        {smartSuggestionsButton}
+                      </div>
+                    )}
+
+                    {!disabled && renderTaskPropertiesSection()}
+
+                    {taskHydrationNotice}
+
+                    {smartSuggestionsPanel && (
+                      <div className="px-4 pb-3 md:px-8">
+                        {smartSuggestionsPanel}
+                      </div>
+                    )}
+
+                    {!taskControlsDisabled && !isCreateMode && (
+                      <PersonalOverridesSection
+                        taskId={task?.id}
+                        isCreateMode={isCreateMode}
+                        boardConfig={boardConfig}
+                        onUpdate={onUpdate}
+                      />
+                    )}
+
+                    {!taskControlsDisabled &&
+                      !draftId &&
+                      !(isCreateMode && saveAsDraft) && (
+                        <TaskRelationshipsProperties
+                          wsId={effectiveTaskWsId}
+                          taskId={task?.id}
+                          boardId={boardId}
+                          listId={task?.list_id}
+                          isCreateMode={isCreateMode}
+                          initialActiveTab={
+                            seededPendingRelationships.initialActiveTab
+                          }
+                          initialDependencySubTab={
+                            seededPendingRelationships.initialDependencySubTab
+                          }
+                          parentTask={parentTask}
+                          childTasks={childTasks}
+                          blockingTasks={blockingTasks}
+                          blockedByTasks={blockedByTasks}
+                          relatedTasks={relatedTasks}
+                          isLoading={dependenciesLoading}
+                          onSetParent={setParentTask}
+                          onRemoveParent={() => setParentTask(null)}
+                          onAddBlockingTask={addBlockingTask}
+                          onRemoveBlockingTask={removeBlockingTask}
+                          onAddBlockedByTask={addBlockedByTask}
+                          onRemoveBlockedByTask={removeBlockedByTask}
+                          onAddRelatedTask={addRelatedTask}
+                          onRemoveRelatedTask={removeRelatedTask}
+                          onNavigateToTask={async (taskId) => {
+                            if (onNavigateToTask)
+                              await onNavigateToTask(taskId);
+                          }}
+                          onAddSubtask={isCreateMode ? undefined : onAddSubtask}
+                          onAddParentTask={
+                            isCreateMode ? undefined : onAddParentTask
+                          }
+                          onAddBlockingTaskDialog={
+                            isCreateMode ? undefined : onAddBlockingTask
+                          }
+                          onAddBlockedByTaskDialog={
+                            isCreateMode ? undefined : onAddBlockedByTask
+                          }
+                          onAddRelatedTaskDialog={
+                            isCreateMode ? undefined : onAddRelatedTask
+                          }
+                          onAddExistingAsSubtask={addChildTask}
+                          isSaving={!!savingRelationship}
+                          savingTaskId={savingRelationship}
+                          disabled={taskControlsDisabled}
+                        />
+                      )}
+
+                    <TaskDescriptionEditor
+                      description={formState.description}
+                      setDescription={formState.setDescription}
+                      isOpen={isOpen}
+                      isCreateMode={isCreateMode}
+                      collaborationMode={effectiveCollaborationMode}
+                      realtimeEnabled={effectiveRealtimeEnabled}
+                      isYjsSyncing={isYjsSyncing}
+                      wsId={effectiveTaskWsId}
+                      boardId={boardId}
+                      taskId={task?.id}
+                      availableLists={availableLists}
+                      queryClient={queryClient}
+                      editorRef={editorRef}
+                      richTextEditorRef={richTextEditorRef}
+                      titleInputRef={titleInputRef}
+                      lastCursorPositionRef={lastCursorPositionRef}
+                      targetEditorCursorRef={targetEditorCursorRef}
+                      flushEditorPendingRef={flushEditorPendingRef}
+                      yjsDoc={doc}
+                      yjsProvider={provider ?? undefined}
+                      collaborationUser={
+                        user
+                          ? {
+                              id: user.id || '',
+                              name: userDisplayName,
+                              color: userColor || '',
+                            }
+                          : null
+                      }
+                      onImageUpload={imageUploadHandler}
+                      onEditorReady={handleEditorReady}
+                      onConvertToTask={handleConvertToTask}
+                      onDescriptionStorageLengthChange={
+                        handleDescriptionStorageLengthChange
+                      }
+                      descriptionStorageLength={descriptionStorageLength}
+                      descriptionPercentLeft={descriptionPercentLeft}
+                      descriptionLimit={MAX_TASK_DESCRIPTION_LENGTH}
+                      isDescriptionOverLimit={isDescriptionOverLimit}
+                      disabled={taskControlsDisabled}
+                      mentionTranslations={{
+                        delete_task: t('delete_task'),
+                        delete_task_confirmation: (name: string) =>
+                          t('delete_task_confirmation', { name }),
+                        cancel: t('cancel'),
+                        deleting: t('deleting'),
+                        set_custom_due_date: t('set_custom_due_date'),
+                        custom_due_date_description: t(
+                          'custom_due_date_description'
+                        ),
+                        remove_due_date: t('remove_due_date'),
+                        create_new_label: t('create_new_label'),
+                        create_new_label_description: t(
+                          'create_new_label_description'
+                        ),
+                        label_name: t('label_name'),
+                        color: t('color'),
+                        preview: t('preview'),
+                        creating: t('creating'),
+                        create_label: t('create_label'),
+                        create_new_project: t('create_new_project'),
+                        create_new_project_description: t(
+                          'create_new_project_description'
+                        ),
+                        project_name: t('project_name'),
+                        create_project: t('create_project'),
+                      }}
+                    />
+
+                    {!isCreateMode && localCalendarEvents && (
+                      <TaskInstancesSection
+                        wsId={effectiveTaskWsId}
+                        taskId={task?.id}
+                        scheduledEvents={localCalendarEvents}
+                        onLockToggle={handleLockToggle}
+                        isLocking={lockingEventId}
+                      />
+                    )}
+
+                    {!disabled && !isCreateMode && task && (
+                      <TaskActivitySection
+                        wsId={effectiveTaskWsId}
+                        taskId={task.id}
+                        boardId={boardId}
+                        currentTask={{
+                          id: task.id,
+                          name: formState.name || task.name || '',
+                          description: formState.description,
+                          priority: formState.priority,
+                          start_date:
+                            formState.startDate?.toISOString() || null,
+                          end_date: formState.endDate?.toISOString() || null,
+                          estimation_points: formState.estimationPoints ?? null,
+                          list_id:
+                            formState.selectedListId || task.list_id || '',
+                          list_name:
+                            availableLists?.find(
+                              (l) => l.id === formState.selectedListId
+                            )?.name || null,
+                          completed: !!task.completed_at,
+                          assignees: formState.selectedAssignees.map((a) => ({
+                            id: a.id,
+                            user_id: a.id,
+                          })),
+                          labels: formState.selectedLabels.map((l) => ({
+                            id: l.id,
+                          })),
+                          projects: formState.selectedProjects.map((p) => ({
+                            id: p.id,
+                          })),
+                        }}
+                        revertDisabled={true}
+                      />
+                    )}
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-
-          <MobileFloatingSaveButton
-            isCreateMode={isCreateMode}
-            collaborationMode={collaborationMode}
-            isLoading={isLoading}
-            canSave={canSave && !isDescriptionOverLimit}
-            handleSave={handleSave}
-            disabled={disabled}
-          />
+
+              <MobileFloatingSaveButton
+                isCreateMode={isCreateMode}
+                collaborationMode={effectiveCollaborationMode}
+                isLoading={isLoading}
+                canSave={
+                  canSave && !isDescriptionOverLimit && !taskControlsDisabled
+                }
+                handleSave={handleSave}
+                disabled={taskControlsDisabled}
+              />
+            </>
+          )}
         </DialogContent>
       </Dialog>