@tuturuuu/ui 0.4.1 → 0.6.0

package/src/hooks/__tests__/use-task-actions.test.tsx

@@ -10,11 +10,19 @@ import type { ReactNode } from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useTaskActions } from '../use-task-actions';
 
+const { mockDispatchTaskSoundCue } = vi.hoisted(() => ({
+  mockDispatchTaskSoundCue: vi.fn(),
+}));
+
 // Mock dependencies
 vi.mock('@tuturuuu/supabase/next/client', () => ({
   createClient: vi.fn(),
 }));
 
+vi.mock('../../components/ui/tu-do/shared/task-sound-effects', () => ({
+  dispatchTaskSoundCue: mockDispatchTaskSoundCue,
+}));
+
 vi.mock('@tuturuuu/ui/sonner', () => ({
   toast: {
     success: vi.fn(),
@@ -268,6 +276,12 @@ describe('useTaskActions', () => {
       expect(mockToast.success).toHaveBeenCalledWith('Task completed', {
         description: 'Task marked as done and moved to Done',
       });
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+        count: 1,
+        cue: 'complete',
+        intensity: 1,
+      });
     });
 
     it('moves an external task to the personal and source done lists when checked', async () => {
@@ -421,6 +435,11 @@ describe('useTaskActions', () => {
       expect(mockUpdateWorkspaceTask).toHaveBeenCalledWith('ws-1', 'task-1', {
         closed_at: expect.any(String),
       });
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+        count: 1,
+        cue: 'complete',
+        intensity: 1,
+      });
     });
 
     it('prefers task.ws_id over a fallback workspace prop when archiving', async () => {
@@ -667,6 +686,12 @@ describe('useTaskActions', () => {
       expect(mockToast.success).toHaveBeenCalledWith('2 tasks completed', {
         description: 'Tasks marked as done',
       });
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+        count: 2,
+        cue: 'complete',
+        intensity: 1.15,
+      });
     });
   });
 
