@agent-native/core 0.98.7 → 0.98.9

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

@@ -0,0 +1,222 @@
+import { useT } from "@agent-native/core/client";
+import type { CalendarEvent } from "@shared/api";
+import { IconBuilding, IconHome, IconMapPin } from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { cn } from "@/lib/utils";
+import {
+  createWorkingLocationDisplayLabels,
+  getWorkingLocationDetail,
+  getWorkingLocationEditableLabel,
+  getWorkingLocationLabel,
+  getWorkingLocationType,
+  type WorkingLocationKind,
+  type WorkingLocationSelection,
+} from "@/lib/working-location";
+
+interface WorkingLocationEditorProps {
+  event: CalendarEvent;
+  isRecurring: boolean;
+  readOnly?: boolean;
+  disabled?: boolean;
+  onSave: (selection: WorkingLocationSelection) => void;
+}
+
+type LabeledWorkingLocation = Exclude<WorkingLocationKind, "homeOffice">;
+
+function initialLabels(event: CalendarEvent) {
+  const type = getWorkingLocationType(event);
+  const editableLabel = getWorkingLocationEditableLabel(event);
+  return {
+    officeLocation: type === "officeLocation" ? editableLabel : "",
+    customLocation: type === "customLocation" ? editableLabel : "",
+  } satisfies Record<LabeledWorkingLocation, string>;
+}
+
+export function WorkingLocationEditor({
+  event,
+  isRecurring,
+  readOnly = false,
+  disabled = false,
+  onSave,
+}: WorkingLocationEditorProps) {
+  const t = useT();
+  const workingLocationLabels = createWorkingLocationDisplayLabels(t);
+  const currentType = getWorkingLocationType(event);
+  const currentLabel = getWorkingLocationEditableLabel(event);
+  const [type, setType] = useState<WorkingLocationKind>(currentType);
+  const [labels, setLabels] = useState(() => initialLabels(event));
+  const [scope, setScope] = useState<"single" | "all">("single");
+  const detail = getWorkingLocationDetail(event, workingLocationLabels);
+
+  useEffect(() => {
+    setType(getWorkingLocationType(event));
+    setLabels(initialLabels(event));
+    setScope("single");
+  }, [currentLabel, currentType, event.id]);
+
+  const label = type === "homeOffice" ? "" : labels[type];
+  const isValid = type === "homeOffice" || label.trim().length > 0;
+  const isDirty = useMemo(
+    () => type !== currentType || label.trim() !== currentLabel.trim(),
+    [currentLabel, currentType, label, type],
+  );
+
+  if (readOnly) {
+    return (
+      <div className="flex items-start gap-3 py-1.5">
+        <IconMapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+        <div className="min-w-0">
+          <div className="truncate text-sm text-foreground">
+            {getWorkingLocationLabel(event, workingLocationLabels)}
+          </div>
+          <div className="truncate text-xs text-muted-foreground">
+            {detail || t("eventForm.workingLocation")}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const options: Array<{
+    value: WorkingLocationKind;
+    label: string;
+    icon: typeof IconHome;
+  }> = [
+    { value: "homeOffice", label: t("eventForm.home"), icon: IconHome },
+    {
+      value: "officeLocation",
+      label: t("eventForm.office"),
+      icon: IconBuilding,
+    },
+    {
+      value: "customLocation",
+      label: t("eventForm.other"),
+      icon: IconMapPin,
+    },
+  ];
+
+  return (
+    <div className="py-1.5" data-working-location-editor>
+      <div className="mb-2 flex items-center gap-2 text-sm font-medium text-foreground">
+        <IconMapPin className="size-4 text-muted-foreground" />
+        {t("eventForm.workingLocation")}
+      </div>
+      <RadioGroup
+        value={type}
+        onValueChange={(value) => setType(value as WorkingLocationKind)}
+        className="grid grid-cols-3 gap-1.5"
+        aria-label={t("eventForm.workingLocation")}
+        disabled={disabled}
+      >
+        {options.map((option) => {
+          const Icon = option.icon;
+          const id = `working-location-${event.id}-${option.value}`;
+          return (
+            <div key={option.value} className="relative">
+              <RadioGroupItem
+                id={id}
+                value={option.value}
+                className="peer sr-only"
+              />
+              <Label
+                htmlFor={id}
+                className={cn(
+                  "flex h-8 cursor-pointer items-center justify-center gap-1 rounded-md border border-border px-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground peer-data-[state=checked]:border-foreground/40 peer-data-[state=checked]:bg-muted peer-data-[state=checked]:text-foreground",
+                  "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2",
+                  disabled && "cursor-not-allowed opacity-50",
+                )}
+              >
+                <Icon className="size-3.5" />
+                <span className="truncate">{option.label}</span>
+              </Label>
+            </div>
+          );
+        })}
+      </RadioGroup>
+
+      {type !== "homeOffice" && (
+        <div className="mt-2">
+          <Input
+            value={labels[type]}
+            onChange={(event) =>
+              setLabels((current) => ({
+                ...current,
+                [type]: event.target.value,
+              }))
+            }
+            aria-label={
+              type === "officeLocation"
+                ? t("eventForm.office")
+                : t("eventForm.other")
+            }
+            placeholder={t("eventForm.addLocation")}
+            className="h-8 text-sm"
+            disabled={disabled}
+          />
+          {type === "officeLocation" && detail && (
+            <p className="mt-1 truncate text-xs text-muted-foreground">
+              {detail}
+            </p>
+          )}
+        </div>
+      )}
+
+      {isRecurring && (
+        <div className="mt-2">
+          <p className="mb-1 text-[10px] font-medium text-muted-foreground">
+            {t("eventForm.applyTo")}
+          </p>
+          <RadioGroup
+            value={scope}
+            onValueChange={(value) => setScope(value as "single" | "all")}
+            className="grid grid-cols-2 gap-1.5"
+            aria-label={t("eventForm.applyTo")}
+            disabled={disabled}
+          >
+            {(
+              [
+                ["single", t("eventForm.thisDayOnly")],
+                ["all", t("eventForm.allDays")],
+              ] as const
+            ).map(([value, text]) => {
+              const id = `working-location-scope-${event.id}-${value}`;
+              return (
+                <div key={value} className="relative">
+                  <RadioGroupItem
+                    id={id}
+                    value={value}
+                    className="peer sr-only"
+                  />
+                  <Label
+                    htmlFor={id}
+                    className="flex h-7 cursor-pointer items-center justify-center rounded-md border border-border px-2 text-center text-xs font-medium text-muted-foreground transition-colors hover:bg-muted/50 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-data-[state=checked]:border-foreground/40 peer-data-[state=checked]:bg-muted peer-data-[state=checked]:text-foreground"
+                  >
+                    {text}
+                  </Label>
+                </div>
+              );
+            })}
+          </RadioGroup>
+        </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>
+    </div>
+  );
+}

package/corpus/templates/calendar/app/hooks/use-events.ts

@@ -11,6 +11,12 @@ import {
 } from "@tanstack/react-query";
 import { nanoid } from "nanoid";
 
+import {
+  buildWorkingLocationProperties,
+  getWorkingLocationEditableLabel,
+  getWorkingLocationType,
+} from "@/lib/working-location";
+
 import {
   applyCalendarEventRsvp,
   calendarEventOverlapsListParams,
@@ -37,6 +43,8 @@ type UpdateEventInput = Partial<CalendarEvent> & {
   sendUpdates?: "all" | "none";
   notificationMessage?: string;
   scope?: UpdateEventScope;
+  workingLocationType?: "homeOffice" | "officeLocation" | "customLocation";
+  workingLocationLabel?: string;
 };
 
 type EventListSnapshot = Array<[QueryKey, CalendarEvent[] | undefined]>;
@@ -48,6 +56,14 @@ type RsvpEventMutationContext = EventListMutationContext & {
   previousEvent?: CalendarEvent;
 };
 
+type UpdateEventResult = Partial<CalendarEvent> & {
+  id?: string;
+  replacedId?: string;
+  success?: boolean;
+  updated?: string[];
+  message?: string;
+};
+
 const LIST_EVENTS_QUERY_KEY = ["action", "list-events"] as const;
 const OPTIMISTIC_EVENT_PREFIX = "optimistic_event_";
 
@@ -148,6 +164,16 @@ export function mergeAttendeeLists(
   return Array.from(merged.values());
 }
 
+export function shouldDeferOptimisticEventUpdate(
+  target: CalendarEvent | undefined,
+  hasWorkingLocationUpdate: boolean,
+): boolean {
+  return (
+    hasWorkingLocationUpdate ||
+    (target?.eventType === "workingLocation" && target.allDay === true)
+  );
+}
+
 function updateListEventQueries(
   queryClient: ReturnType<typeof useQueryClient>,
   updater: (
@@ -293,90 +319,136 @@ export function useCreateEvent() {
 
 export function useUpdateEvent() {
   const queryClient = useQueryClient();
-  return useActionMutation<
-    Partial<CalendarEvent> & {
-      id?: string;
-      success?: boolean;
-      updated?: string[];
-      message?: string;
-    },
-    UpdateEventInput
-  >("update-event", {
-    onMutate: async (newData) => {
-      await queryClient.cancelQueries({ queryKey: ["action", "list-events"] });
-      const previous = queryClient.getQueriesData<CalendarEvent[]>({
-        queryKey: ["action", "list-events"],
-      });
-      const {
-        addGoogleMeet,
-        addZoom,
-        addAttendees,
-        sendUpdates,
-        notificationMessage,
-        scope,
-        ...optimisticData
-      } = newData;
-      queryClient.setQueriesData<CalendarEvent[]>(
-        { queryKey: ["action", "list-events"] },
-        (old) =>
-          old?.map((e) =>
-            e.id === optimisticData.id
-              ? {
-                  ...e,
-                  ...optimisticData,
-                  ...(addAttendees
-                    ? {
-                        attendees: mergeAttendeeLists(
-                          e.attendees,
-                          addAttendees,
-                        ),
-                      }
-                    : {}),
-                }
-              : e,
-          ),
-      );
-      return { previous };
-    },
-    onSuccess: (updated) => {
-      const eventPatch = updated as
-        | (Partial<CalendarEvent> & {
-            id?: string;
-            success?: boolean;
-            updated?: string[];
-            message?: string;
-          })
-        | undefined;
-      if (!eventPatch?.id) return;
-      const {
-        success: _success,
-        updated: _updated,
-        message: _message,
-        ...data
-      } = eventPatch;
-      queryClient.setQueriesData<CalendarEvent[]>(
-        { queryKey: ["action", "list-events"] },
-        (old) =>
-          old?.map((event) =>
-            event.id === eventPatch.id ? { ...event, ...data } : event,
-          ),
-      );
-    },
-    onError: (_err, _newData, context) => {
-      const previous = (context as EventListMutationContext | undefined)
-        ?.previous;
-      if (previous) {
-        for (const [key, data] of previous) {
-          queryClient.setQueryData(key, data);
+  return useActionMutation<UpdateEventResult, UpdateEventInput>(
+    "update-event",
+    {
+      onMutate: async (newData) => {
+        await queryClient.cancelQueries({
+          queryKey: ["action", "list-events"],
+        });
+        const previous = queryClient.getQueriesData<CalendarEvent[]>({
+          queryKey: ["action", "list-events"],
+        });
+        const {
+          addGoogleMeet,
+          addZoom,
+          addAttendees,
+          sendUpdates,
+          notificationMessage,
+          scope,
+          workingLocationType,
+          workingLocationLabel,
+          ...optimisticData
+        } = newData;
+        const hasWorkingLocationUpdate =
+          workingLocationType !== undefined ||
+          workingLocationLabel !== undefined;
+        queryClient.setQueriesData<CalendarEvent[]>(
+          { queryKey: ["action", "list-events"] },
+          (old) => {
+            const target = old?.find((event) => event.id === optimisticData.id);
+            // A working-location change can alter the visual grouping of several
+            // days. Keep the editor mounted until Google confirms the write so a
+            // rejected request does not appear to save and then snap back.
+            if (
+              shouldDeferOptimisticEventUpdate(target, hasWorkingLocationUpdate)
+            )
+              return old;
+            return old?.map((e) => {
+              const matchesScope =
+                e.id === optimisticData.id ||
+                (scope === "all" &&
+                  !!target?.recurringEventId &&
+                  e.recurringEventId === target.recurringEventId);
+              if (!matchesScope) return e;
+              const nextWorkingLocationType =
+                workingLocationType ?? getWorkingLocationType(e);
+              const nextWorkingLocationLabel =
+                workingLocationLabel ?? getWorkingLocationEditableLabel(e);
+              return {
+                ...e,
+                ...optimisticData,
+                ...(hasWorkingLocationUpdate
+                  ? {
+                      workingLocationProperties: buildWorkingLocationProperties(
+                        e,
+                        {
+                          type: nextWorkingLocationType,
+                          label: nextWorkingLocationLabel,
+                        },
+                      ),
+                    }
+                  : {}),
+                ...(addAttendees
+                  ? {
+                      attendees: mergeAttendeeLists(e.attendees, addAttendees),
+                    }
+                  : {}),
+              };
+            });
+          },
+        );
+        return { previous };
+      },
+      onSuccess: (updated, input) => {
+        const eventPatch = updated as UpdateEventResult | undefined;
+        if (!eventPatch?.id) return;
+        queryClient.setQueriesData<CalendarEvent[]>(
+          { queryKey: ["action", "list-events"] },
+          (old) => reconcileUpdatedEventList(old, input.id, eventPatch),
+        );
+      },
+      onError: (_err, _newData, context) => {
+        const previous = (context as EventListMutationContext | undefined)
+          ?.previous;
+        if (previous) {
+          for (const [key, data] of previous) {
+            queryClient.setQueryData(key, data);
+          }
         }
-      }
-    },
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: ["action", "list-events"] });
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries({ queryKey: ["action", "list-events"] });
+      },
     },
+  );
+}
+
+export function reconcileUpdatedEventList(
+  events: CalendarEvent[] | undefined,
+  originalId: string,
+  result: UpdateEventResult,
+): CalendarEvent[] | undefined {
+  if (!result.id) return events;
+  const {
+    success: _success,
+    updated: _updated,
+    message: _message,
+    replacedId,
+    ...eventPatch
+  } = result;
+  const targetId = replacedId ?? originalId;
+
+  return events?.map((event) => {
+    if (event.id !== targetId) return event;
+    const idChanged = event.id !== eventPatch.id;
+    return {
+      ...event,
+      ...eventPatch,
+      ...(idChanged ? { _replacedId: event.id } : {}),
+    };
   });
 }
 
+export function findEventByCurrentOrReplacedId(
+  events: CalendarEvent[],
+  eventId: string,
+): CalendarEvent | undefined {
+  return events.find(
+    (event) => event.id === eventId || event._replacedId === eventId,
+  );
+}
+
 export function useDeleteEvent() {
   const queryClient = useQueryClient();
   return useActionMutation<

package/corpus/templates/calendar/app/i18n/zh-TW.ts

@@ -672,6 +672,7 @@ const messages = {
     addingMeetingLink: "新增 {{provider}} 連結",
     alerts: "警報",
     allDay: "全天",
+    allDays: "所有日期",
     allEvents: "所有活動",
     applyChangesTo: "將更改應用到",
     applyTo: "適用於",
@@ -752,6 +753,7 @@ const messages = {
     notifyGuestsQuestion: "通知來賓？",
     none: "無",
     office: "辦公室",
+    other: "其他",
     openInSidebar: "在側邊欄中開啟",
     openInGoogleCalendar: "在 Google Calendar 中開啟",
     optionalDescription: "可選描述",
@@ -803,6 +805,7 @@ const messages = {
     start: "開始",
     startDate: "開始日期",
     subscribedFeeds: "已訂閱的來源",
+    thisDayOnly: "僅限當天",
     thisEvent: "本次活動",
     timeSelected: "選定時間",
     timezone: "時區",
@@ -826,6 +829,9 @@ const messages = {
     weekly: "每週",
     workingFrom: "工作自",
     workingLocation: "工作地點",
+    workingLocationDesk: "座位 {{desk}}",
+    workingLocationFloor: "樓層 {{floor}}",
+    workingLocationTitle: "工作地點：{{location}}",
     yearly: "每年",
     zoom: "Zoom",
     zoomAdded: "新增Zoom",