refactor: create fast tracks for cookie parsing

The IntersectionObserver callback in rowObserver.ts was capturing the `addVisibleRow` and `removeVisibleRow` actions from the Zustand store only once, at the time of the observer's creation.

This created a potential for a stale closure bug, where the observer would call outdated action functions if the store's state or actions were ever re-initialized. This would lead to the application's state not being updated correctly, causing the bug where visible rows would not render their content.

This commit fixes the issue by calling `useVisibleRowsStore.getState()` inside the observer callback. This ensures that the latest, freshest versions of the action functions are always used, preventing the stale state bug.

DEVELOPMENT.md

@@ -20,19 +20,20 @@ development.
 Locally, we would need to run both the React client and the node.js server in development mode
 
 From the project root, run the following commands
-
 - __Install the project dependencies__ by running `pnpm i`
-- __Run dev mode__ by running `turbo dev`
+- __Run dev mode__ by running `pnpm turbo dev`
+
 
 ### Debugging backend
 
-To debug backend code in Node.js:
+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.
 
-- 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`.
+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`.
 
 ## TESTING
 
@@ -45,7 +46,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 `turbo run test:pipeline` from the project root.
+You can run unit tests by running `pnpm turbo test:pipeline` from the project root.
 This will run all tests and close test runner.
 
 Alternatively you can navigate to an app or project and run `pnpm test` to run those tests in watch mode
