Refactor core services for multi-rundown support

This commit introduces foundational changes to enable handling multiple rundowns within a single project.

Key changes:

- `rundown.dao.ts`:
    - Replaced single global rundown cache with Map-based caches for rundowns, metadata, and custom field usage, keyed by RundownId.
    - Updated `init`, getters, and transaction logic to operate on specific RundownIds.
    - Added `removeRundownFromCache`.
    - Basic unit tests for DAO operations implemented.

- `ProjectService.ts`:
    - `loadProject` now initializes all rundowns from a project file into the DAO.
    - `patchCurrentProject` updated to sync multiple rundowns with the DAO (add/update/remove from cache).
    - Added new CRUD methods: `getAvailableRundownsInCurrentProject`, `createNewRundownInCurrentProject`, `deleteRundownFromCurrentProject`, `updateRundownMetadataInCurrentProject`.

- `RuntimeService.ts`:
    - Introduced `activeRundownId` state.
    - Implemented `setActiveRundown`, `clearActiveRundown`, `getActiveRundownId`.
    - DAO calls within service now use `activeRundownId`.
    - `notifyOfChangedEvents` now filters by active rundown.
    - `RestorePoint` type and save/resume logic updated to include `rundownId`.
    - Enhanced state reset in `runtimeState.ts` and `RuntimeService` for rundown context switching.

- `AppStateService.ts`:
    - Extended `AppState` to persist `lastActiveRundowns` (map of projectFileName to last active RundownId).
    - Added methods to manage this persisted preference.

- API Layer (Conceptual Outline):
    - Project loading to make all rundowns available and activate last active.
    - New CRUD APIs for rundowns within a project.
    - New API for runtime activation (`/runtime/activate_rundown`).
    - Existing runtime APIs to use activated context.
    - Editing APIs to explicitly target `rundownId`.

Further work will involve implementing the API layer changes and comprehensively updating/writing tests across the application to align with this new architecture.

README.md

@@ -103,19 +103,12 @@ IP.ADDRESS:4001/studio     > Studio Clock
 IP.ADDRESS:4001/timeline   > Timeline
 ```
 
-```
-For the public views
--------------------------------------------------------------
-IP.ADDRESS:4001/public     > Public / Foyer view
-IP.ADDRESS:4001/lower      > Lower Thirds
-```
-
 ```
 For production views
 -------------------------------------------------------------
 IP.ADDRESS:4001/editor    > the control interface, same as the app
 IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
