refactor(progress bar): reset when event changes

* fix: issue where a count-to-end would lead to incorrect expected times

* fix: include add time in overtime when countToEnd

* fix: ui and server use same calculation for expected end

.codegraph/.gitignore

@@ -0,0 +1,5 @@
+# CodeGraph data files — local to each machine, not for committing.
+# Ignore everything in .codegraph/ except this file itself, so transient
+# files (the database, daemon.pid, sockets, logs) never show up in git.
+*
+!.gitignore

.dockerignore

@@ -1,5 +1,5 @@
-# Ignore config files
+# Ignore formatter config files
-.prettier*
+.oxfmt*
 
 # Ignore install stuff
 **/yarn.lock
@@ -17,7 +17,6 @@
 # Ignore build folders
 node_modules
 **/node_modules
-**/dist
 
 # Ignore default volumes created by running docker compose up
 ontime-db

.eslintignore

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

.eslintrc

@@ -1,53 +0,0 @@
-{
-  "root": true,
-  "parserOptions": {
-    "ecmaVersion": 2020
-  },
-  "env": {
-    "es6": true,
-    "jest": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier", "eslint-config-prettier"],
-  "plugins": ["@typescript-eslint", "prettier"],
-  "overrides": [
-    {
-      "files": ["e2e/**/**.spec.ts", "e2e/**/**.test.ts"],
-      "extends": ["plugin:playwright/playwright-test"]
-    }
-  ],
-  "rules": {
-    "no-useless-concat": "warn",
-    "prefer-template": "warn",
-    "no-throw-literal": "error",
-    "no-console": [
-      "warn",
-      {
-        "allow": ["warn", "error"]
-      }
-    ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": ["ontime-types/src/*", "ontime-utils/src/*"]
-      }
-    ],
-    "@typescript-eslint/no-non-null-assertion": "warn",
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "argsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_",
-        "destructuredArrayIgnorePattern": "^_",
-        "varsIgnorePattern": "^_"
-      }
-    ],
-    "prettier/prettier": [
-      "warn",
-      {
-        "endOfLine": "auto"
-      }
-    ]
-  }
-}

.github/FUNDING.yml

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

.github/workflows/build_cli.yml

@@ -12,16 +12,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
-      
+
+      # 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
+        uses: pnpm/action-setup@v6
 
       - 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: actions/cache@v5
         with:
           path: ${{ env.PNPM_STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -38,16 +43,19 @@ 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,43 +6,62 @@ on:
   workflow_dispatch:
 
 jobs:
-
   publish_docker:
     runs-on: ubuntu-latest
     env:
       CI: ''
 
     steps:
-    - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
-    - name: Docker Login
+      - name: Setup pnpm
-      uses: docker/login-action@v2.1.0
+        uses: pnpm/action-setup@v6
-      with:
-        username: ${{ secrets.DOCKERHUB_USERNAME }}
-        password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-    - name: Docker Setup Buildx
+      - name: Get pnpm store directory
-      uses: docker/setup-buildx-action@v2.5.0
+        run: echo "PNPM_STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-    - name: Build and push stable release
+      - name: Setup pnpm cache
-      if: github.event.release.prerelease == false
+        uses: actions/cache@v5
-      uses: docker/build-push-action@v4.0.0
+        with:
-      with:
+          path: ${{ env.PNPM_STORE_PATH }}
-        context: .
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
-        file: ./Dockerfile
+          restore-keys: |
-        platforms: linux/amd64,linux/arm64,linux/arm/v7
+            ${{ runner.os }}-pnpm-store-
-        # 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
+      - name: Install dependencies
-      if: github.event.release.prerelease == true
+        run: pnpm install --frozen-lockfile
-      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@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Docker Setup Buildx
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+
+      - name: Setup Docker metadata
+        id: meta
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/ontime
+          tags: |
+            type=semver,pattern=v{{version}}
+            type=semver,pattern=v{{major}}
+            type=raw,value=nightly,enable=${{ github.event.release.prerelease == true }}
+
+      - name: Build and push stable release
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          # Push is a shorthand for --output=type=registry
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/build_electron.yml

@@ -2,24 +2,28 @@ name: Ontime build
 
 on:
   push:
-    tags: [ "*" ]
+    tags: ['*']
   workflow_dispatch:
 
 jobs:
   build_macos:
-    runs-on: macOS-latest
+    runs-on: macOS-26
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
-      
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
+
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6
 
       - 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: actions/cache@v5
         with:
           path: ${{ env.PNPM_STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -29,13 +33,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
-
       - name: Electron - Build app
-        env: 
+        env:
           APPLE_ID: ${{ secrets.APPLEID }}
           APPLE_APP_SPECIFIC_PASSWORD: ${{ secrets.APPLEIDPASS }}
           APPLE_TEAM_ID: ${{ secrets.TEAMID }}
@@ -44,8 +43,19 @@ jobs:
         run: pnpm dist-mac --env-mode=loose
         timeout-minutes: 60
 
+      - name: Upload macOS build artifacts
+        uses: actions/upload-artifact@v6
+        if: always()
+        with:
+          name: ontime-macos-build
+          path: |
+            ./apps/electron/dist/ontime-macOS-x64.dmg
+            ./apps/electron/dist/ontime-macOS-arm64.dmg
+          retention-days: 1
+
       - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
+        if: github.ref_type == 'tag'
         with:
           files: |
             ./apps/electron/dist/ontime-macOS-x64.dmg
@@ -57,24 +67,34 @@ jobs:
     runs-on: windows-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v6
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
-
       - name: Electron - Build app
         run: pnpm dist-win
 
+      - name: Upload Windows build artifacts
+        uses: actions/upload-artifact@v6
+        if: always()
+        with:
+          name: ontime-windows-build
+          path: |
+            ./apps/electron/dist/ontime-win64.exe
+            ./apps/electron/dist/win-unpacked/
+          retention-days: 1
+
       - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
+        if: github.ref_type == 'tag'
         with:
           files: './apps/electron/dist/ontime-win64.exe'
         env:
@@ -84,25 +104,39 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v3
+        uses: pnpm/action-setup@v6
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build project packages
-        env:
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: pnpm build
-
       - name: Electron - Build app
         run: pnpm dist-linux
 
-      - name: Release
+      - name: Upload Linux build artifacts
-        uses: softprops/action-gh-release@v1
+        uses: actions/upload-artifact@v6
+        if: always()
         with:
-          files: './apps/electron/dist/ontime-linux.AppImage'
+          name: ontime-linux-build
+          path: |
+            ./apps/electron/dist/ontime-linux-x86_64.AppImage
+            ./apps/electron/dist/ontime-linux-arm64.AppImage
+            ./apps/electron/dist/ontime-linux-armv7l.AppImage
+          retention-days: 1
+
+      - name: Release
+        uses: softprops/action-gh-release@v2
+        if: github.ref_type == 'tag'
+        with:
+          files: |
+            ./apps/electron/dist/ontime-linux-x86_64.AppImage
+            ./apps/electron/dist/ontime-linux-arm64.AppImage
+            ./apps/electron/dist/ontime-linux-armv7l.AppImage
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/build_resolver.yml

@@ -1,8 +1,6 @@
 name: Ontime Resolver build
 
 on:
-  release:
-    types: [published]
   workflow_dispatch:
 
 jobs:
@@ -12,16 +10,21 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
-      
+
+      # 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
+        uses: pnpm/action-setup@v6
 
       - 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: actions/cache@v5
         with:
           path: ${{ env.PNPM_STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -34,9 +37,12 @@ jobs:
       - 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:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_CONFIG_PROVENANCE: true
         working-directory: ./apps/resolver

.github/workflows/test.yml

@@ -13,16 +13,20 @@ jobs:
       CI: ''
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6
 
       - 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: actions/cache@v5
         with:
           path: ${{ env.PNPM_STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -32,10 +36,13 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      # Run code quality 
+      # Run code quality
+      - name: Run formatter
+        run: pnpm format:check
+
       - name: Run linter
         run: pnpm lint
-      
+
       - name: Run TypeScript checks
         run: pnpm typecheck
 
@@ -49,16 +56,20 @@ jobs:
     timeout-minutes: 20
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6
 
       - 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: actions/cache@v5
         with:
           path: ${{ env.PNPM_STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('pnpm-lock.yaml') }}
@@ -71,30 +82,30 @@ jobs:
       - 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
+        uses: actions/cache@v5
         with:
           path: |
-           ~/.cache/ms-playwright
+            ~/.cache/ms-playwright
           key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
           restore-keys: |
             ${{ runner.os }}-playwright-
-      - run: npx playwright install --with-deps
+      - run: pnpm playwright install --with-deps
         if: steps.playwright-cache.outputs.cache-hit != 'true'
 
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: pnpm playwright install --with-deps
 
       - name: Run Playwright tests
         run: pnpm e2e
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v6
         if: always()
         with:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v6
         with:
           name: automated-screenshots
           path: automated-screenshots/

.gitignore

@@ -33,13 +33,16 @@ e2e/tests/fixtures/tmp/*
 # production
 build/
 dist/
+*.tsbuildinfo
 
 # bundled assets
 translations.json
 override.css
+**/external/demo/index.html
 
 # working stuff
 **/TODO.md
+**.local.**
 
 # docker utils
 ontime-db
@@ -50,4 +53,7 @@ ontime-data/
 **/ONTIME_VERSION.js
 
 # temporary write files
-**.tmp
+**.tmp
+
+# Claude Code metadata
+.claude/

.nvmrc

@@ -1 +1 @@
-v22.15.1
+v22.22.3

.oxfmtrc.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "endOfLine": "lf",
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120,
+  "sortPackageJson": false,
+  "sortImports": {},
+  "ignorePatterns": [
+    "build",
+    "coverage",
+    "dist",
+    "node_modules",
+    "playwright-report",
+    "pnpm-lock.yaml",
+    "**/*.toml",
+    "**/*.json",
+    "!tsconfig.common.json",
+    "!turbo.json",
+    "!package.json"
+  ]
+}

.oxlintrc.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "categories": {
+    "correctness": "warn",
+    "suspicious": "off",
+    "pedantic": "off",
+    "perf": "warn",
+    "style": "off",
+    "restriction": "off",
+    "nursery": "off"
+  },
+  "rules": {
+    "no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "caughtErrors": "none"
+      }
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": ["ontime-types/src/*", "ontime-utils/src/*"]
+      }
+    ]
+  },
+  "ignorePatterns": [
+    "**/node_modules/**",
+    "**/dist/**",
+    "apps/client/build/**",
+    "apps/electron/assets/**",
+    "**/ONTIME_VERSION.js"
+  ]
+}

.prettierignore

@@ -1,13 +0,0 @@
-build
-coverage
-dist
-node_modules
-
-playwright-report
-
-**/*.toml
-**/*.yml
-**/*.json
-!tsconfig.common.json
-!turbo.json
-!package.json

.prettierrc

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

DEVELOPMENT.md

@@ -2,16 +2,16 @@
 
 Ontime consists of 3 distinct parts
 
-- __client__: A React app for Ontime's UI and web clients
+- **client**: A React app for Ontime's UI and web clients
-- __electron__: An electron app which facilitates the cross-platform distribution of Ontime
+- **electron**: An electron app which facilitates the cross-platform distribution of Ontime
-- __server__: A node application which handles the domains services and integrations
+- **server**: A node application which handles the domains services and integrations
 
 The steps below will assume you have locally installed the necessary dependencies.
 Other dependencies will be installed as part of the setup
 
-- __node__ (~22)
+- **node** (~22)
-- __pnpm__ (~10)
+- **pnpm** (~10)
-- __docker__ (only necessary to run and build docker images)
+- **docker** (only necessary to run and build docker images)
 
 ## LOCAL DEVELOPMENT
 
@@ -20,9 +20,10 @@ development.
 Locally, we would need to run both the React client and the node.js server in development mode
 
 From the project root, run the following commands
-- __Install the project dependencies__ by running `pnpm i`
-- __Run dev mode__ by running `pnpm dev` or `pnpm dev:electron` to get the electron window
 
+- **Install the project dependencies** by running `pnpm i`
+- **Create a local build** by running `pnpm build`, this will populate local dependencies
+- **Run dev mode** by running `pnpm dev` or `pnpm dev:electron` to get the electron window
 
 ### Debugging backend
 
@@ -30,8 +31,9 @@ The previous command will start the development servers for both the client, ser
 Typically in dev mode we prefer to start these in separate terminals to help with error tracking and debugging.
 
 We do that by creating two terminals an running
-- __Run the React UI__ by running `pnpm dev --filter=ontime-ui`
+
-- __Run the nodejs server__ by running `pnpm dev --filter=ontime-server`
+- **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`.
 
@@ -76,15 +78,12 @@ 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`
+- **Install the project dependencies** by running `pnpm i`
-- __Build the UI and server__ by running `pnpm build`
+- **Build the UI and server** by running `pnpm build`
-- __Create the package__ by running `pnpm dist-win`, `pnpm dist-mac` or `pnpm dist-linux`
+- **Create the package** by running `pnpm dist-win`, `pnpm dist-mac` or `pnpm dist-linux`
 
 The build distribution assets will be at `.apps/electron/dist`
 
-Note: The MacOS build will only work in CI, locally it will fail due to notarisation issues.
-Use the `pnpm dist-mac:local` command to build a MacOS distribution locally and skip the notary process.
-
 ## DOCKER
 
 Ontime provides a docker-compose file to aid with building and running docker images.
@@ -92,23 +91,31 @@ While it should allow for a generic setup, it might need to be modified to fit y
 
 From the project root, run the following commands
 
-- __Build docker image from__ by running `docker build -t getontime/ontime .`
+- **Build docker image from** by running `docker build -t getontime/ontime .`
-- __Run docker image from compose__ by running `docker-compose up -d`
+- **Run docker image from compose** by running `docker-compose up -d`
 
 Other useful commands
 
-- __List running processes__ by running `docker ps`
+- **List running processes** by running `docker ps`
-- __Kill running process__ by running `docker kill <process-id>`
+- **Kill running process** by running `docker kill <process-id>`
+
+## FORMATTING AND LINTING
+
+Ontime uses [oxfmt](https://oxc.rs/docs/guide/usage/formatter.html) for formatting and [oxlint](https://oxc.rs/docs/guide/usage/linter.html) for linting. Look for an [oxc extension](https://oxc.rs/docs/guide/usage/linter/editors) for your editor of choice.
+
+- **Run formatter** by running `pnpm format`
+- **Run linter** by running `pnpm lint`
 
 ## CONTRIBUTION GUIDELINES
 
 If you want to propose changes to the codebase, please reach out before opening a Pull Request.
 
 For new PRs, please follow the following checklist:
-* [ ] You have updated and ran unit locally and they are passing. Unit tests are generally created for all utility functions and business logic 
+
-* [ ] You have ran code formatting and linting in all your changes
+- [ ] You have updated and ran unit locally and they are passing. Unit tests are generally created for all utility functions and business logic
-* [ ] The branch is clean and the commits are meaningfully separated and contain descriptive messages
+- [ ] You have ran code formatting and linting in all your changes
-* [ ] The PR body contains description and motivation for the changes
+- [ ] The branch is clean and the commits are meaningfully separated and contain descriptive messages
+- [ ] The PR body contains description and motivation for the changes
 
 After this checklist is complete, you can request a review from one of the maintainers to get feedback and approval on the changes. \
 We will review as soon as possible

Dockerfile

@@ -1,13 +1,5 @@
-FROM node:22-bullseye AS builder
+ARG NODE_VERSION=22.22.2
-ENV PNPM_HOME="/pnpm"
+FROM node:${NODE_VERSION}-alpine
-ENV PATH="$PNPM_HOME:$PATH"
-RUN npm install -g pnpm@10.11.0
-COPY . /app
-WORKDIR /app
-RUN pnpm --filter=ontime-ui --filter=ontime-server --filter=ontime-utils --filter=ontime-types install --config.dedupe-peer-dependents=false --frozen-lockfile
-RUN pnpm run build:docker
-
-FROM node:22-alpine
 
 # Set environment variables
 # Environment Variable to signal that we are running production
@@ -15,16 +7,17 @@ ENV NODE_ENV=docker
 # Ontime Data path
 ENV ONTIME_DATA=/data/
 
+RUN mkdir /app
 WORKDIR /app/
 
 # Prepare UI
-COPY --from=builder /app/apps/client/build ./client/
+COPY apps/client/build/ ./client/
 
 # Prepare Backend
-COPY --from=builder /app/apps/server/dist/ ./server/
+COPY apps/server/dist/ ./server/
-COPY --from=builder /app/apps/server/src/external/ ./external/
+COPY apps/server/src/external/ ./external/
-COPY --from=builder /app/apps/server/src/user/ ./user/
+COPY apps/server/src/user/ ./user/
-COPY --from=builder /app/apps/server/src/html/ ./html/
+COPY apps/server/src/html/ ./html/
 
 # Export default ports
 EXPOSE 4001/tcp 8888/udp 9999/udp
@@ -32,5 +25,6 @@ EXPOSE 4001/tcp 8888/udp 9999/udp
 CMD ["node", "server/docker.cjs"]
 
 # Build and run commands
+# pnpm build:docker
 # docker buildx build . -t getontime/ontime
 # docker run -p 4001:4001 -p 8888:8888/udp -p 9999:9999/udp -v ./ontime-db:/data/ getontime/ontime

README.md

@@ -7,27 +7,31 @@
 [![](https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=buymeacoffee&color=%23fe8e86)](https://www.buymeacoffee.com/cpvalente)
 
 ## Download the latest release
+
 <a href="https://www.buymeacoffee.com/cpvalente" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="32"></a>
 
 - Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe">Windows</a>
-- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg">MacOS Arm</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg">macOS (Apple Silicon)</a>
-- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-x64.dmg">MacOS Intel</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-x64.dmg">macOS (Intel)</a>
-- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage">Linux</a>
+- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux-x86_64.AppImage">Linux (Intel / AMD 64-bit)</a>
+- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux-arm64.AppImage">Linux (ARM 64-bit, Raspberry Pi 4+)</a>
+- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux-armv7l.AppImage">Linux (ARM 32-bit, older Raspberry Pi)</a>
 
 ... or
+
 - Get from <a href="https://hub.docker.com/r/getontime/ontime">Docker hub</a>
-- Install from <a href="https://www.npmjs.com/package/ontime">NPM</a>
+- Install from <a href="https://www.npmjs.com/package/@getontime/cli">NPM</a>
 - Install from <a href="https://formulae.brew.sh/cask/ontime">Homebrew</a>
 
 ## Need help?
+
 We do our best to have most topics covered by the documentation. However, if your question is not covered, you are welcome to [fill in a bug report in an issue](https://github.com/cpvalente/ontime/issues), [ask a question in GitHub discussions](https://github.com/cpvalente/ontime/discussions) or hop in the [discord server](https://discord.com/invite/eje3CSUEXm) for a chat.
 
 ## Using Ontime?
+
 Let us know!
 Ontime improves from the collaboration with its users. We would like to understand how you use Ontime and appreciate your feedback.
 
-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.
@@ -43,6 +47,7 @@ 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.
@@ -111,7 +116,8 @@ If you are a developer and would like to contribute with code, please open an is
 Information about the project setup can be found in the [development documentation](./DEVELOPMENT.md)
 
 ## Links
-- [Ontime website](https://getontime.no) 
+
+- [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)

SPONSOR.md

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

apps/cli/.eslintrc

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

apps/cli/.oxlintrc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../../node_modules/oxlint/configuration_schema.json",
+  "extends": ["../../.oxlintrc.json"],
+  "plugins": ["unicorn", "typescript", "oxc", "vitest"]
+}

apps/cli/.prettierrc

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

apps/cli/README.md

@@ -1,6 +1,7 @@
 # Ontime CLI
 
 ![Ontime](https://github.com/cpvalente/ontime/blob/9e63261b350e5b7b61c7ffb17c9e75a6c5a8c711/.github/aux-images/editor.png)
+
 > Ontime is an application for managing rundown and event timers.
 
 Congratulations! You got this far into Ontime's rabbit hole and want to manage your installation.
@@ -10,33 +11,40 @@ The CLI tool is a fast and lightweight way of installing Ontime and is perfect f
 ## Getting started
 
 ### Prerequisites
+
 You will need to have installed the correct version of node.js
 Please check [the app engines declaration](https://github.com/cpvalente/ontime/blob/master/package.json) for the correct version.
 
 ### Running Ontime
+
 To get Ontime running, all you need to do is install it in your system using your package manager of choice:
 
-Install globally in your system 
+Install globally in your system
+
 ```bash
 npm install -g @getontime/cli
 ```
 
 ... and run using the installed script
+
 ```bash
 ontime
 ```
 
 Or install and run ontime (the installation here is temporary for the duration of the session)
+
 ```bash
 npx install @getontime/cli
 ```
 
 ## Links
+
 - [Ontime's repository](https://github.com/cpvalente/ontime)
 - [Ontime's documentation](https://docs.getontime.no/)
 - [Ontime's website](https://getontime.no/)
 
 ## Sponsoring
+
 You can help the development of this project or say thank you with a one time donation. \
 See the [terms of donations](https://github.com/cpvalente/ontime/blob/master/SPONSOR.md)
 

apps/cli/package.json

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

apps/client/.eslintignore

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

apps/client/.eslintrc

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

apps/client/.oxlintrc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../../node_modules/oxlint/configuration_schema.json",
+  "extends": ["../../.oxlintrc.json"],
+  "plugins": ["unicorn", "typescript", "oxc", "react", "vitest"]
+}

apps/client/.prettierrc

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

apps/client/index.html

@@ -3,20 +3,28 @@
   <head>
     <meta charset="utf-8" />
     <base href="/" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#101010" />
     <meta name="ontime" content="ontime - time keeping for live events" />
-    <link rel="apple-touch-icon" href="/ontime-logo.png" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <link rel="icon" type="image/png" href="/ontime-logo.png" />
+    <link rel="apple-touch-icon" href="ontime-logo.png" />
-    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="icon" type="image/png" href="ontime-logo.png" />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="site.webmanifest" />
+    <link rel="manifest" href="manifest.json" />
     <meta name="robots" content="noindex" />
     <title>ontime</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script>
+      if (/\/timer\/?$/.test(window.location.pathname) && typeof Promise.any !== 'function') {
+        var b = document.querySelector('base');
+        var base = b ? (b.getAttribute('href') || '').replace(/\/$/, '') : '';
+        window.location.replace(base + '/timer-legacy' + window.location.search);
+      }
+    </script>
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

apps/client/package.json

@@ -1,45 +1,46 @@
 {
   "name": "ontime-ui",
-  "version": "4.0.0-beta.5",
+  "version": "4.11.0",
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.4",
+    "@base-ui/react": "1.6.0",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/lang-css": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.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",
+    "@fontsource/open-sans": "^5.2.7",
-    "@mantine/hooks": "^8.2.8",
+    "@mantine/hooks": "^8.3.7",
-    "@sentry/react": "^10.2.0",
+    "@sentry/react": "^10.59.0",
     "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.85.9",
+    "@tanstack/react-query": "^5.101.0",
-    "@tanstack/react-query-devtools": "^5.85.9",
+    "@tanstack/react-query-devtools": "^5.101.0",
     "@tanstack/react-table": "^8.21.3",
+    "@uiw/codemirror-theme-vscode": "^4.25.10",
     "autosize": "^6.0.1",
-    "axios": "^1.12.2",
+    "axios": "^1.18.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "csv-stringify": "^6.6.0",
-    "prismjs": "^1.30.0",
+    "qrcode": "^1.5.4",
-    "react": "^19.1.1",
+    "react": "^19.2.7",
-    "react-colorful": "^5.6.1",
+    "react-colorful": "^5.7.0",
-    "react-dom": "^19.1.1",
+    "react-dom": "^19.2.7",
     "react-fast-compare": "^3.2.2",
-    "react-hook-form": "^7.62.0",
+    "react-hook-form": "^7.80.0",
-    "react-icons": "5.5.0",
+    "react-icons": "5.6.0",
-    "react-qr-code": "^2.0.18",
+    "react-router": "^8.0.1",
-    "react-router": "^7.8.2",
+    "react-virtuoso": "^4.18.7",
-    "react-simple-code-editor": "^0.14.1",
+    "zustand": "^5.0.14"
-    "react-virtuoso": "^4.14.0",
-    "web-vitals": "^5.1.0",
-    "zustand": "^5.0.8"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
     "postinstall": "pnpm addversion",
     "dev": "cross-env BROWSER=none vite",
     "dev:electron": "pnpm dev",
-    "lint": "eslint . --quiet",
+    "lint": "oxlint --quiet --type-aware",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc -p tsconfig.app.json --noEmit",
     "build": "vite build",
     "test": "vitest",
     "test:pipeline": "vitest run",
@@ -49,7 +50,8 @@
     "production": [
       ">0.2%",
       "not dead",
-      "not op_mini all"
+      "not op_mini all",
+      "safari >= 14.1"
     ],
     "development": [
       "last 1 chrome version",
@@ -58,31 +60,21 @@
     ]
   },
   "devDependencies": {
-    "@sentry/vite-plugin": "^2.16.1",
+    "@sentry/vite-plugin": "5.1.1",
-    "@tanstack/eslint-plugin-query": "^5.8.4",
+    "@types/qrcode": "^1.5.6",
-    "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "catalog:",
+    "@vitejs/plugin-legacy": "^8.0.1",
-    "@typescript-eslint/parser": "catalog:",
+    "@vitejs/plugin-react": "5.2.0",
-    "@vitejs/plugin-react": "4.5.1",
+    "babel-plugin-react-compiler": "1.0.0",
-    "eslint": "catalog:",
+    "happy-dom": "^20.9.0",
-    "eslint-config-prettier": "catalog:",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-prettier": "catalog:",
-    "eslint-plugin-react": "^7.32.0",
-    "eslint-plugin-react-compiler": "19.1.0-rc.2",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
     "ontime-types": "workspace:*",
     "ontime-utils": "workspace:*",
-    "prettier": "catalog:",
     "sass": "^1.57.1",
     "typescript": "catalog:",
-    "vite": "6.3.1",
+    "vite": "8.0.1",
-    "vite-plugin-compression2": "2.2.0",
+    "vite-plugin-compression2": "2.5.1",
-    "vite-plugin-svgr": "4.3.0",
+    "vite-plugin-svgr": "4.5.0",
-    "vite-tsconfig-paths": "5.1.4",
     "vitest": "catalog:"
   }
 }

apps/client/public/manifest.json

@@ -11,9 +11,9 @@
       "type": "image/png"
     }
   ],
-  "scope": "/",
+  "scope": "./",
-  "start_url": "/",
+  "start_url": "./",
   "display": "",
   "theme_color": "#121212",
-  "background_color": "#ffffff"
+  "background_color": "#101010"
 }

apps/client/public/site.webmanifest

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

apps/client/src/App.tsx

@@ -1,17 +1,19 @@
-import { BrowserRouter } from 'react-router';
+import { Tooltip } from '@base-ui/react/tooltip';
-import { Tooltip } from '@base-ui-components/react/tooltip';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { BrowserRouter } from 'react-router';
 
+// apply global axios config defaults
+import './common/api/axios.config';
+import AppRouter from './AppRouter';
 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
 import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverlay';
 import { AppContextProvider } from './common/context/AppContext';
 import { ontimeQueryClient } from './common/queryClient';
 import { connectSocket } from './common/utils/socket';
+import { baseURI } from './externals';
 import KeepAwake from './features/keep-awake/KeepAwake';
 import { TranslationProvider } from './translation/TranslationProvider';
-import AppRouter from './AppRouter';
-import { baseURI } from './externals';
 
 connectSocket();
 

apps/client/src/AppRouter.tsx

@@ -1,18 +1,18 @@
-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 { ComponentType, Suspense, lazy, useEffect, useMemo } from 'react';
+import { Navigate, Route, useLocation, useNavigate, useParams } from 'react-router';
 
 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 { useClientPath } from './common/hooks/useClientPath';
 import { getRouteFromPreset } from './common/utils/urlPresets';
+import { getIsNavigationLocked, sessionScope } from './externals';
 import Log from './features/log/Log';
+import { initializeSentry } from './sentry.config';
 import Loader from './views/common/loader/Loader';
 import NotFound from './views/common/not-found/NotFound';
 import ViewLoader from './views/ViewLoader';
-import { getIsNavigationLocked, sessionScope } from './externals';
-import { initializeSentry } from './sentry.config';
 
 const Timer = lazy(() => import('./views/timer/Timer'));
 const Countdown = lazy(() => import('./views/countdown/Countdown'));
@@ -102,6 +102,7 @@ export default function AppRouter() {
           path='op'
           element={
             <ViewLoader>
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
               <Operator />
             </ViewLoader>
           }
@@ -207,13 +208,13 @@ function PresetView() {
   /**
    * 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}>
-      {preset.target !== OntimeView.Cuesheet && (
+      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
-        <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
-      )}
       {Component ? <Component /> : <NotFound />}
     </PresetContext>
   );

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

@@ -2,16 +2,16 @@ import axios from 'axios';
 import { TranslationObject } from 'ontime-types';
 
 import { ontimeQueryClient } from '../../common/queryClient';
-
+import { TRANSLATION, apiEntryUrl, customTranslationsURL } from './constants';
-import { apiEntryUrl, customTranslationsURL, TRANSLATION } from './constants';
+import type { RequestOptions } from './requestOptions';
 
 const assetsPath = `${apiEntryUrl}/assets`;
 
 /**
  * HTTP request to get css contents
  */
-export async function getCSSContents(): Promise<string> {
+export async function getCSSContents(options?: RequestOptions): Promise<string> {
-  const res = await axios.get(`${assetsPath}/css`);
+  const res = await axios.get(`${assetsPath}/css`, { signal: options?.signal });
   return res.data;
 }
 
@@ -35,8 +35,8 @@ export async function restoreCSSContents(): Promise<string> {
 /**
  * HTTP request to get user translation
  */
-export async function getUserTranslation(): Promise<TranslationObject> {
+export async function getUserTranslation(options?: RequestOptions): Promise<TranslationObject> {
-  const res = await axios.get(customTranslationsURL);
+  const res = await axios.get(customTranslationsURL, { signal: options?.signal });
   return res.data;
 }
 

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

@@ -9,14 +9,15 @@ import type {
 } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
 
 const automationsPath = `${apiEntryUrl}/automations`;
 
 /**
  * HTTP request to get the automations settings
  */
-export async function getAutomationSettings(): Promise<AutomationSettings> {
+export async function getAutomationSettings(options?: RequestOptions): Promise<AutomationSettings> {
-  const res = await axios.get(automationsPath);
+  const res = await axios.get(automationsPath, { signal: options?.signal });
   return res.data;
 }
 

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

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

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

@@ -3,16 +3,21 @@ import { serverURL } from '../../externals';
 // keys in tanstack store
 export const APP_INFO = ['appinfo'];
 export const APP_SETTINGS = ['appSettings'];
+export const APP_SERVER_PORT = ['appServerPort'];
 export const APP_VERSION = ['appVersion'];
 export const AUTOMATION = ['automation'];
 export const CUSTOM_FIELDS = ['customFields'];
+export const CUSTOM_VIEWS = ['customViews'];
 export const PROJECT_DATA = ['project'];
 export const PROJECT_LIST = ['projectList'];
 export const PROJECT_RUNDOWNS = ['projectRundowns'];
 export const RUNDOWN = ['rundown'];
+export const CURRENT_RUNDOWN_QUERY_KEY = ['rundown', 'current'];
+export const getRundownQueryKey = (rundownId: string) => ['rundown', rundownId];
 export const RUNTIME = ['runtimeStore'];
 export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
+export const CSS_OVERRIDE = ['cssOverride'];
 export const CLIENT_LIST = ['clientList'];
 export const REPORT = ['report'];
 export const TRANSLATION = ['translation'];
@@ -21,9 +26,7 @@ export const TRANSLATION = ['translation'];
 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

@@ -2,14 +2,15 @@ import axios from 'axios';
 import { CustomField, CustomFieldKey, CustomFields } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
 
 const customFieldsPath = `${apiEntryUrl}/custom-fields`;
 
 /**
  * Requests list of known custom fields
  */
-export async function getCustomFields(): Promise<CustomFields> {
+export async function getCustomFields(options?: RequestOptions): Promise<CustomFields> {
-  const res = await axios.get(customFieldsPath);
+  const res = await axios.get(customFieldsPath, { signal: options?.signal });
   return res.data;
 }
 

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

@@ -0,0 +1,58 @@
+import axios from 'axios';
+import { type CustomViewsListResponse, type MessageResponse } from 'ontime-types';
+
+import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
+import { axiosConfig } from './requestTimeouts';
+import { downloadBlob } from './utils';
+
+const customViewsPath = `${apiEntryUrl}/custom-views`;
+
+export async function getCustomViews(options?: RequestOptions): Promise<CustomViewsListResponse> {
+  const response = await axios.get<CustomViewsListResponse>(customViewsPath, {
+    signal: options?.signal,
+    timeout: options?.timeout ?? axiosConfig.shortTimeout,
+  });
+  return response.data;
+}
+
+export async function uploadCustomView(slug: string, file: File, options?: RequestOptions): Promise<MessageResponse> {
+  const formData = new FormData();
+  formData.append('indexHtml', file);
+
+  return (
+    await axios.post<MessageResponse>(`${customViewsPath}/${encodeURIComponent(slug)}/upload`, formData, {
+      signal: options?.signal,
+      timeout: options?.timeout ?? axiosConfig.longTimeout,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+  ).data;
+}
+
+export async function downloadCustomView(slug: string, options?: RequestOptions): Promise<void> {
+  const response = await axios.get(`${customViewsPath}/${encodeURIComponent(slug)}/download`, {
+    signal: options?.signal,
+    timeout: options?.timeout ?? axiosConfig.longTimeout,
+    responseType: 'blob',
+  });
+
+  downloadBlob(response.data, `${slug}-index.html`);
+}
+
+export async function restoreDemoView(options?: RequestOptions): Promise<MessageResponse> {
+  return (
+    await axios.post<MessageResponse>(`${customViewsPath}/restore-demo`, null, {
+      signal: options?.signal,
+      timeout: options?.timeout ?? axiosConfig.longTimeout,
+    })
+  ).data;
+}
+
+export async function deleteCustomView(slug: string, options?: RequestOptions): Promise<void> {
+  await axios.delete(`${customViewsPath}/${encodeURIComponent(slug)}`, {
+    signal: options?.signal,
+    timeout: options?.timeout ?? axiosConfig.longTimeout,
+  });
+}

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

@@ -2,6 +2,8 @@ import axios, { AxiosResponse } from 'axios';
 import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
+import { axiosConfig } from './requestTimeouts';
 import { createBlob, downloadBlob } from './utils';
 
 const dbPath = `${apiEntryUrl}/db`;
@@ -10,7 +12,7 @@ const dbPath = `${apiEntryUrl}/db`;
  * HTTP request to the current DB
  */
 export function getDb(filename: string): Promise<AxiosResponse<DatabaseModel>> {
-  return axios.post(`${dbPath}/download`, { filename });
+  return axios.post(`${dbPath}/download`, { filename }, { timeout: axiosConfig.longTimeout });
 }
 
 /**
@@ -37,6 +39,7 @@ export async function uploadProjectFile(file: File): Promise<MessageResponse> {
   const formData = new FormData();
   formData.append('project', file);
   const response = await axios.post(`${dbPath}/upload`, formData, {
+    timeout: axiosConfig.longTimeout,
     headers: {
       'Content-Type': 'multipart/form-data',
     },
@@ -76,8 +79,11 @@ export async function quickProject(data: QuickStartData): Promise<MessageRespons
 /**
  * HTTP request to get the list of available project files
  */
-export async function getProjects(): Promise<ProjectFileListResponse> {
+export async function getProjects(options?: RequestOptions): Promise<ProjectFileListResponse> {
-  const res = await axios.get(`${dbPath}/all`);
+  const res = await axios.get(`${dbPath}/all`, {
+    signal: options?.signal,
+    timeout: options?.timeout,
+  });
   return res.data;
 }
 

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

@@ -1,41 +1,81 @@
 import axios, { AxiosResponse } from 'axios';
-import { CustomFields, Rundown } from 'ontime-types';
+import type {
+  SpreadsheetPreviewResponse,
+  SpreadsheetWorksheetMetadata,
+  SpreadsheetWorksheetOptions,
+} from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
+import { axiosConfig } from './requestTimeouts';
+import { downloadBlob } from './utils';
 
 const excelPath = `${apiEntryUrl}/excel`;
 
 /**
  * upload Excel file to server
- * @return string - file ID op the uploaded file
+ * Uploads an Excel file and returns worksheet names plus metadata for the initial worksheet.
  */
-export async function upload(file: File) {
+export async function upload(file: File, requestOptions?: RequestOptions): Promise<SpreadsheetWorksheetOptions> {
   const formData = new FormData();
   formData.append('excel', file);
-  await axios.post(`${excelPath}/upload`, formData, {
+  const response: AxiosResponse<SpreadsheetWorksheetOptions> = await axios.post(`${excelPath}/upload`, formData, {
+    signal: requestOptions?.signal,
+    timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
     headers: {
       'Content-Type': 'multipart/form-data',
     },
   });
+  return response.data;
+}
+
+export async function importRundownPreview(
+  options: ImportMap,
+  requestOptions?: RequestOptions,
+): Promise<SpreadsheetPreviewResponse> {
+  const response: AxiosResponse<SpreadsheetPreviewResponse> = await axios.post(
+    `${excelPath}/preview`,
+    {
+      options,
+    },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
+  return response.data;
+}
+
+export async function getWorksheetMetadata(
+  worksheet: string,
+  requestOptions?: RequestOptions,
+): Promise<SpreadsheetWorksheetMetadata> {
+  const response: AxiosResponse<SpreadsheetWorksheetMetadata> = await axios.post(
+    `${excelPath}/metadata`,
+    { worksheet },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
+
+  return response.data;
 }
 
 /**
- * Get Worksheet names
+ * Downloads a xlsx representation of the rundown from the server
- * @return string[] - array of available worksheets
  */
-export async function getWorksheetNames(): Promise<string[]> {
+export async function downloadAsExcel(rundownId: string, fileName?: string, requestOptions?: RequestOptions) {
-  const response: AxiosResponse<string[]> = await axios.get(`${excelPath}/worksheets`);
+  try {
-  return response.data;
+    const response = await axios.get(`${excelPath}/${rundownId}/export`, {
-}
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+      responseType: 'blob',
+    });
 
-type PreviewSpreadsheetResponse = {
+    downloadBlob(response.data, `${fileName ?? 'Ontime_rundown'}.xlsx`);
-  rundown: Rundown;
+  } catch (error) {
-  customFields: CustomFields;
+    console.error('Error downloading file:', error);
-};
+  }
-export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
-  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
-    options,
-  });
-  return response.data;
 }

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

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

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

@@ -2,22 +2,28 @@ import axios, { AxiosResponse } from 'axios';
 import { ProjectData, ProjectLogoResponse } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
+import { axiosConfig } from './requestTimeouts';
 
 const projectPath = `${apiEntryUrl}/project`;
 
 /**
  * HTTP request to fetch project data
  */
-export async function getProjectData(): Promise<ProjectData> {
+export async function getProjectData(options?: RequestOptions): Promise<ProjectData> {
-  const res = await axios.get(projectPath);
+  const res = await axios.get(projectPath, {
+    signal: options?.signal,
+    timeout: options?.timeout,
+  });
   return res.data;
 }
 
 /**
  * HTTP request to mutate project data
  */
-export async function postProjectData(data: ProjectData): Promise<AxiosResponse<ProjectData>> {
+export async function postProjectData(data: ProjectData): Promise<ProjectData> {
-  return axios.post(projectPath, data);
+  const response = await axios.post(projectPath, data);
+  return response.data;
 }
 
 /**
@@ -27,6 +33,7 @@ export async function uploadProjectLogo(file: File): Promise<AxiosResponse<Proje
   const formData = new FormData();
   formData.append('image', file);
   const response = await axios.post(`${projectPath}/upload`, formData, {
+    timeout: axiosConfig.longTimeout,
     headers: {
       'Content-Type': 'multipart/form-data',
     },

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

@@ -2,16 +2,16 @@ import axios from 'axios';
 import { OntimeReport } from 'ontime-types';
 
 import { ontimeQueryClient } from '../../common/queryClient';
-
+import { REPORT, apiEntryUrl } from './constants';
-import { apiEntryUrl, REPORT } from './constants';
+import type { RequestOptions } from './requestOptions';
 
 export const reportUrl = `${apiEntryUrl}/report`;
 
 /**
  * HTTP request to fetch all reports
  */
-export async function fetchReport(): Promise<OntimeReport> {
+export async function fetchReport(options?: RequestOptions): Promise<OntimeReport> {
-  const res = await axios.get(reportUrl);
+  const res = await axios.get(reportUrl, { signal: options?.signal });
   return res.data;
 }
 

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

@@ -0,0 +1,4 @@
+export type RequestOptions = {
+  signal?: AbortSignal;
+  timeout?: number;
+};

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

@@ -0,0 +1,8 @@
+/**
+ * Keep a short global timeout for regular API requests, but allow
+ * longer windows for file transfer and heavy import/export operations.
+ */
+export const axiosConfig = {
+  shortTimeout: 20 * 1000, // 20 seconds
+  longTimeout: 3 * 60 * 1000, // 3 minutes
+} as const;

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

@@ -1,8 +1,19 @@
 import axios, { AxiosResponse } from 'axios';
-import { EntryId, OntimeEntry, OntimeEvent, ProjectRundownsList, Rundown, TransientEventPayload } from 'ontime-types';
+import {
+  EntryId,
+  OntimeEntry,
+  OntimeEvent,
+  ProjectRundownsList,
+  RenumberCues,
+  Rundown,
+  RundownImportPayload,
+  TransientEventPayload,
+} from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
 
+type RundownId = string;
 const rundownPath = `${apiEntryUrl}/rundowns`;
 
 // #region operations on project rundowns =========================
@@ -10,24 +21,38 @@ const rundownPath = `${apiEntryUrl}/rundowns`;
 /**
  * HTTP request to fetch a list of existing rundowns
  */
-export async function fetchProjectRundownList(): Promise<ProjectRundownsList> {
+export async function fetchProjectRundownList(options?: RequestOptions): Promise<ProjectRundownsList> {
-  const res = await axios.get(rundownPath);
+  const res = await axios.get(rundownPath, { signal: options?.signal });
   return res.data;
 }
 
 /**
  * HTTP request to fetch all entries in the currently loaded rundown
  */
-export async function fetchCurrentRundown(): Promise<Rundown> {
+export async function fetchCurrentRundown(options?: RequestOptions): Promise<Rundown> {
-  const res = await axios.get(`${rundownPath}/current`);
+  const res = await axios.get(`${rundownPath}/current`, { signal: options?.signal });
+  if (!isValidRundown(res.data)) {
+    throw new Error('Invalid rundown payload');
+  }
+  return res.data;
+}
+
+/**
+ * HTTP request to fetch all entries in the given rundown
+ */
+export async function fetchRundown(rundownId: RundownId, options?: RequestOptions): Promise<Rundown> {
+  const res = await axios.get(`${rundownPath}/${rundownId}`, { signal: options?.signal });
+  if (!isValidRundown(res.data)) {
+    throw new Error('Invalid rundown payload');
+  }
   return res.data;
 }
 
 /**
  * HTTP request to switch the currently loaded rundown
  */
-export async function loadRundown(id: string): Promise<AxiosResponse<ProjectRundownsList>> {
+export async function loadRundown(rundownId: RundownId): Promise<AxiosResponse<ProjectRundownsList>> {
-  return axios.post(`${rundownPath}/${id}/load`);
+  return axios.post(`${rundownPath}/${rundownId}/load`);
 }
 
 /**
@@ -37,11 +62,34 @@ export async function createRundown(title: string): Promise<AxiosResponse<Projec
   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(id: string): Promise<AxiosResponse<ProjectRundownsList>> {
+export async function deleteRundown(rundownId: RundownId): Promise<AxiosResponse<ProjectRundownsList>> {
-  return axios.delete(`${rundownPath}/${id}`);
+  return axios.delete(`${rundownPath}/${rundownId}`);
+}
+
+/**
+ * HTTP request to apply an imported rundown using a merge strategy or into a new rundown
+ */
+export async function importRundownWithOptions(
+  payload: RundownImportPayload,
+): Promise<AxiosResponse<ProjectRundownsList>> {
+  return axios.post(`${rundownPath}/import`, payload);
 }
 
 // #endregion operations on project rundowns ======================
@@ -51,7 +99,7 @@ export async function deleteRundown(id: string): Promise<AxiosResponse<ProjectRu
  * HTTP request to post new entry
  */
 export async function postAddEntry(
-  rundownId: string,
+  rundownId: RundownId,
   data: TransientEventPayload,
 ): Promise<AxiosResponse<OntimeEntry>> {
   return axios.post(`${rundownPath}/${rundownId}/entry`, data);
@@ -60,7 +108,10 @@ export async function postAddEntry(
 /**
  * HTTP request to edit an entry
  */
-export async function putEditEntry(rundownId: string, data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
+export async function putEditEntry(
+  rundownId: RundownId,
+  data: Partial<OntimeEntry>,
+): Promise<AxiosResponse<OntimeEntry>> {
   return axios.put(`${rundownPath}/${rundownId}/entry`, data);
 }
 
@@ -72,10 +123,17 @@ export type BatchEditEntry = {
 /**
  * HTTP request to edit multiple events
  */
-export async function putBatchEditEvents(rundownId: string, data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
+export async function putBatchEditEvents(rundownId: RundownId, data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
   return axios.put(`${rundownPath}/${rundownId}/batch`, data);
 }
 
+/**
+ * HTTP request to renumber cues for multiple events
+ */
+export function patchRenumberCues(rundownId: RundownId, data: RenumberCues): Promise<AxiosResponse<Rundown>> {
+  return axios.patch(`${rundownPath}/${rundownId}/renumber`, data);
+}
+
 export type ReorderEntry = {
   entryId: EntryId;
   destinationId: EntryId;
@@ -85,57 +143,78 @@ export type ReorderEntry = {
 /**
  * HTTP request to reorder an entry
  */
-export async function patchReorderEntry(rundownId: string, data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
+export async function patchReorderEntry(rundownId: RundownId, data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
   return axios.patch(`${rundownPath}/${rundownId}/reorder`, data);
 }
 
 /**
  * HTTP request to swap two events
  */
-export async function requestEventSwap(rundownId: string, from: EntryId, to: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function requestEventSwap(
+  rundownId: RundownId,
+  from: EntryId,
+  to: EntryId,
+): Promise<AxiosResponse<Rundown>> {
   return axios.patch(`${rundownPath}/${rundownId}/swap`, { from, to });
 }
 
 /**
  * HTTP request to request application of delay
  */
-export async function requestApplyDelay(rundownId: string, delayId: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function requestApplyDelay(rundownId: RundownId, delayId: EntryId): Promise<AxiosResponse<Rundown>> {
   return axios.patch(`${rundownPath}/${rundownId}/applydelay/${delayId}`);
 }
 
 /**
  * HTTP request for cloning an entry
  */
-export async function postCloneEntry(rundownId: string, entryId: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function postCloneEntry(
-  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`);
+  rundownId: RundownId,
+  entryId: EntryId,
+  options?: { before?: EntryId; after?: EntryId },
+): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`, options);
 }
 
 /**
  * HTTP request for grouping a list of entries into a group
  */
-export async function requestGroupEntries(rundownId: string, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
+export async function requestGroupEntries(rundownId: RundownId, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
   return axios.post(`${rundownPath}/${rundownId}/group`, { ids: entryIds });
 }
 
 /**
  * HTTP request for dissolving of a group
  */
-export async function requestUngroup(rundownId: string, groupId: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function requestUngroup(rundownId: RundownId, groupId: EntryId): Promise<AxiosResponse<Rundown>> {
   return axios.post(`${rundownPath}/${rundownId}/ungroup/${groupId}`);
 }
 
 /**
  * HTTP request to delete entries of a given rundown
  */
-export async function deleteEntries(rundownId: string, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
+export async function deleteEntries(rundownId: RundownId, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
   return axios.delete(`${rundownPath}/${rundownId}/entries`, { data: { ids: entryIds } });
 }
 
 /**
  * HTTP request to delete all entries of a given rundown
  */
-export async function requestDeleteAll(rundownId: string): Promise<AxiosResponse<Rundown>> {
+export async function requestDeleteAll(rundownId: RundownId): Promise<AxiosResponse<Rundown>> {
   return axios.delete(`${rundownPath}/${rundownId}/all`);
 }
 
 // #endregion operations on rundown entries =======================
+
+function isValidRundown(x: any): x is Rundown {
+  return (
+    x &&
+    typeof x === 'object' &&
+    typeof x.id === 'string' &&
+    Array.isArray(x.order) &&
+    Array.isArray(x.flatOrder) &&
+    x.entries &&
+    typeof x.entries === 'object' &&
+    typeof x.revision === 'number'
+  );
+}

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

@@ -2,14 +2,15 @@ import axios from 'axios';
 import { GetInfo, LinkOptions } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
 
 const sessionPath = `${apiEntryUrl}/session`;
 
 /**
  * HTTP request to retrieve application info
  */
-export async function getInfo(): Promise<GetInfo> {
+export async function getInfo(options?: RequestOptions): Promise<GetInfo> {
-  const res = await axios.get(`${sessionPath}/info`);
+  const res = await axios.get(`${sessionPath}/info`, { signal: options?.signal });
   return res.data;
 }
 

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

@@ -1,15 +1,16 @@
 import axios, { AxiosResponse } from 'axios';
-import { Settings } from 'ontime-types';
+import { PortInfo, Settings } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
 
 const settingsPath = `${apiEntryUrl}/settings`;
 
 /**
  * HTTP request to retrieve application settings
  */
-export async function getSettings(): Promise<Settings> {
+export async function getSettings(options?: RequestOptions): Promise<Settings> {
-  const res = await axios.get(settingsPath);
+  const res = await axios.get(settingsPath, { signal: options?.signal });
   return res.data;
 }
 
@@ -26,3 +27,18 @@ export async function postSettings(data: Settings): Promise<AxiosResponse<Settin
 export async function postShowWelcomeDialog(show: boolean) {
   axios.post(`${settingsPath}/welcomedialog`, { show });
 }
+
+/**
+ * HTTP request to retrieve server port
+ */
+export async function getServerPort(options?: RequestOptions): Promise<PortInfo> {
+  const res = await axios.get(`${settingsPath}/serverport`, { signal: options?.signal });
+  return res.data;
+}
+
+/**
+ * HTTP request to set server port
+ */
+export async function postServerPort(serverPort: number): Promise<AxiosResponse<PortInfo>> {
+  return axios.post(`${settingsPath}/serverport`, { serverPort });
+}

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

@@ -1,8 +1,15 @@
 import axios, { AxiosResponse } from 'axios';
-import { AuthenticationStatus, CustomFields, Rundown } from 'ontime-types';
+import type {
+  AuthenticationStatus,
+  SpreadsheetPreviewResponse,
+  SpreadsheetWorksheetMetadata,
+  SpreadsheetWorksheetOptions,
+} from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
+import { axiosConfig } from './requestTimeouts';
 
 const sheetsPath = `${apiEntryUrl}/sheets`;
 
@@ -23,6 +30,7 @@ export const verifyAuthenticationStatus = async (): Promise<{
 export const requestConnection = async (
   file: File,
   sheetId: string,
+  requestOptions?: RequestOptions,
 ): Promise<{
   verification_url: string;
   user_code: string;
@@ -31,6 +39,8 @@ export const requestConnection = async (
   formData.append('client_secret', file);
 
   const response = await axios.post(`${sheetsPath}/${sheetId}/connect`, formData, {
+    signal: requestOptions?.signal,
+    timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
     headers: {
       'Content-Type': 'multipart/form-data',
     },
@@ -53,23 +63,71 @@ export const revokeAuthentication = async (): Promise<{ authenticated: Authentic
 export const previewRundown = async (
   sheetId: string,
   options: ImportMap,
-): Promise<{
+  requestOptions?: RequestOptions,
-  rundown: Rundown;
+): Promise<SpreadsheetPreviewResponse> => {
-  customFields: CustomFields;
+  const response = await axios.post(
-}> => {
+    `${sheetsPath}/${sheetId}/read`,
-  const response = await axios.post(`${sheetsPath}/${sheetId}/read`, { options });
+    { options },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
   return response.data;
 };
 
-export const getWorksheetNames = async (sheetId: string): Promise<string[]> => {
+/**
-  const response: AxiosResponse<string[]> = await axios.post(`${sheetsPath}/${sheetId}/worksheets`);
+ * Fetches derived metadata for a single worksheet by reading its rows and detecting headers.
+ */
+export const getWorksheetMetadata = async (
+  sheetId: string,
+  worksheet: string,
+  requestOptions?: RequestOptions,
+): Promise<SpreadsheetWorksheetMetadata> => {
+  const response: AxiosResponse<SpreadsheetWorksheetMetadata> = await axios.post(
+    `${sheetsPath}/${sheetId}/metadata`,
+    { worksheet },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
+  return response.data;
+};
+
+/**
+ * Fetches the available worksheets for a Google Sheet. Metadata is loaded lazily per worksheet.
+ */
+export const getWorksheetOptions = async (
+  sheetId: string,
+  requestOptions?: RequestOptions,
+): Promise<SpreadsheetWorksheetOptions> => {
+  const response: AxiosResponse<SpreadsheetWorksheetOptions> = await axios.post(
+    `${sheetsPath}/${sheetId}/worksheet-options`,
+    undefined,
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
   return response.data;
 };
 
 /**
  * HTTP request to upload the rundown to a google sheet
  */
-export const uploadRundown = async (sheetId: string, options: ImportMap): Promise<void> => {
+export const uploadRundown = async (
-  const response = await axios.post(`${sheetsPath}/${sheetId}/write`, { options });
+  sheetId: string,
+  options: ImportMap,
+  requestOptions?: RequestOptions,
+): Promise<void> => {
+  const response = await axios.post(
+    `${sheetsPath}/${sheetId}/write`,
+    { options },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
   return response.data;
 };

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

@@ -2,14 +2,15 @@ import axios from 'axios';
 import { URLPreset } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
 
 const urlPresetsPath = `${apiEntryUrl}/url-presets`;
 
 /**
  * HTTP request to retrieve all presets
  */
-export async function getUrlPresets(): Promise<URLPreset[]> {
+export async function getUrlPresets(options?: RequestOptions): Promise<URLPreset[]> {
-  const res = await axios.get(urlPresetsPath);
+  const res = await axios.get(urlPresetsPath, { signal: options?.signal });
   return res.data;
 }
 

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

@@ -2,6 +2,7 @@ import axios from 'axios';
 import type { ViewSettings } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
 
 const viewSettingsPath = `${apiEntryUrl}/view-settings`;
 
@@ -9,8 +10,8 @@ const viewSettingsPath = `${apiEntryUrl}/view-settings`;
  * HTTP request to fetch view settings
  * @returns
  */
-export async function getViewSettings(): Promise<ViewSettings> {
+export async function getViewSettings(options?: RequestOptions): Promise<ViewSettings> {
-  const res = await axios.get(viewSettingsPath);
+  const res = await axios.get(viewSettingsPath, { signal: options?.signal });
   return res.data;
 }
 

apps/client/src/common/components/autocomplete-input/AutocompleteInput.module.scss

@@ -0,0 +1,61 @@
+.positioner {
+  outline: 0;
+}
+
+.popup {
+  font-size: 1rem;
+  box-sizing: border-box;
+  padding: 2px;
+  min-width: var(--anchor-width);
+  max-width: var(--available-width);
+  border: 1px solid $gray-1000;
+  border-radius: $component-border-radius-md;
+  background-color: $gray-1200;
+  color: $ui-white;
+
+  &[data-empty][data-hide-empty] {
+    display: none;
+  }
+}
+
+.list {
+  box-sizing: border-box;
+  max-height: 20rem;
+  max-height: var(--available-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-block: 0.25rem;
+  scroll-padding-block: 1.5rem;
+  outline: 0;
+}
+
+.item,
+.empty:not(:empty) {
+  box-sizing: border-box;
+  padding: 0.25rem 0.5rem;
+  line-height: 1rem;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  outline: 0;
+  cursor: default;
+  user-select: none;
+  overflow-wrap: break-word;
+
+  &[data-highlighted] {
+    background-color: $blue-700;
+  }
+}
+
+.itemLabel {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.empty {
+  color: $gray-400;
+}

apps/client/src/common/components/autocomplete-input/AutocompleteInput.tsx

@@ -0,0 +1,121 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import type { ReactNode, Ref } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { cx } from '../../utils/styleUtils';
+import type { InputProps } from '../input/input/Input';
+import { getScrollParent } from './autocompleteInput.utils';
+
+import inputStyles from '../input/input/Input.module.scss';
+import styles from './AutocompleteInput.module.scss';
+
+export interface AutocompleteInputProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange'> {
+  options: string[];
+  value: string;
+  onValueChange: (value: string) => void;
+  emptyLabel?: string;
+  trailingElement?: (option: string) => ReactNode;
+  inputRef?: Ref<HTMLInputElement>;
+  openOnFocus?: boolean;
+}
+
+export default function AutocompleteInput({
+  className,
+  disabled,
+  emptyLabel,
+  fluid,
+  height = 'medium',
+  inputRef,
+  onValueChange,
+  options,
+  openOnFocus = false,
+  trailingElement,
+  value,
+  variant = 'subtle',
+  ...inputProps
+}: AutocompleteInputProps) {
+  const internalInputRef = useRef<HTMLInputElement | null>(null);
+  const [open, setOpen] = useState(false);
+  const { onFocus, ...restInputProps } = inputProps;
+
+  const handleInputRef = (node: HTMLInputElement | null) => {
+    internalInputRef.current = node;
+
+    if (!inputRef) {
+      return;
+    }
+
+    if (typeof inputRef === 'function') {
+      inputRef(node);
+      return;
+    }
+
+    inputRef.current = node;
+  };
+
+  // close the popover when the parent scrollable container scrolls or the window resizes
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const scrollTarget = getScrollParent(internalInputRef.current);
+    const handleScroll = () => setOpen(false);
+
+    scrollTarget.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', handleScroll, { passive: true });
+
+    return () => {
+      scrollTarget.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('resize', handleScroll);
+    };
+  }, [open]);
+
+  return (
+    <BaseAutocomplete.Root
+      items={options}
+      autoHighlight
+      highlightItemOnHover
+      disabled={disabled}
+      open={open}
+      value={value}
+      onOpenChange={setOpen}
+      onValueChange={onValueChange}
+    >
+      <BaseAutocomplete.Input
+        ref={handleInputRef}
+        onFocus={(event) => {
+          onFocus?.(event);
+          if (openOnFocus) {
+            setOpen(true);
+          }
+        }}
+        className={cx([
+          inputStyles.input,
+          inputStyles[variant],
+          inputStyles[height],
+          fluid && inputStyles.fluid,
+          className,
+        ])}
+        {...restInputProps}
+      />
+      <BaseAutocomplete.Portal>
+        <BaseAutocomplete.Positioner side='bottom' align='start' className={styles.positioner}>
+          <BaseAutocomplete.Popup className={styles.popup} data-hide-empty={emptyLabel ? undefined : ''}>
+            <BaseAutocomplete.List className={styles.list}>
+              <BaseAutocomplete.Collection>
+                {(option: string) => (
+                  <BaseAutocomplete.Item key={option} value={option} className={styles.item}>
+                    <span className={styles.itemLabel}>{option}</span>
+                    {trailingElement?.(option)}
+                  </BaseAutocomplete.Item>
+                )}
+              </BaseAutocomplete.Collection>
+              {emptyLabel && <BaseAutocomplete.Empty className={styles.empty}>{emptyLabel}</BaseAutocomplete.Empty>}
+            </BaseAutocomplete.List>
+          </BaseAutocomplete.Popup>
+        </BaseAutocomplete.Positioner>
+      </BaseAutocomplete.Portal>
+    </BaseAutocomplete.Root>
+  );
+}

apps/client/src/common/components/autocomplete-input/autocompleteInput.utils.ts

@@ -0,0 +1,14 @@
+export function getScrollParent(node: HTMLElement | null): HTMLElement | Window {
+  let parent = node?.parentElement ?? null;
+
+  while (parent) {
+    const { overflowY } = window.getComputedStyle(parent);
+    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {
+      return parent;
+    }
+
+    parent = parent.parentElement;
+  }
+
+  return window;
+}

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,5 +1,6 @@
-@use '@/theme/viewerDefs' as *;
+@use './buttonVariants' as base;
-@import './BaseButtonStyles.module.scss';
+
+@include base.button-variants;
 
 .baseButton {
   position: relative;
@@ -81,4 +82,3 @@
 .fluid {
   width: 100%;
 }
-

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

@@ -1,5 +1,6 @@
-@use '@/theme/viewerDefs' as *;
+@use './buttonVariants' as base;
-@import './BaseButtonStyles.module.scss';
+
+@include base.button-variants;
 
 .baseIconButton {
   aspect-ratio: 1;

apps/client/src/common/components/buttons/_buttonVariants.scss

@@ -0,0 +1,144 @@
+@use '@/theme/themeTokens' as *;
+@use '@/theme/viewerDefs' as *;
+
+@mixin button-variants {
+  .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/checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import { IoCheckmark } from 'react-icons/io5';
-import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
 
 import style from './Checkbox.module.scss';
 

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

@@ -2,13 +2,13 @@ import { useState } from 'react';
 import { IoArrowForward } from 'react-icons/io5';
 
 import { navigatorConstants } from '../../../viewerConfig';
-import { setClientRemote } from '../../hooks/useSocket';
 import useUrlPresets from '../../hooks-query/useUrlPresets';
+import { setClientRemote } from '../../hooks/useSocket';
 import Button from '../buttons/Button';
+import Dialog from '../dialog/Dialog';
 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';
@@ -57,7 +57,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
   ];
 
   return (
-    <Modal
+    <Dialog
       isOpen={isOpen}
       onClose={onClose}
       showCloseButton
@@ -98,7 +98,10 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
                   fluid
                   options={viewOptions}
                   defaultValue={viewOptions[0].value}
-                  onValueChange={(value) => setSelected(value)}
+                  onValueChange={(value) => {
+                    if (value === null) return;
+                    setSelected(value);
+                  }}
                   disabled={enabledPresets.length === 0}
                 />
               </label>

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

@@ -1,8 +1,7 @@
 import { PropsWithChildren, useRef, useState } from 'react';
-import { IoCheckmark } from 'react-icons/io5';
+import { IoCheckmark, IoCopy } from 'react-icons/io5';
-import { IoCopy } from 'react-icons/io5';
 
-import copyToClipboard from '../../utils/copyToClipboard';
+import { copyToClipboard } from '../../utils/copyToClipboard';
 import { cx } from '../../utils/styleUtils';
 import Button from '../buttons/Button';
 import IconButton from '../buttons/IconButton';
@@ -26,15 +25,19 @@ export default function CopyTag({
   const [copied, setCopied] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const handleClick = () => {
+  const handleClick = async () => {
-    copyToClipboard(copyValue);
+    try {
-    setCopied(true);
+      await copyToClipboard(copyValue);
+      setCopied(true);
 
-    // reset copied state
+      // reset copied state
-    if (timeoutRef.current) {
+      if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // ignore errors
     }
-    timeoutRef.current = setTimeout(() => setCopied(false), 2000);
   };
 
   return (

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

@@ -6,7 +6,7 @@
   transform: translateX(-50%);
 
   padding-inline: 1rem;
-  min-width: min(420px, 90vw);
+  min-width: min(600px, 90vw);
 
   background-color: $gray-1250;
   color: $ui-white;

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

@@ -1,6 +1,6 @@
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 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';
 
@@ -12,7 +12,7 @@ interface DialogProps {
   showCloseButton?: boolean;
   showBackdrop?: boolean;
   bodyElements: ReactNode;
-  footerElements: ReactNode;
+  footerElements?: ReactNode;
   onClose: () => void;
 }
 

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

@@ -27,16 +27,16 @@
   }
 }
 
-
 .item {
   outline: 0;
   cursor: default;
   padding-block: 0.5rem;
-  padding-inline: 1rem 2rem;
+  padding-inline: 1rem;
 
   display: flex;
-  gap: 0.5rem;
+  justify-content: space-between;
-  line-height: 1em;
+  align-items: flex-start;
+  gap: 1rem;
 
   svg {
     color: $gray-500;
@@ -61,6 +61,42 @@
     border-radius: 3px;
     background-color: $gray-1000;
   }
+
+  &[data-type='destructive'] {
+    color: $red-500;
+    svg {
+      color: $red-500;
+    }
+  }
+}
+
+.item .iconStrong {
+  color: $ui-white;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  line-height: 1.2;
+}
+
+.description {
+  color: $gray-400;
+  font-size: calc(1rem - 2px);
+  line-height: 1.3;
+}
+
+.shortcut {
+  color: $gray-500;
+  font-size: calc(1rem - 4px);
+  letter-spacing: 0.02em;
 }
 
 .separator {

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

@@ -1,16 +1,18 @@
+import { Menu as BaseMenu } from '@base-ui/react/menu';
 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';
+  type: 'item' | 'destructive';
   label: string;
+  description?: string;
   icon?: IconType;
   disabled?: boolean;
   onClick: () => void;
+  shortcut?: string;
 };
 
 export type DropdownMenuOption = DropdownMenuItemDivider | DropdownMenuItem;
@@ -31,9 +33,21 @@ export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChil
                 return <BaseMenu.Separator key={index} className={style.separator} />;
               }
               return (
-                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
+                <BaseMenu.Item
-                  {item.icon && <item.icon />}
+                  key={index}
-                  {item.label}
+                  className={style.item}
+                  onClick={item.onClick}
+                  disabled={item.disabled}
+                  data-type={item.type}
+                >
+                  <span className={style.content}>
+                    <span className={style.label}>
+                      {item.icon && <item.icon />}
+                      {item.label}
+                    </span>
+                    {item.description && <span className={style.description}>{item.description}</span>}
+                  </span>
+                  {item.shortcut && <span className={style.shortcut}>{item.shortcut}</span>}
                 </BaseMenu.Item>
               );
             })}
@@ -69,8 +83,14 @@ export function PositionedDropdownMenu({ items, isOpen, position, onClose }: Pos
               }
               return (
                 <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
-                  {item.icon && <item.icon />}
+                  <span className={style.content}>
-                  {item.label}
+                    <span className={style.label}>
+                      {item.icon && <item.icon />}
+                      {item.label}
+                    </span>
+                    {item.description && <span className={style.description}>{item.description}</span>}
+                  </span>
+                  {item.shortcut && <span className={style.shortcut}>{item.shortcut}</span>}
                 </BaseMenu.Item>
               );
             })}

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

@@ -1,6 +1,7 @@
-.corner {
+.arrow {
   transform: rotate(45deg);
-
+}
+.corner {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
@@ -21,6 +22,10 @@
   }
 }
 
+.offsetCorner {
+  right: 2rem;
+}
+
 .header {
   font-size: 1.5rem;
 }
@@ -51,6 +56,13 @@
 
   &.vertical {
     width: 1px;
-    height: 0.75em;  
+    height: 0.75em;
   }
 }
+
+.panel {
+  position: relative;
+  border-radius: $panel-border-radius;
+  background-color: $bg-container-l2;
+  padding: 1rem;
+}

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

@@ -1,13 +1,33 @@
-import type { HTMLAttributes, LabelHTMLAttributes } from 'react';
+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 Corner({ className, ...elementProps }: IconBaseProps) {
+export function CornerExtract({ className, ...elementProps }: IconBaseProps) {
-  return <IoArrowUp className={cx([style.corner, className])} {...elementProps} />;
+  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>) {
@@ -35,3 +55,7 @@ interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
 export function Separator({ className, orientation = 'vertical', ...elementProps }: SeparatorProps) {
   return <div className={cx([style.separator, style[orientation], className])} role='separator' {...elementProps} />;
 }
+
+export function Panel({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx([style.panel, className])} {...props} />;
+}

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

@@ -1,10 +1,9 @@
-/* eslint-disable react/destructuring-assignment */
-import React from 'react';
 // skipcq: JS-C1003 - sentry does not expose itself as an ES Module.
 import * as Sentry from '@sentry/react';
+import React from 'react';
 
-import { hasConnected, reconnectAttempts } from '../../../common/utils/socket';
 import { runtimeStore } from '../../stores/runtime';
+import { getConnectionState, getReconnectAttempts } from '../../utils/socket';
 
 import style from './ErrorBoundary.module.scss';
 
@@ -37,7 +36,7 @@ class ErrorBoundary extends React.Component {
       scope.setExtras({
         error,
         store: appState,
-        hasSocket: { hasConnected, reconnectAttempts },
+        hasSocket: { hasConnected: getConnectionState(), reconnectAttempts: getReconnectAttempts() },
       });
       const eventId = Sentry.captureException(error);
       this.setState({ eventId, info });

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

@@ -1,6 +1,6 @@
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
 import { useCallback, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { MILLIS_PER_MINUTE } from 'ontime-utils';
 
 import { setClientRemote } from '../../hooks/useSocket';
 import { useClientStore } from '../../stores/clientStore';

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

@@ -16,6 +16,33 @@
   }
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.title,
+.body {
+  margin: 0;
+}
+
+.title {
+  color: $ui-white;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.body {
+  color: $gray-400;
+  line-height: 1.5;
+}
+
+.footer {
+  width: fit-content;
+}
+
 .info {
   svg {
     color: $info-blue;

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

@@ -10,13 +10,37 @@ interface InfoProps {
   type?: 'info' | 'warning' | 'error';
 }
 
-export default function Info({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
+interface InfoSectionProps {
+  className?: string;
+}
+
+function InfoTitle({ className, children }: PropsWithChildren<InfoSectionProps>) {
+  return <p className={cx([style.title, className])}>{children}</p>;
+}
+
+function InfoBody({ className, children }: PropsWithChildren<InfoSectionProps>) {
+  return <p className={cx([style.body, className])}>{children}</p>;
+}
+
+function InfoFooter({ className, children }: PropsWithChildren<InfoSectionProps>) {
+  return <div className={cx([style.footer, className])}>{children}</div>;
+}
+
+function InfoRoot({ className, type = 'info', children }: PropsWithChildren<InfoProps>) {
   return (
     <div className={cx([style.infoLabel, style[type], className])}>
       {type === 'info' && <IoAlertCircle />}
       {type === 'warning' && <IoWarning />}
       {type === 'error' && <IoWarning />}
-      <div>{children}</div>
+      <div className={style.content}>{children}</div>
     </div>
   );
 }
+
+const Info = Object.assign(InfoRoot, {
+  Title: InfoTitle,
+  Body: InfoBody,
+  Footer: InfoFooter,
+});
+
+export default Info;

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

@@ -1,6 +1,6 @@
-import { RefObject, useEffect } from 'react';
 // @ts-expect-error no types from library
 import autosize from 'autosize/dist/autosize';
+import { RefObject, useEffect } from 'react';
 
 import Textarea, { type TextareaProps } from '../textarea/Textarea';
 

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

@@ -1,7 +1,7 @@
-import { useController, UseControllerProps } from 'react-hook-form';
-import { IoEyedrop } from 'react-icons/io5';
 import { useDebouncedCallback } from '@mantine/hooks';
 import { ViewSettings } from 'ontime-types';
+import { UseControllerProps, useController } from 'react-hook-form';
+import { IoEyedrop } from 'react-icons/io5';
 
 import { cx, getAccessibleColour } from '../../../utils/styleUtils';
 import PopoverPicker from '../popover-picker/PopoverPicker';

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

@@ -11,7 +11,7 @@
   outline: none;
 
   &::placeholder {
-    color: $gray-500;
+    color: $gray-600;
     letter-spacing: 0;
   }
 

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

@@ -1,4 +1,4 @@
-import { forwardRef, InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, forwardRef } from 'react';
 
 import { cx } from '../../../utils/styleUtils';
 

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

@@ -1,6 +1,6 @@
+import { Popover } from '@base-ui/react/popover';
 import { PropsWithChildren } from 'react';
 import { HexAlphaColorPicker, HexColorInput } from 'react-colorful';
-import { Popover } from '@base-ui-components/react/popover';
 
 import PopoverContents from '../../popover/Popover';
 

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

@@ -1,10 +1,10 @@
+import { HotkeyItem, getHotkeyHandler } from '@mantine/hooks';
 import { ChangeEvent, KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { getHotkeyHandler, HotkeyItem } from '@mantine/hooks';
 
 interface UseReactiveTextInputReturn {
   value: string;
-  onChange: (event: ChangeEvent) => void;
+  onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  onBlur: (event: ChangeEvent) => void;
+  onBlur: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 }
 
@@ -15,7 +15,9 @@ export default function useReactiveTextInput(
   options?: {
     submitOnEnter?: boolean;
     submitOnCtrlEnter?: boolean;
+    submitOnTab?: boolean;
     onCancelUpdate?: () => void;
+    onTabCancel?: () => void;
     allowSubmitSameValue?: boolean;
     allowKeyboardNavigation?: boolean;
   },
@@ -23,6 +25,10 @@ export default function useReactiveTextInput(
   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);
+  // track escape to prevent the subsequent blur from submitting
+  const isEscaping = useRef(false);
+  // track tab-out to prevent blur from submitting (used by timer cells)
+  const isTabbing = useRef(false);
 
   useEffect(() => {
     if (typeof initialText === 'undefined') {
@@ -78,6 +84,7 @@ export default function useReactiveTextInput(
    * @param {string} valueToSubmit
    */
   const handleEscape = useCallback(() => {
+    isEscaping.current = true;
     // No need to update if it hasn't changed
     setText(initialText);
     // force the text to be the initial value
@@ -141,16 +148,30 @@ export default function useReactiveTextInput(
         event.stopPropagation();
       }
 
+      // for cells that opt out of tab-submit, track tab-out without preventing navigation
+      if (event.key === 'Tab' && options?.submitOnTab === false) {
+        isTabbing.current = true;
+      }
+
       hotKeyHandler(event);
     };
-  }, [handleEscape, handleSubmit, options?.submitOnCtrlEnter, options?.submitOnEnter, text]);
+  }, [handleEscape, handleSubmit, options?.submitOnCtrlEnter, options?.submitOnEnter, options?.submitOnTab, text]);
 
   return {
     value: text,
-    onChange: (event: ChangeEvent) => handleChange((event.target as HTMLInputElement).value),
+    onChange: (event) => handleChange(event.target.value),
-    onBlur: (event: ChangeEvent) => {
+    onBlur: (event) => {
+      if (isTabbing.current) {
+        isTabbing.current = false;
+        (options?.onTabCancel ?? options?.onCancelUpdate)?.();
+        return;
+      }
+      if (isEscaping.current) {
+        isEscaping.current = false;
+        return;
+      }
       if (!isKeyboardSubmitting.current) {
-        handleSubmit((event.target as HTMLInputElement).value);
+        handleSubmit(event.target.value);
       }
     },
     onKeyDown: keyHandler,

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

@@ -1,4 +1,4 @@
-import { forwardRef, TextareaHTMLAttributes } from 'react';
+import { TextareaHTMLAttributes, forwardRef } from 'react';
 
 import { cx } from '../../../utils/styleUtils';
 

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

@@ -1,5 +1,5 @@
-import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { millisToString, parseUserTime } from 'ontime-utils';
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 
 import { cx } from '../../../utils/styleUtils';
 import Input from '../input/Input';

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

@@ -1,7 +1,8 @@
-import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { millisToString, parseUserTime } from 'ontime-utils';
+import { FocusEvent, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { cx } from '../../../utils/styleUtils';
+import { formatTime, getFormatFromSettings } from '../../../utils/time';
 import Input from '../input/Input';
 
 import style from './TimeInput.module.scss';
@@ -16,6 +17,7 @@ interface TimeInputProps<T extends string> {
   align?: 'left' | 'center';
   delayed?: boolean;
   className?: string;
+  shouldFormat?: boolean;
 }
 
 export default function TimeInput<T extends string>({
@@ -28,10 +30,12 @@ export default function TimeInput<T extends string>({
   align = 'center',
   delayed,
   className,
+  shouldFormat,
 }: TimeInputProps<T>) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [value, setValue] = useState<string>('');
   const ignoreChange = useRef(false);
+  const formatAs12Hr = useMemo(() => shouldFormat && getFormatFromSettings() === '12', [shouldFormat]);
 
   /**
    * @description Resets input value to given
@@ -39,10 +43,12 @@ export default function TimeInput<T extends string>({
   const resetValue = useCallback(() => {
     if (typeof time !== 'number' || isNaN(time)) {
       setValue('00:00:00');
+    } else if (shouldFormat) {
+      setValue(formatTime(time));
     } else {
       setValue(millisToString(time));
     }
-  }, [time]);
+  }, [time, shouldFormat]);
 
   /**
    * @description Selects input text on focus
@@ -139,9 +145,10 @@ export default function TimeInput<T extends string>({
       onBlur={onBlurHandler}
       onKeyDown={onKeyDownHandler}
       value={value}
-      maxLength={8}
+      maxLength={formatAs12Hr ? 11 : 8}
       style={{
         textAlign: align,
+        width: formatAs12Hr ? '7.5em' : '6.5em',
       }}
     />
   );

apps/client/src/common/components/kbd/Kbd.module.scss

@@ -0,0 +1,14 @@
+.kbd {
+  display: inline-block;
+  min-width: 1.5rem;
+  padding: 0.0625rem 0.375rem;
+  border-radius: 2px;
+  background-color: $gray-1100;
+  color: $ui-white;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+  font-family: monospace;
+  font-size: calc(1rem - 4px);
+  line-height: 1.5;
+  text-align: center;
+  white-space: nowrap;
+}

apps/client/src/common/components/kbd/Kbd.tsx

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+import style from './Kbd.module.scss';
+
+export default function Kbd({ children }: PropsWithChildren) {
+  return <kbd className={style.kbd}>{children}</kbd>;
+}

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

@@ -18,7 +18,7 @@
   }
 
   &:focus {
-    outline: none; 
+    outline: none;
     box-shadow: 0 1px 0 0 currentColor;
   }
-} 
+}

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

@@ -3,20 +3,30 @@
   top: 10vh;
   left: 50%;
   transform: translateX(-50%);
-  
+
   padding-inline: 1rem;
-  min-width: min(680px, 90vw);
+  min-width: min(880px, 90vw);
   min-height: min(200px, 10vh);
-  max-width: min(900px, 90vw);
+  max-width: min(1200px, 90vw);
 
   background-color: $gray-1250;
   color: $ui-white;
-  border-radius: 3px;
+  border-radius: $component-border-radius-md;
   box-shadow: $box-shadow-l1;
   border: 1px solid $gray-1100;
   outline: none;
 }
 
+.wide {
+  top: 4vh;
+  min-width: min(1280px, 96vw);
+  max-width: min(1800px, 98vw);
+  height: 88vh;
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
+}
+
 .backdrop {
   position: fixed;
   inset: 0;
@@ -30,8 +40,6 @@
 }
 
 .title {
-  font-size: 1rem;
-  font-weight: 600;
   padding-block: 1rem;
 
   display: flex;
@@ -39,6 +47,11 @@
   justify-content: space-between;
 }
 
+.titleText {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
 .body {
   display: flex;
   flex-direction: column;
@@ -48,6 +61,13 @@
   overflow-y: auto;
 }
 
+.wide .body {
+  flex: 1;
+  min-height: 0;
+  max-height: none;
+  overflow: hidden;
+}
+
 .footer {
   padding-block: 1rem;
   display: flex;

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

@@ -1,7 +1,8 @@
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import type { ReactNode } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
 
+import { cx } from '../../utils/styleUtils';
 import IconButton from '../buttons/IconButton';
 
 import style from './Modal.module.scss';
@@ -11,6 +12,7 @@ interface ModalProps {
   title?: string;
   showCloseButton?: boolean;
   showBackdrop?: boolean;
+  size?: 'default' | 'wide';
   bodyElements: ReactNode;
   footerElements?: ReactNode;
   onClose: () => void;
@@ -21,6 +23,7 @@ export default function Modal({
   title,
   showCloseButton,
   showBackdrop,
+  size = 'default',
   bodyElements,
   footerElements,
   onClose,
@@ -31,13 +34,13 @@ export default function Modal({
       onOpenChange={(isOpen) => {
         if (!isOpen) onClose();
       }}
-      dismissible={false}
+      disablePointerDismissal
     >
       <BaseDialog.Portal>
         {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
-        <BaseDialog.Popup className={style.modal}>
+        <BaseDialog.Popup aria-label={title} className={cx([style.modal, size === 'wide' && style.wide])}>
           <div className={style.title}>
-            {title}
+            {title ? <BaseDialog.Title className={style.titleText}>{title}</BaseDialog.Title> : <div />}
             {showCloseButton && (
               <IconButton variant='subtle-white' onClick={onClose}>
                 <IoClose />
@@ -45,7 +48,7 @@ export default function Modal({
             )}
           </div>
           <div className={style.body}>{bodyElements}</div>
-          <div className={style.footer}>{footerElements}</div>
+          {footerElements ? <div className={style.footer}>{footerElements}</div> : null}
         </BaseDialog.Popup>
       </BaseDialog.Portal>
     </BaseDialog.Root>

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

@@ -38,8 +38,6 @@ $progress-bar-br: 3px;
 .multiprogress-bar__indicator-bar {
   background-color: var(--background-color-override, $ui-black);
   opacity: 0.8;
-  transition: 1s linear;
-  transition-property: width;
 
   .multiprogress-bar--ignore-css-override & {
     background-color: $ui-black;

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

@@ -1,5 +1,6 @@
 import { MaybeNumber } from 'ontime-types';
 
+import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
 import { getProgress } from '../../utils/getProgress';
 import { cx } from '../../utils/styleUtils';
 
@@ -8,6 +9,7 @@ import './MultiPartProgressBar.scss';
 interface MultiPartProgressBar {
   now: MaybeNumber;
   complete: MaybeNumber;
+  eventId?: string | null;
   normalColor: string;
   warning?: MaybeNumber;
   warningColor: string;
@@ -23,6 +25,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
   const {
     now,
     complete,
+    eventId,
     normalColor,
     warning,
     warningColor,
@@ -34,7 +37,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
     className = '',
   } = props;
 
-  const percentRemaining = 100 - getProgress(now, complete);
+  const percentRemaining = 100 - useAnimatedProgress(now, complete, eventId);
   const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
   const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
   const isOvertime = now !== null && now < 0;

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

@@ -1,18 +1,19 @@
+import { Dialog } from '@base-ui/react/dialog';
+import { useDisclosure, useFullscreen } from '@mantine/hooks';
 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 { isLocalhost } from '../../../externals';
+import { isLocalhost, supportsFullscreen } from '../../../externals';
-import { useKeepAwakeOptions } from '../../../features/keep-awake/KeepAwake';
+import { canUseWakeLock, useKeepAwakeOptions } from '../../../features/keep-awake/useWakeLock';
 import { navigatorConstants } from '../../../viewerConfig';
+import useUrlPresets from '../../hooks-query/useUrlPresets';
+import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import IconButton from '../buttons/IconButton';
 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';
@@ -29,6 +30,7 @@ export default memo(NavigationMenu);
 function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
   const id = useClientStore((store) => store.id);
   const name = useClientStore((store) => store.name);
+  const isSmallScreen = useIsSmallScreen();
 
   const [isRenameOpen, handlers] = useDisclosure(false);
   const { fullscreen, toggle } = useFullscreen();
@@ -56,16 +58,18 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
             </IconButton>
           </div>
           <div className={style.body}>
-            <NavigationMenuItem active={fullscreen} onClick={toggle}>
+            {supportsFullscreen && (
-              Toggle Fullscreen
+              <NavigationMenuItem active={fullscreen} onClick={toggle}>
-              {fullscreen ? <IoContract /> : <IoExpand />}
+                Toggle Fullscreen
-            </NavigationMenuItem>
+                {fullscreen ? <IoContract /> : <IoExpand />}
+              </NavigationMenuItem>
+            )}
             <NavigationMenuItem active={mirror} onClick={() => toggleMirror()}>
               Flip Screen
               <IoSwapVertical />
               {mirror && <span className={style.note}>Active</span>}
             </NavigationMenuItem>
-            {window.isSecureContext && (
+            {canUseWakeLock && (
               <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
                 Keep Awake
                 <LuCoffee />
@@ -77,11 +81,15 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
             <hr className={style.separator} />
 
             <EditorNavigation />
-            <ClientLink to='cuesheet' current={location.pathname === '/cuesheet'}>
+            <ClientLink
+              to='cuesheet'
+              current={location.pathname === '/cuesheet'}
+              postAction={isSmallScreen ? onClose : undefined}
+            >
               <IoLockClosedOutline />
               Cuesheet
             </ClientLink>
-            <ClientLink to='op' current={location.pathname === '/op'}>
+            <ClientLink to='op' current={location.pathname === '/op'} postAction={isSmallScreen ? onClose : undefined}>
               <IoLockClosedOutline />
               Operator
             </ClientLink>
@@ -89,10 +97,17 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
             <hr className={style.separator} />
 
             {navigatorConstants.map((route) => (
-              <ClientLink key={route.url} to={route.url} current={location.pathname === `/${route.url}`}>
+              <ClientLink
+                key={route.url}
+                to={route.url}
+                current={location.pathname === `/${route.url}`}
+                postAction={isSmallScreen ? onClose : undefined}
+              >
                 {route.label}
               </ClientLink>
             ))}
+
+            <PresetNavigation isSmallScreen={isSmallScreen} onClose={onClose} />
           </div>
 
           {isLocalhost && (
@@ -105,3 +120,27 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
     </Dialog.Root>
   );
 }
+
+function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean; onClose: () => void }) {
+  const location = useLocation();
+  const { data: urlPresets } = useUrlPresets();
+  const navPresets = urlPresets.filter((preset) => preset.enabled && preset.displayInNav);
+
+  if (navPresets.length === 0) return null;
+
+  return (
+    <>
+      <hr className={style.separator} />
+      {navPresets.map((preset) => (
+        <ClientLink
+          key={preset.alias}
+          to={`preset/${preset.alias}`}
+          current={location.pathname === `/preset/${preset.alias}`}
+          postAction={isSmallScreen ? onClose : undefined}
+        >
+          {preset.alias}
+        </ClientLink>
+      ))}
+    </>
+  );
+}

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

@@ -1,11 +1,12 @@
-import { memo } from 'react';
 import { useDisclosure, useHotkeys } from '@mantine/hooks';
+import { memo } from 'react';
+import { useSearchParams } from 'react-router';
 
+import { hasCustomParams, useSavedViewParams } from '../../stores/savedViewParams';
 import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
-
 import FloatingNavigation from './floating-navigation/FloatingNavigation';
-import ViewLockedIcon from './view-locked-icon/ViewLockedIcon';
 import NavigationMenu from './NavigationMenu';
+import ViewLockedIcon from './view-locked-icon/ViewLockedIcon';
 
 interface ViewNavigationMenuProps {
   /** prevent navigation */
@@ -18,6 +19,9 @@ export default memo(ViewNavigationMenu);
 function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
   const [isMenuOpen, menuHandler] = useDisclosure();
   const { open: showEditFormDrawer } = useViewParamsEditorStore();
+  const [searchParams] = useSearchParams();
+  const savedParams = useSavedViewParams((store) => store.params);
+  const hasSavedChanges = hasCustomParams(searchParams) || Object.keys(savedParams).length > 0;
 
   useHotkeys([
     [
@@ -47,6 +51,7 @@ function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNaviga
       <FloatingNavigation
         toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
         toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
+        hasSavedChanges={hasSavedChanges}
       />
       {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
     </>

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

@@ -1,4 +1,29 @@
-.linkIcon {
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   margin-left: auto;
+}
+
+.linkIcon {
   @include rotate-fourty-five;
 }
+
+.indicator {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: $active-indicator;
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.clear {
+  opacity: 0.6;
+  transition: opacity $transition-time-action;
+
+  &:hover,
+  &:focus-visible {
+    opacity: 1;
+  }
+}

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

@@ -1,9 +1,17 @@
-import { PropsWithChildren } from 'react';
+import { MouseEvent, PropsWithChildren } from 'react';
-import { IoArrowUp } from 'react-icons/io5';
+import { IoArrowUp, IoCloseOutline } from 'react-icons/io5';
-import { useNavigate } from 'react-router';
+import { useLocation, useNavigate, useSearchParams } from 'react-router';
 
 import { useElectronEvent } from '../../../hooks/useElectronEvent';
+import {
+  hasCustomParams,
+  reservedParams,
+  stripReservedParams,
+  useSavedViewParams,
+} from '../../../stores/savedViewParams';
 import { handleLinks } from '../../../utils/linkUtils';
+import IconButton from '../../buttons/IconButton';
+import Tooltip from '../../tooltip/Tooltip';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
 
 import style from './ClientLink.module.scss';
@@ -11,24 +19,109 @@ import style from './ClientLink.module.scss';
 interface ClientLinkProps {
   current: boolean;
   to: string;
+  postAction?: () => void;
 }
 
-export default function ClientLink({ current, to, children }: PropsWithChildren<ClientLinkProps>) {
+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)}>
+      <ElectronNavigationItem current={current} to={to} postAction={postAction}>
         {children}
-        <IoArrowUp className={style.linkIcon} />
+      </ElectronNavigationItem>
-      </NavigationMenuItem>
     );
   }
 
   return (
-    <NavigationMenuItem active={current} onClick={() => navigate(`/${to}`)}>
+    <BrowserNavigationItem current={current} to={to} postAction={postAction}>
       {children}
+    </BrowserNavigationItem>
+  );
+}
+
+function ElectronNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
+  const navigateToLink = () => {
+    handleLinks(to);
+    postAction?.();
+  };
+
+  return (
+    <NavigationMenuItem active={current} onClick={navigateToLink}>
+      {children}
+      <span className={style.trailing}>
+        <IoArrowUp className={style.linkIcon} />
+      </span>
+    </NavigationMenuItem>
+  );
+}
+
+function BrowserNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { params: savedParams, save, clear } = useSavedViewParams();
+
+  /**
+   * Save the params of the view we are leaving and resolve the destination,
+   * restoring any params previously saved for the target view.
+   */
+  const resolveDestination = () => {
+    const currentView = location.pathname.replace(/^\//, '');
+    save(currentView, stripReservedParams(location.search));
+    const restored = savedParams[to];
+    return `${to}${restored ? `?${restored}` : ''}`;
+  };
+
+  const isCustomised = current ? hasCustomParams(searchParams) : Boolean(savedParams[to]);
+
+  const navigateToLink = () => {
+    const destination = resolveDestination();
+    navigate(`/${destination}`);
+    postAction?.();
+  };
+
+  /**
+   * Clear the saved settings for this route without navigating to it.
+   * When it is the current view, also reset the live URL to its defaults.
+   */
+  const clearViewSettings = (event: MouseEvent) => {
+    event.stopPropagation();
+    clear(to);
+
+    // if mounted, clear the URL params
+    if (current) {
+      const preserved = new URLSearchParams();
+      reservedParams.forEach((key) => {
+        const value = searchParams.get(key);
+        if (value !== null) preserved.set(key, value);
+      });
+      setSearchParams(preserved);
+    }
+  };
+
+  return (
+    <NavigationMenuItem active={current} onClick={navigateToLink}>
+      {children}
+      {isCustomised && (
+        <span className={style.trailing}>
+          <span className={style.indicator} aria-hidden data-testid='client-link__saved-indicator' />
+          <Tooltip
+            text='Reset to default'
+            render={
+              <IconButton
+                variant='ghosted-white'
+                size='small'
+                className={style.clear}
+                aria-label='Reset to default'
+                onClick={clearViewSettings}
+              />
+            }
+          >
+            <IoCloseOutline />
+          </Tooltip>
+        </span>
+      )}
     </NavigationMenuItem>
   );
 }

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

@@ -22,3 +22,19 @@
   top: 0;
   z-index: $zindex-nav;
 }
+
+.buttonWithIndicator {
+  position: relative;
+  display: inline-flex;
+}
+
+.indicator {
+  position: absolute;
+  top: -0.15rem;
+  right: -0.15rem;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 50%;
+  background-color: $active-indicator;
+  pointer-events: none;
+}

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

@@ -1,5 +1,4 @@
-import { IoApps } from 'react-icons/io5';
+import { IoApps, IoSettingsOutline } from 'react-icons/io5';
-import { IoSettingsOutline } from 'react-icons/io5';
 
 import { useFadeOutOnInactivity } from '../../../hooks/useFadeOutOnInactivity';
 import { cx } from '../../../utils/styleUtils';
@@ -10,9 +9,10 @@ import style from './FloatingNavigation.module.scss';
 interface FloatingNavigationProps {
   toggleMenu?: () => void;
   toggleSettings?: () => void;
+  hasSavedChanges?: boolean;
 }
 
-export default function FloatingNavigation({ toggleMenu, toggleSettings }: FloatingNavigationProps) {
+export default function FloatingNavigation({ toggleMenu, toggleSettings, hasSavedChanges }: FloatingNavigationProps) {
   const isButtonShown = useFadeOutOnInactivity(true);
 
   return (
@@ -21,15 +21,18 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings }: Float
       className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
     >
       {toggleMenu && (
-        <IconButton
+        <div className={style.buttonWithIndicator}>
-          variant='subtle-white'
+          <IconButton
-          size='xlarge'
+            variant='subtle-white'
-          onClick={toggleMenu}
+            size='xlarge'
-          aria-label='toggle menu'
+            onClick={toggleMenu}
-          data-testid='navigation__toggle-menu'
+            aria-label='toggle menu'
-        >
+            data-testid='navigation__toggle-menu'
-          <IoApps />
+          >
-        </IconButton>
+            <IoApps />
+          </IconButton>
+          {hasSavedChanges && <span className={style.indicator} data-testid='navigation__saved-indicator' />}
+        </div>
       )}
       {toggleSettings && (
         <IconButton

apps/client/src/common/components/navigation-menu/navigation-menu-item/NavigationMenuItem.tsx

@@ -24,7 +24,9 @@ export default function NavigationMenuItem({
       role='button'
       onClick={onClick}
       onKeyDown={(event) => {
-        isKeyEnter(event) && onClick();
+        if (isKeyEnter(event)) {
+          onClick();
+        }
       }}
     >
       {children}

apps/client/src/common/components/popover/Popover.module.scss

@@ -5,7 +5,7 @@
   color: $ui-white;
   background-color: $gray-1250;
 
-  border-radius: 3px;  
+  border-radius: 3px;
   box-shadow: $box-shadow-l1;
   border: 1px solid $gray-1000;
 
@@ -27,4 +27,3 @@
   font-size: 1rem;
   margin-bottom: 0.5rem;
 }
-