@agent-native/core 0.159.3 → 0.160.0

package/corpus/templates/calendar/app/components/calendar/WeekView.tsx

@@ -5,22 +5,16 @@ import {
   IconBuilding,
   IconHome,
   IconMapPin,
+  IconPlus,
 } from "@tabler/icons-react";
 import {
   startOfWeek,
   endOfWeek,
   eachDayOfInterval,
   eachHourOfInterval,
-  isSameDay,
-  isToday,
   format,
-  parseISO,
-  differenceInMinutes,
-  startOfDay,
   set,
-  addDays,
   addMinutes,
-  min,
 } from "date-fns";
 import { useState, useEffect, useRef, useMemo, useCallback, memo } from "react";
 
@@ -42,6 +36,13 @@ import {
   layoutAllDayEvents,
   partitionAllDayEvents,
 } from "@/lib/all-day-layout";
+import {
+  dateToCalendarDateKey,
+  getBrowserTimezone,
+  getDateKeyInTimezone,
+  getEventDateKey,
+  getEventSegmentForCalendarDay,
+} from "@/lib/calendar-timezone";
 import { getEventDisplayColor, allOtherDeclined } from "@/lib/event-colors";
 import {
   computeTimedEventLayout,
@@ -72,6 +73,7 @@ import { shouldRenderWeekDragSegment } from "./week-drag-segment";
 interface WeekViewProps {
   events: CalendarEvent[];
   selectedDate: Date;
+  timezone?: string;
   onDateSelect: (date: Date) => void;
   onDeleteEvent: (eventId: string) => void;
   onEventTimeChange?: (eventId: string, newStart: Date, newEnd: Date) => void;
@@ -81,6 +83,7 @@ interface WeekViewProps {
     endTime: string,
     options?: { explicitDuration?: boolean },
   ) => void;
+  onCreateWorkingLocation?: (date: Date) => void;
   quickEditEventId?: string | null;
   onQuickEditSave?: (
     eventId: string,
@@ -148,7 +151,7 @@ function minutesToTimeString(totalMinutes: number): string {
 /** Convert minutes-from-START_HOUR on a given day into a Date, for ghost label formatting */
 function minutesToDate(day: Date, totalMinutes: number): Date {
   return addMinutes(
-    set(startOfDay(day), { hours: START_HOUR, minutes: 0, seconds: 0 }),
+    set(day, { hours: START_HOUR, minutes: 0, seconds: 0 }),
     totalMinutes,
   );
 }
@@ -173,15 +176,10 @@ function formatEventTime(start: Date, end: Date): string {
   return `${startWithAmPm}\u2013${endStr}`;
 }
 
-function getSegmentStyle(event: CalendarEvent, day: Date) {
-  const evStart = parseISO(event.start);
-  const evEnd = parseISO(event.end);
-  const dayBase = set(startOfDay(day), { hours: START_HOUR });
-  const dayEnd = addDays(dayBase, 1);
-  const segStart = evStart > dayBase ? evStart : dayBase;
-  const segEnd = min([evEnd, dayEnd]);
-  const topMinutes = Math.max(0, differenceInMinutes(segStart, dayBase));
-  const durationMinutes = Math.max(15, differenceInMinutes(segEnd, segStart));
+function getSegmentStyle(event: CalendarEvent, day: Date, timezone: string) {
+  const segment = getEventSegmentForCalendarDay(event, day, timezone);
+  const topMinutes = segment?.topMinutes ?? 0;
+  const durationMinutes = Math.max(15, segment?.durationMinutes ?? 15);
   return {
     top: `${(topMinutes / 60) * HOUR_HEIGHT}px`,
     height: `${(durationMinutes / 60) * HOUR_HEIGHT}px`,
@@ -192,6 +190,7 @@ interface WeekEventCardProps {
   event: CalendarEvent;
   day: Date;
   dayIndex: number;
+  timezone: string;
   layout: Map<string, TimedEventLayout>;
   now: Date;
   prefs: ViewPreferences;
@@ -246,6 +245,7 @@ const WeekEventCard = memo(function WeekEventCard({
   event,
   day,
   dayIndex,
+  timezone,
   layout,
   now,
   prefs,
@@ -272,6 +272,9 @@ const WeekEventCard = memo(function WeekEventCard({
   onPopoverOpenChange,
 }: WeekEventCardProps) {
   const t = useT();
+  const workingLocationLabels = createWorkingLocationDisplayLabels(t);
+  const title = getWorkingLocationChipLabel(event, workingLocationLabels);
+  const ariaTitle = getWorkingLocationTitle(event, workingLocationLabels);
   const li = layout.get(event.id) ?? {
     left: 0,
     width: 100,
@@ -284,12 +287,10 @@ const WeekEventCard = memo(function WeekEventCard({
     overrideTop !== null && overrideHeight !== null && overrideDayIndex !== null
       ? { top: overrideTop, height: overrideHeight, dayIndex: overrideDayIndex }
       : null;
-  const start = parseISO(event.start);
-  const end = parseISO(event.end);
-  const dayBase = startOfDay(day);
-  const segDayEnd = addDays(dayBase, 1);
-  const isStart = isSameDay(start, day);
-  const isEnd = end <= segDayEnd;
+  const segment = getEventSegmentForCalendarDay(event, day, timezone);
+  const isStart =
+    getEventDateKey(event, timezone) === dateToCalendarDateKey(day);
+  const isEnd = segment?.endsOnDay ?? true;
   const isDragPreviewSegment =
     isBeingDragged && overrides?.dayIndex === dayIndex;
   const segmentStartsHere = isStart || isDragPreviewSegment;
@@ -321,26 +322,19 @@ const WeekEventCard = memo(function WeekEventCard({
         top: `${overrides.top}px`,
         height: `${overrides.height}px`,
       }
-    : getSegmentStyle(event, day);
+    : getSegmentStyle(event, day, timezone);
   const color = getEventDisplayColor(event, prefs);
-  const segStart = isStart ? start : dayBase;
-  const segEnd = min([end, segDayEnd]);
   const durationMin = overrides
     ? (overrides.height / HOUR_HEIGHT) * 60
-    : differenceInMinutes(segEnd, segStart);
+    : (segment?.durationMinutes ?? 15);
   // Compute display times (use drag overrides if active)
   const displayStart = overrides
-    ? addMinutes(
-        set(startOfDay(day), {
-          hours: START_HOUR,
-          minutes: 0,
-          seconds: 0,
-        }),
-        (overrides.top / HOUR_HEIGHT) * 60,
-      )
-    : start;
-  const displayEnd = overrides ? addMinutes(displayStart, durationMin) : end;
-  const isPast = end < now;
+    ? minutesToDate(day, START_HOUR * 60 + (overrides.top / HOUR_HEIGHT) * 60)
+    : minutesToDate(day, segment?.startMinutes ?? 0);
+  const displayEnd = overrides
+    ? addMinutes(displayStart, durationMin)
+    : minutesToDate(day, segment?.endMinutes ?? durationMin);
+  const isPast = new Date(event.end) < now;
   const isDeclined = event.responseStatus === "declined";
   const allOthersOut = allOtherDeclined(event);
 
@@ -367,10 +361,8 @@ const WeekEventCard = memo(function WeekEventCard({
       )}
       aria-label={
         event.ownerName || event.overlayEmail
-          ? `${event.title}, ${
-              event.ownerName || event.overlayEmail
-            }'s calendar`
-          : event.title
+          ? `${ariaTitle}, ${event.ownerName || event.overlayEmail}'s calendar`
+          : ariaTitle
       }
       style={{
         ...style,
@@ -429,7 +421,7 @@ const WeekEventCard = memo(function WeekEventCard({
               !isPast && !isDeclined && "font-semibold",
             )}
           >
-            {event.title}
+            {title}
           </span>
         </div>
       ) : (
@@ -451,7 +443,7 @@ const WeekEventCard = memo(function WeekEventCard({
               />
             )}
             <EventStatusIcon event={event} className="shrink-0" />
-            <span className="truncate">{event.title}</span>
+            <span className="truncate">{title}</span>
           </div>
           {segmentStartsHere && (
             <div
@@ -502,6 +494,7 @@ const WeekEventCard = memo(function WeekEventCard({
   return (
     <EventDetailPopover
       event={event}
+      timezone={timezone}
       onDelete={onDeleteEvent}
       isDraft={isDraft}
       defaultOpen={defaultOpen}
@@ -548,10 +541,12 @@ const WeekCreateGhost = memo(function WeekCreateGhost({
 export const WeekView = memo(function WeekView({
   events,
   selectedDate,
+  timezone = getBrowserTimezone(),
   onDateSelect,
   onDeleteEvent,
   onEventTimeChange,
   onClickTimeSlot,
+  onCreateWorkingLocation,
   quickEditEventId,
   onQuickEditSave,
   onQuickEditCancel,
@@ -664,8 +659,8 @@ export const WeekView = memo(function WeekView({
     [allDayEvents],
   );
   const workingLocationLayout = useMemo(
-    () => layoutAllDayEvents(workingLocations, days),
-    [days, workingLocations],
+    () => layoutAllDayEvents(workingLocations, days, timezone),
+    [days, timezone, workingLocations],
   );
   const workingLocationGroups = useMemo(
     () =>
@@ -684,29 +679,45 @@ export const WeekView = memo(function WeekView({
     [prefs, workingLocationLabels, workingLocationLayout.placements],
   );
   const regularAllDayLayout = useMemo(() => {
-    return layoutAllDayEvents(regularEvents, days);
-  }, [days, regularEvents]);
+    return layoutAllDayEvents(regularEvents, days, timezone);
+  }, [days, regularEvents, timezone]);
 
   // Pre-compute timed events per day with layout — include events spanning into this day
   const dayData = useMemo(() => {
     return days.map((day) => {
-      const dayStart = startOfDay(day);
-      const dayEnd = addDays(dayStart, 1);
-      const dayEvents = timedEvents.filter((e) => {
-        const evStart = parseISO(e.start);
-        const evEnd = parseISO(e.end);
-        return evStart < dayEnd && evEnd > dayStart;
-      });
-      const layout = computeTimedEventLayout(dayEvents, day);
+      const dayEvents = timedEvents.filter((event) =>
+        getEventSegmentForCalendarDay(event, day, timezone),
+      );
+      const layout = computeTimedEventLayout(dayEvents, day, timezone);
       return { day, events: dayEvents, layout };
     });
-  }, [days, timedEvents]);
+  }, [days, timedEvents, timezone]);
 
   // Current time indicator
-  const nowMinutes = (now.getHours() - START_HOUR) * 60 + now.getMinutes();
+  const nowParts = getDateKeyInTimezone(now, timezone)
+    ? new Intl.DateTimeFormat("en-US", {
+        timeZone: timezone,
+        hourCycle: "h23",
+        hour: "2-digit",
+        minute: "2-digit",
+      })
+        .formatToParts(now)
+        .reduce(
+          (parts, part) => {
+            if (part.type === "hour") parts.hour = Number(part.value);
+            if (part.type === "minute") parts.minute = Number(part.value);
+            return parts;
+          },
+          { hour: 0, minute: 0 },
+        )
+    : null;
+  const nowMinutes = nowParts
+    ? (nowParts.hour - START_HOUR) * 60 + nowParts.minute
+    : -1;
   const nowTop = (nowMinutes / 60) * HOUR_HEIGHT;
   const showNowIndicator =
     nowMinutes >= 0 && nowMinutes <= (END_HOUR - START_HOUR) * 60;
+  const currentDateKey = getDateKeyInTimezone(now, timezone);
 
   const hasWorkingLocations = workingLocationLayout.rowCount > 0;
   const hasRegularAllDayEvents = regularAllDayLayout.rowCount > 0;
@@ -774,7 +785,10 @@ export const WeekView = memo(function WeekView({
     function nameForToken(token: "shortGeneric" | "longGeneric" | "short") {
       try {
         return (
-          new Intl.DateTimeFormat("en-US", { timeZoneName: token })
+          new Intl.DateTimeFormat("en-US", {
+            timeZone: timezone,
+            timeZoneName: token,
+          })
             .formatToParts(now)
             .find((p) => p.type === "timeZoneName")?.value ?? ""
         );
@@ -783,10 +797,7 @@ export const WeekView = memo(function WeekView({
       }
     }
 
-    let iana = "";
-    try {
-      iana = Intl.DateTimeFormat().resolvedOptions().timeZone ?? "";
-    } catch {}
+    const iana = timezone;
 
     const longGeneric = nameForToken("longGeneric");
     let shortGeneric = nameForToken("shortGeneric");
@@ -804,7 +815,7 @@ export const WeekView = memo(function WeekView({
       tzLong: longGeneric || iana,
       tzIana: iana,
     };
-  }, []);
+  }, [now, timezone]);
 
   // Drag-to-move and drag-to-resize
   const handleEventTimeChange = useCallback(
@@ -827,6 +838,7 @@ export const WeekView = memo(function WeekView({
     days,
     onEventTimeChange: handleEventTimeChange,
     events,
+    timezone,
   });
 
   const canDrag = !!onEventTimeChange;
@@ -934,30 +946,53 @@ export const WeekView = memo(function WeekView({
           </div>
 
           {/* Day columns */}
-          {days.map((day) => (
-            <div
-              key={day.toISOString()}
-              onClick={() => onDateSelect(day)}
-              className={cn(
-                "flex flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 border-r border-border py-1.5 sm:flex-row sm:gap-1.5 sm:py-2.5 last:border-r-0",
-                isToday(day) ? "bg-primary/5" : "hover:bg-accent/40",
-              )}
-            >
-              <span className="text-[10px] font-medium text-muted-foreground sm:text-xs">
-                {isMobile ? format(day, "EEEEE") : format(day, "EEE")}
-              </span>
-              <span
+          {days.map((day) => {
+            const isCurrentDay = dateToCalendarDateKey(day) === currentDateKey;
+            return (
+              <div
+                key={day.toISOString()}
+                onClick={() => onDateSelect(day)}
                 className={cn(
-                  "flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold sm:h-7 sm:w-7 sm:text-sm",
-                  isToday(day)
-                    ? "bg-foreground text-background"
-                    : "text-foreground",
+                  "group/day relative flex flex-1 cursor-pointer flex-col items-center justify-center gap-0.5 border-r border-border py-1.5 sm:flex-row sm:gap-1.5 sm:py-2.5 last:border-r-0",
+                  isCurrentDay ? "bg-primary/5" : "hover:bg-accent/40",
                 )}
               >
-                {format(day, "d")}
-              </span>
-            </div>
-          ))}
+                <span className="text-[10px] font-medium text-muted-foreground sm:text-xs">
+                  {isMobile ? format(day, "EEEEE") : format(day, "EEE")}
+                </span>
+                <span
+                  className={cn(
+                    "flex h-6 w-6 items-center justify-center rounded-full text-xs font-semibold sm:h-7 sm:w-7 sm:text-sm",
+                    isCurrentDay
+                      ? "bg-foreground text-background"
+                      : "text-foreground",
+                  )}
+                >
+                  {format(day, "d")}
+                </span>
+                {onCreateWorkingLocation && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        aria-label={t("calendarView.addWorkingLocation")}
+                        className="absolute right-1 top-1 flex size-5 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/day:opacity-100"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onCreateWorkingLocation(day);
+                        }}
+                      >
+                        <IconPlus aria-hidden="true" className="size-3.5" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      {t("calendarView.addWorkingLocation")}
+                    </TooltipContent>
+                  </Tooltip>
+                )}
+              </div>
+            );
+          })}
           {timeGridScrollbarWidth > 0 && (
             <div
               aria-hidden="true"
@@ -1065,6 +1100,7 @@ export const WeekView = memo(function WeekView({
                           <EventDetailPopover
                             key={`${event.overlayEmail ?? event.accountEmail ?? "primary"}:${event.id}`}
                             event={event}
+                            timezone={timezone}
                             onDelete={onDeleteEvent}
                             isDraft={draftEventIds.includes(event.id)}
                             defaultOpen={quickEditEventId === event.id}
@@ -1145,6 +1181,7 @@ export const WeekView = memo(function WeekView({
                       <EventDetailPopover
                         key={`${event.overlayEmail ?? event.accountEmail ?? "primary"}:${event.id}`}
                         event={event}
+                        timezone={timezone}
                         onDelete={onDeleteEvent}
                         isDraft={draftEventIds.includes(event.id)}
                         defaultOpen={quickEditEventId === event.id}
@@ -1245,7 +1282,7 @@ export const WeekView = memo(function WeekView({
 
           {/* Day columns */}
           {dayData.map(({ day, events: dayEvents, layout }, dayIndex) => {
-            const isCurrentDay = isToday(day);
+            const isCurrentDay = dateToCalendarDateKey(day) === currentDateKey;
 
             // Collect events that were dragged into this column from another day
             const draggedInEvents: CalendarEvent[] = [];
@@ -1265,7 +1302,7 @@ export const WeekView = memo(function WeekView({
               (event) => {
                 const overrides = getDragOverrides(event.id);
                 return (
-                  getOutOfOfficeSegment(event, day) !== null ||
+                  getOutOfOfficeSegment(event, day, timezone) !== null ||
                   (dragEventId === event.id && overrides?.dayIndex === dayIndex)
                 );
               },
@@ -1353,12 +1390,13 @@ export const WeekView = memo(function WeekView({
                     const isBeingDragged = dragEventId === event.id;
                     const overrides = getDragOverrides(event.id);
                     const canonicalDayIndex =
-                      getFirstVisibleOutOfOfficeDayIndex(event, days);
+                      getFirstVisibleOutOfOfficeDayIndex(event, days, timezone);
                     return (
                       <OutOfOfficeEvent
                         key={`${event._tempId ?? event.id}:${day.toISOString()}`}
                         event={event}
                         day={day}
+                        timezone={timezone}
                         hourHeight={HOUR_HEIGHT}
                         color={
                           getEventDisplayColor(event, prefs) ??
@@ -1451,6 +1489,7 @@ export const WeekView = memo(function WeekView({
                         event={event}
                         day={day}
                         dayIndex={dayIndex}
+                        timezone={timezone}
                         layout={layout}
                         now={now}
                         prefs={prefs}

package/corpus/templates/calendar/app/components/calendar/WorkingLocationEditor.tsx

@@ -21,6 +21,7 @@ import {
 interface WorkingLocationEditorProps {
   event: CalendarEvent;
   isRecurring: boolean;
+  isDraft?: boolean;
   readOnly?: boolean;
   disabled?: boolean;
   onSave: (selection: WorkingLocationSelection) => void;
@@ -40,6 +41,7 @@ function initialLabels(event: CalendarEvent) {
 export function WorkingLocationEditor({
   event,
   isRecurring,
+  isDraft = false,
   readOnly = false,
   disabled = false,
   onSave,
@@ -54,18 +56,42 @@ export function WorkingLocationEditor({
   const detail = getWorkingLocationDetail(event, workingLocationLabels);
 
   useEffect(() => {
-    setType(getWorkingLocationType(event));
-    setLabels(initialLabels(event));
-    setScope("single");
-  }, [currentLabel, currentType, event.id]);
+    setType(currentType);
+    setLabels((current) => {
+      const incoming = initialLabels(event);
+      if (!isDraft) return incoming;
+      return {
+        officeLocation:
+          currentType === "officeLocation"
+            ? incoming.officeLocation
+            : current.officeLocation,
+        customLocation:
+          currentType === "customLocation"
+            ? incoming.customLocation
+            : current.customLocation,
+      };
+    });
+    if (!isDraft) setScope("single");
+  }, [currentLabel, currentType, event.id, isDraft]);
 
   const label = type === "homeOffice" ? "" : labels[type];
-  const isValid = type === "homeOffice" || label.trim().length > 0;
+  const isValid = type !== "customLocation" || label.trim().length > 0;
   const isDirty = useMemo(
     () => type !== currentType || label.trim() !== currentLabel.trim(),
     [currentLabel, currentType, label, type],
   );
 
+  const commitDraft = (
+    nextType: WorkingLocationKind,
+    nextLabels: Record<LabeledWorkingLocation, string>,
+  ) => {
+    if (!isDraft) return;
+    onSave({
+      type: nextType,
+      label: nextType === "homeOffice" ? "" : nextLabels[nextType],
+    });
+  };
+
   if (readOnly) {
     return (
       <div className="flex items-start gap-3 py-1.5">
@@ -108,7 +134,11 @@ export function WorkingLocationEditor({
       </div>
       <RadioGroup
         value={type}
-        onValueChange={(value) => setType(value as WorkingLocationKind)}
+        onValueChange={(value) => {
+          const nextType = value as WorkingLocationKind;
+          setType(nextType);
+          commitDraft(nextType, labels);
+        }}
         className="grid grid-cols-3 gap-1.5"
         aria-label={t("eventForm.workingLocation")}
         disabled={disabled}
@@ -143,12 +173,14 @@ export function WorkingLocationEditor({
         <div className="mt-2">
           <Input
             value={labels[type]}
-            onChange={(event) =>
-              setLabels((current) => ({
-                ...current,
-                [type]: event.target.value,
-              }))
-            }
+            onChange={(inputEvent) => {
+              const nextLabels = {
+                ...labels,
+                [type]: inputEvent.target.value,
+              };
+              setLabels(nextLabels);
+              commitDraft(type, nextLabels);
+            }}
             aria-label={
               type === "officeLocation"
                 ? t("eventForm.office")
@@ -166,7 +198,7 @@ export function WorkingLocationEditor({
         </div>
       )}
 
-      {isRecurring && (
+      {isRecurring && !isDraft && (
         <div className="mt-2">
           <p className="mb-1 text-[10px] font-medium text-muted-foreground">
             {t("eventForm.applyTo")}
@@ -205,18 +237,20 @@ export function WorkingLocationEditor({
         </div>
       )}
 
-      <div className="mt-2 flex justify-end">
-        <Button
-          size="sm"
-          className="h-7 text-xs"
-          disabled={disabled || !isValid || !isDirty}
-          onClick={() =>
-            onSave({ type, label, scope: isRecurring ? scope : undefined })
-          }
-        >
-          {t("eventForm.save")}
-        </Button>
-      </div>
+      {!isDraft && (
+        <div className="mt-2 flex justify-end">
+          <Button
+            size="sm"
+            className="h-7 text-xs"
+            disabled={disabled || !isValid || !isDirty}
+            onClick={() =>
+              onSave({ type, label, scope: isRecurring ? scope : undefined })
+            }
+          >
+            {t("eventForm.save")}
+          </Button>
+        </div>
+      )}
     </div>
   );
 }