bump version to 4.4.0-beta.0

refactor: align inputs with group, refs #1857
feat: editor layout
2026-08-03 06:28:01 +00:00 · 2026-01-26 12:35:32 +01:00 · 2026-01-26 11:35:09 +01:00 · 2026-01-26 11:35:09 +01:00 · 2026-01-26 11:09:38 +01:00 · 2026-01-25 13:54:49 +01:00
331 changed files with 7550 additions and 2701 deletions
@@ -103,6 +103,9 @@ jobs:
      - name: Release
        uses: softprops/action-gh-release@v1
        with:
-          files: './apps/electron/dist/ontime-linux.AppImage'
+          files: |
+            ./apps/electron/dist/ontime-linux-x86_64.AppImage
+            ./apps/electron/dist/ontime-linux-arm64.AppImage
+            ./apps/electron/dist/ontime-linux-armv7l.AppImage
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -40,6 +40,7 @@ override.css

 # working stuff
 **/TODO.md
+**.local.**

 # docker utils
 ontime-db
@@ -1,6 +1,6 @@
 {
    "name": "@getontime/cli",
-    "version": "4.1.0",
+    "version": "4.4.0-beta.0",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -1,15 +1,15 @@
 {
  "name": "ontime-ui",
-  "version": "4.1.0",
+  "version": "4.4.0-beta.0",
  "private": true,
  "type": "module",
  "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.4",
+    "@base-ui/react": "1.0.0",
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@fontsource/open-sans": "^5.2.6",
-    "@mantine/hooks": "^8.2.8",
+    "@mantine/hooks": "^8.3.7",
    "@sentry/react": "^10.2.0",
    "@table-nav/react": "^0.0.7",
    "@tanstack/react-query": "^5.85.9",
@@ -17,21 +17,20 @@
    "@tanstack/react-table": "^8.21.3",
    "autosize": "^6.0.1",
    "axios": "^1.12.2",
-    "babel-plugin-react-compiler": "19.1.0-rc.3",
    "csv-stringify": "^6.6.0",
    "prismjs": "^1.30.0",
-    "react": "^19.1.1",
+    "react": "^19.2.3",
    "react-colorful": "^5.6.1",
-    "react-dom": "^19.1.1",
+    "react-dom": "^19.2.3",
    "react-fast-compare": "^3.2.2",
    "react-hook-form": "^7.62.0",
    "react-icons": "5.5.0",
    "react-qr-code": "^2.0.18",
-    "react-router": "^7.8.2",
+    "react-router": "^7.11.0",
    "react-simple-code-editor": "^0.14.1",
-    "react-virtuoso": "^4.14.0",
+    "react-virtuoso": "^4.17.0",
    "web-vitals": "^5.1.0",
-    "zustand": "^5.0.8"
+    "zustand": "^5.0.9"
  },
  "scripts": {
    "addversion": "node -p \"'export const ONTIME_VERSION = ' + JSON.stringify(require('../../package.json').version) + ';'\" > src/ONTIME_VERSION.js",
@@ -66,6 +65,7 @@
    "@typescript-eslint/eslint-plugin": "catalog:",
    "@typescript-eslint/parser": "catalog:",
    "@vitejs/plugin-react": "4.5.1",
+    "babel-plugin-react-compiler": "1.0.0",
    "eslint": "catalog:",
    "eslint-config-prettier": "catalog:",
    "eslint-plugin-jest": "^28.6.0",
@@ -1,5 +1,5 @@
 import { BrowserRouter } from 'react-router';
-import { Tooltip } from '@base-ui-components/react/tooltip';
+import { Tooltip } from '@base-ui/react/tooltip';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

@@ -21,7 +21,23 @@ export async function fetchProjectRundownList(): Promise<ProjectRundownsList> {
 */
 export async function fetchCurrentRundown(): Promise<Rundown> {
  const res = await axios.get(`${rundownPath}/current`);
+  if (!isValidRundown(res.data)) {
+    throw new Error('Invalid rundown payload');
+  }
  return res.data;
+
+  function isValidRundown(x: any): x is Rundown {
+    return (
+      x &&
+      typeof x === 'object' &&
+      typeof x.id === 'string' &&
+      Array.isArray(x.order) &&
+      Array.isArray(x.flatOrder) &&
+      x.entries &&
+      typeof x.entries === 'object' &&
+      typeof x.revision === 'number'
+    );
+  }
 }

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

@@ -107,7 +126,11 @@ export async function patchReorderEntry(rundownId: RundownId, data: ReorderEntry
 /**
 * HTTP request to swap two events
 */
-export async function requestEventSwap(rundownId: RundownId, from: EntryId, to: EntryId): Promise<AxiosResponse<Rundown>> {
+export async function requestEventSwap(
+  rundownId: RundownId,
+  from: EntryId,
+  to: EntryId,
+): Promise<AxiosResponse<Rundown>> {
  return axios.patch(`${rundownPath}/${rundownId}/swap`, { from, to });
 }

@@ -121,8 +144,12 @@ export async function requestApplyDelay(rundownId: RundownId, delayId: EntryId):
 /**
 * HTTP request for cloning an entry
 */
-export async function postCloneEntry(rundownId: RundownId, entryId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`);
+export async function postCloneEntry(
+  rundownId: RundownId,
+  entryId: EntryId,
+  options?: { before?: EntryId; after?: EntryId },
+): Promise<AxiosResponse<Rundown>> {
+  return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`, options);
 }

 /**
@@ -1,140 +0,0 @@
-.subtle {
-  background: $gray-1050;
-  color: $blue-400;
-  line-height: 1em;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $blue-500;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-}
-
-.subtle-white {
-  background: $gray-1050;
-  color: $ui-white;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $ui-white;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-
-  &:disabled {
-    background: $gray-1050;
-  }
-}
-
-.primary {
-  background: $blue-700;
-  color: $ui-white;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $blue-600;
-  }
-
-  &:active:not(:disabled) {
-    background: $blue-800;
-    border-color: $blue-900;
-  }
-
-  &:disabled {
-    opacity: $viewer-opacity-disabled;
-  }
-}
-
-.destructive {
-  background: $red-700;
-  color: $ui-white;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $red-600;
-    color: $ui-white;
-  }
-
-  &:active:not(:disabled) {
-    background: $red-800;
-    border-color: $red-900;
-  }
-}
-
-.subtle-destructive {
-  background: $gray-1050;
-  color: $red-400;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $red-500;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-}
-
-.ghosted {
-  background: transparent;
-  color: $blue-500;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $blue-500;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-
-  &:disabled {
-    opacity: $opacity-disabled;
-  }
-}
-
-.ghosted-white {
-  background: transparent;
-  color: $ui-white;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $ui-white;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-
-  &:disabled {
-    opacity: $opacity-disabled;
-  }
-}
-
-
-.ghosted-destructive {
-  background: transparent;
-  color: $red-500;
-
-  &:hover:not(:disabled):not(:active) {
-    background: $gray-1000;
-    color: $red-500;
-  }
-
-  &:active:not(:disabled) {
-    background: $gray-1100;
-    border-color: $gray-1250;
-  }
-
-  &:disabled {
-    opacity: $opacity-disabled;
-  }
-}
@@ -1,5 +1,6 @@
-@use '@/theme/viewerDefs' as *;
-@import './BaseButtonStyles.module.scss';
+@use './buttonVariants' as base;
+
+@include base.button-variants;

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

 .baseIconButton {
  aspect-ratio: 1;
@@ -0,0 +1,144 @@
+@use '@/theme/themeTokens' as *;
+@use '@/theme/viewerDefs' as *;
+
+@mixin button-variants {
+  .subtle {
+    background: $gray-1050;
+    color: $blue-400;
+    line-height: 1em;
+
+    &:hover:not(:disabled):not(:active) {
+      background: $gray-1000;
+      color: $blue-500;
+    }
+
+    &:active:not(:disabled) {
+      background: $gray-1100;
+      border-color: $gray-1250;
+    }
+  }
+
+  .subtle-white {
+    background: $gray-1050;
+    color: $ui-white;
+
+    &:hover:not(:disabled):not(:active) {
+      background: $gray-1000;
+      color: $ui-white;
+    }
+
+    &:active:not(:disabled) {
+      background: $gray-1100;
+      border-color: $gray-1250;
+    }
+
+    &:disabled {
+      background: $gray-1050;
+    }
+  }
+
+  .primary {
+    background: $blue-700;
+    color: $ui-white;
+
+    &:hover:not(:disabled):not(:active) {
+      background: $blue-600;
+    }
+
+    &:active:not(:disabled) {
+      background: $blue-800;
+      border-color: $blue-900;
+    }
+
+    &:disabled {
+      opacity: $viewer-opacity-disabled;
+    }
+  }
+
+  .destructive {
+    background: $red-700;
+    color: $ui-white;
+
+    &:hover:not(:disabled):not(:active) {
+      background: $red-600;
+      color: $ui-white;
+    }
+
+    &:active:not(:disabled) {
+      background: $red-800;
+      border-color: $red-900;
+    }
+  }
+
+  .subtle-destructive {
+    background: $gray-1050;
+    color: $red-400;
+
+    &:hover:not(:disabled):not(:active) {
+      background: $gray-1000;
+      color: $red-500;
+    }
+
+    &:active:not(:disabled) {
+      background: $gray-1100;
+      border-color: $gray-1250;
+    }
+  }
+
+  .ghosted {
+    background: transparent;
+    color: $blue-500;
+
+    &:hover:not(:disabled):not(:active) {
+      background: $gray-1000;
+      color: $blue-500;
+    }
+
+    &:active:not(:disabled) {
+      background: $gray-1100;
+      border-color: $gray-1250;
+    }
+
+    &:disabled {
+      opacity: $opacity-disabled;
+    }
+  }
+
+  .ghosted-white {
+    background: transparent;
+    color: $ui-white;
+
+    &:hover:not(:disabled):not(:active) {
+      background: $gray-1000;
+      color: $ui-white;
+    }
+
+    &:active:not(:disabled) {
+      background: $gray-1100;
+      border-color: $gray-1250;
+    }
+
+    &:disabled {
+      opacity: $opacity-disabled;
+    }
+  }
+
+  .ghosted-destructive {
+    background: transparent;
+    color: $red-500;
+
+    &:hover:not(:disabled):not(:active) {
+      background: $gray-1000;
+      color: $red-500;
+    }
+
+    &:active:not(:disabled) {
+      background: $gray-1100;
+      border-color: $gray-1250;
+    }
+
+    &:disabled {
+      opacity: $opacity-disabled;
+    }
+  }
+}
@@ -1,5 +1,5 @@
 import { IoCheckmark } from 'react-icons/io5';
-import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';

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

@@ -5,10 +5,10 @@ import { navigatorConstants } from '../../../viewerConfig';
 import { setClientRemote } from '../../hooks/useSocket';
 import useUrlPresets from '../../hooks-query/useUrlPresets';
 import Button from '../buttons/Button';
+import Dialog from '../dialog/Dialog';
 import Info from '../info/Info';
 import Input from '../input/input/Input';
 import AppLink from '../link/app-link/AppLink';
-import Modal from '../modal/Modal';
 import Select from '../select/Select';

 import style from './RedirectClientModal.module.scss';
@@ -57,7 +57,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
  ];

  return (
-    <Modal
+    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      showCloseButton
@@ -98,7 +98,10 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
                  fluid
                  options={viewOptions}
                  defaultValue={viewOptions[0].value}
-                  onValueChange={(value) => setSelected(value)}
+                  onValueChange={(value) => {
+                    if (value === null) return;
+                    setSelected(value);
+                  }}
                  disabled={enabledPresets.length === 0}
                />
              </label>
@@ -1,7 +1,7 @@
 import { PropsWithChildren, useRef, useState } from 'react';
 import { IoCheckmark, IoCopy } from 'react-icons/io5';

-import copyToClipboard from '../../utils/copyToClipboard';
+import { copyToClipboard } from '../../utils/copyToClipboard';
 import { cx } from '../../utils/styleUtils';
 import Button from '../buttons/Button';
 import IconButton from '../buttons/IconButton';
@@ -25,15 +25,19 @@ export default function CopyTag({
  const [copied, setCopied] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

-  const handleClick = () => {
-    copyToClipboard(copyValue);
-    setCopied(true);
+  const handleClick = async () => {
+    try {
+      await copyToClipboard(copyValue);
+      setCopied(true);

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

  return (
@@ -6,7 +6,7 @@
  transform: translateX(-50%);

  padding-inline: 1rem;
-  min-width: min(420px, 90vw);
+  min-width: min(600px, 90vw);

  background-color: $gray-1250;
  color: $ui-white;
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';

 import IconButton from '../buttons/IconButton';

@@ -12,7 +12,7 @@ interface DialogProps {
  showCloseButton?: boolean;
  showBackdrop?: boolean;
  bodyElements: ReactNode;
-  footerElements: ReactNode;
+  footerElements?: ReactNode;
  onClose: () => void;
 }

@@ -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;
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { IconType } from 'react-icons';
-import { Menu as BaseMenu } from '@base-ui-components/react/menu';
+import { Menu as BaseMenu } from '@base-ui/react/menu';

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

@@ -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;
@@ -31,9 +33,21 @@ export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChil
                return <BaseMenu.Separator key={index} className={style.separator} />;
              }
              return (
-                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled} data-type={item.type}>
-                  {item.icon && <item.icon />}
-                  {item.label}
+                <BaseMenu.Item
+                  key={index}
+                  className={style.item}
+                  onClick={item.onClick}
+                  disabled={item.disabled}
+                  data-type={item.type}
+                >
+                  <span className={style.content}>
+                    <span className={style.label}>
+                      {item.icon && <item.icon />}
+                      {item.label}
+                    </span>
+                    {item.description && <span className={style.description}>{item.description}</span>}
+                  </span>
+                  {item.shortcut && <span className={style.shortcut}>{item.shortcut}</span>}
                </BaseMenu.Item>
              );
            })}
@@ -69,8 +83,14 @@ export function PositionedDropdownMenu({ items, isOpen, position, onClose }: Pos
              }
              return (
                <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
-                  {item.icon && <item.icon />}
-                  {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>
              );
            })}
@@ -1,6 +1,7 @@
-.corner {
+.arrow {
  transform: rotate(45deg);
-
+}
+.corner {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
@@ -21,6 +22,10 @@
  }
 }

+.offsetCorner {
+  right: 2rem;
+}
+
 .header {
  font-size: 1.5rem;
 }
@@ -51,6 +56,13 @@

  &.vertical {
    width: 1px;
-    height: 0.75em;  
+    height: 0.75em;
  }
 }
+
+.panel {
+  position: relative;
+  border-radius: $panel-border-radius;
+  background-color: $bg-container-l2;
+  padding: 1rem;
+}
@@ -1,13 +1,33 @@
-import type { HTMLAttributes, LabelHTMLAttributes } from 'react';
+import type { HTMLAttributes, JSX, LabelHTMLAttributes, MouseEventHandler } from 'react';
 import { IconBaseProps } from 'react-icons';
 import { IoArrowUp } from 'react-icons/io5';
+import { TbPictureInPictureOff } from 'react-icons/tb';

 import { cx } from '../../utils/styleUtils';

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

-export function Corner({ className, ...elementProps }: IconBaseProps) {
-  return <IoArrowUp className={cx([style.corner, className])} {...elementProps} />;
+export function CornerExtract({ className, ...elementProps }: IconBaseProps) {
+  return <IoArrowUp className={cx([style.corner, style.arrow, className])} {...elementProps} />;
+}
+
+export function CornerPipButton({ className, ...elementProps }: IconBaseProps) {
+  return <TbPictureInPictureOff className={cx([style.corner, style.offsetCorner, className])} {...elementProps} />;
+}
+
+interface ExtractAndPip extends IconBaseProps {
+  onExtractClick: MouseEventHandler<SVGElement>;
+  pipElement: JSX.Element;
+}
+
+export function CornerWithPip({ className, pipElement, onExtractClick }: ExtractAndPip) {
+  return (
+    <>
+      <IoArrowUp className={cx([style.corner, style.arrow, className])} onClick={onExtractClick} />
+      {/* the pip element returns the icon button */}
+      {pipElement}
+    </>
+  );
 }

 export function Title({ children, className, ...elementProps }: HTMLAttributes<HTMLHeadingElement>) {
@@ -35,3 +55,7 @@ interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
 export function Separator({ className, orientation = 'vertical', ...elementProps }: SeparatorProps) {
  return <div className={cx([style.separator, style[orientation], className])} role='separator' {...elementProps} />;
 }
+
+export function Panel({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx([style.panel, className])} {...props} />;
+}
@@ -11,7 +11,7 @@
  outline: none;

  &::placeholder {
-    color: $gray-500;
+    color: $gray-600;
    letter-spacing: 0;
  }

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

 import PopoverContents from '../../popover/Popover';

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';

 import IconButton from '../buttons/IconButton';

@@ -31,7 +31,7 @@ export default function Modal({
      onOpenChange={(isOpen) => {
        if (!isOpen) onClose();
      }}
-      dismissible={false}
+      disablePointerDismissal
    >
      <BaseDialog.Portal>
        {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
@@ -2,12 +2,13 @@ import { memo } from 'react';
 import { IoClose, IoContract, IoExpand, IoLockClosedOutline, IoSwapVertical } from 'react-icons/io5';
 import { LuCoffee } from 'react-icons/lu';
 import { useLocation } from 'react-router';
-import { Dialog } from '@base-ui-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import { useDisclosure, useFullscreen } from '@mantine/hooks';

-import { isLocalhost } from '../../../externals';
-import { useKeepAwakeOptions } from '../../../features/keep-awake/KeepAwake';
+import { isLocalhost, supportsFullscreen } from '../../../externals';
+import { canUseWakeLock, useKeepAwakeOptions } from '../../../features/keep-awake/useWakeLock';
 import { navigatorConstants } from '../../../viewerConfig';
+import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import IconButton from '../buttons/IconButton';
@@ -29,6 +30,7 @@ export default memo(NavigationMenu);
 function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
  const id = useClientStore((store) => store.id);
  const name = useClientStore((store) => store.name);
+  const isSmallScreen = useIsSmallScreen();

  const [isRenameOpen, handlers] = useDisclosure(false);
  const { fullscreen, toggle } = useFullscreen();
@@ -56,16 +58,18 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
            </IconButton>
          </div>
          <div className={style.body}>
-            <NavigationMenuItem active={fullscreen} onClick={toggle}>
-              Toggle Fullscreen
-              {fullscreen ? <IoContract /> : <IoExpand />}
-            </NavigationMenuItem>
+            {supportsFullscreen && (
+              <NavigationMenuItem active={fullscreen} onClick={toggle}>
+                Toggle Fullscreen
+                {fullscreen ? <IoContract /> : <IoExpand />}
+              </NavigationMenuItem>
+            )}
            <NavigationMenuItem active={mirror} onClick={() => toggleMirror()}>
              Flip Screen
              <IoSwapVertical />
              {mirror && <span className={style.note}>Active</span>}
            </NavigationMenuItem>
-            {window.isSecureContext && (
+            {canUseWakeLock && (
              <NavigationMenuItem active={keepAwake} onClick={toggleKeepAwake}>
                Keep Awake
                <LuCoffee />
@@ -77,11 +81,15 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
            <hr className={style.separator} />

            <EditorNavigation />
-            <ClientLink to='cuesheet' current={location.pathname === '/cuesheet'}>
+            <ClientLink
+              to='cuesheet'
+              current={location.pathname === '/cuesheet'}
+              postAction={isSmallScreen ? onClose : undefined}
+            >
              <IoLockClosedOutline />
              Cuesheet
            </ClientLink>
-            <ClientLink to='op' current={location.pathname === '/op'}>
+            <ClientLink to='op' current={location.pathname === '/op'} postAction={isSmallScreen ? onClose : undefined}>
              <IoLockClosedOutline />
              Operator
            </ClientLink>
@@ -89,7 +97,12 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
            <hr className={style.separator} />

            {navigatorConstants.map((route) => (
-              <ClientLink key={route.url} to={route.url} current={location.pathname === `/${route.url}`}>
+              <ClientLink
+                key={route.url}
+                to={route.url}
+                current={location.pathname === `/${route.url}`}
+                postAction={isSmallScreen ? onClose : undefined}
+              >
                {route.label}
              </ClientLink>
            ))}
@@ -11,15 +11,22 @@ import style from './ClientLink.module.scss';
 interface ClientLinkProps {
  current: boolean;
  to: string;
+  postAction?: () => void;
 }

-export default function ClientLink({ current, to, children }: PropsWithChildren<ClientLinkProps>) {
+export default function ClientLink({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
  const { isElectron } = useElectronEvent();
  const navigate = useNavigate();

  if (isElectron) {
    return (
-      <NavigationMenuItem active={current} onClick={() => handleLinks(to)}>
+      <NavigationMenuItem
+        active={current}
+        onClick={() => {
+          handleLinks(to);
+          postAction?.();
+        }}
+      >
        {children}
        <IoArrowUp className={style.linkIcon} />
      </NavigationMenuItem>
@@ -27,7 +34,13 @@ export default function ClientLink({ current, to, children }: PropsWithChildren<
  }

  return (
-    <NavigationMenuItem active={current} onClick={() => navigate(`/${to}`)}>
+    <NavigationMenuItem
+      active={current}
+      onClick={() => {
+        navigate(`/${to}`);
+        postAction?.();
+      }}
+    >
      {children}
    </NavigationMenuItem>
  );
@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { Popover } from '@base-ui-components/react/popover';
+import { Popover } from '@base-ui/react/popover';

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

@@ -1,5 +1,5 @@
-import { Radio } from '@base-ui-components/react/radio';
-import { RadioGroup as BaseRadioGroup } from '@base-ui-components/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';

 import { cx } from '../../utils/styleUtils';

@@ -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;
+  }
+}
@@ -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>
+  );
+}
@@ -1,6 +1,6 @@
 import { IoCheckmark } from 'react-icons/io5';
 import { LuChevronsUpDown } from 'react-icons/lu';
-import { Select as BaseSelect } from '@base-ui-components/react/select';
+import { Select as BaseSelect } from '@base-ui/react/select';

 import { cx } from '../../utils/styleUtils';

@@ -1,4 +1,4 @@
-import { Switch as BaseSwitch } from '@base-ui-components/react/switch';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';

 import { cx } from '../../utils/styleUtils';

@@ -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>;
 }
@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';

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

@@ -1,3 +1,5 @@
+import { useRef } from 'react';
+
 import { projectLogoPath } from '../../api/constants';

 import './ViewLogo.scss';
@@ -7,13 +9,19 @@ interface ViewLogoProps {
  className: string;
 }

-export default function ViewLogo(props: ViewLogoProps) {
-  const { name, className } = props;
+export default function ViewLogo({ name, className }: ViewLogoProps) {
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  const hideImage = () => {
+    if (!imageRef.current) return;
+
+    imageRef.current.style.display = 'none';
+  };

  // we wrap the image in a div to help maintain the aspect ratio
  return (
    <div className={className}>
-      <img alt='' src={`${projectLogoPath}/${name}`} className='viewLogo' />
+      <img ref={imageRef} alt='' src={`${projectLogoPath}/${name}`} className='viewLogo' onError={hideImage} />
    </div>
  );
 }
@@ -32,11 +32,11 @@
    margin-left: 0.25rem;
    width: 0.75em;
    height: 0.75em;
-    background: var(--user-bg);
+    background: var(--user-bg, $gray-900);
    border-radius: 50%;
  }
 }

 .empty {
  color: $ui-white;
-}
+}
@@ -1,7 +1,7 @@
 import { ComponentProps, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router';

-import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+import { isStringBoolean } from '../../../views/common/viewUtils';
 import Checkbox from '../checkbox/Checkbox';
 import Input from '../input/input/Input';
 import Select, { SelectOption } from '../select/Select';
@@ -160,7 +160,16 @@ function ControlledSelect({ id, initialValue, options }: ControlledSelectProps)
  }, [initialValue]);

  return (
-    <Select size='large' name={id} options={options} value={selected} onValueChange={(value) => setSelected(value)} />
+    <Select
+      size='large'
+      name={id}
+      options={options}
+      value={selected}
+      onValueChange={(value) => {
+        if (value === null) return;
+        setSelected(value);
+      }}
+    />
  );
 }

@@ -1,9 +1,10 @@
 import { FormEvent, memo } from 'react';
 import { IoClose } from 'react-icons/io5';
 import { useSearchParams } from 'react-router';
-import { Dialog } from '@base-ui-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import { OntimeView } from 'ontime-types';

+import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
 import useViewSettings from '../../hooks-query/useViewSettings';
 import Button from '../buttons/Button';
 import IconButton from '../buttons/IconButton';
@@ -27,6 +28,7 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
  const [_, setSearchParams] = useSearchParams();
  const { data: viewSettings } = useViewSettings();
  const { isOpen, close } = useViewParamsEditorStore();
+  const isSmallScreen = useIsSmallScreen();

  const handleClose = () => {
    close();
@@ -42,6 +44,10 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
    const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
    setSearchParams(newSearchParams);
+
+    if (isSmallScreen) {
+      close();
+    }
  };

  return (
@@ -46,7 +46,7 @@ export function makeCustomFieldSelectOptions(customFields: CustomFields, filterI
    options.push({
      value: key,
      label: value.label,
-      colour: value.colour || 'transparent',
+      colour: value.colour,
    });
  }

@@ -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;
+}
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { ProjectFileListResponse } from 'ontime-types';
+import { ProjectFile, ProjectFileList, ProjectFileListResponse } from 'ontime-types';

 import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_LIST } from '../api/constants';
@@ -24,22 +24,33 @@ function useProjectList() {
  return { data: data ?? placeholderProjectList, status, refetch };
 }

-export function useOrderedProjectList() {
+export type ProjectSortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'modified-asc' | 'modified-desc';
+type SortComparator = (a: ProjectFile, b: ProjectFile) => number;
+const sortComparators: Record<ProjectSortMode, SortComparator> = {
+  'alphabetical-asc': (a, b) => a.filename.localeCompare(b.filename),
+  'alphabetical-desc': (a, b) => b.filename.localeCompare(a.filename),
+  'modified-asc': (a, b) => new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime(),
+  'modified-desc': (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+};
+
+export function useOrderedProjectList(sort: ProjectSortMode = 'modified-desc') {
  const response = useProjectList();
  const { files, lastLoadedProject } = response.data;

-  const reorderedProjectFiles = useMemo(() => {
+  const reorderedProjectFiles: ProjectFileList = useMemo(() => {
    if (!files.length) return [];

-    const currentlyLoadedIndex = files.findIndex((project) => project.filename === lastLoadedProject);
+    const sorted = [...files].sort(sortComparators[sort]);

-    if (currentlyLoadedIndex === -1) return files;
+    // keep loaded always on top
+    const currentlyLoadedIndex = sorted.findIndex((project) => project.filename === lastLoadedProject);
+    if (currentlyLoadedIndex > 0) {
+      const [loaded] = sorted.splice(currentlyLoadedIndex, 1);
+      sorted.unshift(loaded);
+    }

-    const projectFiles = [...files];
-    const current = projectFiles.splice(currentlyLoadedIndex, 1)[0];
-
-    return [current, ...projectFiles];
-  }, [files, lastLoadedProject]);
+    return sorted;
+  }, [files, lastLoadedProject, sort]);

  return { ...response, data: { reorderedProjectFiles, lastLoadedProject: response.data.lastLoadedProject } };
 }
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { EntryId, OntimeEntry, Rundown } from 'ontime-types';

@@ -8,8 +8,6 @@ import { fetchCurrentRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';

-import useProjectData from './useProjectData';
-
 // revision is -1 so that the remote revision is higher
 const cachedRundownPlaceholder: Rundown = {
  id: 'default',
@@ -27,15 +25,15 @@ export default function useRundown() {
  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
    queryKey: RUNDOWN,
    queryFn: fetchCurrentRundown,
-    placeholderData: (previousData, _previousQuery) => previousData,
    refetchInterval: queryRefetchIntervalSlow,
  });
+
  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }

 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 };
 }
@@ -46,37 +44,20 @@ export function useRundownWithMetadata() {
 */
 export function useFlatRundown() {
  const { data, status } = useRundown();
-  const { data: projectData } = useProjectData();

-  const loadedProject = useRef<string>('');
-  const [prevRevision, setPrevRevision] = useState<number>(-1);
-  const [flatRundown, setFlatRundown] = useState<OntimeEntry[]>([]);
-
-  // update data whenever the revision changes
-  useEffect(() => {
-    if (data.revision !== -1 || data.revision !== prevRevision) {
-      const flatRundown = data.flatOrder.map((id) => data.entries[id]);
-      setFlatRundown(flatRundown);
-      setPrevRevision(data.revision);
+  const flatRundown = useMemo(() => {
+    if (data.revision === -1) {
+      return [];
    }
-  }, [data.entries, data.flatOrder, data.revision, prevRevision]);
-
-  // TODO: should we have a project id field?
-  // TODO(v4): cleanup as part of load multiple rundowns
-  // invalidate current version if project changes
-  useEffect(() => {
-    if (projectData?.title !== loadedProject.current) {
-      setPrevRevision(-1);
-      loadedProject.current = projectData?.title ?? '';
-    }
-  }, [projectData]);
+    return data.flatOrder.map((id) => data.entries[id]).filter((entry): entry is OntimeEntry => entry !== undefined);
+  }, [data]);

  return { data: flatRundown, rundownId: data.id, status };
 }

 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 };
@@ -84,6 +65,10 @@ export function useFlatRundownWithMetadata() {

 /**
 * Provides access to a partial rundown based on a filter callback
+ *
+ * Callers MUST memoize the callback with useCallback to prevent
+ * re-filtering on every render.
+ *
 */
 export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
  const { data, status } = useFlatRundownWithMetadata();
@@ -100,11 +85,6 @@ export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boo
 export function useEntry(entryId: EntryId | null): OntimeEntry | null {
  const { data: rundown } = useRundown();

-  // track the specific entry we care about
-  const entry = useMemo(() => {
-    if (entryId === null) return null;
-    return rundown.entries[entryId];
-  }, [entryId, rundown.entries]);
-
-  return entry;
+  if (entryId === null) return null;
+  return rundown.entries[entryId] ?? null;
 }
@@ -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];
 };
@@ -1,7 +1,8 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
  EntryId,
+  InsertOptions,
  isOntimeEvent,
  isOntimeGroup,
  MaybeString,
@@ -173,7 +174,8 @@ export const useEntryActions = () => {
   * @private
   */
  const { mutateAsync: cloneEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entryId]: Parameters<typeof postCloneEntry>) => postCloneEntry(rundownId, entryId),
+    mutationFn: ([rundownId, entryId, options]: Parameters<typeof postCloneEntry>) =>
+      postCloneEntry(rundownId, entryId, options),
    onMutate: () => queryClient.cancelQueries({ queryKey: RUNDOWN }),
    onSettled: () => queryClient.invalidateQueries({ queryKey: RUNDOWN }),
  });
@@ -182,14 +184,14 @@ export const useEntryActions = () => {
   * Clone an entry
   */
  const clone = useCallback(
-    async (entryId: EntryId) => {
+    async (entryId: EntryId, options?: InsertOptions) => {
      try {
        const rundownId = getCurrentRundownData()?.id;
        if (!rundownId) {
          throw new Error('Rundown not initialised');
        }

-        await cloneEntryMutation([rundownId, entryId]);
+        await cloneEntryMutation([rundownId, entryId, options]);
      } catch (error) {
        logAxiosError('Error cloning entry', error);
      }
@@ -838,22 +840,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,
+    ],
+  );
 };

 /**
@@ -0,0 +1,95 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+
+import { throttle } from '../utils/throttle';
+
+export interface UseLongPressOptions {
+  /** Time in milliseconds to trigger the long press, default is 400ms */
+  threshold?: number;
+
+  /** Callback triggered when the long press starts */
+  onStart?: (event: React.MouseEvent | React.TouchEvent) => void;
+
+  /** Callback triggered when the long press finishes */
+  onFinish?: (event: React.MouseEvent | React.TouchEvent) => void;
+
+  /** Callback triggered when the long press is canceled */
+  onCancel?: (event: React.MouseEvent | React.TouchEvent) => void;
+}
+
+export interface UseLongPressReturnValue {
+  onMouseDown: (event: React.MouseEvent) => void;
+  onMouseUp: (event: React.MouseEvent) => void;
+  onMouseLeave: (event: React.MouseEvent) => void;
+  onTouchStart: (event: React.TouchEvent) => void;
+  onTouchEnd: (event: React.TouchEvent) => void;
+}
+
+export function useLongPress(
+  onLongPress: (event: React.MouseEvent | React.TouchEvent) => void,
+  options: UseLongPressOptions = {},
+): UseLongPressReturnValue {
+  const { threshold = 700, onStart, onFinish, onCancel } = options;
+  const isLongPressActive = useRef(false);
+  const isPressed = useRef(false);
+  const timeout = useRef<number>(-1);
+
+  useEffect(() => () => window.clearTimeout(timeout.current), []);
+
+  return useMemo(() => {
+    if (typeof onLongPress !== 'function') {
+      return {} as UseLongPressReturnValue;
+    }
+
+    const start = (event: React.MouseEvent | React.TouchEvent) => {
+      if (!isMouseEvent(event) && !isTouchEvent(event)) {
+        return;
+      }
+
+      if (onStart) {
+        onStart(event);
+      }
+
+      isPressed.current = true;
+      timeout.current = window.setTimeout(() => {
+        onLongPress(event);
+        isLongPressActive.current = true;
+      }, threshold);
+    };
+
+    const cancel = (event: React.MouseEvent | React.TouchEvent) => {
+      if (!isMouseEvent(event) && !isTouchEvent(event)) {
+        return;
+      }
+
+      if (isLongPressActive.current) {
+        onFinish?.(event);
+      } else if (isPressed.current) {
+        onCancel?.(event);
+      }
+
+      isLongPressActive.current = false;
+      isPressed.current = false;
+
+      if (timeout.current) {
+        window.clearTimeout(timeout.current);
+      }
+    };
+
+    return {
+      onMouseDown: start,
+      onMouseUp: cancel,
+      onMouseLeave: cancel,
+      onTouchStart: start,
+      onTouchEnd: cancel,
+      onTouchMove: throttle(cancel, 150),
+    };
+  }, [onLongPress, threshold, onCancel, onFinish, onStart]);
+}
+
+function isTouchEvent(event: React.MouseEvent | React.TouchEvent): event is React.TouchEvent {
+  return window.TouchEvent ? event.nativeEvent instanceof TouchEvent : 'touches' in event.nativeEvent;
+}
+
+function isMouseEvent(event: React.MouseEvent | React.TouchEvent): event is React.MouseEvent {
+  return event.nativeEvent instanceof MouseEvent;
+}
@@ -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 ======================= */

@@ -202,9 +184,10 @@ export const useStartTimesOverview = createSelector((state: RuntimeStore) => ({
  plannedStart: state.rundown.plannedStart,
  actualStart: state.rundown.actualStart,
  plannedEnd: state.rundown.plannedEnd,
-  expectedEnd: state.offset.expectedRundownEnd,
 }));

+export const useRundownExpectedEnd = createSelector((state: RuntimeStore) => state.offset.expectedRundownEnd);
+
 export const useProgressOverview = createSelector((state: RuntimeStore) => ({
  numEvents: state.rundown.numEvents,
  selectedEventIndex: state.rundown.selectedEventIndex,
@@ -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 }),
 }));
