@tuturuuu/ui 0.8.0 → 0.9.0

package/src/components/ui/tu-do/shared/task-edit-dialog/selective-revert-panel.test.tsx

@@ -0,0 +1,91 @@
+import '@testing-library/jest-dom/vitest';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { SelectiveRevertPanel } from './selective-revert-panel';
+
+vi.mock('./description-diff-viewer', () => ({
+  DescriptionDiffViewer: () => (
+    <button type="button">view-description-diff</button>
+  ),
+}));
+
+const t = (key: string, options?: { defaultValue?: string }) => {
+  const messages: Record<string, string> = {
+    changed: 'Changed',
+    'field.description': 'Description',
+    'field.name': 'Name',
+    'field.priority': 'Priority',
+    unchanged_fields: 'Unchanged fields',
+  };
+
+  return messages[key] ?? options?.defaultValue ?? key;
+};
+
+const snapshot = {
+  assignees: [],
+  completed: false,
+  description: {
+    content: [
+      {
+        content: [{ text: 'Previous description', type: 'text' }],
+        type: 'paragraph',
+      },
+    ],
+    type: 'doc',
+  },
+  end_date: null,
+  estimation_points: null,
+  id: 'task-1',
+  labels: [],
+  list_id: 'list-1',
+  list_name: 'Review',
+  name: 'Previous task name',
+  priority: 'normal' as const,
+  projects: [],
+  start_date: null,
+};
+
+const currentTask = {
+  ...snapshot,
+  description: {
+    content: [
+      {
+        content: [{ text: 'Current description', type: 'text' }],
+        type: 'paragraph',
+      },
+    ],
+    type: 'doc',
+  },
+  list_name: 'Review',
+  name: 'Current task name',
+};
+
+describe('SelectiveRevertPanel', () => {
+  it('renders changed fields first and keeps unchanged fields collapsed', () => {
+    render(
+      <SelectiveRevertPanel
+        currentTask={currentTask}
+        isReverting={false}
+        onRevert={vi.fn()}
+        snapshot={snapshot}
+        t={t}
+      />
+    );
+
+    expect(screen.getByText('Core Fields')).toBeInTheDocument();
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('view-description-diff')).toBeInTheDocument();
+
+    const unchangedButton = screen.getByRole('button', {
+      name: /Unchanged fields/i,
+    });
+    expect(unchangedButton).toBeInTheDocument();
+    expect(screen.queryByText('Priority')).not.toBeInTheDocument();
+
+    fireEvent.click(unchangedButton);
+
+    expect(screen.getByText('Priority')).toBeInTheDocument();
+  });
+});

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

@@ -1,7 +1,14 @@
 'use client';
 
-import { AlertTriangle, Loader2, RotateCcw } from '@tuturuuu/icons';
+import {
+  AlertTriangle,
+  ChevronDown,
+  ChevronRight,
+  Loader2,
+  RotateCcw,
+} from '@tuturuuu/icons';
 import { Alert, AlertDescription } from '@tuturuuu/ui/alert';
