feat(api): improve calendar data structure

apps/web/src/components/calendar-view.tsx

@@ -70,8 +70,8 @@ function CalendarContent({ scrollContainerRef }: CalendarContentProps) {
     return pastFiltered.filter((eventItem) => {
       const preference = getCalendarPreference(
         calendarPreferences,
-        eventItem.event.accountId,
-        eventItem.event.calendarId,
+        eventItem.event.calendar.provider.accountId,
+        eventItem.event.calendar.id,
       );
 
       return !(preference?.hidden === true);

apps/web/src/components/calendar/context/calendar-colors-provider.tsx

@@ -26,12 +26,12 @@ export function CalendarColorsProvider({
     for (const calendar of calendars) {
       const preference = getCalendarPreference(
         calendarPreferences,
-        calendar.accountId,
+        calendar.provider.accountId,
         calendar.id,
       );
 
       document.documentElement.style.setProperty(
-        calendarColorVariable(calendar.accountId, calendar.id),
+        calendarColorVariable(calendar.provider.accountId, calendar.id),
         preference?.color ?? calendar.color ?? "var(--color-muted-foreground)",
       );
     }

apps/web/src/components/calendar/event/event-context-menu.tsx

@@ -76,12 +76,14 @@ function EventContextMenuCalendarList({
   const updateAction = usePartialUpdateAction();
 
   const moveEvent = React.useCallback(
-    (accountId: string, calendarId: string) => {
+    (calendar: {
+      id: string;
+      provider: { id: "google" | "microsoft"; accountId: string };
+    }) => {
       updateAction({
         changes: {
           id: event.id,
-          accountId,
-          calendarId,
+          calendar,
           type: event.type,
         },
         notify: true,
@@ -98,14 +100,16 @@ function EventContextMenuCalendarList({
             <Tooltip key={index}>
               <TooltipTrigger asChild>
                 <CalendarRadioItem
-                  value={`${calendar.accountId}-${calendar.id}`}
+                  value={`${calendar.provider.accountId}-${calendar.id}`}
                   style={
                     {
                       "--calendar-color": calendar.color,
                     } as React.CSSProperties
                   }
                   disabled={!canMoveBetweenCalendars(event, calendar)}
-                  onSelect={() => moveEvent(calendar.accountId, calendar.id)}
+                  onSelect={() =>
+                    moveEvent({ id: calendar.id, provider: calendar.provider })
+                  }
                 />
               </TooltipTrigger>
               <TooltipContent className="w-full max-w-48" sideOffset={8}>
@@ -158,7 +162,9 @@ export function EventContextMenu({ event, children }: EventContextMenuProps) {
     <ContextMenu>
       {children}
       <ContextMenuContent className="w-64">
-        <ContextMenuRadioGroup value={`${event.accountId}-${event.calendarId}`}>
+        <ContextMenuRadioGroup
+          value={`${event.calendar.provider.accountId}-${event.calendar.id}`}
+        >
           <EventContextMenuCalendarList event={event} />
         </ContextMenuRadioGroup>
 

apps/web/src/components/calendar/event/event-item.tsx

@@ -124,7 +124,7 @@ export function EventItem({
 
   const color =
     item.event.color ??
-    `var(${calendarColorVariable(item.event.accountId, item.event.calendarId)}, var(--color-muted-foreground))`;
+    `var(${calendarColorVariable(item.event.calendar.provider.accountId, item.event.calendar.id)}, var(--color-muted-foreground))`;
 
   if (view === "month") {
     return (

apps/web/src/components/calendar/flows/delete-event/delete-queue-provider.tsx

@@ -41,8 +41,7 @@ export function DeleteQueueProvider({ children }: DeleteQueueProviderProps) {
 
       deleteMutation.mutate(
         {
-          accountId: item.event.accountId,
-          calendarId: item.event.calendarId,
+          calendar: item.event.calendar,
           eventId,
           sendUpdate: item.notify,
         },

apps/web/src/components/calendar/flows/update-event/utils.ts

@@ -47,8 +47,9 @@ export function isMovedBetweenCalendars(
   previous: CalendarEvent,
 ) {
   return (
-    updated.accountId !== previous.accountId ||
-    updated.calendarId !== previous.calendarId
+    updated.calendar.provider.accountId !==
+      previous.calendar.provider.accountId ||
+    updated.calendar.id !== previous.calendar.id
   );
 }
 
@@ -76,8 +77,7 @@ export function buildUpdateEvent(
       ...event,
       ...(isCalendarChanged
         ? {
-            accountId: previous.accountId,
-            calendarId: previous.calendarId,
+            calendar: previous.calendar,
           }
         : {}),
       ...(options.sendUpdate
@@ -92,14 +92,8 @@ export function buildUpdateEvent(
     ...(isCalendarChanged
       ? {
           move: {
-            source: {
-              accountId: previous.accountId,
-              calendarId: previous.calendarId,
-            },
-            destination: {
-              accountId: event.accountId,
-              calendarId: event.calendarId,
-            },
+            source: previous.calendar,
+            destination: event.calendar,
           },
         }
       : {}),
@@ -122,8 +116,7 @@ export function buildUpdateSeries(
       ...event,
       ...(isCalendarChanged
         ? {
-            accountId: previous.accountId,
-            calendarId: previous.calendarId,
+            calendar: previous.calendar,
           }
         : {}),
       ...(options.sendUpdate
@@ -140,14 +133,8 @@ export function buildUpdateSeries(
     ...(isCalendarChanged
       ? {
           move: {
-            source: {
-              accountId: previous.accountId,
-              calendarId: previous.calendarId,
-            },
-            destination: {
-              accountId: event.accountId,
-              calendarId: event.calendarId,
-            },
+            source: previous.calendar,
+            destination: event.calendar,
           },
         }
       : {}),

apps/web/src/components/calendar/header/calendar-picker/calendar-delete-dialog.tsx

@@ -44,7 +44,7 @@ export function CalendarDeleteDialog() {
 
   const onDelete = () => {
     mutate({
-      accountId: calendar.accountId,
+      provider: calendar.provider,
       calendarId: calendar.id,
     });
   };

apps/web/src/components/calendar/header/calendar-picker/calendar-picker-item-toggle.tsx

@@ -24,7 +24,7 @@ export function CalendarPickerItemToggle({
       data-slot="checkbox"
       style={
         {
-          "--calendar-color": `var(${calendarColorVariable(calendar.accountId, calendar.id)}, var(--color-muted-foreground))`,
+          "--calendar-color": `var(${calendarColorVariable(calendar.provider.accountId, calendar.id)}, var(--color-muted-foreground))`,
         } as React.CSSProperties
       }
       className={cn(

apps/web/src/components/calendar/header/calendar-picker/calendar-picker-item.tsx

@@ -87,15 +87,15 @@ function CalendarColorPicker() {
 
   const currentPreference = getCalendarPreference(
     calendarPreferences,
-    calendar.accountId,
+    calendar.provider.accountId,
     calendar.id,
   );
 
   const currentColor = currentPreference?.color ?? calendar.color;
 
   const onColorChange = (newColor: string) => {
     setCalendarPreferences((prev) =>
-      setCalendarPreference(prev, calendar.accountId, calendar.id, {
+      setCalendarPreference(prev, calendar.provider.accountId, calendar.id, {
         color: newColor,
       }),
     );
@@ -126,7 +126,7 @@ function useCalendarVisibility() {
 
   const preference = getCalendarPreference(
     calendarPreferences,
-    calendar.accountId,
+    calendar.provider.accountId,
     calendar.id,
   );
 
@@ -135,12 +135,12 @@ function useCalendarVisibility() {
   const setVisible = React.useCallback(
     (visible: boolean) => {
       setCalendarPreferences((prev) =>
-        setCalendarPreference(prev, calendar.accountId, calendar.id, {
+        setCalendarPreference(prev, calendar.provider.accountId, calendar.id, {
           hidden: !visible,
         }),
       );
     },
-    [setCalendarPreferences, calendar.accountId, calendar.id],
+    [setCalendarPreferences, calendar.provider.accountId, calendar.id],
   );
 
   return { visible, setVisible };

apps/web/src/components/calendar/header/calendar-picker/calendar-picker.tsx

@@ -52,7 +52,7 @@ function VisibleCalendarItem({
       )}
       style={
         {
-          "--calendar-color": `var(${calendarColorVariable(calendar.accountId, calendar.id)}, var(--color-muted-foreground))`,
+          "--calendar-color": `var(${calendarColorVariable(calendar.provider.accountId, calendar.id)}, var(--color-muted-foreground))`,
         } as React.CSSProperties
       }
     />
@@ -75,7 +75,7 @@ function VisibleCalendars({ className, calendars }: VisibleCalendarProps) {
     <div className={cn("flex -space-x-1", className)}>
       {calendars.slice(0, Math.min(calendars.length, 3)).map((calendar) => (
         <VisibleCalendarItem
-          key={`${calendar.accountId}.${calendar.id}`}
+          key={`${calendar.provider.accountId}.${calendar.id}`}
           calendar={calendar}
         />
       ))}
@@ -96,7 +96,7 @@ function CalendarPickerContent() {
       .filter((calendar) => {
         const preference = getCalendarPreference(
           calendarPreferences,
-          calendar.accountId,
+          calendar.provider.accountId,
           calendar.id,
         );
         return !preference?.hidden;
@@ -154,7 +154,7 @@ function CalendarPickerContent() {
                   {account.calendars.map((calendar) => (
                     <CalendarPickerItem
                       calendar={calendar}
-                      key={`${calendar.accountId}-${calendar.id}`}
+                      key={`${calendar.provider.accountId}-${calendar.id}`}
                     >
                       <CalendarPickerItemContent>
                         <CalendarPickerItemActionsMenu />

apps/web/src/components/calendar/header/calendar-picker/calendar-rename-dialog.tsx

@@ -49,7 +49,7 @@ export function CalendarRenameDialog() {
   const onSubmit = () => {
     mutate({
       id: calendar.id,
-      accountId: calendar.accountId,
+      provider: calendar.provider,
       name: name.trim(),
     });
   };

apps/web/src/components/calendar/hooks/use-default-calendar.ts

@@ -12,7 +12,7 @@ export function useDefaultCalendar() {
       return "var(--color-muted-foreground)";
     }
 
-    return `var(${calendarColorVariable(data?.defaultCalendar?.accountId, data?.defaultCalendar?.id)}, var(--color-muted-foreground))`;
+    return `var(${calendarColorVariable(data?.defaultCalendar?.provider.accountId, data?.defaultCalendar?.id)}, var(--color-muted-foreground))`;
   }, [data?.defaultCalendar]);
 
   return React.useMemo(() => {

apps/web/src/components/calendar/hooks/use-event-mutations.ts

@@ -75,8 +75,7 @@ export function useUpdateEventMutation() {
             ...data,
             ...(move?.destination
               ? {
-                  accountId: move.destination.accountId,
-                  calendarId: move.destination.calendarId,
+                  calendar: move.destination,
                 }
               : {}),
           };

apps/web/src/components/calendar/hooks/use-optimistic-mutations.ts

@@ -40,9 +40,10 @@ export function useCreateDraftAction() {
           ...event,
           type: "draft",
           readOnly: false,
-          providerId: defaultCalendar.providerId,
-          accountId: defaultCalendar.accountId,
-          calendarId: defaultCalendar.id,
+          calendar: {
+            id: defaultCalendar.id,
+            provider: defaultCalendar.provider,
+          },
         },
       });
 

apps/web/src/components/calendar/interfaces.ts

@@ -1,5 +1 @@
-import type { RouterOutputs } from "@/lib/trpc";
-
 export type CalendarView = "month" | "week" | "day" | "agenda";
-
-export type CalendarEvent = RouterOutputs["events"]["list"]["events"][number];

apps/web/src/components/calendar/utils/move.ts

@@ -5,8 +5,8 @@ export function canMoveBetweenCalendars(
   destination: Calendar,
 ): boolean {
   const isSameCalendar =
-    event.accountId === destination.accountId &&
-    event.calendarId === destination.id;
+    event.calendar.provider.accountId === destination.provider.accountId &&
+    event.calendar.id === destination.id;
 
   if (isSameCalendar) {
     return false;

apps/web/src/components/command-bar/context-view.tsx

@@ -18,7 +18,7 @@ import { format, formatTime } from "@/lib/utils/format";
 
 function eventColor(event: CalendarEvent) {
   return {
-    "--calendar-color": `var(${calendarColorVariable(event.accountId, event.calendarId)}, var(--color-muted-foreground))`,
+    "--calendar-color": `var(${calendarColorVariable(event.calendar.provider.accountId, event.calendar.id)}, var(--color-muted-foreground))`,
   } as React.CSSProperties;
 }
 

apps/web/src/components/command-menu/event-search-commands.tsx

@@ -45,7 +45,7 @@ export function EventSearchCommands() {
 
       const color =
         item.event.color ??
-        `var(${calendarColorVariable(item.event.accountId, item.event.calendarId)}, var(--color-muted-foreground))`;
+        `var(${calendarColorVariable(item.event.calendar.provider.accountId, item.event.calendar.id)}, var(--color-muted-foreground))`;
 
       return {
         ...item,