@tuturuuu/ui 0.36.1 → 0.37.1

package/src/components/ui/date-time-picker.tsx

@@ -22,7 +22,7 @@ import {
   resolveTaskTimezone,
 } from '@tuturuuu/utils/task-date-timezone';
 import { getTimeFormatPattern } from '@tuturuuu/utils/time-helper';
-import { format, parse } from 'date-fns';
+import { format } from 'date-fns';
 import {
   type ReactNode,
   useEffect,
@@ -32,6 +32,14 @@ import {
   useState,
 } from 'react';
 import { DATE_TIME_PICKER_LAYOUT_CLASS_NAMES } from './date-time-picker-layout';
+import {
+  createPickerTimeOptions,
+  filterPickerTimeOptions,
+  pickerCalendarBounds,
+  pickerCalendarDate,
+  pickerTimeWithMinimum,
+  pickerWallTime,
+} from './date-time-picker-values';
 import { Separator } from './separator';
 
 interface DateTimePickerProps {
@@ -102,6 +110,7 @@ export function DateTimePicker({
   const [selectedDate, setSelectedDate] = useState<Date | undefined>(date);
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const [isManualTimeEntry, setIsManualTimeEntry] = useState(false);
+  const [invalidManualTime, setInvalidManualTime] = useState(false);
   const [manualTimeInput, setManualTimeInput] = useState(
     date ? format(date, 'HH:mm') : ''
   );
@@ -200,14 +209,30 @@ export function DateTimePicker({
     if (tz) {
       const hour = date ? getDatePartsInTimezone(date, tz).hour : 0;
       const minute = date ? getDatePartsInTimezone(date, tz).minute : 0;
-      next = buildDateInTimezone(
-        selectedDate.getFullYear(),
-        selectedDate.getMonth() + 1,
-        selectedDate.getDate(),
-        hour,
-        minute,
-        tz
-      );
+      if (
+        date &&
+        pickerCalendarDate(date, tz).getTime() === selectedDate.getTime()
+      ) {
+        next = new Date(date);
+      } else {
+        next = buildDateInTimezone(
+          selectedDate.getFullYear(),
+          selectedDate.getMonth() + 1,
+          selectedDate.getDate(),
+          hour,
+          minute,
+          tz
+        );
+        const parts = getDatePartsInTimezone(next, tz);
+        if (
+          parts.year !== selectedDate.getFullYear() ||
+          parts.month !== selectedDate.getMonth() + 1 ||
+          parts.day !== selectedDate.getDate() ||
+          parts.hour !== hour ||
+          parts.minute !== minute
+        )
+          return;
+      }
     } else {
       if (date) {
         selectedDate.setHours(date.getHours());
@@ -237,40 +262,14 @@ export function DateTimePicker({
     if (Number.isNaN(hours) || Number.isNaN(minutes)) return;
 
     const baseDate = selectedDate ?? date ?? minDate ?? new Date();
-    let newDate: Date;
-
-    if (tz) {
-      const p = getDatePartsInTimezone(baseDate, tz);
-      newDate = buildDateInTimezone(p.year, p.month, p.day, hours, minutes, tz);
-      if (minDate && newDate.getTime() <= minDate.getTime()) {
-        const minParts = getDatePartsInTimezone(minDate, tz);
-        newDate = buildDateInTimezone(
-          minParts.year,
-          minParts.month,
-          minParts.day + 1,
-          hours,
-          minutes,
-          tz
-        );
-      }
-    } else {
-      newDate = new Date(baseDate);
-      newDate.setHours(hours);
-      newDate.setMinutes(minutes);
-
-      if (
-        minDate &&
-        newDate.getFullYear() === minDate.getFullYear() &&
-        newDate.getMonth() === minDate.getMonth() &&
-        newDate.getDate() === minDate.getDate()
-      ) {
-        const minTimeValue = minDate.getHours() * 60 + minDate.getMinutes();
-        const newTimeValue = newDate.getHours() * 60 + newDate.getMinutes();
-        if (newTimeValue <= minTimeValue) {
-          newDate.setDate(newDate.getDate() + 1);
-        }
-      }
-    }
+    const newDate = pickerTimeWithMinimum(
+      baseDate,
+      hours,
+      minutes,
+      tz,
+      minDate
+    );
+    if (!newDate) return;
 
     setSelectedDate(newDate);
     updateDate(newDate);
@@ -292,23 +291,12 @@ export function DateTimePicker({
           !Number.isNaN(m)
         ) {
           const baseDate = selectedDate ?? date ?? minDate ?? new Date();
-          const baseParts = tz ? getDatePartsInTimezone(baseDate, tz) : null;
-          const newDate =
-            tz && baseParts
-              ? buildDateInTimezone(
-                  baseParts.year,
-                  baseParts.month,
-                  baseParts.day,
-                  h,
-                  m,
-                  tz
-                )
-              : (() => {
-                  const d = new Date(baseDate);
-                  d.setHours(h);
-                  d.setMinutes(m);
-                  return d;
-                })();
+          const newDate = pickerWallTime(baseDate, h, m, tz);
+          if (!newDate) {
+            setInvalidManualTime(true);
+            return;
+          }
+          setInvalidManualTime(false);
           setSelectedDate(newDate);
           updateDate(newDate);
           setIsManualTimeEntry(false);
@@ -338,88 +326,25 @@ export function DateTimePicker({
   const timeFormat = preferences?.timeFormat ?? '12h';
   const timePattern = getTimeFormatPattern(timeFormat);
 
-  // Generate time options in 15-minute increments
   const timeOptions = useMemo(
+    () => createPickerTimeOptions(timeFormat),
+    [timeFormat]
+  );
+  const filteredTimeOptions = useMemo(
     () =>
-      Array.from({ length: 24 * 4 }, (_, i) => {
-        const hour = Math.floor(i / 4);
-        const minute = (i % 4) * 15;
-        const formattedHour = hour.toString().padStart(2, '0');
-        const formattedMinute = minute.toString().padStart(2, '0');
-        const value = `${formattedHour}:${formattedMinute}`;
-        const display = format(parse(value, 'HH:mm', new Date()), timePattern);
-        return { value, display };
+      filterPickerTimeOptions({
+        date,
+        minDate,
+        maxDate,
+        minTime,
+        zone: tz,
+        pattern: timePattern,
+        timeFormat,
+        options: timeOptions,
       }),
-    [timePattern]
+    [date, minDate, maxDate, minTime, tz, timePattern, timeFormat, timeOptions]
   );
 
-  // Filter time options for end time picker
-  const filteredTimeOptions = useMemo(() => {
-    let options = timeOptions;
-
-    // Filter based on minDate and minTime
-    if (minTime && date && minDate) {
-      // Only restrict if the selected date is the same as minDate
-      if (
-        date.getFullYear() === minDate.getFullYear() &&
-        date.getMonth() === minDate.getMonth() &&
-        date.getDate() === minDate.getDate()
-      ) {
-        options = options.filter((time) => time.value > minTime);
-      } else if (date > minDate) {
-        // If end date is after start date, show all times
-        options = timeOptions;
-      }
-    }
-
-    // Filter based on maxDate
-    if (date && maxDate) {
-      // Only restrict if the selected date is the same as maxDate
-      if (
-        date.getFullYear() === maxDate.getFullYear() &&
-        date.getMonth() === maxDate.getMonth() &&
-        date.getDate() === maxDate.getDate()
-      ) {
-        const maxTimeValue = `${format(maxDate, 'HH')}:${format(maxDate, 'mm')}`;
-        options = options.filter((time) => time.value < maxTimeValue);
-      }
-    }
-
-    // After filtering, ensure the selected time is always present in the dropdown
-    if (date) {
-      const hourMinute =
-        tz !== null
-          ? getDatePartsInTimezone(date, tz)
-          : {
-              hour: date.getHours(),
-              minute: date.getMinutes(),
-            };
-      const customValue = `${hourMinute.hour.toString().padStart(2, '0')}:${hourMinute.minute.toString().padStart(2, '0')}`;
-      if (!options.some((t) => t.value === customValue)) {
-        const display =
-          tz !== null
-            ? formatInTimezone(
-                date,
-                tz,
-                timeFormat === '24h' ? 'HH:mm' : 'h:mm A'
-              )
-            : format(date, timePattern);
-        options = [...options, { value: customValue, display }];
-        options.sort((a, b) => a.value.localeCompare(b.value));
-      }
-    }
-    return options;
-  }, [
-    date,
-    minDate,
-    maxDate,
-    minTime,
-    timeOptions,
-    timePattern,
-    tz,
-    timeFormat,
-  ]);
-
   // If the filtered list is empty, show an error message
   const noValidTimes = filteredTimeOptions.length === 0;
   const selectedTimeValue = date
@@ -500,34 +425,7 @@ export function DateTimePicker({
     }
   };
 
-  // Shared calendar disabled dates config
-  const calendarDisabled =
-    minDate || maxDate
-      ? [
-          ...(minDate
-            ? [
-                {
-                  before: new Date(
-                    minDate.getFullYear(),
-                    minDate.getMonth(),
-                    minDate.getDate()
-                  ),
-                },
-              ]
-            : []),
-          ...(maxDate
-            ? [
-                {
-                  after: new Date(
-                    maxDate.getFullYear(),
-                    maxDate.getMonth(),
-                    maxDate.getDate()
-                  ),
-                },
-              ]
-            : []),
-        ]
-      : undefined;
+  const calendarDisabled = pickerCalendarBounds(minDate, maxDate, tz);
 
   const timeControl = showTimeSelect ? (
     <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.time}>
@@ -545,7 +443,11 @@ export function DateTimePicker({
         <div className="flex items-center gap-2">
           <Input
             value={manualTimeInput}
-            onChange={(e) => setManualTimeInput(e.target.value)}
+            onChange={(e) => {
+              setManualTimeInput(e.target.value);
+              setInvalidManualTime(false);
+            }}
+            aria-invalid={invalidManualTime}
             onKeyDown={handleManualTimeKeyDown}
             placeholder="HH:MM"
             className="h-9 flex-1"
@@ -650,7 +552,8 @@ export function DateTimePicker({
         <div className={DATE_TIME_PICKER_LAYOUT_CLASS_NAMES.calendar}>
           <Calendar
             mode="single"
-            selected={date}
+            selected={date ? pickerCalendarDate(date, tz) : undefined}
+            today={pickerCalendarDate(new Date(), tz)}
             onSelect={handleSelect}
             onSubmit={(date) => {
               handleSelect(date);

package/src/components/ui/legacy/calendar/agenda-view.tsx

@@ -4,24 +4,20 @@ import { CalendarX2, Clock, MapPin, Plus, Search, Sun } from '@tuturuuu/icons';
 import type { Workspace } from '@tuturuuu/types';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { useCalendarClock } from '@tuturuuu/ui/hooks/use-calendar-clock';
 import { useCalendarPreferences } from '@tuturuuu/ui/hooks/use-calendar-preferences';
 import { useUserBooleanConfig } from '@tuturuuu/ui/hooks/use-user-config';
+import { calendarEventStyle } from '@tuturuuu/utils/calendar-event-colors';
 import { isAllDayEvent } from '@tuturuuu/utils/calendar-utils';
 import { cn } from '@tuturuuu/utils/format';
 import { getTimeFormatPattern } from '@tuturuuu/utils/time-helper';
-import {
-  addDays,
-  format,
-  isToday,
-  isTomorrow,
-  isYesterday,
-  startOfDay,
-} from 'date-fns';
+import { addDays, format, startOfDay } from 'date-fns';
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
+import { calendarDayKey, calendarToday } from '../../../../lib/calendar-day';
 import {
   formatLunarDay,
   getLunarDate,
@@ -49,83 +45,17 @@ interface GroupedEvents {
   events: CalendarEvent[];
 }
 
-const COLOR_MAP: Record<
-  string,
-  { accent: string; bg: string; border: string }
-> = {
-  blue: {
-    accent: 'bg-dynamic-blue',
-    bg: 'bg-dynamic-blue/5 hover:bg-dynamic-blue/10',
-    border: 'border-l-dynamic-blue',
-  },
-  red: {
-    accent: 'bg-dynamic-red',
-    bg: 'bg-dynamic-red/5 hover:bg-dynamic-red/10',
-    border: 'border-l-dynamic-red',
-  },
-  green: {
-    accent: 'bg-dynamic-green',
-    bg: 'bg-dynamic-green/5 hover:bg-dynamic-green/10',
-    border: 'border-l-dynamic-green',
-  },
-  purple: {
-    accent: 'bg-dynamic-purple',
-    bg: 'bg-dynamic-purple/5 hover:bg-dynamic-purple/10',
-    border: 'border-l-dynamic-purple',
-  },
-  yellow: {
-    accent: 'bg-dynamic-yellow',
-    bg: 'bg-dynamic-yellow/5 hover:bg-dynamic-yellow/10',
-    border: 'border-l-dynamic-yellow',
-  },
-  orange: {
-    accent: 'bg-dynamic-orange',
-    bg: 'bg-dynamic-orange/5 hover:bg-dynamic-orange/10',
-    border: 'border-l-dynamic-orange',
-  },
-  pink: {
-    accent: 'bg-dynamic-pink',
-    bg: 'bg-dynamic-pink/5 hover:bg-dynamic-pink/10',
-    border: 'border-l-dynamic-pink',
-  },
-  cyan: {
-    accent: 'bg-dynamic-cyan',
-    bg: 'bg-dynamic-cyan/5 hover:bg-dynamic-cyan/10',
-    border: 'border-l-dynamic-cyan',
-  },
-  indigo: {
-    accent: 'bg-dynamic-indigo',
-    bg: 'bg-dynamic-indigo/5 hover:bg-dynamic-indigo/10',
-    border: 'border-l-dynamic-indigo',
-  },
-  gray: {
-    accent: 'bg-dynamic-gray',
-    bg: 'bg-dynamic-gray/5 hover:bg-dynamic-gray/10',
-    border: 'border-l-dynamic-gray',
-  },
-};
-
-function normalizeColor(color: string): string {
-  if (!color) return 'blue';
-  const normalized = color.trim().toLowerCase();
-  if (normalized === '#6b7280' || normalized === 'grey') return 'gray';
-  return normalized;
-}
-
-function getStyles(event: CalendarEvent) {
-  const key = normalizeColor(event.color || 'blue');
-  return COLOR_MAP[key] || COLOR_MAP.blue!;
-}
-
 function formatTimeWithMidnight(
   date: Date,
   timePattern: string,
-  timeFormat: '12h' | '24h'
+  timeFormat: '12h' | '24h',
+  zone?: string
 ): string {
-  if (date.getHours() === 23 && date.getMinutes() === 59) {
+  const zoned = zone && zone !== 'auto' ? dayjs(date).tz(zone) : dayjs(date);
+  if (zoned.hour() === 23 && zoned.minute() === 59) {
     return timeFormat === '24h' ? '00:00' : '12:00 am';
   }
-  return format(date, timePattern);
+  return zoned.format(timePattern);
 }
 
 function EventCard({
@@ -141,40 +71,41 @@ function EventCard({
   t: (key: string) => string;
   onOpen: (id: string) => void;
 }) {
+  const { settings } = useCalendarSettings();
   const isAllDay = isAllDayEvent(event);
-  const styles = getStyles(event);
 
   return (
     <button
       type="button"
       onClick={() => onOpen(event.id)}
+      style={calendarEventStyle(event)}
       className={cn(
-        'group flex w-full cursor-pointer items-start gap-3 rounded-lg border-l-[3px] px-3 py-2.5 text-left transition-colors',
-        styles.border,
-        styles.bg
+        'group flex w-full cursor-pointer items-start gap-3 rounded-lg border-l-[3px] px-3 py-2.5 text-left transition-colors hover:ring-1 hover:ring-current'
       )}
     >
       {/* Time column */}
       <div className="flex w-16 shrink-0 flex-col pt-0.5 sm:w-20">
         {isAllDay ? (
-          <span className="flex items-center gap-1 font-medium text-muted-foreground text-xs">
+          <span className="flex items-center gap-1 font-medium text-inherit text-xs">
             <Sun className="h-3 w-3" />
             {t('agenda_all_day')}
           </span>
         ) : (
           <>
-            <span className="font-semibold text-foreground text-sm leading-tight">
+            <span className="font-semibold text-inherit text-sm leading-tight">
               {formatTimeWithMidnight(
                 new Date(event.start_at),
                 timePattern,
-                timeFormat
+                timeFormat,
+                settings?.timezone?.timezone
               )}
             </span>
-            <span className="text-muted-foreground text-xs">
+            <span className="text-inherit text-xs">
               {formatTimeWithMidnight(
                 new Date(event.end_at),
                 timePattern,
-                timeFormat
+                timeFormat,
+                settings?.timezone?.timezone
               )}
             </span>
           </>
@@ -183,14 +114,14 @@ function EventCard({
 
       {/* Content */}
       <div className="min-w-0 flex-1">
-        <span className="line-clamp-1 font-medium text-foreground text-sm leading-tight">
+        <span className="line-clamp-1 font-medium text-inherit text-sm leading-tight">
           {event.title || t('views.untitled_event')}
         </span>
 
         {(event.location || (!isAllDay && event.description)) && (
           <div className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5">
             {!isAllDay && (
-              <span className="flex items-center gap-1 text-muted-foreground text-xs">
+              <span className="flex items-center gap-1 text-inherit text-xs">
                 <Clock className="h-3 w-3 shrink-0" />
                 {(() => {
                   try {
@@ -209,7 +140,7 @@ function EventCard({
               </span>
             )}
             {event.location && (
-              <span className="flex items-center gap-1 truncate text-muted-foreground text-xs">
+              <span className="flex items-center gap-1 truncate text-inherit text-xs">
                 <MapPin className="h-3 w-3 shrink-0" />
                 <span className="truncate">{event.location}</span>
               </span>
@@ -234,9 +165,13 @@ function DateHeader({
   showLunar: boolean;
   t: (key: string, values?: Record<string, number>) => string;
 }) {
-  const today = isToday(date);
-  const tomorrow = isTomorrow(date);
-  const yesterday = isYesterday(date);
+  const { settings } = useCalendarSettings();
+  const now = useCalendarClock();
+  const todayDate = calendarToday(settings?.timezone?.timezone, now);
+  const dateKey = calendarDayKey(date);
+  const today = dateKey === calendarDayKey(todayDate);
+  const tomorrow = dateKey === calendarDayKey(addDays(todayDate, 1));
+  const yesterday = dateKey === calendarDayKey(addDays(todayDate, -1));
 
   const relativeLabel = today
     ? t('today')

package/src/components/ui/legacy/calendar/all-day-color.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import { expect, it, vi } from 'vitest';
+
+vi.mock('@tuturuuu/ui/hooks/use-calendar', () => ({
+  useCalendar: () => ({
+    openModal: vi.fn(),
+    updateEvent: vi.fn(),
+    addEvent: vi.fn(),
+    deleteEvent: vi.fn(),
+  }),
+}));
+vi.mock('@tuturuuu/ui/hooks/use-calendar-sync', () => ({
+  useCalendarSync: () => ({
+    allDayEvents: [
+      {
+        id: 'cutoff',
+        title: 'Cut-off event',
+        start_at: '2026-09-06T00:00:00Z',
+        end_at: '2026-09-09T00:00:00Z',
+        color: 'BLUE',
+        scheduling_metadata: {
+          google_color: { version: 1, inherited: false, background: '#00ff88' },
+        },
+      },
+    ],
+  }),
+}));
+vi.mock('./settings/settings-context', () => ({
+  useCalendarSettings: () => ({
+    settings: {
+      appearance: { showWeekends: true },
+      timezone: { timezone: 'UTC' },
+    },
+  }),
+}));
+vi.mock('./location-timeline', () => ({ LocationTimeline: () => null }));
+
+import { AllDayEventBar } from './all-day-event-bar';
+
+it('keeps an opaque all-day fill and contrasting dashed cut-off edge', () => {
+  render(<AllDayEventBar dates={[new Date('2026-09-07T00:00:00Z')]} />);
+  const card = screen.getByText('Cut-off event').closest('.border-dashed');
+  expect(card).toHaveStyle({
+    backgroundColor: '#00ff88',
+    color: '#000000',
+    borderColor: '#000000',
+  });
+});