Move Someday events to interaction engine (#1788)

* feat(web): move someday events to interaction engine

* feat(web): add someday sidebar interaction sorting

* feat(web): polish someday grid drop animation

* refactor(web): simplify someday interactions

* refine somedays tests and remove weak month coverage

Author: Uarmagan

CONTEXT.md

@@ -79,6 +79,11 @@ An event shown in the all-day row.
 **Grid Event**:
 An event assigned to a concrete day/week calendar slot.
 
+**Planner Sidebar**:
+The calendar side panel that holds navigation, account context, and Someday
+Events.
+_Avoid_: Planning sidebar
+
 **Someday Event**:
 An unscheduled event stored in the sidebar instead of the calendar grid.
 _Avoid_: Someday task
@@ -193,6 +198,16 @@ during Import or Public watch notification handling.
 - A **Task** belongs to a **Date key** and stays local today, even when the user
   is authenticated.
 - A **Someday Event** is an **Event**, not a **Task**.
+- A **Someday Event** can move between **Planner Sidebar** sections without
+  becoming a **Grid Event**.
+- During **Planner Sidebar** sorting, sibling **Someday Events** make room for
+  the dragged event's preview position before the drop commits.
+- When a dragged **Someday Event** leaves the **Planner Sidebar** for a calendar
+  surface, the sidebar stops previewing a sidebar sort.
+- A full **Planner Sidebar** section is not a valid drop target for another
+  **Someday Event**.
+- A **Someday Event** is scheduled as a **Timed Event** or **All-Day Event**
+  based on the calendar surface where it is dropped.
 - A **Recurring Series** has exactly one **Base Event** and zero or more
   **Instance Events**.
 - An **Instance Event** belongs to exactly one **Base Event** through

packages/web/src/common/calendar-interaction/CalendarInteractionEngine.test.ts

@@ -412,6 +412,7 @@ describe("FloatingInteractionOverlay", () => {
 
     expect(overlay.getNode()).toBe(clone);
     expect(clone.parentElement).toBe(document.body);
+    expect(clone.style.position).toBe("fixed");
     expect(clone.style.transition).toBe("none");
     expect(clone.style.transform).toBe("translate3d(7px, 9px, 0)");
     expect(clone.style.height).toBe("24px");

packages/web/src/common/calendar-interaction/dom/overlay/FloatingInteractionOverlay.ts

@@ -26,7 +26,7 @@ export class FloatingInteractionOverlay {
     clone.style.contain = "layout paint style";
     clone.style.height = `${rect.height}px`;
     clone.style.left = `${rect.left}px`;
-    clone.style.position = "absolute";
+    clone.style.position = "fixed";
     clone.style.pointerEvents = "none";
     clone.style.top = `${rect.top}px`;
     clone.style.cursor = cursor ?? "";
@@ -71,9 +71,8 @@ export class FloatingInteractionOverlay {
       this.#node.style.width = `${width}px`;
     }
 
-    this.#node.style.transition = "none";
-    this.#node.style.transform = `translate3d(${transform.x}px, ${transform.y}px, 0)`;
     mutate?.(this.#node);
+    this.#node.style.transform = `translate3d(${transform.x}px, ${transform.y}px, 0)`;
   }
 
   getNode() {

…tion/WeekPointerCaptureBoundary.test.tsx …teractionPointerCaptureBoundary.test.tsxpackages/web/src/views/Week/interaction/WeekPointerCaptureBoundary.test.tsx renamed to packages/web/src/common/calendar-interaction/react/CalendarInteractionPointerCaptureBoundary.test.tsx packages/web/src/views/Week/interaction/WeekPointerCaptureBoundary.test.tsx renamed to packages/web/src/common/calendar-interaction/react/CalendarInteractionPointerCaptureBoundary.test.tsx

@@ -1,31 +1,33 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { type PointerEvent as ReactPointerEvent } from "react";
-import { type WeekInteractionAdapter } from "./adapter/WeekInteractionAdapter";
-import { WeekPointerCaptureBoundary } from "./WeekPointerCaptureBoundary";
+import {
+  CalendarInteractionPointerCaptureBoundary,
+  type CalendarPointerCaptureAdapter,
+} from "./CalendarInteractionPointerCaptureBoundary";
 import { describe, expect, it, mock } from "bun:test";
 
-const createOwningWeekInteractionAdapter = (): WeekInteractionAdapter => {
+const createOwningAdapter = (): CalendarPointerCaptureAdapter => {
   return {
-    ...createNonOwningWeekInteractionAdapter(),
+    ...createNonOwningAdapter(),
     handlePointerDown: () => ({
       reason: "test-owner",
       shouldOwn: true,
     }),
   };
 };
 
-const createCancellationAwareWeekInteractionAdapter = () => {
+const createCancellationAwareAdapter = () => {
   const disconnectCancellationEvents = mock();
 
   return {
-    ...createNonOwningWeekInteractionAdapter(),
+    ...createNonOwningAdapter(),
     cancel: mock(),
     connectCancellationEvents: mock(() => disconnectCancellationEvents),
     disconnectCancellationEvents,
   };
 };
 
-const createNonOwningWeekInteractionAdapter = (): WeekInteractionAdapter => ({
+const createNonOwningAdapter = (): CalendarPointerCaptureAdapter => ({
   cancel: () => undefined,
   connectCancellationEvents: () => () => undefined,
   handlePointerCancel: () => false,
@@ -35,42 +37,40 @@ const createNonOwningWeekInteractionAdapter = (): WeekInteractionAdapter => ({
   }),
   handlePointerMove: () => false,
   handlePointerUp: () => false,
-  ownsPointer: () => false,
-  rebuildLayoutAfterNavigation: () => undefined,
 });
 
-describe("WeekPointerCaptureBoundary", () => {
+describe("CalendarInteractionPointerCaptureBoundary", () => {
   it("does not block child pointer handlers when the adapter declines ownership", () => {
-    const adapter = createNonOwningWeekInteractionAdapter();
+    const adapter = createNonOwningAdapter();
     const onPointerDown = mock(
       (event: ReactPointerEvent<HTMLButtonElement>) => {
         expect(event.defaultPrevented).toBe(false);
       },
     );
 
     render(
-      <WeekPointerCaptureBoundary adapter={adapter}>
+      <CalendarInteractionPointerCaptureBoundary adapter={adapter}>
         <button onPointerDown={onPointerDown} type="button">
           event
         </button>
-      </WeekPointerCaptureBoundary>,
+      </CalendarInteractionPointerCaptureBoundary>,
     );
 
     fireEvent.pointerDown(screen.getByRole("button", { name: "event" }));
 
     expect(onPointerDown).toHaveBeenCalledTimes(1);
   });
 
-  it("can stop propagation once a future adapter owns a pointerdown", () => {
-    const adapter = createOwningWeekInteractionAdapter();
+  it("can stop propagation once an adapter owns a pointerdown", () => {
+    const adapter = createOwningAdapter();
     const onPointerDown = mock();
 
     render(
-      <WeekPointerCaptureBoundary adapter={adapter}>
+      <CalendarInteractionPointerCaptureBoundary adapter={adapter}>
         <button onPointerDown={onPointerDown} type="button">
           event
         </button>
-      </WeekPointerCaptureBoundary>,
+      </CalendarInteractionPointerCaptureBoundary>,
     );
 
     fireEvent.pointerDown(screen.getByRole("button", { name: "event" }));
@@ -79,8 +79,8 @@ describe("WeekPointerCaptureBoundary", () => {
   });
 
   it("stops child pointer continuation handlers once the adapter consumes them", () => {
-    const adapter: WeekInteractionAdapter = {
-      ...createNonOwningWeekInteractionAdapter(),
+    const adapter: CalendarPointerCaptureAdapter = {
+      ...createNonOwningAdapter(),
       handlePointerCancel: mock(() => true),
       handlePointerMove: mock(() => true),
       handlePointerUp: mock(() => true),
@@ -90,7 +90,7 @@ describe("WeekPointerCaptureBoundary", () => {
     const onPointerUp = mock();
 
     render(
-      <WeekPointerCaptureBoundary adapter={adapter}>
+      <CalendarInteractionPointerCaptureBoundary adapter={adapter}>
         <button
           onPointerCancel={onPointerCancel}
           onPointerMove={onPointerMove}
@@ -99,7 +99,7 @@ describe("WeekPointerCaptureBoundary", () => {
         >
           event
         </button>
-      </WeekPointerCaptureBoundary>,
+      </CalendarInteractionPointerCaptureBoundary>,
     );
 
     const eventButton = screen.getByRole("button", { name: "event" });
@@ -117,12 +117,12 @@ describe("WeekPointerCaptureBoundary", () => {
   });
 
   it("connects global cancellation events while mounted and disconnects them on unmount", () => {
-    const adapter = createCancellationAwareWeekInteractionAdapter();
+    const adapter = createCancellationAwareAdapter();
 
     const { unmount } = render(
-      <WeekPointerCaptureBoundary adapter={adapter}>
+      <CalendarInteractionPointerCaptureBoundary adapter={adapter}>
         <button type="button">event</button>
-      </WeekPointerCaptureBoundary>,
+      </CalendarInteractionPointerCaptureBoundary>,
     );
 
     expect(adapter.connectCancellationEvents).toHaveBeenCalledTimes(1);
@@ -134,12 +134,12 @@ describe("WeekPointerCaptureBoundary", () => {
   });
 
   it("cancels any active interaction when unmounted", () => {
-    const adapter = createCancellationAwareWeekInteractionAdapter();
+    const adapter = createCancellationAwareAdapter();
 
     const { unmount } = render(
-      <WeekPointerCaptureBoundary adapter={adapter}>
+      <CalendarInteractionPointerCaptureBoundary adapter={adapter}>
         <button type="button">event</button>
-      </WeekPointerCaptureBoundary>,
+      </CalendarInteractionPointerCaptureBoundary>,
     );
 
     expect(adapter.cancel).not.toHaveBeenCalled();

…teraction/WeekPointerCaptureBoundary.tsx …darInteractionPointerCaptureBoundary.tsxpackages/web/src/views/Week/interaction/WeekPointerCaptureBoundary.tsx renamed to packages/web/src/common/calendar-interaction/react/CalendarInteractionPointerCaptureBoundary.tsx packages/web/src/views/Week/interaction/WeekPointerCaptureBoundary.tsx renamed to packages/web/src/common/calendar-interaction/react/CalendarInteractionPointerCaptureBoundary.tsx

@@ -1,16 +1,30 @@
 import {
   type FC,
-  type PointerEvent as ReactPointerEvent,
   type PropsWithChildren,
+  type PointerEvent as ReactPointerEvent,
   useEffect,
 } from "react";
-import { type WeekInteractionAdapter } from "./adapter/WeekInteractionAdapter";
+import { type CalendarInteractionCancellationTargets } from "../CalendarInteractionEngine";
+
+export interface CalendarPointerCaptureAdapter {
+  cancel(): void;
+  connectCancellationEvents(
+    targets?: CalendarInteractionCancellationTargets,
+  ): () => void;
+  handlePointerCancel(event: PointerEvent): boolean;
+  handlePointerDown(event: PointerEvent): {
+    reason: string;
+    shouldOwn: boolean;
+  };
+  handlePointerMove(event: PointerEvent): boolean;
+  handlePointerUp(event: PointerEvent): boolean;
+}
 
 interface Props extends PropsWithChildren {
-  adapter: WeekInteractionAdapter;
+  adapter: CalendarPointerCaptureAdapter;
 }
 
-export const WeekPointerCaptureBoundary: FC<Props> = ({
+export const CalendarInteractionPointerCaptureBoundary: FC<Props> = ({
   adapter,
   children,
 }) => {

packages/web/src/common/styles/theme.util.ts

@@ -48,6 +48,25 @@ export const gradientByPriority = {
   )})`,
 };
 
+const GRID_UNASSIGNED = c.blueGray400;
+const GRID_WORK = c.blueGray300;
+const GRID_RELATIONS = darken(c.teal, 5);
+const GRID_SELF = c.blueGray200;
+
+export const gridColorByPriority = {
+  [Priorities.UNASSIGNED]: GRID_UNASSIGNED,
+  [Priorities.WORK]: GRID_WORK,
+  [Priorities.RELATIONS]: GRID_RELATIONS,
+  [Priorities.SELF]: GRID_SELF,
+};
+
+export const gridHoverColorByPriority = {
+  [Priorities.UNASSIGNED]: brighten(GRID_UNASSIGNED),
+  [Priorities.WORK]: brighten(GRID_WORK),
+  [Priorities.RELATIONS]: brighten(GRID_RELATIONS),
+  [Priorities.SELF]: brighten(GRID_SELF),
+};
+
 export const blueGradient = `linear-gradient(${c.blue100}, ${c.blue300})`;
 const grayGradient = `linear-gradient(90deg, ${c.gray100}, ${c.gray200})`;
 

packages/web/src/components/DND/DropZone.tsx

@@ -4,22 +4,27 @@ import { type HTMLAttributes, type Ref } from "react";
 interface Props extends HTMLAttributes<HTMLDivElement> {
   innerRef?: Ref<HTMLDivElement>;
   isActive: boolean;
+  isInvalid?: boolean;
 }
 
 export const DropZone = ({
   className,
   innerRef,
   isActive,
+  isInvalid = false,
   ...props
 }: Props) => {
   return (
     <div
       {...props}
+      aria-invalid={isInvalid || undefined}
       className={classNames(
         "relative rounded-default border-2 border-dashed transition-[background-color,border-color] duration-200",
-        isActive
-          ? "border-border-primary bg-bg-secondary"
-          : "border-transparent bg-transparent",
+        isInvalid
+          ? "border-status-error border-solid bg-status-error/10"
+          : isActive
+            ? "border-border-primary bg-bg-secondary"
+            : "border-transparent bg-transparent",
         className,
       )}
       ref={innerRef}

packages/web/src/components/PlannerSidebar/PlannerSidebar.tsx

@@ -2,11 +2,6 @@ import { type HTMLAttributes } from "react";
 import { type Dayjs } from "@core/util/date/dayjs";
 import { ID_SIDEBAR } from "@web/common/constants/web.constants";
 import { type ShortcutOverlaySection } from "@web/components/Shortcuts/ShortcutOverlay/ShortcutsOverlay";
-import { type DateCalcs } from "@web/views/Week/hooks/grid/useDateCalcs";
-import {
-  type Measurements_Grid,
-  type Refs_Grid,
-} from "@web/views/Week/hooks/grid/useGridLayout";
 import { PlannerAccountSummary } from "./PlannerAccountSummary/PlannerAccountSummary";
 import { PlannerMonthPicker } from "./PlannerMonthPicker/PlannerMonthPicker";
 import { PlannerSidebarActions } from "./PlannerSidebarActions/PlannerSidebarActions";
@@ -15,9 +10,6 @@ import { SomedayEventSections } from "./SomedayEventSections/SomedayEventSection
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   calendarDate: Dayjs;
-  dateCalcs?: DateCalcs;
-  gridRefs?: Refs_Grid;
-  measurements?: Measurements_Grid;
   monthsShown?: number;
   isShortcutsOpen: boolean;
   onCloseShortcuts: () => void;
@@ -32,9 +24,6 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 
 export function PlannerSidebar({
   calendarDate,
-  dateCalcs,
-  gridRefs,
-  measurements,
   monthsShown = 1,
   isShortcutsOpen,
   onCloseShortcuts,
@@ -68,9 +57,6 @@ export function PlannerSidebar({
           <section aria-label="Someday events">
             <SomedayEventSections
               calendarDate={calendarDate}
-              dateCalcs={dateCalcs}
-              gridRefs={gridRefs}
-              measurements={measurements}
               viewEnd={viewEnd}
               viewStart={viewStart}
             />