refactor: review action menu

apps/client/src/common/components/menu/Menu.module.scss

@@ -0,0 +1,70 @@
+.positioner {
+  outline: 0;
+}
+
+.popup {
+  box-sizing: border-box;
+  padding-block: 0.25rem;
+
+  color: $ui-white;
+  background-color: $gray-1250;
+  font-size: calc(1rem - 2px);
+
+  border-radius: 3px;
+  border: 1px solid $gray-1000;
+  box-shadow: $box-shadow-l1;
+  outline: none;
+
+  transform-origin: var(--transform-origin);
+  transition:
+    transform 150ms,
+    opacity 150ms;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+
+.item {
+  outline: 0;
+  cursor: default;
+  padding-block: 0.5rem;
+  padding-inline: 1rem 2rem;
+
+  display: flex;
+  gap: 0.5rem;
+  line-height: 1em;
+
+  svg {
+    color: $gray-500;
+  }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &[data-highlighted] {
+    z-index: 0;
+    position: relative;
+  }
+
+  &[data-highlighted]:not([data-disabled])::before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0.25rem;
+    border-radius: 3px;
+    background-color: $gray-1000;
+  }
+}
+
+.separator {
+  margin: 0.25rem 0.75rem;
+  height: 1px;
+  background-color: $white-7;
+}

apps/client/src/common/components/menu/Menu.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { Menu as BaseMenu } from '@base-ui-components/react/menu';
+
+import style from './Menu.module.scss';
+
+type MenuItemDivider = { type: 'divider' };
+type MenuItem = {
+  type: 'item';
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+interface MenuProps {
+  items: Array<MenuItemDivider | MenuItem>;
+  isOpen: boolean;
+  position: { x: number; y: number };
+  onClose: () => void;
+}
+
+export default function Menu({ items, isOpen, position, onClose }: MenuProps) {
+  return (
+    <BaseMenu.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <BaseMenu.Trigger
+        style={{ position: 'absolute', left: position.x, top: position.y, pointerEvents: 'none' }}
+        aria-hidden
+      />
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner className={style.positioner} align='start' sideOffset={8}>
+          <BaseMenu.Popup className={style.popup}>
+            {items.map((item, index) => {
+              if (item.type === 'divider') {
+                return <BaseMenu.Separator key={index} className={style.separator} />;
+              }
+              return (
+                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
+                  {item.icon} {item.label}
+                </BaseMenu.Item>
+              );
+            })}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.Root>
+  );
+}

apps/client/src/common/components/popover/Popover.module.scss

@@ -1,16 +1,14 @@
 .popup {
   box-sizing: border-box;
   padding: 1rem 1.5rem;
-  z-index: $zindex-dialog;
 
   color: $ui-white;
   background-color: $gray-1250;
 
   border-radius: 3px;  
   box-shadow: $box-shadow-l1;
-  border: 2px solid $gray-1200;
+  border: 1px solid $gray-1000;
 
-  //width: 32rem;
   max-width: 90vw;
 
   transform-origin: var(--transform-origin);