@tuturuuu/ui 0.9.0 → 0.10.0

package/src/components/ui/tu-do/shared/board-user-presence-avatars.tsx

@@ -5,6 +5,7 @@ import type { RealtimePresenceState } from '@tuturuuu/supabase/next/realtime';
 import type { User } from '@tuturuuu/types/primitives/User';
 import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
 import { Button } from '@tuturuuu/ui/button';
+import { useBoardPresence } from '@tuturuuu/ui/hooks/useBoardPresence';
 import type { UserPresenceState } from '@tuturuuu/ui/hooks/usePresence';
 import { Popover, PopoverContent, PopoverTrigger } from '@tuturuuu/ui/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
@@ -105,12 +106,17 @@ export function BoardUserPresenceAvatarsComponent({
   onListStatusFilterChange: (filter: ListStatusFilter) => void;
 }) {
   const wsPresence = useOptionalWorkspacePresenceContext();
+  const useWorkspacePresence = wsPresence?.realtimeEnabled === true;
+  const boardPresence = useBoardPresence(boardId, {
+    enabled: !useWorkspacePresence,
+  });
+  const activePresence = useWorkspacePresence ? wsPresence : boardPresence;
   const { openTaskById } = useTaskDialog();
   const { state: dialogState } = useTaskDialogContext();
 
   // Extract stable function refs to avoid re-running effects on every context change
-  const wsUpdateLocation = wsPresence?.updateLocation;
-  const wsUpdateMetadata = wsPresence?.updateMetadata;
+  const updateLocation = activePresence?.updateLocation;
+  const updateMetadata = activePresence?.updateMetadata;
 
   // Derive dialog props — only track task presence when editing a real task
   const dialogOpen = dialogState.isOpen;
@@ -124,26 +130,26 @@ export function BoardUserPresenceAvatarsComponent({
   // When the dialog is open with a real task → track { board, boardId, taskId }
   // Otherwise → track { board, boardId } (board-level only)
   useEffect(() => {
-    if (!wsUpdateLocation || !boardId) return;
+    if (!updateLocation || !boardId) return;
     if (dialogOpen && dialogTaskId) {
-      wsUpdateLocation({ type: 'board', boardId, taskId: dialogTaskId });
+      updateLocation({ type: 'board', boardId, taskId: dialogTaskId });
     } else {
-      wsUpdateLocation({ type: 'board', boardId });
+      updateLocation({ type: 'board', boardId });
     }
 
     return () => {
-      wsUpdateLocation({ type: 'other' });
+      updateLocation({ type: 'other' });
     };
-  }, [wsUpdateLocation, boardId, dialogOpen, dialogTaskId]);
+  }, [updateLocation, boardId, dialogOpen, dialogTaskId]);
 
   // Update metadata (filters) separately so it doesn't overwrite task-level location
   useEffect(() => {
-    if (!wsUpdateMetadata || !currentMetadata) return;
-    wsUpdateMetadata(currentMetadata as Record<string, any>);
-  }, [wsUpdateMetadata, currentMetadata]);
+    if (!updateMetadata || !currentMetadata) return;
+    updateMetadata(currentMetadata as Record<string, any>);
+  }, [updateMetadata, currentMetadata]);
 
