@tuturuuu/ui 0.37.2 → 0.38.0

package/src/components/ui/custom/workspace-picker-content.tsx

@@ -3,6 +3,7 @@
 import { ArrowLeft, Eye, EyeOff, Plus, Search, Star, X } from '@tuturuuu/icons';
 import type { InternalApiWorkspaceSummary } from '@tuturuuu/types';
 import { ROOT_WORKSPACE_ID } from '@tuturuuu/utils/constants';
+import { cn } from '@tuturuuu/utils/format';
 import { useTranslations } from 'next-intl';
 import { type ReactNode, useRef, useState } from 'react';
 import type { useWorkspaceVisibility } from '../../../hooks/use-workspace-visibility';
@@ -14,6 +15,7 @@ import {
   DialogTitle,
 } from '../dialog';
 import { Input } from '../input';
+import { PopoverClose, PopoverContent } from '../popover';
 import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
 import { WorkspaceIcon } from './workspace-select-icon';
 
@@ -32,6 +34,8 @@ export function WorkspacePickerContent({
   listLoading = false,
   listError,
   onRetryList,
+  presentation = 'fullscreen',
+  onClose,
 }: {
   workspaces: InternalApiWorkspaceSummary[];
   currentId?: string;
@@ -46,10 +50,15 @@ export function WorkspacePickerContent({
   listLoading?: boolean;
   listError?: Error | null;
   onRetryList?: () => void;
+  presentation?: 'fullscreen' | 'dropdown';
+  onClose?: () => void;
 }) {
+  const dropdown = presentation === 'dropdown';
+  const Title = dropdown ? 'h2' : DialogTitle;
+  const Description = dropdown ? 'p' : DialogDescription;
   const t = useTranslations('common');
   const [restoring, setRestoring] = useState(restoreOnly);
-  const [searchVisible, setSearchVisible] = useState(false);
+  const [searchVisible, setSearchVisible] = useState(dropdown);
   const [search, setSearch] = useState('');
   const input = useRef<HTMLInputElement>(null);
   const query = search.trim().toLocaleLowerCase();
@@ -75,13 +84,14 @@ export function WorkspacePickerContent({
     setSearchVisible(true);
     requestAnimationFrame(() => input.current?.focus());
   }
-  return (
-    <DialogContent
-      presentation="fullscreen"
-      showCloseButton={false}
-      className="flex-col"
-    >
-      <div className="flex items-center gap-3 border-b p-4 pt-[max(1rem,env(safe-area-inset-top))]">
+  const content = (
+    <>
+      <div
+        className={cn(
+          'flex items-center gap-3 border-b p-4',
+          !dropdown && 'pt-[max(1rem,env(safe-area-inset-top))]'
+        )}
+      >
         {restoring && !restoreOnly && (
           <Button
             size="icon"
@@ -96,18 +106,31 @@ export function WorkspacePickerContent({
           </Button>
         )}
         <WorkspaceIcon fallbackLogoUrl={TUTURUUU_LOGO_URL} name="Tuturuuu" />
-        <DialogTitle className="min-w-0 flex-1">
+        <Title className="min-w-0 flex-1 font-semibold text-lg leading-none">
           {restoring ? t('hidden_workspaces') : t('workspaces')}
-        </DialogTitle>
-        <DialogClose asChild>
-          <Button size="icon" variant="ghost" aria-label={t('close')}>
-            <X />
-          </Button>
-        </DialogClose>
+        </Title>
+        {dropdown ? (
+          <PopoverClose asChild>
+            <Button
+              size="icon"
+              variant="ghost"
+              aria-label={t('close')}
+              onClick={onClose}
+            >
+              <X />
+            </Button>
+          </PopoverClose>
+        ) : (
+          <DialogClose asChild>
+            <Button size="icon" variant="ghost" aria-label={t('close')}>
+              <X />
+            </Button>
+          </DialogClose>
+        )}
       </div>
-      <DialogDescription className={restoring ? 'px-4 pt-3' : 'sr-only'}>
+      <Description className={restoring ? 'px-4 pt-3' : 'sr-only'}>
         {restoring ? t('hidden_workspaces_description') : t('select_workspace')}
-      </DialogDescription>
+      </Description>
       {searchVisible && (
         <div className="flex gap-2 px-4 pt-3">
           <Input
@@ -148,7 +171,12 @@ export function WorkspacePickerContent({
           </Button>
         </div>
       )}
-      <div className="min-h-0 flex-1 overflow-y-auto px-4 pt-4 pb-28">
+      <div
+        className={cn(
+          'min-h-0 flex-1 overflow-y-auto px-4 pt-4',
+          dropdown ? 'pb-3' : 'pb-28'
+        )}
+      >
         {!visibility.known || listLoading || listError ? (
           <p role="status">
             {visibility.isError || listError
@@ -161,7 +189,10 @@ export function WorkspacePickerContent({
             {results.map((workspace) => (
               <div
                 key={workspace.id}
-                className="mb-2 flex items-center gap-2 rounded-xl border p-2"
+                className={cn(
+                  'flex items-center gap-2',
+                  dropdown ? 'mb-1 rounded-md' : 'mb-2 rounded-xl border p-2'
+                )}
               >
                 {restoring ? (
                   <div className="flex min-w-0 flex-1 items-center gap-3 p-2">
@@ -174,7 +205,10 @@ export function WorkspacePickerContent({
                 ) : (
                   <Button
                     variant="ghost"
-                    className="h-auto min-w-0 flex-1 justify-start gap-3 whitespace-normal py-3 text-start"
+                    className={cn(
+                      'h-auto min-w-0 flex-1 justify-start gap-3 whitespace-normal text-start',
+                      dropdown ? 'py-2' : 'py-3'
+                    )}
                     aria-label={[
                       workspace.name ?? workspace.id,
                       workspace.tier ?? 'FREE',
@@ -268,26 +302,55 @@ export function WorkspacePickerContent({
           </Button>
         )}
       </div>
-      <div className="absolute right-4 bottom-[max(1rem,env(safe-area-inset-bottom))] flex gap-3 rounded-full border bg-background p-2 shadow-lg">
-        <Button
-          size="icon"
-          className="rounded-full"
-          aria-label={t('search_workspace')}
-          onClick={openSearch}
-        >
-          <Search />
-        </Button>
-        {!restoring && onCreate && (
+      <div
+        className={
+          dropdown
+            ? restoring || !onCreate
+              ? 'hidden'
+              : 'flex gap-2 border-t p-2'
+            : 'absolute right-4 bottom-[max(1rem,env(safe-area-inset-bottom))] flex gap-3 rounded-full border bg-background p-2 shadow-lg'
+        }
+      >
+        {!dropdown && (
           <Button
             size="icon"
             className="rounded-full"
+            aria-label={t('search_workspace')}
+            onClick={openSearch}
+          >
+            <Search />
+          </Button>
+        )}
+        {!restoring && onCreate && (
+          <Button
+            size={dropdown ? 'sm' : 'icon'}
+            className={dropdown ? 'w-full justify-start' : 'rounded-full'}
             aria-label={t('create_workspace_action')}
             onClick={onCreate}
           >
             <Plus />
+            {dropdown && t('create_workspace_action')}
           </Button>
         )}
       </div>
+    </>
+  );
+  return dropdown ? (
+    <PopoverContent
+      align="start"
+      aria-label={t(restoring ? 'hidden_workspaces' : 'workspaces')}
+      collisionPadding={8}
+      className="flex max-h-[min(32rem,var(--radix-popover-content-available-height))] w-80 max-w-[min(calc(100vw-1rem),var(--radix-popover-content-available-width))] flex-col overflow-hidden p-0"
+    >
+      {content}
+    </PopoverContent>
+  ) : (
+    <DialogContent
+      presentation="fullscreen"
+      showCloseButton={false}
+      className="flex-col"
+    >
+      {content}
     </DialogContent>
   );
 }

package/src/components/ui/custom/workspace-select.tsx

@@ -54,6 +54,7 @@ import {
   FormMessage,
 } from '../form';
 import { Input } from '../input';
+import { Popover, PopoverTrigger } from '../popover';
 import { TUTURUUU_LOGO_URL } from './tuturuuu-logo';
 import { WorkspacePickerContent } from './workspace-picker-content';
 import {
@@ -93,6 +94,7 @@ export function WorkspaceSelect({
   triggerClassName,
   platformWorkspaceSetupUrl,
   cacheScope,
+  presentation = 'dropdown',
 }: {
   wsId: string;
   hideLeading?: boolean;
@@ -113,7 +115,11 @@ export function WorkspaceSelect({
   platformWorkspaceSetupUrl?: string;
   /** Authenticated identity used to isolate user-specific picker caches. */
   cacheScope?: string;
+  presentation?: 'fullscreen' | 'dropdown';
 }) {
+  const Picker = presentation === 'dropdown' ? Popover : Dialog;
+  const PickerTrigger =
+    presentation === 'dropdown' ? PopoverTrigger : DialogTrigger;
   const t = useTranslations();
   const locale = useLocale();
   const router = useRouter();
@@ -417,8 +423,8 @@ export function WorkspaceSelect({
           setShowNewWorkspaceDialog(open);
         }}
       >
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogTrigger asChild disabled={!hasSelectableWorkspaces}>
+        <Picker open={open} onOpenChange={setOpen}>
+          <PickerTrigger asChild disabled={!hasSelectableWorkspaces}>
             <Button
               size="xs"
               variant="outline"
@@ -485,8 +491,10 @@ export function WorkspaceSelect({
                 <ChevronDown className="ml-1 h-4 w-4 shrink-0 opacity-50" />
               )}
             </Button>
-          </DialogTrigger>
+          </PickerTrigger>
           <WorkspacePickerContent
+            presentation={presentation}
+            onClose={() => setOpen(false)}
             workspaces={workspaces ?? []}
             currentId={workspace?.id}
             defaultId={defaultWorkspaceId}
@@ -517,7 +525,7 @@ export function WorkspaceSelect({
               </Command>
             }
           />
-        </Dialog>
+        </Picker>
         <DialogContent>
           <DialogHeader>
             <DialogTitle>{t('common.create_workspace')}</DialogTitle>

package/src/components/ui/legacy/calendar/calendar-draft-recovery.ts

@@ -0,0 +1,34 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+
+export function createCalendarDraftRecovery() {
+  let submitted:
+    | {
+        payload: Partial<CalendarEvent>;
+        requestId: string;
+        recoverable: boolean;
+      }
+    | undefined;
+  let recovered: CalendarEvent | undefined;
+  return {
+    original: () => recovered,
+    submitted: () => submitted,
+    capture(
+      payload: Partial<CalendarEvent>,
+      requestId: string,
+      recoverable: boolean
+    ) {
+      // Snapshot once. An uncertain request never changes its ID or contents.
+      submitted ??= {
+        payload: structuredClone(payload),
+        requestId,
+        recoverable,
+      };
+      return submitted;
+    },
+    complete(event: CalendarEvent) {
+      if (!event.id || event.id === 'new')
+        throw new Error('Unconfirmed creation');
+      recovered = event;
+    },
+  };
+}

package/src/components/ui/legacy/calendar/event-modal.tsx

@@ -25,11 +25,7 @@ import {
   Unlock,
   X,
 } from '@tuturuuu/icons';
-import {
-  type CalendarSourceInput,
-  type CalendarSourceOption,
-  getWorkspaceCalendarDefaultSource,
-} from '@tuturuuu/internal-api';
+import { getWorkspaceCalendarDefaultSource } from '@tuturuuu/internal-api';
 import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
 import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
 import { Badge } from '@tuturuuu/ui/badge';
@@ -44,6 +40,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@tuturuuu/ui/form';
+import { newCalendarCreationRequestId } from '@tuturuuu/ui/hooks/calendar-creation-request';
 import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
 import { useForm } from '@tuturuuu/ui/hooks/use-form';
 import { notifySave } from '@tuturuuu/ui/save-notification';
@@ -76,13 +73,12 @@ import {
   useState,
 } from 'react';
 import { z } from 'zod';
+import { useCalendarDraftSave } from './use-calendar-draft-save';
 import { Alert, AlertDescription, AlertTitle } from '../../alert';
 import { AutosizeTextarea } from '../../custom/autosize-textarea';
-import { getCalendarMeetingMetadata } from './calendar-meeting-link';
 import {
   COLOR_OPTIONS,
   DateError,
-  EventColorPicker,
   EventDateTimePicker,
   EventDescriptionInput,
   EventLocationInput,
@@ -92,7 +88,17 @@ import {
 } from './event-form-components';
 import { EventModalHeader } from './event-modal-header';
 import { eventEndPickerBounds } from './event-picker-bounds';
-import { saveCalendarEventDrafts } from './save-calendar-event-drafts';
+import { eventModalDraft, eventModalSavePayload } from './event-save-payload';
+import {
+  eventSourceChanged,
+  selectedEventSource,
+  sourceInputFromOption,
+} from './event-source-selection';
+import { ProviderColorPicker } from './provider-color-picker';
+import {
+  prepareCalendarEventDrafts,
+  saveCalendarEventDrafts,
+} from './save-calendar-event-drafts';
 import { useCalendarSettings } from './settings/settings-context';
 import { useEventDraftSession } from './use-event-draft-session';
 
@@ -107,53 +113,6 @@ const AIFormSchema = z.object({
   smart_scheduling: z.boolean().default(true),
 });
 
-function sourceInputFromOption(
-  option?: CalendarSourceOption | null
-): CalendarSourceInput | undefined {
-  if (!option) return undefined;
-
-  if (option.provider === 'tuturuuu') {
-    return {
-      provider: 'tuturuuu',
-      workspaceCalendarId: option.workspaceCalendarId,
-    };
-  }
-
-  return {
-    provider: option.provider,
-    connectionId: option.connectionId,
-  };
-}
-
-function findEventSourceOption(
-  options: CalendarSourceOption[],
-  event: Partial<CalendarEvent>
-) {
-  if (event.provider === 'google' || event.provider === 'microsoft') {
-    return options.find((option) => {
-      if (option.provider === 'tuturuuu') return false;
-      if (option.provider !== event.provider) return false;
-      if (
-        event.source_calendar_id &&
-        option.workspaceCalendarId === event.source_calendar_id
-      ) {
-        return true;
-      }
-
-      return (
-        option.externalCalendarId ===
-        (event.external_calendar_id ?? event.google_calendar_id)
-      );
-    });
-  }
-
-  return options.find(
-    (option) =>
-      option.provider === 'tuturuuu' &&
-      option.workspaceCalendarId === event.source_calendar_id
-  );
-}
-
 export function EventModal() {
   const toast = notifySave;
   const startPickerRef = useRef<HTMLButtonElement>(null);
@@ -195,11 +154,12 @@ export function EventModal() {
     () => sourceData?.options ?? [],
     [sourceData?.options]
   );
-  const selectedSourceOption =
-    sourceOptions.find((option) => option.id === selectedSourceId) ??
-    findEventSourceOption(sourceOptions, event) ??
-    sourceData?.defaultSource ??
-    sourceOptions[0];
+  const selectedSourceOption = selectedEventSource(
+    sourceOptions,
+    event,
+    selectedSourceId,
+    sourceData?.defaultSource
+  );
 
   // State for AI event generation
   const [generatedEvents, setGeneratedEvents] =
@@ -284,7 +244,7 @@ export function EventModal() {
 
   const receiveGeneratedEvents = useEffectEvent(() => {
     const processedEvents = (object?.events || []) as Partial<CalendarEvent>[];
-    setGeneratedEvents(processedEvents);
+    setGeneratedEvents(prepareCalendarEventDrafts(processedEvents));
     setCurrentEventIndex(0);
     const firstEvent = processedEvents[0];
     if (
@@ -307,32 +267,16 @@ export function EventModal() {
     workspaceId: activeEvent?.ws_id,
     initialize: () => {
       if (activeEvent) {
-        const cleanEventData: Partial<CalendarEvent> = {
-          id: activeEvent.id,
-          title: activeEvent.title || '',
-          description: activeEvent.description || '',
-          start_at: activeEvent.start_at,
-          end_at: activeEvent.end_at,
-          color: activeEvent.color || 'BLUE',
-          location: activeEvent.location || '',
-          locked: activeEvent.locked || false,
-          ws_id: activeEvent.ws_id,
-          provider: activeEvent.provider,
-          source_calendar_id: activeEvent.source_calendar_id,
-          external_calendar_id: activeEvent.external_calendar_id,
-          external_event_id: activeEvent.external_event_id,
-          google_event_id: activeEvent.google_event_id,
-          google_calendar_id: activeEvent.google_calendar_id,
-          scheduling_metadata: getCalendarMeetingMetadata(activeEvent),
-        };
+        const cleanEventData = eventModalDraft(activeEvent);
 
         setEvent(cleanEventData);
-        const sourceOption = findEventSourceOption(
-          sourceOptions,
-          cleanEventData
-        );
         setSelectedSourceId(
-          sourceOption?.id ?? sourceData?.defaultSource?.id ?? null
+          selectedEventSource(
+            sourceOptions,
+            cleanEventData,
+            null,
+            sourceData?.defaultSource
+          )?.id ?? null
         );
 
         if (activeEvent.id !== 'new') {
@@ -350,6 +294,7 @@ export function EventModal() {
         const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
 
         const newEvent = {
+          requestId: newCalendarCreationRequestId(),
           title: '',
           description: '',
           start_at: now.toISOString(),
@@ -372,61 +317,38 @@ export function EventModal() {
     },
   });
 
-  // Handle manual event save
+  const draftSave = useCalendarDraftSave({
+    draft: event,
+    original: activeEvent,
+    buildPayload: () =>
+      eventModalSavePayload(
+        event,
+        activeEvent,
+        sourceInputFromOption(selectedSourceOption),
+        eventSourceChanged(sourceOptions, activeEvent ?? {}, selectedSourceId)
+      ),
+    addEvent,
+    updateEvent,
+    closeModal,
+    setIsSaving,
+    isSaving,
+    source: selectedSourceOption,
+    wsId,
+    onError: () =>
+      toast({
+        title: 'Error',
+        description: 'Failed to save or sync event. Please try again.',
+        variant: 'destructive',
+      }),
+  });
   const handleManualSave = async () => {
     if (!event.start_at || !event.end_at) return;
-
-    const startDate = new Date(event.start_at);
-    const endDate = new Date(event.end_at);
-
-    if (endDate <= startDate) {
+    if (new Date(event.end_at) <= new Date(event.start_at)) {
       setDateError('End date must be after start date');
       return;
     }
-
     setDateError(null);
-    setIsSaving(true);
-
-    try {
-      // Clean event data to only include fields that should be updated
-      const eventData: Partial<CalendarEvent> = {
-        title: event.title || '',
-        description: event.description || '',
-        start_at: event.start_at,
-        end_at: event.end_at,
-        color: event.color || 'BLUE',
-        location: event.location || '',
-        locked: event.locked || false,
-        source: sourceInputFromOption(selectedSourceOption),
-      };
-
-      if (activeEvent?.id === 'new') {
-        const saved = await addEvent(eventData as Omit<CalendarEvent, 'id'>);
-        if (!saved?.id) throw new Error();
-      } else if (activeEvent?.id) {
-        // For multi-day events, always use the original event ID
-        // The activeEvent should already contain the original event from the database
-        const eventId = activeEvent.id;
-
-        if (eventId && eventId !== 'new') {
-          await updateEvent(eventId, eventData);
-        } else {
-          throw new Error('Invalid event ID');
-        }
-      } else {
-        throw new Error('No event to save');
-      }
-
-      closeModal();
-    } catch (_) {
-      toast({
-        title: 'Error',
-        description: 'Failed to save or sync event. Please try again.',
-        variant: 'destructive',
-      });
-    } finally {
-      setIsSaving(false);
-    }
+    await draftSave.save();
   };
 
   // Handle AI event generation
@@ -993,7 +915,13 @@ export function EventModal() {
                       </div>
                       <Select
                         value={selectedSourceOption?.id}
-                        onValueChange={(value) => setSelectedSourceId(value)}
+                        onValueChange={(value) => {
+                          setSelectedSourceId(value);
+                          setEvent((previous) => ({
+                            ...previous,
+                            providerColor: undefined,
+                          }));
+                        }}
                         disabled={sourceOptions.length === 0 || isSaving}
                       >
                         <SelectTrigger id="event-source" className="w-full">
@@ -1087,10 +1015,21 @@ export function EventModal() {
 
                       {/* Color and Options Row */}
                       <div className="flex items-end justify-between gap-4">
-                        <EventColorPicker
+                        <ProviderColorPicker
+                          wsId={wsId}
+                          source={selectedSourceOption}
                           value={event.color || 'BLUE'}
-                          onChange={(value) =>
-                            setEvent({ ...event, color: value })
+                          metadata={event.scheduling_metadata}
+                          choice={event.providerColor}
+                          onNativeChange={(value) =>
+                            setEvent({
+                              ...event,
+                              color: value,
+                              providerColor: undefined,
+                            })
+                          }
+                          onProviderChange={(providerColor) =>
+                            setEvent({ ...event, providerColor })
                           }
                         />
                         <button
@@ -1147,6 +1086,7 @@ export function EventModal() {
 
                 {/* Action Buttons */}
                 <div className="mt-auto border-t p-2">
+                  {draftSave.recoveryNotice}
                   <div className="flex justify-between">
                     {isEditing ? (
                       <Button

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

@@ -0,0 +1,40 @@
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import { expect, it } from 'vitest';
+import { calendarEventUpdatePayload } from '../../../../hooks/calendar-event-write-payload';
+import { eventSavePayload } from './event-save-payload';
+
+const original = {
+  id: 'saved',
+  title: 'Synthetic',
+  description: '',
+  location: '',
+  start_at: '2026-10-02T10:00:00Z',
+  end_at: '2026-10-02T11:00:00Z',
+  color: 'BLUE',
+  locked: false,
+} as CalendarEvent;
+it('sends only a provider color command for an unchanged existing event', () => {
+  const providerColor = { connectionId: 'owned', kind: 'inherit' as const };
+  const payload = eventSavePayload(
+    {
+      ...original,
+      providerColor,
+      source: { provider: 'google', connectionId: 'owned' },
+    },
+    original,
+    false
+  );
+  expect(payload).toEqual({ providerColor });
+  expect(calendarEventUpdatePayload(payload)).toEqual({ providerColor });
+});
+it('does not include unchanged native color or source with an ordinary title edit', () => {
+  expect(eventSavePayload({ ...original, title: 'Changed' }, original)).toEqual(
+    { title: 'Changed' }
+  );
+});
+it('includes a calendar transfer only when its source actually changed', () => {
+  const source = { provider: 'google' as const, connectionId: 'new' };
+  expect(eventSavePayload({ ...original, source }, original, true)).toEqual({
+    source,
+  });
+});