@tuturuuu/ui 0.9.0 → 0.11.0

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>
+  );
+}

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/task-dialog-actions.tsx

@@ -48,6 +48,8 @@ interface TaskDialogActionsProps {
   onOpenShareDialog?: () => void;
   disabled?: boolean;
   controlsDisabled?: boolean;
+  moreMenuOpen?: boolean;
+  onMoreMenuOpenChange?: (open: boolean) => void;
 }
 
 export function TaskDialogActions({
@@ -66,10 +68,15 @@ export function TaskDialogActions({
   onOpenShareDialog,
   disabled = false,
   controlsDisabled = false,
+  moreMenuOpen,
+  onMoreMenuOpenChange,
 }: TaskDialogActionsProps) {
   const t = useTranslations();
   const tasksHref = useTasksHref();
-  const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
+  const [uncontrolledMoreMenuOpen, setUncontrolledMoreMenuOpen] =
+    useState(false);
+  const isMoreMenuOpen = moreMenuOpen ?? uncontrolledMoreMenuOpen;
+  const setIsMoreMenuOpen = onMoreMenuOpenChange ?? setUncontrolledMoreMenuOpen;
 
   // Determine if we should show the back button (create mode with a pending relationship)
   const showBackButton = isCreateMode && onNavigateBack && navigateBackTaskName;