keep the index row as a colour chip (#1039)

apps/client/src/features/cuesheet/Cuesheet.module.scss

@@ -36,7 +36,6 @@ $table-header-font-size: calc(1rem - 3px);
     min-width: 2rem;
     text-align: right;
     font-weight: 400;
-
     position: sticky;
     left: 0;
     z-index: 1;

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

@@ -60,7 +60,7 @@ export default function CuesheetHeader(props: CuesheetHeaderProps) {
         return (
           <DndContext key={key} sensors={sensors} collisionDetection={closestCorners} onDragEnd={handleOnDragEnd}>
             <tr key={headerGroup.id}>
-              {showIndexColumn && <th className={style.indexColumn}>#</th>}
+              <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/features/cuesheet/cuesheet-table-elements/EventRow.tsx

@@ -56,11 +56,9 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
       style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
       ref={selectedRef ?? ownRef}
     >
-      {showIndexColumn && (
-        <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour.color }}>
-          {eventIndex}
-        </td>
-      )}
+      <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour.color }}>
+        {showIndexColumn && eventIndex}
+      </td>
       {isVisible ? children : null}
     </tr>
   );

apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx

@@ -40,10 +40,6 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
       <div className={style.leftPanel}>
         <div className={style.sectionTitle}>Toggle column visibility</div>
         <div className={style.options}>
-          <label className={style.option}>
-            <Checkbox variant='ontime-ondark' defaultChecked={showIndexColumn} onChange={() => toggleIndexColumn()} />
-            Event Order
-          </label>
           {columns.map((column) => {
             const columnHeader = column.columnDef.header;
             const visible = column.getIsVisible();
@@ -69,6 +65,10 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
             <Switch variant='ontime' size='sm' isChecked={showPrevious} onChange={() => togglePreviousVisibility()} />
             Show past events
           </label>
+          <label className={style.option}>
+            <Switch variant='ontime' size='sm' isChecked={showIndexColumn} onChange={() => toggleIndexColumn()} />
+            Show Event Order
+          </label>
         </div>
         <div className={style.sectionTitle}>Delay Flow</div>
         <div className={style.options}>