fix(web): preserve timed event stack order (#1844)

Author: Uarmagan

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

@@ -109,7 +109,7 @@ export const DayTimedCalendarEvent = ({
   visibleDates,
 }: DayTimedEventCardProps) => {
   const isRegistered = Boolean(event._id) && !isPending && !isPlaceholder;
-  const isDeck = Boolean(deckLayout) && !isActiveDraft;
+  const isDeck = Boolean(deckLayout);
   const [isFocused, setIsFocused] = useState(false);
   const registrationRef = useDayEventRegistrationRef({
     eventId: event._id,
@@ -135,7 +135,7 @@ export const DayTimedCalendarEvent = ({
     const highlight = `inset 0 1px 0 rgba(255,255,255,${isFocused ? 0.1 : 0.07})`;
     return `${ring}, ${drop}, ${highlight}`;
   })();
-  const shouldFloatAboveDeck = isActiveDraft || (isDeck && isFocused);
+  const shouldFloatAboveDeck = isActiveDraft && !isDeck;
   const position = getDayTimedEventPosition({
     deckLayout,
     event,

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

@@ -241,7 +241,7 @@ describe("DayCalendarGrid", () => {
     );
   });
 
-  it("raises a focused Day deck card above its group-mates", () => {
+  it("keeps a focused Day deck card in its fan-out stack", () => {
     setDayEvents([
       createTimedEvent({
         _id: "back",
@@ -260,17 +260,18 @@ describe("DayCalendarGrid", () => {
     renderDayCalendarGrid();
 
     const back = screen.getByRole("button", { name: /back overlap/i });
+    const initialBackZIndex = Number(back.style.zIndex);
 
-    expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX);
+    expect(initialBackZIndex).toBeLessThan(ZIndex.MAX);
 
     fireEvent.focus(back);
-    expect(Number(back.style.zIndex)).toBe(ZIndex.MAX);
+    expect(Number(back.style.zIndex)).toBe(initialBackZIndex);
 
     fireEvent.blur(back);
-    expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX);
+    expect(Number(back.style.zIndex)).toBe(initialBackZIndex);
   });
 
-  it("raises a clicked overlapping Day event above its group-mates without widening it", async () => {
+  it("keeps a clicked overlapping Day event in its fan-out stack without widening it", async () => {
     setDayEvents([
       createTimedEvent({
         _id: "back",
@@ -291,10 +292,11 @@ describe("DayCalendarGrid", () => {
     const back = screen.getByRole("button", { name: /back overlap/i });
     const front = screen.getByRole("button", { name: /front overlap/i });
     const initialBackWidth = parseFloat(back.style.width);
+    const initialBackZIndex = Number(back.style.zIndex);
     const frontWidth = parseFloat(front.style.width);
 
     expect(initialBackWidth).toBe(frontWidth);
-    expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX);
+    expect(initialBackZIndex).toBeLessThan(ZIndex.MAX);
 
     fireEvent.pointerDown(back, {
       button: 0,
@@ -312,7 +314,7 @@ describe("DayCalendarGrid", () => {
 
     await waitFor(() => {
       expect(getDraft()?._id).toBe("back");
-      expect(Number(back.style.zIndex)).toBe(ZIndex.MAX);
+      expect(Number(back.style.zIndex)).toBe(initialBackZIndex);
       expect(parseFloat(back.style.width)).toBe(frontWidth);
     });
   });

packages/web/src/views/Week/components/Draft/grid/GridDraft.test.tsx

@@ -4,7 +4,6 @@ import { type PropsWithChildren, type Ref, useState } from "react";
 import { Origin, Priorities } from "@core/constants/core.constants";
 import dayjs from "@core/util/date/dayjs";
 import { CALENDAR_DECK_MIN_WIDTH } from "@web/common/calendar-grid/calendarGrid.constants";
-import { ZIndex } from "@web/common/constants/web.constants";
 import { type Schema_GridEvent } from "@web/common/types/web.event.types";
 import { gridEventDefaultPosition } from "@web/common/utils/event/event.util";
 import { DraftContext } from "@web/views/Week/components/Draft/context/DraftContext";
@@ -239,17 +238,19 @@ describe("GridDraft keyboard focus", () => {
     });
   });
 
-  it("keeps an active overlapping saved draft at its stacked width while raising it", () => {
+  it("keeps an active overlapping saved draft at its stacked width and stack order", () => {
+    const deckLayout = { groupSize: 2, order: 0 };
+
     renderGridDraft({
-      deckLayout: { groupSize: 2, order: 0 },
+      deckLayout,
     });
 
     const draftBlock = screen.getByRole("button", {
       name: /Timed event: Planning/,
     });
 
     expect(draftBlock.style.width).toBe(`${CALENDAR_DECK_MIN_WIDTH}px`);
-    expect(Number(draftBlock.style.zIndex)).toBe(ZIndex.MAX);
+    expect(Number(draftBlock.style.zIndex)).toBe(deckLayout.order + 1);
   });
 
   it("submits the draft from title Enter without focusing the draft block", async () => {

packages/web/src/views/Week/components/Event/Grid/GridEvent/GridEvent.tsx

@@ -69,7 +69,7 @@ const GridEventBase = (
   const isPlaceholder = displayMode === "placeholder";
   const isResizing = motionMode === "resizing";
   const event = _event;
-  const isDeck = Boolean(deckLayout) && !isDraft;
+  const isDeck = Boolean(deckLayout);
   const [isFocused, setIsFocused] = useState(false);
   const shouldAcknowledgeCommit =
     useSomedayCommitAcknowledgement(event._id) &&
@@ -104,8 +104,7 @@ const GridEventBase = (
     ? basePosition
     : applyCalendarTimedEventDisplayPosition(basePosition, deckLayout);
 
-  const shouldFloatAboveDeck =
-    isDraft || isDragging || isResizing || (isDeck && isFocused);
+  const shouldFloatAboveDeck = isDragging || isResizing || (isDraft && !isDeck);
   const zIndex = shouldFloatAboveDeck
     ? ZIndex.MAX
     : (position.zIndex ?? ZIndex.LAYER_1);

packages/web/src/views/Week/components/Grid/MainGrid/MainGrid.test.tsx

@@ -637,7 +637,7 @@ describe("saved Week event ownership", () => {
     expect(Number(solo.style.zIndex)).toBe(ZIndex.LAYER_1);
   });
 
-  it("raises a focused deck card above its group-mates", () => {
+  it("keeps a focused deck card in its fan-out stack", () => {
     const store = createStore([
       createSavedEvent({
         _id: "back",
@@ -665,13 +665,14 @@ describe("saved Week event ownership", () => {
     );
 
     const back = screen.getByRole("button", { name: /back overlap/i });
-    expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX);
+    const initialBackZIndex = Number(back.style.zIndex);
+    expect(initialBackZIndex).toBeLessThan(ZIndex.MAX);
 
     fireEvent.focus(back);
-    expect(Number(back.style.zIndex)).toBe(ZIndex.MAX);
+    expect(Number(back.style.zIndex)).toBe(initialBackZIndex);
 
     fireEvent.blur(back);
-    expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX);
+    expect(Number(back.style.zIndex)).toBe(initialBackZIndex);
   });
 
   it("keeps saved timed mouse and resize events out of the draft motion owner", () => {