docs: add link to subreddit

---------

Co-authored-by: Shobhit Nagpal <74096450+Shobhit-Nagpal@users.noreply.github.com>
Co-authored-by: Carlos Valente <carlosvalente@pm.me>

.deepsource.toml

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

.dockerignore

@@ -11,4 +11,13 @@
 
 # Ignore git and cache folders
 .git
+.gitignore
 .cache
+
+# Ignore build folders
+node_modules
+**/node_modules
+
+# Ignore default volumes created by running docker compose up
+ontime-db
+ontime-styles

.eslintignore

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

.eslintrc

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

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: cpvalente
+buy_me_a_coffee: cpvalente

.github/workflows/build.yml

@@ -1,184 +0,0 @@
-name: Ontime build
-
-on:
-  push:
-    # run when a tag is created
-    tags:
-      - '*'
-  workflow_dispatch:
-
-jobs:
-  build_mac:
-    runs-on: macOS-latest
-    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
-        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
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        shell: bash
-        run: yarn install --frozen-lockfile && 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
-    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
-        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
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        shell: bash
-        run: yarn install --frozen-lockfile && 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
-    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
-        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
-        working-directory: ./server/src
-
-      # App
-      - name: Electron - Install dependencies
-        shell: bash
-        run: yarn install && yarn setdb
-        working-directory: ./server
-      - name: Electron - Build app
-        run: yarn dist-linux
-        working-directory: ./server
-
-      # Release
-      - name: Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: ./server/dist/ontime-linux.AppImage
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  publish_docker:
-    runs-on: ubuntu-latest
-    env:
-      CI: ''
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Setup env
-        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: '14.x'
-
-      # React
-      - name: React - Install dependencies
-        run: yarn install
-        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
-        working-directory: ./server/src
-
-      # Login to docker
-      - name: Login to Docker Hub
-        uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      # Build and push
-      - name: Build and push
-        working-directory: ./
-        id: docker_build
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ env.RELEASE_VERSION  }}

.github/workflows/build_cli.yml

@@ -0,0 +1,61 @@
+name: Ontime CLI build
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  build_cli:
+    permissions:
+      id-token: write
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      # This step is only needed to setup the permissions to update npm as pnpm will setup the correct node version
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Copy server
+        run: mkdir -p apps/cli/server && cp apps/server/dist/index.cjs apps/cli/server/index.cjs
+
+      - name: Copy client
+        run: cp -R apps/client/build apps/cli/client
+
+      - name: Copy external
+        run: cp -R apps/server/src/external apps/cli/external
+
+      # This will be included in v24 of NodeJS so when the project upgrades to that this can be removed
+      - name: Install newer version of npm
+        run: npm install -g npm@11
+
+      - name: Publish to NPM
+        run: pnpm publish --access public --no-git-checks
+        env:
+          NPM_CONFIG_PROVENANCE: true
+        working-directory: ./apps/cli

.github/workflows/build_docker.yml

@@ -0,0 +1,68 @@
+name: Docker Image CI Ontime
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  publish_docker:
+    runs-on: ubuntu-latest
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm 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 stable release
+        if: github.event.release.prerelease == false
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          # Push is a shorthand for --output=type=registry
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
+
+      - name: Build and push pre-release
+        if: github.event.release.prerelease == true
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          # Push is a shorthand for --output=type=registry
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly

.github/workflows/build_electron.yml

@@ -0,0 +1,108 @@
+name: Ontime build
+
+on:
+  push:
+    tags: ['*']
+  workflow_dispatch:
+
+jobs:
+  build_macos:
+    runs-on: macOS-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        env:
+          APPLE_ID: ${{ secrets.APPLEID }}
+          APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLEIDPASS }}
+          APPLE_TEAM_ID: ${{ secrets.TEAMID }}
+          CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+          CSC_LINK: ${{ secrets.CSC_LINK }}
+        run: pnpm dist-mac --env-mode=loose
+        timeout-minutes: 60
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: |
+            ./apps/electron/dist/ontime-macOS-x64.dmg
+            ./apps/electron/dist/ontime-macOS-arm64.dmg
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_windows:
+    runs-on: windows-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        run: pnpm build
+
+      - name: Electron - Build app
+        run: pnpm dist-win
+
+      - name: Release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: './apps/electron/dist/ontime-win64.exe'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  build_ubuntu:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+
+      - 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/build_resolver.yml

@@ -0,0 +1,48 @@
+name: Ontime Resolver build
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build_resolver:
+    permissions:
+      id-token: write
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      # This step is only needed to setup the permissions to update npm as pnpm will setup the correct node version
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project packages
+        run: pnpm build:resolver
+
+      # This will be included in v24 of NodeJS so when the project upgrades to that this can be removed
+      - name: Install newer version of npm
+        run: npm install -g npm@11
+
+      - name: Publish to NPM
+        run: pnpm publish --access public --no-git-checks
+        env:
+          NPM_CONFIG_PROVENANCE: true
+        working-directory: ./apps/resolver

.github/workflows/codeql-analysis.yml

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

.github/workflows/ontime_cy.yml

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

.github/workflows/test.yml

@@ -0,0 +1,101 @@
+name: Ontime test
+
+on:
+  pull_request:
+    branches: '*'
+  workflow_dispatch:
+
+jobs:
+  unit-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      CI: ''
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      # Run code quality
+      - name: Run linter
+        run: pnpm lint
+
+      - name: Run TypeScript checks
+        run: pnpm typecheck
+
+      # We choose to run tests separately
+      - name: Run unit tests
+        if: always()
+        run: pnpm test
+
+  e2e-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Get pnpm store directory
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.PNPM_STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Get installed Playwright version
+        run: echo "PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test --parseable | cut -s -d '@' -f3 | cut -d '/' -f1)" >> $GITHUB_ENV
+      - name: Cache playwright binaries
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+      - run: npx playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: pnpm e2e
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: automated-screenshots
+          path: automated-screenshots/
+          retention-days: 14

.gitignore

@@ -5,37 +5,49 @@ node_modules/
 /.pnp
 .pnp.js
 
-# testing
-coverage/
-*.mp4
-
-# production
-build/
-dist/
-
 # misc
 .DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.local
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# working stuff
-_SS/
-db backup.json
-server/src/preloaded-db/db.json
-server/src/models/db.json
-TODO.md
-ontime-db/
-
 # vscode stuff
 .vscode/*
 ontime.code-workspace
 
 # webstorm stuff
-.idea/*
+.idea/*
+
+# turborepo stuff
+.turbo
+
+# testing
+test-results
+playwright-report
+/playwright/.cache/
+automated-screenshots
+e2e/tests/fixtures/tmp/*
+
+# production
+build/
+dist/
+
+# bundled assets
+translations.json
+override.css
+
+# working stuff
+**/TODO.md
+
+# docker utils
+ontime-db
+ontime-external/
+ontime-data/
+
+# versioning file
+**/ONTIME_VERSION.js
+
+# temporary write files
+**.tmp

.idea/.gitignore

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

.idea/inspectionProfiles/Project_Default.xml

@@ -1,50 +0,0 @@
-<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>
-  </profile>
-</component>

.nvmrc

@@ -0,0 +1 @@
+v22.15.1

.prettierignore

@@ -0,0 +1,14 @@
+build
+coverage
+dist
+node_modules
+
+playwright-report
+
+
+pnpm-lock.yaml
+**/*.toml
+**/*.json
+!tsconfig.common.json
+!turbo.json
+!package.json

.prettierrc

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

DEVELOPMENT.md

@@ -0,0 +1,112 @@
+# 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__ (~22)
+- __pnpm__ (~10)
+- __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`
+- __Create a local build__ by running `pnpm build`, this will populate local dependencies
+- __Run dev mode__ by running `pnpm dev` or `pnpm dev:electron` to get the electron window
+
+
+### Debugging backend
+
+The previous command will start the development servers for both the client, server and electron applications.
+Typically in dev mode we prefer to start these in separate terminals to help with error tracking and debugging.
+
+We do that by creating two terminals an running
+- __Run the React UI__ by running `pnpm dev --filter=ontime-ui`
+- __Run the nodejs server__ by running `pnpm dev --filter=ontime-server`
+
+- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by running `pnpm dev:inspect --filter=ontime-server`.
+
+## TESTING
+
+Generally we have 2 types of tests.
+
+- Unit tests for functions that contain business logic
+- End-to-end tests for core features
+
+### Unit tests
+
+Unit tests are contained in mostly all the apps and packages (client, server and utils)
+
+You can run unit tests by running `pnpm test:pipeline` from the project root.
+This will run all tests and close test runner.
+
+Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode
+
+### E2E tests
+
+E2E tests are in a separate package. On running, [playwright](https://playwright.dev/) will spin up an instance of the
+webserver to test against
+These tests also run against a separate version of the DB (test-db)
+
+Before running the E2E, you should first build the project with `pnpm build:local`.
+
+You can run playwright tests from project root with `pnpm e2e`
+
+When writing tests, it can be handy to run playwright in interactive mode with `pnpm e2e:i`. You would need to manually
+start the webserver with `pnpm dev:server`
+
+Some other useful commands
+
+- `pnpm e2e:ui` open playwright UI
+- `pnpm e2e --headed` run tests with a visible browser window
+
+## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)
+
+Ontime uses Electron to distribute the application.
+You can generate a distribution for your OS by running the following steps.
+
+From the project root, run the following commands
+
+- __Install the project dependencies__ by running `pnpm i`
+- __Build the UI and server__ by running `pnpm build`
+- __Create the package__ by running `pnpm dist-win`, `pnpm dist-mac` or `pnpm dist-linux`
+
+The build distribution assets will be at `.apps/electron/dist`
+
+## 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
+
+- __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>`
+
+## CONTRIBUTION GUIDELINES
+
+If you want to propose changes to the codebase, please reach out before opening a Pull Request.
+
+For new PRs, please follow the following checklist:
+* [ ] You have updated and ran unit locally and they are passing. Unit tests are generally created for all utility functions and business logic 
+* [ ] You have ran code formatting and linting in all your changes
+* [ ] The branch is clean and the commits are meaningfully separated and contain descriptive messages
+* [ ] The PR body contains description and motivation for the changes
+
+After this checklist is complete, you can request a review from one of the maintainers to get feedback and approval on the changes. \
+We will review as soon as possible

