@tuturuuu/ui 0.7.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/boardId/timeline/timeline-display.ts

@@ -14,6 +14,15 @@ export const HANDLE_WIDTH = 12;
 export const DRAG_ACTIVATION_PX = 6;
 export const COLLAPSED_UNSCHEDULED_PREVIEW_COUNT = 4;
 
+export function getTimelineDayGridBackground(dayWidth: number, opacity = 0.45) {
+  const safeDayWidth = Math.max(1, dayWidth);
+  const lineStart = Math.max(0, safeDayWidth - 1);
+
+  return {
+    backgroundImage: `repeating-linear-gradient(to right, transparent 0, transparent ${lineStart}px, hsl(var(--border) / ${opacity}) ${lineStart}px, hsl(var(--border) / ${opacity}) ${safeDayWidth}px)`,
+  };
+}
+
 export function getDensityConfig(density: Density) {
   switch (density) {
     case 'compact':

package/src/components/ui/tu-do/boards/boardId/timeline/timeline-grid.tsx

@@ -6,7 +6,10 @@ import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
 import type { useTranslations } from 'next-intl';
 import type { PointerEvent as ReactPointerEvent } from 'react';
-import { getListStatusBadgeClasses } from './timeline-display';
+import {
+  getListStatusBadgeClasses,
+  getTimelineDayGridBackground,
+} from './timeline-display';
 import { TimelineTaskRow } from './timeline-task-row';
 import type {
   TimelineInteractionMode,
@@ -197,7 +200,6 @@ export function TimelineGrid({
                 groupId={group.id}
                 localTasks={localTasks}
                 dayWidth={dayWidth}
-                timelineWidth={timelineWidth}
                 groupHeaderHeight={groupHeaderHeight}
                 isMoveTargetGroup={isMoveTargetGroup}
                 isPreviewGroup={isPreviewGroup}
@@ -257,7 +259,6 @@ export function TimelineGrid({
                   groupId={group.id}
                   localTasks={localTasks}
                   dayWidth={dayWidth}
-                  timelineWidth={timelineWidth}
                   groupHeaderHeight={rowHeight}
                   isMoveTargetGroup={isMoveTargetGroup}
                   isPreviewGroup={isPreviewGroup}
@@ -281,7 +282,6 @@ function TimelineGroupDropTarget({
   groupId,
   localTasks,
   dayWidth,
-  timelineWidth,
   groupHeaderHeight,
   isMoveTargetGroup,
   isPreviewGroup,
@@ -295,7 +295,6 @@ function TimelineGroupDropTarget({
   groupId: string;
   localTasks: Task[];
   dayWidth: number;
-  timelineWidth: number;
   groupHeaderHeight: number;
   isMoveTargetGroup: boolean;
   isPreviewGroup: boolean;
@@ -364,17 +363,10 @@ function TimelineGroupDropTarget({
             </div>
           );
         })()}
-      <div className="pointer-events-none absolute inset-0 flex">
-        {Array.from({
-          length: Math.max(1, Math.ceil(timelineWidth / dayWidth)),
-        }).map((_, index) => (
-          <div
-            key={`${groupId}-drop-${index}`}
-            className="h-full border-border/35 border-r"
-            style={{ width: dayWidth }}
-          />
-        ))}
-      </div>
+      <div
+        className="pointer-events-none absolute inset-0"
+        style={getTimelineDayGridBackground(dayWidth, 0.35)}
+      />
     </div>
   );
 }

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

@@ -18,7 +18,6 @@ import {
   DropdownMenuSubTrigger,
 } from '@tuturuuu/ui/dropdown-menu';
 import { cn } from '@tuturuuu/utils/format';
-import dayjs from 'dayjs';
 import type { useTranslations } from 'next-intl';
 import type { PointerEvent as ReactPointerEvent } from 'react';
 import { useState } from 'react';
@@ -26,6 +25,7 @@ import { TaskRowActionsMenu } from '../../../shared/task-row-actions-menu';
 import {
   getStatusToneClasses,
   getTaskEyebrow,
+  getTimelineDayGridBackground,
   HANDLE_WIDTH,
 } from './timeline-display';
 import type {
@@ -263,30 +263,10 @@ export function TimelineTaskRow({
           style={{ minHeight: rowHeight }}
           onDoubleClick={() => onOpenEditor(item.task)}
         >
-          <div className="pointer-events-none absolute inset-0 flex">
-            {Array.from({
-              length: Math.max(1, Math.ceil(timelineWidth / dayWidth)),
-            }).map((_, index) => {
-              const isToday = todayVisible && index === todayIndex;
-              const date = item.start
-                ? dayjs(item.start).add(index - item.offsetDays, 'day')
-                : null;
-              const isWeekend = date ? [0, 6].includes(date.day()) : false;
-
-              return (
-                <div
-                  key={`${item.task.id}-${index}`}
-                  className={cn(
-                    'h-full border-border/45 border-r',
-                    index === 0 && 'border-l border-l-border/50',
-                    isWeekend && 'bg-muted/[0.12]',
-                    isToday && 'bg-dynamic-blue/[0.035]'
-                  )}
-                  style={{ width: dayWidth }}
-                />
-              );
-            })}
-          </div>
+          <div
+            className="pointer-events-none absolute inset-0 border-border/50 border-l"
+            style={getTimelineDayGridBackground(dayWidth)}
+          />
 
           {todayVisible && (
             <div

package/src/components/ui/tu-do/boards/boardId/timeline/timeline-utils.test.ts

@@ -1,7 +1,11 @@
 import type { Task } from '@tuturuuu/types/primitives/Task';
 import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { buildTimelineModel, computeTimelineSpans } from './timeline-utils';
+import {
+  buildTimelineModel,
+  computeTimelineSpans,
+  MAX_TIMELINE_DAYS,
+} from './timeline-utils';
 
 const lists: TaskList[] = [
   {
@@ -108,6 +112,37 @@ describe('timeline row model', () => {
     );
   });
 
+  it('caps the rendered day window for extreme scheduled task ranges', () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-05-07T12:00:00.000Z'));
+
+    const model = buildTimelineModel(
+      [
+        task({
+          id: 'old-task',
+          name: 'Very old task',
+          start_date: '2020-01-01T00:00:00.000Z',
+          end_date: '2020-01-02T23:59:59.999Z',
+        }),
+        task({
+          id: 'future-task',
+          name: 'Very future task',
+          start_date: '2035-01-01T00:00:00.000Z',
+          end_date: '2035-01-02T23:59:59.999Z',
+        }),
+      ],
+      lists
+    );
+
+    expect(model.days).toHaveLength(MAX_TIMELINE_DAYS);
+    expect(model.rangeStart.getTime()).toBeLessThanOrEqual(
+      new Date('2026-05-07T00:00:00.000Z').getTime()
+    );
+    expect(model.rangeEnd.getTime()).toBeGreaterThanOrEqual(
+      new Date('2026-05-07T00:00:00.000Z').getTime()
+    );
+  });
+
   it('keeps span computation stable for existing analytics exports', () => {
     vi.useFakeTimers();
     vi.setSystemTime(new Date('2026-05-07T12:00:00.000Z'));

package/src/components/ui/tu-do/boards/boardId/timeline/timeline-utils.ts

@@ -62,6 +62,7 @@ const DEFAULT_PAST_PADDING_DAYS = 3;
 const DEFAULT_FUTURE_PADDING_DAYS = 6;
 const EMPTY_PAST_PADDING_DAYS = 7;
 const EMPTY_FUTURE_PADDING_DAYS = 14;
+export const MAX_TIMELINE_DAYS = 180;
 const TIMELINE_LIST_STATUS_ORDER: Record<string, number> = {
   not_started: 0,
   active: 1,
@@ -126,6 +127,48 @@ export function buildMonthSegments(days: Date[]) {
   return segments;
 }
 
+function capTimelineRange(
+  rangeStart: Date,
+  rangeEnd: Date,
+  todayMid: dayjs.Dayjs
+) {
+  const start = dayjs(rangeStart).startOf('day');
+  const end = dayjs(rangeEnd).startOf('day');
+  const totalDays = end.diff(start, 'day') + 1;
+
+  if (totalDays <= MAX_TIMELINE_DAYS) {
+    return {
+      rangeStart: start.toDate(),
+      rangeEnd: end.toDate(),
+    };
+  }
+
+  const latestStart = end.subtract(MAX_TIMELINE_DAYS - 1, 'day');
+  let cappedStart = start;
+
+  if (
+    (todayMid.isAfter(start) || todayMid.isSame(start, 'day')) &&
+    (todayMid.isBefore(end) || todayMid.isSame(end, 'day'))
+  ) {
+    cappedStart = todayMid.subtract(Math.floor(MAX_TIMELINE_DAYS / 2), 'day');
+  } else if (todayMid.isAfter(end)) {
+    cappedStart = latestStart;
+  }
+
+  if (cappedStart.isBefore(start)) {
+    cappedStart = start;
+  }
+
+  if (cappedStart.isAfter(latestStart)) {
+    cappedStart = latestStart;
+  }
+
+  return {
+    rangeStart: cappedStart.toDate(),
+    rangeEnd: cappedStart.add(MAX_TIMELINE_DAYS - 1, 'day').toDate(),
+  };
+}
+
 function withTaskRows(
   items: Array<Omit<TimelineItem, 'offsetDays'>>,
   rangeStart: Date
@@ -280,7 +323,7 @@ export function buildTimelineModel(
     });
   }
 
-  const rangeStart = scheduled.length
+  const rawRangeStart = scheduled.length
     ? dayjs(
         scheduled.reduce(
           (min, item) => (item.start < min ? item.start : min),
@@ -292,7 +335,7 @@ export function buildTimelineModel(
         .toDate()
     : todayMid.subtract(EMPTY_PAST_PADDING_DAYS, 'day').toDate();
 
-  const rangeEnd = scheduled.length
+  const rawRangeEnd = scheduled.length
     ? dayjs(
         scheduled.reduce(
           (max, item) => (item.end > max ? item.end : max),
@@ -304,6 +347,12 @@ export function buildTimelineModel(
         .toDate()
     : todayMid.add(EMPTY_FUTURE_PADDING_DAYS, 'day').toDate();
 
+  const { rangeStart, rangeEnd } = capTimelineRange(
+    rawRangeStart,
+    rawRangeEnd,
+    todayMid
+  );
+
   const days = enumerateDays(rangeStart, rangeEnd);
   const monthSegments = buildMonthSegments(days);
   const todayIndex = Math.round(

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/boards/workspace-projects-client-page.tsx

@@ -72,6 +72,15 @@ export default function WorkspaceProjectsClientPage({
   const isPermissionLoading = permissionQuery.isLoading;
 
   const resolvedWsId = workspace?.id;
+  const workspaceAccess = workspace as
+    | { access_type?: string; guest_products?: string[] }
+    | null
+    | undefined;
+  const isWorkspaceGuestTasksAccess =
+    workspaceAccess?.access_type === 'guest' &&
+    workspaceAccess.guest_products?.includes('tasks');
+  const canReadBoards =
+    canManageProjects === true || isWorkspaceGuestTasksAccess;
 
   const {
     data: boardsPayload,
@@ -85,9 +94,10 @@ export default function WorkspaceProjectsClientPage({
         page: Number.parseInt(page, 10),
         pageSize: Number.parseInt(pageSize, 10),
       }),
-    enabled: Boolean(resolvedWsId),
+    enabled: Boolean(resolvedWsId && canReadBoards),
   });
-  const isGuestBoardAccess = boardsPayload?.access_type === 'guest';
+  const isGuestBoardAccess =
+    isWorkspaceGuestTasksAccess || boardsPayload?.access_type === 'guest';
 
   useEffect(() => {
     if (
@@ -112,7 +122,7 @@ export default function WorkspaceProjectsClientPage({
     isWorkspacePending ||
     isWorkspaceUserLoading ||
     (isPermissionLoading && !isGuestBoardAccess) ||
-    isBoardsPending
+    (canReadBoards && isBoardsPending)
   ) {
     return <BoardsListSkeleton />;
   }

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'));
     },
   });