V3 feedback (#866)

* refactor: rename settings panel

* style: typo

* style: fix blackout position

* fix: offset time in time-to-end

* refactor: operator is protected

* style: tweaks to pincode

* refactor: close params editor on submit

* refactor: same navigation in all pages

* refactor: use cached response

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -45,8 +45,8 @@ $button-size: 3rem;
 
 .link {
   @include action-link;
-  justify-content: space-between;
   padding: 0.75rem 1.5rem;
+  gap: 0.5rem;
 
   &:hover {
     background-color: $menu-hover-bg;
@@ -69,7 +69,7 @@ $button-size: 3rem;
 }
 
 .linkIcon {
-  display: inline-block;
+  margin-left: auto;
   transform: rotate(45deg);
 }
 

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -1,16 +1,43 @@
-import { memo, PropsWithChildren, useRef } from 'react';
+import { memo, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { useFullscreen } from '@mantine/hooks';
+import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
+import { IoContract } from '@react-icons/all-files/io5/IoContract';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
+import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
+import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
+import { useViewOptionsStore } from '../../stores/viewOptions';
+import { isKeyEnter } from '../../utils/keyEvent';
+
+import RenameClientModal from './rename-client-modal/RenameClientModal';
+
+import style from './NavigationMenu.module.scss';
 
 interface NavigationMenuProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
-function NavigationMenu(props: PropsWithChildren<NavigationMenuProps>) {
-  const { children, isOpen, onClose } = props;
+function NavigationMenu(props: NavigationMenuProps) {
+  const { isOpen, onClose } = props;
+
+  const { isOpen: isRenameOpen, onOpen: onRenameOpen, onClose: onRenameClose } = useDisclosure();
+
+  const { fullscreen, toggle } = useFullscreen();
+  const { toggleMirror } = useViewOptionsStore();
 
   const menuRef = useRef<HTMLDivElement | null>(null);
 
@@ -18,6 +45,7 @@ function NavigationMenu(props: PropsWithChildren<NavigationMenuProps>) {
 
   return createPortal(
     <div id='navigation-menu-portal' ref={menuRef}>
+      <RenameClientModal isOpen={isRenameOpen} onClose={onRenameClose} />
       <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
         <DrawerOverlay />
         <DrawerContent>
@@ -25,7 +53,81 @@ function NavigationMenu(props: PropsWithChildren<NavigationMenuProps>) {
             <DrawerCloseButton size='lg' />
             Ontime
           </DrawerHeader>
-          <DrawerBody padding={0}>{children}</DrawerBody>
+          <DrawerBody padding={0}>
+            <div className={style.buttonsContainer}>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={toggle}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && toggle();
+                }}
+              >
+                Toggle Fullscreen
+                {fullscreen ? <IoContract /> : <IoExpand />}
+              </div>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={() => toggleMirror()}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && toggleMirror();
+                }}
+              >
+                Flip Screen
+                <IoSwapVertical />
+              </div>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={onRenameOpen}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && onRenameOpen();
+                }}
+              >
+                Rename Client
+              </div>
+            </div>
+            <hr className={style.separator} />
+            <Link
+              to='/editor'
+              className={`${style.link} ${location.pathname === '/editor' ? style.current : ''}`}
+              tabIndex={0}
+            >
+              <IoLockClosedOutline />
+              Editor
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <Link
+              to='/cuesheet'
+              className={`${style.link} ${location.pathname === '/cuesheet' ? style.current : ''}`}
+              tabIndex={0}
+            >
+              <IoLockClosedOutline />
+              Cuesheet
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <Link to='/op' className={`${style.link} ${location.pathname === '/op' ? style.current : ''}`} tabIndex={0}>
+              <IoLockClosedOutline />
+              Operator
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <hr className={style.separator} />
+            {navigatorConstants.map((route) => (
+              <Link
+                key={route.url}
+                to={route.url}
+                className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
+                tabIndex={0}
+              >
+                {route.label}
+                <IoArrowUp className={style.linkIcon} />
+              </Link>
+            ))}
+          </DrawerBody>
         </DrawerContent>
       </Drawer>
     </div>,

apps/client/src/common/components/navigation-menu/ProductionNavigationMenu.tsx

@@ -1,19 +1,7 @@
 import { memo } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { useDisclosure } from '@chakra-ui/react';
-import { useFullscreen } from '@mantine/hooks';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-import { IoContract } from '@react-icons/all-files/io5/IoContract';
-import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 
-import { navigatorConstants } from '../../../viewerConfig';
-import { isKeyEnter } from '../../utils/keyEvent';
-
-import RenameClientModal from './rename-client-modal/RenameClientModal';
 import NavigationMenu from './NavigationMenu';
 
-import style from './NavigationMenu.module.scss';
-
 interface ProductionNavigationMenuProps {
   isMenuOpen: boolean;
   onMenuClose: () => void;
@@ -21,73 +9,8 @@ interface ProductionNavigationMenuProps {
 
 function ProductionNavigationMenu(props: ProductionNavigationMenuProps) {
   const { isMenuOpen, onMenuClose } = props;
-  const location = useLocation();
-  const { fullscreen, toggle } = useFullscreen();
-  const { isOpen, onOpen, onClose } = useDisclosure();
 
-  return (
-    <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose}>
-      <RenameClientModal isOpen={isOpen} onClose={onClose} />
-      <div className={style.buttonsContainer}>
-        <div
-          className={style.link}
-          tabIndex={0}
-          role='button'
-          onClick={toggle}
-          onKeyDown={(event) => {
-            isKeyEnter(event) && toggle();
-          }}
-        >
-          Toggle Fullscreen
-          {fullscreen ? <IoContract /> : <IoExpand />}
-        </div>
-        <div
-          className={style.link}
-          tabIndex={0}
-          role='button'
-          onClick={onOpen}
-          onKeyDown={(event) => {
-            isKeyEnter(event) && onOpen();
-          }}
-        >
-          Rename Client
-        </div>
-      </div>
-      <hr className={style.separator} />
-      <Link
-        to='/editor'
-        className={`${style.link} ${location.pathname === '/editor' ? style.current : ''}`}
-        tabIndex={0}
-      >
-        Editor
-        <IoArrowUp className={style.linkIcon} />
-      </Link>
-      <Link
-        to='/cuesheet'
-        className={`${style.link} ${location.pathname === '/cuesheet' ? style.current : ''}`}
-        tabIndex={0}
-      >
-        Cuesheet
-        <IoArrowUp className={style.linkIcon} />
-      </Link>
-      <Link to='/op' className={`${style.link} ${location.pathname === '/op' ? style.current : ''}`} tabIndex={0}>
-        Operator
-        <IoArrowUp className={style.linkIcon} />
-      </Link>
-      <hr className={style.separator} />
-      {navigatorConstants.map((route) => (
-        <Link
-          key={route.url}
-          to={route.url}
-          className={`${style.link} ${route.url === location.pathname ? style.current : ''}`}
-          tabIndex={0}
-        >
-          {route.label}
-          <IoArrowUp className={style.linkIcon} />
-        </Link>
-      ))}
-    </NavigationMenu>
-  );
+  return <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />;
 }
 
 export default memo(ProductionNavigationMenu);

apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx

@@ -1,28 +1,12 @@
 import { memo, useCallback } from 'react';
-import { Link, useLocation, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useDisclosure } from '@chakra-ui/react';
-import { useFullscreen } from '@mantine/hooks';
-import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
-import { IoContract } from '@react-icons/all-files/io5/IoContract';
-import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
-import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
-import { navigatorConstants } from '../../../viewerConfig';
-import { useViewOptionsStore } from '../../stores/viewOptions';
-import { isKeyEnter } from '../../utils/keyEvent';
-
-import RenameClientModal from './rename-client-modal/RenameClientModal';
 import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
 
-import style from './NavigationMenu.module.scss';
-
 function ViewNavigationMenu() {
-  const location = useLocation();
-  const { fullscreen, toggle } = useFullscreen();
-  const { toggleMirror } = useViewOptionsStore();
   const [searchParams, setSearchParams] = useSearchParams();
-  const { isOpen: isRenameOpen, onOpen: onRenameOpen, onClose: onRenameClose } = useDisclosure();
   const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
 
   const showEditFormDrawer = useCallback(() => {
@@ -35,58 +19,7 @@ function ViewNavigationMenu() {
   return (
     <>
       <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
-      <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose}>
-        <RenameClientModal isOpen={isRenameOpen} onClose={onRenameClose} />
-        <div className={style.buttonsContainer}>
-          <div
-            className={style.link}
-            tabIndex={0}
-            role='button'
-            onClick={toggle}
-            onKeyDown={(event) => {
-              isKeyEnter(event) && toggle();
-            }}
-          >
-            Toggle Fullscreen
-            {fullscreen ? <IoContract /> : <IoExpand />}
-          </div>
-          <div
-            className={style.link}
-            tabIndex={0}
-            role='button'
-            onClick={() => toggleMirror()}
-            onKeyDown={(event) => {
-              isKeyEnter(event) && toggleMirror();
-            }}
-          >
-            Flip Screen
-            <IoSwapVertical />
-          </div>
-          <div
-            className={style.link}
-            tabIndex={0}
-            role='button'
-            onClick={onRenameOpen}
-            onKeyDown={(event) => {
-              isKeyEnter(event) && onRenameOpen();
-            }}
-          >
-            Rename Client
-          </div>
-        </div>
-        <hr className={style.separator} />
-        {navigatorConstants.map((route) => (
-          <Link
-            key={route.url}
-            to={route.url}
-            className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
-            tabIndex={0}
-          >
-            {route.label}
-            <IoArrowUp className={style.linkIcon} />
-          </Link>
-        ))}
-      </NavigationMenu>
+      <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />
     </>
   );
 }