@tuturuuu/ui 0.10.0 → 0.11.1

package/src/components/ui/tu-do/shared/task-edit-dialog/description-versions.ts

@@ -0,0 +1,210 @@
+import type { JSONContent } from '@tiptap/react';
+import {
+  getDescriptionContent,
+  getTaskDescriptionPreviewText,
+  normalizeTaskDescriptionSnapshot,
+  serializeTaskDescriptionPersistenceSnapshot,
+} from './utils';
+
+export interface TaskDescriptionHistoryUser {
+  id: string;
+  name: string;
+  avatar_url?: string | null;
+}
+
+export interface TaskDescriptionHistoryEntryLike {
+  id: string;
+  changed_at: string;
+  change_type?: string | null;
+  field_name?: string | null;
+  old_value?: unknown;
+  new_value?: unknown;
+  user?: TaskDescriptionHistoryUser | null;
+}
+
+export type TaskDescriptionVersionSource = 'new_value' | 'old_value';
+export type TaskDescriptionVersionReason = 'before_clear' | 'tracked';
+
+export interface RecoverableTaskDescriptionVersion {
+  id: string;
+  historyId: string;
+  changedAt: string;
+  source: TaskDescriptionVersionSource;
+  reason: TaskDescriptionVersionReason;
+  description: string;
+  content: JSONContent;
+  previewText: string;
+  user: TaskDescriptionHistoryUser | null;
+}
+
+const LEGACY_DESCRIPTION_PLACEHOLDERS = new Set(['has_content']);
+
+function isLegacyDescriptionPlaceholder(value: string) {
+  return LEGACY_DESCRIPTION_PLACEHOLDERS.has(value.trim().toLowerCase());
+}
+
+function hasObjectShape(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function textToDescriptionContent(text: string): JSONContent {
+  return {
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [{ type: 'text', text }],
+      },
+    ],
+  };
+}
+
+function coerceDescriptionValueToContent(value: unknown): JSONContent | null {
+  if (value === null || value === undefined) return null;
+
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (!trimmed || isLegacyDescriptionPlaceholder(trimmed)) return null;
+
+    try {
+      const parsed = JSON.parse(trimmed) as unknown;
+
+      if (typeof parsed === 'string') {
+        const parsedText = parsed.trim();
+        if (!parsedText || isLegacyDescriptionPlaceholder(parsedText)) {
+          return null;
+        }
+        return textToDescriptionContent(parsed);
+      }
+
+      if (hasObjectShape(parsed)) {
+        return getDescriptionContent(parsed);
+      }
+
+      return null;
+    } catch {
+      return textToDescriptionContent(value);
+    }
+  }
+
+  if (hasObjectShape(value)) {
+    return getDescriptionContent(value);
+  }
+
+  return null;
+}
+
+export function extractRecoverableTaskDescriptionValue(value: unknown): {
+  content: JSONContent;
+  description: string;
+  previewText: string;
+} | null {
+  const content = normalizeTaskDescriptionSnapshot(
+    coerceDescriptionValueToContent(value)
+  );
+  if (!content) return null;
+
+  const description = serializeTaskDescriptionPersistenceSnapshot(content);
+  if (!description) return null;
+
+  return {
+    content,
+    description,
+    previewText: getTaskDescriptionPreviewText(content).trim(),
+  };
+}
+
+export function isTaskDescriptionHistoryEntry(
+  entry: TaskDescriptionHistoryEntryLike
+) {
+  return (
+    entry.change_type === 'field_updated' && entry.field_name === 'description'
+  );
+}
+
+export function isTaskDescriptionHistoryValueEmpty(value: unknown) {
+  return extractRecoverableTaskDescriptionValue(value) === null;
+}
+
+function addDescriptionVersion({
+  entry,
+  reason,
+  seenDescriptions,
+  source,
+  value,
+  versions,
+}: {
+  entry: TaskDescriptionHistoryEntryLike;
+  reason: TaskDescriptionVersionReason;
+  seenDescriptions: Set<string>;
+  source: TaskDescriptionVersionSource;
+  value: unknown;
+  versions: RecoverableTaskDescriptionVersion[];
+}) {
+  const recoverableValue = extractRecoverableTaskDescriptionValue(value);
+  if (!recoverableValue) return;
+  if (seenDescriptions.has(recoverableValue.description)) return;
+
+  seenDescriptions.add(recoverableValue.description);
+  versions.push({
+    id: `${entry.id}:${source}`,
+    historyId: entry.id,
+    changedAt: entry.changed_at,
+    source,
+    reason,
+    description: recoverableValue.description,
+    content: recoverableValue.content,
+    previewText: recoverableValue.previewText,
+    user: entry.user ?? null,
+  });
+}
+
+export function buildRecoverableTaskDescriptionVersions(
+  entries: TaskDescriptionHistoryEntryLike[]
+) {
+  const versions: RecoverableTaskDescriptionVersion[] = [];
+  const seenDescriptions = new Set<string>();
+  const sortedEntries = [...entries]
+    .filter(isTaskDescriptionHistoryEntry)
+    .sort(
+      (a, b) =>
+        new Date(b.changed_at).getTime() - new Date(a.changed_at).getTime()
+    );
+
+  for (const entry of sortedEntries) {
+    const oldIsRecoverable =
+      extractRecoverableTaskDescriptionValue(entry.old_value) !== null;
+    const newIsEmpty = isTaskDescriptionHistoryValueEmpty(entry.new_value);
+
+    if (oldIsRecoverable && newIsEmpty) {
+      addDescriptionVersion({
+        entry,
+        reason: 'before_clear',
+        seenDescriptions,
+        source: 'old_value',
+        value: entry.old_value,
+        versions,
+      });
+      continue;
+    }
+
+    addDescriptionVersion({
+      entry,
+      reason: 'tracked',
+      seenDescriptions,
+      source: 'new_value',
+      value: entry.new_value,
+      versions,
+    });
+    addDescriptionVersion({
+      entry,
+      reason: 'tracked',
+      seenDescriptions,
+      source: 'old_value',
+      value: entry.old_value,
+      versions,
+    });
+  }
+
+  return versions;
+}

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

