refactor: review action menu

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx

@@ -1,29 +1,43 @@
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { useSessionStorage } from '@mantine/hooks';
 import { flexRender, Table } from '@tanstack/react-table';
-import { OntimeEntry } from 'ontime-types';
+import { EntryId, OntimeEntry, SupportedEntry } from 'ontime-types';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
 import { cx, enDash } from '../../../../common/utils/styleUtils';
 import { AppMode, sessionKeys } from '../../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
+import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
 
 import style from './MilestoneRow.module.scss';
 
 interface MilestoneRowProps {
+  entryId: EntryId;
   isPast: boolean;
   parentBgColour: string | null;
+  parentId: EntryId | null;
   rowBgColour?: string;
   rowId: string;
+  rowIndex: number;
   table: Table<OntimeEntry>;
 }
 
-export default function MilestoneRow({ isPast, parentBgColour, rowBgColour, rowId, table }: MilestoneRowProps) {
+export default function MilestoneRow({
+  entryId,
+  isPast,
+  parentBgColour,
+  parentId,
+  rowBgColour,
+  rowId,
+  rowIndex,
+  table,
+}: MilestoneRowProps) {
   const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
   const [cuesheetMode] = useSessionStorage<AppMode>({
     key: sessionKeys.cuesheetMode,
     defaultValue: AppMode.Edit,
   });
+  const openMenu = useCuesheetTableMenu((store) => store.openMenu);
 
   return (
     <tr
@@ -36,7 +50,16 @@ export default function MilestoneRow({ isPast, parentBgColour, rowBgColour, rowI
     >
       {cuesheetMode === AppMode.Edit && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
-          <IconButton aria-label='Options' variant='subtle-white' size='small' onClick={() => undefined}>
+          <IconButton
+            aria-label='Options'
+            variant='subtle-white'
+            size='small'
+            onClick={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const yPos = 8 + rect.y + rect.height / 2;
+              openMenu({ x: rect.x, y: yPos }, entryId, SupportedEntry.Milestone, rowIndex, parentId);
+            }}
+          >
             <IoEllipsisHorizontal />
           </IconButton>
         </td>