refactor: create mock data utilities

2026-08-06 07:53:54 +00:00 · 2025-01-12 09:05:23 +01:00
625 changed files with 18427 additions and 28041 deletions
@@ -14,12 +14,12 @@ jobs:
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 22
+          node-version: 20
      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 10
+          version: 9
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -56,12 +56,12 @@ jobs:
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 22
+          node-version: 20
      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 10
+          version: 9
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -89,12 +89,12 @@ jobs:
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 22
+          node-version: 20
      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 10
+          version: 9
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -20,13 +20,13 @@ jobs:
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 22
+          node-version: 20
          registry-url: 'https://registry.npmjs.org'
      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 10
+          version: 9
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -17,12 +17,12 @@ jobs:
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 22
+          node-version: 20
      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 10
+          version: 9
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -73,12 +73,12 @@ jobs:
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: 22
+          node-version: 20
      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
-          version: 10
+          version: 9
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -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>
@@ -1 +1 @@
-v22.15.1
+v20.15.1
@@ -9,8 +9,8 @@ Ontime consists of 3 distinct parts
 The steps below will assume you have locally installed the necessary dependencies.
 Other dependencies will be installed as part of the setup
- __node__ (~22)
+- __node__ (~20)
- __pnpm__ (~10)
+- __pnpm__ (~9)
 - __docker__ (only necessary to run and build docker images)
 ## LOCAL DEVELOPMENT
@@ -1,13 +1,13 @@
-FROM node:22-bullseye AS builder
+FROM node:20-bullseye AS builder
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install -g pnpm@10.11.0
+RUN npm install -g pnpm@9.5.0
 COPY . /app
 WORKDIR /app
 RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils install --config.dedupe-peer-dependents=false --frozen-lockfile
 RUN pnpm --filter=ontime-ui --filter=ontime-server run build:docker
-FROM node:22-alpine
+FROM node:20-alpine
 # Set environment variables
 # Environment Variable to signal that we are running production
@@ -24,7 +24,6 @@ COPY --from=builder /app/apps/client/build ./client/
 COPY --from=builder /app/apps/server/dist/ ./server/
 COPY --from=builder /app/apps/server/src/external/ ./external/
 COPY --from=builder /app/apps/server/src/user/ ./user/
 COPY --from=builder /app/apps/server/src/html/ ./html/
 # Export default ports
 EXPOSE 4001/tcp 8888/udp 9999/udp