Dockerfile

@@ -1,20 +1,30 @@
-FROM node:14-alpine
-
-WORKDIR /app/server
-
-# Prepare UI
-COPY /client/build ../client/build
-
-# Prepare Backend
-COPY /server/src ./
-
-# Export default ports Main - OSC IN
-EXPOSE 4001/tcp 8888/udp
-ENV NODE_ENV=production
-ENV ONTIME_DATA=/server/
-
-CMD ["yarn", "start:headless"]
-
-# Build an run commandsN
-# docker build -t getontime/ontime .
-# docker run -p 4001:4001 -p 10.0.0.12:8888:8888/udp --mount type=bind,source="$(pwd)/ontime-db",target=/server/preloaded-db getontime/ontime
+ARG NODE_VERSION=22.15.1
+FROM node:${NODE_VERSION}-alpine
+
+# Set environment variables
+# Environment Variable to signal that we are running production
+ENV NODE_ENV=docker
+# Ontime Data path
+ENV ONTIME_DATA=/data/
+
+RUN mkdir /app
+WORKDIR /app/
+
+# Prepare UI
+COPY apps/client/build/ ./client/
+
+# Prepare Backend
+COPY apps/server/dist/ ./server/
+COPY apps/server/src/external/ ./external/
+COPY apps/server/src/user/ ./user/
+COPY apps/server/src/html/ ./html/
+
+# Export default ports
+EXPOSE 4001/tcp 8888/udp 9999/udp
+
+CMD ["node", "server/docker.cjs"]
+
+# Build and run commands
+# pnpm build:docker
+# docker buildx build . -t getontime/ontime
+# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime

README.md