@@ -1,68 +0,0 @@
-import { EndAction, EntryCustomFields, OntimeEvent, SupportedEntry, TimerType, TimeStrategy } from 'ontime-types';
-
-import { cloneEvent } from '../clone';
-
-describe('cloneEvent()', () => {
-  it('creates a stem from a given event', () => {
-    const original: OntimeEvent = {
-      id: 'unique',
-      type: SupportedEntry.Event,
-      flag: false,
-      title: 'title',
-      cue: 'cue',
-      note: 'note',
-      timeStart: 0,
-      duration: 10,
-      timeEnd: 10,
-      timerType: TimerType.CountDown,
-      timeStrategy: TimeStrategy.LockEnd,
-      parent: 'test',
-      linkStart: false,
-      countToEnd: false,
-      endAction: EndAction.None,
-      skip: false,
-      colour: 'F00',
-      revision: 10,
-      timeWarning: 120000,
-      timeDanger: 60000,
-      delay: 0,
-      dayOffset: 0,
-      gap: 0,
-      triggers: [],
-      custom: {
-        lighting: '3',
-      } as EntryCustomFields,
-    };
-
-    const cloned = cloneEvent(original);
-    expect(cloned).not.toBe(original);
-    expect(cloned.custom).not.toBe(original.custom);
-    expect(cloned.triggers).not.toBe(original.triggers);
-
-    expect(cloned).toMatchObject({
-      type: SupportedEntry.Event,
-      flag: original.flag,
-      title: original.title,
-      note: original.note,
-      timeStart: original.timeStart,
-      duration: original.duration,
-      timeEnd: original.timeEnd,
-      timerType: original.timerType,
-      timeStrategy: original.timeStrategy,
-      parent: 'test',
-      countToEnd: original.countToEnd,
-      linkStart: original.linkStart,
-      endAction: original.endAction,
-      skip: original.skip,
-      colour: original.colour,
-      revision: 0,
-      delay: original.delay,
-      dayOffset: original.dayOffset,
-      gap: 0,
-      timeWarning: original.timeWarning,
-      timeDanger: original.timeDanger,
-      triggers: original.triggers,
-      custom: original.custom,
-    });
-  });
-});
@@ -14,4 +14,11 @@ describe('linkToOTherHost', () => {
    const destination = linkToOtherHost('cloud.getontime.no', 'path', serverUrl, baseUri);
    expect(destination).toBe('https://cloud.getontime.no/user-hash/path');
  });
