I've replaced the unit tests for the Rich Text Editor with end-to-end tests.

Here's a summary of the changes:
- I removed the existing unit tests for the RichTextEditor component.
- I created new end-to-end tests that cover:
    - Navigating to the cuesheet and opening an event.
    - Activating the rich text editor for the 'note' field.
    - Testing bold, link, text color, and background color functionalities.
    - Verifying that rich text formatting is saved correctly and persists after reopening an event.

This change helps ensure the RichTextEditor works as expected within the overall application.

README.md

@@ -103,12 +103,19 @@ 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/op        > automated views for operators
+IP.ADDRESS:4001/operator  > automated views for operators
 ```
 
 More information is available [in our docs](https://docs.getontime.no)

apps/client/.eslintrc

@@ -15,12 +15,10 @@
   ],
   "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,7 +4,6 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.1",
     "@chakra-ui/react": "^2.7.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
@@ -13,7 +12,9 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@fontsource/open-sans": "^5.0.28",
-    "@mantine/hooks": "^8.1.2",
+    "@lexical/react": "^0.16.1",
+    "@lexical/rich-text": "^0.16.1",
+    "@mantine/hooks": "^7.17.2",
     "@sentry/react": "^8.43.0",
     "@table-nav/react": "^0.0.7",
     "@tanstack/react-query": "^5.62.7",
@@ -21,6 +22,7 @@
     "@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",
@@ -34,7 +36,8 @@
     "react-router-dom": "^6.3.0",
     "react-simple-code-editor": "^0.14.1",
     "web-vitals": "^3.1.1",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.3",
+    "lexical": "^0.16.1"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -66,6 +69,7 @@
   "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",
@@ -77,7 +81,6 @@
     "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,19 +18,20 @@ import ViewLoader from './views/ViewLoader';
 import { ONTIME_VERSION } from './ONTIME_VERSION';
 import { sentryDsn, sentryRecommendedIgnore } from './sentry.config';
 
-const Editor = React.lazy(() => import('./views/editor/ProtectedEditor'));
+const Editor = React.lazy(() => import('./features/editors/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('./views/countdown/Countdown'));
+const Countdown = React.lazy(() => import('./features/viewers/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('./views/studio/Studio'));
+const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
 const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));
 
 const STimer = withPreset(withData(TimerView));
@@ -39,6 +40,7 @@ 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));
@@ -86,6 +88,14 @@ export default function AppRouter() {
             </ViewLoader>
           }
         />
+        <Route
+          path='/public'
+          element={
+            <ViewLoader>
+              <SPublic />
+            </ViewLoader>
+          }
+        />
         <Route
           path='/minimal'
           element={

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

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

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

@@ -8,7 +8,6 @@ export const AUTOMATION = ['automation'];
 export const CUSTOM_FIELDS = ['customFields'];
 export const PROJECT_DATA = ['project'];
 export const PROJECT_LIST = ['projectList'];
-export const PROJECT_RUNDOWNS = ['projectRundowns'];
 export const RUNDOWN = ['rundown'];
 export const RUNTIME = ['runtimeStore'];
 export const URL_PRESETS = ['urlpresets'];

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

@@ -1,45 +1,38 @@
 import axios from 'axios';
-import { CustomField, CustomFieldKey } from 'ontime-types'; // Removed CustomFields
+import { CustomField, CustomFieldKey, CustomFields } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 
-// Define CustomFieldWithKey for client-side usage
-export type CustomFieldWithKey = CustomField & { key: CustomFieldKey };
-
 const customFieldsPath = `${apiEntryUrl}/custom-fields`;
 
 /**
- * Requests list of known custom fields, sorted by order
+ * Requests list of known custom fields
  */
-export async function getCustomFields(): Promise<CustomFieldWithKey[]> {
-  const res = await axios.get<CustomFieldWithKey[]>(customFieldsPath);
+export async function getCustomFields(): Promise<CustomFields> {
+  const res = await axios.get(customFieldsPath);
   return res.data;
 }
 
 /**
  * Sets list of known custom fields
- * Returns the updated list, sorted by order
  */
-export async function postCustomField(newField: CustomField): Promise<CustomFieldWithKey[]> {
-  const res = await axios.post<CustomFieldWithKey[]>(customFieldsPath, { ...newField });
+export async function postCustomField(newField: CustomField): Promise<CustomFields> {
+  const res = await axios.post(customFieldsPath, { ...newField });
   return res.data;
 }
 
 /**
  * Edits single custom field
- * Returns the updated list, sorted by order
  */
-export async function editCustomField(key: CustomFieldKey, newField: Partial<CustomField>): Promise<CustomFieldWithKey[]> {
-  // Ensure newField can include 'order' by using Partial<CustomField>
-  const res = await axios.put<CustomFieldWithKey[]>(`${customFieldsPath}/${key}`, { ...newField });
+export async function editCustomField(key: CustomFieldKey, newField: CustomField): Promise<CustomFields> {
+  const res = await axios.put(`${customFieldsPath}/${key}`, { ...newField });
   return res.data;
 }
 
 /**
  * Deletes single custom field
- * Returns the updated list, sorted by order
  */
-export async function deleteCustomField(key: CustomFieldKey): Promise<CustomFieldWithKey[]> {
-  const res = await axios.delete<CustomFieldWithKey[]>(`${customFieldsPath}/${key}`);
+export async function deleteCustomField(key: CustomFieldKey): Promise<CustomFields> {
+  const res = await axios.delete(`${customFieldsPath}/${key}`);
   return res.data;
 }

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

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

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

@@ -1,140 +0,0 @@
-.subtle {
-  background: $gray-1050;
-  color: $blue-400;
-  line-height: 1em;
-
-  &: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;
-  }
-}
-
-.ghosted {
-  background: transparent;
-  color: $blue-500;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $blue-500;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-
-  &:disabled {
-    opacity: $opacity-disabled;
-  }
-}
-
-.ghosted-white {
-  background: transparent;
-  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 {
-    opacity: $opacity-disabled;
-  }
-}
-
-
-.ghosted-destructive {
-  background: transparent;
-  color: $red-500;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $red-500;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-
-  &:disabled {
-    opacity: $opacity-disabled;
-  }
-}

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

@@ -1,84 +0,0 @@
-@use '../../../theme/viewerDefs' as *;
-@import './BaseButtonStyles.module.scss';
-
-.baseButton {
-  position: relative;
-  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;
-  }
-
-  &.loading {
-    cursor: wait;
-    .content {
-      opacity: 0;
-    }
-  }
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  gap: inherit;
-}
-
-.loadingOverlay {
-  position: absolute;
-  display: grid;
-  place-content: center;
-}
-
-.spinner {
-  animation: spin 1s linear infinite;
-  stroke-dasharray: 8;
-}
-
-@keyframes spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.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

@@ -1,53 +0,0 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-import { IoEllipseOutline } from 'react-icons/io5';
-
-import { cx } from '../../utils/styleUtils';
-
-import style from './Button.module.scss';
-
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?:
-    | 'primary'
-    | 'subtle'
-    | 'subtle-white'
-    | 'destructive'
-    | 'subtle-destructive'
-    | 'ghosted'
-    | 'ghosted-white'
-    | 'ghosted-destructive';
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
-  fluid?: boolean;
-  loading?: boolean;
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, children, variant = 'subtle', size = 'medium', fluid, loading, ...buttonProps }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cx([
-          style.baseButton,
-          style[variant],
-          style[size],
-          fluid && style.fluid,
-          loading && style.loading,
-          className,
-        ])}
-        type='button'
-        disabled={loading || buttonProps.disabled}
-        {...buttonProps}
-      >
-        <span className={style.content}>{children}</span>
-        {loading && (
-          <div className={style.loadingOverlay}>
-            <IoEllipseOutline className={style.spinner} />
-          </div>
-        )}
-      </button>
-    );
-  },
-);
-
-Button.displayName = 'Button';
-
-export default Button;

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

@@ -1,39 +1,26 @@
-@use '../../../theme/viewerDefs' as *;
-@import './BaseButtonStyles.module.scss';
-
-.baseIconButton {
+.subtle {
   aspect-ratio: 1;
+  height: 2rem;
+  height: 2rem;
   display: grid;
   place-content: center;
 
+  background: $gray-1050;
+  color: $blue-400;
   border: 1px solid transparent;
-  border-radius: $component-border-radius-md;
+  border-radius: 3px;
 
-  cursor: pointer;
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
 
   &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
+    background: $gray-1050;
   }
 }
-
-.small {
-  height: 1.5rem;
-  font-size: calc(1rem - 3px);
-}
-
-.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,32 +4,10 @@ import { cx } from '../../utils/styleUtils';
 
 import style from './IconButton.module.scss';
 
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?:
-    | 'primary'
-    | 'subtle'
-    | 'subtle-white'
-    | 'destructive'
-    | 'subtle-destructive'
-    | 'ghosted'
-    | 'ghosted-white'
-    | 'ghosted-destructive';
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
-}
-
-export default function IconButton({
-  className,
-  children,
-  variant = 'subtle',
-  size = 'medium',
-  ...buttonProps
-}: IconButtonProps) {
+export default function IconButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { className, children, ...buttonProps } = props;
   return (
-    <button
-      className={cx([style.baseIconButton, style[variant], style[size], className])}
-      type='button'
-      {...buttonProps}
-    >
+    <button className={cx([style.subtle, className])} {...buttonProps}>
       {children}
     </button>
   );

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

@@ -1,50 +0,0 @@
-.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

@@ -1,14 +0,0 @@
-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/RedirectClientModal.tsx

@@ -1,15 +1,22 @@
 import { useState } from 'react';
 import { IoArrowForward } from 'react-icons/io5';
+import {
+  IconButton,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+} from '@chakra-ui/react';
 
 import { navigatorConstants } from '../../../viewerConfig';
 import { setClientRemote } from '../../hooks/useSocket';
 import useUrlPresets from '../../hooks-query/useUrlPresets';
-import Button from '../buttons/Button';
 import Info from '../info/Info';
-import Input from '../input/input/Input';
 import AppLink from '../link/app-link/AppLink';
-import Modal from '../modal/Modal';
-import Select from '../select/Select';
 
 import style from './RedirectClientModal.module.scss';
 
@@ -22,7 +29,8 @@ interface RedirectClientModalProps {
   onClose: () => void;
 }
 
-export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onClose }: RedirectClientModalProps) {
+export function RedirectClientModal(props: RedirectClientModalProps) {
+  const { id, isOpen, name, currentPath, origin, onClose } = props;
   const { data } = useUrlPresets();
   const [path, setPath] = useState(currentPath);
   const [selected, setSelected] = useState('/');
@@ -39,26 +47,13 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
 
   const enabledPresets = data.filter((preset) => preset.enabled);
 
-  const viewOptions = [
-    ...navigatorConstants.map((view) => ({
-      value: `/${view.url}`,
-      label: view.label,
-    })),
-    ...enabledPresets.map((preset) => ({
-      value: preset.pathAndParams,
-      label: `Preset: ${preset.alias}`,
-    })),
-  ];
-
   return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}
-      showCloseButton
-      showBackdrop
-      title={`Redirect: ${name}`}
-      bodyElements={
-        <>
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent maxWidth='max(480px, 35vw)'>
+        <ModalHeader>Redirect: {name}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
           <Info>
             Remotely redirect the client to a different URL. <br />
             Either by selecting a URL Preset or entering a custom path.
@@ -70,21 +65,36 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
             <span className={style.label}>Select View or URL Preset</span>
             <div className={style.textEntry}>
               <Select
-                fluid
-                options={viewOptions}
-                defaultValue={viewOptions[0].value}
-                onValueChange={(value) => setSelected(value)}
-                disabled={enabledPresets.length === 0}
-              />
-              <Button
-                variant='primary'
+                size='md'
+                variant='ontime'
+                isDisabled={enabledPresets.length === 0}
+                onChange={(event) => setSelected(event.target.value)}
+              >
+                <option value='/'>Select view or preset</option>
+                {navigatorConstants.map((view) => {
+                  return (
+                    <option key={view.url} value={`/${view.url}`}>
+                      {view.label}
+                    </option>
+                  );
+                })}
+                {enabledPresets.map((preset) => {
+                  return (
+                    <option key={preset.pathAndParams} value={preset.pathAndParams}>
+                      {`Preset: ${preset.alias}`}
+                    </option>
+                  );
+                })}
+              </Select>
+              <IconButton
+                variant='ontime-filled'
+                size='md'
                 aria-label='Redirect to preset'
                 className={style.redirect}
-                disabled={enabledPresets.length === 0 || selected === '/'}
+                icon={<IoArrowForward />}
+                isDisabled={enabledPresets.length === 0 || selected === '/'}
                 onClick={() => handleRedirect(selected)}
-              >
-                Redirect <IoArrowForward />
-              </Button>
+              />
             </div>
           </div>
           <div className={style.inlineEntry}>
@@ -92,24 +102,25 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
             <label className={style.textEntry}>
               {origin}
               <Input
+                variant='ontime-filled'
+                size='md'
                 placeholder='eg. /minimal?key=0000ffff'
-                fluid
                 value={path}
                 onChange={(event) => setPath(event.target.value)}
               />
             </label>
-            <Button
-              variant='primary'
+            <IconButton
+              variant='ontime-filled'
+              size='md'
               aria-label='Redirect'
-              disabled={path === currentPath || path === ''}
+              isDisabled={path === currentPath || path === ''}
               className={style.redirect}
+              icon={<IoArrowForward />}
               onClick={() => handleRedirect(path)}
-            >
-              Redirect <IoArrowForward />
-            </Button>
+            />
           </div>
-        </>
-      }
-    />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
   );
 }

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

@@ -1,9 +1,17 @@
 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;
@@ -12,7 +20,8 @@ interface RenameClientModalProps {
   onClose: () => void;
 }
 
-export function RenameClientModal({ id, name: currentName = '', isOpen, onClose }: RenameClientModalProps) {
+export function RenameClientModal(props: RenameClientModalProps) {
+  const { id, name: currentName = '', isOpen, onClose } = props;
   const [name, setName] = useState(currentName);
 
   const { setClientName } = setClientRemote;
@@ -27,24 +36,29 @@ export function RenameClientModal({ id, name: currentName = '', isOpen, onClose
   const canSubmit = name !== currentName && name !== '';
 
   return (
-    <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}>
+    <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}>
             Cancel
           </Button>
-          <Button variant='primary' size='large' onClick={handleRename} disabled={!canSubmit}>
+          <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
             Submit
           </Button>
-        </>
-      }
-    />
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   );
 }

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

@@ -1,57 +0,0 @@
-.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-1100;
-}
-
-.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

@@ -1,52 +0,0 @@
-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/icons/RotatedLink.tsx

@@ -1,6 +0,0 @@
-import { IconBaseProps } from 'react-icons';
-import { IoLink } from 'react-icons/io5';
-
-export default function RotatedLink(linkProps: IconBaseProps) {
-  return <IoLink style={{ transform: 'rotate(-45deg)' }} {...linkProps} />;
-}

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

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

apps/client/src/common/components/info/Info.module.scss

@@ -7,29 +7,15 @@
   border-radius: 3px;
   font-size: $text-body-size;
   padding: 1rem;
-  color: $gray-200;
+
+  .content {
+    color: $gray-200;
+  }
 
   svg {
     min-width: 1.5rem;
     align-self: start;
     font-size: 1.5rem;
-  }
-}
-
-.info {
-  svg {
     color: $info-blue;
   }
 }
-
-.warning {
-  svg {
-    color: $orange-500;
-  }
-}
-
-.error {
-  svg {
-    color: $red-500;
-  }
-}

apps/client/src/common/components/info/Info.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { IoAlertCircle, IoWarning } from 'react-icons/io5';
+import { IoAlertCircle } from 'react-icons/io5';
 
 import { cx } from '../../utils/styleUtils';
 
@@ -7,15 +7,14 @@ import style from './Info.module.scss';
 
 interface InfoProps {
   className?: string;
-  type?: 'info' | 'warning' | 'error';
 }
 
-export default function Info({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
+export default function Info(props: PropsWithChildren<InfoProps>) {
+  const { className, children } = props;
+
   return (
-    <div className={cx([style.infoLabel, style[type], className])}>
-      {type === 'info' && <IoAlertCircle />}
-      {type === 'warning' && <IoWarning />}
-      {type === 'error' && <IoWarning />}
+    <div className={cx([style.infoLabel, className])}>
+      <IoAlertCircle />
       <div>{children}</div>
     </div>
   );

apps/client/src/common/components/input/delay-input/DelayInput.module.scss

@@ -9,7 +9,7 @@ $input-font-size: 15px;
 
   .inputField {
     font-size: $input-font-size;
-    letter-spacing: 0.5px;
+    letter-spacing: 1px;
     max-width: 7em;
     padding-left: 16px;
     color: $ontime-delay-text

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

@@ -1,52 +0,0 @@
-.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

@@ -1,30 +0,0 @@
-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/rich-text-editor/RichTextEditor.tsx

@@ -0,0 +1,310 @@
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { TRANSFORMERS } from '@lexical/markdown';
+import { $getRoot, $getSelection, EditorState, FORMAT_TEXT_COMMAND, LexicalEditor, $isRangeSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, $createParagraphNode, $createTextNode, $patchStyleText } from 'lexical';
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { LinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { CodeNode, CodeHighlightNode } from '@lexical/code';
+import { TableNode, TableCellNode, TableRowNode } from '@lexical/table';
+
+// Define initial editor configuration
+const editorConfig = {
+  namespace: 'MyEditor',
+  theme: {
+    ltr: 'ltr',
+    rtl: 'rtl',
+    placeholder: 'editor-placeholder',
+    paragraph: 'editor-paragraph',
+    quote: 'editor-quote',
+    heading: {
+      h1: 'editor-heading-h1',
+      h2: 'editor-heading-h2',
+      h3: 'editor-heading-h3',
+      h4: 'editor-heading-h4',
+      h5: 'editor-heading-h5',
+    },
+    list: {
+      nested: {
+        listitem: 'editor-nested-listitem',
+      },
+      ol: 'editor-list-ol',
+      ul: 'editor-list-ul',
+      listitem: 'editor-listitem',
+    },
+    link: 'editor-link',
+    text: {
+      bold: 'editor-text-bold',
+      italic: 'editor-text-italic',
+      underline: 'editor-text-underline',
+      strikethrough: 'editor-text-strikethrough',
+      underlineStrikethrough: 'editor-text-underlineStrikethrough',
+      code: 'editor-text-code',
+    },
+    code: 'editor-code',
+    codeHighlight: {
+      atrule: 'editor-tokenAttr',
+      attr: 'editor-tokenAttr',
+      boolean: 'editor-tokenProperty',
+      builtin: 'editor-tokenSelector',
+      cdata: 'editor-tokenComment',
+      char: 'editor-tokenSelector',
+      clike: 'editor-tokenComment',
+      comment: 'editor-tokenComment',
+      contentType: 'editor-tokenComment',
+      coord: 'editor-tokenComment',
+      deleted: 'editor-tokenProperty',
+      doctype: 'editor-tokenComment',
+      doi: 'editor-tokenComment',
+      entity: 'editor-tokenOperator',
+      function: 'editor-tokenFunction',
+      important: 'editor-tokenVariable',
+      inserted: 'editor-tokenSelector',
+      keyword: 'editor-tokenAttr',
+      markup: 'editor-tokenComment',
+      merged: 'editor-tokenComment',
+      namespace: 'editor-tokenVariable',
+      number: 'editor-tokenProperty',
+      operator: 'editor-tokenOperator',
+      prolog: 'editor-tokenComment',
+      property: 'editor-tokenProperty',
+      punctuation: 'editor-tokenPunctuation',
+      regex: 'editor-tokenVariable',
+      selector: 'editor-tokenSelector',
+      string: 'editor-tokenSelector',
+      style: 'editor-tokenComment',
+      symbol: 'editor-tokenProperty',
+      tag: 'editor-tokenProperty',
+      url: 'editor-tokenOperator',
+      variable: 'editor-tokenVariable',
+    },
+  },
+  onError(error: Error) {
+    throw error;
+  },
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    LinkNode,
+  ],
+};
+
+interface RichTextEditorProps {
+  initialValue?: string;
+  onChange?: (value: string) => void;
+}
+
+export default function RichTextEditor({ initialValue, onChange }: RichTextEditorProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const editorRef = useRef<LexicalEditor | null>(null); // Use ref for editor instance
+  const editorWrapperRef = useRef<HTMLDivElement>(null); // Ref for the entire editor + toolbar wrapper
+
+  const handleEditorFocus = () => {
+    setIsFocused(true);
+  };
+
+  // This handleBlur is for the wrapper around the editor and toolbar
+  const handleWrapperBlur = (event: React.FocusEvent<HTMLDivElement>) => {
+    // Check if the new focused element is still within the editor wrapper
+    if (editorWrapperRef.current && !editorWrapperRef.current.contains(event.relatedTarget as Node)) {
+      setIsFocused(false);
+    }
+  };
+
+  const handleChange = useCallback((editorState: EditorState) => {
+    if (onChange) {
+      editorState.read(() => {
+        const root = $getRoot();
+        // For now, sending plain text. Could be HTML or Lexical's format.
+        onChange(root.getTextContent());
+      });
+    }
+  }, [onChange]);
+
+  // Placeholder for initial value loading
+  useEffect(() => {
+    const currentEditor = editorRef.current;
+    if (currentEditor && initialValue && isFocused) { // only update if focused and has initial value
+      currentEditor.update(() => {
+        const root = $getRoot();
+        root.clear();
+        const paragraph = $createParagraphNode();
+        paragraph.append($createTextNode(initialValue));
+        root.append(paragraph);
+        root.selectEnd(); // Move cursor to the end
+      });
+    }
+  }, [initialValue, isFocused]); // Rerun when isFocused changes or initialValue changes (though initialValue should be stable)
+
+
+  if (!isFocused) {
+    return (
+      <div
+        onClick={handleEditorFocus}
+        onFocus={handleEditorFocus}
+        tabIndex={0}
+        style={{ border: '1px solid #ccc', padding: '10px', minHeight: '50px', cursor: 'text' }}
+        role="textbox" // for accessibility
+        aria-placeholder="Click to edit..."
+      >
+        {initialValue || 'Click to edit...'}
+      </div>
+    );
+  }
+
+  // Prepare initial config for when the editor mounts
+  const localEditorConfig = {
+    ...editorConfig,
+    editorState: initialValue && !editorRef.current // Only set initial state if editor hasn't been initialized yet with a value
+      ? () => {
+          const root = $getRoot();
+          const paragraph = $createParagraphNode();
+          paragraph.append($createTextNode(initialValue));
+          root.append(paragraph);
+        }
+      : undefined,
+  };
+
+  return (
+    <div ref={editorWrapperRef} onBlur={handleWrapperBlur} tabIndex={-1} style={{ border: '1px solid #ccc', position: 'relative', marginTop: '5px' }}>
+      <LexicalComposer initialConfig={localEditorConfig}>
+        <EditorInitializer editorRef={editorRef} />
+        <ToolbarPlugin />
+        <div style={{position: 'relative'}}> {/* Container for ContentEditable and Placeholder */}
+          <RichTextPlugin
+            contentEditable={<ContentEditable style={{ minHeight: '150px', padding: '10px', outline: 'none', resize: 'vertical', userSelect: 'text' }} />}
+            placeholder={<div style={{ position: 'absolute', top: '10px', left: '10px', color: '#aaa', pointerEvents: 'none', userSelect: 'none' }}>Enter text...</div>}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+        </div>
+        <HistoryPlugin />
+        <OnChangePlugin onChange={handleChange} />
+        <LinkPlugin /> {/* LinkPlugin provides TOGGLE_LINK_COMMAND */}
+        <ListPlugin />
+        <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+      </LexicalComposer>
+    </div>
+  );
+}
+
+// Helper component to get editor instance and attach it to a ref
+function EditorInitializer({ editorRef }: { editorRef: React.MutableRefObject<LexicalEditor | null> }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    editorRef.current = editor;
+    return () => {
+      editorRef.current = null;
+    };
+  }, [editor, editorRef]);
+  return null;
+}
+
+
+function ToolbarPlugin() {
+  const [editor] = useLexicalComposerContext();
+  const [isLink, setIsLink] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  // Add states for other formats if needed, e.g., selectedTextColor, selectedBgColor
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      setIsBold(selection.hasFormat('bold'));
+      // Update link state
+      const node = selection.anchor.getNode();
+      const parent = node.getParent();
+      setIsLink(parent?.getType() === 'link' || node.getType() === 'link');
+      // Could also get current text color/bg color here if needed
+      // const style = selection.style;
+      // setSelectedTextColor(style.color);
+      // setSelectedBgColor(style.backgroundColor);
+    }
+  }, [editor]); // editor dependency is implicit via useLexicalComposerContext
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateToolbar();
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      // Potentially other listeners here, e.g., for text format changes
+    );
+  }, [editor, updateToolbar]);
+
+
+  const toggleBold = () => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+  };
+
+  const toggleLink = useCallback(() => {
+    if (isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null); // Remove link
+    } else {
+      const url = prompt('Enter link URL:');
+      if (url) {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+      }
+    }
+  }, [editor, isLink]);
+
+  return (
+    <div style={{ padding: '8px', borderBottom: '1px solid #ccc', display: 'flex', gap: '8px', userSelect: 'none' }}
+      onMouseDown={(e) => e.preventDefault()} // Prevent editor blur when clicking toolbar
+    >
+      <button onClick={toggleBold} style={{ fontWeight: isBold ? 'bold' : 'normal' }}>B</button>
+      <button onClick={toggleLink} style={{ fontWeight: isLink ? 'bold' : 'normal' }}>{isLink ? 'Unlink' : 'Link'}</button>
+      <button onClick={applyTextColor}>Color</button>
+      <button onClick={applyBackgroundColor}>BG Color</button>
+      {/* Add more buttons here */}
+    </div>
+  );
+}
+
+function applyStyleToSelection(editor: LexicalEditor, styleKey: string, styleValue: string) {
+  editor.update(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      $patchStyleText(selection, { [styleKey]: styleValue });
+    }
+  });
+}
+
+function applyTextColor() {
+  const [editor] = useLexicalComposerContext();
+  const color = prompt('Enter text color (e.g., red, #FF0000):');
+  if (color) {
+    applyStyleToSelection(editor, 'color', color);
+  }
+}
+
+function applyBackgroundColor() {
+  const [editor] = useLexicalComposerContext();
+  const color = prompt('Enter background color (e.g., yellow, #FFFF00):');
+  if (color) {
+    // For background color, Lexical often uses 'highlight' format or direct background-color style
+    // Using FORMAT_TEXT_COMMAND for 'highlight' might be one way if a plugin handles it.
+    // Or, apply direct style:
+    applyStyleToSelection(editor, 'background-color', color);
+  }
+}

apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
 import { getHotkeyHandler, HotkeyItem } from '@mantine/hooks';
 
 interface UseReactiveTextInputReturn {
@@ -21,8 +21,6 @@ export default function useReactiveTextInput(
   },
 ): UseReactiveTextInputReturn {
   const [text, setText] = useState<string>(initialText);
-  // track whether we are submitting via a submit key (eg enter) and avoid submitting again on blur
-  const isKeyboardSubmitting = useRef(false);
 
   useEffect(() => {
     if (typeof initialText === 'undefined') {
@@ -101,25 +99,11 @@ export default function useReactiveTextInput(
     ];
 
     if (options?.submitOnEnter) {
-      hotKeys.push(['Enter', () => {
-        isKeyboardSubmitting.current = true;
-        handleSubmit(text);
-        // clear flag after blur has been processed
-        setTimeout(() => {
-          isKeyboardSubmitting.current = false;
-        }, 0);
-      }]);
+      hotKeys.push(['Enter', () => handleSubmit(text)]);
     }
 
     if (options?.submitOnCtrlEnter) {
-      hotKeys.push(['mod + Enter', () => {
-        isKeyboardSubmitting.current = true;
-        handleSubmit(text);
-        // clear flag after blur has been processed
-        setTimeout(() => {
-          isKeyboardSubmitting.current = false;
-        }, 0);
-      }]);
+      hotKeys.push(['mod + Enter', () => handleSubmit(text)]);
     }
 
     const hotKeyHandler = getHotkeyHandler(hotKeys);
@@ -142,11 +126,7 @@ export default function useReactiveTextInput(
   return {
     value: text,
     onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
-    onBlur: (event: ChangeEvent) => {
-      if (!isKeyboardSubmitting.current) {
-        handleSubmit((event.target as HTMLInputElement).value);
-      }
-    },
+    onBlur: (event: ChangeEvent) => handleSubmit((event.target as HTMLInputElement).value),
     onKeyDown: keyHandler,
   };
 }

apps/client/src/common/components/input/textarea/Textarea.module.scss

@@ -1,47 +0,0 @@
-@use '../../../../theme/viewerDefs' as *;
-
-.textarea {
-  box-sizing: border-box;
-
-  display: block;
-  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;
-}
-
-.fluid {
-  width: 100%;
-}

apps/client/src/common/components/input/textarea/Textarea.tsx

@@ -1,31 +0,0 @@
-import { forwardRef, TextareaHTMLAttributes } from 'react';
-
-import { cx } from '../../../utils/styleUtils';
-
-import style from './Textarea.module.scss';
-
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  variant?: 'subtle' | 'ghosted';
-  fluid?: boolean;
-  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
-}
-
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function TextArea(
-  { className, variant = 'subtle', fluid, rows = 5, resize = 'none', style: customStyle, ...textareaProps },
-  ref,
-) {
-  return (
-    <textarea
-      ref={ref}
-      autoCorrect='off'
-      autoComplete='off'
-      spellCheck='false'
-      rows={rows}
-      style={{ ...customStyle, resize }}
-      className={cx([style.textarea, style[variant], fluid && style.fluid, className])}
-      {...textareaProps}
-    />
-  );
-});
-
-export default Textarea;

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

@@ -1,135 +0,0 @@
-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,6 +1,4 @@
 .timeInput {
-  width: 100%;
-  max-width: 7.5em;
-  letter-spacing: 0.5px;
-  font-variant-numeric: tabular-nums;
+    letter-spacing: 1px;
+    width: 6.5em;
 }

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

@@ -1,24 +1,23 @@
 import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { Input } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';
 
-import { cx } from '../../../utils/styleUtils';
-import Input from '../input/Input';
-
-import style from './TimeInput.module.scss';
+import { useEmitLog } from '../../../stores/logger';
 
 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, placeholder, disabled, align = 'center', className } = props;
+  const { id, name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
+  const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
   const ignoreChange = useRef(false);
@@ -27,12 +26,13 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
    * @description Resets input value to given
    */
   const resetValue = useCallback(() => {
-    if (typeof time !== 'number' || isNaN(time)) {
-      setValue('00:00:00');
-    } else {
+    try {
       setValue(millisToString(time));
+    } catch (error) {
+      setValue(millisToString(0));
+      emitError(`Unable to parse time ${time}: ${error}`);
     }
-  }, [time]);
+  }, [emitError, time]);
 
   /**
    * @description Selects input text on focus
@@ -113,27 +113,32 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
   );
 
   useEffect(() => {
+    if (time == null) return;
     resetValue();
-  }, [resetValue]);
+  }, [resetValue, time]);
 
   return (
     <Input
       id={id}
       disabled={disabled}
+      size='sm'
       ref={inputRef}
       data-testid={`time-input-${name}`}
-      className={cx([style.timeInput, className])}
+      className={className}
+      fontSize='1rem'
+      type='text'
       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'
-      style={{
-        textAlign: align,
-      }}
+      textAlign={align}
     />
   );
 }

apps/client/src/common/components/modal/Modal.module.scss

@@ -1,56 +0,0 @@
-.modal {
-  position: fixed;
-  top: 10vh;
-  left: 50%;
-  transform: translateX(-50%);
-  
-  padding-inline: 1rem;
-  min-width: min(680px, 90vw);
-  min-height: min(200px, 10vh);
-  max-width: min(680px, 90vw);
-
-  background-color: $gray-1250;
-  color: $ui-white;
-  border-radius: 3px;
-  box-shadow: $box-shadow-l1;
-  border: 1px solid $gray-1100;
-}
-
-.backdrop {
-  position: fixed;
-  inset: 0;
-  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: 60vh;
-  overflow-y: auto;
-}
-
-.footer {
-  padding-block: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  gap: 1rem;
-}

apps/client/src/common/components/modal/Modal.tsx

@@ -1,53 +0,0 @@
-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 './Modal.module.scss';
-
-interface ModalProps {
-  isOpen: boolean;
-  title?: string;
-  showCloseButton?: boolean;
-  showBackdrop?: boolean;
-  bodyElements: ReactNode;
-  footerElements?: ReactNode;
-  onClose: () => void;
-}
-
-export default function Modal({
-  isOpen,
-  title,
-  showCloseButton,
-  showBackdrop,
-  bodyElements,
-  footerElements,
-  onClose,
-}: ModalProps) {
-  return (
-    <BaseDialog.Root
-      open={isOpen}
-      onOpenChange={(isOpen) => {
-        if (!isOpen) onClose();
-      }}
-      dismissible={false}
-    >
-      <BaseDialog.Portal>
-        {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
-        <BaseDialog.Popup className={style.modal}>
-          <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/navigation-menu/FloatingNavigation.tsx

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

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

@@ -1,20 +1,29 @@
-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 { 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 { 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 IconButton from '../buttons/IconButton';
+import { isKeyEnter } from '../../utils/keyEvent';
+import { handleLinks, linkToOtherHost, openLink } from '../../utils/linkUtils';
+import { cx } from '../../utils/styleUtils';
 import { RenameClientModal } from '../client-modal/RenameClientModal';
-
-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 CopyTag from '../copy-tag/CopyTag';
 
 import style from './NavigationMenu.module.scss';
 
@@ -23,49 +32,74 @@ interface NavigationMenuProps {
   onClose: () => void;
 }
 
-export default memo(NavigationMenu);
-function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
+function NavigationMenu(props: NavigationMenuProps) {
+  const { isOpen, onClose } = props;
+
   const id = useClientStore((store) => store.id);
   const name = useClientStore((store) => store.name);
 
-  const [isRenameOpen, handlers] = useDisclosure(false);
+  const { isOpen: isOpenRename, onOpen: onRenameOpen, onClose: onCloseRename } = useDisclosure();
   const { fullscreen, toggle } = useFullscreen();
   const { mirror, toggleMirror } = useViewOptionsStore();
   const location = useLocation();
 
-  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>
-
+  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>
             <hr className={style.separator} />
-
-            <EditorNavigation />
+            <Link
+              to='/editor'
+              tabIndex={0}
+              className={`${style.link} ${location.pathname === '/editor' && style.current}`}
+            >
+              <IoLockClosedOutline />
+              Editor
+            </Link>
             <ClientLink to='cuesheet' current={location.pathname === '/cuesheet'}>
               <IoLockClosedOutline />
               Cuesheet
@@ -74,23 +108,86 @@ function NavigationMenu({ isOpen, onClose }: 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>
             ))}
-          </div>
-
-          {isLocalhost && (
-            <div>
-              <OtherAddresses currentLocation={location.pathname} />
-            </div>
-          )}
-        </Dialog.Popup>
-      </Dialog.Portal>
-    </Dialog.Root>
+            {isLocalhost && <OtherAddresses currentLocation={location.pathname} />}
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </div>,
+    document.body,
   );
 }
+
+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/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 './ViewLockedIcon.module.scss';
+import style from './NavigationMenu.module.scss';
 
 export default function ViewLockedIcon() {
   const isLockIconShown = useFadeOutOnInactivity();

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

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

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

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

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

@@ -1,34 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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 isSmallDevice = useIsSmallDevice();
-
-  if (!isSmallDevice) {
-    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

@@ -1,23 +0,0 @@
-.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

@@ -1,45 +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 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

@@ -1,37 +0,0 @@
-.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

@@ -1,33 +0,0 @@
-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

@@ -1,18 +0,0 @@
-.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

@@ -1,46 +0,0 @@
-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

@@ -1,22 +0,0 @@
-.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/playback-icon/PlaybackIcon.tsx

@@ -0,0 +1,40 @@
+import { IoPause, IoPlay, IoStop } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/react';
+import { Playback } from 'ontime-types';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+
+interface PlaybackIconProps {
+  state: Playback;
+  skipTooltip?: boolean;
+  className?: string;
+}
+
+export default function PlaybackIcon(props: PlaybackIconProps) {
+  const { state, skipTooltip, className } = props;
+
+  // if timer is Pause or Armed
+  let label = 'Timer Paused';
+  let Icon = IoPause;
+
+  if (state === Playback.Roll) {
+    label = 'Timer Rolling';
+    Icon = IoPlay;
+  } else if (state === Playback.Play) {
+    label = 'Timer Playing';
+    Icon = IoPlay;
+  } else if (state === Playback.Stop) {
+    label = 'Timer Stopped';
+    Icon = IoStop;
+  }
+
+  if (skipTooltip) {
+    return <Icon className={className} />;
+  }
+
+  return (
+    <Tooltip openDelay={tooltipDelayFast} label={label} shouldWrapChildren>
+      <Icon className={className} />
+    </Tooltip>
+  );
+}

apps/client/src/common/components/popover/Popover.module.scss

@@ -1,32 +0,0 @@
-.popup {
-  box-sizing: border-box;
-  padding: 1rem 1.5rem;
-  z-index: $zindex-dialog;
-
-  color: $ui-white;
-  background-color: $gray-1250;
-
-  border-radius: 3px;  
-  box-shadow: $box-shadow-l1;
-  border: 2px solid $gray-1200;
-
-  //width: 32rem;
-  max-width: 90vw;
-
-  transform-origin: var(--transform-origin);
-  transition:
-    transform 150ms,
-    opacity 150ms;
-
-  &[data-starting-style],
-  &[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-}
-
-.title {
-  font-size: 1rem;
-  margin-bottom: 0.5rem;
-}
-

apps/client/src/common/components/popover/Popover.tsx

@@ -1,26 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { Popover } from '@base-ui-components/react/popover';
-
-import style from './Popover.module.scss';
-
-interface PopoverContentsProps extends Popover.Positioner.Props {
-  title?: string;
-  className?: string;
-}
-export default function PopoverContents({
-  title,
-  className,
-  children,
-  ...popoverProps
-}: PropsWithChildren<PopoverContentsProps>) {
-  return (
-    <Popover.Portal>
-      <Popover.Positioner sideOffset={8} {...popoverProps}>
-        <Popover.Popup className={style.popup}>
-          {title && <Popover.Title className={style.title}>{title}</Popover.Title>}
-          <Popover.Description className={className}>{children}</Popover.Description>
-        </Popover.Popup>
-      </Popover.Positioner>
-    </Popover.Portal>
-  );
-}

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

@@ -1,132 +0,0 @@
-.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([data-disabled]) {
-    background-color: $gray-1100;
-  }
-
-  &:active:not([data-disabled]) {
-    background-color: $gray-1000;
-  }
-
-  &[data-popup-open] {
-    background-color: $gray-1000;
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.fluid {
-    width: 100%;
-  }
-}
-
-.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

@@ -1,45 +0,0 @@
-import { IoCheckmark } from 'react-icons/io5';
-import { LuChevronsUpDown } from 'react-icons/lu';
-import { Select as BaseSelect } from '@base-ui-components/react/select';
-
-import { cx } from '../../utils/styleUtils';
-
-import styles from './Select.module.scss';
-
-interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
-  // overload items to not allow undefined values
-  options: {
-    value: T;
-    label: string;
-  }[];
-  fluid?: boolean;
-}
-
-export default function Select<T>({ options, fluid, ...selectRootProps }: SelectProps<T>) {
-  return (
-    <BaseSelect.Root items={options} {...selectRootProps}>
-      <BaseSelect.Trigger className={cx([styles.select, fluid && styles.fluid])}>
-        <BaseSelect.Value />
-        <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(({ label, value }) => (
-              <BaseSelect.Item key={String(value)} className={styles.item} value={value}>
-                <BaseSelect.ItemIndicator className={styles.itemIndicator}>
-                  <IoCheckmark className={styles.itemIndicatorIcon} />
-                </BaseSelect.ItemIndicator>
-                <BaseSelect.ItemText className={styles.itemLabel}>{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

@@ -1,52 +0,0 @@
-.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

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

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

@@ -8,82 +8,12 @@
   }
 }
 
-.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-1100;
-
-  &[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,51 +1,117 @@
-import { FormEvent, memo, useEffect } from 'react';
-import { IoClose } from 'react-icons/io5';
+import { FormEvent, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { Dialog } from '@base-ui-components/react/dialog';
-import { useDisclosure } from '@mantine/hooks';
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
 
 import useViewSettings from '../../hooks-query/useViewSettings';
-import Button from '../buttons/Button';
-import IconButton from '../buttons/IconButton';
 import Info from '../info/Info';
 
-import { ViewOption } from './viewParams.types';
-import { getURLSearchParamsFromObj } from './viewParams.utils';
+import { ViewOption } from './types';
 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[];
 }
 
-export default memo(ViewParamsEditor);
-
-function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
+// TODO: this is a good candidate for memoisation, but needs the paramFields to be stable
+export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   const [searchParams, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
 
-  const [isOpen, handlers] = useDisclosure(false);
+  const { isOpen, onClose, onOpen } = useDisclosure();
 
-  // handle opening the drawer
   useEffect(() => {
     const isEditing = searchParams.get('edit');
 
     if (isEditing === 'true') {
-      return handlers.open();
+      return onOpen();
     }
-  }, [searchParams, handlers]);
+  }, [searchParams, onOpen]);
 
   const handleClose = () => {
     searchParams.delete('edit');
     setSearchParams(searchParams);
 
-    handlers.close();
+    onClose();
   };
 
   const resetParams = () => {
     setSearchParams();
-    handlers.close();
+    onClose();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -57,48 +123,39 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
   };
 
   return (
-    <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>
+    <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>
   );
 }

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

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

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

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

@@ -0,0 +1,45 @@
+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

@@ -1,204 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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,6 +1,61 @@
-/**
- * Gathers possible titles for view options
- */
+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,
+};
+
 export enum OptionTitle {
   ClockOptions = 'Clock Options',
   TimerOptions = 'Timer Options',
@@ -10,7 +65,4 @@ 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/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[]; values: string[] };
+type PersistedField = { type: 'persist'; defaultValue?: string; value: string };
 
 export type ParamField = BaseField &
   (OptionsField | MultiOptionsField | StringField | NumberField | BooleanField | ColourField | PersistedField);

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

@@ -1,144 +0,0 @@
-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/useCustomFields.ts

@@ -1,17 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
-// CustomFields record type is no longer used here
+import { CustomFields } from 'ontime-types';
+
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { CUSTOM_FIELDS } from '../api/constants';
-import { getCustomFields, CustomFieldWithKey } from '../api/customFields'; // Import CustomFieldWithKey
+import { getCustomFields } from '../api/customFields';
 
-const placeholder: CustomFieldWithKey[] = []; // Placeholder is now an empty array
+const placeholder: CustomFields = {};
 
 export default function useCustomFields() {
-  // Explicitly type the useQuery hook
-  const { data, status, isFetching, isError, refetch } = useQuery<CustomFieldWithKey[], Error>({
+  const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: CUSTOM_FIELDS,
     queryFn: getCustomFields,
-    placeholderData: (previousData, _previousQuery) => previousData ?? placeholder,
+    placeholderData: (previousData, _previousQuery) => previousData,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,

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

@@ -1,22 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { ProjectRundownsList } from 'ontime-types';
-
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { PROJECT_RUNDOWNS } from '../api/constants';
-import { fetchProjectRundownList } from '../api/rundown';
-
-/**
- * Project rundowns
- */
-export function useProjectRundowns() {
-  const { data, status, isError, refetch, isFetching } = useQuery<ProjectRundownsList>({
-    queryKey: PROJECT_RUNDOWNS,
-    queryFn: fetchProjectRundownList,
-    placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
-    refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
-  });
-  return { data: data ?? { loaded: '', rundowns: [] }, status, isError, refetch, isFetching };
-}

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.flatOrder.map((id) => data.entries[id]);
+      const flatRundown = data.order.map((id) => data.entries[id]);
       setFlatRundown(flatRundown);
       setPrevRevision(data.revision);
     }
-  }, [data.entries, data.flatOrder, data.revision, prevRevision]);
+  }, [data.entries, data.order, data.revision, prevRevision]);
 
   // TODO: should we have a project id field?
   // invalidate current version if project changes

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

@@ -4,11 +4,7 @@ import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { URL_PRESETS } from '../api/constants';
 import { getUrlPresets } from '../api/urlPresets';
 
-interface FetchProps {
-  skip?: boolean;
-}
-
-export default function useUrlPresets({ skip = false }: FetchProps = {}) {
+export default function useUrlPresets() {
   const { data, status, isError, refetch } = useQuery({
     queryKey: URL_PRESETS,
     queryFn: getUrlPresets,
@@ -17,7 +13,6 @@ export default function useUrlPresets({ skip = false }: FetchProps = {}) {
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
     networkMode: 'always',
-    enabled: !skip,
   });
 
   return { data: data ?? [], status, isError, refetch };

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

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

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

@@ -1,10 +1,9 @@
 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 { sendSocket } from '../utils/socket';
+import { socketSendJson } from '../utils/socket';
 
 import { useIsOnline } from './useSocket';
 
@@ -23,7 +22,7 @@ export const useClientPath = () => {
   useEffect(() => {
     if (!isOnline) return;
 
-    sendSocket(MessageTag.ClientSetPath, pathname + search);
+    socketSendJson('set-client-path', pathname + search);
   }, [pathname, search, isOnline]);
 
   // navigate to new path when received from server

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

@@ -36,10 +36,11 @@ import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
 
 export type EventOptions = Partial<{
-  // options of any new entries (event / delay / block)
+  // options to any new block (event / delay / block)
   after: MaybeString;
   before: MaybeString;
-  // options of entries of type OntimeEvent
+  // options to blocks of type OntimeEvent
+  defaultPublic: boolean;
   linkPrevious: boolean;
   lastEventId: MaybeString;
 }>;
@@ -50,6 +51,7 @@ export type EventOptions = Partial<{
 export const useEntryActions = () => {
   const queryClient = useQueryClient();
   const {
+    defaultPublic,
     linkPrevious,
     defaultTimeStrategy,
     defaultDuration,
@@ -74,7 +76,7 @@ export const useEntryActions = () => {
    * Calls mutation to add new entry
    * @private
    */
-  const { mutateAsync: addEntryMutation } = useMutation({
+  const _addEntryMutation = useMutation({
     // TODO(v4): optimistic create entry
     mutationFn: postAddEntry,
     onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
@@ -93,6 +95,7 @@ export const useEntryActions = () => {
         const applicationOptions = {
           after: options?.after,
           before: options?.before,
+          defaultPublic: options?.defaultPublic ?? defaultPublic,
           lastEventId: options?.lastEventId,
           linkPrevious: options?.linkPrevious ?? linkPrevious,
         };
@@ -108,6 +111,7 @@ 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);
@@ -143,16 +147,17 @@ export const useEntryActions = () => {
       }
 
       try {
-        await addEntryMutation(newEntry);
+        await _addEntryMutation.mutateAsync(newEntry);
       } catch (error) {
         logAxiosError('Failed adding event', error);
       }
     },
     [
-      addEntryMutation,
+      _addEntryMutation,
       defaultDangerTime,
       defaultDuration,
       defaultEndAction,
+      defaultPublic,
       defaultTimerType,
       defaultTimeStrategy,
       defaultWarnTime,
@@ -165,7 +170,7 @@ export const useEntryActions = () => {
    * Calls mutation to clone a selection
    * @private
    */
-  const { mutateAsync: cloneEntryMutation } = useMutation({
+  const _cloneMutation = useMutation({
     mutationFn: postCloneEntry,
     onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
   });
@@ -176,19 +181,19 @@ export const useEntryActions = () => {
   const clone = useCallback(
     async (entryId: EntryId) => {
       try {
-        await cloneEntryMutation(entryId);
+        await _cloneMutation.mutateAsync(entryId);
       } catch (error) {
         logAxiosError('Error cloning entry', error);
       }
     },
-    [cloneEntryMutation],
+    [_cloneMutation],
   );
 
   /**
    * Calls mutation to update existing entry
    * @private
    */
-  const { mutateAsync: updateEntryMutation } = useMutation({
+  const _updateEntryMutation = useMutation({
     mutationFn: putEditEntry,
     // we optimistically update here
     onMutate: async (newEvent) => {
@@ -234,12 +239,12 @@ export const useEntryActions = () => {
   const updateEntry = useCallback(
     async (event: Partial<OntimeEntry>) => {
       try {
-        await updateEntryMutation(event);
+        await _updateEntryMutation.mutateAsync(event);
       } catch (error) {
         logAxiosError('Error updating event', error);
       }
     },
-    [updateEntryMutation],
+    [_updateEntryMutation],
   );
 
   const updateCustomField = useCallback(
@@ -287,7 +292,7 @@ export const useEntryActions = () => {
       }
 
       try {
-        await updateEntryMutation(newEvent);
+        await _updateEntryMutation.mutateAsync(newEvent);
       } catch (error) {
         logAxiosError('Error updating event', error);
       }
@@ -339,14 +344,14 @@ export const useEntryActions = () => {
         return previousEnd;
       }
     },
-    [updateEntryMutation, queryClient],
+    [_updateEntryMutation, queryClient],
   );
 
   /**
    * Calls mutation to edit multiple events
    * @private
    */
-  const { mutateAsync: batchUpdateEventsMutation } = useMutation({
+  const _batchUpdateEventsMutation = useMutation({
     mutationFn: putBatchEditEvents,
     onMutate: async ({ ids, data }) => {
       // cancel ongoing queries
@@ -405,19 +410,19 @@ export const useEntryActions = () => {
   const batchUpdateEvents = useCallback(
     async (data: Partial<OntimeEvent>, eventIds: string[]) => {
       try {
-        await batchUpdateEventsMutation({ ids: eventIds, data });
+        await _batchUpdateEventsMutation.mutateAsync({ ids: eventIds, data });
       } catch (error) {
         logAxiosError('Error updating events', error);
       }
     },
-    [batchUpdateEventsMutation],
+    [_batchUpdateEventsMutation],
   );
 
   /**
    * Calls mutation to delete an entry
    * @private
    */
-  const { mutateAsync: deleteEntryMutation } = useMutation({
+  const _deleteEntryMutation = useMutation({
     mutationFn: deleteEntries,
     // we optimistically update here
     onMutate: async (entryIds: EntryId[]) => {
@@ -462,19 +467,19 @@ export const useEntryActions = () => {
   const deleteEntry = useCallback(
     async (entryIds: EntryId[]) => {
       try {
-        await deleteEntryMutation(entryIds);
+        await _deleteEntryMutation.mutateAsync(entryIds);
       } catch (error) {
         logAxiosError('Error deleting event', error);
       }
     },
-    [deleteEntryMutation],
+    [_deleteEntryMutation],
   );
 
   /**
    * Calls mutation to delete all events
    * @private
    */
-  const { mutateAsync: deleteAllEntriesMutation } = useMutation({
+  const _deleteAllEntriesMutation = useMutation({
     mutationFn: requestDeleteAll,
     // we optimistically update here
     onMutate: async () => {
@@ -514,17 +519,17 @@ export const useEntryActions = () => {
    */
   const deleteAllEntries = useCallback(async () => {
     try {
-      await deleteAllEntriesMutation();
+      await _deleteAllEntriesMutation.mutateAsync();
     } catch (error) {
       logAxiosError('Error deleting events', error);
     }
-  }, [deleteAllEntriesMutation]);
+  }, [_deleteAllEntriesMutation]);
 
   /**
    * Calls mutation to apply a delay
    * @private
    */
-  const { mutateAsync: applyDelayMutation } = useMutation({
+  const _applyDelayMutation = useMutation({
     mutationFn: requestApplyDelay,
     onSuccess: (response) => {
       if (!response.data) return;
@@ -551,19 +556,19 @@ export const useEntryActions = () => {
   const applyDelay = useCallback(
     async (delayEventId: EntryId) => {
       try {
-        await applyDelayMutation(delayEventId);
+        await _applyDelayMutation.mutateAsync(delayEventId);
       } catch (error) {
         logAxiosError('Error applying delay', error);
       }
     },
-    [applyDelayMutation],
+    [_applyDelayMutation],
   );
 
   /**
    * Calls mutation to dissolve a block
    * @private
    */
-  const { mutateAsync: ungroupMutation } = useMutation({
+  const _ungroupMutation = useMutation({
     mutationFn: requestUngroup,
     onSuccess: (response) => {
       if (!response.data) return;
@@ -587,19 +592,19 @@ export const useEntryActions = () => {
   const ungroup = useCallback(
     async (blockId: EntryId) => {
       try {
-        await ungroupMutation(blockId);
+        await _ungroupMutation.mutateAsync(blockId);
       } catch (error) {
         logAxiosError('Error dissolving block', error);
       }
     },
-    [ungroupMutation],
+    [_ungroupMutation],
   );
 
   /**
    * Calls mutation to create a block with a selection
    * @private
    */
-  const { mutateAsync: groupEntriesMutation } = useMutation({
+  const _groupEntriesMutation = useMutation({
     mutationFn: requestGroupEntries,
     onSuccess: (response) => {
       if (!response.data) return;
@@ -623,19 +628,19 @@ export const useEntryActions = () => {
   const groupEntries = useCallback(
     async (entryIds: EntryId[]) => {
       try {
-        await groupEntriesMutation(entryIds);
+        await _groupEntriesMutation.mutateAsync(entryIds);
       } catch (error) {
         logAxiosError('Error grouping entries', error);
       }
     },
-    [groupEntriesMutation],
+    [_groupEntriesMutation],
   );
 
   /**
    * Calls mutation to reorder an entry
    * @private
    */
-  const { mutateAsync: reorderEntryMutation } = useMutation({
+  const _reorderEntryMutation = useMutation({
     mutationFn: patchReorderEntry,
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
@@ -644,40 +649,6 @@ export const useEntryActions = () => {
     },
   });
 
-  /**
-   * Reorders a given entry one step up or down in the timeline
-   */
-  const move = useCallback(
-    async (entryId: EntryId, direction: 'up' | 'down') => {
-      const rundown = queryClient.getQueryData<Rundown>(RUNDOWN);
-      if (!rundown) {
-        return;
-      }
-
-      const { destinationId, order } =
-        direction === 'up'
-          ? moveUp(entryId, rundown.flatOrder, rundown.entries)
-          : moveDown(entryId, rundown.flatOrder, rundown.entries);
-
-      if (!destinationId) {
-        return; // noop
-      }
-
-      try {
-        const reorderObject: ReorderEntry = {
-          entryId,
-          destinationId,
-          order,
-        };
-        await reorderEntryMutation(reorderObject);
-      } catch (error) {
-        logAxiosError('Error re-ordering event', error);
-      }
-      // the rundown needs to know whether we moved into a block
-      return rundown.entries[destinationId]?.type === 'block' ? destinationId : undefined;
-    },
-    [queryClient, reorderEntryMutation],
-  );
   /**
    * Reorders a given entry
    */
@@ -689,19 +660,43 @@ export const useEntryActions = () => {
           destinationId,
           order,
         };
-        await reorderEntryMutation(reorderObject);
+        await _reorderEntryMutation.mutateAsync(reorderObject);
       } catch (error) {
         logAxiosError('Error re-ordering event', error);
       }
     },
-    [reorderEntryMutation],
+    [_reorderEntryMutation],
   );
 
+  const move = useCallback(async (entryId: EntryId, direction: 'up' | 'down') => {
+    const cachedRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
+    if (!cachedRundown?.order) {
+      return;
+    }
+    const { destinationId, order } =
+      direction === 'up'
+        ? moveUp(entryId, cachedRundown.order, cachedRundown.entries)
+        : moveDown(entryId, cachedRundown.order, cachedRundown.entries);
+
+    if (destinationId) {
+      try {
+        const reorderObject: ReorderEntry = {
+          entryId,
+          destinationId,
+          order: order as 'before' | 'after' | 'insert',
+        };
+        await _reorderEntryMutation.mutateAsync(reorderObject);
+      } catch (error) {
+        logAxiosError('Error re-ordering event', error);
+      }
+    }
+  }, []);
+
   /**
    * Calls mutation to swap events
    * @private
    */
-  const { mutateAsync: swapEventsMutation } = useMutation({
+  const _swapEvents = useMutation({
     mutationFn: requestEventSwap,
     // we optimistically update here
     onMutate: async ({ from, to }) => {
@@ -755,12 +750,12 @@ export const useEntryActions = () => {
   const swapEvents = useCallback(
     async ({ from, to }: SwapEntry) => {
       try {
-        await swapEventsMutation({ from, to });
+        await _swapEvents.mutateAsync({ from, to });
       } catch (error) {
         logAxiosError('Error re-ordering event', error);
       }
     },
-    [swapEventsMutation],
+    [_swapEvents],
   );
 
   return {
@@ -800,7 +795,7 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
       order = order.filter((id) => id !== entry.id);
     } else {
       const parent = entries[entry.parent] as OntimeBlock;
-      parent.entries = parent.entries.filter((parentEntry) => parentEntry !== entry.id);
+      parent.events = parent.events.filter((event) => event !== entry.id);
     }
 
     delete entries[entry.id];

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

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

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

@@ -1,6 +1,4 @@
-import { MutableRefObject, useCallback, useEffect, useRef } from 'react';
-
-import { useSelectedEventId } from './useSocket';
+import { MutableRefObject, useCallback, useEffect } from 'react';
 
 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
   componentRef: MutableRefObject<ComponentRef>,
@@ -18,23 +16,6 @@ function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends H
   scrollRef.current.scrollTo({ top, behavior: 'smooth' });
 }
 
-function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: MutableRefObject<ComponentRef>,
-  scrollRef: MutableRefObject<ScrollRef>,
-  topOffset: number,
-) {
-  if (!componentRef.current || !scrollRef.current) {
-    return;
-  }
-
-  const componentRect = componentRef.current.getBoundingClientRect();
-  const scrollRect = scrollRef.current.getBoundingClientRect();
-  const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - topOffset;
-
-  // maintain current x scroll position
-  scrollRef.current.scrollTo(scrollRef.current.scrollLeft, top);
-}
-
 interface UseFollowComponentProps {
   followRef: MutableRefObject<HTMLElement | null>;
   scrollRef: MutableRefObject<HTMLElement | null>;
@@ -81,32 +62,3 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
 
   return scrollToRefComponent;
 }
-
-export function useFollowSelected(doFollow: boolean, topOffset = 100) {
-  const selectedEvenId = useSelectedEventId();
-
-  const selectedRef = useRef<HTMLTableRowElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!doFollow) {
-      return;
-    }
-
-    if (selectedEvenId && selectedRef.current && scrollRef.current) {
-      // Use requestAnimationFrame to ensure the component is fully loaded
-      window.requestAnimationFrame(() => {
-        snapToComponent(
-          { current: selectedRef.current } as MutableRefObject<HTMLElement>,
-          { current: scrollRef.current } as MutableRefObject<HTMLElement>,
-          topOffset,
-        );
-      });
-    }
-  }, [doFollow, selectedEvenId, topOffset]);
-
-  return {
-    selectedRef,
-    scrollRef,
-  };
-}

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

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

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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -0,0 +1,46 @@
+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

@@ -1,75 +0,0 @@
-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 { sendSocket } from '../utils/socket';
+import { socketSendJson } from '../utils/socket';
 
 const createSelector =
   <T>(selector: (state: RuntimeStore) => T) =>
@@ -9,18 +9,22 @@ const createSelector =
     useRuntimeStore(selector);
 
 export const setClientRemote = {
-  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),
+  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),
 };
 
 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,
@@ -33,28 +37,29 @@ export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
 }));
 
 export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
-  text: state.message.secondary,
-  visible: state.message.timer.secondarySource === 'secondary',
+  text: state.message.external,
+  visible: state.message.timer.secondarySource === 'external',
 }));
 
 export const useMessagePreview = createSelector((state: RuntimeStore) => ({
   blink: state.message.timer.blink,
   blackout: state.message.timer.blackout,
   phase: state.timer.phase,
-  secondarySource: state.message.timer.secondarySource,
+  showAuxTimer: state.message.timer.secondarySource === 'aux',
+  showExternalMessage: state.message.timer.secondarySource === 'external' && Boolean(state.message.external),
   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) => 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 } }),
+  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 } }),
 };
 
 export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
@@ -65,66 +70,40 @@ export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
 }));
 
 export const setPlayback = {
-  start: () => sendSocket('start', undefined),
-  pause: () => sendSocket('pause', undefined),
-  roll: () => sendSocket('roll', undefined),
-  startNext: () => sendSocket('start', 'next'),
+  start: () => socketSendJson('start'),
+  pause: () => socketSendJson('pause'),
+  roll: () => socketSendJson('roll'),
+  startNext: () => socketSendJson('start', 'next'),
   previous: () => {
-    sendSocket('load', 'previous');
+    socketSendJson('load', 'previous');
   },
   next: () => {
-    sendSocket('load', 'next');
+    socketSendJson('load', 'next');
   },
   stop: () => {
-    sendSocket('stop', undefined);
+    socketSendJson('stop');
   },
   reload: () => {
-    sendSocket('reload', undefined);
+    socketSendJson('reload');
   },
   addTime: (amount: number) => {
-    sendSocket('addtime', amount);
+    socketSendJson('addtime', amount);
   },
 };
 
-export const useAuxTimersTime = createSelector((state: RuntimeStore) => {
-  return {
-    aux1: state.auxtimer1.current,
-    aux2: state.auxtimer2.current,
-    aux3: state.auxtimer3.current,
-  };
-});
+export const useAuxTimerTime = createSelector((state: RuntimeStore) => state.auxtimer1.current);
 
-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 useAuxTimerControl = createSelector((state: RuntimeStore) => ({
+  playback: state.auxtimer1.playback,
+  direction: state.auxtimer1.direction,
+}));
 
 export const setAuxTimer = {
-  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 } }),
+  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 } }),
 };
 
 export const useSelectedEventId = createSelector((state: RuntimeStore) => ({
@@ -132,14 +111,14 @@ export const useSelectedEventId = createSelector((state: RuntimeStore) => ({
 }));
 
 export const useCurrentBlockId = createSelector((state: RuntimeStore) => ({
-  currentBlockId: state.blockNow?.id ?? null,
+  currentBlockId: state.currentBlock.block?.id ?? null,
 }));
 
 export const setEventPlayback = {
-  loadEvent: (id: string) => sendSocket('load', { id }),
-  startEvent: (id: string) => sendSocket('start', { id }),
-  start: () => sendSocket('start', undefined),
-  pause: () => sendSocket('pause', undefined),
+  loadEvent: (id: string) => socketSendJson('load', { id }),
+  startEvent: (id: string) => socketSendJson('start', { id }),
+  start: () => socketSendJson('start'),
+  pause: () => socketSendJson('pause'),
 };
 
 export const useTimer = createSelector((state: RuntimeStore) => ({
@@ -173,7 +152,7 @@ export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) =
   selectedEventIndex: state.runtime.selectedEventIndex,
   offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
 
-  blockStartedAt: state.blockNow?.startedAt ?? null,
+  currentBlock: state.currentBlock,
 }));
 
 export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
@@ -185,15 +164,11 @@ 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,
+  currentDay: state.eventNow?.dayOffset ?? 0, //The day of the currently running event
   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,
 }));
@@ -211,7 +186,7 @@ export const useOffsetMode = createSelector((state: RuntimeStore) => ({
   offsetMode: state.runtime.offsetMode,
 }));
 
-export const setOffsetMode = (payload: OffsetMode) => sendSocket('offsetmode', payload);
+export const setOffsetMode = (payload: OffsetMode) => socketSendJson('offsetmode', payload);
 
 export const usePlayback = () => {
   const featureSelector = (state: RuntimeStore) => ({

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

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

apps/client/src/common/queryClient.ts

@@ -1,17 +1,11 @@
 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: 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,
+      gcTime: 1000 * 60 * 10, // 10 min
     },
     mutations: {
       /**

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

@@ -3,6 +3,7 @@ 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,6 +10,7 @@ type EditorSettingsStore = {
   defaultTimeStrategy: TimeStrategy;
   defaultWarnTime: string;
   defaultDangerTime: string;
+  defaultPublic: boolean;
   defaultTimerType: TimerType;
   defaultEndAction: EndAction;
   setDefaultDuration: (defaultDuration: string) => void;
@@ -17,6 +18,7 @@ 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;
 };
@@ -27,6 +29,7 @@ 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,
 };
@@ -37,6 +40,7 @@ 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',
 }
@@ -51,6 +55,7 @@ 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,
@@ -87,6 +92,11 @@ 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, MessageTag } from 'ontime-types';
+import { Log, LogLevel, LogOrigin } from 'ontime-types';
 import { generateId, millisToString } from 'ontime-utils';
 import { useStore } from 'zustand';
 import { createStore } from 'zustand/vanilla';
 
-import { sendSocket } from '../utils/socket';
+import { socketSendJson } from '../utils/socket';
 import { nowInMillis } from '../utils/time';
 
 type LogStore = {
@@ -40,7 +40,7 @@ export function useEmitLog() {
       text,
     };
 
-    sendSocket(MessageTag.Log, log);
+    socketSendJson('ontime-log', log);
   }, []);
 
   /**

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

@@ -19,6 +19,7 @@ describe('cloneEvent()', () => {
       linkStart: false,
       countToEnd: false,
       endAction: EndAction.None,
+      isPublic: false,
       skip: false,
       colour: 'F00',
       revision: 10,
@@ -51,6 +52,7 @@ 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,6 +20,7 @@ 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,16 +1,7 @@
-import {
-  ApiAction,
-  Log,
-  MessageTag,
-  RefetchKey,
-  Rundown,
-  RuntimeStore,
-  WsPacketToClient,
-  WsPacketToServer,
-} from 'ontime-types';
+import { Log, Rundown, RuntimeStore } from 'ontime-types';
 
 import { isProduction, websocketUrl } from '../../externals';
-import { CLIENT_LIST, CUSTOM_FIELDS, REPORT, RUNDOWN, RUNTIME, VIEW_SETTINGS } from '../api/constants';
+import { CLIENT_LIST, CUSTOM_FIELDS, REPORT, RUNDOWN, RUNTIME } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
 import {
@@ -42,14 +33,16 @@ export const connectSocket = () => {
     hasConnected = true;
     reconnectAttempts = 0;
 
-    sendSocket(MessageTag.ClientSet, {
+    socketSendJson('set-client-patch', {
       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 = () => {
@@ -72,48 +65,56 @@ export const connectSocket = () => {
     console.error('WebSocket error:', error);
   };
 
-  websocket.onmessage = async (event) => {
+  websocket.onmessage = (event) => {
     try {
-      const data = JSON.parse(event.data) as WsPacketToClient;
+      const data = JSON.parse(event.data);
 
-      const { tag, payload } = data;
+      const { type, payload } = data;
 
-      if (!tag) {
+      if (!type) {
         return;
       }
 
-      switch (tag) {
-        case MessageTag.Pong: {
+      switch (type) {
+        case 'pong': {
           const offset = (new Date().getTime() - new Date(payload).getTime()) * 0.5;
           patchRuntimeProperty('ping', offset);
           updateDevTools({ ping: offset });
           break;
         }
-        case MessageTag.ClientInit: {
-          setClientId(payload.clientId);
-          if (!preferredClientName) {
-            setClientName(payload.clientName);
+        case 'client': {
+          if (typeof payload === 'object' || payload !== null) {
+            if (payload.clientId && payload.clientName) {
+              setClientId(payload.clientId);
+              if (!preferredClientName) {
+                setClientName(payload.clientName);
+              }
+            }
           }
           break;
         }
 
-        case MessageTag.ClientRename: {
-          const id = getClientId();
-          if (payload.target === id) {
-            setClientName(payload.name);
+        case 'client-rename': {
+          if (typeof payload === 'object') {
+            const id = getClientId();
+            if (payload.target && payload.target === id) {
+              setClientName(payload.name);
+            }
           }
           break;
         }
 
-        case MessageTag.ClientRedirect: {
-          const id = getClientId();
-          if (payload.target === id) {
-            setClientRedirect(payload.path);
+        case 'client-redirect': {
+          if (typeof payload === 'object') {
+            const id = getClientId();
+            if (payload.target && payload.target === id) {
+              setClientRedirect(payload.path);
+            }
           }
           break;
         }
 
-        case MessageTag.ClientList: {
+        case 'client-list': {
           setClients(payload);
           if (!isProduction) {
             ontimeQueryClient.setQueryData(CLIENT_LIST, payload);
@@ -121,60 +122,50 @@ export const connectSocket = () => {
           break;
         }
 
-        case MessageTag.Dialog: {
+        case 'dialog': {
           if (payload.dialog === 'welcome') {
             addDialog('welcome');
           }
           break;
         }
 
-        case MessageTag.Log: {
+        case 'ontime-log': {
           addLog(payload as Log);
           break;
         }
-        case MessageTag.RuntimeData: {
+        case 'ontime': {
           // eslint-disable-next-line @typescript-eslint/no-unused-vars -- removing the key from the payload
-          const { ping, ...serverPayload } = payload;
+          const { ping, ...serverPayload } = payload as Partial<RuntimeStore>;
+
           patchRuntime(serverPayload);
           updateDevTools(serverPayload);
           break;
         }
-        case MessageTag.RuntimePatch: {
-          const patch = payload;
+        case 'ontime-patch': {
+          const patch = payload as Partial<RuntimeStore>;
           patchRuntime(patch);
           updateDevTools(patch);
           break;
         }
-        case MessageTag.Refetch: {
+        case 'ontime-refetch': {
           // the refetch message signals that the rundown has changed in the server side
-          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;
+          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) {
               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: {
-          tag satisfies never;
+          console.log('unknown WS message', type);
           break;
         }
       }
@@ -184,14 +175,20 @@ export const connectSocket = () => {
   };
 };
 
-export function sendSocket<T extends MessageTag | ApiAction>(
-  tag: T,
-  payload: T extends MessageTag ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload'] : unknown,
-): void {
+export const socketSend = (message: any) => {
   if (websocket && websocket.readyState === WebSocket.OPEN) {
-    websocket.send(JSON.stringify({ tag, payload }));
+    websocket.send(message);
   }
-}
+};
+
+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 { RGBColour } from 'ontime-types';
-import { colourToHex, cssOrHexToColour, isLightColour, mixColours } from 'ontime-utils';
+import Color from 'color';
 
 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) 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 };
+  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' };
 };
 
 /**
@@ -39,8 +39,11 @@ export const timerPlaceholderMin = '––:––';
  * Adds opacity to a given colour if possible
  */
 export function alpha(colour: string, amount: number): string {
-  const originalColour = cssOrHexToColour(colour);
-  if (!originalColour) return colour;
-  originalColour.alpha = amount;
-  return colourToHex(originalColour);
+  try {
+    const withAlpha = Color(colour).alpha(amount).hexa();
+    return withAlpha;
+  } catch (_error) {
+    /* we do not handle errors here */
+  }
+  return colour;
 }

apps/client/src/features/EditorFeatureWrapper.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 
 import ProtectRoute from '../common/components/protect-route/ProtectRoute';
 
-import style from './EditorFeatureWrapper.module.scss';
+import style from './FeatureWrapper.module.scss';
 
 export default function EditorFeatureWrapper({ children }: PropsWithChildren) {
   return (

apps/client/src/features/app-settings/AppSettings.tsx

@@ -4,12 +4,12 @@ import { useKeyDown } from '../../common/hooks/useKeyDown';
 
 import AboutPanel from './panel/about-panel/AboutPanel';
 import AutomationPanel from './panel/automations-panel/AutomationPanel';
-import FeaturePanel from './panel/feature-panel/FeaturePanel';
-import ManagePanel from './panel/manage-panel/ManagePanel';
+import FeatureSettingsPanel from './panel/feature-settings-panel/FeatureSettingsPanel';
+import GeneralPanel from './panel/general-panel/GeneralPanel';
 import NetworkLogPanel from './panel/network-panel/NetworkLogPanel';
 import ProjectPanel from './panel/project-panel/ProjectPanel';
-import SettingsPanel from './panel/settings-panel/SettingsPanel';
 import ShutdownPanel from './panel/shutdown-panel/ShutdownPanel';
+import SourcesPanel from './panel/sources-panel/SourcesPanel';
 import PanelContent from './panel-content/PanelContent';
 import PanelList from './panel-list/PanelList';
 import useAppSettingsNavigation from './useAppSettingsNavigation';
@@ -25,11 +25,11 @@ export default function AppSettings() {
       <ErrorBoundary>
         <PanelList selectedPanel={panel} location={location} />
         <PanelContent onClose={close}>
-          {panel === 'settings' && <SettingsPanel location={location} />}
           {panel === 'project' && <ProjectPanel location={location} setLocation={setLocation} />}
-          {panel === 'manage' && <ManagePanel location={location} />}
+          {panel === 'general' && <GeneralPanel location={location} />}
+          {panel === 'feature_settings' && <FeatureSettingsPanel location={location} />}
+          {panel === 'sources' && <SourcesPanel />}
           {panel === 'automation' && <AutomationPanel location={location} />}
-          {panel === 'sharing' && <FeaturePanel location={location} />}
           {panel === 'network' && <NetworkLogPanel location={location} />}
           {panel === 'about' && <AboutPanel />}
           {panel === 'shutdown' && <ShutdownPanel />}