@tuturuuu/ui 0.10.0 → 0.11.0

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

@@ -0,0 +1,83 @@
+'use client';
+
+import { AlertTriangle, History, Loader2, RotateCcw } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import type { RecoverableTaskDescriptionVersion } from './description-versions';
+
+interface TaskDescriptionRestoreBannerProps {
+  latestVersion: RecoverableTaskDescriptionVersion | null;
+  versionCount: number;
+  isRestoring: boolean;
+  onRestoreLatest: () => void;
+  onViewVersions: () => void;
+  t: (
+    key: string,
+    options?: { count?: number; defaultValue?: string }
+  ) => string;
+}
+
+export function TaskDescriptionRestoreBanner({
+  latestVersion,
+  versionCount,
+  isRestoring,
+  onRestoreLatest,
+  onViewVersions,
+  t,
+}: TaskDescriptionRestoreBannerProps) {
+  if (!latestVersion) return null;
+
+  return (
+    <div className="mx-4 mb-3 rounded-md border border-dynamic-orange/30 bg-dynamic-orange/5 p-3 md:mx-8">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 gap-2">
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-dynamic-orange" />
+          <div className="min-w-0 space-y-1">
+            <p className="font-medium text-sm">
+              {t('description_restore_banner_title', {
+                defaultValue: 'A tracked description version is available',
+              })}
+            </p>
+            <p className="text-muted-foreground text-xs">
+              {t('description_restore_banner_description', {
+                count: versionCount,
+                defaultValue:
+                  'Current content differs from the latest tracked version. Restore it or compare all tracked versions.',
+              })}
+            </p>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          <Button
+            className="h-8 gap-1.5 px-2.5 text-xs"
+            disabled={isRestoring}
+            onClick={onRestoreLatest}
+            size="sm"
+            type="button"
+            variant="default"
+          >
+            {isRestoring ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <RotateCcw className="h-3.5 w-3.5" />
+            )}
+            {t('restore_latest_tracked', {
+              defaultValue: 'Restore latest tracked',
+            })}
+          </Button>
+          <Button
+            className="h-8 gap-1.5 px-2.5 text-xs"
+            onClick={onViewVersions}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            <History className="h-3.5 w-3.5" />
+            {t('view_description_versions', {
+              defaultValue: 'View versions',
+            })}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+import '@testing-library/jest-dom/vitest';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { RecoverableTaskDescriptionVersion } from './description-versions';
+import { TaskDescriptionRestoreBanner } from './task-description-restore-banner';
+import { TaskDescriptionVersionRestoreDialog } from './task-description-version-restore-dialog';
+
+vi.mock('./description-diff-viewer', () => ({
+  DescriptionDiffViewer: ({ trigger }: { trigger?: ReactNode }) =>
+    trigger ?? <button type="button">compare</button>,
+}));
+
+const t = (_key: string, options?: { count?: number; defaultValue?: string }) =>
+  options?.defaultValue ?? _key;
+
+const makeVersion = (
+  overrides: Partial<RecoverableTaskDescriptionVersion> = {}
+): RecoverableTaskDescriptionVersion => ({
+  id: 'history-1:new_value',
+  historyId: 'history-1',
+  changedAt: '2026-06-27T00:00:00.000Z',
+  source: 'new_value',
+  reason: 'tracked',
+  description:
+    '{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Tracked description"}]}]}',
+  content: {
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [{ type: 'text', text: 'Tracked description' }],
+      },
+    ],
+  },
+  previewText: 'Tracked description',
+  user: { id: 'user-1', name: 'User' },
+  ...overrides,
+});
+
+describe('task description restore UI', () => {
+  it('shows the recovery banner and wires restore/view actions', () => {
+    const onRestoreLatest = vi.fn();
+    const onViewVersions = vi.fn();
+
+    render(
+      <TaskDescriptionRestoreBanner
+        isRestoring={false}
+        latestVersion={makeVersion()}
+        onRestoreLatest={onRestoreLatest}
+        onViewVersions={onViewVersions}
+        t={t}
+        versionCount={1}
+      />
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /restore latest tracked/i })
+    );
+    fireEvent.click(screen.getByRole('button', { name: /view versions/i }));
+
+    expect(onRestoreLatest).toHaveBeenCalledTimes(1);
+    expect(onViewVersions).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not show the recovery banner without a newer tracked version', () => {
+    const { container } = render(
+      <TaskDescriptionRestoreBanner
+        isRestoring={false}
+        latestVersion={null}
+        onRestoreLatest={vi.fn()}
+        onViewVersions={vi.fn()}
+        t={t}
+        versionCount={0}
+      />
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('shows an empty version picker state when history has no recoverable content', () => {
+    render(
+      <TaskDescriptionVersionRestoreDialog
+        currentDescription={null}
+        isOpen
+        onClose={vi.fn()}
+        onRestoreVersion={vi.fn()}
+        t={t}
+        versions={[]}
+      />
+    );
+
+    expect(
+      screen.getByText(/no restorable description versions were found/i)
+    ).toBeInTheDocument();
+  });
+
+  it('restores a selected version from the version picker', () => {
+    const onRestoreVersion = vi.fn();
+    const version = makeVersion();
+
+    render(
+      <TaskDescriptionVersionRestoreDialog
+        currentDescription={null}
+        isOpen
+        onClose={vi.fn()}
+        onRestoreVersion={onRestoreVersion}
+        t={t}
+        versions={[version]}
+      />
+    );
+
+    expect(screen.getByText('Tracked description')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /^restore$/i }));
+
+    expect(onRestoreVersion).toHaveBeenCalledWith(version);
+  });
+});

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

