@tuturuuu/ui 0.8.0 → 0.10.0

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,9 +86,12 @@ interface Props {
   tasks: Task[];
   lists: TaskList[];
   isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskCardAssigneeMemberSource;
   preserveTaskOrder?: boolean;
   searchQuery?: string;
   weekStartsOn?: 0 | 1 | 6;
+  readOnly?: boolean;
 }
 
 interface ColumnVisibility {
@@ -105,12 +109,241 @@ type TaskMenuState = {
   point?: { x: number; y: number } | null;
 };
 
-export function ListView({
+export function ListView(props: Props) {
+  if (props.readOnly) {
+    return <ReadOnlyListView {...props} />;
+  }
+
+  return <InteractiveListView {...props} />;
+}
+
+function ReadOnlyListView({
+  tasks,
+  lists,
+  isPersonalWorkspace = false,
+  canUseBoardAssignees,
+  preserveTaskOrder = false,
+  searchQuery,
+}: Props) {
+  const t = useTranslations();
+  const tc = useTranslations('common');
+  const locale = useLocale();
+  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]
+  );
+  const sortedTasks = useMemo(
+    () =>
+      sortListViewTasks(tasks, {
+        preserveTaskOrder,
+        searchQuery,
+        sortField,
+        sortOrder,
+      }),
+    [preserveTaskOrder, searchQuery, sortField, sortOrder, tasks]
+  );
+
+  function handleSort(field: ListViewSortField) {
+    if (field === sortField) {
+      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortField(field);
+      setSortOrder('asc');
+    }
+  }
+
+  function getSortIcon(field: ListViewSortField) {
+    if (sortField !== field) {
+      return <ArrowDownUp className="ml-2 h-3 w-3 text-muted-foreground" />;
+    }
+    return sortOrder === 'asc' ? (
+      <ArrowUp className="ml-2 h-3 w-3 text-foreground" />
+    ) : (
+      <ArrowDown className="ml-2 h-3 w-3 text-foreground" />
+    );
+  }
+
+  function formatDate(date: string) {
+    return format(new Date(date), 'MMM dd', { locale: dateLocale });
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {sortedTasks.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center">
+          <p className="text-muted-foreground text-sm">{tc('no_tasks')}</p>
+        </div>
+      ) : (
+        <div className="relative flex-1 overflow-auto">
+          <Table>
+            <TableHeader className="sticky top-0 z-10 border-b bg-background">
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="h-9 min-w-62.5 px-3">
+                  <Button
+                    variant="ghost"
+                    className={cn(
+                      '-ml-2 h-6 justify-start gap-1 px-2 font-medium text-[10px] uppercase tracking-wider transition-colors hover:bg-muted/50',
+                      sortField === 'name'
+                        ? 'text-foreground'
+                        : 'text-muted-foreground'
+                    )}
+                    onClick={() => handleSort('name')}
+                  >
+                    {tc('task_header')}
+                    {getSortIcon('name')}
+                  </Button>
+                </TableHead>
+                <TableHead className="h-9 w-32 px-2">
+                  <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
+                    {tc('status')}
+                  </span>
+                </TableHead>
+                <TableHead className="h-9 w-24 px-2">
+                  <Button
+                    variant="ghost"
+                    className={cn(
+                      '-ml-2 h-6 justify-start gap-1 px-2 font-medium text-[10px] uppercase tracking-wider transition-colors hover:bg-muted/50',
+                      sortField === 'priority'
+                        ? 'text-foreground'
+                        : 'text-muted-foreground'
+                    )}
+                    onClick={() => handleSort('priority')}
+                  >
+                    {tc('priority')}
+                    {getSortIcon('priority')}
+                  </Button>
+                </TableHead>
+                <TableHead className="h-9 w-28 px-2">
+                  <Button
+                    variant="ghost"
+                    className={cn(
+                      '-ml-2 h-6 justify-start gap-1 px-2 font-medium text-[10px] uppercase tracking-wider transition-colors hover:bg-muted/50',
+                      sortField === 'end_date'
+                        ? 'text-foreground'
+                        : 'text-muted-foreground'
+                    )}
+                    onClick={() => handleSort('end_date')}
+                  >
+                    {tc('due')}
+                    {getSortIcon('end_date')}
+                  </Button>
+                </TableHead>
+                {showAssignees && (
+                  <TableHead className="h-9 w-32 px-2">
+                    <span className="font-medium text-[10px] text-muted-foreground uppercase tracking-wider">
+                      {tc('assignee')}
+                    </span>
+                  </TableHead>
+                )}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {sortedTasks.map((task) => {
+                const list = listsById.get(task.list_id);
+                return (
+                  <TableRow key={task.id} className="h-12 border-b">
+                    <TableCell className="px-3 py-2">
+                      <div className="min-w-0 space-y-1">
+                        <div
+                          className={cn(
+                            'truncate font-medium text-sm',
+                            (task.completed_at || task.closed_at) &&
+                              'text-muted-foreground line-through'
+                          )}
+                        >
+                          {task.name}
+                        </div>
+                        {(task.labels?.length || task.projects?.length) && (
+                          <div className="flex flex-wrap items-center gap-1">
+                            {task.labels?.slice(0, 3).map((label) => (
+                              <Badge
+                                key={label.id}
+                                variant="outline"
+                                className="h-4 gap-1 px-1.5 font-normal text-[10px]"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  className="h-2 w-2 rounded-full"
+                                  style={{ backgroundColor: label.color }}
+                                />
+                                {label.name}
+                              </Badge>
+                            ))}
+                            {task.projects?.slice(0, 2).map((project) => (
+                              <Badge
+                                key={project.id}
+                                variant="secondary"
+                                className="h-4 px-1.5 font-normal text-[10px]"
+                              >
+                                {project.name}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell className="px-2 py-2">
+                      <Badge variant="outline" className="font-normal">
+                        {list?.name ?? tc('untitled')}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="px-2 py-2">
+                      {task.priority && (
+                        <Badge variant="secondary" className="font-normal">
+                          {t(`tasks.priority_${task.priority}`)}
+                        </Badge>
+                      )}
+                    </TableCell>
+                    <TableCell className="px-2 py-2">
+                      {task.end_date && (
+                        <span className="text-muted-foreground text-xs">
+                          {formatDate(task.end_date)}
+                        </span>
+                      )}
+                    </TableCell>
+                    {showAssignees && (
+                      <TableCell className="px-2 py-2">
+                        {task.assignees && task.assignees.length > 0 && (
+                          <div className="flex flex-wrap gap-1">
+                            {task.assignees.slice(0, 2).map((assignee) => (
+                              <Badge
+                                key={assignee.id}
+                                variant="secondary"
+                                className="font-normal"
+                              >
+                                {assignee.display_name ||
+                                  assignee.email ||
+                                  assignee.handle ||
+                                  tc('assignee')}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
+                      </TableCell>
+                    )}
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InteractiveListView({
   workspaceId,
   boardId,
   tasks,
   lists,
   isPersonalWorkspace = false,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   preserveTaskOrder = false,
   searchQuery,
   weekStartsOn = 0,
@@ -134,6 +367,9 @@ export function ListView({
   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);
@@ -146,7 +382,7 @@ export function ListView({
     priority: true,
     start_date: false,
     end_date: true,
-    assignees: !isPersonalWorkspace,
+    assignees: showAssignees,
     actions: true,
   });
 
@@ -290,6 +526,10 @@ export function ListView({
           availableLists: lists,
           effectiveWorkspaceId: workspaceId,
           isPersonalWorkspace,
+          canUseBoardAssignees: task.source_workspace_id ? true : showAssignees,
+          assigneeMemberSource: task.source_workspace_id
+            ? 'workspace'
+            : effectiveAssigneeMemberSource,
         })
       );
       return;
@@ -298,6 +538,8 @@ export function ListView({
     openTask(task, boardId, lists, false, {
       taskWsId: workspaceId,
       taskWorkspacePersonal: isPersonalWorkspace,
+      canUseBoardAssignees: showAssignees,
+      assigneeMemberSource: effectiveAssigneeMemberSource,
     });
   }
 
@@ -746,6 +988,8 @@ export function ListView({
                             workspaceId={workspaceId}
                             lists={lists}
                             isPersonalWorkspace={isPersonalWorkspace}
+                            canUseBoardAssignees={showAssignees}
+                            assigneeMemberSource={effectiveAssigneeMemberSource}
                             onUpdate={() => {
                               void queryClient.invalidateQueries({
                                 queryKey: ['tasks', boardId],

package/src/components/ui/tu-do/shared/recycle-bin-panel.tsx

@@ -73,14 +73,24 @@ interface RecycleBinPanelProps {
   };
 }
 
-export function RecycleBinPanel({
-  open,
-  onOpenChange,
+interface RecycleBinContentProps
+  extends Omit<RecycleBinPanelProps, 'open' | 'onOpenChange'> {
+  active?: boolean;
+  className?: string;
+  onParentOpenChange?: (open: boolean) => void;
+  showHeader?: boolean;
+}
+
+export function RecycleBinContent({
+  active = true,
+  className,
+  onParentOpenChange,
+  showHeader = true,
   wsId,
   boardId,
   lists,
   translations,
-}: RecycleBinPanelProps) {
+}: RecycleBinContentProps) {
   // Use provided translations or fall back to English defaults
   const t = useMemo(
     () => ({
@@ -143,7 +153,7 @@ export function RecycleBinPanel({
     boardId,
     wsId,
     {
-      enabled: open,
+      enabled: active,
       staleTime: 60000,
     }
   );
@@ -193,20 +203,20 @@ export function RecycleBinPanel({
     (isOpen: boolean) => {
       setRestoreDialogOpen(isOpen);
       if (isOpen) {
-        onOpenChange(false); // Close Sheet when dialog opens
+        onParentOpenChange?.(false); // Close Sheet when dialog opens
       }
     },
-    [onOpenChange]
+    [onParentOpenChange]
   );
 
   const handleDeleteDialogOpenChange = useCallback(
     (isOpen: boolean) => {
       setDeleteDialogOpen(isOpen);
       if (isOpen) {
-        onOpenChange(false); // Close Sheet when dialog opens
+        onParentOpenChange?.(false); // Close Sheet when dialog opens
       }
     },
-    [onOpenChange]
+    [onParentOpenChange]
   );
 
   const handleRestore = useCallback(async () => {
@@ -254,97 +264,96 @@ export function RecycleBinPanel({
 
   return (
     <>
-      <Sheet open={open} onOpenChange={onOpenChange}>
-        <SheetContent side="right" className="flex w-full flex-col sm:max-w-md">
-          <SheetHeader>
-            <SheetTitle className="flex items-center gap-2">
+      <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
+        {showHeader && (
+          <div className="border-b p-4">
+            <h2 className="flex items-center gap-2 font-semibold text-lg">
               <Trash2 className="h-5 w-5" />
               {t.recycleBin}
-            </SheetTitle>
-            <SheetDescription>{t.recycleBinDescription}</SheetDescription>
-          </SheetHeader>
-
-          <div className="flex flex-1 flex-col overflow-hidden">
-            {/* Header with select all */}
-            {deletedTasks.length > 0 && (
-              <div className="flex items-center gap-3 border-b p-3">
-                <Checkbox
-                  checked={allSelected}
-                  onCheckedChange={handleSelectAll}
-                  aria-label={t.selectAllTasks}
+            </h2>
+            <p className="mt-1 text-muted-foreground text-sm">
+              {t.recycleBinDescription}
+            </p>
+          </div>
+        )}
+        {/* Header with select all */}
+        {deletedTasks.length > 0 && (
+          <div className="flex items-center gap-3 border-b p-3">
+            <Checkbox
+              checked={allSelected}
+              onCheckedChange={handleSelectAll}
+              aria-label={t.selectAllTasks}
+            />
+            <span className="text-foreground text-sm">
+              {someSelected
+                ? t.selectedOfTotal
+                    .replace('{selected}', String(selectedTasks.size))
+                    .replace('{total}', String(deletedTasks.length))
+                : t.deletedTasksCount.replace(
+                    '{count}',
+                    String(deletedTasks.length)
+                  )}
+            </span>
+          </div>
+        )}
+
+        {/* Task list */}
+        <div className="flex-1 overflow-y-auto p-3">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : deletedTasks.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+              <Trash2 className="mb-3 h-12 w-12 text-muted-foreground/50" />
+              <p className="text-muted-foreground">{t.noDeletedTasks}</p>
+              <p className="mt-1 text-muted-foreground/70 text-xs">
+                {t.deletedTasksWillAppearHere}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {deletedTasks.map((task: Task) => (
+                <RecycleBinTaskRow
+                  key={task.id}
+                  task={task}
+                  listName={listMap.get(task.list_id)}
+                  isSelected={selectedTasks.has(task.id)}
+                  onSelect={(checked) => handleSelectTask(task.id, checked)}
+                  disabled={isWorking}
+                  translations={t}
                 />
-                <span className="text-foreground text-sm">
-                  {someSelected
-                    ? t.selectedOfTotal
-                        .replace('{selected}', String(selectedTasks.size))
-                        .replace('{total}', String(deletedTasks.length))
-                    : t.deletedTasksCount.replace(
-                        '{count}',
-                        String(deletedTasks.length)
-                      )}
-                </span>
-              </div>
-            )}
-
-            {/* Task list */}
-            <div className="flex-1 overflow-y-auto p-3">
-              {isLoading ? (
-                <div className="flex items-center justify-center py-12">
-                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                </div>
-              ) : deletedTasks.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-12 text-center">
-                  <Trash2 className="mb-3 h-12 w-12 text-muted-foreground/50" />
-                  <p className="text-muted-foreground">{t.noDeletedTasks}</p>
-                  <p className="mt-1 text-muted-foreground/70 text-xs">
-                    {t.deletedTasksWillAppearHere}
-                  </p>
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {deletedTasks.map((task: Task) => (
-                    <RecycleBinTaskRow
-                      key={task.id}
-                      task={task}
-                      listName={listMap.get(task.list_id)}
-                      isSelected={selectedTasks.has(task.id)}
-                      onSelect={(checked) => handleSelectTask(task.id, checked)}
-                      disabled={isWorking}
-                      translations={t}
-                    />
-                  ))}
-                </div>
-              )}
+              ))}
             </div>
+          )}
+        </div>
 
-            {/* Action bar */}
-            {someSelected && (
-              <div className="flex items-center gap-2 border-t px-3 py-4">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="flex-1"
-                  onClick={() => setRestoreDialogOpen(true)}
-                  disabled={isWorking}
-                >
-                  <RotateCcw className="mr-2 h-4 w-4" />
-                  {t.restore} ({selectedTasks.size})
-                </Button>
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  className="flex-1"
-                  onClick={() => setDeleteDialogOpen(true)}
-                  disabled={isWorking}
-                >
-                  <Trash2 className="mr-2 h-4 w-4" />
-                  {t.delete} ({selectedTasks.size})
-                </Button>
-              </div>
-            )}
+        {/* Action bar */}
+        {someSelected && (
+          <div className="flex items-center gap-2 border-t px-3 py-4">
+            <Button
+              variant="outline"
+              size="sm"
+              className="flex-1"
+              onClick={() => handleRestoreDialogOpenChange(true)}
+              disabled={isWorking}
+            >
+              <RotateCcw className="mr-2 h-4 w-4" />
+              {t.restore} ({selectedTasks.size})
+            </Button>
+            <Button
+              variant="destructive"
+              size="sm"
+              className="flex-1"
+              onClick={() => handleDeleteDialogOpenChange(true)}
+              disabled={isWorking}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              {t.delete} ({selectedTasks.size})
+            </Button>
           </div>
-        </SheetContent>
-      </Sheet>
+        )}
+      </div>
 
       {/* Restore Confirmation Dialog */}
       <AlertDialog
@@ -433,6 +442,45 @@ export function RecycleBinPanel({
   );
 }
 
+export function RecycleBinPanel({
+  open,
+  onOpenChange,
+  wsId,
+  boardId,
+  lists,
+  translations,
+}: RecycleBinPanelProps) {
+  const t = {
+    recycleBin: translations?.recycleBin ?? 'Recycle Bin',
+    recycleBinDescription:
+      translations?.recycleBinDescription ??
+      'Restore or permanently delete tasks that were previously removed.',
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="flex w-full flex-col sm:max-w-md">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <Trash2 className="h-5 w-5" />
+            {t.recycleBin}
+          </SheetTitle>
+          <SheetDescription>{t.recycleBinDescription}</SheetDescription>
+        </SheetHeader>
+        <RecycleBinContent
+          active={open}
+          boardId={boardId}
+          lists={lists}
+          onParentOpenChange={onOpenChange}
+          showHeader={false}
+          translations={translations}
+          wsId={wsId}
+        />
+      </SheetContent>
+    </Sheet>
+  );
+}
+
 interface RecycleBinTaskRowProps {
   task: Task;
   listName?: string;

package/src/components/ui/tu-do/shared/special-task-list-pins.ts

@@ -0,0 +1,51 @@
+export type SpecialTaskListPin =
+  | 'closed_tasks'
+  | 'external_tasks'
+  | 'overdue'
+  | 'upcoming';
+
+export const SPECIAL_TASK_LIST_PIN_VALUES: readonly SpecialTaskListPin[] = [
+  'overdue',
+  'upcoming',
+  'external_tasks',
+  'closed_tasks',
+];
+
+const SPECIAL_TASK_LIST_PIN_SET = new Set<string>(SPECIAL_TASK_LIST_PIN_VALUES);
+
+export type SpecialTaskListPinState = Partial<
+  Record<SpecialTaskListPin, boolean>
+>;
+
+export function parseSpecialTaskListPins(
+  raw: string | null | undefined
+): SpecialTaskListPinState {
+  if (!raw) return {};
+
+  const parseValues = (value: unknown) => {
+    if (!Array.isArray(value)) return [];
+    return value.filter((item): item is SpecialTaskListPin => {
+      return typeof item === 'string' && SPECIAL_TASK_LIST_PIN_SET.has(item);
+    });
+  };
+
+  let values: SpecialTaskListPin[] = [];
+
+  try {
+    values = parseValues(JSON.parse(raw));
+  } catch {
+    values = parseValues(raw.split(',').map((item) => item.trim()));
+  }
+
+  return values.reduce<SpecialTaskListPinState>((acc, pin) => {
+    acc[pin] = true;
+    return acc;
+  }, {});
+}
+
+export function serializeSpecialTaskListPins(
+  state: SpecialTaskListPinState
+): string | null {
+  const pins = SPECIAL_TASK_LIST_PIN_VALUES.filter((pin) => state[pin]);
+  return pins.length > 0 ? JSON.stringify(pins) : null;
+}

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

@@ -0,0 +1,28 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import { KanbanSkeleton } from '../boards/boardId/kanban/rendering/kanban-skeleton';
+
+export function TaskBoardLoadingState({
+  className,
+  root = false,
+}: {
+  className?: string;
+  root?: boolean;
+}) {
+  return (
+    <div
+      aria-busy="true"
+      className={cn(
+        'overflow-hidden bg-transparent',
+        root
+          ? '-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 root={root} />
+    </div>
+  );
+}