refactor: restructure settings

refactor: migrate react components

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

@@ -30,7 +30,7 @@ export default function BlockRow({ blockId, colour, hidePast, rowId, rowIndex, t
   }
 
   return (
-    <tr className={style.blockRow} style={{ '--user-bg': colour }}>
+    <tr className={style.blockRow} style={{ '--user-bg': colour }} data-testid='cuesheet-block'>
       {showActionMenu && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton

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

@@ -18,6 +18,7 @@ function DelayRow({ duration, parentBgColour }: DelayRowProps) {
       style={{
         '--user-bg': parentBgColour ?? 'transparent',
       }}
+      data-testid='cuesheet-delay'
     >
       <td tabIndex={0} role='cell'>
         {delayTime}

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

@@ -84,6 +84,7 @@ export default function EventRow({
         '--user-bg': parentBgColour ?? 'transparent',
       }}
       ref={selectedRef ?? ownRef}
+      data-testid='cuesheet-event'
     >
       {showActionMenu && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>