refactor: improve connection handling

- only invalidate caches on reconnect
- add jitter to avoid overwhelming server and allow cache to stabilise
- prevent multiple reconnect timers

.github/workflows/build_docker.yml

@@ -37,32 +37,31 @@ jobs:
         run: pnpm build:docker
 
       - name: Docker Login
-        uses: docker/login-action@v2.1.0
+        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3.6.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Docker Setup Buildx
-        uses: docker/setup-buildx-action@v2.5.0
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
+
+      - name: Setup Docker metadata
+        id: meta
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/ontime
+          tags: |
+            type=semver,pattern=v{{version}}
+            type=semver,pattern=v{{major}}
+            type=raw,value=nightly,enable=${{ github.event.release.prerelease == true }}
 
       - name: Build and push stable release
-        if: github.event.release.prerelease == false
-        uses: docker/build-push-action@v4.0.0
+        uses: docker/build-push-action@263435318d21b8e681c14492fe198d362a7d2c83 # v6.18.0
         with:
           context: .
           file: ./Dockerfile
           platforms: linux/amd64,linux/arm64,linux/arm/v7
           # Push is a shorthand for --output=type=registry
           push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:latest
-
-      - name: Build and push pre-release
-        if: github.event.release.prerelease == true
-        uses: docker/build-push-action@v4.0.0
-        with:
-          context: .
-          file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
-          # Push is a shorthand for --output=type=registry
-          push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/ontime:${{ github.event.release.tag_name }} , ${{ secrets.DOCKERHUB_USERNAME }}/ontime:nightly
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

README.md

@@ -10,13 +10,15 @@
 <a href="https://www.buymeacoffee.com/cpvalente" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="32"></a>
 
 - Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-win64.exe">Windows</a>
-- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg">MacOS Arm</a>
-- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-x64.dmg">MacOS Intel</a>
-- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux.AppImage">Linux</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-arm64.dmg">macOS (Apple Silicon)</a>
+- Download for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-macOS-x64.dmg">macOS (Intel)</a>
+- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux-x86_64.AppImage">Linux (Intel / AMD 64-bit)</a>
+- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux-arm64.AppImage">Linux (ARM 64-bit, Raspberry Pi 4+)</a>
+- Download AppImage for <a href="https://github.com/cpvalente/ontime/releases/latest/download/ontime-linux-armv7l.AppImage">Linux (ARM 32-bit, older Raspberry Pi)</a>
 
 ... or
 - Get from <a href="https://hub.docker.com/r/getontime/ontime">Docker hub</a>
-- Install from <a href="https://www.npmjs.com/package/ontime">NPM</a>
+- Install from <a href="https://www.npmjs.com/package/@getontime/cli">NPM</a>
 - Install from <a href="https://formulae.brew.sh/cask/ontime">Homebrew</a>
 
 ## Need help?

