@tuturuuu/ui 0.7.0 → 0.9.0

package/src/components/ui/tu-do/boards/board-public-link-section.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  ChevronDown,
+  Copy,
+  ExternalLink,
+  Globe2,
+  Info,
+  Loader2,
+  Trash2,
+} from '@tuturuuu/icons';
+import {
+  disableWorkspaceTaskBoardPublicLink,
+  enableWorkspaceTaskBoardPublicLink,
+  getWorkspaceTaskBoardPublicLink,
+  type WorkspaceTaskBoardPublicLink,
+} from '@tuturuuu/internal-api/tasks';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@tuturuuu/ui/collapsible';
+import { Input } from '@tuturuuu/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+import { useLocale, useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+interface BoardPublicLinkSectionProps {
+  boardId: string;
+  open: boolean;
+  wsId: string;
+}
+
+function buildPublicBoardUrl(
+  locale: string,
+  link: WorkspaceTaskBoardPublicLink | null
+) {
+  if (!link?.code) return '';
+
+  const path = `/${locale}/shared/task-boards/${link.code}`;
+  if (typeof window === 'undefined') return path;
+  return `${window.location.origin}${path}`;
+}
+
+export function BoardPublicLinkSection({
+  boardId,
+  open,
+  wsId,
+}: BoardPublicLinkSectionProps) {
+  const t = useTranslations();
+  const locale = useLocale();
+  const queryClient = useQueryClient();
+  const [sectionOpen, setSectionOpen] = useState(false);
+  const queryKey = ['task-board-public-link', wsId, boardId] as const;
+
+  const publicLinkQuery = useQuery({
+    queryKey,
+    queryFn: () => getWorkspaceTaskBoardPublicLink(wsId, boardId),
+    enabled: open,
+    staleTime: 60_000,
+  });
+
+  const enableMutation = useMutation({
+    mutationFn: () => enableWorkspaceTaskBoardPublicLink(wsId, boardId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey });
+      toast.success(t('ws-task-boards.share.public.enabled'));
+    },
+    onError: () => {
+      toast.error(t('ws-task-boards.share.public.enable_failed'));
+    },
+  });
+
+  const disableMutation = useMutation({
+    mutationFn: () => disableWorkspaceTaskBoardPublicLink(wsId, boardId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey });
+      toast.success(t('ws-task-boards.share.public.disabled'));
+    },
+    onError: () => {
+      toast.error(t('ws-task-boards.share.public.disable_failed'));
+    },
+  });
+
+  const publicLink = publicLinkQuery.data?.publicLink ?? null;
+  const publicUrl = buildPublicBoardUrl(locale, publicLink);
+  const isMutating = enableMutation.isPending || disableMutation.isPending;
+  const statusBadge = publicLinkQuery.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>
+  ) : publicLink ? (
+    <Badge className="bg-dynamic-green/10 px-2 py-0.5 text-[10px] text-dynamic-green">
+      {t('common.enabled')}
+    </Badge>
+  ) : (
+    <Badge variant="secondary" className="px-2 py-0.5 text-[10px]">
+      {t('common.disabled')}
+    </Badge>
+  );
+
+  async function copyPublicUrl() {
+    if (!publicUrl) return;
+
+    try {
+      await navigator.clipboard.writeText(publicUrl);
+      toast.success(t('ws-task-boards.share.public.copy_success'));
+    } catch {
+      toast.error(t('ws-task-boards.share.public.copy_failed'));
+    }
+  }
+
+  function openPublicUrl() {
+    if (!publicUrl || typeof window === 'undefined') return;
+    window.open(publicUrl, '_blank', 'noopener,noreferrer');
+  }
+
+  return (
+    <Collapsible
+      open={sectionOpen}
+      onOpenChange={setSectionOpen}
+      className="rounded-md border"
+    >
+      <div className="flex min-h-11 items-center gap-2 px-3">
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex min-w-0 flex-1 items-center gap-2 text-left transition-colors hover:text-foreground"
+          >
+            <Globe2 className="h-4 w-4 text-muted-foreground" />
+            <span className="min-w-0 flex-1 truncate font-medium text-sm">
+              {t('ws-task-boards.share.public.title')}
+            </span>
+            {statusBadge}
+            <ChevronDown
+              className={cn(
+                'h-4 w-4 shrink-0 text-muted-foreground transition-transform',
+                sectionOpen && 'rotate-180'
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <TooltipProvider delayDuration={0} skipDelayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="text-muted-foreground transition-colors hover:text-foreground"
+                aria-label={t('ws-task-boards.share.note')}
+              >
+                <Info className="h-3.5 w-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-xs">
+              {t('ws-task-boards.share.public.tooltip')}
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      <CollapsibleContent className="border-t p-3">
+        {publicLinkQuery.isLoading ? (
+          <div className="flex items-center gap-2 rounded-md border border-dashed p-3 text-muted-foreground text-sm">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            {t('common.loading')}
+          </div>
+        ) : publicLink ? (
+          <div className="grid gap-2 sm:grid-cols-[1fr_auto_auto_auto]">
+            <Input value={publicUrl} readOnly className="min-w-0" />
+            <Button
+              type="button"
+              variant="outline"
+              onClick={copyPublicUrl}
+              disabled={!publicUrl}
+            >
+              <Copy className="h-4 w-4" />
+              {t('ws-task-boards.share.public.copy')}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={openPublicUrl}
+              disabled={!publicUrl}
+            >
+              <ExternalLink className="h-4 w-4" />
+              {t('ws-task-boards.share.public.open')}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => disableMutation.mutate()}
+              disabled={isMutating}
+            >
+              {disableMutation.isPending ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4" />
+              )}
+              {t('ws-task-boards.share.public.disable')}
+            </Button>
+          </div>
+        ) : (
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => enableMutation.mutate()}
+            disabled={isMutating}
+          >
+            {enableMutation.isPending ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Globe2 className="h-4 w-4" />
+            )}
+            {t('ws-task-boards.share.public.enable')}
+          </Button>
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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>