@@ -22,6 +22,7 @@ import {
   UserMinus,
   UserPlus,
 } from '@tuturuuu/icons';
+import { getWorkspaceTaskHistory } from '@tuturuuu/internal-api/tasks';
 import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
@@ -34,6 +35,9 @@ import { useLocale, useTranslations } from 'next-intl';
 import { useState } from 'react';
 import type { EstimationType } from '../estimation-mapping';
 import { mapEstimationPoints } from '../estimation-mapping';
+import type { RecoverableTaskDescriptionVersion } from './description-versions';
+import { isTaskDescriptionHistoryEntry } from './description-versions';
+import { TaskDescriptionChangeDialog } from './task-description-change-dialog';
 import { TaskSnapshotDialog } from './task-snapshot-dialog';
 
 /** Represents a task history entry from the API */
@@ -77,6 +81,11 @@ interface TaskActivitySectionProps {
   estimationType?: EstimationType;
   /** When true, disables the revert functionality (feature not stable) */
   revertDisabled?: boolean;
+  /** Restores a tracked description version through the Yjs-safe description path. */
+  onRestoreDescriptionVersion?: (
+    version: RecoverableTaskDescriptionVersion
+  ) => Promise<void> | void;
+  restoringDescriptionVersionId?: string | null;
 }
 
 // Task history section for showing activity logs and snapshots
