refactor: table mode and context

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.module.scss

@@ -5,6 +5,12 @@
   color: $ontime-delay-text;
   border-left: 4px solid transparent;
 
+  &[data-cursor='true'] {
+    outline: 2px solid $blue-500;
+    outline-offset: -2px;
+    background: color-mix(in srgb, transparent 80%, var(--user-bg, $gray-500) 20%);
+  }
+
   td {
     width: calc(100% - 4px);
     padding-block: 0.5rem;

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

@@ -8,9 +8,10 @@ import style from './DelayRow.module.scss';
 interface DelayRowProps {
   duration: number;
   injectedStyles?: CSSProperties;
+  hasCursor?: boolean;
 }
 
-function DelayRow({ duration, injectedStyles, ...virtuosoProps }: DelayRowProps) {
+function DelayRow({ duration, injectedStyles, hasCursor, ...virtuosoProps }: DelayRowProps) {
   const hideDelays = usePersistedCuesheetOptions((state) => state.hideDelays);
 
   if (hideDelays || duration === 0) {
@@ -29,7 +30,13 @@ function DelayRow({ duration, injectedStyles, ...virtuosoProps }: DelayRowProps)
   const delayTime = millisToDelayString(duration, 'expanded');
 
   return (
-    <tr className={style.delayRow} data-testid='cuesheet-delay' style={injectedStyles} {...virtuosoProps}>
+    <tr
+      className={style.delayRow}
+      data-testid='cuesheet-delay'
+      style={injectedStyles}
+      data-cursor={hasCursor}
+      {...virtuosoProps}
+    >
       <td tabIndex={0}>{delayTime}</td>
     </tr>
   );

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.module.scss

@@ -12,6 +12,12 @@
     background: color-mix(in srgb, transparent 80%, var(--user-bg, $gray-500) 20%);
   }
 
+  &[data-cursor='true'] {
+    outline: 2px solid $blue-500;
+    outline-offset: -2px;
+    background: color-mix(in srgb, transparent 80%, var(--user-bg, $gray-500) 20%);
+  }
+
   &.firstAfterGroup {
     margin-top: 2rem;
   }

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

@@ -27,6 +27,7 @@ interface EventRowProps {
   rowIndex: number;
   table: Table<ExtendedEntry<OntimeEntry>>;
   injectedStyles?: CSSProperties;
+  hasCursor?: boolean;
 }
 
 export default function EventRow({
@@ -44,6 +45,7 @@ export default function EventRow({
   rowIndex,
   table,
   injectedStyles,
+  hasCursor,
   ...virtuosoProps
 }: EventRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -87,6 +89,7 @@ export default function EventRow({
         opacity: `${isPast ? '0.2' : '1'}`,
         '--user-bg': groupColour ?? 'transparent',
       }}
+      data-cursor={hasCursor}
       data-testid='cuesheet-event'
       {...virtuosoProps}
     >

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GroupRow.module.scss

@@ -17,6 +17,12 @@
 
   font-weight: bold;
 
+  &[data-cursor='true'] {
+    outline: 2px solid $blue-500;
+    outline-offset: -2px;
+    background: color-mix(in srgb, transparent 80%, var(--user-bg, $gray-500) 20%);
+  }
+
   td {
     min-height: 3.5rem;
     padding-top: 0.75rem !important; // fighting styles from cuesheet-table

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

@@ -17,6 +17,7 @@ interface GroupRowProps {
   rowIndex: number;
   table: Table<ExtendedEntry>;
   injectedStyles?: CSSProperties;
+  hasCursor?: boolean;
 }
 
 export default function GroupRow({
@@ -26,6 +27,7 @@ export default function GroupRow({
   rowIndex,
   table,
   injectedStyles,
+  hasCursor,
   ...virtuosoProps
 }: GroupRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
@@ -40,6 +42,7 @@ export default function GroupRow({
       className={style.groupRow}
       style={{ ...injectedStyles, '--user-bg': colour }}
       data-testid='cuesheet-group'
+      data-cursor={hasCursor}
       {...virtuosoProps}
     >
       {cuesheetMode === AppMode.Edit && (

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.module.scss

@@ -13,6 +13,12 @@
     background: color-mix(in srgb, transparent 80%, var(--user-bg, $gray-500) 20%);
   }
 
+  &[data-cursor='true'] {
+    outline: 2px solid $blue-500;
+    outline-offset: -2px;
+    background: color-mix(in srgb, transparent 80%, var(--user-bg, $gray-500) 20%);
+  }
+
   td {
     background-color: $gray-1250;
     border-radius: 2px;

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

@@ -22,6 +22,7 @@ interface MilestoneRowProps {
   rowIndex: number;
   table: Table<ExtendedEntry>;
   injectedStyles?: CSSProperties;
+  hasCursor?: boolean;
 }
 
 export default function MilestoneRow({
@@ -32,6 +33,7 @@ export default function MilestoneRow({
   colour,
   rowId,
   rowIndex,
+  hasCursor,
   table,
   injectedStyles,
   ...virtuosoProps
@@ -64,6 +66,7 @@ export default function MilestoneRow({
         '--user-bg': parentBgColour ?? 'transparent',
       }}
       data-testid='cuesheet-milestone'
+      data-cursor={hasCursor}
       {...virtuosoProps}
     >
       {cuesheetMode === AppMode.Edit && (