@agent-native/core 0.98.8 → 0.98.9

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import type { CalendarEvent } from "@shared/api";
 import { IconAlertTriangleFilled } from "@tabler/icons-react";
 
@@ -8,6 +9,12 @@ import {
 } from "@/lib/event-colors";
 import { EventStatusIcon } from "@/lib/rsvp-status";
 import { cn } from "@/lib/utils";
+import {
+  createWorkingLocationDisplayLabels,
+  getWorkingLocationChipLabel,
+  getWorkingLocationTitle,
+  isWorkingLocationEvent,
+} from "@/lib/working-location";
 
 interface EventCardProps {
   event: CalendarEvent;
@@ -30,8 +37,13 @@ export function EventCard({
   dimmed = false,
   colorPreferences,
 }: EventCardProps) {
+  const t = useT();
+  const workingLocationLabels = createWorkingLocationDisplayLabels(t);
   const accentColor = getEventDisplayColor(event, colorPreferences);
   const ownerLabel = event.ownerName || event.overlayEmail;
+  const title = getWorkingLocationChipLabel(event, workingLocationLabels);
+  const ariaTitle = getWorkingLocationTitle(event, workingLocationLabels);
+  const isWorkingLocation = isWorkingLocationEvent(event);
 
   const handleDragStart = (e: React.DragEvent) => {
     e.dataTransfer.setData("text/plain", event.id);
@@ -55,7 +67,7 @@ export function EventCard({
           event.ownerColor && "pr-3.5",
         )}
         aria-label={
-          ownerLabel ? `${event.title}, ${ownerLabel}'s calendar` : event.title
+          ownerLabel ? `${ariaTitle}, ${ownerLabel}'s calendar` : ariaTitle
         }
         style={{
           backgroundColor: `${accentColor}25`,
@@ -73,7 +85,12 @@ export function EventCard({
           />
         )}
         <EventStatusIcon event={event} />
-        <span className="truncate font-medium">{event.title}</span>
+        <span className="truncate font-medium">{title}</span>
+        {isWorkingLocation && (
+          <span className="hidden shrink-0 text-[10px] font-normal text-foreground/65 sm:inline">
+            {t("eventForm.workingLocation")}
+          </span>
+        )}
         {event.ownerColor && (
           <span
             aria-hidden="true"
@@ -98,7 +115,7 @@ export function EventCard({
         event.ownerColor && "pr-4",
       )}
       aria-label={
-        ownerLabel ? `${event.title}, ${ownerLabel}'s calendar` : event.title
+        ownerLabel ? `${ariaTitle}, ${ownerLabel}'s calendar` : ariaTitle
       }
       style={{
         backgroundColor: `${accentColor}25`,
@@ -113,8 +130,13 @@ export function EventCard({
           />
         )}
         <EventStatusIcon event={event} />
-        <span className="truncate font-medium">{event.title}</span>
+        <span className="truncate font-medium">{title}</span>
       </div>
+      {isWorkingLocation && (
+        <span className="truncate text-foreground/70">
+          {t("eventForm.workingLocation")}
+        </span>
+      )}
       {!event.allDay && (
         <span className="text-foreground/70">
           {new Date(event.start).toLocaleTimeString([], {

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

@@ -23,6 +23,7 @@ import {
   AutoGrowTextarea,
 } from "@/components/calendar/EventDescription";
 import { useGuestNotificationPrompt } from "@/components/calendar/GuestNotificationDialog";
+import { WorkingLocationEditor } from "@/components/calendar/WorkingLocationEditor";
 import { useCalendarContext } from "@/components/layout/AppLayout";
 import { Button } from "@/components/ui/button";
 import {
@@ -34,6 +35,13 @@ import {
 import { useUpdateEvent } from "@/hooks/use-events";
 import { useViewPreferences } from "@/hooks/use-view-preferences";
 import { cn } from "@/lib/utils";
+import {
+  buildWorkingLocationUpdate,
+  createWorkingLocationDisplayLabels,
+  getWorkingLocationTitle,
+  isWorkingLocationEvent,
+  type WorkingLocationSelection,
+} from "@/lib/working-location";
 
 function buildEventDetailSlotContext(event: CalendarEvent) {
   return {
@@ -111,6 +119,7 @@ export function EventDetailPanel({
   onTitleSave,
 }: EventDetailPanelProps) {
   const t = useT();
+  const workingLocationLabels = createWorkingLocationDisplayLabels(t);
   const { setEventDetailSidebar } = useCalendarContext();
   useViewPreferences();
   const isOpen = event !== null;
@@ -125,6 +134,10 @@ export function EventDetailPanel({
   const { promptGuestNotification, guestNotificationDialog } =
     useGuestNotificationPrompt();
   const isOverlay = !!event?.overlayEmail;
+  const isWorkingLocation = event ? isWorkingLocationEvent(event) : false;
+  const isRecurringEvent = !!(
+    event?.recurringEventId || event?.recurrence?.length
+  );
   const lastSavedDescriptionRef = useRef(event?.description || "");
   const meetingLink = event ? extractMeetingLink(event) : null;
   const ownerLabel = event?.ownerName || event?.overlayEmail;
@@ -247,6 +260,16 @@ export function EventDetailPanel({
     [event, promptGuestNotification, updateEvent],
   );
 
+  const handleSaveWorkingLocation = useCallback(
+    (selection: WorkingLocationSelection) => {
+      if (!event) return;
+      updateEvent.mutate(buildWorkingLocationUpdate(event, selection), {
+        onError: () => toast.error(t("calendarView.failedUpdateEvent")),
+      });
+    },
+    [event, t, updateEvent],
+  );
+
   return (
     <TooltipProvider>
       {isOpen && (
@@ -268,7 +291,9 @@ export function EventDetailPanel({
               {/* Header */}
               <div className="flex items-center justify-between px-4 py-3 border-b border-border">
                 <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-                  {t("eventForm.event")}
+                  {isWorkingLocation
+                    ? t("eventForm.workingLocation")
+                    : t("eventForm.event")}
                 </span>
                 <div className="flex items-center gap-0.5">
                   <Tooltip>
@@ -300,7 +325,7 @@ export function EventDetailPanel({
               {/* Content */}
               <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
                 {/* Title — click to edit */}
-                {isEditingTitle ? (
+                {isEditingTitle && !isWorkingLocation ? (
                   <input
                     ref={titleInputRef}
                     value={editingTitle}
@@ -331,13 +356,17 @@ export function EventDetailPanel({
                   />
                 ) : (
                   <h2
-                    className="text-lg font-semibold text-foreground leading-tight cursor-text rounded px-0.5 -mx-0.5 hover:bg-muted/50"
+                    className={cn(
+                      "-mx-0.5 rounded px-0.5 text-lg font-semibold leading-tight text-foreground",
+                      !isWorkingLocation && "cursor-text hover:bg-muted/50",
+                    )}
                     onClick={() => {
+                      if (isWorkingLocation) return;
                       setEditingTitle(event.title);
                       setIsEditingTitle(true);
                     }}
                   >
-                    {event.title}
+                    {getWorkingLocationTitle(event, workingLocationLabels)}
                   </h2>
                 )}
 
@@ -368,13 +397,20 @@ export function EventDetailPanel({
                   </div>
                 </div>
 
-                {/* Location */}
-                {event.location && (
+                {isWorkingLocation ? (
+                  <WorkingLocationEditor
+                    event={event}
+                    isRecurring={isRecurringEvent}
+                    readOnly={isOverlay}
+                    disabled={updateEvent.isPending}
+                    onSave={handleSaveWorkingLocation}
+                  />
+                ) : event.location ? (
                   <div className="flex items-start gap-2.5 text-sm text-muted-foreground">
                     <IconMapPin className="mt-0.5 h-4 w-4 shrink-0" />
                     <span>{event.location}</span>
                   </div>
-                )}
+                ) : null}
 
                 {event.overlayEmail && ownerLabel && (
                   <div className="flex items-center gap-2.5 text-sm text-muted-foreground">
@@ -391,32 +427,33 @@ export function EventDetailPanel({
                   </div>
                 )}
 
-                {meetingLink ? (
-                  <a
-                    href={safeUrl(meetingLink)}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="flex items-center justify-center rounded-lg bg-[#4965E0] px-3 py-2 text-sm font-semibold text-white hover:bg-[#5A75F0]"
-                  >
-                    <IconVideo className="mr-2 h-4 w-4 opacity-80" />
-                    {t("eventForm.joinMeeting")}
-                  </a>
-                ) : !isOverlay ? (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    className="w-full justify-center gap-1.5"
-                    disabled={updateEvent.isPending}
-                    onClick={handleAddGoogleMeet}
-                  >
-                    <IconVideo className="h-4 w-4" />
-                    {t("eventForm.googleMeet")}
-                  </Button>
-                ) : null}
+                {!isWorkingLocation &&
+                  (meetingLink ? (
+                    <a
+                      href={safeUrl(meetingLink)}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center justify-center rounded-lg bg-[#4965E0] px-3 py-2 text-sm font-semibold text-white hover:bg-[#5A75F0]"
+                    >
+                      <IconVideo className="mr-2 h-4 w-4 opacity-80" />
+                      {t("eventForm.joinMeeting")}
+                    </a>
+                  ) : !isOverlay ? (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="w-full justify-center gap-1.5"
+                      disabled={updateEvent.isPending}
+                      onClick={handleAddGoogleMeet}
+                    >
+                      <IconVideo className="h-4 w-4" />
+                      {t("eventForm.googleMeet")}
+                    </Button>
+                  ) : null)}
 
                 {/* Description — always shown, editable; hidden for overlay events with no description */}
-                {(!isOverlay || event.description) && (
+                {!isWorkingLocation && (!isOverlay || event.description) && (
                   <div className="flex items-start gap-2.5">
                     <IconAlignLeft className="mt-1.5 h-4 w-4 shrink-0 text-muted-foreground" />
                     {isOverlay ? (
@@ -446,49 +483,55 @@ export function EventDetailPanel({
                 )}
 
                 {/* Attachments */}
-                {event.attachments && event.attachments.length > 0 && (
-                  <div className="space-y-1">
-                    {event.attachments.map((att, i) => (
-                      <a
-                        key={i}
-                        href={safeUrl(att.fileUrl)}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm hover:bg-muted/50 group"
-                      >
-                        {att.iconLink ? (
-                          <img
-                            src={safeUrl(att.iconLink)}
-                            alt=""
-                            className="h-4 w-4 shrink-0"
-                          />
-                        ) : (
-                          <IconFileText className="h-4 w-4 shrink-0 text-muted-foreground" />
-                        )}
-                        <span className="truncate text-foreground">
-                          {att.title}
-                        </span>
-                        <IconExternalLink className="ml-auto h-3 w-3 shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100" />
-                      </a>
-                    ))}
-                  </div>
-                )}
+                {!isWorkingLocation &&
+                  event.attachments &&
+                  event.attachments.length > 0 && (
+                    <div className="space-y-1">
+                      {event.attachments.map((att, i) => (
+                        <a
+                          key={i}
+                          href={safeUrl(att.fileUrl)}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-2.5 rounded-lg px-2 py-1.5 text-sm hover:bg-muted/50 group"
+                        >
+                          {att.iconLink ? (
+                            <img
+                              src={safeUrl(att.iconLink)}
+                              alt=""
+                              className="h-4 w-4 shrink-0"
+                            />
+                          ) : (
+                            <IconFileText className="h-4 w-4 shrink-0 text-muted-foreground" />
+                          )}
+                          <span className="truncate text-foreground">
+                            {att.title}
+                          </span>
+                          <IconExternalLink className="ml-auto h-3 w-3 shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100" />
+                        </a>
+                      ))}
+                    </div>
+                  )}
 
                 {/* Attendees */}
-                {event.attendees && event.attendees.length > 0 && (
-                  <EventAttendeesSection
-                    event={event}
-                    canEditOptional={!isOverlay}
-                    onToggleOptional={handleToggleAttendeeOptional}
-                  />
-                )}
+                {!isWorkingLocation &&
+                  event.attendees &&
+                  event.attendees.length > 0 && (
+                    <EventAttendeesSection
+                      event={event}
+                      canEditOptional={!isOverlay}
+                      onToggleOptional={handleToggleAttendeeOptional}
+                    />
+                  )}
 
                 {/* Research Meeting */}
-                {event.attendees && event.attendees.length > 0 && (
-                  <ResearchMeetingButton event={event} />
-                )}
+                {!isWorkingLocation &&
+                  event.attendees &&
+                  event.attendees.length > 0 && (
+                    <ResearchMeetingButton event={event} />
+                  )}
 
-                {eventDetailSlotContext && (
+                {!isWorkingLocation && eventDetailSlotContext && (
                   <ExtensionSlot
                     id="calendar.event-detail.bottom"
                     context={eventDetailSlotContext}