hotfix ci (#594 )

* ci: upgrade pnpm * version bump
feat: small improvements to instance info (#591 )
2026-07-31 04:58:02 +00:00 · 2023-11-16 11:26:01 +01:00 · 2023-11-15 20:20:05 +01:00 · 2023-11-14 22:31:14 +01:00 · 2023-11-14 21:54:56 +01:00 · 2023-11-13 22:04:55 +01:00
239 changed files with 7824 additions and 4146 deletions
@@ -0,0 +1 @@
+ "ONTIME_VERSION.js"
@@ -1,4 +1,5 @@
 {
+  "root": true,
  "parserOptions": {
    "ecmaVersion": 2020
  },
@@ -6,8 +7,16 @@
    "es6": true,
    "jest": true
  },
+  "parser": "@typescript-eslint/parser",
  "extends": [
-    "eslint:recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "eslint-config-prettier"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
  ],
  "overrides": [
    {
@@ -21,6 +30,33 @@
    }
  ],
  "rules": {
-    "no-console": "warn"
+    "no-useless-concat": "warn",
+    "prefer-template": "warn",
+    "no-console": [
+      "warn",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "prettier/prettier": [
+      "warn",
+      {
+        "endOfLine": "auto"
+      }
+    ]
  }
 }
@@ -16,17 +16,17 @@ jobs:
    - uses: actions/checkout@v3
    - name: Setup env
      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      
+
    - name: Setup Node.js environment
      uses: actions/setup-node@v3.6.0
      with:
        version: 16.16.0
-        
+
    - name: Setup pnpm
-      uses: pnpm/action-setup@v2.2.4
+      uses: pnpm/action-setup@v2
      with:
-        version: 7.26.3
-          
+        version: 8
+
    - name: Install dependencies
      run: pnpm install --frozen-lockfile

@@ -34,7 +34,7 @@ jobs:
      env:
        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
      run: pnpm turbo build:docker
-        
+
    - name: Docker Login
      uses: docker/login-action@v2.1.0
      with:
@@ -17,9 +17,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -52,9 +52,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -85,9 +85,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -20,23 +20,47 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

+      # Run code quality per package
+      - name: React - Run linter
+        if: always()
+        run: pnpm lint
+        working-directory: ./apps/client
+
+      - name: Server - Run linter
+        if: always()
+        run: pnpm lint
+        working-directory: ./apps/server
+
+      - name: Utils - Run linter
+        if: always()
+        run: pnpm lint
+        working-directory: ./packages/utils
+
+      - name: Types - Run linter
+        if: always()
+        run: pnpm lint
+        working-directory: ./packages/types
+
      # We choose to run tests separately
      - name: React - 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

@@ -52,9 +76,9 @@ jobs:
          node-version: 16

      - name: Setup pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v2
        with:
-          version: 7.26.3
+          version: 8

      - name: Install dependencies
        run: pnpm install --frozen-lockfile
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint
@@ -0,0 +1,10 @@
+build
+coverage
+dist
+node_modules
+
+playwright-report
+
+**/*.toml
+**/*.yml
+**/*.json
@@ -1,4 +1,5 @@
 {
+  "endOfLine": "lf",
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
@@ -56,6 +56,8 @@ E2E tests are in a separate package. On running, [playwright](https://playwright
 webserver to test against
 These tests also run against a separate version of the DB (test-db)

+Before running the E2E, you should first build the project with `pnpm build:local`.
+
 You can run playwright tests from project root with `pnpm e2e`

 When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually
@@ -14,10 +14,11 @@

 Ontime is an application for creating and managing event running order and timers.

-The user inputs a list of events along with scheduling and event information. 
+The user inputs a list of events along with scheduling and event information.
 This will then populate a series of screens which are available to be rendered by any device in the Network.

-This makes for a simple and cheap way to distribute over a venue using a network infrastructure instead of video outputs.
+This makes for a simple and cheap way to distribute over a venue using a network infrastructure instead of video
+outputs.

 ![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.png)

@@ -28,7 +29,7 @@ This makes for a simple and cheap way to distribute over a venue using a network
 Once installed and running, Ontime starts a background server that is the heart of all processes.
 From the app, you can add / edit your running order and control the timer playback.

-Any device with a browser in the same network can choose one of the supported views to render the available data. 
+Any device with a browser in the same network can choose one of the supported views to render the available data.
 This is done by reaching the ontime server at the _default port 4001_ eg: `localhost:4001`
 or `192.168.1.3:4001`
 <br />
@@ -50,8 +51,9 @@ IP.ADDRESS:4001/public     > Public / Foyer view
 IP.ADDRESS:4001/lower      > Lower Thirds
 IP.ADDRESS:4001/studio     > Studio Clock
 ```
+
 ```
-For management views 
+For management views
 -------------------------------------------------------------
 IP.ADDRESS:4001/editor    > the control interface, same as the app
 IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
@@ -63,14 +65,14 @@ More documentation is available [in our docs](https://ontime.gitbook.io)

 - [x] Distribute data over network and render it in the browser
 - [x] Different screen types
-    - Stage Timer
-    - Minimal Timer
-    - Clock
-    - Backstage Info
-    - Public Info
-    - Studio Clock
-    - Countdown
-    - [Make your own?](#make-your-own-viewer)
+  - Stage Timer
+  - Minimal Timer
+  - Clock
+  - Backstage Info
+  - Public Info
+  - Studio Clock
+  - Countdown
+  - [Make your own?](#make-your-own-viewer)
 - [x] Configurable Lower Thirds
 - [x] Collaborative editing with the cuesheet view
 - [x] Send live messages to different screen types
@@ -83,17 +85,19 @@ More documentation is available [in our docs](https://ontime.gitbook.io)
 - [x] Roll mode: run standalone using the system clock
 - [x] [Headless run](#headless-run): run server in a separate machine, configure from a browser locally
 - [x] [Countdown to anything!](https://ontime.gitbook.io/v2/views/countdown): have
-  a countdown to any scheduled event
- [x] Multi-platform  (available on Windows, MacOS and Linux)
+      a countdown to any scheduled event
+- [x] Multi-platform (available on Windows, MacOS and Linux)
 - [x] [Companion integration](https://bitfocus.io/connections/getontime-ontime)

 ## Unopinionated

-We want Ontime to be unique by targeting freelancers instead of roles. 
+We want Ontime to be unique by targeting freelancers instead of roles.

-We believe most freelancers work in different fields and we want to give you a tool that you can leverage across your many environments and workflows.
+We believe most freelancers work in different fields and we want to give you a tool that you can leverage across your
+many environments and workflows.

-We are not interested in forcing workflows and have made Ontime so, it is flexible to whichever way you would like to work.
+We are not interested in forcing workflows and have made Ontime so, it is flexible to whichever way you would like to
+work.

 ## Rich APIs for workflow integrations

@@ -113,7 +117,8 @@ Taking advantage of the integrations, we currently use Ontime with:

 Ontime broadcasts its data over WebSockets. This allows you to consume its data outside the application.

-Writing a new view for the browser can be done with basic knowledge of HTML + CSS + Javascript (or any other language that can run in the browser).
+Writing a new view for the browser can be done with basic knowledge of HTML + CSS + Javascript (or any other language
+that can run in the browser).
 <br />
 See [this repository](https://github.com/cpvalente/ontime-viewer-template-v2) with a small template on
 how to get you started and read the docs about
@@ -121,26 +126,11 @@ the [Websocket API](https://ontime.gitbook.io/v2/control-and-feedback/ontime-api

 ### Headless run️

-You can self-host and run Ontime in a docker image. The run command will:
+You can self-host and run Ontime in a docker image.

- expose the necessary ports (listed in the Dockerfile)
- mount a local file to persist your data (in the example: ````$(pwd)/local-data````)
- the image name __getontime/ontime__
+The docker image along with documentation is [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)

-The docker image is
-in [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
-
-```bash
-docker pull getontime/ontime
-```
-
-and use the included docker compose to get started
-
-```bash
-docker-compose up
-```
-
-Related information available [in the docs](https://ontime.gitbook.io/v2/additional-notes/use-in-raspberry-pi)
+If you want to run this image in a Raspberry Pi, please see [the docs](https://ontime.gitbook.io/v2/additional-notes/use-in-raspberry-pi)

 ## Roadmap

@@ -148,32 +138,32 @@ Related information available [in the docs](https://ontime.gitbook.io/v2/additio

 Several features are planned in the roadmap, and we continuously adjust this to match how users interact with the app.
 <br />
-Have an idea? Reach out via [email](mail@getontime.no) or [open an issue](https://github.com/cpvalente/ontime/issues/new)
+Have an idea? Reach out via [email](mail@getontime.no)
+or [open an issue](https://github.com/cpvalente/ontime/issues/new)

 ### Issues

 We use Github's issue tracking for bug reporting and feature requests. <br />
-Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new). 
+Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new).

 #### Unsigned App

 When installing the app you would see warning screens from the Operating System like:

-```Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.```
+`Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.`

 or

-```Ontime can't be opened because it is from an unidentified developer```
+`Ontime can't be opened because it is from an unidentified developer`

 or in Linux

-```Could Not Display "ontime-linux.AppImage```
+`Could Not Display "ontime-linux.AppImage`

 You can circumvent this by allowing the execution of the app manually.

 - In Windows: click more and select "Run Anyway"
- in macOS: after attempting to run the installer, navigate to System Preferences ->  Security &
-  Privacy and allow the execution of the app
+- in macOS: the solution in macOS is different across versions, please refer to the [apple documentation](https://support.apple.com/en-gb/guide/mac-help/mh40616/mac)
 - In Linux: right-click the AppImage file -> Properties -> Permissions -> select Allow Executing
  File as a Program

@@ -185,6 +175,7 @@ please [open an issue](https://github.com/cpvalente/ontime/issues/new)
 #### Safari

 There are known issues with Safari versions lower than 13:
+
 - Spacing and text styles might have small inconsistencies
 - Table view does not work

@@ -194,7 +185,8 @@ There is no plan for any further work on this.

 Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
 <br /><br />
-If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a Pull Request.
+If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a
+Pull Request.
 <br />
 Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)

@@ -8,34 +8,18 @@
    "browser": true,
    "node": true
  },
-  "parser": "@typescript-eslint/parser",
  "extends": [
-    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "eslint-config-prettier",
-    "plugin:@tanstack/eslint-plugin-query/recommended",
-    "prettier"
+    "plugin:@tanstack/eslint-plugin-query/recommended"
  ],
  "plugins": [
    "react",
    "testing-library",
    "simple-import-sort",
-    "@tanstack/query",
-    "@typescript-eslint",
-    "prettier"
+    "@tanstack/query"
  ],
  "rules": {
-    "@typescript-eslint/no-non-null-assertion": "warn",
-    "prettier/prettier": [
-      "error",
-      {
-        "endOfLine": "auto"
-      }
-    ],
-    "no-useless-concat": "warn",
-    "prefer-template": "warn",
    "react/jsx-no-bind": [
      "error",
      {
@@ -1,4 +1,5 @@
 {
+  "endOfLine": "lf",
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "2.7.2",
+  "version": "2.16.2",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.7.0",
@@ -39,7 +39,7 @@
    "build": "vite build",
    "build:local": "cross-env NODE_ENV=local vite build",
    "build:docker": "vite build",
-    "lint": "eslint .",
+    "lint": "eslint . --quiet",
    "test": "vitest",
    "test:pipeline": "vitest run",
    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"
@@ -63,17 +63,16 @@
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^14.1.1",
    "@types/color": "^3.0.3",
-    "@types/luxon": "^3.2.0",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/testing-library__jest-dom": "^5.14.5",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react": "^3.0.1",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-jest": "^27.1.7",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-prettier": "^5.0.1",
    "eslint-plugin-react": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^8.0.0",
@@ -81,9 +80,9 @@
    "jsdom": "^21.1.0",
    "ontime-types": "workspace:*",
    "ontime-utils": "workspace:*",
-    "prettier": "^2.8.3",
+    "prettier": "^3.0.3",
    "sass": "^1.57.1",
-    "typescript": "^4.9.4",
+    "typescript": "^5.2.2",
    "vite": "^4.3.1",
    "vite-plugin-compression2": "^0.9.0",
    "vite-plugin-svgr": "^2.4.0",
@@ -6,6 +6,7 @@ import withData from './features/viewers/ViewWrapper';

 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
 const Cuesheet = lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
+const Operator = lazy(() => import('./features/operator/Operator'));

 const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
 const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
@@ -58,6 +59,9 @@ export default function AppRouter() {
        {/*/!* Lower cannot have fallback *!/*/}
        <Route path='/lower' element={<SLowerThird />} />

+        <Route path='/op' element={<Operator />} />
+        <Route path='/operator' element={<Operator />} />
+
        {/*/!* Protected Routes *!/*/}
        <Route path='/editor' element={<Editor />} />
        <Route path='/cuesheet' element={<Cuesheet />} />
@@ -1,5 +1,5 @@
 // REST stuff
-export const EVENT_DATA = ['eventdata'];
+export const PROJECT_DATA = ['project'];
 export const ALIASES = ['aliases'];
 export const USERFIELDS = ['userFields'];
 export const RUNDOWN_TABLE_KEY = 'rundown';
@@ -19,7 +19,7 @@ export const serverPort = isProduction ? location.port : STATIC_PORT;
 export const serverURL = `${location.protocol}//${location.hostname}:${serverPort}`;
 export const websocketUrl = `${socketProtocol}://${location.hostname}:${serverPort}/ws`;

-export const eventURL = `${serverURL}/eventdata`;
+export const projectDataURL = `${serverURL}/project`;
 export const rundownURL = `${serverURL}/events`;
 export const ontimeURL = `${serverURL}/ontime`;

@@ -2,18 +2,32 @@ import axios, { AxiosError } from 'axios';
 import { LogLevel } from 'ontime-types';
 import { generateId, millisToString } from 'ontime-utils';

+import { ontimeQueryClient } from '../queryClient';
 import { addLog } from '../stores/logger';
 import { nowInMillis } from '../utils/time';

-export function logAxiosError(prepend: string, error: unknown) {
-  let message;
+export function maybeAxiosError(error: unknown) {
  if (axios.isAxiosError(error)) {
    const statusText = (error as AxiosError).response?.statusText ?? '';
-    const data = (error as AxiosError).response?.data ?? '';
-    message = `${prepend} ${statusText}: ${data}`;
+    let data = (error as AxiosError).response?.data ?? '';
+    if (typeof data === 'object') {
+      if ('message' in data) {
+        data = JSON.stringify(data.message);
+      } else {
+        data = JSON.stringify(data);
+      }
+    }
+    return `${statusText}: ${data}`;
  } else {
-    message = `${prepend}: ${error}`;
+    if (typeof error !== 'string') {
+      return JSON.stringify(error);
+    }
+    return error;
  }
+}
+
+export function logAxiosError(prepend: string, error: unknown) {
+  const message = `${prepend}: ${maybeAxiosError(error)}`;

  addLog({
    id: generateId(),
@@ -23,3 +37,17 @@ export function logAxiosError(prepend: string, error: unknown) {
    text: message,
  });
 }
+
+/**
+ * Utility function invalidates react-query caches
+ */
+export async function invalidateAllCaches() {
+  await ontimeQueryClient.invalidateQueries(['project']);
+  await ontimeQueryClient.invalidateQueries(['aliases']);
+  await ontimeQueryClient.invalidateQueries(['userFields']);
+  await ontimeQueryClient.invalidateQueries(['rundown']);
+  await ontimeQueryClient.invalidateQueries(['appinfo']);
+  await ontimeQueryClient.invalidateQueries(['oscSettings']);
+  await ontimeQueryClient.invalidateQueries(['appSettings']);
+  await ontimeQueryClient.invalidateQueries(['viewSettings']);
+}
@@ -1,21 +0,0 @@
-import axios from 'axios';
-import { EventData } from 'ontime-types';
-
-import { eventURL } from './apiConstants';
-
-/**
- * @description HTTP request to fetch event data
- * @return {Promise}
- */
-export async function fetchEventData(): Promise<EventData> {
-  const res = await axios.get(eventURL);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate event data
- * @return {Promise}
- */
-export async function postEventData(data: EventData) {
-  return axios.post(eventURL, data);
-}
@@ -1,8 +1,20 @@
-import axios from 'axios';
-import { Alias, EventData, OSCSettings, OscSubscription, Settings, UserFields, ViewSettings } from 'ontime-types';
+import axios, { AxiosResponse } from 'axios';
+import {
+  Alias,
+  DatabaseModel,
+  GetInfo,
+  OntimeRundown,
+  OSCSettings,
+  OscSubscription,
+  ProjectData,
+  Settings,
+  UserFields,
+  ViewSettings,
+} from 'ontime-types';
+import { ExcelImportMap } from 'ontime-utils';

 import { apiRepoLatest } from '../../externals';
-import { InfoType } from '../models/Info';
+import fileDownload from '../utils/fileDownload';

 import { ontimeURL } from './apiConstants';

@@ -27,7 +39,7 @@ export async function postSettings(data: Settings) {
 * @description HTTP request to retrieve application info
 * @return {Promise}
 */
-export async function getInfo(): Promise<InfoType> {
+export async function getInfo(): Promise<GetInfo> {
  const res = await axios.get(`${ontimeURL}/info`);
  return res.data;
 }
@@ -109,45 +121,38 @@ export async function postOscSubscriptions(data: OscSubscription) {
 }

 /**
- * @description HTTP request to download db
- * @return {Promise}
+ * @description HTTP request to download db in CSV format
 */
-export const downloadRundown = async () => {
-  await axios({
-    url: `${ontimeURL}/db`,
-    method: 'GET',
-    responseType: 'blob', // important
-  }).then((response) => {
-    const headerLine = response.headers['Content-Disposition'];
-    let filename = 'rundown.json';
+export const downloadCSV = () => {
+  return fileDownload(ontimeURL, { name: 'rundown', type: 'csv' }, { type: 'text/csv;charset=utf-8;' });
+};

-    // try and get the filename from the response
-    if (headerLine != null) {
-      const startFileNameIndex = headerLine.indexOf('"') + 1;
-      const endFileNameIndex = headerLine.lastIndexOf('"');
-      filename = headerLine.substring(startFileNameIndex, endFileNameIndex);
-    }
+/**
+ * @description HTTP request to download db in JSON format
+ */
+export const downloadRundown = () => {
+  return fileDownload(ontimeURL, { name: 'rundown', type: 'json' }, { type: 'application/json;charset=utf-8;' });
+};

-    const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/json' }));
-    const link = document.createElement('a');
-    link.href = url;
-    link.setAttribute('download', filename);
-    document.body.appendChild(link);
-    link.click();
-  });
+// TODO: should this be extracted to shared code?
+export type ProjectFileImportOptions = {
+  onlyRundown: boolean;
 };

 /**
 * @description HTTP request to upload events db
 * @return {Promise}
 */
-type UploadDataOptions = {
-  onlyRundown?: boolean;
-};
-export const uploadData = async (file: File, setProgress: (value: number) => void, options?: UploadDataOptions) => {
+export const uploadProjectFile = async (
+  file: File,
+  setProgress: (value: number) => void,
+  options?: Partial<ProjectFileImportOptions>,
+) => {
  const formData = new FormData();
  formData.append('userFile', file);
-  const onlyRundown = options?.onlyRundown || 'false';
+
+  const onlyRundown = Boolean(options?.onlyRundown);
+
  await axios
    .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
      headers: {
@@ -161,6 +166,47 @@ export const uploadData = async (file: File, setProgress: (value: number) => voi
    .then((response) => response.data.id);
 };

+/**
+ * @description Make patch changes to the objects in the db
+ * @return {Promise}
+ */
+export async function patchData(patchDb: Partial<DatabaseModel>) {
+  const response = await axios.patch(`${ontimeURL}/db`, patchDb);
+  return response;
+}
+
+type PostPreviewExcelResponse = {
+  rundown: OntimeRundown;
+  project: ProjectData;
+  userFields: UserFields;
+};
+
+/**
+ * @description Make patch changes to the objects in the db
+ * @return {Promise} - returns parsed rundown and userfields
+ */
+export async function postPreviewExcel(file: File, setProgress: (value: number) => void, options?: ExcelImportMap) {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  formData.append('options', JSON.stringify(options));
+
+  const response: AxiosResponse<PostPreviewExcelResponse> = await axios.post(
+    `${ontimeURL}/preview-spreadsheet`,
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
+        setProgress(complete);
+      },
+    },
+  );
+
+  return response;
+}
+
 export type HasUpdate = {
  url: string;
  version: string;
@@ -178,6 +224,6 @@ export async function getLatestVersion(): Promise<HasUpdate> {
  };
 }

-export async function postNew(initialData: Partial<EventData>) {
+export async function postNew(initialData: Partial<ProjectData>) {
  return axios.post(`${ontimeURL}/new`, initialData);
 }
@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { ProjectData } from 'ontime-types';
+
+import { projectDataURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch project data
+ * @return {Promise}
+ */
+export async function getProjectData(): Promise<ProjectData> {
+  const res = await axios.get(projectDataURL);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate project data
+ * @return {Promise}
+ */
+export async function postProjectData(data: ProjectData) {
+  return axios.post(projectDataURL, data);
+}
@@ -0,0 +1,9 @@
+@use '../../../theme/v2Styles' as *;
+
+.delaySymbol {
+  svg {
+    font-size: 1.5rem;
+    color: $ontime-delay;
+    margin: 0 auto;
+  }
+}
@@ -0,0 +1,40 @@
+import { Tooltip } from '@chakra-ui/react';
+import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
+import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { millisToDelayString } from '../../utils/dateConfig';
+
+import style from './DelayIndicator.module.scss';
+
+interface DelayIndicatorProps {
+  delayValue?: number;
+}
+
+export default function DelayIndicator(props: DelayIndicatorProps) {
+  const { delayValue } = props;
+
+  if (typeof delayValue === 'number') {
+    if (delayValue < 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronDown />
+          </span>
+        </Tooltip>
+      );
+    }
+
+    if (delayValue > 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronUp />
+          </span>
+        </Tooltip>
+      );
+    }
+  }
+
+  return null;
+}
@@ -1,6 +1,6 @@
 import { useCallback } from 'react';

-import { TitleActions } from '../../../../features/event-editor/composite/EventEditorDataLeft';
+import { EditorUpdateFields } from '../../../../features/event-editor/EventEditor';

 import Swatch from './Swatch';

@@ -8,8 +8,8 @@ import style from './SwatchSelect.module.scss';

 interface ColourInputProps {
  value: string;
-  name: TitleActions;
-  handleChange: (newValue: TitleActions, name: string) => void;
+  name: EditorUpdateFields;
+  handleChange: (newValue: EditorUpdateFields, name: string) => void;
 }

 const colours = [
@@ -25,8 +25,14 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
  return (
    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
      <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
-      <div className='multiprogress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
-      <div className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
+      <div
+        className='multiprogress-bar__bg-warning'
+        style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
+      />
+      <div
+        className='multiprogress-bar__bg-danger'
+        style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+      />
      <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
    </div>
  );
@@ -58,7 +58,7 @@ function NavigationMenu() {
  const handleMirror = () => toggleMirror();

  const showEditFormDrawer = () => {
-    searchParams.append('edit', 'true');
+    searchParams.set('edit', 'true');
    setSearchParams(searchParams);
  };

@@ -116,6 +116,10 @@ function NavigationMenu() {
              Cuesheet
              <IoArrowUp className={style.linkIcon} />
            </Link>
+            <Link to='/op' className={style.link} tabIndex={0}>
+              Operator
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
            <hr className={style.separator} />
            {navigatorConstants.map((route) => (
              <Link
@@ -8,10 +8,12 @@ import { tooltipDelayFast } from '../../../ontimeConfig';

 interface PlaybackIconProps {
  state: Playback;
+  skipTooltip?: boolean;
+  className?: string;
 }

 export default function PlaybackIcon(props: PlaybackIconProps) {
-  const { state } = props;
+  const { state, skipTooltip, className } = props;

  // if timer is Pause or Armed
  let label = 'Timer Paused';
@@ -28,9 +30,13 @@ export default function PlaybackIcon(props: PlaybackIconProps) {
    Icon = IoStop;
  }

+  if (skipTooltip) {
+    return <Icon className={className} />;
+  }
+
  return (
    <Tooltip openDelay={tooltipDelayFast} label={label} shouldWrapChildren>
-      <Icon />
+      <Icon className={className} />
    </Tooltip>
  );
 }
@@ -1,5 +1,3 @@
-import Empty from '../state/Empty';
-
 import { useSchedule } from './ScheduleContext';
 import ScheduleItem from './ScheduleItem';

@@ -13,8 +11,9 @@ interface ScheduleProps {
 export default function Schedule({ isProduction, className }: ScheduleProps) {
  const { paginatedEvents, selectedEventId, isBackstage, scheduleType } = useSchedule();

+  // TODO: design a nice placeholder for empty schedules
  if (paginatedEvents?.length < 1) {
-    return <Empty text='No events to show' />;
+    return null;
  }

  let selectedState: 'past' | 'now' | 'future' = 'past';
@@ -1,7 +1,9 @@
 import { createContext, PropsWithChildren, useContext, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { OntimeEvent } from 'ontime-types';

 import { useInterval } from '../../hooks/useInterval';
+import { isStringBoolean } from '../../utils/viewUtils';

 interface ScheduleContextState {
  events: OntimeEvent[];
@@ -19,7 +21,6 @@ interface ScheduleProviderProps {
  events: OntimeEvent[];
  selectedEventId: string | null;
  isBackstage?: boolean;
-  eventsPerPage?: number;
  time?: number;
 }

@@ -28,16 +29,29 @@ export const ScheduleProvider = ({
  events,
  selectedEventId,
  isBackstage = false,
-  eventsPerPage = 7,
  time = 10,
 }: PropsWithChildren<ScheduleProviderProps>) => {
  const [visiblePage, setVisiblePage] = useState(0);
+  const [searchParams] = useSearchParams();

-  const numPages = Math.ceil(events.length / eventsPerPage);
+  // look for overrides from views
+  const hidePast = isStringBoolean(searchParams.get('hidePast'));
+  const stopCycle = isStringBoolean(searchParams.get('stopCycle'));
+  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? 7);
+
+  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
+
+  const viewEvents = [...events];
+  if (hidePast) {
+    // we want to show the event after the next
+    viewEvents.splice(0, selectedEventIndex + 2);
+    selectedEventIndex = 0;
+  }
+
+  const numPages = Math.ceil(viewEvents.length / eventsPerPage);
  const eventStart = eventsPerPage * visiblePage;
  const eventEnd = eventsPerPage * (visiblePage + 1);
-  const paginatedEvents = events.slice(eventStart, eventEnd);
-  const selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
+  const paginatedEvents = viewEvents.slice(eventStart, eventEnd);

  const resolveScheduleType = () => {
    if (selectedEventIndex >= eventStart && selectedEventIndex < eventEnd) {
@@ -52,7 +66,9 @@ export const ScheduleProvider = ({

  // every SCROLL_TIME go to the next array
  useInterval(() => {
-    if (events.length > eventsPerPage) {
+    if (stopCycle) {
+      setVisiblePage(0);
+    } else if (events.length > eventsPerPage) {
      const next = (visiblePage + 1) % numPages;
      setVisiblePage(next);
    }
@@ -14,16 +14,7 @@ interface ScheduleItemProps {
 }

 export default function ScheduleItem(props: ScheduleItemProps) {
-  const {
-    selected,
-    timeStart,
-    timeEnd,
-    title,
-    presenter,
-    backstageEvent,
-    colour,
-    skip,
-  } = props;
+  const { selected, timeStart, timeEnd, title, presenter, backstageEvent, colour, skip } = props;

  const start = formatTime(timeStart, { format: 'hh:mm' });
  const end = formatTime(timeEnd, { format: 'hh:mm' });
@@ -37,9 +28,7 @@ export default function ScheduleItem(props: ScheduleItemProps) {
        {`${start} → ${end} ${backstageEvent ? '*' : ''}`}
      </div>
      <div className='entry-title'>{title}</div>
-      {presenter && (
-        <div className='entry-presenter'>{presenter}</div>
-      )}
+      {presenter && <div className='entry-presenter'>{presenter}</div>}
    </li>
  );
 }
@@ -13,12 +13,11 @@ export default function ScheduleNav({ className }: ScheduleNavProps) {
    <div className={`schedule-nav ${className}`}>
      {numPages > 1 &&
        [...Array(numPages).keys()].map((i) => (
-            <div
-              key={i}
-              className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
-            />
-          ),
-        )}
+          <div
+            key={i}
+            className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
+          />
+        ))}
    </div>
  );
 }
@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+
 import { ReactComponent as Emptyimage } from '@/assets/images/empty.svg';

 import style from './Empty.module.scss';
@@ -2,7 +2,7 @@
@use '../../../theme/ontimeColours' as *;

 .drawerContent {
-  background-color: $gray-1200;
+  background-color: $gray-1250;
 }

 .drawerHeader {
@@ -1,5 +1,5 @@
 import { FormEvent, useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 import {
  Button,
  Drawer,
@@ -12,11 +12,27 @@ import {
  useDisclosure,
 } from '@chakra-ui/react';

+import { useLocalStorage } from '../../../common/hooks/useLocalStorage';
+
 import ParamInput from './ParamInput';
 import { ParamField } from './types';

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

+type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
+type SavedViewParams = Record<string, ViewParamsObj>;
+
+const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj) =>
+  Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
+    if (typeof value === 'string' && value.length) {
+      newSearchParams.set(id, value);
+
+      return newSearchParams;
+    }
+
+    return newSearchParams;
+  }, new URLSearchParams());
+
 interface EditFormDrawerProps {
  paramFields: ParamField[];
 }
@@ -24,6 +40,8 @@ interface EditFormDrawerProps {
 export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
  const [searchParams, setSearchParams] = useSearchParams();
  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { pathname } = useLocation();
+  const [storedViewParams, setStoredViewParams] = useLocalStorage<SavedViewParams>('ontime-views', {});

  useEffect(() => {
    const isEditing = searchParams.get('edit');
@@ -33,6 +51,19 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
    }
  }, [searchParams, onOpen]);

+  useEffect(() => {
+    const viewParamsObjFromLocalStorage = storedViewParams[pathname];
+
+    if (viewParamsObjFromLocalStorage !== undefined) {
+      const defaultSearchParams = getURLSearchParamsFromObj(viewParamsObjFromLocalStorage);
+      setSearchParams(defaultSearchParams);
+    }
+
+    // linter is asking for `setSearchParams` in the useEffect deps
+    // rule is disabled since adding `setSearchParams` results in unnecessary re-renders
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [storedViewParams, pathname]);
+
  const onEditDrawerClose = () => {
    onClose();

@@ -41,6 +72,7 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
  };

  const clearParams = () => {
+    setStoredViewParams({ ...storedViewParams, [pathname]: {} });
    setSearchParams();
    onClose();
  };
@@ -49,15 +81,9 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
    formEvent.preventDefault();

    const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
-    const newSearchParams = Object.entries(newParamsObject).reduce((newSearchParams, [id, value]) => {
-      if (typeof value === 'string' && value.length) {
-        newSearchParams.set(id, value);
+    const newSearchParams = getURLSearchParamsFromObj(newParamsObject);

-        return newSearchParams;
-      }
-
-      return newSearchParams;
-    }, new URLSearchParams());
+    setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject });
    setSearchParams(newSearchParams);
  };

@@ -1,3 +1,5 @@
+import { UserFields } from 'ontime-types';
+
 import { ParamField } from './types';

 export const TIME_FORMAT_OPTION: ParamField = {
@@ -130,7 +132,7 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
  {
    id: 'hideovertime',
    title: 'Hide Overtime',
-    description: 'Whether to supress overtime styles (red borders and red text)',
+    description: 'Whether to suppress overtime styles (red borders and red text)',
    type: 'boolean',
  },
  {
@@ -192,6 +194,49 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
  },
 ];

+export const BACKSTAGE_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
+  {
+    id: 'hidePast',
+    title: 'Hide past events',
+    description: 'Scheduler will only show upcoming events',
+    type: 'boolean',
+  },
+  {
+    id: 'stopCycle',
+    title: 'Stop cycling through event pages',
+    description: 'Schedule will not auto-cycle through events',
+    type: 'boolean',
+  },
+  {
+    id: 'eventsPerPage',
+    title: 'Events per page',
+    description: 'Sets the number of events on the page, can cause overlow',
+    type: 'number',
+  },
+];
+
+export const PUBLIC_OPTIONS: ParamField[] = [
+  TIME_FORMAT_OPTION,
+  {
+    id: 'hidePast',
+    title: 'Hide past events',
+    description: 'Scheduler will only show upcoming events',
+    type: 'boolean',
+  },
+  {
+    id: 'stopCycle',
+    title: 'Stop cycling through event pages',
+    description: 'Schedule will not auto-cycle through events',
+    type: 'boolean',
+  },
+  {
+    id: 'eventsPerPage',
+    title: 'Events per page',
+    description: 'Sets the number of events on the page, can cause overlow',
+    type: 'number',
+  },
+];
 export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
  TIME_FORMAT_OPTION,
  {
@@ -201,3 +246,61 @@ export const STUDIO_CLOCK_OPTIONS: ParamField[] = [
    type: 'boolean',
  },
 ];
+
+export const getOperatorOptions = (userFields: UserFields): ParamField[] => {
+  return [
+    TIME_FORMAT_OPTION,
+    {
+      id: 'showseconds',
+      title: 'Show seconds',
+      description: 'Schedule shows hh:mm:ss',
+      type: 'boolean',
+    },
+    {
+      id: 'hidepast',
+      title: 'Hide Past Events',
+      description: 'Whether to events that have passed',
+      type: 'boolean',
+    },
+    {
+      id: 'main',
+      title: 'Main data field',
+      description: 'Field to be shown in the first line of text',
+      type: 'option',
+      values: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        presenter: 'Presenter',
+      },
+    },
+    {
+      id: 'secondary',
+      title: 'Secondary data field',
+      description: 'Field to be shown in the second line of text',
+      type: 'option',
+      values: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        presenter: 'Presenter',
+      },
+    },
+    {
+      id: 'subscribe',
+      title: 'Highlight Field',
+      description: 'Choose a field to highlight',
+      type: 'option',
+      values: {
+        user0: userFields.user0 || 'user0',
+        user1: userFields.user1 || 'user1',
+        user2: userFields.user2 || 'user2',
+        user3: userFields.user3 || 'user3',
+        user4: userFields.user4 || 'user4',
+        user5: userFields.user5 || 'user5',
+        user6: userFields.user6 || 'user6',
+        user7: userFields.user7 || 'user7',
+        user8: userFields.user8 || 'user8',
+        user9: userFields.user9 || 'user9',
+      },
+    },
+  ];
+};
@@ -0,0 +1,32 @@
+// roughly from https://github.com/juliencrn/usehooks-ts/blob/master/packages/usehooks-ts/src/useMediaQuery/useMediaQuery.ts
+
+import { useCallback, useEffect, useState } from 'react';
+
+function getMatches(query: string): boolean {
+  return window.matchMedia(query).matches;
+}
+
+// TODO: debounce handleChange
+export default function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+
+  const handleChange = useCallback(() => {
+    setMatches(getMatches(query));
+  }, [query]);
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Listen matchMedia
+    matchMedia.addEventListener('change', handleChange);
+
+    return () => {
+      matchMedia.removeEventListener('change', handleChange);
+    };
+  }, [handleChange, query]);
+
+  return matches;
+}
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { GetInfo } from 'ontime-types';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_INFO } from '../api/apiConstants';
@@ -6,7 +7,7 @@ import { getInfo } from '../api/ontimeApi';
 import { ontimePlaceholderInfo } from '../models/Info';

 export default function useInfo() {
-  const { data, status, isError, refetch } = useQuery({
+  const { data, status, isError, refetch, isFetching } = useQuery<GetInfo>({
    queryKey: APP_INFO,
    queryFn: getInfo,
    placeholderData: ontimePlaceholderInfo,
@@ -16,5 +17,5 @@ export default function useInfo() {
    networkMode: 'always',
  });

-  return { data, status, isError, refetch };
+  return { data, status, isError, refetch, isFetching };
 }
@@ -1,15 +1,15 @@
 import { useQuery } from '@tanstack/react-query';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { EVENT_DATA } from '../api/apiConstants';
-import { fetchEventData } from '../api/eventDataApi';
-import { eventDataPlaceholder } from '../models/EventData';
+import { PROJECT_DATA } from '../api/apiConstants';
+import { getProjectData } from '../api/projectDataApi';
+import { projectDataPlaceholder } from '../models/ProjectData';

-export default function useEventData() {
+export default function useProjectData() {
  const { data, status, isFetching, isError, refetch } = useQuery({
-    queryKey: EVENT_DATA,
-    queryFn: fetchEventData,
-    placeholderData: eventDataPlaceholder,
+    queryKey: PROJECT_DATA,
+    queryFn: getProjectData,
+    placeholderData: projectDataPlaceholder,
    retry: 5,
    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
@@ -6,7 +6,6 @@ export default function useClickOutside<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  callback: ClickOutsideEventHandler,
 ) {
-
  useEffect(() => {
    function handleClick(event: MouseEvent) {
      const element = ref?.current;
@@ -1,7 +1,7 @@
 export default function useElectronEvent() {
  const isElectron = window?.process?.type === 'renderer';

-  const sendToElectron = (channel: string, args?: string | Record<string, any>) => {
+  const sendToElectron = (channel: string, args?: string | Record<string, unknown>) => {
    if (isElectron) {
      window?.ipcRenderer.send(channel, args);
    }
@@ -100,7 +100,7 @@ export const useEventAction = () => {
        // @ts-expect-error -- we know that the object is well formed now
        await _addEventMutation.mutateAsync(newEvent);
      } catch (error) {
-        logAxiosError('Error fetching data', error);
+        logAxiosError('Failed adding event', error);
      }
    },
    [_addEventMutation, defaultPublic, queryClient, startTimeIsLastEnd],
@@ -1,10 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';

 export type TLogLevel = 'debug' | 'info' | 'warn' | 'error' | 'none';

@@ -26,13 +20,13 @@ const LOG_LEVEL: Record<TLogLevel, number> = {
 };

 const useFitText = ({
-                      logLevel: logLevelOption = 'info',
-                      maxFontSize = 100,
-                      minFontSize = 20,
-                      onFinish,
-                      onStart,
-                      resolution = 5,
-                    }: TOptions = {}) => {
+  logLevel: logLevelOption = 'info',
+  maxFontSize = 100,
+  minFontSize = 20,
+  onFinish,
+  onStart,
+  resolution = 5,
+}: TOptions = {}) => {
  const logLevel = LOG_LEVEL[logLevelOption];

  const initState = useCallback(() => {
@@ -112,8 +106,7 @@ const useFitText = ({
    const isWithinResolution = Math.abs(fontSize - fontSizePrev) <= resolution;
    const isOverflow =
      !!ref.current &&
-      (ref.current.scrollHeight > ref.current.offsetHeight ||
-        ref.current.scrollWidth > ref.current.offsetWidth);
+      (ref.current.scrollHeight > ref.current.offsetHeight || ref.current.scrollWidth > ref.current.offsetWidth);
    const isFailed = isOverflow && fontSize === fontSizePrev;
    const isAsc = fontSize > fontSizePrev;

@@ -123,9 +116,7 @@ const useFitText = ({
      if (isFailed) {
        isCalculatingRef.current = false;
        if (logLevel <= LOG_LEVEL.info) {
-          console.info(
-            `[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`,
-          );
+          console.info(`[use-fit-text] reached \`minFontSize = ${minFontSize}\` without fitting text`);
        }
      } else if (isOverflow) {
        setState({
@@ -160,16 +151,7 @@ const useFitText = ({
      fontSizeMin: newMin,
      fontSizePrev: fontSize,
    });
-  }, [
-    calcKey,
-    fontSize,
-    fontSizeMax,
-    fontSizeMin,
-    fontSizePrev,
-    onFinish,
-    ref,
-    resolution,
-  ]);
+  }, [calcKey, fontSize, fontSizeMax, fontSizeMin, fontSizePrev, onFinish, ref, resolution]);

  return { fontSize: `${fontSize}%`, ref };
 };
@@ -0,0 +1,63 @@
+import { MutableRefObject, useCallback, useEffect } from 'react';
+
+function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
+  componentRef: MutableRefObject<ComponentRef>,
+  scrollRef: MutableRefObject<ScrollRef>,
+  topOffset: number,
+) {
+  if (!componentRef.current || !scrollRef.current) {
+    return;
+  }
+
+  const componentRect = componentRef.current.getBoundingClientRect();
+  const scrollRect = scrollRef.current.getBoundingClientRect();
+  const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - topOffset;
+
+  scrollRef.current.scrollTo({ top, behavior: 'smooth' });
+}
+
+interface UseFollowComponentProps {
+  followRef: MutableRefObject<HTMLElement | null>;
+  scrollRef: MutableRefObject<HTMLElement | null>;
+  doFollow: boolean;
+  topOffset?: number;
+  setScrollFlag?: () => void;
+}
+
+export default function useFollowComponent(props: UseFollowComponentProps) {
+  const { followRef, scrollRef, doFollow, topOffset = 100, setScrollFlag } = props;
+
+  // when cursor moves, view should follow
+  useEffect(() => {
+    if (!doFollow) {
+      return;
+    }
+
+    if (followRef.current && scrollRef.current) {
+      // Use requestAnimationFrame to ensure the component is fully loaded
+      window.requestAnimationFrame(() => {
+        setScrollFlag?.();
+        scrollToComponent(
+          followRef as MutableRefObject<HTMLElement>,
+          scrollRef as MutableRefObject<HTMLElement>,
+          topOffset,
+        );
+      });
+    }
+
+    // eslint-disable-next-line -- the prompt seems incorrect
+  }, [followRef?.current, scrollRef?.current]);
+
+  const scrollToRefComponent = useCallback(
+    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
+      if (componentRef.current && containerRef.current) {
+        // @ts-expect-error -- we know this are not null
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        scrollToComponent(componentRef!, scrollRef!, offset);
+      }
+    },
+    [followRef, scrollRef, topOffset],
+  );
+
+  return scrollToRefComponent;
+}
@@ -42,7 +42,7 @@ export default function useFullscreen() {
        });
      } else if (element.webkitRequestFullscreen) {
        // iOS Safari fullscreen API is supported
-        element.webkitRequestFullscreen().catch(() => {
+        element.webkitRequestFullscreen?.().catch(() => {
          /* nothing to do */
        });
      }
@@ -55,7 +55,7 @@ export default function useFullscreen() {
        });
      } else if ((document as WebkitDocument).webkitExitFullscreen) {
        // iOS Safari fullscreen API is supported
-        (document as WebkitDocument).webkitExitFullscreen().catch(() => {
+        (document as WebkitDocument).webkitExitFullscreen?.().catch(() => {
          /* nothing to do */
        });
      }
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';

 /**
 * @description utility hook to around setInterval
@@ -46,7 +46,7 @@ export const useLocalStorage = <T>(key: string, initialValue: T): [T, (value: T
      setStoredValue(valueToStore);
      window.localStorage.setItem(`ontime-${key}`, JSON.stringify(valueToStore));
    } catch (error) {
-      console.log(error);
+      console.error(error);
    }
  };
  return [storedValue, setValue];
@@ -13,6 +13,15 @@ export const useRundownEditor = () => {
  return useRuntimeStore(featureSelector, deepCompare);
 };

+export const useOperator = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    playback: state.playback,
+    selectedEventId: state.loaded.selectedEventId,
+  });
+
+  return useRuntimeStore(featureSelector, deepCompare);
+};
+
 export const useMessageControl = () => {
  const featureSelector = (state: RuntimeStore) => ({
    timerMessage: state.timerMessage,
@@ -70,7 +79,8 @@ export const setPlayback = {

 export const useInfoPanel = () => {
  const featureSelector = (state: RuntimeStore) => ({
-    titles: state.titles,
+    eventNow: state.eventNow,
+    eventNext: state.eventNext,
    playback: state.playback,
    selectedEventIndex: state.loaded.selectedEventIndex,
    numEvents: state.loaded.numEvents,
@@ -85,7 +95,7 @@ export const useCuesheet = () => {
    selectedEventId: state.loaded.selectedEventId,
    selectedEventIndex: state.loaded.selectedEventIndex,
    numEvents: state.loaded.numEvents,
-    titleNow: state.titles.titleNow,
+    titleNow: state.eventNow?.title || '',
  });

  return useRuntimeStore(featureSelector, deepCompare);
@@ -1,19 +1,25 @@
-import { Settings } from 'ontime-types';
+import { GetInfo, OSCSettings } from 'ontime-types';

-type NetworkInterfaceType = {
-  name: string;
-  address: string;
-};
-
-export type InfoType = {
-  networkInterfaces: NetworkInterfaceType[];
-  settings: Pick<Settings, 'version' | 'serverPort'>;
-};
-
-export const ontimePlaceholderInfo: InfoType = {
-  networkInterfaces: [],
-  settings: {
-    version: 2,
-    serverPort: 4001,
+export const oscPlaceholderSettings: OSCSettings = {
+  portIn: 0,
+  portOut: 0,
+  targetIP: '',
+  enabledIn: false,
+  enabledOut: false,
+  subscriptions: {
+    onLoad: [],
+    onStart: [],
+    onPause: [],
+    onStop: [],
+    onUpdate: [],
+    onFinish: [],
  },
 };
+
+export const ontimePlaceholderInfo: GetInfo = {
+  networkInterfaces: [],
+  version: '2.0.0',
+  serverPort: 4001,
+  osc: oscPlaceholderSettings,
+  cssOverride: '',
+};
@@ -2,7 +2,7 @@ import { Settings } from 'ontime-types';

 export const ontimePlaceholderSettings: Settings = {
  app: 'ontime',
-  version: 2,
+  version: '2.0.0',
  serverPort: 4001,
  editorKey: null,
  operatorKey: null,
@@ -1,6 +1,6 @@
-import { EventData } from 'ontime-types';
+import { ProjectData } from 'ontime-types';

-export const eventDataPlaceholder: EventData = {
+export const projectDataPlaceholder: ProjectData = {
  title: '',
  description: '',
  publicUrl: '',
@@ -42,26 +42,10 @@ export const runtimeStorePlaceholder = {
    nextEventId: null,
    nextPublicEventId: null,
  },
-  titles: {
-    titleNow: null,
-    subtitleNow: null,
-    presenterNow: null,
-    noteNow: null,
-    titleNext: null,
-    subtitleNext: null,
-    presenterNext: null,
-    noteNext: null,
-  },
-  titlesPublic: {
-    titleNow: null,
-    subtitleNow: null,
-    presenterNow: null,
-    noteNow: null,
-    titleNext: null,
-    subtitleNext: null,
-    presenterNext: null,
-    noteNext: null,
-  },
+  eventNow: null,
+  eventNext: null,
+  publicEventNow: null,
+  publicEventNext: null,
 };

 export const runtime = createStore<RuntimeStore>(() => ({
@@ -1,5 +1,6 @@
 import { resolvePath } from 'react-router-dom';
-import { validateAlias, generateURLFromAlias, getAliasRoute } from '../aliases';
+
+import { generateURLFromAlias, getAliasRoute, validateAlias } from '../aliases';

 describe('An alias fails if incorrect', () => {
  const testsToFail = [
@@ -12,7 +12,7 @@ test('Clamps a set of numbers correctly', () => {
    { num: -50, min: 0, max: 0, result: 0 },
    { num: 50.5, min: 0, max: 100, result: 50.5 },
    { num: 50, min: 0, max: 20.32, result: 20.32 },
-    { num: 10, min: 20.32, max: 40, result: 20.32 }
+    { num: 10, min: 20.32, max: 40, result: 20.32 },
  ];

  testCases.forEach((t) => expect(clamp(t.num, t.min, t.max)).toBe(t.result));
@@ -47,7 +47,7 @@ export const getAliasRoute = (location: Location, data: Alias[], searchParams: U
  const aliasOnPage = searchParams.get('alias');
  for (const d of data) {
    if (aliasOnPage) {
-      // if the alias fits the alias on this page, but the URL is diferent, we redirect user to the new URL
+      // if the alias fits the alias on this page, but the URL is different, we redirect user to the new URL
      // if we have the same alias and its enabled and its not empty
      if (d.alias !== '' && d.enabled && d.alias === aliasOnPage) {
        const newAliasPath = resolvePath(d.pathAndParams);
@@ -0,0 +1,12 @@
+export function debounce(callback: () => void, wait: number) {
+  let timeout: NodeJS.Timeout | null;
+  return () => {
+    if (timeout) {
+      return;
+    }
+    timeout = setTimeout(() => {
+      timeout = null;
+      callback();
+    }, wait);
+  };
+}
@@ -0,0 +1,6 @@
+export function isMacOS() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.includes('macintosh') || userAgent.includes('mac os');
+}
+
+export const deviceAlt = isMacOS() ? '⌥' : 'Alt';
@@ -0,0 +1,56 @@
+import axios from 'axios';
+
+import { makeCSV, makeTable } from '../../features/cuesheet/cuesheetUtils';
+
+type FileOptions = {
+  name: string;
+  type: string;
+};
+
+type BlobOptions = {
+  type: string;
+};
+
+export default async function fileDownload(url: string, fileOptions: FileOptions, blobOptions: BlobOptions) {
+  const response = await axios({
+    url: `${url}/db`,
+    method: 'GET',
+  });
+
+  const headerLine = response.headers['Content-Disposition'];
+  let { name: fileName } = fileOptions;
+  const { type: fileType } = fileOptions;
+  const { project, rundown, userFields } = response.data;
+
+  // try and get the filename from the response
+  if (headerLine != null) {
+    const startFileNameIndex = headerLine.indexOf('"') + 1;
+    const endFileNameIndex = headerLine.lastIndexOf('"');
+    fileName = headerLine.substring(startFileNameIndex, endFileNameIndex);
+  }
+
+  let fileContent = '';
+
+  if (fileType === 'json') {
+    fileContent = JSON.stringify(response.data);
+    fileName += '.json';
+  }
+
+  if (fileType === 'csv') {
+    const sheetData = makeTable(project, rundown, userFields);
+    fileContent = makeCSV(sheetData);
+    fileName += '.csv';
+  }
+
+  const blob = new Blob([fileContent], { type: blobOptions.type });
+  const downloadUrl = URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.setAttribute('href', downloadUrl);
+  link.setAttribute('download', fileName);
+  document.body.appendChild(link);
+  link.click();
+  // Clean up the URL.createObjectURL to release resources
+  URL.revokeObjectURL(downloadUrl);
+  return;
+}
@@ -87,18 +87,6 @@ export const connectSocket = (preferredClientName?: string) => {
          runtime.setState(state);
          break;
        }
-        case 'ontime-titles': {
-          const state = runtime.getState();
-          state.titles = payload;
-          runtime.setState(state);
-          break;
-        }
-        case 'ontime-titlesPublic': {
-          const state = runtime.getState();
-          state.titlesPublic = payload;
-          runtime.setState(state);
-          break;
-        }
        case 'ontime-timerMessage': {
          const state = runtime.getState();
          state.timerMessage = payload;
@@ -141,7 +129,7 @@ export const socketSend = (message: any) => {
  }
 };

-export const socketSendJson = (type: string, payload?: any) => {
+export const socketSendJson = (type: string, payload?: unknown) => {
  socketSend(
    JSON.stringify({
      type,
@@ -3,27 +3,27 @@ import Color from 'color';
 type ColourCombination = {
  backgroundColor: string;
  color: string;
-}
+};

 /**
 * @description Selects text colour to maintain accessible contrast
 * @param bgColour
 * @return {{backgroundColor, color: string}}
 */
-export const getAccessibleColour = (bgColour: string): ColourCombination => {
+export const getAccessibleColour = (bgColour?: string): ColourCombination => {
  if (bgColour) {
    try {
      const textColor = Color(bgColour).isLight() ? 'black' : '#fffffa';
      return { backgroundColor: bgColour, color: textColor };
-    } catch (error) {
-      console.log(`Unable to parse colour: ${bgColour}`);
+    } catch (_error) {
+      /* we do not handle errors here */
    }
  }
-  return { backgroundColor: '#000', color: "#fffffa" };
+  return { backgroundColor: '#000', color: '#fffffa' };
 };

 /**
 * @description Creates a list of classnames from array of css module conditions
 * @param classNames - css modules objects
 */
-export const cx = (classNames: any[]) => classNames.filter(Boolean).join(" ");
+export const cx = (classNames: any[]) => classNames.filter(Boolean).join(' ');
@@ -51,6 +51,7 @@ export const formatTime = (milliseconds: number | null, options?: FormatOptions,
    return '...';
  }
  const timeFormat = resolver();
-  const { showSeconds = false, format: formatString = 'hh:mm a' } = options || {};
+  const fallback = options?.showSeconds ? 'hh:mm:ss a' : 'hh:mm a';
+  const { showSeconds = false, format: formatString = fallback } = options || {};
  return timeFormat === '12' ? formatFromMillis(milliseconds, formatString) : millisToString(milliseconds, showSeconds);
 };
@@ -13,9 +13,8 @@ declare global {
    };
    process: {
      type: string;
-    }
+    };
  }
 }

-// eslint-disable-next-line import/no-anonymous-default-export
-export default {}
+export default {};
@@ -6,6 +6,6 @@ import 'vitest';
 // https://github.com/testing-library/jest-dom/issues/123
 declare global {
  namespace Vi {
-    interface Assertion<T = any> extends TestingLibraryMatchers<T, void> {}
+    type Assertion<T = any> = TestingLibraryMatchers<T, void>;
  }
 }
@@ -22,7 +22,7 @@ const withAlias = <P extends object>(Component: ComponentType<P>) => {
      }
    }, [data, searchParams, navigate, location]);

-    return <Component {...props} />;
+    return <Component {...(props as P)} />;
  };
 };

@@ -42,7 +42,7 @@ export default function MessageControl() {
        actionHandler={() => setMessage.presenterVisible(!data.timerMessage.visible)}
      />
      <div className={style.buttonSection}>
-        <label className={style.label}>Timer messsage blink</label>
+        <label className={style.label}>Timer message blink</label>
        <label className={style.label}>Blackout timer screens</label>
        <Button
          className={`${data.timerMessage.timerBlink ? style.blink : ''}`}
@@ -44,6 +44,11 @@ $table-header-font-size: calc(1rem - 3px);
    min-width: 2rem;
    text-align: right;
    font-weight: 400;
+
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background-color: $gray-1300;
  }
 }

@@ -61,6 +66,11 @@ $table-header-font-size: calc(1rem - 3px);
 .eventRow {
  vertical-align: top;

+  &:hover {
+    outline: 1px solid $blue-700;
+    outline-offset: -1px;
+  }
+
  td {
    background-color: $gray-1250;
    border-radius: 2px;
@@ -113,14 +123,6 @@ $table-header-font-size: calc(1rem - 3px);
  }
 }

-.delaySymbol {
-  svg {
-    font-size: 1.5rem;
-    color: $ontime-delay;
-    margin: 0 auto;
-  }
-}
-
 .delayedTime {
  color: $ontime-delay-text;
  font-size: calc(1rem - 2px);
@@ -1,33 +1,21 @@
-import { MutableRefObject, useEffect, useRef } from 'react';
-import { Tooltip } from '@chakra-ui/react';
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  KeyboardSensor,
-  PointerSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import { horizontalListSortingStrategy, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { useRef } from 'react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import Color from 'color';
 import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';

+import useFollowComponent from '../../common/hooks/useFollowComponent';
 import { useLocalStorage } from '../../common/hooks/useLocalStorage';
-import { millisToDelayString } from '../../common/utils/dateConfig';
-import { getAccessibleColour } from '../../common/utils/styleUtils';
-import { tooltipDelayFast } from '../../ontimeConfig';

+import BlockRow from './cuesheet-table-elements/BlockRow';
+import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
+import DelayRow from './cuesheet-table-elements/DelayRow';
+import EventRow from './cuesheet-table-elements/EventRow';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
 import { useCuesheetSettings } from './store/CuesheetSettings';
-import { SortableCell } from './tableElements/SortableCell';
 import { initialColumnOrder } from './cuesheetCols';

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

-const pastOpacity = '0.2';
-
 interface CuesheetProps {
  data: OntimeRundown;
  columns: ColumnDef<OntimeRundownEntry>[];
@@ -46,6 +34,8 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
  const [columnSizing, setColumnSizing] = useLocalStorage('table-sizes', {});

  const selectedRef = useRef<HTMLTableRowElement | null>(null);
+  const tableContainerRef = useRef<HTMLDivElement | null>(null);
+  useFollowComponent({ followRef: selectedRef, scrollRef: tableContainerRef, doFollow: followSelected });

  const table = useReactTable({
    data,
@@ -63,78 +53,6 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
    onColumnSizingChange: setColumnSizing,
    getCoreRowModel: getCoreRowModel(),
  });
-  const tableContainerRef = useRef<HTMLDivElement>(null);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        delay: 100,
-        tolerance: 50,
-      },
-    }),
-    useSensor(TouchSensor, {
-      activationConstraint: {
-        delay: 100,
-        tolerance: 50,
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    }),
-  );
-
-  // when selection moves, view should follow
-  useEffect(() => {
-    function scrollToComponent(
-      componentRef: MutableRefObject<HTMLTableRowElement>,
-      scrollRef: MutableRefObject<HTMLDivElement>,
-    ) {
-      const componentRect = componentRef.current.getBoundingClientRect();
-      const scrollRect = scrollRef.current.getBoundingClientRect();
-      const top = componentRect.top - scrollRect.top + scrollRef.current.scrollTop - 100;
-      scrollRef.current.scrollTo({ top, behavior: 'smooth' });
-    }
-
-    if (!followSelected) {
-      return;
-    }
-
-    if (selectedRef.current && tableContainerRef.current) {
-      // Use requestAnimationFrame to ensure the component is fully loaded
-      window.requestAnimationFrame(() => {
-        scrollToComponent(
-          selectedRef as MutableRefObject<HTMLTableRowElement>,
-          tableContainerRef as MutableRefObject<HTMLDivElement>,
-        );
-      });
-    }
-    // eslint-disable-next-line -- the prompt seems incorrect, we need the refs
-  }, [selectedRef.current, tableContainerRef.current, followSelected]);
-
-  const handleOnDragEnd = (event: DragEndEvent) => {
-    const { delta, active, over } = event;
-
-    // cancel if delta y is greater than 200
-    if (delta.y > 200) return;
-    // cancel if we do not have an over id
-    if (over?.id == null) return;
-
-    // get index of from
-    const fromIndex = columnOrder.indexOf(active.id as string);
-
-    // get index of to
-    const toIndex = columnOrder.indexOf(over.id as string);
-
-    if (toIndex === -1) {
-      return;
-    }
-
-    const reorderedCols = [...columnOrder];
-    const reorderedItem = reorderedCols.splice(fromIndex, 1);
-    reorderedCols.splice(toIndex, 0, reorderedItem[0]);
-
-    saveColumnOrder(reorderedCols);
-  };

  const resetColumnOrder = () => {
    saveColumnOrder(initialColumnOrder);
@@ -148,6 +66,8 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
    setColumnSizing({});
  };

+  const headerGroups = table.getHeaderGroups;
+
  let eventIndex = 0;
  let isPast = Boolean(selectedId);

@@ -163,37 +83,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
      )}
      <div ref={tableContainerRef} className={style.cuesheetContainer}>
        <table className={style.cuesheet}>
-          <thead className={style.tableHeader}>
-            {table.getHeaderGroups().map((headerGroup) => {
-              const key = headerGroup.id;
-
-              return (
-                <DndContext key={key} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleOnDragEnd}>
-                  <tr key={headerGroup.id}>
-                    <th className={style.indexColumn}>
-                      <Tooltip label='Event Order' openDelay={tooltipDelayFast}>
-                        #
-                      </Tooltip>
-                    </th>
-                    <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
-                      {headerGroup.headers.map((header) => {
-                        const width = header.getSize();
-
-                        return (
-                          <SortableCell key={header.column.columnDef.id} header={header} style={{ width }}>
-                            {header.isPlaceholder
-                              ? null
-                              : flexRender(header.column.columnDef.header, header.getContext())}
-                          </SortableCell>
-                        );
-                      })}
-                    </SortableContext>
-                  </tr>
-                </DndContext>
-              );
-            })}
-          </thead>
-
+          <CuesheetHeader headerGroups={headerGroups} />
          <tbody>
            {table.getRowModel().rows.map((row) => {
              const key = row.original.id;
@@ -203,13 +93,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
              }

              if (isOntimeBlock(row.original)) {
-                const title = row.original.title;
-
-                return (
-                  <tr key={key} className={style.blockRow}>
-                    <td>{title}</td>
-                  </tr>
-                );
+                return <BlockRow key={key} title={row.original.title} />;
              }
              if (isOntimeDelay(row.original)) {
                const delayVal = row.original.duration;
@@ -218,12 +102,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                  return null;
                }

-                const delayTime = millisToDelayString(delayVal);
-                return (
-                  <tr key={key} className={style.delayRow}>
-                    <td>{delayTime}</td>
-                  </tr>
-                );
+                return <DelayRow key={key} duration={delayVal} />;
              }
              if (isOntimeEvent(row.original)) {
                eventIndex++;
@@ -236,25 +115,28 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                  return null;
                }

-                const bgFallback = 'transparent';
-                const bgColour = row.original.colour || bgFallback;
-                const textColour = bgColour === bgFallback ? undefined : getAccessibleColour(bgColour);
-                const isSkipped = row.original.skip;
-
                let rowBgColour: string | undefined;
-                if (row.original.id === selectedId) {
-                  rowBgColour = '#D20300'; // $red-700
+                if (isSelected) {
+                  rowBgColour = 'var(--cuesheet-running-bg-override, #D20300)'; // $red-700
+                } else if (row.original.colour) {
+                  try {
+                    // the colour is user defined and might be invalid
+                    const colour = new Color(row.original.colour).alpha(0.25);
+                    rowBgColour = colour.hsl().string();
+                  } catch (_error) {
+                    /* we do not handle errors here */
+                  }
                }
+
                return (
-                  <tr
+                  <EventRow
                    key={key}
-                    className={`${style.eventRow} ${isSkipped ? style.skip : ''}`}
-                    style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
-                    ref={isSelected ? selectedRef : undefined}
+                    eventIndex={eventIndex}
+                    isPast={isPast}
+                    selectedRef={isSelected ? selectedRef : undefined}
+                    skip={row.original.skip}
+                    colour={row.original.colour}
                  >
-                    <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour?.color }}>
-                      {eventIndex}
-                    </td>
                    {row.getVisibleCells().map((cell) => {
                      return (
                        <td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
@@ -262,7 +144,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu
                        </td>
                      );
                    })}
-                  </tr>
+                  </EventRow>
                );
              }

@@ -21,4 +21,4 @@
    border: 1px solid $white-10;
    border-radius: 4px;
  }
-}
+}
@@ -1,11 +1,12 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { EventData, OntimeRundownEntry } from 'ontime-types';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { OntimeRundownEntry, ProjectData } from 'ontime-types';

 import Empty from '../../common/components/state/Empty';
 import { useEventAction } from '../../common/hooks/useEventAction';
 import { useCuesheet } from '../../common/hooks/useSocket';
 import useRundown from '../../common/hooks-query/useRundown';
 import useUserFields from '../../common/hooks-query/useUserFields';
+import ExportModal, { ExportType } from '../modals/export-modal/ExportModal';

 import CuesheetTableHeader from './cuesheet-table-header/CuesheetTableHeader';
 import Cuesheet from './Cuesheet';
@@ -20,6 +21,8 @@ export default function CuesheetWrapper() {
  const { updateEvent } = useEventAction();
  const featureData = useCuesheet();
  const columns = useMemo(() => makeCuesheetColumns(userFields), [userFields]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [headerData, setheaderData] = useState<ProjectData | null>(null);

  // Set window title
  useEffect(() => {
@@ -69,37 +72,76 @@ export default function CuesheetWrapper() {
  );

  const exportHandler = useCallback(
-    (headerData: EventData) => {
+    (headerData: ProjectData, exportType: ExportType) => {
      if (!headerData || !rundown || !userFields) {
        return;
      }

-      const sheetData = makeTable(headerData, rundown, userFields);
-      const csvContent = makeCSV(sheetData);
+      let fileName = '';
+      let url = '';

-      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-      const url = URL.createObjectURL(blob);
+      if (exportType === 'json') {
+        const jsonContent = JSON.stringify({
+          headerData,
+          rundown,
+          userFields,
+        });
+
+        fileName = 'ontime export.json';
+
+        const blob = new Blob([jsonContent], { type: 'application/json;charset=utf-8;' });
+        url = URL.createObjectURL(blob);
+      } else if (exportType === 'csv') {
+        const sheetData = makeTable(headerData, rundown, userFields);
+        const csvContent = makeCSV(sheetData);
+
+        fileName = 'ontime export.csv';
+
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        url = URL.createObjectURL(blob);
+      } else {
+        console.error('Invalid export type: ', exportType);
+        return;
+      }

      const link = document.createElement('a');
      link.setAttribute('href', url);
-      link.setAttribute('download', 'ontime export.csv');
+      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
-
      // Clean up the URL.createObjectURL to release resources
      URL.revokeObjectURL(url);
+      return;
    },
    [rundown, userFields],
  );

+  const onModalClose = (exportType?: ExportType) => {
+    setIsModalOpen(false);
+
+    if (!exportType) {
+      return;
+    }
+
+    if (headerData) {
+      exportHandler(headerData, exportType);
+    }
+  };
+
+  const handleOpenModal = (projectData: ProjectData) => {
+    setheaderData(projectData);
+    setIsModalOpen(true);
+  };
+
  if (!rundown || !userFields) {
    return <Empty text='Loading...' />;
  }

  return (
    <div className={styles.tableWrapper} data-testid='cuesheet'>
-      <CuesheetTableHeader handleCSVExport={exportHandler} featureData={featureData} />
+      <CuesheetTableHeader handleExport={handleOpenModal} featureData={featureData} />
      <Cuesheet data={rundown} columns={columns} handleUpdate={handleUpdate} selectedId={featureData.selectedEventId} />
+      <ExportModal isOpen={isModalOpen} onClose={onModalClose} />
    </div>
  );
 }
@@ -6,7 +6,11 @@ exports[`makeTable() > returns array of arrays with given fields 1`] = `
    "Ontime · Schedule Template",
  ],
  [
-    "Event Name",
+    "Project Title",
+    "",
+  ],
+  [
+    "Project Description",
    "",
  ],
  [
@@ -26,7 +26,7 @@ describe('parseField()', () => {
  });

  it('returns an empty string on undefined fields', () => {
-    expect(parseField('presenter', undefined)).toBe('');
+    expect(parseField('presenter')).toBe('');
  });

  describe('simply returns any other value in any other field', () => {
@@ -0,0 +1,18 @@
+import { memo } from 'react';
+
+import style from '../Cuesheet.module.scss';
+
+interface BlockRowProps {
+  title: string;
+}
+
+function BlockRow(props: BlockRowProps) {
+  const { title } = props;
+  return (
+    <tr className={style.blockRow}>
+      <td>{title}</td>
+    </tr>
+  );
+}
+
+export default memo(BlockRow);
@@ -0,0 +1,108 @@
+import { memo } from 'react';
+import { Tooltip } from '@chakra-ui/react';
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { horizontalListSortingStrategy, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { flexRender, HeaderGroup } from '@tanstack/react-table';
+import { OntimeRundownEntry } from 'ontime-types';
+
+import { useLocalStorage } from '../../../common/hooks/useLocalStorage';
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { initialColumnOrder } from '../cuesheetCols';
+
+import { SortableCell } from './SortableCell';
+
+import style from '../Cuesheet.module.scss';
+
+interface CuesheetHeaderProps {
+  headerGroups: () => HeaderGroup<OntimeRundownEntry>[];
+}
+
+function CuesheetHeader(props: CuesheetHeaderProps) {
+  const { headerGroups } = props;
+  const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>('table-order', initialColumnOrder);
+
+  const handleOnDragEnd = (event: DragEndEvent) => {
+    const { delta, active, over } = event;
+
+    // cancel if delta y is greater than 200
+    if (delta.y > 200) return;
+    // cancel if we do not have an over id
+    if (over?.id == null) return;
+
+    // get index of from
+    const fromIndex = columnOrder.indexOf(active.id as string);
+
+    // get index of to
+    const toIndex = columnOrder.indexOf(over.id as string);
+
+    if (toIndex === -1) {
+      return;
+    }
+
+    const reorderedCols = [...columnOrder];
+    const reorderedItem = reorderedCols.splice(fromIndex, 1);
+    reorderedCols.splice(toIndex, 0, reorderedItem[0]);
+
+    saveColumnOrder(reorderedCols);
+  };
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 50,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 50,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  return (
+    <thead className={style.tableHeader}>
+      {headerGroups().map((headerGroup) => {
+        const key = headerGroup.id;
+
+        return (
+          <DndContext key={key} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleOnDragEnd}>
+            <tr key={headerGroup.id}>
+              <th className={style.indexColumn}>
+                <Tooltip label='Event Order' openDelay={tooltipDelayFast}>
+                  #
+                </Tooltip>
+              </th>
+              <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
+                {headerGroup.headers.map((header) => {
+                  const width = header.getSize();
+
+                  return (
+                    <SortableCell key={header.column.columnDef.id} header={header} style={{ width }}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </SortableCell>
+                  );
+                })}
+              </SortableContext>
+            </tr>
+          </DndContext>
+        );
+      })}
+    </thead>
+  );
+}
+
+export default memo(CuesheetHeader);
@@ -0,0 +1,22 @@
+import { memo } from 'react';
+
+import { millisToDelayString } from '../../../common/utils/dateConfig';
+
+import style from '../Cuesheet.module.scss';
+
+interface DelayRowProps {
+  duration: number;
+}
+
+function DelayRow(props: DelayRowProps) {
+  const { duration } = props;
+  const delayTime = millisToDelayString(duration);
+
+  return (
+    <tr className={style.delayRow}>
+      <td>{delayTime}</td>
+    </tr>
+  );
+}
+
+export default memo(DelayRow);
@@ -0,0 +1,66 @@
+import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
+
+import { getAccessibleColour } from '../../../common/utils/styleUtils';
+
+import style from '../Cuesheet.module.scss';
+
+const pastOpacity = '0.2';
+
+interface EventRowProps {
+  eventIndex: number;
+  isPast?: boolean;
+  selectedRef?: MutableRefObject<HTMLTableRowElement | null>;
+  skip?: boolean;
+  colour?: string;
+}
+
+function EventRow(props: PropsWithChildren<EventRowProps>) {
+  const { children, eventIndex, isPast, selectedRef, skip, colour } = props;
+  const ownRef = useRef<HTMLTableRowElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const bgColour = colour;
+  const textColour = getAccessibleColour(bgColour);
+
+  useLayoutEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+        }
+      },
+      {
+        root: null,
+        threshold: 0.01,
+      },
+    );
+
+    const handleRefCurrent = ownRef.current;
+    if (selectedRef) {
+      setIsVisible(true);
+    } else if (handleRefCurrent) {
+      observer.observe(handleRefCurrent);
+    }
+
+    return () => {
+      if (handleRefCurrent) {
+        observer.unobserve(handleRefCurrent);
+      }
+    };
+  }, [ownRef, selectedRef]);
+
+  return (
+    <tr
+      className={`${style.eventRow} ${skip ? style.skip : ''}`}
+      style={{ opacity: `${isPast ? pastOpacity : '1'}` }}
+      ref={selectedRef ?? ownRef}
+    >
+      <td className={style.indexColumn} style={{ backgroundColor: bgColour, color: textColour?.color }}>
+        {eventIndex}
+      </td>
+      {isVisible ? children : null}
+    </tr>
+  );
+}
+
+export default memo(EventRow);
@@ -101,13 +101,13 @@ $active-colour: $gray-500;
  .actionIcon {
    cursor: pointer;

-    &:hover {
-      color: $active-colour;
-    }
-
    &.enabled {
      color: $active-indicator;
    }
+
+    &:hover {
+      color: $active-colour;
+    }
  }
 }

@@ -3,21 +3,20 @@ import { IoContract } from '@react-icons/all-files/io5/IoContract';
 import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
 import { IoLocate } from '@react-icons/all-files/io5/IoLocate';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
-import { EventData, Playback } from 'ontime-types';
-import { formatDisplay } from 'ontime-utils';
+import { Playback, ProjectData } from 'ontime-types';

+import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
 import useFullscreen from '../../../common/hooks/useFullscreen';
-import { useTimer } from '../../../common/hooks/useSocket';
-import useEventData from '../../../common/hooks-query/useEventData';
-import { formatTime } from '../../../common/utils/time';
+import useProjectData from '../../../common/hooks-query/useProjectData';
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { useCuesheetSettings } from '../store/CuesheetSettings';
-import PlaybackIcon from '../tableElements/PlaybackIcon';
+
+import CuesheetTableHeaderTimers from './CuesheetTableHeaderTimers';

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

 interface CuesheetTableHeaderProps {
-  handleCSVExport: (headerData: EventData) => void;
+  handleExport: (headerData: ProjectData) => void;
  featureData: {
    playback: Playback;
    selectedEventIndex: number | null;
@@ -26,18 +25,17 @@ interface CuesheetTableHeaderProps {
  };
 }

-export default function CuesheetTableHeader({ handleCSVExport, featureData }: CuesheetTableHeaderProps) {
+export default function CuesheetTableHeader({ handleExport, featureData }: CuesheetTableHeaderProps) {
  const followSelected = useCuesheetSettings((state) => state.followSelected);
  const showSettings = useCuesheetSettings((state) => state.showSettings);
  const toggleSettings = useCuesheetSettings((state) => state.toggleSettings);
  const toggleFollow = useCuesheetSettings((state) => state.toggleFollow);
-  const timer = useTimer();
  const { isFullScreen, toggleFullScreen } = useFullscreen();
-  const { data: event } = useEventData();
+  const { data: project } = useProjectData();

-  const exportCsv = () => {
-    if (event) {
-      handleCSVExport(event);
+  const exportProject = () => {
+    if (project) {
+      handleExport(project);
    }
  };

@@ -47,32 +45,17 @@ export default function CuesheetTableHeader({ handleCSVExport, featureData }: Cu
        featureData.numEvents ? featureData.numEvents : '-'
      }`;

-  // prepare presentation variables
-  const isOvertime = (timer.current ?? 0) < 0;
-  const timerNow = timer.current == null ? '-' : `${isOvertime ? '-' : ''}${formatDisplay(timer.current)}`;
-  const timeNow = formatTime(timer.clock, {
-    showSeconds: true,
-    format: 'hh:mm:ss a',
-  });
-
  return (
    <div className={style.header}>
      <div className={style.event}>
-        <div className={style.title}>{event?.title || '-'}</div>
+        <div className={style.title}>{project?.title || '-'}</div>
        <div className={style.eventNow}>{featureData?.titleNow || '-'}</div>
      </div>
      <div className={style.playback}>
        <div className={style.playbackLabel}>{selected}</div>
        <PlaybackIcon state={featureData.playback} />
      </div>
-      <div className={style.timer}>
-        <div className={style.timerLabel}>Running Timer</div>
-        <div className={style.value}>{timerNow}</div>
-      </div>
-      <div className={style.clock}>
-        <div className={style.clockLabel}>Time Now</div>
-        <div className={style.value}>{timeNow}</div>
-      </div>
+      <CuesheetTableHeaderTimers />
      <div className={style.headerActions}>
        <Tooltip openDelay={tooltipDelayFast} label='Toggle follow'>
          <span onClick={() => toggleFollow()} className={`${style.actionIcon} ${followSelected ? style.enabled : ''}`}>
@@ -89,9 +72,9 @@ export default function CuesheetTableHeader({ handleCSVExport, featureData }: Cu
            {isFullScreen ? <IoContract /> : <IoExpand />}
          </span>
        </Tooltip>
-        <Tooltip openDelay={tooltipDelayFast} label='Export rundown to CSV'>
-          <span className={style.actionIcon} onClick={exportCsv}>
-            CSV
+        <Tooltip openDelay={tooltipDelayFast} label='Export rundown'>
+          <span className={style.actionIcon} onClick={exportProject}>
+            Export
          </span>
        </Tooltip>
      </div>
@@ -0,0 +1,31 @@
+import { formatDisplay } from 'ontime-utils';
+
+import { useTimer } from '../../../common/hooks/useSocket';
+import { formatTime } from '../../../common/utils/time';
+
+import style from './CuesheetTableHeader.module.scss';
+
+export default function CuesheetTableHeaderTimers() {
+  const timer = useTimer();
+
+  // prepare presentation variables
+  const isOvertime = (timer.current ?? 0) < 0;
+  const timerNow = timer.current == null ? '-' : `${isOvertime ? '-' : ''}${formatDisplay(timer.current)}`;
+  const timeNow = formatTime(timer.clock, {
+    showSeconds: true,
+    format: 'hh:mm:ss a',
+  });
+
+  return (
+    <>
+      <div className={style.timer}>
+        <div className={style.timerLabel}>Running Timer</div>
+        <div className={style.value}>{timerNow}</div>
+      </div>
+      <div className={style.clock}>
+        <div className={style.clockLabel}>Time Now</div>
+        <div className={style.value}>{timeNow}</div>
+      </div>
+    </>
+  );
+}
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Button, Checkbox, Switch } from '@chakra-ui/react';
 import { Column } from '@tanstack/react-table';
 import { OntimeRundownEntry } from 'ontime-types';
@@ -19,7 +20,7 @@ interface CuesheetTableSettingsProps {
  handleClearToggles: () => void;
 }

-export default function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
+function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
  const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props;
  const showPrevious = useCuesheetSettings((state) => state.showPrevious);
  const togglePreviousVisibility = useCuesheetSettings((state) => state.togglePreviousVisibility);
@@ -81,3 +82,5 @@ export default function CuesheetTableSettings(props: CuesheetTableSettingsProps)
    </div>
  );
 }
+
+export default memo(CuesheetTableSettings);
@@ -1,17 +1,13 @@
 import { useCallback } from 'react';
-import { Tooltip } from '@chakra-ui/react';
 import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
-import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
-import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
 import { CellContext, ColumnDef } from '@tanstack/react-table';
 import { OntimeEvent, OntimeRundownEntry, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';

-import { millisToDelayString } from '../../common/utils/dateConfig';
-import { tooltipDelayFast } from '../../ontimeConfig';
+import DelayIndicator from '../../common/components/delay-indicator/DelayIndicator';

+import EditableCell from './cuesheet-table-elements/EditableCell';
 import { useCuesheetSettings } from './store/CuesheetSettings';
-import EditableCell from './tableElements/EditableCell';

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

@@ -20,30 +16,6 @@ function makePublic(row: CellContext<OntimeRundownEntry, unknown>) {
  return cellValue ? <IoCheckmark className={style.check} /> : '';
 }

-function DelayIndicator(props: { delayValue: number }) {
-  const { delayValue } = props;
-  if (delayValue < 0) {
-    return (
-      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
-        <span className={style.delaySymbol}>
-          <IoChevronDown />
-        </span>
-      </Tooltip>
-    );
-  }
-
-  if (delayValue > 0) {
-    return (
-      <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
-        <span className={style.delaySymbol}>
-          <IoChevronUp />
-        </span>
-      </Tooltip>
-    );
-  }
-  return null;
-}
-
 function MakeTimer({ getValue, row: { original } }: CellContext<OntimeRundownEntry, unknown>) {
  const showDelayedTimes = useCuesheetSettings((state) => state.showDelayedTimes);
  const cellValue = (getValue() as number | null) ?? 0;
@@ -1,5 +1,5 @@
 import { stringify } from 'csv-stringify/browser/esm/sync';
-import { EventData, OntimeEntryCommonKeys, OntimeRundown, UserFields } from 'ontime-types';
+import { OntimeEntryCommonKeys, OntimeRundown, ProjectData, UserFields } from 'ontime-types';
 import { millisToString } from 'ontime-utils';

 /**
@@ -38,10 +38,11 @@ export const parseField = (field: keyof OntimeRundown, data: unknown): string =>
 * @param {object} userFields
 * @return {(string[])[]}
 */
-export const makeTable = (headerData: EventData, rundown: OntimeRundown, userFields: UserFields): string[][] => {
+export const makeTable = (headerData: ProjectData, rundown: OntimeRundown, userFields: UserFields): string[][] => {
  const data = [
    ['Ontime · Schedule Template'],
-    ['Event Name', headerData?.title || ''],
+    ['Project Title', headerData?.title || ''],
+    ['Project Description', headerData?.description || ''],
    ['Public URL', headerData?.publicUrl || ''],
    ['Backstage URL', headerData?.backstageUrl || ''],
    [],
@@ -144,7 +144,7 @@ $playback-width: 26rem;
 .eventEditor {
  border-radius: 8px 8px 0 0;
  background-color: $bg-container-l2;
-  box-shadow: rgba(0, 0, 0, 0.35) 0 3px 6px 6px;
+  box-shadow: $large-bottom-drawer-shadow;
  border-top: 1px solid $white-20;
  position: absolute;
  bottom: 0;
@@ -164,7 +164,7 @@ $playback-width: 26rem;
  }

  .header {
-    background-color: $gray-1200;
+    background-color: $gray-1250;
    padding: 0.5rem;
    border-left: 1px solid $white-10;
    border-radius: 0 8px 0 0;
@@ -2,16 +2,15 @@ import { useCallback } from 'react';
 import { Textarea } from '@chakra-ui/react';

 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
-
-import { TitleActions } from './EventEditorDataLeft';
+import { EditorUpdateFields } from '../EventEditor';

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

 interface CountedTextAreaProps {
-  field: TitleActions;
+  field: EditorUpdateFields;
  label: string;
  initialValue: string;
-  submitHandler: (field: TitleActions, value: string) => void;
+  submitHandler: (field: EditorUpdateFields, value: string) => void;
 }

 export default function CountedTextArea(props: CountedTextAreaProps) {
@@ -12,17 +12,17 @@ export default function Info() {
  const showNif = useEditorSettings((state) => state.eventSettings.showNif);

  const titlesNow = {
-    title: data.titles.titleNow || '',
-    subtitle: data.titles.subtitleNow || '',
-    presenter: data.titles.presenterNow || '',
-    note: data.titles.noteNow || '',
+    title: data.eventNow?.title || '',
+    subtitle: data.eventNow?.subtitle || '',
+    presenter: data.eventNow?.presenter || '',
+    note: data.eventNow?.note || '',
  };

  const titlesNext = {
-    title: data.titles.titleNext || '',
-    subtitle: data.titles.subtitleNext || '',
-    presenter: data.titles.presenterNext || '',
-    note: data.titles.noteNext || '',
+    title: data.eventNext?.title || '',
+    subtitle: data.eventNext?.subtitle || '',
+    presenter: data.eventNext?.presenter || '',
+    note: data.eventNext?.note || '',
  };

  const selected = !data.numEvents
@@ -1,9 +1,9 @@
-import useEventData from '../../../common/hooks-query/useEventData';
+import useProjectData from '../../../common/hooks-query/useProjectData';

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

 export default function InfoHeader({ selected }: { selected: string }) {
-  const { data } = useEventData();
+  const { data } = useProjectData();

  return (
    <>
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { VStack } from '@chakra-ui/react';
 import { IoColorWand } from '@react-icons/all-files/io5/IoColorWand';
 import { IoExtensionPuzzle } from '@react-icons/all-files/io5/IoExtensionPuzzle';
@@ -10,11 +10,12 @@ import { IoPushOutline } from '@react-icons/all-files/io5/IoPushOutline';
 import { IoSaveOutline } from '@react-icons/all-files/io5/IoSaveOutline';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';

-import { downloadRundown } from '../../common/api/ontimeApi';
+import { downloadCSV, downloadRundown } from '../../common/api/ontimeApi';
 import QuitIconBtn from '../../common/components/buttons/QuitIconBtn';
 import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
 import useElectronEvent from '../../common/hooks/useElectronEvent';
 import { AppMode, useAppMode } from '../../common/stores/appModeStore';
+import ExportModal, { ExportType } from '../modals/export-modal/ExportModal';

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

@@ -100,6 +101,22 @@ const MenuBar = (props: MenuBarProps) => {
    };
  }, [handleKeyPress, isElectron]);

+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const onModalClose = (exportType?: ExportType) => {
+    setIsModalOpen(false);
+
+    if (!exportType) {
+      return;
+    }
+
+    if (exportType === 'json') {
+      downloadRundown();
+    } else if (exportType === 'csv') {
+      downloadCSV();
+    }
+  };
+
  return (
    <VStack>
      <QuitIconBtn disabled={!isElectron} clickHandler={sendShutdown} size='md' />
@@ -128,12 +145,14 @@ const MenuBar = (props: MenuBarProps) => {
        {...buttonStyle}
        icon={<IoSaveOutline />}
        isDisabled={appMode === AppMode.Run}
-        clickHandler={downloadRundown}
+        clickHandler={() => setIsModalOpen(true)}
        tooltip='Export project file'
        aria-label='Export project file'
        size='sm'
      />

+      <ExportModal onClose={onModalClose} isOpen={isModalOpen} />
+
      <div className={style.gap} />
      <TooltipActionBtn
        {...buttonStyle}
@@ -41,8 +41,8 @@ $el-padding-with-compensation: 24px; // 16 + 8
 .title {
  font-size: $inner-section-text-size;
  color: $gray-500;
-  padding-left: 8px;
-  margin: 8px 0;
+  padding-left: 0.5rem;
+  margin: 0.5rem 0;
  text-transform: uppercase;
 }

@@ -107,6 +107,16 @@ $el-padding-with-compensation: 24px; // 16 + 8
  color: $error-red;
 }

+.success {
+  @include subsection;
+  color: $action-blue;
+}
+
+.feedbackSection {
+  justify-content: flex-start;
+
+}
+
 .buttonSection {
  margin-top: $section-spacing;
  display: flex;
@@ -117,6 +127,10 @@ $el-padding-with-compensation: 24px; // 16 + 8
  flex-grow: 1;
 }

+.vSpacer {
+  height: 2rem;
+}
+
 .shiftRight {
  align-self: flex-end;
 }
@@ -135,6 +149,12 @@ $el-padding-with-compensation: 24px; // 16 + 8
  grid-template-columns: auto 1fr;
 }

+.twoEqualColumn {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
 .padBottom {
  padding-bottom: $element-spacing;
 }
@@ -0,0 +1,9 @@
+@use '../../../theme/v2Styles' as *;
+
+.buttonRow {
+  justify-content: space-between;
+  margin-top: $section-spacing;
+  display: flex;
+  gap: $section-spacing;
+  margin: 0 0.25rem;
+}
@@ -0,0 +1,32 @@
+import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay } from '@chakra-ui/react';
+
+import styles from './ExportModal.module.scss';
+
+export type ExportType = 'csv' | 'json';
+
+interface ExportModalProps {
+  isOpen: boolean;
+  onClose: (type?: ExportType) => void;
+}
+
+export default function ExportModal(props: ExportModalProps) {
+  const { isOpen, onClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} motionPreset='slideInBottom' size='xl' variant='ontime-small'>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader className={styles.modalHeader}>Download options</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody className={styles.buttonRow}>
+          <Button onClick={() => onClose('csv')} variant='ontime-subtle-on-light' width='100%'>
+            Rundown as CSV
+          </Button>
+          <Button onClick={() => onClose('json')} variant='ontime-filled' width='100%'>
+            Project file
+          </Button>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
@@ -16,12 +16,12 @@ import {
  ModalOverlay,
  Textarea,
 } from '@chakra-ui/react';
-import type { EventData } from 'ontime-types';
+import type { ProjectData } from 'ontime-types';

-import { EVENT_DATA, RUNDOWN_TABLE } from '../../../common/api/apiConstants';
+import { PROJECT_DATA, RUNDOWN_TABLE } from '../../../common/api/apiConstants';
 import { postNew } from '../../../common/api/ontimeApi';
-import useEventData from '../../../common/hooks-query/useEventData';
-import { eventDataPlaceholder } from '../../../common/models/EventData';
+import useProjectData from '../../../common/hooks-query/useProjectData';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
 import { ontimeQueryClient } from '../../../common/queryClient';

 import styles from '../Modal.module.scss';
@@ -32,7 +32,7 @@ interface QuickStartProps {
 }

 export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
-  const { data, status } = useEventData();
+  const { data, status } = useProjectData();
  const {
    handleSubmit,
    register,
@@ -49,10 +49,10 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
    if (data) reset(data);
  }, [data, reset]);

-  const onSubmit = async (data: Partial<EventData>) => {
+  const onSubmit = async (data: Partial<ProjectData>) => {
    try {
      await postNew(data);
-      await ontimeQueryClient.invalidateQueries(EVENT_DATA);
+      await ontimeQueryClient.invalidateQueries(PROJECT_DATA);
      await ontimeQueryClient.invalidateQueries(RUNDOWN_TABLE);

      onClose();
@@ -61,7 +61,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
    }
  };

-  const onReset = () => reset(eventDataPlaceholder);
+  const onReset = () => reset(projectDataPlaceholder);

  const disableButtons = status !== 'success' || isSubmitting;
  return (
@@ -86,13 +86,13 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
              <div className={styles.column}>
                <AlertTitle>Note</AlertTitle>
                <AlertDescription>
-                  On submit, application options will be kept but rundown and event data will be reset
+                  On submit, application options will be kept but rundown and project data will be reset
                </AlertDescription>
              </div>
            </Alert>
            <div className={styles.entryRow}>
              <label className={styles.sectionTitle}>
-                Event title
+                Project title
                <Input
                  variant='ontime-filled-on-light'
                  size='sm'
@@ -104,7 +104,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
            </div>
            <div className={styles.entryRow}>
              <label className={styles.sectionTitle}>
-                Event description
+                Project description
                <Input
                  variant='ontime-filled-on-light'
                  size='sm'
@@ -116,7 +116,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
            </div>
            <div className={styles.entryRow}>
              <label className={styles.sectionTitle}>
-                Public Info
+                Public info
                <Textarea
                  variant='ontime-filled-on-light'
                  size='sm'
@@ -128,7 +128,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
            </div>
            <div className={styles.entryRow}>
              <label className={styles.sectionTitle}>
-                Public QR Code Url
+                Public QR code Url
                <Input
                  variant='ontime-filled-on-light'
                  size='sm'
@@ -139,7 +139,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
            </div>
            <div className={styles.entryRow}>
              <label className={styles.sectionTitle}>
-                Backstage Info
+                Backstage info
                <Textarea
                  variant='ontime-filled-on-light'
                  size='sm'
@@ -151,7 +151,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
            </div>
            <div className={styles.entryRow}>
              <label className={styles.sectionTitle}>
-                Backstage QR Code Url
+                Backstage QR code Url
                <Input
                  variant='ontime-filled-on-light'
                  size='sm'
@@ -21,7 +21,9 @@ import style from './SettingsModal.module.scss';
 const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';

 // we wrap the array in an object to be simplify react-hook-form
-type Aliases = { aliases: Alias[] };
+type Aliases = {
+  aliases: Alias[];
+};

 export default function AliasesForm() {
  const { data, status, isFetching, refetch } = useAliases();
@@ -93,8 +95,7 @@ export default function AliasesForm() {
          <AlertDescription>
            Custom aliases allow providing a short name for any ontime URL. <br />
            It serves two primary purposes: <br />
-            - Providing dynamic URLs for automation or unattended screens <br />
-            - Simplifying complex URLs
+            - Providing dynamic URLs for automation or unattended screens <br />- Simplifying complex URLs
            <ModalLink href={aliasesDocsUrl}>For more information, see the docs</ModalLink>
          </AlertDescription>
        </div>
@@ -3,8 +3,12 @@ import { UseFormRegister } from 'react-hook-form';
 import { IconButton, Input, InputGroup, InputRightElement } from '@chakra-ui/react';
 import { IoEyeOutline } from '@react-icons/all-files/io5/IoEyeOutline';

+interface FormInput {
+  [key: string]: string;
+}
+
 interface ModalPinInputProps {
-  register: UseFormRegister<any>;
+  register: UseFormRegister<FormInput>;
  formName: string;
  isDisabled?: boolean;
 }
@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { Input, Textarea } from '@chakra-ui/react';
-import { EventData } from 'ontime-types';
+import { ProjectData } from 'ontime-types';

 import { logAxiosError } from '../../../common/api/apiUtils';
-import { postEventData } from '../../../common/api/eventDataApi';
-import useEventData from '../../../common/hooks-query/useEventData';
+import { postProjectData } from '../../../common/api/projectDataApi';
+import useProjectData from '../../../common/hooks-query/useProjectData';
 import ModalLoader from '../modal-loader/ModalLoader';
 import { inputProps } from '../modalHelper';
 import ModalInput from '../ModalInput';
@@ -13,14 +13,14 @@ import OntimeModalFooter from '../OntimeModalFooter';

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

-export default function EventDataForm() {
-  const { data, status, isFetching, refetch } = useEventData();
+export default function ProjectDataForm() {
+  const { data, status, isFetching, refetch } = useProjectData();
  const {
    handleSubmit,
    register,
    reset,
    formState: { errors, isSubmitting, isDirty, isValid },
-  } = useForm<EventData>({
+  } = useForm<ProjectData>({
    defaultValues: data,
    values: data,
    resetOptions: {
@@ -34,11 +34,11 @@ export default function EventDataForm() {
    }
  }, [data, reset]);

-  const onSubmit = async (formData: EventData) => {
+  const onSubmit = async (formData: ProjectData) => {
    try {
-      await postEventData(formData);
+      await postProjectData(formData);
    } catch (error) {
-      logAxiosError('Error saving event settings', error);
+      logAxiosError('Error saving project data', error);
    } finally {
      await refetch();
    }
@@ -55,10 +55,10 @@ export default function EventDataForm() {
  }

  return (
-    <form onSubmit={handleSubmit(onSubmit)} id='event-data' className={style.sectionContainer}>
+    <form onSubmit={handleSubmit(onSubmit)} id='project-data' className={style.sectionContainer}>
      <ModalInput
        field='title'
-        title='Event title'
+        title='Project title'
        description='Shown in overview screens'
        error={errors.title?.message}
      >
@@ -73,7 +73,7 @@ export default function EventDataForm() {
      </ModalInput>
      <ModalInput
        field='description'
-        title='Event description'
+        title='Project description'
        description='Free field, shown in editor'
        error={errors.description?.message}
      >
@@ -87,7 +87,7 @@ export default function EventDataForm() {
        />
      </ModalInput>
      <div style={{ height: '16px' }} />
-      <ModalInput field='publicInfo' title='Public Info' description='Information shown in public screens'>
+      <ModalInput field='publicInfo' title='Public info' description='Information shown in public screens'>
        <Textarea
          {...inputProps}
          variant='ontime-filled-on-light'
@@ -107,7 +107,7 @@ export default function EventDataForm() {
        />
      </ModalInput>
      <div style={{ height: '16px' }} />
-      <ModalInput field='backstageInfo' title='Backstage Info' description='Information shown in public screens'>
+      <ModalInput field='backstageInfo' title='Backstage info' description='Information shown in public screens'>
        <Textarea
          {...inputProps}
          variant='ontime-filled-on-light'
@@ -128,7 +128,7 @@ export default function EventDataForm() {
        />
      </ModalInput>
      <OntimeModalFooter
-        formId='event-data'
+        formId='project-data'
        handleRevert={onReset}
        isDirty={isDirty}
        isValid={isValid}
@@ -3,19 +3,24 @@
 .aliases {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
  flex-direction: column;
  width: 100%;
-  padding: 8px 0;
+  padding: 0.5rem 0;

  .aliasRow {
    width: 100%;
    display: flex;
    align-items: center;
-    gap: 8px;
+    gap: 0.5rem;
  }

  .grow {
    flex: 1;
  }
 }
+
+.url {
+  font-size: calc(1rem - 2px);
+  user-select: text;
+}
@@ -6,7 +6,7 @@ import AliasesForm from './AliasesForm';
 import AppSettingsModal from './AppSettings';
 import CuesheetSettingsForm from './CuesheetSettingsForm';
 import EditorSettings from './EditorSettings';
-import EventDataForm from './EventDataForm';
+import ProjectDataForm from './ProjectDataForm';
 import ViewSettingsForm from './ViewSettingsForm';

 interface ModalManagerProps {
@@ -22,7 +22,7 @@ export default function SettingsModal(props: ModalManagerProps) {
        <Tabs variant='ontime' size='sm' isLazy>
          <TabList>
            <Tab>App</Tab>
-            <Tab>Event Data</Tab>
+            <Tab>Project Data</Tab>
            <Tab>Editor</Tab>
            <Tab>Cuesheet</Tab>
            <Tab>Views</Tab>
@@ -33,7 +33,7 @@ export default function SettingsModal(props: ModalManagerProps) {
              <AppSettingsModal />
            </TabPanel>
            <TabPanel>
-              <EventDataForm />
+              <ProjectDataForm />
            </TabPanel>
            <TabPanel>
              <EditorSettings />
@@ -1,16 +1,18 @@
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
-import { Input, Switch } from '@chakra-ui/react';
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Input, Switch } from '@chakra-ui/react';
 import { ViewSettings } from 'ontime-types';

 import { logAxiosError } from '../../../common/api/apiUtils';
 import { postViewSettings } from '../../../common/api/ontimeApi';
 import { PopoverPickerRHF } from '../../../common/components/input/popover-picker/PopoverPicker';
+import useInfo from '../../../common/hooks-query/useInfo';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { mtm } from '../../../common/utils/timeConstants';
 import ModalLoader from '../modal-loader/ModalLoader';
 import { inputProps } from '../modalHelper';
 import ModalInput from '../ModalInput';
+import ModalLink from '../ModalLink';
 import ModalSplitInput from '../ModalSplitInput';
 import OntimeModalFooter from '../OntimeModalFooter';

@@ -18,8 +20,12 @@ import InputMillisWithString from './InputMillisWithString';

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

+const cssOverrideDocsUrl = 'https://ontime.gitbook.io/v2/features/custom-styling';
+
 export default function ViewSettingsForm() {
  const { data, status, refetch, isFetching } = useViewSettings();
+  const { data: info, isFetching: isFetchingInfo } = useInfo();
+
  const {
    control,
    handleSubmit,
@@ -75,13 +81,24 @@ export default function ViewSettingsForm() {

  const disableInputs = status === 'loading';

-  if (isFetching) {
+  if (isFetching || isFetchingInfo) {
    return <ModalLoader />;
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} id='view-settings' className={style.sectionContainer}>
      <span className={style.title}>General view settings</span>
+      <Alert status='info' variant='ontime-on-light-info'>
+        <AlertIcon />
+        <div className={style.column}>
+          <AlertTitle>CSS Override</AlertTitle>
+          <AlertDescription>
+            Ontime will use the CSS file at its install location. <br />
+            <span className={style.url}>{info.cssOverride}</span>
+            <ModalLink href={cssOverrideDocsUrl}>For more information, see the docs</ModalLink>
+          </AlertDescription>
+        </div>
+      </Alert>
      <ModalSplitInput
        field='overrideStyles'
        title='Override CSS Styles'
@@ -0,0 +1,66 @@
+import { ChangeEvent, useRef, useState } from 'react';
+import { Input } from '@chakra-ui/react';
+
+import UploadEntry from './upload-entry/UploadEntry';
+import { useUploadModalContextStore } from './uploadModalContext';
+import { validateFile } from './uploadUtils';
+
+import style from './UploadModal.module.scss';
+
+export default function UploadFile() {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { file, setFile, progress } = useUploadModalContextStore();
+
+  const [errors, setErrors] = useState<string>('');
+
+  const clearFile = () => {
+    setFile(null);
+    setErrors('');
+  };
+
+  const handleFile = (event: ChangeEvent<HTMLInputElement>) => {
+    setErrors('');
+
+    const selectedFile = event?.target?.files?.[0];
+    if (!selectedFile) {
+      setFile(null);
+      return;
+    }
+
+    try {
+      validateFile(selectedFile);
+      setFile(selectedFile);
+    } catch (error) {
+      if (error instanceof Error) {
+        setErrors(error.message);
+      } else {
+        setErrors('An unexpected error occurred while validating the file.');
+      }
+      setFile(null);
+    }
+  };
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <>
+      <Input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type='file'
+        onChange={handleFile}
+        accept='.json, .xlsx'
+        data-testid='file-input'
+      />
+      {!file && (
+        <div className={style.uploadArea} onClick={handleClick} role='button'>
+          Click to select Ontime project or xlsx rundown
+        </div>
+      )}
+      {(file || errors) && <UploadEntry file={file} errors={errors} progress={progress} handleClear={clearFile} />}
+    </>
+  );
+}
@@ -5,79 +5,31 @@
 .uploadBody {
  display: flex;
  flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
 }

 .uploadArea {
+  margin: 0 auto;
  width: 100%;
-  min-height: 200px;
-  border: 2px dashed $gray-50;
+  max-width: 550px;
+
+  min-height: 150px;
+  border: 2px dashed $gray-200;
  border-radius: 3px;
  display: grid;
  place-content: center;
  transition-property: background-color;
  transition-duration: $transition-time-action;
+  font-size: calc(1rem - 1px);

  &:hover {
    border: 2px solid $blue-500;
    background-color: $blue-50;
    cursor: pointer;
  }
+
  &.comment {
-    color: gray;
-  }
-}
-
-.uploadedItem {
-  background-color: $gray-50;
-  padding: 8px;
-  display: grid;
-  grid-template-areas:
-          "icon     title     close"
-          "icon     info      ."
-          "progress progress  progress";
-  grid-template-columns: auto 1fr auto;
-  column-gap: 16px;
-  border-radius: 3px;
-
-  .icon {
-    align-self: center;
-    grid-area: icon;
-    font-size: 32px;
-    color: $gray-700;
-  }
-
-  .fileTitle {
-    grid-area: title;
-    font-size: 14px;
-    color: $gray-1350;
-  }
-
-  .fileInfo {
-    grid-area: info;
-    font-size: 12px;
-    color: $gray-1100;
-  }
-
-  .fileProgress {
-    grid-area: progress;
-  }
-
-  .cancelUpload {
-    grid-area: close;
-    cursor: pointer;
-  }
-
-  &.error {
-    .icon {
-      color: $error-red;
-    }
-  }
-
-  &.success {
-    .icon {
-      color: $green-500;
-    }
+    color: $modal-note-color;
  }
 }

@@ -89,3 +41,9 @@
 .pad {
  margin: 8px;
 }
+
+.twoColumn {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
@@ -1,7 +1,6 @@
-import { ChangeEvent, useCallback, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
  Button,
-  Input,
  Modal,
  ModalBody,
  ModalCloseButton,
@@ -9,23 +8,34 @@ import {
  ModalFooter,
  ModalHeader,
  ModalOverlay,
-  Progress,
-  Switch,
 } from '@chakra-ui/react';
-import { IoClose } from '@react-icons/all-files/io5/IoClose';
-import { IoDocumentTextOutline } from '@react-icons/all-files/io5/IoDocumentTextOutline';
-import { IoWarningOutline } from '@react-icons/all-files/io5/IoWarningOutline';
 import { useQueryClient } from '@tanstack/react-query';
+import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';
+import { defaultExcelImportMap, ExcelImportMap } from 'ontime-utils';

-import { RUNDOWN_TABLE } from '../../../common/api/apiConstants';
-import { uploadData } from '../../../common/api/ontimeApi';
-import { useEmitLog } from '../../../common/stores/logger';
-import ModalSplitInput from '../ModalSplitInput';
+import { PROJECT_DATA, RUNDOWN_TABLE, USERFIELDS } from '../../../common/api/apiConstants';
+import { invalidateAllCaches, maybeAxiosError } from '../../../common/api/apiUtils';
+import {
+  patchData,
+  postPreviewExcel,
+  ProjectFileImportOptions,
+  uploadProjectFile,
+} from '../../../common/api/ontimeApi';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
+import { userFieldsPlaceholder } from '../../../common/models/UserFields';

-import { validateFile } from './utils';
+import PreviewExcel from './preview/PreviewExcel';
+import ExcelFileOptions from './upload-options/ExcelFileOptions';
+import OntimeFileOptions from './upload-options/OntimeFileOptions';
+import UploadStepTracker from './upload-step/UploadStep';
+import UploadFile from './UploadFile';
+import { useUploadModalContextStore } from './uploadModalContext';
+import { getPersistedOptions, isExcelFile, isOntimeFile, persistOptions } from './uploadUtils';

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

+export type UploadStep = 'import' | 'review';
+
 interface UploadModalProps {
  onClose: () => void;
  isOpen: boolean;
@@ -33,64 +43,152 @@ interface UploadModalProps {

 export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
  const queryClient = useQueryClient();
-  const { emitError } = useEmitLog();
-  const [errors, setErrors] = useState<string | undefined>();
-  const [isSubmitting, setSubmitting] = useState(false);
-  const [file, setFile] = useState<File | null>(null);
-  const [progress, setProgress] = useState(0);
-  const overrideOptionRef = useRef<HTMLInputElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [success, setSuccess] = useState(false);

-  const handleFile = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    const fileUploaded = event?.target?.files?.[0];
-    if (!fileUploaded) return;
+  const { file, setProgress, clear } = useUploadModalContextStore();

-    const validate = validateFile(fileUploaded);
-    setErrors(validate.errors?.[0]);
+  const [uploadStep, setUploadStep] = useState<UploadStep>('import');
+  const [submitting, setSubmitting] = useState(false);
+  const [rundown, setRundown] = useState<OntimeRundown | null>(null);
+  const [userFields, setUserFields] = useState<UserFields | null>(null);
+  const [project, setProject] = useState<ProjectData | null>(null);

-    if (validate.isValid) {
-      setFile(fileUploaded);
-    } else {
-      setFile(null);
+  const [errors, setErrors] = useState('');
+
+  const ontimeFileOptions = useRef<Partial<ProjectFileImportOptions>>({});
+  const excelFileOptions = useRef<ExcelImportMap>(defaultExcelImportMap);
+
+  const updateOntimeFileOptions = <T extends keyof ProjectFileImportOptions>(
+    field: T,
+    value: ProjectFileImportOptions[T],
+  ) => {
+    ontimeFileOptions.current = { ...ontimeFileOptions.current, [field]: value };
+  };
+
+  const updateExcelFileOptions = <T extends keyof ExcelImportMap>(field: T, value: ExcelImportMap[T]) => {
+    if (excelFileOptions.current[field] !== value) {
+      excelFileOptions.current = { ...excelFileOptions.current, [field]: value };
+    }
+  };
+
+  // We want to populate the options with any previous options given by the user
+  useEffect(() => {
+    const excelOptions = getPersistedOptions('excel');
+    if (excelOptions) {
+      excelFileOptions.current = excelOptions;
    }
  }, []);

-  const handleSubmit = useCallback(async () => {
-    setSubmitting(true);
+  // if the modal re-opens, we want to restart all states
+  useEffect(() => {
+    clear();
+    setUploadStep('import');
+    setSubmitting(false);
+    setRundown(null);
+    setUserFields(null);
+    setProject(null);
+    setErrors('');
+  }, [clear, isOpen]);
+
+  /* uploads file to backend
+   * - in the case of excel, we get the preview
+   * - in the case of project file, this is end of line
+   **/
+  const handleUpload = async () => {
+    let doClose = false;
    if (file) {
+      setSubmitting(true);
+      setErrors('');
      try {
-        const options = {
-          onlyRundown: overrideOptionRef.current?.checked || false,
-        };
-        await uploadData(file, setProgress, options);
+        if (isOntimeFile(file)) {
+          // TODO: we would also like to have preview for ontime project files
+          const options = ontimeFileOptions.current;
+          await handleOntimeFile(file, options);
+          await invalidateAllCaches();
+          doClose = true;
+        } else if (isExcelFile(file)) {
+          const options = excelFileOptions.current;
+          persistOptions({ optionType: 'excel', options });
+          await handleExcelFile(file, options);
+        }
      } catch (error) {
-        emitError(`Failed uploading file: ${error}`);
+        const message = maybeAxiosError(error);
+        setErrors(`Failed uploading file ${message}`);
      } finally {
-        await queryClient.invalidateQueries(RUNDOWN_TABLE);
-        setSuccess(true);
+        setSubmitting(false);
+        if (doClose) {
+          handleClose();
+        }
      }
    }
-    setSubmitting(false);
-  }, [emitError, file, queryClient]);

-  const handleClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  const clearFile = () => {
-    setFile(null);
+    // when we upload excel, we populate state with preview data
+    async function handleExcelFile(file: File, options: ExcelImportMap) {
+      const response = await postPreviewExcel(file, setProgress, options);
+      if (response.status === 200) {
+        setRundown(response.data.rundown);
+        setUserFields(response.data.userFields);
+        setProject(response.data.project);
+        // in excel imports we have an extra review step
+        setUploadStep('review');
+      }
+    }
+
+    // when we upload project files, no extra operations are done
+    async function handleOntimeFile(file: File, options: Partial<ProjectFileImportOptions>) {
+      await uploadProjectFile(file, setProgress, options);
+    }
  };

+  // before closing the modal, we clear data from mutations
  const handleClose = () => {
-    clearFile();
-    setSuccess(false);
-    setErrors(undefined);
-    setProgress(0);
+    clear();
+    setRundown([]);
+    setUserFields(userFieldsPlaceholder);
+    setProject(projectDataPlaceholder);
    onClose();
  };

-  const disableSubmit = !file || isSubmitting;
+  const handleFinalise = async () => {
+    // this step is currently only used for excel files, after preview
+    if (isExcel && rundown && userFields && project) {
+      let doClose = false;
+      setSubmitting(true);
+      try {
+        await patchData({ rundown, userFields, project });
+        queryClient.setQueryData(RUNDOWN_TABLE, rundown);
+        queryClient.setQueryData(USERFIELDS, userFields);
+        queryClient.setQueryData(PROJECT_DATA, project);
+        await queryClient.invalidateQueries({
+          queryKey: [...RUNDOWN_TABLE, ...USERFIELDS, ...PROJECT_DATA],
+        });
+        doClose = true;
+      } catch (error) {
+        const message = maybeAxiosError(error);
+        setErrors(`Failed applying changes ${message}`);
+      } finally {
+        setSubmitting(false);
+        if (doClose) {
+          handleClose();
+        }
+      }
+    }
+  };
+
+  const undoReview = () => {
+    setUploadStep('import');
+    setErrors('');
+  };
+
+  const isImporting = uploadStep === 'import';
+  const isReview = uploadStep === 'review';
+  const isExcel = isExcelFile(file);
+  const isOntime = isOntimeFile(file);
+
+  const handleGoBack = isImporting ? undefined : undoReview;
+  const handleSubmit = isImporting ? handleUpload : handleFinalise;
+  const disableSubmit = (isImporting && !file) || (isReview && rundown === null);
+  const disableGoBack = isImporting;
+  const submitText = isImporting ? 'Import' : 'Finish';

  return (
    <Modal
@@ -101,66 +199,50 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
      size='xl'
      scrollBehavior='inside'
      preserveScrollBarGap
-      variant='ontime-small'
+      variant='ontime-upload'
    >
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>File import</ModalHeader>
        <ModalCloseButton />
        <ModalBody className={style.uploadBody}>
-          <Input
-            ref={fileInputRef}
-            style={{ display: 'none' }}
-            type='file'
-            onChange={handleFile}
-            accept='.json, .xlsx'
-            data-testid='file-input'
-          />
-          <div className={style.uploadArea} onClick={handleClick}>
-            Click to upload Ontime project file
-          </div>
-          {file && (
-            <div className={`${style.uploadedItem} ${success ? style.success : ''}`}>
-              <IoClose className={style.cancelUpload} onClick={clearFile} />
-              <IoDocumentTextOutline className={style.icon} />
-              <span className={style.fileTitle}>{file.name}</span>
-              <span className={style.fileInfo}>{`${(file.size / 1024).toFixed(2)}kb - ${file.type}`}</span>
-              <Progress variant='ontime-on-light' className={style.fileProgress} value={progress} />
-            </div>
+          {isExcel && <UploadStepTracker uploadStep={uploadStep} />}
+          {uploadStep === 'import' ? (
+            <>
+              <UploadFile />
+              {isOntime && <OntimeFileOptions optionsRef={ontimeFileOptions} updateOptions={updateOntimeFileOptions} />}
+              {isExcel && <ExcelFileOptions optionsRef={excelFileOptions} updateOptions={updateExcelFileOptions} />}
+            </>
+          ) : (
+            <PreviewExcel
+              rundown={rundown ?? []}
+              project={project ?? projectDataPlaceholder}
+              userFields={userFields ?? userFieldsPlaceholder}
+            />
          )}
-          {errors && (
-            <div className={`${style.uploadedItem} ${style.error}`}>
-              <IoWarningOutline className={style.icon} />
-              <span className={style.fileTitle}>{errors}</span>
-              <span className={style.fileInfo}>Please try again</span>
-              <Progress className={style.fileProgress} value={progress} />
-            </div>
-          )}
-          <div className={style.uploadOptions}>
-            <span className={style.title}>Import options</span>
-            <ModalSplitInput
-              field=''
-              title='Only import rundown'
-              description='All other options, including application settings will be discarded'
-            >
-              <Switch variant='ontime-on-light' ref={overrideOptionRef} />
-            </ModalSplitInput>
-          </div>
        </ModalBody>
-        <ModalFooter className={`${style.buttonSection} ${style.pad}`}>
-          <Button onClick={handleClose} isDisabled={isSubmitting} variant='ontime-ghost-on-light' size='sm'>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSubmit}
-            isLoading={isSubmitting}
-            isDisabled={disableSubmit}
-            variant='ontime-filled'
-            padding='0 2em'
-            size='sm'
-          >
-            Import
-          </Button>
+        <ModalFooter>
+          <div className={style.feedbackSection}>{errors && <div className={style.error}>{errors}</div>}</div>
+          <div className={`${style.buttonSection} ${style.pad}`}>
+            <Button
+              onClick={handleGoBack}
+              isDisabled={disableGoBack || submitting}
+              variant='ontime-ghost-on-light'
+              size='sm'
+            >
+              Go Back
+            </Button>
+            <Button
+              onClick={handleSubmit}
+              isLoading={submitting}
+              isDisabled={disableSubmit}
+              variant='ontime-filled'
+              padding='0 2em'
+              size='sm'
+            >
+              {submitText}
+            </Button>
+          </div>
        </ModalFooter>
      </ModalContent>
    </Modal>
@@ -0,0 +1,22 @@
+@use "../../../../theme/_ontimeColours" as *;
+
+@mixin pad-item {
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+.previewTable {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(6, auto);
+  font-size: calc(1rem - 2px);
+}
+
+.field {
+  font-weight: 200;
+  @include pad-item;
+}
+
+.value {
+  @include pad-item;
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	fad8d2a933	hotfix ci (#594 ) * ci: upgrade pnpm * version bump	2023-11-16 11:26:01 +01:00
Carlos Valente	54def8b820	feat: small improvements to instance info (#591 ) * refactor: add typings to backend info * refactor: write current version to project file * feat: show location of css override	2023-11-15 20:20:05 +01:00
Carlos Valente	536e447eaa	style: export modal (#592 ) * style: tweaks to export modal	2023-11-14 22:31:14 +01:00
Carlos Valente	1ca3b9c134	refactor: better errors (#590 ) * refactor: improve error messages from server	2023-11-14 21:54:56 +01:00
Carlos Valente	a41fe8806b	configure lint staged (#588 ) * chore: upgrade monorepo deps * chore: configure lint-staged * refactor: lenient use of any	2023-11-13 22:04:55 +01:00
Alex Christoffer Rasmussen	140daef7e7	add eventsPerPage to schedule (#583 ) * add eventsPerPage to schedule --------- Co-authored-by: arc-alex <ac@omnivox.dk>	2023-11-13 22:03:17 +01:00
Carlos Valente	cbed3e4fe4	ci: remove stale bot (#587 )	2023-11-12 21:41:55 +01:00
Carlos Valente	9da7613450	ci: close issues without user activity (#586 ) * ci: close issues without user activity	2023-11-11 14:58:46 +01:00
Carlos Valente	a7980ef2ab	fix: github workflow (#585 ) * fix: github workflow * chore: update lockfile	2023-11-11 14:42:06 +01:00
Carlos Valente	45fe669f0a	feat: excel import (#527 ) * refactor: simplify excel import * chore: add external deepmerge utility * chore: create import map utilities * chore: increase size limits on uploads * style: small presentation tweaks * feat: resolve times on excel import, refs #508	2023-11-11 14:28:43 +01:00
asharonbaltazar	0ce3449083	View Params Persist when Navigating Back (#581 ) * add url search params to local storage * add clearing local storage * use `useLocation` instead of `location.pathname`	2023-11-10 08:49:25 -05:00
Carlos Valente	de715b3d3e	chore: upgrade pnpm (#582 ) * chore: upgrade pnpm	2023-11-09 21:34:17 +01:00
Carlos Valente	6012cb7bd1	chore(lint): lenient eol (#578 ) * chore(lint): lenient eol	2023-11-07 22:39:47 +01:00
Carlos Valente	2c47d90f34	chore: configure project wide linter (#577 ) * chore(lint): configure project-wide linter * chore(lint): improve linting in files * chore(lint): hide warnings in CI	2023-11-07 22:30:39 +01:00
Carlos Valente	943dd19c09	style: wording and UI tweaks (#564 ) * style: wording and UI tweaks * style: prevent note overflow * style: small wording changes * soft blink (#569) * chore: version bump --------- Co-authored-by: Alex Christoffer Rasmussen <alex.christoffer@gmail.com>	2023-11-07 21:27:33 +01:00
Alex Christoffer Rasmussen	138be478ca	Addtime in sec (#576 ) * addtime endpoint --------- Co-authored-by: arc-alex <ac@omnivox.dk>	2023-11-07 21:24:44 +01:00
Carlos Valente	98bd320cbd	style: coloured row background (#571 ) * style: coloured row background	2023-11-05 09:47:55 +01:00
Alex Christoffer Rasmussen	f57faf1837	remove unnecessary import	2023-11-04 08:46:35 +01:00
arc-alex	44f025b359	update node-osc to v9	2023-11-04 08:46:35 +01:00
Carlos Valente	0555d0f400	feat: expand user options for views with schedule (#565 ) * feat: expand user options for views with schedule * fix: selected public id on load * fix: load events on roll * style: remove empty container	2023-11-03 13:47:38 +01:00
Carlos Valente	1e90ce4c1d	style: sticky index column (#566 ) * style: sticky index column	2023-11-02 20:59:30 +01:00
Carlos Valente	2f09d27813	fix: nullcheck for nextPublicEventId in findRoll (#567 ) Co-authored-by: Alex Christoffer Rasmussen <alex.christoffer@gmail.com>	2023-11-02 10:31:05 +01:00
Alex Christoffer Rasmussen	a01046b479	Feat/change event api (#553 ) * feat: change attribute for given event --------- Co-authored-by: Ary <arylmoraesn@gmail.com> Co-authored-by: arc-alex <ac@omnivox.dk>	2023-10-31 19:24:22 +01:00
Enubia	78d5d442cf	feat: added export options (#529 ) * feat: added export options * chore: eslint console proposal --------- Co-authored-by: arc-alex <ac@omnivox.dk>	2023-10-30 11:41:15 +01:00
Brian Teeman	7c234466f7	typos (#562 ) quick fix for some typos/spelling Small way of saying thanks for the software	2023-10-30 11:36:54 +01:00
Carlos Valente	29e5c96d44	fix: prevent error when port is unchanged (#551 ) * fix: prevent error when port is unchanged	2023-10-28 19:01:58 +02:00
Kye Lewis	36b1effaaf	Clarify build before E2E steps (#556 ) Co-authored-by: Kye <kye@klewis.me>	2023-10-26 14:57:11 +02:00
Alex Christoffer Rasmussen	a84c0654e2	Feat resumability (#547 ) * add resumability functionality --------- Co-authored-by: arc-alex <ac@omnivox.dk> Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>	2023-10-24 08:33:17 +02:00
Carlos Valente	b34fe71995	chore: add line end to prettier (#548 )	2023-10-14 19:12:14 +02:00
Carlos Valente	2f74293505	chore: update docs (#537 ) - Avoid duplicate instructions on docker and refer to documentation - Add link to macOS docs on running an unsigned app	2023-10-08 11:47:45 +02:00
Carlos Valente	e2aabe3646	chore: version bump (#528 )	2023-09-17 15:04:55 +02:00
Carlos Valente	7545f6f7d0	refactor: clarify description import (#526 )	2023-09-16 15:24:23 +02:00
Carlos Valente	958c68b6f6	style hover (#525 ) * refactor: render if in view * style: add hover indicator on row	2023-09-16 13:49:12 +02:00
Carlos Valente	a0c5375376	refactor: project data (#523 )	2023-09-15 17:33:30 +02:00
Carlos Valente	9708f0bfc6	refactor: pass events instead of derived data to titles (#493 ) * refactor: pass events instead of derived data to titles	2023-09-14 22:30:23 +02:00
Carlos Valente	13eca98133	refactor: recompose and memoise (#522 )	2023-09-14 21:06:48 +02:00
Carlos Valente	126e31403e	style tweaks (#524 ) * style: allow 2 rows in block title * fix: accidental change to next and progress bar	2023-09-13 21:51:24 +02:00
Carlos Valente	53beea2768	refactor: prevent calling undefined (#521 )	2023-09-13 21:24:49 +02:00
Carlos Valente	0bb09dd039	fix: sanitise cue import (#519 ) * fix: sanitise cue import	2023-09-11 21:06:32 +02:00
Carlos Valente	93fb48ea1c	feat: operator view (#440 ) * feat: operator view * chore: smoke test operator * refactor: small improvements from deepsource --------- Co-authored-by: arihanv <arihanvaranasi@gmail.com> Co-authored-by: arihanv <63890951+arihanv@users.noreply.github.com>	2023-09-11 21:03:11 +02:00
Carlos Valente	1de3e01216	style: localise labels to user device (#509 )	2023-09-03 09:13:56 +02:00