@tuturuuu/ui 0.7.0 → 0.9.0

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

@@ -47,6 +47,7 @@ import { createInitialSuggestionState } from './mention-system/types';
 import { SyncWarningDialog } from './sync-warning-dialog';
 import {
   normalizeTaskDialogPresentation,
+  resolveTaskDialogOpeningPresentation,
   type TaskDialogPresentation,
 } from './task-dialog-presentation';
 import { CompactTaskDialogPanel } from './task-edit-dialog/components/compact-task-create-popover';
@@ -107,6 +108,7 @@ import {
   getDescriptionContent,
   getDraftStorageKey,
   getTaskDescriptionPercentLeft,
+  getTaskDescriptionPreviewText,
   getTaskDescriptionStorageLength,
   saveAndVerifyYjsDescriptionToDatabase,
   saveYjsDescriptionToDatabase,
@@ -494,6 +496,23 @@ export function TaskEditDialog({
     taskSearchQuery,
     sharedContext,
   });
+  const currentList = availableLists?.find(
+    (list) => list.id === formState.selectedListId
+  );
+  const normalizedDefaultPresentation = useMemo(
+    () => normalizeTaskDialogPresentation(defaultPresentation),
+    [defaultPresentation]
+  );
+  const openingPresentation = useMemo(
+    () =>
+      resolveTaskDialogOpeningPresentation({
+        defaultPresentation: normalizedDefaultPresentation,
+        draftId,
+        mode,
+        selectedListStatus: currentList?.status,
+      }),
+    [currentList?.status, draftId, mode, normalizedDefaultPresentation]
+  );
 
   // Update browser tab title
   useEffect(() => {
@@ -552,13 +571,8 @@ export function TaskEditDialog({
     useState(false);
   const [showShareDialog, setShowShareDialog] = useState(false);
   const [saveAsDraft, setSaveAsDraft] = useState(draftModeEnabled);
-  const normalizedDefaultPresentation = useMemo(
-    () => normalizeTaskDialogPresentation(defaultPresentation),
-    [defaultPresentation]
-  );
-  const [presentation, setPresentation] = useState<TaskDialogPresentation>(
-    normalizedDefaultPresentation
-  );
+  const [presentation, setPresentation] =
+    useState<TaskDialogPresentation>(openingPresentation);
   const [smartSuggestions, setSmartSuggestions] = useState<
     WorkspaceTaskSuggestionTask[]
   >([]);
@@ -849,9 +863,6 @@ export function TaskEditDialog({
     onUpdate,
   });
 
-  const currentList = availableLists?.find(
-    (list) => list.id === formState.selectedListId
-  );
   const doneList = availableLists?.find(
     (list) => list.status === 'done' && !list.deleted
   );
@@ -1946,7 +1957,7 @@ export function TaskEditDialog({
     previousOpenRef.current = isOpen;
 
     if (!isOpen) {
-      setPresentation(normalizedDefaultPresentation);
+      setPresentation(openingPresentation);
       setSmartSuggestions([]);
       setSelectedSmartSuggestionIds([]);
       setSmartSuggestionError(null);
@@ -1957,9 +1968,14 @@ export function TaskEditDialog({
     }
 
     if (justOpened) {
-      setPresentation(draftId ? 'fullscreen' : normalizedDefaultPresentation);
+      setPresentation(openingPresentation);
+      return;
+    }
+
+    if (!isCreateMode && currentList?.status === 'documents') {
+      setPresentation('fullscreen');
     }
-  }, [isOpen, draftId, normalizedDefaultPresentation]);
+  }, [currentList?.status, isCreateMode, isOpen, openingPresentation]);
 
   // Track whether the title input is scrolled out of view
   useEffect(() => {
@@ -2023,6 +2039,15 @@ export function TaskEditDialog({
   ]);
 
   const showCompactDialog = presentation === 'compact' && !draftId;
+  const compactDescriptionPreview = useMemo(() => {
+    if (isCreateMode) return null;
+
+    const previewText = getTaskDescriptionPreviewText(
+      formState.description
+    ).trim();
+
+    return previewText || null;
+  }, [formState.description, isCreateMode]);
   const taskHydrationNotice = taskLoadError ? (
     <div
       className="mx-4 mb-2 flex items-center justify-between gap-3 rounded-md border border-dynamic-red/30 bg-dynamic-red/10 px-3 py-2 text-dynamic-red text-sm md:mx-8"
@@ -2233,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-hidden 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'
+              ? 'w-[min(calc(100vw-2rem),30rem)] max-w-[30rem] gap-0 overflow-visible rounded-lg border p-0 shadow-xl'
+              : undefined
           }
           onContextMenu={(e) => {
             if (shouldPreserveNativeContextMenu(e.target)) {
@@ -2271,6 +2297,8 @@ export function TaskEditDialog({
               iconBgClass={compactHeaderInfo.iconBgClass}
               iconRingClass={compactHeaderInfo.iconRingClass}
               showHeaderTitle={isCreateMode}
+              descriptionPreview={compactDescriptionPreview}
+              descriptionPreviewLabel={dialogT('open_fullscreen')}
               titleInput={
                 <TaskNameInput
                   name={formState.name}
@@ -2311,6 +2339,7 @@ export function TaskEditDialog({
               }
               onClose={handleAttemptClose}
               onFullscreen={() => setPresentation('fullscreen')}
+              onDescriptionPreviewClick={() => setPresentation('fullscreen')}
               onSave={
                 isCreateMode && !taskControlsDisabled ? handleSave : undefined
               }

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';