@@ -0,0 +1,180 @@
+'use client';
+
+import { Clock, Eye, 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 { DescriptionDiffViewer } from './description-diff-viewer';
+import type { RecoverableTaskDescriptionVersion } from './description-versions';
+
+interface TaskDescriptionVersionRestoreDialogProps {
+  currentDescription: string | null;
+  isOpen: boolean;
+  locale?: string;
+  onClose: () => void;
+  onRestoreVersion: (
+    version: RecoverableTaskDescriptionVersion
+  ) => Promise<void> | void;
+  restoringVersionId?: string | null;
+  t: (
+    key: string,
+    options?: { count?: number; defaultValue?: string }
+  ) => string;
+  versions: RecoverableTaskDescriptionVersion[];
+}
+
+export function TaskDescriptionVersionRestoreDialog({
+  currentDescription,
+  isOpen,
+  locale = 'en',
+  onClose,
+  onRestoreVersion,
+  restoringVersionId,
+  t,
+  versions,
+}: TaskDescriptionVersionRestoreDialogProps) {
+  const dateLocale = locale === 'vi' ? vi : enUS;
+
+  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>
+          <DialogTitle>
+            {t('description_versions_title', {
+              defaultValue: 'Description versions',
+            })}
+          </DialogTitle>
+          <DialogDescription>
+            {t('description_versions_description', {
+              defaultValue:
+                'Compare tracked description versions and restore the one that should be current.',
+            })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <ScrollArea className="-mx-6 min-h-0 px-6">
+          <div className="space-y-3 py-4">
+            {versions.length === 0 ? (
+              <div className="rounded-md border border-dashed p-4 text-center text-muted-foreground text-sm">
+                {t('no_recoverable_description_versions', {
+                  defaultValue:
+                    'No restorable description versions were found in history.',
+                })}
+              </div>
+            ) : (
+              versions.map((version, index) => {
+                const isRestoring = restoringVersionId === version.id;
+                const time = new Date(version.changedAt);
+                const exactTime = format(time, 'PPpp', {
+                  locale: dateLocale,
+                });
+                const relativeTime = formatDistanceToNow(time, {
+                  addSuffix: true,
+                  locale: dateLocale,
+                });
+
+                return (
+                  <div
+                    className="rounded-md border bg-card p-3"
+                    key={version.id}
+                  >
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                      <div className="min-w-0 space-y-2">
+                        <div className="flex flex-wrap items-center gap-2">
+                          {index === 0 && (
+                            <Badge variant="secondary">
+                              {t('latest_version', {
+                                defaultValue: 'Latest',
+                              })}
+                            </Badge>
+                          )}
+                          {version.reason === 'before_clear' && (
+                            <Badge
+                              className="border-dynamic-orange/30 text-dynamic-orange"
+                              variant="outline"
+                            >
+                              {t('before_clear_version', {
+                                defaultValue: 'Before clear',
+                              })}
+                            </Badge>
+                          )}
+                          <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>
+                        <p className="line-clamp-2 text-sm">
+                          {version.previewText ||
+                            t('description_version_no_preview', {
+                              defaultValue: 'No text preview',
+                            })}
+                        </p>
+                        {version.user?.name && (
+                          <p className="text-muted-foreground text-xs">
+                            {t('tracked_by_user', {
+                              defaultValue: 'Tracked by',
+                            })}
+                            {` ${version.user.name}`}
+                          </p>
+                        )}
+                      </div>
+
+                      <div className="flex shrink-0 flex-wrap items-center gap-2">
+                        <DescriptionDiffViewer
+                          newValue={version.description}
+                          oldValue={currentDescription}
+                          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('compare_version', {
+                                defaultValue: 'Compare',
+                              })}
+                            </Button>
+                          }
+                        />
+                        <Button
+                          className="h-8 gap-1.5 px-2.5 text-xs"
+                          disabled={!!restoringVersionId}
+                          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" />
+                          )}
+                          {t('restore_version', {
+                            defaultValue: 'Restore',
+                          })}
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/utils.test.ts

@@ -17,12 +17,16 @@ vi.mock('./hooks/task-api', () => ({
 import {
   broadcastTaskDescriptionUpsert,
   buildTaskDescriptionUpdatePayload,
+  canPersistTaskDescriptionSnapshot,
+  createTaskDescriptionPersistenceGuardState,
   getTaskDescriptionPercentLeft,
   getTaskDescriptionPreviewText,
   getTaskDescriptionStorageLength,
+  recordTaskDescriptionEditorSnapshot,
   saveAndVerifyYjsDescriptionToDatabase,
   saveYjsDescriptionToDatabase,
   serializeTaskDescriptionContent,
+  serializeTaskDescriptionPersistenceSnapshot,
   updateTaskDescriptionCaches,
 } from './utils';
 
@@ -36,6 +40,10 @@ describe('task edit dialog utils', () => {
       },
     ],
   };
+  const emptyContent: JSONContent = {
+    type: 'doc',
+    content: [{ type: 'paragraph' }],
+  };
 
   beforeEach(() => {
     vi.resetAllMocks();
@@ -47,6 +55,98 @@ describe('task edit dialog utils', () => {
     );
   });
 
+  it('blocks untrusted empty snapshots from clearing persisted content', () => {
+    const guardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: JSON.stringify(content),
+    });
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription: null,
+        guardState,
+      })
+    ).toBe(false);
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription:
+          serializeTaskDescriptionPersistenceSnapshot(emptyContent),
+        guardState,
+      })
+    ).toBe(false);
+  });
+
+  it('allows no-op empty saves when the persisted description is already empty', () => {
+    const guardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: null,
+    });
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription: null,
+        guardState,
+      })
+    ).toBe(true);
+  });
+
+  it('allows confirmed intentional clears after observing non-empty editor content', () => {
+    const initialGuardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: JSON.stringify(content),
+    });
+
+    const nonEmptySeenState = recordTaskDescriptionEditorSnapshot(
+      initialGuardState,
+      content
+    );
+    const confirmedClearState = recordTaskDescriptionEditorSnapshot(
+      nonEmptySeenState,
+      null,
+      { canConfirmEmptySnapshot: true }
+    );
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription: null,
+        guardState: confirmedClearState,
+      })
+    ).toBe(true);
+  });
+
+  it('does not confirm empty snapshots before editor clears are trusted', () => {
+    const initialGuardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: JSON.stringify(content),
+    });
+    const nonEmptySeenState = recordTaskDescriptionEditorSnapshot(
+      initialGuardState,
+      content
+    );
+    const untrustedEmptyState = recordTaskDescriptionEditorSnapshot(
+      nonEmptySeenState,
+      null,
+      { canConfirmEmptySnapshot: false }
+    );
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription: null,
+        guardState: untrustedEmptyState,
+      })
+    ).toBe(false);
+  });
+
+  it('allows non-empty saves even when the guard has not observed hydration', () => {
+    const guardState = createTaskDescriptionPersistenceGuardState({
+      persistedDescription: JSON.stringify(content),
+    });
+
+    expect(
+      canPersistTaskDescriptionSnapshot({
+        currentSerializedDescription:
+          serializeTaskDescriptionPersistenceSnapshot(content),
+        guardState,
+      })
+    ).toBe(true);
+  });
+
   it('returns zero for empty description storage length', () => {
     expect(getTaskDescriptionStorageLength(null)).toBe(0);
   });

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

