test level db

- rename dissolve > ungroup
- prevent ondrag when clicking
- add untitled as block title fallback
- move block action to context menu

.dockerignore

@@ -16,7 +16,7 @@
 
 # Ignore build folders
 node_modules
-**/node_modules
+dist
 
 # Ignore default volumes created by running docker compose up
 ontime-db

.eslintignore

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

.eslintrc

@@ -8,7 +8,7 @@
     "jest": true
   },
   "parser": "@typescript-eslint/parser",
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier", "eslint-config-prettier"],
   "plugins": ["@typescript-eslint", "prettier"],
   "overrides": [
     {

.github/workflows/build.yml

@@ -2,7 +2,7 @@ name: Ontime build
 
 on:
   push:
-    tags: ['*']
+    tags: [ "*" ]
   workflow_dispatch:
 
 jobs:
@@ -11,20 +11,15 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
 
       - 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
+        uses: pnpm/action-setup@v3
         with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -35,7 +30,7 @@ jobs:
         run: pnpm build
 
       - name: Electron - Build app
-        env:
+        env: 
           APPLE_ID: ${{ secrets.APPLEID }}
           APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLEIDPASS }}
           APPLE_TEAM_ID: ${{ secrets.TEAMID }}
@@ -58,9 +53,15 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
+        with:
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -85,9 +86,15 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v3
+        with:
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/build_cli.yml

@@ -14,24 +14,19 @@ jobs:
     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
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
 
       - 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
+        uses: pnpm/action-setup@v3
         with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -43,19 +38,16 @@ jobs:
 
       - 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:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_CONFIG_PROVENANCE: true
         working-directory: ./apps/cli

.github/workflows/build_docker.yml

@@ -6,63 +6,43 @@ on:
   workflow_dispatch:
 
 jobs:
+
   publish_docker:
     runs-on: ubuntu-latest
     env:
       CI: ''
 
     steps:
-      - uses: actions/checkout@v4
+    - uses: actions/checkout@v4
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+    - name: Docker Login
+      uses: docker/login-action@v2.1.0
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Get pnpm store directory
-        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+    - name: Docker Setup Buildx
+      uses: docker/setup-buildx-action@v2.5.0
 
-      - 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: 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: Install dependencies
-        run: pnpm install --frozen-lockfile
+    - 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
 
-      - 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_resolver.yml

@@ -1,48 +0,0 @@
-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/test.yml

@@ -14,35 +14,55 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
 
       - 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
+        uses: pnpm/action-setup@v3
         with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          version: 9
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      # Run code quality
-      - name: Run linter
-        run: pnpm lint
+      # Run code quality per package
+      - name: React - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/client
 
-      - name: Run TypeScript checks
-        run: pnpm typecheck
+      - name: Server - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./apps/server
+
+      - name: Utils - Run linter +  TypeScript checks
+        if: always()
+        run: pnpm lint && tsc --noEmit
+        working-directory: ./packages/utils
+
+      - name: Types - Run linter
+        if: always()
+        run: pnpm lint
+        working-directory: ./packages/types
 
       # We choose to run tests separately
-      - name: Run unit tests
+      - name: React - Run unit tests
         if: always()
-        run: pnpm test
+        run: pnpm test:pipeline
+        working-directory: ./apps/client
+
+      - name: Server - Run unit tests
+        if: always()
+        run: pnpm test:pipeline
+        working-directory: ./apps/server
+
+      - name: Utils - Run unit tests
+        if: always()
+        run: pnpm test:pipeline
+        working-directory: ./packages/utils
 
   e2e-test:
     runs-on: ubuntu-latest
@@ -50,36 +70,21 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
 
       - 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
+        uses: pnpm/action-setup@v3
         with:
