From c9ef2465f8376e62159f2e36d607d092fbc62dad Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Fri, 20 Dec 2024 21:07:31 +0100
Subject: [PATCH] refactor: visibility options

---
 .../cuesheet/cuesheet-table/CuesheetTable.tsx |  5 ++-
 .../CuesheetHeader.tsx                        |  9 ++---
 .../cuesheet-table-elements/EventRow.tsx      | 33 +++++++++++--------
 .../src/views/cuesheet/cuesheet.options.ts    |  9 +++++
 4 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
index 3ef193020..482e75b86 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
@@ -40,7 +40,7 @@ export default function CuesheetTable(props: CuesheetTableProps) {
 
   const { updateEvent, updateTimer } = useEventAction();
   const { selectedEventId } = useSelectedEventId();
-  const { followSelected, hideDelays, hidePast, hideIndexColumn } = useCuesheetOptions();
+  const { followSelected, hideDelays, hidePast } = useCuesheetOptions();
   const { columnVisibility, columnOrder, columnSizing, resetColumnOrder, setColumnVisibility, setColumnSizing } =
     useColumnManager(columns);
 
@@ -115,7 +115,7 @@ export default function CuesheetTable(props: CuesheetTableProps) {
       />
       <div ref={tableContainerRef} className={style.cuesheetContainer}>
         <table className={style.cuesheet} id='cuesheet'>
-          <CuesheetHeader headerGroups={headerGroups} showIndexColumn={!hideIndexColumn} />
+          <CuesheetHeader headerGroups={headerGroups} />
           <tbody>
             {rowModel.rows.map((row, index) => {
               const key = row.original.id;
@@ -168,7 +168,6 @@ export default function CuesheetTable(props: CuesheetTableProps) {
                       selectedRef={isSelected ? selectedRef : undefined}
                       skip={entry.skip}
                       colour={entry.colour}
-                      showIndexColumn={!hideIndexColumn}
                     >
                       {row.getVisibleCells().map((cell) => {
                         return (
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx
index 9fbea6d9b..25a497c2b 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx
@@ -3,6 +3,7 @@ import { flexRender, HeaderGroup } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
 
 import { getAccessibleColour } from '../../../../common/utils/styleUtils';
+import { useCuesheetOptions } from '../../cuesheet.options';
 
 import { SortableCell } from './SortableCell';
 
@@ -10,11 +11,11 @@ import style from '../CuesheetTable.module.scss';
 
 interface CuesheetHeaderProps {
   headerGroups: HeaderGroup<OntimeRundownEntry>[];
-  showIndexColumn: boolean;
 }
 
 export default function CuesheetHeader(props: CuesheetHeaderProps) {
-  const { headerGroups, showIndexColumn } = props;
+  const { headerGroups } = props;
+  const { hideIndexColumn, showActionMenu } = useCuesheetOptions();
 
   return (
     <thead className={style.tableHeader}>
@@ -23,8 +24,8 @@ export default function CuesheetHeader(props: CuesheetHeaderProps) {
 
         return (
           <tr key={headerGroup.id}>
-            <th className={style.actionColumn} />
-            <th className={style.indexColumn}>{showIndexColumn && '#'}</th>
+            {showActionMenu && <th className={style.actionColumn} />}
+            {!hideIndexColumn && <th className={style.indexColumn}>#</th>}
             <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
               {headerGroup.headers.map((header) => {
                 const width = header.getSize();
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
index 9feabf9b2..b2ebf2420 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
@@ -4,12 +4,12 @@ import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHoriz
 import Color from 'color';
 
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
+import { useCuesheetOptions } from '../../cuesheet.options';
 
 import style from '../CuesheetTable.module.scss';
 
 interface EventRowProps {
   eventIndex: number;
-  showIndexColumn: boolean;
   isPast?: boolean;
   selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
   skip?: boolean;
@@ -17,7 +17,8 @@ interface EventRowProps {
 }
 
 function EventRow(props: PropsWithChildren<EventRowProps>) {
-  const { children, eventIndex, isPast, selectedRef, skip, colour, showIndexColumn } = props;
+  const { children, eventIndex, isPast, selectedRef, skip, colour } = props;
+  const { hideIndexColumn, showActionMenu } = useCuesheetOptions();
   const ownRef = useRef<HTMLTableRowElement>(null);
   const [isVisible, setIsVisible] = useState(false);
 
@@ -57,18 +58,22 @@ 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>
+      {showActionMenu && (
+        <td className={style.actionColumn}>
+          <MenuButton
+            as={IconButton}
+            size='sm'
+            aria-label='Options'
+            icon={<IoEllipsisHorizontal />}
+            variant='ontime-subtle'
+          />
+        </td>
+      )}
+      {!hideIndexColumn && (
+        <td className={style.indexColumn} style={{ backgroundColor, color: mutedText }}>
+          {eventIndex}
+        </td>
+      )}
       {isVisible ? children : null}
     </tr>
   );
diff --git a/apps/client/src/views/cuesheet/cuesheet.options.ts b/apps/client/src/views/cuesheet/cuesheet.options.ts
index 82568c5d4..a128f16cd 100644
--- a/apps/client/src/views/cuesheet/cuesheet.options.ts
+++ b/apps/client/src/views/cuesheet/cuesheet.options.ts
@@ -10,6 +10,13 @@ import { isStringBoolean } from '../../features/viewers/common/viewUtils';
  */
 export const cuesheetOptions: ViewOption[] = [
   { section: 'Table options' },
+  {
+    id: 'showActionMenu',
+    title: 'Show action menu',
+    description: 'Whether to show the action menu for every row in the table',
+    type: 'boolean',
+    defaultValue: false,
+  },
   {
     id: 'hideTableSeconds',
     title: 'Hide seconds in table',
@@ -56,6 +63,7 @@ export const cuesheetOptions: ViewOption[] = [
 ];
 
 type CuesheetOptions = {
+  showActionMenu: boolean;
   hideTableSeconds: boolean;
   followSelected: boolean;
   hidePast: boolean;
@@ -71,6 +79,7 @@ type CuesheetOptions = {
 export function getOptionsFromParams(searchParams: URLSearchParams): CuesheetOptions {
   // we manually make an object that matches the key above
   return {
+    showActionMenu: isStringBoolean(searchParams.get('showActionMenu')),
     hideTableSeconds: isStringBoolean(searchParams.get('hideTableSeconds')),
     followSelected: isStringBoolean(searchParams.get('followSelected')),
     hidePast: isStringBoolean(searchParams.get('hidePast')),