@tuturuuu/ui 0.8.0 → 0.10.0

package/src/components/ui/legacy/calendar/all-day-event-bar.tsx

@@ -9,9 +9,9 @@ import isBetween from 'dayjs/plugin/isBetween';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import timezone from 'dayjs/plugin/timezone';
-import Image from 'next/image';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { MIN_COLUMN_WIDTH } from './config';
+import { CalendarEventProviderIcon } from './event-provider-display';
 import { getLocationType, LocationTimeline } from './location-timeline';
 import { useCalendarSettings } from './settings/settings-context';
 
@@ -68,18 +68,10 @@ interface DragState {
 // 1. Extract EventContent component for shared rendering
 const EventContent = ({ event }: { event: CalendarEvent }) => (
   <>
-    {typeof event.google_event_id === 'string' &&
-      event.google_event_id.trim() !== '' && (
-        <Image
-          src="/media/google-calendar-icon.png"
-          alt="Google Calendar"
-          className="mr-1 inline-block h-[1.25em] w-[1.25em] align-middle opacity-80 dark:opacity-90"
-          title="Synced from Google Calendar"
-          data-testid="google-calendar-logo"
-          width={18}
-          height={18}
-        />
-      )}
+    <CalendarEventProviderIcon
+      event={event}
+      className="mr-1 h-[1.25em] w-[1.25em] opacity-80 dark:opacity-90"
+    />
     <span className="truncate">{event.title}</span>
   </>
 );
@@ -342,27 +334,6 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
         eventStart.isBefore(lastVisibleDate.add(1, 'day'), 'day') &&
         eventEnd.isAfter(firstVisibleDate, 'day');
 
-      // Debug logging for multi-day events
-      const eventDurationDays = eventEnd.diff(eventStart, 'day');
-      if (eventDurationDays > 0) {
-        console.log('Multi-day event processing:', {
-          title: event.title,
-          eventStart: eventStart.format('YYYY-MM-DD'),
-          eventEnd: eventEnd.format('YYYY-MM-DD'),
-          durationDays: eventDurationDays,
-          isActuallyMultiDay: eventDurationDays > 1,
-          firstVisibleDate: firstVisibleDate.format('YYYY-MM-DD'),
-          lastVisibleDate: lastVisibleDate.format('YYYY-MM-DD'),
-          eventOverlaps,
-          wouldShowCutOffStart:
-            eventDurationDays > 1 &&
-            eventStart.isBefore(firstVisibleDate, 'day'),
-          wouldShowCutOffEnd:
-            eventDurationDays > 1 &&
-            eventEnd.isAfter(lastVisibleDate.add(1, 'day'), 'day'),
-        });
-      }
-
       if (!eventOverlaps) {
         return; // Skip this event if it doesn't overlap with visible dates
       }
@@ -680,7 +651,13 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
   };
 
   // Calculate dynamic height based on visible events
