@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

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

@@ -97,6 +97,12 @@ import {
   validateAttachmentDrafts,
 } from "@/lib/event-form-utils";
 import { buildDeleteEventMutationInput } from "@/lib/event-mutation-inputs";
+import {
+  eventPopoverHeader,
+  eventPopoverHeaderButton,
+  eventPopoverHeaderTitle,
+  eventPopoverShell,
+} from "@/lib/event-popover-style";
 
 type VideoProvider = "none" | "google_meet" | "zoom";
 type EventType = "default" | "outOfOffice" | "focusTime" | "workingLocation";
@@ -926,7 +932,7 @@ export function CreateEventPopover({
         align="end"
         sideOffset={8}
         collisionPadding={16}
-        className="flex max-h-[var(--radix-popover-content-available-height)] w-[calc(100vw-2rem)] flex-col overflow-hidden p-0 sm:w-72"
+        className={`${eventPopoverShell} w-[calc(100vw-2rem)] sm:w-[284px]`}
         onInteractOutside={(event) => {
           if (findTimeOpen) {
             event.preventDefault();
@@ -947,15 +953,15 @@ export function CreateEventPopover({
           onKeyDown={handleFormKeyDown}
           className="flex min-h-0 flex-1 flex-col"
         >
-          <div className="flex shrink-0 items-center justify-between border-b border-border/60 px-4 py-3">
-            <span className="text-base font-medium text-foreground">
+          <div className={eventPopoverHeader}>
+            <span className={eventPopoverHeaderTitle}>
               {draft ? t("eventForm.reviewInvite") : t("eventForm.event")}
             </span>
             <Button
               type="button"
               variant="ghost"
               size="icon"
-              className="size-7 text-muted-foreground hover:text-foreground"
+              className={eventPopoverHeaderButton}
               aria-label={t("eventForm.cancel")}
               onClick={() => onOpenChange(false)}
             >
@@ -963,7 +969,7 @@ export function CreateEventPopover({
             </Button>
           </div>
 
-          <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-3">
+          <div className="min-h-0 flex-1 space-y-0.5 overflow-y-auto px-4 py-2">
             {!isOutOfOffice && (
               <Input
                 id="event-title"
@@ -972,26 +978,26 @@ export function CreateEventPopover({
                 placeholder={t("eventForm.eventTitlePlaceholder")}
                 aria-label={t("eventForm.title")}
                 autoFocus
-                className="h-auto border-0 border-b border-border/70 rounded-none bg-transparent px-0 pb-3 pt-1 text-xl font-normal shadow-none placeholder:text-muted-foreground/60 focus-visible:ring-0"
+                className="h-[30px] rounded-md border-0 bg-muted/40 px-2 py-1.5 text-[13px] font-normal shadow-none placeholder:text-muted-foreground/60 focus-visible:ring-0"
               />
             )}
 
-            <div className="flex items-start gap-3 pt-1">
-              <IconClock className="mt-1.5 size-4 shrink-0 text-muted-foreground" />
+            <div className="flex items-start gap-2 pt-1">
+              <IconClock className="mt-1.5 size-[18px] shrink-0 text-muted-foreground" />
               <div className="min-w-0 flex-1">
                 {!allDay ? (
                   <div className="flex flex-wrap items-baseline gap-1">
                     <TimePickerPopover
                       value={startTime}
                       label={t("eventForm.start")}
-                      className="px-1.5 py-1 text-base"
+                      className="px-1.5 py-1"
                       onChange={setStartTime}
                     />
                     <span className="text-muted-foreground/60">→</span>
                     <TimePickerPopover
                       value={endTime}
                       label={t("eventForm.end")}
-                      className="px-1.5 py-1 text-base"
+                      className="px-1.5 py-1"
                       getOptionMeta={(value) => {
                         const duration = differenceInMinutes(
                           new Date(
@@ -1025,11 +1031,11 @@ export function CreateEventPopover({
                     </span>
                   </div>
                 ) : (
-                  <span className="text-sm text-muted-foreground">
+                  <span className="text-muted-foreground">
                     {t("eventForm.allDay")}
                   </span>
                 )}
-                <div className="mt-0.5 flex flex-wrap items-center gap-1 text-sm">
+                <div className="mt-0.5 flex flex-wrap items-center gap-1">
                   <DatePickerPopover
                     value={date}
                     label={t("eventForm.startDate")}
@@ -1054,7 +1060,7 @@ export function CreateEventPopover({
                 type="button"
                 variant="ghost"
                 size="sm"
-                className="h-8 gap-1.5 px-1.5 text-xs text-muted-foreground"
+                className="h-[30px] gap-1.5 px-1.5 text-muted-foreground"
                 onClick={() => setFindTimeOpen(true)}
               >
                 <IconCalendarTime className="size-3.5" />
@@ -1064,8 +1070,8 @@ export function CreateEventPopover({
 
             {!isOutOfOffice && (
               <>
-                <div className="flex items-center gap-3 py-1">
-                  <IconUsers className="size-4 shrink-0 text-muted-foreground" />
+                <div className="flex items-center gap-2 py-1">
+                  <IconUsers className="size-[18px] shrink-0 text-muted-foreground" />
                   <AttendeeAutocomplete
                     ref={attendeeAutocompleteRef}
                     attendees={attendees}
@@ -1076,7 +1082,7 @@ export function CreateEventPopover({
                     placeholder={t("eventForm.attendeesPlaceholder")}
                     variant="inline"
                     className="min-w-0 flex-1"
-                    inputClassName="text-sm"
+                    inputClassName=""
                     onEmptyEnter={() => formRef.current?.requestSubmit()}
                   />
                 </div>
@@ -1089,15 +1095,15 @@ export function CreateEventPopover({
                   </p>
                 )}
 
-                <div className="flex items-center gap-3 py-1">
-                  <IconMapPin className="size-4 shrink-0 text-muted-foreground" />
+                <div className="flex items-center gap-2 py-1">
+                  <IconMapPin className="size-[18px] shrink-0 text-muted-foreground" />
                   <Input
                     id="event-location"
                     value={location}
                     onChange={(e) => setLocation(e.target.value)}
                     placeholder={t("eventForm.optionalLocation")}
                     aria-label={t("eventForm.location")}
-                    className="h-8 border-0 bg-transparent px-0 text-sm shadow-none placeholder:text-muted-foreground/50 focus-visible:ring-0"
+                    className="h-[30px] border-0 bg-transparent px-0 shadow-none placeholder:text-muted-foreground/60 focus-visible:ring-0"
                     list={
                       locationSuggestions.length > 0
                         ? locationSuggestionsId
@@ -1113,8 +1119,8 @@ export function CreateEventPopover({
                   )}
                 </div>
 
-                <div className="flex items-center gap-3 py-1">
-                  <IconVideo className="size-4 shrink-0 text-muted-foreground" />
+                <div className="flex items-center gap-2 py-1">
+                  <IconVideo className="size-[18px] shrink-0 text-muted-foreground" />
                   <Select
                     value={videoProvider === "none" ? "" : videoProvider}
                     onValueChange={(value) => {
@@ -1125,7 +1131,7 @@ export function CreateEventPopover({
                     <SelectTrigger
                       id="event-video-provider"
                       aria-label={t("bookingLinks.conferencing")}
-                      className="h-8 flex-1 border-0 bg-transparent px-0 text-sm shadow-none focus:ring-0"
+                      className="h-[30px] flex-1 border-0 bg-transparent px-0 shadow-none focus:ring-0 data-[placeholder]:text-muted-foreground/60"
                     >
                       <SelectValue
                         placeholder={t("bookingLinks.conferencing")}
@@ -1150,8 +1156,39 @@ export function CreateEventPopover({
                     </SelectContent>
                   </Select>
                 </div>
+                {eventType === "default" && (
+                  <div className="flex items-center justify-between gap-2 py-1 ps-[26px]">
+                    <Label
+                      htmlFor="event-availability"
+                      className="text-muted-foreground"
+                    >
+                      {t("eventForm.showAs")}
+                    </Label>
+                    <Select
+                      value={availability}
+                      onValueChange={(value) =>
+                        setAvailability(value as Availability)
+                      }
+                    >
+                      <SelectTrigger
+                        id="event-availability"
+                        className="h-[30px] w-28"
+                      >
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="opaque">
+                          {t("eventForm.busy")}
+                        </SelectItem>
+                        <SelectItem value="transparent">
+                          {t("eventForm.free")}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
                 {videoProvider === "zoom" && !zoomStatus.data?.connected && (
-                  <div className="ml-7 rounded-md border border-border/60 bg-muted/20 p-2">
+                  <div className="ms-[26px] rounded-md border border-border/60 bg-muted/20 p-2">
                     <div className="flex items-center justify-between gap-2">
                       <p className="text-xs text-muted-foreground">
                         {zoomStatus.data?.configured === false
@@ -1187,8 +1224,8 @@ export function CreateEventPopover({
                 )}
 
                 {descriptionOpen ? (
-                  <div className="flex items-start gap-3 py-1">
-                    <IconMessage className="mt-1.5 size-4 shrink-0 text-muted-foreground" />
+                  <div className="flex items-start gap-2 py-1">
+                    <IconMessage className="mt-1.5 size-[18px] shrink-0 text-muted-foreground" />
                     <div className="min-w-0 flex-1">
                       <div className="flex items-start gap-2">
                         <Textarea
@@ -1197,7 +1234,7 @@ export function CreateEventPopover({
                           onChange={(e) => setDescription(e.target.value)}
                           placeholder={t("eventForm.optionalDescription")}
                           rows={2}
-                          className="min-h-16 resize-none border-0 bg-transparent px-0 text-sm shadow-none focus-visible:ring-0"
+                          className="min-h-16 resize-none border-0 bg-transparent px-0 shadow-none focus-visible:ring-0"
                         />
                         <Button
                           type="button"
@@ -1215,7 +1252,7 @@ export function CreateEventPopover({
                 ) : (
                   <button
                     type="button"
-                    className="flex w-full items-center gap-3 rounded-md py-1 text-left text-sm text-muted-foreground/60 transition-colors hover:bg-muted/50 hover:text-foreground"
+                    className="flex w-full items-center gap-2 rounded-md py-1 text-left text-muted-foreground/60 transition-colors hover:bg-muted/50 hover:text-foreground"
                     onClick={() => setDescriptionOpen(true)}
                   >
                     <IconMessage className="size-4 shrink-0" />
@@ -1234,7 +1271,7 @@ export function CreateEventPopover({
                   type="button"
                   variant="outline"
                   size="sm"
-                  className="h-9 w-full justify-between px-3 text-sm font-normal text-muted-foreground"
+                  className="h-9 w-full justify-between px-3 font-normal text-muted-foreground"
                   aria-label={t("eventForm.eventOptions")}
                 >
                   <span className="truncate">
@@ -1260,7 +1297,7 @@ export function CreateEventPopover({
                         <SelectTrigger
                           id="event-calendar"
                           aria-label={t("navigation.calendar")}
-                          className="h-8 text-sm"
+                          className="h-[30px]"
                         >
                           <SelectValue />
                         </SelectTrigger>
@@ -1308,7 +1345,7 @@ export function CreateEventPopover({
                       handleEventTypeChange(value as EventType)
                     }
                   >
-                    <SelectTrigger id="event-type" className="h-8 text-sm">
+                    <SelectTrigger id="event-type" className="h-[30px]">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -1341,7 +1378,7 @@ export function CreateEventPopover({
                     >
                       <SelectTrigger
                         id="working-location-type"
-                        className="h-8 text-sm"
+                        className="h-[30px]"
                       >
                         <SelectValue />
                       </SelectTrigger>
@@ -1371,7 +1408,7 @@ export function CreateEventPopover({
                         value={title}
                         onChange={(event) => setTitle(event.target.value)}
                         placeholder={t("eventForm.outOfOffice")}
-                        className="h-8 text-sm"
+                        className="h-[30px]"
                       />
                     </div>
                     <div className="space-y-1.5">
@@ -1386,7 +1423,7 @@ export function CreateEventPopover({
                       >
                         <SelectTrigger
                           id="event-auto-decline"
-                          className="h-8 text-sm"
+                          className="h-[30px]"
                         >
                           <SelectValue />
                         </SelectTrigger>
@@ -1418,7 +1455,6 @@ export function CreateEventPopover({
                             setDeclineMessage(event.target.value)
                           }
                           rows={2}
-                          className="text-sm"
                         />
                       </div>
                     )}
@@ -1432,7 +1468,7 @@ export function CreateEventPopover({
                         <div className="flex items-center justify-between gap-2">
                           <Label
                             htmlFor="all-day"
-                            className="text-sm text-muted-foreground"
+                            className="text-muted-foreground"
                           >
                             {t("eventForm.allDay")}
                           </Label>
@@ -1445,9 +1481,7 @@ export function CreateEventPopover({
                     </Tooltip>
                   ) : (
                     <div className="flex items-center justify-between gap-2">
-                      <Label htmlFor="all-day" className="text-sm">
-                        {t("eventForm.allDay")}
-                      </Label>
+                      <Label htmlFor="all-day">{t("eventForm.allDay")}</Label>
                       <Switch
                         id="all-day"
                         checked={allDay}
@@ -1483,75 +1517,34 @@ export function CreateEventPopover({
                     </div>
                   )}
 
-                  <div className="grid grid-cols-2 gap-3">
-                    <div className="space-y-1.5">
-                      <Label htmlFor="event-availability" className="text-xs">
-                        {t("eventForm.showAs")}
-                      </Label>
-                      <Select
-                        value={
-                          eventType === "workingLocation"
-                            ? "transparent"
-                            : eventType === "default"
-                              ? availability
-                              : "opaque"
-                        }
-                        onValueChange={(value) =>
-                          setAvailability(value as Availability)
-                        }
-                        disabled={eventType !== "default"}
-                      >
-                        <SelectTrigger
-                          id="event-availability"
-                          className="h-8 text-sm"
-                        >
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="opaque">
-                            {t("eventForm.busy")}
-                          </SelectItem>
-                          <SelectItem value="transparent">
-                            {t("eventForm.free")}
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-
-                    <div className="space-y-1.5">
-                      <Label htmlFor="event-visibility" className="text-xs">
-                        {t("eventForm.visibility")}
-                      </Label>
-                      <Select
-                        value={
-                          eventType === "workingLocation"
-                            ? "public"
-                            : visibility
-                        }
-                        onValueChange={(value) =>
-                          setVisibility(value as Visibility)
-                        }
-                        disabled={eventType === "workingLocation"}
-                      >
-                        <SelectTrigger
-                          id="event-visibility"
-                          className="h-8 text-sm"
-                        >
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="default">
-                            {t("eventForm.default")}
-                          </SelectItem>
-                          <SelectItem value="public">
-                            {t("eventForm.public")}
-                          </SelectItem>
-                          <SelectItem value="private">
-                            {t("eventForm.private")}
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="event-visibility" className="text-xs">
+                      {t("eventForm.visibility")}
+                    </Label>
+                    <Select
+                      value={
+                        eventType === "workingLocation" ? "public" : visibility
+                      }
+                      onValueChange={(value) =>
+                        setVisibility(value as Visibility)
+                      }
+                      disabled={eventType === "workingLocation"}
+                    >
+                      <SelectTrigger id="event-visibility" className="h-[30px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="default">
+                          {t("eventForm.default")}
+                        </SelectItem>
+                        <SelectItem value="public">
+                          {t("eventForm.public")}
+                        </SelectItem>
+                        <SelectItem value="private">
+                          {t("eventForm.private")}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
 
                   <div className="space-y-1.5">
@@ -1631,7 +1624,7 @@ export function CreateEventPopover({
               type="button"
               variant="ghost"
               size="sm"
-              className="h-8 text-xs"
+              className="h-[30px]"
               onClick={() => {
                 initializedKeyRef.current = null;
                 onOpenChange(false);
@@ -1642,7 +1635,7 @@ export function CreateEventPopover({
             <Button
               type="submit"
               size="sm"
-              className="h-8 text-xs"
+              className="h-[30px]"
               disabled={
                 createEvent.isPending ||
                 !accountEmail ||

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

@@ -1,5 +1,6 @@
 import { useT } from "@agent-native/core/client/i18n";
 import type { CalendarEvent } from "@shared/api";
+import { isCalendarEventOrganizer } from "@shared/event-permissions";
 import {
   IconAlertTriangleFilled,
   IconMapPin,
@@ -27,6 +28,7 @@ import {
   getDateKeyInTimezone,
   getEventDateKey,
   getEventSegmentForCalendarDay,
+  isAllDayCalendarEvent,
 } from "@/lib/calendar-timezone";
 import { getEventDisplayColor, allOtherDeclined } from "@/lib/event-colors";
 import {
@@ -227,6 +229,7 @@ const DayEventCard = memo(function DayEventCard({
   onPopoverOpenChange,
 }: DayEventCardProps) {
   const t = useT();
+  const canManipulate = canDrag && isCalendarEventOrganizer(event);
   const workingLocationLabels = createWorkingLocationDisplayLabels(t);
   const li = layout.get(event.id) ?? {
     left: 0,
@@ -283,7 +286,7 @@ const DayEventCard = memo(function DayEventCard({
         isDeclined && "saturate-[0.3]",
         isBeingDragged && isDragging && "shadow-lg z-[100]",
         isBeingDragged && isDragging && "ring-2 ring-primary/40",
-        canDrag && isStart && "cursor-grab",
+        canManipulate && isStart && "cursor-grab",
         isBeingDragged && isDragging && "cursor-grabbing",
         event.ownerColor && "pr-4",
       )}
@@ -403,7 +406,7 @@ const DayEventCard = memo(function DayEventCard({
         </>
       )}
       {/* Top resize handle — only on segments that start today */}
-      {canDrag && isStart && (
+      {canManipulate && isStart && (
         <div
           data-resize-handle="true"
           onPointerDown={(e) => {
@@ -415,7 +418,7 @@ const DayEventCard = memo(function DayEventCard({
         />
       )}
       {/* Bottom resize handle — only when event both starts and ends today */}
-      {canDrag && isEnd && isStart && (
+      {canManipulate && isEnd && isStart && (
         <div
           data-resize-handle="true"
           onPointerDown={(e) => {
@@ -556,7 +559,9 @@ export const DayView = memo(function DayView({
   const allDayEvents = useMemo(
     () =>
       events.filter(
-        (event) => event.allDay || fullDayOutOfOfficeCoversDate(event, date),
+        (event) =>
+          isAllDayCalendarEvent(event) ||
+          fullDayOutOfOfficeCoversDate(event, date),
       ),
     [date, events],
   );
@@ -568,14 +573,17 @@ export const DayView = memo(function DayView({
     () =>
       events.filter(
         (event) =>
-          !event.allDay &&
+          !isAllDayCalendarEvent(event) &&
           isOutOfOfficeEvent(event) &&
           !isFullDayOutOfOfficeEvent(event),
       ),
     [events],
   );
   const timedEvents = useMemo(
-    () => events.filter((event) => !event.allDay && !isOutOfOfficeEvent(event)),
+    () =>
+      events.filter(
+        (event) => !isAllDayCalendarEvent(event) && !isOutOfOfficeEvent(event),
+      ),
     [events],
   );
   const layout = useMemo(
@@ -687,6 +695,7 @@ export const DayView = memo(function DayView({
 
   const handleEventPointerDown = useCallback(
     (e: React.PointerEvent, event: CalendarEvent, isStart: boolean) => {
+      if (!isCalendarEventOrganizer(event)) return;
       focusedEventIdRef.current = event.id;
       setFocusedEventId(event.id);
       setFocusedEvent(event);
@@ -703,16 +712,20 @@ export const DayView = memo(function DayView({
 
   const handleResizeTopPointerDown = useCallback(
     (e: React.PointerEvent, eventId: string) => {
+      const event = events.find((candidate) => candidate.id === eventId);
+      if (!event || !isCalendarEventOrganizer(event)) return;
       startDrag(e, eventId, "resize-top", 0);
     },
-    [startDrag],
+    [events, startDrag],
   );
 
   const handleResizeBottomPointerDown = useCallback(
     (e: React.PointerEvent, eventId: string) => {
+      const event = events.find((candidate) => candidate.id === eventId);
+      if (!event || !isCalendarEventOrganizer(event)) return;
       startDrag(e, eventId, "resize", 0);
     },
-    [startDrag],
+    [events, startDrag],
   );
 
   // Drag-to-create: pointer-down-drag-up on empty grid background
@@ -793,7 +806,7 @@ export const DayView = memo(function DayView({
 
       {/* Working locations and ordinary all-day events */}
       {allDayEvents.length > 0 && (
-        <div className="border-b border-border bg-card/50">
+        <div className="max-h-[88px] overflow-y-auto border-b border-border bg-card/50">
           {workingLocations.length > 0 && (
             <div data-working-location-lane className="px-4 py-1.5">
               <p className="mb-1 flex items-center gap-1 text-[10px] font-medium uppercase text-muted-foreground">
@@ -1060,7 +1073,7 @@ export const DayView = memo(function DayView({
                   }
                   label={t("eventForm.outOfOffice")}
                   markerIndex={markerIndex}
-                  canDrag={canDrag}
+                  canDrag={canDrag && isCalendarEventOrganizer(event)}
                   isBeingDragged={isBeingDragged}
                   isDragging={isDragging}
                   isDragTargetDay={isBeingDragged}

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

@@ -1,5 +1,6 @@
 import { useT } from "@agent-native/core/client/i18n";
 import type { CalendarEvent, DeleteEventScope } from "@shared/api";
+import { isCalendarEventOrganizer } from "@shared/event-permissions";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { getGuestAttendeeCount } from "@/components/calendar/GuestNotificationDialog";
@@ -209,18 +210,8 @@ export function DeleteEventDialog({
 }
 
 function getIsRemoveOnly(event: CalendarEvent): boolean {
-  const isOrganizer = getIsOrganizer(event);
+  const isOrganizer = isCalendarEventOrganizer(event);
   const hasOtherAttendees =
     event.attendees && event.attendees.filter((a) => !a.self).length > 0;
   return !isOrganizer && !!hasOtherAttendees;
 }
-
-function getIsOrganizer(event: CalendarEvent): boolean {
-  if (event.organizer?.self) return true;
-  if (event.attendees) {
-    const selfAttendee = event.attendees.find((a) => a.self);
-    if (selfAttendee?.organizer) return true;
-  }
-  if (!event.attendees || event.attendees.length === 0) return true;
-  return false;
-}