:recycle refactor(day-view): use single floating context(#1360)

* :recycle refactor(day-view): use single floating context

- Updated import paths for hooks and context providers in Day view components.
- Removed unused `useMaxAgendaZIndex` hook and its associated tests.
- Introduced `useOpenAgendaEventPreview` and `useOpenEventContextMenu` hooks for handling event previews and context menus.
- Modified `useDateInView` and `useDateNavigation` hooks to use the new context structure.
- Enhanced `DayViewContent` to include new components for event previews and context menus.
- Updated event form handling in `useOpenEventForm` to improve cursor positioning and event data management.
- Refactored tests to align with new import paths and structure.
- Cleaned up unused imports and variables across various files.

* :recycle refactor(useOpenEventForm): remove unused parameters from tests

Author: victor-enogwe

AGENTS.md

@@ -6,6 +6,7 @@ Always reference these instructions first and fallback to search or bash command
 
 1. When working in `packages/web`, follow React best practices and idiomatic patterns
 2. When working in `packages/backend` or `packages/core`, follow Node.js best practices and idiomatic patterns
+3. Always use module aliased paths for imports when importing Compass modules.
 
 ## Working Effectively
 
@@ -19,7 +20,7 @@ Always reference these instructions first and fallback to search or bash command
 
 - **CRITICAL**: The backend requires external service credentials (Google OAuth, Supertokens, MongoDB) to run properly
 - **Web Development** (RECOMMENDED for coding):
-  - `yarn dev:web` - Takes ~10 seconds to build. Serves on http://localhost:9080/
+  - `yarn dev:web` - Takes ~10 seconds to build. Serves on <http://localhost:9080/>
   - Frontend works standalone without backend services
 - **Backend Development** (requires full setup):
   - `yarn dev:backend` - Fails without proper .env configuration
@@ -31,6 +32,8 @@ Always reference these instructions first and fallback to search or bash command
 
 - Write tests the way a user would use the application by using the DOM and user interactions with `@testing-library/user-event` rather than internal implementation details of React components.
 - Do NOT use `data-` attributes or CSS selectors to locate elements. Use semantic locators and roles instead.
+- When writing tests, avoid mocking as much as possible.
+- Where mocking is inevitable, use spies to sub out specific module functions before attempting to mock the whole module.
 
 #### Running Tests
 
@@ -141,7 +144,7 @@ TZ=Etc/UTC
 1. **Start Development**: `yarn dev:web` (frontend only, always works)
 2. **Run Tests**: `yarn test:core && yarn test:web` (skips problematic backend tests)
 3. **Check Code Style**: `yarn prettier . --write`
-4. **Manual Validation**: Open http://localhost:9080/ and verify login page loads
+4. **Manual Validation**: Open <http://localhost:9080/> and verify login page loads
 
 ### Styling
 

packages/web/src/auth/UserProvider.test.tsx

@@ -3,11 +3,12 @@ import { rest } from "msw";
 import { usePostHog } from "posthog-js/react";
 import { act } from "react";
 import "@testing-library/jest-dom";
-import { render, waitFor } from "@testing-library/react";
-import { Status } from "../../../core/src/errors/status.codes";
-import { server } from "../__tests__/__mocks__/server/mock.server";
-import { ENV_WEB } from "../common/constants/env.constants";
-import { UserProvider } from "./UserProvider";
+import { render, screen, waitFor } from "@testing-library/react";
+import { Status } from "@core/errors/status.codes";
+import { server } from "@web/__tests__/__mocks__/server/mock.server";
+import { UserProvider } from "@web/auth/UserProvider";
+import { UserApi } from "@web/common/apis/user.api";
+import { ENV_WEB } from "@web/common/constants/env.constants";
 
 // Mock PostHog
 jest.mock("posthog-js/react");
@@ -35,15 +36,17 @@ describe("UserProvider", () => {
         identify: mockIdentify,
       } as any);
 
-      await act(() =>
-        render(
-          <UserProvider>
-            <div>Test Child</div>
-          </UserProvider>,
-        ),
+      render(
+        <UserProvider>
+          <div>Test Child</div>
+        </UserProvider>,
       );
 
       // Wait for async data fetch and PostHog identify to be called
+      await waitFor(() => {
+        expect(screen.getByText("Test Child")).toBeInTheDocument();
+      });
+
       expect(mockIdentify).toHaveBeenCalledWith(testEmail, {
         email: testEmail,
         userId: testUserId,
@@ -57,14 +60,16 @@ describe("UserProvider", () => {
       // Mock PostHog as disabled (returns undefined/null)
       mockUsePostHog.mockReturnValue(undefined as any);
 
-      await act(() =>
-        render(
-          <UserProvider>
-            <div>Test Child</div>
-          </UserProvider>,
-        ),
+      render(
+        <UserProvider>
+          <div>Test Child</div>
+        </UserProvider>,
       );
 
+      await waitFor(() => {
+        expect(screen.getByText("Test Child")).toBeInTheDocument();
+      });
+
       // Verify identify was never called
       expect(mockIdentify).not.toHaveBeenCalled();
     });
@@ -84,19 +89,22 @@ describe("UserProvider", () => {
         identify: mockIdentify,
       } as any);
 
-      await act(() =>
-        render(
-          <UserProvider>
-            <div>Test Child</div>
-          </UserProvider>,
-        ),
+      render(
+        <UserProvider>
+          <div>Test Child</div>
+        </UserProvider>,
       );
 
+      await waitFor(() => {
+        expect(screen.getByText("Test Child")).toBeInTheDocument();
+      });
+
       // Verify identify was not called because email is missing
       expect(mockIdentify).not.toHaveBeenCalled();
     });
 
     it("should NOT call posthog.identify when userId is missing", async () => {
+      const getProfileSpy = jest.spyOn(UserApi, "getProfile");
       server.use(
         rest.get(`${ENV_WEB.API_BASEURL}/user/profile`, (_req, res, ctx) => {
           return res(
@@ -111,14 +119,19 @@ describe("UserProvider", () => {
         identify: mockIdentify,
       } as any);
 
-      await act(() =>
-        render(
-          <UserProvider>
-            <div>Test Child</div>
-          </UserProvider>,
-        ),
+      render(
+        <UserProvider>
+          <div>Test Child</div>
+        </UserProvider>,
       );
+
+      await waitFor(() => expect(getProfileSpy).toHaveBeenCalled());
+      await act(async () => {
+        await getProfileSpy.mock.results[0].value;
+      });
+
       expect(mockIdentify).not.toHaveBeenCalled();
+      getProfileSpy.mockRestore();
     });
 
     it("should handle posthog.identify not being a function gracefully", async () => {
@@ -136,6 +149,10 @@ describe("UserProvider", () => {
         );
       }).not.toThrow();
 
+      await waitFor(() => {
+        expect(screen.getByText("Test Child")).toBeInTheDocument();
+      });
+
       // Verify identify was not called
       expect(mockIdentify).not.toHaveBeenCalled();
     });
@@ -161,24 +178,23 @@ describe("UserProvider", () => {
         identify: mockIdentify,
       } as any);
 
-      const { getByText } = await act(() =>
-        render(
-          <UserProvider>
-            <div>Test Child Content</div>
-          </UserProvider>,
-        ),
+      render(
+        <UserProvider>
+          <div>Test Child Content</div>
+        </UserProvider>,
       );
 
       // Initially should show loading
-      expect(getByText("Loading...")).toBeInTheDocument();
+      expect(screen.getByText("Loading...")).toBeInTheDocument();
 
       // After data loads, should show children
       await waitFor(() => {
-        expect(getByText("Test Child Content")).toBeInTheDocument();
+        expect(screen.getByText("Test Child Content")).toBeInTheDocument();
       });
     });
 
     it("should handle session fetch errors gracefully", async () => {
+      const getProfileSpy = jest.spyOn(UserApi, "getProfile");
       server.use(
         rest.get(`${ENV_WEB.API_BASEURL}/user/profile`, (_req, res, ctx) => {
           return res(ctx.status(Status.UNAUTHORIZED));
@@ -193,14 +209,21 @@ describe("UserProvider", () => {
         identify: mockIdentify,
       } as any);
 
-      await act(() =>
-        render(
-          <UserProvider>
-            <div>Test Child</div>
-          </UserProvider>,
-        ),
+      render(
+        <UserProvider>
+          <div>Test Child</div>
+        </UserProvider>,
       );
 
+      await waitFor(() => expect(getProfileSpy).toHaveBeenCalled());
+      await act(async () => {
+        try {
+          await getProfileSpy.mock.results[0].value;
+        } catch (e) {
+          // Ignore error
+        }
+      });
+
       expect(consoleErrorSpy).toHaveBeenCalledWith(
         new AxiosError("Request failed with status code 401"),
       );
@@ -209,6 +232,7 @@ describe("UserProvider", () => {
       expect(mockIdentify).not.toHaveBeenCalled();
 
       consoleErrorSpy.mockRestore();
+      getProfileSpy.mockRestore();
     });
   });
 });

packages/web/src/common/constants/web.constants.ts

@@ -20,9 +20,6 @@ export const ID_SOMEDAY_EVENTS = "ID_SOMEDAY_EVENTS";
 export const ID_SOMEDAY_EVENT_FORM = "Someday Event Form";
 export const ID_EVENT_FORM_ACTION_MENU = "event-action-menu";
 export const ID_SOMEDAY_EVENT_ACTION_MENU = "someday-event-action-menu";
-export const DATA_EVENT_ELEMENT_ORDER = "data-event-order";
-export const DATA_EVENT_ELEMENT_Z_INDEX = "data-event-z-index";
-export const DATA_EVENT_ELEMENT_OVERLAPPING = "data-event-overlapping";
 export const DATA_EVENT_ELEMENT_ID = "data-event-id";
 export const DATA_TASK_ELEMENT_ID = "data-task-id";
 export const ID_CONTEXT_MENU_ITEMS = "context-menu-items";

packages/web/src/common/context/mouse-position.tsx

@@ -12,7 +12,7 @@ import { useMovementEvent } from "@web/common/hooks/useMovementEvent";
 import {
   DomMovement,
   getElementAtPoint,
-} from "@web/common/utils/dom-events/event-emitter.util";
+} from "@web/common/utils/dom/event-emitter.util";
 
 export interface MouseState {
   mousedown: boolean;