@@ -76,13 +77,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 `turbo run build:electron`
-- __Create the package__ by running `turbo run dist-win`, `turbo run dist-mac` or `turbo run dist-linux`
+- __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`
 
 The build distribution assets will be at `.apps/electron/dist`
 
 Note: The MacOS build will only work in CI, locally it will fail due to notarisation issues.
-Use the `turbo run dist-mac:local` command to build a MacOS distribution locally.
+Use the `pnpm turbo run dist-mac:local` command to build a MacOS distribution locally and skip the notary process.
 
 ## DOCKER
 
@@ -98,10 +99,3 @@ 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.

apps/cli/package.json

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

apps/client/package.json

@@ -1,37 +1,36 @@
 {
   "name": "ontime-ui",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.4",
   "private": true,
   "type": "module",
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.1",
+    "@base-ui-components/react": "1.0.0-beta.2",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/is-prop-valid": "^1.3.1",
     "@fontsource/open-sans": "^5.0.28",
-    "@mantine/hooks": "^8.1.2",
-    "@sentry/react": "^8.43.0",
+    "@mantine/hooks": "^8.2.4",
+    "@sentry/react": "^10.2.0",
     "@table-nav/react": "^0.0.7",
-    "@tanstack/react-query": "^5.62.7",
-    "@tanstack/react-query-devtools": "^5.62.7",
+    "@tanstack/react-query": "^5.84.1",
+    "@tanstack/react-query-devtools": "^5.84.1",
     "@tanstack/react-table": "^8.21.3",
     "autosize": "^6.0.1",
-    "axios": "^1.9.0",
+    "axios": "^1.11.0",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
-    "csv-stringify": "^6.4.5",
-    "prismjs": "^1.29.0",
-    "react": "^19.1.0",
+    "csv-stringify": "^6.6.0",
+    "prismjs": "^1.30.0",
+    "react": "^19.1.1",
     "react-colorful": "^5.6.1",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.1",
     "react-fast-compare": "^3.2.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-hook-form": "^7.62.0",
+    "react-icons": "5.5.0",
+    "react-qr-code": "^2.0.18",
+    "react-router": "^7.8.0",
     "react-simple-code-editor": "^0.14.1",
-    "web-vitals": "^3.1.1",
-    "zustand": "^5.0.3"
+    "web-vitals": "^5.1.0",
+    "zustand": "^5.0.7"
   },
   "scripts": {
     "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",

apps/client/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { Tooltip } from '@base-ui-components/react/tooltip';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

apps/client/src/AppRouter.tsx

@@ -1,38 +1,34 @@
-import React from 'react';
-import { Navigate, Route } from 'react-router-dom';
+import { ComponentType, lazy, Suspense, useEffect, useMemo } from 'react';
+import { Navigate, Route, useLocation, useNavigate, useParams } from 'react-router';
+import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
 
+import ViewNavigationMenu from './common/components/navigation-menu/ViewNavigationMenu';
+import { PresetContext } from './common/context/PresetContext';
 import { useClientPath } from './common/hooks/useClientPath';
+import useUrlPresets from './common/hooks-query/useUrlPresets';
+import { getRouteFromPreset } from './common/utils/urlPresets';
 import Log from './features/log/Log';
-import withPreset from './features/PresetWrapper';
-import withData from './features/viewers/ViewWrapper';
+import Loader from './views/common/loader/Loader';
+import NotFound from './views/common/not-found/NotFound';
 import ViewLoader from './views/ViewLoader';
+import { getIsNavigationLocked, sessionScope } from './externals';
 import { initializeSentry } from './sentry.config';
 
-const Editor = React.lazy(() => import('./views/editor/ProtectedEditor'));
-const Cuesheet = React.lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
-const Operator = React.lazy(() => import('./features/operator/OperatorExport'));
+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 TimerView = React.lazy(() => import('./views/timer/Timer'));
-const Countdown = React.lazy(() => import('./views/countdown/Countdown'));
+const Editor = lazy(() => import('./views/editor/ProtectedEditor'));
+const Cuesheet = lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
+const Operator = lazy(() => import('./features/operator/OperatorExport'));
 
-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'));
+const EditorFeatureWrapper = lazy(() => import('./features/EditorFeatureWrapper'));
+const RundownPanel = lazy(() => import('./features/rundown/RundownExport'));
+const TimerControl = lazy(() => import('./features/control/playback/TimerControlExport'));
+const MessageControl = lazy(() => import('./features/control/message/MessageControlExport'));
 
 // Initialize Sentry with our configuration
 const SentryRouter = initializeSentry();
@@ -42,73 +38,77 @@ export default function AppRouter() {
   useClientPath();
 
   return (
-    <React.Suspense fallback={null}>
+    <Suspense fallback={<Loader />}>
       <SentryRouter>
         <Route path='/' element={<Navigate to='/timer' />} />
         <Route
-          path='/timer'
+          path='timer'
           element={
             <ViewLoader>
-              <STimer />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <Timer />
             </ViewLoader>
           }
         />
         <Route
-          path='/countdown'
+          path='countdown'
           element={
             <ViewLoader>
-              <SCountdown />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <Countdown />
             </ViewLoader>
           }
         />
         <Route
-          path='/backstage'
+          path='backstage'
           element={
             <ViewLoader>
-              <SBackstage />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <Backstage />
             </ViewLoader>
           }
         />
         <Route
-          path='/studio'
+          path='studio'
           element={
             <ViewLoader>
-              <SStudio />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <StudioClock />
             </ViewLoader>
           }
         />
         <Route
-          path='/timeline'
+          path='timeline'
           element={
             <ViewLoader>
-              <STimeline />
+              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
+              <Timeline />
             </ViewLoader>
           }
         />
         <Route
-          path='/info'
+          path='info'
           element={
             <ViewLoader>
-              <SProjectInfo />
+              <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />
+              <ProjectInfo />
             </ViewLoader>
           }
         />
-
         {/*/!* Protected Routes *!/*/}
-        <Route path='/editor' element={<Editor />} />
-        <Route path='/cuesheet' element={<PCuesheet />} />
+        <Route path='editor' element={<Editor />} />
+        <Route path='cuesheet' element={<Cuesheet />} />
         <Route
-          path='/op'
+          path='op'
           element={
             <ViewLoader>
-              <POperator />
+              <Operator />
             </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,16 +132,119 @@ export default function AppRouter() {
           }
         />
         <Route
-          path='/log'
+          path='log'
           element={
             <EditorFeatureWrapper>
               <Log />
             </EditorFeatureWrapper>
           }
         />
-        {/*/!* Send to default if nothing found *!/*/}
-        <Route path='*' element={<STimer />} />
+        {/**
+         * If the views are prefixed with the "preset" path, we are in a locked preset
+         * Locked presets do not expose their parameters
+         */}
+        <Route path='preset/:alias' element={<PresetView />} />
+
+        {/**
+         * If we havent matched any views or presets, we may be in an unlocked preset
+         * Unlocked presets are unwrapped to expose their target and parameters
+         */}
+        <Route path='*' element={<RedirectPreset />} />
       </SentryRouter>
-    </React.Suspense>
+    </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 />
+    </>
   );
 }

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useRef, useState } from 'react';
 import { IoCheckmark } from 'react-icons/io5';
 import { IoCopy } from 'react-icons/io5';
 
@@ -24,32 +24,29 @@ 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
-    setTimeout(() => setCopied(false), 1000);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => setCopied(false), 2000);
   };
 
   return (
     <div className={style.copytag}>
       {onClick !== undefined ? (
-        <Button className={style.action} size={size} tabIndex={-1} onClick={onClick} disabled={disabled}>
+        <Button className={style.action} size={size} onClick={onClick} disabled={disabled}>
           {children}
         </Button>
       ) : (
         <div className={cx([style.label, style[size]])}>{children}</div>
       )}
-      <IconButton
-        className={style.copy}
-        variant='primary'
-        size={size}
-        tabIndex={-1}
-        onClick={handleClick}
-        disabled={disabled}
-      >
+      <IconButton className={style.copy} variant='primary' size={size} onClick={handleClick} disabled={disabled}>
         {copied ? <IoCheckmark /> : <IoCopy />}
       </IconButton>
     </div>

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

@@ -13,6 +13,7 @@
   border-radius: 3px;
   box-shadow: $box-shadow-l1;
   border: 1px solid $gray-1100;
+  outline: none;
 }
 
 .backdrop {

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

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

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

@@ -31,11 +31,7 @@
   }
 
   &[data-checked] {
-    background-color: $gray-1200;
-
-    &:hover {
-      border-color: $gray-1000;
-    }
+    background-color: $gray-700;
   }
 
   &:focus-visible {
@@ -57,6 +53,6 @@
     border-radius: 100%;
     width: 0.5em;
     height: 0.5em;
-    background-color: $blue-500;
+    background-color: $ui-white;
   }
 }

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

@@ -10,7 +10,12 @@
   padding-inline: 0.5em;
   outline: none;
 
-  &:hover:not(:disabled) {
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
+  }
+
+  &:hover:not(:disabled):not(:read-only) {
     background-color: $gray-1100;
   }
 
@@ -25,9 +30,8 @@
     cursor: not-allowed;
   }
 
-  &::placeholder {
-    color: $gray-500;
-    letter-spacing: 0;
+  &:read-only::placeholder {
+    opacity: 0;
   }
 }
 

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

@@ -9,9 +9,13 @@
   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;
   }
@@ -26,21 +30,21 @@
     cursor: not-allowed;
   }
 
-  &::placeholder {
-    color: $gray-500;
-    letter-spacing: 0;
+  &:read-only::placeholder {
+    opacity: 0;
   }
 }
 
 .subtle {
   background-color: $gray-1200;
-  padding-top: 0.5em;
+  padding-inline: 0.5em;
+  padding-top: 0.25em;
 }
 
 .ghosted {
   background-color: transparent;
   padding: 0;
-  padding-top: 0.5em;
+  padding-top: 0.25em;
 }
 
 .fluid {

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

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

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

@@ -1,5 +1,5 @@
 import { type PropsWithChildren } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import style from './AppLink.module.scss';
 

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

@@ -7,7 +7,7 @@
   padding-inline: 1rem;
   min-width: min(680px, 90vw);
   min-height: min(200px, 10vh);
-  max-width: min(800px, 90vw);
+  max-width: min(900px, 90vw);
 
   background-color: $gray-1250;
   color: $ui-white;

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

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { Dialog } from '@base-ui-components/react/dialog';
 import { useDisclosure, useFullscreen } from '@mantine/hooks';
 

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

@@ -1,26 +1,29 @@
 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 {
-  isLockable?: boolean;
+  /** prevent navigation */
+  isNavigationLocked?: boolean;
+  /** prevent showing settings */
   suppressSettings?: boolean;
 }
 
 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isLockable, suppressSettings }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
   const [isMenuOpen, menuHandler] = useDisclosure();
-  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
+  const { open: showEditFormDrawer } = useViewParamsEditorStore();
 
   useHotkeys([
     [
       'Space',
       () => {
-        if (isViewLocked) return;
+        if (isNavigationLocked) return;
         menuHandler.toggle();
       },
       { preventDefault: true },
@@ -28,24 +31,24 @@ function ViewNavigationMenu({ isLockable, suppressSettings }: ViewNavigationMenu
     [
       'mod + ,',
       () => {
-        if (isViewLocked || suppressSettings) return;
+        if (suppressSettings) return;
         showEditFormDrawer();
       },
       { preventDefault: true },
     ],
   ]);
 
-  if (isViewLocked) {
+  if (isNavigationLocked && suppressSettings) {
     return <ViewLockedIcon />;
   }
 
   return (
     <>
       <FloatingNavigation
-        toggleMenu={menuHandler.toggle}
-        toggleSettings={suppressSettings ? undefined : () => showEditFormDrawer()}
+        toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
+        toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
       />
-      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
+      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
     </>
   );
 }

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

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

apps/client/src/common/components/navigation-menu/editor-navigation/EditorNavigation.tsx

@@ -1,5 +1,5 @@
 import { IoLockClosedOutline } from 'react-icons/io5';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { useIsSmallDevice } from '../../../hooks/useIsSmallDevice';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';

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

@@ -14,7 +14,8 @@
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
-  padding: 0.5em;
+  padding-top: 0.75rem;
+  padding-left: 0.5em;
 
   position: fixed;
   left: 0;

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

@@ -8,7 +8,7 @@ import IconButton from '../../buttons/IconButton';
 import style from './FloatingNavigation.module.scss';
 
 interface FloatingNavigationProps {
-  toggleMenu: () => void;
+  toggleMenu?: () => void;
   toggleSettings?: () => void;
 }
 
@@ -20,15 +20,17 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings }: Float
       id='fadeable-navigation'
       className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
     >
-      <IconButton
-        variant='subtle-white'
-        size='xlarge'
-        onClick={toggleMenu}
-        aria-label='toggle menu'
-        data-testid='navigation__toggle-menu'
-      >
-        <IoApps />
-      </IconButton>
+      {toggleMenu && (
+        <IconButton
+          variant='subtle-white'
+          size='xlarge'
+          onClick={toggleMenu}
+          aria-label='toggle menu'
+          data-testid='navigation__toggle-menu'
+        >
+          <IoApps />
+        </IconButton>
+      )}
       {toggleSettings && (
         <IconButton
           variant='subtle-white'

apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.module.scss

@@ -5,12 +5,17 @@
 }
 
 .interfaces {
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 0.5rem;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }
 
+.interfaceCopy {
+  display: flex;
+  align-items: center;
+}
+
 .goIcon {
   @include rotate-fourty-five;
   margin-left: 0.25rem;

apps/client/src/common/components/navigation-menu/other-addresses/OtherAddresses.tsx

@@ -30,8 +30,10 @@ export default function OtherAddresses({ currentLocation }: OtherAddressesProps)
           const address = linkToOtherHost(nif.address, currentLocation);
 
           return (
-            <CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)}>
-              {nif.address} <IoArrowUp className={style.goIcon} />
+            <CopyTag key={nif.name} copyValue={address} onClick={() => openLink(address)} size='small'>
+              <span className={style.interfaceCopy}>
+                {nif.address} <IoArrowUp className={style.goIcon} />
+              </span>
             </CopyTag>
           );
         })}

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

@@ -1,23 +0,0 @@
-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 };
-}

apps/client/src/common/components/radio-group/RadioGroup.module.scss

@@ -1,9 +1,15 @@
 .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 {
@@ -32,8 +38,8 @@
 .radio {
   box-sizing: border-box;
   display: flex;
-  width: 1rem;
-  height: 1rem;
+  width: 16px; // use absolute units to avoid subpixel rendering issues
+  height: 16px;
   align-items: center;
   justify-content: center;
   border-radius: 100%;
@@ -46,10 +52,7 @@
   }
 
   &[data-checked] {
-    background-color: $ui-white;
-    &:hover {
-      border-color: $gray-1000;
-    }
+    background-color: $blue-700;
   }
 
   &:focus-visible {
@@ -69,8 +72,9 @@
   &::before {
     content: '';
     border-radius: 100%;
-    width: 0.5rem;
-    height: 0.5rem;
-    background-color: $gray-1200;
+    width: 6px; // half of the radio size
+    height: 6px;
+    aspect-ratio: 1;
+    background-color: $ui-white;
   }
 }

apps/client/src/common/components/select/Select.module.scss

@@ -14,7 +14,6 @@
   border: 1px solid transparent;
 
   padding-inline: 0.5rem;
-  font-size: calc(1rem - 2px);
   white-space: nowrap;
 
   &:hover:not([data-disabled]) {
@@ -57,7 +56,7 @@
 }
 
 .popup {
-  font-size: calc(1rem - 2px);
+  font-size: 1rem;
   background-color: $gray-1200;
   box-sizing: border-box;
   padding: 2px;

apps/client/src/common/components/state/Empty.module.scss

@@ -9,7 +9,10 @@
   }
 
   .text {
+    display: block;
+    margin-inline: auto;;
     font-weight: 600;
     font-size: 2em;
+    max-width: 600px;
   }
 }

apps/client/src/common/components/state/Empty.tsx

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

apps/client/src/common/components/state/EmptyPage.tsx

@@ -6,15 +6,13 @@ import style from './EmptyPage.module.scss';
 
 interface EmptyPageProps {
   text?: string;
-  style?: CSSProperties;
+  injectedStyles?: CSSProperties;
 }
 
-export default function EmptyPage(props: EmptyPageProps) {
-  const { text, ...rest } = props;
-
+export default function EmptyPage({ text, injectedStyles }: EmptyPageProps) {
   return (
     <div className={style.page}>
-      <Empty text={text} {...rest} />
+      <Empty text={text} injectedStyles={injectedStyles} />
     </div>
   );
 }

apps/client/src/common/components/state/EmptyTableBody.module.scss

@@ -5,6 +5,7 @@
   .emptyCell {
     margin-inline: auto;
     text-align: center;
+    padding-top: 10vh;
   }
 
   .empty {

apps/client/src/common/components/switch/Switch.module.scss

@@ -22,6 +22,11 @@
     outline: 2px solid $blue-500;
     outline-offset: 2px;
   }
+
+  &[data-disabled] {
+    opacity: $opacity-disabled;
+    cursor: not-allowed;
+  }
 }
 
 .medium {
@@ -41,7 +46,7 @@
 }
 
 .thumb {
-  aspect-ratio: 1 / 1;
+  aspect-ratio: 1;
   height: 100%;
   border-radius: 99px;
   background-color: $ui-white;

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
 import Checkbox from '../checkbox/Checkbox';

apps/client/src/common/components/view-params-editor/ViewParamShare.tsx

@@ -0,0 +1,45 @@
+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 './ViewParamsShare.module.scss';
+
+/**
+ * Shows a list of presets for the current view
+ */
+export function ViewParamsShare({ target }: { target: OntimeView }) {
+  const { viewPresets } = useViewUrlPresets(target);
+  const [_, setSearchParams] = useSearchParams();
+
+  const handleRecall = (preset: URLPreset) => {
+    setSearchParams(`${preset.search}&alias=${preset.alias}`);
+  };
+
+  if (viewPresets.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={style.presetSection}>
+      {viewPresets.map((preset) => {
+        const active = window.location.search.includes(`alias=${preset.alias}`);
+        return (
+          <div key={preset.alias} className={cx([style.preset, active && style.active])}>
+            <div>{preset.alias}</div>
+            <Button
+              variant='subtle-white'
+              onClick={() => handleRecall(preset)}
+              disabled={active}
+              className={style.presetActions}
+            >
+              {active ? 'Applied' : 'Apply'}
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -1,7 +1,8 @@
-import { FormEvent, memo } from 'react';
+import { FormEvent, memo, useReducer } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { Dialog } from '@base-ui-components/react/dialog';
+import { OntimeView } from 'ontime-types';
 
 import useViewSettings from '../../hooks-query/useViewSettings';
 import Button from '../buttons/Button';
@@ -11,20 +12,24 @@ import Info from '../info/Info';
 import { ViewOption } from './viewParams.types';
 import { getURLSearchParamsFromObj } from './viewParams.utils';
 import { useViewParamsEditorStore } from './viewParamsEditor.store';
+import { ViewParamsShare } from './ViewParamShare';
 import ViewParamsSection from './ViewParamsSection';
 
 import style from './ViewParamsEditor.module.scss';
 
 interface EditFormDrawerProps {
+  target: OntimeView;
   viewOptions: ViewOption[];
 }
 
 export default memo(ViewParamsEditor);
-
-function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
+function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
+  // TODO: can we ensure that the options update when the user loads an alias?
   const [_, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
   const { isOpen, close } = useViewParamsEditorStore();
+  // TODO: we dont want this as a permanent option
+  const forceRender = useReducer((x) => x + 1, 0)[1];
 
   const handleClose = () => {
     close();
@@ -32,6 +37,7 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
 
   const resetParams = () => {
     setSearchParams();
+    forceRender();
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -40,6 +46,7 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
     setSearchParams(newSearchParams);
+    forceRender();
   };
 
   return (
@@ -56,7 +63,7 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
         <Dialog.Popup className={style.drawer}>
           <div className={style.header}>
             <Dialog.Title>Customise</Dialog.Title>
-            <IconButton variant='subtle-white' size='large' onClick={handleClose}>
+            <IconButton variant='subtle-white' size='large' data-testid='close-view-params' onClick={handleClose}>
               <IoClose />
             </IconButton>
           </div>
@@ -64,6 +71,7 @@ function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
             {viewSettings.overrideStyles && (
               <Info className={style.info}>This view style is being modified by a custom CSS file.</Info>
             )}
+            <ViewParamsShare target={target} />
             <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
               {viewOptions.map((section) => (
                 <ViewParamsSection
@@ -79,8 +87,14 @@ function ViewParamsEditor({ 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'>
-              Save
+            <Button
+              variant='primary'
+              size='large'
+              form='edit-params-form'
+              type='submit'
+              data-testid='apply-view-params'
+            >
+              Apply
             </Button>
           </div>
         </Dialog.Popup>

apps/client/src/common/components/view-params-editor/ViewParamsSection.module.scss

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

apps/client/src/common/components/view-params-editor/ViewParamsSection.tsx

@@ -1,4 +1,3 @@
-import { memo } from 'react';
 import { IoChevronDown } from 'react-icons/io5';
 import { useLocalStorage } from '@mantine/hooks';
 
@@ -16,8 +15,7 @@ interface ViewParamsSectionProps {
   options: ParamField[];
 }
 
-export default memo(ViewParamsSection);
-function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
+export default function ViewParamsSection({ title, collapsible, options }: ViewParamsSectionProps) {
   const [collapsed, setCollapsed] = useLocalStorage({ key: `params-${title}`, defaultValue: false });
 
   const handleCollapse = () => {

apps/client/src/common/components/view-params-editor/ViewParamsShare.module.scss

@@ -0,0 +1,22 @@
+.presetSection {
+  background-color: $gray-1350;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.preset {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  &.active {
+    color: $blue-500;
+  }
+}
+
+.presetActions {
+  margin-left: auto;
+}

apps/client/src/common/context/PresetContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { URLPreset } from 'ontime-types';
+
+export const PresetContext = createContext<URLPreset | undefined>(undefined);

apps/client/src/common/hooks-query/useRundown.ts

@@ -56,6 +56,7 @@ 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) {
@@ -64,7 +65,7 @@ export function useFlatRundown() {
     }
   }, [projectData]);
 
-  return { data: flatRundown, status };
+  return { data: flatRundown, rundownId: data.id, status };
 }
 
 /**

apps/client/src/common/hooks-query/useUrlPresets.ts

@@ -1,5 +1,6 @@
+import { useMemo } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { URLPreset } from 'ontime-types';
+import { OntimeView, URLPreset } from 'ontime-types';
 
 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { URL_PRESETS } from '../api/constants';
@@ -21,6 +22,14 @@ export default function useUrlPresets({ skip = false }: FetchProps = {}) {
   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();
 

apps/client/src/common/hooks-query/useViewSettings.ts

@@ -7,7 +7,7 @@ import { VIEW_SETTINGS } from '../api/constants';
 import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';
 
 export default function useViewSettings() {
-  const { data, isPending } = useQuery({
+  const { data, status } = useQuery({
     queryKey: VIEW_SETTINGS,
     queryFn: getViewSettings,
     placeholderData: (previousData, _previousQuery) => previousData,
@@ -24,5 +24,5 @@ export default function useViewSettings() {
     },
   });
 
-  return { data: data ?? viewsSettingsPlaceholder, mutateAsync, isPending };
+  return { data: data ?? viewsSettingsPlaceholder, status, mutateAsync };
 }

apps/client/src/common/hooks/useClientPath.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 import { MessageTag } from 'ontime-types';
 import { useShallow } from 'zustand/shallow';
 

apps/client/src/common/hooks/useElectronEvent.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 
 import { addDialog } from '../stores/dialogStore';
 

apps/client/src/common/hooks/useEntryAction.ts

@@ -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,
@@ -36,7 +36,7 @@ import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
 
 export type EventOptions = Partial<{
-  // options of any new entries (event / delay / block)
+  // options of any new entries (event / delay / group)
   after: MaybeString;
   before: MaybeString;
   // options of entries of type OntimeEvent
@@ -552,7 +552,7 @@ export const useEntryActions = () => {
   );
 
   /**
-   * Calls mutation to dissolve a block
+   * Calls mutation to dissolve a group
    * @private
    */
   const { mutateAsync: ungroupMutation } = useMutation({
@@ -574,12 +574,12 @@ export const useEntryActions = () => {
   });
 
   /**
-   * Deletes a block and moves its events to the top level
+   * Deletes a group and moves its events to the top level
    */
   const ungroup = useCallback(
-    async (blockId: EntryId) => {
+    async (groupId: EntryId) => {
       try {
-        await ungroupMutation(blockId);
+        await ungroupMutation(groupId);
       } catch (error) {
         logAxiosError('Error dissolving group', error);
       }
@@ -588,7 +588,7 @@ export const useEntryActions = () => {
   );
 
   /**
-   * Calls mutation to create a block with a selection
+   * Calls mutation to create a group with a selection
    * @private
    */
   const { mutateAsync: groupEntriesMutation } = useMutation({
@@ -610,7 +610,7 @@ export const useEntryActions = () => {
   });
 
   /**
-   * Create a block with a selection
+   * Create a group with a selection
    */
   const groupEntries = useCallback(
     async (entryIds: EntryId[]) => {
@@ -674,8 +674,8 @@ export const useEntryActions = () => {
       } catch (error) {
         logAxiosError('Error re-ordering event', error);
       }
-      // the rundown needs to know whether we moved into a block
-      return rundown.entries[destinationId]?.type === 'block' ? destinationId : undefined;
+      // the rundown needs to know whether we moved into a group
+      return rundown.entries[destinationId]?.type === SupportedEntry.Group ? destinationId : undefined;
     },
     [queryClient, reorderEntryMutation],
   );
@@ -693,6 +693,7 @@ export const useEntryActions = () => {
         await reorderEntryMutation(reorderObject);
       } catch (error) {
         logAxiosError('Error re-ordering event', error);
+        throw error; // rethrow to handle in the component
       }
     },
     [reorderEntryMutation],
@@ -797,14 +798,12 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
   }
 
   function deleteEntry(entry: OntimeEntry) {
-    if (isOntimeBlock(entry) || !entry.parent) {
+    if (isOntimeGroup(entry) || !entry.parent) {
       order = order.filter((id) => id !== entry.id);
     } else {
       const parent = entries[entry.parent];
-      if ('parent' in entries) {
-        (parent as OntimeBlock).entries = (parent as OntimeBlock).entries.filter(
-          (parentEntry) => parentEntry !== entry.id,
-        );
+      if (parent && isOntimeGroup(parent)) {
+        parent.entries = parent.entries.filter((parentEntry) => parentEntry !== entry.id);
       }
     }
 

apps/client/src/common/hooks/useSocket.ts

@@ -1,4 +1,4 @@
-import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage } from 'ontime-types';
+import { OffsetMode, RuntimeStore, SimpleDirection, SimplePlayback, TimerMessage, TimerType } from 'ontime-types';
 
 import { useRuntimeStore } from '../stores/runtime';
 import { sendSocket } from '../utils/socket';
@@ -17,7 +17,6 @@ export const setClientRemote = {
 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,
 }));
 
@@ -59,8 +58,8 @@ export const setMessage = {
 
 export const usePlaybackControl = createSelector((state: RuntimeStore) => ({
   playback: state.timer.playback,
-  selectedEventIndex: state.runtime.selectedEventIndex,
-  numEvents: state.runtime.numEvents,
+  selectedEventIndex: state.rundown.selectedEventIndex,
+  numEvents: state.rundown.numEvents,
   timerPhase: state.timer.phase,
 }));
 
@@ -131,8 +130,8 @@ export const useSelectedEventId = createSelector((state: RuntimeStore) => ({
   selectedEventId: state.eventNow?.id ?? null,
 }));
 
-export const useCurrentBlockId = createSelector((state: RuntimeStore) => ({
-  currentBlockId: state.blockNow?.id ?? null,
+export const useCurrentGroupId = createSelector((state: RuntimeStore) => ({
+  currentGroupId: state.groupNow?.id ?? null,
 }));
 
 export const setEventPlayback = {
@@ -151,7 +150,8 @@ export const useClock = createSelector((state: RuntimeStore) => ({
 }));
 
 export const useNextFlag = createSelector((state: RuntimeStore) => ({
-  nextFlag: state.nextFlag,
+  id: state.eventFlag?.id ?? null,
+  expectedStart: state.offset.expectedFlagStart,
 }));
 
 /** Used by the progress bar components */
@@ -162,37 +162,36 @@ export const useProgressData = createSelector((state: RuntimeStore) => ({
   timeDanger: state.eventNow?.timeDanger ?? null,
 }));
 
-export const useRuntimeOverview = createSelector((state: RuntimeStore) => ({
-  plannedStart: state.runtime.plannedStart,
-  actualStart: state.runtime.actualStart,
-  plannedEnd: state.runtime.plannedEnd,
-  expectedEnd: state.runtime.expectedEnd,
+export const useRundownOverview = createSelector((state: RuntimeStore) => ({
+  plannedStart: state.rundown.plannedStart,
+  actualStart: state.rundown.actualStart,
+  plannedEnd: state.rundown.plannedEnd,
+  expectedEnd: state.offset.expectedRundownEnd,
 }));
 
 export const useRuntimePlaybackOverview = createSelector((state: RuntimeStore) => ({
   playback: state.timer.playback,
   clock: state.clock,
 
-  numEvents: state.runtime.numEvents,
-  selectedEventIndex: state.runtime.selectedEventIndex,
-  offset: state.runtime.offsetMode === OffsetMode.Absolute ? state.runtime.offset : state.runtime.relativeOffset,
+  numEvents: state.rundown.numEvents,
+  selectedEventIndex: state.rundown.selectedEventIndex,
+  offset: state.offset.mode === OffsetMode.Absolute ? state.offset.absolute : state.offset.relative,
 
-  blockStartedAt: state.blockNow?.startedAt ?? null,
-  blockExpectedEnd: state.blockNow?.expectedEnd ?? null,
+  groupExpectedEnd: state.offset.expectedGroupEnd,
 }));
 
 export const useTimelineStatus = createSelector((state: RuntimeStore) => ({
   clock: state.clock,
-  offset: state.runtime.offset,
+  offset: state.offset.absolute,
 }));
 
-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,
+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.runtime.actualStart,
-  plannedStart: state.runtime.plannedStart,
+  actualStart: state.rundown.actualStart,
+  plannedStart: state.rundown.plannedStart,
+  clock: state.clock,
 }));
 
 export const useCurrentDay = createSelector((state: RuntimeStore) => ({
@@ -200,7 +199,7 @@ export const useCurrentDay = createSelector((state: RuntimeStore) => ({
 }));
 
 export const useRuntimeOffset = createSelector((state: RuntimeStore) => ({
-  offset: state.runtime.offset,
+  offset: state.offset.absolute,
 }));
 
 export const usePing = createSelector((state: RuntimeStore) => ({
@@ -213,7 +212,7 @@ export const useIsOnline = createSelector((state: RuntimeStore) => ({
 }));
 
 export const useOffsetMode = createSelector((state: RuntimeStore) => ({
-  offsetMode: state.runtime.offsetMode,
+  offsetMode: state.offset.mode,
 }));
 
 export const setOffsetMode = (payload: OffsetMode) => sendSocket('offsetmode', payload);
@@ -225,3 +224,53 @@ 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,
+}));

apps/client/src/common/models/TimeManager.type.ts

@@ -1,19 +0,0 @@
-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;
-};

apps/client/src/common/stores/clientStore.ts

@@ -1,6 +1,8 @@
 import { ClientList } from 'ontime-types';
 import { create } from 'zustand';
 
+import { makeStageKey } from '../utils/localStorage';
+
 interface ClientStore {
   name?: string;
   setName: (newValue: string) => void;
@@ -15,7 +17,7 @@ interface ClientStore {
   setClients: (clients: ClientList) => void;
 }
 
-const clientNameKey = 'ontime-client-name';
+const clientNameKey = makeStageKey('client-name');
 
 function persistNameInStorage(newValue: string) {
   localStorage.setItem(clientNameKey, newValue);

apps/client/src/common/stores/useCuesheetLinksStore.ts

@@ -0,0 +1,89 @@
+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),
+    };
+  },
+}));

apps/client/src/common/stores/viewOptions.ts

@@ -3,7 +3,7 @@ import { create } from 'zustand';
 import { booleanFromLocalStorage } from '../utils/localStorage';
 
 enum LocalEventKeys {
-  Mirror = 'ontime-view-mirror',
+  Mirror = 'view-mirror',
 }
 
 type ViewOptionsStore = {

apps/client/src/common/utils/__tests__/urlPresets.test.ts

@@ -1,9 +1,11 @@
-import { resolvePath } from 'react-router-dom';
+import { Path, resolvePath } from 'react-router';
+import { OntimeView, URLPreset } from 'ontime-types';
 
 import {
   arePathsEquivalent,
   generatePathFromPreset,
   generateUrlPresetOptions,
+  getCurrentPath,
   getRouteFromPreset,
   validateUrlPresetPath,
 } from '../urlPresets';
@@ -29,12 +31,13 @@ describe('validateUrlPresetPaths()', () => {
 });
 
 describe('getRouteFromPreset()', () => {
-  const presets = [
+  const presets: URLPreset[] = [
     {
       enabled: true,
       alias: 'demopage',
-      target: 'timer',
+      target: OntimeView.Timer,
       search: 'user=guest',
+      options: {},
     },
   ];
 
@@ -70,28 +73,28 @@ describe('getRouteFromPreset()', () => {
 
   describe('handle url sharing edge cases', () => {
     it('finds the correct preset when the url contains extra arguments', () => {
-      const location = resolvePath('/demopage?locked=true&token=123');
+      const location = resolvePath('/demopage?n=1&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?locked=true&token=123');
-      expect(getRouteFromPreset(location, presets)).toBe('timer?user=guest&alias=demopage&locked=true&token=123');
+      const location = resolvePath('/demopage?n=1&token=123');
+      expect(getRouteFromPreset(location, presets)).toBe('timer?user=guest&alias=demopage&n=1&token=123');
     });
   });
 });
 
 describe('generatePathFromPreset()', () => {
   test.each([
-    ['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', (target, path, alias, expected) => {
-    expect(generatePathFromPreset(target, path, alias, null, null)).toEqual(expected);
+    ['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);
   });
 
   test('appends the feature params to the alias', () => {
-    expect(generatePathFromPreset('timer', 'user=guest', 'demopage', 'true', '123')).toBe(
-      'timer?user=guest&alias=demopage&locked=true&token=123',
+    expect(generatePathFromPreset('timer', 'user=guest', 'demopage', true, '123')).toBe(
+      'timer?user=guest&alias=demopage&n=1&token=123',
     );
   });
 });
@@ -108,9 +111,13 @@ 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&locked=true=token=123', 'timer?test=b')).toBeFalsy();
-    expect(arePathsEquivalent('timer?test=a&locked=true=token=123', 'timer?test=a')).toBeTruthy();
+    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();
   });
 });
 
@@ -172,3 +179,16 @@ describe('generateUrlPresetOptions', () => {
     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);
+  });
+});

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

@@ -1,3 +1,5 @@
+import { baseURI } from '../../externals';
+
 export function booleanFromLocalStorage(key: string, fallback: boolean): boolean {
   const valueInStorage = localStorage.getItem(key);
   if (valueInStorage) {
@@ -7,3 +9,8 @@ export function booleanFromLocalStorage(key: string, fallback: boolean): boolean
     return fallback;
   }
 }
+
+export function makeStageKey(key: string) {
+  if (baseURI) return `${baseURI}-${key}`;
+  return key;
+}

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

@@ -19,7 +19,8 @@ export function getOffsetText(offset: MaybeNumber): string {
 }
 
 export function getOffsetState(offset: MaybeNumber): 'over' | 'under' | 'muted' | null {
-  if (offset === null) return null;
-  if (offset === 0) return 'muted';
-  return offset < 0 ? 'over' : 'under';
+  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';
 }

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

@@ -11,3 +11,4 @@ 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

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

@@ -10,7 +10,16 @@ import {
 } from 'ontime-types';
 
 import { isProduction, websocketUrl } from '../../externals';
-import { CLIENT_LIST, CUSTOM_FIELDS, PROJECT_DATA, REPORT, RUNDOWN, RUNTIME, VIEW_SETTINGS } from '../api/constants';
+import {
+  CLIENT_LIST,
+  CUSTOM_FIELDS,
+  PROJECT_DATA,
+  REPORT,
+  RUNDOWN,
+  RUNTIME,
+  URL_PRESETS,
+  VIEW_SETTINGS,
+} from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
 import {
@@ -133,16 +142,8 @@ export const connectSocket = () => {
           break;
         }
         case MessageTag.RuntimeData: {
-          // 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);
+          patchRuntime(payload);
+          updateDevTools(payload);
           break;
         }
         case MessageTag.Refetch: {
@@ -166,6 +167,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;

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

@@ -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 { useTimeUntilData } from '../hooks/useSocket';
+import { useExpectedStartData } from '../hooks/useSocket';
 import { ontimeQueryClient } from '../queryClient';
 
 /**
@@ -105,8 +105,7 @@ export const formatTime = (
 
 /**
  * Handles case for formatting a duration time
- * @param duration
- * @returns
+ * eg: "1h 0m 0s" or "0h 30m"
  */
 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
@@ -134,18 +133,24 @@ 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 useTimeUntilStart(
+export function useTimeUntilExpectedStart(
   // typed like this to make it very clear what the data is
-  data: Pick<OntimeEvent, 'timeStart' | 'dayOffset' | 'delay'> & {
+  event: Pick<OntimeEvent, 'timeStart' | 'dayOffset' | 'delay'> | null,
+  state: {
     totalGap: number;
     isLinkedToLoaded: boolean;
   },
 ): number {
-  const { offset, clock, currentDay, offsetMode, actualStart, plannedStart } = useTimeUntilData();
-  return calculateTimeUntilStart({ ...data, currentDay, clock, offset, offsetMode, actualStart, plannedStart });
+  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;
 }

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

@@ -1,5 +1,5 @@
-import { Path, resolvePath } from 'react-router-dom';
-import { OntimeView, URLPreset } from 'ontime-types';
+import { Path, resolvePath } from 'react-router';
+import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
 import { checkRegex } from 'ontime-utils';
 
 /**
@@ -27,62 +27,72 @@ 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 {
-  // 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.target, foundPreset.search, 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) {
+  // if we're already on a preset path, no need to redirect
+  if (isPresetPath(location)) {
     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 the page has a known enabled alias, we check if we need to redirect
-    if (preset.alias === presetOnPage && preset.enabled) {
-      const newPath = generatePathFromPreset(preset.target, preset.search, preset.alias, locked, token);
-      if (!arePathsEquivalent(currentPath, newPath)) {
-        // if current path is out of date
-        // return new path so we can redirect
-        return newPath;
-      }
+    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;
     }
   }
+
   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: string | null,
+  locked: boolean,
   token: string | null,
 ): string {
   const path = resolvePath(`${target}?${search}`);
@@ -93,7 +103,7 @@ export function generatePathFromPreset(
 
   // maintain params from the URL search feature
   if (locked) {
-    searchParams.set('locked', locked);
+    searchParams.set('n', '1');
   }
 
   if (token) {
@@ -106,28 +116,27 @@ export function generatePathFromPreset(
 
 /**
  * Utility checks if two paths are equivalent
- * Considers the edge cases for url sharing where a path may contain extra arguments from the alias
- * - token
- * - locked
+ * For preset paths, only compares the path (since params are stored in session)
+ * For regular paths, compares path and search params (ignoring token)
  */
 export function arePathsEquivalent(currentPath: string, newPath: string): boolean {
   const currentUrl = new URL(currentPath, document.location.origin);
   const newUrl = new URL(newPath, document.location.origin);
 
-  // check path
+  // 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)
   if (currentUrl.pathname !== newUrl.pathname) {
     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('locked');
+  currentUrl.searchParams.delete('n');
+  newUrl.searchParams.delete('token');
+  newUrl.searchParams.delete('n');
 
   return currentUrl.searchParams.toString() === newUrl.searchParams.toString();
 }
@@ -136,33 +145,35 @@ export function arePathsEquivalent(currentPath: string, newPath: string): boolea
  * Generates a URL preset from a user given alias and URL.
  */
 export function generateUrlPresetOptions(alias: string, userUrl: string): URLPreset {
-  let sanitisedUrl = userUrl.toLowerCase();
+  let sanitisedUrl = userUrl;
   // we need to ensure the URL has a protocol, but it doesnt matter which
-  if (!checkRegex.startsWithHttp(sanitisedUrl)) {
+  if (!checkRegex.startsWithHttp(userUrl.toLowerCase())) {
     sanitisedUrl = `http://${sanitisedUrl}`;
   }
 
   const url = new URL(sanitisedUrl);
