feat: store settings in params

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -82,10 +82,12 @@ const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOp
 
 interface EditFormDrawerProps {
   viewOptions: ViewOption[];
+  onSubmitCb?: (searchParams: URLSearchParams) => void;
 }
 
-// TODO: this is a good candidate for memoisation, but needs the paramFields to be stable
-export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
+// TODO: this is a good candidate for memoisation, but needs the viewOptions and onSubmitCb to be stable
+export default function ViewParamsEditor(props: EditFormDrawerProps) {
+  const { viewOptions, onSubmitCb } = props;
   const [searchParams, setSearchParams] = useSearchParams();
   const { isOpen, onClose, onOpen } = useDisclosure();
 
@@ -116,7 +118,7 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
     setSearchParams(newSearchParams);
 
-    onClose();
+    onSubmitCb?.(newSearchParams);
   };
 
   return (

apps/client/src/features/overview/Overview.tsx

@@ -87,6 +87,10 @@ function _CuesheetOverview({ children }: { children: React.ReactNode }) {
 function TitlesOverview() {
   const { data } = useProjectData();
 
+  if (!data.title && !data.description) {
+    return null;
+  }
+
   return (
     <div>
       <div className={style.title}>{data.title}</div>

apps/client/src/features/viewers/common/viewUtils.ts

@@ -32,9 +32,13 @@ export function getTimerByType(freezeEnd: boolean, timerObject?: TimerTypeParams
   }
 }
 
-export function isStringBoolean(text: string | null) {
+/**
+ * Parses a string to semantically verify if it represents a true value
+ * Used in the context of parsing search params
+ */
+export function isStringBoolean(text: string | null, fallback = false): boolean {
   if (text === null) {
-    return false;
+    return fallback;
   }
   return text?.toLowerCase() === 'true' || text === '1';
 }

apps/client/src/theme/_ontimeStyles.scss

@@ -57,6 +57,7 @@ $text-body-size: calc(1rem - 1px);
 
 // media queries
 $min-tablet: 500px;
+$small-screen: 800px;
 
 .blink {
   animation: blink 1s step-start infinite;

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

@@ -45,11 +45,11 @@ $table-header-font-size: calc(1rem - 3px);
 
 .tableHeader {
   position: sticky;
-  top: -1px;
+  top: 0;
   z-index: 10;
-
+  background-color: $ui-black;
   font-size: $table-header-font-size;
-  color: $gray-700;
+  color: $label-gray;
 }
 
 th {

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

@@ -11,7 +11,7 @@ import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
 import DelayRow from './cuesheet-table-elements/DelayRow';
 import EventRow from './cuesheet-table-elements/EventRow';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
-import { useCuesheetSettings } from './store/cuesheetSettingsStore';
+import { useCuesheetOptions } from './cuesheet.options';
 import useColumnManager from './useColumnManager';
 
 import style from './Cuesheet.module.scss';
@@ -25,7 +25,7 @@ interface CuesheetProps {
 }
 
 export default function Cuesheet({ data, columns, handleUpdate, selectedId, currentBlockId }: CuesheetProps) {
-  const { followSelected, showSettings, showDelayBlock, showPrevious, showIndexColumn } = useCuesheetSettings();
+  const { followSelected, showDelays, hidePast, showIndexColumn } = useCuesheetOptions();
   const {
     columnVisibility,
     columnOrder,
@@ -94,14 +94,12 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId, curr
 
   return (
     <>
-      {showSettings && (
-        <CuesheetTableSettings
-          columns={allLeafColumns}
-          handleResetResizing={resetColumnResizing}
-          handleResetReordering={resetColumnOrder}
-          handleClearToggles={setAllVisible}
-        />
-      )}
+      <CuesheetTableSettings
+        columns={allLeafColumns}
+        handleResetResizing={resetColumnResizing}
+        handleResetReordering={resetColumnOrder}
+        handleClearToggles={setAllVisible}
+      />
       <div ref={tableContainerRef} className={style.cuesheetContainer}>
         <table className={style.cuesheet}>
           <CuesheetHeader headerGroups={headerGroups} saveColumnOrder={reorder} showIndexColumn={showIndexColumn} />
@@ -114,17 +112,17 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId, curr
               }
 
               if (isOntimeBlock(row.original)) {
-                if (isPast && !showPrevious && key !== currentBlockId) {
+                if (isPast && hidePast && key !== currentBlockId) {
                   return null;
                 }
                 return <BlockRow key={key} title={row.original.title} />;
               }
               if (isOntimeDelay(row.original)) {
-                if (isPast && !showPrevious) {
+                if (isPast && hidePast) {
                   return null;
                 }
                 const delayVal = row.original.duration;
-                if (!showDelayBlock || delayVal === 0) {
+                if (!showDelays || delayVal === 0) {
                   return null;
                 }
 
@@ -134,7 +132,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId, curr
                 eventIndex++;
                 const isSelected = key === selectedId;
 
-                if (isPast && !showPrevious) {
+                if (isPast && hidePast) {
                   return null;
                 }
 

apps/client/src/views/cuesheet/CuesheetPage.module.scss

@@ -5,9 +5,10 @@
   padding: 1rem 0.5rem;
 
   display: grid;
-  grid-template-rows: 3rem auto 1fr;
+  grid-template-rows: 3rem auto auto 1fr;
   grid-template-areas:
           'overview'
+          'progress'
           'settings'
           'table';
   gap: 1rem;

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';
@@ -14,7 +15,6 @@ 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 { makeCuesheetColumns } from './cuesheetCols';
 
@@ -24,15 +24,22 @@ 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 { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
 
   const { updateCustomField } = useEventAction();
   const featureData = useCuesheet();
   const columns = useMemo(() => makeCuesheetColumns(customFields), [customFields]);
-  const toggleSettings = useCuesheetSettings((state) => state.toggleSettings);
+
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
 
   useWindowTitle('Cuesheet');
 
+  /** Handles showing the view params edit drawer */
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+
   /**
    * Handles updating a field
    * Currently, only custom fields can be updated from the cuesheet
@@ -87,18 +94,18 @@ export default function CuesheetPage() {
       <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
       <CuesheetOverview>
         <IconButton
-          aria-label='Toggle settings'
+          aria-label='Toggle navigation'
           variant='ontime-subtle-white'
           size='lg'
           icon={<IoApps />}
           onClick={onOpen}
         />
         <IconButton
-          aria-label='Toggle navigation'
+          aria-label='Toggle settings'
           variant='ontime-subtle-white'
           size='lg'
           icon={<IoSettingsOutline />}
-          onClick={() => toggleSettings()}
+          onClick={showEditFormDrawer}
         />
       </CuesheetOverview>
       <CuesheetProgress />

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

@@ -1,10 +1,13 @@
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 
+import { cuesheetOptions, persistParams } from './cuesheet.options';
 import CuesheetPage from './CuesheetPage';
 
 export default function ProtectedCuesheet() {
   return (
     <ProtectRoute permission='operator'>
+      <ViewParamsEditor viewOptions={cuesheetOptions} onSubmitCb={persistParams} />
       <CuesheetPage />
     </ProtectRoute>
   );

apps/client/src/views/cuesheet/cuesheet-progress/CuesheetProgress.module.scss

@@ -1,3 +1,4 @@
 .progressOverride {
-    height: 1rem;
+  height: 1rem;
+  grid-area: progress;
 }