@tuturuuu/ui 0.9.0 → 0.10.0

package/src/components/ui/tu-do/boards/board-share-settings-panel.tsx

@@ -0,0 +1,351 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Loader2, Trash2, Users } from '@tuturuuu/icons';
+import {
+  createWorkspaceTaskBoardShare,
+  deleteWorkspaceTaskBoardShare,
+  listWorkspaceTaskBoardShares,
+  listWorkspaceTaskBoardViewableMembers,
+  updateWorkspaceTaskBoardShare,
+  type WorkspaceTaskBoardShare,
+  type WorkspaceTaskBoardSharePermission,
+  type WorkspaceTaskBoardViewableMember,
+} from '@tuturuuu/internal-api/tasks';
+import type { WorkspaceTaskBoard } from '@tuturuuu/types';
+import { Avatar, AvatarFallback, AvatarImage } from '@tuturuuu/ui/avatar';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Combobox } from '@tuturuuu/ui/custom/combobox';
+import { Input } from '@tuturuuu/ui/input';
+import { getInitials } from '@tuturuuu/utils/name-helper';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { BoardPublicLinkSection } from './board-public-link-section';
+import { ShareSection } from './share-section';
+
+interface BoardShareSettingsPanelProps {
+  board: Pick<WorkspaceTaskBoard, 'id' | 'name'>;
+  enabled?: boolean;
+  wsId: string;
+}
+
+function shareDisplayName(share: WorkspaceTaskBoardShare) {
+  return (
+    share.user?.display_name ||
+    (share.user?.handle ? `@${share.user.handle}` : null) ||
+    share.email ||
+    share.user_id ||
+    'Guest'
+  );
+}
+
+function viewableMemberDisplayName(member: WorkspaceTaskBoardViewableMember) {
+  return (
+    member.display_name ||
+    (member.handle ? `@${member.handle}` : null) ||
+    member.email ||
+    member.user_id
+  );
+}
+
+export function BoardShareSettingsPanel({
+  board,
+  enabled = true,
+  wsId,
+}: BoardShareSettingsPanelProps) {
+  const t = useTranslations();
+  const queryClient = useQueryClient();
+  const [email, setEmail] = useState('');
+  const [permission, setPermission] =
+    useState<WorkspaceTaskBoardSharePermission>('view');
+  const [membersOpen, setMembersOpen] = useState(false);
+  const [guestsOpen, setGuestsOpen] = useState(false);
+
+  const queryKey = ['task-board-shares', wsId, board.id] as const;
+  const sharesQuery = useQuery({
+    queryKey,
+    queryFn: () => listWorkspaceTaskBoardShares(wsId, board.id),
+    enabled,
+  });
+  const viewableMembersQuery = useQuery({
+    queryKey: ['task-board-viewable-members', wsId, board.id] as const,
+    queryFn: () => listWorkspaceTaskBoardViewableMembers(wsId, board.id),
+    enabled: enabled && membersOpen,
+    staleTime: 60_000,
+  });
+
+  const createMutation = useMutation({
+    mutationFn: () =>
+      createWorkspaceTaskBoardShare(wsId, board.id, {
+        email,
+        permission,
+      }),
+    onSuccess: () => {
+      setEmail('');
+      setPermission('view');
+      void queryClient.invalidateQueries({ queryKey });
+      toast.success(t('ws-task-boards.share.saved'));
+    },
+    onError: () => {
+      toast.error(t('common.error'));
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: ({
+      nextPermission,
+      shareId,
+    }: {
+      nextPermission: WorkspaceTaskBoardSharePermission;
+      shareId: string;
+    }) =>
+      updateWorkspaceTaskBoardShare(wsId, board.id, {
+        shareId,
+        permission: nextPermission,
+      }),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey });
+    },
+    onError: () => {
+      toast.error(t('common.error'));
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (shareId: string) =>
+      deleteWorkspaceTaskBoardShare(wsId, board.id, shareId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey });
+      toast.success(t('ws-task-boards.share.removed'));
+    },
+    onError: () => {
+      toast.error(t('common.error'));
+    },
+  });
+
+  const shares = sharesQuery.data?.shares ?? [];
+  const members = Array.isArray(viewableMembersQuery.data?.members)
+    ? viewableMembersQuery.data.members
+    : undefined;
+  const membersCount = members?.length;
+  const membersStatusBadge = viewableMembersQuery.isLoading ? (
+    <Badge variant="secondary" className="gap-1 px-2 py-0.5 text-[10px]">
+      <Loader2 className="h-3 w-3 animate-spin" />
+      {t('common.loading')}
+    </Badge>
+  ) : typeof membersCount === 'number' ? (
+    <Badge variant="secondary" className="px-2 py-0.5 text-[10px]">
+      {membersCount}
+    </Badge>
+  ) : (
+    <Badge variant="outline" className="px-2 py-0.5 text-[10px]">
+      {t('common.workspace')}
+    </Badge>
+  );
+  const guestsStatusBadge = sharesQuery.isLoading ? (
+    <Badge variant="secondary" className="gap-1 px-2 py-0.5 text-[10px]">
+      <Loader2 className="h-3 w-3 animate-spin" />
+      {t('common.loading')}
+    </Badge>
+  ) : shares.length ? (
+    <Badge variant="secondary" className="px-2 py-0.5 text-[10px]">
+      {shares.length}
+    </Badge>
+  ) : (
+    <Badge variant="outline" className="px-2 py-0.5 text-[10px]">
+      {t('common.none')}
+    </Badge>
+  );
+  const canSubmit =
+    email.trim().length > 0 &&
+    !createMutation.isPending &&
+    !sharesQuery.isLoading;
+  const permissionOptions = [
+    {
+      value: 'view',
+      label: t('ws-task-boards.share.permission.view'),
+    },
+    {
+      value: 'edit',
+      label: t('ws-task-boards.share.permission.edit'),
+    },
+  ];
+
+  return (
+    <div className="space-y-2">
+      <BoardPublicLinkSection boardId={board.id} open={enabled} wsId={wsId} />
+
+      <ShareSection
+        open={membersOpen}
+        onOpenChange={setMembersOpen}
+        title={t('ws-task-boards.share.workspace_members.title')}
+        tooltip={t('ws-task-boards.share.workspace_members.tooltip')}
+        icon={<Users className="h-4 w-4 text-muted-foreground" />}
+        statusBadge={membersStatusBadge}
+      >
+        {viewableMembersQuery.isLoading ? (
+          <div className="flex items-center gap-2 text-muted-foreground text-sm">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            {t('common.loading')}
+          </div>
+        ) : (members ?? []).length === 0 ? (
+          <div className="text-muted-foreground text-sm">
+            {t('ws-task-boards.share.workspace_members.empty')}
+          </div>
+        ) : (
+          <div className="divide-y rounded-md border">
+            {members?.map((member) => (
+              <div
+                key={member.user_id}
+                className="flex flex-col gap-3 p-3 sm:flex-row sm:items-center"
+              >
+                <div className="flex min-w-0 flex-1 items-center gap-3">
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src={member.avatar_url ?? undefined} />
+                    <AvatarFallback>
+                      {getInitials(viewableMemberDisplayName(member))}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0">
+                    <div className="truncate font-medium text-sm">
+                      {viewableMemberDisplayName(member)}
+                    </div>
+                    <div className="truncate text-muted-foreground text-xs">
+                      {member.email || member.user_id}
+                    </div>
+                  </div>
+                </div>
+                <div className="flex flex-wrap items-center gap-1.5">
+                  {member.is_creator && (
+                    <Badge variant="secondary">
+                      {t('ws-task-boards.share.workspace_members.creator')}
+                    </Badge>
+                  )}
+                  {member.roles.slice(0, 2).map((role) => (
+                    <Badge key={role.id} variant="outline">
+                      {role.name}
+                    </Badge>
+                  ))}
+                  <Badge variant="outline">
+                    {t('ws-task-boards.share.workspace_members.badge')}
+                  </Badge>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </ShareSection>
+
+      <ShareSection
+        open={guestsOpen}
+        onOpenChange={setGuestsOpen}
+        title={t('ws-task-boards.share.guests.title')}
+        tooltip={t('ws-task-boards.share.guests.tooltip')}
+        icon={<Users className="h-4 w-4 text-muted-foreground" />}
+        statusBadge={guestsStatusBadge}
+      >
+        <div className="space-y-3">
+          <div className="grid gap-2 sm:grid-cols-[1fr_8rem_auto]">
+            <Input
+              type="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+              placeholder={t('ws-task-boards.share.email_placeholder')}
+            />
+            <Combobox
+              mode="single"
+              options={permissionOptions}
+              selected={permission}
+              onChange={(value) =>
+                setPermission(value as WorkspaceTaskBoardSharePermission)
+              }
+              placeholder={t('ws-task-boards.share.permission.view')}
+              searchPlaceholder={t('common.search_members')}
+              className="[&_button]:h-9"
+            />
+            <Button
+              type="button"
+              onClick={() => createMutation.mutate()}
+              disabled={!canSubmit}
+            >
+              {createMutation.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                t('common.share')
+              )}
+            </Button>
+          </div>
+
+          {sharesQuery.isLoading ? (
+            <div className="rounded-md border border-dashed p-4 text-muted-foreground text-sm">
+              {t('common.loading')}
+            </div>
+          ) : shares.length === 0 ? (
+            <div className="rounded-md border border-dashed p-4 text-muted-foreground text-sm">
+              {t('ws-task-boards.share.empty')}
+            </div>
+          ) : (
+            <div className="divide-y rounded-md border">
+              {shares.map((share) => (
+                <div
+                  key={share.id}
+                  className="flex flex-col gap-3 p-3 sm:flex-row sm:items-center"
+                >
+                  <div className="flex min-w-0 flex-1 items-center gap-3">
+                    <Avatar className="h-8 w-8">
+                      <AvatarImage src={share.user?.avatar_url ?? undefined} />
+                      <AvatarFallback>
+                        {getInitials(shareDisplayName(share))}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0">
+                      <div className="truncate font-medium text-sm">
+                        {shareDisplayName(share)}
+                      </div>
+                      <div className="truncate text-muted-foreground text-xs">
+                        {share.email || share.user_id}
+                      </div>
+                    </div>
+                  </div>
+
+                  <Badge variant="outline" className="w-fit">
+                    {t('common.guest_access')}
+                  </Badge>
+
+                  <Combobox
+                    mode="single"
+                    options={permissionOptions}
+                    selected={share.permission}
+                    onChange={(value) =>
+                      updateMutation.mutate({
+                        shareId: share.id,
+                        nextPermission:
+                          value as WorkspaceTaskBoardSharePermission,
+                      })
+                    }
+                    placeholder={t('ws-task-boards.share.permission.view')}
+                    searchPlaceholder={t('common.search_members')}
+                    className="w-28 [&_button]:h-9"
+                  />
+
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => deleteMutation.mutate(share.id)}
+                    disabled={deleteMutation.isPending}
+                    aria-label={t('common.remove')}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </ShareSection>
+    </div>
+  );
+}

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

@@ -51,6 +51,7 @@ import {
 } from './kanban/kanban-column-collapse';
 import { ListActions } from './list-actions';
 import { statusIcons } from './status-section';
+import type { TaskCardAssigneeMemberSource } from './task-card/task-card';
 import type { TaskFilters } from './task-filter';
 import { VirtualizedTaskList } from './task-list';
 
@@ -163,6 +164,8 @@ interface BoardColumnProps {
   isMultiSelectMode?: boolean;
   setIsMultiSelectMode?: (value: boolean) => void;
   isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskCardAssigneeMemberSource;
   onTaskSelect?: (taskId: string, event: React.MouseEvent) => void;
   onClearSelection?: () => void;
   onAddTask?: (list: TaskList) => void;
@@ -177,6 +180,7 @@ interface BoardColumnProps {
   onExternalTasksCollapsedChange?: (collapsed: boolean) => void;
   onTaskListCollapsedChange?: (listId: string, collapsed: boolean) => void;
   specialPinned?: boolean;
+  specialStickyOffset?: string;
   onSpecialPinnedChange?: (pinned: boolean) => void;
   readOnly?: boolean;
 }
@@ -194,6 +198,8 @@ export function BoardColumn({
   isMultiSelectMode,
   setIsMultiSelectMode,
   isPersonalWorkspace,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   onAddTask,
   dragPreviewPosition,
   suppressTaskTransforms,
@@ -206,6 +212,7 @@ export function BoardColumn({
   onExternalTasksCollapsedChange,
   onTaskListCollapsedChange,
   specialPinned = false,
+  specialStickyOffset,
   onSpecialPinnedChange,
   readOnly = false,
 }: BoardColumnProps) {
@@ -410,6 +417,12 @@ export function BoardColumn({
     transform: CSS.Transform.toString(transform),
     transition,
   };
+  const columnStyle: React.CSSProperties = specialStickyOffset
+    ? {
+        ...style,
+        left: `calc(var(--kanban-snap-left-padding) + ${specialStickyOffset})`,
+      }
+    : style;
 
   const handleUpdate = () => {
     onUpdate?.();
@@ -513,12 +526,14 @@ export function BoardColumn({
     return (
       <Card
         ref={composedRef}
-        style={style}
+        style={columnStyle}
+        data-kanban-pinned-special={specialStickyOffset ? 'true' : undefined}
         data-kanban-column-id={column.id}
         data-kanban-real-column={isExternalStaging ? undefined : 'true'}
         className={cn(
           'group flex h-full w-14 shrink-0 snap-start flex-col items-center rounded-xl border border-dashed transition-all duration-200',
           'touch-none select-none overflow-hidden hover:shadow-md',
+          specialStickyOffset && 'sticky z-30',
           isExternalCollapsed
             ? 'border-dynamic-cyan/45 bg-dynamic-cyan/[0.035]'
             : colorClass
@@ -564,12 +579,14 @@ export function BoardColumn({
   return (
     <Card
       ref={composedRef}
-      style={style}
+      style={columnStyle}
+      data-kanban-pinned-special={specialStickyOffset ? 'true' : undefined}
       data-kanban-column-id={column.id}
       data-kanban-real-column={isExternalStaging ? undefined : 'true'}
       className={cn(
         'group flex h-full w-[var(--kanban-column-width)] shrink-0 snap-start flex-col rounded-xl transition-all duration-200 last:snap-end',
         'touch-none select-none',
+        specialStickyOffset && 'sticky z-30',
         colorClass,
         isDragging &&
           'rotate-1 scale-[1.02] opacity-90 shadow-xl ring-2 ring-primary/20',
@@ -742,19 +759,17 @@ export function BoardColumn({
                   )}
                 </Button>
               ) : null}
-              {!specialPinned && (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="xs"
-                  className="h-7 w-7 p-0 text-dynamic-cyan hover:bg-dynamic-cyan/10"
-                  title={tTasks('collapse_external_tasks')}
-                  aria-label={tTasks('collapse_external_tasks')}
-                  onClick={() => onExternalTasksCollapsedChange?.(true)}
-                >
-                  <ChevronLeft className="h-3.5 w-3.5" />
-                </Button>
-              )}
+              <Button
+                type="button"
+                variant="ghost"
+                size="xs"
+                className="h-7 w-7 p-0 text-dynamic-cyan hover:bg-dynamic-cyan/10"
+                title={tTasks('collapse_external_tasks')}
+                aria-label={tTasks('collapse_external_tasks')}
+                onClick={() => onExternalTasksCollapsedChange?.(true)}
+              >
+                <ChevronLeft className="h-3.5 w-3.5" />
+              </Button>
             </>
           ) : (
             <>
@@ -781,28 +796,24 @@ export function BoardColumn({
                       )}
                     </Button>
                   ) : null}
-                  {!specialPinned && (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="xs"
-                      className={cn(
-                        'h-7 w-7 p-0 hover:bg-muted/40',
-                        getListTextColorClass(column.color as SupportedColor)
-                      )}
-                      title={tTasks('collapse_task_list', {
-                        name: translateListName(column.name),
-                      })}
-                      aria-label={tTasks('collapse_task_list', {
-                        name: translateListName(column.name),
-                      })}
-                      onClick={() =>
-                        onTaskListCollapsedChange?.(column.id, 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',
+                      getListTextColorClass(column.color as SupportedColor)
+                    )}
+                    title={tTasks('collapse_task_list', {
+                      name: translateListName(column.name),
+                    })}
+                    aria-label={tTasks('collapse_task_list', {
+                      name: translateListName(column.name),
+                    })}
+                    onClick={() => onTaskListCollapsedChange?.(column.id, true)}
+                  >
+                    <ChevronLeft className="h-3.5 w-3.5" />
+                  </Button>
                 </>
               ) : null}
               {!readOnly && (
@@ -841,6 +852,8 @@ export function BoardColumn({
           isMultiSelectMode={isMultiSelectMode}
           selectedTasks={selectedTasks}
           isPersonalWorkspace={isPersonalWorkspace}
+          canUseBoardAssignees={canUseBoardAssignees}
+          assigneeMemberSource={assigneeMemberSource}
           onTaskSelect={onTaskSelect}
           onClearSelection={onClearSelection}
           dragPreviewPosition={dragPreviewPosition}

package/src/components/ui/tu-do/boards/boardId/enhanced-task-list.tsx

@@ -44,6 +44,7 @@ import { useBoardBroadcast } from '../../shared/board-broadcast-context';
 import { isTaskListNameExistsError } from '../../shared/task-board-errors';
 import { normalizeBoardText } from './board-text-utils';
 import { TaskCard } from './task';
+import type { TaskCardAssigneeMemberSource } from './task-card/task-card';
 
 interface Props {
   list: TaskList;
@@ -54,6 +55,8 @@ interface Props {
   isOverlay?: boolean;
   hideTasksMode?: boolean;
   isPersonalWorkspace?: boolean;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: TaskCardAssigneeMemberSource;
   onAddTask?: (list: TaskList) => void;
 }
 
@@ -102,6 +105,8 @@ export function EnhancedTaskList({
   isOverlay = false,
   hideTasksMode = false,
   isPersonalWorkspace = false,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   onAddTask,
 }: Props) {
   const t = useTranslations('common');
@@ -479,6 +484,8 @@ export function EnhancedTaskList({
                 taskList={list}
                 boardId={boardId}
                 isPersonalWorkspace={isPersonalWorkspace}
+                canUseBoardAssignees={canUseBoardAssignees}
+                assigneeMemberSource={assigneeMemberSource}
                 onUpdate={onUpdate}
               />
             ))}

package/src/components/ui/tu-do/boards/boardId/kanban/bulk/bulk-operation-types.ts

@@ -12,9 +12,9 @@ export interface WorkspaceProject {
 export interface WorkspaceMember {
   id: string;
   user_id?: string;
-  display_name: string;
-  email: string;
-  avatar_url: string | null;
+  display_name?: string;
+  email?: string;
+  avatar_url?: string | null;
 }
 
 export interface BulkOperationsConfig {

package/src/components/ui/tu-do/boards/boardId/kanban/data/use-bulk-resources.ts

@@ -5,14 +5,24 @@ import {
   listWorkspaceLabels,
   listWorkspaceTaskProjects,
 } from '@tuturuuu/internal-api';
+import { listWorkspaceTaskBoardViewableMembers } from '@tuturuuu/internal-api/tasks';
 import type { Workspace } from '@tuturuuu/types';
-import { useWorkspaceMembers } from '@tuturuuu/ui/hooks/use-workspace-members';
+import {
+  useWorkspaceMembers,
+  type WorkspaceMember,
+} from '@tuturuuu/ui/hooks/use-workspace-members';
 
 export function useBulkResources({
+  boardId,
+  canUseBoardAssignees,
+  assigneeMemberSource,
   workspace,
   isMultiSelectMode,
   selectedCount,
 }: {
+  boardId?: string | null;
+  canUseBoardAssignees?: boolean;
+  assigneeMemberSource?: 'workspace' | 'board' | 'workspace-and-board';
   workspace: Workspace;
   isMultiSelectMode: boolean;
   selectedCount: number;
@@ -46,13 +56,57 @@ export function useBulkResources({
   });
 
   // Workspace members for bulk operations
-  const { data: workspaceMembers = [] } = useWorkspaceMembers(workspace.id, {
+  const shouldLoadMembers =
+    canUseBoardAssignees !== false && isMultiSelectMode && selectedCount > 0;
+  const effectiveAssigneeMemberSource =
+    assigneeMemberSource ?? (workspace.personal ? 'board' : 'workspace');
+  const { data: workspaceMembersData = [] } = useWorkspaceMembers(
+    workspace.id,
+    {
+      enabled:
+        !!workspace.id &&
+        shouldLoadMembers &&
+        effectiveAssigneeMemberSource !== 'board',
+    }
+  );
+  const { data: boardViewableMembers = [] } = useQuery({
+    queryKey: ['task-board-viewable-members', workspace.id, boardId],
+    queryFn: async (): Promise<WorkspaceMember[]> => {
+      if (!workspace.id || !boardId) return [];
+
+      const payload = await listWorkspaceTaskBoardViewableMembers(
+        workspace.id,
+        boardId
+      );
+      const members = Array.isArray(payload?.members) ? payload.members : [];
+
+      return members.map((member) => ({
+        id: member.user_id,
+        user_id: member.user_id,
+        workspace_id: workspace.id,
+        display_name: member.display_name ?? member.email ?? member.user_id,
+        email: member.email ?? undefined,
+        avatar_url: member.avatar_url ?? undefined,
+      }));
+    },
     enabled:
       !!workspace.id &&
-      !workspace.personal &&
-      isMultiSelectMode &&
-      selectedCount > 0,
+      !!boardId &&
+      shouldLoadMembers &&
+      effectiveAssigneeMemberSource !== 'workspace',
+    staleTime: 5 * 60 * 1000,
   });
+  const workspaceMembers: WorkspaceMember[] = [
+    ...workspaceMembersData,
+    ...boardViewableMembers.filter(
+      (boardMember) =>
+        !workspaceMembersData.some(
+          (workspaceMember) =>
+            (workspaceMember.user_id ?? workspaceMember.id) ===
+            boardMember.user_id
+        )
+    ),
+  ];
 
   return { workspaceLabels, workspaceProjects, workspaceMembers };
 }