refactor: improve groups and time end

fixup! refactor: add to correct section
refactor: simplify object creation
2026-08-02 22:18:08 +00:00 · 2026-06-28 09:08:24 +02:00 · 2026-06-28 08:48:14 +02:00 · 2026-06-28 08:46:11 +02:00 · 2026-06-28 08:45:54 +02:00 · 2026-06-27 16:30:04 +02:00
264 changed files with 3204 additions and 9186 deletions
@@ -1,5 +0,0 @@
-# CodeGraph data files — local to each machine, not for committing.
-# Ignore everything in .codegraph/ except this file itself, so transient
-# files (the database, daemon.pid, sockets, logs) never show up in git.
-*
-!.gitignore
@@ -1,6 +1,6 @@
 {
  "name": "@getontime/cli",
-  "version": "4.11.0",
+  "version": "4.9.0",
  "author": "Carlos Valente",
  "description": "Time keeping for live events",
  "repository": "https://github.com/cpvalente/ontime",
@@ -1,6 +1,6 @@
 {
  "name": "ontime-ui",
-  "version": "4.11.0",
+  "version": "4.9.0",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -6,7 +6,6 @@ import {
  ProjectRundownsList,
  RenumberCues,
  Rundown,
-  RundownImportPayload,
  TransientEventPayload,
 } from 'ontime-types';

@@ -83,15 +82,6 @@ export async function deleteRundown(rundownId: RundownId): Promise<AxiosResponse
  return axios.delete(`${rundownPath}/${rundownId}`);
 }

-/**
- * HTTP request to apply an imported rundown using a merge strategy or into a new rundown
- */
-export async function importRundownWithOptions(
-  payload: RundownImportPayload,
-): Promise<AxiosResponse<ProjectRundownsList>> {
-  return axios.post(`${rundownPath}/import`, payload);
-}
-
 // #endregion operations on project rundowns ======================
 // #region operations on rundown entries ==========================

@@ -1,82 +1,24 @@
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background-color: $gray-1300;
-  border: 1px solid $gray-1100;
-  border-radius: $component-border-radius-md;
-}
-
-.sectionHeader {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.separator {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  color: $gray-500;
-  font-size: $inner-section-text-size;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-
-  &::before,
-  &::after {
-    content: '';
-    flex: 1;
-    border-top: 1px solid $gray-1100;
-  }
-}
-
 .textEntry {
+  grid-area: input;
  display: flex;
  align-items: center;
  gap: 0.5rem;
-  flex: 1;
-  min-width: 0;
  color: $label-gray;
 }

 .inlineEntry {
  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.75rem;
+  grid-template-areas:
+    'label label'
+    'input btn';
+  grid-template-columns: 1fr auto;
+  column-gap: 0.5rem;
 }

 .redirect {
-  margin-left: auto;
+  grid-area: btn;
 }

 .label {
-  color: $gray-200;
-  font-size: $text-body-size;
-  font-weight: 600;
-}
-
-.description {
-  color: $gray-500;
-  font-size: $inner-section-text-size;
-}
-
-.origin {
-  flex: 0 0 auto;
-  color: $gray-500;
-  font-size: $inner-section-text-size;
-  white-space: nowrap;
-}
-
-@media (max-width: $min-tablet) {
-  .inlineEntry {
-    grid-template-columns: 1fr;
-    align-items: stretch;
-  }
-
-  .redirect {
-    align-self: flex-end;
-  }
+  color: $label-gray;
 }
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { IoArrowForward } from 'react-icons/io5';

-import { baseURI } from '../../../externals';
 import { navigatorConstants } from '../../../viewerConfig';
 import useUrlPresets from '../../hooks-query/useUrlPresets';
 import { setClientRemote } from '../../hooks/useSocket';
@@ -9,7 +8,7 @@ import Button from '../buttons/Button';
 import Dialog from '../dialog/Dialog';
 import Info from '../info/Info';
 import Input from '../input/input/Input';
-import ExternalLink from '../link/external-link/ExternalLink';
+import AppLink from '../link/app-link/AppLink';
 import Select from '../select/Select';

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

  const enabledPresets = data.filter((preset) => preset.enabled);
-  const settingsUrl = `${window.location.origin}${baseURI}/?settings=sharing__presets`;

  const viewOptions = [
    ...navigatorConstants.map((view) => ({
@@ -68,46 +66,34 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
      bodyElements={
        <>
          <Info>
-            <Info.Body>
-              Remotely redirect the client to a different URL. Choose a custom path or select a URL Preset.
-            </Info.Body>
-            <Info.Footer>
-              <ExternalLink href={settingsUrl}>Manage URL Presets</ExternalLink>
-            </Info.Footer>
+            Remotely redirect the client to a different URL. <br />
+            Either by entering a custom path or selecting a URL Preset.
+            <br />
+            <br />
+            <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
          </Info>
-          <section className={style.section}>
-            <div className={style.sectionHeader}>
-              <span className={style.label}>Enter custom path</span>
-              <span className={style.description}>Type the path the client should open.</span>
-            </div>
-            <div className={style.inlineEntry}>
-              <label className={style.textEntry}>
-                <span className={style.origin}>{origin}</span>
-                <Input placeholder='eg. /timer' fluid value={path} onChange={(event) => setPath(event.target.value)} />
-              </label>
-              <Button
-                variant='primary'
-                aria-label='Redirect to custom path'
-                disabled={path === currentPath || path === ''}
-                className={style.redirect}
-                onClick={() => handleRedirect(path)}
-              >
-                Redirect
-                <IoArrowForward />
-              </Button>
-            </div>
-          </section>
-          <div className={style.separator} role='separator'>
-            <span>Or</span>
+          <div className={style.inlineEntry}>
+            <span className={style.label}>Enter custom path</span>
+            <label className={style.textEntry}>
+              {origin}
+              <Input placeholder='eg. /timer' fluid value={path} onChange={(event) => setPath(event.target.value)} />
+            </label>
+            <Button
+              variant='primary'
+              aria-label='Redirect'
+              disabled={path === currentPath || path === ''}
+              className={style.redirect}
+              onClick={() => handleRedirect(path)}
+            >
+              Redirect
+              <IoArrowForward />
+            </Button>
          </div>
-          <section className={style.section}>
-            <div className={style.sectionHeader}>
-              <span className={style.label}>Select view or URL Preset</span>
-              <span className={style.description}>Choose from the available destinations.</span>
-            </div>
+          <div>
+            <span className={style.label}>Select View or URL Preset</span>
            <div className={style.inlineEntry}>
              <label className={style.textEntry}>
-                <span className={style.origin}>{origin}</span>
+                {origin}
                <Select
                  fluid
                  options={viewOptions}
@@ -129,7 +115,7 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
                Redirect <IoArrowForward />
              </Button>
            </div>
-          </section>
+          </div>
        </>
      }
    />
@@ -1,13 +0,0 @@
-@use '../../../theme/ontimeStyles' as *;
-
-.form {
-  padding: 0.25rem 0.5rem 0.5rem;
-}
-
-.label {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  color: $label-gray;
-  font-size: $inner-section-text-size;
-}
@@ -5,8 +5,6 @@ import { setClientRemote } from '../../hooks/useSocket';
 import Dialog from '../dialog/Dialog';
 import Input from '../input/input/Input';

-import style from './RenameClientModal.module.scss';
-
 interface RenameClientModalProps {
  id: string;
  name?: string;
@@ -33,22 +31,9 @@ export function RenameClientModal({ id, name: currentName = '', isOpen, onClose
      isOpen={isOpen}
      title={`Rename Client: ${currentName}`}
      showCloseButton
-      showBackdrop
      onClose={onClose}
      bodyElements={
-        <div className={style.form}>
-          <label className={style.label}>
-            Client name
-            <Input
-              height='large'
-              fluid
-              autoComplete='off'
-              placeholder='New name'
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-            />
-          </label>
-        </div>
+        <Input height='large' placeholder='New name' value={name} onChange={(event) => setName(event.target.value)} />
      }
      footerElements={
        <>
@@ -1,16 +1,12 @@
 .dialog {
  position: fixed;
-  top: 10vh;
+  top: 10%;
  left: 50%;

  transform: translateX(-50%);

-  box-sizing: border-box;
-  width: min(600px, 90vw);
-  max-height: calc(90vh - 1rem);
-  display: flex;
-  flex-direction: column;
  padding-inline: 1rem;
+  min-width: min(600px, 90vw);

  background-color: $gray-1250;
  color: $ui-white;
@@ -47,8 +43,7 @@
  flex-direction: column;
  gap: 0.5rem;

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

@@ -58,5 +53,4 @@
  align-items: center;
  justify-content: end;
  gap: 1rem;
-  flex-wrap: wrap;
 }
@@ -1,14 +0,0 @@
-.kbd {
-  display: inline-block;
-  min-width: 1.5rem;
-  padding: 0.0625rem 0.375rem;
-  border-radius: 2px;
-  background-color: $gray-1100;
-  color: $ui-white;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
-  font-family: monospace;
-  font-size: calc(1rem - 4px);
-  line-height: 1.5;
-  text-align: center;
-  white-space: nowrap;
-}
@@ -1,7 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import style from './Kbd.module.scss';
-
-export default function Kbd({ children }: PropsWithChildren) {
-  return <kbd className={style.kbd}>{children}</kbd>;
-}
@@ -21,15 +21,4 @@
    outline: none;
    box-shadow: 0 1px 0 0 currentColor;
  }
-
-  &:hover .icon,
-  &:focus-visible .icon {
-    transform: translateX(0.25rem);
-  }
-}
-
-.icon {
-  flex: 0 0 1.5em;
-  font-size: 1em;
-  transition: transform $transition-time-action;
 }
@@ -1,5 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
-import { HiArrowLongRight } from 'react-icons/hi2';
+import { IoOpenOutline } from 'react-icons/io5';

 import { openLink } from '../../../utils/linkUtils';
 import { cx } from '../../../utils/styleUtils';
@@ -10,10 +10,9 @@ interface ExternalLinkProps {
  href: string;
  children: ReactNode;
  inline?: boolean;
-  className?: string;
 }

-export default function ExternalLink({ href, inline, className, children }: ExternalLinkProps) {
+export default function ExternalLink({ href, inline, children }: ExternalLinkProps) {
  const handleClick = (event: MouseEvent) => {
    event.preventDefault();
    openLink(href);
@@ -24,11 +23,10 @@ export default function ExternalLink({ href, inline, className, children }: Exte
      href='#!'
      target='_blank'
      rel='noreferrer'
-      className={cx([style.link, inline && style.inline, className])}
+      className={cx([style.link, inline && style.inline])}
      onClick={handleClick}
    >
-      {children}
-      <HiArrowLongRight className={style.icon} />
+      {children} <IoOpenOutline style={{ fontSize: '1em' }} />
    </a>
  );
 }
@@ -4,13 +4,10 @@
  left: 50%;
  transform: translateX(-50%);

-  box-sizing: border-box;
-  width: min(880px, 90vw);
+  padding-inline: 1rem;
+  min-width: min(880px, 90vw);
  min-height: min(200px, 10vh);
-  max-height: calc(90vh - 1rem);
-
-  display: flex;
-  flex-direction: column;
+  max-width: min(1200px, 90vw);

  background-color: $gray-1250;
  color: $ui-white;
@@ -20,21 +17,14 @@
  outline: none;
 }

-.compact {
-  min-width: 0;
-  width: min(680px, 90vw);
-}
-
-.small {
-  min-width: 0;
-  width: min(480px, 90vw);
-}
-
 .wide {
  top: 4vh;
-  width: min(1800px, 98vw);
-  height: min(88vh, calc(96vh - 1rem));
-  min-height: 0;
+  min-width: min(1280px, 96vw);
+  max-width: min(1600px, 96vw);
+  height: 88vh;
+  max-height: 88vh;
+  display: flex;
+  flex-direction: column;
 }

 .backdrop {
@@ -51,19 +41,15 @@

 .title {
  padding-block: 1rem;
-  padding-inline: 1rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
-  gap: 1rem;
 }

 .titleText {
-  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
-  overflow-wrap: anywhere;
 }

 .body {
@@ -71,23 +57,21 @@
  flex-direction: column;
  gap: 0.5rem;

-  flex: 1;
-  min-height: 0;
-  padding: 0.5rem 1rem;
+  max-height: 60vh;
  overflow-y: auto;
-  scroll-padding-block: 0.5rem;
 }

 .wide .body {
+  flex: 1;
+  min-height: 0;
+  max-height: none;
  overflow: hidden;
 }

 .footer {
  padding-block: 1rem;
-  padding-inline: 1rem;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1rem;
-  flex-wrap: wrap;
 }
@@ -12,7 +12,7 @@ interface ModalProps {
  title?: string;
  showCloseButton?: boolean;
  showBackdrop?: boolean;
-  size?: 'small' | 'compact' | 'default' | 'wide';
+  size?: 'default' | 'wide';
  bodyElements: ReactNode;
  footerElements?: ReactNode;
  onClose: () => void;
@@ -38,7 +38,7 @@ export default function Modal({
    >
      <BaseDialog.Portal>
        {showBackdrop && <BaseDialog.Backdrop className={style.backdrop} />}
-        <BaseDialog.Popup aria-label={title} className={cx([style.modal, style[size]])}>
+        <BaseDialog.Popup aria-label={title} className={cx([style.modal, size === 'wide' && style.wide])}>
          <div className={style.title}>
            {title ? <BaseDialog.Title className={style.titleText}>{title}</BaseDialog.Title> : <div />}
            {showCloseButton && (
@@ -38,6 +38,8 @@ $progress-bar-br: 3px;
 .multiprogress-bar__indicator-bar {
  background-color: var(--background-color-override, $ui-black);
  opacity: 0.8;
+  transition: 1s linear;
+  transition-property: width;

  .multiprogress-bar--ignore-css-override & {
    background-color: $ui-black;
@@ -1,6 +1,5 @@
 import { MaybeNumber } from 'ontime-types';

-import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
 import { getProgress } from '../../utils/getProgress';
 import { cx } from '../../utils/styleUtils';

@@ -35,7 +34,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
    className = '',
  } = props;

-  const percentRemaining = 100 - useAnimatedProgress(now, complete);
+  const percentRemaining = 100 - getProgress(now, complete);
  const dangerWidth = danger ? 100 - getProgress(danger, complete) : 0;
  const warningWidth = warning ? 100 - dangerWidth - getProgress(warning, complete) : 0;
  const isOvertime = now !== null && now < 0;
@@ -8,7 +8,6 @@ import { useLocation } from 'react-router';
 import { isLocalhost, supportsFullscreen } from '../../../externals';
 import { canUseWakeLock, useKeepAwakeOptions } from '../../../features/keep-awake/useWakeLock';
 import { navigatorConstants } from '../../../viewerConfig';
-import useUrlPresets from '../../hooks-query/useUrlPresets';
 import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
@@ -106,8 +105,6 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
                {route.label}
              </ClientLink>
            ))}
-
-            <PresetNavigation isSmallScreen={isSmallScreen} onClose={onClose} />
          </div>

          {isLocalhost && (
@@ -120,27 +117,3 @@ function NavigationMenu({ isOpen, onClose }: NavigationMenuProps) {
    </Dialog.Root>
  );
 }
-
-function PresetNavigation({ isSmallScreen, onClose }: { isSmallScreen: boolean; onClose: () => void }) {
-  const location = useLocation();
-  const { data: urlPresets } = useUrlPresets();
-  const navPresets = urlPresets.filter((preset) => preset.enabled && preset.displayInNav);
-
-  if (navPresets.length === 0) return null;
-
-  return (
-    <>
-      <hr className={style.separator} />
-      {navPresets.map((preset) => (
-        <ClientLink
-          key={preset.alias}
-          to={`preset/${preset.alias}`}
-          current={location.pathname === `/preset/${preset.alias}`}
-          postAction={isSmallScreen ? onClose : undefined}
-        >
-          {preset.alias}
-        </ClientLink>
-      ))}
-    </>
-  );
-}
@@ -1,8 +1,6 @@
 import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import { memo } from 'react';
-import { useSearchParams } from 'react-router';

-import { hasCustomParams } from '../../stores/savedViewParams';
 import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
 import FloatingNavigation from './floating-navigation/FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
@@ -19,8 +17,6 @@ export default memo(ViewNavigationMenu);
 function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
  const [isMenuOpen, menuHandler] = useDisclosure();
  const { open: showEditFormDrawer } = useViewParamsEditorStore();
-  const [searchParams] = useSearchParams();
-  const hasSavedChanges = hasCustomParams(searchParams);

  useHotkeys([
    [
@@ -50,7 +46,6 @@ function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNaviga
      <FloatingNavigation
        toggleMenu={isNavigationLocked ? undefined : menuHandler.toggle}
        toggleSettings={suppressSettings ? undefined : showEditFormDrawer}
-        hasSavedChanges={hasSavedChanges}
      />
      {!isNavigationLocked && <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />}
    </>
@@ -1,29 +1,4 @@
-.trailing {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-left: auto;
-}
-
 .linkIcon {
+  margin-left: auto;
  @include rotate-fourty-five;
 }
-
-.indicator {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background-color: $active-indicator;
-  pointer-events: none;
-  flex-shrink: 0;
-}
-
-.clear {
-  opacity: 0.6;
-  transition: opacity $transition-time-action;
-
-  &:hover,
-  &:focus-visible {
-    opacity: 1;
-  }
-}
@@ -1,17 +1,9 @@
-import { MouseEvent, PropsWithChildren } from 'react';
-import { IoArrowUp, IoCloseOutline } from 'react-icons/io5';
-import { useLocation, useNavigate, useSearchParams } from 'react-router';
+import { PropsWithChildren } from 'react';
+import { IoArrowUp } from 'react-icons/io5';
+import { useNavigate } from 'react-router';

 import { useElectronEvent } from '../../../hooks/useElectronEvent';
-import {
-  hasCustomParams,
-  reservedParams,
-  stripReservedParams,
-  useSavedViewParams,
-} from '../../../stores/savedViewParams';
 import { handleLinks } from '../../../utils/linkUtils';
-import IconButton from '../../buttons/IconButton';
-import Tooltip from '../../tooltip/Tooltip';
 import NavigationMenuItem from '../navigation-menu-item/NavigationMenuItem';

 import style from './ClientLink.module.scss';
@@ -24,104 +16,32 @@ interface ClientLinkProps {

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

  if (isElectron) {
    return (
-      <ElectronNavigationItem current={current} to={to} postAction={postAction}>
+      <NavigationMenuItem
+        active={current}
+        onClick={() => {
+          handleLinks(to);
+          postAction?.();
+        }}
+      >
        {children}
-      </ElectronNavigationItem>
+        <IoArrowUp className={style.linkIcon} />
+      </NavigationMenuItem>
    );
  }

  return (
-    <BrowserNavigationItem current={current} to={to} postAction={postAction}>
+    <NavigationMenuItem
+      active={current}
+      onClick={() => {
+        navigate(`/${to}`);
+        postAction?.();
+      }}
+    >
      {children}
-    </BrowserNavigationItem>
-  );
-}
-
-function ElectronNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
-  const navigateToLink = () => {
-    handleLinks(to);
-    postAction?.();
-  };
-
-  return (
-    <NavigationMenuItem active={current} onClick={navigateToLink}>
-      {children}
-      <span className={style.trailing}>
-        <IoArrowUp className={style.linkIcon} />
-      </span>
-    </NavigationMenuItem>
-  );
-}
-
-function BrowserNavigationItem({ current, to, postAction, children }: PropsWithChildren<ClientLinkProps>) {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { params: savedParams, save, clear } = useSavedViewParams();
-
-  /**
-   * Save the params of the view we are leaving and resolve the destination,
-   * restoring any params previously saved for the target view.
-   */
-  const resolveDestination = () => {
-    const currentView = location.pathname.replace(/^\//, '');
-    save(currentView, stripReservedParams(location.search));
-    const restored = savedParams[to];
-    return `${to}${restored ? `?${restored}` : ''}`;
-  };
-
-  const isCustomised = current ? hasCustomParams(searchParams) : Boolean(savedParams[to]);
-
-  const navigateToLink = () => {
-    const destination = resolveDestination();
-    navigate(`/${destination}`);
-    postAction?.();
-  };
-
-  /**
-   * Clear the saved settings for this route without navigating to it.
-   * When it is the current view, also reset the live URL to its defaults.
-   */
-  const clearViewSettings = (event: MouseEvent) => {
-    event.stopPropagation();
-    clear(to);
-
-    // if mounted, clear the URL params
-    if (current) {
-      const preserved = new URLSearchParams();
-      reservedParams.forEach((key) => {
-        const value = searchParams.get(key);
-        if (value !== null) preserved.set(key, value);
-      });
-      setSearchParams(preserved);
-    }
-  };
-
-  return (
-    <NavigationMenuItem active={current} onClick={navigateToLink}>
-      {children}
-      {isCustomised && (
-        <span className={style.trailing}>
-          <span className={style.indicator} aria-hidden data-testid='client-link__saved-indicator' />
-          <Tooltip
-            text='Reset to default'
-            render={
-              <IconButton
-                variant='ghosted-white'
-                size='small'
-                className={style.clear}
-                aria-label='Reset to default'
-                onClick={clearViewSettings}
-              />
-            }
-          >
-            <IoCloseOutline />
-          </Tooltip>
-        </span>
-      )}
    </NavigationMenuItem>
  );
 }
@@ -22,19 +22,3 @@
  top: 0;
  z-index: $zindex-nav;
 }
-
-.buttonWithIndicator {
-  position: relative;
-  display: inline-flex;
-}
-
-.indicator {
-  position: absolute;
-  top: -0.15rem;
-  right: -0.15rem;
-  width: 0.6rem;
-  height: 0.6rem;
-  border-radius: 50%;
-  background-color: $active-indicator;
-  pointer-events: none;
-}
@@ -9,10 +9,9 @@ import style from './FloatingNavigation.module.scss';
 interface FloatingNavigationProps {
  toggleMenu?: () => void;
  toggleSettings?: () => void;
-  hasSavedChanges?: boolean;
 }

-export default function FloatingNavigation({ toggleMenu, toggleSettings, hasSavedChanges }: FloatingNavigationProps) {
+export default function FloatingNavigation({ toggleMenu, toggleSettings }: FloatingNavigationProps) {
  const isButtonShown = useFadeOutOnInactivity(true);

  return (
@@ -21,18 +20,15 @@ export default function FloatingNavigation({ toggleMenu, toggleSettings, hasSave
      className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}
    >
      {toggleMenu && (
-        <div className={style.buttonWithIndicator}>
-          <IconButton
-            variant='subtle-white'
-            size='xlarge'
-            onClick={toggleMenu}
-            aria-label='toggle menu'
-            data-testid='navigation__toggle-menu'
-          >
-            <IoApps />
-          </IconButton>
-          {hasSavedChanges && <span className={style.indicator} data-testid='navigation__saved-indicator' />}
-        </div>
+        <IconButton
+          variant='subtle-white'
+          size='xlarge'
+          onClick={toggleMenu}
+          aria-label='toggle menu'
+          data-testid='navigation__toggle-menu'
+        >
+          <IoApps />
+        </IconButton>
      )}
      {toggleSettings && (
        <IconButton
@@ -14,4 +14,6 @@ $progress-bar-br: 3px;
 .progress-bar__indicator {
  height: $progress-bar-size;
  background-color: var(--timer-progress-override, $accent-color);
+  transition: 1s linear;
+  transition-property: width;
 }
@@ -1,6 +1,6 @@
 import { MaybeNumber } from 'ontime-types';

-import { useAnimatedProgress } from '../../hooks/useAnimatedProgress';
+import { getProgress } from '../../utils/getProgress';

 import './ProgressBar.scss';

@@ -12,7 +12,7 @@ interface ProgressBarProps {

 export default function ProgressBar(props: ProgressBarProps) {
  const { current, duration, className } = props;
-  const progress = useAnimatedProgress(current, duration);
+  const progress = getProgress(current, duration);

  return (
    <div className={`progress-bar__bg ${className}`}>
@@ -1,43 +1,18 @@
-@use '@/theme/viewerDefs' as *;
-
 .emptyContainer {
  width: 100%;
  text-align: center;
-  color: var(--secondary-color-override, $viewer-secondary-color);
+  color: $white-10;

  .empty {
-    display: block;
-    width: min(100%, 14rem);
-    margin: 0 auto -1.5rem;
-    opacity: 0.6;
+    width: 100%;
+    opacity: 0.8;
  }

  .text {
    display: block;
    margin-inline: auto;
-    font-weight: 400;
-    font-size: clamp(1rem, 1.55vw, 1.5rem);
-    line-height: 1.35;
-    max-width: min(100%, 40rem);
-  }
-
-  &.error {
-    color: $error-red;
-
-    .empty {
-      opacity: 0.35;
-      filter: grayscale(1);
-    }
-
-    .text {
-      margin-top: 0.5rem;
-    }
-  }
-
-  .errorIcon {
-    display: block;
-    width: 1.5rem;
-    height: 1.5rem;
-    margin: -0.125rem auto 0;
+    font-weight: 600;
+    font-size: 2em;
+    max-width: 600px;
  }
 }
@@ -1,5 +1,4 @@
 import { CSSProperties } from 'react';
-import { IoWarningOutline } from 'react-icons/io5';

 import EmptyImage from '../../../assets/images/empty.svg?react';
 import { cx } from '../../utils/styleUtils';
@@ -10,18 +9,12 @@ interface EmptyProps {
  text?: string;
  injectedStyles?: CSSProperties;
  className?: string;
-  variant?: 'error';
 }

-export default function Empty({ text, className, injectedStyles, variant }: EmptyProps) {
+export default function Empty({ text, className, injectedStyles }: EmptyProps) {
  return (
-    <div
-      className={cx([style.emptyContainer, variant === 'error' && style.error, className])}
-      style={injectedStyles}
-      role={variant === 'error' ? 'alert' : undefined}
-    >
+    <div className={cx([style.emptyContainer, className])} style={injectedStyles}>
      <EmptyImage className={style.empty} />
-      {variant === 'error' && <IoWarningOutline className={style.errorIcon} aria-hidden />}
      {text && <span className={style.text}>{text}</span>}
    </div>
  );
@@ -1,11 +0,0 @@
-.fill {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  flex: 1;
-
-  display: grid;
-  place-items: start center;
-  padding: clamp(4rem, 20dvh, 12rem) 1.5rem 1rem;
-}
@@ -1,19 +0,0 @@
-import { cx } from '../../utils/styleUtils';
-import Empty from './Empty';
-
-import style from './EmptyFill.module.scss';
-
-interface EmptyFillProps {
-  text?: string;
-  /** placed on the fill wrapper — e.g. to assign a grid-area in a grid parent */
-  className?: string;
-}
-
-/** Container-filling empty/loading state for panels and grid/flex cells. */
-export default function EmptyFill({ text, className }: EmptyFillProps) {
-  return (
-    <div className={cx([style.fill, className])}>
-      <Empty text={text} />
-    </div>
-  );
-}
@@ -6,7 +6,7 @@
  box-sizing: border-box; /* reset */
  overflow: hidden;
  width: 100%; /* restrict the page width to viewport */
-  height: 100dvh;
+  height: 100vh;

  font-family: var(--font-family-override, $viewer-font-family);
  background: var(--background-color-override, $viewer-background-color);
@@ -16,6 +16,5 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  justify-content: center;
-  padding-block: 5rem;
+  padding-top: 5rem;
 }
@@ -7,13 +7,12 @@ import style from './EmptyPage.module.scss';
 interface EmptyPageProps {
  text?: string;
  injectedStyles?: CSSProperties;
-  variant?: 'error';
 }

-export default function EmptyPage({ text, injectedStyles, variant }: EmptyPageProps) {
+export default function EmptyPage({ text, injectedStyles }: EmptyPageProps) {
  return (
    <div className={style.page}>
-      <Empty text={text} injectedStyles={injectedStyles} variant={variant} />
+      <Empty text={text} injectedStyles={injectedStyles} />
    </div>
  );
 }
@@ -15,4 +15,9 @@
    gap: 1rem;
    margin-top: 1em;
  }
+
+  .text {
+    font-weight: 600;
+    font-size: 2em;
+  }
 }
@@ -18,7 +18,8 @@ export default function EmptyTableBody({ handleAddNew }: EmptyTableBodyProps) {
    <tbody className={style.emptyContainer}>
      <tr>
        <td colSpan={99} className={style.emptyCell}>
-          <Empty text={text} injectedStyles={{ marginTop: '5vh' }} />
+          <Empty injectedStyles={{ marginTop: '5vh' }} />
+          <span className={style.text}>{text}</span>
          {handleAddNew && (
            <div className={style.inline}>
              <Button onClick={() => handleAddNew(SupportedEntry.Event)} variant='primary' size='large'>
@@ -11,11 +11,6 @@
  color: $ui-white;
 }

-.active {
-  border: 1px solid $green-700;
-  color: $green-400;
-}
-
 .warning {
  background-color: $orange-1300;
  color: $orange-300;
@@ -6,7 +6,7 @@ import style from './Tag.module.scss';

 interface TagProps {
  className?: string;
-  variant?: 'default' | 'active' | 'warning';
+  variant?: 'default' | 'warning';
 }

 export default function Tag({ className, variant = 'default', children }: PropsWithChildren<TagProps>) {
@@ -6,7 +6,6 @@ import { useSearchParams } from 'react-router';

 import useViewSettings from '../../hooks-query/useViewSettings';
 import { useIsSmallScreen } from '../../hooks/useIsSmallScreen';
-import { useSavedViewParams } from '../../stores/savedViewParams';
 import Button from '../buttons/Button';
 import IconButton from '../buttons/IconButton';
 import Info from '../info/Info';
@@ -28,7 +27,6 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
  const [searchParams, setSearchParams] = useSearchParams();
  const { data: viewSettings } = useViewSettings();
  const { isOpen, close } = useViewParamsEditorStore();
-  const clearSavedParams = useSavedViewParams((store) => store.clear);
  const isSmallScreen = useIsSmallScreen();

  const getPreservedParams = () => getPreservedSearchParams(searchParams, viewOptions);
@@ -38,7 +36,6 @@ function ViewParamsEditor({ target, viewOptions }: EditFormDrawerProps) {
  };

  const resetParams = () => {
-    clearSavedParams(target);
    setSearchParams(getPreservedParams());
  };

@@ -1,41 +0,0 @@
-import { MaybeNumber, Playback } from 'ontime-types';
-import { useEffect, useRef, useState } from 'react';
-
-import { getProgress } from '../utils/getProgress';
-import { usePlayback } from './useSocket';
-
-/**
- * Returns the live completion percentage (0–100) of a countdown, interpolated locally.
- */
-export function useAnimatedProgress(current: MaybeNumber, duration: MaybeNumber): number {
-  const playback = usePlayback();
-  const isRunning = playback === Playback.Play || playback === Playback.Roll;
-
-  const baseline = useRef({ current, at: performance.now() });
-  const [, setTick] = useState(0);
-
-  // there is only something to animate while a running timer is counting down towards 0
-  const shouldAnimate = isRunning && current !== null && current > 0 && duration !== null;
-
-  // re-anchor to the authoritative value whenever the server pushes a new timer update
-  useEffect(() => {
-    baseline.current = { current, at: performance.now() };
-  }, [current, duration, playback]);
-
-  // while counting down, re-render every animation frame so the derived progress stays smooth
-  useEffect(() => {
-    if (!shouldAnimate) {
-      return;
-    }
-    let frame = requestAnimationFrame(function tick() {
-      setTick((value) => value + 1);
-      frame = requestAnimationFrame(tick);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [shouldAnimate]);
-
-  // derive from the anchor plus elapsed time at render; frozen to the anchor when not running
-  const anchored = baseline.current.current;
-  const value = isRunning && anchored !== null ? anchored - (performance.now() - baseline.current.at) : anchored;
-  return getProgress(value, duration);
-}
@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
  EntryId,
+  InsertOptions,
  MaybeString,
  OntimeDelay,
  OntimeEntry,
@@ -59,15 +60,9 @@ export type EventOptions = Partial<{
  before: MaybeString;
  // options of entries of type OntimeEvent
  linkPrevious: boolean;
-  /** the timing reference for the new entry, usually the same as after */
  lastEventId: MaybeString;
 }>;

-type ClientInsertOptions = {
-  after?: EntryId;
-  before?: EntryId;
-};
-
 /**
 * Gather utilities for actions on entries in the loaded rundown.
 */
@@ -125,7 +120,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
   * @private
   */
  const { mutateAsync: addEntryMutation } = useMutation({
-    mutationFn: ([rundownId, entry]: [string, PatchWithId & ClientInsertOptions]) => postAddEntry(rundownId, entry),
+    mutationFn: ([rundownId, entry]: [string, PatchWithId & InsertOptions]) => postAddEntry(rundownId, entry),
    onMutate: async ([_rundownId, entry]) => {
      const queryKey = resolveCurrentRundownQueryKey();
      await queryClient.cancelQueries({ queryKey });
@@ -154,9 +149,8 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
        addToRundown(
          newRundown,
          optimisticEntry,
-          parent ? (newRundown.entries[parent.id] as OntimeGroup) : null,
          afterId,
-          entry.before ?? null,
+          parent ? (newRundown.entries[parent.id] as OntimeGroup) : null,
        );

        queryClient.setQueryData<Rundown>(queryKey, newRundown);
@@ -199,7 +193,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
        throw new Error('Rundown not initialised');
      }

-      const newEntry: PatchWithId & ClientInsertOptions = { ...entry, id: generateId() };
+      const newEntry: PatchWithId & InsertOptions = { ...entry, id: generateId() };

      // handle adding options that concern all event types
      if (options?.after) {
@@ -211,8 +205,8 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {

      // ************* CHECK OPTIONS specific to events
      if (isOntimeEvent(newEntry)) {
-        // last event id is the timing reference of the previous OntimeEvent in rundown
        if (options?.lastEventId) {
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know this is a value
          const previousEvent = rundownData.entries[options?.lastEventId];
          if (isOntimeEvent(previousEvent)) {
            newEntry.timeStart = previousEvent.timeEnd;
@@ -290,7 +284,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
   * Clone an entry
   */
  const clone = useCallback(
-    async (entryId: EntryId, options?: ClientInsertOptions) => {
+    async (entryId: EntryId, options?: InsertOptions) => {
      try {
        const rundownId = getCurrentRundownData()?.id;
        if (!rundownId) {
@@ -1063,7 +1057,7 @@ function optimisticDeleteEntries(entryIds: EntryId[], rundown: Rundown) {
 /**
 * Utility to create an optimistic entry for immediate cache insertion
 */
-function createOptimisticEntry(payload: PatchWithId & ClientInsertOptions): OntimeEntry {
+function createOptimisticEntry(payload: PatchWithId & InsertOptions): OntimeEntry {
  const { after: _after, before: _before, ...entryData } = payload;
  const id = entryData.id;
  let parent: EntryId | null = null;
@@ -139,17 +139,6 @@ export const setEventPlayback = {
  pause: () => sendSocket('pause', undefined),
 };

-export const useTimerProgress = createSelector((state: RuntimeStore) => ({
-  playback: state.timer.playback,
-  phase: state.timer.phase,
-  addedTime: state.timer.addedTime,
-  secondaryTimer: state.timer.secondaryTimer,
-  current: state.timer.current,
-  expectedFinish: state.timer.expectedFinish,
-  startedAt: state.timer.startedAt,
-  isCountToEnd: state.eventNow?.countToEnd ?? false,
-}));
-
 export const useTimer = createSelector((state: RuntimeStore) => ({
  ...state.timer,
 }));
@@ -1,87 +0,0 @@
-import { hasCustomParams, stripReservedParams, useSavedViewParams } from '../savedViewParams';
-
-describe('savedViewParams store', () => {
-  beforeEach(() => {
-    useSavedViewParams.getState().clearAll();
-  });
-
-  it('saves and restores params per view', () => {
-    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
-    useSavedViewParams.getState().save('backstage', 'showProgress=false');
-
-    expect(useSavedViewParams.getState().params.timer).toBe('hideSeconds=true');
-    expect(useSavedViewParams.getState().params.backstage).toBe('showProgress=false');
-  });
-
-  it('overwrites the saved params for a view on subsequent saves', () => {
-    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
-    useSavedViewParams.getState().save('timer', 'hideSeconds=false');
-
-    expect(useSavedViewParams.getState().params.timer).toBe('hideSeconds=false');
-  });
-
-  it('does not store an entry for an empty search string', () => {
-    useSavedViewParams.getState().save('timer', '');
-
-    expect(useSavedViewParams.getState().params).toEqual({});
-  });
-
-  it('removes a previously saved entry when saved with an empty search string', () => {
-    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
-    useSavedViewParams.getState().save('timer', '');
-
-    expect(useSavedViewParams.getState().params).toEqual({});
-  });
-
-  it('ignores empty view keys', () => {
-    useSavedViewParams.getState().save('', 'hideSeconds=true');
-
-    expect(useSavedViewParams.getState().params).toEqual({});
-  });
-
-  it('clears the saved params for a single view without touching others', () => {
-    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
-    useSavedViewParams.getState().save('backstage', 'showProgress=false');
-    useSavedViewParams.getState().clear('timer');
-
-    expect(useSavedViewParams.getState().params).toEqual({ backstage: 'showProgress=false' });
-  });
-
-  it('is a no-op when clearing a view without saved params', () => {
-    useSavedViewParams.getState().save('backstage', 'showProgress=false');
-    useSavedViewParams.getState().clear('timer');
-
-    expect(useSavedViewParams.getState().params).toEqual({ backstage: 'showProgress=false' });
-  });
-
-  it('clears all saved params', () => {
-    useSavedViewParams.getState().save('timer', 'hideSeconds=true');
-    useSavedViewParams.getState().clearAll();
-
-    expect(useSavedViewParams.getState().params).toEqual({});
-  });
-});
-
-describe('stripReservedParams', () => {
-  it('removes reserved auth/preset params while keeping view customisation', () => {
-    expect(stripReservedParams('hideSeconds=true&token=abc&n=1&alias=my')).toBe('hideSeconds=true');
-  });
-
-  it('returns an empty string when only reserved params are present', () => {
-    expect(stripReservedParams('token=abc&n=1&alias=my')).toBe('');
-  });
-});
-
-describe('hasCustomParams', () => {
-  it('is true when a non-reserved param is present', () => {
-    expect(hasCustomParams(new URLSearchParams('hideSeconds=true&token=abc'))).toBe(true);
-  });
-
-  it('is false when only reserved params are present', () => {
-    expect(hasCustomParams(new URLSearchParams('token=abc&n=1&alias=my'))).toBe(false);
-  });
-
-  it('is false when there are no params', () => {
-    expect(hasCustomParams(new URLSearchParams(''))).toBe(false);
-  });
-});
@@ -1,62 +0,0 @@
-import { create } from 'zustand';
-
-// params that are auth/preset markers, not user view customisation (see common/utils/urlPresets.ts)
-export const reservedParams = new Set(['token', 'n', 'alias']);
-
-interface SavedViewParamsStore {
-  params: Record<string, string>; // view key (e.g. "timer") -> search string without leading "?"
-  save: (view: string, search: string) => void;
-  clear: (view: string) => void;
-  clearAll: () => void;
-}
-
-/**
- * Remembers the last view parameters used for each view so they can be
- * restored when the user navigates back to that view through the menu.
- * In-memory only: persists across SPA navigation, resets on a full page reload.
- */
-export const useSavedViewParams = create<SavedViewParamsStore>((set) => ({
-  params: {},
-  save: (view, search) =>
-    set((state) => {
-      // ignore empty view keys and do not store empty entries, so the
-      // "saved changes" indicator only reflects genuine customisation
-      if (!view) return state;
-      const params = { ...state.params };
-      if (search) {
-        params[view] = search;
-      } else {
-        delete params[view];
-      }
-      return { params };
-    }),
-  clear: (view) =>
-    set((state) => {
-      if (!state.params[view]) return state;
-      const params = { ...state.params };
-      delete params[view];
-      return { params };
-    }),
-  clearAll: () => set({ params: {} }),
-}));
-
-/**
- * Removes reserved (auth/preset) params from a search string, keeping only
- * genuine view customisation.
- */
-export function stripReservedParams(search: string): string {
-  const sp = new URLSearchParams(search);
-  reservedParams.forEach((key) => sp.delete(key));
-  return sp.toString();
-}
-
-/**
- * Whether the search params contain any genuine view customisation,
- * ignoring reserved params.
- */
-export function hasCustomParams(searchParams: URLSearchParams): boolean {
-  for (const key of searchParams.keys()) {
-    if (!reservedParams.has(key)) return true;
-  }
-  return false;
-}
@@ -1,4 +1,4 @@
-import { hostToBaseUrl, linkToOtherHost } from '../linkUtils';
+import { linkToOtherHost } from '../linkUtils';

 describe('linkToOTherHost', () => {
  it('should handle electron links', () => {
@@ -22,18 +22,3 @@ describe('linkToOTherHost', () => {
    expect(destination).toBe('https://app.getontime.no/user-hash/path');
  });
 });
-
-describe('hostToBaseUrl', () => {
-  it('uses http when the page is plain http', () => {
-    expect(hostToBaseUrl('192.168.10.166', 4001, 'http://localhost:4001')).toBe('http://192.168.10.166:4001');
-  });
-
-  it('keeps https when the page reaches the server over TLS on the same port', () => {
-    expect(hostToBaseUrl('192.168.10.166', 4001, 'https://localhost:4001')).toBe('https://192.168.10.166:4001');
-  });
-
-  it('falls back to http when the page is https on a different port (TLS proxy)', () => {
-    // the raw server port does not speak TLS, an https link to it would fail
-    expect(hostToBaseUrl('192.168.10.166', 4001, 'https://ontime.example.com')).toBe('http://192.168.10.166:4001');
-  });
-});
@@ -1,25 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { removeFileExtension } from '../uploadUtils';
-
-describe('removeFileExtension()', () => {
-  it('removes a trailing extension', () => {
-    expect(removeFileExtension('show.xlsx')).toBe('show');
-  });
-
-  it('only removes the last extension', () => {
-    expect(removeFileExtension('my.show.xlsx')).toBe('my.show');
-  });
-
-  it('returns the name unchanged when there is no extension', () => {
-    expect(removeFileExtension('rundown')).toBe('rundown');
-  });
-
-  it('does not treat a leading dot as an extension', () => {
-    expect(removeFileExtension('.gitignore')).toBe('.gitignore');
-  });
-
-  it('handles an empty string', () => {
-    expect(removeFileExtension('')).toBe('');
-  });
-});
@@ -37,7 +37,6 @@ describe('getRouteFromPreset()', () => {
      alias: 'demopage',
      target: OntimeView.Timer,
      search: 'user=guest',
-      displayInNav: false,
      options: {},
    },
  ];
@@ -120,7 +119,6 @@ describe('getRouteFromPreset()', () => {
        alias: 'cuesheet-4685d6',
        target: OntimeView.Cuesheet,
        search: '',
-        displayInNav: false,
        options: {
          read: 'full',
          write: '-',
@@ -133,7 +131,6 @@ describe('getRouteFromPreset()', () => {
        alias: 'cuesheet-basic',
        target: OntimeView.Cuesheet,
        search: '',
-        displayInNav: false,
      },
    ];
    const cuesheetPresetWithNavLock: URLPreset[] = [
@@ -142,7 +139,6 @@ describe('getRouteFromPreset()', () => {
        alias: 'cuesheet-locked',
        target: OntimeView.Cuesheet,
        search: 'n=1',
-        displayInNav: false,
      },
    ];

@@ -224,7 +220,6 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
-        displayInNav: false,
      },
    ],
    [
@@ -236,7 +231,6 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
-        displayInNav: false,
      },
    ],
    [
@@ -248,7 +242,6 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
-        displayInNav: false,
      },
    ],
    [
@@ -260,7 +253,6 @@ describe('generateUrlPresetOptions', () => {
        target: 'timer',
        search: 'param1=value1&param2=value2',
        enabled: true,
-        displayInNav: false,
      },
    ],
  ])('should generate URL preset options for %s', (_description, alias, url, expected) => {
@@ -37,12 +37,7 @@ export function handleLinks(
  event?.preventDefault();

  const destination = new URL(externalServerUrl);
-  // split off any query string so it is not encoded into the pathname
-  const [pathname, search] = location.split('?');
-  destination.pathname = externalBaseURI ? `${externalBaseURI}/${pathname}` : pathname;
-  if (search) {
-    destination.search = search;
-  }
+  destination.pathname = externalBaseURI ? `${externalBaseURI}/${location}` : location;
  openLink(destination.toString());
 }

@@ -59,17 +54,3 @@ export function linkToOtherHost(
  }
  return destination.toString();
 }
-
-/**
- * Builds a base URL for reaching the Ontime server on a given network interface.
- * The Ontime server itself only speaks HTTP, so we only keep https when the page
- * already reaches the server over TLS on that same port (eg. a proxy in front of it);
- * any other explicit server port gets http.
- * externalServerUrl is used for testing
- */
-export function hostToBaseUrl(host: string, port: number, externalServerUrl: string = serverURL): string {
-  const page = new URL(externalServerUrl);
-  const pagePort = page.port === '' ? (page.protocol === 'https:' ? 443 : 80) : Number(page.port);
-  const scheme = page.protocol === 'https:' && pagePort === port ? 'https' : 'http';
-  return `${scheme}://${host}:${port}`;
-}
@@ -3,9 +3,7 @@ import {
  MILLIS_PER_HOUR,
  MILLIS_PER_MINUTE,
  MILLIS_PER_SECOND,
-  dayInMs,
  formatFromMillis,
-  getExpectedEnd,
  getExpectedStart,
 } from 'ontime-utils';

@@ -31,11 +29,6 @@ export function nowInMillis(): number {
  return elapsed;
 }

-export function normaliseWallClock(time: number): number {
-  const timeOfDay = time % dayInMs;
-  return timeOfDay < 0 ? timeOfDay + dayInMs : timeOfDay;
-}
-
 /**
 * @description Resolves format from url and store
 * @return {string|null} A format string like "hh:mm:ss a" or null
@@ -187,13 +180,15 @@ export function getExpectedTimesFromExtendedEvent(
      ...state,
    },
  );
-  const expectedEnd = getExpectedEnd(event, expectedStart, state.currentDay);
+
  const plannedEnd = event.timeStart + event.duration + event.delay;

  return {
    expectedStart,
    timeToStart: expectedStart - state.clock,
-    expectedEnd,
+    expectedEnd: event.countToEnd
+      ? Math.max(expectedStart + event.duration, plannedEnd)
+      : expectedStart + event.duration,
    plannedEnd,
  };
 }
@@ -38,18 +38,6 @@ export function validateProjectFile(file: File) {
  }
 }

-/**
- * Removes a trailing file extension from a file name (e.g. "show.xlsx" -> "show")
- * A leading dot (dotfiles like ".gitignore") is not treated as an extension
- */
-export function removeFileExtension(fileName: string): string {
-  const lastDot = fileName.lastIndexOf('.');
-  if (lastDot <= 0) {
-    return fileName;
-  }
-  return fileName.slice(0, lastDot);
-}
-
 export function isExcelFile(file: File | null) {
  return file?.name.endsWith('.xlsx');
 }
@@ -194,7 +194,6 @@ export function generateUrlPresetOptions(alias: string, userUrl: string): URLPre
    target: path,
    search: url.searchParams.toString(),
    enabled: true,
-    displayInNav: false,
  };
 }

@@ -1,21 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { matchesSettingsOptionQuery } from '../useAppSettingsMenu';
-
-describe('matchesSettingsOptionQuery', () => {
-  const option = {
-    id: 'settings__general',
-    label: 'General settings',
-    keywords: ['pin', 'time zone'],
-  };
-
-  it('does not match an empty or whitespace-only query', () => {
-    expect(matchesSettingsOptionQuery(option, '')).toBe(false);
-    expect(matchesSettingsOptionQuery(option, '   ')).toBe(false);
-  });
-
-  it('matches keywords case-insensitively', () => {
-    expect(matchesSettingsOptionQuery(option, 'PIN')).toBe(true);
-    expect(matchesSettingsOptionQuery(option, 'TIME ZONE')).toBe(true);
-  });
-});
@@ -1,4 +1,9 @@
-$content-max-width: 1280px;
+.corner {
+  position: fixed;
+  top: 6rem;
+  right: 4rem;
+  z-index: $zindex-floating;
+}

 .contentWrapper {
  display: flex;
@@ -9,29 +14,9 @@ $content-max-width: 1280px;
  position: relative;
 }

-.corner {
-  flex: 0 0 auto;
-  display: flex;
-  justify-content: flex-end;
-  // width is needed so the button can align to the right of the capped
-  // column, auto margins alone would shrink this to fit and centre it
-  width: 100%;
-  max-width: $content-max-width;
-  margin-inline: auto;
-  padding: 0 1rem 0.5rem;
-  box-sizing: border-box;
-}
-
 .content {
-  box-sizing: border-box;
-  // as with .corner, the width is needed to fill the capped column, otherwise
-  // auto margins shrink this to fit and each panel ends up its own width
-  width: 100%;
-  max-width: $content-max-width;
-  margin: 0 auto 1rem;
-  padding-inline: 1rem;
+  margin: 1rem;
  overflow-y: auto;
  flex-grow: 1;
-  // room for the last section to scroll to the top of the viewport
-  padding-bottom: 40vh;
+  padding-bottom: 300px;
 }
@@ -12,12 +12,12 @@ interface PanelContentProps {
 export default function PanelContent({ onClose, children }: PropsWithChildren<PanelContentProps>) {
  return (
    <div className={style.contentWrapper}>
+      <div className={style.content}>{children}</div>
      <div className={style.corner}>
        <Button size='large' onClick={onClose}>
          Close settings <IoClose />
        </Button>
      </div>
-      <div className={style.content}>{children}</div>
    </div>
  );
 }
@@ -1,13 +1,3 @@
-.container {
-  width: min(30vw, 300px);
-  flex: 0 0 min(30vw, 300px);
-  min-width: min(30vw, 300px);
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  overflow-y: auto;
-}
-
 .tabs,
 ul {
  list-style: none;
@@ -16,20 +6,22 @@ ul {
 }

 .tabs {
+  width: min(30vw, 300px);
+  flex: 0 0 min(30vw, 300px);
+  min-width: min(30vw, 300px);
  display: flex;
  flex-direction: column;
+  overflow-y: auto;
 }

 .primary,
 .secondary {
  padding: 0.25rem 1rem;
  margin-right: 1rem;
-  border-radius: 2px;

-  &:focus-visible {
+  &:focus {
    background-color: $gray-1000;
-    outline: 2px solid $blue-500;
-    outline-offset: -2px;
+    outline: 0;
  }

  &:hover {
@@ -40,21 +32,14 @@ ul {

 .primary {
  font-size: 1rem;
+  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
-  border-left: 3px solid transparent;
-
-  &.groupActive {
-    color: $blue-400;
-    font-weight: 600;
-  }

  &.active {
-    color: $ui-white;
-    border-left-color: $blue-400;
-    background-color: rgba($blue-500, 0.16);
-    font-weight: 600;
+    color: $blue-400;
+    background-color: $gray-1100;
  }

  &.highlight {
@@ -77,9 +62,6 @@ ul {
  font-size: $inner-section-text-size;

  &.active {
-    color: $ui-white;
-    border-left-color: $blue-400;
-    background-color: rgba($blue-500, 0.16);
-    font-weight: 600;
+    color: $blue-400;
  }
 }
@@ -1,18 +1,10 @@
-import { Fragment, useState } from 'react';
+import { Fragment } from 'react';

 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { isKeyEnter } from '../../../common/utils/keyEvent';
 import { cx } from '../../../common/utils/styleUtils';
-import * as Panel from '../panel-utils/PanelUtils';
-import {
-  filterSettingsOptions,
-  matchesSettingsOptionQuery,
-  SettingsOption,
-  SettingsOptionId,
-  useAppSettingsMenu,
-} from '../useAppSettingsMenu';
+import { SettingsOption, SettingsOptionId, useAppSettingsMenu } from '../useAppSettingsMenu';
 import useAppSettingsNavigation from '../useAppSettingsNavigation';
-import SettingsSearch from './SettingsSearch';

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

@@ -24,57 +16,23 @@ interface PanelListProps extends PanelBaseProps {
  selectedPanel: string;
 }

-/** Returns the first matching setting, preferring a matching child over its non-matching group. */
-function getFirstResultId(results: SettingsOption[], query: string): SettingsOptionId | null {
-  const firstResult = results[0];
-  if (!firstResult) {
-    return null;
-  }
-
-  if (matchesSettingsOptionQuery(firstResult, query.trim().toLowerCase())) {
-    return firstResult.id as SettingsOptionId;
-  }
-
-  return (firstResult.secondary?.[0]?.id as SettingsOptionId | undefined) ?? null;
-}
-
 export default function PanelList({ selectedPanel, location }: PanelListProps) {
  const { options } = useAppSettingsMenu();
-  const { setLocation } = useAppSettingsNavigation();
-  const [query, setQuery] = useState('');
-
-  const results = filterSettingsOptions(options, query);
-
-  const handleSearchSubmit = () => {
-    const target = getFirstResultId(results, query);
-    if (target) {
-      setLocation(target);
-      setQuery('');
-    }
-  };

  return (
-    <div className={style.container}>
-      <SettingsSearch query={query} onQueryChange={setQuery} onSubmit={handleSearchSubmit} />
-
-      {results.length === 0 ? (
-        <Panel.EmptyState title='No settings match' description={`Nothing found for "${query.trim()}"`} />
-      ) : (
-        <ul className={style.tabs}>
-          {results.map((panel) => {
-            const isSelected = selectedPanel === panel.id;
-            if (panel.highlight) {
-              return (
-                <Tooltip key={panel.id} text={panel.highlight} render={<span />}>
-                  <PanelListItem panel={panel} location={location} isSelected={isSelected} />
-                </Tooltip>
-              );
-            }
-            return <PanelListItem key={panel.id} panel={panel} location={location} isSelected={isSelected} />;
-          })}
-        </ul>
-      )}
-    </div>
+    <ul className={style.tabs}>
+      {options.map((panel) => {
+        const isSelected = selectedPanel === panel.id;
+        if (panel.highlight) {
+          return (
+            <Tooltip key={panel.id} text={panel.highlight} render={<span />}>
+              <PanelListItem panel={panel} location={location} isSelected={isSelected} />
+            </Tooltip>
+          );
+        }
+        return <PanelListItem key={panel.id} panel={panel} location={location} isSelected={isSelected} />;
+      })}
+    </ul>
  );
 }

@@ -86,15 +44,7 @@ interface PanelListItemProps {

 function PanelListItem({ panel, isSelected, location }: PanelListItemProps) {
  const { setLocation } = useAppSettingsNavigation();
-  const hasSelectedChild = Boolean(
-    isSelected && panel.secondary?.some((secondary) => secondary.id.split('__')[1] === location),
-  );
-  const classes = cx([
-    style.primary,
-    isSelected && !hasSelectedChild && style.active,
-    hasSelectedChild && style.groupActive,
-    panel.highlight && style.highlight,
-  ]);
+  const classes = cx([style.primary, isSelected && style.active, panel.highlight && style.highlight]);

  return (
    <Fragment key={panel.id}>
@@ -125,7 +75,6 @@ function PanelListItem({ panel, isSelected, location }: PanelListItemProps) {
              }
            }}
            className={secondaryClasses}
-            tabIndex={0}
            role='button'
          >
            {secondary.label}
@@ -1,24 +0,0 @@
-.search {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-  margin: 0.25rem 1rem 0.25rem 0.25rem;
-}
-
-.icon {
-  position: absolute;
-  left: 0.5rem;
-  color: $gray-400;
-  pointer-events: none;
-}
-
-.input {
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-
-.clear {
-  position: absolute;
-  right: 0.25rem;
-}
@@ -1,60 +0,0 @@
-import { KeyboardEvent, useRef } from 'react';
-import { IoClose, IoSearch } from 'react-icons/io5';
-
-import IconButton from '../../../common/components/buttons/IconButton';
-import Input from '../../../common/components/input/input/Input';
-
-import style from './SettingsSearch.module.scss';
-
-interface SettingsSearchProps {
-  query: string;
-  onQueryChange: (query: string) => void;
-  onSubmit: () => void;
-}
-
-export default function SettingsSearch({ query, onQueryChange, onSubmit }: SettingsSearchProps) {
-  const searchRef = useRef<HTMLInputElement>(null);
-  const isSearching = query.trim().length > 0;
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Escape' && isSearching) {
-      // Do not let the settings panel close while the user is clearing a search.
-      event.stopPropagation();
-      onQueryChange('');
-      return;
-    }
-
-    if (event.key === 'Enter') {
-      onSubmit();
-    }
-  };
-
-  return (
-    <div className={style.search}>
-      <IoSearch className={style.icon} />
-      <Input
-        ref={searchRef}
-        value={query}
-        onChange={(event) => onQueryChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder='Search settings'
-        className={style.input}
-        fluid
-      />
-      {isSearching && (
-        <IconButton
-          variant='ghosted-white'
-          size='small'
-          aria-label='Clear search'
-          className={style.clear}
-          onClick={() => {
-            onQueryChange('');
-            searchRef.current?.focus();
-          }}
-        >
-          <IoClose />
-        </IconButton>
-      )}
-    </div>
-  );
-}
@@ -1,26 +1,24 @@
 $inner-padding: 1rem;
-$card-padding: 2rem;

 .header {
-  font-size: 1.5rem;
+  font-size: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid $white-10;
  font-weight: 600;
 }

 .subheader {
-  font-size: 1.125rem;
+  font-size: 1.5rem;
  padding-bottom: 0.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  gap: 1rem;
 }

 .title {
-  font-size: 1rem;
-  padding: 0 var(--panel-card-padding, #{$card-padding});
+  font-size: 1.375rem;
+  padding: 0 2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
@@ -37,12 +35,10 @@ $card-padding: 2rem;
  color: $ui-white;
 }

-// width is owned by the panel content column, which caps and centres itself.
-// sections must stay full width so top level cards line up with Panel.Header
-// and nested sections fill their card rather than shrinking to fit
 .section {
  position: relative;
  margin-top: 2rem;
+  max-width: 850px;
 }

 .indent {
@@ -55,10 +51,8 @@ $card-padding: 2rem;
 }

 .card {
-  --panel-card-padding: #{$card-padding};
-
  position: relative;
-  padding: var(--panel-card-padding);
+  padding: 2rem;
  background-color: $white-3;
  border: 1px solid $gray-1100;
  border-radius: 3px;
@@ -82,10 +76,10 @@ $card-padding: 2rem;
  color: $error-red;
 }

-// tables scroll with the panel rather than owning a nested scroll area,
-// which keeps the sticky table head anchored to the panel viewport
 .pad {
-  padding: 0 var(--panel-card-padding, #{$card-padding});
+  padding: 0 2rem;
+  max-height: 550px;
+  overflow-y: scroll;
 }

 .table {
@@ -103,13 +97,10 @@ $card-padding: 2rem;
  }

  th {
-    font-weight: 600;
-    color: $gray-300;
-    font-size: calc(1rem - 3px);
-    letter-spacing: 0.02em;
-    vertical-align: bottom;
+    font-weight: 400;
+    color: $gray-400;
    white-space: nowrap;
-    text-transform: uppercase;
+    text-transform: capitalize;
  }

  th,
@@ -121,17 +112,6 @@ $card-padding: 2rem;
    background-color: $white-1;
  }

-  // active rows use a panel-local class today; keep the treatment here so all
-  // settings tables share the same state without each panel owning its colours
-  tr[class*='current'] {
-    background-color: rgba($blue-500, 0.16);
-
-    > td:first-child {
-      box-shadow: inset 3px 0 $blue-400;
-      font-weight: 500;
-    }
-  }
-
  // allow highlighting table elements
  tr[data-warn='true'],
  td[data-warn='true'] {
@@ -140,7 +120,7 @@ $card-padding: 2rem;
 }

 .listGroup {
-  padding: 0 var(--panel-card-padding, #{$card-padding});
+  padding: 0 2rem;

  > li:not(:last-child) {
    border-bottom: 1px solid $white-10;
@@ -153,17 +133,6 @@ $card-padding: 2rem;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
-
-  &.interactive {
-    margin-inline: calc(var(--panel-card-padding, #{$card-padding}) * -1);
-    padding: 0.75rem var(--panel-card-padding, #{$card-padding});
-    transition: background-color $transition-time-action;
-
-    &:hover,
-    &:focus-within {
-      background-color: $white-3;
-    }
-  }
 }

 .fieldTitle {
@@ -194,7 +163,7 @@ $card-padding: 2rem;
 .divider {
  border: none;
  border-top: 1px solid $white-10;
-  margin: 1rem calc(var(--panel-card-padding, #{$card-padding}) * -1);
+  margin: 1rem -2rem;
 }

 .overlay {
@@ -219,35 +188,19 @@ $card-padding: 2rem;
  animation: animloader 1s ease-in infinite;
 }

-.emptyState {
-  padding: 3rem 1.5rem;
+.empty {
+  background-color: $black-10;
  text-align: center;
-}
+  color: $muted-gray;

-.emptyMessage {
-  width: min(30rem, 100%);
-  margin-inline: auto;
-}
+  td {
+    padding-block: 5rem;
+  }

-.emptyTitle {
-  margin-bottom: 0.25rem;
-  color: rgba($gray-200, 0.72);
-  font-size: calc(1rem + 2px);
-  font-weight: 400;
-}
-
-.emptyBody {
-  color: rgba($gray-200, 0.55);
-  font-size: calc(1rem - 3px);
-  line-height: 1.5;
-}
-
-.emptyAction {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin-top: 1rem;
+  button {
+    margin-top: 1rem;
+    margin-inline: auto;
+  }
 }

 .inlineElements {
@@ -286,3 +239,14 @@ $card-padding: 2rem;
    opacity: 0;
  }
 }
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
@@ -1,5 +1,7 @@
 import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { IoAdd } from 'react-icons/io5';

+import Button from '../../../common/components/buttons/Button';
 import { cx } from '../../../common/utils/styleUtils';

 import style from './PanelUtils.module.scss';
@@ -60,29 +62,16 @@ export function Table({ className, children }: { className?: string; children: R
  );
 }

-export interface EmptyStateProps {
-  title: string;
-  description?: ReactNode;
-  action?: ReactNode;
-}
-
-export function EmptyState({ title, description, action }: EmptyStateProps) {
+export function TableEmpty({ label, handleClick }: { label?: string; handleClick?: () => void }) {
  return (
-    <div className={style.emptyState}>
-      <div className={style.emptyMessage}>
-        <div className={style.emptyTitle}>{title}</div>
-        {description && <div className={style.emptyBody}>{description}</div>}
-        {action && <div className={style.emptyAction}>{action}</div>}
-      </div>
-    </div>
-  );
-}
-
-export function TableEmpty(props: EmptyStateProps) {
-  return (
-    <tr>
+    <tr className={style.empty}>
      <td colSpan={99}>
-        <EmptyState {...props} />
+        <div>{label ?? 'No data yet'}</div>
+        {handleClick && (
+          <Button onClick={handleClick} disabled={!handleClick} variant='primary'>
+            New <IoAdd />
+          </Button>
+        )}
      </td>
    </tr>
  );
@@ -92,8 +81,8 @@ export function ListGroup({ className, children }: { className?: string; childre
  return <ul className={cx([style.listGroup, className])}>{children}</ul>;
 }

-export function ListItem({ children, interactive = false }: { children: ReactNode; interactive?: boolean }) {
-  return <li className={cx([style.listItem, interactive && style.interactive])}>{children}</li>;
+export function ListItem({ children }: { children: ReactNode }) {
+  return <li className={style.listItem}>{children}</li>;
 }

 export function Field({
@@ -1,4 +1,4 @@
-import Info from '../../../../common/components/info/Info';
+import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
 import {
  buyMeACoffeeUrl,
  discordUrl,
@@ -11,8 +11,6 @@ import {
 } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
 import AppVersion from './AppVersion';
-import CloudPanel from './CloudPanel';
-import ExternalLinkRow from './ExternalLinkRow';

 export default function AboutPanel() {
  return (
@@ -21,49 +19,28 @@ export default function AboutPanel() {
      <Panel.Section>
        <Panel.Card>
          <Panel.SubHeader>Ontime</Panel.SubHeader>
-          <Panel.Divider />
-          <Info>Free, open-source software for managing rundowns and event timers.</Info>
-          <Panel.ListGroup>
-            <ExternalLinkRow href={websiteUrl} title='www.getontime.no' description='App site and downloads' />
-            <ExternalLinkRow
-              href={githubSponsorUrl}
-              title='GitHub Sponsors'
-              description='Support development through GitHub'
-            />
-            <ExternalLinkRow
-              href={buyMeACoffeeUrl}
-              title='Buy Me a Coffee'
-              description='Make a one-time contribution'
-            />
-          </Panel.ListGroup>
-        </Panel.Card>
-      </Panel.Section>
-      <CloudPanel />
-      <Panel.Section>
-        <Panel.Card>
-          <Panel.SubHeader>Current version</Panel.SubHeader>
-          <Panel.Divider />
-          <Panel.ListGroup>
-            <AppVersion />
-          </Panel.ListGroup>
-        </Panel.Card>
-      </Panel.Section>
-      <Panel.Section>
-        <Panel.Card>
-          <Panel.SubHeader>Helpful links</Panel.SubHeader>
-          <Panel.Divider />
-          <Panel.ListGroup>
-            <ExternalLinkRow
-              href={documentationUrl}
-              title='Read the docs'
-              description='Setup guides and feature documentation'
-            />
-            <ExternalLinkRow href={githubUrl} title='GitHub' description='Report issues or contribute to Ontime' />
-            <ExternalLinkRow href={youtubeUrl} title='YouTube' description='Watch tutorials and feature walkthroughs' />
-            <ExternalLinkRow href={discordUrl} title='Discord' description='Get help and share suggestions' />
-            <ExternalLinkRow href={subredditUrl} title='Reddit' description='Join the Ontime community discussion' />
-          </Panel.ListGroup>
+          <Panel.Paragraph>
+            Free, open-source software for managing rundowns and event timers
+            <ExternalLink href={websiteUrl}>www.getontime.no</ExternalLink>
+          </Panel.Paragraph>
+          <Panel.Paragraph>
+            Considering sponsoring our work
+            <ExternalLink href={githubSponsorUrl}>GitHub Sponsors</ExternalLink>
+            <ExternalLink href={buyMeACoffeeUrl}>Buy Me a Coffee</ExternalLink>
+          </Panel.Paragraph>
+          <Panel.Paragraph>
+            If you are looking for an online version of Ontime, consider trying out our cloud service
+            <ExternalLink href={websiteUrl}>www.getontime.no</ExternalLink>
+          </Panel.Paragraph>
        </Panel.Card>
+        <Panel.SubHeader>Current version</Panel.SubHeader>
+        <AppVersion />
+        <Panel.SubHeader>Links</Panel.SubHeader>
+        <ExternalLink href={documentationUrl}>Read the docs</ExternalLink>
+        <ExternalLink href={githubUrl}>Follow the project on GitHub</ExternalLink>
+        <ExternalLink href={discordUrl}>Discord server</ExternalLink>
+        <ExternalLink href={youtubeUrl}>YouTube channel</ExternalLink>
+        <ExternalLink href={subredditUrl}>Subreddit</ExternalLink>
      </Panel.Section>
    </>
  );
@@ -1,6 +1,6 @@
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
 import useAppVersion from '../../../../common/hooks-query/useAppVersion';
-import { appVersion, isOntimeCloud, websiteUrl } from '../../../../externals';
+import { appVersion, isOntimeCloud } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';

 export default function AppVersion() {
@@ -8,33 +8,28 @@ export default function AppVersion() {

  if (isError) {
    return (
-      <Panel.ListItem>
-        <Panel.Field title={`Ontime ${appVersion}`} description='' error='Could not fetch version information' />
-      </Panel.ListItem>
+      <Panel.Paragraph>
+        {`You are currently using Ontime version ${appVersion}`}
+        <Panel.Error>Could not fetch version information</Panel.Error>
+      </Panel.Paragraph>
    );
  }

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

-  return (
-    <Panel.ListItem>
-      <Panel.Field title={`Ontime ${appVersion}`} description='You are using the latest version.' />
-    </Panel.ListItem>
-  );
+  return <Panel.Paragraph>{`You are currently using the latest version of Ontime: ${appVersion}`}</Panel.Paragraph>;
 }
@@ -1,74 +0,0 @@
-.card {
-  padding: 1.5rem;
-  border-color: rgba($action-blue, 0.42);
-  background-color: rgba($action-blue, 0.06);
-}
-
-.eyebrow {
-  color: $action-text-color;
-  font-size: calc(1rem - 3px);
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.title {
-  margin-top: 0.35rem;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.15;
-}
-
-.description {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  max-width: 33rem;
-  margin-top: 0.9rem;
-  color: $gray-300;
-  line-height: 1.5;
-}
-
-.portability {
-  padding-top: 0.75rem;
-  border-top: 1px solid $white-10;
-  color: $gray-400;
-  font-size: calc(1rem - 2px);
-}
-
-.benefits {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.75rem 1rem;
-  margin-top: 1.5rem;
-  padding: 0;
-  list-style: none;
-
-  li {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    line-height: 1.4;
-  }
-
-  svg {
-    flex: 0 0 auto;
-    margin-top: 0.1rem;
-    color: $action-text-color;
-    font-size: 1.1rem;
-  }
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-top: 1.5rem;
-}
-
-@media (max-width: $min-tablet) {
-  .benefits {
-    grid-template-columns: 1fr;
-  }
-}
@@ -1,52 +0,0 @@
-import { IoCheckmarkCircle } from 'react-icons/io5';
-
-import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
-import { isOntimeCloud, websiteUrl } from '../../../../externals';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-import style from './CloudPanel.module.scss';
-
-export default function CloudPanel() {
-  if (isOntimeCloud) {
-    return null;
-  }
-
-  return (
-    <Panel.Section>
-      <Panel.Card className={style.card}>
-        <span className={style.eyebrow}>Ontime Cloud</span>
-        <h3 className={style.title}>Run Ontime online with zero setup</h3>
-        <p className={style.description}>
-          <span>
-            Ontime Cloud lets you run and share Ontime online with your team. Subscriptions support continued
-            development while Ontime remains fully open-source and self-hostable.
-          </span>
-          <span className={style.portability}>
-            Project files work locally and in Cloud, so your shows can move freely.
-          </span>
-        </p>
-        <ul className={style.benefits}>
-          <li>
-            <IoCheckmarkCircle />
-            Start in minutes, with no setup or maintenance
-          </li>
-          <li>
-            <IoCheckmarkCircle />
-            Coordinate multi-track rundowns with Overview views
-          </li>
-          <li>
-            <IoCheckmarkCircle />
-            Manage every instance from one dashboard
-          </li>
-          <li>
-            <IoCheckmarkCircle />
-            Share secure read-only views with collaborators
-          </li>
-        </ul>
-        <div className={style.actions}>
-          <ExternalLink href={websiteUrl}>Learn more about Ontime Cloud</ExternalLink>
-        </div>
-      </Panel.Card>
-    </Panel.Section>
-  );
-}
@@ -1,15 +0,0 @@
-.link {
-  width: calc(100% + (var(--panel-card-padding, 2rem) * 2));
-  margin: -0.75rem calc(var(--panel-card-padding, 2rem) * -1);
-  padding: 0.75rem var(--panel-card-padding, 2rem);
-
-  > :first-child {
-    flex: 1;
-    min-width: 0;
-  }
-}
-
-.action {
-  color: $action-text-color;
-  font-size: calc(1rem - 2px);
-}
@@ -1,21 +0,0 @@
-import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
-import * as Panel from '../../panel-utils/PanelUtils';
-
-import style from './ExternalLinkRow.module.scss';
-
-interface ExternalLinkRowProps {
-  href: string;
-  title: string;
-  description: string;
-}
-
-export default function ExternalLinkRow({ href, title, description }: ExternalLinkRowProps) {
-  return (
-    <Panel.ListItem interactive>
-      <ExternalLink href={href} className={style.link}>
-        <Panel.Field title={title} description={description} />
-        <span className={style.action}>Open</span>
-      </ExternalLink>
-    </Panel.ListItem>
-  );
-}
@@ -1,13 +1,6 @@
 .outerColumn {
-  display: flex;
-  flex-direction: column;
  gap: 2rem;
-  font-size: calc(1rem - 1px);
-  color: $ui-white;
-
-  // the shared modal body owns scrolling for this regular form modal
-  min-height: 100%;
-  padding-block: 0.5rem;
+  margin-bottom: 2rem;

  h3 {
    font-size: 1rem;
@@ -19,12 +19,12 @@ import IconButton from '../../../../common/components/buttons/IconButton';
 import Info from '../../../../common/components/info/Info';
 import Input from '../../../../common/components/input/input/Input';
 import ExternalLink from '../../../../common/components/link/external-link/ExternalLink';
-import Modal from '../../../../common/components/modal/Modal';
 import RadioGroup from '../../../../common/components/radio-group/RadioGroup';
 import Select from '../../../../common/components/select/Select';
 import Tag from '../../../../common/components/tag/Tag';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import useCustomFields from '../../../../common/hooks-query/useCustomFields';
+import { preventEscape } from '../../../../common/utils/keyEvent';
 import { startsWithHttp } from '../../../../common/utils/regex';
 import * as Panel from '../../panel-utils/PanelUtils';
 import { isAutomation, makeFieldList } from './automationUtils';
@@ -34,7 +34,6 @@ import TemplateInput from './template-input/TemplateInput';
 import style from './AutomationForm.module.scss';

 const integrationsDocsUrl = 'https://docs.getontime.no/api/automation/#using-variables-in-automation';
-const formId = 'automation-form';

 interface AutomationFormProps {
  automation: Automation | AutomationDTO;
@@ -186,320 +185,284 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
  const canSubmit = !isSubmitting && isDirty && isValid;

  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      showBackdrop
-      showCloseButton
-      title={isEdit ? 'Edit automation' : 'Create automation'}
-      bodyElements={
-        <form id={formId} onSubmit={handleSubmit(onSubmit)} className={style.outerColumn}>
-          <div className={style.innerColumn}>
-            <h3>Automation options</h3>
-            <div className={style.titleSection}>
-              <label>
-                Title
-                <Input
-                  {...register('title', { required: { value: true, message: 'Required field' } })}
-                  fluid
-                  placeholder='Load preset'
-                />
-              </label>
-              <Panel.Error>{errors.title?.message}</Panel.Error>
-            </div>
-          </div>
+    <Panel.Indent
+      as='form'
+      name='automation-form'
+      onSubmit={handleSubmit(onSubmit)}
+      className={style.outerColumn}
+      onKeyDown={(event) => preventEscape(event, onClose)}
+    >
+      <Panel.SubHeader>{isEdit ? 'Edit automation' : 'Create automation'}</Panel.SubHeader>
+      <div className={style.innerSection}>
+        <h3>Automation options</h3>
+        <div className={style.titleSection}>
+          <label>
+            Title
+            <Input
+              {...register('title', { required: { value: true, message: 'Required field' } })}
+              fluid
+              placeholder='Load preset'
+            />
+          </label>
+          <Panel.Error>{errors.title?.message}</Panel.Error>
+        </div>
+      </div>

-          <div className={style.innerColumn}>
-            <h3>Filters (optional)</h3>
-            <div className={style.ruleSection}>
-              <label>
-                Trigger outputs if
-                <RadioGroup
-                  orientation='horizontal'
-                  value={watch('filterRule')}
-                  onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
-                  items={[
-                    { value: 'all', label: 'All filters pass' },
-                    { value: 'any', label: 'Any filter passes' },
-                  ]}
-                />
-              </label>
-              {fieldFilters.map((field, index) => {
-                const key = `filters.${index}.field.${field.id}`;
-                return (
-                  <div key={key} className={style.filterSection}>
-                    <label>
-                      Runtime data source
-                      <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>
-                    </label>
-                    <label>
-                      Matching condition
-                      <Select
-                        value={watch(`filters.${index}.operator`)}
-                        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' },
-                          { value: 'contains', label: 'contains' },
-                        ]}
-                        aria-label='Operator'
-                      />
-                      <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
-                    </label>
-                    <label>
-                      Value to match
-                      <Input {...register(`filters.${index}.value`)} fluid placeholder='<empty / no value>' />
-                    </label>
-                    <div>
-                      <span>&nbsp;</span>
-                      <div>
-                        <IconButton
-                          aria-label='Delete'
-                          variant='ghosted-destructive'
-                          onClick={() => removeFilter(index)}
-                        >
-                          <IoTrash />
-                        </IconButton>
-                      </div>
-                    </div>
+      <div className={style.innerSection}>
+        <h3>Filters (optional)</h3>
+        <div className={style.ruleSection}>
+          <label>
+            Trigger outputs if
+            <RadioGroup
+              orientation='horizontal'
+              value={watch('filterRule')}
+              onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
+              items={[
+                { value: 'all', label: 'All filters pass' },
+                { value: 'any', label: 'Any filter passes' },
+              ]}
+            />
+          </label>
+          {fieldFilters.map((field, index) => {
+            const key = `filters.${index}.field.${field.id}`;
+            return (
+              <div key={key} className={style.filterSection}>
+                <label>
+                  Runtime data source
+                  <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>
+                </label>
+                <label>
+                  Matching condition
+                  <Select
+                    value={watch(`filters.${index}.operator`)}
+                    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' },
+                      { value: 'contains', label: 'contains' },
+                    ]}
+                    aria-label='Operator'
+                  />
+                  <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
+                </label>
+                <label>
+                  Value to match
+                  <Input {...register(`filters.${index}.value`)} fluid placeholder='<empty / no value>' />
+                </label>
+                <div>
+                  <span>&nbsp;</span>
+                  <div>
+                    <IconButton aria-label='Delete' variant='ghosted-destructive' onClick={() => removeFilter(index)}>
+                      <IoTrash />
+                    </IconButton>
                  </div>
-                );
-              })}
-              <div>
-                <Button onClick={handleAddNewFilter}>
-                  Add filter <IoAdd />
-                </Button>
+                </div>
              </div>
-            </div>
+            );
+          })}
+          <div>
+            <Button onClick={handleAddNewFilter}>
+              Add filter <IoAdd />
+            </Button>
          </div>
+        </div>
+      </div>

-          <div className={style.innerColumn}>
-            <h3>Outputs</h3>
-            <Info>
-              Automation outputs can be used to send data from Ontime to external software <br />
-              or to change properties of Ontime itself. <br /> <br />
-              Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '}
-              <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
-            </Info>
+      <div className={style.innerColumn}>
+        <h3>Outputs</h3>
+        <Info>
+          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>

-            {fieldOutputs.map((output, index) => {
-              if (isOSCOutput(output)) {
-                const rowErrors = errors.outputs?.[index] as
-                  | {
-                      targetIP?: { message?: string };
-                      targetPort?: { message?: string };
-                      address?: { message?: string };
-                      args?: { message?: string };
-                    }
-                  | undefined;
+        {fieldOutputs.map((output, index) => {
+          if (isOSCOutput(output)) {
+            const rowErrors = errors.outputs?.[index] as
+              | {
+                  targetIP?: { message?: string };
+                  targetPort?: { message?: string };
+                  address?: { message?: string };
+                  args?: { message?: string };
+                }
+              | undefined;

-                return (
-                  <div key={output.id} className={style.outputCard}>
-                    <Tag>OSC</Tag>
-                    <div className={style.oscSection}>
-                      <label>
-                        Target IP
-                        <Input
-                          {...register(`outputs.${index}.targetIP`, {
-                            required: { value: true, message: 'Required field' },
-                          })}
-                          fluid
-                          placeholder='127.0.0.1'
-                        />
-                        <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Target Port
-                        <Input
-                          {...register(`outputs.${index}.targetPort`, {
-                            required: { value: true, message: 'Required field' },
-                            setValueAs: (value) => (value === '' ? 0 : Number(value)),
-                            max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
-                            min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
-                          })}
-                          fluid
-                          type='number'
-                          maxLength={5}
-                          placeholder='8000'
-                        />
-                        <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Address
-                        <TemplateInput
-                          {...register(`outputs.${index}.address`)}
-                          value={output.address}
-                          fluid
-                          placeholder='/cue/start'
-                        />
-                        <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
-                      </label>
-                      <label>
-                        Arguments
-                        <TemplateInput
-                          {...register(`outputs.${index}.args`)}
-                          value={output.args}
-                          fluid
-                          placeholder='1'
-                        />
-                        <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
-                      </label>
-                      <div>
-                        <span>&nbsp;</span>
-                        <Panel.InlineElements relation='inner'>
-                          <Button variant='ghosted-white' onClick={() => handleTestOSCOutput(index)}>
-                            Test
-                          </Button>
-                          <IconButton
-                            aria-label='Delete'
-                            variant='ghosted-destructive'
-                            onClick={() => removeOutput(index)}
-                          >
-                            <IoTrash />
-                          </IconButton>
-                        </Panel.InlineElements>
-                      </div>
-                    </div>
+            return (
+              <div key={output.id} className={style.outputCard}>
+                <Tag>OSC</Tag>
+                <div className={style.oscSection}>
+                  <label>
+                    Target IP
+                    <Input
+                      {...register(`outputs.${index}.targetIP`, {
+                        required: { value: true, message: 'Required field' },
+                      })}
+                      fluid
+                      placeholder='127.0.0.1'
+                    />
+                    <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
+                  </label>
+                  <label>
+                    Target Port
+                    <Input
+                      {...register(`outputs.${index}.targetPort`, {
+                        required: { value: true, message: 'Required field' },
+                        setValueAs: (value) => (value === '' ? 0 : Number(value)),
+                        max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+                        min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+                      })}
+                      fluid
+                      type='number'
+                      maxLength={5}
+                      placeholder='8000'
+                    />
+                    <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
+                  </label>
+                  <label>
+                    Address
+                    <Input {...register(`outputs.${index}.address`)} fluid placeholder='/cue/start' />
+                    <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
+                  </label>
+                  <label>
+                    Arguments
+                    <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} placeholder='1' />
+                    <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
+                  </label>
+                  <div>
+                    <span>&nbsp;</span>
+                    <Panel.InlineElements relation='inner'>
+                      <Button variant='ghosted-white' onClick={() => handleTestOSCOutput(index)}>
+                        Test
+                      </Button>
+                      <IconButton aria-label='Delete' variant='ghosted-destructive' onClick={() => removeOutput(index)}>
+                        <IoTrash />
+                      </IconButton>
+                    </Panel.InlineElements>
                  </div>
-                );
-              }
-              if (isHTTPOutput(output)) {
-                const rowErrors = errors.outputs?.[index] as
-                  | {
-                      url?: { message?: string };
-                    }
-                  | undefined;
-                return (
-                  <div key={output.id} className={style.outputCard}>
-                    <Tag>HTTP</Tag>
-                    <div className={style.httpSection}>
-                      <label>
-                        Target URL
-                        <TemplateInput
-                          {...register(`outputs.${index}.url`, {
-                            required: { value: true, message: 'Required field' },
-                            pattern: {
-                              value: startsWithHttp,
-                              message: 'HTTP messages should target http:// or https://',
-                            },
-                          })}
-                          value={output.url}
-                          fluid
-                          placeholder='http://127.0.0.1/start/1'
-                        />
-                        <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
-                      </label>
-                      <div>
-                        <span>&nbsp;</span>
-                        <Panel.InlineElements relation='inner'>
-                          <Button variant='ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
-                            Test
-                          </Button>
-                          <IconButton
-                            aria-label='Delete'
-                            variant='ghosted-destructive'
-                            onClick={() => removeOutput(index)}
-                          >
-                            <IoTrash />
-                          </IconButton>
-                        </Panel.InlineElements>
-                      </div>
-                    </div>
+                </div>
+              </div>
+            );
+          }
+          if (isHTTPOutput(output)) {
+            const rowErrors = errors.outputs?.[index] as
+              | {
+                  url?: { message?: string };
+                }
+              | undefined;
+            return (
+              <div key={output.id} className={style.outputCard}>
+                <Tag>HTTP</Tag>
+                <div className={style.httpSection}>
+                  <label>
+                    Target URL
+                    <Input
+                      {...register(`outputs.${index}.url`, {
+                        required: { value: true, message: 'Required field' },
+                        pattern: {
+                          value: startsWithHttp,
+                          message: 'HTTP messages should target http:// or https://',
+                        },
+                      })}
+                      fluid
+                      placeholder='http://127.0.0.1/start/1'
+                    />
+                    <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
+                  </label>
+                  <div>
+                    <span>&nbsp;</span>
+                    <Panel.InlineElements relation='inner'>
+                      <Button variant='ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
+                        Test
+                      </Button>
+                      <IconButton aria-label='Delete' variant='ghosted-destructive' onClick={() => removeOutput(index)}>
+                        <IoTrash />
+                      </IconButton>
+                    </Panel.InlineElements>
                  </div>
-                );
-              }
+                </div>
+              </div>
+            );
+          }

-              if (isOntimeAction(output)) {
-                const rowErrors = errors.outputs?.[index] as
-                  | {
-                      action?: { message?: string };
-                      time?: { message?: string };
-                      text?: { message?: string };
-                      visible?: { message?: string };
-                      secondarySource?: { message?: string };
-                    }
-                  | undefined;
-                return (
-                  <div key={output.id} className={style.outputCard}>
-                    <Tag>Ontime action</Tag>
-                    <OntimeActionForm
-                      value={output.action}
-                      index={index}
-                      register={register}
-                      rowErrors={rowErrors}
-                      setValue={setValue}
-                      watch={watch}
-                    >
-                      <span>&nbsp;</span>
-                      <Panel.InlineElements relation='inner'>
-                        <Button variant='ghosted-white' onClick={() => handleTestOntimeAction(index)}>
-                          Test
-                        </Button>
-                        <IconButton
-                          aria-label='Delete'
-                          variant='ghosted-destructive'
-                          onClick={() => removeOutput(index)}
-                        >
-                          <IoTrash />
-                        </IconButton>
-                      </Panel.InlineElements>
-                    </OntimeActionForm>
-                  </div>
-                );
-              }
+          if (isOntimeAction(output)) {
+            const rowErrors = errors.outputs?.[index] as
+              | {
+                  action?: { message?: string };
+                  time?: { message?: string };
+                  text?: { message?: string };
+                  visible?: { message?: string };
+                  secondarySource?: { message?: string };
+                }
+              | undefined;
+            return (
+              <div key={output.id} className={style.outputCard}>
+                <Tag>Ontime action</Tag>
+                <OntimeActionForm
+                  value={output.action}
+                  index={index}
+                  register={register}
+                  rowErrors={rowErrors}
+                  setValue={setValue}
+                  watch={watch}
+                >
+                  <span>&nbsp;</span>
+                  <Panel.InlineElements relation='inner'>
+                    <Button variant='ghosted-white' onClick={() => handleTestOntimeAction(index)}>
+                      Test
+                    </Button>
+                    <IconButton aria-label='Delete' variant='ghosted-destructive' onClick={() => removeOutput(index)}>
+                      <IoTrash />
+                    </IconButton>
+                  </Panel.InlineElements>
+                </OntimeActionForm>
+              </div>
+            );
+          }

-              return null;
-            })}
-            <Panel.InlineElements relation='inner'>
-              <Button onClick={handleAddNewOSCOutput}>
-                OSC <IoAdd />
-              </Button>
-              <Button onClick={handleAddNewHTTPOutput}>
-                HTTP <IoAdd />
-              </Button>
-              <Button onClick={handleAddnewOntimeAction}>
-                Ontime action <IoAdd />
-              </Button>
-            </Panel.InlineElements>
-          </div>
-        </form>
-      }
-      footerElements={
-        <>
-          {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-          <Button onClick={onClose}>Cancel</Button>
-          <Button variant='primary' type='submit' form={formId} disabled={!canSubmit} loading={isSubmitting}>
-            Save
+          // there should be no other output types
+          return null;
+        })}
+        <Panel.InlineElements relation='inner'>
+          <Button onClick={handleAddNewOSCOutput}>
+            OSC <IoAdd />
          </Button>
-        </>
-      }
-    />
+          <Button onClick={handleAddNewHTTPOutput}>
+            HTTP <IoAdd />
+          </Button>
+          <Button onClick={handleAddnewOntimeAction}>
+            Ontime action <IoAdd />
+          </Button>
+        </Panel.InlineElements>
+      </div>
+
+      <Panel.InlineElements align='end'>
+        {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant='primary' type='submit' disabled={!canSubmit} loading={isSubmitting}>
+          Save
+        </Button>
+      </Panel.InlineElements>
+    </Panel.Indent>
  );
 }
@@ -19,27 +19,24 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
  return (
    <>
      <Panel.Header>Automation</Panel.Header>
-      <div ref={settingsRef}>
-        <AutomationSettingsForm
-          enabledAutomations={data.enabledAutomations}
-          enabledOscIn={data.enabledOscIn}
-          oscPortIn={data.oscPortIn}
-          automationState={automationState}
-          oscInputState={oscInputState}
-          isLoading={isLoading}
-        />
-      </div>
-      <div ref={automationsRef}>
-        <AutomationsList automations={data.automations} enabledAutomations={automationState} isLoading={isLoading} />
-      </div>
-      <div ref={triggersRef}>
-        <TriggersList
-          triggers={data.triggers}
-          automations={data.automations}
-          enabledAutomations={automationState}
-          isLoading={isLoading}
-        />
-      </div>
+      <Panel.Section>
+        <Panel.Loader isLoading={isLoading} />
+        <div ref={settingsRef}>
+          <AutomationSettingsForm
+            enabledAutomations={data.enabledAutomations}
+            enabledOscIn={data.enabledOscIn}
+            oscPortIn={data.oscPortIn}
+            automationState={automationState}
+            oscInputState={oscInputState}
+          />
+        </div>
+        <div ref={automationsRef}>
+          <AutomationsList automations={data.automations} enabledAutomations={automationState} />
+        </div>
+        <div ref={triggersRef}>
+          <TriggersList triggers={data.triggers} automations={data.automations} enabledAutomations={automationState} />
+        </div>
+      </Panel.Section>
    </>
  );
 }
@@ -21,7 +21,6 @@ interface AutomationSettingsProps {
  oscPortIn: number;
  automationState?: boolean;
  oscInputState?: boolean;
-  isLoading?: boolean;
 }

 export default function AutomationSettingsForm({
@@ -30,7 +29,6 @@ export default function AutomationSettingsForm({
  oscPortIn,
  automationState,
  oscInputState,
-  isLoading,
 }: AutomationSettingsProps) {
  const {
    handleSubmit,
@@ -67,129 +65,126 @@ export default function AutomationSettingsForm({
  const oscInputEnabled = watch('enabledOscIn');

  return (
-    <Panel.Section>
-      <Panel.Card>
-        <Panel.Loader isLoading={Boolean(isLoading)} />
-        <Panel.SubHeader>
-          Automation settings
-          <Panel.InlineElements>
-            <Button variant='ghosted' onClick={onReset} disabled={!canSubmit}>
-              Revert to saved
-            </Button>
-            <Button
-              variant='primary'
-              type='submit'
-              form='automation-settings-form'
-              disabled={!canSubmit}
-              loading={isSubmitting}
-            >
-              Save
-            </Button>
-          </Panel.InlineElements>
-        </Panel.SubHeader>
-        {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+    <Panel.Card>
+      <Panel.SubHeader>
+        Automation settings
+        <Panel.InlineElements>
+          <Button variant='ghosted' onClick={onReset} disabled={!canSubmit}>
+            Revert to saved
+          </Button>
+          <Button
+            variant='primary'
+            type='submit'
+            form='automation-settings-form'
+            disabled={!canSubmit}
+            loading={isSubmitting}
+          >
+            Save
+          </Button>
+        </Panel.InlineElements>
+      </Panel.SubHeader>
+      {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}

-        <Panel.Divider />
+      <Panel.Divider />

-        <Panel.Section>
-          <Info>
-            <span>Control Ontime and share its data with external systems in your workflow.</span>
-            <span>- Automations allow Ontime to send its data on lifecycle triggers.</span>
-            <span>- OSC Input tells Ontime to listen to messages on the specific port.</span>
-            <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
-          </Info>
-        </Panel.Section>
+      <Panel.Section>
+        <Info>
+          <span>Control Ontime and share its data with external systems in your workflow.</span>
+          <span>- Automations allow Ontime to send its data on lifecycle triggers.</span>
+          <span>- OSC Input tells Ontime to listen to messages on the specific port.</span>
+          <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
+        </Info>
+      </Panel.Section>

-        <Panel.Section
-          as='form'
-          id='automation-settings-form'
-          onSubmit={handleSubmit(onSubmit)}
-          onKeyDown={(event) => preventEscape(event, onReset)}
-        >
-          <Panel.Title>Automation</Panel.Title>
-          <Panel.ListGroup>
-            <Panel.ListItem>
-              <Panel.Field
-                title={
-                  <>
-                    <span>Enable automations</span>
-                    {automationState === false && <Tag variant='warning'>OFF</Tag>}
-                  </>
-                }
-                description={
-                  automationState === false
-                    ? 'Automations are OFF. Triggers stay configured, but Ontime will not send messages.'
-                    : 'Allow Ontime to send messages on lifecycle triggers'
-                }
-                descriptionTone={automationState === false ? 'warning' : 'default'}
-                error={errors.enabledAutomations?.message}
-              />
-              <Switch
-                size='large'
-                checked={automationsEnabled}
-                onCheckedChange={(value: boolean) =>
-                  setValue('enabledAutomations', value, { shouldDirty: true, shouldValidate: true })
-                }
-              />
-            </Panel.ListItem>
-          </Panel.ListGroup>
-          <Panel.Title>OSC Input</Panel.Title>
+      <Panel.Section
+        as='form'
+        id='automation-settings-form'
+        onSubmit={handleSubmit(onSubmit)}
+        onKeyDown={(event) => preventEscape(event, onReset)}
+      >
+        <Panel.Loader isLoading={false} />

-          <Panel.ListGroup>
-            {isOntimeCloud && (
-              <Info>For security reasons OSC integrations are not available in the cloud service.</Info>
-            )}
-            <Panel.ListItem>
-              <Panel.Field
-                title={
-                  <>
-                    <span>OSC input</span>
-                    {oscInputState === false && <Tag variant='warning'>OFF</Tag>}
-                  </>
-                }
-                description={
-                  oscInputState === false
-                    ? 'OSC input is OFF. Ontime will not listen for incoming OSC control messages.'
-                    : 'Allow control of Ontime through OSC'
-                }
-                descriptionTone={oscInputState === false ? 'warning' : 'default'}
-                error={errors.enabledOscIn?.message}
-              />
-              <Switch
-                size='large'
-                checked={oscInputEnabled}
-                onCheckedChange={(value: boolean) =>
-                  setValue('enabledOscIn', value, { shouldDirty: true, shouldValidate: true })
-                }
-              />
-            </Panel.ListItem>
-            <Panel.ListItem>
-              <Panel.Field
-                title='Listen on port'
-                description='Port for incoming OSC. Default: 8888'
-                error={errors.oscPortIn?.message}
-              />
-              <Input
-                id='oscPortIn'
-                placeholder='8888'
-                maxLength={5}
-                style={{ textAlign: 'right', width: '5rem' }}
-                type='number'
-                fluid
-                {...register('oscPortIn', {
-                  required: { value: true, message: 'Required field' },
-                  max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
-                  min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
-                  pattern: {
-                    value: isOnlyNumbers,
-                    message: 'Value should be numeric',
-                  },
-                })}
-              />
-            </Panel.ListItem>
-          </Panel.ListGroup>
-        </Panel.Section>
-      </Panel.Card>
-    </Panel.Section>
+        <Panel.Title>Automation</Panel.Title>
+        <Panel.ListGroup>
+          <Panel.ListItem>
+            <Panel.Field
+              title={
+                <>
+                  <span>Enable automations</span>
+                  {automationState === false && <Tag variant='warning'>OFF</Tag>}
+                </>
+              }
+              description={
+                automationState === false
+                  ? 'Automations are OFF. Triggers stay configured, but Ontime will not send messages.'
+                  : 'Allow Ontime to send messages on lifecycle triggers'
+              }
+              descriptionTone={automationState === false ? 'warning' : 'default'}
+              error={errors.enabledAutomations?.message}
+            />
+            <Switch
+              size='large'
+              checked={automationsEnabled}
+              onCheckedChange={(value: boolean) =>
+                setValue('enabledAutomations', value, { shouldDirty: true, shouldValidate: true })
+              }
+            />
+          </Panel.ListItem>
+        </Panel.ListGroup>
+        <Panel.Title>OSC Input</Panel.Title>
+
+        <Panel.ListGroup>
+          {isOntimeCloud && <Info>For security reasons OSC integrations are not available in the cloud service.</Info>}
+          <Panel.ListItem>
+            <Panel.Field
+              title={
+                <>
+                  <span>OSC input</span>
+                  {oscInputState === false && <Tag variant='warning'>OFF</Tag>}
+                </>
+              }
+              description={
+                oscInputState === false
+                  ? 'OSC input is OFF. Ontime will not listen for incoming OSC control messages.'
+                  : 'Allow control of Ontime through OSC'
+              }
+              descriptionTone={oscInputState === false ? 'warning' : 'default'}
+              error={errors.enabledOscIn?.message}
+            />
+            <Switch
+              size='large'
+              checked={oscInputEnabled}
+              onCheckedChange={(value: boolean) =>
+                setValue('enabledOscIn', value, { shouldDirty: true, shouldValidate: true })
+              }
+            />
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field
+              title='Listen on port'
+              description='Port for incoming OSC. Default: 8888'
+              error={errors.oscPortIn?.message}
+            />
+            <Input
+              id='oscPortIn'
+              placeholder='8888'
+              maxLength={5}
+              style={{ textAlign: 'right', width: '5rem' }}
+              type='number'
+              fluid
+              {...register('oscPortIn', {
+                required: { value: true, message: 'Required field' },
+                max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+                min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+                pattern: {
+                  value: isOnlyNumbers,
+                  message: 'Value should be numeric',
+                },
+              })}
+            />
+          </Panel.ListItem>
+        </Panel.ListGroup>
+      </Panel.Section>
+    </Panel.Card>
  );
 }
@@ -22,10 +22,10 @@ const automationPlaceholder: AutomationDTO = {
 interface AutomationsListProps {
  automations: NormalisedAutomation;
  enabledAutomations?: boolean;
-  isLoading: boolean;
 }

-export default function AutomationsList({ automations, enabledAutomations, isLoading }: AutomationsListProps) {
+export default function AutomationsList(props: AutomationsListProps) {
+  const { automations, enabledAutomations } = props;
  const { refetch } = useAutomationSettings();
  const [automationFormData, setAutomationFormData] = useState<AutomationDTO | null>(null);
  const [deleteError, setDeleteError] = useState<string | null>(null);
@@ -44,94 +44,89 @@ export default function AutomationsList({ automations, enabledAutomations, isLoa
  const arrayAutomations = Object.keys(automations);

  return (
-    <Panel.Section>
-      <Panel.Card>
-        {automationFormData !== null && (
-          <AutomationForm automation={automationFormData} onClose={() => setAutomationFormData(null)} />
-        )}
-        <Panel.SubHeader>
-          Manage automations
-          <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
-            New <IoAdd />
-          </Button>
-        </Panel.SubHeader>
+    <Panel.Card>
+      <Panel.SubHeader>
+        Manage automations
+        <Button
+          type='submit'
+          disabled={Boolean(automationFormData)}
+          onClick={() => setAutomationFormData(automationPlaceholder)}
+        >
+          New <IoAdd />
+        </Button>
+      </Panel.SubHeader>

-        <Panel.Divider />
+      <Panel.Divider />

-        <Panel.Section>
-          {enabledAutomations === false && (
-            <Info>
-              Automations are disabled. You can still manage automation definitions here, but they will not run until
-              enabled.
-            </Info>
+      {enabledAutomations === false && (
+        <Info>
+          Automations are disabled. You can still manage automation definitions here, but they will not run until
+          enabled.
+        </Info>
+      )}
+
+      {automationFormData !== null && (
+        <AutomationForm automation={automationFormData} onClose={() => setAutomationFormData(null)} />
+      )}
+
+      <Panel.Table>
+        <thead>
+          <tr>
+            <th style={{ width: '45%' }}>Title</th>
+            <th style={{ width: '15%' }}>Trigger rule</th>
+            <th style={{ width: '15%' }}>Filters</th>
+            <th style={{ width: '15%' }}>Outputs</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          {arrayAutomations.length === 0 && (
+            <Panel.TableEmpty
+              handleClick={!automationFormData ? () => setAutomationFormData(automationPlaceholder) : undefined}
+            />
          )}
-
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th style={{ width: '45%' }}>Title</th>
-                <th style={{ width: '15%' }}>Trigger rule</th>
-                <th style={{ width: '15%' }}>Filters</th>
-                <th style={{ width: '15%' }}>Outputs</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {!isLoading && arrayAutomations.length === 0 && (
-                <Panel.TableEmpty
-                  title='No automations yet'
-                  description='An automation sends OSC or HTTP messages, or runs an Ontime action, whenever a trigger fires.'
-                  action={
-                    <Button variant='primary' onClick={() => setAutomationFormData(automationPlaceholder)}>
-                      Create automation <IoAdd />
-                    </Button>
-                  }
-                />
-              )}
-              {arrayAutomations.map((automationId) => {
-                if (!Object.hasOwn(automations, automationId)) {
-                  return null;
-                }
-                return (
-                  <Fragment key={automationId}>
-                    <tr>
-                      <td>{automations[automationId].title}</td>
-                      <td>
-                        <Tag>{automations[automationId].filterRule}</Tag>
-                      </td>
-                      <td>{automations[automationId].filters.length}</td>
-                      <td>{automations[automationId].outputs.length}</td>
-                      <Panel.InlineElements align='end' relation='inner' as='td'>
-                        <IconButton
-                          variant='ghosted-white'
-                          aria-label='Edit entry'
-                          onClick={() => setAutomationFormData(automations[automationId])}
-                        >
-                          <IoPencil />
-                        </IconButton>
-                        <IconButton
-                          variant='ghosted-destructive'
-                          aria-label='Delete entry'
-                          onClick={() => handleDelete(automationId)}
-                        >
-                          <IoTrash />
-                        </IconButton>
-                      </Panel.InlineElements>
-                    </tr>
-                  </Fragment>
-                );
-              })}
-              {deleteError && (
+          {arrayAutomations.map((automationId) => {
+            if (!Object.hasOwn(automations, automationId)) {
+              return null;
+            }
+            return (
+              <Fragment key={automationId}>
                <tr>
-                  <td colSpan={5}>
-                    <Panel.Error>{deleteError}</Panel.Error>
+                  <td>{automations[automationId].title}</td>
+                  <td>
+                    <Tag>{automations[automationId].filterRule}</Tag>
                  </td>
+                  <td>{automations[automationId].filters.length}</td>
+                  <td>{automations[automationId].outputs.length}</td>
+                  <Panel.InlineElements align='end' relation='inner' as='td'>
+                    <IconButton
+                      variant='ghosted-white'
+                      aria-label='Edit entry'
+                      onClick={() => setAutomationFormData(automations[automationId])}
+                    >
+                      <IoPencil />
+                    </IconButton>
+                    <IconButton
+                      variant='ghosted-destructive'
+                      aria-label='Delete entry'
+                      onClick={() => handleDelete(automationId)}
+                    >
+                      <IoTrash />
+                    </IconButton>
+                  </Panel.InlineElements>
                </tr>
-              )}
-            </tbody>
-          </Panel.Table>
-        </Panel.Section>
-      </Panel.Card>
-    </Panel.Section>
+              </Fragment>
+            );
+          })}
+          {deleteError && (
+            <tr>
+              <td colSpan={5}>
+                <Panel.Error>{deleteError}</Panel.Error>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </Panel.Table>
+    </Panel.Card>
  );
 }
@@ -5,7 +5,6 @@ import { UseFormRegister, UseFormSetValue, UseFormWatch } from 'react-hook-form'
 import Input from '../../../../common/components/input/input/Input';
 import Select from '../../../../common/components/select/Select';
 import * as Panel from '../../panel-utils/PanelUtils';
-import TemplateInput from './template-input/TemplateInput';

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

@@ -72,8 +71,8 @@ export default function OntimeActionForm({
            { value: 'playback-pause', label: 'Playback: pause' },
            { value: 'playback-roll', label: 'Playback: roll' },

-            { value: 'message-set', label: 'Primary Message' },
-            { value: 'message-secondary', label: 'Secondary Message' },
+            { value: 'message-set', label: 'Primary Message: set' },
+            { value: 'message-secondary', label: 'Secondary Message: source' },
          ]}
        />
        <Panel.Error>{rowErrors?.action?.message}</Panel.Error>
@@ -97,12 +96,7 @@ export default function OntimeActionForm({
        <>
          <label>
            Text (leave empty for no change)
-            <TemplateInput
-              {...register(`outputs.${index}.text`)}
-              value={watch(`outputs.${index}.text`) ?? ''}
-              fluid
-              placeholder='eg: Timer is finished'
-            />
+            <Input {...register(`outputs.${index}.text`)} fluid placeholder='eg: Timer is finished' />
            <Panel.Error>{rowErrors?.text?.message}</Panel.Error>
          </label>
          <label>
@@ -126,48 +120,31 @@ export default function OntimeActionForm({
      )}

      {selectedAction === 'message-secondary' && (
-        <>
-          <label>
-            Text (leave empty for no change)
-            <TemplateInput
-              {...register(`outputs.${index}.text`)}
-              value={watch(`outputs.${index}.text`) ?? ''}
-              fluid
-              placeholder='eg: Next up: keynote'
-            />
-            <Panel.Error>{rowErrors?.text?.message}</Panel.Error>
-          </label>
-          <label>
-            Timer secondary source
-            <Select<SecondarySource | 'no-change' | 'null' | null>
-              onValueChange={(value) => {
-                // null -> no selection
-                if (value === null) return;
-                // no-change -> leave the current secondary source untouched
-                if (value === 'no-change') {
-                  setValue(`outputs.${index}.secondarySource`, undefined, { shouldDirty: true });
-                  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`) ?? 'no-change'}
-              options={[
-                { value: 'no-change', label: 'No change' },
-                { value: 'aux1', label: 'Auxiliary timer 1' },
-                { value: 'aux2', label: 'Auxiliary timer 2' },
-                { value: 'aux3', label: 'Auxiliary timer 3' },
-                { value: 'secondary', label: 'Secondary' },
-                { value: 'null', label: 'None' }, // allow the user to clear the secondary source
-              ]}
-            />
-            <Panel.Error>{rowErrors?.secondarySource?.message}</Panel.Error>
-          </label>
-        </>
+        <label>
+          Timer secondary source
+          <Select<SecondarySource | 'null' | null>
+            onValueChange={(value) => {
+              // 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' },
+              { value: 'aux1', label: 'Auxiliary timer 1' },
+              { value: 'aux2', label: 'Auxiliary timer 2' },
+              { value: 'aux3', label: 'Auxiliary timer 3' },
+              { 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>
@@ -1,4 +1,4 @@
-import { NormalisedAutomation, TimerLifeCycle, Trigger, TriggerDTO } from 'ontime-types';
+import { NormalisedAutomation, TimerLifeCycle, TriggerDTO } from 'ontime-types';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';

@@ -6,21 +6,30 @@ import { addTrigger, editTrigger } from '../../../../common/api/automation';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
-import Modal from '../../../../common/components/modal/Modal';
 import Select from '../../../../common/components/select/Select';
+import { preventEscape } from '../../../../common/utils/keyEvent';
 import * as Panel from '../../panel-utils/PanelUtils';
 import { cycles } from './automationUtils';

-const formId = 'trigger-form';
-
 interface TriggerFormProps {
  automations: NormalisedAutomation;
-  trigger: Trigger | null;
+  initialId?: string;
+  initialTitle?: string;
+  initialAutomationId?: string;
+  initialTrigger?: TimerLifeCycle;
  onCancel: () => void;
  postSubmit: () => void;
 }

-export default function TriggerForm({ automations, trigger, onCancel, postSubmit }: TriggerFormProps) {
+export default function TriggerForm({
+  automations,
+  initialId,
+  initialTitle,
+  initialAutomationId,
+  initialTrigger,
+  onCancel,
+  postSubmit,
+}: TriggerFormProps) {
  const {
    handleSubmit,
    register,
@@ -31,9 +40,9 @@ export default function TriggerForm({ automations, trigger, onCancel, postSubmit
    formState: { errors, isSubmitting, isValid, isDirty },
  } = useForm<TriggerDTO>({
    defaultValues: {
-      title: trigger?.title,
-      trigger: trigger?.trigger ?? (cycles[0].value as TimerLifeCycle | undefined),
-      automationId: trigger?.automationId ?? automations?.[Object.keys(automations)[0]]?.id,
+      title: initialTitle,
+      trigger: initialTrigger ?? (cycles[0].value as TimerLifeCycle | undefined),
+      automationId: initialAutomationId ?? automations?.[Object.keys(automations)[0]]?.id,
    },
    resetOptions: {
      keepDirtyValues: true,
@@ -46,9 +55,10 @@ export default function TriggerForm({ automations, trigger, onCancel, postSubmit
  }, [setFocus]);

  const onSubmit = async (values: TriggerDTO) => {
-    if (trigger) {
+    // if we were passed an ID we are editing a Trigger
+    if (initialId) {
      try {
-        await editTrigger(trigger.id, { id: trigger.id, ...values });
+        await editTrigger(initialId, { id: initialId, ...values });
        postSubmit();
      } catch (error) {
        setError('root', { message: `Failed to save changes to trigger ${maybeAxiosError(error)}` });
@@ -75,63 +85,56 @@ export default function TriggerForm({ automations, trigger, onCancel, postSubmit
  const canSubmit = isDirty && isValid;

  return (
-    <Modal
-      isOpen
-      onClose={onCancel}
-      showBackdrop
-      showCloseButton
-      size='compact'
-      title={trigger ? 'Edit trigger' : 'Create trigger'}
-      bodyElements={
-        <form id={formId} onSubmit={handleSubmit(onSubmit)}>
-          <label>
-            Title
-            <Input
-              {...register('title', { required: { value: true, message: 'Required field' } })}
-              fluid
-              defaultValue={trigger?.title}
-            />
-            <Panel.Error>{errors.title?.message}</Panel.Error>
-          </label>
-          <label>
-            Lifecycle trigger
-            <Select
-              value={watch('trigger')}
-              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'
-            />
-            <Panel.Error>{errors.trigger?.message}</Panel.Error>
-          </label>
-          <label>
-            Automation title
-            <Select
-              value={watch('automationId')}
-              onValueChange={(value: string | null) => {
-                if (value === null) return;
-                setValue('automationId', value, { shouldDirty: true });
-              }}
-              options={automationSelect}
-              aria-label='Automation title'
-            />
-            <Panel.Error>{errors.automationId?.message}</Panel.Error>
-          </label>
-        </form>
-      }
-      footerElements={
-        <>
-          {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-          <Button disabled={isSubmitting} onClick={onCancel}>
-            Cancel
-          </Button>
-          <Button type='submit' form={formId} variant='primary' disabled={!canSubmit} loading={isSubmitting}>
-            Save
-          </Button>
-        </>
-      }
-    />
+    <Panel.Indent
+      as='form'
+      name='trigger-form'
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(event) => preventEscape(event, onCancel)}
+    >
+      <Panel.SubHeader>{initialId ? 'Edit trigger' : 'Create trigger'}</Panel.SubHeader>
+      <label>
+        Title
+        <Input
+          {...register('title', { required: { value: true, message: 'Required field' } })}
+          fluid
+          defaultValue={initialTitle}
+        />
+        <Panel.Error>{errors.title?.message}</Panel.Error>
+      </label>
+      <label>
+        Lifecycle trigger
+        <Select
+          value={watch('trigger')}
+          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'
+        />
+        <Panel.Error>{errors.trigger?.message}</Panel.Error>
+      </label>
+      <label>
+        Automation title
+        <Select
+          value={watch('automationId')}
+          onValueChange={(value: string | null) => {
+            if (value === null) return;
+            setValue('automationId', value, { shouldDirty: true });
+          }}
+          options={automationSelect}
+          aria-label='Automation title'
+        />
+        <Panel.Error>{errors.automationId?.message}</Panel.Error>
+      </label>
+      <Panel.InlineElements align='end'>
+        <Button disabled={isSubmitting} onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type='submit' variant='primary' disabled={!canSubmit} loading={isSubmitting}>
+          Save
+        </Button>
+      </Panel.InlineElements>
+    </Panel.Indent>
  );
 }
@@ -9,33 +9,23 @@ import Info from '../../../../common/components/info/Info';
 import useAutomationSettings from '../../../../common/hooks-query/useAutomationSettings';
 import * as Panel from '../../panel-utils/PanelUtils';
 import { checkDuplicates } from './automationUtils';
-import TriggerForm from './TriggerForm';
+import AutomationForm from './TriggerForm';
 import TriggersListItem from './TriggersListItem';

-type FormState = {
-  isOpen: boolean;
-  trigger?: Trigger;
-};
-
 interface TriggersListProps {
  triggers: Trigger[];
  automations: NormalisedAutomation;
  enabledAutomations?: boolean;
-  isLoading: boolean;
 }

-export default function TriggersList({ triggers, automations, enabledAutomations, isLoading }: TriggersListProps) {
-  const [formState, setFormState] = useState<FormState>({ isOpen: false, trigger: undefined });
+export default function TriggersList(props: TriggersListProps) {
+  const { triggers, automations, enabledAutomations } = props;
+  const [showForm, setShowForm] = useState(false);
  const { refetch } = useAutomationSettings();
  const [deleteError, setDeleteError] = useState<string | null>(null);

-  const openNewForm = () => setFormState({ isOpen: true });
-  const openEditForm = (trigger: Trigger) => setFormState({ isOpen: true, trigger });
-  const closeForm = () => setFormState({ isOpen: false, trigger: undefined });
-
  const handleDelete = async (id: string) => {
    try {
-      setDeleteError(null);
      await deleteTrigger(id);
    } catch (error) {
      setDeleteError(maybeAxiosError(error));
@@ -45,7 +35,7 @@ export default function TriggersList({ triggers, automations, enabledAutomations
  };

  const postSubmit = () => {
-    closeForm();
+    setShowForm(false);
    refetch();
  };

@@ -55,86 +45,70 @@ export default function TriggersList({ triggers, automations, enabledAutomations
  const canAdd = Object.keys(automations).length > 0;

  return (
-    <Panel.Section>
-      <Panel.Card>
-        {formState.isOpen && (
-          <TriggerForm
-            automations={automations}
-            trigger={formState.trigger ?? null}
-            onCancel={closeForm}
-            postSubmit={postSubmit}
-          />
+    <Panel.Card>
+      <Panel.SubHeader>
+        Manage triggers
+        <Button type='submit' form='trigger-form' disabled={!canAdd} loading={false} onClick={() => setShowForm(true)}>
+          New <IoAdd />
+        </Button>
+      </Panel.SubHeader>
+      <Panel.Divider />
+      <Panel.Section>
+        {enabledAutomations === false && (
+          <Info>
+            Automations are disabled. You can still manage triggers here, but they will not run until enabled.
+          </Info>
        )}
-        <Panel.SubHeader>
-          Manage triggers
-          <Button disabled={!canAdd} onClick={openNewForm}>
-            New <IoAdd />
-          </Button>
-        </Panel.SubHeader>
-        <Panel.Divider />
-        <Panel.Section>
-          {enabledAutomations === false && (
-            <Info>
-              Automations are disabled. You can still manage triggers here, but they will not run until enabled.
-            </Info>
-          )}
-          {duplicates && (
-            <Panel.Error>
-              You have created multiple links between the same trigger and automation which can cause performance
-              issues.
-            </Panel.Error>
-          )}
-          <Panel.Table>
-            <thead>
-              <tr>
-                <th style={{ width: '35%' }}>Title</th>
-                <th style={{ width: '25%' }}>Lifecycle trigger</th>
-                <th style={{ width: '25%' }}>Automation</th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {!isLoading && triggers.length === 0 && (
-                <Panel.TableEmpty
-                  title='No triggers yet'
-                  description={
-                    canAdd
-                      ? 'Triggers run an automation at a given point of the timer lifecycle, like when an event starts or finishes.'
-                      : 'Create an automation first, then add a trigger to decide when it should run.'
-                  }
-                  action={
-                    canAdd && (
-                      <Button variant='primary' onClick={openNewForm}>
-                        Create trigger <IoAdd />
-                      </Button>
-                    )
-                  }
-                />
-              )}
-              {triggers.map((trigger, index) => {
-                return (
-                  <Fragment key={trigger.id}>
-                    <TriggersListItem
-                      automations={automations}
-                      trigger={trigger}
-                      duplicate={duplicates?.includes(index)}
-                      handleEdit={() => openEditForm(trigger)}
-                      handleDelete={() => handleDelete(trigger.id)}
-                    />
-                  </Fragment>
-                );
-              })}
-              {deleteError && (
-                <tr>
-                  <td colSpan={5}>
-                    <Panel.Error>{deleteError}</Panel.Error>
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </Panel.Table>
-        </Panel.Section>
-      </Panel.Card>
-    </Panel.Section>
+        {duplicates && (
+          <Panel.Error>
+            You have created multiple links between the same trigger and automation which can performance issues.
+          </Panel.Error>
+        )}
+        {showForm && (
+          <AutomationForm automations={automations} onCancel={() => setShowForm(false)} postSubmit={postSubmit} />
+        )}
+        <Panel.Table>
+          <thead>
+            <tr>
+              <th style={{ width: '35%' }}>Title</th>
+              <th style={{ width: '25%' }}>Lifecycle trigger</th>
+              <th style={{ width: '25%' }}>Automation</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {!showForm && triggers.length === 0 && (
+              <Panel.TableEmpty
+                label='Create an automation to attach triggers to'
+                handleClick={canAdd ? () => setShowForm(true) : undefined}
+              />
+            )}
+            {triggers.map((trigger, index) => {
+              return (
+                <Fragment key={trigger.id}>
+                  <TriggersListItem
+                    automations={automations}
+                    id={trigger.id}
+                    title={trigger.title}
+                    trigger={trigger.trigger}
+                    automationId={trigger.automationId}
+                    duplicate={duplicates?.includes(index)}
+                    handleDelete={() => handleDelete(trigger.id)}
+                    postSubmit={postSubmit}
+                  />
+                  {deleteError && (
+                    <tr>
+                      <td colSpan={5}>
+                        <Panel.Error>{deleteError}</Panel.Error>
+                      </td>
+                    </tr>
+                  )}
+                </Fragment>
+              );
+            })}
+          </tbody>
+        </Panel.Table>
+      </Panel.Section>
+    </Panel.Card>
  );
 }
@@ -1,21 +1,48 @@
-import { NormalisedAutomation, Trigger } from 'ontime-types';
+import { NormalisedAutomation, TimerLifeCycle } from 'ontime-types';
+import { useState } from 'react';
 import { IoPencil, IoTrash, IoWarningOutline } from 'react-icons/io5';

 import IconButton from '../../../../common/components/buttons/IconButton';
 import Tag from '../../../../common/components/tag/Tag';
 import * as Panel from '../../panel-utils/PanelUtils';
 import { cycles } from './automationUtils';
+import AutomationForm from './TriggerForm';

 interface TriggersListItemProps {
  automations: NormalisedAutomation;
-  trigger: Trigger;
+  id: string;
+  title: string;
+  trigger: TimerLifeCycle;
+  automationId: string;
  duplicate?: boolean;
-  handleEdit: () => void;
  handleDelete: () => void;
+  postSubmit: () => void;
 }

 export default function TriggersListItem(props: TriggersListItemProps) {
-  const { automations, trigger, duplicate, handleEdit, handleDelete } = props;
+  const { automations, id, title, trigger, automationId, duplicate, handleDelete, postSubmit } = props;
+  const [isEditing, setIsEditing] = useState(false);
+
+  if (isEditing) {
+    return (
+      <tr>
+        <td colSpan={99}>
+          <AutomationForm
+            automations={automations}
+            initialId={id}
+            initialTitle={title}
+            initialTrigger={trigger}
+            initialAutomationId={automationId}
+            onCancel={() => setIsEditing(false)}
+            postSubmit={() => {
+              setIsEditing(false);
+              postSubmit();
+            }}
+          />
+        </td>
+      </tr>
+    );
+  }

  return (
    <tr data-warn={duplicate}>
@@ -25,16 +52,16 @@ export default function TriggersListItem(props: TriggersListItemProps) {
            color='#FFBC56' // $orange-500
          />
        )}
-        {trigger.title}
+        {title}
      </Panel.InlineElements>
      <td>
-        <Tag>{cycles.find((cycle) => cycle.value === trigger.trigger)?.label}</Tag>
+        <Tag>{cycles.find((cycle) => cycle.value === trigger)?.label}</Tag>
      </td>
      <td>
-        <Tag>{automations?.[trigger.automationId]?.title}</Tag>
+        <Tag>{automations?.[automationId]?.title}</Tag>
      </td>
      <Panel.InlineElements align='end' relation='inner' as='td'>
-        <IconButton variant='ghosted-white' aria-label='Edit entry' onClick={handleEdit}>
+        <IconButton variant='ghosted-white' aria-label='Edit entry' onClick={() => setIsEditing(true)}>
          <IoPencil />
        </IconButton>
        <IconButton variant='ghosted-destructive' aria-label='Delete entry' onClick={handleDelete}>
@@ -1,67 +1,29 @@
-.inputShell {
+.wrapper {
  position: relative;
 }

-.fluid {
-  width: 100%;
-}
-
-.input {
-  padding-right: 2rem;
-}
-
-.expandButton {
-  position: absolute;
-  top: 50%;
-  right: 0.25rem;
-  transform: translateY(-50%);
-}
-
-.positioner {
-  outline: 0;
-}
-
-.popup {
-  box-sizing: border-box;
-  min-width: var(--anchor-width);
-  max-width: var(--available-width);
-  border: 1px solid $gray-1000;
-  border-radius: $component-border-radius-md;
+.suggestions {
  background: $gray-1250;
-  color: $label-gray;
-}
+  color: $ui-white;

-.list {
-  box-sizing: border-box;
-  max-height: min(20rem, var(--available-height));
-  overflow-y: auto;
-  overscroll-behavior: contain;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  z-index: $zindex-floating;
  padding-block: 0.25rem;
-  outline: 0;
-}

-.item {
-  box-sizing: border-box;
-  padding: 0.25rem 0.5rem;
-  outline: 0;
-  cursor: default;
-  user-select: none;
-  overflow-wrap: anywhere;
+  max-height: 200px;
+  overflow-y: auto;
+  color: $label-gray;

-  &[data-highlighted] {
+  li {
+    padding: 0.25rem;
+  }
+
+  li:hover {
    color: $ui-white;
    background: $blue-700;
  }
 }
-
-.expandedEditor {
-  min-height: min(18rem, 45vh);
-  font-family: monospace;
-  line-height: 1.4;
-}
-
-.footerHint {
-  margin-right: auto;
-  color: $label-gray;
-  font-size: calc(1rem - 2px);
-}
@@ -1,258 +1,69 @@
-import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
-import type { ChangeEvent, ReactNode, Ref } from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { IoExpandOutline } from 'react-icons/io5';
+import { mergeRefs, useClickOutside } from '@mantine/hooks';
+import { forwardRef, useMemo, useState } from 'react';

-import Button from '../../../../../common/components/buttons/Button';
-import IconButton from '../../../../../common/components/buttons/IconButton';
-import { type InputProps } from '../../../../../common/components/input/input/Input';
-import Textarea from '../../../../../common/components/input/textarea/Textarea';
-import Modal from '../../../../../common/components/modal/Modal';
+import Input, { type InputProps } from '../../../../../common/components/input/input/Input';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
-import { cx } from '../../../../../common/utils/styleUtils';
-import { makeAutoCompleteList } from './templateInput.utils';
-import { useTemplateAutocomplete } from './useTemplateAutocomplete';
+import { makeAutoCompleteList, matchRemaining, selectFromLastTemplate } from './templateInput.utils';

-import inputStyle from '../../../../../common/components/input/input/Input.module.scss';
 import style from './TemplateInput.module.scss';

-interface TemplateInputProps extends Omit<InputProps, 'value'> {
-  ref?: Ref<HTMLInputElement>;
-  value?: string;
-}
+interface TemplateInputProps extends InputProps {}

-interface TemplateEditorModalProps {
-  autocompleteList: string[];
-  isOpen: boolean;
-  onClose: () => void;
-  onSave: (value: string) => void;
-  value: string;
-}
-
-type TemplateAutocompleteState = ReturnType<typeof useTemplateAutocomplete<HTMLInputElement>>;
-
-interface TemplateAutocompleteRootProps {
-  autocomplete: TemplateAutocompleteState;
-  children: ReactNode;
-  value: string;
-}
-
-function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
-  if (typeof ref === 'function') {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}
-
-function emitInputChange(name: string | undefined, value: string, onChange: InputProps['onChange']) {
-  onChange?.({
-    target: { name, value },
-    currentTarget: { name, value },
-  } as ChangeEvent<HTMLInputElement>);
-}
-
-export default function TemplateInput({
-  className,
-  disabled,
-  fluid,
-  height = 'medium',
-  onChange,
-  readOnly,
-  ref,
-  value,
-  variant = 'subtle',
-  ...rest
-}: TemplateInputProps) {
+const TemplateInput = forwardRef(function TemplateInput(props: TemplateInputProps, ref) {
+  const { value, onChange, ...rest } = props;
  const { data } = useCustomFields();
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const [inputValue, setInputValue] = useState(value || '');
-  const [isExpanded, setIsExpanded] = useState(false);
+  const localRef = useClickOutside(() => setShowSuggestions(false));

  const autocompleteList = useMemo(() => {
    return makeAutoCompleteList(data);
  }, [data]);

-  const updateInputValue = useCallback(
-    (nextValue: string) => {
-      setInputValue(nextValue);
-      emitInputChange(rest.name, nextValue, onChange);
-    },
-    [onChange, rest.name],
-  );
+  const [inputValue, setInputValue] = useState(value || '');
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);

-  const autocomplete = useTemplateAutocomplete(inputValue, autocompleteList, inputRef, updateInputValue);
-  const { setCursorForValue } = autocomplete;
-
-  // Keep the local autocomplete input in sync when react-hook-form resets or swaps field-array values.
-  useEffect(() => {
-    const nextValue = value || '';
-    setInputValue(nextValue);
-    setCursorForValue(nextValue, nextValue.length);
-  }, [setCursorForValue, value]);
-
-  const setInputRef = useCallback(
-    (element: HTMLInputElement | null) => {
-      inputRef.current = element;
-      assignRef(ref, element);
-    },
-    [ref],
-  );
-
-  const openExpandedEditor = () => {
-    autocomplete.setShowSuggestions(false);
-    setIsExpanded(true);
+  const updateSuggestions = (value: string) => {
+    const template = selectFromLastTemplate(value);
+    return autocompleteList.filter((suggestion) => suggestion.startsWith(template));
  };

-  const closeExpandedEditor = () => {
-    setIsExpanded(false);
-  };
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);

-  const saveExpandedEditor = (nextValue: string) => {
-    updateInputValue(nextValue);
-    autocomplete.setCursorForValue(nextValue, nextValue.length);
-    setIsExpanded(false);
-  };
-
-  return (
-    <>
-      <TemplateAutocompleteRoot autocomplete={autocomplete} value={inputValue}>
-        <div className={cx([style.inputShell, fluid && style.fluid])}>
-          <BaseAutocomplete.Input
-            ref={setInputRef}
-            className={cx([
-              inputStyle.input,
-              inputStyle[variant],
-              inputStyle[height],
-              fluid && inputStyle.fluid,
-              style.input,
-              className,
-            ])}
-            {...rest}
-            disabled={disabled}
-            onClick={autocomplete.updateCursor}
-            onFocus={autocomplete.updateCursor}
-            onKeyUp={autocomplete.updateCursor}
-            onSelect={autocomplete.updateCursor}
-            readOnly={readOnly}
-          />
-          <IconButton
-            aria-label='Expand template editor'
-            className={style.expandButton}
-            disabled={disabled || readOnly}
-            onClick={openExpandedEditor}
-            size='small'
-            title='Expand template editor'
-            variant='ghosted-white'
-          >
-            <IoExpandOutline />
-          </IconButton>
-        </div>
-      </TemplateAutocompleteRoot>
-      <TemplateEditorModal
-        autocompleteList={autocompleteList}
-        isOpen={isExpanded}
-        onClose={closeExpandedEditor}
-        onSave={saveExpandedEditor}
-        value={inputValue}
-      />
-    </>
-  );
-}
-
-function TemplateAutocompleteRoot({ autocomplete, children, value }: TemplateAutocompleteRootProps) {
-  return (
-    <BaseAutocomplete.Root
-      items={autocomplete.suggestions}
-      autoHighlight
-      highlightItemOnHover
-      mode='none'
-      open={autocomplete.open}
-      value={value}
-      onOpenChange={autocomplete.setShowSuggestions}
-      onValueChange={autocomplete.handleValueChange}
-    >
-      {children}
-      <TemplateSuggestionPopup />
-    </BaseAutocomplete.Root>
-  );
-}
-
-function TemplateEditorModal({ autocompleteList, isOpen, onClose, onSave, value }: TemplateEditorModalProps) {
-  const expandedInputRef = useRef<HTMLTextAreaElement | null>(null);
-  const [draftValue, setDraftValue] = useState(value);
-  const autocomplete = useTemplateAutocomplete(draftValue, autocompleteList, expandedInputRef, setDraftValue);
-  const { setShowSuggestions } = autocomplete;
-
-  // Reset the draft whenever the modal opens so cancel never leaks unsaved changes.
-  useEffect(() => {
-    if (!isOpen) {
-      return;
+    if (event.target.value.endsWith('{')) {
+      setShowSuggestions(true);
+      setSuggestions(updateSuggestions(event.target.value));
+    } else if (event.target.value === '' || event.target.value.endsWith('}}')) {
+      setShowSuggestions(false);
+    } else if (showSuggestions) {
+      setSuggestions(updateSuggestions(event.target.value));
    }

-    setDraftValue(value);
-    setShowSuggestions(false);
-  }, [isOpen, setShowSuggestions, value]);
-
-  const handleClose = () => {
-    setShowSuggestions(false);
-    onClose();
+    onChange?.(event);
  };

-  const handleSave = () => {
+  const handleSuggestion = (value: string) => {
+    setInputValue((prev) => {
+      const remaining = matchRemaining(prev as string, value);
+      return prev + remaining;
+    });
    setShowSuggestions(false);
-    onSave(draftValue);
  };

  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={handleClose}
-      showBackdrop
-      showCloseButton
-      title='Edit template'
-      bodyElements={
-        <TemplateAutocompleteRoot autocomplete={autocomplete} value={draftValue}>
-          <BaseAutocomplete.Input
-            autoFocus
-            className={style.expandedEditor}
-            onClick={autocomplete.updateCursor}
-            onFocus={autocomplete.updateCursor}
-            onKeyUp={autocomplete.updateCursor}
-            onSelect={autocomplete.updateCursor}
-            render={<Textarea ref={expandedInputRef} fluid resize='none' rows={8} />}
-          />
-        </TemplateAutocompleteRoot>
-      }
-      footerElements={
-        <>
-          <span className={style.footerHint}>Start a template with {'{{'} to see autocomplete.</span>
-          <Button onClick={handleClose}>Cancel</Button>
-          <Button onClick={handleSave} variant='primary'>
-            Save
-          </Button>
-        </>
-      }
-    />
+    <div className={style.wrapper} ref={mergeRefs(localRef, ref)}>
+      <Input value={inputValue} {...rest} onChange={handleInputChange} fluid />
+      {showSuggestions && suggestions.length > 0 && (
+        <ul className={style.suggestions}>
+          {suggestions.map((suggestion) => (
+            <li key={suggestion} onClick={() => handleSuggestion(suggestion)}>
+              {suggestion}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
  );
-}
+});

-function TemplateSuggestionPopup() {
-  return (
-    <BaseAutocomplete.Portal>
-      <BaseAutocomplete.Positioner side='bottom' align='start' className={style.positioner}>
-        <BaseAutocomplete.Popup className={style.popup}>
-          <BaseAutocomplete.List className={style.list}>
-            <BaseAutocomplete.Collection>
-              {(suggestion: string) => (
-                <BaseAutocomplete.Item key={suggestion} value={suggestion} className={style.item}>
-                  {suggestion}
-                </BaseAutocomplete.Item>
-              )}
-            </BaseAutocomplete.Collection>
-          </BaseAutocomplete.List>
-        </BaseAutocomplete.Popup>
-      </BaseAutocomplete.Positioner>
-    </BaseAutocomplete.Portal>
-  );
-}
+export default TemplateInput;
@@ -1,4 +1,4 @@
-import { completeTemplateAtCursor, matchRemaining, selectActiveTemplate } from '../templateInput.utils';
+import { matchRemaining } from '../templateInput.utils';

 describe('matchRemaining()', () => {
  it('should return a partial string needed for autocomplete', () => {
@@ -15,54 +15,3 @@ describe('matchRemaining()', () => {
    expect(matchRemaining('test', 'test')).toBe('');
  });
 });
-
-describe('selectActiveTemplate()', () => {
-  it('returns the last unclosed template fragment', () => {
-    expect(selectActiveTemplate('send {{event')).toBe('{{event');
-    expect(selectActiveTemplate('send {{eventNow.title}} and {{event')).toBe('{{event');
-  });
-
-  it('ignores single braces and closed templates', () => {
-    expect(selectActiveTemplate('send {')).toBe('');
-    expect(selectActiveTemplate('send {{eventNow.title}}')).toBe('');
-  });
-
-  it('only considers templates before the cursor', () => {
-    expect(selectActiveTemplate('send {{event}} then {{timer', 14)).toBe('');
-    expect(selectActiveTemplate('send {{event}} then {{timer', 27)).toBe('{{timer');
-  });
-
-  it('selects a partial template when the cursor is inside a completed template', () => {
-    expect(selectActiveTemplate('send {{timer.current}} after', 12)).toBe('{{timer');
-  });
-});
-
-describe('completeTemplateAtCursor()', () => {
-  it('completes the active template before the cursor', () => {
-    expect(completeTemplateAtCursor('send {{timer after', '{{timer.current}}', 12)).toEqual({
-      value: 'send {{timer.current}} after',
-      cursorIndex: 22,
-    });
-  });
-
-  it('preserves text before and after the cursor', () => {
-    expect(completeTemplateAtCursor('before {{event after', '{{eventNow.title}}', 14)).toEqual({
-      value: 'before {{eventNow.title}} after',
-      cursorIndex: 25,
-    });
-  });
-
-  it('preserves a following template when completing between templates', () => {
-    expect(completeTemplateAtCursor('{{clock}} and {{timer then {{eventNow.title}}', '{{timer.current}}', 21)).toEqual({
-      value: '{{clock}} and {{timer.current}} then {{eventNow.title}}',
-      cursorIndex: 31,
-    });
-  });
-
-  it('replaces the whole template when the cursor is inside a completed template', () => {
-    expect(completeTemplateAtCursor('before {{timer.current}} after', '{{timer.duration}}', 15)).toEqual({
-      value: 'before {{timer.duration}} after',
-      cursorIndex: 25,
-    });
-  });
-});
@@ -54,16 +54,6 @@ const eventStaticPropertiesNext = [
  '{{eventNext.delay}}',
 ];

-const groupStaticPropertiesNow = [
-  '{{groupNow.id}}',
-  '{{groupNow.title}}',
-  '{{groupNow.note}}',
-  '{{groupNow.colour}}',
-  '{{groupNow.timeStart}}',
-  '{{groupNow.timeEnd}}',
-  '{{groupNow.duration}}',
-];
-
 const staticAuxProperties = (index: 1 | 2 | 3) => [
  `{{auxtimer${index}.current}}`,
  `{{auxtimer${index}.duration}}`,
@@ -85,19 +75,12 @@ export function makeAutoCompleteList(customFields: CustomFields): string[] {
    ...Object.entries(customFields).map(([key]) => `{{eventNow.custom.${key}}}`),
    ...eventStaticPropertiesNext,
    ...Object.entries(customFields).map(([key]) => `{{eventNext.custom.${key}}}`),
-    ...groupStaticPropertiesNow,
-    ...Object.entries(customFields).map(([key]) => `{{groupNow.custom.${key}}}`),
    ...staticAuxProperties(1),
    ...staticAuxProperties(2),
    ...staticAuxProperties(3),
  ];
 }

-interface TemplateCompletion {
-  cursorIndex: number;
-  value: string;
-}
-
 /**
 * Returns the partial string b needed to autocomplete string a
 * @example matchRemaining('te', 'test') -> 'st'
@@ -128,54 +111,13 @@ export function matchRemaining(a: string, b: string) {
  return '';
 }

-function getActiveTemplateRange(text: string, cursorIndex = text.length) {
-  const textBeforeCursor = text.slice(0, cursorIndex);
-  const start = textBeforeCursor.lastIndexOf('{{');
-  if (start === -1) {
-    return null;
-  }
-
-  const closeBeforeCursor = textBeforeCursor.lastIndexOf('}}');
-  if (closeBeforeCursor > start) {
-    return null;
-  }
-
-  const closeAfterStart = text.indexOf('}}', start);
-  const nextStartAfterCursor = text.indexOf('{{', cursorIndex);
-  const closesBeforeNextTemplate = nextStartAfterCursor === -1 || closeAfterStart < nextStartAfterCursor;
-  const end = closeAfterStart !== -1 && closesBeforeNextTemplate ? closeAfterStart + 2 : cursorIndex;
-
-  return {
-    end,
-    start,
-    template: text.slice(start, cursorIndex),
-  };
-}
-
 /**
- * Selects the last unclosed starting template before the cursor.
+ * Selects the last starting template in a string
 */
-export function selectActiveTemplate(text: string, cursorIndex = text.length) {
-  return getActiveTemplateRange(text, cursorIndex)?.template ?? '';
-}
-
-/**
- * Replaces the active template fragment before the cursor with the selected suggestion.
- */
-export function completeTemplateAtCursor(
-  text: string,
-  suggestion: string,
-  cursorIndex = text.length,
-): TemplateCompletion {
-  const activeTemplateRange = getActiveTemplateRange(text, cursorIndex);
-  if (!activeTemplateRange) {
-    const value = text + matchRemaining(text, suggestion);
-    return { value, cursorIndex: value.length };
+export function selectFromLastTemplate(text: string) {
+  const lastBraceIndex = text.lastIndexOf('{{');
+  if (lastBraceIndex !== -1) {
+    return text.slice(lastBraceIndex);
  }
-
-  const value = `${text.slice(0, activeTemplateRange.start)}${suggestion}${text.slice(activeTemplateRange.end)}`;
-  return {
-    value,
-    cursorIndex: activeTemplateRange.start + suggestion.length,
-  };
+  return '';
 }
@@ -1,72 +0,0 @@
-import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
-import { useCallback, useMemo, useState, type RefObject } from 'react';
-
-import { completeTemplateAtCursor, selectActiveTemplate } from './templateInput.utils';
-
-type TemplateElement = HTMLInputElement | HTMLTextAreaElement;
-
-function getCursorIndex(element: TemplateElement | null, fallback: string) {
-  return element?.selectionStart ?? fallback.length;
-}
-
-function focusCursor(element: TemplateElement | null, cursorIndex: number) {
-  requestAnimationFrame(() => {
-    element?.focus();
-    element?.setSelectionRange(cursorIndex, cursorIndex);
-  });
-}
-
-export function useTemplateAutocomplete<T extends TemplateElement>(
-  value: string,
-  autocompleteList: string[],
-  elementRef: RefObject<T | null>,
-  onValueChange: (value: string) => void,
-) {
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const [cursor, setCursor] = useState(value.length);
-
-  const activeTemplate = selectActiveTemplate(value, cursor);
-  const suggestions = useMemo(() => {
-    if (!activeTemplate) {
-      return [];
-    }
-    return autocompleteList.filter((suggestion) => suggestion.startsWith(activeTemplate));
-  }, [activeTemplate, autocompleteList]);
-
-  const setCursorForValue = useCallback((nextValue: string, cursorIndex: number) => {
-    setCursor(cursorIndex);
-    setShowSuggestions(Boolean(selectActiveTemplate(nextValue, cursorIndex)));
-  }, []);
-
-  const updateCursor = useCallback(() => {
-    const cursorIndex = getCursorIndex(elementRef.current, value);
-    setCursorForValue(value, cursorIndex);
-  }, [elementRef, setCursorForValue, value]);
-
-  const handleValueChange = useCallback(
-    (nextValue: string, eventDetails: BaseAutocomplete.Root.ChangeEventDetails) => {
-      if (eventDetails.reason === 'item-press') {
-        eventDetails.cancel();
-        const completed = completeTemplateAtCursor(value, nextValue, cursor);
-        setCursorForValue(completed.value, completed.cursorIndex);
-        onValueChange(completed.value);
-        focusCursor(elementRef.current, completed.cursorIndex);
-        return;
-      }
-
-      const cursorIndex = getCursorIndex(elementRef.current, nextValue);
-      setCursorForValue(nextValue, cursorIndex);
-      onValueChange(nextValue);
-    },
-    [cursor, elementRef, onValueChange, setCursorForValue, value],
-  );
-
-  return {
-    handleValueChange,
-    open: showSuggestions && suggestions.length > 0,
-    setCursorForValue,
-    setShowSuggestions,
-    suggestions,
-    updateCursor,
-  };
-}
@@ -66,10 +66,7 @@ export default function ReportSettings() {
            </thead>
            <tbody>
              {combinedReport.length === 0 && (
-                <Panel.TableEmpty
-                  title='No report data yet'
-                  description='Reports are generated as you run through the show, comparing scheduled times against what actually happened.'
-                />
+                <Panel.TableEmpty label='Reports are generated when running through the show.' />
              )}

              {combinedReport.map((entry) => {
@@ -1,8 +1,7 @@
-import { OntimeView, URLPreset } from 'ontime-types';
+import { URLPreset } from 'ontime-types';
 import { useState } from 'react';
 import { IoAdd, IoOpenOutline, IoPencil, IoTrash } from 'react-icons/io5';

-import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
 import Info from '../../../../common/components/info/Info';
@@ -23,27 +22,16 @@ const urlPresetsDocs = 'https://docs.getontime.no/features/url-presets/';

 export default function URLPresets() {
  const [formState, setFormState] = useState<FormState>({ isOpen: false, preset: undefined });
-  const [actionError, setActionError] = useState<string | null>(null);
  const { data, status } = useUrlPresets();
-  const { updatePreset, deletePreset, isMutating } = useUpdateUrlPreset();
+  const { deletePreset, isMutating } = useUpdateUrlPreset();

  const openNewForm = () => setFormState({ isOpen: true });
  const openEditForm = (preset: URLPreset) => setFormState({ isOpen: true, preset });
  const closeForm = () => setFormState({ isOpen: false, preset: undefined });

-  const persistPreset = async (preset: URLPreset) => {
-    setActionError(null);
-    try {
-      await updatePreset(preset.alias, preset);
-    } catch (error) {
-      setActionError(maybeAxiosError(error));
-    }
-  };
-
  return (
    <Panel.Section>
      <Panel.Card>
-        {formState.isOpen && <URLPresetForm urlPreset={formState.preset} onClose={closeForm} />}
        <Panel.SubHeader>
          URL presets
          <Button onClick={openNewForm}>
@@ -64,47 +52,23 @@ export default function URLPresets() {
        </Panel.Section>
        <Panel.Section>
          <Panel.Loader isLoading={status === 'pending'} />
-          {actionError && <Panel.Error>{actionError}</Panel.Error>}
+          {formState.isOpen && <URLPresetForm urlPreset={formState.preset} onClose={closeForm} />}
          <Panel.Table>
            <thead>
              <tr>
                <th>Enabled</th>
-                <th>Show in nav</th>
                <th>Target view</th>
                <th>Alias</th>
                <th />
              </tr>
            </thead>
            <tbody>
-              {data.length === 0 && (
-                <Panel.TableEmpty
-                  title='No URL presets yet'
-                  description='A preset gives one of your views a short, memorable address, with all of its options baked in.'
-                  action={
-                    <Button variant='primary' onClick={openNewForm}>
-                      Create preset <IoAdd />
-                    </Button>
-                  }
-                />
-              )}
+              {data.length === 0 && <Panel.TableEmpty handleClick={openNewForm} />}
              {data.map((preset, index) => {
-                const isCuesheet = preset.target === OntimeView.Cuesheet;
                return (
                  <tr key={preset.alias}>
                    <td>
-                      <Switch
-                        checked={preset.enabled}
-                        onCheckedChange={(enabled) => persistPreset({ ...preset, enabled })}
-                        disabled={isMutating}
-                        aria-label='Toggle preset enabled'
-                      />
-                    </td>
-                    <td>
-                      <Switch
-                        checked={preset.displayInNav}
-                        onCheckedChange={(checked) => persistPreset({ ...preset, displayInNav: checked })}
-                        disabled={isMutating || isCuesheet}
-                      />
+                      <Switch defaultChecked={preset.enabled} onCheckedChange={() => {}} />
                    </td>
                    <td>
                      <Tag>{preset.target}</Tag>
@@ -1,18 +1,17 @@
 import { OntimeView, OntimeViewPresettable, URLPreset } from 'ontime-types';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';

 import { maybeAxiosError, unwrapError } from '../../../../../common/api/utils';
 import Button from '../../../../../common/components/buttons/Button';
 import Input from '../../../../../common/components/input/input/Input';
 import Textarea from '../../../../../common/components/input/textarea/Textarea';
-import Modal from '../../../../../common/components/modal/Modal';
 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 CuesheetLinkOptions, { CuesheetPermissionValues } from '../../../../sharing/composite/CuesheetLinkOptions';
 import * as Panel from '../../../panel-utils/PanelUtils';

 import style from './URLPresetForm.module.scss';
@@ -28,14 +27,11 @@ const targetOptions: SelectOption<OntimeViewPresettable>[] = [
  { value: OntimeView.ProjectInfo, label: 'Project Info' },
 ];

-const formId = 'url-preset-form';
-
 const defaultValues: URLPreset = {
  alias: '',
  target: OntimeView.Timer,
  search: '',
  enabled: true,
-  displayInNav: false,
 };

 interface URLPresetFormProps {
@@ -65,42 +61,12 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
  });
  const urlRef = useRef<HTMLInputElement>(null);

-  // Cuesheet read/write permissions live outside react-hook-form
-  const initialPermissions = useRef<CuesheetPermissionValues>({
-    read: urlPreset?.options?.read ?? 'full',
-    write: urlPreset?.options?.write ?? 'full',
-  });
-  const [cuesheetPermissions, setCuesheetPermissions] = useState<CuesheetPermissionValues>(initialPermissions.current);
-
-  // update initial permissions on mount
-  useEffect(() => {
-    initialPermissions.current = {
-      read: urlPreset?.options?.read ?? 'full',
-      write: urlPreset?.options?.write ?? 'full',
-    };
-    setCuesheetPermissions(initialPermissions.current);
-    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps -- run on mount
-  }, []);
-
-  const isEditingCuesheet = urlPreset && urlPreset.target === OntimeView.Cuesheet;
-  const isCuesheet = watch('target') === OntimeView.Cuesheet;
-  const permissionsDirty =
-    isCuesheet &&
-    (cuesheetPermissions.read !== initialPermissions.current.read ||
-      cuesheetPermissions.write !== initialPermissions.current.write);
-  const noReadAccess = isCuesheet && cuesheetPermissions.read === '-';
-
  const setupSubmit = async (data: URLPreset) => {
    try {
-      // Preserve / apply cuesheet permissions, which are not part of the form fields
-      const payload: URLPreset =
-        data.target === OntimeView.Cuesheet
-          ? { ...data, target: OntimeView.Cuesheet, options: cuesheetPermissions }
-          : data;
      if (urlPreset) {
-        await updatePreset(urlPreset.alias, payload);
+        await updatePreset(urlPreset.alias, data);
      } else {
-        await addPreset(payload);
+        await addPreset(data);
      }
      onClose();
    } catch (error) {
@@ -108,7 +74,6 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
    }
  };

-  // focus on alias when the form opens
  useEffect(() => {
    setFocus('alias');
  }, [setFocus]);
@@ -136,101 +101,73 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
  };

  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      showBackdrop
-      showCloseButton
-      size='compact'
-      title={urlPreset ? 'Edit URL preset' : 'Create URL preset'}
-      bodyElements={
-        <form id={formId} onSubmit={handleSubmit(setupSubmit)} className={style.column}>
-          <input hidden name='enabled' value='true' />
+    <Panel.Indent
+      as='form'
+      onSubmit={handleSubmit(setupSubmit)}
+      onKeyDown={(event) => preventEscape(event, onClose)}
+      className={style.column}
+    >
+      <input hidden name='enabled' value='true' />

-          <div>1. Enter URL and let Ontime generate the preset options</div>
+      <div>1. Enter URL and let Ontime generate the preset options</div>
+      <Panel.InlineElements>
+        <div>
+          <Panel.Description>Alias</Panel.Description>
+          <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>
          <Panel.InlineElements>
-            <div>
-              <Panel.Description>Alias</Panel.Description>
-              <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>
-              <Panel.InlineElements>
-                <Input placeholder='Paste URL' fluid ref={urlRef} disabled={isEditingCuesheet} />
-                <Button onClick={generateOptions} disabled={isEditingCuesheet}>
-                  Generate
-                </Button>
-              </Panel.InlineElements>
-            </div>
+            <Input placeholder='Paste URL' fluid ref={urlRef} />
+            <Button onClick={generateOptions}>Generate</Button>
          </Panel.InlineElements>
-          {errors.alias?.message && <Panel.Error>{errors.alias.message}</Panel.Error>}
-          {!isEditingCuesheet && (
-            <>
-              <div>
-                {enDash} or {enDash}
-              </div>
-              <div>2. Choose a view and its parameters</div>
-              <div>
-                <Panel.Description>Target</Panel.Description>
-                <Select
-                  options={targetOptions}
-                  {...register('target', { required: 'Target is required' })}
-                  value={watch('target')}
-                  onValueChange={(value: OntimeViewPresettable | null) => {
-                    if (value === null) return;
-                    setValue('target', value, { shouldDirty: true });
-                  }}
-                />
-              </div>
-              <div>
-                <Panel.Description>Parameters</Panel.Description>
-                <Textarea
-                  fluid
-                  rows={3}
-                  {...register('search', {
-                    validate: validateParams,
-                  })}
-                />
-                <Panel.Error>{errors.search?.message}</Panel.Error>
-              </div>
-            </>
-          )}
-
-          {isCuesheet && (
-            <div>
-              <Panel.Description>Permissions</Panel.Description>
-              <CuesheetLinkOptions
-                initialRead={initialPermissions.current.read}
-                initialWrite={initialPermissions.current.write}
-                onChange={setCuesheetPermissions}
-              />
-            </div>
-          )}
-        </form>
-      }
-      footerElements={
-        <>
-          <Panel.Error>{errors.root?.message}</Panel.Error>
+        </div>
+      </Panel.InlineElements>
+      {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>
+        <Select
+          options={targetOptions}
+          {...register('target', { required: 'Target is required' })}
+          value={watch('target')}
+          onValueChange={(value: OntimeViewPresettable | null) => {
+            if (value === null) return;
+            setValue('target', value, { shouldDirty: true });
+          }}
+        />
+      </div>
+      <div>
+        <Panel.Description>Parameters</Panel.Description>
+        <Textarea
+          fluid
+          rows={3}
+          {...register('search', {
+            validate: validateParams,
+          })}
+        />
+        <Panel.Error>{errors.search?.message}</Panel.Error>
+      </div>
+      <div>
+        <Panel.Error>{errors.root?.message}</Panel.Error>
+        <Panel.InlineElements align='end'>
          <Button onClick={onClose}>Cancel</Button>
-          <Button
-            variant='primary'
-            type='submit'
-            form={formId}
-            disabled={!isValid || (!isDirty && !permissionsDirty) || noReadAccess}
-            loading={isSubmitting || isMutating}
-          >
+          <Button variant='primary' type='submit' disabled={!isValid || !isDirty} loading={isSubmitting || isMutating}>
            Save
          </Button>
-        </>
-      }
-    />
+        </Panel.InlineElements>
+      </div>
+    </Panel.Indent>
  );
 }
@@ -13,30 +13,27 @@ import * as Panel from '../../panel-utils/PanelUtils';
 import CustomFieldEntry from './composite/CustomFieldEntry';
 import CustomFieldForm from './composite/CustomFieldForm';

-type CustomFieldEntity = CustomField & { key: CustomFieldKey };
-
-type FormState = {
-  isOpen: boolean;
-  field?: CustomFieldEntity;
-};
-
 export default function CustomFieldSettings() {
  const { data, refetch } = useCustomFields();
-  const [formState, setFormState] = useState<FormState>({ isOpen: false, field: undefined });
+  const [isAdding, setIsAdding] = useState(false);

-  const openNewForm = () => setFormState({ isOpen: true });
-  const openEditForm = (field: CustomFieldEntity) => setFormState({ isOpen: true, field });
-  const closeForm = () => setFormState({ isOpen: false, field: undefined });
+  const handleInitiateCreate = () => {
+    setIsAdding(true);
+  };

-  const handleSubmit = async (customField: CustomField) => {
-    const editing = formState.field;
-    if (editing) {
-      await editCustomField(editing.key, customField);
-    } else {
-      await postCustomField(customField);
-    }
+  const handleCancel = () => {
+    setIsAdding(false);
+  };
+
+  const handleCreate = async (customField: CustomField) => {
+    await postCustomField(customField);
+    refetch();
+    setIsAdding(false);
+  };
+
+  const handleEditField = async (key: CustomFieldKey, customField: CustomField) => {
+    await editCustomField(key, customField);
    refetch();
-    closeForm();
  };

  const handleDelete = async (key: CustomFieldKey) => {
@@ -48,24 +45,12 @@ export default function CustomFieldSettings() {
    }
  };

-  const entries = Object.entries(data);
-
  return (
    <Panel.Section>
      <Panel.Card>
-        {formState.isOpen && (
-          <CustomFieldForm
-            onSubmit={handleSubmit}
-            onCancel={closeForm}
-            initialColour={formState.field?.colour}
-            initialLabel={formState.field?.label}
-            initialKey={formState.field?.key}
-            initialType={formState.field?.type}
-          />
-        )}
        <Panel.SubHeader>
          Custom fields
-          <Button onClick={openNewForm}>
+          <Button onClick={handleInitiateCreate}>
            New <IoAdd />
          </Button>
        </Panel.SubHeader>
@@ -81,6 +66,7 @@ export default function CustomFieldSettings() {
          </Info>
        </Panel.Section>
        <Panel.Section>
+          {isAdding && <CustomFieldForm onSubmit={handleCreate} onCancel={handleCancel} />}
          <Panel.Table>
            <thead>
              <tr>
@@ -92,18 +78,7 @@ export default function CustomFieldSettings() {
              </tr>
            </thead>
            <tbody>
-              {entries.length === 0 && (
-                <Panel.TableEmpty
-                  title='No custom fields yet'
-                  description='Custom fields add your own columns to the rundown, and can be shown in views or used in automations.'
-                  action={
-                    <Button variant='primary' onClick={openNewForm}>
-                      Create custom field <IoAdd />
-                    </Button>
-                  }
-                />
-              )}
-              {entries.map(([key, { colour, label, type }]) => {
+              {Object.entries(data).map(([key, { colour, label, type }]) => {
                return (
                  <CustomFieldEntry
                    key={key}
@@ -111,7 +86,7 @@ export default function CustomFieldSettings() {
                    colour={colour}
                    label={label}
                    type={type}
-                    onEdit={() => openEditForm({ key, colour, label, type })}
+                    onEdit={handleEditField}
                    onDelete={handleDelete}
                  />
                );
@@ -5,14 +5,11 @@ import { uploadCustomView } from '../../../../common/api/customViews';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
-import Modal from '../../../../common/components/modal/Modal';
 import * as Panel from '../../panel-utils/PanelUtils';
 import { getFileError, getSlugError, getViewUrl, maxUploadLabel } from './customViews.utils';

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

-const formId = 'custom-view-form';
-
 interface CustomViewFormProps {
  onComplete: () => void;
  onClose: () => void;
@@ -56,72 +53,62 @@ export default function CustomViewForm({ onComplete, onClose }: CustomViewFormPr
  };

  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      showBackdrop
-      showCloseButton
-      size='compact'
-      title='Upload custom view'
-      bodyElements={
-        <form id={formId} onSubmit={handleUpload} className={style.uploadForm}>
-          <input
-            ref={fileInputRef}
-            style={{ display: 'none' }}
-            type='file'
-            onChange={handleSelectFile}
-            accept='.html,text/html'
-          />
+    <Panel.Indent as='form' onSubmit={handleUpload} className={style.uploadForm}>
+      <input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type='file'
+        onChange={handleSelectFile}
+        accept='.html,text/html'
+      />

-          <div className={style.step}>
-            <div className={style.stepTitle}>1. Choose a name</div>
-            <Panel.Description>Name</Panel.Description>
-            <Input
-              value={slug}
-              onChange={(event) => {
-                setSlug(event.target.value);
-                setSlugDirty(true);
-              }}
-              placeholder='my-view'
-              aria-label='Custom view name'
-              autoCapitalize='off'
-              autoComplete='off'
-              fluid
-            />
-            <Panel.Description>
-              Use lowercase letters, numbers, and dashes. Example: <Panel.Highlight>my-view</Panel.Highlight>
-            </Panel.Description>
-            <Panel.Description>
-              Preview URL: <Panel.Highlight>{previewUrl}</Panel.Highlight>
-            </Panel.Description>
-            {slugDirty && slugError && <Panel.Error>{slugError}</Panel.Error>}
-          </div>
+      <div className={style.step}>
+        <div className={style.stepTitle}>1. Choose a name</div>
+        <Panel.Description>Name</Panel.Description>
+        <Input
+          value={slug}
+          onChange={(event) => {
+            setSlug(event.target.value);
+            setSlugDirty(true);
+          }}
+          placeholder='my-view'
+          aria-label='Custom view name'
+          autoCapitalize='off'
+          autoComplete='off'
+          fluid
+        />
+        <Panel.Description>
+          Use lowercase letters, numbers, and dashes. Example: <Panel.Highlight>my-view</Panel.Highlight>
+        </Panel.Description>
+        <Panel.Description>
+          Preview URL: <Panel.Highlight>{previewUrl}</Panel.Highlight>
+        </Panel.Description>
+        {slugDirty && slugError && <Panel.Error>{slugError}</Panel.Error>}
+      </div>

-          <div className={style.step}>
-            <div className={style.stepTitle}>2. Select index.html</div>
-            <Panel.Description>Upload file</Panel.Description>
-            <Panel.InlineElements wrap='wrap' className={style.filePicker}>
-              <Button onClick={() => fileInputRef.current?.click()}>
-                {selectedFile ? 'Replace index.html' : 'Choose index.html'}
-              </Button>
-              <span className={style.fileName}>
-                {selectedFile ? `${selectedFile.name} (${Math.ceil(selectedFile.size / 1024)} KB)` : 'No file selected'}
-              </span>
-            </Panel.InlineElements>
-            <Panel.Description>Accepted: index.html only, maximum {maxUploadLabel}.</Panel.Description>
-            {fileDirty && fileError && <Panel.Error>{fileError}</Panel.Error>}
-          </div>
-        </form>
-      }
-      footerElements={
-        <>
-          {error && <Panel.Error>{error}</Panel.Error>}
-          <Button onClick={onClose}>Cancel</Button>
-          <Button variant='primary' type='submit' form={formId} loading={isUploading} disabled={!canUpload}>
-            Upload view <IoCloudUploadOutline />
+      <div className={style.step}>
+        <div className={style.stepTitle}>2. Select index.html</div>
+        <Panel.Description>Upload file</Panel.Description>
+        <Panel.InlineElements wrap='wrap' className={style.filePicker}>
+          <Button onClick={() => fileInputRef.current?.click()}>
+            {selectedFile ? 'Replace index.html' : 'Choose index.html'}
          </Button>
-        </>
-      }
-    />
+          <span className={style.fileName}>
+            {selectedFile ? `${selectedFile.name} (${Math.ceil(selectedFile.size / 1024)} KB)` : 'No file selected'}
+          </span>
+        </Panel.InlineElements>
+        <Panel.Description>Accepted: index.html only, maximum {maxUploadLabel}.</Panel.Description>
+        {fileDirty && fileError && <Panel.Error>{fileError}</Panel.Error>}
+      </div>
+
+      {error && <Panel.Error>{error}</Panel.Error>}
+
+      <Panel.InlineElements align='end'>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant='primary' type='submit' loading={isUploading} disabled={!canUpload}>
+          Upload view <IoCloudUploadOutline />
+        </Button>
+      </Panel.InlineElements>
+    </Panel.Indent>
  );
 }
@@ -37,14 +37,13 @@ export default function CustomViews() {
  return (
    <Panel.Section>
      <Panel.Card>
-        {isUploadOpen && <CustomViewForm onComplete={handleUploadComplete} onClose={() => setIsUploadOpen(false)} />}
        <Panel.SubHeader>
          Custom views
          <Panel.InlineElements>
            <Button variant='ghosted' onClick={handleRestoreDemo} disabled={hasDemoView}>
              Restore demo
            </Button>
-            <Button onClick={() => setIsUploadOpen(true)}>
+            <Button onClick={() => setIsUploadOpen(true)} disabled={isUploadOpen}>
              New <IoAdd />
            </Button>
          </Panel.InlineElements>
@@ -64,6 +63,8 @@ export default function CustomViews() {
        <Panel.Section>
          <Panel.Loader isLoading={status === 'pending'} />

+          {isUploadOpen && <CustomViewForm onComplete={handleUploadComplete} onClose={() => setIsUploadOpen(false)} />}
+
          {actionError && <Panel.Error>{actionError}</Panel.Error>}

          <CustomViewsList
@@ -1,6 +1,5 @@
 import { CustomViewSummary } from 'ontime-types';
 import { useState } from 'react';
-import { IoCloudUploadOutline } from 'react-icons/io5';

 import { deleteCustomView } from '../../../../common/api/customViews';
 import { maybeAxiosError } from '../../../../common/api/utils';
@@ -54,17 +53,7 @@ export default function CustomViewsList({ views, onOpenUpload, onMutate, onError
          </tr>
        </thead>
        <tbody>
-          {views.length === 0 && (
-            <Panel.TableEmpty
-              title='No custom views yet'
-              description='Upload a self-contained index.html to serve your own view alongside the built-in ones.'
-              action={
-                <Button variant='primary' onClick={onOpenUpload}>
-                  Upload view <IoCloudUploadOutline />
-                </Button>
-              }
-            />
-          )}
+          {views.length === 0 && <Panel.TableEmpty handleClick={onOpenUpload} label='No custom views yet' />}
          {views.map((view, index) => (
            <CustomViewsListItem
              key={view.slug}
@@ -12,13 +12,6 @@
  gap: 1rem;
 }

-.formColumn {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
 .current {
-  // marker consumed by the shared Panel.Table active-row treatment
-  background-color: inherit;
+  background-color: $blue-1100 !important; // fighting zebra styles
 }
@@ -3,12 +3,9 @@ import { useForm } from 'react-hook-form';

 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
-import Modal from '../../../../common/components/modal/Modal';
 import { useMutateProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
 import * as Panel from '../../panel-utils/PanelUtils';

-const formId = 'new-rundown-form';
-
 type NewRundownFormState = {
  title: string;
 };
@@ -45,32 +42,22 @@ export function ManageRundownForm({ onClose }: ManageRundownForm) {
  }, [setFocus]);

  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      showBackdrop
-      showCloseButton
-      size='small'
-      title='Create rundown'
-      bodyElements={
-        <form id={formId} onSubmit={handleSubmit(createRundown)}>
-          <label>
-            <Panel.Description>Rundown title</Panel.Description>
-            <Input {...register('title')} fluid placeholder='Your rundown name' maxLength={64} />
-          </label>
-        </form>
-      }
-      footerElements={
-        <>
-          {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-          <Button variant='ghosted' disabled={isSubmitting} onClick={onClose}>
-            Cancel
-          </Button>
-          <Button type='submit' form={formId} variant='primary' disabled={isSubmitting}>
-            Create rundown
-          </Button>
-        </>
-      }
-    />
+    <Panel.Indent as='form' onSubmit={handleSubmit(createRundown)}>
+      <Panel.Section>
+        <label>
+          <Panel.Description>Rundown title</Panel.Description>
+          <Input {...register('title')} fluid placeholder='Your rundown name' />
+        </label>
+      </Panel.Section>
+      <Panel.InlineElements relation='inner' align='end'>
+        <Button variant='ghosted' disabled={isSubmitting} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button type='submit' variant='primary' disabled={isSubmitting}>
+          Create rundown
+        </Button>
+      </Panel.InlineElements>
+      {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+    </Panel.Indent>
  );
 }
@@ -153,7 +153,7 @@ export default function ManageRundowns() {
                    <tr key={id} className={cx([isLoaded && style.current])}>
                      <td>{numEntries}</td>
                      <td>
-                        {title} {isLoaded && <Tag variant='active'>Loaded</Tag>}
+                        {title} {isLoaded && <Tag>Loaded</Tag>}
                      </td>
                      <td>
                        <DropdownMenu
@@ -1,4 +1,5 @@
 import { CustomField, CustomFieldKey } from 'ontime-types';
+import { useState } from 'react';
 import { IoPencil, IoTrash } from 'react-icons/io5';

 import IconButton from '../../../../../common/components/buttons/IconButton';
@@ -6,6 +7,7 @@ import CopyTag from '../../../../../common/components/copy-tag/CopyTag';
 import Swatch from '../../../../../common/components/input/colour-input/Swatch';
 import Tag from '../../../../../common/components/tag/Tag';
 import * as Panel from '../../../panel-utils/PanelUtils';
+import CustomFieldForm from './CustomFieldForm';

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

@@ -14,12 +16,35 @@ interface CustomFieldEntryProps {
  label: string;
  fieldKey: string;
  type: CustomField['type'];
-  onEdit: () => void;
+  onEdit: (key: CustomFieldKey, patch: CustomField) => Promise<void>;
  onDelete: (key: CustomFieldKey) => Promise<void>;
 }

 export default function CustomFieldEntry(props: CustomFieldEntryProps) {
  const { colour, label, fieldKey, type, onEdit, onDelete } = props;
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleEdit = async (patch: CustomField) => {
+    await onEdit(fieldKey, patch);
+    setIsEditing(false);
+  };
+
+  if (isEditing) {
+    return (
+      <tr>
+        <td colSpan={99}>
+          <CustomFieldForm
+            onCancel={() => setIsEditing(false)}
+            onSubmit={handleEdit}
+            initialColour={colour}
+            initialLabel={label}
+            initialKey={fieldKey}
+            initialType={type}
+          />
+        </td>
+      </tr>
+    );
+  }

  return (
    <tr>
@@ -36,7 +61,7 @@ export default function CustomFieldEntry(props: CustomFieldEntryProps) {
        </CopyTag>
      </td>
      <Panel.InlineElements relation='inner' as='td'>
-        <IconButton variant='ghosted-white' aria-label='Edit entry' onClick={onEdit}>
+        <IconButton variant='ghosted-white' aria-label='Edit entry' onClick={() => setIsEditing(true)}>
          <IoPencil />
        </IconButton>
        <IconButton variant='ghosted-destructive' aria-label='Delete entry' onClick={() => onDelete(fieldKey)}>
@@ -8,15 +8,13 @@ import Button from '../../../../../common/components/buttons/Button';
 import Info from '../../../../../common/components/info/Info';
 import SwatchSelect from '../../../../../common/components/input/colour-input/SwatchSelect';
 import Input from '../../../../../common/components/input/input/Input';
-import Modal from '../../../../../common/components/modal/Modal';
 import RadioGroup from '../../../../../common/components/radio-group/RadioGroup';
 import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
+import { preventEscape } from '../../../../../common/utils/keyEvent';
 import * as Panel from '../../../panel-utils/PanelUtils';

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

-const formId = 'custom-field-form';
-
 interface CustomFieldsFormProps {
  onSubmit: (field: CustomField) => Promise<void>;
  onCancel: () => void;
@@ -87,77 +85,65 @@ export default function CustomFieldForm({
  const isEditMode = initialKey !== undefined;

  return (
-    <Modal
-      isOpen
-      onClose={onCancel}
-      showBackdrop
-      showCloseButton
-      size='compact'
-      title={isEditMode ? 'Edit custom field' : 'Create custom field'}
-      bodyElements={
-        <form id={formId} onSubmit={handleSubmit(setupSubmit)} className={style.formColumn}>
-          <Info>
-            Please note that images can quickly deteriorate your app&apos;s performance.
-            <br />
-            Prefer using small, and compressed images.
-          </Info>
-          <div>
-            <Panel.Description>Type</Panel.Description>
-            <RadioGroup
-              orientation='horizontal'
-              disabled={isEditMode}
-              onValueChange={(value) => setValue('type', value, { shouldDirty: true })}
-              value={watch('type')}
-              items={[
-                { value: 'text', label: 'Text' },
-                { value: 'image', label: 'Image' },
-              ]}
-            />
-          </div>
-          <div className={style.twoCols}>
-            <label>
-              <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>
-              {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
-              <Input
-                {...register('label', {
-                  required: { value: true, message: 'Required field' },
-                  onChange: () => setValue('key', customFieldLabelToKey(getValues('label')) ?? 'N/A'),
-                  validate: (value) => {
-                    if (value.trim().length === 0) return 'Required field';
-                    if (!checkRegex.isAlphanumericWithSpace(value))
-                      return 'Only alphanumeric characters and space are allowed';
-                    if (!isEditMode && Object.hasOwn(data, customFieldLabelToKey(value) ?? '')) {
-                      return 'Custom fields must be unique';
-                    }
-                    return true;
-                  },
-                })}
-                fluid
-              />
-            </label>
+    <Panel.Indent as='form' onSubmit={handleSubmit(setupSubmit)} onKeyDown={(event) => preventEscape(event, onCancel)}>
+      <Info>
+        Please note that images can quickly deteriorate your app&apos;s performance.
+        <br />
+        Prefer using small, and compressed images.
+      </Info>
+      <div>
+        <Panel.Description>Type</Panel.Description>
+        <RadioGroup
+          orientation='horizontal'
+          disabled={isEditMode}
+          onValueChange={(value) => setValue('type', value, { shouldDirty: true })}
+          value={watch('type')}
+          items={[
+            { value: 'text', label: 'Text' },
+            { value: 'image', label: 'Image' },
+          ]}
+        />
+      </div>
+      <div className={style.twoCols}>
+        <label>
+          <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>
+          {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
+          <Input
+            {...register('label', {
+              required: { value: true, message: 'Required field' },
+              onChange: () => setValue('key', customFieldLabelToKey(getValues('label')) ?? 'N/A'),
+              validate: (value) => {
+                if (value.trim().length === 0) return 'Required field';
+                if (!checkRegex.isAlphanumericWithSpace(value))
+                  return 'Only alphanumeric characters and space are allowed';
+                if (!isEditMode) {
+                  if (isEditMode && Object.keys(data).includes(value)) return 'Custom fields must be unique';
+                }
+                return true;
+              },
+            })}
+            fluid
+          />
+        </label>

-            <label>
-              <Panel.Description>Key (use in Integrations and API)</Panel.Description>
-              <Input {...register('key')} variant='ghosted' readOnly fluid />
-            </label>
-          </div>
-          <label>
-            <Panel.Description>Colour</Panel.Description>
-            <SwatchSelect name='colour' value={colour} handleChange={(_field, value) => handleSelectColour(value)} />
-          </label>
-        </form>
-      }
-      footerElements={
-        <>
-          {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-          <Button variant='ghosted' onClick={onCancel}>
-            Cancel
-          </Button>
-          <Button type='submit' form={formId} variant='primary' disabled={!canSubmit} loading={isSubmitting}>
-            Save
-          </Button>
-        </>
-      }
-    />
+        <label>
+          <Panel.Description>Key (use in Integrations and API)</Panel.Description>
+          <Input {...register('key')} variant='ghosted' readOnly fluid />
+        </label>
+      </div>
+      <label>
+        <Panel.Description>Colour</Panel.Description>
+        <SwatchSelect name='colour' value={colour} handleChange={(_field, value) => handleSelectColour(value)} />
+      </label>
+      {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+      <Panel.InlineElements relation='inner' align='end'>
+        <Button variant='ghosted' onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type='submit' variant='primary' disabled={!canSubmit} loading={isSubmitting}>
+          Save
+        </Button>
+      </Panel.InlineElements>
+    </Panel.Indent>
  );
 }
@@ -59,7 +59,6 @@ export default function RundownRenameForm({ onSubmit, onCancel, initialTitle }:
              return true;
            },
          })}
-          maxLength={64}
          fluid
        />
        {errors.title && <Panel.Error>{errors.title.message}</Panel.Error>}
@@ -25,13 +25,6 @@
  margin-top: 1rem;
 }

-.finishActions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
 .sourceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1,6 +1,4 @@
 import type {
-  ImportedFields,
-  RundownImportMode,
  SpreadsheetPreviewResponse,
  SpreadsheetWorksheetMetadata,
  SpreadsheetWorksheetOptions,
@@ -8,7 +6,6 @@ import type {
 import { getErrorMessage, ImportMap } from 'ontime-utils';
 import { ChangeEvent, useCallback, useRef, useState } from 'react';
 import { IoCloudOutline, IoDownloadOutline } from 'react-icons/io5';
-import { useNavigate } from 'react-router';

 import {
  getWorksheetMetadata as getExcelWorksheetMetadata,
@@ -25,7 +22,7 @@ import Info from '../../../../../common/components/info/Info';
 import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../../../common/components/modal/Modal';
 import useRundown from '../../../../../common/hooks-query/useRundown';
-import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
+import { validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
 import SheetImportEditor from './sheet-import/SheetImportEditor';
@@ -38,7 +35,6 @@ const googleSheetDocsUrl = 'https://docs.getontime.no/features/import-spreadshee
 type ActiveSource =
  | {
      kind: 'excel';
-      fileName: string;
      worksheetNames: string[];
      initialWorksheetMetadata: SpreadsheetWorksheetMetadata | null;
      closedByUser: boolean;
@@ -57,11 +53,9 @@ export default function SourcesPanel() {
  const [error, setError] = useState('');
  const [hasFile, setHasFile] = useState<'none' | 'loading' | 'done'>('none');
  const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
-  const [completedRundownTitle, setCompletedRundownTitle] = useState('');

  const { data: currentRundown } = useRundown();
-  const { applyImport } = useSpreadsheetImport();
-  const navigate = useNavigate();
+  const { importRundown } = useSpreadsheetImport();

  const fileInputRef = useRef<HTMLInputElement>(null);

@@ -80,7 +74,6 @@ export default function SourcesPanel() {
      const worksheetOptions = await uploadExcel(fileToUpload);
      setActiveSource({
        kind: 'excel',
-        fileName: fileToUpload.name,
        worksheetNames: worksheetOptions.worksheets,
        initialWorksheetMetadata: worksheetOptions.metadata,
        closedByUser: false,
@@ -104,7 +97,6 @@ export default function SourcesPanel() {
    setHasFile('none');
    setActiveSource(null);
    setError('');
-    setCompletedRundownTitle('');
  };

  const openGSheetFlow = () => {
@@ -127,41 +119,29 @@ export default function SourcesPanel() {
    }
  };

-  const handleFinished = (rundownTitle: string) => {
+  const handleFinished = () => {
    setImportFlow('finished');
    setHasFile('none');
    setActiveSource(null);
    setError('');
-    setCompletedRundownTitle(rundownTitle);
  };

-  const handleApplyImport = async (
-    preview: SpreadsheetPreviewResponse,
-    mode: RundownImportMode,
-    newRundownTitle: string,
-    providedFields: ImportedFields,
-  ) => {
-    if (mode === 'new') {
-      const title = newRundownTitle.trim() || preview.rundown.title;
-      await applyImport({ mode: 'new', rundown: { ...preview.rundown, title }, customFields: preview.customFields });
-      handleFinished(title);
-      return;
-    }
-
+  const handleApplyImport = async (preview: SpreadsheetPreviewResponse) => {
    if (!currentRundown) {
      throw new Error('No current rundown loaded');
    }

-    // override or merge into the current rundown; merge uses providedFields to know which columns
-    // the sheet supplied so matched events keep the rest (e.g. automations)
-    await applyImport({
-      mode,
-      targetRundownId: currentRundown.id,
-      rundown: preview.rundown,
-      customFields: preview.customFields,
-      providedFields,
-    });
-    handleFinished(currentRundown.title);
+    await importRundown(
+      {
+        [currentRundown.id]: {
+          ...preview.rundown,
+          id: currentRundown.id,
+          title: currentRundown.title,
+        },
+      },
+      preview.customFields,
+    );
+    handleFinished();
  };

  const loadWorksheetMetadata = useCallback(
@@ -228,13 +208,6 @@ export default function SourcesPanel() {
    if (activeSource.kind === 'excel') return 'excel';
    return `gsheet:${activeSource.sheetId}`;
  })();
-  // suggested name when importing into a new rundown: the spreadsheet file name (without extension)
-  // for Excel, or the document title for Google Sheets
-  const spreadsheetName = (() => {
-    if (!activeSource) return '';
-    if (activeSource.kind === 'excel') return removeFileExtension(activeSource.fileName);
-    return activeSource.title;
-  })();

  return (
    <Panel.Section>
@@ -294,20 +267,11 @@ export default function SourcesPanel() {
        {showCompleted && (
          <div className={style.finishSection}>
            <span className={style.finishBadge}>Import complete</span>
-            <div className={style.finishTitle}>
-              Spreadsheet data applied to {completedRundownTitle || 'your rundown'}.
-            </div>
-            <div className={style.finishDescription}>
-              Review the imported rundown in the editor or start another import.
-            </div>
-            <div className={style.finishActions}>
-              <Button variant='primary' onClick={() => navigate('/editor')}>
-                Open editor
-              </Button>
-              <Button variant='subtle-white' onClick={resetFlow}>
-                Import another
-              </Button>
-            </div>
+            <div className={style.finishTitle}>Spreadsheet data applied.</div>
+            <div className={style.finishDescription}>You can close this flow or start another import.</div>
+            <Button variant='subtle-white' onClick={resetFlow}>
+              Reset flow
+            </Button>
          </div>
        )}
        {isGSheetFlow && (
@@ -323,7 +287,6 @@ export default function SourcesPanel() {
          bodyElements={
            <SheetImportEditor
              sourceKey={sourceKey ?? 'spreadsheet'}
-              defaultRundownName={spreadsheetName}
              worksheetNames={activeSource?.worksheetNames ?? []}
              initialMetadata={activeSource?.initialWorksheetMetadata ?? null}
              loadMetadata={loadWorksheetMetadata}
@@ -1,55 +0,0 @@
-import type { RundownImportMode, SpreadsheetPreviewResponse } from 'ontime-types';
-import { isOntimeEvent, isPlayableEvent, Playback } from 'ontime-types';
-import { useEffect, useState } from 'react';
-
-import Button from '../../../../../../common/components/buttons/Button';
-import { usePlayback, useSelectedEventId } from '../../../../../../common/hooks/useSocket';
-
-interface ApplyImportButtonProps {
-  preview: SpreadsheetPreviewResponse | null;
-  mode: RundownImportMode;
-  disabled: boolean;
-  loading: boolean;
-  onApply: () => void;
-}
-
-/**
- * Apply action for the spreadsheet import.
- * Subscribes to playback state on its own so playback updates do not re-render the whole editor.
- * Requires a second click to confirm when applying would stop a running playback.
- */
-export default function ApplyImportButton({ preview, mode, disabled, loading, onApply }: ApplyImportButtonProps) {
-  const playback = usePlayback();
-  const loadedEventId = useSelectedEventId();
-
-  // the loaded (playing) event loses its playback unless it still exists as a playable event after the import
-  const loadedEntry = loadedEventId ? preview?.rundown.entries[loadedEventId] : undefined;
-  const willLoadedEventBeOverriden = !(
-    loadedEntry !== undefined &&
-    isOntimeEvent(loadedEntry) &&
-    isPlayableEvent(loadedEntry)
-  );
-
-  // applying stops playback when creating a new rundown, or when the playing event does not survive
-  const willStopPlayback = playback !== Playback.Stop && (mode === 'new' || willLoadedEventBeOverriden);
-
-  // two-step confirmation before applying an import that stops playback
-  const [confirmStop, setConfirmStop] = useState(false);
-  useEffect(() => {
-    setConfirmStop(false);
-  }, [mode, preview]);
-
-  const handleClick = () => {
-    if (willStopPlayback && !confirmStop) {
-      setConfirmStop(true);
-      return;
-    }
-    onApply();
-  };
-
-  return (
-    <Button variant='primary' onClick={handleClick} disabled={disabled} loading={loading}>
-      {willStopPlayback && confirmStop ? 'Confirm — stop playback & apply import' : 'Apply import'}
-    </Button>
-  );
-}
@@ -33,11 +33,6 @@
  white-space: nowrap;
 }

-.importModeTrigger {
-  min-width: 12rem;
-  justify-content: space-between;
-}
-
 .addColumnTrigger {
  justify-content: center;
  white-space: nowrap;
@@ -92,10 +87,6 @@
  font-weight: 600;
 }

-.toolbarWarning {
-  color: $orange-400;
-}
-
 .mappingPaneTitle {
  align-self: center;
 }
@@ -1,20 +1,10 @@
-import type {
-  ImportedFields,
-  RundownImportMode,
-  SpreadsheetPreviewResponse,
-  SpreadsheetWorksheetMetadata,
-} from 'ontime-types';
+import type { SpreadsheetPreviewResponse, SpreadsheetWorksheetMetadata } from 'ontime-types';
 import type { ImportMap } from 'ontime-utils';
-import { useMemo } from 'react';
-import { IoArrowUpOutline, IoCheckmark, IoChevronDown, IoEye, IoWarningOutline } from 'react-icons/io5';
+import { IoArrowUpOutline, IoEye } from 'react-icons/io5';

 import Button from '../../../../../../common/components/buttons/Button';
-import { DropdownMenu, DropdownMenuOption } from '../../../../../../common/components/dropdown-menu/DropdownMenu';
-import Input from '../../../../../../common/components/input/input/Input';
 import Select from '../../../../../../common/components/select/Select';
 import * as Panel from '../../../../panel-utils/PanelUtils';
-import ApplyImportButton from './ApplyImportButton';
-import { isIdColumnMapped } from './importMapUtils';
 import PreviewTable from './preview/PreviewTable';
 import SheetImportMappingPane from './SheetImportMappingPane';
 import { useSheetImportForm } from './useSheetImportForm';
@@ -23,46 +13,17 @@ import style from './SheetImportEditor.module.scss';

 interface SheetImportEditorProps {
  sourceKey: string;
-  defaultRundownName: string;
  worksheetNames: string[];
  initialMetadata: SpreadsheetWorksheetMetadata | null;
  loadMetadata: (worksheet: string) => Promise<SpreadsheetWorksheetMetadata>;
  previewImport: (importMap: ImportMap) => Promise<SpreadsheetPreviewResponse>;
-  onApply: (
-    preview: SpreadsheetPreviewResponse,
-    mode: RundownImportMode,
-    newRundownTitle: string,
-    providedFields: ImportedFields,
-  ) => Promise<void>;
+  onApply: (preview: SpreadsheetPreviewResponse) => Promise<void>;
  onCancel: () => void;
  onExport?: (importMap: ImportMap) => Promise<void>;
 }

-const importModeOptions: Array<{
-  value: RundownImportMode;
-  label: string;
-  description: string;
-}> = [
-  {
-    value: 'override',
-    label: 'Replace current rundown',
-    description: 'Spreadsheet data completely replaces current rundown',
-  },
-  {
-    value: 'merge',
-    label: 'Merge with current rundown',
-    description: 'Merge entries referencing their IDs, entries not present in spreadsheet rundown are deleted',
-  },
-  {
-    value: 'new',
-    label: 'New rundown',
-    description: 'Create a new rundown to import the data into. Loads the new rundown',
-  },
-];
-
 export default function SheetImportEditor({
  sourceKey,
-  defaultRundownName,
  worksheetNames,
  initialMetadata,
  loadMetadata,
@@ -88,16 +49,11 @@ export default function SheetImportEditor({
    isBusy,
    canPreview,
    displayError,
-    importMode,
-    setImportMode,
-    newRundownTitle,
-    setNewRundownTitle,
    handlePreviewSubmit,
    handleExportSubmit,
    handleApply,
  } = useSheetImportForm({
    sourceKey,
-    defaultRundownName,
    worksheetNames,
    initialMetadata,
    loadMetadata,
@@ -106,19 +62,6 @@ export default function SheetImportEditor({
    onExport,
  });

-  const selectedImportMode = importModeOptions.find((option) => option.value === importMode) ?? importModeOptions[0];
-  const importModeItems = useMemo<DropdownMenuOption[]>(
-    () =>
-      importModeOptions.map((option) => ({
-        type: 'item',
-        label: option.label,
-        description: option.description,
-        icon: importMode === option.value ? IoCheckmark : undefined,
-        onClick: () => setImportMode(option.value),
-      })),
-    [importMode, setImportMode],
-  );
-
  return (
    <Panel.Section as='form' id='spreadsheet-import-workspace' className={style.editor} onSubmit={handlePreviewSubmit}>
      <Panel.InlineElements align='apart' wrap='wrap' className={style.editorToolbar}>
@@ -132,16 +75,7 @@ export default function SheetImportEditor({
            }
          />
        </label>
-        {toolbarStatus && (
-          <Panel.Description>
-            {toolbarStatus.entries === '–'
-              ? 'No import preview yet'
-              : `${toolbarStatus.entries} entries · ${toolbarStatus.groups} groups · ${toolbarStatus.milestones} milestones · ${toolbarStatus.start}–${toolbarStatus.end} · ${toolbarStatus.duration}`}
-            {toolbarStatus.warnings > 0 && (
-              <span className={style.toolbarWarning}> · {toolbarStatus.warnings} warnings</span>
-            )}
-          </Panel.Description>
-        )}
+        {toolbarStatus && <Panel.Description>{toolbarStatus}</Panel.Description>}
      </Panel.InlineElements>

      <div className={style.editorBody}>
@@ -159,19 +93,13 @@ export default function SheetImportEditor({

        <section className={style.previewPane}>
          <div className={style.previewPaneHeader}>
-            <div className={style.previewPaneHeading}>
-              <span className={style.previewPaneTitle}>Import preview</span>
-            </div>
+            <span className={style.previewPaneTitle}>Import preview</span>
          </div>
          <div className={style.tableShell}>
            <PreviewTable
              preview={state.preview}
              columnLabels={columnLabels}
-              canRefresh={canPreview}
              isLoadingMetadata={isLoadingMetadata}
-              isRefreshing={state.loading === 'preview'}
-              needsPreviewRefresh={state.needsPreviewRefresh}
-              onRefresh={handlePreviewSubmit}
              worksheetHeaders={worksheetHeaders}
            />
          </div>
@@ -179,63 +107,33 @@ export default function SheetImportEditor({
      </div>

      {displayError && <Panel.Error>{displayError}</Panel.Error>}
-      {importMode === 'merge' && !isIdColumnMapped(values) && (
-        <Panel.Description tone='warning'>
-          <IoWarningOutline /> No ID column mapped — merge matches entries by ID, so it will behave like Replace. Export
-          your rundown to a spreadsheet first to keep its IDs.
-        </Panel.Description>
-      )}
-      <Panel.InlineElements align='apart' wrap='wrap' className={style.editorFooter}>
-        <Panel.InlineElements wrap='wrap'>
-          <label className={style.worksheetControl}>
-            <span className={style.worksheetLabel}>Import mode</span>
-            <DropdownMenu
-              render={<Button className={style.importModeTrigger} variant='subtle-white' />}
-              items={importModeItems}
-            >
-              {selectedImportMode.label}
-              <IoChevronDown />
-            </DropdownMenu>
-          </label>
-          {importMode === 'new' && (
-            <label className={style.worksheetControl}>
-              <span className={style.worksheetLabel}>New rundown name</span>
-              <Input
-                value={newRundownTitle}
-                onChange={(event) => setNewRundownTitle(event.target.value)}
-                placeholder={state.preview?.rundown.title || 'Imported rundown'}
-                aria-label='New rundown name'
-              />
-            </label>
-          )}
-        </Panel.InlineElements>
-        <Panel.InlineElements wrap='wrap'>
-          <Button onClick={onCancel} disabled={isBusy}>
-            Cancel
+      <Panel.InlineElements align='end' wrap='wrap' className={style.editorFooter}>
+        <Button onClick={onCancel} disabled={isBusy}>
+          Cancel
+        </Button>
+        {onExport && (
+          <Button onClick={handleExportSubmit} disabled={!canPreview} loading={state.loading === 'export'}>
+            <IoArrowUpOutline />
+            Export
          </Button>
-          {onExport && (
-            <Button onClick={handleExportSubmit} disabled={!canPreview} loading={state.loading === 'export'}>
-              <IoArrowUpOutline />
-              Export
-            </Button>
-          )}
-          <Button
-            variant={state.preview ? undefined : 'primary'}
-            onClick={handlePreviewSubmit}
-            disabled={!canPreview}
-            loading={state.loading === 'preview'}
-          >
-            <IoEye />
-            Preview import
-          </Button>
-          <ApplyImportButton
-            preview={state.preview}
-            mode={importMode}
-            disabled={!state.preview || isBusy}
-            loading={state.loading === 'apply'}
-            onApply={handleApply}
-          />
-        </Panel.InlineElements>
+        )}
+        <Button
+          variant={state.preview ? undefined : 'primary'}
+          onClick={handlePreviewSubmit}
+          disabled={!canPreview}
+          loading={state.loading === 'preview'}
+        >
+          <IoEye />
+          Preview import
+        </Button>
+        <Button
+          variant='primary'
+          onClick={handleApply}
+          disabled={!state.preview || isBusy}
+          loading={state.loading === 'apply'}
+        >
+          Apply import
+        </Button>
      </Panel.InlineElements>
    </Panel.Section>
  );
@@ -1,21 +1,15 @@
-import { beforeEach, describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest';

 import {
  builtInFieldDefs,
  convertToImportMap,
  createDefaultFormValues,
-  defaultImportMode,
  getImportWarnings,
-  getPersistedImportMode,
-  getProvidedImportFields,
  getResolvedCustomFields,
-  isIdColumnMapped,
-  persistImportMode,
 } from '../importMapUtils';

 const cueIndex = builtInFieldDefs.findIndex((field) => field.label === 'Cue');
 const titleIndex = builtInFieldDefs.findIndex((field) => field.label === 'Title');
-const idIndex = builtInFieldDefs.findIndex((field) => field.importKey === 'id');

 describe('getImportWarnings()', () => {
  it('warns when two mappings target the same spreadsheet column', () => {
@@ -134,64 +128,3 @@ describe('convertToImportMap()', () => {
    });
  });
 });
-
-describe('getProvidedImportFields()', () => {
-  it('reports the mapped built-in and custom fields the sheet supplies', () => {
-    const values = createDefaultFormValues();
-    values.builtIn[titleIndex] = { header: 'title', enabled: true };
-    values.builtIn[cueIndex] = { header: '', enabled: false };
-    values.custom = [{ ontimeName: 'ignored', importName: 'FOH/Monitor' }];
-
-    const provided = getProvidedImportFields(convertToImportMap(values));
-
-    // enabled built-in mappings are reported as event fields, disabled ones are not
-    expect(provided.event).toContain('title');
-    expect(provided.event).not.toContain('cue');
-    // the id column is only used for matching, never overwritten
-    expect(provided.event).not.toContain('id');
-    // custom fields are reported symmetrically by their resolved Ontime name
-    expect(provided.custom).toStrictEqual(['FOH Monitor']);
-  });
-});
-
-describe('isIdColumnMapped()', () => {
-  it('is true when the ID field is enabled with a header', () => {
-    // the default form maps the ID column
-    expect(isIdColumnMapped(createDefaultFormValues())).toBe(true);
-  });
-
-  it('is false when the ID field is disabled', () => {
-    const values = createDefaultFormValues();
-    values.builtIn[idIndex] = { header: 'id', enabled: false };
-    expect(isIdColumnMapped(values)).toBe(false);
-  });
-
-  it('is false when the ID field header is blank', () => {
-    const values = createDefaultFormValues();
-    values.builtIn[idIndex] = { header: '   ', enabled: true };
-    expect(isIdColumnMapped(values)).toBe(false);
-  });
-});
-
-describe('import mode persistence', () => {
-  const sourceKey = 'excel-test';
-
-  beforeEach(() => {
-    localStorage.clear();
-  });
-
-  it('defaults to override when nothing is persisted', () => {
-    expect(getPersistedImportMode(sourceKey)).toBe('override');
-    expect(defaultImportMode).toBe('override');
-  });
-
-  it('round-trips a persisted value', () => {
-    persistImportMode(sourceKey, 'merge');
-    expect(getPersistedImportMode(sourceKey)).toBe('merge');
-  });
-
-  it('falls back to the default when the persisted value is invalid', () => {
-    persistImportMode(sourceKey, 'nonsense' as never);
-    expect(getPersistedImportMode(sourceKey)).toBe('override');
-  });
-});
@@ -1,4 +1,3 @@
-import type { ImportedFields, RundownImportMode } from 'ontime-types';
 import type { ImportMap } from 'ontime-utils';

 import { makeStageKey } from '../../../../../../common/utils/localStorage';
@@ -50,16 +49,6 @@ export function createDefaultFormValues(): ImportFormValues {
  };
 }

-/**
- * Whether the mapping supplies an ID column. Merge matches entries by ID, so without one every
- * imported entry gets a fresh id and nothing can reconcile with the current rundown.
- */
-export function isIdColumnMapped(values: ImportFormValues): boolean {
-  const idIndex = builtInFieldDefs.findIndex((def) => def.importKey === 'id');
-  const field = values.builtIn[idIndex];
-  return Boolean(field?.enabled && field.header.trim());
-}
-
 function sanitiseOntimeCustomFieldLabel(importName: string): string {
  // Replace punctuation with spaces, then collapse repeated whitespace into single spaces.
  const sanitised = importName
@@ -92,24 +81,6 @@ export function getResolvedCustomFields(customFields: ImportFormValues['custom']
  });
 }

-/**
- * Returns the fields the import map supplies — the complete description of what the incoming data
- * provides, for both built-in and custom fields. A merge uses this to patch exactly these fields
- * onto a matched event and keep everything else (e.g. automations) untouched.
- * Import-map keys are OntimeEvent field names; `worksheet`/`custom` are meta and `id` is only used
- * for matching, not overwritten.
- */
-export function getProvidedImportFields(importMap: ImportMap): ImportedFields {
-  const event: string[] = [];
-  for (const [key, value] of Object.entries(importMap)) {
-    if (key === 'worksheet' || key === 'custom' || key === 'id') continue;
-    if (typeof value === 'string' && value.trim() !== '') {
-      event.push(key);
-    }
-  }
-  return { event, custom: Object.keys(importMap.custom) };
-}
-
 export function convertToImportMap(values: ImportFormValues): ImportMap {
  const custom = getResolvedCustomFields(values.custom).reduce<Record<string, string>>(
    (accumulator, { ontimeName, importName }) => {
@@ -159,12 +130,12 @@ function isPersistedFormValues(obj: unknown): obj is ImportFormValues {
 export function getPersistedImportState(sourceKey: string): { values: ImportFormValues; isPersisted: boolean } {
  const storageKey = getImportMapKey(sourceKey);
  try {
-    const persistedData = localStorage.getItem(storageKey);
-    if (!persistedData) {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) {
      return { values: createDefaultFormValues(), isPersisted: false };
    }

-    const parsed: unknown = JSON.parse(persistedData);
+    const parsed: unknown = JSON.parse(raw);
    if (isPersistedFormValues(parsed)) {
      return { values: parsed, isPersisted: true };
    }
@@ -179,32 +150,6 @@ export function getPersistedImportState(sourceKey: string): { values: ImportForm
  }
 }

-/**
- * The import mode (new / merge / override) is persisted separately from the field mapping
- * so the mapping schema guard stays untouched.
- */
-
-/** Default import mode: replace matched elements in the current rundown */
-export const defaultImportMode: RundownImportMode = 'override';
-
-function getImportModeKey(sourceKey: string) {
-  return makeStageKey(`import-mode:${sourceKey}`);
-}
-
-/** Persists the import mode for a given source */
-export function persistImportMode(sourceKey: string, mode: RundownImportMode) {
-  localStorage.setItem(getImportModeKey(sourceKey), mode);
-}
-
-/** Reads the persisted import mode for a source, falling back to the default when absent or invalid */
-export function getPersistedImportMode(sourceKey: string): RundownImportMode {
-  const persisted = localStorage.getItem(getImportModeKey(sourceKey));
-  if (persisted === 'new' || persisted === 'merge' || persisted === 'override') {
-    return persisted;
-  }
-  return defaultImportMode;
-}
-
 /**
 * Validates import mappings and generates warnings for duplicate or missing spreadsheet columns.
 */
@@ -1,8 +1,27 @@
+.emptyState {
+  height: 100%;
+  min-height: 16rem;
+  display: grid;
+  place-content: center;
+  gap: 0.35rem;
+  padding: 1.5rem;
+  text-align: center;
+}
+
+.emptyTitle {
+  color: $ui-white;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.emptyBody {
+  color: $gray-400;
+  font-size: 0.95rem;
+}
+
 .table {
  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  color: $ui-white;
+  border-collapse: collapse;
  font-size: calc(1rem - 2px);
  text-align: left;
  table-layout: auto;
@@ -15,101 +34,31 @@
  }

  th {
-    color: $gray-300;
-    font-size: 0.8rem;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
-    vertical-align: bottom;
+    font-weight: 400;
+    color: $gray-400;
+    text-transform: capitalize;
+    vertical-align: top;
    white-space: normal;
  }

  th,
  td {
-    box-sizing: border-box;
+    padding: 0.5rem;
    min-width: 8rem;
-    max-width: 20rem;
-    padding: 0.55rem 0.65rem;
-    border-bottom: 1px solid $white-10;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    white-space: nowrap;
+    vertical-align: top;
  }

-  tbody tr {
-    --entry-colour: transparent;
-    background-color: color-mix(in srgb, $gray-1300 96%, var(--entry-colour) 4%);
-    box-shadow: inset 3px 0 var(--entry-colour);
+  tr:nth-child(even) {
+    background-color: $white-1;
  }
-
-  td[data-empty='true'] {
-    color: $gray-600;
-  }
-}
-
-.rowNumber,
-.rowType {
-  position: sticky;
-  z-index: 1;
-  background-color: inherit;
 }

 .rowNumber {
-  left: 0;
-  width: 3.25rem;
-  min-width: 3.25rem !important;
-  color: $gray-400;
-  text-align: right;
+  width: 4.5rem;
+  min-width: 4.5rem;
 }

 .rowType {
-  left: 3.25rem;
-  width: 6.25rem;
-  min-width: 6.25rem !important;
-  color: $gray-400;
-  font-size: 0.8rem;
-  box-shadow: 1px 0 $white-10;
-}
-
-thead .rowNumber,
-thead .rowType {
-  z-index: 2;
-  background-color: $gray-1350;
-}
-
-.numericCell {
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-.multilineCell {
-  max-width: 30rem !important;
-  overflow-wrap: anywhere;
-  text-overflow: clip !important;
-  white-space: pre-wrap !important;
-}
-
-.eventRow {
-  .rowNumber {
-    font-variant-numeric: tabular-nums;
-  }
-}
-
-.groupRow {
-  background-color: color-mix(in srgb, $gray-1300 88%, var(--entry-colour) 12%) !important;
-  box-shadow: inset 4px 0 var(--entry-colour) !important;
-  font-weight: 600;
-
-  td {
-    min-height: 3.25rem;
-    border-top: 0.75rem solid $gray-1350;
-  }
-}
-
-.milestoneRow {
-  background-color: color-mix(in srgb, $gray-1300 93%, var(--entry-colour) 7%) !important;
-  box-shadow: inset 3px 0 var(--entry-colour) !important;
-  color: $gray-300;
-  font-style: italic;
+  width: 7rem;
+  min-width: 7rem;
 }
@@ -1,12 +1,7 @@
 import type { CustomField, CustomFieldKey, SpreadsheetPreviewResponse } from 'ontime-types';
-import { isOntimeDelay, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
-import type { CSSProperties } from 'react';
+import { isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { useMemo } from 'react';

-import Button from '../../../../../../../common/components/buttons/Button';
-import Tag from '../../../../../../../common/components/tag/Tag';
-import { getRundownMetadata } from '../../../../../../../common/utils/rundownMetadata';
-import * as Panel from '../../../../../panel-utils/PanelUtils';
 import { getCellValue } from './previewTableUtils';

 import style from './PreviewTable.module.scss';
@@ -14,85 +9,14 @@ import style from './PreviewTable.module.scss';
 interface PreviewTableProps {
  preview: SpreadsheetPreviewResponse | null;
  columnLabels: string[];
-  canRefresh: boolean;
  isLoadingMetadata: boolean;
-  isRefreshing: boolean;
-  needsPreviewRefresh: boolean;
-  onRefresh: () => void;
  worksheetHeaders: string[];
 }

-const priorityColumns = ['Title', 'Cue', 'Start', 'End', 'Duration'];
-const numericColumns = new Set(['Start', 'End', 'Duration', 'Time warning', 'Time danger']);
-const transparentColour = 'transparent';
-
-type PreviewEntry = SpreadsheetPreviewResponse['rundown']['entries'][string];
-
-function getEntryDisplay(entry: PreviewEntry, groupColour?: string) {
-  if (isOntimeGroup(entry)) {
-    return {
-      rowClassName: style.groupRow,
-      entryColour: entry.colour,
-      entryType: 'Group',
-    };
-  }
-
-  const entryColour = groupColour ?? transparentColour;
-
-  if (isOntimeMilestone(entry)) {
-    return {
-      rowClassName: style.milestoneRow,
-      entryColour,
-      entryType: 'Milestone',
-    };
-  }
-
-  if (isOntimeDelay(entry)) {
-    return {
-      rowClassName: style.eventRow,
-      entryColour,
-      entryType: 'Delay',
-    };
-  }
-
-  return {
-    rowClassName: style.eventRow,
-    entryColour,
-    entryType: 'Event',
-  };
-}
-
-function getCellClassName(label: string, value: string) {
-  if (value.includes('\n')) {
-    return style.multilineCell;
-  }
-
-  if (numericColumns.has(label)) {
-    return style.numericCell;
-  }
-
-  return undefined;
-}
-
-function getDisplayColumns(columnLabels: string[]) {
-  return [...columnLabels].sort((left, right) => {
-    const leftPriority = priorityColumns.indexOf(left);
-    const rightPriority = priorityColumns.indexOf(right);
-    return (
-      (leftPriority === -1 ? priorityColumns.length : leftPriority) -
-      (rightPriority === -1 ? priorityColumns.length : rightPriority)
-    );
-  });
-}
-
 export default function PreviewTable({
  preview,
  columnLabels,
-  canRefresh,
  isLoadingMetadata,
-  isRefreshing,
-  needsPreviewRefresh,
-  onRefresh,
  worksheetHeaders,
 }: PreviewTableProps) {
  const customFieldKeyByLabel = useMemo(() => {
@@ -100,51 +24,33 @@ export default function PreviewTable({
    return new Map(Object.entries(preview.customFields).map(([fieldId, field]) => [field.label, fieldId]));
  }, [preview]);

-  const displayColumns = useMemo(() => getDisplayColumns(columnLabels), [columnLabels]);
-
-  const previewMetadata = useMemo(() => {
-    if (!preview) return null;
-    return getRundownMetadata(preview.rundown, null);
-  }, [preview]);
-
  if (!preview) {
-    let emptyTitle = 'Preview not generated';
    let emptyContent = 'Select the fields you want to import, then click Preview import.';

    if (isLoadingMetadata) {
-      emptyTitle = 'Loading worksheet';
      emptyContent = 'Loading worksheet metadata...';
    } else if (worksheetHeaders.length === 0) {
-      emptyTitle = 'No headers found';
      emptyContent =
        'No column headers detected in this worksheet. Try a different worksheet or ensure the first row contains column headers.';
-    } else if (needsPreviewRefresh) {
-      emptyTitle = 'Preview needs updating';
-      emptyContent = 'Your column mapping changed. Preview the import again to update this table.';
    }

    return (
-      <Panel.EmptyState
-        title={emptyTitle}
-        description={emptyContent}
-        action={
-          needsPreviewRefresh && (
-            <Button variant='primary' onClick={onRefresh} disabled={!canRefresh} loading={isRefreshing}>
-              Refresh preview
-            </Button>
-          )
-        }
-      />
+      <div className={style.emptyState}>
+        <div className={style.emptyTitle}>Preview not generated</div>
+        <div className={style.emptyBody}>{emptyContent}</div>
+      </div>
    );
  }

+  let eventIndex = 0;
+
  return (
    <table className={style.table}>
      <thead>
        <tr>
          <th className={style.rowNumber}>#</th>
          <th className={style.rowType}>Type</th>
-          {displayColumns.map((label, index) => (
+          {columnLabels.map((label, index) => (
            <th key={`${label}-${index}`}>{label}</th>
          ))}
        </tr>
@@ -153,29 +59,16 @@ export default function PreviewTable({
        {preview.rundown.flatOrder.map((entryId) => {
          const entry = preview.rundown.entries[entryId];
          const isEvent = isOntimeEvent(entry);
-          const entryMetadata = previewMetadata?.[entryId];
-          const { rowClassName, entryColour, entryType } = getEntryDisplay(entry, entryMetadata?.groupColour);
+          if (isEvent) eventIndex++;
+          const hasType = isEvent || isOntimeGroup(entry) || isOntimeMilestone(entry);

          return (
-            <tr key={entryId} className={rowClassName} style={{ '--entry-colour': entryColour } as CSSProperties}>
-              <td className={style.rowNumber}>{isEvent ? entryMetadata?.eventIndex : ''}</td>
-              <td className={style.rowType}>
-                <Tag>{entryType}</Tag>
-              </td>
-              {displayColumns.map((label, colIndex) => {
-                const value = getCellValue(label, entry, customFieldKeyByLabel);
-                const cellClassName = getCellClassName(label, value);
-                return (
-                  <td
-                    key={`${entryId}-${colIndex}`}
-                    className={cellClassName}
-                    data-empty={value === ''}
-                    title={value || undefined}
-                  >
-                    {value}
-                  </td>
-                );
-              })}
+            <tr key={entryId}>
+              <td className={style.rowNumber}>{isEvent ? eventIndex : ''}</td>
+              <td className={style.rowType}>{hasType ? entry.type : ''}</td>
+              {columnLabels.map((label, colIndex) => (
+                <td key={`${entryId}-${colIndex}`}>{getCellValue(label, entry, customFieldKeyByLabel)}</td>
+              ))}
            </tr>
          );
        })}
@@ -1,13 +1,7 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import type {
-  ImportedFields,
-  RundownImportMode,
-  SpreadsheetPreviewResponse,
-  SpreadsheetWorksheetMetadata,
-} from 'ontime-types';
-import { isOntimeGroup, isOntimeMilestone } from 'ontime-types';
-import { millisToString, removeTrailingZero } from 'ontime-utils';
-import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import type { SpreadsheetPreviewResponse, SpreadsheetWorksheetMetadata } from 'ontime-types';
+import { millisToString } from 'ontime-utils';
+import { useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';

 import { maybeAxiosError } from '../../../../../../common/api/utils';
@@ -17,11 +11,8 @@ import {
  builtInFieldDefs,
  convertToImportMap,
  getImportWarnings,
-  getPersistedImportMode,
  getPersistedImportState,
-  getProvidedImportFields,
  getResolvedCustomFields,
-  persistImportMode,
  persistImportState,
 } from './importMapUtils';
 import { deriveHeaderOptionsState } from './spreadsheetImportUtils';
@@ -33,7 +24,7 @@ type ImportAction =
  | { type: 'previewSuccess'; preview: SpreadsheetPreviewResponse }
  | { type: 'applySuccess' }
  | { type: 'exportSuccess' }
-  | { type: 'clearPreview'; error?: string; needsRefresh?: boolean }
+  | { type: 'clearPreview'; error?: string }
  | { type: 'failure'; error: string }
  | { type: 'reset' };

@@ -41,14 +32,12 @@ type ImportState = {
  loading: '' | 'preview' | 'apply' | 'export';
  error: string;
  preview: SpreadsheetPreviewResponse | null;
-  needsPreviewRefresh: boolean;
 };

 const initialImportState: ImportState = {
  loading: '',
  error: '',
  preview: null,
-  needsPreviewRefresh: false,
 };

 function importReducer(state: ImportState, action: ImportAction): ImportState {
@@ -60,15 +49,15 @@ function importReducer(state: ImportState, action: ImportAction): ImportState {
    case 'startExport':
      return { ...state, loading: 'export', error: '' };
    case 'previewSuccess':
-      return { loading: '', error: '', preview: action.preview, needsPreviewRefresh: false };
+      return { loading: '', error: '', preview: action.preview };
    case 'applySuccess':
    case 'exportSuccess':
      return { ...state, loading: '' };
    case 'clearPreview':
-      return { ...state, error: action.error ?? '', preview: null, needsPreviewRefresh: action.needsRefresh ?? false };
+      return { ...state, error: action.error ?? '', preview: null };
    case 'failure': {
      if (state.loading === 'preview') {
-        return { loading: '', error: action.error, preview: null, needsPreviewRefresh: false };
+        return { loading: '', error: action.error, preview: null };
      }
      return { ...state, loading: '', error: action.error };
    }
@@ -111,23 +100,16 @@ function buildColumnLabels(values: ImportFormValues): string[] {

 interface UseSheetImportFormProps {
  sourceKey: string;
-  defaultRundownName: string;
  worksheetNames: string[];
  initialMetadata: SpreadsheetWorksheetMetadata | null;
  loadMetadata: (worksheet: string) => Promise<SpreadsheetWorksheetMetadata>;
  previewImport: (importMap: ReturnType<typeof convertToImportMap>) => Promise<SpreadsheetPreviewResponse>;
-  onApply: (
-    preview: SpreadsheetPreviewResponse,
-    mode: RundownImportMode,
-    newRundownTitle: string,
-    providedFields: ImportedFields,
-  ) => Promise<void>;
+  onApply: (preview: SpreadsheetPreviewResponse) => Promise<void>;
  onExport?: (importMap: ReturnType<typeof convertToImportMap>) => Promise<void>;
 }

 export function useSheetImportForm({
  sourceKey,
-  defaultRundownName,
  worksheetNames,
  initialMetadata,
  loadMetadata,
@@ -188,8 +170,6 @@ export function useSheetImportForm({
  const columnLabels = buildColumnLabels(values);

  const [state, dispatch] = useReducer(importReducer, initialImportState);
-  const [importMode, setImportMode] = useState<RundownImportMode>(() => getPersistedImportMode(sourceKey));
-  const [newRundownTitle, setNewRundownTitle] = useState(defaultRundownName);
  const warnings = getImportWarnings(values, headers);
  const warningCount = Object.values(warnings).filter(Boolean).length;
  const previewRef = useRef<SpreadsheetPreviewResponse | null>(null);
@@ -202,12 +182,6 @@ export function useSheetImportForm({
    dispatch({ type: 'reset' });
  }, [initialFormValues, reset]);

-  // Update import mode and rundown name if the source changes
-  useEffect(() => {
-    setImportMode(getPersistedImportMode(sourceKey));
-    setNewRundownTitle(defaultRundownName);
-  }, [sourceKey, defaultRundownName]);
-
  // Keep the worksheet selection valid if the available worksheets change underneath the form.
  useEffect(() => {
    if (worksheetNames.length === 0) return;
@@ -224,7 +198,7 @@ export function useSheetImportForm({
    const sub = watch(() => {
      if (!previewRef.current) return;
      previewRef.current = null;
-      dispatch({ type: 'clearPreview', needsRefresh: true });
+      dispatch({ type: 'clearPreview' });
    });
    return () => sub.unsubscribe();
  }, [watch]);
@@ -267,15 +241,13 @@ export function useSheetImportForm({

    try {
      dispatch({ type: 'startApply' });
-      const providedFields = getProvidedImportFields(convertToImportMap(getValues()));
-      await onApply(state.preview, importMode, newRundownTitle, providedFields);
+      await onApply(state.preview);
      persistImportState(sourceKey, getValues());
-      persistImportMode(sourceKey, importMode);
      dispatch({ type: 'applySuccess' });
    } catch (error) {
      dispatch({ type: 'failure', error: maybeAxiosError(error) });
    }
-  }, [getValues, importMode, newRundownTitle, onApply, sourceKey, state.preview]);
+  }, [getValues, onApply, sourceKey, state.preview]);

  const handleExport = useCallback(
    async (formValues: ImportFormValues) => {
@@ -300,37 +272,15 @@ export function useSheetImportForm({
  }, [append]);

  const toolbarStatus = (() => {
+    const warningText = warningCount > 0 ? ` | warnings: ${warningCount}` : '';
+
    if (!state.preview) {
-      return {
-        entries: '–',
-        groups: '–',
-        milestones: '–',
-        start: '–',
-        end: '–',
-        duration: '–',
-        warnings: warningCount,
-      };
+      return `entries: – | start: – | end: – | duration: –${warningText}`;
    }

-    const { entries, flatOrder } = state.preview.rundown;
+    const { flatOrder } = state.preview.rundown;
    const { start, end, duration } = state.preview.summary;
-    let groups = 0;
-    let milestones = 0;
-    for (const entryId of flatOrder) {
-      const entry = entries[entryId];
-      if (isOntimeGroup(entry)) groups++;
-      else if (isOntimeMilestone(entry)) milestones++;
-    }
-
-    return {
-      entries: flatOrder.length,
-      groups,
-      milestones,
-      start: removeTrailingZero(millisToString(start)),
-      end: removeTrailingZero(millisToString(end)),
-      duration: formatDuration(duration),
-      warnings: warningCount,
-    };
+    return `entries: ${flatOrder.length} | start: ${millisToString(start)} | end: ${millisToString(end)} | duration: ${formatDuration(duration)}${warningText}`;
  })();

  return {
@@ -350,10 +300,6 @@ export function useSheetImportForm({
    isBusy,
    canPreview,
    displayError,
-    importMode,
-    setImportMode,
-    newRundownTitle,
-    setNewRundownTitle,
    handlePreviewSubmit: handleSubmit(handlePreview),
    handleExportSubmit: handleSubmit(handleExport),
    handleApply,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	9a6feed49b	refactor: improve groups and time end	2026-06-28 09:08:24 +02:00
Carlos Valente	c6cf9f2bf7	fixup! refactor: add to correct section	2026-06-28 08:48:14 +02:00
Carlos Valente	2f73303554	refactor: simplify object creation	2026-06-28 08:46:11 +02:00
Carlos Valente	96943ca528	refactor: add to correct section	2026-06-28 08:45:54 +02:00
Carlos Valente	8cfffd32c7	fix: duplicate rundowns from service layer	2026-06-27 16:30:04 +02:00
Carlos Valente	24a606a246	fixup! improve linting and documentation	2026-06-27 16:27:59 +02:00
Carlos Valente	c322028821	docs	2026-06-27 16:27:59 +02:00
Carlos Valente	9f40d962ea	improve linting and documentation	2026-06-27 16:27:59 +02:00
Claude	1e851ae40d	refactor(mcp): port tools to current services with typed translation handlers - Tool handlers are now a typed map of thin translation wrappers: wire arguments are cast once at the boundary to types derived (Pick) from ontime-types, and all service calls are fully typed — a change to a service signature or domain type now fails compilation in api-mcp instead of drifting silently. No more 'as never' casts. - Entry mutations target the loaded rundown explicitly, matching the rundownId-first service signatures introduced with secondary rundowns. - Rundown create/rename/delete/duplicate call the rundown service; mcp.service.ts and its duplicated router logic are deleted. - ontime_create_entry supports all entry types (event, delay, milestone, group) and entry tools accept flag and custom field values, matching what the workflow prompts already instruct agents to do. Tool names use entry terminology consistently with the service layer. - ontime_create_project description fixed: creating a project switches to it. https://claude.ai/code/session_01V27pYyjw2PGSWy7wNtiWKj	2026-06-27 16:27:59 +02:00
Claude	2bcda2dfa4	refactor(mcp): scope bearer authentication to the MCP route Reverts the change to the shared authenticate middleware, which made every authenticated route accept Authorization: Bearer tokens. Bearer support now lives in a wrapper middleware inside api-mcp, mounted only on /mcp; all other requests fall through to the app middleware unchanged. Removing the api-mcp module restores stock auth behaviour. https://claude.ai/code/session_01V27pYyjw2PGSWy7wNtiWKj	2026-06-27 16:27:59 +02:00
Claude	e2a2ea1d24	refactor(rundown): extract rundown rename/delete/duplicate into service layer Moves the logic previously inlined in the router handlers into rundown.service.ts so other consumers (such as the MCP server) can reuse it without duplication. Status codes and error messages are unchanged. https://claude.ai/code/session_01V27pYyjw2PGSWy7wNtiWKj	2026-06-27 16:27:59 +02:00
Claude	5be596b83e	refactor(mcp): dispatch map for resources, userPrompt helper, enrich prompt guidance mcp.resources.ts: replace 6-branch if-chain with a RESOURCE_READERS dispatch map. Each resource is now a one-liner { mimeType, read } entry; handleReadResource collapses to a 3-line lookup with a single throw. mcp.prompts.ts: extract repeated message-wrapping boilerplate into userPrompt() helper, reducing each prompt from ~10 lines of structure to a single call. Enrich all four prompts with operational domain knowledge: - create_rundown_from_agenda: entry type selection (event/milestone/delay/group), timerType and endAction guidance, linkStart chain semantics, flag usage, colour conventions - bulk_edit_rundown: timeStrategy (lock-end vs lock-duration), endAction automation risk, clarified time-shift mechanics - validate_rundown: totalDelay/totalDays checks, linkStart chain validation, play-next chain disclosure, flag audit - restructure_rundown: group awareness (entries vs order arrays), insert order type, move-out vs move-in patterns https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	ab15a65585	simplify: unify 405 handlers, fix double-read in renameRundown, guard mcpClientConfig - mcp.router.ts: extract identical GET/DELETE 405 responses into methodNotAllowed - mcp.service.ts: pass the already-patched rundown object to initRundown instead of re-fetching it from the data provider - McpSection.tsx: compute mcpClientConfig only when mcpEndpointUrl is truthy https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	65ef442a9d	refactor(mcp): consolidate documentation into mcp.schema.ts Single file to update when the data model changes: - EVENT_TIMER_FIELDS and EVENT_WRITABLE_FIELDS (tool JSON schemas) moved from mcp.tools.ts - ONTIME_SCHEMA_MARKDOWN and ONTIME_DOCS_MARKDOWN moved from mcp.resources.ts - mcp.tools.ts and mcp.resources.ts now import from mcp.schema.ts - Removed inline data model notes from the agenda prompt; replaced with a reference to the ontime://schema resource - Fixed inaccurate enum values in schema (Milestone type added, TimerType/EndAction corrected to match ontime-types) https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	71a7f26493	refactor(mcp): address review — split files, fix naming, stateless router Split the monolithic mcp.router.ts into focused modules: - mcp.service.ts: coordination helpers (rundownListResponse, renameRundown, deleteRundown) - mcp.tools.ts: tool definitions (ontime_ prefix, annotation presets, shared field schemas, CHARACTER_LIMIT truncation) + handleToolCall dispatcher - mcp.prompts.ts: prompt definitions + handleGetPrompt - mcp.resources.ts: resource definitions (schema, live data, docs) + handleReadResource - mcp.server.ts: createMcpServer factory that wires the above modules - mcp.router.ts: thin stateless Express router (POST/GET405/DELETE405) Other changes per review comments: - Rename ontime_delete_event → ontime_delete_entry (entry vs event naming convention) - Remove hardcoded cue/colour prefix conventions from tool descriptions and prompts; replace with "ask the user what convention they prefer" - Remove automations tools (left for a later PR) - Add Bearer auth comment in authenticate.ts explaining the MCP use case - Extract McpSection component from FeaturePanel to isolate URL state re-renders - Update bulk_edit prompt to mention linkStart cascade behaviour - Add 405 comments explaining why GET/DELETE are not supported in stateless mode https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	b850a51204	mcp: add ontime://docs resource for documentation discoverability Exposes a curated index of docs.getontime.no topic URLs as the ontime://docs MCP resource, and adds a "Further reading" footer to ontime://schema so agents reading the data model know where to find deeper documentation. https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	0094c15da2	feat(mcp): expose rundown and schema as readable MCP resources Adds five resources so the agent can load context once per session instead of re-fetching via tools, and so it can ground its answers in Ontime's data model without guessing: - ontime://schema — markdown reference for the event/rundown/group model, time format (ms from midnight), cue conventions, colours, playback states - ontime://rundown/current — full currently-loaded rundown (JSON) - ontime://rundowns — every rundown in the project plus the loaded ID - ontime://project/info — project metadata - ontime://project/custom-fields — custom field definitions Declares the resources capability on the MCP server and registers resources/list and resources/read handlers that dispatch by URI. https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	e7d62f44e7	feat(mcp): batch rundown edits, project file management, workflow prompts Adds 8 tools and 3 prompts to cover four priority pre-production flows: build-from-agenda (batch create), bulk edit, validate, restructure. Tools: - create_events_batch, batch_update_events — avoid per-event round trips - list_projects, load_project, create_project, rename_project, duplicate_project, delete_project — project file management Prompts: - bulk_edit_rundown — teaches the agent to use batch_update_events vs per-event updates based on whether fields are shared - validate_rundown — pre-show checks for cue gaps, overlaps, missing fields, duration anomalies - restructure_rundown — teaches reorder_event sequencing - create_rundown_from_agenda — updated to use create_events_batch Safety: - Mutating tools now attach a playback warning to their response when timer state is not stopped, so the agent can relay it to the user - create_automation description mentions the in-app test button https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	3c8d7e51f5	chore: ignore .claude/ metadata directory https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	3da3950fce	fix(mcp): session ID mismatch, rename_rundown data loss, DELETE status - Session ID: deterministic UUID passed to sessionIdGenerator so the map key matches the mcp-session-id header sent to clients; previously two independent randomUUID() calls produced different IDs, breaking all post-initialize requests - rename_rundown: use spread { ...rundown, title } instead of narrow structuredClone cast that silently stripped order/entries/revision - DELETE /mcp: return 204 No Content instead of 200 with body https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00
Claude	ac3694ce4d	feat: add MCP server for AI agent integration Adds a Streamable HTTP MCP server at /mcp that exposes 19 tools covering rundown entries, rundown management, runtime state, project info, automations, and custom fields. Includes Bearer token auth support and a UI card in Settings > Sharing showing the endpoint URL and Claude Desktop config. https://claude.ai/code/session_01U24MeuUacYXeQhbX3tatEe	2026-06-27 16:25:47 +02:00