V2 beta3 (#338)

* chore: upgrade local build documentation

* style: keep scrolling event in screen

* feat: delay is time entry

* refactor: remove unused

* refactor: remove unused

* refactor: batch store updates

* refactor: virtually remove cap on events

* refactor: style and behaviour tweaks to event block

* style: tweaks on schedules

* chore: remove sentry from server

* style: reorder menu

* chore: update docs

.deepsource.toml

@@ -0,0 +1,17 @@
+version = 1
+
+test_patterns = [
+  "__mocks__/**",
+  "__tests__/**",
+  "*.test.*",
+  "*.mock.*",
+  "*.spec.*"
+]
+
+[[analyzers]]
+  name = "javascript"
+  enabled = true
+
+  [analyzers.meta]
+    plugins = ["react"]
+    environment = ["nodejs","browser","jest"]

.dockerignore

@@ -0,0 +1,14 @@
+# Ignore config files
+.prettier*
+
+# Ignore install stuff
+**/yarn.lock
+**/yarn-error.log
+
+# Ignore test files
+**/__tests__/**
+**/**.test.js
+
+# Ignore git and cache folders
+.git
+.cache

.eslintrc

@@ -0,0 +1,19 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2020
+  },
+  "env": {
+    "es6": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "overrides": [
+    {
+      "files": ["e2e/**/**.spec.ts", "e2e/**/**.test.ts"],
+      "extends": ["plugin:playwright/playwright-test"]
+    }
+  ],
+  "rules": {}
+}

.github/workflows/autobuild.yml

@@ -1,103 +0,0 @@
-# This is a basic workflow to help you get started with Actions
-
-name: CI
-
-# Controls when the action will run.
-on:
-  push:
-    # Pattern matched against refs/tags
-    tags:
-    # Push events to every tag not containing /
-      - '*'
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  # build a file for windows
-  buildwin:
-    # The type of runner that the job will run on
-    runs-on: windows-latest
-    env:
-      CI: ''
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
-
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      # install and build react
-      - name: Install React dependencies
-        run: yarn install
-        working-directory: ./client
-      - name: Build React App
-        run: yarn build
-        working-directory: ./client
-
-      # install node dependencies
-      - name: Install nodejs dependencies
-        run: yarn install
-        working-directory: ./server/src
-
-      # install and build electron
-      - name: Install Electron dependencies
-        run: yarn install
-        working-directory: ./server
-      - name: Build Electron 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 a file for mac
- # buildmac:
-    # The type of runner that the job will run on
- #   runs-on: macOS-latest
- #   env:
- #     CI: ''
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
- #   steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- #     - uses: actions/checkout@v2
-
- #     - name: Use Node.js
- #       uses: actions/setup-node@v1
- #       with:
- #         node-version: '14.x'
-
-      # install and build react
- #     - name: Install React dependencies
- #       run: yarn install
- #       working-directory: ./client
- #     - name: Build React App
- #       run: yarn build
- #       working-directory: ./client
-
-      # install and build electron
- #     - name: Install Electron + nodejs dependencies
- #       run: yarn install
- #       working-directory: ./server
- #     - name: Build Electron App
- #       run: yarn dist-win
- #       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 }}

.github/workflows/build.yml

@@ -0,0 +1,139 @@
+name: Ontime build
+
+on:
+  push:
+    tags: [ "v1.*.*" ]
+  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 }}

.github/workflows/build_docker_v2.yml

