fix(cuesheet): keep original "Hide seconds in table" option label

Revert the label rename from the previous commit; only the behavior scope changes (time tags only), not the option's display name. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SoUSFVFdmMQN5Ro86pRvBQ
fix(cuesheet): hide seconds option should not affect duration column
2026-09-05 22:39:11 +00:00 · 2026-09-05 16:22:01 +00:00 · 2026-09-05 16:19:56 +00:00 · 2026-09-05 09:24:42 +02:00 · 2026-09-05 09:15:08 +02:00
28 changed files with 346 additions and 319 deletions
@@ -7,13 +7,15 @@
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="theme-color" content="#101010" />
    <meta name="ontime" content="ontime - time keeping for live events" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Ontime" />
    <link rel="apple-touch-icon" href="ontime-logo.png" />
    <link rel="icon" type="image/png" href="ontime-logo.png" />
-    <link rel="manifest" href="site.webmanifest" />
    <link rel="manifest" href="manifest.json" />
    <meta name="robots" content="noindex" />
-    <title>ontime</title>
+    <title>Ontime</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -1,19 +1,21 @@
 {
-  "name": "ontime",
-  "short_name": "ontime",
+  "name": "Ontime",
+  "short_name": "Ontime",
  "icons": [
    {
-      "src": "favicon.ico",
-      "type": "image/x-icon"
+      "src": "ontime-logo-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
    },
    {
-      "src": "ontime-logo.png",
+      "src": "ontime-logo-512.png",
+      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "scope": "./",
  "start_url": "./",
-  "display": "",
-  "theme_color": "#121212",
+  "display": "standalone",
+  "theme_color": "#101010",
  "background_color": "#101010"
 }
@@ -1,8 +0,0 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [{ "src": "ontime-logo.png", "sizes": "295x295", "type": "image/png" }],
-  "theme_color": "#121212",
-  "background_color": "#101010",
-  "display": "standalone"
-}
@@ -2,8 +2,8 @@ import { MaybeString } from 'ontime-types';
 import { RefObject, useCallback, useEffect } from 'react';

 function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends HTMLElement>(
-  componentRef: RefObject<ComponentRef>,
-  scrollRef: RefObject<ScrollRef>,
+  componentRef: RefObject<ComponentRef | null>,
+  scrollRef: RefObject<ScrollRef | null>,
  topOffset: number,
 ) {
  if (!componentRef.current || !scrollRef.current) {
@@ -21,18 +21,16 @@ interface UseFollowComponentProps {
  followRef: RefObject<HTMLElement | null>;
  scrollRef: RefObject<HTMLElement | null>;
  doFollow: boolean;
-  topOffset?: number;
-  setScrollFlag?: (newValue: boolean) => void;
-  followTrigger?: MaybeString; // this would be an entry id or null
+  followTrigger: MaybeString; // this would be an entry id or null
+  getTopOffset: () => number;
 }

 export default function useFollowComponent({
  followRef,
  scrollRef,
  doFollow,
-  topOffset = 100,
-  setScrollFlag,
  followTrigger,
+  getTopOffset,
 }: UseFollowComponentProps) {
  // when trigger moves, view should follow
  useEffect(() => {
@@ -41,25 +39,17 @@ export default function useFollowComponent({
    }

    if (followRef.current && scrollRef.current) {
-      setScrollFlag?.(true);
      // Use requestAnimationFrame to ensure the component is fully loaded
      window.requestAnimationFrame(() => {
-        scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
-        setScrollFlag?.(false);
+        // resolve the offset after layout, so that measured values are up to date
+        scrollToComponent(followRef, scrollRef, getTopOffset());
      });
    }
-  }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
+  }, [followTrigger, doFollow, followRef, scrollRef, getTopOffset]);

-  const scrollToRefComponent = useCallback(
-    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
-      if (componentRef && containerRef) {
-        // @ts-expect-error -- we know this are not null
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        scrollToComponent(componentRef!, containerRef!, offset);
-      }
-    },
-    [followRef, scrollRef, topOffset],
-  );
+  const scrollToRefComponent = useCallback(() => {
+    scrollToComponent(followRef, scrollRef, getTopOffset());
+  }, [followRef, scrollRef, getTopOffset]);

  return scrollToRefComponent;
 }
@@ -6,6 +6,6 @@ import { useEffect } from 'react';
 */
 export function useWindowTitle(title: string) {
  useEffect(() => {
-    document.title = `ontime - ${title}`;
+    document.title = `Ontime - ${title}`;
  }, []);
 }
@@ -1,26 +0,0 @@
-import { getRememberedDimensions, rememberDimensions } from '../imageDimensions';
-
-/** stand-in for a loaded HTMLImageElement */
-function makeImage(naturalWidth: number, naturalHeight: number) {
-  return { naturalWidth, naturalHeight } as HTMLImageElement;
-}
-
-test('We remember the size of an image, so that we can reserve its space when it comes back', () => {
-  expect(getRememberedDimensions('http://ontime.local/unseen.png')).toBe(null);
-
-  rememberDimensions('http://ontime.local/image.png', makeImage(1920, 1080));
-  expect(getRememberedDimensions('http://ontime.local/image.png')).toMatchObject({ width: 1920, height: 1080 });
-
-  // an image which failed to load has no size to offer
-  rememberDimensions('http://ontime.local/broken.png', makeImage(0, 0));
-  expect(getRememberedDimensions('http://ontime.local/broken.png')).toBe(null);
-});
-
-test('We keep the most recently seen images, older entries are forgotten', () => {
-  for (let i = 0; i < 600; i++) {
-    rememberDimensions(`http://ontime.local/${i}.png`, makeImage(100, 50));
-  }
-
-  expect(getRememberedDimensions('http://ontime.local/0.png')).toBe(null);
-  expect(getRememberedDimensions('http://ontime.local/599.png')).toMatchObject({ width: 100, height: 50 });
-});
@@ -1,49 +0,0 @@
-/**
- * Images in the cuesheet live inside a virtualised table:
- * rows are unmounted when they leave the viewport and mounted again when they come back.
- * A re-mounted image has no dimensions until it is available,
- * which makes the row change height and the table shift under the user.
- *
- * We remember the size of the images we have already seen
- * so that we can reserve the space they will take.
- * This only holds two numbers per image: we leave the image data itself to the browser cache,
- * which knows better than us when memory should be released.
- */
-
-export interface ImageDimensions {
-  width: number;
-  height: number;
-}
-
-/** how many sizes we remember, this is only a few bytes per entry */
-const maxSize = 500;
-
-const dimensions = new Map<string, ImageDimensions>();
-
-/**
- * @returns the size of a previously loaded image, if we have seen it before
- */
-export function getRememberedDimensions(src: string): ImageDimensions | null {
-  return dimensions.get(src) ?? null;
-}
-
-/**
- * Records the size of a loaded image
- */
-export function rememberDimensions(src: string, image: HTMLImageElement) {
-  if (image.naturalHeight === 0) {
-    return;
-  }
-
-  // the map iteration order is our LRU queue, re-adding the entry marks it as recently used
-  dimensions.delete(src);
-  dimensions.set(src, { width: image.naturalWidth, height: image.naturalHeight });
-
-  while (dimensions.size > maxSize) {
-    const oldest = dimensions.keys().next();
-    if (oldest.done) {
-      return;
-    }
-    dimensions.delete(oldest.value);
-  }
-}
@@ -40,7 +40,7 @@ export default function ShutdownPanel() {
          {!isOntimeCloud && (
            <Panel.Section>
              <Button variant='destructive' onClick={handler.open} disabled={!canShutdown}>
-                Shutdown ontime
+                Shutdown Ontime
              </Button>
              {!canShutdown && <Panel.Description>Only available from the machine running Ontime.</Panel.Description>}
            </Panel.Section>
@@ -18,6 +18,12 @@
  padding-bottom: 95vh;
 }

+.groupSection {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .editPrompt {
  position: fixed;
  z-index: $zindex-dialog;
@@ -1,5 +1,5 @@
 import { OntimeView, isOntimeEvent, isOntimeGroup } from 'ontime-types';
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

 import EmptyFill from '../../common/components/state/EmptyFill';
 import EmptyPage from '../../common/components/state/EmptyPage';
@@ -25,7 +25,10 @@ import { OperatorData, useOperatorData } from './useOperatorData';

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

-const selectedOffset = 50;
+/** Keeps the running event clear of the list edge when no group header is pinned above it */
+const edgeOffset = 50;
+/** How far the running event may drift from where we placed it before we stop following */
+const followTolerance = 50;

 export default function OperatorLoader() {
  const { data, status } = useOperatorData();
@@ -54,11 +57,20 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
+
+  // The header height varies with the viewport, so measure it at scroll time.
+  const getTopOffset = useCallback(() => {
+    const header = stickyHeaderRef.current;
+    // Sit right under the pinned header, so it covers the previous event instead of half of it.
+    return header ? header.offsetHeight + 2 : edgeOffset;
+  }, []);
+
  const scrollToComponent = useFollowComponent({
    followRef: selectedRef,
    scrollRef,
    doFollow: !lockAutoScroll,
-    topOffset: selectedOffset,
+    getTopOffset,
    followTrigger: selectedEventId,
  });

@@ -82,15 +94,16 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator

  // prevent considering automated scrolls as user scrolls
  const handleUserScroll = () => {
-    if (selectedRef?.current && scrollRef?.current) {
-      const selectedRect = selectedRef.current.getBoundingClientRect();
-      const scrollerRect = scrollRef.current.getBoundingClientRect();
-      if (selectedRect && scrollerRect) {
-        const distanceFromTop = selectedRect.top - scrollerRect.top;
-        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
-        setLockAutoScroll(hasScrolledOutOfThreshold);
-      }
+    if (!selectedRef.current || !scrollRef.current) {
+      return;
    }
+
+    const selectedRect = selectedRef.current.getBoundingClientRect();
+    const scrollerRect = scrollRef.current.getBoundingClientRect();
+    // Measure the drift from where an automated scroll would place the event.
+    const distanceFromTop = selectedRect.top - scrollerRect.top - getTopOffset();
+    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > followTolerance;
+    setLockAutoScroll(hasScrolledOutOfThreshold);
  };
  const throttledHandleScroll = throttle(handleUserScroll, 1000);

@@ -186,9 +199,9 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
              }

              return (
-                <Fragment key={entry.id}>
+                <div className={style.groupSection} key={entry.id}>
                  <OperatorGroup
-                    key={entry.id}
+                    ref={isCurrentParent ? stickyHeaderRef : undefined}
                    title={entry.title}
                    colour={entry.colour}
                    count={entry.entries.length}
@@ -239,7 +252,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
                      />
                    );
                  })}
-                </Fragment>
+                </div>
              );
            }
            return null;
@@ -1,13 +1,20 @@
 .group {
  width: 100%;
+  /* Padding is kept under the min-height so a single line fits without the list having to shrink the header,
+     while a taller title still grows the row. */
  min-height: 2.5rem;
-  padding: 0.4rem 0.75rem;
+  padding: 0.25rem 0.75rem;
  border-left: 0.35rem solid var(--group-colour, $gray-500);
  background-color: $gray-1350;
  background: color-mix(in srgb, transparent 88%, var(--group-colour, $gray-500) 12%);
  font-size: 1.25rem;
  font-weight: 600;

+  position: sticky;
+  /* Cover the list padding so rows cannot scroll above the header. */
+  top: -0.25rem;
+  z-index: 1;
+
  display: flex;
  align-items: center;
  gap: 1rem;
@@ -1,4 +1,4 @@
-import { CSSProperties, memo } from 'react';
+import { type CSSProperties, type Ref, memo } from 'react';

 import { getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration } from '../../../common/utils/time';
@@ -10,15 +10,16 @@ interface OperatorGroup {
  colour: string;
  count: number;
  duration: number;
+  ref?: Ref<HTMLDivElement>;
 }

 export default memo(OperatorGroup);
-function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
+function OperatorGroup({ title, colour, count, duration, ref }: OperatorGroup) {
  const groupColour = colour || '#929292';
  const groupColours = getAccessibleColour(groupColour);

  return (
-    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
+    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties} ref={ref}>
      <span className={style.title}>{title}</span>
      <span className={style.meta}>
        <span>{`${count} ${count === 1 ? 'event' : 'events'}`}</span>
@@ -100,7 +100,20 @@ $item-height: 3.5rem;
    flex-direction: column;
    overflow-y: auto;

-    padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
+    padding-bottom: 95vh;
+  }
+
+  /* Flex prevents row margins collapsing and bounds the sticky header to its group. */
+  .sub-section {
+    display: flex;
+    flex-direction: column;
+
+    /* The select view renders the same cards in a flat list. */
+    .sub--group {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
  }

  /* ====================== LIST-ITEM ======================*/
@@ -196,9 +209,14 @@ $item-height: 3.5rem;

  .sub--group {
    box-shadow: inset 0 0 0 1px var(--user-color, $gray-1325);
-    background:
+    /* The opaque base prevents rows showing through; background shorthand cannot layer this colour. */
+    background-color: var(--background-color-override, $viewer-background-color);
+    background-image:
      linear-gradient(90deg, color-mix(in srgb, var(--user-color, transparent) 18%, transparent), transparent 42%),
-      var(--card-background-color-override, $viewer-card-bg-color);
+      linear-gradient(
+        var(--card-background-color-override, $viewer-card-bg-color),
+        var(--card-background-color-override, $viewer-card-bg-color)
+      );

    .sub__binder {
      background: var(--user-color, var(--card-background-color-override, $viewer-card-bg-color));
@@ -230,6 +248,16 @@ $item-height: 3.5rem;
    }
  }

+  /* Reserve the green fill for the running event. */
+  .sub--group.sub--live {
+    box-shadow: inset 0 0 0 2px $active-green;
+  }
+
+  /* Keep the armed state quieter than the live ring. */
+  .sub--group.sub--armed {
+    box-shadow: inset 0 0 0 2px $gray-1000;
+  }
+
  .sub__title {
    grid-area: title;
    padding-bottom: 0.5rem;
@@ -1,6 +1,6 @@
 import { MaybeNumber, OntimeEvent } from 'ontime-types';
 import { dayInMs } from 'ontime-utils';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { IoPencil } from 'react-icons/io5';

 import Button from '../../common/components/buttons/Button';
@@ -22,6 +22,7 @@ import {
  CountdownTarget,
  extendEventData,
  getIsLive,
+  groupSubscriptionTargets,
  isOutsideRange,
  preferredFormat12,
  preferredFormat24,
@@ -48,11 +49,22 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode
  const [lockAutoScroll, setLockAutoScroll] = useState(false);
  const selectedRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const stickyHeaderRef = useRef<HTMLDivElement | null>(null);
+
+  const sections = useMemo(() => groupSubscriptionTargets(subscribedEvents), [subscribedEvents]);
+
+  // Responsive sizing and wrapped titles make the sticky header height variable, so measure it at scroll time.
+  const getStickyOffset = useCallback(() => {
+    const header = stickyHeaderRef.current;
+    // Preserve the combined margins between the header and running event.
+    return header ? header.offsetHeight + 4 : 0;
+  }, []);
+
  const scrollToComponent = useFollowComponent({
    followRef: selectedRef,
    scrollRef,
    doFollow: !lockAutoScroll,
-    topOffset: 0,
+    getTopOffset: getStickyOffset,
    followTrigger: selectedEventId,
  });

@@ -75,15 +87,16 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode

  // prevent considering automated scrolls as user scrolls
  const handleUserScroll = () => {
-    if (selectedRef?.current && scrollRef?.current) {
-      const selectedRect = selectedRef.current.getBoundingClientRect();
-      const scrollerRect = scrollRef.current.getBoundingClientRect();
-      if (selectedRect && scrollerRect) {
-        const distanceFromTop = selectedRect.top - scrollerRect.top;
-        const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
-        setLockAutoScroll(hasScrolledOutOfThreshold);
-      }
+    if (!selectedRef.current || !scrollRef.current) {
+      return;
    }
+
+    const selectedRect = selectedRef.current.getBoundingClientRect();
+    const scrollerRect = scrollRef.current.getBoundingClientRect();
+    // Keep the threshold relative to the visible rows below the sticky header.
+    const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
+    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > 50;
+    setLockAutoScroll(hasScrolledOutOfThreshold);
  };
  const throttledHandleScroll = throttle(handleUserScroll, 1000);

@@ -98,41 +111,63 @@ export default function CountdownSubscriptions({ subscribedEvents, goToEditMode

  return (
    <div className='list-container' onWheel={handleScroll} onTouchMove={handleScroll} ref={scrollRef}>
-      {subscribedEvents.map((event) => {
-        // while a group is live, surface the running event's title as the secondary line
-        const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
-        const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
-        const isGroupedEvent = !event.isGroup && Boolean(event.parent);
-        const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
-        // a subscribed group is live when any of its children is the selected/running event
-        const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
-        const isArmed = !isLive && activeEntryId === selectedEventId;
-        const countdownEvent = extendEventData(event, currentDay, actualStart, plannedStart, offset, mode, reportData);
-        const displayTitle = getPropertyValue(event, mainSource ?? 'title');
+      {sections.map((section) => {
+        const rows = section.group ? [section.group, ...section.events] : section.events;
+        // the running event anchors the scroll, the group header stays pinned above it
+        const anchorId = section.events.find((event) => getIsLive(event.id, selectedEventId, playback))?.id ?? null;
+
        return (
-          <div
-            key={event.id}
-            ref={isLive ? selectedRef : undefined}
-            className={cx([
-              'sub',
-              isLive && 'sub--live',
-              isArmed && 'sub--armed',
-              event.isGroup && 'sub--group',
-              isGroupedEvent && 'sub--in-group',
-            ])}
-            data-testid={event.cue}
-          >
-            <div
-              className='sub__binder'
-              style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
-            />
-            <ScheduleTime event={countdownEvent} showExpected={showExpected} />
-            <SubscriptionStatus event={countdownEvent} />
-            <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
-              {event.isGroup && <span className='sub__eyebrow'>Group</span>}
-              {displayTitle}
-            </div>
-            {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
+          <div key={section.group?.id ?? rows[0].id} className='sub-section'>
+            {rows.map((event) => {
+              // while a group is live, surface the running event's title as the secondary line
+              const liveTitle = event.isGroup && event.liveEntry ? event.liveEntry.title : undefined;
+              const secondaryData = liveTitle ?? getPropertyValue(event, secondarySource);
+              const isGroupedEvent = !event.isGroup && Boolean(event.parent);
+              const activeEntryId = event.isGroup ? (event.liveEntry?.id ?? event.targetId) : event.id;
+              // a subscribed group is live when any of its children is the selected/running event
+              const isLive = activeEntryId ? getIsLive(activeEntryId, selectedEventId, playback) : false;
+              const isArmed = !isLive && activeEntryId === selectedEventId;
+              // only ever hand the ref to a single row, sharing it would null it out on the next commit
+              const isAnchor = isLive && (anchorId === null || event.id === anchorId);
+              const rowRef = isAnchor ? selectedRef : event.isGroup && anchorId ? stickyHeaderRef : undefined;
+              const countdownEvent = extendEventData(
+                event,
+                currentDay,
+                actualStart,
+                plannedStart,
+                offset,
+                mode,
+                reportData,
+              );
+              const displayTitle = getPropertyValue(event, mainSource ?? 'title');
+
+              return (
+                <div
+                  key={event.id}
+                  ref={rowRef}
+                  className={cx([
+                    'sub',
+                    isLive && 'sub--live',
+                    isArmed && 'sub--armed',
+                    event.isGroup && 'sub--group',
+                    isGroupedEvent && 'sub--in-group',
+                  ])}
+                  data-testid={event.cue}
+                >
+                  <div
+                    className='sub__binder'
+                    style={{ '--user-color': event.colour, '--group-color': event.groupColour ?? 'transparent' }}
+                  />
+                  <ScheduleTime event={countdownEvent} showExpected={showExpected} />
+                  <SubscriptionStatus event={countdownEvent} />
+                  <div className={cx(['sub__title', !displayTitle && 'subdued'])}>
+                    {event.isGroup && <span className='sub__eyebrow'>Group</span>}
+                    {displayTitle}
+                  </div>
+                  {secondaryData && <div className='sub__secondary'>{secondaryData}</div>}
+                </div>
+              );
+            })}
          </div>
        );
      })}
@@ -1,7 +1,7 @@
 import { OntimeEntry, OntimeEvent, OntimeGroup, SupportedEntry } from 'ontime-types';

 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
-import { resolveSubscriptionTarget } from './countdown.utils';
+import { CountdownTarget, groupSubscriptionTargets, resolveSubscriptionTarget } from './countdown.utils';

 /**
 * Minimal builders for the extended (metadata enriched) entries the countdown view consumes.
@@ -126,3 +126,89 @@ describe('resolveSubscriptionTarget()', () => {
    expect(result?.liveEntry).toBeNull();
  });
 });
+
+describe('groupSubscriptionTargets()', () => {
+  /**
+   * Resolves a group the same way the view does, so that the tests exercise the real target shape
+   * (a resolved group carries type Event, so the helper cannot rely on the entry type)
+   */
+  function resolveGroup(group: ExtendedEntry<OntimeGroup>, flat: ExtendedEntry<OntimeEntry>[]): CountdownTarget {
+    const resolved = resolveSubscriptionTarget(group, flat);
+    if (resolved === null) {
+      throw new Error('test setup: group has no playable children');
+    }
+    return resolved;
+  }
+
+  it('returns no sections for an empty subscription list', () => {
+    expect(groupSubscriptionTargets([])).toEqual([]);
+  });
+
+  it('gives each ungrouped event its own section', () => {
+    const e1 = makeEvent({ id: 'e1' });
+    const e2 = makeEvent({ id: 'e2' });
+
+    expect(groupSubscriptionTargets([e1, e2])).toEqual([
+      { group: null, events: [e1] },
+      { group: null, events: [e2] },
+    ]);
+  });
+
+  it('absorbs the children of a subscribed group into its section', () => {
+    const group = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const c2 = makeEvent({ id: 'c2', parent: 'g1' });
+    const resolved = resolveGroup(group, [group, c1, c2]);
+
+    expect(groupSubscriptionTargets([resolved, c1, c2])).toEqual([{ group: resolved, events: [c1, c2] }]);
+  });
+
+  it('keeps a subscribed group with no subscribed children as an empty section', () => {
+    const group = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const resolved = resolveGroup(group, [group, c1]);
+
+    expect(groupSubscriptionTargets([resolved])).toEqual([{ group: resolved, events: [] }]);
+  });
+
+  it('does not absorb an event which belongs to a different group', () => {
+    const group1 = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const group2 = makeGroup({ id: 'g2' });
+    const c2 = makeEvent({ id: 'c2', parent: 'g2' });
+    const flat = [group1, c1, group2, c2];
+    const resolved1 = resolveGroup(group1, flat);
+    const resolved2 = resolveGroup(group2, flat);
+
+    expect(groupSubscriptionTargets([resolved1, c1, resolved2, c2])).toEqual([
+      { group: resolved1, events: [c1] },
+      { group: resolved2, events: [c2] },
+    ]);
+  });
+
+  it('does not absorb an event whose parent group is not subscribed', () => {
+    const group1 = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const group2 = makeGroup({ id: 'g2' });
+    const c2 = makeEvent({ id: 'c2', parent: 'g2' });
+    const resolved1 = resolveGroup(group1, [group1, c1, group2, c2]);
+
+    // only the first group is subscribed, so the second group's child stands alone
+    expect(groupSubscriptionTargets([resolved1, c1, c2])).toEqual([
+      { group: resolved1, events: [c1] },
+      { group: null, events: [c2] },
+    ]);
+  });
+
+  it('closes a section when an ungrouped event follows a group', () => {
+    const group = makeGroup({ id: 'g1' });
+    const c1 = makeEvent({ id: 'c1', parent: 'g1' });
+    const e1 = makeEvent({ id: 'e1' });
+    const resolved = resolveGroup(group, [group, c1]);
+
+    expect(groupSubscriptionTargets([resolved, c1, e1])).toEqual([
+      { group: resolved, events: [c1] },
+      { group: null, events: [e1] },
+    ]);
+  });
+});
@@ -252,6 +252,42 @@ export function resolveSubscriptionTarget(
  };
 }

+/**
+ * A subscribed group along with the subscribed events which belong to it.
+ * Events without a subscribed parent group form their own section with no group.
+ */
+export type CountdownSection = {
+  group: CountdownTarget | null;
+  events: CountdownTarget[];
+};
+
+/**
+ * Folds the flat, rundown ordered subscription targets into sections.
+ * A group opens a section which absorbs the following targets that declare it as parent,
+ * which allows the group to be rendered as a sticky header for its own events.
+ */
+export function groupSubscriptionTargets(targets: CountdownTarget[]): CountdownSection[] {
+  const sections: CountdownSection[] = [];
+
+  for (const target of targets) {
+    // resolveSubscriptionTarget spreads the first child, so we cannot rely on the entry type here
+    if (target.isGroup) {
+      sections.push({ group: target, events: [] });
+      continue;
+    }
+
+    const previousSection = sections.at(-1);
+    if (previousSection?.group?.id === target.parent) {
+      previousSection.events.push(target);
+      continue;
+    }
+
+    sections.push({ group: null, events: [target] });
+  }
+
+  return sections;
+}
+
 export function extendEventData(
  event: CountdownTarget,
  currentDay: number,
@@ -1,18 +0,0 @@
-import { isValidImageSource } from '../cuesheet-table/cuesheet-table-elements/EditableImage';
-
-test('An image is referenced by link, anything else is rejected', () => {
-  const testCases = [
-    { value: 'https://example.com/image.png', isValid: true },
-    { value: 'http://example.com/image.png', isValid: true },
-    // a file is local to the machine running ontime, it would not resolve for the clients we serve
-    { value: '/user/image.png', isValid: false },
-    { value: 'file:///Users/me/image.png', isValid: false },
-    { value: 'C:\\images\\image.png', isValid: false },
-    // values which do not describe a location we can reach
-    { value: 'www.example.com/image.png', isValid: false },
-    { value: 'https://', isValid: false },
-    { value: 'some text', isValid: false },
-  ];
-
-  testCases.forEach((t) => expect(isValidImageSource(t.value)).toBe(t.isValid));
-});
@@ -5,19 +5,6 @@
  &:not(:read-only):hover::placeholder {
    opacity: 1;
  }
-
-  &[data-invalid] {
-    outline: 1px solid $red-500;
-  }
-}
-
-/** feedback on a value we cannot use, either rejected or failed to load */
-.message {
-  display: block;
-  padding: 0.25rem 0;
-  color: $red-500;
-  font-size: calc(1rem - 3px);
-  line-height: 1.2;
 }

 .imageCell {
@@ -1,54 +1,27 @@
-import { memo, useState } from 'react';
+import { memo } from 'react';

 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
-import { getRememberedDimensions, rememberDimensions } from '../../../../common/utils/imageDimensions';

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

 interface EditableImageProps {
  initialValue: string;
-  fieldLabel: string;
  readOnly?: boolean;
  updateValue: (newValue: string) => void;
 }

 export default memo(EditableImage);

-/**
- * Images are referenced by link: anything local to the machine running ontime
- * would not resolve for the clients we serve the cuesheet to
- */
-export function isValidImageSource(value: string): boolean {
-  try {
-    const url = new URL(value);
-    return url.protocol === 'http:' || url.protocol === 'https:';
-  } catch {
-    return false;
-  }
-}
-
-function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: EditableImageProps) {
-  const [isRejected, setIsRejected] = useState(false);
-  /** we keep track of the source itself, so that the state follows the value being shown */
-  const [failedSource, setFailedSource] = useState<string | null>(null);
-  const [loadedSource, setLoadedSource] = useState<string | null>(null);
-
+function EditableImage({ initialValue, readOnly, updateValue }: EditableImageProps) {
  const handleUpdate = (newValue: string) => {
-    const value = newValue.trim();
-
-    if (value === initialValue) {
-      setIsRejected(false);
+    if (newValue === initialValue) {
      return;
    }
-
-    if (value !== '' && !isValidImageSource(value)) {
-      setIsRejected(true);
+    if (newValue !== '' && !newValue.startsWith('http')) {
      return;
    }
-
-    setIsRejected(false);
-    updateValue(value);
+    updateValue(newValue);
  };

  const openInNewTab = () => {
@@ -63,42 +36,22 @@ function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: Edit

  if (!initialValue) {
    return (
-      <>
-        <Input
-          variant='ghosted'
-          className={style.imageInput}
-          fluid
-          placeholder='Paste image URL'
-          data-invalid={isRejected || undefined}
-          onChange={() => setIsRejected(false)}
-          onBlur={(event) => handleUpdate(event.currentTarget.value)}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              handleUpdate(event.currentTarget.value);
-            }
-          }}
-        />
-        {isRejected && <span className={style.message}>Images are referenced by link (https://...)</span>}
-      </>
+      <Input
+        variant='ghosted'
+        className={style.imageInput}
+        fluid
+        placeholder='Paste image URL'
+        onBlur={(event) => handleUpdate(event.currentTarget.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            handleUpdate(event.currentTarget.value);
+          }
+        }}
+        defaultValue={initialValue}
+      />
    );
  }

-  /**
-   * The cuesheet is virtualised: rows are unmounted once they leave the viewport.
-   * When the row comes back, we reserve the space the image took
-   * so that the table does not shift while the browser makes it available.
-   * The reservation is given in CSS so that it follows the column being resized,
-   * the same way the image itself does once it is shown.
-   */
-  const knownDimensions = getRememberedDimensions(initialValue);
-  const isLoaded = loadedSource === initialValue;
-  const reservedSpace = knownDimensions
-    ? {
-        aspectRatio: knownDimensions.width / knownDimensions.height,
-        width: `min(100%, ${knownDimensions.width}px)`,
-      }
-    : undefined;
-
  return (
    <div className={style.imageCell}>
      {!readOnly && (
@@ -109,22 +62,7 @@ function EditableImage({ initialValue, fieldLabel, readOnly, updateValue }: Edit
          </Button>
        </div>
      )}
-      {failedSource === initialValue ? (
-        <span className={style.message}>Could not load image</span>
-      ) : (
-        <img
-          src={initialValue}
-          alt={fieldLabel}
-          className={style.image}
-          onLoad={(event) => {
-            rememberDimensions(initialValue, event.currentTarget);
-            setLoadedSource(initialValue);
-          }}
-          onError={() => setFailedSource(initialValue)}
-          /** until the image is available, we reserve the space it took the last time we saw it */
-          style={isLoaded ? undefined : reservedSpace}
-        />
-      )}
+      {Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />}
    </div>
  );
 }
@@ -105,10 +105,9 @@ function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {
    return null;
  }

-  const { hideTableSeconds } = table.options.meta.options;
  const event = row.original;
  if (!isOntimeEvent(event)) {
-    return <MutedText numeric>{formatDuration(getValue() as number, hideTableSeconds)}</MutedText>;
+    return <MutedText numeric>{formatDuration(getValue() as number, false)}</MutedText>;
  }

  const { handleUpdateTimer } = table.options.meta;
@@ -117,7 +116,7 @@ function MakeDuration({ getValue, row, table, column }: CuesheetCellContext) {

  const duration = getValue() as number;
  const isDurationLocked = event.timeStrategy === TimeStrategy.LockDuration;
-  const formattedDuration = formatDuration(duration, hideTableSeconds);
+  const formattedDuration = formatDuration(duration, false);

  const canWrite = column.columnDef.meta?.canWrite;
  if (!canWrite) {
@@ -175,14 +174,7 @@ function LazyImage({ row, column, table }: CuesheetCellContext) {

  const canWrite = column.columnDef.meta?.canWrite;
  const initialValue = event.custom[column.id];
-  return (
-    <EditableImage
-      initialValue={initialValue}
-      fieldLabel={getColumnLabel(column)}
-      updateValue={update}
-      readOnly={!canWrite}
-    />
-  );
+  return <EditableImage initialValue={initialValue} updateValue={update} readOnly={!canWrite} />;
 }

 function MakeSingleLineField({ row, column, table }: CuesheetCellContext) {
@@ -6,7 +6,7 @@
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src 'unsafe-inline'; script-src 'self'"
    />
-    <title>ontime</title>
+    <title>Ontime</title>
    <style>
      body {
        -webkit-user-select: none;
@@ -92,7 +92,7 @@
  <body>
    <div class="container">
      <img src="../assets/logo.png" />
-      <h1>ontime · event timers</h1>
+      <h1>Ontime · event timers</h1>
      <div class="lds-ellipsis">
        <div></div>
        <div></div>
@@ -16,7 +16,7 @@
      body {
        width: 100%;
        height: 100%;
-        background: #121212;
+        background: #101010;
        color: #ffffff;
        font-family: sans-serif;
        overflow: hidden;
@@ -29,15 +29,19 @@ function makeHeadersWithFailingAuthorization(cookie?: string) {

 describe('isPublicAssetRequest()', () => {
  it('allows root public assets without a prefix', () => {
-    expect(isPublicAssetRequest('/site.webmanifest', '')).toBe(true);
    expect(isPublicAssetRequest('/manifest.json', '')).toBe(true);
  });

  it('allows prefixed public assets in cloud deployments', () => {
-    expect(isPublicAssetRequest('/stage-hash/site.webmanifest', '/stage-hash')).toBe(true);
+    expect(isPublicAssetRequest('/stage-hash/manifest.json', '/stage-hash')).toBe(true);
    expect(isPublicAssetRequest('/stage-hash/ontime-logo.png?cache=1', '/stage-hash')).toBe(true);
  });

+  it('allows the PWA install icons', () => {
+    expect(isPublicAssetRequest('/ontime-logo-192.png', '')).toBe(true);
+    expect(isPublicAssetRequest('/ontime-logo-512.png', '')).toBe(true);
+  });
+
  it('keeps non-public paths protected', () => {
    expect(isPublicAssetRequest('/stage-hash/data', '/stage-hash')).toBe(false);
    expect(isPublicAssetRequest('/backstage', '')).toBe(false);
@@ -17,8 +17,9 @@ const publicAssets = new Set([
  '/favicon.ico',
  '/manifest.json',
  '/ontime-logo.png',
+  '/ontime-logo-192.png',
+  '/ontime-logo-512.png',
  '/robots.txt',
-  '/site.webmanifest',
 ]);

 export function isPublicAssetRequest(originalUrl: string, prefix: string): boolean {
@@ -6,7 +6,7 @@ test.describe('pages routes are available', () => {
    test('editor', async ({ page }) => {
      await page.goto('/editor');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
      await expect(page.getByTestId('editor-container')).toBeVisible();
      await expect(page.getByTestId('panel-rundown')).toBeVisible();
      await expect(page.getByTestId('panel-timer-control')).toBeVisible();
@@ -16,38 +16,38 @@ test.describe('pages routes are available', () => {
    test('cuesheet', async ({ page }) => {
      await page.goto('/cuesheet');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
      await expect(page.getByTestId('cuesheet')).toBeVisible();
    });

    test('operator', async ({ page }) => {
      await page.goto('/op');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
    });

    test('timer', async ({ page }) => {
      await page.goto('/timer');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
    });

    test('backstage', async ({ page }) => {
      await page.goto('/backstage');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
    });

    test('studio', async ({ page }) => {
      await page.goto('/studio');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);
    });

    test('countdown', async ({ page }) => {
      await page.goto('/countdown?sub=32d31');

-      await expect(page).toHaveTitle(/ontime/);
+      await expect(page).toHaveTitle(/ontime/i);

      await expect(page.getByText('Albania')).toBeVisible();
      await expect(page.getByText('Latvia')).toBeHidden();
@@ -92,12 +92,12 @@ test.describe('test view navigation feature', () => {
  test('not-found', async ({ page }) => {
    await page.goto('/not-found');

-    await expect(page).toHaveTitle(/ontime/);
+    await expect(page).toHaveTitle(/ontime/i);
    await expect(page.getByRole('heading', { name: 'Not found' })).toBeVisible();

    await page.goto('/preset/not-found');

-    await expect(page).toHaveTitle(/ontime/);
+    await expect(page).toHaveTitle(/ontime/i);
    await expect(page.getByRole('heading', { name: 'Not found' })).toBeVisible();
  });
 });
Author	SHA1	Message	Date
Claude	650c5eb66a	fix(cuesheet): keep original "Hide seconds in table" option label Revert the label rename from the previous commit; only the behavior scope changes (time tags only), not the option's display name. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SoUSFVFdmMQN5Ro86pRvBQ	2026-09-05 16:22:01 +00:00
Claude	36b05f499e	fix(cuesheet): hide seconds option should not affect duration column The "hide seconds" toggle in the Cuesheet table settings was also stripping seconds from the Duration column. It should only apply to the Start/End time tags, so the Duration column now always displays its full precision (including seconds). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SoUSFVFdmMQN5Ro86pRvBQ	2026-09-05 16:19:56 +00:00
Carlos Valente	977b01a072	fix: keep group visible as header for the running event	2026-09-05 09:24:42 +02:00
SMPTY	dd718230ad	fix(client): fix PWA manifest so "Install as App" works properly (#2192 )	2026-09-05 09:15:08 +02:00