-  const boardViewers = wsPresence?.getBoardViewers(boardId) ?? [];
-  const currentUserId = wsPresence?.currentUserId;
+  const boardViewers = activePresence?.getBoardViewers(boardId) ?? [];
+  const currentUserId = activePresence?.currentUserId;
 
   const presenceState: RealtimePresenceState<UserPresenceState> =
     useMemo(() => {

package/src/components/ui/tu-do/shared/board-views.tsx

@@ -94,17 +94,6 @@ const DEFAULT_TASK_FILTERS: TaskFilters = {
   sourceBoardIds: [],
 };
 
-function hasAssignedExternalTasks(tasks: Task[], boardId: string) {
-  const externalStagingListId = getPersonalExternalStagingListId(boardId);
-
-  return tasks.some(
-    (task) =>
-      task.is_personal_external === true ||
-      task.list_id === externalStagingListId ||
-      Boolean(task.source_workspace_id)
-  );
-}
-
 function getClosedTaskListCollapsedStorageKey(boardId: string, listId: string) {
   return `${CLOSED_TASK_LIST_COLLAPSED_STORAGE_PREFIX}:${boardId}:${listId}`;
 }
@@ -246,13 +235,18 @@ function sortLocalTasks(tasks: Task[], sortBy: TaskFilters['sortBy']) {
 interface Props {
   workspace: Workspace;
   workspaceTier?: WorkspaceProductTier | null;
-  board: WorkspaceTaskBoard;
+  board: WorkspaceTaskBoard & {
+    access_type?: 'member' | 'guest';
+    guest_permission?: 'view' | 'edit' | null;
+    has_guest_access?: boolean;
+  };
   tasks: Task[];
   lists: TaskList[];
   workspaceLabels: WorkspaceLabel[];
   availableViews?: ViewType[];
   canManageBoard?: boolean;
   currentUserId?: string;
+  defaultView?: ViewType;
   idleBottomIsland?: ReactNode;
   publicHeaderPrefix?: ReactNode;
   publicView?: boolean;
@@ -268,6 +262,7 @@ export function BoardViews({
   availableViews,
   canManageBoard = true,
   currentUserId,
+  defaultView,
   idleBottomIsland,
   publicHeaderPrefix,
   publicView = false,
@@ -297,6 +292,18 @@ export function BoardViews({
     useState(false);
   const { createTask } = useTaskDialog();
   const localTaskState = readOnly || publicView;
+  const boardAssigneesEnabled =
+    !workspace.personal ||
+    board.access_type === 'guest' ||
+    board.has_guest_access === true;
+  const assigneeMemberSource: 'workspace' | 'board' | 'workspace-and-board' =
+    board.access_type === 'guest'
+      ? 'board'
+      : board.has_guest_access === true
+        ? workspace.personal
+          ? 'board'
+          : 'workspace-and-board'
+        : 'workspace';
   const { data: pinnedSpecialListsRaw } = useUserWorkspaceConfig(
     effectiveWorkspaceId,
     TASK_BOARD_PINNED_SPECIAL_LISTS_CONFIG_ID,
@@ -452,6 +459,7 @@ export function BoardViews({
     const result = await listWorkspaceTasks(effectiveWorkspaceId, {
       ...taskQueryOptions,
       boardId: board.id,
+      includeRelationshipSummary: false,
       listStatuses: listStatusesForQuery,
       limit: 200,
     });
@@ -545,12 +553,15 @@ export function BoardViews({
         : (new URLSearchParams(window.location.search).get(
             'view'
           ) as ViewType | null);
-    const defaultView = enabledViews?.[0] ?? 'kanban';
+    const fallbackView = enabledViews?.[0] ?? 'kanban';
+    const routeDefaultView =
+      defaultView && viewIsEnabled(defaultView) ? defaultView : null;
+    const effectiveDefaultView = routeDefaultView ?? fallbackView;
     const initialView =
       requestedView && viewIsEnabled(requestedView) ? requestedView : null;
 
     if (!savedConfig) {
-      setCurrentView(initialView ?? defaultView);
+      setCurrentView(initialView ?? effectiveDefaultView);
       setFilters(DEFAULT_TASK_FILTERS);
       setListStatusFilter('all');
       return;
@@ -558,16 +569,17 @@ export function BoardViews({
 
     setCurrentView(
       initialView ??
+        routeDefaultView ??
         (viewIsEnabled(savedConfig.currentView)
           ? savedConfig.currentView
-          : defaultView)
+          : effectiveDefaultView)
     );
     setFilters({
       ...DEFAULT_TASK_FILTERS,
       ...savedConfig.filters,
     });
     setListStatusFilter(savedConfig.listStatusFilter);
-  }, [board.id, enabledViews, viewIsEnabled]);
+  }, [board.id, defaultView, enabledViews, viewIsEnabled]);
 
   useEffect(() => {
     if (!workspace.personal || typeof window === 'undefined') {
@@ -581,15 +593,11 @@ export function BoardViews({
     const storedPreference =
       storedValue === null ? null : storedValue === 'true';
 
-    setExternalTasksCollapsed(
-      storedPreference ?? !hasAssignedExternalTasks(tasks, board.id)
-    );
-  }, [board.id, tasks, workspace.personal]);
+    setExternalTasksCollapsed(storedPreference ?? true);
+  }, [board.id, workspace.personal]);
 
   const handleExternalTasksCollapsedChange = useCallback(
     (collapsed: boolean) => {
-      if (collapsed && specialTaskListPins.external_tasks) return;
-
       setExternalTasksCollapsed(collapsed);
 
       if (!workspace.personal || typeof window === 'undefined') return;
@@ -599,7 +607,7 @@ export function BoardViews({
         String(collapsed)
       );
     },
-    [board.id, specialTaskListPins.external_tasks, workspace.personal]
+    [board.id, workspace.personal]
   );
 
   useEffect(() => {
@@ -635,16 +643,6 @@ export function BoardViews({
 
   const handleTaskListCollapsedChange = useCallback(
     (listId: string, collapsed: boolean) => {
-      if (
-        collapsed &&
-        specialTaskListPins.closed_tasks &&
-        boardLists.some(
-          (list) => list.id === listId && list.status === 'closed'
-        )
-      ) {
-        return;
-      }
-
       setClosedTaskListsCollapsed((previous) => ({
         ...previous,
         [listId]: collapsed,
@@ -657,7 +655,7 @@ export function BoardViews({
         String(collapsed)
       );
     },
-    [board.id, boardLists, specialTaskListPins.closed_tasks]
+    [board.id]
   );
 
   useEffect(() => {
@@ -674,7 +672,7 @@ export function BoardViews({
 
         next[section] =
           storedValue === null
-            ? (previous[section] ?? false)
+            ? (previous[section] ?? true)
             : storedValue === 'true';
       }
 
@@ -684,14 +682,6 @@ export function BoardViews({
 
   const handleDeadlineSectionCollapsedChange = useCallback(
     (section: KanbanDeadlineSection, collapsed: boolean) => {
-      if (
-        collapsed &&
-        ((section === 'overdue' && specialTaskListPins.overdue) ||
-          (section === 'upcoming' && specialTaskListPins.upcoming))
-      ) {
-        return;
-      }
-
       setDeadlineSectionsCollapsed((previous) => ({
         ...previous,
         [section]: collapsed,
@@ -704,7 +694,7 @@ export function BoardViews({
         String(collapsed)
       );
     },
-    [board.id, specialTaskListPins.overdue, specialTaskListPins.upcoming]
+    [board.id]
   );
 
   const externalStagingList = useMemo<TaskList | null>(() => {
@@ -722,15 +712,12 @@ export function BoardViews({
       color: 'CYAN',
       position: Number.MIN_SAFE_INTEGER,
       is_external_staging: true,
-      is_external_collapsed: specialTaskListPins.external_tasks
-        ? false
-        : externalTasksCollapsed,
+      is_external_collapsed: externalTasksCollapsed,
     };
   }, [
     board.created_at,
     board.id,
     externalTasksCollapsed,
-    specialTaskListPins.external_tasks,
     tTasks,
     workspace.personal,
   ]);
@@ -742,38 +729,22 @@ export function BoardViews({
         list.status === 'closed'
           ? {
               ...list,
-              is_collapsed: specialTaskListPins.closed_tasks
-                ? false
-                : (closedTaskListsCollapsed[list.id] ?? true),
+              is_collapsed: closedTaskListsCollapsed[list.id] ?? true,
             }
           : list
       );
     return externalStagingList
       ? [externalStagingList, ...realLists]
       : realLists;
-  }, [
-    boardLists,
-    closedTaskListsCollapsed,
-    externalStagingList,
-    specialTaskListPins.closed_tasks,
-  ]);
+  }, [boardLists, closedTaskListsCollapsed, externalStagingList]);
 
   const effectiveDeadlineSectionsCollapsed =
     useMemo<KanbanDeadlineCollapsedState>(
       () => ({
-        overdue: specialTaskListPins.overdue
-          ? false
-          : deadlineSectionsCollapsed.overdue,
-        upcoming: specialTaskListPins.upcoming
-          ? false
-          : deadlineSectionsCollapsed.upcoming,
+        overdue: deadlineSectionsCollapsed.overdue,
+        upcoming: deadlineSectionsCollapsed.upcoming,
       }),
-      [
-        deadlineSectionsCollapsed.overdue,
-        deadlineSectionsCollapsed.upcoming,
-        specialTaskListPins.overdue,
-        specialTaskListPins.upcoming,
-      ]
+      [deadlineSectionsCollapsed.overdue, deadlineSectionsCollapsed.upcoming]
     );
 
   const { data: filteredListCounts, isFetching: isFilteredListCountsFetching } =
@@ -1049,6 +1020,8 @@ export function BoardViews({
             specialTaskListPins={specialTaskListPins}
             onSpecialTaskListPinnedChange={handleSpecialTaskListPinnedChange}
             onBulkSelectionActiveChange={setKanbanBulkSelectionActive}
+            canUseBoardAssignees={boardAssigneesEnabled}
+            assigneeMemberSource={assigneeMemberSource}
             readOnly={readOnly}
           />
         );
@@ -1082,6 +1055,8 @@ export function BoardViews({
             tasks={effectiveTasks}
             lists={filteredLists}
             isPersonalWorkspace={workspace.personal}
+            canUseBoardAssignees={boardAssigneesEnabled}
+            assigneeMemberSource={assigneeMemberSource}
             preserveTaskOrder={!!filters.sortBy}
             searchQuery={filters.searchQuery}
             readOnly={readOnly}
@@ -1094,6 +1069,9 @@ export function BoardViews({
             boardId={board.id}
             tasks={effectiveTasks}
             lists={filteredLists}
+            isPersonalWorkspace={workspace.personal}
+            canUseBoardAssignees={boardAssigneesEnabled}
+            assigneeMemberSource={assigneeMemberSource}
             onTaskPartialUpdate={handleTaskPartialUpdate}
           />
         );
@@ -1182,6 +1160,8 @@ export function BoardViews({
             specialTaskListPins={specialTaskListPins}
             onSpecialTaskListPinnedChange={handleSpecialTaskListPinnedChange}
             onBulkSelectionActiveChange={setKanbanBulkSelectionActive}
+            canUseBoardAssignees={boardAssigneesEnabled}
+            assigneeMemberSource={assigneeMemberSource}
             readOnly={readOnly}
           />
         );

package/src/components/ui/tu-do/shared/list-view.tsx

@@ -61,6 +61,7 @@ import { useLocale, useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useBulkOperations } from '../boards/boardId/kanban/bulk/bulk-operations';
+import type { TaskCardAssigneeMemberSource } from '../boards/boardId/task-card/task-card';
 import {
   getTaskCardHydratingOpenOptions,
   isExternalTaskSnapshot,
@@ -85,6 +86,8 @@ interface Props {
   tasks: Task[];
   lists: TaskList[];
   isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskCardAssigneeMemberSource;
   preserveTaskOrder?: boolean;
   searchQuery?: string;
   weekStartsOn?: 0 | 1 | 6;
@@ -118,6 +121,7 @@ function ReadOnlyListView({
   tasks,
   lists,
   isPersonalWorkspace = false,
+  canUseBoardAssignees,
   preserveTaskOrder = false,
   searchQuery,
 }: Props) {
@@ -127,6 +131,7 @@ function ReadOnlyListView({
   const dateLocale = locale === 'vi' ? vi : enUS;
   const [sortField, setSortField] = useState<ListViewSortField>('created_at');
   const [sortOrder, setSortOrder] = useState<ListViewSortOrder>('desc');
+  const showAssignees = canUseBoardAssignees ?? !isPersonalWorkspace;
   const listsById = useMemo(
     () => new Map(lists.map((list) => [list.id, list])),
     [lists]
@@ -227,7 +232,7 @@ function ReadOnlyListView({
                     {getSortIcon('end_date')}
                   </Button>
                 </TableHead>
-                {!isPersonalWorkspace && (
+                {showAssignees && (
                   <TableHead className="h-9 w-32 px-2">
                     <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
                       {tc('assignee')}
@@ -300,7 +305,7 @@ function ReadOnlyListView({
                         </span>
                       )}
                     </TableCell>
-                    {!isPersonalWorkspace && (
+                    {showAssignees && (
                       <TableCell className="px-2 py-2">
                         {task.assignees && task.assignees.length > 0 && (
                           <div className="flex flex-wrap gap-1">
@@ -337,6 +342,8 @@ function InteractiveListView({
   tasks,
   lists,
   isPersonalWorkspace = false,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   preserveTaskOrder = false,
   searchQuery,
   weekStartsOn = 0,
@@ -360,6 +367,9 @@ function InteractiveListView({
   const previousWorkspaceIdRef = useRef(workspaceId);
   const previousBoardIdRef = useRef(boardId);
   const { openTask, openTaskById } = useTaskDialog();
+  const showAssignees = canUseBoardAssignees ?? !isPersonalWorkspace;
+  const effectiveAssigneeMemberSource =
+    assigneeMemberSource ?? (isPersonalWorkspace ? 'board' : 'workspace');
 
   // Infinite scroll
   const [displayCount, setDisplayCount] = useState(50);
@@ -372,7 +382,7 @@ function InteractiveListView({
     priority: true,
     start_date: false,
     end_date: true,
-    assignees: !isPersonalWorkspace,
+    assignees: showAssignees,
     actions: true,
   });
 
@@ -516,6 +526,10 @@ function InteractiveListView({
           availableLists: lists,
           effectiveWorkspaceId: workspaceId,
           isPersonalWorkspace,
+          canUseBoardAssignees: task.source_workspace_id ? true : showAssignees,
+          assigneeMemberSource: task.source_workspace_id
+            ? 'workspace'
+            : effectiveAssigneeMemberSource,
         })
       );
       return;
@@ -524,6 +538,8 @@ function InteractiveListView({
     openTask(task, boardId, lists, false, {
       taskWsId: workspaceId,
       taskWorkspacePersonal: isPersonalWorkspace,
+      canUseBoardAssignees: showAssignees,
+      assigneeMemberSource: effectiveAssigneeMemberSource,
     });
   }
 
@@ -972,6 +988,8 @@ function InteractiveListView({
                             workspaceId={workspaceId}
                             lists={lists}
                             isPersonalWorkspace={isPersonalWorkspace}
+                            canUseBoardAssignees={showAssignees}
+                            assigneeMemberSource={effectiveAssigneeMemberSource}
                             onUpdate={() => {
                               void queryClient.invalidateQueries({
                                 queryKey: ['tasks', boardId],

package/src/components/ui/tu-do/shared/task-board-loading-state.tsx

@@ -14,15 +14,15 @@ export function TaskBoardLoadingState({
     <div
       aria-busy="true"
       className={cn(
-        'w-full overflow-hidden bg-transparent',
+        'overflow-hidden bg-transparent',
         root
-          ? '-m-4 h-[calc(100dvh+2rem)] min-h-[calc(32rem+2rem)]'
-          : 'h-[calc(100dvh-1rem)] min-h-[32rem]',
+          ? '-m-4 h-[calc(100dvh+2rem)] min-h-[calc(32rem+2rem)] w-[calc(100%+2rem)] min-w-[calc(100%+2rem)]'
+          : 'h-[calc(100dvh-1rem)] min-h-[32rem] w-full',
         className
       )}
       data-testid="task-board-loading-state"
     >
-      <KanbanSkeleton />
+      <KanbanSkeleton root={root} />
     </div>
   );
 }