feat(network): add session status card

Display server health metrics from the unused /session endpoint:
- Connected clients count (live from useClientStore)
- Server uptime since last restart
- Last client connection time (relative)
- Last integration request time (relative)
- Server timezone
- Cloud latency (Docker only) with warning threshold

Adds useSessionStats hook with 60s refetch interval, new NetworkStatus
component as first card in Network panel, and navigation menu entries
for Server status and Network interfaces sections.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NrhcEgY8mqaxZi8veMPrrx

apps/cli/package.json

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

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "4.13.0-beta.1",
+  "version": "4.11.0",
   "private": true,
   "type": "module",
   "dependencies": {

apps/client/src/AppRouter.tsx

@@ -20,7 +20,6 @@ const Backstage = lazy(() => import('./views/backstage/Backstage'));
 const StudioClock = lazy(() => import('./views/studio/Studio'));
 const Timeline = lazy(() => import('./views/timeline/TimelinePage'));
 const ProjectInfo = lazy(() => import('./views/project-info/ProjectInfo'));
-const Teleprompter = lazy(() => import('./views/teleprompter/Teleprompter'));
 
 const Editor = lazy(() => import('./views/editor/ProtectedEditor'));
 const Cuesheet = lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
@@ -96,15 +95,6 @@ export default function AppRouter() {
             </ViewLoader>
           }
         />
-        <Route
-          path='teleprompter'
-          element={
-            <ViewLoader>
-              <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSpaceHotkey />
-              <Teleprompter />
-            </ViewLoader>
-          }
-        />
         {/*/!* Protected Routes *!/*/}
         <Route path='editor' element={<Editor />} />
         <Route path='cuesheet' element={<Cuesheet />} />
@@ -175,7 +165,6 @@ const PresetViewMap: Record<OntimeViewPresettable, ComponentType> = {
   [OntimeView.StudioClock]: StudioClock,
   [OntimeView.Countdown]: Countdown,
   [OntimeView.ProjectInfo]: ProjectInfo,
-  [OntimeView.Teleprompter]: Teleprompter,
 };
 
 /**
@@ -225,14 +214,8 @@ function PresetView() {
   const Component = PresetViewMap[preset.target as OntimeViewPresettable];
   return (
     <PresetContext value={preset}>
-      <ViewLoader>
+      <ViewNavigationMenu isNavigationLocked={getIsNavigationLocked()} suppressSettings />
-        <ViewNavigationMenu
+      {Component ? <Component /> : <NotFound />}
-          isNavigationLocked={getIsNavigationLocked()}
-          suppressSettings
-          suppressSpaceHotkey={preset.target === OntimeView.Teleprompter}
-        />
-        {Component ? <Component /> : <NotFound />}
-      </ViewLoader>
     </PresetContext>
   );
 }

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

@@ -15,6 +15,7 @@ export const RUNDOWN = ['rundown'];
 export const CURRENT_RUNDOWN_QUERY_KEY = ['rundown', 'current'];
 export const getRundownQueryKey = (rundownId: string) => ['rundown', rundownId];
 export const RUNTIME = ['runtimeStore'];
+export const SESSION_STATS = ['sessionStats'];
 export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const CSS_OVERRIDE = ['cssOverride'];

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

@@ -176,13 +176,6 @@ export async function postCloneEntry(
   return axios.post(`${rundownPath}/${rundownId}/clone/${entryId}`, options);
 }
 
-/**
- * HTTP request events duration to fit inside the group target
- */
-export async function requestFitGroupTarget(rundownId: RundownId, eventId: EntryId): Promise<AxiosResponse<Rundown>> {
-  return axios.post(`${rundownPath}/${rundownId}/${eventId}/fit-group-duration`);
-}
-
 /**
  * HTTP request for grouping a list of entries into a group
  */

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

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

apps/client/src/common/components/client-modal/RedirectClientModal.module.scss

@@ -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;
+  grid-template-areas:
-  align-items: center;
+    'label label'
-  gap: 0.75rem;
+    'input btn';
+  grid-template-columns: 1fr auto;
+  column-gap: 0.5rem;
 }
 
 .redirect {
-  margin-left: auto;
+  grid-area: btn;
 }
 
 .label {
-  color: $gray-200;
+  color: $label-gray;
-  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;
-  }
 }

apps/client/src/common/components/client-modal/RedirectClientModal.tsx

@@ -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,11 +8,14 @@ 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';
 
+/** the first navigator view, used as the initial value of the view select */
+const defaultView = `/${navigatorConstants[0].url}`;
+
 interface RedirectClientModalProps {
   id: string;
   name: string;
@@ -26,7 +28,7 @@ interface RedirectClientModalProps {
 export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onClose }: RedirectClientModalProps) {
   const { data } = useUrlPresets();
   const [path, setPath] = useState(currentPath);
-  const [selected, setSelected] = useState('/');
+  const [selected, setSelected] = useState(defaultView);
 
   const { setRedirect } = setClientRemote;
 
@@ -45,7 +47,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,68 +69,55 @@ export function RedirectClientModal({ id, isOpen, name, currentPath, origin, onC
       bodyElements={
         <>
           <Info>
-            <Info.Body>
+            Remotely redirect the client to a different URL. <br />
-              Remotely redirect the client to a different URL. Choose a custom path or select a URL Preset.
+            Either by entering a custom path or selecting a URL Preset.
-            </Info.Body>
+            <br />
-            <Info.Footer>
+            <br />
-              <ExternalLink href={settingsUrl}>Manage URL Presets</ExternalLink>
+            <AppLink search='settings=sharing__presets'>Manage URL Presets</AppLink>
-            </Info.Footer>
           </Info>
-          <section className={style.section}>
+          <div className={style.inlineEntry}>
-            <div className={style.sectionHeader}>
+            <span className={style.label}>Enter custom path</span>
-              <span className={style.label}>Enter custom path</span>
+            <label className={style.textEntry}>
-              <span className={style.description}>Type the path the client should open.</span>
+              {origin}
-            </div>
+              <Input placeholder='eg. /timer' fluid value={path} onChange={(event) => setPath(event.target.value)} />
-            <div className={style.inlineEntry}>
+            </label>
-              <label className={style.textEntry}>
+            <Button
-                <span className={style.origin}>{origin}</span>
+              variant='primary'
-                <Input placeholder='eg. /timer' fluid value={path} onChange={(event) => setPath(event.target.value)} />
+              aria-label='Redirect'
-              </label>
+              disabled={path === currentPath || path === ''}
-              <Button
+              className={style.redirect}
-                variant='primary'
+              onClick={() => handleRedirect(path)}
-                aria-label='Redirect to custom path'
+            >
-                disabled={path === currentPath || path === ''}
+              Redirect
-                className={style.redirect}
+              <IoArrowForward />
-                onClick={() => handleRedirect(path)}
+            </Button>
-              >
-                Redirect
-                <IoArrowForward />
-              </Button>
-            </div>
-          </section>
-          <div className={style.separator} role='separator'>
-            <span>Or</span>
           </div>
-          <section className={style.section}>
+          <div>
-            <div className={style.sectionHeader}>
+            <span className={style.label}>Select View or URL Preset</span>
-              <span className={style.label}>Select view or URL Preset</span>
-              <span className={style.description}>Choose from the available destinations.</span>
-            </div>
             <div className={style.inlineEntry}>
               <label className={style.textEntry}>
-                <span className={style.origin}>{origin}</span>
+                {origin}
                 <Select
                   fluid
                   options={viewOptions}
-                  defaultValue={viewOptions[0].value}
+                  defaultValue={defaultView}
                   onValueChange={(value) => {
                     if (value === null) return;
                     setSelected(value);
                   }}
-                  disabled={enabledPresets.length === 0}
                 />
               </label>
               <Button
                 variant='primary'
                 aria-label='Redirect to preset'
                 className={style.redirect}
-                disabled={enabledPresets.length === 0 || selected === '/'}
+                disabled={selected === currentPath}
                 onClick={() => handleRedirect(selected)}
               >
                 Redirect <IoArrowForward />
               </Button>
             </div>
-          </section>
+          </div>
         </>
       }
     />

apps/client/src/common/components/client-modal/RenameClientModal.module.scss

@@ -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;
-}

apps/client/src/common/components/client-modal/RenameClientModal.tsx

@@ -2,11 +2,10 @@ import { useState } from 'react';
 
 import Button from '../../../common/components/buttons/Button';
 import { setClientRemote } from '../../hooks/useSocket';
+import { isKeyEnter } from '../../utils/keyEvent';
 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 +32,20 @@ export function RenameClientModal({ id, name: currentName = '', isOpen, onClose
       isOpen={isOpen}
       title={`Rename Client: ${currentName}`}
       showCloseButton
-      showBackdrop
       onClose={onClose}
       bodyElements={
-        <div className={style.form}>
+        <Input
-          <label className={style.label}>
+          height='large'
-            Client name
+          placeholder='New name'
-            <Input
+          autoFocus
-              height='large'
+          value={name}
-              fluid
+          onChange={(event) => setName(event.target.value)}
-              autoComplete='off'
+          onKeyDown={(event) => {
-              placeholder='New name'
+            if (isKeyEnter(event) && canSubmit) {
-              value={name}
+              handleRename();
-              onChange={(event) => setName(event.target.value)}
+            }
-            />
+          }}
-          </label>
+        />
-        </div>
       }
       footerElements={
         <>

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

@@ -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;
+  max-height: min(80vh, 600px);
-  min-height: 0;
   overflow-y: auto;
 }
 
@@ -58,5 +53,4 @@
   align-items: center;
   justify-content: end;
   gap: 1rem;
-  flex-wrap: wrap;
 }

apps/client/src/common/components/keyboard-shortcuts/KeyboardShortcuts.module.scss

@@ -1,66 +0,0 @@
-.groups {
-  display: grid;
-  gap: 0.875rem;
-}
-
-.group {
-  h3 {
-    margin: 0 0 0.375rem;
-    color: var(--shortcut-title-color, currentColor);
-    font-size: calc(1rem - 3px);
-    font-weight: 600;
-    text-transform: uppercase;
-  }
-}
-
-.list {
-  display: grid;
-  gap: 0.25rem;
-}
-
-.row {
-  min-height: 1.625rem;
-  display: grid;
-  grid-template-columns: minmax(10rem, 1fr) minmax(0, auto);
-  align-items: center;
-  gap: 0.75rem;
-  font-size: calc(1rem - 3px);
-}
-
-.label {
-  min-width: 0;
-  line-height: 1.2;
-  color: var(--shortcut-label-color, currentColor);
-}
-
-.keys {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 0.25rem 0.5rem;
-  min-width: 0;
-}
-
-.combo {
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 0.25rem 0;
-}
-
-.separator {
-  color: var(--shortcut-separator-color, currentColor);
-  font-size: calc(1rem - 5px);
-}
-
-@media (max-width: 680px) {
-  .row {
-    grid-template-columns: 1fr;
-    gap: 0.25rem;
-  }
-
-  .keys {
-    justify-content: flex-start;
-  }
-}

apps/client/src/common/components/keyboard-shortcuts/KeyboardShortcuts.tsx

@@ -1,42 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-import { cx } from '../../utils/styleUtils';
-import Kbd from '../kbd/Kbd';
-
-import style from './KeyboardShortcuts.module.scss';
-
-export function ShortcutGroups({ className, children }: PropsWithChildren<{ className?: string }>) {
-  return <div className={cx([style.groups, className])}>{children}</div>;
-}
-
-export function ShortcutGroup({ title, children }: PropsWithChildren<{ title: string }>) {
-  return (
-    <section className={style.group}>
-      <h3>{title}</h3>
-      <div className={style.list}>{children}</div>
-    </section>
-  );
-}
-
-export function Shortcut({ label, children }: PropsWithChildren<{ label: string }>) {
-  return (
-    <div className={style.row}>
-      <span className={style.label}>{label}</span>
-      <span className={style.keys}>{children}</span>
-    </div>
-  );
-}
-
-export function Combo({ keys }: { keys: string[] }) {
-  return (
-    <span className={style.combo}>
-      {keys.map((key) => (
-        <Kbd key={key}>{key}</Kbd>
-      ))}
-    </span>
-  );
-}
-
-export function Separator() {
-  return <span className={style.separator}>/</span>;
-}

apps/client/src/common/components/link/external-link/ExternalLink.module.scss

@@ -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;
 }

apps/client/src/common/components/link/external-link/ExternalLink.tsx

@@ -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}
+      {children} <IoOpenOutline style={{ fontSize: '1em' }} />
-      <HiArrowLongRight className={style.icon} />
     </a>
   );
 }

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

@@ -4,13 +4,10 @@
   left: 50%;
   transform: translateX(-50%);
 
-  box-sizing: border-box;
+  padding-inline: 1rem;
-  width: min(880px, 90vw);
+  min-width: min(880px, 90vw);
   min-height: min(200px, 10vh);
-  max-height: calc(90vh - 1rem);
+  max-width: min(1200px, 90vw);
-
-  display: flex;
-  flex-direction: column;
 
   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);
+  min-width: min(1280px, 96vw);
-  height: min(88vh, calc(96vh - 1rem));
+  max-width: min(1800px, 98vw);
-  min-height: 0;
+  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;
+  max-height: 60vh;
-  min-height: 0;
-  padding: 0.5rem 1rem;
   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;
 }

apps/client/src/common/components/modal/Modal.tsx

@@ -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 && (

apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

@@ -9,7 +9,6 @@ import './MultiPartProgressBar.scss';
 interface MultiPartProgressBar {
   now: MaybeNumber;
   complete: MaybeNumber;
-  eventId?: string | null;
   normalColor: string;
   warning?: MaybeNumber;
   warningColor: string;
@@ -25,7 +24,6 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
   const {
     now,
     complete,
-    eventId,
     normalColor,
     warning,
     warningColor,
@@ -37,7 +35,7 @@ export default function MultiPartProgressBar(props: MultiPartProgressBar) {
     className = '',
   } = props;
 
-  const percentRemaining = 100 - useAnimatedProgress(now, complete, eventId);
+  const percentRemaining = 100 - useAnimatedProgress(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;

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

@@ -1,8 +1,8 @@
-import { type HotkeyItem, useDisclosure, useHotkeys } from '@mantine/hooks';
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import { memo } from 'react';
 import { useSearchParams } from 'react-router';
 
-import { hasCustomParams } from '../../stores/savedViewParams';
+import { hasCustomParams, useSavedViewParams } from '../../stores/savedViewParams';
 import { useViewParamsEditorStore } from '../view-params-editor/viewParamsEditor.store';
 import FloatingNavigation from './floating-navigation/FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
@@ -13,32 +13,25 @@ interface ViewNavigationMenuProps {
   isNavigationLocked?: boolean;
   /** prevent showing settings */
   suppressSettings?: boolean;
-  suppressSpaceHotkey?: boolean;
 }
 
 export default memo(ViewNavigationMenu);
-function ViewNavigationMenu({ isNavigationLocked, suppressSettings, suppressSpaceHotkey }: ViewNavigationMenuProps) {
+function ViewNavigationMenu({ isNavigationLocked, suppressSettings }: ViewNavigationMenuProps) {
   const [isMenuOpen, menuHandler] = useDisclosure();
   const { open: showEditFormDrawer } = useViewParamsEditorStore();
   const [searchParams] = useSearchParams();
-  const hasSavedChanges = hasCustomParams(searchParams);
+  const savedParams = useSavedViewParams((store) => store.params);
-
+  const hasSavedChanges = hasCustomParams(searchParams) || Object.keys(savedParams).length > 0;
-  // Omitting the binding also avoids useHotkeys preventing the default action.
-  const spaceHotkey: HotkeyItem[] = suppressSpaceHotkey
-    ? []
-    : [
-        [
-          'Space',
-          () => {
-            if (isNavigationLocked) return;
-            menuHandler.toggle();
-          },
-          { preventDefault: true },
-        ],
-      ];
 
   useHotkeys([
-    ...spaceHotkey,
+    [
+      'Space',
+      () => {
+        if (isNavigationLocked) return;
+        menuHandler.toggle();
+      },
+      { preventDefault: true },
+    ],
     [
       'mod + ,',
       () => {

apps/client/src/common/components/progress-bar/ProgressBar.tsx

@@ -7,12 +7,12 @@ import './ProgressBar.scss';
 interface ProgressBarProps {
   current: MaybeNumber;
   duration: MaybeNumber;
-  eventId?: string | null;
   className?: string;
 }
 
-export default function ProgressBar({ current, duration, eventId, className }: ProgressBarProps) {
+export default function ProgressBar(props: ProgressBarProps) {
-  const progress = useAnimatedProgress(current, duration, eventId);
+  const { current, duration, className } = props;
+  const progress = useAnimatedProgress(current, duration);
 
   return (
     <div className={`progress-bar__bg ${className}`}>

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

@@ -1,43 +1,20 @@
-@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);
+    width: min(100%, 24rem);
-    margin: 0 auto -1.5rem;
+    margin-inline: auto;
-    opacity: 0.6;
+    opacity: 0.8;
   }
 
   .text {
     display: block;
     margin-inline: auto;
-    font-weight: 400;
+    font-weight: 600;
-    font-size: clamp(1rem, 1.55vw, 1.5rem);
+    font-size: 2em;
-    line-height: 1.35;
+    max-width: min(100%, 600px);
-    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;
   }
 }

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

@@ -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
+    <div className={cx([style.emptyContainer, className])} style={injectedStyles}>
-      className={cx([style.emptyContainer, variant === 'error' && style.error, className])}
-      style={injectedStyles}
-      role={variant === 'error' ? 'alert' : undefined}
-    >
       <EmptyImage className={style.empty} />
-      {variant === 'error' && <IoWarningOutline className={style.errorIcon} aria-hidden />}
       {text && <span className={style.text}>{text}</span>}
     </div>
   );

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

@@ -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;
-}

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

@@ -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>
-  );
-}

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

@@ -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-top: 5rem;
-  padding-block: 5rem;
 }

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

@@ -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>
   );
 }

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

@@ -15,4 +15,9 @@
     gap: 1rem;
     margin-top: 1em;
   }
+
+  .text {
+    font-weight: 600;
+    font-size: 2em;
+  }
 }

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

@@ -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'>

apps/client/src/common/components/tag/Tag.module.scss

@@ -11,11 +11,6 @@
   color: $ui-white;
 }
 
-.active {
-  border: 1px solid $green-700;
-  color: $green-400;
-}
-
 .warning {
   background-color: $orange-1300;
   color: $orange-300;

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

@@ -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>) {

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

@@ -49,13 +49,7 @@ export default function ParamInput({ paramField }: ParamInputProps) {
   }
 
   if (type === 'boolean') {
-    const paramValue = searchParams.get(id);
+    return <ControlledSwitch id={id} initialValue={isStringBoolean(searchParams.get(id)) ?? defaultValue} />;
-    return (
-      <ControlledSwitch
-        id={id}
-        initialValue={paramValue === null ? Boolean(defaultValue) : isStringBoolean(paramValue)}
-      />
-    );
   }
 
   if (type === 'number') {

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

@@ -228,41 +228,11 @@ describe('getURLSearchParamsFromObj()', () => {
       },
     ];
     const params = {
+      bool1: 'off',
       bool2: 'on',
     };
     const result = getURLSearchParamsFromObj(params, mockOptionsWithBooleans);
     expect(result.get('bool1')).toBe('false');
     expect(result.get('bool2')).toBe('true');
   });
