@tuturuuu/ui 0.8.0 → 0.9.0

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

@@ -1,19 +1,22 @@
 'use client';
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Loader2, Share2, Trash2 } from '@tuturuuu/icons';
+import { Loader2, Share2, 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 {
   Dialog,
   DialogContent,
@@ -23,17 +26,12 @@ import {
   DialogTitle,
 } from '@tuturuuu/ui/dialog';
 import { Input } from '@tuturuuu/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@tuturuuu/ui/select';
 import { getInitials } from '@tuturuuu/utils/name-helper';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { toast } from 'sonner';
+import { BoardPublicLinkSection } from './board-public-link-section';
+import { ShareSection } from './share-section';
 
 interface BoardShareDialogProps {
   board: Pick<WorkspaceTaskBoard, 'id' | 'name'>;
@@ -52,6 +50,15 @@ function shareDisplayName(share: WorkspaceTaskBoardShare) {
   );
 }
 
+function viewableMemberDisplayName(member: WorkspaceTaskBoardViewableMember) {
+  return (
+    member.display_name ||
+    (member.handle ? `@${member.handle}` : null) ||
+    member.email ||
+    member.user_id
+  );
+}
+
 export function BoardShareDialog({
   board,
   onOpenChange,
@@ -63,6 +70,9 @@ export function BoardShareDialog({
   const [email, setEmail] = useState('');
   const [permission, setPermission] =
     useState<WorkspaceTaskBoardSharePermission>('view');
+  const [membersOpen, setMembersOpen] = useState(false);
+  const [guestsOpen, setGuestsOpen] = useState(false);
+  const initialFocusRef = useRef<HTMLDivElement>(null);
 
   const queryKey = ['task-board-shares', wsId, board.id] as const;
   const sharesQuery = useQuery({
@@ -70,6 +80,12 @@ export function BoardShareDialog({
     queryFn: () => listWorkspaceTaskBoardShares(wsId, board.id),
     enabled: open,
   });
+  const viewableMembersQuery = useQuery({
+    queryKey: ['task-board-viewable-members', wsId, board.id] as const,
+    queryFn: () => listWorkspaceTaskBoardViewableMembers(wsId, board.id),
+    enabled: open && membersOpen,
+    staleTime: 60_000,
+  });
 
   const createMutation = useMutation({
     mutationFn: () =>
@@ -121,16 +137,59 @@ export function BoardShareDialog({
   });
 
   const shares = sharesQuery.data?.shares ?? [];
+  const membersCount = viewableMembersQuery.data?.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 (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="sm:max-w-xl"
+        className="max-h-[min(88dvh,720px)] overflow-y-auto sm:max-w-xl"
         onClick={(e) => e.stopPropagation()}
+        onOpenAutoFocus={(event) => {
+          event.preventDefault();
+          initialFocusRef.current?.focus();
+        }}
       >
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
@@ -139,134 +198,188 @@ export function BoardShareDialog({
               name: board.name || t('common.untitled'),
             })}
           </DialogTitle>
-          <DialogDescription>
-            {t('ws-task-boards.share.description')}
+          <DialogDescription className="sr-only">
+            {t('ws-task-boards.share.title', {
+              name: board.name || t('common.untitled'),
+            })}
           </DialogDescription>
         </DialogHeader>
+        <div ref={initialFocusRef} tabIndex={-1} className="sr-only" />
 
-        <div className="space-y-4">
-          <div className="rounded-md border bg-muted/30 p-3 text-muted-foreground text-sm">
-            {t('ws-task-boards.share.guest_scope')}
-          </div>
+        <div className="space-y-2">
+          <BoardPublicLinkSection boardId={board.id} open={open} wsId={wsId} />
 
-          <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')}
-            />
-            <Select
-              value={permission}
-              onValueChange={(value) =>
-                setPermission(value as WorkspaceTaskBoardSharePermission)
-              }
-            >
-              <SelectTrigger>
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="view">
-                  {t('ws-task-boards.share.permission.view')}
-                </SelectItem>
-                <SelectItem value="edit">
-                  {t('ws-task-boards.share.permission.edit')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            <Button
-              type="button"
-              onClick={() => createMutation.mutate()}
-              disabled={!canSubmit}
-            >
-              {createMutation.isPending ? (
+          <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.share')
-              )}
-            </Button>
-          </div>
-
-          <div className="space-y-2">
-            <div className="font-medium text-sm">
-              {t('ws-task-boards.share.shared_with')}
-            </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')}
+            ) : (viewableMembersQuery.data?.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">
-                {shares.map((share) => (
+                {viewableMembersQuery.data?.members.map((member) => (
                   <div
-                    key={share.id}
+                    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={share.user?.avatar_url ?? undefined}
-                        />
+                        <AvatarImage src={member.avatar_url ?? undefined} />
                         <AvatarFallback>
-                          {getInitials(shareDisplayName(share))}
+                          {getInitials(viewableMemberDisplayName(member))}
                         </AvatarFallback>
                       </Avatar>
                       <div className="min-w-0">
                         <div className="truncate font-medium text-sm">
-                          {shareDisplayName(share)}
+                          {viewableMemberDisplayName(member)}
                         </div>
                         <div className="truncate text-muted-foreground text-xs">
-                          {share.email || share.user_id}
+                          {member.email || member.user_id}
                         </div>
                       </div>
                     </div>
-
-                    <Badge variant="outline" className="w-fit">
-                      {t('common.guest_access')}
-                    </Badge>
-
-                    <Select
-                      value={share.permission}
-                      onValueChange={(value) =>
-                        updateMutation.mutate({
-                          shareId: share.id,
-                          nextPermission:
-                            value as WorkspaceTaskBoardSharePermission,
-                        })
-                      }
-                    >
-                      <SelectTrigger className="w-28">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="view">
-                          {t('ws-task-boards.share.permission.view')}
-                        </SelectItem>
-                        <SelectItem value="edit">
-                          {t('ws-task-boards.share.permission.edit')}
-                        </SelectItem>
-                      </SelectContent>
-                    </Select>
-
-                    <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 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>
             )}
-          </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>
 
         <DialogFooter>

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

@@ -11,6 +11,8 @@ import {
   Filter,
   GripVertical,
   Loader2,
+  Pin,
+  PinOff,
   RotateCcw,
 } from '@tuturuuu/icons';
 import type { ExternalTaskSortBy } from '@tuturuuu/internal-api/tasks';
@@ -174,6 +176,9 @@ interface BoardColumnProps {
   wsId: string;
   onExternalTasksCollapsedChange?: (collapsed: boolean) => void;
   onTaskListCollapsedChange?: (listId: string, collapsed: boolean) => void;
+  specialPinned?: boolean;
+  onSpecialPinnedChange?: (pinned: boolean) => void;
+  readOnly?: boolean;
 }
 
 export function BoardColumn({
@@ -200,6 +205,9 @@ export function BoardColumn({
   wsId,
   onExternalTasksCollapsedChange,
   onTaskListCollapsedChange,
+  specialPinned = false,
+  onSpecialPinnedChange,
+  readOnly = false,
 }: BoardColumnProps) {
   const t = useTranslations('common');
   const tTasks = useTranslations('ws-tasks');
@@ -210,7 +218,9 @@ export function BoardColumn({
   const isExternalCollapsed =
     isExternalStaging && column.is_external_collapsed === true;
   const listState = pagination[column.id];
-  const isInitialLoad = !listState || listState.isInitialLoad;
+  const isInitialLoad = readOnly
+    ? false
+    : !listState || listState.isInitialLoad;
   const [externalIncludeDocuments, setExternalIncludeDocuments] =
     useState(false);
   const [externalIncludeDoneClosed, setExternalIncludeDoneClosed] =
@@ -376,7 +386,7 @@ export function BoardColumn({
     isDragging,
   } = useSortable({
     id: column.id,
-    disabled: isExternalStaging,
+    disabled: readOnly || isExternalStaging,
     data: {
       type: 'Column',
       column: {
@@ -446,6 +456,9 @@ export function BoardColumn({
     : visibleTasks.length;
   const externalFilterCount =
     (externalIncludeDocuments ? 1 : 0) + (externalIncludeDoneClosed ? 1 : 0);
+  const pinListLabel = specialPinned
+    ? tTasks('unpin_task_list', { name: translateListName(column.name) })
+    : tTasks('pin_task_list', { name: translateListName(column.name) });
 
   // Memoize drag handle for performance
   const DragHandle = useMemo(
@@ -501,6 +514,8 @@ export function BoardColumn({
       <Card
         ref={composedRef}
         style={style}
+        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',
@@ -550,6 +565,8 @@ export function BoardColumn({
     <Card
       ref={composedRef}
       style={style}
+      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',
@@ -566,7 +583,7 @@ export function BoardColumn({
       )}
     >
       <div className="flex items-center gap-2 rounded-t-xl border-b p-3">
-        {!isExternalStaging && DragHandle}
+        {!readOnly && !isExternalStaging && DragHandle}
         <div className="flex flex-1 items-center gap-2">
           <span className="text-sm">{statusIcon}</span>
           <h3
@@ -577,9 +594,9 @@ export function BoardColumn({
                 : 'cursor-pointer hover:underline'
             )}
             onClick={() => {
-              if (!isExternalStaging) setIsEditOpen(true);
+              if (!readOnly && !isExternalStaging) setIsEditOpen(true);
             }}
-            title={isExternalStaging ? undefined : t('edit_list')}
+            title={readOnly || isExternalStaging ? undefined : t('edit_list')}
           >
             {translateListName(column.name)}
           </h3>
@@ -705,53 +722,104 @@ export function BoardColumn({
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
-              <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>
-            </>
-          ) : (
-            <>
-              {isClosedCollapsed || column.status === 'closed' ? (
+              {onSpecialPinnedChange ? (
                 <Button
                   type="button"
                   variant="ghost"
                   size="xs"
                   className={cn(
-                    'h-7 w-7 p-0 hover:bg-muted/40',
-                    getListTextColorClass(column.color as SupportedColor)
+                    'h-7 w-7 p-0 text-dynamic-cyan hover:bg-dynamic-cyan/10',
+                    specialPinned && 'bg-dynamic-cyan/10'
                   )}
-                  title={tTasks('collapse_task_list', {
-                    name: translateListName(column.name),
-                  })}
-                  aria-label={tTasks('collapse_task_list', {
-                    name: translateListName(column.name),
-                  })}
-                  onClick={() => onTaskListCollapsedChange?.(column.id, true)}
+                  title={pinListLabel}
+                  aria-label={pinListLabel}
+                  onClick={() => onSpecialPinnedChange(!specialPinned)}
+                >
+                  {specialPinned ? (
+                    <PinOff className="h-3.5 w-3.5" />
+                  ) : (
+                    <Pin className="h-3.5 w-3.5" />
+                  )}
+                </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>
+              )}
+            </>
+          ) : (
+            <>
+              {isClosedCollapsed || column.status === 'closed' ? (
+                <>
+                  {onSpecialPinnedChange ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="xs"
+                      className={cn(
+                        'h-7 w-7 p-0 hover:bg-muted/40',
+                        getListTextColorClass(column.color as SupportedColor),
+                        specialPinned && 'bg-muted/40'
+                      )}
+                      title={pinListLabel}
+                      aria-label={pinListLabel}
+                      onClick={() => onSpecialPinnedChange(!specialPinned)}
+                    >
+                      {specialPinned ? (
+                        <PinOff className="h-3.5 w-3.5" />
+                      ) : (
+                        <Pin className="h-3.5 w-3.5" />
+                      )}
+                    </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>
+                  )}
+                </>
               ) : null}
-              <ListActions
-                listId={column.id}
-                listName={column.name}
-                listStatus={column.status}
-                listColor={column.color as SupportedColor}
-                tasks={tasks}
-                boardId={boardId}
-                wsId={wsId}
-                onUpdate={handleUpdate}
-                onSelectAll={handleSelectAll}
-                isEditOpen={isEditOpen}
-                onEditOpenChange={setIsEditOpen}
-              />
+              {!readOnly && (
+                <ListActions
+                  listId={column.id}
+                  listName={column.name}
+                  listStatus={column.status}
+                  listColor={column.color as SupportedColor}
+                  tasks={tasks}
+                  boardId={boardId}
+                  wsId={wsId}
+                  onUpdate={handleUpdate}
+                  onSelectAll={handleSelectAll}
+                  isEditOpen={isEditOpen}
+                  onEditOpenChange={setIsEditOpen}
+                />
+              )}
             </>
           )}
         </div>
@@ -783,10 +851,11 @@ export function BoardColumn({
           onLoadMore={handleLoadMore}
           hasMore={listState?.hasMore ?? false}
           isLoadingMore={listState?.isLoading ?? false}
+          readOnly={readOnly}
         />
       )}
 
-      {!isExternalStaging && (
+      {!readOnly && !isExternalStaging && (
         <div className="rounded-b-xl border-t p-3 backdrop-blur-sm">
           <Button
             variant="ghost"