@tuturuuu/ui 0.9.0 → 0.10.0

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

@@ -6,13 +6,17 @@ import {
 import type { TaskPriority } from '@tuturuuu/types/primitives/Priority';
 import type { CalendarHoursType } from '@tuturuuu/types/primitives/Task';
 import { useToast } from '@tuturuuu/ui/hooks/use-toast';
-import { invalidateTaskCaches } from '@tuturuuu/utils/task-helper';
 import { useCallback, useState } from 'react';
 import {
   type BoardBroadcastFn,
   getActiveBroadcast,
   useBoardBroadcast,
 } from '../../board-broadcast-context';
+import {
+  patchTaskInVisibleCaches,
+  restoreVisibleTaskCaches,
+  snapshotVisibleTaskCaches,
+} from '../../task-cache-patches';
 import { updateWorkspaceTask } from './task-api';
 
 export interface SchedulingSettings {
@@ -109,17 +113,17 @@ export function useTaskMutations({
         return;
       }
       setEstimationSaving(true);
+      const cacheSnapshot = snapshotVisibleTaskCaches(queryClient, boardId, [
+        taskId,
+      ]);
 
       // Optimistic update - prevents flicker by updating cache immediately
-      queryClient.setQueryData(
-        ['tasks', boardId],
-        (oldTasks: any[] | undefined) => {
-          if (!oldTasks) return oldTasks;
-          return oldTasks.map((task) =>
-            task.id === taskId ? { ...task, estimation_points: points } : task
-          );
-        }
-      );
+      patchTaskInVisibleCaches({
+        queryClient,
+        boardId,
+        taskId,
+        updater: (task) => ({ ...task, estimation_points: points }),
+      });
 
       try {
         const { task } = await updateWorkspaceTask(wsId, taskId, {
@@ -135,7 +139,7 @@ export function useTaskMutations({
       } catch (e: any) {
         console.error('Failed updating estimation', e);
         // Revert optimistic update on error
-        await invalidateTaskCaches(queryClient, boardId);
+        restoreVisibleTaskCaches(queryClient, cacheSnapshot);
         toast({
           title: 'Failed to update estimation',
           description: e.message || 'Please try again',
@@ -166,17 +170,17 @@ export function useTaskMutations({
       if (isCreateMode || !taskId || taskId === 'new') {
         return;
       }
+      const cacheSnapshot = snapshotVisibleTaskCaches(queryClient, boardId, [
+        taskId,
+      ]);
 
       // Optimistic update - prevents flicker
-      queryClient.setQueryData(
-        ['tasks', boardId],
-        (oldTasks: any[] | undefined) => {
-          if (!oldTasks) return oldTasks;
-          return oldTasks.map((task) =>
-            task.id === taskId ? { ...task, priority: newPriority } : task
-          );
-        }
-      );
+      patchTaskInVisibleCaches({
+        queryClient,
+        boardId,
+        taskId,
+        updater: (task) => ({ ...task, priority: newPriority }),
+      });
 
       try {
         const { task } = await updateWorkspaceTask(wsId, taskId, {
@@ -192,7 +196,7 @@ export function useTaskMutations({
       } catch (e: any) {
         console.error('Failed updating priority', e);
         // Revert optimistic update on error
-        await invalidateTaskCaches(queryClient, boardId);
+        restoreVisibleTaskCaches(queryClient, cacheSnapshot);
         toast({
           title: 'Failed to update priority',
           description: e.message || 'Please try again',
@@ -222,17 +226,17 @@ export function useTaskMutations({
       }
 
       const dateString = newDate ? newDate.toISOString() : null;
+      const cacheSnapshot = snapshotVisibleTaskCaches(queryClient, boardId, [
+        taskId,
+      ]);
 
       // Optimistic update - prevents flicker
-      queryClient.setQueryData(
-        ['tasks', boardId],
-        (oldTasks: any[] | undefined) => {
-          if (!oldTasks) return oldTasks;
-          return oldTasks.map((task) =>
-            task.id === taskId ? { ...task, start_date: dateString } : task
-          );
-        }
-      );
+      patchTaskInVisibleCaches({
+        queryClient,
+        boardId,
+        taskId,
+        updater: (task) => ({ ...task, start_date: dateString ?? undefined }),
+      });
 
       try {
         const { task } = await updateWorkspaceTask(wsId, taskId, {
@@ -248,7 +252,7 @@ export function useTaskMutations({
       } catch (e: any) {
         console.error('Failed updating start date', e);
         // Revert optimistic update on error
-        await invalidateTaskCaches(queryClient, boardId);
+        restoreVisibleTaskCaches(queryClient, cacheSnapshot);
         toast({
           title: 'Failed to update start date',
           description: e.message || 'Please try again',
@@ -277,17 +281,17 @@ export function useTaskMutations({
       }
 
       const dateString = newDate ? newDate.toISOString() : null;
+      const cacheSnapshot = snapshotVisibleTaskCaches(queryClient, boardId, [
+        taskId,
+      ]);
 
       // Optimistic update - prevents flicker
-      queryClient.setQueryData(
-        ['tasks', boardId],
-        (oldTasks: any[] | undefined) => {
-          if (!oldTasks) return oldTasks;
-          return oldTasks.map((task) =>
-            task.id === taskId ? { ...task, end_date: dateString } : task
-          );
-        }
-      );
+      patchTaskInVisibleCaches({
+        queryClient,
+        boardId,
+        taskId,
+        updater: (task) => ({ ...task, end_date: dateString }),
+      });
 
       try {
         const { task } = await updateWorkspaceTask(wsId, taskId, {
@@ -303,7 +307,7 @@ export function useTaskMutations({
       } catch (e: any) {
         console.error('Failed updating end date', e);
         // Revert optimistic update on error
-        await invalidateTaskCaches(queryClient, boardId);
+        restoreVisibleTaskCaches(queryClient, cacheSnapshot);
         toast({
           title: 'Failed to update end date',
           description: e.message || 'Please try again',
@@ -331,38 +335,33 @@ export function useTaskMutations({
       if (isCreateMode || !taskId || taskId === 'new') {
         return;
       }
+      const cacheSnapshot = snapshotVisibleTaskCaches(queryClient, boardId, [
+        taskId,
+      ]);
 
       // Optimistic update - prevents flicker
-      queryClient.setQueryData(
-        ['tasks', boardId],
-        (oldTasks: any[] | undefined) => {
-          if (!oldTasks) return oldTasks;
-          return oldTasks.map((task) =>
-            task.id === taskId ? { ...task, list_id: newListId } : task
-          );
-        }
-      );
+      patchTaskInVisibleCaches({
+        queryClient,
+        boardId,
+        taskId,
+        updater: (task) => ({ ...task, list_id: newListId }),
+      });
 
       try {
         const { task: updatedTask } = await updateWorkspaceTask(wsId, taskId, {
           list_id: newListId,
         });
         // Update sender's own cache with DB-computed timestamps
-        queryClient.setQueryData(
-          ['tasks', boardId],
-          (oldTasks: any[] | undefined) => {
-            if (!oldTasks) return oldTasks;
-            return oldTasks.map((task: any) =>
-              task.id === taskId
-                ? {
-                    ...task,
-                    completed_at: updatedTask.completed_at,
-                    closed_at: updatedTask.closed_at,
-                  }
-                : task
-            );
-          }
-        );
+        patchTaskInVisibleCaches({
+          queryClient,
+          boardId,
+          taskId,
+          updater: (task) => ({
+            ...task,
+            completed_at: updatedTask.completed_at,
+            closed_at: updatedTask.closed_at,
+          }),
+        });
         broadcast?.('task:upsert', {
           task: {
             id: taskId,
@@ -379,7 +378,7 @@ export function useTaskMutations({
       } catch (e: any) {
         console.error('Failed updating list', e);
         // Revert optimistic update on error
-        await invalidateTaskCaches(queryClient, boardId);
+        restoreVisibleTaskCaches(queryClient, cacheSnapshot);
         toast({
           title: 'Failed to update list',
           description: e.message || 'Please try again',
@@ -412,15 +411,15 @@ export function useTaskMutations({
 
       // Optimistically update the cache instead of invalidating
       // This prevents conflicts with realtime sync
-      queryClient.setQueryData(
-        ['tasks', boardId],
-        (oldTasks: any[] | undefined) => {
-          if (!oldTasks) return oldTasks;
-          return oldTasks.map((task) =>
-            task.id === taskId ? { ...task, name: trimmedName } : task
-          );
-        }
-      );
+      const cacheSnapshot = snapshotVisibleTaskCaches(queryClient, boardId, [
+        taskId,
+      ]);
+      patchTaskInVisibleCaches({
+        queryClient,
+        boardId,
+        taskId,
+        updater: (task) => ({ ...task, name: trimmedName }),
+      });
 
       try {
         const { task } = await updateWorkspaceTask(wsId, taskId, {
@@ -432,8 +431,8 @@ export function useTaskMutations({
         triggerRefresh();
       } catch (e: any) {
         console.error('Failed updating task name', e);
-        // Revert optimistic update on error by invalidating to refetch
-        await invalidateTaskCaches(queryClient, boardId);
+        // Revert optimistic update without refetching visible board caches.
+        restoreVisibleTaskCaches(queryClient, cacheSnapshot);
         toast({
           title: 'Failed to update task name',
           description: e.message || 'Please try again',

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

@@ -146,4 +146,67 @@ describe('useTaskRelationships', () => {
       ])
     ).toEqual([newLabel, existingLabel]);
   });
+
+  it('patches visible task caches when labels change without invalidating board task queries', async () => {
+    const cachedTask = {
+      id: 'task-1',
+      labels: [],
+    } as unknown as Task;
+
+    queryClient.setQueryData(['tasks', 'board-1'], [cachedTask]);
+    queryClient.setQueryData(['tasks-full', 'board-1', 'all'], [cachedTask]);
+    queryClient.setQueryData(['task', 'task-1'], cachedTask);
+    const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries');
+
+    const { result } = renderHook(
+      () =>
+        useTaskRelationships({
+          wsId: 'personal',
+          taskId: 'task-1',
+          isCreateMode: false,
+          boardId: 'board-1',
+          selectedLabels: [],
+          selectedAssignees: [],
+          selectedProjects: [],
+          newLabelName: '',
+          newLabelColor: '#14b8a6',
+          newProjectName: '',
+          setSelectedLabels: vi.fn(),
+          setSelectedAssignees: vi.fn(),
+          setSelectedProjects: vi.fn(),
+          setAvailableLabels: vi.fn(),
+          setNewLabelName: vi.fn(),
+          setNewLabelColor: vi.fn(),
+          setNewProjectName: vi.fn(),
+          setShowNewLabelDialog: vi.fn(),
+          setShowNewProjectDialog: vi.fn(),
+          onUpdate: vi.fn(),
+        }),
+      { wrapper }
+    );
+
+    await act(async () => {
+      await result.current.toggleLabel(newLabel);
+    });
+
+    expect(
+      queryClient.getQueryData<Task[]>(['tasks', 'board-1'])?.[0]?.labels
+    ).toEqual([newLabel]);
+    expect(
+      queryClient.getQueryData<Task[]>(['tasks-full', 'board-1', 'all'])?.[0]
+        ?.labels
+    ).toEqual([newLabel]);
+    expect(queryClient.getQueryData<Task>(['task', 'task-1'])?.labels).toEqual([
+      newLabel,
+    ]);
+    expect(invalidateSpy).not.toHaveBeenCalledWith({
+      queryKey: ['tasks', 'board-1'],
+    });
+    expect(invalidateSpy).not.toHaveBeenCalledWith({
+      queryKey: ['tasks-full', 'board-1'],
+    });
+    expect(mocks.broadcast).toHaveBeenCalledWith('task:relations-changed', {
+      taskId: 'task-1',
+    });
+  });
 });

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