ifx: use template string not concatination

* feat: allow editing field from operator

Co-authored-by: arc-alex <ac@omnivox.dk>

* style: functional and presentation tweaks
---------

Co-authored-by: arc-alex <ac@omnivox.dk>

.deepsource.toml

@@ -3,7 +3,6 @@ version = 1
 test_patterns = [
   "__mocks__/**",
   "__tests__/**",
-  "cypress/**",
   "*.test.*",
   "*.mock.*",
   "*.spec.*"

.eslintignore

@@ -0,0 +1 @@
+ "ONTIME_VERSION.js"

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "parserOptions": {
     "ecmaVersion": 2020
   },
@@ -6,28 +7,55 @@
     "es6": true,
     "jest": true
   },
+  "parser": "@typescript-eslint/parser",
   "extends": [
-    "eslint:recommended"
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "eslint-config-prettier"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "e2e/**/**.spec.ts",
+        "e2e/**/**.test.ts"
+      ],
+      "extends": [
+        "plugin:playwright/playwright-test"
+      ]
+    }
   ],
   "rules": {
-    // disallow certain object properties
-    // https://eslint.org/docs/rules/no-restricted-properties
-    "no-restricted-properties": [
+    "no-useless-concat": "warn",
+    "prefer-template": "warn",
+    "no-console": [
+      "warn",
+      {
+        "allow": [
+          "warn",
+          "error"
+        ]
+      }
+    ],
+    "@typescript-eslint/no-non-null-assertion": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": [
       "error",
       {
-        "object": "global",
-        "property": "isNaN",
-        "message": "Please use Number.isNaN instead"
-      },
+        "argsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "prettier/prettier": [
+      "warn",
       {
-        "object": "self",
-        "property": "isNaN",
-        "message": "Please use Number.isNaN instead"
-      },
-      {
-        "object": "window",
-        "property": "isNaN",
-        "message": "Please use Number.isNaN instead"
+        "endOfLine": "auto"
       }
     ]
   }

.github/workflows/build.yml

@@ -1,190 +0,0 @@
-name: Ontime build
-
-on:
-  push:
-    # run when a tag is created
-    tags:
-      - '*'
-  workflow_dispatch:
-
-jobs:
-  build_mac:
-    runs-on: macOS-latest
-    timeout-minutes: 20
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install --frozen-lockfile --network-timeout 300000
-        working-directory: ./client
-
-      - name: React - Build project
-        run: yarn build
-        working-directory: ./client
-
-      # Node server
-      - name: Server - Install dependencies
-        run: yarn install --frozen-lockfile --production --network-timeout 300000
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        shell: bash
-        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
-        working-directory: ./server
-      - name: Electron - Build app
-        run: yarn dist-mac
-        working-directory: ./server
-
-      # Release
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: ./server/dist/ontime-macOS.dmg
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  build_win:
-    runs-on: windows-latest
-    timeout-minutes: 20
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install --frozen-lockfile --network-timeout 300000
-        working-directory: ./client
-
-      - name: React - Build project
-        run: yarn build
-        working-directory: ./client
-
-      # Node server
-      - name: Server - Install dependencies
-        run: yarn install --frozen-lockfile --production --network-timeout 300000
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        shell: bash
-        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
-        working-directory: ./server
-      - name: Electron - Build app
-        run: yarn dist-win
-        working-directory: ./server
-
-      # Release
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: ./server/dist/ontime-win64.exe
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  build_linux:
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install --frozen-lockfile --network-timeout 300000
-        working-directory: ./client
-
-      - name: React - Build project
-        run: yarn build
-        working-directory: ./client
-
-      # Node server
-      - name: Server - Install dependencies
-        run: yarn install --frozen-lockfile --production --network-timeout 300000
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        shell: bash
-        run: yarn install --frozen-lockfile --network-timeout 300000 && yarn setdb
-        working-directory: ./server
-      - name: Electron - Build app
-        run: yarn dist-linux
-        working-directory: ./server
-
-      # Release
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: ./server/dist/ontime-linux.AppImage
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  publish_docker:
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Setup env
-        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install --network-timeout 300000
-        working-directory: ./client
-
-      - name: React - Build project
-        run: yarn build
-        working-directory: ./client
-
-      # Node server
-      - name: Server - Install dependencies
-        run: yarn install --frozen-lockfile --production --network-timeout 300000
-        working-directory: ./server/src
-
-      # Login to docker
-      - name: Login to Docker Hub
-        uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      
-      # Prepare builder
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
-
-      # Build and push
-      - name: Build and push
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest

.github/workflows/build_docker_v2.yml

@@ -0,0 +1,56 @@
+name: Docker Image CI Ontime V2
+
+on:
+  push:
+    tags: [ "*" ]
+  workflow_dispatch:
+
+jobs:
+
+  publish_docker:
+    runs-on: ubuntu-latest
+    env:
+      CI: ''
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Setup env
+      run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+
+    - name: Setup Node.js environment
+      uses: actions/setup-node@v3.6.0
+      with:
+        version: 16.16.0
+
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v2
+      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 turbo build:docker
+
+    - name: Docker Login
+      uses: docker/login-action@v2.1.0
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+    - name: Docker Setup Buildx
+      uses: docker/setup-buildx-action@v2.5.0
+
+    - name: Build and push Docker images
+      uses: docker/build-push-action@v4.0.0
+      with:
+        context: .
+        file: ./Dockerfile
+        platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
+        # Push is a shorthand for --output=type=registry
+        push: true
+        tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
+

.github/workflows/build_v2.yml

@@ -0,0 +1,108 @@
+name: Ontime build v2
+
+on:
+  push:
+    tags: [ "*" ]
+  workflow_dispatch:
+
+jobs:
+  build_macos:
+    runs-on: macOS-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        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@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        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@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        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/codeql-analysis.yml

@@ -1,70 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ master ]
-  schedule:
-    - cron: '33 02 * * 5'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Learn more about CodeQL language support at https://git.io/codeql-language-support
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.github/workflows/ontime_cy.yml

@@ -1,54 +0,0 @@
-# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: ontime_test_CI
-
-on: [push, pull_request]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install
-        working-directory: ./client
-
-      - name: React - Run tests
-        run: yarn test:pipeline
-        working-directory: ./client
-
-      - name: React - Build project
-        run: yarn build
-        working-directory: ./client
-
-      # Node server
-      - name: Server - Install dependencies
-        run: yarn install
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        run: yarn install && yarn setdb
-        working-directory: ./server
-
-      - name: Electron - Run tests
-        run: yarn test
-        working-directory: ./server
-
-      - name: Cypress run
-        uses: cypress-io/github-action@v2
-        with:
-          working-directory: ./server
-          start: yarn cypress

.github/workflows/test_v2.yml

@@ -0,0 +1,100 @@
+name: Ontime test v2
+
+on:
+  pull_request:
+    branches: '*'
+  workflow_dispatch:
+
+jobs:
+  unit-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        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@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        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@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -5,38 +5,42 @@ node_modules/
 /.pnp
 .pnp.js
 
-# testing
-coverage/
-*.mp4
-
-# production
-build/
-dist/
-
 # misc
 .DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.local
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# working stuff
-_SS/
-db backup.json
-server/src/preloaded-db/db.json
-server/src/models/db.json
-TODO.md
-ontime-db/
-ontime-external/
-
 # vscode stuff
 .vscode/*
 ontime.code-workspace
 
 # webstorm stuff
-.idea/*
+.idea/*
+
+# turborepo stuff
+.turbo
+
+# testing
+test-results
+playwright-report
+/playwright/.cache/
+
+# production
+build/
+dist/
+
+# working stuff
+**/TODO.md
+
+# docker utils
+ontime-db
+ontime-external/
+
+# working database
+apps/server/src/preloaded-db/db.json
+
+# versioning file
+**/ONTIME_VERSION.js

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint-staged

.nvmrc

@@ -0,0 +1 @@
+v16.16.0

.prettierignore

