refactor: improve editor and cuesheet headers

- consistent behaviour for app mode
- improve navigation

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

@@ -1,9 +1,11 @@
 import { IoEllipsisHorizontal } from 'react-icons/io5';
+import { useSessionStorage } from '@mantine/hooks';
 import { flexRender, Table } from '@tanstack/react-table';
 import { EntryId, OntimeEntry } from 'ontime-types';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
 import { useCurrentBlockId } from '../../../../common/hooks/useSocket';
+import { AppMode, sessionKeys } from '../../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
 
@@ -22,7 +24,10 @@ export default function BlockRow({ blockId, colour, hidePast, rowId, rowIndex, t
   const { currentBlockId } = useCurrentBlockId();
 
   const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
-  const showActionMenu = usePersistedCuesheetOptions((state) => state.showActionMenu);
+  const [cuesheetMode] = useSessionStorage<AppMode>({
+    key: sessionKeys.cuesheetMode,
+    defaultValue: AppMode.Edit,
+  });
   const openMenu = useCuesheetTableMenu((store) => store.openMenu);
 
   if (hidePast && !currentBlockId) {
@@ -31,7 +36,7 @@ export default function BlockRow({ blockId, colour, hidePast, rowId, rowIndex, t
 
   return (
     <tr className={style.blockRow} style={{ '--user-bg': colour }} data-testid='cuesheet-block'>
-      {showActionMenu && (
+      {cuesheetMode === AppMode.Edit && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton
             aria-label='Options'

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

@@ -1,8 +1,10 @@
 import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
+import { useSessionStorage } from '@mantine/hooks';
 import { flexRender, HeaderGroup } from '@tanstack/react-table';
 import { OntimeEntry } from 'ontime-types';
 
 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
+import { AppMode, sessionKeys } from '../../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
 
 import { SortableCell } from './SortableCell';
@@ -15,7 +17,10 @@ interface CuesheetHeaderProps {
 
 export default function CuesheetHeader({ headerGroups }: CuesheetHeaderProps) {
   const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
-  const showActionMenu = usePersistedCuesheetOptions((state) => state.showActionMenu);
+  const [cuesheetMode] = useSessionStorage<AppMode>({
+    key: sessionKeys.cuesheetMode,
+    defaultValue: AppMode.Edit,
+  });
 
   return (
     <thead className={style.tableHeader}>
@@ -24,7 +29,7 @@ export default function CuesheetHeader({ headerGroups }: CuesheetHeaderProps) {
 
         return (
           <tr key={headerGroup.id}>
-            {showActionMenu && <th className={style.actionColumn} tabIndex={-1} />}
+            {cuesheetMode === AppMode.Edit && <th className={style.actionColumn} tabIndex={-1} />}
             {!hideIndexColumn && (
               <th className={style.indexColumn} tabIndex={-1}>
                 #

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

@@ -1,11 +1,13 @@
 import { MutableRefObject, useEffect, useRef } from 'react';
 import { IoEllipsisHorizontal } from 'react-icons/io5';
+import { useSessionStorage } from '@mantine/hooks';
 import { flexRender, Table } from '@tanstack/react-table';
 import { OntimeEntry, OntimeEvent, RGBColour } from 'ontime-types';
 import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
+import { AppMode, sessionKeys } from '../../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../../cuesheet.options';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
 
@@ -44,8 +46,10 @@ export default function EventRow({
   firstAfterBlock,
 }: EventRowProps) {
   const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
-  const showActionMenu = usePersistedCuesheetOptions((state) => state.showActionMenu);
-  const ownRef = useRef<HTMLTableRowElement>(null);
+  const [cuesheetMode] = useSessionStorage<AppMode>({
+    key: sessionKeys.cuesheetMode,
+    defaultValue: AppMode.Edit,
+  });  const ownRef = useRef<HTMLTableRowElement>(null);
 
   const isVisible = useVisibleRowsStore((state) => state.visibleRows.has(rowId));
 
@@ -86,7 +90,7 @@ export default function EventRow({
       ref={selectedRef ?? ownRef}
       data-testid='cuesheet-event'
     >
-      {showActionMenu && (
+      {cuesheetMode === AppMode.Edit && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
           <IconButton
             aria-label='Options'