bump version to 3.16.1

fix: prevent storage key conflicts between stages
chore: add demo images to github
2026-08-02 22:18:08 +00:00 · 2025-08-15 19:54:38 +02:00 · 2025-08-15 19:54:38 +02:00 · 2025-08-09 07:01:01 +02:00 · 2025-06-23 20:42:53 +02:00 · 2025-06-23 19:56:53 +02:00
677 changed files with 22182 additions and 26180 deletions
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
@@ -0,0 +1,51 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="3">
+            <item index="0" class="java.lang.String" itemvalue="scrollbar-color" />
+            <item index="1" class="java.lang.String" itemvalue="scrollbar-width" />
+            <item index="2" class="java.lang.String" itemvalue="app-region" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredUrls">
+        <list>
+          <option value="http://localhost" />
+          <option value="http://127.0.0.1" />
+          <option value="http://0.0.0.0" />
+          <option value="http://www.w3.org/" />
+          <option value="http://json-schema.org/draft" />
+          <option value="http://java.sun.com/" />
+          <option value="http://xmlns.jcp.org/" />
+          <option value="http://javafx.com/javafx/" />
+          <option value="http://javafx.com/fxml" />
+          <option value="http://maven.apache.org/xsd/" />
+          <option value="http://maven.apache.org/POM/" />
+          <option value="http://www.springframework.org/schema/" />
+          <option value="http://www.springframework.org/tags" />
+          <option value="http://www.springframework.org/security/tags" />
+          <option value="http://www.thymeleaf.org" />
+          <option value="http://www.jboss.org/j2ee/schema/" />
+          <option value="http://www.jboss.com/xml/ns/" />
+          <option value="http://www.ibm.com/webservices/xsd" />
+          <option value="http://activemq.apache.org/schema/" />
+          <option value="http://schema.cloudfoundry.org/spring/" />
+          <option value="http://schemas.xmlsoap.org/" />
+          <option value="http://cxf.apache.org/schemas/" />
+          <option value="http://primefaces.org/ui" />
+          <option value="http://tiles.apache.org/" />
+          <option value="http://__IP__" />
+        </list>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>
@@ -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)
@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "3.15.2",
+    "version": "3.16.1",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -15,12 +15,10 @@
  ],
  "plugins": [
    "react",
-    "react-compiler",
    "simple-import-sort",
    "@tanstack/query"
  ],
  "rules": {
-    "react-compiler/react-compiler": "warn",
    "react/jsx-no-bind": [
      "error",
      {
@@ -1,26 +1,26 @@
 {
  "name": "ontime-ui",
-  "version": "3.15.2",
+  "version": "3.16.1",
  "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",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@emotion/is-prop-valid": "^1.3.1",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fontsource/open-sans": "^5.0.28",
-    "@mantine/hooks": "^8.1.2",
+    "@mantine/hooks": "^7.13.3",
    "@sentry/react": "^8.43.0",
    "@table-nav/react": "^0.0.7",
    "@tanstack/react-query": "^5.62.7",
    "@tanstack/react-query-devtools": "^5.62.7",
    "@tanstack/react-table": "^8.21.3",
    "autosize": "^6.0.1",
-    "axios": "^1.9.0",
+    "axios": "^1.2.0",
+    "color": "^4.2.3",
    "csv-stringify": "^6.4.5",
    "framer-motion": "^10.10.0",
    "prismjs": "^1.29.0",
@@ -66,6 +66,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 +78,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",
@@ -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={
@@ -1,5 +0,0 @@
-import axios from 'axios';
-
-axios.defaults.validateStatus = (status) => {
-  return (status >= 200 && status < 300) || status === 304;
-};
@@ -8,9 +8,9 @@ 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 SHEET_STATE = ['sheetState'];
 export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const CLIENT_LIST = ['clientList'];
@@ -19,8 +19,11 @@ export const REPORT = ['report'];
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;

-const userAssetsPath = 'user';
-const cssOverridePath = 'styles/override.css';
+export const projectDataURL = `${serverURL}/project`;
+export const rundownURL = `${serverURL}/events`;
+export const ontimeURL = `${serverURL}/ontime`;

+export const userAssetsPath = 'user';
+export const cssOverridePath = 'styles/override.css';
 export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
 export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
@@ -1,45 +1,38 @@
 import axios from 'axios';
-import { CustomField, CustomFieldKey } from 'ontime-types'; // Removed CustomFields
+import { CustomField, CustomFieldLabel, 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(label: CustomFieldLabel, newField: CustomField): Promise<CustomFields> {
+  const res = await axios.put(`${customFieldsPath}/${label}`, { ...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(label: CustomFieldLabel): Promise<CustomFields> {
+  const res = await axios.delete(`${customFieldsPath}/${label}`);
  return res.data;
 }
@@ -2,7 +2,7 @@ import axios, { AxiosResponse } from 'axios';
 import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';

 import { makeTable } from '../../views/cuesheet/cuesheet.utils';
-import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../utils/csv';
+import { makeCSVFromArrayOfArrays } from '../utils/csv';

 import { apiEntryUrl } from './constants';
 import { createBlob, downloadBlob } from './utils';
@@ -40,11 +40,9 @@ export async function downloadProject(fileName: string) {
 export async function downloadCSV(fileName: string = 'rundown') {
  try {
    const { data, name } = await fileDownload(fileName);
-    const { project, rundowns, customFields } = data;
-
-    const flatRundowns = aggregateRundowns(rundowns);
-    const sheetData = makeTable(project, flatRundowns, customFields);
+    const { project, rundown, customFields } = data;

+    const sheetData = makeTable(project, rundown, customFields);
    const fileContent = makeCSVFromArrayOfArrays(sheetData);

    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
@@ -1,11 +1,16 @@
 import axios, { AxiosResponse } from 'axios';
-import { CustomFields, Rundown } from 'ontime-types';
+import { CustomFields, OntimeRundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';

 import { apiEntryUrl } from './constants';

 const excelPath = `${apiEntryUrl}/excel`;

+type PreviewSpreadsheetResponse = {
+  rundown: OntimeRundown;
+  customFields: CustomFields;
+};
+
 /**
 * upload Excel file to server
 * @return string - file ID op the uploaded file
@@ -29,10 +34,6 @@ export async function getWorksheetNames(): Promise<string[]> {
  return response.data;
 }

-type PreviewSpreadsheetResponse = {
-  rundown: Rundown;
-  customFields: CustomFields;
-};
 export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
    options,
@@ -11,7 +11,7 @@ export type HasUpdate = {
 * HTTP request to get the latest version and url from github
 */
 export async function getLatestVersion(): Promise<HasUpdate> {
-  const res = await axios.get(apiRepoLatest);
+  const res = await axios.get(`${apiRepoLatest}`);
  return {
    url: res.data.html_url as string,
    version: res.data.tag_name as string,
@@ -11,7 +11,7 @@ export const reportUrl = `${apiEntryUrl}/report`;
 * HTTP request to fetch all reports
 */
 export async function fetchReport(): Promise<OntimeReport> {
-  const res = await axios.get(reportUrl);
+  const res = await axios.get(`${reportUrl}/`);
  return res.data;
 }

@@ -1,45 +1,29 @@
 import axios, { AxiosResponse } from 'axios';
-import {
-  EntryId,
-  MessageResponse,
-  OntimeEntry,
-  OntimeEvent,
-  ProjectRundownsList,
-  Rundown,
-  TransientEventPayload,
-} from 'ontime-types';
+import { MessageResponse, OntimeEvent, OntimeRundownEntry, RundownCached, TransientEventPayload } from 'ontime-types';

 import { apiEntryUrl } from './constants';

 const rundownPath = `${apiEntryUrl}/rundown`;

-/**
- * HTTP request to fetch a list of existing rundowns
- */
-export async function fetchProjectRundownList(): Promise<ProjectRundownsList> {
-  const res = await axios.get(rundownPath);
-  return res.data;
-}
-
 /**
 * HTTP request to fetch all events
 */
-export async function fetchCurrentRundown(): Promise<Rundown> {
-  const res = await axios.get(`${rundownPath}/current`);
+export async function fetchNormalisedRundown(): Promise<RundownCached> {
+  const res = await axios.get(`${rundownPath}/normalised`);
  return res.data;
 }

 /**
- * HTTP request to post new entry
+ * HTTP request to post new event
 */
-export async function postAddEntry(data: TransientEventPayload): Promise<AxiosResponse<OntimeEntry>> {
+export async function requestPostEvent(data: TransientEventPayload): Promise<AxiosResponse<OntimeRundownEntry>> {
  return axios.post(rundownPath, data);
 }

 /**
- * HTTP request to edit an entry
+ * HTTP request to put new event
 */
-export async function putEditEntry(data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
+export async function requestPutEvent(data: Partial<OntimeRundownEntry>): Promise<AxiosResponse<OntimeRundownEntry>> {
  return axios.put(rundownPath, data);
 }

@@ -49,22 +33,22 @@ type BatchEditEntry = {
 };

 /**
- * HTTP request to edit multiple events
+ * HTTP request to put multiple events
 */
-export async function putBatchEditEvents(data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
+export async function requestBatchPutEvents(data: BatchEditEntry): Promise<AxiosResponse<MessageResponse>> {
  return axios.put(`${rundownPath}/batch`, data);
 }

 export type ReorderEntry = {
-  entryId: EntryId;
-  destinationId: EntryId;
-  order: 'before' | 'after' | 'insert';
+  eventId: string;
+  from: number;
+  to: number;
 };

 /**
- * HTTP request to reorder an entry
+ * HTTP request to reorder events
 */
-export async function patchReorderEntry(data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
+export async function requestReorderEvent(data: ReorderEntry): Promise<AxiosResponse<OntimeRundownEntry>> {
  return axios.patch(`${rundownPath}/reorder`, data);
 }

@@ -83,36 +67,15 @@ export async function requestEventSwap(data: SwapEntry): Promise<AxiosResponse<M
 /**
 * HTTP request to request application of delay
 */
-export async function requestApplyDelay(delayId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.patch(`${rundownPath}/applydelay/${delayId}`);
+export async function requestApplyDelay(eventId: string): Promise<AxiosResponse<MessageResponse>> {
+  return axios.patch(`${rundownPath}/applydelay/${eventId}`);
 }

 /**
- * HTTP request for cloning an entry
+ * HTTP request to delete given event
 */
-export async function postCloneEntry(entryId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/clone/${entryId}`);
-}
-
-/**
- * HTTP request for dissolving of a block
- */
-export async function requestUngroup(blockId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/ungroup/${blockId}`);
-}
-
-/**
- * HTTP request for grouping a list of entries into a block
- */
-export async function requestGroupEntries(entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/group`, { ids: entryIds });
-}
-
-/**
- * HTTP request to delete entries
- */
-export async function deleteEntries(entryIds: EntryId[]): Promise<AxiosResponse<MessageResponse>> {
-  return axios.delete(rundownPath, { data: { ids: entryIds } });
+export async function requestDelete(eventIds: string[]): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(rundownPath, { data: { ids: eventIds } });
 }

 /**
@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from 'axios';
-import { AuthenticationStatus, CustomFields, Rundown } from 'ontime-types';
+import { AuthenticationStatus, CustomFields, OntimeRundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';

 import { apiEntryUrl } from './constants';
@@ -54,7 +54,7 @@ export const previewRundown = async (
  sheetId: string,
  options: ImportMap,
 ): Promise<{
-  rundown: Rundown;
+  rundown: OntimeRundown;
  customFields: CustomFields;
 }> => {
  const response = await axios.post(`${sheetsPath}/${sheetId}/read`, { options });
@@ -7,7 +7,7 @@ import { addLog } from '../stores/logger';
 import { nowInMillis } from '../utils/time';

 /**
- * Utility unwrap a potential axios error
+ * Utility unrwap a potential axios error
 * @param error
 * @returns
 */
@@ -34,7 +34,7 @@ export function maybeAxiosError(error: unknown) {
 }

 /**
- * Utility unwraps a potential axios error and sends to logger
+ * Utility unrwaps a potential axios error and sends to logger
 * @param prepend
 * @param error
 */
@@ -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);
 }
@@ -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;
-  }
-}
@@ -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%;
-}
-
@@ -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;
@@ -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;
-}
@@ -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>
  );
@@ -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;
-  }
-}
@@ -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>
-  );
-}
@@ -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>
  );
 }
@@ -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>
  );
 }
@@ -23,7 +23,7 @@ export type OptionWithoutGroup = {
  withDivider?: boolean;
 };

-type OptionWithGroup = {
+export type OptionWithGroup = {
  label: string;
  group: Omit<OptionWithoutGroup, 'isGroup'>[];
 };
@@ -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;
-}
@@ -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>
-  );
-}
@@ -3,8 +3,8 @@ import React from 'react';
 // skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';

-import { hasConnected, reconnectAttempts } from '../../../common/utils/socket';
-import { runtimeStore } from '../../stores/runtime';
+import { runtimeStore } from '@/common/stores/runtime';
+import { hasConnected, reconnectAttempts, shouldReconnect } from '@/common/utils/socket';

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

@@ -37,7 +37,7 @@ class ErrorBoundary extends React.Component {
      scope.setExtras({
        error,
        store: appState,
-        hasSocket: { hasConnected, reconnectAttempts },
+        hasSocket: { hasConnected, shouldReconnect, reconnectAttempts },
      });
      const eventId = Sentry.captureException(error);
      this.setState({ eventId, info });
@@ -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} />;
-}
@@ -15,7 +15,7 @@
  display: grid;
  place-content: center;
  text-align: center;
-  z-index: $zindex-modal;
+  z-index: 100;
  cursor: pointer;
 }

@@ -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;
-  }
-}
@@ -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>
  );
@@ -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
@@ -2,7 +2,7 @@ import { KeyboardEvent, useEffect, useRef, useState } from 'react';
 import { Input, Radio, RadioGroup } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';

-import { useEntryActions } from '../../../hooks/useEntryAction';
+import { useEventAction } from '../../../hooks/useEventAction';

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

@@ -13,7 +13,7 @@ interface DelayInputProps {

 export default function DelayInput(props: DelayInputProps) {
  const { eventId, duration } = props;
-  const { updateEntry } = useEntryActions();
+  const { updateEvent } = useEventAction();

  const [value, setValue] = useState<string>('');
  const inputRef = useRef<HTMLInputElement | null>(null);
@@ -54,7 +54,7 @@ export default function DelayInput(props: DelayInputProps) {
  };

  const submitChange = (value: number) => {
-    updateEntry({
+    updateEvent({
      id: eventId,
      duration: value,
    });
@@ -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%;
-}
@@ -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;
@@ -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,
  };
 }
@@ -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%;
-}
@@ -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;
@@ -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,
-      }}
-    />
-  );
-}
@@ -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;
 }
@@ -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}
    />
  );
 }
@@ -0,0 +1,45 @@
+$loader-size: 4rem;
+
+.overlay {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  background-color: $black-10;
+  backdrop-filter: blur(5px);
+}
+
+
+.loader {
+  width: $loader-size;
+  height: $loader-size;
+  background: $blue-500;
+  display: inline-block;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: animloader 1s ease-in infinite;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
@@ -0,0 +1,9 @@
+import style from './LoaderOverlay.module.scss';
+
+export default function LoaderOverlay() {
+  return (
+    <div className={style.overlay}>
+      <span className={style.loader} />
+    </div>
+  );
+}
@@ -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;
-}
@@ -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>
-  );
-}
@@ -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>
+  );
+}
@@ -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;
 }
@@ -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);
@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import NavigationMenu from './NavigationMenu';
+
+interface ProductionNavigationMenuProps {
+  isMenuOpen: boolean;
+  onMenuClose: () => void;
+}
+
+function ProductionNavigationMenu(props: ProductionNavigationMenuProps) {
+  const { isMenuOpen, onMenuClose } = props;
+
+  return <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />;
+}
+
+export default memo(ProductionNavigationMenu);
@@ -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();
@@ -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);
@@ -1,4 +0,0 @@
-.linkIcon {
-  margin-left: auto;
-  @include rotate-fourty-five;
-}
@@ -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>
-  );
-}
@@ -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>
-    </>
-  );
-}
@@ -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;
-}
@@ -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>
-  );
-}
@@ -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;
-  }
-}
@@ -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>
-  );
-}
@@ -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;
-}
@@ -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>
-    </>
-  );
-}
@@ -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;
-}
@@ -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>
+  );
+}
@@ -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;
-}
-
@@ -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>
-  );
-}
@@ -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%;
-    }
-  }
-}
@@ -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>
-  );
-}
@@ -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;
-  }
-}
@@ -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>
-  );
-}
@@ -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') {
@@ -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;
 }

@@ -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>
  );
 }
@@ -11,6 +11,10 @@

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

@@ -1,11 +1,11 @@
 import { IoChevronDown } from 'react-icons/io5';
 import { useLocalStorage } from '@mantine/hooks';

+import { baseURI } from '../../../externals';
 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,8 +15,10 @@ interface ViewParamsSectionProps {
  options: ParamField[];
 }

-export default function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
-  const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
+export default function ViewParamsSection(props: ViewParamsSectionProps) {
+  const { title, collapsible, options } = props;
+
+  const [collapsed, setCollapsed] = useLocalStorage({ key: `${baseURI}params-${title}`, defaultValue: false });

  const handleCollapse = () => {
    if (collapsible) {
@@ -26,52 +28,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} />;
-      })}
-    </>
-  );
-}
@@ -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',
+    });
+  });
+});
@@ -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']);
-  });
-});
@@ -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,
-};
@@ -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',
 }
@@ -12,7 +12,7 @@ type OptionsField = {
  defaultValue?: string;
 };

-type MultiselectOption = { value: string; label: string; colour: string };
+export type MultiselectOption = { value: string; label: string; colour: string };
 export type MultiselectOptions = Record<string, MultiselectOption>;
 type MultiOptionsField = {
  type: 'multi-option';
@@ -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);
@@ -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;
-}
@@ -1,5 +1,6 @@
 import { createContext, PropsWithChildren, useCallback, useEffect, useState } from 'react';

+import { baseURI } from '../../externals';
 import useSettings from '../hooks-query/useSettings';

 interface AppContextType {
@@ -26,7 +27,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {

  useEffect(() => {
    if (status === 'pending') return;
-    const previousEditor = sessionStorage.getItem(storageKeys.editor);
+    const previousEditor = sessionStorage.getItem(`${baseURI}${storageKeys.editor}`);

    if (previousEditor && previousEditor === data.editorKey) {
      setEditorAuth(true);
@@ -34,7 +35,7 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
      setEditorAuth(data.editorKey == null || data.editorKey === '');
    }

-    const previousOperator = sessionStorage.getItem(storageKeys.operator);
+    const previousOperator = sessionStorage.getItem(`${baseURI}${storageKeys.operator}`);
    if (previousOperator && previousOperator === data.operatorKey) {
      setOperatorAuth(true);
    } else {
@@ -55,14 +56,14 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
      if (permission === 'editor') {
        const correct = isValid(pin, data.editorKey);
        if (correct) {
-          sessionStorage.setItem(storageKeys.editor, pin);
+          sessionStorage.setItem(`${baseURI}${storageKeys.editor}`, pin);
        }
        setEditorAuth(correct);
        return correct;
      } else if (permission === 'operator') {
        const correct = isValid(pin, data.operatorKey);
        if (correct) {
-          sessionStorage.setItem(storageKeys.operator, pin);
+          sessionStorage.setItem(`${baseURI}${storageKeys.operator}`, pin);
        }
        setOperatorAuth(correct);
        return correct;
@@ -0,0 +1,32 @@
+// roughly from https://github.com/juliencrn/usehooks-ts/blob/master/packages/usehooks-ts/src/useMediaQuery/useMediaQuery.ts
+
+import { useCallback, useEffect, useState } from 'react';
+
+function getMatches(query: string): boolean {
+  return window.matchMedia(query).matches;
+}
+
+// TODO: debounce handleChange
+export default function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+
+  const handleChange = useCallback(() => {
+    setMatches(getMatches(query));
+  }, [query]);
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Listen matchMedia
+    matchMedia.addEventListener('change', handleChange);
+
+    return () => {
+      matchMedia.removeEventListener('change', handleChange);
+    };
+  }, [handleChange, query]);
+
+  return matches;
+}
@@ -1,9 +1,11 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { getAutomationSettings } from '../api/automation';
+import { editAutomationSettings, getAutomationSettings } from '../api/automation';
 import { AUTOMATION } from '../api/constants';
+import { logAxiosError } from '../api/utils';
 import { automationPlaceholderSettings } from '../models/AutomationSettings';
+import { ontimeQueryClient } from '../queryClient';

 export default function useAutomationSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
@@ -18,3 +20,15 @@ export default function useAutomationSettings() {

  return { data: data ?? automationPlaceholderSettings, status, isFetching, isError, refetch };
 }
+
+export function useAutomationSettingsMutation() {
+  const { isPending, mutateAsync } = useMutation({
+    mutationFn: editAutomationSettings,
+    onError: (error) => logAxiosError('Error saving Automation settings', error),
+    onSuccess: (data) => {
+      ontimeQueryClient.setQueryData(AUTOMATION, data);
+    },
+    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: AUTOMATION }),
+  });
+  return { isPending, mutateAsync };
+}
@@ -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,
@@ -11,7 +11,7 @@ const placeholderProjectList: ProjectFileListResponse = {
  lastLoadedProject: '',
 };

-function useProjectList() {
+export function useProjectList() {
  const { data, status, refetch } = useQuery({
    queryKey: PROJECT_LIST,
    queryFn: getProjects,
@@ -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 };
-}
@@ -1,30 +1,23 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { OntimeEntry, Rundown } from 'ontime-types';
+import { NormalisedRundown, OntimeRundown, OntimeRundownEntry, RundownCached } from 'ontime-types';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { RUNDOWN } from '../api/constants';
-import { fetchCurrentRundown } from '../api/rundown';
+import { fetchNormalisedRundown } from '../api/rundown';

 import useProjectData from './useProjectData';

 // revision is -1 so that the remote revision is higher
-const cachedRundownPlaceholder: Rundown = {
-  id: 'default',
-  title: '',
-  order: [],
-  flatOrder: [],
-  entries: {},
-  revision: -1,
-};
+const cachedRundownPlaceholder = { order: [] as string[], rundown: {} as NormalisedRundown, revision: -1 };

 /**
 * Normalised rundown data
 */
 export default function useRundown() {
-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+  const { data, status, isError, refetch, isFetching } = useQuery<RundownCached>({
    queryKey: RUNDOWN,
-    queryFn: fetchCurrentRundown,
+    queryFn: fetchNormalisedRundown,
    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
@@ -44,16 +37,16 @@ export function useFlatRundown() {

  const loadedProject = useRef<string>('');
  const [prevRevision, setPrevRevision] = useState<number>(-1);
-  const [flatRundown, setFlatRundown] = useState<OntimeEntry[]>([]);
+  const [flatRunDown, setFlatRunDown] = useState<OntimeRundown>([]);

  // update data whenever the revision changes
  useEffect(() => {
-    if (data.revision !== -1 && data.revision !== prevRevision) {
-      const flatRundown = data.flatOrder.map((id) => data.entries[id]);
-      setFlatRundown(flatRundown);
+    if (data.revision !== -1 || data.revision !== prevRevision) {
+      const flatRundown = data.order.map((id) => data.rundown[id]);
+      setFlatRunDown(flatRundown);
      setPrevRevision(data.revision);
    }
-  }, [data.entries, data.flatOrder, data.revision, prevRevision]);
+  }, [data.order, data.revision, data.rundown, prevRevision]);

  // TODO: should we have a project id field?
  // invalidate current version if project changes
@@ -64,13 +57,13 @@ export function useFlatRundown() {
    }
  }, [projectData]);

-  return { data: flatRundown, status };
+  return { data: flatRunDown, status };
 }

 /**
 * Provides access to a partial rundown based on a filter callback
 */
-export function usePartialRundown(cb: (event: OntimeEntry) => boolean) {
+export function usePartialRundown(cb: (event: OntimeRundownEntry) => boolean) {
  const { data, status } = useFlatRundown();
  const filteredData = useMemo(() => {
    return data.filter(cb);
@@ -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 };
@@ -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 };
 }
@@ -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
@@ -1,811 +0,0 @@
-import { useCallback } from 'react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import {
-  EntryId,
-  isOntimeBlock,
-  isOntimeEvent,
-  MaybeString,
-  OntimeBlock,
-  OntimeEntry,
-  OntimeEvent,
-  Rundown,
-  TimeField,
-  TimeStrategy,
-  TransientEventPayload,
-} from 'ontime-types';
-import { dayInMs, generateId, MILLIS_PER_SECOND, parseUserTime, swapEventData } from 'ontime-utils';
-
-import { moveDown, moveUp } from '../../features/rundown/rundown.utils';
-import { RUNDOWN } from '../api/constants';
-import {
-  deleteEntries,
-  patchReorderEntry,
-  postAddEntry,
-  postCloneEntry,
-  putBatchEditEvents,
-  putEditEntry,
-  ReorderEntry,
-  requestApplyDelay,
-  requestDeleteAll,
-  requestEventSwap,
-  requestGroupEntries,
-  requestUngroup,
-  SwapEntry,
-} from '../api/rundown';
-import { logAxiosError } from '../api/utils';
-import { useEditorSettings } from '../stores/editorSettings';
-
-export type EventOptions = Partial<{
-  // options of any new entries (event / delay / block)
-  after: MaybeString;
-  before: MaybeString;
-  // options of entries of type OntimeEvent
-  linkPrevious: boolean;
-  lastEventId: MaybeString;
-}>;
-
-/**
- * Gather utilities for actions on entries
- */
-export const useEntryActions = () => {
-  const queryClient = useQueryClient();
-  const {
-    linkPrevious,
-    defaultTimeStrategy,
-    defaultDuration,
-    defaultWarnTime,
-    defaultDangerTime,
-    defaultTimerType,
-    defaultEndAction,
-  } = useEditorSettings();
-
-  const getEntryById = useCallback(
-    (eventId: string): OntimeEntry | undefined => {
-      const cachedRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
-      if (!cachedRundown?.entries) {
-        return;
-      }
-      return cachedRundown.entries[eventId];
-    },
-    [queryClient],
-  );
-
-  /**
-   * Calls mutation to add new entry
-   * @private
-   */
-  const { mutateAsync: addEntryMutation } = useMutation({
-    // TODO(v4): optimistic create entry
-    mutationFn: postAddEntry,
-    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
-  });
-
-  /**
-   * Adds an entry to rundown
-   */
-  const addEntry = useCallback(
-    async (entry: Partial<OntimeEntry>, options?: EventOptions) => {
-      const newEntry: TransientEventPayload = { ...entry, id: generateId() };
-
-      // ************* CHECK OPTIONS specific to events
-      if (isOntimeEvent(newEntry)) {
-        // merge creation time options with event settings
-        const applicationOptions = {
-          after: options?.after,
-          before: options?.before,
-          lastEventId: options?.lastEventId,
-          linkPrevious: options?.linkPrevious ?? linkPrevious,
-        };
-
-        if (applicationOptions?.lastEventId) {
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this is a value
-          const rundownData = queryClient.getQueryData<Rundown>(RUNDOWN)!;
-          const previousEvent = rundownData.entries[applicationOptions.lastEventId];
-          if (isOntimeEvent(previousEvent)) {
-            newEntry.timeStart = previousEvent.timeEnd;
-          }
-        }
-
-        // Override event with options from editor settings
-        newEntry.linkStart = applicationOptions.linkPrevious;
-
-        if (newEntry.duration === undefined && newEntry.timeEnd === undefined) {
-          newEntry.duration = parseUserTime(defaultDuration);
-        }
-
-        if (newEntry.timeDanger === undefined) {
-          newEntry.timeDanger = parseUserTime(defaultDangerTime);
-        }
-
-        if (newEntry.timeWarning === undefined) {
-          newEntry.timeWarning = parseUserTime(defaultWarnTime);
-        }
-
-        if (newEntry.timerType === undefined) {
-          newEntry.timerType = defaultTimerType;
-        }
-
-        if (newEntry.endAction === undefined) {
-          newEntry.endAction = defaultEndAction;
-        }
-
-        if (newEntry.timeStrategy === undefined) {
-          newEntry.timeStrategy = defaultTimeStrategy;
-        }
-      }
-
-      // handle adding options that concern all event type
-      if (options?.after) {
-        (newEntry as TransientEventPayload).after = options.after;
-      }
-      if (options?.before) {
-        (newEntry as TransientEventPayload).before = options.before;
-      }
-
-      try {
-        await addEntryMutation(newEntry);
-      } catch (error) {
-        logAxiosError('Failed adding event', error);
-      }
-    },
-    [
-      addEntryMutation,
-      defaultDangerTime,
-      defaultDuration,
-      defaultEndAction,
-      defaultTimerType,
-      defaultTimeStrategy,
-      defaultWarnTime,
-      linkPrevious,
-      queryClient,
-    ],
-  );
-
-  /**
-   * Calls mutation to clone a selection
-   * @private
-   */
-  const { mutateAsync: cloneEntryMutation } = useMutation({
-    mutationFn: postCloneEntry,
-    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
-  });
-
-  /**
-   * Clone a selection
-   */
-  const clone = useCallback(
-    async (entryId: EntryId) => {
-      try {
-        await cloneEntryMutation(entryId);
-      } catch (error) {
-        logAxiosError('Error cloning entry', error);
-      }
-    },
-    [cloneEntryMutation],
-  );
-
-  /**
-   * Calls mutation to update existing entry
-   * @private
-   */
-  const { mutateAsync: updateEntryMutation } = useMutation({
-    mutationFn: putEditEntry,
-    // we optimistically update here
-    onMutate: async (newEvent) => {
-      // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
-
-      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
-      const eventId = newEvent.id;
-
-      if (previousData && eventId) {
-        // optimistically update object
-        const newRundown = { ...previousData.entries };
-        // @ts-expect-error -- we expect the events to be of same type
-        newRundown[eventId] = { ...newRundown[eventId], ...newEvent };
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
-          id: previousData.id,
-          title: previousData.title,
-          order: previousData.order,
-          flatOrder: previousData.flatOrder,
-          entries: newRundown,
-          revision: -1,
-        });
-      }
-
-      // Return a context with the previous and new events
-      return { previousData, newEvent };
-    },
-    // Mutation fails, rollback undoes optimist update
-    onError: (_error, _newEvent, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
-    },
-    // Mutation finished, failed or successful
-    // Fetch anyway, just to be sure
-    onSettled: async () => {
-      await queryClient.invalidateQueries({ queryKey: RUNDOWN });
-    },
-  });
-
-  /**
-   * Updates existing entry
-   */
-  const updateEntry = useCallback(
-    async (event: Partial<OntimeEntry>) => {
-      try {
-        await updateEntryMutation(event);
-      } catch (error) {
-        logAxiosError('Error updating event', error);
-      }
-    },
-    [updateEntryMutation],
-  );
-
-  const updateCustomField = useCallback(
-    async (entryId: EntryId, field: string, value: string) => {
-      updateEntry({ id: entryId, custom: { [field]: value } });
-    },
-    [updateEntry],
-  );
-
-  /**
-   * Updates time of existing event
-   * @param eventId {EntryId} - id of the event
-   * @param field {TimeField} - field to update
-   * @param value {string} - new value string to be parsed
-   * @param lockOnUpdate {boolean} - whether we will apply the lock / release on update
-   */
-  const updateTimer = useCallback(
-    async (eventId: EntryId, field: TimeField, value: string, lockOnUpdate?: boolean) => {
-      // an empty value with no lock has no domain validity
-      if (!lockOnUpdate && value === '') {
-        return;
-      }
-
-      const newEvent: Partial<OntimeEvent> = {
-        id: eventId,
-      };
-
-      // check if we should lock the field
-      if (lockOnUpdate) {
-        if (field === 'timeEnd') {
-          // an empty value indicates that we should unlock the field
-          newEvent.timeStrategy = value === '' ? TimeStrategy.LockDuration : TimeStrategy.LockEnd;
-          newEvent.timeEnd = value === '' ? undefined : calculateNewValue();
-        } else if (field === 'duration') {
-          // an empty value indicates that we should unlock the field
-          newEvent.timeStrategy = value === '' ? TimeStrategy.LockEnd : TimeStrategy.LockDuration;
-          newEvent.duration = value === '' ? undefined : calculateNewValue();
-        } else if (field === 'timeStart') {
-          // an empty values means we should link to the previous
-          newEvent.linkStart = value === '';
-          newEvent.timeStart = value === '' ? undefined : calculateNewValue();
-        }
-      } else {
-        newEvent[field] = calculateNewValue();
-      }
-
-      try {
-        await updateEntryMutation(newEvent);
-      } catch (error) {
-        logAxiosError('Error updating event', error);
-      }
-
-      /**
-       * Utility function to calculate the new time value
-       */
-      function calculateNewValue(): number {
-        let newValMillis = 0;
-
-        // check for previous keyword
-        if (value === 'p' || value === 'prev' || value === 'previous') {
-          newValMillis = getPreviousEnd();
-
-          // check for adding time keyword
-        } else if (value.startsWith('+') || value.startsWith('p+') || value.startsWith('p +')) {
-          // TODO: is this logic solid?
-          const remainingString = value.substring(1);
-          newValMillis = getPreviousEnd() + parseUserTime(remainingString);
-        } else {
-          newValMillis = parseUserTime(value);
-        }
-        // dont allow timer values over 23:59:59
-        return Math.min(newValMillis, dayInMs - MILLIS_PER_SECOND);
-      }
-
-      /**
-       * Utility function to get the previous event end time
-       */
-      function getPreviousEnd(): number {
-        const cachedRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
-
-        if (!cachedRundown?.order || !cachedRundown?.entries) {
-          return 0;
-        }
-
-        const index = cachedRundown.order.indexOf(eventId);
-        if (index === 0) {
-          return 0;
-        }
-        let previousEnd = 0;
-        for (let i = index - 1; i >= 0; i--) {
-          const event = cachedRundown.entries[cachedRundown.order[i]];
-          if (isOntimeEvent(event)) {
-            previousEnd = event.timeEnd;
-            break;
-          }
-        }
-        return previousEnd;
-      }
-    },
-    [updateEntryMutation, queryClient],
-  );
-
-  /**
-   * Calls mutation to edit multiple events
-   * @private
-   */
-  const { mutateAsync: batchUpdateEventsMutation } = useMutation({
-    mutationFn: putBatchEditEvents,
-    onMutate: async ({ ids, data }) => {
-      // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
-
-      // Snapshot the previous value
-      const previousRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
-
-      if (previousRundown) {
-        const eventIds = new Set(ids);
-        const newRundown = { ...previousRundown.entries };
-
-        eventIds.forEach((eventId) => {
-          if (Object.hasOwn(newRundown, eventId)) {
-            const event = newRundown[eventId];
-            if (isOntimeEvent(event)) {
-              newRundown[eventId] = {
-                ...event,
-                ...data,
-              };
-            }
-          }
-        });
-
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
-          id: previousRundown.id,
-          title: previousRundown.title,
-          order: previousRundown.order,
-          flatOrder: previousRundown.flatOrder,
-          entries: newRundown,
-          revision: -1,
-        });
-      }
-
-      // Return a context with the previous rundown
-      return { previousRundown };
-    },
-    onSuccess: (response) => {
-      if (!response.data) return;
-
-      const { id, title, order, flatOrder, entries, revision } = response.data;
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
-        id,
-        title,
-        order,
-        flatOrder,
-        entries,
-        revision,
-      });
-    },
-    onError: (_error, _newEvent, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousRundown);
-    },
-  });
-
-  const batchUpdateEvents = useCallback(
-    async (data: Partial<OntimeEvent>, eventIds: string[]) => {
-      try {
-        await batchUpdateEventsMutation({ ids: eventIds, data });
-      } catch (error) {
-        logAxiosError('Error updating events', error);
-      }
-    },
-    [batchUpdateEventsMutation],
-  );
-
-  /**
-   * Calls mutation to delete an entry
-   * @private
-   */
-  const { mutateAsync: deleteEntryMutation } = useMutation({
-    mutationFn: deleteEntries,
-    // we optimistically update here
-    onMutate: async (entryIds: EntryId[]) => {
-      // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
-
-      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
-
-      if (previousData) {
-        // optimistically update object
-        const { entries, order, flatOrder } = optimisticDeleteEntries(entryIds, previousData);
-
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
-          id: previousData.id,
-          title: previousData.title,
-          order,
-          flatOrder,
-          entries,
-          revision: -1,
-        });
-      }
-
-      // Return a context with the previous and new events
-      return { previousData };
-    },
-
-    // Mutation fails, rollback undoes optimist update
-    onError: (_error, _entryIds, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
-    },
-    // Mutation finished, failed or successful
-    // Fetch anyway, just to be sure
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
-    },
-  });
-
-  /**
-   * Deletes an event entry from the rundown
-   */
-  const deleteEntry = useCallback(
-    async (entryIds: EntryId[]) => {
-      try {
-        await deleteEntryMutation(entryIds);
-      } catch (error) {
-        logAxiosError('Error deleting event', error);
-      }
-    },
-    [deleteEntryMutation],
-  );
-
-  /**
-   * Calls mutation to delete all events
-   * @private
-   */
-  const { mutateAsync: deleteAllEntriesMutation } = useMutation({
-    mutationFn: requestDeleteAll,
-    // we optimistically update here
-    onMutate: async () => {
-      // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
-
-      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
-
-      // optimistically update object
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
-        id: previousData?.id ?? 'default',
-        title: previousData?.title ?? '',
-        order: [],
-        flatOrder: [],
-        entries: {},
-        revision: -1,
-      });
-
-      // Return a context with the previous and new events
-      return { previousData };
-    },
-
-    // Mutation fails, rollback optimist update
-    onError: (_error, _, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
-    },
-    // Mutation finished, failed or successful
-    // Fetch anyway, just to be sure
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
-    },
-  });
-
-  /**
-   * Deletes all entries in the rundown
-   */
-  const deleteAllEntries = useCallback(async () => {
-    try {
-      await deleteAllEntriesMutation();
-    } catch (error) {
-      logAxiosError('Error deleting events', error);
-    }
-  }, [deleteAllEntriesMutation]);
-
-  /**
-   * Calls mutation to apply a delay
-   * @private
-   */
-  const { mutateAsync: applyDelayMutation } = useMutation({
-    mutationFn: requestApplyDelay,
-    onSuccess: (response) => {
-      if (!response.data) return;
-
-      const { id, title, order, flatOrder, entries, revision } = response.data;
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
-        id,
-        title,
-        order,
-        flatOrder,
-        entries,
-        revision,
-      });
-    },
-    // Mutation finished, failed or successful
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
-    },
-  });
-
-  /**
-   * Applies a given delay
-   */
-  const applyDelay = useCallback(
-    async (delayEventId: EntryId) => {
-      try {
-        await applyDelayMutation(delayEventId);
-      } catch (error) {
-        logAxiosError('Error applying delay', error);
-      }
-    },
-    [applyDelayMutation],
-  );
-
-  /**
-   * Calls mutation to dissolve a block
-   * @private
-   */
-  const { mutateAsync: ungroupMutation } = useMutation({
-    mutationFn: requestUngroup,
-    onSuccess: (response) => {
-      if (!response.data) return;
-
-      const { id, title, order, flatOrder, entries, revision } = response.data;
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
-        id,
-        title,
-        order,
-        flatOrder,
-        entries,
-        revision,
-      });
-    },
-    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
-  });
-
-  /**
-   * Deletes a block and moves its events to the top level
-   */
-  const ungroup = useCallback(
-    async (blockId: EntryId) => {
-      try {
-        await ungroupMutation(blockId);
-      } catch (error) {
-        logAxiosError('Error dissolving block', error);
-      }
-    },
-    [ungroupMutation],
-  );
-
-  /**
-   * Calls mutation to create a block with a selection
-   * @private
-   */
-  const { mutateAsync: groupEntriesMutation } = useMutation({
-    mutationFn: requestGroupEntries,
-    onSuccess: (response) => {
-      if (!response.data) return;
-
-      const { id, title, order, flatOrder, entries, revision } = response.data;
-      queryClient.setQueryData<Rundown>(RUNDOWN, {
-        id,
-        title,
-        order,
-        flatOrder,
-        entries,
-        revision,
-      });
-    },
-    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
-  });
-
-  /**
-   * Create a block with a selection
-   */
-  const groupEntries = useCallback(
-    async (entryIds: EntryId[]) => {
-      try {
-        await groupEntriesMutation(entryIds);
-      } catch (error) {
-        logAxiosError('Error grouping entries', error);
-      }
-    },
-    [groupEntriesMutation],
-  );
-
-  /**
-   * Calls mutation to reorder an entry
-   * @private
-   */
-  const { mutateAsync: reorderEntryMutation } = useMutation({
-    mutationFn: patchReorderEntry,
-    // Mutation finished, failed or successful
-    // Fetch anyway, just to be sure
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
-    },
-  });
-
-  /**
-   * 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
-   */
-  const reorderEntry = useCallback(
-    async (entryId: EntryId, destinationId: EntryId, order: 'before' | 'after' | 'insert') => {
-      try {
-        const reorderObject: ReorderEntry = {
-          entryId,
-          destinationId,
-          order,
-        };
-        await reorderEntryMutation(reorderObject);
-      } catch (error) {
-        logAxiosError('Error re-ordering event', error);
-      }
-    },
-    [reorderEntryMutation],
-  );
-
-  /**
-   * Calls mutation to swap events
-   * @private
-   */
-  const { mutateAsync: swapEventsMutation } = useMutation({
-    mutationFn: requestEventSwap,
-    // we optimistically update here
-    onMutate: async ({ from, to }) => {
-      // cancel ongoing queries
-      await queryClient.cancelQueries({ queryKey: RUNDOWN });
-
-      // Snapshot the previous value
-      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
-      if (previousData) {
-        // optimistically update object
-        const newRundown = { ...previousData.entries };
-        const eventA = previousData.entries[from];
-        const eventB = previousData.entries[to];
-
-        if (!isOntimeEvent(eventA) || !isOntimeEvent(eventB)) {
-          return;
-        }
-
-        const [newA, newB] = swapEventData(eventA, eventB);
-        newRundown[from] = newA;
-        newRundown[to] = newB;
-
-        queryClient.setQueryData<Rundown>(RUNDOWN, {
-          id: previousData.id,
-          title: previousData.title,
-          order: previousData.order,
-          flatOrder: previousData.flatOrder,
-          entries: newRundown,
-          revision: -1,
-        });
-      }
-
-      // Return a context with the previous events
-      return { previousData };
-    },
-
-    // Mutation fails, rollback undoes optimist update
-    onError: (_error, _eventId, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
-    },
-    // Mutation finished, failed or successful
-    // Fetch anyway, just to be sure
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: RUNDOWN });
-    },
-  });
-
-  /**
-   * Swaps the schedule of two events
-   */
-  const swapEvents = useCallback(
-    async ({ from, to }: SwapEntry) => {
-      try {
-        await swapEventsMutation({ from, to });
-      } catch (error) {
-        logAxiosError('Error re-ordering event', error);
-      }
-    },
-    [swapEventsMutation],
-  );
-
-  return {
-    addEntry,
-    applyDelay,
-    batchUpdateEvents,
-    clone,
-    deleteEntry,
-    deleteAllEntries,
-    ungroup,
-    getEntryById,
-    groupEntries,
-    move,
-    reorderEntry,
-    swapEvents,
-    updateEntry,
-    updateTimer,
-    updateCustomField,
-  };
-};
-
-/**
- * Utility to optimistically delete entries from client cache
- */
-function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
-  const entries = { ...rundown.entries };
-  let order = [...rundown.order];
-  let flatOrder = [...rundown.flatOrder];
-
-  for (let i = 0; i < entryIds.length; i++) {
-    const entry = entries[entryIds[i]];
-    deleteEntry(entry);
-  }
-
-  function deleteEntry(entry: OntimeEntry) {
-    if (isOntimeBlock(entry) || !entry.parent) {
-      order = order.filter((id) => id !== entry.id);
-    } else {
-      const parent = entries[entry.parent] as OntimeBlock;
-      parent.entries = parent.entries.filter((parentEntry) => parentEntry !== entry.id);
-    }
-
-    delete entries[entry.id];
-    flatOrder = flatOrder.filter((id) => id !== entry.id);
-  }
-
-  return { entries, order, flatOrder };
-}
@@ -0,0 +1,636 @@
+import { useCallback } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  isOntimeEvent,
+  OntimeBlock,
+  OntimeDelay,
+  OntimeEvent,
+  OntimeRundownEntry,
+  RundownCached,
+  TimeField,
+  TimeStrategy,
+  TransientEventPayload,
+} from 'ontime-types';
+import { dayInMs, MILLIS_PER_SECOND, parseUserTime, reorderArray, swapEventData } from 'ontime-utils';
+
+import { RUNDOWN } from '../api/constants';
+import {
+  ReorderEntry,
+  requestApplyDelay,
+  requestBatchPutEvents,
+  requestDelete,
+  requestDeleteAll,
+  requestEventSwap,
+  requestPostEvent,
+  requestPutEvent,
+  requestReorderEvent,
+  SwapEntry,
+} from '../api/rundown';
+import { logAxiosError } from '../api/utils';
+import { useEditorSettings } from '../stores/editorSettings';
+
+export type EventOptions = Partial<{
+  // options to any new block (event / delay / block)
+  after: string;
+  before: string;
+  // options to blocks of type OntimeEvent
+  defaultPublic: boolean;
+  linkPrevious: boolean;
+  lastEventId: string;
+}>;
+
+/**
+ * @description Set of utilities for events //TODO: should this be called useEntryAction and so on
+ */
+export const useEventAction = () => {
+  const queryClient = useQueryClient();
+  const {
+    defaultPublic,
+    linkPrevious,
+    defaultTimeStrategy,
+    defaultDuration,
+    defaultWarnTime,
+    defaultDangerTime,
+    defaultTimerType,
+    defaultEndAction,
+  } = useEditorSettings();
+
+  const getEventById = useCallback(
+    (eventId: string) => {
+      const cachedRundown = queryClient.getQueryData<RundownCached>(RUNDOWN);
+      if (!cachedRundown?.rundown) {
+        return;
+      }
+      return cachedRundown.rundown[eventId];
+    },
+    [queryClient],
+  );
+
+  /**
+   * Calls mutation to add new event
+   * @private
+   */
+  const _addEventMutation = useMutation({
+    mutationFn: requestPostEvent,
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+    networkMode: 'always',
+  });
+
+  /**
+   * Adds an event to rundown
+   */
+  const addEvent = useCallback(
+    async (event: Partial<OntimeEvent | OntimeDelay | OntimeBlock>, options?: EventOptions) => {
+      const newEvent: TransientEventPayload = { ...event };
+
+      // ************* CHECK OPTIONS specific to events
+      if (isOntimeEvent(newEvent)) {
+        // merge creation time options with event settings
+        const applicationOptions = {
+          after: options?.after,
+          before: options?.before,
+          defaultPublic: options?.defaultPublic ?? defaultPublic,
+          lastEventId: options?.lastEventId,
+          linkPrevious: options?.linkPrevious ?? linkPrevious,
+        };
+
+        if (applicationOptions.linkPrevious && applicationOptions?.lastEventId) {
+          newEvent.linkStart = applicationOptions.lastEventId;
+        } else if (applicationOptions?.lastEventId) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this is a value
+          const rundownData = queryClient.getQueryData<RundownCached>(RUNDOWN)!;
+          const { rundown } = rundownData;
+          const previousEvent = rundown[applicationOptions.lastEventId];
+          if (isOntimeEvent(previousEvent)) {
+            newEvent.timeStart = previousEvent.timeEnd;
+          }
+        }
+
+        // Override event with options from editor settings
+        if (applicationOptions.defaultPublic) {
+          newEvent.isPublic = true;
+        }
+
+        if (newEvent.duration === undefined && newEvent.timeEnd === undefined) {
+          newEvent.duration = parseUserTime(defaultDuration);
+        }
+
+        if (newEvent.timeDanger === undefined) {
+          newEvent.timeDanger = parseUserTime(defaultDangerTime);
+        }
+
+        if (newEvent.timeWarning === undefined) {
+          newEvent.timeWarning = parseUserTime(defaultWarnTime);
+        }
+
+        if (newEvent.timerType === undefined) {
+          newEvent.timerType = defaultTimerType;
+        }
+
+        if (newEvent.endAction === undefined) {
+          newEvent.endAction = defaultEndAction;
+        }
+
+        if (newEvent.timeStrategy === undefined) {
+          newEvent.timeStrategy = defaultTimeStrategy;
+        }
+      }
+
+      // handle adding options that concern all event type
+      if (options?.after) {
+        // @ts-expect-error -- not sure how to type this, <after> is a transient property
+        newEvent.after = options.after;
+      }
+      if (options?.before) {
+        // @ts-expect-error -- not sure how to type this, <before> is a transient property
+        newEvent.before = options.before;
+      }
+
+      try {
+        await _addEventMutation.mutateAsync(newEvent as TransientEventPayload);
+      } catch (error) {
+        logAxiosError('Failed adding event', error);
+      }
+    },
+    [
+      _addEventMutation,
+      defaultDangerTime,
+      defaultDuration,
+      defaultEndAction,
+      defaultPublic,
+      defaultTimerType,
+      defaultTimeStrategy,
+      defaultWarnTime,
+      linkPrevious,
+      queryClient,
+    ],
+  );
+
+  /**
+   * Calls mutation to update existing event
+   * @private
+   */
+  const _updateEventMutation = useMutation({
+    mutationFn: requestPutEvent,
+    // we optimistically update here
+    onMutate: async (newEvent) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+
+      // Snapshot the previous value
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);
+      const eventId = newEvent.id;
+
+      if (previousData && eventId) {
+        // optimistically update object
+        const newRundown = { ...previousData.rundown };
+        // @ts-expect-error -- we expect the events to be of same type
+        newRundown[eventId] = { ...newRundown[eventId], ...newEvent };
+        queryClient.setQueryData(RUNDOWN, { order: previousData.order, rundown: newRundown, revision: -1 });
+      }
+
+      // Return a context with the previous and new events
+      return { previousData, newEvent };
+    },
+    // Mutation fails, rollback undoes optimist update
+    onError: (_error, _newEvent, context) => {
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: async () => {
+      await queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+    networkMode: 'always',
+  });
+
+  /**
+   * Updates existing event
+   */
+  const updateEvent = useCallback(
+    async (event: Partial<OntimeRundownEntry>) => {
+      try {
+        await _updateEventMutation.mutateAsync(event);
+      } catch (error) {
+        logAxiosError('Error updating event', error);
+      }
+    },
+    [_updateEventMutation],
+  );
+
+  const updateCustomField = useCallback(
+    async (eventId: string, field: string, value: string) => {
+      updateEvent({ id: eventId, custom: { [field]: value } });
+    },
+    [updateEvent],
+  );
+
+  /**
+   * Updates time of existing event
+   * @param eventId {string} - id of the event
+   * @param field {TimeField} - field to update
+   * @param value {string} - new value string to be parsed
+   * @param lockOnUpdate {boolean} - whether we will apply the lock / release on update
+   */
+  const updateTimer = useCallback(
+    async (eventId: string, field: TimeField, value: string, lockOnUpdate?: boolean) => {
+      // an empty value with no lock has no domain validity
+      if (!lockOnUpdate && value === '') {
+        return;
+      }
+
+      const newEvent: Partial<OntimeEvent> = {
+        id: eventId,
+      };
+
+      // check if we should lock the field
+      if (lockOnUpdate) {
+        if (field === 'timeEnd') {
+          // an empty value indicates that we should unlock the field
+          newEvent.timeStrategy = value === '' ? TimeStrategy.LockDuration : TimeStrategy.LockEnd;
+          newEvent.timeEnd = value === '' ? undefined : calculateNewValue();
+        } else if (field === 'duration') {
+          // an empty value indicates that we should unlock the field
+          newEvent.timeStrategy = value === '' ? TimeStrategy.LockEnd : TimeStrategy.LockDuration;
+          newEvent.duration = value === '' ? undefined : calculateNewValue();
+        } else if (field === 'timeStart') {
+          // an empty values means we should link to the previous
+          newEvent.linkStart = value === '' ? 'true' : null;
+          newEvent.timeStart = value === '' ? undefined : calculateNewValue();
+        }
+      } else {
+        newEvent[field] = calculateNewValue();
+      }
+
+      try {
+        await _updateEventMutation.mutateAsync(newEvent);
+      } catch (error) {
+        logAxiosError('Error updating event', error);
+      }
+
+      /**
+       * Utility function to calculate the new time value
+       */
+      function calculateNewValue(): number {
+        let newValMillis = 0;
+
+        // check for previous keyword
+        if (value === 'p' || value === 'prev' || value === 'previous') {
+          newValMillis = getPreviousEnd();
+
+          // check for adding time keyword
+        } else if (value.startsWith('+') || value.startsWith('p+') || value.startsWith('p +')) {
+          // TODO: is this logic solid?
+          const remainingString = value.substring(1);
+          newValMillis = getPreviousEnd() + parseUserTime(remainingString);
+        } else {
+          newValMillis = parseUserTime(value);
+        }
+        // dont allow timer values over 23:59:59
+        return Math.min(newValMillis, dayInMs - MILLIS_PER_SECOND);
+      }
+
+      /**
+       * Utility function to get the previous event end time
+       */
+      function getPreviousEnd(): number {
+        const cachedRundown = queryClient.getQueryData<RundownCached>(RUNDOWN);
+
+        if (!cachedRundown?.order || !cachedRundown?.rundown) {
+          return 0;
+        }
+
+        const index = cachedRundown.order.indexOf(eventId);
+        if (index === 0) {
+          return 0;
+        }
+        let previousEnd = 0;
+        for (let i = index - 1; i >= 0; i--) {
+          const event = cachedRundown.rundown[cachedRundown.order[i]];
+          if (isOntimeEvent(event)) {
+            previousEnd = event.timeEnd;
+            break;
+          }
+        }
+        return previousEnd;
+      }
+    },
+    [_updateEventMutation, queryClient],
+  );
+
+  /**
+   * Calls mutation to edit multiple events
+   * @private
+   */
+  const _batchUpdateEventsMutation = useMutation({
+    mutationFn: requestBatchPutEvents,
+    onMutate: async ({ ids, data }) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+
+      // Snapshot the previous value
+      const previousEvents = queryClient.getQueryData<RundownCached>(RUNDOWN);
+
+      if (previousEvents) {
+        const eventIds = new Set(ids);
+        const newRundown = { ...previousEvents.rundown };
+
+        eventIds.forEach((eventId) => {
+          if (Object.hasOwn(newRundown, eventId)) {
+            const event = newRundown[eventId];
+            if (isOntimeEvent(event)) {
+              newRundown[eventId] = {
+                ...event,
+                ...data,
+              };
+            }
+          }
+        });
+
+        queryClient.setQueryData(RUNDOWN, { order: previousEvents.order, rundown: newRundown, revision: -1 });
+      }
+      // Return a context with the previous and new events
+      return { previousEvents };
+    },
+    onSettled: async () => {
+      await queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+    onError: (_error, _newEvent, context) => {
+      queryClient.setQueryData(RUNDOWN, context?.previousEvents);
+    },
+    networkMode: 'always',
+  });
+
+  const batchUpdateEvents = useCallback(
+    async (data: Partial<OntimeEvent>, eventIds: string[]) => {
+      try {
+        await _batchUpdateEventsMutation.mutateAsync({ ids: eventIds, data });
+      } catch (error) {
+        logAxiosError('Error updating events', error);
+      }
+    },
+    [_batchUpdateEventsMutation],
+  );
+
+  /**
+   * Calls mutation to delete an event
+   * @private
+   */
+  const _deleteEventMutation = useMutation({
+    mutationFn: requestDelete,
+    // we optimistically update here
+    onMutate: async (eventIds: string[]) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+
+      // Snapshot the previous value
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);
+
+      if (previousData) {
+        // optimistically update object
+        const newOrder = previousData.order.filter((id) => !eventIds.includes(id));
+        const newRundown = { ...previousData.rundown };
+        for (const eventId of eventIds) {
+          delete newRundown[eventId];
+        }
+
+        queryClient.setQueryData(RUNDOWN, {
+          order: newOrder,
+          rundown: newRundown,
+          revision: -1,
+        });
+      }
+
+      // Return a context with the previous and new events
+      return { previousData };
+    },
+
+    // Mutation fails, rollback undoes optimist update
+    onError: (_error, _eventId, context) => {
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+    networkMode: 'always',
+  });
+
+  /**
+   * Deletes an event form the list
+   */
+  const deleteEvent = useCallback(
+    async (eventIds: string[]) => {
+      try {
+        await _deleteEventMutation.mutateAsync(eventIds);
+      } catch (error) {
+        logAxiosError('Error deleting event', error);
+      }
+    },
+    [_deleteEventMutation],
+  );
+
+  /**
+   * Calls mutation to delete all events
+   * @private
+   */
+  const _deleteAllEventsMutation = useMutation({
+    mutationFn: requestDeleteAll,
+    // we optimistically update here
+    onMutate: async () => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+
+      // Snapshot the previous value
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);
+
+      // optimistically update object
+      queryClient.setQueryData(RUNDOWN, { rundown: {}, order: [], revision: -1 });
+
+      // Return a context with the previous and new events
+      return { previousData };
+    },
+
+    // Mutation fails, rollback undos optimist update
+    onError: (_error, _eventId, context) => {
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+    networkMode: 'always',
+  });
+
+  /**
+   * Deletes all events from list
+   */
+  const deleteAllEvents = useCallback(async () => {
+    try {
+      await _deleteAllEventsMutation.mutateAsync();
+    } catch (error) {
+      logAxiosError('Error deleting events', error);
+    }
+  }, [_deleteAllEventsMutation]);
+
+  /**
+   * Calls mutation to apply a delay
+   * @private
+   */
+  const _applyDelayMutation = useMutation({
+    mutationFn: requestApplyDelay,
+    // Mutation finished, failed or successful
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+    networkMode: 'always',
+  });
+
+  /**
+   * Applies a given delay block
+   */
+  const applyDelay = useCallback(
+    async (delayEventId: string) => {
+      try {
+        await _applyDelayMutation.mutateAsync(delayEventId);
+      } catch (error) {
+        logAxiosError('Error applying delay', error);
+      }
+    },
+    [_applyDelayMutation],
+  );
+
+  /**
+   * Calls mutation to reorder an event
+   * @private
+   */
+  const _reorderEventMutation = useMutation({
+    mutationFn: requestReorderEvent,
+    // we optimistically update here
+    onMutate: async (data) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+
+      // Snapshot the previous value
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);
+
+      if (previousData) {
+        // optimistically update object
+        const newOrder = reorderArray(previousData.order, data.from, data.to);
+
+        queryClient.setQueryData(RUNDOWN, { order: newOrder, rundown: previousData.rundown, revision: -1 });
+      }
+
+      // Return a context with the previous and new events
+      return { previousData };
+    },
+
+    // Mutation fails, rollback undoes optimist update
+    onError: (_error, _eventId, context) => {
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+    networkMode: 'always',
+  });
+
+  /**
+   * Reorders a given event
+   */
+  const reorderEvent = useCallback(
+    async (eventId: string, from: number, to: number) => {
+      try {
+        const reorderObject: ReorderEntry = {
+          eventId,
+          from,
+          to,
+        };
+        await _reorderEventMutation.mutateAsync(reorderObject);
+      } catch (error) {
+        logAxiosError('Error re-ordering event', error);
+      }
+    },
+    [_reorderEventMutation],
+  );
+
+  /**
+   * Calls mutation to swap events
+   * @private
+   */
+  const _swapEvents = useMutation({
+    mutationFn: requestEventSwap,
+    // we optimistically update here
+    onMutate: async ({ from, to }) => {
+      // cancel ongoing queries
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+
+      // Snapshot the previous value
+      const previousData = queryClient.getQueryData<RundownCached>(RUNDOWN);
+      if (previousData) {
+        // optimistically update object
+        const newRundown = { ...previousData.rundown };
+        const eventA = previousData.rundown[from];
+        const eventB = previousData.rundown[to];
+
+        if (!isOntimeEvent(eventA) || !isOntimeEvent(eventB)) {
+          return;
+        }
+
+        const { newA, newB } = swapEventData(eventA, eventB);
+        newRundown[from] = newA;
+        newRundown[to] = newB;
+
+        queryClient.setQueryData(RUNDOWN, { order: previousData.order, rundown: newRundown, revision: -1 });
+      }
+
+      // Return a context with the previous events
+      return { previousData };
+    },
+
+    // Mutation fails, rollback undoes optimist update
+    onError: (_error, _eventId, context) => {
+      queryClient.setQueryData(RUNDOWN, context?.previousData);
+    },
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
+    networkMode: 'always',
+  });
+
+  /**
+   * Swaps the schedule of two events
+   */
+  const swapEvents = useCallback(
+    async ({ from, to }: SwapEntry) => {
+      try {
+        await _swapEvents.mutateAsync({ from, to });
+      } catch (error) {
+        logAxiosError('Error re-ordering event', error);
+      }
+    },
+    [_swapEvents],
+  );
+
+  return {
+    addEvent,
+    applyDelay,
+    batchUpdateEvents,
+    deleteEvent,
+    deleteAllEvents,
+    getEventById,
+    reorderEvent,
+    swapEvents,
+    updateEvent,
+    updateTimer,
+    updateCustomField,
+  };
+};
@@ -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;
 };
@@ -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,
-  };
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	e2c9ee31ad	bump version to 3.16.1	2025-08-15 19:54:38 +02:00
Carlos Valente	bfd85855d4	fix: prevent storage key conflicts between stages	2025-08-15 19:54:38 +02:00
Carlos Valente	20859abda9	chore: add demo images to github	2025-08-09 07:01:01 +02:00
Alex Christoffer Rasmussen	1025347c08	refactor: add version to session endpoint (#1659 )	2025-06-23 20:42:53 +02:00
Carlos Valente	43988ea12b	fix: stale ids in cuesheet (#1657 )	2025-06-23 19:56:53 +02:00
Alex Christoffer Rasmussen	722e045b20	Revert "Session version" (#1649 ) * Revert "refactor: add version to session endpoint" This reverts commit `cd40a6e55e`. * Revert "Remove public event feature (#1645)" This reverts commit `08d9e24871`. * Revert "Fix: rearrange playing event (#1640)" This reverts commit `0649678dca`. * Revert "refactor: style tweaks to edit css modal" This reverts commit `a00ec2d02a`. * Revert "refactor: remove usages of framer-motion" This reverts commit `54a74ccc2a`. * Revert "Upgrade expressjs (#1633)" This reverts commit `6f3ab274bd`. * Revert "Refactor: require trigger in all events objects (#1636)" This reverts commit `90870ecfb6`. * Revert "Fix: Correct boundary condition in applyDelay" This reverts commit `b640e0e181`. * Revert "let vite be the proxy to the dev server (#1630)" This reverts commit `c41fe824cf`. * Revert "refactor: migrate custom fields to transactions" This reverts commit `62c8319d70`. * Revert "refactor: simplify validations" This reverts commit `b1d23467a2`. * Revert "refactor: create transaction system and apply to adding entry (#1620)" This reverts commit `9a62daf047`. * Revert "Refactor: better rounding (#1594)" This reverts commit `b9ab1c6fd7`. * Revert "refactor: improve reorder logic" This reverts commit `c1054711b0`. * Revert "chore: simplify URLs" This reverts commit `a4d4f29a37`. * Revert "refactor: order is single source of truth" This reverts commit `2793aadea0`. * Revert "refactor: refetch targets is enum" This reverts commit `e7cfb7d9d9`. * Revert "refactor: small ux improvements" This reverts commit `256a851c9b`. * Revert "refactor: remove trivially inferred numEvents" This reverts commit `4ab9c81cb8`. * Revert "feat: duplicate groups" This reverts commit `2f13d6c89e`. * Revert "feat: create group from entry selection" This reverts commit `f1f7bad25e`. * Revert "feat: create block from rundown empty" This reverts commit `a8b52a48f7`. * Revert "fix: collapsed blocks dont render children" This reverts commit `cd0999b2ab`. * Revert "refactor: type cleanup and test improvements" This reverts commit `b4c60f3f04`. * Revert "feat: allow dissolving a block" This reverts commit `5cefad3666`. * Revert "fix: uncontrolled prop on controlled component" This reverts commit `7a6ecd8c34`. * Revert "refactor: improve return of reorder" This reverts commit `ba96ecfd91`. * Revert "refactor: mutations on batch elements must have IDs" This reverts commit `7bed3757f2`. * Revert "chore: upgrade dependencies" This reverts commit `e2e755b1d2`. * Revert "refactor: extract utility to merge two arrays" This reverts commit `a77d23109d`. * Revert "refactor: change network mode defaults" This reverts commit `0eb3b8d382`. * Revert "fix: delete nested events" This reverts commit `0021185288`. * Revert "fix: add event at end of block" This reverts commit `94c72ff4f6`. * Revert "refactor: make finder available in exported rundown" This reverts commit `e4c08dc9b2`. * Revert "assert non null and update test (#1604)" This reverts commit `ec74af0d62`. * Revert "Fix project renumber (#1597)" This reverts commit `b6d72dd082`. * Revert "Refactor: WebSocket from flush queue to one patch (#1595)" This reverts commit `31c311daf0`. * Revert "Refactor: ms for api calls (#1593)" This reverts commit `e9b3cc6090`. * Revert "fix test (#1601)" This reverts commit `543b04a097`. * Revert "fix: rebase master" This reverts commit `d39b85b6e6`. * Revert "chore: correct test path" This reverts commit `bbe107bb2b`. * Revert "refactor: extract rundown parsing" This reverts commit `c616240db1`. * Revert "chore: improve convention entry <> event" This reverts commit `166be66ce3`. * Revert "refactor: maintain flat orders" This reverts commit `4180d0a337`. * Revert "refactor: implement operations on nested events" This reverts commit `78108e316c`. * Revert "refactor: process events in rundown" This reverts commit `3bb8b70915`. * Revert "chore: improve convention entry <> event" This reverts commit `1c4f13a0ed`. * Revert "chore: rename currentBlock > parent" This reverts commit `3ca0abad53`. * Revert "refactor: fix delay positioning in gaps" This reverts commit `030c8f897f`. * Revert "refactor(e2e): skip flaky test" This reverts commit `68175cfa3b`. * Revert "refactor: improve project loading" This reverts commit `fd8f757851`. * Revert "refactor: gather group metadata" This reverts commit `876d111c61`. * Revert "refactor: swap maintains schedule" This reverts commit `730cb95c04`. * Revert "chore: rename files" This reverts commit `3c388d4fb5`. * Revert "refactor: restructure model to contain an object of rundowns" This reverts commit `2e23718d73`. * Revert "refactor: clearer relationship on rundown elements" This reverts commit `89ea8c470b`. * Revert "refactor: use strict typing" This reverts commit `178640bfc4`. * Revert "refactor: remove stop as a possible end action" This reverts commit `4ed38340e0`. * Revert "refactor: restructure model to contain an object of rundowns" This reverts commit `69eb9a5eff`. * Revert "chore: remove IDE files" This reverts commit `351425127a`. * Revert "refactor: remove unused and legacy code" This reverts commit `95f2ba37cc`.	2025-06-20 12:28:20 +02:00
Carlos Valente	ad6804019b	bump version to 3.16.0	2025-06-20 07:41:39 +02:00
Carlos Valente	cd40a6e55e	refactor: add version to session endpoint	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	08d9e24871	Remove public event feature (#1645 )	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	0649678dca	Fix: rearrange playing event (#1640 ) * creat failing test * find and pass index of eventNow in case it moved * fix cache invalidate edits should also recalculate timer * use coluor as test indicator * fixed empty cue guard Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2025-06-19 18:53:28 +02:00
google-labs-jules[bot]	a00ec2d02a	refactor: style tweaks to edit css modal	2025-06-19 18:53:28 +02:00
google-labs-jules[bot]	54a74ccc2a	refactor: remove usages of framer-motion	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	6f3ab274bd	Upgrade expressjs (#1633 ) * upgrade expressjs * migration * reenable test * extend timeout on download test * fixup! migration * move empty body test from controller to validator * enusre not empty * extract validation function * fixup! reenable test * remove thin controllers * disable e2e test of project file download	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	90870ecfb6	Refactor: require trigger in all events objects (#1636 ) * reqire trigger in all events * use structuredClone when cloning an event	2025-06-19 18:53:28 +02:00
google-labs-jules[bot]	b640e0e181	Fix: Correct boundary condition in applyDelay The `applyDelay` function had a condition that incorrectly used `rundown.order.length` instead of `rundownMetadata.flatEntryOrder.length` to check if a delay entry was the last in the sequence. `rundown.order` only contains top-level entries, while `flatEntryOrder` contains all entries, including those within blocks, which is the relevant list for this check. This commit corrects the condition to use `rundownMetadata.flatEntryOrder.length`. Existing tests in `rundown.dao.test.ts` (specifically the test `removes delays in last position without applying changes`) already cover this scenario and pass with the correction, ensuring the fix behaves as expected.	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	c41fe824cf	let vite be the proxy to the dev server (#1630 )	2025-06-19 18:53:28 +02:00
Carlos Valente	62c8319d70	refactor: migrate custom fields to transactions refactor: extract functions to api domain refactor: strict custom field parsing refactor: remove rundown cache utilities refactor: directory restructure	2025-06-19 18:53:28 +02:00
Carlos Valente	b1d23467a2	refactor: simplify validations	2025-06-19 18:53:28 +02:00
Carlos Valente	9a62daf047	refactor: create transaction system and apply to adding entry (#1620 ) * refactor: create transaction system and apply to adding entry * refactor: migrate edit mutations to transaction * refactor: migrate delete mutation to transaction * refactor: migrate reorder mutation to transaction * refactor: migrate apply delay to transaction * refactor: migrate swapEvents to transaction * refactor: migrate clone to transaction * refactor: migrate group/ungroup transactions * refactor: simplify mutations * refactor: migrate getters * chore: add tests to processRundown()	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	b9ab1c6fd7	Refactor: better rounding (#1594 )	2025-06-19 18:53:28 +02:00
Carlos Valente	c1054711b0	refactor: improve reorder logic	2025-06-19 18:53:28 +02:00
Carlos Valente	a4d4f29a37	chore: simplify URLs	2025-06-19 18:53:28 +02:00
Carlos Valente	2793aadea0	refactor: order is single source of truth	2025-06-19 18:53:28 +02:00
Carlos Valente	e7cfb7d9d9	refactor: refetch targets is enum	2025-06-19 18:53:28 +02:00
Carlos Valente	256a851c9b	refactor: small ux improvements - rename dissolve > ungroup - prevent ondrag when clicking - add untitled as block title fallback - move block action to context menu	2025-06-19 18:53:28 +02:00
Carlos Valente	4ab9c81cb8	refactor: remove trivially inferred numEvents	2025-06-19 18:53:28 +02:00
Carlos Valente	2f13d6c89e	feat: duplicate groups	2025-06-19 18:53:28 +02:00
Carlos Valente	f1f7bad25e	feat: create group from entry selection	2025-06-19 18:53:28 +02:00
Carlos Valente	a8b52a48f7	feat: create block from rundown empty	2025-06-19 18:53:28 +02:00
Carlos Valente	cd0999b2ab	fix: collapsed blocks dont render children	2025-06-19 18:53:28 +02:00
Carlos Valente	b4c60f3f04	refactor: type cleanup and test improvements	2025-06-19 18:53:28 +02:00
Carlos Valente	5cefad3666	feat: allow dissolving a block	2025-06-19 18:53:28 +02:00
Carlos Valente	7a6ecd8c34	fix: uncontrolled prop on controlled component	2025-06-19 18:53:28 +02:00
Carlos Valente	ba96ecfd91	refactor: improve return of reorder	2025-06-19 18:53:28 +02:00
Carlos Valente	7bed3757f2	refactor: mutations on batch elements must have IDs	2025-06-19 18:53:28 +02:00
Carlos Valente	e2e755b1d2	chore: upgrade dependencies	2025-06-19 18:53:28 +02:00
Carlos Valente	a77d23109d	refactor: extract utility to merge two arrays	2025-06-19 18:53:28 +02:00
Carlos Valente	0eb3b8d382	refactor: change network mode defaults	2025-06-19 18:53:28 +02:00
Carlos Valente	0021185288	fix: delete nested events	2025-06-19 18:53:28 +02:00
Carlos Valente	94c72ff4f6	fix: add event at end of block	2025-06-19 18:53:28 +02:00
Carlos Valente	e4c08dc9b2	refactor: make finder available in exported rundown	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	ec74af0d62	assert non null and update test (#1604 )	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	b6d72dd082	Fix project renumber (#1597 ) * fix: generateUniqueFileName * loadProject should not generate new names * update comments * extract and test getProjectNumber * spell * finish jsdoc * use getProjectNumber * cleanup loadProject * create a `incrementProjectNumber` function * spelling Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com> --------- Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	31c311daf0	Refactor: WebSocket from flush queue to one patch (#1595 ) * change flush to one patch * remove unused types * create batch * merge patch into eventStore Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	e9b3cc6090	Refactor: ms for api calls (#1593 ) * use ms for api calls * change it in UI * update comment * rename variables * refactor: addtime api logic	2025-06-19 18:53:28 +02:00
Alex Christoffer Rasmussen	543b04a097	fix test (#1601 ) * fix test * add comment	2025-06-19 18:53:28 +02:00
Carlos Valente	d39b85b6e6	fix: rebase master	2025-06-19 18:53:28 +02:00
Carlos Valente	bbe107bb2b	chore: correct test path	2025-06-19 18:53:28 +02:00
Carlos Valente	c616240db1	refactor: extract rundown parsing refactor: implement groups in editor	2025-06-19 18:53:28 +02:00
Carlos Valente	166be66ce3	chore: improve convention entry <> event	2025-06-19 18:53:28 +02:00
Carlos Valente	4180d0a337	refactor: maintain flat orders	2025-06-19 18:53:28 +02:00
Carlos Valente	78108e316c	refactor: implement operations on nested events	2025-06-19 18:53:28 +02:00
Carlos Valente	3bb8b70915	refactor: process events in rundown	2025-06-19 18:53:28 +02:00
Carlos Valente	1c4f13a0ed	chore: improve convention entry <> event	2025-06-19 18:53:28 +02:00
Carlos Valente	3ca0abad53	chore: rename currentBlock > parent	2025-06-19 18:53:28 +02:00
Carlos Valente	030c8f897f	refactor: fix delay positioning in gaps	2025-06-19 18:53:28 +02:00
Carlos Valente	68175cfa3b	refactor(e2e): skip flaky test	2025-06-19 18:53:28 +02:00
Carlos Valente	fd8f757851	refactor: improve project loading	2025-06-19 18:53:28 +02:00
Carlos Valente	876d111c61	refactor: gather group metadata	2025-06-19 18:53:28 +02:00
Carlos Valente	730cb95c04	refactor: swap maintains schedule	2025-06-19 18:53:28 +02:00
Carlos Valente	3c388d4fb5	chore: rename files	2025-06-19 18:53:28 +02:00
Carlos Valente	2e23718d73	refactor: restructure model to contain an object of rundowns	2025-06-19 18:53:28 +02:00
Carlos Valente	89ea8c470b	refactor: clearer relationship on rundown elements	2025-06-19 18:53:28 +02:00
Carlos Valente	178640bfc4	refactor: use strict typing	2025-06-19 18:53:28 +02:00
Carlos Valente	4ed38340e0	refactor: remove stop as a possible end action	2025-06-19 18:53:28 +02:00
Carlos Valente	69eb9a5eff	refactor: restructure model to contain an object of rundowns	2025-06-19 18:53:28 +02:00
Carlos Valente	351425127a	chore: remove IDE files	2025-06-19 18:53:28 +02:00
Carlos Valente	95f2ba37cc	refactor: remove unused and legacy code - remove legacy migrations - remove unused server code - remove unused UI code	2025-06-19 18:53:28 +02:00