refactor: extract edit element in table

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss

@@ -32,23 +32,19 @@ $table-header-font-size: calc(1rem - 2px);
 
 .tableHeader,
 .eventRow {
+  .actionColumn {
+    width: calc(2rem + 0.5rem); // sm button size (--chakra-sizes-8) + 2 * padding
+    background-color: transparent;
+  }
+
   .indexColumn {
     display: flex;
     align-items: center;
     justify-content: end;
-    
-    min-width: 3em; // allow for 3-digit numbers
-    text-align: right;
-    font-weight: 400;
-    font-size: $table-header-font-size;
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    background-color: $gray-1300; // will be overridden inline
-  }
 
-  .actionColumn {
-    width: calc(2rem + 0.5rem); // sm button size (--chakra-sizes-8) + 2 * padding
+    min-width: 3em; // allow for 3-digit numbers
+    font-size: $table-header-font-size;
+    background-color: $gray-1300; // will be overridden inline
   }
 }
 

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -1,6 +1,5 @@
 import { useRef } from 'react';
-import { IconButton, Menu, MenuButton } from '@chakra-ui/react';
-import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
+import { Menu } from '@chakra-ui/react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import Color from 'color';
 import {
@@ -11,6 +10,7 @@ import {
   OntimeEvent,
   OntimeRundown,
   OntimeRundownEntry,
+  TimeField,
 } from 'ontime-types';
 
 import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -38,7 +38,7 @@ interface CuesheetTableProps {
 export default function CuesheetTable(props: CuesheetTableProps) {
   const { data, columns, showModal } = props;
 
-  const { updateEvent } = useEventAction();
+  const { updateEvent, updateTimer } = useEventAction();
   const { selectedEventId } = useSelectedEventId();
   const { followSelected, hideDelays, hidePast, hideIndexColumn } = useCuesheetOptions();
   const { columnVisibility, columnOrder, columnSizing, resetColumnOrder, setColumnVisibility, setColumnSizing } =
@@ -61,7 +61,7 @@ export default function CuesheetTable(props: CuesheetTableProps) {
     onColumnSizingChange: setColumnSizing,
     getCoreRowModel: getCoreRowModel(),
     meta: {
-      handleUpdate: async (rowIndex: number, accessor: string, payload: string, isCustom = false) => {
+      handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom = false) => {
         // check if value is the same
         const event = data[rowIndex];
         if (!event || !isOntimeEvent(event)) {
@@ -82,6 +82,10 @@ export default function CuesheetTable(props: CuesheetTableProps) {
 
         updateEvent({ id: event.id, [accessor]: payload });
       },
+      handleUpdateTimer: (eventId: string, field: TimeField, payload) => {
+        // the timer element already contains logic to avoid submitting a unchanged value
+        updateTimer(eventId, field, payload, true);
+      },
     },
   });
 
@@ -166,15 +170,6 @@ export default function CuesheetTable(props: CuesheetTableProps) {
                       colour={entry.colour}
                       showIndexColumn={!hideIndexColumn}
                     >
-                      <td>
-                        <MenuButton
-                          as={IconButton}
-                          size='sm'
-                          aria-label='Options'
-                          icon={<IoEllipsisHorizontal />}
-                          variant='ontime-subtle'
-                        />
-                      </td>
                       {row.getVisibleCells().map((cell) => {
                         return (
                           <td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>

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>