Merge pull request #1535 from cpvalente/v4

v4

.dockerignore

@@ -16,7 +16,8 @@
 
 # Ignore build folders
 node_modules
-dist
+**/node_modules
+**/dist
 
 # Ignore default volumes created by running docker compose up
 ontime-db

.eslintignore

@@ -1 +1,2 @@
- "ONTIME_VERSION.js"
+ "ONTIME_VERSION.js"
+dist/

.github/workflows/build_cli.yml

@@ -13,20 +13,20 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          registry-url: 'https://registry.npmjs.org'
-
+      
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
         with:
-          version: 10
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/build_electron.yml

@@ -11,15 +11,20 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-
+      
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
         with:
-          version: 10
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -53,15 +58,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
-        with:
-          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -86,15 +85,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
-        with:
-          version: 10
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/build_resolver.yml

@@ -0,0 +1,42 @@
+name: Ontime Resolver build
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  build_resolver:
+    permissions:
+      id-token: write
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        run: pnpm build:resolver
+
+      - name: Publish to NPM
+        run: pnpm publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true
+        working-directory: ./apps/resolver

.github/workflows/test.yml

@@ -14,55 +14,35 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
         with:
-          version: 10
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      # Run code quality per package
-      - name: React - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./apps/client
-
-      - name: Server - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./apps/server
-
-      - name: Utils - Run linter +  TypeScript checks
-        if: always()
-        run: pnpm lint && tsc --noEmit
-        working-directory: ./packages/utils
-
-      - name: Types - Run linter
-        if: always()
+      # Run code quality 
+      - name: Run linter
         run: pnpm lint
-        working-directory: ./packages/types
+      
+      - name: Run TypeScript checks
+        run: pnpm typecheck
 
       # We choose to run tests separately
-      - name: React - Run unit tests
+      - name: Run unit tests
         if: always()
-        run: pnpm test:pipeline
-        working-directory: ./apps/client
-
-      - name: Server - Run unit tests
-        if: always()
-        run: pnpm test:pipeline
-        working-directory: ./apps/server
-
-      - name: Utils - Run unit tests
-        if: always()
-        run: pnpm test:pipeline
-        working-directory: ./packages/utils
+        run: pnpm test
 
   e2e-test:
     runs-on: ubuntu-latest
@@ -70,21 +50,36 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
         with:
-          version: 10
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build client
-        run: pnpm build:local
+      - name: Get installed Playwright version
+        run: echo "PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --parseable | cut -s -d '@' -f3 | cut -d '/' -f1)" >> $GITHUB_ENV
+      - name: Cache playwright binaries
+        uses: actions/cache@v4
+        with:
+          path: |
+           ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+      - run: npx playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
 
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps

.gitignore

@@ -34,6 +34,10 @@ e2e/tests/fixtures/tmp/*
 build/
 dist/
 
+# bundled assets
+translations.json
+override.css
+
 # working stuff
 **/TODO.md
 

.prettierignore

@@ -7,4 +7,7 @@ playwright-report
 
 **/*.toml
 **/*.yml
-**/*.json
+**/*.json
+!tsconfig.common.json
+!turbo.json
+!package.json

DEVELOPMENT.md

@@ -21,7 +21,7 @@ Locally, we would need to run both the React client and the node.js server in de
 
 From the project root, run the following commands
 - __Install the project dependencies__ by running `pnpm i`
-- __Run dev mode__ by running `pnpm turbo dev`
+- __Run dev mode__ by running `pnpm dev` or `pnpm dev:electron` to get the electron window
 
 
 ### Debugging backend
@@ -30,10 +30,10 @@ The previous command will start the development servers for both the client, ser
 Typically in dev mode we prefer to start these in separate terminals to help with error tracking and debugging.
 
 We do that by creating two terminals an running
-- __Run the React UI__ by running `pnpm turbo dev --filter=ontime-ui`
-- __Run the nodejs server__ by running `pnpm turbo dev --filter=ontime-server`
+- __Run the React UI__ by running `pnpm dev --filter=ontime-ui`
+- __Run the nodejs server__ by running `pnpm dev --filter=ontime-server`
 
-- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by running `pnpm turbo dev:inspect --filter=ontime-server`.
+- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by running `pnpm dev:inspect --filter=ontime-server`.
 
 ## TESTING
 
@@ -46,7 +46,7 @@ Generally we have 2 types of tests.
 
 Unit tests are contained in mostly all the apps and packages (client, server and utils)
 
-You can run unit tests by running `pnpm turbo test:pipeline` from the project root.
+You can run unit tests by running `pnpm test:pipeline` from the project root.
 This will run all tests and close test runner.
 
 Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode
@@ -66,7 +66,7 @@ start the webserver with `pnpm dev:server`
 
 Some other useful commands
 
-- `pnpm e2e --ui` open playwright UI
+- `pnpm e2e:ui` open playwright UI
 - `pnpm e2e --headed` run tests with a visible browser window
 
 ## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)
@@ -77,13 +77,13 @@ You can generate a distribution for your OS by running the following steps.
 From the project root, run the following commands
 
 - __Install the project dependencies__ by running `pnpm i`
-- __Build the UI and server__ by running `pnpm turbo run build:electron`
-- __Create the package__ by running `pnpm turbo run dist-win`, `pnpm turbo run dist-mac` or `pnpm turbo run dist-linux`
+- __Build the UI and server__ by running `pnpm build`
+- __Create the package__ by running `pnpm dist-win`, `pnpm dist-mac` or `pnpm dist-linux`
 
 The build distribution assets will be at `.apps/electron/dist`
 
 Note: The MacOS build will only work in CI, locally it will fail due to notarisation issues.
-Use the `pnpm turbo run dist-mac:local` command to build a MacOS distribution locally and skip the notary process.
+Use the `pnpm dist-mac:local` command to build a MacOS distribution locally and skip the notary process.
 
 ## DOCKER
 
@@ -99,3 +99,16 @@ Other useful commands
 
 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`
+
+## CONTRIBUTION GUIDELINES
+
+If you want to propose changes to the codebase, please reach out before opening a Pull Request.
+
+For new PRs, please follow the following checklist:
+* [ ] You have updated and ran unit locally and they are passing. Unit tests are generally created for all utility functions and business logic 
+* [ ] You have ran code formatting and linting in all your changes
+* [ ] The branch is clean and the commits are meaningfully separated and contain descriptive messages
+* [ ] The PR body contains description and motivation for the changes
+
+After this checklist is complete, you can request a review from one of the maintainers to get feedback and approval on the changes. \
+We will review as soon as possible

Dockerfile

@@ -1,37 +1,36 @@
-FROM node:22-bullseye AS builder
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install -g pnpm@10.11.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
-
-# Set environment variables
-# Environment Variable to signal that we are running production
-ENV NODE_ENV=docker
-# Ontime Data path
-ENV ONTIME_DATA=/data/
-
-WORKDIR /app/
-
-# Prepare UI
-COPY --from=builder /app/apps/client/build ./client/
-
-# Prepare Backend
-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
-
-CMD ["node", "server/docker.cjs"]
-
-# Build and run commands
-# !!! Note that this command needs pre-build versions of the UI and server apps
-# docker buildx build . -t getontime/ontime
-# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime
+FROM node:22-bullseye AS builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN npm install -g pnpm@10.11.0
+COPY . /app
+WORKDIR /app
+RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils --filter=ontime-types install --config.dedupe-peer-dependents=false --frozen-lockfile
+RUN pnpm run build:docker
+
+FROM node:22-alpine
+
+# Set environment variables
+# Environment Variable to signal that we are running production
+ENV NODE_ENV=docker
+# Ontime Data path
+ENV ONTIME_DATA=/data/
+
+WORKDIR /app/
+
+# Prepare UI
+COPY --from=builder /app/apps/client/build ./client/
+
+# Prepare Backend
+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
+
+CMD ["node", "server/docker.cjs"]
+
+# Build and run commands
+# docker buildx build . -t getontime/ontime
+# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@getontime/cli",
-    "version": "4.0.0-alpha.4",
+    "version": "4.0.0-beta.5",
     "author": "Carlos Valente",
     "description": "Time keeping for live events",
     "repository": "https://github.com/cpvalente/ontime",

apps/client/index.html

@@ -13,12 +13,6 @@
     <link rel="manifest" href="/manifest.json" />
     <meta name="robots" content="noindex" />
     <title>ontime</title>
-    <style>
-      body,
-      html {
-        background-color: #101010 !important;
-      }
-    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

apps/client/package.json

@@ -1,23 +1,23 @@
 {
   "name": "ontime-ui",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-beta.5",
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.2",
+    "@base-ui-components/react": "1.0.0-beta.4",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource/open-sans": "^5.0.28",
-    "@mantine/hooks": "^8.2.4",
+    "@fontsource/open-sans": "^5.2.6",
+    "@mantine/hooks": "^8.2.8",
     "@sentry/react": "^10.2.0",
     "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.84.1",
-    "@tanstack/react-query-devtools": "^5.84.1",
+    "@tanstack/react-query": "^5.85.9",
+    "@tanstack/react-query-devtools": "^5.85.9",
     "@tanstack/react-table": "^8.21.3",
     "autosize": "^6.0.1",
-    "axios": "^1.11.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "axios": "^1.12.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "csv-stringify": "^6.6.0",
     "prismjs": "^1.30.0",
     "react": "^19.1.1",
@@ -27,24 +27,22 @@
     "react-hook-form": "^7.62.0",
     "react-icons": "5.5.0",
     "react-qr-code": "^2.0.18",
-    "react-router": "^7.8.0",
+    "react-router": "^7.8.2",
     "react-simple-code-editor": "^0.14.1",
+    "react-virtuoso": "^4.14.0",
     "web-vitals": "^5.1.0",
-    "zustand": "^5.0.7"
+    "zustand": "^5.0.8"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
     "postinstall": "pnpm addversion",
     "dev": "cross-env BROWSER=none vite",
-    "build": "vite build",
-    "build:local": "cross-env NODE_ENV=local vite build",
-    "build:electron": "cross-env NODE_ENV=local vite build",
-    "build:docker": "cross-env VITE_IS_DOCKER=true vite build",
-    "build:localdocker": "cross-env NODE_ENV=local vite build",
+    "dev:electron": "pnpm dev",
     "lint": "eslint . --quiet",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
     "test": "vitest",
     "test:pipeline": "vitest run",
-    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build",
     "analyse": "npx vite-bundle-visualizer"
   },
   "browserslist": {
@@ -63,8 +61,8 @@
     "@sentry/vite-plugin": "^2.16.1",
     "@tanstack/eslint-plugin-query": "^5.8.4",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
     "@vitejs/plugin-react": "4.5.1",

apps/client/src/App.tsx

@@ -8,6 +8,7 @@ import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverla
 import { AppContextProvider } from './common/context/AppContext';
 import { ontimeQueryClient } from './common/queryClient';
 import { connectSocket } from './common/utils/socket';
+import KeepAwake from './features/keep-awake/KeepAwake';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
 import { baseURI } from './externals';
@@ -24,6 +25,7 @@ function App() {
               <ErrorBoundary>
                 <TranslationProvider>
                   <IdentifyOverlay />
+                  <KeepAwake />
                   <AppRouter />
                 </TranslationProvider>
               </ErrorBoundary>

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

@@ -1,6 +1,9 @@
 import axios from 'axios';
+import { TranslationObject } from 'ontime-types';
 
-import { apiEntryUrl } from './constants';
+import { ontimeQueryClient } from '../../common/queryClient';
+
+import { apiEntryUrl, customTranslationsURL, TRANSLATION } from './constants';
 
 const assetsPath = `${apiEntryUrl}/assets`;
 
@@ -28,3 +31,21 @@ export async function restoreCSSContents(): Promise<string> {
   const res = await axios.post(`${assetsPath}/css/restore`);
   return res.data;
 }
+
+/**
+ * HTTP request to get user translation
+ */
+export async function getUserTranslation(): Promise<TranslationObject> {
+  const res = await axios.get(customTranslationsURL);
+  return res.data;
+}
+
+/**
+ * HTTP request to post user translation
+ */
+export async function postUserTranslation(translation: TranslationObject): Promise<void> {
+  await axios.post(`${assetsPath}/translations`, {
+    translation,
+  });
+  await ontimeQueryClient.invalidateQueries({ queryKey: TRANSLATION });
+}

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

@@ -15,12 +15,15 @@ export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const CLIENT_LIST = ['clientList'];
 export const REPORT = ['report'];
+export const TRANSLATION = ['translation'];
 
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;
 
 const userAssetsPath = 'user';
 const cssOverridePath = 'styles/override.css';
+const customTranslationsPath = 'translations/translations.json';
 
 export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
 export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
+export const customTranslationsURL = `${serverURL}/${userAssetsPath}/${customTranslationsPath}`;

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

@@ -1,9 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
 import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';
 
-import { makeTable } from '../../views/cuesheet/cuesheet.utils';
-import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../utils/csv';
-
 import { apiEntryUrl } from './constants';
 import { createBlob, downloadBlob } from './utils';
 
@@ -33,27 +30,6 @@ export async function downloadProject(fileName: string) {
   }
 }
 
-/**
- * Request download of the current rundown as a CSV file
- * @param fileName
- */
-export async function downloadCSV(fileName: string = 'rundown') {
-  try {
-    const { data, name } = await fileDownload(fileName);
-    const { project, rundowns, customFields } = data;
-
-    const flatRundowns = aggregateRundowns(rundowns);
-    const sheetData = makeTable(project, flatRundowns, customFields);
-
-    const fileContent = makeCSVFromArrayOfArrays(sheetData);
-
-    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
-    downloadBlob(blob, `${name}.csv`);
-  } catch (error) {
-    console.error(error);
-  }
-}
-
 /**
  * HTTP request to upload project file
  */

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

@@ -1,17 +1,11 @@
 import axios, { AxiosResponse } from 'axios';
-import {
-  EntryId,
-  MessageResponse,
-  OntimeEntry,
-  OntimeEvent,
-  ProjectRundownsList,
-  Rundown,
-  TransientEventPayload,
-} from 'ontime-types';
+import { EntryId, OntimeEntry, OntimeEvent, ProjectRundownsList, Rundown, TransientEventPayload } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 
-const rundownPath = `${apiEntryUrl}/rundown`;
+const rundownPath = `${apiEntryUrl}/rundowns`;
+
+// #region operations on project rundowns =========================
 
 /**
  * HTTP request to fetch a list of existing rundowns
@@ -22,37 +16,64 @@ export async function fetchProjectRundownList(): Promise<ProjectRundownsList> {
 }
 
 /**
- * HTTP request to fetch all events
+ * HTTP request to fetch all entries in the currently loaded rundown
  */
 export async function fetchCurrentRundown(): Promise<Rundown> {
   const res = await axios.get(`${rundownPath}/current`);
   return res.data;
 }
 
+/**
+ * HTTP request to switch the currently loaded rundown
+ */
+export async function loadRundown(id: string): Promise<AxiosResponse<ProjectRundownsList>> {
+  return axios.post(`${rundownPath}/${id}/load`);
+}
+
+/**
+ * HTTP request to create a new rundown
+ */
+export async function createRundown(title: string): Promise<AxiosResponse<ProjectRundownsList>> {
+  return axios.post(rundownPath, { title });
+}
+
+/**
+ * HTTP request to delete a rundown
+ */
+export async function deleteRundown(id: string): Promise<AxiosResponse<ProjectRundownsList>> {
+  return axios.delete(`${rundownPath}/${id}`);
+}
+
+// #endregion operations on project rundowns ======================
+// #region operations on rundown entries ==========================
+
 /**
  * HTTP request to post new entry
  */
-export async function postAddEntry(data: TransientEventPayload): Promise<AxiosResponse<OntimeEntry>> {
-  return axios.post(rundownPath, data);
+export async function postAddEntry(
+  rundownId: string,
+  data: TransientEventPayload,
+): Promise<AxiosResponse<OntimeEntry>> {
+  return axios.post(`${rundownPath}/${rundownId}/entry`, data);
 }
 
 /**
  * HTTP request to edit an entry
  */
-export async function putEditEntry(data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
-  return axios.put(rundownPath, data);
+export async function putEditEntry(rundownId: string, data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
+  return axios.put(`${rundownPath}/${rundownId}/entry`, data);
 }
 
-type BatchEditEntry = {
+export type BatchEditEntry = {
   data: Partial<OntimeEvent>;
-  ids: string[];
+  ids: EntryId[];
 };
 
 /**
  * HTTP request to edit multiple events
  */
-export async function putBatchEditEvents(data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
-  return axios.put(`${rundownPath}/batch`, data);
+export async function putBatchEditEvents(rundownId: string, data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
+  return axios.put(`${rundownPath}/${rundownId}/batch`, data);
 }
 
 export type ReorderEntry = {
@@ -64,60 +85,57 @@ export type ReorderEntry = {
 /**
  * HTTP request to reorder an entry
  */
-export async function patchReorderEntry(data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
-  return axios.patch(`${rundownPath}/reorder`, data);
+export async function patchReorderEntry(rundownId: string, data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
+  return axios.patch(`${rundownPath}/${rundownId}/reorder`, data);
 }
 
-export type SwapEntry = {
-  from: string;
-  to: string;
-};
-
 /**
  * HTTP request to swap two events
  */
-export async function requestEventSwap(data: SwapEntry): Promise<AxiosResponse<MessageResponse>> {
-  return axios.patch(`${rundownPath}/swap`, data);
+export async function requestEventSwap(rundownId: string, from: EntryId, to: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.patch(`${rundownPath}/${rundownId}/swap`, { from, to });
 }
 
 /**
  * HTTP request to request application of delay
  */
-export async function requestApplyDelay(delayId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.patch(`${rundownPath}/applydelay/${delayId}`);
+export async function requestApplyDelay(rundownId: string, delayId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.patch(`${rundownPath}/${rundownId}/applydelay/${delayId}`);
 }
 
 /**
  * HTTP request for cloning an entry
  */
-export async function postCloneEntry(entryId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/clone/${entryId}`);
-}
-
-/**
- * HTTP request for dissolving of a group
- */
-export async function requestUngroup(groupId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/ungroup/${groupId}`);
+export async function postCloneEntry(rundownId: string, entryId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`);
 }
 
 /**
  * HTTP request for grouping a list of entries into a group
  */
-export async function requestGroupEntries(entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/group`, { ids: entryIds });
+export async function requestGroupEntries(rundownId: string, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/${rundownId}/group`, { ids: entryIds });
 }
 
 /**
- * HTTP request to delete entries
+ * HTTP request for dissolving of a group
  */