+import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
 import {
   ALL_COMPARABLE_FIELDS,
@@ -21,15 +28,49 @@ interface SelectiveRevertPanelProps {
   onRevert: (fields: RevertibleField[]) => Promise<void>;
   isReverting: boolean;
   locale?: string;
-  t?: (key: string, options?: { defaultValue?: string }) => string;
+  t?: (
+    key: string,
+    options?: { count?: number; defaultValue?: string }
+  ) => string;
   /** Estimation type for displaying points */
   estimationType?: EstimationType;
   /** When true, disables the revert functionality (feature not stable) */
   revertDisabled?: boolean;
 }
 
-const defaultT = (key: string, opts?: { defaultValue?: string }) =>
-  opts?.defaultValue || key;
+const defaultT = (
+  key: string,
+  opts?: { count?: number; defaultValue?: string }
+) => opts?.defaultValue || key;
+
+const FIELD_SECTIONS: {
+  fields: ComparableField[];
+  titleKey: string;
+  titleFallback: string;
+}[] = [
+  {
+    fields: [
+      'name',
+      'description',
+      'priority',
+      'estimation_points',
+      'list_id',
+      'completed',
+    ],
+    titleFallback: 'Core Fields',
+    titleKey: 'core_fields',
+  },
+  {
+    fields: ['start_date', 'end_date'],
+    titleFallback: 'Dates',
+    titleKey: 'dates',
+  },
+  {
+    fields: ['assignees', 'labels', 'projects'],
+    titleFallback: 'Relationships',
+    titleKey: 'relationships',
+  },
+];
 
 export function SelectiveRevertPanel({
   snapshot,
@@ -95,6 +136,31 @@ export function SelectiveRevertPanel({
 
   const hasChanges = changedFields.length > 0;
   const hasSelection = selectedFields.size > 0;
+  const changedFieldSet = useMemo(
+    () => new Set(changedFields),
+    [changedFields]
+  );
+  const unchangedFields = useMemo(
+    () => ALL_COMPARABLE_FIELDS.filter((field) => !changedFieldSet.has(field)),
+    [changedFieldSet]
+  );
+
+  const renderField = (field: ComparableField) => (
+    <FieldDiffViewer
+      key={field}
+      fieldName={field}
+      snapshotValue={fieldValues[field].snapshot}
+      currentValue={fieldValues[field].current}
+      selected={selectedFields.has(field)}
+      onSelectionChange={(selected) => handleFieldSelect(field, selected)}
+      hasChanged={changedFieldSet.has(field)}
+      locale={locale}
+      t={t}
+      snapshotListName={snapshot.list_name}
+      currentListName={currentTask.list_name}
+      estimationType={estimationType}
+    />
+  );
 
   return (
     <div className="flex flex-col gap-4">
@@ -171,78 +237,37 @@ export function SelectiveRevertPanel({
 
       {/* Field list */}
       <div className="space-y-2">
-        {/* Core fields */}
-        <FieldGroup title={t('core_fields', { defaultValue: 'Core Fields' })}>
-          {(
-            [
-              'name',
-              'description',
-              'priority',
-              'estimation_points',
-              'list_id',
-              'completed',
-            ] as ComparableField[]
-          ).map((field) => (
-            <FieldDiffViewer
-              key={field}
-              fieldName={field}
-              snapshotValue={fieldValues[field].snapshot}
-              currentValue={fieldValues[field].current}
-              selected={selectedFields.has(field)}
-              onSelectionChange={(selected) =>
-                handleFieldSelect(field, selected)
-              }
-              hasChanged={changedFields.includes(field)}
-              locale={locale}
-              t={t}
-              snapshotListName={snapshot.list_name}
-              currentListName={currentTask.list_name}
-              estimationType={estimationType}
-            />
-          ))}
-        </FieldGroup>
+        {FIELD_SECTIONS.map((section) => {
+          const sectionChangedFields = section.fields.filter((field) =>
+            changedFieldSet.has(field)
+          );
 
-        {/* Date fields */}
-        <FieldGroup title={t('dates', { defaultValue: 'Dates' })}>
-          {(['start_date', 'end_date'] as ComparableField[]).map((field) => (
-            <FieldDiffViewer
-              key={field}
-              fieldName={field}
-              snapshotValue={fieldValues[field].snapshot}
-              currentValue={fieldValues[field].current}
-              selected={selectedFields.has(field)}
-              onSelectionChange={(selected) =>
-                handleFieldSelect(field, selected)
-              }
-              hasChanged={changedFields.includes(field)}
-              locale={locale}
-              t={t}
-            />
-          ))}
-        </FieldGroup>
+          if (sectionChangedFields.length === 0) return null;
 
-        {/* Relationship fields */}
-        <FieldGroup
-          title={t('relationships', { defaultValue: 'Relationships' })}
-        >
-          {(['assignees', 'labels', 'projects'] as ComparableField[]).map(
-            (field) => (
-              <FieldDiffViewer
-                key={field}
-                fieldName={field}
-                snapshotValue={fieldValues[field].snapshot}
-                currentValue={fieldValues[field].current}
-                selected={selectedFields.has(field)}
-                onSelectionChange={(selected) =>
-                  handleFieldSelect(field, selected)
-                }
-                hasChanged={changedFields.includes(field)}
-                locale={locale}
-                t={t}
-              />
-            )
-          )}
-        </FieldGroup>
+          return (
+            <FieldGroup
+              key={section.titleKey}
+              count={sectionChangedFields.length}
+              title={t(section.titleKey, {
+                defaultValue: section.titleFallback,
+              })}
+            >
+              {sectionChangedFields.map(renderField)}
+            </FieldGroup>
+          );
+        })}
+
+        {unchangedFields.length > 0 && (
+          <FieldGroup
+            count={unchangedFields.length}
+            defaultCollapsed
+            title={t('unchanged_fields', {
+              defaultValue: 'Unchanged fields',
+            })}
+          >
+            {unchangedFields.map(renderField)}
+          </FieldGroup>
+        )}
       </div>
 
       {/* Revert button */}
@@ -271,18 +296,38 @@ export function SelectiveRevertPanel({
 }
 
 function FieldGroup({
+  count,
+  defaultCollapsed = false,
   title,
   children,
 }: {
+  count: number;
+  defaultCollapsed?: boolean;
   title: string;
   children: React.ReactNode;
 }) {
+  const [isOpen, setIsOpen] = useState(!defaultCollapsed);
+
   return (
     <div className="space-y-2">
-      <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
-        {title}
-      </h4>
-      <div className="space-y-2">{children}</div>
+      <button
+        className="flex w-full items-center gap-2 rounded-md px-1 py-1 text-left transition-colors hover:bg-muted/40"
+        onClick={() => setIsOpen((open) => !open)}
+        type="button"
+      >
+        {isOpen ? (
+          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+        )}
+        <span className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+          {title}
+        </span>
+        <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+          {count}
+        </Badge>
+      </button>
+      {isOpen && <div className="space-y-2">{children}</div>}
     </div>
   );
 }

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

@@ -93,6 +93,7 @@ export function TaskActivitySection({
   revertDisabled = false,
 }: TaskActivitySectionProps) {
   const t = useTranslations('tasks-history');
+  const snapshotT = useTranslations('tasks.history');
   const locale = useLocale();
   const [isExpanded, setIsExpanded] = useState(false);
   const [showAll, setShowAll] = useState(false);
@@ -219,7 +220,12 @@ export function TaskActivitySection({
             onTaskUpdate?.();
           }}
           locale={locale}
-          t={t as (key: string, options?: { defaultValue?: string }) => string}
+          t={
+            snapshotT as (
+              key: string,
+              options?: { count?: number; defaultValue?: string }
+            ) => string
+          }
           estimationType={estimationType}
           revertDisabled={revertDisabled}
         />

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

@@ -29,15 +29,20 @@ interface TaskSnapshotDialogProps {
   onClose: () => void;
   onRevertSuccess?: () => void;
   locale?: string;
-  t?: (key: string, options?: { defaultValue?: string }) => string;
+  t?: (
+    key: string,
+    options?: { count?: number; defaultValue?: string }
+  ) => string;
   /** Estimation type for displaying points */
   estimationType?: EstimationType;
   /** When true, disables the revert functionality (feature not stable) */
   revertDisabled?: boolean;
 }
 
-const defaultT = (key: string, opts?: { defaultValue?: string }) =>
-  opts?.defaultValue || key;
+const defaultT = (
+  key: string,
+  opts?: { count?: number; defaultValue?: string }
+) => opts?.defaultValue || key;
 
 export function TaskSnapshotDialog({
   wsId,

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

@@ -2258,10 +2258,11 @@ export function TaskEditDialog({
       <Dialog open={isOpen} onOpenChange={handleDialogOpenChange} modal={true}>
         <DialogContent
           showCloseButton={false}
+          presentation={showCompactDialog ? 'default' : 'fullscreen'}
           className={
             showCompactDialog
               ? 'w-[min(calc(100vw-2rem),30rem)] max-w-[30rem] gap-0 overflow-visible rounded-lg border p-0 shadow-xl'
-              : 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-bottom-2 data-[state=open]:slide-in-from-bottom-2 inset-0! top-0! left-0! flex h-screen max-h-screen w-screen max-w-none! translate-x-0! translate-y-0! gap-0 rounded-none! border-0 p-0'
+              : undefined
           }
           onContextMenu={(e) => {
             if (shouldPreserveNativeContextMenu(e.target)) {

package/src/components/ui/tu-do/shared/task-legacy-route-recovery.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import { Loader2 } from '@tuturuuu/icons';
 import { getWorkspaceTask } from '@tuturuuu/internal-api/tasks';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
+import { TaskBoardLoadingState } from './task-board-loading-state';
 import { buildWorkspaceTaskUrl } from './task-url';
 
 interface TaskLegacyRouteRecoveryProps {
@@ -61,12 +61,5 @@ export function TaskLegacyRouteRecovery({
     );
   }
 
-  return (
-    <div className="flex min-h-[40vh] items-center justify-center p-6">
-      <div className="flex items-center gap-3 text-muted-foreground">
-        <Loader2 className="h-5 w-5 animate-spin" />
-        <span>{t('loading')}</span>
-      </div>
-    </div>
-  );
+  return <TaskBoardLoadingState />;
 }

package/src/declarations.d.ts

@@ -1,2 +1,3 @@
 declare module '*.css';
 declare module '*.layer.css';
+declare module 'moment/locale/vi';