@@ -0,0 +1,10 @@
+build
+coverage
+dist
+node_modules
+
+playwright-report
+
+**/*.toml
+**/*.yml
+**/*.json

.prettierrc

@@ -1,8 +1,9 @@
 {
-  "trailingComma": "es5",
+  "endOfLine": "lf",
+  "trailingComma": "all",
   "tabWidth": 2,
   "semi": true,
   "singleQuote": true,
   "jsxSingleQuote": true,
-  "printWidth": 100
-}
+  "printWidth": 120
+}

DEVELOPMENT.md

@@ -0,0 +1,98 @@
+# GETTING STARTED
+
+Ontime consists of 3 distinct parts
+
+- __client__: A React app for Ontime's UI and web clients
+- __electron__: An electron app which facilitates the cross-platform distribution of Ontime
+- __server__: A node application which handles the domains services and integrations
+
+The steps below will assume you have locally installed the necessary dependencies.
+Other dependencies will be installed as part of the setup
+
+- __node__ (>=16.16)
+- __pnpm__ (>=7)
+- __docker__ (only necessary to run and build docker images)
+
+## LOCAL DEVELOPMENT
+
+The electron app is only necessary to distribute an installable version of the app and is not required for local
+development.
+Locally, we would need to run both the React client and the node.js server in development mode
+
+From the project root, run the following commands
+
+- __Install the project dependencies__ by running `pnpm i`
+- __Run dev mode__ by running `turbo dev`
+
+### Debugging backend
+
+To debug backend code in Node.js:
+
+- Open two separate terminals and navigate to the `apps/client` and `apps/server` directories.
+- In each terminal, run the command `pnpm dev` to start the development servers for both the client and server
+  applications.
+- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by
+  running `pnpm dev:inspect`.
+
+## TESTING
+
+Generally we have 2 types of tests.
+
+- Unit tests for functions that contain business logic
+- End-to-end tests for core features
+
+### Unit tests
+
+Unit tests are contained in mostly all the apps and packages (client, server and utils)
+
+You can run unit tests by running turbo `turbo test:pipeline` from the project root.
+This will run all tests and close test runner.
+
+Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode
+
+### E2E tests
+
+E2E tests are in a separate package. On running, [playwright](https://playwright.dev/) will spin up an instance of the
+webserver to test against
+These tests also run against a separate version of the DB (test-db)
+
+Before running the E2E, you should first build the project with `pnpm build:local`.
+
+You can run playwright tests from project root with `pnpm e2e`
+
+When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually
+start the webserver with `pnpm dev:server`
+
+Some other useful commands
+
+- `pnpm e2e --ui` open playwright UI
+- `pnpm e2e --headed` run tests with a visible browser window
+
+## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)
+
+Ontime uses Electron to distribute the application.
+You can generate a distribution for your OS by running the following steps.
+
+From the project root, run the following commands
+
+- __Install the project dependencies__ by running `pnpm i`
+- __Build the UI and server__ by running `turbo build:electron`
+- __Create the package__ by running `turbo dist-win`, `turbo dist-mac` or `turbo dist-linux`
+
+The build distribution assets will be at `.apps/electron/dist`
+
+## DOCKER
+
+Ontime provides a docker-compose file to aid with building and running docker images.
+While it should allow for a generic setup, it might need to be modified to fit your infrastructure.
+
+From the project root, run the following commands
+
+- __Install the project dependencies__ by running `pnpm i`
+- __Build docker image from__ by running `docker build -t getontime/ontime`
+- __Run docker image from compose__ by running `docker-compose up -d`
+
+Other useful commands
+
+- __List running processes__ by running `docker ps`
+- __Kill running process__ by running `docker kill <process-id>`

Dockerfile

@@ -1,20 +1,27 @@
-FROM node:14-alpine
+FROM node:16-alpine
 
-WORKDIR /app/server
+# Set environment variables
+# Environment Variable to signal that we are running production
+ENV NODE_ENV=docker
+# Ontime Data path
+ENV ONTIME_DATA=/external/
+
+WORKDIR /app/
 
 # Prepare UI
-COPY /client/build ../client/build
+COPY /apps/client/build ./client/
 
 # Prepare Backend
-COPY /server/src ./
+COPY /apps/server/dist/ ./server/
+COPY /demo-db/ ./preloaded-db/
+COPY /apps/server/src/external/ ./external/
 
-# Export default ports Main - OSC IN
-EXPOSE 4001/tcp 8888/udp
-ENV NODE_ENV=production
-ENV ONTIME_DATA=/server/
+# Export default ports
+EXPOSE 4001/tcp 8888/udp 9999/udp
 
-CMD ["yarn", "start:headless"]
+CMD ["node", "server/docker.cjs"]
 
-# Build an run commandsN
-# docker build -t getontime/ontime .
-# docker run -p 4001:4001 -p 10.0.0.12:8888:8888/udp --mount type=bind,source="$(pwd)/ontime-db",target=/server/preloaded-db getontime/ontime
+# Build and run commands
+# !!! Note that this command needs pre-build versions of the UI and server apps
+# docker buildx build . -t getontime/ontime
+# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/external/db/ -v ./ontime-styles:/external/styles/ getontime/ontime

README.md

@@ -1,213 +1,198 @@
-[![ontime_test_CI](https://github.com/cpvalente/ontime/actions/workflows/ontime_cy.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/ontime_cy.yml) [![Ontime build](https://github.com/cpvalente/ontime/actions/workflows/build.yml/badge.svg)](https://github.com/cpvalente/ontime/actions/workflows/build.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://cpvalente.gitbook.io/ontime/)
+[![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)
 
 ## Download the latest releases here
 
 <div style="display: flex; justify-content: space-around">
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/mac-download.png"/></a>
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe"><img alt="Download Windows" src="https://github.com/cpvalente/ontime/blob/master/.github/win-download.png"/></a>
-  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage"><img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/linux-download.png"/></a>
-  <a href="https://hub.docker.com/r/getontime/ontime"><img alt="Get from Dockerhub" src="https://github.com/cpvalente/ontime/blob/master/.github/dockerhub.png"/></a>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS.dmg"><img alt="Download MacOS" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/mac-download.png"/></a>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe"><img alt="Download Windows" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/win-download.png"/></a>
+  <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage"><img alt="Download Linux" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/linux-download.png"/></a>
+  <a href="https://hub.docker.com/r/getontime/ontime"><img alt="Get from Dockerhub" src="https://github.com/cpvalente/ontime/blob/master/.github/aux-images/dockerhub.png"/></a>
 </div>
 
 # Ontime
 
-Ontime is an application for managing event rundowns and running stage timers.
+Ontime is an application for creating and managing event running order and timers.
 
-It allows a center application to be able to distribute event information in the local network. This
-minimises needs for using Media Server outputs or expensive video distribution while allowing easy
-integration in workflows including OBS and d3.
+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.
 
-![App Window](https://github.com/cpvalente/ontime/blob/master/.github/app.jpg)
+This makes for a simple and cheap way to distribute over a venue using a network infrastructure instead of video
+outputs.
 
-![Views](https://github.com/cpvalente/ontime/blob/master/.github/02_screentypes.png)
+![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)
 
 ## Using Ontime
 
-Once installed and running, ontime starts a background server that is the heart of all processes.
-The app, is used to add / edit your running order in the event list, and running the timers using
-the Playback Control function.
+Once installed and running, Ontime starts a background server that is the heart of all processes.
+From the app, you can add / edit your running order and control the timer playback.
 
-From here, any device in the same network with a browser is able to render the views as described.
+Any device with a browser in the same network can choose one of the supported views to render the available data.
 This is done by reaching the ontime server at the _default port 4001_ eg: `localhost:4001`
 or `192.168.1.3:4001`
-You can then use the ontime logo in the top right corner to select the desired view (event in the
-lower thirds view, where it is hidden).
+<br />
+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 case of unattended machines or automations, it is possible to use different URL to recall
-individual views and extend with using the URL aliases feature
+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
 
 ```
-For the presentation views...
+For the presentation views
 -------------------------------------------------------------
 IP.ADDRESS:4001            > Web server default to presenter timer view
 IP.ADDRESS:4001/timer      > Presenter / Stage timer view
+IP.ADDRESS:4001/minimal    > Simple timer view
+IP.ADDRESS:4001/clock      > Simple clock view
 IP.ADDRESS:4001/sm         > Stage Manager / Backstage view
 IP.ADDRESS:4001/public     > Public / Foyer view
-IP.ADDRESS:4001/pip        > Picture in Picture view
 IP.ADDRESS:4001/lower      > Lower Thirds
 IP.ADDRESS:4001/studio     > Studio Clock
-IP.ADDRESS:4001/cuesheet   > Cue Sheet
-
-...and for the editor (the control interface, same as the app)
--------------------------------------------------------------
-IP.ADDRESS:4001/editor
-
 ```
 
-More documentation available [here](https://cpvalente.gitbook.io/ontime/)
+```
+For management views
+-------------------------------------------------------------
+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)
 
 ## Feature List (in no specific order)
 
-- [x] Distribute Data over network and render in the browser
+- [x] Distribute data over network and render it in the browser
 - [x] Different screen types
-    - Stage Timer
-    - Backstage Info
-    - Public Info
-    - Picture in Picture
-    - Studio Clock
-    - [Make your own?](#make-your-own-viewer)
-- [x] Configurable realtime Lower Thirds
-- [x] Cuesheets with additional custom fields
+  - Stage Timer
+  - Minimal Timer
+  - Clock
+  - Backstage Info
+  - Public Info
+  - Studio Clock
+  - Countdown
+  - [Make your own?](#make-your-own-viewer)
+- [x] Configurable Lower Thirds
+- [x] Collaborative editing with the cuesheet view
 - [x] Send live messages to different screen types
-- [x] Ability to differentiate between backstage and public data
-- [x] Manage delays workflow
-- [x] Open Sound Control (OSC) Control and Feedback
-- [x] Integrate with hardware using Companion or one of the APIs
-- [x] Roll mode: run independently using the system clock
-- [x] Import event list from Excel
-- [x] URL Aliases (define configurable aliases to ease onsite setup)
-- [x] Logging view
-- [x] Edit anywhere: run ontime in your local network and use any machine to reach the editor page (
-  same as app)
-- [x] Multi platform (available on Windows, MacOS and Linux)
-- [x] [Headless run](#headless-run) (run server only, configure from a browser locally)
-- [x] [Countdown to anything!](https://cpvalente.gitbook.io/ontime/views/countdown): ability to have
-  a countdown to any scheduled event
+- [x] Differentiate between backstage and public data
+- [x] Workflow for managing delays
+- [x] Rich protocol integrations for Control and Feedback
+  - OSC (Open Sound Control)
+  - HTTP
+  - 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
+      a countdown to any scheduled event
+- [x] Multi-platform (available on Windows, MacOS and Linux)
+- [x] [Companion integration](https://bitfocus.io/connections/getontime-ontime)
 
 ## Unopinionated
 
-We are not interested in forcing workflows and have made ontime, so it is flexible to whichever way
-you would like to work.
+We want Ontime to be unique by targeting freelancers instead of roles.
 
-- [x] You do not need an order list to use the timer. Create an empty event and the OSC API works
-  just the same
-- [x] If you want just the info screens, no need to use the timer!
-- [x] Don't have or care for a schedule?
-    - [x] a single event with no data is enough to use the OSC API and get going
-    - [x] use the order list to create a set of quick timers by setting the beginning and start
-      times to 00:00 and 00:10 (**BAM**! 10 minute timer). You can quickly recall this with OSC as
-      always
+We believe most freelancers work in different fields and we want to give you a tool that you can leverage across your
+many environments and workflows.
+
+We are not interested in forcing workflows and have made Ontime so, it is flexible to whichever way you would like to
+work.
 
 ## Rich APIs for workflow integrations
 
-The app is being currently developed to a wide user base, from broadcast to entertainment and
+The app is currently being developed for a broad user base, from broadcast to entertainment and
 conference halls.
 
-Taking advantage of the integrations in Ontime, we currently use Ontime with:
+Taking advantage of the integrations, we currently use Ontime with:
 
-- `disguise`: trigger ontime from d3's timeline using the **OSC API**, **render views** using d3's
+- `disguise`: trigger Ontime from d3's timeline using the **OSC API**, and **render views** using d3's
   webmodule
 - `OBS`: **render views** using the Browser Module
-- `QLab`: trigger ontime using **OSC API**
+- `QLab`: trigger Ontime using **OSC API**
 - `Companion`: Ontime has a **companion module**. Issue report and feature requests should be done
-  in
-  the [repository getontime/ontime](https://github.com/bitfocus/companion-module-getontime-ontime)
+  in the [repository getontime/ontime](https://github.com/bitfocus/companion-module-getontime-ontime)
 
 ### Make your own viewer
 
-Ontime broadcasts its data over websockets. This allows you to build your own viewers by leveranging
-basic knowledge of HTML + CSS + Javascript (or any other language that can run in the browser).
+Ontime broadcasts its data over WebSockets. This allows you to consume its data outside the application.
 
-See [this repository](https://github.com/cpvalente/ontime-viewer-template) with a small template on
+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://app.gitbook.com/s/-Mc0giSOToAhq0ROd0CR/control-and-feedback/websocket-api)
+the [Websocket API](https://ontime.gitbook.io/v2/control-and-feedback/ontime-apis#osc-and-websocket-api)
 
 ### Headless run️
 
-You can self host and run ontime in a docker image, the run command should:
+You can self-host and run Ontime in a docker image.
 
-- expose the necessary ports (listen in Dockerfile)
-- mount a local file to persist your data (in the example: ````$(pwd)/local-data````)
-- the image name __getontime/ontime__
+The docker image along with documentation is [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
 
-The docker image is
-in [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
-
-```bash
-docker pull getontime/ontime
-```
-
-```bash
-# Port 4001 - ontime server port
-# Port 8888 - OSC input, bound to localhost IP Address 
-docker run -p 4001:4001 -p 127.0.0.1:8888:8888/udp --mount type=bind,source="$(pwd)/ontime-db",target=/server/preloaded-db getontime/ontime
-```
-
-or if running from the docker compose
-
-```bash
-docker-compose up
-```
+If you want to run this image in a Raspberry Pi, please see [the docs](https://ontime.gitbook.io/v2/additional-notes/use-in-raspberry-pi)
 
 ## Roadmap
 
 ### Continued development
 
-There are several features planned in the roadmap. These will be implemented in a development
-friendly order unless there is user demand to bump any of them.
-
-- [ ] HTTP Server (vMix integration)
-- [ ] Improvements in event interface
-- [ ] Moderator view
-- [ ] New playback mode for [cumulative time keeping](https://github.com/cpvalente/ontime/issues/100)
-- [ ] Lower Third Manager
-- [ ] Reach Schedule: way to speedup timer to meet a deadline
+Several features are planned in the roadmap, and we continuously adjust this to match how users interact with the app.
+<br />
+Have an idea? Reach out via [email](mail@getontime.no)
+or [open an issue](https://github.com/cpvalente/ontime/issues/new)
 
 ### Issues
 
-If you come across any bugs, [please open an issue]((https://github.com/cpvalente/ontime/issues/new)). Usually bugs get fixed pretty quickly when reported 
+We use Github's issue tracking for bug reporting and feature requests. <br />
+Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new).
 
 #### Unsigned App
 
 When installing the app you would see warning screens from the Operating System like:
 
-```Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.```
+`Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.`
 
 or
 
-```Ontime can't be opened because it is from an unidentified developer```
+`Ontime can't be opened because it is from an unidentified developer`
 
 or in Linux
 
-```Could Not Display "ontime-linux.AppImage```
+`Could Not Display "ontime-linux.AppImage`
 
 You can circumvent this by allowing the execution of the app manually.
 
 - In Windows: click more and select "Run Anyway"
-- in macOS: after attempting to run the installer, navigate to System Preferences ->  Security &
-  Privacy and allow the execution of the app
+- in macOS: the solution in macOS is different across versions, please refer to the [apple documentation](https://support.apple.com/en-gb/guide/mac-help/mh40616/mac)
 - In Linux: right-click the AppImage file -> Properties -> Permissions -> select Allow Executing
   File as a Program
 
 Long story short: Ontime app is unsigned. </br>Purchasing the certificates for both Mac and Windows
 would mean a recurrent expense and is not a priority. This is unlikely to change in future. If you
-have tips on how to improve this, or would like to sponsor the code signing,
-please [open an issue, so we can discuss it](https://github.com/cpvalente/ontime/issues/new)
+have tips on how to improve this or would like to sponsor the code signing,
+please [open an issue](https://github.com/cpvalente/ontime/issues/new)
 
 #### Safari
 
-There are some issues with Safari versions lower than 13:
+There are known issues with Safari versions lower than 13:
 
 - Spacing and text styles might have small inconsistencies
 - Table view does not work
 
-There is no plan for any further work on this since the breaking code belongs to third party
-libraries.
+There is no plan for any further work on this.
+
+# Contributing
+
+Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
+<br /><br />
+If you are a developer and would like to contribute with some code, please open an issue to discuss before opening a
+Pull Request.
+<br />
+Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)
 
 # Help
 
-Help is underway! ... and can be viewed [here](https://cpvalente.gitbook.io/ontime/)
+Help is underway! ... and can be found [here](https://ontime.gitbook.io)
 
 # License
 

apps/client/.eslintrc

@@ -9,19 +9,17 @@
     "node": true
   },
   "extends": [
-    "eslint:recommended",
     "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "eslint-config-prettier"
+    "plugin:react-hooks/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
   "plugins": [
     "react",
     "testing-library",
-    "simple-import-sort"
+    "simple-import-sort",
+    "@tanstack/query"
   ],
   "rules": {
-    "no-useless-concat": "warn",
-    "prefer-template": "warn",
     "react/jsx-no-bind": [
       "error",
       {

apps/client/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "endOfLine": "lf",
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120
+}

apps/client/index.html

@@ -32,6 +32,6 @@
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id='root'></div>
-<script type='module' src='/src/index.jsx'></script>
+<script type='module' src='/src/index.tsx'></script>
 </body>
 </html>

apps/client/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "ontime-ui",
+  "version": "2.16.2",
+  "private": true,
+  "dependencies": {
+    "@chakra-ui/react": "^2.7.0",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@react-icons/all-files": "^4.1.0",
+    "@sentry/react": "^7.46.0",
+    "@sentry/tracing": "^7.46.0",
+    "@tanstack/react-query": "^5.8.4",
+    "@tanstack/react-query-devtools": "^5.8.4",
+    "@tanstack/react-table": "^8.9.2",
+    "autosize": "^6.0.1",
+    "axios": "^1.2.0",
+    "color": "^4.2.3",
+    "csv-stringify": "^6.2.3",
+    "deepmerge": "^4.3.0",
+    "framer-motion": "^10.10.0",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18.2.0",
+    "react-fast-compare": "^3.2.0",
+    "react-hook-form": "^7.43.5",
+    "react-qr-code": "^2.0.11",
+    "react-router-dom": "^6.3.0",
+    "typeface-open-sans": "^1.1.13",
+    "web-vitals": "^3.1.1",
+    "zustand": "^4.3.6"
+  },
+  "scripts": {
+    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
+    "postinstall": "pnpm addversion",
+    "dev": "cross-env BROWSER=none vite",
+    "build": "vite build",
+    "build:local": "cross-env NODE_ENV=local vite build",
+    "build:electron": "cross-env NODE_ENV=local vite build",
+    "build:docker": "vite build",
+    "lint": "eslint . --quiet",
+    "lint-staged": "eslint",
+    "test": "vitest",
+    "test:pipeline": "vitest run",
+    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@sentry/vite-plugin": "^0.4.0",
+    "@tanstack/eslint-plugin-query": "^5.8.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/user-event": "^14.1.1",
+    "@types/color": "^3.0.3",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^3.0.1",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "jsdom": "^21.1.0",
+    "ontime-types": "workspace:*",
+    "ontime-utils": "workspace:*",
+    "prettier": "^3.0.3",
+    "sass": "^1.57.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.3.1",
+    "vite-plugin-compression2": "^0.9.0",
+    "vite-plugin-svgr": "^2.4.0",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.30.1"
+  }
+}

apps/client/src/App.tsx

@@ -0,0 +1,73 @@
+import { useEffect } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+import { ContextMenu } from './common/components/context-menu/ContextMenu';
+import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
+import { AppContextProvider } from './common/context/AppContext';
+import useElectronEvent from './common/hooks/useElectronEvent';
+import { ontimeQueryClient } from './common/queryClient';
+import { socketClientName } from './common/stores/connectionName';
+import { connectSocket } from './common/utils/socket';
+import theme from './theme/theme';
+import { TranslationProvider } from './translation/TranslationProvider';
+import AppRouter from './AppRouter';
+
+// Load Open Sans typeface
+// @ts-expect-error no types from font import
+import('typeface-open-sans');
+
+const preferredClientName = socketClientName.getState().name;
+connectSocket(preferredClientName);
+
+function App() {
+  const { isElectron, sendToElectron } = useElectronEvent();
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      // handle held key
+      if (event.repeat) return;
+      // check if the alt key is pressed
+      if (event.altKey) {
+        if (event.code === 'KeyT') {
+          // ask to see debug
+          sendToElectron('set-window', 'show-dev');
+        }
+      }
+    };
+
+    if (isElectron) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
+    return () => {
+      if (isElectron) {
+        document.removeEventListener('keydown', handleKeyPress);
+      }
+    };
+  }, [isElectron, sendToElectron]);
+
+  return (
+    <ChakraProvider resetCSS theme={theme}>
+      <QueryClientProvider client={ontimeQueryClient}>
+        <AppContextProvider>
+          <BrowserRouter>
+            <div className='App'>
+              <ErrorBoundary>
+                <TranslationProvider>
+                  <ContextMenu>
+                    <AppRouter />
+                  </ContextMenu>
+                </TranslationProvider>
+              </ErrorBoundary>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </div>
+          </BrowserRouter>
+        </AppContextProvider>
+      </QueryClientProvider>
+    </ChakraProvider>
+  );
+}
+
+export default App;

apps/client/src/AppRouter.tsx

@@ -0,0 +1,109 @@
+import { lazy, Suspense } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+
+import withAlias from './features/AliasWrapper';
+import withData from './features/viewers/ViewWrapper';
+
+const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
+const Cuesheet = lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
+const Operator = lazy(() => import('./features/operator/Operator'));
+
+const TimerView = lazy(() => import('./features/viewers/timer/Timer'));
+const MinimalTimerView = lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
+const ClockView = lazy(() => import('./features/viewers/clock/Clock'));
+const Countdown = lazy(() => import('./features/viewers/countdown/Countdown'));
+
+const Backstage = lazy(() => import('./features/viewers/backstage/Backstage'));
+const Public = lazy(() => import('./features/viewers/public/Public'));
+const Lower = lazy(() => import('./features/viewers/lower-thirds/LowerWrapper'));
+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 EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
+const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
+const TimerControl = lazy(() => import('./features/control/playback/TimerControlExport'));
+const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
+const Info = lazy(() => import('./features/info/InfoExport'));
+
+export default function AppRouter() {
+  return (
+    <Suspense fallback={null}>
+      <Routes>
+        <Route path='/' element={<Navigate to='/timer' />} />
+        <Route path='/speaker' element={<STimer />} />
+        <Route path='/presenter' element={<STimer />} />
+        <Route path='/stage' element={<STimer />} />
+        <Route path='/timer' element={<STimer />} />
+
+        <Route path='/minimal' element={<SMinimalTimer />} />
+        <Route path='/minimalTimer' element={<SMinimalTimer />} />
+        <Route path='/simpleTimer' element={<SMinimalTimer />} />
+
+        <Route path='/clock' element={<SClock />} />
+
+        <Route path='/countdown' element={<SCountdown />} />
+
+        <Route path='/sm' element={<SBackstage />} />
+        <Route path='/backstage' element={<SBackstage />} />
+
+        <Route path='/public' element={<SPublic />} />
+        <Route path='/studio' element={<SStudio />} />
+        {/*/!* Lower cannot have fallback *!/*/}
+        <Route path='/lower' element={<SLowerThird />} />
+
+        <Route path='/op' element={<Operator />} />
+        <Route path='/operator' element={<Operator />} />
+
+        {/*/!* Protected Routes *!/*/}
+        <Route path='/editor' element={<Editor />} />
+        <Route path='/cuesheet' element={<Cuesheet />} />
+        <Route path='/cuelist' element={<Cuesheet />} />
+        <Route path='/table' element={<Cuesheet />} />
+
+        {/*/!* Protected Routes - Elements *!/*/}
+        <Route
+          path='/rundown'
+          element={
+            <EditorFeatureWrapper>
+              <RundownPanel />
+            </EditorFeatureWrapper>
+          }
+        />
+        <Route
+          path='/timercontrol'
+          element={
+            <EditorFeatureWrapper>
+              <TimerControl />
+            </EditorFeatureWrapper>
+          }
+        />
+        <Route
+          path='/messagecontrol'
+          element={
+            <EditorFeatureWrapper>
+              <MessageControl />
+            </EditorFeatureWrapper>
+          }
+        />
+        <Route
+          path='/info'
+          element={
+            <EditorFeatureWrapper>
+              <Info />
+            </EditorFeatureWrapper>
+          }
+        />
+        {/*/!* Send to default if nothing found *!/*/}
+        <Route path='*' element={<STimer />} />
+      </Routes>
+    </Suspense>
+  );
+}

apps/client/src/assets/images/ontime-logo.svg

@@ -0,0 +1,21 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="256" height="256" rx="24" fill="#222222"/>
+<path d="M40.5 131.781V128.193C40.5 114.635 42.4369 102.159 46.3106 90.7659C50.1843 79.2587 55.8239 69.2896 63.2295 60.8586C70.6351 52.4277 79.7497 45.8765 90.5733 41.2053C101.397 36.4202 113.815 34.0276 127.829 34.0276C141.843 34.0276 154.318 36.4202 165.256 41.2053C176.193 45.8765 185.365 52.4277 192.771 60.8586C200.29 69.2896 205.987 79.2587 209.86 90.7659C213.734 102.159 215.671 114.635 215.671 128.193V131.781C215.671 145.226 213.734 157.701 209.86 169.208C205.987 180.601 200.29 190.571 192.771 199.115C185.365 207.546 176.25 214.098 165.427 218.769C154.603 223.44 142.185 225.776 128.171 225.776C114.157 225.776 101.682 223.44 90.7442 218.769C79.9206 214.098 70.7491 207.546 63.2295 199.115C55.8239 190.571 50.1843 180.601 46.3106 169.208C42.4369 157.701 40.5 145.226 40.5 131.781ZM89.7188 128.193V131.781C89.7188 139.529 90.4024 146.764 91.7696 153.486C93.1368 160.208 95.3015 166.132 98.2637 171.259C101.34 176.272 105.328 180.203 110.227 183.051C115.126 185.899 121.107 187.323 128.171 187.323C135.007 187.323 140.874 185.899 145.773 183.051C150.673 180.203 154.603 176.272 157.565 171.259C160.528 166.132 162.692 160.208 164.06 153.486C165.541 146.764 166.281 139.529 166.281 131.781V128.193C166.281 120.673 165.541 113.609 164.06 107.001C162.692 100.279 160.471 94.3547 157.395 89.2278C154.432 83.9869 150.502 79.8853 145.603 76.9231C140.703 73.9609 134.779 72.4797 127.829 72.4797C120.879 72.4797 114.955 73.9609 110.056 76.9231C105.271 79.8853 101.34 83.9869 98.2637 89.2278C95.3015 94.3547 93.1368 100.279 91.7696 107.001C90.4024 113.609 89.7188 120.673 89.7188 128.193Z" fill="#FFFFFA"/>
+<mask id="mask0_30_31" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="40" y="34" width="176" height="192">
+<path d="M40.5 131.781V128.193C40.5 114.635 42.4369 102.159 46.3106 90.7659C50.1843 79.2587 55.8239 69.2896 63.2295 60.8586C70.6351 52.4277 79.7497 45.8765 90.5733 41.2053C101.397 36.4202 113.815 34.0276 127.829 34.0276C141.843 34.0276 154.318 36.4202 165.256 41.2053C176.193 45.8765 185.365 52.4277 192.771 60.8586C200.29 69.2896 205.987 79.2587 209.86 90.7659C213.734 102.159 215.671 114.635 215.671 128.193V131.781C215.671 145.226 213.734 157.701 209.86 169.208C205.987 180.601 200.29 190.571 192.771 199.115C185.365 207.546 176.25 214.098 165.427 218.769C154.603 223.44 142.185 225.776 128.171 225.776C114.157 225.776 101.682 223.44 90.7442 218.769C79.9206 214.098 70.7491 207.546 63.2295 199.115C55.8239 190.571 50.1843 180.601 46.3106 169.208C42.4369 157.701 40.5 145.226 40.5 131.781ZM89.7188 128.193V131.781C89.7188 139.529 90.4024 146.764 91.7696 153.486C93.1368 160.208 95.3015 166.132 98.2637 171.259C101.34 176.272 105.328 180.203 110.227 183.051C115.126 185.899 121.107 187.323 128.171 187.323C135.007 187.323 140.874 185.899 145.773 183.051C150.673 180.203 154.603 176.272 157.565 171.259C160.528 166.132 162.692 160.208 164.06 153.486C165.541 146.764 166.281 139.529 166.281 131.781V128.193C166.281 120.673 165.541 113.609 164.06 107.001C162.692 100.279 160.471 94.3547 157.395 89.2278C154.432 83.9869 150.502 79.8853 145.603 76.9231C140.703 73.9609 134.779 72.4797 127.829 72.4797C120.879 72.4797 114.955 73.9609 110.056 76.9231C105.271 79.8853 101.34 83.9869 98.2637 89.2278C95.3015 94.3547 93.1368 100.279 91.7696 107.001C90.4024 113.609 89.7188 120.673 89.7188 128.193Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_30_31)">
+<path d="M17.7519 90.6278C32.2336 84.5548 31.0535 58.0568 38.3066 62.5986C47.3731 68.2758 38.3066 41.1095 50.9198 47.1825C71.1339 56.9152 40.7009 64.5389 62.3666 76.9778C84.0323 89.4167 171.756 99.642 202.839 160.802C214.766 184.27 220.843 191.199 223.166 192.958C224.57 192.837 224.823 194.214 223.166 192.958C222.812 192.989 222.385 193.115 221.898 193.401C216.763 196.422 122.406 273.336 83.6205 225.168C44.8346 177 2.09417 132.401 13.321 120.526C22.3025 111.025 14.6184 97.1566 17.7519 90.6278Z" fill="url(#paint0_linear_30_31)"/>
+<path d="M39.2409 66.8029C31.9877 62.2612 38.8572 79.7789 16.8175 87.8247C13.684 94.3536 21.1274 106.353 12.1459 115.854C0.919109 127.73 47.1703 180.27 85.9563 228.438C124.742 276.606 200.88 205.765 206.015 202.745C211.149 199.724 219.133 212.629 196.599 168.158C165.523 106.828 78.8569 98.1563 57.3454 76.3867C38.7095 57.5272 88.9205 36.7794 67.2701 41.1095C39.2409 46.7153 48.3073 72.4802 39.2409 66.8029Z" fill="url(#paint1_linear_30_31)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_30_31" x1="87.4684" y1="-29.7758" x2="62.9476" y2="328.852" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF0000" stop-opacity="0.74"/>
+<stop offset="1" stop-color="#FF0000" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_30_31" x1="82.3228" y1="-32.8735" x2="57.802" y2="325.754" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF005C" stop-opacity="0.74"/>
+<stop offset="1" stop-color="#FF005C" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -0,0 +1,26 @@
+// REST stuff
+export const PROJECT_DATA = ['project'];
+export const ALIASES = ['aliases'];
+export const USERFIELDS = ['userFields'];
+export const RUNDOWN = ['rundown'];
+export const APP_INFO = ['appinfo'];
+export const OSC_SETTINGS = ['oscSettings'];
+export const APP_SETTINGS = ['appSettings'];
+export const VIEW_SETTINGS = ['viewSettings'];
+export const RUNTIME = ['runtimeStore'];
+
+const location = window.location;
+const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
+export const isProduction = import.meta.env.MODE === 'production';
+
+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 projectDataURL = `${serverURL}/project`;
+export const rundownURL = `${serverURL}/events`;
+export const ontimeURL = `${serverURL}/ontime`;
+
+export const stylesPath = 'external/styles/override.css';
+export const overrideStylesURL = `${serverURL}/${stylesPath}`;

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

@@ -0,0 +1,53 @@
+import axios, { AxiosError } from 'axios';
+import { LogLevel } from 'ontime-types';
+import { generateId, millisToString } from 'ontime-utils';
+
+import { ontimeQueryClient } from '../queryClient';
+import { addLog } from '../stores/logger';
+import { nowInMillis } from '../utils/time';
+
+export function maybeAxiosError(error: unknown) {
+  if (axios.isAxiosError(error)) {
+    const statusText = (error as AxiosError).response?.statusText ?? '';
+    let data = (error as AxiosError).response?.data ?? '';
+    if (typeof data === 'object') {
+      if ('message' in data) {
+        data = JSON.stringify(data.message);
+      } else {
+        data = JSON.stringify(data);
+      }
+    }
+    return `${statusText}: ${data}`;
+  } else {
+    if (typeof error !== 'string') {
+      return JSON.stringify(error);
+    }
+    return error;
+  }
+}
+
+export function logAxiosError(prepend: string, error: unknown) {
+  const message = `${prepend}: ${maybeAxiosError(error)}`;
+
+  addLog({
+    id: generateId(),
+    origin: 'SERVER',
+    time: millisToString(nowInMillis()),
+    level: LogLevel.Error,
+    text: message,
+  });
+}
+
+/**
+ * Utility function invalidates react-query caches
+ */
+export async function invalidateAllCaches() {
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['project'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['aliases'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['userFields'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['rundown'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['appinfo'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['oscSettings'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['appSettings'] });
+  await ontimeQueryClient.invalidateQueries({ queryKey: ['viewSettings'] });
+}

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

@@ -0,0 +1,90 @@
+import axios from 'axios';
+import { GetRundownCached, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
+
+import { rundownURL } from './apiConstants';
+
+/**
+ * @description HTTP request to fetch all events
+ * @return {Promise}
+ */
+export async function fetchCachedRundown(): Promise<GetRundownCached> {
+  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: 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);
+}
+
+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/ontimeApi.ts

@@ -0,0 +1,290 @@
+import axios, { AxiosResponse } from 'axios';
+import {
+  Alias,
+  DatabaseModel,
+  GetInfo,
+  GoogleSheet,
+  GoogleSheetState,
+  OntimeRundown,
+  OSCSettings,
+  OscSubscription,
+  ProjectData,
+  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 mutate aliases
+ * @return {Promise}
+ */
+export async function postAliases(data: Alias[]) {
+  return axios.post(`${ontimeURL}/aliases`, data);
+}
+
+/**
+ * @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) {
+  return axios.post(`${ontimeURL}/osc`, data);
+}
+
+/**
+ * @description HTTP request to mutate osc subscriptions
+ * @return {Promise}
+ */
+export async function postOscSubscriptions(data: OscSubscription) {
+  return axios.post(`${ontimeURL}/osc-subscriptions`, data);
+}
+
+/**
+ * @description HTTP request to download db in CSV format
+ */
+export const downloadCSV = () => {
+  return fileDownload(ontimeURL, { name: 'rundown', type: 'csv' }, { type: 'text/csv;charset=utf-8;' });
+};
+
+/**
+ * @description HTTP request to download db in JSON format
+ */
+export const downloadRundown = () => {
+  return fileDownload(ontimeURL, { name: 'rundown', type: 'json' }, { type: 'application/json;charset=utf-8;' });
+};
+
+// 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;
+  project: ProjectData;
+  userFields: UserFields;
+};
+
+/**
+ * @description Make patch changes to the objects in the db
+ * @return {Promise} - returns parsed rundown and userfields
+ */
+export async function postPreviewExcel(file: File, setProgress: (value: number) => void, options?: ExcelImportMap) {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  formData.append('options', JSON.stringify(options));
+
+  const response: AxiosResponse<PostPreviewExcelResponse> = await axios.post(
+    `${ontimeURL}/preview-spreadsheet`,
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress: (progressEvent) => {
+        const complete = progressEvent?.total ? Math.round((progressEvent.loaded * 100) / progressEvent.total) : 0;
+        setProgress(complete);
+      },
+    },
+  );
+
+  return response;
+}
+
+export type HasUpdate = {
+  url: string;
+  version: string;
+};
+
+/**
+ * @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,
+  };
+}
+
+export async function postNew(initialData: Partial<ProjectData>) {
+  return axios.post(`${ontimeURL}/new`, initialData);
+}
+
+/**
+ * @description sheet Client File
+ * @return {Promise}
+ */
+export const uploadSheetClientFile = async (file: File) => {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  await axios
+    .post(`${ontimeURL}/sheet-clientsecrect`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+    .then((response) => response.data.id);
+};
+
+export const getSheetsAuthUrl = async () => {
+  const res = await axios.get(`${ontimeURL}/sheet-authurl`);
+  return res.data;
+};
+
+export const postPreviewSheet = async () => {
+  const response = await axios.post(`${ontimeURL}/sheet-preview`);
+  return response.data.data;
+};
+
+export const postPushSheet = async () => {
+  const response = await axios.post(`${ontimeURL}/sheet-push`);
+  return response.data.data;
+};
+
+
+/**
+ * @description HTTP request to retrieve google sheets settings
+ * @return {Promise}
+ */
+export async function getSheetSettings(): Promise<GoogleSheet> {
+  const res = await axios.get(`${ontimeURL}/sheet-settings`);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to mutate google sheets settings
+ * @return {Promise}
+ */
+export async function postSheetSettings(data: GoogleSheet): Promise<GoogleSheet> {
+  const res = await axios.post(`${ontimeURL}/sheet-settings`, data);
+  return res.data;
+}
+
+/**
+ * @description HTTP request to retrieve google sheets state
+ * @return {Promise}
+ */
+export async function getSheetstate(): Promise<GoogleSheetState> {
+  const res = await axios.get(`${ontimeURL}/sheet-state`);
+  return res.data;
+}

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

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

apps/client/src/common/components/buttons/QuitIconBtn.tsx

@@ -1,5 +1,4 @@
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { Button, IconButton } from '@chakra-ui/button';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   AlertDialog,
   AlertDialogBody,
@@ -7,24 +6,52 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogOverlay,
-} from '@chakra-ui/modal';
-import { Tooltip } from '@chakra-ui/tooltip';
+  Button,
+  IconButton,
+  Tooltip,
+} from '@chakra-ui/react';
 import { FiPower } from '@react-icons/all-files/fi/FiPower';
-import PropTypes from 'prop-types';
 
-import { LoggingContext } from '../../context/LoggingContext';
+import { Size } from '../../models/Util.type';
+import { useEmitLog } from '../../stores/logger';
 
-export default function QuitIconBtn(props) {
-  const { clickHandler, size = 'lg', ...rest } = props;
+interface QuitIconBtnProps {
+  clickHandler: () => void;
+  size?: Size;
+  disabled?: boolean;
+}
+
+const quitBtnStyle = {
+  color: '#D20300', // $red-700
+  borderColor: '#D20300', // $red-700
+  _focus: { boxShadow: 'none' },
+  _hover: {
+    background: '#D20300', // $red-700
+    color: 'white',
+    _disabled: {
+      color: '#D20300', // $red-700
+      background: 'none',
+    },
+  },
+  _active: {
+    background: '#9A0000', // $red-1000
+    color: 'white',
+  },
+  variant: 'outline',
+  isRound: true,
+};
+
+export default function QuitIconBtn(props: QuitIconBtnProps) {
+  const { clickHandler, size = 'lg', disabled, ...rest } = props;
   const [isOpen, setIsOpen] = useState(false);
-  const { emitInfo } = useContext(LoggingContext);
+  const { emitInfo } = useEmitLog();
   const onClose = () => setIsOpen(false);
-  const cancelRef = useRef();
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     if (window.process?.type === 'renderer') {
       window.ipcRenderer.on('user-request-shutdown', () => {
-        emitInfo('Shutdown request')
+        emitInfo('Shutdown request');
         setIsOpen(true);
       });
     }
@@ -39,13 +66,12 @@ export default function QuitIconBtn(props) {
     <>
       <Tooltip label='Quit Application'>
         <IconButton
+          aria-label='Quit Application'
           size={size}
           icon={<FiPower />}
-          colorScheme='red'
-          variant='outline'
-          isRound
           onClick={() => setIsOpen(true)}
-          _focus={{ boxShadow: 'none' }}
+          isDisabled={disabled}
+          {...quitBtnStyle}
           {...rest}
         />
       </Tooltip>
@@ -53,13 +79,11 @@ export default function QuitIconBtn(props) {
         <AlertDialogOverlay>
           <AlertDialogContent>
             <AlertDialogHeader fontSize='lg' fontWeight='bold'>
-              Server Shutdown
+              Ontime Shutdown
             </AlertDialogHeader>
-            <AlertDialogBody>
-              This will shutdown the program and all running servers. Are you sure?
-            </AlertDialogBody>
+            <AlertDialogBody>This will shutdown the program and all running servers. Are you sure?</AlertDialogBody>
             <AlertDialogFooter>
-              <Button ref={cancelRef} onClick={onClose}>
+              <Button ref={cancelRef} onClick={onClose} variant='ghost'>
                 Cancel
               </Button>
               <Button colorScheme='red' onClick={handleShutdown} ml={3}>
@@ -72,8 +96,3 @@ export default function QuitIconBtn(props) {
     </>
   );
 }
-
-QuitIconBtn.propTypes = {
-  clickHandler: PropTypes.func,
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-};

apps/client/src/common/components/buttons/TooltipActionBtn.tsx

@@ -1,9 +1,8 @@
-import { IconButton } from '@chakra-ui/button';
-import { IconButtonProps } from '@chakra-ui/react';
-import { Tooltip } from '@chakra-ui/tooltip';
+import { MouseEvent } from 'react';
+import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
 
 interface TooltipActionBtnProps extends IconButtonProps {
-  clickHandler: () => void;
+  clickHandler: (event?: MouseEvent) => void | Promise<void>;
   tooltip: string;
   openDelay?: number;
 }
@@ -12,14 +11,7 @@ export default function TooltipActionBtn(props: TooltipActionBtnProps) {
   const { clickHandler, icon, size = 'xs', tooltip, openDelay = 0, className, ...rest } = props;
   return (
     <Tooltip label={tooltip} openDelay={openDelay}>
-      <IconButton
-        {...rest}
-        aria-label={tooltip}
-        size={size}
-        icon={icon}
-        onClick={clickHandler}
-        className={className}
-      />
+      <IconButton {...rest} size={size} icon={icon} onClick={clickHandler} className={className} />
     </Tooltip>
   );
 }

apps/client/src/common/components/collapse-bar/CollapseBar.module.scss

@@ -0,0 +1,24 @@
+@use '../../../theme/v2Styles' as *;
+
+.header {
+  font-size: $inner-section-text-size;
+  font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  color: $section-white;
+  margin-top: $main-spacing;
+  border-bottom: 1px solid $border-color-ondark;
+  padding-bottom: $element-inner-spacing;
+  margin-bottom: $element-spacing;
+  cursor: pointer;
+}
+
+.moreExpanded {
+  transform: scaleY(-1);
+  transition: transform $transition-time-feedback;
+}
+
+.moreCollapsed {
+  transform: scaleY(1);
+  transition: transform $transition-time-feedback;
+}

apps/client/src/common/components/collapse-bar/CollapseBar.tsx

@@ -0,0 +1,20 @@
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+
+import style from './CollapseBar.module.scss';
+
+interface CollapseBarProps {
+  title: string;
+  isCollapsed: boolean;
+  onClick: () => void;
+}
+
+export default function CollapseBar(props: CollapseBarProps) {
+  const { title = 'Collapse bar', isCollapsed, onClick } = props;
+
+  return (
+    <div className={style.header} onClick={onClick}>
+      {title}
+      <FiChevronUp className={isCollapsed ? style.moreCollapsed : style.moreExpanded} />
+    </div>
+  );
+}

apps/client/src/common/components/context-menu/ContextMenu.module.scss

@@ -0,0 +1,9 @@
+.contextMenuButton {
+  position: absolute;
+  cursor: pointer;
+}
+
+.contextMenuBackdrop {
+  position: fixed;
+  inset: 0;
+}

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

@@ -0,0 +1,84 @@
+// logic (with some modifications) culled from:
+// https://github.com/lukasbach/chakra-ui-contextmenu/blob/main/src/ContextMenu.tsx
+
+import { Fragment, ReactElement } from 'react';
+import { Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
+import { IconType } from '@react-icons/all-files';
+import { create } from 'zustand';
+
+import style from './ContextMenu.module.scss';
+
+type ContextMenuCoords = {
+  x: number;
+  y: number;
+};
+
+export type Option = {
+  label: string;
+  icon: IconType;
+  onClick: () => void;
+  withDivider?: boolean;
+  isDisabled?: boolean;
+};
+
+type ContextMenuStore = {
+  coords: ContextMenuCoords;
+  options: Option[];
+  isOpen: boolean;
+  setContextMenu: (coords: ContextMenuCoords, options: Option[]) => void;
+  setIsOpen: (newIsOpen: boolean) => void;
+};
+
+export const useContextMenuStore = create<ContextMenuStore>((set) => ({
+  coords: { x: 0, y: 0 },
+  options: [],
+  isOpen: false,
+  setContextMenu: (coords, options) => set(() => ({ coords, options, isOpen: true })),
+  setIsOpen: (newIsOpen) => set(() => ({ isOpen: newIsOpen })),
+}));
+
+interface ContextMenuProps {
+  // ReactElement type required due to early `return` (line 51) returning {children}
+  children: ReactElement;
+}
+
+export const ContextMenu = ({ children }: ContextMenuProps) => {
+  const { coords, options, isOpen, setIsOpen } = useContextMenuStore();
+
+  const onClose = () => {
+    return setIsOpen(false);
+  };
+
+  if (!isOpen) {
+    return children;
+  }
+
+  return (
+    <>
+      {children}
+      <div className={style.contextMenuBackdrop} />
+      <Menu isOpen gutter={0} onClose={onClose} isLazy lazyBehavior='unmount' variant='ontime-on-dark'>
+        <MenuButton
+          className={style.contextMenuButton}
+          aria-hidden
+          w={1}
+          h={1}
+          style={{
+            left: coords.x,
+            top: coords.y,
+          }}
+        />
+        <MenuList>
+          {options.map(({ label, icon: Icon, onClick, withDivider, isDisabled }, i) => (
+            <Fragment key={label}>
+              {withDivider && <MenuDivider />}
+              <MenuItem key={i} icon={<Icon />} onClick={onClick} isDisabled={isDisabled}>
+                {label}
+              </MenuItem>
+            </Fragment>
+          ))}
+        </MenuList>
+      </Menu>
+    </>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react';
+import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
+import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { Size } from '../../models/Util.type';
+import copyToClipboard from '../../utils/copyToClipboard';
+
+interface CopyTagProps {
+  label: string;
+  className?: string;
+  size?: Size;
+}
+
+export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
+  const { label, className, size = 'xs', 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}>
+          {children}
+        </Button>
+        <IconButton aria-label={label} icon={<IoCopy />} variant='ontime-filled' tabIndex={-1} onClick={handleClick} />
+      </ButtonGroup>
+    </Tooltip>
+  );
+}

apps/client/src/common/components/delay-indicator/DelayIndicator.module.scss

@@ -0,0 +1,9 @@
+@use '../../../theme/v2Styles' as *;
+
+.delaySymbol {
+  svg {
+    font-size: 1.5rem;
+    color: $ontime-delay;
+    margin: 0 auto;
+  }
+}

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

@@ -0,0 +1,40 @@
+import { Tooltip } from '@chakra-ui/react';
+import { IoChevronDown } from '@react-icons/all-files/io5/IoChevronDown';
+import { IoChevronUp } from '@react-icons/all-files/io5/IoChevronUp';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { millisToDelayString } from '../../utils/dateConfig';
+
+import style from './DelayIndicator.module.scss';
+
+interface DelayIndicatorProps {
+  delayValue?: number;
+}
+
+export default function DelayIndicator(props: DelayIndicatorProps) {
+  const { delayValue } = props;
+
+  if (typeof delayValue === 'number') {
+    if (delayValue < 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronDown />
+          </span>
+        </Tooltip>
+      );
+    }
+
+    if (delayValue > 0) {
+      return (
+        <Tooltip openDelay={tooltipDelayFast} label={millisToDelayString(delayValue)}>
+          <span className={style.delaySymbol}>
+            <IoChevronUp />
+          </span>
+        </Tooltip>
+      );
+    }
+  }
+
+  return null;
+}

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

@@ -1,13 +1,14 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
+// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
+import * as Sentry from '@sentry/react';
 
-import { version as appVersion } from '../../../../package.json';
-import { LoggingContext } from '../../context/LoggingContext';
+import { runtime } from '@/common/stores/runtime';
+import { hasConnected, reconnectAttempts, shouldReconnect } from '@/common/utils/socket';
 
 import style from './ErrorBoundary.module.scss';
 
 class ErrorBoundary extends React.Component {
-  static contextType = LoggingContext;
   reportContent = '';
 
   constructor(props) {
@@ -25,36 +26,36 @@ class ErrorBoundary extends React.Component {
       error: error,
       errorInfo: info,
     });
-    try {
-      this.context.emitError(error.toString());
-    } catch (e) {
-      console.log('Unable to emit error', error, e )
-    }
+
+    Sentry.withScope((scope) => {
+      scope.setExtras('error', error);
+      scope.setExtras('store', runtime.getState());
+      scope.setExtras('hasSocket', { hasConnected, shouldReconnect, reconnectAttempts });
+      const eventId = Sentry.captureException(error);
+      this.setState({ eventId, info });
+    });
     this.reportContent = `${error} ${info.componentStack}`;
   }
 
   render() {
     if (this.state.errorMessage) {
       return (
-        <div className={style.errorContainer} data-testid="error-container">
+        <div className={style.errorContainer} data-testid='error-container'>
           <div>
             <p className={style.error}>:/</p>
             <p>Something went wrong</p>
-            <p
+            <div
+              role='button'
               className={style.report}
-              onClick={() => {
-                if (navigator.clipboard) {
-                  const copyContent = `ontime version ${appVersion} \n ${this.reportContent}`;
-                  navigator.clipboard.writeText(copyContent);
-                }
-              }}
+              onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
             >
-              Copy error
-            </p>
-            <p
+              Report error
+            </div>
+            <div
+              role='button'
               className={style.report}
               onClick={() => {
-                if (window.process.type === 'renderer') {
+                if (window?.process?.type === 'renderer') {
                   window.ipcRenderer.send('reload');
                 } else {
                   window.location.reload();
@@ -62,7 +63,7 @@ class ErrorBoundary extends React.Component {
               }}
             >
               Reload interface
-            </p>
+            </div>
           </div>
         </div>
       );

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

@@ -1,4 +1,4 @@
-@use '../../../theme/main' as *;
+@use '../../../theme/v2Styles' as *;
 
 .errorContainer {
   width: 100%;
@@ -9,17 +9,17 @@
   color: white;
 
   .error {
-    color: $ontime-pink;
+    color: $error-red;
     font-weight: 600;
   }
 
   .report {
-    text-decoration: underline  $ontime-pink;
+    text-decoration: underline  $error-red;
     cursor: pointer;
   }
 
   .report:hover {
-    color: $ontime-pink;
+    color: $error-red;
   }
 
   .report:active {

apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react';
-import { Textarea } from '@chakra-ui/react';
+import { Textarea, TextareaProps } from '@chakra-ui/react';
+// @ts-expect-error no types from library
 import autosize from 'autosize/dist/autosize';
 
-export const AutoTextArea = (props) => {
-  const ref = useRef();
+export const AutoTextArea = (props: TextareaProps) => {
+  const ref = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     const node = ref.current;
@@ -13,7 +14,6 @@ export const AutoTextArea = (props) => {
     };
   }, []);
 
-
   return (
     <Textarea
       overflow='hidden'
@@ -21,6 +21,7 @@ export const AutoTextArea = (props) => {
       resize='none'
       ref={ref}
       transition='height none'
+      variant='ontime-transparent'
       {...props}
     />
   );

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

@@ -0,0 +1,26 @@
+import { IoBan } from '@react-icons/all-files/io5/IoBan';
+
+import { cx } from '../../../utils/styleUtils';
+
+import style from './SwatchSelect.module.scss';
+
+interface SwatchProps {
+  color: string;
+  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]);
+
+  if (!color) {
+    return (
+      <div className={`${classes} ${style.center}`} onClick={() => onClick('')}>
+        <IoBan />
+      </div>
+    );
+  }
+  return <div className={classes} style={{ backgroundColor: `${color}` }} onClick={() => onClick(color)} />;
+}

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

@@ -0,0 +1,24 @@
+
+.list {
+  display: flex;
+  gap: 4px;
+}
+
+.swatch {
+  cursor: pointer;
+  aspect-ratio: 1;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 16px;
+  border: 4px solid #262626;
+
+  &.selected {
+    border: 2px solid #578AF4;
+  }
+}
+
+.center {
+  display: grid;
+  place-content: center;
+  color: #578AF4;
+}

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

@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+
+import { EditorUpdateFields } from '../../../../features/event-editor/EventEditor';
+
+import Swatch from './Swatch';
+
+import style from './SwatchSelect.module.scss';
+
+interface ColourInputProps {
+  value: string;
+  name: EditorUpdateFields;
+  handleChange: (newValue: EditorUpdateFields, name: string) => void;
+}
+
+const colours = [
+  '',
+  '#FFCC78', // $orange-400
+  '#FFAB33', // $orange-600
+  '#77C785', // $green-400
+  '#339E4E', // $green-600
+  '#779BE7', // $blue-400
+  '#3E75E8', // $blue-600
+  '#FF7878', // $red-400
+  '#ED3333', // $red-600
+  '#A790F5', // $violet-400
+  '#8064E1', // $violet-600
+  '#9d9d9d', // $gray-500
+  '#ececec', // $gray-100
+];
+
+export default function SwatchSelect(props: ColourInputProps) {
+  const { value, name, handleChange } = props;
+
+  const setColour = useCallback(
+    (newValue: string) => {
+      if (newValue !== value) {
+        handleChange(name, newValue);
+      }
+    },
+    [handleChange, name, value],
+  );
+
+  return (
+    <div className={style.list}>
+      {colours.map((colour) => (
+        <Swatch key={colour} color={colour} onClick={setColour} isSelected={value === colour} />
+      ))}
+    </div>
+  );
+}

apps/client/src/common/components/input/delay-input/DelayInput.module.scss

@@ -0,0 +1,24 @@
+@use '../../../../theme/v2Styles' as *;
+
+$input-font-size: 15px;
+
+.delayInput {
+  display: flex;
+  gap: $element-spacing;
+  align-items: center;
+  font-size: $text-body-size;
+
+
+  .inputField {
+    font-size: $input-font-size;
+    letter-spacing: 1px;
+    max-width: 7em;
+    padding-left: 16px;
+    color: $ontime-delay-text
+  }
+}
+
+.delayOptions {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,134 @@
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { Input, Radio, RadioGroup } from '@chakra-ui/react';
+import { millisToString } from 'ontime-utils';
+
+import { useEventAction } from '../../../hooks/useEventAction';
+import { forgivingStringToMillis } from '../../../utils/dateConfig';
+
+import style from './DelayInput.module.scss';
+
+interface DelayInputProps {
+  eventId: string;
+  duration: number;
+}
+
+export default function DelayInput(props: DelayInputProps) {
+  const { eventId, duration } = props;
+  const { updateEvent } = useEventAction();
+
+  const [value, setValue] = useState<string>('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // avoid wrong submit on cancel
+  let ignoreChange = false;
+
+  useEffect(() => {
+    if (typeof duration === 'undefined') {
+      return;
+    }
+    setValue(millisToString(duration));
+  }, [duration]);
+
+  /**
+   * @description Prepare delay value for update
+   * @param {string} newValue string to be parsed
+   */
+  const validateAndSubmit = (newValue: string) => {
+    if (ignoreChange) {
+      ignoreChange = false;
+      return;
+    }
+
+    const isNegative = newValue.startsWith('-');
+    let newMillis = forgivingStringToMillis(newValue);
+
+    if (isNegative) {
+      newMillis = newMillis * -1;
+    }
+
+    if (newMillis === duration) {
+      return;
+    }
+
+    submitChange(newMillis);
+    setValue(millisToString(newMillis));
+  };
+
+  const submitChange = (value: number) => {
+    updateEvent({
+      id: eventId,
+      duration: value,
+    });
+  };
+
+  /**
+   * @description Selects input text on focus
+   */
+  const handleFocus = () => inputRef.current?.select();
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = (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);
+    } else if (event.key === 'Escape') {
+      ignoreChange = true;
+      setValue(millisToString(duration));
+      inputRef.current?.blur();
+    }
+  };
+
+  /**
+   * @description handles direction change to delay
+   * @param newDirection
+   */
+  const handleSlipChange = (newDirection: 'add' | 'subtract') => {
+    if (newDirection === 'add') {
+      // add time
+      if (duration < 0) {
+        submitChange(duration * -1);
+      }
+    } else if (newDirection === 'subtract') {
+      // subtract time
+      if (duration > 0) {
+        submitChange(duration * -1);
+      }
+    }
+  };
+
+  const checkedOption = value.startsWith('-') ? 'subtract' : 'add';
+
+  return (
+    <div className={style.delayInput}>
+      <Input
+        size='sm'
+        ref={inputRef}
+        data-testid='delay-input'
+        className={style.inputField}
+        type='text'
+        placeholder='-'
+        variant='ontime-filled'
+        onFocus={handleFocus}
+        onChange={(event) => setValue(event.target.value)}
+        onBlur={(event) => validateAndSubmit(event.target.value)}
+        onKeyDown={onKeyDownHandler}
+        value={value}
+        maxLength={9}
+      />
+      <RadioGroup
+        className={style.delayOptions}
+        onChange={handleSlipChange}
+        value={checkedOption}
+        variant='ontime-block'
+        size='sm'
+      >
+        <Radio value='add'>Add time</Radio>
+        <Radio value='subtract'>Subtract time</Radio>
+      </RadioGroup>
+    </div>
+  );
+}

apps/client/src/common/components/input/popover-picker/PopoverPicker.module.scss

@@ -0,0 +1,19 @@
+@use "../../../../theme/_ontimeColours" as *;
+@use "../../../../theme/_v2Styles" as *;
+
+.swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  border: 1px solid white;
+  box-shadow: 0 0 0 1px $gray-300;
+  cursor: pointer;
+
+  transition-property: box-shadow;
+  transition-duration: $transition-time-action;
+}
+
+.swatch:hover {
+  box-shadow: 0 0 0 1px $blue-300;
+}
+

apps/client/src/common/components/input/popover-picker/PopoverPicker.tsx

@@ -0,0 +1,35 @@
+import { HexAlphaColorPicker } from 'react-colorful';
+import { useController, UseControllerProps } from 'react-hook-form';
+import { Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react';
+import { ViewSettings } from 'ontime-types';
+
+import style from './PopoverPicker.module.scss';
+
+export function PopoverPickerRHF(props: UseControllerProps<ViewSettings>) {
+  const { name, control } = props;
+  const {
+    field: { onChange, value },
+  } = useController({ control, name });
+
+  return <PopoverPicker color={value as string} onChange={onChange} />;
+}
+
+interface PopoverPickerProps {
+  color: string;
+  onChange: (color: string) => void;
+}
+
+export default function PopoverPicker(props: PopoverPickerProps) {
+  const { color, onChange } = props;
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <div className={style.swatch} style={{ backgroundColor: color }} />
+      </PopoverTrigger>
+      <PopoverContent style={{ width: 'auto' }}>
+        <HexAlphaColorPicker color={color} onChange={onChange} />
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/client/src/common/components/input/text-input/TextInput.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useRef } from 'react';
+import { Input, Textarea } from '@chakra-ui/react';
+
+import { EventEditorSubmitActions } from '../../../../features/event-editor/EventEditor';
+import { Size } from '../../../models/Util.type';
+
+import useReactiveTextInput from './useReactiveTextInput';
+
+interface BaseProps {
+  isTextArea?: boolean;
+  isFullHeight?: boolean;
+  size?: Size;
+  field: EventEditorSubmitActions;
+  initialText?: string;
+  submitHandler: (field: EventEditorSubmitActions, newValue: string) => void;
+}
+
+interface TextInputProps extends BaseProps {
+  isTextArea?: false;
+}
+
+type ResizeOptions = 'horizontal' | 'vertical' | 'none';
+
+interface TextAreaProps extends BaseProps {
+  isTextArea: true;
+  resize?: ResizeOptions;
+}
+
+type InputProps = TextInputProps | TextAreaProps;
+
+export default function TextInput(props: InputProps) {
+  const { isTextArea, isFullHeight, size = 'sm', field, initialText = '', submitHandler } = props;
+  const inputRef = useRef(null);
+
+  const submitCallback = useCallback((newValue: string) => submitHandler(field, newValue), [field, submitHandler]);
+
+  const textInputProps = useReactiveTextInput(initialText, submitCallback, { submitOnEnter: true });
+  const textAreaProps = useReactiveTextInput(initialText, submitCallback);
+
+  let resize: ResizeOptions = 'none';
+  if (isTextArea) {
+    resize = (props as TextAreaProps)?.resize ?? 'none';
+  }
+
+  return isTextArea ? (
+    <Textarea
+      ref={inputRef}
+      size={size}
+      resize={resize}
+      variant='ontime-filled'
+      {...textAreaProps}
+      style={{ height: isFullHeight ? '100%' : undefined }}
+      data-testid='input-textarea'
+    />
+  ) : (
+    <Input ref={inputRef} size={size} variant='ontime-filled' {...textInputProps} data-testid='input-textfield' />
+  );
+}

apps/client/src/common/components/input/text-input/useReactiveTextInput.tsx

@@ -0,0 +1,86 @@
+import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
+
+interface UseReactiveTextInputReturn {
+  value: string;
+  onChange: (event: ChangeEvent) => void;
+  onBlur: (event: ChangeEvent) => void;
+  onKeyDown: (event: KeyboardEvent) => void;
+}
+
+export default function useReactiveTextInput(
+  initialText: string,
+  submitCallback: (newValue: string) => void,
+  options?: {
+    submitOnEnter?: boolean;
+  },
+): UseReactiveTextInputReturn {
+  const [text, setText] = useState<string>(initialText);
+
+  useEffect(() => {
+    if (typeof initialText === 'undefined') {
+      setText('');
+    } else {
+      setText(initialText);
+    }
+  }, [initialText]);
+
+  /**
+   * @description Handles Input value change
+   * @param {string} newValue
+   */
+  const handleChange = useCallback(
+    (newValue: string) => {
+      if (newValue !== text) {
+        setText(newValue);
+      }
+    },
+    [text],
+  );
+
+  /**
+   * @description Handles submit events
+   * @param {string} valueToSubmit
+   */
+  const handleSubmit = useCallback(
+    (valueToSubmit: string) => {
+      // No need to update if it hasn't changed
+      if (valueToSubmit === initialText) {
+        return;
+      }
+      const cleanVal = valueToSubmit.trim();
+      submitCallback(cleanVal);
+
+      if (cleanVal !== valueToSubmit) {
+        setText(cleanVal);
+      }
+    },
+    [initialText, submitCallback],
+  );
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {string} key
+   */
+  const keyHandler = useCallback(
+    (key: string) => {
+      switch (key) {
+        case 'Escape':
+          setText(initialText);
+          break;
+        case 'Enter':
+          if (options?.submitOnEnter) {
+            handleSubmit(text);
+          }
+          break;
+      }
+    },
+    [initialText, options?.submitOnEnter, handleSubmit, text],
+  );
+
+  return {
+    value: text,
+    onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
+    onBlur: (event: ChangeEvent) => handleSubmit((event.target as HTMLInputElement).value),
+    onKeyDown: (event: KeyboardEvent) => keyHandler(event.key),
+  };
+}

apps/client/src/common/components/input/time-input/TimeInput.module.scss

@@ -0,0 +1,37 @@
+@use "../../../../theme/v2Styles" as *;
+
+$input-font-size: 15px;
+$input-delayed-border-color: #E69056;
+
+.timeInput {
+  width: fit-content !important;
+
+  .inputLeft {
+    max-width: fit-content;
+  }
+
+  .inputLeft,
+  .inputButton {
+    aspect-ratio: 1;
+  }
+
+  .inputField {
+    font-size: $input-font-size;
+    letter-spacing: 1px;
+    width: 7.5em;
+    padding: 0 0 0 2.6em;
+  }
+
+  .warn {
+    &::after {
+      content: "*";
+      color: $warning-orange;
+    }
+  }
+
+  &.delayed {
+    .inputField {
+      border: 1px solid $input-delayed-border-color;
+    }
+  }
+}

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

@@ -0,0 +1,218 @@
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Input, InputGroup, InputLeftElement, Tooltip } from '@chakra-ui/react';
+import { millisToString } from 'ontime-utils';
+
+import { tooltipDelayFast } from '../../../../ontimeConfig';
+import { useEmitLog } from '../../../stores/logger';
+import { forgivingStringToMillis } from '../../../utils/dateConfig';
+import { cx } from '../../../utils/styleUtils';
+import { TimeEntryField } from '../../../utils/timesManager';
+
+import style from './TimeInput.module.scss';
+
+interface TimeInputProps {
+  id?: TimeEntryField;
+  name: TimeEntryField;
+  submitHandler: (field: TimeEntryField, value: number) => void;
+  time?: number;
+  delay?: number;
+  placeholder: string;
+  validationHandler: (entry: TimeEntryField, val: number) => boolean;
+  previousEnd?: number;
+  warning?: string;
+}
+
+function ButtonInitial(name: TimeEntryField) {
+  if (name === 'timeStart') return 'S';
+  if (name === 'timeEnd') return 'E';
+  if (name === 'durationOverride') return 'D';
+  return '';
+}
+
+function ButtonTooltip(name: TimeEntryField, warning?: string) {
+  if (name === 'timeStart') return `Start${warning ? `: ${warning}` : ''}`;
+  if (name === 'timeEnd') return `End${warning ? `: ${warning}` : ''}`;
+  if (name === 'durationOverride') return `Duration${warning ? `: ${warning}` : ''}`;
+  return '';
+}
+
+export default function TimeInput(props: TimeInputProps) {
+  const {
+    id,
+    name,
+    submitHandler,
+    time = 0,
+    delay = 0,
+    placeholder,
+    validationHandler,
+    previousEnd = 0,
+    warning,
+  } = props;
+  const { emitError } = useEmitLog();
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [value, setValue] = useState<string>('');
+  const ignoreChange = useRef(false);
+
+  /**
+   * @description Resets input value to given
+   */
+  const resetValue = useCallback(() => {
+    try {
+      setValue(millisToString(time));
+    } catch (error) {
+      setValue(millisToString(0));
+      emitError(`Unable to parse time ${time}: ${error}`);
+    }
+  }, [emitError, time]);
+
+  /**
+   * @description Selects input text on focus
+   */
+  const handleFocus = useCallback(() => {
+    inputRef.current?.select();
+  }, []);
+
+  /**
+   * @description Submit handler
+   * @param {string} newValue
+   */
+  const handleSubmit = useCallback(
+    (newValue: string) => {
+      // Check if there is anything there
+      if (newValue === '') {
+        return false;
+      }
+
+      let newValMillis = 0;
+
+      // check for known aliases
+      if (newValue === 'p' || newValue === 'prev' || newValue === 'previous') {
+        // string to pass should be the time of the end before
+        if (previousEnd != null) {
+          newValMillis = previousEnd;
+        }
+      } else if (newValue.startsWith('+') || newValue.startsWith('p+') || newValue.startsWith('p +')) {
+        // string to pass should add to the end before
+        const val = newValue.substring(1);
+        newValMillis = previousEnd + forgivingStringToMillis(val);
+      } else {
+        // convert entered value to milliseconds
+        newValMillis = forgivingStringToMillis(newValue);
+      }
+
+      // check if time is different from before
+      if (newValMillis === time) return false;
+
+      // validate with parent
+      if (!validationHandler(name, newValMillis)) return false;
+
+      // update entry
+      submitHandler(name, newValMillis);
+
+      return true;
+    },
+    [name, previousEnd, submitHandler, time, validationHandler],
+  );
+
+  /**
+   * @description Prepare time fields
+   * @param {string} value string to be parsed
+   */
+  const validateAndSubmit = useCallback(
+    (newValue: string) => {
+      const success = handleSubmit(newValue);
+      if (success) {
+        const ms = forgivingStringToMillis(newValue);
+        const delayed = name === 'timeEnd' ? Math.max(0, ms + delay) : Math.max(0, ms + delay);
+        setValue(millisToString(delayed));
+      } else {
+        resetValue();
+      }
+    },
+    [delay, handleSubmit, name, resetValue],
+  );
+
+  /**
+   * @description Handles common keys for submit and cancel
+   * @param {KeyboardEvent} event
+   */
+  const onKeyDownHandler = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        inputRef.current?.blur();
+        validateAndSubmit((event.target as HTMLInputElement).value);
+      } else if (event.key === 'Tab') {
+        validateAndSubmit((event.target as HTMLInputElement).value);
+      }
+      if (event.key === 'Escape') {
+        ignoreChange.current = true;
+        inputRef.current?.blur();
+        resetValue();
+      }
+    },
+    [resetValue, validateAndSubmit],
+  );
+
+  const onBlurHandler = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (ignoreChange.current) {
+        ignoreChange.current = false;
+        return;
+      }
+      validateAndSubmit((event.target as HTMLInputElement).value);
+    },
+    [validateAndSubmit],
+  );
+
+  useEffect(() => {
+    if (time == null) return;
+    resetValue();
+  }, [resetValue, time]);
+
+  const isDelayed = delay !== 0;
+  const inputClasses = cx([style.timeInput, isDelayed ? style.delayed : null]);
+  const buttonClasses = cx([style.inputButton, isDelayed ? style.delayed : null, warning ? style.warn : null]);
+
+  const TooltipLabel = useMemo(() => {
+    return ButtonTooltip(name, warning);
+  }, [name, warning]);
+
+  const ButtonText = useMemo(() => {
+    return ButtonInitial(name);
+  }, [name]);
+
+  return (
+    <InputGroup size='sm' className={inputClasses}>
+      <InputLeftElement className={style.inputLeft}>
+        <Tooltip label={TooltipLabel} openDelay={tooltipDelayFast} variant='ontime-ondark'>
+          <Button
+            size='sm'
+            variant='ontime-subtle-white'
+            className={buttonClasses}
+            tabIndex={-1}
+            border={isDelayed ? '1px solid #E69056' : '1px solid transparent'}
+            borderRight='1px solid transparent'
+            borderRadius='2px 0 0 2px'
+          >
+            {ButtonText}
+          </Button>
+        </Tooltip>
+      </InputLeftElement>
+      <Input
+        ref={inputRef}
+        id={id}
+        data-testid={`time-input-${name}`}
+        className={style.inputField}
+        type='text'
+        placeholder={placeholder}
+        variant='ontime-filled'
+        onFocus={handleFocus}
+        onChange={(event) => setValue(event.target.value)}
+        onBlur={onBlurHandler}
+        onKeyDown={onKeyDownHandler}
+        value={value}
+        maxLength={8}
+      />
+    </InputGroup>
+  );
+}

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.scss

@@ -0,0 +1,48 @@
+@use '../../../theme/viewerDefs' as *;
+
+$progress-bar-size: 12px;
+$progress-bar-br: 3px;
+
+.multiprogress-bar {
+  position: relative;
+  width: 100%;
+  height: $progress-bar-size;
+  border-radius: $progress-bar-br;
+  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
+  display: flex;
+  overflow: hidden;
+
+  &--hidden {
+    display: none;
+    transition: display 0.5s;
+  }
+}
+
+.multiprogress-bar__indicator {
+  position: absolute;
+  height: inherit;
+  background-color: black;
+  opacity: 0.8;
+  transition: 1s linear;
+  transition-property: width;
+  right: 0;
+}
+
+.multiprogress-bar__bg-normal {
+  position: absolute;
+  height: inherit;
+  right: 0;
+  width: 100%;
+}
+
+.multiprogress-bar__bg-warning {
+  position: absolute;
+  height: inherit;
+  right: 0;
+}
+
+.multiprogress-bar__bg-danger {
+  position: absolute;
+  height: inherit;
+  right: 0;
+}

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -0,0 +1,43 @@
+import { clamp } from '../../utils/math';
+
+import './MultiPartProgressBar.scss';
+
+interface MultiPartProgressBar {
+  now: number | null;
+  complete: number;
+  normalColor: string;
+  warning: number;
+  warningColor: string;
+  danger: number;
+  dangerColor: string;
+  hidden?: boolean;
+  className?: string;
+}
+
+export default function MultiPartProgressBar(props: MultiPartProgressBar) {
+  const { now, complete, normalColor, warning, warningColor, danger, dangerColor, hidden, className = '' } = props;
+
+  const percentComplete = 100 - clamp(100 - (Math.max(now ?? 0, 0) * 100) / complete, 0, 100);
+
+  const dangerWidth = clamp((danger / complete) * 100, 0, 100);
+  const warningWidth = clamp((warning / complete) * 100, 0, 100);
+
+  return (
+    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
+      {now !== null && (
+        <>
+          <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
+          <div
+            className='multiprogress-bar__bg-warning'
+            style={{ width: `${warningWidth}%`, backgroundColor: warningColor }}
+          />
+          <div
+            className='multiprogress-bar__bg-danger'
+            style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }}
+          />
+          <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+        </>
+      )}
+    </div>
+  );
+}

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -0,0 +1,107 @@
+@use '../../../theme/v2Styles' as *;
+@use '../../../theme/mixins' as *;
+@use '../../../theme/ontimeColours' as *;
+
+$menu-bg: $gray-1200;
+$menu-hover-bg: $gray-1350;
+$menu-focus-bg: $gray-1300;
+
+$icon-color: $ui-white;
+$button-bg: $gray-1050;
+$button-size: 48px;
+
+.mirror {
+  transform: rotate(180deg);
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  padding: 0.5em;
+
+  transition-property: opacity;
+  transition-duration: 0.3s;
+
+  opacity: 1;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 2;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.button {
+  font-size: 24px;
+  color: $icon-color;
+  background-color: $button-bg;
+  width: $button-size;
+  height: $button-size;
+  display: grid;
+  place-content: center;
+  border-radius: 3px;
+}
+
+.navButton {
+  @extend .button;
+  z-index: 3;
+}
+
+.menuContainer {
+  top: 0;
+  left: 0;
+  height: fit-content;
+  position: absolute;
+  background-color: $menu-bg;
+  min-width: 200px;
+  border-radius: 0 0 24px 0;
+  border-right: 1px solid $border-color-ondark;
+
+  box-shadow: $box-shadow-l2;
+  padding-bottom: 1rem;
+
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.buttonsContainer {
+  margin-top: calc(56px + 1rem);
+}
+
+.link {
+  @include action-link;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $menu-hover-bg;
+  }
+
+  &:active {
+    background-color: $border-color-ondark;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: $menu-focus-bg;
+    border-left: 2px solid $action-text-color;
+  }
+
+  &.current {
+    background-color: $menu-hover-bg;
+    border-left: 4px solid $action-text-color;
+  }
+}
+
+.linkIcon {
+  display: inline-block;
+  transform: rotate(45deg);
+}
+
+.separator {
+  border-color: $border-color-ondark;
+}

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

@@ -0,0 +1,144 @@
+import { KeyboardEvent, 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 { 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';
+import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
+import { IoPencilSharp } from '@react-icons/all-files/io5/IoPencilSharp';
+import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
+
+import { navigatorConstants } from '../../../viewerConfig';
+import useClickOutside from '../../hooks/useClickOutside';
+import useFullscreen from '../../hooks/useFullscreen';
+import { useKeyDown } from '../../hooks/useKeyDown';
+import { useViewOptionsStore } from '../../stores/viewOptions';
+
+import RenameClientModal from './rename-client-modal/RenameClientModal';
+
+import style from './NavigationMenu.module.scss';
+
+function NavigationMenu() {
+  const location = useLocation();
+
+  const { isFullScreen, toggleFullScreen } = useFullscreen();
+  const { mirror, toggleMirror } = useViewOptionsStore();
+  const [showButton, setShowButton] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  useClickOutside(menuRef, () => setShowMenu(false));
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const toggleMenu = () => setShowMenu((prev) => !prev);
+  useKeyDown(toggleMenu, ' ', { isDisabled: searchParams.get('edit') === 'true' || isOpen });
+
+  useEffect(() => {
+    let fadeOut: NodeJS.Timeout | null = null;
+    const setShowMenuTrue = () => {
+      setShowButton(true);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+      fadeOut = setTimeout(() => setShowButton(false), 3000);
+    };
+    document.addEventListener('mousemove', setShowMenuTrue);
+    return () => {
+      document.removeEventListener('mousemove', setShowMenuTrue);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+    };
+  }, []);
+
+  const isKeyEnter = (event: KeyboardEvent<HTMLDivElement>) => event.key === 'Enter';
+  const handleFullscreen = () => toggleFullScreen();
+  const handleMirror = () => toggleMirror();
+
+  const showEditFormDrawer = () => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  };
+
+  return createPortal(
+    <div id='navigation-menu-portal' ref={menuRef} className={mirror ? style.mirror : ''}>
+      <RenameClientModal isOpen={isOpen} onClose={onClose} />
+      <div className={`${style.buttonContainer} ${!showButton && !showMenu ? style.hidden : ''}`}>
+        <button onClick={toggleMenu} aria-label='toggle menu' className={style.navButton}>
+          <IoApps />
+        </button>
+        <button className={style.button} onClick={showEditFormDrawer}>
+          <IoPencilSharp />
+        </button>
+        {showMenu && (
+          <div className={style.menuContainer} data-testid='navigation-menu'>
+            <div className={style.buttonsContainer}>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={handleFullscreen}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && handleFullscreen();
+                }}
+              >
+                Toggle Fullscreen
+                {isFullScreen ? <IoContract /> : <IoExpand />}
+              </div>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={handleMirror}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && handleMirror();
+                }}
+              >
+                Flip Screen
+                <IoSwapVertical />
+              </div>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={onOpen}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && onOpen();
+                }}
+              >
+                Rename Client
+              </div>
+            </div>
+            <hr className={style.separator} />
+            <Link to='/cuesheet' className={style.link} tabIndex={0}>
+              Cuesheet
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <Link to='/op' className={style.link} tabIndex={0}>
+              Operator
+              <IoArrowUp className={style.linkIcon} />
+            </Link>
+            <hr className={style.separator} />
+            {navigatorConstants.map((route) => (
+              <Link
+                key={route.url}
+                to={route.url}
+                className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
+                tabIndex={0}
+              >
+                {route.label}
+                <IoArrowUp className={style.linkIcon} />
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>,
+
+    document.body,
+  );
+}
+
+export default memo(NavigationMenu);

apps/client/src/common/components/navigation-menu/rename-client-modal/RenameClientModal.module.scss

@@ -0,0 +1,5 @@
+.modalBody {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

apps/client/src/common/components/navigation-menu/rename-client-modal/RenameClientModal.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react';
+
+import { setClientName } from '../../../hooks/useSocket';
+import { useSocketClientName } from '../../../stores/connectionName';
+
+import style from './RenameClientModal.module.scss';
+
+interface RenameClientModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function RenameClientModal({ isOpen, onClose }: RenameClientModalProps) {
+  const { name: clientName, persistName } = useSocketClientName();
+  const [newName, setNewName] = useState(clientName);
+
+  useEffect(() => {
+    setNewName(clientName);
+  }, [isOpen, clientName]);
+
+  const handleRename = async () => {
+    if (newName) {
+      await setClientName(newName);
+      persistName(newName);
+      onClose();
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      size='sm'
+      closeOnOverlayClick={false}
+      motionPreset='slideInBottom'
+      scrollBehavior='inside'
+      preserveScrollBarGap
+      variant='ontime-small'
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Rename client</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody className={style.modalBody}>
+          <Input
+            placeholder='Connection must have a name'
+            defaultValue={newName}
+            onChange={(e) => setNewName(e.target.value)}
+            variant='ontime-filled-on-light'
+          />
+          <Button
+            isDisabled={newName === clientName || !newName}
+            onClick={handleRename}
+            width='100%'
+            variant='ontime-filled'
+          >
+            Save
+          </Button>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}

apps/client/src/common/components/playback-icon/PlaybackIcon.tsx

@@ -0,0 +1,42 @@
+import { Tooltip } from '@chakra-ui/react';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import { Playback } from 'ontime-types';
+
+import { tooltipDelayFast } from '../../../ontimeConfig';
+
+interface PlaybackIconProps {
+  state: Playback;
+  skipTooltip?: boolean;
+  className?: string;
+}
+
+export default function PlaybackIcon(props: PlaybackIconProps) {
+  const { state, skipTooltip, className } = props;
+
+  // if timer is Pause or Armed
+  let label = 'Timer Paused';
+  let Icon = IoPause;
+
+  if (state === Playback.Roll) {
+    label = 'Timer Rolling';
+    Icon = IoPlay;
+  } else if (state === Playback.Play) {
+    label = 'Timer Playing';
+    Icon = IoPlay;
+  } else if (state === Playback.Stop) {
+    label = 'Timer Stopped';
+    Icon = IoStop;
+  }
+
+  if (skipTooltip) {
+    return <Icon className={className} />;
+  }
+
+  return (
+    <Tooltip openDelay={tooltipDelayFast} label={label} shouldWrapChildren>
+      <Icon className={className} />
+    </Tooltip>
+  );
+}

apps/client/src/common/components/progress-bar/ProgressBar.scss

@@ -0,0 +1,23 @@
+@use '../../../theme/viewerDefs' as *;
+
+$progress-bar-size: 12px;
+$progress-bar-br: 6px;
+
+.progress-bar__bg {
+  width: 100%;
+  height: $progress-bar-size;
+  border-radius: $progress-bar-br;
+  background-color: var(--timer-progress-bg-override, $viewer-card-bg-color);
+
+  &--hidden {
+    display: none;
+  }
+}
+
+.progress-bar__indicator {
+  height: $progress-bar-size;
+  background-color: var(--timer-progress-override, $accent-color);
+  transition: 1s linear;
+  border-radius: $progress-bar-br 0 0 $progress-bar-br;
+  transition-property: width;
+}

apps/client/src/common/components/progress-bar/ProgressBar.tsx

@@ -0,0 +1,22 @@
+import { clamp } from '../../utils/math';
+
+import './ProgressBar.scss';
+
+interface ProgressBarProps {
+  now?: number;
+  complete?: number;
+  hidden?: boolean;
+  className?: string;
+}
+
+export default function ProgressBar(props: ProgressBarProps) {
+  const { now = 0, complete = 100, hidden, className = '' } = props;
+
+  const percentComplete = clamp(100 - (Math.max(now, 0) * 100) / complete, 0, 100);
+
+  return (
+    <div className={`progress-bar__bg ${hidden ? 'progress-bar__bg--hidden' : ''} ${className}`}>
+      <div className='progress-bar__indicator' style={{ width: `${percentComplete}%` }} />
+    </div>
+  );
+}

apps/client/src/common/components/protect-route/PinPage.tsx

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from 'react';
+import { HStack, IconButton, PinInput, PinInputField } from '@chakra-ui/react';
+import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
+
+import style from './ProtectRoute.module.scss';
+
+interface PinPageProps {
+  permission: 'editor' | 'operator';
+  handleValidation: (pin: string) => boolean;
+}
+
+export default function PinPage(props: PinPageProps) {
+  const { permission, handleValidation } = props;
+  const [pin, setPin] = useState('');
+  const [failed, setFailed] = useState(false);
+
+  const validate = useCallback(() => {
+    const isValid = handleValidation(pin);
+    if (!isValid) {
+      setFailed(true);
+      setPin('');
+    }
+  }, [handleValidation, pin]);
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.repeat) return;
+      if (event.key === 'Enter') {
+        validate();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyPress);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [validate]);
+
+  return (
+    <div className={style.container}>
+      {`Ontime ${permission || ''}`}
+      <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
+        <PinInput
+          type='alphanumeric'
+          size='lg'
+          mask
+          autoFocus
+          value={pin}
+          onChange={(value) => {
+            setFailed(false);
+            setPin(value);
+          }}
+        >
+          <PinInputField />
+          <PinInputField />
+          <PinInputField />
+          <PinInputField />
+        </PinInput>
+        <IconButton aria-label='Enter' size='lg' isRound icon={<IoCheckmark />} onClick={validate} />
+      </HStack>
+    </div>
+  );
+}

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

@@ -1,16 +1,14 @@
-@use '../../../theme/main' as *;
-@use '../../../theme/mixins' as *;
+@use '../../../theme/v2Styles' as *;
 
 .container {
-  background: $bg-black;
-
   display: grid;
   place-content: center;
   height: 100vh;
   padding-bottom: 30vh;
 
-  color: $ontime-pink;
-  font-family: 'Open Sans', sans-serif;
+  background: $bg-container-l1;
+  color: $ontime-color;
+  font-family: $ontime-font-family;
   font-weight: 200;
   text-align: center;
   font-size: 3vw;
@@ -37,9 +35,9 @@
 
 @keyframes colourFade {
   from {
-    background: $ontime-pink;
+    background: $action-blue;
   }
   to {
-    background: rgba($ontime-pink, 0);
+    background: rgba($action-blue, 0);
   }
 }

apps/client/src/common/components/protect-route/ProtectRoute.tsx

@@ -0,0 +1,38 @@
+import { PropsWithChildren, useCallback, useContext } from 'react';
+
+import { AppContext } from '../../context/AppContext';
+
+import PinPage from './PinPage';
+
+interface ProtectRouteProps {
+  permission: 'editor' | 'operator';
+}
+
+export default function ProtectRoute({ permission, children }: PropsWithChildren<ProtectRouteProps>) {
+  const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+  const { editorAuth, operatorAuth, validate } = useContext(AppContext);
+
+  const handleValidation = useCallback(
+    (pin: string) => {
+      return validate(pin, permission);
+    },
+    [permission, validate],
+  );
+
+  const hasRelevantAuth = () => {
+    if (permission === 'editor') {
+      return editorAuth;
+    }
+    if (permission === 'operator') {
+      return operatorAuth;
+    }
+    return false;
+  };
+
+  if (isLocal || hasRelevantAuth()) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment -- trying to make typescript happy
+    return <>{children}</>;
+  }
+
+  return <PinPage permission={permission} handleValidation={handleValidation} />;
+}

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

@@ -0,0 +1,71 @@
+@use '../../../theme/viewerDefs' as *;
+
+.schedule {
+  width: 100%;
+  border-spacing: 50px;
+
+  .entry {
+    font-size: clamp(16px, 1.5vw, 24px);
+
+    .entry-colour {
+      background-color: var(--card-background-color-override, $viewer-card-bg-color);
+      height: clamp(8px, 0.75vw, 12px);
+      width: clamp(8px, 0.75vw, 12px);
+      border-radius: 6px;
+      display: inline-block;
+    }
+
+    .entry-times {
+      font-family: $viewer-font-family;
+      color: var(--secondary-color-override, $viewer-secondary-color);
+      font-weight: 300;
+      letter-spacing: 0.05em;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .entry-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:not(:last-child) {
+      padding-bottom: 8px;
+    }
+
+    &--past {
+      color: var(--secondary-color-override, $viewer-secondary-color);
+    }
+
+    &--now {
+      .entry-title {
+        color: var(--accent-color-override, $accent-color);
+        font-weight: 600;
+      }
+    }
+
+    &.skip {
+      text-decoration: line-through;
+    }
+  }
+}
+
+.schedule-nav {
+  display: flex;
+  justify-content: flex-end;
+
+  .schedule-nav__item {
+    background-color: var(--card-background-color-override, $viewer-card-bg-color);
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+    margin-left: 8px;
+
+    &--selected {
+      background-color: var(--color-override, $viewer-color);
+    }
+  }
+}
+

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

@@ -0,0 +1,52 @@
+import { useSchedule } from './ScheduleContext';
+import ScheduleItem from './ScheduleItem';
+
+import './Schedule.scss';
+
+interface ScheduleProps {
+  isProduction?: boolean;
+  className?: string;
+}
+
+export default function Schedule({ isProduction, className }: ScheduleProps) {
+  const { paginatedEvents, selectedEventId, isBackstage, scheduleType } = useSchedule();
+
+  // TODO: design a nice placeholder for empty schedules
+  if (paginatedEvents?.length < 1) {
+    return null;
+  }
+
+  let selectedState: 'past' | 'now' | 'future' = 'past';
+
+  return (
+    <ul className={`schedule ${className}`}>
+      {paginatedEvents.map((event) => {
+        if (scheduleType === 'past' || scheduleType === 'future') {
+          selectedState = scheduleType;
+        } else {
+          if (event.id === selectedEventId) {
+            selectedState = 'now';
+          } else if (selectedState === 'now') {
+            selectedState = 'future';
+          }
+        }
+
+        const timeStart = isProduction ? event.timeStart + (event?.delay ?? 0) : event.timeStart;
+        const timeEnd = isProduction ? event.timeEnd + (event?.delay ?? 0) : event.timeEnd;
+
+        return (
+          <ScheduleItem
+            key={event.id}
+            selected={selectedState}
+            timeStart={timeStart}
+            timeEnd={timeEnd}
+            title={event.title}
+            colour={isBackstage ? event.colour : ''}
+            backstageEvent={!event.isPublic}
+            skip={event.skip}
+          />
+        );
+      })}
+    </ul>
+  );
+}

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

@@ -0,0 +1,100 @@
+import { createContext, PropsWithChildren, useContext, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { OntimeEvent } from 'ontime-types';
+
+import { useInterval } from '../../hooks/useInterval';
+import { isStringBoolean } from '../../utils/viewUtils';
+
+interface ScheduleContextState {
+  events: OntimeEvent[];
+  paginatedEvents: OntimeEvent[];
+  selectedEventId: string | null;
+  scheduleType: 'past' | 'now' | 'future';
+  numPages: number;
+  visiblePage: number;
+  isBackstage: boolean;
+}
+
+const ScheduleContext = createContext<ScheduleContextState | undefined>(undefined);
+
+interface ScheduleProviderProps {
+  events: OntimeEvent[];
+  selectedEventId: string | null;
+  isBackstage?: boolean;
+  time?: number;
+}
+
+export const ScheduleProvider = ({
+  children,
+  events,
+  selectedEventId,
+  isBackstage = false,
+  time = 10,
+}: PropsWithChildren<ScheduleProviderProps>) => {
+  const [visiblePage, setVisiblePage] = useState(0);
+  const [searchParams] = useSearchParams();
+
+  // look for overrides from views
+  const hidePast = isStringBoolean(searchParams.get('hidePast'));
+  const stopCycle = isStringBoolean(searchParams.get('stopCycle'));
+  const eventsPerPage = Number(searchParams.get('eventsPerPage') ?? 7);
+
+  let selectedEventIndex = events.findIndex((event) => event.id === selectedEventId);
+
+  const viewEvents = [...events];
+  if (hidePast) {
+    // we want to show the event after the next
+    viewEvents.splice(0, selectedEventIndex + 2);
+    selectedEventIndex = 0;
+  }
+
+  const numPages = Math.ceil(viewEvents.length / eventsPerPage);
+  const eventStart = eventsPerPage * visiblePage;
+  const eventEnd = eventsPerPage * (visiblePage + 1);
+  const paginatedEvents = viewEvents.slice(eventStart, eventEnd);
+
+  const resolveScheduleType = () => {
+    if (selectedEventIndex >= eventStart && selectedEventIndex < eventEnd) {
+      return 'now';
+    }
+    if (selectedEventIndex > eventEnd) {
+      return 'past';
+    }
+    return 'future';
+  };
+  const scheduleType = resolveScheduleType();
+
+  // every SCROLL_TIME go to the next array
+  useInterval(() => {
+    if (stopCycle) {
+      setVisiblePage(0);
+    } else if (events.length > eventsPerPage) {
+      const next = (visiblePage + 1) % numPages;
+      setVisiblePage(next);
+    }
+  }, time * 1000);
+
+  return (
+    <ScheduleContext.Provider
+      value={{
+        events,
+        paginatedEvents,
+        selectedEventId,
+        scheduleType,
+        numPages,
+        visiblePage,
+        isBackstage,
+      }}
+    >
+      {children}
+    </ScheduleContext.Provider>
+  );
+};
+
+export const useSchedule = () => {
+  const context = useContext(ScheduleContext);
+  if (!context) {
+    throw new Error('useSchedule() can only be used inside a ScheduleContext');
+  }
+  return context;
+};

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

@@ -0,0 +1,44 @@
+import SuperscriptTime from '../../../features/viewers/common/superscript-time/SuperscriptTime';
+import { formatTime } from '../../utils/time';
+
+import './Schedule.scss';
+
+const formatOptions = {
+  format: 'hh:mm a',
+};
+
+interface ScheduleItemProps {
+  selected: 'past' | 'now' | 'future';
+  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 start = formatTime(timeStart, formatOptions);
+  const end = formatTime(timeEnd, formatOptions);
+  const userColour = colour !== '' ? colour : '';
+  const selectStyle = `entry--${selected}`;
+
+  return (
+    <li className={`entry ${selectStyle} ${skip ? 'skip' : ''}`}>
+      <div className='entry-times'>
+        <span className='entry-colour' style={{ backgroundColor: userColour }} />
+        <div style={{ display: 'flex' }}>
+          <SuperscriptTime time={start} />
+          {' → '}
+          <SuperscriptTime time={end} />
+          {backstageEvent ? '*' : ''}
+        </div>
+      </div>
+      <div className='entry-title'>{title}</div>
+      {presenter && <div className='entry-presenter'>{presenter}</div>}
+    </li>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { useSchedule } from './ScheduleContext';
+
+import './Schedule.scss';
+
+interface ScheduleNavProps {
+  className?: string;
+}
+
+export default function ScheduleNav({ className }: ScheduleNavProps) {
+  const { numPages, visiblePage } = useSchedule();
+
+  return (
+    <div className={`schedule-nav ${className}`}>
+      {numPages > 1 &&
+        [...Array(numPages).keys()].map((i) => (
+          <div
+            key={i}
+            className={i === visiblePage ? 'schedule-nav__item schedule-nav__item--selected' : 'schedule-nav__item'}
+          />
+        ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+@use '../../../theme/ontimeColours' as *;
+
+.emptyContainer {
+  width: 100%;
+  text-align: center;
+  color: $gray-1350;
+
+  .empty {
+    width: 100%;
+    opacity: 0.6;
+  }
+
+  .text {
+    font-weight: 600;
+    font-size: 2em;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { CSSProperties } from 'react';
+
+import { ReactComponent as Emptyimage } from '@/assets/images/empty.svg';
+
+import style from './Empty.module.scss';
+
+interface EmptyProps {
+  text: string;
+  style?: CSSProperties;
+}
+
+export default function Empty(props: EmptyProps) {
+  const { text, ...rest } = props;
+  return (
+    <div className={style.emptyContainer} {...rest}>
+      <Emptyimage className={style.empty} />
+      <span className={style.text}>{text}</span>
+    </div>
+  );
+}

apps/client/src/common/components/timer-display/TimerDisplay.scss

@@ -0,0 +1,15 @@
+@use '../../../theme/viewerDefs' as *;
+
+.timer {
+  font-family: var(--font-family-override, $viewer-font-family);
+  color: var(--timer-color-override, $timer-color);
+  line-height: 0.9em;
+  text-align: center;
+  letter-spacing: 0.1em;
+  font-weight: 600;
+  font-size: 3.5rem;
+  
+  &--finished {
+    color: $timer-finished-color;
+  }
+}

apps/client/src/common/components/timer-display/TimerDisplay.tsx

@@ -0,0 +1,33 @@
+import { memo } from 'react';
+import { formatDisplay } from 'ontime-utils';
+
+import './TimerDisplay.scss';
+
+interface TimerDisplayProps {
+  time?: number | null;
+}
+
+/**
+ * Displays time in ms in formatted timetag
+ * @param props
+ * @constructor
+ */
+const TimerDisplay = (props: TimerDisplayProps) => {
+  const { time } = props;
+
+  let display = '';
+
+  if (time === null || typeof time === 'undefined' || isNaN(time)) {
+    display = '-- : -- : --';
+  } else {
+    display = formatDisplay(time);
+  }
+
+  const isNegative = (time ?? 0) < 0;
+
+  const classes = `timer ${isNegative ? 'timer--finished' : ''}`;
+
+  return <div className={classes}>{display}</div>;
+};
+
+export default memo(TimerDisplay);

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

@@ -0,0 +1,36 @@
+@use '../../../theme/viewerDefs' as *;
+
+.title-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .inline {
+    display: flex;
+  }
+
+  .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;
+  }
+
+  .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);
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { useTranslation } from '../../../translation/TranslationProvider';
+
+import './TitleCard.scss';
+
+interface TitleCardProps {
+  label: 'now' | 'next';
+  title: string | null;
+  subtitle: string | null;
+  presenter: string | null;
+}
+
+export default function TitleCard(props: TitleCardProps) {
+  const { label, title, subtitle, presenter } = props;
+  const { getLocalizedString } = useTranslation();
+
+  const accent = label === 'now';
+
+  return (
+    <div className='title-card'>
+      <div className='inline'>
+        <span className='presenter'>{presenter}</span>
+        <span className={accent ? 'label accent' : 'label'}>{getLocalizedString(`common.${label}`)}</span>
+      </div>
+      <div className='title'>{title}</div>
+      <div className='subtitle'>{subtitle}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { useSearchParams } from 'react-router-dom';
+import { Input, Select, Switch } from '@chakra-ui/react';
+
+import { isStringBoolean } from '../../utils/viewUtils';
+
+import { ParamField } from './types';
+
+interface EditFormInputProps {
+  paramField: ParamField;
+}
+
+export default function ParamInput({ paramField }: EditFormInputProps) {
+  const [searchParams] = useSearchParams();
+  const { id, type } = paramField;
+
+  if (type === 'option') {
+    const optionFromParams = searchParams.get(id);
+    const defaultOptionValue = optionFromParams || undefined;
+
+    return (
+      <Select placeholder='Select an option' variant='ontime' name={id} defaultValue={defaultOptionValue}>
+        {Object.entries(paramField.values).map(([key, value]) => (
+          <option key={key} value={key}>
+            {value}
+          </option>
+        ))}
+      </Select>
+    );
+  }
+
+  if (type === 'boolean') {
+    const defaultCheckedValue = isStringBoolean(searchParams.get(id)) ?? false;
+
+    // checked value should be 'true', so it can be captured by the form event
+    return <Switch variant='ontime' name={id} defaultChecked={defaultCheckedValue} value='true' />;
+  }
+
+  if (type === 'number') {
+    const defaultNumberValue = searchParams.get(id) ?? '';
+
+    return <Input type='number' step='any' variant='ontime-filled' name={id} defaultValue={defaultNumberValue} />;
+  }
+
+  const defaultStringValue = searchParams.get(id) ?? '';
+
+  return <Input variant='ontime-filled' name={id} defaultValue={defaultStringValue} />;
+}

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

@@ -0,0 +1,51 @@
+@use '../../../theme/v2Styles' as *;
+@use '../../../theme/ontimeColours' as *;
+
+.drawerContent {
+  background-color: $gray-1250;
+}
+
+.drawerHeader {
+  @extend .drawerContent;
+  color: $section-white;
+}
+
+.drawerFooter {
+  @extend .drawerContent;
+  display: flex;
+  justify-content: start;
+  gap: $element-spacing;
+
+  button[type='reset'] {
+    padding: 0 2em;
+    margin-right: auto;
+  }
+
+  button[type='submit'] {
+    padding: 0 2em;
+  }
+}
+
+.label {
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+}
+
+.columnSection {
+  display: flex;
+  padding: $element-spacing;
+  flex-direction: column;
+  gap: $element-inner-spacing;
+}
+
+.title {
+  font-size: $inner-section-text-size;
+  display: block;
+  width: 100%;
+}
+
+.description {
+  font-size: $inner-section-text-size;
+  display: block;
+  color: $modal-note-color;
+}