fix(web): keep all-day drafts visible

Author: Uarmagan

packages/web/src/common/calendar-grid/layout/allDayDraftEventPosition.test.ts

@@ -0,0 +1,70 @@
+import { Origin, Priorities } from "@core/constants/core.constants";
+import { type Schema_GridEvent } from "@web/common/types/web.event.types";
+import { gridEventDefaultPosition } from "@web/common/utils/event/event.util";
+import { positionAllDayDraftEvent } from "./allDayDraftEventPosition";
+import { describe, expect, it } from "bun:test";
+
+const createAllDayEvent = (
+  overrides: Partial<Schema_GridEvent> = {},
+): Schema_GridEvent => ({
+  _id: "event-1",
+  endDate: "2026-05-26",
+  isAllDay: true,
+  isSomeday: false,
+  origin: Origin.COMPASS,
+  position: gridEventDefaultPosition,
+  priority: Priorities.UNASSIGNED,
+  startDate: "2026-05-25",
+  title: "All-day event",
+  user: "user-1",
+  ...overrides,
+});
+
+describe("positionAllDayDraftEvent", () => {
+  it("places a new all-day draft after existing same-day all-day events", () => {
+    const draft = createAllDayEvent({
+      _id: undefined,
+      title: "Draft",
+    });
+
+    const { activeDraftEvent } = positionAllDayDraftEvent({
+      draft,
+      events: [
+        createAllDayEvent({
+          _id: "first",
+          title: "First",
+        }),
+        createAllDayEvent({
+          _id: "second",
+          title: "Second",
+        }),
+      ],
+    });
+
+    expect(activeDraftEvent?.row).toBe(3);
+  });
+
+  it("replaces an existing all-day event draft before assigning rows", () => {
+    const draft = createAllDayEvent({
+      _id: "second",
+      title: "Editing second",
+    });
+
+    const { activeDraftEvent } = positionAllDayDraftEvent({
+      draft,
+      events: [
+        createAllDayEvent({
+          _id: "first",
+          title: "First",
+        }),
+        createAllDayEvent({
+          _id: "second",
+          title: "Second",
+        }),
+      ],
+    });
+
+    expect(activeDraftEvent?.row).toBe(2);
+    expect(activeDraftEvent?.title).toBe("Editing second");
+  });
+});

packages/web/src/common/calendar-grid/layout/allDayDraftEventPosition.ts

@@ -0,0 +1,49 @@
+import { type Schema_Event } from "@core/types/event.types";
+import { type Schema_GridEvent } from "@web/common/types/web.event.types";
+import {
+  assembleGridEvent,
+  hasEventDates,
+} from "@web/common/utils/event/event.util";
+import { assignEventsToRow } from "@web/common/utils/grid/assign.row";
+
+export const positionAllDayDraftEvent = ({
+  draft,
+  events,
+}: {
+  draft: Schema_Event | null;
+  events: Schema_GridEvent[];
+}): {
+  activeDraftEvent: Schema_GridEvent | null;
+  events: Schema_GridEvent[];
+} => {
+  if (!draft?.isAllDay || !hasEventDates(draft)) {
+    return { activeDraftEvent: null, events };
+  }
+
+  const draftEvent = assembleGridEvent(draft);
+  const existingIndex = draftEvent._id
+    ? events.findIndex((event) => event._id === draftEvent._id)
+    : -1;
+  const eventForRows =
+    existingIndex === -1
+      ? draftEvent
+      : {
+          ...draftEvent,
+          position: events[existingIndex].position,
+          row: events[existingIndex].row,
+        };
+  const eventsWithDraft =
+    existingIndex === -1
+      ? [...events, eventForRows]
+      : events.map((event, index) =>
+          index === existingIndex ? eventForRows : event,
+        );
+  const positionedEvents = assignEventsToRow(eventsWithDraft).allDayEvents;
+  const activeDraftIndex =
+    existingIndex === -1 ? positionedEvents.length - 1 : existingIndex;
+
+  return {
+    activeDraftEvent: positionedEvents[activeDraftIndex] ?? null,
+    events: positionedEvents,
+  };
+};

packages/web/src/components/DatePicker/DatePicker.tsx

