refactor: simple migrations and tweaks to cuesheet

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

@@ -1,7 +1,9 @@
 import { useCallback, useMemo, useState } from 'react';
 import { IoApps, IoSettingsOutline } from 'react-icons/io5';
-import { IconButton, Modal, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
+import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/react';
+import { useDisclosure } from '@mantine/hooks';
 
+import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
 import useViewEditor from '../../common/components/navigation-menu/useViewEditor';
 import EmptyPage from '../../common/components/state/EmptyPage';
@@ -21,12 +23,11 @@ import { cuesheetOptions } from './cuesheet.options';
 import styles from './CuesheetPage.module.scss';
 
 export default function CuesheetPage() {
-  // TODO: can we use the normalised rundown for the table?
   const { data: flatRundown, status: rundownStatus } = useFlatRundown();
   const { data: customFields, status: customFieldStatus } = useCustomFields();
   const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable: true });
-  const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
-  const { isOpen: isEventEditorOpen, onOpen: onEventEditorOpen, onClose: onEventEditorClose } = useDisclosure();
+  const [isMenuOpen, menuHandler] = useDisclosure();
+  const [isEventEditorOpen, eventEditorHandler] = useDisclosure();
   const [eventId, setEventId] = useState<string | null>(null);
 
   const columns = useMemo(() => makeCuesheetColumns(customFields), [customFields]);
@@ -40,13 +41,13 @@ export default function CuesheetPage() {
     (eventId: string | null) => {
       if (eventId) {
         setEventId(eventId);
-        onEventEditorOpen();
+        eventEditorHandler.open();
       } else {
         setEventId(null);
-        onEventEditorClose();
+        eventEditorHandler.close();
       }
     },
-    [onEventEditorClose, onEventEditorOpen],
+    [eventEditorHandler],
   );
 
   if (!customFields || !flatRundown || rundownStatus === 'pending' || customFieldStatus === 'pending') {
@@ -55,32 +56,34 @@ export default function CuesheetPage() {
 
   return (
     <>
-      <Modal isOpen={isEventEditorOpen} onClose={onEventEditorClose} variant='ontime'>
+      <Modal isOpen={isEventEditorOpen} onClose={eventEditorHandler.close} variant='ontime'>
         <ModalOverlay />
         <ModalContent maxWidth='max(640px, 40vw)' padding='1rem'>
           <CuesheetEventEditor eventId={eventId!} />
         </ModalContent>
       </Modal>
       <div className={styles.tableWrapper} data-testid='cuesheet'>
-        <NavigationMenu isOpen={isMenuOpen} onClose={onClose} />
+        <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
         <ViewParamsEditor viewOptions={cuesheetOptions} />
         <CuesheetOverview>
           <IconButton
             aria-label='Toggle navigation'
-            variant='ontime-subtle-white'
-            size='lg'
-            icon={<IoApps />}
-            onClick={onOpen}
-            isDisabled={isViewLocked}
-          />
+            variant='subtle-white'
+            size='xlarge'
+            onClick={menuHandler.open}
+            disabled={isViewLocked}
+          >
+            <IoApps />
+          </IconButton>
           <IconButton
             aria-label='Toggle settings'
-            variant='ontime-subtle-white'
-            size='lg'
-            icon={<IoSettingsOutline />}
+            variant='subtle-white'
+            size='xlarge'
             onClick={showEditFormDrawer}
-            isDisabled={isViewLocked}
-          />
+            disabled={isViewLocked}
+          >
+            <IoSettingsOutline />
+          </IconButton>
         </CuesheetOverview>
         <CuesheetProgress />
         <CuesheetDnd columns={columns}>