-export async function deleteEntries(entryIds: EntryId[]): Promise<AxiosResponse<MessageResponse>> {
-  return axios.delete(rundownPath, { data: { ids: entryIds } });
+export async function requestUngroup(rundownId: string, groupId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/${rundownId}/ungroup/${groupId}`);
 }
 
 /**
- * HTTP request to delete all events
+ * HTTP request to delete entries of a given rundown
  */
-export async function requestDeleteAll(): Promise<AxiosResponse<MessageResponse>> {
-  return axios.delete(`${rundownPath}/all`);
+export async function deleteEntries(rundownId: string, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
+  return axios.delete(`${rundownPath}/${rundownId}/entries`, { data: { ids: entryIds } });
 }
+
+/**
+ * HTTP request to delete all entries of a given rundown
+ */
+export async function requestDeleteAll(rundownId: string): Promise<AxiosResponse<Rundown>> {
+  return axios.delete(`${rundownPath}/${rundownId}/all`);
+}
+
+// #endregion operations on rundown entries =======================

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

@@ -33,7 +33,13 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
     if (newPath === '/' || newPath === currentPath) {
       return;
     }
-    setRedirect({ target: id, redirect: newPath });
+
+    if (newPath.startsWith('preset-')) {
+      setRedirect({ target: id, redirect: newPath.slice(7) });
+    } else {
+      setRedirect({ target: id, redirect: newPath });
+    }
+
     onClose();
   };
 
@@ -45,7 +51,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
       label: view.label,
     })),
     ...enabledPresets.map((preset) => ({
-      value: preset.search,
+      value: `preset-${preset.alias}`,
       label: `URL Preset: ${preset.alias}`,
     })),
   ];
@@ -61,32 +67,11 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
         <>
           <Info>
             Remotely redirect the client to a different URL. <br />
-            Either by selecting a URL Preset or entering a custom path.
+            Either by entering a custom path or selecting a URL Preset.
             <br />
             <br />
             <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
           </Info>
-          <div>
-            <span className={style.label}>Select View or URL Preset</span>
-            <div className={style.textEntry}>
-              <Select
-                fluid
-                options={viewOptions}
-                defaultValue={viewOptions[0].value}
-                onValueChange={(value) => setSelected(value)}
-                disabled={enabledPresets.length === 0}
-              />
-              <Button
-                variant='primary'
-                aria-label='Redirect to preset'
-                className={style.redirect}
-                disabled={enabledPresets.length === 0 || selected === '/'}
-                onClick={() => handleRedirect(selected)}
-              >
-                Redirect <IoArrowForward />
-              </Button>
-            </div>
-          </div>
           <div className={style.inlineEntry}>
             <span className={style.label}>Enter custom path</span>
             <label className={style.textEntry}>
@@ -100,9 +85,34 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
               className={style.redirect}
               onClick={() => handleRedirect(path)}
             >
-              Redirect <IoArrowForward />
+              Redirect
+              <IoArrowForward />
             </Button>
           </div>
+          <div>
+            <span className={style.label}>Select View or URL Preset</span>
+            <div className={style.inlineEntry}>
+              <label className={style.textEntry}>
+                {origin}
+                <Select
+                  fluid
+                  options={viewOptions}
+                  defaultValue={viewOptions[0].value}
+                  onValueChange={(value) => setSelected(value)}
+                  disabled={enabledPresets.length === 0}
+                />
+              </label>
+              <Button
+                variant='primary'
+                aria-label='Redirect to preset'
+                className={style.redirect}
+                disabled={enabledPresets.length === 0 || selected === '/'}
+                onClick={() => handleRedirect(selected)}
+              >
+                Redirect <IoArrowForward />
+              </Button>
+            </div>
+          </div>
         </>
       }
     />

apps/client/src/common/components/error-boundary/ErrorBoundary.jsx

@@ -49,15 +49,14 @@ class ErrorBoundary extends React.Component {
       return (
         <div className={style.errorContainer} data-testid='error-container'>
           <div>
-            <p className={style.error}>:/</p>
-            <p>Something went wrong</p>
-            <div
-              role='button'
+            <p className={style.error}>: /</p>
+            <p>Something went wrong.</p>
+            <a
               className={style.report}
-              onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
+              href={`mailto:mail@getontime.no?subject=Error%20Report&body=${encodeURIComponent(this.reportContent)}`}
             >
               Report error
-            </div>
+            </a>
             <div
               role='button'
               className={style.report}

apps/client/src/common/components/error-boundary/ErrorBoundary.module.scss

@@ -3,24 +3,21 @@
   height: 100%;
   display: grid;
   place-content: center;
-  background-color: #121212;
-  color: white;
+  background-color: $ui-black;
+  color: $ui-white;
+}
 
-  .error {
-    color: $error-red;
-    font-weight: 600;
-  }
+.error {
+  color: $error-red;
+}
 
-  .report {
-    text-decoration: underline  $error-red;
-    cursor: pointer;
-  }
+.report {
+  color: $blue-500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
 
-  .report:hover {
-    color: $error-red;
-  }
-
-  .report:active {
-    color: white;
+  &:hover {
+    color: $ontime-color;
   }
 }

apps/client/src/common/components/input/colour-input/Swatch.tsx

@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react';
 import { IoBan } from 'react-icons/io5';
 
 import { cx } from '../../../utils/styleUtils';
@@ -10,12 +11,13 @@ interface SwatchProps {
   isSelected?: boolean;
 }
 
-export default function Swatch(props: SwatchProps) {
-  const { color, isSelected, onClick } = props;
-
-  const handleClick = () => {
+export default function Swatch({ color, isSelected, onClick }: SwatchProps) {
+  const handleClick = (event: MouseEvent) => {
     onClick?.(color);
+    event.preventDefault();
+    event.stopPropagation();
   };
+
   const classes = cx([style.swatch, isSelected && style.selected, onClick && style.selectable]);
 
   if (!color) {

apps/client/src/common/components/input/delay-input/DelayInput.tsx

@@ -20,7 +20,7 @@ export default function DelayInput(props: DelayInputProps) {
   const [value, setValue] = useState<string>('');
   const inputRef = useRef<HTMLInputElement | null>(null);
   // avoid wrong submit on cancel
-  let ignoreChange = false;
+  const ignoreChangeRef = useRef(false);
 
   // set internal value on duration change
   useEffect(() => {
@@ -35,8 +35,8 @@ export default function DelayInput(props: DelayInputProps) {
    * @param {string} newValue string to be parsed
    */
   const validateAndSubmit = (newValue: string) => {
-    if (ignoreChange) {
-      ignoreChange = false;
+    if (ignoreChangeRef.current) {
+      ignoreChangeRef.current = false;
       return;
     }
 
@@ -78,7 +78,7 @@ export default function DelayInput(props: DelayInputProps) {
     } else if (event.key === 'Tab') {
       validateAndSubmit((event.target as HTMLInputElement).value);
     } else if (event.key === 'Escape') {
-      ignoreChange = true;
+      ignoreChangeRef.current = true;
       setValue(millisToString(duration));
       inputRef.current?.blur();
     }

apps/client/src/common/components/link/app-link/AppLink.tsx

@@ -11,8 +11,7 @@ interface AppLinkProps {
  * 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;
+export default function AppLink({ search, children }: PropsWithChildren<AppLinkProps>) {
   const navigate = useNavigate();
 
   const handleClick = () => navigate({ search });

apps/client/src/common/components/link/external-link/ExternalLink.tsx

@@ -12,9 +12,7 @@ interface ExternalLinkProps {
   inline?: boolean;
 }
 
-export default function ExternalLink(props: ExternalLinkProps) {
-  const { href, inline, children } = props;
-
+export default function ExternalLink({ href, inline, children }: ExternalLinkProps) {
   const handleClick = (event: MouseEvent) => {
     event.preventDefault();
     openLink(href);

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

@@ -1,10 +1,12 @@
 import { memo } from 'react';
 import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
+import { LuCoffee } from 'react-icons/lu';
 import { useLocation } from 'react-router';
 import { Dialog } from '@base-ui-components/react/dialog';
 import { useDisclosure, useFullscreen } from '@mantine/hooks';
 
 import { isLocalhost } from '../../../externals';
+import { useKeepAwakeOptions } from '../../../features/keep-awake/KeepAwake';
 import { navigatorConstants } from '../../../viewerConfig';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
@@ -31,6 +33,7 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
   const [isRenameOpen, handlers] = useDisclosure(false);
   const { fullscreen, toggle } = useFullscreen();
   const { mirror, toggleMirror } = useViewOptionsStore();
+  const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
   const location = useLocation();
 
   return (
@@ -62,6 +65,13 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
               <IoSwapVertical />
               {mirror && <span className={style.note}>Active</span>}
             </NavigationMenuItem>
+            {window.isSecureContext && (
+              <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
+                Keep Awake
+                <LuCoffee />
+                {keepAwake && <span className={style.note}>Active</span>}
+              </NavigationMenuItem>
+            )}
             <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>
 
             <hr className={style.separator} />

apps/client/src/common/components/protect-route/PinPage.module.scss

@@ -11,9 +11,11 @@
 }
 
 .pin {
+  margin-top: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
 
   input {
     font-size: 4rem;

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

@@ -62,8 +62,6 @@
   padding: 2px;
   border-radius: $component-border-radius-md;
   color: $ui-white;
-  overflow-y: auto;
-  max-height: 20rem;
   border: 1px solid $gray-1000;
 
   &[data-side='start'] {
@@ -73,6 +71,16 @@
   }
 }
 
+.list {
+  box-sizing: border-box;
+  position: relative;
+  padding-block: 0.25rem;
+  overflow-y: auto;
+  max-height: 20rem;
+  max-height: var(--available-height);
+  scroll-padding-block: 1.5rem;
+}
+
 .item {
   box-sizing: border-box;
   outline: 0;

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

@@ -31,14 +31,17 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
         <BaseSelect.Positioner side='bottom' align='start'>
           <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
           <BaseSelect.Popup className={styles.popup}>
-            {options.map(({ disabled, label, value }) => (
-              <BaseSelect.Item key={String(value)} className={styles.item} value={value} disabled={disabled}>
-                <BaseSelect.ItemIndicator className={styles.itemIndicator}>
-                  <IoCheckmark className={styles.itemIndicatorIcon} />
-                </BaseSelect.ItemIndicator>
-                <BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
-              </BaseSelect.Item>
-            ))}
+            <BaseSelect.Arrow />
+            <BaseSelect.List className={styles.list}>
+              {options.map(({ disabled, label, value }) => (
+                <BaseSelect.Item key={String(value)} className={styles.item} value={value} disabled={disabled}>
+                  <BaseSelect.ItemIndicator className={styles.itemIndicator}>
+                    <IoCheckmark className={styles.itemIndicatorIcon} />
+                  </BaseSelect.ItemIndicator>
+                  <BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
+                </BaseSelect.Item>
+              ))}
+            </BaseSelect.List>
           </BaseSelect.Popup>
           <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
         </BaseSelect.Positioner>

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import SwatchPicker from '../input/colour-input/SwatchPicker';
 
@@ -16,10 +16,13 @@ const ensureHex = (value: string) => {
   return value;
 };
 
-export default function InlineColourPicker(props: InlineColourPickerProps) {
-  const { name, value } = props;
+export default function InlineColourPicker({ name, value }: InlineColourPickerProps) {
   const [colour, setColour] = useState(() => ensureHex(value));
 
+  useEffect(() => {
+    setColour(ensureHex(value));
+  }, [value]);
+
   return (
     <div className={style.inline}>
       <SwatchPicker color={colour} onChange={setColour} alwaysDisplayColor />

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

@@ -1,10 +1,10 @@
-import { useState } from 'react';
+import { ComponentProps, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router';
 
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 import Checkbox from '../checkbox/Checkbox';
 import Input from '../input/input/Input';
-import Select from '../select/Select';
+import Select, { SelectOption } from '../select/Select';
 import Switch from '../switch/Switch';
 
 import InlineColourPicker from './InlineColourPicker';
@@ -35,15 +35,22 @@ export default function ParamInput({ paramField }: ParamInputProps) {
       return <span className={style.empty}>No options available</span>;
     }
 
-    return <Select size='large' name={id} defaultValue={defaultOptionValue} options={paramField.values} />;
+    return <ControlledSelect id={id} initialValue={defaultOptionValue} options={paramField.values} />;
   }
 
   if (type === 'multi-option') {
-    return <MultiOption paramField={paramField} />;
+    const optionFromParams = searchParams.getAll(id);
+
+    return (
+      <MultiOption
+        paramField={paramField}
+        options={optionFromParams.length ? optionFromParams : paramField.defaultValue ?? ['']}
+      />
+    );
   }
 
   if (type === 'boolean') {
-    return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) || defaultValue} />;
+    return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) ?? defaultValue} />;
   }
 
   if (type === 'number') {
@@ -63,27 +70,28 @@ export default function ParamInput({ paramField }: ParamInputProps) {
   }
 
   if (type === 'colour') {
-    const currentvalue = `#${searchParams.get(id) ?? defaultValue}`;
-
-    return <InlineColourPicker name={id} value={currentvalue} />;
+    return <InlineColourPicker name={id} value={searchParams.get(id) ?? defaultValue} />;
   }
 
-  const defaultStringValue = searchParams.get(id) ?? defaultValue;
+  const defaultStringValue = searchParams.get(id) ?? defaultValue ?? '';
   const { placeholder } = paramField;
 
-  return <Input height='large' name={id} defaultValue={defaultStringValue} placeholder={placeholder} />;
+  return <ControlledInput id={id} initialValue={defaultStringValue} placeholder={placeholder} />;
 }
 
 interface EditFormMultiOptionProps {
   paramField: ParamField & { type: 'multi-option' };
+  options: string[];
 }
 
