@tuturuuu/ui 0.30.2 → 0.32.0

package/src/components/ui/legacy/calendar/save-calendar-event-drafts.test.ts

@@ -0,0 +1,25 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { expect, it, vi } from 'vitest';
+import { saveCalendarEventDrafts } from './save-calendar-event-drafts';
+
+it('retains rejected or unconfirmed drafts and retries only those events', async () => {
+  const drafts = [
+    { title: 'Saved' },
+    { title: 'Rejected', description: 'Keep this content' },
+    { title: 'Unconfirmed' },
+  ];
+  const addEvent = vi
+    .fn()
+    .mockResolvedValueOnce({ id: 'event-1' } as CalendarEvent)
+    .mockRejectedValueOnce(new Error('Offline'))
+    .mockResolvedValueOnce(undefined);
+  const result = await saveCalendarEventDrafts(drafts, addEvent, undefined);
+  expect(result.savedEvents).toEqual([{ id: 'event-1' }]);
+  expect(result.failedEvents).toEqual(drafts.slice(1));
+  addEvent.mockResolvedValue({ id: 'retried-event' });
+  await saveCalendarEventDrafts(result.failedEvents, addEvent, undefined);
+  expect(addEvent.mock.calls.slice(3).map(([event]) => event.title)).toEqual([
+    'Rejected',
+    'Unconfirmed',
+  ]);
+});

package/src/components/ui/legacy/calendar/save-calendar-event-drafts.ts

@@ -0,0 +1,32 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+
+/** Keep only unconfirmed drafts after a batch so retry never resends saved events. */
+export async function saveCalendarEventDrafts(
+  drafts: Partial<CalendarEvent>[],
+  addEvent: (
+    event: Omit<CalendarEvent, 'id'>
+  ) => Promise<CalendarEvent | undefined>,
+  source: CalendarEvent['source']
+) {
+  const savedEvents: CalendarEvent[] = [];
+  const failedEvents: Partial<CalendarEvent>[] = [];
+  for (const draft of drafts) {
+    try {
+      const saved = await addEvent({
+        title: draft.title || 'New Event',
+        description: draft.description || '',
+        start_at: draft.start_at || '',
+        end_at: draft.end_at || '',
+        color: draft.color || 'BLUE',
+        location: draft.location || '',
+        locked: draft.locked || false,
+        source,
+      });
+      if (saved?.id) savedEvents.push(saved);
+      else failedEvents.push(draft);
+    } catch {
+      failedEvents.push(draft);
+    }
+  }
+  return { savedEvents, failedEvents };
+}

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

