@tuturuuu/ui 0.30.2 → 0.31.0

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { CalendarX2, Clock, MapPin, Sun } from '@tuturuuu/icons';
+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';
@@ -17,16 +17,27 @@ import {
   isYesterday,
   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 } from 'react';
+import { useMemo, useState } from 'react';
 import {
   formatLunarDay,
   getLunarDate,
   getLunarHolidayName,
   isSpecialLunarDate,
 } from '../../../../lib/lunar-calendar';
+import { Button } from '../../button';
+import { Input } from '../../input';
+import { calendarDraftDate } from './calendar-period';
+import { useCalendarSettings } from './settings/settings-context';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
 
 interface AgendaViewProps {
+  readOnly?: boolean;
   startDate: Date;
   workspace?: Workspace;
   locale?: string;
@@ -173,7 +184,7 @@ function EventCard({
       {/* Content */}
       <div className="min-w-0 flex-1">
         <span className="line-clamp-1 font-medium text-foreground text-sm leading-tight">
-          {event.title || 'Untitled event'}
+          {event.title || t('views.untitled_event')}
         </span>
 
         {(event.location || (!isAllDay && event.description)) && (
@@ -258,7 +269,7 @@ function DateHeader({
             today ? 'text-primary-foreground/70' : 'text-muted-foreground'
           )}
         >
-          {format(date, 'EEE')}
+          {date.toLocaleDateString(locale, { weekday: 'short' })}
         </span>
       </div>
 
@@ -271,7 +282,11 @@ function DateHeader({
               today ? 'text-primary' : 'text-foreground'
             )}
           >
-            {format(date, 'EEEE, MMMM d')}
+            {date.toLocaleDateString(locale, {
+              weekday: 'long',
+              month: 'long',
+              day: 'numeric',
+            })}
           </span>
           {relativeLabel && (
             <span
@@ -313,11 +328,24 @@ function DateHeader({
 
 export const AgendaView = ({
   startDate,
+  readOnly = false,
   locale = 'en',
   daysToShow = 30,
 }: AgendaViewProps) => {
   const t = useTranslations('calendar');
-  const { getCurrentEvents, openModal } = useCalendar();
+  const {
+    getCurrentEvents,
+    openModal,
+    addEmptyEvent,
+    readOnly: providerReadOnly,
+  } = useCalendar();
+  const { settings } = useCalendarSettings();
+  const cannotCreate = readOnly || providerReadOnly;
+  const createEvent = () => {
+    if (cannotCreate) return;
+    addEmptyEvent(calendarDraftDate(startDate, settings?.timezone?.timezone));
+  };
+  const [query, setQuery] = useState('');
   const { timeFormat: rawTimeFormat } = useCalendarPreferences();
   const { value: showLunar } = useUserBooleanConfig(
     'SHOW_LUNAR_CALENDAR',
@@ -331,7 +359,11 @@ export const AgendaView = ({
 
     for (let i = 0; i < daysToShow; i++) {
       const currentDate = addDays(startOfDay(startDate), i);
-      const events = getCurrentEvents(currentDate);
+      const events = getCurrentEvents(currentDate).filter((event) =>
+        `${event.title ?? ''} ${event.location ?? ''}`
+          .toLocaleLowerCase(locale)
+          .includes(query.toLocaleLowerCase(locale))
+      );
 
       if (events.length > 0) {
         const sortedEvents = [...events].sort((a, b) => {
@@ -348,50 +380,110 @@ export const AgendaView = ({
     }
 
     return groups;
-  }, [startDate, daysToShow, getCurrentEvents]);
-
-  if (groupedEvents.length === 0) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center p-8 text-center">
-        <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-muted">
-          <CalendarX2 className="h-8 w-8 text-muted-foreground" />
-        </div>
-        <h3 className="mb-1 font-semibold text-lg">
-          {t('agenda_empty_title')}
-        </h3>
-        <p className="max-w-xs text-muted-foreground text-sm">
-          {t('agenda_empty_subtitle', { days: daysToShow })}
-        </p>
-      </div>
-    );
-  }
+  }, [startDate, daysToShow, getCurrentEvents, query, locale]);
 
+  const uniqueEvents = new Set(
+    groupedEvents.flatMap((group) => group.events.map((event) => event.id))
+  ).size;
   return (
-    <div className="h-full overflow-auto">
-      <div className="mx-auto max-w-2xl space-y-1 p-4">
-        {groupedEvents.map(({ date, events }) => (
-          <div key={date.toISOString()}>
-            <DateHeader
-              date={date}
-              eventCount={events.length}
-              locale={locale}
-              showLunar={showLunar}
-              t={t as any}
-            />
-            <div className="space-y-1 pb-4 pl-14">
-              {events.map((event) => (
-                <EventCard
-                  key={event.id}
-                  event={event}
-                  timePattern={timePattern}
-                  timeFormat={timeFormat}
-                  t={t as any}
-                  onOpen={openModal}
-                />
-              ))}
+    <div
+      className="h-full overflow-auto bg-background"
+      data-calendar-view="agenda"
+    >
+      <div className="mx-auto max-w-4xl px-4 py-5 sm:px-8">
+        <div className="mb-6 flex flex-wrap items-end justify-between gap-4 border-b pb-5">
+          <div className="space-y-1">
+            <h2 className="font-semibold text-xl tracking-tight">
+              {t('agenda')}
+            </h2>
+            <p className="text-muted-foreground text-sm tabular-nums">
+              {startDate.toLocaleDateString(locale, {
+                month: 'short',
+                day: 'numeric',
+              })}{' '}
+              —{' '}
+              {addDays(startDate, daysToShow - 1).toLocaleDateString(locale, {
+                month: 'short',
+                day: 'numeric',
+                year: 'numeric',
+              })}
+            </p>
+            <p className="text-sm">
+              {t('agenda_event_count', { count: uniqueEvents })}
+            </p>
+          </div>
+          <div className="flex w-full items-center gap-2 sm:w-auto">
+            <div className="relative flex-1">
+              <Search className="absolute top-2.5 left-3 size-4 text-muted-foreground" />
+              <Input
+                className="pl-9"
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={t('views.search_events')}
+                aria-label={t('views.search_events')}
+              />
             </div>
+            <Button
+              variant="outline"
+              size="icon"
+              aria-label={t('views.create_event')}
+              disabled={cannotCreate}
+              onClick={createEvent}
+            >
+              <Plus className="size-4" />
+            </Button>
           </div>
-        ))}
+        </div>
+        {groupedEvents.length ? (
+          groupedEvents.map(({ date, events }) => (
+            <section key={date.toISOString()} className="relative mb-5">
+              <DateHeader
+                date={date}
+                eventCount={events.length}
+                locale={locale}
+                showLunar={showLunar}
+                t={t}
+              />
+              <div className="ml-5 space-y-2 border-l pb-2 pl-4 sm:ml-5 sm:pl-8">
+                {events.map((event) => (
+                  <EventCard
+                    key={event.id}
+                    event={event}
+                    timePattern={timePattern}
+                    timeFormat={timeFormat}
+                    t={t}
+                    onOpen={openModal}
+                  />
+                ))}
+              </div>
+            </section>
+          ))
+        ) : (
+          <div className="flex min-h-64 flex-col items-center justify-center gap-3 text-center">
+            <CalendarX2 className="size-8 text-muted-foreground" />
+            <h3 className="font-semibold">
+              {t(query ? 'views.no_matches' : 'agenda_empty_title')}
+            </h3>
+            {!query && (
+              <p className="max-w-sm text-muted-foreground text-sm">
+                {t('agenda_empty_subtitle', { days: daysToShow })}
+              </p>
+            )}
+            {query ? (
+              <Button variant="outline" onClick={() => setQuery('')}>
+                {t('views.clear_search')}
+              </Button>
+            ) : (
+              <Button
+                variant="outline"
+                disabled={cannotCreate}
+                onClick={createEvent}
+              >
+                {t('views.create_event')}
+              </Button>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

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;
+  }
+}