@tuturuuu/ui 0.30.1 → 0.31.0

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

@@ -0,0 +1,116 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { CalendarView } from '../../../../hooks/use-view-transition';
+
+const mocks = vi.hoisted(() => ({
+  setDates: vi.fn(),
+  transition: (_view: string, action: () => void) => action(),
+  dates: [new Date(2026, 8, 7)],
+  settings: { appearance: { firstDayOfWeek: 'monday' } },
+}));
+vi.mock('@tuturuuu/ui/hooks/use-calendar-sync', () => ({
+  useCalendarSync: () => ({
+    dates: mocks.dates,
+    setDates: mocks.setDates,
+    isLoading: false,
+  }),
+}));
+vi.mock('@tuturuuu/ui/hooks/use-view-transition', () => ({
+  useViewTransition: () => ({ transition: mocks.transition }),
+}));
+vi.mock('./settings/settings-context', () => ({
+  useCalendarSettings: () => ({ settings: mocks.settings }),
+}));
+vi.mock('./calendar-header', () => ({
+  CalendarHeader: ({
+    view,
+    onViewChange,
+  }: {
+    view: string;
+    onViewChange: (view: string) => void;
+  }) => (
+    <button type="button" onClick={() => onViewChange('month')}>
+      Header {view}
+    </button>
+  ),
+}));
+vi.mock('./agenda-view', () => ({ AgendaView: () => <div>Agenda</div> }));
+vi.mock('./calendar-loading-skeleton', () => ({
+  CalendarLoadingSkeleton: () => null,
+}));
+vi.mock('./calendar-view-with-trail', () => ({
+  CalendarViewWithTrail: () => null,
+}));
+vi.mock('./event-modal', () => ({ EventModal: () => null }));
+vi.mock('./event-preview-popover', () => ({ EventPreviewPopover: () => null }));
+vi.mock('./weekday-bar', () => ({ WeekdayBar: () => null }));
+vi.mock('./month-calendar', () => ({
+  MonthCalendar: ({ onDayClick }: { onDayClick: (date: Date) => void }) => (
+    <button type="button" onClick={() => onDayClick(new Date(2026, 8, 22))}>
+      Open September 22
+    </button>
+  ),
+}));
+vi.mock('./year-calendar', () => ({
+  YearCalendar: ({ onMonthClick }: { onMonthClick: (date: Date) => void }) => (
+    <button type="button" onClick={() => onMonthClick(new Date(2026, 10, 1))}>
+      Open November
+    </button>
+  ),
+}));
+
+import { CalendarContent } from './calendar-content';
+
+const translate = (key: string) => key;
+function ControlledCalendar({
+  initialView = 'week',
+}: {
+  initialView?: CalendarView;
+}) {
+  const [view, setView] = useState(initialView);
+  const [date, setDate] = useState(new Date(2026, 8, 7));
+  return (
+    <>
+      <output>
+        {view}:{date.getMonth() + 1}:{date.getDate()}
+      </output>
+      <CalendarContent
+        t={translate}
+        locale="en"
+        externalState={{ view, setView, date, setDate, availableViews: [] }}
+      />
+    </>
+  );
+}
+beforeEach(() => {
+  localStorage.clear();
+  mocks.setDates.mockClear();
+});
+describe('satellite controlled calendar views', () => {
+  it('M updates the parent state, persists the month, and supports day drill-down', () => {
+    render(<ControlledCalendar />);
+    fireEvent.keyDown(window, { key: 'm' });
+    expect(screen.getByText('month:9:1')).toBeVisible();
+    expect(localStorage.getItem('calendar-view-mode')).toBe('month');
+    fireEvent.click(screen.getByText('Open September 22'));
+    expect(screen.getByText('day:9:22')).toBeVisible();
+  });
+  it('the menu enters month and an uncontrolled calendar restores the saved month', () => {
+    const mounted = render(<ControlledCalendar />);
+    fireEvent.click(screen.getByText('Header week'));
+    expect(screen.getByText('month:9:1')).toBeVisible();
+    mounted.unmount();
+    render(<CalendarContent t={translate} locale="en" />);
+    expect(screen.getByText('Header month')).toBeVisible();
+  });
+  it('year drill-down opens the chosen month', () => {
+    render(<ControlledCalendar initialView="year" />);
+    fireEvent.click(screen.getByText('Open November'));
+    expect(screen.getByText('month:11:1')).toBeVisible();
+    const dates = mocks.setDates.mock.calls.at(-1)?.[0] as Date[];
+    expect(
+      dates.some((date) => date.getMonth() === 10 && date.getDate() === 30)
+    ).toBe(true);
+  });
+});

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

