refactor: settings in params

apps/client/src/views/cuesheet/CuesheetPage.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { IconButton, useDisclosure } from '@chakra-ui/react';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
@@ -6,6 +7,7 @@ import { CustomFieldLabel, isOntimeEvent, OntimeEvent } from 'ontime-types';
 
 import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
 import EmptyPage from '../../common/components/state/EmptyPage';
+import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useEventAction } from '../../common/hooks/useEventAction';
 import { useCuesheet } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
@@ -14,8 +16,8 @@ import { useFlatRundown } from '../../common/hooks-query/useRundown';
 import { CuesheetOverview } from '../../features/overview/Overview';
 
 import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
-import { useCuesheetSettings } from './store/cuesheetSettingsStore';
 import Cuesheet from './Cuesheet';
+import { cuesheetOptions } from './cuesheet.options';
 import { makeCuesheetColumns } from './cuesheetCols';
 
 import styles from './CuesheetPage.module.scss';
@@ -24,15 +26,21 @@ export default function CuesheetPage() {
   // TODO: can we use the normalised rundown for the table?
   const { data: flatRundown, status: rundownStatus } = useFlatRundown();
   const { data: customFields } = useCustomFields();
+  const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
 
   const { updateCustomField, updateEvent } = useEventAction();
   const featureData = useCuesheet();
   const columns = useMemo(() => makeCuesheetColumns(customFields), [customFields]);
-  const toggleSettings = useCuesheetSettings((state) => state.toggleSettings);
 
   useWindowTitle('Cuesheet');
 
+  /** Handles showing the view params edit drawer */
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+
   /**
    * Handles updating a custom field
    */
@@ -99,6 +107,7 @@ export default function CuesheetPage() {
   return (
     <div className={styles.tableWrapper} data-testid='cuesheet'>
       <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
+      <ViewParamsEditor viewOptions={cuesheetOptions} />
       <CuesheetOverview>
         <IconButton
           aria-label='Toggle navigation'
@@ -112,7 +121,7 @@ export default function CuesheetPage() {
           variant='ontime-subtle-white'
           size='lg'
           icon={<IoSettingsOutline />}
-          onClick={() => toggleSettings()}
+          onClick={showEditFormDrawer}
         />
       </CuesheetOverview>
       <CuesheetProgress />