@tuturuuu/ui 0.9.0 → 0.11.0

package/src/components/ui/tu-do/shared/task-edit-dialog/hooks/use-task-relationships.ts

@@ -1,7 +1,5 @@
 import { type QueryClient, useQueryClient } from '@tanstack/react-query';
-import type { Task } from '@tuturuuu/types/primitives/Task';
 import { toast } from '@tuturuuu/ui/sonner';
-import { invalidateTaskCaches } from '@tuturuuu/utils/task-helper';
 import {
   type Dispatch,
   type SetStateAction,
@@ -11,9 +9,11 @@ import {
 import { getRandomNewLabelColor } from '../../../utils/taskConstants';
 import {
   type BoardBroadcastFn,
+  getActiveBoardRefresh,
   getActiveBroadcast,
   useBoardBroadcast,
 } from '../../board-broadcast-context';
+import { patchTaskInVisibleCaches } from '../../task-cache-patches';
 import type {
   WorkspaceTaskAssignee,
   WorkspaceTaskLabel,
@@ -129,6 +129,32 @@ function upsertWorkspaceLabelCaches({
   }
 }
 
+function normalizeTaskAssignees(assignees: WorkspaceTaskAssignee[]) {
+  return assignees
+    .map((assignee) => {
+      const id = assignee.user_id || assignee.id;
+      if (!id) return null;
+
+      return {
+        id,
+        display_name: assignee.display_name ?? undefined,
+        email: assignee.email ?? undefined,
+        avatar_url: assignee.avatar_url ?? undefined,
+      };
+    })
+    .filter((assignee): assignee is NonNullable<typeof assignee> =>
+      Boolean(assignee)
+    );
+}
+
+function normalizeTaskProjects(projects: WorkspaceTaskProject[]) {
+  return projects.map((project) => ({
+    id: project.id,
+    name: project.name,
+    status: project.status ?? 'unknown',
+  }));
+}
+
 export function useTaskRelationships({
   wsId,
   labelCacheWorkspaceId,
@@ -189,9 +215,18 @@ export function useTaskRelationships({
         });
 
         setSelectedLabels(nextSelectedLabels);
-        await invalidateTaskCaches(queryClient, boardId);
+        patchTaskInVisibleCaches({
+          queryClient,
+          boardId,
+          taskId,
+          updater: (task) => ({
+            ...task,
+            labels: nextSelectedLabels,
+          }),
+        });
         queryClient.invalidateQueries({ queryKey: ['task-history'] });
         broadcast?.('task:relations-changed', { taskId });
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
         onUpdate();
       } catch (error: unknown) {
         toast.error('Label update failed', {
@@ -246,30 +281,18 @@ export function useTaskRelationships({
         });
 
         setSelectedAssignees(nextSelectedAssignees);
-        queryClient.setQueryData(
-          ['tasks', boardId],
-          (old: Task[] | undefined) => {
-            if (!old) return old;
-            return old.map((task) => {
-              if (task.id !== taskId) return task;
-              const currentAssignees = task.assignees || [];
-              const newAssignees = exists
-                ? currentAssignees.filter((assignee) => assignee.id !== userId)
-                : [
-                    ...currentAssignees,
-                    {
-                      id: userId,
-                      display_name: member.display_name,
-                      email: member.email,
-                      avatar_url: member.avatar_url,
-                    },
-                  ];
-              return { ...task, assignees: newAssignees };
-            });
-          }
-        );
+        patchTaskInVisibleCaches({
+          queryClient,
+          boardId,
+          taskId,
+          updater: (task) => ({
+            ...task,
+            assignees: normalizeTaskAssignees(nextSelectedAssignees),
+          }),
+        });
         queryClient.invalidateQueries({ queryKey: ['task-history'] });
         broadcast?.('task:relations-changed', { taskId });
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
         onUpdate();
       } catch (error: unknown) {
         toast.error('Assignee update failed', {
@@ -315,22 +338,18 @@ export function useTaskRelationships({
         });
 
         setSelectedProjects(nextSelectedProjects);
-        queryClient.setQueryData(
-          ['tasks', boardId],
-          (old: Task[] | undefined) => {
-            if (!old) return old;
-            return old.map((task) => {
-              if (task.id !== taskId) return task;
-              const currentProjects = task.projects || [];
-              const newProjects = exists
-                ? currentProjects.filter((entry) => entry.id !== project.id)
-                : [...currentProjects, project];
-              return { ...task, projects: newProjects };
-            });
-          }
-        );
+        patchTaskInVisibleCaches({
+          queryClient,
+          boardId,
+          taskId,
+          updater: (task) => ({
+            ...task,
+            projects: normalizeTaskProjects(nextSelectedProjects),
+          }),
+        });
         queryClient.invalidateQueries({ queryKey: ['task-history'] });
         broadcast?.('task:relations-changed', { taskId });
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
         onUpdate();
       } catch (error: unknown) {
         toast.error('Project update failed', {
@@ -393,23 +412,17 @@ export function useTaskRelationships({
         });
 
         setSelectedLabels(nextSelectedLabels);
-        queryClient.setQueryData(
-          ['tasks', boardId],
-          (old: Task[] | undefined) => {
-            if (!old) return old;
-            return old.map((task) => {
-              if (task.id !== taskId) return task;
-              const currentLabels = task.labels || [];
-              return {
-                ...task,
-                labels: [...currentLabels, newLabel].sort((a, b) =>
-                  compareLabelsByName(a, b)
-                ),
-              };
-            });
-          }
-        );
+        patchTaskInVisibleCaches({
+          queryClient,
+          boardId,
+          taskId,
+          updater: (task) => ({
+            ...task,
+            labels: nextSelectedLabels,
+          }),
+        });
         broadcast?.('task:relations-changed', { taskId });
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
         onUpdate();
         toast.success('Label created & linked', {
           description: 'New label added and attached to this task.',
@@ -485,21 +498,17 @@ export function useTaskRelationships({
         });
 
         setSelectedProjects(nextSelectedProjects);
-        queryClient.setQueryData(
-          ['tasks', boardId],
-          (old: Task[] | undefined) => {
-            if (!old) return old;
-            return old.map((task) => {
-              if (task.id !== taskId) return task;
-              const currentProjects = task.projects || [];
-              return {
-                ...task,
-                projects: [...currentProjects, newProject],
-              };
-            });
-          }
-        );
+        patchTaskInVisibleCaches({
+          queryClient,
+          boardId,
+          taskId,
+          updater: (task) => ({
+            ...task,
+            projects: normalizeTaskProjects(nextSelectedProjects),
+          }),
+        });
         broadcast?.('task:relations-changed', { taskId });
+        getActiveBoardRefresh()?.({ invalidateTasks: false });
         onUpdate();
         toast.success('Project created & linked', {
           description: 'New project added and attached to this task.',

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

@@ -38,6 +38,8 @@ interface PersonalOverridesSectionProps {
   onUpdate?: () => void;
 }
 
+type PersonalOverridePopoverId = 'priority' | 'estimation';
+
 export function PersonalOverridesSection({
   taskId,
   isCreateMode,
@@ -51,10 +53,22 @@ export function PersonalOverridesSection({
     onUpdate
   );
   const [isExpanded, setIsExpanded] = useState(false);
-  const [isPriorityOpen, setIsPriorityOpen] = useState(false);
-  const [isEstimationOpen, setIsEstimationOpen] = useState(false);
+  const [activePopover, setActivePopover] =
+    useState<PersonalOverridePopoverId | null>(null);
   const [notes, setNotes] = useState('');
 
+  const isPopoverOpen = (popoverId: PersonalOverridePopoverId) =>
+    activePopover === popoverId;
+  const setPopoverOpen = (
+    popoverId: PersonalOverridePopoverId,
+    open: boolean
+  ) => {
+    setActivePopover((currentPopover) => {
+      if (open) return popoverId;
+      return currentPopover === popoverId ? null : currentPopover;
+    });
+  };
+
   // Don't render for new tasks
   if (isCreateMode || !taskId) return null;
 
@@ -75,7 +89,7 @@ export function PersonalOverridesSection({
 
   const handlePriorityChange = (priority: TaskPriority | null) => {
     upsert({ priority_override: priority });
-    setIsPriorityOpen(false);
+    setPopoverOpen('priority', false);
   };
 
   const handleDueDateChange = (date: Date | undefined) => {
@@ -86,7 +100,7 @@ export function PersonalOverridesSection({
 
   const handleEstimationChange = (points: number | null) => {
     upsert({ estimation_override: points });
-    setIsEstimationOpen(false);
+    setPopoverOpen('estimation', false);
   };
 
   const handleNotesBlur = () => {
@@ -112,7 +126,10 @@ export function PersonalOverridesSection({
     <div className="border-t bg-muted/20">
       <button
         type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
+        onClick={() => {
+          setIsExpanded(!isExpanded);
+          setActivePopover(null);
+        }}
         className="flex w-full items-center justify-between px-4 py-2 text-left transition-colors hover:bg-muted/40 md:px-8"
       >
         <div className="flex items-center gap-2">
@@ -167,7 +184,10 @@ export function PersonalOverridesSection({
                   <Flag className="h-4 w-4 text-dynamic-orange" />
                   {t('ws-tasks.my_priority')}
                 </Label>
-                <Popover open={isPriorityOpen} onOpenChange={setIsPriorityOpen}>
+                <Popover
+                  open={isPopoverOpen('priority')}
+                  onOpenChange={(open) => setPopoverOpen('priority', open)}
+                >
                   <PopoverTrigger asChild>
                     <Button
                       variant="outline"
@@ -255,8 +275,8 @@ export function PersonalOverridesSection({
                     {t('ws-tasks.my_estimate')}
                   </Label>
                   <Popover
-                    open={isEstimationOpen}
-                    onOpenChange={setIsEstimationOpen}
+                    open={isPopoverOpen('estimation')}
+                    onOpenChange={(open) => setPopoverOpen('estimation', open)}
                   >
                     <PopoverTrigger asChild>
                       <Button

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

@@ -25,10 +25,15 @@ export function DependenciesSection({
   onNavigateToTask,
   onAddBlockingTaskDialog,
   onAddBlockedByTaskDialog,
+  searchOpen: controlledSearchOpen,
+  onSearchOpenChange,
   disabled,
 }: DependenciesSectionProps) {
   const [subTab, setSubTab] = React.useState<DependencySubTab>(initialSubTab);
-  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [uncontrolledSearchOpen, setUncontrolledSearchOpen] =
+    React.useState(false);
+  const searchOpen = controlledSearchOpen ?? uncontrolledSearchOpen;
+  const setSearchOpen = onSearchOpenChange ?? setUncontrolledSearchOpen;
 
   const allExcludeIds = React.useMemo(() => {
     const ids = new Set<string>();
@@ -56,7 +61,10 @@ export function DependenciesSection({
         <Button
           variant={subTab === 'blocks' ? 'default' : 'outline'}
           size="sm"
-          onClick={() => setSubTab('blocks')}
+          onClick={() => {
+            setSubTab('blocks');
+            setSearchOpen(false);
+          }}
           className="h-7 text-xs"
         >
           Blocks ({blockingTasks.length})
@@ -64,7 +72,10 @@ export function DependenciesSection({
         <Button
           variant={subTab === 'blocked-by' ? 'default' : 'outline'}
           size="sm"
-          onClick={() => setSubTab('blocked-by')}
+          onClick={() => {
+            setSubTab('blocked-by');
+            setSearchOpen(false);
+          }}
           className="h-7 text-xs"
         >
           Blocked By ({blockedByTasks.length})

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

@@ -16,9 +16,14 @@ export function ParentSection({
   onRemoveParent,
   onNavigateToTask,
   onAddParentTask,
+  searchOpen: controlledSearchOpen,
+  onSearchOpenChange,
   disabled,
 }: ParentSectionProps) {
-  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [uncontrolledSearchOpen, setUncontrolledSearchOpen] =
+    React.useState(false);
+  const searchOpen = controlledSearchOpen ?? uncontrolledSearchOpen;
+  const setSearchOpen = onSearchOpenChange ?? setUncontrolledSearchOpen;
 
   const excludeIds = React.useMemo(() => {
     const ids = taskId ? [taskId, ...childTaskIds] : childTaskIds;

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

@@ -16,9 +16,14 @@ export function RelatedSection({
   onRemoveRelated,
   onNavigateToTask,
   onAddRelatedTaskDialog,
+  searchOpen: controlledSearchOpen,
+  onSearchOpenChange,
   disabled,
 }: RelatedSectionProps) {
-  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [uncontrolledSearchOpen, setUncontrolledSearchOpen] =
+    React.useState(false);
+  const searchOpen = controlledSearchOpen ?? uncontrolledSearchOpen;
+  const setSearchOpen = onSearchOpenChange ?? setUncontrolledSearchOpen;
 
   const excludeIds = React.useMemo(() => {
     const ids = taskId ? [taskId] : [];

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

@@ -16,9 +16,14 @@ export function SubtasksSection({
   onAddSubtask,
   onAddExistingAsSubtask,
   isSaving,
+  searchOpen: controlledSearchOpen,
+  onSearchOpenChange,
   disabled,
 }: SubtasksSectionProps) {
-  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [uncontrolledSearchOpen, setUncontrolledSearchOpen] =
+    React.useState(false);
+  const searchOpen = controlledSearchOpen ?? uncontrolledSearchOpen;
+  const setSearchOpen = onSearchOpenChange ?? setUncontrolledSearchOpen;
 
   const excludeIds = React.useMemo(() => {
     const ids = taskId ? [taskId] : [];

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

@@ -122,6 +122,8 @@ export interface ParentSectionProps {
   onRemoveParent: () => void;
   onNavigateToTask: (taskId: string) => void;
   onAddParentTask?: () => void; // Opens dialog to create new parent task
+  searchOpen?: boolean;
+  onSearchOpenChange?: (open: boolean) => void;
   disabled?: boolean;
 }
 
@@ -137,6 +139,8 @@ export interface SubtasksSectionProps {
   onAddSubtask?: () => void;
   onAddExistingAsSubtask?: (task: RelatedTaskInfo) => Promise<void>;
   isSaving: boolean;
+  searchOpen?: boolean;
+  onSearchOpenChange?: (open: boolean) => void;
   disabled?: boolean;
 }
 
@@ -168,6 +172,8 @@ export interface DependenciesSectionProps {
   onNavigateToTask: (taskId: string) => void;
   onAddBlockingTaskDialog?: () => void; // Opens dialog to create new blocking task
   onAddBlockedByTaskDialog?: () => void; // Opens dialog to create new blocked-by task
+  searchOpen?: boolean;
+  onSearchOpenChange?: (open: boolean) => void;
   disabled?: boolean;
 }
 
@@ -182,5 +188,7 @@ export interface RelatedSectionProps {
   onRemoveRelated: (taskId: string) => void;
   onNavigateToTask: (taskId: string) => void;
   onAddRelatedTaskDialog?: () => void; // Opens dialog to create new related task;
+  searchOpen?: boolean;
+  onSearchOpenChange?: (open: boolean) => void;
   disabled?: boolean;
 }

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

@@ -22,6 +22,7 @@ import {
   UserMinus,
   UserPlus,
 } from '@tuturuuu/icons';
+import { getWorkspaceTaskHistory } from '@tuturuuu/internal-api/tasks';
 import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
@@ -34,6 +35,9 @@ import { useLocale, useTranslations } from 'next-intl';
 import { useState } from 'react';
 import type { EstimationType } from '../estimation-mapping';
 import { mapEstimationPoints } from '../estimation-mapping';
+import type { RecoverableTaskDescriptionVersion } from './description-versions';
+import { isTaskDescriptionHistoryEntry } from './description-versions';
+import { TaskDescriptionChangeDialog } from './task-description-change-dialog';
 import { TaskSnapshotDialog } from './task-snapshot-dialog';
 
 /** Represents a task history entry from the API */
@@ -77,6 +81,11 @@ interface TaskActivitySectionProps {
   estimationType?: EstimationType;
   /** When true, disables the revert functionality (feature not stable) */
   revertDisabled?: boolean;
+  /** Restores a tracked description version through the Yjs-safe description path. */
+  onRestoreDescriptionVersion?: (
+    version: RecoverableTaskDescriptionVersion
+  ) => Promise<void> | void;
+  restoringDescriptionVersionId?: string | null;
 }
 
 // Task history section for showing activity logs and snapshots
@@ -91,6 +100,8 @@ export function TaskActivitySection({
   onTaskUpdate,
   estimationType,
   revertDisabled = false,
+  onRestoreDescriptionVersion,
+  restoringDescriptionVersionId,
 }: TaskActivitySectionProps) {
   const t = useTranslations('tasks-history');
   const snapshotT = useTranslations('tasks.history');
@@ -100,6 +111,8 @@ export function TaskActivitySection({
   const [snapshotEntry, setSnapshotEntry] = useState<TaskHistoryEntry | null>(
     null
   );
+  const [descriptionChangeEntry, setDescriptionChangeEntry] =
+    useState<TaskHistoryEntry | null>(null);
   const dateLocale = locale === 'vi' ? vi : enUS;
 
   // Fetch task history
@@ -107,12 +120,9 @@ export function TaskActivitySection({
     queryKey: ['task-history', wsId, taskId],
     queryFn: async () => {
       if (!taskId) return null;
-      const res = await fetch(
-        `/api/v1/workspaces/${wsId}/tasks/${taskId}/history?limit=50`,
-        { cache: 'no-store' }
-      );
-      if (!res.ok) throw new Error('Failed to fetch task history');
-      return res.json() as Promise<{
+      return getWorkspaceTaskHistory(wsId, taskId, {
+        limit: 50,
+      }) as Promise<{
         history: TaskHistoryEntry[];
         count: number;
       }>;
@@ -179,7 +189,21 @@ export function TaskActivitySection({
                     }
                     dateLocale={dateLocale}
                     showActions={!!currentTask && !!boardId}
-                    onViewSnapshot={() => setSnapshotEntry(entry)}
+                    onViewSnapshot={() => {
+                      if (isTaskDescriptionHistoryEntry(entry)) {
+                        setDescriptionChangeEntry(entry);
+                        return;
+                      }
+
+                      setSnapshotEntry(entry);
+                    }}
+                    viewLabel={
+                      isTaskDescriptionHistoryEntry(entry)
+                        ? t('view_description_change', {
+                            defaultValue: 'View description change',
+                          })
+                        : t('view_snapshot')
+                    }
                     estimationType={estimationType}
                   />
                 ))}
@@ -230,6 +254,28 @@ export function TaskActivitySection({
           revertDisabled={revertDisabled}
         />
       )}
+
+      {descriptionChangeEntry && (
+        <TaskDescriptionChangeDialog
+          canRestore={Boolean(onRestoreDescriptionVersion)}
+          entry={descriptionChangeEntry}
+          isOpen={!!descriptionChangeEntry}
+          locale={locale}
+          onClose={() => setDescriptionChangeEntry(null)}
+          onRestoreVersion={async (version) => {
+            await onRestoreDescriptionVersion?.(version);
+            setDescriptionChangeEntry(null);
+            onTaskUpdate?.();
+          }}
+          restoringVersionId={restoringDescriptionVersionId}
+          t={
+            snapshotT as (
+              key: string,
+              options?: { count?: number; defaultValue?: string }
+            ) => string
+          }
+        />
+      )}
     </div>
   );
 }
@@ -240,6 +286,7 @@ interface ActivityEntryProps {
   dateLocale: typeof enUS | typeof vi;
   showActions?: boolean;
   onViewSnapshot?: () => void;
+  viewLabel?: string;
   estimationType?: EstimationType;
 }
 
@@ -249,6 +296,7 @@ function ActivityEntry({
   dateLocale,
   showActions = false,
   onViewSnapshot,
+  viewLabel,
   estimationType,
 }: ActivityEntryProps) {
   const { icon, color } = getChangeIcon(entry.change_type, entry.field_name);
@@ -338,7 +386,7 @@ function ActivityEntry({
               </Button>
             </TooltipTrigger>
             <TooltipContent side="top" className="text-xs">
-              {t('view_snapshot')}
+              {viewLabel ?? t('view_snapshot')}
             </TooltipContent>
           </Tooltip>
         </div>

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

@@ -0,0 +1,63 @@
+import '@testing-library/jest-dom/vitest';
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TaskDescriptionChangeDialog } from './task-description-change-dialog';
+
+vi.mock('./description-diff-viewer', () => ({
+  DescriptionDiffViewer: () => <button type="button">view-diff</button>,
+}));
+
+const t = (key: string, options?: { defaultValue?: string }) =>
+  options?.defaultValue ?? key;
+
+const makeDoc = (text: string) =>
+  JSON.stringify({
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [{ type: 'text', text }],
+      },
+    ],
+  });
+
+describe('TaskDescriptionChangeDialog', () => {
+  it('offers restoring the previous recoverable description from a wipe row', async () => {
+    const onRestoreVersion = vi.fn();
+
+    render(
+      <TaskDescriptionChangeDialog
+        entry={{
+          id: 'history-1',
+          task_id: 'task-1',
+          changed_by: 'user-1',
+          changed_at: '2026-06-27T00:00:00.000Z',
+          change_type: 'field_updated',
+          field_name: 'description',
+          old_value: makeDoc('Recover me'),
+          new_value: null,
+          metadata: {},
+          user: { id: 'user-1', name: 'User' },
+        }}
+        isOpen
+        onClose={vi.fn()}
+        onRestoreVersion={onRestoreVersion}
+        t={t}
+      />
+    );
+
+    expect(screen.getByText('Recover me')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /restore previous/i }));
+
+    await waitFor(() => {
+      expect(onRestoreVersion).toHaveBeenCalledWith(
+        expect.objectContaining({
+          previewText: 'Recover me',
+          source: 'old_value',
+        })
+      );
+    });
+  });
+});