Merge branch 'v3' of https://github.com/cpvalente/ontime into bp/edit-multiple-events

2026-08-14 11:53:49 +00:00 · 2024-04-07 16:28:13 -06:00
parent e221543dc7 f9b1880e88
commit 997be35815
104 changed files with 1115 additions and 1002 deletions
@@ -7,7 +7,7 @@ import withData from './features/viewers/ViewWrapper';

 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
 const Cuesheet = lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
-const Operator = lazy(() => import('./features/operator/Operator'));
+const Operator = lazy(() => import('./features/operator/OperatorExport'));

 const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
 const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { IoApps } from '@react-icons/all-files/io5/IoApps';
+import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
+
+import { debounce } from '../../utils/debounce';
+
+import style from './NavigationMenu.module.scss';
+
+interface FloatingNavigationProps {
+  toggleMenu: () => void;
+  toggleSettings: () => void;
+}
+
+export default function FloatingNavigation(props: FloatingNavigationProps) {
+  const { toggleMenu, toggleSettings } = props;
+  const [showButton, setShowButton] = useState(false);
+
+  // show on mouse move
+  useEffect(() => {
+    let fadeOut: NodeJS.Timeout | null = null;
+    const setShowMenuTrue = () => {
+      setShowButton(true);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+      fadeOut = setTimeout(() => setShowButton(false), 3000);
+    };
+
+    const debouncedShowMenu = debounce(setShowMenuTrue, 1000);
+
+    document.addEventListener('mousemove', debouncedShowMenu);
+    return () => {
+      document.removeEventListener('mousemove', debouncedShowMenu);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+    };
+  }, []);
+
+  return (
+    <div className={`${style.buttonContainer} ${!showButton ? style.hidden : ''}`}>
+      <button
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        className={style.navButton}
+        data-testid='navigation__toggle-menu'
+      >
+        <IoApps />
+      </button>
+      <button
+        className={style.button}
+        onClick={toggleSettings}
+        aria-label='toggle settings'
+        data-testid='navigation__toggle-settings'
+      >
+        <IoSettingsOutline />
+      </button>
+    </div>
+  );
+}
@@ -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);
 }