-  const target = extractLastSegment(url.pathname);
+  const path = getCurrentPath(url);
 
-  if (target === 'editor' || !Object.values(OntimeView).includes(target as OntimeView)) {
-    throw new Error(`Invalid target view: ${target}`);
+  if (!isPresettableView(path)) {
+    throw new Error(`Invalid target view: ${path}`);
   }
 
   return {
     alias,
-    target,
+    target: path,
     search: url.searchParams.toString(),
     enabled: true,
   };
 }
 
-/**
- * the path can contain the stage hash
- * "/team-hash/timer" or "/timer"
- * we need to extract ontime view it targets
- */
-function extractLastSegment(pathname: string): string {
-  const segments = pathname.split('/').filter(Boolean);
-  return segments[segments.length - 1] || '';
+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';
 }

apps/client/src/declarations/declaration.d.ts

@@ -1,3 +1,5 @@
+import { AppMode } from '../ontimeConfig';
+
 declare module '*.scss' {
   const content: Record<string, string>;
   export default content;
@@ -26,6 +28,8 @@ declare global {
  * - `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
@@ -39,6 +43,8 @@ declare module '@tanstack/react-table' {
     options: {
       showDelayedTimes: boolean;
       hideTableSeconds: boolean;
+      hideIndexColumn: boolean;
+      cuesheetMode: AppMode;
     };
   }
 

apps/client/src/externals.ts

@@ -74,3 +74,26 @@ 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';
+}

apps/client/src/features/PresetWrapper.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import { ComponentType, useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router';
 
 import useUrlPresets from '../common/hooks-query/useUrlPresets';
 import { getRouteFromPreset } from '../common/utils/urlPresets';

apps/client/src/features/app-settings/panel-utils/PanelUtils.module.scss

@@ -132,6 +132,7 @@ $inner-padding: 1rem;
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
+  gap: 1rem;
   padding: 0.5rem 0;
 }
 

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx

@@ -42,7 +42,6 @@ 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();

apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx

@@ -25,8 +25,6 @@ export default function AutomationSettingsForm({
   enabledOscIn,
   oscPortIn,
 }: AutomationSettingsProps) {
-  'no memo'; // RHF and react-compiler dont seem to get along
-
   const {
     handleSubmit,
     reset,
@@ -38,15 +36,15 @@ export default function AutomationSettingsForm({
   } = useForm<AutomationSettingsProps>({
     mode: 'onChange',
     defaultValues: { enabledAutomations, enabledOscIn, oscPortIn },
-    values: { enabledAutomations, enabledOscIn, oscPortIn },
     resetOptions: {
-      keepDirtyValues: true,
+      keepDirtyValues: false,
     },
   });
 
   const onSubmit = async (formData: AutomationSettingsProps) => {
     try {
       await editAutomationSettings(formData);
+      reset(formData);
     } catch (error) {
       const message = maybeAxiosError(error);
       setError('root', { message });

apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx

@@ -31,7 +31,6 @@ export default function TriggerForm({
   onCancel,
   postSubmit,
 }: TriggerFormProps) {
-  'use no memo'; // RHF and react-compiler don't seem to get along
   const {
     handleSubmit,
     register,

apps/client/src/features/app-settings/panel/automations-panel/template-input/templateInput.utils.ts

@@ -16,18 +16,18 @@ const staticAutocompleteOptions = [
   '{{timer.duration}}',
   '{{timer.elapsed}}',
   '{{timer.expectedFinish}}',
-  '{{timer.finishedAt}}',
   '{{timer.secondaryTimer}}',
   '{{timer.startedAt}}',
-  '{{runtime.selectedEventIndex}}',
-  '{{runtime.numEvents}}',
-  '{{runtime.offset}}',
-  '{{runtime.plannedStart}}',
-  '{{runtime.plannedEnd}}',
-  '{{runtime.actualStart}}',
-  '{{runtime.expectedEnd}}',
-  '{{currentBlock.block}}',
-  '{{currentBlock.startedAt}}',
+  '{{rundown.selectedEventIndex}}',
+  '{{rundown.numEvents}}',
+  '{{rundown.plannedStart}}',
+  '{{rundown.plannedEnd}}',
+  '{{rundown.actualStart}}',
+  '{{offset.absolute}}',
+  '{{offset.relative}}',
+  '{{offset.expectedRundownEnd}}',
+  '{{offset.expectedGroupEnd}}',
+  '{{offset.expectedFlagStart}}',
 ];
 
 const eventStaticPropertiesNow = [

apps/client/src/features/app-settings/panel/feature-panel/FeaturePanel.tsx

@@ -1,10 +1,10 @@
 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';
 

apps/client/src/features/app-settings/panel/feature-panel/GenerateLinkForm.tsx

@@ -1,144 +0,0 @@
-'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>
-  );
-}

apps/client/src/features/app-settings/panel/feature-panel/GenerateLinkFormExport.tsx

@@ -1,42 +0,0 @@
-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: `URL Preset: ${preset.alias}`,
-      })),
-    ];
-  }, [lockedPath, urlPresetData]);
-
-  return <GenerateLinkForm hostOptions={hostOptions} pathOptions={pathOptions} isLockedToView={Boolean(lockedPath)} />;
-}

apps/client/src/features/app-settings/panel/feature-panel/URLPresets.tsx

@@ -7,6 +7,7 @@ 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';
@@ -57,9 +58,8 @@ export default function URLPresets() {
             <thead>
               <tr>
                 <th>Enabled</th>
-                <th>Alias</th>
                 <th>Target view</th>
-                <th>URL parameters</th>
+                <th>Alias</th>
                 <th />
               </tr>
             </thead>
@@ -71,9 +71,10 @@ export default function URLPresets() {
                     <td>
                       <Switch defaultChecked={preset.enabled} onCheckedChange={() => {}} />
                     </td>
-                    <td>{preset.alias}</td>
-                    <td>{preset.target}</td>
-                    <td>{preset.search}</td>
+                    <td>
+                      <Tag>{preset.target}</Tag>
+                    </td>
+                    <td style={{ width: '100%' }}>{preset.alias}</td>
                     <Panel.InlineElements relation='inner' as='td'>
                       <IconButton
                         variant='ghosted-white'

apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
-import { OntimeView, URLPreset } from 'ontime-types';
+import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
 
 import { maybeAxiosError, unwrapError } from '../../../../../common/api/utils';
 import Button from '../../../../../common/components/buttons/Button';
 import Input from '../../../../../common/components/input/input/Input';
+import Textarea from '../../../../../common/components/input/textarea/Textarea';
 import Select, { SelectOption } from '../../../../../common/components/select/Select';
 import { useUpdateUrlPreset } from '../../../../../common/hooks-query/useUrlPresets';
 import { preventEscape } from '../../../../../common/utils/keyEvent';
@@ -13,7 +14,7 @@ import * as Panel from '../../../panel-utils/PanelUtils';
 
 import style from './URLPresetForm.module.scss';
 
-const targetOptions: SelectOption[] = [
+const targetOptions: SelectOption<OntimeViewPresettable>[] = [
   { value: OntimeView.Cuesheet, label: 'Cuesheet' },
   { value: OntimeView.Operator, label: 'Operator' },
   { value: OntimeView.Timer, label: 'Timer' },
@@ -114,7 +115,7 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
         <div className={style.expand}>
           <Panel.Description>Generate options (paste URL to generate options)</Panel.Description>
           <Panel.InlineElements>
-            <Input placeholder='Paste URL' fluid ref={urlRef} required />
+            <Input placeholder='Paste URL' fluid ref={urlRef} />
             <Button onClick={generateOptions}>Generate</Button>
           </Panel.InlineElements>
         </div>
@@ -126,14 +127,15 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
         <Select
           options={targetOptions}
           {...register('target', { required: 'Target is required' })}
-          value={watch('target') as OntimeView}
-          onValueChange={(value) => setValue('target', value)}
+          value={watch('target')}
+          onValueChange={(value) => setValue('target', value, { shouldDirty: true })}
         />
       </div>
       <div>
         <Panel.Description>Parameters</Panel.Description>
-        <Input
+        <Textarea
           fluid
+          rows={3}
           {...register('search', {
             validate: validateParams,
           })}

apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldForm.tsx

@@ -32,7 +32,6 @@ export default function CustomFieldForm({
   initialLabel,
   initialKey,
 }: CustomFieldsFormProps) {
-  'use no memo'; // RHF and react-compiler don't seem to get along
   const { data } = useCustomFields();
 
   // we use this to force an update

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx

@@ -31,7 +31,6 @@ export default function ImportMapForm({
   onSubmitExport,
   onSubmitImport,
 }: ImportMapFormProps) {
-  'use no memo'; // RHF and react-compiler don't seem to get along
   const namedImportMap = getPersistedOptions();
   const { revoke } = useGoogleSheet();
   const {

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/importMapUtils.ts

@@ -64,11 +64,11 @@ export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
 }
 
 export function persistImportMap(options: NamedImportMap) {
-  localStorage.setItem('ontime-import-options', JSON.stringify(options));
+  localStorage.setItem('import-options', JSON.stringify(options));
 }
 
 function getPersistImportMap(): unknown {
-  const options = localStorage.getItem('ontime-import-options');
+  const options = localStorage.getItem('import-options');
   if (!options) {
     throw new Error('no import options found');
   }

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/preview/PreviewRundown.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { IoLink } from 'react-icons/io5';
-import { CustomFields, isOntimeBlock, isOntimeEvent, Rundown } from 'ontime-types';
+import { CustomFields, isOntimeEvent, isOntimeGroup, Rundown } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import Tag from '../../../../../../common/components/tag/Tag';
@@ -55,7 +55,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
       <tbody>
         {rundown.order.map((entryId) => {
           const entry = rundown.entries[entryId];
-          if (isOntimeBlock(entry)) {
+          if (isOntimeGroup(entry)) {
             return (
               <tr key={entry.id}>
                 <td className={style.center}>

apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useRef, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { uploadProjectFile } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -23,7 +23,6 @@ type ProjectCreateFormValues = {
 };
 
 export default function ProjectCreateForm({ onClose }: ProjectCreateFromProps) {
-  'use no memo'; // RHF and react-compiler don't seem to get along
   const [error, setError] = useState<string | null>(null);
 
   const {

apps/client/src/features/app-settings/panel/project-panel/ProjectForm.tsx

@@ -20,7 +20,6 @@ interface ProjectFormProps {
 }
 
 export default function ProjectForm({ action, filename, onSubmit, onCancel }: ProjectFormProps) {
-  'use no memo'; // RHF and react-compiler don't seem to get along
   const {
     handleSubmit,
     register,

apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx

@@ -6,6 +6,7 @@ import { PROJECT_DATA } from '../../../../common/api/constants';
 import { getDb, patchData } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
+import Info from '../../../../common/components/info/Info';
 import Switch from '../../../../common/components/switch/Switch';
 import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -21,14 +22,13 @@ interface ProjectMergeFromProps {
 
 type ProjectMergeFormValues = {
   project: boolean;
-  rundown: boolean;
+  rundowns: boolean;
   viewSettings: boolean;
   urlPresets: boolean;
   automation: boolean;
 };
 
 export default function ProjectMergeForm({ onClose, fileName }: ProjectMergeFromProps) {
-  'use no memo'; // RHF and react-compiler don't seem to get along
   const [error, setError] = useState<string | null>(null);
   const queryClient = useQueryClient();
 
@@ -40,7 +40,7 @@ export default function ProjectMergeForm({ onClose, fileName }: ProjectMergeFrom
   } = useForm<ProjectMergeFormValues>({
     defaultValues: {
       project: false,
-      rundown: false,
+      rundowns: false,
       viewSettings: false,
       urlPresets: false,
       automation: false,
@@ -62,6 +62,10 @@ export default function ProjectMergeForm({ onClose, fileName }: ProjectMergeFrom
 
       // make patch object
       const { data } = await getDb(fileName);
+      if (!data.settings.version.startsWith('4.')) {
+        setError('The project you are attempting to merge is from an older version and it need to be migrated first');
+        return;
+      }
       const patch = await makeProjectPatch(data, values);
 
       // request patch
@@ -76,7 +80,7 @@ export default function ProjectMergeForm({ onClose, fileName }: ProjectMergeFrom
   return (
     <Panel.Section as='form' onSubmit={handleSubmit(handleSubmitCreate)}>
       <Panel.Title>
-        Merge {`"${fileName}"`}
+        Partial project merge
         <Panel.InlineElements>
           <Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
             Cancel
@@ -89,9 +93,12 @@ export default function ProjectMergeForm({ onClose, fileName }: ProjectMergeFrom
       {error && <Panel.Error>{error}</Panel.Error>}
       <Panel.Section className={cx([style.innerColumn, style.inlineLabels])}>
         <Panel.Description>
-          Select partial data from {`"${fileName}"`} to merge into the current project.
-          <br /> This process is irreversible.
+          Select data from <i>{`"${fileName}"`}</i> to merge into the current project.
         </Panel.Description>
+        <Info type='warning'>
+          This process is irreversible and can result in data loss. <br />
+          You may want to create a duplicate backup beforehand.
+        </Info>
         <label>
           <Switch
             size='large'
@@ -103,8 +110,8 @@ export default function ProjectMergeForm({ onClose, fileName }: ProjectMergeFrom
         <label>
           <Switch
             size='large'
-            checked={watch('rundown')}
-            onCheckedChange={(value: boolean) => setValue('rundown', value, { shouldDirty: true })}
+            checked={watch('rundowns')}
+            onCheckedChange={(value: boolean) => setValue('rundowns', value, { shouldDirty: true })}
           />
           Rundown + Custom Fields
         </label>

apps/client/src/features/app-settings/panel/settings-panel/GeneralSettings.tsx

@@ -16,7 +16,6 @@ import * as Panel from '../../panel-utils/PanelUtils';
 import GeneralPinInput from './composite/GeneralPinInput';
 
 export default function GeneralSettings() {
-  'use no memo'; // RHF and react-compiler don't seem to get along
   const { data, status, refetch } = useSettings();
   const {
     handleSubmit,

apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx

@@ -18,7 +18,6 @@ import * as Panel from '../../panel-utils/PanelUtils';
 import style from './SettingsPanel.module.scss';
 
 export default function ProjectData() {
-  'use no memo'; // RHF and react-compiler don't seem to get along
   const { data, status } = useProjectData();
   const { updateProjectData } = useUpdateProjectData();
 
@@ -244,12 +243,14 @@ export default function ProjectData() {
                       <div className={style.customImage}>
                         <Input
                           fluid
-                          defaultValue={field.value}
+                          defaultValue={field.url}
                           placeholder='Paste image URL (optional)'
                           {...register(`custom.${idx}.url`)}
                         />
                         <div className={style.imageContainer}>
-                          <img src={watch(`custom.${idx}.url`)} alt='' loading='lazy' className='info__image' />
+                          {watch(`custom.${idx}.url`) && (
+                            <img src={watch(`custom.${idx}.url`)} alt='' loading='lazy' className='info__image' />
+                          )}
                         </div>
                       </div>
                     </label>

apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx

@@ -18,8 +18,7 @@ import CodeEditorModal from './composite/StyleEditorModal';
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
 
 export default function ViewSettings() {
-  'use no memo'; // RHF and react-compiler don't seem to get along
-  const { data, isPending, mutateAsync } = useViewSettings();
+  const { data, status, mutateAsync } = useViewSettings();
   const [isCodeEditorOpen, codeEditorHandler] = useDisclosure();
 
   const {
@@ -88,7 +87,7 @@ export default function ViewSettings() {
           <ExternalLink href={cssOverrideDocsUrl}>See the docs</ExternalLink>
         </Info>
         <Panel.Section>
-          <Panel.Loader isLoading={isPending} />
+          <Panel.Loader isLoading={status === 'pending'} />
           <Panel.Error>{errors.root?.message}</Panel.Error>
           <Panel.ListGroup>
             <CodeEditorModal isOpen={isCodeEditorOpen} onClose={codeEditorHandler.close} />

apps/client/src/features/app-settings/quick-start/QuickStart.tsx

@@ -20,7 +20,6 @@ interface QuickStartProps {
 }
 
 export default function QuickStart({ isOpen, onClose }: QuickStartProps) {
-  'use no memo'; // RHF and react-compiler don't seem to get along
   const { defaultWarnTime, defaultDangerTime, setDangerTime, setWarnTime } = useEditorSettings();
 
   const {

apps/client/src/features/app-settings/useAppSettingsNavigation.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { SettingsOptionId } from './useAppSettingsMenu';
 

apps/client/src/features/control/playback/PlaybackControl.tsx

@@ -1,5 +1,3 @@
-import { Playback } from 'ontime-types';
-
 import { usePlaybackControl } from '../../../common/hooks/useSocket';
 
 import AddTime from './add-time/AddTime';
@@ -14,7 +12,7 @@ export default function PlaybackControl() {
 
   return (
     <div className={style.mainContainer}>
-      <PlaybackTimer playback={data.playback as Playback}>
+      <PlaybackTimer>
         <AddTime playback={data.playback} />
       </PlaybackTimer>
       <PlaybackButtons

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.tsx

@@ -11,10 +11,6 @@ import TimerDisplay from '../timer-display/TimerDisplay';
 
 import style from './PlaybackTimer.module.scss';
 
-interface PlaybackTimerProps {
-  playback: Playback;
-}
-
 function resolveAddedTimeLabel(addedTime: number) {
   if (addedTime > 0) {
     return `Added ${formatDuration(addedTime, false)}`;
@@ -27,11 +23,10 @@ function resolveAddedTimeLabel(addedTime: number) {
   return '';
 }
 
-export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProps>) {
-  const { playback, children } = props;
+export default function PlaybackTimer({ children }: PropsWithChildren) {
   const timer = useTimer();
 
-  const isRolling = playback === Playback.Roll;
+  const isRolling = timer.playback === Playback.Roll;
   const isWaiting = timer.phase === TimerPhase.Pending;
   const isOvertime = timer.phase === TimerPhase.Overtime;
   const hasAddedTime = Boolean(timer.addedTime);
@@ -52,7 +47,7 @@ export default function PlaybackTimer(props: PropsWithChildren<PlaybackTimerProp
         {isWaiting ? (
           <span className={style.rolltag}>Roll: Countdown to start</span>
         ) : (
-          <RunningStatus startedAt={timer.startedAt} expectedFinish={timer.expectedFinish} playback={playback} />
+          <RunningStatus startedAt={timer.startedAt} expectedFinish={timer.expectedFinish} playback={timer.playback} />
         )}
       </div>
       {children}
@@ -65,9 +60,7 @@ interface RunningStatusProps {
   expectedFinish: MaybeNumber;
   playback: Playback;
 }
-function RunningStatus(props: RunningStatusProps) {
-  const { startedAt, expectedFinish, playback } = props;
-
+function RunningStatus({ startedAt, expectedFinish, playback }: RunningStatusProps) {
   if (playback === Playback.Stop) {
     return <StoppedStatus />;
   }

apps/client/src/features/operator/Operator.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isOntimeBlock, isOntimeEvent } from 'ontime-types';
+import { isOntimeEvent, isOntimeGroup, OntimeView } from 'ontime-types';
 
 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
@@ -16,8 +16,8 @@ import { getDefaultFormat } from '../../common/utils/time';
 
 import EditModal from './edit-modal/EditModal';
 import FollowButton from './follow-button/FollowButton';
-import OperatorBlock from './operator-block/OperatorBlock';
 import OperatorEvent from './operator-event/OperatorEvent';
+import OperatorGroup from './operator-group/OperatorGroup';
 import StatusBar from './status-bar/StatusBar';
 import { getOperatorOptions, useOperatorOptions } from './operator.options';
 import type { EditEvent } from './operator.types';
@@ -35,7 +35,7 @@ export default function Operator() {
   const timeoutId = useRef<NodeJS.Timeout | null>(null);
 
   const { selectedEventId } = useSelectedEventId();
-  const { subscribe, mainSource, secondarySource, shouldEdit, hidePast } = useOperatorOptions();
+  const { subscribe, mainSource, secondarySource, shouldEdit, hidePast, showStart } = useOperatorOptions();
   const { data: settings } = useSettings();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
@@ -116,7 +116,7 @@ export default function Operator() {
 
   return (
     <div className={style.operatorContainer} data-testid='operator-view'>
-      <ViewParamsEditor viewOptions={operatorOptions} />
+      <ViewParamsEditor target={OntimeView.Operator} viewOptions={operatorOptions} />
       {editEvent && <EditModal event={editEvent} onClose={() => setEditEvent(null)} />}
 
       <StatusBar />
@@ -160,6 +160,7 @@ export default function Operator() {
                 isSelected={isSelected}
                 isPast={isPast}
                 selectedRef={isSelected ? selectedRef : undefined}
+                showStart={showStart}
                 subscribed={subscribedData}
                 totalGap={totalGap}
                 onLongPress={canEdit ? handleEdit : () => undefined}
@@ -167,10 +168,10 @@ export default function Operator() {
             );
           }
 
-          if (isOntimeBlock(entry)) {
+          if (isOntimeGroup(entry)) {
             return (
               <Fragment key={entry.id}>
-                <OperatorBlock key={entry.id} title={entry.title} />
+                <OperatorGroup key={entry.id} title={entry.title} />
                 {entry.entries.map((nestedEntryId) => {
                   const nestedEntry = data.entries[nestedEntryId];
                   if (!isOntimeEvent(nestedEntry)) {
@@ -208,6 +209,7 @@ export default function Operator() {
                       isSelected={isSelected}
                       isPast={isPast}
                       selectedRef={isSelected ? selectedRef : undefined}
+                      showStart={showStart}
                       subscribed={subscribedData}
                       totalGap={totalGap}
                       onLongPress={canEdit ? handleEdit : () => undefined}

apps/client/src/features/operator/OperatorExport.tsx

@@ -1,12 +1,13 @@
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+import { getIsNavigationLocked } from '../../externals';
 
 import Operator from './Operator';
 
 export default function OperatorExport() {
   return (
     <ProtectRoute permission='operator'>
-      <ViewNavigationMenu isLockable />
+      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} />
       <Operator />
     </ProtectRoute>
   );

apps/client/src/features/operator/operator-block/OperatorBlock.tsx

@@ -1,13 +0,0 @@
-import { memo } from 'react';
-
-import style from './OperatorBlock.module.scss';
-
-interface OperatorBlockProps {
-  title: string;
-}
-
-function OperatorBlock({ title }: OperatorBlockProps) {
-  return <div className={style.block}>{title}</div>;
-}
-
-export default memo(OperatorBlock);

apps/client/src/features/operator/operator-event/OperatorEvent.module.scss

@@ -1,3 +1,4 @@
+@use '@/theme/viewerDefs' as *;
 @import '../Operator.module.scss';
 
 .event {
@@ -5,13 +6,14 @@
   border-top: 1px solid $white-1;
   padding-right: 0.5rem;
   color: $white-90;
-  background-color: $gray-1300;
+  background-color: $viewer-card-bg-color;
 
   display: grid;
   align-items: center;
-  grid-template-columns: 1.25rem 1fr auto;
-  grid-template-rows: auto auto auto;
   column-gap: 0.5rem;
+  row-gap: 0.5rem;
+  grid-template-rows: auto auto auto;
+  grid-template-columns: 1.25rem 1fr auto;
   grid-template-areas:
     'binder main      schedule'
     'binder secondary running'
@@ -69,14 +71,23 @@
   white-space: pre-line;
 }
 
+.plannedStart, .timeUntil {
+  line-height: 1em;
+  background-color: $gray-1000;
+  padding: 0.25rem 0.5rem;
+  border-radius: 1px;
+}
+
+.plannedStart {
+  font-size: 1.5rem;
+  margin-right: 0.5rem;
+}
+
 .timeUntil {
   font-size: calc(1rem - 2px);
   line-height: 1em;
   grid-area: schedule;
   justify-self: end;
-  background-color: $gray-1000;
-  padding: 0.25rem 0.5rem;
-  border-radius: 1px;
 }
 
 .runningTime {

apps/client/src/features/operator/operator-event/OperatorEvent.tsx

@@ -1,10 +1,10 @@
 import { memo, RefObject, SyntheticEvent } from 'react';
 import { useLongPress } from '@mantine/hooks';
-import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
+import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND, millisToString } from 'ontime-utils';
 
 import DelayIndicator from '../../../common/components/delay-indicator/DelayIndicator';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
-import { formatDuration, useTimeUntilStart } from '../../../common/utils/time';
+import { formatDuration, useTimeUntilExpectedStart } from '../../../common/utils/time';
 import RunningTime from '../../viewers/common/running-time/RunningTime';
 import type { EditEvent, Subscribed } from '../operator.types';
 
@@ -24,6 +24,7 @@ interface OperatorEventProps {
   isSelected: boolean;
   isPast: boolean;
   selectedRef?: RefObject<HTMLDivElement | null>;
+  showStart: boolean;
   subscribed: Subscribed;
   totalGap: number;
   onLongPress: (event: EditEvent) => void;
@@ -44,6 +45,7 @@ function OperatorEvent({
   isSelected,
   isPast,
   selectedRef,
+  showStart,
   subscribed,
   totalGap,
   onLongPress,
@@ -64,9 +66,8 @@ function OperatorEvent({
 
   const operatorClasses = cx([
     style.event,
-    isSelected ? style.running : null,
-    subscribed ? style.subscribed : null,
-    isPast ? style.past : null,
+    isSelected && style.running,
+    isPast && style.past,
   ]);
 
   return (
@@ -75,9 +76,11 @@ function OperatorEvent({
         <span className={style.cue}>{cue}</span>
       </div>
 
-      <span className={style.mainField}>{main}</span>
+      <span className={style.mainField}>
+        {showStart && <span className={style.plannedStart}>{millisToString(timeStart)}</span>}
+        {main}
+        </span>
       <span className={style.secondaryField}>{secondary}</span>
-
       <OperatorEventSchedule
         timeStart={timeStart}
         isPast={isPast}
@@ -159,7 +162,7 @@ interface TimeUntilProps {
 }
 function TimeUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }: TimeUntilProps) {
   // we isolate this to avoid unnecessary re-renders
-  const timeUntil = useTimeUntilStart({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded });
+  const timeUntil = useTimeUntilExpectedStart({ timeStart, delay, dayOffset }, { totalGap, isLinkedToLoaded });
 
   const isDue = timeUntil < MILLIS_PER_SECOND;
   const timeUntilString = isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`;

apps/client/src/features/operator/operator-group/OperatorGroup.module.scss

@@ -1,4 +1,4 @@
-.block {
+.group {
   width: 100%;
   padding: 0.25rem 0.5rem;
   background-color: $gray-1350;
@@ -7,7 +7,7 @@
 
 // tablet
 @media (min-width: $min-tablet) {
-  .block {
+  .group {
     padding: 0.25rem 1rem;
   }
 }

apps/client/src/features/operator/operator-group/OperatorGroup.tsx

@@ -0,0 +1,12 @@
+import { memo } from 'react';
+
+import style from './OperatorGroup.module.scss';
+
+interface OperatorGroup {
+  title: string;
+}
+
+export default memo(OperatorGroup);
+function OperatorGroup({ title }: OperatorGroup) {
+  return <div className={style.group}>{title}</div>;
+}

apps/client/src/features/operator/operator.options.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { CustomFields, OntimeEvent } from 'ontime-types';
 
 import { getTimeOption } from '../../common/components/view-params-editor/common.options';
@@ -67,6 +67,13 @@ export const getOperatorOptions = (customFields: CustomFields, timeFormat: strin
           type: 'boolean',
           defaultValue: false,
         },
+        {
+          id: 'showStart',
+          title: 'Show planned start',
+          description: 'Whether to prepend the planned start to the items',
+          type: 'boolean',
+          defaultValue: false,
+        },
       ],
     },
   ];
@@ -78,6 +85,7 @@ type OperatorOptions = {
   subscribe: string[];
   shouldEdit: boolean;
   hidePast: boolean;
+  showStart: boolean;
 };
 
 /**
@@ -92,6 +100,7 @@ function getOptionsFromParams(searchParams: URLSearchParams): OperatorOptions {
     subscribe: searchParams.getAll('subscribe'),
     shouldEdit: isStringBoolean(searchParams.get('shouldEdit')),
     hidePast: isStringBoolean(searchParams.get('hidePast')),
+    showStart: isStringBoolean(searchParams.get('showStart')),
   };
 }
 

apps/client/src/features/operator/status-bar/StatusBar.module.scss

@@ -3,15 +3,12 @@
   top: 0;
   width: 100%;
   z-index: $zindex-floating;
-
   background-color: $gray-1350;
-  border-bottom: 1px solid $white-10;
-  box-shadow: $large-top-drawer-shadow;
 }
 
 .timers {
-  padding-block: 0.75rem 0.5rem;
-  padding-inline: 1rem;
+  padding-block: 1rem 0.5rem;
+  padding-inline: 1rem 0.5rem;
 
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -20,33 +17,22 @@
 
 .runningTimer {
   grid-area: timers;
-  display: flex;
-  flex-direction: column;
   justify-self: center;
-  color: $muted-gray;
+
+  :nth-child(2) {
+    font-size: 2.5rem;
+    line-height: 1.2;
+  }
 }
 
 .timeNow {
   grid-area: clock;
-  display: flex;
-  flex-direction: column;
   justify-self: right;
-}
 
-.label {
-  font-size: calc(1rem - 2px);
-  color: $gray-700;
-  line-height: 0.9em;
-}
-
-.timer {
-  font-size: 1.5rem;
-  letter-spacing: 0.5px;
-  line-height: 1.5;
-}
-
-.active {
-  color: $ui-white;
+  :nth-child(2) {
+    font-size: 2.5rem;
+    line-height: 1.2;
+  }
 }
 
 .progressOverride {

apps/client/src/features/operator/status-bar/StatusBarTimers.tsx

@@ -1,33 +1,12 @@
-import { isPlaybackActive } from 'ontime-utils';
+import { ClockOverview, TimerOverview } from '../../overview/composite/TimeElements';
 
-import { useClock, useTimer } from '../../../common/hooks/useSocket';
-import { cx } from '../../../common/utils/styleUtils';
-import ClockTime from '../../viewers/common/clock-time/ClockTime';
-import RunningTime from '../../viewers/common/running-time/RunningTime';
-
-import styles from './StatusBar.module.scss';
+import style from './StatusBar.module.scss';
 
 export default function StatusBarTimers() {
-  const timer = useTimer();
-  const { clock } = useClock();
-
-  const playbackActive = isPlaybackActive(timer.playback);
-
   return (
-    <div className={styles.timers}>
-      <div className={styles.runningTimer}>
-        <span className={styles.label}>Running timer</span>
-        <RunningTime
-          className={cx([styles.timer, playbackActive && styles.active])}
-          value={timer.current}
-          hideLeadingZero
-        />
-      </div>
-
-      <div className={styles.timeNow}>
-        <span className={styles.label}>Time now</span>
-        <ClockTime className={styles.timer} value={clock} />
-      </div>
+    <div className={style.timers}>
+      <TimerOverview className={style.runningTimer} />
+      <ClockOverview className={style.timeNow} />
     </div>
   );
 }

apps/client/src/features/overview/composite/TimeElements.module.scss

@@ -66,4 +66,4 @@
   color: $active-indicator;
   font-size: calc(1rem - 2px);
   text-align: right;
-}
+}

apps/client/src/features/overview/composite/TimeElements.tsx

@@ -1,21 +1,29 @@
 import { useMemo } from 'react';
-import { TbCalendar, TbCalendarClock, TbCalendarDown, TbCalendarStar, TbFlagDown, TbFlagStar } from 'react-icons/tb';
-import { isOntimeBlock, OntimeBlock, OntimeEvent, TimerType } from 'ontime-types';
+import {
+  TbCalendarClock,
+  TbCalendarPin,
+  TbCalendarStar,
+  TbFlagPin,
+  TbFlagStar,
+  TbFolderPin,
+  TbFolderStar,
+} from 'react-icons/tb';
+import { OntimeEvent, OntimeGroup, TimerPhase, TimerType } from 'ontime-types';
 import { isPlaybackActive, millisToString } from 'ontime-utils';
 
 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import {
   useClock,
-  useCurrentBlockId,
+  useCurrentGroupId,
   useNextFlag,
-  useRuntimeOverview,
+  useRundownOverview,
   useRuntimePlaybackOverview,
   useTimer,
 } from '../../../common/hooks/useSocket';
 import { useEntry } from '../../../common/hooks-query/useRundown';
 import { getOffsetState, getOffsetText } from '../../../common/utils/offset';
 import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
-import { formatTime, useTimeUntilStart } from '../../../common/utils/time';
+import { formatTime } from '../../../common/utils/time';
 import { calculateEndAndDaySpan, formattedTime } from '../overview.utils';
 
 import { OverUnder, TimeColumn } from './TimeLayout';
@@ -23,7 +31,7 @@ import { OverUnder, TimeColumn } from './TimeLayout';
 import style from './TimeElements.module.scss';
 
 export function StartTimes() {
-  const { plannedEnd, plannedStart, actualStart, expectedEnd } = useRuntimeOverview();
+  const { plannedEnd, plannedStart, actualStart, expectedEnd } = useRundownOverview();
 
   const plannedStartText = plannedStart === null ? timerPlaceholder : formatTime(plannedStart);
 
@@ -36,7 +44,7 @@ export function StartTimes() {
       <div className={style.row}>
         <span className={style.label}>Start</span>
         <div className={style.labelledElement}>
-          <Tooltip text='Planned start time' render={<TbCalendar className={style.icon} />} />
+          <Tooltip text='Planned start time' render={<TbCalendarPin className={style.icon} />} />
           <span className={cx([style.time, plannedStart === null && style.muted])}>{plannedStartText}</span>
         </div>
         <div className={style.labelledElement}>
@@ -47,7 +55,7 @@ export function StartTimes() {
       <div className={style.row}>
         <span className={style.label}>End</span>
         <div className={style.labelledElement}>
-          <Tooltip text='Planned end time' render={<TbCalendar className={style.icon} />} />
+          <Tooltip text='Planned end time' render={<TbCalendarPin className={style.icon} />} />
           {maybePlannedDaySpan > 0 ? (
             <Tooltip
               text={`Event spans over ${maybePlannedDaySpan + 1} days`}
@@ -88,50 +96,31 @@ export function MetadataTimes() {
   );
 }
 
+//TODO: there a some things here we still need to think about, mainly what to do whit the planed group duration in relation to the events
 function GroupTimes() {
-  const { blockStartedAt, clock, blockExpectedEnd } = useRuntimePlaybackOverview();
-  const { currentBlockId } = useCurrentBlockId();
-  const entry = useEntry(currentBlockId);
+  const { clock, groupExpectedEnd } = useRuntimePlaybackOverview();
+  const { currentGroupId } = useCurrentGroupId();
+  const group = useEntry(currentGroupId) as OntimeGroup | null;
 
-  if (!currentBlockId) {
-    return (
-      <div className={style.metadataRow}>
-        <span className={style.label}>Group</span>
-        <div className={style.labelledElement}>
-          <Tooltip text='Time to scheduled group end' render={<TbCalendarDown className={style.icon} />} />
-          <span className={cx([style.time, style.muted])}>{timerPlaceholder}</span>
-        </div>
-        <div className={style.labelledElement}>
-          <Tooltip text='Time to expected group end' render={<TbCalendarStar className={style.icon} />} />
-          <span className={cx([style.time, style.muted])}>{timerPlaceholder}</span>
-        </div>
-      </div>
-    );
-  }
+  // the group end time dose not encode any day offsets
+  const plannedGroupEnd = group && group.timeStart !== null ? group.timeStart + group.duration - clock : null;
+  const plannedTimeUntilGroupEnd = formattedTime(plannedGroupEnd, 3, TimerType.CountDown);
 
-  const remainingBlockDuration = (() => {
-    if (blockStartedAt === null || !entry) return timerPlaceholder;
-    if (!isOntimeBlock(entry)) return timerPlaceholder;
-    return formattedTime(blockStartedAt + entry.duration - clock, 3, TimerType.CountDown);
-  })();
+  const expectedGroupEnd = groupExpectedEnd !== null ? groupExpectedEnd - clock : null;
+  const expectedTimeUntilGroupEnd = formattedTime(expectedGroupEnd, 3, TimerType.CountDown);
 
-  const timeUntilBlockEnd = (() => {
-    if (blockExpectedEnd === null) return timerPlaceholder;
-    return formattedTime(blockExpectedEnd - clock, 3, TimerType.CountDown);
-  })();
-
-  const groupTitle = (entry as OntimeBlock | null)?.title || 'Group';
+  const groupTitle = group?.title ?? null;
 
   return (
     <div className={style.metadataRow}>
-      <span className={style.labelTitle}>{groupTitle}</span>
+      <span className={groupTitle ? style.labelTitle : style.label}>{`${groupTitle ? groupTitle : 'Group'} `}</span>
       <div className={style.labelledElement}>
-        <Tooltip text='Time to scheduled group end' render={<TbCalendarDown className={style.icon} />} />
-        <span className={cx([style.time, blockStartedAt === null && style.muted])}>{remainingBlockDuration}</span>
+        <Tooltip text='Time to planned group end' render={<TbFolderPin className={style.icon} />} />
+        <span className={cx([style.time, !group && style.muted])}>{plannedTimeUntilGroupEnd}</span>
       </div>
       <div className={style.labelledElement}>
-        <Tooltip text='Time to expected group end' render={<TbCalendarStar className={style.icon} />} />
-        <span className={cx([style.time, blockExpectedEnd === null && style.muted])}>{timeUntilBlockEnd}</span>
+        <Tooltip text='Time to expected group end' render={<TbFolderStar className={style.icon} />} />
+        <span className={cx([style.time, groupExpectedEnd === null && style.muted])}>{expectedTimeUntilGroupEnd}</span>
       </div>
     </div>
   );
@@ -139,50 +128,31 @@ function GroupTimes() {
 
 function FlagTimes() {
   const { clock } = useClock();
-  const { nextFlag } = useNextFlag();
-  const entry = useEntry(nextFlag?.id ?? null);
+  const { id, expectedStart } = useNextFlag();
+  const entry = useEntry(id) as OntimeEvent | null;
 
-  // TODO(v4): can we make a good approximation of time until next flag?
-  const timeUntil = useTimeUntilStart({
-    timeStart: nextFlag?.start ?? 0,
-    delay: 0,
-    dayOffset: 0,
-    totalGap: 0,
-    isLinkedToLoaded: true,
-  });
+  const plannedFlagStart = entry ? entry.timeStart - clock : null;
+  const plannedTimeUntilDisplay = formattedTime(plannedFlagStart, 3, TimerType.CountDown);
 
-  if (!nextFlag) {
-    return (
-      <div className={style.metadataRow}>
-        <span className={style.label}>Flag</span>
-        <div className={style.labelledElement}>
-          <Tooltip text='Time to next flag scheduled start' render={<TbFlagDown className={style.icon} />} />
-          <span className={cx([style.time, style.muted])}>{timerPlaceholder}</span>
-        </div>
-        <div className={style.labelledElement}>
-          <Tooltip text='Time to next flag expected start' render={<TbFlagStar className={style.icon} />} />
-          <span className={cx([style.time, style.muted])}>{timerPlaceholder}</span>
-        </div>
-      </div>
-    );
-  }
+  const expectedTimeUntil = expectedStart !== null ? expectedStart - clock : null;
+  const expectedTimeUntilDisplay = formattedTime(expectedTimeUntil, 3, TimerType.CountDown);
 
-  const muted = nextFlag === null;
-  const flagTitle = (entry as OntimeEvent | null)?.title || 'Flag';
-  const timeToNextFlag = nextFlag.start - clock;
-  const display = millisToString(timeToNextFlag, { fallback: timerPlaceholder });
-  const timeUntilDisplay = millisToString(timeUntil, { fallback: timerPlaceholder });
+  const title = entry?.title ?? null;
 
   return (
     <div className={style.metadataRow}>
-      <span className={cx([style.labelTitle])}>{flagTitle}</span>
+      <span className={title ? style.labelTitle : style.label}>{`${title ? title : 'Flag'} `}</span>
       <div className={style.labelledElement}>
-        <Tooltip text='Time to next flag scheduled start' render={<TbFlagDown className={style.icon} />} />
-        <span className={cx([style.time])}>{display}</span>
+        <Tooltip text='Time to next flag planned start' render={<TbFlagPin className={style.icon} />} />
+        <span data-testid='flag-plannedStart' className={cx([style.time, !entry && style.muted])}>
+          {plannedTimeUntilDisplay}
+        </span>
       </div>
       <div className={style.labelledElement}>
         <Tooltip text='Time to next flag expected start' render={<TbFlagStar className={style.icon} />} />
-        <span className={cx([style.time, muted && style.muted])}>{timeUntilDisplay}</span>
+        <span data-testid='flag-expectedStart' className={cx([style.time, expectedTimeUntil === null && style.muted])}>
+          {expectedTimeUntilDisplay}
+        </span>
       </div>
     </div>
   );
@@ -194,30 +164,36 @@ export function ProgressOverview() {
   const current = selectedEventIndex !== null ? selectedEventIndex + 1 : enDash;
   const progressText = numEvents ? `${current} of ${numEvents || enDash}` : enDash;
 
-  return <TimeColumn label='Progress' value={progressText} muted={selectedEventIndex === null} />;
+  return <TimeColumn label='Progress' value={progressText} state={selectedEventIndex === null ? 'muted' : 'active'} />;
 }
 
 export function OffsetOverview() {
   const { offset, playback } = useRuntimePlaybackOverview();
 
   const isPlaying = isPlaybackActive(playback);
-  const correctedOffset = offset * -1;
-  const offsetState = getOffsetState(offset);
-  const offsetText = getOffsetText(isPlaying ? correctedOffset : null);
+  const offsetState = getOffsetState(isPlaying ? offset : null);
+  const offsetText = getOffsetText(isPlaying ? offset : null);
 
   return <OverUnder state={offsetState} value={offsetText} testId='offset' />;
 }
 
-export function ClockOverview() {
+export function ClockOverview({ className }: { className?: string }) {
   const { clock } = useClock();
 
-  return <TimeColumn label='Time now' value={formattedTime(clock)} />;
+  return <TimeColumn label='Time now' value={formattedTime(clock)} className={className} />;
 }
 
-export function TimerOverview() {
-  const { current } = useTimer();
+export function TimerOverview({ className }: { className?: string }) {
+  const timer = useTimer();
 
-  const display = millisToString(current, { fallback: timerPlaceholder });
+  const isWaiting = timer.phase === TimerPhase.Pending;
+  const title = isWaiting ? 'Count to start' : 'Running timer';
+  const display = millisToString(isWaiting ? timer.secondaryTimer : timer.current, { fallback: timerPlaceholder });
+  const timerState = (() => {
+    if (isWaiting) return 'waiting';
+    if (timer.current === null) return 'muted';
+    return 'active';
+  })();
 
-  return <TimeColumn label='Running timer' value={display} muted={current === null} />;
+  return <TimeColumn label={title} value={display} state={timerState} className={className} />;
 }

apps/client/src/features/overview/composite/TimeLayout.module.scss

@@ -9,14 +9,11 @@
   letter-spacing: 0.5px;
   min-width: 5em;
   font-variant-numeric: tabular-nums;
+  color: $ui-white;
 
   &::after {
     content: '\200b';
   }
-
-  &.muted {
-    color: $muted-gray;
-  }
 }
 
 .column {
@@ -32,7 +29,12 @@
     gap: 0.25rem;
   }
 
-  &[data-state="over"] {
+  &[data-state='waiting'] {
+    .label {
+      color: $ontime-roll;
+    }
+  }
+  &[data-state='over'] {
     .label .over {
       color: $playback-over;
     }
@@ -41,7 +43,7 @@
     }
   }
 
-  &[data-state="under"] {
+  &[data-state='under'] {
     .label .under {
       color: $playback-under;
     }
@@ -50,7 +52,7 @@
     }
   }
 
-  &[data-state="muted"] {
+  &[data-state='muted'] {
     .clock {
       color: $muted-gray;
     }

apps/client/src/features/overview/composite/TimeLayout.tsx

@@ -5,17 +5,17 @@ import style from './TimeLayout.module.scss';
 interface TimeLayoutProps {
   label: string;
   value: string;
-  muted?: boolean;
+  state?: 'muted' | 'waiting' | 'active';
   daySpan?: number;
   className?: string;
   testId?: string;
 }
 
-export function TimeColumn({ label, value, muted, className, testId }: TimeLayoutProps) {
+export function TimeColumn({ label, value, state = 'active', className, testId }: TimeLayoutProps) {
   return (
-    <div className={style.column}>
+    <div className={cx([style.column, className])} data-state={state}>
       <span className={style.label}>{label}</span>
-      <span className={cx([style.clock, muted && style.muted, className])} data-testid={testId}>
+      <span className={style.clock} data-testid={testId}>
         {value}
       </span>
     </div>

apps/client/src/features/rundown/Rundown.tsx

@@ -16,9 +16,8 @@ import {
   type EntryId,
   type MaybeString,
   type Rundown,
-  isOntimeBlock,
   isOntimeEvent,
-  OntimeBlock,
+  isOntimeGroup,
   OntimeEntry,
   Playback,
   SupportedEntry,
@@ -26,9 +25,9 @@ import {
 import {
   getFirstNormal,
   getLastNormal,
-  getNextBlockNormal,
+  getNextGroupNormal,
   getNextNormal,
-  getPreviousBlockNormal,
+  getPreviousGroupNormal,
   getPreviousNormal,
   reorderArray,
 } from 'ontime-utils';
@@ -42,9 +41,9 @@ import { AppMode, sessionKeys } from '../../ontimeConfig';
 
 import QuickAddButtons from './entry-editor/quick-add-buttons/QuickAddButtons';
 import QuickAddInline from './entry-editor/quick-add-cursor/QuickAddInline';
-import BlockEnd from './rundown-block/BlockEnd';
-import RundownBlock from './rundown-block/RundownBlock';
-import { makeRundownMetadata, makeSortableList } from './rundown.utils';
+import RundownGroup from './rundown-group/RundownGroup';
+import RundownGroupEnd from './rundown-group/RundownGroupEnd';
+import { canDrop, makeRundownMetadata, makeSortableList } from './rundown.utils';
 import RundownEmpty from './RundownEmpty';
 import { useEventSelection } from './useEventSelection';
 
@@ -128,7 +127,7 @@ export default function Rundown({ data }: RundownProps) {
     [addEntry],
   );
 
-  const selectBlock = useCallback(
+  const selectGroup = useCallback(
     (cursor: string | null, direction: 'up' | 'down') => {
       if (order.length < 1) {
         return;
@@ -138,7 +137,7 @@ export default function Rundown({ data }: RundownProps) {
         // there is no cursor, we select the first or last depending on direction
         const selected = direction === 'up' ? getLastNormal(entries, order) : getFirstNormal(entries, order);
 
-        if (isOntimeBlock(selected)) {
+        if (isOntimeGroup(selected)) {
           setSelectedEvents({ id: selected.id, selectMode: 'click', index: direction === 'up' ? order.length : 0 });
           return;
         }
@@ -152,8 +151,8 @@ export default function Rundown({ data }: RundownProps) {
       // otherwise we select the next or previous
       const selected =
         direction === 'up'
-          ? getPreviousBlockNormal(entries, order, newCursor)
-          : getNextBlockNormal(entries, order, newCursor);
+          ? getPreviousGroupNormal(entries, order, newCursor)
+          : getNextGroupNormal(entries, order, newCursor);
 
       if (selected.entry !== null && selected.index !== null) {
         setSelectedEvents({ id: selected.entry.id, selectMode: 'click', index: selected.index });
@@ -189,11 +188,11 @@ export default function Rundown({ data }: RundownProps) {
   );
 
   /**
-   * Checks whether a block is collapsed
+   * Checks whether a group is collapsed
    */
   const getIsCollapsed = useCallback(
-    (blockId: EntryId): boolean => {
-      return Boolean(collapsedGroups.find((id) => id === blockId));
+    (groupId: EntryId): boolean => {
+      return Boolean(collapsedGroups.find((id) => id === groupId));
     },
     [collapsedGroups],
   );
@@ -224,10 +223,10 @@ export default function Rundown({ data }: RundownProps) {
         return;
       }
 
-      const movedIntoBlockId = await move(cursor, direction);
-      // if we are moving into a block, we need to make sure it is expanded
-      if (movedIntoBlockId) {
-        handleCollapseGroup(false, movedIntoBlockId);
+      const movedIntoGroupId = await move(cursor, direction);
+      // if we are moving into a group, we need to make sure it is expanded
+      if (movedIntoGroupId) {
+        handleCollapseGroup(false, movedIntoGroupId);
       }
     },
     [handleCollapseGroup, move],
@@ -238,8 +237,8 @@ export default function Rundown({ data }: RundownProps) {
     ['alt + ArrowDown', () => selectEntry(cursor, 'down'), { preventDefault: true, usePhysicalKeys: true }],
     ['alt + ArrowUp', () => selectEntry(cursor, 'up'), { preventDefault: true, usePhysicalKeys: true }],
 
-    ['alt + shift + ArrowDown', () => selectBlock(cursor, 'down'), { preventDefault: true, usePhysicalKeys: true }],
-    ['alt + shift + ArrowUp', () => selectBlock(cursor, 'up'), { preventDefault: true, usePhysicalKeys: true }],
+    ['alt + shift + ArrowDown', () => selectGroup(cursor, 'down'), { preventDefault: true, usePhysicalKeys: true }],
+    ['alt + shift + ArrowUp', () => selectGroup(cursor, 'up'), { preventDefault: true, usePhysicalKeys: true }],
 
     ['alt + mod + ArrowDown', () => moveEntry(cursor, 'down'), { preventDefault: true, usePhysicalKeys: true }],
     ['alt + mod + ArrowUp', () => moveEntry(cursor, 'up'), { preventDefault: true, usePhysicalKeys: true }],
@@ -261,12 +260,12 @@ export default function Rundown({ data }: RundownProps) {
 
     [
       'alt + G',
-      () => insertAtId({ type: SupportedEntry.Block }, cursor),
+      () => insertAtId({ type: SupportedEntry.Group }, cursor),
       { preventDefault: true, usePhysicalKeys: true },
     ],
     [
       'alt + shift + G',
-      () => insertAtId({ type: SupportedEntry.Block }, cursor, true),
+      () => insertAtId({ type: SupportedEntry.Group }, cursor, true),
       { preventDefault: true, usePhysicalKeys: true },
     ],
 
@@ -335,22 +334,25 @@ export default function Rundown({ data }: RundownProps) {
       return;
     }
 
+    // prevent dropping a group inside another
+    if (
+      active.data.current?.type === SupportedEntry.Group &&
+      !canDrop(over.data.current?.type, over.data.current?.parent)
+    ) {
+      return;
+    }
+
     const fromIndex = active.data.current?.sortable.index;
     const toIndex = over.data.current?.sortable.index;
 
-    // we keep a copy of the state as a hack to handle inconsistencies between dnd-kit and async store updates
-    setSortableData((currentEntries) => {
-      return reorderArray(currentEntries, fromIndex, toIndex);
-    });
-
     let destinationId = over.id as EntryId;
     let order: 'before' | 'after' | 'insert' = fromIndex < toIndex ? 'after' : 'before';
 
     /**
-     * We need to specially handle the end blocks
-     * Dragging before and end block will add the entry to the end of the block
-     * Dragging after an end block will add the event after the block itself
-     * Dragging to the top of a block either place before first entry or if no entries do insert
+     * We need to specially handle the end-group
+     * Dragging before a end-group will add the entry to the end of the group
+     * Dragging after a end-group will add the event after the group itself
+     * Dragging to the top of a group either place before first entry or if no entries do insert
      */
     if (destinationId.startsWith('end-')) {
       destinationId = destinationId.replace('end-', '');
@@ -359,44 +361,53 @@ export default function Rundown({ data }: RundownProps) {
         order = 'insert';
       }
     } else {
-      const block = data.entries[destinationId];
-      if (isOntimeBlock(block) && order === 'after') {
-        if (block.entries.length === 0) order = 'insert';
+      const group = data.entries[destinationId];
+      if (isOntimeGroup(group) && order === 'after') {
+        if (group.entries.length === 0) order = 'insert';
         else {
-          destinationId = block.entries[0];
+          destinationId = group.entries[0];
           order = 'before';
         }
       }
     }
-    reorderEntry(active.id as EntryId, destinationId, order);
+
+    // keep copy of the current state in case we need to revert
+    const currentEntries = structuredClone(sortableData);
+    // we keep a copy of the state as a hack to handle inconsistencies between dnd-kit and async store updates
+    setSortableData((currentEntries) => {
+      return reorderArray(currentEntries, fromIndex, toIndex);
+    });
+    reorderEntry(active.id as EntryId, destinationId, order).catch((_) => {
+      setSortableData(currentEntries);
+    });
   };
 
   /**
-   * When we drag a block, we force collapse it
-   * This avoids strange scenarios like dropping a block inside itself
+   * When we drag a group, we force collapse it
+   * This avoids strange scenarios like dropping a group inside itself
    */
-  const collapseDraggedBlocks = (event: DragStartEvent) => {
-    const isBlock = event.active.data.current?.type === 'block';
-    if (isBlock) {
+  const collapseDraggedGroups = (event: DragStartEvent) => {
+    const isGroup = event.active.data.current?.type === SupportedEntry.Group;
+    if (isGroup) {
       handleCollapseGroup(true, event.active.id as EntryId);
     }
   };
 
   /**
-   * When we drag over a block, we expand it if it is collapsed
+   * When we drag over a group, we expand it if it is collapsed
    */
-  const expandOverBlock = (event: DragOverEvent) => {
-    // if we are dragging a block, the drop operation is invalid so we dont expand
-    if (event.active.data.current?.type === 'block') {
+  const expandOverGroup = (event: DragOverEvent) => {
+    // if we are dragging a group, the drop operation is invalid so we dont expand
+    if (event.active.data.current?.type === 'group') {
       return;
     }
-    if (event.over?.data.current?.type !== 'block') {
+    if (event.over?.data.current?.type !== 'group') {
       return;
     }
-    const blockId = event.over?.id as EntryId;
-    const isCollapsed = getIsCollapsed(blockId);
+    const groupId = event.over?.id as EntryId;
+    const isCollapsed = getIsCollapsed(groupId);
     if (isCollapsed) {
-      handleCollapseGroup(false, blockId);
+      handleCollapseGroup(false, groupId);
     }
   };
 
@@ -416,39 +427,39 @@ export default function Rundown({ data }: RundownProps) {
     <div className={style.rundownContainer} ref={scrollRef} data-testid='rundown'>
       <DndContext
         onDragEnd={handleOnDragEnd}
-        onDragStart={collapseDraggedBlocks}
-        onDragOver={expandOverBlock}
+        onDragStart={collapseDraggedGroups}
+        onDragOver={expandOverGroup}
         sensors={sensors}
         collisionDetection={closestCenter}
       >
         <SortableContext items={sortableData} strategy={verticalListSortingStrategy}>
           <div className={style.list}>
-            {isEditMode && <QuickAddButtons previousEventId={null} parentBlock={null} />}
+            {isEditMode && <QuickAddButtons previousEventId={null} parentGroup={null} />}
             {sortableData.map((entryId, index) => {
-              const isFirst = index === 0;
-              const isLast = index === sortableData.length - 1;
-
-              // the entry might be a pseudo block-end which does not generate metadata and should not be processed
+              // the entry might be a pseudo end-group which does not generate metadata and should not be processed
               if (entryId.startsWith('end-')) {
                 const parentId = entryId.split('end-')[1];
-                const isBlockCollapsed = getIsCollapsed(parentId);
+                const isGroupCollapsed = getIsCollapsed(parentId);
 
-                if (isBlockCollapsed) {
+                if (isGroupCollapsed) {
                   return null;
-                } else {
-                  const parentColour = (entries[parentId] as OntimeBlock | undefined)?.colour;
-                  // if the previous element is selected, it will have its own QuickAddInline
-                  // we use thisId instead of previousEntryId because the block end does not process
-                  // and it does not cause the reassignment of the iteration id to the previous entry
-                  return (
-                    <Fragment key={entryId}>
-                      {isEditMode && rundownMetadata.groupEntries === 0 && (
-                        <QuickAddButtons previousEventId={null} parentBlock={parentId} backgroundColor={parentColour} />
-                      )}
-                      <BlockEnd key={entryId} id={entryId} colour={parentColour} />
-                    </Fragment>
-                  );
                 }
+
+                // if the previous element is selected, it will have its own QuickAddInline
+                // we use thisId instead of previousEntryId because the end-group does not process
+                // and it does not cause the reassignment of the iteration id to the previous entry
+                return (
+                  <Fragment key={entryId}>
+                    {isEditMode && rundownMetadata.groupEntries === 0 && (
+                      <QuickAddButtons
+                        previousEventId={null}
+                        parentGroup={parentId}
+                        backgroundColor={rundownMetadata.groupColour}
+                      />
+                    )}
+                    <RundownGroupEnd key={entryId} id={entryId} colour={rundownMetadata.groupColour} />
+                  </Fragment>
+                );
               }
 
               // we iterate through a stateful copy of order to make the dnd operations smoother
@@ -456,11 +467,12 @@ export default function Rundown({ data }: RundownProps) {
               // instead of writing all the logic guards, we simply short circuit rendering here
               const entry = entries[entryId];
               if (!entry) return null;
+
               rundownMetadata = process(entry);
 
               // if the entry has a parent, and it is collapsed, render nothing
               if (
-                entry.type !== SupportedEntry.Block &&
+                entry.type !== SupportedEntry.Group &&
                 rundownMetadata.groupId !== null &&
                 getIsCollapsed(rundownMetadata.groupId)
               ) {
@@ -471,23 +483,40 @@ export default function Rundown({ data }: RundownProps) {
               const hasCursor = entry.id === cursor;
 
               /**
-               * Outside a block, the value will be undefined
+               * Outside a group, the value will be undefined
                * If the colour is empty string ''
-               * ie: we are inside a block, but there is no defined colour
+               * ie: we are inside a group, but there is no defined colour
                * we default to $gray-500 #9d9d9d
                */
-              const blockColour = rundownMetadata.groupColour === '' ? '#9d9d9d' : rundownMetadata.groupColour;
+              const groupColour = rundownMetadata.groupColour === '' ? '#9d9d9d' : rundownMetadata.groupColour;
+
+              const isFirst = index === 0;
+              const isLast = entryId === order.at(-1);
+
+              /**
+               * We need to provide the parent ID for the QuickAdd components
+               * This should be different depending on whether we are adding before or after an element
+               * - when adding before, we need to avoid a group referencing itself as the parent
+               * - when adding after, we can use the group ID directly to insert at the top of the group
+               */
+
+              const parentIdForBefore =
+                rundownMetadata.thisId !== rundownMetadata.groupId ? rundownMetadata.groupId : null;
+              const parentIdForAfter = rundownMetadata.groupId;
 
               return (
                 <Fragment key={entry.id}>
+                  {/**
+                   * Before the entry
+                   * - edit mode only
+                   * - if there is a cursor
+                   * - if it is not the first entry (the buttons would be there)
+                   */}
                   {isEditMode && hasCursor && !isFirst && (
-                    <QuickAddInline
-                      previousEventId={rundownMetadata.previousEntryId}
-                      parentBlock={rundownMetadata.thisId !== rundownMetadata.groupId ? rundownMetadata.groupId : null}
-                    />
+                    <QuickAddInline previousEventId={rundownMetadata.previousEntryId} parentGroup={parentIdForBefore} />
                   )}
-                  {isOntimeBlock(entry) ? (
-                    <RundownBlock
+                  {isOntimeGroup(entry) ? (
+                    <RundownGroup
                       data={entry}
                       hasCursor={hasCursor}
                       collapsed={getIsCollapsed(entry.id)}
@@ -497,7 +526,7 @@ export default function Rundown({ data }: RundownProps) {
                     <div
                       className={style.entryWrapper}
                       data-testid={`entry-${rundownMetadata.eventIndex}`}
-                      style={blockColour ? { '--user-bg': blockColour } : {}}
+                      style={groupColour ? { '--user-bg': groupColour } : {}}
                     >
                       {isOntimeEvent(entry) && (
                         <div className={style.entryIndex}>
@@ -525,14 +554,21 @@ export default function Rundown({ data }: RundownProps) {
                       </div>
                     </div>
                   )}
-                  {isEditMode && hasCursor && rundownMetadata.groupEntries !== 0 && !isLast && (
-                    <QuickAddInline previousEventId={entry.id} parentBlock={rundownMetadata.groupId} />
+                  {/**
+                   * After the entry
+                   * - edit mode only
+                   * - if there is a cursor
+                   * - if it is not the last entry (the buttons would be there)
+                   * - if the entry is not the group header
+                   */}
+                  {isEditMode && hasCursor && !isLast && (
+                    <QuickAddInline previousEventId={entry.id} parentGroup={parentIdForAfter} />
                   )}
                 </Fragment>
               );
             })}
             {isEditMode && (
-              <QuickAddButtons previousEventId={rundownMetadata.groupId ?? rundownMetadata.thisId} parentBlock={null} />
+              <QuickAddButtons previousEventId={rundownMetadata.groupId ?? rundownMetadata.thisId} parentGroup={null} />
             )}
             <div className={style.spacer} />
           </div>