@@ -10,11 +10,13 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { AgendaView } from './agenda-view';
 import { CalendarHeader } from './calendar-header';
 import { CalendarLoadingSkeleton } from './calendar-loading-skeleton';
+import { calendarPeriodDates } from './calendar-period';
 import { CalendarViewWithTrail } from './calendar-view-with-trail';
 import { EventModal } from './event-modal';
 import { EventPreviewPopover } from './event-preview-popover';
 import { MonthCalendar } from './month-calendar';
 import { useCalendarSettings } from './settings/settings-context';
+import { useCalendarViewShortcuts } from './use-calendar-view-shortcuts';
 import { WeekdayBar } from './weekday-bar';
 import { YearCalendar } from './year-calendar';
 
@@ -255,11 +257,11 @@ export const CalendarContent = ({
     );
     const newDate = new Date(date);
     newDate.setDate(1);
-    setView('month');
-    setDate(newDate);
+    handleSetView('month');
+    handleSetDate(newDate);
     const gridDates = getMonthGridDates(newDate, firstDayNumber);
     setDates(gridDates);
-  }, [date, locale, setDates]);
+  }, [date, locale, setDates, handleSetView, handleSetDate]);
 
   const enableYearView = useCallback(() => {
     const newDate = new Date(date);
@@ -269,7 +271,7 @@ export const CalendarContent = ({
 
     transition('year', () => {
       handleSetView('year');
-      setDates([newDate]);
+      setDates(calendarPeriodDates(newDate, 'year'));
     });
   }, [date, transition, handleSetView, setDates]);
 
@@ -279,7 +281,7 @@ export const CalendarContent = ({
 
     transition('agenda', () => {
       handleSetView('agenda');
-      setDates([newDate]);
+      setDates(calendarPeriodDates(newDate, 'agenda'));
     });
   }, [date, transition, handleSetView, setDates]);
 
@@ -342,19 +344,9 @@ export const CalendarContent = ({
       const isMobile =
         typeof window !== 'undefined' && window.innerWidth <= 768;
 
-      // Handle saved view with special case for month
+      // Restore the saved view, adapting wide time grids for mobile.
       if (savedView) {
-        if (savedView === 'month') {
-          // Month view exception: show day on mobile, week on larger screens
-          if (isMobile) {
-            enableDayView();
-          } else {
-            enableWeekView();
-          }
-        } else if (
-          (savedView === 'week' || savedView === '4-days') &&
-          isMobile
-        ) {
+        if ((savedView === 'week' || savedView === '4-days') && isMobile) {
           // Week and 4-day views are disabled on mobile
           enableDayView();
         } else {
@@ -362,6 +354,7 @@ export const CalendarContent = ({
           if (savedView === 'day') enableDayView();
           else if (savedView === '4-days') enable4DayView();
           else if (savedView === 'week') enableWeekView();
+          else if (savedView === 'month') enableMonthView();
           else if (savedView === 'year') enableYearView();
           else if (savedView === 'agenda') enableAgendaView();
           else enableWeekView();
@@ -493,16 +486,8 @@ export const CalendarContent = ({
       );
       const gridDates = getMonthGridDates(date, firstDayNumber);
       setDates(gridDates);
-    } else if (view === 'year') {
-      const newDate = new Date(date);
-      newDate.setMonth(0);
-      newDate.setDate(1);
-      newDate.setHours(0, 0, 0, 0);
-      setDates([newDate]);
-    } else if (view === 'agenda') {
-      const newDate = new Date(date);
-      newDate.setHours(0, 0, 0, 0);
-      setDates([newDate]);
+    } else if (view === 'year' || view === 'agenda') {
+      setDates(calendarPeriodDates(date, view));
     }
   }, [
     date,
@@ -531,49 +516,16 @@ export const CalendarContent = ({
     return () => window.removeEventListener('resize', handleResize);
   }, [enableDayView, enableWeekView, view]);
 
-  // Keyboard shortcut to change view
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement
-      ) {
-        return;
-        // Ignore if typing in a form field
-      }
-
-      switch (e.key.toLowerCase()) {
-        case 'd':
-          enableDayView();
-          break;
-        case '4':
-          enable4DayView();
-          break;
-        case 'w':
-          enableWeekView();
-          break;
-        case 'm':
-          enableMonthView();
-          break;
-        case 'y':
-          enableYearView();
-          break;
-        case 'a':
-          enableAgendaView();
-          break;
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [
-    enableDayView,
-    enable4DayView,
-    enableWeekView,
-    enableMonthView,
-    enableYearView,
-    enableAgendaView,
-  ]);
+  useCalendarViewShortcuts({
+    enabled: !disabled,
+    availableViews,
+    day: enableDayView,
+    '4-days': enable4DayView,
+    week: enableWeekView,
+    month: enableMonthView,
+    year: enableYearView,
+    agenda: enableAgendaView,
+  });
 
   if (!initialized || !view || !dates.length) return null;
 
@@ -581,7 +533,7 @@ export const CalendarContent = ({
     <div
       className={cn(
         'grid h-full min-h-0 w-full',
-        view === 'month' || view === 'year'
+        view === 'month' || view === 'year' || view === 'agenda'
           ? 'grid-rows-[auto_1fr]'
           : 'grid-rows-[auto_auto_1fr]'
       )}
@@ -638,10 +590,16 @@ export const CalendarContent = ({
           <CalendarLoadingSkeleton dates={dates} view={view} />
         ) : view === 'month' && dates?.[0] ? (
           <MonthCalendar
+            readOnly={disabled}
             date={dates[0]}
             workspace={workspace}
             visibleDates={dates}
             viewedMonth={date}
+            onDayClick={(day) => {
+              handleSetDate(day);
+              handleSetView('day');
+              setDates([day]);
+            }}
             locale={locale}
           />
         ) : view === 'year' ? (
@@ -655,15 +613,21 @@ export const CalendarContent = ({
             )}
             onDayClick={(d) => {
               handleSetDate(d);
-              enableDayView();
+              handleSetView('day');
+              setDates([d]);
             }}
             onMonthClick={(d) => {
               handleSetDate(d);
-              enableMonthView();
+              handleSetView('month');
             }}
           />
         ) : view === 'agenda' && dates?.[0] ? (
-          <AgendaView startDate={dates[0]} workspace={workspace} />
+          <AgendaView
+            readOnly={disabled}
+            startDate={dates[0]}
+            workspace={workspace}
+            locale={locale}
+          />
         ) : (
           <CalendarViewWithTrail dates={dates} overlay={overlay} />
         )}

package/src/components/ui/legacy/calendar/calendar-event-tone.ts

@@ -0,0 +1,20 @@
+const tones: Record<string, string> = {
+  blue: 'bg-dynamic-blue/10 text-dynamic-blue',
+  red: 'bg-dynamic-red/10 text-dynamic-red',
+  green: 'bg-dynamic-green/10 text-dynamic-green',
+  purple: 'bg-dynamic-purple/10 text-dynamic-purple',
+  yellow: 'bg-dynamic-yellow/10 text-dynamic-yellow',
+  orange: 'bg-dynamic-orange/10 text-dynamic-orange',
+  pink: 'bg-dynamic-pink/10 text-dynamic-pink',
+  cyan: 'bg-dynamic-cyan/10 text-dynamic-cyan',
+  indigo: 'bg-dynamic-indigo/10 text-dynamic-indigo',
+  gray: 'bg-muted text-muted-foreground',
+};
+export function calendarEventTone(color: string | null | undefined) {
+  const normalized = color?.trim().toLowerCase() ?? '';
+  return (
+    tones[
+      normalized === '#6b7280' || normalized === 'grey' ? 'gray' : normalized
+    ] ?? 'bg-primary/10 text-primary'
+  );
+}

package/src/components/ui/legacy/calendar/calendar-meeting-link.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { getCalendarMeetingUrl } from './calendar-meeting-link';
+
+describe('getCalendarMeetingUrl', () => {
+  it('returns the trusted Meet URL from a scheduled meeting event', () => {
+    expect(
+      getCalendarMeetingUrl({
+        scheduling_metadata: {
+          type: 'tuturuuu_meeting',
+          meeting_url: 'https://meet.tuturuuu.com/personal/meetings/meeting-1',
+        },
+      })
+    ).toBe('https://meet.tuturuuu.com/personal/meetings/meeting-1');
+  });
+
+  it('rejects untrusted and unrelated event URLs', () => {
+    expect(
+      getCalendarMeetingUrl({
+        scheduling_metadata: {
+          type: 'tuturuuu_meeting',
+          meeting_url: 'https://example.test/phishing',
+        },
+      })
+    ).toBeNull();
+    expect(getCalendarMeetingUrl({ scheduling_metadata: null })).toBeNull();
+  });
+});

package/src/components/ui/legacy/calendar/calendar-meeting-link.ts

@@ -0,0 +1,34 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+
+type CalendarEventWithScheduling = Partial<CalendarEvent> & {
+  scheduling_metadata?: Record<string, unknown> | null;
+};
+
+export function getCalendarMeetingMetadata(event: Partial<CalendarEvent>) {
+  return (event as CalendarEventWithScheduling).scheduling_metadata;
+}
+
+export function getCalendarMeetingUrl(event: CalendarEventWithScheduling) {
+  const metadata = getCalendarMeetingMetadata(event);
+  if (
+    metadata?.type !== 'tuturuuu_meeting' ||
+    typeof metadata.meeting_url !== 'string'
+  ) {
+    return null;
+  }
+
+  try {
+    const url = new URL(metadata.meeting_url);
+    const isMeetHost =
+      url.hostname === 'meet.tuturuuu.com' ||
+      url.hostname === 'meet.tuturuuu.localhost' ||
+      (url.hostname === 'localhost' && url.port === '7807');
+    return url.protocol === 'https:' || url.protocol === 'http:'
+      ? isMeetHost
+        ? url.toString()
+        : null
+      : null;
+  } catch {
+    return null;
+  }
+}

package/src/components/ui/legacy/calendar/calendar-period.ts

@@ -0,0 +1,28 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+/** Endpoints are inclusive days; the event query expands the final day. */
+export function calendarPeriodDates(
+  date: Date,
+  view: 'year' | 'agenda'
+): Date[] {
+  const start = new Date(date);
+  start.setHours(0, 0, 0, 0);
+  if (view === 'year') start.setMonth(0, 1);
+  const end = new Date(start);
+  if (view === 'year') end.setMonth(11, 31);
+  else end.setDate(end.getDate() + 29);
+  return [start, end];
+}
+
+/** Create at 9 AM on the selected calendar day, in its configured zone. */
+export function calendarDraftDate(date: Date, zone?: string): Date {
+  const wallTime = `${dayjs(date).format('YYYY-MM-DD')}T09:00:00`;
+  return (
+    zone && zone !== 'auto' ? dayjs.tz(wallTime, zone) : dayjs(wallTime)
+  ).toDate();
+}

package/src/components/ui/legacy/calendar/calendar-shortcuts.test.tsx

@@ -0,0 +1,107 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import type { CalendarView } from '../../../../hooks/use-view-transition';
+import { calendarDraftDate, calendarPeriodDates } from './calendar-period';
+import {
+  calendarShortcutView,
+  useCalendarViewShortcuts,
+} from './use-calendar-view-shortcuts';
+
+function ControlledViews({ disabledWeek = false }: { disabledWeek?: boolean }) {
+  const [view, setView] = useState<CalendarView>('week');
+  useCalendarViewShortcuts({
+    enabled: true,
+    availableViews: disabledWeek
+      ? [
+          { value: 'week', disabled: true },
+          { value: '4-days', disabled: true },
+          { value: 'month' },
+        ]
+      : undefined,
+    day: () => setView('day'),
+    '4-days': () => setView('4-days'),
+    week: () => setView('week'),
+    month: () => setView('month'),
+    year: () => setView('year'),
+    agenda: () => setView('agenda'),
+  });
+  return (
+    <>
+      <output>{view}</output>
+      <input aria-label="Event title" />
+    </>
+  );
+}
+describe('calendar keyboard navigation', () => {
+  it('switches views with M and preserves typing', () => {
+    render(<ControlledViews />);
+    fireEvent.keyDown(window, { key: 'M' });
+    expect(screen.getByText('month')).toBeVisible();
+    fireEvent.keyDown(screen.getByRole('textbox'), { key: 'y' });
+    expect(screen.getByText('month')).toBeVisible();
+    fireEvent.keyDown(window, { key: 'a' });
+    expect(screen.getByText('agenda')).toBeVisible();
+  });
+  it.each([
+    { ctrlKey: true },
+    { metaKey: true },
+    { altKey: true },
+    { shiftKey: true },
+    { isComposing: true },
+    { repeat: true },
+  ])('ignores competing commands %j', (options) => {
+    expect(
+      calendarShortcutView(
+        new KeyboardEvent('keydown', { key: 'm', ...options })
+      )
+    ).toBeNull();
+  });
+  it('does not invoke views disabled for the current screen', () => {
+    render(<ControlledViews disabledWeek />);
+    fireEvent.keyDown(window, { key: 'm' });
+    fireEvent.keyDown(window, { key: 'w' });
+    fireEvent.keyDown(window, { key: '4' });
+    expect(screen.getByText('month')).toBeVisible();
+  });
+  it('does not change views behind a modal', () => {
+    render(
+      <div role="dialog" data-state="open">
+        Settings
+      </div>
+    );
+    expect(
+      calendarShortcutView(new KeyboardEvent('keydown', { key: 'm' }))
+    ).toBeNull();
+  });
+});
+describe('event ranges', () => {
+  it('creates 9 AM drafts in the selected zone without caller plugin setup', () => {
+    expect(
+      calendarDraftDate(new Date(2026, 8, 7), 'Asia/Ho_Chi_Minh').toISOString()
+    ).toBe('2026-09-07T02:00:00.000Z');
+  });
+  it('fetches the entire leap year', () => {
+    const dates = calendarPeriodDates(new Date(2028, 8, 7), 'year');
+    expect(
+      dates.map((date) => [date.getFullYear(), date.getMonth(), date.getDate()])
+    ).toEqual([
+      [2028, 0, 1],
+      [2028, 11, 31],
+    ]);
+  });
+  it('fetches all 30 agenda days across a year boundary', () => {
+    const dates = calendarPeriodDates(new Date(2026, 11, 20, 15), 'agenda');
+    expect(
+      dates.map((date) => [
+        date.getFullYear(),
+        date.getMonth(),
+        date.getDate(),
+        date.getHours(),
+      ])
+    ).toEqual([
+      [2026, 11, 20, 0],
+      [2027, 0, 18, 0],
+    ]);
+  });
+});