@tuturuuu/ui 0.9.0 → 0.10.0

package/src/components/ui/tu-do/boards/boardId/kanban/rendering/kanban-deadline-panels.tsx

@@ -30,6 +30,7 @@ import {
   DropdownMenuTrigger,
 } from '@tuturuuu/ui/dropdown-menu';
 import { cn } from '@tuturuuu/utils/format';
+import type React from 'react';
 import { useMemo, useState } from 'react';
 import { TaskCard } from '../../task';
 import type { KanbanDeadlineSections } from './kanban-deadline-tasks';
@@ -64,6 +65,8 @@ interface KanbanDeadlinePanelsProps {
   boardId: string;
   bulkUpdateCustomDueDate: (date: Date | null) => Promise<void>;
   isPersonalWorkspace: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   labels: KanbanDeadlineLabels;
   onClearSelection: () => void;
   onSectionCollapsedChange?: (
@@ -78,8 +81,10 @@ interface KanbanDeadlinePanelsProps {
   onUpdate: () => void;
   optimisticUpdateInProgress: Set<string>;
   sections: KanbanDeadlineSections;
+  loading?: boolean;
   collapsedSections?: KanbanDeadlineCollapsedState;
   pinnedSections?: KanbanDeadlineCollapsedState;
+  stickyOffsets?: Partial<Record<KanbanDeadlineSection, string>>;
   deadlineNow?: number;
   selectedTasks: Set<string>;
   taskLists: TaskList[];
@@ -216,6 +221,34 @@ function getTaskListForDeadlineTask(task: Task, lists: TaskList[]) {
   );
 }
 
+function DeadlineSectionSkeleton({
+  section,
+}: {
+  section: KanbanDeadlineSection;
+}) {
+  return (
+    <div
+      aria-hidden="true"
+      className="space-y-2"
+      data-testid={`kanban-deadline-section-${section}-loading`}
+    >
+      {Array.from({ length: 3 }, (_, index) => (
+        <div
+          className="rounded-lg border border-border/60 bg-background/60 p-3"
+          key={index}
+        >
+          <div className="h-3 w-3/4 animate-pulse rounded bg-muted" />
+          <div className="mt-3 h-2 w-1/2 animate-pulse rounded bg-muted" />
+          <div className="mt-2 flex gap-2">
+            <div className="h-2 w-14 animate-pulse rounded bg-muted" />
+            <div className="h-2 w-10 animate-pulse rounded bg-muted" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function DeadlineSection({
   availableLists,
   boardId,
@@ -223,9 +256,12 @@ function DeadlineSection({
   collapsed,
   config,
   deadlineNow,
+  loading,
   labels,
   isMultiSelectMode,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   onClearSelection,
   onCollapsedChange,
   onPinnedChange,
@@ -234,6 +270,7 @@ function DeadlineSection({
   optimisticUpdateInProgress,
   pinned,
   selectedTasks,
+  stickyOffset,
   taskLists,
   tasks,
   workspaceId,
@@ -244,9 +281,12 @@ function DeadlineSection({
   collapsed: boolean;
   config: DeadlineSectionConfig;
   deadlineNow?: number;
+  loading?: boolean;
   labels: KanbanDeadlineLabels;
   isMultiSelectMode: boolean;
   isPersonalWorkspace: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   onClearSelection: () => void;
   onCollapsedChange?: (
     section: KanbanDeadlineSection,
@@ -258,6 +298,7 @@ function DeadlineSection({
   optimisticUpdateInProgress: Set<string>;
   pinned?: boolean;
   selectedTasks: Set<string>;
+  stickyOffset?: string;
   taskLists: TaskList[];
   tasks: Task[];
   workspaceId: string;
@@ -297,17 +338,23 @@ function DeadlineSection({
     return sortDeadlineTasks(filteredTasks, sortBy);
   }, [includeDocuments, includeExternal, sortBy, taskListById, tasks]);
   const filterCount = (includeDocuments ? 0 : 1) + (includeExternal ? 0 : 1);
-
-  if (tasks.length === 0) return null;
+  const stickyStyle: React.CSSProperties | undefined = stickyOffset
+    ? {
+        left: `calc(var(--kanban-snap-left-padding) + ${stickyOffset})`,
+      }
+    : undefined;
 
   if (collapsed) {
     return (
       <Card
         className={cn(
           'group flex h-full w-14 shrink-0 snap-start flex-col items-center overflow-hidden rounded-xl border border-dashed transition-all duration-200 hover:shadow-md',
+          stickyOffset && 'sticky z-30',
           config.collapsedClassName
         )}
+        data-kanban-pinned-special={stickyOffset ? 'true' : undefined}
         data-testid={`kanban-deadline-section-${config.section}-collapsed`}
+        style={stickyStyle}
       >
         <button
           type="button"
@@ -341,9 +388,12 @@ function DeadlineSection({
     <Card
       className={cn(
         'flex h-full w-[var(--kanban-column-width)] shrink-0 snap-start flex-col overflow-hidden rounded-xl border border-dashed shadow-xs',
+        stickyOffset && 'sticky z-30',
         config.panelClassName
       )}
+      data-kanban-pinned-special={stickyOffset ? 'true' : undefined}
       data-testid={`kanban-deadline-section-${config.section}`}
+      style={stickyStyle}
     >
       <div className="flex items-center justify-between gap-3 border-border/70 border-b p-3">
         <div className="flex min-w-0 flex-1 items-center gap-2">
@@ -510,58 +560,62 @@ function DeadlineSection({
               )}
             </Button>
           ) : null}
-          {!pinned && (
-            <Button
-              type="button"
-              variant="ghost"
-              size="xs"
-              className={cn(
-                'h-7 w-7 p-0 hover:bg-muted/40',
-                config.titleClassName
-              )}
-              title={collapseLabel}
-              aria-label={collapseLabel}
-              onClick={() => onCollapsedChange?.(config.section, true)}
-            >
-              <ChevronLeft className="h-3.5 w-3.5" />
-            </Button>
-          )}
+          <Button
+            type="button"
+            variant="ghost"
+            size="xs"
+            className={cn(
+              'h-7 w-7 p-0 hover:bg-muted/40',
+              config.titleClassName
+            )}
+            title={collapseLabel}
+            aria-label={collapseLabel}
+            onClick={() => onCollapsedChange?.(config.section, true)}
+          >
+            <ChevronLeft className="h-3.5 w-3.5" />
+          </Button>
         </div>
       </div>
 
       <div className="scrollbar-thin min-h-0 flex-1 space-y-2 overflow-y-auto p-2">
-        {visibleTasks.map((task) => {
-          const taskList = getTaskListForDeadlineTask(task, taskLists);
-
-          return (
-            <div
-              key={task.id}
-              className="shrink-0"
-              data-testid={`kanban-deadline-task-card-${task.id}`}
-            >
-              <TaskCard
-                availableLists={availableLists}
-                boardId={boardId}
-                bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
-                dragDisabled
-                isMultiSelectMode={isMultiSelectMode}
-                isPersonalWorkspace={isPersonalWorkspace}
-                isSelected={selectedTasks.has(task.id)}
-                onClearSelection={onClearSelection}
-                onSelect={onTaskSelect}
-                onUpdate={onUpdate}
-                optimisticUpdateInProgress={optimisticUpdateInProgress}
-                selectedTasks={selectedTasks}
-                deadlineContext={config.section}
-                deadlineNow={deadlineNow}
-                sortableId={`deadline-${config.section}-${task.id}`}
-                task={task}
-                taskList={taskList}
-                workspaceId={workspaceId}
-              />
-            </div>
-          );
-        })}
+        {loading && visibleTasks.length === 0 ? (
+          <DeadlineSectionSkeleton section={config.section} />
+        ) : (
+          visibleTasks.map((task) => {
+            const taskList = getTaskListForDeadlineTask(task, taskLists);
+
+            return (
+              <div
+                key={task.id}
+                className="shrink-0"
+                data-testid={`kanban-deadline-task-card-${task.id}`}
+              >
+                <TaskCard
+                  availableLists={availableLists}
+                  boardId={boardId}
+                  bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
+                  dragDisabled
+                  isMultiSelectMode={isMultiSelectMode}
+                  isPersonalWorkspace={isPersonalWorkspace}
+                  canUseBoardAssignees={canUseBoardAssignees}
+                  assigneeMemberSource={assigneeMemberSource}
+                  isSelected={selectedTasks.has(task.id)}
+                  onClearSelection={onClearSelection}
+                  onSelect={onTaskSelect}
+                  onUpdate={onUpdate}
+                  optimisticUpdateInProgress={optimisticUpdateInProgress}
+                  selectedTasks={selectedTasks}
+                  deadlineContext={config.section}
+                  deadlineNow={deadlineNow}
+                  sortableId={`deadline-${config.section}-${task.id}`}
+                  task={task}
+                  taskList={taskList}
+                  workspaceId={workspaceId}
+                />
+              </div>
+            );
+          })
+        )}
       </div>
     </Card>
   );
@@ -573,6 +627,8 @@ export function KanbanDeadlinePanels({
   bulkUpdateCustomDueDate,
   isMultiSelectMode,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   labels,
   onClearSelection,
   onSectionCollapsedChange,
@@ -581,17 +637,15 @@ export function KanbanDeadlinePanels({
   onUpdate,
   optimisticUpdateInProgress,
   sections,
+  loading,
   collapsedSections,
   pinnedSections,
+  stickyOffsets,
   deadlineNow,
   selectedTasks,
   taskLists,
   workspaceId,
 }: KanbanDeadlinePanelsProps) {
-  if (sections.overdue.length === 0 && sections.upcoming.length === 0) {
-    return null;
-  }
-
   const configs: DeadlineSectionConfig[] = [
     {
       icon: AlertTriangle,
@@ -625,8 +679,11 @@ export function KanbanDeadlinePanels({
           config={config}
           deadlineNow={deadlineNow}
           labels={labels}
+          loading={loading === true && sections[config.section].length === 0}
           isMultiSelectMode={isMultiSelectMode}
           isPersonalWorkspace={isPersonalWorkspace}
+          canUseBoardAssignees={canUseBoardAssignees}
+          assigneeMemberSource={assigneeMemberSource}
           onClearSelection={onClearSelection}
           onCollapsedChange={onSectionCollapsedChange}
           onPinnedChange={onSectionPinnedChange}
@@ -635,6 +692,7 @@ export function KanbanDeadlinePanels({
           optimisticUpdateInProgress={optimisticUpdateInProgress}
           pinned={pinnedSections?.[config.section] === true}
           selectedTasks={selectedTasks}
+          stickyOffset={stickyOffsets?.[config.section]}
           taskLists={taskLists}
           tasks={sections[config.section]}
           workspaceId={workspaceId}

package/src/components/ui/tu-do/boards/boardId/kanban/rendering/kanban-skeleton.tsx

@@ -71,14 +71,20 @@ function KanbanColumnSkeleton({
   );
 }
 
-export function KanbanSkeleton() {
+export function KanbanSkeleton({ root = false }: { root?: boolean }) {
   return (
     <div
       aria-hidden="true"
       className="h-full overflow-hidden bg-transparent"
       data-testid="kanban-skeleton"
     >
-      <div className="flex h-full gap-2 overflow-hidden p-2 sm:gap-3">
+      <div
+        className={cn(
+          'flex h-full min-w-0 gap-2 overflow-hidden sm:gap-3',
+          root ? 'py-2 pr-0 pl-2' : 'p-2'
+        )}
+        data-testid="kanban-skeleton-frame"
+      >
         <div className="hidden shrink-0 gap-2 sm:flex">
           {RAILS.map((rail) => (
             <div

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

@@ -102,6 +102,8 @@ interface Props {
     pinned: boolean
   ) => void;
   onBulkSelectionActiveChange?: (active: boolean) => void;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   readOnly?: boolean;
 }
 
@@ -125,6 +127,8 @@ export function KanbanBoard({
   specialTaskListPins,
   onSpecialTaskListPinnedChange,
   onBulkSelectionActiveChange,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   readOnly = false,
 }: Props) {
   const tCommon = useTranslations('common');
@@ -162,26 +166,28 @@ export function KanbanBoard({
   const reorderTaskMutation = useReorderTask(boardId ?? '', workspaceId);
   const { createTask } = useTaskDialog();
   const { weekStartsOn } = useCalendarPreferences();
+  const boardAssigneesEnabled = canUseBoardAssignees ?? !workspace.personal;
 
   const { data: boardConfig } = useBoardConfig(
     readOnly ? null : boardId,
     readOnly ? null : workspaceId
   );
-  const { data: deadlineTasks = [] } = useQuery({
-    enabled: Boolean(boardId) && !readOnly,
-    queryFn: () =>
-      listKanbanDeadlineTasks({
-        boardId: boardId ?? '',
-        taskQueryOptions: deadlineTaskQueryOptions,
+  const { data: deadlineTasks = [], isPending: deadlineTasksPending } =
+    useQuery({
+      enabled: Boolean(boardId) && !readOnly,
+      queryFn: () =>
+        listKanbanDeadlineTasks({
+          boardId: boardId ?? '',
+          taskQueryOptions: deadlineTaskQueryOptions,
+          workspaceId,
+        }),
+      queryKey: getKanbanDeadlineTasksQueryKey(
         workspaceId,
-      }),
-    queryKey: getKanbanDeadlineTasksQueryKey(
-      workspaceId,
-      boardId,
-      deadlineTaskQueryOptions
-    ),
-    staleTime: 30_000,
-  });
+        boardId,
+        deadlineTaskQueryOptions
+      ),
+      staleTime: 30_000,
+    });
   const persistListPositions = useCallback(
     async (updates: Array<{ listId: string; newPosition: number }>) => {
       if (!boardId || updates.length === 0) return;
@@ -297,6 +303,9 @@ export function KanbanBoard({
   // Resources Hooks
   const { workspaceLabels, workspaceProjects, workspaceMembers } =
     useBulkResources({
+      boardId,
+      canUseBoardAssignees: boardAssigneesEnabled,
+      assigneeMemberSource,
       workspace,
       isMultiSelectMode,
       selectedCount: selectedTasks.size,
@@ -325,6 +334,7 @@ export function KanbanBoard({
     columns: orderedRealColumns,
     workspaceLabels,
     workspaceProjects,
+    workspaceMembers,
     weekStartsOn,
     setBulkWorking,
     clearSelection,
@@ -523,6 +533,8 @@ export function KanbanBoard({
             boardId={boardId ?? ''}
             workspaceId={workspaceId}
             isPersonalWorkspace={workspace.personal}
+            canUseBoardAssignees={boardAssigneesEnabled}
+            assigneeMemberSource={assigneeMemberSource}
             cursorsEnabled={cursorsEnabled}
             disableSort={disableSort}
             selectedTasks={readOnly ? new Set<string>() : selectedTasks}
@@ -545,6 +557,7 @@ export function KanbanBoard({
             columnsId={columnsId}
             deadlineLabels={deadlineLabels}
             deadlineSections={deadlineSections}
+            deadlineSectionsLoading={deadlineTasksPending}
             deadlineSectionsCollapsed={deadlineSectionsCollapsed}
             deadlineNow={deadlineNow}
             onDeadlineSectionCollapsedChange={onDeadlineSectionCollapsedChange}
@@ -564,6 +577,8 @@ export function KanbanBoard({
                 columns={orderedColumns}
                 boardId={boardId ?? ''}
                 isPersonalWorkspace={workspace.personal}
+                canUseBoardAssignees={boardAssigneesEnabled}
+                assigneeMemberSource={assigneeMemberSource}
                 isMultiSelectMode={isMultiSelectMode}
                 selectedTasks={selectedTasks}
                 onUpdate={() => {}}

package/src/components/ui/tu-do/boards/boardId/task-board-server-page.test.tsx

@@ -72,16 +72,18 @@ const BOARD_ID = '11111111-1111-1111-1111-111111111111';
 
 type BoardClientElement = ReactElement<{
   currentUserId?: string;
+  rootLoading?: boolean;
   workspace: unknown;
   workspaceTier: unknown;
 }>;
 
-function renderServerPage() {
+function renderServerPage(options?: { rootLoading?: boolean }) {
   return TaskBoardServerPage({
     params: Promise.resolve({
       boardId: BOARD_ID,
       wsId: 'ws-1',
     }),
+    rootLoading: options?.rootLoading,
   }) as Promise<BoardClientElement>;
 }
 
@@ -183,4 +185,25 @@ describe('TaskBoardServerPage', () => {
     expect(element.props.workspace).toBe(workspace);
     expect(element.props.workspaceTier).toBe('FREE');
   });
+
+  it('passes full-bleed loading through to the board client when requested', async () => {
+    const workspace = {
+      id: 'ws-board',
+      joined: true,
+      personal: false,
+      tier: 'FREE',
+    };
+    mocks.getWorkspaceTaskBoard.mockResolvedValue({
+      board: {
+        access_type: 'member',
+        id: BOARD_ID,
+        ws_id: 'ws-board',
+      },
+    });
+    mocks.getWorkspace.mockResolvedValue(workspace);
+
+    const element = await renderServerPage({ rootLoading: true });
+
+    expect(element.props.rootLoading).toBe(true);
+  });
 });

package/src/components/ui/tu-do/boards/boardId/task-board-server-page.tsx

@@ -14,6 +14,7 @@ import { getWorkspace } from '@tuturuuu/utils/workspace-helper';
 import { headers } from 'next/headers';
 import { notFound, redirect } from 'next/navigation';
 import type { ReactNode } from 'react';
+import type { ViewType } from '../../shared/board-views';
 
 interface Props {
   params: Promise<{
@@ -22,7 +23,9 @@ interface Props {
   }>;
   /** Route prefix for tasks URLs. Defaults to '/tasks' (web app). Set to '' for satellite apps. */
   routePrefix?: string;
+  defaultView?: ViewType;
   idleBottomIsland?: ReactNode;
+  rootLoading?: boolean;
 }
 
 type AuthorizedWorkspace = Workspace & {
@@ -71,9 +74,11 @@ async function getAuthorizedBoard(wsId: string, boardId: string) {
  * Used by both apps/web and apps/tasks.
  */
 export default async function TaskBoardServerPage({
+  defaultView,
   idleBottomIsland,
   params,
   routePrefix = '/tasks',
+  rootLoading = false,
 }: Props) {
   const { wsId: id, boardId } = await params;
 
@@ -95,8 +100,10 @@ export default async function TaskBoardServerPage({
       workspace={workspace}
       workspaceTier={workspace.tier ?? null}
       currentUserId={user.id}
+      defaultView={defaultView}
       routePrefix={routePrefix}
       idleBottomIsland={idleBottomIsland}
+      rootLoading={rootLoading}
     />
   );
 }

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

@@ -1,7 +1,7 @@
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { type MouseEvent, useEffect, useRef } from 'react';
-import { TaskCard } from './task-card';
+import { TaskCard, type TaskCardAssigneeMemberSource } from './task-card';
 
 interface MeasuredTaskCardProps {
   task: Task;
@@ -13,6 +13,8 @@ interface MeasuredTaskCardProps {
   isSelected: boolean;
   isMultiSelectMode?: boolean;
   isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskCardAssigneeMemberSource;
   onSelect?: (taskId: string, event: MouseEvent) => void;
   onClearSelection?: () => void;
   suppressSortableTransform?: boolean;
@@ -34,6 +36,8 @@ export function MeasuredTaskCard({
   isSelected,
   isMultiSelectMode,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   onSelect,
   onClearSelection,
   suppressSortableTransform,
@@ -99,6 +103,8 @@ export function MeasuredTaskCard({
         isSelected={isSelected}
         isMultiSelectMode={isMultiSelectMode}
         isPersonalWorkspace={isPersonalWorkspace}
+        canUseBoardAssignees={canUseBoardAssignees}
+        assigneeMemberSource={assigneeMemberSource}
         onSelect={onSelect}
         onClearSelection={onClearSelection}
         suppressSortableTransform={suppressSortableTransform}

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-open-options.test.ts

@@ -75,6 +75,8 @@ describe('getTaskCardHydratingOpenOptions', () => {
       ],
       taskWsId: 'source-workspace',
       taskWorkspacePersonal: false,
+      canUseBoardAssignees: true,
+      assigneeMemberSource: 'workspace',
       initialSharedContext: {
         boardConfig: {
           id: 'source-board',
@@ -118,10 +120,28 @@ describe('getTaskCardHydratingOpenOptions', () => {
       availableLists: [list],
       taskWsId: 'workspace-1',
       taskWorkspacePersonal: true,
+      canUseBoardAssignees: false,
+      assigneeMemberSource: undefined,
       initialSharedContext: undefined,
     });
   });
 
+  it('can keep assignees enabled for shared personal board tasks', () => {
+    expect(
+      getTaskCardHydratingOpenOptions({
+        task,
+        boardId: 'board-1',
+        availableLists: [list],
+        canUseBoardAssignees: true,
+        effectiveWorkspaceId: 'workspace-1',
+        isPersonalWorkspace: true,
+      })
+    ).toMatchObject({
+      canUseBoardAssignees: true,
+      taskWorkspacePersonal: true,
+    });
+  });
+
   it('treats source metadata as an external task snapshot', () => {
     expect(
       isExternalTaskSnapshot({

package/src/components/ui/tu-do/boards/boardId/task-card/task-card-open-options.ts

@@ -6,6 +6,8 @@ interface TaskCardOpenOptionsInput {
   task: Task;
   boardId: string;
   availableLists?: TaskList[];
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
+  canUseBoardAssignees?: boolean;
   effectiveWorkspaceId?: string;
   isPersonalWorkspace: boolean;
 }
@@ -96,6 +98,8 @@ export function getTaskCardHydratingOpenOptions({
   task,
   boardId,
   availableLists,
+  assigneeMemberSource,
+  canUseBoardAssignees,
   effectiveWorkspaceId,
   isPersonalWorkspace,
 }: TaskCardOpenOptionsInput) {
@@ -110,6 +114,9 @@ export function getTaskCardHydratingOpenOptions({
     ...task,
     list_id: task.source_list_id ?? task.list_id,
   };
+  const sourceBoardAssigneesEnabled = sourceWorkspaceId
+    ? true
+    : !isPersonalWorkspace;
 
   return {
     initialTask,
@@ -122,6 +129,9 @@ export function getTaskCardHydratingOpenOptions({
           : availableLists,
     taskWsId: sourceWorkspaceId ?? effectiveWorkspaceId,
     taskWorkspacePersonal: sourceWorkspaceId ? false : isPersonalWorkspace,
+    canUseBoardAssignees: canUseBoardAssignees ?? sourceBoardAssigneesEnabled,
+    assigneeMemberSource:
+      assigneeMemberSource ?? (sourceWorkspaceId ? 'workspace' : undefined),
     initialSharedContext,
   };
 }