@@ -2,7 +2,6 @@
 ![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/cpvalente/ontime/total)
 ![Docker Pulls](https://img.shields.io/docker/pulls/getontime/ontime)
 ![NPM Downloads](https://img.shields.io/npm/dy/%40getontime%2Fcli)
 ![Homebrew Cask Version](https://img.shields.io/homebrew/cask/v/ontime)
 [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
 [![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)
@@ -13,11 +12,7 @@
 - Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg">MacOS Arm</a>
 - Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-x64.dmg">MacOS Intel</a>
 - Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage">Linux</a>
 ... or
 - Get from <a href="https://hub.docker.com/r/getontime/ontime">Docker hub</a>
 - Install from <a href="https://www.npmjs.com/package/ontime">NPM</a>
 - Install from <a href="https://formulae.brew.sh/cask/ontime">Homebrew</a>
 ## Need help?
 We do our best to have most topics covered by the documentation. However, if your question is not covered, you are welcome to [fill in a bug report in an issue](https://github.com/cpvalente/ontime/issues), [ask a question in GitHub discussions](https://github.com/cpvalente/ontime/discussions) or hop in the [discord server](https://discord.com/invite/eje3CSUEXm) for a chat.
@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "3.15.2",
+    "version": "3.10.3",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -15,6 +15,7 @@
  ],
  "plugins": [
    "react",
    "testing-library",
    "simple-import-sort",
    "@tanstack/query"
  ],
@@ -1,40 +1,36 @@
 {
  "name": "ontime-ui",
-  "version": "3.15.2",
+  "version": "3.10.3",
  "private": true,
  "type": "module",
  "dependencies": {
    "@chakra-ui/react": "^2.7.0",
-    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^10.0.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": "^7.17.2",
+    "@mantine/hooks": "^7.13.3",
    "@react-icons/all-files": "^4.1.0",
    "@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",
+    "@tanstack/react-table": "^8.20.5",
    "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",
    "react": "^18.3.1",
    "react-colorful": "^5.6.1",
    "react-dom": "^18.3.1",
    "react-fast-compare": "^3.2.2",
    "react-hook-form": "^7.53.1",
    "react-icons": "5.4.0",
    "react-qr-code": "^2.0.12",
    "react-router-dom": "^6.3.0",
    "react-simple-code-editor": "^0.14.1",
    "web-vitals": "^3.1.1",
-    "zustand": "^5.0.3"
+    "zustand": "^4.5.2"
  },
  "scripts": {
    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -66,13 +62,16 @@
  "devDependencies": {
    "@sentry/vite-plugin": "^2.16.1",
    "@tanstack/eslint-plugin-query": "^5.8.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^14.1.1",
    "@types/color": "^3.0.3",
    "@types/prismjs": "^1.26.5",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/testing-library__jest-dom": "^5.14.5",
    "@typescript-eslint/eslint-plugin": "catalog:",
    "@typescript-eslint/parser": "catalog:",
-    "@vitejs/plugin-react": "4.5.1",
+    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "catalog:",
    "eslint-config-prettier": "catalog:",
    "eslint-plugin-jest": "^28.6.0",
@@ -80,16 +79,17 @@
    "eslint-plugin-react": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
-    "happy-dom": "^16.7.2",
+    "eslint-plugin-testing-library": "^5.9.1",
    "jsdom": "^21.1.0",
    "ontime-types": "workspace:*",
    "ontime-utils": "workspace:*",
    "prettier": "catalog:",
    "sass": "^1.57.1",
    "typescript": "catalog:",
-    "vite": "6.3.1",
+    "vite": "^5.2.11",
-    "vite-plugin-compression2": "1.4.0",
+    "vite-plugin-compression2": "^1.3.3",
-    "vite-plugin-svgr": "4.3.0",
+    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "5.1.4",
+    "vite-tsconfig-paths": "^4.3.1",
    "vitest": "catalog:"
  }
 }
@@ -22,13 +22,14 @@ 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 TimerView = React.lazy(() => import('./features/viewers/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 Backstage = React.lazy(() => import('./features/viewers/backstage/Backstage'));
 const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
 const Public = React.lazy(() => import('./features/viewers/public/Public'));
 const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
 const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
 const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));
@@ -39,11 +40,10 @@ 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));
 const PCuesheet = withPreset(Cuesheet);
 const POperator = withPreset(Operator);
 const EditorFeatureWrapper = React.lazy(() => import('./features/EditorFeatureWrapper'));
 const RundownPanel = React.lazy(() => import('./features/rundown/RundownExport'));
@@ -86,6 +86,14 @@ export default function AppRouter() {
            </ViewLoader>
          }
        />
        <Route
          path='/public'
          element={
            <ViewLoader>
              <SPublic />
            </ViewLoader>
          }
        />
        <Route
          path='/minimal'
          element={
@@ -147,15 +155,8 @@ export default function AppRouter() {
        {/*/!* Protected Routes *!/*/}
        <Route path='/editor' element={<Editor />} />
-        <Route path='/cuesheet' element={<PCuesheet />} />
+        <Route path='/cuesheet' element={<Cuesheet />} />
-        <Route
+        <Route path='/op' element={<Operator />} />
          path='/op'
          element={
            <ViewLoader>
              <POperator />
            </ViewLoader>
          }
        />
        {/*/!* Protected Routes - Elements *!/*/}
        <Route
@@ -1,30 +0,0 @@
 import axios from 'axios';
 import { apiEntryUrl } from './constants';
 const assetsPath = `${apiEntryUrl}/assets`;
 /**
 * HTTP request to get css contents
 */
 export async function getCSSContents(): Promise<string> {
  const res = await axios.get(`${assetsPath}/css`);
  return res.data;
 }
 /**
 * HTTP request to post css contents
 */
 export async function postCSSContents(css: string): Promise<void> {
  await axios.post(`${assetsPath}/css`, {
    css,
  });
 }
 /**
 * HTTP request to restore default css
 */
 export async function restoreCSSContents(): Promise<string> {
  const res = await axios.post(`${assetsPath}/css/restore`);
  return res.data;
 }
@@ -1,85 +0,0 @@
 import axios from 'axios';
 import type {
  Automation,
  AutomationDTO,
  AutomationOutput,
  AutomationSettings,
  Trigger,
  TriggerDTO,
 } from 'ontime-types';
 import { apiEntryUrl } from './constants';
 const automationsPath = `${apiEntryUrl}/automations`;
 /**
 * HTTP request to get the automations settings
 */
 export async function getAutomationSettings(): Promise<AutomationSettings> {
  const res = await axios.get(automationsPath);
  return res.data;
 }
 /**
 * HTTP request to edit the automations settings
 */
 export async function editAutomationSettings(
  automationSettings: Partial<AutomationSettings>,
 ): Promise<AutomationSettings> {
  const res = await axios.post(automationsPath, automationSettings);
  return res.data;
 }
 /**
 * HTTP request to create a new automation trigger
 */
 export async function addTrigger(trigger: TriggerDTO): Promise<Trigger> {
  const res = await axios.post(`${automationsPath}/trigger`, trigger);
  return res.data;
 }
 /**
 * HTTP request to update an automation trigger
 */
 export async function editTrigger(id: string, trigger: Trigger): Promise<Trigger> {
  const res = await axios.put(`${automationsPath}/trigger/${id}`, trigger);
  return res.data;
 }
 /**
 * HTTP request to delete an automation trigger
 */
 export function deleteTrigger(id: string): Promise<void> {
  return axios.delete(`${automationsPath}/trigger/${id}`);
 }
 /**
 * HTTP request to create a new automation
 */
 export async function addAutomation(automation: AutomationDTO): Promise<Automation> {
  const res = await axios.post(`${automationsPath}/automation`, automation);
  return res.data;
 }
 /**
 * HTTP request to update a automation
 */
 export async function editAutomation(id: string, automation: Automation): Promise<Automation> {
  const res = await axios.put(`${automationsPath}/automation/${id}`, automation);
  return res.data;
 }
 /**
 * HTTP request to delete a automation
 */
 export function deleteAutomation(id: string): Promise<void> {
  return axios.delete(`${automationsPath}/automation/${id}`);
 }
 /**
 * HTTP request to test automation output
 * The return is irrelevant as we care for the resolution of the promise
 */
 export function testOutput(output: AutomationOutput): Promise<void> {
  return axios.post(`${automationsPath}/test`, output);
 }
@@ -4,22 +4,26 @@ import { serverURL } from '../../externals';
 export const APP_INFO = ['appinfo'];
 export const APP_SETTINGS = ['appSettings'];
 export const APP_VERSION = ['appVersion'];
 export const AUTOMATION = ['automation'];
 export const CUSTOM_FIELDS = ['customFields'];
 export const HTTP_SETTINGS = ['httpSettings'];
 export const OSC_SETTINGS = ['oscSettings'];
 export const PROJECT_DATA = ['project'];
 export const PROJECT_LIST = ['projectList'];
 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'];
 export const REPORT = ['report'];
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;
-const userAssetsPath = 'user';
+export const projectDataURL = `${serverURL}/project`;
-const cssOverridePath = 'styles/override.css';
+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,5 +1,5 @@
 import axios from 'axios';
-import { CustomField, CustomFieldKey, CustomFields } from 'ontime-types';
+import { CustomField, CustomFieldLabel, CustomFields } from 'ontime-types';
 import { apiEntryUrl } from './constants';
@@ -24,15 +24,15 @@ export async function postCustomField(newField: CustomField): Promise<CustomFiel
 /**
 * Edits single custom field
 */
-export async function editCustomField(key: CustomFieldKey, newField: CustomField): Promise<CustomFields> {
+export async function editCustomField(label: CustomFieldLabel, newField: CustomField): Promise<CustomFields> {
-  const res = await axios.put(`${customFieldsPath}/${key}`, { ...newField });
+  const res = await axios.put(`${customFieldsPath}/${label}`, { ...newField });
  return res.data;
 }
 /**
 * Deletes single custom field
 */
-export async function deleteCustomField(key: CustomFieldKey): Promise<CustomFields> {
+export async function deleteCustomField(label: CustomFieldLabel): Promise<CustomFields> {
-  const res = await axios.delete(`${customFieldsPath}/${key}`);
+  const res = await axios.delete(`${customFieldsPath}/${label}`);
  return res.data;
 }
@@ -1,8 +1,7 @@
 import axios, { AxiosResponse } from 'axios';
 import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';
-import { makeTable } from '../../views/cuesheet/cuesheet.utils';
+import { makeCSV, makeTable } from '../../views/cuesheet/cuesheet.utils';
 import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../utils/csv';
 import { apiEntryUrl } from './constants';
 import { createBlob, downloadBlob } from './utils';
@@ -40,12 +39,10 @@ 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 { project, rundown, customFields } = data;
-    const flatRundowns = aggregateRundowns(rundowns);
+    const sheetData = makeTable(project, rundown, customFields);
-    const sheetData = makeTable(project, flatRundowns, customFields);
+    const fileContent = makeCSV(sheetData);
    const fileContent = makeCSVFromArrayOfArrays(sheetData);
    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
    downloadBlob(blob, `${name}.csv`);
@@ -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,
@@ -0,0 +1,21 @@
 import axios, { AxiosResponse } from 'axios';
 import { HttpSettings } from 'ontime-types';
 import { apiEntryUrl } from './constants';
 const httpPath = `${apiEntryUrl}/http`;
 /**
 * HTTP request to retrieve http settings
 */
 export async function getHTTP(): Promise<HttpSettings> {
  const res = await axios.get(httpPath);
  return res.data;
 }
 /**
 * HTTP request to mutate http settings
 */
 export async function postHTTP(data: HttpSettings): Promise<AxiosResponse<HttpSettings>> {
  return axios.post(httpPath, data);
 }
@@ -0,0 +1,21 @@
 import axios, { AxiosResponse } from 'axios';
 import { OSCSettings } from 'ontime-types';
 import { apiEntryUrl } from './constants';
 const oscPath = `${apiEntryUrl}/osc`;
 /**
 * HTTP request to retrieve osc settings
 */
 export async function getOSC(): Promise<OSCSettings> {
  const res = await axios.get(oscPath);
  return res.data;
 }
 /**
 * HTTP request to mutate osc settings
 */
 export async function postOSC(data: OSCSettings): Promise<AxiosResponse<OSCSettings>> {
  return axios.post(oscPath, data);
 }
@@ -1,26 +0,0 @@
 import axios from 'axios';
 import { OntimeReport } from 'ontime-types';
 import { ontimeQueryClient } from '../../common/queryClient';
 import { apiEntryUrl, REPORT } from './constants';
 export const reportUrl = `${apiEntryUrl}/report`;
 /**
 * HTTP request to fetch all reports
 */
 export async function fetchReport(): Promise<OntimeReport> {
  const res = await axios.get(reportUrl);
  return res.data;
 }
 export async function deleteReport(id: string) {
  await axios.delete(`${reportUrl}/${id}`);
  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
 }
 export async function deleteAllReport() {
  await axios.delete(`${reportUrl}/all`);
  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
 }
@@ -1,45 +1,29 @@
 import axios, { AxiosResponse } from 'axios';
-import {
+import { MessageResponse, OntimeEvent, OntimeRundownEntry, RundownCached, TransientEventPayload } from 'ontime-types';
  EntryId,
  MessageResponse,
  OntimeEntry,
  OntimeEvent,
  ProjectRundownsList,
  Rundown,
  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> {
+export async function fetchNormalisedRundown(): Promise<RundownCached> {
-  const res = await axios.get(`${rundownPath}/current`);
+  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;
+  eventId: string;
-  destinationId: EntryId;
+  from: number;
-  order: 'before' | 'after' | 'insert';
+  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>> {
+export async function requestApplyDelay(eventId: string): Promise<AxiosResponse<MessageResponse>> {
-  return axios.patch(`${rundownPath}/applydelay/${delayId}`);
+  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>> {
+export async function requestDelete(eventIds: string[]): Promise<AxiosResponse<MessageResponse>> {
-  return axios.post(`${rundownPath}/clone/${entryId}`);
+  return axios.delete(rundownPath, { data: { ids: eventIds } });
 }
 /**
 * 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 } });
 }
 /**
@@ -12,16 +12,3 @@ export async function getInfo(): Promise<GetInfo> {
  const res = await axios.get(`${sessionPath}/info`);
  return res.data;
 }
 /**
 * HTTP request to get a pre-authenticated URL
 */
 export async function generateUrl(
  baseUrl: string,
  path: string,
  lock: boolean,
  authenticate: boolean,
 ): Promise<string> {
  const res = await axios.post(`${sessionPath}/url`, { baseUrl, path, lock, authenticate });
  return res.data.url;
 }
@@ -19,10 +19,3 @@ export async function getSettings(): Promise<Settings> {
 export async function postSettings(data: Settings): Promise<AxiosResponse<Settings>> {
  return axios.post(settingsPath, data);
 }
 /**
 * Allows setting the welcome modal dialog state from the clients
 */
 export async function postShowWelcomeDialog(show: boolean) {
  axios.post(`${settingsPath}/welcomedialog`, { show });
 }
@@ -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
 */
@@ -0,0 +1,12 @@
@use "../../../theme/mixins" as *;
 .link {
  @include action-link;
  font-size: $inner-section-text-size;
 }
 .linkIcon {
  margin-left: $element-inner-spacing;
  display: inline-block;
  @include rotate-fourty-five;
 }
@@ -0,0 +1,26 @@
 import { MouseEvent, ReactNode } from 'react';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { openLink } from '../../utils/linkUtils';
 import style from './AppLink.module.scss';
 interface AppLinkProps {
  href: string;
  children: ReactNode;
 }
 export default function AppLink(props: AppLinkProps) {
  const { href, children } = props;
  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault();
    openLink(href);
  };
  return (
    <a href='#!' target='_blank' rel='noreferrer' className={style.link} onClick={handleClick}>
      {children} <IoArrowUp className={style.linkIcon} />
    </a>
  );
 }
@@ -1,61 +0,0 @@
@use '../../../theme/viewerDefs' as *;
 .baseButton {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  padding-inline: 1em;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
 }
 .subtle {
  background: $gray-1050;
  color: $blue-400;
  &:hover:not(:disabled):not(:active) {
    background: $gray-1000;
    color: $blue-500;
  }
  &:active:not(:disabled) {
    background: $gray-1100;
    border-color: $gray-1250;
  }
 }
 .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;
  }
 }
 .medium {
  height: 2rem;
 }
 .large {
  height: 3.5rem;
 }
@@ -1,20 +0,0 @@
 import { ButtonHTMLAttributes } from 'react';
 import { cx } from '../../utils/styleUtils';
 import style from './Button.module.scss';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'subtle' | 'primary';
  size?: 'medium' | 'large';
 }
 export default function Button(props: ButtonProps) {
  const { className, children, variant = 'subtle', size = 'medium', ...buttonProps } = props;
  return (
    <button className={cx([style.baseButton, style[variant], style[size], className])} type='button' {...buttonProps}>
      {children}
    </button>
  );
 }
@@ -1,67 +0,0 @@
@use '../../../theme/viewerDefs' as *;
 .baseIconButton {
  aspect-ratio: 1;
  height: 2rem;
  width: 2rem;
  display: grid;
  place-content: center;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
 }
 .subtle {
  background: $gray-1050;
  color: $blue-400;
  &:hover:not(:disabled):not(:active) {
    background: $gray-1000;
    color: $blue-500;
  }
  &:active:not(:disabled){
    background: $gray-1100;
    border-color: $gray-1250;
  }
  &:disabled {
    background: $gray-1050;
  }
 }
 .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;
  }
 }
 .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;
  }
 }
@@ -1,19 +0,0 @@
 import { ButtonHTMLAttributes } from 'react';
 import { cx } from '../../utils/styleUtils';
 import style from './IconButton.module.scss';
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'subtle' | 'subtle-white' | 'destructive';
 }
 export default function IconButton(props: IconButtonProps) {
  const { className, children, variant = 'subtle', ...buttonProps } = props;
  return (
    <button className={cx([style.baseIconButton, style[variant], className])} type='button' {...buttonProps}>
      {children}
    </button>
  );
 }
@@ -1,24 +0,0 @@
 .textEntry {
  grid-area: input;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: $label-gray;
 }
 .inlineEntry {
  display: grid;
  grid-template-areas:
    'label label'
    'input btn';
  grid-template-columns: 1fr auto;
  column-gap: 0.5rem;
 }
 .redirect {
  grid-area: btn;
 }
 .label {
  color: $label-gray;
 }
@@ -1,125 +1,64 @@
 import { useState } from 'react';
 import { IoArrowForward } from 'react-icons/io5';
 import {
-  IconButton,
+  Button,
  Input,
  InputGroup,
  InputLeftAddon,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Select,
 } from '@chakra-ui/react';
 import { navigatorConstants } from '../../../viewerConfig';
 import { setClientRemote } from '../../hooks/useSocket';
 import useUrlPresets from '../../hooks-query/useUrlPresets';
 import Info from '../info/Info';
 import AppLink from '../link/app-link/AppLink';
 import style from './RedirectClientModal.module.scss';
 interface RedirectClientModalProps {
  id: string;
-  name: string;
+  name?: string;
-  currentPath: string;
+  path?: string;
  origin: string;
  isOpen: boolean;
  onClose: () => void;
 }
 export function RedirectClientModal(props: RedirectClientModalProps) {
-  const { id, isOpen, name, currentPath, origin, onClose } = props;
+  const { id, isOpen, name = '', path: currentPath = '', onClose } = props;
  const { data } = useUrlPresets();
  const [path, setPath] = useState(currentPath);
  const [selected, setSelected] = useState('/');
  const { setRedirect } = setClientRemote;
-  const handleRedirect = (newPath: string) => {
+  const handleRedirect = () => {
-    if (newPath === '/' || newPath === currentPath) {
+    if (path !== currentPath && path !== '') {
-      return;
+      setRedirect({ target: id, redirect: path });
    }
    setRedirect({ target: id, redirect: newPath });
    onClose();
  };
-  const enabledPresets = data.filter((preset) => preset.enabled);
+  const host = window.location.origin;
  const canSubmit = path !== currentPath && path !== '';
  return (
    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
      <ModalOverlay />
-      <ModalContent maxWidth='max(480px, 35vw)'>
+      <ModalContent>
        <ModalHeader>Redirect: {name}</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
-          <Info>
+          <InputGroup variant='ontime-filled' size='md'>
-            Remotely redirect the client to a different URL. <br />
+            <InputLeftAddon>{host}</InputLeftAddon>
-            Either by selecting a URL Preset or entering a custom path.
+            <Input placeholder='minimal?key=0000ffff' value={path} onChange={(event) => setPath(event.target.value)} />
-            <br />
+          </InputGroup>
            <br />
            <AppLink search='settings=feature_settings__urlpresets'>Manage URL Presets</AppLink>
          </Info>
          <div>
            <span className={style.label}>Select View or URL Preset</span>
            <div className={style.textEntry}>
              <Select
                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}
                icon={<IoArrowForward />}
                isDisabled={enabledPresets.length === 0 || selected === '/'}
                onClick={() => handleRedirect(selected)}
              />
            </div>
          </div>
          <div className={style.inlineEntry}>
            <span className={style.label}>Enter custom path</span>
            <label className={style.textEntry}>
              {origin}
              <Input
                variant='ontime-filled'
                size='md'
                placeholder='eg. /minimal?key=0000ffff'
                value={path}
                onChange={(event) => setPath(event.target.value)}
              />
            </label>
            <IconButton
              variant='ontime-filled'
              size='md'
              aria-label='Redirect'
              isDisabled={path === currentPath || path === ''}
              className={style.redirect}
              icon={<IoArrowForward />}
              onClick={() => handleRedirect(path)}
            />
          </div>
        </ModalBody>
        <ModalFooter>
          <Button size='md' variant='ontime-subtle' onClick={onClose}>
            Cancel
          </Button>
          <Button size='md' variant='ontime-filled' onClick={handleRedirect} isDisabled={!canSubmit}>
            Submit
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
@@ -2,8 +2,8 @@
 // https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
 import { ReactElement } from 'react';
 import { IconType } from 'react-icons';
 import { Menu, MenuButton, MenuGroup, MenuList } from '@chakra-ui/react';
 import { IconType } from '@react-icons/all-files';
 import { create } from 'zustand';
 import { ContextMenuOption } from './ContextMenuOption';
@@ -23,7 +23,7 @@ export type OptionWithoutGroup = {
  withDivider?: boolean;
 };
-type OptionWithGroup = {
+export type OptionWithGroup = {
  label: string;
  group: Omit<OptionWithoutGroup, 'isGroup'>[];
 };
@@ -1,7 +1,7 @@
 import { PropsWithChildren, useState } from 'react';
 import { IoCheckmark } from 'react-icons/io5';
 import { IoCopy } from 'react-icons/io5';
 import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { Size } from '../../models/Util.type';
@@ -1,5 +1,6 @@
 import { IoChevronDown, IoChevronUp } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
 import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
 import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { millisToDelayString } from '../../utils/dateConfig';
@@ -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 '@/common/stores/runtime';
-import { runtimeStore } from '../../stores/runtime';
+import { hasConnected, reconnectAttempts, shouldReconnect } from '@/common/utils/socket';
 import style from './ErrorBoundary.module.scss';
@@ -26,22 +26,17 @@ class ErrorBoundary extends React.Component {
      error,
      errorInfo: info,
    });
    this.reportContent = `${error} ${info.componentStack}`;
    const appState = runtimeStore.getState();
    if (appState.ping < 0) {
      return;
    }
    Sentry.withScope((scope) => {
      scope.setExtras({
        error,
-        store: appState,
+        store: runtimeStore.getState(),
-        hasSocket: { hasConnected, reconnectAttempts },
+        hasSocket: { hasConnected, shouldReconnect, reconnectAttempts },
      });
      const eventId = Sentry.captureException(error);
      this.setState({ eventId, info });
    });
    this.reportContent = `${error} ${info.componentStack}`;
  }
  render() {
@@ -1,8 +1,8 @@
 import { MouseEvent, ReactNode } from 'react';
-import { IoOpenOutline } from 'react-icons/io5';
+import { IoOpenOutline } from '@react-icons/all-files/io5/IoOpenOutline';
-import { openLink } from '../../../utils/linkUtils';
+import { openLink } from '../../utils/linkUtils';
-import { cx } from '../../../utils/styleUtils';
+import { cx } from '../../utils/styleUtils';
 import style from './ExternalLink.module.scss';
@@ -14,6 +14,7 @@ interface ExternalLinkProps {
 export default function ExternalLink(props: ExternalLinkProps) {
  const { href, inline, children } = props;
  const classes = cx([style.link, inline ? style.inline : null]);
  const handleClick = (event: MouseEvent) => {
    event.preventDefault();
@@ -21,14 +22,8 @@ export default function ExternalLink(props: ExternalLinkProps) {
  };
  return (
-    <a
+    <a href='#!' target='_blank' rel='noreferrer' className={classes} onClick={handleClick}>
-      href='#!'
+      {children} <IoOpenOutline />
      target='_blank'
      rel='noreferrer'
      className={cx([style.link, inline && style.inline])}
      onClick={handleClick}
    >
      {children} <IoOpenOutline style={{ fontSize: '1em' }} />
    </a>
  );
 }
@@ -1,21 +0,0 @@
 .infoLabel {
  display: flex;
  align-items: center;
  gap: $element-spacing;
  background-color: $gray-1200;
  border-radius: 3px;
  font-size: $text-body-size;
  padding: 1rem;
  .content {
    color: $gray-200;
  }
  svg {
    min-width: 1.5rem;
    align-self: start;
    font-size: 1.5rem;
    color: $info-blue;
  }
 }
@@ -1,21 +0,0 @@
 import { PropsWithChildren } from 'react';
 import { IoAlertCircle } from 'react-icons/io5';
 import { cx } from '../../utils/styleUtils';
 import style from './Info.module.scss';
 interface InfoProps {
  className?: string;
 }
 export default function Info(props: PropsWithChildren<InfoProps>) {
  const { className, children } = props;
  return (
    <div className={cx([style.infoLabel, className])}>
      <IoAlertCircle />
      <div>{children}</div>
    </div>
  );
 }
@@ -1,4 +1,4 @@
-import { IoBan } from 'react-icons/io5';
+import { IoBan } from '@react-icons/all-files/io5/IoBan';
 import { cx } from '../../../utils/styleUtils';
@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
-import { IoEyedrop } from 'react-icons/io5';
+import { IoEyedrop } from '@react-icons/all-files/io5/IoEyedrop';
 import { ViewSettings } from 'ontime-types';
-import { debounce } from '../../../utils/debounce';
+import PopoverPicker from '../../../../common/components/input/popover-picker/PopoverPicker';
 import { debounce } from '../../../../common/utils/debounce';
 import { cx, getAccessibleColour } from '../../../utils/styleUtils';
 import PopoverPicker from '../popover-picker/PopoverPicker';
 import style from './SwatchSelect.module.scss';
@@ -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,
    });
@@ -17,7 +17,6 @@ export default function useReactiveTextInput(
    submitOnCtrlEnter?: boolean;
    onCancelUpdate?: () => void;
    allowSubmitSameValue?: boolean;
    allowKeyboardNavigation?: boolean;
  },
 ): UseReactiveTextInputReturn {
  const [text, setText] = useState<string>(initialText);
@@ -59,14 +58,7 @@ export default function useReactiveTextInput(
          setText(cleanVal);
        }
      }
-
+      setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before bluring
      setTimeout(() => {
        if (options?.allowKeyboardNavigation) {
          ref.current?.parentElement?.focus(); // Focus on parent element to continue keyboard navigation
        } else {
          ref.current?.blur();
        }
      }); // Immediate timeout to ensure text is set before blurring
    },
    [initialText, options, ref, submitCallback],
  );
@@ -78,25 +70,12 @@ export default function useReactiveTextInput(
  const handleEscape = useCallback(() => {
    // No need to update if it hasn't changed
    setText(initialText);
    // force the text to be the initial value
    if (ref.current) {
      ref.current.value = initialText;
    }
    options?.onCancelUpdate?.();
-    setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before blurring
+    setTimeout(() => ref.current?.blur()); // Immediate timeout to ensure text is set before bluring
  }, [initialText, options, ref]);
  const keyHandler = useMemo(() => {
-    const hotKeys: HotkeyItem[] = [
+    const hotKeys: HotkeyItem[] = [['Escape', handleEscape, { preventDefault: true }]];
      [
        'Escape',
        (event) => {
          event.preventDefault();
          handleEscape();
        },
        { preventDefault: true },
      ],
    ];
    if (options?.submitOnEnter) {
      hotKeys.push(['Enter', () => handleSubmit(text)]);
@@ -105,22 +84,7 @@ export default function useReactiveTextInput(
    if (options?.submitOnCtrlEnter) {
      hotKeys.push(['mod + Enter', () => handleSubmit(text)]);
    }
-
+    return getHotkeyHandler(hotKeys);
    const hotKeyHandler = getHotkeyHandler(hotKeys);
    return (event: KeyboardEvent<HTMLElement>) => {
      // allow moving in input field with arrow keys
      if (
        event.key === 'ArrowLeft' ||
        event.key === 'ArrowRight' ||
        event.key === 'ArrowUp' ||
        event.key === 'ArrowDown'
      ) {
        event.stopPropagation();
      }
      hotKeyHandler(event);
    };
  }, [handleEscape, handleSubmit, options?.submitOnCtrlEnter, options?.submitOnEnter, text]);
  return {
@@ -1,11 +0,0 @@
 .link {
  color: $label-gray;
  font-size: $text-body-size;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: $blue-400;
  &:hover {
    color: $blue-500;
  }
 }
@@ -1,25 +0,0 @@
 import { type PropsWithChildren } from 'react';
 import { useNavigate } from 'react-router-dom';
 import style from './AppLink.module.scss';
 interface AppLinkProps {
  search: string;
 }
 /**
 * Component used to navigate to an editor link inside the same window
 * Handles the path to respect Ontime Clouds base URL
 */
 export default function AppLink(props: PropsWithChildren<AppLinkProps>) {
  const { search, children } = props;
  const navigate = useNavigate();
  const handleClick = () => navigate({ search });
  return (
    <button onClick={handleClick} className={style.link}>
      {children}
    </button>
  );
 }
@@ -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,6 +1,6 @@
@use '../../../theme/viewerDefs' as *;
-$progress-bar-size: 1.5rem;
+$progress-bar-size: 12px;
 $progress-bar-br: 3px;
 .multiprogress-bar {
@@ -53,6 +53,3 @@ $progress-bar-br: 3px;
 .multiprogress-bar__bg-danger {
  flex-shrink: 0;
 }
 .multiprogress-bar__bg-danger--overtime {
  background: var(--timer-overtime-color-override, $timer-finished-color);
 }
@@ -1,7 +1,6 @@
 import { MaybeNumber } from 'ontime-types';
 import { getProgress } from '../../utils/getProgress';
 import { cx } from '../../utils/styleUtils';
 import './MultiPartProgressBar.scss';
@@ -14,7 +13,6 @@ interface MultiPartProgressBar {
  danger?: MaybeNumber;
  dangerColor: string;
  hidden?: boolean;
  hideOvertime?: boolean;
  ignoreCssOverride?: boolean;
  className?: string;
 }
@@ -29,7 +27,6 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
    danger,
    dangerColor,
    hidden,
    hideOvertime,
    ignoreCssOverride,
    className = '',
  } = props;
@@ -37,17 +34,12 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
  const percentRemaining = 100 - getProgress(now, complete);
  const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
  const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
  const isOvertime = now !== null && now < 0;
  const showOvertime = isOvertime && !hideOvertime;
  return (
    <div
-      className={cx([
+      className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${
-        'multiprogress-bar',
+        ignoreCssOverride ? 'multiprogress-bar--ignore-css-override' : ''
-        hidden && 'multiprogress-bar--hidden',
+      } ${className}`}
        ignoreCssOverride && 'multiprogress-bar--ignore-css-override',
        className,
      ])}
    >
      {now !== null && (
        <>
@@ -58,8 +50,8 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
              style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
            />
            <div
-              className={cx(['multiprogress-bar__bg-danger', showOvertime && 'multiprogress-bar__bg-danger--overtime'])}
+              className='multiprogress-bar__bg-danger'
-              style={{ width: `${dangerWidth}%`, backgroundColor: showOvertime ? undefined : dangerColor }}
+              style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
            />
          </div>
          <div className='multiprogress-bar__indicator'>
@@ -1,9 +1,7 @@
-import { IoApps } from 'react-icons/io5';
+import { IoApps } from '@react-icons/all-files/io5/IoApps';
-import { IoSettingsOutline } from 'react-icons/io5';
+import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
-import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
+import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
 import { cx } from '../../utils/styleUtils';
 import IconButton from '../buttons/IconButton';
 import style from './NavigationMenu.module.scss';
@@ -17,25 +15,23 @@ export default function FloatingNavigation(props: FloatingNavigationProps) {
  const isButtonShown = useFadeOutOnInactivity();
  return (
-    <div className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}>
+    <div className={`${style.buttonContainer} ${!isButtonShown ? style.hidden : ''}`}>
-      <IconButton
+      <button
        variant='subtle-white'
        className={style.navButton}
        onClick={toggleMenu}
        aria-label='toggle menu'
        className={style.navButton}
        data-testid='navigation__toggle-menu'
      >
        <IoApps />
-      </IconButton>
+      </button>
-      <IconButton
+      <button
-        variant='subtle-white'
+        className={style.button}
        className={style.navButton}
        onClick={toggleSettings}
        aria-label='toggle settings'
        data-testid='navigation__toggle-settings'
      >
        <IoSettingsOutline />
-      </IconButton>
+      </button>
    </div>
  );
 }
@@ -3,47 +3,54 @@
 $menu-hover-bg: $gray-1350;
 $menu-focus-bg: $gray-1300;
 $icon-color: $ui-white;
 $button-bg: $gray-1050;
 $button-size: 3rem;
 .fadeable {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.3s;
  &.hidden {
    opacity: 0;
    pointer-events: none;
  }
 }
 .lockIcon {
  font-size: 1.5rem;
  color: $active-indicator;
  padding: 0.5em;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12;
 }
 .buttonContainer {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 0.5em;
  transition-property: opacity;
  transition-duration: 0.3s;
  opacity: 1;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12;
  &.hidden {
    opacity: 0;
  }
 }
 .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;
 }
 .lockIcon {
  font-size: 1.5rem;
  display: grid;
  place-content: center;
  border-radius: 3px;
  background-color: transparent;
  color: $active-indicator;
  cursor: default;
 }
 .navButton {
-  font-size: 1.5rem;
+  @extend .button;
-  height: $button-size;
+  z-index: 3;
  width: $button-size;;
 }
 .link {
@@ -1,6 +1,5 @@
-import { memo, PropsWithChildren } from 'react';
+import { memo, PropsWithChildren, useRef } 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,
@@ -12,9 +11,15 @@ import {
  useDisclosure,
 } from '@chakra-ui/react';
 import { useFullscreen } from '@mantine/hooks';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
 import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 import { isLocalhost } from '../../../externals';
 import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
 import { useElectronEvent } from '../../hooks/useElectronEvent';
 import useInfo from '../../hooks-query/useInfo';
 import { useClientStore } from '../../stores/clientStore';
@@ -43,8 +48,12 @@ function NavigationMenu(props: NavigationMenuProps) {
  const { mirror, toggleMirror } = useViewOptionsStore();
  const location = useLocation();
  const menuRef = useRef<HTMLDivElement | null>(null);
  useClickOutside(menuRef, () => onClose);
  return createPortal(
-    <div id='navigation-menu-portal'>
+    <div id='navigation-menu-portal' ref={menuRef}>
      <RenameClientModal id={id} name={name} isOpen={isOpenRename} onClose={onCloseRename} />
      <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
        <DrawerOverlay />
@@ -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,7 +1,6 @@
-import { IoLockClosedOutline } from 'react-icons/io5';
+import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
-import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
+import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
 import { cx } from '../../utils/styleUtils';
 import style from './NavigationMenu.module.scss';
@@ -9,8 +8,8 @@ export default function ViewLockedIcon() {
  const isLockIconShown = useFadeOutOnInactivity();
  return (
-    <div className={cx([style.fadeable, style.lockIcon, !isLockIconShown && style.hidden])}>
+    <div className={`${style.buttonContainer} ${!isLockIconShown ? style.hidden : ''}`}>
-      <IoLockClosedOutline />
+      <IoLockClosedOutline className={style.lockIcon} />
    </div>
  );
 }
@@ -1,20 +1,23 @@
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useDisclosure } from '@chakra-ui/react';
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
 import useViewEditor from './useViewEditor';
 import ViewLockedIcon from './ViewLockedIcon';
-interface ViewNavigationMenuProps {
+function ViewNavigationMenu() {
-  isLockable?: boolean;
+  const [searchParams, setSearchParams] = useSearchParams();
 }
 function ViewNavigationMenu(props: ViewNavigationMenuProps) {
  const { isLockable } = props;
  const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
-  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
+
  const isViewLocked = isStringBoolean(searchParams.get('locked'));
  const showEditFormDrawer = useCallback(() => {
    searchParams.set('edit', 'true');
    setSearchParams(searchParams);
  }, [searchParams, setSearchParams]);
  const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
@@ -1,26 +0,0 @@
 import { useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 interface EditorVisibilityOptions {
  isLockable?: boolean;
 }
 export default function useViewEditor({ isLockable }: EditorVisibilityOptions) {
  const [searchParams, setSearchParams] = useSearchParams();
  const showEditFormDrawer = useCallback(() => {
    searchParams.set('edit', 'true');
    setSearchParams(searchParams);
  }, [searchParams, setSearchParams]);
  const isViewLocked = useMemo(() => {
    if (!isLockable) {
      return false;
    }
    return isStringBoolean(searchParams.get('locked'));
  }, [isLockable, searchParams]);
  return { showEditFormDrawer, isViewLocked };
 }
@@ -1,5 +1,7 @@
 import { IoPause, IoPlay, IoStop } from 'react-icons/io5';
 import { Tooltip } from '@chakra-ui/react';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { Playback } from 'ontime-types';
 import { tooltipDelayFast } from '../../../ontimeConfig';
@@ -9,6 +9,10 @@ $progress-bar-br: 3px;
  border-radius: $progress-bar-br;
  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
  overflow: clip;
  &--hidden {
    display: none;
  }
 }
 .progress-bar__indicator {
@@ -7,15 +7,16 @@ import './ProgressBar.scss';
 interface ProgressBarProps {
  current: MaybeNumber;
  duration: MaybeNumber;
  hidden?: boolean;
  className?: string;
 }
 export default function ProgressBar(props: ProgressBarProps) {
-  const { current, duration, className } = props;
+  const { current, duration, hidden, className = '' } = props;
  const progress = getProgress(current, duration);
  return (
-    <div className={`progress-bar__bg ${className}`}>
+    <div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
      <div className='progress-bar__indicator' style={{ width: `${progress}%` }} />
    </div>
  );
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { IoCheckmark } from 'react-icons/io5';
 import { IconButton, PinInput, PinInputField } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
 import style from './ProtectRoute.module.scss';
@@ -0,0 +1,76 @@
@use '../../../theme/viewerDefs' as *;
 .schedule {
  width: 100%;
  border-spacing: 50px;
  .entry {
    font-size: clamp(16px, 1.5vw, 24px);
    .entry-colour {
      background-color: var(--card-background-color-override, $viewer-card-bg-color);
      height: clamp(8px, 0.75vw, 12px);
      width: clamp(8px, 0.75vw, 12px);
      border-radius: 6px;
      display: inline-block;
    }
    .entry-times {
      font-family: $viewer-font-family;
      color: var(--secondary-color-override, $viewer-secondary-color);
      font-weight: 300;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .entry-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .entry-secondary {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &:not(:last-child) {
      padding-bottom: 8px;
    }
    &--past {
      color: var(--secondary-color-override, $viewer-secondary-color);
    }
    &--now {
      .entry-title {
        color: var(--accent-color-override, $accent-color);
        font-weight: 600;
      }
    }
    &.skip {
      text-decoration: line-through;
    }
  }
 }
 .schedule-nav {
  display: flex;
  justify-content: flex-end;
  .schedule-nav__item {
    background-color: var(--card-background-color-override, $viewer-card-bg-color);
    width: 12px;
    height: 12px;
    border-radius: 6px;
    margin-left: 8px;
    &--selected {
      background-color: var(--color-override, $viewer-color);
    }
  }
 }
@@ -0,0 +1,52 @@
 import { useSchedule } from './ScheduleContext';
 import ScheduleItem from './ScheduleItem';
 import './Schedule.scss';
 interface ScheduleProps {
  isProduction?: boolean;
  className?: string;
 }
 export default function Schedule({ isProduction, className }: ScheduleProps) {
  const { paginatedEvents, selectedEventId, isBackstage, scheduleType } = useSchedule();
  // TODO: design a nice placeholder for empty schedules
  if (paginatedEvents?.length < 1) {
    return null;
  }
  let selectedState: 'past' | 'now' | 'future' = 'past';
  return (
    <ul className={`schedule ${className}`}>
      {paginatedEvents.map((event) => {
        if (scheduleType === 'past' || scheduleType === 'future') {
          selectedState = scheduleType;
        } else {
          if (event.id === selectedEventId) {
            selectedState = 'now';
          } else if (selectedState === 'now') {
            selectedState = 'future';
          }
        }
        const timeStart = isProduction ? event.timeStart + (event?.delay ?? 0) : event.timeStart;
        const timeEnd = isProduction ? event.timeEnd + (event?.delay ?? 0) : event.timeEnd;
        return (
          <ScheduleItem
            key={event.id}
            selected={selectedState}
            timeStart={timeStart}
            timeEnd={timeEnd}
            title={event.title}
            colour={isBackstage ? event.colour : ''}
            backstageEvent={!event.isPublic}
            skip={event.skip}
          />
        );
      })}
    </ul>
  );
 }
@@ -0,0 +1,102 @@
 import { createContext, PropsWithChildren, useContext, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { OntimeEvent } from 'ontime-types';
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 import { useInterval } from '../../hooks/useInterval';
 interface ScheduleContextState {
  events: OntimeEvent[];
  paginatedEvents: OntimeEvent[];
  selectedEventId: string | null;
  scheduleType: 'past' | 'now' | 'future';
  numPages: number;
  visiblePage: number;
  isBackstage: boolean;
 }
 const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);
 interface ScheduleProviderProps {
  events: OntimeEvent[];
  selectedEventId: string | null;
  isBackstage?: boolean;
  time?: number;
 }
 const numEventsPerPage = 8;
 export const ScheduleProvider = ({
  children,
  events,
  selectedEventId,
  isBackstage = false,
  time = 10,
 }: PropsWithChildren<ScheduleProviderProps>) => {
  const [visiblePage, setVisiblePage] = useState(0);
  const [searchParams] = useSearchParams();
  // look for overrides from views
  const hidePast = isStringBoolean(searchParams.get('hidePast'));
  const stopCycle = isStringBoolean(searchParams.get('stopCycle'));
  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? numEventsPerPage);
  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
  const viewEvents = [...events];
  if (hidePast) {
    // we want to show the event after the next
    viewEvents.splice(0, selectedEventIndex + 2);
    selectedEventIndex = 0;
  }
  const numPages = Math.ceil(viewEvents.length / eventsPerPage);
  const eventStart = eventsPerPage * visiblePage;
  const eventEnd = eventsPerPage * (visiblePage + 1);
  const paginatedEvents = viewEvents.slice(eventStart, eventEnd);
  const resolveScheduleType = () => {
    if (selectedEventIndex >= eventStart && selectedEventIndex < eventEnd) {
      return 'now';
    }
    if (selectedEventIndex > eventEnd) {
      return 'past';
    }
    return 'future';
  };
  const scheduleType = resolveScheduleType();
  // every SCROLL_TIME go to the next array
  useInterval(() => {
    if (stopCycle) {
      setVisiblePage(0);
    } else if (events.length > eventsPerPage) {
      const next = (visiblePage + 1) % numPages;
      setVisiblePage(next);
    }
  }, time * 1000);
  return (
    <ScheduleContext.Provider
      value={{
        events,
        paginatedEvents,
        selectedEventId,
        scheduleType,
        numPages,
        visiblePage,
        isBackstage,
      }}
    >
      {children}
    </ScheduleContext.Provider>
  );
 };
 export const useSchedule = () => {
  const context = useContext(ScheduleContext);
  if (!context) {
    throw new Error('useSchedule() can only be used inside a ScheduleContext');
  }
  return context;
 };
@@ -0,0 +1,43 @@
 import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';
 import { formatTime } from '../../utils/time';
 import './Schedule.scss';
 const formatOptions = {
  format12: 'hh:mm a',
  format24: 'HH:mm',
 };
 interface ScheduleItemProps {
  selected: 'past' | 'now' | 'future';
  timeStart: number;
  timeEnd: number;
  title: string;
  backstageEvent: boolean;
  colour: string;
  skip: boolean;
 }
 export default function ScheduleItem(props: ScheduleItemProps) {
  const { selected, timeStart, timeEnd, title, backstageEvent, colour, skip } = props;
  const start = formatTime(timeStart, formatOptions);
  const end = formatTime(timeEnd, formatOptions);
  const userColour = colour !== '' ? colour : '';
  const selectStyle = `entry--${selected}`;
  return (
    <li className={`entry ${selectStyle} ${skip ? 'skip' : ''}`}>
      <div className='entry-times'>
        <span className='entry-colour' style={{ backgroundColor: userColour }} />
        <div style={{ display: 'flex' }}>
          <SuperscriptTime time={start} />
          {' → '}
          <SuperscriptTime time={end} />
          {backstageEvent ? '*' : ''}
        </div>
      </div>
      <div className='entry-title'>{title}</div>
    </li>
  );
 }
@@ -0,0 +1,23 @@
 import { useSchedule } from './ScheduleContext';
 import './Schedule.scss';
 interface ScheduleNavProps {
  className?: string;
 }
 export default function ScheduleNav({ className }: ScheduleNavProps) {
  const { numPages, visiblePage } = useSchedule();
  return (
    <div className={`schedule-nav ${className}`}>
      {numPages > 1 &&
        [...Array(numPages).keys()].map((i) => (
          <div
            key={i}
            className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
          />
        ))}
    </div>
  );
 }
@@ -5,7 +5,7 @@
  .empty {
    width: 100%;
-    opacity: 0.8;
+    opacity: 0.6;
  }
  .text {
@@ -1,20 +1,18 @@
 import { CSSProperties } from 'react';
 import EmptyImage from '../../../assets/images/empty.svg?react';
 import { cx } from '../../utils/styleUtils';
 import style from './Empty.module.scss';
 interface EmptyProps {
  text?: string;
  style?: CSSProperties;
  className?: string;
 }
 export default function Empty(props: EmptyProps) {
-  const { text, className, ...rest } = props;
+  const { text, ...rest } = props;
  return (
-    <div className={cx([style.emptyContainer, className])} {...rest}>
+    <div className={style.emptyContainer} {...rest}>
      <EmptyImage className={style.empty} />
      {text && <span className={style.text}>{text}</span>}
    </div>
@@ -4,26 +4,25 @@
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
 }
 .title-card__title,
-.title-card__placeholder {
+.title-card__secondary {
-  font-weight: 600;
+  white-space: nowrap;
-  font-size: $title-font-size;
+  overflow: hidden;
-  line-height: 1.2em;
+  text-overflow: ellipsis;
 }
 .title-card__title {
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 3rem);
  color: var(--color-override, $viewer-color);
-  padding-right: 1em;
+  line-height: 1.2em;
 }
 .title-card__placeholder {
  color: var(--label-color-override, $viewer-label-color);
 }
 .title-card__secondary {
-  font-size: $base-font-size;
+  font-size: clamp(1rem, 2vw, 2.25rem);
  color: var(--secondary-color-override, $viewer-secondary-color);
  line-height: 1.2em;
 }
@@ -32,8 +31,9 @@
  position: absolute;
  right: 1rem;
  top: 0.5rem;
-  font-size: $timer-label-size;
+  font-size: clamp(1rem, 1.5vw, 1.5rem);
  color: var(--secondary-color-override, $viewer-secondary-color);
  margin-left: auto;
  text-transform: uppercase;
  &--accent {
@@ -1,12 +1,11 @@
 import { ForwardedRef, forwardRef } from 'react';
 import { useTranslation } from '../../../translation/TranslationProvider';
 import { cx } from '../../utils/styleUtils';
 import './TitleCard.scss';
 interface TitleCardProps {
-  title?: string;
+  title: string;
  label?: 'now' | 'next';
  secondary?: string;
  className?: string;
@@ -19,9 +18,9 @@ const TitleCard = forwardRef((props: TitleCardProps, ref: ForwardedRef<HTMLDivEl
  const accent = label === 'now';
  return (
-    <div className={cx(['title-card', className])} ref={ref}>
+    <div className={`title-card ${className}`} ref={ref}>
      <span className='title-card__title'>{title}</span>
-      <span className={cx(['title-card__label', accent && 'title-card__label--accent'])}>
+      <span className={accent ? 'title-card__label title-card__label--accent' : 'title-card__label'}>
        {label && getLocalizedString(`common.${label}`)}
      </span>
      <div className='title-card__secondary'>{secondary}</div>
@@ -1,5 +0,0 @@
 .viewLogo {
  max-width: 100%;
  max-height: 75px;
  display: block;
 }
@@ -1,7 +1,5 @@
 import { projectLogoPath } from '../../api/constants';
 import './ViewLogo.scss';
 interface ViewLogoProps {
  name: string;
  className: string;
@@ -9,11 +7,5 @@ interface ViewLogoProps {
 export default function ViewLogo(props: ViewLogoProps) {
  const { name, className } = props;
-
+  return <img src={`${projectLogoPath}/${name}`} className={className} />;
  // we wrap the image in a div to help maintain the aspect ratio
  return (
    <div className={className}>
      <img alt='' src={`${projectLogoPath}/${name}`} className='viewLogo' />
    </div>
  );
 }
@@ -1,5 +1,4 @@
 import { useState } from 'react';
 import { IoChevronDown } from 'react-icons/io5';
 import { useSearchParams } from 'react-router-dom';
 import {
  Button,
@@ -14,6 +13,7 @@ import {
  Select,
  Switch,
 } from '@chakra-ui/react';
 import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
@@ -119,16 +119,16 @@ function MultiOption(props: EditFormMultiOptionProps) {
        <MenuButton as={Button} variant='ontime-subtle-white' position='relative' width='fit-content' fontWeight={400}>
          {paramField.title} <IoChevronDown style={{ display: 'inline' }} />
        </MenuButton>
-        <MenuList overflow='auto' maxHeight='200px'>
+        <MenuList>
          <MenuOptionGroup
            type='checkbox'
            value={paramState}
            onChange={(value) => setParamState(Array.isArray(value) ? value : [value])}
          >
            {Object.values(paramField.values).map((option) => {
-              const { value, label, colour } = option;
+              const { value, label } = option;
              return (
-                <MenuItemOption value={value} key={value} style={{ borderRight: `8px solid ${colour}` }}>
+                <MenuItemOption value={value} key={value}>
                  {label}
                </MenuItemOption>
              );
@@ -1,6 +1,6 @@
 .drawerFooter {
  display: flex;
-  justify-content: end;
+  justify-content: end;  
  gap: $section-spacing;
  button {
@@ -8,15 +8,56 @@
  }
 }
-.sectionList {
+.infoLabel {
  display: flex;
-  flex-direction: column;
+  align-items: center;
-  min-height: 100%;
+  gap: $element-spacing;
-  gap: 2rem;
+  padding: 1rem;
-  overflow-y: scroll;
+  margin-bottom: 1rem;
-  padding-right: 0.5rem;
+
  background-color: $gray-1100;
  border-radius: 2px;
  font-size: $inner-section-text-size;
  svg {
    font-size: 1.5rem;
    color: $info-blue;
  }
 }
-.info {
+.label {
-  margin-bottom: 1rem;
+  font-size: $inner-section-text-size;
  color: $label-gray;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
 }
 .section {
  color: $ui-white;
  font-size: 1rem;
  &:not(:first-child) {
    margin-top: 2rem;
  }
 }
 .fieldSet {
  display: flex;
  padding: $section-spacing 0;
  flex-direction: column;
  gap: $element-spacing;
  margin-left: 0.5rem;
 }
 .title {
  font-size: $inner-section-text-size;
  display: block;
  width: 100%;
 }
 .description {
  font-size: $inner-section-text-size;
  display: block;
  color: $modal-note-color;
 }
@@ -11,12 +11,12 @@ import {
  DrawerOverlay,
  useDisclosure,
 } from '@chakra-ui/react';
 import { IoAlertCircle } from '@react-icons/all-files/io5/IoAlertCircle';
-import useViewSettings from '../../hooks-query/useViewSettings';
+import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import Info from '../info/Info';
-import { ViewOption } from './types';
+import ParamInput from './ParamInput';
-import ViewParamsSection from './ViewParamsSection';
+import { isSection, ViewOption } from './types';
 import style from './ViewParamsEditor.module.scss';
@@ -40,15 +40,15 @@ const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOp
  // Convert paramFields to an object that contains default values
  const defaultValues: Record<string, string> = {};
-  paramFields.forEach((section) => {
+  paramFields.forEach((option) => {
-    section.options.forEach((option) => {
+    if (!isSection(option)) {
      defaultValues[option.id] = String(option.defaultValue);
    }
-      // extract persisted values
+    // extract persisted values
-      if ('type' in option && option.type === 'persist') {
+    if ('type' in option && option.type === 'persist') {
-        newSearchParams.set(option.id, option.value);
+      newSearchParams.set(option.id, option.value);
-      }
+    }
    });
  });
  // compare which values are different from the default values
@@ -133,17 +133,35 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
        <DrawerBody>
          {viewSettings.overrideStyles && (
-            <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
+            <div className={style.infoLabel}>
              <IoAlertCircle />
              This view style is being modified by a custom CSS file. <br />
            </div>
          )}
-          <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
+          <form id='edit-params-form' onSubmit={onParamsFormSubmit}>
-            {viewOptions.map((section) => (
+            {viewOptions.map((option) => {
-              <ViewParamsSection
+              if (isSection(option)) {
-                key={section.title}
+                return (
-                title={section.title}
+                  <div key={option.section} className={style.section}>
-                collapsible={section.collapsible}
+                    {option.section}
-                options={section.options}
+                  </div>
-              />
+                );
-            ))}
+              }
              if (option.type === 'persist') {
                return null;
              }
              return (
                <div key={option.title} className={style.fieldSet}>
                  <label className={style.label}>
                    <span className={style.title}>{option.title}</span>
                    <span className={style.description}>{option.description}</span>
                    <ParamInput key={option.title} paramField={option} />
                  </label>
                </div>
              );
            })}
          </form>
        </DrawerBody>
@@ -1,50 +0,0 @@
 .section {
  color: $ui-white;
  font-size: 1rem;
 }
 .sectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2rem;
  &.collapsible {
    cursor: pointer;
    &:hover {
      border-bottom: 1px solid $white-10;
    }
  }
 }
 .label {
  margin-top: $section-spacing;
  font-size: $inner-section-text-size;
  color: $label-gray;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
 }
 .title {
  font-size: $inner-section-text-size;
  display: block;
  width: 100%;
 }
 .description {
  font-size: $inner-section-text-size;
  display: block;
  color: $modal-note-color;
 }
 .closed {
  transition: rotate $transition-time-feedback;
  rotate: 0deg;
 }
 .open {
  transition: rotate $transition-time-feedback;
  rotate: 180deg;
 }
@@ -1,54 +0,0 @@
 import { IoChevronDown } from 'react-icons/io5';
 import { useLocalStorage } from '@mantine/hooks';
 import { cx } from '../../utils/styleUtils';
 import ParamInput from './ParamInput';
 import { type ParamField } from './types';
 import style from './ViewParamsSection.module.scss';
 interface ViewParamsSectionProps {
  title: string;
  collapsible?: boolean;
  options: ParamField[];
 }
 export default function ViewParamsSection(props: ViewParamsSectionProps) {
  const { title, collapsible, options } = props;
  const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
  const handleCollapse = () => {
    if (collapsible) {
      setCollapsed((prev) => !prev);
    }
  };
  return (
    <section className={style.section}>
      <div className={cx([style.sectionHeader, collapsible && style.collapsible])} onClick={handleCollapse}>
        {title}
        {collapsible && <IoChevronDown className={cx([collapsed ? style.closed : style.open])} />}
      </div>
      {!collapsed && (
        <>
          {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>
  );
 }
@@ -1,45 +0,0 @@
 import { CustomFields } from 'ontime-types';
 import { makeOptionsFromCustomFields } from '../constants';
 describe('makeOptionsFromCustomFields', () => {
  const testCustomFields: CustomFields = {
    field1: { label: 'Field 1', colour: 'red', type: 'string' },
    field2: { label: 'Field 2', colour: 'blue', type: 'string' },
  };
  it('creates a record of keys for the given custom fields', () => {
    const result = makeOptionsFromCustomFields(testCustomFields);
    expect(result).toStrictEqual({
      'custom-field1': 'Custom: Field 1',
      'custom-field2': 'Custom: Field 2',
    });
  });
  it('appends additional data', () => {
    const additionalData = {
      test1: 'test1',
      test2: 'test2',
    };
    const result = makeOptionsFromCustomFields(testCustomFields, additionalData);
    expect(result).toStrictEqual({
      'custom-field1': 'Custom: Field 1',
      'custom-field2': 'Custom: Field 2',
      test1: 'test1',
      test2: 'test2',
    });
  });
  it('filtersImageTypes', () => {
    const customFieldsWIthImage: CustomFields = {
      ...testCustomFields,
      field3: { label: 'Field 3', colour: 'green', type: 'image' },
    };
    const result = makeOptionsFromCustomFields(customFieldsWIthImage);
    expect(result).toStrictEqual({
      'custom-field1': 'Custom: Field 1',
      'custom-field2': 'Custom: Field 2',
    });
  });
 });
@@ -1,34 +1,17 @@
 import { CustomFields } from 'ontime-types';
-import type { MultiselectOptions, ParamField } from './types';
+import type { ParamField } from './types';
 export const makeOptionsFromCustomFields = (
  customFields: CustomFields,
-  additionalOptions: Readonly<Record<string, string>> = {},
+  additionalOptions: Record<string, string> = {},
  filterImageType = true,
 ) => {
-  const options = { ...additionalOptions };
+  return Object.entries(customFields).reduce((options, [key, value]) => {
  for (const [key, value] of Object.entries(customFields)) {
    if (filterImageType && value.type === 'image') {
      continue;
    }
    options[`custom-${key}`] = `Custom: ${value.label}`;
-  }
+    return options;
-  return options;
+  }, additionalOptions);
 };
 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 {
@@ -55,14 +38,3 @@ export const showLeadingZeros: ParamField = {
  type: 'boolean',
  defaultValue: false,
 };
 export enum OptionTitle {
  ClockOptions = 'Clock Options',
  TimerOptions = 'Timer Options',
  DataSources = 'Data sources',
  ElementVisibility = 'Element visibility',
  BehaviourOptions = 'View behaviour',
  StyleOverride = 'View style override',
  Animation = 'View animation',
  Schedule = 'Schedule options',
 }
@@ -1,4 +1,6 @@
-import { OptionTitle } from './constants';
+type ParamSection = {
  section: string;
 };
 type BaseField = {
  id: string;
@@ -12,11 +14,9 @@ type OptionsField = {
  defaultValue?: string;
 };
 type MultiselectOption = { value: string; label: string; colour: string };
 export type MultiselectOptions = Record<string, MultiselectOption>;
 type MultiOptionsField = {
  type: 'multi-option';
-  values: MultiselectOptions;
+  values: Record<string, { value: string; label: string; colour: string }>;
  defaultValue?: string;
 };
@@ -28,9 +28,11 @@ type PersistedField = { type: 'persist'; defaultValue?: string; value: string };
 export type ParamField = BaseField &
  (OptionsField | MultiOptionsField | StringField | NumberField | BooleanField | ColourField | PersistedField);
 export type ViewOption = ParamSection | ParamField;
-export type ViewOption = {
+/**
-  title: OptionTitle;
+ * Type assertion utility checks whether an entry is a section separator
-  options: ParamField[];
+ */
-  collapsible?: boolean;
+export function isSection(entry: ViewOption): entry is ParamSection {
-};
+  return 'section' in entry;
 }
@@ -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,20 +0,0 @@
 import { useQuery } from '@tanstack/react-query';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { getAutomationSettings } from '../api/automation';
 import { AUTOMATION } from '../api/constants';
 import { automationPlaceholderSettings } from '../models/AutomationSettings';
 export default function useAutomationSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: AUTOMATION,
    queryFn: getAutomationSettings,
    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt: number) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
    networkMode: 'always',
  });
  return { data: data ?? automationPlaceholderSettings, status, isFetching, isError, refetch };
 }
@@ -0,0 +1,34 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { HTTP_SETTINGS } from '../api/constants';
 import { getHTTP, postHTTP } from '../api/http';
 import { logAxiosError } from '../api/utils';
 import { httpPlaceholder } from '../models/Http';
 import { ontimeQueryClient } from '../queryClient';
 export function useHttpSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: HTTP_SETTINGS,
    queryFn: getHTTP,
    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt: number) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
    networkMode: 'always',
  });
  return { data: data ?? httpPlaceholder, status, isFetching, isError, refetch };
 }
 export function usePostHttpSettings() {
  const { isPending, mutateAsync } = useMutation({
    mutationFn: postHTTP,
    onError: (error) => logAxiosError('Error saving HTTP settings', error),
    onSuccess: (res) => {
      ontimeQueryClient.setQueryData(HTTP_SETTINGS, res.data);
    },
    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: HTTP_SETTINGS }),
  });
  return { isPending, mutateAsync };
 }
@@ -0,0 +1,34 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { OSC_SETTINGS } from '../api/constants';
 import { getOSC, postOSC } from '../api/osc';
 import { logAxiosError } from '../api/utils';
 import { oscPlaceholderSettings } from '../models/OscSettings';
 import { ontimeQueryClient } from '../queryClient';
 export default function useOscSettings() {
  const { data, status, isFetching, isError, refetch } = useQuery({
    queryKey: OSC_SETTINGS,
    queryFn: getOSC,
    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt: number) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
    networkMode: 'always',
  });
  return { data: data ?? oscPlaceholderSettings, status, isFetching, isError, refetch };
 }
 export function useOscSettingsMutation() {
  const { isPending, mutateAsync } = useMutation({
    mutationFn: postOSC,
    onError: (error) => logAxiosError('Error saving OSC settings', error),
    onSuccess: (res) => {
      ontimeQueryClient.setQueryData(OSC_SETTINGS, res.data);
    },
    onSettled: () => ontimeQueryClient.invalidateQueries({ queryKey: OSC_SETTINGS }),
  });
  return { isPending, mutateAsync };
 }
@@ -11,7 +11,7 @@ const placeholderProjectList: ProjectFileListResponse = {
  lastLoadedProject: '',
 };
-function useProjectList() {
+export function useProjectList() {
  const { data, status, refetch } = useQuery({
    queryKey: PROJECT_LIST,
    queryFn: getProjects,
@@ -1,20 +0,0 @@
 import { useQuery } from '@tanstack/react-query';
 import { OntimeReport } from 'ontime-types';
 import { MILLIS_PER_HOUR } from 'ontime-utils';
 import { REPORT } from '../api/constants';
 import { fetchReport } from '../api/report';
 export default function useReport() {
  const { data, refetch } = useQuery<OntimeReport>({
    queryKey: REPORT,
    queryFn: fetchReport,
    placeholderData: (previousData, _previousQuery) => previousData,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    networkMode: 'always',
    staleTime: MILLIS_PER_HOUR,
  });
  return { data: data ?? {}, refetch };
 }
@@ -1,30 +1,20 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { OntimeEntry, Rundown } from 'ontime-types';
+import { NormalisedRundown, OntimeRundown, 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 = {
+const cachedRundownPlaceholder = { order: [] as string[], rundown: {} as NormalisedRundown, revision: -1 };
  id: 'default',
  title: '',
  order: [],
  flatOrder: [],
  entries: {},
  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,
@@ -34,26 +24,22 @@ export default function useRundown() {
  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
 /**
 * Provides access to a flat rundown
 * built from the order and rundown fields
 */
 export function useFlatRundown() {
  const { data, status } = useRundown();
  const { data: projectData } = useProjectData();
  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]);
+      const flatRundown = data.order.map((id) => data.rundown[id]);
-      setFlatRundown(flatRundown);
+      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,17 +50,5 @@ 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) {
  const { data, status } = useFlatRundown();
  const filteredData = useMemo(() => {
    return data.filter(cb);
  }, [data, cb]);
  return { data: filteredData, status };
 }
@@ -0,0 +1,46 @@
 import { act, renderHook } from '@testing-library/react';
 import useClickOutside from '../useClickOutside';
 describe('useClickOutside', () => {
  let target: HTMLElement;
  let anotherElement: HTMLElement;
  beforeAll(() => {
    target = global.document.createElement('div');
    global.document.body.appendChild(target);
    anotherElement = global.document.createElement('div');
    global.document.body.appendChild(anotherElement);
  });
  it('should trigger clicking outside', () => {
    const ref = { current: target };
    const callback = vi.fn();
    renderHook(() => useClickOutside(ref, callback));
    act(() => {
      global.document.dispatchEvent(new Event('click'));
    });
    expect(callback).toHaveBeenCalled();
    act(() => {
      anotherElement.click();
    });
    expect(callback).toHaveBeenCalledTimes(2);
  });
  it('should not trigger clicking inside', () => {
    const ref = { current: target };
    const callback = vi.fn();
    renderHook(() => useClickOutside(ref, callback));
    act(() => {
      target.click();
    });
    expect(callback).not.toHaveBeenCalled();
  });
 });
@@ -0,0 +1,25 @@
 import { RefObject, useEffect } from 'react';
 type ClickOutsideEventHandler = (event: MouseEvent) => void;
 export default function useClickOutside<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  callback: ClickOutsideEventHandler,
 ) {
  useEffect(() => {
    function handleClick(event: MouseEvent) {
      const element = ref?.current;
      // Do nothing if clicking ref's element or descendent element
      if (!element || element.contains(event.target as Node)) {
        return;
      }
      callback(event);
    }
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, [ref, callback]);
 }
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useShallow } from 'zustand/shallow';
 import { useClientStore } from '../stores/clientStore';
 import { socketSendJson } from '../utils/socket';
@@ -10,12 +9,10 @@ import { useIsOnline } from './useSocket';
 export const useClientPath = () => {
  const navigate = useNavigate();
  const { pathname, search } = useLocation();
-  const { redirect, setRedirect } = useClientStore(
+  const { redirect, setRedirect } = useClientStore((store) => ({
-    useShallow((store) => ({
+    redirect: store.redirect,
-      redirect: store.redirect,
+    setRedirect: store.setRedirect,
-      setRedirect: store.setRedirect,
+  }));
    })),
  );
  const isOnline = useIsOnline();
  // notify of client path changes
@@ -1,806 +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 to any new block (event / delay / block)
  after: MaybeString;
  before: MaybeString;
  // options to blocks of type OntimeEvent
  defaultPublic: boolean;
  linkPrevious: boolean;
  lastEventId: MaybeString;
 }>;
 /**
 * Gather utilities for actions on entries
 */
 export const useEntryActions = () => {
  const queryClient = useQueryClient();
  const {
    defaultPublic,
    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 _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,
          defaultPublic: options?.defaultPublic ?? defaultPublic,
          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;
        newEntry.isPublic = applicationOptions.defaultPublic;
        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.mutateAsync(newEntry);
      } catch (error) {
        logAxiosError('Failed adding event', error);
      }
    },
    [
      _addEntryMutation,
      defaultDangerTime,
      defaultDuration,
      defaultEndAction,
      defaultPublic,
      defaultTimerType,
      defaultTimeStrategy,
      defaultWarnTime,
      linkPrevious,
      queryClient,
    ],
  );
  /**
   * Calls mutation to clone a selection
   * @private
   */
  const _cloneMutation = useMutation({
    mutationFn: postCloneEntry,
    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
  });
  /**
   * Clone a selection
   */
  const clone = useCallback(
    async (entryId: EntryId) => {
      try {
        await _cloneMutation.mutateAsync(entryId);
      } catch (error) {
        logAxiosError('Error cloning entry', error);
      }
    },
    [_cloneMutation],
  );
  /**
   * Calls mutation to update existing entry
   * @private
   */
  const _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.mutateAsync(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.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<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 _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.mutateAsync({ ids: eventIds, data });
      } catch (error) {
        logAxiosError('Error updating events', error);
      }
    },
    [_batchUpdateEventsMutation],
  );
  /**
   * Calls mutation to delete an entry
   * @private
   */
  const _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.mutateAsync(entryIds);
      } catch (error) {
        logAxiosError('Error deleting event', error);
      }
    },
    [_deleteEntryMutation],
  );
  /**
   * Calls mutation to delete all events
   * @private
   */
  const _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.mutateAsync();
    } catch (error) {
      logAxiosError('Error deleting events', error);
    }
  }, [_deleteAllEntriesMutation]);
  /**
   * Calls mutation to apply a delay
   * @private
   */
  const _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.mutateAsync(delayEventId);
      } catch (error) {
        logAxiosError('Error applying delay', error);
      }
    },
    [_applyDelayMutation],
  );
  /**
   * Calls mutation to dissolve a block
   * @private
   */
  const _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.mutateAsync(blockId);
      } catch (error) {
        logAxiosError('Error dissolving block', error);
      }
    },
    [_ungroupMutation],
  );
  /**
   * Calls mutation to create a block with a selection
   * @private
   */
  const _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.mutateAsync(entryIds);
      } catch (error) {
        logAxiosError('Error grouping entries', error);
      }
    },
    [_groupEntriesMutation],
  );
  /**
   * Calls mutation to reorder an entry
   * @private
   */
  const _reorderEntryMutation = useMutation({
    mutationFn: patchReorderEntry,
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
  });
  /**
   * 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.mutateAsync(reorderObject);
      } catch (error) {
        logAxiosError('Error re-ordering event', error);
      }
    },
    [_reorderEntryMutation],
  );
  const move = useCallback(async (entryId: EntryId, direction: 'up' | 'down') => {
    const cachedRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
    if (!cachedRundown?.order) {
      return;
    }
    const { destinationId, order } =
      direction === 'up'
        ? moveUp(entryId, cachedRundown.order, cachedRundown.entries)
        : moveDown(entryId, cachedRundown.order, cachedRundown.entries);
    if (destinationId) {
      try {
        const reorderObject: ReorderEntry = {
          entryId,
          destinationId,
          order: order as 'before' | 'after' | 'insert',
        };
        await _reorderEntryMutation.mutateAsync(reorderObject);
      } catch (error) {
        logAxiosError('Error re-ordering event', error);
      }
    }
  }, []);
  /**
   * Calls mutation to swap events
   * @private
   */
  const _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<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 _swapEvents.mutateAsync({ from, to });
      } catch (error) {
        logAxiosError('Error re-ordering event', error);
      }
    },
    [_swapEvents],
  );
  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.events = parent.events.filter((event) => event !== entry.id);
    }
    delete entries[entry.id];
    flatOrder = flatOrder.filter((id) => id !== entry.id);
  }
  return { entries, order, flatOrder };
 }
@@ -0,0 +1,624 @@
 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();
  /**
   * 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,
    reorderEvent,
    swapEvents,
    updateEvent,
    updateTimer,
    updateCustomField,
  };
 };
@@ -1,39 +1,31 @@
 import { useEffect, useState } from 'react';
-import { throttle } from '../utils/throttle';
+import { throttle } from '../../common/utils/throttle';
-const inactiveTime = 3000; // 3 seconds
+export const useFadeOutOnInactivity = () => {
-
+  const [isMouseMoved, setIsMouseMoved] = useState(false);
 /**
 * Provides whether there has been mouse movement in the page in the last <inactiveTime>
 */
 export const useFadeOutOnInactivity = (initialState = false) => {
  const [isUserActive, setIsUserActive] = useState(initialState);
  // show on mouse move
  useEffect(() => {
    let fadeOut: NodeJS.Timeout | null = null;
    const setShowMenuTrue = () => {
-      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;
 };
@@ -0,0 +1,27 @@
 import { useEffect, useRef } from 'react';
 /**
 * @description utility hook to around setInterval
 * @param callback
 * @param delay
 */
 export const useInterval = (callback, delay) => {
  const savedCallback = useRef();
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);
  useEffect(() => {
    /**
     * @description function to be called
     */
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      const id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
 };
@@ -12,7 +12,7 @@ type noop = (this: any, ...args: any[]) => any;
 type PickFunction<T extends noop> = (this: ThisParameterType<T>, ...args: Parameters<T>) => ReturnType<T>;
-const isFunction = (value: unknown): value is (...args: any) => any => typeof value === 'function';
+export const isFunction = (value: unknown): value is (...args: any) => any => typeof value === 'function';
 export default function useMemoisedFn<T extends noop>(fn: T) {
  if (isDev) {
@@ -1,56 +1,75 @@
-import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';
+import { RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';
 import { useRuntimeStore } from '../stores/runtime';
 import { socketSendJson } from '../utils/socket';
 const createSelector =
  <T>(selector: (state: RuntimeStore) => T) =>
  () =>
    useRuntimeStore(selector);
 export const setClientRemote = {
  setIdentify: (payload: { target: string; identify: boolean }) => socketSendJson('client', payload),
  setRedirect: (payload: { target: string; redirect: string }) => socketSendJson('client', payload),
  setClientName: (payload: { target: string; rename: string }) => socketSendJson('client', payload),
 };
-export const useRundownEditor = createSelector((state: RuntimeStore) => ({
+export const useRundownEditor = () => {
-  playback: state.timer.playback,
+  const featureSelector = (state: RuntimeStore) => ({
-  selectedEventId: state.eventNow?.id ?? null,
+    playback: state.timer.playback,
-  nextEventId: state.eventNext?.id ?? null,
+    selectedEventId: state.eventNow?.id ?? null,
-}));
+    nextEventId: state.eventNext?.id ?? null,
  });
-export const useOperator = createSelector((state: RuntimeStore) => ({
+  return useRuntimeStore(featureSelector);
-  playback: state.timer.playback,
+};
  selectedEventId: state.eventNow?.id ?? null,
 }));
-export const useTimerViewControl = createSelector((state: RuntimeStore) => ({
+export const useOperator = () => {
-  blackout: state.message.timer.blackout,
+  const featureSelector = (state: RuntimeStore) => ({
-  blink: state.message.timer.blink,
+    playback: state.timer.playback,
-  secondarySource: state.message.timer.secondarySource,
+    selectedEventId: state.eventNow?.id ?? null,
-}));
+  });
-export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
+  return useRuntimeStore(featureSelector);
-  text: state.message.timer.text,
+};
  visible: state.message.timer.visible,
 }));
-export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
+export const useTimerViewControl = () => {
-  text: state.message.external,
+  const featureSelector = (state: RuntimeStore) => ({
-  visible: state.message.timer.secondarySource === 'external',
+    blackout: state.message.timer.blackout,
-}));
+    blink: state.message.timer.blink,
    secondarySource: state.message.timer.secondarySource,
  });
-export const useMessagePreview = createSelector((state: RuntimeStore) => ({
+  return useRuntimeStore(featureSelector);
-  blink: state.message.timer.blink,
+};
-  blackout: state.message.timer.blackout,
+
-  phase: state.timer.phase,
+export const useTimerMessageInput = () => {
-  showAuxTimer: state.message.timer.secondarySource === 'aux',
+  const featureSelector = (state: RuntimeStore) => ({
-  showExternalMessage: state.message.timer.secondarySource === 'external' && Boolean(state.message.external),
+    text: state.message.timer.text,
-  showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
+    visible: state.message.timer.visible,
-  timerType: state.eventNow?.timerType ?? null,
+  });
-  countToEnd: state.eventNow?.countToEnd ?? false,
+
-}));
+  return useRuntimeStore(featureSelector);
 };
 export const useExternalMessageInput = () => {
  const featureSelector = (state: RuntimeStore) => ({
    text: state.message.external,
    visible: state.message.timer.secondarySource === 'external',
  });
  return useRuntimeStore(featureSelector);
 };
 export const useMessagePreview = () => {
  const featureSelector = (state: RuntimeStore) => ({
    blink: state.message.timer.blink,
    blackout: state.message.timer.blackout,
    phase: state.timer.phase,
    showAuxTimer: state.message.timer.secondarySource === 'aux',
    showExternalMessage: state.message.timer.secondarySource === 'external' && Boolean(state.message.external),
    showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
    timerType: state.eventNow?.timerType ?? null,
    countToEnd: state.eventNow?.countToEnd ?? false,
  });
  return useRuntimeStore(featureSelector);
 };
 export const setMessage = {
  timerText: (payload: string) => socketSendJson('message', { timer: { text: payload } }),
@@ -62,12 +81,16 @@ export const setMessage = {
    socketSendJson('message', { timer: { secondarySource: payload } }),
 };
-export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
+export const usePlaybackControl = () => {
-  playback: state.timer.playback,
+  const featureSelector = (state: RuntimeStore) => ({
-  selectedEventIndex: state.runtime.selectedEventIndex,
+    playback: state.timer.playback,
-  numEvents: state.runtime.numEvents,
+    selectedEventIndex: state.runtime.selectedEventIndex,
-  timerPhase: state.timer.phase,
+    numEvents: state.runtime.numEvents,
-}));
+    timerPhase: state.timer.phase,
  });
  return useRuntimeStore(featureSelector);
 };
 export const setPlayback = {
  start: () => socketSendJson('start'),
@@ -91,12 +114,32 @@ export const setPlayback = {
  },
 };
-export const useAuxTimerTime = createSelector((state: RuntimeStore) => state.auxtimer1.current);
+export const useInfoPanel = () => {
  const featureSelector = (state: RuntimeStore) => ({
    eventNow: state.eventNow,
    eventNext: state.eventNext,
    playback: state.timer.playback,
    selectedEventIndex: state.runtime.selectedEventIndex,
    numEvents: state.runtime.numEvents,
  });
-export const useAuxTimerControl = createSelector((state: RuntimeStore) => ({
+  return useRuntimeStore(featureSelector);
-  playback: state.auxtimer1.playback,
+};
-  direction: state.auxtimer1.direction,
+
-}));
+export const useAuxTimerTime = () => {
  const featureSelector = (state: RuntimeStore) => state.auxtimer1.current;
  return useRuntimeStore(featureSelector);
 };
 export const useAuxTimerControl = () => {
  const featureSelector = (state: RuntimeStore) => ({
    playback: state.auxtimer1.playback,
    direction: state.auxtimer1.direction,
  });
  return useRuntimeStore(featureSelector);
 };
 export const setAuxTimer = {
  start: () => socketSendJson('auxtimer', { '1': SimplePlayback.Start }),
@@ -106,13 +149,20 @@ export const setAuxTimer = {
  setDuration: (time: number) => socketSendJson('auxtimer', { '1': { duration: time } }),
 };
-export const useSelectedEventId = createSelector((state: RuntimeStore) => ({
+export const useSelectedEventId = () => {
-  selectedEventId: state.eventNow?.id ?? null,
+  const featureSelector = (state: RuntimeStore) => ({
-}));
+    selectedEventId: state.eventNow?.id ?? null,
  });
-export const useCurrentBlockId = createSelector((state: RuntimeStore) => ({
+  return useRuntimeStore(featureSelector);
-  currentBlockId: state.currentBlock.block?.id ?? null,
+};
-}));
+
 export const useCurrentBlockId = () => {
  const featureSelector = (state: RuntimeStore) => ({
    currentBlockId: state.currentBlock.block?.id ?? null,
  });
  return useRuntimeStore(featureSelector);
 };
 export const setEventPlayback = {
  loadEvent: (id: string) => socketSendJson('load', { id }),
@@ -121,80 +171,81 @@ export const setEventPlayback = {
  pause: () => socketSendJson('pause'),
 };
-export const useTimer = createSelector((state: RuntimeStore) => ({
+export const useTimer = () => {
  ...state.timer,
 }));
 export const useClock = createSelector((state: RuntimeStore) => ({
  clock: state.clock,
 }));
 /** Used by the progress bar components */
 export const useProgressData = createSelector((state: RuntimeStore) => ({
  current: state.timer.current,
  duration: state.timer.duration,
  timeWarning: state.eventNow?.timeWarning ?? null,
  timeDanger: state.eventNow?.timeDanger ?? null,
 }));
 export const useRuntimeOverview = createSelector((state: RuntimeStore) => ({
  plannedStart: state.runtime.plannedStart,
  actualStart: state.runtime.actualStart,
  plannedEnd: state.runtime.plannedEnd,
  expectedEnd: state.runtime.expectedEnd,
 }));
 export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) => ({
  playback: state.timer.playback,
  clock: state.clock,
  numEvents: state.runtime.numEvents,
  selectedEventIndex: state.runtime.selectedEventIndex,
  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
  currentBlock: state.currentBlock,
 }));
 export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
  clock: state.clock,
  offset: state.runtime.offset,
 }));
 export const useTimeUntilData = createSelector((state: RuntimeStore) => ({
  clock: state.clock,
  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
  offsetMode: state.runtime.offsetMode,
  currentDay: state.eventNow?.dayOffset ?? 0,
  actualStart: state.runtime.actualStart,
  plannedStart: state.runtime.plannedStart,
 }));
 export const useCurrentDay = createSelector((state: RuntimeStore) => ({
  currentDay: state.eventNow?.dayOffset ?? 0,
 }));
 export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({
  offset: state.runtime.offset,
 }));
 export const usePing = createSelector((state: RuntimeStore) => ({
  ping: state.ping,
 }));
 /** convert ping into a derived value which changes less often */
 export const useIsOnline = createSelector((state: RuntimeStore) => ({
  isOnline: state.ping > 0,
 }));
 export const useOffsetMode = createSelector((state: RuntimeStore) => ({
  offsetMode: state.runtime.offsetMode,
 }));
 export const setOffsetMode = (payload: OffsetMode) => socketSendJson('offsetmode', payload);
 export const usePlayback = () => {
  const featureSelector = (state: RuntimeStore) => ({
-    playback: state.timer.playback,
+    ...state.timer,
  });
  return useRuntimeStore(featureSelector);
 };
 export const useClock = () => {
  const featureSelector = (state: RuntimeStore) => ({
    clock: state.clock,
  });
  return useRuntimeStore(featureSelector);
 };
 /** Used by the progress bar components */
 export const useProgressData = () => {
  const featureSelector = (state: RuntimeStore) => ({
    current: state.timer.current,
    duration: state.timer.duration,
    timeWarning: state.eventNow?.timeWarning ?? null,
    timeDanger: state.eventNow?.timeDanger ?? null,
  });
  return useRuntimeStore(featureSelector);
 };
 export const setClientName = (newName: string) => socketSendJson('set-client-name', newName);
 export const useRuntimeOverview = () => {
  const featureSelector = (state: RuntimeStore) => ({
    plannedStart: state.runtime.plannedStart,
    actualStart: state.runtime.actualStart,
    plannedEnd: state.runtime.plannedEnd,
    expectedEnd: state.runtime.expectedEnd,
  });
  return useRuntimeStore(featureSelector);
 };
 export const useRuntimePlaybackOverview = () => {
  const featureSelector = (state: RuntimeStore) => ({
    playback: state.timer.playback,
    clock: state.clock,
    numEvents: state.runtime.numEvents,
    selectedEventIndex: state.runtime.selectedEventIndex,
    offset: state.runtime.offset,
    currentBlock: state.currentBlock,
  });
  return useRuntimeStore(featureSelector);
 };
 export const useTimelineStatus = () => {
  const featureSelector = (state: RuntimeStore) => ({
    clock: state.clock,
    offset: state.runtime.offset,
  });
  return useRuntimeStore(featureSelector);
 };
 export const usePing = () => {
  const featureSelector = (state: RuntimeStore) => ({
    ping: state.ping,
  });
  return useRuntimeStore(featureSelector);
 };
 /** convert ping into a derived value which changes less often */
 export const useIsOnline = () => {
  const featureSelector = (state: RuntimeStore) => ({
    isOnline: state.ping > 0,
  });
  return useRuntimeStore(featureSelector);
--- a/Show More
+++ b/Show More
`@@ -1,4 +1,4 @@`
	`import { IoBan } from 'react-icons/io5';`	`import { IoBan } from '@react-icons/all-files/io5/IoBan';`

	`import { cx } from '../../../utils/styleUtils';`	`import { cx } from '../../../utils/styleUtils';`