Fix Someday hover times on week grid (#1806)

* fix(web): show someday hover times

* fix(web): match someday preview layout

* fix(web): keep someday hover time visible

* fix(web): stack someday preview time

* fix(web): show past drag time previews

* fix(web): keep someday preview text stacked

* refactor(web): share timed event text styles

Author: Uarmagan

docs/acceptance/events.md

@@ -245,6 +245,12 @@ Someday events can be dragged from the sidebar onto a specific day and time on t
 
 ### Expected Results
 
+- While the Someday event is over a timed grid slot, the preview uses the same
+  layout as a Timed Event: title at the top, time underneath.
+- The preview shows the tentative time while hovering, even if the target time
+  has already passed.
+- If the target time has already passed, the time disappears after drop the same
+  way it does on saved past Timed Events.
 - The event disappears from the sidebar.
 - The event appears on the grid at the dropped time.
 - The event is now a regular scheduled event and persists after a page reload.

e2e/someday/drag-someday-event-mouse.spec.ts

@@ -0,0 +1,95 @@
+import { expect, type Page, test } from "@playwright/test";
+import {
+  createEventTitle,
+  expectSomedayEventVisible,
+  fillTitleAndSaveEventForm,
+  getMainGridPoint,
+  openSomedayEventFormWithMouse,
+  prepareCalendarPage,
+} from "../utils/event-test-utils";
+
+test.skip(
+  ({ isMobile }) => isMobile,
+  "Mouse flows are desktop-only in week view.",
+);
+
+const dragSomedayEventToTimedGrid = async (page: Page, titlePrefix: string) => {
+  const title = createEventTitle(titlePrefix);
+  await openSomedayEventFormWithMouse(page, "week");
+  await fillTitleAndSaveEventForm(page, title);
+  await expectSomedayEventVisible(page, title);
+
+  const somedayEvent = page.locator("#sidebar").getByRole("button", {
+    name: title,
+  });
+  const eventBox = await somedayEvent.boundingBox();
+
+  if (!eventBox) {
+    throw new Error("Expected the Someday event to be visible.");
+  }
+
+  const start = {
+    x: eventBox.x + eventBox.width / 2,
+    y: eventBox.y + eventBox.height / 2,
+  };
+  const target = await getMainGridPoint(page, { xRatio: 0.35, yRatio: 0.35 });
+
+  await page.mouse.move(start.x, start.y);
+  await page.mouse.down();
+  await page.mouse.move(target.x, target.y, { steps: 12 });
+
+  return title;
+};
+
+const expectTimedPreviewTextStack = async (page: Page, title: string) => {
+  const overlay = page.locator("[data-calendar-interaction-overlay]");
+  const titleLabel = overlay.getByText(title);
+  const timeLabel = overlay.locator("[data-someday-interaction-time-label]");
+
+  await expect(overlay).toBeVisible();
+  await expect(timeLabel).toHaveText(
+    /\d{1,2}(?::\d{2})?\s+-\s+\d{1,2}(?::\d{2})?\s*(AM|PM)/i,
+  );
+
+  const titleBox = await titleLabel.boundingBox();
+  const timeBox = await timeLabel.boundingBox();
+
+  if (!titleBox || !timeBox) {
+    throw new Error("Expected the Someday timed preview text to be visible.");
+  }
+
+  expect(timeBox.y + timeBox.height / 2).toBeGreaterThan(
+    titleBox.y + titleBox.height / 2,
+  );
+  expect(timeBox.y - titleBox.y).toBeLessThan(titleBox.height + 8);
+  expect(timeBox.x).toBeLessThan(titleBox.x + 8);
+};
+
+test("shows a timed-grid preview while dragging a someday event", async ({
+  page,
+}) => {
+  await prepareCalendarPage(page);
+  await page.getByRole("button", { name: "Next week" }).click();
+  await page.locator("#mainGrid").waitFor({ state: "visible" });
+
+  const title = await dragSomedayEventToTimedGrid(page, "Someday Drag Preview");
+  await expectTimedPreviewTextStack(page, title);
+
+  await page.mouse.up();
+});
+
+test("shows a timed-grid preview while dragging over a past slot", async ({
+  page,
+}) => {
+  await prepareCalendarPage(page);
+  await page.getByRole("button", { name: "Previous week" }).click();
+  await page.locator("#mainGrid").waitFor({ state: "visible" });
+
+  const title = await dragSomedayEventToTimedGrid(
+    page,
+    "Someday Past Drag Preview",
+  );
+  await expectTimedPreviewTextStack(page, title);
+
+  await page.mouse.up();
+});

e2e/timed/create-event-mouse.spec.ts

@@ -4,6 +4,7 @@ import {
   ensureSidebarOpen,
   expectTimedEventVisible,
   fillTitleAndSaveEventForm,
+  getMainGridPoint,
   openTimedEventFormWithMouse,
   prepareCalendarPage,
 } from "../utils/event-test-utils";
@@ -14,24 +15,6 @@ interface StoredTimedEvent {
   title?: string;
 }
 
-const getMainGridPoint = async (
-  page: Page,
-  { xRatio = 0.3, yRatio = 0.3 } = {},
-) => {
-  const mainGrid = page.locator("#mainGrid");
-  await mainGrid.scrollIntoViewIfNeeded();
-  const box = await mainGrid.boundingBox();
-
-  if (!box) {
-    throw new Error("Expected the week grid to be visible.");
-  }
-
-  return {
-    x: box.x + box.width * xRatio,
-    y: box.y + box.height * yRatio,
-  };
-};
-
 const getSavedEventsByTitle = (page: Page, title: string) =>
   page.evaluate(async (eventTitle) => {
     const db = await new Promise<IDBDatabase>((resolve, reject) => {

e2e/utils/event-test-utils.ts

@@ -227,6 +227,24 @@ export const clickGridCenter = async (page: Page, locator: Locator) => {
   await page.mouse.up();
 };
 
+export const getMainGridPoint = async (
+  page: Page,
+  { xRatio = 0.3, yRatio = 0.3 } = {},
+) => {
+  const mainGrid = page.locator("#mainGrid");
+  await mainGrid.scrollIntoViewIfNeeded();
+  const box = await mainGrid.boundingBox();
+
+  if (!box) {
+    throw new Error("Expected the week grid to be visible.");
+  }
+
+  return {
+    x: box.x + box.width * xRatio,
+    y: box.y + box.height * yRatio,
+  };
+};
+
 /**
  * Fills the event form title and submits via the Save control (role=button, name Save).
  * Keyboard shortcuts for submit (Enter / Mod+Enter) are not driven here: Playwright’s

packages/web/src/components/PlannerSidebar/SomedayEventSections/SomedayEvents/SomedayEventContainer/SomedayEventRectangle.tsx

@@ -50,7 +50,10 @@ export const SomedayEventRectangle = ({
         direction={FlexDirections.ROW}
         justifyContent={JustifyContent.SPACE_BETWEEN}
       >
-        <div className="flex min-w-0 flex-1 items-center gap-1.5">
+        <div
+          className="flex min-w-0 flex-1 items-center gap-1.5"
+          data-someday-event-title-row="true"
+        >
           <DotsSixVertical
             aria-hidden="true"
             className="shrink-0 text-text-light"

packages/web/src/components/PlannerSidebar/SomedayEventSections/interaction/adapter/SomedayInteractionAdapter.test.ts

@@ -101,7 +101,11 @@ const setReducedMotionPreference = (matches: boolean) => {
   };
 };
 
-const createHarness = () => {
+const createHarness = ({
+  viewStart = dayjs("2026-05-17"),
+}: {
+  viewStart?: ReturnType<typeof dayjs>;
+} = {}) => {
   document.body.innerHTML = "";
   somedayDropTargetRegistry.clear();
   somedayEventRegistry.clear();
@@ -112,6 +116,8 @@ const createHarness = () => {
   const timerCallbacks = new Map<unknown, () => void>();
   const event = createSomedayEvent();
   const source = document.createElement("div");
+  const sourceContent = document.createElement("div");
+  const sourceTitleRow = document.createElement("div");
   const sourceChild = document.createElement("span");
   const sourceButton = document.createElement("button");
   const weekDropTarget = document.createElement("div");
@@ -126,7 +132,12 @@ const createHarness = () => {
   const onRequestWeekNavigation = mock();
 
   sourceButton.type = "button";
-  source.append(sourceChild, sourceButton);
+  sourceButton.setAttribute("data-someday-drag-affordance", "true");
+  sourceContent.className = "h-full";
+  sourceTitleRow.setAttribute("data-someday-event-title-row", "true");
+  sourceTitleRow.append(sourceChild);
+  sourceContent.append(sourceTitleRow, sourceButton);
+  source.append(sourceContent);
   weekDropTarget.append(source);
   mainGrid.id = ID_GRID_MAIN;
   timedColumns.id = ID_GRID_COLUMNS_TIMED;
@@ -205,7 +216,7 @@ const createHarness = () => {
       mainGridElement: mainGrid,
       timedColumnsElement: timedColumns,
     }),
-    getViewStart: () => dayjs("2026-05-17"),
+    getViewStart: () => viewStart,
     runtime: () => ({
       getSomedayEventById: (eventId) => (eventId === event._id ? event : null),
       onCancelInteraction,
@@ -362,6 +373,87 @@ describe("SomedayInteractionAdapter", () => {
     expect(overlay?.querySelector("[data-someday-drag-affordance]")).toBeNull();
   });
 
+  it("shows the tentative timed-grid range inside the visible Someday preview", () => {
+    const { adapter, flushFrame, sourceChild, timedColumns } = createHarness({
+      viewStart: dayjs().add(1, "week").startOf("week"),
+    });
+
+    adapter.handlePointerDown(
+      makePointerEvent("pointerdown", { target: sourceChild, x: 20, y: 12 }),
+    );
+    adapter.handlePointerMove(
+      makePointerEvent("pointermove", {
+        target: timedColumns,
+        x: 250,
+        y: 220,
+      }),
+    );
+    flushFrame();
+
+    const overlay = document.body.querySelector<HTMLElement>(
+      "[data-calendar-interaction-overlay]",
+    );
+    const timeLabel = overlay?.querySelector<HTMLElement>(
+      "[data-someday-interaction-time-label]",
+    );
+    const titleRow = overlay?.querySelector<HTMLElement>(
+      "[data-someday-event-title-row]",
+    );
+    const textStack = titleRow?.parentElement;
+
+    expect(timeLabel).toBeTruthy();
+    expect(timeLabel?.textContent).toMatch(/2\s+-\s+3 AM/);
+    expect(timeLabel?.style.display).toBe("block");
+    expect(timeLabel?.parentElement).toBe(textStack);
+    expect(timeLabel?.previousElementSibling).toBe(titleRow);
+    expect(textStack?.style.alignItems).toBe("flex-start");
+    expect(textStack?.style.display).toBe("flex");
+    expect(textStack?.style.flexDirection).toBe("column");
+    expect(titleRow?.style.alignSelf).toBe("stretch");
+    expect(titleRow?.style.alignItems).toBe("flex-start");
+    expect(titleRow?.style.flex).toBe("0 1 auto");
+    expect(titleRow?.style.flexDirection).toBe("row");
+  });
+
+  it("keeps the tentative timed-grid range visible for past targets", () => {
+    const { adapter, flushFrame, sourceChild, timedColumns } = createHarness({
+      viewStart: dayjs().subtract(1, "week").startOf("week"),
+    });
+
+    adapter.handlePointerDown(
+      makePointerEvent("pointerdown", { target: sourceChild, x: 20, y: 12 }),
+    );
+    adapter.handlePointerMove(
+      makePointerEvent("pointermove", {
+        target: timedColumns,
+        x: 250,
+        y: 220,
+      }),
+    );
+    flushFrame();
+
+    const overlay = document.body.querySelector<HTMLElement>(
+      "[data-calendar-interaction-overlay]",
+    );
+    const titleRow = overlay?.querySelector<HTMLElement>(
+      "[data-someday-event-title-row]",
+    );
+
+    expect(
+      overlay?.querySelector("[data-someday-interaction-time-label]")
+        ?.textContent,
+    ).toMatch(/2\s+-\s+3 AM/);
+    expect(
+      overlay?.querySelector("[data-someday-interaction-time-label]")
+        ?.parentElement,
+    ).toBe(titleRow?.parentElement);
+    expect(titleRow?.style.alignSelf).toBe("stretch");
+    expect(titleRow?.style.alignItems).toBe("flex-start");
+    expect(titleRow?.style.flex).toBe("0 1 auto");
+    expect(titleRow?.style.flexDirection).toBe("row");
+    expect(titleRow?.parentElement?.style.flexDirection).toBe("column");
+  });
+
   it("disables Someday overlay motion when reduced motion is preferred", () => {
     const restoreMatchMedia = setReducedMotionPreference(true);
     const { adapter, flushFrame, sourceChild, timedColumns } = createHarness();