feat: dynamically set PWA start_url

This commit fixes an issue where the PWA would always start at the root of the application, regardless of the page you were on when you installed it. This is fixed by: - Consolidating the two manifest files into a single file. - Adding a new route to the server that dynamically generates the `start_url` in the manifest based on the current route. - Adding an e2e test to verify the changes.
2026-08-06 07:53:54 +00:00 · 2025-07-26 14:23:17 +00:00 · 2025-07-26 14:22:49 +00:00 · 2025-07-26 14:22:21 +00:00 · 2025-07-24 17:27:02 +00:00
408 changed files with 8228 additions and 13132 deletions
@@ -34,10 +34,6 @@ e2e/tests/fixtures/tmp/*
 build/
 dist/

-# bundled assets
-translations.json
-override.css
-
 # working stuff
 **/TODO.md

@@ -20,20 +20,19 @@ development.
 Locally, we would need to run both the React client and the node.js server in development mode

 From the project root, run the following commands
- __Install the project dependencies__ by running `pnpm i`
- __Run dev mode__ by running `pnpm turbo dev`

+- __Install the project dependencies__ by running `pnpm i`
+- __Run dev mode__ by running `turbo dev`

 ### Debugging backend

-The previous command will start the development servers for both the client, server and electron applications.
-Typically in dev mode we prefer to start these in separate terminals to help with error tracking and debugging.
+To debug backend code in Node.js:

-We do that by creating two terminals an running
- __Run the React UI__ by running `pnpm turbo dev --filter=ontime-ui`
- __Run the nodejs server__ by running `pnpm turbo dev --filter=ontime-server`
-
- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by running `pnpm turbo dev:inspect --filter=ontime-server`.
+- Open two separate terminals and navigate to the `apps/client` and `apps/server` directories.
+- In each terminal, run the command `pnpm dev` to start the development servers for both the client and server
+  applications.
+- If you need to set breakpoints and inspect the code execution, enable Node.js inspect mode by
+  running `pnpm dev:inspect`.

 ## TESTING

@@ -46,7 +45,7 @@ Generally we have 2 types of tests.

 Unit tests are contained in mostly all the apps and packages (client, server and utils)

-You can run unit tests by running `pnpm turbo test:pipeline` from the project root.
+You can run unit tests by running `turbo run test:pipeline` from the project root.
 This will run all tests and close test runner.

 Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode
@@ -77,13 +76,13 @@ You can generate a distribution for your OS by running the following steps.
 From the project root, run the following commands

 - __Install the project dependencies__ by running `pnpm i`
- __Build the UI and server__ by running `pnpm turbo run build:electron`
- __Create the package__ by running `pnpm turbo run dist-win`, `pnpm turbo run dist-mac` or `pnpm turbo run dist-linux`
+- __Build the UI and server__ by running `turbo run build:electron`
+- __Create the package__ by running `turbo run dist-win`, `turbo run dist-mac` or `turbo run 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 turbo run dist-mac:local` command to build a MacOS distribution locally and skip the notary process.
+Use the `turbo run dist-mac:local` command to build a MacOS distribution locally.

 ## DOCKER

@@ -99,3 +98,10 @@ Other useful commands

 - __List running processes__ by running `docker ps`
 - __Kill running process__ by running `docker kill <process-id>`
+
+## General Info
+
+# APP Building
+
+We build the app from app.js for almost all applications. The output file will still be named index.cjs. This is because of Electron.
+Building the app from index.ts only applies for applications that don't use electron. index.ts will take over the initialization of the server and UI when electron isn't present.
@@ -43,12 +43,12 @@ Ontime is made by entertainment and broadcast engineers and used by
 - Houses of worship

 ## Main features