-function MultiOption({ paramField }: EditFormMultiOptionProps) {
-  const [searchParams] = useSearchParams();
-  const { id, values, defaultValue = [''] } = paramField;
+function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
+  const { id, values } = paramField;
+  const [paramState, setParamState] = useState<string[]>(options);
 
-  const optionFromParams = searchParams.getAll(id);
-  const [paramState, setParamState] = useState<string[]>(optionFromParams || defaultValue);
+  // synchronise options
+  useEffect(() => {
+    setParamState(options);
+  }, [options]);
 
   const toggleValue = (value: string, checked: boolean) => {
     if (checked) {
@@ -129,5 +137,52 @@ interface ControlledSwitchProps {
 }
 function ControlledSwitch({ id, initialValue }: ControlledSwitchProps) {
   const [checked, setChecked] = useState(initialValue);
+
+  // synchronise checked state
+  useEffect(() => {
+    setChecked(initialValue);
+  }, [initialValue]);
+
   return <Switch size='large' name={id} checked={checked} onCheckedChange={setChecked} />;
 }
+
+interface ControlledSelectProps {
+  id: string;
+  initialValue?: string;
+  options: SelectOption[];
+}
+function ControlledSelect({ id, initialValue, options }: ControlledSelectProps) {
+  const [selected, setSelected] = useState(initialValue);
+
+  // synchronise selected state
+  useEffect(() => {
+    setSelected(initialValue);
+  }, [initialValue]);
+
+  return (
+    <Select size='large' name={id} options={options} value={selected} onValueChange={(value) => setSelected(value)} />
+  );
+}
+
+interface ControlledInputProps<T extends number | string> extends ComponentProps<typeof Input> {
+  id: string;
+  initialValue: T;
+}
+function ControlledInput<T extends number | string>({ id, initialValue, ...inputProps }: ControlledInputProps<T>) {
+  const [value, setValue] = useState(initialValue);
+
+  // synchronise selected state
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return (
+    <Input
+      height='large'
+      name={id}
+      value={value}
+      onChange={(event) => setValue(event.target.value as T)}
+      {...inputProps}
+    />
+  );
+}

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

@@ -28,6 +28,7 @@
   bottom: 0;
 
   width: 40rem;
+  max-width: 100vw;
   height: 100vh;
 
   display: flex;

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

@@ -1,4 +1,4 @@
-import { FormEvent, memo, useReducer } from 'react';
+import { FormEvent, memo } from 'react';
 import { IoClose } from 'react-icons/io5';
 import { useSearchParams } from 'react-router';
 import { Dialog } from '@base-ui-components/react/dialog';
@@ -12,7 +12,7 @@ import Info from '../info/Info';
 import { ViewOption } from './viewParams.types';
 import { getURLSearchParamsFromObj } from './viewParams.utils';
 import { useViewParamsEditorStore } from './viewParamsEditor.store';
-import { ViewParamsShare } from './ViewParamShare';
+import { ViewParamsPresets } from './ViewParamsPresets';
 import ViewParamsSection from './ViewParamsSection';
 
 import style from './ViewParamsEditor.module.scss';
@@ -24,12 +24,9 @@ interface EditFormDrawerProps {
 
 export default memo(ViewParamsEditor);
 function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
-  // TODO: can we ensure that the options update when the user loads an alias?
   const [_, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
   const { isOpen, close } = useViewParamsEditorStore();
-  // TODO: we dont want this as a permanent option
-  const forceRender = useReducer((x) => x + 1, 0)[1];
 
   const handleClose = () => {
     close();
@@ -37,7 +34,6 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
 
   const resetParams = () => {
     setSearchParams();
-    forceRender();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -46,7 +42,6 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
     setSearchParams(newSearchParams);
-    forceRender();
   };
 
   return (
@@ -71,7 +66,7 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
             {viewSettings.overrideStyles && (
               <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
             )}
-            <ViewParamsShare target={target} />
+            <ViewParamsPresets target={target} />
             <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
               {viewOptions.map((section) => (
                 <ViewParamsSection

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

@@ -5,6 +5,9 @@
   gap: 0.25rem;
   padding: 1rem 0.5rem;
   margin-bottom: 1rem;
+  max-height: 10rem;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 
 .preset {

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

@@ -5,17 +5,19 @@ import { useViewUrlPresets } from '../../hooks-query/useUrlPresets';
 import { cx } from '../../utils/styleUtils';
 import Button from '../buttons/Button';
 
-import style from './ViewParamsShare.module.scss';
+import style from './ViewParamsPresets.module.scss';
 
 /**
  * Shows a list of presets for the current view
  */
-export function ViewParamsShare({ target }: { target: OntimeView }) {
+export function ViewParamsPresets({ target }: { target: OntimeView }) {
   const { viewPresets } = useViewUrlPresets(target);
-  const [_, setSearchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const handleRecall = (preset: URLPreset) => {
-    setSearchParams(`${preset.search}&alias=${preset.alias}`);
+    const newSearch = new URLSearchParams(preset.search);
+    newSearch.set('alias', preset.alias);
+    setSearchParams(newSearch);
   };
 
   if (viewPresets.length === 0) {
@@ -25,12 +27,12 @@ export function ViewParamsShare({ target }: { target: OntimeView }) {
   return (
     <div className={style.presetSection}>
       {viewPresets.map((preset) => {
-        const active = window.location.search.includes(`alias=${preset.alias}`);
+        const active = searchParams.get('alias') === preset.alias;
         return (
           <div key={preset.alias} className={cx([style.preset, active && style.active])}>
             <div>{preset.alias}</div>
             <Button
-              variant='subtle-white'
+              variant={active ? 'ghosted' : 'subtle-white'}
               onClick={() => handleRecall(preset)}
               disabled={active}
               className={style.presetActions}

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

@@ -44,3 +44,7 @@
   transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
   rotate: 180deg;
 }
+
+.hidden {
+  display: none;
+}

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

@@ -47,15 +47,11 @@ interface SectionContentsProps {
 }
 
 function SectionContents({ options, collapsed }: SectionContentsProps) {
-  if (collapsed) {
-    return null;
-  }
-
   return (
     <>
       {options.map((option) => {
         return (
-          <label key={option.title} className={style.label}>
+          <label key={option.title} className={cx([style.label, collapsed && style.hidden])}>
             <span className={style.title}>{option.title}</span>
             <span className={style.description}>{option.description}</span>
             <ParamInput paramField={option} />

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

@@ -16,7 +16,7 @@ export type MultiselectOption = { value: string; label: string; colour: string }
 type MultiOptionsField = {
   type: 'multi-option';
   values: MultiselectOption[];
-  defaultValue?: string;
+  defaultValue?: string[];
 };
 
 type StringField = { type: 'string'; defaultValue?: string; placeholder?: string };

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

@@ -56,13 +56,18 @@ export function makeCustomFieldSelectOptions(customFields: CustomFields, filterI
 /**
  * Creates data for a select element that displays project custom data
  */
-export function makeProjectDataOptions(projectData: ProjectData): SelectOption[] {
-  return projectData.custom.map((entry, index) => {
+export function makeProjectDataOptions(
+  projectData: ProjectData,
+  additionalOptions: SelectOption[] = [],
+): SelectOption[] {
+  const generatedOptions = projectData.custom.map((entry, index) => {
     return {
       value: `${index}-${entry.title}`,
       label: entry.title,
     };
   });
+
+  return [...additionalOptions, ...generatedOptions];
 }
 
 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };

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

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import { langEn } from 'ontime-types';
+
+import { getUserTranslation } from '../../common/api/assets';
+import { TRANSLATION } from '../../common/api/constants';
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+
+export function useCustomTranslation() {
+  const { data, status, refetch } = useQuery({
+    queryKey: TRANSLATION,
+    queryFn: getUserTranslation,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+  return { data: data ?? langEn, status, refetch };
+}

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

@@ -1,9 +1,9 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ProjectRundownsList } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_RUNDOWNS } from '../api/constants';
-import { fetchProjectRundownList } from '../api/rundown';
+import { createRundown, deleteRundown, fetchProjectRundownList, loadRundown } from '../api/rundown';
 
 /**
  * Project rundowns
@@ -13,10 +13,43 @@ export function useProjectRundowns() {
     queryKey: PROJECT_RUNDOWNS,
     queryFn: fetchProjectRundownList,
     placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
   });
   return { data: data ?? { loaded: '', rundowns: [] }, status, isError, refetch, isFetching };
 }
+
+export function useMutateProjectRundowns() {
+  const ontimeQueryClient = useQueryClient();
+
+  const { mutateAsync: create } = useMutation({
+    mutationFn: createRundown,
+    onMutate: () => {
+      ontimeQueryClient.cancelQueries({ queryKey: PROJECT_RUNDOWNS });
+    },
+    onSuccess: (response) => {
+      ontimeQueryClient.setQueryData(PROJECT_RUNDOWNS, response.data);
+    },
+  });
+
+  const { mutateAsync: remove } = useMutation({
+    mutationFn: deleteRundown,
+    onMutate: () => {
+      ontimeQueryClient.cancelQueries({ queryKey: PROJECT_RUNDOWNS });
+    },
+    onSuccess: (response) => {
+      ontimeQueryClient.setQueryData(PROJECT_RUNDOWNS, response.data);
+    },
+  });
+
+  const { mutateAsync: load } = useMutation({
+    mutationFn: loadRundown,
+    onMutate: () => {
+      ontimeQueryClient.cancelQueries({ queryKey: PROJECT_RUNDOWNS });
+    },
+    onSuccess: (response) => {
+      ontimeQueryClient.setQueryData(PROJECT_RUNDOWNS, response.data);
+    },
+  });
+
+  return { create, remove, load };
+}

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

@@ -5,6 +5,8 @@ import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { RUNDOWN } from '../api/constants';
 import { fetchCurrentRundown } from '../api/rundown';
+import { useSelectedEventId } from '../hooks/useSocket';
+import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
 
 import useProjectData from './useProjectData';
 
@@ -26,14 +28,18 @@ export default function useRundown() {
     queryKey: RUNDOWN,
     queryFn: fetchCurrentRundown,
     placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
   });
   return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
 
+export function useRundownWithMetadata() {
+  const { data, status } = useRundown();
+  const { selectedEventId } = useSelectedEventId();
+  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
+  return { data, status, rundownMetadata };
+}
+
 /**
  * Provides access to a flat rundown
  * built from the order and rundown fields
@@ -48,8 +54,8 @@ export function useFlatRundown() {
 
   // update data whenever the revision changes
   useEffect(() => {
-    if (data.revision !== -1 && data.revision !== prevRevision) {
-      const flatRundown = data.flatOrder.map((id) => data.entries[id]);
+    if (data.revision !== -1 || data.revision !== prevRevision) {
+      const flatRundown = data.order.map((id) => data.entries[id]);
       setFlatRundown(flatRundown);
       setPrevRevision(data.revision);
     }
@@ -68,11 +74,19 @@ export function useFlatRundown() {
   return { data: flatRundown, rundownId: data.id, status };
 }
 
+export function useFlatRundownWithMetadata() {
+  const { data, status } = useRundown();
+  const { selectedEventId } = useSelectedEventId();
+
+  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
+  return { data: rundownWithMetadata, status };
+}
+
 /**
  * Provides access to a partial rundown based on a filter callback
  */
-export function usePartialRundown(cb: (event: OntimeEntry) => boolean) {
-  const { data, status } = useFlatRundown();
+export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
+  const { data, status } = useFlatRundownWithMetadata();
   const filteredData = useMemo(() => {
     return data.filter(cb);
   }, [data, cb]);

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

@@ -1,7 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { unobfuscate } from 'ontime-utils';
 
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_SETTINGS } from '../api/constants';
 import { getSettings } from '../api/settings';
 import { ontimePlaceholderSettings } from '../models/OntimeSettings';
@@ -11,10 +10,6 @@ export default function useSettings() {
     queryKey: APP_SETTINGS,
     queryFn: getSettings,
     placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
-    refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
     select: (data) => {
       const unobfuscated = { ...data };
       if (data.editorKey) {

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

@@ -30,7 +30,6 @@ import {
   requestEventSwap,
   requestGroupEntries,
   requestUngroup,
-  SwapEntry,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
@@ -59,15 +58,25 @@ export const useEntryActions = () => {
     defaultEndAction,
   } = useEditorSettings();
 
+  /**
+   * Returns the currently loaded rundown
+   */
+  const getCurrentRundownData = useCallback(() => {
+    return queryClient.getQueryData<Rundown>(RUNDOWN);
+  }, [queryClient]);
+
+  /**
+   * Looks for an entry with a given ID in the currently loaded rundown
+   */
   const getEntryById = useCallback(
-    (eventId: string): OntimeEntry | undefined => {
-      const cachedRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
+    (eventId: EntryId): OntimeEntry | undefined => {
+      const cachedRundown = getCurrentRundownData();
       if (!cachedRundown?.entries) {
         return;
       }
       return cachedRundown.entries[eventId];
     },
-    [queryClient],
+    [getCurrentRundownData],
   );
 
   /**
@@ -75,8 +84,8 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: addEntryMutation } = useMutation({
-    // TODO(v4): optimistic create entry
-    mutationFn: postAddEntry,
+    mutationFn: ([rundownId, entry]: Parameters<typeof postAddEntry>) => postAddEntry(rundownId, entry),
+    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
     onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
   });
 
@@ -85,13 +94,19 @@ export const useEntryActions = () => {
    */
   const addEntry = useCallback(
     async (entry: Partial<OntimeEntry>, options?: EventOptions) => {
+      const rundownData = getCurrentRundownData();
+      const rundownId = rundownData?.id;
+
+      if (!rundownId) {
+        throw new Error('Rundown not initialised');
+      }
+
       const newEntry: TransientEventPayload = { ...entry, id: generateId() };
 
       // ************* CHECK OPTIONS specific to events
       if (isOntimeEvent(newEntry)) {
         if (options?.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[options?.lastEventId];
           if (isOntimeEvent(previousEvent)) {
             newEntry.timeStart = previousEvent.timeEnd;
@@ -135,21 +150,21 @@ export const useEntryActions = () => {
       }
 
       try {
-        await addEntryMutation(newEntry);
+        await addEntryMutation([rundownId, newEntry]);
       } catch (error) {
         logAxiosError('Failed adding event', error);
       }
     },
     [
-      addEntryMutation,
-      defaultDangerTime,
-      defaultDuration,
-      defaultEndAction,
-      defaultTimerType,
-      defaultTimeStrategy,
-      defaultWarnTime,
+      getCurrentRundownData,
       linkPrevious,
-      queryClient,
+      defaultDuration,
+      defaultDangerTime,
+      defaultWarnTime,
+      defaultTimerType,
+      defaultEndAction,
+      defaultTimeStrategy,
+      addEntryMutation,
     ],
   );
 
@@ -158,22 +173,28 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: cloneEntryMutation } = useMutation({
-    mutationFn: postCloneEntry,
+    mutationFn: ([rundownId, entryId]: Parameters<typeof postCloneEntry>) => postCloneEntry(rundownId, entryId),
+    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
     onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
   });
 
   /**
-   * Clone a selection
+   * Clone an entry
    */
   const clone = useCallback(
     async (entryId: EntryId) => {
       try {
-        await cloneEntryMutation(entryId);
+        const rundownId = getCurrentRundownData()?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
+        await cloneEntryMutation([rundownId, entryId]);
       } catch (error) {
         logAxiosError('Error cloning entry', error);
       }
     },
-    [cloneEntryMutation],
+    [cloneEntryMutation, getCurrentRundownData],
   );
 
   /**
@@ -181,9 +202,9 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: updateEntryMutation } = useMutation({
-    mutationFn: putEditEntry,
+    mutationFn: ([rundownId, newEvent]: Parameters<typeof putEditEntry>) => putEditEntry(rundownId, newEvent),
     // we optimistically update here
-    onMutate: async (newEvent) => {
+    onMutate: async ([_rundownId, newEvent]) => {
       // cancel ongoing queries
       await queryClient.cancelQueries({ queryKey: RUNDOWN });
 
@@ -211,7 +232,9 @@ export const useEntryActions = () => {
     },
     // Mutation fails, rollback undoes optimist update
     onError: (_error, _newEvent, context) => {
-      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      if (context?.previousData) {
+        queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
+      }
     },
     // Mutation finished, failed or successful
     // Fetch anyway, just to be sure
@@ -226,19 +249,17 @@ export const useEntryActions = () => {
   const updateEntry = useCallback(
     async (entry: Partial<OntimeEntry>) => {
       try {
-        await updateEntryMutation(entry);
+        const rundownId = getCurrentRundownData()?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
+        await updateEntryMutation([rundownId, entry]);
       } 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],
+    [getCurrentRundownData, updateEntryMutation],
   );
 
   /**
@@ -250,6 +271,11 @@ export const useEntryActions = () => {
    */
   const updateTimer = useCallback(
     async (eventId: EntryId, field: TimeField, value: string, lockOnUpdate?: boolean) => {
+      const rundownId = getCurrentRundownData()?.id;
+      if (!rundownId) {
+        throw new Error('Rundown not initialised');
+      }
+
       // an empty value with no lock has no domain validity
       if (!lockOnUpdate && value === '') {
         return;
@@ -279,7 +305,7 @@ export const useEntryActions = () => {
       }
 
       try {
-        await updateEntryMutation(newEvent);
+        await updateEntryMutation([rundownId, newEvent]);
       } catch (error) {
         logAxiosError('Error updating event', error);
       }
@@ -331,7 +357,7 @@ export const useEntryActions = () => {
         return previousEnd;
       }
     },
-    [updateEntryMutation, queryClient],
+    [getCurrentRundownData, updateEntryMutation, queryClient],
   );
 
   /**
@@ -339,8 +365,8 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: batchUpdateEventsMutation } = useMutation({
-    mutationFn: putBatchEditEvents,
-    onMutate: async ({ ids, data }) => {
+    mutationFn: ([rundownId, data]: Parameters<typeof putBatchEditEvents>) => putBatchEditEvents(rundownId, data),
+    onMutate: async ([_rundownId, data]) => {
       // cancel ongoing queries
       await queryClient.cancelQueries({ queryKey: RUNDOWN });
 
@@ -348,7 +374,7 @@ export const useEntryActions = () => {
       const previousRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
 
       if (previousRundown) {
-        const eventIds = new Set(ids);
+        const eventIds = new Set(data.ids);
         const newRundown = { ...previousRundown.entries };
 
         eventIds.forEach((eventId) => {
@@ -395,14 +421,19 @@ export const useEntryActions = () => {
   });
 
   const batchUpdateEvents = useCallback(
-    async (data: Partial<OntimeEvent>, eventIds: string[]) => {
+    async (data: Partial<OntimeEvent>, eventIds: EntryId[]) => {
       try {
-        await batchUpdateEventsMutation({ ids: eventIds, data });
+        const rundownId = getCurrentRundownData()?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
+        await batchUpdateEventsMutation([rundownId, { data, ids: eventIds }]);
       } catch (error) {
         logAxiosError('Error updating events', error);
       }
     },
-    [batchUpdateEventsMutation],
+    [batchUpdateEventsMutation, getCurrentRundownData],
   );
 
   /**
@@ -410,9 +441,9 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: deleteEntryMutation } = useMutation({
-    mutationFn: deleteEntries,
+    mutationFn: ([rundownId, entryIds]: Parameters<typeof deleteEntries>) => deleteEntries(rundownId, entryIds),
     // we optimistically update here
-    onMutate: async (entryIds: EntryId[]) => {
+    onMutate: async ([_rundownId, entryIds]) => {
       // cancel ongoing queries
       await queryClient.cancelQueries({ queryKey: RUNDOWN });
 
@@ -454,12 +485,17 @@ export const useEntryActions = () => {
   const deleteEntry = useCallback(
     async (entryIds: EntryId[]) => {
       try {
-        await deleteEntryMutation(entryIds);
+        const rundownId = getCurrentRundownData()?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
+        await deleteEntryMutation([rundownId, entryIds]);
       } catch (error) {
         logAxiosError('Error deleting event', error);
       }
     },
-    [deleteEntryMutation],
+    [deleteEntryMutation, getCurrentRundownData],
   );
 
   /**
@@ -467,7 +503,7 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: deleteAllEntriesMutation } = useMutation({
-    mutationFn: requestDeleteAll,
+    mutationFn: ([rundownId]: Parameters<typeof requestDeleteAll>) => requestDeleteAll(rundownId),
     // we optimistically update here
     onMutate: async () => {
       // cancel ongoing queries
@@ -506,18 +542,24 @@ export const useEntryActions = () => {
    */
   const deleteAllEntries = useCallback(async () => {
     try {
-      await deleteAllEntriesMutation();
+      const rundownId = getCurrentRundownData()?.id;
+      if (!rundownId) {
+        throw new Error('Rundown not initialised');
+      }
+
+      await deleteAllEntriesMutation([rundownId]);
     } catch (error) {
       logAxiosError('Error deleting events', error);
     }
-  }, [deleteAllEntriesMutation]);
+  }, [deleteAllEntriesMutation, getCurrentRundownData]);
 
   /**
    * Calls mutation to apply a delay
    * @private
    */
   const { mutateAsync: applyDelayMutation } = useMutation({
-    mutationFn: requestApplyDelay,
+    mutationFn: ([rundownId, delayId]: Parameters<typeof requestApplyDelay>) => requestApplyDelay(rundownId, delayId),
+    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
     onSuccess: (response) => {
       if (!response.data) return;
 
@@ -543,12 +585,17 @@ export const useEntryActions = () => {
   const applyDelay = useCallback(
     async (delayEventId: EntryId) => {
       try {
-        await applyDelayMutation(delayEventId);
+        const rundownId = getCurrentRundownData()?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
+        await applyDelayMutation([rundownId, delayEventId]);
       } catch (error) {
         logAxiosError('Error applying delay', error);
       }
     },
-    [applyDelayMutation],
+    [applyDelayMutation, getCurrentRundownData],
   );
 
   /**
@@ -556,7 +603,8 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: ungroupMutation } = useMutation({
-    mutationFn: requestUngroup,
+    mutationFn: ([rundownId, groupId]: Parameters<typeof requestUngroup>) => requestUngroup(rundownId, groupId),
+    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
     onSuccess: (response) => {
       if (!response.data) return;
 
@@ -579,12 +627,17 @@ export const useEntryActions = () => {
   const ungroup = useCallback(
     async (groupId: EntryId) => {
       try {
-        await ungroupMutation(groupId);
+        const rundownId = getCurrentRundownData()?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
+        await ungroupMutation([rundownId, groupId]);
       } catch (error) {
         logAxiosError('Error dissolving group', error);
       }
     },
-    [ungroupMutation],
+    [getCurrentRundownData, ungroupMutation],
   );
 
   /**
@@ -592,7 +645,9 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: groupEntriesMutation } = useMutation({
-    mutationFn: requestGroupEntries,
+    mutationFn: ([rundownId, entryIds]: Parameters<typeof requestGroupEntries>) =>
+      requestGroupEntries(rundownId, entryIds),
+    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
     onSuccess: (response) => {
       if (!response.data) return;
 
@@ -617,19 +672,24 @@ export const useEntryActions = () => {
       if (entryIds.length === 0) return;
 
       try {
+        const rundownData = getCurrentRundownData();
+        const rundownId = rundownData?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
         if (entryIds.length === 1) {
-          await groupEntriesMutation(entryIds);
+          await groupEntriesMutation([rundownId, entryIds]);
         } else {
-          const rundown = queryClient.getQueryData<Rundown>(RUNDOWN);
-          if (!rundown) return;
-          const orderedIds = orderEntries(entryIds, rundown.flatOrder);
-          await groupEntriesMutation(orderedIds);
+          // the user selection may be out of order
+          const orderedIds = orderEntries(entryIds, rundownData.flatOrder);
+          await groupEntriesMutation([rundownId, orderedIds]);
         }
       } catch (error) {
         logAxiosError('Error grouping entries', error);
       }
     },
-    [groupEntriesMutation, queryClient],
+    [getCurrentRundownData, groupEntriesMutation],
   );
 
   /**
@@ -637,9 +697,8 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: reorderEntryMutation } = useMutation({
-    mutationFn: patchReorderEntry,
-    // Mutation finished, failed or successful
-    // Fetch anyway, just to be sure
+    mutationFn: ([rundownId, data]: Parameters<typeof patchReorderEntry>) => patchReorderEntry(rundownId, data),
+    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: RUNDOWN });
     },
@@ -650,34 +709,36 @@ export const useEntryActions = () => {
    */
   const move = useCallback(
     async (entryId: EntryId, direction: 'up' | 'down') => {
-      const rundown = queryClient.getQueryData<Rundown>(RUNDOWN);
-      if (!rundown) {
-        return;
-      }
-
-      const { destinationId, order } =
-        direction === 'up'
-          ? moveUp(entryId, rundown.flatOrder, rundown.entries)
-          : moveDown(entryId, rundown.flatOrder, rundown.entries);
-
-      if (!destinationId) {
-        return; // noop
-      }
-
       try {
+        const rundownData = getCurrentRundownData();
+        const rundownId = rundownData?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
+        const { destinationId, order } =
+          direction === 'up'
+            ? moveUp(entryId, rundownData.flatOrder, rundownData.entries)
+            : moveDown(entryId, rundownData.flatOrder, rundownData.entries);
+
+        if (!destinationId) {
+          return; // noop
+        }
+
         const reorderObject: ReorderEntry = {
           entryId,
           destinationId,
           order,
         };
-        await reorderEntryMutation(reorderObject);
+        await reorderEntryMutation([rundownId, reorderObject]);
+        // the rundown needs to know whether we moved into a group
+        return rundownData.entries[destinationId]?.type === SupportedEntry.Group ? destinationId : undefined;
       } catch (error) {
         logAxiosError('Error re-ordering event', error);
       }
-      // the rundown needs to know whether we moved into a group
-      return rundown.entries[destinationId]?.type === SupportedEntry.Group ? destinationId : undefined;
+      return undefined;
     },
-    [queryClient, reorderEntryMutation],
+    [getCurrentRundownData, reorderEntryMutation],
   );
   /**
    * Reorders a given entry
@@ -685,18 +746,25 @@ export const useEntryActions = () => {
   const reorderEntry = useCallback(
     async (entryId: EntryId, destinationId: EntryId, order: 'before' | 'after' | 'insert') => {
       try {
-        const reorderObject: ReorderEntry = {
-          entryId,
-          destinationId,
-          order,
-        };
-        await reorderEntryMutation(reorderObject);
+        const rundownId = getCurrentRundownData()?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
+        await reorderEntryMutation([
+          rundownId,
+          {
+            entryId,
+            destinationId,
+            order,
+          },
+        ]);
       } catch (error) {
         logAxiosError('Error re-ordering event', error);
         throw error; // rethrow to handle in the component
       }
     },
-    [reorderEntryMutation],
+    [getCurrentRundownData, reorderEntryMutation],
   );
 
   /**
@@ -704,9 +772,9 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: swapEventsMutation } = useMutation({
-    mutationFn: requestEventSwap,
+    mutationFn: ([rundownId, from, to]: Parameters<typeof requestEventSwap>) => requestEventSwap(rundownId, from, to),
     // we optimistically update here
-    onMutate: async ({ from, to }) => {
+    onMutate: async ([_rundownId, from, to]) => {
       // cancel ongoing queries
       await queryClient.cancelQueries({ queryKey: RUNDOWN });
 
@@ -755,14 +823,19 @@ export const useEntryActions = () => {
    * Swaps the schedule of two events
    */
   const swapEvents = useCallback(
-    async ({ from, to }: SwapEntry) => {
+    async (from: EntryId, to: EntryId) => {
       try {
-        await swapEventsMutation({ from, to });
+        const rundownId = getCurrentRundownData()?.id;
+        if (!rundownId) {
+          throw new Error('Rundown not initialised');
+        }
+
+        await swapEventsMutation([rundownId, from, to]);
       } catch (error) {
         logAxiosError('Error re-ordering event', error);
       }
     },
-    [swapEventsMutation],
+    [getCurrentRundownData, swapEventsMutation],
   );
 
   return {
@@ -780,7 +853,6 @@ export const useEntryActions = () => {
     swapEvents,
     updateEntry,
     updateTimer,
-    updateCustomField,
   };
 };
 

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

@@ -23,6 +23,9 @@ export const useFadeOutOnInactivity = (initialState = false) => {
 
     const throttledShowMenu = throttle(setShowMenuTrue, 1000);
 
+    // we call the function on mount, to make sure the menu is hidden
+    throttledShowMenu();
+
     document.addEventListener('mousemove', throttledShowMenu);
     document.addEventListener('keydown', throttledShowMenu);
 

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

@@ -1,6 +1,5 @@
-import { RefObject, useCallback, useEffect, useRef } from 'react';
-
-import { useSelectedEventId } from './useSocket';
+import { RefObject, useCallback, useEffect } from 'react';
+import { MaybeString } from 'ontime-types';
 
 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
   componentRef: RefObject<ComponentRef>,
@@ -18,37 +17,26 @@ function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends H
   scrollRef.current.scrollTo({ top, behavior: 'smooth' });
 }
 
-function snapToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: RefObject<ComponentRef>,
-  scrollRef: RefObject<ScrollRef>,
-  topOffset: number,
-) {
-  if (!componentRef.current || !scrollRef.current) {
-    return;
-  }
-
-  const componentRect = componentRef.current.getBoundingClientRect();
-  const scrollRect = scrollRef.current.getBoundingClientRect();
-  const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - topOffset;
-
-  // maintain current x scroll position
-  scrollRef.current.scrollTo(scrollRef.current.scrollLeft, top);
-}
-
 interface UseFollowComponentProps {
   followRef: RefObject<HTMLElement | null>;
   scrollRef: RefObject<HTMLElement | null>;
   doFollow: boolean;
   topOffset?: number;
   setScrollFlag?: (newValue: boolean) => void;
+  followTrigger?: MaybeString; // this would be an entry id or null
 }
 
-export default function useFollowComponent(props: UseFollowComponentProps) {
-  const { followRef, scrollRef, doFollow, topOffset = 100, setScrollFlag } = props;
-
-  // when cursor moves, view should follow
+export default function useFollowComponent({
+  followRef,
+  scrollRef,
+  doFollow,
+  topOffset = 100,
+  setScrollFlag,
+  followTrigger,
+}: UseFollowComponentProps) {
+  // when trigger moves, view should follow
   useEffect(() => {
-    if (!doFollow) {
+    if (!doFollow || !followTrigger) {
       return;
     }
 
@@ -60,16 +48,14 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
         setScrollFlag?.(false);
       });
     }
-
-    // eslint-disable-next-line -- the prompt seems incorrect
-  }, [followRef?.current, scrollRef?.current]);
+  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
 
   const scrollToRefComponent = useCallback(
     (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
-      if (componentRef.current && containerRef.current) {
+      if (componentRef && containerRef) {
         // @ts-expect-error -- we know this are not null
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        scrollToComponent(componentRef!, scrollRef!, offset);
+        scrollToComponent(componentRef!, containerRef!, offset);
       }
     },
     [followRef, scrollRef, topOffset],
@@ -77,32 +63,3 @@ export default function useFollowComponent(props: UseFollowComponentProps) {
 
   return scrollToRefComponent;
 }
-
-export function useFollowSelected(doFollow: boolean, topOffset = 100) {
-  const selectedEvenId = useSelectedEventId();
-
-  const selectedRef = useRef<HTMLTableRowElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!doFollow) {
-      return;
-    }
-
-    if (selectedEvenId && selectedRef.current && scrollRef.current) {
-      // Use requestAnimationFrame to ensure the component is fully loaded
-      window.requestAnimationFrame(() => {
-        snapToComponent(
-          { current: selectedRef.current } as RefObject<HTMLElement>,
-          { current: scrollRef.current } as RefObject<HTMLElement>,
-          topOffset,
-        );
-      });
-    }
-  }, [doFollow, selectedEvenId, topOffset]);
-
-  return {
-    selectedRef,
-    scrollRef,
-  };
-}

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

@@ -10,7 +10,9 @@ const createSelector =
 
 export const setClientRemote = {
   setIdentify: (payload: { target: string; identify: boolean }) => sendSocket('client', payload),
-  setRedirect: (payload: { target: string; redirect: string }) => sendSocket('client', payload),
+  setRedirect: (payload: { target: string; redirect: string }) => {
+    sendSocket('client', payload);
+  },
   setClientName: (payload: { target: string; rename: string }) => sendSocket('client', payload),
 };
 
@@ -162,46 +164,15 @@ export const useProgressData = createSelector((state: RuntimeStore) => ({
   timeDanger: state.eventNow?.timeDanger ?? null,
 }));
 
-export const useRundownOverview = createSelector((state: RuntimeStore) => ({
-  plannedStart: state.rundown.plannedStart,
-  actualStart: state.rundown.actualStart,
-  plannedEnd: state.rundown.plannedEnd,
-  expectedEnd: state.offset.expectedRundownEnd,
-}));
-
-export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) => ({
-  playback: state.timer.playback,
-  clock: state.clock,
-
-  numEvents: state.rundown.numEvents,
-  selectedEventIndex: state.rundown.selectedEventIndex,
-  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
-
-  groupExpectedEnd: state.offset.expectedGroupEnd,
-}));
-
-export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
-  offset: state.offset.absolute,
-}));
-
 export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
   offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
   mode: state.offset.mode,
-  currentDay: state.eventNow?.dayOffset ?? 0,
+  currentDay: state.rundown.currentDay ?? 0,
   actualStart: state.rundown.actualStart,
   plannedStart: state.rundown.plannedStart,
   clock: state.clock,
 }));
 
-export const useCurrentDay = createSelector((state: RuntimeStore) => ({
-  currentDay: state.eventNow?.dayOffset ?? 0,
-}));
-
-export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({
-  offset: state.offset.absolute,
-}));
-
 export const usePing = createSelector((state: RuntimeStore) => ({
   ping: state.ping,
 }));
@@ -225,6 +196,45 @@ export const usePlayback = () => {
   return useRuntimeStore(featureSelector);
 };
 
+/* ======================= Overview data subscriptions ======================= */
+
+export const useStartTimesOverview = createSelector((state: RuntimeStore) => ({
+  plannedStart: state.rundown.plannedStart,
+  actualStart: state.rundown.actualStart,
+  plannedEnd: state.rundown.plannedEnd,
+  expectedEnd: state.offset.expectedRundownEnd,
+}));
+
+export const useProgressOverview = createSelector((state: RuntimeStore) => ({
+  numEvents: state.rundown.numEvents,
+  selectedEventIndex: state.rundown.selectedEventIndex,
+}));
+
+export const useOffsetOverview = createSelector((state: RuntimeStore) => ({
+  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
+  playback: state.timer.playback,
+}));
+
+export const useGroupTimerOverView = createSelector((state: RuntimeStore) => ({
+  clock: state.clock,
+  mode: state.offset.mode,
+  groupExpectedEnd: state.offset.expectedGroupEnd,
+  // we can force these numbers to 0 fo this use case to avoid null checks
+  actualGroupStart: state.rundown.actualGroupStart ?? 0,
+  currentDay: state.eventNow?.dayOffset ?? 0,
+  playback: state.timer.playback,
+}));
+
+export const useFlagTimerOverView = createSelector((state: RuntimeStore) => ({
+  clock: state.clock,
+  mode: state.offset.mode,
+  // we can force these numbers to 0 fo this use case to avoid null checks
+  actualStart: state.rundown.actualStart ?? 0,
+  plannedStart: state.rundown.plannedStart ?? 0,
+  currentDay: state.eventNow?.dayOffset ?? 0,
+  playback: state.timer.playback,
+}));
+
 /* ======================= View specific subscriptions ======================= */
 
 export const useTimerSocket = createSelector((state: RuntimeStore) => ({
@@ -266,11 +276,7 @@ export const useStudioTimersSocket = createSelector((state: RuntimeStore) => ({
   eventNow: state.eventNow,
   message: state.message,
   time: state.timer,
-  offset: state.offset,
+  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
   rundown: state.rundown,
-}));
-
-export const useTimelineSocket = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
-  offset: state.offset.absolute,
+  expectedRundownEnd: state.offset.expectedRundownEnd,
 }));

apps/client/src/common/models/Util.type.ts

@@ -1 +0,0 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg';

apps/client/src/common/models/View.types.ts

@@ -1,19 +0,0 @@
-export type OverridableOptions = {
-  keyColour?: string;
-  textColour?: string;
-  textBackground?: string;
-  font?: string;
-  size?: number;
-  justifyContent?: 'start' | 'center' | 'end';
-  alignItems?: 'start' | 'center' | 'end';
-  left?: string;
-  top?: string;
-  hideNav?: boolean;
-  hideOvertime?: boolean;
-  hideMessagesOverlay?: boolean;
-  hideEndMessage?: boolean;
-  language?: string;
-  showProgressBar?: boolean;
-  hideTimerSeconds?: boolean;
-  removeLeadingZeros?: boolean;
-};

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

@@ -1,89 +0,0 @@
-import { create } from 'zustand';
-
-type Target = 'cuesheet' | 'timer' | 'clock' | 'countdown' | 'backstage' | 'studio';
-
-interface SelectionState {
-  [key: string]: boolean;
-}
-
-interface ColumnPermissions {
-  read: string[];
-  write: string[];
-}
-
-interface CuesheetLinksState {
-  target: Target | null;
-  readSelected: SelectionState;
-  writeSelected: SelectionState;
-  setTarget: (target: Target | null) => void;
-  setField: (field: 'read' | 'write', key: string, value: boolean) => void;
-  toggleField: (field: 'read' | 'write', key: string) => void;
-  selectAll: (field: 'read' | 'write', keys: string[]) => void;
-  clearAll: (field: 'read' | 'write', keys: string[]) => void;
-  // Returns arrays of column keys that have read/write permissions if target is 'cuesheet'
-  getSelections: () => ColumnPermissions | null;
-}
-
-export const useCuesheetLinksStore = create<CuesheetLinksState>((set, get) => ({
-  target: null,
-  readSelected: {},
-  writeSelected: {},
-  setTarget: (target) => set({ target }),
-  setField: (field, key, value) =>
-    set((state) => ({
-      ...(field === 'read'
-        ? { readSelected: { ...state.readSelected, [key]: value } }
-        : { writeSelected: { ...state.writeSelected, [key]: value } }),
-    })),
-  toggleField: (field, key) =>
-    set((state) => ({
-      ...(field === 'read'
-        ? { readSelected: { ...state.readSelected, [key]: !state.readSelected[key] } }
-        : { writeSelected: { ...state.writeSelected, [key]: !state.writeSelected[key] } }),
-    })),
-  selectAll: (field, keys) =>
-    set((_state) => ({
-      ...(field === 'read'
-        ? {
-            readSelected: keys.reduce((acc, key) => {
-              acc[key] = true;
-              return acc;
-            }, {} as SelectionState),
-          }
-        : {
-            writeSelected: keys.reduce((acc, key) => {
-              acc[key] = true;
-              return acc;
-            }, {} as SelectionState),
-          }),
-    })),
-  clearAll: (field, keys) =>
-    set((_state) => ({
-      ...(field === 'read'
-        ? {
-            readSelected: keys.reduce((acc, key) => {
-              acc[key] = false;
-              return acc;
-            }, {} as SelectionState),
-          }
-        : {
-            writeSelected: keys.reduce((acc, key) => {
-              acc[key] = false;
-              return acc;
-            }, {} as SelectionState),
-          }),
-    })),
-  getSelections: () => {
-    const state = get();
-    if (state.target !== 'cuesheet') return null;
-
-    return {
-      read: Object.entries(state.readSelected)
-        .filter(([_, selected]) => selected)
-        .map(([key]) => key),
-      write: Object.entries(state.writeSelected)
-        .filter(([_, selected]) => selected)
-        .map(([key]) => key),
-    };
-  },
-}));

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

@@ -1,6 +1,4 @@
-import { OntimeEntry, ProjectRundowns, Rundown } from 'ontime-types';
-
-import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../csv';
+import { makeCSVFromArrayOfArrays } from '../csv';
 
 describe('makeCSVFromArrayOfArrays()', () => {
   it('joins an array of arrays with commas and newlines', () => {
@@ -13,34 +11,3 @@ after newline,after comma
 `);
   });
 });
-
-describe('aggregateRundowns()', () => {
-  it('flattens an object of rundowns into a single array', () => {
-    const rundowns = {
-      first: {
-        id: '',
-        title: '',
-        revision: 0,
-        order: ['1', '2'],
-        flatOrder: ['1', '2'],
-        entries: {
-          '1': { id: '1' } as OntimeEntry,
-          '2': { id: '2' } as OntimeEntry,
-        },
-      },
-      second: {
-        id: '',
-        title: '',
-        revision: 0,
-        order: ['3', '4'],
-        flatOrder: ['3', '4'],
-        entries: {
-          '3': { id: '3' } as OntimeEntry,
-          '4': { id: '4' } as OntimeEntry,
-        },
-      } as Rundown,
-    } as ProjectRundowns;
-
-    expect(aggregateRundowns(rundowns)).toStrictEqual([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]);
-  });
-});

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

@@ -0,0 +1,302 @@
+import { OntimeDelay, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';
+
+import { initRundownMetadata } from '../rundownMetadata';
+
+describe('initRundownMetadata()', () => {
+  it('processes nested rundown data', () => {
+    const selectedEventId = '12';
+    const demoEvents = {
+      '1': {
+        id: '1',
+        type: SupportedEntry.Event,
+        parent: null,
+        timeStart: 0,
+        timeEnd: 1,
+        duration: 1,
+        dayOffset: 0,
+        gap: 0,
+        skip: false,
+        linkStart: false,
+      } as OntimeEvent,
+      group: {
+        id: 'group',
+        type: SupportedEntry.Group,
+        entries: ['11', 'delay', '12', '13'],
+        colour: 'red',
+      } as OntimeGroup,
+      '11': {
+        id: '11',
+        type: SupportedEntry.Event,
+        parent: 'group',
+        timeStart: 10,
+        timeEnd: 11,
+        duration: 1,
+        dayOffset: 0,
+        gap: 10,
+        skip: false,
+        linkStart: false,
+      } as OntimeEvent,
+      delay: {
+        id: 'delay',
+        type: SupportedEntry.Delay,
+        parent: 'group',
+        duration: 0,
+      } as OntimeDelay,
+      '12': {
+        id: '12',
+        type: SupportedEntry.Event,
+        parent: 'group',
+        timeStart: 11,
+        timeEnd: 12,
+        duration: 1,
+        dayOffset: 0,
+        gap: 0,
+        skip: false,
+        linkStart: true,
+      } as OntimeEvent,
+      '13': {
+        id: '13',
+        type: SupportedEntry.Event,
+        parent: 'group',
+        timeStart: 12,
+        timeEnd: 13,
+        duration: 1,
+        dayOffset: 0,
+        gap: 0,
+        skip: false,
+        linkStart: true,
+      } as OntimeEvent,
+      '2': {
+        id: '2',
+        type: SupportedEntry.Event,
+        parent: null,
+        timeStart: 20,
+        timeEnd: 21,
+        duration: 1,
+        dayOffset: 0,
+        gap: 7,
+        skip: false,
+        linkStart: false,
+      } as OntimeEvent,
+    };
+
+    const { metadata, process } = initRundownMetadata(selectedEventId);
+
+    expect(metadata).toStrictEqual({
+      previousEvent: null,
+      latestEvent: null,
+      previousEntryId: null,
+      thisId: null,
+      eventIndex: 0,
+      isPast: true,
+      isNextDay: false,
+      totalGap: 0,
+      isLinkedToLoaded: false,
+      isLoaded: false,
+      groupId: null,
+      groupColour: undefined,
+      groupEntries: undefined,
+      isFirstAfterGroup: false,
+    });
+
+    expect(process(demoEvents['1'])).toStrictEqual({
+      previousEvent: null,
+      latestEvent: demoEvents['1'],
+      previousEntryId: null,
+      thisId: demoEvents['1'].id,
+      eventIndex: 1, // UI indexes are 1 based
+      isPast: true,
+      isNextDay: false,
+      totalGap: 0,
+      isLinkedToLoaded: false,
+      isLoaded: false,
+      groupId: null,
+      groupColour: undefined,
+      groupEntries: undefined,
+      isFirstAfterGroup: false,
+    });
+
+    expect(process(demoEvents['group'])).toMatchObject({
+      previousEvent: demoEvents['1'],
+      latestEvent: demoEvents['1'],
+      previousEntryId: demoEvents['1'].id,
+      thisId: demoEvents['group'].id,
+      eventIndex: 1,
+      isPast: true,
+      isNextDay: false,
+      totalGap: 0,
+      isLinkedToLoaded: false,
+      isLoaded: false,
+      groupId: 'group',
+      groupColour: 'red',
+      isFirstAfterGroup: false,
+    });
+
+    expect(process(demoEvents['11'])).toMatchObject({
+      previousEvent: demoEvents['1'],
+      latestEvent: demoEvents['11'],
+      previousEntryId: demoEvents['group'].id,
+      thisId: demoEvents['11'].id,
+      eventIndex: 2,
+      isPast: true,
+      isNextDay: false,
+      totalGap: 10,
+      isLinkedToLoaded: false,
+      isLoaded: false,
+      groupId: 'group',
+      groupColour: 'red',
+      isFirstAfterGroup: false,
+    });
+
+    expect(process(demoEvents['delay'])).toMatchObject({
+      previousEvent: demoEvents['11'],
+      latestEvent: demoEvents['11'],
+      previousEntryId: demoEvents['11'].id,
+      thisId: demoEvents['delay'].id,
+      eventIndex: 2,
+      isPast: true,
+      isNextDay: false,
+      totalGap: 10,
+      isLinkedToLoaded: false,
+      isLoaded: false,
+      groupId: 'group',
+      groupColour: 'red',
+      isFirstAfterGroup: false,
+    });
+
+    expect(process(demoEvents['12'])).toMatchObject({
+      previousEvent: demoEvents['11'],
+      latestEvent: demoEvents['12'],
+      previousEntryId: demoEvents['delay'].id,
+      thisId: demoEvents['12'].id,
+      eventIndex: 3,
+      isPast: false,
+      isNextDay: false,
+      totalGap: 10,
+      isLinkedToLoaded: true,
+      isLoaded: true,
+      groupId: 'group',
+      groupColour: 'red',
+      isFirstAfterGroup: false,
+    });
+
+    expect(process(demoEvents['13'])).toMatchObject({
+      previousEvent: demoEvents['12'],
+      latestEvent: demoEvents['13'],
+      previousEntryId: demoEvents['12'].id,
+      thisId: demoEvents['13'].id,
+      eventIndex: 4,
+      isPast: false,
+      isNextDay: false,
+      totalGap: 10,
+      isLinkedToLoaded: true,
+      isLoaded: false,
+      groupId: 'group',
+      groupColour: 'red',
+      isFirstAfterGroup: false,
+    });
+
+    expect(process(demoEvents['2'])).toMatchObject({
+      previousEvent: demoEvents['13'],
+      latestEvent: demoEvents['2'],
+      previousEntryId: demoEvents['13'].id,
+      thisId: demoEvents['2'].id,
+      eventIndex: 5,
+      isPast: false,
+      isNextDay: false,
+      totalGap: 17,
+      isLinkedToLoaded: false,
+      isLoaded: false,
+      groupId: null,
+      groupColour: undefined,
+      isFirstAfterGroup: true,
+    });
+  });
+
+  it('populates previousEntries in groups', () => {
+    const rundownStartsWithGroup = {
+      group: {
+        id: 'group',
+        type: SupportedEntry.Group,
+        colour: 'red',
+        entries: ['1', '2'],
+      } as OntimeGroup,
+      '1': {
+        id: '1',
+        type: SupportedEntry.Event,
+        parent: 'group',
+        timeStart: 1,
+        timeEnd: 2,
+        duration: 1,
+        dayOffset: 0,
+        gap: 0,
+        skip: false,
+        linkStart: false,
+      } as OntimeEvent,
+      '2': {
+        id: '2',
+        type: SupportedEntry.Event,
+        parent: 'group',
+        timeStart: 2,
+        timeEnd: 3,
+        duration: 1,
+        dayOffset: 0,
+        gap: 0,
+        skip: false,
+        linkStart: false,
+      } as OntimeEvent,
+    };
+    const { process } = initRundownMetadata(null);
+
+    expect(process(rundownStartsWithGroup.group)).toStrictEqual({
+      previousEvent: null,
+      latestEvent: null,
+      previousEntryId: null,
+      thisId: rundownStartsWithGroup.group.id,
+      eventIndex: 0,
+      isPast: false,
+      isNextDay: false,
+      totalGap: 0,
+      isLinkedToLoaded: false,
+      isLoaded: false,
+      groupId: rundownStartsWithGroup.group.id,
+      groupColour: 'red',
+      groupEntries: 2,
+      isFirstAfterGroup: false,
+    });
+
+    expect(process(rundownStartsWithGroup['1'])).toStrictEqual({
+      previousEvent: null,
+      latestEvent: rundownStartsWithGroup['1'],
+      previousEntryId: rundownStartsWithGroup.group.id,
+      thisId: rundownStartsWithGroup['1'].id,
+      eventIndex: 1,
+      isPast: false,
+      isNextDay: false,
+      totalGap: 0,
+      isLinkedToLoaded: false,
+      isLoaded: false,
+      groupId: rundownStartsWithGroup.group.id,
+      groupColour: 'red',
+      groupEntries: 2,
+      isFirstAfterGroup: false,
+    });
+
+    expect(process(rundownStartsWithGroup['2'])).toStrictEqual({
+      previousEvent: rundownStartsWithGroup['1'],
+      latestEvent: rundownStartsWithGroup['2'],
+      previousEntryId: rundownStartsWithGroup['1'].id,
+      thisId: rundownStartsWithGroup['2'].id,
+      eventIndex: 2,
+      isPast: false,
+      isNextDay: false,
+      totalGap: 0,
+      isLinkedToLoaded: false,
+      isLoaded: false,
+      groupId: rundownStartsWithGroup.group.id,
+      groupColour: 'red',
+      groupEntries: 2,
+      isFirstAfterGroup: false,
+    });
+  });
+});

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

@@ -1,5 +1,4 @@
 import { stringify } from 'csv-stringify/browser/esm/sync';
-import { OntimeEntry, ProjectRundowns } from 'ontime-types';
 
 /**
  * Converts an array of arrays to a CSV file
@@ -7,25 +6,3 @@ import { OntimeEntry, ProjectRundowns } from 'ontime-types';
 export function makeCSVFromArrayOfArrays(arrayOfArrays: string[][]): string {
   return stringify(arrayOfArrays);
 }
-
-/**
- * Receives an object of rundowns, and flattens them into a single, linear rundown
- * Used for CSV export
- */
-export function aggregateRundowns(rundowns: ProjectRundowns): OntimeEntry[] {
-  const rundownKeys = Object.keys(rundowns);
-  if (rundownKeys.length === 0) return [];
-  const flatRundown: OntimeEntry[] = [];
-
-  for (const key of rundownKeys) {
-    const { order, entries } = rundowns[key];
-
-    for (let i = 0; i < order.length; i++) {
-      const entryId = order[i];
-      const entry = entries[entryId];
-
-      flatRundown.push(entry);
-    }
-  }
-  return flatRundown;
-}

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

@@ -0,0 +1,175 @@
+import {
+  isOntimeEvent,
+  isOntimeGroup,
+  isPlayableEvent,
+  MaybeString,
+  OntimeDelay,
+  OntimeEntry,
+  OntimeEvent,
+  OntimeMilestone,
+  PlayableEvent,
+  Rundown,
+} from 'ontime-types';
+import { checkIsNextDay, isNewLatest } from 'ontime-utils';
+
+export type RundownMetadata = {
+  previousEvent: PlayableEvent | null; // The playableEvent from the previous iteration, used by indicators
+  latestEvent: PlayableEvent | null; // The playableEvent most forwards in time processed so far
+  previousEntryId: MaybeString; // previous entry is used to infer position in the rundown for new events
+  thisId: MaybeString;
+  eventIndex: number;
+  isPast: boolean;
+  isNextDay: boolean;
+  totalGap: number;
+  isLinkedToLoaded: boolean; // check if the event can link all the way back to the currently playing event
+  isLoaded: boolean;
+  groupId: MaybeString;
+  groupColour: string | undefined;
+  groupEntries: number | undefined;
+  isFirstAfterGroup: boolean;
+};
+
+export type ExtendedEntry<T extends OntimeEntry = OntimeEntry> = T & RundownMetadata;
+
+export const lastMetadataKey = 'LAST';
+
+export type RundownMetadataObject = Record<string, Readonly<RundownMetadata>>;
+
+/**
+ * Generates a Rundown Metadata object from a rundown
+ */
+export function getRundownMetadata(
+  data: Pick<Rundown, 'entries' | 'flatOrder'>,
+  selectedEventId: MaybeString,
+): RundownMetadataObject {
+  const { metadata, process } = initRundownMetadata(selectedEventId);
+  // keep a single reference to the metadata which we override for every entry
+  let lastSnapshot = metadata;
+  const rundownMetadata: RundownMetadataObject = {};
+
+  for (const id of data.flatOrder) {
+    const entry = data.entries[id];
+    lastSnapshot = process(entry);
+    rundownMetadata[id] = lastSnapshot;
+  }
+
+  // ensure some blank data even for empty rundowns
+  rundownMetadata[lastMetadataKey] = lastSnapshot;
+
+  return rundownMetadata;
+}
+
+export function getFlatRundownMetadata(
+  data: Pick<Rundown, 'entries' | 'flatOrder'>,
+  selectedEventId: MaybeString,
+): ExtendedEntry[] {
+  const { process } = initRundownMetadata(selectedEventId);
+  const flatRundown: ExtendedEntry[] = [];
+
+  for (const id of data.flatOrder) {
+    const entry = data.entries[id];
+    const extendedEntry = { ...entry, ...process(entry) };
+    flatRundown.push(extendedEntry);
+  }
+
+  return flatRundown;
+}
+
+/**
+ * Creates a process function which aggregates the rundown metadata and event metadata
+ */
+export function initRundownMetadata(selectedEventId: MaybeString) {
+  let rundownMeta: RundownMetadata = {
+    previousEvent: null,
+    latestEvent: null,
+    previousEntryId: null,
+    thisId: null,
+    eventIndex: 0,
+    isPast: Boolean(selectedEventId), // all events before the current selected are in the past
+    isNextDay: false,
+    totalGap: 0,
+    isLinkedToLoaded: false,
+    isLoaded: false,
+    groupId: null,
+    groupColour: undefined,
+    groupEntries: undefined,
+    isFirstAfterGroup: false,
+  };
+
+  function process(entry: OntimeEntry): Readonly<RundownMetadata> {
+    const processedRundownMetadata = processEntry(rundownMeta, selectedEventId, entry);
+    rundownMeta = processedRundownMetadata;
+    return rundownMeta;
+  }
+
+  return { metadata: rundownMeta, process };
+}
+
+/**
+ * Receives a rundown entry and processes its place in the rundown
+ */
+function processEntry(
+  rundownMetadata: RundownMetadata,
+  selectedEventId: MaybeString,
+  entry: Readonly<OntimeEntry>,
+): Readonly<RundownMetadata> {
+  const processedData = { ...rundownMetadata };
+  // initialise data to be overridden below
+  processedData.isNextDay = false;
+  processedData.isLoaded = false;
+
+  processedData.previousEntryId = processedData.thisId; // thisId comes from the previous iteration
+  processedData.thisId = entry.id; // we reassign thisId
+  processedData.previousEvent = processedData.latestEvent;
+
+  if (entry.id === selectedEventId) {
+    processedData.isLoaded = true;
+    processedData.isPast = false;
+    processedData.isLinkedToLoaded = true;
+  }
+
+  if (isOntimeGroup(entry)) {
+    processedData.groupId = entry.id;
+    processedData.groupColour = entry.colour;
+    processedData.groupEntries = entry.entries.length;
+  } else {
+    // for delays and groups, we insert the group metadata
+    if ((entry as OntimeEvent | OntimeDelay | OntimeMilestone).parent !== processedData.groupId) {
+      // if the parent is not the current group, we need to update the groupId
+      processedData.groupId = (entry as OntimeEvent | OntimeDelay | OntimeMilestone).parent;
+      processedData.groupEntries = undefined;
+      if ((entry as OntimeEvent | OntimeDelay | OntimeMilestone).parent === null) {
+        // if the entry has no parent, it cannot have a group colour
+        processedData.groupColour = undefined;
+      }
+    }
+
+    if (isOntimeEvent(entry)) {
+      // event indexes are 1 based in UI
+      processedData.eventIndex += 1;
+      processedData.isFirstAfterGroup = Boolean(processedData.previousEvent?.parent) && entry.parent === null;
+
+      if (isPlayableEvent(entry)) {
+        processedData.isNextDay = checkIsNextDay(entry, processedData.previousEvent);
+        processedData.totalGap += entry.gap;
+
+        if (!processedData.isPast && !processedData.isLoaded) {
+          /**
+           * isLinkToLoaded is a chain value that we maintain until we
+           * a) find an unlinked event
+           * b) find a countToEnd event
+           */
+          processedData.isLinkedToLoaded =
+            entry.linkStart && !processedData.previousEvent?.countToEnd && processedData.isLinkedToLoaded;
+        }
+
+        if (isNewLatest(entry, processedData.latestEvent)) {
+          // this event is the forward most event in rundown, for next iteration
+          processedData.latestEvent = entry;
+        }
+      }
+    }
+  }
+
+  return processedData;
+}

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

@@ -1,8 +0,0 @@
-import { MaybeString } from 'ontime-types';
-
-export default function safeParseNumber(value: MaybeString, defaultValue: number = 0): number {
-  if (!value) return defaultValue;
-  const number = Number(value);
-  if (isNaN(number)) return defaultValue;
-  return number;
-}

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

@@ -1,5 +1,5 @@
 import {
-  ApiAction,
+  ApiActionTag,
   Log,
   MessageTag,
   RefetchKey,
@@ -11,12 +11,14 @@ import {
 
 import { isProduction, websocketUrl } from '../../externals';
 import {
+  APP_SETTINGS,
   CLIENT_LIST,
   CUSTOM_FIELDS,
   PROJECT_DATA,
   REPORT,
   RUNDOWN,
   RUNTIME,
+  TRANSLATION,
   URL_PRESETS,
   VIEW_SETTINGS,
 } from '../api/constants';
@@ -173,6 +175,12 @@ export const connectSocket = () => {
             case RefetchKey.ViewSettings:
               ontimeQueryClient.invalidateQueries({ queryKey: VIEW_SETTINGS });
               break;
+            case RefetchKey.Translation:
+              ontimeQueryClient.invalidateQueries({ queryKey: TRANSLATION });
+              break;
+            case RefetchKey.Settings:
+              ontimeQueryClient.invalidateQueries({ queryKey: APP_SETTINGS });
+              break;
             default: {
               target satisfies never;
               break;
@@ -191,7 +199,7 @@ export const connectSocket = () => {
   };
 };
 
-export function sendSocket<T extends MessageTag | ApiAction>(
+export function sendSocket<T extends MessageTag | ApiActionTag>(
   tag: T,
   payload: T extends MessageTag ? Pick<WsPacketToServer & { tag: T }, 'payload'>['payload'] : unknown,
 ): void {

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

@@ -12,6 +12,8 @@ import { APP_SETTINGS } from '../api/constants';
 import { useExpectedStartData } from '../hooks/useSocket';
 import { ontimeQueryClient } from '../queryClient';
 
+import { ExtendedEntry } from './rundownMetadata';
+
 /**
  * Returns current time in milliseconds from midnight
  * @returns {number}
@@ -154,3 +156,33 @@ export function useTimeUntilExpectedStart(
   );
   return expectedStart - clock;
 }
+
+export function getExpectedTimesFromExtendedEvent(
+  event: Pick<
+    ExtendedEntry<OntimeEvent>,
+    'timeStart' | 'dayOffset' | 'delay' | 'totalGap' | 'isLinkedToLoaded' | 'countToEnd' | 'duration'
+  > | null,
+  state: ReturnType<typeof useExpectedStartData>,
+) {
+  if (event === null) return { expectedStart: 0, timeToStart: 0, expectedEnd: 0, plannedEnd: 0 };
+
+  const expectedStart = getExpectedStart(
+    { timeStart: event.timeStart, delay: event.delay, dayOffset: event.dayOffset },
+    {
+      totalGap: event.totalGap,
+      isLinkedToLoaded: event.isLinkedToLoaded,
+      ...state,
+    },
+  );
+
+  const plannedEnd = event.timeStart + event.duration + event.delay;
+
+  return {
+    expectedStart,
+    timeToStart: expectedStart - state.clock,
+    expectedEnd: event.countToEnd
+      ? Math.max(expectedStart + event.duration, plannedEnd)
+      : expectedStart + event.duration,
+    plannedEnd,
+  };
+}

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

@@ -33,8 +33,8 @@ export function validateProjectFile(file: File) {
   }
 
   // Limit file size of a project file to around 1MB
-  if (file.size > 1_000_000) {
-    throw new Error('File size limit (1MB) exceeded');
+  if (file.size > 2_000_000) {
+    throw new Error('File size limit (2MB) exceeded');
   }
 }
 
@@ -56,8 +56,8 @@ export function validateLogo(file: File) {
     throw new Error('File is empty');
   }
 
-  // Limit file size of a project file to around 1MB
-  if (file.size > 1_000_000) {
-    throw new Error('File size limit (1MB) exceeded');
+  // Limit file size of a project file to around 1.5MB
+  if (file.size > 1_500_000) {
+    throw new Error('File size limit (1.5MB) exceeded');
   }
 }

apps/client/src/externals.ts

@@ -17,11 +17,11 @@ export const buyMeACoffeeUrl = 'https://buymeacoffee.com/cpvalente';
 
 // resolve environment
 export const appVersion = version;
-export const isProduction = import.meta.env.MODE === 'production';
-export const isDev = !isProduction;
+export const isDocker = import.meta.env.IS_DOCKER; // this env is made available by the vite.config.js define function
+export const isProduction = import.meta.env.PROD;
+export const isDev = import.meta.env.DEV;
 export const currentHostName = window.location.hostname;
 export const isLocalhost = currentHostName === 'localhost' || currentHostName === '127.0.0.1';
-export const isDockerImage = Boolean(import.meta.env.VITE_IS_DOCKER);
 export const isOntimeCloud = currentHostName.includes('cloud.getontime.no');
 
 // resolve entrypoint URLs

apps/client/src/features/PresetWrapper.tsx

@@ -1,29 +0,0 @@
-/* eslint-disable react/display-name */
-import { ComponentType, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router';
-
-import useUrlPresets from '../common/hooks-query/useUrlPresets';
-import { getRouteFromPreset } from '../common/utils/urlPresets';
-
-const withPreset = <P extends object>(Component: ComponentType<P>) => {
-  return (props: Partial<P>) => {
-    const { data } = useUrlPresets();
-    const navigate = useNavigate();
-    const location = useLocation();
-
-    // navigate if is alias route
-    useEffect(() => {
-      if (!data) return;
-      const destination = getRouteFromPreset(location, data);
-
-      // navigate to this destination if its not null
-      if (destination) {
-        navigate(destination);
-      }
-    }, [data, navigate, location]);
-
-    return <Component {...(props as P)} />;
-  };
-};
-
-export default withPreset;

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

@@ -12,12 +12,12 @@ interface PanelContentProps {
 export default function PanelContent({ onClose, children }: PropsWithChildren<PanelContentProps>) {
   return (
     <div className={style.contentWrapper}>
+      <div className={style.content}>{children}</div>
       <div className={style.corner}>
         <Button size='large' onClick={onClose}>
           Close settings <IoClose />
         </Button>
       </div>
-      <div className={style.content}>{children}</div>
     </div>
   );
 }

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

@@ -106,7 +106,6 @@ $inner-padding: 1rem;
   th,
   td {
     padding: 0.5rem;
-    vertical-align: top;
   }
 
   tr:nth-child(even) {

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

@@ -107,16 +107,16 @@ export default function AutomationsList(props: AutomationsListProps) {
                     </IconButton>
                   </Panel.InlineElements>
                 </tr>
-                {deleteError && (
-                  <tr>
-                    <td colSpan={5}>
-                      <Panel.Error>{deleteError}</Panel.Error>
-                    </td>
-                  </tr>
-                )}
               </Fragment>
             );
           })}
+          {deleteError && (
+            <tr>
+              <td colSpan={5}>
+                <Panel.Error>{deleteError}</Panel.Error>
+              </td>
+            </tr>
+          )}
         </tbody>
       </Panel.Table>
     </Panel.Card>

apps/client/src/features/app-settings/panel/manage-panel/ManagePanel.module.scss

@@ -6,14 +6,6 @@
   width: 100%;
 }
 
-.fieldForm {
-  padding: 1rem;
-  background-color: $gray-1350;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
 .twoCols {
   display: grid;
   grid-template-columns: 1fr 1fr;

apps/client/src/features/app-settings/panel/manage-panel/ManageRundownForm.tsx

@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
+import Button from '../../../../common/components/buttons/Button';
+import Input from '../../../../common/components/input/input/Input';
+import { useMutateProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+type NewRundownFormState = {
+  title: string;
+};
+
+interface ManageRundownForm {
+  onClose: () => void;
+}
+
+export function ManageRundownForm({ onClose }: ManageRundownForm) {
+  const { create } = useMutateProjectRundowns();
+
+  const {
+    handleSubmit,
+    register,
+    setFocus,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<NewRundownFormState>({
+    defaultValues: { title: '' },
+  });
+
+  const createRundown = async (values: NewRundownFormState) => {
+    try {
+      await create(values.title || 'untitled');
+      onClose();
+    } catch (error) {
+      setError('root', { message: `Failed to create rundown. ${error}` });
+    }
+  };
+
+  // give initial focus to the title field
+  useEffect(() => {
+    setFocus('title');
+  }, [setFocus]);
+
+  return (
+    <Panel.Indent as='form' onSubmit={handleSubmit(createRundown)}>
+      <Panel.Section>
+        <label>
+          <Panel.Description>Rundown title</Panel.Description>
+          <Input {...register('title')} fluid placeholder='Your rundown name' />
+        </label>
+      </Panel.Section>
+      <Panel.InlineElements relation='inner' align='end'>
+        <Button variant='ghosted' disabled={isSubmitting} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button type='submit' variant='primary' disabled={isSubmitting}>
+          Create rundown
+        </Button>
+      </Panel.InlineElements>
+      {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+    </Panel.Indent>
+  );
+}

apps/client/src/features/app-settings/panel/manage-panel/ManageRundowns.tsx

@@ -1,18 +1,59 @@
+import { useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
 import { useDisclosure } from '@mantine/hooks';
 
+import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import Dialog from '../../../../common/components/dialog/Dialog';
-import { useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
+import Tag from '../../../../common/components/tag/Tag';
+import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
 import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 
+import { ManageRundownForm } from './ManageRundownForm';
+
 import style from './ManagePanel.module.scss';
 
 export default function ManageRundowns() {
   const { data } = useProjectRundowns();
-  const [deleteOpen, deleteHandlers] = useDisclosure();
-  const [loadOpen, loadHandlers] = useDisclosure();
+  const { remove, load } = useMutateProjectRundowns();
+  const [isOpenDelete, deleteHandlers] = useDisclosure();
+  const [isOpenLoad, loadHandlers] = useDisclosure();
+  const [isNewLoad, newHandlers] = useDisclosure();
+  const [targetRundown, setTargetRundown] = useState('');
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  const openLoad = (id: string) => {
+    setActionError(null);
+    setTargetRundown(id);
+    loadHandlers.open();
+  };
+
+  const openDelete = (id: string) => {
+    setActionError(null);
+    setTargetRundown(id);
+    deleteHandlers.open();
+  };
+
+  const submitRundownLoad = async () => {
+    try {
+      await load(targetRundown);
+    } catch (error) {
+      setActionError(`Failed to load rundown. ${maybeAxiosError(error)}`);
+    } finally {
+      loadHandlers.close();
+    }
+  };
+
+  const submitRundownDelete = async () => {
+    try {
+      await remove(targetRundown);
+    } catch (error) {
+      setActionError(`Failed to delete rundown. ${maybeAxiosError(error)}`);
+    } finally {
+      deleteHandlers.close();
+    }
+  };
 
   return (
     <>
@@ -21,49 +62,60 @@ export default function ManageRundowns() {
           <Panel.SubHeader>
             Manage project rundowns
             <Panel.InlineElements>
-              <Button onClick={() => undefined} disabled>
+              <Button
+                onClick={() => {
+                  setActionError(null);
+                  newHandlers.open();
+                }}
+              >
                 New <IoAdd />
               </Button>
             </Panel.InlineElements>
           </Panel.SubHeader>
           <Panel.Divider />
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th># Entries</th>
-                <th style={{ width: '100%' }}>Title</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {data.rundowns.map((rundown) => {
-                const isLoaded = data.loaded === rundown.id;
-                return (
-                  <tr key={rundown.id} className={cx([isLoaded && style.current])}>
-                    <td>{rundown.numEntries}</td>
-                    <td>{`${rundown.title}${isLoaded && ' (loaded)'}`}</td>
-                    <Panel.InlineElements as='td'>
-                      <Button size='small' onClick={() => loadHandlers.open()} disabled={isLoaded}>
-                        Load
-                      </Button>
-                      <Button
-                        size='small'
-                        variant='subtle-destructive'
-                        onClick={() => deleteHandlers.open()}
-                        disabled={isLoaded}
-                      >
-                        Delete
-                      </Button>
-                    </Panel.InlineElements>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </Panel.Table>
+          <Panel.Section>
+            {isNewLoad && <ManageRundownForm onClose={newHandlers.close} />}
+            {actionError && <Panel.Error>{actionError}</Panel.Error>}
+            <Panel.Table>
+              <thead>
+                <tr>
+                  <th># Entries</th>
+                  <th style={{ width: '100%' }}>Title</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {data?.rundowns?.map(({ id, numEntries, title }) => {
+                  const isLoaded = data.loaded === id;
+                  return (
+                    <tr key={id} className={cx([isLoaded && style.current])}>
+                      <td>{numEntries}</td>
+                      <td>
+                        {title} {isLoaded && <Tag>Loaded</Tag>}
+                      </td>
+                      <Panel.InlineElements as='td'>
+                        <Button size='small' onClick={() => openLoad(id)} disabled={isLoaded}>
+                          Load
+                        </Button>
+                        <Button
+                          size='small'
+                          variant='subtle-destructive'
+                          onClick={() => openDelete(id)}
+                          disabled={isLoaded}
+                        >
+                          Delete
+                        </Button>
+                      </Panel.InlineElements>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </Panel.Table>
+          </Panel.Section>
         </Panel.Card>
       </Panel.Section>
       <Dialog
-        isOpen={deleteOpen}
+        isOpen={isOpenDelete}
         onClose={deleteHandlers.close}
         title='Load rundown'
         showBackdrop
@@ -78,16 +130,16 @@ export default function ManageRundowns() {
             <Button size='large' onClick={deleteHandlers.close}>
               Cancel
             </Button>
-            <Button variant='destructive' size='large' onClick={() => undefined}>
+            <Button variant='destructive' size='large' onClick={submitRundownDelete}>
               Delete rundown
             </Button>
           </>
         }
       />
       <Dialog
-        isOpen={loadOpen}
+        isOpen={isOpenLoad}
         onClose={loadHandlers.close}
-        title='Delete rundown'
+        title='Load rundown'
         showBackdrop
         showCloseButton
         bodyElements={
@@ -100,7 +152,7 @@ export default function ManageRundowns() {
             <Button size='large' onClick={loadHandlers.close}>
               Cancel
             </Button>
-            <Button variant='primary' size='large' onClick={() => undefined}>
+            <Button variant='primary' size='large' onClick={submitRundownLoad}>
               Load rundown
             </Button>
           </>

apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldForm.tsx

@@ -83,11 +83,7 @@ export default function CustomFieldForm({
   const isEditMode = initialKey !== undefined;
 
   return (
-    <form
-      onSubmit={handleSubmit(setupSubmit)}
-      className={style.fieldForm}
-      onKeyDown={(event) => preventEscape(event, onCancel)}
-    >
+    <Panel.Indent as='form' onSubmit={handleSubmit(setupSubmit)} onKeyDown={(event) => preventEscape(event, onCancel)}>
       <Info>
         Please note that images can quickly deteriorate your app&apos;s performance.
         <br />
@@ -107,7 +103,7 @@ export default function CustomFieldForm({
         />
       </div>
       <div className={style.twoCols}>
-        <div>
+        <label>
           <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>
           {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
           <Input
@@ -116,7 +112,8 @@ export default function CustomFieldForm({
               onChange: () => setValue('key', customFieldLabelToKey(getValues('label')) ?? 'N/A'),
               validate: (value) => {
                 if (value.trim().length === 0) return 'Required field';
-                if (!checkRegex.isAlphanumericWithSpace(value)) return 'Only alphanumeric characters and space are allowed';
+                if (!checkRegex.isAlphanumericWithSpace(value))
+                  return 'Only alphanumeric characters and space are allowed';
                 if (!isEditMode) {
                   if (isEditMode && Object.keys(data).includes(value)) return 'Custom fields must be unique';
                 }
@@ -125,17 +122,17 @@ export default function CustomFieldForm({
             })}
             fluid
           />
-        </div>
+        </label>
 
-        <div>
+        <label>
           <Panel.Description>Key (use in Integrations and API)</Panel.Description>
-          <Input {...register('key')} readOnly fluid />
-        </div>
+          <Input {...register('key')} variant='ghosted' readOnly fluid />
+        </label>
       </div>
-      <div>
+      <label>
         <Panel.Description>Colour</Panel.Description>
         <SwatchSelect name='colour' value={colour} handleChange={(_field, value) => handleSelectColour(value)} />
-      </div>
+      </label>
       {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
       <Panel.InlineElements relation='inner' align='end'>
         <Button variant='ghosted' onClick={onCancel}>
@@ -145,6 +142,6 @@ export default function CustomFieldForm({
           Save
         </Button>
       </Panel.InlineElements>
-    </form>
+    </Panel.Indent>
   );
 }

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/ImportReview.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { CustomFields, Rundown } from 'ontime-types';
 
 import Button from '../../../../../common/components/buttons/Button';
+import useRundown from '../../../../../common/hooks-query/useRundown';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import PreviewSpreadsheet from './preview/PreviewRundown';
@@ -17,7 +18,7 @@ interface ImportReviewProps {
 
 export default function ImportReview(props: ImportReviewProps) {
   const { rundown, customFields, onFinished, onCancel } = props;
-
+  const { data: currentRundown } = useRundown();
   const [loading, setLoading] = useState(false);
   const { importRundown } = useGoogleSheet();
   const resetPreview = useSheetStore((state) => state.resetPreview);
@@ -29,9 +30,12 @@ export default function ImportReview(props: ImportReviewProps) {
 
   const applyImport = async () => {
     setLoading(true);
+
+    // we need to import on-top of the currently loaded rundown
+    // so the id needs to match
     await importRundown(
       {
-        [rundown.id]: rundown,
+        [currentRundown.id]: { ...rundown, id: currentRundown.id, title: currentRundown.title },
       },
       customFields,
     );

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/preview/PreviewRundown.module.scss

@@ -12,6 +12,7 @@ tr .secondaryRow {
 }
 
 .linkStartActive {
+  flex-shrink: 0;
   color: $active-indicator;
   transform: rotate(-45deg);
 }

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

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { IoLink } from 'react-icons/io5';
-import { CustomFields, isOntimeEvent, isOntimeGroup, Rundown } from 'ontime-types';
+import { CustomFields, isOntimeEvent, isOntimeGroup, isOntimeMilestone, Rundown } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import Tag from '../../../../../../common/components/tag/Tag';
@@ -53,9 +53,10 @@ export default function PreviewRundown(props: PreviewRundownProps) {
         </tr>
       </thead>
       <tbody>
-        {rundown.order.map((entryId) => {
+        {rundown.flatOrder.map((entryId) => {
           const entry = rundown.entries[entryId];
           if (isOntimeGroup(entry)) {
+            const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
             return (
               <tr key={entry.id}>
                 <td className={style.center}>
@@ -64,11 +65,75 @@ export default function PreviewRundown(props: PreviewRundownProps) {
                 <td className={style.center}>
                   <Tag>{entry.type}</Tag>
                 </td>
-                <td />
-                <td colSpan={99}>{entry.title}</td>
+                <td /> {/** CUE */}
+                <td>{entry.title}</td>
+                <td /> {/** Flag */}
+                <td /> {/** Time Start */}
+                <td /> {/** Time End */}
+                <td /> {/** Duration */}
+                <td /> {/** Warning Time */}
+                <td /> {/** Danger Time */}
+                <td /> {/** Count to end */}
+                <td /> {/** Skip */}
+                <td style={{ ...colour }}>{entry.colour}</td>
+                <td /> {/** Timer Type */}
+                <td /> {/** End Action */}
+                {fieldKeys.map((field) => {
+                  let value = '';
+                  if (field in entry.custom) {
+                    value = entry.custom[field];
+                  }
+                  return <td key={field}>{value}</td>;
+                })}
+                <td className={style.center}>
+                  <Tag>{entry.id}</Tag>
+                </td>
               </tr>
             );
           }
+          if (isOntimeMilestone(entry)) {
+            const colour = entry.colour ? getAccessibleColour(entry.colour) : {};
+            return (
+              <Fragment key={entry.id}>
+                <tr>
+                  <td /> {/** Index */}
+                  <td className={style.center}>
+                    <Tag>{entry.type}</Tag>
+                  </td>
+                  <td className={style.nowrap}>{entry.cue}</td>
+                  <td>{entry.title}</td>
+                  <td /> {/** Flag */}
+                  <td /> {/** Time Start */}
+                  <td /> {/** Time End */}
+                  <td /> {/** Duration */}
+                  <td /> {/** Warning Time */}
+                  <td /> {/** Danger Time */}
+                  <td /> {/** Count to end */}
+                  <td /> {/** Skip */}
+                  <td style={{ ...colour }}>{entry.colour}</td>
+                  <td /> {/** Timer Type */}
+                  <td /> {/** End Action */}
+                  {fieldKeys.map((field) => {
+                    let value = '';
+                    if (field in entry.custom) {
+                      value = entry.custom[field];
+                    }
+                    return <td key={field}>{value}</td>;
+                  })}
+                  <td className={style.center}>
+                    <Tag>{entry.id}</Tag>
+                  </td>
+                </tr>
+                {entry.note && (
+                  <tr>
+                    <td colSpan={99} className={style.secondaryRow}>
+                      Note: {entry.note}
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            );
+          }
           if (!isOntimeEvent(entry)) {
             return null;
           }
@@ -107,14 +172,13 @@ export default function PreviewRundown(props: PreviewRundownProps) {
                 <td className={style.center}>
                   <Tag>{entry.endAction}</Tag>
                 </td>
-                {isOntimeEvent(entry) &&
-                  fieldKeys.map((field) => {
-                    let value = '';
-                    if (field in entry.custom) {
-                      value = entry.custom[field];
-                    }
-                    return <td key={field}>{value}</td>;
-                  })}
+                {fieldKeys.map((field) => {
+                  let value = '';
+                  if (field in entry.custom) {
+                    value = entry.custom[field];
+                  }
+                  return <td key={field}>{value}</td>;
+                })}
                 <td className={style.center}>
                   <Tag>{entry.id}</Tag>
                 </td>

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

@@ -4,7 +4,7 @@ import { MessageTag } from 'ontime-types';
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import { usePing } from '../../../../common/hooks/useSocket';
 import { sendSocket } from '../../../../common/utils/socket';
-import { isDockerImage } from '../../../../externals';
+import { isDocker } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
 
@@ -18,7 +18,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
   return (
     <>
       <Panel.Header>Network</Panel.Header>
-      {isDockerImage && (
+      {isDocker && (
         <Panel.Section>
           <OntimeCloudStats />
         </Panel.Section>

apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss

@@ -14,4 +14,8 @@
 .copiable {
   cursor: text  ;
   user-select: text;
-}
+}
+
+.self {
+  background-color: $blue-1100;
+}

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

@@ -8,6 +8,7 @@ import { RenameClientModal } from '../../../../../common/components/client-modal
 import Tag from '../../../../../common/components/tag/Tag';
 import { setClientRemote } from '../../../../../common/hooks/useSocket';
 import { useClientStore } from '../../../../../common/stores/clientStore';
+import { cx } from '../../../../../common/utils/styleUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import style from './ClientControlPanel.module.scss';
@@ -71,13 +72,13 @@ export default function ClientList() {
               const { identify, name, path } = client;
               const isCurrent = id === key;
               return (
-                <tr key={key}>
+                <tr key={key} className={cx([isCurrent && style.self])}>
                   <Panel.InlineElements relation='inner' as='td'>
                     {isCurrent && <Tag>SELF</Tag>}
                     {name}
                   </Panel.InlineElements>
                   <td className={style.copiable}>{path}</td>
-                  <Panel.InlineElements relation='inner'>
+                  <Panel.InlineElements relation='inner' as='td'>
                     <Button
                       size='small'
                       className={`${identify ? style.blink : ''}`}

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

@@ -58,7 +58,7 @@ export default function ProjectCreateForm({ onClose }: ProjectCreateFromProps) {
   };
 
   return (
-    <Panel.Section
+    <Panel.Indent
       as='form'
       onSubmit={handleSubmit(handleSubmitCreate)}
       onKeyDown={(event) => preventEscape(event, onClose)}
@@ -76,11 +76,9 @@ export default function ProjectCreateForm({ onClose }: ProjectCreateFromProps) {
       </Panel.Title>
       {error && <Panel.Error>{error}</Panel.Error>}
       <Panel.Section className={style.innerColumn}>
-        <label>
-          Project title
-          <Input fluid placeholder='Your project name' {...register('title')} />
-        </label>
+        <Panel.Description>Project title</Panel.Description>
+        <Input fluid placeholder='Your project name' {...register('title')} />
       </Panel.Section>
-    </Panel.Section>
+    </Panel.Indent>
   );
 }

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

@@ -10,7 +10,6 @@ import {
 
 import {
   deleteProject,
-  downloadCSV,
   downloadProject,
   duplicateProject,
   loadProject,
@@ -187,10 +186,6 @@ function ActionMenu(props: ActionMenuProps) {
     await downloadProject(filename);
   };
 
-  const handleExportCSV = async () => {
-    await downloadCSV(filename);
-  };
-
   return (
     <DropdownMenu
       render={<IconButton variant='ghosted-white' />}
@@ -213,7 +208,6 @@ function ActionMenu(props: ActionMenuProps) {
         { type: 'item', icon: IoPencilOutline, label: 'Rename', onClick: handleRename },
         { type: 'item', icon: IoCopyOutline, label: 'Duplicate', onClick: handleDuplicate },
         { type: 'item', icon: IoDocumentOutline, label: 'Download', onClick: handleDownload },
-        { type: 'item', icon: IoDocumentOutline, label: 'Export CSV Rundown', onClick: handleExportCSV },
         { type: 'divider' },
         { type: 'item', icon: IoTrash, label: 'Delete', onClick: () => onDelete(filename), disabled: current },
       ]}

apps/client/src/features/app-settings/panel/settings-panel/GeneralSettings.tsx

@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
+import { lazy, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
+import { useDisclosure } from '@mantine/hooks';
 import { Settings } from 'ontime-types';
 
 import { postSettings } from '../../../../common/api/settings';
@@ -15,6 +16,8 @@ import * as Panel from '../../panel-utils/PanelUtils';
 
 import GeneralPinInput from './composite/GeneralPinInput';
 
+const TranslationModal = lazy(() => import('./composite/CustomTranslationModal'));
+
 export default function GeneralSettings() {
   const { data, status, refetch } = useSettings();
   const {
@@ -34,6 +37,8 @@ export default function GeneralSettings() {
     },
   });
 
+  const [isOpen, handler] = useDisclosure();
+
   // update form if we get new data from server
   useEffect(() => {
     if (data) {
@@ -63,112 +68,124 @@ export default function GeneralSettings() {
   const isLoading = status === 'pending';
 
   return (
-    <Panel.Section
-      as='form'
-      onSubmit={handleSubmit(onSubmit)}
-      onKeyDown={(event) => preventEscape(event, onReset)}
-      id='app-settings'
-    >
-      <Panel.Card>
-        <Panel.SubHeader>
-          General settings
-          <Panel.InlineElements>
-            <Button disabled={!isDirty || isSubmitting} variant='ghosted' onClick={onReset}>
-              Revert to saved
-            </Button>
-            <Button type='submit' form='app-settings' loading={isSubmitting} disabled={disableSubmit} variant='primary'>
-              Save
-            </Button>
-          </Panel.InlineElements>
-        </Panel.SubHeader>
-        {submitError && <Panel.Error>{submitError}</Panel.Error>}
-        <Panel.Divider />
-        <Panel.Section>
-          <Panel.Loader isLoading={isLoading} />
-          <Panel.ListGroup>
-            <Panel.ListItem>
-              <Panel.Field
-                title='Ontime server port'
-                description={
-                  isOntimeCloud
-                    ? 'Server port disabled for Ontime Cloud'
-                    : 'Port ontime server listens in. Defaults to 4001 (needs app restart)'
-                }
-                error={errors.serverPort?.message}
-              />
-              <Input
-                id='serverPort'
-                type='number'
-                maxLength={5}
-                style={{ width: '75px' }}
-                disabled={isOntimeCloud}
-                {...register('serverPort', {
-                  required: { value: true, message: 'Required field' },
-                  max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
-                  min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
-                  pattern: {
-                    value: isOnlyNumbers,
-                    message: 'Value should be numeric',
-                  },
-                })}
-              />
-            </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field
-                title='Editor pin code'
-                description='Protect the editor view with a pin code'
-                error={errors.editorKey?.message}
-              />
-              <GeneralPinInput register={register} formName='editorKey' disabled={disableInputs} />
-            </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field
-                title='Operator pin code'
-                description='Protect the operator and cuesheet views with a pin code'
-                error={errors.operatorKey?.message}
-              />
-              <GeneralPinInput register={register} formName='operatorKey' disabled={disableInputs} />
-            </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field
-                title='Time format'
-                description='Default time format to show in views 12 /24 hours'
-                error={errors.timeFormat?.message}
-              />
-              <Select
-                value={watch('timeFormat')}
-                onValueChange={(value) => setValue('timeFormat', value as '12' | '24', { shouldDirty: true })}
-                defaultValue='24'
-                options={[
-                  { value: '12', label: '12 hours 11:00:10 PM' },
-                  { value: '24', label: '24 hours 23:00:10' },
-                ]}
-              />
-            </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field
-                title='Views language'
-                description='Language to be displayed in views'
-                error={errors.language?.message}
-              />
-              <Select
-                value={watch('language')}
-                onValueChange={(value) => setValue('language', value, { shouldDirty: true })}
-                disabled={disableInputs}
-                defaultValue='en'
-                options={[
-                  { value: 'en', label: 'English' },
-                  { value: 'fr', label: 'French' },
-                  { value: 'de', label: 'German' },
-                  { value: 'it', label: 'Italian' },
-                  { value: 'pt', label: 'Portuguese' },
-                  { value: 'es', label: 'Spanish' },
-                ]}
-              />
-            </Panel.ListItem>
-          </Panel.ListGroup>
-        </Panel.Section>
-      </Panel.Card>
-    </Panel.Section>
+    <>
+      <TranslationModal isOpen={isOpen} onClose={handler.close} />
+      <Panel.Section
+        as='form'
+        onSubmit={handleSubmit(onSubmit)}
+        onKeyDown={(event) => preventEscape(event, onReset)}
+        id='app-settings'
+      >
+        <Panel.Card>
+          <Panel.SubHeader>
+            General settings
+            <Panel.InlineElements>
+              <Button disabled={!isDirty || isSubmitting} variant='ghosted' onClick={onReset}>
+                Revert to saved
+              </Button>
+              <Button
+                type='submit'
+                form='app-settings'
+                name='general-settings-submit'
+                loading={isSubmitting}
+                disabled={disableSubmit}
+                variant='primary'
+              >
+                Save
+              </Button>
+            </Panel.InlineElements>
+          </Panel.SubHeader>
+          {submitError && <Panel.Error>{submitError}</Panel.Error>}
+          <Panel.Divider />
+          <Panel.Section>
+            <Panel.Loader isLoading={isLoading} />
+            <Panel.ListGroup>
+              <Panel.ListItem>
+                <Panel.Field
+                  title='Ontime server port'
+                  description={
+                    isOntimeCloud
+                      ? 'Server port disabled for Ontime Cloud'
+                      : 'Port ontime server listens in. Defaults to 4001 (needs app restart)'
+                  }
+                  error={errors.serverPort?.message}
+                />
+                <Input
+                  id='serverPort'
+                  type='number'
+                  maxLength={5}
+                  style={{ width: '75px' }}
+                  disabled={isOntimeCloud}
+                  {...register('serverPort', {
+                    required: { value: true, message: 'Required field' },
+                    max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+                    min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+                    pattern: {
+                      value: isOnlyNumbers,
+                      message: 'Value should be numeric',
+                    },
+                  })}
+                />
+              </Panel.ListItem>
+              <Panel.ListItem>
+                <Panel.Field
+                  title='Editor pin code'
+                  description='Protect the editor view with a pin code'
+                  error={errors.editorKey?.message}
+                />
+                <GeneralPinInput register={register} formName='editorKey' disabled={disableInputs} />
+              </Panel.ListItem>
+              <Panel.ListItem>
+                <Panel.Field
+                  title='Operator pin code'
+                  description='Protect the operator and cuesheet views with a pin code'
+                  error={errors.operatorKey?.message}
+                />
+                <GeneralPinInput register={register} formName='operatorKey' disabled={disableInputs} />
+              </Panel.ListItem>
+              <Panel.ListItem>
+                <Panel.Field
+                  title='Time format'
+                  description='Default time format to show in views 12 /24 hours'
+                  error={errors.timeFormat?.message}
+                />
+                <Select
+                  value={watch('timeFormat')}
+                  onValueChange={(value) => setValue('timeFormat', value as '12' | '24', { shouldDirty: true })}
+                  defaultValue='24'
+                  options={[
+                    { value: '12', label: '12 hours 11:00:10 PM' },
+                    { value: '24', label: '24 hours 23:00:10' },
+                  ]}
+                />
+              </Panel.ListItem>
+              <Panel.ListItem>
+                <Panel.Field
+                  title='Views language'
+                  description='Language to be displayed in views'
+                  error={errors.language?.message}
+                />
+                <Select
+                  value={watch('language')}
+                  onValueChange={(value) => setValue('language', value, { shouldDirty: true })}
+                  disabled={disableInputs}
+                  defaultValue='en'
+                  options={[
+                    { value: 'en', label: 'English' },
+                    { value: 'fr', label: 'French' },
+                    { value: 'de', label: 'German' },
+                    { value: 'it', label: 'Italian' },
+                    { value: 'pt', label: 'Portuguese' },
+                    { value: 'es', label: 'Spanish' },
+                    { value: 'custom', label: 'Custom' },
+                  ]}
+                />
+                <Button onClick={handler.open}>Edit custom translation</Button>
+              </Panel.ListItem>
+            </Panel.ListGroup>
+          </Panel.Section>
+        </Panel.Card>
+      </Panel.Section>
+    </>
   );
 }

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

@@ -27,6 +27,7 @@ export default function ProjectData() {
     reset,
     formState: { isSubmitting, isValid, isDirty, errors },
     setError,
+    clearErrors,
     watch,
     control,
     setValue,
@@ -53,6 +54,7 @@ export default function ProjectData() {
 
   const handleUploadProjectLogo = async (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
+    clearErrors('logo');
 
     if (!file) {
       return;
@@ -93,6 +95,7 @@ export default function ProjectData() {
 
   const onSubmit = async (formData: ProjectData) => {
     try {
+      clearErrors();
       await updateProjectData(formData);
     } catch (error) {
       const message = maybeAxiosError(error);

apps/client/src/features/app-settings/panel/settings-panel/composite/CustomTranslationModal.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { langEn, TranslationObject } from 'ontime-types';
+
+import { maybeAxiosError } from '../../../../../common/api/utils';
+import Button from '../../../../../common/components/buttons/Button';
+import Info from '../../../../../common/components/info/Info';
+import Input from '../../../../../common/components/input/input/Input';
+import Modal from '../../../../../common/components/modal/Modal';
+import { useTranslation } from '../../../../../translation/TranslationProvider';
+import * as Panel from '../../../panel-utils/PanelUtils';
+
+interface CustomTranslationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function CustomTranslationModal({ isOpen, onClose }: CustomTranslationModalProps) {
+  const { userTranslation, postUserTranslation } = useTranslation();
+
+  const defaultValues = useMemo(() => {
+    const values: Record<string, string> = {};
+    Object.keys(langEn).forEach((key) => {
+      values[toFormKey(key)] = userTranslation[key as keyof TranslationObject] || '';
+    });
+    return values;
+  }, [userTranslation]);
+
+  const {
+    handleSubmit,
+    register,
+    reset,
+    formState: { isSubmitting, isDirty, errors, isValid },
+    setError,
+  } = useForm({
+    defaultValues,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+    mode: 'onChange',
+  });
+
+  const onSubmit = async (formData: Record<string, string>) => {
+    try {
+      const translationData: Record<string, string> = {};
+      Object.keys(formData).forEach((key) => {
+        translationData[toApiKey(key)] = formData[key];
+      });
+
+      await postUserTranslation(translationData as TranslationObject);
+      reset(formData);
+    } catch (error) {
+      setError('root', { message: maybeAxiosError(error) });
+    }
+  };
+
+  return (
+    <Modal
+      title='Edit custom translations'
+      isOpen={isOpen}
+      onClose={onClose}
+      showCloseButton
+      showBackdrop
+      bodyElements={
+        <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} id='custom-translations-form'>
+          <Info>
+            Provide custom translations for the public views of Ontime. <br />
+            You will need to activate this in the settings by selecting &quot;Custom&quot; as the views language.
+          </Info>
+          <Panel.ListGroup>
+            {Object.entries(langEn).map(([key, value]) => (
+              <Panel.ListItem key={key}>
+                <Panel.Field title={value} description='' error={errors[toFormKey(key)]?.message} />
+                <Input
+                  maxLength={150}
+                  {...register(toFormKey(key), {
+                    required: 'This field is required',
+                  })}
+                  placeholder={value}
+                />
+              </Panel.ListItem>
+            ))}
+          </Panel.ListGroup>
+        </Panel.Section>
+      }
+      footerElements={
+        <div>
+          {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+          <Panel.InlineElements align='apart'>
+            <Panel.InlineElements>
+              <Button size='large' onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                variant='primary'
+                size='large'
+                type='submit'
+                form='custom-translations-form'
+                disabled={isSubmitting || !isDirty || !isValid}
+                loading={isSubmitting}
+              >
+                Save changes
+              </Button>
+            </Panel.InlineElements>
+          </Panel.InlineElements>
+        </div>
+      }
+    />
+  );
+}
+
+function toFormKey(key: string) {
+  return key.replace('.', '_');
+}
+
+function toApiKey(key: string) {
+  return key.replace('_', '.');
+}

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

@@ -31,7 +31,7 @@ const staticOptions = [
   },
   {
     id: 'manage',
-    label: 'Project data',
+    label: 'Project settings',
     secondary: [
       { id: 'manage__defaults', label: 'Rundown defaults' },
       { id: 'manage__custom', label: 'Custom fields' },

apps/client/src/features/keep-awake/KeepAwake.tsx

@@ -0,0 +1,84 @@
+import { use, useCallback, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router';
+
+import { PresetContext } from '../../common/context/PresetContext';
+
+/** @url https://developer.mozilla.org/en-US/docs/Web/API/WakeLock */
+export default function KeepAwake() {
+  const { keepAwake } = useKeepAwakeOptions();
+  const [wakeLockSentinel, setWakeLockSentinel] = useState<WakeLockSentinel | null>(null);
+
+  const removeLock = () => {
+    if (wakeLockSentinel) wakeLockSentinel.release().finally(() => setWakeLockSentinel(null));
+  };
+
+  const acquireLock = () => {
+    if (!wakeLockSentinel || wakeLockSentinel.released) {
+      setWakeLockSentinel(null);
+      navigator.wakeLock
+        .request('screen')
+        .then((sentinel) => {
+          setWakeLockSentinel(sentinel);
+        })
+        .catch(console.error);
+    }
+  };
+
+  useEffect(() => {
+    const controller = new AbortController();
+    if (keepAwake) {
+      acquireLock();
+      document.addEventListener(
+        'visibilitychange',
+        () => {
+          if (wakeLockSentinel !== null && document.visibilityState === 'visible') {
+            acquireLock();
+          }
+        },
+        { signal: controller.signal },
+      );
+    } else {
+      removeLock();
+    }
+
+    return () => {
+      controller.abort();
+      removeLock();
+    };
+  }, [keepAwake]);
+
+  return <></>;
+}
+
+const keepAwakeKey = 'keep-awake';
+
+function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URLSearchParams) {
+  // Helper to get value from either source, prioritizing defaultValues
+  return defaultValues?.has(keepAwakeKey) || searchParams.has(keepAwakeKey);
+}
+
+/**
+ * Hook exposes the keep awake options
+ */
+export function useKeepAwakeOptions() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  const keepAwake = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
+  const toggleKeepAwake = useCallback(() => {
+    setSearchParams((searchParams) => {
+      if (keepAwake) {
+        searchParams.delete(keepAwakeKey);
+      } else {
+        searchParams.set(keepAwakeKey, '1');
+      }
+      return searchParams;
+    });
+  }, [keepAwake]);
+
+  return { keepAwake, toggleKeepAwake };
+}

apps/client/src/features/operator/Operator.tsx

@@ -8,7 +8,7 @@ import { useSelectedEventId } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import useRundown from '../../common/hooks-query/useRundown';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
@@ -21,14 +21,14 @@ import OperatorGroup from './operator-group/OperatorGroup';
 import StatusBar from './status-bar/StatusBar';
 import { getOperatorOptions, useOperatorOptions } from './operator.options';
 import type { EditEvent } from './operator.types';
-import { getEventData, makeOperatorMetadata } from './operator.utils';
+import { getEventData } from './operator.utils';
 
 import style from './Operator.module.scss';
 
 const selectedOffset = 50;
 
 export default function Operator() {
-  const { data, status } = useRundown();
+  const { data, rundownMetadata, status } = useRundownWithMetadata();
   const { data: customFields, status: customFieldStatus } = useCustomFields();
   const { data: projectData, status: projectDataStatus } = useProjectData();
 
@@ -49,6 +49,7 @@ export default function Operator() {
     scrollRef,
     doFollow: !lockAutoScroll,
     topOffset: selectedOffset,
+    followTrigger: selectedEventId,
   });
 
   useWindowTitle('Operator');
@@ -112,7 +113,6 @@ export default function Operator() {
   }
 
   const canEdit = shouldEdit && subscribe.length;
-  const { process } = makeOperatorMetadata(selectedEventId);
 
   return (
     <div className={style.operatorContainer} data-testid='operator-view'>
@@ -129,8 +129,7 @@ export default function Operator() {
         {data.order.map((entryId) => {
           const entry = data.entries[entryId];
           if (isOntimeEvent(entry)) {
-            const { isPast, isSelected, isLinkedToLoaded, totalGap } = process(entry);
-
+            const { isPast, isLinkedToLoaded, isLoaded, totalGap } = rundownMetadata[entryId];
             // hide past events (if setting) and skipped events
             if ((hidePast && isPast) || entry.skip) {
               return null;
@@ -157,9 +156,9 @@ export default function Operator() {
                 delay={entry.delay}
                 dayOffset={entry.dayOffset}
                 isLinkedToLoaded={isLinkedToLoaded}
-                isSelected={isSelected}
+                isSelected={isLoaded}
                 isPast={isPast}
-                selectedRef={isSelected ? selectedRef : undefined}
+                selectedRef={isLoaded ? selectedRef : undefined}
                 showStart={showStart}
                 subscribed={subscribedData}
                 totalGap={totalGap}
@@ -178,10 +177,10 @@ export default function Operator() {
                     return null;
                   }
 
-                  const { isPast, isSelected, isLinkedToLoaded, totalGap } = process(nestedEntry);
+                  const { isPast, isLoaded, isLinkedToLoaded, totalGap } = rundownMetadata[entryId];
 
                   // hide past events (if setting) and skipped events
-                  if (hidePast && isPast) {
+                  if ((hidePast && isPast) || nestedEntry.skip) {
                     return null;
                   }
 
@@ -206,9 +205,9 @@ export default function Operator() {
                       delay={nestedEntry.delay}
                       dayOffset={nestedEntry.dayOffset}
                       isLinkedToLoaded={isLinkedToLoaded}
-                      isSelected={isSelected}
+                      isSelected={isLoaded}
                       isPast={isPast}
-                      selectedRef={isSelected ? selectedRef : undefined}
+                      selectedRef={isLoaded ? selectedRef : undefined}
                       showStart={showStart}
                       subscribed={subscribedData}
                       totalGap={totalGap}

apps/client/src/features/operator/__tests__/operator.utils.test.ts

@@ -1,83 +0,0 @@
-import { OntimeEvent } from 'ontime-types';
-
-import { makeOperatorMetadata } from '../operator.utils';
-
-describe('makeOperatorMetadata()', () => {
-  it('should track past, selected states, gaps and linking', () => {
-    const event1 = { id: 'event1', gap: 5, linkStart: false } as OntimeEvent;
-    const event2 = { id: 'event2', gap: 10, linkStart: true } as OntimeEvent;
-    const event3 = { id: 'event3', gap: 15, linkStart: true } as OntimeEvent;
-    const { process } = makeOperatorMetadata('event2');
-
-    expect(process(event1)).toEqual({
-      isPast: true,
-      isSelected: false,
-      totalGap: 5,
-      isLinkedToLoaded: false,
-    });
-    expect(process(event2)).toEqual({
-      isPast: false,
-      isSelected: true,
-      totalGap: 15,
-      isLinkedToLoaded: false,
-    });
-    expect(process(event3)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 30,
-      isLinkedToLoaded: true,
-    });
-  });
-
-  it('should handle null selectedId', () => {
-    const event1 = { id: 'event1', gap: 5, linkStart: true } as OntimeEvent;
-    const event2 = { id: 'event2', gap: 10, linkStart: false } as OntimeEvent;
-    const event3 = { id: 'event3', gap: 15, linkStart: true } as OntimeEvent;
-    const { process } = makeOperatorMetadata(null);
-
-    expect(process(event1)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 5,
-      isLinkedToLoaded: true,
-    });
-    expect(process(event2)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 15,
-      isLinkedToLoaded: false,
-    });
-    expect(process(event3)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 30,
-      isLinkedToLoaded: true,
-    });
-  });
-
-  it('should break linking chain on countToEnd events', () => {
-    const event1 = { id: 'event1', gap: 5, linkStart: true, countToEnd: false } as OntimeEvent;
-    const event2 = { id: 'event2', gap: 10, linkStart: true, countToEnd: true } as OntimeEvent;
-    const event3 = { id: 'event3', gap: 15, linkStart: true, countToEnd: false } as OntimeEvent;
-    const { process } = makeOperatorMetadata(null);
-
-    expect(process(event1)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 5,
-      isLinkedToLoaded: true,
-    });
-    expect(process(event2)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 15,
-      isLinkedToLoaded: true,
-    });
-    expect(process(event3)).toEqual({
-      isPast: false,
-      isSelected: false,
-      totalGap: 30,
-      isLinkedToLoaded: false,
-    });
-  });
-});

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -71,7 +71,7 @@ function OperatorEvent({
   ]);
 
   return (
-    <div className={operatorClasses} ref={selectedRef} onContextMenu={handleLongPress} {...mouseHandlers}>
+    <div className={operatorClasses} data-testid={cue} ref={selectedRef} onContextMenu={handleLongPress} {...mouseHandlers}>
       <div className={style.binder} style={{ ...cueColours }}>
         <span className={style.cue}>{cue}</span>
       </div>
@@ -167,5 +167,5 @@ function TimeUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
   const isDue = timeUntil < MILLIS_PER_SECOND;
   const timeUntilString = isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`;
 
-  return <span className={style.timeUntil}>{timeUntilString}</span>;
+  return <span className={style.timeUntil} data-testid='time-until'>{timeUntilString}</span>;
 }

apps/client/src/features/operator/operator.options.tsx

@@ -13,6 +13,7 @@ import { isStringBoolean } from '../viewers/common/viewUtils';
 
 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
   const fieldOptions = makeOptionsFromCustomFields(customFields, [
+    { value: 'none', label: 'None' },
     { value: 'title', label: 'Title' },
     { value: 'note', label: 'Note' },
   ]);
@@ -38,7 +39,7 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
           description: 'Field to be shown in the second line of text',
           type: 'option',
           values: fieldOptions,
-          defaultValue: '',
+          defaultValue: 'none',
         },
         {
           id: 'subscribe',

apps/client/src/features/operator/operator.utils.ts

@@ -1,74 +1,33 @@
-import { CustomFields, EntryId, MaybeString, OntimeEvent } from 'ontime-types';
-
-import { getPropertyValue } from '../viewers/common/viewUtils';
-
-import type { Subscribed } from './operator.types';
-
-type OperatorMetadata = {
-  isLinkedToLoaded: boolean;
-  isPast: boolean;
-  isSelected: boolean;
-  totalGap: number;
-};
-
-export function makeOperatorMetadata(selectedId: EntryId | null) {
-  const hasSelection = Boolean(selectedId);
-  let hasSeenSelected = false;
-  let totalGap = 0;
-  /** if the event can link all the way back to the currently playing event */
-  let isLinkedToLoaded = false;
-  let previousEvent: OntimeEvent | null = null;
-
-  function process(event: OntimeEvent): Readonly<OperatorMetadata> {
-    const isSelected = event.id === selectedId;
-    if (isSelected) {
-      hasSeenSelected = true;
-    }
-
-    // is past if we havent yet seen the selected event
-    const isPast = hasSelection && !hasSeenSelected;
-    totalGap += event.gap;
-
-    if (!isPast && !isSelected) {
-      /**
-       * isLinkToLoaded is a chain value that we maintain until we
-       * a) find an unlinked event
-       * b) find a countToEnd event
-       */
-      isLinkedToLoaded = event.linkStart && !previousEvent?.countToEnd;
-    }
-
-    previousEvent = event;
-    return { isPast, isSelected, totalGap, isLinkedToLoaded };
-  }
-
-  return { process };
-}
-
-export function getEventData(
-  event: OntimeEvent,
-  main: MaybeString,
-  secondary: MaybeString,
-  subscriptions: string[],
-  customFields: CustomFields,
-) {
-  const mainField = main ? getPropertyValue(event, main) ?? '' : event.title;
-  const secondaryField = getPropertyValue(event, secondary) ?? '';
-
-  // remove subscriptions that are not in customFields
-  const sanitisedSubscriptions = subscriptions.filter((field) => Object.hasOwn(customFields, field));
-  const subscribedData = sanitisedSubscriptions.reduce<Subscribed>((acc, id) => {
-    const field = customFields[id];
-    if (field) {
-      acc.push({
-        id,
-        label: field.label,
-        colour: field.colour,
-        value: event.custom[id],
-      });
-    }
-    return acc;
-  }, []);
-
-  return { mainField, secondaryField, subscribedData };
-}
+import { CustomFields, MaybeString, OntimeEvent } from 'ontime-types';
+
+import { getPropertyValue } from '../viewers/common/viewUtils';
+
+import type { Subscribed } from './operator.types';
+
+export function getEventData(
+  event: OntimeEvent,
+  main: MaybeString,
+  secondary: MaybeString,
+  subscriptions: string[],
+  customFields: CustomFields,
+) {
+  const mainField = main ? getPropertyValue(event, main) ?? '' : event.title;
+  const secondaryField = getPropertyValue(event, secondary) ?? '';
+
+  // remove subscriptions that are not in customFields
+  const sanitisedSubscriptions = subscriptions.filter((field) => Object.hasOwn(customFields, field));
+  const subscribedData = sanitisedSubscriptions.reduce<Subscribed>((acc, id) => {
+    const field = customFields[id];
+    if (field) {
+      acc.push({
+        id,
+        label: field.label,
+        colour: field.colour,
+        value: event.custom[id],
+      });
+    }
+    return acc;
+  }, []);
+
+  return { mainField, secondaryField, subscribedData };
+}

apps/client/src/features/overview/composite/TimeElements.module.scss

@@ -47,9 +47,10 @@
 
 .daySpan {
   &::after {
-    content: '*';
+    content: "+"attr(data-day-offset);
     vertical-align: super;
-    font-size: 0.75em;
+    font-size: 0.6em;
+    letter-spacing: 0;
     color: $info-blue;
   }
 }
@@ -67,3 +68,10 @@
   font-size: calc(1rem - 2px);
   text-align: right;
 }
+
+.dueTime {
+  text-transform: capitalize;
+  font-size: 1rem;
+  letter-spacing: 0;
+  color: $playback-over;
+}

apps/client/src/features/overview/composite/TimeElements.tsx

@@ -8,30 +8,33 @@ import {
   TbFolderPin,
   TbFolderStar,
 } from 'react-icons/tb';
-import { OntimeEvent, OntimeGroup, TimerPhase, TimerType } from 'ontime-types';
-import { isPlaybackActive, millisToString } from 'ontime-utils';
+import { OffsetMode, OntimeEvent, OntimeGroup, TimerPhase, TimerType } from 'ontime-types';
+import { dayInMs, isPlaybackActive, millisToString } from 'ontime-utils';
 
 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import {
   useClock,
   useCurrentGroupId,
+  useFlagTimerOverView,
+  useGroupTimerOverView,
   useNextFlag,
-  useRundownOverview,
-  useRuntimePlaybackOverview,
+  useOffsetOverview,
+  useProgressOverview,
+  useStartTimesOverview,
   useTimer,
 } from '../../../common/hooks/useSocket';
 import { useEntry } from '../../../common/hooks-query/useRundown';
 import { getOffsetState, getOffsetText } from '../../../common/utils/offset';
 import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';
-import { calculateEndAndDaySpan, formattedTime } from '../overview.utils';
+import { calculateEndAndDaySpan, formatDueTime, formattedTime } from '../overview.utils';
 
 import { OverUnder, TimeColumn } from './TimeLayout';
 
 import style from './TimeElements.module.scss';
 
 export function StartTimes() {
-  const { plannedEnd, plannedStart, actualStart, expectedEnd } = useRundownOverview();
+  const { plannedEnd, plannedStart, actualStart, expectedEnd } = useStartTimesOverview();
 
   const plannedStartText = plannedStart === null ? timerPlaceholder : formatTime(plannedStart);
 
@@ -47,7 +50,7 @@ export function StartTimes() {
           <Tooltip text='Planned start time' render={<TbCalendarPin className={style.icon} />} />
           <span className={cx([style.time, plannedStart === null && style.muted])}>{plannedStartText}</span>
         </div>
-        <div className={style.labelledElement}>
+        <div className={style.labelledElement} data-testid='actual-start-time'>
           <Tooltip text='Actual start time' render={<TbCalendarClock className={style.icon} />} />
           <span className={cx([style.time, actualStart === null && style.muted])}>{formattedTime(actualStart)}</span>
         </div>
@@ -58,8 +61,8 @@ export function StartTimes() {
           <Tooltip text='Planned end time' render={<TbCalendarPin className={style.icon} />} />
           {maybePlannedDaySpan > 0 ? (
             <Tooltip
-              text={`Event spans over ${maybePlannedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} />}
+              text={`Rundown spans over ${maybePlannedDaySpan + 1} days`}
+              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybePlannedDaySpan} />}
             >
               {plannedEndText}
             </Tooltip>
@@ -71,8 +74,8 @@ export function StartTimes() {
           <Tooltip text='Expected end time' render={<TbCalendarStar className={style.icon} />} />
           {maybeExpectedEnd !== null && maybeExpectedDaySpan > 0 ? (
             <Tooltip
-              text={`Event spans over ${maybeExpectedDaySpan + 1} days`}
-              render={<span className={cx([style.time, style.daySpan])} />}
+              text={`Rundown spans over ${maybeExpectedDaySpan + 1} days`}
+              render={<span className={cx([style.time, style.daySpan])} data-day-offset={maybeExpectedDaySpan} />}
             >
               {formattedTime(maybeExpectedEnd)}
             </Tooltip>
@@ -96,61 +99,110 @@ export function MetadataTimes() {
   );
 }
 
-//TODO: there a some things here we still need to think about, mainly what to do whit the planed group duration in relation to the events
 function GroupTimes() {
-  const { clock, groupExpectedEnd } = useRuntimePlaybackOverview();
+  const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback } = useGroupTimerOverView();
   const { currentGroupId } = useCurrentGroupId();
   const group = useEntry(currentGroupId) as OntimeGroup | null;
 
-  // the group end time dose not encode any day offsets
-  const plannedGroupEnd = group && group.timeStart !== null ? group.timeStart + group.duration - clock : null;
-  const plannedTimeUntilGroupEnd = formattedTime(plannedGroupEnd, 3, TimerType.CountDown);
+  const active = isPlaybackActive(playback);
+
+  // the group end time dose not encode any day offsets so it is calculated with group start time and duration
+  const plannedGroupEnd = (() => {
+    if (!active) return null;
+    if (!group || group.timeStart === null) return null;
+    const normalizedClock = clock + currentDay * dayInMs;
+
+    return mode === OffsetMode.Absolute
+      ? group.timeStart + group.duration - normalizedClock
+      : actualGroupStart + group.duration - normalizedClock;
+  })();
+
+  const plannedTimeUntilGroupEnd = formatDueTime(plannedGroupEnd, 3, TimerType.CountDown);
 
   const expectedGroupEnd = groupExpectedEnd !== null ? groupExpectedEnd - clock : null;
-  const expectedTimeUntilGroupEnd = formattedTime(expectedGroupEnd, 3, TimerType.CountDown);
-
-  const groupTitle = group?.title ?? null;
+  const expectedTimeUntilGroupEnd = formatDueTime(expectedGroupEnd, 3, TimerType.CountDown);
 
   return (
     <div className={style.metadataRow}>
-      <span className={groupTitle ? style.labelTitle : style.label}>{`${groupTitle ? groupTitle : 'Group'} `}</span>
+      <span className={group?.title ? style.labelTitle : style.label}>{`${group?.title || 'Group'} `}</span>
       <div className={style.labelledElement}>
         <Tooltip text='Time to planned group end' render={<TbFolderPin className={style.icon} />} />
-        <span className={cx([style.time, !group && style.muted])}>{plannedTimeUntilGroupEnd}</span>
+        <span
+          className={cx([
+            style.time,
+            (!group || !active) && style.muted,
+            plannedTimeUntilGroupEnd === 'due' && style.dueTime,
+          ])}
+        >
+          {plannedTimeUntilGroupEnd}
+        </span>
       </div>
       <div className={style.labelledElement}>
         <Tooltip text='Time to expected group end' render={<TbFolderStar className={style.icon} />} />
-        <span className={cx([style.time, groupExpectedEnd === null && style.muted])}>{expectedTimeUntilGroupEnd}</span>
+        <span
+          className={cx([
+            style.time,
+            !groupExpectedEnd && style.muted,
+            expectedTimeUntilGroupEnd === 'due' && style.dueTime,
+          ])}
+        >
+          {expectedTimeUntilGroupEnd}
+        </span>
       </div>
     </div>
   );
 }
 
 function FlagTimes() {
-  const { clock } = useClock();
+  const { clock, mode, actualStart, plannedStart, playback, currentDay } = useFlagTimerOverView();
   const { id, expectedStart } = useNextFlag();
   const entry = useEntry(id) as OntimeEvent | null;
 
-  const plannedFlagStart = entry ? entry.timeStart - clock : null;
-  const plannedTimeUntilDisplay = formattedTime(plannedFlagStart, 3, TimerType.CountDown);
+  const active = isPlaybackActive(playback);
+
+  const plannedFlagStart = (() => {
+    if (!active) return null;
+    if (!entry) return null;
+    const normalizedTimeStart = entry.timeStart + entry.dayOffset * dayInMs;
+    const normalizedClock = clock + currentDay * dayInMs;
+    return mode === OffsetMode.Absolute
+      ? normalizedTimeStart - normalizedClock
+      : normalizedTimeStart + actualStart - plannedStart - normalizedClock;
+  })();
+
+  const plannedTimeUntilDisplay = formatDueTime(plannedFlagStart, 3, TimerType.CountDown);
 
   const expectedTimeUntil = expectedStart !== null ? expectedStart - clock : null;
-  const expectedTimeUntilDisplay = formattedTime(expectedTimeUntil, 3, TimerType.CountDown);
+  const expectedTimeUntilDisplay = formatDueTime(expectedTimeUntil, 3, TimerType.CountDown);
 
   const title = entry?.title ?? null;
 
   return (
     <div className={style.metadataRow}>
-      <span className={title ? style.labelTitle : style.label}>{`${title ? title : 'Flag'} `}</span>
+      <span className={title ? style.labelTitle : style.label}>{`${title || 'Flag'} `}</span>
       <div className={style.labelledElement}>
         <Tooltip text='Time to next flag planned start' render={<TbFlagPin className={style.icon} />} />
-        <span data-testid='flag-plannedStart' className={cx([style.time, !entry && style.muted])}>
+        <span
+          data-testid='flag-plannedStart'
+          className={cx([
+            style.time,
+            (!entry || !active) && style.muted,
+            plannedTimeUntilDisplay === 'due' && style.dueTime,
+          ])}
+        >
           {plannedTimeUntilDisplay}
         </span>
       </div>
       <div className={style.labelledElement}>
         <Tooltip text='Time to next flag expected start' render={<TbFlagStar className={style.icon} />} />
-        <span data-testid='flag-expectedStart' className={cx([style.time, expectedTimeUntil === null && style.muted])}>
+        <span
+          data-testid='flag-expectedStart'
+          className={cx([
+            style.time,
+            expectedTimeUntil === null && style.muted,
+            expectedTimeUntilDisplay === 'due' && style.dueTime,
+          ])}
+        >
           {expectedTimeUntilDisplay}
         </span>
       </div>
@@ -159,7 +211,7 @@ function FlagTimes() {
 }
 
 export function ProgressOverview() {
-  const { numEvents, selectedEventIndex } = useRuntimePlaybackOverview();
+  const { numEvents, selectedEventIndex } = useProgressOverview();
 
   const current = selectedEventIndex !== null ? selectedEventIndex + 1 : enDash;
   const progressText = numEvents ? `${current} of ${numEvents || enDash}` : enDash;
@@ -168,7 +220,7 @@ export function ProgressOverview() {
 }
 
 export function OffsetOverview() {
-  const { offset, playback } = useRuntimePlaybackOverview();
+  const { offset, playback } = useOffsetOverview();
 
   const isPlaying = isPlaybackActive(playback);
   const offsetState = getOffsetState(isPlaying ? offset : null);
@@ -179,8 +231,9 @@ export function OffsetOverview() {
 
 export function ClockOverview({ className }: { className?: string }) {
   const { clock } = useClock();
+  const formattedClock = formatTime(clock);
 
-  return <TimeColumn label='Time now' value={formattedTime(clock)} className={className} />;
+  return <TimeColumn label='Time now' value={formattedClock} className={className} />;
 }
 
 export function TimerOverview({ className }: { className?: string }) {

apps/client/src/features/overview/overview.utils.ts

@@ -3,6 +3,23 @@ import { dayInMs, millisToString } from 'ontime-utils';
 
 import { timerPlaceholder, timerPlaceholderMin } from '../../common/utils/styleUtils';
 
+/**
+ * Composition to stop negative timers from being formatted
+ * They should show a due string instead
+ *
+ * This is used for cases when a negative timer is unwanted
+ * eg: count down to a milestone
+ */
+export function formatDueTime(
+  time: MaybeNumber,
+  segments: number = 3,
+  direction?: TimerType.CountDown | TimerType.CountUp,
+  dueString = 'due',
+): string {
+  if (time !== null && time <= 0) return dueString;
+  return formattedTime(time, segments, direction);
+}
+
 /**
  * Encapsulates the logic for formatting time in overview
  */

apps/client/src/features/rundown/Rundown.tsx

@@ -37,13 +37,14 @@ import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { useEntryCopy } from '../../common/stores/entryCopyStore';
 import { cloneEvent } from '../../common/utils/clone';
+import { lastMetadataKey, RundownMetadataObject } from '../../common/utils/rundownMetadata';
 import { AppMode, sessionKeys } from '../../ontimeConfig';
 
 import QuickAddButtons from './entry-editor/quick-add-buttons/QuickAddButtons';
 import QuickAddInline from './entry-editor/quick-add-cursor/QuickAddInline';
 import RundownGroup from './rundown-group/RundownGroup';
 import RundownGroupEnd from './rundown-group/RundownGroupEnd';
-import { canDrop, makeRundownMetadata, makeSortableList } from './rundown.utils';
+import { canDrop, makeSortableList } from './rundown.utils';
 import RundownEmpty from './RundownEmpty';
 import { useEventSelection } from './useEventSelection';
 
@@ -53,13 +54,15 @@ const RundownEntry = lazy(() => import('./RundownEntry'));
 
 interface RundownProps {
   data: Rundown;
+  rundownMetadata: RundownMetadataObject;
 }
 
-export default function Rundown({ data }: RundownProps) {
+export default function Rundown({ data, rundownMetadata }: RundownProps) {
   const { order, entries, id } = data;
   // we create a copy of the rundown with a data structured aligned with what dnd-kit needs
   const featureData = useRundownEditor();
   const [sortableData, setSortableData] = useState<EntryId[]>(() => makeSortableList(order, entries));
+  const [metadata, setMetadata] = useState(rundownMetadata);
   const [collapsedGroups, setCollapsedGroups] = useSessionStorage<EntryId[]>({
     // we ensure that this is unique to the rundown
     key: `rundown.${id}-editor-collapsed-groups`,
@@ -79,7 +82,12 @@ export default function Rundown({ data }: RundownProps) {
 
   const cursorRef = useRef<HTMLDivElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
-  useFollowComponent({ followRef: cursorRef, scrollRef, doFollow: editorMode === AppMode.Run });
+  useFollowComponent({
+    followRef: cursorRef,
+    scrollRef,
+    doFollow: true,
+    followTrigger: editorMode === AppMode.Edit ? cursor : featureData?.selectedEventId,
+  });
 
   // DND KIT
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
@@ -306,9 +314,10 @@ export default function Rundown({ data }: RundownProps) {
   // to workaround async updates on the drag mutations
   useEffect(() => {
     setSortableData(makeSortableList(order, entries));
-  }, [order, entries]);
+    setMetadata(rundownMetadata);
+  }, [order, entries, rundownMetadata]);
 
-  // in run mode, we follow selection
+  // in run mode, we follow the playback selection and open groups as needed
   useEffect(() => {
     if (editorMode !== AppMode.Run || !featureData?.selectedEventId) {
       return;
@@ -334,19 +343,24 @@ export default function Rundown({ data }: RundownProps) {
       return;
     }
 
-    // prevent dropping a group inside another
-    if (
-      active.data.current?.type === SupportedEntry.Group &&
-      !canDrop(over.data.current?.type, over.data.current?.parent)
-    ) {
+    if (!active.data.current || !over.data.current) {
       return;
     }
 
-    const fromIndex = active.data.current?.sortable.index;
-    const toIndex = over.data.current?.sortable.index;
+    const fromIndex: number = active.data.current.sortable.index;
+    const toIndex: number = over.data.current.sortable.index;
+    let placement: 'before' | 'after' | 'insert' = fromIndex < toIndex ? 'after' : 'before';
 
     let destinationId = over.id as EntryId;
-    let order: 'before' | 'after' | 'insert' = fromIndex < toIndex ? 'after' : 'before';
+    const isDraggingGroup = active.data.current?.type === SupportedEntry.Group;
+
+    // prevent dropping a group inside another
+    if (
+      isDraggingGroup &&
+      !canDrop(over.data.current.type, over.data.current.parent, placement, getIsCollapsed(destinationId))
+    ) {
+      return;
+    }
 
     /**
      * We need to specially handle the end-group
@@ -357,16 +371,25 @@ export default function Rundown({ data }: RundownProps) {
     if (destinationId.startsWith('end-')) {
       destinationId = destinationId.replace('end-', '');
       // if we are moving before the end, we use the insert operation
-      if (order === 'before') {
-        order = 'insert';
+      if (placement === 'before') {
+        placement = 'insert';
       }
     } else {
       const group = data.entries[destinationId];
-      if (isOntimeGroup(group) && order === 'after') {
-        if (group.entries.length === 0) order = 'insert';
-        else {
+      // if dragging into a group
+      if (isOntimeGroup(group) && placement === 'after') {
+        if (isDraggingGroup) {
+          // ... and the dragged entry is a group, we know that the group is collapsed, because of the safe check canDrop from before
+          // so we can safely push the dragged event after the group
+          destinationId = group.id;
+        } else if (group.entries.length === 0) {
+          // ... and the group is entry, we insert
+          destinationId = group.id;
+          placement = 'insert';
+        } else {
+          // otherwise we add it to before the first group child
           destinationId = group.entries[0];
-          order = 'before';
+          placement = 'before';
         }
       }
     }
@@ -377,7 +400,7 @@ export default function Rundown({ data }: RundownProps) {
     setSortableData((currentEntries) => {
       return reorderArray(currentEntries, fromIndex, toIndex);
     });
-    reorderEntry(active.id as EntryId, destinationId, order).catch((_) => {
+    reorderEntry(active.id as EntryId, destinationId, placement).catch((_) => {
       setSortableData(currentEntries);
     });
   };
@@ -418,11 +441,6 @@ export default function Rundown({ data }: RundownProps) {
   // 1. gather presentation options
   const isEditMode = editorMode === AppMode.Edit;
 
-  // 2. initialise rundown metadata
-  const { metadata, process } = makeRundownMetadata(featureData?.selectedEventId);
-  // keep a single reference to the metadata which we override for every entry
-  let rundownMetadata = metadata;
-
   return (
     <div className={style.rundownContainer} ref={scrollRef} data-testid='rundown'>
       <DndContext
@@ -440,6 +458,7 @@ export default function Rundown({ data }: RundownProps) {
               if (entryId.startsWith('end-')) {
                 const parentId = entryId.split('end-')[1];
                 const isGroupCollapsed = getIsCollapsed(parentId);
+                const parentMetadata = metadata[parentId];
 
                 if (isGroupCollapsed) {
                   return null;
@@ -450,14 +469,14 @@ export default function Rundown({ data }: RundownProps) {
                 // and it does not cause the reassignment of the iteration id to the previous entry
                 return (
                   <Fragment key={entryId}>
-                    {isEditMode && rundownMetadata.groupEntries === 0 && (
+                    {isEditMode && parentMetadata?.groupEntries === 0 && (
                       <QuickAddButtons
                         previousEventId={null}
                         parentGroup={parentId}
-                        backgroundColor={rundownMetadata.groupColour}
+                        backgroundColor={parentMetadata?.groupColour}
                       />
                     )}
-                    <RundownGroupEnd key={entryId} id={entryId} colour={rundownMetadata.groupColour} />
+                    <RundownGroupEnd key={entryId} id={entryId} colour={parentMetadata?.groupColour} />
                   </Fragment>
                 );
               }
@@ -466,15 +485,14 @@ export default function Rundown({ data }: RundownProps) {
               // this means that this can be out of sync with order until the useEffect runs
               // instead of writing all the logic guards, we simply short circuit rendering here
               const entry = entries[entryId];
-              if (!entry) return null;
-
-              rundownMetadata = process(entry);
+              const entryMetadata = metadata[entryId];
+              if (!entry || !entryMetadata) return null;
 
               // if the entry has a parent, and it is collapsed, render nothing
               if (
                 entry.type !== SupportedEntry.Group &&
-                rundownMetadata.groupId !== null &&
-                getIsCollapsed(rundownMetadata.groupId)
+                entryMetadata.groupId !== null &&
+                getIsCollapsed(entryMetadata.groupId)
               ) {
                 return null;
               }
@@ -488,7 +506,7 @@ export default function Rundown({ data }: RundownProps) {
                * ie: we are inside a group, but there is no defined colour
                * we default to $gray-500 #9d9d9d
                */
-              const groupColour = rundownMetadata.groupColour === '' ? '#9d9d9d' : rundownMetadata.groupColour;
+              const groupColour = entryMetadata.groupColour === '' ? '#9d9d9d' : entryMetadata.groupColour;
 
               const isFirst = index === 0;
               const isLast = entryId === order.at(-1);
@@ -500,9 +518,8 @@ export default function Rundown({ data }: RundownProps) {
                * - when adding after, we can use the group ID directly to insert at the top of the group
                */
 
-              const parentIdForBefore =
-                rundownMetadata.thisId !== rundownMetadata.groupId ? rundownMetadata.groupId : null;
-              const parentIdForAfter = rundownMetadata.groupId;
+              const parentIdForBefore = entryMetadata.thisId !== entryMetadata.groupId ? entryMetadata.groupId : null;
+              const parentIdForAfter = entryMetadata.groupId;
 
               return (
                 <Fragment key={entry.id}>
@@ -513,7 +530,7 @@ export default function Rundown({ data }: RundownProps) {
                    * - if it is not the first entry (the buttons would be there)
                    */}
                   {isEditMode && hasCursor && !isFirst && (
-                    <QuickAddInline previousEventId={rundownMetadata.previousEntryId} parentGroup={parentIdForBefore} />
+                    <QuickAddInline placement='before' referenceEntryId={entry.id} parentGroup={parentIdForBefore} />
                   )}
                   {isOntimeGroup(entry) ? (
                     <RundownGroup
@@ -525,31 +542,29 @@ export default function Rundown({ data }: RundownProps) {
                   ) : (
                     <div
                       className={style.entryWrapper}
-                      data-testid={`entry-${rundownMetadata.eventIndex}`}
+                      data-testid={`entry-${entryMetadata.eventIndex}`}
                       style={groupColour ? { '--user-bg': groupColour } : {}}
                     >
                       {isOntimeEvent(entry) && (
                         <div className={style.entryIndex}>
                           {entry.flag && <TbFlagFilled className={style.flag} />}
-                          <div className={style.index}>{rundownMetadata.eventIndex}</div>
+                          <div className={style.index}>{entryMetadata.eventIndex}</div>
                         </div>
                       )}
                       <div className={style.entry} key={entry.id} ref={hasCursor ? cursorRef : undefined}>
                         <RundownEntry
                           type={entry.type}
-                          isPast={rundownMetadata.isPast}
-                          eventIndex={rundownMetadata.eventIndex}
+                          isPast={entryMetadata.isPast}
+                          eventIndex={entryMetadata.eventIndex}
                           data={entry}
-                          loaded={rundownMetadata.isLoaded}
+                          loaded={entryMetadata.isLoaded}
                           hasCursor={hasCursor}
                           isNext={isNext}
-                          previousEntryId={rundownMetadata.previousEntryId}
-                          previousEventId={rundownMetadata.previousEvent?.id}
-                          playback={rundownMetadata.isLoaded ? featureData.playback : undefined}
+                          isNextDay={entryMetadata.isNextDay}
+                          playback={entryMetadata.isLoaded ? featureData.playback : undefined}
                           isRolling={featureData.playback === Playback.Roll}
-                          isNextDay={rundownMetadata.isNextDay}
-                          totalGap={rundownMetadata.totalGap}
-                          isLinkedToLoaded={rundownMetadata.isLinkedToLoaded}
+                          totalGap={entryMetadata.totalGap}
+                          isLinkedToLoaded={entryMetadata.isLinkedToLoaded}
                         />
                       </div>
                     </div>
@@ -562,13 +577,16 @@ export default function Rundown({ data }: RundownProps) {
                    * - if the entry is not the group header
                    */}
                   {isEditMode && hasCursor && !isLast && (
-                    <QuickAddInline previousEventId={entry.id} parentGroup={parentIdForAfter} />
+                    <QuickAddInline placement='after' referenceEntryId={entry.id} parentGroup={parentIdForAfter} />
                   )}
                 </Fragment>
               );
             })}
             {isEditMode && (
-              <QuickAddButtons previousEventId={rundownMetadata.groupId ?? rundownMetadata.thisId} parentGroup={null} />
+              <QuickAddButtons
+                previousEventId={metadata[lastMetadataKey]?.groupId ?? metadata[lastMetadataKey].thisId}
+                parentGroup={null}
+              />
             )}
             <div className={style.spacer} />
           </div>

apps/client/src/features/rundown/RundownEntry.tsx

@@ -1,9 +1,7 @@
-import { useCallback } from 'react';
 import {
   isOntimeDelay,
   isOntimeEvent,
   isOntimeMilestone,
-  MaybeString,
   OntimeEntry,
   OntimeEvent,
   Playback,
@@ -12,26 +10,11 @@ import {
 
 import { useEntryActions } from '../../common/hooks/useEntryAction';
 import useMemoisedFn from '../../common/hooks/useMemoisedFn';
-import { useEmitLog } from '../../common/stores/logger';
 import { cloneEvent } from '../../common/utils/clone';
 
 import RundownDelay from './rundown-delay/RundownDelay';
 import RundownEvent from './rundown-event/RundownEvent';
 import RundownMilestone from './rundown-milestone/RundownMilestone';
-import { useEventSelection } from './useEventSelection';
-
-export type EventItemActions =
-  | 'event'
-  | 'event-before'
-  | 'delay'
-  | 'delay-before'
-  | 'group'
-  | 'group-before'
-  | 'swap'
-  | 'delete'
-  | 'clone'
-  | 'make-group'
-  | 'update';
 
 interface RundownEntryProps {
   type: SupportedEntry;
@@ -42,8 +25,6 @@ interface RundownEntryProps {
   hasCursor: boolean;
   isNext: boolean;
   isNextDay: boolean;
-  previousEntryId: MaybeString;
-  previousEventId?: string;
   playback?: Playback; // we only care about this if this event is playing
   isRolling: boolean; // we need to know even if not related to this event
   totalGap: number;
@@ -56,8 +37,6 @@ export default function RundownEntry({
   loaded,
   hasCursor,
   isNext,
-  previousEntryId,
-  previousEventId,
   playback,
   isRolling,
   eventIndex,
@@ -65,105 +44,11 @@ export default function RundownEntry({
   totalGap,
   isLinkedToLoaded,
 }: RundownEntryProps) {
-  const { emitError } = useEmitLog();
-  const { addEntry, updateEntry, batchUpdateEvents, deleteEntry, groupEntries, swapEvents } = useEntryActions();
-  const { selectedEvents, unselect, clearSelectedEvents } = useEventSelection();
+  const { addEntry } = useEntryActions();
 
-  const removeOpenEvent = useCallback(() => {
-    unselect(data.id);
-  }, [unselect, data.id]);
-
-  const clearMultiSelection = useCallback(() => {
-    clearSelectedEvents();
-  }, [clearSelectedEvents]);
-
-  // Create / delete new events
-  type FieldValue = {
-    field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
-    value: unknown;
-  };
-
-  const actionHandler = useMemoisedFn((action: EventItemActions, payload?: number | FieldValue) => {
-    switch (action) {
-      case 'event': {
-        const newEvent = { type: SupportedEntry.Event };
-        const options = {
-          after: data.id,
-          lastEventId: previousEventId,
-        };
-        return addEntry(newEvent, options);
-      }
-      case 'event-before': {
-        const newEvent = { type: SupportedEntry.Event };
-        const options = {
-          after: previousEntryId,
-        };
-        return addEntry(newEvent, options);
-      }
-      case 'delay': {
-        return addEntry({ type: SupportedEntry.Delay }, { after: data.id });
-      }
-      case 'delay-before': {
-        return addEntry({ type: SupportedEntry.Delay }, { after: previousEntryId });
-      }
-      case 'group': {
-        return addEntry({ type: SupportedEntry.Group }, { after: data.id });
-      }
-      case 'group-before': {
-        return addEntry({ type: SupportedEntry.Group }, { after: previousEntryId });
-      }
-      case 'swap': {
-        const { value } = payload as FieldValue;
-        return swapEvents({ from: value as string, to: data.id });
-      }
-      case 'delete': {
-        if (selectedEvents.size > 1) {
-          clearMultiSelection();
-          return deleteEntry(Array.from(selectedEvents));
-        }
-        removeOpenEvent();
-        return deleteEntry([data.id]);
-      }
-      case 'clone': {
-        const newEvent = cloneEvent(data as OntimeEvent);
-        addEntry(newEvent, { after: data.id });
-        break;
-      }
-      case 'make-group': {
-        if (selectedEvents.size > 1) {
-          clearMultiSelection();
-          return groupEntries(Array.from(selectedEvents));
-        }
-        break;
-      }
-      case 'update': {
-        // Handles and filters update requests
-        const { field, value } = payload as FieldValue;
-        if (field === undefined || value === undefined) {
-          return;
-        }
-        const newData: Partial<OntimeEvent> = { id: data.id };
-
-        // if selected events are more than one
-        // we need to bulk edit
-        if (selectedEvents.size > 1) {
-          const changes: Partial<OntimeEvent> = { [field]: value };
-          batchUpdateEvents(changes, Array.from(selectedEvents));
-          return;
-        }
-        if (field in data) {
-          // @ts-expect-error -- not sure how to type this
-          newData[field] = value;
-          return updateEntry(newData);
-        }
-
-        return emitError(`Unknown field: ${field}`);
-      }
-      default: {
-        action satisfies never;
-        throw new Error(`Unhandled event ${action}`);
-      }
-    }
+  const createCloneEvent = useMemoisedFn(() => {
+    const newEvent = cloneEvent(data as OntimeEvent);
+    addEntry(newEvent, { after: data.id });
   });
 
   if (isOntimeEvent(data)) {
@@ -198,7 +83,7 @@ export default function RundownEntry({
         dayOffset={data.dayOffset}
         totalGap={totalGap}
         isLinkedToLoaded={isLinkedToLoaded}
-        actionHandler={actionHandler}
+        createCloneEvent={createCloneEvent}
         hasTriggers={data.triggers.length > 0}
       />
     );

apps/client/src/features/rundown/RundownExport.module.scss

@@ -28,20 +28,22 @@
   padding-inline: 0;
   box-shadow: $box-shadow-right;
 
-  flex: 1 2 auto; /* flex-grow: 1, flex-shrink: 2, flex-basis: auto */
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
   min-width: 38rem;
-  max-width: 60rem;
+  max-width: none;
+  width: 0;
 }
 
 .side {
   max-height: 100%;
-  max-width: 45rem;
   margin: 0.5rem 0;
   padding: 1rem;
   padding-right: 0;
   background-color: $gray-1325;
   border-radius: 0 8px 8px 0;
 
-  flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
-  max-width: 45rem;
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
+  // width is locked to swatch picker elements
+  min-width: calc(15 * 2rem + 13 * 0.5rem);
+  width: 0;
 }

apps/client/src/features/rundown/RundownWrapper.tsx

@@ -1,5 +1,5 @@
 import Empty from '../../common/components/state/Empty';
-import useRundown from '../../common/hooks-query/useRundown';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 
 import RundownHeader from './rundown-header/RundownHeader';
 import RundownHeaderMobile from './rundown-header/RundownHeaderMobile';
@@ -12,12 +12,16 @@ interface RundownWrapperProps {
 }
 
 export default function RundownWrapper({ isSmallDevice }: RundownWrapperProps) {
-  const { data, status } = useRundown();
+  const { data, status, rundownMetadata } = useRundownWithMetadata();
 
   return (
     <div className={styles.rundownWrapper}>
       {isSmallDevice ? <RundownHeaderMobile /> : <RundownHeader />}
-      {status === 'success' && data ? <Rundown data={data} /> : <Empty text='Connecting to server' />}
+      {status === 'success' && data && rundownMetadata ? (
+        <Rundown data={data} rundownMetadata={rundownMetadata} />
+      ) : (
+        <Empty text='Connecting to server' />
+      )}
     </div>
   );
 }

apps/client/src/features/rundown/__tests__/rundown.utils.test.ts

@@ -1,293 +1,6 @@
-import { EntryId, OntimeDelay, OntimeEvent, OntimeGroup, RundownEntries, SupportedEntry } from 'ontime-types';
+import { EntryId, OntimeEvent, OntimeGroup, RundownEntries, SupportedEntry } from 'ontime-types';
 
-import { makeRundownMetadata, makeSortableList, moveDown, moveUp, orderEntries } from '../rundown.utils';
-
-describe('makeRundownMetadata()', () => {
-  it('processes nested rundown data', () => {
-    const selectedEventId = '12';
-    const demoEvents = {
-      '1': {
-        id: '1',
-        type: SupportedEntry.Event,
-        parent: null,
-        timeStart: 0,
-        timeEnd: 1,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-      group: {
-        id: 'group',
-        type: SupportedEntry.Group,
-        entries: ['11', 'delay', '12', '13'],
-        colour: 'red',
-      } as OntimeGroup,
-      '11': {
-        id: '11',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 10,
-        timeEnd: 11,
-        duration: 1,
-        dayOffset: 0,
-        gap: 10,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-      delay: {
-        id: 'delay',
-        type: SupportedEntry.Delay,
-        parent: 'group',
-        duration: 0,
-      } as OntimeDelay,
-      '12': {
-        id: '12',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 11,
-        timeEnd: 12,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: true,
-      } as OntimeEvent,
-      '13': {
-        id: '13',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 12,
-        timeEnd: 13,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: true,
-      } as OntimeEvent,
-      '2': {
-        id: '2',
-        type: SupportedEntry.Event,
-        parent: null,
-        timeStart: 20,
-        timeEnd: 21,
-        duration: 1,
-        dayOffset: 0,
-        gap: 7,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-    };
-
-    const { metadata, process } = makeRundownMetadata(selectedEventId);
-
-    expect(metadata).toStrictEqual({
-      previousEvent: null,
-      latestEvent: null,
-      previousEntryId: null,
-      thisId: null,
-      eventIndex: 0,
-      isPast: true,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: null,
-      groupColour: undefined,
-      groupEntries: undefined,
-    });
-
-    expect(process(demoEvents['1'])).toStrictEqual({
-      previousEvent: null,
-      latestEvent: demoEvents['1'],
-      previousEntryId: null,
-      thisId: demoEvents['1'].id,
-      eventIndex: 1, // UI indexes are 1 based
-      isPast: true,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: null,
-      groupColour: undefined,
-      groupEntries: undefined,
-    });
-
-    expect(process(demoEvents['group'])).toMatchObject({
-      previousEvent: demoEvents['1'],
-      latestEvent: demoEvents['1'],
-      previousEntryId: demoEvents['1'].id,
-      thisId: demoEvents['group'].id,
-      eventIndex: 1,
-      isPast: true,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: 'group',
-      groupColour: 'red',
-    });
-
-    expect(process(demoEvents['11'])).toMatchObject({
-      previousEvent: demoEvents['1'],
-      latestEvent: demoEvents['11'],
-      previousEntryId: demoEvents['group'].id,
-      thisId: demoEvents['11'].id,
-      eventIndex: 2,
-      isPast: true,
-      isNextDay: false,
-      totalGap: 10,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: 'group',
-      groupColour: 'red',
-    });
-
-    expect(process(demoEvents['delay'])).toMatchObject({
-      previousEvent: demoEvents['11'],
-      latestEvent: demoEvents['11'],
-      previousEntryId: demoEvents['11'].id,
-      thisId: demoEvents['delay'].id,
-      eventIndex: 2,
-      isPast: true,
-      isNextDay: false,
-      totalGap: 10,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: 'group',
-      groupColour: 'red',
-    });
-
-    expect(process(demoEvents['12'])).toMatchObject({
-      previousEvent: demoEvents['11'],
-      latestEvent: demoEvents['12'],
-      previousEntryId: demoEvents['delay'].id,
-      thisId: demoEvents['12'].id,
-      eventIndex: 3,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 10,
-      isLinkedToLoaded: false,
-      isLoaded: true,
-      groupId: 'group',
-      groupColour: 'red',
-    });
-
-    expect(process(demoEvents['13'])).toMatchObject({
-      previousEvent: demoEvents['12'],
-      latestEvent: demoEvents['13'],
-      previousEntryId: demoEvents['12'].id,
-      thisId: demoEvents['13'].id,
-      eventIndex: 4,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 10,
-      isLinkedToLoaded: true,
-      isLoaded: false,
-      groupId: 'group',
-      groupColour: 'red',
-    });
-
-    expect(process(demoEvents['2'])).toMatchObject({
-      previousEvent: demoEvents['13'],
-      latestEvent: demoEvents['2'],
-      previousEntryId: demoEvents['13'].id,
-      thisId: demoEvents['2'].id,
-      eventIndex: 5,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 17,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: null,
-      groupColour: undefined,
-    });
-  });
-
-  it('populates previousEntries in groups', () => {
-    const rundownStartsWithGroup = {
-      group: {
-        id: 'group',
-        type: SupportedEntry.Group,
-        colour: 'red',
-        entries: ['1', '2'],
-      } as OntimeGroup,
-      '1': {
-        id: '1',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 1,
-        timeEnd: 2,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-      '2': {
-        id: '2',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 2,
-        timeEnd: 3,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-    };
-    const { process } = makeRundownMetadata(null);
-
-    expect(process(rundownStartsWithGroup.group)).toStrictEqual({
-      previousEvent: null,
-      latestEvent: null,
-      previousEntryId: null,
-      thisId: rundownStartsWithGroup.group.id,
-      eventIndex: 0,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: rundownStartsWithGroup.group.id,
-      groupColour: 'red',
-      groupEntries: 2,
-    });
-
-    expect(process(rundownStartsWithGroup['1'])).toStrictEqual({
-      previousEvent: null,
-      latestEvent: rundownStartsWithGroup['1'],
-      previousEntryId: rundownStartsWithGroup.group.id,
-      thisId: rundownStartsWithGroup['1'].id,
-      eventIndex: 1,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: rundownStartsWithGroup.group.id,
-      groupColour: 'red',
-      groupEntries: 2,
-    });
-    expect(process(rundownStartsWithGroup['2'])).toStrictEqual({
-      previousEvent: rundownStartsWithGroup['1'],
-      latestEvent: rundownStartsWithGroup['2'],
-      previousEntryId: rundownStartsWithGroup['1'].id,
-      thisId: rundownStartsWithGroup['2'].id,
-      eventIndex: 2,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: rundownStartsWithGroup.group.id,
-      groupColour: 'red',
-      groupEntries: 2,
-    });
-  });
-});
+import { makeSortableList, moveDown, moveUp, orderEntries } from '../rundown.utils';
 
 describe('makeSortableList()', () => {
   it('generates a list with group ends', () => {
@@ -327,7 +40,7 @@ describe('makeSortableList()', () => {
     expect(sortableList).toStrictEqual(['group-1', '11', '12', 'end-group-1']);
   });
 
-  it('handles a list with a with just groups', () => {
+  it('handles a list with just groups', () => {
     const order = ['group-1', 'group-2'];
     const entries: RundownEntries = {
       'group-1': { type: SupportedEntry.Group, id: 'group-1', entries: [] as string[] } as OntimeGroup,

apps/client/src/features/rundown/entry-editor/CuesheetEventEditor.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
-import { isOntimeEvent, isOntimeGroup, OntimeEntry } from 'ontime-types';
+import { isOntimeEvent, isOntimeGroup, isOntimeMilestone, OntimeEntry } from 'ontime-types';
 
 import useRundown from '../../../common/hooks-query/useRundown';
 
 import EventEditor from './EventEditor';
 import GroupEditor from './GroupEditor';
+import MilestoneEditor from './MilestoneEditor';
 
 import style from './EntryEditor.module.scss';
 
@@ -38,6 +39,14 @@ export default function CuesheetEntryEditor({ entryId }: CuesheetEntryEditorProp
     );
   }
 
+  if (isOntimeMilestone(entry)) {
+    return (
+      <div className={style.inModal} data-testid='editor-container'>
+        <MilestoneEditor milestone={entry} />
+      </div>
+    );
+  }
+
   if (isOntimeGroup(entry)) {
     return (
       <div className={style.inModal} data-testid='editor-container'>

apps/client/src/features/rundown/entry-editor/EntryEditor.module.scss

@@ -1,10 +1,21 @@
-.entryEditor {
+.cuesheetEditor,
+.rundownEditor {
   max-height: 100%;
   display: flex;
   flex-direction: column;
   overflow-x: auto;
 }
 
+.rundownEditor {
+  // width is locked to swatch picker elements
+  min-width: calc(15 * 2rem + 13 * 0.5rem);
+
+  // we dont want a scrollbar when in the modal
+  .content {
+    overflow-y: scroll;
+  }
+}
+
 .content {
   padding-inline: 0.5rem 1.5rem;
   padding-bottom: 4rem;
@@ -13,7 +24,6 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  overflow-y: scroll;
 }
 
 .timeSettings {

apps/client/src/features/rundown/entry-editor/RundownEntryEditor.tsx

@@ -52,7 +52,7 @@ export default function RundownEntryEditor() {
 
   if (isOntimeEvent(entry)) {
     return (
-      <div className={style.entryEditor} data-testid='editor-container'>
+      <div className={style.rundownEditor} data-testid='editor-container'>
         <EventEditor event={entry} />
         <EventEditorFooter id={entry.id} cue={entry.cue} />
       </div>
@@ -61,7 +61,7 @@ export default function RundownEntryEditor() {
 
   if (isOntimeMilestone(entry)) {
     return (
-      <div className={style.entryEditor} data-testid='editor-container'>
+      <div className={style.rundownEditor} data-testid='editor-container'>
         <MilestoneEditor milestone={entry} />
       </div>
     );
@@ -69,7 +69,7 @@ export default function RundownEntryEditor() {
 
   if (isOntimeGroup(entry)) {
     return (
-      <div className={style.entryEditor} data-testid='editor-container'>
+      <div className={style.rundownEditor} data-testid='editor-container'>
         <GroupEditor group={entry} />
       </div>
     );

apps/client/src/features/rundown/entry-editor/composite/EventEditorTriggers.module.scss

@@ -1,7 +1,7 @@
 .triggerForm {
   padding-block: 0.5rem;
   display: grid;
-  grid-template-columns: 1fr 1fr auto auto;
+  grid-template-columns: 8rem 1fr auto 2rem;
   gap: 0.5rem;
   align-items: center;
 }
@@ -9,7 +9,7 @@
 .trigger {
   padding: 0.25rem 0.5rem;
   display: grid;
-  grid-template-columns: 1fr 1fr auto;
+  grid-template-columns: 8rem 1fr 2rem;
   align-items: center;
 
   &:nth-child(even) {