refactor: cuesheet design review

fix: parsing of custom fields for blocks
refactor: extract cuesheet settings
refactor: cuesheet actions
refactor: improve cuesheet performance on resizing

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

@@ -1,10 +1,15 @@
 import { memo, ReactNode } from 'react';
-import { Column } from '@tanstack/react-table';
+import { IoChevronDown, IoLocate, IoOptions, IoSettingsOutline } from 'react-icons/io5';
+import { Popover } from '@base-ui-components/react/popover';
+import type { Column } from '@tanstack/react-table';
 import { OntimeEntry } from 'ontime-types';
 
 import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
+import RotatedLink from '../../../../common/components/icons/RotatedLink';
+import PopoverContents from '../../../../common/components/popover/Popover';
+import { usePersistedCuesheetOptions } from '../../cuesheet.options';
 
 import style from './CuesheetTableSettings.module.scss';
 
@@ -15,6 +20,7 @@ interface CuesheetTableSettingsProps {
   handleClearToggles: () => void;
 }
 
+export default memo(CuesheetTableSettings);
 function CuesheetTableSettings({
   columns,
   handleResetResizing,
@@ -23,9 +29,126 @@ function CuesheetTableSettings({
 }: CuesheetTableSettingsProps) {
   return (
     <div className={style.tableSettings}>
-      <div>
-        <Editor.Label className={style.sectionTitle}>Toggle column visibility</Editor.Label>
-        <div className={style.row}>
+      <div className={style.inline}>
+        <ViewSettings />
+        <ColumnSettings
+          columns={columns}
+          handleResetResizing={handleResetResizing}
+          handleResetReordering={handleResetReordering}
+          handleClearToggles={handleClearToggles}
+        />
+      </div>
+
+      <div className={style.inline}>
+        <ViewSettingsFollowButton />
+
+        <Editor.Separator orientation='vertical' />
+
+        <Button variant='subtle'>
+          <RotatedLink />
+          Share...
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function ViewSettingsFollowButton() {
+  const followPlayback = usePersistedCuesheetOptions((state) => state.followPlayback);
+  const toggle = usePersistedCuesheetOptions((state) => state.toggleOption);
+
+  return (
+    <Button variant={followPlayback ? 'primary' : 'subtle'} onClick={() => toggle('followPlayback')}>
+      <IoLocate />
+      {followPlayback ? 'Following playback' : 'Follow playback'}
+    </Button>
+  );
+}
+
+function ViewSettings() {
+  const options = usePersistedCuesheetOptions();
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger
+        render={
+          <Button variant='ghosted'>
+            <IoSettingsOutline /> Settings
+            <IoChevronDown />
+          </Button>
+        }
+      />
+
+      <PopoverContents align='start' className={style.column}>
+        <Editor.Label className={style.sectionTitle}>Element visibility</Editor.Label>
+        <Editor.Label className={style.option}>
+          <Checkbox
+            defaultChecked={options.showActionMenu}
+            onCheckedChange={(checked) => options.setOption('showActionMenu', checked)}
+          />
+          Show action menu
+        </Editor.Label>
+        <Editor.Label className={style.option}>
+          <Checkbox
+            defaultChecked={options.hideTableSeconds}
+            onCheckedChange={(checked) => options.setOption('hideTableSeconds', checked)}
+          />
+          Hide seconds in table
+        </Editor.Label>
+        <Editor.Label className={style.option}>
+          <Checkbox
+            defaultChecked={options.hidePast}
+            onCheckedChange={(checked) => options.setOption('hidePast', checked)}
+          />
+          Hide past events
+        </Editor.Label>
+        <Editor.Label className={style.option}>
+          <Checkbox
+            defaultChecked={options.hideIndexColumn}
+            onCheckedChange={(checked) => options.setOption('hideIndexColumn', checked)}
+          />
+          Hide index column
+        </Editor.Label>
+
+        <Editor.Label className={style.sectionTitle}>Table Behaviour</Editor.Label>
+        <Editor.Label className={style.option}>
+          <Checkbox
+            defaultChecked={options.showDelayedTimes}
+            onCheckedChange={(checked) => options.setOption('showDelayedTimes', checked)}
+          />
+          Show delayed times
+        </Editor.Label>
+        <Editor.Label className={style.option}>
+          <Checkbox
+            defaultChecked={options.hideDelays}
+            onCheckedChange={(checked) => options.setOption('hideDelays', checked)}
+          />
+          Hide delay entries
+        </Editor.Label>
+      </PopoverContents>
+    </Popover.Root>
+  );
+}
+
+function ColumnSettings({
+  columns,
+  handleResetResizing,
+  handleResetReordering,
+  handleClearToggles,
+}: CuesheetTableSettingsProps) {
+  return (
+    <Popover.Root>
+      <Popover.Trigger
+        render={
+          <Button variant='ghosted'>
+            <IoOptions /> View
+            <IoChevronDown />
+          </Button>
+        }
+      />
+      <PopoverContents align='start' className={style.inline}>
+        <div className={style.column}>
+          <Editor.Label className={style.sectionTitle}>Column visibility</Editor.Label>
           {columns.map((column) => {
             const columnHeader = column.columnDef.header;
             const visible = column.getIsVisible();
@@ -37,23 +160,20 @@ function CuesheetTableSettings({
             );
           })}
         </div>
-      </div>
-      <div className={style.column}>
-        <Editor.Label className={style.sectionTitle}>Reset Options</Editor.Label>
-        <div className={style.row}>
-          <Button size='small' variant='subtle' onClick={handleClearToggles}>
+        <Editor.Separator orientation='vertical' />
+        <div className={style.column}>
+          <Editor.Label className={style.sectionTitle}>Reset Options</Editor.Label>
+          <Button size='small' fluid onClick={handleClearToggles}>
             Show All
           </Button>
-          <Button size='small' variant='subtle' onClick={handleResetResizing}>
+          <Button size='small' fluid onClick={handleResetResizing}>
             Reset Resizing
           </Button>
-          <Button size='small' variant='subtle' onClick={handleResetReordering}>
+          <Button size='small' fluid onClick={handleResetReordering}>
             Reset Reordering
           </Button>
         </div>
-      </div>
-    </div>
+      </PopoverContents>
+    </Popover.Root>
   );
 }
-
-export default memo(CuesheetTableSettings);