@@ -0,0 +1,56 @@
+name: Docker Image CI Ontime V2
+
+on:
+  push:
+    tags: [ "v2.*.*" ]
+  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.2.4
+      with:
+        version: 7.26.3
+          
+    - 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:beta_${{ env.RELEASE_VERSION  }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:beta_v2
+

.github/workflows/build_v2.yml

@@ -0,0 +1,106 @@
+name: Ontime build v2
+
+on:
+  push:
+    tags: [ "v2.*.*" ]
+  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.2.4
+        with:
+          version: 7.26.3
+
+      - 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.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.2.4
+        with:
+          version: 7.26.3
+
+      - 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.2.4
+        with:
+          version: 7.26.3
+
+      - 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/ontime_cy.yml

@@ -0,0 +1,66 @@
+# 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:
+  pull_request:
+    branches: [ master ]
+  workflow_dispatch:
+
+jobs:
+  build:
+
+    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
+
+      # 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 setup
+        working-directory: ./server
+
+      - name: Server - run tests
+        run: yarn test
+        working-directory: ./server
+
+#      - name: Install Playwright Browsers
+#        run: npx playwright install --with-deps
+#        working-directory: ./server
+#
+#      - name: Run Playwright tests
+#        run: yarn e2e
+#        working-directory: ./server
+#
+#      - uses: actions/upload-artifact@v3
+#        if: always()
+#        with:
+#          name: playwright-report
+#          path: playwright-report/
+#          retention-days: 7

.github/workflows/test_v2.yml

@@ -0,0 +1,76 @@
+name: Ontime test v2
+
+on:
+  pull_request:
+    branches: [ v2 ]
+  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.2.4
+        with:
+          version: 7.26.3
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      # We choose to run tests separately
+      - name: React - Run unit tests
+        run: pnpm test:pipeline
+        working-directory: ./apps/client
+
+      - name: Server - Run unit tests
+        run: pnpm test:pipeline
+        working-directory: ./apps/server
+
+      - name: Utils - Run unit tests
+        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.2.4
+        with:
+          version: 7.26.3
+
+      - 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,31 +5,42 @@ node_modules/
 /.pnp
 .pnp.js
 
+# misc
+.DS_Store
+*.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# vscode stuff
+.vscode/*
+ontime.code-workspace
+
+# webstorm stuff
+.idea/*
+
+# turborepo stuff
+.turbo
+
 # testing
-coverage/
+test-results
+playwright-report
+/playwright/.cache/
 
 # production
 build/
 dist/
 
-# misc
-.DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-ontime.code-workspace
-TODO.md
-
 # working stuff
-_SS/
-.vscode/launch.json
-.eslintrc.json
-db backup.json
-server/src/data/db.json
-server/src/models/db.json
+**/TODO.md
+
+# docker utils
+ontime-db
+ontime-external/
+
+# working database
+apps/server/src/preloaded-db/db.json
+
+# versioning file
+**/ONTIME_VERSION.js

.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,51 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="3">
+            <item index="0" class="java.lang.String" itemvalue="scrollbar-color" />
+            <item index="1" class="java.lang.String" itemvalue="scrollbar-width" />
+            <item index="2" class="java.lang.String" itemvalue="app-region" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredUrls">
+        <list>
+          <option value="http://localhost" />
+          <option value="http://127.0.0.1" />
+          <option value="http://0.0.0.0" />
+          <option value="http://www.w3.org/" />
+          <option value="http://json-schema.org/draft" />
+          <option value="http://java.sun.com/" />
+          <option value="http://xmlns.jcp.org/" />
+          <option value="http://javafx.com/javafx/" />
+          <option value="http://javafx.com/fxml" />
+          <option value="http://maven.apache.org/xsd/" />
+          <option value="http://maven.apache.org/POM/" />
+          <option value="http://www.springframework.org/schema/" />
+          <option value="http://www.springframework.org/tags" />
+          <option value="http://www.springframework.org/security/tags" />
+          <option value="http://www.thymeleaf.org" />
+          <option value="http://www.jboss.org/j2ee/schema/" />
+          <option value="http://www.jboss.com/xml/ns/" />
+          <option value="http://www.ibm.com/webservices/xsd" />
+          <option value="http://activemq.apache.org/schema/" />
+          <option value="http://schema.cloudfoundry.org/spring/" />
+          <option value="http://schemas.xmlsoap.org/" />
+          <option value="http://cxf.apache.org/schemas/" />
+          <option value="http://primefaces.org/ui" />
+          <option value="http://tiles.apache.org/" />
+          <option value="http://__IP__" />
+        </list>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
+  </profile>
+</component>

.prettierrc

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

DEVELOPMENT.md

@@ -0,0 +1,47 @@
+# 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`
+
+## 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:local`
+- __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

@@ -0,0 +1,27 @@
+FROM node:16-alpine
+
+# 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 /apps/client/build ./client/
+
+# Prepare Backend
+COPY /apps/server/dist/ ./server/
+COPY /demo-db/ ./preloaded-db/
+COPY /apps/server/src/external/ ./external/
+
+# Export default ports
+EXPOSE 4001/tcp 8888/udp 9999/udp
+
+CMD ["node", "server/docker.cjs"]
+
+# Build and run commands
+# !!! Note that this command needs pre-build versions of the UI and server apps
+# docker buildx build . -t getontime/ontime
+# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/external/db/ -v ./ontime-styles:/external/styles/ getontime/ontime

README.md

@@ -1,89 +1,204 @@
+[![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/)
 
+## Download the latest releases here
 
-Download the latest releases here
-- [Windows](https://gitreleases.dev/gh/cpvalente/ontime/latest/ontime-win64.exe)
+<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>
+</div>
 
 # Ontime
+
 Ontime is an application for managing event rundowns and running stage 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.
+A single, locally hosted central application distributes your event information over the local network.
+This enables the distribution of the data to a series of viewers and allows integration into video and control workflows, including OBS and d3.
 
-![App Window](https://github.com/cpvalente/ontime/blob/master/.github/01_app.png)
+![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/app.jpg)
 
-![Views](https://github.com/cpvalente/ontime/blob/master/.github/02_screentypes.png)
+![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/02_screentypes.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.
 
-From here, any device in the same network with a browser is able to render the views as described. 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 the ontime logo on the top right corner to select the desired view.
+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.
 
-In case of unnatended machines or automations, it is possible to use different URL to recall individual views
+Any device with a browser in the same network can choose one of the supported views to render the available data. 
+This is done by reaching the ontime server at the _default port 4001_ eg: `localhost:4001`
+or `192.168.1.3:4001`
+<br />
+You can then use the Ontime logo in the top left corner to select the desired view.
+The logo will be initially hidden until there is mouse interaction.
+
+In the case of unattended machines or automation, it is possible to use different URL to recall
+individual views and extend view settings using the URL aliases feature
 
 ```
-IP.ADDRESS:4001           > Web server default to stage timer view
-IP.ADDRESS:4001/speaker   > Speaker / Stage timer 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
+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/lower      > Lower Thirds
+IP.ADDRESS:4001/studio     > Studio Clock
+```
+```
+For management views 
+-------------------------------------------------------------
+IP.ADDRESS:4001/editor    > the control interface, same as the app
+IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
 ```
 
-More documentation available [here](https://cpvalente.gitbook.io/ontime/)
+More documentation is available [in our docs](https://cpvalente.gitbook.io/ontime/)
+
 ## 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
-- [x] Configurable realtime Lower Thirds
+    - Stage Timer
+    - Backstage Info
+    - Public Info
+    - Studio Clock
+    - Countdown
+    - [Make your own?](#make-your-own-viewer)
+- [x] Configurable Lower Thirds
+- [x] Cuesheets with user definable fields
 - [x] Send live messages to different screen types
-- [x] Ability to differentiate between backstage and public data
-- [x] Manage delays workflow
-- [x] OSC Control and Feedback
+- [x] Differentiate between backstage and public data
+- [x] Workflow for managing delays
+- [x] Protocol integrations for Control and Feedback
+  - OSC (Open Sound Control)
+  - HTTP
+  - WebSockets
 - [x] Roll mode: run independently 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://cpvalente.gitbook.io/ontime/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 are not interested in forcing workflows and have made Ontime, so it is flexible to whichever way
+you would like to work.
 
-- [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] Dont 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 beggining and start times to 00:00 and 00:10 (**BAM**! 10 minute timer). You can quick recall this with OSC as always
+- [x] If you want just the info screens, there is 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 one of the APIs and use a dynamic timer
+    - [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 or any of the other available integrations
+
+## Rich APIs for workflow integrations
+
+The app is currently being developed for a broad user base, from broadcast to entertainment and
+conference halls.
+
+Taking advantage of the integrations, we currently use Ontime with:
+
+- `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**
+- `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)
+
+### Make your own viewer
+
+Ontime broadcasts its data over WebSockets. This allows you to consume its data outside the application.
+
+Writing a new view for the browser can be done with basic knowledge of HTML + CSS + Javascript (or any other language that can run in the browser).
+<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)
+
+### Headless run️
+
+You can self-host and run Ontime in a docker image. The run command will:
+
+- expose the necessary ports (listed in the Dockerfile)
+- mount a local file to persist your data (in the example: ````$(pwd)/local-data````)
+- the image name __getontime/ontime__
+
+The docker image is
+in [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
+
+```bash
+docker pull getontime/ontime
+```
+
+and use the included docker compose to get started
+
+```bash
+docker-compose up
+```
 
 ## Roadmap
-### For version 1
-Almost reaching a feature set that we can call v1. Before that:
-- [ ] Mac OS version
-- [ ] Finish Documentation
-### Continuing
-- [ ] Linux version
-- [ ] Headless version (run server only anywhere, configure from a browser locally)
-- [ ] Companion integration
-- [ ] Lower Third Manager
-- [ ] Note only event
-- [ ] URL Aliases (define configurable aliases to ease onsite setup)
-- [ ] Logging view
-- [ ] Reach Schedule: way to speedup timer to meet a deadline
-- [ ] Excel Import
-- [ ] vMix integration
+
+### Continued development
+
+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
-The app is still in pre-release and there are a few issues, mainly concerning style.
-This will be receiving attention as we near v1 release
 
-#### Style
-- [ ] App appears visually broken: Please ensure that windows settings have no display zoom (it is 125% by default)
-- [ ] app needs improvement on handling zoomed interfaces
-- [ ] Very long titles might cause interface to shift
+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.```
+
+or
+
+```Ontime can't be opened because it is from an unidentified developer```
+
+or in Linux
+
+```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 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](https://github.com/cpvalente/ontime/issues/new)
+
+#### Safari
+
+There are known issues with Safari versions lower than 13:
+- Spacing and text styles might have small inconsistencies
+- Table view does not work
+
+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://cpvalente.gitbook.io/ontime/)
 
 # License
+
 This project is licensed under the terms of the GNU GPL v3

apps/client/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+build

apps/client/.eslintrc

@@ -0,0 +1,156 @@
+{
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-prettier",
+    "plugin:@tanstack/eslint-plugin-query/recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "react",
+    "testing-library",
+    "simple-import-sort",
+    "@tanstack/query",
+    "@typescript-eslint",
+    "prettier"
+  ],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "no-useless-concat": "warn",
+    "prefer-template": "warn",
+    "react/jsx-no-bind": [
+      "error",
+      {
+        "ignoreRefs": true,
+        "allowArrowFunctions": true,
+        "allowFunctions": false,
+        "allowBind": false,
+        "ignoreDOMComponents": true
+      }
+    ],
+    "react/jsx-boolean-value": [
+      "error",
+      "never",
+      {
+        "always": []
+      }
+    ],
+    "react/jsx-handler-names": [
+      "off",
+      {
+        "eventHandlerPrefix": "handle",
+        "eventHandlerPropPrefix": "on"
+      }
+    ],
+    "react/no-danger": "warn",
+    "react/no-deprecated": [
+      "error"
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-no-undef": "error",
+    "react/jsx-closing-tag-location": "warn",
+    "react/jsx-no-useless-fragment": "warn",
+    "react/no-unescaped-entities": "error",
+    "react/jsx-tag-spacing": [
+      "error",
+      {
+        "closingSlash": "never",
+        "beforeSelfClosing": "always",
+        "afterOpening": "never",
+        "beforeClosing": "never"
+      }
+    ],
+    "react/jsx-space-before-closing": [
+      "off",
+      "always"
+    ],
+    "react/jsx-curly-brace-presence": [
+      "error",
+      {
+        "props": "never",
+        "children": "never"
+      }
+    ],
+    "react/destructuring-assignment": [
+      "error",
+      "always"
+    ],
+    "react/no-unsafe": "off",
+    "react/prop-types": [
+      "error",
+      {
+        "ignore": [],
+        "customValidators": [],
+        "skipUndeclared": true
+      }
+    ],
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn"
+  },
+  "overrides": [
+    // override "simple-import-sort" config
+    {
+      "files": [
+        "*.js",
+        "*.jsx",
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {
+        "simple-import-sort/imports": [
+          "error",
+          {
+            "groups": [
+              // Packages `react` related packages come first.
+              [
+                "^react",
+                "^@?\\w"
+              ],
+              // Internal packages.
+              [
+                "^(@|components)(/.*|$)"
+              ],
+              // Side effect imports.
+              [
+                "^\\u0000"
+              ],
+              // Parent imports. Put `..` last.
+              [
+                "^\\.\\.(?!/?$)",
+                "^\\.\\./?$"
+              ],
+              // Other relative imports. Put same-folder imports and `.` last.
+              [
+                "^\\./(?=.*/)(?!/?$)",
+                "^\\.(?!/?$)",
+                "^\\./?$"
+              ],
+              // Style imports.
+              [
+                "^.+\\.?(css)$"
+              ]
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}

apps/client/.prettierrc

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

apps/client/.stylelintrc

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "stylelint-config-prettier"
+  ]
+}

apps/client/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang='en'>
+<head>
+  <meta charset='utf-8' />
+  <link rel='icon' href='/favicon.ico' />
+  <meta name='viewport' content='width=device-width, initial-scale=1' />
+  <meta name='theme-color' content='#121212' />
+  <meta name='ontime' content='ontime - event timer manager' />
+  <link rel='apple-touch-icon' href='/logo192.png' />
+  <link
+    rel='icon'
+    type='image/png'
+    sizes='32x32'
+    href='/favicon-32x32.png'
+  />
+  <link
+    rel='icon'
+    type='image/png'
+    sizes='16x16'
+    href='/favicon-16x16.png'
+  />
+  <link rel='manifest' href='/site.webmanifest' />
+  <link rel='manifest' href='/manifest.json' />
+  <title>ontime</title>
+  <style>
+    body,
+    html {
+      background-color: rgba(0, 0, 0, 0) !important;
+    }
+  </style>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id='root'></div>
+<script type='module' src='/src/index.tsx'></script>
+</body>
+</html>

apps/client/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "ontime-ui",
+  "version": "2.0.0-beta2",
+  "private": true,
+  "dependencies": {
+    "@chakra-ui/react": "^2.5.5",
+    "@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": "^4.28.0",
+    "@tanstack/react-query-devtools": "^4.29.0",
+    "autosize": "^5.0.2",
+    "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-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",
+    "react-table": "^7.7.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:docker": "vite build",
+    "lint": "eslint .",
+    "stylelint": "npx stylelint \"**/*.scss\"\n",
+    "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": "^4.26.2",
+    "@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/luxon": "^3.2.0",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "@vitejs/plugin-react": "^3.0.1",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-jest": "^27.1.7",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-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": "^2.8.3",
+    "prop-types": "^15.8.1",
+    "sass": "^1.57.1",
+    "stylelint": "^14.16.1",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-standard-scss": "^6.1.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vite-plugin-svgr": "^2.4.0",
+    "vite-tsconfig-paths": "^4.0.3",
+    "vitest": "^0.29.8"
+  }
+}

apps/client/src/App.tsx

@@ -0,0 +1,70 @@
+import { Suspense, 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 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 { 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');
+
+connectSocket();
+
+function App() {
+  const { isElectron, sendToElectron } = useElectronEvent();
+
+  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');
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (isElectron) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
+    return () => {
+      if (isElectron) {
+        document.removeEventListener('keydown', handleKeyPress);
+      }
+    };
+  }, []);
+
+  return (
+    <ChakraProvider resetCSS theme={theme}>
+      <QueryClientProvider client={ontimeQueryClient}>
+        <AppContextProvider>
+          <BrowserRouter>
+            <div className='App'>
+              <ErrorBoundary>
+                <Suspense fallback={null}>
+                  <TranslationProvider>
+                    <AppRouter />
+                  </TranslationProvider>
+                </Suspense>
+              </ErrorBoundary>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </div>
+          </BrowserRouter>
+        </AppContextProvider>
+      </QueryClientProvider>
+    </ChakraProvider>
+  );
+}
+
+export default App;

apps/client/src/AppRouter.tsx

@@ -0,0 +1,131 @@
+import { lazy, useEffect } from 'react';
+import { Navigate, Route, Routes, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+
+import useAliases from './common/hooks-query/useAliases';
+import withData from './features/viewers/ViewWrapper';
+import { useTranslation } from './translation/TranslationProvider';
+
+const Editor = lazy(() => import('./features/editors/ProtectedEditor'));
+const Table = lazy(() => import('./features/table/ProtectedTable'));
+
+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 = withData(TimerView);
+const SMinimalTimer = withData(MinimalTimerView);
+const SClock = withData(ClockView);
+const SCountdown = withData(Countdown);
+const SBackstage = withData(Backstage);
+const SPublic = withData(Public);
+const SLowerThird = withData(Lower);
+const SStudio = withData(StudioClock);
+
+const FeatureWrapper = lazy(() => import('./features/FeatureWrapper'));
+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() {
+  const { data } = useAliases();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { setLanguage } = useTranslation();
+
+  // Set output language
+  useEffect(() => {
+    const langParam = searchParams.get('lang');
+    if (langParam && langParam.length === 2) {
+      setLanguage(searchParams.get('lang'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams]);
+
+  // navigate if is alias route
+  useEffect(() => {
+    if (!data) return;
+
+    for (const d of data) {
+      if (`/${d.alias}` === location.pathname && d.enabled) {
+        navigate(`/${d.pathAndParams}`);
+        break;
+      }
+    }
+  }, [data, location, navigate]);
+
+  return (
+    <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 />} />
+
+      {/*/!* Protected Routes *!/*/}
+      <Route path='/editor' element={<Editor />} />
+      <Route path='/cuesheet' element={<Table />} />
+      <Route path='/cuelist' element={<Table />} />
+      <Route path='/table' element={<Table />} />
+
+      {/*/!* Protected Routes - Elements *!/*/}
+      <Route
+        path='/rundown'
+        element={
+          <FeatureWrapper>
+            <RundownPanel />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/timercontrol'
+        element={
+          <FeatureWrapper>
+            <TimerControl />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/messagecontrol'
+        element={
+          <FeatureWrapper>
+            <MessageControl />
+          </FeatureWrapper>
+        }
+      />
+      <Route
+        path='/info'
+        element={
+          <FeatureWrapper>
+            <Info />
+          </FeatureWrapper>
+        }
+      />
+      {/*/!* Send to default if nothing found *!/*/}
+      <Route path='*' element={<STimer />} />
+    </Routes>
+  );
+}

apps/client/src/__mocks__/QueryClient.mock.js

@@ -0,0 +1,9 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClientMock = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});

apps/client/src/appConstants.ts

@@ -0,0 +1,22 @@
+// Exported viewer link location
+const minimalLocation = 'minimal';
+const speakerLocation = 'speaker';
+const smLocation = 'sm';
+const publicLocation = 'public';
+const studioLocation = 'studio';
+const cuesheetLocation = 'cuesheet';
+const countdownLocation = 'countdown';
+const clockLocation = 'clock';
+const lowerLocation = 'lower';
+
+export const viewerLocations = [
+  { link: speakerLocation, label: 'Stage timer' },
+  { link: clockLocation, label: 'Clock' },
+  { link: minimalLocation, label: 'Minimal timer' },
+  { link: smLocation, label: 'Backstage screen' },
+  { link: publicLocation, label: 'Public screen' },
+  { link: lowerLocation, label: 'Lower thirds' },
+  { link: studioLocation, label: 'Studio clock' },
+  { link: countdownLocation, label: 'Countdown' },
+  { link: cuesheetLocation, label: 'Cuesheet' },
+];

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

@@ -0,0 +1,32 @@
+export const STATIC_PORT = 4001;
+
+// REST stuff
+export const EVENTDATA_TABLE = ['eventdata'];
+export const ALIASES = ['aliases'];
+export const USERFIELDS = ['userFields'];
+export const RUNDOWN_TABLE_KEY = 'rundown';
+export const RUNDOWN_TABLE = [RUNDOWN_TABLE_KEY];
+export const APP_INFO = ['appinfo'];
+export const OSC_SETTINGS = ['oscSettings'];
+export const APP_SETTINGS = ['appSettings'];
+export const VIEW_SETTINGS = ['viewSettings'];
+export const RUNTIME = ['runtimeStore'];
+
+// external stuff
+export const githubURL = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
+
+/**
+ * @description finds server path given the current location, it
+ * @return {*}
+ */
+export const calculateServer = () => (import.meta.env.DEV ? `http://localhost:${window.location.port}` : window.location.origin);
+
+export const serverURL = calculateServer();
+export const websocketUrl = `ws://${window.location.hostname}:${window.location.port}/ws`;
+
+export const eventURL = `${serverURL}/eventdata`;
+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/eventDataApi.ts

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

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

@@ -0,0 +1,75 @@
+import axios from 'axios';
+import { OntimeRundown, OntimeRundownEntry } from 'ontime-types';
+
+import { rundownURL } from './apiConstants';
+
+/**
+ * @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);
+}
+
+/**
+ * @description HTTP request to modify event
+ * @return {Promise}
+ */
+export async function requestPatchEvent(data: OntimeRundownEntry) {
+  return axios.patch(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}`);
+}
+
+/**
+ * @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,162 @@
+import axios from 'axios';
+import { Alias, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-types';
+
+import { InfoType } from '../models/Info';
+
+import { githubURL, 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<InfoType> {
+  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 postView(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 download db
+ * @return {Promise}
+ */
+export const downloadRundown = async () => {
+  await axios({
+    url: `${ontimeURL}/db`,
+    method: 'GET',
+    responseType: 'blob', // important
+  }).then((response) => {
+    const headerLine = response.headers['Content-Disposition'];
+    let filename = 'rundown.json';
+
+    // try and get the filename from the response
+    if (headerLine != null) {
+      const startFileNameIndex = headerLine.indexOf('"') + 1;
+      const endFileNameIndex = headerLine.lastIndexOf('"');
+      filename = headerLine.substring(startFileNameIndex, endFileNameIndex);
+    }
+
+    const url = window.URL.createObjectURL(new Blob([response.data], { type: 'application/json' }));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', filename);
+    document.body.appendChild(link);
+    link.click();
+  });
+};
+
+/**
+ * @description HTTP request to upload events db
+ * @return {Promise}
+ */
+type UploadDataOptions = {
+  onlyRundown?: boolean;
+};
+export const uploadData = async (file: string, setProgress: (value: number) => void, options?: UploadDataOptions) => {
+  const formData = new FormData();
+  formData.append('userFile', file);
+  const onlyRundown = options?.onlyRundown || 'false';
+  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 HTTP request to get the latest version and url from github
+ * @return {Promise}
+ */
+export async function getLatestVersion(): Promise<object> {
+  const res = await axios.get(`${githubURL}`);
+  return { url: res.data.html_url, version: res.data.tag_name };
+}

apps/client/src/common/components/buttons/EnableBtn.jsx

@@ -0,0 +1,26 @@
+import { Button } from '@chakra-ui/react';
+import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
+import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
+import PropTypes from 'prop-types';
+
+export default function EnableBtn(props) {
+  const { active, text, actionHandler, size = 'xs' } = props;
+  return (
+    <Button
+      size={size}
+      leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
+      colorScheme='blue'
+      variant={active ? 'solid' : 'outline'}
+      onClick={actionHandler}
+    >
+      {text}
+    </Button>
+  );
+}
+
+EnableBtn.propTypes = {
+  active: PropTypes.bool,
+  text: PropTypes.string,
+  actionHandler: PropTypes.func,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+}

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

@@ -0,0 +1,28 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoPause } from '@react-icons/all-files/io5/IoPause';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+interface PauseIconBtnProps {
+  clickhandler: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  active: boolean;
+  disabled: boolean;
+}
+
+export default function PauseIconBtn(props: PauseIconBtnProps) {
+  const { clickhandler, active, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Pause timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoPause size='24px' />}
+        colorScheme='orange'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        disabled={disabled}
+        aria-label='Pause playback'
+        {...rest}
+      />
+    </Tooltip>
+  );
+}

apps/client/src/common/components/buttons/PublicIconBtn.jsx

@@ -0,0 +1,25 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
+import PropTypes from 'prop-types';
+
+export default function PublicIconBtn(props) {
+  const { actionHandler, active, size = 'xs', ...rest } = props;
+  return (
+    <Tooltip label={active ? 'Make event private' : 'Make event public'}>
+      <IconButton
+        size={size}
+        icon={<FiUsers />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={() => actionHandler('update', { field: 'isPublic', value: !active })}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+PublicIconBtn.propTypes = {
+  actionHandler: PropTypes.func,
+  active: PropTypes.bool,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+};

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

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+  IconButton,
+  Tooltip,
+} from '@chakra-ui/react';
+import { FiPower } from '@react-icons/all-files/fi/FiPower';
+
+import { Size } from '../../models/Util.type';
+import { useEmitLog } from '../../stores/logger';
+
+interface QuitIconBtnProps {
+  clickHandler: () => void;
+  size?: Size;
+}
+
+const quitBtnStyle = {
+  color: '#D20300', // $red-700
+  borderColor: '#D20300', // $red-700
+  _focus: { boxShadow: 'none' },
+  _hover: {
+    background: '#D20300', // $red-700
+    color: 'white',
+  },
+  _active: {
+    background: '#9A0000', // $red-1000
+    color: 'white',
+  },
+  variant: 'outline',
+  isRound: true,
+};
+
+export default function QuitIconBtn(props: QuitIconBtnProps) {
+  const { clickHandler, size = 'lg', ...rest } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const { emitInfo } = useEmitLog();
+  const onClose = () => setIsOpen(false);
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    if (window.process?.type === 'renderer') {
+      window.ipcRenderer.on('user-request-shutdown', () => {
+        emitInfo('Shutdown request');
+        setIsOpen(true);
+      });
+    }
+  }, [emitInfo]);
+
+  const handleShutdown = useCallback(() => {
+    onClose();
+    clickHandler();
+  }, [clickHandler]);
+
+  return (
+    <>
+      <Tooltip label='Quit Application'>
+        <IconButton
+          aria-label='Quit Application'
+          size={size}
+          icon={<FiPower />}
+          onClick={() => setIsOpen(true)}
+          {...quitBtnStyle}
+          {...rest}
+        />
+      </Tooltip>
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Ontime Shutdown
+            </AlertDialogHeader>
+            <AlertDialogBody>
+              This will shutdown the program and all running servers. Are you sure?
+            </AlertDialogBody>
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose} variant='ghost'>
+                Cancel
+              </Button>
+              <Button colorScheme='red' onClick={handleShutdown} ml={3}>
+                Shutdown
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+}

apps/client/src/common/components/buttons/RollIconBtn.jsx

@@ -0,0 +1,28 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function RollIconBtn(props) {
+  const { clickhandler, active, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Roll mode' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoTimeOutline size='24px' />}
+        colorScheme='blue'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+RollIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool,
+};

apps/client/src/common/components/buttons/StartIconBtn.jsx

@@ -0,0 +1,28 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function StartIconBtn(props) {
+  const { clickhandler, active, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Start timer' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoPlay size='24px' />}
+        colorScheme='green'
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        width={120}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+StartIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
+}

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

@@ -0,0 +1,16 @@
+import { IconButton, IconButtonProps, Tooltip } from '@chakra-ui/react';
+
+interface TooltipActionBtnProps extends IconButtonProps {
+  clickHandler: () => void;
+  tooltip: string;
+  openDelay?: number;
+}
+
+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} size={size} icon={icon} onClick={clickHandler} className={className} />
+    </Tooltip>
+  );
+}

apps/client/src/common/components/buttons/TransportIconBtn.jsx

@@ -0,0 +1,29 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function TransportIconBtn(props) {
+  const { clickHandler, icon, tooltip, disabled, ...rest } = props;
+  return (
+    <Tooltip label={tooltip} openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={icon}
+        colorScheme='white'
+        variant='outline'
+        _hover={!disabled && { bg: '#ebedf0', color: '#333' }}
+        onClick={clickHandler}
+        width={90}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+TransportIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  icon: PropTypes.element,
+  tooltip: PropTypes.string,
+  disabled: PropTypes.bool,
+};

apps/client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -0,0 +1,27 @@
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { IoStop } from '@react-icons/all-files/io5/IoStop';
+import PropTypes from 'prop-types';
+
+import { tooltipDelayMid } from '../../../ontimeConfig';
+
+export default function UnloadIconBtn(props) {
+  const { clickHandler, disabled, ...rest } = props;
+  return (
+    <Tooltip label='Unload event' openDelay={tooltipDelayMid} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={<IoStop size='22px' />}
+        colorScheme='red'
+        variant='outline'
+        onClick={clickHandler}
+        width={90}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+UnloadIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  disabled: PropTypes.bool,
+};

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/copy-tag/CopyTag.tsx

@@ -0,0 +1,35 @@
+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';
+
+interface CopyTagProps {
+  label: string;
+  className?: string;
+  size?: Size;
+}
+
+export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
+  const { label, className, size = 'xs', children } = props;
+
+  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={() => navigator.clipboard.writeText(children as string)}
+        />
+      </ButtonGroup>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,75 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import * as Sentry from '@sentry/react';
+
+import style from './ErrorBoundary.module.scss';
+
+class ErrorBoundary extends React.Component {
+  reportContent = '';
+
+  constructor(props) {
+    super(props);
+    this.state = { error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so next render shows fallback UI.
+    return { errorMessage: error.toString() };
+  }
+
+  componentDidCatch(error, info) {
+    this.setState({
+      error: error,
+      errorInfo: info,
+    });
+
+    Sentry.withScope((scope) => {
+      scope.setExtras(error);
+      const eventId = Sentry.captureException(error);
+      this.setState({ eventId, info });
+    });
+
+    try {
+      this.context.emitError(error.toString());
+    } catch (e) {
+      Sentry.captureMessage(`Unable to emit error ${error} ${e}`);
+    }
+    this.reportContent = `${error} ${info.componentStack}`;
+  }
+
+  render() {
+    if (this.state.errorMessage) {
+      return (
+        <div className={style.errorContainer} data-testid='error-container'>
+          <div>
+            <p className={style.error}>:/</p>
+            <p>Something went wrong</p>
+            <div
+              role='button'
+              className={style.report}
+              onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
+            >
+              Report error
+            </div>
+            <div
+              role='button'
+              className={style.report}
+              onClick={() => {
+                if (window?.process?.type === 'renderer') {
+                  window.ipcRenderer.send('reload');
+                } else {
+                  window.location.reload();
+                }
+              }}
+            >
+              Reload interface
+            </div>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

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

@@ -0,0 +1,28 @@
+@use '../../../theme/v2Styles' as *;
+
+.errorContainer {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  background-color: #121212;
+  color: white;
+
+  .error {
+    color: $error-red;
+    font-weight: 600;
+  }
+
+  .report {
+    text-decoration: underline  $error-red;
+    cursor: pointer;
+  }
+
+  .report:hover {
+    color: $error-red;
+  }
+
+  .report:active {
+    color: white;
+  }
+}

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

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import { Textarea, TextareaProps } from '@chakra-ui/react';
+// @ts-expect-error no types from library
+import autosize from 'autosize/dist/autosize';
+
+interface AutoTextAreaProps extends TextareaProps {
+  isDark?: boolean;
+}
+
+export const AutoTextArea = (props: AutoTextAreaProps) => {
+  const { isDark, ...rest } = props;
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    autosize(ref.current);
+    return () => {
+      autosize.destroy(node);
+    };
+  }, []);
+
+
+  return (
+    <Textarea
+      overflow='hidden'
+      w='100%'
+      resize='none'
+      ref={ref}
+      transition='height none'
+      variant={isDark ? 'ontime-filled' : 'ontime-filled-onlight'}
+      {...rest}
+    />
+  );
+};

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 { TitleActions } from '../../../../features/event-editor/composite/EventEditorTitles';
+
+import Swatch from './Swatch';
+
+import style from './SwatchSelect.module.scss';
+
+interface ColourInputProps {
+  value: string;
+  name: TitleActions;
+  handleChange: (newValue: TitleActions, 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/text-input/TextInput.tsx

@@ -0,0 +1,56 @@
+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;
+}
+
+interface TextAreaProps extends BaseProps {
+  isTextArea: true;
+  resize?: 'horizontal' | 'vertical' | 'none';
+}
+
+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 = '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,200 @@
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, 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 {
+  name: TimeEntryField;
+  submitHandler: (field: TimeEntryField, value: number) => void;
+  time?: number;
+  delay?: number;
+  placeholder: string;
+  validationHandler: (entry: TimeEntryField, val: number) => boolean;
+  previousEnd?: number;
+  warning?: string;
+}
+
+export default function TimeInput(props: TimeInputProps) {
+  const { 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>('');
+  // avoid wrong submit on cancel
+  let ignoreChange = false;
+
+  /**
+   * @description Resets input value to given
+   */
+  const resetValue = useCallback(() => {
+    try {
+      // eslint-disable-next-line -- we use ignore change to stop submit on cancel
+      ignoreChange = true;
+      setValue(millisToString(time));
+    } catch (error) {
+      emitError(`Unable to parse date: ${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) => {
+      if (ignoreChange) {
+        // eslint-disable-next-line -- we use this to prevent a wrong submit
+        ignoreChange = false;
+        return;
+      }
+      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, 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') {
+        inputRef.current?.blur();
+        resetValue();
+      }
+    },
+    [resetValue, validateAndSubmit],
+  );
+
+  const onBlurHandler = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      validateAndSubmit((event.target as HTMLInputElement).value);
+    },
+    [validateAndSubmit],
+  );
+
+  useEffect(() => {
+    if (time == null) return;
+    resetValue();
+  }, [emitError, resetValue, time]);
+
+  const ButtonInitial = () => {
+    if (name === 'timeStart') return 'S';
+    if (name === 'timeEnd') return 'E';
+    if (name === 'durationOverride') return 'D';
+    return '';
+  };
+
+  const ButtonTooltip = () => {
+    if (name === 'timeStart') return `Start${warning ? `: ${warning}` : ''}`;
+    if (name === 'timeEnd') return `End${warning ? `: ${warning}` : ''}`;
+    if (name === 'durationOverride') return `Duration${warning ? `: ${warning}` : ''}`;
+    return '';
+  };
+
+  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]);
+
+  return (
+    <InputGroup size='sm' className={inputClasses}>
+      <InputLeftElement className={style.inputLeft}>
+        <Tooltip label={ButtonTooltip()} 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'
+          >
+            {ButtonInitial()}
+          </Button>
+        </Tooltip>
+      </InputLeftElement>
+      <Input
+        ref={inputRef}
+        data-testid='time-input'
+        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/navigation-menu/NavigationMenu.module.scss

@@ -0,0 +1,93 @@
+@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);
+}
+
+.navButton {
+  z-index: 2;
+  position: absolute;
+  left: 0.5em;
+  top: 0.5em;
+  transition-property: opacity;
+  transition-duration: 0.3s;
+  opacity: 1;
+  font-size: 24px;
+  color: $icon-color;
+  background-color: $button-bg;
+  width: $button-size;
+  height: $button-size;
+  display: grid;
+  place-content: center;
+  border-radius: 3px;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.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,111 @@
+import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Link, useLocation } from 'react-router-dom';
+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 { 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 style from './NavigationMenu.module.scss';
+
+export default function NavigationMenu() {
+  const location = useLocation();
+
+  const { isFullScreen, toggleFullScreen } = useFullscreen();
+  const { mirror, toggleMirror } = useViewOptionsStore();
+  const [showButton, setShowButton] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  useClickOutside(menuRef, () => setShowMenu(false));
+
+  const toggleMenu = () => setShowMenu((prev) => !prev);
+  useKeyDown(toggleMenu, ' ');
+
+  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();
+
+  return createPortal(
+    <div id='navigation-menu-portal' ref={menuRef} className={mirror ? style.mirror : ''}>
+      <button
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        className={`${style.navButton} ${!showButton && !showMenu ? style.hidden : ''}`}
+      >
+        <IoApps />
+      </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}>*/}
+            {/*  Rename Client*/}
+            {/*</div>*/}
+          </div>
+          <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>,
+    document.body,
+  );
+}

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;
+  border-radius: $progress-bar-br;
+  background-color: var(--timer-progress-override, $accent-color);
+  transition: 1s linear;
+  transition-property: width;
+}