@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/tu-do/shared/cursor-overlay-multi-wrapper.tsx

@@ -11,6 +11,14 @@ import type { ListStatusFilter } from './board-header';
 import CursorOverlay from './cursor-overlay';
 import type { BoardFiltersMetadata, TaskFilters } from './task-filter.types';
 
+type CursorScopeMetadata =
+  | { type: 'board'; boardId: string }
+  | { type: 'task-description'; taskId: string };
+
+type CursorOverlayMetadata = Partial<BoardFiltersMetadata> & {
+  cursorScope: CursorScopeMetadata;
+};
+
 /**
  * Efficiently compares two sorted arrays of primitive values
  */
@@ -26,10 +34,16 @@ function arraysEqual<T extends string | number>(arr1: T[], arr2: T[]): boolean {
  * Checks if two cursor metadata objects represent the same view configuration
  */
 function isMatchingFilters(
-  metadata1?: BoardFiltersMetadata,
-  metadata2?: BoardFiltersMetadata
+  metadata1?: CursorOverlayMetadata,
+  metadata2?: CursorOverlayMetadata
 ): boolean {
   if (!metadata1 || !metadata2) return true; // Show all cursors if no metadata
+  if (!isMatchingCursorScope(metadata1.cursorScope, metadata2.cursorScope)) {
+    return false;
+  }
+
+  if (!metadata1.filters || !metadata2.filters) return true;
+  if (!metadata1.listStatusFilter || !metadata2.listStatusFilter) return true;
 
   // Check list status filter
   if (metadata1.listStatusFilter !== metadata2.listStatusFilter) return false;
@@ -81,14 +95,33 @@ function isMatchingFilters(
   return true;
 }
 
+function isMatchingCursorScope(
+  scope1: CursorScopeMetadata,
+  scope2: CursorScopeMetadata
+) {
+  if (scope1.type !== scope2.type) return false;
+  if (scope1.type === 'board' && scope2.type === 'board') {
+    return scope1.boardId === scope2.boardId;
+  }
+  if (
+    scope1.type === 'task-description' &&
+    scope2.type === 'task-description'
+  ) {
+    return scope1.taskId === scope2.taskId;
+  }
+  return false;
+}
+
 export default function CursorOverlayMultiWrapper({
   channelName,
   containerRef,
+  cursorScope,
   listStatusFilter,
   filters,
 }: {
   channelName: string;
   containerRef: React.RefObject<HTMLDivElement | null>;
+  cursorScope: CursorScopeMetadata;
   listStatusFilter?: ListStatusFilter;
   filters?: TaskFilters;
 }) {
@@ -97,6 +130,9 @@ export default function CursorOverlayMultiWrapper({
     height: number;
   }>({ width: 0, height: 0 });
   const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const cursorScopeType = cursorScope.type;
+  const cursorScopeId =
+    cursorScope.type === 'board' ? cursorScope.boardId : cursorScope.taskId;
 
   // Fetch current user
   useEffect(() => {
@@ -105,10 +141,9 @@ export default function CursorOverlayMultiWrapper({
         const userData = await getCurrentUserProfile();
         if (!userData?.id) return;
         setCurrentUser({
-          id: userData.id,
-          display_name: userData.display_name,
-          email: userData.email,
           avatar_url: userData.avatar_url,
+          display_name: userData.display_name,
+          id: userData.id,
         });
       } catch (err) {
         console.warn('Error fetching user:', err);
@@ -118,14 +153,22 @@ export default function CursorOverlayMultiWrapper({
     fetchUser();
   }, []);
 
-  // Create metadata object from view options (only if both are provided)
-  const metadata: BoardFiltersMetadata | undefined = useMemo(() => {
-    if (!listStatusFilter || !filters) return undefined;
+  const metadata: CursorOverlayMetadata = useMemo(() => {
+    const resolvedCursorScope =
+      cursorScopeType === 'board'
+        ? ({ boardId: cursorScopeId, type: 'board' } as const)
+        : ({ taskId: cursorScopeId, type: 'task-description' } as const);
+
+    if (!listStatusFilter || !filters) {
+      return { cursorScope: resolvedCursorScope };
+    }
+
     return {
+      cursorScope: resolvedCursorScope,
       listStatusFilter,
       filters,
     };
-  }, [listStatusFilter, filters]);
+  }, [cursorScopeId, cursorScopeType, listStatusFilter, filters]);
 
   const { cursors, error } = useCursorTracking(
     channelName,
@@ -139,15 +182,13 @@ export default function CursorOverlayMultiWrapper({
     const filtered = new Map<string, CursorPosition>();
 
     for (const [userId, cursor] of cursors.entries()) {
-      // Always show cursors without metadata (backward compatibility)
       if (!cursor.metadata) {
-        filtered.set(userId, cursor);
         continue;
       }
 
       // Filter based on view matching
       if (
-        isMatchingFilters(metadata, cursor.metadata as BoardFiltersMetadata)
+        isMatchingFilters(metadata, cursor.metadata as CursorOverlayMetadata)
       ) {
         filtered.set(userId, cursor);
       }

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

@@ -88,6 +88,7 @@ interface Props {
   preserveTaskOrder?: boolean;
   searchQuery?: string;
   weekStartsOn?: 0 | 1 | 6;
+  readOnly?: boolean;
 }
 
 interface ColumnVisibility {
@@ -105,7 +106,232 @@ 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,
+  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 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>
+                {!isPersonalWorkspace && (
+                  <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>
+                    {!isPersonalWorkspace && (
+                      <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,

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;