@tuturuuu/ui 0.1.0 → 0.3.1

package/src/components/ui/text-editor/__tests__/task-mention-chip.test.tsx

@@ -102,15 +102,20 @@ vi.mock('../../sonner', () => ({
   },
 }));
 
-function renderWithQueryClient(children: ReactNode) {
-  const queryClient = new QueryClient({
+function createTestQueryClient() {
+  return new QueryClient({
     defaultOptions: {
       queries: {
         retry: false,
       },
     },
   });
+}
 
+function renderWithQueryClient(
+  children: ReactNode,
+  queryClient = createTestQueryClient()
+) {
   return render(
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   );
@@ -217,7 +222,112 @@ describe('TaskMentionChip', () => {
     expect(screen.getByText('Complete Team Charter V1.0')).toBeInTheDocument();
   });
 
-  it('uses the mention workspace when repairing a task from another workspace', async () => {
+  it('does not reuse stale mention fallback cache across board contexts', async () => {
+    const boardOneTask = {
+      assignees: [],
+      board_id: 'board-1',
+      display_number: 3,
+      id: 'board-one-task-id',
+      labels: [],
+      list_id: 'list-1',
+      name: 'Board one task',
+      projects: [],
+      ticket_prefix: null,
+    };
+    const boardTwoTask = {
+      assignees: [],
+      board_id: 'board-2',
+      display_number: 4,
+      id: 'board-two-task-id',
+      labels: [],
+      list_id: 'list-2',
+      name: 'Board two task',
+      projects: [],
+      ticket_prefix: null,
+    };
+    const queryClient = createTestQueryClient();
+    const firstResolved = vi.fn();
+    const secondResolved = vi.fn();
+
+    mocks.getCurrentUserTask.mockImplementation(async (taskId: string) => {
+      if (taskId === 'stale-task-id') {
+        throw new Error('Task not found');
+      }
+
+      const task =
+        taskId === boardOneTask.id
+          ? boardOneTask
+          : taskId === boardTwoTask.id
+            ? boardTwoTask
+            : null;
+
+      if (!task) {
+        throw new Error('Task not found');
+      }
+
+      return {
+        availableLists: [],
+        task,
+        taskWorkspacePersonal: false,
+        taskWorkspaceTier: 'FREE',
+        taskWsId: 'ws-1',
+      };
+    });
+    mocks.listWorkspaceTasks.mockImplementation(
+      async (_wsId: string, params: { boardId?: string }) => ({
+        tasks: params.boardId === 'board-2' ? [boardTwoTask] : [boardOneTask],
+      })
+    );
+
+    const firstRender = renderWithQueryClient(
+      <TaskMentionChip
+        entityId="stale-task-id"
+        displayNumber="3"
+        subtitle="Board one task"
+        onResolvedTaskMention={firstResolved}
+      />,
+      queryClient
+    );
+
+    await waitFor(() => {
+      expect(firstResolved).toHaveBeenCalledWith(
+        expect.objectContaining({ entityId: boardOneTask.id })
+      );
+    });
+
+    firstRender.unmount();
+    window.history.pushState({}, '', '/ws-1/tasks/boards/board-2');
+
+    renderWithQueryClient(
+      <TaskMentionChip
+        entityId="stale-task-id"
+        displayNumber="4"
+        subtitle="Board two task"
+        onResolvedTaskMention={secondResolved}
+      />,
+      queryClient
+    );
+
+    await waitFor(() => {
+      expect(mocks.listWorkspaceTasks).toHaveBeenCalledWith(
+        'ws-1',
+        expect.objectContaining({
+          boardId: 'board-2',
+          identifier: '4',
+        })
+      );
+    });
+    await waitFor(() => {
+      expect(secondResolved).toHaveBeenCalledWith(
+        expect.objectContaining({ entityId: boardTwoTask.id })
+      );
+    });
+    expect(secondResolved).not.toHaveBeenCalledWith(
+      expect.objectContaining({ entityId: boardOneTask.id })
+    );
+  });
+
+  it('ignores untrusted mention workspace when repairing stale task mentions', async () => {
     const resolvedTask = {
       assignees: [],
       board_id: 'board-1',
@@ -242,7 +352,7 @@ describe('TaskMentionChip', () => {
         task: resolvedTask,
         taskWorkspacePersonal: false,
         taskWorkspaceTier: 'FREE',
-        taskWsId: 'source-ws',
+        taskWsId: 'route-ws',
       };
     });
     mocks.listWorkspaceTasks.mockResolvedValue({ tasks: [resolvedTask] });
@@ -259,7 +369,7 @@ describe('TaskMentionChip', () => {
 
     await waitFor(() => {
       expect(mocks.listWorkspaceTasks).toHaveBeenCalledWith(
-        'source-ws',
+        'route-ws',
         expect.objectContaining({
           boardId: 'board-1',
           identifier: '7',
@@ -271,9 +381,96 @@ describe('TaskMentionChip', () => {
       expect(onResolvedTaskMention).toHaveBeenCalledWith(
         expect.objectContaining({
           entityId: 'source-task-id',
-          workspaceId: 'source-ws',
+          workspaceId: 'route-ws',
         })
       );
     });
   });
+
+  it('does not rewrite stale mentions to tasks from another workspace', async () => {
+    const resolvedTask = {
+      assignees: [],
+      board_id: 'board-1',
+      display_number: 8,
+      id: 'source-task-id',
+      labels: [],
+      list_id: 'list-1',
+      name: 'Source workspace task',
+      projects: [],
+      ticket_prefix: null,
+    };
+    const onResolvedTaskMention = vi.fn();
+
+    window.history.pushState({}, '', '/route-ws/tasks/boards/board-1');
+    mocks.getCurrentUserTask.mockImplementation(async (taskId: string) => {
+      if (taskId === 'stale-task-id') {
+        throw new Error('Task not found');
+      }
+
+      return {
+        availableLists: [],
+        task: resolvedTask,
+        taskWorkspacePersonal: false,
+        taskWorkspaceTier: 'FREE',
+        taskWsId: 'source-ws',
+      };
+    });
+    mocks.listWorkspaceTasks.mockResolvedValue({ tasks: [resolvedTask] });
+
+    renderWithQueryClient(
+      <TaskMentionChip
+        entityId="stale-task-id"
+        displayNumber="8"
+        subtitle="Source workspace task"
+        onResolvedTaskMention={onResolvedTaskMention}
+      />
+    );
+
+    await waitFor(() => {
+      expect(mocks.getCurrentUserTask).toHaveBeenCalledWith('source-task-id');
+    });
+
+    expect(onResolvedTaskMention).not.toHaveBeenCalled();
+  });
+
+  it('uses the server-returned workspace for resolved cross-workspace task mentions', async () => {
+    const resolvedTask = {
+      assignees: [],
+      board_id: 'source-board',
+      display_number: 9,
+      id: 'source-task-id',
+      labels: [],
+      list_id: 'list-1',
+      name: 'Trusted cross workspace task',
+      projects: [],
+      ticket_prefix: null,
+    };
+
+    window.history.pushState({}, '', '/route-ws/tasks/boards/board-1');
+    mocks.getCurrentUserTask.mockResolvedValue({
+      availableLists: [],
+      task: resolvedTask,
+      taskWorkspacePersonal: false,
+      taskWorkspaceTier: 'FREE',
+      taskWsId: 'source-ws',
+    });
+
+    renderWithQueryClient(
+      <TaskMentionChip
+        entityId="source-task-id"
+        displayNumber="9"
+        subtitle="Trusted cross workspace task"
+        workspaceId="source-ws"
+      />
+    );
+
+    await waitFor(() => {
+      expect(mocks.getCurrentUserTask).toHaveBeenCalledWith('source-task-id');
+    });
+
+    expect(mocks.listWorkspaceTasks).not.toHaveBeenCalled();
+    expect(
+      screen.getByText('Trusted cross workspace task')
+    ).toBeInTheDocument();
+  });
 });

package/src/components/ui/text-editor/task-mention-chip.tsx

@@ -186,7 +186,6 @@ export function TaskMentionChip({
   displayNumber,
   avatarUrl,
   subtitle,
-  workspaceId,
   className,
   editor: editorProp,
   onResolvedTaskMention,
@@ -213,8 +212,19 @@ export function TaskMentionChip({
 
     return getRouteTaskBoardIdFromPathname(window.location.pathname);
   }, []);
-  const mentionWorkspaceId = workspaceId?.trim() || undefined;
-  const resolutionWorkspaceId = mentionWorkspaceId ?? routeWsId;
+  const resolutionWorkspaceId = routeWsId;
+  const taskMentionQueryKey = useMemo(
+    () => [
+      'task',
+      'mention',
+      entityId,
+      resolutionWorkspaceId ?? null,
+      routeBoardId ?? null,
+      displayNumber.trim(),
+      subtitle?.trim() ?? null,
+    ],
+    [displayNumber, entityId, resolutionWorkspaceId, routeBoardId, subtitle]
+  );
   const isDark = useDomResolvedTheme() === 'dark';
 
   // Dialog states
@@ -230,7 +240,7 @@ export function TaskMentionChip({
     isLoading: taskLoading,
     error: taskError,
   } = useQuery({
-    queryKey: ['task', entityId, resolutionWorkspaceId],
+    queryKey: taskMentionQueryKey,
     queryFn: async () => {
       return resolveTaskMentionPayload({
         displayNumber,
@@ -249,9 +259,19 @@ export function TaskMentionChip({
   const resolvedTaskId = task?.id ?? entityId;
   const taskWorkspaceId = taskPayload?.taskWsId;
   const taskWorkspacePersonal = taskPayload?.taskWorkspacePersonal;
-  const canonicalWorkspaceId =
-    mentionWorkspaceId ?? taskWorkspaceId ?? routeWsId;
+  const canonicalWorkspaceId = taskWorkspaceId ?? routeWsId;
   const boardWorkspaceId = canonicalWorkspaceId;
+  const resolvedTaskBelongsToRouteWorkspace = useMemo(() => {
+    if (!routeWsId || !taskWorkspaceId) {
+      return false;
+    }
+
+    if (taskWorkspaceId === routeWsId) {
+      return true;
+    }
+
+    return routeWsId === 'personal' && taskWorkspacePersonal === true;
+  }, [routeWsId, taskWorkspaceId, taskWorkspacePersonal]);
 
   // Get board config - only fetch when menu opens and we have task data
   const { data: boardConfig } = useBoardConfig(
@@ -394,6 +414,7 @@ export function TaskMentionChip({
   }, [availableLists, task]);
 
   const handleUpdate = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['task', 'mention'] });
     queryClient.invalidateQueries({ queryKey: ['task', entityId] });
     if (resolvedTaskId !== entityId) {
       queryClient.invalidateQueries({ queryKey: ['task', resolvedTaskId] });
@@ -668,7 +689,7 @@ export function TaskMentionChip({
   }, [task?.name, subtitle]);
 
   useEffect(() => {
-    if (!task || task.id === entityId) {
+    if (!task || task.id === entityId || !resolvedTaskBelongsToRouteWorkspace) {
       return;
     }
 
@@ -697,6 +718,7 @@ export function TaskMentionChip({
     entityId,
     onResolvedTaskMention,
     queryClient,
+    resolvedTaskBelongsToRouteWorkspace,
     subtitle,
     task,
     taskPayload,

package/src/components/ui/tu-do/boards/boardId/board-column.tsx

@@ -40,8 +40,13 @@ import {
   type ListPaginationState,
   useProgressiveLoader,
 } from '../../shared/progressive-loader-context';
+import { getListTextColorClass } from '../../utils/taskColorUtils';
 import { normalizeBoardText } from './board-text-utils';
 import type { DragPreviewPosition } from './kanban/dnd/use-kanban-dnd';
+import {
+  isClosedTaskListColumnCollapsed,
+  isKanbanColumnCollapsed,
+} from './kanban/kanban-column-collapse';
 import { ListActions } from './list-actions';
 import { statusIcons } from './status-section';
 import type { TaskFilters } from './task-filter';
@@ -168,6 +173,7 @@ interface BoardColumnProps {
   workspaceId?: string;
   wsId: string;
   onExternalTasksCollapsedChange?: (collapsed: boolean) => void;
+  onTaskListCollapsedChange?: (listId: string, collapsed: boolean) => void;
 }
 
 export function BoardColumn({
@@ -193,6 +199,7 @@ export function BoardColumn({
   workspaceId,
   wsId,
   onExternalTasksCollapsedChange,
+  onTaskListCollapsedChange,
 }: BoardColumnProps) {
   const t = useTranslations('common');
   const tTasks = useTranslations('ws-tasks');
@@ -211,6 +218,8 @@ export function BoardColumn({
   const [externalSortBy, setExternalSortBy] = useState<ExternalTaskSortBy>(
     DEFAULT_EXTERNAL_TASK_SORT_BY
   );
+  const isClosedCollapsed = isClosedTaskListColumnCollapsed(column);
+  const isColumnCollapsed = isKanbanColumnCollapsed(column);
   const hasActiveFilters =
     !!filters &&
     (filters.labels.length > 0 ||
@@ -291,7 +300,7 @@ export function BoardColumn({
   useEffect(() => {
     if (
       !isExternalStaging ||
-      isExternalCollapsed ||
+      isColumnCollapsed ||
       !listState ||
       listState.isInitialLoad ||
       listState.isLoading ||
@@ -303,7 +312,7 @@ export function BoardColumn({
     loadColumnPage(0);
   }, [
     externalOptionsSignature,
-    isExternalCollapsed,
+    isColumnCollapsed,
     isExternalStaging,
     listState,
     listState?.isInitialLoad,
@@ -315,7 +324,7 @@ export function BoardColumn({
   // cache was cleared, refetch page 0 for this list so cards reappear.
   useEffect(() => {
     if (
-      isExternalCollapsed ||
+      isColumnCollapsed ||
       !listState ||
       listState.isLoading ||
       hasActiveFilters
@@ -334,7 +343,7 @@ export function BoardColumn({
     recoveryRequestedRef.current = false;
   }, [
     hasActiveFilters,
-    isExternalCollapsed,
+    isColumnCollapsed,
     listState,
     listState?.isLoading,
     listState?.totalCount,
@@ -481,22 +490,45 @@ export function BoardColumn({
     });
   };
 
-  if (isExternalCollapsed) {
+  if (isColumnCollapsed) {
+    const collapsedListName = translateListName(column.name);
+    const expandLabel = isExternalCollapsed
+      ? tTasks('expand_external_tasks')
+      : tTasks('expand_task_list', { name: collapsedListName });
+    const collapsedTextColor = isExternalCollapsed
+      ? 'text-dynamic-cyan'
+      : getListTextColorClass(column.color as SupportedColor);
+
     return (
       <Card
         ref={composedRef}
         style={style}
         className={cn(
-          'group flex h-full w-14 shrink-0 snap-start flex-col items-center rounded-xl border border-dynamic-cyan/45 border-dashed bg-dynamic-cyan/[0.035] transition-all duration-200',
-          'touch-none select-none overflow-hidden hover:shadow-md'
+          'group flex h-full w-14 shrink-0 snap-start flex-col items-center rounded-xl border border-dashed transition-all duration-200',
+          'touch-none select-none overflow-hidden hover:shadow-md',
+          isExternalCollapsed
+            ? 'border-dynamic-cyan/45 bg-dynamic-cyan/[0.035]'
+            : colorClass
         )}
       >
         <button
           type="button"
-          className="flex h-full w-full flex-col items-center gap-3 rounded-xl px-1 py-3 text-dynamic-cyan transition-colors hover:bg-dynamic-cyan/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dynamic-cyan/40"
-          title={tTasks('expand_external_tasks')}
-          aria-label={tTasks('expand_external_tasks')}
-          onClick={() => onExternalTasksCollapsedChange?.(false)}
+          className={cn(
+            'flex h-full w-full flex-col items-center gap-3 rounded-xl px-1 py-3 transition-colors focus-visible:outline-none focus-visible:ring-2',
+            isExternalCollapsed
+              ? 'text-dynamic-cyan hover:bg-dynamic-cyan/10 focus-visible:ring-dynamic-cyan/40'
+              : `${collapsedTextColor} hover:bg-muted/40 focus-visible:ring-primary/40`
+          )}
+          title={expandLabel}
+          aria-label={expandLabel}
+          onClick={() => {
+            if (isExternalCollapsed) {
+              onExternalTasksCollapsedChange?.(false);
+              return;
+            }
+
+            onTaskListCollapsedChange?.(column.id, false);
+          }}
         >
           <ChevronRight className="h-4 w-4 shrink-0" />
           <Badge
@@ -509,7 +541,7 @@ export function BoardColumn({
             className="max-h-48 truncate font-medium text-[11px]"
             style={{ writingMode: 'vertical-rl' }}
           >
-            {translateListName(column.name)}
+            {collapsedListName}
           </span>
         </button>
       </Card>
@@ -688,19 +720,41 @@ export function BoardColumn({
               </Button>
             </>
           ) : (
-            <ListActions
-              listId={column.id}
-              listName={column.name}
-              listStatus={column.status}
-              listColor={column.color as SupportedColor}
-              tasks={tasks}
-              boardId={boardId}
-              wsId={wsId}
-              onUpdate={handleUpdate}
-              onSelectAll={handleSelectAll}
-              isEditOpen={isEditOpen}
-              onEditOpenChange={setIsEditOpen}
-            />
+            <>
+              {isClosedCollapsed || column.status === 'closed' ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="xs"
+                  className={cn(
+                    'h-7 w-7 p-0 hover:bg-muted/40',
+                    getListTextColorClass(column.color as SupportedColor)
+                  )}
+                  title={tTasks('collapse_task_list', {
+                    name: translateListName(column.name),
+                  })}
+                  aria-label={tTasks('collapse_task_list', {
+                    name: translateListName(column.name),
+                  })}
+                  onClick={() => onTaskListCollapsedChange?.(column.id, true)}
+                >
+                  <ChevronLeft className="h-3.5 w-3.5" />
+                </Button>
+              ) : null}
+              <ListActions
+                listId={column.id}
+                listName={column.name}
+                listStatus={column.status}
+                listColor={column.color as SupportedColor}
+                tasks={tasks}
+                boardId={boardId}
+                wsId={wsId}
+                onUpdate={handleUpdate}
+                onSelectAll={handleSelectAll}
+                isEditOpen={isEditOpen}
+                onEditOpenChange={setIsEditOpen}
+              />
+            </>
           )}
         </div>
       </div>