refactor: extract edit element in table

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

@@ -23,8 +23,8 @@ export default function CuesheetHeader(props: CuesheetHeaderProps) {
 
         return (
           <tr key={headerGroup.id}>
-            <th className={style.indexColumn}>{showIndexColumn && '#'}</th>
             <th className={style.actionColumn} />
+            <th className={style.indexColumn}>{showIndexColumn && '#'}</th>
             <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
               {headerGroup.headers.map((header) => {
                 const width = header.getSize();

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

@@ -1,4 +1,6 @@
 import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
+import { IconButton, MenuButton } from '@chakra-ui/react';
+import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
 import Color from 'color';
 
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
@@ -55,6 +57,15 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
       style={{ opacity: `${isPast ? '0.2' : '1'}` }}
       ref={selectedRef ?? ownRef}
     >
+      <td className={style.actionColumn}>
+        <MenuButton
+          as={IconButton}
+          size='sm'
+          aria-label='Options'
+          icon={<IoEllipsisHorizontal />}
+          variant='ontime-subtle'
+        />
+      </td>
       <td className={style.indexColumn} style={{ backgroundColor, color: mutedText }}>
         {showIndexColumn && eventIndex}
       </td>