@@ -27,6 +27,7 @@ export const SmartCalendar = ({
   disabled,
   enableHeader = true,
   experimentalGoogleToken,
+  initialEventId,
   externalState,
   extras,
   overlay,
@@ -46,6 +47,7 @@ export const SmartCalendar = ({
   disabled?: boolean;
   enableHeader?: boolean;
   experimentalGoogleToken?: WorkspaceCalendarGoogleTokenClient | null;
+  initialEventId?: string;
   externalState?: {
     date: Date;
     setDate: React.Dispatch<React.SetStateAction<Date>>;
@@ -84,6 +86,7 @@ export const SmartCalendar = ({
       useQuery={useQuery}
       useQueryClient={useQueryClient}
       experimentalGoogleToken={experimentalGoogleToken}
+      initialEventId={initialEventId}
       eventAdapter={eventAdapter}
       readOnly={disabled}
     >

package/src/components/ui/legacy/calendar/use-calendar-view-shortcuts.ts

@@ -0,0 +1,54 @@
+'use client';
+
+import { isPageShortcutBlocked } from '@tuturuuu/utils/keyboard-shortcuts';
+import { useEffect, useEffectEvent } from 'react';
+import type { CalendarView } from '../../../../hooks/use-view-transition';
+
+export const CALENDAR_VIEW_KEYS: Record<string, CalendarView> = {
+  d: 'day',
+  '4': '4-days',
+  w: 'week',
+  m: 'month',
+  y: 'year',
+  a: 'agenda',
+};
+
+export function calendarShortcutView(
+  event: KeyboardEvent
+): CalendarView | null {
+  if (
+    isPageShortcutBlocked(event) ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.altKey ||
+    event.shiftKey
+  )
+    return null;
+  return CALENDAR_VIEW_KEYS[event.key.toLowerCase()] ?? null;
+}
+
+export function useCalendarViewShortcuts(
+  actions: Record<CalendarView, () => void> & {
+    enabled: boolean;
+    availableViews?: { value: string; disabled?: boolean }[];
+  }
+) {
+  const onKeyDown = useEffectEvent((event: KeyboardEvent) => {
+    const view = calendarShortcutView(event);
+    if (!view) return;
+    const available = actions.availableViews;
+    if (
+      available?.length &&
+      !available.some((item) => item.value === view && !item.disabled)
+    )
+      return;
+    event.preventDefault();
+    actions[view]();
+  });
+  useEffect(() => {
+    if (!actions.enabled) return;
+    const listener = (event: KeyboardEvent) => onKeyDown(event);
+    window.addEventListener('keydown', listener);
+    return () => window.removeEventListener('keydown', listener);
+  }, [actions.enabled]);
+}

package/src/components/ui/legacy/calendar/use-event-draft-session.test.tsx

@@ -0,0 +1,59 @@
+import { act, renderHook } from '@testing-library/react';
+import { useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import { useEventDraftSession } from './use-event-draft-session';
+
+describe('calendar draft session', () => {
+  it('preserves typed content through background refreshes and initializes on reopening or switching events', () => {
+    const { result, rerender } = renderHook(
+      ({ open, eventId, workspaceId, title }) => {
+        const [draft, setDraft] = useState('');
+        useEventDraftSession({
+          isOpen: open,
+          eventId,
+          workspaceId,
+          initialize: () => setDraft(title),
+        });
+        return { draft, setDraft };
+      },
+      {
+        initialProps: {
+          open: true,
+          eventId: 'new',
+          workspaceId: 'ws-1',
+          title: '',
+        },
+      }
+    );
+    act(() => result.current.setDraft('Unsaved meeting details'));
+    rerender({
+      open: true,
+      eventId: 'new',
+      workspaceId: 'ws-1',
+      title: 'Refetched server state',
+    });
+    expect(result.current.draft).toBe('Unsaved meeting details');
+    rerender({ open: false, eventId: 'new', workspaceId: 'ws-1', title: '' });
+    rerender({
+      open: true,
+      eventId: 'new',
+      workspaceId: 'ws-1',
+      title: 'Next draft',
+    });
+    expect(result.current.draft).toBe('Next draft');
+    rerender({
+      open: true,
+      eventId: 'event-2',
+      workspaceId: 'ws-1',
+      title: 'Existing meeting',
+    });
+    expect(result.current.draft).toBe('Existing meeting');
+    rerender({
+      open: true,
+      eventId: 'event-2',
+      workspaceId: 'ws-2',
+      title: 'Other workspace',
+    });
+    expect(result.current.draft).toBe('Other workspace');
+  });
+});

package/src/components/ui/legacy/calendar/use-event-draft-session.ts

@@ -0,0 +1,20 @@
+import { useEffect, useEffectEvent } from 'react';
+
+/** Initialize a draft only on opening or switching the selected event/workspace. */
+export function useEventDraftSession({
+  isOpen,
+  eventId,
+  workspaceId,
+  initialize,
+}: {
+  isOpen: boolean;
+  eventId?: string;
+  workspaceId?: string;
+  initialize: () => void;
+}) {
+  const initializeDraft = useEffectEvent(initialize);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Event and workspace identity define a new editing session.
+  useEffect(() => {
+    if (isOpen) initializeDraft();
+  }, [isOpen, eventId, workspaceId]);
+}

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

@@ -7,11 +7,11 @@ import { cn } from '@tuturuuu/utils/format';
 import {
   eachDayOfInterval,
   endOfMonth,
-  format,
   getDay,
   isToday,
   startOfMonth,
 } from 'date-fns';
+import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
 import {
   formatLunarDay,
@@ -57,9 +57,12 @@ function getEventDotColor(color: string): string {
 
 function getWeekdayLabels(
   firstDayOfWeek: number,
-  showWeekends: boolean
+  showWeekends: boolean,
+  locale: string
 ): string[] {
-  const days = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+  const days = Array.from({ length: 7 }, (_, day) =>
+    new Date(2026, 0, 4 + day).toLocaleDateString(locale, { weekday: 'narrow' })
+  );
 
   const reordered: { label: string; dayIndex: number }[] = [];
   for (let i = 0; i < 7; i++) {
@@ -93,14 +96,15 @@ function MiniMonth({
   onDayClick?: (date: Date) => void;
   onMonthClick?: (date: Date) => void;
 }) {
+  const t = useTranslations('calendar');
   const { getCurrentEvents } = useCalendar();
   const monthStart = startOfMonth(monthDate);
   const monthEnd = endOfMonth(monthDate);
   const days = eachDayOfInterval({ start: monthStart, end: monthEnd });
 
   const weekdayLabels = useMemo(
-    () => getWeekdayLabels(firstDayOfWeek, showWeekends),
-    [firstDayOfWeek, showWeekends]
+    () => getWeekdayLabels(firstDayOfWeek, showWeekends, locale),
+    [firstDayOfWeek, showWeekends, locale]
   );
 
   const numCols = showWeekends ? 7 : 5;
@@ -157,17 +161,25 @@ function MiniMonth({
   }, [days, getCurrentEvents]);
 
   return (
-    <div className="flex flex-col gap-1 rounded-xl border bg-background/50 p-3">
+    <section
+      className={cn(
+        'flex flex-col gap-2 rounded-xl border p-4 transition-colors hover:bg-muted/20',
+        isCurrentMonth ? 'border-primary/35 bg-primary/5' : 'bg-background'
+      )}
+    >
       <button
         type="button"
         onClick={() => onMonthClick?.(monthDate)}
         className={cn(
           'rounded-md px-1 py-1 text-left font-semibold text-sm transition-colors',
-          'hover:bg-foreground/5',
+          'hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring',
           isCurrentMonth && 'text-primary'
         )}
       >
-        {format(monthDate, 'MMMM')}
+        <span>{monthDate.toLocaleDateString(locale, { month: 'long' })}</span>
+        <span className="ml-2 font-normal text-muted-foreground text-xs">
+          {t('views.busy_days', { count: dayEventData.size })}
+        </span>
       </button>
 
       <div
@@ -199,7 +211,7 @@ function MiniMonth({
           />
         ))}
       </div>
-    </div>
+    </section>
   );
 }
 
@@ -216,8 +228,9 @@ function DayCell({
   onDayClick?: (date: Date) => void;
   dayEventData?: { count: number; dots: string[] };
 }) {
+  const t = useTranslations('calendar');
   if (!day) {
-    return <div className={cn('h-6', showLunar && 'h-9')} />;
+    return <div className={cn('h-9', showLunar && 'h-11')} />;
   }
 
   const today = isToday(day);
@@ -233,10 +246,13 @@ function DayCell({
     <button
       type="button"
       onClick={() => onDayClick?.(day)}
+      aria-label={`${day.toLocaleDateString(locale, { dateStyle: 'full' })}, ${t('agenda_event_count', { count: dayEventData?.count ?? 0 })}`}
+      aria-current={today ? 'date' : undefined}
       className={cn(
         'group relative flex flex-col items-center justify-start rounded-md transition-colors',
-        showLunar ? 'h-9 py-0.5' : 'h-6',
-        'hover:bg-foreground/5',
+        showLunar ? 'h-11 py-1' : 'h-9 py-1',
+        'hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring',
+        hasEvents && 'bg-primary/5',
         today && 'font-bold'
       )}
     >
@@ -294,8 +310,7 @@ function DayCell({
             )}
             {hasEvents && dayEventData && (
               <div className="text-muted-foreground">
-                {dayEventData.count} event
-                {dayEventData.count !== 1 ? 's' : ''}
+                {t('agenda_event_count', { count: dayEventData.count })}
               </div>
             )}
           </div>
@@ -325,8 +340,11 @@ export function YearCalendar({
   }, [year]);
 
   return (
-    <div className="h-full overflow-auto p-4">
-      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <div
+      className="h-full overflow-auto bg-muted/10 p-4 sm:p-6"
+      data-calendar-view="year"
+    >
+      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
         {months.map((monthDate) => (
           <MiniMonth
             key={monthDate.getMonth()}

package/src/components/ui/pwa-status.test.tsx

@@ -0,0 +1,53 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  clearPwaInstallPrompt,
+  initializePwaInstall,
+} from '../../hooks/pwa-install-prompt';
+import { PwaStatus } from './pwa-status';
+
+const labels = {
+  offline_status: 'offline_status',
+  install: 'install',
+  install_help: 'install_help',
+  cache_help: 'cache_help',
+};
+beforeEach(() => {
+  initializePwaInstall();
+  clearPwaInstallPrompt();
+  vi.stubGlobal('matchMedia', () => ({ matches: false }));
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+describe('PWA status and installation', () => {
+  it('shows offline limitations without offering an unavailable install', () => {
+    vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(false);
+    render(<PwaStatus labels={labels} />);
+    expect(screen.getByRole('status')).toHaveTextContent('offline_status');
+    expect(screen.queryByRole('button', { name: 'install' })).toBeNull();
+  });
+  it('provides Home Screen instructions when a browser has no install prompt', () => {
+    render(<PwaStatus labels={labels} />);
+    fireEvent.click(screen.getByRole('button', { name: 'install' }));
+    expect(screen.getByRole('dialog')).toHaveTextContent('install_help');
+  });
+  it('only invokes the native install prompt after an explicit click', async () => {
+    const prompt = vi.fn(async () => {});
+    const event = Object.assign(
+      new Event('beforeinstallprompt', { cancelable: true }),
+      { prompt, userChoice: Promise.resolve({ outcome: 'accepted' }) }
+    );
+    act(() => {
+      window.dispatchEvent(event);
+    });
+    render(<PwaStatus labels={labels} />);
+    expect(prompt).not.toHaveBeenCalled();
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'install' }));
+    });
+    expect(prompt).toHaveBeenCalledOnce();
+    expect(screen.queryByRole('button', { name: 'install' })).toBeNull();
+  });
+});

package/src/components/ui/pwa-status.tsx

@@ -0,0 +1,113 @@
+'use client';
+import { Download, WifiOff } from '@tuturuuu/icons';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import {
+  clearPwaInstallPrompt,
+  getPwaInstallPrompt,
+  initializePwaInstall,
+  subscribePwaInstall,
+} from '../../hooks/pwa-install-prompt';
+import { Button } from './button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from './dialog';
+
+function subscribeOnline(callback: () => void) {
+  window.addEventListener('online', callback);
+  window.addEventListener('offline', callback);
+  return () => {
+    window.removeEventListener('online', callback);
+    window.removeEventListener('offline', callback);
+  };
+}
+export function PwaStatus({
+  labels,
+}: {
+  labels: {
+    offline_status: string;
+    install: string;
+    install_help: string;
+    cache_help: string;
+  };
+}) {
+  const t = (key: keyof typeof labels) => labels[key];
+  const online = useSyncExternalStore(
+    subscribeOnline,
+    () => navigator.onLine,
+    () => true
+  );
+  const installPrompt = useSyncExternalStore(
+    subscribePwaInstall,
+    getPwaInstallPrompt,
+    () => null
+  );
+  const [installed, setInstalled] = useState(false);
+  const [showHelp, setShowHelp] = useState(false);
+  useEffect(() => {
+    setInstalled(
+      window.matchMedia('(display-mode: standalone)').matches ||
+        ('standalone' in navigator && navigator.standalone === true)
+    );
+    initializePwaInstall();
+    const onInstalled = () => {
+      setInstalled(true);
+      clearPwaInstallPrompt();
+    };
+    window.addEventListener('appinstalled', onInstalled);
+    return () => {
+      window.removeEventListener('appinstalled', onInstalled);
+    };
+  }, []);
+  const install = async () => {
+    if (!installPrompt) {
+      setShowHelp(true);
+      return;
+    }
+    try {
+      await installPrompt.prompt();
+      const choice = await installPrompt.userChoice;
+      if (choice.outcome === 'accepted') setInstalled(true);
+    } catch {
+      setShowHelp(true);
+    } finally {
+      clearPwaInstallPrompt();
+    }
+  };
+  return (
+    <>
+      {!online && (
+        <div
+          role="status"
+          className="fixed inset-x-3 bottom-3 z-50 mx-auto flex max-w-xl items-start gap-2 rounded-lg border bg-background p-3 text-sm shadow-lg"
+        >
+          <WifiOff className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+          <p>{t('offline_status')}</p>
+        </div>
+      )}
+      {online && !installed && (
+        <Button
+          variant="outline"
+          size="sm"
+          className="fixed right-3 bottom-3 z-30 gap-2 rounded-full bg-background shadow-sm"
+          onClick={() => void install()}
+        >
+          <Download className="size-4" />
+          {t('install')}
+        </Button>
+      )}
+      <Dialog open={showHelp} onOpenChange={setShowHelp}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('install')}</DialogTitle>
+            <DialogDescription>{t('install_help')}</DialogDescription>
+          </DialogHeader>
+          <p className="text-muted-foreground text-sm">{t('cache_help')}</p>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}