@@ -849,6 +874,12 @@ describe('useTaskActions', () => {
       expect(mockToast.success).toHaveBeenCalledWith('Success', {
         description: 'Task deleted successfully',
       });
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+        count: 1,
+        cue: 'delete',
+        intensity: 1,
+      });
       expect(setDeleteDialogOpen).toHaveBeenCalledWith(false);
 
       const deletedTasks = queryClient.getQueryData<Task[]>([
@@ -939,6 +970,12 @@ describe('useTaskActions', () => {
       expect(mockToast.success).toHaveBeenCalledWith('Due date updated', {
         description: 'Due date set successfully',
       });
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+        count: 1,
+        cue: 'update',
+        intensity: 1,
+      });
     });
 
     it('should handle bulk due date update', async () => {
@@ -1041,6 +1078,12 @@ describe('useTaskActions', () => {
       expect(mockToast.success).toHaveBeenCalledWith('Priority updated', {
         description: 'Priority changed',
       });
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+        count: 1,
+        cue: 'update',
+        intensity: 1,
+      });
     });
 
     it('should handle bulk priority update', async () => {
@@ -1154,6 +1197,12 @@ describe('useTaskActions', () => {
       expect(mockToast.success).toHaveBeenCalledWith('Estimation updated', {
         description: 'Estimation points updated successfully',
       });
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+        count: 1,
+        cue: 'update',
+        intensity: 1,
+      });
     });
 
     it('should skip update if estimation points already match', async () => {
@@ -1314,6 +1363,12 @@ describe('useTaskActions', () => {
       expect(mockUpdateWorkspaceTask).toHaveBeenCalledWith('ws-1', 'task-1', {
         end_date: expect.any(String),
       });
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+        count: 1,
+        cue: 'update',
+        intensity: 1,
+      });
     });
 
     it('delegates selected-card custom dates to the bulk updater', async () => {
@@ -1625,6 +1680,12 @@ describe('useTaskActions', () => {
       expect(mockUpdateWorkspaceTask).toHaveBeenCalledWith('ws-1', 'task-1', {
         list_id: 'list-2',
       });
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledTimes(1);
+      expect(mockDispatchTaskSoundCue).toHaveBeenCalledWith({
+        count: 1,
+        cue: 'move',
+        intensity: 1,
+      });
       expect(setMenuOpen).toHaveBeenCalledWith(false);
     });
 

package/src/hooks/use-task-actions.ts

@@ -16,6 +16,10 @@ import {
 import { addDays } from 'date-fns';
 import { useCallback } from 'react';
 import { useBoardBroadcast } from '../components/ui/tu-do/shared/board-broadcast-context';
+import {
+  dispatchTaskSoundCue,
+  type TaskSoundCue,
+} from '../components/ui/tu-do/shared/task-sound-effects';
 import {
   isPersonalExternalTask,
   moveExternalTaskToPersonalList,
@@ -42,6 +46,21 @@ interface UseTaskActionsProps {
   bulkUpdateCustomDueDate?: (date: Date | null) => Promise<void>;
 }
 
+function dispatchTaskActionSound(cue: TaskSoundCue, count = 1) {
+  dispatchTaskSoundCue({
+    cue,
+    count,
+    intensity: count > 1 ? 1.15 : 1,
+  });
+}
+
+function getMoveSoundCue(targetList?: TaskList | null): TaskSoundCue {
+  return isTaskBoardCompletedStatus(targetList?.status) ||
+    isTaskBoardTerminalStatus(targetList?.status)
+    ? 'complete'
+    : 'move';
+}
+
 export function useTaskActions({
   task,
   boardId,
@@ -252,6 +271,7 @@ export function useTaskActions({
         toast.success('Task completed', {
           description: `Task marked as ${targetCompletionList.status === 'done' ? 'done' : 'closed'} and moved to ${targetCompletionList.name}`,
         });
+        dispatchTaskActionSound('complete');
       } catch (error) {
         console.error('Failed to complete external task:', error);
         toast.error('Error', {
@@ -321,6 +341,7 @@ export function useTaskActions({
         toast.success('Task completed', {
           description: `Task marked as done and moved to ${targetCompletionList.name}`,
         });
+        dispatchTaskActionSound('complete');
       } catch (error) {
         // Rollback on error
         if (previousTasks) {
@@ -373,6 +394,7 @@ export function useTaskActions({
             completed_at: updatedTask.completed_at,
           },
         });
+        dispatchTaskActionSound(newClosedState ? 'complete' : 'update');
       } catch (error) {
         // Rollback on error
         if (previousTasks) {
@@ -429,6 +451,7 @@ export function useTaskActions({
         toast.success('Task completed', {
           description: `Task marked as ${targetCompletionList.status === 'done' ? 'done' : 'closed'} and moved to ${targetCompletionList.name}`,
         });
+        dispatchTaskActionSound('complete');
         return;
       }
 
@@ -496,6 +519,7 @@ export function useTaskActions({
         toast.warning('Partial completion update', {
           description: `${successCount}/${tasksToMove.length} tasks updated`,
         });
+        dispatchTaskActionSound('complete', successCount);
         return;
       }
 
@@ -509,6 +533,7 @@ export function useTaskActions({
               : `Task marked as ${targetCompletionList.status === 'done' ? 'done' : 'closed'} and moved to ${targetCompletionList.name}`,
         }
       );
+      dispatchTaskActionSound('complete', taskCount);
     } catch (error) {
       // Rollback on error
       if (previousTasks) {
@@ -564,6 +589,7 @@ export function useTaskActions({
         toast.success('Success', {
           description: 'Task marked as closed',
         });
+        dispatchTaskActionSound('complete');
         return;
       }
 
@@ -627,6 +653,7 @@ export function useTaskActions({
         toast.warning('Partial close update', {
           description: `${successCount}/${tasksToMove.length} tasks updated`,
         });
+        dispatchTaskActionSound('complete', successCount);
         return;
       }
 
@@ -637,6 +664,7 @@ export function useTaskActions({
             ? `${taskCount} tasks marked as closed`
             : 'Task marked as closed',
       });
+      dispatchTaskActionSound('complete', taskCount);
     } catch (error) {
       // Rollback on error
       if (previousTasks) {
@@ -741,6 +769,7 @@ export function useTaskActions({
         toast.warning('Partial delete update', {
           description: `${successCount}/${tasksToDelete.length} tasks deleted`,
         });
+        dispatchTaskActionSound('delete', successCount);
         return;
       }
 
@@ -751,6 +780,7 @@ export function useTaskActions({
             ? `${taskCount} tasks deleted`
             : 'Task deleted successfully',
       });
+      dispatchTaskActionSound('delete', taskCount);
 
       setDeleteDialogOpen?.(false);
     } catch (error) {
@@ -817,6 +847,7 @@ export function useTaskActions({
       toast.success('Success', {
         description: 'All assignees removed from task',
       });
+      dispatchTaskActionSound('update');
     } catch (error) {
       queryClient.setQueryData(['tasks', boardId], previousTasks);
       console.error('Failed to remove all assignees:', error);
@@ -888,6 +919,7 @@ export function useTaskActions({
           description: `${assignee?.display_name || assignee?.email || 'Assignee'} removed from task`,
         });
         broadcast?.('task:relations-changed', { taskId: task.id });
+        dispatchTaskActionSound('update');
       } catch (error) {
         queryClient.setQueryData(['tasks', boardId], previousTasks);
         console.error('Failed to remove assignee:', error);
@@ -977,6 +1009,7 @@ export function useTaskActions({
           toast.success('Success', {
             description: `Task moved to ${targetList.name || 'selected list'}`,
           });
+          dispatchTaskActionSound(getMoveSoundCue(targetList));
         } catch (error) {
           console.error('Failed to move external task:', error);
           toast.error('Error', {
@@ -1087,6 +1120,7 @@ export function useTaskActions({
           toast.warning('Partial move update', {
             description: `${successCount}/${tasksToMove.length} tasks updated`,
           });
+          dispatchTaskActionSound(getMoveSoundCue(targetList), successCount);
           return;
         }
 
@@ -1097,6 +1131,7 @@ export function useTaskActions({
               ? `${taskCount} tasks moved to ${targetList?.name || 'selected list'}`
               : `Task moved to ${targetList?.name || 'selected list'}`,
         });
+        dispatchTaskActionSound(getMoveSoundCue(targetList), taskCount);
       } catch (error) {
         // Rollback on error
         if (previousTasks) {
@@ -1213,6 +1248,7 @@ export function useTaskActions({
           toast.warning('Partial due date update', {
             description: `${succeededTaskIds.length}/${tasksToUpdate.length} tasks updated`,
           });
+          dispatchTaskActionSound('update', succeededTaskIds.length);
         } else {
           const taskCount = tasksToUpdate.length;
           toast.success('Due date updated', {
@@ -1223,6 +1259,7 @@ export function useTaskActions({
                   ? 'Due date set successfully'
                   : 'Due date removed',
           });
+          dispatchTaskActionSound('update', taskCount);
         }
       } catch (error) {
         console.error('Failed to update due date:', error);
@@ -1328,6 +1365,7 @@ export function useTaskActions({
           toast.warning('Partial priority update', {
             description: `${succeededTaskIds.length}/${tasksToUpdate.length} tasks updated`,
           });
+          dispatchTaskActionSound('update', succeededTaskIds.length);
         } else {
           const taskCount = tasksToUpdate.length;
           toast.success('Priority updated', {
@@ -1338,6 +1376,7 @@ export function useTaskActions({
                   ? 'Priority changed'
                   : 'Priority cleared',
           });
+          dispatchTaskActionSound('update', taskCount);
         }
 
         // Don't auto-clear selection - let user manually clear with "Clear" button
@@ -1459,6 +1498,7 @@ export function useTaskActions({
           toast.warning('Partial estimation update', {
             description: `${succeededIds.length}/${tasksToUpdate.length} tasks updated`,
           });
+          dispatchTaskActionSound('update', succeededIds.length);
 
           return;
         }
@@ -1476,6 +1516,7 @@ export function useTaskActions({
               ? `${taskCount} tasks updated`
               : 'Estimation points updated successfully',
         });
+        dispatchTaskActionSound('update', taskCount);
 
         return;
       } catch (e: any) {
@@ -1575,6 +1616,7 @@ export function useTaskActions({
               ? 'Custom due date set successfully'
               : 'Due date removed',
           });
+          dispatchTaskActionSound('update');
         } catch (error) {
           if (previousTasks) {
             queryClient.setQueryData(['tasks', boardId], previousTasks);
@@ -1797,6 +1839,9 @@ export function useTaskActions({
               ? `${succeededTaskIds.length} tasks updated`
               : `${assigneeName} ${active ? 'removed' : 'added'} on task`,
         });
+        if (succeededTaskIds.length > 0) {
+          dispatchTaskActionSound('update', succeededTaskIds.length);
+        }
 
         // Don't auto-clear selection - let user manually clear with "Clear" button
       } catch (e: any) {

package/src/hooks/useBoardRealtime.ts

@@ -223,6 +223,18 @@ export function useBoardRealtime(
           payload as BoardRealtimePayload
         );
       })
+      .on('broadcast', { event: 'task:upsert:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'task:upsert:batch',
+          payload as BoardRealtimePayload
+        );
+      })
+      .on('broadcast', { event: 'task:delete:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'task:delete:batch',
+          payload as BoardRealtimePayload
+        );
+      })
       .on('broadcast', { event: 'list:upsert' }, ({ payload }) => {
         handleBoardRealtimeEvent(
           'list:upsert',
@@ -235,6 +247,18 @@ export function useBoardRealtime(
           payload as BoardRealtimePayload
         );
       })
+      .on('broadcast', { event: 'list:upsert:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'list:upsert:batch',
+          payload as BoardRealtimePayload
+        );
+      })
+      .on('broadcast', { event: 'list:delete:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'list:delete:batch',
+          payload as BoardRealtimePayload
+        );
+      })
       .on('broadcast', { event: 'task:relations-changed' }, ({ payload }) => {
         handleBoardRealtimeEvent(
           'task:relations-changed',
@@ -246,6 +270,22 @@ export function useBoardRealtime(
           'task:deps-changed',
           payload as BoardRealtimePayload
         );
+      })
+      .on(
+        'broadcast',
+        { event: 'task:relations-changed:batch' },
+        ({ payload }) => {
+          handleBoardRealtimeEvent(
+            'task:relations-changed:batch',
+            payload as BoardRealtimePayload
+          );
+        }
+      )
+      .on('broadcast', { event: 'task:deps-changed:batch' }, ({ payload }) => {
+        handleBoardRealtimeEvent(
+          'task:deps-changed:batch',
+          payload as BoardRealtimePayload
+        );
       });
 
     channel.subscribe((status, err) => {
@@ -328,11 +368,24 @@ export function useBoardRealtime(
           const existing = merged.get(task.id);
           merged.set(task.id, existing ? { ...existing, ...task } : task);
         }
-        for (const task of merged.values()) {
+        const tasks = [...merged.values()];
+        if (tasks.length > 1) {
+          sendBoardRealtimeEvent(channel, 'task:upsert:batch', {
+            payloads: tasks.map((task) => ({ task })),
+          });
+          continue;
+        }
+        for (const task of tasks) {
           sendBoardRealtimeEvent(channel, event, { task });
         }
       } else {
         // Other events (task:delete, list:upsert, list:delete) — send each
+        if (payloads.length > 1) {
+          sendBoardRealtimeEvent(channel, `${event}:batch`, {
+            payloads,
+          });
+          continue;
+        }
         for (const p of payloads) {
           sendBoardRealtimeEvent(channel, event, p);
         }

package/src/hooks/useBoardRealtimeEventHandler.ts

@@ -76,11 +76,120 @@ function updateBoardTaskCaches(
   boardId: string,
   updater: (old: Task[] | undefined) => Task[] | undefined
 ) {
-  queryClient.setQueryData(['tasks', boardId], updater);
+  queryClient.setQueryData<Task[]>(['tasks', boardId], updater);
+  queryClient.setQueryData<Task[]>(['tasks-full', boardId], updater);
+  queryClient.setQueriesData<Task[]>({ queryKey: ['tasks', boardId] }, updater);
+  queryClient.setQueriesData<Task[]>(
+    { queryKey: ['tasks-full', boardId] },
+    updater
+  );
+}
 
-  if (queryClient.getQueryData<Task[]>(['tasks-full', boardId])) {
-    queryClient.setQueryData(['tasks-full', boardId], updater);
-  }
+function patchWorkspaceTaskCaches(
+  queryClient: QueryClient,
+  taskData: Partial<Task> & { id: string }
+) {
+  queryClient.setQueriesData<{ task?: Task | null }>(
+    {
+      predicate: (query) =>
+        Array.isArray(query.queryKey) &&
+        query.queryKey[0] === 'workspaceTask' &&
+        query.queryKey[2] === taskData.id,
+    },
+    (old) =>
+      old?.task
+        ? {
+            ...old,
+            task: { ...old.task, ...taskData },
+          }
+        : old
+  );
+}
+
+function patchMyTasksCaches(
+  queryClient: QueryClient,
+  taskData: Partial<Task> & { id: string }
+) {
+  const patchTask = <T extends { id?: string }>(task: T): T =>
+    task.id === taskData.id ? ({ ...task, ...taskData } as T) : task;
+
+  queryClient.setQueriesData<{
+    overdue?: Array<{ id?: string }>;
+    today?: Array<{ id?: string }>;
+    upcoming?: Array<{ id?: string }>;
+    completed?: Array<{ id?: string }>;
+  }>({ queryKey: ['my-tasks'] }, (old) =>
+    old
+      ? {
+          ...old,
+          overdue: old.overdue?.map(patchTask) ?? old.overdue,
+          today: old.today?.map(patchTask) ?? old.today,
+          upcoming: old.upcoming?.map(patchTask) ?? old.upcoming,
+          completed: old.completed?.map(patchTask) ?? old.completed,
+        }
+      : old
+  );
+
+  queryClient.setQueriesData<{
+    pages?: Array<{ completed?: Array<{ id?: string }> }>;
+  }>({ queryKey: ['my-completed-tasks'] }, (old) =>
+    old?.pages
+      ? {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            completed: page.completed?.map(patchTask) ?? page.completed,
+          })),
+        }
+      : old
+  );
+}
+
+function deleteFromMyTasksCaches(queryClient: QueryClient, taskId: string) {
+  const removeTask = <T extends { id?: string }>(tasks: T[] | undefined) =>
+    tasks?.filter((task) => task.id !== taskId);
+
+  queryClient.setQueriesData<{
+    overdue?: Array<{ id?: string }>;
+    today?: Array<{ id?: string }>;
+    upcoming?: Array<{ id?: string }>;
+    completed?: Array<{ id?: string }>;
+  }>({ queryKey: ['my-tasks'] }, (old) =>
+    old
+      ? {
+          ...old,
+          overdue: removeTask(old.overdue) ?? old.overdue,
+          today: removeTask(old.today) ?? old.today,
+          upcoming: removeTask(old.upcoming) ?? old.upcoming,
+          completed: removeTask(old.completed) ?? old.completed,
+        }
+      : old
+  );
+
+  queryClient.setQueriesData<{
+    pages?: Array<{ completed?: Array<{ id?: string }> }>;
+  }>({ queryKey: ['my-completed-tasks'] }, (old) =>
+    old?.pages
+      ? {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            completed: removeTask(page.completed) ?? page.completed,
+          })),
+        }
+      : old
+  );
+}
+
+function invalidateTaskMembershipQueries(
+  queryClient: QueryClient,
+  boardId: string
+) {
+  void queryClient.invalidateQueries({
+    queryKey: ['task-list-counts', boardId],
+  });
+  void queryClient.invalidateQueries({ queryKey: ['my-tasks'] });
+  void queryClient.invalidateQueries({ queryKey: ['my-completed-tasks'] });
 }
 
 export function useBoardRealtimeEventHandler({
@@ -164,6 +273,10 @@ export function useBoardRealtimeEventHandler({
           return relations ? { ...task, ...relations } : task;
         });
       });
+      for (const [taskId, relations] of relationsMap.entries()) {
+        patchWorkspaceTaskCaches(queryClient, { id: taskId, ...relations });
+        patchMyTasksCaches(queryClient, { id: taskId, ...relations });
+      }
     } catch (err) {
       if (DEV_MODE) {
         console.error(
@@ -178,8 +291,40 @@ export function useBoardRealtimeEventHandler({
     (event: string, payload: BoardRealtimePayload) => {
       if (rememberEventId(payload)) return;
 
+      if (event.endsWith(':batch')) {
+        const baseEvent = event.slice(0, -':batch'.length);
+        const payloads = Array.isArray(payload.payloads)
+          ? payload.payloads
+          : Array.isArray(payload.events)
+            ? payload.events
+                .filter((entry) => {
+                  return (
+                    typeof entry === 'object' &&
+                    entry !== null &&
+                    'payload' in entry
+                  );
+                })
+                .map((entry) => (entry as { payload: unknown }).payload)
+            : [];
+
+        for (const childPayload of payloads) {
+          if (
+            typeof childPayload === 'object' &&
+            childPayload !== null &&
+            !Array.isArray(childPayload)
+          ) {
+            handleBoardRealtimeEvent(
+              baseEvent,
+              childPayload as BoardRealtimePayload
+            );
+          }
+        }
+        return;
+      }
+
       if (event === 'task:upsert') {
         const taskData = payload.task as Partial<Task> & { id: string };
+        if (!taskData?.id) return;
         if (DEV_MODE) {
           console.log('[useBoardRealtime] task:upsert received', taskData.id);
         }
@@ -193,6 +338,17 @@ export function useBoardRealtimeEventHandler({
         updateBoardTaskCaches(queryClient, boardId, (old) =>
           mergeRealtimeTask(old, taskData)
         );
+        patchWorkspaceTaskCaches(queryClient, taskData);
+        patchMyTasksCaches(queryClient, taskData);
+        if (
+          'list_id' in taskData ||
+          'completed' in taskData ||
+          'completed_at' in taskData ||
+          'closed_at' in taskData ||
+          'deleted_at' in taskData
+        ) {
+          invalidateTaskMembershipQueries(queryClient, boardId);
+        }
         return;
       }
 
@@ -208,6 +364,14 @@ export function useBoardRealtimeEventHandler({
         updateBoardTaskCaches(queryClient, boardId, (old) =>
           deleteRealtimeTask(old, taskId)
         );
+        deleteFromMyTasksCaches(queryClient, taskId);
+        queryClient.removeQueries({
+          predicate: (query) =>
+            Array.isArray(query.queryKey) &&
+            query.queryKey[0] === 'workspaceTask' &&
+            query.queryKey[2] === taskId,
+        });
+        invalidateTaskMembershipQueries(queryClient, boardId);
 
         if (deleted) {
           onTaskChangeRef.current?.(deleted, 'DELETE');
@@ -262,6 +426,7 @@ export function useBoardRealtimeEventHandler({
         updateBoardTaskCaches(queryClient, boardId, (old) =>
           old?.filter((task) => task.list_id !== listId)
         );
+        invalidateTaskMembershipQueries(queryClient, boardId);
 
         if (deleted) {
           onListChangeRef.current?.(deleted, 'DELETE');