-
-  it('omits booleans which match their default', () => {
-    const mockOptionsWithBooleans: ViewOption[] = [
-      {
-        title: OptionTitle.StyleOverride,
-        options: [
-          {
-            id: 'onByDefault',
-            title: 'onByDefault',
-            description: 'On by default',
-            type: 'boolean',
-            defaultValue: true,
-          },
-          {
-            id: 'offByDefault',
-            title: 'offByDefault',
-            description: 'Off by default',
-            type: 'boolean',
-            defaultValue: false,
-          },
-        ],
-      },
-    ];
-
-    const untouched = getURLSearchParamsFromObj({ onByDefault: 'on' }, mockOptionsWithBooleans);
-    expect(untouched.toString()).toBe('');
-
-    const flipped = getURLSearchParamsFromObj({ offByDefault: 'on' }, mockOptionsWithBooleans);
-    expect(flipped.get('onByDefault')).toBe('false');
-    expect(flipped.get('offByDefault')).toBe('true');
-  });
 });

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

@@ -155,14 +155,6 @@ export function getURLSearchParamsFromObj(paramsObj: ViewParamsObj, paramFields:
     });
   });
 
-  // Unchecked checkboxes are absent from FormData. Persist false when true is the default.
-  metadata.booleanFields.forEach((id) => {
-    if (id in paramsObj) return;
-    if (metadata.defaultValues[id] !== 'false') {
-      addUniqueParam(id, 'false');
-    }
-  });
-
   // Then process user-provided values
   Object.entries(paramsObj).forEach(([id, value]) => {
     if (typeof value === 'string' && value.length) {

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

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import { SessionStats } from 'ontime-types';
+
+import { queryRefetchInterval } from '../../ontimeConfig';
+import { SESSION_STATS } from '../api/constants';
+import { getSessionStats } from '../api/session';
+
+export default function useSessionStats() {
+  const { data, status, isError, refetch } = useQuery<SessionStats>({
+    queryKey: SESSION_STATS,
+    queryFn: ({ signal }) => getSessionStats({ signal }),
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchInterval,
+  });
+
+  return { data, status, isError, refetch };
+}

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

@@ -1,34 +1,26 @@
-import { EntryId, MaybeNumber, Playback } from 'ontime-types';
+import { MaybeNumber, Playback } from 'ontime-types';
 import { useEffect, useRef, useState } from 'react';
 
 import { getProgress } from '../utils/getProgress';
-import { useIsOnline, usePlayback } from './useSocket';
+import { usePlayback } from './useSocket';
 
 /**
  * Returns the live completion percentage (0–100) of a countdown, interpolated locally.
  */
-export function useAnimatedProgress(current: MaybeNumber, duration: MaybeNumber, eventId?: EntryId | null): number {
+export function useAnimatedProgress(current: MaybeNumber, duration: MaybeNumber): number {
   const playback = usePlayback();
-  const isOnline = useIsOnline();
   const isRunning = playback === Playback.Play || playback === Playback.Roll;
 
-  const baseline = useRef({ current, duration, eventId, playback, at: performance.now() });
+  const baseline = useRef({ current, at: performance.now() });
   const [, setTick] = useState(0);
-  const now = performance.now();
 
-  const hasAuthoritativeUpdate =
+  // there is only something to animate while a running timer is counting down towards 0
-    baseline.current.current !== current || // handle timer updates
+  const shouldAnimate = isRunning && current !== null && current > 0 && duration !== null;
-    baseline.current.duration !== duration || // handle duration changes
-    baseline.current.eventId !== eventId || // handle event changing
-    baseline.current.playback !== playback; // handle playback changes
 
-  if (hasAuthoritativeUpdate) {
+  // re-anchor to the authoritative value whenever the server pushes a new timer update
-    // Reset during render so an event change is reflected in this very paint.
+  useEffect(() => {
-    baseline.current = { current, duration, eventId, playback, at: now };
+    baseline.current = { current, at: performance.now() };
-  }
+  }, [current, duration, playback]);
-
-  // There is only something to animate while a connected timer is counting down towards 0.
-  const shouldAnimate = isOnline && isRunning && current !== null && current > 0 && duration !== null;
 
   // while counting down, re-render every animation frame so the derived progress stays smooth
   useEffect(() => {
@@ -42,8 +34,8 @@ export function useAnimatedProgress(current: MaybeNumber, duration: MaybeNumber,
     return () => cancelAnimationFrame(frame);
   }, [shouldAnimate]);
 
-  // Derive from the anchor plus elapsed time at render; freeze while disconnected or not running.
+  // derive from the anchor plus elapsed time at render; frozen to the anchor when not running
   const anchored = baseline.current.current;
-  const value = isOnline && isRunning && anchored !== null ? anchored - (now - baseline.current.at) : anchored;
+  const value = isRunning && anchored !== null ? anchored - (performance.now() - baseline.current.at) : anchored;
   return getProgress(value, duration);
 }

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

@@ -49,7 +49,6 @@ import {
   requestEventSwap,
   requestGroupEntries,
   requestUngroup,
-  requestFitGroupTarget,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
 import { useEditorSettings } from '../stores/editorSettings';
@@ -467,27 +466,7 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
         return previousEnd;
       }
     },
-    [getCurrentRundownData, updateEntryMutation, queryClient, resolveCurrentRundownQueryKey],
+    [getCurrentRundownData, updateEntryMutation, queryClient],
-  );
-
-  /**
-   * Updates time of existing event so it satisfies the group target duration
-   * @param eventId {EntryId} - id of the event
-   */
-  const matchGroupDuration = useCallback(
-    async (eventId: EntryId) => {
-      const rundownId = getCurrentRundownData()?.id;
-      if (!rundownId) {
-        throw new Error('Rundown not initialised');
-      }
-
-      try {
-        await requestFitGroupTarget(rundownId, eventId);
-      } catch (error) {
-        logAxiosError('Error updating event', error);
-      }
-    },
-    [getCurrentRundownData],
   );
 
   /**
@@ -1030,7 +1009,6 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
       swapEvents,
       updateEntry,
       updateTimer,
-      matchGroupDuration,
     }),
     [
       addEntry,
@@ -1048,7 +1026,6 @@ function useEntryActionsForRundown(scopedRundownId: string | undefined) {
       swapEvents,
       updateEntry,
       updateTimer,
-      matchGroupDuration,
     ],
   );
 }

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

@@ -163,7 +163,6 @@ export const useNextFlag = createSelector((state: RuntimeStore) => ({
 export const useProgressData = createSelector((state: RuntimeStore) => ({
   current: state.timer.current,
   duration: state.timer.duration,
-  eventId: state.eventNow?.id ?? null,
   timeWarning: state.eventNow?.timeWarning ?? null,
   timeDanger: state.eventNow?.timeDanger ?? null,
 }));

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

@@ -15,11 +15,14 @@ const logger = createStore<LogStore>(() => ({
   logs: [],
 }));
 
+/** the log is kept in memory, we cap it to avoid it growing through a long show */
+const maxLogEntries = 500;
+
 export const useLogData = () => useStore(logger);
 
 export const addLog = (log: Log) =>
   logger.setState((state) => ({
-    logs: [log, ...state.logs],
+    logs: [log, ...state.logs].slice(0, maxLogEntries),
   }));
 
 export const clearLogs = () => logger.setState({ logs: [] });

apps/client/src/features/app-settings/__tests__/useAppSettingsMenu.test.ts

@@ -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);
-  });
-});

apps/client/src/features/app-settings/panel-content/PanelContent.module.scss

@@ -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;
+  margin: 1rem;
-  // 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;
   overflow-y: auto;
   flex-grow: 1;
-  // room for the last section to scroll to the top of the viewport
+  padding-bottom: 300px;
-  padding-bottom: 40vh;
 }

apps/client/src/features/app-settings/panel-content/PanelContent.tsx

@@ -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>
   );
 }

apps/client/src/features/app-settings/panel-list/PanelList.module.scss

@@ -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: 0;
-    outline-offset: -2px;
   }
 
   &: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;
+    color: $blue-400;
-    border-left-color: $blue-400;
+    background-color: $gray-1100;
-    background-color: rgba($blue-500, 0.16);
-    font-weight: 600;
   }
 
   &.highlight {
@@ -77,9 +62,6 @@ ul {
   font-size: $inner-section-text-size;
 
   &.active {
-    color: $ui-white;
+    color: $blue-400;
-    border-left-color: $blue-400;
-    background-color: rgba($blue-500, 0.16);
-    font-weight: 600;
   }
 }

apps/client/src/features/app-settings/panel-list/PanelList.tsx

@@ -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 { SettingsOption, SettingsOptionId, useAppSettingsMenu } from '../useAppSettingsMenu';
-import {
-  filterSettingsOptions,
-  matchesSettingsOptionQuery,
-  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}>
+    <ul className={style.tabs}>
-      <SettingsSearch query={query} onQueryChange={setQuery} onSubmit={handleSearchSubmit} />
+      {options.map((panel) => {
-
+        const isSelected = selectedPanel === panel.id;
-      {results.length === 0 ? (
+        if (panel.highlight) {
-        <Panel.EmptyState title='No settings match' description={`Nothing found for "${query.trim()}"`} />
+          return (
-      ) : (
+            <Tooltip key={panel.id} text={panel.highlight} render={<span />}>
-        <ul className={style.tabs}>
+              <PanelListItem panel={panel} location={location} isSelected={isSelected} />
-          {results.map((panel) => {
+            </Tooltip>
-            const isSelected = selectedPanel === panel.id;
+          );
-            if (panel.highlight) {
+        }
-              return (
+        return <PanelListItem key={panel.id} panel={panel} location={location} isSelected={isSelected} />;
-                <Tooltip key={panel.id} text={panel.highlight} render={<span />}>
+      })}
-                  <PanelListItem panel={panel} location={location} isSelected={isSelected} />
+    </ul>
-                </Tooltip>
-              );
-            }
-            return <PanelListItem key={panel.id} panel={panel} location={location} isSelected={isSelected} />;
-          })}
-        </ul>
-      )}
-    </div>
   );
 }
 
@@ -86,15 +44,7 @@ interface PanelListItemProps {
 
 function PanelListItem({ panel, isSelected, location }: PanelListItemProps) {
   const { setLocation } = useAppSettingsNavigation();
-  const hasSelectedChild = Boolean(
+  const classes = cx([style.primary, isSelected && style.active, panel.highlight && style.highlight]);
-    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,
-  ]);
 
   return (
     <Fragment key={panel.id}>
@@ -125,7 +75,6 @@ function PanelListItem({ panel, isSelected, location }: PanelListItemProps) {
               }
             }}
             className={secondaryClasses}
-            tabIndex={0}
             role='button'
           >
             {secondary.label}

apps/client/src/features/app-settings/panel-list/SettingsSearch.module.scss

@@ -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;
-}

apps/client/src/features/app-settings/panel-list/SettingsSearch.tsx

@@ -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>
-  );
-}

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

@@ -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;
+  font-size: 1.375rem;
-  padding: 0 var(--panel-card-padding, #{$card-padding});
+  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: 1024px;
 }
 
 .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;
+    font-weight: 400;
-    color: $gray-300;
+    color: $gray-400;
-    font-size: calc(1rem - 3px);
-    letter-spacing: 0.02em;
-    vertical-align: bottom;
     white-space: nowrap;
-    text-transform: uppercase;
+    text-transform: capitalize;
   }
 
   th,
@@ -121,26 +112,19 @@ $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'] {
     background-color: $orange-1300;
   }
