@tuturuuu/ui 0.10.0 → 0.11.1

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-properties-section.test.tsx

@@ -4,8 +4,9 @@
 
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
+import type { ComponentProps } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { TaskPropertiesSection } from './task-properties-section';
 
@@ -25,7 +26,9 @@ vi.mock('@tuturuuu/ui/hooks/use-calendar-preferences', () => ({
   }),
 }));
 
-function renderTaskPropertiesSection() {
+function renderTaskPropertiesSection(
+  overrides: Partial<ComponentProps<typeof TaskPropertiesSection>> = {}
+) {
   const props = {
     wsId: 'ws-1',
     boardId: 'board-1',
@@ -72,7 +75,13 @@ function renderTaskPropertiesSection() {
         created_at: '2026-01-01T00:00:00.000Z',
       },
     ],
-    taskProjects: [],
+    taskProjects: [
+      {
+        id: 'project-1',
+        name: 'Launch',
+        status: 'active',
+      },
+    ],
     workspaceMembers: [
       {
         id: 'user-1',
@@ -105,6 +114,7 @@ function renderTaskPropertiesSection() {
     disabled: false,
     isDraftMode: false,
     variant: 'compact' as const,
+    ...overrides,
   };
 
   const queryClient = new QueryClient({
@@ -124,13 +134,18 @@ function renderTaskPropertiesSection() {
 }
 
 describe('TaskPropertiesSection', () => {
-  it('keeps only one property popover open at a time', () => {
+  it('keeps only one property popover open at a time', async () => {
     renderTaskPropertiesSection();
 
     fireEvent.click(screen.getByLabelText('common.priority'));
     expect(screen.getByText('tasks.priority_critical')).toBeInTheDocument();
 
     fireEvent.click(screen.getByLabelText('common.labels'));
+    await waitFor(() =>
+      expect(
+        screen.queryByText('tasks.priority_critical')
+      ).not.toBeInTheDocument()
+    );
     expect(
       screen.queryByText('tasks.priority_critical')
     ).not.toBeInTheDocument();
@@ -139,6 +154,11 @@ describe('TaskPropertiesSection', () => {
     ).toBeInTheDocument();
 
     fireEvent.click(screen.getByLabelText('common.list_name_to_do'));
+    await waitFor(() =>
+      expect(
+        screen.queryByPlaceholderText('common.search_labels')
+      ).not.toBeInTheDocument()
+    );
     expect(
       screen.queryByPlaceholderText('common.search_labels')
     ).not.toBeInTheDocument();
@@ -147,4 +167,137 @@ describe('TaskPropertiesSection', () => {
       'true'
     );
   });
+
+  it('switches from priority to dates without closing the target popover', async () => {
+    renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.priority'));
+    expect(screen.getByText('tasks.priority_critical')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText('ws-task-boards.dialog.dates'));
+
+    await waitFor(() =>
+      expect(
+        screen.getByText('ws-task-boards.dialog.start_date')
+      ).toBeInTheDocument()
+    );
+    expect(
+      screen.getByText('ws-task-boards.dialog.due_date')
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText('tasks.priority_critical')
+    ).not.toBeInTheDocument();
+  });
+
+  it.each([
+    {
+      triggerLabel: 'common.labels',
+      targetPlaceholder: 'common.search_labels',
+    },
+    {
+      triggerLabel: 'common.projects',
+      targetPlaceholder: 'common.search_projects',
+    },
+    {
+      triggerLabel: 'common.assignees',
+      targetPlaceholder: 'common.search_members',
+    },
+  ])('switches from priority to $triggerLabel and keeps the target popover open', async ({
+    targetPlaceholder,
+    triggerLabel,
+  }) => {
+    renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.priority'));
+    expect(screen.getByText('tasks.priority_critical')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText(triggerLabel));
+
+    await waitFor(() =>
+      expect(screen.getByPlaceholderText(targetPlaceholder)).toBeInTheDocument()
+    );
+    expect(
+      screen.queryByText('tasks.priority_critical')
+    ).not.toBeInTheDocument();
+  });
+
+  it('closes the priority popover after selecting a priority', () => {
+    const props = renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.priority'));
+    fireEvent.click(screen.getByText('tasks.priority_high'));
+
+    expect(props.onPriorityChange).toHaveBeenCalledWith('high');
+    expect(
+      screen.queryByText('tasks.priority_critical')
+    ).not.toBeInTheDocument();
+  });
+
+  it('keeps labels popover open after toggling a label', () => {
+    const props = renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.labels'));
+    fireEvent.click(screen.getByText('Bug'));
+
+    expect(props.onLabelToggle).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'label-1' })
+    );
+    expect(
+      screen.getByPlaceholderText('common.search_labels')
+    ).toBeInTheDocument();
+  });
+
+  it('keeps projects popover open after toggling a project', () => {
+    const props = renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.projects'));
+    fireEvent.click(screen.getByText('Launch'));
+
+    expect(props.onProjectToggle).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'project-1' })
+    );
+    expect(
+      screen.getByPlaceholderText('common.search_projects')
+    ).toBeInTheDocument();
+  });
+
+  it('keeps assignees popover open after toggling an assignee', () => {
+    const props = renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.assignees'));
+    fireEvent.click(screen.getByText('Taylor'));
+
+    expect(props.onAssigneeToggle).toHaveBeenCalledWith(
+      expect.objectContaining({ user_id: 'user-1' })
+    );
+    expect(
+      screen.getByPlaceholderText('common.search_members')
+    ).toBeInTheDocument();
+  });
+
+  it('closes the active popover when clicking outside', async () => {
+    renderTaskPropertiesSection();
+
+    fireEvent.click(screen.getByLabelText('common.labels'));
+    await waitFor(() =>
+      expect(
+        screen.getByPlaceholderText('common.search_labels')
+      ).toBeInTheDocument()
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    fireEvent.pointerDown(document.body, {
+      button: 0,
+      ctrlKey: false,
+      pointerType: 'mouse',
+    });
+    fireEvent.mouseDown(document.body, { button: 0, ctrlKey: false });
+    fireEvent.click(document.body);
+
+    await waitFor(() =>
+      expect(
+        screen.queryByPlaceholderText('common.search_labels')
+      ).not.toBeInTheDocument()
+    );
+  });
 });