✨ Feat: Custom actions context menu (#247)

* feature(web): Context menu UI implementation

UI implementation of context menu, no business logic yet. WIP.

* chore(web): Implement `theme.shape.borderRadius` to have border radius styling be consistent in UI

Purpose is consistency. any inconsistent border radius, even by small pixel differences, will look "off" to the user.

* chore(web): refactor component to use `styled-components`

Purpose is to remain consistent across codebase

* feature(web): Detect event right click from `GridContextMenuWrapper` POC

Detecting whether an event was right clicked or not in a clean manner solves a big hurdle.

* chore(web): Fix TS type

Not sure why it was of type button in the first place, but this fixes it.

* feature(web): Context menu edit event POC

This commit demonstrates a POC for editing an event and inner functionality of how the context menu will interact with an event in its draft state.

* feature(web): add invisible backdrop when the context menu is open

the purpose is to prevent an additional action from occurring when user tries to close the context menu by clicking outside. Mimicking user expecations.

* feature(web): Migrate vanilla context menu implementation to Floating UI

Floating UI is a well tested library that handles a lot of nuances and edge cases with floating elements positioning

* feature(web): Context menu enhancements

- Replace `event` local state with draft event redux state as the source of truth for the selected event
- Handle setting and clearing the right-clicked event as the draft event
- rename `event` to `gridEvent` to avoid confusion with DOM events
- TS typing and error fixing

* feature(web): Prevent draft event window form from displaying when event is right clicked

This is a crucial line. It allows us to handle right clicks separately (EG: Displaying a context menu)

* feature(web): Context menu -> edit priority, refactor code

- Implement context menu edit priority
- Decouple `ContextMenu` and create `ContextMenuItems` to separate floating ui menu logic from menu items business logic

* feature(web): Context menu -> Delete event

Implement delete event

* feature(web): support context menu for all-day events

* feature(web): main grid area UX enhancement

If user right clicks on an empty area in the main grid, we prevent drafting an event.
This change should be a better match to user expectations

* chore(web): extract `getSomedayEvents` into a reusable consistent function

* chore(web): Rename `gridEvent` prop to `calEvent`

this will ease the transition to supporting someday events later. A 'grid' event is an event that is usually associated with the main grid and not someday events.

* chore(web): remove todo comments

* chore(web): remove invisible backdrop component

* bug(web): fix TS type import path

* chore(web): Replace priority colors magic strings with constant ones

* chore/feature(web): Implement `IconButton`, refactor code.

- Implement `IconButton`, a reusable component for displaying an icon button
- Remove `Delete` 'icon'. An `icon` component should not mix concerns with a `button` component.
- Refactor instances where we use `Delete` icon

* feature(web): Implement icons for menu context items

* bug(web): Prevent context menu from opening for optimistic events

Prevents optimistic events from being edited, which is to be expected.

* feat(web): Add menu background color to theme

Extend the theme with a new menu background color and update the context menu styling to use theme-based colors

* refactor(web): Centralize event element ID constant

Move the `DATA_EVENT_ELEMENT_ID` constant to the web constants file and update imports across components to use the centralized constant

* refactor(web): Inline getSomedayEvents utility function

Move the getSomedayEvents utility function directly into the SomedayEvents component, removing the separate utility file. (I'm in the process of reorganizing the utils dir, so this will save me from having a conflict)

* refactor(web): Relocate IconButton component file

Move IconButton component to a more specific file location and update import paths. We're moving away from index.ts files for the sake of more declarative imports. Why? Mostly because TK said so TBH.

https://tkdodo.eu/blog/please-stop-using-barrel-files

* refactor(web): Remove source property from draft event slice

I think we'll need some way to start tracking these sources, but it's not needed for this use-case. So, I'd rather wait until it actually is required so that we can implement it with a real use-case

* refactor(web): Rename calEvent prop to event in context menu components

* refactor(web): Extract styled components for context menu items

using named import for consistency, explicitness, and better tree-shaking

* refactor(web): Improve error handling and variable naming in GridContextMenuWrapper

* fix(web): Update draft slice discard action call in GridContextMenuWrapper

Pass empty object to discard action to match expected signature

---------

Co-authored-by: Tyler Dane <tyler@switchback.tech>

Author: that-one-arab

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

@@ -17,6 +17,7 @@ export const ID_SOMEDAY_DRAFT = "somedayDraft";
 export const ID_SOMEDAY_EVENTS = "ID_SOMEDAY_EVENTS";
 export const ID_SOMEDAY_EVENT_FORM = "Someday Event Form";
 export const ID_OPTIMISTIC_PREFIX = "optimistic";
+export const DATA_EVENT_ELEMENT_ID = "data-event-id";
 
 export const OPTIONS_RECURRENCE = {
   WEEK: { value: Recurrence_Selection.WEEK, label: "week" },

packages/web/src/common/styles/default-theme.d.ts

@@ -19,6 +19,9 @@ declare module "styled-components" {
       gridLine: {
         primary: string;
       };
+      menu: {
+        bg: string;
+      };
       panel: {
         bg: string;
         scrollbar: string;
@@ -72,5 +75,8 @@ declare module "styled-components" {
     transition: {
       default: string;
     };
+    shape: {
+      borderRadius: string;
+    };
   }
 }

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

@@ -50,6 +50,9 @@ export const theme: DefaultTheme = {
     gridLine: {
       primary: c.gray800,
     },
+    menu: {
+      bg: c.white200,
+    },
     panel: {
       bg: c.gray600,
       scrollbar: c.gray500,
@@ -103,4 +106,7 @@ export const theme: DefaultTheme = {
   transition: {
     default: "0.3s",
   },
+  shape: {
+    borderRadius: "4px",
+  },
 };

packages/web/src/common/utils/event.util.ts

@@ -19,6 +19,7 @@ import {
 import {
   COLUMN_MONTH,
   COLUMN_WEEK,
+  DATA_EVENT_ELEMENT_ID,
   ID_OPTIMISTIC_PREFIX,
 } from "../constants/web.constants";
 
@@ -284,3 +285,8 @@ const _assembleBaseEvent = (
 
   return baseEvent;
 };
+
+export const getCalendarEventIdFromElement = (element: HTMLElement) => {
+  const eventElement = element.closest(`[${DATA_EVENT_ELEMENT_ID}]`);
+  return eventElement ? eventElement.getAttribute(DATA_EVENT_ELEMENT_ID) : null;
+};

packages/web/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { IconButtonProps, StyledIconButton } from "./styled";
+
+const IconButton: React.FC<IconButtonProps> = ({
+  size = "medium",
+  children: icon,
+  ...props
+}) => {
+  return (
+    <StyledIconButton size={size} {...props}>
+      {icon}
+    </StyledIconButton>
+  );
+};
+
+export default IconButton;

packages/web/src/components/IconButton/styled.ts

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+
+export type IconButtonSize = "small" | "medium" | "large";
+
+const sizeMap: Record<IconButtonSize, number> = {
+  small: 20,
+  medium: 27,
+  large: 34,
+};
+
+export interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: IconButtonSize;
+}
+
+const buttonStyleReset = `
+	background: none;
+	color: inherit;
+	border: none;
+	padding: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: inherit;
+`;
+
+export const StyledIconButton = styled.button<IconButtonProps>`
+  ${buttonStyleReset}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  font-size: ${({ size = "medium" }) => sizeMap[size]}px;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+`;

packages/web/src/components/Icons/Delete.tsx

@@ -4,6 +4,6 @@ import { Flex } from "@web/components/Flex";
 export const StyledShortcutTip = styled(Flex)`
   background-color: ${({ theme }) => theme.color.fg.primary};
   border: 1px solid ${({ theme }) => theme.color.bg.primary};
-  border-radius: 3px;
+  border-radius: ${({ theme }) => theme.shape.borderRadius};
   padding: 5px 10px;
 `;

packages/web/src/components/Tooltip/styled.ts

@@ -4,6 +4,7 @@ import { ID_MAIN } from "@web/common/constants/web.constants";
 import { useAppSelector } from "@web/store/store.hooks";
 import { selectIsSidebarOpen } from "@web/ducks/events/selectors/view.selectors";
 
+import GridContextMenuWrapper from "./components/Grid/ContextMenu/GridContextMenuWrapper";
 import { Grid } from "./components/Grid/";
 import { useScroll } from "./hooks/grid/useScroll";
 import { useToday } from "./hooks/useToday";
@@ -84,14 +85,16 @@ export const CalendarView = () => {
           weekProps={weekProps}
         />
 
-        <Grid
-          dateCalcs={dateCalcs}
-          isSidebarOpen={isSidebarOpen}
-          gridRefs={gridRefs}
-          measurements={measurements}
-          today={today}
-          weekProps={weekProps}
-        />
+        <GridContextMenuWrapper weekProps={weekProps}>
+          <Grid
+            dateCalcs={dateCalcs}
+            isSidebarOpen={isSidebarOpen}
+            gridRefs={gridRefs}
+            measurements={measurements}
+            today={today}
+            weekProps={weekProps}
+          />
+        </GridContextMenuWrapper>
       </StyledCalendar>
     </Styled>
   );

packages/web/src/views/Calendar/Calendar.tsx

@@ -19,7 +19,10 @@ import {
 } from "@web/components/Flex/styled";
 import { getLineClamp } from "@web/common/utils/grid.util";
 import { getTimesLabel } from "@web/common/utils/web.date.util";
-import { ZIndex } from "@web/common/constants/web.constants";
+import {
+  ZIndex,
+  DATA_EVENT_ELEMENT_ID,
+} from "@web/common/constants/web.constants";
 import { Text } from "@web/components/Text";
 
 import { StyledEvent, StyledEventScaler, StyledEventTitle } from "../../styled";
@@ -53,7 +56,7 @@ const _GridEvent = (
     onScalerMouseDown,
     weekProps,
   }: Props,
-  ref: ForwardedRef<HTMLButtonElement>
+  ref: ForwardedRef<HTMLDivElement>
 ) => {
   const { component } = weekProps;
 
@@ -74,30 +77,39 @@ const _GridEvent = (
     [position.height]
   );
 
-  return (
-    <StyledEvent
-      allDay={event.isAllDay || false}
-      className={isDraft ? "active" : undefined}
-      height={position.height || 0}
-      isDragging={isDragging}
-      isInPast={isInPast}
-      isPlaceholder={isPlaceholder}
-      isOptimistic={isOptimistic}
-      isResizing={isResizing}
-      left={position.left}
-      lineClamp={lineClamp}
-      onMouseDown={(e) => {
-        if (isOptimistic) return;
+  const styledEventProps = {
+    [DATA_EVENT_ELEMENT_ID]: event._id,
+    allDay: event.isAllDay || false,
+    className: isDraft ? "active" : undefined,
+    height: position.height || 0,
+    isDragging,
+    isInPast,
+    isPlaceholder,
+    isOptimistic,
+    isResizing,
+    left: position.left,
+    lineClamp,
+    onMouseDown: (e: MouseEvent) => {
+      const isRightBtnClick = e.button === 2;
+
+      if (
+        isOptimistic || // Event is in the process of being created, don't allow any interactions until it's completely saved
+        isRightBtnClick
+      )
+        return;
 
-        onEventMouseDown(event, e);
-      }}
-      priority={event.priority || Priorities.UNASSIGNED}
-      ref={ref}
-      role="button"
-      tabindex="0"
-      top={position.top}
-      width={position.width || 0}
-    >
+      onEventMouseDown(event, e);
+    },
+    priority: event.priority || Priorities.UNASSIGNED,
+    ref,
+    role: "button",
+    tabindex: "0",
+    top: position.top,
+    width: position.width || 0,
+  };
+
+  return (
+    <StyledEvent {...styledEventProps}>
       <Flex
         alignItems={AlignItems.FLEX_START}
         direction={FlexDirections.COLUMN}