+
+  tr[data-highlight='true'] {
+    background-color: $blue-1100;
+  }
 }
 
 .listGroup {
-  padding: 0 var(--panel-card-padding, #{$card-padding});
+  padding: 0 2rem;
 
   > li:not(:last-child) {
     border-bottom: 1px solid $white-10;
@@ -153,17 +137,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,13 +167,14 @@ $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 {
   position: absolute;
   z-index: $zindex-backdrop;
-  inset: 0;
+  width: 100%;
+  height: 100%;
   backdrop-filter: blur(2px);
   display: grid;
   place-content: center;
@@ -218,35 +192,19 @@ $card-padding: 2rem;
   animation: animloader 1s ease-in infinite;
 }
 
-.emptyState {
+.empty {
-  padding: 3rem 1.5rem;
+  background-color: $black-10;
   text-align: center;
-}
+  color: $muted-gray;
 
-.emptyMessage {
+  td {
-  width: min(30rem, 100%);
+    padding-block: 5rem;
-  margin-inline: auto;
+  }
-}
 
-.emptyTitle {
+  button {
-  margin-bottom: 0.25rem;
+    margin-top: 1rem;
-  color: rgba($gray-200, 0.72);
+    margin-inline: auto;
-  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;
 }
 
 .inlineElements {
@@ -285,3 +243,14 @@ $card-padding: 2rem;
     opacity: 0;
   }
 }
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

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

@@ -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 {
+export function TableEmpty({ label, handleClick }: { label?: string; handleClick?: () => void }) {
-  title: string;
-  description?: ReactNode;
-  action?: ReactNode;
-}
-
-export function EmptyState({ title, description, action }: EmptyStateProps) {
   return (
-    <div className={style.emptyState}>
+    <tr className={style.empty}>
-      <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>
       <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 }) {
+export function ListItem({ children }: { children: ReactNode }) {
-  return <li className={cx([style.listItem, interactive && style.interactive])}>{children}</li>;
+  return <li className={style.listItem}>{children}</li>;
 }
 
 export function Field({

apps/client/src/features/app-settings/panel/about-panel/AboutPanel.tsx

@@ -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 />
+          <Panel.Paragraph>
-          <Info>Free, open-source software for managing rundowns and event timers.</Info>
+            Free, open-source software for managing rundowns and event timers
-          <Panel.ListGroup>
+            <ExternalLink href={websiteUrl}>www.getontime.no</ExternalLink>
-            <ExternalLinkRow href={websiteUrl} title='www.getontime.no' description='App site and downloads' />
+          </Panel.Paragraph>
-            <ExternalLinkRow
+          <Panel.Paragraph>
-              href={githubSponsorUrl}
+            Considering sponsoring our work
-              title='GitHub Sponsors'
+            <ExternalLink href={githubSponsorUrl}>GitHub Sponsors</ExternalLink>
-              description='Support development through GitHub'
+            <ExternalLink href={buyMeACoffeeUrl}>Buy Me a Coffee</ExternalLink>
-            />
+          </Panel.Paragraph>
-            <ExternalLinkRow
+          <Panel.Paragraph>
-              href={buyMeACoffeeUrl}
+            If you are looking for an online version of Ontime, consider trying out our cloud service
-              title='Buy Me a Coffee'
+            <ExternalLink href={websiteUrl}>www.getontime.no</ExternalLink>
-              description='Make a one-time contribution'
+          </Panel.Paragraph>
-            />
-          </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.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>
     </>
   );

apps/client/src/features/app-settings/panel/about-panel/AppVersion.module.scss

@@ -1,7 +0,0 @@
-.updateIndicator {
-  width: 0.5em;
-  height: 0.5em;
-  flex: 0 0 auto;
-  border-radius: 99px;
-  background-color: $red-400;
-}

apps/client/src/features/app-settings/panel/about-panel/AppVersion.tsx

@@ -1,47 +1,35 @@
 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';
 
-import style from './AppVersion.module.scss';
-
 export default function AppVersion() {
   const { data, isError } = useAppVersion();
 
   if (isError) {
     return (
-      <Panel.ListItem>
+      <Panel.Paragraph>
-        <Panel.Field title={`Ontime ${appVersion}`} description='' error='Could not fetch version information' />
+        {`You are currently using Ontime version ${appVersion}`}
-      </Panel.ListItem>
+        <Panel.Error>Could not fetch version information</Panel.Error>
+      </Panel.Paragraph>
     );
   }
 
   if (data.hasUpdates) {
     return (
-      <Panel.ListItem>
+      <Panel.Paragraph>
-        <Panel.Field
+        {`You are currently using Ontime version ${appVersion}.`}
-          title={
+        <br />
-            <>
+        <br />
-              <span className={style.updateIndicator} aria-hidden='true' />
+        {`A new version ${data.version} is available.`} <br />
-              {`Ontime ${appVersion}`}
+        {isOntimeCloud ? (
-            </>
+          'You can restart your stage to get the latest available version.'
-          }
+        ) : (
-          description={
+          <ExternalLink href={data.url}>Please visit the release page to download</ExternalLink>
-            isOntimeCloud
-              ? `Version ${data.version} is available. Restart your stage to update.`
-              : `Version ${data.version} is available.`
-          }
-        />
-        {!isOntimeCloud && (
-          <ExternalLink href={websiteUrl}>Download the latest version from Ontime's page</ExternalLink>
         )}
-      </Panel.ListItem>
+      </Panel.Paragraph>
     );
   }
 
-  return (
+  return <Panel.Paragraph>{`You are currently using the latest version of Ontime: ${appVersion}`}</Panel.Paragraph>;
-    <Panel.ListItem>
-      <Panel.Field title={`Ontime ${appVersion}`} description='You are using the latest version.' />
-    </Panel.ListItem>
-  );
 }

apps/client/src/features/app-settings/panel/about-panel/CloudPanel.module.scss

@@ -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;
-  }
-}

apps/client/src/features/app-settings/panel/about-panel/CloudPanel.tsx

@@ -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>
-  );
-}

apps/client/src/features/app-settings/panel/about-panel/ExternalLinkRow.module.scss

@@ -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);
-}

apps/client/src/features/app-settings/panel/about-panel/ExternalLinkRow.tsx

@@ -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>
-  );
-}

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

@@ -1,13 +1,6 @@
 .outerColumn {
-  display: flex;
-  flex-direction: column;
   gap: 2rem;
-  font-size: calc(1rem - 1px);
+  margin-bottom: 2rem;
-  color: $ui-white;
-
-  // the shared modal body owns scrolling for this regular form modal
-  min-height: 100%;
-  padding-block: 0.5rem;
 
   h3 {
     font-size: 1rem;

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

@@ -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,291 @@ export default function AutomationForm({ automation, onClose }: AutomationFormPr
   const canSubmit = !isSubmitting && isDirty && isValid;
 
   return (
-    <Modal
+    <Panel.Indent
-      isOpen
+      as='form'
-      onClose={onClose}
+      name='automation-form'
-      showBackdrop
+      onSubmit={handleSubmit(onSubmit)}
-      showCloseButton
+      className={style.outerColumn}
-      title={isEdit ? 'Edit automation' : 'Create automation'}
+      onKeyDown={(event) => preventEscape(event, onClose)}
-      bodyElements={
+    >
-        <form id={formId} onSubmit={handleSubmit(onSubmit)} className={style.outerColumn}>
+      <Panel.SubHeader>{isEdit ? 'Edit automation' : 'Create automation'}</Panel.SubHeader>
-          <div className={style.innerColumn}>
+      <div className={style.innerSection}>
-            <h3>Automation options</h3>
+        <h3>Automation options</h3>
-            <div className={style.titleSection}>
+        <div className={style.titleSection}>
-              <label>
+          <label>
-                Title
+            Title
-                <Input
+            <Input
-                  {...register('title', { required: { value: true, message: 'Required field' } })}
+              {...register('title', { required: { value: true, message: 'Required field' } })}
-                  fluid
+              fluid
-                  placeholder='Load preset'
+              placeholder='Load preset'
-                />
+            />
-              </label>
+          </label>
-              <Panel.Error>{errors.title?.message}</Panel.Error>
+          <Panel.Error>{errors.title?.message}</Panel.Error>
-            </div>
+        </div>
-          </div>
+      </div>
 
-          <div className={style.innerColumn}>
+      <div className={style.innerSection}>
-            <h3>Filters (optional)</h3>
+        <h3>Filters (optional)</h3>
-            <div className={style.ruleSection}>
+        <div className={style.ruleSection}>
-              <label>
+          <label>
-                Trigger outputs if
+            Trigger outputs if
-                <RadioGroup
+            <RadioGroup
-                  orientation='horizontal'
+              orientation='horizontal'
-                  value={watch('filterRule')}
+              value={watch('filterRule')}
-                  onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
+              onValueChange={(value) => setValue('filterRule', value, { shouldDirty: true })}
-                  items={[
+              items={[
-                    { value: 'all', label: 'All filters pass' },
+                { value: 'all', label: 'All filters pass' },
-                    { value: 'any', label: 'Any filter passes' },
+                { value: 'any', label: 'Any filter passes' },
-                  ]}
+              ]}
-                />
+            />
-              </label>
+          </label>
-              {fieldFilters.map((field, index) => {
+          {fieldFilters.map((field, index) => {
-                const key = `filters.${index}.field.${field.id}`;
+            const key = `filters.${index}.field.${field.id}`;
-                return (
+            return (
-                  <div key={key} className={style.filterSection}>
+              <div key={key} className={style.filterSection}>
-                    <label>
+                <label>
-                      Runtime data source
+                  Runtime data source
-                      <Select<string | null>
+                  <Select<string | null>
-                        // need to normalize '' to null for the Select to show the placeholder
+                    // need to normalize '' to null for the Select to show the placeholder
-                        value={watch(`filters.${index}.field`) || null}
+                    value={watch(`filters.${index}.field`) || null}
-                        onValueChange={(value) => {
+                    onValueChange={(value) => {
-                          if (value === null) return;
+                      if (value === null) return;
-                          setValue(`filters.${index}.field`, value, { shouldDirty: true });
+                      setValue(`filters.${index}.field`, value, { shouldDirty: true });
-                        }}
+                    }}
-                        options={fieldList.map(({ value, label }) => ({
+                    options={fieldList.map(({ value, label }) => ({
-                          value,
+                      value,
-                          label,
+                      label,
-                          disabled: value === null,
+                      disabled: value === null,
-                        }))}
+                    }))}
-                        aria-label='Event field'
+                    aria-label='Event field'
-                      />
+                  />
-                      <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
+                  <Panel.Error>{errors.filters?.[index]?.field?.message}</Panel.Error>
-                    </label>
+                </label>
-                    <label>
+                <label>
-                      Matching condition
+                  Matching condition
-                      <Select
+                  <Select
-                        value={watch(`filters.${index}.operator`)}
+                    value={watch(`filters.${index}.operator`)}
-                        onValueChange={(value: string | null) => {
+                    onValueChange={(value: string | null) => {
-                          if (value === null) return;
+                      if (value === null) return;
-                          setValue(
+                      setValue(
-                            `filters.${index}.operator`,
+                        `filters.${index}.operator`,
-                            value as
+                        value as 'equals' | 'not_equals' | 'greater_than' | 'less_than' | 'contains' | 'not_contains',
-                              | 'equals'
+                        { shouldDirty: true },
-                              | 'not_equals'
+                      );
-                              | 'greater_than'
+                    }}
-                              | 'less_than'
+                    options={[
-                              | 'contains'
+                      { value: 'equals', label: 'equals' },
-                              | 'not_contains',
+                      { value: 'not_equals', label: 'not equals' },
-                            { shouldDirty: true },
+                      { value: 'contains', label: 'contains' },
-                          );
+                    ]}
-                        }}
+                    aria-label='Operator'
-                        options={[
+                  />
-                          { value: 'equals', label: 'equals' },
+                  <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
-                          { value: 'not_equals', label: 'not equals' },
+                </label>
-                          { value: 'contains', label: 'contains' },
+                <label>
-                        ]}
+                  Value to match
-                        aria-label='Operator'
+                  <Input {...register(`filters.${index}.value`)} fluid placeholder='<empty / no value>' />
-                      />
+                </label>
-                      <Panel.Error>{errors.filters?.[index]?.operator?.message}</Panel.Error>
+                <div>
-                    </label>
+                  <span>&nbsp;</span>
-                    <label>
+                  <div>
-                      Value to match
+                    <IconButton aria-label='Delete' variant='ghosted-destructive' onClick={() => removeFilter(index)}>
-                      <Input {...register(`filters.${index}.value`)} fluid placeholder='<empty / no value>' />
+                      <IoTrash />
-                    </label>
+                    </IconButton>
-                    <div>
-                      <span>&nbsp;</span>
-                      <div>
-                        <IconButton
-                          aria-label='Delete'
-                          variant='ghosted-destructive'
-                          onClick={() => removeFilter(index)}
-                        >
-                          <IoTrash />
-                        </IconButton>
-                      </div>
-                    </div>
                   </div>
-                );
+                </div>
-              })}
-              <div>
-                <Button onClick={handleAddNewFilter}>
-                  Add filter <IoAdd />
-                </Button>
               </div>
-            </div>
+            );
+          })}
+          <div>
+            <Button onClick={handleAddNewFilter}>
+              Add filter <IoAdd />
+            </Button>
           </div>
+        </div>
+      </div>
 
-          <div className={style.innerColumn}>
+      <div className={style.innerColumn}>
-            <h3>Outputs</h3>
+        <h3>Outputs</h3>
-            <Info>
+        <Info>
-              Automation outputs can be used to send data from Ontime to external software <br />
+          Automation outputs can be used to send data from Ontime to external software <br />
-              or to change properties of Ontime itself. <br /> <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{' '}
+          Use Ontime runtime data in these fields with template strings. Type {'{{'} to see autocomplete, or{' '}
-              <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
+          <ExternalLink href={integrationsDocsUrl}>read the docs</ExternalLink>
-            </Info>
+        </Info>
 
-            {fieldOutputs.map((output, index) => {
+        {fieldOutputs.map((output, index) => {
-              if (isOSCOutput(output)) {
+          if (isOSCOutput(output)) {
-                const rowErrors = errors.outputs?.[index] as
+            const rowErrors = errors.outputs?.[index] as
-                  | {
+              | {
-                      targetIP?: { message?: string };
+                  targetIP?: { message?: string };
-                      targetPort?: { message?: string };
+                  targetPort?: { message?: string };
-                      address?: { message?: string };
+                  address?: { message?: string };
-                      args?: { message?: string };
+                  args?: { message?: string };
-                    }
+                }
-                  | undefined;
+              | undefined;
 
-                return (
+            return (
-                  <div key={output.id} className={style.outputCard}>
+              <div key={output.id} className={style.outputCard}>
-                    <Tag>OSC</Tag>
+                <Tag>OSC</Tag>
-                    <div className={style.oscSection}>
+                <div className={style.oscSection}>
-                      <label>
+                  <label>
-                        Target IP
+                    Target IP
-                        <Input
+                    <Input
-                          {...register(`outputs.${index}.targetIP`, {
+                      {...register(`outputs.${index}.targetIP`, {
-                            required: { value: true, message: 'Required field' },
+                        required: { value: true, message: 'Required field' },
-                          })}
+                      })}
-                          fluid
+                      fluid
-                          placeholder='127.0.0.1'
+                      placeholder='127.0.0.1'
-                        />
+                    />
-                        <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
+                    <Panel.Error>{rowErrors?.targetIP?.message}</Panel.Error>
-                      </label>
+                  </label>
-                      <label>
+                  <label>
-                        Target Port
+                    Target Port
-                        <Input
+                    <Input
-                          {...register(`outputs.${index}.targetPort`, {
+                      {...register(`outputs.${index}.targetPort`, {
-                            required: { value: true, message: 'Required field' },
+                        required: { value: true, message: 'Required field' },
-                            setValueAs: (value) => (value === '' ? 0 : Number(value)),
+                        setValueAs: (value) => (value === '' ? 0 : Number(value)),
-                            max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+                        max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
-                            min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+                        min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
-                          })}
+                      })}
-                          fluid
+                      fluid
-                          type='number'
+                      type='number'
-                          maxLength={5}
+                      maxLength={5}
-                          placeholder='8000'
+                      placeholder='8000'
-                        />
+                    />
-                        <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
+                    <Panel.Error>{rowErrors?.targetPort?.message}</Panel.Error>
-                      </label>
+                  </label>
-                      <label>
+                  <label>
-                        Address
+                    Address
-                        <TemplateInput
+                    <TemplateInput
-                          {...register(`outputs.${index}.address`)}
+                      {...register(`outputs.${index}.address`)}
-                          value={output.address}
+                      value={output.address}
-                          fluid
+                      fluid
-                          placeholder='/cue/start'
+                      placeholder='/cue/start'
-                        />
+                    />
-                        <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
+                    <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
-                      </label>
+                  </label>
-                      <label>
+                  <label>
-                        Arguments
+                    Arguments
-                        <TemplateInput
+                    <TemplateInput {...register(`outputs.${index}.args`)} value={output.args} fluid placeholder='1' />
-                          {...register(`outputs.${index}.args`)}
+                    <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
-                          value={output.args}
+                  </label>
-                          fluid
+                  <div>
-                          placeholder='1'
+                    <span>&nbsp;</span>
-                        />
+                    <Panel.InlineElements relation='inner'>
-                        <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
+                      <Button variant='ghosted-white' onClick={() => handleTestOSCOutput(index)}>
-                      </label>
+                        Test
-                      <div>
+                      </Button>
-                        <span>&nbsp;</span>
+                      <IconButton aria-label='Delete' variant='ghosted-destructive' onClick={() => removeOutput(index)}>
-                        <Panel.InlineElements relation='inner'>
+                        <IoTrash />
-                          <Button variant='ghosted-white' onClick={() => handleTestOSCOutput(index)}>
+                      </IconButton>
-                            Test
+                    </Panel.InlineElements>
-                          </Button>
-                          <IconButton
-                            aria-label='Delete'
-                            variant='ghosted-destructive'
-                            onClick={() => removeOutput(index)}
-                          >
-                            <IoTrash />
-                          </IconButton>
-                        </Panel.InlineElements>
-                      </div>
-                    </div>
                   </div>
-                );
+                </div>
-              }
+              </div>
-              if (isHTTPOutput(output)) {
+            );
-                const rowErrors = errors.outputs?.[index] as
+          }
-                  | {
+          if (isHTTPOutput(output)) {
-                      url?: { message?: string };
+            const rowErrors = errors.outputs?.[index] as
-                    }
+              | {
-                  | undefined;
+                  url?: { message?: string };
-                return (
+                }
-                  <div key={output.id} className={style.outputCard}>
+              | undefined;
-                    <Tag>HTTP</Tag>
+            return (
-                    <div className={style.httpSection}>
+              <div key={output.id} className={style.outputCard}>
-                      <label>
+                <Tag>HTTP</Tag>
-                        Target URL
+                <div className={style.httpSection}>
-                        <TemplateInput
+                  <label>
-                          {...register(`outputs.${index}.url`, {
+                    Target URL
-                            required: { value: true, message: 'Required field' },
+                    <TemplateInput
-                            pattern: {
+                      {...register(`outputs.${index}.url`, {
-                              value: startsWithHttp,
+                        required: { value: true, message: 'Required field' },
-                              message: 'HTTP messages should target http:// or https://',
+                        pattern: {
-                            },
+                          value: startsWithHttp,
-                          })}
+                          message: 'HTTP messages should target http:// or https://',
-                          value={output.url}
+                        },
-                          fluid
+                      })}
-                          placeholder='http://127.0.0.1/start/1'
+                      value={output.url}
-                        />
+                      fluid
-                        <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
+                      placeholder='http://127.0.0.1/start/1'
-                      </label>
+                    />
-                      <div>
+                    <Panel.Error>{rowErrors?.url?.message}</Panel.Error>
-                        <span>&nbsp;</span>
+                  </label>
-                        <Panel.InlineElements relation='inner'>
+                  <div>
-                          <Button variant='ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
+                    <span>&nbsp;</span>
-                            Test
+                    <Panel.InlineElements relation='inner'>
-                          </Button>
+                      <Button variant='ghosted-white' onClick={() => handleTestHTTPOutput(index)}>
-                          <IconButton
+                        Test
-                            aria-label='Delete'
+                      </Button>
-                            variant='ghosted-destructive'
+                      <IconButton aria-label='Delete' variant='ghosted-destructive' onClick={() => removeOutput(index)}>
-                            onClick={() => removeOutput(index)}
+                        <IoTrash />
-                          >
+                      </IconButton>
-                            <IoTrash />
+                    </Panel.InlineElements>
-                          </IconButton>
-                        </Panel.InlineElements>
-                      </div>
-                    </div>
                   </div>
-                );
+                </div>
-              }
+              </div>
+            );
+          }
 
-              if (isOntimeAction(output)) {
+          if (isOntimeAction(output)) {
-                const rowErrors = errors.outputs?.[index] as
+            const rowErrors = errors.outputs?.[index] as
-                  | {
+              | {
-                      action?: { message?: string };
+                  action?: { message?: string };
-                      time?: { message?: string };
+                  time?: { message?: string };
-                      text?: { message?: string };
+                  text?: { message?: string };
-                      visible?: { message?: string };
+                  visible?: { message?: string };
-                      secondarySource?: { message?: string };
+                  secondarySource?: { message?: string };
-                    }
+                }
-                  | undefined;
+              | undefined;
-                return (
+            return (
-                  <div key={output.id} className={style.outputCard}>
+              <div key={output.id} className={style.outputCard}>
-                    <Tag>Ontime action</Tag>
+                <Tag>Ontime action</Tag>
-                    <OntimeActionForm
+                <OntimeActionForm
-                      value={output.action}
+                  value={output.action}
-                      index={index}
+                  index={index}
-                      register={register}
+                  register={register}
-                      rowErrors={rowErrors}
+                  rowErrors={rowErrors}
-                      setValue={setValue}
+                  setValue={setValue}
-                      watch={watch}
+                  watch={watch}
-                    >
+                >
-                      <span>&nbsp;</span>
+                  <span>&nbsp;</span>
-                      <Panel.InlineElements relation='inner'>
+                  <Panel.InlineElements relation='inner'>
-                        <Button variant='ghosted-white' onClick={() => handleTestOntimeAction(index)}>
+                    <Button variant='ghosted-white' onClick={() => handleTestOntimeAction(index)}>
-                          Test
+                      Test
-                        </Button>
+                    </Button>
-                        <IconButton
+                    <IconButton aria-label='Delete' variant='ghosted-destructive' onClick={() => removeOutput(index)}>
-                          aria-label='Delete'
+                      <IoTrash />
-                          variant='ghosted-destructive'
+                    </IconButton>
-                          onClick={() => removeOutput(index)}
+                  </Panel.InlineElements>
-                        >
+                </OntimeActionForm>
-                          <IoTrash />
+              </div>
-                        </IconButton>
+            );
-                      </Panel.InlineElements>
+          }
-                    </OntimeActionForm>
-                  </div>
-                );
-              }
 
-              return null;
+          // there should be no other output types
-            })}
+          return null;
-            <Panel.InlineElements relation='inner'>
+        })}
-              <Button onClick={handleAddNewOSCOutput}>
+        <Panel.InlineElements relation='inner'>
-                OSC <IoAdd />
+          <Button onClick={handleAddNewOSCOutput}>
-              </Button>
+            OSC <IoAdd />
-              <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
           </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>
   );
 }

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

@@ -19,27 +19,24 @@ export default function AutomationPanel({ location }: PanelBaseProps) {
   return (
     <>
       <Panel.Header>Automation</Panel.Header>
-      <div ref={settingsRef}>
+      <Panel.Section>
-        <AutomationSettingsForm
+        <Panel.Loader isLoading={isLoading} />
-          enabledAutomations={data.enabledAutomations}
+        <div ref={settingsRef}>
-          enabledOscIn={data.enabledOscIn}
+          <AutomationSettingsForm
-          oscPortIn={data.oscPortIn}
+            enabledAutomations={data.enabledAutomations}
-          automationState={automationState}
+            enabledOscIn={data.enabledOscIn}
-          oscInputState={oscInputState}
+            oscPortIn={data.oscPortIn}
-          isLoading={isLoading}
+            automationState={automationState}
-        />
+            oscInputState={oscInputState}
-      </div>
+          />
-      <div ref={automationsRef}>
+        </div>
-        <AutomationsList automations={data.automations} enabledAutomations={automationState} isLoading={isLoading} />
+        <div ref={automationsRef}>
-      </div>
+          <AutomationsList automations={data.automations} enabledAutomations={automationState} />
-      <div ref={triggersRef}>
+        </div>
-        <TriggersList
+        <div ref={triggersRef}>
-          triggers={data.triggers}
+          <TriggersList triggers={data.triggers} automations={data.automations} enabledAutomations={automationState} />
-          automations={data.automations}
+        </div>
-          enabledAutomations={automationState}
+      </Panel.Section>
-          isLoading={isLoading}
-        />
-      </div>
     </>
   );
 }

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

@@ -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.Card>
+      <Panel.SubHeader>
-        <Panel.Loader isLoading={Boolean(isLoading)} />
+        Automation settings
-        <Panel.SubHeader>
+        <Panel.InlineElements>
-          Automation settings
+          <Button variant='ghosted' onClick={onReset} disabled={!canSubmit}>
-          <Panel.InlineElements>
+            Revert to saved
-            <Button variant='ghosted' onClick={onReset} disabled={!canSubmit}>
+          </Button>
-              Revert to saved
+          <Button
-            </Button>
+            variant='primary'
-            <Button
+            type='submit'
-              variant='primary'
+            form='automation-settings-form'
-              type='submit'
+            disabled={!canSubmit}
-              form='automation-settings-form'
+            loading={isSubmitting}
-              disabled={!canSubmit}
+          >
-              loading={isSubmitting}
+            Save
-            >
+          </Button>
-              Save
+        </Panel.InlineElements>
-            </Button>
+      </Panel.SubHeader>
-          </Panel.InlineElements>
+      {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-        </Panel.SubHeader>
-        {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
 
-        <Panel.Divider />
+      <Panel.Divider />
 
-        <Panel.Section>
+      <Panel.Section>
-          <Info>
+        <Info>
-            <span>Control Ontime and share its data with external systems in your workflow.</span>
+          <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>- 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>
+          <span>- OSC Input tells Ontime to listen to messages on the specific port.</span>
-            <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
+          <ExternalLink href={oscApiDocsUrl}>See the docs</ExternalLink>
-          </Info>
+        </Info>
-        </Panel.Section>
+      </Panel.Section>
 
-        <Panel.Section
+      <Panel.Section
-          as='form'
+        as='form'
-          id='automation-settings-form'
+        id='automation-settings-form'
-          onSubmit={handleSubmit(onSubmit)}
+        onSubmit={handleSubmit(onSubmit)}
-          onKeyDown={(event) => preventEscape(event, onReset)}
+        onKeyDown={(event) => preventEscape(event, onReset)}
-        >
+      >
-          <Panel.Title>Automation</Panel.Title>
+        <Panel.Loader isLoading={false} />
-          <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>
+        <Panel.Title>Automation</Panel.Title>
-            {isOntimeCloud && (
+        <Panel.ListGroup>
-              <Info>For security reasons OSC integrations are not available in the cloud service.</Info>
+          <Panel.ListItem>
-            )}
+            <Panel.Field
-            <Panel.ListItem>
+              title={
-              <Panel.Field
+                <>
-                title={
+                  <span>Enable automations</span>
-                  <>
+                  {automationState === false && <Tag variant='warning'>OFF</Tag>}
-                    <span>OSC input</span>
+                </>
-                    {oscInputState === false && <Tag variant='warning'>OFF</Tag>}
+              }
-                  </>
+              description={
-                }
+                automationState === false
-                description={
+                  ? 'Automations are OFF. Triggers stay configured, but Ontime will not send messages.'
-                  oscInputState === false
+                  : 'Allow Ontime to send messages on lifecycle triggers'
-                    ? 'OSC input is OFF. Ontime will not listen for incoming OSC control messages.'
+              }
-                    : 'Allow control of Ontime through OSC'
+              descriptionTone={automationState === false ? 'warning' : 'default'}
-                }
+              error={errors.enabledAutomations?.message}
-                descriptionTone={oscInputState === false ? 'warning' : 'default'}
+            />
-                error={errors.enabledOscIn?.message}
+            <Switch
-              />
+              size='large'
-              <Switch
+              checked={automationsEnabled}
-                size='large'
+              onCheckedChange={(value: boolean) =>
-                checked={oscInputEnabled}
+                setValue('enabledAutomations', value, { shouldDirty: true, shouldValidate: true })
-                onCheckedChange={(value: boolean) =>
+              }
-                  setValue('enabledOscIn', value, { shouldDirty: true, shouldValidate: true })
+            />
-                }
+          </Panel.ListItem>
-              />
+        </Panel.ListGroup>
-            </Panel.ListItem>
+        <Panel.Title>OSC Input</Panel.Title>
-            <Panel.ListItem>
+
-              <Panel.Field
+        <Panel.ListGroup>
-                title='Listen on port'
+          {isOntimeCloud && <Info>For security reasons OSC integrations are not available in the cloud service.</Info>}
-                description='Port for incoming OSC. Default: 8888'
+          <Panel.ListItem>
-                error={errors.oscPortIn?.message}
+            <Panel.Field
-              />
+              title={
-              <Input
+                <>
-                id='oscPortIn'
+                  <span>OSC input</span>
-                placeholder='8888'
+                  {oscInputState === false && <Tag variant='warning'>OFF</Tag>}
-                maxLength={5}
+                </>
-                style={{ textAlign: 'right', width: '5rem' }}
+              }
-                type='number'
+              description={
-                fluid
+                oscInputState === false
-                {...register('oscPortIn', {
+                  ? 'OSC input is OFF. Ontime will not listen for incoming OSC control messages.'
-                  required: { value: true, message: 'Required field' },
+                  : 'Allow control of Ontime through OSC'
-                  max: { value: 65535, message: 'Port must be within range 1024 - 65535' },
+              }
-                  min: { value: 1024, message: 'Port must be within range 1024 - 65535' },
+              descriptionTone={oscInputState === false ? 'warning' : 'default'}
-                  pattern: {
+              error={errors.enabledOscIn?.message}
-                    value: isOnlyNumbers,
+            />
-                    message: 'Value should be numeric',
+            <Switch
-                  },
+              size='large'
-                })}
+              checked={oscInputEnabled}
-              />
+              onCheckedChange={(value: boolean) =>
-            </Panel.ListItem>
+                setValue('enabledOscIn', value, { shouldDirty: true, shouldValidate: true })
-          </Panel.ListGroup>
+              }
-        </Panel.Section>
+            />
-      </Panel.Card>
+          </Panel.ListItem>
-    </Panel.Section>
+          <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>
   );
 }

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

@@ -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>
-      <Panel.Card>
+      <Panel.SubHeader>
-        {automationFormData !== null && (
+        Manage automations
-          <AutomationForm automation={automationFormData} onClose={() => setAutomationFormData(null)} />
+        <Button
-        )}
+          type='submit'
-        <Panel.SubHeader>
+          disabled={Boolean(automationFormData)}
-          Manage automations
+          onClick={() => setAutomationFormData(automationPlaceholder)}
-          <Button onClick={() => setAutomationFormData(automationPlaceholder)}>
+        >
-            New <IoAdd />
+          New <IoAdd />
-          </Button>
+        </Button>
-        </Panel.SubHeader>
+      </Panel.SubHeader>
 
-        <Panel.Divider />
+      <Panel.Divider />
 
-        <Panel.Section>
+      {enabledAutomations === false && (
-          {enabledAutomations === false && (
+        <Info>
-            <Info>
+          Automations are disabled. You can still manage automation definitions here, but they will not run until
-              Automations are disabled. You can still manage automation definitions here, but they will not run until
+          enabled.
-              enabled.
+        </Info>
-            </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}
+            />
           )}
-
+          {arrayAutomations.map((automationId) => {
-          <Panel.Table>
+            if (!Object.hasOwn(automations, automationId)) {
-            <thead>
+              return null;
-              <tr>
+            }
-                <th style={{ width: '45%' }}>Title</th>
+            return (
-                <th style={{ width: '15%' }}>Trigger rule</th>
+              <Fragment key={automationId}>
-                <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 && (
                 <tr>
-                  <td colSpan={5}>
+                  <td>{automations[automationId].title}</td>
-                    <Panel.Error>{deleteError}</Panel.Error>
+                  <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>
-            </tbody>
+            );
-          </Panel.Table>
+          })}
-        </Panel.Section>
+          {deleteError && (
-      </Panel.Card>
+            <tr>
-    </Panel.Section>
+              <td colSpan={5}>
+                <Panel.Error>{deleteError}</Panel.Error>
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </Panel.Table>
+    </Panel.Card>
   );
 }

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

@@ -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,
+      title: initialTitle,
-      trigger: trigger?.trigger ?? (cycles[0].value as TimerLifeCycle | undefined),
+      trigger: initialTrigger ?? (cycles[0].value as TimerLifeCycle | undefined),
-      automationId: trigger?.automationId ?? automations?.[Object.keys(automations)[0]]?.id,
+      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
+    <Panel.Indent
-      isOpen
+      as='form'
-      onClose={onCancel}
+      name='trigger-form'
-      showBackdrop
+      onSubmit={handleSubmit(onSubmit)}
-      showCloseButton
+      onKeyDown={(event) => preventEscape(event, onCancel)}
-      size='compact'
+    >
-      title={trigger ? 'Edit trigger' : 'Create trigger'}
+      <Panel.SubHeader>{initialId ? 'Edit trigger' : 'Create trigger'}</Panel.SubHeader>
-      bodyElements={
+      <label>
-        <form id={formId} onSubmit={handleSubmit(onSubmit)}>
+        Title
-          <label>
+        <Input
-            Title
+          {...register('title', { required: { value: true, message: 'Required field' } })}
-            <Input
+          fluid
-              {...register('title', { required: { value: true, message: 'Required field' } })}
+          defaultValue={initialTitle}
-              fluid
+        />
-              defaultValue={trigger?.title}
+        <Panel.Error>{errors.title?.message}</Panel.Error>
-            />
+      </label>
-            <Panel.Error>{errors.title?.message}</Panel.Error>
+      <label>
-          </label>
+        Lifecycle trigger
-          <label>
+        <Select
-            Lifecycle trigger
+          value={watch('trigger')}
-            <Select
+          onValueChange={(value) => {
-              value={watch('trigger')}
+            if (value === null) return;
-              onValueChange={(value) => {
+            setValue('trigger', value as TimerLifeCycle, { shouldDirty: true });
-                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'
-              options={cycles.map((cycle) => ({ value: cycle.value, label: cycle.label }))}
+        />
-              aria-label='Lifecycle trigger'
+        <Panel.Error>{errors.trigger?.message}</Panel.Error>
-            />
+      </label>
-            <Panel.Error>{errors.trigger?.message}</Panel.Error>
+      <label>
-          </label>
+        Automation title
-          <label>
+        <Select
-            Automation title
+          value={watch('automationId')}
-            <Select
+          onValueChange={(value: string | null) => {
-              value={watch('automationId')}
+            if (value === null) return;
-              onValueChange={(value: string | null) => {
+            setValue('automationId', value, { shouldDirty: true });
-                if (value === null) return;
+          }}
-                setValue('automationId', value, { shouldDirty: true });
+          options={automationSelect}
-              }}
+          aria-label='Automation title'
-              options={automationSelect}
+        />
-              aria-label='Automation title'
+        <Panel.Error>{errors.automationId?.message}</Panel.Error>
-            />
+      </label>
-            <Panel.Error>{errors.automationId?.message}</Panel.Error>
+      <Panel.InlineElements align='end'>
-          </label>
+        <Button disabled={isSubmitting} onClick={onCancel}>
-        </form>
+          Cancel
-      }
+        </Button>
-      footerElements={
+        <Button type='submit' variant='primary' disabled={!canSubmit} loading={isSubmitting}>
-        <>
+          Save
-          {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+        </Button>
-          <Button disabled={isSubmitting} onClick={onCancel}>
+      </Panel.InlineElements>
-            Cancel
+    </Panel.Indent>
-          </Button>
-          <Button type='submit' form={formId} variant='primary' disabled={!canSubmit} loading={isSubmitting}>
-            Save
-          </Button>
-        </>
-      }
-    />
   );
 }

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

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

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

@@ -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}>

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

@@ -66,10 +66,7 @@ export default function ReportSettings() {
             </thead>
             <tbody>
               {combinedReport.length === 0 && (
-                <Panel.TableEmpty
+                <Panel.TableEmpty label='Reports are generated when running through the show.' />
-                  title='No report data yet'
-                  description='Reports are generated as you run through the show, comparing scheduled times against what actually happened.'
-                />
               )}
 
               {combinedReport.map((entry) => {

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

@@ -43,7 +43,6 @@ export default function URLPresets() {
   return (
     <Panel.Section>
       <Panel.Card>
-        {formState.isOpen && <URLPresetForm urlPreset={formState.preset} onClose={closeForm} />}
         <Panel.SubHeader>
           URL presets
           <Button onClick={openNewForm}>
@@ -64,6 +63,7 @@ export default function URLPresets() {
         </Panel.Section>
         <Panel.Section>
           <Panel.Loader isLoading={status === 'pending'} />
+          {formState.isOpen && <URLPresetForm urlPreset={formState.preset} onClose={closeForm} />}
           {actionError && <Panel.Error>{actionError}</Panel.Error>}
           <Panel.Table>
             <thead>
@@ -76,17 +76,7 @@ export default function URLPresets() {
               </tr>
             </thead>
             <tbody>
-              {data.length === 0 && (
+              {data.length === 0 && <Panel.TableEmpty handleClick={openNewForm} />}
-                <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.map((preset, index) => {
                 const isCuesheet = preset.target === OntimeView.Cuesheet;
                 return (

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

@@ -6,9 +6,9 @@ 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';
@@ -26,11 +26,8 @@ const targetOptions: SelectOption<OntimeViewPresettable>[] = [
   { value: OntimeView.StudioClock, label: 'Studio Clock' },
   { value: OntimeView.Countdown, label: 'Countdown' },
   { value: OntimeView.ProjectInfo, label: 'Project Info' },
-  { value: OntimeView.Teleprompter, label: 'Teleprompter' },
 ];
 
-const formId = 'url-preset-form';
-
 const defaultValues: URLPreset = {
   alias: '',
   target: OntimeView.Timer,
@@ -137,101 +134,95 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
   };
 
   return (
-    <Modal
+    <Panel.Indent
-      isOpen
+      as='form'
-      onClose={onClose}
+      onSubmit={handleSubmit(setupSubmit)}
-      showBackdrop
+      onKeyDown={(event) => preventEscape(event, onClose)}
-      showCloseButton
+      className={style.column}
-      size='compact'
+    >
-      title={urlPreset ? 'Edit URL preset' : 'Create URL preset'}
+      <input hidden name='enabled' value='true' />
-      bodyElements={
-        <form id={formId} onSubmit={handleSubmit(setupSubmit)} 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>
+            <Input placeholder='Paste URL' fluid ref={urlRef} disabled={isEditingCuesheet} />
-              <Panel.Description>Alias</Panel.Description>
+            <Button onClick={generateOptions} disabled={isEditingCuesheet}>
-              <Input
+              Generate
-                {...register('alias', {
+            </Button>
-                  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>
           </Panel.InlineElements>
-          {errors.alias?.message && <Panel.Error>{errors.alias.message}</Panel.Error>}
+        </div>
-          {!isEditingCuesheet && (
+      </Panel.InlineElements>
-            <>
+      {errors.alias?.message && <Panel.Error>{errors.alias.message}</Panel.Error>}
-              <div>
+      {!isEditingCuesheet && (
-                {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>
+            {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>
+      )}
+      <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}
           >
             Save
           </Button>
-        </>
+        </Panel.InlineElements>
-      }
+      </div>
-    />
+    </Panel.Indent>
   );
 }

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

@@ -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 handleInitiateCreate = () => {
-  const openEditForm = (field: CustomFieldEntity) => setFormState({ isOpen: true, field });
+    setIsAdding(true);
-  const closeForm = () => setFormState({ isOpen: false, field: undefined });
+  };
 
-  const handleSubmit = async (customField: CustomField) => {
+  const handleCancel = () => {
-    const editing = formState.field;
+    setIsAdding(false);
-    if (editing) {
+  };
-      await editCustomField(editing.key, customField);
+
-    } else {
+  const handleCreate = async (customField: CustomField) => {
-      await postCustomField(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 && (
+              {Object.entries(data).map(([key, { colour, label, type }]) => {
-                <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 }]) => {
                 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}
                   />
                 );

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

@@ -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
+    <Panel.Indent as='form' onSubmit={handleUpload} className={style.uploadForm}>
-      isOpen
+      <input
-      onClose={onClose}
+        ref={fileInputRef}
-      showBackdrop
+        style={{ display: 'none' }}
-      showCloseButton
+        type='file'
-      size='compact'
+        onChange={handleSelectFile}
-      title='Upload custom view'
+        accept='.html,text/html'
-      bodyElements={
+      />
-        <form id={formId} 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.step}>
-            <div className={style.stepTitle}>1. Choose a name</div>
+        <div className={style.stepTitle}>1. Choose a name</div>
-            <Panel.Description>Name</Panel.Description>
+        <Panel.Description>Name</Panel.Description>
-            <Input
+        <Input
-              value={slug}
+          value={slug}
-              onChange={(event) => {
+          onChange={(event) => {
-                setSlug(event.target.value);
+            setSlug(event.target.value);
-                setSlugDirty(true);
+            setSlugDirty(true);
-              }}
+          }}
-              placeholder='my-view'
+          placeholder='my-view'
-              aria-label='Custom view name'
+          aria-label='Custom view name'
-              autoCapitalize='off'
+          autoCapitalize='off'
-              autoComplete='off'
+          autoComplete='off'
-              fluid
+          fluid
-            />
+        />
-            <Panel.Description>
+        <Panel.Description>
-              Use lowercase letters, numbers, and dashes. Example: <Panel.Highlight>my-view</Panel.Highlight>
+          Use lowercase letters, numbers, and dashes. Example: <Panel.Highlight>my-view</Panel.Highlight>
-            </Panel.Description>
+        </Panel.Description>
-            <Panel.Description>
+        <Panel.Description>
-              Preview URL: <Panel.Highlight>{previewUrl}</Panel.Highlight>
+          Preview URL: <Panel.Highlight>{previewUrl}</Panel.Highlight>
-            </Panel.Description>
+        </Panel.Description>
-            {slugDirty && slugError && <Panel.Error>{slugError}</Panel.Error>}
+        {slugDirty && slugError && <Panel.Error>{slugError}</Panel.Error>}
-          </div>
+      </div>
 
-          <div className={style.step}>
+      <div className={style.step}>
-            <div className={style.stepTitle}>2. Select index.html</div>
+        <div className={style.stepTitle}>2. Select index.html</div>
-            <Panel.Description>Upload file</Panel.Description>
+        <Panel.Description>Upload file</Panel.Description>
-            <Panel.InlineElements wrap='wrap' className={style.filePicker}>
+        <Panel.InlineElements wrap='wrap' className={style.filePicker}>
-              <Button onClick={() => fileInputRef.current?.click()}>
+          <Button onClick={() => fileInputRef.current?.click()}>
-                {selectedFile ? 'Replace index.html' : 'Choose index.html'}
+            {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 />
           </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>
   );
 }

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

@@ -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

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

@@ -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 && (
+          {views.length === 0 && <Panel.TableEmpty handleClick={onOpenUpload} label='No custom views yet' />}
-            <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.map((view, index) => (
             <CustomViewsListItem
               key={view.slug}

apps/client/src/features/app-settings/panel/manage-panel/ManagePanel.module.scss

@@ -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: $blue-1100 !important; // fighting zebra styles
-  background-color: inherit;
 }

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

@@ -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
+    <Panel.Indent as='form' onSubmit={handleSubmit(createRundown)}>
-      isOpen
+      <Panel.Section>
-      onClose={onClose}
+        <label>
-      showBackdrop
+          <Panel.Description>Rundown title</Panel.Description>
-      showCloseButton
+          <Input {...register('title')} fluid placeholder='Your rundown name' />
-      size='small'
+        </label>
-      title='Create rundown'
+      </Panel.Section>
-      bodyElements={
+      <Panel.InlineElements relation='inner' align='end'>
-        <form id={formId} onSubmit={handleSubmit(createRundown)}>
+        <Button variant='ghosted' disabled={isSubmitting} onClick={onClose}>
-          <label>
+          Cancel
-            <Panel.Description>Rundown title</Panel.Description>
+        </Button>
-            <Input {...register('title')} fluid placeholder='Your rundown name' maxLength={64} />
+        <Button type='submit' variant='primary' disabled={isSubmitting}>
-          </label>
+          Create rundown
-        </form>
+        </Button>
-      }
+      </Panel.InlineElements>
-      footerElements={
+      {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-        <>
+    </Panel.Indent>
-          {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>
-        </>
-      }
-    />
   );
 }

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

@@ -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

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

@@ -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)}>

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

@@ -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
+    <Panel.Indent as='form' onSubmit={handleSubmit(setupSubmit)} onKeyDown={(event) => preventEscape(event, onCancel)}>
-      isOpen
+      <Info>
-      onClose={onCancel}
+        Please note that images can quickly deteriorate your app&apos;s performance.
-      showBackdrop
+        <br />
-      showCloseButton
+        Prefer using small, and compressed images.
-      size='compact'
+      </Info>
-      title={isEditMode ? 'Edit custom field' : 'Create custom field'}
+      <div>
-      bodyElements={
+        <Panel.Description>Type</Panel.Description>
-        <form id={formId} onSubmit={handleSubmit(setupSubmit)} className={style.formColumn}>
+        <RadioGroup
-          <Info>
+          orientation='horizontal'
-            Please note that images can quickly deteriorate your app&apos;s performance.
+          disabled={isEditMode}
-            <br />
+          onValueChange={(value) => setValue('type', value, { shouldDirty: true })}
-            Prefer using small, and compressed images.
+          value={watch('type')}
-          </Info>
+          items={[
-          <div>
+            { value: 'text', label: 'Text' },
-            <Panel.Description>Type</Panel.Description>
+            { value: 'image', label: 'Image' },
-            <RadioGroup
+          ]}
-              orientation='horizontal'
+        />
-              disabled={isEditMode}
+      </div>
-              onValueChange={(value) => setValue('type', value, { shouldDirty: true })}
+      <div className={style.twoCols}>
-              value={watch('type')}
+        <label>
-              items={[
+          <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>
-                { value: 'text', label: 'Text' },
+          {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
-                { value: 'image', label: 'Image' },
+          <Input
-              ]}
+            {...register('label', {
-            />
+              required: { value: true, message: 'Required field' },
-          </div>
+              onChange: () => setValue('key', customFieldLabelToKey(getValues('label')) ?? 'N/A'),
-          <div className={style.twoCols}>
+              validate: (value) => {
-            <label>
+                if (value.trim().length === 0) return 'Required field';
-              <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>
+                if (!checkRegex.isAlphanumericWithSpace(value))
-              {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
+                  return 'Only alphanumeric characters and space are allowed';
-              <Input
+                if (!isEditMode) {
-                {...register('label', {
+                  if (isEditMode && Object.keys(data).includes(value)) return 'Custom fields must be unique';
-                  required: { value: true, message: 'Required field' },
+                }
-                  onChange: () => setValue('key', customFieldLabelToKey(getValues('label')) ?? 'N/A'),
+                return true;
-                  validate: (value) => {
+              },
-                    if (value.trim().length === 0) return 'Required field';
+            })}
-                    if (!checkRegex.isAlphanumericWithSpace(value))
+            fluid
-                      return 'Only alphanumeric characters and space are allowed';
+          />
-                    if (!isEditMode && Object.hasOwn(data, customFieldLabelToKey(value) ?? '')) {
+        </label>
-                      return 'Custom fields must be unique';
-                    }
-                    return true;
-                  },
-                })}
-                fluid
-              />
-            </label>
 
-            <label>
+        <label>
-              <Panel.Description>Key (use in Integrations and API)</Panel.Description>
+          <Panel.Description>Key (use in Integrations and API)</Panel.Description>
-              <Input {...register('key')} variant='ghosted' readOnly fluid />
+          <Input {...register('key')} variant='ghosted' readOnly fluid />
-            </label>
+        </label>
-          </div>
+      </div>
-          <label>
+      <label>
-            <Panel.Description>Colour</Panel.Description>
+        <Panel.Description>Colour</Panel.Description>
-            <SwatchSelect name='colour' value={colour} handleChange={(_field, value) => handleSelectColour(value)} />
+        <SwatchSelect name='colour' value={colour} handleChange={(_field, value) => handleSelectColour(value)} />
-          </label>
+      </label>
-        </form>
+      {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
-      }
+      <Panel.InlineElements relation='inner' align='end'>
-      footerElements={
+        <Button variant='ghosted' onClick={onCancel}>
-        <>
+          Cancel
-          {errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
+        </Button>
-          <Button variant='ghosted' onClick={onCancel}>
+        <Button type='submit' variant='primary' disabled={!canSubmit} loading={isSubmitting}>
-            Cancel
+          Save
-          </Button>
+        </Button>
-          <Button type='submit' form={formId} variant='primary' disabled={!canSubmit} loading={isSubmitting}>
+      </Panel.InlineElements>
-            Save
+    </Panel.Indent>
-          </Button>
-        </>
-      }
-    />
   );
 }

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

@@ -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>}

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/sheet-import/preview/PreviewTable.module.scss

@@ -1,3 +1,30 @@
+.emptyState {
+  padding: 3rem 1.5rem;
+  text-align: center;
+}
+
+.emptyMessage {
+  width: min(30rem, 100%);
+  margin-inline: auto;
+}
+
+.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 {
+  margin: 1rem auto 0;
+}
+
 .table {
   width: 100%;
   border-collapse: separate;

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/sheet-import/preview/PreviewTable.tsx

@@ -6,7 +6,6 @@ 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';
@@ -124,17 +123,23 @@ export default function PreviewTable({
     }
 
     return (
-      <Panel.EmptyState
+      <div className={style.emptyState}>
-        title={emptyTitle}
+        <div className={style.emptyMessage}>
-        description={emptyContent}
+          <div className={style.emptyTitle}>{emptyTitle}</div>
-        action={
+          <div className={style.emptyBody}>{emptyContent}</div>
-          needsPreviewRefresh && (
+          {needsPreviewRefresh && (
-            <Button variant='primary' onClick={onRefresh} disabled={!canRefresh} loading={isRefreshing}>
+            <Button
+              className={style.emptyAction}
+              variant='primary'
+              onClick={onRefresh}
+              disabled={!canRefresh}
+              loading={isRefreshing}
+            >
               Refresh preview
             </Button>
-          )
+          )}
-        }
+        </div>
-      />
+      </div>
     );
   }
 

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

@@ -19,10 +19,12 @@ export default function InfoNif() {
         // interfaces outside localhost wont have access
         if (nif.name === 'localhost' && !isLocalhost) return null;
         const address = linkToOtherHost(nif.address);
+        // we show the address as it would be typed in a browser, including the port
+        const label = new URL(address).host;
 
         return (
-          <CopyTag key={nif.name} copyValue={address} onClick={() => handleClick(address)}>
+          <CopyTag key={`${nif.name}-${nif.address}`} copyValue={address} onClick={() => handleClick(address)}>
-            {`${nif.name} - ${nif.address}`} <IoArrowUp className={style.goIcon} />
+            {`${nif.name} - ${label}`} <IoArrowUp className={style.goIcon} />
           </CopyTag>
         );
       })}

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

@@ -19,10 +19,13 @@ export default function LogExport() {
         <Panel.SubHeader>
           Event log
           <Button onClick={extract}>
-            Extract <IoArrowUp className={style.iconRotate} />
+            Open in new window <IoArrowUp className={style.iconRotate} />
           </Button>
         </Panel.SubHeader>
         <Panel.Divider />
+        <Panel.Paragraph>
+          Activity in this session. The log is not saved with the project and is cleared when Ontime restarts.
+        </Panel.Paragraph>
         <Log />
       </Panel.Card>
     </Panel.Section>

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

@@ -1,26 +1,38 @@
-import { MessageTag } from 'ontime-types';
-import { useEffect } from 'react';
-
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
-import { usePing } from '../../../../common/hooks/useSocket';
+import { isOntimeCloud } from '../../../../externals';
-import { sendSocket } from '../../../../common/utils/socket';
-import { isDocker } from '../../../../externals';
 import type { PanelBaseProps } from '../../panel-list/PanelList';
 import * as Panel from '../../panel-utils/PanelUtils';
 import ClientControlPanel from './client-control/ClientControlPanel';
+import InfoNif from './NetworkInterfaces';
 import LogExport from './NetworkLogExport';
+import NetworkStatus from './NetworkStatus';
 
 export default function NetworkLogPanel({ location }: PanelBaseProps) {
+  const statusRef = useScrollIntoView<HTMLDivElement>('status', location);
+  const interfacesRef = useScrollIntoView<HTMLDivElement>('interfaces', location);
   const clientsRef = useScrollIntoView<HTMLDivElement>('clients', location);
   const logRef = useScrollIntoView<HTMLDivElement>('log', location);
 
   return (
     <>
       <Panel.Header>Network</Panel.Header>
-      {isDocker && (
+      <div ref={statusRef}>
-        <Panel.Section>
+        <NetworkStatus />
-          <OntimeCloudStats />
+      </div>
-        </Panel.Section>
+      {!isOntimeCloud && (
+        <div ref={interfacesRef}>
+          <Panel.Section>
+            <Panel.Card>
+              <Panel.SubHeader>Network interfaces</Panel.SubHeader>
+              <Panel.Divider />
+              <Panel.Paragraph>
+                Addresses which can be used to reach Ontime from other devices in the network. <br />
+                Click an address to open it in a new window, or use the icon to copy it to the clipboard.
+              </Panel.Paragraph>
+              <InfoNif />
+            </Panel.Card>
+          </Panel.Section>
+        </div>
       )}
       <div ref={logRef}>
         <LogExport />
@@ -31,29 +43,3 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
     </>
   );
 }
-
-function OntimeCloudStats() {
-  const ping = usePing();
-
-  /**
-   * Send immediate ping request, and keep sending on an interval
-   */
-  useEffect(() => {
-    sendSocket(MessageTag.Ping, new Date());
-
-    const doPing = setInterval(() => {
-      sendSocket(MessageTag.Ping, new Date());
-    }, 5000);
-
-    return () => {
-      clearInterval(doPing);
-    };
-  }, []);
-
-  return (
-    <Panel.SubHeader>
-      Ontime cloud
-      <Panel.Description>Current ping: {ping}ms</Panel.Description>
-    </Panel.SubHeader>
-  );
-}

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

@@ -0,0 +1,109 @@
+import { MaybeString, MessageTag } from 'ontime-types';
+import { MILLIS_PER_MINUTE } from 'ontime-utils';
+import { useEffect } from 'react';
+
+import Tag from '../../../../common/components/tag/Tag';
+import useSessionStats from '../../../../common/hooks-query/useSessionStats';
+import { usePing } from '../../../../common/hooks/useSocket';
+import { useClientStore } from '../../../../common/stores/clientStore';
+import { formatDuration } from '../../../../common/utils/time';
+import { sendSocket } from '../../../../common/utils/socket';
+import { isDocker } from '../../../../externals';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+/** ping values above this are flagged to the user (ms) */
+const slowPingThreshold = 100;
+
+/** how often we ask the server for a ping (ms) */
+const pingInterval = 5000;
+
+/**
+ * Presents a date as the time elapsed since it happened
+ */
+function timeSince(date: MaybeString): string {
+  if (date === null) {
+    return 'Never';
+  }
+
+  const elapsed = Date.now() - new Date(date).getTime();
+  if (elapsed < MILLIS_PER_MINUTE) {
+    return 'Just now';
+  }
+  return `${formatDuration(elapsed)} ago`;
+}
+
+export default function NetworkStatus() {
+  const { data, status, isError } = useSessionStats();
+  // the client list is kept up to date over websocket, unlike the polled session stats
+  const clients = useClientStore((store) => store.clients);
+
+  return (
+    <Panel.Section>
+      <Panel.Card>
+        <Panel.SubHeader>Server status</Panel.SubHeader>
+        <Panel.Loader isLoading={status === 'pending'} />
+        {isError && <Panel.Error>Failed to load session data</Panel.Error>}
+        <Panel.Divider />
+        <Panel.ListGroup>
+          <Panel.ListItem>
+            <Panel.Field title='Connected clients' description='Clients currently connected to this server' />
+            <Tag>{Object.keys(clients).length}</Tag>
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field title='Server running for' description='Time since the Ontime server was started' />
+            <Tag>{data ? formatDuration(Date.now() - new Date(data.startedAt).getTime()) : '...'}</Tag>
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field title='Last client connection' description='When a client last connected to the server' />
+            <Tag>{data ? timeSince(data.lastConnection) : '...'}</Tag>
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field
+              title='Last integration request'
+              description='When the server last received a request from an integration'
+            />
+            <Tag>{data ? timeSince(data.lastRequest) : '...'}</Tag>
+          </Panel.ListItem>
+          <Panel.ListItem>
+            <Panel.Field title='Server time zone' description='Time zone used by the machine running Ontime' />
+            <Tag>{data ? data.timezone : '...'}</Tag>
+          </Panel.ListItem>
+          {isDocker && <CloudPing />}
+        </Panel.ListGroup>
+      </Panel.Card>
+    </Panel.Section>
+  );
+}
+
+/**
+ * Ontime cloud users are not in the same network as the server
+ * we show the round trip time to help them qualify the connection
+ */
+function CloudPing() {
+  const ping = usePing();
+
+  /**
+   * Send immediate ping request, and keep sending on an interval
+   */
+  useEffect(() => {
+    sendSocket(MessageTag.Ping, new Date());
+
+    const doPing = setInterval(() => {
+      sendSocket(MessageTag.Ping, new Date());
+    }, pingInterval);
+
+    return () => {
+      clearInterval(doPing);
+    };
+  }, []);
+
+  return (
+    <Panel.ListItem>
+      <Panel.Field
+        title='Ontime cloud latency'
+        description='Time for a message to travel to the server and back. Lower is better'
+      />
+      <Tag variant={ping > slowPingThreshold ? 'warning' : 'default'}>{ping}ms</Tag>
+    </Panel.ListItem>
+  );
+}

apps/client/src/features/app-settings/panel/network-panel/client-control/ClientControlPanel.module.scss

@@ -1,11 +1,3 @@
-.fullWidth {
-  width: 100%;
-}
-
-.halfWidth {
-  width: 50%;
-}
-
 .halfWidthNoWrap {
   width: 50%;
   white-space: nowrap;
@@ -16,22 +8,11 @@
   user-select: text;
 }
 
-.actionsCell {
+.muted {
-  width: 1%;
+  color: $label-gray;
-  white-space: nowrap;
-  text-align: right;
 }
 
-.actionsHeader {
+// align section notes with the table contents
-  text-align: right;
+.note {
-}
+  padding: 0 2rem;
-
-.actionsGroup {
-  width: 100%;
-  justify-content: flex-end;
-}
-
-.current {
-  // marker consumed by the shared Panel.Table active-row treatment
-  background-color: inherit;
 }

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

@@ -5,14 +5,42 @@ import { useState } from 'react';
 import Button from '../../../../../common/components/buttons/Button';
 import { RedirectClientModal } from '../../../../../common/components/client-modal/RedirectClientModal';
 import { RenameClientModal } from '../../../../../common/components/client-modal/RenameClientModal';
+import CopyTag from '../../../../../common/components/copy-tag/CopyTag';
 import Tag from '../../../../../common/components/tag/Tag';
+import Tooltip from '../../../../../common/components/tooltip/Tooltip';
 import { setClientRemote } from '../../../../../common/hooks/useSocket';
 import { useClientStore } from '../../../../../common/stores/clientStore';
-import { cx } from '../../../../../common/utils/styleUtils';
+import { openLink } from '../../../../../common/utils/linkUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
 import style from './ClientControlPanel.module.scss';
 
+/**
+ * Shows the path a client is showing
+ * The full URL is available for copying or opening in a new window
+ */
+function ClientPath({ origin, path }: { origin: string; path: string }) {
+  // clients report their path on connection, we may not have it yet
+  if (!path) {
+    return <span className={style.muted}>unknown</span>;
+  }
+
+  // origin is empty for clients which have not reported their location
+  if (!origin) {
+    return <span className={style.copiable}>{path}</span>;
+  }
+
+  const fullUrl = `${origin}${path}`;
+
+  return (
+    <Tooltip text={fullUrl} render={<span />}>
+      <CopyTag copyValue={fullUrl} size='small' onClick={() => openLink(fullUrl)}>
+        {path}
+      </CopyTag>
+    </Tooltip>
+  );
+}
+
 export default function ClientList() {
   const id = useClientStore((store) => store.id);
   const clients = useClientStore((store) => store.clients);
@@ -32,8 +60,19 @@ export default function ClientList() {
     redirectHandler.open();
   };
 
-  const ontimeClients = Object.entries(clients).filter(([_, { type }]) => type === 'ontime');
+  /**
-  const otherClients = Object.entries(clients).filter(([_, { type }]) => type !== 'ontime');
+   * Clients are given by the server in connection order, which means rows move
+   * as clients come and go. We keep a stable order: self first, then by name
+   */
+  const sortClients = (clientEntries: [string, Client][]) =>
+    clientEntries.sort(([keyA, clientA], [keyB, clientB]) => {
+      if (keyA === id) return -1;
+      if (keyB === id) return 1;
+      return clientA.name.localeCompare(clientB.name);
+    });
+
+  const ontimeClients = sortClients(Object.entries(clients).filter(([_, { type }]) => type === 'ontime'));
+  const otherClients = sortClients(Object.entries(clients).filter(([_, { type }]) => type !== 'ontime'));
 
   const targetClient: Client | undefined = clients[targetId];
 
@@ -59,63 +98,63 @@ export default function ClientList() {
       )}
       <Panel.Section>
         <Panel.Title>Ontime Clients ({ontimeClients.length})</Panel.Title>
+        <div className={style.note}>
+          <Panel.Description>
+            Ontime views connected to this server. Identify shows a marker in the client screen until you turn it off,
+            redirect sends the client to a different view.
+          </Panel.Description>
+        </div>
         <Panel.Table>
           <thead>
             <tr>
-              <td style={{ width: '20%' }}>Client Name</td>
+              <th style={{ width: '20%' }}>Client Name</th>
-              <td>Path</td>
+              <th>Path</th>
-              <td className={style.actionsHeader} />
+              <th />
             </tr>
           </thead>
           <tbody>
-            {ontimeClients.length === 0 && (
+            {ontimeClients.length === 0 && <Panel.TableEmpty label='No Ontime clients connected' />}
-              <Panel.TableEmpty
-                title='No Ontime clients connected'
-                description='Editor, cuesheet and operator windows appear here as they connect.'
-              />
-            )}
             {ontimeClients.map(([key, client]) => {
               const { identify, name, path } = client;
               const isCurrent = id === key;
               return (
-                <tr key={key} className={cx([isCurrent && style.current])}>
+                <tr key={key} data-highlight={isCurrent}>
                   <Panel.InlineElements relation='inner' as='td'>
-                    {isCurrent && <Tag variant='active'>SELF</Tag>}
+                    {isCurrent && <Tag>SELF</Tag>}
                     {name}
                   </Panel.InlineElements>
-                  <td className={style.copiable}>{path}</td>
+                  <td>
-                  <td className={style.actionsCell}>
+                    <ClientPath origin={client.origin} path={path} />
-                    <Panel.InlineElements relation='inner' align='end' className={style.actionsGroup}>
-                      <Button
-                        size='small'
-                        className={`${identify ? style.blink : ''}`}
-                        disabled={isCurrent}
-                        variant={identify ? 'primary' : 'subtle'}
-                        data-testid={isCurrent ? '' : 'not-self-identify'}
-                        onClick={() => {
-                          setIdentify({ target: key, identify: !identify });
-                        }}
-                      >
-                        Identify
-                      </Button>
-                      <Button
-                        size='small'
-                        data-testid={isCurrent ? '' : 'not-self-rename'}
-                        onClick={() => openRename(key)}
-                      >
-                        Rename
-                      </Button>
-
-                      <Button
-                        size='small'
-                        disabled={isCurrent}
-                        data-testid={isCurrent ? '' : 'not-self-redirect'}
-                        onClick={() => openRedirect(key)}
-                      >
-                        Redirect
-                      </Button>
-                    </Panel.InlineElements>
                   </td>
+                  <Panel.InlineElements relation='inner' as='td'>
+                    <Button
+                      size='small'
+                      disabled={isCurrent}
+                      variant={identify ? 'primary' : 'subtle'}
+                      data-testid={isCurrent ? '' : 'not-self-identify'}
+                      onClick={() => {
+                        setIdentify({ target: key, identify: !identify });
+                      }}
+                    >
+                      Identify
+                    </Button>
+                    <Button
+                      size='small'
+                      data-testid={isCurrent ? '' : 'not-self-rename'}
+                      onClick={() => openRename(key)}
+                    >
+                      Rename
+                    </Button>
+
+                    <Button
+                      size='small'
+                      disabled={isCurrent}
+                      data-testid={isCurrent ? '' : 'not-self-redirect'}
+                      onClick={() => openRedirect(key)}
+                    >
+                      Redirect
+                    </Button>
+                  </Panel.InlineElements>
                 </tr>
               );
             })}
@@ -125,20 +164,21 @@ export default function ClientList() {
       <Panel.Divider />
       <Panel.Section>
         <Panel.Title>Other Clients ({otherClients.length})</Panel.Title>
+        <div className={style.note}>
+          <Panel.Description>
+            Connections which are not Ontime views, such as integrations and custom clients. These cannot be controlled
+            from Ontime.
+          </Panel.Description>
+        </div>
         <Panel.Table>
           <thead>
             <tr>
-              <td className={style.halfWidthNoWrap}>Client Name</td>
+              <th className={style.halfWidthNoWrap}>Client Name</th>
-              <td className={style.halfWidthNoWrap}>Client type</td>
+              <th className={style.halfWidthNoWrap}>Client type</th>
             </tr>
           </thead>
           <tbody>
-            {otherClients.length === 0 && (
+            {otherClients.length === 0 && <Panel.TableEmpty label='No other clients connected' />}
-              <Panel.TableEmpty
-                title='No other clients connected'
-                description='Views and integrations connected to this server are listed here.'
-              />
-            )}
             {otherClients.map(([key, client]) => {
               const { name, type } = client;
 

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

@@ -1,21 +1,29 @@
 import { ChangeEvent, useRef, useState } from 'react';
 import { IoAdd } from 'react-icons/io5';
+import { useSearchParams } from 'react-router';
 
 import { uploadProjectFile } from '../../../../common/api/db';
 import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import { validateProjectFile } from '../../../../common/utils/uploadUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
-import useAppSettingsNavigation from '../../useAppSettingsNavigation';
+import ProjectCreateForm from './ProjectCreateForm';
 import ProjectList from './ProjectList';
 
 export default function ManageProjects() {
-  const { setLocation } = useAppSettingsNavigation();
+  const [searchParams, setSearchParams] = useSearchParams();
   const [error, setError] = useState('');
   const [loading, setLoading] = useState<'import' | null>(null);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const isCreatingProject = searchParams.get('new') === 'true';
+
+  const handleToggleCreate = () => {
+    searchParams.set('new', isCreatingProject ? 'false' : 'true');
+    setSearchParams(searchParams);
+  };
+
   const handleSelectFile = () => {
     fileInputRef.current?.click();
   };
@@ -41,6 +49,11 @@ export default function ManageProjects() {
     setLoading(null);
   };
 
+  const handleCloseForm = () => {
+    searchParams.delete('new');
+    setSearchParams(searchParams);
+  };
+
   return (
     <Panel.Section>
       <input
@@ -55,16 +68,21 @@ export default function ManageProjects() {
         <Panel.SubHeader>
           Manage projects
           <Panel.InlineElements>
-            <Button onClick={handleSelectFile} disabled={Boolean(loading)} loading={loading === 'import'}>
+            <Button
+              onClick={handleSelectFile}
+              disabled={Boolean(loading) || isCreatingProject}
+              loading={loading === 'import'}
+            >
               Import
             </Button>
-            <Button onClick={() => setLocation('project__create')} disabled={Boolean(loading)}>
+            <Button onClick={handleToggleCreate} disabled={Boolean(loading) || isCreatingProject}>
               New <IoAdd />
             </Button>
           </Panel.InlineElements>
         </Panel.SubHeader>
         {error && <Panel.Error>{error}</Panel.Error>}
         <Panel.Divider />
+        {isCreatingProject && <ProjectCreateForm onClose={handleCloseForm} />}
         <ProjectList />
       </Panel.Card>
     </Panel.Section>

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

@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { createProject } from '../../../../common/api/db';
+import { maybeAxiosError } from '../../../../common/api/utils';
+import Button from '../../../../common/components/buttons/Button';
+import Input from '../../../../common/components/input/input/Input';
+import { preventEscape } from '../../../../common/utils/keyEvent';
+import * as Panel from '../../panel-utils/PanelUtils';
+
+import style from './ProjectPanel.module.scss';
+
+interface ProjectCreateFromProps {
+  onClose: () => void;
+}
+
+type ProjectCreateFormValues = {
+  title?: string;
+  description?: string;
+  info?: string;
+  url?: string;
+  custom?: { title: string; value: string }[];
+};
+
+export default function ProjectCreateForm({ onClose }: ProjectCreateFromProps) {
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    handleSubmit,
+    register,
+    formState: { isSubmitting, isValid },
+    setFocus,
+  } = useForm<ProjectCreateFormValues>({
+    defaultValues: { title: '' },
+    values: { title: '' },
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  // set focus to first field
+  useEffect(() => {
+    setFocus('title');
+  }, [setFocus]);
+
+  const handleSubmitCreate = async (values: ProjectCreateFormValues) => {
+    try {
+      setError(null);
+
+      const filename = values.title ?? 'untitled';
+
+      await createProject({ filename });
+
+      onClose();
+    } catch (error) {
+      setError(maybeAxiosError(error));
+    }
+  };
+
+  return (
+    <Panel.Indent
+      as='form'
+      onSubmit={handleSubmit(handleSubmitCreate)}
+      onKeyDown={(event) => preventEscape(event, onClose)}
+    >
+      <Panel.Title>
+        Create new project
+        <Panel.InlineElements>
+          <Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button disabled={!isValid} type='submit' loading={isSubmitting} variant='primary'>
+            Create project
+          </Button>
+        </Panel.InlineElements>
+      </Panel.Title>
+      {error && <Panel.Error>{error}</Panel.Error>}
+      <Panel.Section className={style.innerColumn}>
+        <Panel.Description>Project title</Panel.Description>
+        <Input fluid placeholder='Your project name' {...register('title')} />
+      </Panel.Section>
+    </Panel.Indent>
+  );
+}

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

@@ -40,7 +40,7 @@ export default function ProjectList() {
 
   if (status === 'pending') {
     return (
-      <div className={style.loaderBox}>
+      <div className={style.empty}>
         <Panel.Loader isLoading />
       </div>
     );
@@ -74,12 +74,6 @@ export default function ProjectList() {
           </tr>
         </thead>
         <tbody>
-          {numProjects === 0 && (
-            <Panel.TableEmpty
-              title='No projects yet'
-              description='Projects are the show files Ontime saves your rundown and settings into. Create one to get started.'
-            />
-          )}
           {data.reorderedProjectFiles.map((project) => (
             <ProjectListItem
               key={project.filename}

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

@@ -20,7 +20,6 @@ import Button from '../../../../common/components/buttons/Button';
 import IconButton from '../../../../common/components/buttons/IconButton';
 import Dialog from '../../../../common/components/dialog/Dialog';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
-import Tag from '../../../../common/components/tag/Tag';
 import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 import ProjectForm, { ProjectFormValues } from './ProjectForm';
@@ -144,7 +143,7 @@ export default function ProjectListItem({
         ) : (
           <>
             <td className={style.containCell}>{filename}</td>
-            <td>{current ? <Tag variant='active'>Loaded</Tag> : new Date(updatedAt).toLocaleString()}</td>
+            <td>{current ? 'Currently loaded' : new Date(updatedAt).toLocaleString()}</td>
             <td>
               <ActionMenu
                 current={current}
@@ -159,7 +158,13 @@ export default function ProjectListItem({
           </>
         )}
       </tr>
-      {showMergeForm && <ProjectMergeForm onClose={handleCancel} fileName={filename} />}
+      {showMergeForm && (
+        <tr>
+          <td colSpan={99}>
+            <ProjectMergeForm onClose={handleCancel} fileName={filename} />
+          </td>
+        </tr>
+      )}
       <Dialog
         isOpen={isDeleteOpen}
         onClose={() => setDeleteOpen(false)}

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

@@ -7,15 +7,13 @@ import { getDb, patchData } from '../../../../common/api/db';
 import { maybeAxiosError } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import Info from '../../../../common/components/info/Info';
-import Modal from '../../../../common/components/modal/Modal';
 import Switch from '../../../../common/components/switch/Switch';
+import { cx } from '../../../../common/utils/styleUtils';
 import * as Panel from '../../panel-utils/PanelUtils';
 import { makeProjectPatch } from './project.utils';
 
 import style from './ProjectPanel.module.scss';
 
-const formId = 'project-merge-form';
-
 interface ProjectMergeFromProps {
   onClose: () => void;
   fileName: string;
@@ -79,122 +77,68 @@ export default function ProjectMergeForm({ onClose, fileName }: ProjectMergeFrom
   };
 
   return (
-    <Modal
+    <Panel.Section as='form' onSubmit={handleSubmit(handleSubmitCreate)}>
-      isOpen
+      <Panel.Title>
-      onClose={onClose}
+        Partial project merge
-      showBackdrop
+        <Panel.InlineElements>
-      showCloseButton
+          <Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
-      size='compact'
+            Cancel
-      title='Partial project merge'
+          </Button>
-      bodyElements={
+          <Button type='submit' disabled={!isValid || !isDirty} loading={isSubmitting} variant='primary'>
-        <form id={formId} onSubmit={handleSubmit(handleSubmitCreate)}>
+            Merge
-          <Panel.Section className={style.mergeBody}>
+          </Button>
-            <div className={style.mergeIntro}>
+        </Panel.InlineElements>
-              <Panel.Description>
+      </Panel.Title>
-                Select the sections from <span className={style.sourceFile}>{`"${fileName}"`}</span> that you want to
+      {error && <Panel.Error>{error}</Panel.Error>}
-                merge into the current project.
+      <Panel.Section className={cx([style.innerColumn, style.inlineLabels])}>
-              </Panel.Description>
+        <Panel.Description>
-              <div className={style.mergeSummary}>
+          Select data from <i>{`"${fileName}"`}</i> to merge into the current project.
-                Only the enabled sections are copied. Existing data stays intact.
+        </Panel.Description>
-              </div>
+        <Info type='warning'>
-            </div>
+          This process is irreversible and can result in data loss. <br />
-
+          You may want to create a duplicate backup beforehand.
-            <Info type='warning' className={style.mergeWarningInfo}>
+        </Info>
-              <Info.Title>Back up before merging</Info.Title>
+        <label>
-              <Info.Body>
+          <Switch
-                This action can overwrite project data. Create a duplicate project first if you want a recovery point.
+            size='large'
-              </Info.Body>
+            checked={watch('project')}
-            </Info>
+            onCheckedChange={(value: boolean) => setValue('project', value, { shouldDirty: true })}
-
+          />
-            <Panel.ListGroup className={style.optionList}>
+          Project data
-              <Panel.ListItem>
+        </label>
-                <label className={style.optionRow}>
+        <label>
-                  <div className={style.optionCopy}>
+          <Switch
-                    <span className={style.optionTitle}>Project data</span>
+            size='large'
-                    <span className={style.optionBody}>Core project metadata and settings.</span>
+            checked={watch('rundowns')}
-                  </div>
+            onCheckedChange={(value: boolean) => setValue('rundowns', value, { shouldDirty: true })}
-                  <Switch
+          />
-                    size='large'
+          Rundown + Custom Fields
-                    checked={watch('project')}
+        </label>
-                    onCheckedChange={(value: boolean) => setValue('project', value, { shouldDirty: true })}
+        <label>
-                  />
+          <Switch
-                </label>
+            size='large'
-              </Panel.ListItem>
+            checked={watch('viewSettings')}
-              <Panel.ListItem>
+            onCheckedChange={(value: boolean) => setValue('viewSettings', value, { shouldDirty: true })}
-                <label className={style.optionRow}>
+          />
-                  <div className={style.optionCopy}>
+          View Settings
-                    <span className={style.optionTitle}>Rundown + Custom Fields</span>
+        </label>
-                    <span className={style.optionBody}>Copies all rundowns and any associated custom fields.</span>
+        <label>
-                  </div>
+          <Switch
-                  <Switch
+            size='large'
-                    size='large'
+            checked={watch('urlPresets')}
-                    checked={watch('rundowns')}
+            onCheckedChange={(value: boolean) => setValue('urlPresets', value, { shouldDirty: true })}
-                    onCheckedChange={(value: boolean) => setValue('rundowns', value, { shouldDirty: true })}
+          />
-                  />
+          URL Presets
-                </label>
+        </label>
-              </Panel.ListItem>
+        <label>
-              <Panel.ListItem>
+          <Switch
-                <label className={style.optionRow}>
+            size='large'
-                  <div className={style.optionCopy}>
+            checked={watch('automation')}
-                    <span className={style.optionTitle}>View Settings</span>
+            onCheckedChange={(value: boolean) => setValue('automation', value, { shouldDirty: true })}
-                    <span className={style.optionBody}>View configuration, and display preferences.</span>
+          />
-                  </div>
+          Automation Settings
-                  <Switch
+        </label>
-                    size='large'
+      </Panel.Section>
-                    checked={watch('viewSettings')}
+    </Panel.Section>
-                    onCheckedChange={(value: boolean) => setValue('viewSettings', value, { shouldDirty: true })}
-                  />
-                </label>
-              </Panel.ListItem>
-              <Panel.ListItem>
-                <label className={style.optionRow}>
-                  <div className={style.optionCopy}>
-                    <span className={style.optionTitle}>URL Presets</span>
-                    <span className={style.optionBody}>Saved links and preset launch parameters.</span>
-                  </div>
-                  <Switch
-                    size='large'
-                    checked={watch('urlPresets')}
-                    onCheckedChange={(value: boolean) => setValue('urlPresets', value, { shouldDirty: true })}
-                  />
-                </label>
-              </Panel.ListItem>
-              <Panel.ListItem>
-                <label className={style.optionRow}>
-                  <div className={style.optionCopy}>
-                    <span className={style.optionTitle}>Automation Settings</span>
-                    <span className={style.optionBody}>Triggers and automation configuration.</span>
-                  </div>
-                  <Switch
-                    size='large'
-                    checked={watch('automation')}
-                    onCheckedChange={(value: boolean) => setValue('automation', value, { shouldDirty: true })}
-                  />
-                </label>
-              </Panel.ListItem>
-            </Panel.ListGroup>
-          </Panel.Section>
-        </form>
-      }
-      footerElements={
-        <div className={style.footerContent}>
-          {error && <Panel.Error>{error}</Panel.Error>}
-          <div className={style.footerActions}>
-            <Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
-              Cancel
-            </Button>
-            <Button
-              type='submit'
-              form={formId}
-              disabled={!isValid || !isDirty}
-              loading={isSubmitting}
-              variant='primary'
-            >
-              Merge
-            </Button>
-          </div>
-        </div>
-      }
-    />
   );
 }

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss

@@ -1,6 +1,5 @@
 .current {
-  // marker consumed by the shared Panel.Table active-row treatment
+  background-color: $blue-1100;
-  background-color: inherit;
 }
 
 .isEditing {
@@ -56,90 +55,7 @@
   margin-bottom: 1rem;
 }
 
-.loaderBox {
+.empty {
   height: 300px;
   position: relative;
 }
-
-.mergeBody {
-  gap: 1rem;
-}
-
-.mergeIntro {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.sourceFile {
-  padding: 0.1rem 0.45rem;
-  border-radius: 999px;
-  background-color: $white-3;
-  color: $orange-400;
-  white-space: nowrap;
-}
-
-.mergeSummary {
-  color: $gray-400;
-  font-size: calc(1rem - 2px);
-  line-height: 1.5;
-}
-
-.mergeWarningInfo {
-  margin-bottom: 0.25rem;
-}
-
-.optionList {
-  padding: 0;
-  gap: 0;
-}
-
-.optionList > li:not(:last-child) {
-  border-bottom: 1px solid $white-10;
-}
-
-.optionRow {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 1rem;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-  cursor: pointer;
-}
-
-.optionCopy {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  min-width: 0;
-}
-
-.optionTitle {
-  color: $ui-white;
-  font-size: 0.95rem;
-  font-weight: 600;
-  line-height: 1.35;
-}
-
-.optionBody {
-  color: $gray-400;
-  font-size: calc(1rem - 3px);
-  line-height: 1.45;
-}
-
-.footerContent {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.footerActions {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}

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

@@ -1,5 +1,5 @@
 import { type ProjectData } from 'ontime-types';
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { ChangeEvent, useEffect, useRef } from 'react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { IoAdd, IoDownloadOutline, IoTrash } from 'react-icons/io5';
 
@@ -17,16 +17,9 @@ import * as Panel from '../../panel-utils/PanelUtils';
 
 import style from './SettingsPanel.module.scss';
 
-type PendingLogo = {
-  file: File;
-  previewUrl: string;
-  uploadedFilename?: string;
-};
-
 export default function ProjectData() {
   const { data, status } = useProjectData();
   const { updateProjectData } = useUpdateProjectData();
-  const [pendingLogo, setPendingLogo] = useState<PendingLogo | null>(null);
 
   const {
     handleSubmit,
@@ -52,22 +45,13 @@ export default function ProjectData() {
   });
 
   // reset form values if data changes
-  // Release the browser-managed preview URL when the selection changes or this form unmounts.
   useEffect(() => {
     if (data) {
       reset(data);
     }
   }, [data, reset]);
 
-  useEffect(() => {
+  const handleUploadProjectLogo = async (event: ChangeEvent<HTMLInputElement>) => {
-    return () => {
-      if (pendingLogo) {
-        URL.revokeObjectURL(pendingLogo.previewUrl);
-      }
-    };
-  }, [pendingLogo]);
-
-  const handleUploadProjectLogo = (event: ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     clearErrors('logo');
 
@@ -77,16 +61,14 @@ export default function ProjectData() {
 
     try {
       validateLogo(file);
-      setPendingLogo({
+      const response = await uploadProjectLogo(file);
-        file,
+
-        previewUrl: URL.createObjectURL(file),
+      setValue('logo', response.data.logoFilename, {
+        shouldDirty: true,
       });
     } catch (error) {
       const message = maybeAxiosError(error);
       setError('logo', { message });
-    } finally {
-      // Allow selecting the same local file again after an upload attempt.
-      event.target.value = '';
     }
   };
 
@@ -101,7 +83,6 @@ export default function ProjectData() {
   const handleDeleteLogo = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setPendingLogo(null);
     setValue('logo', null, {
       shouldDirty: true,
     });
@@ -111,29 +92,10 @@ export default function ProjectData() {
     append({ title: '', value: '', url: '' });
   };
 
-  const uploadPendingLogo = async () => {
-    if (!pendingLogo) {
-      return null;
-    }
-
-    if (pendingLogo.uploadedFilename) {
-      return pendingLogo.uploadedFilename;
-    }
-
-    const response = await uploadProjectLogo(pendingLogo.file);
-    const uploadedFilename = response.data.logoFilename;
-    setPendingLogo((currentPendingLogo) =>
-      currentPendingLogo?.file === pendingLogo.file ? { ...currentPendingLogo, uploadedFilename } : currentPendingLogo,
-    );
-    return uploadedFilename;
-  };
-
   const onSubmit = async (formData: ProjectData) => {
     try {
       clearErrors();
-      const logo = (await uploadPendingLogo()) ?? formData.logo;
+      await updateProjectData(formData);
-      await updateProjectData({ ...formData, logo });
-      setPendingLogo(null);
     } catch (error) {
       const message = maybeAxiosError(error);
       setError('root', { message });
@@ -142,12 +104,10 @@ export default function ProjectData() {
 
   // reset data to the initial state
   const onReset = () => {
-    setPendingLogo(null);
     reset(data);
   };
 
   const isLoading = status === 'pending';
-  const logo = watch('logo');
 
   return (
     <Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={(event) => preventEscape(event, onReset)}>
@@ -158,12 +118,7 @@ export default function ProjectData() {
             <Button onClick={onReset} disabled={isSubmitting || !isDirty}>
               Revert to saved
             </Button>
-            <Button
+            <Button variant='primary' type='submit' disabled={!isDirty || !isValid} loading={isSubmitting}>
-              variant='primary'
-              type='submit'
-              disabled={(!isDirty && !pendingLogo) || !isValid}
-              loading={isSubmitting}
-            >
               Save
             </Button>
           </Panel.InlineElements>
@@ -195,24 +150,17 @@ export default function ProjectData() {
                 onChange={handleUploadProjectLogo}
               />
               <Panel.Card className={style.uploadLogoCard}>
-                {logo || pendingLogo ? (
+                {watch('logo') ? (
                   <>
-                    <img src={pendingLogo ? pendingLogo.previewUrl : `${projectLogoPath}/${logo}`} />
+                    <img src={`${projectLogoPath}/${watch('logo')}`} />
-                    <div className={style.logoActions}>
+                    <Button
-                      <Button disabled={isSubmitting} onClick={handleClickUpload} type='button'>
+                      variant='subtle-destructive'
-                        <IoDownloadOutline />
+                      disabled={isSubmitting || !watch('logo')}
-                        Replace logo
+                      onClick={handleDeleteLogo}
-                      </Button>
+                    >
-                      <Button
+                      <IoTrash />
-                        variant='subtle-destructive'
+                      Delete
-                        disabled={isSubmitting || (!logo && !pendingLogo)}
+                    </Button>
-                        onClick={handleDeleteLogo}
-                        type='button'
-                      >
-                        <IoTrash />
-                        Delete
-                      </Button>
-                    </div>
                   </>
                 ) : (
                   <Button disabled={isSubmitting} onClick={handleClickUpload} type='button'>

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

@@ -85,10 +85,10 @@ export default function ServerPortSettings() {
             </Button>
           </Panel.InlineElements>
         </Panel.SubHeader>
+        <Panel.Loader isLoading={status === 'pending'} />
         {rootError && <Panel.Error>{rootError}</Panel.Error>}
         <Panel.Divider />
         <Panel.Section>
-          <Panel.Loader isLoading={status === 'pending'} />
           {data.pendingRestart && (
             <Info type='warning'>A port change is pending and will happen on the next restart.</Info>
           )}

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

@@ -15,11 +15,6 @@
   }
 }
 
-.logoActions {
-  display: flex;
-  gap: 0.5rem;
-}
-
 .customDataItem {
   width: 100%;
   display: flex;

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

@@ -90,13 +90,16 @@ export default function CustomTranslationModal({ isOpen, onClose }: CustomTransl
         <div className={style.footer}>
           {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
           <Panel.InlineElements align='apart'>
-            <Button variant='ghosted' onClick={resetToEnglish} disabled={isSubmitting}>
+            <Button variant='ghosted' size='large' onClick={resetToEnglish} disabled={isSubmitting}>
               Reset to English
             </Button>
             <Panel.InlineElements>
-              <Button onClick={onClose}>Cancel</Button>
+              <Button size='large' onClick={onClose}>
+                Cancel
+              </Button>
               <Button
                 variant='primary'
+                size='large'
                 type='submit'
                 form='custom-translations-form'
                 disabled={isSubmitting || !isDirty || !isValid}

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

@@ -109,16 +109,19 @@ export default function CodeEditorModal({ isOpen, onClose }: CodeEditorModalProp
           <Info>Invalid CSS will be refused by the browser</Info>
           {error && <Panel.Error className={style.right}>{`Error: ${error}`}</Panel.Error>}
           <Panel.InlineElements align='apart' className={style.editorActions}>
-            <Button variant='ghosted' onClick={handleRestore} disabled={saveLoading || resetLoading}>
+            <Button variant='ghosted' size='large' onClick={handleRestore} disabled={saveLoading || resetLoading}>
               Reset to example
             </Button>
             <Panel.InlineElements>
-              <Button variant='ghosted' onClick={clear}>
+              <Button variant='ghosted' size='large' onClick={clear}>
                 Clear
               </Button>
-              <Button onClick={onClose}>Cancel</Button>
+              <Button size='large' onClick={onClose}>
+                Cancel
+              </Button>
               <Button
                 variant='primary'
+                size='large'
                 onClick={handleSave}
                 disabled={saveLoading || resetLoading || !isDirty}
                 loading={saveLoading}

apps/client/src/features/app-settings/panel/shutdown-panel/ShutdownPanel.tsx

@@ -3,7 +3,6 @@ import { useRef } from 'react';
 
 import Button from '../../../../common/components/buttons/Button';
 import Dialog from '../../../../common/components/dialog/Dialog';
-import Info from '../../../../common/components/info/Info';
 import { useElectronEvent } from '../../../../common/hooks/useElectronEvent';
 import { isLocalhost, isOntimeCloud } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -24,50 +23,44 @@ export default function ShutdownPanel() {
     <>
       <Panel.Header>Shutdown Ontime</Panel.Header>
       <Panel.Section>
-        <Panel.Card>
+        {isOntimeCloud ? (
-          <Panel.SubHeader>Shutdown</Panel.SubHeader>
+          <Panel.Highlight>
-          <Panel.Divider />
+            For security reasons, shutting down the server must be done from the Ontime Cloud dashboard.
-          {isOntimeCloud ? (
+          </Panel.Highlight>
-            <Info type='warning'>
+        ) : (
-              For security reasons, shutting down the server must be done from the Ontime Cloud dashboard.
-            </Info>
-          ) : (
-            <Panel.Field
-              title='Stop the Ontime server'
-              description='The runtime state will be lost, but your project is kept for next time.'
-            />
-          )}
-          {!isOntimeCloud && (
-            <Panel.Section>
-              <Button variant='destructive' onClick={handler.open} disabled={!canShutdown}>
-                Shutdown ontime
-              </Button>
-              {!canShutdown && <Panel.Description>Only available from the machine running Ontime.</Panel.Description>}
-            </Panel.Section>
-          )}
-        </Panel.Card>
-      </Panel.Section>
-      <Dialog
-        isOpen={isOpen}
-        title='Shutdown Ontime'
-        showCloseButton
-        onClose={handler.close}
-        bodyElements={
           <Panel.Paragraph>
-            This will shutdown the Ontime server. <br /> Are you sure?
+            This will shutdown the Ontime server. <br />
+            The runtime state will be lost, but your project is kept for next time.
           </Panel.Paragraph>
-        }
+        )}
-        footerElements={
+        <Button variant='destructive' onClick={handler.open} disabled={!(isElectron || isLocalhost)}>
-          <>
+          Shutdown ontime
-            <Button ref={cancelRef} onClick={handler.close} variant='ghosted-white'>
+        </Button>
-              Cancel
+        {!canShutdown && (
-            </Button>
+          <Panel.Description>Note: Ontime can only be shutdown from the machine it is running in.</Panel.Description>
-            <Button variant='destructive' onClick={sendShutdown} disabled={!canShutdown}>
+        )}
-              Shutdown
+        <Dialog
-            </Button>
+          isOpen={isOpen}
-          </>
+          title='Shutdown Ontime'
-        }
+          showCloseButton
-      />
+          onClose={handler.close}
+          bodyElements={
+            <Panel.Paragraph>
+              This will shutdown the Ontime server. <br /> Are you sure?
+            </Panel.Paragraph>
+          }
+          footerElements={
+            <>
+              <Button ref={cancelRef} onClick={handler.close} variant='ghosted-white'>
+                Cancel
+              </Button>
+              <Button variant='destructive' onClick={sendShutdown} disabled={!canShutdown}>
+                Shutdown
+              </Button>
+            </>
+          }
+        />
+      </Panel.Section>
     </>
   );
 }

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

@@ -3,134 +3,95 @@ import { useMemo } from 'react';
 import useAppVersion from '../../common/hooks-query/useAppVersion';
 import { isDocker } from '../../externals';
 
-type SettingsOptionBase = {
+export type SettingsOption = {
   id: string;
   label: string;
+  secondary?: Readonly<SettingsOption[]>;
   highlight?: string;
 };
 
-export type SettingsOption =
-  | (SettingsOptionBase & { secondary: Readonly<SettingsOption[]>; keywords?: never })
-  | (SettingsOptionBase & { secondary?: never; keywords: Readonly<string[]> });
-
 const staticOptions = [
   {
     id: 'settings',
     label: 'Settings',
     secondary: [
-      { id: 'settings__data', label: 'Project data', keywords: ['title', 'description', 'logo', 'url', 'info'] },
+      { id: 'settings__data', label: 'Project data' },
-      {
+      { id: 'settings__general', label: 'General settings' },
-        id: 'settings__general',
+      { id: 'settings__view', label: 'View settings' },
-        label: 'General settings',
+      { id: 'settings__custom-views', label: 'Custom views' },
-        keywords: ['pin', 'password', 'lock', 'language', 'time format', 'timezone'],
+      { id: 'settings__mcp', label: 'MCP Server' },
-      },
+      ...(isDocker ? [] : [{ id: 'settings__port', label: 'Server port' }]),
-      {
-        id: 'settings__view',
-        label: 'View settings',
-        keywords: ['css', 'style', 'theme', 'translation', 'freeze', 'overtime'],
-      },
-      { id: 'settings__custom-views', label: 'Custom views', keywords: ['html', 'upload', 'external', 'embed'] },
-      { id: 'settings__mcp', label: 'MCP Server', keywords: ['ai', 'agent', 'model'] },
-      ...(isDocker ? [] : [{ id: 'settings__port', label: 'Server port', keywords: ['http', 'network', 'address'] }]),
     ],
   },
   {
     id: 'project',
     label: 'Project',
     secondary: [
-      { id: 'project__create', label: 'Create...', keywords: ['new project', 'quick start', 'wizard'] },
+      { id: 'project__create', label: 'Create...' },
-      {
+      { id: 'project__list', label: 'Manage projects' },
-        id: 'project__list',
-        label: 'Manage projects',
-        keywords: ['load', 'open', 'rename', 'duplicate', 'delete', 'download', 'import', 'backup', 'merge'],
-      },
     ],
   },
   {
     id: 'manage',
     label: 'Project settings',
     secondary: [
-      {
+      { id: 'manage__defaults', label: 'Rundown defaults' },
-        id: 'manage__defaults',
+      { id: 'manage__custom', label: 'Custom fields' },
-        label: 'Rundown defaults',
+      { id: 'manage__rundowns', label: 'Manage rundowns' },
-        keywords: ['duration', 'warning', 'danger', 'defaults'],
+      { id: 'manage__sheets', label: 'Import spreadsheet' },
-      },
+      { id: 'manage__sheets', label: 'Sync with Google Sheet' },
-      {
-        id: 'manage__custom',
-        label: 'Custom fields',
-        keywords: ['metadata', 'columns', 'extra data', 'image field'],
-      },
-      {
-        id: 'manage__rundowns',
-        label: 'Manage rundowns',
-        keywords: ['rundown', 'xlsx', 'excel', 'load', 'export'],
-      },
-      {
-        id: 'manage__sheets',
-        label: 'Import spreadsheet',
-        keywords: ['google sheet', 'sync', 'spreadsheet', 'xlsx', 'excel', 'csv', 'export'],
-      },
     ],
   },
   {
     id: 'automation',
     label: 'Automation',
     secondary: [
-      {
+      { id: 'automation__settings', label: 'Automation settings' },
-        id: 'automation__settings',
+      { id: 'automation__automations', label: 'Manage automations' },
-        label: 'Automation settings',
+      { id: 'automation__triggers', label: 'Manage triggers' },
-        keywords: ['osc input', 'port', 'enable', 'remote control'],
-      },
-      {
-        id: 'automation__automations',
-        label: 'Manage automations',
-        keywords: ['osc', 'http', 'webhook', 'integration', 'api', 'output', 'action'],
-      },
-      {
-        id: 'automation__triggers',
-        label: 'Manage triggers',
-        keywords: ['lifecycle', 'on load', 'on start', 'on finish', 'on update'],
-      },
     ],
   },
   {
     id: 'sharing',
     label: 'Sharing and reporting',
     secondary: [
-      { id: 'sharing__presets', label: 'URL Presets', keywords: ['alias', 'link', 'url', 'shortcut'] },
+      { id: 'sharing__presets', label: 'URL Presets' },
       {
         id: 'sharing__link',
         label: 'Share link',
-        keywords: ['qr code', 'guest', 'cuesheet link', 'permissions', 'read only'],
       },
-      { id: 'sharing__report', label: 'Runtime report', keywords: ['actual times', 'csv', 'export', 'history'] },
+      { id: 'sharing__report', label: 'Runtime report' },
     ],
   },
   {
     id: 'network',
     label: 'Network',
     secondary: [
+      {
+        id: 'network__status',
+        label: 'Server status',
+      },
+      {
+        id: 'network__interfaces',
+        label: 'Network interfaces',
+      },
       {
         id: 'network__log',
         label: 'Event log',
-        keywords: ['debug', 'errors', 'console', 'export log'],
       },
       {
         id: 'network__clients',
         label: 'Manage clients',
-        keywords: ['redirect', 'identify', 'rename client', 'connected'],
       },
     ],
   },
   {
     id: 'about',
     label: 'About',
-    keywords: ['version', 'update', 'licence', 'license', 'credits'],
   },
   {
     id: 'shutdown',
     label: 'Shutdown',
-    keywords: ['quit', 'exit', 'close ontime'],
   },
 ] as const;
 
@@ -139,51 +100,6 @@ export type SettingsOptionId =
   | (typeof staticOptions)[number]['id']
   | Extract<(typeof staticOptions)[number], { secondary: object }>['secondary'][number]['id'];
 
-function sanitiseSearchInput(query: string): string {
-  return query.trim().toLowerCase();
-}
-
-export function matchesSettingsOptionQuery(option: SettingsOption, query: string): boolean {
-  const sanitisedQuery = sanitiseSearchInput(query);
-  if (!sanitisedQuery) {
-    return false;
-  }
-
-  const sanitisedLabel = sanitiseSearchInput(option.label);
-  if (sanitisedLabel.includes(sanitisedQuery)) {
-    return true;
-  }
-
-  // check keywords
-  return Boolean(option.keywords?.some((keyword) => keyword.includes(sanitisedQuery)));
-}
-
-/**
- * Filters the settings menu against a user query.
- * A group is kept if it matches itself (with all its children) or if any of its children match.
- */
-export function filterSettingsOptions(options: Readonly<SettingsOption[]>, query: string): SettingsOption[] {
-  const sanitisedQuery = sanitiseSearchInput(query);
-  if (!sanitisedQuery) {
-    return [...options];
-  }
-
-  return options.reduce<SettingsOption[]>((accumulator, option) => {
-    if (matchesSettingsOptionQuery(option, sanitisedQuery)) {
-      accumulator.push(option);
-      return accumulator;
-    }
-
-    if (option.secondary) {
-      const secondary = option.secondary.filter((child) => matchesSettingsOptionQuery(child, sanitisedQuery));
-      if (secondary.length) {
-        accumulator.push({ ...option, secondary });
-      }
-    }
-    return accumulator;
-  }, []);
-}
-
 export function useAppSettingsMenu() {
   const { data } = useAppVersion();
 

apps/client/src/features/log/Log.module.scss

@@ -1,54 +1,20 @@
 $info-gray: $secondary-text-gray;
 $info-hover: $section-white;
 
-.container {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.extracted {
-  height: 100%;
-  padding: 1.5rem;
-  background-color: $white-3;
-  border: 1px solid $gray-1100;
-  border-radius: $component-border-radius-md;
-
-  .log {
-    flex: 1;
-    height: auto;
-    min-height: 0;
-    max-height: none;
-  }
-}
-
 .log {
   font-size: $inner-section-text-size;
   overflow-y: auto;
   user-select: text;
-  height: 40vh;
+  min-height: 20vh;
-  min-height: 40vh;
   max-height: 40vh;
-  margin: 0;
-  padding: 0.5rem;
   background-color: $gray-1350;
-  border: 1px solid $gray-1100;
+  padding: 0.5rem;
-  border-radius: $component-border-radius-md;
-  box-shadow: inset 0 1px 0 $white-3;
 }
 
 .apart {
   margin-left: auto;
 }
 
-.filterLabel {
-  color: $gray-400;
-  font-size: $aux-text-size;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
 .logEntry {
   display: flex;
 
@@ -78,19 +44,20 @@ $info-hover: $section-white;
 
   .msg {
     flex: 1;
-    min-width: 0;
-    overflow-wrap: anywhere;
   }
 }
 
-.empty {
-  padding: 2.5rem 1rem;
-  color: $gray-600;
-  text-align: center;
-}
-
 .buttonBar {
   flex-wrap: wrap;
-  gap: 0.5rem;
   padding-bottom: 0.5rem;
 }
+
+.count {
+  color: $info-gray;
+  white-space: nowrap;
+}
+
+.empty {
+  color: $info-gray;
+  padding: 0.5rem 0;
+}

apps/client/src/features/log/Log.tsx

@@ -1,140 +1,102 @@
-import { LogOrigin } from 'ontime-types';
+import { LogLevel, LogOrigin } from 'ontime-types';
 import { useCallback, useState } from 'react';
 import { IoClose } from 'react-icons/io5';
 
 import Button from '../../common/components/buttons/Button';
+import Input from '../../common/components/input/input/Input';
 import { clearLogs, useLogData } from '../../common/stores/logger';
-import { cx } from '../../common/utils/styleUtils';
 import * as Panel from '../app-settings/panel-utils/PanelUtils';
 
 import style from './Log.module.scss';
 
+const allOrigins = [
+  LogOrigin.User,
+  LogOrigin.Client,
+  LogOrigin.Server,
+  LogOrigin.Playback,
+  LogOrigin.Rx,
+  LogOrigin.Tx,
+];
+
 export default function Log() {
   const { logs: logData } = useLogData();
-  const isExtracted = window.location.pathname.includes('/log');
 
-  const [showClient, setShowClient] = useState(true);
+  // log entries are not guaranteed to have an origin from the enum
-  const [showServer, setShowServer] = useState(true);
+  const [origins, setOrigins] = useState<Set<string>>(() => new Set<string>(allOrigins));
-  const [showRx, setShowRx] = useState(true);
+  const [onlyProblems, setOnlyProblems] = useState(false);
-  const [showTx, setShowTx] = useState(true);
+  const [search, setSearch] = useState('');
-  const [showPlayback, setShowPlayback] = useState(true);
-  const [showUser, setShowUser] = useState(true);
 
-  const matchers: LogOrigin[] = [];
+  const toggleOrigin = useCallback((origin: LogOrigin) => {
-  if (showUser) {
+    setOrigins((previous) => {
-    matchers.push(LogOrigin.User);
+      const newOrigins = new Set(previous);
-  }
+      if (newOrigins.has(origin)) {
-  if (showClient) {
+        newOrigins.delete(origin);
-    matchers.push(LogOrigin.Client);
+      } else {
-  }
+        newOrigins.add(origin);
-  if (showServer) {
+      }
-    matchers.push(LogOrigin.Server);
+      return newOrigins;
-  }
+    });
-  if (showRx) {
-    matchers.push(LogOrigin.Rx);
-  }
-  if (showTx) {
-    matchers.push(LogOrigin.Tx);
-  }
-  if (showPlayback) {
-    matchers.push(LogOrigin.Playback);
-  }
-
-  const filteredData = logData.filter((entry) => matchers.some((match) => entry.origin === match));
-
-  const disableOthers = useCallback((toEnable: LogOrigin) => {
-    setShowUser(toEnable === LogOrigin.User);
-    setShowClient(toEnable === LogOrigin.Client);
-    setShowServer(toEnable === LogOrigin.Server);
-    setShowRx(toEnable === LogOrigin.Rx);
-    setShowTx(toEnable === LogOrigin.Tx);
-    setShowPlayback(toEnable === LogOrigin.Playback);
   }, []);
 
+  /** middle click on an origin shows only that origin */
+  const showOnlyOrigin = useCallback((origin: LogOrigin) => {
+    setOrigins(new Set([origin]));
+  }, []);
+
+  const searchTerm = search.toLowerCase();
+  const filteredData = logData.filter((entry) => {
+    if (!origins.has(entry.origin)) return false;
+    if (onlyProblems && entry.level === LogLevel.Info) return false;
+    if (searchTerm && !entry.text.toLowerCase().includes(searchTerm)) return false;
+    return true;
+  });
+
+  const isFiltered = filteredData.length !== logData.length;
+
   return (
-    <div className={cx([style.container, isExtracted && style.extracted])}>
+    <>
       <Panel.InlineElements className={style.buttonBar}>
-        <span className={style.filterLabel}>Filter by</span>
+        {allOrigins.map((origin) => (
+          <Button
+            key={origin}
+            variant={origins.has(origin) ? 'primary' : 'subtle'}
+            size='small'
+            onClick={() => toggleOrigin(origin)}
+            onAuxClick={() => showOnlyOrigin(origin)}
+            onContextMenu={(event) => event.preventDefault()}
+          >
+            {origin}
+          </Button>
+        ))}
         <Button
-          variant={showUser ? 'primary' : 'subtle'}
+          variant={onlyProblems ? 'primary' : 'subtle'}
           size='small'
-          aria-pressed={showUser}
+          onClick={() => setOnlyProblems((previous) => !previous)}
-          aria-label={`${showUser ? 'Hide' : 'Show'} ${LogOrigin.User} events`}
-          onClick={() => setShowUser((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.User)}
-          onContextMenu={(e) => e.preventDefault()}
         >
-          {LogOrigin.User}
+          Issues only
-        </Button>
-        <Button
-          variant={showClient ? 'primary' : 'subtle'}
-          size='small'
-          aria-pressed={showClient}
-          aria-label={`${showClient ? 'Hide' : 'Show'} ${LogOrigin.Client} events`}
-          onClick={() => setShowClient((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Client)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Client}
-        </Button>
-        <Button
-          variant={showServer ? 'primary' : 'subtle'}
-          size='small'
-          aria-pressed={showServer}
-          aria-label={`${showServer ? 'Hide' : 'Show'} ${LogOrigin.Server} events`}
-          onClick={() => setShowServer((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Server)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Server}
-        </Button>
-        <Button
-          variant={showPlayback ? 'primary' : 'subtle'}
-          size='small'
-          aria-pressed={showPlayback}
-          aria-label={`${showPlayback ? 'Hide' : 'Show'} ${LogOrigin.Playback} events`}
-          onClick={() => setShowPlayback((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Playback)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Playback}
-        </Button>
-        <Button
-          variant={showRx ? 'primary' : 'subtle'}
-          size='small'
-          aria-pressed={showRx}
-          aria-label={`${showRx ? 'Hide' : 'Show'} ${LogOrigin.Rx} events`}
-          onClick={() => setShowRx((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Rx)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Rx}
-        </Button>
-        <Button
-          variant={showTx ? 'primary' : 'subtle'}
-          size='small'
-          aria-pressed={showTx}
-          aria-label={`${showTx ? 'Hide' : 'Show'} ${LogOrigin.Tx} events`}
-          onClick={() => setShowTx((s) => !s)}
-          onAuxClick={() => disableOthers(LogOrigin.Tx)}
-          onContextMenu={(e) => e.preventDefault()}
-        >
-          {LogOrigin.Tx}
         </Button>
         <Button variant='subtle-destructive' size='small' onClick={clearLogs} className={style.apart}>
           <IoClose /> Clear
         </Button>
       </Panel.InlineElements>
-      <ul className={style.log} aria-label='Event log entries'>
+      <Panel.InlineElements className={style.buttonBar}>
-        {filteredData.length === 0 && <li className={style.empty}>No events match the selected filters.</li>}
+        <Input fluid placeholder='Filter messages' value={search} onChange={(event) => setSearch(event.target.value)} />
+        <span className={style.count}>
+          {isFiltered ? `${filteredData.length} of ${logData.length}` : logData.length} entries
+        </span>
+      </Panel.InlineElements>
+      <ul className={style.log}>
         {filteredData.map((logEntry) => (
-          <li key={logEntry.id} className={`${style.logEntry} ${style[logEntry.level]}`}>
+          <li key={logEntry.id} className={`${style.logEntry} ${style[logEntry.level]} `}>
             <span className={style.time}>{logEntry.time}</span>
             <span className={style.origin}>{logEntry.origin}</span>
             <span className={style.msg}>{logEntry.text}</span>
           </li>
         ))}
+        {filteredData.length === 0 && (
+          <li className={style.empty}>{logData.length === 0 ? 'No activity yet' : 'No entries match the filters'}</li>
+        )}
       </ul>
-    </div>
+    </>
   );
 }

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

@@ -1,7 +1,6 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import useFollowComponent from '../../common/hooks/useFollowComponent';
@@ -11,7 +10,6 @@ import { cx } from '../../common/utils/styleUtils';
 import { throttle } from '../../common/utils/throttle';
 import { getDefaultFormat } from '../../common/utils/time';
 import { isTouchDevice } from '../../externals';
-import { useTranslation } from '../../translation/TranslationProvider';
 import Loader from '../../views/common/loader/Loader';
 import CustomFieldEditModal from './custom-field-edit-modal/CustomFieldEditModal';
 import FollowButton from './follow-button/FollowButton';
@@ -37,7 +35,7 @@ export default function OperatorLoader() {
   }
 
   if (status === 'error') {
-    return <EmptyPage variant='error' text='There was an error fetching data, please refresh the page.' />;
+    return <EmptyPage text='There was an error fetching data, please refresh the page.' />;
   }
 
   return <Operator {...data} />;
@@ -45,7 +43,6 @@ export default function OperatorLoader() {
 
 function Operator({ rundown, rundownMetadata, customFields, settings }: OperatorData) {
   const selectedEventId = useSelectedEventId();
-  const { getLocalizedString } = useTranslation();
   const { subscribe, mainSource, secondarySource, shouldEdit, hidePast, showStart } = useOperatorOptions();
 
   const [showEditPrompt, setShowEditPrompt] = useState(false);
@@ -116,7 +113,6 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
   const operatorOptions = useMemo(() => getOperatorOptions(customFields, defaultFormat), [customFields, defaultFormat]);
 
   const canEdit = shouldEdit && subscribe.length;
-  const hasEvents = rundown.order.length > 0;
 
   return (
     <div className={style.operatorContainer} data-testid='operator-view'>
@@ -131,121 +127,117 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
         </div>
       )}
 
-      {!hasEvents ? (
+      <div className={style.operatorEvents} onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-        <EmptyFill text={getLocalizedString('common.no_data')} />
+        {rundown.order.map((entryId) => {
-      ) : (
+          const entry = rundown.entries[entryId];
-        <div className={style.operatorEvents} onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
+          if (isOntimeEvent(entry)) {
-          {rundown.order.map((entryId) => {
+            const { isPast, isLinkedToLoaded, isLoaded, totalGap } = rundownMetadata[entryId];
-            const entry = rundown.entries[entryId];
+            // hide past events (if setting) and skipped events
-            if (isOntimeEvent(entry)) {
+            if ((hidePast && isPast) || entry.skip) {
-              const { isPast, isLinkedToLoaded, isLoaded, totalGap } = rundownMetadata[entryId];
+              return null;
-              // hide past events (if setting) and skipped events
+            }
-              if ((hidePast && isPast) || entry.skip) {
-                return null;
-              }
 
-              const { mainField, secondaryField, subscribedData } = getEventData(
+            const { mainField, secondaryField, subscribedData } = getEventData(
-                entry,
+              entry,
-                mainSource,
+              mainSource,
-                secondarySource,
+              secondarySource,
-                subscribe,
+              subscribe,
-                customFields,
+              customFields,
-              );
+            );
 
-              return (
+            return (
-                <OperatorEvent
+              <OperatorEvent
+                key={entry.id}
+                id={entry.id}
+                colour={entry.colour}
+                cue={entry.cue}
+                main={mainField}
+                secondary={secondaryField}
+                timeStart={entry.timeStart}
+                duration={entry.duration}
+                delay={entry.delay}
+                dayOffset={entry.dayOffset}
+                isLinkedToLoaded={isLinkedToLoaded}
+                isSelected={isLoaded}
+                isPast={isPast}
+                selectedRef={isLoaded ? selectedRef : undefined}
+                showStart={showStart}
+                subscribed={subscribedData}
+                totalGap={totalGap}
+                onLongPress={canEdit ? handleEdit : () => undefined}
+              />
+            );
+          }
+
+          if (isOntimeGroup(entry)) {
+            const { isPast } = rundownMetadata[entry.id];
+
+            const isCurrentParent = selectedEventId ? rundownMetadata[selectedEventId]?.groupId === entry.id : false;
+
+            if (hidePast && isPast && !isCurrentParent) {
+              return null;
+            }
+
+            return (
+              <Fragment key={entry.id}>
+                <OperatorGroup
                   key={entry.id}
-                  id={entry.id}
+                  title={entry.title}
                   colour={entry.colour}
-                  cue={entry.cue}
+                  count={entry.entries.length}
-                  main={mainField}
-                  secondary={secondaryField}
-                  timeStart={entry.timeStart}
                   duration={entry.duration}
-                  delay={entry.delay}
-                  dayOffset={entry.dayOffset}
-                  isLinkedToLoaded={isLinkedToLoaded}
-                  isSelected={isLoaded}
-                  isPast={isPast}
-                  selectedRef={isLoaded ? selectedRef : undefined}
-                  showStart={showStart}
-                  subscribed={subscribedData}
-                  totalGap={totalGap}
-                  onLongPress={canEdit ? handleEdit : () => undefined}
                 />
-              );
+                {entry.entries.map((nestedEntryId) => {
-            }
+                  const nestedEntry = rundown.entries[nestedEntryId];
+                  if (!isOntimeEvent(nestedEntry)) {
+                    return null;
+                  }
 
-            if (isOntimeGroup(entry)) {
+                  const { isPast, isLoaded, isLinkedToLoaded, totalGap } = rundownMetadata[nestedEntryId];
-              const { isPast } = rundownMetadata[entry.id];
 
-              const isCurrentParent = selectedEventId ? rundownMetadata[selectedEventId]?.groupId === entry.id : false;
+                  // hide past events (if setting) and skipped events
+                  if ((hidePast && isPast) || nestedEntry.skip) {
+                    return null;
+                  }
 
-              if (hidePast && isPast && !isCurrentParent) {
+                  const { mainField, secondaryField, subscribedData } = getEventData(
-                return null;
+                    nestedEntry,
-              }
+                    mainSource,
+                    secondarySource,
+                    subscribe,
+                    customFields,
+                  );
 
-              return (
+                  return (
-                <Fragment key={entry.id}>
+                    <OperatorEvent
-                  <OperatorGroup
+                      key={nestedEntry.id}
-                    key={entry.id}
+                      id={nestedEntry.id}
-                    title={entry.title}
+                      colour={nestedEntry.colour}
-                    colour={entry.colour}
+                      cue={nestedEntry.cue}
-                    count={entry.entries.length}
+                      main={mainField}
-                    duration={entry.duration}
+                      secondary={secondaryField}
-                  />
+                      timeStart={nestedEntry.timeStart}
-                  {entry.entries.map((nestedEntryId) => {
+                      duration={nestedEntry.duration}
-                    const nestedEntry = rundown.entries[nestedEntryId];
+                      delay={nestedEntry.delay}
-                    if (!isOntimeEvent(nestedEntry)) {
+                      dayOffset={nestedEntry.dayOffset}
-                      return null;
+                      isLinkedToLoaded={isLinkedToLoaded}
-                    }
+                      isSelected={isLoaded}
-
+                      isPast={isPast}
-                    const { isPast, isLoaded, isLinkedToLoaded, totalGap } = rundownMetadata[nestedEntryId];
+                      groupColour={entry.colour}
-
+                      selectedRef={isLoaded ? selectedRef : undefined}
-                    // hide past events (if setting) and skipped events
+                      showStart={showStart}
-                    if ((hidePast && isPast) || nestedEntry.skip) {
+                      subscribed={subscribedData}
-                      return null;
+                      totalGap={totalGap}
-                    }
+                      onLongPress={canEdit ? handleEdit : () => undefined}
-
+                    />
-                    const { mainField, secondaryField, subscribedData } = getEventData(
+                  );
-                      nestedEntry,
+                })}
-                      mainSource,
+              </Fragment>
-                      secondarySource,
+            );
-                      subscribe,
+          }
-                      customFields,
+          return null;
-                    );
+        })}
-
+      </div>
-                    return (
-                      <OperatorEvent
-                        key={nestedEntry.id}
-                        id={nestedEntry.id}
-                        colour={nestedEntry.colour}
-                        cue={nestedEntry.cue}
-                        main={mainField}
-                        secondary={secondaryField}
-                        timeStart={nestedEntry.timeStart}
-                        duration={nestedEntry.duration}
-                        delay={nestedEntry.delay}
-                        dayOffset={nestedEntry.dayOffset}
-                        isLinkedToLoaded={isLinkedToLoaded}
-                        isSelected={isLoaded}
-                        isPast={isPast}
-                        groupColour={entry.colour}
-                        selectedRef={isLoaded ? selectedRef : undefined}
-                        showStart={showStart}
-                        subscribed={subscribedData}
-                        totalGap={totalGap}
-                        onLongPress={canEdit ? handleEdit : () => undefined}
-                      />
-                    );
-                  })}
-                </Fragment>
-              );
-            }
-            return null;
-          })}
-        </div>
-      )}
       <FollowButton isVisible={lockAutoScroll} onClickHandler={handleOffset} />
     </div>
   );

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

@@ -2,6 +2,7 @@
 
 .event {
   opacity: 1;
+  border-top: 1px solid $white-1;
   padding-right: 0.5rem;
   color: $white-90;
   background-color: $viewer-card-bg-color;
@@ -30,6 +31,7 @@
   }
 
   &.running {
+    border-top: 1px solid $gray-1300;
     background-color: var(--operator-running-bg-override, $active-green);
   }
 
@@ -40,7 +42,8 @@
   }
 
   &.past {
-    opacity: 0.4;
+    border-top: 1px solid transparent;
+    opacity: 0.2;
   }
 }
 
@@ -76,7 +79,6 @@
 
 .mainField {
   grid-area: main;
-  min-width: 0;
   font-size: 1.5rem;
   color: $ui-white;
 
@@ -142,7 +144,6 @@
 
 .fields {
   grid-area: fields;
-  min-width: 0;
   margin-top: 0;
   border-top: 0;
 
@@ -170,9 +171,10 @@
   &.fieldsWithContent {
     margin-top: 0.25rem;
     padding-block: 0.5rem;
+    border-top: 1px solid $white-13;
 
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
     gap: 0.25rem 0.75rem;
     line-height: 1.25em;
     font-size: var(--operator-customfield-font-size-override, 1.25rem);