-          path: ${{ env.PNPM_STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
+          version: 9
 
       - 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: Build client
+        run: pnpm build:local
 
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps

.gitignore

@@ -34,10 +34,6 @@ e2e/tests/fixtures/tmp/*
 build/
 dist/
 
-# bundled assets
-translations.json
-override.css
-
 # working stuff
 **/TODO.md
 

.nvmrc

@@ -1 +1 @@
-v22.15.1
+v20.15.1

.prettierignore

@@ -5,10 +5,6 @@ node_modules
 
 playwright-report
 
-
-pnpm-lock.yaml
 **/*.toml
-**/*.json
-!tsconfig.common.json
-!turbo.json
-!package.json
+**/*.yml
+**/*.json

DEVELOPMENT.md

@@ -9,8 +9,8 @@ Ontime consists of 3 distinct parts
 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)
+- __node__ (~20)
+- __pnpm__ (~9)
 - __docker__ (only necessary to run and build docker images)
 
 ## LOCAL DEVELOPMENT
@@ -20,21 +20,19 @@ 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
 
+- __Install the project dependencies__ by running `pnpm i`
+- __Run dev mode__ by running `turbo dev`
 
 ### 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.
+To debug backend code in Node.js:
 
-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`.
+- Open two separate terminals and navigate to the `apps/client` and `apps/server` directories.
+- In each terminal, run the command `pnpm dev` to start the development servers for both the client and server
+  applications.
+- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by
+  running `pnpm dev:inspect`.
 
 ## TESTING
 
@@ -47,7 +45,7 @@ Generally we have 2 types of 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.
+You can run unit tests by running turbo `turbo test:pipeline` from the project root.
 This will run all tests and close test runner.
 
 Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode
@@ -67,7 +65,7 @@ start the webserver with `pnpm dev:server`
 
 Some other useful commands
 
-- `pnpm e2e:ui` open playwright UI
+- `pnpm e2e --ui` open playwright UI
 - `pnpm e2e --headed` run tests with a visible browser window
 
 ## CREATE AN INSTALLABLE FILE (Windows | MacOS | Linux)
@@ -78,11 +76,14 @@ 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`
+- __Build the UI and server__ by running `turbo build:electron`
+- __Create the package__ by running `turbo dist-win`, `turbo dist-mac` or `turbo dist-linux`
 
 The build distribution assets will be at `.apps/electron/dist`
 
+Note: The MacOS build will only work in CI, locally it will fail due to notarisation issues.
+Use the `turbo dist-mac:local` command to build a MacOS distribution locally.
+
 ## DOCKER
 
 Ontime provides a docker-compose file to aid with building and running docker images.
@@ -98,15 +99,9 @@ Other useful commands
 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`
 
-## CONTRIBUTION GUIDELINES
+## General Info
 
-If you want to propose changes to the codebase, please reach out before opening a Pull Request.
+# APP Building
 
-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
+We build the app from app.js for almost all applications. The output file will still be named index.cjs. This is because of Electron.
+Building the app from index.ts only applies for applications that don't use electron. index.ts will take over the initialization of the server and UI when electron isn't present.

Dockerfile

@@ -1,30 +1,37 @@
-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
+FROM node:20-bullseye AS builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN npm install -g pnpm@9.5.0
+COPY . /app
+WORKDIR /app
+RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils install --config.dedupe-peer-dependents=false --frozen-lockfile
+RUN pnpm --filter=ontime-ui --filter=ontime-server run build:docker
+
+FROM node:20-alpine
+
+# Set environment variables
+# Environment Variable to signal that we are running production
+ENV NODE_ENV=docker
+# Ontime Data path
+ENV ONTIME_DATA=/data/
+
+WORKDIR /app/
+
+# Prepare UI
+COPY --from=builder /app/apps/client/build ./client/
+
+# Prepare Backend
+COPY --from=builder /app/apps/server/dist/ ./server/
+COPY --from=builder /app/apps/server/src/external/ ./external/
+COPY --from=builder /app/apps/server/src/user/ ./user/
+COPY --from=builder /app/apps/server/src/html/ ./html/
+
+# Export default ports
+EXPOSE 4001/tcp 8888/udp 9999/udp
+
+CMD ["node", "server/docker.cjs"]
+
+# Build and run commands
+# !!! Note that this command needs pre-build versions of the UI and server apps
+# docker buildx build . -t getontime/ontime
+# docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime

README.md

@@ -26,6 +26,8 @@ We do our best to have most topics covered by the documentation. However, if you
 Let us know!
 Ontime improves from the collaboration with its users. We would like to understand how you use Ontime and appreciate your feedback.
 
+We would also like to include a testimonials section in our ✨new website✨. It would be great to showcase the diversity of users running Ontime.
+
 # Ontime
 
 Ontime is a browser-based application that manages event rundowns, scheduling, and cueing.
@@ -41,12 +43,12 @@ Ontime is made by entertainment and broadcast engineers and used by
 - 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)
+- [x] **Multiplatform**: Available for Windows / MacOS, Linux. You can also self host with the docker image
+- [x] **In any device**: Ontime is available in the local network to any device with a browser, eg: tablets, mobile phones, laptops, signage, media servers...
+- [x] **Made for teams**: Ontime caters to different roles in your production team: directors, operators, backstage and front of house signage...
+- [x] **Delay workflows**: Manage and communicate runtime delays in real-time to your team
+- [x] **Automatable**: Ontime can be fully or partially controlled by an operator, or run standalone with the system clock
+- [x] **Focus on 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 ...
 
@@ -77,29 +79,84 @@ Ontime is made by video engineers and entertainment technicians.
 
 ## Using Ontime
 
-### Getting started
+Ontime can be started by downloading the latest release for your platform. \
+Alternatively you can also use the docker image, available at [Docker Hub](https://hub.docker.com/r/getontime/ontime)
 
-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.
+Once installed and running, any device in the network has access to Ontime.
 
-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)
+Ontime provides different screens which allow for different types of interactions with the data. These are called
+views. \
+Each view in Ontime focuses on empowering a specific role or achieving a particular task.
 
-Once installed and running, any device that shares the same network as Ontime will have access to Ontime.
+You can access the different views by reaching the ontime server, in your browser, at (_default port
+4001_) `http://localhost:4001` or `http://192.168.1.3:4001`
+
+```
+For the backstage views
+-------------------------------------------------------------
+IP.ADDRESS:4001/timer      > Presenter / Stage timer view
+IP.ADDRESS:4001/minimal    > Simple timer view
+IP.ADDRESS:4001/clock      > Simple clock view
+IP.ADDRESS:4001/backstage  > Stage Manager / Backstage view
+IP.ADDRESS:4001/countdown  > Countdown to anything
+IP.ADDRESS:4001/studio     > Studio Clock
+IP.ADDRESS:4001/timeline   > Timeline
+```
+
+```
+For the public views
+-------------------------------------------------------------
+IP.ADDRESS:4001/public     > Public / Foyer view
+IP.ADDRESS:4001/lower      > Lower Thirds
+```
+
+```
+For production views
+-------------------------------------------------------------
+IP.ADDRESS:4001/editor    > the control interface, same as the app
+IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
+IP.ADDRESS:4001/operator  > automated views for operators
+```
 
 More information is available [in our docs](https://docs.getontime.no)
 
-## Continued development
+## Roadmap
+
+### Continued development
 
 Ontime is under active development. We continue adding and improving features in collaboration with users.
 
 Have an idea? Reach out via [email](mail@getontime.no)
 or [open an issue](https://github.com/cpvalente/ontime/issues/new)
 
-## Issues
+### Issues
 
 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).
 
+#### Unsigned App
+
+When installing the app you would see warning screens from the Operating System like:
+
+in Windows
+
+`Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.`
+
+or in Linux
+
+`Could Not Display "ontime-linux.AppImage`
+
+We currently only sign MacOS releases. \
+Purchasing the certificates for both Mac and Windows would mean a recurrent expense which we are not able to cover.
+
+You can circumvent this by allowing the execution of the app manually.
+
+- In Windows: click `more` -> `Run Anyway`
+- In Linux: right-click the AppImage file: `Properties` -> `Permissions` -> `Allow Executing File as a Program`
+
+If you have tips on how to improve this or would like to sponsor the code signing,
+please [open an issue](https://github.com/cpvalente/ontime/issues/new)
+
 ## Contributing
 
 Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
@@ -111,7 +168,6 @@ Information about the project setup can be found in the [development documentati
 ## 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)
 
 ## License

apps/cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@getontime/cli",
-    "version": "4.2.0",
+    "version": "3.15.2",
     "author": "Carlos Valente",
     "description": "Time keeping for live events",
     "repository": "https://github.com/cpvalente/ontime",

apps/client/.eslintrc

@@ -15,12 +15,10 @@
   ],
   "plugins": [
     "react",
-    "react-compiler",
     "simple-import-sort",
     "@tanstack/query"
   ],
   "rules": {
-    "react-compiler/react-compiler": "warn",
     "react/jsx-no-bind": [
       "error",
       {

apps/client/index.html

@@ -13,6 +13,12 @@
     <link rel="manifest" href="/manifest.json" />
     <meta name="robots" content="noindex" />
     <title>ontime</title>
+    <style>
+      body,
+      html {
+        background-color: rgba(0, 0, 0, 0) !important;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

apps/client/package.json

@@ -1,48 +1,54 @@
 {
   "name": "ontime-ui",
-  "version": "4.2.0",
+  "version": "3.15.2",
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.4",
+    "@chakra-ui/react": "^2.7.0",
     "@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",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@fontsource/open-sans": "^5.0.28",
+    "@mantine/hooks": "^7.17.2",
+    "@sentry/react": "^8.43.0",
     "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.85.9",
-    "@tanstack/react-query-devtools": "^5.85.9",
+    "@tanstack/react-query": "^5.62.7",
+    "@tanstack/react-query-devtools": "^5.62.7",
     "@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",
+    "axios": "^1.9.0",
+    "color": "^4.2.3",
+    "csv-stringify": "^6.4.5",
+    "framer-motion": "^10.10.0",
+    "prismjs": "^1.29.0",
+    "react": "^18.3.1",
     "react-colorful": "^5.6.1",
-    "react-dom": "^19.1.1",
+    "react-dom": "^18.3.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-hook-form": "^7.53.1",
+    "react-icons": "5.4.0",
+    "react-qr-code": "^2.0.12",
+    "react-router-dom": "^6.3.0",
     "react-simple-code-editor": "^0.14.1",
-    "react-virtuoso": "^4.14.0",
-    "web-vitals": "^5.1.0",
-    "zustand": "^5.0.8"
+    "web-vitals": "^3.1.1",
+    "zustand": "^5.0.3"
   },
   "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",
+    "build:local": "cross-env NODE_ENV=local vite build",
+    "build:electron": "cross-env NODE_ENV=local vite build",
+    "build:docker": "cross-env VITE_IS_DOCKER=true vite build",
+    "build:localdocker": "cross-env NODE_ENV=local vite build",
+    "lint": "eslint . --quiet",
     "test": "vitest",
     "test:pipeline": "vitest run",
+    "cleanup": "rm -rf .turbo && rm -rf node_modules && rm -rf build",
     "analyse": "npx vite-bundle-visualizer"
   },
   "browserslist": {
@@ -60,29 +66,30 @@
   "devDependencies": {
     "@sentry/vite-plugin": "^2.16.1",
     "@tanstack/eslint-plugin-query": "^5.8.4",
+    "@types/color": "^3.0.3",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "catalog:",
     "@typescript-eslint/parser": "catalog:",
-    "@vitejs/plugin-react": "4.5.1",
+    "@vitejs/plugin-react": "^4.2.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-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
+    "happy-dom": "^16.7.2",
     "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",
+    "vite": "^5.2.11",
+    "vite-plugin-compression2": "^1.3.3",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.1",
     "vitest": "catalog:"
   }
 }

apps/client/src/App.tsx

@@ -1,5 +1,5 @@
-import { BrowserRouter } from 'react-router';
-import { Tooltip } from '@base-ui-components/react/tooltip';
+import { BrowserRouter } from 'react-router-dom';
+import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
@@ -8,7 +8,7 @@ import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverla
 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 theme from './theme/theme';
 import { TranslationProvider } from './translation/TranslationProvider';
 import AppRouter from './AppRouter';
 import { baseURI } from './externals';
@@ -17,15 +17,14 @@ connectSocket();
 
 function App() {
   return (
-    <QueryClientProvider client={ontimeQueryClient}>
-      <AppContextProvider>
-        <Tooltip.Provider>
+    <ChakraProvider disableGlobalStyle resetCSS theme={theme}>
+      <QueryClientProvider client={ontimeQueryClient}>
+        <AppContextProvider>
           <BrowserRouter basename={baseURI}>
             <div className='App'>
               <ErrorBoundary>
                 <TranslationProvider>
                   <IdentifyOverlay />
-                  <KeepAwake />
                   <AppRouter />
                 </TranslationProvider>
               </ErrorBoundary>
@@ -35,9 +34,9 @@ function App() {
               <div id='identify-portal' />
             </ErrorBoundary>
           </BrowserRouter>
-        </Tooltip.Provider>
-      </AppContextProvider>
-    </QueryClientProvider>
+        </AppContextProvider>
+      </QueryClientProvider>
+    </ChakraProvider>
   );
 }
 

apps/client/src/AppRouter.tsx

@@ -1,115 +1,175 @@
-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 React from 'react';
+import {
+  createRoutesFromChildren,
+  matchRoutes,
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+  useNavigationType,
+} from 'react-router-dom';
+import * as Sentry from '@sentry/react';
 
-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 withPreset from './features/PresetWrapper';
+import withData from './features/viewers/ViewWrapper';
 import ViewLoader from './views/ViewLoader';
-import { getIsNavigationLocked, sessionScope } from './externals';
-import { initializeSentry } from './sentry.config';
+import { ONTIME_VERSION } from './ONTIME_VERSION';
+import { sentryDsn, sentryRecommendedIgnore } 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 = React.lazy(() => import('./features/editors/ProtectedEditor'));
+const Cuesheet = React.lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
+const Operator = React.lazy(() => import('./features/operator/OperatorExport'));
 
-const Editor = lazy(() => import('./views/editor/ProtectedEditor'));
-const Cuesheet = lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
-const Operator = lazy(() => import('./features/operator/OperatorExport'));
+const TimerView = React.lazy(() => import('./views/timer/Timer'));
+const MinimalTimerView = React.lazy(() => import('./features/viewers/minimal-timer/MinimalTimer'));
+const ClockView = React.lazy(() => import('./features/viewers/clock/Clock'));
+const Countdown = React.lazy(() => import('./features/viewers/countdown/Countdown'));
 
-const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
-const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
-const TimerControl = lazy(() => import('./features/control/playback/TimerControlExport'));
-const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
+const Backstage = React.lazy(() => import('./views/backstage/Backstage'));
+const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
+const Public = React.lazy(() => import('./views/public/Public'));
+const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
+const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
+const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));
 
-// Initialize Sentry with our configuration
-const SentryRouter = initializeSentry();
+const STimer = withPreset(withData(TimerView));
+const SMinimalTimer = withPreset(withData(MinimalTimerView));
+const SClock = withPreset(withData(ClockView));
+const SCountdown = withPreset(withData(Countdown));
+const SBackstage = withPreset(withData(Backstage));
+const SProjectInfo = withPreset(withData(ProjectInfo));
+const SPublic = withPreset(withData(Public));
+const SLowerThird = withPreset(withData(Lower));
+const SStudio = withPreset(withData(StudioClock));
+const STimeline = withPreset(withData(Timeline));
+const PCuesheet = withPreset(Cuesheet);
+const POperator = withPreset(Operator);
+
+const EditorFeatureWrapper = React.lazy(() => import('./features/EditorFeatureWrapper'));
+const RundownPanel = React.lazy(() => import('./features/rundown/RundownExport'));
+const TimerControl = React.lazy(() => import('./features/control/playback/TimerControlExport'));
+const MessageControl = React.lazy(() => import('./features/control/message/MessageControlExport'));
+
+Sentry.init({
+  dsn: sentryDsn,
+  integrations: [
+    Sentry.reactRouterV6BrowserTracingIntegration({
+      useEffect: React.useEffect,
+      useLocation,
+      useNavigationType,
+      createRoutesFromChildren,
+      matchRoutes,
+    }),
+  ],
+  tracesSampleRate: 0.3,
+  release: ONTIME_VERSION,
+  enabled: import.meta.env.PROD,
+  ignoreErrors: [...sentryRecommendedIgnore, /Unable to preload CSS/i, /dynamically imported module/i],
+  denyUrls: [/extensions\//i, /^chrome:\/\//i, /^chrome-extension:\/\//i],
+});
+
+const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
 
 export default function AppRouter() {
   // handle client path changes
   useClientPath();
 
   return (
-    <Suspense fallback={<Loader />}>
-      <SentryRouter>
+    <React.Suspense fallback={null}>
+      <SentryRoutes>
         <Route path='/' element={<Navigate to='/timer' />} />
         <Route
-          path='timer'
+          path='/timer'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <Timer />
+              <STimer />
             </ViewLoader>
           }
         />
         <Route
-          path='countdown'
+          path='/public'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <Countdown />
+              <SPublic />
             </ViewLoader>
           }
         />
         <Route
-          path='backstage'
+          path='/minimal'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <Backstage />
+              <SMinimalTimer />
             </ViewLoader>
           }
         />
         <Route
-          path='studio'
+          path='/clock'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <StudioClock />
+              <SClock />
             </ViewLoader>
           }
         />
         <Route
-          path='timeline'
+          path='/countdown'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <Timeline />
+              <SCountdown />
             </ViewLoader>
           }
         />
         <Route
-          path='info'
+          path='/backstage'
           element={
             <ViewLoader>
-              <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />
-              <ProjectInfo />
+              <SBackstage />
             </ViewLoader>
           }
         />
+        <Route
+          path='/studio'
+          element={
+            <ViewLoader>
+              <SStudio />
+            </ViewLoader>
+          }
+        />
+        {/*/!* Lower third cannot have a loading screen *!/*/}
+        <Route path='/lower' element={<SLowerThird />} />
+        <Route
+          path='/timeline'
+          element={
+            <ViewLoader>
+              <STimeline />
+            </ViewLoader>
+          }
+        />
+        <Route
+          path='/info'
+          element={
+            <ViewLoader>
+              <SProjectInfo />
+            </ViewLoader>
+          }
+        />
+
         {/*/!* Protected Routes *!/*/}
-        <Route path='editor' element={<Editor />} />
-        <Route path='cuesheet' element={<Cuesheet />} />
+        <Route path='/editor' element={<Editor />} />
+        <Route path='/cuesheet' element={<PCuesheet />} />
         <Route
-          path='op'
+          path='/op'
           element={
             <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <Operator />
+              <POperator />
             </ViewLoader>
           }
         />
+
         {/*/!* Protected Routes - Elements *!/*/}
         <Route
-          path='rundown'
+          path='/rundown'
           element={
             <EditorFeatureWrapper>
               <RundownPanel />
@@ -117,7 +177,7 @@ export default function AppRouter() {
           }
         />
         <Route
-          path='timercontrol'
+          path='/timercontrol'
           element={
             <EditorFeatureWrapper>
               <TimerControl />
@@ -125,7 +185,7 @@ export default function AppRouter() {
           }
         />
         <Route
-          path='messagecontrol'
+          path='/messagecontrol'
           element={
             <EditorFeatureWrapper>
               <MessageControl />
@@ -133,119 +193,16 @@ export default function AppRouter() {
           }
         />
         <Route
-          path='log'
+          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 />
-    </>
+        {/*/!* Send to default if nothing found *!/*/}
+        <Route path='*' element={<STimer />} />
+      </SentryRoutes>
+    </React.Suspense>
   );
 }

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

@@ -1,9 +1,6 @@
 import axios from 'axios';
-import { TranslationObject } from 'ontime-types';
 
-import { ontimeQueryClient } from '../../common/queryClient';
-
-import { apiEntryUrl, customTranslationsURL, TRANSLATION } from './constants';
+import { apiEntryUrl } from './constants';
 
 const assetsPath = `${apiEntryUrl}/assets`;
 
@@ -31,21 +28,3 @@ 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/axios.config.ts

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

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

@@ -8,22 +8,18 @@ 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

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { CustomField, CustomFieldKey, CustomFields } from 'ontime-types';
+import { CustomField, CustomFieldLabel, CustomFields } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 
@@ -24,15 +24,15 @@ export async function postCustomField(newField: CustomField): Promise<CustomFiel
 /**
  * Edits single custom field
  */
-export async function editCustomField(key: CustomFieldKey, newField: CustomField): Promise<CustomFields> {
-  const res = await axios.put(`${customFieldsPath}/${key}`, { ...newField });
+export async function editCustomField(label: CustomFieldLabel, newField: CustomField): Promise<CustomFields> {
+  const res = await axios.put(`${customFieldsPath}/${label}`, { ...newField });
   return res.data;
 }
 
 /**
  * Deletes single custom field
  */
-export async function deleteCustomField(key: CustomFieldKey): Promise<CustomFields> {
-  const res = await axios.delete(`${customFieldsPath}/${key}`);
+export async function deleteCustomField(label: CustomFieldLabel): Promise<CustomFields> {
+  const res = await axios.delete(`${customFieldsPath}/${label}`);
   return res.data;
 }

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

@@ -1,6 +1,9 @@
 import axios, { AxiosResponse } from 'axios';
 import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';
 
+import { makeTable } from '../../views/cuesheet/cuesheet.utils';
+import { aggregateRundowns, makeCSVFromArrayOfArrays } from '../utils/csv';
+
 import { apiEntryUrl } from './constants';
 import { createBlob, downloadBlob } from './utils';
 
@@ -30,6 +33,27 @@ export async function downloadProject(fileName: string) {
   }
 }
 
+/**
+ * Request download of the current rundown as a CSV file
+ * @param fileName
+ */
+export async function downloadCSV(fileName: string = 'rundown') {
+  try {
+    const { data, name } = await fileDownload(fileName);
+    const { project, rundowns, customFields } = data;
+
+    const flatRundowns = aggregateRundowns(rundowns);
+    const sheetData = makeTable(project, flatRundowns, customFields);
+
+    const fileContent = makeCSVFromArrayOfArrays(sheetData);
+
+    const blob = createBlob(fileContent, 'text/csv;charset=utf-8;');
+    downloadBlob(blob, `${name}.csv`);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 /**
  * HTTP request to upload project file
  */

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

@@ -1,9 +1,8 @@
 import axios, { AxiosResponse } from 'axios';
-import { CustomFields, Rundown, RundownSummary } from 'ontime-types';
+import { CustomFields, Rundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
-import { downloadBlob } from './utils';
 
 const excelPath = `${apiEntryUrl}/excel`;
 
@@ -11,21 +10,28 @@ 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[]> {
+export async function upload(file: File) {
   const formData = new FormData();
   formData.append('excel', file);
-  const response = await axios.post(`${excelPath}/upload`, formData, {
+  await axios.post(`${excelPath}/upload`, formData, {
     headers: {
       'Content-Type': 'multipart/form-data',
     },
   });
+}
+
+/**
+ * Get Worksheet names
+ * @return string[] - array of available worksheets
+ */
+export async function getWorksheetNames(): Promise<string[]> {
+  const response: AxiosResponse<string[]> = await axios.get(`${excelPath}/worksheets`);
   return response.data;
 }
 
 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`, {
@@ -33,18 +39,3 @@ export async function importRundownPreview(options: ImportMap): Promise<PreviewS
   });
   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/rundown.ts

@@ -1,12 +1,17 @@
 import axios, { AxiosResponse } from 'axios';
-import { EntryId, OntimeEntry, OntimeEvent, ProjectRundownsList, Rundown, TransientEventPayload } from 'ontime-types';
+import {
+  EntryId,
+  MessageResponse,
+  OntimeEntry,
+  OntimeEvent,
+  ProjectRundownsList,
+  Rundown,
+  TransientEventPayload,
+} from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 
-type RundownId = string;
-const rundownPath = `${apiEntryUrl}/rundowns`;
-
-// #region operations on project rundowns =========================
+const rundownPath = `${apiEntryUrl}/rundown`;
 
 /**
  * HTTP request to fetch a list of existing rundowns
@@ -17,78 +22,37 @@ export async function fetchProjectRundownList(): Promise<ProjectRundownsList> {
 }
 
 /**
- * HTTP request to fetch all entries in the currently loaded rundown
+ * HTTP request to fetch all events
  */
 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);
+export async function postAddEntry(data: TransientEventPayload): Promise<AxiosResponse<OntimeEntry>> {
+  return axios.post(rundownPath, 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 async function putEditEntry(data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
+  return axios.put(rundownPath, data);
 }
 
-export type BatchEditEntry = {
+type BatchEditEntry = {
   data: Partial<OntimeEvent>;
-  ids: EntryId[];
+  ids: string[];
 };
 
 /**
  * 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 async function putBatchEditEvents(data: BatchEditEntry): Promise<AxiosResponse<MessageResponse>> {
+  return axios.put(`${rundownPath}/batch`, data);
 }
 
 export type ReorderEntry = {
@@ -100,57 +64,60 @@ export type ReorderEntry = {
 /**
  * HTTP request to reorder an entry
  */
-export async function patchReorderEntry(rundownId: RundownId, data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
-  return axios.patch(`${rundownPath}/${rundownId}/reorder`, data);
+export async function patchReorderEntry(data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
+  return axios.patch(`${rundownPath}/reorder`, data);
 }
 
+export type SwapEntry = {
+  from: string;
+  to: string;
+};
+
 /**
  * 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 });
+export async function requestEventSwap(data: SwapEntry): Promise<AxiosResponse<MessageResponse>> {
+  return axios.patch(`${rundownPath}/swap`, data);
 }
 
 /**
  * HTTP request to request application of delay
  */
-export async function requestApplyDelay(rundownId: RundownId, delayId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.patch(`${rundownPath}/${rundownId}/applydelay/${delayId}`);
+export async function requestApplyDelay(delayId: EntryId): Promise<AxiosResponse<MessageResponse>> {
+  return axios.patch(`${rundownPath}/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}`);
+export async function postCloneEntry(entryId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/clone/${entryId}`);
 }
 
 /**
- * HTTP request for grouping a list of entries into a group
+ * HTTP request for dissolving of a block
  */
-export async function requestGroupEntries(rundownId: RundownId, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/${rundownId}/group`, { ids: entryIds });
+export async function requestUngroup(blockId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/ungroup/${blockId}`);
 }
 
 /**
- * HTTP request for dissolving of a group
+ * HTTP request for grouping a list of entries into a block
  */
-export async function requestUngroup(rundownId: RundownId, groupId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/${rundownId}/ungroup/${groupId}`);
+export async function requestGroupEntries(entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/group`, { ids: entryIds });
 }
 
 /**
- * HTTP request to delete entries of a given rundown
+ * HTTP request to delete entries
  */
-export async function deleteEntries(rundownId: RundownId, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
-  return axios.delete(`${rundownPath}/${rundownId}/entries`, { data: { ids: entryIds } });
+export async function deleteEntries(entryIds: EntryId[]): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(rundownPath, { data: { ids: entryIds } });
 }
 
 /**
- * HTTP request to delete all entries of a given rundown
+ * HTTP request to delete all events
  */
-export async function requestDeleteAll(rundownId: RundownId): Promise<AxiosResponse<Rundown>> {
-  return axios.delete(`${rundownPath}/${rundownId}/all`);
+export async function requestDeleteAll(): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(`${rundownPath}/all`);
 }
-
-// #endregion operations on rundown entries =======================

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

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { GetInfo, LinkOptions } from 'ontime-types';
+import { GetInfo } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
 
@@ -16,7 +16,12 @@ export async function getInfo(): Promise<GetInfo> {
 /**
  * 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);
+export async function generateUrl(
+  baseUrl: string,
+  path: string,
+  lock: boolean,
+  authenticate: boolean,
+): Promise<string> {
+  const res = await axios.post(`${sessionPath}/url`, { baseUrl, path, lock, authenticate });
   return res.data.url;
 }

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

@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from 'axios';
-import { AuthenticationStatus, CustomFields, Rundown, RundownSummary } from 'ontime-types';
+import { AuthenticationStatus, CustomFields, Rundown } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
@@ -56,7 +56,6 @@ export const previewRundown = async (
 ): Promise<{
   rundown: Rundown;
   customFields: CustomFields;
-  summary: RundownSummary;
 }> => {
   const response = await axios.post(`${sheetsPath}/${sheetId}/read`, { options });
   return response.data;

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

@@ -6,7 +6,7 @@ import { apiEntryUrl } from './constants';
 const urlPresetsPath = `${apiEntryUrl}/url-presets`;
 
 /**
- * HTTP request to retrieve all presets
+ * HTTP request to retrieve aliases
  */
 export async function getUrlPresets(): Promise<URLPreset[]> {
   const res = await axios.get(urlPresetsPath);
@@ -14,22 +14,8 @@ export async function getUrlPresets(): Promise<URLPreset[]> {
 }
 
 /**
- * HTTP request to add a preset
+ * HTTP request to mutate aliases
  */
-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;
+export async function postUrlPresets(data: URLPreset[]): Promise<URLPreset[]> {
+  return axios.post(urlPresetsPath, data);
 }

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

@@ -33,20 +33,6 @@ export function maybeAxiosError(error: unknown) {
   }
 }
 
-/**
- * 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

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

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

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

@@ -1,140 +0,0 @@
-.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

@@ -1,84 +0,0 @@
-@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

@@ -1,53 +0,0 @@
-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

@@ -1,44 +1,26 @@
-@use '@/theme/viewerDefs' as *;
-@import './BaseButtonStyles.module.scss';
-
-.baseIconButton {
+.subtle {
   aspect-ratio: 1;
+  height: 2rem;
+  height: 2rem;
   display: grid;
   place-content: center;
 
+  background: $gray-1050;
+  color: $blue-400;
   border: 1px solid transparent;
-  border-radius: $component-border-radius-md;
+  border-radius: 3px;
 
-  cursor: pointer;
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $blue-500;
+  }
 
-  &:focus-visible {
-    outline: 2px solid $blue-500;
-    outline-offset: 2px;
+  &:active {
+    background: $gray-1100;
+    border-color: $gray-1250;
   }
 
   &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
+    background: $gray-1050;
   }
 }
-
-.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

@@ -1,37 +1,14 @@
-import { ButtonHTMLAttributes, forwardRef } from 'react';
+import { ButtonHTMLAttributes } 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';
+export default function IconButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { className, children, ...buttonProps } = props;
+  return (
+    <button className={cx([style.subtle, className])} {...buttonProps}>
+      {children}
+    </button>
+  );
 }
-
-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/buttons/TooltipActionBtn.tsx

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

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

@@ -1,50 +0,0 @@
-.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

@@ -1,14 +0,0 @@
-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.tsx

@@ -1,15 +1,22 @@
 import { useState } from 'react';
 import { IoArrowForward } from 'react-icons/io5';
+import {
+  IconButton,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+} from '@chakra-ui/react';
 
 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';
 
@@ -22,7 +29,8 @@ interface RedirectClientModalProps {
   onClose: () => void;
 }
 
-export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onClose }: RedirectClientModalProps) {
+export function RedirectClientModal(props: RedirectClientModalProps) {
+  const { id, isOpen, name, currentPath, origin, onClose } = props;
   const { data } = useUrlPresets();
   const [path, setPath] = useState(currentPath);
   const [selected, setSelected] = useState('/');
@@ -33,88 +41,86 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
     if (newPath === '/' || newPath === currentPath) {
       return;
     }
-
-    if (newPath.startsWith('preset-')) {
-      setRedirect({ target: id, redirect: newPath.slice(7) });
-    } else {
-      setRedirect({ target: id, redirect: newPath });
-    }
-
+    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={
-        <>
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent maxWidth='max(480px, 35vw)'>
+        <ModalHeader>Redirect: {name}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
           <Info>
             Remotely redirect the client to a different URL. <br />
-            Either by entering a custom path or selecting a URL Preset.
+            Either by selecting a URL Preset or entering a custom path.
             <br />
             <br />
-            <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
+            <AppLink search='settings=feature_settings__urlpresets'>Manage URL Presets</AppLink>
           </Info>
+          <div>
+            <span className={style.label}>Select View or URL Preset</span>
+            <div className={style.textEntry}>
+              <Select
+                size='md'
+                variant='ontime'
+                isDisabled={enabledPresets.length === 0}
+                onChange={(event) => setSelected(event.target.value)}
+              >
+                <option value='/'>Select view or preset</option>
+                {navigatorConstants.map((view) => {
+                  return (
+                    <option key={view.url} value={`/${view.url}`}>
+                      {view.label}
+                    </option>
+                  );
+                })}
+                {enabledPresets.map((preset) => {
+                  return (
+                    <option key={preset.pathAndParams} value={preset.pathAndParams}>
+                      {`Preset: ${preset.alias}`}
+                    </option>
+                  );
+                })}
+              </Select>
+              <IconButton
+                variant='ontime-filled'
+                size='md'
+                aria-label='Redirect to preset'
+                className={style.redirect}
+                icon={<IoArrowForward />}
+                isDisabled={enabledPresets.length === 0 || selected === '/'}
+                onClick={() => handleRedirect(selected)}
+              />
+            </div>
+          </div>
           <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)} />
+              <Input
+                variant='ontime-filled'
+                size='md'
+                placeholder='eg. /minimal?key=0000ffff'
+                value={path}
+                onChange={(event) => setPath(event.target.value)}
+              />
             </label>
-            <Button
-              variant='primary'
+            <IconButton
+              variant='ontime-filled'
+              size='md'
               aria-label='Redirect'
-              disabled={path === currentPath || path === ''}
+              isDisabled={path === currentPath || path === ''}
               className={style.redirect}
+              icon={<IoArrowForward />}
               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>
-        </>
-      }
-    />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
   );
 }

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

@@ -1,9 +1,17 @@
 import { useState } from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/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;
@@ -12,7 +20,8 @@ interface RenameClientModalProps {
   onClose: () => void;
 }
 
-export function RenameClientModal({ id, name: currentName = '', isOpen, onClose }: RenameClientModalProps) {
+export function RenameClientModal(props: RenameClientModalProps) {
+  const { id, name: currentName = '', isOpen, onClose } = props;
   const [name, setName] = useState(currentName);
 
   const { setClientName } = setClientRemote;
@@ -27,24 +36,29 @@ export function RenameClientModal({ id, name: currentName = '', isOpen, 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}>
+    <Modal isOpen={isOpen} onClose={onClose} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Rename: {currentName}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Input
+            variant='ontime-filled'
+            size='md'
+            placeholder='new name'
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button size='md' variant='ontime-subtle' onClick={onClose}>
             Cancel
           </Button>
-          <Button variant='primary' size='large' onClick={handleRename} disabled={!canSubmit}>
+          <Button size='md' variant='ontime-filled' onClick={handleRename} isDisabled={!canSubmit}>
             Submit
           </Button>
-        </>
-      }
-    />
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   );
 }

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { MenuDivider, MenuItem } from '@chakra-ui/react';
+
+import { OptionWithoutGroup } from './ContextMenu';
+
+export const ContextMenuOption = ({ label, onClick, isDisabled, icon: Icon, withDivider }: OptionWithoutGroup) => (
+  <>
+    {withDivider && <MenuDivider />}
+    <MenuItem icon={<Icon style={{ fontSize: '1rem' }} />} onClick={onClick} isDisabled={isDisabled}>
+      {label}
+    </MenuItem>
+  </>
+);

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

@@ -1,40 +0,0 @@
-.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

@@ -1,53 +1,47 @@
-import { PropsWithChildren, useRef, useState } from 'react';
-import { IoCheckmark, IoCopy } from 'react-icons/io5';
+import { PropsWithChildren, useState } from 'react';
+import { IoCheckmark } from 'react-icons/io5';
+import { IoCopy } from 'react-icons/io5';
+import { Button, ButtonGroup, IconButton, Tooltip } from '@chakra-ui/react';
 
+import { tooltipDelayFast } from '../../../ontimeConfig';
+import { Size } from '../../models/Util.type';
 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;
+  label: string;
+  size?: Size;
   disabled?: boolean;
   onClick?: () => void;
-  size?: 'small' | 'medium' | 'large';
 }
 
-export default function CopyTag({
-  copyValue,
-  disabled,
-  size = 'medium',
-  children,
-  onClick,
-}: PropsWithChildren<CopyTagProps>) {
+export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
+  const { copyValue, label, size = 'xs', disabled, children, onClick } = props;
   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);
+    setTimeout(() => setCopied(false), 1000);
   };
 
   return (
-    <div className={style.copytag}>
-      {onClick !== undefined ? (
-        <Button className={style.action} size={size} onClick={onClick} disabled={disabled}>
+    <Tooltip label={label} openDelay={tooltipDelayFast}>
+      <ButtonGroup size={size} isAttached>
+        <Button variant='ontime-subtle' tabIndex={-1} onClick={onClick} isDisabled={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>
+        <IconButton
+          aria-label={label}
+          icon={copied ? <IoCheckmark /> : <IoCopy />}
+          variant='ontime-filled'
+          tabIndex={-1}
+          onClick={handleClick}
+          isDisabled={disabled}
+        />
+      </ButtonGroup>
+    </Tooltip>
   );
 }

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

@@ -1,7 +1,5 @@
 .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

@@ -1,7 +1,8 @@
 import { IoChevronDown, IoChevronUp } from 'react-icons/io5';
+import { Tooltip } from '@chakra-ui/react';
 
+import { tooltipDelayFast } from '../../../ontimeConfig';
 import { millisToDelayString } from '../../utils/dateConfig';
-import Tooltip from '../tooltip/Tooltip';
 
 import style from './DelayIndicator.module.scss';
 
@@ -22,8 +23,8 @@ export default function DelayIndicator(props: DelayIndicatorProps) {
     : millisToDelayString(delayValue);
 
   return (
-    <Tooltip text={delayString} render={<span />} className={style.delaySymbol}>
-      {delayValue < 0 ? <IoChevronDown /> : <IoChevronUp />}
+    <Tooltip openDelay={tooltipDelayFast} label={delayString}>
+      <span className={style.delaySymbol}>{delayValue < 0 ? <IoChevronDown /> : <IoChevronUp />}</span>
     </Tooltip>
   );
 }

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

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

@@ -1,52 +0,0 @@
-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

@@ -1,76 +0,0 @@
-.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

@@ -1,82 +0,0 @@
-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.tsx

@@ -1,57 +0,0 @@
-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

@@ -49,14 +49,15 @@ class ErrorBoundary extends React.Component {
       return (
         <div className={style.errorContainer} data-testid='error-container'>
           <div>
-            <p className={style.error}>: /</p>
-            <p>Something went wrong.</p>
-            <a
+            <p className={style.error}>:/</p>
+            <p>Something went wrong</p>
+            <div
+              role='button'
               className={style.report}
-              href={`mailto:mail@getontime.no?subject=Error%20Report&body=${encodeURIComponent(this.reportContent)}`}
+              onClick={() => Sentry.showReportDialog({ eventId: this.state.eventId })}
             >
               Report error
-            </a>
+            </div>
             <div
               role='button'
               className={style.report}

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

@@ -3,21 +3,24 @@
   height: 100%;
   display: grid;
   place-content: center;
-  background-color: $ui-black;
-  color: $ui-white;
-}
+  background-color: #121212;
+  color: white;
 
-.error {
-  color: $error-red;
-}
+  .error {
+    color: $error-red;
+    font-weight: 600;
+  }
 
-.report {
-  color: $blue-500;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  cursor: pointer;
+  .report {
+    text-decoration: underline  $error-red;
+    cursor: pointer;
+  }
 
-  &:hover {
-    color: $ontime-color;
+  .report:hover {
+    color: $error-red;
+  }
+
+  .report:active {
+    color: white;
   }
 }

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

@@ -13,13 +13,8 @@ interface FitTextProps extends HTMLAttributes<HTMLDivElement> {
   max?: number; // inclusive
 }
 
-export function FitText({
-  children,
-  mode = 'multi',
-  min = 16,
-  max = 256,
-  ...elementProps
-}: PropsWithChildren<FitTextProps>) {
+export function FitText(props: PropsWithChildren<FitTextProps>) {
+  const { children, mode = 'multi', min = 16, max = 256, ...elementProps } = props;
   const ref = useRef<HTMLDivElement>(null);
 
   const isOverflown = useCallback(() => {

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

@@ -1,6 +0,0 @@
-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

@@ -15,6 +15,7 @@
   display: grid;
   place-content: center;
   text-align: center;
+  z-index: 100;
   cursor: pointer;
 }
 

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

@@ -7,29 +7,15 @@
   border-radius: 3px;
   font-size: $text-body-size;
   padding: 1rem;
-  color: $gray-200;
+
+  .content {
+    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;
-  }
-}

apps/client/src/common/components/info/Info.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { IoAlertCircle, IoWarning } from 'react-icons/io5';
+import { IoAlertCircle } from 'react-icons/io5';
 
 import { cx } from '../../utils/styleUtils';
 
@@ -7,15 +7,14 @@ import style from './Info.module.scss';
 
 interface InfoProps {
   className?: string;
-  type?: 'info' | 'warning' | 'error';
 }
 
-export default function Info({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
+export default function Info(props: PropsWithChildren<InfoProps>) {
+  const { className, children } = props;
+
   return (
-    <div className={cx([style.infoLabel, style[type], className])}>
-      {type === 'info' && <IoAlertCircle />}
-      {type === 'warning' && <IoWarning />}
-      {type === 'error' && <IoWarning />}
+    <div className={cx([style.infoLabel, className])}>
+      <IoAlertCircle />
       <div>{children}</div>
     </div>
   );

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

@@ -0,0 +1,28 @@
+import { RefObject, useEffect } from 'react';
+import { Textarea, TextareaProps } from '@chakra-ui/react';
+// @ts-expect-error no types from library
+import autosize from 'autosize/dist/autosize';
+
+export const AutoTextArea = (props: TextareaProps & { inputref: RefObject<unknown> }) => {
+  const { value, inputref } = props;
+
+  useEffect(() => {
+    const node = inputref.current;
+    autosize(inputref.current);
+    return () => {
+      autosize.destroy(node);
+    };
+  }, [inputref, value]);
+
+  return (
+    <Textarea
+      overflow='hidden'
+      w='100%'
+      ref={inputref}
+      resize='none'
+      transition='height none'
+      variant='ontime-transparent'
+      {...props}
+    />
+  );
+};

apps/client/src/common/components/input/auto-textarea/AutoTextarea.tsx

@@ -1,26 +0,0 @@
-import { RefObject, useEffect } from 'react';
-// @ts-expect-error no types from library
-import autosize from 'autosize/dist/autosize';
-
-import Textarea, { type TextareaProps } from '../textarea/Textarea';
-
-interface AutoTextAreaProps extends TextareaProps {
-  inputref: RefObject<HTMLTextAreaElement | null>;
-}
-
-/**
- * A textarea that automatically resizes based on its content
- */
-export function AutoTextarea({ value, inputref, ...textAreaProps }: AutoTextAreaProps) {
-  // when the value changes, we use the ref to reapply autosize
-  useEffect(() => {
-    const node = inputref.current;
-    autosize(inputref.current);
-
-    return () => {
-      autosize.destroy(node);
-    };
-  }, [inputref, value]);
-
-  return <Textarea ref={inputref} value={value} {...textAreaProps} />;
-}

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

@@ -1,4 +1,3 @@
-import { MouseEvent } from 'react';
 import { IoBan } from 'react-icons/io5';
 
 import { cx } from '../../../utils/styleUtils';
@@ -11,13 +10,12 @@ interface SwatchProps {
   isSelected?: boolean;
 }
 
-export default function Swatch({ color, isSelected, onClick }: SwatchProps) {
-  const handleClick = (event: MouseEvent) => {
-    onClick?.(color);
-    event.preventDefault();
-    event.stopPropagation();
-  };
+export default function Swatch(props: SwatchProps) {
+  const { color, isSelected, onClick } = props;
 
+  const handleClick = () => {
+    onClick?.(color);
+  };
   const classes = cx([style.swatch, isSelected && style.selected, onClick && style.selectable]);
 
   if (!color) {

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

@@ -1,8 +1,9 @@
+import { useCallback } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { IoEyedrop } from 'react-icons/io5';
-import { useDebouncedCallback } from '@mantine/hooks';
 import { ViewSettings } from 'ontime-types';
 
+import { debounce } from '../../../utils/debounce';
 import { cx, getAccessibleColour } from '../../../utils/styleUtils';
 import PopoverPicker from '../popover-picker/PopoverPicker';
 
@@ -18,9 +19,12 @@ interface SwatchPickerProps {
 export default function SwatchPicker(props: SwatchPickerProps) {
   const { color, onChange, isSelected, alwaysDisplayColor } = props;
 
-  const debouncedOnChange = useDebouncedCallback((newValue: string) => {
-    onChange(newValue);
-  }, 100);
+  const debouncedOnChange = useCallback(
+    debounce((newValue: string) => {
+      onChange(newValue);
+    }, 500),
+    [onChange],
+  );
 
   const displayColor = alwaysDisplayColor || isSelected ? color : '';
   const { color: iconColor } = getAccessibleColour(displayColor);

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

@@ -1,13 +1,12 @@
 .list {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
 .swatch {
   width: 2rem;
   height: 2rem;
-  aspect-ratio: 1;
   border-radius: 99px;
   border: 2px solid $gray-1200;
   color: $ui-white;

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

@@ -1,58 +0,0 @@
-.radioGroup {
-  color: $gray-900;
-  font-size: calc(1rem - 3px);
-  color: $label-gray;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  line-height: 1.2em;
-
-  &:has([data-checked]) {
-    color: $ui-white;
-  }
-}
-
-.radio {
-  box-sizing: border-box;
-  display: flex;
-  width: 0.75rem;
-  height: 0.75rem;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  outline: 0;
-  border: none;
-
-  &[data-unchecked] {
-    background-color: $gray-1200;
-  }
-
-  &[data-checked] {
-    background-color: $gray-700;
-  }
-
-  &:focus-visible {
-    outline: 2px solid $blue-500;
-    outline-offset: 2px;
-  }
-}
-
-.indicator {
-  display: grid;
-  place-content: center;
-
-  &[data-unchecked] {
-    display: none;
-  }
-
-  &::before {
-    content: '';
-    border-radius: 100%;
-    width: 0.5em;
-    height: 0.5em;
-    background-color: $ui-white;
-  }
-}

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

@@ -1,35 +0,0 @@
-import { Radio } from '@base-ui-components/react/radio';
-import { RadioGroup as BaseRadioGroup } from '@base-ui-components/react/radio-group';
-
-import style from './BlockRadio.module.scss';
-
-interface BlockRadioProps<T extends string | number | boolean> extends Omit<BaseRadioGroup.Props, 'onValueChange'> {
-  items: {
-    value: T;
-    label: string;
-  }[];
-  onValueChange?: (value: T) => void;
-}
-
-export default function BlockRadio<T extends string | number | boolean>({
-  items,
-  onValueChange,
-  ...elementProps
-}: BlockRadioProps<T>) {
-  return (
-    <BaseRadioGroup
-      onValueChange={(value) => onValueChange?.(value as T)}
-      className={style.radioGroup}
-      {...elementProps}
-    >
-      {items.map((item) => (
-        <label className={style.item} key={item.value.toString()}>
-          <Radio.Root value={item.value.toString()} className={style.radio}>
-            <Radio.Indicator className={style.indicator} />
-          </Radio.Root>
-          {item.label}
-        </label>
-      ))}
-    </BaseRadioGroup>
-  );
-}

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

@@ -1,12 +1,22 @@
+$input-font-size: 15px;
+
 .delayInput {
   display: flex;
   gap: $element-spacing;
   align-items: center;
+  font-size: $text-body-size;
+
+
+  .inputField {
+    font-size: $input-font-size;
+    letter-spacing: 1px;
+    max-width: 7em;
+    padding-left: 16px;
+    color: $ontime-delay-text
+  }
 }
 
-.inputField {
-  text-align: center;
-  letter-spacing: 1px;
-  max-width: 7em;
-  color: $ontime-delay-text
+.delayOptions {
+  display: flex;
+  flex-direction: column;
 }

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

@@ -1,10 +1,8 @@
 import { KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { Input, Radio, RadioGroup } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';
 
 import { useEntryActions } from '../../../hooks/useEntryAction';
-import Input from '../input/Input';
-
-import BlockRadio from './BlockRadio';
 
 import style from './DelayInput.module.scss';
 
@@ -20,7 +18,7 @@ export default function DelayInput(props: DelayInputProps) {
   const [value, setValue] = useState<string>('');
   const inputRef = useRef<HTMLInputElement | null>(null);
   // avoid wrong submit on cancel
-  const ignoreChangeRef = useRef(false);
+  let ignoreChange = false;
 
   // set internal value on duration change
   useEffect(() => {
@@ -35,8 +33,8 @@ export default function DelayInput(props: DelayInputProps) {
    * @param {string} newValue string to be parsed
    */
   const validateAndSubmit = (newValue: string) => {
-    if (ignoreChangeRef.current) {
-      ignoreChangeRef.current = false;
+    if (ignoreChange) {
+      ignoreChange = false;
       return;
     }
 
@@ -78,7 +76,7 @@ export default function DelayInput(props: DelayInputProps) {
     } else if (event.key === 'Tab') {
       validateAndSubmit((event.target as HTMLInputElement).value);
     } else if (event.key === 'Escape') {
-      ignoreChangeRef.current = true;
+      ignoreChange = true;
       setValue(millisToString(duration));
       inputRef.current?.blur();
     }
@@ -107,10 +105,13 @@ export default function DelayInput(props: DelayInputProps) {
   return (
     <div className={style.delayInput}>
       <Input
+        size='sm'
         ref={inputRef}
         data-testid='delay-input'
         className={style.inputField}
+        type='text'
         placeholder='-'
+        variant='ontime-filled'
         onFocus={handleFocus}
         onChange={(event) => setValue(event.target.value)}
         onBlur={(event) => validateAndSubmit(event.target.value)}
@@ -118,14 +119,16 @@ export default function DelayInput(props: DelayInputProps) {
         value={value}
         maxLength={9}
       />
-      <BlockRadio
-        onValueChange={handleSlipChange}
+      <RadioGroup
+        className={style.delayOptions}
+        onChange={handleSlipChange}
         value={checkedOption}
-        items={[
-          { value: 'add', label: 'Add time' },
-          { value: 'subtract', label: 'Subtract time' },
-        ]}
-      />
+        variant='ontime-block'
+        size='sm'
+      >
+        <Radio value='add'>Add time</Radio>
+        <Radio value='subtract'>Subtract time</Radio>
+      </RadioGroup>
     </div>
   );
 }

apps/client/src/common/components/input/input/Input.module.scss

@@ -1,57 +0,0 @@
-.input {
-  box-sizing: border-box;
-
-  font-size: 1rem;
-  font-weight: inherit;
-  color: $gray-200;
-  border-radius: $component-border-radius-md;
-  border: 1px solid transparent;
-
-  padding-inline: 0.5em;
-  outline: none;
-
-  &::placeholder {
-    color: $gray-600;
-    letter-spacing: 0;
-  }
-
-  &:hover:not(:disabled):not(:read-only) {
-    background-color: $gray-1100;
-  }
-
-  &:focus:not(:read-only) {
-    background-color: $gray-1000;
-    outline: 2px solid $blue-500;
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &:read-only::placeholder {
-    opacity: 0;
-  }
-}
-
-.subtle {
-  background-color: $gray-1200;
-}
-
-.ghosted {
-  background-color: transparent;
-  padding: 0;
-}
-
-.medium {
-  height: 2rem;
-}
-
-.large {
-  height: 2.5rem;
-}
-
-.fluid {
-  width: 100%;
-}

apps/client/src/common/components/input/input/Input.tsx

@@ -1,30 +0,0 @@
-import { forwardRef, InputHTMLAttributes } from 'react';
-
-import { cx } from '../../../utils/styleUtils';
-
-import style from './Input.module.scss';
-
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  variant?: 'subtle' | 'ghosted';
-  height?: 'medium' | 'large';
-  fluid?: boolean;
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { className, variant = 'subtle', height = 'medium', fluid, ...inputProps },
-  ref,
-) {
-  return (
-    <input
-      ref={ref}
-      type='text'
-      autoCorrect='off'
-      autoComplete='off'
-      spellCheck='false'
-      className={cx([style.input, style[variant], style[height], fluid && style.fluid, className])}
-      {...inputProps}
-    />
-  );
-});
-
-export default Input;

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

@@ -1,36 +1,20 @@
-// styles from Input.module.scss
 .input {
-  width: 100%;
-  margin-top: 0.25rem;
-  box-sizing: border-box;
-
-  font-size: 1rem;
-  font-weight: 400;
   color: $gray-200;
-  border-radius: $component-border-radius-md;
-  background-color: $gray-1200;
   border: 1px solid transparent;
-
+  border-radius: 0 0 8px 8px;
+  background-color: $gray-1200;
+  padding: 0 0.5rem;
+  font-size: 1rem;
   height: 2rem;
-  padding-inline: 0.5em;
   outline: none;
 
-  &:hover:not(:disabled) {
+  &:hover {
     background-color: $gray-1100;
   }
 
-  &:focus:not(:read-only) {
+  &:focus {
     background-color: $gray-1000;
+    color: $gray-50;
     border: 1px solid $blue-500;
   }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &::placeholder {
-    color: $gray-500;
-    letter-spacing: 0;
-  }
 }

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

@@ -1,8 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
-import { Popover } from '@base-ui-components/react/popover';
-
-import PopoverContents from '../../popover/Popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react';
 
 import style from './PopoverPicker.module.scss';
 
@@ -11,14 +9,15 @@ interface PopoverPickerProps {
   onChange: (color: string) => void;
 }
 
-export default function PopoverPicker({ color, onChange, children }: PropsWithChildren<PopoverPickerProps>) {
+export default function PopoverPicker(props: PropsWithChildren<PopoverPickerProps>) {
+  const { color, onChange, children } = props;
   return (
-    <Popover.Root>
-      <Popover.Trigger>{children}</Popover.Trigger>
-      <PopoverContents>
+    <Popover>
+      <PopoverTrigger>{children}</PopoverTrigger>
+      <PopoverContent className={style.small} style={{ borderRadius: '9px', width: 'auto' }}>
         <HexAlphaColorPicker color={color} onChange={onChange} />
         <HexColorInput color={color} onChange={onChange} className={style.input} prefixed />
-      </PopoverContents>
-    </Popover.Root>
+      </PopoverContent>
+    </Popover>
   );
 }

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
 import { getHotkeyHandler, HotkeyItem } from '@mantine/hooks';
 
 interface UseReactiveTextInputReturn {
@@ -11,7 +11,7 @@ interface UseReactiveTextInputReturn {
 export default function useReactiveTextInput(
   initialText: string,
   submitCallback: (newValue: string) => void,
-  ref: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,
+  ref: RefObject<HTMLInputElement>,
   options?: {
     submitOnEnter?: boolean;
     submitOnCtrlEnter?: boolean;
@@ -21,8 +21,6 @@ export default function useReactiveTextInput(
   },
 ): UseReactiveTextInputReturn {
   const [text, setText] = useState<string>(initialText);
-  // track whether we are submitting via a submit key (eg enter) and avoid submitting again on blur
-  const isKeyboardSubmitting = useRef(false);
 
   useEffect(() => {
     if (typeof initialText === 'undefined') {
@@ -101,31 +99,11 @@ export default function useReactiveTextInput(
     ];
 
     if (options?.submitOnEnter) {
-      hotKeys.push([
-        'Enter',
-        () => {
-          isKeyboardSubmitting.current = true;
-          handleSubmit(text);
-          // clear flag after blur has been processed
-          setTimeout(() => {
-            isKeyboardSubmitting.current = false;
-          }, 0);
-        },
-      ]);
+      hotKeys.push(['Enter', () => handleSubmit(text)]);
     }
 
     if (options?.submitOnCtrlEnter) {
-      hotKeys.push([
-        'mod + Enter',
-        () => {
-          isKeyboardSubmitting.current = true;
-          handleSubmit(text);
-          // clear flag after blur has been processed
-          setTimeout(() => {
-            isKeyboardSubmitting.current = false;
-          }, 0);
-        },
-      ]);
+      hotKeys.push(['mod + Enter', () => handleSubmit(text)]);
     }
 
     const hotKeyHandler = getHotkeyHandler(hotKeys);
@@ -148,11 +126,7 @@ export default function useReactiveTextInput(
   return {
     value: text,
     onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
-    onBlur: (event: ChangeEvent) => {
-      if (!isKeyboardSubmitting.current) {
-        handleSubmit((event.target as HTMLInputElement).value);
-      }
-    },
+    onBlur: (event: ChangeEvent) => handleSubmit((event.target as HTMLInputElement).value),
     onKeyDown: keyHandler,
   };
 }

apps/client/src/common/components/input/textarea/Textarea.module.scss

@@ -1,52 +0,0 @@
-.textarea {
-  box-sizing: border-box;
-  min-height: 2rem;
-
-  display: block;
-  font-size: 1rem;
-  font-weight: inherit;
-  color: $gray-200;
-  border-radius: $component-border-radius-md;
-  border: 1px solid transparent;
-
-  outline: none;
-
-  &::placeholder {
-    color: $gray-500;
-    letter-spacing: 0;
-  }
-
-  &:hover:not(:disabled) {
-    background-color: $gray-1100;
-  }
-
-  &:focus:not(:read-only) {
-    background-color: $gray-1000;
-    border: 1px solid $blue-500;
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &:read-only::placeholder {
-    opacity: 0;
-  }
-}
-
-.subtle {
-  background-color: $gray-1200;
-  padding-inline: 0.5em;
-  padding-top: 0.25em;
-}
-
-.ghosted {
-  background-color: transparent;
-  padding: 0;
-  padding-top: 0.25em;
-}
-
-.fluid {
-  width: 100%;
-}

apps/client/src/common/components/input/textarea/Textarea.tsx

@@ -1,31 +0,0 @@
-import { forwardRef, TextareaHTMLAttributes } from 'react';
-
-import { cx } from '../../../utils/styleUtils';
-
-import style from './Textarea.module.scss';
-
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  variant?: 'subtle' | 'ghosted';
-  fluid?: boolean;
-  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
-}
-
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function TextArea(
-  { className, variant = 'subtle', fluid, rows = 5, resize = 'none', style: customStyle, ...textareaProps },
-  ref,
-) {
-  return (
-    <textarea
-      ref={ref}
-      autoCorrect='off'
-      autoComplete='off'
-      spellCheck='false'
-      rows={rows}
-      style={{ ...customStyle, resize }}
-      className={cx([style.textarea, style[variant], fluid && style.fluid, className])}
-      {...textareaProps}
-    />
-  );
-});
-
-export default Textarea;

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

@@ -1,147 +0,0 @@
-import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { millisToString, parseUserTime } from 'ontime-utils';
-
-import { cx } from '../../../utils/styleUtils';
-import Input from '../input/Input';
-
-import style from './TimeInput.module.scss';
-
-interface NullableTimeInputProps<T extends string> {
-  id?: T;
-  name: T;
-  submitHandler: (field: T, value: number) => void;
-  time?: number | null;
-  emptyDisplay: string;
-  placeholder?: string;
-  disabled?: boolean;
-  align?: 'left' | 'center';
-  className?: string;
-}
-
-/**
- * Similar to TimeInput, but allows clearing the time value
- */
-export default function NullableTimeInput<T extends string>({
-  id,
-  name,
-  submitHandler,
-  time,
-  emptyDisplay,
-  placeholder,
-  disabled,
-  align = 'center',
-  className,
-}: NullableTimeInputProps<T>) {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const [value, setValue] = useState<string>('');
-  const ignoreChange = useRef(false);
-
-  /**
-   * @description Resets input value to given
-   */
-  const resetValue = useCallback(() => {
-    if (typeof time !== 'number' || isNaN(time)) {
-      setValue(emptyDisplay);
-    } else {
-      setValue(millisToString(time));
-    }
-  }, [emptyDisplay, time]);
-
-  /**
-   * @description Selects input text on focus
-   */
-  const handleFocus = useCallback(() => {
-    inputRef.current?.select();
-  }, []);
-
-  /**
-   * @description Submit handler
-   * @param {string} newValue
-   */
-  const handleSubmit = useCallback(
-    (newValue: string) => {
-      // skip if user deleted and time is already null
-      if (newValue === '' && time === null) {
-        return false;
-      }
-
-      // skip if the value evaluates to the same thing
-      const valueInMillis = parseUserTime(newValue);
-      if (valueInMillis === time) {
-        return false;
-      }
-
-      submitHandler(name, valueInMillis);
-      return true;
-    },
-    [name, submitHandler, time],
-  );
-
-  /**
-   * @description Prepare time fields
-   * @param {string} value string to be parsed
-   */
-  const validateAndSubmit = useCallback(
-    (newValue: string) => {
-      const success = handleSubmit(newValue);
-      if (!success) {
-        resetValue();
-      }
-    },
-    [handleSubmit, resetValue],
-  );
-
-  /**
-   * @description Handles common keys for submit and cancel
-   * @param {KeyboardEvent} event
-   */
-  const onKeyDownHandler = useCallback(
-    (event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === 'Enter') {
-        inputRef.current?.blur();
-      }
-      if (event.key === 'Escape') {
-        ignoreChange.current = true;
-        inputRef.current?.blur();
-        resetValue();
-      }
-    },
-    [resetValue],
-  );
-
-  const onBlurHandler = useCallback(
-    (event: FocusEvent<HTMLInputElement>) => {
-      if (ignoreChange.current) {
-        ignoreChange.current = false;
-        return;
-      }
-      validateAndSubmit((event.target as HTMLInputElement).value);
-    },
-    [validateAndSubmit],
-  );
-
-  useEffect(() => {
-    resetValue();
-  }, [resetValue]);
-
-  return (
-    <Input
-      id={id}
-      disabled={disabled}
-      ref={inputRef}
-      data-testid={`time-input-${name}`}
-      className={cx([style.timeInput, className])}
-      placeholder={placeholder}
-      onFocus={handleFocus}
-      onChange={(event) => setValue(event.target.value)}
-      onBlur={onBlurHandler}
-      onKeyDown={onKeyDownHandler}
-      value={value}
-      maxLength={8}
-      autoComplete='off'
-      style={{
-        textAlign: align,
-      }}
-    />
-  );
-}

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

@@ -1,10 +1,4 @@
 .timeInput {
-  width: 100%;
-  max-width: 7.5em;
-  letter-spacing: 0.5px;
-  font-variant-numeric: tabular-nums;
-
-  &.delayed {
-    border: 1px solid $ontime-delay-text;
-  }
+    letter-spacing: 1px;
+    width: 6.5em;
 }

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

@@ -1,34 +1,23 @@
 import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { Input } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';
 
-import { cx } from '../../../utils/styleUtils';
-import Input from '../input/Input';
-
-import style from './TimeInput.module.scss';
+import { useEmitLog } from '../../../stores/logger';
 
 interface TimeInputProps<T extends string> {
   id?: T;
   name: T;
   submitHandler: (field: T, value: string) => void;
   time?: number;
-  placeholder?: string;
+  placeholder: string;
   disabled?: boolean;
   align?: 'left' | 'center';
-  delayed?: boolean;
   className?: string;
 }
 
-export default function TimeInput<T extends string>({
-  id,
-  name,
-  submitHandler,
-  time,
-  placeholder,
-  disabled,
-  align = 'center',
-  delayed,
-  className,
-}: TimeInputProps<T>) {
+export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
+  const { id, name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
+  const { emitError } = useEmitLog();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
   const ignoreChange = useRef(false);
@@ -37,12 +26,13 @@ export default function TimeInput<T extends string>({
    * @description Resets input value to given
    */
   const resetValue = useCallback(() => {
-    if (typeof time !== 'number' || isNaN(time)) {
-      setValue('00:00:00');
-    } else {
+    try {
       setValue(millisToString(time));
+    } catch (error) {
+      setValue(millisToString(0));
+      emitError(`Unable to parse time ${time}: ${error}`);
     }
-  }, [time]);
+  }, [emitError, time]);
 
   /**
    * @description Selects input text on focus
@@ -123,26 +113,32 @@ export default function TimeInput<T extends string>({
   );
 
   useEffect(() => {
+    if (time == null) return;
     resetValue();
-  }, [resetValue]);
+  }, [resetValue, time]);
 
   return (
     <Input
       id={id}
       disabled={disabled}
+      size='sm'
       ref={inputRef}
       data-testid={`time-input-${name}`}
-      className={cx([style.timeInput, delayed && style.delayed, className])}
+      className={className}
+      fontSize='1rem'
+      type='text'
       placeholder={placeholder}
+      variant='ontime-filled'
       onFocus={handleFocus}
       onChange={(event) => setValue(event.target.value)}
       onBlur={onBlurHandler}
       onKeyDown={onKeyDownHandler}
       value={value}
       maxLength={8}
-      style={{
-        textAlign: align,
-      }}
+      maxWidth='7.5em'
+      letterSpacing='1px'
+      autoComplete='off'
+      textAlign={align}
     />
   );
 }

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

@@ -0,0 +1,10 @@
+$input-delayed-border-color: $ontime-delay-text;
+
+.timeInput {
+  border: 1px solid transparent;
+  color: $label-gray;
+
+  &.delayed {
+    border: 1px solid $input-delayed-border-color;
+  }
+}

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

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react';
+import { InputGroup } from '@chakra-ui/react';
+
+import { cx } from '../../../utils/styleUtils';
+
+import TimeInput from './TimeInput';
+
+import style from './TimeInputWithButton.module.scss';
+
+interface TimeInputWithButtonProps<T extends string> {
+  name: T;
+  submitHandler: (field: T, value: string) => void;
+  time?: number;
+  hasDelay?: boolean;
+  disabled?: boolean;
+  placeholder: string;
+}
+
+export default function TimeInputWithButton<T extends string>(props: PropsWithChildren<TimeInputWithButtonProps<T>>) {
+  const { name, submitHandler, time, hasDelay, placeholder, disabled, children } = props;
+
+  const inputClasses = cx([style.timeInput, hasDelay ? style.delayed : null]);
+
+  return (
+    <InputGroup size='sm' className={inputClasses} width='fit-content'>
+      <TimeInput<T>
+        name={name}
+        submitHandler={submitHandler}
+        time={time}
+        placeholder={placeholder}
+        align='left'
+        disabled={disabled}
+      />
+      {children}
+    </InputGroup>
+  );
+}

apps/client/src/common/components/link/app-link/AppLink.tsx

@@ -1,5 +1,5 @@
 import { type PropsWithChildren } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 
 import style from './AppLink.module.scss';
 
@@ -11,7 +11,8 @@ interface AppLinkProps {
  * Component used to navigate to an editor link inside the same window
  * Handles the path to respect Ontime Clouds base URL
  */
-export default function AppLink({ search, children }: PropsWithChildren<AppLinkProps>) {
+export default function AppLink(props: PropsWithChildren<AppLinkProps>) {
+  const { search, children } = props;
   const navigate = useNavigate();
 
   const handleClick = () => navigate({ search });

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

@@ -7,7 +7,6 @@
   transition-property: color;
   transition-duration: $transition-time-action;
   width: fit-content;
-  text-decoration: none;
 
   &.inline {
     display: inline-flex;
@@ -16,9 +15,4 @@
   &:hover {
     color: $ontime-color;
   }
-
-  &:focus {
-    outline: none; 
-    box-shadow: 0 1px 0 0 currentColor;
-  }
-} 
+}

apps/client/src/common/components/link/external-link/ExternalLink.tsx

@@ -12,7 +12,9 @@ interface ExternalLinkProps {
   inline?: boolean;
 }
 
-export default function ExternalLink({ href, inline, children }: ExternalLinkProps) {
+export default function ExternalLink(props: ExternalLinkProps) {
+  const { href, inline, children } = props;
+
   const handleClick = (event: MouseEvent) => {
     event.preventDefault();
     openLink(href);

apps/client/src/common/components/modal/Modal.module.scss

@@ -1,57 +0,0 @@
-.modal {
-  position: fixed;
-  top: 10vh;
-  left: 50%;
-  transform: translateX(-50%);
-  
-  padding-inline: 1rem;
-  min-width: min(880px, 90vw);
-  min-height: min(200px, 10vh);
-  max-width: min(1200px, 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: 60vh;
-  overflow-y: auto;
-}
-
-.footer {
-  padding-block: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  gap: 1rem;
-}

apps/client/src/common/components/modal/Modal.tsx

@@ -1,53 +0,0 @@
-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 './Modal.module.scss';
-
-interface ModalProps {
-  isOpen: boolean;
-  title?: string;
-  showCloseButton?: boolean;
-  showBackdrop?: boolean;
-  bodyElements: ReactNode;
-  footerElements?: ReactNode;
-  onClose: () => void;
-}
-
-export default function Modal({
-  isOpen,
-  title,
-  showCloseButton,
-  showBackdrop,
-  bodyElements,
-  footerElements,
-  onClose,
-}: ModalProps) {
-  return (
-    <BaseDialog.Root
-      open={isOpen}
-      onOpenChange={(isOpen) => {
-        if (!isOpen) onClose();
-      }}
-      dismissible={false}
-    >
-      <BaseDialog.Portal>
-        {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
-        <BaseDialog.Popup className={style.modal}>
-          <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/multi-part-progress-bar/MultiPartProgressBar.scss

@@ -1,4 +1,4 @@
-@use '@/theme/viewerDefs' as *;
+@use '../../../theme/viewerDefs' as *;
 
 $progress-bar-size: 1.5rem;
 $progress-bar-br: 3px;

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

@@ -0,0 +1,38 @@
+import { IoApps } from 'react-icons/io5';
+import { IoSettingsOutline } from 'react-icons/io5';
+
+import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
+import { cx } from '../../utils/styleUtils';
+
+import style from './NavigationMenu.module.scss';
+
+interface FloatingNavigationProps {
+  toggleMenu: () => void;
+  toggleSettings: () => void;
+}
+
+export default function FloatingNavigation(props: FloatingNavigationProps) {
+  const { toggleMenu, toggleSettings } = props;
+  const isButtonShown = useFadeOutOnInactivity();
+
+  return (
+    <div className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}>
+      <button
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        className={style.navButton}
+        data-testid='navigation__toggle-menu'
+      >
+        <IoApps />
+      </button>
+      <button
+        className={style.button}
+        onClick={toggleSettings}
+        aria-label='toggle settings'
+        data-testid='navigation__toggle-settings'
+      >
+        <IoSettingsOutline />
+      </button>
+    </div>
+  );
+}

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

@@ -1,71 +1,118 @@
-.separator {
-  border-color: $border-color-ondark;
-}
+@use '../../../theme/mixins' as *;
 
-.backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: $backdrop-color;
-  transition: opacity 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+$menu-hover-bg: $gray-1350;
+$menu-focus-bg: $gray-1300;
 
-  &[data-starting-style],
-  &[data-ending-style] {
+$icon-color: $ui-white;
+$button-bg: $gray-1050;
+$button-size: 3rem;
+
+.fadeable {
+  opacity: 1;
+
+  transition-property: opacity;
+  transition-duration: 0.3s;
+
+  &.hidden {
     opacity: 0;
   }
 }
 
-.drawer {
-  box-sizing: border-box;
+.lockIcon {
+  font-size: 1.5rem;
+  color: $active-indicator;
+  padding: 0.5em;
+
   position: fixed;
-  top: 0;
   left: 0;
-  bottom: 0;
-
-  width: 22rem;
-  height: 100vh;
+  top: 0;
+  z-index: 12;
+}
 
+.buttonContainer {
   display: flex;
   flex-direction: column;
-  padding-block: 1rem;
+  row-gap: 1rem;
+  padding: 0.5em;
 
-  background-color: $gray-1250;
-  color: $ui-white;
-  border-right: 1px solid $gray-1100;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 12;
+}
 
-  &[data-open] {
-    transform: translateX(0%);
-    transition: transform 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+.button {
+  font-size: 1.5rem;
+  color: $icon-color;
+  background-color: $button-bg;
+  width: $button-size;
+  height: $button-size;
+  display: grid;
+  place-content: center;
+  border-radius: 3px;
+}
+
+.navButton {
+  @extend .button;
+  z-index: 3;
+}
+
+.link {
+  @include action-link;
+  padding: 0.75rem 1.5rem;
+  gap: 0.5rem;
+  width: 100%;
+  cursor: pointer;
+
+  &:hover {
+    background-color: $menu-hover-bg;
   }
 
-  &[data-starting-style],
-  &[data-ending-style] {
-    transform: translateX(-100%);
-    transition: transform 500ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  &:active {
+    background-color: $border-color-ondark;
   }
 
-  // take the whole screen in mobile devices
-  @media (max-width: $min-tablet) {
-    width: 100vw;
+  &:focus {
+    outline: none;
+    background-color: $menu-focus-bg;
+    border-left: 2px solid $action-text-color;
+  }
+
+  &.current {
+    background-color: $menu-hover-bg;
+    border-left: 4px solid $action-text-color;
   }
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 3.5rem;
-  padding-inline: 1.5rem;
-
-  font-weight: 600;
-  font-size: 1.25rem;
-}
-
-.body {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.note {
+.linkIcon {
   margin-left: auto;
-  color: $white-20;
+  @include rotate-fourty-five;
+}
+
+.separator {
+  border-color: $border-color-ondark;
+}
+
+.sectionHeader {
+  font-size: calc(1rem - 2px);
+  margin-left: 1rem;
+  color: $gray-700;
+}
+
+.bottom {
+  margin-top: auto;
+  margin-bottom: 1rem;
+}
+
+.interfaces {
+  padding: 0.5rem 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.goIcon {
+  @include rotate-fourty-five;
+  margin-left: 0.25rem;
+  margin-bottom: 0.25rem;
 }

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

@@ -1,23 +1,29 @@
-import { memo } from 'react';
-import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
-import { LuCoffee } from 'react-icons/lu';
-import { useLocation } from 'react-router';
-import { Dialog } from '@base-ui-components/react/dialog';
-import { useDisclosure, useFullscreen } from '@mantine/hooks';
+import { memo, PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
+import { IoArrowUp, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
+import { Link, useLocation } from 'react-router-dom';
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { useFullscreen } from '@mantine/hooks';
 
-import { isLocalhost, supportsFullscreen } from '../../../externals';
-import { useKeepAwakeOptions } from '../../../features/keep-awake/KeepAwake';
+import { isLocalhost } from '../../../externals';
 import { navigatorConstants } from '../../../viewerConfig';
-import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
+import { useElectronEvent } from '../../hooks/useElectronEvent';
+import useInfo from '../../hooks-query/useInfo';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
-import IconButton from '../buttons/IconButton';
+import { isKeyEnter } from '../../utils/keyEvent';
+import { handleLinks, linkToOtherHost, openLink } from '../../utils/linkUtils';
+import { cx } from '../../utils/styleUtils';
 import { RenameClientModal } from '../client-modal/RenameClientModal';
-
-import ClientLink from './client-link/ClientLink';
-import EditorNavigation from './editor-navigation/EditorNavigation';
-import NavigationMenuItem from './navigation-menu-item/NavigationMenuItem';
-import OtherAddresses from './other-addresses/OtherAddresses';
+import CopyTag from '../copy-tag/CopyTag';
 
 import style from './NavigationMenu.module.scss';
 
@@ -26,95 +32,162 @@ interface NavigationMenuProps {
   onClose: () => void;
 }
 
-export default memo(NavigationMenu);
-function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
+function NavigationMenu(props: NavigationMenuProps) {
+  const { isOpen, onClose } = props;
+
   const id = useClientStore((store) => store.id);
   const name = useClientStore((store) => store.name);
-  const isSmallScreen = useIsSmallScreen();
 
-  const [isRenameOpen, handlers] = useDisclosure(false);
+  const { isOpen: isOpenRename, onOpen: onRenameOpen, onClose: onCloseRename } = useDisclosure();
   const { fullscreen, toggle } = useFullscreen();
   const { mirror, toggleMirror } = useViewOptionsStore();
-  const { keepAwake, toggleKeepAwake } = useKeepAwakeOptions();
   const location = useLocation();
 
-  return (
-    <Dialog.Root
-      open={isOpen}
-      onOpenChange={(open) => {
-        if (!open) {
-          onClose();
-        }
-      }}
-    >
-      <Dialog.Portal>
-        <Dialog.Backdrop className={style.backdrop} />
-        <RenameClientModal id={id} name={name} isOpen={isRenameOpen} onClose={handlers.close} />
-        <Dialog.Popup className={style.drawer}>
-          <div className={style.header}>
-            <Dialog.Title>Ontime</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' onClick={onClose}>
-              <IoClose />
-            </IconButton>
-          </div>
-          <div className={style.body}>
-            {supportsFullscreen && (
-              <NavigationMenuItem active={fullscreen} onClick={toggle}>
+  return createPortal(
+    <div id='navigation-menu-portal'>
+      <RenameClientModal id={id} name={name} isOpen={isOpenRename} onClose={onCloseRename} />
+      <Drawer placement='left' onClose={onClose} isOpen={isOpen} variant='ontime' data-testid='navigation__menu'>
+        <DrawerOverlay />
+        <DrawerContent maxWidth='22rem'>
+          <DrawerHeader>
+            <DrawerCloseButton size='lg' />
+            Ontime
+          </DrawerHeader>
+          <DrawerBody padding={0}>
+            <div className={style.buttonsContainer}>
+              <div
+                className={cx([style.link, fullscreen && style.current])}
+                tabIndex={0}
+                role='button'
+                onClick={toggle}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && toggle();
+                }}
+              >
                 Toggle Fullscreen
                 {fullscreen ? <IoContract /> : <IoExpand />}
-              </NavigationMenuItem>
-            )}
-            <NavigationMenuItem active={mirror} onClick={() => toggleMirror()}>
-              Flip Screen
-              <IoSwapVertical />
-              {mirror && <span className={style.note}>Active</span>}
-            </NavigationMenuItem>
-            {window.isSecureContext && (
-              <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
-                Keep Awake
-                <LuCoffee />
-                {keepAwake && <span className={style.note}>Active</span>}
-              </NavigationMenuItem>
-            )}
-            <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>
-
+              </div>
+              <div
+                className={cx([style.link, mirror && style.current])}
+                tabIndex={0}
+                role='button'
+                onClick={() => toggleMirror()}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && toggleMirror();
+                }}
+              >
+                Flip Screen
+                <IoSwapVertical />
+              </div>
+              <div
+                className={style.link}
+                tabIndex={0}
+                role='button'
+                onClick={onRenameOpen}
+                onKeyDown={(event) => {
+                  isKeyEnter(event) && onRenameOpen();
+                }}
+              >
+                Rename Client
+              </div>
+            </div>
             <hr className={style.separator} />
-
-            <EditorNavigation />
-            <ClientLink
-              to='cuesheet'
-              current={location.pathname === '/cuesheet'}
-              postAction={isSmallScreen ? onClose : undefined}
+            <Link
+              to='/editor'
+              tabIndex={0}
+              className={`${style.link} ${location.pathname === '/editor' && style.current}`}
             >
+              <IoLockClosedOutline />
+              Editor
+            </Link>
+            <ClientLink to='cuesheet' current={location.pathname === '/cuesheet'}>
               <IoLockClosedOutline />
               Cuesheet
             </ClientLink>
-            <ClientLink to='op' current={location.pathname === '/op'} postAction={isSmallScreen ? onClose : undefined}>
+            <ClientLink to='op' current={location.pathname === '/op'}>
               <IoLockClosedOutline />
               Operator
             </ClientLink>
-
             <hr className={style.separator} />
-
             {navigatorConstants.map((route) => (
-              <ClientLink
-                key={route.url}
-                to={route.url}
-                current={location.pathname === `/${route.url}`}
-                postAction={isSmallScreen ? onClose : undefined}
-              >
+              <ClientLink key={route.url} to={route.url} current={location.pathname === `/${route.url}`}>
                 {route.label}
               </ClientLink>
             ))}
-          </div>
-
-          {isLocalhost && (
-            <div>
-              <OtherAddresses currentLocation={location.pathname} />
-            </div>
-          )}
-        </Dialog.Popup>
-      </Dialog.Portal>
-    </Dialog.Root>
+            {isLocalhost && <OtherAddresses currentLocation={location.pathname} />}
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </div>,
+    document.body,
   );
 }
+
+interface OtherAddressesProps {
+  currentLocation: string;
+}
+
+function OtherAddresses(props: OtherAddressesProps) {
+  const { currentLocation } = props;
+  const { data } = useInfo();
+
+  // there is no point showing this if we only have one interface
+  if (data.networkInterfaces.length < 2) {
+    return null;
+  }
+
+  return (
+    <div className={style.bottom}>
+      <div className={style.sectionHeader}>Accessible on external networks</div>
+      <div className={style.interfaces}>
+        {data?.networkInterfaces?.map((nif) => {
+          if (nif.name === 'localhost') {
+            return null;
+          }
+
+          const address = linkToOtherHost(nif.address, currentLocation);
+
+          return (
+            <CopyTag
+              key={nif.name}
+              copyValue={address}
+              onClick={() => openLink(address)}
+              label='Copy IP or navigate to address'
+            >
+              {nif.address} <IoArrowUp className={style.goIcon} />
+            </CopyTag>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+interface ClientLinkProps {
+  current: boolean;
+  to: string;
+}
+
+function ClientLink(props: PropsWithChildren<ClientLinkProps>) {
+  const { current, to, children } = props;
+  const { isElectron } = useElectronEvent();
+
+  const classes = cx([style.link, current && style.current]);
+
+  if (isElectron) {
+    return (
+      <button className={classes} tabIndex={0} onClick={(event) => handleLinks(event, to)}>
+        {children}
+        <IoArrowUp className={style.linkIcon} />
+      </button>
+    );
+  }
+
+  return (
+    <Link to={`/${to}`} className={classes} tabIndex={0}>
+      {children}
+    </Link>
+  );
+}
+
+export default memo(NavigationMenu);

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

@@ -1,9 +1,9 @@
 import { IoLockClosedOutline } from 'react-icons/io5';
 
-import { useFadeOutOnInactivity } from '../../../hooks/useFadeOutOnInactivity';
-import { cx } from '../../../utils/styleUtils';
+import { useFadeOutOnInactivity } from '../../hooks/useFadeOutOnInactivity';
+import { cx } from '../../utils/styleUtils';
 
-import style from './ViewLockedIcon.module.scss';
+import style from './NavigationMenu.module.scss';
 
 export default function ViewLockedIcon() {
   const isLockIconShown = useFadeOutOnInactivity();

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

@@ -1,54 +1,33 @@
 import { memo } from 'react';
-import { useDisclosure, useHotkeys } from '@mantine/hooks';
+import { useDisclosure } from '@chakra-ui/react';
 
-import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
-
-import FloatingNavigation from './floating-navigation/FloatingNavigation';
-import ViewLockedIcon from './view-locked-icon/ViewLockedIcon';
+import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
+import useViewEditor from './useViewEditor';
+import ViewLockedIcon from './ViewLockedIcon';
 
 interface ViewNavigationMenuProps {
-  /** prevent navigation */
-  isNavigationLocked?: boolean;
-  /** prevent showing settings */
-  suppressSettings?: boolean;
+  isLockable?: boolean;
 }
 
-export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
-  const [isMenuOpen, menuHandler] = useDisclosure();
-  const { open: showEditFormDrawer } = useViewParamsEditorStore();
+function ViewNavigationMenu(props: ViewNavigationMenuProps) {
+  const { isLockable } = props;
 
-  useHotkeys([
-    [
-      'Space',
-      () => {
-        if (isNavigationLocked) return;
-        menuHandler.toggle();
-      },
-      { preventDefault: true },
-    ],
-    [
-      'mod + ,',
-      () => {
-        if (suppressSettings) return;
-        showEditFormDrawer();
-      },
-      { preventDefault: true },
-    ],
-  ]);
+  const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
+  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
 
-  if (isNavigationLocked && suppressSettings) {
+  const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
+
+  if (isViewLocked) {
     return <ViewLockedIcon />;
   }
 
   return (
     <>
-      <FloatingNavigation
-        toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
-        toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
-      />
-      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
+      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
+      <NavigationMenu isOpen={isMenuOpen} onClose={onMenuClose} />
     </>
   );
 }
+
+export default memo(ViewNavigationMenu);

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

@@ -1,4 +0,0 @@
-.linkIcon {
-  margin-left: auto;
-  @include rotate-fourty-five;
-}

apps/client/src/common/components/navigation-menu/client-link/ClientLink.tsx

@@ -1,47 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { IoArrowUp } from 'react-icons/io5';
-import { useNavigate } from 'react-router';
-
-import { useElectronEvent } from '../../../hooks/useElectronEvent';
-import { handleLinks } from '../../../utils/linkUtils';
-import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
-
-import style from './ClientLink.module.scss';
-
-interface ClientLinkProps {
-  current: boolean;
-  to: string;
-  postAction?: () => void;
-}
-
-export default function ClientLink({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
-  const { isElectron } = useElectronEvent();
-  const navigate = useNavigate();
-
-  if (isElectron) {
-    return (
-      <NavigationMenuItem
-        active={current}
-        onClick={() => {
-          handleLinks(to);
-          postAction?.();
-        }}
-      >
-        {children}
-        <IoArrowUp className={style.linkIcon} />
-      </NavigationMenuItem>
-    );
-  }
-
-  return (
-    <NavigationMenuItem
-      active={current}
-      onClick={() => {
-        navigate(`/${to}`);
-        postAction?.();
-      }}
-    >
-      {children}
-    </NavigationMenuItem>
-  );
-}