-  const barHeight = Math.max(1.9, eventLayout.maxVisibleEventsPerDay * 1.75);
+  const locationTopOffset =
+    locationSpans.length > 0 ? LOCATION_TIMELINE_HEIGHT_REM : 0;
+  const regularRowsHeight =
+    eventLayout.maxVisibleEventsPerDay > 0
+      ? eventLayout.maxVisibleEventsPerDay * 1.75
+      : 0;
+  const barHeight = Math.max(1.9, locationTopOffset + regularRowsHeight);
 
   // Enhanced mouse and touch handlers
   const handleEventMouseDown = (e: React.MouseEvent, eventSpan: EventSpan) => {
@@ -839,7 +816,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                     onClick={() => toggleDateExpansion(dateKey)}
                     style={{
                       position: 'absolute',
-                      top: `${MAX_EVENTS_DISPLAY * 1.7}rem`,
+                      top: `${locationTopOffset + MAX_EVENTS_DISPLAY * 1.7}rem`,
                       left: `${(dateIndex * 100) / visibleDates.length}%`,
                       width: `${100 / visibleDates.length}%`,
                       zIndex: 10,
@@ -858,7 +835,7 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                       onClick={() => toggleDateExpansion(dateKey)}
                       style={{
                         position: 'absolute',
-                        top: `${dateEvents.length * 1.7}rem`,
+                        top: `${locationTopOffset + dateEvents.length * 1.7}rem`,
                         left: `${(dateIndex * 100) / visibleDates.length}%`,
                         width: `${100 / visibleDates.length}%`,
                         zIndex: 10,
@@ -941,8 +918,18 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
             dragState.isDragging && dragState.draggedEvent?.id === event.id;
 
           // Calculate top offset based on location strip presence
-          const topOffset =
-            locationSpans.length > 0 ? LOCATION_TIMELINE_HEIGHT_REM : 0;
+          const topOffset = locationTopOffset;
+          const optimisticStatus = (
+            event as CalendarEvent & {
+              _optimisticStatus?:
+                | 'creating'
+                | 'updating'
+                | 'deleting'
+                | 'error';
+            }
+          )._optimisticStatus;
+          const isPendingMutation =
+            optimisticStatus === 'updating' || optimisticStatus === 'deleting';
 
           return (
             <div
@@ -959,6 +946,8 @@ export const AllDayEventBar = ({ dates }: { dates: Date[] }) => {
                 bg,
                 border,
                 text,
+                isPendingMutation &&
+                  'opacity-60 outline outline-dashed outline-1 outline-primary/50',
                 // Special styling for cut-off events
                 (isCutOffStart || isCutOffEnd) && 'border-dashed'
               )}

package/src/components/ui/legacy/calendar/calendar-cell.tsx

@@ -880,6 +880,8 @@ export const CalendarCell = ({ date, hour }: CalendarCellProps) => {
         height: `${HOUR_HEIGHT}px`,
       }}
       onContextMenu={(e) => {
+        const target = e.target as HTMLElement | null;
+        if (target?.closest('[data-slot="context-menu-trigger"]')) return;
         e.preventDefault();
       }}
       onMouseEnter={() => setIsHovering(true)}

package/src/components/ui/legacy/calendar/calendar-content.tsx

@@ -9,6 +9,7 @@ import { cn } from '@tuturuuu/utils/format';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { AgendaView } from './agenda-view';
 import { CalendarHeader } from './calendar-header';
+import { CalendarLoadingSkeleton } from './calendar-loading-skeleton';
 import { CalendarViewWithTrail } from './calendar-view-with-trail';
 import { EventModal } from './event-modal';
 import { EventPreviewPopover } from './event-preview-popover';
@@ -102,6 +103,7 @@ export const CalendarContent = ({
   externalState,
   extras,
   overlay,
+  disableBuiltInEventUi,
 }: {
   t: any;
   locale: string;
@@ -118,10 +120,11 @@ export const CalendarContent = ({
   };
   extras?: React.ReactNode;
   overlay?: React.ReactNode;
+  disableBuiltInEventUi?: boolean;
 }) => {
   const { transition } = useViewTransition();
   const { settings } = useCalendarSettings();
-  const { dates, setDates } = useCalendarSync();
+  const { dates, isLoading, setDates } = useCalendarSync();
 
   // Use ref to always have the latest settings without causing dependency cascades
   const settingsRef = useRef(settings);
@@ -191,7 +194,6 @@ export const CalendarContent = ({
       handleSetView('4-days');
       setDates(dates);
     });
-    console.log('enable4DayView', dates);
   }, [date, transition, handleSetView, setDates]);
 
   const enableWeekView = useCallback(() => {
@@ -578,7 +580,7 @@ export const CalendarContent = ({
   return (
     <div
       className={cn(
-        'grid h-full w-full',
+        'grid h-full min-h-0 w-full',
         view === 'month' || view === 'year'
           ? 'grid-rows-[auto_1fr]'
           : 'grid-rows-[auto_auto_1fr]'
@@ -621,7 +623,7 @@ export const CalendarContent = ({
 
       <div
         className={cn(
-          'scrollbar-none relative flex-1 overflow-auto rounded-lg focus:outline-none',
+          'scrollbar-none relative min-h-0 flex-1 overflow-auto rounded-lg focus:outline-none',
           view === 'agenda' ||
             view === 'month' ||
             view === 'year' ||
@@ -632,7 +634,9 @@ export const CalendarContent = ({
           e.currentTarget.focus();
         }}
       >
-        {view === 'month' && dates?.[0] ? (
+        {isLoading ? (
+          <CalendarLoadingSkeleton dates={dates} view={view} />
+        ) : view === 'month' && dates?.[0] ? (
           <MonthCalendar
             date={dates[0]}
             workspace={workspace}
@@ -665,7 +669,7 @@ export const CalendarContent = ({
         )}
       </div>
 
-      {disabled
+      {disabled || disableBuiltInEventUi
         ? null
         : workspace && (
             <>

package/src/components/ui/legacy/calendar/calendar-header.tsx

@@ -1,5 +1,7 @@
 import {
+  AlertTriangle,
   CalendarIcon,
+  Check,
   ChevronLeft,
   ChevronRight,
   Moon,
@@ -81,7 +83,7 @@ export function CalendarHeader({
       return newDate;
     });
 
-  const { isLoading, isSyncing } = useCalendarSync();
+  const { syncStatus } = useCalendarSync();
   const selectToday = () => setDate(new Date());
   const isTodaySelected = () => dayjs(date).isSame(dayjs(), 'day');
   const isCurrentMonth = () =>
@@ -112,6 +114,14 @@ export function CalendarHeader({
   };
 
   const LunarIcon = showLunar ? MoonStar : Moon;
+  const statusLabel =
+    syncStatus.state === 'error'
+      ? t('failed_to_load_events')
+      : syncStatus.lastSyncTime
+        ? `${t('sync_completed')} ${dayjs(syncStatus.lastSyncTime)
+            .locale(locale)
+            .format('HH:mm')}`
+        : null;
 
   return (
     <div className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
@@ -121,8 +131,18 @@ export function CalendarHeader({
       </div>
       <div className="flex flex-col gap-2 md:flex-row md:items-center">
         <div className="flex items-center gap-2">
-          {(isLoading || isSyncing) && (
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+          {statusLabel && (
+            <div
+              aria-live="polite"
+              className="hidden min-w-0 items-center gap-1.5 rounded-full border bg-background/80 px-2 py-1 text-muted-foreground text-xs shadow-xs sm:inline-flex"
+            >
+              {syncStatus.state === 'error' ? (
+                <AlertTriangle className="h-3.5 w-3.5 text-dynamic-red" />
+              ) : (
+                <Check className="h-3.5 w-3.5 text-dynamic-green" />
+              )}
+              <span className="truncate">{statusLabel}</span>
+            </div>
           )}
           <div className="flex flex-none items-center justify-center gap-2 md:justify-start">
             <Button

package/src/components/ui/legacy/calendar/calendar-loading-skeleton.tsx

@@ -0,0 +1,135 @@
+import { cn } from '@tuturuuu/utils/format';
+import type { CalendarView } from '../../../../hooks/use-view-transition';
+import { Skeleton } from '../../skeleton';
+import { DAY_HEIGHT, HOUR_HEIGHT, MIN_COLUMN_WIDTH } from './config';
+
+function TimedCalendarSkeleton({ columns }: { columns: number }) {
+  const eventPlaceholders = [
+    { column: 0, hour: 2.2, span: 1.4, width: 0.82 },
+    { column: Math.min(1, columns - 1), hour: 5.1, span: 1.1, width: 0.74 },
+    {
+      column: Math.max(0, columns - 2),
+      hour: 8.4,
+      span: 1.8,
+      width: 0.78,
+    },
+  ];
+
+  return (
+    <div
+      className="flex h-full overflow-hidden rounded-b-lg border-border border-b border-l bg-background/50 text-center dark:border-zinc-800"
+      style={{ minWidth: `${columns * MIN_COLUMN_WIDTH}px` }}
+      aria-hidden="true"
+    >
+      <div className="w-16 shrink-0 border-r bg-muted/20">
+        {Array.from({ length: 8 }).map((_, index) => (
+          <Skeleton key={index} className="mx-auto mt-7 h-3 w-9 rounded-sm" />
+        ))}
+      </div>
+      <div
+        className="relative grid flex-1"
+        style={{
+          gridTemplateColumns: `repeat(${columns}, minmax(${MIN_COLUMN_WIDTH}px, 1fr))`,
+          height: `${DAY_HEIGHT}px`,
+        }}
+      >
+        {Array.from({ length: columns }).map((_, index) => (
+          <div
+            key={index}
+            className="relative border-border/70 border-r last:border-r-0"
+          >
+            {Array.from({ length: 24 }).map((_, hour) => (
+              <div
+                key={hour}
+                className="border-border/50 border-b"
+                style={{ height: `${HOUR_HEIGHT}px` }}
+              />
+            ))}
+          </div>
+        ))}
+        {eventPlaceholders.map((placeholder, index) => (
+          <Skeleton
+            key={index}
+            className="absolute rounded-md"
+            style={{
+              left: `calc(${(placeholder.column * 100) / columns}% + 6px)`,
+              top: `${placeholder.hour * HOUR_HEIGHT}px`,
+              width: `calc(${(placeholder.width * 100) / columns}% - 12px)`,
+              height: `${placeholder.span * HOUR_HEIGHT}px`,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function MonthCalendarSkeleton({ columns }: { columns: number }) {
+  return (
+    <div
+      className="grid h-full min-h-[28rem] gap-px overflow-hidden rounded-lg border bg-border"
+      style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
+      aria-hidden="true"
+    >
+      {Array.from({ length: columns * 5 }).map((_, index) => (
+        <div key={index} className="space-y-2 bg-background p-2">
+          <Skeleton className="h-3 w-8 rounded-sm" />
+          <Skeleton className="h-4 w-4/5 rounded-sm" />
+          <Skeleton className="h-4 w-3/5 rounded-sm" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function AgendaCalendarSkeleton() {
+  return (
+    <div className="space-y-3 rounded-lg border bg-background p-4" aria-hidden>
+      {Array.from({ length: 6 }).map((_, index) => (
+        <div key={index} className="flex items-center gap-3">
+          <Skeleton className="h-10 w-14 rounded-md" />
+          <div className="min-w-0 flex-1 space-y-2">
+            <Skeleton className="h-4 w-2/5 rounded-sm" />
+            <Skeleton className="h-3 w-3/5 rounded-sm" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function CalendarLoadingSkeleton({
+  dates,
+  view,
+}: {
+  dates: Date[];
+  view: CalendarView;
+}) {
+  const columns = Math.max(1, dates.length || (view === 'day' ? 1 : 7));
+
+  if (view === 'month' || view === 'year') {
+    return <MonthCalendarSkeleton columns={view === 'year' ? 4 : 7} />;
+  }
+
+  if (view === 'agenda') return <AgendaCalendarSkeleton />;
+
+  return (
+    <div className="h-full min-h-0 space-y-2" aria-busy="true">
+      <div
+        className={cn(
+          'grid rounded-lg border bg-background/70 p-2',
+          columns === 1 && 'max-w-lg'
+        )}
+        style={{
+          gridTemplateColumns: `4rem repeat(${columns}, minmax(${MIN_COLUMN_WIDTH}px, 1fr))`,
+        }}
+      >
+        <Skeleton className="h-5 w-5 self-center justify-self-center rounded-sm" />
+        {Array.from({ length: columns }).map((_, index) => (
+          <Skeleton key={index} className="mx-1 h-5 rounded-sm" />
+        ))}
+      </div>
+      <TimedCalendarSkeleton columns={columns} />
+    </div>
+  );
+}