@tuturuuu/ui 0.8.0 → 0.9.0

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

@@ -43,6 +43,7 @@ interface VirtualizedTaskListProps {
   onLoadMore?: () => void;
   hasMore?: boolean;
   isLoadingMore?: boolean;
+  readOnly?: boolean;
 }
 
 interface TaskListContentProps {
@@ -64,6 +65,7 @@ interface TaskListContentProps {
   bulkUpdateCustomDueDate?: (date: Date | null) => Promise<void>;
   startIndex?: number;
   taskOrder?: Pick<Task, 'id'>[];
+  readOnly?: boolean;
 }
 
 export function getTaskDragPreviewSlotIndex({
@@ -132,6 +134,7 @@ function TaskListContent({
   bulkUpdateCustomDueDate,
   startIndex = 0,
   taskOrder = tasks,
+  readOnly = false,
 }: TaskListContentProps) {
   const slotIndex = getTaskDragPreviewSlotIndex({
     columnId: column.id,
@@ -170,6 +173,7 @@ function TaskListContent({
               optimisticUpdateInProgress={optimisticUpdateInProgress}
               selectedTasks={selectedTasks}
               bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
+              readOnly={readOnly}
             />
             {slotIndex === globalIndex + 1 && (
               <DragPreviewSlot
@@ -238,6 +242,7 @@ function VirtualizedTaskListInner({
   onLoadMore,
   hasMore,
   isLoadingMore,
+  readOnly = false,
 }: VirtualizedTaskListProps) {
   const t = useTranslations('common');
   const tTasks = useTranslations('ws-tasks');
@@ -474,6 +479,7 @@ function VirtualizedTaskListInner({
                 bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
                 startIndex={startIndex}
                 taskOrder={tasks}
+                readOnly={readOnly}
               />
             </div>
           </div>
@@ -502,6 +508,7 @@ function VirtualizedTaskListInner({
             optimisticUpdateInProgress={optimisticUpdateInProgress}
             bulkUpdateCustomDueDate={bulkUpdateCustomDueDate}
             taskOrder={tasks}
+            readOnly={readOnly}
           />
           {loadMoreSentinel}
         </SortableContext>

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { ChevronDown, Info } from '@tuturuuu/icons';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@tuturuuu/ui/collapsible';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+
+function ShareInfoTooltip({
+  content,
+  label,
+}: {
+  content: string;
+  label: string;
+}) {
+  return (
+    <TooltipProvider delayDuration={0} skipDelayDuration={0}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="text-muted-foreground transition-colors hover:text-foreground"
+            aria-label={label}
+          >
+            <Info className="h-3.5 w-3.5" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs">{content}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+interface ShareSectionProps {
+  children: ReactNode;
+  icon: ReactNode;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  statusBadge: ReactNode;
+  title: string;
+  tooltip: string;
+}
+
+export function ShareSection({
+  children,
+  icon,
+  onOpenChange,
+  open,
+  statusBadge,
+  title,
+  tooltip,
+}: ShareSectionProps) {
+  const t = useTranslations();
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={onOpenChange}
+      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"
+          >
+            {icon}
+            <span className="min-w-0 flex-1 truncate font-medium text-sm">
+              {title}
+            </span>
+            {statusBadge}
+            <ChevronDown
+              className={cn(
+                'h-4 w-4 shrink-0 text-muted-foreground transition-transform',
+                open && 'rotate-180'
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <ShareInfoTooltip
+          label={t('ws-task-boards.share.note')}
+          content={tooltip}
+        />
+      </div>
+      <CollapsibleContent className="border-t p-3">
+        {children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/components/ui/tu-do/drafts/draft-convert-dialog.tsx

@@ -2,6 +2,7 @@
 
 import { useQuery } from '@tanstack/react-query';
 import {
+  convertWorkspaceTaskDraft,
   listWorkspaceTaskBoards,
   listWorkspaceTaskLists,
 } from '@tuturuuu/internal-api';
@@ -46,6 +47,10 @@ export function DraftConvertDialog({
   const [selectedBoardId, setSelectedBoardId] = useState<string>('');
   const [selectedListId, setSelectedListId] = useState<string>('');
   const [isConverting, setIsConverting] = useState(false);
+  const internalApiOptions =
+    typeof window !== 'undefined'
+      ? { baseUrl: window.location.origin }
+      : undefined;
 
   // Sync selections when draft changes (useState initializer only runs on mount)
   useEffect(() => {
@@ -107,20 +112,13 @@ export function DraftConvertDialog({
 
     setIsConverting(true);
     try {
-      const res = await fetch(
-        `/api/v1/workspaces/${wsId}/task-drafts/${draft.id}/convert`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ listId: selectedListId }),
-        }
+      await convertWorkspaceTaskDraft(
+        wsId,
+        draft.id,
+        { listId: selectedListId },
+        internalApiOptions
       );
 
-      if (!res.ok) {
-        const data = await res.json();
-        throw new Error(data.error || 'Failed to convert draft');
-      }
-
       toast.success(t('converted_success'));
       onConverted();
       onClose();

package/src/components/ui/tu-do/drafts/drafts-page.tsx

@@ -2,6 +2,10 @@
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FileText } from '@tuturuuu/icons';
+import {
+  deleteWorkspaceTaskDraft,
+  listWorkspaceTaskDrafts,
+} from '@tuturuuu/internal-api/tasks';
 import { toast } from '@tuturuuu/ui/sonner';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -11,38 +15,51 @@ import { DraftConvertDialog } from './draft-convert-dialog';
 
 interface DraftsPageProps {
   wsId: string;
+  boardId?: string;
+  includeUnassignedForBoard?: boolean;
 }
 
-export function DraftsPage({ wsId }: DraftsPageProps) {
+function getBrowserInternalApiOptions() {
+  return typeof window !== 'undefined'
+    ? { baseUrl: window.location.origin }
+    : undefined;
+}
+
+export function DraftsPage({
+  wsId,
+  boardId,
+  includeUnassignedForBoard = false,
+}: DraftsPageProps) {
   const t = useTranslations('task-drafts');
   const queryClient = useQueryClient();
   const { editDraft } = useTaskDialogContext();
   const [convertDraft, setConvertDraft] = useState<TaskDraft | null>(null);
+  const draftQueryKey = [
+    'task-drafts',
+    wsId,
+    boardId ?? 'all',
+    includeUnassignedForBoard,
+  ] as const;
 
   const { data: drafts = [], isLoading } = useQuery<TaskDraft[]>({
-    queryKey: ['task-drafts', wsId],
-    queryFn: async () => {
-      const res = await fetch(`/api/v1/workspaces/${wsId}/task-drafts`);
-      if (!res.ok) throw new Error('Failed to fetch drafts');
-      const json = await res.json();
-      return json.data;
-    },
+    queryKey: draftQueryKey,
+    queryFn: () =>
+      listWorkspaceTaskDrafts(
+        wsId,
+        { boardId, includeUnassignedForBoard },
+        getBrowserInternalApiOptions()
+      ) as Promise<TaskDraft[]>,
   });
 
   const deleteMutation = useMutation({
-    mutationFn: async (draftId: string) => {
-      const res = await fetch(
-        `/api/v1/workspaces/${wsId}/task-drafts/${draftId}`,
-        { method: 'DELETE' }
-      );
-      if (!res.ok) throw new Error('Failed to delete draft');
-    },
+    mutationFn: async (draftId: string) =>
+      deleteWorkspaceTaskDraft(wsId, draftId, getBrowserInternalApiOptions()),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['task-drafts', wsId] });
       toast.success(t('deleted_success'));
     },
     onError: () => {
-      toast.error('Failed to delete draft');
+      toast.error(t('delete_failed'));
     },
   });
 

package/src/components/ui/tu-do/initiatives/task-initiatives-client.tsx

@@ -13,6 +13,15 @@ import {
   Trash2,
   User,
 } from '@tuturuuu/icons';
+import {
+  createWorkspaceTaskInitiative,
+  deleteWorkspaceTaskInitiative,
+  linkWorkspaceTaskInitiativeProject,
+  listWorkspaceTaskInitiatives,
+  listWorkspaceTaskProjects,
+  unlinkWorkspaceTaskInitiativeProject,
+  updateWorkspaceTaskInitiative,
+} from '@tuturuuu/internal-api/tasks';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
 import {
@@ -98,6 +107,12 @@ const STATUS_BADGE_CLASS: Record<InitiativeStatus, string> = {
   cancelled: 'bg-dynamic-red/15 text-dynamic-red border-transparent',
 };
 
+function getBrowserInternalApiOptions() {
+  return typeof window !== 'undefined'
+    ? { baseUrl: window.location.origin }
+    : undefined;
+}
+
 export function TaskInitiativesClient({
   wsId,
   initialInitiatives,
@@ -136,16 +151,8 @@ export function TaskInitiativesClient({
     refetch: refetchInitiatives,
   } = useQuery<TaskInitiative[]>({
     queryKey: ['workspace', wsId, 'task-initiatives'],
-    queryFn: async () => {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/task-initiatives`,
-        { cache: 'no-store' }
-      );
-      if (!response.ok) {
-        throw new Error(t('errors.fetch_initiatives'));
-      }
-      return response.json();
-    },
+    queryFn: () =>
+      listWorkspaceTaskInitiatives(wsId, getBrowserInternalApiOptions()),
     initialData: initialInitiatives,
     staleTime: 30_000,
   });
@@ -157,20 +164,12 @@ export function TaskInitiativesClient({
   } = useQuery<TaskProjectOption[]>({
     queryKey: ['workspace', wsId, 'task-projects-for-initiatives'],
     queryFn: async () => {
-      const response = await fetch(`/api/v1/workspaces/${wsId}/task-projects`, {
-        cache: 'no-store',
-      });
-      if (!response.ok) {
-        throw new Error(t('errors.fetch_projects'));
-      }
-      const rawProjects = await response.json();
-      return (
-        rawProjects as Array<{
-          id: string;
-          name: string;
-          status?: string | null;
-        }>
-      ).map((project) => ({
+      const rawProjects = await listWorkspaceTaskProjects(
+        wsId,
+        getBrowserInternalApiOptions()
+      );
+
+      return rawProjects.map((project) => ({
         id: project.id,
         name: project.name,
         status: project.status ?? null,
@@ -218,19 +217,13 @@ export function TaskInitiativesClient({
       description?: string;
       status: InitiativeStatus;
     }) => {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/task-initiatives`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name, description, status }),
-        }
+      const payload = { name, description: description ?? '', status };
+
+      return createWorkspaceTaskInitiative(
+        wsId,
+        payload,
+        getBrowserInternalApiOptions()
       );
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || t('errors.create_initiative'));
-      }
-      return response.json();
     },
     onSuccess: () => {
       toast.success(t('success.initiative_created'));
@@ -257,19 +250,14 @@ export function TaskInitiativesClient({
       description?: string;
       status: InitiativeStatus;
     }) => {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/task-initiatives/${initiativeId}`,
-        {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name, description, status }),
-        }
+      const payload = { name, description: description ?? '', status };
+
+      return updateWorkspaceTaskInitiative(
+        wsId,
+        initiativeId,
+        payload,
+        getBrowserInternalApiOptions()
       );
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || t('errors.update_initiative'));
-      }
-      return response.json();
     },
     onSuccess: () => {
       toast.success(t('success.initiative_updated'));
@@ -286,18 +274,12 @@ export function TaskInitiativesClient({
   });
 
   const deleteInitiativeMutation = useMutation({
-    mutationFn: async (initiativeId: string) => {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/task-initiatives/${initiativeId}`,
-        {
-          method: 'DELETE',
-        }
-      );
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || t('errors.delete_initiative'));
-      }
-    },
+    mutationFn: (initiativeId: string) =>
+      deleteWorkspaceTaskInitiative(
+        wsId,
+        initiativeId,
+        getBrowserInternalApiOptions()
+      ),
     onSuccess: () => {
       toast.success(t('success.initiative_deleted'));
       refetchInitiatives();
@@ -314,21 +296,13 @@ export function TaskInitiativesClient({
     }: {
       initiativeId: string;
       projectId: string;
-    }) => {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/task-initiatives/${initiativeId}/projects`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ projectId }),
-        }
-      );
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || t('errors.link_project'));
-      }
-      return response.json();
-    },
+    }) =>
+      linkWorkspaceTaskInitiativeProject(
+        wsId,
+        initiativeId,
+        projectId,
+        getBrowserInternalApiOptions()
+      ),
     onSuccess: (_data, variables) => {
       toast.success(t('success.project_linked'));
       setProjectToLink('');
@@ -362,19 +336,13 @@ export function TaskInitiativesClient({
     }: {
       initiativeId: string;
       projectId: string;
-    }) => {
-      const response = await fetch(
-        `/api/v1/workspaces/${wsId}/task-initiatives/${initiativeId}/projects/${projectId}`,
-        {
-          method: 'DELETE',
-        }
-      );
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || t('errors.unlink_project'));
-      }
-      return response.json();
-    },
+    }) =>
+      unlinkWorkspaceTaskInitiativeProject(
+        wsId,
+        initiativeId,
+        projectId,
+        getBrowserInternalApiOptions()
+      ),
     onSuccess: (_data, variables) => {
       toast.success(t('success.project_unlinked'));
       if (variables) {

package/src/components/ui/tu-do/my-tasks/my-tasks-content.tsx

@@ -20,12 +20,30 @@ import { TaskPreviewDialog } from './task-preview-dialog';
 import { useMyTasksState } from './use-my-tasks-state';
 
 interface MyTasksContentProps {
+  disableAutoCreateBoard?: boolean;
+  embedded?: boolean;
+  initialBoard?: {
+    id: string;
+    name: string | null;
+  };
+  initialListId?: string;
+  initialLists?: Array<{
+    deleted?: boolean | null;
+    id: string;
+    name: string | null;
+    position?: number | null;
+  }>;
   wsId: string;
   userId: string;
   isPersonal: boolean;
 }
 
 export default function MyTasksContent({
+  disableAutoCreateBoard = false,
+  embedded = false,
+  initialBoard,
+  initialListId,
+  initialLists,
   wsId,
   userId,
   isPersonal,
@@ -40,13 +58,17 @@ export default function MyTasksContent({
     'enter'
   );
   const state = useMyTasksState({
+    ...(disableAutoCreateBoard ? { disableAutoCreateBoard } : {}),
+    ...(initialBoard ? { initialBoard } : {}),
+    ...(initialListId ? { initialListId } : {}),
+    ...(initialLists ? { initialLists } : {}),
     wsId,
     userId,
     isPersonal,
   });
 
   return (
-    <div className="space-y-4 md:space-y-6">
+    <div className={embedded ? 'space-y-4' : 'space-y-4 md:space-y-6'}>
       {/* Header with greeting + summary cards */}
       <MyTasksHeader
         overdueCount={state.filteredTasks.overdueTasks?.length ?? 0}
@@ -55,7 +77,9 @@ export default function MyTasksContent({
       />
 
       {/* Command Bar */}
-      <div className="mx-auto mb-32 max-w-5xl">
+      <div
+        className={embedded ? 'mx-auto max-w-5xl' : 'mx-auto mb-32 max-w-5xl'}
+      >
         <CommandBar
           value={state.commandBarInput}
           onValueChange={state.setCommandBarInput}

package/src/components/ui/tu-do/my-tasks/use-my-tasks-state.ts

@@ -39,12 +39,28 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 
 interface UseMyTasksStateProps {
+  disableAutoCreateBoard?: boolean;
+  initialBoard?: {
+    id: string;
+    name: string | null;
+  };
+  initialListId?: string;
+  initialLists?: Array<{
+    deleted?: boolean | null;
+    id: string;
+    name: string | null;
+    position?: number | null;
+  }>;
   wsId: string;
   userId: string;
   isPersonal: boolean;
 }
 
 export function useMyTasksState({
+  disableAutoCreateBoard = false,
+  initialBoard,
+  initialListId,
+  initialLists,
   wsId,
   userId,
   isPersonal,
@@ -96,8 +112,16 @@ export function useMyTasksState({
   // Board selector state
   const [boardSelectorOpen, setBoardSelectorOpen] = useState(false);
   const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string>(wsId);
-  const [selectedBoardId, setSelectedBoardId] = useState<string>('');
-  const [selectedListId, setSelectedListId] = useState<string>('');
+  const [selectedBoardId, setSelectedBoardId] = useState<string>(
+    initialBoard?.id ?? ''
+  );
+  const [selectedListId, setSelectedListId] = useState<string>(
+    initialListId ??
+      initialLists
+        ?.filter((list) => !list.deleted)
+        .sort((a, b) => (a.position ?? 0) - (b.position ?? 0))[0]?.id ??
+      ''
+  );
   const [newBoardDialogOpen, setNewBoardDialogOpen] = useState(false);
   const [newBoardName, setNewBoardName] = useState<string>('');
   const [newListDialogOpen, setNewListDialogOpen] = useState(false);
@@ -276,6 +300,7 @@ export function useMyTasksState({
       });
       return payload.count ?? 0;
     },
+    enabled: !disableAutoCreateBoard,
   });
 
   // Auto-create a board if the workspace has none
@@ -294,7 +319,13 @@ export function useMyTasksState({
   );
 
   useEffect(() => {
-    if (wsBoardCountLoading || wsBoardCount === undefined) return;
+    if (
+      disableAutoCreateBoard ||
+      wsBoardCountLoading ||
+      wsBoardCount === undefined
+    ) {
+      return;
+    }
     if (wsBoardCount > 0) return;
     if (autoCreateAttemptedRef.current) return;
     autoCreateAttemptedRef.current = true;
@@ -344,6 +375,7 @@ export function useMyTasksState({
     queryClient,
     defaultBoardName,
     defaultListNames,
+    disableAutoCreateBoard,
   ]);
 
   // Fetch boards with lists for selected workspace
@@ -422,11 +454,16 @@ export function useMyTasksState({
   const availableLists = useMemo(() => {
     if (!selectedBoardId) return [];
     const board = boardsData.find((b: any) => b.id === selectedBoardId);
-    if (!board?.task_lists) return [];
+    if (!board?.task_lists) {
+      if (selectedBoardId !== initialBoard?.id) return [];
+      return (initialLists ?? [])
+        .filter((list) => !list.deleted)
+        .sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
+    }
     return (board.task_lists as any[])
       .filter((l: any) => !l.deleted)
       .sort((a: any, b: any) => (a.position || 0) - (b.position || 0));
-  }, [selectedBoardId, boardsData]);
+  }, [selectedBoardId, boardsData, initialBoard?.id, initialLists]);
 
   const hasValidSelectedList = useMemo(
     () => availableLists.some((list: any) => list.id === selectedListId),
@@ -794,13 +831,23 @@ export function useMyTasksState({
   const selectedDestination = useMemo(() => {
     if (!selectedBoardId || !selectedListId) return null;
     const board = boardsData.find((b: any) => b.id === selectedBoardId);
-    const lists = (board?.task_lists as any[]) || [];
+    const isInitialBoard = selectedBoardId === initialBoard?.id;
+    const lists =
+      (board?.task_lists as any[]) ||
+      (isInitialBoard ? (initialLists ?? []) : []);
     const list = lists.find((l: any) => l.id === selectedListId);
     return {
-      boardName: board?.name || 'Unknown Board',
+      boardName: board?.name || initialBoard?.name || 'Unknown Board',
       listName: list?.name || 'Unknown List',
     };
-  }, [selectedBoardId, selectedListId, boardsData]);
+  }, [
+    selectedBoardId,
+    selectedListId,
+    boardsData,
+    initialBoard?.id,
+    initialBoard?.name,
+    initialLists,
+  ]);
 
   const handleClearDestination = () => {
     setSelectedBoardId('');

package/src/components/ui/tu-do/notes/note-edit-dialog.tsx

@@ -41,10 +41,7 @@ export function NoteEditDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange} modal={true}>
-      <DialogContent
-        showCloseButton={false}
-        className="inset-0! top-0! left-0! flex h-screen max-h-screen w-screen max-w-none! translate-x-0! translate-y-0! gap-0 rounded-none! border-0 p-0"
-      >
+      <DialogContent showCloseButton={false} presentation="fullscreen">
         {/* Main content area - Note title and description */}
         <div className="flex min-w-0 flex-1 flex-col bg-background transition-all duration-300">
           {/* Enhanced Header with gradient */}