@@ -1,206 +1,129 @@
-[![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/)
+[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-green.svg)](https://www.gnu.org/licenses/gpl-3.0)
+![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/cpvalente/ontime/total)
+![Docker Pulls](https://img.shields.io/docker/pulls/getontime/ontime)
+![NPM Downloads](https://img.shields.io/npm/dy/%40getontime%2Fcli)
+![Homebrew Cask Version](https://img.shields.io/homebrew/cask/v/ontime)
+[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
+[![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)
 
-## Download the latest releases here
+## Download the latest release
+<a href="https://www.buymeacoffee.com/cpvalente" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="32"></a>
 
-<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>
-</div>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe">Windows</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg">MacOS Arm</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-x64.dmg">MacOS Intel</a>
+- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage">Linux</a>
+
+... or
+- Get from <a href="https://hub.docker.com/r/getontime/ontime">Docker hub</a>
+- Install from <a href="https://www.npmjs.com/package/ontime">NPM</a>
+- Install from <a href="https://formulae.brew.sh/cask/ontime">Homebrew</a>
+
+## Need help?
+We do our best to have most topics covered by the documentation. However, if your question is not covered, you are welcome to [fill in a bug report in an issue](https://github.com/cpvalente/ontime/issues), [ask a question in GitHub discussions](https://github.com/cpvalente/ontime/discussions) or hop in the [discord server](https://discord.com/invite/eje3CSUEXm) for a chat.
+
+## Using Ontime?
+Let us know!
+Ontime improves from the collaboration with its users. We would like to understand how you use Ontime and appreciate your feedback.
 
 # Ontime
 
-Ontime is an application for managing event rundowns and running stage timers.
+Ontime is a browser-based application that manages event rundowns, scheduling, and cueing.
 
-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.
+With Ontime, you can plan, track your schedule, manage automation and cross-department show information all in one place.
 
-![App Window](https://github.com/cpvalente/ontime/blob/master/.github/app.jpg)
+Ontime is made by entertainment and broadcast engineers and used by
 
-![Views](https://github.com/cpvalente/ontime/blob/master/.github/02_screentypes.png)
+- Conference organisers
+- Touring shows and receiving venues
+- Broadcasters and streamers
+- Theatres and opera houses
+- Houses of worship
+
+## Main features
+- **Multiplatform**: Available as a Cloud service and for Windows, macOS, Linux, or self-hosted via Docker.
+- **In any device**: Ontime is available to any device with a browser, eg: tablets, mobile phones, laptops, signage, media servers...
+- **Team Collaboration**: Dedicated views for directors, operators, backstage, and signage.
+- **Real-Time Updates**: Manage and communicate runtime delays effortlessly.
+- **Automatable**: Ontime can be fully or partially controlled by an operator, or run standalone with the system clock
+- **Flexible Integrations**: Use one of the APIs provided (OSC, HTTP, Websocket) or the available [Companion module](https://bitfocus.io/connections/getontime-ontime) to integrate into your workflow (vMix, disguise, Qlab, OBS)
+
+... and a lot more ...
+
+### For live environments
+
+Ontime is designed for use in live environments. \
+This guides the application into being flexible and efficiently integrating into different workflows.
+
+### For teams
+
+All information added in Ontime is shared with the production team and other software / hardware in your workflow. \
+Ontime also improves team collaboration with dedicated views for cuesheets and operators, and for public and production
+signage.
+
+### Simple infrastructure
+
+All the data is distributed over the network, making its distribution and infrastructure flexible and cheap. \
+With the availability of the docker image, you can also leverage IT infrastructure to make Ontime available online for
+your team and clients.
+
+Ontime is made by video engineers and entertainment technicians.
+
+![App Window](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/editor.png)
+
+![Views](https://github.com/cpvalente/ontime/blob/master/.github/aux-images/ontime-overview.webp)
+
+[Read the docs to learn more](https://docs.getontime.no)
 
 ## Using Ontime
 
-Once installed and running, ontime starts a background server that is the heart of all processes.
-The app, is used to add / edit your running order in the event list, and running the timers using
-the Playback Control function.
+### Getting started
 
-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 ontime logo in the top right corner to select the desired view (event in the
-lower thirds view, where it is hidden).
+The easiest way to start with Ontime is by leveraging our [Cloud service](https://getontime.no). \
+This will give you immediate access to running instances of Ontime which are available to share with anyone with an internet connection.
 
-In case of unattended machines or automations, it is possible to use different URL to recall
-individual views and extend with using the URL aliases feature
+Alternatively, you can run Ontime locally for free by downloading the latest release for your platform or using the docker image, available at [Docker Hub](https://hub.docker.com/r/getontime/ontime)
 
-```
-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/sm         > Stage Manager / Backstage view
-IP.ADDRESS:4001/public     > Public / Foyer view
-IP.ADDRESS:4001/pip        > Picture in Picture view
-IP.ADDRESS:4001/lower      > Lower Thirds
-IP.ADDRESS:4001/studio     > Studio Clock
-IP.ADDRESS:4001/cuesheet   > Cue Sheet
+Once installed and running, any device that shares the same network as Ontime will have access to Ontime.
 
-...and for the editor (the control interface, same as the app)
--------------------------------------------------------------
-IP.ADDRESS:4001/editor
+More information is available [in our docs](https://docs.getontime.no)
 
-```
+## Continued development
 
-More documentation available [here](https://cpvalente.gitbook.io/ontime/)
+Ontime is under active development. We continue adding and improving features in collaboration with users.
 
-## Feature List (in no specific order)
+Have an idea? Reach out via [email](mail@getontime.no)
+or [open an issue](https://github.com/cpvalente/ontime/issues/new)
 
-- [x] Distribute Data over network and render in the browser
-- [x] Different screen types
-    - Stage Timer
-    - Backstage Info
-    - Public Info
-    - Picture in Picture
-    - Studio Clock
-    - [Make your own?](#make-your-own-viewer) 
-- [x] Configurable realtime Lower Thirds
-- [x] Cuesheets with additional custom fields
-- [x] Send live messages to different screen types
-- [x] Ability to differentiate between backstage and public data
-- [x] Manage delays workflow
-- [x] Open Sound Control (OSC) Control and Feedback
-- [x] Roll mode: run independently using the system clock
-- [x] Import event list from Excel
-- [x] URL Aliases (define configurable aliases to ease onsite setup)
-- [x] Logging view
-- [x] Edit anywhere: run ontime in your local network and use any machine to reach the editor page (
-  same as app)
-- [x] Multi platform (available on Windows, MacOS and Linux)
-- [x] [Headless run](#headless-run) (run server only, configure from a browser locally)
+## Issues
 
-## Unopinionated
+We use Github's issue tracking for bug reporting and feature requests. \
+Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new).
 
-We are not interested in forcing workflows and have made ontime, so it is flexible to whichever way
-you would like to work.
+## Contributing
 
-- [x] You do not need an order list to use the timer. Create an empty event and the OSC API works
-  just the same
-- [x] If you want just the info screens, no need to use the timer!
-- [x] Don't have or care for a schedule?
-    - [x] a single event with no data is enough to use the OSC API and get going
-    - [x] use the order list to create a set of quick timers by setting the beginning and start
-      times to 00:00 and 00:10 (**BAM**! 10 minute timer). You can quickly recall this with OSC as
-      always
+Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
 
-## Rich APIs for workflow integrations
+If you are a developer and would like to contribute with code, please open an issue to discuss before opening a Pull Request.
 
-The app is being currently developed to a wide user base, from broadcast to entertainment and
-conference halls.
+Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)
 
-Taking advantage of the integrations in Ontime, we currently use Ontime with:
+## Links
+- [Ontime website](https://getontime.no) 
+- [Documentation](https://docs.getontime.no)
+- [Video tutorials](https://www.youtube.com/@ontimeapp)
+- [Ontime discord server](https://discord.com/invite/eje3CSUEXm)
 
-- `disguise`: trigger ontime from d3's timeline using the **OSC API**, **render views** using d3's
-  webmodule
-- `OBS`: **render views** using the Browser Module
-- `QLab`: trigger ontime using **OSC API**
-- `Companion`: trigger ontime and manipulate timer using **OSC API**
-
-### Make your own viewer
-
-Ontime broadcasts its data over websockets. This allows you to build your own viewers by leveranging
-basic knowledge of HTML + CSS + Javascript (or any other language that can run in the browser).
-
-See [this repository](https://github.com/cpvalente/ontime-viewer-template) 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 should:
-- expose the necessary ports (listen in Dockerfile)
-- mount a local file to persist your data (in the example: ````$(pwd)/local-data````)
-- the image name __getontime/ontime__
-
-The docker image is in [available Docker Hub at getontime/ontime](https://hub.docker.com/r/getontime/ontime)
-```bash
-docker pull getontime/ontime
-```
-
-```bash
-# Port 4001 - ontime server port
-# Port 8888 - OSC input, bound to localhost IP Address 
-docker run -p 4001:4001 -p 127.0.0.1:8888:8888/udp --mount type=bind,source="$(pwd)/ontime-db",target=/server/preloaded-db getontime/ontime
-```
-
-or if running from the docker compose
-
-```bash
-docker-compose up
-```
-
-## Roadmap
-
-### Continued development
-
-There are several features planned in the roadmap. These will be implemented in a development
-friendly order unless there is user demand to bump any of them.
-
-- [ ] HTTP Server (vMix integration)
-- [ ] Improvement with event component design
-- [ ] New playback mode
-  for [cumulative time keeping](https://github.com/cpvalente/ontime/issues/100)
-- [ ] Companion module
-- [ ] Lower Third Manager
-- [ ] Note only event
-- [ ] Reach Schedule: way to speedup timer to meet a deadline
-
-### Issues
-
-The app is still in pre-release and there are a few issues, mainly concerning responsiveness in
-different screens. If you run into problems, please open an issue with a screenshot and note your
-device and its screen resolution
-
-#### 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, so we can discuss it](https://github.com/cpvalente/ontime/issues/new)
-
-
-#### Safari
-
-There are some issues with Safari versions lower than 13:
-
-- Spacing and text styles might have small inconsistencies
-- Table view does not work
-
-There is no plan for any further work on this since the breaking code belongs to third party
-libraries.
-
-# Help
-
-Help is underway! ... and can be viewed [here](https://cpvalente.gitbook.io/ontime/)
-
-# License
+## License
 
 This project is licensed under the terms of the GNU GPL v3
+
+## Sponsor
+
+You can help the development of this project or say thank you with a one time donation. \
+See [the terms of donations](https://github.com/cpvalente/ontime/blob/master/.github/FUNDING.md).
+
+<p align="center">
+<br>
+<a href="https://www.buymeacoffee.com/cpvalente" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="200"></a>
+</p>

SPONSOR.md

@@ -0,0 +1,19 @@
+# Terms of sponsorship
+Ontime does not exist as a fiscal entity. The sponsorship recipient is the project owner. In this light, contributors are funding the project owner's capacity to work on the project, not the project itself. As a contribution recipient, the code owner reserves the right to redistribute.
+
+## Why sponsor
+Ontime is and will remain free, regardless of your decision to contribute.
+Regardless, you may choose to provide a monetary contribution:
+
+### Improve user experience
+Certain parts of the application user experience are tied to our capacity to pay for services. App signing and Google Sheets integration are good examples of this.
+
+### Cool stuff
+We may choose not to implement some features. This could be related to the complexity required, to the skill set, or to the fact that we just feel it doesn't improve the app for a significant percentage of users. In those cases, a feature may be considered "not worth it," regardless of its pertinence.
+
+As a user, you can choose to sponsor a particular feature or donate to the app so that we can create bounties for features.
+
+### Priorities
+Monetary contributions are most immediately needed to offset the costs of presenting and distributing Ontime, i.e., hosting, domains, and certificates.
+
+Additional funding will be considered according to the needs at the time.

apps/cli/.eslintrc

@@ -0,0 +1,16 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "plugins": [],
+  "rules": {
+    "@typescript-eslint/no-var-requires": "off"
+  }
+}

apps/cli/.gitignore

@@ -0,0 +1,3 @@
+server
+external
+client

apps/cli/.prettierrc

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

apps/cli/README.md

@@ -0,0 +1,44 @@
+# Ontime CLI
+
+![Ontime](https://github.com/cpvalente/ontime/blob/9e63261b350e5b7b61c7ffb17c9e75a6c5a8c711/.github/aux-images/editor.png)
+> Ontime is an application for managing rundown and event timers.
+
+Congratulations! You got this far into Ontime's rabbit hole and want to manage your installation.
+
+The CLI tool is a fast and lightweight way of installing Ontime and is perfect for self-hosting and headless installs.
+
+## Getting started
+
+### Prerequisites
+You will need to have installed the correct version of node.js
+Please check [the app engines declaration](https://github.com/cpvalente/ontime/blob/master/package.json) for the correct version.
+
+### Running Ontime
+To get Ontime running, all you need to do is install it in your system using your package manager of choice:
+
+Install globally in your system 
+```bash
+npm install -g @getontime/cli
+```
+
+... and run using the installed script
+```bash
+ontime
+```
+
+Or install and run ontime (the installation here is temporary for the duration of the session)
+```bash
+npx install @getontime/cli
+```
+
+## Links
+- [Ontime's repository](https://github.com/cpvalente/ontime)
+- [Ontime's documentation](https://docs.getontime.no/)
+- [Ontime's website](https://getontime.no/)
+
+## Sponsoring
+You can help the development of this project or say thank you with a one time donation. \
+See the [terms of donations](https://github.com/cpvalente/ontime/blob/master/SPONSOR.md)
+
+[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/cpvalente)
+[![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)

apps/cli/main.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+// NOTE: for now the following needs to be in place: ./server/index.cjs, ./client, ./external
+
+const ontimeServer = require('./server/index.cjs');
+const { initAssets, startServer, startIntegrations, shutdown } = ontimeServer;
+
+async function startOntime() {
+  await initAssets();
+
+  await startServer();
+
+  await startIntegrations();
+}
+
+startOntime();
+
+process.on(['SIGHUP', 'SIGINT', 'SIGTERM'], () => {
+  shutdown();
+});

apps/cli/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@getontime/cli",
+    "version": "4.2.0",
+    "author": "Carlos Valente",
+    "description": "Time keeping for live events",
+    "repository": "https://github.com/cpvalente/ontime",
+    "keywords": [
+        "lighdev",
+        "ontime",
+        "timer"
+    ],
+    "license": "AGPL-3.0-only",
+    "main": "main.js",
+    "bin": {
+        "ontime": "main.js"
+    },
+    "files": [
+        "client",
+        "external",
+        "server"
+    ],
+    "devDependencies": {
+        "eslint": "catalog:",
+        "eslint-config-prettier": "catalog:",
+        "prettier": "catalog:"
+    }
+}

apps/client/.eslintignore

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

apps/client/.eslintrc

@@ -0,0 +1,142 @@
+{
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
+  ],
+  "plugins": [
+    "react",
+    "react-compiler",
+    "simple-import-sort",
+    "@tanstack/query"
+  ],
+  "rules": {
+    "react-compiler/react-compiler": "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,9 @@
+{
+  "endOfLine": "lf",
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120
+}

apps/client/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <base href="/" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#101010" />
+    <meta name="ontime" content="ontime - time keeping for live events" />
+    <link rel="apple-touch-icon" href="/ontime-logo.png" />
+    <link rel="icon" type="image/png" href="/ontime-logo.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="robots" content="noindex" />
+    <title>ontime</title>
+  </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,88 @@
+{
+  "name": "ontime-ui",
+  "version": "4.2.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@base-ui-components/react": "1.0.0-beta.4",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@fontsource/open-sans": "^5.2.6",
+    "@mantine/hooks": "^8.3.7",
+    "@sentry/react": "^10.2.0",
+    "@table-nav/react": "^0.0.7",
+    "@tanstack/react-query": "^5.85.9",
+    "@tanstack/react-query-devtools": "^5.85.9",
+    "@tanstack/react-table": "^8.21.3",
+    "autosize": "^6.0.1",
+    "axios": "^1.12.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
+    "csv-stringify": "^6.6.0",
+    "prismjs": "^1.30.0",
+    "react": "^19.1.1",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^19.1.1",
+    "react-fast-compare": "^3.2.2",
+    "react-hook-form": "^7.62.0",
+    "react-icons": "5.5.0",
+    "react-qr-code": "^2.0.18",
+    "react-router": "^7.8.2",
+    "react-simple-code-editor": "^0.14.1",
+    "react-virtuoso": "^4.14.0",
+    "web-vitals": "^5.1.0",
+    "zustand": "^5.0.8"
+  },
+  "scripts": {
+    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
+    "postinstall": "pnpm addversion",
+    "dev": "cross-env BROWSER=none vite",
+    "dev:electron": "pnpm dev",
+    "lint": "eslint . --quiet",
+    "typecheck": "tsc --noEmit",
+    "build": "vite build",
+    "test": "vitest",
+    "test:pipeline": "vitest run",
+    "analyse": "npx vite-bundle-visualizer"
+  },
+  "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": "^2.16.1",
+    "@tanstack/eslint-plugin-query": "^5.8.4",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "@typescript-eslint/eslint-plugin": "catalog:",
+    "@typescript-eslint/parser": "catalog:",
+    "@vitejs/plugin-react": "4.5.1",
+    "eslint": "catalog:",
+    "eslint-config-prettier": "catalog:",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-prettier": "catalog:",
+    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "ontime-types": "workspace:*",
+    "ontime-utils": "workspace:*",
+    "prettier": "catalog:",
+    "sass": "^1.57.1",
+    "typescript": "catalog:",
+    "vite": "6.3.1",
+    "vite-plugin-compression2": "2.2.0",
+    "vite-plugin-svgr": "4.3.0",
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "catalog:"
+  }
+}

apps/client/public/manifest.json

@@ -4,18 +4,11 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "ontime-logo.png",
+      "type": "image/png"
     }
   ],
   "scope": "/",

apps/client/public/site.webmanifest

@@ -0,0 +1,10 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/ontime-logo.png", "sizes": "295x295", "type": "image/png" }
+  ],
+  "theme_color": "#2B5ABC",
+  "background_color": "#101010",
+  "display": "standalone"
+}

apps/client/src/App.tsx

@@ -0,0 +1,44 @@
+import { BrowserRouter } from 'react-router';
+import { Tooltip } from '@base-ui-components/react/tooltip';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
+import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverlay';
+import { AppContextProvider } from './common/context/AppContext';
+import { ontimeQueryClient } from './common/queryClient';
+import { connectSocket } from './common/utils/socket';
+import KeepAwake from './features/keep-awake/KeepAwake';
+import { TranslationProvider } from './translation/TranslationProvider';
+import AppRouter from './AppRouter';
+import { baseURI } from './externals';
+
+connectSocket();
+
+function App() {
+  return (
+    <QueryClientProvider client={ontimeQueryClient}>
+      <AppContextProvider>
+        <Tooltip.Provider>
+          <BrowserRouter basename={baseURI}>
+            <div className='App'>
+              <ErrorBoundary>
+                <TranslationProvider>
+                  <IdentifyOverlay />
+                  <KeepAwake />
+                  <AppRouter />
+                </TranslationProvider>
+              </ErrorBoundary>
+              <ReactQueryDevtools initialIsOpen={false} />
+            </div>
+            <ErrorBoundary>
+              <div id='identify-portal' />
+            </ErrorBoundary>
+          </BrowserRouter>
+        </Tooltip.Provider>
+      </AppContextProvider>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

apps/client/src/AppRouter.tsx

@@ -0,0 +1,251 @@
+import { ComponentType, lazy, Suspense, useEffect, useMemo } from 'react';
+import { Navigate, Route, useLocation, useNavigate, useParams } from 'react-router';
+import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
+
+import ViewNavigationMenu from './common/components/navigation-menu/ViewNavigationMenu';
+import { PresetContext } from './common/context/PresetContext';
+import { useClientPath } from './common/hooks/useClientPath';
+import useUrlPresets from './common/hooks-query/useUrlPresets';
+import { getRouteFromPreset } from './common/utils/urlPresets';
+import Log from './features/log/Log';
+import Loader from './views/common/loader/Loader';
+import NotFound from './views/common/not-found/NotFound';
+import ViewLoader from './views/ViewLoader';
+import { getIsNavigationLocked, sessionScope } from './externals';
+import { initializeSentry } from './sentry.config';
+
+const Timer = lazy(() => import('./views/timer/Timer'));
+const Countdown = lazy(() => import('./views/countdown/Countdown'));
+const Backstage = lazy(() => import('./views/backstage/Backstage'));
+const StudioClock = lazy(() => import('./views/studio/Studio'));
+const Timeline = lazy(() => import('./views/timeline/TimelinePage'));
+const ProjectInfo = lazy(() => import('./views/project-info/ProjectInfo'));
+
+const Editor = lazy(() => import('./views/editor/ProtectedEditor'));
+const Cuesheet = lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
+const Operator = lazy(() => import('./features/operator/OperatorExport'));
+
+const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
+const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
+const TimerControl = lazy(() => import('./features/control/playback/TimerControlExport'));
+const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
+
+// Initialize Sentry with our configuration
+const SentryRouter = initializeSentry();
+
+export default function AppRouter() {
+  // handle client path changes
+  useClientPath();
+
+  return (
+    <Suspense fallback={<Loader />}>
+      <SentryRouter>
+        <Route path='/' element={<Navigate to='/timer' />} />
+        <Route
+          path='timer'
+          element={
+            <ViewLoader>
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <Timer />
+            </ViewLoader>
+          }
+        />
+        <Route
+          path='countdown'
+          element={
+            <ViewLoader>
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <Countdown />
+            </ViewLoader>
+          }
+        />
+        <Route
+          path='backstage'
+          element={
+            <ViewLoader>
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <Backstage />
+            </ViewLoader>
+          }
+        />
+        <Route
+          path='studio'
+          element={
+            <ViewLoader>
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <StudioClock />
+            </ViewLoader>
+          }
+        />
+        <Route
+          path='timeline'
+          element={
+            <ViewLoader>
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <Timeline />
+            </ViewLoader>
+          }
+        />
+        <Route
+          path='info'
+          element={
+            <ViewLoader>
+              <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />
+              <ProjectInfo />
+            </ViewLoader>
+          }
+        />
+        {/*/!* Protected Routes *!/*/}
+        <Route path='editor' element={<Editor />} />
+        <Route path='cuesheet' element={<Cuesheet />} />
+        <Route
+          path='op'
+          element={
+            <ViewLoader>
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <Operator />
+            </ViewLoader>
+          }
+        />
+        {/*/!* Protected Routes - Elements *!/*/}
+        <Route
+          path='rundown'
+          element={
+            <EditorFeatureWrapper>
+              <RundownPanel />
+            </EditorFeatureWrapper>
+          }
+        />
+        <Route
+          path='timercontrol'
+          element={
+            <EditorFeatureWrapper>
+              <TimerControl />
+            </EditorFeatureWrapper>
+          }
+        />
+        <Route
+          path='messagecontrol'
+          element={
+            <EditorFeatureWrapper>
+              <MessageControl />
+            </EditorFeatureWrapper>
+          }
+        />
+        <Route
+          path='log'
+          element={
+            <EditorFeatureWrapper>
+              <Log />
+            </EditorFeatureWrapper>
+          }
+        />
+        {/**
+         * If the views are prefixed with the "preset" path, we are in a locked preset
+         * Locked presets do not expose their parameters
+         */}
+        <Route path='preset/:alias' element={<PresetView />} />
+
+        {/**
+         * If we havent matched any views or presets, we may be in an unlocked preset
+         * Unlocked presets are unwrapped to expose their target and parameters
+         */}
+        <Route path='*' element={<RedirectPreset />} />
+      </SentryRouter>
+    </Suspense>
+  );
+}
+
+const PresetViewMap: Record<OntimeViewPresettable, ComponentType> = {
+  [OntimeView.Cuesheet]: Cuesheet,
+  [OntimeView.Operator]: Operator,
+  [OntimeView.Timer]: Timer,
+  [OntimeView.Backstage]: Backstage,
+  [OntimeView.Timeline]: Timeline,
+  [OntimeView.StudioClock]: StudioClock,
+  [OntimeView.Countdown]: Countdown,
+  [OntimeView.ProjectInfo]: ProjectInfo,
+};
+
+/**
+ * This view will mask a configured canonical route
+ * and inject the preset search parameters to context
+ * User are not able to configure the parameters locked presets
+ */
+function PresetView() {
+  const { data, status } = useUrlPresets();
+  const { alias } = useParams();
+
+  const preset: URLPreset | undefined = useMemo(() => {
+    if (status === 'pending' || !alias) return;
+    return data.find((p) => p.alias === alias && p.enabled);
+  }, [data, status, alias]);
+
+  if (status === 'pending') {
+    return <Loader />;
+  }
+
+  /**
+   * We need to check the session scope to determine if the user can navigate
+   * If the user has a global scope, they can navigate freely
+   * Otherwise, they are locked to the preset view
+   */
+  const showNav = sessionScope === 'rw';
+
+  /**
+   * If we are in a preset path but cannot find a preset, we will need to show a not found page
+   * This can happen if the preset was deleted or disabled
+   */
+  if (!preset) {
+    return (
+      <>
+        <ViewNavigationMenu isNavigationLocked={!showNav} suppressSettings />
+        <NotFound />
+      </>
+    );
+  }
+
+  /**
+   * Locked presets do not allow configuration changes
+   * Whether the user can navigate is determined by the locked param
+   *
+   * We inject the preset to the context value for the view to consume
+   */
+  const Component = PresetViewMap[preset.target as OntimeViewPresettable];
+  return (
+    <PresetContext value={preset}>
+      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
+      {Component ? <Component /> : <NotFound />}
+    </PresetContext>
+  );
+}
+
+function RedirectPreset() {
+  const { data, status } = useUrlPresets();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // checks if we are in a preset path and resolves a destination URL
+  const destination = useMemo(() => {
+    if (status === 'pending') return null;
+    return getRouteFromPreset(location, data);
+  }, [data, location, status]);
+
+  // if we have a destination, we will navigate to it
+  useEffect(() => {
+    if (destination) {
+      navigate(`/${destination}`, { replace: true });
+    }
+  }, [destination, navigate]);
+
+  if (status === 'pending') {
+    return <Loader />;
+  }
+
+  return (
+    <>
+      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
+      <NotFound />
+    </>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,85 @@
+import axios from 'axios';
+import type {
+  Automation,
+  AutomationDTO,
+  AutomationOutput,
+  AutomationSettings,
+  Trigger,
+  TriggerDTO,
+} from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const automationsPath = `${apiEntryUrl}/automations`;
+
+/**
+ * HTTP request to get the automations settings
+ */
+export async function getAutomationSettings(): Promise<AutomationSettings> {
+  const res = await axios.get(automationsPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to edit the automations settings
+ */
+export async function editAutomationSettings(
+  automationSettings: Partial<AutomationSettings>,
+): Promise<AutomationSettings> {
+  const res = await axios.post(automationsPath, automationSettings);
+  return res.data;
+}
+
+/**
+ * HTTP request to create a new automation trigger
+ */
+export async function addTrigger(trigger: TriggerDTO): Promise<Trigger> {
+  const res = await axios.post(`${automationsPath}/trigger`, trigger);
+  return res.data;
+}
+
+/**
+ * HTTP request to update an automation trigger
+ */
+export async function editTrigger(id: string, trigger: Trigger): Promise<Trigger> {
+  const res = await axios.put(`${automationsPath}/trigger/${id}`, trigger);
+  return res.data;
+}
+
+/**
+ * HTTP request to delete an automation trigger
+ */
+export function deleteTrigger(id: string): Promise<void> {
+  return axios.delete(`${automationsPath}/trigger/${id}`);
+}
+
+/**
+ * HTTP request to create a new automation
+ */
+export async function addAutomation(automation: AutomationDTO): Promise<Automation> {
+  const res = await axios.post(`${automationsPath}/automation`, automation);
+  return res.data;
+}
+
+/**
+ * HTTP request to update a automation
+ */
+export async function editAutomation(id: string, automation: Automation): Promise<Automation> {
+  const res = await axios.put(`${automationsPath}/automation/${id}`, automation);
+  return res.data;
+}
+
+/**
+ * HTTP request to delete a automation
+ */
+export function deleteAutomation(id: string): Promise<void> {
+  return axios.delete(`${automationsPath}/automation/${id}`);
+}
+
+/**
+ * HTTP request to test automation output
+ * The return is irrelevant as we care for the resolution of the promise
+ */
+export function testOutput(output: AutomationOutput): Promise<void> {
+  return axios.post(`${automationsPath}/test`, output);
+}

apps/client/src/common/api/axios.config.ts

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+axios.defaults.validateStatus = (status) => {
+  return (status >= 200 && status < 300) || status === 304;
+};

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

@@ -0,0 +1,29 @@
+import { serverURL } from '../../externals';
+
+// keys in tanstack store
+export const APP_INFO = ['appinfo'];
+export const APP_SETTINGS = ['appSettings'];
+export const APP_VERSION = ['appVersion'];
+export const AUTOMATION = ['automation'];
+export const CUSTOM_FIELDS = ['customFields'];
+export const PROJECT_DATA = ['project'];
+export const PROJECT_LIST = ['projectList'];
+export const PROJECT_RUNDOWNS = ['projectRundowns'];
+export const RUNDOWN = ['rundown'];
+export const RUNTIME = ['runtimeStore'];
+export const URL_PRESETS = ['urlpresets'];
+export const VIEW_SETTINGS = ['viewSettings'];
+export const CLIENT_LIST = ['clientList'];
+export const REPORT = ['report'];
+export const TRANSLATION = ['translation'];
+
+// API URLs
+export const apiEntryUrl = `${serverURL}/data`;
+
+const userAssetsPath = 'user';
+const cssOverridePath = 'styles/override.css';
+const customTranslationsPath = 'translations/translations.json';
+
+export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
+export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
+export const customTranslationsURL = `${serverURL}/${userAssetsPath}/${customTranslationsPath}`;

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

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

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

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

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

@@ -0,0 +1,50 @@
+import axios, { AxiosResponse } from 'axios';
+import { CustomFields, Rundown, RundownSummary } from 'ontime-types';
+import { ImportMap } from 'ontime-utils';
+
+import { apiEntryUrl } from './constants';
+import { downloadBlob } from './utils';
+
+const excelPath = `${apiEntryUrl}/excel`;
+
+/**
+ * upload Excel file to server
+ * @return string - file ID op the uploaded file
+ */
+export async function upload(file: File): Promise<string[]> {
+  const formData = new FormData();
+  formData.append('excel', file);
+  const response = await axios.post(`${excelPath}/upload`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+  return response.data;
+}
+
+type PreviewSpreadsheetResponse = {
+  rundown: Rundown;
+  customFields: CustomFields;
+  summary: RundownSummary;
+};
+export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
+  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
+    options,
+  });
+  return response.data;
+}
+
+/**
+ * Downloads a xlsx representation of the rundown from the server
+ */
+export async function downloadAsExcel(rundownId: string, fileName?: string) {
+  try {
+    const response = await axios.get(`${excelPath}/${rundownId}/export`, {
+      responseType: 'blob',
+    });
+
+    downloadBlob(response.data, `${fileName ?? 'Ontime_rundown'}.xlsx`);
+  } catch (error) {
+    console.error('Error downloading file:', error);
+  }
+}

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

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

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

@@ -0,0 +1,36 @@
+import axios, { AxiosResponse } from 'axios';
+import { ProjectData, ProjectLogoResponse } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const projectPath = `${apiEntryUrl}/project`;
+
+/**
+ * HTTP request to fetch project data
+ */
+export async function getProjectData(): Promise<ProjectData> {
+  const res = await axios.get(projectPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to mutate project data
+ */
+export async function postProjectData(data: ProjectData): Promise<AxiosResponse<ProjectData>> {
+  return axios.post(projectPath, data);
+}
+
+/**
+ * HTTP request to upload a project logo
+ */
+export async function uploadProjectLogo(file: File): Promise<AxiosResponse<ProjectLogoResponse>> {
+  const formData = new FormData();
+  formData.append('image', file);
+  const response = await axios.post(`${projectPath}/upload`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return response;
+}

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

@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { OntimeReport } from 'ontime-types';
+
+import { ontimeQueryClient } from '../../common/queryClient';
+
+import { apiEntryUrl, REPORT } from './constants';
+
+export const reportUrl = `${apiEntryUrl}/report`;
+
+/**
+ * HTTP request to fetch all reports
+ */
+export async function fetchReport(): Promise<OntimeReport> {
+  const res = await axios.get(reportUrl);
+  return res.data;
+}
+
+export async function deleteReport(id: string) {
+  await axios.delete(`${reportUrl}/${id}`);
+  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
+}
+
+export async function deleteAllReport() {
+  await axios.delete(`${reportUrl}/all`);
+  await ontimeQueryClient.invalidateQueries({ queryKey: REPORT });
+}

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

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

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

@@ -0,0 +1,22 @@
+import axios from 'axios';
+import { GetInfo, LinkOptions } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const sessionPath = `${apiEntryUrl}/session`;
+
+/**
+ * HTTP request to retrieve application info
+ */
+export async function getInfo(): Promise<GetInfo> {
+  const res = await axios.get(`${sessionPath}/info`);
+  return res.data;
+}
+
+/**
+ * HTTP request to get a pre-authenticated URL
+ */
+export async function generateUrl(options: LinkOptions & { baseUrl: string; path: string }): Promise<string> {
+  const res = await axios.post(`${sessionPath}/url`, options);
+  return res.data.url;
+}

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

@@ -0,0 +1,28 @@
+import axios, { AxiosResponse } from 'axios';
+import { Settings } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const settingsPath = `${apiEntryUrl}/settings`;
+
+/**
+ * HTTP request to retrieve application settings
+ */
+export async function getSettings(): Promise<Settings> {
+  const res = await axios.get(settingsPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to mutate application settings
+ */
+export async function postSettings(data: Settings): Promise<AxiosResponse<Settings>> {
+  return axios.post(settingsPath, data);
+}
+
+/**
+ * Allows setting the welcome modal dialog state from the clients
+ */
+export async function postShowWelcomeDialog(show: boolean) {
+  axios.post(`${settingsPath}/welcomedialog`, { show });
+}

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

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

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

@@ -0,0 +1,35 @@
+import axios from 'axios';
+import { URLPreset } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const urlPresetsPath = `${apiEntryUrl}/url-presets`;
+
+/**
+ * HTTP request to retrieve all presets
+ */
+export async function getUrlPresets(): Promise<URLPreset[]> {
+  const res = await axios.get(urlPresetsPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to add a preset
+ */
+export async function postUrlPreset(data: URLPreset): Promise<URLPreset[]> {
+  return (await axios.post(urlPresetsPath, data)).data;
+}
+
+/**
+ * HTTP request to edit a preset
+ */
+export async function putUrlPreset(alias: string, data: URLPreset): Promise<URLPreset[]> {
+  return (await axios.put(`${urlPresetsPath}/${alias}`, data)).data;
+}
+
+/**
+ * HTTP request to delete a preset
+ */
+export async function deleteUrlPreset(alias: string): Promise<URLPreset[]> {
+  return (await axios.delete(`${urlPresetsPath}/${alias}`)).data;
+}

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

@@ -0,0 +1,99 @@
+import axios, { AxiosError } from 'axios';
+import { LogLevel } from 'ontime-types';
+import { generateId, millisToString } from 'ontime-utils';
+
+import { ontimeQueryClient } from '../queryClient';
+import { addLog } from '../stores/logger';
+import { nowInMillis } from '../utils/time';
+
+/**
+ * Utility unwrap a potential axios error
+ * @param error
+ * @returns
+ */
+export function maybeAxiosError(error: unknown) {
+  if (axios.isAxiosError(error)) {
+    const statusText = (error as AxiosError).response?.statusText ?? '';
+    let data = (error as AxiosError).response?.data ?? '';
+    if (typeof data === 'object') {
+      if ('message' in data) {
+        data = JSON.stringify(data.message);
+      } else {
+        data = JSON.stringify(data);
+      }
+    }
+    return `${statusText}: ${data}`;
+  } else if (error instanceof Error) {
+    return error.message;
+  } else {
+    if (typeof error !== 'string') {
+      return JSON.stringify(error);
+    }
+    return error;
+  }
+}
+
+/**
+ * Utility unwrap a an instance of Error
+ */
+export function unwrapError(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  } else {
+    if (typeof error !== 'string') {
+      return JSON.stringify(error);
+    }
+    return error;
+  }
+}
+
+/**
+ * Utility unwraps a potential axios error and sends to logger
+ * @param prepend
+ * @param error
+ */
+export function logAxiosError(prepend: string, error: unknown) {
+  const message = `${prepend}: ${maybeAxiosError(error)}`;
+
+  addLog({
+    id: generateId(),
+    origin: 'SERVER',
+    time: millisToString(nowInMillis()),
+    level: LogLevel.Error,
+    text: message,
+  });
+}
+
+/**
+ * Utility function invalidates react-query caches
+ */
+export async function invalidateAllCaches() {
+  await ontimeQueryClient.invalidateQueries();
+}
+
+/**
+ * Creates blob from content
+ * @param fileContent
+ * @param type
+ * @returns
+ */
+export function createBlob(fileContent: string, type: string): Blob {
+  return new Blob([fileContent], { type });
+}
+
+/**
+ * downloads a blob
+ * @param downloadUrl
+ * @param fileName
+ */
+export function downloadBlob(blob: Blob, fileName: string) {
+  const downloadUrl = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.setAttribute('href', downloadUrl);
+  link.setAttribute('download', fileName);
+  document.body.appendChild(link);
+  link.click();
+
+  // Clean up the URL.createObjectURL to release resources
+  URL.revokeObjectURL(downloadUrl);
+}

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

@@ -0,0 +1,24 @@
+import axios from 'axios';
+import type { ViewSettings } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+
+const viewSettingsPath = `${apiEntryUrl}/view-settings`;
+
+/**
+ * HTTP request to fetch view settings
+ * @returns
+ */
+export async function getViewSettings(): Promise<ViewSettings> {
+  const res = await axios.get(viewSettingsPath);
+  return res.data;
+}
+
+/**
+ * HTTP request to update view settings
+ * needs to update entire objects, not just a patch
+ */
+export async function postViewSettings(data: ViewSettings): Promise<ViewSettings> {
+  const res = await axios.post(viewSettingsPath, data);
+  return res.data;
+}

apps/client/src/common/components/buttons/BaseButtonStyles.module.scss

@@ -0,0 +1,140 @@
+.subtle {
+  background: $gray-1050;
+  color: $blue-400;
+  line-height: 1em;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}
+
+.subtle-white {
+  background: $gray-1050;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    background: $gray-1050;
+  }
+}
+
+.primary {
+  background: $blue-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $blue-600;
+  }
+
+  &:active:not(:disabled) {
+    background: $blue-800;
+    border-color: $blue-900;
+  }
+
+  &:disabled {
+    opacity: $viewer-opacity-disabled;
+  }
+}
+
+.destructive {
+  background: $red-700;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $red-600;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $red-800;
+    border-color: $red-900;
+  }
+}
+
+.subtle-destructive {
+  background: $gray-1050;
+  color: $red-400;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $red-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+}
+
+.ghosted {
+  background: transparent;
+  color: $blue-500;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    opacity: $opacity-disabled;
+  }
+}
+
+.ghosted-white {
+  background: transparent;
+  color: $ui-white;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $ui-white;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    opacity: $opacity-disabled;
+  }
+}
+
+
+.ghosted-destructive {
+  background: transparent;
+  color: $red-500;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $red-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    opacity: $opacity-disabled;
+  }
+}

apps/client/src/common/components/buttons/Button.module.scss

@@ -0,0 +1,84 @@
+@use '@/theme/viewerDefs' as *;
+@import './BaseButtonStyles.module.scss';
+
+.baseButton {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+
+  width: fit-content;
+  padding-inline: 1em;
+  white-space: nowrap;
+
+  border: 1px solid transparent;
+  border-radius: $component-border-radius-md;
+
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+
+  &.loading {
+    cursor: wait;
+    .content {
+      opacity: 0;
+    }
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: inherit;
+}
+
+.loadingOverlay {
+  position: absolute;
+  display: grid;
+  place-content: center;
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+  stroke-dasharray: 8;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.small {
+  height: 1.5rem;
+  font-size: calc(1rem - 3px);
+}
+
+.medium {
+  height: 2rem;
+  font-size: calc(1rem - 2px);
+}
+
+.large {
+  height: 2.5rem;
+  font-weight: 600;
+}
+
+.xlarge {
+  height: 3rem;
+  font-weight: 600;
+}
+
+.fluid {
+  width: 100%;
+}
+

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

@@ -0,0 +1,53 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { IoEllipseOutline } from 'react-icons/io5';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './Button.module.scss';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'subtle'
+    | 'subtle-white'
+    | 'destructive'
+    | 'subtle-destructive'
+    | 'ghosted'
+    | 'ghosted-white'
+    | 'ghosted-destructive';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  fluid?: boolean;
+  loading?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, children, variant = 'subtle', size = 'medium', fluid, loading, ...buttonProps }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cx([
+          style.baseButton,
+          style[variant],
+          style[size],
+          fluid && style.fluid,
+          loading && style.loading,
+          className,
+        ])}
+        type='button'
+        disabled={loading || buttonProps.disabled}
+        {...buttonProps}
+      >
+        <span className={style.content}>{children}</span>
+        {loading && (
+          <div className={style.loadingOverlay}>
+            <IoEllipseOutline className={style.spinner} />
+          </div>
+        )}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export default Button;

apps/client/src/common/components/buttons/IconButton.module.scss

@@ -0,0 +1,44 @@
+@use '@/theme/viewerDefs' as *;
+@import './BaseButtonStyles.module.scss';
+
+.baseIconButton {
+  aspect-ratio: 1;
+  display: grid;
+  place-content: center;
+
+  border: 1px solid transparent;
+  border-radius: $component-border-radius-md;
+
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.small {
+  height: 1.5rem;
+  font-size: calc(1rem - 3px);
+}
+
+.medium {
+  height: 2rem;
+  width: 2rem;
+}
+
+.large {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.xlarge {
+  height: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+}

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

@@ -0,0 +1,37 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './IconButton.module.scss';
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'primary'
+    | 'subtle'
+    | 'subtle-white'
+    | 'destructive'
+    | 'subtle-destructive'
+    | 'ghosted'
+    | 'ghosted-white'
+    | 'ghosted-destructive';
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+}
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ className, children, variant = 'subtle', size = 'medium', ...buttonProps }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cx([style.baseIconButton, style[variant], style[size], className])}
+        type='button'
+        {...buttonProps}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;

apps/client/src/common/components/checkbox/Checkbox.module.scss

@@ -0,0 +1,50 @@
+.checkbox {
+  box-sizing: border-box;
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: $component-border-radius-sm;
+
+  &[data-unchecked] {
+    background-color: $gray-1100;
+
+    &:hover:not(:disabled) {
+      background: $gray-1000;
+    }
+    &:active:not(:disabled) {
+      background: $gray-1200;
+    }
+  }
+
+  &[data-checked] {
+    background-color: $blue-500;
+
+    &:hover:not(:disabled) {
+      background: $blue-400;
+    }
+    &:active:not(:disabled) {
+      background: $blue-600;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $blue-500;
+    outline-offset: 2px;
+  }
+}
+
+.indicator {
+  display: flex;
+  color: $ui-white;
+
+  &[data-unchecked] {
+    display: none;
+  }
+}

apps/client/src/common/components/checkbox/Checkbox.tsx

@@ -0,0 +1,14 @@
+import { IoCheckmark } from 'react-icons/io5';
+import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+
+import style from './Checkbox.module.scss';
+
+export default function Checkbox(checkboxProps: BaseCheckbox.Root.Props) {
+  return (
+    <BaseCheckbox.Root className={style.checkbox} {...checkboxProps}>
+      <BaseCheckbox.Indicator className={style.indicator}>
+        <IoCheckmark className={style.icon} />
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  );
+}

apps/client/src/common/components/client-modal/RedirectClientModal.module.scss

@@ -0,0 +1,24 @@
+.textEntry {
+  grid-area: input;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: $label-gray;
+}
+
+.inlineEntry {
+  display: grid;
+  grid-template-areas:
+    'label label'
+    'input btn';
+  grid-template-columns: 1fr auto;
+  column-gap: 0.5rem;
+}
+
+.redirect {
+  grid-area: btn;
+}
+
+.label {
+  color: $label-gray;
+}

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

@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import { IoArrowForward } from 'react-icons/io5';
+
+import { navigatorConstants } from '../../../viewerConfig';
+import { setClientRemote } from '../../hooks/useSocket';
+import useUrlPresets from '../../hooks-query/useUrlPresets';
+import Button from '../buttons/Button';
+import Info from '../info/Info';
+import Input from '../input/input/Input';
+import AppLink from '../link/app-link/AppLink';
+import Modal from '../modal/Modal';
+import Select from '../select/Select';
+
+import style from './RedirectClientModal.module.scss';
+
+interface RedirectClientModalProps {
+  id: string;
+  name: string;
+  currentPath: string;
+  origin: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onClose }: RedirectClientModalProps) {
+  const { data } = useUrlPresets();
+  const [path, setPath] = useState(currentPath);
+  const [selected, setSelected] = useState('/');
+
+  const { setRedirect } = setClientRemote;
+
+  const handleRedirect = (newPath: string) => {
+    if (newPath === '/' || newPath === currentPath) {
+      return;
+    }
+
+    if (newPath.startsWith('preset-')) {
+      setRedirect({ target: id, redirect: newPath.slice(7) });
+    } else {
+      setRedirect({ target: id, redirect: newPath });
+    }
+
+    onClose();
+  };
+
+  const enabledPresets = data.filter((preset) => preset.enabled);
+
+  const viewOptions = [
+    ...navigatorConstants.map((view) => ({
+      value: `/${view.url}`,
+      label: view.label,
+    })),
+    ...enabledPresets.map((preset) => ({
+      value: `preset-${preset.alias}`,
+      label: `URL Preset: ${preset.alias}`,
+    })),
+  ];
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      showCloseButton
+      showBackdrop
+      title={`Redirect: ${name}`}
+      bodyElements={
+        <>
+          <Info>
+            Remotely redirect the client to a different URL. <br />
+            Either by entering a custom path or selecting a URL Preset.
+            <br />
+            <br />
+            <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
+          </Info>
+          <div className={style.inlineEntry}>
+            <span className={style.label}>Enter custom path</span>
+            <label className={style.textEntry}>
+              {origin}
+              <Input placeholder='eg. /timer' fluid value={path} onChange={(event) => setPath(event.target.value)} />
+            </label>
+            <Button
+              variant='primary'
+              aria-label='Redirect'
+              disabled={path === currentPath || path === ''}
+              className={style.redirect}
+              onClick={() => handleRedirect(path)}
+            >
+              Redirect
+              <IoArrowForward />
+            </Button>
+          </div>
+          <div>
+            <span className={style.label}>Select View or URL Preset</span>
+            <div className={style.inlineEntry}>
+              <label className={style.textEntry}>
+                {origin}
+                <Select
+                  fluid
+                  options={viewOptions}
+                  defaultValue={viewOptions[0].value}
+                  onValueChange={(value) => setSelected(value)}
+                  disabled={enabledPresets.length === 0}
+                />
+              </label>
+              <Button
+                variant='primary'
+                aria-label='Redirect to preset'
+                className={style.redirect}
+                disabled={enabledPresets.length === 0 || selected === '/'}
+                onClick={() => handleRedirect(selected)}
+              >
+                Redirect <IoArrowForward />
+              </Button>
+            </div>
+          </div>
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+import Button from '../../../common/components/buttons/Button';
+import { setClientRemote } from '../../hooks/useSocket';
+import Dialog from '../dialog/Dialog';
+import Input from '../input/input/Input';
+
+interface RenameClientModalProps {
+  id: string;
+  name?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function RenameClientModal({ id, name: currentName = '', isOpen, onClose }: RenameClientModalProps) {
+  const [name, setName] = useState(currentName);
+
+  const { setClientName } = setClientRemote;
+
+  const handleRename = () => {
+    if (name !== currentName && name !== '') {
+      setClientName({ target: id, rename: name });
+    }
+    onClose();
+  };
+
+  const canSubmit = name !== currentName && name !== '';
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      title={`Rename Client: ${currentName}`}
+      showCloseButton
+      onClose={onClose}
+      bodyElements={
+        <Input height='large' placeholder='New name' value={name} onChange={(event) => setName(event.target.value)} />
+      }
+      footerElements={
+        <>
+          <Button variant='subtle' size='large' onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant='primary' size='large' onClick={handleRename} disabled={!canSubmit}>
+            Submit
+          </Button>
+        </>
+      }
+    />
+  );
+}

apps/client/src/common/components/copy-tag/CopyTag.module.scss

@@ -0,0 +1,40 @@
+.copytag {
+  display: flex;
+  align-items: center;
+}
+
+.action {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.label {
+  border-radius: 3px 0 0 3px;
+  border: 1px solid $gray-1200;
+  background-color: $white-3;
+  padding-inline: 0.5rem 1rem;
+  line-height: 1em;
+  display: flex;
+  align-items: center;
+  color: $label-gray;
+}
+
+.small {
+  height: 1.5rem;
+  font-size: calc(1rem - 3px);
+}
+
+.medium {
+  height: 2rem;
+  font-size: calc(1rem - 2px);
+}
+
+.large {
+  height: 2.5rem;
+  font-weight: 600;
+}
+
+.copy {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

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

@@ -0,0 +1,53 @@
+import { PropsWithChildren, useRef, useState } from 'react';
+import { IoCheckmark, IoCopy } from 'react-icons/io5';
+
+import copyToClipboard from '../../utils/copyToClipboard';
+import { cx } from '../../utils/styleUtils';
+import Button from '../buttons/Button';
+import IconButton from '../buttons/IconButton';
+
+import style from './CopyTag.module.scss';
+
+interface CopyTagProps {
+  copyValue: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  size?: 'small' | 'medium' | 'large';
+}
+
+export default function CopyTag({
+  copyValue,
+  disabled,
+  size = 'medium',
+  children,
+  onClick,
+}: PropsWithChildren<CopyTagProps>) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleClick = () => {
+    copyToClipboard(copyValue);
+    setCopied(true);
+
+    // reset copied state
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={style.copytag}>
+      {onClick !== undefined ? (
+        <Button className={style.action} size={size} onClick={onClick} disabled={disabled}>
+          {children}
+        </Button>
+      ) : (
+        <div className={cx([style.label, style[size]])}>{children}</div>
+      )}
+      <IconButton className={style.copy} variant='primary' size={size} onClick={handleClick} disabled={disabled}>
+        {copied ? <IoCheckmark /> : <IoCopy />}
+      </IconButton>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+.delaySymbol {
+  svg {
+    display: inline;
+    vertical-align: middle;
+    font-size: 1.5rem;
+    color: $ontime-delay;
+    margin: 0 auto;
+  }
+}

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

@@ -0,0 +1,29 @@
+import { IoChevronDown, IoChevronUp } from 'react-icons/io5';
+
+import { millisToDelayString } from '../../utils/dateConfig';
+import Tooltip from '../tooltip/Tooltip';
+
+import style from './DelayIndicator.module.scss';
+
+interface DelayIndicatorProps {
+  delayValue?: number;
+  tooltipPrefix?: string;
+}
+
+export default function DelayIndicator(props: DelayIndicatorProps) {
+  const { delayValue, tooltipPrefix } = props;
+
+  if (typeof delayValue !== 'number' || delayValue === 0) {
+    return null;
+  }
+
+  const delayString = tooltipPrefix
+    ? `${tooltipPrefix} ${millisToDelayString(delayValue)}`
+    : millisToDelayString(delayValue);
+
+  return (
+    <Tooltip text={delayString} render={<span />} className={style.delaySymbol}>
+      {delayValue < 0 ? <IoChevronDown /> : <IoChevronUp />}
+    </Tooltip>
+  );
+}

apps/client/src/common/components/dialog/Dialog.module.scss

@@ -0,0 +1,56 @@
+.dialog {
+  position: fixed;
+  top: 10%;
+  left: 50%;
+
+  transform: translateX(-50%);
+
+  padding-inline: 1rem;
+  min-width: min(420px, 90vw);
+
+  background-color: $gray-1250;
+  color: $ui-white;
+  border-radius: 3px;
+  box-shadow: $box-shadow-l1;
+  border: 1px solid $gray-1100;
+  outline: none;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: $backdrop-color;
+  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.title {
+  font-size: 1rem;
+  font-weight: 600;
+  padding-block: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  max-height: min(80vh, 600px);
+  overflow-y: auto;
+}
+
+.footer {
+  padding-block: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  gap: 1rem;
+}

apps/client/src/common/components/dialog/Dialog.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import { IoClose } from 'react-icons/io5';
+import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+
+import IconButton from '../buttons/IconButton';
+
+import style from './Dialog.module.scss';
+
+interface DialogProps {
+  isOpen: boolean;
+  title: string;
+  showCloseButton?: boolean;
+  showBackdrop?: boolean;
+  bodyElements: ReactNode;
+  footerElements: ReactNode;
+  onClose: () => void;
+}
+
+export default function Dialog({
+  isOpen,
+  title,
+  showCloseButton,
+  showBackdrop,
+  bodyElements,
+  footerElements,
+  onClose,
+}: DialogProps) {
+  return (
+    <BaseDialog.Root
+      open={isOpen}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) onClose();
+      }}
+    >
+      <BaseDialog.Portal>
+        {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
+        <BaseDialog.Popup className={style.dialog}>
+          <div className={style.title}>
+            {title}
+            {showCloseButton && (
+              <IconButton variant='subtle-white' onClick={onClose}>
+                <IoClose />
+              </IconButton>
+            )}
+          </div>
+          <div className={style.body}>{bodyElements}</div>
+          <div className={style.footer}>{footerElements}</div>
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  );
+}

apps/client/src/common/components/dropdown-menu/DropdownMenu.module.scss

@@ -0,0 +1,76 @@
+.positioner {
+  outline: 0;
+}
+
+.popup {
+  box-sizing: border-box;
+  padding-block: 0.25rem;
+
+  color: $ui-white;
+  background-color: $gray-1250;
+  font-size: calc(1rem - 2px);
+
+  border-radius: 3px;
+  border: 1px solid $gray-1000;
+  box-shadow: $box-shadow-l1;
+  outline: none;
+
+  transform-origin: var(--transform-origin);
+  transition:
+    transform 150ms,
+    opacity 150ms;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+.item {
+  outline: 0;
+  cursor: default;
+  padding-block: 0.5rem;
+  padding-inline: 1rem 2rem;
+
+  display: flex;
+  gap: 0.5rem;
+  line-height: 1em;
+
+  svg {
+    color: $gray-500;
+  }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  &[data-highlighted] {
+    z-index: 0;
+    position: relative;
+  }
+
+  &[data-highlighted]:not([data-disabled])::before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0.25rem;
+    border-radius: 3px;
+    background-color: $gray-1000;
+  }
+
+  &[data-type='destructive'] {
+    color: $red-500;
+    svg {
+      color: $red-500;
+    }
+  }
+}
+
+.separator {
+  margin: 0.25rem 0.75rem;
+  height: 1px;
+  background-color: $white-7;
+}

apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx

@@ -0,0 +1,82 @@
+import { PropsWithChildren } from 'react';
+import { IconType } from 'react-icons';
+import { Menu as BaseMenu } from '@base-ui-components/react/menu';
+
+import style from './DropdownMenu.module.scss';
+
+type DropdownMenuItemDivider = { type: 'divider' };
+type DropdownMenuItem = {
+  type: 'item' | 'destructive';
+  label: string;
+  icon?: IconType;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+export type DropdownMenuOption = DropdownMenuItemDivider | DropdownMenuItem;
+
+interface DropdownMenuProps extends BaseMenu.Trigger.Props {
+  items: DropdownMenuOption[];
+}
+
+export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChildren<DropdownMenuProps>) {
+  return (
+    <BaseMenu.Root>
+      <BaseMenu.Trigger {...triggerProps}>{children}</BaseMenu.Trigger>
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner className={style.positioner} align='start' sideOffset={8}>
+          <BaseMenu.Popup className={style.popup}>
+            {items.map((item, index) => {
+              if (item.type === 'divider') {
+                return <BaseMenu.Separator key={index} className={style.separator} />;
+              }
+              return (
+                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled} data-type={item.type}>
+                  {item.icon && <item.icon />}
+                  {item.label}
+                </BaseMenu.Item>
+              );
+            })}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.Root>
+  );
+}
+
+interface PositionedDropdownMenuProps {
+  items: Array<DropdownMenuItemDivider | DropdownMenuItem>;
+  isOpen: boolean;
+  onClose: () => void;
+  position: { x: number; y: number };
+}
+
+export function PositionedDropdownMenu({ items, isOpen, position, onClose }: PositionedDropdownMenuProps) {
+  return (
+    <BaseMenu.Root
+      open={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <BaseMenu.Trigger style={{ position: 'fixed', left: position.x, top: position.y }} aria-hidden />
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner className={style.positioner} align='start' sideOffset={8} alignOffset={8}>
+          <BaseMenu.Popup className={style.popup}>
+            {items.map((item, index) => {
+              if (item.type === 'divider') {
+                return <BaseMenu.Separator key={index} className={style.separator} />;
+              }
+              return (
+                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
+                  {item.icon && <item.icon />}
+                  {item.label}
+                </BaseMenu.Item>
+              );
+            })}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.Root>
+  );
+}

apps/client/src/common/components/editor-utils/EditorUtils.module.scss

@@ -0,0 +1,61 @@
+.arrow {
+  transform: rotate(45deg);
+}
+.corner {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  cursor: pointer;
+  color: $ui-white;
+  transition-property: color;
+  transition-duration: $transition-time-action;
+  border-radius: $component-border-radius-full;
+
+  // similar styles to ontime-button-subtle
+  background-color: $gray-1050;
+  outline: 2px solid $gray-1050;
+
+  &:hover {
+    color: $ontime-color;
+    background-color: $gray-1000;
+    outline: 2px solid $gray-1000;
+  }
+}
+
+.offsetCorner {
+  right: 2rem;
+}
+
+.header {
+  font-size: 1.5rem;
+}
+
+.title {
+  font-size: 1rem;
+  color: $title-gray;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.label {
+  display: block;
+  font-size: $aux-text-size;
+  color: $label-gray;
+  margin-bottom: $element-inner-spacing;
+  max-width: max-content; // prevent label from taking entire row
+}
+
+.separator {
+  background-color: $border-color-ondark;
+
+  &.horizontal {
+    width: 100%;
+    height: 1px;
+  }
+
+  &.vertical {
+    width: 1px;
+    height: 0.75em;
+  }
+}

apps/client/src/common/components/editor-utils/EditorUtils.tsx

@@ -0,0 +1,57 @@
+import type { HTMLAttributes, JSX, LabelHTMLAttributes, MouseEventHandler } from 'react';
+import { IconBaseProps } from 'react-icons';
+import { IoArrowUp } from 'react-icons/io5';
+import { TbPictureInPictureOff } from 'react-icons/tb';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './EditorUtils.module.scss';
+
+export function CornerExtract({ className, ...elementProps }: IconBaseProps) {
+  return <IoArrowUp className={cx([style.corner, style.arrow, className])} {...elementProps} />;
+}
+
+export function CornerPipButton({ className, ...elementProps }: IconBaseProps) {
+  return <TbPictureInPictureOff className={cx([style.corner, style.offsetCorner, className])} {...elementProps} />;
+}
+
+interface ExtractAndPip extends IconBaseProps {
+  onExtractClick: MouseEventHandler<SVGElement>;
+  pipElement: JSX.Element;
+}
+
+export function CornerWithPip({ className, pipElement, onExtractClick }: ExtractAndPip) {
+  return (
+    <>
+      <IoArrowUp className={cx([style.corner, style.arrow, className])} onClick={onExtractClick} />
+      {/* the pip element returns the icon button */}
+      {pipElement}
+    </>
+  );
+}
+
+export function Title({ children, className, ...elementProps }: HTMLAttributes<HTMLHeadingElement>) {
+  const classes = cx([style.title, className]);
+  return (
+    <h3 className={classes} {...elementProps}>
+      {children}
+    </h3>
+  );
+}
+
+export function Label({ children, className, ...elementProps }: LabelHTMLAttributes<HTMLLabelElement>) {
+  const classes = cx([style.label, className]);
+  return (
+    <label className={classes} {...elementProps}>
+      {children}
+    </label>
+  );
+}
+
+interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export function Separator({ className, orientation = 'vertical', ...elementProps }: SeparatorProps) {
+  return <div className={cx([style.separator, style[orientation], className])} role='separator' {...elementProps} />;
+}

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

@@ -1,11 +1,14 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
-import { LoggingContext } from '../../../app/context/LoggingContext';
+// skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
+import * as Sentry from '@sentry/react';
+
+import { hasConnected, reconnectAttempts } from '../../../common/utils/socket';
+import { runtimeStore } from '../../stores/runtime';
+
 import style from './ErrorBoundary.module.scss';
-const appVersion = require('../../../../package.json').version;
 
 class ErrorBoundary extends React.Component {
-  static contextType = LoggingContext;
   reportContent = '';
 
   constructor(props) {
@@ -20,39 +23,45 @@ class ErrorBoundary extends React.Component {
 
   componentDidCatch(error, info) {
     this.setState({
-      error: error,
+      error,
       errorInfo: info,
     });
-    try {
-      this.context.emitError(error.toString());
-    } catch {
-      console.log('Unable to emit error')
-    }
     this.reportContent = `${error} ${info.componentStack}`;
+
+    const appState = runtimeStore.getState();
+    if (appState.ping < 0) {
+      return;
+    }
+
+    Sentry.withScope((scope) => {
+      scope.setExtras({
+        error,
+        store: appState,
+        hasSocket: { hasConnected, reconnectAttempts },
+      });
+      const eventId = Sentry.captureException(error);
+      this.setState({ eventId, info });
+    });
   }
 
   render() {
     if (this.state.errorMessage) {
       return (
-        <div className={style.errorContainer}>
+        <div className={style.errorContainer} data-testid='error-container'>
           <div>
-            <p className={style.error}>:/</p>
-            <p>Something went wrong</p>
-            <p
+            <p className={style.error}>: /</p>
+            <p>Something went wrong.</p>
+            <a
               className={style.report}
-              onClick={() => {
-                if (navigator.clipboard) {
-                  const copyContent = `ontime version ${appVersion} \n ${this.reportContent}`;
-                  navigator.clipboard.writeText(copyContent);
-                }
-              }}
+              href={`mailto:mail@getontime.no?subject=Error%20Report&body=${encodeURIComponent(this.reportContent)}`}
             >
-              Copy error
-            </p>
-            <p
+              Report error
+            </a>
+            <div
+              role='button'
               className={style.report}
               onClick={() => {
-                if (window.process.type === 'renderer') {
+                if (window?.process?.type === 'renderer') {
                   window.ipcRenderer.send('reload');
                 } else {
                   window.location.reload();
@@ -60,7 +69,7 @@ class ErrorBoundary extends React.Component {
               }}
             >
               Reload interface
-            </p>
+            </div>
           </div>
         </div>
       );

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

@@ -0,0 +1,23 @@
+.errorContainer {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+  background-color: $ui-black;
+  color: $ui-white;
+}
+
+.error {
+  color: $error-red;
+}
+
+.report {
+  color: $blue-500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+
+  &:hover {
+    color: $ontime-color;
+  }
+}

apps/client/src/common/components/fit-text/FitText.tsx

@@ -0,0 +1,68 @@
+/**
+ * Copied from
+ * https://github.com/namhong2001/react-textfit/blob/master/index.tsx
+ */
+
+import { HTMLAttributes, PropsWithChildren, useCallback, useEffect, useRef } from 'react';
+
+import { bsearch } from './fitText.utils';
+
+interface FitTextProps extends HTMLAttributes<HTMLDivElement> {
+  mode?: 'single' | 'multi';
+  min?: number; // inclusive
+  max?: number; // inclusive
+}
+
+export function FitText({
+  children,
+  mode = 'multi',
+  min = 16,
+  max = 256,
+  ...elementProps
+}: PropsWithChildren<FitTextProps>) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const isOverflown = useCallback(() => {
+    const el = ref.current;
+    if (!el) return false;
+    return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+  }, []);
+
+  const setFontSize = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const originVisibility = el.style.visibility;
+
+    el.style.visibility = 'hidden';
+    const fontSize = bsearch(min, max + 1, (mid) => {
+      el.style.fontSize = `${mid}px`;
+      return !isOverflown();
+    });
+    el.style.fontSize = `${fontSize}px`;
+    el.style.visibility = originVisibility;
+  }, [isOverflown, min, max]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    setFontSize();
+    const observer = new ResizeObserver(setFontSize);
+    observer.observe(el);
+
+    return () => observer.disconnect();
+  }, [children, mode, setFontSize]);
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        whiteSpace: mode === 'single' ? 'nowrap' : 'normal',
+      }}
+      {...elementProps}
+    >
+      {children}
+    </div>
+  );
+}

apps/client/src/common/components/fit-text/fitText.utils.ts

@@ -0,0 +1,18 @@
+/**
+ * @param low inclusive, must be true on predicate function
+ * @param high exclusive,
+ * @param predicate predicate function
+ */
+export const bsearch = (low: number, high: number, predicate: (mid: number) => boolean): number => {
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+    if (mid === low) break;
+
+    if (predicate(mid)) {
+      low = mid;
+    } else {
+      high = mid;
+    }
+  }
+  return low;
+};

apps/client/src/common/components/icons/RotatedLink.tsx

@@ -0,0 +1,6 @@
+import { IconBaseProps } from 'react-icons';
+import { IoLink } from 'react-icons/io5';
+
+export default function RotatedLink(linkProps: IconBaseProps) {
+  return <IoLink style={{ transform: 'rotate(-45deg)' }} {...linkProps} />;
+}

apps/client/src/common/components/identify-overlay/IdentifyOverlay.module.scss

@@ -0,0 +1,33 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
+  box-sizing: border-box;
+
+  border: 10px solid $ui-white;
+  background-color: $ui-black;
+
+  color: $ui-white;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  cursor: pointer;
+}
+
+.name {
+  font-weight: 600;
+  margin-top: -10vh;
+  line-height: 1em;
+  font-size: 12vw;
+  text-transform: uppercase;
+}
+
+.message {
+  color: $label-gray;
+  line-height: 2em;
+  font-size: 3vw;
+}

apps/client/src/common/components/identify-overlay/IdentifyOverlay.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
+
+import { setClientRemote } from '../../hooks/useSocket';
+import { useClientStore } from '../../stores/clientStore';
+
+import style from './IdentifyOverlay.module.scss';
+
+export default function IdentifyOverlay() {
+  const clients = useClientStore((store) => store.clients);
+  const id = useClientStore((store) => store.id);
+  const showOverlay = clients[id]?.identify;
+
+  if (!showOverlay) {
+    return null;
+  }
+
+  const portalRoot = document.getElementById('identify-portal');
+
+  if (!portalRoot) {
+    return null;
+  }
+  return createPortal(<Overlay />, portalRoot);
+}
+
+function Overlay() {
+  const clients = useClientStore((store) => store.clients);
+  const id = useClientStore((store) => store.id);
+  const name = useClientStore((store) => store.name);
+
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const { setIdentify } = setClientRemote;
+  const showOverlay = clients[id]?.identify;
+
+  const handleClose = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    setIdentify({ target: id, identify: false });
+  }, [id, setIdentify]);
+
+  // start a timer that will close the overlay after some time
+  useEffect(() => {
+    if (showOverlay) {
+      timerRef.current = setTimeout(handleClose, MILLIS_PER_MINUTE);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [showOverlay, id, setIdentify, handleClose]);
+
+  return (
+    <div className={style.overlay} data-testid='identify-overlay' onClick={handleClose}>
+      <div className={style.name}>{name}</div>
+      <div className={style.message}>Click to close</div>
+    </div>
+  );
+}

apps/client/src/common/components/info/Info.module.scss

@@ -0,0 +1,35 @@
+.infoLabel {
+  display: flex;
+  align-items: center;
+  gap: $element-spacing;
+
+  background-color: $gray-1200;
+  border-radius: 3px;
+  font-size: $text-body-size;
+  padding: 1rem;
+  color: $gray-200;
+
+  svg {
+    min-width: 1.5rem;
+    align-self: start;
+    font-size: 1.5rem;
+  }
+}
+
+.info {
+  svg {
+    color: $info-blue;
+  }
+}
+
+.warning {
+  svg {
+    color: $orange-500;
+  }
+}
+
+.error {
+  svg {
+    color: $red-500;
+  }
+}