@@ -68,7 +68,7 @@ export const DatePicker: React.FC<Props> = (datePickerProps) => {
 
   return (
     <ReactDatePicker
-      popperClassName="!z-20"
+      popperClassName="!z-22"
       calendarClassName={classNames("calendar", calendarClassName, {
         "calendar--open": isOpen,
         "calendar--animation": animationOnToggle,

packages/web/src/views/Day/components/Calendar/DayCalendarGrid.test.tsx

@@ -123,6 +123,22 @@ const createTimedEvent = (
     ...overrides,
   }) as Schema_Event;
 
+const createAllDayEvent = (
+  overrides: Partial<Schema_Event> & {
+    _id: string;
+    startDate: string;
+    endDate: string;
+  },
+): Schema_Event =>
+  ({
+    isAllDay: true,
+    isSomeday: false,
+    recurrence: undefined,
+    title: overrides._id,
+    user: "user",
+    ...overrides,
+  }) as Schema_Event;
+
 const setDayEvents = (events: Schema_Event[]) => {
   store = createStoreWithEvents(events);
 };
@@ -137,6 +153,18 @@ const setDraftEvent = (event: Schema_Event) => {
   store.dispatch(draftSlice.actions.startGridClick(event));
 };
 
+const getDismissOptions = () => {
+  const [, options] = useDismissMock.mock.calls.at(-1) ?? [];
+
+  expect(options).toBeDefined();
+
+  return options as {
+    enabled: boolean;
+    outsidePress?: (event: MouseEvent) => boolean;
+    outsidePressEvent: string;
+  };
+};
+
 beforeEach(() => {
   store = createStoreWithEvents([]);
   useDismissMock.mockClear();
@@ -369,15 +397,43 @@ describe("DayCalendarGrid", () => {
   it("dismisses the floating form after empty agenda mouse handlers run", () => {
     renderDayCalendarGrid();
 
-    expect(useDismissMock).toHaveBeenCalledWith(
-      expect.anything(),
+    expect(getDismissOptions()).toEqual(
       expect.objectContaining({
         enabled: true,
+        outsidePress: expect.any(Function),
         outsidePressEvent: "click",
       }),
     );
   });
 
+  it("does not dismiss a new all-day draft from the click that created it", async () => {
+    renderDayCalendarGrid();
+
+    const allDayRegion = screen.getByRole("region", { name: "All-day events" });
+
+    fireEvent.mouseDown(allDayRegion, {
+      button: 0,
+      clientX: 100,
+      clientY: 1,
+    });
+
+    await waitFor(() => {
+      expect(getDraft()?.isAllDay).toBe(true);
+    });
+
+    const outsidePress = getDismissOptions().outsidePress;
+    expect(outsidePress).toBeDefined();
+
+    const creationClick = new MouseEvent("click", { bubbles: true });
+    Object.defineProperty(creationClick, "target", {
+      configurable: true,
+      value: allDayRegion,
+    });
+
+    expect(outsidePress?.(creationClick)).toBe(false);
+    expect(outsidePress?.(creationClick)).toBe(true);
+  });
+
   it("dismisses an open draft when clicking empty Day all-day calendar space", () => {
     const existingDraft = createTimedEvent({
       _id: "open-all-day-draft",
@@ -401,6 +457,52 @@ describe("DayCalendarGrid", () => {
     expect(getDraft()).toBeNull();
   });
 
+  it("places a new all-day draft below existing all-day events", async () => {
+    setDayEvents([
+      createAllDayEvent({
+        _id: "first-all-day",
+        endDate: "2026-05-21",
+        startDate: "2026-05-20",
+        title: "First all-day",
+      }),
+      createAllDayEvent({
+        _id: "second-all-day",
+        endDate: "2026-05-21",
+        startDate: "2026-05-20",
+        title: "Second all-day",
+      }),
+    ]);
+    renderDayCalendarGrid();
+
+    fireEvent.mouseDown(
+      screen.getByRole("region", { name: "All-day events" }),
+      {
+        button: 0,
+        clientX: 100,
+        clientY: 80,
+      },
+    );
+
+    await waitFor(() => {
+      const draft = screen.getByRole("button", {
+        name: /all-day event: untitled event/i,
+      });
+      const first = screen.getByRole("button", {
+        name: /all-day event: first all-day/i,
+      });
+      const second = screen.getByRole("button", {
+        name: /all-day event: second all-day/i,
+      });
+
+      expect(parseFloat(draft.style.top)).toBeGreaterThan(
+        parseFloat(first.style.top),
+      );
+      expect(parseFloat(draft.style.top)).toBeGreaterThan(
+        parseFloat(second.style.top),
+      );
+    });
+  });
+
   it("scrolls the Day timed grid to now when the Day view requests it", () => {
     const scroll = mock();
 

packages/web/src/views/Day/components/Calendar/DayCalendarGrid.tsx

@@ -57,10 +57,6 @@ import {
 import { useDayTimedDraftCreation } from "./useDayTimedDraftCreation";
 
 const isDayInteractionMotionActive = () => false;
-const DAY_EVENT_FORM_DISMISS_OPTIONS = {
-  enabled: true,
-  outsidePressEvent: "click",
-} as const;
 
 export function DayCalendarGrid() {
   const dispatch = useAppDispatch();
@@ -87,14 +83,34 @@ export function DayCalendarGrid() {
   const dayEvents = useAppSelector(selectDayEvents);
   const allDayRowsCount = useAppSelector(selectDayRowCount);
   const draft = useAppSelector(selectDraft);
+  const allDayCreationPressTargetRef = useRef<HTMLElement | null>(null);
   const floating = useFloatingAtCursor((open, _event, reason) => {
     const dismissed = reason === "escape-key" || reason === "outside-press";
 
     if (!open && dismissed && nodeId$.getValue() === CursorItem.EventForm) {
       dispatch(draftSlice.actions.discard(undefined));
     }
   });
-  const dismiss = useDismiss(floating.context, DAY_EVENT_FORM_DISMISS_OPTIONS);
+  const shouldDismissEventForm = useCallback((event: MouseEvent) => {
+    const allDayCreationPressTarget = allDayCreationPressTargetRef.current;
+
+    if (!allDayCreationPressTarget) {
+      return true;
+    }
+
+    allDayCreationPressTargetRef.current = null;
+
+    const target = event.target;
+
+    return !(
+      target instanceof Node && allDayCreationPressTarget.contains(target)
+    );
+  }, []);
+  const dismiss = useDismiss(floating.context, {
+    enabled: true,
+    outsidePress: shouldDismissEventForm,
+    outsidePressEvent: "click",
+  });
   const interactions = useInteractions([dismiss]);
 
   const getDayInteractionLayoutSources = useCallback(
@@ -205,7 +221,10 @@ export function DayCalendarGrid() {
         return;
       }
 
+      const allDayCreationPressTarget = event.currentTarget;
+
       if (draft) {
+        allDayCreationPressTargetRef.current = null;
         dispatch(draftSlice.actions.discard(undefined));
         closeFloatingAtCursor();
         return;
@@ -222,6 +241,7 @@ export function DayCalendarGrid() {
         endDate,
       );
 
+      allDayCreationPressTargetRef.current = allDayCreationPressTarget;
       openEventFormForEvent(
         addId(assembleGridEvent(draftEvent as EventWithDates)),
       );
@@ -267,7 +287,7 @@ export function DayCalendarGrid() {
   return (
     <section
       aria-label="Calendar agenda"
-      className="flex h-full min-w-xs flex-1 flex-col bg-bg-primary p-0.5"
+      className="flex h-full min-w-xs flex-1 flex-col bg-bg-primary px-0.5 pb-0.5"
       onContextMenu={handleContextMenu}
     >
       {anchorElement}

packages/web/src/views/Day/components/Calendar/dayCalendarDraft.util.ts

@@ -1,5 +1,6 @@
 import { type Schema_Event } from "@core/types/event.types";
 import dayjs from "@core/util/date/dayjs";
+import { positionAllDayDraftEvent } from "@web/common/calendar-grid/layout/allDayDraftEventPosition";
 import { type CalendarGridVisibleDate } from "@web/common/calendar-grid/types/calendarGrid.types";
 import { type Schema_GridEvent } from "@web/common/types/web.event.types";
 import {
@@ -28,6 +29,10 @@ export const addVisibleDraftEvent = ({
     return events;
   }
 
+  if (isAllDay) {
+    return positionAllDayDraftEvent({ draft, events }).events;
+  }
+
   const draftEvent = assembleGridEvent(draft);
   const existingIndex = events.findIndex((event) => event._id === draft._id);