@tuturuuu/ui 0.10.0 → 0.11.0

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

@@ -11,10 +11,12 @@ import {
   uploadWorkspaceTaskFile,
 } from '@tuturuuu/internal-api';
 import type { WorkspaceTaskSuggestionTask } from '@tuturuuu/internal-api/tasks';
+import { getWorkspaceTaskHistory } 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 { SUPABASE_PROVIDER_SYNC_ORIGIN } from '@tuturuuu/ui/hooks/supabase-provider';
 import { useYjsCollaboration } from '@tuturuuu/ui/hooks/use-yjs-collaboration';
 import { toast } from '@tuturuuu/ui/sonner';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
@@ -30,8 +32,9 @@ import {
 } from '@tuturuuu/utils/yjs-helper';
 import dayjs from 'dayjs';
 import { usePathname } from 'next/navigation';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import * as Y from 'yjs';
 import { BoardEstimationConfigDialog } from '../boards/boardId/task-dialogs/BoardEstimationConfigDialog';
 import { TaskNewLabelDialog } from '../boards/boardId/task-dialogs/TaskNewLabelDialog';
 import { TaskNewProjectDialog } from '../boards/boardId/task-dialogs/TaskNewProjectDialog';
@@ -64,7 +67,14 @@ import {
 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';
-import { fetchWorkspaceTaskDescription } from './task-edit-dialog/hooks/task-api';
+import {
+  buildRecoverableTaskDescriptionVersions,
+  type RecoverableTaskDescriptionVersion,
+} from './task-edit-dialog/description-versions';
+import {
+  fetchWorkspaceTaskDescription,
+  updateWorkspaceTaskDescription,
+} from './task-edit-dialog/hooks/task-api';
 import { useEditorCommands } from './task-edit-dialog/hooks/use-editor-commands';
 import { useSuggestionMenus } from './task-edit-dialog/hooks/use-suggestion-menus';
 import { useTaskChangeDetection } from './task-edit-dialog/hooks/use-task-change-detection';
@@ -85,6 +95,8 @@ import { useTaskYjsSync } from './task-edit-dialog/hooks/use-task-yjs-sync';
 import { PersonalOverridesSection } from './task-edit-dialog/personal-overrides-section';
 import { TaskActivitySection } from './task-edit-dialog/task-activity-section';
 import { TaskDeleteDialog } from './task-edit-dialog/task-delete-dialog';
+import { TaskDescriptionRestoreBanner } from './task-edit-dialog/task-description-restore-banner';
+import { TaskDescriptionVersionRestoreDialog } from './task-edit-dialog/task-description-version-restore-dialog';
 import { TaskInstancesSection } from './task-edit-dialog/task-instances-section';
 import { TaskPropertiesSection } from './task-edit-dialog/task-properties-section';
 import { TaskRelationshipsProperties } from './task-edit-dialog/task-relationships-properties';
@@ -104,16 +116,22 @@ import {
 } from './task-edit-dialog/user-display';
 import {
   broadcastTaskDescriptionUpsert,
+  canPersistTaskDescriptionSnapshot,
   clearDraft,
+  createTaskDescriptionPersistenceGuardState,
   getDescriptionContent,
   getDraftStorageKey,
   getTaskDescriptionPercentLeft,
   getTaskDescriptionPreviewText,
   getTaskDescriptionStorageLength,
+  normalizeTaskDescriptionSnapshot,
+  recordTaskDescriptionEditorSnapshot,
   saveAndVerifyYjsDescriptionToDatabase,
   saveYjsDescriptionToDatabase,
-  serializeTaskDescriptionContent,
+  serializeTaskDescriptionPersistenceSnapshot,
   shouldPreserveNativeContextMenu,
+  type TaskDescriptionPersistenceGuardState,
+  updateTaskDescriptionCaches,
 } from './task-edit-dialog/utils';
 import {
   resolveInlineTaskTargetList,
@@ -125,6 +143,11 @@ import { UnsavedChangesWarningDialog } from './unsaved-changes-warning-dialog';
 
 type AssigneeMemberSource = 'workspace' | 'board' | 'workspace-and-board';
 
+const EMPTY_TASK_DESCRIPTION_DOC: JSONContent = {
+  type: 'doc',
+  content: [{ type: 'paragraph' }],
+};
+
 export {
   type DialogHeaderInfo,
   getTaskDialogHeaderInfo,
@@ -216,10 +239,12 @@ export function TaskEditDialog({
   const isCreateMode = mode === 'create';
   const effectiveTaskWsId = !isCreateMode ? (taskWsId ?? wsId) : wsId;
   const pathname = usePathname();
+  const locale = useLocale();
   const queryClient = useQueryClient();
   const t = useTranslations('common');
   const rootT = useTranslations();
   const dialogT = useTranslations('ws-task-boards.dialog');
+  const historyT = useTranslations('tasks.history');
   const { registerCloseRequestHandler } = useTaskDialogContext();
 
   // Access workspace tier for tier-aware collaboration settings (null outside the provider)
@@ -290,7 +315,18 @@ export function TaskEditDialog({
   const handleConvertToTaskRef = useRef<(() => Promise<void>) | null>(null);
   const descriptionRef = useRef<JSONContent | null>(formState.description);
   const persistedDescriptionRef = useRef<string | null>(null);
+  const descriptionPersistenceGuardRef =
+    useRef<TaskDescriptionPersistenceGuardState>(
+      createTaskDescriptionPersistenceGuardState({
+        persistedDescription: null,
+      })
+    );
   const taskRealtimeBroadcastRef = useRef<BoardBroadcastFn | null>(null);
+  const [hasHydratedYjsState, setHasHydratedYjsState] = useState(false);
+  const [showDescriptionVersionsDialog, setShowDescriptionVersionsDialog] =
+    useState(false);
+  const [restoringDescriptionVersionId, setRestoringDescriptionVersionId] =
+    useState<string | null>(null);
 
   useEffect(() => {
     descriptionRef.current = formState.description;
@@ -367,6 +403,54 @@ export function TaskEditDialog({
     refetchOnReconnect: false,
   });
 
+  const persistedTaskDescriptionSnapshot = useMemo(
+    () =>
+      serializeTaskDescriptionPersistenceSnapshot(
+        getDescriptionContent(task?.description)
+      ) ?? null,
+    [task?.description]
+  );
+
+  useEffect(() => {
+    if (!isOpen || isCreateMode) {
+      persistedDescriptionRef.current = null;
+      descriptionPersistenceGuardRef.current =
+        createTaskDescriptionPersistenceGuardState({
+          persistedDescription: null,
+        });
+      return;
+    }
+
+    persistedDescriptionRef.current = persistedTaskDescriptionSnapshot;
+    descriptionPersistenceGuardRef.current =
+      createTaskDescriptionPersistenceGuardState({
+        persistedDescription: persistedTaskDescriptionSnapshot,
+        trustPersistedDescription: !effectiveRealtimeEnabled,
+      });
+  }, [
+    effectiveRealtimeEnabled,
+    isOpen,
+    isCreateMode,
+    persistedTaskDescriptionSnapshot,
+  ]);
+
+  const canConfirmEmptyDescriptionSnapshot =
+    !effectiveRealtimeEnabled || hasHydratedYjsState;
+
+  const recordDescriptionSnapshot = useCallback(
+    (nextDescription: JSONContent | null) => {
+      descriptionPersistenceGuardRef.current =
+        recordTaskDescriptionEditorSnapshot(
+          descriptionPersistenceGuardRef.current,
+          nextDescription,
+          {
+            canConfirmEmptySnapshot: canConfirmEmptyDescriptionSnapshot,
+          }
+        );
+    },
+    [canConfirmEmptyDescriptionSnapshot]
+  );
+
   const loadTaskDescriptionState = useCallback(async () => {
     if (!task?.id) return null;
     const response = await fetchWorkspaceTaskDescription(
@@ -393,7 +477,9 @@ export function TaskEditDialog({
         return false;
       }
 
-      const serializedDescription = serializeTaskDescriptionContent(content);
+      content = normalizeTaskDescriptionSnapshot(content);
+      const serializedDescription =
+        serializeTaskDescriptionPersistenceSnapshot(content);
 
       if (
         serializedDescription &&
@@ -402,6 +488,15 @@ export function TaskEditDialog({
         return false;
       }
 
+      if (
+        !canPersistTaskDescriptionSnapshot({
+          currentSerializedDescription: serializedDescription,
+          guardState: descriptionPersistenceGuardRef.current,
+        })
+      ) {
+        return false;
+      }
+
       const didPersist = await saveYjsDescriptionToDatabase({
         wsId: effectiveTaskWsId,
         taskId: task.id,
@@ -415,6 +510,11 @@ export function TaskEditDialog({
       if (!didPersist) return false;
 
       persistedDescriptionRef.current = serializedDescription;
+      descriptionPersistenceGuardRef.current =
+        createTaskDescriptionPersistenceGuardState({
+          persistedDescription: serializedDescription,
+          trustPersistedDescription: true,
+        });
 
       const broadcast =
         getActiveBroadcast() ?? taskRealtimeBroadcastRef.current;
@@ -444,8 +544,6 @@ export function TaskEditDialog({
     saveDocumentState: saveTaskDescriptionState,
   });
 
-  const [hasHydratedYjsState, setHasHydratedYjsState] = useState(false);
-
   useEffect(() => {
     if (!isOpen || isCreateMode || !effectiveRealtimeEnabled || !task?.id) {
       setHasHydratedYjsState(false);
@@ -475,6 +573,49 @@ export function TaskEditDialog({
     synced,
   ]);
 
+  const { data: descriptionHistoryData } = useQuery({
+    queryKey: ['task-history', effectiveTaskWsId, task?.id, 'description'],
+    queryFn: async () => {
+      if (!task?.id) return null;
+
+      return getWorkspaceTaskHistory(effectiveTaskWsId, task.id, {
+        limit: 100,
+        changeType: 'field_updated',
+        fieldName: 'description',
+      });
+    },
+    enabled:
+      isOpen &&
+      !isCreateMode &&
+      !taskControlsDisabled &&
+      Boolean(effectiveTaskWsId) &&
+      Boolean(task?.id),
+    staleTime: 30 * 1000,
+  });
+
+  const recoverableDescriptionVersions = useMemo(
+    () =>
+      buildRecoverableTaskDescriptionVersions(
+        descriptionHistoryData?.history ?? []
+      ),
+    [descriptionHistoryData?.history]
+  );
+
+  const currentSerializedDescription = useMemo(
+    () =>
+      serializeTaskDescriptionPersistenceSnapshot(formState.description) ??
+      null,
+    [formState.description]
+  );
+
+  const latestRestorableDescriptionVersion = useMemo(() => {
+    const latestVersion = recoverableDescriptionVersions[0] ?? null;
+    if (!latestVersion) return null;
+    return latestVersion.description === currentSerializedDescription
+      ? null
+      : latestVersion;
+  }, [currentSerializedDescription, recoverableDescriptionVersions]);
+
   // Update user when props change
   useEffect(() => {
     if (propsCurrentUser) {
@@ -784,34 +925,45 @@ export function TaskEditDialog({
   });
 
   // Change detection
-  const { hasUnsavedChanges, canSave, parseDescription } =
-    useTaskChangeDetection({
-      task,
-      name: formState.name,
-      description: formState.description,
-      priority: formState.priority,
-      startDate: formState.startDate,
-      endDate: formState.endDate,
-      selectedListId: formState.selectedListId,
-      estimationPoints: formState.estimationPoints,
-      selectedLabels: formState.selectedLabels,
-      selectedAssignees: formState.selectedAssignees,
-      isCreateMode,
-      isLoading: isLoading || taskControlsDisabled,
-      collaborationMode: effectiveCollaborationMode,
-      draftId,
-    });
+  const { hasUnsavedChanges, canSave } = useTaskChangeDetection({
+    task,
+    name: formState.name,
+    description: formState.description,
+    priority: formState.priority,
+    startDate: formState.startDate,
+    endDate: formState.endDate,
+    selectedListId: formState.selectedListId,
+    estimationPoints: formState.estimationPoints,
+    selectedLabels: formState.selectedLabels,
+    selectedAssignees: formState.selectedAssignees,
+    isCreateMode,
+    isLoading: isLoading || taskControlsDisabled,
+    collaborationMode: effectiveCollaborationMode,
+    draftId,
+  });
 
   useEffect(() => {
-    if (!isOpen || isCreateMode) {
-      persistedDescriptionRef.current = null;
+    if (!isOpen || isCreateMode) return;
+    if (effectiveRealtimeEnabled && !hasHydratedYjsState) return;
+    if (
+      serializeTaskDescriptionPersistenceSnapshot(formState.description) ===
+      null
+    ) {
       return;
     }
 
-    persistedDescriptionRef.current =
-      serializeTaskDescriptionContent(parseDescription(task?.description)) ??
-      null;
-  }, [isOpen, isCreateMode, parseDescription, task?.description]);
+    descriptionPersistenceGuardRef.current =
+      recordTaskDescriptionEditorSnapshot(
+        descriptionPersistenceGuardRef.current,
+        formState.description
+      );
+  }, [
+    effectiveRealtimeEnabled,
+    formState.description,
+    hasHydratedYjsState,
+    isOpen,
+    isCreateMode,
+  ]);
 
   // Realtime sync for task fields and relations. Description sync remains Yjs-only.
   const { broadcast: taskRealtimeBroadcast } = useTaskRealtimeSync({
@@ -1028,6 +1180,135 @@ export function TaskEditDialog({
     );
   }, []);
 
+  const applyRestoredDescriptionToOpenEditor = useCallback(
+    ({
+      content,
+      yjsState,
+    }: {
+      content: JSONContent | null;
+      yjsState: number[] | null;
+    }) => {
+      const nextContent = content ?? EMPTY_TASK_DESCRIPTION_DOC;
+
+      const nextYjsState =
+        yjsState && yjsState.length > 0
+          ? Uint8Array.from(yjsState)
+          : doc && editorInstance?.schema
+            ? convertJsonContentToYjsState(nextContent, editorInstance.schema)
+            : null;
+
+      if (doc && nextYjsState) {
+        const syncOrigin = provider ?? SUPABASE_PROVIDER_SYNC_ORIGIN;
+        doc.transact(() => {
+          const fragment = doc.getXmlFragment('prosemirror');
+          if (fragment.length > 0) {
+            fragment.delete(0, fragment.length);
+          }
+        }, syncOrigin);
+        Y.applyUpdate(doc, nextYjsState, syncOrigin);
+        return;
+      }
+
+      editorInstance?.commands.setContent(nextContent, {
+        emitUpdate: false,
+      });
+    },
+    [doc, editorInstance, provider]
+  );
+
+  const handleRestoreDescriptionVersion = useCallback(
+    async (version: RecoverableTaskDescriptionVersion) => {
+      if (!task?.id) return;
+
+      setRestoringDescriptionVersionId(version.id);
+
+      try {
+        const response = await updateWorkspaceTaskDescription(
+          effectiveTaskWsId,
+          task.id,
+          { description: version.description }
+        );
+        const restoredDescription = response.description ?? version.description;
+        const restoredContent = normalizeTaskDescriptionSnapshot(
+          getDescriptionContent(restoredDescription)
+        );
+        const serializedRestoredDescription =
+          serializeTaskDescriptionPersistenceSnapshot(restoredContent) ?? null;
+
+        applyRestoredDescriptionToOpenEditor({
+          content: restoredContent,
+          yjsState: response.description_yjs_state,
+        });
+        formState.setDescription(restoredContent);
+        setDescriptionStorageLength(
+          getTaskDescriptionStorageLength(restoredContent)
+        );
+        persistedDescriptionRef.current = serializedRestoredDescription;
+        descriptionPersistenceGuardRef.current =
+          createTaskDescriptionPersistenceGuardState({
+            persistedDescription: serializedRestoredDescription,
+            trustPersistedDescription: true,
+          });
+        setHasHydratedYjsState(true);
+
+        updateTaskDescriptionCaches({
+          taskId: task.id,
+          descriptionString: serializedRestoredDescription,
+          boardId,
+          queryClient,
+        });
+
+        await Promise.all([
+          queryClient.invalidateQueries({
+            queryKey: ['task-history', effectiveTaskWsId, task.id],
+          }),
+          queryClient.invalidateQueries({
+            queryKey: ['task', task.id],
+          }),
+          queryClient.invalidateQueries({
+            queryKey: ['task-snapshot', effectiveTaskWsId, task.id],
+          }),
+        ]);
+
+        const broadcast =
+          getActiveBroadcast() ?? taskRealtimeBroadcastRef.current;
+        broadcastTaskDescriptionUpsert({
+          taskId: task.id,
+          descriptionString: serializedRestoredDescription,
+          broadcast: broadcast ?? undefined,
+        });
+
+        onUpdate();
+        setShowDescriptionVersionsDialog(false);
+        toast.success(
+          historyT('description_restore_success', {
+            defaultValue: 'Description restored',
+          })
+        );
+      } catch (error) {
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : historyT('description_restore_failed', {
+                defaultValue: 'Failed to restore description',
+              })
+        );
+      } finally {
+        setRestoringDescriptionVersionId(null);
+      }
+    },
+    [
+      applyRestoredDescriptionToOpenEditor,
+      boardId,
+      effectiveTaskWsId,
+      formState.setDescription,
+      historyT,
+      onUpdate,
+      queryClient,
+      task?.id,
+    ]
+  );
+
   const isDescriptionOverLimit =
     descriptionStorageLength > MAX_TASK_DESCRIPTION_LENGTH;
   const descriptionPercentLeft = getTaskDescriptionPercentLeft(
@@ -1393,7 +1674,8 @@ export function TaskEditDialog({
       return createWorkspaceTaskSuggestions(effectiveTaskWsId, {
         boardId,
         prompt,
-        description: serializeTaskDescriptionContent(currentDescription),
+        description:
+          serializeTaskDescriptionPersistenceSnapshot(currentDescription),
         currentListId: formState.selectedListId || undefined,
         clientTimezone:
           Intl.DateTimeFormat().resolvedOptions().timeZone || undefined,
@@ -1690,9 +1972,11 @@ export function TaskEditDialog({
 
     closeBlockedByOverflowRef.current = false;
 
-    const currentContent = flushEditorPendingRef.current();
+    const currentContent = normalizeTaskDescriptionSnapshot(
+      flushEditorPendingRef.current()
+    );
     const currentSerializedDescription =
-      serializeTaskDescriptionContent(currentContent) ?? null;
+      serializeTaskDescriptionPersistenceSnapshot(currentContent) ?? null;
 
     if (
       currentSerializedDescription &&
@@ -1709,6 +1993,15 @@ export function TaskEditDialog({
       return true;
     }
 
+    if (
+      !canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription,
+        guardState: descriptionPersistenceGuardRef.current,
+      })
+    ) {
+      return false;
+    }
+
     const yjsState =
       currentContent && editorInstance?.schema
         ? Array.from(
@@ -1728,6 +2021,11 @@ export function TaskEditDialog({
 
     if (didPersist) {
       persistedDescriptionRef.current = currentSerializedDescription;
+      descriptionPersistenceGuardRef.current =
+        createTaskDescriptionPersistenceGuardState({
+          persistedDescription: currentSerializedDescription,
+          trustPersistedDescription: true,
+        });
     }
 
     return didPersist;
@@ -1745,9 +2043,11 @@ export function TaskEditDialog({
       return false;
     }
 
-    const currentContent = flushEditorPendingRef.current();
+    const currentContent = normalizeTaskDescriptionSnapshot(
+      flushEditorPendingRef.current()
+    );
     const currentSerializedDescription =
-      serializeTaskDescriptionContent(currentContent) ?? null;
+      serializeTaskDescriptionPersistenceSnapshot(currentContent) ?? null;
 
     if (
       currentSerializedDescription &&
@@ -2521,6 +2821,30 @@ export function TaskEditDialog({
                         />
                       )}
 
+                    {!taskControlsDisabled && !isCreateMode && (
+                      <TaskDescriptionRestoreBanner
+                        isRestoring={Boolean(restoringDescriptionVersionId)}
+                        latestVersion={latestRestorableDescriptionVersion}
+                        onRestoreLatest={() => {
+                          if (latestRestorableDescriptionVersion) {
+                            void handleRestoreDescriptionVersion(
+                              latestRestorableDescriptionVersion
+                            );
+                          }
+                        }}
+                        onViewVersions={() =>
+                          setShowDescriptionVersionsDialog(true)
+                        }
+                        t={
+                          historyT as (
+                            key: string,
+                            options?: { count?: number; defaultValue?: string }
+                          ) => string
+                        }
+                        versionCount={recoverableDescriptionVersions.length}
+                      />
+                    )}
+
                     <TaskDescriptionEditor
                       description={formState.description}
                       setDescription={formState.setDescription}
@@ -2554,6 +2878,7 @@ export function TaskEditDialog({
                       onImageUpload={imageUploadHandler}
                       onEditorReady={handleEditorReady}
                       onConvertToTask={handleConvertToTask}
+                      onDescriptionSnapshotChange={recordDescriptionSnapshot}
                       onDescriptionStorageLengthChange={
                         handleDescriptionStorageLengthChange
                       }
@@ -2633,7 +2958,13 @@ export function TaskEditDialog({
                             id: p.id,
                           })),
                         }}
+                        onRestoreDescriptionVersion={
+                          handleRestoreDescriptionVersion
+                        }
                         revertDisabled={true}
+                        restoringDescriptionVersionId={
+                          restoringDescriptionVersionId
+                        }
                       />
                     )}
                   </div>
@@ -2655,6 +2986,22 @@ export function TaskEditDialog({
         </DialogContent>
       </Dialog>
 
+      <TaskDescriptionVersionRestoreDialog
+        currentDescription={currentSerializedDescription}
+        isOpen={showDescriptionVersionsDialog}
+        locale={locale}
+        onClose={() => setShowDescriptionVersionsDialog(false)}
+        onRestoreVersion={handleRestoreDescriptionVersion}
+        restoringVersionId={restoringDescriptionVersionId}
+        t={
+          historyT as (
+            key: string,
+            options?: { count?: number; defaultValue?: string }
+          ) => string
+        }
+        versions={recoverableDescriptionVersions}
+      />
+
       <TaskDeleteDialog
         open={showDeleteConfirm}
         onOpenChange={setShowDeleteConfirm}