@@ -1,5 +1,6 @@
-import { memo, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { memo, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { Link } from 'react-router-dom';
 import {
  Drawer,
  DrawerBody,
@@ -9,81 +10,126 @@ import {
  DrawerOverlay,
  useDisclosure,
 } from '@chakra-ui/react';
-import { IoApps } from '@react-icons/all-files/io5/IoApps';
-import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
+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 { debounce } from '../../utils/debounce';
+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 {
-  editCallback: () => void;
+  isOpen: boolean;
+  onClose: () => void;
 }

-function NavigationMenu(props: PropsWithChildren<NavigationMenuProps>) {
-  const { children, editCallback } = 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 [showButton, setShowButton] = useState(false);
-  const { isOpen, onOpen, onClose } = useDisclosure();
  const menuRef = useRef<HTMLDivElement | null>(null);

  useClickOutside(menuRef, () => onClose);

-  const toggleMenu = () => (isOpen ? onClose() : onOpen());
-
-  // show on mouse move
-  useEffect(() => {
-    let fadeOut: NodeJS.Timeout | null = null;
-    const setShowMenuTrue = () => {
-      setShowButton(true);
-      if (fadeOut) {
-        clearTimeout(fadeOut);
-      }
-      fadeOut = setTimeout(() => setShowButton(false), 3000);
-    };
-
-    const debouncedShowMenu = debounce(setShowMenuTrue, 1000);
-
-    document.addEventListener('mousemove', debouncedShowMenu);
-    return () => {
-      document.removeEventListener('mousemove', debouncedShowMenu);
-      if (fadeOut) {
-        clearTimeout(fadeOut);
-      }
-    };
-  }, []);
-
  return createPortal(
    <div id='navigation-menu-portal' ref={menuRef}>
-      <div className={`${style.buttonContainer} ${!showButton && !isOpen ? style.hidden : ''}`}>
-        <button
-          onClick={toggleMenu}
-          aria-label='toggle menu'
-          className={style.navButton}
-          data-testid='navigation__toggle-menu'
-        >
-          <IoApps />
-        </button>
-        <button
-          className={style.button}
-          onClick={editCallback}
-          aria-label='toggle settings'
-          data-testid='navigation__toggle-settings'
-        >
-          <IoSettingsOutline />
-        </button>
-        <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
-          <DrawerOverlay />
-          <DrawerContent>
-            <DrawerHeader>
-              <DrawerCloseButton size='lg' />
-              Ontime
-            </DrawerHeader>
-            <DrawerBody padding={0}>{children}</DrawerBody>
-          </DrawerContent>
-        </Drawer>
-      </div>
+      <RenameClientModal isOpen={isRenameOpen} onClose={onRenameClose} />
+      <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerCloseButton size='lg' />
+            Ontime
+          </DrawerHeader>
+          <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>,
    document.body,
  );
@@ -1,91 +1,16 @@
 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 {
-  handleSettings: () => void;
+  isMenuOpen: boolean;
+  onMenuClose: () => void;
 }

-function ProductionNavigationMenu({ handleSettings }: ProductionNavigationMenuProps) {
-  const location = useLocation();
-  const { fullscreen, toggle } = useFullscreen();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+function ProductionNavigationMenu(props: ProductionNavigationMenuProps) {
+  const { isMenuOpen, onMenuClose } = props;

-  return (
-    <NavigationMenu editCallback={handleSettings}>
-      <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);
@@ -1,86 +1,26 @@
 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, onOpen, onClose } = useDisclosure();
+  const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();

  const showEditFormDrawer = useCallback(() => {
    searchParams.set('edit', 'true');
    setSearchParams(searchParams);
  }, [searchParams, setSearchParams]);

+  const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
+
  return (
-    <NavigationMenu editCallback={showEditFormDrawer}>
-      <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={() => toggleMirror()}
-          onKeyDown={(event) => {
-            isKeyEnter(event) && toggleMirror();
-          }}
-        >
-          Flip Screen
-          <IoSwapVertical />
-        </div>
-        <div
-          className={style.link}
-          tabIndex={0}
-          role='button'
-          onClick={onOpen}
-          onKeyDown={(event) => {
-            isKeyEnter(event) && onOpen();
-          }}
-        >
-          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>
+    <>
+      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
+      <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />
+    </>
  );
 }

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { HStack, IconButton, PinInput, PinInputField } from '@chakra-ui/react';
+import { IconButton, PinInput, PinInputField } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';

 import style from './ProtectRoute.module.scss';
@@ -39,8 +39,8 @@ export default function PinPage(props: PinPageProps) {

  return (
    <div className={style.container}>
-      {`Ontime ${permission || ''}`}
-      <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
+      {`Ontime ${permission}`}
+      <div className={failed ? style.pin__failed : style.pin}>
        <PinInput
          type='alphanumeric'
          size='lg'
@@ -57,8 +57,15 @@ export default function PinPage(props: PinPageProps) {
          <PinInputField />
          <PinInputField />
        </PinInput>
-        <IconButton aria-label='Enter' size='lg' isRound icon={<IoCheckmark />} onClick={validate} />
-      </HStack>
+        <IconButton
+          variant='ontime-filled'
+          aria-label='Enter'
+          size='lg'
+          isRound
+          icon={<IoCheckmark />}
+          onClick={validate}
+        />
+      </div>
    </div>
  );
 }
@@ -1,27 +1,31 @@
 .container {
-  display: grid;
-  place-content: center;
-  height: 100vh;
-  padding-bottom: 30vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 25vh;

-  background: $bg-container-l1;
  color: $ontime-color;
-  font-family: $ontime-font-family;
  font-weight: 200;
-  text-align: center;
-  font-size: 3vw;
+  font-size: 3rem;
 }

 .pin,
 .pin__failed {
-  padding: 20px;
+  display: flex;
+  gap: 0.125em;
+  padding-block: 0.5em;

  input {
-    border-radius: 50%;
+    border-radius: 99px;
+    border-color: $gray-500;
+
+    &:hover {
+      border-color: $blue-500;
+    }
  }

  button {
-    margin-left: 20px;
+    margin-left: 1em;
  }
 }

@@ -33,9 +37,9 @@

@keyframes colourFade {
  from {
-    background: $action-blue;
+    background: $red-500;
  }
  to {
-    background: rgba($action-blue, 0);
+    background: rgba($red-500, 0);
  }
-}
+}
@@ -1,14 +1,9 @@
 .drawerFooter {
  display: flex;
-  justify-content: start;
+  justify-content: end;
  gap: $section-spacing;

-  button[type='reset'] {
-    padding: 0 2em;
-    margin-right: auto;
-  }
-
-  button[type='submit'] {
+  button {
    padding: 0 2em;
  }
 }
@@ -16,6 +11,9 @@
 .label {
  font-size: $inner-section-text-size;
  color: $label-gray;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem
 }

 .columnSection {
@@ -52,15 +52,16 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
    }
  }, [searchParams, onOpen]);

-  const onCloseWithoutSaving = () => {
-    onClose();
-
+  const handleClose = () => {
    searchParams.delete('edit');
    setSearchParams(searchParams);
+
+    onClose();
  };

  const resetParams = () => {
    setSearchParams();
+    onClose();
  };

  const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -69,10 +70,12 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
    const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
    setSearchParams(newSearchParams);
+
+    handleClose();
  };

  return (
-    <Drawer isOpen={isOpen} placement='right' onClose={onCloseWithoutSaving} variant='ontime' size='lg'>
+    <Drawer isOpen={isOpen} placement='right' onClose={handleClose} variant='ontime' size='lg'>
      <DrawerOverlay />
      <DrawerContent>
        <DrawerHeader>
@@ -96,10 +99,7 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {

        <DrawerFooter className={style.drawerFooter}>
          <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
-            Reset
-          </Button>
-          <Button variant='ontime-subtle' onClick={onCloseWithoutSaving}>
-            Cancel
+            Reset to default
          </Button>
          <Button variant='ontime-filled' form='edit-params-form' type='submit'>
            Save
@@ -11,7 +11,7 @@ export default function useCustomFields() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: CUSTOM_FIELDS,
    queryFn: getCustomFields,
-    placeholderData: placeholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchInterval,
@@ -11,14 +11,13 @@ export function useHttpSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: HTTP_SETTINGS,
    queryFn: getHTTP,
-    placeholderData: httpPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt: number) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
    networkMode: 'always',
  });

-  // we need to jump through some hoops because of the type op port
  return { data: data ?? httpPlaceholder, status, isFetching, isError, refetch };
 }

@@ -10,7 +10,7 @@ export default function useInfo() {
  const { data, status, isError, refetch, isFetching } = useQuery<GetInfo>({
    queryKey: APP_INFO,
    queryFn: getInfo,
-    placeholderData: ontimePlaceholderInfo,
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
@@ -11,7 +11,7 @@ export default function useOscSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: OSC_SETTINGS,
    queryFn: getOSC,
-    placeholderData: oscPlaceholderSettings,
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt: number) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
@@ -9,7 +9,7 @@ export default function useProjectData() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: PROJECT_DATA,
    queryFn: getProjectData,
-    placeholderData: projectDataPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
@@ -14,7 +14,7 @@ export function useProjectList() {
  const { data, status, refetch } = useQuery({
    queryKey: PROJECT_LIST,
    queryFn: getProjects,
-    placeholderData: placeholderProjectList,
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt: number) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
@@ -13,7 +13,7 @@ export default function useRundown() {
  const { data, status, isError, refetch, isFetching } = useQuery<RundownCached>({
    queryKey: RUNDOWN,
    queryFn: fetchNormalisedRundown,
-    placeholderData: cachedRundownPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchInterval,
@@ -10,7 +10,7 @@ export default function useSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: APP_SETTINGS,
    queryFn: getSettings,
-    placeholderData: ontimePlaceholderSettings,
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
@@ -8,7 +8,7 @@ export default function useUrlPresets() {
  const { data, status, isError, refetch } = useQuery({
    queryKey: URL_PRESETS,
    queryFn: getUrlPresets,
-    placeholderData: [],
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
@@ -9,12 +9,12 @@ export default function useViewSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: VIEW_SETTINGS,
    queryFn: getView,
-    placeholderData: viewsSettingsPlaceholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
    networkMode: 'always',
  });

-  return { data, status, isError, refetch, isFetching };
+  return { data: data ?? viewsSettingsPlaceholder, status, isError, refetch, isFetching };
 }
@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+
+/**
+ * Sets tab title
+ * @param title
+ */
+export function useWindowTitle(title: string) {
+  useEffect(() => {
+    document.title = `ontime - ${title}`;
+  }, []);
+}
@@ -3,7 +3,6 @@ import { create } from 'zustand';
 import { booleanFromLocalStorage } from '../utils/localStorage';

 type EditorSettings = {
-  showQuickEntry: boolean;
  linkPrevious: boolean;
  defaultPublic: boolean;
  defaultDuration: string;
@@ -12,14 +11,12 @@ type EditorSettings = {
 type EditorSettingsStore = {
  eventSettings: EditorSettings;
  setLocalEventSettings: (newState: EditorSettings) => void;
-  setShowQuickEntry: (showQuickEntry: boolean) => void;
  setLinkPrevious: (linkPrevious: boolean) => void;
  setDefaultPublic: (defaultPublic: boolean) => void;
  setDefaultDuration: (defaultDuration: string) => void;
 };

 enum EditorSettingsKeys {
-  ShowQuickEntry = 'ontime-show-quick-entry',
  LinkPrevious = 'ontime-link-previous',
  DefaultPublic = 'ontime-default-public',
  DefaultDuration = 'ontime-default-duration',
@@ -27,7 +24,6 @@ enum EditorSettingsKeys {

 export const useEditorSettings = create<EditorSettingsStore>((set) => ({
  eventSettings: {
-    showQuickEntry: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, false),
    linkPrevious: booleanFromLocalStorage(EditorSettingsKeys.LinkPrevious, true),
    defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.DefaultPublic, true),
    defaultDuration: localStorage.getItem(EditorSettingsKeys.DefaultDuration) ?? '00:10:00',
@@ -35,18 +31,11 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => ({

  setLocalEventSettings: (value) =>
    set(() => {
-      localStorage.setItem(EditorSettingsKeys.ShowQuickEntry, String(value.showQuickEntry));
      localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(value.linkPrevious));
      localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(value.defaultPublic));
      return { eventSettings: value };
    }),

-  setShowQuickEntry: (showQuickEntry) =>
-    set((state) => {
-      localStorage.setItem(EditorSettingsKeys.ShowQuickEntry, String(showQuickEntry));
-      return { eventSettings: { ...state.eventSettings, showQuickEntry } };
-    }),
-
  setLinkPrevious: (linkPrevious) =>
    set((state) => {
      localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(linkPrevious));
@@ -13,7 +13,7 @@ export default function GeneralPanel({ location }: PanelBaseProps) {

  return (
    <>
-      <Panel.Header>Settings</Panel.Header>
+      <Panel.Header>App Settings</Panel.Header>
      <div ref={manageRef}>
        <GeneralPanelForm />
      </div>
@@ -7,7 +7,6 @@ import * as Panel from '../PanelUtils';

 export default function EditorSettingsForm() {
  const eventSettings = useEditorSettings((state) => state.eventSettings);
-  const setShowQuickEntry = useEditorSettings((state) => state.setShowQuickEntry);
  const setLinkPrevious = useEditorSettings((state) => state.setLinkPrevious);
  const setDefaultPublic = useEditorSettings((state) => state.setDefaultPublic);
  const setDefaultDuration = useEditorSettings((state) => state.setDefaultDuration);
@@ -19,53 +18,82 @@ export default function EditorSettingsForm() {
      <Panel.Card>
        <Panel.SubHeader>Editor settings</Panel.SubHeader>
        <Panel.Divider />
-        <Panel.ListGroup>
-          <Panel.ListItem>
-            <Panel.Field
-              title='Show quick entry'
-              description='Whether the quick entry buttons show under selected event'
-            />
-            <Switch
-              variant='ontime'
-              size='lg'
-              defaultChecked={eventSettings.showQuickEntry}
-              onChange={(event) => setShowQuickEntry(event.target.checked)}
-            />
-          </Panel.ListItem>
-          <Panel.ListItem>
-            <Panel.Field
-              title='Link previous'
-              description='New events start time will be linked to the previous event'
-            />
-            <Switch
-              variant='ontime'
-              size='lg'
-              defaultChecked={eventSettings.linkPrevious}
-              onChange={(event) => setLinkPrevious(event.target.checked)}
-            />
-          </Panel.ListItem>
-          <Panel.ListItem>
-            <Panel.Field
-              title='Default duration'
-              description='When creating a new event, what is the default duration'
-            />
-            <TimeInput<'defaultDuration'>
-              name='defaultDuration'
-              submitHandler={(_field, value) => setDefaultDuration(value)}
-              time={durationInMs}
-              placeholder='00:10:00'
-            />
-          </Panel.ListItem>
-          <Panel.ListItem>
-            <Panel.Field title='Default public' description='New events will be public' />
-            <Switch
-              variant='ontime'
-              size='lg'
-              defaultChecked={eventSettings.defaultPublic}
-              onChange={(event) => setDefaultPublic(event.target.checked)}
-            />
-          </Panel.ListItem>
-        </Panel.ListGroup>
+        <Panel.Section>
+          <Panel.Title>Rundown options</Panel.Title>
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Default duration'
+                description='When creating a new event, what is the default duration'
+              />
+              <TimeInput<'defaultDuration'>
+                name='defaultDuration'
+                submitHandler={(_field, value) => setDefaultDuration(value)}
+                time={durationInMs}
+                placeholder='00:10:00'
+              />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Link previous'
+                description='New events start time will be linked to the previous event'
+              />
+              <Switch
+                variant='ontime'
+                size='lg'
+                defaultChecked={eventSettings.linkPrevious}
+                onChange={(event) => setLinkPrevious(event.target.checked)}
+              />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field title='Default public' description='New events will be public' />
+              <Switch
+                variant='ontime'
+                size='lg'
+                defaultChecked={eventSettings.defaultPublic}
+                onChange={(event) => setDefaultPublic(event.target.checked)}
+              />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+        </Panel.Section>
+        <Panel.Section>
+          <Panel.Title>Play mode</Panel.Title>
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Show quick entry'
+                description='Whether the quick entry buttons show above / under selected event'
+              />
+              <Switch variant='ontime' size='lg' defaultChecked={false} isDisabled />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Follow playback'
+                description='Whether view automatically follows the event being played'
+              />
+              <Switch variant='ontime' size='lg' defaultChecked isDisabled />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+        </Panel.Section>
+        <Panel.Section>
+          <Panel.Title>Edit mode</Panel.Title>
+          <Panel.ListGroup>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Show quick entry'
+                description='Whether the quick entry buttons show above / under selected event'
+              />
+              <Switch variant='ontime' size='lg' defaultChecked isDisabled />
+            </Panel.ListItem>
+            <Panel.ListItem>
+              <Panel.Field
+                title='Follow playback'
+                description='Whether view automatically follows the event being played'
+              />
+              <Switch variant='ontime' size='lg' defaultChecked={false} isDisabled />
+            </Panel.ListItem>
+          </Panel.ListGroup>
+        </Panel.Section>
      </Panel.Card>
    </Panel.Section>
  );
@@ -43,8 +43,7 @@ export default function ProjectList() {
      <thead>
        <tr>
          <th className={style.containCell}>Project Name</th>
-          <th>Date Created</th>
-          <th>Date Modified</th>
+          <th>Last Used</th>
          <th />
        </tr>
      </thead>
@@ -53,7 +52,6 @@ export default function ProjectList() {
          <ProjectListItem
            key={project.filename}
            filename={project.filename}
-            createdAt={project.createdAt}
            updatedAt={project.updatedAt}
            onToggleEditMode={handleToggleEditMode}
            onSubmit={handleClear}
@@ -21,7 +21,6 @@ export type EditMode = 'rename' | 'duplicate' | null;
 interface ProjectListItemProps {
  current?: boolean;
  filename: string;
-  createdAt: string;
  updatedAt: string;
  onToggleEditMode: (editMode: EditMode, filename: string | null) => void;
  onSubmit: () => void;
@@ -32,14 +31,13 @@ interface ProjectListItemProps {

 export default function ProjectListItem({
  current,
-  createdAt,
+  updatedAt,
  editingFilename,
  editingMode,
  filename,
  onRefetch,
  onSubmit,
  onToggleEditMode,
-  updatedAt,
 }: ProjectListItemProps) {
  const [submitError, setSubmitError] = useState<string | null>(null);

@@ -102,7 +100,6 @@ export default function ProjectListItem({
      ) : (
        <>
          <td className={style.containCell}>{filename}</td>
-          <td>{new Date(createdAt).toLocaleString()}</td>
          <td>{new Date(updatedAt).toLocaleString()}</td>
          <td className={style.actionButton}>
            <ActionMenu
@@ -1,9 +1,10 @@
 import { ChangeEvent, useEffect, useState } from 'react';
-import { Button, Input } from '@chakra-ui/react';
+import { Button, Input, Spinner } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 import { IoShieldCheckmarkOutline } from '@react-icons/all-files/io5/IoShieldCheckmarkOutline';

 import { getWorksheetNames } from '../../../../common/api/sheets';
+import { maybeAxiosError } from '../../../../common/api/utils';
 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import { openLink } from '../../../../common/utils/linkUtils';
 import * as Panel from '../PanelUtils';
@@ -29,7 +30,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
  const sheetId = useSheetStore((state) => state.sheetId);
  const setSheetId = useSheetStore((state) => state.setSheetId);
  const setWorksheets = useSheetStore((state) => state.setWorksheets);
-
+  const patchStepData = useSheetStore((state) => state.patchStepData);
  const authenticationStatus = useSheetStore((state) => state.authenticationStatus);
  const setAuthenticationStatus = useSheetStore((state) => state.setAuthenticationStatus);

@@ -91,8 +92,13 @@ export default function GSheetSetup(props: GSheetSetupProps) {
      setAuthenticationStatus(result.authenticated);
      if (result.authenticated !== 'pending') {
        if (result.authenticated == 'authenticated') {
-          const names = await getWorksheetNames(result.sheetId);
-          setWorksheets(names);
+          try {
+            const names = await getWorksheetNames(result.sheetId);
+            setWorksheets(names);
+          } catch (error) {
+            const message = maybeAxiosError(error);
+            patchStepData({ worksheet: { available: false, error: message } });
+          }
        }
        setLoading('');
        return;
@@ -184,6 +190,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
      ) : (
        <Panel.ListGroup>
          <div className={style.buttonRow}>
+            {isAuthenticating && <Spinner />}
            <CopyTag label='Google Auth Key' disabled={!canAuthenticate} size='sm'>
              {authKey ? authKey : 'Upload files to generate Auth Key'}
            </CopyTag>
@@ -192,8 +199,7 @@ export default function GSheetSetup(props: GSheetSetupProps) {
              size='sm'
              leftIcon={<IoShieldCheckmarkOutline />}
              onClick={handleAuthenticate}
-              isDisabled={!canAuthenticate || isLoading}
-              isLoading={loading === 'authenticate' || isAuthenticating}
+              isDisabled={!canAuthenticate}
            >
              Authenticate
            </Button>
@@ -26,6 +26,7 @@
 .buttonRow {
  display: flex;
  gap: 1rem;
+  align-items: center;
  justify-content: end;
 }

@@ -2,7 +2,7 @@ import { ChangeEvent, useRef, useState } from 'react';
 import { Button, Input } from '@chakra-ui/react';
 import { IoCloudOutline } from '@react-icons/all-files/io5/IoCloudOutline';
 import { IoDownloadOutline } from '@react-icons/all-files/io5/IoDownloadOutline';
-import { ImportMap, unpackError } from 'ontime-utils';
+import { getErrorMessage, ImportMap } from 'ontime-utils';

 import {
  getWorksheetNames as getWorksheetNamesExcel,
@@ -59,7 +59,7 @@ export default function SourcesPanel() {
      setImportFlow('excel');
      setHasFile('done');
    } catch (error) {
-      const errorMessage = unpackError(error);
+      const errorMessage = getErrorMessage(error);
      setError(`Error uploading file: ${errorMessage}`);
      setWorksheets(null);
      setHasFile('none');
@@ -15,7 +15,7 @@ export const settingPanels: Readonly<SettingsOption[]> = [
  },
  {
    id: 'general',
-    label: 'General',
+    label: 'App Settings',
    secondary: [
      { id: 'general__manage', label: 'Manage Ontime settings' },
      { id: 'general__view', label: 'View settings' },
@@ -59,6 +59,7 @@ export const settingPanels: Readonly<SettingsOption[]> = [
 ] as const;

 export type SettingsOptionId = (typeof settingPanels)[number]['id'];
+
 export interface PanelBaseProps {
  location?: string;
 }
@@ -52,7 +52,7 @@ export default function MessageControl() {
          onClick={() => setMessage.timerBlink(!blink)}
          data-testid='toggle timer blink'
        >
-          Blink message
+          Blink
        </Button>
        <Button
          size='sm'
@@ -66,7 +66,7 @@ export default function MessageControl() {
        </Button>
      </div>
      <InputRow
-        label='External Message (readonly)'
+        label='External Message (read only)'
        placeholder={enDash}
        readonly
        text={message.external.text || ''}
@@ -1,7 +1,7 @@
 .tableWrapper {
  width: 100%;
  height: 100vh;
-  padding: 1rem;
+  padding: 1rem 0.5rem;

  display: grid;
  grid-template-rows: 3rem auto 1fr;
@@ -1,10 +1,14 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
+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';
 import { CustomFieldLabel, isOntimeEvent } from 'ontime-types';

 import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
 import Empty from '../../common/components/state/Empty';
 import { useEventAction } from '../../common/hooks/useEventAction';
 import { useCuesheet } from '../../common/hooks/useSocket';
+import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import { useFlatRundown } from '../../common/hooks-query/useRundown';
 import Overview from '../overview/Overview';
@@ -20,16 +24,14 @@ export default function CuesheetWrapper() {
  // 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);

-  // Set window title
-  useEffect(() => {
-    document.title = 'ontime - Cuesheet';
-  }, []);
+  useWindowTitle('Cuesheet');

  /**
   * Handles updating a field
@@ -82,9 +84,24 @@ export default function CuesheetWrapper() {

  return (
    <div className={styles.tableWrapper} data-testid='cuesheet'>
-      <Overview />
+      <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
+      <Overview>
+        <IconButton
+          aria-label='Toggle settings'
+          variant='ontime-subtle-white'
+          size='lg'
+          icon={<IoApps />}
+          onClick={onOpen}
+        />
+        <IconButton
+          aria-label='Toggle navigation'
+          variant='ontime-subtle-white'
+          size='lg'
+          icon={<IoSettingsOutline />}
+          onClick={() => toggleSettings()}
+        />
+      </Overview>
      <CuesheetProgress />
-      <ProductionNavigationMenu handleSettings={() => toggleSettings()} />
      <Cuesheet
        data={flatRundown}
        columns={columns}
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import {
  closestCenter,
@@ -31,6 +31,12 @@ function CuesheetHeader(props: CuesheetHeaderProps) {
  const { headerGroups } = props;
  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>('table-order', initialColumnOrder);

+  useEffect(() => {
+    if (!localStorage.getItem('table-order')) {
+      saveColumnOrder(initialColumnOrder);
+    }
+  }, [saveColumnOrder]);
+
  const handleOnDragEnd = (event: DragEndEvent) => {
    const { delta, active, over } = event;

@@ -1,7 +1,11 @@
 import { lazy, useCallback, useEffect } from 'react';
+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';

 import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
 import useElectronEvent from '../../common/hooks/useElectronEvent';
+import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import AppSettings from '../app-settings/AppSettings';
 import useAppSettingsNavigation from '../app-settings/useAppSettingsNavigation';
 import Overview from '../overview/Overview';
@@ -13,16 +17,17 @@ const TimerControl = lazy(() => import('../control/playback/TimerControlExport')
 const MessageControl = lazy(() => import('../control/message/MessageControlExport'));

 export default function Editor() {
-  const { isOpen, setLocation, close } = useAppSettingsNavigation();
+  const { isOpen: isSettingsOpen, setLocation, close } = useAppSettingsNavigation();
  const { isElectron } = useElectronEvent();
+  const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();

-  const handleSettings = useCallback(() => {
-    if (isOpen) {
+  const toggleSettings = useCallback(() => {
+    if (isSettingsOpen) {
      close();
    } else {
      setLocation('project');
    }
-  }, [close, isOpen, setLocation]);
+  }, [close, isSettingsOpen, setLocation]);

  // Handle keyboard shortcuts
  const handleKeyPress = useCallback(
@@ -34,13 +39,13 @@ export default function Editor() {
      if (event.ctrlKey || event.metaKey) {
        // ctrl + , (settings)
        if (event.key === ',') {
-          handleSettings();
+          toggleSettings();
          event.preventDefault();
          event.stopPropagation();
        }
      }
    },
-    [handleSettings],
+    [toggleSettings],
  );

  // register ctrl + , to open settings
@@ -55,15 +60,28 @@ export default function Editor() {
    };
  }, [handleKeyPress, isElectron]);

-  // Set window title
-  useEffect(() => {
-    document.title = 'ontime - Editor';
-  }, []);
+  useWindowTitle('Editor');

  return (
    <div className={styles.mainContainer} data-testid='event-editor'>
-      <ProductionNavigationMenu handleSettings={handleSettings} />
-      {isOpen ? (
+      <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
+      <Overview>
+        <IconButton
+          aria-label='Toggle navigation'
+          variant='ontime-subtle-white'
+          size='lg'
+          icon={<IoApps />}
+          onClick={onOpen}
+        />
+        <IconButton
+          aria-label='Toggle settings'
+          variant='ontime-subtle-white'
+          size='lg'
+          icon={<IoSettingsOutline />}
+          onClick={toggleSettings}
+        />
+      </Overview>
+      {isSettingsOpen ? (
        <AppSettings />
      ) : (
        <div id='panels' className={styles.panelContainer}>
@@ -74,7 +92,6 @@ export default function Editor() {
          <Rundown />
        </div>
      )}
-      <Overview />
    </div>
  );
 }
@@ -3,12 +3,12 @@ import { useSearchParams } from 'react-router-dom';
 import { CustomField, CustomFields, isOntimeEvent, OntimeEvent, SupportedEvent } from 'ontime-types';
 import { getFirstEventNormal, getLastEventNormal } from 'ontime-utils';

-import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
 import Empty from '../../common/components/state/Empty';
 import { getOperatorOptions } from '../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useOperator } from '../../common/hooks/useSocket';
+import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import useProjectData from '../../common/hooks-query/useProjectData';
 import useRundown from '../../common/hooks-query/useRundown';
@@ -41,7 +41,7 @@ export default function Operator() {
  const timeoutId = useRef<NodeJS.Timeout | null>(null);

  const featureData = useOperator();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
  const { data: settings } = useSettings();

  const [showEditPrompt, setShowEditPrompt] = useState(false);
@@ -57,10 +57,7 @@ export default function Operator() {
    topOffset: selectedOffset,
  });

-  // Set window title
-  useEffect(() => {
-    document.title = 'ontime - Operator';
-  }, []);
+  useWindowTitle('Operator');

  // reset scroll if nothing is selected
  useEffect(() => {
@@ -116,11 +113,6 @@ export default function Operator() {
    [searchParams],
  );

-  const showEditFormDrawer = useCallback(() => {
-    searchParams.set('edit', 'true');
-    setSearchParams(searchParams);
-  }, [searchParams, setSearchParams]);
-
  const missingData = !data || !customFields || !projectData;
  const isLoading = status === 'pending' || customFieldStatus === 'pending' || projectDataStatus === 'pending';

@@ -146,7 +138,6 @@ export default function Operator() {

  return (
    <div className={style.operatorContainer}>
-      <ProductionNavigationMenu handleSettings={showEditFormDrawer} />
      <ViewParamsEditor paramFields={operatorOptions} />
      {editEvent && <EditModal event={editEvent} onClose={() => setEditEvent(null)} />}

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useDisclosure } from '@chakra-ui/react';
+
+import FloatingNavigation from '../../common/components/navigation-menu/FloatingNavigation';
+import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
+import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+
+import Operator from './Operator';
+
+export default function OperatorExport() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+
+  const toggleMenu = isOpen ? onClose : onOpen;
+
+  return (
+    <ProtectRoute permission='operator'>
+      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
+      <ProductionNavigationMenu isMenuOpen={isOpen} onMenuClose={onClose} />
+      <Operator />
+    </ProtectRoute>
+  );
+}
@@ -1,10 +1,20 @@
 .overview {
  grid-area: overview;
+  font-size: $inner-section-text-size;
+  display: flex;
+}
+
+.nav {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.info {
+  flex: 1;
+  padding-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  font-size: $inner-section-text-size;
-  padding: 0 1rem;
 }

 .title {
@@ -12,7 +12,7 @@ import style from './Overview.module.scss';

 export default memo(Overview);

-function Overview() {
+function Overview({ children }: { children: React.ReactNode }) {
  const { plannedEnd, plannedStart, actualStart, expectedEnd } = useRuntimeOverview();

  const [maybePlannedEnd, maybePlannedDaySpan] = useMemo(() => calculateEndAndDaySpan(plannedEnd), [plannedEnd]);
@@ -24,15 +24,23 @@ function Overview() {
  return (
    <div className={style.overview}>
      <ErrorBoundary>
-        <TitlesOverview />
-        <div className={style.column}>
-          <TimeRow label='Planned start' value={formatedTime(plannedStart)} className={style.start} />
-          <TimeRow label='Actual start' value={formatedTime(actualStart)} className={style.start} />
-        </div>
-        <RuntimeOverview />
-        <div className={style.column}>
-          <TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
-          <TimeRow label='Expected end' value={expectedEndText} className={style.end} daySpan={maybeExpectedDaySpan} />
+        <div className={style.nav}>{children}</div>
+        <div className={style.info}>
+          <TitlesOverview />
+          <div>
+            <TimeRow label='Planned start' value={formatedTime(plannedStart)} className={style.start} />
+            <TimeRow label='Actual start' value={formatedTime(actualStart)} className={style.start} />
+          </div>
+          <RuntimeOverview />
+          <div>
+            <TimeRow label='Planned end' value={plannedEndText} className={style.end} daySpan={maybePlannedDaySpan} />
+            <TimeRow
+              label='Expected end'
+              value={expectedEndText}
+              className={style.end}
+              daySpan={maybeExpectedDaySpan}
+            />
+          </div>
        </div>
      </ErrorBoundary>
    </div>
@@ -43,7 +51,7 @@ function TitlesOverview() {
  const { data } = useProjectData();

  return (
-    <div className={style.titles}>
+    <div>
      <div className={style.title}>{data.title}</div>
      <div className={style.description}>{data.description}</div>
    </div>
@@ -39,7 +39,6 @@ export default function Rundown({ data }: RundownProps) {
  const eventSettings = useEditorSettings((state) => state.eventSettings);
  const defaultPublic = eventSettings.defaultPublic;
  const linkPrevious = eventSettings.linkPrevious;
-  const showQuickEntry = eventSettings.showQuickEntry;

  // cursor
  const { cursor, mode: appMode, setCursor } = useAppMode();
@@ -219,6 +218,8 @@ export default function Rundown({ data }: RundownProps) {
  // all events before the current selected are in the past
  let isPast = Boolean(featureData?.selectedEventId);

+  const isEditMode = appMode === AppMode.Edit;
+
  return (
    <div className={style.eventContainer} ref={scrollRef} data-testid='rundown'>
      <DndContext onDragEnd={handleOnDragEnd} sensors={sensors} collisionDetection={closestCenter}>
@@ -248,6 +249,7 @@ export default function Rundown({ data }: RundownProps) {
                  thisId = eventId;
                }
              }
+              const isFirst = index === 0;
              const isLast = index === order.length - 1;
              const isLoaded = featureData?.selectedEventId === event.id;
              const isNext = featureData?.nextEventId === event.id;
@@ -258,6 +260,14 @@ export default function Rundown({ data }: RundownProps) {

              return (
                <Fragment key={event.id}>
+                  {isEditMode && (hasCursor || isFirst) && (
+                    <QuickAddBlock
+                      showKbd={hasCursor ? 'above' : 'none'}
+                      previousEventId={previousEventId}
+                      disableAddDelay={isOntimeDelay(event)}
+                      disableAddBlock={isOntimeBlock(event)}
+                    />
+                  )}
                  <div className={style.entryWrapper} data-testid={`entry-${eventIndex}`}>
                    {isOntimeEvent(event) && <div className={style.entryIndex}>{eventIndex}</div>}
                    <div className={style.entry} key={event.id} ref={hasCursor ? cursorRef : undefined}>
@@ -277,9 +287,9 @@ export default function Rundown({ data }: RundownProps) {
                      />
                    </div>
                  </div>
-                  {((showQuickEntry && hasCursor) || isLast) && (
+                  {isEditMode && (hasCursor || isLast) && (
                    <QuickAddBlock
-                      showKbd={hasCursor}
+                      showKbd={hasCursor ? 'below' : 'none'}
                      previousEventId={event.id}
                      disableAddDelay={isOntimeDelay(event)}
                      disableAddBlock={isOntimeBlock(event)}
@@ -13,7 +13,18 @@ import DelayBlock from './delay-block/DelayBlock';
 import EventBlock from './event-block/EventBlock';
 import { useEventSelection } from './useEventSelection';

-export type EventItemActions = 'set-cursor' | 'event' | 'delay' | 'block' | 'delete' | 'clone' | 'update' | 'swap';
+export type EventItemActions =
+  | 'set-cursor'
+  | 'event'
+  | 'event-before'
+  | 'delay'
+  | 'delay-before'
+  | 'block'
+  | 'block-before'
+  | 'delete'
+  | 'clone'
+  | 'update'
+  | 'swap';

 interface RundownEntryProps {
  type: SupportedEvent;
@@ -83,12 +94,27 @@ export default function RundownEntry(props: RundownEntryProps) {
        };
        return addEvent(newEvent, options);
      }
+      case 'event-before': {
+        const newEvent = { type: SupportedEvent.Event };
+        const options = {
+          after: previousEventId,
+          defaultPublic,
+          linkPrevious,
+        };
+        return addEvent(newEvent, options);
+      }
      case 'delay': {
        return addEvent({ type: SupportedEvent.Delay }, { after: data.id });
      }
+      case 'delay-before': {
+        return addEvent({ type: SupportedEvent.Delay }, { after: previousEventId });
+      }
      case 'block': {
        return addEvent({ type: SupportedEvent.Block }, { after: data.id });
      }
+      case 'block-before': {
+        return addEvent({ type: SupportedEvent.Block }, { after: previousEventId });
+      }
      case 'swap': {
        const { value } = payload as FieldValue;
        return swapEvents({ from: value as string, to: data.id });
@@ -163,9 +189,9 @@ export default function RundownEntry(props: RundownEntryProps) {
      />
    );
  } else if (data.type === SupportedEvent.Block) {
-    return <BlockBlock data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
+    return <BlockBlock data={data} hasCursor={hasCursor} onDelete={() => actionHandler('delete')} />;
  } else if (data.type === SupportedEvent.Delay) {
-    return <DelayBlock data={data} hasCursor={hasCursor} actionHandler={actionHandler} />;
+    return <DelayBlock data={data} hasCursor={hasCursor} />;
  }
  return null;
 }
@@ -1,32 +1,24 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
+import { IconButton } from '@chakra-ui/react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
-import { OntimeBlock, OntimeEvent } from 'ontime-types';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
+import { OntimeBlock } from 'ontime-types';

 import { cx } from '../../../common/utils/styleUtils';
 import EditableBlockTitle from '../common/EditableBlockTitle';
-import BlockActionMenu from '../event-block/composite/BlockActionMenu';
-import type { EventItemActions } from '../RundownEntry';

 import style from './BlockBlock.module.scss';

 interface BlockBlockProps {
  data: OntimeBlock;
  hasCursor: boolean;
-  actionHandler: (
-    action: EventItemActions,
-    payload?:
-      | number
-      | {
-          field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
-          value: unknown;
-        },
-  ) => void;
+  onDelete: () => void;
 }

 export default function BlockBlock(props: BlockBlockProps) {
-  const { data, hasCursor, actionHandler } = props;
+  const { data, hasCursor, onDelete } = props;
  const handleRef = useRef<null | HTMLSpanElement>(null);

  const {
@@ -45,12 +37,6 @@ export default function BlockBlock(props: BlockBlockProps) {
    transition,
  };

-  useEffect(() => {
-    if (hasCursor) {
-      handleRef?.current?.focus();
-    }
-  }, [hasCursor]);
-
  const blockClasses = cx([style.block, hasCursor ? style.hasCursor : null]);

  return (
@@ -59,7 +45,14 @@ export default function BlockBlock(props: BlockBlockProps) {
        <IoReorderTwo />
      </span>
      <EditableBlockTitle title={data.title} eventId={data.id} placeholder='Block title' />
-      <BlockActionMenu className={style.actionMenu} enableDelete actionHandler={actionHandler} />
+      <IconButton
+        aria-label='Delete'
+        size='sm'
+        icon={<IoTrash />}
+        variant='ontime-subtle'
+        color='#FA5656'
+        onClick={onDelete}
+      />
    </div>
  );
 }
@@ -5,32 +5,21 @@ import { CSS } from '@dnd-kit/utilities';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
-import { OntimeDelay, OntimeEvent } from 'ontime-types';
+import { OntimeDelay } from 'ontime-types';

 import DelayInput from '../../../common/components/input/delay-input/DelayInput';
 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { cx } from '../../../common/utils/styleUtils';
-import BlockActionMenu from '../event-block/composite/BlockActionMenu';
-import type { EventItemActions } from '../RundownEntry';

 import style from './DelayBlock.module.scss';

 interface DelayBlockProps {
  data: OntimeDelay;
  hasCursor: boolean;
-  actionHandler: (
-    action: EventItemActions,
-    payload?:
-      | number
-      | {
-          field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
-          value: unknown;
-        },
-  ) => void;
 }

 export default function DelayBlock(props: DelayBlockProps) {
-  const { data, hasCursor, actionHandler } = props;
+  const { data, hasCursor } = props;
  const { applyDelay, deleteEvent } = useEventAction();
  const handleRef = useRef<null | HTMLSpanElement>(null);

@@ -79,7 +68,6 @@ export default function DelayBlock(props: DelayBlockProps) {
        <Button onClick={cancelDelayHandler} size='sm' leftIcon={<IoClose />} variant='ontime-subtle-white'>
          Cancel
        </Button>
-        <BlockActionMenu enableDelete actionHandler={actionHandler} />
      </div>
    </div>
  );
@@ -9,7 +9,7 @@ $skip-opacity: 0.2;
  display: grid;
  grid-template-areas:
    'binder ...        ...     ...'
-    'binder pb-actions times   actions'
+    'binder pb-actions times   ...'
    'binder pb-actions title   title'
    'binder pb-actions estatus estatus'
    'binder ...        ...     ...';
@@ -55,7 +55,6 @@ $skip-opacity: 0.2;
    outline: 1px solid $block-cursor-color;
  }

-  /* we stop the eventActions from having opacity to fix issue with dropdown drawing order */
  &.past:not(.skip) {
    .timerNote,
    .statusElements,
@@ -153,12 +152,6 @@ $skip-opacity: 0.2;
  }
 }

-.eventActions {
-  grid-area: actions;
-  height: 100%;
-  text-align: end;
-}
-
 .progressBg {
  grid-area: progb;
  border-radius: 1px;
@@ -2,16 +2,18 @@ import { MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
-import { IoCopyOutline } from '@react-icons/all-files/io5/IoCopyOutline';
+import { IoDuplicateOutline } from '@react-icons/all-files/io5/IoDuplicateOutline';
 import { IoPeople } from '@react-icons/all-files/io5/IoPeople';
 import { IoPeopleOutline } from '@react-icons/all-files/io5/IoPeopleOutline';
+import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
 import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
+import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { EndAction, MaybeNumber, MaybeString, OntimeEvent, Playback, TimerType, TimeStrategy } from 'ontime-types';

 import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useAppMode } from '../../../common/stores/appModeStore';
-import copyToClipboard from '../../../common/utils/copyToClipboard';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import type { EventItemActions } from '../RundownEntry';
 import { useEventIdSwapping } from '../useEventIdSwapping';
@@ -96,31 +98,25 @@ export default function EventBlock(props: EventBlockProps) {
    selectedEvents.size > 1
      ? [
          {
-            label: 'Visiblity',
-            group: [
-              {
-                label: 'Make public',
-                icon: IoPeople,
-                onClick: () =>
-                  actionHandler('update', {
-                    field: 'isPublic',
-                    value: true,
-                  }),
-              },
-              {
-                label: 'Make private',
-                icon: IoPeopleOutline,
-                onClick: () =>
-                  actionHandler('update', {
-                    field: 'isPublic',
-                    value: false,
-                  }),
-              },
-            ],
+            label: 'Make public',
+            icon: IoPeople,
+            onClick: () =>
+              actionHandler('update', {
+                field: 'isPublic',
+                value: true,
+              }),
+          },
+          {
+            label: 'Make private',
+            icon: IoPeopleOutline,
+            onClick: () =>
+              actionHandler('update', {
+                field: 'isPublic',
+                value: false,
+              }),
          },
        ]
      : [
-          { label: `Copy ID: ${eventId}`, icon: IoCopyOutline, onClick: () => copyToClipboard(eventId) },
          {
            label: 'Toggle public',
            icon: IoPeopleOutline,
@@ -145,6 +141,14 @@ export default function EventBlock(props: EventBlockProps) {
            },
            isDisabled: selectedEventId == null || selectedEventId === eventId,
          },
+          { withDivider: true, label: 'Clone', icon: IoDuplicateOutline, onClick: () => actionHandler('clone') },
+          { withDivider: true, label: 'Event before', icon: IoAdd, onClick: () => actionHandler('event-before') },
+          { label: 'Event after', icon: IoAdd, onClick: () => actionHandler('event') },
+          { label: 'Block before', icon: IoRemoveCircleOutline, onClick: () => actionHandler('block-before') },
+          { label: 'Block after', icon: IoRemoveCircleOutline, onClick: () => actionHandler('block') },
+          { label: 'Delay before', icon: IoTimerOutline, onClick: () => actionHandler('delay-before') },
+          { label: 'Delay after', icon: IoTimerOutline, onClick: () => actionHandler('delay') },
+          { withDivider: true, label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
        ],
  );

@@ -281,7 +285,6 @@ export default function EventBlock(props: EventBlockProps) {
          loaded={loaded}
          playback={playback}
          isRolling={isRolling}
-          actionHandler={actionHandler}
        />
      )}
    </div>
@@ -14,10 +14,8 @@ import { EndAction, MaybeString, Playback, TimerType, TimeStrategy } from 'ontim
 import { cx } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
 import EditableBlockTitle from '../common/EditableBlockTitle';
-import { EventItemActions } from '../RundownEntry';
 import TimeInputFlow from '../time-input-flow/TimeInputFlow';

-import BlockActionMenu from './composite/BlockActionMenu';
 import EventBlockPlayback from './composite/EventBlockPlayback';
 import EventBlockProgressBar from './composite/EventBlockProgressBar';

@@ -46,7 +44,6 @@ interface EventBlockInnerProps {
  loaded: boolean;
  playback?: Playback;
  isRolling: boolean;
-  actionHandler: (action: EventItemActions, payload?: any) => void;
 }

 const EventBlockInner = (props: EventBlockInnerProps) => {
@@ -68,7 +65,6 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
    loaded,
    playback,
    isRolling,
-    actionHandler,
  } = props;

  const [renderInner, setRenderInner] = useState(false);
@@ -139,9 +135,6 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
          </Tooltip>
        </div>
      </div>
-      <div className={style.eventActions}>
-        <BlockActionMenu showClone enableDelete={!loaded} actionHandler={actionHandler} />
-      </div>
    </>
  );
 };
@@ -1,64 +0,0 @@
-import { useCallback } from 'react';
-import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Tooltip } from '@chakra-ui/react';
-import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
-import { IoDuplicateOutline } from '@react-icons/all-files/io5/IoDuplicateOutline';
-import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
-import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
-import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
-import { IoTrashBinSharp } from '@react-icons/all-files/io5/IoTrashBinSharp';
-
-import { tooltipDelayMid } from '../../../../ontimeConfig';
-import { EventItemActions } from '../../RundownEntry';
-
-interface BlockActionMenuProps {
-  enableDelete?: boolean;
-  showClone?: boolean;
-  actionHandler: (action: EventItemActions, payload?: any) => void;
-  className?: string;
-}
-
-export default function BlockActionMenu(props: BlockActionMenuProps) {
-  const { enableDelete, showClone, actionHandler, className } = props;
-
-  const handleAddEvent = useCallback(() => actionHandler('event'), [actionHandler]);
-  const handleAddDelay = useCallback(() => actionHandler('delay'), [actionHandler]);
-  const handleAddBlock = useCallback(() => actionHandler('block'), [actionHandler]);
-  const handleClone = useCallback(() => actionHandler('clone'), [actionHandler]);
-  const handleDelete = useCallback(() => actionHandler('delete'), [actionHandler]);
-
-  return (
-    <Menu isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
-      <Tooltip label='Add ...' openDelay={tooltipDelayMid}>
-        <MenuButton
-          as={IconButton}
-          aria-label='Event options'
-          icon={<IoEllipsisHorizontal />}
-          tabIndex={-1}
-          variant='ontime-ghosted-white'
-          size='sm'
-          className={className}
-        />
-      </Tooltip>
-      <MenuList>
-        <MenuItem icon={<IoAdd />} onClick={handleAddEvent}>
-          Add Event after
-        </MenuItem>
-        <MenuItem icon={<IoTimerOutline />} onClick={handleAddDelay}>
-          Add Delay after
-        </MenuItem>
-        <MenuItem icon={<IoRemoveCircleOutline />} onClick={handleAddBlock}>
-          Add Block after
-        </MenuItem>
-        {showClone && (
-          <MenuItem icon={<IoDuplicateOutline />} onClick={handleClone}>
-            Clone event
-          </MenuItem>
-        )}
-        <MenuDivider />
-        <MenuItem icon={<IoTrashBinSharp />} onClick={handleDelete} isDisabled={!enableDelete} color='#D20300'>
-          Delete
-        </MenuItem>
-      </MenuList>
-    </Menu>
-  );
-}
@@ -23,7 +23,7 @@
  padding: 0 0.25rem;
  color: $label-gray;
  border-radius: 2px;
-  background-color: $black-10
+  background-color: $black-10;
 }

 .options {
@@ -12,14 +12,14 @@ import { tooltipDelayMid } from '../../../ontimeConfig';
 import style from './QuickAddBlock.module.scss';

 interface QuickAddBlockProps {
-  showKbd: boolean;
-  previousEventId: string;
+  showKbd: 'above' | 'below' | 'none';
+  previousEventId?: string;
  disableAddDelay?: boolean;
  disableAddBlock: boolean;
 }

 const QuickAddBlock = (props: QuickAddBlockProps) => {
-  const { showKbd, previousEventId, disableAddDelay = true, disableAddBlock } = props;
+  const { showKbd = 'none', previousEventId, disableAddDelay = true, disableAddBlock } = props;
  const { addEvent } = useEventAction();
  const { emitError } = useEmitLog();

@@ -28,6 +28,8 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {

  const { defaultPublic, linkPrevious } = useEditorSettings((state) => state.eventSettings);

+  const shortcutBase = showKbd === 'none' ? '' : `${deviceAlt} ${showKbd === 'above' ? '⇧' : ''}`;
+
  const handleCreateEvent = useCallback(
    (eventType: SupportedEvent) => {
      switch (eventType) {
@@ -70,6 +72,9 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
    [previousEventId, addEvent, emitError],
  );

+  const canLinkPrevious = Boolean(previousEventId);
+  const shouldLinkPrevious = Boolean(linkPrevious) && canLinkPrevious;
+
  return (
    <div className={style.quickAdd}>
      <div className={style.btnRow}>
@@ -79,10 +84,9 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
            size='xs'
            variant='ontime-subtle-white'
            className={style.quickBtn}
-            data-testid='quick-add-event'
            leftIcon={<IoAdd />}
          >
-            Event {showKbd && <span className={style.keyboard}>{`${deviceAlt} + E`}</span>}
+            Event {shortcutBase && <span className={style.keyboard}>{`${shortcutBase} E`}</span>}
          </Button>
        </Tooltip>
        <Tooltip label='Add Delay' openDelay={tooltipDelayMid}>
@@ -92,10 +96,9 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
            variant='ontime-subtle-white'
            disabled={disableAddDelay}
            className={style.quickBtn}
-            data-testid='quick-add-delay'
            leftIcon={<IoAdd />}
          >
-            Delay {showKbd && <span className={style.keyboard}>{`${deviceAlt} + D`}</span>}
+            Delay {shortcutBase && <span className={style.keyboard}>{`${shortcutBase} D`}</span>}
          </Button>
        </Tooltip>
        <Tooltip label='Add Block' openDelay={tooltipDelayMid}>
@@ -105,15 +108,20 @@ const QuickAddBlock = (props: QuickAddBlockProps) => {
            variant='ontime-subtle-white'
            disabled={disableAddBlock}
            className={style.quickBtn}
-            data-testid='quick-add-block'
            leftIcon={<IoAdd />}
          >
-            Block {showKbd && <span className={style.keyboard}>{`${deviceAlt} + B`}</span>}
+            Block {shortcutBase && <span className={style.keyboard}>{`${shortcutBase} B`}</span>}
          </Button>
        </Tooltip>
      </div>
      <div className={style.options}>
-        <Checkbox ref={doLinkPrevious} size='sm' variant='ontime-ondark' defaultChecked={linkPrevious}>
+        <Checkbox
+          ref={doLinkPrevious}
+          size='sm'
+          variant='ontime-ondark'
+          isDisabled={!canLinkPrevious}
+          defaultChecked={shouldLinkPrevious}
+        >
          Link to previous
        </Checkbox>
        <Checkbox ref={doPublic} size='sm' variant='ontime-ondark' defaultChecked={defaultPublic}>
@@ -1,8 +1,6 @@
-import { Button, ButtonGroup, MenuButton } from '@chakra-ui/react';
-import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { ButtonGroup } from '@chakra-ui/react';
 import { IoOptions } from '@react-icons/all-files/io5/IoOptions';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
-import { IoSnowOutline } from '@react-icons/all-files/io5/IoSnowOutline';

 import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
 import { AppMode, useAppMode } from '../../../common/stores/appModeStore';
@@ -16,20 +14,10 @@ export default function RundownHeader() {
  const setAppMode = useAppMode((state) => state.setMode);
  const setRunMode = () => setAppMode(AppMode.Run);
  const setEditMode = () => setAppMode(AppMode.Edit);
-  const setFreezeMode = () => setAppMode(AppMode.Freeze);

  return (
    <div className={style.header}>
      <ButtonGroup isAttached>
-        <TooltipActionBtn
-          variant={appMode === AppMode.Freeze ? 'ontime-filled' : 'ontime-outlined'}
-          size='sm'
-          icon={<IoSnowOutline />}
-          clickHandler={setFreezeMode}
-          tooltip='Freeze rundown'
-          aria-label='Freeze rundown'
-          isDisabled
-        />
        <TooltipActionBtn
          variant={appMode === AppMode.Run ? 'ontime-filled' : 'ontime-outlined'}
          size='sm'
@@ -47,11 +35,7 @@ export default function RundownHeader() {
          aria-label='Edit mode'
        />
      </ButtonGroup>
-      <RundownMenu>
-        <MenuButton size='sm' as={Button} rightIcon={<IoAdd />} aria-label='Rundown menu' variant='ontime-outlined'>
-          Rundown
-        </MenuButton>
-      </RundownMenu>
+      <RundownMenu />
    </div>
  );
 }
@@ -1,31 +1,16 @@
-import { memo, ReactNode, useCallback } from 'react';
-import { Menu, MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
-import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
-import { IoRemoveCircleOutline } from '@react-icons/all-files/io5/IoRemoveCircleOutline';
-import { IoTimerOutline } from '@react-icons/all-files/io5/IoTimerOutline';
-import { IoTrashOutline } from '@react-icons/all-files/io5/IoTrashOutline';
-import { SupportedEvent } from 'ontime-types';
+import { useCallback } from 'react';
+import { Button } from '@chakra-ui/react';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';

 import { useEventAction } from '../../../common/hooks/useEventAction';
 import { useAppMode } from '../../../common/stores/appModeStore';
 import { useEventSelection } from '../useEventSelection';

-const RundownMenu = ({ children }: { children: ReactNode }) => {
+export default function RundownMenu() {
  const clearSelectedEvents = useEventSelection((state) => state.clearSelectedEvents);
  const setCursor = useAppMode((state) => state.setCursor);
-  const { addEvent, deleteAllEvents } = useEventAction();
-
-  const newEvent = useCallback(() => {
-    addEvent({ type: SupportedEvent.Event });
-  }, [addEvent]);
-
-  const newBlock = useCallback(() => {
-    addEvent({ type: SupportedEvent.Block });
-  }, [addEvent]);
-
-  const newDelay = useCallback(() => {
-    addEvent({ type: SupportedEvent.Delay });
-  }, [addEvent]);
+  const appMode = useAppMode((state) => state.mode);
+  const { deleteAllEvents } = useEventAction();

  const deleteAll = useCallback(() => {
    deleteAllEvents();
@@ -34,25 +19,15 @@ const RundownMenu = ({ children }: { children: ReactNode }) => {
  }, [clearSelectedEvents, deleteAllEvents, setCursor]);

  return (
-    <Menu isLazy lazyBehavior='unmount' variant='ontime-on-dark' placement='right-start'>
-      {children}
-      <MenuList>
-        <MenuItem icon={<IoAdd />} onClick={newEvent}>
-          Add event at start
-        </MenuItem>
-        <MenuItem icon={<IoTimerOutline />} onClick={newDelay}>
-          Add delay at start
-        </MenuItem>
-        <MenuItem icon={<IoRemoveCircleOutline />} onClick={newBlock}>
-          Add block at start
-        </MenuItem>
-        <MenuDivider />
-        <MenuItem icon={<IoTrashOutline />} onClick={deleteAll} color='#D20300'>
-          Delete all events
-        </MenuItem>
-      </MenuList>
-    </Menu>
+    <Button
+      size='sm'
+      variant='ontime-outlined'
+      leftIcon={<IoTrash />}
+      onClick={deleteAll}
+      color='#FA5656'
+      isDisabled={appMode === 'run'}
+    >
+      Clear rundown
+    </Button>
  );
-};
-
-export default memo(RundownMenu);
+}
@@ -14,6 +14,7 @@ import TitleCard from '../../../common/components/title-card/TitleCard';
 import { getBackstageOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
@@ -57,10 +58,7 @@ export default function Backstage(props: BackstageProps) {
  const [blinkClass, setBlinkClass] = useState(false);
  const [searchParams] = useSearchParams();

-  // Set window title
-  useEffect(() => {
-    document.title = 'ontime - Backstage Screen';
-  }, []);
+  useWindowTitle('Backstage');

  // blink on change
  useEffect(() => {
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Settings, ViewSettings } from 'ontime-types';

@@ -6,6 +5,7 @@ import { overrideStylesURL } from '../../../common/api/constants';
 import { getClockOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { OverridableOptions } from '../../../common/models/View.types';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
@@ -25,9 +25,7 @@ export default function Clock(props: ClockProps) {
  const { shouldRender } = useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);
  const [searchParams] = useSearchParams();

-  useEffect(() => {
-    document.title = 'ontime - Clock';
-  }, []);
+  useWindowTitle('Clock');

  // defer rendering until we load stylesheets
  if (!shouldRender) {
@@ -7,6 +7,7 @@ import { overrideStylesURL } from '../../../common/api/constants';
 import { getCountdownOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
@@ -37,9 +38,7 @@ export default function Countdown(props: CountdownProps) {
  const [runningMessage, setRunningMessage] = useState<TimerMessage>(TimerMessage.unhandled);
  const [delay, setDelay] = useState(0);

-  useEffect(() => {
-    document.title = 'ontime - Countdown';
-  }, []);
+  useWindowTitle('Countdown');

  // eg. http://localhost:4001/countdown?eventId=ei0us
  // Check for user options
@@ -6,6 +6,7 @@ import { overrideStylesURL } from '../../../common/api/constants';
 import { getLowerThirdOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { getPropertyValue } from '../common/viewUtils';

 import './LowerThird.scss';
@@ -141,10 +142,7 @@ export default function LowerThird(props: LowerProps) {
  const [playState, setPlayState] = useState<'pre' | 'in' | 'out'>('pre');
  useRuntimeStylesheet(viewSettings?.overrideStyles && overrideStylesURL);

-  // set window title
-  useEffect(() => {
-    document.title = 'ontime - Lower Third';
-  }, []);
+  useWindowTitle('Lower Third');

  const trigger = useMemo(() => {
    if (options.trigger === TriggerType.Event) {
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Playback, TimerMessage, TimerType, ViewSettings } from 'ontime-types';
 import { MILLIS_PER_SECOND, millisToString, removeLeadingZero, removeSeconds } from 'ontime-utils';
@@ -7,6 +6,7 @@ import { overrideStylesURL } from '../../../common/api/constants';
 import { MINIMAL_TIMER_OPTIONS } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { OverridableOptions } from '../../../common/models/View.types';
 import { timerPlaceholder } from '../../../common/utils/styleUtils';
@@ -28,9 +28,7 @@ export default function MinimalTimer(props: MinimalTimerProps) {
  const { getLocalizedString } = useTranslation();
  const [searchParams] = useSearchParams();

-  useEffect(() => {
-    document.title = 'ontime - Minimal Timer';
-  }, []);
+  useWindowTitle('Minimal Timer');

  // defer rendering until we load stylesheets
  if (!shouldRender) {
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import QRCode from 'react-qr-code';
 import { useSearchParams } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -12,6 +11,7 @@ import TitleCard from '../../../common/components/title-card/TitleCard';
 import { getPublicOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import { useTranslation } from '../../../translation/TranslationProvider';
@@ -54,10 +54,7 @@ export default function Public(props: BackstageProps) {
  const { getLocalizedString } = useTranslation();
  const [searchParams] = useSearchParams();

-  // set window title
-  useEffect(() => {
-    document.title = 'ontime - Public Screen';
-  }, []);
+  useWindowTitle('Public Schedule');

  // defer rendering until we load stylesheets
  if (!shouldRender) {
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import type { OntimeEvent, OntimeRundown, Settings, ViewSettings } from 'ontime-types';
 import { isOntimeEvent, Playback } from 'ontime-types';
@@ -9,6 +8,7 @@ import { getStudioClockOptions } from '../../../common/components/view-params-ed
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import useFitText from '../../../common/hooks/useFitText';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
 import SuperscriptTime from '../common/superscript-time/SuperscriptTime';
@@ -46,9 +46,7 @@ export default function StudioClock(props: StudioClockProps) {

  const [searchParams] = useSearchParams();

-  useEffect(() => {
-    document.title = 'ontime - Studio Clock';
-  }, []);
+  useWindowTitle('Studio Clock');

  let clock = formatTime(time.clock);
  let hasAmPm = '';
@@ -32,6 +32,8 @@

  .blackout {
    position: absolute;
+    top: 0;
+    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 import {
@@ -19,6 +18,7 @@ import TitleCard from '../../../common/components/title-card/TitleCard';
 import { getTimerOptions } from '../../../common/components/view-params-editor/constants';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useRuntimeStylesheet } from '../../../common/hooks/useRuntimeStylesheet';
+import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
 import { timerPlaceholder } from '../../../common/utils/styleUtils';
 import { formatTime, getDefaultFormat } from '../../../common/utils/time';
@@ -63,9 +63,7 @@ export default function Timer(props: TimerProps) {
  const { getLocalizedString } = useTranslation();
  const [searchParams] = useSearchParams();

-  useEffect(() => {
-    document.title = 'ontime - Timer';
-  }, []);
+  useWindowTitle('Timer');

  // defer rendering until we load stylesheets
  if (!shouldRender) {
@@ -3,12 +3,24 @@ export const ontimeCheckboxOnDark = {
    border: '1px',
    borderColor: '#2d2d2d', // $gray-1100
    backgroundColor: '#2d2d2d', // $gray-1100
+    _disabled: {
+      color: 'white',
+      borderColor: '#2d2d2d', // $gray-1100
+      backgroundColor: '#2d2d2d', // $gray-1100
+      opacity: 0.6,
+    },
    _checked: {
      borderColor: '#3182ce', // $action-blue
      backgroundColor: '#3182ce', //$action-blue
+      _disabled: {
+        color: 'white',
+        borderColor: '#3182ce', // $action-blue
+        backgroundColor: '#3182ce', //$action-blue
+        opacity: 0.6,
+      },
    },
    _focus: {
-      boxShadow: '0 0 0 1px #578AF4', // $blue-500
+      boxShadow: 'none',
    },
  },
  label: {
@@ -1,19 +1,27 @@
 export const ontimeMenuOnDark = {
  list: {
+    fontSize: 'calc(1rem - 2px)',
    borderRadius: '3px',
-    border: 'none',
-    bg: '#fff', // $gray-50
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+    color: '#ececec', // $gray-1030
+    backgroundColor: '#202020', // $gray-1250
    zIndex: 100,
  },
  item: {
-    letterSpacing: '0.15px',
-    color: '#101010', // $gray-1350
-    bg: '#fff', //
+    backgroundColor: 'transparent',
+    paddingBlock: '0.5rem',
    _hover: {
-      backgroundColor: '#e2e2e2', // $gray-200
+      backgroundColor: 'rgba(0, 0, 0, 0.1)',
+      _disabled: {
+        backgroundColor: 'transparent',
+      },
+    },
+    _disabled: {
+      color: '#b1b1b1', // $gray-400
    },
  },
  divider: {
-    borderColor: '#cfcfcf', // $gray-200
+    borderColor: 'rgba(255, 255, 255, 0.07)',
+    opacity: 1,
  },
 };
@@ -57,8 +57,8 @@ const theme = extendTheme({
    },
    Drawer: {
      variants: {
-        'ontime': {...ontimeDrawer},
-      }
+        ontime: { ...ontimeDrawer },
+      },
    },
    Editable: {
      variants: {