+
+  it('should handle ontime app links', () => {
+    const serverUrl = 'https://app.getontime.no/user-hash';
+    const baseUri = 'user-hash';
+    const destination = linkToOtherHost('app.getontime.no', 'path', serverUrl, baseUri);
+    expect(destination).toBe('https://app.getontime.no/user-hash/path');
+  });
 });
@@ -1,4 +1,6 @@
-import { formatTime, nowInMillis } from '../time';
+import { MILLIS_PER_HOUR, MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';
+
+import { formatDuration, formatTime, nowInMillis } from '../time';

 describe('nowInMillis()', () => {
  it('should return the current time in milliseconds', () => {
@@ -38,3 +40,18 @@ describe('formatTime()', () => {
    expect(time).toStrictEqual('-01:00');
  });
 });
+
+describe('formatDuration()', () => {
+  it('formats durations correctly', () => {
+    expect(formatDuration(0)).toBe('0m');
+    expect(formatDuration(-5000)).toBe('0m');
+    expect(formatDuration(MILLIS_PER_MINUTE)).toBe('1m');
+    expect(formatDuration(6 * MILLIS_PER_MINUTE + 11 * MILLIS_PER_SECOND)).toBe('6m');
+    expect(formatDuration(MILLIS_PER_MINUTE * 10)).toBe('10m');
+    expect(formatDuration(MILLIS_PER_MINUTE * 10 + 100)).toBe('10m');
+    expect(formatDuration(MILLIS_PER_MINUTE * 10 - 100)).toBe('9m');
+    expect(formatDuration(2 * MILLIS_PER_HOUR + 6 * MILLIS_PER_MINUTE)).toBe('2h6m');
+    expect(formatDuration(2 * MILLIS_PER_HOUR + 6 * MILLIS_PER_MINUTE + 45 * MILLIS_PER_SECOND, false)).toBe('2h6m45s');
+    expect(formatDuration(599702, false)).toBe('9m59s');
+  });
+});
@@ -1,36 +0,0 @@
-import { OntimeEvent, SupportedEntry } from 'ontime-types';
-
-/**
- * @description Creates a safe duplicate of an event
- * @param {OntimeEvent} event
- * @param {string} [after]
- * @return {OntimeEvent} clean event
- */
-type ClonedEvent = Omit<OntimeEvent, 'id' | 'cue'>;
-export const cloneEvent = (event: OntimeEvent): ClonedEvent => {
-  return {
-    type: SupportedEntry.Event,
-    flag: event.flag,
-    title: event.title,
-    note: event.note,
-    timeStart: event.timeStart,
-    duration: event.duration,
-    timeEnd: event.timeEnd,
-    timerType: event.timerType,
-    timeStrategy: event.timeStrategy,
-    countToEnd: event.countToEnd,
-    linkStart: event.linkStart,
-    endAction: event.endAction,
-    skip: event.skip,
-    colour: event.colour,
-    parent: event.parent,
-    revision: 0,
-    delay: event.delay, // the events will be collocated, so having the same metadata is a good start
-    dayOffset: event.dayOffset,
-    gap: 0,
-    timeWarning: event.timeWarning,
-    timeDanger: event.timeDanger,
-    triggers: structuredClone(event.triggers),
-    custom: structuredClone(event.custom),
-  };
-};
@@ -1,4 +1,18 @@
-// we need to this as a promise because safari
-export default async function copyToClipboard(text: string) {
-  setTimeout(async () => await navigator.clipboard?.writeText(text));
+/**
+ * copy text to clipboard
+ * @throws if not supported or permission denied
+ */
+export async function copyToClipboard(text: string) {
+  await navigator.clipboard?.writeText(text);
+}
+
+/**
+ * Copy to clipboard but safely ignore errors
+ */
+export async function safeCopyToClipboard(text: string): Promise<void> {
+  try {
+    await copyToClipboard(text);
+  } catch {
+    // Silently ignore errors
+  }
 }
@@ -1,5 +1,5 @@
 import { MaybeNumber } from 'ontime-types';
-import { millisToString } from 'ontime-utils';
+import { millisToString, removeLeadingZero } from 'ontime-utils';

 import { enDash } from './styleUtils';

@@ -14,7 +14,7 @@ export function getOffsetText(offset: MaybeNumber): string {
  let offsetText = '';
  if (offset < 0) offsetText += '-';
  if (offset > 0) offsetText += '+';
-  offsetText += millisToString(Math.abs(offset));
+  offsetText += removeLeadingZero(millisToString(Math.abs(offset)));
  return offsetText;
 }

@@ -112,11 +112,12 @@ export const formatTime = (
 export function formatDuration(duration: number, hideSeconds = true): string {
  // durations should never be negative, we handle it here to flag if there is an issue in future
  if (duration <= 0) {
-    return '0h 0m';
+    return '0m';
  }

  const hours = Math.floor(duration / MILLIS_PER_HOUR);
  const minutes = Math.floor((duration % MILLIS_PER_HOUR) / MILLIS_PER_MINUTE);
+
  let result = '';
  if (hours > 0) {
    result += `${hours}h`;
@@ -126,11 +127,16 @@ export function formatDuration(duration: number, hideSeconds = true): string {
  }

  if (!hideSeconds) {
-    const seconds = Math.ceil((duration % MILLIS_PER_MINUTE) / MILLIS_PER_SECOND);
+    const remainingMs = duration % MILLIS_PER_MINUTE;
+    const exactSeconds = remainingMs / MILLIS_PER_SECOND;
+    // cap at 59 to avoid showing 60s
+    const seconds = Math.min(59, Math.ceil(exactSeconds));
+
    if (seconds > 0) {
      result += `${seconds}s`;
    }
  }
+
  return result;
 }

@@ -19,6 +19,11 @@ declare global {
    process: {
      type: string;
    };
+    // Experimental browser feature
+    documentPictureInPicture: {
+      requestWindow: () => Promise<Window>;
+      window: Window;
+    };
  }
 }

@@ -8,6 +8,7 @@ export const githubUrl = 'https://www.github.com/cpvalente/ontime';
 export const apiRepoLatest = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
 export const websiteUrl = 'https://www.getontime.no';
 export const discordUrl = 'https://discord.com/invite/eje3CSUEXm';
+export const subredditUrl = 'https://www.reddit.com/r/ontimeapp/';

 export const documentationUrl = 'https://docs.getontime.no';
 export const customFieldsDocsUrl = 'https://docs.getontime.no/features/custom-fields/';
@@ -22,7 +23,10 @@ export const isProduction = import.meta.env.PROD;
 export const isDev = import.meta.env.DEV;
 export const currentHostName = window.location.hostname;
 export const isLocalhost = currentHostName === 'localhost' || currentHostName === '127.0.0.1';
-export const isOntimeCloud = currentHostName.includes('cloud.getontime.no');
+export const isOntimeCloud = document.querySelector('base')?.hasAttribute('data-is-cloud')
+
+export const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+export const supportsFullscreen = document.fullscreenEnabled;

 // resolve entrypoint URLs

@@ -212,6 +212,11 @@ $inner-padding: 1rem;
  &.apart {
    justify-content: space-between;
  }
+
+  &.wrap {
+    flex-wrap: wrap;
+    row-gap: 0.5rem;
+  }
 }

@keyframes animloader {
@@ -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>
+  );
 }
@@ -5,6 +5,7 @@ import {
  documentationUrl,
  githubSponsorUrl,
  githubUrl,
+  subredditUrl,
  websiteUrl,
 } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -38,6 +39,7 @@ export default function AboutPanel() {
        <ExternalLink href={documentationUrl}>Read the docs</ExternalLink>
        <ExternalLink href={githubUrl}>Follow the project on GitHub</ExternalLink>
        <ExternalLink href={discordUrl}>Discord server</ExternalLink>
+        <ExternalLink href={subredditUrl}>Subreddit</ExternalLink>
      </Panel.Section>
    </>
  );
@@ -10,7 +10,7 @@ export default function AppVersion() {
    return (
      <Panel.Paragraph>
        {`You are currently using Ontime version ${appVersion}`}
-        <Panel.Error>{`Could not fetch version information: ${isError}`}</Panel.Error>
+        <Panel.Error>Could not fetch version information</Panel.Error>
      </Panel.Paragraph>
    );
  }
@@ -230,10 +230,18 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
              <div key={key} className={style.filterSection}>
                <label>
                  Runtime data source
-                  <Select
-                    value={watch(`filters.${index}.field`)}
-                    onValueChange={(value) => setValue(`filters.${index}.field`, value, { shouldDirty: true })}
-                    options={fieldList.map(({ value, label }) => ({ value, label }))}
+                  <Select<string | null>
+                    // need to normalize '' to null for the Select to show the placeholder
+                    value={watch(`filters.${index}.field`) || null}
+                    onValueChange={(value) => {
+                      if (value === null) return;
+                      setValue(`filters.${index}.field`, value, { shouldDirty: true });
+                    }}
+                    options={fieldList.map(({ value, label }) => ({
+                      value,
+                      label,
+                      disabled: value === null,
+                    }))}
                    aria-label='Event field'
                  />
                  <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
@@ -242,11 +250,14 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
                  Matching condition
                  <Select
                    value={watch(`filters.${index}.operator`)}
-                    onValueChange={(value) =>
-                      setValue(`filters.${index}.operator`, value as 'equals' | 'not_equals' | 'contains', {
-                        shouldDirty: true,
-                      })
-                    }
+                    onValueChange={(value: string | null) => {
+                      if (value === null) return;
+                      setValue(
+                        `filters.${index}.operator`,
+                        value as 'equals' | 'not_equals' | 'greater_than' | 'less_than' | 'contains' | 'not_contains',
+                        { shouldDirty: true },
+                      );
+                    }}
                    options={[
                      { value: 'equals', label: 'equals' },
                      { value: 'not_equals', label: 'not equals' },
@@ -282,7 +293,8 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
      <div className={style.innerColumn}>
        <h3>Outputs</h3>
        <Info>
-          Automation outputs can be used to send data from Ontime to external software.
+          Automation outputs can be used to send data from Ontime to external software <br />
+          or to change properties of Ontime itself.
          <ExternalLink href={integrationsDocsUrl}>See the documentation for templates</ExternalLink>
        </Info>

@@ -44,8 +44,9 @@ export default function OntimeActionForm({
      <label>
        Action
        <Select
-          onValueChange={(value) => {
-            handleSetAction(value as OntimeActionKey);
+          onValueChange={(value: OntimeActionKey | null) => {
+            if (value === null) return;
+            handleSetAction(value);
          }}
          value={watch(`outputs.${index}.action`)}
          options={[
@@ -97,13 +98,13 @@ export default function OntimeActionForm({
            Visibility
            <Select
              onValueChange={(value) => {
-                // we need to translate the undefined value to 'untouched'
-                const translatedValue = value === 'untouched' ? undefined : (value as boolean | undefined);
+                // we need to translate the null to undefined so it becomes 'untouched'
+                const translatedValue = value === null ? undefined : value;
                setValue(`outputs.${index}.visible`, translatedValue, { shouldDirty: true });
              }}
-              value={watch(`outputs.${index}.visible`) === undefined ? 'untouched' : watch(`outputs.${index}.visible`)}
+              value={watch(`outputs.${index}.visible`)}
              options={[
-                { value: 'untouched', label: 'Untouched' },
+                { value: null, label: 'Untouched' },
                { value: true, label: 'Show' },
                { value: false, label: 'Hide' },
              ]}
@@ -116,23 +117,31 @@ export default function OntimeActionForm({
      {selectedAction === 'message-secondary' && (
        <label>
          Timer secondary source
-          <Select
+          <Select<SecondarySource | 'null' | null>
            onValueChange={(value) => {
-              setValue(`outputs.${index}.secondarySource`, value as SecondarySource, { shouldDirty: true });
+              // null -> no selection
+              if (value === null) return;
+              // 'null' -> clear the secondary source
+              if (value === 'null') {
+                setValue(`outputs.${index}.secondarySource`, null, { shouldDirty: true });
+                return;
+              }
+              setValue(`outputs.${index}.secondarySource`, value, { shouldDirty: true });
            }}
            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' },
-              { value: 'external', label: 'External' },
-              { value: 'null', label: 'None' },
+              { value: 'secondary', label: 'Secondary' },
+              { value: 'null', label: 'None' }, // allow the user to clear the secondary source
            ]}
          />
          <Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
        </label>
      )}
+
      <div className={style.test}>{children}</div>
    </div>
  );
@@ -106,7 +106,10 @@ export default function TriggerForm({
        Lifecycle trigger
        <Select
          value={watch('trigger')}
-          onValueChange={(value) => setValue('trigger', value as TimerLifeCycle, { shouldDirty: true })}
+          onValueChange={(value) => {
+            if (value === null) return;
+            setValue('trigger', value as TimerLifeCycle, { shouldDirty: true });
+          }}
          options={cycles.map((cycle) => ({ value: cycle.value, label: cycle.label }))}
          aria-label='Lifecycle trigger'
        />
@@ -116,7 +119,10 @@ export default function TriggerForm({
        Automation title
        <Select
          value={watch('automationId')}
-          onValueChange={(value) => setValue('automationId', value, { shouldDirty: true })}
+          onValueChange={(value: string | null) => {
+            if (value === null) return;
+            setValue('automationId', value, { shouldDirty: true });
+          }}
          options={automationSelect}
          aria-label='Automation title'
        />
@@ -27,6 +27,7 @@ export function isAutomation(automation: AutomationDTO | Automation): automation
 }

 const staticSelectProperties = [
+  { value: null, label: 'Select field' },
  { value: 'eventNow.id', label: 'ID' },
  { value: 'eventNow.title', label: 'Title' },
  { value: 'eventNow.cue', label: 'Cue' },
@@ -42,7 +43,7 @@ const staticNextSelectProperties = [
 ];

 type SelectableField = {
-  value: string; // string encodes path in runtime state object
+  value: string | null; // string encodes path in runtime state object
  label: string;
 };

@@ -9,6 +9,8 @@ import Textarea from '../../../../../common/components/input/textarea/Textarea';
 import Select, { SelectOption } from '../../../../../common/components/select/Select';
 import { useUpdateUrlPreset } from '../../../../../common/hooks-query/useUrlPresets';
 import { preventEscape } from '../../../../../common/utils/keyEvent';
+import { isUrlSafe } from '../../../../../common/utils/regex';
+import { enDash } from '../../../../../common/utils/styleUtils';
 import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets';
 import * as Panel from '../../../panel-utils/PanelUtils';

@@ -52,6 +54,7 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
    formState: { errors, isSubmitting, isValid, isDirty },
  } = useForm<URLPreset>({
    defaultValues: urlPreset ?? defaultValues,
+    mode: 'onChange',
    resetOptions: {
      keepDirtyValues: true,
    },
@@ -110,7 +113,15 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
      <Panel.InlineElements>
        <div>
          <Panel.Description>Alias</Panel.Description>
-          <Input {...register('alias', { required: 'Alias is required' })} />
+          <Input
+            {...register('alias', {
+              required: 'Alias is required',
+              pattern: {
+                value: isUrlSafe,
+                message: 'Field can only contain URL safe characters (a-z, 0-9, _ and -)',
+              },
+            })}
+          />
        </div>
        <div className={style.expand}>
          <Panel.Description>Generate options (paste URL to generate options)</Panel.Description>
@@ -120,7 +131,10 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
          </Panel.InlineElements>
        </div>
      </Panel.InlineElements>
-      <div> - or -</div>
+      {errors.alias?.message && <Panel.Error>{errors.alias.message}</Panel.Error>}
+      <div>
+        {enDash} or {enDash}
+      </div>
      <div>2. Choose a view and its parameters</div>
      <div>
        <Panel.Description>Target</Panel.Description>
@@ -128,7 +142,10 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
          options={targetOptions}
          {...register('target', { required: 'Target is required' })}
          value={watch('target')}
-          onValueChange={(value) => setValue('target', value, { shouldDirty: true })}
+          onValueChange={(value: OntimeViewPresettable | null) => {
+            if (value === null) return;
+            setValue('target', value, { shouldDirty: true });
+          }}
        />
      </div>
      <div>
@@ -51,7 +51,10 @@ export default function RundownDefaultSettings() {
              />
              <Select
                value={defaultTimeStrategy}
-                onValueChange={(value) => setTimeStrategy(value as TimeStrategy)}
+                onValueChange={(value: TimeStrategy | null) => {
+                  if (value === null) return;
+                  setTimeStrategy(value);
+                }}
                options={[
                  { value: TimeStrategy.LockDuration, label: 'Duration' },
                  { value: TimeStrategy.LockEnd, label: 'End Time' },
@@ -73,7 +76,10 @@ export default function RundownDefaultSettings() {
              <Panel.Field title='Timer type' description='Default type of timer for new events' />
              <Select
                value={defaultTimerType}
-                onValueChange={(value) => setDefaultTimerType(value as TimerType)}
+                onValueChange={(value: TimerType | null) => {
+                  if (value === null) return;
+                  setDefaultTimerType(value);
+                }}
                options={[
                  { value: TimerType.CountDown, label: 'Count down' },
                  { value: TimerType.CountUp, label: 'Count up' },
@@ -86,7 +92,10 @@ export default function RundownDefaultSettings() {
              <Panel.Field title='End Action' description='Default end action for new events' />
              <Select
                value={defaultEndAction}
-                onValueChange={(value) => setDefaultEndAction(value as EndAction)}
+                onValueChange={(value: EndAction | null) => {
+                  if (value === null) return;
+                  setDefaultEndAction(value);
+                }}
                options={[
                  { value: EndAction.None, label: 'None' },
                  { value: EndAction.LoadNext, label: 'Load next' },
@@ -162,9 +162,10 @@ export default function ImportMapForm({
                    <Select
                      id={importName as string}
                      value={watch(label as keyof NamedImportMap) as string}
-                      onValueChange={(value: string) =>
-                        setValue(label as keyof NamedImportMap, value, { shouldDirty: true })
-                      }
+                      onValueChange={(value: string | null) => {
+                        if (value === null) return;
+                        setValue(label as keyof NamedImportMap, value, { shouldDirty: true });
+                      }}
                      options={worksheetNames?.map((name) => ({ value: name, label: name })) || []}
                    />
                  </td>
@@ -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;
@@ -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
@@ -1,18 +1,22 @@
 import { useState } from 'react';
+import { IoArrowDown, IoArrowUp } from 'react-icons/io5';

 import Info from '../../../../common/components/info/Info';
-import { useOrderedProjectList } from '../../../../common/hooks-query/useProjectList';
+import { ProjectSortMode, useOrderedProjectList } from '../../../../common/hooks-query/useProjectList';
 import * as Panel from '../../panel-utils/PanelUtils';

 import ProjectListItem, { EditMode } from './ProjectListItem';

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

-export default function ProjectList() {
-  const { data, refetch, status } = useOrderedProjectList();
+type SortParameter = 'alphabetical' | 'modified';

+export default function ProjectList() {
  const [editingMode, setEditingMode] = useState<EditMode | null>(null);
  const [editingFilename, setEditingFilename] = useState<string | null>(null);
+  const [sortMode, setSortMode] = useState<ProjectSortMode>('modified-desc');
+
+  const { data, refetch, status } = useOrderedProjectList(sortMode);

  const handleToggleEditMode = (editMode: EditMode, filename: string | null) => {
    setEditingMode((prev) => (prev === editMode && filename === editingFilename ? null : editMode));
@@ -28,6 +32,13 @@ export default function ProjectList() {
    await refetch();
  };

+  const handleSort = (sortParameter: SortParameter) => {
+    setSortMode((current) => {
+      const isAscending = current === `${sortParameter}-asc`;
+      return `${sortParameter}-${isAscending ? 'desc' : 'asc'}` as ProjectSortMode;
+    });
+  };
+
  if (status === 'pending') {
    return (
      <div className={style.empty}>
@@ -48,8 +59,18 @@ export default function ProjectList() {
      <Panel.Table>
        <thead>
          <tr>
-            <th className={style.containCell}>File Name</th>
-            <th>Last Used</th>
+            <th className={style.containCell} onClick={() => handleSort('alphabetical')}>
+              <span className={style.sortableHeader}>
+                File Name
+                <SortIcon sortMode={sortMode} type='alphabetical' />
+              </span>
+            </th>
+            <th onClick={() => handleSort('modified')}>
+              <span className={style.sortableHeader}>
+                Last Used
+                <SortIcon sortMode={sortMode} type='modified' />
+              </span>
+            </th>
            <th />
          </tr>
        </thead>
@@ -72,3 +93,10 @@ export default function ProjectList() {
    </>
  );
 }
+
+function SortIcon({ sortMode, type }: { sortMode: ProjectSortMode; type: SortParameter }) {
+  const prefix = `${type}-`;
+  if (sortMode === `${prefix}asc`) return <IoArrowDown />;
+  if (sortMode === `${prefix}desc`) return <IoArrowUp />;
+  return null;
+}
@@ -23,7 +23,13 @@
 }

 .containCell {
-  max-width: 400px;
+  max-width: 50%;
+}
+
+.sortableHeader {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
 }

 .fullWidth {
@@ -6,6 +6,7 @@ import { Settings } from 'ontime-types';
 import { postSettings } from '../../../../common/api/settings';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
+import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import Select from '../../../../common/components/select/Select';
 import useSettings from '../../../../common/hooks-query/useSettings';
@@ -98,6 +99,7 @@ export default function GeneralSettings() {
          {submitError && <Panel.Error>{submitError}</Panel.Error>}
          <Panel.Divider />
          <Panel.Section>
+            <Info>Changes to the time format and views language do not affect the editor view</Info>
            <Panel.Loader isLoading={isLoading} />
            <Panel.ListGroup>
              <Panel.ListItem>
@@ -146,12 +148,15 @@ export default function GeneralSettings() {
              <Panel.ListItem>
                <Panel.Field
                  title='Time format'
-                  description='Default time format to show in views 12 /24 hours'
+                  description='Default time format to show in views 12 / 24 hours'
                  error={errors.timeFormat?.message}
                />
                <Select
                  value={watch('timeFormat')}
-                  onValueChange={(value) => setValue('timeFormat', value as '12' | '24', { shouldDirty: true })}
+                  onValueChange={(value: '12' | '24' | null) => {
+                    if (value === null) return;
+                    setValue('timeFormat', value, { shouldDirty: true });
+                  }}
                  defaultValue='24'
                  options={[
                    { value: '12', label: '12 hours 11:00:10 PM' },
@@ -167,7 +172,10 @@ export default function GeneralSettings() {
                />
                <Select
                  value={watch('language')}
-                  onValueChange={(value) => setValue('language', value, { shouldDirty: true })}
+                  onValueChange={(value: string | null) => {
+                    if (value === null) return;
+                    setValue('language', value, { shouldDirty: true });
+                  }}
                  disabled={disableInputs}
                  defaultValue='en'
                  options={[
@@ -33,7 +33,6 @@ export default function ProjectData() {
    setValue,
  } = useForm({
    defaultValues: data,
-    values: data,
    resetOptions: {
      keepDirtyValues: true,
    },
@@ -70,12 +70,15 @@ export default function QuickStart({ isOpen, onClose }: QuickStartProps) {
            <Panel.ListItem>
              <Panel.Field
                title='Time format'
-                description='Default time format to show in views 12 /24 hours'
+                description='Default time format to show in views 12 / 24 hours (does not affect editor)'
                error={errors.settings?.timeFormat?.message}
              />
              <Select
                value={watch('settings.timeFormat')}
-                onValueChange={(value: '12' | '24') => setValue('settings.timeFormat', value, { shouldDirty: true })}
+                onValueChange={(value: '12' | '24' | null) => {
+                  if (value === null) return;
+                  setValue('settings.timeFormat', value, { shouldDirty: true });
+                }}
                defaultValue='24'
                options={[
                  { value: '12', label: '12 hours 11:00:10 PM' },
@@ -91,7 +94,10 @@ export default function QuickStart({ isOpen, onClose }: QuickStartProps) {
              />
              <Select
                value={watch('settings.language')}
-                onValueChange={(value: string) => setValue('settings.language', value, { shouldDirty: true })}
+                onValueChange={(value: string | null) => {
+                  if (value === null) return;
+                  setValue('settings.language', value, { shouldDirty: true });
+                }}
                defaultValue='en'
                options={[
                  { value: 'en', label: 'English' },
@@ -1,5 +1,3 @@
-@import "./MessageControl.module.scss";
-
 .inputItems {
  display: grid;
  grid-template-columns: 1fr auto;
@@ -8,5 +6,10 @@
 }

 .label {
-  @extend .label;
+  font-size: $inner-section-text-size;
+  color: $label-gray;
+
+  &.active {
+    color: $action-text-color;
+  }
 }
@@ -42,7 +42,7 @@ export default function InputRow(props: PropsWithChildren<InputRowProps>) {
  };

  return (
-    <div className={style.inputRow}>
+    <div>
      <label className={cx([style.label, visible ?? style.active])} htmlFor={label}>
        {label}
      </label>
@@ -0,0 +1,11 @@
+.growPanel {
+  flex: 1;
+}
+
+.contentLayout {
+  display: flex;
+  flex-direction: column;
+  gap: $section-spacing;
+  color: $ui-white;
+  padding-top: $panel-top-padding;
+}
@@ -1,34 +1,32 @@
 import { memo } from 'react';

-import { Corner } from '../../../common/components/editor-utils/EditorUtils';
+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 { handleLinks } from '../../../common/utils/linkUtils';
-import { cx } from '../../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../../externals';

 import MessageControl from './MessageControl';

-import style from '../../../views/editor/Editor.module.scss';
+import style from './MessageControlExport.module.scss';

 export default memo(MessageControlExport);
 function MessageControlExport() {
  const isExtracted = window.location.pathname.includes('/messagecontrol');
-  const classes = cx([style.content, style.contentColumnLayout]);

  return (
    <ProtectRoute permission='editor'>
-      <div className={style.messages} data-testid='panel-messages-control'>
-        {!isExtracted && <Corner onClick={(event) => handleLinks('messagecontrol', event)} />}
+      <Editor.Panel className={style.growPanel} data-testid='panel-messages-control'>
+        {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('messagecontrol', event)} />}
        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}

-        <div className={classes}>
+        <div className={style.contentLayout}>
          <ErrorBoundary>
            <MessageControl />
          </ErrorBoundary>
        </div>
-      </div>
+      </Editor.Panel>
    </ProtectRoute>
  );
 }
@@ -1,18 +1,3 @@
-.label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-
-  &.active {
-    color: $action-text-color;
-  }
-}
-
-.previewContainer {
-  display: grid;
-  gap: $element-spacing;
-  grid-template-columns: 3fr 2fr;
-}
-
 .preview {
  background-color: $ui-black;
  display: grid;
@@ -21,21 +6,6 @@
  position: relative;
 }

-.options {
-  display: flex;
-  flex-direction: column;
-  gap: $element-spacing;
-}
-
-.eventStatus {
-  position: absolute;
-  left: 0;
-  margin: 0.5rem 0.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
 .mainContent {
  font-size: 1rem;
  font-weight: 600;
@@ -61,9 +31,13 @@
  display: none;
 }

-.timerIndicators {
+.eventStatus {
+  position: absolute;
+  left: 0;
+  margin: 0.5rem 0.25rem;
  display: flex;
  flex-direction: column;
+  gap: 0.25rem;
 }

 .statusIcon {
@@ -73,3 +47,4 @@
    color: $active-indicator;
  }
 }
+
@@ -2,14 +2,15 @@ import { IoArrowDown, IoArrowUp, IoBan, IoTime } from 'react-icons/io5';
 import { LuArrowDownToLine } from 'react-icons/lu';
 import { TimerPhase, TimerType } from 'ontime-types';

-import { Corner } from '../../../common/components/editor-utils/EditorUtils';
+import { CornerWithPip } from '../../../common/components/editor-utils/EditorUtils';
 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { useMessagePreview } from '../../../common/hooks/useSocket';
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import { cx, timerPlaceholder } from '../../../common/utils/styleUtils';
+import PipRoot from '../../../views/editor/pip-timer/PipRoot';

-import style from './MessageControl.module.scss';
+import style from './TimerPreview.module.scss';

 const secondarySourceLabels: Record<string, string> = {
  aux1: 'Aux 1',
@@ -52,7 +53,7 @@ export default function TimerPreview() {

  return (
    <div className={style.preview}>
-      <Corner onClick={(event) => handleLinks('timer', event)} />
+      <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
      <div className={contentClasses}>
        <div
          className={style.mainContent}
@@ -0,0 +1,12 @@
+.previewContainer {
+  display: grid;
+  gap: $element-spacing;
+  grid-template-columns: 3fr 2fr;
+}
+
+
+.options {
+  display: flex;
+  flex-direction: column;
+  gap: $element-spacing;
+}
@@ -8,7 +8,7 @@ import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket

 import TimerPreview from './TimerPreview';

-import style from './MessageControl.module.scss';
+import style from './TimerViewControl.module.scss';

 export default function TimerControlsPreview() {
  const { blackout, blink } = useTimerViewControl();
@@ -71,12 +71,13 @@ function SecondarySourceControl() {
          { value: 'aux3', label: 'Aux 3' },
          { value: 'secondary', label: 'Secondary message' },
        ]}
-        onValueChange={(value) => {
+        onValueChange={(value: SecondarySource | null) => {
+          if (value === null) return;
          // we can only update the remote if it is enabled
          if (secondarySource !== null) {
-            setMessage.timerSecondarySource(value as SecondarySource);
+            setMessage.timerSecondarySource(value);
          }
-          setValue(value as SecondarySource);
+          setValue(value);
        }}
      />
      <Button
@@ -0,0 +1,3 @@
+.content {
+  padding-top: $panel-top-padding;
+}
@@ -1,6 +1,6 @@
 import { memo } from 'react';

-import { Corner } from '../../../common/components/editor-utils/EditorUtils';
+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';
@@ -9,7 +9,7 @@ import { getIsNavigationLocked } from '../../../externals';

 import PlaybackControl from './PlaybackControl';

-import style from '../../../views/editor/Editor.module.scss';
+import style from './TimerControlExport.module.scss';

 export default memo(TimerControlExport);
 function TimerControlExport() {
@@ -17,8 +17,8 @@ function TimerControlExport() {

  return (
    <ProtectRoute permission='editor'>
-      <div className={style.playback} data-testid='panel-timer-control'>
-        {!isExtracted && <Corner onClick={(event) => handleLinks('timercontrol', event)} />}
+      <Editor.Panel data-testid='panel-timer-control'>
+        {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('timercontrol', event)} />}
        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}

        <div className={style.content}>
@@ -26,7 +26,7 @@ function TimerControlExport() {
            <PlaybackControl />
          </ErrorBoundary>
        </div>
-      </div>
+      </Editor.Panel>
    </ProtectRoute>
  );
 }
@@ -41,5 +41,4 @@

  padding-inline: 0.5em;
  outline: none;
-
-}
+}
@@ -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}>
@@ -8,6 +8,13 @@
  gap: $element-inner-spacing;
 }

+.timerDisplay {
+  grid-area: timer;
+  max-width: 18.75rem;
+  min-width: 5em;
+  text-align: center;
+}
+
 // ---------> INDICATORS

 .indicators {
@@ -58,7 +65,6 @@
  height: 1.5rem;
  display: flex;
  gap: $section-spacing;
-  margin-left: 1.5rem;
 }

 .tag {
@@ -70,6 +76,7 @@
 .time {
  color: $section-white;
  font-size: $text-body-size;
+  display: inline-block;
 }

 .rolltag {
@@ -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>
@@ -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' };
+}
@@ -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;
  }
 }
@@ -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>
+  );
 }
@@ -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;
+  }
+}
@@ -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>
+  );
+}
@@ -1,84 +1,10 @@
-import { use, useCallback, useEffect, useMemo, useState } from 'react';
-import { useSearchParams } from 'react-router';
-
-import { PresetContext } from '../../common/context/PresetContext';
-
-/** @url https://developer.mozilla.org/en-US/docs/Web/API/WakeLock */
-export default function KeepAwake() {
-  const { keepAwake } = useKeepAwakeOptions();
-  const [wakeLockSentinel, setWakeLockSentinel] = useState<WakeLockSentinel | null>(null);
-
-  const removeLock = () => {
-    if (wakeLockSentinel) wakeLockSentinel.release().finally(() => setWakeLockSentinel(null));
-  };
-
-  const acquireLock = () => {
-    if (!wakeLockSentinel || wakeLockSentinel.released) {
-      setWakeLockSentinel(null);
-      navigator.wakeLock
-        .request('screen')
-        .then((sentinel) => {
-          setWakeLockSentinel(sentinel);
-        })
-        .catch(console.error);
-    }
-  };
-
-  useEffect(() => {
-    const controller = new AbortController();
-    if (keepAwake) {
-      acquireLock();
-      document.addEventListener(
-        'visibilitychange',
-        () => {
-          if (wakeLockSentinel !== null && document.visibilityState === 'visible') {
-            acquireLock();
-          }
-        },
-        { signal: controller.signal },
-      );
-    } else {
-      removeLock();
-    }
-
-    return () => {
-      controller.abort();
-      removeLock();
-    };
-  }, [keepAwake]);
-
-  return <></>;
-}
-
-const keepAwakeKey = 'keep-awake';
-
-function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URLSearchParams) {
-  // Helper to get value from either source, prioritizing defaultValues
-  return defaultValues?.has(keepAwakeKey) || searchParams.has(keepAwakeKey);
-}
+import { useWakelock } from './useWakeLock';

 /**
- * Hook exposes the keep awake options
+ * Composes the wakelock hook to contain re-renders
 */
-export function useKeepAwakeOptions() {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const maybePreset = use(PresetContext);
+export default function KeepAwake() {
+  useWakelock();

-  const keepAwake = useMemo(() => {
-    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
-    return getOptionsFromParams(searchParams, defaultValues);
-  }, [maybePreset, searchParams]);
-
-  const toggleKeepAwake = useCallback(() => {
-    setSearchParams((searchParams) => {
-      if (keepAwake) {
-        searchParams.delete(keepAwakeKey);
-      } else {
-        searchParams.set(keepAwakeKey, '1');
-      }
-      return searchParams;
-    });
-  }, [keepAwake]);
-
-  return { keepAwake, toggleKeepAwake };
+  return null;
 }
@@ -0,0 +1,96 @@
+import { use, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useSearchParams } from 'react-router';
+
+import { PresetContext } from '../../common/context/PresetContext';
+
+// wakelock is only available in secure contexts
+// however, that is covered by the navigator check
+export const canUseWakeLock = typeof window !== 'undefined' && 'wakeLock' in navigator;
+
+/** @url https://developer.mozilla.org/en-US/docs/Web/API/WakeLock */
+export function useWakelock() {
+  const { keepAwake } = useKeepAwakeOptions();
+  const wakeLockSentinelRef = useRef<WakeLockSentinel | null>(null);
+
+  useEffect(() => {
+    const removeLock = () => {
+      if (wakeLockSentinelRef.current) {
+        wakeLockSentinelRef.current.release().finally(() => {
+          wakeLockSentinelRef.current = null;
+        });
+      }
+    };
+
+    const acquireLock = () => {
+      const sentinel = wakeLockSentinelRef.current;
+      if (!sentinel || sentinel.released) {
+        wakeLockSentinelRef.current = null;
+
+        if (!canUseWakeLock) {
+          return;
+        }
+
+        navigator.wakeLock
+          .request('screen')
+          .then((sentinel) => {
+            wakeLockSentinelRef.current = sentinel;
+          })
+          .catch(console.error);
+      }
+    };
+
+    const controller = new AbortController();
+    if (keepAwake) {
+      acquireLock();
+      document.addEventListener(
+        'visibilitychange',
+        () => {
+          if (wakeLockSentinelRef.current !== null && document.visibilityState === 'visible') {
+            acquireLock();
+          }
+        },
+        { signal: controller.signal },
+      );
+    } else {
+      removeLock();
+    }
+
+    return () => {
+      controller.abort();
+      removeLock();
+    };
+  }, [keepAwake]);
+}
+
+const keepAwakeKey = 'keep-awake';
+
+function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URLSearchParams) {
+  // Helper to get value from either source, prioritizing defaultValues
+  return defaultValues?.has(keepAwakeKey) || searchParams.has(keepAwakeKey);
+}
+
+/**
+ * Hook exposes the keep awake options
+ */
+export function useKeepAwakeOptions() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const maybePreset = use(PresetContext);
+
+  const keepAwake = useMemo(() => {
+    const defaultValues = maybePreset ? new URLSearchParams(maybePreset.search) : undefined;
+    return getOptionsFromParams(searchParams, defaultValues);
+  }, [maybePreset, searchParams]);
+
+  const toggleKeepAwake = useCallback(() => {
+    setSearchParams((searchParams) => {
+      if (keepAwake) {
+        searchParams.delete(keepAwakeKey);
+      } else {
+        searchParams.set(keepAwakeKey, '1');
+      }
+      return searchParams;
+    });
+  }, [keepAwake, setSearchParams]);
+
+  return { keepAwake, toggleKeepAwake };
+}
@@ -9,9 +9,10 @@ import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
 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';
@@ -42,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);
@@ -117,12 +118,14 @@ 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 />

      {canEdit && (
-        <div className={cx([style.editPrompt, showEditPrompt && style.show])}>Press and hold to edit user field</div>
+        <div className={cx([style.editPrompt, showEditPrompt && style.show])}>
+          {isTouchDevice ? 'Press and hold to edit user field' : 'Right click to edit user field'}
+        </div>
      )}

      <div className={style.operatorEvents} onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
@@ -168,6 +171,14 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
          }

          if (isOntimeGroup(entry)) {
+            const { isPast } = rundownMetadata[entry.id];
+
+            const isCurrentParent = selectedEventId ? rundownMetadata[selectedEventId]?.groupId === entry.id : false;
+
+            if (hidePast && isPast && !isCurrentParent) {
+              return null;
+            }
+
            return (
              <Fragment key={entry.id}>
                <OperatorGroup key={entry.id} title={entry.title} />
@@ -30,12 +30,12 @@
  flex-direction: column;
  gap: 0.5rem;

-  max-height: min(80vh, 600px);
+  max-height: min(60vh, 600px);
  overflow-y: auto;
 }

 .label {
-  background-color: var(--user-bg);
+  background-color: var(--user-bg, $gray-900);
  width: fit-content;
  padding-inline: 1rem;
 }
@@ -1,6 +1,6 @@
 import { Fragment, useRef, useState } from 'react';
 import { IoClose } from 'react-icons/io5';
-import { Dialog } from '@base-ui-components/react/dialog';
+import { Dialog } from '@base-ui/react/dialog';
 import { OntimeEvent } from 'ontime-types';

 import Button from '../../../common/components/buttons/Button';
@@ -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();
@@ -1,5 +1,4 @@
@use '@/theme/viewerDefs' as *;
-@import '../Operator.module.scss';

 .event {
  opacity: 1;
@@ -13,7 +12,7 @@
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  grid-template-rows: auto auto auto;
-  grid-template-columns: 1.25rem 1fr auto;
+  grid-template-columns: 1.5rem 1fr auto;
  grid-template-areas:
    'binder main      schedule'
    'binder secondary running'
@@ -42,6 +41,7 @@
  place-content: center;
  position: relative;
  background-color: $gray-1050; // to override inline
+  font-weight: 600;

  .cue {
    white-space: nowrap;
@@ -71,47 +71,41 @@
  white-space: pre-line;
 }

-.plannedStart, .timeUntil {
-  line-height: 1em;
-  background-color: $gray-1000;
+.plannedStart,
+.timeUntil,
+.runningTime {
+  border-radius: $component-border-radius-md;
  padding: 0.25rem 0.5rem;
-  border-radius: 1px;
+  line-height: 1;
 }

 .plannedStart {
  font-size: 1.5rem;
  margin-right: 0.5rem;
+  display: inline;
+  background-color: $white-20;
+  letter-spacing: 1px;
 }

 .timeUntil {
-  font-size: calc(1rem - 2px);
-  line-height: 1em;
  grid-area: schedule;
+  font-size: calc(1rem - 2px);
  justify-self: end;
+  background-color: $white-20;
+  letter-spacing: 1px;
 }

 .runningTime {
-  font-size: 1.25rem;
-  line-height: 1em;
  grid-area: running;
+  font-size: 1.25rem;
  justify-self: end;
-  align-self: flex-start;
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
+  background-color: $white-7;
 }

 .fields {
  grid-area: fields;
-  font-size: var(--operator-customfield-font-size-override, 1.25rem);
-  font-weight: 400;
-  color: $ui-black;
-  margin: 0.25rem 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  row-gap: 0.25em;
-  line-height: 1.25em;
+  margin-top: 0;
+  border-top: 0;

  .field {
    font-weight: 600;
@@ -133,8 +127,18 @@
    // allow multi-line text but trim before
    white-space: pre-line;
  }
-}

-.fields::after {
-  content: '\200b';
+  &.fieldsWithContent {
+    margin-top: 0.25rem;
+    padding-block: 0.5rem;
+    border-top: 1px solid $white-13;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    gap: 0.25rem 0.75rem;
+    line-height: 1.25em;
+    font-size: var(--operator-customfield-font-size-override, 1.25rem);
+    font-weight: 400;
+    color: $ui-black;
+  }
 }
@@ -1,11 +1,12 @@
-import { memo, RefObject, SyntheticEvent } from 'react';
-import { useLongPress } from '@mantine/hooks';
-import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND, millisToString } from 'ontime-utils';
+import { CSSProperties, memo, RefObject, SyntheticEvent } from 'react';
+import { MILLIS_PER_MINUTE, MILLIS_PER_SECOND } from 'ontime-utils';

 import DelayIndicator from '../../../common/components/delay-indicator/DelayIndicator';
+import { useLongPress } from '../../../common/hooks/useLongPress';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
-import { formatDuration, useTimeUntilExpectedStart } from '../../../common/utils/time';
-import RunningTime from '../../viewers/common/running-time/RunningTime';
+import { formatDuration, formatTime, useTimeUntilExpectedStart } from '../../../common/utils/time';
+import RunningTime from '../../../views/common/running-time/RunningTime';
+import SuperscriptPeriod from '../../../views/common/superscript-time/SuperscriptPeriod';
 import type { EditEvent, Subscribed } from '../operator.types';

 import style from './OperatorEvent.module.scss';
@@ -54,8 +55,10 @@ function OperatorEvent({
   * gather behaviour for long press and context menu
   */
  const handleLongPress = (event?: SyntheticEvent) => {
-    // we dont have an event out of useLongPress
-    event?.preventDefault();
+    // prevent default if the event is cancelable to avoid browser intervention warnings
+    if (event && event.cancelable) {
+      event.preventDefault();
+    }
    if (subscribed) {
      onLongPress({ id, cue, subscriptions: subscribed });
    }
@@ -64,22 +67,33 @@ function OperatorEvent({
  const mouseHandlers = useLongPress(handleLongPress);
  const cueColours = colour && getAccessibleColour(colour);

-  const operatorClasses = cx([
-    style.event,
-    isSelected && style.running,
-    isPast && style.past,
-  ]);
+  const operatorClasses = cx([style.event, isSelected && style.running, isPast && style.past]);
+
+  const hasFields = subscribed.some((field) => field.value);
+  const columnCount = subscribed.length ? Math.min(subscribed.length, 4) : 0;
+  const fieldGridStyle =
+    columnCount > 0
+      ? ({
+          gridTemplateColumns: `repeat(${columnCount}, minmax(12rem, 1fr))`,
+        } satisfies CSSProperties)
+      : undefined;

  return (
-    <div className={operatorClasses} data-testid={cue} ref={selectedRef} onContextMenu={handleLongPress} {...mouseHandlers}>
+    <div
+      className={operatorClasses}
+      data-testid={cue}
+      ref={selectedRef}
+      onContextMenu={handleLongPress}
+      {...mouseHandlers}
+    >
      <div className={style.binder} style={{ ...cueColours }}>
        <span className={style.cue}>{cue}</span>
      </div>

      <span className={style.mainField}>
-        {showStart && <span className={style.plannedStart}>{millisToString(timeStart)}</span>}
+        {showStart && <SuperscriptPeriod className={style.plannedStart} time={formatTime(timeStart)} />}
        {main}
-        </span>
+      </span>
      <span className={style.secondaryField}>{secondary}</span>
      <OperatorEventSchedule
        timeStart={timeStart}
@@ -95,22 +109,25 @@ function OperatorEvent({
        <RunningTime className={cx([isSelected && style.muted])} value={duration} hideLeadingZero />
      </span>

-      <div className={style.fields}>
-        {subscribed
-          .filter((field) => field.value)
-          .map((field) => {
-            const fieldClasses = cx([style.field, !field.colour ? style.noColour : null]);
-            return (
-              <div key={field.id}>
-                <span className={fieldClasses} style={{ backgroundColor: field.colour }}>
-                  {field.label}
-                </span>
-                <span className={style.value} style={{ color: field.colour }}>
-                  {field.value}
-                </span>
-              </div>
-            );
-          })}
+      <div className={cx([style.fields, hasFields && style.fieldsWithContent])} style={fieldGridStyle}>
+        {subscribed.map((field) => {
+          if (!field.value) {
+            return <div key={field.id} />;
+          }
+          return (
+            <div key={field.id}>
+              <span
+                className={cx([style.field, !field.colour && style.noColour])}
+                style={{ backgroundColor: field.colour }}
+              >
+                {field.label}
+              </span>
+              <span className={style.value} style={{ color: field.colour }}>
+                {field.value}
+              </span>
+            </div>
+          );
+        })}
      </div>
    </div>
  );
@@ -167,5 +184,9 @@ function TimeUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
  const isDue = timeUntil < MILLIS_PER_SECOND;
  const timeUntilString = isDue ? 'DUE' : `${formatDuration(Math.abs(timeUntil), timeUntil > 2 * MILLIS_PER_MINUTE)}`;

-  return <span className={style.timeUntil} data-testid='time-until'>{timeUntilString}</span>;
+  return (
+    <span className={style.timeUntil} data-testid='time-until'>
+      {timeUntilString}
+    </span>
+  );
 }
@@ -10,7 +10,7 @@ import {
  makeOptionsFromCustomFields,
 } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
-import { isStringBoolean } from '../viewers/common/viewUtils';
+import { isStringBoolean } from '../../views/common/viewUtils';

 export const getOperatorOptions = (customFields: CustomFields, timeFormat: string): ViewOption[] => {
  const fieldOptions = makeOptionsFromCustomFields(customFields, [
@@ -1,6 +1,6 @@
 import { CustomFields, MaybeString, OntimeEvent } from 'ontime-types';

-import { getPropertyValue } from '../viewers/common/viewUtils';
+import { getPropertyValue } from '../../views/common/viewUtils';

 import type { Subscribed } from './operator.types';

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	197042e630	bump version to 4.4.0-beta.0	2026-01-26 12:35:32 +01:00
Carlos Valente	d1780aa98c	refactor: align inputs with group, refs #1857	2026-01-26 11:35:09 +01:00
Carlos Valente	87b1721b9a	feat: editor layout	2026-01-26 11:35:09 +01:00
Carlos Valente	9c08f0dcb1	feat: extend rundown shortcuts	2026-01-26 11:09:38 +01:00
Carlos Valente	0ac98f0f02	feat: unify rundown features	2026-01-25 13:54:49 +01:00
Carlos Valente	261cd25bec	refactor: table mode and context	2026-01-25 13:54:49 +01:00
Carlos Valente	8cfbcd35cd	fix: tsconfig references for utility tests	2026-01-25 13:54:49 +01:00
Carlos Valente	c4435259c5	refactor: create utility for enums	2026-01-25 13:54:49 +01:00
Carlos Valente	84a7b1c1f7	feat: create reusable scroll area	2026-01-25 13:54:49 +01:00
Carlos Valente	db9444aaa4	refactor: expose actions through context	2026-01-25 13:54:49 +01:00
Carlos Valente	fc007cf124	refactor: improve context menu performance - extract menu from rundown tree - lazy create actions	2026-01-25 13:54:49 +01:00
Carlos Valente	e95685d366	refactor: improve performance in rundown - leverage compiler - correct subscriptions from zustand	2026-01-25 13:54:49 +01:00
Carlos Valente	5f634bb48a	feat: table mode in editor	2026-01-25 13:54:49 +01:00
Carlos Valente	2af13b340b	fix: automation form validation	2026-01-15 15:38:30 +01:00
Carlos Valente	525999440a	fix: inline elements should not wrap by default	2026-01-14 17:12:03 +01:00
Carlos Valente	6e5805977a	refactor: hide logo on error	2026-01-11 17:43:53 +01:00
Carlos Valente	eb897a2a23	refactor: set background colour from content	2026-01-11 17:43:53 +01:00
Carlos Valente	05d997a52d	bump version to 4.3.1	2026-01-11 17:43:23 +01:00
Carlos Valente	f8cde5d627	fix: restore process sets currentDay	2026-01-10 19:23:49 +01:00
Alex Christoffer Rasmussen	1b55254834	fix: Network Interface overflow (#1935 )	2026-01-05 21:05:45 +01:00
Alex Christoffer Rasmussen	6436e3fda8	refactor: extract rundown switching to a single function in rundown.service (#1930 )	2026-01-05 20:47:04 +01:00
Alex Christoffer Rasmussen	680273770c	fix: crash-log not written on windows and add log entries to crash report * fix: crashlog not written on windows * feat: dump last 100 log entries to crash report	2026-01-01 14:59:21 +01:00
Carlos Valente	75e77de466	fix: prevent infinite loop in project data	2025-12-26 08:42:53 +01:00
Carlos Valente	75cbcd8e85	bump version to 4.3.0	2025-12-22 16:57:52 +01:00
Carlos Valente	701f24cece	fix: automation form validation	2025-12-22 16:57:52 +01:00
Carlos Valente	166160dda9	chore: upgrade client dependencies	2025-12-22 16:57:52 +01:00
Carlos Valente	9c5116f197	refactor: handle prefix on login - post-login redirect should account for prefix - scope cookies to each path by prefix	2025-12-22 15:59:38 +01:00
Alex Christoffer Rasmussen	deb1f043c7	fix: set not initialised custom field from api (#1926 )	2025-12-22 15:27:06 +01:00
Carlos Valente	cbba19a9b1	fix: user can quick start project from partial data	2025-12-21 20:25:14 +01:00
Carlos Valente	a5daa76616	refactor: improve merge logic	2025-12-21 20:25:14 +01:00
Carlos Valente	08b8e73393	refactor: finish view directory migration	2025-12-21 13:32:12 +01:00
Carlos Valente	2f3cf9825a	refactor(css): migrate use of deprecated import in messagecontrol	2025-12-21 13:32:12 +01:00
Carlos Valente	b0f02e726d	refactor(css): migrate use of deprecated import in cuesheet	2025-12-21 13:32:12 +01:00
Carlos Valente	ac40292813	refactor(css): migrate use of deprecated import in operator	2025-12-21 13:32:12 +01:00
Carlos Valente	2ac00ee8cc	refactor(css): migrate use of deprecated import in buttons	2025-12-21 13:32:12 +01:00
Carlos Valente	972f9e35fd	refactor: create separation between editor wrapper and contents	2025-12-21 13:32:12 +01:00
Carlos Valente	1d7ee163a0	Revert "feat: display offline indicators in all views" This reverts commit `71b2fa8e21`.	2025-12-20 15:25:15 +01:00
Carlos Valente	1054ec0a5e	refactor: expose missing types	2025-12-20 14:18:07 +01:00
Carlos Valente	fc2e76db0a	refactor: stabilise filtering function	2025-12-19 09:54:19 +01:00
Carlos Valente	ef3d541eb3	refactor: simplify element lookup	2025-12-19 09:54:19 +01:00
Carlos Valente	8daf3313f2	refactor: simplify flat rundown	2025-12-19 09:54:19 +01:00
Carlos Valente	93c913ec5a	refactor: remove placeholderData pattern	2025-12-19 09:54:19 +01:00
Carlos Valente	71b2fa8e21	feat: display offline indicators in all views	2025-12-19 08:51:54 +01:00
Carlos Valente	f2b78e0f32	refactor: generate ids for new rundowns	2025-12-18 14:42:01 +01:00
Carlos Valente	b70ef80320	refactor: patch does not load rundown	2025-12-18 14:42:01 +01:00
Carlos Valente	426d42ab63	refactor: add guards around trivial index checks	2025-12-18 14:42:01 +01:00
Carlos Valente	242cefd35c	tooling: lax typechecking in tests	2025-12-18 14:42:01 +01:00
arc-alex	6beda1575a	chore: marke change api call async	2025-12-16 21:56:39 +01:00
arc-alex	ba75d52d29	chore: marking a functions as throwing	2025-12-16 21:56:39 +01:00
arc-alex	35a4361ae9	fix: expectedFinish flashing incorrect value when adding timer in overtime	2025-12-16 21:56:39 +01:00
arc-alex	77225383a4	fix: block uploading already existing file name	2025-12-16 21:56:39 +01:00
arc-alex	f0e81c0cf0	fix: stop timer on rundown switch	2025-12-16 21:56:39 +01:00
Joel Wetzell	9355d7bf27	feat: add arm architectures to linux target	2025-12-15 20:03:57 +01:00
Carlos Valente	cd39227af7	fix: prevent unsupported wakelock	2025-12-09 19:13:36 +01:00
Carlos Valente	14e21214af	fix: subdue paused only for running timers	2025-12-09 19:13:36 +01:00
Carlos Valente	03184b0321	fix: prevent accessing undefined index	2025-12-09 19:13:36 +01:00
Carlos Valente	cd5af769ab	fix: undefined flatRundown	2025-12-09 19:13:36 +01:00
Carlos Valente	d116670318	fix: safe copy to clipboard	2025-12-09 19:13:36 +01:00
Carlos Valente	9ba5ebd4bd	bump version to 4.2.1 (#1896 )	2025-11-28 16:26:53 +01:00
Carlos Valente	3f1f06f7c5	Improve Clone (#1897 ) * refactor(rundown): optimise copy-paste performance * chore: configure opt-in compiler * refactor(rundown): stabilise frequently accessed data * feat(clone): allow cloning any element * remove paste above and cue increment from test --------- Co-authored-by: arc-alex <ac@omnivox.dk>	2025-11-28 16:20:52 +01:00
arc-alex	a78586d2fa	allow count up to show negative value	2025-11-28 15:03:28 +01:00
arc-alex	8e93b0af25	fix: countToEnd should not override display options	2025-11-28 15:03:28 +01:00
Carlos Valente	9a5d50d933	fix(wakelock): check for feature support	2025-11-28 11:26:23 +01:00
Carlos Valente	1189a94bff	refactor(wakelock): simplify logic into hook	2025-11-28 11:26:23 +01:00
Alex Christoffer Rasmussen	f128f7acd2	fix: api change custom fields (#1888 ) * fix: validate nested custom path * chore: add test	2025-11-27 09:15:02 +01:00
Carlos Valente	80ec2d1186	refactor(pip): match timer formatting defaults	2025-11-26 20:10:01 +01:00
Carlos Valente	18e6f0d7c4	refactor(timer): allow multiline secondary text	2025-11-26 20:10:01 +01:00
Alex Christoffer Rasmussen	48f2511764	fix: custom fields not persisted (#1891 )	2025-11-26 17:58:00 +01:00
Carlos Valente	c20ea88021	docs: add link to subreddit	2025-11-20 18:44:23 +01:00
Carlos Valente	ce2b2b9606	bump version to 4.2.0	2025-11-20 18:44:23 +01:00
Alex Christoffer Rasmussen	f223766445	feat: pip for timer preview (#1862 ) --------- Co-authored-by: Shobhit Nagpal <74096450+Shobhit-Nagpal@users.noreply.github.com> Co-authored-by: Carlos Valente <carlosvalente@pm.me>	2025-11-20 18:00:16 +01:00
Carlos Valente	3dfb49e63f	refactor(overview): prevent vertical scrollbar	2025-11-20 17:58:53 +01:00
Carlos Valente	a13d3dad93	refactor(op): style tweaks to tags and subscriptions	2025-11-20 17:58:53 +01:00
Carlos Valente	fa9695873a	refactor(timeline): style tweaks on status tags	2025-11-20 17:58:53 +01:00
Carlos Valente	70ce1d5553	feat(projects): allow sorting project table	2025-11-19 06:52:58 +01:00
Shobhit Nagpal	9974ce24cd	refactor(operator): hide groups where all events have passed (#1878 )	2025-11-18 06:12:02 +01:00
Carlos Valente	93e9c19e0d	refactor(input): consistent placeholder colours	2025-11-16 07:44:49 +01:00
Carlos Valente	1694cca92c	refactor(settings): improve error message on version fetch	2025-11-16 07:44:49 +01:00
Carlos Valente	c1d9276dd5	refactor(timeline): style tweaks to small screens	2025-11-16 07:44:49 +01:00
Carlos Valente	f5753a0f5a	refactor(timeline): default to fixed size timeline	2025-11-16 07:44:49 +01:00
Carlos Valente	843f5a968d	refactor(operator): style tweaks for small screens	2025-11-16 07:44:49 +01:00
Carlos Valente	e09b6bbc16	refactor: close menu in small screen navigation	2025-11-16 07:44:49 +01:00
Carlos Valente	19d6b40bdb	refactor: hide fullscreen button if not feature available	2025-11-16 07:44:49 +01:00
Carlos Valente	1f2706a063	refactor(operator): improvements to editing	2025-11-16 07:44:49 +01:00
Carlos Valente	aaeadd13cf	chore(operator): clarify edit prompt	2025-11-16 07:44:49 +01:00
Carlos Valente	72e3eb11d7	chore: upgrade mantine dependencies	2025-11-16 07:44:49 +01:00
Alex Christoffer Rasmussen	6f55d8a6c9	use data in `<base>` componenet to mark ontime cloud status (#1872 )	2025-11-12 19:28:29 +08:00
Shobhit Nagpal	70846aefbe	refactor: time input labels on hover (#1855 )	2025-11-11 06:42:55 +01:00
Carlos Valente	47ba90f191	refactor: ensure preset names are url safe	2025-11-11 06:41:48 +01:00
Alex Christoffer Rasmussen	cee3c9c070	Fix integration api (#1866 ) * allow change api to set flag and countToEnd * fix: custom fields can be uppercase * check that prop exists and add target duration for group	2025-11-09 14:36:13 +01:00
Carlos Valente	15f3b9625c	refactor: review overview styles	2025-11-09 06:44:24 +01:00
Carlos Valente	d34a1f0fd8	chore: improve documentation on the 12 hour view	2025-11-09 06:44:24 +01:00
Carlos Valente	0e3b3bcf9a	refactor: consistent time formatting for 12h mode	2025-11-09 06:44:24 +01:00
Carlos Valente	50c91f976b	refactor: show welcome modal on connect	2025-11-02 18:58:13 +01:00
Carlos Valente	50599eccd2	refactor: show countdown if less than 10 min from start	2025-11-02 18:53:03 +01:00
Carlos Valente	9f2db10548	fix: prevent rounding error show 60s	2025-11-02 18:53:03 +01:00