@tuturuuu/ui 0.8.0 → 0.10.0

package/src/components/ui/tu-do/boards/boardId/task-list.tsx

@@ -10,6 +10,7 @@ import { useTranslations } from 'next-intl';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { DragPreviewPosition } from './kanban/dnd/use-kanban-dnd';
 import { MeasuredTaskCard } from './task';
+import type { TaskCardAssigneeMemberSource } from './task-card/task-card';
 
 const VIRTUALIZE_THRESHOLD = 60; // only virtualize for fairly large lists
 const ESTIMATED_ITEM_HEIGHT = 96; // px including margin (space-y-2 gap)
@@ -33,6 +34,8 @@ interface VirtualizedTaskListProps {
   isMultiSelectMode?: boolean;
   selectedTasks?: Set<string>;
   isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskCardAssigneeMemberSource;
   onTaskSelect?: (taskId: string, event: React.MouseEvent) => void;
   onClearSelection?: () => void;
   dragPreviewPosition?: DragPreviewPosition | null;
@@ -43,6 +46,7 @@ interface VirtualizedTaskListProps {
   onLoadMore?: () => void;
   hasMore?: boolean;
   isLoadingMore?: boolean;
+  readOnly?: boolean;
 }
 
 interface TaskListContentProps {
@@ -55,6 +59,8 @@ interface TaskListContentProps {
   isMultiSelectMode?: boolean;
   selectedTasks?: Set<string>;
   isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskCardAssigneeMemberSource;
   onTaskSelect?: (taskId: string, event: React.MouseEvent) => void;
   onClearSelection?: () => void;
   dragPreviewPosition?: DragPreviewPosition | null;
@@ -64,6 +70,7 @@ interface TaskListContentProps {
   bulkUpdateCustomDueDate?: (date: Date | null) => Promise<void>;
   startIndex?: number;
   taskOrder?: Pick<Task, 'id'>[];
+  readOnly?: boolean;
 }
 
 export function getTaskDragPreviewSlotIndex({
@@ -123,6 +130,8 @@ function TaskListContent({
   isMultiSelectMode,
   selectedTasks,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   onTaskSelect,
   onClearSelection,
   dragPreviewPosition,
@@ -132,6 +141,7 @@ function TaskListContent({
   bulkUpdateCustomDueDate,
   startIndex = 0,
   taskOrder = tasks,
+  readOnly = false,
 }: TaskListContentProps) {
   const slotIndex = getTaskDragPreviewSlotIndex({
     columnId: column.id,
@@ -162,6 +172,8 @@ function TaskListContent({
               )}
               isMultiSelectMode={isMultiSelectMode}
               isPersonalWorkspace={isPersonalWorkspace}
+              canUseBoardAssignees={canUseBoardAssignees}
+              assigneeMemberSource={assigneeMemberSource}
               onSelect={onTaskSelect}
               onClearSelection={onClearSelection}
               suppressSortableTransform={suppressSortableTransform}
@@ -170,6 +182,7 @@ function TaskListContent({
               optimisticUpdateInProgress={optimisticUpdateInProgress}
               selectedTasks={selectedTasks}
               bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
+              readOnly={readOnly}
             />
             {slotIndex === globalIndex + 1 && (
               <DragPreviewSlot
@@ -228,6 +241,8 @@ function VirtualizedTaskListInner({
   isMultiSelectMode,
   selectedTasks,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   onTaskSelect,
   onClearSelection,
   dragPreviewPosition,
@@ -238,6 +253,7 @@ function VirtualizedTaskListInner({
   onLoadMore,
   hasMore,
   isLoadingMore,
+  readOnly = false,
 }: VirtualizedTaskListProps) {
   const t = useTranslations('common');
   const tTasks = useTranslations('ws-tasks');
@@ -465,6 +481,8 @@ function VirtualizedTaskListInner({
                 isMultiSelectMode={isMultiSelectMode}
                 selectedTasks={selectedTasks}
                 isPersonalWorkspace={isPersonalWorkspace}
+                canUseBoardAssignees={canUseBoardAssignees}
+                assigneeMemberSource={assigneeMemberSource}
                 onTaskSelect={onTaskSelect}
                 onClearSelection={onClearSelection}
                 dragPreviewPosition={dragPreviewPosition}
@@ -474,6 +492,7 @@ function VirtualizedTaskListInner({
                 bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
                 startIndex={startIndex}
                 taskOrder={tasks}
+                readOnly={readOnly}
               />
             </div>
           </div>
@@ -494,6 +513,8 @@ function VirtualizedTaskListInner({
             isMultiSelectMode={isMultiSelectMode}
             selectedTasks={selectedTasks}
             isPersonalWorkspace={isPersonalWorkspace}
+            canUseBoardAssignees={canUseBoardAssignees}
+            assigneeMemberSource={assigneeMemberSource}
             onTaskSelect={onTaskSelect}
             onClearSelection={onClearSelection}
             dragPreviewPosition={dragPreviewPosition}
@@ -502,6 +523,7 @@ function VirtualizedTaskListInner({
             optimisticUpdateInProgress={optimisticUpdateInProgress}
             bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
             taskOrder={tasks}
+            readOnly={readOnly}
           />
           {loadMoreSentinel}
         </SortableContext>

package/src/components/ui/tu-do/boards/boardId/timeline/timeline-grid.tsx

@@ -28,6 +28,9 @@ interface TimelineGridProps {
   localTasks: Task[];
   boardId?: string;
   wsId?: string;
+  isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   dayWidth: number;
   sidebarWidth: number;
   timelineWidth: number;
@@ -71,6 +74,9 @@ export function TimelineGrid({
   localTasks,
   boardId,
   wsId,
+  isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   dayWidth,
   sidebarWidth,
   timelineWidth,
@@ -223,6 +229,9 @@ export function TimelineGrid({
                   )}
                   boardId={boardId}
                   wsId={wsId}
+                  isPersonalWorkspace={isPersonalWorkspace}
+                  canUseBoardAssignees={canUseBoardAssignees}
+                  assigneeMemberSource={assigneeMemberSource}
                   dayWidth={dayWidth}
                   timelineWidth={timelineWidth}
                   sidebarWidth={sidebarWidth}

package/src/components/ui/tu-do/boards/boardId/timeline/timeline-task-row.tsx

@@ -39,6 +39,9 @@ interface TimelineTaskRowProps {
   lists: TaskList[];
   boardId?: string;
   wsId?: string;
+  isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   dayWidth: number;
   timelineWidth: number;
   sidebarWidth: number;
@@ -75,6 +78,9 @@ export function TimelineTaskRow({
   lists,
   boardId,
   wsId,
+  isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   dayWidth,
   timelineWidth,
   sidebarWidth,
@@ -235,6 +241,9 @@ export function TimelineTaskRow({
               boardId={boardId}
               workspaceId={wsId}
               lists={lists}
+              isPersonalWorkspace={isPersonalWorkspace}
+              canUseBoardAssignees={canUseBoardAssignees}
+              assigneeMemberSource={assigneeMemberSource}
               onUpdate={onActionsUpdate ?? (() => undefined)}
               open={actionsMenu.open}
               onOpenChange={(open) =>

package/src/components/ui/tu-do/boards/boardId/timeline/timeline-toolbar.tsx

@@ -34,6 +34,9 @@ interface TimelineToolbarProps {
   lists: TaskList[];
   boardId?: string;
   wsId?: string;
+  isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   primaryCreateListId: string | null;
   dayWidth: number;
   setDayWidth: (value: number) => void;
@@ -66,6 +69,9 @@ export function TimelineToolbar({
   lists,
   boardId,
   wsId,
+  isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   primaryCreateListId,
   dayWidth,
   setDayWidth,
@@ -221,6 +227,9 @@ export function TimelineToolbar({
                                 boardId={boardId}
                                 workspaceId={wsId}
                                 lists={lists}
+                                isPersonalWorkspace={isPersonalWorkspace}
+                                canUseBoardAssignees={canUseBoardAssignees}
+                                assigneeMemberSource={assigneeMemberSource}
                                 onUpdate={onActionsUpdate ?? (() => undefined)}
                                 open={openTaskMenu?.taskId === task.id}
                                 onOpenChange={(open) =>

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

@@ -65,6 +65,9 @@ export interface TimelineProps {
   lists: TaskList[];
   boardId?: string;
   wsId?: string;
+  isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   className?: string;
   onTaskPartialUpdate?: (taskId: string, updates: Partial<Task>) => void;
 }
@@ -110,6 +113,9 @@ export function TimelineBoard({
   lists,
   boardId,
   wsId,
+  isPersonalWorkspace = false,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   className,
   onTaskPartialUpdate,
 }: TimelineProps) {
@@ -227,6 +233,9 @@ export function TimelineBoard({
     (task: Task) => task.source_workspace_id ?? wsId ?? null,
     [wsId]
   );
+  const showAssignees = canUseBoardAssignees ?? !isPersonalWorkspace;
+  const effectiveAssigneeMemberSource =
+    assigneeMemberSource ?? (isPersonalWorkspace ? 'board' : 'workspace');
 
   const openTimelineTask = useCallback(
     (task: Task) => {
@@ -240,7 +249,13 @@ export function TimelineBoard({
             boardId,
             availableLists: lists,
             effectiveWorkspaceId: wsId,
-            isPersonalWorkspace: Boolean(wsId),
+            isPersonalWorkspace,
+            canUseBoardAssignees: task.source_workspace_id
+              ? true
+              : showAssignees,
+            assigneeMemberSource: task.source_workspace_id
+              ? 'workspace'
+              : effectiveAssigneeMemberSource,
           })
         );
         return;
@@ -248,10 +263,21 @@ export function TimelineBoard({
 
       openTask(task, boardId, lists, false, {
         taskWsId: wsId,
-        taskWorkspacePersonal: Boolean(wsId),
+        taskWorkspacePersonal: isPersonalWorkspace,
+        canUseBoardAssignees: showAssignees,
+        assigneeMemberSource: effectiveAssigneeMemberSource,
       });
     },
-    [boardId, lists, openTask, openTaskById, wsId]
+    [
+      boardId,
+      effectiveAssigneeMemberSource,
+      isPersonalWorkspace,
+      lists,
+      openTask,
+      openTaskById,
+      showAssignees,
+      wsId,
+    ]
   );
 
   const clearDraft = useCallback((taskId: string) => {
@@ -674,6 +700,9 @@ export function TimelineBoard({
       <TimelineToolbar
         boardId={boardId}
         wsId={wsId}
+        isPersonalWorkspace={isPersonalWorkspace}
+        canUseBoardAssignees={showAssignees}
+        assigneeMemberSource={effectiveAssigneeMemberSource}
         dayWidth={dayWidth}
         density={density}
         formatLongDate={formatLongDate}
@@ -703,6 +732,9 @@ export function TimelineBoard({
           barHeight={densityConfig.barHeight}
           boardId={boardId}
           wsId={wsId}
+          isPersonalWorkspace={isPersonalWorkspace}
+          canUseBoardAssignees={showAssignees}
+          assigneeMemberSource={effectiveAssigneeMemberSource}
           dayWidth={dayWidth}
           draggedUnscheduledTaskId={draggedUnscheduledTaskId}
           dropPreview={dropPreview}

package/src/components/ui/tu-do/boards/form.tsx

@@ -209,7 +209,7 @@ export function TaskBoardForm({
                         autoComplete="off"
                         autoFocus
                         {...field}
-                        className="h-10"
+                        className="h-10 bg-background"
                       />
                     </FormControl>
                     <FormMessage />

package/src/components/ui/tu-do/boards/share-section.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { ChevronDown, Info } from '@tuturuuu/icons';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@tuturuuu/ui/collapsible';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+
+function ShareInfoTooltip({
+  content,
+  label,
+}: {
+  content: string;
+  label: string;
+}) {
+  return (
+    <TooltipProvider delayDuration={0} skipDelayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+            aria-label={label}
+          >
+            <Info className="h-3.5 w-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs">{content}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+interface ShareSectionProps {
+  children: ReactNode;
+  icon: ReactNode;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  statusBadge: ReactNode;
+  title: string;
+  tooltip: string;
+}
+
+export function ShareSection({
+  children,
+  icon,
+  onOpenChange,
+  open,
+  statusBadge,
+  title,
+  tooltip,
+}: ShareSectionProps) {
+  const t = useTranslations();
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={onOpenChange}
+      className="rounded-md border"
+    >
+      <div className="flex min-h-11 items-center gap-2 px-3">
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex min-w-0 flex-1 items-center gap-2 text-left transition-colors hover:text-foreground"
+          >
+            {icon}
+            <span className="min-w-0 flex-1 truncate font-medium text-sm">
+              {title}
+            </span>
+            {statusBadge}
+            <ChevronDown
+              className={cn(
+                'h-4 w-4 shrink-0 text-muted-foreground transition-transform',
+                open && 'rotate-180'
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <ShareInfoTooltip
+          label={t('ws-task-boards.share.note')}
+          content={tooltip}
+        />
+      </div>
+      <CollapsibleContent className="border-t p-3">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/components/ui/tu-do/drafts/draft-convert-dialog.tsx

@@ -2,6 +2,7 @@
 
 import { useQuery } from '@tanstack/react-query';
 import {
+  convertWorkspaceTaskDraft,
   listWorkspaceTaskBoards,
   listWorkspaceTaskLists,
 } from '@tuturuuu/internal-api';
@@ -46,6 +47,10 @@ export function DraftConvertDialog({
   const [selectedBoardId, setSelectedBoardId] = useState<string>('');
   const [selectedListId, setSelectedListId] = useState<string>('');
   const [isConverting, setIsConverting] = useState(false);
+  const internalApiOptions =
+    typeof window !== 'undefined'
+      ? { baseUrl: window.location.origin }
+      : undefined;
 
   // Sync selections when draft changes (useState initializer only runs on mount)
   useEffect(() => {
@@ -107,20 +112,13 @@ export function DraftConvertDialog({
 
     setIsConverting(true);
     try {
-      const res = await fetch(
-        `/api/v1/workspaces/${wsId}/task-drafts/${draft.id}/convert`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ listId: selectedListId }),
-        }
+      await convertWorkspaceTaskDraft(
+        wsId,
+        draft.id,
+        { listId: selectedListId },
+        internalApiOptions
       );
 
-      if (!res.ok) {
-        const data = await res.json();
-        throw new Error(data.error || 'Failed to convert draft');
-      }
-
       toast.success(t('converted_success'));
       onConverted();
       onClose();

package/src/components/ui/tu-do/drafts/drafts-page.tsx

@@ -2,6 +2,10 @@
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FileText } from '@tuturuuu/icons';
+import {
+  deleteWorkspaceTaskDraft,
+  listWorkspaceTaskDrafts,
+} from '@tuturuuu/internal-api/tasks';
 import { toast } from '@tuturuuu/ui/sonner';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -11,38 +15,51 @@ import { DraftConvertDialog } from './draft-convert-dialog';
 
 interface DraftsPageProps {
   wsId: string;
+  boardId?: string;
+  includeUnassignedForBoard?: boolean;
 }
 
-export function DraftsPage({ wsId }: DraftsPageProps) {
+function getBrowserInternalApiOptions() {
+  return typeof window !== 'undefined'
+    ? { baseUrl: window.location.origin }
+    : undefined;
+}
+
+export function DraftsPage({
+  wsId,
+  boardId,
+  includeUnassignedForBoard = false,
+}: DraftsPageProps) {
   const t = useTranslations('task-drafts');
   const queryClient = useQueryClient();
   const { editDraft } = useTaskDialogContext();
   const [convertDraft, setConvertDraft] = useState<TaskDraft | null>(null);
+  const draftQueryKey = [
+    'task-drafts',
+    wsId,
+    boardId ?? 'all',
+    includeUnassignedForBoard,
+  ] as const;
 
   const { data: drafts = [], isLoading } = useQuery<TaskDraft[]>({
-    queryKey: ['task-drafts', wsId],
-    queryFn: async () => {
-      const res = await fetch(`/api/v1/workspaces/${wsId}/task-drafts`);
-      if (!res.ok) throw new Error('Failed to fetch drafts');
-      const json = await res.json();
-      return json.data;
-    },
+    queryKey: draftQueryKey,
+    queryFn: () =>
+      listWorkspaceTaskDrafts(
+        wsId,
+        { boardId, includeUnassignedForBoard },
+        getBrowserInternalApiOptions()
+      ) as Promise<TaskDraft[]>,
   });
 
   const deleteMutation = useMutation({
-    mutationFn: async (draftId: string) => {
-      const res = await fetch(
-        `/api/v1/workspaces/${wsId}/task-drafts/${draftId}`,
-        { method: 'DELETE' }
-      );
-      if (!res.ok) throw new Error('Failed to delete draft');
-    },
+    mutationFn: async (draftId: string) =>
+      deleteWorkspaceTaskDraft(wsId, draftId, getBrowserInternalApiOptions()),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['task-drafts', wsId] });
       toast.success(t('deleted_success'));
     },
     onError: () => {
-      toast.error('Failed to delete draft');
+      toast.error(t('delete_failed'));
     },
   });
 

package/src/components/ui/tu-do/hooks/__tests__/useTaskLabelManagement.test.tsx

@@ -190,6 +190,46 @@ describe('useTaskLabelManagement', () => {
       );
     });
 
+    it('updates full-board and task detail caches without invalidating visible board queries', async () => {
+      queryClient.setQueryData(['tasks', 'board-1'], [mockTask]);
+      queryClient.setQueryData(['tasks-full', 'board-1', 'all'], [mockTask]);
+      queryClient.setQueryData(['task', 'task-1'], mockTask);
+      const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries');
+
+      const { result } = renderHook(
+        () =>
+          useTaskLabelManagement({
+            task: mockTask,
+            boardId: 'board-1',
+            workspaceLabels: mockWorkspaceLabels,
+            workspaceId: 'ws-1',
+            taskId: 'task-1',
+          }),
+        { wrapper }
+      );
+
+      await act(async () => {
+        await result.current.toggleTaskLabel('label-3');
+      });
+
+      expect(
+        queryClient
+          .getQueryData<Task[]>(['tasks-full', 'board-1', 'all'])?.[0]
+          ?.labels?.some((label) => label.id === 'label-3')
+      ).toBe(true);
+      expect(
+        queryClient
+          .getQueryData<Task>(['task', 'task-1'])
+          ?.labels?.some((label) => label.id === 'label-3')
+      ).toBe(true);
+      expect(invalidateSpy).not.toHaveBeenCalledWith({
+        queryKey: ['tasks', 'board-1'],
+      });
+      expect(invalidateSpy).not.toHaveBeenCalledWith({
+        queryKey: ['tasks-full', 'board-1'],
+      });
+    });
+
     it('should rollback on error and show toast', async () => {
       mockRemoveWorkspaceTaskLabel.mockRejectedValueOnce(
         new Error('Database error')
@@ -197,6 +237,8 @@ describe('useTaskLabelManagement', () => {
 
       const originalTasks = [mockTask];
       queryClient.setQueryData(['tasks', 'board-1'], originalTasks);
+      queryClient.setQueryData(['tasks-full', 'board-1', 'all'], originalTasks);
+      queryClient.setQueryData(['task', 'task-1'], mockTask);
 
       const { result } = renderHook(
         () =>
@@ -219,6 +261,12 @@ describe('useTaskLabelManagement', () => {
         'board-1',
       ]);
       expect(cachedTasks).toEqual(originalTasks);
+      expect(
+        queryClient.getQueryData<Task[]>(['tasks-full', 'board-1', 'all'])
+      ).toEqual(originalTasks);
+      expect(queryClient.getQueryData<Task>(['task', 'task-1'])).toEqual(
+        mockTask
+      );
 
       // Verify error toast was shown with the correct format
       expect(mockToast.error).toHaveBeenCalledWith('Error', {