Improve spreadsheet import flow (#839)

* feat: add dropdown to worksheet selection

* feat: move revoke to separate button

* refactor: extract excel flow to separate controller and service

* chore: show spinner when uploading sheet and disable the other option

* chore: don't show "success" when canceling the import

* chore: export boolean types properly to sheets

.github/workflows/build_v3.yml

@@ -0,0 +1,109 @@
+name: Ontime build v3
+
+on:
+# Only trigger manually for now for testing
+#   push:
+#     tags: [ "*" ]
+  workflow_dispatch:
+
+jobs:
+  build_macos:
+    runs-on: macOS-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-mac
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: |
+            ./apps/electron/dist/ontime-macOS-x64.dmg
+            ./apps/electron/dist/ontime-macOS-arm64.dmg
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_windows:
+    runs-on: windows-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-win
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: './apps/electron/dist/ontime-win64.exe'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_ubuntu:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-linux
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: './apps/electron/dist/ontime-linux.AppImage'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test_v3.yml

@@ -0,0 +1,107 @@
+name: Ontime test v3
+
+on:
+# Only trigger manually for now for testing
+#   pull_request:
+#     branches: '*'
+  workflow_dispatch:
+
+jobs:
+  unit-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      # Run code quality per package
+      - name: React - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/client
+
+      - name: Server - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/server
+
+      - name: Utils - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./packages/utils
+
+      - name: Types - Run linter
+        if: always()
+        run: 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
+
+  e2e-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.2
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build client
+        run: pnpm build:local
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm e2e
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: automated-screenshots
+          path: automated-screenshots/
+          retention-days: 14

.gitignore

@@ -45,3 +45,6 @@ apps/server/src/preloaded-db/db.json
 
 # versioning file
 **/ONTIME_VERSION.js
+
+# temporary write files
+**.tmp

.nvmrc

@@ -1 +1 @@
-v16.16.0
+v18.18.2

DEVELOPMENT.md

@@ -97,3 +97,10 @@ Other useful commands
 
 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`
+
+## General Info
+
+# APP Building
+
+We build the app from app.js for almost all applications. The output file will still be named index.cjs. This is because of Electron.
+Building the app from index.ts only applies for applications that don't use electron. index.ts will take over the initialization of the server and UI when electron isn't present.

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16-alpine
+FROM node:18.18-alpine
 
 # Set environment variables
 # Environment Variable to signal that we are running production

README.md

@@ -1,5 +1,5 @@
 [![Ontime build v2](https://github.com/cpvalente/ontime/actions/workflows/build_v2.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/build_v2.yml)
-[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0) [![Documentation in Gitbook](https://badges.aleen42.com/src/gitbook_2.svg)](https://ontime.gitbook.io)
+[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0) 
 
 ## Download the latest releases here
 
@@ -17,13 +17,14 @@ Ontime is an application for creating and managing event running order and timer
 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)
 
 ![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/overview.png)
 
+[Read the docs to learn more](https://docs.getontime.no)
+
 ## Using Ontime
 
 Once installed and running, Ontime starts a background server that is the heart of all processes.
@@ -37,7 +38,7 @@ You can then use the menu in the top left corner to select the desired view.
 The menu will be initially hidden until there is mouse interaction.
 
 In the case of unattended machines or automation, it is possible to use different URL to recall
-individual views and extend view settings using the URL aliases feature
+individual views and extend view settings using the URL presets feature
 
 ```
 For the presentation views
@@ -59,7 +60,7 @@ IP.ADDRESS:4001/editor    > the control interface, same as the app
 IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
 ```
 
-More documentation is available [in our docs](https://ontime.gitbook.io)
+More documentation is available [in our docs](https://docs.getontime.no)
 
 ## Feature List (in no specific order)
 
@@ -84,7 +85,7 @@ More documentation is available [in our docs](https://ontime.gitbook.io)
   - WebSockets
 - [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
+- [x] [Countdown to anything!](https://docs.getontime.no/features/count-to-anything/): have
       a countdown to any scheduled event
 - [x] Multi-platform (available on Windows, MacOS and Linux)
 - [x] [Companion integration](https://bitfocus.io/connections/getontime-ontime)
@@ -120,9 +121,14 @@ Ontime broadcasts its data over WebSockets. This allows you to consume its data
 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
-the [Websocket API](https://ontime.gitbook.io/v2/control-and-feedback/ontime-apis#osc-and-websocket-api)
+We have prepared a few resources to help here:
+- Shipped with Ontime there is a small clock to get you started, it is available at `http://localhost:4001/external/demo` and the [code can be found here](https://github.com/cpvalente/ontime/tree/master/apps/server/src/external/demo)
+- See [this repository](https://github.com/cpvalente/ontime-viewer-template-v2) with a template on
+how to get you started
+- See information about the [Websocket API](https://docs.getontime.no/api/osc-and-ws/)
+<br />
+More information [in the docs](https://docs.getontime.no/features/custom-views/)
+
 
 ### Headless run️
 
@@ -130,7 +136,7 @@ You can self-host and run Ontime in a docker image.
 
 The docker image along with documentation is [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
 
-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)
+If you want to run this image in a Raspberry Pi, please see [the docs](https://docs.getontime.no/additional-notes/use-with-rpi/)
 
 ## Roadmap
 
@@ -192,7 +198,7 @@ Information about the project setup can be found in the [development documentati
 
 # Help
 
-Help is underway! ... and can be found [here](https://ontime.gitbook.io)
+Help is underway! ... and can be found [here](https://docs.getontime.no)
 
 # License
 

apps/client/package.json

@@ -10,6 +10,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@mantine/hooks": "^7.6.2",
     "@react-icons/all-files": "^4.1.0",
     "@sentry/react": "^7.92.0",
     "@tanstack/react-query": "^5.17.9",
@@ -29,7 +30,7 @@
     "react-router-dom": "^6.3.0",
     "typeface-open-sans": "^1.1.13",
     "web-vitals": "^3.1.1",
-    "zustand": "^4.4.7"
+    "zustand": "^4.5.0"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",

apps/client/src/App.tsx

@@ -47,9 +47,8 @@ function App() {
       }
     };
   }, [isElectron, sendToElectron]);
-
   return (
-    <ChakraProvider resetCSS theme={theme}>
+    <ChakraProvider disableGlobalStyle resetCSS theme={theme}>
       <QueryClientProvider client={ontimeQueryClient}>
         <AppContextProvider>
           <BrowserRouter>

apps/client/src/AppRouter.tsx

@@ -1,7 +1,8 @@
 import { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import withAlias from './features/AliasWrapper';
+import Log from './features/log/Log';
+import withPreset from './features/PresetWrapper';
 import withData from './features/viewers/ViewWrapper';
 
 const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
@@ -18,14 +19,14 @@ const Public = lazy(() => import('./features/viewers/public/Public'));
 const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
 const StudioClock = lazy(() => import('./features/viewers/studio/StudioClock'));
 
-const STimer = withAlias(withData(TimerView));
-const SMinimalTimer = withAlias(withData(MinimalTimerView));
-const SClock = withAlias(withData(ClockView));
-const SCountdown = withAlias(withData(Countdown));
-const SBackstage = withAlias(withData(Backstage));
-const SPublic = withAlias(withData(Public));
-const SLowerThird = withAlias(withData(Lower));
-const SStudio = withAlias(withData(StudioClock));
+const STimer = withPreset(withData(TimerView));
+const SMinimalTimer = withPreset(withData(MinimalTimerView));
+const SClock = withPreset(withData(ClockView));
+const SCountdown = withPreset(withData(Countdown));
+const SBackstage = withPreset(withData(Backstage));
+const SPublic = withPreset(withData(Public));
+const SLowerThird = withPreset(withData(Lower));
+const SStudio = withPreset(withData(StudioClock));
 
 const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
 const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
@@ -84,6 +85,14 @@ export default function AppRouter() {
             </EditorFeatureWrapper>
           }
         />
+        <Route
+          path='/log'
+          element={
+            <EditorFeatureWrapper>
+              <Log />
+            </EditorFeatureWrapper>
+          }
+        />
         {/*/!* Send to default if nothing found *!/*/}
         <Route path='*' element={<STimer />} />
       </Routes>

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

@@ -1,7 +1,7 @@
-// REST stuff
-export const ALIASES = ['aliases'];
+// keys in tanstack store
 export const APP_INFO = ['appinfo'];
 export const APP_SETTINGS = ['appSettings'];
+export const CUSTOM_FIELDS = ['customFields'];
 export const HTTP_SETTINGS = ['httpSettings'];
 export const OSC_SETTINGS = ['oscSettings'];
 export const PROJECT_DATA = ['project'];
@@ -9,19 +9,23 @@ export const PROJECT_LIST = ['projectList'];
 export const RUNDOWN = ['rundown'];
 export const RUNTIME = ['runtimeStore'];
 export const SHEET_STATE = ['sheetState'];
-export const USERFIELDS = ['userFields'];
+export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
 
+// resolve location
 const location = window.location;
 const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
 export const isProduction = import.meta.env.MODE === 'production';
 export const isDev = !isProduction;
 
+// resolve port
 const STATIC_PORT = 4001;
 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 apiEntryUrl = `${serverURL}/data`;
+
 export const projectDataURL = `${serverURL}/project`;
 export const rundownURL = `${serverURL}/events`;
 export const ontimeURL = `${serverURL}/ontime`;

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

@@ -0,0 +1,38 @@
+import axios from 'axios';
+import { CustomField, CustomFieldLabel, CustomFields } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const customFieldsPath = `${apiEntryUrl}/custom-fields`;
+
+/**
+ * Requests list of known custom fields
+ */
+export async function getCustomFields(): Promise<CustomFields> {
+  const res = await axios.get(customFieldsPath);
+  return res.data;
+}
+
+/**
+ * Sets list of known custom fields
+ */
+export async function postCustomField(newField: CustomField): Promise<CustomFields> {
+  const res = await axios.post(customFieldsPath, { ...newField });
+  return res.data;
+}
+
+/**
+ * Edits single custom field
+ */
+export async function editCustomField(label: CustomFieldLabel, newField: CustomField): Promise<CustomFields> {
+  const res = await axios.put(`${customFieldsPath}/${label}`, { ...newField });
+  return res.data;
+}
+
+/**
+ * Deletes single custom field
+ */
+export async function deleteCustomField(label: CustomFieldLabel): Promise<CustomFields> {
+  const res = await axios.delete(`${customFieldsPath}/${label}`);
+  return res.data;
+}

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

@@ -0,0 +1,174 @@
+import axios, { AxiosResponse } from 'axios';
+import {
+  DatabaseModel,
+  GetInfo,
+  MessageResponse,
+  ProjectData,
+  ProjectFileListResponse,
+} from 'ontime-types';
+
+import { makeCSV, makeTable } from '../../features/cuesheet/cuesheetUtils';
+
+import { apiEntryUrl } from './constants';
+import { createBlob, downloadBlob } from './utils';
+
+const dbPath = `${apiEntryUrl}/db`;
+
+/**
+ * HTTP request to the current DB
+ */
+async function getDb(): Promise<AxiosResponse<DatabaseModel>> {
+  return axios.get(`${dbPath}/download`);
+}
+
+/**
+ * Request download of the current project file
+ * @param fileName
+ */
+export async function downloadProject(fileName: string = 'ontime-project') {
+  try {
+    const { data, name } = await fileDownload(fileName);
+
+    const fileContent = JSON.stringify(data, null, 2);
+
+    const blob = createBlob(fileContent, 'application/json;charset=utf-8;');
+    downloadBlob(blob, `${name}.json`);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/**
+ * Request download of the current rundown as a CSV file
+ * @param fileName
+ */
+export async function downloadCSV(fileName: string = 'rundown') {
+  try {
+    const { data, name } = await fileDownload(fileName);
+    const { project, rundown, customFields } = data;
+
+    const sheetData = makeTable(project, rundown, customFields);
+    const fileContent = makeCSV(sheetData);
+
+    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
+    downloadBlob(blob, `${name}.csv`);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+/**
+ * HTTP request to upload project file
+ */
+export async function uploadProjectFile(file: File): Promise<MessageResponse> {
+  const formData = new FormData();
+  formData.append('project', file);
+  const response = await axios.post(`${dbPath}/upload`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+  return response.data;
+}
+
+/**
+ * Make patch changes to the objects in the db
+ */
+export async function patchData(patchDb: Partial<DatabaseModel>): Promise<AxiosResponse<DatabaseModel>> {
+  return await axios.patch(dbPath, patchDb);
+}
+
+/**
+ * HTTP request to create a project file
+ */
+export async function createProject(
+  project: Partial<
+    ProjectData & {
+      filename: string;
+    }
+  >,
+): Promise<MessageResponse> {
+  const res = await axios.post(`${dbPath}/new`, project);
+  return res.data;
+}
+
+/**
+ * HTTP request to get the list of available project files
+ */
+export async function getProjects(): Promise<ProjectFileListResponse> {
+  const res = await axios.get(`${dbPath}/all`);
+  return res.data;
+}
+
+/**
+ * HTTP request to load a project file
+ */
+export async function loadProject(filename: string): Promise<MessageResponse> {
+  const res = await axios.post(`${dbPath}/load`, {
+    filename,
+  });
+  return res.data;
+}
+
+/**
+ * HTTP request to duplicate a project file
+ */
+export async function duplicateProject(filename: string, newFilename: string): Promise<MessageResponse> {
+  const url = `${dbPath}/${filename}/duplicate`;
+  const decodedUrl = decodeURIComponent(url);
+  const res = await axios.post(decodedUrl, {
+    newFilename,
+  });
+  return res.data;
+}
+
+/**
+ * HTTP request to rename a project file
+ */
+export async function renameProject(filename: string, newFilename: string): Promise<MessageResponse> {
+  const url = `${dbPath}/${filename}/rename`;
+  const decodedUrl = decodeURIComponent(url);
+  const res = await axios.put(decodedUrl, {
+    newFilename,
+  });
+  return res.data;
+}
+
+/**
+ * HTTP request to delete a project file
+ */
+export async function deleteProject(filename: string): Promise<MessageResponse> {
+  const url = `${dbPath}/${filename}`;
+  const decodedUrl = decodeURIComponent(url);
+  const res = await axios.delete(decodedUrl);
+  return res.data;
+}
+
+/**
+ * HTTP request to retrieve application info
+ */
+export async function getInfo(): Promise<GetInfo> {
+  const res = await axios.get(`${dbPath}/info`);
+  return res.data;
+}
+
+/**
+ * Utility function gets project from db
+ * @param fileName
+ * @returns
+ */
+async function fileDownload(fileName: string): Promise<{ data: DatabaseModel; name: string }> {
+  const response = await getDb();
+
+  const headerLine = response.headers['Content-Disposition'];
+
+  // try and get the filename from the response
+  let name = fileName;
+  if (headerLine != null) {
+    const startFileNameIndex = headerLine.indexOf('"') + 1;
+    const endFileNameIndex = headerLine.lastIndexOf('"');
+    name = headerLine.substring(startFileNameIndex, endFileNameIndex);
+  }
+
+  return { data: response.data, name };
+}

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

@@ -1,103 +0,0 @@
-import axios from 'axios';
-import { OntimeEvent, OntimeRundown, OntimeRundownEntry, RundownCached } from 'ontime-types';
-
-import { rundownURL } from './apiConstants';
-
-/**
- * @description HTTP request to fetch all events
- * @return {Promise}
- */
-export async function fetchCachedRundown(): Promise<RundownCached> {
-  const res = await axios.get(`${rundownURL}/cached`);
-  return res.data;
-}
-
-/**
- * @deprecated use fetchCachedRundown instead
- * @description HTTP request to fetch all events
- * @return {Promise}
- */
-export async function fetchRundown(): Promise<OntimeRundown> {
-  const res = await axios.get(rundownURL);
-  return res.data;
-}
-
-/**
- * @description HTTP request to post new event
- * @return {Promise}
- */
-export async function requestPostEvent(data: Partial<OntimeRundownEntry>) {
-  return axios.post(rundownURL, data);
-}
-
-/**
- * @description HTTP request to put new event
- * @return {Promise}
- */
-export async function requestPutEvent(data: Partial<OntimeRundownEntry>) {
-  return axios.put(rundownURL, data);
-}
-
-type BatchEditEntry = {
-  data: Partial<OntimeEvent>;
-  ids: string[];
-};
-
-/**
- * @description HTTP request to put multiple events
- * @returns {Promise}
- */
-export async function requestBatchPutEvents(data: BatchEditEntry) {
-  return axios.put(`${rundownURL}/batchEdit`, data);
-}
-
-export type ReorderEntry = {
-  eventId: string;
-  from: number;
-  to: number;
-};
-
-/**
- * @description HTTP request to reorder events
- * @return {Promise}
- */
-export async function requestReorderEvent(data: ReorderEntry) {
-  return axios.patch(`${rundownURL}/reorder`, data);
-}
-
-/**
- * @description HTTP request to request application of delay
- * @return {Promise}
- */
-export async function requestApplyDelay(eventId: string) {
-  return axios.patch(`${rundownURL}/applydelay/${eventId}`);
-}
-
-export type SwapEntry = {
-  from: string;
-  to: string;
-};
-
-/**
- * @description HTTP request to swap two events
- * @return {Promise}
- */
-export async function requestEventSwap(data: SwapEntry) {
-  return axios.patch(`${rundownURL}/swap`, data);
-}
-
-/**
- * @description HTTP request to delete given event
- * @return {Promise}
- */
-export async function requestDelete(eventId: string) {
-  return axios.delete(`${rundownURL}/${eventId}`);
-}
-
-/**
- * @description HTTP request to delete all events
- * @return {Promise}
- */
-export async function requestDeleteAll() {
-  return axios.delete(`${rundownURL}/all`);
-}

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

@@ -0,0 +1,42 @@
+import axios, { AxiosResponse } from 'axios';
+import { CustomFields, OntimeRundown } from 'ontime-types';
+import { ImportMap } from 'ontime-utils';
+
+import { apiEntryUrl } from './constants';
+
+const excelPath = `${apiEntryUrl}/excel`;
+
+type PreviewSpreadsheetResponse = {
+  rundown: OntimeRundown;
+  customFields: CustomFields;
+};
+
+/**
+ * upload Excel file to server
+ * @return string - file ID op the uploaded file
+ */
+export async function upload(file: File) {
+  const formData = new FormData();
+  formData.append('excel', file);
+  await axios.post(`${excelPath}/upload`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+}
+
+/**
+ * Get Worksheet names
+ * @return string[] - array of available worksheets
+ */
+export async function getWorksheetNames(): Promise<string[]> {
+  const response: AxiosResponse<string[]> = await axios.get(`${excelPath}/worksheets`);
+  return response.data;
+}
+
+export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
+  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
+    options,
+  });
+  return response.data;
+}

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

@@ -0,0 +1,19 @@
+import axios from 'axios';
+
+import { apiRepoLatest } from '../../externals';
+
+export type HasUpdate = {
+  url: string;
+  version: string;
+};
+
+/**
+ * HTTP request to get the latest version and url from github
+ */
+export async function getLatestVersion(): Promise<HasUpdate> {
+  const res = await axios.get(`${apiRepoLatest}`);
+  return {
+    url: res.data.html_url as string,
+    version: res.data.tag_name as string,
+  };
+}

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

@@ -0,0 +1,21 @@
+import axios, { AxiosResponse } from 'axios';
+import { HttpSettings } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const httpPath = `${apiEntryUrl}/http`;
+
+/**
+ * HTTP request to retrieve http settings
+ */
+export async function getHTTP(): Promise<HttpSettings> {
+  const res = await axios.get(httpPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to mutate http settings
+ */
+export async function postHTTP(data: HttpSettings): Promise<AxiosResponse<HttpSettings>> {
+  return axios.post(httpPath, data);
+}

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

@@ -1,396 +0,0 @@
-import axios, { AxiosResponse } from 'axios';
-import {
-  Alias,
-  DatabaseModel,
-  GetInfo,
-  HttpSettings,
-  MessageResponse,
-  OntimeRundown,
-  OSCSettings,
-  ProjectData,
-  ProjectFileListResponse,
-  Settings,
-  UserFields,
-  ViewSettings,
-} from 'ontime-types';
-import { ExcelImportMap } from 'ontime-utils';
-
-import { apiRepoLatest } from '../../externals';
-import fileDownload from '../utils/fileDownload';
-
-import { ontimeURL } from './apiConstants';
-
-/**
- * @description HTTP request to retrieve application settings
- * @return {Promise}
- */
-export async function getSettings(): Promise<Settings> {
-  const res = await axios.get(`${ontimeURL}/settings`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate application settings
- * @return {Promise}
- */
-export async function postSettings(data: Settings) {
-  return axios.post(`${ontimeURL}/settings`, data);
-}
-
-/**
- * @description HTTP request to retrieve application info
- * @return {Promise}
- */
-export async function getInfo(): Promise<GetInfo> {
-  const res = await axios.get(`${ontimeURL}/info`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to retrieve view settings
- * @return {Promise}
- */
-export async function getView(): Promise<ViewSettings> {
-  const res = await axios.get(`${ontimeURL}/views`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate view settings
- * @return {Promise}
- */
-export async function postViewSettings(data: ViewSettings) {
-  return axios.post(`${ontimeURL}/views`, data);
-}
-
-/**
- * @description HTTP request to retrieve aliases
- * @return {Promise}
- */
-export async function getAliases(): Promise<Alias[]> {
-  const res = await axios.get(`${ontimeURL}/aliases`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to create an alias
- * @return {Promise}
- */
-export async function postAlias(data: Alias) {
-  return axios.post(`${ontimeURL}/aliases`, data);
-}
-
-/**
- * @description HTTP request to update aliases
- * @return {Promise}
- */
-export async function updateAliases(data: Partial<Alias>) {
-  return axios.put(`${ontimeURL}/aliases`, data);
-}
-
-/**
- * @description HTTP request to delete alias
- * @return {Promise}
- */
-export async function deleteAlias(alias: string) {
-  return axios.delete(`${ontimeURL}/aliases/${alias}`);
-}
-
-/**
- * @description HTTP request to retrieve user fields
- * @return {Promise}
- */
-export async function getUserFields(): Promise<UserFields> {
-  const res = await axios.get(`${ontimeURL}/userfields`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate user fields
- * @return {Promise}
- */
-export async function postUserFields(data: UserFields) {
-  return axios.post(`${ontimeURL}/userfields`, data);
-}
-
-/**
- * @description HTTP request to retrieve osc settings
- * @return {Promise}
- */
-export async function getOSC(): Promise<OSCSettings> {
-  const res = await axios.get(`${ontimeURL}/osc`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate osc settings
- * @return {Promise}
- */
-export async function postOSC(data: OSCSettings): Promise<AxiosResponse<OSCSettings>> {
-  return axios.post(`${ontimeURL}/osc`, data);
-}
-
-/**
- * @description HTTP request to retrieve http settings
- * @return {Promise}
- */
-export async function getHTTP(): Promise<HttpSettings> {
-  const res = await axios.get(`${ontimeURL}/http`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to mutate http settings
- * @return {Promise}
- */
-export async function postHTTP(data: HttpSettings): Promise<AxiosResponse<HttpSettings>> {
-  return axios.post(`${ontimeURL}/http`, data);
-}
-
-/**
- * @description HTTP request to download db in CSV format
- */
-export const downloadCSV = (fileName?: string) => {
-  return fileDownload(ontimeURL, { name: fileName ?? 'rundown', type: 'csv' }, { type: 'text/csv;charset=utf-8;' });
-};
-
-/**
- * @description HTTP request to download db in JSON format
- */
-export const downloadRundown = (fileName?: string) => {
-  return fileDownload(
-    ontimeURL,
-    { name: fileName ?? 'rundown', type: 'json' },
-    { type: 'application/json;charset=utf-8;' },
-  );
-};
-
-// TODO: should this be extracted to shared code?
-export type ProjectFileImportOptions = {
-  onlyRundown: boolean;
-};
-
-/**
- * @description HTTP request to upload events db
- * @return {Promise}
- */
-export const uploadProjectFile = async (
-  file: File,
-  setProgress: (value: number) => void,
-  options?: Partial<ProjectFileImportOptions>,
-) => {
-  const formData = new FormData();
-  formData.append('userFile', file);
-
-  const onlyRundown = Boolean(options?.onlyRundown);
-
-  await axios
-    .post(`${ontimeURL}/db?onlyRundown=${onlyRundown}`, formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-      onUploadProgress: (progressEvent) => {
-        const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
-        setProgress(complete);
-      },
-    })
-    .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;
-  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;
-};
-
-/**
- * @description HTTP request to get the latest version and url from github
- * @return {Promise}
- */
-export async function getLatestVersion(): Promise<HasUpdate> {
-  const res = await axios.get(`${apiRepoLatest}`);
-  return {
-    url: res.data.html_url as string,
-    version: res.data.tag_name as string,
-  };
-}
-
-/**
- * @description HTTP request to get the list of available project files
- */
-export async function getProjects(): Promise<ProjectFileListResponse> {
-  const res = await axios.get(`${ontimeURL}/projects`);
-  return res.data;
-}
-
-/**
- * @description HTTP request to load a project file
- */
-export async function loadProject(filename: string): Promise<MessageResponse> {
-  const res = await axios.post(`${ontimeURL}/load-project`, {
-    filename,
-  });
-  return res.data;
-}
-
-/**
- * @description STEP 1
- */
-export const uploadSheetClientFile = async (file: File) => {
-  const formData = new FormData();
-  formData.append('userFile', file);
-  const res = await axios
-    .post(`${ontimeURL}/sheet/clientsecret`, formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    })
-    .then((response) => response.data.id);
-  return res;
-};
-
-/**
- * @description STEP 1 test
- */
-export const getClientSecrect = async () => {
-  const response = await axios.get(`${ontimeURL}/sheet/clientsecret`);
-  return response.data;
-};
-
-/**
- * @description STEP 2
- */
-export const getSheetsAuthUrl = async () => {
-  const response = await axios.get(`${ontimeURL}/sheet/authentication/url`);
-  return response.data;
-};
-
-/**
- * @description STEP 2 test
- */
-export const getAuthentication = async () => {
-  const response = await axios.get(`${ontimeURL}/sheet/authentication`);
-  return response.data;
-};
-
-/**
- * @description STEP 3
- * @returns worksheetOptions
- */
-export const postId = async (id: string) => {
-  const response = await axios.post(`${ontimeURL}/sheet/id`, { id });
-  return response.data;
-};
-
-/**
- * @description STEP 4
- */
-export const postWorksheet = async (id: string, worksheet: string) => {
-  const response = await axios.post(`${ontimeURL}/sheet/worksheet`, { id, worksheet });
-  return response.data;
-};
-
-/**
- * @description STEP 5
- */
-export const postPreviewSheet = async (id: string, options: ExcelImportMap) => {
-  const response = await axios.post(`${ontimeURL}/sheet/pull`, { id, options });
-  return response.data.data;
-};
-
-/**
- * @description STEP 5
- */
-export const postPushSheet = async (id: string, options: ExcelImportMap) => {
-  const response = await axios.post(`${ontimeURL}/sheet-push`, { id, options });
-  return response.data.data;
-};
-
-/**
- * @description HTTP request to rename a project file
- */
-export async function renameProject(filename: string, newFilename: string): Promise<MessageResponse> {
-  const url = `${ontimeURL}/project/${filename}/rename`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.put(decodedUrl, {
-    newFilename,
-  });
-  return res.data;
-}
-
-/**
- * @description HTTP request to duplicate a project file
- */
-export async function duplicateProject(filename: string, newFilename: string): Promise<MessageResponse> {
-  const url = `${ontimeURL}/project/${filename}/duplicate`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.post(decodedUrl, {
-    newFilename,
-  });
-  return res.data;
-}
-
-/**
- * @description HTTP request to delete a project file
- */
-export async function deleteProject(filename: string): Promise<MessageResponse> {
-  const url = `${ontimeURL}/project/${filename}`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.delete(decodedUrl);
-  return res.data;
-}
-
-/**
- * @description HTTP request to create a project file
- */
-export async function createProject(
-  project: Partial<
-    ProjectData & {
-      filename: string;
-    }
-  >,
-): Promise<MessageResponse> {
-  const url = `${ontimeURL}/project`;
-  const decodedUrl = decodeURIComponent(url);
-  const res = await axios.post(decodedUrl, project);
-  return res.data;
-}

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

@@ -0,0 +1,21 @@
+import axios, { AxiosResponse } from 'axios';
+import { OSCSettings } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const oscPath = `${apiEntryUrl}/osc`;
+
+/**
+ * HTTP request to retrieve osc settings
+ */
+export async function getOSC(): Promise<OSCSettings> {
+  const res = await axios.get(oscPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to mutate osc settings
+ */
+export async function postOSC(data: OSCSettings): Promise<AxiosResponse<OSCSettings>> {
+  return axios.post(oscPath, data);
+}

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

@@ -0,0 +1,21 @@
+import axios, { AxiosResponse } from 'axios';
+import { ProjectData } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const projectPath = `${apiEntryUrl}/project`;
+
+/**
+ * HTTP request to fetch project data
+ */
+export async function getProjectData(): Promise<ProjectData> {
+  const res = await axios.get(projectPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to mutate project data
+ */
+export async function postProjectData(data: ProjectData): Promise<AxiosResponse<ProjectData>> {
+  return axios.post(projectPath, data);
+}

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

@@ -1,21 +0,0 @@
-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);
-}

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

@@ -0,0 +1,86 @@
+import axios, { AxiosResponse } from 'axios';
+import { MessageResponse, OntimeEvent, OntimeRundownEntry, RundownCached } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const rundownPath = `${apiEntryUrl}/rundown`;
+
+/**
+ * HTTP request to fetch all events
+ */
+export async function fetchNormalisedRundown(): Promise<RundownCached> {
+  const res = await axios.get(`${rundownPath}/normalised`);
+  return res.data;
+}
+
+/**
+ * HTTP request to post new event
+ */
+export async function requestPostEvent(data: Partial<OntimeRundownEntry>): Promise<AxiosResponse<OntimeRundownEntry>> {
+  return axios.post(rundownPath, data);
+}
+
+/**
+ * HTTP request to put new event
+ */
+export async function requestPutEvent(data: Partial<OntimeRundownEntry>): Promise<AxiosResponse<OntimeRundownEntry>> {
+  return axios.put(rundownPath, data);
+}
+
+type BatchEditEntry = {
+  data: Partial<OntimeEvent>;
+  ids: string[];
+};
+
+/**
+ * HTTP request to put multiple events
+ */
+export async function requestBatchPutEvents(data: BatchEditEntry): Promise<AxiosResponse<MessageResponse>> {
+  return axios.put(`${rundownPath}/batch`, data);
+}
+
+export type ReorderEntry = {
+  eventId: string;
+  from: number;
+  to: number;
+};
+
+/**
+ * HTTP request to reorder events
+ */
+export async function requestReorderEvent(data: ReorderEntry): Promise<AxiosResponse<OntimeRundownEntry>> {
+  return axios.patch(`${rundownPath}/reorder`, data);
+}
+
+export type SwapEntry = {
+  from: string;
+  to: string;
+};
+
+/**
+ * HTTP request to swap two events
+ */
+export async function requestEventSwap(data: SwapEntry): Promise<AxiosResponse<MessageResponse>> {
+  return axios.patch(`${rundownPath}/swap`, data);
+}
+
+/**
+ * HTTP request to request application of delay
+ */
+export async function requestApplyDelay(eventId: string): Promise<AxiosResponse<MessageResponse>> {
+  return axios.patch(`${rundownPath}/applydelay/${eventId}`);
+}
+
+/**
+ * HTTP request to delete given event
+ */
+export async function requestDelete(eventId: string): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(`${rundownPath}/${eventId}`);
+}
+
+/**
+ * HTTP request to delete all events
+ */
+export async function requestDeleteAll(): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(`${rundownPath}/all`);
+}

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

@@ -0,0 +1,21 @@
+import axios, { AxiosResponse } from 'axios';
+import { Settings } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const settingsPath = `${apiEntryUrl}/settings`;
+
+/**
+ * HTTP request to retrieve application settings
+ */
+export async function getSettings(): Promise<Settings> {
+  const res = await axios.get(settingsPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to mutate application settings
+ */
+export async function postSettings(data: Settings): Promise<AxiosResponse<Settings>> {
+  return axios.post(settingsPath, data);
+}

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

@@ -0,0 +1,75 @@
+import axios, { AxiosResponse } from 'axios';
+import { AuthenticationStatus, CustomFields, OntimeRundown } from 'ontime-types';
+import { ImportMap } from 'ontime-utils';
+
+import { apiEntryUrl } from './constants';
+
+const sheetsPath = `${apiEntryUrl}/sheets`;
+
+/**
+ * HTTP request to verify whether we are authenticated with Google Sheet service
+ */
+export const verifyAuthenticationStatus = async (): Promise<{
+  authenticated: AuthenticationStatus;
+  sheetId: string;
+}> => {
+  const response = await axios.get(`${sheetsPath}/connect`);
+  return response.data;
+};
+
+/**
+ * HTTP request to initiate the authentication service with google
+ */
+export const requestConnection = async (
+  file: File,
+  sheetId: string,
+): Promise<{
+  verification_url: string;
+  user_code: string;
+}> => {
+  const formData = new FormData();
+  formData.append('client_secret', file);
+
+  const response = await axios.post(`${sheetsPath}/${sheetId}/connect`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return response.data;
+};
+
+/**
+ * HTTP request to revoke authentication to google sheet
+ */
+export const revokeAuthentication = async (): Promise<{ authenticated: AuthenticationStatus }> => {
+  const response = await axios.post(`${sheetsPath}/revoke`);
+  return response.data;
+};
+
+/**
+ * HTTP request to upload preview the contents of a google sheet as rundown
+ */
+export const previewRundown = async (
+  sheetId: string,
+  options: ImportMap,
+): Promise<{
+  rundown: OntimeRundown;
+  customFields: CustomFields;
+}> => {
+  const response = await axios.post(`${sheetsPath}/${sheetId}/read`, { options });
+  return response.data;
+};
+
+export const getWorksheetNames = async (sheetId: string): Promise<string[]> => {
+  const response: AxiosResponse<string[]> = await axios.post(`${sheetsPath}/${sheetId}/worksheets`);
+  return response.data;
+};
+
+/**
+ * HTTP request to upload the rundown to a google sheet
+ */
+export const uploadRundown = async (sheetId: string, options: ImportMap): Promise<void> => {
+  const response = await axios.post(`${sheetsPath}/${sheetId}/write`, { options });
+  return response.data;
+};

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

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { URLPreset } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const urlPresetsPath = `${apiEntryUrl}/url-presets`;
+
+/**
+ * HTTP request to retrieve aliases
+ */
+export async function getUrlPresets(): Promise<URLPreset[]> {
+  const res = await axios.get(urlPresetsPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to mutate aliases
+ */
+export async function postUrlPresets(data: URLPreset[]): Promise<URLPreset[]> {
+  return axios.post(urlPresetsPath, data);
+}

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

@@ -6,6 +6,11 @@ import { ontimeQueryClient } from '../queryClient';
 import { addLog } from '../stores/logger';
 import { nowInMillis } from '../utils/time';
 
+/**
+ * Utility unrwap a potential axios error
+ * @param error
+ * @returns
+ */
 export function maybeAxiosError(error: unknown) {
   if (axios.isAxiosError(error)) {
     const statusText = (error as AxiosError).response?.statusText ?? '';
@@ -26,6 +31,11 @@ export function maybeAxiosError(error: unknown) {
   }
 }
 
+/**
+ * Utility unrwaps a potential axios error and sends to logger
+ * @param prepend
+ * @param error
+ */
 export function logAxiosError(prepend: string, error: unknown) {
   const message = `${prepend}: ${maybeAxiosError(error)}`;
 
@@ -44,3 +54,30 @@ export function logAxiosError(prepend: string, error: unknown) {
 export async function invalidateAllCaches() {
   await ontimeQueryClient.invalidateQueries();
 }
+
+/**
+ * Creates blob from content
+ * @param fileContent
+ * @param type
+ * @returns
+ */
+export function createBlob(fileContent: string, type: string): Blob {
+  return new Blob([fileContent], { type });
+}
+
+/**
+ * downloads a blob
+ * @param downloadUrl
+ * @param fileName
+ */
+export function downloadBlob(blob: Blob, fileName: string) {
+  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);
+}

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

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

apps/client/src/common/components/context-menu/ContextMenu.tsx

@@ -68,7 +68,7 @@ export const ContextMenu = ({ children }: ContextMenuProps) => {
     <>
       {children}
       <div className={style.contextMenuBackdrop} />
-      <Menu isOpen gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
+      <Menu isOpen size='sm' gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
         <MenuButton
           className={style.contextMenuButton}
           aria-hidden

apps/client/src/common/components/copy-tag/CopyTag.tsx

@@ -10,20 +10,28 @@ interface CopyTagProps {
   label: string;
   className?: string;
   size?: Size;
+  disabled?: boolean;
 }
 
 export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
-  const { label, className, size = 'xs', children } = props;
+  const { label, className, size = 'xs', disabled, children } = props;
 
   const handleClick = () => copyToClipboard(children as string);
 
   return (
     <Tooltip label={label} openDelay={tooltipDelayFast}>
       <ButtonGroup size={size} isAttached className={className}>
-        <Button variant='ontime-subtle' tabIndex={-1}>
+        <Button variant='ontime-subtle' tabIndex={-1} isDisabled={disabled}>
           {children}
         </Button>
-        <IconButton aria-label={label} icon={<IoCopy />} variant='ontime-filled' tabIndex={-1} onClick={handleClick} />
+        <IconButton
+          aria-label={label}
+          icon={<IoCopy />}
+          variant='ontime-filled'
+          tabIndex={-1}
+          onClick={handleClick}
+          isDisabled={disabled}
+        />
       </ButtonGroup>
     </Tooltip>
   );

apps/client/src/common/components/delay-indicator/DelayIndicator.tsx

@@ -17,7 +17,7 @@ export default function DelayIndicator(props: DelayIndicatorProps) {
   if (typeof delayValue === 'number') {
     if (delayValue < 0) {
       return (
-        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue, true)}>
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
           <span className={style.delaySymbol}>
             <IoChevronDown />
           </span>
@@ -27,7 +27,7 @@ export default function DelayIndicator(props: DelayIndicatorProps) {
 
     if (delayValue > 0) {
       return (
-        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue, true)}>
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
           <span className={style.delaySymbol}>
             <IoChevronUp />
           </span>

apps/client/src/common/components/external-link/ExternalLink.module.scss

@@ -6,6 +6,7 @@
   color: $blue-500;
   transition-property: color;
   transition-duration: $transition-time-action;
+  width: fit-content;
 
   &.inline {
     display: inline-flex;

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

@@ -6,21 +6,24 @@ import style from './SwatchSelect.module.scss';
 
 interface SwatchProps {
   color: string;
-  onClick: (color: string) => void;
+  onClick?: (color: string) => void;
   isSelected?: boolean;
 }
 
 export default function Swatch(props: SwatchProps) {
   const { color, isSelected, onClick } = props;
 
-  const classes = cx([style.swatch, isSelected ? style.selected : null]);
+  const handleClick = () => {
+    onClick?.(color);
+  };
+  const classes = cx([style.swatch, isSelected ? style.selected : null, onClick ? style.selectable : null]);
 
   if (!color) {
     return (
-      <div className={`${classes} ${style.center}`} onClick={() => onClick('')}>
+      <div className={`${classes} ${style.center}`} onClick={handleClick}>
         <IoBan />
       </div>
     );
   }
-  return <div className={classes} style={{ backgroundColor: `${color}` }} onClick={() => onClick(color)} />;
+  return <div className={classes} style={{ backgroundColor: `${color}` }} onClick={handleClick} />;
 }

apps/client/src/common/components/input/colour-input/SwatchSelect.module.scss

@@ -5,7 +5,6 @@
 }
 
 .swatch {
-  cursor: pointer;
   width: 2rem;
   height: 2rem;
   aspect-ratio: 1;
@@ -15,6 +14,10 @@
   &.selected {
     border: 2px solid $blue-500;
   }
+
+  &.selectable {
+    cursor: pointer;
+  }
 }
 
 .center {

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

@@ -21,6 +21,7 @@ export default function DelayInput(props: DelayInputProps) {
   // avoid wrong submit on cancel
   let ignoreChange = false;
 
+  // set internal value on duration change
   useEffect(() => {
     if (typeof duration === 'undefined') {
       return;

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

@@ -91,9 +91,6 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
     (event: KeyboardEvent<HTMLInputElement>) => {
       if (event.key === 'Enter') {
         inputRef.current?.blur();
-        validateAndSubmit((event.target as HTMLInputElement).value);
-      } else if (event.key === 'Tab') {
-        validateAndSubmit((event.target as HTMLInputElement).value);
       }
       if (event.key === 'Escape') {
         ignoreChange.current = true;
@@ -101,7 +98,7 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
         resetValue();
       }
     },
-    [resetValue, validateAndSubmit],
+    [resetValue],
   );
 
   const onBlurHandler = useCallback(

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

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { InputGroup, Tooltip } from '@chakra-ui/react';
+import { InputGroup } from '@chakra-ui/react';
 
-import { tooltipDelayFast } from '../../../../ontimeConfig';
 import { cx } from '../../../utils/styleUtils';
 
 import TimeInput from './TimeInput';
@@ -24,16 +23,14 @@ export default function TimeInputWithButton<T extends string>(props: PropsWithCh
 
   return (
     <InputGroup size='sm' className={inputClasses} width='fit-content'>
-      <Tooltip label={placeholder} openDelay={tooltipDelayFast} variant='ontime-ondark'>
-        <TimeInput<T>
-          name={name}
-          submitHandler={submitHandler}
-          time={time}
-          placeholder={placeholder}
-          className={style.inputField}
-          disabled={disabled}
-        />
-      </Tooltip>
+      <TimeInput<T>
+        name={name}
+        submitHandler={submitHandler}
+        time={time}
+        placeholder={placeholder}
+        className={style.inputField}
+        disabled={disabled}
+      />
       {children}
     </InputGroup>
   );

apps/client/src/common/components/loader-overlay/LoaderOverlay.module.scss

@@ -1,15 +1,16 @@
-.screenLoader {
+$loader-size: 4rem;
+
+.overlay {
   position: absolute;
   z-index: 10;
   width: 100%;
   height: 100%;
   display: grid;
   place-content: center;
-  top: 0;
-  background-color: $white-60;
+  background-color: $black-10;
+  backdrop-filter: blur(5px);
 }
 
-$loader-size: 48px;
 
 .loader {
   width: $loader-size;

apps/client/src/common/components/loader-overlay/LoaderOverlay.tsx

@@ -0,0 +1,9 @@
+import style from './LoaderOverlay.module.scss';
+
+export default function LoaderOverlay() {
+  return (
+    <div className={style.overlay}>
+      <span className={style.loader} />
+    </div>
+  );
+}

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

@@ -2,6 +2,7 @@ import { memo, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Link, useLocation, useSearchParams } from 'react-router-dom';
 import { useDisclosure } from '@chakra-ui/react';
+import { useFullscreen } from '@mantine/hooks';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { IoContract } from '@react-icons/all-files/io5/IoContract';
@@ -11,7 +12,6 @@ import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
 import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
-import useFullscreen from '../../hooks/useFullscreen';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import { isKeyEnter } from '../../utils/keyEvent';
 
@@ -22,7 +22,7 @@ import style from './NavigationMenu.module.scss';
 function NavigationMenu() {
   const location = useLocation();
 
-  const { isFullScreen, toggleFullScreen } = useFullscreen();
+  const { fullscreen, toggle } = useFullscreen();
   const { toggleMirror } = useViewOptionsStore();
   const [showButton, setShowButton] = useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -54,7 +54,7 @@ function NavigationMenu() {
     };
   }, []);
 
-  const handleFullscreen = () => toggleFullScreen();
+  const handleFullscreen = () => toggle();
   const handleMirror = () => toggleMirror();
 
   const showEditFormDrawer = () => {
@@ -85,7 +85,7 @@ function NavigationMenu() {
                 }}
               >
                 Toggle Fullscreen
-                {isFullScreen ? <IoContract /> : <IoExpand />}
+                {fullscreen ? <IoContract /> : <IoExpand />}
               </div>
               <div
                 className={style.link}

apps/client/src/common/components/schedule/Schedule.scss

@@ -31,6 +31,12 @@
       text-overflow: ellipsis;
     }
 
+    .entry-secondary {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     &:not(:last-child) {
       padding-bottom: 8px;
     }
@@ -68,4 +74,3 @@
     }
   }
 }
-

apps/client/src/common/components/schedule/ScheduleContext.tsx

@@ -2,8 +2,8 @@ import { createContext, PropsWithChildren, useContext, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { OntimeEvent } from 'ontime-types';
 
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 import { useInterval } from '../../hooks/useInterval';
-import { isStringBoolean } from '../../utils/viewUtils';
 
 interface ScheduleContextState {
   events: OntimeEvent[];

apps/client/src/common/components/schedule/ScheduleItem.tsx

@@ -13,14 +13,13 @@ interface ScheduleItemProps {
   timeStart: number;
   timeEnd: number;
   title: string;
-  presenter?: string;
   backstageEvent: boolean;
   colour: string;
   skip: boolean;
 }
 
 export default function ScheduleItem(props: ScheduleItemProps) {
-  const { selected, timeStart, timeEnd, title, presenter, backstageEvent, colour, skip } = props;
+  const { selected, timeStart, timeEnd, title, backstageEvent, colour, skip } = props;
 
   const start = formatTime(timeStart, formatOptions);
   const end = formatTime(timeEnd, formatOptions);
@@ -39,7 +38,6 @@ export default function ScheduleItem(props: ScheduleItemProps) {
         </div>
       </div>
       <div className='entry-title'>{title}</div>
-      {presenter && <div className='entry-presenter'>{presenter}</div>}
     </li>
   );
 }

apps/client/src/common/components/state/Empty.module.scss

@@ -1,7 +1,7 @@
 .emptyContainer {
   width: 100%;
   text-align: center;
-  color: $gray-1350;
+  color: $white-10;
 
   .empty {
     width: 100%;

apps/client/src/common/components/state/Empty.tsx

@@ -5,7 +5,7 @@ import EmptyImage from '../../../assets/images/empty.svg?react';
 import style from './Empty.module.scss';
 
 interface EmptyProps {
-  text: string;
+  text?: string;
   style?: CSSProperties;
 }
 
@@ -14,7 +14,7 @@ export default function Empty(props: EmptyProps) {
   return (
     <div className={style.emptyContainer} {...rest}>
       <EmptyImage className={style.empty} />
-      <span className={style.text}>{text}</span>
+      {text && <span className={style.text}>{text}</span>}
     </div>
   );
 }

apps/client/src/common/components/tag/Tag.module.scss

@@ -1,11 +1,9 @@
 .tag {
   font-size: calc(1rem - 3px);
   letter-spacing: 0.5px;
-  background-color: $gray-100;
-  color: $ui-black;
+  background-color: $gray-900;
+  color: $ui-white;
   border-radius: 2px;
   padding: 0 0.25rem;
   white-space: nowrap;
-
-  text-transform: capitalize;
 }

apps/client/src/common/components/title-card/TitleCard.scss

@@ -3,34 +3,38 @@
 .title-card {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
+}
 
-  .inline {
-    display: flex;
-  }
+.inline {
+  display: flex;
+}
 
-  .title {
-    font-weight: 600;
-    font-size: clamp(32px, 3.5vw, 50px);
-    color: var(--color-override, $viewer-color);
-    line-height: 1.1em;
-  }
+.title-card__title {
+  font-weight: 600;
+  font-size: clamp(32px, 3.5vw, 50px);
+  color: var(--color-override, $viewer-color);
+  line-height: 1.1em;
+}
 
-  .subtitle, .presenter {
-    font-size: clamp(24px, 2vw, 35px);
-    color: var(--secondary-color-override, $viewer-secondary-color);
-    line-height: 1.1em;
-  }
+.title-card__label {
+  font-size: clamp(1rem, 1.5vw, 1.5rem);
+  font-weight: 400;
+  color: var(--secondary-color-override, $viewer-secondary-color);
+  margin-left: auto;
+  text-transform: uppercase;
 
-  .label {
-    font-size: clamp(16px, 1.5vw, 24px);
-    font-weight: 400;
-    color: var(--secondary-color-override, $viewer-secondary-color);
-    margin-left: auto;
-    text-transform: uppercase;
-
-    &.accent {
-      color: var(--accent-color-override, $accent-color);
-    }
+  &--accent {
+    color: var(--accent-color-override, $accent-color);
+  }
+}
+
+.title-card__secondary {
+  font-size: clamp(1.5rem, 2vw, 2.25rem);
+  color: var(--secondary-color-override, $viewer-secondary-color);
+  line-height: 1.1em;
+
+  &::after {
+    content: '\200b';
   }
 }

apps/client/src/common/components/title-card/TitleCard.tsx

@@ -4,13 +4,12 @@ import './TitleCard.scss';
 
 interface TitleCardProps {
   label: 'now' | 'next';
-  title: string | null;
-  subtitle: string | null;
-  presenter: string | null;
+  title: string;
+  secondary?: string;
 }
 
 export default function TitleCard(props: TitleCardProps) {
-  const { label, title, subtitle, presenter } = props;
+  const { label, title, secondary } = props;
   const { getLocalizedString } = useTranslation();
 
   const accent = label === 'now';
@@ -18,11 +17,12 @@ export default function TitleCard(props: TitleCardProps) {
   return (
     <div className='title-card'>
       <div className='inline'>
-        <span className='presenter'>{presenter}</span>
-        <span className={accent ? 'label accent' : 'label'}>{getLocalizedString(`common.${label}`)}</span>
+        <span className='title-card__title'>{title}</span>
+        <span className={accent ? 'title-card__label title-card__label--accent' : 'title-card__label'}>
+          {getLocalizedString(`common.${label}`)}
+        </span>
       </div>
-      <div className='title'>{title}</div>
-      <div className='subtitle'>{subtitle}</div>
+      <div className='title-card__secondary'>{secondary}</div>
     </div>
   );
 }

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

@@ -1,7 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
 import { Input, InputGroup, InputLeftElement, Select, Switch } from '@chakra-ui/react';
 
-import { isStringBoolean } from '../../utils/viewUtils';
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 
 import { ParamField } from './types';
 

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

@@ -11,7 +11,7 @@
   @extend .drawerContent;
   display: flex;
   justify-content: start;
-  gap: $element-spacing;
+  gap: $section-spacing;
 
   button[type='reset'] {
     padding: 0 2em;
@@ -30,9 +30,9 @@
 
 .columnSection {
   display: flex;
-  padding: $element-spacing;
+  padding: $section-spacing 0;
   flex-direction: column;
-  gap: $element-inner-spacing;
+  gap: $element-spacing;
 }
 
 .title {

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

@@ -1,5 +1,5 @@
 import { FormEvent, useEffect } from 'react';
-import { useLocation, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import {
   Button,
   Drawer,
@@ -12,30 +12,26 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 
-import { useLocalStorage } from '../../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>;
 
+/**
+ * Makes a new URLSearchParams object from the given params object
+ */
 const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
   const defaultValues = paramFields.reduce<Record<string, string>>((acc, { id, defaultValue }) => {
-    return { ...acc, [id]: String(defaultValue) };
+    acc[id] = String(defaultValue);
+    return acc;
   }, {});
+
   return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
-    if (typeof value === 'string' && value.length) {
-      if (defaultValues[id] === value) {
-        return newSearchParams;
-      }
+    if (typeof value === 'string' && value.length && defaultValues[id] !== value) {
       newSearchParams.set(id, value);
-
-      return newSearchParams;
     }
-
     return newSearchParams;
   }, new URLSearchParams());
 };
@@ -47,8 +43,6 @@ 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');
@@ -58,27 +52,6 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
     }
   }, [searchParams, onOpen]);
 
-  /**
-   * disabling this for now, this feature needs more testing
-   * - we seem to have a bug where this is conflicting with the aliases
-   * - I wonder if the logic below needs to be inside an effect, 
-   * both localStorage and searchParams should trigger a component update when they change
-
-  useEffect(() => {
-    const viewParamsObjFromLocalStorage = storedViewParams[pathname];
-
-    if (viewParamsObjFromLocalStorage !== undefined) {
-      const defaultSearchParams = getURLSearchParamsFromObj(viewParamsObjFromLocalStorage);
-      setSearchParams(defaultSearchParams);
-    }
-
-    // linter is asking for `setSearchParams` & `storedViewParams` in the useEffect deps
-    // rule is disabled since adding `setSearchParams` & `storedViewParams` results in unnecessary re-renders
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname]);
-
-  */
-
   const onCloseWithoutSaving = () => {
     onClose();
 
@@ -87,7 +60,6 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
   };
 
   const resetParams = () => {
-    setStoredViewParams({ ...storedViewParams, [pathname]: {} });
     setSearchParams();
   };
 
@@ -96,8 +68,6 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
 
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
-
-    setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject });
     setSearchParams(newSearchParams);
   };
 

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

@@ -1,7 +1,16 @@
-import { UserFields } from 'ontime-types';
+import { CustomFields } from 'ontime-types';
+
+import { capitaliseFirstLetter } from '../../../features/viewers/common/viewUtils';
 
 import { ParamField } from './types';
 
+const makeOptionsFromCustomFields = (customFields: CustomFields, additionalOptions?: Record<string, string>) => {
+  const customFieldOptions = Object.keys(customFields).reduce((acc, key) => {
+    return { ...acc, [`custom-${key}`]: `Custom: ${capitaliseFirstLetter(key)}` };
+  }, additionalOptions ?? {});
+  return customFieldOptions;
+};
+
 const getTimeOption = (timeFormat: string): ParamField => {
   const placeholder = `${timeFormat} (default)`;
   return {
@@ -93,45 +102,56 @@ export const getClockOptions = (timeFormat: string): ParamField[] => [
   },
 ];
 
-export const getTimerOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  hideTimerSeconds,
-  {
-    id: 'hideClock',
-    title: 'Hide Time Now',
-    description: 'Hides the Time Now field',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideCards',
-    title: 'Hide Cards',
-    description: 'Hides the Now and Next cards',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideProgress',
-    title: 'Hide progress bar',
-    description: 'Hides the progress bar',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideMessage',
-    title: 'Hide Presenter Message',
-    description: 'Prevents the screen from displaying messages from the presenter',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'hideExternal',
-    title: 'Hide External',
-    description: 'Prevents the screen from displaying the external field',
-    type: 'boolean',
-    defaultValue: false,
-  },
-];
+export const getTimerOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
+  const secondaryOptions = makeOptionsFromCustomFields(customFields);
+  return [
+    getTimeOption(timeFormat),
+    hideTimerSeconds,
+    {
+      id: 'hideClock',
+      title: 'Hide Time Now',
+      description: 'Hides the Time Now field',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'secondary-src',
+      title: 'Secondary text',
+      description: 'Select the data source for the secondary text',
+      type: 'option',
+      values: secondaryOptions,
+      defaultValue: '',
+    },
+    {
+      id: 'hideCards',
+      title: 'Hide Cards',
+      description: 'Hides the Now and Next cards',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'hideProgress',
+      title: 'Hide progress bar',
+      description: 'Hides the progress bar',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'hideMessage',
+      title: 'Hide Presenter Message',
+      description: 'Prevents the screen from displaying messages from the presenter',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'hideExternal',
+      title: 'Hide External',
+      description: 'Prevents the screen from displaying the external field',
+      type: 'boolean',
+      defaultValue: false,
+    },
+  ];
+};
 
 export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
   hideTimerSeconds,
@@ -226,185 +246,218 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
   },
 ];
 
-export const LOWER_THIRD_OPTIONS: ParamField[] = [
-  {
-    id: 'trigger',
-    title: 'Animation Trigger',
-    description: '',
-    type: 'option',
-    values: {
-      event: 'Event Load',
-      manual: 'Manual',
-    },
-    defaultValue: 'event',
-  },
-  {
-    id: 'top-src',
-    title: 'Top Text',
-    description: '',
-    type: 'option',
-    values: {
-      title: 'Title',
-      subtitle: 'Subtitle',
-      presenter: 'Presenter',
-      lowerMsg: 'Lower Thrid Message',
-    },
-    defaultValue: 'title',
-  },
-  {
-    id: 'bottom-src',
-    title: 'Bottom Text',
-    description: 'Select the text source for the bottom element',
-    type: 'option',
-    values: {
-      title: 'Title',
-      subtitle: 'Subtitle',
-      presenter: 'Presenter',
-      lowerMsg: 'Lower Thrid Message',
-    },
-    defaultValue: 'subtitle',
-  },
-  {
-    id: 'top-colour',
-    title: 'Top Text Colour',
-    description: 'Top text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '0000ff (default)',
-  },
-  {
-    id: 'bottom-colour',
-    title: 'Bottom Text Colour',
-    description: 'Bottom text colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '0000ff (default)',
-  },
-  {
-    id: 'top-bg',
-    title: 'Top Background Colour',
-    description: 'Top text background colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'bottom-bg',
-    title: 'Bottom Background Colour',
-    description: 'Bottom text background colour in hexadecimal',
-    prefix: '#',
-    type: 'string',
-    placeholder: '00000000 (default)',
-  },
-  {
-    id: 'top-size',
-    title: 'Top Text Size',
-    description: 'Font size of the top text',
-    type: 'string',
-    placeholder: '65px',
-  },
-  {
-    id: 'bottom-size',
-    title: 'Bottom Text Size',
-    description: 'Font size of the bottom text',
-    type: 'string',
-    placeholder: '64px',
-  },
-  {
-    id: 'width',
-    title: 'Minimum Width',
-    description: 'Minimum Width of the element',
-    type: 'number',
-    prefix: '%',
-    placeholder: '45 (default)',
-  },
-  {
-    id: 'transition',
-    title: 'Transition',
-    description: 'Transition in time in seconds (default 3)',
-    type: 'number',
-    placeholder: '3 (default)',
-  },
-  {
-    id: 'delay',
-    title: 'Delay',
-    description: 'Delay between transition in and out in seconds (default 3)',
-    type: 'number',
-    placeholder: '3 (default)',
-  },
-  {
-    id: 'key',
-    title: 'Key Colour',
-    description: 'Colour of the background',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'ffffffff (default)',
-  },
-  {
-    id: 'line-colour',
-    title: 'Line Colour',
-    description: 'Colour of the line',
-    prefix: '#',
-    type: 'string',
-    placeholder: 'ff0000ff (default)',
-  },
-];
+export const getLowerThirdOptions = (customFields: CustomFields): ParamField[] => {
+  const topSourceOptions = makeOptionsFromCustomFields(customFields, {
+    title: 'Title',
+    lowerMsg: 'Lower Third Message',
+  });
 
-export const getBackstageOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  {
-    id: 'hidePast',
-    title: 'Hide past events',
-    description: 'Scheduler will only show upcoming events',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'stopCycle',
-    title: 'Stop cycling through event pages',
-    description: 'Schedule will not auto-cycle through events',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'eventsPerPage',
-    title: 'Events per page',
-    description: 'Sets the number of events on the page, can cause overlow',
-    type: 'number',
-    placeholder: '7 (default)',
-  },
-];
+  const bottomSourceOptions = makeOptionsFromCustomFields(customFields, {
+    title: 'Title',
+    lowerMsg: 'Lower Third Message',
+  });
+
+  return [
+    {
+      id: 'trigger',
+      title: 'Animation Trigger',
+      description: '',
+      type: 'option',
+      values: {
+        event: 'Event Load',
+        manual: 'Manual',
+      },
+      defaultValue: 'event',
+    },
+    {
+      id: 'top-src',
+      title: 'Top Text',
+      description: '',
+      type: 'option',
+      values: topSourceOptions,
+      defaultValue: 'title',
+    },
+    {
+      id: 'bottom-src',
+      title: 'Bottom Text',
+      description: 'Select the data source for the bottom element',
+      type: 'option',
+      values: bottomSourceOptions,
+      defaultValue: 'lowerMsg',
+    },
+    {
+      id: 'top-colour',
+      title: 'Top Text Colour',
+      description: 'Top text colour in hexadecimal',
+      prefix: '#',
+      type: 'string',
+      placeholder: '0000ff (default)',
+    },
+    {
+      id: 'bottom-colour',
+      title: 'Bottom Text Colour',
+      description: 'Bottom text colour in hexadecimal',
+      prefix: '#',
+      type: 'string',
+      placeholder: '0000ff (default)',
+    },
+    {
+      id: 'top-bg',
+      title: 'Top Background Colour',
+      description: 'Top text background colour in hexadecimal',
+      prefix: '#',
+      type: 'string',
+      placeholder: '00000000 (default)',
+    },
+    {
+      id: 'bottom-bg',
+      title: 'Bottom Background Colour',
+      description: 'Bottom text background colour in hexadecimal',
+      prefix: '#',
+      type: 'string',
+      placeholder: '00000000 (default)',
+    },
+    {
+      id: 'top-size',
+      title: 'Top Text Size',
+      description: 'Font size of the top text',
+      type: 'string',
+      placeholder: '65px',
+    },
+    {
+      id: 'bottom-size',
+      title: 'Bottom Text Size',
+      description: 'Font size of the bottom text',
+      type: 'string',
+      placeholder: '64px',
+    },
+    {
+      id: 'width',
+      title: 'Minimum Width',
+      description: 'Minimum Width of the element',
+      type: 'number',
+      prefix: '%',
+      placeholder: '45 (default)',
+    },
+    {
+      id: 'transition',
+      title: 'Transition',
+      description: 'Transition in time in seconds (default 3)',
+      type: 'number',
+      placeholder: '3 (default)',
+    },
+    {
+      id: 'delay',
+      title: 'Delay',
+      description: 'Delay between transition in and out in seconds (default 3)',
+      type: 'number',
+      placeholder: '3 (default)',
+    },
+    {
+      id: 'key',
+      title: 'Key Colour',
+      description: 'Colour of the background',
+      prefix: '#',
+      type: 'string',
+      placeholder: 'ffffffff (default)',
+    },
+    {
+      id: 'line-colour',
+      title: 'Line Colour',
+      description: 'Colour of the line',
+      prefix: '#',
+      type: 'string',
+      placeholder: 'ff0000ff (default)',
+    },
+  ];
+};
+
+export const getBackstageOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
+  const secondaryOptions = makeOptionsFromCustomFields(customFields, { note: 'Note' });
+
+  return [
+    getTimeOption(timeFormat),
+    {
+      id: 'hidePast',
+      title: 'Hide past events',
+      description: 'Scheduler will only show upcoming events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'stopCycle',
+      title: 'Stop cycling through event pages',
+      description: 'Schedule will not auto-cycle through events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'eventsPerPage',
+      title: 'Events per page',
+      description: 'Sets the number of events on the page, can cause overlow',
+      type: 'number',
+      placeholder: '7 (default)',
+    },
+    {
+      id: 'secondary-src',
+      title: 'Event secondary text',
+      description: 'Select the data source for auxiliary text shown in now and next cards',
+      type: 'option',
+      values: secondaryOptions,
+      defaultValue: '',
+    },
+  ];
+};
+
+export const getPublicOptions = (timeFormat: string, customFields: CustomFields): ParamField[] => {
+  const secondaryOptions = makeOptionsFromCustomFields(customFields);
+
+  return [
+    getTimeOption(timeFormat),
+    {
+      id: 'hidePast',
+      title: 'Hide past events',
+      description: 'Scheduler will only show upcoming events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'stopCycle',
+      title: 'Stop cycling through event pages',
+      description: 'Schedule will not auto-cycle through events',
+      type: 'boolean',
+      defaultValue: false,
+    },
+    {
+      id: 'eventsPerPage',
+      title: 'Events per page',
+      description: 'Sets the number of events on the page, can cause overlow',
+      type: 'number',
+      placeholder: '7 (default)',
+    },
+    {
+      id: 'secondary-src',
+      title: 'Event secondary text',
+      description: 'Select the data source for auxiliary text shown in now and next cards',
+      type: 'option',
+      values: secondaryOptions,
+      defaultValue: '',
+    },
+  ];
+};
 
-export const getPublicOptions = (timeFormat: string): ParamField[] => [
-  getTimeOption(timeFormat),
-  {
-    id: 'hidePast',
-    title: 'Hide past events',
-    description: 'Scheduler will only show upcoming events',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'stopCycle',
-    title: 'Stop cycling through event pages',
-    description: 'Schedule will not auto-cycle through events',
-    type: 'boolean',
-    defaultValue: false,
-  },
-  {
-    id: 'eventsPerPage',
-    title: 'Events per page',
-    description: 'Sets the number of events on the page, can cause overlow',
-    type: 'number',
-    placeholder: '7 (default)',
-  },
-];
 export const getStudioClockOptions = (timeFormat: string): ParamField[] => [
   getTimeOption(timeFormat),
   hideTimerSeconds,
 ];
 
-export const getOperatorOptions = (userFields: UserFields, timeFormat: string): ParamField[] => {
+export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ParamField[] => {
+  const fieldOptions = makeOptionsFromCustomFields(customFields, { title: 'Title', note: 'Note' });
+
+  const customFieldSelect = Object.keys(customFields).reduce((acc, key) => {
+    return { ...acc, [key]: `Custom: ${capitaliseFirstLetter(key)}` };
+  }, {});
+
   return [
     getTimeOption(timeFormat),
     {
@@ -419,45 +472,29 @@ export const getOperatorOptions = (userFields: UserFields, timeFormat: string):
       title: 'Main data field',
       description: 'Field to be shown in the first line of text',
       type: 'option',
-      values: {
-        title: 'Title',
-        subtitle: 'Subtitle',
-        presenter: 'Presenter',
-      },
+      values: fieldOptions,
+      defaultValue: 'title',
     },
     {
       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',
-      },
+      values: fieldOptions,
+      defaultValue: '',
     },
     {
       id: 'subscribe',
       title: 'Highlight Field',
-      description: 'Choose a field to highlight',
+      description: 'Choose a custom 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',
-      },
+      values: customFieldSelect,
+      defaultValue: '',
     },
     {
       id: 'shouldEdit',
-      title: 'Edit user field',
-      description: 'Allows editing an events user field by long pressing on it. Needs a selected highlighted field',
+      title: 'Edit custom field',
+      description: 'Allows editing an events selected custom field by long pressing.',
       type: 'boolean',
       defaultValue: false,
     },

apps/client/src/common/context/AppContext.tsx

@@ -26,7 +26,6 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
 
   useEffect(() => {
     if (status === 'pending') return;
-    if (!data) return;
     const previousEditor = sessionStorage.getItem(storageKeys.editor);
 
     if (previousEditor && previousEditor === data.editorKey) {
@@ -53,10 +52,6 @@ export const AppContextProvider = ({ children }: PropsWithChildren) => {
         return savedPin == null || savedPin === '' || pin === savedPin;
       }
 
-      if (!data) {
-        return false;
-      }
-
       if (permission === 'editor') {
         const correct = isValid(pin, data.editorKey);
         if (correct) {

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

@@ -1,19 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { ALIASES } from '../api/apiConstants';
-import { getAliases } from '../api/ontimeApi';
-
-export default function useAliases() {
-  const { data, status, isFetching, isError, refetch } = useQuery({
-    queryKey: ALIASES,
-    queryFn: getAliases,
-    placeholderData: [],
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
-    refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
-  });
-
-  return { data, status, isFetching, isError, refetch };
-}

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

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import { CustomFields } from 'ontime-types';
+
+import { queryRefetchInterval } from '../../ontimeConfig';
+import { CUSTOM_FIELDS } from '../api/constants';
+import { getCustomFields } from '../api/customFields';
+
+const placeholder: CustomFields = {};
+
+export default function useCustomFields() {
+  const { data, status, isFetching, isError, refetch } = useQuery({
+    queryKey: CUSTOM_FIELDS,
+    queryFn: getCustomFields,
+    placeholderData: placeholder,
+    retry: 5,
+    retryDelay: (attempt) => attempt * 2500,
+    refetchInterval: queryRefetchInterval,
+    networkMode: 'always',
+  });
+
+  return { data: data ?? placeholder, status, isFetching, isError, refetch };
+}

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

@@ -1,9 +1,9 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { HTTP_SETTINGS } from '../api/apiConstants';
-import { logAxiosError } from '../api/apiUtils';
-import { getHTTP, postHTTP } from '../api/ontimeApi';
+import { HTTP_SETTINGS } from '../api/constants';
+import { getHTTP, postHTTP } from '../api/http';
+import { logAxiosError } from '../api/utils';
 import { httpPlaceholder } from '../models/Http';
 import { ontimeQueryClient } from '../queryClient';
 

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

@@ -2,8 +2,8 @@ import { useQuery } from '@tanstack/react-query';
 import { GetInfo } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { APP_INFO } from '../api/apiConstants';
-import { getInfo } from '../api/ontimeApi';
+import { APP_INFO } from '../api/constants';
+import { getInfo } from '../api/db';
 import { ontimePlaceholderInfo } from '../models/Info';
 
 export default function useInfo() {
@@ -17,5 +17,5 @@ export default function useInfo() {
     networkMode: 'always',
   });
 
-  return { data, status, isError, refetch, isFetching };
+  return { data: data ?? ontimePlaceholderInfo, status, isError, refetch, isFetching };
 }

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

@@ -1,9 +1,9 @@
 import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { OSC_SETTINGS } from '../api/apiConstants';
-import { logAxiosError } from '../api/apiUtils';
-import { getOSC, postOSC } from '../api/ontimeApi';
+import { OSC_SETTINGS } from '../api/constants';
+import { getOSC, postOSC } from '../api/osc';
+import { logAxiosError } from '../api/utils';
 import { oscPlaceholderSettings } from '../models/OscSettings';
 import { ontimeQueryClient } from '../queryClient';
 

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

@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { PROJECT_DATA } from '../api/apiConstants';
-import { getProjectData } from '../api/projectDataApi';
+import { PROJECT_DATA } from '../api/constants';
+import { getProjectData } from '../api/project';
 import { projectDataPlaceholder } from '../models/ProjectData';
 
 export default function useProjectData() {

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

@@ -2,8 +2,8 @@ import { useQuery } from '@tanstack/react-query';
 import { ProjectFileListResponse } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { PROJECT_LIST } from '../api/apiConstants';
-import { getProjects } from '../api/ontimeApi';
+import { PROJECT_LIST } from '../api/constants';
+import { getProjects } from '../api/db';
 
 const placeholderProjectList: ProjectFileListResponse = {
   files: [],

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

@@ -3,8 +3,8 @@ import { useQuery } from '@tanstack/react-query';
 import { NormalisedRundown, OntimeRundown, RundownCached } from 'ontime-types';
 
 import { queryRefetchInterval } from '../../ontimeConfig';
-import { RUNDOWN } from '../api/apiConstants';
-import { fetchCachedRundown } from '../api/eventsApi';
+import { RUNDOWN } from '../api/constants';
+import { fetchNormalisedRundown } from '../api/rundown';
 
 // revision is -1 so that the remote revision is higher
 const cachedRundownPlaceholder = { order: [] as string[], rundown: {} as NormalisedRundown, revision: -1 };
@@ -12,7 +12,7 @@ const cachedRundownPlaceholder = { order: [] as string[], rundown: {} as Normali
 export default function useRundown() {
   const { data, status, isError, refetch, isFetching } = useQuery<RundownCached>({
     queryKey: RUNDOWN,
-    queryFn: fetchCachedRundown,
+    queryFn: fetchNormalisedRundown,
     placeholderData: cachedRundownPlaceholder,
     retry: 5,
     retryDelay: (attempt) => attempt * 2500,

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

@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
+import { unobfuscate } from 'ontime-utils';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { APP_SETTINGS } from '../api/apiConstants';
-import { getSettings } from '../api/ontimeApi';
+import { APP_SETTINGS } from '../api/constants';
+import { getSettings } from '../api/settings';
 import { ontimePlaceholderSettings } from '../models/OntimeSettings';
 
 export default function useSettings() {
@@ -14,7 +15,17 @@ export default function useSettings() {
     retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
     networkMode: 'always',
+    select: (data) => {
+      const unobfuscated = { ...data };
+      if (data.editorKey) {
+        unobfuscated.editorKey = unobfuscate(data.editorKey);
+      }
+      if (data.operatorKey) {
+        unobfuscated.operatorKey = unobfuscate(data.operatorKey);
+      }
+      return unobfuscated;
+    },
   });
 
-  return { data, status, isFetching, isError, refetch };
+  return { data: data ?? ontimePlaceholderSettings, status, isFetching, isError, refetch };
 }

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

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { URL_PRESETS } from '../api/constants';
+import { getUrlPresets } from '../api/urlPresets';
+
+export default function useUrlPresets() {
+  const { data, status, isError, refetch } = useQuery({
+    queryKey: URL_PRESETS,
+    queryFn: getUrlPresets,
+    placeholderData: [],
+    retry: 5,
+    retryDelay: (attempt) => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
+  });
+
+  return { data: data ?? [], status, isError, refetch };
+}

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

@@ -1,20 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { queryRefetchInterval } from '../../ontimeConfig';
-import { USERFIELDS } from '../api/apiConstants';
-import { getUserFields } from '../api/ontimeApi';
-import { userFieldsPlaceholder } from '../models/UserFields';
-
-export default function useUserFields() {
-  const { data, status, isFetching, isError, refetch } = useQuery({
-    queryKey: USERFIELDS,
-    queryFn: getUserFields,
-    placeholderData: userFieldsPlaceholder,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
-    refetchInterval: queryRefetchInterval,
-    networkMode: 'always',
-  });
-
-  return { data, status, isFetching, isError, refetch };
-}

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

@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { VIEW_SETTINGS } from '../api/apiConstants';
-import { getView } from '../api/ontimeApi';
+import { VIEW_SETTINGS } from '../api/constants';
+import { getView } from '../api/viewSettings';
 import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';
 
 export default function useViewSettings() {

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

@@ -3,8 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { isOntimeEvent, MaybeString, OntimeEvent, OntimeRundownEntry, RundownCached } from 'ontime-types';
 import { getLinkedTimes, getPreviousEventNormal, reorderArray, swapEventData } from 'ontime-utils';
 
-import { RUNDOWN } from '../api/apiConstants';
-import { logAxiosError } from '../api/apiUtils';
+import { RUNDOWN } from '../api/constants';
 import {
   ReorderEntry,
   requestApplyDelay,
@@ -16,7 +15,8 @@ import {
   requestPutEvent,
   requestReorderEvent,
   SwapEntry,
-} from '../api/eventsApi';
+} from '../api/rundown';
+import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
 import { forgivingStringToMillis } from '../utils/dateConfig';
 
@@ -25,9 +25,7 @@ import { forgivingStringToMillis } from '../utils/dateConfig';
  */
 export const useEventAction = () => {
   const queryClient = useQueryClient();
-  const eventSettings = useEditorSettings((state) => state.eventSettings);
-  const defaultPublic = eventSettings.defaultPublic;
-  const startTimeIsLastEnd = eventSettings.startTimeIsLastEnd;
+  const { defaultPublic, linkPrevious, defaultDuration } = useEditorSettings((state) => state.eventSettings);
 
   /**
    * Calls mutation to add new event
@@ -45,11 +43,12 @@ export const useEventAction = () => {
     after?: string;
   };
 
-  type EventOptions = BaseOptions & {
-    defaultPublic?: boolean;
-    lastEventId?: string;
-    startTimeIsLastEnd?: boolean;
-  };
+  type EventOptions = BaseOptions &
+    Partial<{
+      defaultPublic: boolean;
+      linkPrevious: boolean;
+      lastEventId: string;
+    }>;
 
   /**
    * Adds an event to rundown
@@ -61,27 +60,31 @@ export const useEventAction = () => {
       // ************* CHECK OPTIONS specific to events
       if (isOntimeEvent(newEvent)) {
         const applicationOptions = {
-          defaultPublic: options?.defaultPublic ?? defaultPublic,
-          startTimeIsLastEnd: options?.startTimeIsLastEnd ?? startTimeIsLastEnd,
-          lastEventId: options?.lastEventId,
           after: options?.after,
+          defaultPublic: options?.defaultPublic ?? defaultPublic,
+          lastEventId: options?.lastEventId,
+          linkPrevious: options?.linkPrevious ?? linkPrevious,
         };
 
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this has a value
-        const rundownData = queryClient.getQueryData<RundownCached>(RUNDOWN)!;
-        const { rundown } = rundownData;
-
-        if (applicationOptions.startTimeIsLastEnd && applicationOptions?.lastEventId) {
+        if (applicationOptions.linkPrevious && applicationOptions?.lastEventId) {
+          newEvent.linkStart = applicationOptions.lastEventId;
+        } else if (applicationOptions?.lastEventId) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this is a value
+          const rundownData = queryClient.getQueryData<RundownCached>(RUNDOWN)!;
+          const { rundown } = rundownData;
           const previousEvent = rundown[applicationOptions.lastEventId];
           if (isOntimeEvent(previousEvent)) {
             newEvent.timeStart = previousEvent.timeEnd;
-            newEvent.timeEnd = previousEvent.timeEnd;
           }
         }
 
         if (applicationOptions.defaultPublic) {
           newEvent.isPublic = true;
         }
+
+        if (newEvent.duration === undefined && newEvent.timeEnd === undefined) {
+          newEvent.duration = forgivingStringToMillis(defaultDuration);
+        }
       }
 
       // handle adding options that concern all event type
@@ -95,7 +98,7 @@ export const useEventAction = () => {
         logAxiosError('Failed adding event', error);
       }
     },
-    [_addEventMutation, defaultPublic, queryClient, startTimeIsLastEnd],
+    [_addEventMutation, defaultDuration, defaultPublic, linkPrevious],
   );
 
   /**
@@ -150,6 +153,13 @@ export const useEventAction = () => {
     [_updateEventMutation],
   );
 
+  const updateCustomField = useCallback(
+    async (eventId: string, field: string, value: string) => {
+      updateEvent({ id: eventId, custom: { [field]: { value } } });
+    },
+    [updateEvent],
+  );
+
   type TimeField = 'timeStart' | 'timeEnd' | 'duration';
   /**
    * Updates time of existing event
@@ -553,5 +563,6 @@ export const useEventAction = () => {
     swapEvents,
     updateEvent,
     updateTimer,
+    updateCustomField,
   };
 };

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

@@ -1,68 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-//@ts-nocheck -- working on it
-import { useCallback, useEffect, useState } from 'react';
-
-interface WebkitDocument extends Document {
-  webkitFullscreenElement?: Element | null;
-  webkitIsFullScreen?: boolean;
-  webkitExitFullscreen?: () => Promise<void>;
-  webkitRequestFullscreen?: () => Promise<void>;
-}
-
-export default function useFullscreen() {
-  const [isFullScreen, setFullScreen] = useState(
-    document.fullscreenElement || (document as WebkitDocument).webkitFullscreenElement,
-  );
-
-  useEffect(() => {
-    const handleChange = () => {
-      if (typeof (document as WebkitDocument).webkitFullscreenElement !== 'undefined') {
-        setFullScreen((document as WebkitDocument).webkitFullscreenElement);
-      } else {
-        setFullScreen(document.fullscreenElement);
-      }
-    };
-    (document as WebkitDocument).addEventListener('webkitfullscreenchange', handleChange, { passive: true });
-    document.addEventListener('fullscreenchange', handleChange, { passive: true });
-    document.addEventListener('resize', handleChange, { passive: true });
-
-    return () => {
-      (document as WebkitDocument).removeEventListener('webkitfullscreenchange', handleChange);
-      document.removeEventListener('fullscreenchange', handleChange);
-      document.removeEventListener('resize', handleChange);
-    };
-  }, []);
-
-  const toggleFullScreen = useCallback(() => {
-    if (!document.fullscreenElement && !(document as WebkitDocument).webkitIsFullScreen) {
-      // Fullscreen mode is not active, so we can enter fullscreen mode
-      const element = document.documentElement;
-      if (element.requestFullscreen) {
-        // Standard fullscreen API is supported
-        element.requestFullscreen().catch(() => {
-          /* nothing to do */
-        });
-      } else if (element.webkitRequestFullscreen) {
-        // iOS Safari fullscreen API is supported
-        element.webkitRequestFullscreen?.().catch(() => {
-          /* nothing to do */
-        });
-      }
-    } else {
-      // Fullscreen mode is active, so we can exit fullscreen mode
-      if (document.exitFullscreen) {
-        // Standard fullscreen API is supported
-        document.exitFullscreen().catch((error) => {
-          console.error('Error while trying to exit fullscreen:', error);
-        });
-      } else if ((document as WebkitDocument).webkitExitFullscreen) {
-        // iOS Safari fullscreen API is supported
-        (document as WebkitDocument).webkitExitFullscreen?.().catch(() => {
-          /* nothing to do */
-        });
-      }
-    }
-  }, []);
-
-  return { isFullScreen, toggleFullScreen };
-}

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

@@ -6,7 +6,7 @@
 
 import { useMemo, useRef } from 'react';
 
-import { isDev } from '../api/apiConstants';
+import { isDev } from '../api/constants';
 
 type noop = (this: any, ...args: any[]) => any;
 

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

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react';
+
+export default function useScrollIntoView<T extends HTMLElement>(name: string, location?: string) {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    if (location && ref.current) {
+      if (location === name) {
+        ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }
+  }, [location, name]);
+
+  return ref;
+}

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

@@ -41,9 +41,6 @@ export const setMessage = {
   publicVisible: (payload: boolean) => socketSendJson('message', { public: { visible: payload } }),
   lowerText: (payload: string) => socketSendJson('message', { lower: { text: payload } }),
   lowerVisible: (payload: boolean) => socketSendJson('message', { lower: { visible: payload } }),
-  externalText: (payload: string) => socketSendJson('message', { external: { visible: payload } }),
-  externalVisible: (payload: boolean) => socketSendJson('message', { external: { visible: payload } }),
-  onAir: (payload: boolean) => socketSendJson('onAir', payload),
   timerBlink: (payload: boolean) => socketSendJson('message', { timer: { blink: payload } }),
   timerBlackout: (payload: boolean) => socketSendJson('message', { timer: { blackout: payload } }),
 };
@@ -165,10 +162,23 @@ export const setClientName = (newName: string) => socketSendJson('set-client-nam
 
 export const useRuntimeOverview = () => {
   const featureSelector = (state: RuntimeStore) => ({
-    playback: state.timer.playback,
-    clock: state.clock,
-    selectedEventIndex: state.runtime.selectedEventIndex,
-    numEvents: state.runtime.numEvents,
+    plannedStart: state.runtime.plannedStart,
+    actualStart: state.runtime.actualStart,
+    plannedEnd: state.runtime.plannedEnd,
+    expectedEnd: state.runtime.expectedEnd,
+  });
+
+  return useRuntimeStore(featureSelector);
+};
+
+export const useRuntimePlaybackOverview = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    playback: state.timer.playback,
+    clock: state.clock,
+
+    numEvents: state.runtime.numEvents,
+    selectedEventIndex: state.runtime.selectedEventIndex,
+    offset: state.runtime.offset,
   });
 
   return useRuntimeStore(featureSelector);

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

@@ -1,14 +0,0 @@
-import { UserFields } from 'ontime-types';
-
-export const userFieldsPlaceholder: UserFields = {
-  user0: '',
-  user1: '',
-  user2: '',
-  user3: '',
-  user4: '',
-  user5: '',
-  user6: '',
-  user7: '',
-  user8: '',
-  user9: '',
-};

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

@@ -1,9 +1,10 @@
 import { ViewSettings } from 'ontime-types';
 
 export const viewsSettingsPlaceholder: ViewSettings = {
-  overrideStyles: false,
-  normalColor: '#ffffffcc',
-  warningColor: '#FFAB33',
   dangerColor: '#ED3333',
   endMessage: '',
+  freezeEnd: false,
+  normalColor: '#ffffffcc',
+  overrideStyles: false,
+  warningColor: '#FFAB33',
 };

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

@@ -3,6 +3,7 @@ import { create } from 'zustand';
 export enum AppMode {
   Run = 'run',
   Edit = 'edit',
+  Freeze = 'freeze',
 }
 
 const appModeKey = 'ontime-app-mode';

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

@@ -4,35 +4,39 @@ import { booleanFromLocalStorage } from '../utils/localStorage';
 
 type EditorSettings = {
   showQuickEntry: boolean;
-  startTimeIsLastEnd: boolean;
+  linkPrevious: boolean;
   defaultPublic: boolean;
+  defaultDuration: string;
 };
 
 type EditorSettingsStore = {
   eventSettings: EditorSettings;
   setLocalEventSettings: (newState: EditorSettings) => void;
   setShowQuickEntry: (showQuickEntry: boolean) => void;
-  setStartTimeIsLastEnd: (startTimeIsLastEnd: boolean) => void;
+  setLinkPrevious: (linkPrevious: boolean) => void;
   setDefaultPublic: (defaultPublic: boolean) => void;
+  setDefaultDuration: (defaultDuration: string) => void;
 };
 
 enum EditorSettingsKeys {
   ShowQuickEntry = 'ontime-show-quick-entry',
-  StartTimeIsLastEnd = 'ontime-start-is-last-end',
+  LinkPrevious = 'ontime-link-previous',
   DefaultPublic = 'ontime-default-public',
+  DefaultDuration = 'ontime-default-duration',
 }
 
 export const useEditorSettings = create<EditorSettingsStore>((set) => ({
   eventSettings: {
     showQuickEntry: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, false),
-    startTimeIsLastEnd: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
-    defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.ShowQuickEntry, true),
+    linkPrevious: booleanFromLocalStorage(EditorSettingsKeys.LinkPrevious, true),
+    defaultPublic: booleanFromLocalStorage(EditorSettingsKeys.DefaultPublic, true),
+    defaultDuration: localStorage.getItem(EditorSettingsKeys.DefaultDuration) ?? '00:10:00',
   },
 
   setLocalEventSettings: (value) =>
     set(() => {
       localStorage.setItem(EditorSettingsKeys.ShowQuickEntry, String(value.showQuickEntry));
-      localStorage.setItem(EditorSettingsKeys.StartTimeIsLastEnd, String(value.startTimeIsLastEnd));
+      localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(value.linkPrevious));
       localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(value.defaultPublic));
       return { eventSettings: value };
     }),
@@ -43,10 +47,10 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => ({
       return { eventSettings: { ...state.eventSettings, showQuickEntry } };
     }),
 
-  setStartTimeIsLastEnd: (startTimeIsLastEnd) =>
+  setLinkPrevious: (linkPrevious) =>
     set((state) => {
-      localStorage.setItem(EditorSettingsKeys.StartTimeIsLastEnd, String(startTimeIsLastEnd));
-      return { eventSettings: { ...state.eventSettings, startTimeIsLastEnd } };
+      localStorage.setItem(EditorSettingsKeys.LinkPrevious, String(linkPrevious));
+      return { eventSettings: { ...state.eventSettings, linkPrevious } };
     }),
 
   setDefaultPublic: (defaultPublic) =>
@@ -54,4 +58,10 @@ export const useEditorSettings = create<EditorSettingsStore>((set) => ({
       localStorage.setItem(EditorSettingsKeys.DefaultPublic, String(defaultPublic));
       return { eventSettings: { ...state.eventSettings, defaultPublic } };
     }),
+
+  setDefaultDuration: (defaultDuration) =>
+    set((state) => {
+      localStorage.setItem(EditorSettingsKeys.DefaultDuration, String(defaultDuration));
+      return { eventSettings: { ...state.eventSettings, defaultDuration } };
+    }),
 }));

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

@@ -37,8 +37,13 @@ export const runtimeStorePlaceholder: RuntimeStore = {
     },
   },
   runtime: {
-    numEvents: 0,
     selectedEventIndex: null,
+    numEvents: 0,
+    offset: 0,
+    plannedStart: 0,
+    plannedEnd: 0,
+    actualStart: null,
+    expectedEnd: null,
   },
   eventNow: null,
   eventNext: null,
@@ -63,3 +68,14 @@ export const runtimeStore = createWithEqualityFn<RuntimeStore>(
 
 export const useRuntimeStore = <T>(selector: (state: RuntimeStore) => T) =>
   useStoreWithEqualityFn(runtimeStore, selector, deepCompare);
+
+/**
+ * Allows patching a property of the runtime store
+ * @param key
+ * @param value
+ */
+export function patchRuntime<K extends keyof RuntimeStore>(key: K, value: RuntimeStore[K]): void {
+  const state = runtimeStore.getState();
+  state[key] = value;
+  runtimeStore.setState({ ...state });
+}

apps/client/src/common/utils/__tests__/dateConfig.test.js

@@ -14,6 +14,7 @@ describe('test forgivingStringToMillis()', () => {
       { value: '1h0m0s', expect: 1000 * 60 * 60 },
       { value: '23h0m0s', expect: 1000 * 60 * 60 * 23 },
       { value: '12h12m12s', expect: 12 * 1000 + 12 * 60 * 1000 + 12 * 1000 * 60 * 60 },
+      { value: '12H12M12S', expect: 12 * 1000 + 12 * 60 * 1000 + 12 * 1000 * 60 * 60 },
       { value: '2m', expect: 2 * 60 * 1000 },
       { value: '1h5s', expect: 1000 * 60 * 60 + 1000 * 5 },
       { value: '1h2m', expect: 1000 * 60 * 60 + 1000 * 60 * 2 },
@@ -260,17 +261,17 @@ describe('test forgivingStringToMillis()', () => {
 
 describe('millisToDelayString()', () => {
   it('returns null for null values', () => {
-    expect(millisToDelayString(null)).toBeNull();
+    expect(millisToDelayString(null)).toBe('');
   });
   it('returns null 0', () => {
-    expect(millisToDelayString(0)).toBeNull();
+    expect(millisToDelayString(0)).toBe('');
   });
   describe('converts values in seconds', () => {
     it('shows a simple string with value in seconds', () => {
-      expect(millisToDelayString(10000, true)).toBe('+10 sec');
+      expect(millisToDelayString(10000)).toBe('+10 sec');
     });
     it('... and its negative counterpart', () => {
-      expect(millisToDelayString(-10000, true)).toBe('-10 sec');
+      expect(millisToDelayString(-10000)).toBe('-10 sec');
     });
 
     const underAMinute = [1, 500, 1000, 6000, 55000, 59999];
@@ -279,37 +280,36 @@ describe('millisToDelayString()', () => {
         expect(millisToDelayString(value)?.endsWith('sec')).toBe(true);
       });
     });
-    expect(millisToDelayString(null)).toBeNull();
   });
 
   describe('converts values in minutes', () => {
     it('shows a simple string with value in minutes', () => {
-      expect(millisToDelayString(720000, true)).toBe('+12 min');
+      expect(millisToDelayString(720000)).toBe('+12 min');
     });
     it('... and its negative counterpart', () => {
-      expect(millisToDelayString(-720000, true)).toBe('-12 min');
+      expect(millisToDelayString(-720000)).toBe('-12 min');
     });
     it('shows a simple string with value in minutes and seconds', () => {
-      expect(millisToDelayString(630000, true)).toBe('+00:10:30');
+      expect(millisToDelayString(630000)).toBe('+00:10:30');
     });
     it('... and its negative counterpart', () => {
-      expect(millisToDelayString(-630000, true)).toBe('-00:10:30');
+      expect(millisToDelayString(-630000)).toBe('-00:10:30');
     });
 
     const underAnHour = [60000, 360000, 720000];
     underAnHour.forEach((value) => {
       it(`handles ${value}`, () => {
-        expect(millisToDelayString(value, true)?.endsWith('min')).toBe(true);
+        expect(millisToDelayString(value)?.endsWith('min')).toBe(true);
       });
     });
   });
 
   describe('converts values with full time string', () => {
     it('positive added time', () => {
-      expect(millisToDelayString(45015000, true)).toBe('+12:30:15');
+      expect(millisToDelayString(45015000)).toBe('+12:30:15');
     });
     it('negative added time', () => {
-      expect(millisToDelayString(-45015000, true)).toBe('-12:30:15');
+      expect(millisToDelayString(-45015000)).toBe('-12:30:15');
     });
   });
 });

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

@@ -1,4 +1,4 @@
-import { EndAction, OntimeEvent, SupportedEvent, TimerType } from 'ontime-types';
+import { EndAction, EventCustomFields, OntimeEvent, SupportedEvent, TimerType } from 'ontime-types';
 
 import { cloneEvent } from '../eventsManager';
 
@@ -9,8 +9,6 @@ describe('cloneEvent()', () => {
       type: SupportedEvent.Event,
       title: 'title',
       cue: 'cue',
-      subtitle: 'subtitle',
-      presenter: 'presenter',
       note: 'note',
       timeStart: 0,
       duration: 10,
@@ -21,18 +19,11 @@ describe('cloneEvent()', () => {
       skip: false,
       colour: 'F00',
       revision: 10,
-      user0: 'user0',
-      user1: 'user1',
-      user2: 'user2',
-      user3: 'user3',
-      user4: 'user4',
-      user5: 'user5',
-      user6: 'user6',
-      user7: 'user7',
-      user8: 'user8',
-      user9: 'user9',
       timeWarning: 120000,
       timeDanger: 60000,
+      custom: {
+        lighting: { value: '3' },
+      } as EventCustomFields,
     } as OntimeEvent;
 
     const cloned = cloneEvent(original);
@@ -40,8 +31,6 @@ describe('cloneEvent()', () => {
     // @ts-expect-error -- safeguarding this
     expect(cloned?.id).toBe(undefined);
     expect(cloned.title).toBe(original.title);
-    expect(cloned.subtitle).toBe(original.subtitle);
-    expect(cloned.presenter).toBe(original.presenter);
     expect(cloned.note).toBe(original.note);
     expect(cloned.endAction).toBe(original.endAction);
     expect(cloned.timerType).toBe(original.timerType);
@@ -55,5 +44,6 @@ describe('cloneEvent()', () => {
     expect(cloned.revision).toBe(0);
     expect(cloned.timeWarning).toBe(original.timeWarning);
     expect(cloned.timeDanger).toBe(original.timeDanger);
+    expect(cloned.custom).toStrictEqual({});
   });
 });

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

@@ -1,4 +1,4 @@
-import { isIPAddress, isOnlyNumbers, startsWithHttp, startsWithSlash } from '../regex';
+import { isAlphanumeric, isIPAddress, isNotEmpty, isOnlyNumbers, startsWithHttp, startsWithSlash } from '../regex';
 
 describe('simple tests for regex', () => {
   test('isOnlyNumbers', () => {
@@ -48,4 +48,28 @@ describe('simple tests for regex', () => {
       expect(startsWithSlash.test(t)).toBe(false);
     });
   });
+
+  test('isAlphanumeric', () => {
+    const right = ['dsafdsafa9f9sdafdsSADFHASDF', '1231', '1', 'a', 'asdas1asdas', '11as', '1'];
+    const wrong = ['with space', 'with @', '#'];
+
+    right.forEach((t) => {
+      expect(isAlphanumeric.test(t)).toBe(true);
+    });
+    wrong.forEach((t) => {
+      expect(isAlphanumeric.test(t)).toBe(false);
+    });
+  });
+
+  test('isNotEmpty', () => {
+    const right = ['notempty'];
+    const wrong = ['', ' '];
+
+    right.forEach((t) => {
+      expect(isNotEmpty.test(t)).toBe(true);
+    });
+    wrong.forEach((t) => {
+      expect(isNotEmpty.test(t)).toBe(false);
+    });
+  });
 });

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

@@ -16,13 +16,13 @@ describe('nowInMillis()', () => {
 describe('formatTime()', () => {
   it('parses 24h strings', () => {
     const ms = 13 * 60 * 60 * 1000;
-    const time = formatTime(ms, {format12: "hh:mm:ss", format24: "HH:mm:ss" }, (_format12, format24) => format24);
+    const time = formatTime(ms, { format12: 'hh:mm:ss', format24: 'HH:mm:ss' }, (_format12, format24) => format24);
     expect(time).toStrictEqual('13:00:00');
   });
 
   it('parses same string in 12h strings', () => {
     const ms = 13 * 60 * 60 * 1000;
-    const time = formatTime(ms, {format12: "hh:mm:ss a", format24: "HH:mm:ss" }, (format12, _format24) => format12);
+    const time = formatTime(ms, { format12: 'hh:mm:ss a', format24: 'HH:mm:ss' }, (format12, _format24) => format12);
     expect(time).toStrictEqual('01:00:00 PM');
   });
 
@@ -34,7 +34,7 @@ describe('formatTime()', () => {
 
   it('handles negative times', () => {
     const ms = 1 * 60 * 60 * 1000;
-    const time = formatTime(-ms, {format12: "hh:mm a", format24: "HH:mm" }, (_format12, format24) => format24);
+    const time = formatTime(-ms, { format12: 'hh:mm a', format24: 'HH:mm' }, (_format12, format24) => format24);
     expect(time).toStrictEqual('-01:00');
   });
 });

apps/client/src/common/utils/__tests__/urlPresets.test.js

@@ -1,8 +1,8 @@
 import { resolvePath } from 'react-router-dom';
 
-import { generateURLFromAlias, getAliasRoute, validateAlias } from '../aliases';
+import { generateUrlFromPreset, getRouteFromPreset, validateUrlPresetPath } from '../urlPresets';
 
-describe('An alias fails if incorrect', () => {
+describe('A preset fails if incorrect', () => {
   const testsToFail = [
     // no empty
     '',
@@ -21,11 +21,11 @@ describe('An alias fails if incorrect', () => {
 
   testsToFail.forEach((t) =>
     it(`${t}`, () => {
-      expect(validateAlias(t).status).toBeFalsy();
+      expect(validateUrlPresetPath(t).isValid).toBeFalsy();
     }),
   );
 });
-describe('generateURLFromAlias and getAliasRoute function', () => {
+describe('generateUrlFromPreset and getRouteFromPreset function', () => {
   test('generate the expected url from an alias', () => {
     const testData = [
       {
@@ -41,10 +41,10 @@ describe('generateURLFromAlias and getAliasRoute function', () => {
       },
     ];
 
-    expect(generateURLFromAlias(testData[0])).toStrictEqual(expected[0].url);
+    expect(generateUrlFromPreset(testData[0])).toStrictEqual(expected[0].url);
   });
   test('generate the url to redirect to when the current URL is just the alias', () => {
-    const aliases = [
+    const presets = [
       {
         enabled: true,
         alias: 'demopage',
@@ -52,7 +52,7 @@ describe('generateURLFromAlias and getAliasRoute function', () => {
       },
     ];
     // let current location be the alias
-    const location = resolvePath(aliases[0].alias);
+    const location = resolvePath(presets[0].alias);
 
     const expected = [
       {
@@ -60,10 +60,10 @@ describe('generateURLFromAlias and getAliasRoute function', () => {
       },
     ];
 
-    expect(getAliasRoute(location, aliases, null)).toStrictEqual(expected[0].url);
+    expect(getRouteFromPreset(location, presets, null)).toStrictEqual(expected[0].url);
   });
   test('generate the url to redirect to when the current URL the same url but with a change of params', () => {
-    const aliases = [
+    const presets = [
       {
         enabled: true,
         alias: 'demopage',
@@ -71,22 +71,22 @@ describe('generateURLFromAlias and getAliasRoute function', () => {
       },
     ];
     // let current location be the actual url with alias attached to it
-    const location = resolvePath(aliases[0].pathAndParams);
+    const location = resolvePath(presets[0].pathAndParams);
     const urlSearchParams = new URLSearchParams(location.search);
-    urlSearchParams.append('alias', aliases[0].alias); //
+    urlSearchParams.append('alias', presets[0].alias); //
 
     // update current alias with extra param
-    aliases[0].pathAndParams += '&eventId=674';
+    presets[0].pathAndParams += '&eventId=674';
     const expected = [
       {
         url: '/timer?user=guest&eventId=674&alias=demopage',
       },
     ];
 
-    expect(getAliasRoute(location, aliases, urlSearchParams)).toStrictEqual(expected[0].url);
+    expect(getRouteFromPreset(location, presets, urlSearchParams)).toStrictEqual(expected[0].url);
   });
   test('generate no url to redirect to when the current URL the same url', () => {
-    const aliases = [
+    const presets = [
       {
         enabled: true,
         alias: 'demopage',
@@ -94,10 +94,10 @@ describe('generateURLFromAlias and getAliasRoute function', () => {
       },
     ];
     // let current location be the actual url with alias attached to it
-    const location = resolvePath(aliases[0].pathAndParams);
+    const location = resolvePath(presets[0].pathAndParams);
     const urlSearchParams = new URLSearchParams(location.search);
-    urlSearchParams.append('alias', aliases[0].alias); //
+    urlSearchParams.append('alias', presets[0].alias); //
 
-    expect(getAliasRoute(location, aliases, urlSearchParams)).toBeNull();
+    expect(getRouteFromPreset(location, presets, urlSearchParams)).toBeNull();
   });
 });

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

@@ -1,77 +0,0 @@
-import isEqual from 'react-fast-compare';
-import { Location, resolvePath } from 'react-router-dom';
-import { Alias } from 'ontime-types';
-
-/**
- * Validates an alias against defined parameters
- * @param {string} alias
- * @returns {{message: string, status: boolean}}
- */
-export const validateAlias = (alias: string) => {
-  const valid = { status: true, message: 'ok' };
-
-  if (alias === '' || alias == null) {
-    // cannot be empty
-    valid.status = false;
-    valid.message = 'should not be empty';
-  } else if (alias.includes('http') || alias.includes('https') || alias.includes('www')) {
-    // cannot contain http, https or www
-    valid.status = false;
-    valid.message = 'should not include http, https, www';
-  } else if (alias.includes('127.0.0.1') || alias.includes('localhost') || alias.includes('0.0.0.0')) {
-    // aliases cannot contain hostname
-    valid.status = false;
-    valid.message = 'should not include hostname';
-  } else if (alias.includes('editor')) {
-    // no editor
-    valid.status = false;
-    valid.message = 'No aliases to editor page allowed';
-  }
-
-  return valid;
-};
-
-/**
- * Gets the URL to send an alias to
- * @param location
- * @param data
- * @param searchParams
- */
-export const getAliasRoute = (location: Location, data: Alias[], searchParams: URLSearchParams) => {
-  const currentURL = location.pathname.substring(1);
-  // we need to check if the whole url here is an alias, so we can redirect
-  const foundAlias = data.filter((d) => d.alias === currentURL && d.enabled)[0];
-  if (foundAlias) {
-    return generateURLFromAlias(foundAlias);
-  }
-  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 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);
-        const urlParams = new URLSearchParams(newAliasPath.search);
-        urlParams.set('alias', d.alias);
-        // we confirm either the url parameters does not match or the url path doesnt
-        if (!isEqual(urlParams, searchParams) || newAliasPath.pathname !== location.pathname) {
-          // we then redirect to the alias route, since the view listening to this alias has an outdated URL
-          return `${newAliasPath.pathname}?${urlParams}`;
-        }
-      }
-    }
-  }
-  return null;
-};
-
-/**
- * Generate URL from an alias
- * @param aliasData
- */
-export const generateURLFromAlias = (aliasData: Alias) => {
-  const newAliasPath = resolvePath(aliasData.pathAndParams);
-  const urlParams = new URLSearchParams(newAliasPath.search);
-  urlParams.set('alias', aliasData.alias);
-
-  return `${newAliasPath.pathname}?${urlParams}`;
-};

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

@@ -1,3 +1,4 @@
+import { MaybeNumber } from 'ontime-types';
 import { formatFromMillis, MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
 
 /**
@@ -45,17 +46,19 @@ function checkAmPm(value: string) {
  * @param {string} value
  */
 function checkMatchers(value: string) {
-  const hoursMatch = /(\d+)h/.exec(value);
+  const hoursMatch = /(\d+)h/i.exec(value);
   const hoursMatchValue = hoursMatch ? parse(hoursMatch[1]) : 0;
 
-  const minutesMatch = /(\d+)m/.exec(value);
+  const minutesMatch = /(\d+)m/i.exec(value);
   const minutesMatchValue = minutesMatch ? parse(minutesMatch[1]) : 0;
 
-  const secondsMatch = /(\d+)s/.exec(value);
+  const secondsMatch = /(\d+)s/i.exec(value);
   const secondsMatchValue = secondsMatch ? parse(secondsMatch[1]) : 0;
 
   if (hoursMatchValue > 0 || minutesMatchValue > 0 || secondsMatchValue > 0) {
-    return hoursMatchValue * MILLIS_PER_HOUR + minutesMatchValue * MILLIS_PER_MINUTE + secondsMatchValue * MILLIS_PER_SECOND;
+    return (
+      hoursMatchValue * MILLIS_PER_HOUR + minutesMatchValue * MILLIS_PER_MINUTE + secondsMatchValue * MILLIS_PER_SECOND
+    );
   }
   return { hoursMatchValue };
 }
@@ -155,21 +158,22 @@ export const forgivingStringToMillis = (value: string): number => {
   return millis;
 };
 
-export function millisToDelayString(millis: number | null, small = false): undefined | string | null {
+export function millisToDelayString(millis: MaybeNumber, format: 'compact' | 'expanded' = 'compact'): string {
   if (millis == null || millis === 0) {
-    return null;
+    return '';
   }
 
   const isNegative = millis < 0;
   const absMillis = Math.abs(millis);
-  const delayed = small ? '+' : 'delayed by ';
-  const ahead = small ? '-' : 'ahead by ';
+  const isCompact = format === 'compact';
+  const delayed = isCompact ? '+' : 'delayed by ';
+  const ahead = isCompact ? '-' : 'ahead by ';
 
   if (absMillis < MILLIS_PER_MINUTE) {
     return `${isNegative ? ahead : delayed}${formatFromMillis(absMillis, 's')} sec`;
   } else if (absMillis < MILLIS_PER_HOUR && absMillis % MILLIS_PER_MINUTE === 0) {
     return `${isNegative ? ahead : delayed}${formatFromMillis(absMillis, 'm')} min`;
-  } else {
-    return `${isNegative ? ahead : delayed}${formatFromMillis(absMillis, 'HH:mm:ss')}`;
   }
+
+  return `${isNegative ? ahead : delayed}${formatFromMillis(absMillis, 'HH:mm:ss')}`;
 }

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

@@ -6,16 +6,11 @@ import { OntimeEvent, SupportedEvent } from 'ontime-types';
  * @param {string} [after]
  * @return {OntimeEvent} clean event
  */
-type ClonedEvent = Omit<
-  OntimeEvent,
-  'id' | 'cue' | 'user0' | 'user1' | 'user2' | 'user3' | 'user4' | 'user5' | 'user6' | 'user7' | 'user8' | 'user9'
->;
+type ClonedEvent = Omit<OntimeEvent, 'id' | 'cue'>;
 export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
   return {
     type: SupportedEvent.Event,
     title: event.title,
-    subtitle: event.subtitle,
-    presenter: event.presenter,
     note: event.note,
     timeStart: event.timeStart,
     duration: event.duration,
@@ -31,5 +26,6 @@ export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
     revision: 0,
     timeWarning: event.timeWarning,
     timeDanger: event.timeDanger,
+    custom: {},
   };
 };

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

@@ -1,56 +0,0 @@
-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;
-}

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

@@ -7,3 +7,5 @@ export const isOnlyNumbers = /^\d+$/;
 export const isIPAddress = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/;
 export const startsWithHttp = /^http:\/\//;
 export const startsWithSlash = /^\//;
+export const isAlphanumeric = /^[a-z0-9]+$/i;
+export const isNotEmpty = /\S/;

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

@@ -1,10 +1,10 @@
 import { Log, RuntimeStore } from 'ontime-types';
 
-import { isProduction, RUNTIME, websocketUrl } from '../api/apiConstants';
+import { isProduction, RUNTIME, websocketUrl } from '../api/constants';
 import { ontimeQueryClient } from '../queryClient';
 import { socketClientName } from '../stores/connectionName';
 import { addLog } from '../stores/logger';
-import { runtimeStore } from '../stores/runtime';
+import { patchRuntime, runtimeStore } from '../stores/runtime';
 
 export let websocket: WebSocket | null = null;
 let reconnectTimeout: NodeJS.Timeout | null = null;
@@ -12,6 +12,7 @@ const reconnectInterval = 1000;
 export let shouldReconnect = true;
 export let hasConnected = false;
 export let reconnectAttempts = 0;
+
 export const connectSocket = (preferredClientName?: string) => {
   websocket = new WebSocket(websocketUrl);
 
@@ -52,7 +53,6 @@ export const connectSocket = (preferredClientName?: string) => {
         return;
       }
 
-      // TODO: implement partial store updates
       switch (type) {
         case 'client-name': {
           socketClientName.getState().setName(payload);
@@ -69,34 +69,54 @@ export const connectSocket = (preferredClientName?: string) => {
           }
           break;
         }
-        case 'ontime-playback': {
-          const state = runtimeStore.getState();
-          state.timer.playback = payload;
-          runtimeStore.setState(state);
+        case 'ontime-clock': {
+          patchRuntime('clock', payload);
+          updateDevTools({ clock: payload });
           break;
         }
         case 'ontime-timer': {
-          const state = runtimeStore.getState();
-          state.timer = payload;
-          runtimeStore.setState(state);
-          break;
-        }
-        case 'ontime-runtime': {
-          const state = runtimeStore.getState();
-          state.runtime = payload;
-          runtimeStore.setState(state);
-          break;
-        }
-        case 'ontime-message': {
-          const state = runtimeStore.getState();
-          state.message = payload;
-          runtimeStore.setState(state);
+          patchRuntime('timer', payload);
+          updateDevTools({ timer: payload });
           break;
         }
         case 'ontime-onAir': {
-          const state = runtimeStore.getState();
-          state.onAir = payload;
-          runtimeStore.setState(state);
+          patchRuntime('onAir', payload);
+          updateDevTools({ onAir: payload });
+          break;
+        }
+        case 'ontime-message': {
+          patchRuntime('message', payload);
+          updateDevTools({ message: payload });
+          break;
+        }
+        case 'ontime-runtime': {
+          patchRuntime('runtime', payload);
+          updateDevTools({ runtime: payload });
+          break;
+        }
+        case 'ontime-eventNow': {
+          patchRuntime('eventNow', payload);
+          updateDevTools({ eventNow: payload });
+          break;
+        }
+        case 'ontime-publicEventNow': {
+          patchRuntime('publicEventNow', payload);
+          updateDevTools({ publicEventNow: payload });
+          break;
+        }
+        case 'ontime-eventNext': {
+          patchRuntime('eventNext', payload);
+          updateDevTools({ eventNext: payload });
+          break;
+        }
+        case 'ontime-publicEventNext': {
+          patchRuntime('publicEventNext', payload);
+          updateDevTools({ publicEventNext: payload });
+          break;
+        }
+        case 'ontime-timer1': {
+          patchRuntime('timer1', payload);
+          updateDevTools({ timer1: payload });
           break;
         }
       }
@@ -125,3 +145,12 @@ export const socketSendJson = (type: string, payload?: unknown) => {
     }),
   );
 };
+
+function updateDevTools(newData: Partial<RuntimeStore>) {
+  if (!isProduction) {
+    ontimeQueryClient.setQueryData(RUNTIME, (oldData: RuntimeStore) => ({
+      ...oldData,
+      ...newData,
+    }));
+  }
+}

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

@@ -29,3 +29,7 @@ export const getAccessibleColour = (bgColour?: string): ColourCombination => {
  * @param classNames - css modules objects
  */
 export const cx = (classNames: any[]) => classNames.filter(Boolean).join(' ');
+
+export const enDash = '–';
+
+export const timerPlaceholder = '––:––:––';

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

@@ -2,7 +2,7 @@ import { MaybeNumber, Settings, TimeFormat } from 'ontime-types';
 import { formatFromMillis } from 'ontime-utils';
 
 import { FORMAT_12, FORMAT_24 } from '../../viewerConfig';
-import { APP_SETTINGS } from '../api/apiConstants';
+import { APP_SETTINGS } from '../api/constants';
 import { ontimeQueryClient } from '../queryClient';
 
 /**

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

@@ -0,0 +1,47 @@
+/**
+ * Collection of rules for pre-validating a spreadsheet
+ * @param file
+ */
+export function validateExcelImport(file: File) {
+  if (!isExcelFile(file)) {
+    throw new Error('Unknown file type');
+  }
+
+  // Check if file is empty
+  if (file.size === 0) {
+    throw new Error('File is empty');
+  }
+
+  // Limit file size of an Excel file to around 10MB
+  if (file.size > 10_000_000) {
+    throw new Error('File size limit (10MB) exceeded');
+  }
+}
+
+/**
+ * Collection of rules for pre-validating a project file
+ * @param file
+ */
+export function validateProjectFile(file: File) {
+  if (!isOntimeFile(file)) {
+    throw new Error('Unknown file type');
+  }
+
+  // Check if file is empty
+  if (file.size === 0) {
+    throw new Error('File is empty');
+  }
+
+  // Limit file size of a project file to around 1MB
+  if (file.size > 1_000_000) {
+    throw new Error('File size limit (10MB) exceeded');
+  }
+}
+
+export function isExcelFile(file: File | null) {
+  return file?.name.endsWith('.xlsx');
+}
+
+export function isOntimeFile(file: File | null) {
+  return file?.name.endsWith('.json');
+}

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

@@ -0,0 +1,76 @@
+import isEqual from 'react-fast-compare';
+import { Location, resolvePath } from 'react-router-dom';
+import { URLPreset } from 'ontime-types';
+
+/**
+ * Validates a preset against defined parameters
+ * @param {string} preset
+ * @returns {{message: string, isValid: boolean}}
+ */
+export const validateUrlPresetPath = (preset: string): { message: string; isValid: boolean } => {
+  if (preset === '' || preset == null) {
+    return { isValid: false, message: 'Path cannot be empty' };
+  }
+
+  if (preset.includes('http') || preset.includes('https') || preset.includes('www')) {
+    return { isValid: false, message: 'Path should not include http, https, www' };
+  }
+
+  if (preset.includes('127.0.0.1') || preset.includes('localhost') || preset.includes('0.0.0.0')) {
+    return { isValid: false, message: 'Path should not include hostname' };
+  }
+
+  if (preset.includes('editor')) {
+    // no editor
+    return { isValid: false, message: 'No path to editor page allowed' };
+  }
+
+  return { isValid: true, message: 'ok' };
+};
+
+/**
+ * Gets the URL to send a preset to
+ * @param location
+ * @param data
+ * @param searchParams
+ */
+export const getRouteFromPreset = (location: Location, data: URLPreset[], searchParams: URLSearchParams) => {
+  const currentURL = location.pathname.substring(1);
+
+  // we need to check if the whole url here is an alias, so we can redirect
+  const foundPreset = data.filter((d) => d.alias === currentURL && d.enabled)[0];
+  if (foundPreset) {
+    return generateUrlFromPreset(foundPreset);
+  }
+
+  const presetOnPage = searchParams.get('alias');
+  for (const d of data) {
+    if (presetOnPage) {
+      // if the alias fits the preset 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 === presetOnPage) {
+        const newPath = resolvePath(d.pathAndParams);
+        const urlParams = new URLSearchParams(newPath.search);
+        urlParams.set('alias', d.alias);
+        // we confirm either the url parameters does not match or the url path doesnt
+        if (!isEqual(urlParams, searchParams) || newPath.pathname !== location.pathname) {
+          // we then redirect to the alias route, since the view listening to this alias has an outdated URL
+          return `${newPath.pathname}?${urlParams}`;
+        }
+      }
+    }
+  }
+  return null;
+};
+
+/**
+ * Generate URL from an preset
+ * @param presetData
+ */
+export const generateUrlFromPreset = (presetData: URLPreset) => {
+  const newPresetPath = resolvePath(presetData.pathAndParams);
+  const urlParams = new URLSearchParams(newPresetPath.search);
+  urlParams.set('alias', presetData.alias);
+
+  return `${newPresetPath.pathname}?${urlParams}`;
+};

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

@@ -1,6 +0,0 @@
-export function isStringBoolean(text: string | null) {
-  if (text === null) {
-    return false;
-  }
-  return text?.toLowerCase() === 'true' || text === '1';
-}

apps/client/src/externals.ts

@@ -2,4 +2,4 @@ export const githubUrl = 'https://www.github.com/cpvalente/ontime';
 export const apiRepoLatest = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
 export const websiteUrl = 'https://www.getontime.no';
 
-export const gitbookUrl = 'https://ontime.gitbook.io';
+export const documentationUrl = 'https://docs.getontime.no';

apps/client/src/features/PresetWrapper.tsx

@@ -2,12 +2,12 @@
 import { ComponentType, useEffect } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
-import useAliases from '../common/hooks-query/useAliases';
-import { getAliasRoute } from '../common/utils/aliases';
+import useUrlPresets from '../common/hooks-query/useUrlPresets';
+import { getRouteFromPreset } from '../common/utils/urlPresets';
 
-const withAlias = <P extends object>(Component: ComponentType<P>) => {
+const withPreset = <P extends object>(Component: ComponentType<P>) => {
   return (props: Partial<P>) => {
-    const { data } = useAliases();
+    const { data } = useUrlPresets();
     const [searchParams] = useSearchParams();
     const navigate = useNavigate();
     const location = useLocation();
@@ -15,7 +15,7 @@ const withAlias = <P extends object>(Component: ComponentType<P>) => {
     // navigate if is alias route
     useEffect(() => {
       if (!data) return;
-      const url = getAliasRoute(location, data, searchParams);
+      const url = getRouteFromPreset(location, data, searchParams);
       // navigate to this route if its not empty
       if (url) {
         navigate(url);
@@ -26,4 +26,4 @@ const withAlias = <P extends object>(Component: ComponentType<P>) => {
   };
 };
 
-export default withAlias;
+export default withPreset;

apps/client/src/features/app-settings/AppSettings.module.scss

@@ -7,4 +7,5 @@
   gap: 0.25rem;
 
   overflow: hidden;
+  background-color: black;
 }

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

@@ -3,37 +3,36 @@ import { ErrorBoundary } from '@sentry/react';
 import { useKeyDown } from '../../common/hooks/useKeyDown';
 
 import AboutPanel from './panel/about-panel/AboutPanel';
+import GeneralPanel from './panel/general-panel/GeneralPanel';
 import IntegrationsPanel from './panel/integrations-panel/IntegrationsPanel';
+import InterfacePanel from './panel/interface-panel/InterfacePanel';
 import LogPanel from './panel/log-panel/LogPanel';
 import ProjectPanel from './panel/project-panel/ProjectPanel';
 import ProjectSettingsPanel from './panel/project-settings-panel/ProjectSettingsPanel';
-import UrlPresetPanel from './panel/url-preset-panel/UrlPresetPanel';
+import SourcesPanel from './panel/sources-panel/SourcesPanel';
 import PanelContent from './panel-content/PanelContent';
 import PanelList from './panel-list/PanelList';
-import { useSettingsStore } from './settingsStore';
+import useAppSettingsNavigation from './useAppSettingsNavigation';
 
 import style from './AppSettings.module.scss';
 
 export default function AppSettings() {
-  const setShowSettings = useSettingsStore((state) => state.setShowSettings);
-  const selectedPanel = useSettingsStore((state) => state.showSettings);
-
-  const closeSettings = () => {
-    setShowSettings(null);
-  };
-  useKeyDown(closeSettings, 'Escape');
+  const { close, panel, location } = useAppSettingsNavigation();
+  useKeyDown(close, 'Escape');
 
   return (
     <div className={style.container}>
       <ErrorBoundary>
-        <PanelList />
-        <PanelContent onClose={closeSettings}>
-          {selectedPanel === 'project' && <ProjectPanel />}
-          {selectedPanel === 'integrations' && <IntegrationsPanel />}
-          {selectedPanel === 'project_settings' && <ProjectSettingsPanel />}
-          {selectedPanel === 'url_presets' && <UrlPresetPanel />}
-          {selectedPanel === 'about' && <AboutPanel />}
-          {selectedPanel === 'log' && <LogPanel />}
+        <PanelList selectedPanel={panel} location={location} />
+        <PanelContent onClose={close}>
+          {panel === 'project' && <ProjectPanel location={location} />}
+          {panel === 'general' && <GeneralPanel location={location} />}
+          {panel === 'project_settings' && <ProjectSettingsPanel />}
+          {panel === 'sources' && <SourcesPanel />}
+          {panel === 'interface' && <InterfacePanel />}
+          {panel === 'integrations' && <IntegrationsPanel location={location} />}
+          {panel === 'about' && <AboutPanel />}
+          {panel === 'log' && <LogPanel />}
         </PanelContent>
       </ErrorBoundary>
     </div>

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

@@ -1,7 +1,8 @@
 .corner {
   position: absolute;
   top: 1rem;
-  right: 1rem;
+  right: 2rem;
+  z-index: 100;
 }
 
 .contentWrapper {

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { IconButton } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
 import { IoClose } from '@react-icons/all-files/io5/IoClose';
 
 import style from './PanelContent.module.scss';
@@ -14,7 +14,9 @@ export default function PanelContent(props: PropsWithChildren<PanelContentProps>
   return (
     <div className={style.contentWrapper}>
       <div className={style.corner}>
-        <IconButton onClick={onClose} aria-label='close' icon={<IoClose />} variant='ontime-ghosted-white' />
+        <Button onClick={onClose} aria-label='close' rightIcon={<IoClose />} variant='ontime-subtle'>
+          Close settings
+        </Button>
       </div>
       <div className={style.content}>{children}</div>
     </div>

apps/client/src/features/app-settings/panel-list/PanelList.module.scss

@@ -58,4 +58,8 @@ ul {
   color: $secondary-text-gray;
   border-left: 1px solid $white-10;
   font-size: $inner-section-text-size;
+
+  &.active {
+    color: $blue-400;
+  }
 }

apps/client/src/features/app-settings/panel-list/PanelList.tsx

@@ -2,16 +2,18 @@ import { Fragment } from 'react';
 
 import { isKeyEnter } from '../../../common/utils/keyEvent';
 import { cx } from '../../../common/utils/styleUtils';
-import { settingPanels, SettingsOption, useSettingsStore } from '../settingsStore';
+import { PanelBaseProps, settingPanels, useSettingsStore } from '../settingsStore';
+import useAppSettingsNavigation from '../useAppSettingsNavigation';
 
 import style from './PanelList.module.scss';
 
-export default function PanelList() {
-  const { showSettings, setShowSettings, hasUnsavedChanges } = useSettingsStore();
+interface PanelListProps extends PanelBaseProps {
+  selectedPanel: string;
+}
 
-  const handleSelect = (panel: SettingsOption) => {
-    setShowSettings(panel.id);
-  };
+export default function PanelList({ selectedPanel, location }: PanelListProps) {
+  const { setLocation } = useAppSettingsNavigation();
+  const { hasUnsavedChanges } = useSettingsStore();
 
   return (
     <ul className={style.tabs}>
@@ -20,7 +22,7 @@ export default function PanelList() {
 
         const classes = cx([
           style.primary,
-          showSettings === panel.id ? style.active : null,
+          selectedPanel === panel.id ? style.active : null,
           panel.split ? style.split : null,
           unsaved ? style.unsaved : null,
         ]);
@@ -29,9 +31,9 @@ export default function PanelList() {
           <Fragment key={panel.id}>
             <li
               key={panel.id}
-              onClick={() => handleSelect(panel)}
+              onClick={() => setLocation(panel.id)}
               onKeyDown={(event) => {
-                isKeyEnter(event) && handleSelect(panel);
+                isKeyEnter(event) && setLocation(panel.id);
               }}
               className={classes}
               tabIndex={0}
@@ -40,8 +42,18 @@ export default function PanelList() {
               {panel.label}
             </li>
             {panel.secondary?.map((secondary) => {
+              const id = secondary.id.split('__')[1];
+              const secondaryClasses = cx([style.secondary, location === id ? style.active : null]);
               return (
-                <li key={secondary.id} onClick={() => handleSelect(panel)} className={style.secondary}>
+                <li
+                  key={secondary.id}
+                  onClick={() => setLocation(secondary.id)}
+                  onKeyDown={(event) => {
+                    isKeyEnter(event) && setLocation(secondary.id);
+                  }}
+                  className={secondaryClasses}
+                  role='button'
+                >
                   {secondary.label}
                 </li>
               );

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

@@ -17,17 +17,24 @@ $inner-padding: 1rem;
 }
 
 .title {
-  font-size: 1.25rem;
-  padding-left: $inner-padding;
+  font-size: 1.375rem;
+  padding: 0 2rem;
+  font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: $gray-300;
 }
 
 .section {
+  position: relative;
   margin-top: 2rem;
   font-size: calc(1rem - 1px);
   max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  color: $ui-white;
 }
 
 .paragraph {
@@ -35,8 +42,9 @@ $inner-padding: 1rem;
 }
 
 .card {
+  position: relative;
   padding: 2rem;
-  background-color: $white-1;
+  background-color: $white-3;
   border: 1px solid $gray-1100;
   border-radius: 3px;
 }
@@ -48,8 +56,8 @@ $inner-padding: 1rem;
 }
 
 .pad {
-  padding: 0 1rem;
-  max-height: 500px;
+  padding: 0 2rem;
+  max-height: 550px;
   overflow-y: scroll;
 }
 
@@ -58,15 +66,21 @@ $inner-padding: 1rem;
   border-collapse: collapse;
   font-size: calc(1rem - 2px);
   text-align: left;
+  margin-bottom: 2rem;
 
-  tr {
-    padding: 1rem 0;
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    box-shadow: 0 1px $white-10;
   }
 
   th {
-    border-bottom: 1px solid $white-10;
     font-weight: 400;
     color: $gray-400;
+    background-color: $gray-1350;
+    white-space: nowrap;
+    text-transform: capitalize;
   }
 
   th,
@@ -80,7 +94,7 @@ $inner-padding: 1rem;
 }
 
 .listGroup {
-  padding: 0.5rem 1rem 0 1rem;
+  padding: 0 2rem;
 
   > li:not(:last-child) {
     border-bottom: 1px solid $white-10;
@@ -112,4 +126,49 @@ $inner-padding: 1rem;
 .divider {
   border-top: 1px solid $white-10;
   margin: 1rem -2rem;
+  z-index: 999;
+}
+
+.overlay {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(2px);
+  display: grid;
+  place-content: center;
+  background-color: $black-10;
+}
+
+.loader {
+  $loader-size: 4rem;
+  width: $loader-size;
+  height: $loader-size;
+  background: $blue-500;
+  display: inline-block;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: animloader 1s ease-in infinite;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
 }