@@ -91,6 +100,8 @@ export function TaskActivitySection({
   onTaskUpdate,
   estimationType,
   revertDisabled = false,
+  onRestoreDescriptionVersion,
+  restoringDescriptionVersionId,
 }: TaskActivitySectionProps) {
   const t = useTranslations('tasks-history');
   const snapshotT = useTranslations('tasks.history');
@@ -100,6 +111,8 @@ export function TaskActivitySection({
   const [snapshotEntry, setSnapshotEntry] = useState<TaskHistoryEntry | null>(
     null
   );
+  const [descriptionChangeEntry, setDescriptionChangeEntry] =
+    useState<TaskHistoryEntry | null>(null);
   const dateLocale = locale === 'vi' ? vi : enUS;
 
   // Fetch task history
@@ -107,12 +120,9 @@ export function TaskActivitySection({
     queryKey: ['task-history', wsId, taskId],
     queryFn: async () => {
       if (!taskId) return null;
-      const res = await fetch(
-        `/api/v1/workspaces/${wsId}/tasks/${taskId}/history?limit=50`,
-        { cache: 'no-store' }
-      );
-      if (!res.ok) throw new Error('Failed to fetch task history');
-      return res.json() as Promise<{
+      return getWorkspaceTaskHistory(wsId, taskId, {
+        limit: 50,
+      }) as Promise<{
         history: TaskHistoryEntry[];
         count: number;
       }>;
@@ -179,7 +189,21 @@ export function TaskActivitySection({
                     }
                     dateLocale={dateLocale}
                     showActions={!!currentTask && !!boardId}
-                    onViewSnapshot={() => setSnapshotEntry(entry)}
+                    onViewSnapshot={() => {
+                      if (isTaskDescriptionHistoryEntry(entry)) {
+                        setDescriptionChangeEntry(entry);
+                        return;
+                      }
+
+                      setSnapshotEntry(entry);
+                    }}
+                    viewLabel={
+                      isTaskDescriptionHistoryEntry(entry)
+                        ? t('view_description_change', {
+                            defaultValue: 'View description change',
+                          })
+                        : t('view_snapshot')
+                    }
                     estimationType={estimationType}
                   />
                 ))}
@@ -230,6 +254,28 @@ export function TaskActivitySection({
           revertDisabled={revertDisabled}
         />
       )}
+
+      {descriptionChangeEntry && (
+        <TaskDescriptionChangeDialog
+          canRestore={Boolean(onRestoreDescriptionVersion)}
+          entry={descriptionChangeEntry}
+          isOpen={!!descriptionChangeEntry}
+          locale={locale}
+          onClose={() => setDescriptionChangeEntry(null)}
+          onRestoreVersion={async (version) => {
+            await onRestoreDescriptionVersion?.(version);
+            setDescriptionChangeEntry(null);
+            onTaskUpdate?.();
+          }}
+          restoringVersionId={restoringDescriptionVersionId}
+          t={
+            snapshotT as (
+              key: string,
+              options?: { count?: number; defaultValue?: string }
+            ) => string
+          }
+        />
+      )}
     </div>
   );
 }
@@ -240,6 +286,7 @@ interface ActivityEntryProps {
   dateLocale: typeof enUS | typeof vi;
   showActions?: boolean;
   onViewSnapshot?: () => void;
+  viewLabel?: string;
   estimationType?: EstimationType;
 }
 
@@ -249,6 +296,7 @@ function ActivityEntry({
   dateLocale,
   showActions = false,
   onViewSnapshot,
+  viewLabel,
   estimationType,
 }: ActivityEntryProps) {
   const { icon, color } = getChangeIcon(entry.change_type, entry.field_name);
@@ -338,7 +386,7 @@ function ActivityEntry({
               </Button>
             </TooltipTrigger>
             <TooltipContent side="top" className="text-xs">
-              {t('view_snapshot')}
+              {viewLabel ?? t('view_snapshot')}
             </TooltipContent>
           </Tooltip>
         </div>

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

@@ -0,0 +1,63 @@
+import '@testing-library/jest-dom/vitest';
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TaskDescriptionChangeDialog } from './task-description-change-dialog';
+
+vi.mock('./description-diff-viewer', () => ({
+  DescriptionDiffViewer: () => <button type="button">view-diff</button>,
+}));
+
+const t = (key: string, options?: { defaultValue?: string }) =>
+  options?.defaultValue ?? key;
+
+const makeDoc = (text: string) =>
+  JSON.stringify({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [{ type: 'text', text }],
+      },
+    ],
+  });
+
+describe('TaskDescriptionChangeDialog', () => {
+  it('offers restoring the previous recoverable description from a wipe row', async () => {
+    const onRestoreVersion = vi.fn();
+
+    render(
+      <TaskDescriptionChangeDialog
+        entry={{
+          id: 'history-1',
+          task_id: 'task-1',
+          changed_by: 'user-1',
+          changed_at: '2026-06-27T00:00:00.000Z',
+          change_type: 'field_updated',
+          field_name: 'description',
+          old_value: makeDoc('Recover me'),
+          new_value: null,
+          metadata: {},
+          user: { id: 'user-1', name: 'User' },
+        }}
+        isOpen
+        onClose={vi.fn()}
+        onRestoreVersion={onRestoreVersion}
+        t={t}
+      />
+    );
+
+    expect(screen.getByText('Recover me')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /restore previous/i }));
+
+    await waitFor(() => {
+      expect(onRestoreVersion).toHaveBeenCalledWith(
+        expect.objectContaining({
+          previewText: 'Recover me',
+          source: 'old_value',
+        })
+      );
+    });
+  });
+});

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

@@ -0,0 +1,218 @@
+'use client';
+
+import { Clock, Eye, FileText, Loader2, RotateCcw } from '@tuturuuu/icons';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { ScrollArea } from '@tuturuuu/ui/scroll-area';
+import { format, formatDistanceToNow } from 'date-fns';
+import { enUS, vi } from 'date-fns/locale';
+import { useMemo } from 'react';
+import { DescriptionDiffViewer } from './description-diff-viewer';
+import {
+  buildRecoverableTaskDescriptionVersions,
+  extractRecoverableTaskDescriptionValue,
+  type RecoverableTaskDescriptionVersion,
+} from './description-versions';
+import type { TaskHistoryEntry } from './task-activity-section';
+
+interface TaskDescriptionChangeDialogProps {
+  canRestore?: boolean;
+  entry: TaskHistoryEntry;
+  isOpen: boolean;
+  locale?: string;
+  onClose: () => void;
+  onRestoreVersion: (
+    version: RecoverableTaskDescriptionVersion
+  ) => Promise<void> | void;
+  restoringVersionId?: string | null;
+  t: (
+    key: string,
+    options?: { count?: number; defaultValue?: string }
+  ) => string;
+}
+
+export function TaskDescriptionChangeDialog({
+  canRestore = true,
+  entry,
+  isOpen,
+  locale = 'en',
+  onClose,
+  onRestoreVersion,
+  restoringVersionId,
+  t,
+}: TaskDescriptionChangeDialogProps) {
+  const dateLocale = locale === 'vi' ? vi : enUS;
+  const versions = useMemo(
+    () => buildRecoverableTaskDescriptionVersions([entry]),
+    [entry]
+  );
+  const oldValue = useMemo(
+    () => extractRecoverableTaskDescriptionValue(entry.old_value),
+    [entry.old_value]
+  );
+  const newValue = useMemo(
+    () => extractRecoverableTaskDescriptionValue(entry.new_value),
+    [entry.new_value]
+  );
+  const time = new Date(entry.changed_at);
+  const exactTime = format(time, 'PPpp', { locale: dateLocale });
+  const relativeTime = formatDistanceToNow(time, {
+    addSuffix: true,
+    locale: dateLocale,
+  });
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="grid max-h-[85vh] w-full max-w-2xl grid-rows-[auto_1fr] overflow-hidden md:max-w-3xl">
+        <DialogHeader>
+          <div className="flex items-center gap-2">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-dynamic-purple/10">
+              <FileText className="h-4 w-4 text-dynamic-purple" />
+            </div>
+            <div>
+              <DialogTitle>
+                {t('description_change_title', {
+                  defaultValue: 'Description change',
+                })}
+              </DialogTitle>
+              <DialogDescription className="text-xs">
+                <span title={exactTime}>{relativeTime}</span>
+                {' - '}
+                {entry.user?.name ||
+                  t('unknown_user', { defaultValue: 'Unknown user' })}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <ScrollArea className="-mx-6 min-h-0 px-6">
+          <div className="space-y-4 py-4">
+            <div className="grid gap-3 md:grid-cols-2">
+              <DescriptionValuePreview
+                emptyLabel={t('empty_description_value', {
+                  defaultValue: 'Empty or not restorable',
+                })}
+                label={t('previous_description_value', {
+                  defaultValue: 'Previous',
+                })}
+                preview={oldValue?.previewText}
+              />
+              <DescriptionValuePreview
+                emptyLabel={t('empty_description_value', {
+                  defaultValue: 'Empty or not restorable',
+                })}
+                label={t('resulting_description_value', {
+                  defaultValue: 'Resulting',
+                })}
+                preview={newValue?.previewText}
+              />
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2">
+              <DescriptionDiffViewer
+                newValue={entry.new_value}
+                oldValue={entry.old_value}
+                t={t}
+                trigger={
+                  <Button
+                    className="h-8 gap-1.5 px-2.5 text-xs"
+                    size="sm"
+                    type="button"
+                    variant="outline"
+                  >
+                    <Eye className="h-3.5 w-3.5" />
+                    {t('view_description_diff', {
+                      defaultValue: 'View diff',
+                    })}
+                  </Button>
+                }
+              />
+              <span
+                className="inline-flex items-center gap-1 text-muted-foreground text-xs"
+                title={exactTime}
+              >
+                <Clock className="h-3.5 w-3.5" />
+                {relativeTime}
+              </span>
+            </div>
+
+            {canRestore && (
+              <div className="space-y-2">
+                <p className="font-medium text-sm">
+                  {t('restore_from_change', {
+                    defaultValue: 'Restore from this change',
+                  })}
+                </p>
+                {versions.length === 0 ? (
+                  <div className="rounded-md border border-dashed p-3 text-muted-foreground text-sm">
+                    {t('no_recoverable_description_versions', {
+                      defaultValue:
+                        'No restorable description versions were found in history.',
+                    })}
+                  </div>
+                ) : (
+                  <div className="flex flex-wrap gap-2">
+                    {versions.map((version) => {
+                      const isRestoring = restoringVersionId === version.id;
+                      return (
+                        <Button
+                          className="h-8 gap-1.5 px-2.5 text-xs"
+                          disabled={!!restoringVersionId}
+                          key={version.id}
+                          onClick={() => onRestoreVersion(version)}
+                          size="sm"
+                          type="button"
+                        >
+                          {isRestoring ? (
+                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                          ) : (
+                            <RotateCcw className="h-3.5 w-3.5" />
+                          )}
+                          {version.source === 'old_value'
+                            ? t('restore_previous_description', {
+                                defaultValue: 'Restore previous',
+                              })
+                            : t('restore_resulting_description', {
+                                defaultValue: 'Restore resulting',
+                              })}
+                        </Button>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function DescriptionValuePreview({
+  emptyLabel,
+  label,
+  preview,
+}: {
+  emptyLabel: string;
+  label: string;
+  preview?: string;
+}) {
+  return (
+    <div className="rounded-md border bg-muted/20 p-3">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <Badge variant="secondary">{label}</Badge>
+      </div>
+      <p className="line-clamp-4 whitespace-pre-wrap text-sm">
+        {preview || <span className="text-muted-foreground">{emptyLabel}</span>}
+      </p>
+    </div>
+  );
+}