-IP.ADDRESS:4001/operator  > automated views for operators
+IP.ADDRESS:4001/op        > automated views for operators
 ```
 
 More information is available [in our docs](https://docs.getontime.no)

apps/client/.eslintrc

@@ -15,10 +15,12 @@
   ],
   "plugins": [
     "react",
+    "react-compiler",
     "simple-import-sort",
     "@tanstack/query"
   ],
   "rules": {
+    "react-compiler/react-compiler": "warn",
     "react/jsx-no-bind": [
       "error",
       {

apps/client/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.0",
     "@chakra-ui/react": "^2.7.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
@@ -20,7 +21,6 @@
     "@tanstack/react-table": "^8.21.3",
     "autosize": "^6.0.1",
     "axios": "^1.9.0",
-    "color": "^4.2.3",
     "csv-stringify": "^6.4.5",
     "framer-motion": "^10.10.0",
     "prismjs": "^1.29.0",
@@ -66,7 +66,6 @@
   "devDependencies": {
     "@sentry/vite-plugin": "^2.16.1",
     "@tanstack/eslint-plugin-query": "^5.8.4",
-    "@types/color": "^3.0.3",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
@@ -78,6 +77,7 @@
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "happy-dom": "^16.7.2",

apps/client/src/AppRouter.tsx

@@ -18,20 +18,19 @@ import ViewLoader from './views/ViewLoader';
 import { ONTIME_VERSION } from './ONTIME_VERSION';
 import { sentryDsn, sentryRecommendedIgnore } from './sentry.config';
 
-const Editor = React.lazy(() => import('./features/editors/ProtectedEditor'));
+const Editor = React.lazy(() => import('./views/editor/ProtectedEditor'));
 const Cuesheet = React.lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
 const Operator = React.lazy(() => import('./features/operator/OperatorExport'));
 
 const TimerView = React.lazy(() => import('./views/timer/Timer'));
 const MinimalTimerView = React.lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
 const ClockView = React.lazy(() => import('./features/viewers/clock/Clock'));
-const Countdown = React.lazy(() => import('./features/viewers/countdown/Countdown'));
+const Countdown = React.lazy(() => import('./views/countdown/Countdown'));
 
 const Backstage = React.lazy(() => import('./views/backstage/Backstage'));
 const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
-const Public = React.lazy(() => import('./views/public/Public'));
 const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
-const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
+const StudioClock = React.lazy(() => import('./views/studio/Studio'));
 const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));
 
 const STimer = withPreset(withData(TimerView));
@@ -40,7 +39,6 @@ const SClock = withPreset(withData(ClockView));
 const SCountdown = withPreset(withData(Countdown));
 const SBackstage = withPreset(withData(Backstage));
 const SProjectInfo = withPreset(withData(ProjectInfo));
-const SPublic = withPreset(withData(Public));
 const SLowerThird = withPreset(withData(Lower));
 const SStudio = withPreset(withData(StudioClock));
 const STimeline = withPreset(withData(Timeline));
@@ -88,14 +86,6 @@ export default function AppRouter() {
             </ViewLoader>
           }
         />
-        <Route
-          path='/public'
-          element={
-            <ViewLoader>
-              <SPublic />
-            </ViewLoader>
-          }
-        />
         <Route
           path='/minimal'
           element={

apps/client/src/common/api/axios.config.ts

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+axios.defaults.validateStatus = (status) => {
+  return (status >= 200 && status < 300) || status === 304;
+};

apps/client/src/common/api/viewSettings.ts

@@ -1,21 +1,15 @@
 import axios from 'axios';
-import { ViewSettings } from 'ontime-types';
+import type { ViewSettings } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+const viewSettingsPath = apiEntryUrl + '/view-settings';
 
-const viewSettingsPath = `${apiEntryUrl}/view-settings`;
-
-/**
- * HTTP request to retrieve view settings
- */
-export async function getView(): Promise<ViewSettings> {
+export async function getViewSettings() {
   const res = await axios.get(viewSettingsPath);
   return res.data;
 }
 
-/**
- * HTTP request to mutate view settings
- */
 export async function postViewSettings(data: ViewSettings) {
-  return axios.post(viewSettingsPath, data);
+  const res = await axios.post(viewSettingsPath, data);
+  return res.data as ViewSettings;
 }

apps/client/src/common/components/buttons/BaseButtonStyles.module.scss

@@ -0,0 +1,81 @@
+.subtle {
+  background: $gray-1050;
+  color: $blue-400;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}
+
+.subtle-white {
+  background: $gray-1050;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    background: $gray-1050;
+  }
+}
+
+.primary {
+  background: $blue-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $blue-600;
+  }
+
+  &:active:not(:disabled) {
+    background: $blue-800;
+    border-color: $blue-900;
+  }
+
+  &:disabled {
+    opacity: $viewer-opacity-disabled;
+  }
+}
+
+.destructive {
+  background: $red-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $red-600;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $red-800;
+    border-color: $red-900;
+  }
+}
+
+.subtle-destructive {
+  background: $gray-1050;
+  color: $red-400;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $red-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}

apps/client/src/common/components/buttons/Button.module.scss

@@ -0,0 +1,53 @@
+@use '../../../theme/viewerDefs' as *;
+@import './BaseButtonStyles.module.scss';
+
+.baseButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+
+  width: fit-content;
+  padding-inline: 1em;
+  white-space: nowrap;
+
+  border: 1px solid transparent;
+  border-radius: $component-border-radius-md;
+
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+}
+
+.small {
+  height: 1.5rem;
+  font-size: calc(1rem - 3px);
+}
+
+.medium {
+  height: 2rem;
+  font-size: calc(1rem - 2px);
+}
+
+.large {
+  height: 2.5rem;
+  font-weight: 600;
+}
+
+.xlarge {
+  height: 3rem;
+  font-weight: 600;
+}
+
+.fluid {
+  width: 100%;
+}
+

apps/client/src/common/components/buttons/Button.tsx

@@ -0,0 +1,25 @@
+import { ButtonHTMLAttributes } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './Button.module.scss';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  fluid?: boolean;
+}
+
+export default function Button(props: ButtonProps) {
+  const { className, children, variant = 'subtle', size = 'medium', fluid, ...buttonProps } = props;
+
+  return (
+    <button
+      className={cx([style.baseButton, style[variant], style[size], fluid && style.fluid, className])}
+      type='button'
+      {...buttonProps}
+    >
+      {children}
+    </button>
+  );
+}

apps/client/src/common/components/buttons/IconButton.module.scss

@@ -1,26 +1,34 @@
-.subtle {
+@use '../../../theme/viewerDefs' as *;
+@import './BaseButtonStyles.module.scss';
+
+.baseIconButton {
   aspect-ratio: 1;
-  height: 2rem;
-  height: 2rem;
   display: grid;
   place-content: center;
 
-  background: $gray-1050;
-  color: $blue-400;
   border: 1px solid transparent;
   border-radius: 3px;
 
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $blue-500;
-  }
-
-  &:active {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
+  cursor: pointer;
 
   &:disabled {
-    background: $gray-1050;
+    opacity: 0.4;
+    cursor: not-allowed;
   }
 }
+
+.medium {
+  height: 2rem;
+  width: 2rem;
+}
+
+.large {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.xlarge {
+  height: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}

apps/client/src/common/components/buttons/IconButton.tsx

@@ -4,10 +4,24 @@ import { cx } from '../../utils/styleUtils';
 
 import style from './IconButton.module.scss';
 
-export default function IconButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
-  const { className, children, ...buttonProps } = props;
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive';
+  size?: 'medium' | 'large' | 'xlarge';
+}
+
+export default function IconButton({
+  className,
+  children,
+  variant = 'subtle',
+  size = 'medium',
+  ...buttonProps
+}: IconButtonProps) {
   return (
-    <button className={cx([style.subtle, className])} {...buttonProps}>
+    <button
+      className={cx([style.baseIconButton, style[variant], style[size], className])}
+      type='button'
+      {...buttonProps}
+    >
       {children}
     </button>
   );

apps/client/src/common/components/checkbox/Checkbox.module.scss

@@ -0,0 +1,50 @@
+.checkbox {
+  box-sizing: border-box;
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: $component-border-radius-sm;
+
+  &[data-unchecked] {
+    background-color: $gray-1100;
+
+    &:hover:not(:disabled) {
+      background: $gray-1000;
+    }
+    &:active:not(:disabled) {
+      background: $gray-1200;
+    }
+  }
+
+  &[data-checked] {
+    background-color: $blue-500;
+
+    &:hover:not(:disabled) {
+      background: $blue-400;
+    }
+    &:active:not(:disabled) {
+      background: $blue-600;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+}
+
+.indicator {
+  display: flex;
+  color: $ui-white;
+
+  &[data-unchecked] {
+    display: none;
+  }
+}

apps/client/src/common/components/checkbox/Checkbox.tsx

@@ -0,0 +1,14 @@
+import { IoCheckmark } from 'react-icons/io5';
+import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+
+import style from './Checkbox.module.scss';
+
+export default function Checkbox(checkboxProps: BaseCheckbox.Root.Props) {
+  return (
+    <BaseCheckbox.Root className={style.checkbox} {...checkboxProps}>
+      <BaseCheckbox.Indicator className={style.indicator}>
+        <IoCheckmark className={style.icon} />
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  );
+}

apps/client/src/common/components/client-modal/RenameClientModal.tsx

@@ -1,17 +1,9 @@
 import { useState } from 'react';
-import {
-  Button,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/react';
 
+import Button from '../../../common/components/buttons/Button';
 import { setClientRemote } from '../../hooks/useSocket';
+import Dialog from '../dialog/Dialog';
+import Input from '../input/input/Input';
 
 interface RenameClientModalProps {
   id: string;
@@ -20,8 +12,7 @@ interface RenameClientModalProps {
   onClose: () => void;
 }
 
-export function RenameClientModal(props: RenameClientModalProps) {
-  const { id, name: currentName = '', isOpen, onClose } = props;
+export function RenameClientModal({ id, name: currentName = '', isOpen, onClose }: RenameClientModalProps) {
   const [name, setName] = useState(currentName);
 
   const { setClientName } = setClientRemote;
@@ -36,29 +27,24 @@ export function RenameClientModal(props: RenameClientModalProps) {
   const canSubmit = name !== currentName && name !== '';
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Rename: {currentName}</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <Input
-            variant='ontime-filled'
-            size='md'
-            placeholder='new name'
-            value={name}
-            onChange={(event) => setName(event.target.value)}
-          />
-        </ModalBody>
-        <ModalFooter>
-          <Button size='md' variant='ontime-subtle' onClick={onClose}>
+    <Dialog
+      isOpen={isOpen}
+      title={`Rename Client: ${currentName}`}
+      showCloseButton
+      onClose={onClose}
+      bodyElements={
+        <Input height='large' placeholder='New name' value={name} onChange={(event) => setName(event.target.value)} />
+      }
+      footerElements={
+        <>
+          <Button variant='subtle' size='large' onClick={onClose}>
             Cancel
           </Button>
-          <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
+          <Button variant='primary' size='large' onClick={handleRename} disabled={!canSubmit}>
             Submit
           </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
+        </>
+      }
+    />
   );
 }

apps/client/src/common/components/dialog/Dialog.module.scss

@@ -0,0 +1,57 @@
+.dialog {
+  position: fixed;
+  top: 10%;
+  left: 50%;
+
+  z-index: $zindex-dialog;
+  transform: translateX(-50%);
+
+  padding-inline: 1rem;
+  min-width: min(420px, 90vw);
+
+  background-color: $gray-1250;
+  color: $ui-white;
+  border-radius: 3px;
+  box-shadow: $box-shadow-l1;
+  border: 1px solid $gray-1200;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $zindex-backdrop;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: 600;
+  padding-block: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  max-height: min(80vh, 600px);
+  overflow-y: auto;
+}
+
+.footer {
+  padding-block: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 1rem;
+}

apps/client/src/common/components/dialog/Dialog.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import { IoClose } from 'react-icons/io5';
+import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+
+import IconButton from '../buttons/IconButton';
+
+import style from './Dialog.module.scss';
+
+interface DialogProps {
+  isOpen: boolean;
+  title: string;
+  showCloseButton?: boolean;
+  showBackdrop?: boolean;
+  bodyElements: ReactNode;
+  footerElements: ReactNode;
+  onClose: () => void;
+}
+
+export default function Dialog({
+  isOpen,
+  title,
+  showCloseButton,
+  showBackdrop,
+  bodyElements,
+  footerElements,
+  onClose,
+}: DialogProps) {
+  return (
+    <BaseDialog.Root
+      open={isOpen}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose();
+      }}
+    >
+      <BaseDialog.Portal>
+        {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
+        <BaseDialog.Popup className={style.dialog}>
+          <div className={style.title}>
+            {title}
+            {showCloseButton && (
+              <IconButton variant='subtle-white' onClick={onClose}>
+                <IoClose />
+              </IconButton>
+            )}
+          </div>
+          <div className={style.body}>{bodyElements}</div>
+          <div className={style.footer}>{footerElements}</div>
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  );
+}

apps/client/src/common/components/editor-utils/EditorUtils.module.scss

@@ -40,3 +40,17 @@
   margin-bottom: $element-inner-spacing;
   max-width: max-content; // prevent label from taking entire row
 }
+
+.separator {
+  background-color: $border-color-ondark;
+
+  &.horizontal {
+    width: 100%;
+    height: 1px;
+  }
+
+  &.vertical {
+    width: 1px;
+    height: 0.75em;  
+  }
+}

apps/client/src/common/components/editor-utils/EditorUtils.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes, LabelHTMLAttributes } from 'react';
 import { IconBaseProps } from 'react-icons';
 import { IoArrowUp } from 'react-icons/io5';
 
-import { cx } from '../../../common/utils/styleUtils';
+import { cx } from '../../utils/styleUtils';
 
 import style from './EditorUtils.module.scss';
 
@@ -27,3 +27,11 @@ export function Label({ children, className, ...elementProps }: LabelHTMLAttribu
     </label>
   );
 }
+
+interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export function Separator({ className, orientation = 'vertical', ...elementProps }: SeparatorProps) {
+  return <div className={cx([style.separator, style[orientation], className])} {...elementProps} />;
+}

apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss

@@ -15,7 +15,7 @@
   display: grid;
   place-content: center;
   text-align: center;
-  z-index: 100;
+  z-index: $zindex-modal;
   cursor: pointer;
 }
 

apps/client/src/common/components/input/input/Input.module.scss

@@ -0,0 +1,52 @@
+.input {
+  box-sizing: border-box;
+
+  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  border-radius: $component-border-radius-md;
+  border: 1px solid transparent;
+
+  padding-inline: 0.5em;
+  outline: none;
+
+  &:hover:not(:disabled) {
+    background-color: $gray-1100;
+  }
+
+  &:focus:not(:read-only) {
+    background-color: $gray-1000;
+    border: 1px solid $blue-500;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
+  }
+}
+
+.subtle {
+  background-color: $gray-1200;
+}
+
+.ghosted {
+  background-color: transparent;
+  padding: 0;
+}
+
+.medium {
+  height: 2rem;
+}
+
+.large {
+  height: 2.5rem;
+}
+
+.fluid {
+  width: 100%;
+}

apps/client/src/common/components/input/input/Input.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, InputHTMLAttributes } from 'react';
+
+import { cx } from '../../../utils/styleUtils';
+
+import style from './Input.module.scss';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  variant?: 'subtle' | 'ghosted';
+  height?: 'medium' | 'large';
+  fluid?: boolean;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, variant = 'subtle', height = 'medium', fluid, ...inputProps },
+  ref,
+) {
+  return (
+    <input
+      ref={ref}
+      type='text'
+      autoCorrect='off'
+      autoComplete='off'
+      spellCheck='false'
+      className={cx([style.input, style[variant], style[height], fluid && style.fluid, className])}
+      {...inputProps}
+    />
+  );
+});
+
+export default Input;

apps/client/src/common/components/input/time-input/NullableTimeInput.tsx

@@ -0,0 +1,135 @@
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { millisToString, parseUserTime } from 'ontime-utils';
+
+import { cx } from '../../../utils/styleUtils';
+import Input from '../input/Input';
+
+import style from './TimeInput.module.scss';
+
+interface NullableTimeInputProps<T extends string> {
+  id?: T;
+  name: T;
+  submitHandler: (field: T, value: string) => void;
+  time?: number | null;
+  emptyDisplay: string;
+  placeholder?: string;
+  disabled?: boolean;
+  align?: 'left' | 'center';
+  className?: string;
+}
+
+export default function NullableTimeInput<T extends string>(props: NullableTimeInputProps<T>) {
+  const { id, name, submitHandler, time, emptyDisplay, placeholder, disabled, align = 'center', className } = props;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [value, setValue] = useState<string>('');
+  const ignoreChange = useRef(false);
+
+  /**
+   * @description Resets input value to given
+   */
+  const resetValue = useCallback(() => {
+    if (typeof time !== 'number' || isNaN(time)) {
+      setValue(emptyDisplay);
+    } else {
+      setValue(millisToString(time));
+    }
+  }, [emptyDisplay, time]);
+
+  /**
+   * @description Selects input text on focus
+   */
+  const handleFocus = useCallback(() => {
+    inputRef.current?.select();
+  }, []);
+
+  /**
+   * @description Submit handler
+   * @param {string} newValue
+   */
+  const handleSubmit = useCallback(
+    (newValue: string) => {
+      // skip if user deleted and time is already null
+      if (newValue === '' && time === null) {
+        return false;
+      }
+
+      // skip if the value evaluates to the same thing
+      const valueInMillis = parseUserTime(newValue);
+      if (valueInMillis === time) {
+        return false;
+      }
+
+      submitHandler(name, newValue);
+      return true;
+    },
+    [name, submitHandler, time],
+  );
+
+  /**
+   * @description Prepare time fields
+   * @param {string} value string to be parsed
+   */
+  const validateAndSubmit = useCallback(
+    (newValue: string) => {
+      const success = handleSubmit(newValue);
+      if (!success) {
+        resetValue();
+      }
+    },
+    [handleSubmit, resetValue],
+  );
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        inputRef.current?.blur();
+      }
+      if (event.key === 'Escape') {
+        ignoreChange.current = true;
+        inputRef.current?.blur();
+        resetValue();
+      }
+    },
+    [resetValue],
+  );
+
+  const onBlurHandler = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (ignoreChange.current) {
+        ignoreChange.current = false;
+        return;
+      }
+      validateAndSubmit((event.target as HTMLInputElement).value);
+    },
+    [validateAndSubmit],
+  );
+
+  useEffect(() => {
+    resetValue();
+  }, [resetValue]);
+
+  return (
+    <Input
+      id={id}
+      disabled={disabled}
+      ref={inputRef}
+      data-testid={`time-input-${name}`}
+      className={cx([style.timeInput, className])}
+      placeholder={placeholder}
+      onFocus={handleFocus}
+      onChange={(event) => setValue(event.target.value)}
+      onBlur={onBlurHandler}
+      onKeyDown={onKeyDownHandler}
+      value={value}
+      maxLength={8}
+      autoComplete='off'
+      style={{
+        textAlign: align,
+      }}
+    />
+  );
+}

apps/client/src/common/components/input/time-input/TimeInput.module.scss

@@ -1,4 +1,6 @@
 .timeInput {
-    letter-spacing: 1px;
-    width: 6.5em;
+  width: 100%;
+  max-width: 7.5em;
+  letter-spacing: 1px;
+  font-variant-numeric: tabular-nums;
 }

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -1,23 +1,24 @@
 import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';
 
-import { useEmitLog } from '../../../stores/logger';
+import { cx } from '../../../utils/styleUtils';
+import Input from '../input/Input';
+
+import style from './TimeInput.module.scss';
 
 interface TimeInputProps<T extends string> {
   id?: T;
   name: T;
   submitHandler: (field: T, value: string) => void;
   time?: number;
-  placeholder: string;
+  placeholder?: string;
   disabled?: boolean;
   align?: 'left' | 'center';
   className?: string;
 }
 
 export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
-  const { id, name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
-  const { emitError } = useEmitLog();
+  const { id, name, submitHandler, time, placeholder, disabled, align = 'center', className } = props;
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
   const ignoreChange = useRef(false);
@@ -26,13 +27,12 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
    * @description Resets input value to given
    */
   const resetValue = useCallback(() => {
-    try {
+    if (typeof time !== 'number' || isNaN(time)) {
+      setValue('00:00:00');
+    } else {
       setValue(millisToString(time));
-    } catch (error) {
-      setValue(millisToString(0));
-      emitError(`Unable to parse time ${time}: ${error}`);
     }
-  }, [emitError, time]);
+  }, [time]);
 
   /**
    * @description Selects input text on focus
@@ -113,32 +113,27 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
   );
 
   useEffect(() => {
-    if (time == null) return;
     resetValue();
-  }, [resetValue, time]);
+  }, [resetValue]);
 
   return (
     <Input
       id={id}
       disabled={disabled}
-      size='sm'
       ref={inputRef}
       data-testid={`time-input-${name}`}
-      className={className}
-      fontSize='1rem'
-      type='text'
+      className={cx([style.timeInput, className])}
       placeholder={placeholder}
-      variant='ontime-filled'
       onFocus={handleFocus}
       onChange={(event) => setValue(event.target.value)}
       onBlur={onBlurHandler}
       onKeyDown={onKeyDownHandler}
       value={value}
       maxLength={8}
-      maxWidth='7.5em'
-      letterSpacing='1px'
       autoComplete='off'
-      textAlign={align}
+      style={{
+        textAlign: align,
+      }}
     />
   );
 }

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

@@ -1,38 +0,0 @@
-import { IoApps } from 'react-icons/io5';
-import { IoSettingsOutline } from 'react-icons/io5';
-
-import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
-import { cx } from '../../utils/styleUtils';
-
-import style from './NavigationMenu.module.scss';
-
-interface FloatingNavigationProps {
-  toggleMenu: () => void;
-  toggleSettings: () => void;
-}
-
-export default function FloatingNavigation(props: FloatingNavigationProps) {
-  const { toggleMenu, toggleSettings } = props;
-  const isButtonShown = useFadeOutOnInactivity();
-
-  return (
-    <div className={cx([style.fadeable, style.buttonContainer, !isButtonShown && 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>
-  );
-}

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

@@ -1,118 +1,68 @@
-@use '../../../theme/mixins' as *;
-
-$menu-hover-bg: $gray-1350;
-$menu-focus-bg: $gray-1300;
-
-$icon-color: $ui-white;
-$button-bg: $gray-1050;
-$button-size: 3rem;
-
-.fadeable {
-  opacity: 1;
-
-  transition-property: opacity;
-  transition-duration: 0.3s;
-
-  &.hidden {
-    opacity: 0;
-  }
-}
-
-.lockIcon {
-  font-size: 1.5rem;
-  color: $active-indicator;
-  padding: 0.5em;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 12;
-}
-
-.buttonContainer {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1rem;
-  padding: 0.5em;
-
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 12;
-}
-
-.button {
-  font-size: 1.5rem;
-  color: $icon-color;
-  background-color: $button-bg;
-  width: $button-size;
-  height: $button-size;
-  display: grid;
-  place-content: center;
-  border-radius: 3px;
-}
-
-.navButton {
-  @extend .button;
-  z-index: 3;
-}
-
-.link {
-  @include action-link;
-  padding: 0.75rem 1.5rem;
-  gap: 0.5rem;
-  width: 100%;
-  cursor: pointer;
-
-  &:hover {
-    background-color: $menu-hover-bg;
-  }
-
-  &:active {
-    background-color: $border-color-ondark;
-  }
-
-  &:focus {
-    outline: none;
-    background-color: $menu-focus-bg;
-    border-left: 2px solid $action-text-color;
-  }
-
-  &.current {
-    background-color: $menu-hover-bg;
-    border-left: 4px solid $action-text-color;
-  }
-}
-
-.linkIcon {
-  margin-left: auto;
-  @include rotate-fourty-five;
-}
-
 .separator {
   border-color: $border-color-ondark;
 }
 
-.sectionHeader {
-  font-size: calc(1rem - 2px);
-  margin-left: 1rem;
-  color: $gray-700;
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $zindex-backdrop;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
 }
 
-.bottom {
-  margin-top: auto;
-  margin-bottom: 1rem;
-}
+.drawer {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: $zindex-dialog;
+
+  width: 22rem;
+  height: 100vh;
 
-.interfaces {
-  padding: 0.5rem 1rem;
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
+  flex-direction: column;
+  padding-block: 1rem;
+
+  background-color: $gray-1250;
+  color: $ui-white;
+  border-right: 1px solid $gray-1200;
+
+  &[data-open] {
+    transform: translateX(0%);
+    transition: transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateX(-100%);
+    transition: transform 500ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  // take the whole screen in mobile devices
+  @media (max-width: $min-tablet) {
+    width: 100vw;
+  }
 }
 
-.goIcon {
-  @include rotate-fourty-five;
-  margin-left: 0.25rem;
-  margin-bottom: 0.25rem;
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+  padding-inline: 1.5rem;
+
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
 }

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

@@ -1,29 +1,20 @@
-import { memo, PropsWithChildren } from 'react';
-import { createPortal } from 'react-dom';
-import { IoArrowUp, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
-import { Link, useLocation } from 'react-router-dom';
-import {
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerHeader,
-  DrawerOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
-import { useFullscreen } from '@mantine/hooks';
+import { memo } from 'react';
+import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
+import { useLocation } from 'react-router-dom';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { useDisclosure, useFullscreen } from '@mantine/hooks';
 
 import { isLocalhost } from '../../../externals';
 import { navigatorConstants } from '../../../viewerConfig';
-import { useElectronEvent } from '../../hooks/useElectronEvent';
-import useInfo from '../../hooks-query/useInfo';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
-import { isKeyEnter } from '../../utils/keyEvent';
-import { handleLinks, linkToOtherHost, openLink } from '../../utils/linkUtils';
-import { cx } from '../../utils/styleUtils';
+import IconButton from '../buttons/IconButton';
 import { RenameClientModal } from '../client-modal/RenameClientModal';
-import CopyTag from '../copy-tag/CopyTag';
+
+import ClientLink from './client-link/ClientLink';
+import EditorNavigation from './editor-navigation/EditorNavigation';
+import NavigationMenuItem from './navigation-menu-item/NavigationMenuItem';
+import OtherAddresses from './other-addresses/OtherAddresses';
 
 import style from './NavigationMenu.module.scss';
 
@@ -32,74 +23,49 @@ interface NavigationMenuProps {
   onClose: () => void;
 }
 
-function NavigationMenu(props: NavigationMenuProps) {
-  const { isOpen, onClose } = props;
-
+export default memo(NavigationMenu);
+function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
   const id = useClientStore((store) => store.id);
   const name = useClientStore((store) => store.name);
 
-  const { isOpen: isOpenRename, onOpen: onRenameOpen, onClose: onCloseRename } = useDisclosure();
+  const [isRenameOpen, handlers] = useDisclosure(false);
   const { fullscreen, toggle } = useFullscreen();
   const { mirror, toggleMirror } = useViewOptionsStore();
   const location = useLocation();
 
-  return createPortal(
-    <div id='navigation-menu-portal'>
-      <RenameClientModal id={id} name={name} isOpen={isOpenRename} onClose={onCloseRename} />
-      <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
-        <DrawerOverlay />
-        <DrawerContent maxWidth='22rem'>
-          <DrawerHeader>
-            <DrawerCloseButton size='lg' />
-            Ontime
-          </DrawerHeader>
-          <DrawerBody padding={0}>
-            <div className={style.buttonsContainer}>
-              <div
-                className={cx([style.link, fullscreen && style.current])}
-                tabIndex={0}
-                role='button'
-                onClick={toggle}
-                onKeyDown={(event) => {
-                  isKeyEnter(event) && toggle();
-                }}
-              >
-                Toggle Fullscreen
-                {fullscreen ? <IoContract /> : <IoExpand />}
-              </div>
-              <div
-                className={cx([style.link, mirror && style.current])}
-                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>
+  return (
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose();
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Backdrop className={style.backdrop} />
+        <RenameClientModal id={id} name={name} isOpen={isRenameOpen} onClose={handlers.close} />
+        <Dialog.Popup className={style.drawer}>
+          <div className={style.header}>
+            <Dialog.Title>Ontime</Dialog.Title>
+            <IconButton variant='subtle-white' size='large' onClick={onClose}>
+              <IoClose />
+            </IconButton>
+          </div>
+          <div className={style.body}>
+            <NavigationMenuItem active={fullscreen} onClick={toggle}>
+              Toggle Fullscreen
+              {fullscreen ? <IoContract /> : <IoExpand />}
+            </NavigationMenuItem>
+            <NavigationMenuItem active={mirror} onClick={toggleMirror}>
+              Flip Screen
+              <IoSwapVertical />
+            </NavigationMenuItem>
+            <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>
+
             <hr className={style.separator} />
-            <Link
-              to='/editor'
-              tabIndex={0}
-              className={`${style.link} ${location.pathname === '/editor' && style.current}`}
-            >
-              <IoLockClosedOutline />
-              Editor
-            </Link>
+
+            <EditorNavigation />
             <ClientLink to='cuesheet' current={location.pathname === '/cuesheet'}>
               <IoLockClosedOutline />
               Cuesheet
@@ -108,86 +74,23 @@ function NavigationMenu(props: NavigationMenuProps) {
               <IoLockClosedOutline />
               Operator
             </ClientLink>
+
             <hr className={style.separator} />
+
             {navigatorConstants.map((route) => (
               <ClientLink key={route.url} to={route.url} current={location.pathname === `/${route.url}`}>
                 {route.label}
               </ClientLink>
             ))}
-            {isLocalhost && <OtherAddresses currentLocation={location.pathname} />}
-          </DrawerBody>
-        </DrawerContent>
-      </Drawer>
-    </div>,
-    document.body,
+          </div>
+
+          {isLocalhost && (
+            <div>
+              <OtherAddresses currentLocation={location.pathname} />
+            </div>
+          )}
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }
-
-interface OtherAddressesProps {
-  currentLocation: string;
-}
-
-function OtherAddresses(props: OtherAddressesProps) {
-  const { currentLocation } = props;
-  const { data } = useInfo();
-
-  // there is no point showing this if we only have one interface
-  if (data.networkInterfaces.length < 2) {
-    return null;
-  }
-
-  return (
-    <div className={style.bottom}>
-      <div className={style.sectionHeader}>Accessible on external networks</div>
-      <div className={style.interfaces}>
-        {data?.networkInterfaces?.map((nif) => {
-          if (nif.name === 'localhost') {
-            return null;
-          }
-
-          const address = linkToOtherHost(nif.address, currentLocation);
-
-          return (
-            <CopyTag
-              key={nif.name}
-              copyValue={address}
-              onClick={() => openLink(address)}
-              label='Copy IP or navigate to address'
-            >
-              {nif.address} <IoArrowUp className={style.goIcon} />
-            </CopyTag>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-interface ClientLinkProps {
-  current: boolean;
-  to: string;
-}
-
-function ClientLink(props: PropsWithChildren<ClientLinkProps>) {
-  const { current, to, children } = props;
-  const { isElectron } = useElectronEvent();
-
-  const classes = cx([style.link, current && style.current]);
-
-  if (isElectron) {
-    return (
-      <button className={classes} tabIndex={0} onClick={(event) => handleLinks(event, to)}>
-        {children}
-        <IoArrowUp className={style.linkIcon} />
-      </button>
-    );
-  }
-
-  return (
-    <Link to={`/${to}`} className={classes} tabIndex={0}>
-      {children}
-    </Link>
-  );
-}
-
-export default memo(NavigationMenu);

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

@@ -1,33 +1,54 @@
 import { memo } from 'react';
 import { useDisclosure } from '@chakra-ui/react';
+import { useHotkeys } from '@mantine/hooks';
 
-import FloatingNavigation from './FloatingNavigation';
+import FloatingNavigation from './floating-navigation/FloatingNavigation';
+import ViewLockedIcon from './view-locked-icon/ViewLockedIcon';
 import NavigationMenu from './NavigationMenu';
 import useViewEditor from './useViewEditor';
-import ViewLockedIcon from './ViewLockedIcon';
 
 interface ViewNavigationMenuProps {
   isLockable?: boolean;
+  supressSettings?: boolean;
 }
 
-function ViewNavigationMenu(props: ViewNavigationMenuProps) {
-  const { isLockable } = props;
-
+export default memo(ViewNavigationMenu);
+function ViewNavigationMenu({ isLockable, supressSettings }: ViewNavigationMenuProps) {
   const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
   const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
 
   const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
 
+  useHotkeys([
+    [
+      'Space',
+      () => {
+        if (isViewLocked) return;
+        toggleMenu();
+      },
+      { preventDefault: true },
+    ],
+    [
+      'mod + ,',
+      () => {
+        if (isViewLocked || supressSettings) return;
+        showEditFormDrawer();
+      },
+      { preventDefault: true },
+    ],
+  ]);
+
   if (isViewLocked) {
     return <ViewLockedIcon />;
   }
 
   return (
     <>
-      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
+      <FloatingNavigation
+        toggleMenu={toggleMenu}
+        toggleSettings={supressSettings ? undefined : () => showEditFormDrawer()}
+      />
       <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />
     </>
   );
 }
-
-export default memo(ViewNavigationMenu);

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

@@ -0,0 +1,4 @@
+.linkIcon {
+  margin-left: auto;
+  @include rotate-fourty-five;
+}

apps/client/src/common/components/navigation-menu/client-link/ClientLink.tsx

@@ -0,0 +1,34 @@
+import { PropsWithChildren } from 'react';
+import { IoArrowUp } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+
+import { useElectronEvent } from '../../../hooks/useElectronEvent';
+import { handleLinks } from '../../../utils/linkUtils';
+import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
+
+import style from './ClientLink.module.scss';
+
+interface ClientLinkProps {
+  current: boolean;
+  to: string;
+}
+
+export default function ClientLink({ current, to, children }: PropsWithChildren<ClientLinkProps>) {
+  const { isElectron } = useElectronEvent();
+  const navigate = useNavigate();
+
+  if (isElectron) {
+    return (
+      <NavigationMenuItem active={current} onClick={() => handleLinks(to)}>
+        {children}
+        <IoArrowUp className={style.linkIcon} />
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem active={current} onClick={() => navigate(`/${to}`)}>
+      {children}
+    </NavigationMenuItem>
+  );
+}

apps/client/src/common/components/navigation-menu/editor-navigation/EditorNavigation.tsx

@@ -0,0 +1,38 @@
+import { IoLockClosedOutline } from 'react-icons/io5';
+import { useNavigate } from 'react-router-dom';
+
+import { useIsSmallDevice } from '../../../hooks/useIsSmallDevice';
+import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
+
+export default function EditorNavigation() {
+  const navigate = useNavigate();
+  const isSmallDevide = useIsSmallDevice();
+
+  if (!isSmallDevide) {
+    return (
+      <NavigationMenuItem active={location.pathname === '/editor'} onClick={() => navigate('/editor')}>
+        <IoLockClosedOutline />
+        Editor
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <>
+      <NavigationMenuItem active={location.pathname === '/timercontrol'} onClick={() => navigate('/timercontrol')}>
+        <IoLockClosedOutline />
+        Timer Controls
+      </NavigationMenuItem>
+
+      <NavigationMenuItem active={location.pathname === '/messagecontrol'} onClick={() => navigate('/messagecontrol')}>
+        <IoLockClosedOutline />
+        Message Controls
+      </NavigationMenuItem>
+
+      <NavigationMenuItem active={location.pathname === '/rundown'} onClick={() => navigate('/rundown')}>
+        <IoLockClosedOutline />
+        Rundown
+      </NavigationMenuItem>
+    </>
+  );
+}

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

@@ -0,0 +1,23 @@
+.fadeable {
+  opacity: 1;
+
+  transition-property: opacity;
+  transition-duration: 0.3s;
+
+  &.hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  padding: 0.5em;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: $zindex-nav;
+}

apps/client/src/common/components/navigation-menu/floating-navigation/FloatingNavigation.tsx

@@ -0,0 +1,45 @@
+import { IoApps } from 'react-icons/io5';
+import { IoSettingsOutline } from 'react-icons/io5';
+
+import { useFadeOutOnInactivity } from '../../../hooks/useFadeOutOnInactivity';
+import { cx } from '../../../utils/styleUtils';
+import IconButton from '../../buttons/IconButton';
+
+import style from './FloatingNavigation.module.scss';
+
+interface FloatingNavigationProps {
+  toggleMenu: () => void;
+  toggleSettings?: () => void;
+}
+
+export default function FloatingNavigation({ toggleMenu, toggleSettings }: FloatingNavigationProps) {
+  const isButtonShown = useFadeOutOnInactivity(true);
+
+  return (
+    <div
+      id='fadeable-navigation'
+      className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
+    >
+      <IconButton
+        variant='subtle-white'
+        size='xlarge'
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        data-testid='navigation__toggle-menu'
+      >
+        <IoApps />
+      </IconButton>
+      {toggleSettings && (
+        <IconButton
+          variant='subtle-white'
+          size='xlarge'
+          onClick={toggleSettings}
+          aria-label='toggle settings'
+          data-testid='navigation__toggle-settings'
+        >
+          <IoSettingsOutline />
+        </IconButton>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+.link {
+  display: flex;
+  align-items: center;
+
+  padding: 0.75rem 1.5rem;
+  gap: 0.5rem;
+  width: 100%;
+
+  border-left: 4px solid transparent;
+  color: $action-text-color;
+  white-space: nowrap;
+
+  cursor: pointer;
+
+  transition-property: color;
+  transition-duration: $transition-time-action;
+
+  &:hover {
+    color: $ontime-color;
+    background-color: $gray-1350;
+  }
+
+  &:active {
+    background-color: $border-color-ondark;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: $gray-1300;
+    border: 2px solid $ui-white;
+  }
+
+  &.current {
+    background-color: $gray-1300;
+    border-left: 4px solid $action-text-color;
+  }
+}

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuItem.tsx

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+
+import { isKeyEnter } from '../../../utils/keyEvent';
+import { cx } from '../../../utils/styleUtils';
+
+import style from './NavigationMenuItem.module.scss';
+
+interface NavigationMenuItemProps {
+  active?: boolean;
+  className?: string;
+  onClick: () => void;
+}
+
+export default function NavigationMenuItem({
+  active,
+  className,
+  children,
+  onClick,
+}: PropsWithChildren<NavigationMenuItemProps>) {
+  return (
+    <div
+      className={cx([style.link, active && style.current, className])}
+      tabIndex={0}
+      role='button'
+      onClick={onClick}
+      onKeyDown={(event) => {
+        isKeyEnter(event) && onClick();
+      }}
+    >
+      {children}
+    </div>
+  );
+}

apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.module.scss

@@ -0,0 +1,18 @@
+.header {
+  font-size: calc(1rem - 2px);
+  margin-left: 1rem;
+  color: $gray-700;
+}
+
+.interfaces {
+  padding: 0.5rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.goIcon {
+  @include rotate-fourty-five;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
+}

apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.tsx

@@ -0,0 +1,46 @@
+import { IoArrowUp } from 'react-icons/io5';
+
+import useInfo from '../../../hooks-query/useInfo';
+import { linkToOtherHost, openLink } from '../../../utils/linkUtils';
+import CopyTag from '../../copy-tag/CopyTag';
+
+import style from './OtherAddresses.module.scss';
+
+interface OtherAddressesProps {
+  currentLocation: string;
+}
+
+export default function OtherAddresses({ currentLocation }: OtherAddressesProps) {
+  const { data } = useInfo();
+
+  // there is no point showing this if we only have one interface
+  if (data.networkInterfaces.length < 2) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={style.header}>Accessible on external networks</div>
+      <div className={style.interfaces}>
+        {data?.networkInterfaces?.map((nif) => {
+          if (nif.name === 'localhost') {
+            return null;
+          }
+
+          const address = linkToOtherHost(nif.address, currentLocation);
+
+          return (
+            <CopyTag
+              key={nif.name}
+              copyValue={address}
+              onClick={() => openLink(address)}
+              label='Copy IP or navigate to address'
+            >
+              {nif.address} <IoArrowUp className={style.goIcon} />
+            </CopyTag>
+          );
+        })}
+      </div>
+    </>
+  );
+}

apps/client/src/common/components/navigation-menu/view-locked-icon/ViewLockedIcon.module.scss

@@ -0,0 +1,22 @@
+.fadeable {
+  opacity: 1;
+
+  transition-property: opacity;
+  transition-duration: 0.3s;
+
+  &.hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.lockIcon {
+  font-size: 1.5rem;
+  color: $active-indicator;
+  padding: 0.5em;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: $zindex-nav;
+}

apps/client/src/common/components/navigation-menu/view-locked-icon/ViewLockedIcon.tsx

@@ -1,9 +1,9 @@
 import { IoLockClosedOutline } from 'react-icons/io5';
 
-import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
-import { cx } from '../../utils/styleUtils';
+import { useFadeOutOnInactivity } from '../../../hooks/useFadeOutOnInactivity';
+import { cx } from '../../../utils/styleUtils';
 
-import style from './NavigationMenu.module.scss';
+import style from './ViewLockedIcon.module.scss';
 
 export default function ViewLockedIcon() {
   const isLockIconShown = useFadeOutOnInactivity();

apps/client/src/common/components/select/Select.module.scss

@@ -0,0 +1,128 @@
+.select {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  height: 2rem;
+
+  background-color: $gray-1200;
+  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  border-radius: $component-border-radius-md;
+  border: 1px solid transparent;
+
+  padding-inline: 0.5rem;
+  font-size: calc(1rem - 2px);
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    background-color: $gray-1100;
+  }
+
+  &:active {
+    background-color: $gray-1000;
+  }
+
+  &[data-popup-open] {
+    background-color: $gray-1000;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.selectIcon {
+  color: $gray-200;
+}
+
+.popup {
+  font-size: calc(1rem - 2px);
+  background-color: $gray-1200;
+  box-sizing: border-box;
+  padding: 2px;
+  border-radius: $component-border-radius-md;
+  color: $ui-white;
+  overflow-y: auto;
+  max-height: 20rem;
+  border: 1px solid $gray-1000;
+
+  &[data-side='start'] {
+    transition: 50%;
+    transform: 100%;
+    opacity: 1;
+  }
+}
+
+.item {
+  box-sizing: border-box;
+  outline: 0;
+  line-height: 1rem;
+  padding: 0.25rem 0.5rem;
+
+  min-width: var(--anchor-width);
+  display: grid;
+  gap: 0.25rem;
+  align-items: center;
+  grid-template-columns: 0.75rem 1fr;
+  scroll-margin-block: 1rem;
+
+  &[data-highlighted] {
+    z-index: 0;
+    position: relative;
+    background-color: $blue-700;
+  }
+}
+
+.itemIndicator {
+  grid-column-start: 1;
+}
+
+.itemIndicatorIcon {
+  display: block;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.itemLabel {
+  grid-column-start: 2;
+}
+
+.scrollArrow {
+  background-color: $gray-1000;
+  color: $ui-white;
+
+  width: 100%;
+  z-index: 1;
+  height: 1rem;
+  font-size: 0.5rem;
+  display: grid;
+  place-content: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+  }
+
+  &[data-direction='up'] {
+    border-radius: 3px 3px 0 0;
+    &::before {
+      top: -100%;
+    }
+  }
+
+  &[data-direction='down'] {
+    bottom: 0;
+    border-radius: 0 0 3px 3px;
+
+    &::before {
+      bottom: -100%;
+    }
+  }
+}

apps/client/src/common/components/select/Select.tsx

@@ -0,0 +1,54 @@
+import { IoCheckmark } from 'react-icons/io5';
+import { LuChevronsUpDown } from 'react-icons/lu';
+import { Select as BaseSelect } from '@base-ui-components/react/select';
+
+import styles from './Select.module.scss';
+
+interface SelectProps<T extends string | null = string> {
+  defaultValue?: T;
+  options: {
+    value: NonNullable<T>;
+    label: string;
+    disabled?: boolean; // exposed to allow creating a non-selectable option
+  }[];
+  placeholder?: string;
+  value?: T;
+  onChange?: (value: NonNullable<T>) => void;
+}
+
+export default function Select<T extends string | null = string>({
+  defaultValue,
+  options,
+  placeholder,
+  value,
+  onChange,
+}: SelectProps<T>) {
+  return (
+    <BaseSelect.Root defaultValue={defaultValue} onValueChange={onChange} value={value}>
+      <BaseSelect.Trigger className={styles.select}>
+        <BaseSelect.Value placeholder={placeholder} />
+        <BaseSelect.Icon className={styles.selectIcon}>
+          <LuChevronsUpDown />
+        </BaseSelect.Icon>
+      </BaseSelect.Trigger>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner side='bottom' align='start'>
+          <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
+          <BaseSelect.Popup className={styles.popup}>
+            {options.map((option) => {
+              return (
+                <BaseSelect.Item key={option.value} className={styles.item} value={option.value}>
+                  <BaseSelect.ItemIndicator className={styles.itemIndicator}>
+                    <IoCheckmark className={styles.itemIndicatorIcon} />
+                  </BaseSelect.ItemIndicator>
+                  <BaseSelect.ItemText className={styles.itemLabel}>{option.label}</BaseSelect.ItemText>
+                </BaseSelect.Item>
+              );
+            })}
+          </BaseSelect.Popup>
+          <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  );
+}

apps/client/src/common/components/switch/Switch.module.scss

@@ -0,0 +1,52 @@
+.switch {
+  position: relative;
+  display: flex;
+  align-items: center;
+  
+  /* Reset and base styles */
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 99px;
+  background-color: $gray-1100;
+  
+  /* Transitions */
+  transition: background-color 125ms cubic-bezier(0.26, 0.75, 0.38, 0.45);
+
+  /* States */
+  &[data-checked] {
+    background-color: $blue-700;
+    box-shadow: none;
+  }
+
+  &:focus {
+    border-color: $blue-500;
+  }
+}
+
+.medium {
+  padding: 2px;
+  --width: calc(2.5rem + 4px);
+  --height: 1.5rem;
+  width: var(--width);
+  height: var(--height);
+}
+
+.large {
+  padding: 3px;
+  --width: calc(2.75rem + 6px);
+  --height: 1.75rem;
+  width: var(--width);
+  height: var(--height);
+}
+
+.thumb {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  border-radius: 99px;
+  background-color: $ui-white;
+  transition: translate 150ms ease;
+
+  &[data-checked] {
+    translate: calc(var(--width) - var(--height)) 0;
+  }
+}

apps/client/src/common/components/switch/Switch.tsx

@@ -0,0 +1,17 @@
+import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './Switch.module.scss';
+
+interface SwitchProps extends BaseSwitch.Root.Props {
+  size?: 'medium' | 'large';
+}
+
+export default function Switch({ size = 'medium', ...switchProps }: SwitchProps) {
+  return (
+    <BaseSwitch.Root className={cx([style.switch, style[size]])} {...switchProps}>
+      <BaseSwitch.Thumb className={style.thumb} />
+    </BaseSwitch.Root>
+  );
+}

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

@@ -18,19 +18,21 @@ import {
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 
 import InlineColourPicker from './InlineColourPicker';
-import { ParamField } from './types';
+import { ParamField } from './viewParams.types';
 
-interface EditFormInputProps {
+interface ParamInputProps {
   paramField: ParamField;
 }
 
-export default function ParamInput(props: EditFormInputProps) {
-  const { paramField } = props;
+export default function ParamInput({ paramField }: ParamInputProps) {
   const [searchParams] = useSearchParams();
   const { id, type, defaultValue } = paramField;
 
   if (type === 'persist') {
-    return null;
+    if (!paramField.values || !paramField.values.length) {
+      return null;
+    }
+    return <input hidden name={id} readOnly value={paramField.values.join(',')} />;
   }
 
   if (type === 'option') {

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

@@ -8,12 +8,82 @@
   }
 }
 
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: $zindex-backdrop;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.drawer {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: $zindex-dialog;
+
+  width: 40rem;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1.5rem;
+
+  background-color: $gray-1250;
+  color: $ui-white;
+  border-left: 1px solid $gray-1200;
+
+  &[data-open] {
+    transform: translateX(0%);
+    transition: transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateX(100%);
+    transition: transform 500ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  }
+
+  // take the whole screen in mobile devices
+  @media (max-width: $min-tablet) {
+    width: 100vw;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 3.5rem;
+
+  font-weight: 600;
+  font-size: 1.25rem;
+}
+
+.body {
+  flex: 1;
+  padding-bottom: 10vh;
+  overflow-y: auto;
+}
+
+.footer {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .sectionList {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
   gap: 2rem;
-  overflow-y: scroll;
   padding-right: 0.5rem;
 }
 

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

@@ -1,117 +1,51 @@
-import { FormEvent, useEffect } from 'react';
+import { FormEvent, memo, useEffect } from 'react';
+import { IoClose } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
-import {
-  Button,
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerOverlay,
-  useDisclosure,
-} from '@chakra-ui/react';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { useDisclosure } from '@mantine/hooks';
 
 import useViewSettings from '../../hooks-query/useViewSettings';
+import Button from '../buttons/Button';
+import IconButton from '../buttons/IconButton';
 import Info from '../info/Info';
 
-import { ViewOption } from './types';
+import { ViewOption } from './viewParams.types';
+import { getURLSearchParamsFromObj } from './viewParams.utils';
 import ViewParamsSection from './ViewParamsSection';
 
 import style from './ViewParamsEditor.module.scss';
 
-type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
-
-/**
- * Utility remove the # character from a hex string
- */
-function sanitiseColour(colour: string) {
-  if (colour.startsWith('#')) {
-    return colour.substring(1);
-  }
-  return colour;
-}
-
-/**
- * Makes a new URLSearchParams object from the given params object
- */
-const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOption[]) => {
-  const newSearchParams = new URLSearchParams();
-
-  // Convert paramFields to an object that contains default values
-  const defaultValues: Record<string, string> = {};
-  paramFields.forEach((section) => {
-    section.options.forEach((option) => {
-      defaultValues[option.id] = String(option.defaultValue);
-
-      // extract persisted values
-      if ('type' in option && option.type === 'persist') {
-        newSearchParams.set(option.id, option.value);
-      }
-    });
-  });
-
-  // compare which values are different from the default values
-  Object.entries(paramsObj).forEach(([id, value]) => {
-    if (typeof value === 'string' && value.length) {
-      // we dont know which values contain colours
-      // unfortunately this means we run all the strings through the sanitation
-      const valueWithoutHash = sanitiseColour(value);
-      if (defaultValues[id] !== valueWithoutHash) {
-        handleValueString(id, valueWithoutHash);
-      }
-    }
-  });
-
-  /** Utility function contains logic to add a value into the searchParams object */
-  function handleValueString(id: string, value: string) {
-    const maybeMultipleValues = value.split(',');
-
-    // we need to check if the value contains comma separated list, for the case of the multi-select data
-    if (Array.isArray(maybeMultipleValues) && maybeMultipleValues.length > 1) {
-      const added = new Set();
-      maybeMultipleValues.forEach((v) => {
-        if (!added.has(v)) {
-          added.add(v);
-          newSearchParams.append(id, v);
-        }
-      });
-    } else {
-      newSearchParams.set(id, value);
-    }
-  }
-  return newSearchParams;
-};
-
 interface EditFormDrawerProps {
   viewOptions: ViewOption[];
 }
 
-// TODO: this is a good candidate for memoisation, but needs the paramFields to be stable
-export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
+export default memo(ViewParamsEditor);
+
+function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
 
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const [isOpen, handlers] = useDisclosure(false);
 
+  // handle opening the drawer
   useEffect(() => {
     const isEditing = searchParams.get('edit');
 
     if (isEditing === 'true') {
-      return onOpen();
+      return handlers.open();
     }
-  }, [searchParams, onOpen]);
+  }, [searchParams, handlers]);
 
   const handleClose = () => {
     searchParams.delete('edit');
     setSearchParams(searchParams);
 
-    onClose();
+    handlers.close();
   };
 
   const resetParams = () => {
     setSearchParams();
-    onClose();
+    handlers.close();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -123,39 +57,48 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   };
 
   return (
-    <Drawer isOpen={isOpen} placement='right' onClose={handleClose} variant='ontime' size='lg'>
-      <DrawerOverlay />
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerCloseButton size='lg' />
-          Customise
-        </DrawerHeader>
-
-        <DrawerBody>
-          {viewSettings.overrideStyles && (
-            <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
-          )}
-          <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
-            {viewOptions.map((section) => (
-              <ViewParamsSection
-                key={section.title}
-                title={section.title}
-                collapsible={section.collapsible}
-                options={section.options}
-              />
-            ))}
-          </form>
-        </DrawerBody>
-
-        <DrawerFooter className={style.drawerFooter}>
-          <Button variant='ontime-ghosted' onClick={resetParams} type='reset'>
-            Reset to default
-          </Button>
-          <Button variant='ontime-filled' form='edit-params-form' type='submit'>
-            Save
-          </Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
+    <Dialog.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          handleClose();
+        }
+      }}
+    >
+      <Dialog.Portal>
+        <Dialog.Backdrop className={style.backdrop} />
+        <Dialog.Popup className={style.drawer}>
+          <div className={style.header}>
+            <Dialog.Title>Customise</Dialog.Title>
+            <IconButton variant='subtle-white' size='large' onClick={handleClose}>
+              <IoClose />
+            </IconButton>
+          </div>
+          <div className={style.body}>
+            {viewSettings.overrideStyles && (
+              <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
+            )}
+            <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
+              {viewOptions.map((section) => (
+                <ViewParamsSection
+                  key={section.title}
+                  title={section.title}
+                  collapsible={section.collapsible}
+                  options={section.options}
+                />
+              ))}
+            </form>
+          </div>
+          <div className={style.footer}>
+            <Button variant='subtle' size='large' onClick={resetParams} type='reset'>
+              Reset to default
+            </Button>
+            <Button variant='primary' size='large' form='edit-params-form' type='submit'>
+              Save
+            </Button>
+          </div>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }

apps/client/src/common/components/view-params-editor/ViewParamsSection.module.scss

@@ -11,10 +11,6 @@
 
   &.collapsible {
     cursor: pointer;
-
-    &:hover {
-      border-bottom: 1px solid $white-10;
-    }
   }
 }
 

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

@@ -3,8 +3,9 @@ import { useLocalStorage } from '@mantine/hooks';
 
 import { cx } from '../../utils/styleUtils';
 
+import { OptionTitle } from './constants';
 import ParamInput from './ParamInput';
-import { type ParamField } from './types';
+import { type ParamField } from './viewParams.types';
 
 import style from './ViewParamsSection.module.scss';
 
@@ -14,9 +15,7 @@ interface ViewParamsSectionProps {
   options: ParamField[];
 }
 
-export default function ViewParamsSection(props: ViewParamsSectionProps) {
-  const { title, collapsible, options } = props;
-
+export default function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
   const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
 
   const handleCollapse = () => {
@@ -27,28 +26,52 @@ export default function ViewParamsSection(props: ViewParamsSectionProps) {
 
   return (
     <section className={style.section}>
-      <div className={cx([style.sectionHeader, collapsible && style.collapsible])} onClick={handleCollapse}>
-        {title}
-        {collapsible && <IoChevronDown className={cx([collapsed ? style.closed : style.open])} />}
-      </div>
-
-      {!collapsed && (
+      {title === OptionTitle.Hidden ? (
+        <HiddenContents options={options} />
+      ) : (
         <>
-          {options.map((option) => {
-            if (option.type === 'persist') {
-              return null;
-            }
-
-            return (
-              <label key={option.title} className={style.label}>
-                <span className={style.title}>{option.title}</span>
-                <span className={style.description}>{option.description}</span>
-                <ParamInput paramField={option} />
-              </label>
-            );
-          })}
+          <div className={cx([style.sectionHeader, collapsible && style.collapsible])} onClick={handleCollapse}>
+            {title}
+            {collapsible && <IoChevronDown className={cx([collapsed ? style.closed : style.open])} />}
+          </div>
+          <SectionContents options={options} collapsed={collapsed} />
         </>
       )}
     </section>
   );
 }
+
+interface SectionContentsProps {
+  options: ParamField[];
+  collapsed: boolean;
+}
+
+function SectionContents({ options, collapsed }: SectionContentsProps) {
+  if (collapsed) {
+    return null;
+  }
+
+  return (
+    <>
+      {options.map((option) => {
+        return (
+          <label key={option.title} className={style.label}>
+            <span className={style.title}>{option.title}</span>
+            <span className={style.description}>{option.description}</span>
+            <ParamInput paramField={option} />
+          </label>
+        );
+      })}
+    </>
+  );
+}
+
+function HiddenContents({ options }: { options: ParamField[] }) {
+  return (
+    <>
+      {options.map((option, index) => {
+        return <ParamInput key={option.title + index} paramField={option} />;
+      })}
+    </>
+  );
+}

apps/client/src/common/components/view-params-editor/__tests__/constants.test.ts

@@ -1,45 +0,0 @@
-import { CustomFields } from 'ontime-types';
-
-import { makeOptionsFromCustomFields } from '../constants';
-
-describe('makeOptionsFromCustomFields', () => {
-  const testCustomFields: CustomFields = {
-    field1: { label: 'Field 1', colour: 'red', type: 'string' },
-    field2: { label: 'Field 2', colour: 'blue', type: 'string' },
-  };
-
-  it('creates a record of keys for the given custom fields', () => {
-    const result = makeOptionsFromCustomFields(testCustomFields);
-    expect(result).toStrictEqual({
-      'custom-field1': 'Custom: Field 1',
-      'custom-field2': 'Custom: Field 2',
-    });
-  });
-
-  it('appends additional data', () => {
-    const additionalData = {
-      test1: 'test1',
-      test2: 'test2',
-    };
-    const result = makeOptionsFromCustomFields(testCustomFields, additionalData);
-    expect(result).toStrictEqual({
-      'custom-field1': 'Custom: Field 1',
-      'custom-field2': 'Custom: Field 2',
-      test1: 'test1',
-      test2: 'test2',
-    });
-  });
-
-  it('filtersImageTypes', () => {
-    const customFieldsWIthImage: CustomFields = {
-      ...testCustomFields,
-      field3: { label: 'Field 3', colour: 'green', type: 'image' },
-    };
-
-    const result = makeOptionsFromCustomFields(customFieldsWIthImage);
-    expect(result).toStrictEqual({
-      'custom-field1': 'Custom: Field 1',
-      'custom-field2': 'Custom: Field 2',
-    });
-  });
-});

apps/client/src/common/components/view-params-editor/__tests__/viewParams.utils.test.ts

@@ -0,0 +1,204 @@
+import { CustomFields } from 'ontime-types';
+import { describe, expect, it } from 'vitest';
+
+import { OptionTitle } from '../constants';
+import type { ViewOption } from '../viewParams.types';
+import { getURLSearchParamsFromObj, makeOptionsFromCustomFields } from '../viewParams.utils';
+
+describe('makeOptionsFromCustomFields', () => {
+  const testCustomFields: CustomFields = {
+    field1: { label: 'Field 1', colour: 'red', type: 'string' },
+    field2: { label: 'Field 2', colour: 'blue', type: 'string' },
+  };
+
+  it('creates a record of keys for the given custom fields', () => {
+    const result = makeOptionsFromCustomFields(testCustomFields);
+    expect(result).toStrictEqual({
+      'custom-field1': 'Custom: Field 1',
+      'custom-field2': 'Custom: Field 2',
+    });
+  });
+
+  it('appends additional data', () => {
+    const additionalData = {
+      test1: 'test1',
+      test2: 'test2',
+    };
+    const result = makeOptionsFromCustomFields(testCustomFields, additionalData);
+    expect(result).toStrictEqual({
+      'custom-field1': 'Custom: Field 1',
+      'custom-field2': 'Custom: Field 2',
+      test1: 'test1',
+      test2: 'test2',
+    });
+  });
+
+  it('filtersImageTypes', () => {
+    const customFieldsWIthImage: CustomFields = {
+      ...testCustomFields,
+      field3: { label: 'Field 3', colour: 'green', type: 'image' },
+    };
+
+    const result = makeOptionsFromCustomFields(customFieldsWIthImage);
+    expect(result).toStrictEqual({
+      'custom-field1': 'Custom: Field 1',
+      'custom-field2': 'Custom: Field 2',
+    });
+  });
+});
+
+describe('getURLSearchParamsFromObj', () => {
+  // Mock view options for testing
+  const mockViewOptions: ViewOption[] = [
+    {
+      title: OptionTitle.DataSources,
+      collapsible: true,
+      options: [
+        {
+          id: 'color',
+          title: 'Color',
+          description: 'The color value',
+          type: 'colour',
+          defaultValue: 'ff0000',
+        },
+        {
+          id: 'persist-field',
+          title: 'Persistent Field',
+          description: 'A field that persists',
+          type: 'persist',
+          values: ['persisted-value'],
+        },
+        {
+          id: 'multi-select',
+          title: 'Multi Select',
+          description: 'A multi-select field',
+          type: 'option',
+          values: { value1: 'Value 1', value2: 'Value 2' },
+          defaultValue: '',
+        },
+      ],
+    },
+  ];
+
+  it('should handle empty params object', () => {
+    const params = {};
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    // Should only include persisted values
+    expect(result.get('persist-field')).toBe('persisted-value');
+    expect(result.get('color')).toBeNull();
+  });
+
+  it('should not include values that match defaults', () => {
+    const params = {
+      color: 'ff0000', // same as the default
+      'other-param': 'value',
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    expect(result.get('color')).toBeNull();
+    expect(result.get('other-param')).toBe('value');
+  });
+
+  it('should sanitize color values with #', () => {
+    const params = {
+      color: '#00ff00', // different from default and includes #
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    expect(result.get('color')).toBe('00ff00');
+  });
+
+  it('should handle multi-select values', () => {
+    const params = {
+      'multi-select': 'value1,value2,value3',
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    // Should have multiple entries for the same key
+    const values = result.getAll('multi-select');
+    expect(values).toEqual(['value1', 'value2', 'value3']);
+  });
+
+  it('should not include empty string values', () => {
+    const params = {
+      'empty-param': '',
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+    expect(result.get('empty-param')).toBeNull();
+  });
+
+  it('should allow multiple values for persisted fields', () => {
+    const mockOptionsWithMultiPersist: ViewOption[] = [
+      {
+        title: OptionTitle.DataSources,
+        collapsible: true,
+        options: [
+          {
+            id: 'sub',
+            title: 'Event subscription',
+            description: 'The events to follow',
+            values: [],
+            type: 'persist',
+          },
+        ],
+      },
+    ];
+
+    const params = {
+      sub: 'value1,value2,value3',
+    };
+    const result = getURLSearchParamsFromObj(params, mockOptionsWithMultiPersist);
+    const values = result.getAll('sub');
+
+    expect(values).toStrictEqual(['value1', 'value2', 'value3']);
+  });
+
+  it('should allow adding multiple values for any field', () => {
+    const params = {
+      'regular-field': 'value1,value2,value3',
+    };
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    const values = result.getAll('regular-field');
+    expect(values).toHaveLength(3);
+    expect(values).toEqual(['value1', 'value2', 'value3']);
+  });
+
+  it('should deduplicate repeated key-value pairs', () => {
+    const params = {
+      multiValue: 'value1,value1,value2,value2,value3',
+      repeatedField: 'same,same,same',
+    };
+
+    const result = getURLSearchParamsFromObj(params, mockViewOptions);
+
+    // Check multiValue field has unique values
+    expect(result.getAll('multiValue')).toEqual(['value1', 'value2', 'value3']);
+
+    // Check repeatedField has only one instance of the value
+    expect(result.getAll('repeatedField')).toEqual(['same']);
+  });
+
+  it('should deduplicate persisted values while maintaining order', () => {
+    const mockOptionsWithDuplicates: ViewOption[] = [
+      {
+        title: OptionTitle.StyleOverride,
+        options: [
+          {
+            id: 'sub',
+            title: 'Subscription',
+            description: 'Persisted subscription values',
+            type: 'persist',
+            values: ['value1', 'value1', 'value2', 'value2', 'value3', 'value1'],
+          },
+        ],
+      },
+    ];
+
+    const result = getURLSearchParamsFromObj({}, mockOptionsWithDuplicates);
+
+    // Should only include unique values while maintaining order
+    expect(result.getAll('sub')).toEqual(['value1', 'value2', 'value3']);
+  });
+});

apps/client/src/common/components/view-params-editor/common.options.ts

@@ -0,0 +1,28 @@
+import type { ParamField } from './viewParams.types';
+
+export const getTimeOption = (timeFormat: string): ParamField => {
+  const placeholder = `${timeFormat} (default)`;
+  return {
+    id: 'timeformat',
+    title: 'Time format string, taken from the Application Settings',
+    description: 'Format for auxiliar time fields (not the running), eg. HH:mm:ss or hh:mm:ss a, see docs for help',
+    type: 'string',
+    placeholder,
+  };
+};
+
+export const hideTimerSeconds: ParamField = {
+  id: 'hideTimerSeconds',
+  title: 'Hide seconds in timer',
+  description: 'Whether to hide seconds in the running timer',
+  type: 'boolean',
+  defaultValue: false,
+};
+
+export const showLeadingZeros: ParamField = {
+  id: 'showLeadingZeros',
+  title: 'Show leading zeros in timer',
+  description: 'Whether to show leading zeros in the running timer',
+  type: 'boolean',
+  defaultValue: false,
+};

apps/client/src/common/components/view-params-editor/constants.ts

@@ -1,61 +1,6 @@
-import { CustomFields } from 'ontime-types';
-
-import type { MultiselectOptions, ParamField } from './types';
-
-export const makeOptionsFromCustomFields = (
-  customFields: CustomFields,
-  additionalOptions: Readonly<Record<string, string>> = {},
-  filterImageType = true,
-) => {
-  const options = { ...additionalOptions };
-  for (const [key, value] of Object.entries(customFields)) {
-    if (filterImageType && value.type === 'image') {
-      continue;
-    }
-
-    options[`custom-${key}`] = `Custom: ${value.label}`;
-  }
-  return options;
-};
-
-export function makeCustomFieldSelectOptions(customFields: CustomFields, filterImageType = true): MultiselectOptions {
-  const options: MultiselectOptions = {};
-  for (const [key, value] of Object.entries(customFields)) {
-    if (filterImageType && value.type === 'image') {
-      continue;
-    }
-    options[key] = { value: key, label: value.label, colour: value.colour };
-  }
-  return options;
-}
-
-export const getTimeOption = (timeFormat: string): ParamField => {
-  const placeholder = `${timeFormat} (default)`;
-  return {
-    id: 'timeformat',
-    title: 'Time format string, taken from the Application Settings',
-    description: 'Format for auxiliar time fields (not the running), eg. HH:mm:ss or hh:mm:ss a, see docs for help',
-    type: 'string',
-    placeholder,
-  };
-};
-
-export const hideTimerSeconds: ParamField = {
-  id: 'hideTimerSeconds',
-  title: 'Hide seconds in timer',
-  description: 'Whether to hide seconds in the running timer',
-  type: 'boolean',
-  defaultValue: false,
-};
-
-export const showLeadingZeros: ParamField = {
-  id: 'showLeadingZeros',
-  title: 'Show leading zeros in timer',
-  description: 'Whether to show leading zeros in the running timer',
-  type: 'boolean',
-  defaultValue: false,
-};
-
+/**
+ * Gathers possible titles for view options
+ */
 export enum OptionTitle {
   ClockOptions = 'Clock Options',
   TimerOptions = 'Timer Options',
@@ -65,4 +10,7 @@ export enum OptionTitle {
   StyleOverride = 'View style override',
   Animation = 'View animation',
   Schedule = 'Schedule options',
+
+  /** rendered as hidden inputs */
+  Hidden = 'Hidden options',
 }

apps/client/src/common/components/view-params-editor/viewParams.types.ts

@@ -24,7 +24,7 @@ type StringField = { type: 'string'; defaultValue?: string; prefix?: string; pla
 type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
 type BooleanField = { type: 'boolean'; defaultValue: boolean };
 type ColourField = { type: 'colour'; defaultValue: string; placeholder?: string };
-type PersistedField = { type: 'persist'; defaultValue?: string; value: string };
+type PersistedField = { type: 'persist'; defaultValue?: string[]; values: string[] };
 
 export type ParamField = BaseField &
   (OptionsField | MultiOptionsField | StringField | NumberField | BooleanField | ColourField | PersistedField);

apps/client/src/common/components/view-params-editor/viewParams.utils.ts

@@ -0,0 +1,144 @@
+import type { CustomFields } from 'ontime-types';
+
+import type { MultiselectOptions, ViewOption } from './viewParams.types';
+
+/**
+ * Creates a list of custom fields for a select
+ * Filters out image type custom fields
+ */
+export function makeOptionsFromCustomFields(
+  customFields: CustomFields,
+  additionalOptions: Readonly<Record<string, string>> = {},
+  filterImageType = true,
+): Record<string, string> {
+  const options = { ...additionalOptions };
+  for (const [key, value] of Object.entries(customFields)) {
+    if (filterImageType && value.type === 'image') {
+      continue;
+    }
+
+    options[`custom-${key}`] = `Custom: ${value.label}`;
+  }
+  return options;
+}
+
+/**
+ * Creates data for a multiselect component from custom fields
+ * Filters out image type custom fields
+ */
+export function makeCustomFieldSelectOptions(customFields: CustomFields, filterImageType = true): MultiselectOptions {
+  const options: MultiselectOptions = {};
+  for (const [key, value] of Object.entries(customFields)) {
+    if (filterImageType && value.type === 'image') {
+      continue;
+    }
+    options[key] = { value: key, label: value.label, colour: value.colour };
+  }
+  return options;
+}
+
+type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
+
+/**
+ * Utility remove the # character from a hex string
+ */
+function sanitiseColour(colour: string) {
+  if (colour.startsWith('#')) {
+    return colour.substring(1);
+  }
+  return colour;
+}
+
+type FieldMetadata = {
+  defaultValues: Record<string, string>;
+  colorFields: Set<string>;
+  isPersistedField: Set<string>;
+  persistedValues: Record<string, string[]>;
+};
+
+/**
+ * Utility collects metadata about fields from view options
+ */
+function collectFieldMetadata(paramFields: ViewOption[]): FieldMetadata {
+  const metadata: FieldMetadata = {
+    defaultValues: {},
+    colorFields: new Set(),
+    isPersistedField: new Set(),
+    persistedValues: {},
+  };
+
+  paramFields.forEach((section) => {
+    section.options.forEach((option) => {
+      if (option.type === 'persist') {
+        metadata.isPersistedField.add(option.id);
+        if (option.values) {
+          metadata.persistedValues[option.id] = option.values;
+        }
+      } else {
+        metadata.defaultValues[option.id] = String(option.defaultValue);
+      }
+
+      if (option.type === 'colour') {
+        metadata.colorFields.add(option.id);
+      }
+    });
+  });
+
+  return metadata;
+}
+
+/**
+ * Makes a new URLSearchParams object from the given params object
+ * @param paramsObj - The object containing parameters to be converted
+ * @param paramFields - The view options that define the parameters
+ * @returns A new URLSearchParams object with the parameters
+ */
+export function getURLSearchParamsFromObj(paramsObj: ViewParamsObj, paramFields: ViewOption[]) {
+  const newSearchParams = new URLSearchParams();
+  const addedPairs = new Set<string>();
+  const metadata = collectFieldMetadata(paramFields);
+
+  // Utility function to safely add params without duplicates
+  const addUniqueParam = (id: string, value: string) => {
+    const pair = `${id}:${value}`;
+    if (!addedPairs.has(pair)) {
+      addedPairs.add(pair);
+      newSearchParams.append(id, value);
+    }
+  };
+
+  // First add all persisted values
+  Object.entries(metadata.persistedValues).forEach(([id, values]) => {
+    values.forEach((value) => {
+      if (value) {
+        addUniqueParam(id, value);
+      }
+    });
+  });
+
+  // Then process user-provided values
+  Object.entries(paramsObj).forEach(([id, value]) => {
+    if (typeof value === 'string' && value.length) {
+      // For persisted fields, clear existing values before adding new ones
+      if (metadata.isPersistedField.has(id)) {
+        // Clear tracking of previous values for this field
+        Array.from(addedPairs).forEach((pair) => {
+          if (pair.startsWith(`${id}:`)) {
+            addedPairs.delete(pair);
+          }
+        });
+        newSearchParams.delete(id);
+      }
+
+      // Process and add new values
+      value.split(',').forEach((v) => {
+        const processedValue = metadata.colorFields.has(id) ? sanitiseColour(v) : v;
+        if (metadata.isPersistedField.has(id) || metadata.defaultValues[id] !== processedValue) {
+          addUniqueParam(id, processedValue);
+        }
+      });
+    }
+  });
+
+  return newSearchParams;
+}

apps/client/src/common/hooks-query/useRundown.ts

@@ -49,11 +49,11 @@ export function useFlatRundown() {
   // update data whenever the revision changes
   useEffect(() => {
     if (data.revision !== -1 && data.revision !== prevRevision) {
-      const flatRundown = data.order.map((id) => data.entries[id]);
+      const flatRundown = data.flatOrder.map((id) => data.entries[id]);
       setFlatRundown(flatRundown);
       setPrevRevision(data.revision);
     }
-  }, [data.entries, data.order, data.revision, prevRevision]);
+  }, [data.entries, data.flatOrder, data.revision, prevRevision]);
 
   // TODO: should we have a project id field?
   // invalidate current version if project changes

apps/client/src/common/hooks-query/useViewSettings.ts

@@ -1,20 +1,28 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { MILLIS_PER_HOUR } from 'ontime-utils';
 
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { getViewSettings, postViewSettings } from '../../common/api/viewSettings';
+import { ontimeQueryClient } from '../../common/queryClient';
 import { VIEW_SETTINGS } from '../api/constants';
-import { getView } from '../api/viewSettings';
 import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';
 
 export default function useViewSettings() {
-  const { data, status, isFetching, isError, refetch } = useQuery({
+  const { data, isPending } = useQuery({
     queryKey: VIEW_SETTINGS,
-    queryFn: getView,
+    queryFn: getViewSettings,
     placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
-    refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
+    staleTime: MILLIS_PER_HOUR,
   });
 
-  return { data: data ?? viewsSettingsPlaceholder, status, isError, refetch, isFetching };
+  const { mutateAsync } = useMutation({
+    mutationFn: postViewSettings,
+    onMutate: () => {
+      ontimeQueryClient.cancelQueries({ queryKey: VIEW_SETTINGS });
+    },
+    onSuccess: (data) => {
+      ontimeQueryClient.setQueryData(VIEW_SETTINGS, data);
+    },
+  });
+
+  return { data: data ?? viewsSettingsPlaceholder, mutateAsync, isPending };
 }

apps/client/src/common/hooks/useClientPath.ts

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { MessageTag } from 'ontime-types';
 import { useShallow } from 'zustand/shallow';
 
 import { useClientStore } from '../stores/clientStore';
-import { socketSendJson } from '../utils/socket';
+import { sendSocket } from '../utils/socket';
 
 import { useIsOnline } from './useSocket';
 
@@ -22,7 +23,7 @@ export const useClientPath = () => {
   useEffect(() => {
     if (!isOnline) return;
 
-    socketSendJson('set-client-path', pathname + search);
+    sendSocket(MessageTag.ClientSetPath, pathname + search);
   }, [pathname, search, isOnline]);
 
   // navigate to new path when received from server

apps/client/src/common/hooks/useEntryAction.ts

@@ -36,11 +36,10 @@ import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
 
 export type EventOptions = Partial<{
-  // options to any new block (event / delay / block)
+  // options of any new entries (event / delay / block)
   after: MaybeString;
   before: MaybeString;
-  // options to blocks of type OntimeEvent
-  defaultPublic: boolean;
+  // options of entries of type OntimeEvent
   linkPrevious: boolean;
   lastEventId: MaybeString;
 }>;
@@ -51,7 +50,6 @@ export type EventOptions = Partial<{
 export const useEntryActions = () => {
   const queryClient = useQueryClient();
   const {
-    defaultPublic,
     linkPrevious,
     defaultTimeStrategy,
     defaultDuration,
@@ -95,7 +93,6 @@ export const useEntryActions = () => {
         const applicationOptions = {
           after: options?.after,
           before: options?.before,
-          defaultPublic: options?.defaultPublic ?? defaultPublic,
           lastEventId: options?.lastEventId,
           linkPrevious: options?.linkPrevious ?? linkPrevious,
         };
@@ -111,7 +108,6 @@ export const useEntryActions = () => {
 
         // Override event with options from editor settings
         newEntry.linkStart = applicationOptions.linkPrevious;
-        newEntry.isPublic = applicationOptions.defaultPublic;
 
         if (newEntry.duration === undefined && newEntry.timeEnd === undefined) {
           newEntry.duration = parseUserTime(defaultDuration);
@@ -157,7 +153,6 @@ export const useEntryActions = () => {
       defaultDangerTime,
       defaultDuration,
       defaultEndAction,
-      defaultPublic,
       defaultTimerType,
       defaultTimeStrategy,
       defaultWarnTime,
@@ -795,7 +790,7 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
       order = order.filter((id) => id !== entry.id);
     } else {
       const parent = entries[entry.parent] as OntimeBlock;
-      parent.events = parent.events.filter((event) => event !== entry.id);
+      parent.entries = parent.entries.filter((parentEntry) => parentEntry !== entry.id);
     }
 
     delete entries[entry.id];

apps/client/src/common/hooks/useFadeOutOnInactivity.tsx

@@ -2,31 +2,38 @@ import { useEffect, useState } from 'react';
 
 import { throttle } from '../utils/throttle';
 
+const inactiveTime = 3000; // 3 seconds
 
-export const useFadeOutOnInactivity = () => {
-  const [isMouseMoved, setIsMouseMoved] = useState(false);
+/**
+ * Provides whether there has been mouse movement in the page in the last <inactiveTime>
+ */
+export const useFadeOutOnInactivity = (initialState = false) => {
+  const [isUserActive, setIsUserActive] = useState(initialState);
 
   // show on mouse move
   useEffect(() => {
     let fadeOut: NodeJS.Timeout | null = null;
     const setShowMenuTrue = () => {
-      setIsMouseMoved(true);
+      setIsUserActive(true);
       if (fadeOut) {
         clearTimeout(fadeOut);
       }
-      fadeOut = setTimeout(() => setIsMouseMoved(false), 3000);
+      fadeOut = setTimeout(() => setIsUserActive(false), inactiveTime);
     };
 
     const throttledShowMenu = throttle(setShowMenuTrue, 1000);
 
     document.addEventListener('mousemove', throttledShowMenu);
+    document.addEventListener('keydown', throttledShowMenu);
+
     return () => {
       document.removeEventListener('mousemove', throttledShowMenu);
+      document.removeEventListener('keydown', throttledShowMenu);
       if (fadeOut) {
         clearTimeout(fadeOut);
       }
     };
   }, []);
 
-  return isMouseMoved;
+  return isUserActive;
 };

apps/client/src/common/hooks/useIsMobile.ts

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { useOs, useViewportSize } from '@mantine/hooks';
+
+export function useIsMobile(): boolean {
+  const { width } = useViewportSize();
+  const os = useOs();
+
+  return useMemo(() => (os === 'ios' || os === 'android') && width < 800, [width, os]);
+}

apps/client/src/common/hooks/useIsSmallDevice.ts

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { useOs, useViewportSize } from '@mantine/hooks';
+
+export function useIsSmallDevice(): boolean {
+  const { width } = useViewportSize();
+  const os = useOs();
+
+  return useMemo(() => (os === 'ios' || os === 'android') && width < 1300, [width, os]);
+}

apps/client/src/common/hooks/useIsSmallScreen.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { useViewportSize } from '@mantine/hooks';
+
+export function useIsSmallScreen(): boolean {
+  const { width } = useViewportSize();
+
+  return useMemo(() => width < 1300, [width]);
+}

apps/client/src/common/hooks/useRuntimeStylesheet.js

@@ -1,46 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const scriptTagId = 'ontime-override';
-export const useRuntimeStylesheet = (pathToFile) => {
-  const [shouldRender, setShouldRender] = useState(false);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const response = await fetch(pathToFile);
-      if (response.ok) {
-        return response.text();
-      }
-    };
-
-    if (!pathToFile) {
-      document.getElementById(scriptTagId)?.remove();
-      setShouldRender(true);
-      return;
-    }
-
-    if (document.getElementById(scriptTagId)) {
-      setShouldRender(true);
-      return;
-    }
-
-    setShouldRender(false);
-    const styleSheet = document.createElement('style');
-    styleSheet.rel = 'stylesheet';
-    styleSheet.setAttribute('id', scriptTagId);
-
-    fetchData()
-      .then((data) => {
-        styleSheet.innerHTML = data;
-        document.head.append(styleSheet);
-      })
-      .catch((error) => {
-        console.error(`Error loading stylesheet: ${error}`);
-      })
-      .finally(() => {
-        // schedule render for next tick
-        setTimeout(() => setShouldRender(true), 0);
-      });
-  }, [pathToFile]);
-
-  return { shouldRender };
-};

apps/client/src/common/hooks/useRuntimeStylesheet.ts

@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+
+const scriptTagId = 'ontime-override';
+
+export const useRuntimeStylesheet = (pathToFile?: string): { shouldRender: boolean } => {
+  const [shouldRender, setShouldRender] = useState(false);
+
+  /**
+   * When a view mounts or the stylesheet path changes we need to handle potentially loading a new stylesheet
+   * - if no path is given, ensure there is no stylesheet loaded
+   * - if a path is given, fetch the stylesheet and inject it into the document head
+   * @returns { shouldRender: boolean } - after the stylesheet is handled and the clients are ready to render
+   */
+  useEffect(() => {
+    if (!pathToFile) {
+      handleNoStylesheet();
+      return;
+    }
+
+    // there is already a stylesheet loaded, nothing further to do
+    if (document.getElementById(scriptTagId)) {
+      setShouldRender(true);
+      return;
+    }
+
+    setShouldRender(false);
+
+    fetchStylesheetData(pathToFile)
+      .then((data: string | undefined) => {
+        if (!data) {
+          console.error('Error loading stylesheet: no data');
+          return;
+        }
+        return injectStylesheet(data);
+      })
+      .catch((error: unknown) => {
+        console.error(`Error loading stylesheet: ${error}`);
+      })
+      .finally(() => {
+        // schedule render for next tick
+        setTimeout(() => setShouldRender(true), 0);
+      });
+
+    /**
+     * No stylesheet was provided, remove any existing stylesheet
+     */
+    function handleNoStylesheet() {
+      document.getElementById(scriptTagId)?.remove();
+      setShouldRender(true);
+    }
+
+    /**
+     * Get data from backend
+     */
+    async function fetchStylesheetData(path: string) {
+      const response = await fetch(path);
+      if (response.ok) {
+        return response.text();
+      }
+      return undefined;
+    }
+
+    /**
+     * Add a stylesheet with given content to the document head
+     */
+    async function injectStylesheet(styleContent: string) {
+      const styleSheet = document.createElement('style');
+      styleSheet.setAttribute('id', scriptTagId);
+      styleSheet.innerHTML = styleContent;
+      document.head.append(styleSheet);
+    }
+  }, [pathToFile]);
+
+  return { shouldRender };
+};

apps/client/src/common/hooks/useSocket.ts

@@ -1,7 +1,7 @@
 import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';
 
 import { useRuntimeStore } from '../stores/runtime';
-import { socketSendJson } from '../utils/socket';
+import { sendSocket } from '../utils/socket';
 
 const createSelector =
   <T>(selector: (state: RuntimeStore) => T) =>
@@ -9,22 +9,18 @@ const createSelector =
     useRuntimeStore(selector);
 
 export const setClientRemote = {
-  setIdentify: (payload: { target: string; identify: boolean }) => socketSendJson('client', payload),
-  setRedirect: (payload: { target: string; redirect: string }) => socketSendJson('client', payload),
-  setClientName: (payload: { target: string; rename: string }) => socketSendJson('client', payload),
+  setIdentify: (payload: { target: string; identify: boolean }) => sendSocket('client', payload),
+  setRedirect: (payload: { target: string; redirect: string }) => sendSocket('client', payload),
+  setClientName: (payload: { target: string; rename: string }) => sendSocket('client', payload),
 };
 
 export const useRundownEditor = createSelector((state: RuntimeStore) => ({
   playback: state.timer.playback,
   selectedEventId: state.eventNow?.id ?? null,
+  selectedBlockId: state.blockNow?.id ?? null,
   nextEventId: state.eventNext?.id ?? null,
 }));
 
-export const useOperator = createSelector((state: RuntimeStore) => ({
-  playback: state.timer.playback,
-  selectedEventId: state.eventNow?.id ?? null,
-}));
-
 export const useTimerViewControl = createSelector((state: RuntimeStore) => ({
   blackout: state.message.timer.blackout,
   blink: state.message.timer.blink,
@@ -37,29 +33,28 @@ export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
 }));
 
 export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
-  text: state.message.external,
-  visible: state.message.timer.secondarySource === 'external',
+  text: state.message.secondary,
+  visible: state.message.timer.secondarySource === 'secondary',
 }));
 
 export const useMessagePreview = createSelector((state: RuntimeStore) => ({
   blink: state.message.timer.blink,
   blackout: state.message.timer.blackout,
   phase: state.timer.phase,
-  showAuxTimer: state.message.timer.secondarySource === 'aux',
-  showExternalMessage: state.message.timer.secondarySource === 'external' && Boolean(state.message.external),
+  secondarySource: state.message.timer.secondarySource,
   showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
   timerType: state.eventNow?.timerType ?? null,
   countToEnd: state.eventNow?.countToEnd ?? false,
 }));
 
 export const setMessage = {
-  timerText: (payload: string) => socketSendJson('message', { timer: { text: payload } }),
-  timerVisible: (payload: boolean) => socketSendJson('message', { timer: { visible: payload } }),
-  externalText: (payload: string) => socketSendJson('message', { external: payload }),
-  timerBlink: (payload: boolean) => socketSendJson('message', { timer: { blink: payload } }),
-  timerBlackout: (payload: boolean) => socketSendJson('message', { timer: { blackout: payload } }),
-  timerSecondary: (payload: TimerMessage['secondarySource']) =>
-    socketSendJson('message', { timer: { secondarySource: payload } }),
+  timerText: (payload: string) => sendSocket('message', { timer: { text: payload } }),
+  timerVisible: (payload: boolean) => sendSocket('message', { timer: { visible: payload } }),
+  secondaryMessage: (payload: string) => sendSocket('message', { secondary: payload }),
+  timerBlink: (payload: boolean) => sendSocket('message', { timer: { blink: payload } }),
+  timerBlackout: (payload: boolean) => sendSocket('message', { timer: { blackout: payload } }),
+  timerSecondarySource: (payload: TimerMessage['secondarySource']) =>
+    sendSocket('message', { timer: { secondarySource: payload } }),
 };
 
 export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
@@ -70,40 +65,66 @@ export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
 }));
 
 export const setPlayback = {
-  start: () => socketSendJson('start'),
-  pause: () => socketSendJson('pause'),
-  roll: () => socketSendJson('roll'),
-  startNext: () => socketSendJson('start', 'next'),
+  start: () => sendSocket('start', undefined),
+  pause: () => sendSocket('pause', undefined),
+  roll: () => sendSocket('roll', undefined),
+  startNext: () => sendSocket('start', 'next'),
   previous: () => {
-    socketSendJson('load', 'previous');
+    sendSocket('load', 'previous');
   },
   next: () => {
-    socketSendJson('load', 'next');
+    sendSocket('load', 'next');
   },
   stop: () => {
-    socketSendJson('stop');
+    sendSocket('stop', undefined);
   },
   reload: () => {
-    socketSendJson('reload');
+    sendSocket('reload', undefined);
   },
   addTime: (amount: number) => {
-    socketSendJson('addtime', amount);
+    sendSocket('addtime', amount);
   },
 };
 
-export const useAuxTimerTime = createSelector((state: RuntimeStore) => state.auxtimer1.current);
+export const useAuxTimersTime = createSelector((state: RuntimeStore) => {
+  return {
+    aux1: state.auxtimer1.current,
+    aux2: state.auxtimer2.current,
+    aux3: state.auxtimer3.current,
+  };
+});
 
-export const useAuxTimerControl = createSelector((state: RuntimeStore) => ({
-  playback: state.auxtimer1.playback,
-  direction: state.auxtimer1.direction,
-}));
+export const useAuxTimerTime = (index: number) =>
+  createSelector((state: RuntimeStore) => {
+    if (index === 1) return state.auxtimer1.current;
+    if (index === 2) return state.auxtimer2.current;
+    return state.auxtimer3.current;
+  })();
+
+export const useAuxTimerControl = (index: number) =>
+  createSelector((state: RuntimeStore) => {
+    if (index === 1)
+      return {
+        playback: state.auxtimer1.playback,
+        direction: state.auxtimer1.direction,
+      };
+    if (index === 2)
+      return {
+        playback: state.auxtimer2.playback,
+        direction: state.auxtimer2.direction,
+      };
+    return {
+      playback: state.auxtimer3.playback,
+      direction: state.auxtimer3.direction,
+    };
+  })();
 
 export const setAuxTimer = {
-  start: () => socketSendJson('auxtimer', { '1': SimplePlayback.Start }),
-  pause: () => socketSendJson('auxtimer', { '1': SimplePlayback.Pause }),
-  stop: () => socketSendJson('auxtimer', { '1': SimplePlayback.Stop }),
-  setDirection: (direction: SimpleDirection) => socketSendJson('auxtimer', { '1': { direction } }),
-  setDuration: (time: number) => socketSendJson('auxtimer', { '1': { duration: time } }),
+  start: (index: number) => sendSocket('auxtimer', { [index]: SimplePlayback.Start }),
+  pause: (index: number) => sendSocket('auxtimer', { [index]: SimplePlayback.Pause }),
+  stop: (index: number) => sendSocket('auxtimer', { [index]: SimplePlayback.Stop }),
+  setDirection: (index: number, direction: SimpleDirection) => sendSocket('auxtimer', { [index]: { direction } }),
+  setDuration: (index: number, time: number) => sendSocket('auxtimer', { [index]: { duration: time } }),
 };
 
 export const useSelectedEventId = createSelector((state: RuntimeStore) => ({
@@ -111,14 +132,14 @@ export const useSelectedEventId = createSelector((state: RuntimeStore) => ({
 }));
 
 export const useCurrentBlockId = createSelector((state: RuntimeStore) => ({
-  currentBlockId: state.currentBlock.block?.id ?? null,
+  currentBlockId: state.blockNow?.id ?? null,
 }));
 
 export const setEventPlayback = {
-  loadEvent: (id: string) => socketSendJson('load', { id }),
-  startEvent: (id: string) => socketSendJson('start', { id }),
-  start: () => socketSendJson('start'),
-  pause: () => socketSendJson('pause'),
+  loadEvent: (id: string) => sendSocket('load', { id }),
+  startEvent: (id: string) => sendSocket('start', { id }),
+  start: () => sendSocket('start', undefined),
+  pause: () => sendSocket('pause', undefined),
 };
 
 export const useTimer = createSelector((state: RuntimeStore) => ({
@@ -152,7 +173,7 @@ export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) =
   selectedEventIndex: state.runtime.selectedEventIndex,
   offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
 
-  currentBlock: state.currentBlock,
+  blockStartedAt: state.blockNow?.startedAt ?? null,
 }));
 
 export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
@@ -164,11 +185,15 @@ export const useTimeUntilData = createSelector((state: RuntimeStore) => ({
   clock: state.clock,
   offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
   offsetMode: state.runtime.offsetMode,
-  currentDay: state.eventNow?.dayOffset ?? 0, //The day of the currently running event
+  currentDay: state.eventNow?.dayOffset ?? 0,
   actualStart: state.runtime.actualStart,
   plannedStart: state.runtime.plannedStart,
 }));
 
+export const useCurrentDay = createSelector((state: RuntimeStore) => ({
+  currentDay: state.eventNow?.dayOffset ?? 0,
+}));
+
 export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({
   offset: state.runtime.offset,
 }));
@@ -186,7 +211,7 @@ export const useOffsetMode = createSelector((state: RuntimeStore) => ({
   offsetMode: state.runtime.offsetMode,
 }));
 
-export const setOffsetMode = (payload: OffsetMode) => socketSendJson('offsetmode', payload);
+export const setOffsetMode = (payload: OffsetMode) => sendSocket('offsetmode', payload);
 
 export const usePlayback = () => {
   const featureSelector = (state: RuntimeStore) => ({

apps/client/src/common/models/ProjectData.ts

@@ -3,8 +3,6 @@ import { ProjectData } from 'ontime-types';
 export const projectDataPlaceholder: ProjectData = {
   title: '',
   description: '',
-  publicUrl: '',
-  publicInfo: '',
   backstageUrl: '',
   backstageInfo: '',
   projectLogo: null,

apps/client/src/common/queryClient.ts

@@ -1,11 +1,17 @@
 import { QueryClient } from '@tanstack/react-query';
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
 
 import { isOntimeCloud } from '../externals';
 
 export const ontimeQueryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: 1000 * 60 * 10, // 10 min
+      gcTime: 10 * MILLIS_PER_MINUTE,
+      // staleTime: MILLIS_PER_HOUR, //TODO: when all routes have implemented refetch signal from server, we can the assume that the data is not stale until we get the signal
+      networkMode: 'always',
+      refetchOnWindowFocus: false,
+      retry: 5,
+      retryDelay: (attempt) => attempt * 2500,
     },
     mutations: {
       /**

apps/client/src/common/stores/appModeStore.ts

@@ -3,7 +3,6 @@ import { create } from 'zustand';
 export enum AppMode {
   Run = 'run',
   Edit = 'edit',
-  Freeze = 'freeze',
 }
 
 const appModeKey = 'ontime-app-mode';

apps/client/src/common/stores/editorSettings.ts

@@ -10,7 +10,6 @@ type EditorSettingsStore = {
   defaultTimeStrategy: TimeStrategy;
   defaultWarnTime: string;
   defaultDangerTime: string;
-  defaultPublic: boolean;
   defaultTimerType: TimerType;
   defaultEndAction: EndAction;
   setDefaultDuration: (defaultDuration: string) => void;
@@ -18,7 +17,6 @@ type EditorSettingsStore = {
   setTimeStrategy: (timeStrategy: TimeStrategy) => void;
   setWarnTime: (warnTime: string) => void;
   setDangerTime: (dangerTime: string) => void;
-  setDefaultPublic: (defaultPublic: boolean) => void;
   setDefaultTimerType: (defaultTimerType: TimerType) => void;
   setDefaultEndAction: (defaultEndAction: EndAction) => void;
 };
@@ -29,7 +27,6 @@ export const editorSettingsDefaults = {
   timeStrategy: TimeStrategy.LockDuration,
   warnTime: '00:02:00', // 120000 same as backend
   dangerTime: '00:01:00', // 60000 same as backend
-  isPublic: true,
   timerType: TimerType.CountDown,
   endAction: EndAction.None,
 };
@@ -40,7 +37,6 @@ enum EditorSettingsKeys {
   DefaultTimeStrategy = 'ontime-time-strategy',
   DefaultWarnTime = 'ontime-default-warn-time',
   DefaultDangerTime = 'ontime-default-danger-time',
-  DefaultPublic = 'ontime-default-public',
   DefaultTimerType = 'ontime-default-timer-type',
   DefaultEndAction = 'ontime-default-end-action',
 }
@@ -55,7 +51,6 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
     ),
     defaultWarnTime: localStorage.getItem(EditorSettingsKeys.DefaultWarnTime) ?? editorSettingsDefaults.warnTime,
     defaultDangerTime: localStorage.getItem(EditorSettingsKeys.DefaultDangerTime) ?? editorSettingsDefaults.dangerTime,
-    defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.DefaultPublic, editorSettingsDefaults.isPublic),
     defaultTimerType: validateTimerType(
       localStorage.getItem(EditorSettingsKeys.DefaultTimerType),
       editorSettingsDefaults.timerType,
@@ -92,11 +87,6 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => {
         localStorage.setItem(EditorSettingsKeys.DefaultDangerTime, String(defaultDangerTime));
         return { defaultDangerTime };
       }),
-    setDefaultPublic: (defaultPublic) =>
-      set(() => {
-        localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic));
-        return { defaultPublic };
-      }),
     setDefaultTimerType: (defaultTimerType) =>
       set(() => {
         localStorage.setItem(EditorSettingsKeys.DefaultTimerType, String(defaultTimerType));

apps/client/src/common/stores/logger.ts

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
-import { Log, LogLevel, LogOrigin } from 'ontime-types';
+import { Log, LogLevel, LogOrigin, MessageTag } from 'ontime-types';
 import { generateId, millisToString } from 'ontime-utils';
 import { useStore } from 'zustand';
 import { createStore } from 'zustand/vanilla';
 
-import { socketSendJson } from '../utils/socket';
+import { sendSocket } from '../utils/socket';
 import { nowInMillis } from '../utils/time';
 
 type LogStore = {
@@ -40,7 +40,7 @@ export function useEmitLog() {
       text,
     };
 
-    socketSendJson('ontime-log', log);
+    sendSocket(MessageTag.Log, log);
   }, []);
 
   /**

apps/client/src/common/utils/__tests__/clone.test.ts

@@ -19,7 +19,6 @@ describe('cloneEvent()', () => {
       linkStart: false,
       countToEnd: false,
       endAction: EndAction.None,
-      isPublic: false,
       skip: false,
       colour: 'F00',
       revision: 10,
@@ -52,7 +51,6 @@ describe('cloneEvent()', () => {
       countToEnd: original.countToEnd,
       linkStart: original.linkStart,
       endAction: original.endAction,
-      isPublic: original.isPublic,
       skip: original.skip,
       colour: original.colour,
       revision: 0,

apps/client/src/common/utils/__tests__/styleUtils.test.ts

@@ -18,19 +18,19 @@ describe('getAccessibleColour()', () => {
   it('handles named colours', () => {
     const colour = 'red';
     const { backgroundColor, color } = getAccessibleColour(colour);
-    expect(backgroundColor).toBe('#FF0000FF');
+    expect(backgroundColor).toBe('#ff0000ff');
     expect(color).toBe('#fffffa');
   });
   it('handles hex colours', () => {
     const colour = '#0F0';
     const { backgroundColor, color } = getAccessibleColour(colour);
-    expect(backgroundColor).toBe('#00FF00FF');
+    expect(backgroundColor).toBe('#00ff00ff');
     expect(color).toBe('black');
   });
   it('handles transparens', () => {
     const colour = '#0F08';
     const { backgroundColor, color } = getAccessibleColour(colour);
-    expect(backgroundColor).toBe('#0C940CFF');
+    expect(backgroundColor).toBe('#0c940cff');
     expect(color).toBe('#fffffa');
   });
 });

apps/client/src/common/utils/clone.ts

@@ -20,7 +20,6 @@ export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
     countToEnd: event.countToEnd,
     linkStart: event.linkStart,
     endAction: event.endAction,
-    isPublic: event.isPublic,
     skip: event.skip,
     colour: event.colour,
     parent: event.parent,

apps/client/src/common/utils/linkUtils.ts

@@ -20,13 +20,13 @@ export function openLink(url: string) {
  * serverUrl and baseURI are used for testing
  */
 export function handleLinks(
-  event: MouseEvent,
   location: string,
+  event?: MouseEvent,
   externalServerUrl: string = serverURL,
   externalBaseURI: string = baseURI,
 ) {
   // we handle the link manually
-  event.preventDefault();
+  event?.preventDefault();
 
   const destination = new URL(externalServerUrl);
   destination.pathname = externalBaseURI ? `${externalBaseURI}/${location}` : location;

apps/client/src/common/utils/socket.ts

@@ -1,7 +1,16 @@
-import { Log, Rundown, RuntimeStore } from 'ontime-types';
+import {
+  ApiAction,
+  Log,
+  MessageTag,
+  RefetchKey,
+  Rundown,
+  RuntimeStore,
+  WsPacketToClient,
+  WsPacketToServer,
+} from 'ontime-types';
 
 import { isProduction, websocketUrl } from '../../externals';
-import { CLIENT_LIST, CUSTOM_FIELDS, REPORT, RUNDOWN, RUNTIME } from '../api/constants';
+import { CLIENT_LIST, CUSTOM_FIELDS, REPORT, RUNDOWN, RUNTIME, VIEW_SETTINGS } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
 import {
@@ -33,16 +42,14 @@ export const connectSocket = () => {
     hasConnected = true;
     reconnectAttempts = 0;
 
-    socketSendJson('set-client-patch', {
+    sendSocket(MessageTag.ClientSet, {
       type: 'ontime',
       origin: window.location.origin,
       path: window.location.pathname + window.location.search,
+      name: preferredClientName,
     });
+    invalidateAllCaches(); // assume all data to be stale after a reconnect
     setOnlineStatus(true);
-
-    if (preferredClientName) {
-      socketSendJson('set-client-name', preferredClientName);
-    }
   };
 
   websocket.onclose = () => {
@@ -65,56 +72,48 @@ export const connectSocket = () => {
     console.error('WebSocket error:', error);
   };
 
-  websocket.onmessage = (event) => {
+  websocket.onmessage = async (event) => {
     try {
-      const data = JSON.parse(event.data);
+      const data = JSON.parse(event.data) as WsPacketToClient;
 
-      const { type, payload } = data;
+      const { tag, payload } = data;
 
-      if (!type) {
+      if (!tag) {
         return;
       }
 
-      switch (type) {
-        case 'pong': {
+      switch (tag) {
+        case MessageTag.Pong: {
           const offset = (new Date().getTime() - new Date(payload).getTime()) * 0.5;
           patchRuntimeProperty('ping', offset);
           updateDevTools({ ping: offset });
           break;
         }
-        case 'client': {
-          if (typeof payload === 'object' || payload !== null) {
-            if (payload.clientId && payload.clientName) {
-              setClientId(payload.clientId);
-              if (!preferredClientName) {
-                setClientName(payload.clientName);
-              }
-            }
+        case MessageTag.ClientInit: {
+          setClientId(payload.clientId);
+          if (!preferredClientName) {
+            setClientName(payload.clientName);
           }
           break;
         }
 
-        case 'client-rename': {
-          if (typeof payload === 'object') {
-            const id = getClientId();
-            if (payload.target && payload.target === id) {
-              setClientName(payload.name);
-            }
+        case MessageTag.ClientRename: {
+          const id = getClientId();
+          if (payload.target === id) {
+            setClientName(payload.name);
           }
           break;
         }
 
-        case 'client-redirect': {
-          if (typeof payload === 'object') {
-            const id = getClientId();
-            if (payload.target && payload.target === id) {
-              setClientRedirect(payload.path);
-            }
+        case MessageTag.ClientRedirect: {
+          const id = getClientId();
+          if (payload.target === id) {
+            setClientRedirect(payload.path);
           }
           break;
         }
 
-        case 'client-list': {
+        case MessageTag.ClientList: {
           setClients(payload);
           if (!isProduction) {
             ontimeQueryClient.setQueryData(CLIENT_LIST, payload);
@@ -122,50 +121,60 @@ export const connectSocket = () => {
           break;
         }
 
-        case 'dialog': {
+        case MessageTag.Dialog: {
           if (payload.dialog === 'welcome') {
             addDialog('welcome');
           }
           break;
         }
 
-        case 'ontime-log': {
+        case MessageTag.Log: {
           addLog(payload as Log);
           break;
         }
-        case 'ontime': {
+        case MessageTag.RuntimeData: {
           // eslint-disable-next-line @typescript-eslint/no-unused-vars -- removing the key from the payload
-          const { ping, ...serverPayload } = payload as Partial<RuntimeStore>;
-
+          const { ping, ...serverPayload } = payload;
           patchRuntime(serverPayload);
           updateDevTools(serverPayload);
           break;
         }
-        case 'ontime-patch': {
-          const patch = payload as Partial<RuntimeStore>;
+        case MessageTag.RuntimePatch: {
+          const patch = payload;
           patchRuntime(patch);
           updateDevTools(patch);
           break;
         }
-        case 'ontime-refetch': {
+        case MessageTag.Refetch: {
           // the refetch message signals that the rundown has changed in the server side
-          const { reload, target } = payload;
-          if (reload) {
-            invalidateAllCaches();
-          } else if (target === 'RUNDOWN') {
-            const { revision } = payload;
-            const currentRevision = ontimeQueryClient.getQueryData<Rundown>(RUNDOWN)?.revision ?? -1;
-            if (revision > currentRevision) {
+          const { target, revision } = payload;
+          switch (target) {
+            case RefetchKey.All:
+              invalidateAllCaches();
+              break;
+            case RefetchKey.CustomFields:
+              ontimeQueryClient.invalidateQueries({ queryKey: CUSTOM_FIELDS });
+              break;
+            case RefetchKey.Rundown:
+              if (revision === (ontimeQueryClient.getQueryData(RUNDOWN) as Rundown).revision) break;
               ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });
               ontimeQueryClient.invalidateQueries({ queryKey: CUSTOM_FIELDS });
+              break;
+            case RefetchKey.ViewSettings:
+              ontimeQueryClient.invalidateQueries({ queryKey: VIEW_SETTINGS });
+              break;
+            case RefetchKey.Report:
+              ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
+              break;
+            default: {
+              target satisfies never;
+              break;
             }
-          } else if (target === 'REPORT') {
-            ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
           }
           break;
         }
         default: {
-          console.log('unknown WS message', type);
+          tag satisfies never;
           break;
         }
       }
@@ -175,20 +184,14 @@ export const connectSocket = () => {
   };
 };
 
-export const socketSend = (message: any) => {
+export function sendSocket<T extends MessageTag | ApiAction>(
+  tag: T,
+  payload: T extends MessageTag ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload'] : unknown,
+): void {
   if (websocket && websocket.readyState === WebSocket.OPEN) {
-    websocket.send(message);
+    websocket.send(JSON.stringify({ tag, payload }));
   }
-};
-
-export const socketSendJson = (type: string, payload?: unknown) => {
-  socketSend(
-    JSON.stringify({
-      type,
-      payload,
-    }),
-  );
-};
+}
 
 function updateDevTools(newData: Partial<RuntimeStore>) {
   if (!isProduction) {

apps/client/src/common/utils/styleUtils.ts

@@ -1,27 +1,27 @@
-import Color from 'color';
+import { RGBColour } from 'ontime-types';
+import { colourToHex, cssOrHexToColour, isLightColour, mixColours } from 'ontime-utils';
 
 type ColourCombination = {
   backgroundColor: string;
   color: string;
 };
 
+const defaultUiBackground: RGBColour = { red: 26, green: 26, blue: 26, alpha: 1 };
 /**
  * @description Selects text colour to maintain accessible contrast
  * @param bgColour
  * @return {{backgroundColor, color: string}}
  */
 export const getAccessibleColour = (bgColour?: string): ColourCombination => {
-  if (bgColour) {
-    try {
-      const originalColour = Color(bgColour);
-      const backgroundColorMix = originalColour.alpha(1).mix(Color('#1a1a1a'), 1 - originalColour.alpha());
-      const textColor = backgroundColorMix.isLight() ? 'black' : '#fffffa';
-      return { backgroundColor: backgroundColorMix.hexa(), color: textColor };
-    } catch (_error) {
-      /* we do not handle errors here */
-    }
-  }
-  return { backgroundColor: '#1a1a1a', color: '#fffffa' };
+  if (!bgColour) return { backgroundColor: '#1a1a1a', color: '#fffffa' };
+
+  const originalColour = cssOrHexToColour(bgColour);
+  if (!originalColour) return { backgroundColor: '#1a1a1a', color: '#fffffa' };
+
+  const backgroundColorMix = mixColours(defaultUiBackground, originalColour, 1 - originalColour.alpha);
+  const textColor = isLightColour(backgroundColorMix) ? 'black' : '#fffffa';
+
+  return { backgroundColor: colourToHex(backgroundColorMix), color: textColor };
 };
 
 /**
@@ -39,11 +39,8 @@ export const timerPlaceholderMin = '––:––';
  * Adds opacity to a given colour if possible
  */
 export function alpha(colour: string, amount: number): string {
-  try {
-    const withAlpha = Color(colour).alpha(amount).hexa();
-    return withAlpha;
-  } catch (_error) {
-    /* we do not handle errors here */
-  }
-  return colour;
+  const originalColour = cssOrHexToColour(colour);
+  if (!originalColour) return colour;
+  originalColour.alpha = amount;
+  return colourToHex(originalColour);
 }

apps/client/src/features/app-settings/panel-content/PanelContent.module.scss

@@ -2,7 +2,7 @@
   position: absolute;
   top: 1rem;
   right: 2rem;
-  z-index: 100;
+  z-index: $zindex-floating;
 }
 
 .contentWrapper {

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -92,7 +92,7 @@ $inner-padding: 1rem;
   thead {
     position: sticky;
     top: 0;
-    z-index: 3;
+    z-index: $zindex-floating;
     background-color: $gray-1350;
   }
 
@@ -152,12 +152,12 @@ $inner-padding: 1rem;
 .divider {
   border-top: 1px solid $white-10;
   margin: 1rem -2rem;
-  z-index: 999;
+  z-index: $zindex-floating;
 }
 
 .overlay {
   position: absolute;
-  z-index: 10;
+  z-index: $zindex-backdrop;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(2px);

apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx

@@ -42,17 +42,25 @@ export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFo
           value={selectedAction}
           onChange={(event) => updateSelectedAction(event.target.value)}
         >
-          <option value='aux-start'>Auxiliary timer: start</option>
-          <option value='aux-pause'>Auxiliary timer: pause</option>
-          <option value='aux-stop'>Auxiliary timer: stop</option>
-          <option value='aux-set'>Auxiliary timer: set</option>
+          <option value='aux-start'>Aux 1: start</option>
+          <option value='aux-pause'>Aux 1: pause</option>
+          <option value='aux-stop'>Aux 1: stop</option>
+          <option value='aux-set'>Aux 2: set</option>
+          <option value='aux-start'>Aux 2: start</option>
+          <option value='aux-pause'>Aux 2: pause</option>
+          <option value='aux-stop'>Aux 2: stop</option>
+          <option value='aux-set'>Aux 2: set</option>
+          <option value='aux-start'>Aux 3: start</option>
+          <option value='aux-pause'>Aux 3: pause</option>
+          <option value='aux-stop'>Aux 3: stop</option>
+          <option value='aux-set'>Aux 3: set</option>
           <option value='message-set'>Timer: timer message</option>
           <option value='message-secondary'>Timer: timer secondary</option>
         </Select>
         <Panel.Error>{rowErrors?.action?.message}</Panel.Error>
       </label>
 
-      {selectedAction === 'aux-set' && (
+      {selectedAction === 'aux1-set' && (
         <label>
           New time
           <Input

apps/client/src/features/app-settings/panel/automations-panel/automationUtils.ts

@@ -31,7 +31,6 @@ const staticSelectProperties = [
   { value: 'eventNow.title', label: 'Title' },
   { value: 'eventNow.cue', label: 'Cue' },
   { value: 'eventNow.countToEnd', label: 'Count to end' },
-  { value: 'eventNow.isPublic', label: 'Is public' },
   { value: 'eventNow.note', label: 'Note' },
   { value: 'eventNow.colour', label: 'Colour' },
 ];

apps/client/src/features/app-settings/panel/automations-panel/template-input/TemplateInput.module.scss

@@ -11,7 +11,7 @@
   left: 0;
   width: 100%;
   margin: 0;
-  z-index: 5;
+  z-index: $zindex-floating;
   padding-block: 0.25rem;
 
   max-height: 200px;

apps/client/src/features/app-settings/panel/automations-panel/template-input/templateInput.utils.ts

@@ -38,7 +38,6 @@ const eventStaticPropertiesNow = [
   '{{eventNow.timeStart}}',
   '{{eventNow.timeEnd}}',
   '{{eventNow.duration}}',
-  '{{eventNow.isPublic}}',
   '{{eventNow.colour}}',
   '{{eventNow.delay}}',
 ];
@@ -51,7 +50,6 @@ const eventStaticPropertiesNext = [
   '{{eventNext.timeStart}}',
   '{{eventNext.timeEnd}}',
   '{{eventNext.duration}}',
-  '{{eventNext.isPublic}}',
   '{{eventNext.colour}}',
   '{{eventNext.delay}}',
 ];

apps/client/src/features/app-settings/panel/feature-settings-panel/UrlPresetsForm.tsx

@@ -198,7 +198,7 @@ export default function UrlPresetsForm() {
                       <TooltipActionBtn
                         size='sm'
                         isDisabled={!canTest}
-                        clickHandler={(event) => handleLinks(event, preset.alias)}
+                        clickHandler={(event) => handleLinks(preset.alias, event)}
                         tooltip='Test preset'
                         aria-label='Test preset'
                         variant='ontime-ghosted'

apps/client/src/features/app-settings/panel/general-panel/ViewSettingsForm.tsx

@@ -4,7 +4,6 @@ import { Button, Input, Switch, useDisclosure } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';
 
 import { maybeAxiosError } from '../../../../common/api/utils';
-import { postViewSettings } from '../../../../common/api/viewSettings';
 import Info from '../../../../common/components/info/Info';
 import { SwatchPickerRHF } from '../../../../common/components/input/colour-input/SwatchPicker';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
@@ -19,17 +18,17 @@ import CodeEditorModal from './StyleEditorModal';
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
 
 export default function ViewSettingsForm() {
-  const { data, status, refetch } = useViewSettings();
+  const { data, isPending, mutateAsync } = useViewSettings();
   const { data: info, status: infoStatus } = useInfo();
   const { isOpen: isCodeEditorOpen, onOpen: onCodeEditorOpen, onClose: onCodeEditorClose } = useDisclosure();
 
   const {
     control,
     handleSubmit,
+    setError,
     register,
     reset,
-    setError,
-    formState: { isSubmitting, isDirty },
+    formState: { isSubmitting, isDirty, errors },
   } = useForm<ViewSettings>({
     defaultValues: data,
     values: data,
@@ -46,17 +45,11 @@ export default function ViewSettingsForm() {
   }, [data, reset]);
 
   const onSubmit = async (formData: ViewSettings) => {
-    const newData = {
-      ...formData,
-    };
-
     try {
-      await postViewSettings(newData);
+      mutateAsync(formData);
     } catch (error) {
       const message = maybeAxiosError(error);
       setError('root', { message });
-    } finally {
-      await refetch();
     }
   };
 
@@ -68,7 +61,7 @@ export default function ViewSettingsForm() {
     return null;
   }
 
-  const isLoading = status === 'pending' || infoStatus === 'pending';
+  const isLoading = isPending || infoStatus === 'pending';
 
   return (
     <Panel.Section
@@ -105,6 +98,7 @@ export default function ViewSettingsForm() {
         </Info>
         <Panel.Section>
           <Panel.Loader isLoading={isLoading} />
+          <Panel.Error>{errors.root?.message}</Panel.Error>
           <Panel.ListGroup>
             <CodeEditorModal isOpen={isCodeEditorOpen} onClose={onCodeEditorClose} />
             <Panel.ListItem>

apps/client/src/features/app-settings/panel/interface-panel/EditorSettingsForm.tsx

@@ -13,7 +13,6 @@ export default function EditorSettingsForm() {
     defaultTimeStrategy,
     defaultWarnTime,
     defaultDangerTime,
-    defaultPublic,
     defaultTimerType,
     defaultEndAction,
     setDefaultDuration,
@@ -21,7 +20,6 @@ export default function EditorSettingsForm() {
     setTimeStrategy,
     setWarnTime,
     setDangerTime,
-    setDefaultPublic,
     setDefaultTimerType,
     setDefaultEndAction,
   } = useEditorSettings((state) => state);
@@ -127,17 +125,6 @@ export default function EditorSettingsForm() {
               />
             </Panel.ListItem>
           </Panel.ListGroup>
-          <Panel.ListGroup>
-            <Panel.ListItem>
-              <Panel.Field title='Default public' description='New events will be public' />
-              <Switch
-                variant='ontime'
-                size='lg'
-                defaultChecked={defaultPublic}
-                onChange={(event) => setDefaultPublic(event.target.checked)}
-              />
-            </Panel.ListItem>
-          </Panel.ListGroup>
         </Panel.Section>
         <Panel.Section>
           <Panel.Title>Run mode</Panel.Title>

apps/client/src/features/app-settings/panel/network-panel/NetworkLogExport.tsx

@@ -10,7 +10,7 @@ import style from './NetworkLogExport.module.scss';
 
 export default function LogExport() {
   const extract = (event: MouseEvent) => {
-    handleLinks(event, 'log');
+    handleLinks('log', event);
   };
 
   return (

apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
+import { MessageTag } from 'ontime-types';
 
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import { usePing } from '../../../../common/hooks/useSocket';
-import { socketSendJson } from '../../../../common/utils/socket';
+import { sendSocket } from '../../../../common/utils/socket';
 import { isDockerImage, isOntimeCloud } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -57,10 +58,10 @@ function OntimeCloudStats() {
    * Send immediate ping request, and keep sending on an interval
    */
   useEffect(() => {
-    socketSendJson('ping', new Date());
+    sendSocket(MessageTag.Ping, new Date());
 
     const doPing = setInterval(() => {
-      socketSendJson('ping', new Date());
+      sendSocket(MessageTag.Ping, new Date());
     }, 5000);
 
     return () => {

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -8,7 +8,7 @@ import { PROJECT_LIST } from '../../../../common/api/constants';
 import { createProject } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import { preventEscape } from '../../../../common/utils/keyEvent';
-import { documentationUrl, websiteUrl } from '../../../../externals';
+import { documentationUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './ProjectPanel.module.scss';
@@ -20,8 +20,6 @@ interface ProjectCreateFromProps {
 type ProjectCreateFormValues = {
   title?: string;
   description?: string;
-  publicInfo?: string;
-  publicUrl?: string;
   backstageInfo?: string;
   backstageUrl?: string;
   custom?: { title: string; value: string }[];
@@ -120,28 +118,6 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
             {...register('description')}
           />
         </label>
-        <label>
-          Public info
-          <Textarea
-            variant='ontime-filled'
-            size='sm'
-            maxLength={150}
-            placeholder='Shows always start ontime'
-            autoComplete='off'
-            resize='none'
-            {...register('publicInfo')}
-          />
-        </label>
-        <label>
-          Public QR code Url
-          <Input
-            variant='ontime-filled'
-            size='sm'
-            placeholder={websiteUrl}
-            autoComplete='off'
-            {...register('publicUrl')}
-          />
-        </label>
         <label>
           Backstage info
           <Textarea

apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx

@@ -10,7 +10,7 @@ import { maybeAxiosError } from '../../../../common/api/utils';
 import useProjectData from '../../../../common/hooks-query/useProjectData';
 import { preventEscape } from '../../../../common/utils/keyEvent';
 import { validateLogo } from '../../../../common/utils/uploadUtils';
-import { documentationUrl, websiteUrl } from '../../../../externals';
+import { documentationUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './ProjectPanel.module.scss';
@@ -198,28 +198,6 @@ export default function ProjectData() {
               {...register('description')}
             />
           </label>
-          <label>
-            Public info
-            <Textarea
-              variant='ontime-filled'
-              size='sm'
-              maxLength={150}
-              placeholder='Shows always start ontime'
-              autoComplete='off'
-              resize='none'
-              {...register('publicInfo')}
-            />
-          </label>
-          <label>
-            Public QR code URL
-            <Input
-              variant='ontime-filled'
-              size='sm'
-              placeholder={websiteUrl}
-              autoComplete='off'
-              {...register('publicUrl')}
-            />
-          </label>
           <label>
             Backstage info
             <Textarea

apps/client/src/features/app-settings/panel/sources-panel/import-map/__test__/importMapUtils.test.ts

@@ -12,7 +12,6 @@ describe('convertToImportMap', () => {
       Duration: 'duration',
       Cue: 'cue',
       Title: 'title',
-      'Is Public': 'public',
       Skip: 'skip',
       Note: 'notes',
       Colour: 'colour',

apps/client/src/features/app-settings/panel/sources-panel/import-map/importMapUtils.ts

@@ -12,7 +12,6 @@ const namedImportMap = {
   Cue: 'cue',
   Title: 'title',
   'Count to end': 'count to end',
-  'Is Public': 'public',
   Skip: 'skip',
   Note: 'notes',
   Colour: 'colour',
@@ -50,7 +49,6 @@ export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
     cue: namedImportMap.Cue,
     title: namedImportMap.Title,
     countToEnd: namedImportMap['Count to end'],
-    isPublic: namedImportMap['Is Public'],
     skip: namedImportMap.Skip,
     note: namedImportMap.Note,
     colour: namedImportMap.Colour,

apps/client/src/features/app-settings/panel/sources-panel/preview/PreviewRundown.tsx

@@ -41,7 +41,6 @@ export default function PreviewRundown(props: PreviewRundownProps) {
           <th>Warning Time</th>
           <th>Danger Time</th>
           <th>Count to end</th>
-          <th>Is Public</th>
           <th>Skip</th>
           <th>Colour</th>
           <th>Timer Type</th>
@@ -75,7 +74,6 @@ export default function PreviewRundown(props: PreviewRundownProps) {
           eventIndex += 1;
           const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
           const countToEnd = booleanToText(entry.countToEnd);
-          const isPublic = booleanToText(entry.isPublic);
           const skip = booleanToText(entry.skip);
 
           return (
@@ -98,7 +96,6 @@ export default function PreviewRundown(props: PreviewRundownProps) {
                 <td>{millisToString(entry.timeWarning)}</td>
                 <td>{millisToString(entry.timeDanger)}</td>
                 <td className={style.center}>{countToEnd && <Tag>{countToEnd}</Tag>}</td>
-                <td className={style.center}>{isPublic && <Tag>{isPublic}</Tag>}</td>
                 <td>{skip && <Tag>{skip}</Tag>}</td>
                 <td style={{ ...colour }}>{entry.colour}</td>
                 <td className={style.center}>

apps/client/src/features/control/message/MessageControl.module.scss

@@ -10,7 +10,7 @@
 .previewContainer {
   display: grid;
   gap: $element-spacing;
-  grid-template-columns: 2fr 1fr;
+  grid-template-columns: 3fr 2fr;
 }
 
 .preview {
@@ -39,6 +39,7 @@
 .mainContent {
   font-size: 1rem;
   font-weight: 600;
+  width: 100%;
   color: var(--override-colour, $ui-white);
 
   &[data-phase='pending'] {
@@ -72,7 +73,3 @@
     color: $active-indicator;
   }
 }
-
-.divider {
-  border-top: 1px solid $gray-1000;
-}

apps/client/src/features/control/message/MessageControl.tsx

@@ -1,8 +1,11 @@
 import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
 
-import TooltipActionBtn from '../../../common/components/buttons/TooltipActionBtn';
-import { setMessage, useExternalMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
-import { tooltipDelayMid } from '../../../ontimeConfig';
+import IconButton from '../../../common/components/buttons/IconButton';
+import {
+  setMessage,
+  useExternalMessageInput as useSecondaryMessageInput,
+  useTimerMessageInput,
+} from '../../../common/hooks/useSocket';
 
 import InputRow from './InputRow';
 import TimerControlsPreview from './TimerViewControl';
@@ -12,7 +15,7 @@ export default function MessageControl() {
     <>
       <TimerControlsPreview />
       <TimerMessageInput />
-      <ExternalInput />
+      <SecondaryInput />
     </>
   );
 }
@@ -28,47 +31,43 @@ function TimerMessageInput() {
       visible={visible}
       changeHandler={(newValue) => setMessage.timerText(newValue)}
     >
-      <TooltipActionBtn
-        clickHandler={() => setMessage.timerVisible(!visible)}
-        tooltip={visible ? 'Make invisible' : 'Make visible'}
+      <IconButton
         aria-label='Toggle timer message visibility'
-        openDelay={tooltipDelayMid}
-        icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-        variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-        size='sm'
-      />
+        onClick={() => setMessage.timerVisible(!visible)}
+        variant={visible ? 'primary' : 'subtle'}
+      >
+        {visible ? <IoEye /> : <IoEyeOffOutline />}
+      </IconButton>
     </InputRow>
   );
 }
 
-function ExternalInput() {
-  const { text, visible } = useExternalMessageInput();
+function SecondaryInput() {
+  const { text, visible } = useSecondaryMessageInput();
 
-  const toggleExternal = () => {
+  const toggleSecondary = () => {
     if (visible) {
-      setMessage.timerSecondary(null);
+      setMessage.timerSecondarySource(null);
     } else {
-      setMessage.timerSecondary('external');
+      setMessage.timerSecondarySource('secondary');
     }
   };
 
   return (
     <InputRow
-      label='External Message'
+      label='Secondary Message'
       placeholder='Message shown as secondary text in stage timer'
       text={text}
       visible={visible}
-      changeHandler={(newValue) => setMessage.externalText(newValue)}
+      changeHandler={(newValue) => setMessage.secondaryMessage(newValue)}
     >
-      <TooltipActionBtn
-        clickHandler={toggleExternal}
-        tooltip={visible ? 'Make invisible' : 'Make visible'}
-        aria-label='Toggle external message visibility'
-        openDelay={tooltipDelayMid}
-        icon={visible ? <IoEye size='18px' /> : <IoEyeOffOutline size='18px' />}
-        variant={visible ? 'ontime-filled' : 'ontime-subtle'}
-        size='sm'
-      />
+      <IconButton
+        aria-label='Toggle secondary message visibility'
+        onClick={toggleSecondary}
+        variant={visible ? 'primary' : 'subtle'}
+      >
+        {visible ? <IoEye /> : <IoEyeOffOutline />}
+      </IconButton>
     </InputRow>
   );
 }

apps/client/src/features/control/message/MessageControlExport.jsx

@@ -1,28 +0,0 @@
-import { memo } from 'react';
-
-import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary';
-import { handleLinks } from '../../../common/utils/linkUtils';
-import { cx } from '../../../common/utils/styleUtils';
-import { Corner } from '../../editors/editor-utils/EditorUtils';
-
-import MessageControl from './MessageControl';
-
-import style from '../../editors/Editor.module.scss';
-
-const MessageControlExport = () => {
-  const isExtracted = window.location.pathname.includes('/messagecontrol');
-  const classes = cx([style.content, style.contentColumnLayout]);
-
-  return (
-    <div className={style.messages} data-testid='panel-messages-control'>
-      {!isExtracted && <Corner onClick={(event) => handleLinks(event, 'messagecontrol')} />}
-      <div className={classes}>
-        <ErrorBoundary>
-          <MessageControl />
-        </ErrorBoundary>
-      </div>
-    </div>
-  );
-};
-
-export default memo(MessageControlExport);

apps/client/src/features/control/message/MessageControlExport.tsx

@@ -0,0 +1,33 @@
+import { memo } from 'react';
+
+import { Corner } from '../../../common/components/editor-utils/EditorUtils';
+import ErrorBoundary from '../../../common/components/error-boundary/ErrorBoundary';
+import ViewNavigationMenu from '../../../common/components/navigation-menu/ViewNavigationMenu';
+import ProtectRoute from '../../../common/components/protect-route/ProtectRoute';
+import { handleLinks } from '../../../common/utils/linkUtils';
+import { cx } from '../../../common/utils/styleUtils';
+
+import MessageControl from './MessageControl';
+
+import style from '../../../views/editor/Editor.module.scss';
+
+export default memo(MessageControlExport);
+function MessageControlExport() {
+  const isExtracted = window.location.pathname.includes('/messagecontrol');
+  const classes = cx([style.content, style.contentColumnLayout]);
+
+  return (
+    <ProtectRoute permission='editor'>
+      <div className={style.messages} data-testid='panel-messages-control'>
+        {!isExtracted && <Corner onClick={(event) => handleLinks('messagecontrol', event)} />}
+        {isExtracted && <ViewNavigationMenu supressSettings />}
+
+        <div className={classes}>
+          <ErrorBoundary>
+            <MessageControl />
+          </ErrorBoundary>
+        </div>
+      </div>
+    </ProtectRoute>
+  );
+}

apps/client/src/features/control/message/TimerPreview.tsx

@@ -2,21 +2,25 @@ import { IoArrowDown, IoArrowUp, IoBan, IoFlag, IoTime } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
 import { TimerPhase, TimerType } from 'ontime-types';
 
+import { Corner } from '../../../common/components/editor-utils/EditorUtils';
 import { useMessagePreview } from '../../../common/hooks/useSocket';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
 import { tooltipDelayMid } from '../../../ontimeConfig';
-import { Corner } from '../../editors/editor-utils/EditorUtils';
 
 import style from './MessageControl.module.scss';
 
-export default function TimerPreview() {
-  const { blink, blackout, countToEnd, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
-    useMessagePreview();
-  const { data } = useViewSettings();
+const secondarySourceLabels: Record<string, string> = {
+  aux1: 'Aux 1',
+  aux2: 'Aux 2',
+  aux3: 'Aux 3',
+  secondary: 'Secondary message',
+};
 
-  const contentClasses = cx([style.previewContent, blink && style.blink, blackout && style.blackout]);
+export default function TimerPreview() {
+  const { blink, blackout, countToEnd, phase, secondarySource, showTimerMessage, timerType } = useMessagePreview();
+  const { data } = useViewSettings();
 
   const main = (() => {
     if (showTimerMessage) return 'Message';
@@ -29,13 +33,11 @@ export default function TimerPreview() {
   })();
 
   const secondary = (() => {
-    // message is a fullscreen overlay
-    if (showTimerMessage) return null;
+    // message is a fullscreen overlay or secondary is not active
+    if (showTimerMessage || !secondarySource) return null;
 
     // we need to check aux first since it takes priority
-    if (showAuxTimer) return 'Aux Timer';
-    if (showExternalMessage) return 'External message';
-    return null;
+    return secondarySourceLabels[secondarySource];
   })();
 
   const overrideColour = (() => {
@@ -46,10 +48,11 @@ export default function TimerPreview() {
   })();
 
   const showColourOverride = main == 'Timer';
+  const contentClasses = cx([blink && style.blink, blackout && style.blackout]);
 
   return (
     <div className={style.preview}>
-      <Corner onClick={(event) => handleLinks(event, 'timer')} />
+      <Corner onClick={(event) => handleLinks('timer', event)} />
       <div className={contentClasses}>
         <div
           className={style.mainContent}

apps/client/src/features/control/message/TimerViewControl.tsx

@@ -1,5 +1,9 @@
-import { Button } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { SecondarySource } from 'ontime-types';
 
+import Button from '../../../common/components/buttons/Button';
+import * as Editor from '../../../common/components/editor-utils/EditorUtils';
+import Select from '../../../common/components/select/Select';
 import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
 
 import TimerPreview from './TimerPreview';
@@ -7,50 +11,27 @@ import TimerPreview from './TimerPreview';
 import style from './MessageControl.module.scss';
 
 export default function TimerControlsPreview() {
-  const { blackout, blink, secondarySource } = useTimerViewControl();
-
-  const toggleSecondary = (newValue: 'aux' | 'external' | null) => {
-    if (secondarySource === newValue) {
-      setMessage.timerSecondary(null);
-    } else {
-      setMessage.timerSecondary(newValue);
-    }
-  };
+  const { blackout, blink } = useTimerViewControl();
 
   return (
     <div className={style.previewContainer}>
       <TimerPreview />
-
       <div className={style.options}>
-        <Button
-          size='sm'
-          variant={secondarySource === 'aux' ? 'ontime-filled' : 'ontime-subtle'}
-          onClick={() => toggleSecondary('aux')}
-        >
-          Show Aux timer
-        </Button>
-        <Button
-          size='sm'
-          variant={secondarySource === 'external' ? 'ontime-filled' : 'ontime-subtle'}
-          onClick={() => toggleSecondary('external')}
-        >
-          Show external
-        </Button>
+        <SecondarySourceControl />
 
-        <hr className={style.divider} />
+        <Editor.Separator orientation='horizontal' />
 
         <Button
-          size='sm'
-          variant={blink ? 'ontime-filled' : 'ontime-subtle'}
+          variant={blink ? 'primary' : 'subtle'}
+          fluid
           onClick={() => setMessage.timerBlink(!blink)}
           data-testid='toggle timer blink'
         >
           Blink
         </Button>
         <Button
-          size='sm'
-          className={style.blackoutButton}
-          variant={blackout ? 'ontime-filled' : 'ontime-subtle'}
+          variant={blackout ? 'primary' : 'subtle'}
+          fluid
           onClick={() => setMessage.timerBlackout(!blackout)}
           data-testid='toggle timer blackout'
         >
@@ -60,3 +41,55 @@ export default function TimerControlsPreview() {
     </div>
   );
 }
+
+function SecondarySourceControl() {
+  const { secondarySource } = useTimerViewControl();
+  const [value, setValue] = useState<SecondarySource>('aux1');
+
+  // sync secondary source with external changes
+  useEffect(() => {
+    if (secondarySource !== null) {
+      setValue(secondarySource);
+    }
+  }, [secondarySource]);
+
+  const toggleSecondary = () => {
+    if (secondarySource === value) {
+      setMessage.timerSecondarySource(null);
+    } else {
+      setMessage.timerSecondarySource(value);
+    }
+  };
+
+  const changeValue = (newValue: SecondarySource) => {
+    // we can only update the remote if it is enabled
+    if (secondarySource !== null) {
+      setMessage.timerSecondarySource(newValue);
+    }
+    setValue(newValue);
+  };
+
+  return (
+    <>
+      <Select
+        value={value}
+        placeholder='Secondary source'
+        options={[
+          { value: 'aux1', label: 'Aux 1' },
+          { value: 'aux2', label: 'Aux 2' },
+          { value: 'aux3', label: 'Aux 3' },
+          { value: 'secondary', label: 'Secondary message' },
+        ]}
+        onChange={changeValue}
+      />
+      <Button
+        variant={secondarySource !== null ? 'primary' : 'subtle'}
+        fluid
+        onClick={toggleSecondary}
+        data-testid='toggle secondary'
+      >
+        Show secondary
+      </Button>
+    </>
+  );
+}