apps/cli/package.json

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

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "4.3.1",
+  "version": "4.4.1",
   "private": true,
   "type": "module",
   "dependencies": {

apps/client/src/App.tsx

@@ -3,6 +3,9 @@ import { Tooltip } from '@base-ui/react/tooltip';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
+// apply global axios config defaults
+import './common/api/axios.config';
+
 import ErrorBoundary from './common/components/error-boundary/ErrorBoundary';
 import IdentifyOverlay from './common/components/identify-overlay/IdentifyOverlay';
 import { AppContextProvider } from './common/context/AppContext';

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

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

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

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

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

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

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

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

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

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

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

@@ -3,6 +3,8 @@ import { CustomFields, Rundown, RundownSummary } from 'ontime-types';
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
+import { axiosConfig } from './requestTimeouts';
 import { downloadBlob } from './utils';
 
 const excelPath = `${apiEntryUrl}/excel`;
@@ -11,10 +13,12 @@ const excelPath = `${apiEntryUrl}/excel`;
  * upload Excel file to server
  * @return string - file ID op the uploaded file
  */
-export async function upload(file: File): Promise<string[]> {
+export async function upload(file: File, requestOptions?: RequestOptions): Promise<string[]> {
   const formData = new FormData();
   formData.append('excel', file);
   const response = await axios.post(`${excelPath}/upload`, formData, {
+    signal: requestOptions?.signal,
+    timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
     headers: {
       'Content-Type': 'multipart/form-data',
     },
@@ -27,19 +31,31 @@ type PreviewSpreadsheetResponse = {
   customFields: CustomFields;
   summary: RundownSummary;
 };
-export async function importRundownPreview(options: ImportMap): Promise<PreviewSpreadsheetResponse> {
-  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(`${excelPath}/preview`, {
-    options,
-  });
+export async function importRundownPreview(
+  options: ImportMap,
+  requestOptions?: RequestOptions,
+): Promise<PreviewSpreadsheetResponse> {
+  const response: AxiosResponse<PreviewSpreadsheetResponse> = await axios.post(
+    `${excelPath}/preview`,
+    {
+      options,
+    },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
   return response.data;
 }
 
 /**
  * Downloads a xlsx representation of the rundown from the server
  */
-export async function downloadAsExcel(rundownId: string, fileName?: string) {
+export async function downloadAsExcel(rundownId: string, fileName?: string, requestOptions?: RequestOptions) {
   try {
     const response = await axios.get(`${excelPath}/${rundownId}/export`, {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
       responseType: 'blob',
     });
 

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

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

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@ import axios, { AxiosResponse } from 'axios';
 import { EntryId, OntimeEntry, OntimeEvent, ProjectRundownsList, Rundown, TransientEventPayload } from 'ontime-types';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
 
 type RundownId = string;
 const rundownPath = `${apiEntryUrl}/rundowns`;
@@ -11,16 +12,16 @@ const rundownPath = `${apiEntryUrl}/rundowns`;
 /**
  * HTTP request to fetch a list of existing rundowns
  */
-export async function fetchProjectRundownList(): Promise<ProjectRundownsList> {
-  const res = await axios.get(rundownPath);
+export async function fetchProjectRundownList(options?: RequestOptions): Promise<ProjectRundownsList> {
+  const res = await axios.get(rundownPath, { signal: options?.signal });
   return res.data;
 }
 
 /**
  * HTTP request to fetch all entries in the currently loaded rundown
  */
-export async function fetchCurrentRundown(): Promise<Rundown> {
-  const res = await axios.get(`${rundownPath}/current`);
+export async function fetchCurrentRundown(options?: RequestOptions): Promise<Rundown> {
+  const res = await axios.get(`${rundownPath}/current`, { signal: options?.signal });
   if (!isValidRundown(res.data)) {
     throw new Error('Invalid rundown payload');
   }

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

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

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

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

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

@@ -3,6 +3,8 @@ import { AuthenticationStatus, CustomFields, Rundown, RundownSummary } from 'ont
 import { ImportMap } from 'ontime-utils';
 
 import { apiEntryUrl } from './constants';
+import type { RequestOptions } from './requestOptions';
+import { axiosConfig } from './requestTimeouts';
 
 const sheetsPath = `${apiEntryUrl}/sheets`;
 
@@ -23,6 +25,7 @@ export const verifyAuthenticationStatus = async (): Promise<{
 export const requestConnection = async (
   file: File,
   sheetId: string,
+  requestOptions?: RequestOptions,
 ): Promise<{
   verification_url: string;
   user_code: string;
@@ -31,6 +34,8 @@ export const requestConnection = async (
   formData.append('client_secret', file);
 
   const response = await axios.post(`${sheetsPath}/${sheetId}/connect`, formData, {
+    signal: requestOptions?.signal,
+    timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
     headers: {
       'Content-Type': 'multipart/form-data',
     },
@@ -53,24 +58,50 @@ export const revokeAuthentication = async (): Promise<{ authenticated: Authentic
 export const previewRundown = async (
   sheetId: string,
   options: ImportMap,
+  requestOptions?: RequestOptions,
 ): Promise<{
   rundown: Rundown;
   customFields: CustomFields;
   summary: RundownSummary;
 }> => {
-  const response = await axios.post(`${sheetsPath}/${sheetId}/read`, { options });
+  const response = await axios.post(
+    `${sheetsPath}/${sheetId}/read`,
+    { options },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
   return response.data;
 };
 
-export const getWorksheetNames = async (sheetId: string): Promise<string[]> => {
-  const response: AxiosResponse<string[]> = await axios.post(`${sheetsPath}/${sheetId}/worksheets`);
+export const getWorksheetNames = async (sheetId: string, requestOptions?: RequestOptions): Promise<string[]> => {
+  const response: AxiosResponse<string[]> = await axios.post(
+    `${sheetsPath}/${sheetId}/worksheets`,
+    undefined,
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
   return response.data;
 };
 
 /**
  * HTTP request to upload the rundown to a google sheet
  */
-export const uploadRundown = async (sheetId: string, options: ImportMap): Promise<void> => {
-  const response = await axios.post(`${sheetsPath}/${sheetId}/write`, { options });
+export const uploadRundown = async (
+  sheetId: string,
+  options: ImportMap,
+  requestOptions?: RequestOptions,
+): Promise<void> => {
+  const response = await axios.post(
+    `${sheetsPath}/${sheetId}/write`,
+    { options },
+    {
+      signal: requestOptions?.signal,
+      timeout: requestOptions?.timeout ?? axiosConfig.longTimeout,
+    },
+  );
   return response.data;
 };

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

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

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

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

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

@@ -31,11 +31,12 @@
   outline: 0;
   cursor: default;
   padding-block: 0.5rem;
-  padding-inline: 1rem 2rem;
+  padding-inline: 1rem;
 
   display: flex;
-  gap: 0.5rem;
-  line-height: 1em;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
 
   svg {
     color: $gray-500;
@@ -69,6 +70,35 @@
   }
 }
 
+.item .iconStrong {
+  color: $ui-white;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  line-height: 1.2;
+}
+
+.description {
+  color: $gray-400;
+  font-size: calc(1rem - 2px);
+  line-height: 1.3;
+}
+
+.shortcut {
+  color: $gray-500;
+  font-size: calc(1rem - 4px);
+  letter-spacing: 0.02em;
+}
+
 .separator {
   margin: 0.25rem 0.75rem;
   height: 1px;

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

@@ -8,9 +8,11 @@ type DropdownMenuItemDivider = { type: 'divider' };
 type DropdownMenuItem = {
   type: 'item' | 'destructive';
   label: string;
+  description?: string;
   icon?: IconType;
   disabled?: boolean;
   onClick: () => void;
+  shortcut?: string;
 };
 
 export type DropdownMenuOption = DropdownMenuItemDivider | DropdownMenuItem;
@@ -38,8 +40,14 @@ export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChil
                   disabled={item.disabled}
                   data-type={item.type}
                 >
-                  {item.icon && <item.icon />}
-                  {item.label}
+                  <span className={style.content}>
+                    <span className={style.label}>
+                      {item.icon && <item.icon />}
+                      {item.label}
+                    </span>
+                    {item.description && <span className={style.description}>{item.description}</span>}
+                  </span>
+                  {item.shortcut && <span className={style.shortcut}>{item.shortcut}</span>}
                 </BaseMenu.Item>
               );
             })}
@@ -75,8 +83,14 @@ export function PositionedDropdownMenu({ items, isOpen, position, onClose }: Pos
               }
               return (
                 <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
-                  {item.icon && <item.icon />}
-                  {item.label}
+                  <span className={style.content}>
+                    <span className={style.label}>
+                      {item.icon && <item.icon />}
+                      {item.label}
+                    </span>
+                    {item.description && <span className={style.description}>{item.description}</span>}
+                  </span>
+                  {item.shortcut && <span className={style.shortcut}>{item.shortcut}</span>}
                 </BaseMenu.Item>
               );
             })}

apps/client/src/common/components/scroll-area/ScrollArea.module.scss

@@ -0,0 +1,56 @@
+@use '../../../theme/ontimeColours' as *;
+@use '../../../theme/ontimeStyles' as *;
+
+// copied from index.scss
+$track-color: $white-1;
+$thumb-color: $white-20;
+$thumb-color-hover: $white-60;
+
+.root {
+  position: relative;
+  overflow: hidden;
+}
+
+.viewport {
+  height: 100%;
+  width: 100%;
+  overscroll-behavior: contain;
+}
+
+.scrollbar {
+  background: transparent;
+  opacity: 0;
+  transition: opacity 150ms;
+
+  &[data-orientation='vertical'] {
+    width: 6px;
+  }
+
+  &[data-orientation='horizontal'] {
+    height: 6px;
+  }
+
+  &[data-orientation='horizontal'][data-has-overflow-x] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &[data-scrolling] {
+    transition-duration: 0ms;
+  }
+
+  &[data-hovering],
+  &[data-scrolling] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.thumb {
+  background: $thumb-color;
+  border-radius: 2px;
+
+  &:hover {
+    background: $thumb-color-hover;
+  }
+}

apps/client/src/common/components/scroll-area/ScrollArea.tsx

@@ -0,0 +1,38 @@
+import { CSSProperties, PropsWithChildren, Ref } from 'react';
+import { ScrollArea } from '@base-ui/react/scroll-area';
+
+import { cx } from '../../utils/styleUtils';
+
+import style from './ScrollArea.module.scss';
+
+interface ScrollAreaProps {
+  className?: string;
+  viewportClassName?: string;
+  contentClassName?: string;
+  contentStyle?: CSSProperties;
+  ref?: Ref<HTMLDivElement>;
+  orientation?: 'vertical' | 'horizontal';
+}
+
+export default function StyledScrollArea({
+  className,
+  viewportClassName,
+  contentClassName,
+  contentStyle,
+  children,
+  ref,
+  orientation = 'vertical',
+}: PropsWithChildren<ScrollAreaProps>) {
+  return (
+    <ScrollArea.Root className={cx([style.root, className])}>
+      <ScrollArea.Viewport ref={ref} className={cx([style.viewport, viewportClassName])}>
+        <ScrollArea.Content className={contentClassName} style={contentStyle}>
+          {children}
+        </ScrollArea.Content>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar className={style.scrollbar} orientation={orientation}>
+        <ScrollArea.Thumb className={style.thumb} />
+      </ScrollArea.Scrollbar>
+    </ScrollArea.Root>
+  );
+}

apps/client/src/common/components/tag/Tag.tsx

@@ -1,7 +1,11 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 
 import style from './Tag.module.scss';
 
-export default function Tag({ children }: { children: ReactNode }) {
-  return <span className={style.tag}>{children}</span>;
+interface TagProps {
+  className?: string;
+}
+
+export default function Tag({ className, children }: PropsWithChildren<TagProps>) {
+  return <span className={`${style.tag} ${className || ''}`}>{children}</span>;
 }

apps/client/src/common/components/title-card/TitleCard.scss

@@ -16,6 +16,7 @@
 .title-card__title {
   color: var(--color-override, $viewer-color);
   padding-right: 1em;
+  min-height: 1.2em;
 }
 
 .title-card__placeholder {

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

@@ -11,7 +11,7 @@ import IconButton from '../buttons/IconButton';
 import Info from '../info/Info';
 
 import { ViewOption } from './viewParams.types';
-import { getURLSearchParamsFromObj } from './viewParams.utils';
+import { getPreservedSearchParams, getURLSearchParamsFromObj } from './viewParams.utils';
 import { useViewParamsEditorStore } from './viewParamsEditor.store';
 import { ViewParamsPresets } from './ViewParamsPresets';
 import ViewParamsSection from './ViewParamsSection';
@@ -25,17 +25,19 @@ interface EditFormDrawerProps {
 
 export default memo(ViewParamsEditor);
 function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
-  const [_, setSearchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const { data: viewSettings } = useViewSettings();
   const { isOpen, close } = useViewParamsEditorStore();
   const isSmallScreen = useIsSmallScreen();
 
+  const getPreservedParams = () => getPreservedSearchParams(searchParams, viewOptions);
+
   const handleClose = () => {
     close();
   };
 
   const resetParams = () => {
-    setSearchParams();
+    setSearchParams(getPreservedParams());
   };
 
   const onParamsFormSubmit = (formEvent: FormEvent<HTMLFormElement>) => {
@@ -43,6 +45,10 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
 
     const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
     const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
+    const preservedParams = getPreservedParams();
+    preservedParams.forEach((value, key) => {
+      newSearchParams.append(key, value);
+    });
     setSearchParams(newSearchParams);
 
     if (isSmallScreen) {

apps/client/src/common/components/view-params-editor/viewParams.utils.ts

@@ -191,3 +191,26 @@ export function getURLSearchParamsFromObj(paramsObj: ViewParamsObj, paramFields:
 
   return newSearchParams;
 }
+
+/**
+ * Extracts search params that are not managed by the view params editor
+ * @param currentParams - The current URL search params
+ * @param paramFields - The view options that define the managed parameters
+ * @returns A new URLSearchParams object with preserved params
+ */
+export function getPreservedSearchParams(currentParams: URLSearchParams, paramFields: ViewOption[]) {
+  const managedParamIds = new Set<string>();
+  paramFields.forEach((section) => {
+    section.options.forEach((option) => {
+      managedParamIds.add(option.id);
+    });
+  });
+
+  const preserved = new URLSearchParams();
+  currentParams.forEach((value, key) => {
+    if (!managedParamIds.has(key)) {
+      preserved.append(key, value);
+    }
+  });
+  return preserved;
+}

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

@@ -0,0 +1,24 @@
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+import { useEntryActions } from '../hooks/useEntryAction';
+
+type EntryActionsContextValue = ReturnType<typeof useEntryActions>;
+const EntryActionsContext = createContext<EntryActionsContextValue | null>(null);
+
+interface EntryActionsProviderProps extends PropsWithChildren {
+  actions: EntryActionsContextValue;
+}
+
+export function EntryActionsProvider({ children, actions }: EntryActionsProviderProps) {
+  return <EntryActionsContext.Provider value={actions}>{children}</EntryActionsContext.Provider>;
+}
+
+export function useEntryActionsContext(): EntryActionsContextValue {
+  const context = useContext(EntryActionsContext);
+
+  if (!context) {
+    throw new Error('useEntryActionsContext must be used within EntryActionsProvider');
+  }
+
+  return context;
+}

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

@@ -17,7 +17,7 @@ export default function useAppVersion() {
     refetch,
   } = useQuery({
     queryKey: APP_VERSION,
-    queryFn: getLatestVersion,
+    queryFn: ({ signal }) => getLatestVersion({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,

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

@@ -8,12 +8,9 @@ import { automationPlaceholderSettings } from '../models/AutomationSettings';
 export default function useAutomationSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: AUTOMATION,
-    queryFn: getAutomationSettings,
+    queryFn: ({ signal }) => getAutomationSettings({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt: number) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
   });
 
   return { data: data ?? automationPlaceholderSettings, status, isFetching, isError, refetch };

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

@@ -10,12 +10,9 @@ const placeholder: CustomFields = {};
 export default function useCustomFields() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: CUSTOM_FIELDS,
-    queryFn: getCustomFields,
+    queryFn: ({ signal }) => getCustomFields({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
   });
 
   return { data: data ?? placeholder, status, isFetching, isError, refetch };

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

@@ -8,7 +8,7 @@ import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 export function useCustomTranslation() {
   const { data, status, refetch } = useQuery({
     queryKey: TRANSLATION,
-    queryFn: getUserTranslation,
+    queryFn: ({ signal }) => getUserTranslation({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
     refetchInterval: queryRefetchIntervalSlow,
   });

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

@@ -9,12 +9,9 @@ import { ontimePlaceholderInfo } from '../models/Info';
 export default function useInfo() {
   const { data, status, isError, refetch, isFetching } = useQuery<GetInfo>({
     queryKey: APP_INFO,
-    queryFn: getInfo,
+    queryFn: ({ signal }) => getInfo({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
   });
 
   return { data: data ?? ontimePlaceholderInfo, status, isError, refetch, isFetching };

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

@@ -8,7 +8,7 @@ import { projectDataPlaceholder } from '../models/ProjectData';
 export default function useProjectData() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: PROJECT_DATA,
-    queryFn: getProjectData,
+    queryFn: ({ signal }) => getProjectData({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
     refetchInterval: queryRefetchIntervalSlow,
   });

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

@@ -14,12 +14,9 @@ const placeholderProjectList: ProjectFileListResponse = {
 function useProjectList() {
   const { data, status, refetch } = useQuery({
     queryKey: PROJECT_LIST,
-    queryFn: getProjects,
+    queryFn: ({ signal }) => getProjects({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt: number) => attempt * 2500,
     refetchInterval: queryRefetchIntervalSlow,
-    networkMode: 'always',
   });
   return { data: data ?? placeholderProjectList, status, refetch };
 }

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

@@ -11,7 +11,7 @@ import { createRundown, deleteRundown, duplicateRundown, fetchProjectRundownList
 export function useProjectRundowns() {
   const { data, status, isError, refetch, isFetching } = useQuery<ProjectRundownsList>({
     queryKey: PROJECT_RUNDOWNS,
-    queryFn: fetchProjectRundownList,
+    queryFn: ({ signal }) => fetchProjectRundownList({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
     refetchInterval: queryRefetchIntervalSlow,
   });

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

@@ -8,11 +8,8 @@ import { fetchReport } from '../api/report';
 export default function useReport() {
   const { data, refetch } = useQuery<OntimeReport>({
     queryKey: REPORT,
-    queryFn: fetchReport,
+    queryFn: ({ signal }) => fetchReport({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
-    retry: 5,
-    retryDelay: (attempt) => attempt * 2500,
-    networkMode: 'always',
     staleTime: MILLIS_PER_HOUR,
   });
 

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

@@ -24,7 +24,7 @@ const cachedRundownPlaceholder: Rundown = {
 export default function useRundown() {
   const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
     queryKey: RUNDOWN,
-    queryFn: fetchCurrentRundown,
+    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
     refetchInterval: queryRefetchIntervalSlow,
   });
 
@@ -33,7 +33,7 @@ export default function useRundown() {
 
 export function useRundownWithMetadata() {
   const { data, status } = useRundown();
-  const { selectedEventId } = useSelectedEventId();
+  const selectedEventId = useSelectedEventId();
   const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
   return { data, status, rundownMetadata };
 }
@@ -57,7 +57,7 @@ export function useFlatRundown() {
 
 export function useFlatRundownWithMetadata() {
   const { data, status } = useRundown();
-  const { selectedEventId } = useSelectedEventId();
+  const selectedEventId = useSelectedEventId();
 
   const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
   return { data: rundownWithMetadata, status };

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

@@ -8,7 +8,7 @@ import { ontimePlaceholderSettings } from '../models/OntimeSettings';
 export default function useSettings() {
   const { data, status, isFetching, isError, refetch } = useQuery({
     queryKey: APP_SETTINGS,
-    queryFn: getSettings,
+    queryFn: ({ signal }) => getSettings({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
     select: (data) => {
       const unobfuscated = { ...data };

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

@@ -13,7 +13,7 @@ interface FetchProps {
 export default function useUrlPresets({ skip = false }: FetchProps = {}) {
   const { data, status, isError, refetch } = useQuery({
     queryKey: URL_PRESETS,
-    queryFn: getUrlPresets,
+    queryFn: ({ signal }) => getUrlPresets({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
     refetchInterval: queryRefetchIntervalSlow,
     enabled: !skip,

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

@@ -9,7 +9,7 @@ import { viewsSettingsPlaceholder } from '../models/ViewSettings.type';
 export default function useViewSettings() {
   const { data, status } = useQuery({
     queryKey: VIEW_SETTINGS,
-    queryFn: getViewSettings,
+    queryFn: ({ signal }) => getViewSettings({ signal }),
     placeholderData: (previousData, _previousQuery) => previousData,
     staleTime: MILLIS_PER_HOUR,
   });

apps/client/src/common/hooks/useContextMenu.tsx

@@ -1,18 +1,24 @@
-import { MouseEvent } from 'react';
+import { MouseEvent, useCallback } from 'react';
 
 import { useContextMenuStore } from '../../features/rundown/rundown-context-menu/RundownContextMenu';
 import { DropdownMenuOption } from '../components/dropdown-menu/DropdownMenu';
 
-export const useContextMenu = <T extends HTMLElement>(options: DropdownMenuOption[]) => {
+type ContextMenuOptions = () => DropdownMenuOption[];
+
+export const useContextMenu = <T extends HTMLElement>(options: ContextMenuOptions) => {
   const setContextMenu = useContextMenuStore((state) => state.setContextMenu);
 
-  const localCreateContextMenu = (contextMenuEvent: MouseEvent<T, globalThis.MouseEvent>) => {
-    // prevent browser default context menu from showing up
-    contextMenuEvent.preventDefault();
+  const localCreateContextMenu = useCallback(
+    (contextMenuEvent: MouseEvent<T, globalThis.MouseEvent>) => {
+      // prevent browser default context menu from showing up
+      contextMenuEvent.preventDefault();
 
-    const { pageX, pageY } = contextMenuEvent;
-    return setContextMenu({ x: pageX, y: pageY }, options);
-  };
+      const { pageX, pageY } = contextMenuEvent;
+      const menuOptions = options();
+      return setContextMenu({ x: pageX, y: pageY }, menuOptions);
+    },
+    [options, setContextMenu],
+  );
 
   return [localCreateContextMenu];
 };

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

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   EntryId,
@@ -6,15 +6,31 @@ import {
   isOntimeEvent,
   isOntimeGroup,
   MaybeString,
+  OntimeDelay,
   OntimeEntry,
   OntimeEvent,
+  OntimeGroup,
+  OntimeMilestone,
+  PatchWithId,
   Rundown,
   SupportedEntry,
   TimeField,
   TimeStrategy,
-  TransientEventPayload,
 } from 'ontime-types';
-import { dayInMs, generateId, MILLIS_PER_SECOND, parseUserTime, swapEventData } from 'ontime-utils';
+import {
+  addToRundown,
+  createDelay,
+  createEvent,
+  createGroup,
+  createMilestone,
+  dayInMs,
+  generateId,
+  getInsertAfterId,
+  MILLIS_PER_SECOND,
+  parseUserTime,
+  resolveInsertParent,
+  swapEventData,
+} from 'ontime-utils';
 
 import { moveDown, moveUp, orderEntries } from '../../features/rundown/rundown.utils';
 import { RUNDOWN } from '../api/constants';
@@ -85,9 +101,64 @@ export const useEntryActions = () => {
    * @private
    */
   const { mutateAsync: addEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entry]: Parameters<typeof postAddEntry>) => postAddEntry(rundownId, entry),
-    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
-    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
+    mutationFn: ([rundownId, entry]: [string, PatchWithId & InsertOptions]) => postAddEntry(rundownId, entry),
+    onMutate: async ([_rundownId, entry]) => {
+      await queryClient.cancelQueries({ queryKey: RUNDOWN });
+
+      const previousData = queryClient.getQueryData<Rundown>(RUNDOWN);
+
+      if (previousData) {
+        const optimisticEntry = createOptimisticEntry(entry);
+        const parentId = resolveInsertParent(previousData, entry);
+        const maybeParent = parentId ? previousData.entries[parentId] : null;
+        const parent = maybeParent && isOntimeGroup(maybeParent) ? maybeParent : null;
+        const afterId = getInsertAfterId(previousData, parent, entry.after, entry.before);
+
+        // create a mutable copy — addToRundown mutates in place using immutable array operations
+        const newRundown: Rundown = {
+          ...previousData,
+          entries: { ...previousData.entries },
+          revision: -1,
+        };
+
+        // copy the parent group so we don't mutate the original
+        if (parent && parentId) {
+          newRundown.entries[parentId] = { ...parent, entries: [...parent.entries] };
+        }
+
+        addToRundown(
+          newRundown,
+          optimisticEntry,
+          afterId,
+          parent ? (newRundown.entries[parent.id] as OntimeGroup) : null,
+        );
+
+        queryClient.setQueryData<Rundown>(RUNDOWN, newRundown);
+      }
+
+      return { previousData };
+    },
+    onSuccess: (response) => {
+      if (!response.data) return;
+
+      const serverEntry = response.data;
+      const currentData = queryClient.getQueryData<Rundown>(RUNDOWN);
+
+      if (currentData) {
+        queryClient.setQueryData<Rundown>(RUNDOWN, {
+          ...currentData,
+          entries: { ...currentData.entries, [serverEntry.id]: serverEntry },
+        });
+      }
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData<Rundown>(RUNDOWN, context.previousData);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: RUNDOWN });
+    },
   });
 
   /**
@@ -102,7 +173,15 @@ export const useEntryActions = () => {
         throw new Error('Rundown not initialised');
       }
 
-      const newEntry: TransientEventPayload = { ...entry, id: generateId() };
+      const newEntry: PatchWithId & InsertOptions = { ...entry, id: generateId() };
+
+      // handle adding options that concern all event types
+      if (options?.after) {
+        newEntry.after = options.after;
+      }
+      if (options?.before) {
+        newEntry.before = options.before;
+      }
 
       // ************* CHECK OPTIONS specific to events
       if (isOntimeEvent(newEntry)) {
@@ -142,14 +221,6 @@ export const useEntryActions = () => {
         }
       }
 
-      // handle adding options that concern all event type
-      if (options?.after) {
-        (newEntry as TransientEventPayload).after = options.after;
-      }
-      if (options?.before) {
-        (newEntry as TransientEventPayload).before = options.before;
-      }
-
       try {
         await addEntryMutation([rundownId, newEntry]);
       } catch (error) {
@@ -840,22 +911,40 @@ export const useEntryActions = () => {
     [getCurrentRundownData, swapEventsMutation],
   );
 
-  return {
-    addEntry,
-    applyDelay,
-    batchUpdateEvents,
-    clone,
-    deleteEntry,
-    deleteAllEntries,
-    ungroup,
-    getEntryById,
-    groupEntries,
-    move,
-    reorderEntry,
-    swapEvents,
-    updateEntry,
-    updateTimer,
-  };
+  return useMemo(
+    () => ({
+      addEntry,
+      applyDelay,
+      batchUpdateEvents,
+      clone,
+      deleteEntry,
+      deleteAllEntries,
+      ungroup,
+      getEntryById,
+      groupEntries,
+      move,
+      reorderEntry,
+      swapEvents,
+      updateEntry,
+      updateTimer,
+    }),
+    [
+      addEntry,
+      applyDelay,
+      batchUpdateEvents,
+      clone,
+      deleteEntry,
+      deleteAllEntries,
+      ungroup,
+      getEntryById,
+      groupEntries,
+      move,
+      reorderEntry,
+      swapEvents,
+      updateEntry,
+      updateTimer,
+    ],
+  );
 };
 
 /**
@@ -887,3 +976,29 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
 
   return { entries, order, flatOrder };
 }
+
+/**
+ * Utility to create an optimistic entry for immediate cache insertion
+ */
+function createOptimisticEntry(payload: PatchWithId & InsertOptions): OntimeEntry {
+  const { after: _after, before: _before, ...entryData } = payload;
+  const id = entryData.id;
+  let parent: EntryId | null = null;
+  if ('parent' in entryData && entryData.parent) {
+    parent = entryData.parent;
+  }
+
+  switch (entryData.type) {
+    case SupportedEntry.Event: {
+      return createEvent({ ...entryData, id, parent }) as OntimeEvent;
+    }
+    case SupportedEntry.Delay:
+      return createDelay({ id, duration: (entryData as Partial<OntimeDelay>).duration ?? 0, parent });
+    case SupportedEntry.Group:
+      return createGroup({ ...(entryData as Partial<OntimeGroup>), id });
+    case SupportedEntry.Milestone:
+      return createMilestone({ ...(entryData as Partial<OntimeMilestone>), id, parent });
+    default:
+      throw new Error('Unknown entry type');
+  }
+}

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

@@ -128,13 +128,9 @@ export const setAuxTimer = {
   setDuration: (index: number, time: number) => sendSocket('auxtimer', { [index]: { duration: time } }),
 };
 
-export const useSelectedEventId = createSelector((state: RuntimeStore) => ({
-  selectedEventId: state.eventNow?.id ?? null,
-}));
+export const useSelectedEventId = createSelector((state: RuntimeStore) => state.eventNow?.id ?? null);
 
-export const useCurrentGroupId = createSelector((state: RuntimeStore) => ({
-  currentGroupId: state.groupNow?.id ?? null,
-}));
+export const useCurrentGroupId = createSelector((state: RuntimeStore) => state.groupNow?.id ?? null);
 
 export const setEventPlayback = {
   loadEvent: (id: string) => sendSocket('load', { id }),
@@ -147,9 +143,7 @@ export const useTimer = createSelector((state: RuntimeStore) => ({
   ...state.timer,
 }));
 
-export const useClock = createSelector((state: RuntimeStore) => ({
-  clock: state.clock,
-}));
+export const useClock = createSelector((state: RuntimeStore) => state.clock);
 
 export const useNextFlag = createSelector((state: RuntimeStore) => ({
   id: state.eventFlag?.id ?? null,
@@ -173,28 +167,16 @@ export const useExpectedStartData = createSelector((state: RuntimeStore) => ({
   clock: state.clock,
 }));
 
-export const usePing = createSelector((state: RuntimeStore) => ({
-  ping: state.ping,
-}));
+export const usePing = createSelector((state: RuntimeStore) => state.ping);
 
 /** convert ping into a derived value which changes less often */
-export const useIsOnline = createSelector((state: RuntimeStore) => ({
-  isOnline: state.ping > 0,
-}));
+export const useIsOnline = createSelector((state: RuntimeStore) => state.ping > 0);
 
-export const useOffsetMode = createSelector((state: RuntimeStore) => ({
-  offsetMode: state.offset.mode,
-}));
+export const useOffsetMode = createSelector((state: RuntimeStore) => state.offset.mode);
 
 export const setOffsetMode = (payload: OffsetMode) => sendSocket('offsetmode', payload);
 
-export const usePlayback = () => {
-  const featureSelector = (state: RuntimeStore) => ({
-    playback: state.timer.playback,
-  });
-
-  return useRuntimeStore(featureSelector);
-};
+export const usePlayback = createSelector((state: RuntimeStore) => state.timer.playback);
 
 /* ======================= Overview data subscriptions ======================= */
 
@@ -204,9 +186,7 @@ export const useStartTimesOverview = createSelector((state: RuntimeStore) => ({
   plannedEnd: state.rundown.plannedEnd,
 }));
 
-export const useRundownExpectedEnd = createSelector((state: RuntimeStore) => ({
-  expectedEnd: state.offset.expectedRundownEnd,
-}));
+export const useRundownExpectedEnd = createSelector((state: RuntimeStore) => state.offset.expectedRundownEnd);
 
 export const useProgressOverview = createSelector((state: RuntimeStore) => ({
   numEvents: state.rundown.numEvents,

apps/client/src/common/queryClient.ts

@@ -1,4 +1,5 @@
 import { QueryClient } from '@tanstack/react-query';
+import axios from 'axios';
 import { MILLIS_PER_MINUTE } from 'ontime-utils';
 
 import { isOntimeCloud } from '../externals';
@@ -8,10 +9,15 @@ export const ontimeQueryClient = new QueryClient({
     queries: {
       gcTime: 10 * MILLIS_PER_MINUTE,
       // staleTime: MILLIS_PER_HOUR, //TODO: when all routes have implemented refetch signal from server, we can the assume that the data is not stale until we get the signal
-      networkMode: 'always',
+      networkMode: isOntimeCloud ? 'online' : 'always',
       refetchOnWindowFocus: false,
-      retry: 5,
-      retryDelay: (attempt) => attempt * 2500,
+      retry: (failureCount, error) => {
+        if (axios.isCancel(error)) {
+          return false;
+        }
+        return failureCount < 5;
+      },
+      retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 5000),
     },
     mutations: {
       /**
@@ -21,6 +27,7 @@ export const ontimeQueryClient = new QueryClient({
        * - use 'online' for clients that are connected to the cloud
        */
       networkMode: isOntimeCloud ? 'online' : 'always',
+      retry: 0,
     },
   },
 });

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

@@ -2,10 +2,13 @@ import { create } from 'zustand';
 
 type EntryCopyStore = {
   entryCopyId: string | null;
-  setEntryCopyId: (eventId: string | null) => void;
+  entryCopyMode: 'copy' | 'cut';
+  setEntryCopyId: (eventId: string | null, mode?: 'copy' | 'cut') => void;
 };
 
 export const useEntryCopy = create<EntryCopyStore>()((set) => ({
   entryCopyId: null,
-  setEntryCopyId: (entryCopyId: string | null) => set({ entryCopyId }),
+  entryCopyMode: 'copy',
+  setEntryCopyId: (entryCopyId: string | null, mode: 'copy' | 'cut' = 'copy') =>
+    set({ entryCopyId, entryCopyMode: mode }),
 }));

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

@@ -38,7 +38,13 @@ import { patchRuntime, patchRuntimeProperty } from '../stores/runtime';
 
 let websocket: WebSocket | null = null;
 let reconnectTimeout: NodeJS.Timeout | null = null;
-const reconnectInterval = 1000;
+const socketConfig = {
+  reconnectBaseInterval: 1000, // 1 second
+  reconnectMaxInterval: 30000, // 30 seconds
+  reconnectMinInterval: 500, // 0.5 seconds
+  reconnectJitter: 0.25,
+  offlineAttemptsThreshold: 2, // when we consider the client disconnected
+} as const;
 
 export let hasConnected = false;
 export let reconnectAttempts = 0;
@@ -49,7 +55,11 @@ export const connectSocket = () => {
   const preferredClientName = getClientName();
 
   websocket.onopen = () => {
-    clearTimeout(reconnectTimeout as NodeJS.Timeout);
+    const isReconnect = hasConnected;
+    if (reconnectTimeout) {
+      clearTimeout(reconnectTimeout);
+      reconnectTimeout = null;
+    }
     hasConnected = true;
     reconnectAttempts = 0;
 
@@ -59,24 +69,38 @@ export const connectSocket = () => {
       path: window.location.pathname + window.location.search,
       name: preferredClientName,
     });
-    invalidateAllCaches(); // assume all data to be stale after a reconnect
+
+    if (isReconnect) {
+      invalidateAllCaches();
+    }
     setOnlineStatus(true);
   };
 
   websocket.onclose = () => {
     console.warn('WebSocket disconnected');
+    if (reconnectTimeout) {
+      clearTimeout(reconnectTimeout);
+      reconnectTimeout = null;
+    }
+
+    const exponentialDelay = Math.min(
+      socketConfig.reconnectBaseInterval * 2 ** reconnectAttempts,
+      socketConfig.reconnectMaxInterval,
+    );
+    const jitterOffset = exponentialDelay * socketConfig.reconnectJitter * (Math.random() * 2 - 1);
+    const delay = Math.max(socketConfig.reconnectMinInterval, Math.round(exponentialDelay + jitterOffset));
 
-    // we decide to allows reconnect
     reconnectTimeout = setTimeout(() => {
-      if (reconnectAttempts > 2) {
+      reconnectTimeout = null;
+      if (reconnectAttempts > socketConfig.offlineAttemptsThreshold) {
         setOnlineStatus(false);
       }
-      console.warn('WebSocket: attempting reconnect');
+      console.warn(`WebSocket: reconnecting now (#${reconnectAttempts + 1}, waited ${delay}ms)`);
       if (websocket && websocket.readyState === WebSocket.CLOSED) {
         reconnectAttempts += 1;
         connectSocket();
       }
-    }, reconnectInterval);
+    }, delay);
   };
 
   websocket.onerror = (error) => {

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

@@ -196,7 +196,6 @@ $inner-padding: 1rem;
 .inlineElements {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
 
   &.inner {
     gap: 0.5rem;
@@ -213,6 +212,11 @@ $inner-padding: 1rem;
   &.apart {
     justify-content: space-between;
   }
+
+  &.wrap {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+  }
 }
 
 @keyframes animloader {

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

@@ -107,7 +107,7 @@ export function BlockQuote({ children }: { children: ReactNode }) {
   return <blockquote className={style.blockquote}>{children}</blockquote>;
 }
 
-export function Error({ children, className }: { children: ReactNode } & React.JSX.IntrinsicElements['div']) {
+export function Error({ children, className }: PropsWithChildren & React.JSX.IntrinsicElements['div']) {
   return <div className={cx([style.fieldError, className])}>{children}</div>;
 }
 
@@ -131,16 +131,25 @@ type InlineProps<C extends AllowedInlineTags> = {
   as?: C;
   relation?: 'inner' | 'component' | 'section';
   align?: 'start' | 'end' | 'apart';
-  className?: string;
-};
+  wrap?: 'wrap' | 'nowrap';
+} & Omit<React.JSX.IntrinsicElements[C], 'align'>;
 
 export function InlineElements<C extends AllowedInlineTags = 'div'>({
   children,
   as,
   relation = 'component',
   align = 'start',
+  wrap = 'nowrap',
   className,
+  ...elementProps
 }: PropsWithChildren<InlineProps<C>>) {
   const Element = as ?? 'div';
-  return <Element className={cx([style.inlineElements, style[relation], style[align], className])}>{children}</Element>;
+  return (
+    <Element
+      {...(elementProps as HTMLAttributes<HTMLElement>)}
+      className={cx([style.inlineElements, style[relation], style[align], style[wrap], className])}
+    >
+      {children}
+    </Element>
+  );
 }

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

@@ -130,7 +130,7 @@ export default function OntimeActionForm({
             }}
             value={watch(`outputs.${index}.secondarySource`)}
             options={[
-              { value: null, label: 'Select secondary source', disabled: true },
+              { value: null, label: 'Select secondary source' },
               { value: 'aux1', label: 'Auxiliary timer 1' },
               { value: 'aux2', label: 'Auxiliary timer 2' },
               { value: 'aux3', label: 'Auxiliary timer 3' },

apps/client/src/features/app-settings/panel/network-panel/NetworkInterfaces.tsx

@@ -14,7 +14,7 @@ export default function InfoNif() {
   const handleClick = (address: string) => openLink(address);
 
   return (
-    <Panel.InlineElements>
+    <Panel.InlineElements wrap='wrap'>
       {data.networkInterfaces.map((nif) => {
         // interfaces outside localhost wont have access
         if (nif.name === 'localhost' && !isLocalhost) return null;

apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx

@@ -34,7 +34,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
 }
 
 function OntimeCloudStats() {
-  const { ping } = usePing();
+  const ping = usePing();
 
   /**
    * Send immediate ping request, and keep sending on an interval

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

@@ -32,7 +32,6 @@ export default function GeneralSettings() {
   } = useForm<Settings>({
     mode: 'onChange',
     defaultValues: data,
-    values: data,
     resetOptions: {
       keepDirtyValues: true,
     },

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

@@ -31,7 +31,6 @@ export default function ViewSettings() {
     formState: { isSubmitting, isDirty, errors },
   } = useForm<ViewSettingsType>({
     defaultValues: data,
-    values: data,
     resetOptions: {
       keepDirtyValues: true,
     },

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

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 
 import { getCSSContents, postCSSContents, restoreCSSContents } from '../../../../../common/api/assets';
 import Button from '../../../../../common/components/buttons/Button';
@@ -81,7 +81,9 @@ export default function CodeEditorModal({ isOpen, onClose }: CodeEditorModalProp
       showCloseButton
       showBackdrop
       bodyElements={
-        <CodeEditor ref={cssRef} initialValue={css} language='css' isDirty={isDirty} setIsDirty={setIsDirty} />
+        <Suspense fallback={null}>
+          <CodeEditor ref={cssRef} initialValue={css} language='css' isDirty={isDirty} setIsDirty={setIsDirty} />
+        </Suspense>
       }
       footerElements={
         <div className={style.column}>

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

@@ -90,7 +90,10 @@ const staticOptions = [
   },
 ] as const;
 
-export type SettingsOptionId = (typeof staticOptions)[number]['id'];
+// a child of navigation or a child of secondary navigation
+export type SettingsOptionId =
+  | (typeof staticOptions)[number]['id']
+  | Extract<(typeof staticOptions)[number], { secondary: object }>['secondary'][number]['id'];
 
 export function useAppSettingsMenu() {
   const { data } = useAppVersion();

apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss

@@ -41,5 +41,4 @@
 
   padding-inline: 0.5em;
   outline: none;
-
-}
+}

apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.tsx

@@ -1,9 +1,8 @@
-import { useMemo } from 'react';
 import { IoPause, IoPlay, IoPlaySkipBack, IoPlaySkipForward, IoReload, IoStop } from 'react-icons/io5';
 import { Playback, TimerPhase } from 'ontime-types';
-import { validatePlayback } from 'ontime-utils';
 
 import { setPlayback } from '../../../../common/hooks/useSocket';
+import { getPlaybackControlState } from '../playbackControl.utils';
 import TapButton from '../tap-button/TapButton';
 
 import style from './PlaybackButtons.module.scss';
@@ -15,44 +14,32 @@ interface PlaybackButtonsProps {
   timerPhase: TimerPhase;
 }
 
-export default function PlaybackButtons(props: PlaybackButtonsProps) {
-  const { playback, numEvents, selectedEventIndex, timerPhase } = props;
-
-  const isRolling = playback === Playback.Roll;
-  const isPlaying = playback === Playback.Play;
-  const isPaused = playback === Playback.Pause;
-  const isArmed = playback === Playback.Armed;
-
-  const isFirst = selectedEventIndex === 0;
-  const isLast = selectedEventIndex === numEvents - 1;
-  const noEvents = numEvents === 0;
-
-  const disableGo = isRolling || noEvents;
-  const disableNext = isRolling || noEvents || isLast;
-  const disablePrev = isRolling || noEvents || isFirst;
-
-  const playbackCan = validatePlayback(playback, timerPhase);
-  const disableStart = !playbackCan.start;
-  const disablePause = !playbackCan.pause;
-  const disableRoll = !playbackCan.roll || noEvents;
-  const disableStop = !playbackCan.stop;
-  const disableReload = !playbackCan.reload;
-
-  const [goModeAction, goModeText] = useMemo(() => {
-    if (isArmed) {
-      return [setPlayback.start, 'Start'];
-    } else if (isLast) {
-      return [setPlayback.stop, 'Finish'];
-    } else if (selectedEventIndex === null) {
-      return [setPlayback.startNext, 'Start'];
-    }
-    return [setPlayback.startNext, 'Next'];
-  }, [isArmed, isLast, selectedEventIndex]);
+export default function PlaybackButtons({ playback, numEvents, selectedEventIndex, timerPhase }: PlaybackButtonsProps) {
+  const {
+    isPlaying,
+    isPaused,
+    isRolling,
+    disableGo,
+    disableNext,
+    disablePrev,
+    disableStart,
+    disablePause,
+    disableRoll,
+    disableStop,
+    disableReload,
+    goAction,
+    goLabel,
+  } = getPlaybackControlState({
+    playback,
+    numEvents,
+    selectedEventIndex,
+    timerPhase,
+  });
 
   return (
     <div className={style.buttonContainer}>
-      <TapButton disabled={disableGo} onClick={goModeAction} aspect='fill' className={style.go}>
-        {goModeText}
+      <TapButton disabled={disableGo} onClick={goAction} aspect='fill' className={style.go}>
+        {goLabel}
       </TapButton>
       <div className={style.playbackContainer}>
         <TapButton onClick={setPlayback.start} disabled={disableStart} theme={Playback.Play} active={isPlaying}>

apps/client/src/features/control/playback/playback-timer/PlaybackTimer.module.scss

@@ -8,6 +8,13 @@
   gap: $element-inner-spacing;
 }
 
+.timerDisplay {
+  grid-area: timer;
+  max-width: 18.75rem;
+  min-width: 5em;
+  text-align: center;
+}
+
 // ---------> INDICATORS
 
 .indicators {

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

@@ -42,7 +42,7 @@ export default function PlaybackTimer({ children }: PropsWithChildren) {
         <div className={style.indicatorNegative} data-active={isOvertime} />
         <Tooltip text={addedTimeLabel} render={<div />} className={style.indicatorDelay} data-active={hasAddedTime} />
       </div>
-      <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
+      <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} phase={timer.phase} />
       <div className={style.status}>
         {isWaiting ? (
           <span className={style.rolltag}>Roll: Countdown to start</span>

apps/client/src/features/control/playback/playbackControl.utils.ts

@@ -0,0 +1,95 @@
+import { Playback, TimerPhase } from 'ontime-types';
+import { validatePlayback } from 'ontime-utils';
+
+import { setPlayback } from '../../../common/hooks/useSocket';
+
+export interface PlaybackControlInput {
+  playback: Playback;
+  numEvents: number;
+  selectedEventIndex: number | null;
+  timerPhase: TimerPhase;
+}
+
+export interface PlaybackControlState {
+  // Playback states
+  isPlaying: boolean;
+  isPaused: boolean;
+  isRolling: boolean;
+  isArmed: boolean;
+  isStopped: boolean;
+
+  // Position states
+  isFirst: boolean;
+  isLast: boolean;
+  noEvents: boolean;
+
+  // Disable flags
+  disableGo: boolean;
+  disableNext: boolean;
+  disablePrev: boolean;
+  disableStart: boolean;
+  disablePause: boolean;
+  disableRoll: boolean;
+  disableStop: boolean;
+  disableReload: boolean;
+  disableAddTime: boolean;
+
+  // Go button configuration
+  goAction: () => void;
+  goLabel: 'Start' | 'Next' | 'Finish';
+}
+
+/**
+ * Centralized playback control state calculator.
+ * Consolidates all playback logic, disable states, and derived values in one place.
+ */
+export function getPlaybackControlState({
+  playback,
+  numEvents,
+  selectedEventIndex,
+  timerPhase,
+}: PlaybackControlInput): PlaybackControlState {
+  const isFirst = selectedEventIndex === 0;
+  const isLast = selectedEventIndex === numEvents - 1;
+  const noEvents = numEvents === 0;
+  const isRolling = playback === Playback.Roll;
+
+  const playbackCan = validatePlayback(playback, timerPhase);
+  const { action: goAction, label: goLabel } = getGoAction(playback, selectedEventIndex, isLast);
+
+  return {
+    isPlaying: playback === Playback.Play,
+    isPaused: playback === Playback.Pause,
+    isRolling,
+    isArmed: playback === Playback.Armed,
+    isStopped: playback === Playback.Stop,
+    isFirst,
+    isLast,
+    noEvents,
+    disableGo: isRolling || noEvents,
+    disableNext: isRolling || noEvents || isLast,
+    disablePrev: isRolling || noEvents || isFirst,
+    disableStart: !playbackCan.start,
+    disablePause: !playbackCan.pause,
+    disableRoll: !playbackCan.roll || noEvents,
+    disableStop: !playbackCan.stop,
+    disableReload: !playbackCan.reload,
+    disableAddTime: playback !== Playback.Play && playback !== Playback.Pause,
+    goAction,
+    goLabel,
+  };
+}
+
+/**
+ * Determines the action and label for the "Go" button based on playback state.
+ */
+function getGoAction(
+  playback: Playback,
+  selectedEventIndex: number | null,
+  isLast: boolean,
+): { action: () => void; label: 'Start' | 'Next' | 'Finish' } {
+  if (playback === Playback.Armed) return { action: setPlayback.start, label: 'Start' };
+  if (isLast) return { action: setPlayback.stop, label: 'Finish' };
+  if (selectedEventIndex === null) return { action: setPlayback.startNext, label: 'Start' };
+  return { action: setPlayback.startNext, label: 'Next' };
+}

apps/client/src/features/control/playback/timer-display/TimerDisplay.module.scss

@@ -1,23 +1,34 @@
 @use '@/theme/viewerDefs' as *;
 
 .timer {
-  grid-area: timer;
   white-space: nowrap;
-  max-width: 18.75rem;
-  min-width: 5em;
 
-  color: $timer-color;
-  line-height: 0.9em;
-  text-align: center;
+  line-height: 0.9;
   letter-spacing: 0.1em;
   font-weight: 600;
   font-size: 3.5rem;
-  
-  &.finished {
-    color: $timer-finished-color;
+
+  &[data-phase='default'] {
+    color: $timer-color;
   }
 
-  &.muted {
+  &[data-phase='warning'] {
+    color: $warning-orange;
+  }
+
+  &[data-phase='danger'] {
+    color: $error-red;
+  }
+
+  &[data-phase='overtime'] {
+    color: $playback-negative;
+  }
+
+  &[data-phase='pending'] {
+    color: $ontime-roll;
+  }
+
+  &[data-phase='none'] {
     color: $muted-gray;
   }
 }

apps/client/src/features/control/playback/timer-display/TimerDisplay.tsx

@@ -1,4 +1,4 @@
-import { MaybeNumber } from 'ontime-types';
+import { MaybeNumber, TimerPhase } from 'ontime-types';
 import { millisToString } from 'ontime-utils';
 
 import { cx, timerPlaceholder } from '../../../../common/utils/styleUtils';
@@ -7,19 +7,20 @@ import style from './TimerDisplay.module.scss';
 
 interface TimerDisplayProps {
   time: MaybeNumber;
+  phase: TimerPhase;
+  className?: string;
 }
 
 /**
  * Displays time in ms in formatted timetag
  * Used in editor
  */
-export default function TimerDisplay(props: TimerDisplayProps) {
-  const { time } = props;
+export default function TimerDisplay({ time, phase, className }: TimerDisplayProps) {
+  const display = millisToString(time, { fallback: timerPlaceholder }).replace('-', '');
 
-  const isNegative = (time ?? 0) < 0;
-  const display =
-    time == null ? timerPlaceholder : millisToString(time, { fallback: timerPlaceholder }).replace('-', '');
-  const classes = cx([style.timer, isNegative ? style.finished : null, time === null && style.muted]);
-
-  return <div className={classes}>{display}</div>;
+  return (
+    <div className={cx([style.timer, className])} data-phase={phase}>
+      {display}
+    </div>
+  );
 }

apps/client/src/features/control/playback/tracking-playback-bar/TrackingPlaybackBar.module.scss

@@ -0,0 +1,146 @@
+@use '../../../../theme/ontimeColours' as *;
+@use '../../../../theme/ontimeStyles' as *;
+
+$element-height: 4.5rem; // matches go button height in PlaybackButtons
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  gap: 1rem;
+  padding: $panel-gap $section-spacing;
+  background: $bg-container-l2;
+  border-radius: $panel-border-radius;
+}
+
+.itemGroup {
+  display: flex;
+  align-items: center;
+  gap: $element-spacing;
+  flex-shrink: 0;
+}
+
+.goButton,
+.iconButtonWithLabel,
+.iconButton {
+  width: $element-height;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    font-size: 1.25rem;
+  }
+}
+
+.goButton {
+  height: $element-height;
+  min-width: 8rem;
+  line-height: 1.1;
+}
+
+.goLabel {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.shortcutHint {
+  font-size: calc(1rem - 4px);
+  opacity: 0.6;
+}
+
+.addSection {
+  display: contents;
+}
+
+.separator {
+  width: 1px;
+  height: 1.5rem;
+  background: $white-10;
+  margin-inline: 0.25rem;
+}
+
+.timerSection {
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+  gap: 0.5rem;
+}
+
+.negativeIndicator {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1;
+  color: $playback-negative;
+  opacity: 0;
+
+  &[data-active='true'] {
+    opacity: 1;
+  }
+}
+
+// -----> Aux timer section (right)
+
+.auxSection {
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: $element-inner-spacing;
+  flex-shrink: 0;
+}
+
+.auxControls {
+  display: flex;
+  gap: $element-inner-spacing;
+}
+
+.auxTimeInput,
+.auxTimeDisplay {
+  width: 6.5rem;
+  min-width: 6.5rem;
+  max-width: 6.5rem;
+  height: $element-height;
+
+  text-align: center;
+  background: $gray-1050;
+  border-radius: $component-border-radius-md;
+  color: $ui-white;
+}
+
+.auxTimeDisplay {
+  display: grid;
+  place-content: center;
+
+  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.5px;
+
+  padding-inline: 0.5em;
+  outline: none;
+}
+
+// hardcoded value where the timer is over the buttons
+@media (max-width: 1048px) {
+  .container {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .timerSection {
+    justify-self: end;
+  }
+
+  .auxSection {
+    display: none;
+  }
+}
+
+// hardcoded value where the timer is over the buttons
+@media (max-width: 728px) {
+  .addSection {
+    display: none;
+  }
+}

apps/client/src/features/control/playback/tracking-playback-bar/TrackingPlaybackBar.tsx

@@ -0,0 +1,184 @@
+import { IoAdd, IoArrowDown, IoArrowUp, IoPause, IoPlay, IoPlaySkipForward, IoRemove, IoStop } from 'react-icons/io5';
+import { useHotkeys, useLocalStorage } from '@mantine/hooks';
+import { Playback, SimpleDirection, SimplePlayback, TimerPhase } from 'ontime-types';
+import { millisToString, parseUserTime } from 'ontime-utils';
+
+import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import {
+  setAuxTimer,
+  setPlayback,
+  useAuxTimerControl,
+  useAuxTimerTime,
+  usePlaybackControl,
+  useTimer,
+} from '../../../../common/hooks/useSocket';
+import { enDash } from '../../../../common/utils/styleUtils';
+import { formatDuration } from '../../../../common/utils/time';
+import { getPlaybackControlState } from '../playbackControl.utils';
+import TapButton from '../tap-button/TapButton';
+import TimerDisplay from '../timer-display/TimerDisplay';
+
+import style from './TrackingPlaybackBar.module.scss';
+
+export default function TrackingPlaybackBar() {
+  const timer = useTimer();
+
+  const { playback, numEvents, selectedEventIndex } = usePlaybackControl();
+
+  const { playback: auxPlayback, direction: auxDirection } = useAuxTimerControl(1);
+  const auxTime = useAuxTimerTime(1);
+
+  const [addTimeInMs] = useLocalStorage({ key: 'add-time', defaultValue: 300_000 });
+
+  const { disableGo, disableNext, disableAddTime, isPlaying, goAction, goLabel } = getPlaybackControlState({
+    playback,
+    numEvents,
+    selectedEventIndex,
+    timerPhase: timer.phase,
+  });
+
+  const disableAddTimeWithAmount = disableAddTime || addTimeInMs === 0;
+
+  const handleAddTime = (direction: 'add' | 'remove') => {
+    if (disableAddTimeWithAmount) return;
+    if (direction === 'add') {
+      setPlayback.addTime(addTimeInMs);
+    } else {
+      setPlayback.addTime(-1 * addTimeInMs);
+    }
+  };
+
+  const handleAuxPlayPause = () => {
+    if (auxPlayback === SimplePlayback.Start) {
+      setAuxTimer.pause(1);
+    } else {
+      setAuxTimer.start(1);
+    }
+  };
+
+  const handleAuxStop = () => {
+    setAuxTimer.stop(1);
+  };
+
+  const handleAuxDirectionToggle = () => {
+    const newDirection =
+      auxDirection === SimpleDirection.CountDown ? SimpleDirection.CountUp : SimpleDirection.CountDown;
+    setAuxTimer.setDirection(1, newDirection);
+  };
+
+  const handleAuxTimeChange = (_field: string, value: string) => {
+    const newTimeInMs = parseUserTime(value);
+    setAuxTimer.setDuration(1, newTimeInMs);
+  };
+
+  useHotkeys([
+    ['Space', () => !disableGo && goAction(), { preventDefault: true }],
+    ['N', () => !disableNext && setPlayback.next(), { preventDefault: true }],
+    ['Escape', () => playback !== Playback.Stop && setPlayback.stop(), { preventDefault: true }],
+  ]);
+
+  const isWaiting = timer.phase === TimerPhase.Pending;
+  const isOvertime = timer.phase === TimerPhase.Overtime;
+  const displayTime = isWaiting ? timer.secondaryTimer : timer.current;
+
+  const addTimeLabel = formatDuration(addTimeInMs);
+
+  return (
+    <div className={style.container}>
+      <div className={style.itemGroup}>
+        <TapButton
+          onClick={goAction}
+          disabled={disableGo}
+          theme={Playback.Play}
+          active={isPlaying}
+          className={style.goButton}
+        >
+          <span className={style.goLabel}>{goLabel}</span>
+          <span className={style.shortcutHint}>[space]</span>
+        </TapButton>
+
+        <TapButton
+          onClick={setPlayback.next}
+          disabled={disableNext}
+          className={style.iconButtonWithLabel}
+          aspect='square'
+        >
+          <IoPlaySkipForward />
+          <span className={style.shortcutHint}>[n]</span>
+        </TapButton>
+
+        <TapButton
+          onClick={setPlayback.stop}
+          disabled={playback === Playback.Stop}
+          className={style.iconButtonWithLabel}
+          aspect='square'
+        >
+          <IoStop />
+          <span className={style.shortcutHint}>[esc]</span>
+        </TapButton>
+
+        <div className={style.addSection}>
+          <div className={style.separator} />
+          <TapButton
+            onClick={() => handleAddTime('remove')}
+            disabled={disableAddTimeWithAmount}
+            className={style.iconButtonWithLabel}
+            aspect='square'
+          >
+            <IoRemove />
+            {addTimeLabel}
+          </TapButton>
+          <TapButton
+            onClick={() => handleAddTime('add')}
+            disabled={disableAddTimeWithAmount}
+            className={style.iconButtonWithLabel}
+            aspect='square'
+          >
+            <IoAdd />
+            {addTimeLabel}
+          </TapButton>
+        </div>
+      </div>
+
+      <div className={style.timerSection}>
+        <span className={style.negativeIndicator} data-active={isOvertime}>
+          {enDash}
+        </span>
+        <TimerDisplay time={displayTime} phase={timer.phase} />
+      </div>
+
+      <div className={style.auxSection}>
+        <TapButton onClick={handleAuxPlayPause} className={style.iconButton} theme={Playback.Play} aspect='square'>
+          {auxPlayback === SimplePlayback.Start ? <IoPause /> : <IoPlay />}
+        </TapButton>
+        <TapButton
+          onClick={handleAuxStop}
+          disabled={auxPlayback === SimplePlayback.Stop}
+          className={style.iconButton}
+          theme={Playback.Stop}
+          aspect='square'
+        >
+          <IoStop />
+        </TapButton>
+        {auxPlayback !== SimplePlayback.Stop ? (
+          <div className={style.auxTimeDisplay}>{millisToString(auxTime)}</div>
+        ) : (
+          <TimeInput
+            name='aux1-tracking'
+            submitHandler={handleAuxTimeChange}
+            time={auxTime}
+            className={style.auxTimeInput}
+          />
+        )}
+        <TapButton
+          onClick={handleAuxDirectionToggle}
+          disabled={auxPlayback !== SimplePlayback.Stop}
+          className={style.iconButton}
+          aspect='square'
+        >
+          {auxDirection === SimpleDirection.CountDown ? <IoArrowDown /> : <IoArrowUp />}
+        </TapButton>
+      </div>
+    </div>
+  );
+}

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

@@ -12,7 +12,7 @@ import { getDefaultFormat } from '../../common/utils/time';
 import { isTouchDevice } from '../../externals';
 import Loader from '../../views/common/loader/Loader';
 
-import EditModal from './edit-modal/EditModal';
+import CustomFieldEditModal from './custom-field-edit-modal/CustomFieldEditModal';
 import FollowButton from './follow-button/FollowButton';
 import OperatorEvent from './operator-event/OperatorEvent';
 import OperatorGroup from './operator-group/OperatorGroup';
@@ -43,7 +43,7 @@ export default function OperatorLoader() {
 }
 
 function Operator({ rundown, rundownMetadata, customFields, settings }: OperatorData) {
-  const { selectedEventId } = useSelectedEventId();
+  const selectedEventId = useSelectedEventId();
   const { subscribe, mainSource, secondarySource, shouldEdit, hidePast, showStart } = useOperatorOptions();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
@@ -118,7 +118,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
   return (
     <div className={style.operatorContainer} data-testid='operator-view'>
       <ViewParamsEditor target={OntimeView.Operator} viewOptions={operatorOptions} />
-      {editEvent && <EditModal event={editEvent} onClose={() => setEditEvent(null)} />}
+      {editEvent && <CustomFieldEditModal event={editEvent} onClose={() => setEditEvent(null)} />}
 
       <StatusBar />
 

apps/client/src/features/operator/custom-field-edit-modal/CustomFieldEditModal.tsx

@@ -9,14 +9,14 @@ import Textarea from '../../../common/components/input/textarea/Textarea';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { EditEvent } from '../operator.types';
 
-import style from './EditModal.module.scss';
+import style from './CustomFieldEditModal.module.scss';
 
-interface EditModalProps {
+interface CustomFieldEditModalProps {
   event: EditEvent;
   onClose: () => void;
 }
 
-export default function EditModal(props: EditModalProps) {
+export default function CustomFieldEditModal(props: CustomFieldEditModalProps) {
   const { event, onClose } = props;
 
   const { updateEntry } = useEntryActions();

apps/client/src/features/overview/CuesheetOverview.tsx

@@ -2,7 +2,13 @@ import { memo, PropsWithChildren } from 'react';
 
 import { useIsMobileScreen } from '../../common/hooks/useIsMobileScreen';
 
-import { ClockOverview, MetadataTimes, OffsetOverview, StartTimes, TimerOverview } from './composite/TimeElements';
+import {
+  ClockOverview,
+  MetadataTimes,
+  OffsetOverview,
+  StartTimesRuntime,
+  TimerOverview,
+} from './composite/TimeElements';
 import TitleOverview from './composite/TitleOverview';
 import { OverviewWrapper } from './OverviewWrapper';
 
@@ -10,8 +16,10 @@ export default memo(CuesheetOverview);
 function CuesheetOverview({ children }: PropsWithChildren) {
   const isMobileScreen = useIsMobileScreen();
 
-  if (isMobileScreen) return <CuesheetMobile>{children}</CuesheetMobile>;
-  else return <CuesheetDesktop>{children}</CuesheetDesktop>;
+  if (isMobileScreen) {
+    return <CuesheetMobile>{children}</CuesheetMobile>;
+  }
+  return <CuesheetDesktop>{children}</CuesheetDesktop>;
 }
 
 function CuesheetMobile({ children }: PropsWithChildren) {
@@ -27,7 +35,7 @@ function CuesheetDesktop({ children }: PropsWithChildren) {
   return (
     <OverviewWrapper navElements={children}>
       <TitleOverview />
-      <StartTimes shouldFormat />
+      <StartTimesRuntime shouldFormat />
       <TimerOverview />
       <OffsetOverview />
       <MetadataTimes />

apps/client/src/features/overview/EditorOverview.tsx

@@ -1,19 +1,73 @@
 import { memo, PropsWithChildren } from 'react';
 
-import { ClockOverview, MetadataTimes, OffsetOverview, ProgressOverview, StartTimes } from './composite/TimeElements';
+import { EditorLayoutMode, useEditorLayout } from '../../views/editor/useEditorLayout';
+
+import {
+  ClockOverview,
+  MetadataTimes,
+  OffsetOverview,
+  PlanningStats,
+  ProgressOverview,
+  StartTimesPlanning,
+  StartTimesRuntime,
+} from './composite/TimeElements';
 import TitleOverview from './composite/TitleOverview';
 import { OverviewWrapper } from './OverviewWrapper';
 
+import style from './Overview.module.scss';
+
 export default memo(EditorOverview);
+
 function EditorOverview({ children }: PropsWithChildren) {
+  const { layoutMode } = useEditorLayout();
+
   return (
     <OverviewWrapper navElements={children}>
-      <TitleOverview />
-      <StartTimes />
-      <ProgressOverview />
-      <OffsetOverview />
-      <MetadataTimes />
-      <ClockOverview />
+      {layoutMode === EditorLayoutMode.PLANNING && <OverviewPlanning />}
+      {layoutMode === EditorLayoutMode.TRACKING && <OverviewTracking />}
+      {layoutMode === EditorLayoutMode.CONTROL && <OverviewControl />}
     </OverviewWrapper>
   );
 }
+
+function OverviewPlanning() {
+  return (
+    <>
+      <div className={style.inline}>
+        <TitleOverview />
+        <StartTimesPlanning />
+        <PlanningStats />
+      </div>
+      <ClockOverview />
+    </>
+  );
+}
+
+function OverviewTracking() {
+  return (
+    <>
+      <div className={style.inline}>
+        <StartTimesRuntime />
+        <ProgressOverview />
+        <OffsetOverview />
+      </div>
+      <MetadataTimes />
+      <ClockOverview />
+    </>
+  );
+}
+
+function OverviewControl() {
+  return (
+    <>
+      <TitleOverview />
+      <div className={style.inline}>
+        <StartTimesRuntime />
+        <ProgressOverview />
+        <OffsetOverview />
+      </div>
+      <MetadataTimes />
+      <ClockOverview />
+    </>
+  );
+}

apps/client/src/features/overview/Overview.module.scss

@@ -29,11 +29,22 @@
 }
 
 .info {
-  flex: 1;
   padding-left: 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  overflow-x: auto;
-  overflow-y: hidden;
+  width: max-content;
+  height: 100%;
+}
+
+.infoScroll {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+}
+
+.inline {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }

apps/client/src/features/overview/OverviewWrapper.tsx

@@ -1,6 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { ErrorBoundary } from '@sentry/react';
 
+import ScrollArea from '../../common/components/scroll-area/ScrollArea';
 import { useIsOnline } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';
 
@@ -11,12 +12,20 @@ interface OverviewWrapperProps {
 }
 
 export function OverviewWrapper({ navElements, children }: PropsWithChildren<OverviewWrapperProps>) {
-  const { isOnline } = useIsOnline();
+  const isOnline = useIsOnline();
+
   return (
     <div className={cx([style.overview, !isOnline && style.isOffline])}>
       <ErrorBoundary>
         <div className={style.nav}>{navElements}</div>
-        <div className={style.info}>{children}</div>
+        <ScrollArea
+          className={style.infoScroll}
+          contentClassName={style.info}
+          contentStyle={{ minWidth: '100%' }}
+          orientation='horizontal'
+        >
+          {children}
+        </ScrollArea>
       </ErrorBoundary>
     </div>
   );

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

@@ -14,6 +14,13 @@
   gap: 0.5rem;
 }
 
+.row2 {
+  display: grid;
+  grid-template-columns: 3rem 9rem;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .metadataRow {
   display: grid;
   grid-template-columns: minmax(3rem, 10rem) 8rem 8rem;

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

@@ -27,7 +27,7 @@ import {
 import { useEntry } from '../../../common/hooks-query/useRundown';
 import { getOffsetState, getOffsetText } from '../../../common/utils/offset';
 import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
-import { formatTime } from '../../../common/utils/time';
+import { formatDuration, formatTime } from '../../../common/utils/time';
 import SuperscriptPeriod from '../../../views/common/superscript-time/SuperscriptPeriod';
 import { calculateEndAndDaySpan, formatDueTime } from '../overview.utils';
 
@@ -39,30 +39,22 @@ interface OverviewTimeElementsProps {
   shouldFormat?: boolean;
 }
 
-export function StartTimes({ shouldFormat }: OverviewTimeElementsProps) {
+const timeFormatOptions = { format12: 'hh:mm:ss a', format24: 'HH:mm:ss' };
+
+function formatTimeValue(time: number | null, shouldFormat: boolean | undefined): string {
+  if (time === null) return timerPlaceholder;
+  if (shouldFormat) return formatTime(time, timeFormatOptions);
+  return millisToString(time, { fallback: timerPlaceholder });
+}
+
+export function StartTimesRuntime({ shouldFormat }: OverviewTimeElementsProps) {
   const { plannedEnd, plannedStart, actualStart } = useStartTimesOverview();
 
-  const formatOptions = { format12: 'hh:mm:ss a', format24: 'HH:mm:ss' };
-
-  const plannedStartText = (() => {
-    if (plannedStart === null) return timerPlaceholder;
-    if (shouldFormat) return formatTime(plannedStart, formatOptions);
-    return millisToString(plannedStart, { fallback: timerPlaceholder });
-  })();
-
-  const actualStartText = (() => {
-    if (actualStart === null) return timerPlaceholder;
-    if (shouldFormat) return formatTime(actualStart, formatOptions);
-    return millisToString(actualStart, { fallback: timerPlaceholder });
-  })();
+  const plannedStartText = formatTimeValue(plannedStart, shouldFormat);
+  const actualStartText = formatTimeValue(actualStart, shouldFormat);
 
   const [maybePlannedEnd, maybePlannedDaySpan] = useMemo(() => calculateEndAndDaySpan(plannedEnd), [plannedEnd]);
-
-  const plannedEndText = (() => {
-    if (maybePlannedEnd === null) return timerPlaceholder;
-    if (shouldFormat) return formatTime(maybePlannedEnd, formatOptions);
-    return millisToString(maybePlannedEnd, { fallback: timerPlaceholder });
-  })();
+  const plannedEndText = formatTimeValue(maybePlannedEnd, shouldFormat);
 
   const multipleDays = maybePlannedDaySpan > 0;
   const plannedEndTooltip = multipleDays
@@ -122,19 +114,68 @@ export function StartTimes({ shouldFormat }: OverviewTimeElementsProps) {
   );
 }
 
+export function StartTimesPlanning({ shouldFormat }: OverviewTimeElementsProps) {
+  const { plannedEnd, plannedStart } = useStartTimesOverview();
+
+  const plannedStartText = formatTimeValue(plannedStart, shouldFormat);
+
+  const [maybePlannedEnd, maybePlannedDaySpan] = useMemo(() => calculateEndAndDaySpan(plannedEnd), [plannedEnd]);
+  const plannedEndText = formatTimeValue(maybePlannedEnd, shouldFormat);
+
+  const multipleDays = maybePlannedDaySpan > 0;
+  const plannedEndTooltip = multipleDays
+    ? `Planned end time (rundown spans over ${maybePlannedDaySpan + 1} days)`
+    : 'Planned end time';
+
+  return (
+    <div className={style.column}>
+      <div className={style.row2}>
+        <span className={style.label}>Start</span>
+        <Tooltip
+          text='Planned start time'
+          render={
+            <div className={style.labelledElement}>
+              <TbCalendarPin className={style.icon} />
+              <SuperscriptPeriod
+                className={cx([style.time, plannedStart === null && style.muted])}
+                time={plannedStartText}
+              />
+            </div>
+          }
+        />
+      </div>
+
+      <div className={style.row2}>
+        <span className={style.label}>End</span>
+        <Tooltip
+          text={plannedEndTooltip}
+          render={
+            <div className={style.labelledElement}>
+              <TbCalendarPin className={style.icon} />
+              <SuperscriptPeriod
+                className={cx([style.time, plannedEnd === null && style.muted])}
+                time={plannedEndText}
+              />
+              {multipleDays && (
+                <span className={cx([style.time, style.daySpan])} data-day-offset={maybePlannedDaySpan} />
+              )}
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
 /**
  * Shows the expected end for the rundown
  * Extracted to improve performance as this is a ticking value
  */
 function RundownExpectedEnd({ shouldFormat }: OverviewTimeElementsProps) {
-  const { expectedEnd } = useRundownExpectedEnd();
+  const expectedEnd = useRundownExpectedEnd();
 
   const [maybeExpectedEnd, maybeExpectedDaySpan] = useMemo(() => calculateEndAndDaySpan(expectedEnd), [expectedEnd]);
-  const maybeExpectedEndText = (() => {
-    if (maybeExpectedEnd === null) return timerPlaceholder;
-    if (shouldFormat) return formatTime(maybeExpectedEnd, { format12: 'hh:mm:ss a', format24: 'HH:mm:ss' });
-    return millisToString(maybeExpectedEnd, { fallback: timerPlaceholder });
-  })();
+  const maybeExpectedEndText = formatTimeValue(maybeExpectedEnd, shouldFormat);
 
   const multipleDays = maybeExpectedEnd !== null && maybeExpectedDaySpan > 0;
   const tooltip = multipleDays
@@ -169,7 +210,7 @@ export function MetadataTimes() {
 
 function GroupTimes() {
   const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback } = useGroupTimerOverView();
-  const { currentGroupId } = useCurrentGroupId();
+  const currentGroupId = useCurrentGroupId();
   const group = useEntry(currentGroupId) as OntimeGroup | null;
 
   const active = isPlaybackActive(playback);
@@ -298,7 +339,7 @@ export function OffsetOverview() {
 }
 
 export function ClockOverview({ shouldFormat, className }: OverviewTimeElementsProps & { className?: string }) {
-  const { clock } = useClock();
+  const clock = useClock();
   const formattedClock = shouldFormat ? formatTime(clock) : millisToString(clock);
 
   return (
@@ -316,11 +357,27 @@ export function TimerOverview({ className }: { className?: string }) {
   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 = (() => {
+
+  function getTimerState(): 'waiting' | 'muted' | 'active' {
     if (isWaiting) return 'waiting';
     if (timer.current === null) return 'muted';
     return 'active';
-  })();
+  }
 
-  return <TimeColumn label={title} value={display} state={timerState} className={className} />;
+  return <TimeColumn label={title} value={display} state={getTimerState()} className={className} />;
+}
+
+export function PlanningStats() {
+  const { numEvents } = useProgressOverview();
+  const { plannedEnd, plannedStart } = useStartTimesOverview();
+
+  const hasTimes = plannedStart !== null && plannedEnd !== null;
+  const formattedDuration = hasTimes ? formatDuration(plannedEnd - plannedStart) : timerPlaceholder;
+
+  return (
+    <>
+      <TimeColumn label='Total duration' value={formattedDuration} />
+      <TimeColumn label='Events' value={String(numEvents)} />
+    </>
+  );
 }

apps/client/src/features/rundown/Rundown.module.scss

@@ -4,9 +4,14 @@
 }
 
 .rundownContainer {
-  margin-top: 1rem;
-  overflow-y: scroll;
-  height: 100%;
+  padding-top: 1rem;
+  flex: 1 1 auto;
+  min-height: 0;
+
+  :is([data-target='small-device']) & {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 .list {
@@ -18,6 +23,7 @@
   :is([data-target='small-device']) & {
     padding-inline: 0;
     overflow-x: auto;
+    min-width: max-content;
   }
 }
 

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

@@ -1,452 +1,191 @@
-import { Fragment, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { type HTMLProps, forwardRef, Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TbFlagFilled } from 'react-icons/tb';
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverEvent,
-  DragStartEvent,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { closestCenter, DndContext } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { useHotkeys, useSessionStorage } from '@mantine/hooks';
 import {
   type EntryId,
-  type MaybeString,
-  type Rundown,
+  type Rundown as RundownType,
   isOntimeEvent,
   isOntimeGroup,
-  OntimeEntry,
   Playback,
   SupportedEntry,
 } from 'ontime-types';
-import {
-  getFirstNormal,
-  getLastNormal,
-  getNextGroupNormal,
-  getNextNormal,
-  getPreviousGroupNormal,
-  getPreviousNormal,
-  reorderArray,
-} from 'ontime-utils';
 
-import { useEntryActions } from '../../common/hooks/useEntryAction';
-import useFollowComponent from '../../common/hooks/useFollowComponent';
-import { useRundownEditor } from '../../common/hooks/useSocket';
+import { useEntryActionsContext } from '../../common/context/EntryActionsContext';
 import { useEntryCopy } from '../../common/stores/entryCopyStore';
 import { lastMetadataKey, RundownMetadataObject } from '../../common/utils/rundownMetadata';
-import { AppMode, sessionKeys } from '../../ontimeConfig';
+import { AppMode } from '../../ontimeConfig';
 
 import QuickAddButtons from './entry-editor/quick-add-buttons/QuickAddButtons';
 import QuickAddInline from './entry-editor/quick-add-cursor/QuickAddInline';
+import { useRundownCommands } from './hooks/useRundownCommands';
+import { useRundownDnd } from './hooks/useRundownDnd';
+import { useRundownKeyboard } from './hooks/useRundownKeyboard';
 import RundownGroup from './rundown-group/RundownGroup';
 import RundownGroupEnd from './rundown-group/RundownGroupEnd';
-import { canDrop, makeSortableList } from './rundown.utils';
+import { filterVisibleEntries, makeSortableList } from './rundown.utils';
 import RundownEmpty from './RundownEmpty';
+import RundownEntry from './RundownEntry';
+import { useCollapsedGroups } from './useCollapsedGroups';
+import { useEditorFollowMode } from './useEditorFollowMode';
 import { useEventSelection } from './useEventSelection';
 
 import style from './Rundown.module.scss';
 
-const RundownEntry = lazy(() => import('./RundownEntry'));
-
 interface RundownProps {
-  data: Rundown;
+  entries: RundownType['entries'];
+  id: RundownType['id'];
+  order: RundownType['order'];
+  flatOrder: RundownType['flatOrder'];
   rundownMetadata: RundownMetadataObject;
+  featureData: {
+    playback: Playback;
+    selectedEventId: EntryId | null;
+    nextEventId: EntryId | null;
+  };
 }
 
-export default function Rundown({ data, rundownMetadata }: RundownProps) {
+export default function Rundown({ order, flatOrder, entries, id, rundownMetadata, featureData }: RundownProps) {
+  // invoke the compiler for the component
   'use memo';
 
-  const { order, entries, id } = data;
-  // we create a copy of the rundown with a data structured aligned with what dnd-kit needs
-  const featureData = useRundownEditor();
   const [sortableData, setSortableData] = useState<EntryId[]>(() => makeSortableList(order, entries));
-  const [metadata, setMetadata] = useState(rundownMetadata);
-  const [collapsedGroups, setCollapsedGroups] = useSessionStorage<EntryId[]>({
-    // we ensure that this is unique to the rundown
-    key: `rundown.${id}-editor-collapsed-groups`,
-    defaultValue: [],
-  });
-  const collapsedGroupSet = useMemo(() => new Set(collapsedGroups), [collapsedGroups]);
-
-  const { addEntry, clone, deleteEntry, move, reorderEntry } = useEntryActions();
-  const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);
-
-  // cursor
-  const [editorMode] = useSessionStorage<AppMode>({
-    key: sessionKeys.editorMode,
-    defaultValue: AppMode.Edit,
-  });
-
-  const clearSelectedEvents = useEventSelection((state) => state.clearSelectedEvents);
-  const setSelectedEvents = useEventSelection((state) => state.setSelectedEvents);
-  const cursor = useEventSelection((state) => state.cursor);
-
-  const cursorRef = useRef<HTMLDivElement | null>(null);
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-  useFollowComponent({
-    followRef: cursorRef,
-    scrollRef,
-    doFollow: true,
-    followTrigger: editorMode === AppMode.Edit ? cursor : featureData?.selectedEventId,
-  });
-
-  // DND KIT
-  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
-
-  const deleteAtCursor = useCallback(
-    (cursor: string | null) => {
-      if (!cursor) return;
-      const { entry, index } = getPreviousNormal(entries, order, cursor);
-      deleteEntry([cursor]);
-      if (entry && index !== null) {
-        setSelectedEvents({ id: entry.id, selectMode: 'click', index });
-      }
-    },
-    [entries, order, deleteEntry, setSelectedEvents],
-  );
-
-  const insertCopyAtId = useCallback(
-    (atId: string | null, above = false) => {
-      // lazily get the value from the store
-      const { entryCopyId } = useEntryCopy.getState();
-      if (entryCopyId === null || !entries[entryCopyId]) {
-        // we cant clone without selection
-        return;
-      }
-
-      let normalisedAtId = atId;
-
-      const elementToCopy = entries[entryCopyId];
-      const refElement = atId ? entries[atId] : undefined;
-
-      if (refElement && 'parent' in refElement && refElement.parent && elementToCopy.type === SupportedEntry.Group) {
-        normalisedAtId = refElement.parent;
-      }
-
-      clone(entryCopyId, {
-        after: above ? undefined : normalisedAtId ?? undefined,
-        // if we don't have a cursor add the new event on top
-        before: above ? normalisedAtId ?? undefined : undefined,
-      });
-    },
-    [entries, clone],
-  );
+  const [metadata, setMetadata] = useState<RundownMetadataObject>(rundownMetadata);
 
   /**
-   * Add a new item referring to an existing one
+   * We need to keep a copy of the events we receive to
+   * workaround issues with dnd-kit optimistic updates
    */
-  const insertAtId = useCallback(
-    (patch: Partial<OntimeEntry> & { type: SupportedEntry }, id: MaybeString, above = false) => {
-      addEntry(patch, {
-        after: id && !above ? id : undefined,
-        before: id && above ? id : undefined,
-        lastEventId: !above && id ? id : undefined,
-      });
-    },
-    [addEntry],
-  );
-
-  const selectGroup = useCallback(
-    (cursor: string | null, direction: 'up' | 'down') => {
-      if (order.length < 1) {
-        return;
-      }
-      let newCursor = cursor;
-      if (cursor === null) {
-        // there is no cursor, we select the first or last depending on direction
-        const selected = direction === 'up' ? getLastNormal(entries, order) : getFirstNormal(entries, order);
-
-        if (isOntimeGroup(selected)) {
-          setSelectedEvents({ id: selected.id, selectMode: 'click', index: direction === 'up' ? order.length : 0 });
-          return;
-        }
-        newCursor = selected?.id ?? null;
-      }
-
-      if (newCursor === null) {
-        return;
-      }
-
-      // otherwise we select the next or previous
-      const selected =
-        direction === 'up'
-          ? 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 });
-      }
-    },
-    [order, entries, setSelectedEvents],
-  );
-
-  const selectEntry = useCallback(
-    (cursor: string | null, direction: 'up' | 'down') => {
-      if (order.length < 1) {
-        return;
-      }
-
-      if (cursor === null) {
-        // there is no cursor, we select the first or last depending on direction if it exists
-        const selected = direction === 'up' ? getLastNormal(entries, order) : getFirstNormal(entries, order);
-        if (selected !== null) {
-          setSelectedEvents({ id: selected.id, selectMode: 'click', index: direction === 'up' ? order.length : 0 });
-        }
-        return;
-      }
-
-      // otherwise we select the next or previous
-      const selected =
-        direction === 'up' ? getPreviousNormal(entries, order, cursor) : getNextNormal(entries, order, cursor);
-
-      if (selected.entry !== null && selected.index !== null) {
-        setSelectedEvents({ id: selected.entry.id, selectMode: 'click', index: selected.index });
-      }
-    },
-    [order, entries, setSelectedEvents],
-  );
-
-  /**
-   * Checks whether a group is collapsed
-   */
-  const getIsCollapsed = useCallback(
-    (groupId: EntryId): boolean => {
-      return collapsedGroupSet.has(groupId);
-    },
-    [collapsedGroupSet],
-  );
-
-  /**
-   * Handles logic for collapsing groups
-   */
-  const handleCollapseGroup = useCallback(
-    (collapsed: boolean, groupId: EntryId) => {
-      setCollapsedGroups((prev) => {
-        const isCollapsed = getIsCollapsed(groupId);
-        if (collapsed && !isCollapsed) {
-          const newSet = new Set(prev).add(groupId);
-          return [...newSet];
-        }
-        if (!collapsed && isCollapsed) {
-          return [...prev].filter((id) => id !== groupId);
-        }
-        return prev;
-      });
-    },
-    [getIsCollapsed, setCollapsedGroups],
-  );
-
-  const moveEntry = useCallback(
-    async (cursor: EntryId | null, direction: 'up' | 'down') => {
-      if (cursor == null) {
-        return;
-      }
-
-      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],
-  );
-
-  // shortcuts
-  useHotkeys([
-    ['alt + ArrowDown', () => selectEntry(cursor, 'down'), { preventDefault: true, usePhysicalKeys: true }],
-    ['alt + ArrowUp', () => selectEntry(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 }],
-
-    ['Escape', () => clearSelectedEvents(), { preventDefault: true, usePhysicalKeys: true }],
-
-    ['mod + Backspace', () => deleteAtCursor(cursor), { preventDefault: true, usePhysicalKeys: true }],
-
-    [
-      'alt + E',
-      () => insertAtId({ type: SupportedEntry.Event }, cursor),
-      { preventDefault: true, usePhysicalKeys: true },
-    ],
-    [
-      'alt + shift + E',
-      () => insertAtId({ type: SupportedEntry.Event }, cursor, true),
-      { preventDefault: true, usePhysicalKeys: true },
-    ],
-
-    [
-      'alt + G',
-      () => insertAtId({ type: SupportedEntry.Group }, cursor),
-      { preventDefault: true, usePhysicalKeys: true },
-    ],
-    [
-      'alt + shift + G',
-      () => insertAtId({ type: SupportedEntry.Group }, cursor, true),
-      { preventDefault: true, usePhysicalKeys: true },
-    ],
-
-    [
-      'alt + D',
-      () => insertAtId({ type: SupportedEntry.Delay }, cursor),
-      { preventDefault: true, usePhysicalKeys: true },
-    ],
-    [
-      'alt + shift + D',
-      () => insertAtId({ type: SupportedEntry.Delay }, cursor, true),
-      { preventDefault: true, usePhysicalKeys: true },
-    ],
-
-    [
-      'alt + M',
-      () => insertAtId({ type: SupportedEntry.Milestone }, cursor),
-      { preventDefault: true, usePhysicalKeys: true },
-    ],
-    [
-      'alt + shift + M',
-      () => insertAtId({ type: SupportedEntry.Milestone }, cursor, true),
-      { preventDefault: true, usePhysicalKeys: true },
-    ],
-
-    ['mod + C', () => setEntryCopyId(cursor)],
-    ['mod + V', () => insertCopyAtId(cursor)],
-    ['mod + shift + V', () => insertCopyAtId(cursor, true), { preventDefault: true, usePhysicalKeys: true }],
-
-    ['alt + backspace', () => deleteAtCursor(cursor), { preventDefault: true, usePhysicalKeys: true }],
-  ]);
-
-  // we copy the state from the store here
-  // to workaround async updates on the drag mutations
   useEffect(() => {
     setSortableData(makeSortableList(order, entries));
     setMetadata(rundownMetadata);
   }, [order, entries, rundownMetadata]);
 
-  // in run mode, we follow the playback selection and open groups as needed
+  const { getIsCollapsed, collapseGroup, expandGroup } = useCollapsedGroups(id);
+
+  const entryActions = useEntryActionsContext();
+  const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);
+
+  // cursor
+  const { editorMode } = useEditorFollowMode();
+
+  const clearSelectedEvents = useEventSelection((state) => state.clearSelectedEvents);
+  const cursor = useEventSelection((state) => state.cursor);
+  const scrollToEntry = useEventSelection((state) => state.scrollToEntry);
+  const setScrollHandler = useEventSelection((state) => state.setScrollHandler);
+  const selectEntry = useEventSelection((state) => state.setSelectedEvents);
+
+  const cursorRef = useRef<HTMLDivElement | null>(null);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const virtuosoRef = useRef<VirtuosoHandle | null>(null);
+
+  /**
+   * Handles logic for collapsing groups
+   */
+  const handleCollapseGroup = useCallback(
+    (collapsed: boolean, groupId: EntryId | undefined) => {
+      if (collapsed) {
+        collapseGroup(groupId);
+      } else {
+        expandGroup(groupId);
+      }
+    },
+    [collapseGroup, expandGroup],
+  );
+
+  // Commands layer - business logic
+  const commands = useRundownCommands({
+    entries,
+    flatOrder,
+    entryActions,
+    selectEntry,
+    handleCollapseGroup,
+  });
+
+  // Keyboard shortcuts
+  useRundownKeyboard({
+    cursor,
+    commands,
+    clearSelectedEvents,
+    setEntryCopyId,
+  });
+
+  // DND handlers
+  const dnd = useRundownDnd({
+    entries,
+    sortableData,
+    setSortableData,
+    getIsCollapsed,
+    handleCollapseGroup,
+    entryActions,
+  });
+
+  // Filter visible data to exclude collapsed items
+  // DND-kit (SortableContext) needs the full sortableData for drag calculations
+  // Virtuoso only renders visibleData to avoid null items that reserve space
+  const visibleData = useMemo(() => {
+    return filterVisibleEntries(sortableData, entries, getIsCollapsed);
+  }, [sortableData, entries, getIsCollapsed]);
+
+  // Provide an imperative scroll handler for explicit jumps (finder/keyboard)
   useEffect(() => {
-    if (editorMode !== AppMode.Run || !featureData?.selectedEventId) {
-      return;
-    }
-    const index = order.findIndex((id) => id === featureData.selectedEventId);
-    // @ts-expect-error -- but we safely check if the parent property exists
-    const maybeParent = entries[featureData.selectedEventId]?.parent;
-    if (maybeParent) {
-      // open the group
-      setCollapsedGroups((prev) => [...prev].filter((id) => id !== maybeParent));
-    }
-
-    setSelectedEvents({ id: featureData.selectedEventId, selectMode: 'click', index });
-  }, [editorMode, entries, featureData.selectedEventId, order, setCollapsedGroups, setSelectedEvents]);
-
-  /**
-   * On drag end, we reorder the events
-   */
-  const handleOnDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-
-    if (!over?.id || active.id === over.id) {
-      return;
-    }
-
-    if (!active.data.current || !over.data.current) {
-      return;
-    }
-
-    const fromIndex: number = active.data.current.sortable.index;
-    const toIndex: number = over.data.current.sortable.index;
-    let placement: 'before' | 'after' | 'insert' = fromIndex < toIndex ? 'after' : 'before';
-
-    let destinationId = over.id as EntryId;
-    const isDraggingGroup = active.data.current?.type === SupportedEntry.Group;
-
-    // prevent dropping a group inside another
-    if (
-      isDraggingGroup &&
-      !canDrop(over.data.current.type, over.data.current.parent, placement, getIsCollapsed(destinationId))
-    ) {
-      return;
-    }
-
-    /**
-     * 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-', '');
-      // if we are moving before the end, we use the insert operation
-      if (placement === 'before') {
-        placement = 'insert';
+    setScrollHandler((entryId) => {
+      if (!virtuosoRef.current || dnd.isDraggingRef.current) {
+        return;
       }
-    } else {
-      const group = data.entries[destinationId];
-      // if dragging into a group
-      if (isOntimeGroup(group) && placement === 'after') {
-        if (isDraggingGroup) {
-          // ... and the dragged entry is a group, we know that the group is collapsed, because of the safe check canDrop from before
-          // so we can safely push the dragged event after the group
-          destinationId = group.id;
-        } else if (group.entries.length === 0) {
-          // ... and the group is entry, we insert
-          destinationId = group.id;
-          placement = 'insert';
-        } else {
-          // otherwise we add it to before the first group child
-          destinationId = group.entries[0];
-          placement = 'before';
-        }
+      const index = visibleData.indexOf(entryId);
+      if (index === -1) {
+        return;
       }
-    }
-
-    // keep copy of the current state in case we need to revert
-    const currentEntries = [...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);
+      virtuosoRef.current.scrollToIndex({
+        index,
+        align: 'start',
+        behavior: 'smooth',
+        offset: -100, // show the previous entry for context
+      });
     });
-    reorderEntry(active.id as EntryId, destinationId, placement).catch((_) => {
-      setSortableData(currentEntries);
-    });
-  };
 
-  /**
-   * When we drag a group, we force collapse it
-   * This avoids strange scenarios like dropping a group inside itself
-   */
-  const collapseDraggedGroups = (event: DragStartEvent) => {
-    const isGroup = event.active.data.current?.type === SupportedEntry.Group;
-    if (isGroup) {
-      handleCollapseGroup(true, event.active.id as EntryId);
-    }
-  };
+    return () => {
+      setScrollHandler(null);
+    };
+  }, [visibleData, dnd.isDraggingRef, setScrollHandler]);
 
-  /**
-   * When we drag over a group, we expand it if it is collapsed
-   */
-  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') {
+  // Keep selected cursor visible by expanding its parent group in any mode.
+  // Finder can select entries while layout is in Run mode, where we do not follow cursor scroll.
+  useEffect(() => {
+    if (!cursor) {
       return;
     }
-    if (event.over?.data.current?.type !== 'group') {
+
+    const entry = entries[cursor];
+    if (entry && 'parent' in entry) {
+      expandGroup(entry.parent);
+    }
+  }, [cursor, entries, expandGroup]);
+
+  // Auto-follow behavior in Edit mode: follow the user's cursor
+  useEffect(() => {
+    if (dnd.isDraggingRef.current || editorMode !== AppMode.Edit || !cursor) {
       return;
     }
-    const groupId = event.over?.id as EntryId;
-    const isCollapsed = getIsCollapsed(groupId);
-    if (isCollapsed) {
-      handleCollapseGroup(false, groupId);
-    }
-  };
 
-  if (sortableData.length < 1) {
-    return <RundownEmpty handleAddNew={(type: SupportedEntry) => addEntry({ type })} />;
-  }
+    scrollToEntry(cursor);
+  }, [editorMode, cursor, scrollToEntry, dnd.isDraggingRef]);
+
+  // Auto-follow behavior in Run mode: follow the currently playing event
+  useEffect(() => {
+    if (dnd.isDraggingRef.current || editorMode !== AppMode.Run || !featureData?.selectedEventId) {
+      return;
+    }
+
+    // Open parent group if the target is inside a collapsed group
+    const entry = entries[featureData.selectedEventId];
+    if (entry && 'parent' in entry) {
+      expandGroup(entry.parent);
+    }
+    scrollToEntry(featureData.selectedEventId);
+  }, [editorMode, featureData?.selectedEventId, entries, expandGroup, scrollToEntry, dnd.isDraggingRef]);
 
   // gather presentation options
   const isEditMode = editorMode === AppMode.Edit;
@@ -454,157 +193,146 @@ export default function Rundown({ data, rundownMetadata }: RundownProps) {
   // gather rundown wide data
   const lastEntryId = order.at(-1);
 
+  // Extract primitive values from featureData to avoid unnecessary callback recreations
+  const nextEventId = featureData?.nextEventId;
+  const playback = featureData?.playback;
+
+  // Virtuoso item renderer
+  const itemContent = useCallback(
+    (index: number, entryId: EntryId) => {
+      // Handle end-group pseudo entries
+      const isEndGroup = entryId.startsWith('end-');
+
+      if (isEndGroup) {
+        const parentId = entryId.split('end-')[1];
+        const parentMetadata = metadata[parentId];
+
+        return (
+          <Fragment key={entryId}>
+            {isEditMode && parentMetadata?.groupEntries === 0 && (
+              <QuickAddButtons
+                previousEventId={null}
+                parentGroup={parentId}
+                backgroundColor={parentMetadata?.groupColour}
+              />
+            )}
+            <RundownGroupEnd key={entryId} id={entryId} colour={parentMetadata?.groupColour} />
+          </Fragment>
+        );
+      }
+
+      const entry = entries[entryId];
+      const entryMetadata = metadata[entryId];
+
+      if (!entry || !entryMetadata) {
+        return null;
+      }
+
+      const isNext = nextEventId === entry.id;
+      const hasCursor = entry.id === cursor;
+      const isGroup = isOntimeGroup(entry);
+      const groupColour = entryMetadata.groupColour === '' ? '#9d9d9d' : entryMetadata.groupColour;
+      const isFirst = index === 0;
+      const isLast = entryId === lastEntryId;
+      const parentIdForBefore = entryMetadata.thisId !== entryMetadata.groupId ? entryMetadata.groupId : null;
+      const parentIdForAfter = entryMetadata.groupId;
+      const collapsed = isGroup ? getIsCollapsed(entry.id) : false;
+
+      return (
+        <Fragment key={entry.id}>
+          {/* QuickAddInline before the entry - edit mode only, if there is a cursor, if it is not the first entry */}
+          {isEditMode && hasCursor && !isFirst && (
+            <QuickAddInline placement='before' referenceEntryId={entry.id} parentGroup={parentIdForBefore} />
+          )}
+          {isGroup ? (
+            <RundownGroup data={entry} hasCursor={hasCursor} collapsed={collapsed} onCollapse={handleCollapseGroup} />
+          ) : (
+            <div
+              className={style.entryWrapper}
+              data-testid={`entry-${entryMetadata.eventIndex}`}
+              style={groupColour ? { '--user-bg': groupColour } : {}}
+            >
+              {isOntimeEvent(entry) && (
+                <div className={style.entryIndex}>
+                  {entry.flag && <TbFlagFilled className={style.flag} />}
+                  <div className={style.index}>{entryMetadata.eventIndex}</div>
+                </div>
+              )}
+              <div className={style.entry} key={entry.id} ref={hasCursor ? cursorRef : undefined}>
+                <RundownEntry
+                  type={entry.type}
+                  isPast={entryMetadata.isPast}
+                  eventIndex={entryMetadata.eventIndex}
+                  data={entry}
+                  loaded={entryMetadata.isLoaded}
+                  hasCursor={hasCursor}
+                  isNext={isNext}
+                  isNextDay={entryMetadata.isNextDay}
+                  playback={entryMetadata.isLoaded ? playback : undefined}
+                  isRolling={playback === Playback.Roll}
+                  totalGap={entryMetadata.totalGap}
+                  isLinkedToLoaded={entryMetadata.isLinkedToLoaded}
+                />
+              </div>
+            </div>
+          )}
+          {/* QuickAddInline after the entry - edit mode only, if there is a cursor, if it is not the last entry */}
+          {isEditMode && hasCursor && !isLast && (
+            <QuickAddInline placement='after' referenceEntryId={entry.id} parentGroup={parentIdForAfter} />
+          )}
+        </Fragment>
+      );
+    },
+    [entries, metadata, getIsCollapsed, isEditMode, cursor, nextEventId, playback, lastEntryId, handleCollapseGroup],
+  );
+
+  if (sortableData.length < 1) {
+    return <RundownEmpty handleAddNew={(type: SupportedEntry) => entryActions.addEntry({ type })} />;
+  }
+
   return (
     <div className={style.rundownContainer} ref={scrollRef} data-testid='rundown'>
       <DndContext
-        onDragEnd={handleOnDragEnd}
-        onDragStart={collapseDraggedGroups}
-        onDragOver={expandOverGroup}
-        sensors={sensors}
+        onDragEnd={dnd.handleOnDragEnd}
+        onDragStart={dnd.collapseDraggedGroups}
+        onDragOver={dnd.expandOverGroup}
+        sensors={dnd.sensors}
         collisionDetection={closestCenter}
       >
         <SortableContext items={sortableData} strategy={verticalListSortingStrategy}>
-          <div className={style.list}>
-            {isEditMode && <QuickAddButtons previousEventId={null} parentGroup={null} />}
-            {sortableData.map((entryId, index) => {
-              // 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 isGroupCollapsed = getIsCollapsed(parentId);
-                const parentMetadata = metadata[parentId];
-
-                if (isGroupCollapsed) {
-                  return null;
-                }
-
-                // 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 && parentMetadata?.groupEntries === 0 && (
-                      <QuickAddButtons
-                        previousEventId={null}
-                        parentGroup={parentId}
-                        backgroundColor={parentMetadata?.groupColour}
-                      />
-                    )}
-                    <RundownGroupEnd key={entryId} id={entryId} colour={parentMetadata?.groupColour} />
-                  </Fragment>
-                );
-              }
-
-              // we iterate through a stateful copy of order to make the dnd operations smoother
-              // this means that this can be out of sync with order until the useEffect runs
-              // instead of writing all the logic guards, we simply short circuit rendering here
-              const entry = entries[entryId];
-              const entryMetadata = metadata[entryId];
-              if (!entry || !entryMetadata) return null;
-
-              // if the entry has a parent, and it is collapsed, render nothing
-              if (
-                entry.type !== SupportedEntry.Group &&
-                entryMetadata.groupId !== null &&
-                getIsCollapsed(entryMetadata.groupId)
-              ) {
-                return null;
-              }
-
-              const isNext = featureData?.nextEventId === entry.id;
-              const hasCursor = entry.id === cursor;
-
-              /**
-               * Outside a group, the value will be undefined
-               * If the colour is empty string ''
-               * ie: we are inside a group, but there is no defined colour
-               * we default to $gray-500 #9d9d9d
-               */
-              const groupColour = entryMetadata.groupColour === '' ? '#9d9d9d' : entryMetadata.groupColour;
-
-              const isFirst = index === 0;
-              const isLast = entryId === lastEntryId;
-
-              /**
-               * 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 = entryMetadata.thisId !== entryMetadata.groupId ? entryMetadata.groupId : null;
-              const parentIdForAfter = entryMetadata.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 placement='before' referenceEntryId={entry.id} parentGroup={parentIdForBefore} />
-                  )}
-                  {isOntimeGroup(entry) ? (
-                    <RundownGroup
-                      data={entry}
-                      hasCursor={hasCursor}
-                      collapsed={getIsCollapsed(entry.id)}
-                      onCollapse={handleCollapseGroup}
+          <Virtuoso
+            ref={virtuosoRef}
+            data={visibleData}
+            computeItemKey={(_index, entryId) => entryId}
+            itemContent={itemContent}
+            increaseViewportBy={{ top: 200, bottom: 400 }}
+            style={{ height: '100%' }}
+            components={{
+              Header: isEditMode ? () => <QuickAddButtons previousEventId={null} parentGroup={null} /> : undefined,
+              Footer: () => (
+                <>
+                  {isEditMode && (
+                    <QuickAddButtons
+                      previousEventId={metadata[lastMetadataKey]?.groupId ?? metadata[lastMetadataKey]?.thisId}
+                      parentGroup={null}
                     />
-                  ) : (
-                    <div
-                      className={style.entryWrapper}
-                      data-testid={`entry-${entryMetadata.eventIndex}`}
-                      style={groupColour ? { '--user-bg': groupColour } : {}}
-                    >
-                      {isOntimeEvent(entry) && (
-                        <div className={style.entryIndex}>
-                          {entry.flag && <TbFlagFilled className={style.flag} />}
-                          <div className={style.index}>{entryMetadata.eventIndex}</div>
-                        </div>
-                      )}
-                      <div className={style.entry} key={entry.id} ref={hasCursor ? cursorRef : undefined}>
-                        <RundownEntry
-                          type={entry.type}
-                          isPast={entryMetadata.isPast}
-                          eventIndex={entryMetadata.eventIndex}
-                          data={entry}
-                          loaded={entryMetadata.isLoaded}
-                          hasCursor={hasCursor}
-                          isNext={isNext}
-                          isNextDay={entryMetadata.isNextDay}
-                          playback={entryMetadata.isLoaded ? featureData.playback : undefined}
-                          isRolling={featureData.playback === Playback.Roll}
-                          totalGap={entryMetadata.totalGap}
-                          isLinkedToLoaded={entryMetadata.isLinkedToLoaded}
-                        />
-                      </div>
-                    </div>
                   )}
-                  {/**
-                   * 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 placement='after' referenceEntryId={entry.id} parentGroup={parentIdForAfter} />
-                  )}
-                </Fragment>
-              );
-            })}
-            {isEditMode && (
-              <QuickAddButtons
-                previousEventId={metadata[lastMetadataKey]?.groupId ?? metadata[lastMetadataKey].thisId}
-                parentGroup={null}
-              />
-            )}
-            <div className={style.spacer} />
-          </div>
+                  <div className={style.spacer} />
+                </>
+              ),
+              List: VirtuosoListComponent,
+            }}
+          />
         </SortableContext>
       </DndContext>
     </div>
   );
 }
+
+// Virtuoso components - extracted to prevent recreation on every render
+const VirtuosoListComponent = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ children, ...props }, ref) => (
+  <div ref={ref} {...props} className={style.list}>
+    {children}
+  </div>
+));
+VirtuosoListComponent.displayName = 'VirtuosoListComponent';

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

@@ -32,6 +32,8 @@ export default function RundownEntry({
   totalGap,
   isLinkedToLoaded,
 }: RundownEntryProps) {
+  'use memo';
+
   if (isOntimeEvent(data)) {
     return (
       <RundownEvent

apps/client/src/features/rundown/RundownExport.module.scss

@@ -1,6 +1,7 @@
 .rundownExport {
   height: 100%;
-  flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
+  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
+  min-width: 0;
 
   &.extracted {
     .list {
@@ -20,10 +21,19 @@
   height: 100%;
 }
 
+.rundownRoot {
+  height: calc(100% - 1rem);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
 .list {
   display: flex;
   height: inherit;
   padding-inline: 0;
+  padding-bottom: 0;
   box-shadow: $box-shadow-right;
 
   flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */

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

@@ -5,16 +5,25 @@ import * as Editor from '../../common/components/editor-utils/EditorUtils';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
+import { useEntryActions } from '../../common/hooks/useEntryAction';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../externals';
-import { AppMode, sessionKeys } from '../../ontimeConfig';
+import { AppMode } from '../../ontimeConfig';
+import EntryEditModal from '../../views/cuesheet/cuesheet-edit-modal/EntryEditModal';
+import { EditorLayoutMode, useEditorLayout } from '../../views/editor/useEditorLayout';
 
 import RundownEntryEditor from './entry-editor/RundownEntryEditor';
 import FinderPlacement from './placements/FinderPlacement';
 import { RundownContextMenu } from './rundown-context-menu/RundownContextMenu';
-import RundownWrapper from './RundownWrapper';
+import RundownHeader from './rundown-header/RundownHeader';
+import RundownHeaderMobile from './rundown-header/RundownHeaderMobile';
+import RundownTable from './rundown-table/RundownTable';
+import { RundownViewMode } from './rundown.options';
+import RundownList from './RundownList';
+import { useEditorFollowMode } from './useEditorFollowMode';
 
 import style from './RundownExport.module.scss';
 
@@ -22,59 +31,88 @@ export default memo(RundownExport);
 
 function RundownExport() {
   const isExtracted = window.location.pathname.includes('/rundown');
-  const [editorMode] = useSessionStorage({
-    key: sessionKeys.editorMode,
-    defaultValue: AppMode.Edit,
+  const { editorMode } = useEditorFollowMode();
+  const { layoutMode } = useEditorLayout();
+  const [viewMode, setViewMode] = useSessionStorage<RundownViewMode>({
+    key: 'rundown-view-mode',
+    defaultValue: RundownViewMode.List,
   });
   const isSmallDevice = useIsSmallDevice();
+  const entryActions = useEntryActions();
 
   if (isSmallDevice && isExtracted) {
     return (
-      <ProtectRoute permission='editor'>
-        <div
-          className={cx([style.rundownExport, style.extracted])}
-          data-target='small-device'
-          data-testid='panel-rundown'
-        >
-          <FinderPlacement />
-          <ViewNavigationMenu suppressSettings />
-          <div className={style.rundown}>
-            <ErrorBoundary>
-              <RundownContextMenu>
-                <RundownWrapper isSmallDevice />
-              </RundownContextMenu>
-            </ErrorBoundary>
+      <EntryActionsProvider actions={entryActions}>
+        <ProtectRoute permission='editor'>
+          <div
+            className={cx([style.rundownExport, style.extracted])}
+            data-target='small-device'
+            data-testid='panel-rundown'
+          >
+            <FinderPlacement />
+            <ViewNavigationMenu suppressSettings />
+            <div className={style.rundown}>
+              <ErrorBoundary>
+                <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownContextMenu />
+              </ErrorBoundary>
+            </div>
           </div>
-        </div>
-      </ProtectRoute>
+        </ProtectRoute>
+      </EntryActionsProvider>
     );
   }
 
-  const hideSideBar = isExtracted && editorMode === 'run';
+  const hideSideBar =
+    layoutMode === EditorLayoutMode.TRACKING ||
+    (isExtracted && editorMode === AppMode.Run) ||
+    viewMode === RundownViewMode.Table;
 
   return (
-    <ProtectRoute permission='editor'>
-      <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
-        <FinderPlacement />
-        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
-        <div className={style.rundown}>
-          <Editor.Panel className={style.list}>
-            <ErrorBoundary>
-              {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
-              <RundownContextMenu>
-                <RundownWrapper />
-              </RundownContextMenu>
-            </ErrorBoundary>
-          </Editor.Panel>
-          {!hideSideBar && (
-            <div className={style.side}>
+    <EntryActionsProvider actions={entryActions}>
+      <ProtectRoute permission='editor'>
+        <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
+          <FinderPlacement />
+          {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
+          <div className={style.rundown}>
+            <Editor.Panel className={style.list}>
               <ErrorBoundary>
-                <RundownEntryEditor />
+                {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
+                <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownContextMenu />
               </ErrorBoundary>
-            </div>
-          )}
+            </Editor.Panel>
+            {!hideSideBar && (
+              <div className={style.side}>
+                <ErrorBoundary>
+                  <RundownEntryEditor />
+                </ErrorBoundary>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-    </ProtectRoute>
+      </ProtectRoute>
+    </EntryActionsProvider>
+  );
+}
+
+interface RundownRootProps {
+  isSmallDevice?: boolean;
+  isExtracted?: boolean;
+  viewMode: RundownViewMode;
+  setViewMode: (mode: RundownViewMode) => void;
+}
+
+function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
+  return (
+    <div className={style.rundownRoot}>
+      {isSmallDevice ? (
+        <RundownHeaderMobile viewMode={viewMode} setViewMode={setViewMode} />
+      ) : (
+        <RundownHeader isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
+      )}
+      {viewMode === RundownViewMode.List ? <RundownList /> : <RundownTable />}
+      {viewMode === RundownViewMode.Table && <EntryEditModal />}
+    </div>
   );
 }

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

@@ -0,0 +1,30 @@
+import { memo } from 'react';
+
+import Empty from '../../common/components/state/Empty';
+import { useRundownEditor } from '../../common/hooks/useSocket';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
+
+import Rundown from './Rundown';
+
+export default memo(RundownList);
+function RundownList() {
+  const { data, status, rundownMetadata } = useRundownWithMetadata();
+  const featureData = useRundownEditor();
+
+  const isLoading = status !== 'success' || !data || !rundownMetadata;
+
+  if (isLoading) {
+    return <Empty text='Connecting to server' />;
+  }
+
+  return (
+    <Rundown
+      order={data.order}
+      flatOrder={data.flatOrder}
+      entries={data.entries}
+      id={data.id}
+      rundownMetadata={rundownMetadata}
+      featureData={featureData}
+    />
+  );
+}

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

@@ -1,27 +0,0 @@
-import Empty from '../../common/components/state/Empty';
-import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
-
-import RundownHeader from './rundown-header/RundownHeader';
-import RundownHeaderMobile from './rundown-header/RundownHeaderMobile';
-import Rundown from './Rundown';
-
-import styles from './Rundown.module.scss';
-
-interface RundownWrapperProps {
-  isSmallDevice?: boolean;
-}
-
-export default function RundownWrapper({ isSmallDevice }: RundownWrapperProps) {
-  const { data, status, rundownMetadata } = useRundownWithMetadata();
-
-  return (
-    <div className={styles.rundownWrapper}>
-      {isSmallDevice ? <RundownHeaderMobile /> : <RundownHeader />}
-      {status === 'success' && data && rundownMetadata ? (
-        <Rundown data={data} rundownMetadata={rundownMetadata} />
-      ) : (
-        <Empty text='Connecting to server' />
-      )}
-    </div>
-  );
-}

apps/client/src/features/rundown/common/TitleEditor.tsx

@@ -2,7 +2,7 @@ import { useCallback, useRef } from 'react';
 
 import Input from '../../../common/components/input/input/Input';
 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
-import { useEntryActions } from '../../../common/hooks/useEntryAction';
+import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import { cx } from '../../../common/utils/styleUtils';
 
 import style from './TitleEditor.module.scss';
@@ -15,7 +15,7 @@ interface TitleEditorProps {
 }
 
 export default function TitleEditor({ title, entryId, placeholder, className }: TitleEditorProps) {
-  const { updateEntry } = useEntryActions();
+  const { updateEntry } = useEntryActionsContext();
   const ref = useRef<HTMLInputElement | null>(null);
   const submitCallback = useCallback(
     (text: string) => {

apps/client/src/features/rundown/entry-editor/CuesheetEventEditor.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { isOntimeEvent, isOntimeGroup, isOntimeMilestone, OntimeEntry } from 'ontime-types';
 
 import useRundown from '../../../common/hooks-query/useRundown';
@@ -15,20 +15,14 @@ interface CuesheetEntryEditorProps {
 
 export default function CuesheetEntryEditor({ entryId }: CuesheetEntryEditorProps) {
   const { data } = useRundown();
-  const [entry, setEntry] = useState<OntimeEntry | null>(null);
 
-  useEffect(() => {
+  const entry = useMemo<OntimeEntry | null>(() => {
     if (data.order.length === 0) {
-      setEntry(null);
-      return;
+      return null;
     }
 
     const event = data.entries[entryId];
-    if (event) {
-      setEntry(event);
-    } else {
-      setEntry(null);
-    }
+    return event ?? null;
   }, [entryId, data.order, data.entries]);
 
   if (isOntimeEvent(entry)) {

apps/client/src/features/rundown/entry-editor/EntryEditor.module.scss

@@ -1,6 +1,6 @@
 .cuesheetEditor,
 .rundownEditor {
-  max-height: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow-x: auto;

apps/client/src/features/rundown/entry-editor/EventEditor.tsx

@@ -3,7 +3,7 @@ import { OntimeEvent } from 'ontime-types';
 
 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import AppLink from '../../../common/components/link/app-link/AppLink';
-import { useEntryActions } from '../../../common/hooks/useEntryAction';
+import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 
 import EntryEditorCustomFields from './composite/EventEditorCustomFields';
@@ -22,7 +22,7 @@ interface EventEditorProps {
 
 export default function EventEditor({ event }: EventEditorProps) {
   const { data: customFields } = useCustomFields();
-  const { updateEntry } = useEntryActions();
+  const { updateEntry } = useEntryActionsContext();
 
   const isEditor = window.location.pathname.includes('editor');
 

apps/client/src/features/rundown/entry-editor/EventEditorEmpty.module.scss

@@ -12,8 +12,8 @@
 
 .shortcutSection {
   flex: 1;
-  display: grid;
-  place-content: center;
+  margin-top: 15vh;
+  margin-inline: auto;
   gap: 1rem;
 }
 
@@ -23,12 +23,12 @@
   border-spacing: 4rem 0;
 
   tr {
+    white-space: nowrap;
     td:nth-child(odd) {
       text-align: left;
     }
     td:nth-child(even) {
       text-align: right;
-      white-space: nowrap;
     }
   }
 }

apps/client/src/features/rundown/entry-editor/EventEditorEmpty.tsx

@@ -53,6 +53,22 @@ function EventEditorEmpty() {
                 <Kbd>↓</Kbd>
               </td>
             </tr>
+            <tr>
+              <td>Jump to top / bottom</td>
+              <td>
+                <Kbd>Home</Kbd>
+                <AuxKey>/</AuxKey>
+                <Kbd>End</Kbd>
+              </td>
+            </tr>
+            <tr>
+              <td>Page up / down</td>
+              <td>
+                <Kbd>PgUp</Kbd>
+                <AuxKey>/</AuxKey>
+                <Kbd>PgDn</Kbd>
+              </td>
+            </tr>
             <tr>
               <td>Deselect entry</td>
               <td>
@@ -80,6 +96,14 @@ function EventEditorEmpty() {
                 <Kbd>C</Kbd>
               </td>
             </tr>
+            <tr>
+              <td>Cut selected entry</td>
+              <td>
+                <Kbd>{deviceMod}</Kbd>
+                <AuxKey>+</AuxKey>
+                <Kbd>X</Kbd>
+              </td>
+            </tr>
             <tr>
               <td>Paste above</td>
               <td>
@@ -99,10 +123,18 @@ function EventEditorEmpty() {
               </td>
             </tr>
             <tr>
-              <td>Delete selected entry</td>
+              <td>Clone selected entry</td>
               <td>
                 <Kbd>{deviceMod}</Kbd>
                 <AuxKey>+</AuxKey>
+                <Kbd>D</Kbd>
+              </td>
+            </tr>
+            <tr>
+              <td>Delete selected entry</td>
+              <td>
+                <Kbd>{deviceAlt}</Kbd>
+                <AuxKey>+</AuxKey>
                 <Kbd>Backspace</Kbd>
               </td>
             </tr>
@@ -140,7 +172,7 @@ function EventEditorEmpty() {
                 <AuxKey>+</AuxKey>
                 <Kbd>Shift</Kbd>
                 <AuxKey>+</AuxKey>
-                <Kbd>M</Kbd>
+                <Kbd>G</Kbd>
               </td>
             </tr>
             <tr>
@@ -148,7 +180,7 @@ function EventEditorEmpty() {
               <td>
                 <Kbd>{deviceAlt}</Kbd>
                 <AuxKey>+</AuxKey>
-                <Kbd>G</Kbd>
+                <Kbd>M</Kbd>
               </td>
             </tr>
             <tr>

apps/client/src/features/rundown/entry-editor/GroupEditor.tsx

@@ -5,7 +5,7 @@ import { millisToString } from 'ontime-utils';
 import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import SwatchSelect from '../../../common/components/input/colour-input/SwatchSelect';
 import AppLink from '../../../common/components/link/app-link/AppLink';
-import { useEntryActions } from '../../../common/hooks/useEntryAction';
+import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import { getOffsetState } from '../../../common/utils/offset';
 import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
@@ -28,7 +28,7 @@ interface GroupEditorProps {
 
 export default function GroupEditor({ group }: GroupEditorProps) {
   const { data: customFields } = useCustomFields();
-  const { updateEntry } = useEntryActions();
+  const { updateEntry } = useEntryActionsContext();
 
   const handleSubmit = useCallback(
     (field: GroupEditorUpdateTextFields | GroupEditorUpdateMaybeNumberFields, value: string | MaybeNumber) => {

apps/client/src/features/rundown/entry-editor/MilestoneEditor.tsx

@@ -5,7 +5,7 @@ import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import SwatchSelect from '../../../common/components/input/colour-input/SwatchSelect';
 import Input from '../../../common/components/input/input/Input';
 import AppLink from '../../../common/components/link/app-link/AppLink';
-import { useEntryActions } from '../../../common/hooks/useEntryAction';
+import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 
 import EntryEditorCustomFields from './composite/EventEditorCustomFields';
@@ -22,7 +22,7 @@ interface MilestoneEditorProps {
 }
 export default function MilestoneEditor({ milestone }: MilestoneEditorProps) {
   const { data: customFields } = useCustomFields();
-  const { updateEntry } = useEntryActions();
+  const { updateEntry } = useEntryActionsContext();
 
   const handleSubmit = useCallback(
     (field: MilestoneEditorUpdateTextFields, value: string) => {

apps/client/src/features/rundown/entry-editor/RundownEntryEditor.tsx

@@ -1,13 +1,5 @@
-import { useEffect, useState } from 'react';
-import {
-  isOntimeDelay,
-  isOntimeEvent,
-  isOntimeGroup,
-  isOntimeMilestone,
-  OntimeEvent,
-  OntimeGroup,
-  OntimeMilestone,
-} from 'ontime-types';
+import { useMemo } from 'react';
+import { isOntimeEvent, isOntimeGroup, isOntimeMilestone, OntimeEntry } from 'ontime-types';
 
 import useRundown from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../useEventSelection';
@@ -24,27 +16,19 @@ export default function RundownEntryEditor() {
   const selectedEvents = useEventSelection((state) => state.selectedEvents);
   const { data } = useRundown();
 
-  const [entry, setEntry] = useState<OntimeEvent | OntimeGroup | OntimeMilestone | null>(null);
-
-  useEffect(() => {
+  const entry = useMemo<OntimeEntry | null>(() => {
     if (data.order.length === 0) {
-      setEntry(null);
-      return;
+      return null;
     }
 
     const selectedEventId = Array.from(selectedEvents).at(0);
     if (!selectedEventId) {
-      setEntry(null);
-      return;
+      return null;
     }
-    const event = data.entries[selectedEventId];
 
-    if (event && !isOntimeDelay(event)) {
-      setEntry(event);
-    } else {
-      setEntry(null);
-    }
-  }, [data.order, data.entries, selectedEvents]);
+    const event = data.entries[selectedEventId];
+    return event ?? null;
+  }, [data.order.length, data.entries, selectedEvents]);
 
   if (!entry) {
     return <EventEditorEmpty />;

apps/client/src/features/rundown/entry-editor/composite/EventEditorTimes.tsx

@@ -8,7 +8,7 @@ import TimeInput from '../../../../common/components/input/time-input/TimeInput'
 import Select from '../../../../common/components/select/Select';
 import Switch from '../../../../common/components/switch/Switch';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
-import { useEntryActions } from '../../../../common/hooks/useEntryAction';
+import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 import { millisToDelayString } from '../../../../common/utils/dateConfig';
 import TimeInputFlow from '../../time-input-flow/TimeInputFlow';
 
@@ -46,7 +46,7 @@ function EventEditorTimes({
   timeWarning,
   timeDanger,
 }: EventEditorTimesProps) {
-  const { updateEntry } = useEntryActions();
+  const { updateEntry } = useEntryActionsContext();
 
   const handleSubmit = (field: HandledActions, value: string | boolean) => {
     if (field === 'countToEnd') {

apps/client/src/features/rundown/entry-editor/composite/EventEditorTitles.tsx

@@ -5,7 +5,7 @@ import * as Editor from '../../../../common/components/editor-utils/EditorUtils'
 import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
 import Input from '../../../../common/components/input/input/Input';
 import Switch from '../../../../common/components/switch/Switch';
-import { useEntryActions } from '../../../../common/hooks/useEntryAction';
+import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 
 import EventTextArea from './EventTextArea';
 import EntryEditorTextInput from './EventTextInput';
@@ -23,7 +23,7 @@ interface EventEditorTitlesProps {
 
 export default memo(EventEditorTitles);
 function EventEditorTitles({ eventId, cue, flag, title, note, colour }: EventEditorTitlesProps) {
-  const { updateEntry } = useEntryActions();
+  const { updateEntry } = useEntryActionsContext();
 
   const cueSubmitHandler = (_field: string, newValue: string) => {
     updateEntry({ id: eventId, cue: sanitiseCue(newValue) });

apps/client/src/features/rundown/entry-editor/composite/EventEditorTriggers.tsx

@@ -8,7 +8,7 @@ import IconButton from '../../../../common/components/buttons/IconButton';
 import Select from '../../../../common/components/select/Select';
 import Tag from '../../../../common/components/tag/Tag';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
-import { useEntryActions } from '../../../../common/hooks/useEntryAction';
+import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 
 import { eventTriggerOptions } from './eventTrigger.constants';
@@ -38,7 +38,7 @@ interface EventTriggerFormProps {
 
 function EventTriggerForm({ eventId, triggers }: EventTriggerFormProps) {
   const { data: automationSettings } = useAutomationSettings();
-  const { updateEntry } = useEntryActions();
+  const { updateEntry } = useEntryActionsContext();
   const [automationId, setAutomationId] = useState<string | undefined>(undefined);
   const [cycleValue, setCycleValue] = useState(TimerLifeCycle.onStart);
 
@@ -123,7 +123,7 @@ interface ExistingEventTriggersProps {
 }
 
 function ExistingEventTriggers({ eventId, triggers }: ExistingEventTriggersProps) {
-  const { updateEntry } = useEntryActions();
+  const { updateEntry } = useEntryActionsContext();
   const { data: automationSettings } = useAutomationSettings();
 
   const handleDelete = useCallback(

apps/client/src/features/rundown/entry-editor/quick-add-buttons/QuickAddButtons.module.scss

@@ -2,6 +2,7 @@
   display: flex;
   align-items: center;
   gap: 1rem;
+  padding-left: 0.5rem;
 
   padding-block: 0.5rem;
   background: color-mix(in srgb, transparent 90%, var(--user-bg, transparent) 10%);

apps/client/src/features/rundown/entry-editor/quick-add-buttons/QuickAddButtons.tsx

@@ -4,7 +4,7 @@ import { Toolbar } from '@base-ui/react/toolbar';
 import { MaybeString, SupportedEntry } from 'ontime-types';
 
 import Button from '../../../../common/components/buttons/Button';
-import { useEntryActions } from '../../../../common/hooks/useEntryAction';
+import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 import { cx } from '../../../../common/utils/styleUtils';
 
 import style from './QuickAddButtons.module.scss';
@@ -17,7 +17,7 @@ interface QuickAddButtonsProps {
 
 export default memo(QuickAddButtons);
 function QuickAddButtons({ previousEventId, parentGroup, backgroundColor }: QuickAddButtonsProps) {
-  const { addEntry } = useEntryActions();
+  const { addEntry } = useEntryActionsContext();
 
   const addEvent = () => {
     addEntry(

apps/client/src/features/rundown/entry-editor/quick-add-cursor/QuickAddInline.tsx

@@ -4,7 +4,7 @@ import { MaybeString, SupportedEntry } from 'ontime-types';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
-import { useEntryActions } from '../../../../common/hooks/useEntryAction';
+import { useEntryActionsContext } from '../../../../common/context/EntryActionsContext';
 
 import style from './QuickAddInline.module.scss';
 
@@ -16,7 +16,7 @@ interface QuickAddInlineProps {
 
 export default memo(QuickAddInline);
 function QuickAddInline({ referenceEntryId, parentGroup, placement }: QuickAddInlineProps) {
-  const { addEntry } = useEntryActions();
+  const { addEntry } = useEntryActionsContext();
 
   const handleAddEntry = (type: SupportedEntry) => {
     if (placement === 'before') {

apps/client/src/features/rundown/hooks/useRundownCommands.ts

@@ -0,0 +1,228 @@
+import { useCallback } from 'react';
+import { type EntryId, type OntimeEntry, type Rundown, SupportedEntry } from 'ontime-types';
+import { getNextGroupNormal, getNextNormal, getPreviousGroupNormal, getPreviousNormal } from 'ontime-utils';
+
+import type { useEntryActions } from '../../../common/hooks/useEntryAction';
+import { useEntryCopy } from '../../../common/stores/entryCopyStore';
+import { SelectionMode } from '../useEventSelection';
+
+const PAGE_SIZE = 5;
+
+interface UseRundownCommandsOptions {
+  entries: Rundown['entries'];
+  flatOrder: EntryId[];
+  entryActions: ReturnType<typeof useEntryActions>;
+  selectEntry: (selection: { id: EntryId; selectMode: SelectionMode; index: number }) => void;
+  handleCollapseGroup: (collapsed: boolean, groupId: EntryId) => void;
+}
+
+/**
+ * Common operations for the rundown lists
+ */
+export function useRundownCommands({
+  entries,
+  flatOrder,
+  entryActions,
+  selectEntry: applySelection,
+  handleCollapseGroup,
+}: UseRundownCommandsOptions) {
+  const { addEntry, clone, deleteEntry, move, reorderEntry } = entryActions;
+
+  const deleteAtCursor = useCallback(
+    (cursor: string | null) => {
+      if (!cursor) return;
+      const { entry, index } = getPreviousNormal(entries, flatOrder, cursor);
+      deleteEntry([cursor]);
+      if (entry && index !== null) {
+        applySelection({ id: entry.id, selectMode: 'click', index });
+      }
+    },
+    [entries, flatOrder, deleteEntry, applySelection],
+  );
+
+  const insertCopyAtId = useCallback(
+    (atId: EntryId | null, above = false) => {
+      // lazily get the value from the store
+      const { entryCopyId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
+      if (entryCopyId === null || !entries[entryCopyId]) {
+        // we cant clone without selection
+        return;
+      }
+
+      let normalisedAtId = atId;
+
+      const elementToCopy = entries[entryCopyId];
+      const refElement = atId ? entries[atId] : undefined;
+
+      if (refElement && 'parent' in refElement && refElement.parent && elementToCopy.type === SupportedEntry.Group) {
+        normalisedAtId = refElement.parent;
+      }
+
+      if (entryCopyMode === 'cut') {
+        if (!normalisedAtId) {
+          const firstId = flatOrder[0];
+          if (!firstId || firstId === entryCopyId) {
+            return;
+          }
+          reorderEntry(entryCopyId, firstId, 'before')
+            .then(() => setEntryCopyId(null))
+            .catch(() => {});
+          return;
+        }
+        if (normalisedAtId === entryCopyId) {
+          return;
+        }
+        const placement = above ? 'before' : 'after';
+        reorderEntry(entryCopyId, normalisedAtId, placement)
+          .then(() => setEntryCopyId(null))
+          .catch(() => {});
+        return;
+      }
+
+      clone(entryCopyId, {
+        after: above ? undefined : normalisedAtId ?? undefined,
+        // if we don't have a cursor add the new event on top
+        before: above ? normalisedAtId ?? undefined : undefined,
+      });
+    },
+    [entries, flatOrder, clone, reorderEntry],
+  );
+
+  /**
+   * Add a new item referring to an existing one
+   */
+  const insertAtId = useCallback(
+    (patch: Partial<OntimeEntry> & { type: SupportedEntry }, id: EntryId | null, above = false) => {
+      addEntry(patch, {
+        after: id && !above ? id : undefined,
+        before: id && above ? id : undefined,
+        lastEventId: !above && id ? id : undefined,
+      });
+    },
+    [addEntry],
+  );
+
+  const selectGroup = useCallback(
+    (cursor: EntryId | null, direction: 'up' | 'down') => {
+      if (flatOrder.length < 1) {
+        return null;
+      }
+      const selected =
+        direction === 'up'
+          ? getPreviousGroupNormal(entries, flatOrder, cursor)
+          : getNextGroupNormal(entries, flatOrder, cursor);
+
+      if (selected.entry && selected.index !== null) {
+        applySelection({ id: selected.entry.id, selectMode: 'click', index: selected.index });
+        return selected.entry.id;
+      }
+      return null;
+    },
+    [flatOrder, entries, applySelection],
+  );
+
+  const selectEntry = useCallback(
+    (cursor: EntryId | null, direction: 'up' | 'down') => {
+      if (flatOrder.length < 1) {
+        return null;
+      }
+
+      const selected =
+        direction === 'up' ? getPreviousNormal(entries, flatOrder, cursor) : getNextNormal(entries, flatOrder, cursor);
+
+      if (selected.entry && selected.index !== null) {
+        applySelection({ id: selected.entry.id, selectMode: 'click', index: selected.index });
+        return selected.entry.id;
+      }
+      return null;
+    },
+    [flatOrder, entries, applySelection],
+  );
+
+  const moveEntry = useCallback(
+    async (cursor: EntryId | null, direction: 'up' | 'down') => {
+      if (cursor == null) {
+        return;
+      }
+
+      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],
+  );
+
+  const cloneEntry = useCallback(
+    (cursor: EntryId | null) => {
+      if (!cursor) {
+        return;
+      }
+      clone(cursor, { after: cursor });
+    },
+    [clone],
+  );
+
+  const selectEdge = useCallback(
+    (direction: 'top' | 'bottom') => {
+      if (flatOrder.length < 1) {
+        return null;
+      }
+
+      const index = direction === 'top' ? 0 : flatOrder.length - 1;
+      const selectedId = flatOrder[index];
+      if (!selectedId) return null;
+
+      applySelection({ id: selectedId, selectMode: 'click', index });
+      return selectedId;
+    },
+    [flatOrder, applySelection],
+  );
+
+  const selectPage = useCallback(
+    (cursor: EntryId | null, direction: 'up' | 'down') => {
+      if (flatOrder.length < 1) {
+        return null;
+      }
+
+      let currentIndex = cursor ? flatOrder.indexOf(cursor) : -1;
+      if (currentIndex === -1) {
+        currentIndex = direction === 'down' ? -1 : flatOrder.length;
+      }
+
+      let targetIndex = currentIndex;
+      let lastValidIndex: number | null = null;
+      for (let step = 0; step < PAGE_SIZE; step += 1) {
+        targetIndex = direction === 'down' ? targetIndex + 1 : targetIndex - 1;
+        if (targetIndex < 0 || targetIndex >= flatOrder.length) {
+          break;
+        }
+        lastValidIndex = targetIndex;
+      }
+
+      if (lastValidIndex === null) {
+        return null;
+      }
+
+      const selectedId = flatOrder[lastValidIndex];
+      if (!selectedId) return null;
+
+      applySelection({ id: selectedId, selectMode: 'click', index: lastValidIndex });
+      return selectedId;
+    },
+    [flatOrder, applySelection],
+  );
+
+  return {
+    cloneEntry,
+    deleteAtCursor,
+    insertCopyAtId,
+    insertAtId,
+    selectGroup,
+    selectEntry,
+    moveEntry,
+    selectEdge,
+    selectPage,
+  };
+}