@tuturuuu/ui 0.8.0 → 0.10.0

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

@@ -1,25 +1,26 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Archive, LayoutGrid, Trash2 } from '@tuturuuu/icons';
 import {
-  Archive,
-  CheckCircle2,
-  ChevronsUpDown,
-  LayoutGrid,
-  Loader2,
-  Trash2,
-} from '@tuturuuu/icons';
-import { listWorkspaceTaskBoards } from '@tuturuuu/internal-api';
+  type AccessibleWorkspaceTaskBoard,
+  createWorkspaceTaskBoard,
+  listCurrentUserTaskBoards,
+} from '@tuturuuu/internal-api/tasks';
+import {
+  isTaskRememberLastBoardEnabled,
+  TASK_DEFAULT_BOARD_ID_CONFIG_ID,
+  TASK_REMEMBER_LAST_BOARD_CONFIG_ID,
+} from '@tuturuuu/internal-api/users';
 import type { WorkspaceTaskBoard } from '@tuturuuu/types';
 import { Badge } from '@tuturuuu/ui/badge';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
+import { Combobox, type ComboboxOption } from '@tuturuuu/ui/custom/combobox';
+import { toast } from '@tuturuuu/ui/sonner';
 import { cn } from '@tuturuuu/utils/format';
 import { useRouter } from 'next/navigation';
