@tuturuuu/ui 0.17.0 → 0.19.0

package/src/hooks/__tests__/use-calendar-sync.test.tsx

@@ -53,10 +53,20 @@ function renderCalendarSync({
   return renderHook(() => useCalendarSync(), { wrapper });
 }
 
-function mockCalendarFetch(events: CalendarEvent[]) {
+function mockCalendarFetch(
+  events: CalendarEvent[],
+  calendars: Array<{ id: string; is_enabled: boolean }> = []
+) {
   return vi.fn(async (input: RequestInfo | URL) => {
     const url = String(input);
 
+    if (url.includes('/calendars')) {
+      return {
+        ok: true,
+        json: async () => ({ calendars, grouped: {}, total: calendars.length }),
+      } as Response;
+    }
+
     if (url.includes('/calendar/habit-events')) {
       return {
         ok: true,
@@ -95,6 +105,13 @@ function mockCalendarFetchByWeek(
   return vi.fn(async (input: RequestInfo | URL) => {
     const url = new URL(String(input), 'http://localhost');
 
+    if (url.pathname.endsWith('/calendars')) {
+      return {
+        ok: true,
+        json: async () => ({ calendars: [], grouped: {}, total: 0 }),
+      } as Response;
+    }
+
     if (url.pathname.includes('/calendar/habit-events')) {
       return {
         ok: true,
@@ -252,6 +269,60 @@ describe('CalendarSyncProvider optimistic visible events', () => {
     expect(result.current.events.map((event) => event.id)).toEqual(['event-1']);
   });
 
+  it('clears a transient event loading warning after the next successful fetch', async () => {
+    const initialEvent = createEvent('event-1');
+    const fetchMock = mockCalendarFetch([initialEvent]);
+    vi.stubGlobal('fetch', fetchMock);
+
+    const { result } = renderCalendarSync();
+
+    act(() => {
+      result.current.setDates([new Date('2026-06-22T00:00:00.000Z')]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.events).toHaveLength(1);
+    });
+
+    fetchMock.mockImplementation(async (input: RequestInfo | URL) => {
+      if (String(input).includes('/calendar/habit-events')) {
+        return {
+          ok: true,
+          json: async () => ({
+            completedHabitEventIds: [],
+            habitEventIds: [],
+          }),
+        } as Response;
+      }
+
+      return {
+        ok: false,
+        json: async () => ({ error: 'Temporary outage' }),
+      } as Response;
+    });
+
+    act(() => {
+      result.current.refresh();
+    });
+
+    await waitFor(() => {
+      expect(result.current.syncStatus).toMatchObject({
+        message: 'failed_to_load_events',
+        state: 'error',
+      });
+    });
+
+    fetchMock.mockImplementation(mockCalendarFetch([initialEvent]));
+    act(() => {
+      result.current.refresh();
+    });
+
+    await waitFor(() => {
+      expect(result.current.syncStatus.state).toBe('idle');
+    });
+    expect(result.current.error).toBeNull();
+  });
+
   it('shows the active week events when navigating away and back', async () => {
     const currentWeekEvent = createEvent('current-week-event', {
       start_at: '2026-06-22T09:00:00.000Z',
@@ -443,4 +514,35 @@ describe('CalendarSyncProvider optimistic visible events', () => {
       expect.objectContaining({ method: 'DELETE' })
     );
   });
+
+  it('hides events whose workspace calendar is disabled', async () => {
+    const visibleEvent = createEvent('visible-event', {
+      source_calendar_id: 'calendar-visible',
+    });
+    const hiddenEvent = createEvent('hidden-event', {
+      source_calendar_id: 'calendar-hidden',
+    });
+    vi.stubGlobal(
+      'fetch',
+      mockCalendarFetch(
+        [visibleEvent, hiddenEvent],
+        [
+          { id: 'calendar-visible', is_enabled: true },
+          { id: 'calendar-hidden', is_enabled: false },
+        ]
+      )
+    );
+
+    const { result } = renderCalendarSync();
+
+    act(() => {
+      result.current.setDates([new Date('2026-06-22T00:00:00.000Z')]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.events.map((event) => event.id)).toEqual([
+        'visible-event',
+      ]);
+    });
+  });
 });

package/src/hooks/use-calendar-sync.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { listWorkspaceCalendars } from '@tuturuuu/internal-api/calendar';
 import type {
   Workspace,
   WorkspaceCalendarEvent,
@@ -235,6 +236,22 @@ export const CalendarSyncProvider = ({
     );
   }, [calendarConnections]);
 
+  const { data: workspaceCalendarsData } = useQuery({
+    queryKey: ['workspace-calendars', wsId],
+    enabled: !hasExternalEvents && !!wsId,
+    queryFn: () => listWorkspaceCalendars(wsId),
+    staleTime: 30_000,
+  });
+  const enabledWorkspaceCalendarIds = useMemo(
+    () =>
+      new Set(
+        (workspaceCalendarsData?.calendars ?? [])
+          .filter((calendar) => calendar.is_enabled)
+          .map((calendar) => calendar.id)
+      ),
+    [workspaceCalendarsData?.calendars]
+  );
+
   // Update calendar connection state
   const updateCalendarConnection = useCallback(
     (connectionId: string, isEnabled: boolean) => {
@@ -454,8 +471,8 @@ export const CalendarSyncProvider = ({
         );
 
         if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.error || 'Failed to fetch events');
+          const errorData = await response.json().catch(() => null);
+          throw new Error(errorData?.error || 'Failed to fetch events');
         }
 
         const result = await response.json();
@@ -471,6 +488,12 @@ export const CalendarSyncProvider = ({
         isForcedRef.current = false;
 
         setError(null);
+        setSyncStatus((currentStatus) =>
+          currentStatus.state === 'error' &&
+          currentStatus.message === 'failed_to_load_events'
+            ? { state: 'idle' }
+            : currentStatus
+        );
         return fetchedData;
       } catch (err) {
         const errorMessage =
@@ -745,18 +768,30 @@ export const CalendarSyncProvider = ({
   const visibleEventsWithOptimisticState = useMemo(() => {
     const removedIds = new Set(optimisticState.removedIds);
 
-    // Filter external events by enabled provider calendars. Local Tuturuuu
-    // events are always shown here; native calendar visibility is handled
-    // by the workspace calendar endpoints.
-    const filteredEvents =
-      !hasExternalEvents && calendarConnections.length > 0
-        ? (visibleDatabaseEvents as CalendarEvent[]).filter((event) => {
-            const eventCalendarId =
-              (event as any).external_calendar_id ||
-              (event as any).google_calendar_id;
-            return !eventCalendarId || enabledCalendarIds.has(eventCalendarId);
-          })
-        : (visibleDatabaseEvents as CalendarEvent[]);
+    // Filter native and external events using the same visibility controls as
+    // the sidebar. Events without a source remain visible for backwards
+    // compatibility with older calendar rows.
+    const filteredEvents = !hasExternalEvents
+      ? (visibleDatabaseEvents as CalendarEvent[]).filter((event) => {
+          const sourceCalendarId = event.source_calendar_id;
+          const eventCalendarId =
+            event.external_calendar_id || event.google_calendar_id;
+
+          if (
+            sourceCalendarId &&
+            (workspaceCalendarsData?.calendars.length ?? 0) > 0 &&
+            !enabledWorkspaceCalendarIds.has(sourceCalendarId)
+          ) {
+            return false;
+          }
+
+          return (
+            !eventCalendarId ||
+            calendarConnections.length === 0 ||
+            enabledCalendarIds.has(eventCalendarId)
+          );
+        })
+      : (visibleDatabaseEvents as CalendarEvent[]);
 
     const byId = new Map<string, CalendarEvent>();
 
@@ -782,11 +817,13 @@ export const CalendarSyncProvider = ({
   }, [
     calendarConnections.length,
     enabledCalendarIds,
+    enabledWorkspaceCalendarIds,
     hasExternalEvents,
     isVisibleInCurrentRange,
     optimisticState.events,
     optimisticState.removedIds,
     visibleDatabaseEvents,
+    workspaceCalendarsData?.calendars.length,
   ]);
 
   useEffect(() => {

package/src/lib/task-personal-external.ts

@@ -1,5 +1,5 @@
 import type { Task } from '@tuturuuu/types/primitives/Task';
-import { isPersonalExternalStagingListId } from '@tuturuuu/utils/task-helper';
+import { isPersonalExternalStagingListId } from '@tuturuuu/utils/task-helper/personal-external-staging';
 
 function hasValue(value: string | null | undefined): value is string {
   return typeof value === 'string' && value.length > 0;

package/src/lib/workspace-actions.ts

@@ -1,9 +1,5 @@
 'use server';
 
-import {
-  normalizeTaskBoardShareEmail,
-  strongestTaskBoardGuestPermission,
-} from '@tuturuuu/apis/tu-do/board-access';
 import {
   createAdminClient,
   createClient,
@@ -16,6 +12,21 @@ const WORKSPACE_SUMMARY_UNAUTHORIZED = 'WORKSPACE_SUMMARY_UNAUTHORIZED';
 const DEFAULT_WORKSPACE_SEARCH_LIMIT = 50;
 const MAX_WORKSPACE_SEARCH_LIMIT = 100;
 
+type TaskBoardGuestPermission = 'view' | 'edit';
+
+function normalizeTaskBoardShareEmail(email: string | null | undefined) {
+  const normalized = email?.trim().toLowerCase();
+  return normalized || null;
+}
+
+function strongestTaskBoardGuestPermission(
+  permissions: Array<TaskBoardGuestPermission | null | undefined>
+): TaskBoardGuestPermission | null {
+  if (permissions.includes('edit')) return 'edit';
+  if (permissions.includes('view')) return 'view';
+  return null;
+}
+
 function normalizeWorkspaceTier(
   tier: string | null | undefined
 ): InternalApiWorkspaceSummary['tier'] {

package/src/components/ui/calendar-app/components/actions-dropdown.tsx

@@ -1,269 +0,0 @@
-'use client';
-
-import {
-  CalendarClock,
-  Calendar as CalendarIcon,
-  CalendarPlus,
-  CheckCircle2,
-  MoreHorizontal,
-  Pencil,
-  Trash2,
-} from '@tuturuuu/icons';
-import { format } from 'date-fns';
-import { useState } from 'react';
-import { Button } from '../../button';
-import { Calendar } from '../../calendar';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '../../dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../../dropdown-menu';
-
-interface ActionsDropdownProps {
-  taskId: string;
-  taskName: string;
-  startDate?: string | null;
-  endDate?: string | null;
-  onEdit?: (taskId: string) => void;
-  onScheduling?: (taskId: string) => void;
-  onStartDateChange?: (taskId: string, date: Date | null) => void;
-  onDueDateChange?: (taskId: string, date: Date | null) => void;
-  onMarkDone?: (taskId: string) => void;
-  onDelete?: (taskId: string) => void;
-}
-
-export default function ActionsDropdown({
-  taskId,
-  taskName,
-  startDate,
-  endDate,
-  onEdit,
-  onScheduling,
-  onStartDateChange,
-  onDueDateChange,
-  onMarkDone,
-  onDelete,
-}: ActionsDropdownProps) {
-  const [startDateDialogOpen, setStartDateDialogOpen] = useState(false);
-  const [dueDateDialogOpen, setDueDateDialogOpen] = useState(false);
-  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
-  const [selectedStartDate, setSelectedStartDate] = useState<Date | undefined>(
-    startDate ? new Date(startDate) : undefined
-  );
-  const [selectedDueDate, setSelectedDueDate] = useState<Date | undefined>(
-    endDate ? new Date(endDate) : undefined
-  );
-
-  const handleStartDateSave = () => {
-    onStartDateChange?.(taskId, selectedStartDate || null);
-    setStartDateDialogOpen(false);
-  };
-
-  const handleDueDateSave = () => {
-    onDueDateChange?.(taskId, selectedDueDate || null);
-    setDueDateDialogOpen(false);
-  };
-
-  const handleDeleteConfirm = () => {
-    onDelete?.(taskId);
-    setDeleteConfirmOpen(false);
-  };
-
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button
-            type="button"
-            className="rounded p-1 transition-colors hover:bg-accent/50"
-            aria-label="More actions"
-          >
-            <MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-48">
-          <DropdownMenuItem
-            onClick={() => onEdit?.(taskId)}
-            className="cursor-pointer gap-2"
-          >
-            <Pencil className="h-4 w-4 text-foreground" />
-            Edit task
-          </DropdownMenuItem>
-
-          <DropdownMenuSeparator />
-
-          <DropdownMenuItem
-            onClick={() => onScheduling?.(taskId)}
-            className="cursor-pointer gap-2"
-          >
-            <CalendarClock className="h-4 w-4 text-dynamic-teal" />
-            Configure scheduling
-          </DropdownMenuItem>
-
-          <DropdownMenuItem
-            onClick={() => setStartDateDialogOpen(true)}
-            className="cursor-pointer gap-2"
-          >
-            <CalendarPlus className="h-4 w-4 text-dynamic-blue" />
-            {startDate
-              ? `Start: ${format(new Date(startDate), 'MMM d')}`
-              : 'Set start date'}
-          </DropdownMenuItem>
-
-          <DropdownMenuItem
-            onClick={() => setDueDateDialogOpen(true)}
-            className="cursor-pointer gap-2"
-          >
-            <CalendarIcon className="h-4 w-4 text-dynamic-orange" />
-            {endDate
-              ? `Due: ${format(new Date(endDate), 'MMM d')}`
-              : 'Set due date'}
-          </DropdownMenuItem>
-
-          <DropdownMenuSeparator />
-
-          <DropdownMenuItem
-            onClick={() => onMarkDone?.(taskId)}
-            className="cursor-pointer gap-2"
-          >
-            <CheckCircle2 className="h-4 w-4 text-dynamic-green" />
-            Mark as done
-          </DropdownMenuItem>
-
-          <DropdownMenuSeparator />
-
-          <DropdownMenuItem
-            onClick={() => setDeleteConfirmOpen(true)}
-            className="cursor-pointer gap-2 text-dynamic-red focus:text-dynamic-red"
-          >
-            <Trash2 className="h-4 w-4" />
-            Delete task
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      {/* Start Date Dialog */}
-      <Dialog open={startDateDialogOpen} onOpenChange={setStartDateDialogOpen}>
-        <DialogContent className="sm:max-w-sm">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <CalendarPlus className="h-5 w-5 text-dynamic-blue" />
-              Set Start Date
-            </DialogTitle>
-            <DialogDescription>
-              Choose when this task should start.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex justify-center py-4">
-            <Calendar
-              mode="single"
-              selected={selectedStartDate}
-              onSelect={setSelectedStartDate}
-              initialFocus
-            />
-          </div>
-          <DialogFooter className="flex-col gap-2 sm:flex-row">
-            {selectedStartDate && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setSelectedStartDate(undefined)}
-                className="text-muted-foreground"
-              >
-                Clear
-              </Button>
-            )}
-            <div className="flex flex-1 justify-end gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setStartDateDialogOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button onClick={handleStartDateSave}>Save</Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Due Date Dialog */}
-      <Dialog open={dueDateDialogOpen} onOpenChange={setDueDateDialogOpen}>
-        <DialogContent className="sm:max-w-sm">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <CalendarIcon className="h-5 w-5 text-dynamic-orange" />
-              Set Due Date
-            </DialogTitle>
-            <DialogDescription>Choose when this task is due.</DialogDescription>
-          </DialogHeader>
-          <div className="flex justify-center py-4">
-            <Calendar
-              mode="single"
-              selected={selectedDueDate}
-              onSelect={setSelectedDueDate}
-              disabled={(date) =>
-                selectedStartDate ? date < selectedStartDate : false
-              }
-              initialFocus
-            />
-          </div>
-          <DialogFooter className="flex-col gap-2 sm:flex-row">
-            {selectedDueDate && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setSelectedDueDate(undefined)}
-                className="text-muted-foreground"
-              >
-                Clear
-              </Button>
-            )}
-            <div className="flex flex-1 justify-end gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setDueDateDialogOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button onClick={handleDueDateSave}>Save</Button>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Delete Confirmation Dialog */}
-      <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
-        <DialogContent className="sm:max-w-sm">
-          <DialogHeader>
-            <DialogTitle>Delete Task</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to move &quot;{taskName}&quot; to the
-              recycle bin?
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setDeleteConfirmOpen(false)}
-            >
-              Cancel
-            </Button>
-            <Button variant="destructive" onClick={handleDeleteConfirm}>
-              Delete
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}