- **Multiplatform**: Available as a Cloud service and for Windows, macOS, Linux, or self-hosted via Docker.
- **In any device**: Ontime is available to any device with a browser, eg: tablets, mobile phones, laptops, signage, media servers...
- **Team Collaboration**: Dedicated views for directors, operators, backstage, and signage.
- **Real-Time Updates**: Manage and communicate runtime delays effortlessly.
- **Automatable**: Ontime can be fully or partially controlled by an operator, or run standalone with the system clock
- **Flexible Integrations**: Use one of the APIs provided (OSC, HTTP, Websocket) or the available [Companion module](https://bitfocus.io/connections/getontime-ontime) to integrate into your workflow (vMix, disguise, Qlab, OBS)
+- [x] **Multiplatform**: Available for Windows / MacOS, Linux. You can also self host with the docker image
+- [x] **In any device**: Ontime is available in the local network to any device with a browser, eg: tablets, mobile phones, laptops, signage, media servers...
+- [x] **Made for teams**: Ontime caters to different roles in your production team: directors, operators, backstage and front of house signage...
+- [x] **Delay workflows**: Manage and communicate runtime delays in real-time to your team
+- [x] **Automatable**: Ontime can be fully or partially controlled by an operator, or run standalone with the system clock
+- [x] **Focus on integrations**: Use one of the APIs provided (OSC, HTTP, Websocket) or the available [Companion module](https://bitfocus.io/connections/getontime-ontime) to integrate into your workflow (vMix, disguise, Qlab, OBS)

 ... and a lot more ...

@@ -79,29 +79,75 @@ Ontime is made by video engineers and entertainment technicians.

 ## Using Ontime

-### Getting started
+Ontime can be started by downloading the latest release for your platform. \
+Alternatively you can also use the docker image, available at [Docker Hub](https://hub.docker.com/r/getontime/ontime)

-The easiest way to start with Ontime is by leveraging our [Cloud service](https://getontime.no). \
-This will give you immediate access to running instances of Ontime which are available to share with anyone with an internet connection.
+Once installed and running, any device in the network has access to Ontime.

-Alternatively, you can run Ontime locally for free by downloading the latest release for your platform or using the docker image, available at [Docker Hub](https://hub.docker.com/r/getontime/ontime)
+Ontime provides different screens which allow for different types of interactions with the data. These are called
+views. \
+Each view in Ontime focuses on empowering a specific role or achieving a particular task.

-Once installed and running, any device that shares the same network as Ontime will have access to Ontime.
+You can access the different views by reaching the ontime server, in your browser, at (_default port
+4001_) `http://localhost:4001` or `http://192.168.1.3:4001`
+
+```
+For the backstage views
+-------------------------------------------------------------
+IP.ADDRESS:4001/timer      > Presenter / Stage timer view
+IP.ADDRESS:4001/backstage  > Stage Manager / Backstage view
+IP.ADDRESS:4001/countdown  > Countdown to anything
+IP.ADDRESS:4001/studio     > Studio Clock
+IP.ADDRESS:4001/timeline   > Timeline
+```
+
+```
+For production views
+-------------------------------------------------------------
+IP.ADDRESS:4001/editor    > the control interface, same as the app
+IP.ADDRESS:4001/cuesheet  > realtime cuesheets for collaboration
+IP.ADDRESS:4001/op        > automated views for operators
+```

 More information is available [in our docs](https://docs.getontime.no)

-## Continued development
+## Roadmap
+
+### Continued development

 Ontime is under active development. We continue adding and improving features in collaboration with users.

 Have an idea? Reach out via [email](mail@getontime.no)
 or [open an issue](https://github.com/cpvalente/ontime/issues/new)

-## Issues
+### Issues

 We use Github's issue tracking for bug reporting and feature requests. \
 Found a bug? [Open an issue](https://github.com/cpvalente/ontime/issues/new).

+#### Unsigned App
+
+When installing the app you would see warning screens from the Operating System like:
+
+in Windows
+
+`Microsoft Defender SmartScreen prevented an unrecognised app from starting. Running this app might put your PC at risk.`
+
+or in Linux
+
+`Could Not Display "ontime-linux.AppImage`
+
+We currently only sign MacOS releases. \
+Purchasing the certificates for both Mac and Windows would mean a recurrent expense which we are not able to cover.
+
+You can circumvent this by allowing the execution of the app manually.
+
+- In Windows: click `more` -> `Run Anyway`
+- In Linux: right-click the AppImage file: `Properties` -> `Permissions` -> `Allow Executing File as a Program`
+
+If you have tips on how to improve this or would like to sponsor the code signing,
+please [open an issue](https://github.com/cpvalente/ontime/issues/new)
+
 ## Contributing

 Looking to contribute? All types of help are appreciated, from coding to testing and feature specification.
@@ -113,7 +159,6 @@ Information about the project setup can be found in the [development documentati
 ## Links
 - [Ontime website](https://getontime.no) 
 - [Documentation](https://docs.getontime.no)
- [Video tutorials](https://www.youtube.com/@ontimeapp)
 - [Ontime discord server](https://discord.com/invite/eje3CSUEXm)

 ## License
@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "4.0.0-beta.2",
+    "version": "4.0.0-alpha.0",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -9,8 +9,7 @@
    <meta name="ontime" content="ontime - time keeping for live events" />
    <link rel="apple-touch-icon" href="/ontime-logo.png" />
    <link rel="icon" type="image/png" href="/ontime-logo.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-    <link rel="manifest" href="/manifest.json" />
+    <link rel="manifest" href="/manifest.webmanifest" />
    <meta name="robots" content="noindex" />
    <title>ontime</title>
    <style>
@@ -1,37 +1,37 @@
 {
  "name": "ontime-ui",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-alpha.0",
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.3",
+    "@base-ui-components/react": "1.0.0-beta.1",
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource/open-sans": "^5.2.6",
-    "@mantine/hooks": "^8.2.8",
-    "@sentry/react": "^10.2.0",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@fontsource/open-sans": "^5.0.28",
+    "@mantine/hooks": "^8.1.2",
+    "@sentry/react": "^8.43.0",
    "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.85.9",
-    "@tanstack/react-query-devtools": "^5.85.9",
+    "@tanstack/react-query": "^5.62.7",
+    "@tanstack/react-query-devtools": "^5.62.7",
    "@tanstack/react-table": "^8.21.3",
    "autosize": "^6.0.1",
-    "axios": "^1.11.0",
-    "babel-plugin-react-compiler": "19.1.0-rc.3",
-    "csv-stringify": "^6.6.0",
-    "prismjs": "^1.30.0",
-    "react": "^19.1.1",
+    "axios": "^1.9.0",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "csv-stringify": "^6.4.5",
+    "prismjs": "^1.29.0",
+    "react": "^19.1.0",
    "react-colorful": "^5.6.1",
-    "react-dom": "^19.1.1",
+    "react-dom": "^19.1.0",
    "react-fast-compare": "^3.2.2",
-    "react-hook-form": "^7.62.0",
-    "react-icons": "5.5.0",
-    "react-qr-code": "^2.0.18",
-    "react-router": "^7.8.2",
+    "react-hook-form": "^7.53.1",
+    "react-icons": "5.4.0",
+    "react-qr-code": "^2.0.12",
+    "react-router-dom": "^6.3.0",
    "react-simple-code-editor": "^0.14.1",
-    "react-virtuoso": "^4.14.0",
-    "web-vitals": "^5.1.0",
-    "zustand": "^5.0.8"
+    "web-vitals": "^3.1.1",
+    "zustand": "^5.0.3"
  },
  "scripts": {
    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -64,8 +64,8 @@
    "@sentry/vite-plugin": "^2.16.1",
    "@tanstack/eslint-plugin-query": "^5.8.4",
    "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.12",
-    "@types/react-dom": "^19.1.9",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
    "@typescript-eslint/eslint-plugin": "catalog:",
    "@typescript-eslint/parser": "catalog:",
    "@vitejs/plugin-react": "4.5.1",
@@ -1,19 +0,0 @@
-{
-  "name": "ontime",
-  "short_name": "ontime",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "ontime-logo.png",
-      "type": "image/png"
-    }
-  ],
-  "scope": "/",
-  "start_url": "/",
-  "display": "",
-  "theme_color": "#121212",
-  "background_color": "#ffffff"
-}
@@ -0,0 +1,15 @@
+{
+  "name": "ontime",
+  "short_name": "ontime",
+  "icons": [
+    {
+      "src": "/ontime-logo.png",
+      "sizes": "295x295",
+      "type": "image/png"
+    }
+  ],
+  "scope": "/",
+  "display": "standalone",
+  "theme_color": "#2B5ABC",
+  "background_color": "#101010"
+}
@@ -1,10 +0,0 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [
-    { "src": "/ontime-logo.png", "sizes": "295x295", "type": "image/png" }
-  ],
-  "theme_color": "#2B5ABC",
-  "background_color": "#101010",
-  "display": "standalone"
-}
@@ -1,4 +1,4 @@
-import { BrowserRouter } from 'react-router';
+import { BrowserRouter } from 'react-router-dom';
 import { Tooltip } from '@base-ui-components/react/tooltip';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -1,34 +1,38 @@
-import { ComponentType, lazy, Suspense, useEffect, useMemo } from 'react';
-import { Navigate, Route, useLocation, useNavigate, useParams } from 'react-router';
-import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
+import React from 'react';
+import { Navigate, Route } from 'react-router-dom';

-import ViewNavigationMenu from './common/components/navigation-menu/ViewNavigationMenu';
-import { PresetContext } from './common/context/PresetContext';
 import { useClientPath } from './common/hooks/useClientPath';
-import useUrlPresets from './common/hooks-query/useUrlPresets';
-import { getRouteFromPreset } from './common/utils/urlPresets';
 import Log from './features/log/Log';
-import Loader from './views/common/loader/Loader';
-import NotFound from './views/common/not-found/NotFound';
+import withPreset from './features/PresetWrapper';
+import withData from './features/viewers/ViewWrapper';
 import ViewLoader from './views/ViewLoader';
-import { getIsNavigationLocked, sessionScope } from './externals';
 import { initializeSentry } from './sentry.config';

-const Timer = lazy(() => import('./views/timer/Timer'));
-const Countdown = lazy(() => import('./views/countdown/Countdown'));
-const Backstage = lazy(() => import('./views/backstage/Backstage'));
-const StudioClock = lazy(() => import('./views/studio/Studio'));
-const Timeline = lazy(() => import('./views/timeline/TimelinePage'));
-const ProjectInfo = lazy(() => import('./views/project-info/ProjectInfo'));
+const Editor = React.lazy(() => import('./views/editor/ProtectedEditor'));
+const Cuesheet = React.lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
+const Operator = React.lazy(() => import('./features/operator/OperatorExport'));

-const Editor = lazy(() => import('./views/editor/ProtectedEditor'));
-const Cuesheet = lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
-const Operator = lazy(() => import('./features/operator/OperatorExport'));
+const TimerView = React.lazy(() => import('./views/timer/Timer'));
+const Countdown = React.lazy(() => import('./views/countdown/Countdown'));

-const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
-const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
-const TimerControl = lazy(() => import('./features/control/playback/TimerControlExport'));
-const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
+const Backstage = React.lazy(() => import('./views/backstage/Backstage'));
+const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
+const StudioClock = React.lazy(() => import('./views/studio/Studio'));
+const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));
+
+const STimer = withPreset(withData(TimerView));
+const SCountdown = withPreset(withData(Countdown));
+const SBackstage = withPreset(withData(Backstage));
+const SProjectInfo = withPreset(ProjectInfo); // NOTE: ProjectInfo does not use the viewWrapper since it has no options
+const SStudio = withPreset(withData(StudioClock));
+const STimeline = withPreset(withData(Timeline));
+const PCuesheet = withPreset(Cuesheet);
+const POperator = withPreset(Operator);
+
+const EditorFeatureWrapper = React.lazy(() => import('./features/EditorFeatureWrapper'));
+const RundownPanel = React.lazy(() => import('./features/rundown/RundownExport'));
+const TimerControl = React.lazy(() => import('./features/control/playback/TimerControlExport'));
+const MessageControl = React.lazy(() => import('./features/control/message/MessageControlExport'));

 // Initialize Sentry with our configuration
 const SentryRouter = initializeSentry();
@@ -38,77 +42,73 @@ export default function AppRouter() {
  useClientPath();

  return (
-    <Suspense fallback={<Loader />}>
+    <React.Suspense fallback={null}>
      <SentryRouter>
        <Route path='/' element={<Navigate to='/timer' />} />
        <Route
-          path='timer'
+          path='/timer'
          element={
            <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <Timer />
+              <STimer />
            </ViewLoader>
          }
        />
        <Route
-          path='countdown'
+          path='/countdown'
          element={
            <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <Countdown />
+              <SCountdown />
            </ViewLoader>
          }
        />
        <Route
-          path='backstage'
+          path='/backstage'
          element={
            <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <Backstage />
+              <SBackstage />
            </ViewLoader>
          }
        />
        <Route
-          path='studio'
+          path='/studio'
          element={
            <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <StudioClock />
+              <SStudio />
            </ViewLoader>
          }
        />
        <Route
-          path='timeline'
+          path='/timeline'
          element={
            <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
-              <Timeline />
+              <STimeline />
            </ViewLoader>
          }
        />
        <Route
-          path='info'
+          path='/info'
          element={
            <ViewLoader>
-              <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />
-              <ProjectInfo />
+              <SProjectInfo />
            </ViewLoader>
          }
        />
+
        {/*/!* Protected Routes *!/*/}
-        <Route path='editor' element={<Editor />} />
-        <Route path='cuesheet' element={<Cuesheet />} />
+        <Route path='/editor' element={<Editor />} />
+        <Route path='/cuesheet' element={<PCuesheet />} />
        <Route
-          path='op'
+          path='/op'
          element={
            <ViewLoader>
-              <Operator />
+              <POperator />
            </ViewLoader>
          }
        />
+
        {/*/!* Protected Routes - Elements *!/*/}
        <Route
-          path='rundown'
+          path='/rundown'
          element={
            <EditorFeatureWrapper>
              <RundownPanel />
@@ -116,7 +116,7 @@ export default function AppRouter() {
          }
        />
        <Route
-          path='timercontrol'
+          path='/timercontrol'
          element={
            <EditorFeatureWrapper>
              <TimerControl />
@@ -124,7 +124,7 @@ export default function AppRouter() {
          }
        />
        <Route
-          path='messagecontrol'
+          path='/messagecontrol'
          element={
            <EditorFeatureWrapper>
              <MessageControl />
@@ -132,119 +132,16 @@ export default function AppRouter() {
          }
        />
        <Route
-          path='log'
+          path='/log'
          element={
            <EditorFeatureWrapper>
              <Log />
            </EditorFeatureWrapper>
          }
        />
-        {/**
-         * If the views are prefixed with the "preset" path, we are in a locked preset
-         * Locked presets do not expose their parameters
-         */}
-        <Route path='preset/:alias' element={<PresetView />} />
-
-        {/**
-         * If we havent matched any views or presets, we may be in an unlocked preset
-         * Unlocked presets are unwrapped to expose their target and parameters
-         */}
-        <Route path='*' element={<RedirectPreset />} />
+        {/*/!* Send to default if nothing found *!/*/}
+        <Route path='*' element={<STimer />} />
      </SentryRouter>
-    </Suspense>
-  );
-}
-
-const PresetViewMap: Record<OntimeViewPresettable, ComponentType> = {
-  [OntimeView.Cuesheet]: Cuesheet,
-  [OntimeView.Operator]: Operator,
-  [OntimeView.Timer]: Timer,
-  [OntimeView.Backstage]: Backstage,
-  [OntimeView.Timeline]: Timeline,
-  [OntimeView.StudioClock]: StudioClock,
-  [OntimeView.Countdown]: Countdown,
-  [OntimeView.ProjectInfo]: ProjectInfo,
-};
-
-/**
- * This view will mask a configured canonical route
- * and inject the preset search parameters to context
- * User are not able to configure the parameters locked presets
- */
-function PresetView() {
-  const { data, status } = useUrlPresets();
-  const { alias } = useParams();
-
-  const preset: URLPreset | undefined = useMemo(() => {
-    if (status === 'pending' || !alias) return;
-    return data.find((p) => p.alias === alias && p.enabled);
-  }, [data, status, alias]);
-
-  if (status === 'pending') {
-    return <Loader />;
-  }
-
-  /**
-   * We need to check the session scope to determine if the user can navigate
-   * If the user has a global scope, they can navigate freely
-   * Otherwise, they are locked to the preset view
-   */
-  const showNav = sessionScope === 'rw';
-
-  /**
-   * If we are in a preset path but cannot find a preset, we will need to show a not found page
-   * This can happen if the preset was deleted or disabled
-   */
-  if (!preset) {
-    return (
-      <>
-        <ViewNavigationMenu isNavigationLocked={!showNav} suppressSettings />
-        <NotFound />
-      </>
-    );
-  }
-
-  /**
-   * Locked presets do not allow configuration changes
-   * Whether the user can navigate is determined by the locked param
-   */
-  const Component = PresetViewMap[preset.target as OntimeViewPresettable];
-  return (
-    <PresetContext value={preset}>
-      {preset.target !== OntimeView.Cuesheet && (
-        <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
-      )}
-      {Component ? <Component /> : <NotFound />}
-    </PresetContext>
-  );
-}
-
-function RedirectPreset() {
-  const { data, status } = useUrlPresets();
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  // checks if we are in a preset path and resolves a destination URL
-  const destination = useMemo(() => {
-    if (status === 'pending') return null;
-    return getRouteFromPreset(location, data);
-  }, [data, location, status]);
-
-  // if we have a destination, we will navigate to it
-  useEffect(() => {
-    if (destination) {
-      navigate(`/${destination}`, { replace: true });
-    }
-  }, [destination, navigate]);
-
-  if (status === 'pending') {
-    return <Loader />;
-  }
-
-  return (
-    <>
-      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
-      <NotFound />
-    </>
+    </React.Suspense>
  );
 }
@@ -1,9 +1,6 @@
 import axios from 'axios';
-import { TranslationObject } from 'ontime-types';

-import { ontimeQueryClient } from '../../common/queryClient';
-
-import { apiEntryUrl, customTranslationsURL, TRANSLATION } from './constants';
+import { apiEntryUrl } from './constants';

 const assetsPath = `${apiEntryUrl}/assets`;

@@ -31,21 +28,3 @@ export async function restoreCSSContents(): Promise<string> {
  const res = await axios.post(`${assetsPath}/css/restore`);
  return res.data;
 }
-
-/**
- * HTTP request to get user translation
- */
-export async function getUserTranslation(): Promise<TranslationObject> {
-  const res = await axios.get(customTranslationsURL);
-  return res.data;
-}
-
-/**
- * HTTP request to post user translation
- */
-export async function postUserTranslation(translation: TranslationObject): Promise<void> {
-  await axios.post(`${assetsPath}/translations`, {
-    translation,
-  });
-  await ontimeQueryClient.invalidateQueries({ queryKey: TRANSLATION });
-}
@@ -15,15 +15,12 @@ export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const CLIENT_LIST = ['clientList'];
 export const REPORT = ['report'];
-export const TRANSLATION = ['translation'];

 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;

 const userAssetsPath = 'user';
 const cssOverridePath = 'styles/override.css';
-const customTranslationsPath = 'translations/translations.json';

 export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
 export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
-export const customTranslationsURL = `${serverURL}/${userAssetsPath}/${customTranslationsPath}`;
@@ -1,11 +1,17 @@
 import axios, { AxiosResponse } from 'axios';
-import { EntryId, OntimeEntry, OntimeEvent, ProjectRundownsList, Rundown, TransientEventPayload } from 'ontime-types';
+import {
+  EntryId,
+  MessageResponse,
+  OntimeEntry,
+  OntimeEvent,
+  ProjectRundownsList,
+  Rundown,
+  TransientEventPayload,
+} from 'ontime-types';

 import { apiEntryUrl } from './constants';

-const rundownPath = `${apiEntryUrl}/rundowns`;
-
-// #region operations on project rundowns =========================
+const rundownPath = `${apiEntryUrl}/rundown`;

 /**
 * HTTP request to fetch a list of existing rundowns
@@ -16,64 +22,37 @@ export async function fetchProjectRundownList(): Promise<ProjectRundownsList> {
 }

 /**
- * HTTP request to fetch all entries in the currently loaded rundown
+ * HTTP request to fetch all events
 */
 export async function fetchCurrentRundown(): Promise<Rundown> {
  const res = await axios.get(`${rundownPath}/current`);
  return res.data;
 }

-/**
- * HTTP request to switch the currently loaded rundown
- */
-export async function loadRundown(id: string): Promise<AxiosResponse<ProjectRundownsList>> {
-  return axios.post(`${rundownPath}/${id}/load`);
-}
-
-/**
- * HTTP request to create a new rundown
- */
-export async function createRundown(title: string): Promise<AxiosResponse<ProjectRundownsList>> {
-  return axios.post(rundownPath, { title });
-}
-
-/**
- * HTTP request to delete a rundown
- */
-export async function deleteRundown(id: string): Promise<AxiosResponse<ProjectRundownsList>> {
-  return axios.delete(`${rundownPath}/${id}`);
-}
-
-// #endregion operations on project rundowns ======================
-// #region operations on rundown entries ==========================
-
 /**
 * HTTP request to post new entry
 */
-export async function postAddEntry(
-  rundownId: string,
-  data: TransientEventPayload,
-): Promise<AxiosResponse<OntimeEntry>> {
-  return axios.post(`${rundownPath}/${rundownId}/entry`, data);
+export async function postAddEntry(data: TransientEventPayload): Promise<AxiosResponse<OntimeEntry>> {
+  return axios.post(rundownPath, data);
 }

 /**
 * HTTP request to edit an entry
 */
-export async function putEditEntry(rundownId: string, data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
-  return axios.put(`${rundownPath}/${rundownId}/entry`, data);
+export async function putEditEntry(data: Partial<OntimeEntry>): Promise<AxiosResponse<OntimeEntry>> {
+  return axios.put(rundownPath, data);
 }

-export type BatchEditEntry = {
+type BatchEditEntry = {
  data: Partial<OntimeEvent>;
-  ids: EntryId[];
+  ids: string[];
 };

 /**
 * HTTP request to edit multiple events
 */
-export async function putBatchEditEvents(rundownId: string, data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
-  return axios.put(`${rundownPath}/${rundownId}/batch`, data);
+export async function putBatchEditEvents(data: BatchEditEntry): Promise<AxiosResponse<Rundown>> {
+  return axios.put(`${rundownPath}/batch`, data);
 }

 export type ReorderEntry = {
@@ -85,57 +64,60 @@ export type ReorderEntry = {
 /**
 * HTTP request to reorder an entry
 */
-export async function patchReorderEntry(rundownId: string, data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
-  return axios.patch(`${rundownPath}/${rundownId}/reorder`, data);
+export async function patchReorderEntry(data: ReorderEntry): Promise<AxiosResponse<Rundown>> {
+  return axios.patch(`${rundownPath}/reorder`, data);
 }

+export type SwapEntry = {
+  from: string;
+  to: string;
+};
+
 /**
 * HTTP request to swap two events
 */
-export async function requestEventSwap(rundownId: string, from: EntryId, to: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.patch(`${rundownPath}/${rundownId}/swap`, { from, to });
+export async function requestEventSwap(data: SwapEntry): Promise<AxiosResponse<MessageResponse>> {
+  return axios.patch(`${rundownPath}/swap`, data);
 }

 /**
 * HTTP request to request application of delay
 */
-export async function requestApplyDelay(rundownId: string, delayId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.patch(`${rundownPath}/${rundownId}/applydelay/${delayId}`);
+export async function requestApplyDelay(delayId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.patch(`${rundownPath}/applydelay/${delayId}`);
 }

 /**
 * HTTP request for cloning an entry
 */
-export async function postCloneEntry(rundownId: string, entryId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`);
+export async function postCloneEntry(entryId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/clone/${entryId}`);
 }

 /**
- * HTTP request for grouping a list of entries into a group
+ * HTTP request for dissolving of a block
 */
-export async function requestGroupEntries(rundownId: string, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/${rundownId}/group`, { ids: entryIds });
+export async function requestUngroup(blockId: EntryId): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/ungroup/${blockId}`);
 }

 /**
- * HTTP request for dissolving of a group
+ * HTTP request for grouping a list of entries into a block
 */
-export async function requestUngroup(rundownId: string, groupId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/${rundownId}/ungroup/${groupId}`);
+export async function requestGroupEntries(entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/group`, { ids: entryIds });
 }

 /**
- * HTTP request to delete entries of a given rundown
+ * HTTP request to delete entries
 */
-export async function deleteEntries(rundownId: string, entryIds: EntryId[]): Promise<AxiosResponse<Rundown>> {
-  return axios.delete(`${rundownPath}/${rundownId}/entries`, { data: { ids: entryIds } });
+export async function deleteEntries(entryIds: EntryId[]): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(rundownPath, { data: { ids: entryIds } });
 }

 /**
- * HTTP request to delete all entries of a given rundown
+ * HTTP request to delete all events
 */
-export async function requestDeleteAll(rundownId: string): Promise<AxiosResponse<Rundown>> {
-  return axios.delete(`${rundownPath}/${rundownId}/all`);
+export async function requestDeleteAll(): Promise<AxiosResponse<MessageResponse>> {
+  return axios.delete(`${rundownPath}/all`);
 }
-
-// #endregion operations on rundown entries =======================
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { GetInfo, LinkOptions } from 'ontime-types';
+import { GetInfo } from 'ontime-types';

 import { apiEntryUrl } from './constants';

@@ -16,7 +16,12 @@ export async function getInfo(): Promise<GetInfo> {
 /**
 * HTTP request to get a pre-authenticated URL
 */
-export async function generateUrl(options: LinkOptions & { baseUrl: string; path: string }): Promise<string> {
-  const res = await axios.post(`${sessionPath}/url`, options);
+export async function generateUrl(
+  baseUrl: string,
+  path: string,
+  lock: boolean,
+  authenticate: boolean,
+): Promise<string> {
+  const res = await axios.post(`${sessionPath}/url`, { baseUrl, path, lock, authenticate });
  return res.data.url;
 }
@@ -6,7 +6,7 @@ import { apiEntryUrl } from './constants';
 const urlPresetsPath = `${apiEntryUrl}/url-presets`;

 /**
- * HTTP request to retrieve all presets
+ * HTTP request to retrieve aliases
 */
 export async function getUrlPresets(): Promise<URLPreset[]> {
  const res = await axios.get(urlPresetsPath);
@@ -14,22 +14,8 @@ export async function getUrlPresets(): Promise<URLPreset[]> {
 }

 /**
- * HTTP request to add a preset
+ * HTTP request to mutate aliases
 */
-export async function postUrlPreset(data: URLPreset): Promise<URLPreset[]> {
-  return (await axios.post(urlPresetsPath, data)).data;
-}
-
-/**
- * HTTP request to edit a preset
- */
-export async function putUrlPreset(alias: string, data: URLPreset): Promise<URLPreset[]> {
-  return (await axios.put(`${urlPresetsPath}/${alias}`, data)).data;
-}
-
-/**
- * HTTP request to delete a preset
- */
-export async function deleteUrlPreset(alias: string): Promise<URLPreset[]> {
-  return (await axios.delete(`${urlPresetsPath}/${alias}`)).data;
+export async function postUrlPresets(data: URLPreset[]): Promise<URLPreset[]> {
+  return axios.post(urlPresetsPath, data);
 }
@@ -33,20 +33,6 @@ export function maybeAxiosError(error: unknown) {
  }
 }

-/**
- * Utility unwrap a an instance of Error
- */
-export function unwrapError(error: unknown) {
-  if (error instanceof Error) {
-    return error.message;
-  } else {
-    if (typeof error !== 'string') {
-      return JSON.stringify(error);
-    }
-    return error;
-  }
-}
-
 /**
 * Utility unwraps a potential axios error and sends to logger
 * @param prepend
@@ -33,13 +33,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
    if (newPath === '/' || newPath === currentPath) {
      return;
    }
-
-    if (newPath.startsWith('preset-')) {
-      setRedirect({ target: id, redirect: newPath.slice(7) });
-    } else {
-      setRedirect({ target: id, redirect: newPath });
-    }
-
+    setRedirect({ target: id, redirect: newPath });
    onClose();
  };

@@ -51,8 +45,8 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
      label: view.label,
    })),
    ...enabledPresets.map((preset) => ({
-      value: `preset-${preset.alias}`,
-      label: `URL Preset: ${preset.alias}`,
+      value: preset.pathAndParams,
+      label: `Preset: ${preset.alias}`,
    })),
  ];

@@ -67,11 +61,32 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
        <>
          <Info>
            Remotely redirect the client to a different URL. <br />
-            Either by entering a custom path or selecting a URL Preset.
+            Either by selecting a URL Preset or entering a custom path.
            <br />
            <br />
            <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
          </Info>
+          <div>
+            <span className={style.label}>Select View or URL Preset</span>
+            <div className={style.textEntry}>
+              <Select
+                fluid
+                options={viewOptions}
+                defaultValue={viewOptions[0].value}
+                onValueChange={(value) => setSelected(value)}
+                disabled={enabledPresets.length === 0}
+              />
+              <Button
+                variant='primary'
+                aria-label='Redirect to preset'
+                className={style.redirect}
+                disabled={enabledPresets.length === 0 || selected === '/'}
+                onClick={() => handleRedirect(selected)}
+              >
+                Redirect <IoArrowForward />
+              </Button>
+            </div>
+          </div>
          <div className={style.inlineEntry}>
            <span className={style.label}>Enter custom path</span>
            <label className={style.textEntry}>
@@ -85,34 +100,9 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
              className={style.redirect}
              onClick={() => handleRedirect(path)}
            >
-              Redirect
-              <IoArrowForward />
+              Redirect <IoArrowForward />
            </Button>
          </div>
-          <div>
-            <span className={style.label}>Select View or URL Preset</span>
-            <div className={style.inlineEntry}>
-              <label className={style.textEntry}>
-                {origin}
-                <Select
-                  fluid
-                  options={viewOptions}
-                  defaultValue={viewOptions[0].value}
-                  onValueChange={(value) => setSelected(value)}
-                  disabled={enabledPresets.length === 0}
-                />
-              </label>
-              <Button
-                variant='primary'
-                aria-label='Redirect to preset'
-                className={style.redirect}
-                disabled={enabledPresets.length === 0 || selected === '/'}
-                onClick={() => handleRedirect(selected)}
-              >
-                Redirect <IoArrowForward />
-              </Button>
-            </div>
-          </div>
        </>
      }
    />
@@ -1,4 +1,4 @@
-import { PropsWithChildren, useRef, useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import { IoCheckmark } from 'react-icons/io5';
 import { IoCopy } from 'react-icons/io5';

@@ -24,29 +24,32 @@ export default function CopyTag({
  onClick,
 }: PropsWithChildren<CopyTagProps>) {
  const [copied, setCopied] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  const handleClick = () => {
    copyToClipboard(copyValue);
    setCopied(true);

    // reset copied state
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    timeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    setTimeout(() => setCopied(false), 1000);
  };

  return (
    <div className={style.copytag}>
      {onClick !== undefined ? (
-        <Button className={style.action} size={size} onClick={onClick} disabled={disabled}>
+        <Button className={style.action} size={size} tabIndex={-1} onClick={onClick} disabled={disabled}>
          {children}
        </Button>
      ) : (
        <div className={cx([style.label, style[size]])}>{children}</div>
      )}
-      <IconButton className={style.copy} variant='primary' size={size} onClick={handleClick} disabled={disabled}>
+      <IconButton
+        className={style.copy}
+        variant='primary'
+        size={size}
+        tabIndex={-1}
+        onClick={handleClick}
+        disabled={disabled}
+      >
        {copied ? <IoCheckmark /> : <IoCopy />}
      </IconButton>
    </div>
@@ -1,7 +1,5 @@
 .delaySymbol {
  svg {
-    display: inline;
-    vertical-align: middle;
    font-size: 1.5rem;
    color: $ontime-delay;
    margin: 0 auto;
@@ -13,7 +13,6 @@
  border-radius: 3px;
  box-shadow: $box-shadow-l1;
  border: 1px solid $gray-1100;
-  outline: none;
 }

 .backdrop {
@@ -1,13 +1,12 @@
 .list {
  display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
  gap: 0.5rem;
 }

 .swatch {
  width: 2rem;
  height: 2rem;
-  aspect-ratio: 1;
  border-radius: 99px;
  border: 2px solid $gray-1200;
  color: $ui-white;
@@ -31,7 +31,11 @@
  }

  &[data-checked] {
-    background-color: $gray-700;
+    background-color: $gray-1200;
+
+    &:hover {
+      border-color: $gray-1000;
+    }
  }

  &:focus-visible {
@@ -53,6 +57,6 @@
    border-radius: 100%;
    width: 0.5em;
    height: 0.5em;
-    background-color: $ui-white;
+    background-color: $blue-500;
  }
 }
@@ -10,19 +10,13 @@
  padding-inline: 0.5em;
  outline: none;

-  &::placeholder {
-    color: $gray-500;
-    letter-spacing: 0;
-  }
-
-  &:hover:not(:disabled):not(:read-only) {
+  &:hover:not(:disabled) {
    background-color: $gray-1100;
  }

  &:focus:not(:read-only) {
    background-color: $gray-1000;
-    outline: 2px solid $blue-500;
-    outline-offset: 2px;
+    border: 1px solid $blue-500;
  }

  &:disabled {
@@ -30,8 +24,9 @@
    cursor: not-allowed;
  }

-  &:read-only::placeholder {
-    opacity: 0;
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
  }
 }

@@ -9,13 +9,9 @@
  border-radius: $component-border-radius-md;
  border: 1px solid transparent;

+  padding-inline: 0.5em;
  outline: none;

-  &::placeholder {
-    color: $gray-500;
-    letter-spacing: 0;
-  }
-
  &:hover:not(:disabled) {
    background-color: $gray-1100;
  }
@@ -30,21 +26,21 @@
    cursor: not-allowed;
  }

-  &:read-only::placeholder {
-    opacity: 0;
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
  }
 }

 .subtle {
  background-color: $gray-1200;
-  padding-inline: 0.5em;
-  padding-top: 0.25em;
+  padding-top: 0.5em;
 }

 .ghosted {
  background-color: transparent;
  padding: 0;
-  padding-top: 0.25em;
+  padding-top: 0.5em;
 }

 .fluid {
@@ -9,7 +9,7 @@ import style from './TimeInput.module.scss';
 interface NullableTimeInputProps<T extends string> {
  id?: T;
  name: T;
-  submitHandler: (field: T, value: number) => void;
+  submitHandler: (field: T, value: string) => void;
  time?: number | null;
  emptyDisplay: string;
  placeholder?: string;
@@ -71,7 +71,7 @@ export default function NullableTimeInput<T extends string>({
        return false;
      }

-      submitHandler(name, valueInMillis);
+      submitHandler(name, newValue);
      return true;
    },
    [name, submitHandler, time],
@@ -1,5 +1,5 @@
 import { type PropsWithChildren } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';

 import style from './AppLink.module.scss';

@@ -7,7 +7,7 @@
  padding-inline: 1rem;
  min-width: min(680px, 90vw);
  min-height: min(200px, 10vh);
-  max-width: min(900px, 90vw);
+  max-width: min(800px, 90vw);

  background-color: $gray-1250;
  color: $ui-white;
@@ -64,8 +64,3 @@
  flex: 1;
  overflow-y: auto;
 }
-
-.note {
-  margin-left: auto;
-  color: $white-20;
-}
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { Dialog } from '@base-ui-components/react/dialog';
 import { useDisclosure, useFullscreen } from '@mantine/hooks';

@@ -57,10 +57,9 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
              Toggle Fullscreen
              {fullscreen ? <IoContract /> : <IoExpand />}
            </NavigationMenuItem>
-            <NavigationMenuItem active={mirror} onClick={() => toggleMirror()}>
+            <NavigationMenuItem active={mirror} onClick={toggleMirror}>
              Flip Screen
              <IoSwapVertical />
-              {mirror && <span className={style.note}>Active</span>}
            </NavigationMenuItem>
            <NavigationMenuItem onClick={handlers.open}>Rename Client</NavigationMenuItem>

@@ -1,29 +1,26 @@
 import { memo } from 'react';
 import { useDisclosure, useHotkeys } from '@mantine/hooks';

-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 useViewEditor from './useViewEditor';

 interface ViewNavigationMenuProps {
-  /** prevent navigation */
-  isNavigationLocked?: boolean;
-  /** prevent showing settings */
+  isLockable?: boolean;
  suppressSettings?: boolean;
 }

 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isLockable, suppressSettings }: ViewNavigationMenuProps) {
  const [isMenuOpen, menuHandler] = useDisclosure();
-  const { open: showEditFormDrawer } = useViewParamsEditorStore();
+  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });

  useHotkeys([
    [
      'Space',
      () => {
-        if (isNavigationLocked) return;
+        if (isViewLocked) return;
        menuHandler.toggle();
      },
      { preventDefault: true },
@@ -31,24 +28,24 @@ function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNaviga
    [
      'mod + ,',
      () => {
-        if (suppressSettings) return;
+        if (isViewLocked || suppressSettings) return;
        showEditFormDrawer();
      },
      { preventDefault: true },
    ],
  ]);

-  if (isNavigationLocked && suppressSettings) {
+  if (isViewLocked) {
    return <ViewLockedIcon />;
  }

  return (
    <>
      <FloatingNavigation
-        toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
-        toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
+        toggleMenu={menuHandler.toggle}
+        toggleSettings={suppressSettings ? undefined : () => showEditFormDrawer()}
      />
-      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
+      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
    </>
  );
 }
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { IoArrowUp } from 'react-icons/io5';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';

 import { useElectronEvent } from '../../../hooks/useElectronEvent';
 import { handleLinks } from '../../../utils/linkUtils';
@@ -1,5 +1,5 @@
 import { IoLockClosedOutline } from 'react-icons/io5';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';

 import { useIsSmallDevice } from '../../../hooks/useIsSmallDevice';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';
@@ -14,8 +14,7 @@
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
-  padding-top: 0.75rem;
-  padding-left: 0.5em;
+  padding: 0.5em;

  position: fixed;
  left: 0;
@@ -8,7 +8,7 @@ import IconButton from '../../buttons/IconButton';
 import style from './FloatingNavigation.module.scss';

 interface FloatingNavigationProps {
-  toggleMenu?: () => void;
+  toggleMenu: () => void;
  toggleSettings?: () => void;
 }

@@ -20,17 +20,15 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings }: Float
      id='fadeable-navigation'
      className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
    >
-      {toggleMenu && (
-        <IconButton
-          variant='subtle-white'
-          size='xlarge'
-          onClick={toggleMenu}
-          aria-label='toggle menu'
-          data-testid='navigation__toggle-menu'
-        >
-          <IoApps />
-        </IconButton>
-      )}
+      <IconButton
+        variant='subtle-white'
+        size='xlarge'
+        onClick={toggleMenu}
+        aria-label='toggle menu'
+        data-testid='navigation__toggle-menu'
+      >
+        <IoApps />
+      </IconButton>
      {toggleSettings && (
        <IconButton
          variant='subtle-white'
@@ -5,17 +5,12 @@
 }

 .interfaces {
-  padding: 0.5rem 0.5rem;
+  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
 }

-.interfaceCopy {
-  display: flex;
-  align-items: center;
-}
-
 .goIcon {
  @include rotate-fourty-five;
  margin-left: 0.25rem;
@@ -30,10 +30,8 @@ export default function OtherAddresses({ currentLocation }: OtherAddressesProps)
          const address = linkToOtherHost(nif.address, currentLocation);

          return (
-            <CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)} size='small'>
-              <span className={style.interfaceCopy}>
-                {nif.address} <IoArrowUp className={style.goIcon} />
-              </span>
+            <CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)}>
+              {nif.address} <IoArrowUp className={style.goIcon} />
            </CopyTag>
          );
        })}
@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
+
+interface EditorVisibilityOptions {
+  isLockable?: boolean;
+}
+
+export default function useViewEditor({ isLockable }: EditorVisibilityOptions) {
+  const [searchParams] = useSearchParams();
+  const { open: showEditFormDrawer } = useViewParamsEditorStore();
+
+  const isViewLocked = useMemo(() => {
+    if (!isLockable) {
+      return false;
+    }
+    return isStringBoolean(searchParams.get('locked'));
+  }, [isLockable, searchParams]);
+
+  return { showEditFormDrawer, isViewLocked };
+}
@@ -1,15 +1,9 @@
 .radioGroup {
  display: flex;
+  gap: 0.25rem;
  color: $gray-900;
  font-size: calc(1rem - 2px);
  color: $ui-white;
-
-  &[data-disabled] {
-    .item {
-      opacity: $opacity-disabled;
-      cursor: not-allowed;
-    }
-  }
 }

 .horizontal {
@@ -38,8 +32,8 @@
 .radio {
  box-sizing: border-box;
  display: flex;
-  width: 16px; // use absolute units to avoid subpixel rendering issues
-  height: 16px;
+  width: 1rem;
+  height: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
@@ -52,7 +46,10 @@
  }

  &[data-checked] {
-    background-color: $blue-700;
+    background-color: $ui-white;
+    &:hover {
+      border-color: $gray-1000;
+    }
  }

  &:focus-visible {
@@ -72,9 +69,8 @@
  &::before {
    content: '';
    border-radius: 100%;
-    width: 6px; // half of the radio size
-    height: 6px;
-    aspect-ratio: 1;
-    background-color: $ui-white;
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: $gray-1200;
  }
 }
@@ -14,6 +14,7 @@
  border: 1px solid transparent;

  padding-inline: 0.5rem;
+  font-size: calc(1rem - 2px);
  white-space: nowrap;

  &:hover:not([data-disabled]) {
@@ -56,7 +57,7 @@
 }

 .popup {
-  font-size: 1rem;
+  font-size: calc(1rem - 2px);
  background-color: $gray-1200;
  box-sizing: border-box;
  padding: 2px;
@@ -9,10 +9,7 @@
  }

  .text {
-    display: block;
-    margin-inline: auto;;
    font-weight: 600;
    font-size: 2em;
-    max-width: 600px;
  }
 }
@@ -7,13 +7,14 @@ import style from './Empty.module.scss';

 interface EmptyProps {
  text?: string;
-  injectedStyles?: CSSProperties;
+  style?: CSSProperties;
  className?: string;
 }

-export default function Empty({ text, className, injectedStyles }: EmptyProps) {
+export default function Empty(props: EmptyProps) {
+  const { text, className, ...rest } = props;
  return (
-    <div className={cx([style.emptyContainer, className])} style={injectedStyles}>
+    <div className={cx([style.emptyContainer, className])} {...rest}>
      <EmptyImage className={style.empty} />
      {text && <span className={style.text}>{text}</span>}
    </div>
@@ -6,13 +6,15 @@ import style from './EmptyPage.module.scss';

 interface EmptyPageProps {
  text?: string;
-  injectedStyles?: CSSProperties;
+  style?: CSSProperties;
 }

-export default function EmptyPage({ text, injectedStyles }: EmptyPageProps) {
+export default function EmptyPage(props: EmptyPageProps) {
+  const { text, ...rest } = props;
+
  return (
    <div className={style.page}>
-      <Empty text={text} injectedStyles={injectedStyles} />
+      <Empty text={text} {...rest} />
    </div>
  );
 }
@@ -1,20 +0,0 @@
-.emptyContainer {
-  width: 100%;
-  color: $white-10;
-
-  .emptyCell {
-    margin-inline: auto;
-    text-align: center;
-    padding-top: 10vh;
-  }
-
-  .empty {
-    width: 100%;
-    opacity: 0.8;
-  }
-
-  .text {
-    font-weight: 600;
-    font-size: 2em;
-  }
-}
@@ -1,20 +0,0 @@
-import EmptyImage from '../../../assets/images/empty.svg?react';
-
-import style from './EmptyTableBody.module.scss';
-
-interface EmptyTableBodyProps {
-  text: string;
-}
-
-export default function EmptyTableBody({ text }: EmptyTableBodyProps) {
-  return (
-    <tbody className={style.emptyContainer}>
-      <tr>
-        <td colSpan={99} className={style.emptyCell}>
-          <EmptyImage className={style.empty} />
-          {text && <span className={style.text}>{text}</span>}
-        </td>
-      </tr>
-    </tbody>
-  );
-}
@@ -22,11 +22,6 @@
    outline: 2px solid $blue-500;
    outline-offset: 2px;
  }
-
-  &[data-disabled] {
-    opacity: $opacity-disabled;
-    cursor: not-allowed;
-  }
 }

 .medium {
@@ -46,7 +41,7 @@
 }

 .thumb {
-  aspect-ratio: 1;
+  aspect-ratio: 1 / 1;
  height: 100%;
  border-radius: 99px;
  background-color: $ui-white;
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';

 import SwatchPicker from '../input/colour-input/SwatchPicker';

@@ -16,13 +16,10 @@ const ensureHex = (value: string) => {
  return value;
 };

-export default function InlineColourPicker({ name, value }: InlineColourPickerProps) {
+export default function InlineColourPicker(props: InlineColourPickerProps) {
+  const { name, value } = props;
  const [colour, setColour] = useState(() => ensureHex(value));

-  useEffect(() => {
-    setColour(ensureHex(value));
-  }, [value]);
-
  return (
    <div className={style.inline}>
      <SwatchPicker color={colour} onChange={setColour} alwaysDisplayColor />
@@ -1,10 +1,10 @@
-import { ComponentProps, useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router';
+import { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';

 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 import Checkbox from '../checkbox/Checkbox';
 import Input from '../input/input/Input';
-import Select, { SelectOption } from '../select/Select';
+import Select from '../select/Select';
 import Switch from '../switch/Switch';

 import InlineColourPicker from './InlineColourPicker';
@@ -35,22 +35,15 @@ export default function ParamInput({ paramField }: ParamInputProps) {
      return <span className={style.empty}>No options available</span>;
    }

-    return <ControlledSelect id={id} initialValue={defaultOptionValue} options={paramField.values} />;
+    return <Select size='large' name={id} defaultValue={defaultOptionValue} options={paramField.values} />;
  }

  if (type === 'multi-option') {
-    const optionFromParams = searchParams.getAll(id);
-
-    return (
-      <MultiOption
-        paramField={paramField}
-        options={optionFromParams.length ? optionFromParams : paramField.defaultValue ?? ['']}
-      />
-    );
+    return <MultiOption paramField={paramField} />;
  }

  if (type === 'boolean') {
-    return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) ?? defaultValue} />;
+    return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) || defaultValue} />;
  }

  if (type === 'number') {
@@ -70,28 +63,27 @@ export default function ParamInput({ paramField }: ParamInputProps) {
  }

  if (type === 'colour') {
-    return <InlineColourPicker name={id} value={searchParams.get(id) ?? defaultValue} />;
+    const currentvalue = `#${searchParams.get(id) ?? defaultValue}`;
+
+    return <InlineColourPicker name={id} value={currentvalue} />;
  }

-  const defaultStringValue = searchParams.get(id) ?? defaultValue ?? '';
+  const defaultStringValue = searchParams.get(id) ?? defaultValue;
  const { placeholder } = paramField;

-  return <ControlledInput id={id} initialValue={defaultStringValue} placeholder={placeholder} />;
+  return <Input height='large' name={id} defaultValue={defaultStringValue} placeholder={placeholder} />;
 }

 interface EditFormMultiOptionProps {
  paramField: ParamField & { type: 'multi-option' };
-  options: string[];
 }

-function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
-  const { id, values } = paramField;
-  const [paramState, setParamState] = useState<string[]>(options);
+function MultiOption({ paramField }: EditFormMultiOptionProps) {
+  const [searchParams] = useSearchParams();
+  const { id, values, defaultValue = [''] } = paramField;

-  // synchronise options
-  useEffect(() => {
-    setParamState(options);
-  }, [options]);
+  const optionFromParams = searchParams.getAll(id);
+  const [paramState, setParamState] = useState<string[]>(optionFromParams || defaultValue);

  const toggleValue = (value: string, checked: boolean) => {
    if (checked) {
@@ -137,52 +129,5 @@ interface ControlledSwitchProps {
 }
 function ControlledSwitch({ id, initialValue }: ControlledSwitchProps) {
  const [checked, setChecked] = useState(initialValue);
-
-  // synchronise checked state
-  useEffect(() => {
-    setChecked(initialValue);
-  }, [initialValue]);
-
  return <Switch size='large' name={id} checked={checked} onCheckedChange={setChecked} />;
 }
-
-interface ControlledSelectProps {
-  id: string;
-  initialValue?: string;
-  options: SelectOption[];
-}
-function ControlledSelect({ id, initialValue, options }: ControlledSelectProps) {
-  const [selected, setSelected] = useState(initialValue);
-
-  // synchronise selected state
-  useEffect(() => {
-    setSelected(initialValue);
-  }, [initialValue]);
-
-  return (
-    <Select size='large' name={id} options={options} value={selected} onValueChange={(value) => setSelected(value)} />
-  );
-}
-
-interface ControlledInputProps<T extends number | string> extends ComponentProps<typeof Input> {
-  id: string;
-  initialValue: T;
-}
-function ControlledInput<T extends number | string>({ id, initialValue, ...inputProps }: ControlledInputProps<T>) {
-  const [value, setValue] = useState(initialValue);
-
-  // synchronise selected state
-  useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-
-  return (
-    <Input
-      height='large'
-      name={id}
-      value={value}
-      onChange={(event) => setValue(event.target.value as T)}
-      {...inputProps}
-    />
-  );
-}
@@ -1,8 +1,7 @@
 import { FormEvent, memo } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { useSearchParams } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
 import { Dialog } from '@base-ui-components/react/dialog';
-import { OntimeView } from 'ontime-types';

 import useViewSettings from '../../hooks-query/useViewSettings';
 import Button from '../buttons/Button';
@@ -12,18 +11,17 @@ import Info from '../info/Info';
 import { ViewOption } from './viewParams.types';
 import { getURLSearchParamsFromObj } from './viewParams.utils';
 import { useViewParamsEditorStore } from './viewParamsEditor.store';
-import { ViewParamsPresets } from './ViewParamsPresets';
 import ViewParamsSection from './ViewParamsSection';

 import style from './ViewParamsEditor.module.scss';

 interface EditFormDrawerProps {
-  target: OntimeView;
  viewOptions: ViewOption[];
 }

 export default memo(ViewParamsEditor);
-function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
+
+function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
  const [_, setSearchParams] = useSearchParams();
  const { data: viewSettings } = useViewSettings();
  const { isOpen, close } = useViewParamsEditorStore();
@@ -58,7 +56,7 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
        <Dialog.Popup className={style.drawer}>
          <div className={style.header}>
            <Dialog.Title>Customise</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' data-testid='close-view-params' onClick={handleClose}>
+            <IconButton variant='subtle-white' size='large' onClick={handleClose}>
              <IoClose />
            </IconButton>
          </div>
@@ -66,7 +64,6 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
            {viewSettings.overrideStyles && (
              <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
            )}
-            <ViewParamsPresets target={target} />
            <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
              {viewOptions.map((section) => (
                <ViewParamsSection
@@ -82,14 +79,8 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
            <Button variant='subtle' size='large' onClick={resetParams} type='reset'>
              Reset to default
            </Button>
-            <Button
-              variant='primary'
-              size='large'
-              form='edit-params-form'
-              type='submit'
-              data-testid='apply-view-params'
-            >
-              Apply
+            <Button variant='primary' size='large' form='edit-params-form' type='submit'>
+              Save
            </Button>
          </div>
        </Dialog.Popup>
@@ -1,25 +0,0 @@
-.presetSection {
-  background-color: $gray-1350;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 1rem 0.5rem;
-  margin-bottom: 1rem;
-  max-height: 10rem;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-}
-
-.preset {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  &.active {
-    color: $blue-500;
-  }
-}
-
-.presetActions {
-  margin-left: auto;
-}
@@ -1,47 +0,0 @@
-import { useSearchParams } from 'react-router';
-import { OntimeView, URLPreset } from 'ontime-types';
-
-import { useViewUrlPresets } from '../../hooks-query/useUrlPresets';
-import { cx } from '../../utils/styleUtils';
-import Button from '../buttons/Button';
-
-import style from './ViewParamsPresets.module.scss';
-
-/**
- * Shows a list of presets for the current view
- */
-export function ViewParamsPresets({ target }: { target: OntimeView }) {
-  const { viewPresets } = useViewUrlPresets(target);
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const handleRecall = (preset: URLPreset) => {
-    const newSearch = new URLSearchParams(preset.search);
-    newSearch.set('alias', preset.alias);
-    setSearchParams(newSearch);
-  };
-
-  if (viewPresets.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className={style.presetSection}>
-      {viewPresets.map((preset) => {
-        const active = searchParams.get('alias') === preset.alias;
-        return (
-          <div key={preset.alias} className={cx([style.preset, active && style.active])}>
-            <div>{preset.alias}</div>
-            <Button
-              variant={active ? 'ghosted' : 'subtle-white'}
-              onClick={() => handleRecall(preset)}
-              disabled={active}
-              className={style.presetActions}
-            >
-              {active ? 'Applied' : 'Apply'}
-            </Button>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
@@ -36,15 +36,11 @@
 }

 .closed {
-  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: rotate $transition-time-feedback;
  rotate: 0deg;
 }

 .open {
-  transition: rotate 300ms cubic-bezier(0.45, 1.005, 0, 1.005);
+  transition: rotate $transition-time-feedback;
  rotate: 180deg;
 }
-
-.hidden {
-  display: none;
-}
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { IoChevronDown } from 'react-icons/io5';
 import { useLocalStorage } from '@mantine/hooks';

@@ -15,7 +16,8 @@ interface ViewParamsSectionProps {
  options: ParamField[];
 }

-export default function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
+export default memo(ViewParamsSection);
+function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
  const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });

  const handleCollapse = () => {
@@ -47,11 +49,15 @@ interface SectionContentsProps {
 }

 function SectionContents({ options, collapsed }: SectionContentsProps) {
+  if (collapsed) {
+    return null;
+  }
+
  return (
    <>
      {options.map((option) => {
        return (
-          <label key={option.title} className={cx([style.label, collapsed && style.hidden])}>
+          <label key={option.title} className={style.label}>
            <span className={style.title}>{option.title}</span>
            <span className={style.description}>{option.description}</span>
            <ParamInput paramField={option} />
@@ -232,6 +232,7 @@ describe('getURLSearchParamsFromObj()', () => {
      bool2: 'on',
    };
    const result = getURLSearchParamsFromObj(params, mockOptionsWithBooleans);
+    console.log('Result:', result.toString());
    expect(result.get('bool1')).toBe('false');
    expect(result.get('bool2')).toBe('true');
  });
@@ -16,7 +16,7 @@ export type MultiselectOption = { value: string; label: string; colour: string }
 type MultiOptionsField = {
  type: 'multi-option';
  values: MultiselectOption[];
-  defaultValue?: string[];
+  defaultValue?: string;
 };

 type StringField = { type: 'string'; defaultValue?: string; placeholder?: string };
@@ -1,4 +1,4 @@
-import type { CustomFields, ProjectData } from 'ontime-types';
+import type { CustomFields } from 'ontime-types';

 import type { SelectOption } from '../select/Select';

@@ -53,23 +53,6 @@ export function makeCustomFieldSelectOptions(customFields: CustomFields, filterI
  return options;
 }

-/**
- * Creates data for a select element that displays project custom data
- */
-export function makeProjectDataOptions(
-  projectData: ProjectData,
-  additionalOptions: SelectOption[] = [],
-): SelectOption[] {
-  const generatedOptions = projectData.custom.map((entry, index) => {
-    return {
-      value: `${index}-${entry.title}`,
-      label: entry.title,
-    };
-  });
-
-  return [...additionalOptions, ...generatedOptions];
-}
-
 type ViewParamsObj = { [key: string]: string | FormDataEntryValue };

 /**
@@ -1,4 +0,0 @@
-import { createContext } from 'react';
-import { URLPreset } from 'ontime-types';
-
-export const PresetContext = createContext<URLPreset | undefined>(undefined);
@@ -1,16 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { langEn } from 'ontime-types';
-
-import { getUserTranslation } from '../../common/api/assets';
-import { TRANSLATION } from '../../common/api/constants';
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-
-export function useCustomTranslation() {
-  const { data, status, refetch } = useQuery({
-    queryKey: TRANSLATION,
-    queryFn: getUserTranslation,
-    placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
-  });
-  return { data: data ?? langEn, status, refetch };
-}
@@ -1,8 +1,8 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_DATA } from '../api/constants';
-import { getProjectData, postProjectData } from '../api/project';
+import { getProjectData } from '../api/project';
 import { projectDataPlaceholder } from '../models/ProjectData';

 export default function useProjectData() {
@@ -10,25 +10,11 @@ export default function useProjectData() {
    queryKey: PROJECT_DATA,
    queryFn: getProjectData,
    placeholderData: (previousData, _previousQuery) => previousData,
+    retry: 5,
+    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
  });

  return { data: data ?? projectDataPlaceholder, status, isFetching, isError, refetch };
 }
-
-export function useUpdateProjectData() {
-  const queryClient = useQueryClient();
-
-  const updateFn = useMutation({
-    mutationFn: postProjectData,
-    onSuccess: (newProjectData) => {
-      queryClient.setQueryData(PROJECT_DATA, newProjectData);
-    },
-  });
-
-  return {
-    updateProjectData: updateFn.mutateAsync,
-    isMutating: updateFn.isPending,
-    isMutatingError: updateFn.isError,
-  };
-}
@@ -1,9 +1,9 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ProjectRundownsList } from 'ontime-types';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_RUNDOWNS } from '../api/constants';
-import { createRundown, deleteRundown, fetchProjectRundownList, loadRundown } from '../api/rundown';
+import { fetchProjectRundownList } from '../api/rundown';

 /**
 * Project rundowns
@@ -13,43 +13,10 @@ export function useProjectRundowns() {
    queryKey: PROJECT_RUNDOWNS,
    queryFn: fetchProjectRundownList,
    placeholderData: (previousData, _previousQuery) => previousData,
+    retry: 5,
+    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
  });
  return { data: data ?? { loaded: '', rundowns: [] }, status, isError, refetch, isFetching };
 }
-
-export function useMutateProjectRundowns() {
-  const ontimeQueryClient = useQueryClient();
-
-  const { mutateAsync: create } = useMutation({
-    mutationFn: createRundown,
-    onMutate: () => {
-      ontimeQueryClient.cancelQueries({ queryKey: PROJECT_RUNDOWNS });
-    },
-    onSuccess: (response) => {
-      ontimeQueryClient.setQueryData(PROJECT_RUNDOWNS, response.data);
-    },
-  });
-
-  const { mutateAsync: remove } = useMutation({
-    mutationFn: deleteRundown,
-    onMutate: () => {
-      ontimeQueryClient.cancelQueries({ queryKey: PROJECT_RUNDOWNS });
-    },
-    onSuccess: (response) => {
-      ontimeQueryClient.setQueryData(PROJECT_RUNDOWNS, response.data);
-    },
-  });
-
-  const { mutateAsync: load } = useMutation({
-    mutationFn: loadRundown,
-    onMutate: () => {
-      ontimeQueryClient.cancelQueries({ queryKey: PROJECT_RUNDOWNS });
-    },
-    onSuccess: (response) => {
-      ontimeQueryClient.setQueryData(PROJECT_RUNDOWNS, response.data);
-    },
-  });
-
-  return { create, remove, load };
-}
@@ -5,8 +5,6 @@ import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { RUNDOWN } from '../api/constants';
 import { fetchCurrentRundown } from '../api/rundown';
-import { useSelectedEventId } from '../hooks/useSocket';
-import { getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';

 import useProjectData from './useProjectData';

@@ -28,18 +26,14 @@ export default function useRundown() {
    queryKey: RUNDOWN,
    queryFn: fetchCurrentRundown,
    placeholderData: (previousData, _previousQuery) => previousData,
+    retry: 5,
+    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
  });
  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }

-export function useRundownWithMetadata() {
-  const { data, status } = useRundown();
-  const { selectedEventId } = useSelectedEventId();
-  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
-  return { data, status, rundownMetadata };
-}
-
 /**
 * Provides access to a flat rundown
 * built from the order and rundown fields
@@ -62,7 +56,6 @@ export function useFlatRundown() {
  }, [data.entries, data.flatOrder, data.revision, prevRevision]);

  // TODO: should we have a project id field?
-  // TODO(v4): cleanup as part of load multiple rundowns
  // invalidate current version if project changes
  useEffect(() => {
    if (projectData?.title !== loadedProject.current) {
@@ -71,15 +64,7 @@ export function useFlatRundown() {
    }
  }, [projectData]);

-  return { data: flatRundown, rundownId: data.id, status };
-}
-
-export function useFlatRundownWithMetadata() {
-  const { data, status } = useRundown();
-  const { selectedEventId } = useSelectedEventId();
-
-  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
-  return { data: rundownWithMetadata, status };
+  return { data: flatRundown, status };
 }

 /**
@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { unobfuscate } from 'ontime-utils';

+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { APP_SETTINGS } from '../api/constants';
 import { getSettings } from '../api/settings';
 import { ontimePlaceholderSettings } from '../models/OntimeSettings';
@@ -10,6 +11,10 @@ export default function useSettings() {
    queryKey: APP_SETTINGS,
    queryFn: getSettings,
    placeholderData: (previousData, _previousQuery) => previousData,
+    retry: 5,
+    retryDelay: (attempt) => attempt * 2500,
+    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
    select: (data) => {
      const unobfuscated = { ...data };
      if (data.editorKey) {
@@ -1,10 +1,8 @@
-import { useMemo } from 'react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { OntimeView, URLPreset } from 'ontime-types';
+import { useQuery } from '@tanstack/react-query';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { URL_PRESETS } from '../api/constants';
-import { deleteUrlPreset, getUrlPresets, postUrlPreset, putUrlPreset } from '../api/urlPresets';
+import { getUrlPresets } from '../api/urlPresets';

 interface FetchProps {
  skip?: boolean;
@@ -15,50 +13,12 @@ export default function useUrlPresets({ skip = false }: FetchProps = {}) {
    queryKey: URL_PRESETS,
    queryFn: getUrlPresets,
    placeholderData: (previousData, _previousQuery) => previousData,
+    retry: 5,
+    retryDelay: (attempt) => attempt * 2500,
    refetchInterval: queryRefetchIntervalSlow,
+    networkMode: 'always',
    enabled: !skip,
  });

  return { data: data ?? [], status, isError, refetch };
 }
-
-export function useViewUrlPresets(view: OntimeView) {
-  const { data } = useUrlPresets();
-
-  const viewPresets = useMemo(() => data.filter((preset) => preset.target === view), [data, view]);
-
-  return { viewPresets };
-}
-
-export function useUpdateUrlPreset() {
-  const queryClient = useQueryClient();
-
-  const addFn = useMutation({
-    mutationFn: postUrlPreset,
-    onSuccess: (newPresets) => {
-      queryClient.setQueryData(URL_PRESETS, newPresets);
-    },
-  });
-
-  const updateFn = useMutation({
-    mutationFn: ({ alias, data }: { alias: string; data: URLPreset }) => putUrlPreset(alias, data),
-    onSuccess: (newPresets) => {
-      queryClient.setQueryData(URL_PRESETS, newPresets);
-    },
-  });
-
-  const deleteFn = useMutation({
-    mutationFn: deleteUrlPreset,
-    onSuccess: (newPresets) => {
-      queryClient.setQueryData(URL_PRESETS, newPresets);
-    },
-  });
-
-  return {
-    addPreset: addFn.mutateAsync,
-    updatePreset: (alias: string, data: URLPreset) => updateFn.mutateAsync({ alias, data }),
-    deletePreset: deleteFn.mutateAsync,
-    isMutating: addFn.isPending || updateFn.isPending || deleteFn.isPending,
-    isMutationError: addFn.isError || updateFn.isError || deleteFn.isError,
-  };
-}
@@ -7,7 +7,7 @@ import { VIEW_SETTINGS } from '../api/constants';
 import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';

 export default function useViewSettings() {
-  const { data, status } = useQuery({
+  const { data, isPending } = useQuery({
    queryKey: VIEW_SETTINGS,
    queryFn: getViewSettings,
    placeholderData: (previousData, _previousQuery) => previousData,
@@ -24,5 +24,5 @@ export default function useViewSettings() {
    },
  });

-  return { data: data ?? viewsSettingsPlaceholder, status, mutateAsync };
+  return { data: data ?? viewsSettingsPlaceholder, mutateAsync, isPending };
 }
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { MessageTag } from 'ontime-types';
 import { useShallow } from 'zustand/shallow';

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router';
+import { useNavigate } from 'react-router-dom';

 import { addDialog } from '../stores/dialogStore';

@@ -2,13 +2,13 @@ import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
  EntryId,
+  isOntimeBlock,
  isOntimeEvent,
-  isOntimeGroup,
  MaybeString,
+  OntimeBlock,
  OntimeEntry,
  OntimeEvent,
  Rundown,
-  SupportedEntry,
  TimeField,
  TimeStrategy,
  TransientEventPayload,
@@ -30,12 +30,13 @@ import {
  requestEventSwap,
  requestGroupEntries,
  requestUngroup,
+  SwapEntry,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';

 export type EventOptions = Partial<{
-  // options of any new entries (event / delay / group)
+  // options of any new entries (event / delay / block)
  after: MaybeString;
  before: MaybeString;
  // options of entries of type OntimeEvent
@@ -58,25 +59,15 @@ export const useEntryActions = () => {
    defaultEndAction,
  } = useEditorSettings();

-  /**
-   * Returns the currently loaded rundown
-   */
-  const getCurrentRundownData = useCallback(() => {
-    return queryClient.getQueryData<Rundown>(RUNDOWN);
-  }, [queryClient]);
-
-  /**
-   * Looks for an entry with a given ID in the currently loaded rundown
-   */
  const getEntryById = useCallback(
-    (eventId: EntryId): OntimeEntry | undefined => {
-      const cachedRundown = getCurrentRundownData();
+    (eventId: string): OntimeEntry | undefined => {
+      const cachedRundown = queryClient.getQueryData<Rundown>(RUNDOWN);
      if (!cachedRundown?.entries) {
        return;
      }
      return cachedRundown.entries[eventId];
    },
-    [getCurrentRundownData],
+    [queryClient],
  );

  /**
@@ -84,8 +75,8 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: addEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entry]: Parameters<typeof postAddEntry>) => postAddEntry(rundownId, entry),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    // TODO(v4): optimistic create entry
+    mutationFn: postAddEntry,
    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
  });

@@ -94,27 +85,29 @@ export const useEntryActions = () => {
   */
  const addEntry = useCallback(
    async (entry: Partial<OntimeEntry>, options?: EventOptions) => {
-      const rundownData = getCurrentRundownData();
-      const rundownId = rundownData?.id;
-
-      if (!rundownId) {
-        throw new Error('Rundown not initialised');
-      }
-
      const newEntry: TransientEventPayload = { ...entry, id: generateId() };

      // ************* CHECK OPTIONS specific to events
      if (isOntimeEvent(newEntry)) {
-        if (options?.lastEventId) {
+        // merge creation time options with event settings
+        const applicationOptions = {
+          after: options?.after,
+          before: options?.before,
+          lastEventId: options?.lastEventId,
+          linkPrevious: options?.linkPrevious ?? linkPrevious,
+        };
+
+        if (applicationOptions?.lastEventId) {
          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this is a value
-          const previousEvent = rundownData.entries[options?.lastEventId];
+          const rundownData = queryClient.getQueryData<Rundown>(RUNDOWN)!;
+          const previousEvent = rundownData.entries[applicationOptions.lastEventId];
          if (isOntimeEvent(previousEvent)) {
            newEntry.timeStart = previousEvent.timeEnd;
          }
        }

        // Override event with options from editor settings
-        newEntry.linkStart = options?.linkPrevious ?? linkPrevious;
+        newEntry.linkStart = applicationOptions.linkPrevious;

        if (newEntry.duration === undefined && newEntry.timeEnd === undefined) {
          newEntry.duration = parseUserTime(defaultDuration);
@@ -150,21 +143,21 @@ export const useEntryActions = () => {
      }

      try {
-        await addEntryMutation([rundownId, newEntry]);
+        await addEntryMutation(newEntry);
      } catch (error) {
        logAxiosError('Failed adding event', error);
      }
    },
    [
-      getCurrentRundownData,
-      linkPrevious,
-      defaultDuration,
-      defaultDangerTime,
-      defaultWarnTime,
-      defaultTimerType,
-      defaultEndAction,
-      defaultTimeStrategy,
      addEntryMutation,
+      defaultDangerTime,
+      defaultDuration,
+      defaultEndAction,
+      defaultTimerType,
+      defaultTimeStrategy,
+      defaultWarnTime,
+      linkPrevious,
+      queryClient,
    ],
  );

@@ -173,28 +166,22 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: cloneEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entryId]: Parameters<typeof postCloneEntry>) => postCloneEntry(rundownId, entryId),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    mutationFn: postCloneEntry,
    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
  });

  /**
-   * Clone an entry
+   * Clone a selection
   */
  const clone = useCallback(
    async (entryId: EntryId) => {
      try {
-        const rundownId = getCurrentRundownData()?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
-        await cloneEntryMutation([rundownId, entryId]);
+        await cloneEntryMutation(entryId);
      } catch (error) {
        logAxiosError('Error cloning entry', error);
      }
    },
-    [cloneEntryMutation, getCurrentRundownData],
+    [cloneEntryMutation],
  );

  /**
@@ -202,9 +189,9 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: updateEntryMutation } = useMutation({
-    mutationFn: ([rundownId, newEvent]: Parameters<typeof putEditEntry>) => putEditEntry(rundownId, newEvent),
+    mutationFn: putEditEntry,
    // we optimistically update here
-    onMutate: async ([_rundownId, newEvent]) => {
+    onMutate: async (newEvent) => {
      // cancel ongoing queries
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

@@ -232,9 +219,7 @@ export const useEntryActions = () => {
    },
    // Mutation fails, rollback undoes optimist update
    onError: (_error, _newEvent, context) => {
-      if (context?.previousData) {
-        queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
-      }
+      queryClient.setQueryData<Rundown>(RUNDOWN, context?.previousData);
    },
    // Mutation finished, failed or successful
    // Fetch anyway, just to be sure
@@ -249,17 +234,19 @@ export const useEntryActions = () => {
  const updateEntry = useCallback(
    async (entry: Partial<OntimeEntry>) => {
      try {
-        const rundownId = getCurrentRundownData()?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
-        await updateEntryMutation([rundownId, entry]);
+        await updateEntryMutation(entry);
      } catch (error) {
        logAxiosError('Error updating event', error);
      }
    },
-    [getCurrentRundownData, updateEntryMutation],
+    [updateEntryMutation],
+  );
+
+  const updateCustomField = useCallback(
+    async (entryId: EntryId, field: string, value: string) => {
+      updateEntry({ id: entryId, custom: { [field]: value } });
+    },
+    [updateEntry],
  );

  /**
@@ -271,11 +258,6 @@ export const useEntryActions = () => {
   */
  const updateTimer = useCallback(
    async (eventId: EntryId, field: TimeField, value: string, lockOnUpdate?: boolean) => {
-      const rundownId = getCurrentRundownData()?.id;
-      if (!rundownId) {
-        throw new Error('Rundown not initialised');
-      }
-
      // an empty value with no lock has no domain validity
      if (!lockOnUpdate && value === '') {
        return;
@@ -305,7 +287,7 @@ export const useEntryActions = () => {
      }

      try {
-        await updateEntryMutation([rundownId, newEvent]);
+        await updateEntryMutation(newEvent);
      } catch (error) {
        logAxiosError('Error updating event', error);
      }
@@ -357,7 +339,7 @@ export const useEntryActions = () => {
        return previousEnd;
      }
    },
-    [getCurrentRundownData, updateEntryMutation, queryClient],
+    [updateEntryMutation, queryClient],
  );

  /**
@@ -365,8 +347,8 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: batchUpdateEventsMutation } = useMutation({
-    mutationFn: ([rundownId, data]: Parameters<typeof putBatchEditEvents>) => putBatchEditEvents(rundownId, data),
-    onMutate: async ([_rundownId, data]) => {
+    mutationFn: putBatchEditEvents,
+    onMutate: async ({ ids, data }) => {
      // cancel ongoing queries
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

@@ -374,7 +356,7 @@ export const useEntryActions = () => {
      const previousRundown = queryClient.getQueryData<Rundown>(RUNDOWN);

      if (previousRundown) {
-        const eventIds = new Set(data.ids);
+        const eventIds = new Set(ids);
        const newRundown = { ...previousRundown.entries };

        eventIds.forEach((eventId) => {
@@ -421,19 +403,14 @@ export const useEntryActions = () => {
  });

  const batchUpdateEvents = useCallback(
-    async (data: Partial<OntimeEvent>, eventIds: EntryId[]) => {
+    async (data: Partial<OntimeEvent>, eventIds: string[]) => {
      try {
-        const rundownId = getCurrentRundownData()?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
-        await batchUpdateEventsMutation([rundownId, { data, ids: eventIds }]);
+        await batchUpdateEventsMutation({ ids: eventIds, data });
      } catch (error) {
        logAxiosError('Error updating events', error);
      }
    },
-    [batchUpdateEventsMutation, getCurrentRundownData],
+    [batchUpdateEventsMutation],
  );

  /**
@@ -441,9 +418,9 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: deleteEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entryIds]: Parameters<typeof deleteEntries>) => deleteEntries(rundownId, entryIds),
+    mutationFn: deleteEntries,
    // we optimistically update here
-    onMutate: async ([_rundownId, entryIds]) => {
+    onMutate: async (entryIds: EntryId[]) => {
      // cancel ongoing queries
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

@@ -485,17 +462,12 @@ export const useEntryActions = () => {
  const deleteEntry = useCallback(
    async (entryIds: EntryId[]) => {
      try {
-        const rundownId = getCurrentRundownData()?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
-        await deleteEntryMutation([rundownId, entryIds]);
+        await deleteEntryMutation(entryIds);
      } catch (error) {
        logAxiosError('Error deleting event', error);
      }
    },
-    [deleteEntryMutation, getCurrentRundownData],
+    [deleteEntryMutation],
  );

  /**
@@ -503,7 +475,7 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: deleteAllEntriesMutation } = useMutation({
-    mutationFn: ([rundownId]: Parameters<typeof requestDeleteAll>) => requestDeleteAll(rundownId),
+    mutationFn: requestDeleteAll,
    // we optimistically update here
    onMutate: async () => {
      // cancel ongoing queries
@@ -542,24 +514,18 @@ export const useEntryActions = () => {
   */
  const deleteAllEntries = useCallback(async () => {
    try {
-      const rundownId = getCurrentRundownData()?.id;
-      if (!rundownId) {
-        throw new Error('Rundown not initialised');
-      }
-
-      await deleteAllEntriesMutation([rundownId]);
+      await deleteAllEntriesMutation();
    } catch (error) {
      logAxiosError('Error deleting events', error);
    }
-  }, [deleteAllEntriesMutation, getCurrentRundownData]);
+  }, [deleteAllEntriesMutation]);

  /**
   * Calls mutation to apply a delay
   * @private
   */
  const { mutateAsync: applyDelayMutation } = useMutation({
-    mutationFn: ([rundownId, delayId]: Parameters<typeof requestApplyDelay>) => requestApplyDelay(rundownId, delayId),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    mutationFn: requestApplyDelay,
    onSuccess: (response) => {
      if (!response.data) return;

@@ -585,26 +551,20 @@ export const useEntryActions = () => {
  const applyDelay = useCallback(
    async (delayEventId: EntryId) => {
      try {
-        const rundownId = getCurrentRundownData()?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
-        await applyDelayMutation([rundownId, delayEventId]);
+        await applyDelayMutation(delayEventId);
      } catch (error) {
        logAxiosError('Error applying delay', error);
      }
    },
-    [applyDelayMutation, getCurrentRundownData],
+    [applyDelayMutation],
  );

  /**
-   * Calls mutation to dissolve a group
+   * Calls mutation to dissolve a block
   * @private
   */
  const { mutateAsync: ungroupMutation } = useMutation({
-    mutationFn: ([rundownId, groupId]: Parameters<typeof requestUngroup>) => requestUngroup(rundownId, groupId),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    mutationFn: requestUngroup,
    onSuccess: (response) => {
      if (!response.data) return;

@@ -622,32 +582,25 @@ export const useEntryActions = () => {
  });

  /**
-   * Deletes a group and moves its events to the top level
+   * Deletes a block and moves its events to the top level
   */
  const ungroup = useCallback(
-    async (groupId: EntryId) => {
+    async (blockId: EntryId) => {
      try {
-        const rundownId = getCurrentRundownData()?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
-        await ungroupMutation([rundownId, groupId]);
+        await ungroupMutation(blockId);
      } catch (error) {
        logAxiosError('Error dissolving group', error);
      }
    },
-    [getCurrentRundownData, ungroupMutation],
+    [ungroupMutation],
  );

  /**
-   * Calls mutation to create a group with a selection
+   * Calls mutation to create a block with a selection
   * @private
   */
  const { mutateAsync: groupEntriesMutation } = useMutation({
-    mutationFn: ([rundownId, entryIds]: Parameters<typeof requestGroupEntries>) =>
-      requestGroupEntries(rundownId, entryIds),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    mutationFn: requestGroupEntries,
    onSuccess: (response) => {
      if (!response.data) return;

@@ -665,31 +618,26 @@ export const useEntryActions = () => {
  });

  /**
-   * Create a group with a selection
+   * Create a block with a selection
   */
  const groupEntries = useCallback(
    async (entryIds: EntryId[]) => {
      if (entryIds.length === 0) return;

      try {
-        const rundownData = getCurrentRundownData();
-        const rundownId = rundownData?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
        if (entryIds.length === 1) {
-          await groupEntriesMutation([rundownId, entryIds]);
+          await groupEntriesMutation(entryIds);
        } else {
-          // the user selection may be out of order
-          const orderedIds = orderEntries(entryIds, rundownData.flatOrder);
-          await groupEntriesMutation([rundownId, orderedIds]);
+          const rundown = queryClient.getQueryData<Rundown>(RUNDOWN);
+          if (!rundown) return;
+          const orderedIds = orderEntries(entryIds, rundown.flatOrder);
+          await groupEntriesMutation(orderedIds);
        }
      } catch (error) {
        logAxiosError('Error grouping entries', error);
      }
    },
-    [getCurrentRundownData, groupEntriesMutation],
+    [groupEntriesMutation, queryClient],
  );

  /**
@@ -697,8 +645,9 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: reorderEntryMutation } = useMutation({
-    mutationFn: ([rundownId, data]: Parameters<typeof patchReorderEntry>) => patchReorderEntry(rundownId, data),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
+    mutationFn: patchReorderEntry,
+    // Mutation finished, failed or successful
+    // Fetch anyway, just to be sure
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: RUNDOWN });
    },
@@ -709,36 +658,34 @@ export const useEntryActions = () => {
   */
  const move = useCallback(
    async (entryId: EntryId, direction: 'up' | 'down') => {
+      const rundown = queryClient.getQueryData<Rundown>(RUNDOWN);
+      if (!rundown) {
+        return;
+      }
+
+      const { destinationId, order } =
+        direction === 'up'
+          ? moveUp(entryId, rundown.flatOrder, rundown.entries)
+          : moveDown(entryId, rundown.flatOrder, rundown.entries);
+
+      if (!destinationId) {
+        return; // noop
+      }
+
      try {
-        const rundownData = getCurrentRundownData();
-        const rundownId = rundownData?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
-        const { destinationId, order } =
-          direction === 'up'
-            ? moveUp(entryId, rundownData.flatOrder, rundownData.entries)
-            : moveDown(entryId, rundownData.flatOrder, rundownData.entries);
-
-        if (!destinationId) {
-          return; // noop
-        }
-
        const reorderObject: ReorderEntry = {
          entryId,
          destinationId,
          order,
        };
-        await reorderEntryMutation([rundownId, reorderObject]);
-        // the rundown needs to know whether we moved into a group
-        return rundownData.entries[destinationId]?.type === SupportedEntry.Group ? destinationId : undefined;
+        await reorderEntryMutation(reorderObject);
      } catch (error) {
        logAxiosError('Error re-ordering event', error);
      }
-      return undefined;
+      // the rundown needs to know whether we moved into a block
+      return rundown.entries[destinationId]?.type === 'block' ? destinationId : undefined;
    },
-    [getCurrentRundownData, reorderEntryMutation],
+    [queryClient, reorderEntryMutation],
  );
  /**
   * Reorders a given entry
@@ -746,25 +693,17 @@ export const useEntryActions = () => {
  const reorderEntry = useCallback(
    async (entryId: EntryId, destinationId: EntryId, order: 'before' | 'after' | 'insert') => {
      try {
-        const rundownId = getCurrentRundownData()?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
-        await reorderEntryMutation([
-          rundownId,
-          {
-            entryId,
-            destinationId,
-            order,
-          },
-        ]);
+        const reorderObject: ReorderEntry = {
+          entryId,
+          destinationId,
+          order,
+        };
+        await reorderEntryMutation(reorderObject);
      } catch (error) {
        logAxiosError('Error re-ordering event', error);
-        throw error; // rethrow to handle in the component
      }
    },
-    [getCurrentRundownData, reorderEntryMutation],
+    [reorderEntryMutation],
  );

  /**
@@ -772,9 +711,9 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: swapEventsMutation } = useMutation({
-    mutationFn: ([rundownId, from, to]: Parameters<typeof requestEventSwap>) => requestEventSwap(rundownId, from, to),
+    mutationFn: requestEventSwap,
    // we optimistically update here
-    onMutate: async ([_rundownId, from, to]) => {
+    onMutate: async ({ from, to }) => {
      // cancel ongoing queries
      await queryClient.cancelQueries({ queryKey: RUNDOWN });

@@ -823,19 +762,14 @@ export const useEntryActions = () => {
   * Swaps the schedule of two events
   */
  const swapEvents = useCallback(
-    async (from: EntryId, to: EntryId) => {
+    async ({ from, to }: SwapEntry) => {
      try {
-        const rundownId = getCurrentRundownData()?.id;
-        if (!rundownId) {
-          throw new Error('Rundown not initialised');
-        }
-
-        await swapEventsMutation([rundownId, from, to]);
+        await swapEventsMutation({ from, to });
      } catch (error) {
        logAxiosError('Error re-ordering event', error);
      }
    },
-    [getCurrentRundownData, swapEventsMutation],
+    [swapEventsMutation],
  );

  return {
@@ -853,6 +787,7 @@ export const useEntryActions = () => {
    swapEvents,
    updateEntry,
    updateTimer,
+    updateCustomField,
  };
 };

@@ -870,12 +805,14 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
  }

  function deleteEntry(entry: OntimeEntry) {
-    if (isOntimeGroup(entry) || !entry.parent) {
+    if (isOntimeBlock(entry) || !entry.parent) {
      order = order.filter((id) => id !== entry.id);
    } else {
      const parent = entries[entry.parent];
-      if (parent && isOntimeGroup(parent)) {
-        parent.entries = parent.entries.filter((parentEntry) => parentEntry !== entry.id);
+      if ('parent' in entries) {
+        (parent as OntimeBlock).entries = (parent as OntimeBlock).entries.filter(
+          (parentEntry) => parentEntry !== entry.id,
+        );
      }
    }

@@ -23,9 +23,6 @@ export const useFadeOutOnInactivity = (initialState = false) => {

    const throttledShowMenu = throttle(setShowMenuTrue, 1000);

-    // we call the function on mount, to make sure the menu is hidden
-    throttledShowMenu();
-
    document.addEventListener('mousemove', throttledShowMenu);
    document.addEventListener('keydown', throttledShowMenu);

@@ -1,4 +1,4 @@
-import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage, TimerType } from 'ontime-types';
+import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';

 import { useRuntimeStore } from '../stores/runtime';
 import { sendSocket } from '../utils/socket';
@@ -10,16 +10,14 @@ const createSelector =

 export const setClientRemote = {
  setIdentify: (payload: { target: string; identify: boolean }) => sendSocket('client', payload),
-  setRedirect: (payload: { target: string; redirect: string }) => {
-    console.log('--- got', payload);
-    sendSocket('client', payload);
-  },
+  setRedirect: (payload: { target: string; redirect: string }) => sendSocket('client', payload),
  setClientName: (payload: { target: string; rename: string }) => sendSocket('client', payload),
 };

 export const useRundownEditor = createSelector((state: RuntimeStore) => ({
  playback: state.timer.playback,
  selectedEventId: state.eventNow?.id ?? null,
+  selectedBlockId: state.blockNow?.id ?? null,
  nextEventId: state.eventNext?.id ?? null,
 }));

@@ -61,8 +59,8 @@ export const setMessage = {

 export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
  playback: state.timer.playback,
-  selectedEventIndex: state.rundown.selectedEventIndex,
-  numEvents: state.rundown.numEvents,
+  selectedEventIndex: state.runtime.selectedEventIndex,
+  numEvents: state.runtime.numEvents,
  timerPhase: state.timer.phase,
 }));

@@ -133,8 +131,8 @@ export const useSelectedEventId = createSelector((state: RuntimeStore) => ({
  selectedEventId: state.eventNow?.id ?? null,
 }));

-export const useCurrentGroupId = createSelector((state: RuntimeStore) => ({
-  currentGroupId: state.groupNow?.id ?? null,
+export const useCurrentBlockId = createSelector((state: RuntimeStore) => ({
+  currentBlockId: state.blockNow?.id ?? null,
 }));

 export const setEventPlayback = {
@@ -153,8 +151,7 @@ export const useClock = createSelector((state: RuntimeStore) => ({
 }));

 export const useNextFlag = createSelector((state: RuntimeStore) => ({
-  id: state.eventFlag?.id ?? null,
-  expectedStart: state.offset.expectedFlagStart,
+  nextFlag: state.nextFlag,
 }));

 /** Used by the progress bar components */
@@ -165,36 +162,37 @@ export const useProgressData = createSelector((state: RuntimeStore) => ({
  timeDanger: state.eventNow?.timeDanger ?? null,
 }));

-export const useRundownOverview = createSelector((state: RuntimeStore) => ({
-  plannedStart: state.rundown.plannedStart,
-  actualStart: state.rundown.actualStart,
-  plannedEnd: state.rundown.plannedEnd,
-  expectedEnd: state.offset.expectedRundownEnd,
+export const useRuntimeOverview = createSelector((state: RuntimeStore) => ({
+  plannedStart: state.runtime.plannedStart,
+  actualStart: state.runtime.actualStart,
+  plannedEnd: state.runtime.plannedEnd,
+  expectedEnd: state.runtime.expectedEnd,
 }));

 export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) => ({
  playback: state.timer.playback,
  clock: state.clock,

-  numEvents: state.rundown.numEvents,
-  selectedEventIndex: state.rundown.selectedEventIndex,
-  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
+  numEvents: state.runtime.numEvents,
+  selectedEventIndex: state.runtime.selectedEventIndex,
+  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,

-  groupExpectedEnd: state.offset.expectedGroupEnd,
+  blockStartedAt: state.blockNow?.startedAt ?? null,
+  blockExpectedEnd: state.blockNow?.expectedEnd ?? null,
 }));

 export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
  clock: state.clock,
-  offset: state.offset.absolute,
+  offset: state.runtime.offset,
 }));

-export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
-  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
-  mode: state.offset.mode,
-  currentDay: state.eventNow?.dayOffset ?? 0,
-  actualStart: state.rundown.actualStart,
-  plannedStart: state.rundown.plannedStart,
+export const useTimeUntilData = createSelector((state: RuntimeStore) => ({
  clock: state.clock,
+  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
+  offsetMode: state.runtime.offsetMode,
+  currentDay: state.eventNow?.dayOffset ?? 0,
+  actualStart: state.runtime.actualStart,
+  plannedStart: state.runtime.plannedStart,
 }));

 export const useCurrentDay = createSelector((state: RuntimeStore) => ({
@@ -202,7 +200,7 @@ export const useCurrentDay = createSelector((state: RuntimeStore) => ({
 }));

 export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({
-  offset: state.offset.absolute,
+  offset: state.runtime.offset,
 }));

 export const usePing = createSelector((state: RuntimeStore) => ({
@@ -215,7 +213,7 @@ export const useIsOnline = createSelector((state: RuntimeStore) => ({
 }));

 export const useOffsetMode = createSelector((state: RuntimeStore) => ({
-  offsetMode: state.offset.mode,
+  offsetMode: state.runtime.offsetMode,
 }));

 export const setOffsetMode = (payload: OffsetMode) => sendSocket('offsetmode', payload);
@@ -227,53 +225,3 @@ export const usePlayback = () => {

  return useRuntimeStore(featureSelector);
 };
-
-/* ======================= View specific subscriptions ======================= */
-
-export const useTimerSocket = createSelector((state: RuntimeStore) => ({
-  eventNext: state.eventNext,
-  eventNow: state.eventNow,
-  message: state.message,
-  time: state.timer,
-  clock: state.clock,
-  timerTypeNow: state.eventNow?.timerType ?? TimerType.CountDown,
-  countToEndNow: state.eventNow?.countToEnd ?? false,
-  auxTimer: {
-    aux1: state.auxtimer1.current,
-    aux2: state.auxtimer2.current,
-    aux3: state.auxtimer3.current,
-  },
-}));
-
-export const useCountdownSocket = createSelector((state: RuntimeStore) => ({
-  playback: state.timer.playback,
-  current: state.timer.current,
-  clock: state.clock,
-}));
-
-export const useBackstageSocket = createSelector((state: RuntimeStore) => ({
-  eventNext: state.eventNext,
-  eventNow: state.eventNow,
-  rundown: state.rundown,
-  selectedEventId: state.eventNow?.id ?? null,
-  time: state.timer,
-}));
-
-export const useStudioClockSocket = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
-  playback: state.timer.playback,
-}));
-
-export const useStudioTimersSocket = createSelector((state: RuntimeStore) => ({
-  eventNext: state.eventNext,
-  eventNow: state.eventNow,
-  message: state.message,
-  time: state.timer,
-  offset: state.offset,
-  rundown: state.rundown,
-}));
-
-export const useTimelineSocket = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
-  offset: state.offset.absolute,
-}));
@@ -0,0 +1,19 @@
+import { MaybeNumber, Playback, TimerPhase, TimerType } from 'ontime-types';
+
+// first set extends TimerState
+export type ViewExtendedTimer = {
+  addedTime: number;
+  current: MaybeNumber;
+  duration: MaybeNumber;
+  elapsed: MaybeNumber;
+  expectedFinish: MaybeNumber;
+  finishedAt: MaybeNumber;
+  phase: TimerPhase;
+  playback: Playback;
+  secondaryTimer: MaybeNumber;
+  startedAt: MaybeNumber;
+
+  clock: number;
+  timerType: TimerType;
+  countToEnd: boolean;
+};
@@ -1,8 +1,6 @@
 import { ClientList } from 'ontime-types';
 import { create } from 'zustand';

-import { makeStageKey } from '../utils/localStorage';
-
 interface ClientStore {
  name?: string;
  setName: (newValue: string) => void;
@@ -17,7 +15,7 @@ interface ClientStore {
  setClients: (clients: ClientList) => void;
 }

-const clientNameKey = makeStageKey('client-name');
+const clientNameKey = 'ontime-client-name';

 function persistNameInStorage(newValue: string) {
  localStorage.setItem(clientNameKey, newValue);
@@ -1,89 +0,0 @@
-import { create } from 'zustand';
-
-type Target = 'cuesheet' | 'timer' | 'clock' | 'countdown' | 'backstage' | 'studio';
-
-interface SelectionState {
-  [key: string]: boolean;
-}
-
-interface ColumnPermissions {
-  read: string[];
-  write: string[];
-}
-
-interface CuesheetLinksState {
-  target: Target | null;
-  readSelected: SelectionState;
-  writeSelected: SelectionState;
-  setTarget: (target: Target | null) => void;
-  setField: (field: 'read' | 'write', key: string, value: boolean) => void;
-  toggleField: (field: 'read' | 'write', key: string) => void;
-  selectAll: (field: 'read' | 'write', keys: string[]) => void;
-  clearAll: (field: 'read' | 'write', keys: string[]) => void;
-  // Returns arrays of column keys that have read/write permissions if target is 'cuesheet'
-  getSelections: () => ColumnPermissions | null;
-}
-
-export const useCuesheetLinksStore = create<CuesheetLinksState>((set, get) => ({
-  target: null,
-  readSelected: {},
-  writeSelected: {},
-  setTarget: (target) => set({ target }),
-  setField: (field, key, value) =>
-    set((state) => ({
-      ...(field === 'read'
-        ? { readSelected: { ...state.readSelected, [key]: value } }
-        : { writeSelected: { ...state.writeSelected, [key]: value } }),
-    })),
-  toggleField: (field, key) =>
-    set((state) => ({
-      ...(field === 'read'
-        ? { readSelected: { ...state.readSelected, [key]: !state.readSelected[key] } }
-        : { writeSelected: { ...state.writeSelected, [key]: !state.writeSelected[key] } }),
-    })),
-  selectAll: (field, keys) =>
-    set((_state) => ({
-      ...(field === 'read'
-        ? {
-            readSelected: keys.reduce((acc, key) => {
-              acc[key] = true;
-              return acc;
-            }, {} as SelectionState),
-          }
-        : {
-            writeSelected: keys.reduce((acc, key) => {
-              acc[key] = true;
-              return acc;
-            }, {} as SelectionState),
-          }),
-    })),
-  clearAll: (field, keys) =>
-    set((_state) => ({
-      ...(field === 'read'
-        ? {
-            readSelected: keys.reduce((acc, key) => {
-              acc[key] = false;
-              return acc;
-            }, {} as SelectionState),
-          }
-        : {
-            writeSelected: keys.reduce((acc, key) => {
-              acc[key] = false;
-              return acc;
-            }, {} as SelectionState),
-          }),
-    })),
-  getSelections: () => {
-    const state = get();
-    if (state.target !== 'cuesheet') return null;
-
-    return {
-      read: Object.entries(state.readSelected)
-        .filter(([_, selected]) => selected)
-        .map(([key]) => key),
-      write: Object.entries(state.writeSelected)
-        .filter(([_, selected]) => selected)
-        .map(([key]) => key),
-    };
-  },
-}));
@@ -3,7 +3,7 @@ import { create } from 'zustand';
 import { booleanFromLocalStorage } from '../utils/localStorage';

 enum LocalEventKeys {
-  Mirror = 'view-mirror',
+  Mirror = 'ontime-view-mirror',
 }

 type ViewOptionsStore = {
@@ -1,302 +0,0 @@
-import { OntimeDelay, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';
-
-import { initRundownMetadata } from '../rundownMetadata';
-
-describe('initRundownMetadata()', () => {
-  it('processes nested rundown data', () => {
-    const selectedEventId = '12';
-    const demoEvents = {
-      '1': {
-        id: '1',
-        type: SupportedEntry.Event,
-        parent: null,
-        timeStart: 0,
-        timeEnd: 1,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-      group: {
-        id: 'group',
-        type: SupportedEntry.Group,
-        entries: ['11', 'delay', '12', '13'],
-        colour: 'red',
-      } as OntimeGroup,
-      '11': {
-        id: '11',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 10,
-        timeEnd: 11,
-        duration: 1,
-        dayOffset: 0,
-        gap: 10,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-      delay: {
-        id: 'delay',
-        type: SupportedEntry.Delay,
-        parent: 'group',
-        duration: 0,
-      } as OntimeDelay,
-      '12': {
-        id: '12',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 11,
-        timeEnd: 12,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: true,
-      } as OntimeEvent,
-      '13': {
-        id: '13',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 12,
-        timeEnd: 13,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: true,
-      } as OntimeEvent,
-      '2': {
-        id: '2',
-        type: SupportedEntry.Event,
-        parent: null,
-        timeStart: 20,
-        timeEnd: 21,
-        duration: 1,
-        dayOffset: 0,
-        gap: 7,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-    };
-
-    const { metadata, process } = initRundownMetadata(selectedEventId);
-
-    expect(metadata).toStrictEqual({
-      previousEvent: null,
-      latestEvent: null,
-      previousEntryId: null,
-      thisId: null,
-      eventIndex: 0,
-      isPast: true,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: null,
-      groupColour: undefined,
-      groupEntries: undefined,
-      isFirstAfterGroup: false,
-    });
-
-    expect(process(demoEvents['1'])).toStrictEqual({
-      previousEvent: null,
-      latestEvent: demoEvents['1'],
-      previousEntryId: null,
-      thisId: demoEvents['1'].id,
-      eventIndex: 1, // UI indexes are 1 based
-      isPast: true,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: null,
-      groupColour: undefined,
-      groupEntries: undefined,
-      isFirstAfterGroup: false,
-    });
-
-    expect(process(demoEvents['group'])).toMatchObject({
-      previousEvent: demoEvents['1'],
-      latestEvent: demoEvents['1'],
-      previousEntryId: demoEvents['1'].id,
-      thisId: demoEvents['group'].id,
-      eventIndex: 1,
-      isPast: true,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: 'group',
-      groupColour: 'red',
-      isFirstAfterGroup: false,
-    });
-
-    expect(process(demoEvents['11'])).toMatchObject({
-      previousEvent: demoEvents['1'],
-      latestEvent: demoEvents['11'],
-      previousEntryId: demoEvents['group'].id,
-      thisId: demoEvents['11'].id,
-      eventIndex: 2,
-      isPast: true,
-      isNextDay: false,
-      totalGap: 10,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: 'group',
-      groupColour: 'red',
-      isFirstAfterGroup: false,
-    });
-
-    expect(process(demoEvents['delay'])).toMatchObject({
-      previousEvent: demoEvents['11'],
-      latestEvent: demoEvents['11'],
-      previousEntryId: demoEvents['11'].id,
-      thisId: demoEvents['delay'].id,
-      eventIndex: 2,
-      isPast: true,
-      isNextDay: false,
-      totalGap: 10,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: 'group',
-      groupColour: 'red',
-      isFirstAfterGroup: false,
-    });
-
-    expect(process(demoEvents['12'])).toMatchObject({
-      previousEvent: demoEvents['11'],
-      latestEvent: demoEvents['12'],
-      previousEntryId: demoEvents['delay'].id,
-      thisId: demoEvents['12'].id,
-      eventIndex: 3,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 10,
-      isLinkedToLoaded: true,
-      isLoaded: true,
-      groupId: 'group',
-      groupColour: 'red',
-      isFirstAfterGroup: false,
-    });
-
-    expect(process(demoEvents['13'])).toMatchObject({
-      previousEvent: demoEvents['12'],
-      latestEvent: demoEvents['13'],
-      previousEntryId: demoEvents['12'].id,
-      thisId: demoEvents['13'].id,
-      eventIndex: 4,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 10,
-      isLinkedToLoaded: true,
-      isLoaded: false,
-      groupId: 'group',
-      groupColour: 'red',
-      isFirstAfterGroup: false,
-    });
-
-    expect(process(demoEvents['2'])).toMatchObject({
-      previousEvent: demoEvents['13'],
-      latestEvent: demoEvents['2'],
-      previousEntryId: demoEvents['13'].id,
-      thisId: demoEvents['2'].id,
-      eventIndex: 5,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 17,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: null,
-      groupColour: undefined,
-      isFirstAfterGroup: true,
-    });
-  });
-
-  it('populates previousEntries in groups', () => {
-    const rundownStartsWithGroup = {
-      group: {
-        id: 'group',
-        type: SupportedEntry.Group,
-        colour: 'red',
-        entries: ['1', '2'],
-      } as OntimeGroup,
-      '1': {
-        id: '1',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 1,
-        timeEnd: 2,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-      '2': {
-        id: '2',
-        type: SupportedEntry.Event,
-        parent: 'group',
-        timeStart: 2,
-        timeEnd: 3,
-        duration: 1,
-        dayOffset: 0,
-        gap: 0,
-        skip: false,
-        linkStart: false,
-      } as OntimeEvent,
-    };
-    const { process } = initRundownMetadata(null);
-
-    expect(process(rundownStartsWithGroup.group)).toStrictEqual({
-      previousEvent: null,
-      latestEvent: null,
-      previousEntryId: null,
-      thisId: rundownStartsWithGroup.group.id,
-      eventIndex: 0,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: rundownStartsWithGroup.group.id,
-      groupColour: 'red',
-      groupEntries: 2,
-      isFirstAfterGroup: false,
-    });
-
-    expect(process(rundownStartsWithGroup['1'])).toStrictEqual({
-      previousEvent: null,
-      latestEvent: rundownStartsWithGroup['1'],
-      previousEntryId: rundownStartsWithGroup.group.id,
-      thisId: rundownStartsWithGroup['1'].id,
-      eventIndex: 1,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: rundownStartsWithGroup.group.id,
-      groupColour: 'red',
-      groupEntries: 2,
-      isFirstAfterGroup: false,
-    });
-
-    expect(process(rundownStartsWithGroup['2'])).toStrictEqual({
-      previousEvent: rundownStartsWithGroup['1'],
-      latestEvent: rundownStartsWithGroup['2'],
-      previousEntryId: rundownStartsWithGroup['1'].id,
-      thisId: rundownStartsWithGroup['2'].id,
-      eventIndex: 2,
-      isPast: false,
-      isNextDay: false,
-      totalGap: 0,
-      isLinkedToLoaded: false,
-      isLoaded: false,
-      groupId: rundownStartsWithGroup.group.id,
-      groupColour: 'red',
-      groupEntries: 2,
-      isFirstAfterGroup: false,
-    });
-  });
-});
@@ -1,14 +1,6 @@
-import { Path, resolvePath } from 'react-router';
-import { OntimeView, URLPreset } from 'ontime-types';
+import { resolvePath } from 'react-router-dom';

-import {
-  arePathsEquivalent,
-  generatePathFromPreset,
-  generateUrlPresetOptions,
-  getCurrentPath,
-  getRouteFromPreset,
-  validateUrlPresetPath,
-} from '../urlPresets';
+import { arePathsEquivalent, generatePathFromPreset, getRouteFromPreset, validateUrlPresetPath } from '../urlPresets';

 describe('validateUrlPresetPaths()', () => {
  test.each([
@@ -31,13 +23,11 @@ describe('validateUrlPresetPaths()', () => {
 });

 describe('getRouteFromPreset()', () => {
-  const presets: URLPreset[] = [
+  const presets = [
    {
      enabled: true,
      alias: 'demopage',
-      target: OntimeView.Timer,
-      search: 'user=guest',
-      options: {},
+      pathAndParams: '/timer?user=guest',
    },
  ];

@@ -73,28 +63,28 @@ describe('getRouteFromPreset()', () => {

  describe('handle url sharing edge cases', () => {
    it('finds the correct preset when the url contains extra arguments', () => {
-      const location = resolvePath('/demopage?n=1&token=123');
+      const location = resolvePath('/demopage?locked=true&token=123');
      expect(getRouteFromPreset(location, presets)?.startsWith('timer?user=guest&alias=demopage')).toBeTruthy();
    });

    it('appends the feature params to the alias', () => {
-      const location = resolvePath('/demopage?n=1&token=123');
-      expect(getRouteFromPreset(location, presets)).toBe('timer?user=guest&alias=demopage&n=1&token=123');
+      const location = resolvePath('/demopage?locked=true&token=123');
+      expect(getRouteFromPreset(location, presets)).toBe('timer?user=guest&alias=demopage&locked=true&token=123');
    });
  });
 });

 describe('generatePathFromPreset()', () => {
  test.each([
-    ['timer', 'user=guest', 'demopage', false, 'timer?user=guest&alias=demopage'],
-    ['timer', 'user=admin', 'demopage', false, 'timer?user=admin&alias=demopage'],
-  ])('generates a path from a preset: %s', (target, search, alias, locked, expected) => {
-    expect(generatePathFromPreset(target, search, alias, locked, null)).toEqual(expected);
+    ['timer?user=guest', 'demopage', 'timer?user=guest&alias=demopage'],
+    ['timer?user=admin', 'demopage', 'timer?user=admin&alias=demopage'],
+  ])('generates a path from a preset: %s', (path, alias, expected) => {
+    expect(generatePathFromPreset(path, alias, null, null)).toEqual(expected);
  });

  test('appends the feature params to the alias', () => {
-    expect(generatePathFromPreset('timer', 'user=guest', 'demopage', true, '123')).toBe(
-      'timer?user=guest&alias=demopage&n=1&token=123',
+    expect(generatePathFromPreset('timer?user=guest', 'demopage', 'true', '123')).toBe(
+      'timer?user=guest&alias=demopage&locked=true&token=123',
    );
  });
 });
@@ -111,84 +101,8 @@ describe('arePathsEquivalent()', () => {
    expect(arePathsEquivalent('timer?test=a', 'timer?test=a')).toBeTruthy();
  });

-  it('checks whether we are in a locked preset', () => {
-    expect(arePathsEquivalent('preset/minimal', 'preset/minimal?test=b')).toBeTruthy();
-  });
-
  it('considers edge cases for the url sharing feature', () => {
-    expect(arePathsEquivalent('timer?test=a&n=1=token=123', 'timer?test=b')).toBeFalsy();
-    expect(arePathsEquivalent('timer?test=a&n=1=token=123', 'timer?test=a')).toBeTruthy();
-  });
-});
-
-describe('generateUrlPresetOptions', () => {
-  it.each([
-    [
-      'cloud URL without protocol',
-      'test',
-      'www.getontime.no/timer?param1=value1&param2=value2',
-      {
-        alias: 'test',
-        target: 'timer',
-        search: 'param1=value1&param2=value2',
-        enabled: true,
-      },
-    ],
-    [
-      'cloud URL',
-      'test',
-      'https://cloud.getontime.no/timer?param1=value1&param2=value2',
-      {
-        alias: 'test',
-        target: 'timer',
-        search: 'param1=value1&param2=value2',
-        enabled: true,
-      },
-    ],
-    [
-      'local URL',
-      'test',
-      'http://localhost:4001/timer?param1=value1&param2=value2',
-      {
-        alias: 'test',
-        target: 'timer',
-        search: 'param1=value1&param2=value2',
-        enabled: true,
-      },
-    ],
-    [
-      'IP-based URL',
-      'test',
-      'http://192.168.0.1:4001/timer?param1=value1&param2=value2',
-      {
-        alias: 'test',
-        target: 'timer',
-        search: 'param1=value1&param2=value2',
-        enabled: true,
-      },
-    ],
-  ])('should generate URL preset options for %s', (_description, alias, url, expected) => {
-    expect(generateUrlPresetOptions(alias, url)).toStrictEqual(expected);
-  });
-
-  it('throws on invalid URL', () => {
-    expect(() => generateUrlPresetOptions('test', 'invalid-url')).toThrow();
-  });
-
-  it('throws on on invalid route', () => {
-    expect(() => generateUrlPresetOptions('test', 'www.getontime.no/somethingelse/')).toThrow();
-  });
-});
-
-describe('getCurrentPath()', () => {
-  test.each([
-    [resolvePath('http://localhost:4001/timer'), 'timer'],
-    [resolvePath('http://192.168.0.1:654321/minimal'), 'minimal'],
-    [resolvePath('https://user-hosted.io/cuesheet'), 'cuesheet'],
-    [resolvePath('https://cloud.getontime.no/team-hash/op'), 'op'],
-    [resolvePath('https://cloud.getontime.no/team-hash/backstage/?params-with-slash=true'), 'backstage'],
-    [resolvePath('https://cloud.getontime.no/team-hash/timeline?params-are-ignored=true'), 'timeline'],
-  ])('resolves the current: %s', (location, expected) => {
-    expect(getCurrentPath(location as Path)).toEqual(expected);
+    expect(arePathsEquivalent('timer?test=a&locked=true=token=123', 'timer?test=b')).toBeFalsy();
+    expect(arePathsEquivalent('timer?test=a&locked=true=token=123', 'timer?test=a')).toBeTruthy();
  });
 });
@@ -1,5 +1,3 @@
-import { baseURI } from '../../externals';
-
 export function booleanFromLocalStorage(key: string, fallback: boolean): boolean {
  const valueInStorage = localStorage.getItem(key);
  if (valueInStorage) {
@@ -9,8 +7,3 @@ export function booleanFromLocalStorage(key: string, fallback: boolean): boolean
    return fallback;
  }
 }
-
-export function makeStageKey(key: string) {
-  if (baseURI) return `${baseURI}-${key}`;
-  return key;
-}
@@ -19,8 +19,7 @@ export function getOffsetText(offset: MaybeNumber): string {
 }

 export function getOffsetState(offset: MaybeNumber): 'over' | 'under' | 'muted' | null {
-  if (offset === null) return 'muted';
-  if (offset === 0) return null;
-  // a positive value means that we are in over time aka behind schedule
-  return offset > 0 ? 'over' : 'under';
+  if (offset === null) return null;
+  if (offset === 0) return 'muted';
+  return offset < 0 ? 'over' : 'under';
 }
@@ -11,4 +11,3 @@ export const isAlphanumeric = /^[a-z0-9]+$/i;
 export const isASCII = /^[ -~]+$/; //https://catonmat.net/my-favorite-regex
 export const isASCIIorEmpty = /^$|^[ -~]+$/; //https://catonmat.net/my-favorite-regex
 export const isNotEmpty = /\S/;
-export const isUrlSafe = /^[a-zA-Z0-9_-]*$/; // https://stackoverflow.com/questions/24419067/validate-a-string-to-be-url-safe-using-regex
@@ -1,175 +0,0 @@
-import {
-  isOntimeEvent,
-  isOntimeGroup,
-  isPlayableEvent,
-  MaybeString,
-  OntimeDelay,
-  OntimeEntry,
-  OntimeEvent,
-  OntimeMilestone,
-  PlayableEvent,
-  Rundown,
-} from 'ontime-types';
-import { checkIsNextDay, isNewLatest } from 'ontime-utils';
-
-export type RundownMetadata = {
-  previousEvent: PlayableEvent | null; // The playableEvent from the previous iteration, used by indicators
-  latestEvent: PlayableEvent | null; // The playableEvent most forwards in time processed so far
-  previousEntryId: MaybeString; // previous entry is used to infer position in the rundown for new events
-  thisId: MaybeString;
-  eventIndex: number;
-  isPast: boolean;
-  isNextDay: boolean;
-  totalGap: number;
-  isLinkedToLoaded: boolean; // check if the event can link all the way back to the currently playing event
-  isLoaded: boolean;
-  groupId: MaybeString;
-  groupColour: string | undefined;
-  groupEntries: number | undefined;
-  isFirstAfterGroup: boolean;
-};
-
-export type ExtendedEntry<T extends OntimeEntry = OntimeEntry> = T & RundownMetadata;
-
-export const lastMetadataKey = 'LAST';
-
-export type RundownMetadataObject = Record<string, Readonly<RundownMetadata>>;
-
-/**
- * Generates a Rundown Metadata object from a rundown
- */
-export function getRundownMetadata(
-  data: Pick<Rundown, 'entries' | 'flatOrder'>,
-  selectedEventId: MaybeString,
-): RundownMetadataObject {
-  const { metadata, process } = initRundownMetadata(selectedEventId);
-  // keep a single reference to the metadata which we override for every entry
-  let lastSnapshot = metadata;
-  const rundownMetadata: RundownMetadataObject = {};
-
-  for (const id of data.flatOrder) {
-    const entry = data.entries[id];
-    lastSnapshot = process(entry);
-    rundownMetadata[id] = lastSnapshot;
-  }
-
-  // ensure some blank data even for empty rundowns
-  rundownMetadata[lastMetadataKey] = lastSnapshot;
-
-  return rundownMetadata;
-}
-
-export function getFlatRundownMetadata(
-  data: Pick<Rundown, 'entries' | 'flatOrder'>,
-  selectedEventId: MaybeString,
-): ExtendedEntry[] {
-  const { process } = initRundownMetadata(selectedEventId);
-  const flatRundown: ExtendedEntry[] = [];
-
-  for (const id of data.flatOrder) {
-    const entry = data.entries[id];
-    const extendedEntry = { ...entry, ...process(entry) };
-    flatRundown.push(extendedEntry);
-  }
-
-  return flatRundown;
-}
-
-/**
- * Creates a process function which aggregates the rundown metadata and event metadata
- */
-export function initRundownMetadata(selectedEventId: MaybeString) {
-  let rundownMeta: RundownMetadata = {
-    previousEvent: null,
-    latestEvent: null,
-    previousEntryId: null,
-    thisId: null,
-    eventIndex: 0,
-    isPast: Boolean(selectedEventId), // all events before the current selected are in the past
-    isNextDay: false,
-    totalGap: 0,
-    isLinkedToLoaded: false,
-    isLoaded: false,
-    groupId: null,
-    groupColour: undefined,
-    groupEntries: undefined,
-    isFirstAfterGroup: false,
-  };
-
-  function process(entry: OntimeEntry): Readonly<RundownMetadata> {
-    const processedRundownMetadata = processEntry(rundownMeta, selectedEventId, entry);
-    rundownMeta = processedRundownMetadata;
-    return rundownMeta;
-  }
-
-  return { metadata: rundownMeta, process };
-}
-
-/**
- * Receives a rundown entry and processes its place in the rundown
- */
-function processEntry(
-  rundownMetadata: RundownMetadata,
-  selectedEventId: MaybeString,
-  entry: Readonly<OntimeEntry>,
-): Readonly<RundownMetadata> {
-  const processedData = { ...rundownMetadata };
-  // initialise data to be overridden below
-  processedData.isNextDay = false;
-  processedData.isLoaded = false;
-
-  processedData.previousEntryId = processedData.thisId; // thisId comes from the previous iteration
-  processedData.thisId = entry.id; // we reassign thisId
-  processedData.previousEvent = processedData.latestEvent;
-
-  if (entry.id === selectedEventId) {
-    processedData.isLoaded = true;
-    processedData.isPast = false;
-    processedData.isLinkedToLoaded = true;
-  }
-
-  if (isOntimeGroup(entry)) {
-    processedData.groupId = entry.id;
-    processedData.groupColour = entry.colour;
-    processedData.groupEntries = entry.entries.length;
-  } else {
-    // for delays and groups, we insert the group metadata
-    if ((entry as OntimeEvent | OntimeDelay | OntimeMilestone).parent !== processedData.groupId) {
-      // if the parent is not the current group, we need to update the groupId
-      processedData.groupId = (entry as OntimeEvent | OntimeDelay | OntimeMilestone).parent;
-      processedData.groupEntries = undefined;
-      if ((entry as OntimeEvent | OntimeDelay | OntimeMilestone).parent === null) {
-        // if the entry has no parent, it cannot have a group colour
-        processedData.groupColour = undefined;
-      }
-    }
-
-    if (isOntimeEvent(entry)) {
-      // event indexes are 1 based in UI
-      processedData.eventIndex += 1;
-      processedData.isFirstAfterGroup = Boolean(processedData.previousEvent?.parent) && entry.parent === null;
-
-      if (isPlayableEvent(entry)) {
-        processedData.isNextDay = checkIsNextDay(entry, processedData.previousEvent);
-        processedData.totalGap += entry.gap;
-
-        if (!processedData.isPast && !processedData.isLoaded) {
-          /**
-           * isLinkToLoaded is a chain value that we maintain until we
-           * a) find an unlinked event
-           * b) find a countToEnd event
-           */
-          processedData.isLinkedToLoaded =
-            entry.linkStart && !processedData.previousEvent?.countToEnd && processedData.isLinkedToLoaded;
-        }
-
-        if (isNewLatest(entry, processedData.latestEvent)) {
-          // this event is the forward most event in rundown, for next iteration
-          processedData.latestEvent = entry;
-        }
-      }
-    }
-  }
-
-  return processedData;
-}
@@ -10,18 +10,7 @@ import {
 } from 'ontime-types';

 import { isProduction, websocketUrl } from '../../externals';
-import {
-  APP_SETTINGS,
-  CLIENT_LIST,
-  CUSTOM_FIELDS,
-  PROJECT_DATA,
-  REPORT,
-  RUNDOWN,
-  RUNTIME,
-  TRANSLATION,
-  URL_PRESETS,
-  VIEW_SETTINGS,
-} from '../api/constants';
+import { CLIENT_LIST, CUSTOM_FIELDS, PROJECT_DATA, REPORT, RUNDOWN, RUNTIME, VIEW_SETTINGS } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
 import {
@@ -144,8 +133,16 @@ export const connectSocket = () => {
          break;
        }
        case MessageTag.RuntimeData: {
-          patchRuntime(payload);
-          updateDevTools(payload);
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars -- removing the key from the payload
+          const { ping, ...serverPayload } = payload;
+          patchRuntime(serverPayload);
+          updateDevTools(serverPayload);
+          break;
+        }
+        case MessageTag.RuntimePatch: {
+          const patch = payload;
+          patchRuntime(patch);
+          updateDevTools(patch);
          break;
        }
        case MessageTag.Refetch: {
@@ -169,18 +166,9 @@ export const connectSocket = () => {
              ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });
              ontimeQueryClient.invalidateQueries({ queryKey: CUSTOM_FIELDS });
              break;
-            case RefetchKey.UrlPresets:
-              ontimeQueryClient.invalidateQueries({ queryKey: URL_PRESETS });
-              break;
            case RefetchKey.ViewSettings:
              ontimeQueryClient.invalidateQueries({ queryKey: VIEW_SETTINGS });
              break;
-            case RefetchKey.Translation:
-              ontimeQueryClient.invalidateQueries({ queryKey: TRANSLATION });
-              break;
-            case RefetchKey.Settings:
-              ontimeQueryClient.invalidateQueries({ queryKey: APP_SETTINGS });
-              break;
            default: {
              target satisfies never;
              break;
@@ -1,7 +1,7 @@
 import { MaybeNumber, OntimeEvent, Settings, TimeFormat } from 'ontime-types';
 import {
+  calculateTimeUntilStart,
  formatFromMillis,
-  getExpectedStart,
  MILLIS_PER_HOUR,
  MILLIS_PER_MINUTE,
  MILLIS_PER_SECOND,
@@ -9,7 +9,7 @@ import {

 import { FORMAT_12, FORMAT_24 } from '../../viewerConfig';
 import { APP_SETTINGS } from '../api/constants';
-import { useExpectedStartData } from '../hooks/useSocket';
+import { useTimeUntilData } from '../hooks/useSocket';
 import { ontimeQueryClient } from '../queryClient';

 /**
@@ -105,7 +105,8 @@ export const formatTime = (

 /**
 * Handles case for formatting a duration time
- * eg: "1h 0m 0s" or "0h 30m"
+ * @param duration
+ * @returns
 */
 export function formatDuration(duration: number, hideSeconds = true): string {
  // durations should never be negative, we handle it here to flag if there is an issue in future
@@ -133,24 +134,18 @@ export function formatDuration(duration: number, hideSeconds = true): string {
 }

 /**
+ *
 * @param totalGap accumulated gap from the current event
 * @param isLinkedToLoaded is this event part of a chain linking back to the current loaded event
 * @returns
 */
-export function useTimeUntilExpectedStart(
+export function useTimeUntilStart(
  // typed like this to make it very clear what the data is
-  event: Pick<OntimeEvent, 'timeStart' | 'dayOffset' | 'delay'> | null,
-  state: {
+  data: Pick<OntimeEvent, 'timeStart' | 'dayOffset' | 'delay'> & {
    totalGap: number;
    isLinkedToLoaded: boolean;
  },
 ): number {
-  const { offset, currentDay, mode, actualStart, plannedStart, clock } = useExpectedStartData();
-  if (event === null) return 0;
-
-  const expectedStart = getExpectedStart(
-    { ...event },
-    { ...state, currentDay, offset, mode, actualStart, plannedStart },
-  );
-  return expectedStart - clock;
+  const { offset, clock, currentDay, offsetMode, actualStart, plannedStart } = useTimeUntilData();
+  return calculateTimeUntilStart({ ...data, currentDay, clock, offset, offsetMode, actualStart, plannedStart });
 }
@@ -1,6 +1,5 @@
-import { Path, resolvePath } from 'react-router';
-import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
-import { checkRegex } from 'ontime-utils';
+import { Path, resolvePath } from 'react-router-dom';
+import { URLPreset } from 'ontime-types';

 /**
 * Validates a preset against defined parameters
@@ -27,75 +26,59 @@ export function validateUrlPresetPath(preset: string): { message: string; isVali
  return { isValid: true, message: 'ok' };
 }

+/**
+ * Utility removes trailing slash from a string
+ */
+function removeTrailingSlash(text: string): string {
+  return text.replace(/\/$/, '');
+}
+
 /**
 * Checks whether the current location corresponds to a preset and returns the new path if necessary
 */
 export function getRouteFromPreset(location: Path, urlPresets: URLPreset[]): string | null {
-  // if we're already on a preset path, no need to redirect
-  if (isPresetPath(location)) {
+  // current url is the pathname without the leading slash
+  const currentURL = location.pathname.substring(1);
+  const searchParams = new URLSearchParams(location.search);
+
+  // check if we have token or locked in the search params
+  const locked = searchParams.get('locked');
+  const token = searchParams.get('token');
+
+  // we need to check if the whole url is an alias
+  const foundPreset = urlPresets.find((preset) => preset.alias === removeTrailingSlash(currentURL) && preset.enabled);
+  if (foundPreset) {
+    // if so, we can redirect to the preset path
+    return generatePathFromPreset(foundPreset.pathAndParams, foundPreset.alias, locked, token);
+  }
+
+  // if the current url is not an alias, we check if the alias is in the search parameters
+  const presetOnPage = searchParams.get('alias');
+  if (!presetOnPage) {
    return null;
  }

-  // NOTE: verify that this resolves correctly in cloud
  const currentPath = `${location.pathname}${location.search}`.substring(1);
-  const currentURL = getCurrentPath(location);
-  const token = new URLSearchParams(location.search).get('token');
-  const isLocked = location.search.includes('n=1');

  for (const preset of urlPresets) {
-    if (!preset.enabled) continue;
-    /**
-     * If the page is a known alias it would be like
-     * /preset/{alias} <- locked to a preset
-     * or
-     * /{target}?alias={alias}  <- unwrapped preset options
-     *
-     * we need to compare the saved preset to the current path to see if we need to redirect
-     */
-    if (preset.alias === currentURL || preset.target === currentURL) {
-      const newPath = generatePathFromPreset(preset.target, preset.search, preset.alias, isLocked, token);
-      /**
-       * if the current path is equivalent to the new path, we return null
-       * this means we will not redirect
-       */
-      return arePathsEquivalent(currentPath, newPath) ? null : newPath;
+    // if the page has a known enabled alias, we check if we need to redirect
+    if (preset.alias === presetOnPage && preset.enabled) {
+      const newPath = generatePathFromPreset(preset.pathAndParams, preset.alias, locked, token);
+      if (!arePathsEquivalent(currentPath, newPath)) {
+        // if current path is out of date
+        // return new path so we can redirect
+        return newPath;
+      }
    }
  }
-
  return null;
 }

-/**
- * Resolves the current path accounting for the base URI
- * Returns the alias if it's a preset path, or the last segment otherwise
- */
-export function getCurrentPath(location: Path): string {
-  // 1. get path without query parameters
-  const pathWithoutQuery = location.pathname.split('?')[0];
-  // 2. split path into segments and filter out empty segments
-  const segments = pathWithoutQuery.split('/').filter(Boolean);
-
-  // If this is a preset path, return the alias (last segment)
-  if (segments[0] === 'preset' && segments.length > 1) {
-    return segments[1];
-  }
-
-  // Otherwise return the last segment (view name)
-  return segments[segments.length - 1] || '';
-}
-
 /**
 * Handles generating a path and search parameters from a preset
- * This is done when we want to keep the current navigation and unwrap the search params
 */
-export function generatePathFromPreset(
-  target: Omit<OntimeView, 'editor'>,
-  search: string,
-  alias: string,
-  locked: boolean,
-  token: string | null,
-): string {
-  const path = resolvePath(`${target}?${search}`);
+export function generatePathFromPreset(pathAndParams: string, alias: string, locked: string | null, token: string | null ): string {
+  const path = resolvePath(pathAndParams);
  const searchParams = new URLSearchParams(path.search);

  // save the alias so we have a reference to it being a preset and can update if necessary
@@ -103,7 +86,7 @@ export function generatePathFromPreset(

  // maintain params from the URL search feature
  if (locked) {
-    searchParams.set('n', '1');
+    searchParams.set('locked', locked);
  }

  if (token) {
@@ -116,64 +99,28 @@ export function generatePathFromPreset(

 /**
 * Utility checks if two paths are equivalent
- * For preset paths, only compares the path (since params are stored in session)
- * For regular paths, compares path and search params (ignoring token)
+ * Considers the edge cases for url sharing where a path may contain extra arguments from the alias
+ * - token
+ * - locked
 */
 export function arePathsEquivalent(currentPath: string, newPath: string): boolean {
  const currentUrl = new URL(currentPath, document.location.origin);
  const newUrl = new URL(newPath, document.location.origin);
-
-  // For preset paths, only compare the path
-  if (currentUrl.pathname.startsWith('/preset/') || newUrl.pathname.startsWith('/preset/')) {
-    return currentUrl.pathname === newUrl.pathname;
-  }
-
-  // For regular paths, compare path and search params (ignoring token)
+  
+  // check path
  if (currentUrl.pathname !== newUrl.pathname) {
-    return false;
+    return false
  }

+  // check search params
+  // if the params match, we dont need further checks
+  if (currentUrl.searchParams.toString() === newUrl.searchParams.toString()) {
+    return true
+  }
+
+  // if there is no match, we check the edge cases for the url sharing feature
  currentUrl.searchParams.delete('token');
-  currentUrl.searchParams.delete('n');
-  newUrl.searchParams.delete('token');
-  newUrl.searchParams.delete('n');
+  currentUrl.searchParams.delete('locked');

  return currentUrl.searchParams.toString() === newUrl.searchParams.toString();
 }
-
-/**
- * Generates a URL preset from a user given alias and URL.
- */
-export function generateUrlPresetOptions(alias: string, userUrl: string): URLPreset {
-  let sanitisedUrl = userUrl;
-  // we need to ensure the URL has a protocol, but it doesnt matter which
-  if (!checkRegex.startsWithHttp(userUrl.toLowerCase())) {
-    sanitisedUrl = `http://${sanitisedUrl}`;
-  }
-
-  const url = new URL(sanitisedUrl);
-  const path = getCurrentPath(url);
-
-  if (!isPresettableView(path)) {
-    throw new Error(`Invalid target view: ${path}`);
-  }
-
-  return {
-    alias,
-    target: path,
-    search: url.searchParams.toString(),
-    enabled: true,
-  };
-}
-
-function isPresettableView(view: string): view is OntimeViewPresettable {
-  return view !== OntimeView.Editor && Object.values(OntimeView).includes(view as OntimeView);
-}
-
-/**
- * Check if current location is a preset path
- */
-export function isPresetPath(location: Path): boolean {
-  const segments = location.pathname.split('/').filter(Boolean);
-  return segments[0] === 'preset';
-}
@@ -1,5 +1,3 @@
-import { AppMode } from '../ontimeConfig';
-
 declare module '*.scss' {
  const content: Record<string, string>;
  export default content;
@@ -23,17 +21,7 @@ declare global {
 }

 /**
- * Declare custom data we pass to the table
- * - `handleUpdate` callback to update the entry when the user edits a cell
- * - `handleUpdateTimer` callback to update the timer for a specific event
- * - `options-showDelayedTimes` whether to show or hide delayed times
- * - `options-hideTableSeconds` whether to hide seconds in the table
- * - `options-hideIndexColumn` whether to hide the index column
- * - `options-cuesheetMode` run or edit mode
- *
- * And metadata specific for each column
- * - `canWrite` whether the user can write to this column
- * - `colour` background colour associated with a custom field
+ * We pass a custom property to the table meta to allow field update
 */
 declare module '@tanstack/react-table' {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -43,16 +31,8 @@ declare module '@tanstack/react-table' {
    options: {
      showDelayedTimes: boolean;
      hideTableSeconds: boolean;
-      hideIndexColumn: boolean;
-      cuesheetMode: AppMode;
    };
  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  interface ColumnMeta<TData extends RowData, TValue> {
-    canWrite: boolean;
-    colour?: string;
-  }
 }

 /**
@@ -74,26 +74,3 @@ function resolveBaseURI(): string {

  return base;
 }
-
-/**
- * Resolves a session scope for the session
- */
-export const sessionScope = resolveSessionScope();
-export const getIsNavigationLocked = () => new URLSearchParams(window.location.search).get('n') === '1';
-
-/**
- * The session scope is read from the cookie and will only exist if the app is password protected
- */
-function resolveSessionScope() {
-  const tokenCookie = document.cookie.split('; ').find((cookie) => cookie.startsWith('token='));
-
-  if (tokenCookie) {
-    try {
-      const { scope } = JSON.parse(tokenCookie.split('=')[1]);
-      return scope;
-    } catch {
-      return 'rw';
-    }
-  }
-  return 'rw';
-}
@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import { ComponentType, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router';
+import { useLocation, useNavigate } from 'react-router-dom';

 import useUrlPresets from '../common/hooks-query/useUrlPresets';
 import { getRouteFromPreset } from '../common/utils/urlPresets';
@@ -12,12 +12,12 @@ interface PanelContentProps {
 export default function PanelContent({ onClose, children }: PropsWithChildren<PanelContentProps>) {
  return (
    <div className={style.contentWrapper}>
-      <div className={style.content}>{children}</div>
      <div className={style.corner}>
        <Button size='large' onClick={onClose}>
          Close settings <IoClose />
        </Button>
      </div>
+      <div className={style.content}>{children}</div>
    </div>
  );
 }
@@ -131,7 +131,6 @@ $inner-padding: 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
-  gap: 1rem;
  padding: 0.5rem 0;
 }

@@ -28,7 +28,7 @@ export default function AboutPanel() {
            <ExternalLink href={buyMeACoffeeUrl}>Buy Me a Coffee</ExternalLink>
          </Panel.Paragraph>
          <Panel.Paragraph>
-            If you are looking for an online version of Ontime, consider trying out our cloud service
+            And trying out our cloud service
            <ExternalLink href={websiteUrl}>www.getontime.no</ExternalLink>
          </Panel.Paragraph>
        </Panel.Card>
@@ -1,6 +1,6 @@
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
 import useAppVersion from '../../../../common/hooks-query/useAppVersion';
-import { appVersion, isOntimeCloud } from '../../../../externals';
+import { appVersion } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';

 export default function AppVersion() {
@@ -17,17 +17,13 @@ export default function AppVersion() {

  if (data.hasUpdates) {
    return (
-      <Panel.Paragraph>
-        {`You are currently using Ontime version ${appVersion}.`}
-        <br />
-        <br />
-        {`A new version ${data.version} is available.`} <br />
-        {isOntimeCloud ? (
-          'You can restart your stage to get the latest available version.'
-        ) : (
-          <ExternalLink href={data.url}>Please visit the release page to download</ExternalLink>
-        )}
-      </Panel.Paragraph>
+      <>
+        <Panel.Paragraph>{`You are currently using Ontime version ${appVersion}.`}</Panel.Paragraph>
+        <Panel.Paragraph>
+          {`A new version ${data.version} is available.`}
+          <ExternalLink href={data.url}> Please visit the release page to download</ExternalLink>
+        </Panel.Paragraph>
+      </>
    );
  }

@@ -42,6 +42,7 @@ interface AutomationFormProps {
 }

 export default function AutomationForm({ automation, onClose }: AutomationFormProps) {
+  'no memo'; // RHF and react-compiler dont seem to get along
  const isEdit = isAutomation(automation);
  const { data } = useCustomFields();
  const { refetch } = useAutomationSettings();
@@ -25,6 +25,8 @@ export default function AutomationSettingsForm({
  enabledOscIn,
  oscPortIn,
 }: AutomationSettingsProps) {
+  'no memo'; // RHF and react-compiler dont seem to get along
+
  const {
    handleSubmit,
    reset,
@@ -36,15 +38,15 @@ export default function AutomationSettingsForm({
  } = useForm<AutomationSettingsProps>({
    mode: 'onChange',
    defaultValues: { enabledAutomations, enabledOscIn, oscPortIn },
+    values: { enabledAutomations, enabledOscIn, oscPortIn },
    resetOptions: {
-      keepDirtyValues: false,
+      keepDirtyValues: true,
    },
  });

  const onSubmit = async (formData: AutomationSettingsProps) => {
    try {
      await editAutomationSettings(formData);
-      reset(formData);
    } catch (error) {
      const message = maybeAxiosError(error);
      setError('root', { message });
@@ -31,6 +31,7 @@ export default function TriggerForm({
  onCancel,
  postSubmit,
 }: TriggerFormProps) {
+  'use no memo'; // RHF and react-compiler don't seem to get along
  const {
    handleSubmit,
    register,
@@ -16,18 +16,18 @@ const staticAutocompleteOptions = [
  '{{timer.duration}}',
  '{{timer.elapsed}}',
  '{{timer.expectedFinish}}',
+  '{{timer.finishedAt}}',
  '{{timer.secondaryTimer}}',
  '{{timer.startedAt}}',
-  '{{rundown.selectedEventIndex}}',
-  '{{rundown.numEvents}}',
-  '{{rundown.plannedStart}}',
-  '{{rundown.plannedEnd}}',
-  '{{rundown.actualStart}}',
-  '{{offset.absolute}}',
-  '{{offset.relative}}',
-  '{{offset.expectedRundownEnd}}',
-  '{{offset.expectedGroupEnd}}',
-  '{{offset.expectedFlagStart}}',
+  '{{runtime.selectedEventIndex}}',
+  '{{runtime.numEvents}}',
+  '{{runtime.offset}}',
+  '{{runtime.plannedStart}}',
+  '{{runtime.plannedEnd}}',
+  '{{runtime.actualStart}}',
+  '{{runtime.expectedEnd}}',
+  '{{currentBlock.block}}',
+  '{{currentBlock.startedAt}}',
 ];

 const eventStaticPropertiesNow = [
@@ -1,12 +1,12 @@
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
 import { isOntimeCloud } from '../../../../externals';
-import GenerateLinkFormExport from '../../../sharing/GenerateLinkFormExport';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
 import InfoNif from '../network-panel/NetworkInterfaces';

+import GenerateLinkFormExport from './GenerateLinkFormExport';
 import ReportSettings from './ReportSettings';
-import URLPresets from './URLPresets';
+import UrlPresetsForm from './UrlPresetsForm';

 export default function FeaturePanel({ location }: PanelBaseProps) {
  const presetsRef = useScrollIntoView<HTMLDivElement>('presets', location);
@@ -17,7 +17,7 @@ export default function FeaturePanel({ location }: PanelBaseProps) {
    <>
      <Panel.Header>Sharing and reporting</Panel.Header>
      <div ref={presetsRef}>
-        <URLPresets />
+        <UrlPresetsForm />
      </div>
      <div ref={linkRef}>
        <Panel.Section>
@@ -16,16 +16,4 @@
 .copiableLink {
  user-select: text;
  color: $ui-white;
-  white-space: nowrap;
-  overflow-x: auto;
-}
-
-.shareInline {
-  display: grid;
-  grid-template-columns: 1fr 172px;
-  gap: 1rem;
-}
-
-.end {
-  padding-right: 2rem;
-}
+}
@@ -0,0 +1,144 @@
+'use no memo'; // RHF and react-compiler don't seem to get along
+
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import QRCode from 'react-qr-code';
+
+import { generateUrl } from '../../../../common/api/session';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Info from '../../../../common/components/info/Info';
+import Select from '../../../../common/components/select/Select';
+import Switch from '../../../../common/components/switch/Switch';
+import copyToClipboard from '../../../../common/utils/copyToClipboard';
+import { preventEscape } from '../../../../common/utils/keyEvent';
+import { linkToOtherHost } from '../../../../common/utils/linkUtils';
+import { currentHostName, isOntimeCloud, serverURL } from '../../../../externals';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+import style from './GenerateLinkForm.module.scss';
+
+interface GenerateLinkFormProps {
+  hostOptions: { value: string; label: string }[];
+  pathOptions: { value: string; label: string }[];
+  isLockedToView?: boolean;
+}
+
+interface GenerateLinkFormOptions {
+  baseUrl: string;
+  path: string;
+  lock: boolean;
+  authenticate: boolean;
+}
+
+type GenerateLinkState = 'pending' | 'loading' | 'success' | 'error';
+
+export default function GenerateLinkForm({ hostOptions, pathOptions, isLockedToView }: GenerateLinkFormProps) {
+  'use no memo'; // RHF and react-compiler don't seem to get along
+  const [formState, setFormState] = useState<GenerateLinkState>('pending');
+  const [url, setUrl] = useState(serverURL);
+
+  const {
+    handleSubmit,
+    setError,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<GenerateLinkFormOptions>({
+    mode: 'onChange',
+    defaultValues: {
+      baseUrl: currentHostName,
+      path: isLockedToView ? pathOptions[0].value : 'timer',
+      lock: false,
+      authenticate: false,
+    },
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  const onSubmit = async (options: GenerateLinkFormOptions) => {
+    try {
+      setFormState('loading');
+      const baseUrl = linkToOtherHost(options.baseUrl);
+      const url = await generateUrl(baseUrl, options.path, options.lock, options.authenticate);
+      await copyToClipboard(url);
+      setUrl(url);
+      setFormState('success');
+      setTimeout(() => {
+        setFormState('pending');
+      }, 4000);
+    } catch (error) {
+      const message = maybeAxiosError(error);
+      setError('root', { message });
+      setFormState('error');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} onKeyDown={(event) => preventEscape(event)}>
+      {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+      {!isLockedToView ? (
+        <Info>You can generate a link to share with your team or to use in automation (such as companion).</Info>
+      ) : (
+        <Info>You can generate a link to share with your team</Info>
+      )}
+      <Panel.ListGroup>
+        <Panel.ListItem>
+          <Panel.Field
+            title='Host IP'
+            description={`Which IP address will be used${isOntimeCloud ? ' (not applicable in Ontime Cloud)' : ''}`}
+          />
+          <Select
+            disabled={isOntimeCloud}
+            options={hostOptions}
+            value={watch('baseUrl')}
+            onValueChange={(value) => setValue('baseUrl', value)}
+          />
+        </Panel.ListItem>
+        {isLockedToView ? (
+          <input type='hidden' value={watch('path')} />
+        ) : (
+          <Panel.ListItem>
+            <Panel.Field title='Ontime view' description='Which view or preset will the link point to' />
+            <Select options={pathOptions} value={watch('path')} onValueChange={(value) => setValue('path', value)} />
+          </Panel.ListItem>
+        )}
+
+        <Panel.ListItem>
+          <Panel.Field
+            title='Lock navigation'
+            description='Prevent showing navigation (will only work for non production URLs)'
+          />
+          <Switch
+            size='large'
+            name='lock'
+            checked={watch('lock')}
+            onCheckedChange={(checked) => setValue('lock', checked)}
+          />
+        </Panel.ListItem>
+        <Panel.ListItem>
+          <Panel.Field title='Authenticate' description='Whether the URL should be pre-authenticated' />
+          <Switch
+            size='large'
+            name='authenticate'
+            checked={watch('authenticate')}
+            onCheckedChange={(checked) => setValue('authenticate', checked)}
+          />
+        </Panel.ListItem>
+      </Panel.ListGroup>
+      <Panel.ListGroup>
+        <Panel.ListItem>
+          <Panel.Field title='Generate link' description='Fill form and generate link and QR code' />
+          <Button variant='primary' loading={formState === 'loading'} type='submit' style={{ alignSelf: 'end' }}>
+            {formState === 'success' ? 'Link copied to clipboard!' : 'Update share link'}
+          </Button>
+          <div className={style.column}>
+            <QRCode size={172} value={url} className={style.qrCode} />
+            <div className={style.copiableLink}>{url}</div>
+          </div>
+        </Panel.ListItem>
+      </Panel.ListGroup>
+    </form>
+  );
+}
@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+
+import useInfo from '../../../../common/hooks-query/useInfo';
+import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
+
+import GenerateLinkForm from './GenerateLinkForm';
+
+interface GenerateLinkFormExportProps {
+  lockedPath?: { value: string; label: string };
+}
+
+export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormExportProps) {
+  const { data: infoData } = useInfo();
+  const { data: urlPresetData } = useUrlPresets({ skip: lockedPath === undefined });
+
+  const hostOptions = useMemo(
+    () =>
+      infoData.networkInterfaces.map((nif) => ({
+        value: nif.address,
+        label: `${nif.name} - ${nif.address}`,
+      })),
+    [infoData.networkInterfaces],
+  );
+
+  const pathOptions = useMemo(() => {
+    if (lockedPath) {
+      return [{ value: lockedPath.value, label: lockedPath.label }];
+    }
+    return [
+      { value: 'timer', label: 'Timer' },
+      { value: 'cuesheet', label: 'Cuesheet' },
+      { value: 'op', label: 'Operator' },
+      { value: '', label: 'Companion' },
+      ...urlPresetData.map((preset) => ({
+        value: preset.alias,
+        label: `Preset: ${preset.alias}`,
+      })),
+    ];
+  }, [lockedPath, urlPresetData]);
+
+  return <GenerateLinkForm hostOptions={hostOptions} pathOptions={pathOptions} isLockedToView={Boolean(lockedPath)} />;
+}
@@ -1,114 +0,0 @@
-import { useState } from 'react';
-import { IoAdd, IoOpenOutline, IoPencil, IoTrash } from 'react-icons/io5';
-import { URLPreset } from 'ontime-types';
-
-import Button from '../../../../common/components/buttons/Button';
-import IconButton from '../../../../common/components/buttons/IconButton';
-import Info from '../../../../common/components/info/Info';
-import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
-import Switch from '../../../../common/components/switch/Switch';
-import Tag from '../../../../common/components/tag/Tag';
-import useUrlPresets, { useUpdateUrlPreset } from '../../../../common/hooks-query/useUrlPresets';
-import { handleLinks } from '../../../../common/utils/linkUtils';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-import URLPresetForm from './composite/URLPresetForm';
-
-type FormState = {
-  isOpen: boolean;
-  preset?: URLPreset;
-};
-
-const urlPresetsDocs = 'https://docs.getontime.no/features/url-presets/';
-
-export default function URLPresets() {
-  const [formState, setFormState] = useState<FormState>({ isOpen: false, preset: undefined });
-  const { data, status } = useUrlPresets();
-  const { deletePreset, isMutating } = useUpdateUrlPreset();
-
-  const openNewForm = () => setFormState({ isOpen: true });
-  const openEditForm = (preset: URLPreset) => setFormState({ isOpen: true, preset });
-  const closeForm = () => setFormState({ isOpen: false, preset: undefined });
-
-  return (
-    <Panel.Section>
-      <Panel.Card>
-        <Panel.SubHeader>
-          URL presets
-          <Button onClick={openNewForm}>
-            New <IoAdd />
-          </Button>
-        </Panel.SubHeader>
-        <Panel.Divider />
-        <Panel.Section>
-          <Info>
-            URL presets are user pre-defined aliases to Ontime URLs.
-            <br />
-            This URL can contain full configuration including parameters, or simply route to a specific view.
-            <br />
-            <br />
-            The easiest way to get started is to copy an URL from your browser and paste it into the form.
-            <ExternalLink href={urlPresetsDocs}>See the docs</ExternalLink>
-          </Info>
-        </Panel.Section>
-        <Panel.Section>
-          <Panel.Loader isLoading={status === 'pending'} />
-          {formState.isOpen && <URLPresetForm urlPreset={formState.preset} onClose={closeForm} />}
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th>Enabled</th>
-                <th>Target view</th>
-                <th>Alias</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {data.length === 0 && <Panel.TableEmpty handleClick={openNewForm} />}
-              {data.map((preset, index) => {
-                return (
-                  <tr key={preset.alias}>
-                    <td>
-                      <Switch defaultChecked={preset.enabled} onCheckedChange={() => {}} />
-                    </td>
-                    <td>
-                      <Tag>{preset.target}</Tag>
-                    </td>
-                    <td style={{ width: '100%' }}>{preset.alias}</td>
-                    <Panel.InlineElements relation='inner' as='td'>
-                      <IconButton
-                        variant='ghosted-white'
-                        onClick={(event) => handleLinks(preset.alias, event)}
-                        disabled={isMutating}
-                      >
-                        <IoOpenOutline />
-                      </IconButton>
-                      <IconButton
-                        onClick={() => openEditForm(preset)}
-                        variant='ghosted-white'
-                        aria-label='Edit entry'
-                        data-testid={`field__edit_${index}`}
-                        disabled={isMutating}
-                      >
-                        <IoPencil />
-                      </IconButton>
-                      <IconButton
-                        onClick={() => deletePreset(preset.alias)}
-                        variant='ghosted-destructive'
-                        aria-label='Delete entry'
-                        data-testid={`field__delete_${index}`}
-                        disabled={isMutating}
-                      >
-                        <IoTrash />
-                      </IconButton>
-                    </Panel.InlineElements>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </Panel.Table>
-        </Panel.Section>
-      </Panel.Card>
-    </Panel.Section>
-  );
-}
@@ -0,0 +1,230 @@
+import { useEffect } from 'react';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { IoAdd, IoOpenOutline, IoTrash } from 'react-icons/io5';
+import { URLPreset } from 'ontime-types';
+
+import { postUrlPresets } from '../../../../common/api/urlPresets';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import IconButton from '../../../../common/components/buttons/IconButton';
+import Info from '../../../../common/components/info/Info';
+import Input from '../../../../common/components/input/input/Input';
+import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
+import Switch from '../../../../common/components/switch/Switch';
+import Tooltip from '../../../../common/components/tooltip/Tooltip';
+import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
+import { preventEscape } from '../../../../common/utils/keyEvent';
+import { handleLinks } from '../../../../common/utils/linkUtils';
+import { validateUrlPresetPath } from '../../../../common/utils/urlPresets';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+import style from './FeaturePanel.module.scss';
+
+const urlPresetsDocs = 'https://docs.getontime.no/features/url-presets/';
+
+type FormData = {
+  data: URLPreset[];
+};
+
+export default function UrlPresetsForm() {
+  'use no memo'; // RHF and react-compiler don't seem to get along
+  const { data, status, refetch } = useUrlPresets();
+  const {
+    control,
+    handleSubmit,
+    register,
+    reset,
+    setError,
+    watch,
+    setValue,
+    formState: { isSubmitting, isDirty, isValid, errors },
+  } = useForm<FormData>({
+    mode: 'onChange',
+    defaultValues: { data },
+    values: { data },
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+  const { fields, prepend, remove } = useFieldArray({
+    name: 'data',
+    control,
+  });
+
+  // reset form if we get new data from backend
+  useEffect(() => {
+    if (data) {
+      reset({ data });
+    }
+  }, [data, reset]);
+
+  const onSubmit = async (formData: FormData) => {
+    for (let i = 0; i < formData.data.length; i++) {
+      const preset = formData.data[i];
+      const { isValid, message } = validateUrlPresetPath(preset.pathAndParams);
+      if (!isValid) {
+        setError(`data.${i}.pathAndParams`, { message });
+        return;
+      }
+    }
+
+    try {
+      await postUrlPresets(formData.data);
+    } catch (error) {
+      const message = maybeAxiosError(error);
+      setError('root', { message });
+    } finally {
+      await refetch();
+    }
+  };
+
+  const onReset = () => {
+    reset({ data });
+  };
+
+  const addNew = () => {
+    prepend({
+      enabled: true,
+      alias: '',
+      pathAndParams: '',
+    });
+  };
+
+  const isLoading = status === 'pending';
+  const canSubmit = !isSubmitting && isDirty && isValid;
+
+  return (
+    <Panel.Section
+      as='form'
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(event) => preventEscape(event, onReset)}
+      data-testid='url-preset-form'
+    >
+      <Panel.Card>
+        <Panel.SubHeader>
+          URL presets
+          <Panel.InlineElements>
+            <Button variant='ghosted' onClick={onReset} disabled={!canSubmit}>
+              Revert to saved
+            </Button>
+            <Button variant='primary' type='submit' disabled={!canSubmit} loading={isSubmitting}>
+              Save
+            </Button>
+          </Panel.InlineElements>
+        </Panel.SubHeader>
+        <Panel.Divider />
+        <Info>
+          URL presets are user defined aliases to Ontime URLs
+          <br />
+          <br />
+          <b>Preset Name</b> <br />
+          The alias for the URL. This will be the URL you will be calling. eg: <br />
+          <Panel.BlockQuote>
+            Preset name <Panel.Highlight>cam3</Panel.Highlight> called as{' '}
+            <Panel.Highlight>http://localhost:4001/cam3</Panel.Highlight>
+          </Panel.BlockQuote>
+          <br />
+          <b>URL Segment</b> <br />
+          The corresponding alias path and configuration parameters. eg: <br />
+          <Panel.BlockQuote>
+            URL segment <Panel.Highlight>backstage?hidePast=true&stopCycle=true</Panel.Highlight> corresponds to
+            complete URL
+            <Panel.Highlight>http://localhost:4001/backstage?hidePast=true&stopCycle=true</Panel.Highlight>
+          </Panel.BlockQuote>
+          <br />
+          You will need to save the changes before the presets are functional.
+          <br />
+          <ExternalLink href={urlPresetsDocs}>See the docs</ExternalLink>
+        </Info>
+        <Panel.Section>
+          <Panel.Loader isLoading={isLoading} />
+          <Panel.Title>
+            Manage presets
+            <Button onClick={addNew}>
+              New <IoAdd />
+            </Button>
+          </Panel.Title>
+          {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+          {errors?.data && <Panel.Error>{errors.data.message}</Panel.Error>}
+
+          <Panel.Table>
+            <thead>
+              <tr>
+                <th className={style.fit}>Active</th>
+                <th className={style.aliasConstrain}>Preset name</th>
+                <th className={style.fullWidth}>URL segment</th>
+                <th />
+              </tr>
+            </thead>
+            <tbody>
+              {fields.length === 0 && <Panel.TableEmpty handleClick={addNew} />}
+              {fields.map((preset, index) => {
+                const maybeAliasError = errors.data?.[index]?.alias?.message;
+                const maybeUrlError = errors.data?.[index]?.pathAndParams?.message;
+                // only saved and enabled URLs can be tested
+                const canTest =
+                  preset.alias && preset.enabled && preset.pathAndParams && !maybeAliasError && !maybeUrlError;
+
+                return (
+                  <tr key={preset.id}>
+                    <td className={style.fit}>
+                      <Switch
+                        size='large'
+                        checked={watch(`data.${index}.enabled`)}
+                        onCheckedChange={(value: boolean) =>
+                          setValue(`data.${index}.enabled`, value, { shouldDirty: true })
+                        }
+                        data-testid={`field__enable_${index}`}
+                      />
+                    </td>
+                    <td className={style.aliasConstrain}>
+                      <Input
+                        {...register(`data.${index}.alias`, {
+                          required: { value: true, message: 'Required field' },
+                        })}
+                        fluid
+                        placeholder='URL Preset'
+                        data-testid={`field__alias_${index}`}
+                      />
+                      <Panel.Error>{maybeAliasError}</Panel.Error>
+                    </td>
+                    <td className={style.fullWidth}>
+                      <Input
+                        {...register(`data.${index}.pathAndParams`, {
+                          required: { value: true, message: 'Required field' },
+                        })}
+                        fluid
+                        placeholder='URL (portion after ontime Port)'
+                        data-testid={`field__url_${index}`}
+                      />
+                      <Panel.Error>{maybeUrlError}</Panel.Error>
+                    </td>
+                    <Panel.InlineElements relation='inner' as='td'>
+                      <Tooltip
+                        text='Test preset'
+                        render={<IconButton variant='ghosted-white' />}
+                        data-testid={`field__test_${index}`}
+                        onClick={(event) => handleLinks(preset.alias, event)}
+                        disabled={!canTest}
+                      >
+                        <IoOpenOutline />
+                      </Tooltip>
+                      <IconButton
+                        onClick={() => remove(index)}
+                        variant='ghosted-destructive'
+                        aria-label='Delete entry'
+                        data-testid={`field__delete_${index}`}
+                      >
+                        <IoTrash />
+                      </IconButton>
+                    </Panel.InlineElements>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </Panel.Table>
+        </Panel.Section>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
google-labs-jules[bot]	137db18897	feat: dynamically set PWA start_url This commit fixes an issue where the PWA would always start at the root of the application, regardless of the page you were on when you installed it. This is fixed by: - Consolidating the two manifest files into a single file. - Adding a new route to the server that dynamically generates the `start_url` in the manifest based on the current route. - Adding an e2e test to verify the changes.	2025-07-26 14:23:17 +00:00
google-labs-jules[bot]	65e8894cf5	feat: dynamically set PWA start_url This commit fixes an issue where the PWA would always start at the root of the application, regardless of the page you were on when you installed it. This is fixed by: - Consolidating the two manifest files into a single file. - Adding a new route to the server that dynamically generates the `start_url` in the manifest based on the current route. - Adding an e2e test to verify the changes.	2025-07-26 14:22:49 +00:00
google-labs-jules[bot]	2683f1a1e0	feat: dynamically set PWA start_url This commit fixes an issue where the PWA would always start at the root of the application, regardless of the page you were on when you installed it. This is fixed by: - Consolidating the two manifest files into a single file. - Adding a new route to the server that dynamically generates the `start_url` in the manifest based on the current route. - Adding an e2e test to verify the changes.	2025-07-26 14:22:21 +00:00
google-labs-jules[bot]	84459b06e2	feat: dynamically set PWA start_url This commit fixes an issue where the PWA would always start at the root of the application, regardless of the page you were on when you installed it. This is fixed by: - Consolidating the two manifest files into a single file. - Adding a new route to the server that dynamically generates the `start_url` in the manifest based on the current route. - Adding an e2e test to verify the changes.	2025-07-24 17:27:02 +00:00