+import { useCallback, useMemo } from 'react';
+import {
+  useUpdateUserWorkspaceConfig,
+  useUserWorkspaceConfig,
+} from '../../../../hooks/use-user-workspace-config';
 import {
   getIconComponentByKey,
   type PlatformIconKey,
@@ -41,18 +42,24 @@ interface BoardSwitcherProps {
     archived?: string;
     deleted?: string;
     daysLeft?: string;
-    // Board name translations (case-insensitive matching)
+    searchBoards?: string;
     tasks?: string;
+    createBoard?: string;
+    creatingBoard?: string;
+    createBoardError?: string;
   };
 }
 
 type BoardWithStatus = {
+  access_type?: 'member' | 'guest';
   id: string;
   name: string | null;
   icon: string | null;
   archived_at: string | null;
   deleted_at: string | null;
   created_at: string | null;
+  workspace?: AccessibleWorkspaceTaskBoard['workspace'];
+  ws_id: string;
 };
 
 function getDaysRemaining(deletedAt: string) {
@@ -66,233 +73,250 @@ function getDaysRemaining(deletedAt: string) {
 
 export function BoardSwitcher({ board, translations }: BoardSwitcherProps) {
   const router = useRouter();
+  const queryClient = useQueryClient();
   const tasksHref = useTasksHref();
+  const { data: rememberLastBoardRaw } = useUserWorkspaceConfig(
+    board.ws_id,
+    TASK_REMEMBER_LAST_BOARD_CONFIG_ID,
+    'true'
+  );
+  const updateUserWorkspaceConfig = useUpdateUserWorkspaceConfig();
 
-  // Use provided translations or fall back to English defaults
   const t = {
     loadingBoards: translations?.loadingBoards ?? 'Loading boards...',
     noOtherBoards: translations?.noOtherBoards ?? 'No other boards',
-    activeBoards: translations?.activeBoards ?? 'Active Boards',
-    archivedBoards: translations?.archivedBoards ?? 'Archived Boards',
-    deletedBoards: translations?.deletedBoards ?? 'Deleted Boards',
+    activeBoards: translations?.activeBoards ?? 'Active boards',
+    archivedBoards: translations?.archivedBoards ?? 'Archived boards',
+    deletedBoards: translations?.deletedBoards ?? 'Deleted boards',
     untitled: translations?.untitled ?? 'Untitled',
     active: translations?.active ?? 'Active',
     archived: translations?.archived ?? 'Archived',
     deleted: translations?.deleted ?? 'Deleted',
     daysLeft: translations?.daysLeft ?? '{count} days left',
+    searchBoards: translations?.searchBoards ?? 'Search boards',
     tasks: translations?.tasks ?? 'Tasks',
+    createBoard: translations?.createBoard ?? 'Create board',
+    creatingBoard: translations?.creatingBoard ?? 'Creating',
+    createBoardError:
+      translations?.createBoardError ?? 'Could not create board',
   };
 
-  // Helper to translate board names (case-insensitive matching)
-  const translateBoardName = (name: string | null): string => {
-    if (!name) return t.untitled;
-    // Check if board name matches known translatable names
-    if (name.toLowerCase() === 'tasks') return t.tasks;
-    return name;
-  };
+  const translateBoardName = useCallback(
+    (name: string | null): string => {
+      if (!name) return t.untitled;
+      if (name.toLowerCase() === 'tasks') return t.tasks;
+      return name;
+    },
+    [t.tasks, t.untitled]
+  );
 
   const { data: boards = [], isLoading: isFetchingBoards } = useQuery({
-    queryKey: ['other-boards', board.ws_id, board.id],
+    queryKey: ['accessible-task-boards'],
     queryFn: async () => {
-      const payload = await listWorkspaceTaskBoards(board.ws_id);
+      const payload = await listCurrentUserTaskBoards();
       return (payload.boards || []) as BoardWithStatus[];
     },
-    enabled: !!board.ws_id,
   });
+  const rememberLastBoard =
+    isTaskRememberLastBoardEnabled(rememberLastBoardRaw);
+  const boardsById = useMemo(() => {
+    return new Map(boards.map((item) => [item.id, item] as const));
+  }, [boards]);
 
-  // Separate boards by status
-  const activeBoards = boards.filter((b) => !b.archived_at && !b.deleted_at);
-  const archivedBoards = boards.filter((b) => b.archived_at && !b.deleted_at);
-  const deletedBoards = boards.filter((b) => b.deleted_at);
+  const selectBoard = useCallback(
+    (value: string | string[]) => {
+      const boardId = Array.isArray(value) ? value[0] : value;
+      if (!boardId || boardId === board.id) return;
 
-  // Get current board's icon
-  const CurrentBoardIcon =
-    getIconComponentByKey(board.icon as PlatformIconKey | null) ?? LayoutGrid;
+      const selectedBoard = boardsById.get(boardId);
+      const targetWorkspaceId = selectedBoard?.ws_id ?? board.ws_id;
 
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <div className="group flex cursor-pointer items-center gap-2 transition-colors hover:text-foreground">
-          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
-            <CurrentBoardIcon className="h-4 w-4" />
-          </div>
-          <h1 className="truncate font-bold text-base text-foreground sm:text-xl md:text-2xl">
-            {translateBoardName(board.name)}
-          </h1>
-          <ChevronsUpDown className="h-4 w-4 text-muted-foreground transition-transform group-hover:scale-110" />
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="w-[320px]">
-        {isFetchingBoards ? (
-          <DropdownMenuItem disabled>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            {t.loadingBoards}
-          </DropdownMenuItem>
-        ) : boards.length === 0 ? (
-          <DropdownMenuItem disabled className="justify-center">
-            {t.noOtherBoards}
-          </DropdownMenuItem>
-        ) : (
-          <>
-            {/* Active Boards */}
-            {activeBoards.length > 0 && (
-              <>
-                <DropdownMenuLabel className="text-muted-foreground text-xs">
-                  {t.activeBoards}
-                </DropdownMenuLabel>
-                {activeBoards.map((otherBoard) => {
-                  const isCurrentBoard = otherBoard.id === board.id;
-                  const BoardIcon =
-                    getIconComponentByKey(
-                      otherBoard.icon as PlatformIconKey | null
-                    ) ?? LayoutGrid;
-                  return (
-                    <DropdownMenuItem
-                      key={otherBoard.id}
-                      onClick={() =>
-                        router.push(
-                          `/${board.ws_id}${tasksHref(`/boards/${otherBoard.id}`)}`
-                        )
-                      }
-                      className={cn(
-                        'group/item cursor-pointer gap-3 py-2.5',
-                        isCurrentBoard && 'bg-dynamic-blue/10 text-dynamic-blue'
-                      )}
-                    >
-                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary transition-colors group-hover/item:bg-primary/20">
-                        <BoardIcon className="h-4 w-4" />
-                      </div>
-                      <div className="flex min-w-0 flex-1 flex-col gap-1">
-                        <span className="truncate font-medium text-sm leading-none">
-                          {translateBoardName(otherBoard.name)}
-                        </span>
-                      </div>
-                      <Badge
-                        className={cn(
-                          'shrink-0 gap-1 px-2 py-0.5 text-[10px]',
-                          'bg-dynamic-green/10 text-dynamic-green'
-                        )}
-                      >
-                        <CheckCircle2 className="h-3 w-3 text-dynamic-green/50" />
-                        {t.active}
-                      </Badge>
-                    </DropdownMenuItem>
-                  );
-                })}
-              </>
-            )}
+      if (rememberLastBoard && targetWorkspaceId === board.ws_id) {
+        updateUserWorkspaceConfig.mutate({
+          configId: TASK_DEFAULT_BOARD_ID_CONFIG_ID,
+          value: boardId,
+          workspaceId: board.ws_id,
+        });
+      }
 
-            {/* Archived Boards */}
-            {archivedBoards.length > 0 && (
-              <>
-                {activeBoards.length > 0 && <DropdownMenuSeparator />}
-                <DropdownMenuLabel className="text-muted-foreground text-xs">
-                  {t.archivedBoards}
-                </DropdownMenuLabel>
-                {archivedBoards.map((otherBoard) => {
-                  const isCurrentBoard = otherBoard.id === board.id;
-                  const BoardIcon =
-                    getIconComponentByKey(
-                      otherBoard.icon as PlatformIconKey | null
-                    ) ?? LayoutGrid;
-                  return (
-                    <DropdownMenuItem
-                      key={otherBoard.id}
-                      onClick={() =>
-                        router.push(
-                          `/${board.ws_id}${tasksHref(`/boards/${otherBoard.id}`)}`
-                        )
-                      }
-                      className={cn(
-                        'group/item cursor-pointer gap-3 py-2.5 opacity-75 hover:opacity-100',
-                        isCurrentBoard &&
-                          'bg-dynamic-blue/10 text-dynamic-blue opacity-100'
-                      )}
-                    >
-                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
-                        <BoardIcon className="h-4 w-4" />
-                      </div>
-                      <div className="flex min-w-0 flex-1 flex-col gap-1">
-                        <span className="truncate font-medium text-sm leading-none">
-                          {otherBoard.name || t.untitled}
-                        </span>
-                      </div>
-                      <Badge
-                        className={cn(
-                          'shrink-0 gap-1 px-2 py-0.5 text-[10px]',
-                          'bg-muted text-foreground'
-                        )}
-                      >
-                        <Archive className="h-3 w-3 text-foreground/50" />
-                        {t.archived}
-                      </Badge>
-                    </DropdownMenuItem>
-                  );
-                })}
-              </>
-            )}
+      router.push(`/${targetWorkspaceId}${tasksHref(`/boards/${boardId}`)}`);
+    },
+    [
+      board.id,
+      board.ws_id,
+      boardsById,
+      rememberLastBoard,
+      router,
+      tasksHref,
+      updateUserWorkspaceConfig,
+    ]
+  );
+
+  const createBoard = useCallback(
+    async (value: string) => {
+      const name = value.trim();
+      if (!name) return;
 
-            {/* Deleted Boards */}
-            {deletedBoards.length > 0 && (
-              <>
-                {(activeBoards.length > 0 || archivedBoards.length > 0) && (
-                  <DropdownMenuSeparator />
-                )}
-                <DropdownMenuLabel className="text-muted-foreground text-xs">
-                  {t.deletedBoards}
-                </DropdownMenuLabel>
-                {deletedBoards.map((otherBoard) => {
-                  const daysRemaining = getDaysRemaining(
-                    otherBoard.deleted_at ?? ''
-                  );
-                  const isCurrentBoard = otherBoard.id === board.id;
-                  const BoardIcon =
-                    getIconComponentByKey(
-                      otherBoard.icon as PlatformIconKey | null
-                    ) ?? LayoutGrid;
+      try {
+        const payload = await createWorkspaceTaskBoard(board.ws_id, { name });
+        await queryClient.invalidateQueries({
+          queryKey: ['accessible-task-boards'],
+        });
 
-                  return (
-                    <DropdownMenuItem
-                      key={otherBoard.id}
-                      onClick={() =>
-                        router.push(
-                          `/${board.ws_id}${tasksHref(`/boards/${otherBoard.id}`)}`
-                        )
-                      }
-                      className={cn(
-                        'group/item cursor-pointer gap-3 py-2.5 opacity-60 hover:opacity-100',
-                        isCurrentBoard &&
-                          'bg-dynamic-blue/10 text-dynamic-blue opacity-100'
-                      )}
-                    >
-                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-destructive/10 text-destructive">
-                        <BoardIcon className="h-4 w-4" />
-                      </div>
-                      <div className="flex min-w-0 flex-1 flex-col gap-1">
-                        <span className="truncate font-medium text-sm leading-none">
-                          {otherBoard.name || t.untitled}
-                        </span>
-                        <span className="text-[10px] text-muted-foreground leading-none">
-                          {t.daysLeft.replace('{count}', String(daysRemaining))}
-                        </span>
-                      </div>
-                      <Badge
-                        className={cn(
-                          'shrink-0 gap-1 px-2 py-0.5 text-[10px]',
-                          'bg-dynamic-red/10 text-dynamic-red'
-                        )}
-                      >
-                        <Trash2 className="h-3 w-3 text-dynamic-red/50" />
-                        {t.deleted}
-                      </Badge>
-                    </DropdownMenuItem>
-                  );
-                })}
-              </>
+        return {
+          label: translateBoardName(payload.board.name ?? name),
+          value: payload.board.id,
+        };
+      } catch (error) {
+        toast.error(t.createBoardError);
+        throw error;
+      }
+    },
+    [board.ws_id, queryClient, t.createBoardError, translateBoardName]
+  );
+
+  const currentBoardFromAccessible = boardsById.get(board.id);
+  const canCreateBoard = currentBoardFromAccessible?.access_type !== 'guest';
+
+  const boardOptions = useMemo(() => {
+    const byId = new Map<string, BoardWithStatus>();
+    for (const item of boards) byId.set(item.id, item);
+    if (!byId.has(board.id)) {
+      byId.set(board.id, {
+        id: board.id,
+        name: board.name ?? null,
+        icon: board.icon ?? null,
+        archived_at: null,
+        deleted_at: null,
+        created_at: null,
+        ws_id: board.ws_id,
+      });
+    }
+
+    const orderedBoards = [...byId.values()].sort((a, b) => {
+      const workspaceDelta =
+        (a.ws_id === board.ws_id ? 0 : 1) - (b.ws_id === board.ws_id ? 0 : 1);
+      if (workspaceDelta !== 0) return workspaceDelta;
+
+      const currentBoardDelta =
+        (a.id === board.id ? 0 : 1) - (b.id === board.id ? 0 : 1);
+      if (currentBoardDelta !== 0) return currentBoardDelta;
+
+      const workspaceNameDelta = (a.workspace?.name ?? a.ws_id).localeCompare(
+        b.workspace?.name ?? b.ws_id
+      );
+      if (workspaceNameDelta !== 0) return workspaceNameDelta;
+
+      const statusWeight = (item: BoardWithStatus) =>
+        item.deleted_at ? 2 : item.archived_at ? 1 : 0;
+      const statusDelta = statusWeight(a) - statusWeight(b);
+      if (statusDelta !== 0) return statusDelta;
+      return translateBoardName(a.name).localeCompare(
+        translateBoardName(b.name)
+      );
+    });
+
+    return orderedBoards.map((item): ComboboxOption => {
+      const BoardIcon =
+        getIconComponentByKey(item.icon as PlatformIconKey | null) ??
+        LayoutGrid;
+      const isDeleted = Boolean(item.deleted_at);
+      const isArchived = Boolean(item.archived_at && !item.deleted_at);
+      const statusLabel = isDeleted
+        ? t.deleted
+        : isArchived
+          ? t.archived
+          : t.active;
+      const workspaceLabel = item.workspace?.name ?? item.ws_id;
+      const groupLabel = isDeleted
+        ? t.deletedBoards
+        : isArchived
+          ? t.archivedBoards
+          : t.activeBoards;
+      const daysRemaining =
+        item.deleted_at && getDaysRemaining(item.deleted_at);
+      const description = daysRemaining
+        ? `${groupLabel} · ${t.daysLeft.replace(
+            '{count}',
+            String(daysRemaining)
+          )}`
+        : isArchived || isDeleted
+          ? groupLabel
+          : undefined;
+      const badge =
+        isArchived || isDeleted ? (
+          <Badge
+            key={`${item.id}-status`}
+            className={cn(
+              'shrink-0 gap-1 px-2 py-0.5 text-[10px]',
+              isDeleted && 'bg-dynamic-red/10 text-dynamic-red',
+              isArchived && 'bg-muted text-foreground'
+            )}
+          >
+            {isDeleted ? (
+              <Trash2 className="h-3 w-3 text-dynamic-red/50" />
+            ) : (
+              <Archive className="h-3 w-3 text-foreground/50" />
             )}
-          </>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
+            {statusLabel}
+          </Badge>
+        ) : undefined;
+
+      return {
+        value: item.id,
+        label: translateBoardName(item.name),
+        searchValue: [
+          translateBoardName(item.name),
+          workspaceLabel,
+          statusLabel,
+          groupLabel,
+          daysRemaining
+            ? t.daysLeft.replace('{count}', String(daysRemaining))
+            : null,
+        ]
+          .filter(Boolean)
+          .join(' '),
+        description,
+        group: workspaceLabel,
+        icon: <BoardIcon className="h-4 w-4" />,
+        muted: isArchived || isDeleted,
+        badge,
+      };
+    });
+  }, [
+    board.icon,
+    board.id,
+    board.name,
+    board.ws_id,
+    boards,
+    t.active,
+    t.activeBoards,
+    t.archived,
+    t.archivedBoards,
+    t.daysLeft,
+    t.deleted,
+    t.deletedBoards,
+    translateBoardName,
+  ]);
+
+  return (
+    <Combobox
+      className="w-[min(22rem,70vw)] [&_button]:h-7 [&_button]:min-h-7 [&_button]:px-2 sm:[&_button]:h-8 sm:[&_button]:min-h-8"
+      createText={canCreateBoard ? t.createBoard : undefined}
+      creatingText={canCreateBoard ? t.creatingBoard : undefined}
+      disabled={isFetchingBoards}
+      emptyText={isFetchingBoards ? t.loadingBoards : t.noOtherBoards}
+      label={
+        <span className="truncate font-semibold text-foreground text-sm">
+          {translateBoardName(board.name)}
+        </span>
+      }
+      onChange={selectBoard}
+      onCreate={canCreateBoard ? createBoard : undefined}
+      options={boardOptions}
+      placeholder={translateBoardName(board.name)}
+      searchPlaceholder={t.searchBoards}
+      selected={board.id}
+    />
   );
 }

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(() => {