@@ -45,6 +45,115 @@ export function serializeTaskDescriptionContent(
   }
 }
 
+function hasTaskDescriptionContent(content: JSONContent | null): boolean {
+  if (!content) return false;
+
+  if (content.text && content.text.trim().length > 0) {
+    return true;
+  }
+
+  if (
+    content.type &&
+    ['image', 'imageResize', 'youtube', 'video', 'mention', 'table'].includes(
+      content.type
+    )
+  ) {
+    return true;
+  }
+
+  return content.content?.some(hasTaskDescriptionContent) ?? false;
+}
+
+function isSerializedTaskDescriptionEmpty(description: string | null): boolean {
+  if (description === null) return true;
+  if (description.trim().length === 0) return true;
+
+  try {
+    return !hasTaskDescriptionContent(JSON.parse(description) as JSONContent);
+  } catch {
+    return false;
+  }
+}
+
+export function normalizeTaskDescriptionSnapshot(
+  content: JSONContent | null
+): JSONContent | null {
+  return hasTaskDescriptionContent(content) ? content : null;
+}
+
+export function serializeTaskDescriptionPersistenceSnapshot(
+  content: JSONContent | null
+): string | null {
+  return serializeTaskDescriptionContent(
+    normalizeTaskDescriptionSnapshot(content)
+  );
+}
+
+export type TaskDescriptionPersistenceGuardState = {
+  persistedDescription: string | null;
+  hasSeenNonEmptyEditorSnapshot: boolean;
+  hasConfirmedEmptyEditorSnapshot: boolean;
+};
+
+export function createTaskDescriptionPersistenceGuardState({
+  persistedDescription,
+  trustPersistedDescription = false,
+}: {
+  persistedDescription: string | null;
+  trustPersistedDescription?: boolean;
+}): TaskDescriptionPersistenceGuardState {
+  const persistedDescriptionIsEmpty =
+    isSerializedTaskDescriptionEmpty(persistedDescription);
+
+  return {
+    persistedDescription,
+    hasSeenNonEmptyEditorSnapshot:
+      trustPersistedDescription && !persistedDescriptionIsEmpty,
+    hasConfirmedEmptyEditorSnapshot: persistedDescriptionIsEmpty,
+  };
+}
+
+export function recordTaskDescriptionEditorSnapshot(
+  state: TaskDescriptionPersistenceGuardState,
+  content: JSONContent | null,
+  options: { canConfirmEmptySnapshot?: boolean } = {}
+): TaskDescriptionPersistenceGuardState {
+  const serializedDescription =
+    serializeTaskDescriptionPersistenceSnapshot(content);
+
+  if (serializedDescription !== null) {
+    return {
+      ...state,
+      hasSeenNonEmptyEditorSnapshot: true,
+      hasConfirmedEmptyEditorSnapshot: false,
+    };
+  }
+
+  if (options.canConfirmEmptySnapshot && state.hasSeenNonEmptyEditorSnapshot) {
+    return {
+      ...state,
+      hasConfirmedEmptyEditorSnapshot: true,
+    };
+  }
+
+  return state;
+}
+
+export function canPersistTaskDescriptionSnapshot({
+  currentSerializedDescription,
+  guardState,
+}: {
+  currentSerializedDescription: string | null;
+  guardState: TaskDescriptionPersistenceGuardState;
+}): boolean {
+  if (currentSerializedDescription !== null) return true;
+  if (isSerializedTaskDescriptionEmpty(guardState.persistedDescription)) {
+    return true;
+  }
+
+  return guardState.hasConfirmedEmptyEditorSnapshot;
+}
+
 export function getTaskDescriptionStorageLength(
   content: JSONContent | null
 ): number {