fix: keep group visible as header for the running event

apps/client/src/AppRouter.tsx

@@ -3,7 +3,6 @@ import { ComponentType, Suspense, lazy, useEffect, useMemo } from 'react';
 import { Navigate, Route, useLocation, useNavigate, useParams } from 'react-router';
 
 import ViewNavigationMenu from './common/components/navigation-menu/ViewNavigationMenu';
-import { EditableRundownScopeProvider } from './common/context/EditableRundownScopeProvider';
 import { PresetContext } from './common/context/PresetContext';
 import useUrlPresets from './common/hooks-query/useUrlPresets';
 import { useClientPath } from './common/hooks/useClientPath';
@@ -113,9 +112,7 @@ export default function AppRouter() {
           path='rundown'
           element={
             <EditorFeatureWrapper>
-              <EditableRundownScopeProvider rundownId={null}>
-                <RundownPanel />
-              </EditableRundownScopeProvider>
+              <RundownPanel />
             </EditorFeatureWrapper>
           }
         />

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

@@ -22,14 +22,6 @@ export const CLIENT_LIST = ['clientList'];
 export const REPORT = ['report'];
 export const TRANSLATION = ['translation'];
 
-/**
- * Cache key holding the data for a rundown.
- * Before the loaded rundown is known there is no id to key by,
- * and the data lives under the bootstrap alias.
- */
-export const getRundownCacheKey = (rundownId: string) =>
-  rundownId ? getRundownQueryKey(rundownId) : CURRENT_RUNDOWN_QUERY_KEY;
-
 // API URLs
 export const apiEntryUrl = `${serverURL}/data`;
 

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

@@ -1,24 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-import { useScopedEntryActions } from '../hooks/useEntryAction';
-import { EntryActionsProvider } from './EntryActionsContext';
-import { RundownScopeProvider, useRundownScope, type RundownScopeProviderProps } from './RundownScopeContext';
-
-/**
- * Rundown scope for subtrees which mutate entries.
- * Actions are bound to the same rundown as the data, so the two cannot disagree.
- */
-export function EditableRundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
-  return (
-    <RundownScopeProvider rundownId={rundownId}>
-      <ScopedEntryActions>{children}</ScopedEntryActions>
-    </RundownScopeProvider>
-  );
-}
-
-function ScopedEntryActions({ children }: PropsWithChildren) {
-  const { rundownId } = useRundownScope();
-  const actions = useScopedEntryActions(rundownId);
-
-  return <EntryActionsProvider actions={actions}>{children}</EntryActionsProvider>;
-}

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

@@ -1,77 +0,0 @@
-import { MaybeString, Rundown } from 'ontime-types';
-import { PropsWithChildren, createContext, useContext, useEffect, useMemo, useRef } from 'react';
-
-import { getRundownCacheKey } from '../api/constants';
-import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
-import { ontimeQueryClient } from '../queryClient';
-import { createEventSelectionStore, type EventSelectionStoreApi } from '../stores/eventSelectionStore';
-
-export type RundownScopeValue = {
-  /** the rundown this subtree operates on */
-  rundownId: string;
-  /** whether this scope targets the rundown the runtime is playing */
-  isLoaded: boolean;
-  /** selection and cursor, scoped to this rundown */
-  selectionStore: EventSelectionStoreApi;
-};
-
-const RundownScopeContext = createContext<RundownScopeValue | null>(null);
-
-export interface RundownScopeProviderProps extends PropsWithChildren {
-  /** rundown to operate on, null follows the loaded rundown */
-  rundownId: MaybeString;
-}
-
-/**
- * Declares which rundown a subtree reads from.
- *
- * Data hooks resolve their rundown from here, so components never need to know
- * which rundown they operate on. Nest a provider to point part of the tree at a
- * different rundown; the app mounts one at the root that follows the loaded rundown.
- */
-export function RundownScopeProvider({ children, rundownId }: RundownScopeProviderProps) {
-  const {
-    data: { loaded },
-  } = useProjectRundowns();
-
-  const targetId = rundownId ?? loaded;
-
-  // the store reads the rundown lazily, the ref keeps it pointing at the current target
-  const targetIdRef = useRef(targetId);
-
-  const selectionStoreRef = useRef<EventSelectionStoreApi | null>(null);
-  if (selectionStoreRef.current === null) {
-    selectionStoreRef.current = createEventSelectionStore(() =>
-      ontimeQueryClient.getQueryData<Rundown>(getRundownCacheKey(targetIdRef.current)),
-    );
-  }
-  const selectionStore = selectionStoreRef.current;
-
-  // a selection refers to entries of a single rundown, it cannot survive a change of target
-  useEffect(() => {
-    targetIdRef.current = targetId;
-    selectionStore.getState().clearSelectedEvents();
-  }, [selectionStore, targetId]);
-
-  const value = useMemo(
-    (): RundownScopeValue => ({
-      rundownId: targetId,
-      // an unresolved target is not the loaded rundown, it is not yet any rundown
-      isLoaded: Boolean(loaded) && targetId === loaded,
-      selectionStore,
-    }),
-    [targetId, loaded, selectionStore],
-  );
-
-  return <RundownScopeContext.Provider value={value}>{children}</RundownScopeContext.Provider>;
-}
-
-export function useRundownScope(): RundownScopeValue {
-  const context = useContext(RundownScopeContext);
-
-  if (!context) {
-    throw new Error('useRundownScope must be used within a RundownScopeProvider');
-  }
-
-  return context;
-}

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

@@ -1,73 +0,0 @@
-import { EntryId, OntimeEntry } from 'ontime-types';
-import { useMemo } from 'react';
-
-import { useSelectedEventId } from '../hooks/useSocket';
-import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
-import { useProjectRundowns } from './useProjectRundowns';
-import { flattenRundown, useRundownById } from './useRundownById';
-
-/**
- * Rundown data for surfaces which only ever work against the rundown being played:
- * the viewers, the operator, app settings and the runtime overview.
- *
- * These take no part in a rundown scope, they resolve the loaded rundown directly.
- * Anything which can be pointed at a background rundown reads from its scope instead.
- */
-export function useLoadedRundown() {
-  const {
-    data: { loaded },
-  } = useProjectRundowns();
-  return useRundownById(loaded);
-}
-
-export function useLoadedRundownWithMetadata() {
-  const { data, status } = useLoadedRundown();
-  const selectedEventId = useSelectedEventId();
-  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
-  return { data, status, rundownMetadata };
-}
-
-export function useLoadedFlatRundown() {
-  const { data, status } = useLoadedRundown();
-  const flatRundown = useMemo(() => flattenRundown(data), [data]);
-  return { data: flatRundown, rundownId: data.id, status };
-}
-
-export function useLoadedFlatRundownWithMetadata() {
-  const { data, status } = useLoadedRundown();
-  const selectedEventId = useSelectedEventId();
-  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
-  return { data: rundownWithMetadata, status };
-}
-
-/**
- * Provides access to a partial rundown based on a filter callback
- *
- * Callers MUST memoize the callback with useCallback to prevent
- * re-filtering on every render.
- */
-export function useLoadedPartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
-  const { data, status } = useLoadedFlatRundownWithMetadata();
-  const filteredData = useMemo(() => data.filter(cb), [data, cb]);
-  return { data: filteredData, status };
-}
-
-/**
- * Hook to get a specific entry by ID from the loaded rundown.
- * Runtime ids (the playing event, its group, the next flag) only exist here.
- */
-export function useLoadedEntry(entryId: EntryId | null): OntimeEntry | null {
-  const { data: rundown } = useLoadedRundown();
-
-  if (entryId === null) return null;
-  return rundown.entries[entryId] ?? null;
-}
-
-export function useLoadedRundownAuxData() {
-  const { data, status } = useLoadedRundown();
-  const filteredData = useMemo(() => {
-    const { title, id } = data;
-    return { title, id };
-  }, [data]);
-  return { data: filteredData, status };
-}

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

@@ -1,32 +1,61 @@
-import { EntryId, OntimeEntry } from 'ontime-types';
-import { useMemo } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { EntryId, OntimeEntry, Rundown } from 'ontime-types';
+import { useEffect, useMemo } from 'react';
 
-import { useRundownScope } from '../context/RundownScopeContext';
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
+import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
+import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
-import { getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
-import { flattenRundown, useRundownById } from './useRundownById';
+import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
+import { useProjectRundowns } from './useProjectRundowns';
+
+// revision is -1 so that the remote revision is higher
+const cachedRundownPlaceholder: Rundown = {
+  id: 'default',
+  title: '',
+  order: [],
+  flatOrder: [],
+  entries: {},
+  revision: -1,
+};
 
 /**
- * Normalised rundown data for the rundown of the enclosing scope
+ * Normalised rundown data for the currently loaded rundown.
+ *
+ * Bootstraps via the `/current` alias so the first paint is a single round-trip,
+ * independent of the project rundown list. Once the loaded id is known, the
+ * query key swaps to the id-keyed cache that is shared with `useRundownById`.
  */
 export default function useRundown() {
-  const { rundownId } = useRundownScope();
-  return useRundownById(rundownId);
-}
+  const queryClient = useQueryClient();
+  const {
+    data: { loaded: loadedRundownId },
+  } = useProjectRundowns();
 
-/**
- * Runtime state only describes the loaded rundown,
- * a scope pointed elsewhere must not show a playing event
- */
-export function useScopedSelectedEventId(): EntryId | null {
-  const { isLoaded } = useRundownScope();
-  const selectedEventId = useSelectedEventId();
-  return isLoaded ? selectedEventId : null;
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
+    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  // Seed the id-keyed cache when fetching via the bootstrap alias
+  useEffect(() => {
+    if (!data || loadedRundownId) return;
+    queryClient.setQueryData(getRundownQueryKey(data.id), data);
+  }, [data, loadedRundownId, queryClient]);
+
+  // Once we have the ID, drop the temporary current cache
+  useEffect(() => {
+    if (!loadedRundownId) return;
+    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
+  }, [loadedRundownId, queryClient]);
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
 }
 
 export function useRundownWithMetadata() {
   const { data, status } = useRundown();
-  const selectedEventId = useScopedSelectedEventId();
+  const selectedEventId = useSelectedEventId();
   const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
   return { data, status, rundownMetadata };
 }
@@ -37,19 +66,41 @@ export function useRundownWithMetadata() {
  */
 export function useFlatRundown() {
   const { data, status } = useRundown();
-  const flatRundown = useMemo(() => flattenRundown(data), [data]);
+
+  const flatRundown = useMemo(() => {
+    if (data.revision === -1) {
+      return [];
+    }
+    return data.flatOrder.map((id) => data.entries[id]).filter((entry): entry is OntimeEntry => entry !== undefined);
+  }, [data]);
 
   return { data: flatRundown, rundownId: data.id, status };
 }
 
 export function useFlatRundownWithMetadata() {
   const { data, status } = useRundown();
-  const selectedEventId = useScopedSelectedEventId();
+  const selectedEventId = useSelectedEventId();
 
   const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
   return { data: rundownWithMetadata, status };
 }
 
+/**
+ * Provides access to a partial rundown based on a filter callback
+ *
+ * Callers MUST memoize the callback with useCallback to prevent
+ * re-filtering on every render.
+ *
+ */
+export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
+  const { data, status } = useFlatRundownWithMetadata();
+  const filteredData = useMemo(() => {
+    return data.filter(cb);
+  }, [data, cb]);
+
+  return { data: filteredData, status };
+}
+
 /**
  * Hook to get a specific entry by ID from the rundown
  */
@@ -59,3 +110,30 @@ export function useEntry(entryId: EntryId | null): OntimeEntry | null {
   if (entryId === null) return null;
   return rundown.entries[entryId] ?? null;
 }
+
+export function useRundownAuxData() {
+  const { data, status } = useRundown();
+  const filteredData = useMemo(() => {
+    const { title, id } = data;
+    return { title, id };
+  }, [data]);
+  return { data: filteredData, status };
+}
+
+/**
+ * Provides access to a specific rundown by ID.
+ * When rundownId is null/undefined the query is disabled and returns the placeholder.
+ */
+export function useRundownById(rundownId: string | null | undefined) {
+  const enabled = Boolean(rundownId);
+
+  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
+    queryKey: getRundownQueryKey(rundownId ?? ''),
+    queryFn: ({ signal }) => fetchRundown(rundownId!, { signal }),
+    enabled,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
+  });
+
+  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
+}

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

@@ -1,66 +0,0 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { OntimeEntry, Rundown } from 'ontime-types';
-import { useEffect, useRef } from 'react';
-
-import { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { CURRENT_RUNDOWN_QUERY_KEY, getRundownCacheKey, getRundownQueryKey } from '../api/constants';
-import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
-
-// revision is -1 so that the remote revision is higher
-const cachedRundownPlaceholder: Rundown = {
-  id: 'default',
-  title: '',
-  order: [],
-  flatOrder: [],
-  entries: {},
-  revision: -1,
-};
-
-/**
- * Provides access to a specific rundown by ID.
- *
- * Without an ID we do not yet know which rundown is loaded, so we bootstrap via
- * the `/current` alias to keep the first paint to a single round-trip, then seed
- * the id-keyed cache that every other reader shares.
- */
-export function useRundownById(rundownId: string | null | undefined) {
-  const queryClient = useQueryClient();
-  const id = rundownId ?? '';
-  const isBootstrap = id === '';
-
-  const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
-    queryKey: getRundownCacheKey(id),
-    queryFn: ({ signal }) => (isBootstrap ? fetchCurrentRundown({ signal }) : fetchRundown(id, { signal })),
-    placeholderData: (previousData, _previousQuery) => previousData,
-    refetchInterval: queryRefetchIntervalSlow,
-  });
-
-  // Seed the id-keyed cache when fetching via the bootstrap alias
-  useEffect(() => {
-    if (!data || !isBootstrap) return;
-    queryClient.setQueryData(getRundownQueryKey(data.id), data);
-  }, [data, isBootstrap, queryClient]);
-
-  // Once we have the ID, drop the temporary current cache.
-  // Only the reader which bootstrapped may do so, others are still relying on it.
-  const didBootstrap = useRef(isBootstrap);
-  useEffect(() => {
-    if (isBootstrap || !didBootstrap.current) return;
-    didBootstrap.current = false;
-    queryClient.removeQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
-  }, [isBootstrap, queryClient]);
-
-  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching };
-}
-
-/**
- * Builds a flat rundown from the order and entries fields
- */
-export function flattenRundown(rundown: Rundown): OntimeEntry[] {
-  if (rundown.revision === -1) {
-    return [];
-  }
-  return rundown.flatOrder
-    .map((id) => rundown.entries[id])
-    .filter((entry): entry is OntimeEntry => entry !== undefined);
-}

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

@@ -0,0 +1,54 @@
+import { EntryId, Rundown } from 'ontime-types';
+import { useMemo } from 'react';
+
+import { useSelectedEventId } from '../hooks/useSocket';
+import { getFlatRundownMetadata, type ExtendedEntry } from '../utils/rundownMetadata';
+import { useProjectRundowns } from './useProjectRundowns';
+import { useRundownById } from './useRundown';
+
+export type RundownSource = {
+  rundownId: string | null;
+  rundown: Rundown;
+  flatRundown: ExtendedEntry[];
+  status: string;
+  selectedEventId: EntryId | null;
+};
+
+/**
+ * Explicitly scoped rundown data for views that may operate on a non-loaded rundown.
+ */
+export function useScopedRundown(rundownId: string | null): RundownSource {
+  const { data: projectRundowns } = useProjectRundowns();
+  return useRundownSource(rundownId, projectRundowns.loaded || null);
+}
+
+/**
+ * Loaded-rundown source for views that must follow the active runtime rundown.
+ */
+export function useLoadedRundownSource(): RundownSource {
+  const { data: projectRundowns } = useProjectRundowns();
+  const loadedRundownId = projectRundowns.loaded || null;
+  return useRundownSource(loadedRundownId, loadedRundownId);
+}
+
+function useRundownSource(rundownId: string | null, loadedRundownId: string | null): RundownSource {
+  const isLoadedTarget = rundownId !== null && rundownId === loadedRundownId;
+  const runtimeSelectedEventId = useSelectedEventId();
+  const effectiveSelectedEventId = isLoadedTarget ? runtimeSelectedEventId : null;
+  const { data: rundown, status } = useRundownById(rundownId);
+  const flatRundown = useMemo(
+    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
+    [effectiveSelectedEventId, rundown],
+  );
+
+  return useMemo(
+    () => ({
+      rundownId,
+      rundown,
+      flatRundown,
+      status,
+      selectedEventId: effectiveSelectedEventId,
+    }),
+    [effectiveSelectedEventId, flatRundown, rundown, rundownId, status],
+  );
+}

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

@@ -8,6 +8,7 @@ import {
   OntimeGroup,
   OntimeMilestone,
   PatchWithId,
+  ProjectRundownsList,
   Rundown,
   SupportedEntry,
   TimeField,
@@ -33,7 +34,7 @@ import {
 import { useCallback, useMemo } from 'react';
 
 import { moveDown, moveUp, orderEntries } from '../../features/rundown/rundown.utils';
-import { getRundownCacheKey } from '../api/constants';
+import { CURRENT_RUNDOWN_QUERY_KEY, PROJECT_RUNDOWNS, getRundownQueryKey } from '../api/constants';
 import {
   ReorderEntry,
   deleteEntries,
@@ -51,7 +52,6 @@ import {
   requestFitGroupTarget,
 } from '../api/rundown';
 import { logAxiosError } from '../api/utils';
-import { useRundownScope } from '../context/RundownScopeContext';
 import { useEditorSettings } from '../stores/editorSettings';
 
 export type EventOptions = Partial<{
@@ -70,16 +70,16 @@ type ClientInsertOptions = {
 };
 
 /**
- * Gather utilities for actions on entries in the rundown of the enclosing scope.
+ * Gather utilities for actions on entries in the loaded rundown.
  */
-export const useEntryActions = () => useEntryActionsForRundown(useRundownScope().rundownId);
+export const useEntryActions = () => useEntryActionsForRundown(undefined);
 
 /**
  * Gather utilities for actions on entries in an explicitly selected rundown.
  */
-export const useScopedEntryActions = (rundownId: MaybeString) => useEntryActionsForRundown(rundownId ?? '');
+export const useScopedEntryActions = (rundownId: string | null) => useEntryActionsForRundown(rundownId ?? '');
 
-function useEntryActionsForRundown(scopedRundownId: string) {
+function useEntryActionsForRundown(scopedRundownId: string | undefined) {
   const queryClient = useQueryClient();
   const {
     linkPrevious,
@@ -93,8 +93,12 @@ function useEntryActionsForRundown(scopedRundownId: string) {
   } = useEditorSettings();
 
   const resolveCurrentRundownQueryKey = useCallback(() => {
-    return getRundownCacheKey(scopedRundownId);
-  }, [scopedRundownId]);
+    if (scopedRundownId !== undefined) {
+      return getRundownQueryKey(scopedRundownId);
+    }
+    const loadedRundownId = queryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
+    return loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY;
+  }, [queryClient, scopedRundownId]);
 
   /**
    * Returns the currently loaded rundown

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

@@ -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) {
@@ -17,11 +17,17 @@ function scrollToComponent<ComponentRef extends HTMLElement, ScrollRef extends H
   scrollRef.current.scrollTo({ top, behavior: 'smooth' });
 }
 
+type TopOffset = number | (() => number);
+
+function resolveTopOffset(topOffset: TopOffset) {
+  return typeof topOffset === 'function' ? topOffset() : topOffset;
+}
+
 interface UseFollowComponentProps {
   followRef: RefObject<HTMLElement | null>;
   scrollRef: RefObject<HTMLElement | null>;
   doFollow: boolean;
-  topOffset?: number;
+  topOffset?: TopOffset;
   setScrollFlag?: (newValue: boolean) => void;
   followTrigger?: MaybeString; // this would be an entry id or null
 }
@@ -44,18 +50,17 @@ export default function useFollowComponent({
       setScrollFlag?.(true);
       // Use requestAnimationFrame to ensure the component is fully loaded
       window.requestAnimationFrame(() => {
-        scrollToComponent(followRef as RefObject<HTMLElement>, scrollRef as RefObject<HTMLElement>, topOffset);
+        // resolve the offset after layout, so that measured values are up to date
+        scrollToComponent(followRef, scrollRef, resolveTopOffset(topOffset));
         setScrollFlag?.(false);
       });
     }
   }, [followTrigger, doFollow, followRef, scrollRef, setScrollFlag, topOffset]);
 
   const scrollToRefComponent = useCallback(
-    (componentRef = followRef, containerRef = scrollRef, offset = topOffset) => {
+    (componentRef = followRef, containerRef = scrollRef, offset?: number) => {
       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);
+        scrollToComponent(componentRef, containerRef, offset ?? resolveTopOffset(topOffset));
       }
     },
     [followRef, scrollRef, topOffset],

apps/client/src/common/stores/__tests__/eventSelectionStore.test.ts

@@ -1,64 +0,0 @@
-import { Rundown, SupportedEntry } from 'ontime-types';
-
-import { createEventSelectionStore } from '../eventSelectionStore';
-
-function makeRundown(id: string, eventIds: string[]): Rundown {
-  return {
-    id,
-    title: id,
-    order: eventIds,
-    flatOrder: eventIds,
-    entries: Object.fromEntries(eventIds.map((entryId) => [entryId, { id: entryId, type: SupportedEntry.Event }])),
-    revision: 1,
-  } as unknown as Rundown;
-}
-
-describe('createEventSelectionStore', () => {
-  it('keeps selections of separate instances independent', () => {
-    const first = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
-    const second = createEventSelectionStore(() => makeRundown('rundown-b', ['b1', 'b2']));
-
-    first.getState().setSingleEntrySelection({ id: 'a1' });
-    second.getState().setSingleEntrySelection({ id: 'b2' });
-
-    expect(first.getState().cursor).toBe('a1');
-    expect(second.getState().cursor).toBe('b2');
-    expect(first.getState().selectedEvents).toEqual(new Set(['a1']));
-    expect(second.getState().selectedEvents).toEqual(new Set(['b2']));
-  });
-
-  it('resolves a shift range against the injected rundown', () => {
-    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2', 'a3']));
-
-    store.getState().setSelectedEvents({ id: 'a3', index: 2, selectMode: 'shift' });
-
-    // without an anchor the range runs from the top up to the clicked index
-    expect(store.getState().selectedEvents).toEqual(new Set(['a1', 'a2']));
-    expect(store.getState().anchoredIndex).toBe(2);
-  });
-
-  it('replaces the selection set so subscribers on the set re-render', () => {
-    const store = createEventSelectionStore(() => makeRundown('rundown-a', ['a1', 'a2']));
-
-    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'click' });
-    const afterClick = store.getState().selectedEvents;
-
-    store.getState().setSelectedEvents({ id: 'a2', index: 1, selectMode: 'ctrl' });
-    const afterAdd = store.getState().selectedEvents;
-    expect(afterAdd).not.toBe(afterClick);
-    expect(afterAdd).toEqual(new Set(['a1', 'a2']));
-
-    store.getState().unselect('a1');
-    const afterUnselect = store.getState().selectedEvents;
-    expect(afterUnselect).not.toBe(afterAdd);
-    expect(afterUnselect).toEqual(new Set(['a2']));
-  });
-
-  it('does not select when the rundown is unavailable', () => {
-    const store = createEventSelectionStore(() => undefined);
-
-    store.getState().setSelectedEvents({ id: 'a1', index: 0, selectMode: 'shift' });
-
-    expect(store.getState().selectedEvents).toEqual(new Set());
-  });
-});

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

@@ -1,21 +1,14 @@
-import { MaybeString } from 'ontime-types';
 import { create } from 'zustand';
 
 type EntryCopyStore = {
-  entryCopyId: MaybeString;
-  /** rundown the copied entry belongs to, so a paste knows whether it crosses rundowns */
-  entryCopyRundownId: MaybeString;
+  entryCopyId: string | null;
   entryCopyMode: 'copy' | 'cut';
-  setEntryCopyId: (eventId: MaybeString, rundownId: MaybeString, mode?: 'copy' | 'cut') => void;
+  setEntryCopyId: (eventId: string | null, mode?: 'copy' | 'cut') => void;
 };
 
-/**
- * The clipboard is shared across rundowns so entries can be moved between them
- */
 export const useEntryCopy = create<EntryCopyStore>()((set) => ({
   entryCopyId: null,
-  entryCopyRundownId: null,
   entryCopyMode: 'copy',
-  setEntryCopyId: (entryCopyId: MaybeString, entryCopyRundownId: MaybeString, mode: 'copy' | 'cut' = 'copy') =>
-    set({ entryCopyId, entryCopyRundownId, entryCopyMode: mode }),
+  setEntryCopyId: (entryCopyId: string | null, mode: 'copy' | 'cut' = 'copy') =>
+    set({ entryCopyId, entryCopyMode: mode }),
 }));

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

@@ -1,158 +0,0 @@
-import { EntryId, MaybeNumber, Rundown, isOntimeEvent } from 'ontime-types';
-import { MouseEvent } from 'react';
-import { StoreApi } from 'zustand';
-import { createStore } from 'zustand/vanilla';
-
-import { isMacOS } from '../utils/deviceUtils';
-
-export type SelectionMode = 'shift' | 'click' | 'ctrl';
-
-export interface EventSelectionStore {
-  selectedEvents: Set<EntryId>;
-  anchoredIndex: MaybeNumber;
-  cursor: EntryId | null;
-  entryMode: 'event' | 'single' | null;
-  scrollHandler: ((id: EntryId) => void) | null;
-  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
-  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
-  clearSelectedEvents: () => void;
-  clearMultiSelect: () => void;
-  unselect: (id: EntryId) => void;
-  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
-  scrollToEntry: (id: EntryId) => void;
-}
-
-export type EventSelectionStoreApi = StoreApi<EventSelectionStore>;
-
-/**
- * Keeps track of the selected entries and selection mode
- * Provides methods to update the selection based on user interactions
- *
- * One store instance exists per rundown scope, so panels showing different
- * rundowns keep independent selections. The rundown the selection refers to is
- * injected as `getRundown` rather than resolved from the loaded rundown.
- */
-export function createEventSelectionStore(getRundown: () => Rundown | undefined): EventSelectionStoreApi {
-  return createStore<EventSelectionStore>()((set, get) => ({
-    selectedEvents: new Set(),
-    anchoredIndex: null,
-    cursor: null,
-    entryMode: null,
-    scrollHandler: null,
-    setSingleEntrySelection: ({ id }) => {
-      set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
-    },
-    setSelectedEvents: ({ id, index, selectMode }) => {
-      const { selectedEvents, anchoredIndex, entryMode } = get();
-
-      // if we are in single mode, we replace the selection and change the mode
-      if (entryMode === 'single') {
-        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
-      }
-
-      // on click, we replace selection with event
-      if (selectMode === 'click') {
-        return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
-      }
-
-      // on ctrl + click, we toggle the selection of that event
-      if (selectMode === 'ctrl') {
-        const rundownData = getRundown();
-        if (!rundownData) return;
-
-        // if it doesnt exist, simply add to the list and set an anchor
-        if (!selectedEvents.has(id)) {
-          return set({
-            selectedEvents: new Set(selectedEvents).add(id),
-            anchoredIndex: index,
-            cursor: id,
-            entryMode: 'event',
-          });
-        }
-
-        // if event is already selected, we remove it from selection
-        // and set the anchor to the event after
-        const withoutId = new Set(selectedEvents);
-        withoutId.delete(id);
-
-        const nextIndex = rundownData.order.findIndex(
-          (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && withoutId.has(eventId),
-        );
-
-        // if we didnt find anything after, set the anchor to the last event
-        return set({
-          selectedEvents: withoutId,
-          anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
-          entryMode: 'event',
-        });
-      }
-
-      // on shift + click, we select a range of events up to the clicked event
-      if (selectMode === 'shift') {
-        const rundownData = getRundown();
-        if (!rundownData) return;
-
-        // get list of rundown with only ontime events
-        const eventIds: EntryId[] = [];
-        rundownData.flatOrder.forEach((eventId) => {
-          const event = rundownData.entries[eventId];
-          if (isOntimeEvent(event)) {
-            eventIds.push(event.id);
-          }
-        });
-
-        const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
-        const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
-
-        // create new set with range of ids from start to end
-        const selectedEventIds = eventIds.slice(start, end);
-
-        return set({
-          selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
-          anchoredIndex: index,
-          entryMode: 'event',
-        });
-      }
-    },
-    clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
-    clearMultiSelect: () => {
-      const { selectedEvents } = get();
-      const [firstSelected] = selectedEvents;
-      set({
-        selectedEvents: new Set(firstSelected ? [firstSelected] : []),
-        anchoredIndex: null,
-        entryMode: null,
-      });
-    },
-    unselect: (id: string) => {
-      const { entryMode, selectedEvents } = get();
-      const remaining = new Set(selectedEvents);
-      remaining.delete(id);
-      set({
-        selectedEvents: remaining,
-        entryMode: remaining.size === 0 ? null : entryMode,
-      });
-    },
-    // Sets the scroll handler for programmatic scrolling to entries
-    setScrollHandler: (handler) => set({ scrollHandler: handler }),
-    // Scrolls to the specified entry using the registered scroll handler
-    scrollToEntry: (id: EntryId) => {
-      const handler = get().scrollHandler;
-      if (handler) {
-        handler(id);
-      }
-    },
-  }));
-}
-
-export function getSelectionMode(event: MouseEvent): SelectionMode {
-  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
-    return 'ctrl';
-  }
-
-  if (event.shiftKey) {
-    return 'shift';
-  }
-
-  return 'click';
-}

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

@@ -242,12 +242,12 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
     return;
   }
 
+  // skip if we dont recognise the ID the revision is lower
   const queryKey = getRundownQueryKey(rundownId);
   const cachedRundown = ontimeQueryClient.getQueryData<{ revision: number }>(queryKey);
 
-  // we already have this change, or something newer
-  // messages can arrive after a refetch has already brought in a later revision
-  if (revision !== null && cachedRundown !== undefined && revision <= cachedRundown.revision) {
+  if (revision === cachedRundown?.revision) {
+    // we already have the latest change
     return;
   }
 

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

@@ -4,8 +4,8 @@ import { IoTrashBin } from 'react-icons/io5';
 import { deleteAllReport } from '../../../../common/api/report';
 import { createBlob, downloadBlob } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
-import { useLoadedRundown } from '../../../../common/hooks-query/useLoadedRundown';
 import useReport from '../../../../common/hooks-query/useReport';
+import useRundown from '../../../../common/hooks-query/useRundown';
 import { cx } from '../../../../common/utils/styleUtils';
 import { formatTime } from '../../../../common/utils/time';
 import * as Panel from '../../panel-utils/PanelUtils';
@@ -15,7 +15,7 @@ import style from './ReportSettings.module.scss';
 
 export default function ReportSettings() {
   const { data: reportData } = useReport();
-  const { data } = useLoadedRundown();
+  const { data } = useRundown();
 
   const clearReport = async () => await deleteAllReport();
   const downloadCSV = (combinedReport: CombinedReport[]) => {

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

@@ -19,8 +19,8 @@ import Dialog from '../../../../common/components/dialog/Dialog';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Tag from '../../../../common/components/tag/Tag';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
-import { useDirectLinkToBackgroundEdit } from '../../../../common/hooks/useRundownSelection';
 import { cx } from '../../../../common/utils/styleUtils';
+import { useDirectLinkToBackgroundEdit } from '../../../../views/cuesheet/useCuesheetRundownSelection';
 import * as Panel from '../../panel-utils/PanelUtils';
 import RundownRenameForm from './composite/RundownRenameForm';
 import { ManageRundownForm } from './ManageRundownForm';

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

@@ -24,7 +24,7 @@ import Button from '../../../../../common/components/buttons/Button';
 import Info from '../../../../../common/components/info/Info';
 import ExternalLink from '../../../../../common/components/link/external-link/ExternalLink';
 import Modal from '../../../../../common/components/modal/Modal';
-import { useLoadedRundown } from '../../../../../common/hooks-query/useLoadedRundown';
+import useRundown from '../../../../../common/hooks-query/useRundown';
 import { removeFileExtension, validateExcelImport } from '../../../../../common/utils/uploadUtils';
 import * as Panel from '../../../panel-utils/PanelUtils';
 import GSheetSetup from './GSheetSetup';
@@ -59,7 +59,7 @@ export default function SourcesPanel() {
   const [activeSource, setActiveSource] = useState<ActiveSource | null>(null);
   const [completedRundownTitle, setCompletedRundownTitle] = useState('');
 
-  const { data: currentRundown } = useLoadedRundown();
+  const { data: currentRundown } = useRundown();
   const { applyImport } = useSpreadsheetImport();
   const navigate = useNavigate();
 

apps/client/src/features/operator/Operator.module.scss

@@ -18,6 +18,13 @@
   padding-bottom: 95vh;
 }
 
+/* Bounds the sticky header to its group and restores the surrounding list gap. */
+.groupSection {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
 .editPrompt {
   position: fixed;
   z-index: $zindex-dialog;

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

@@ -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';
@@ -54,11 +54,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);
+
+  const getStickyOffset = useCallback(() => {
+    const header = stickyHeaderRef.current;
+    // Preserve the list gap below the sticky header.
+    return header ? header.offsetHeight + 2 : 0;
+  }, []);
+  const getTopOffset = useCallback(() => selectedOffset + getStickyOffset(), [getStickyOffset]);
+
   const scrollToComponent = useFollowComponent({
     followRef: selectedRef,
     scrollRef,
     doFollow: !lockAutoScroll,
-    topOffset: selectedOffset,
+    topOffset: getTopOffset,
     followTrigger: selectedEventId,
   });
 
@@ -82,15 +91,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();
+    // Keep the threshold relative to the visible rows below the sticky header.
+    const distanceFromTop = selectedRect.top - scrollerRect.top - getStickyOffset();
+    const hasScrolledOutOfThreshold = distanceFromTop < -8 || distanceFromTop > selectedOffset;
+    setLockAutoScroll(hasScrolledOutOfThreshold);
   };
   const throttledHandleScroll = throttle(handleUserScroll, 1000);
 
@@ -186,13 +196,14 @@ 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}
                     duration={entry.duration}
+                    isLive={isCurrentParent}
                   />
                   {entry.entries.map((nestedEntryId) => {
                     const nestedEntry = rundown.entries[nestedEntryId];
@@ -239,7 +250,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
                       />
                     );
                   })}
-                </Fragment>
+                </div>
               );
             }
             return null;

apps/client/src/features/operator/operator-group/OperatorGroup.module.scss

@@ -3,17 +3,28 @@
   min-height: 2.5rem;
   padding: 0.4rem 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%);
+  /* The inline opaque group colour prevents rows showing through the sticky header. */
   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;
   letter-spacing: 0;
 }
 
+/* Keep the live indicator legible over any group colour without competing with the live event fill. */
+.live {
+  box-shadow:
+    inset 0 0 0 2px $ui-black,
+    inset 0 0 0 4px $active-indicator;
+}
+
 .title {
   flex: 1 1 auto;
   min-width: 0;

apps/client/src/features/operator/operator-group/OperatorGroup.tsx

@@ -1,6 +1,6 @@
-import { CSSProperties, memo } from 'react';
+import { type CSSProperties, type Ref, memo } from 'react';
 
-import { getAccessibleColour } from '../../../common/utils/styleUtils';
+import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { formatDuration } from '../../../common/utils/time';
 
 import style from './OperatorGroup.module.scss';
@@ -10,15 +10,21 @@ interface OperatorGroup {
   colour: string;
   count: number;
   duration: number;
+  isLive: boolean;
+  ref?: Ref<HTMLDivElement>;
 }
 
 export default memo(OperatorGroup);
-function OperatorGroup({ title, colour, count, duration }: OperatorGroup) {
+function OperatorGroup({ title, colour, count, duration, isLive, ref }: OperatorGroup) {
   const groupColour = colour || '#929292';
   const groupColours = getAccessibleColour(groupColour);
 
   return (
-    <div className={style.group} style={{ ...groupColours, '--group-colour': groupColour } as CSSProperties}>
+    <div
+      className={cx([style.group, isLive && style.live])}
+      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>

apps/client/src/features/operator/useOperatorData.ts

@@ -1,7 +1,7 @@
 import { CustomFields, Rundown, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { RundownMetadataObject } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../../views/utils/viewLoader.utils';
@@ -14,7 +14,7 @@ export interface OperatorData {
 }
 
 export function useOperatorData(): ViewData<OperatorData> {
-  const { data: rundown, rundownMetadata, status: rundownStatus } = useLoadedRundownWithMetadata();
+  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
   const { data: customFields, status: customFieldStatus } = useCustomFields();
   const { data: settings, status: settingsStatus } = useSettings();
 

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

@@ -12,7 +12,7 @@ import {
 } from 'react-icons/tb';
 
 import Tooltip from '../../../common/components/tooltip/Tooltip';
-import { useLoadedEntry } from '../../../common/hooks-query/useLoadedRundown';
+import { useEntry } from '../../../common/hooks-query/useRundown';
 import { useAutoTickingClock } from '../../../common/hooks/useAutoTickingClock';
 import {
   useCurrentGroupId,
@@ -210,7 +210,7 @@ export function MetadataTimes() {
 function GroupTimes() {
   const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback, phase } = useGroupTimerOverView();
   const currentGroupId = useCurrentGroupId();
-  const group = useLoadedEntry(currentGroupId) as OntimeGroup | null;
+  const group = useEntry(currentGroupId) as OntimeGroup | null;
 
   const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
 
@@ -266,7 +266,7 @@ function GroupTimes() {
 function FlagTimes() {
   const { clock, mode, actualStart, plannedStart, playback, currentDay, phase } = useFlagTimerOverView();
   const { id, expectedStart } = useNextFlag();
-  const entry = useLoadedEntry(id) as OntimeEvent | null;
+  const entry = useEntry(id) as OntimeEvent | null;
 
   const hasRunningTimer = phase !== TimerPhase.Pending && isPlaybackActive(playback);
 

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

@@ -1,12 +1,12 @@
-import { useLoadedRundownAuxData } from '../../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../../common/hooks-query/useProjectData';
+import { useRundownAuxData } from '../../../common/hooks-query/useRundown';
 
 import style from './TitleOverview.module.scss';
 
 export default function TitleOverview() {
   'use memo';
   const { data: projectData } = useProjectData();
-  const { data: rundownData } = useLoadedRundownAuxData();
+  const { data: rundownData } = useRundownAuxData();
 
   const projectTitle = projectData.title.trim();
   const rundownTitle = rundownData.title.trim();

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

@@ -67,11 +67,7 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
   const { getIsCollapsed, collapseGroup, expandGroup } = useCollapsedGroups(id);
 
   const entryActions = useEntryActionsContext();
-  const setEntryCopy = useEntryCopy((state) => state.setEntryCopyId);
-  const setEntryCopyId = useCallback(
-    (entryId: EntryId | null, mode?: 'copy' | 'cut') => setEntryCopy(entryId, id, mode),
-    [setEntryCopy, id],
-  );
+  const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);
 
   // cursor
   const { editorMode } = useEditorFollowMode();

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

@@ -5,6 +5,9 @@ import * as Editor from '../../common/components/editor-utils/EditorUtils';
 import ErrorBoundary from '../../common/components/error-boundary/ErrorBoundary';
 import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
+import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
+import { useLoadedRundownSource } from '../../common/hooks-query/useScopedRundown';
+import { useEntryActions } from '../../common/hooks/useEntryAction';
 import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
@@ -36,25 +39,28 @@ function RundownExport() {
     defaultValue: RundownViewMode.List,
   });
   const isSmallDevice = useIsSmallDevice();
+  const entryActions = useEntryActions();
 
   if (isSmallDevice && isExtracted) {
     return (
-      <ProtectRoute permission='editor'>
-        <div
-          className={cx([style.rundownExport, style.extracted])}
-          data-target='small-device'
-          data-testid='panel-rundown'
-        >
-          <FinderPlacement />
-          <ViewNavigationMenu suppressSettings />
-          <div className={style.rundown}>
-            <ErrorBoundary>
-              <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
-              <RundownContextMenu />
-            </ErrorBoundary>
+      <EntryActionsProvider actions={entryActions}>
+        <ProtectRoute permission='editor'>
+          <div
+            className={cx([style.rundownExport, style.extracted])}
+            data-target='small-device'
+            data-testid='panel-rundown'
+          >
+            <FinderPlacement />
+            <ViewNavigationMenu suppressSettings />
+            <div className={style.rundown}>
+              <ErrorBoundary>
+                <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownContextMenu />
+              </ErrorBoundary>
+            </div>
           </div>
-        </div>
-      </ProtectRoute>
+        </ProtectRoute>
+      </EntryActionsProvider>
     );
   }
 
@@ -64,28 +70,30 @@ function RundownExport() {
     viewMode === RundownViewMode.Table;
 
   return (
-    <ProtectRoute permission='editor'>
-      <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
-        <FinderPlacement />
-        {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
-        <div className={style.rundown}>
-          <Editor.Panel className={style.list}>
-            <ErrorBoundary>
-              {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
-              <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
-              <RundownContextMenu />
-            </ErrorBoundary>
-          </Editor.Panel>
-          {!hideSideBar && (
-            <div className={style.side}>
+    <EntryActionsProvider actions={entryActions}>
+      <ProtectRoute permission='editor'>
+        <div className={cx([style.rundownExport, isExtracted && style.extracted])} data-testid='panel-rundown'>
+          <FinderPlacement />
+          {isExtracted && <ViewNavigationMenu suppressSettings isNavigationLocked={getIsNavigationLocked()} />}
+          <div className={style.rundown}>
+            <Editor.Panel className={style.list}>
               <ErrorBoundary>
-                <RundownEntryEditor />
+                {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
+                <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownContextMenu />
               </ErrorBoundary>
-            </div>
-          )}
+            </Editor.Panel>
+            {!hideSideBar && (
+              <div className={style.side}>
+                <ErrorBoundary>
+                  <RundownEntryEditor />
+                </ErrorBoundary>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-    </ProtectRoute>
+      </ProtectRoute>
+    </EntryActionsProvider>
   );
 }
 
@@ -97,6 +105,8 @@ interface RundownRootProps {
 }
 
 function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
+  const source = useLoadedRundownSource();
+
   return (
     <div className={style.rundownRoot}>
       {isSmallDevice ? (
@@ -105,7 +115,7 @@ function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: Rund
         <RundownHeader isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
       )}
       {viewMode === RundownViewMode.List ? <RundownList /> : <RundownTable />}
-      {viewMode === RundownViewMode.Table && <EntryEditModal />}
+      {viewMode === RundownViewMode.Table && <EntryEditModal rundown={source.rundown} />}
       <RenumberCuesDialog />
     </div>
   );

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

@@ -1,22 +1,15 @@
-import { Playback } from 'ontime-types';
 import { memo } from 'react';
 
 import EmptyFill from '../../common/components/state/EmptyFill';
-import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import { useTranslation } from '../../translation/TranslationProvider';
 import Rundown from './Rundown';
 
-/** a rundown which is not loaded has no playback to follow */
-const idleFeatureData = { playback: Playback.Stop, selectedEventId: null, nextEventId: null };
-
 export default memo(RundownList);
 function RundownList() {
-  const { isLoaded } = useRundownScope();
   const { data, status, rundownMetadata } = useRundownWithMetadata();
-  const runtimeFeatureData = useRundownEditor();
-  const featureData = isLoaded ? runtimeFeatureData : idleFeatureData;
+  const featureData = useRundownEditor();
   const { getLocalizedString } = useTranslation();
 
   // avoid showing the editable empty state before we know whether the rundown is actually empty

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

@@ -2,7 +2,6 @@ import { type EntryId, type OntimeEntry, type Rundown, SupportedEntry } from 'on
 import { getNextGroupNormal, getNextNormal, getPreviousGroupNormal, getPreviousNormal } from 'ontime-utils';
 import { useCallback } from 'react';
 
-import { useRundownScope } from '../../../common/context/RundownScopeContext';
 import type { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
 import { SelectionMode } from '../useEventSelection';
@@ -27,7 +26,6 @@ export function useRundownCommands({
   selectEntry: applySelection,
   handleCollapseGroup,
 }: UseRundownCommandsOptions) {
-  const { rundownId } = useRundownScope();
   const { addEntry, clone, deleteEntry, move, reorderEntry } = entryActions;
 
   const deleteAtCursor = useCallback(
@@ -45,17 +43,12 @@ export function useRundownCommands({
   const insertCopyAtId = useCallback(
     (atId: EntryId | null, above = false) => {
       // lazily get the value from the store
-      const { entryCopyId, entryCopyRundownId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
+      const { entryCopyId, entryCopyMode, setEntryCopyId } = useEntryCopy.getState();
       if (entryCopyId === null || !entries[entryCopyId]) {
         // we cant clone without selection
         return;
       }
 
-      // pasting into a different rundown needs the entry payload, the server clones within a rundown
-      if (entryCopyRundownId !== null && entryCopyRundownId !== rundownId) {
-        return;
-      }
-
       let normalisedAtId = atId;
 
       const elementToCopy = entries[entryCopyId];
@@ -72,7 +65,7 @@ export function useRundownCommands({
             return;
           }
           reorderEntry(entryCopyId, firstId, 'before')
-            .then(() => setEntryCopyId(null, null))
+            .then(() => setEntryCopyId(null))
             .catch(() => {});
           return;
         }
@@ -81,7 +74,7 @@ export function useRundownCommands({
         }
         const placement = above ? 'before' : 'after';
         reorderEntry(entryCopyId, normalisedAtId, placement)
-          .then(() => setEntryCopyId(null, null))
+          .then(() => setEntryCopyId(null))
           .catch(() => {});
         return;
       }
@@ -92,7 +85,7 @@ export function useRundownCommands({
         before: above ? (normalisedAtId ?? undefined) : undefined,
       });
     },
-    [entries, flatOrder, clone, reorderEntry, rundownId],
+    [entries, flatOrder, clone, reorderEntry],
   );
 
   /**

apps/client/src/features/rundown/rundown-table/RundownTable.tsx

@@ -1,6 +1,9 @@
 import { memo, useEffect, useMemo } from 'react';
 
+import { EntryActionsProvider } from '../../../common/context/EntryActionsContext';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
+import { useLoadedRundownSource } from '../../../common/hooks-query/useScopedRundown';
+import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import CuesheetDnd from '../../../views/cuesheet/cuesheet-dnd/CuesheetDnd';
 import CuesheetTable from '../../../views/cuesheet/cuesheet-table/CuesheetTable';
 import { useCuesheetPermissions } from '../../../views/cuesheet/useTablePermissions';
@@ -12,6 +15,8 @@ function RundownTable() {
   const { data: customFields } = useCustomFields();
   const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
   const { editorMode } = useEditorFollowMode();
+  const source = useLoadedRundownSource();
+  const actions = useEntryActions();
 
   // Editor always has full permissions
   useEffect(() => {
@@ -27,8 +32,10 @@ function RundownTable() {
   const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);
 
   return (
-    <CuesheetDnd columns={columns} tableRoot='editor'>
-      <CuesheetTable columns={columns} cuesheetMode={editorMode} tableRoot='editor' />
-    </CuesheetDnd>
+    <EntryActionsProvider actions={actions}>
+      <CuesheetDnd columns={columns} tableRoot='editor'>
+        <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
+      </CuesheetDnd>
+    </EntryActionsProvider>
   );
 }

apps/client/src/features/rundown/useEventSelection.ts

@@ -1,15 +1,155 @@
-import { useStore } from 'zustand';
+import { EntryId, MaybeNumber, ProjectRundownsList, Rundown, isOntimeEvent } from 'ontime-types';
+import { MouseEvent } from 'react';
+import { create } from 'zustand';
 
-import { useRundownScope } from '../../common/context/RundownScopeContext';
-import type { EventSelectionStore } from '../../common/stores/eventSelectionStore';
+import { PROJECT_RUNDOWNS, getRundownQueryKey } from '../../common/api/constants';
+import { ontimeQueryClient } from '../../common/queryClient';
+import { isMacOS } from '../../common/utils/deviceUtils';
 
-export { getSelectionMode } from '../../common/stores/eventSelectionStore';
-export type { SelectionMode } from '../../common/stores/eventSelectionStore';
+export type SelectionMode = 'shift' | 'click' | 'ctrl';
+
+interface EventSelectionStore {
+  selectedEvents: Set<EntryId>;
+  anchoredIndex: MaybeNumber;
+  cursor: EntryId | null;
+  entryMode: 'event' | 'single' | null;
+  scrollHandler: ((id: EntryId) => void) | null;
+  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
+  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
+  clearSelectedEvents: () => void;
+  clearMultiSelect: () => void;
+  unselect: (id: EntryId) => void;
+  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
+  scrollToEntry: (id: EntryId) => void;
+}
 
 /**
- * Selection and cursor for the rundown of the enclosing scope
+ * Keeps track of the selected entries and selection mode
+ * Provides methods to update the selection based on user interactions
  */
-export function useEventSelection<T>(selector: (state: EventSelectionStore) => T): T {
-  const { selectionStore } = useRundownScope();
-  return useStore(selectionStore, selector);
+export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
+  selectedEvents: new Set(),
+  anchoredIndex: null,
+  cursor: null,
+  entryMode: null,
+  scrollHandler: null,
+  setSingleEntrySelection: ({ id }) => {
+    set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
+  },
+  setSelectedEvents: ({ id, index, selectMode }) => {
+    const { selectedEvents, anchoredIndex, entryMode } = get();
+
+    // if we are in single mode, we replace the selection and change the mode
+    if (entryMode === 'single') {
+      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
+    }
+
+    // on click, we replace selection with event
+    if (selectMode === 'click') {
+      return set({ selectedEvents: new Set([id]), anchoredIndex: index, cursor: id, entryMode: 'event' });
+    }
+
+    // on ctrl + click, we toggle the selection of that event
+    if (selectMode === 'ctrl') {
+      const rundownData = getLoadedRundownData();
+      if (!rundownData) return;
+
+      // if it doesnt exist, simply add to the list and set an anchor
+      if (!selectedEvents.has(id)) {
+        return set({
+          selectedEvents: selectedEvents.add(id),
+          anchoredIndex: index,
+          cursor: id,
+          entryMode: 'event',
+        });
+      }
+
+      // if event is already selected, we remove it from selection
+      // and set the anchor to the event after
+      selectedEvents.delete(id);
+
+      const nextIndex = rundownData.order.findIndex(
+        (eventId, i) => i > index && isOntimeEvent(rundownData.entries[eventId]) && selectedEvents.has(eventId),
+      );
+
+      // if we didnt find anything after, set the anchor to the last event
+      return set({
+        selectedEvents,
+        anchoredIndex: nextIndex < 0 ? rundownData.order.length - 1 : nextIndex,
+        entryMode: 'event',
+      });
+    }
+
+    // on shift + click, we select a range of events up to the clicked event
+    if (selectMode === 'shift') {
+      const rundownData = getLoadedRundownData();
+      if (!rundownData) return;
+
+      // get list of rundown with only ontime events
+      const eventIds: EntryId[] = [];
+      rundownData.flatOrder.forEach((eventId) => {
+        const event = rundownData.entries[eventId];
+        if (isOntimeEvent(event)) {
+          eventIds.push(event.id);
+        }
+      });
+
+      const start = anchoredIndex === null ? 0 : Math.min(anchoredIndex, index);
+      const end = anchoredIndex === null ? index : Math.max(anchoredIndex, index + 1);
+
+      // create new set with range of ids from start to end
+      const selectedEventIds = eventIds.slice(start, end);
+
+      return set({
+        selectedEvents: new Set([...selectedEvents, ...selectedEventIds]),
+        anchoredIndex: index,
+        entryMode: 'event',
+      });
+    }
+  },
+  clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null, cursor: null, entryMode: null }),
+  clearMultiSelect: () => {
+    const { selectedEvents } = get();
+    const [firstSelected] = selectedEvents;
+    set({
+      selectedEvents: new Set(firstSelected ? [firstSelected] : []),
+      anchoredIndex: null,
+      entryMode: null,
+    });
+  },
+  unselect: (id: string) => {
+    const { entryMode, selectedEvents } = get();
+    selectedEvents.delete(id);
+    set({
+      selectedEvents,
+      entryMode: selectedEvents.size === 0 ? null : entryMode,
+    });
+  },
+  // Sets the scroll handler for programmatic scrolling to entries
+  setScrollHandler: (handler) => set({ scrollHandler: handler }),
+  // Scrolls to the specified entry using the registered scroll handler
+  scrollToEntry: (id: EntryId) => {
+    const handler = get().scrollHandler;
+    if (handler) {
+      handler(id);
+    }
+  },
+}));
+
+function getLoadedRundownData() {
+  const rundownId = ontimeQueryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
+  if (!rundownId) return undefined;
+  return ontimeQueryClient.getQueryData<Rundown>(getRundownQueryKey(rundownId));
+}
+
+export function getSelectionMode(event: MouseEvent): SelectionMode {
+  if ((isMacOS() && event.metaKey) || event.ctrlKey) {
+    return 'ctrl';
+  }
+
+  if (event.shiftKey) {
+    return 'shift';
+  }
+
+  return 'click';
 }

apps/client/src/features/rundown/useSelectAndRevealEntry.ts

@@ -1,7 +1,6 @@
 import { EntryId, MaybeString } from 'ontime-types';
 import { useCallback } from 'react';
 
-import { useRundownScope } from '../../common/context/RundownScopeContext';
 import { useCollapsedGroups } from './useCollapsedGroups';
 import { useEventSelection } from './useEventSelection';
 
@@ -11,8 +10,7 @@ type SelectAndRevealOptions = {
   parent?: MaybeString;
 };
 
-export function useSelectAndRevealEntry() {
-  const { rundownId } = useRundownScope();
+export function useSelectAndRevealEntry(rundownId: string) {
   const { expandGroup } = useCollapsedGroups(rundownId);
   const selectEntry = useEventSelection((state) => state.setSelectedEvents);
   const scrollToEntry = useEventSelection((state) => state.scrollToEntry);

apps/client/src/views/backstage/useBackstageData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedFlatRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
+import { useFlatRundown } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -20,7 +20,7 @@ export function useBackstageData(): ViewData<BackstageData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundown();
+  const { data: rundownData, status: rundownStatus } = useFlatRundown();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/common/schedule/ScheduleContext.tsx

@@ -12,7 +12,7 @@ import {
   useState,
 } from 'react';
 
-import { useLoadedPartialRundown } from '../../../common/hooks-query/useLoadedRundown';
+import { usePartialRundown } from '../../../common/hooks-query/useRundown';
 import { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { useScheduleOptions } from './schedule.options';
 
@@ -45,7 +45,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
     [filter],
   );
 
-  const { data: events } = useLoadedPartialRundown(filterCallback);
+  const { data: events } = usePartialRundown(filterCallback);
 
   const [firstIndex, setFirstIndex] = useState(-1);
   const [numPages, setNumPages] = useState(0);

apps/client/src/views/countdown/Countdown.scss

@@ -103,6 +103,19 @@ $item-height: 3.5rem;
     padding-bottom: max(8rem, calc(5rem + env(safe-area-inset-bottom)));
   }
 
+  /* 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 ======================*/
   .sub {
     margin: 2px;
@@ -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;

apps/client/src/views/countdown/CountdownSubscriptions.tsx

@@ -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,
+    topOffset: 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>
         );
       })}

apps/client/src/views/countdown/countdown.utils.test.ts

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

apps/client/src/views/countdown/countdown.utils.ts

@@ -252,6 +252,44 @@ 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[] = [];
+  let openSection: CountdownSection | null = null;
+
+  for (const target of targets) {
+    // resolveSubscriptionTarget spreads the first child, so we cannot rely on the entry type here
+    if (target.isGroup) {
+      openSection = { group: target, events: [] };
+      sections.push(openSection);
+      continue;
+    }
+
+    if (openSection?.group && target.parent === openSection.group.id) {
+      openSection.events.push(target);
+      continue;
+    }
+
+    openSection = null;
+    sections.push({ group: null, events: [target] });
+  }
+
+  return sections;
+}
+
 export function extendEventData(
   event: CountdownTarget,
   currentDay: number,

apps/client/src/views/countdown/useCountdownData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
+import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
@@ -21,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/cuesheet/CuesheetPage.tsx

@@ -3,31 +3,35 @@ import { IoApps } from 'react-icons/io5';
 
 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
-import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
-import { useRundownSelection } from '../../common/hooks/useRundownSelection';
+import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
+import { useScopedRundown } from '../../common/hooks-query/useScopedRundown';
+import { useScopedEntryActions } from '../../common/hooks/useEntryAction';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { getIsNavigationLocked } from '../../externals';
 import CuesheetOverview from '../../features/overview/CuesheetOverview';
 import EntryEditModal from './cuesheet-edit-modal/EntryEditModal';
 import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
 import CuesheetTableWrapper from './CuesheetTableWrapper';
+import { FOLLOW_LOADED_RUNDOWN_ID, useCuesheetRundownSelection } from './useCuesheetRundownSelection';
 
 import styles from './CuesheetPage.module.scss';
 
 export default function CuesheetPage() {
   'use memo';
   const [isMenuOpen, menuHandler] = useDisclosure();
-  const { scopedRundownId, selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } =
-    useRundownSelection('cuesheet');
+  const { selectedRundownId, loadedRundownId, setSelectedRundownId, projectRundowns } = useCuesheetRundownSelection();
+  const source = useScopedRundown(selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? loadedRundownId : selectedRundownId);
+
+  const actions = useScopedEntryActions(source.rundownId);
 
   useWindowTitle('Cuesheet');
 
   const isLocked = getIsNavigationLocked();
 
   return (
-    <EditableRundownScopeProvider rundownId={scopedRundownId}>
+    <EntryActionsProvider actions={actions}>
       <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
-      <EntryEditModal />
+      <EntryEditModal rundown={source.rundown} />
       <div className={styles.tableWrapper} data-testid='cuesheet'>
         <CuesheetOverview>
           {!isLocked && (
@@ -38,12 +42,13 @@ export default function CuesheetPage() {
         </CuesheetOverview>
         <CuesheetProgress />
         <CuesheetTableWrapper
+          source={source}
           selectedRundownId={selectedRundownId}
           loadedRundownId={loadedRundownId}
           setSelectedRundownId={setSelectedRundownId}
           projectRundowns={projectRundowns}
         />
       </div>
-    </EditableRundownScopeProvider>
+    </EntryActionsProvider>
   );
 }

apps/client/src/views/cuesheet/CuesheetTableWrapper.tsx

@@ -3,18 +3,19 @@ import { memo, use, useMemo } from 'react';
 
 import Select from '../../common/components/select/Select';
 import { PresetContext } from '../../common/context/PresetContext';
-import { useRundownScope } from '../../common/context/RundownScopeContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { FOLLOW_LOADED_RUNDOWN_ID } from '../../common/hooks/useRundownSelection';
+import type { RundownSource } from '../../common/hooks-query/useScopedRundown';
 import { AppMode } from '../../ontimeConfig';
 import CuesheetDnd from './cuesheet-dnd/CuesheetDnd';
 import { makeCuesheetColumns } from './cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
 import CuesheetTable from './cuesheet-table/CuesheetTable';
 import { useApplyCuesheetPolicy } from './useApplyCuesheetPolicy';
+import { FOLLOW_LOADED_RUNDOWN_ID } from './useCuesheetRundownSelection';
 
 import styles from './CuesheetPage.module.scss';
 
 interface CuesheetTableWrapperProps {
+  source: RundownSource;
   selectedRundownId: MaybeString;
   loadedRundownId: string;
   setSelectedRundownId: (rundownId: string) => void;
@@ -23,14 +24,15 @@ interface CuesheetTableWrapperProps {
 
 export default memo(CuesheetTableWrapper);
 function CuesheetTableWrapper({
+  source,
   selectedRundownId,
   setSelectedRundownId,
   loadedRundownId,
   projectRundowns,
 }: CuesheetTableWrapperProps) {
   const preset = use(PresetContext);
-  const { isLoaded } = useRundownScope();
-  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isLoaded });
+  const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
+  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
   const { data: customFields } = useCustomFields();
 
   const columns = useMemo(
@@ -42,9 +44,11 @@ function CuesheetTableWrapper({
     <CuesheetDnd columns={columns}>
       <CuesheetTable
         columns={columns}
+        source={source}
         cuesheetMode={cuesheetMode}
         tableRoot='cuesheet'
         setCuesheetMode={setCuesheetMode}
+        isCurrentRundown={isCurrentRundown}
         insertElement={
           <>
             <RundownSelect

apps/client/src/views/cuesheet/__tests__/useCuesheetRundownSelection.test.ts

@@ -1,13 +1,13 @@
 import {
   FOLLOW_LOADED_RUNDOWN_ID,
-  getRundownSelectionStorageKey,
+  getCuesheetRundownStorageKey,
   resolveSelectedRundownId,
-} from '../useRundownSelection';
+} from '../useCuesheetRundownSelection';
 
-describe('useRundownSelection helpers', () => {
-  it('builds a namespace and project scoped storage key', () => {
-    expect(getRundownSelectionStorageKey('cuesheet', 'http://localhost:4001', 'My Project')).toBe(
-      'rundown-selection:cuesheet:http://localhost:4001:My Project',
+describe('useCuesheetRundownSelection helpers', () => {
+  it('builds a project-scoped storage key', () => {
+    expect(getCuesheetRundownStorageKey('http://localhost:4001', 'My Project')).toBe(
+      'cuesheet-selected-rundown:http://localhost:4001:My Project',
     );
   });
 

apps/client/src/views/cuesheet/cuesheet-edit-modal/EntryEditModal.tsx

@@ -1,13 +1,16 @@
+import { Rundown } from 'ontime-types';
 import { memo } from 'react';
 
 import Modal from '../../../common/components/modal/Modal';
-import useRundown from '../../../common/hooks-query/useRundown';
 import CuesheetEntryEditor from '../../../features/rundown/entry-editor/CuesheetEventEditor';
 import { useEditModal } from './useEditModal';
 
+interface EntryEditModalProps {
+  rundown: Rundown;
+}
+
 export default memo(EntryEditModal);
-function EntryEditModal() {
-  const { data: rundown } = useRundown();
+function EntryEditModal({ rundown }: EntryEditModalProps) {
   const entryId = useEditModal((state) => state.selectedEntryId);
   const closeModal = useEditModal((state) => state.clearSelection);
 

apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx

@@ -14,8 +14,7 @@ import {
 import EmptyFill from '../../../common/components/state/EmptyFill';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useRundownScope } from '../../../common/context/RundownScopeContext';
-import { useFlatRundownWithMetadata, useScopedSelectedEventId } from '../../../common/hooks-query/useRundown';
+import type { RundownSource } from '../../../common/hooks-query/useScopedRundown';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -42,17 +41,20 @@ import style from './CuesheetTable.module.scss';
 type CuesheetTableBaseProps = {
   columns: CuesheetColumnDef[];
   cuesheetMode: AppMode;
+  source: RundownSource;
   insertElement?: ReactNode;
 };
 
 type EditorCuesheetTableProps = CuesheetTableBaseProps & {
   tableRoot: 'editor';
   setCuesheetMode?: undefined;
+  isCurrentRundown?: undefined;
 };
 
 type ViewCuesheetTableProps = CuesheetTableBaseProps & {
   tableRoot: 'cuesheet';
   setCuesheetMode: (mode: AppMode) => void;
+  isCurrentRundown?: boolean;
 };
 
 type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
@@ -60,13 +62,13 @@ type CuesheetTableProps = EditorCuesheetTableProps | ViewCuesheetTableProps;
 export default function CuesheetTable({
   columns,
   cuesheetMode,
+  source,
   tableRoot,
   setCuesheetMode,
+  isCurrentRundown,
   insertElement,
 }: CuesheetTableProps) {
-  const { isLoaded: isCurrentRundown } = useRundownScope();
-  const { data: flatRundown, status } = useFlatRundownWithMetadata();
-  const selectedEventId = useScopedSelectedEventId();
+  const { flatRundown, status, selectedEventId } = source;
   const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
   const { getLocalizedString } = useTranslation();
   const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;

apps/client/src/views/cuesheet/useCuesheetRundownSelection.ts

@@ -2,21 +2,14 @@ import { useSessionStorage } from '@mantine/hooks';
 import { startTransition, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 
+import { useOrderedProjectList } from '../../common/hooks-query/useProjectList';
+import { useProjectRundowns } from '../../common/hooks-query/useProjectRundowns';
 import { serverURL } from '../../externals';
-import { useOrderedProjectList } from '../hooks-query/useProjectList';
-import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
 
 export const FOLLOW_LOADED_RUNDOWN_ID = '__follow-loaded__' as const;
 
-/** each surface keeps its own selection, so panels can point at different rundowns */
-export type RundownSelectionNamespace = 'cuesheet';
-
-export function getRundownSelectionStorageKey(
-  namespace: RundownSelectionNamespace,
-  server: string,
-  projectFilename: string,
-) {
-  return `rundown-selection:${namespace}:${server}:${projectFilename}`;
+export function getCuesheetRundownStorageKey(server: string, projectFilename: string) {
+  return `cuesheet-selected-rundown:${server}:${projectFilename}`;
 }
 
 export function resolveSelectedRundownId(storedSelectedRundownId: string | null, availableRundownIds: Set<string>) {
@@ -24,22 +17,14 @@ export function resolveSelectedRundownId(storedSelectedRundownId: string | null,
   return FOLLOW_LOADED_RUNDOWN_ID;
 }
 
-/**
- * Persisted choice of which rundown a surface operates on.
- * The resolved id is meant to be handed to a rundown scope provider,
- * where null means follow whichever rundown is loaded.
- */
-export function useRundownSelection(namespace: RundownSelectionNamespace) {
+export function useCuesheetRundownSelection() {
   'use memo';
 
   const { data: projectRundowns } = useProjectRundowns();
   const {
     data: { lastLoadedProject },
   } = useOrderedProjectList();
-  const storageKey = useMemo(
-    () => getRundownSelectionStorageKey(namespace, serverURL, lastLoadedProject),
-    [namespace, lastLoadedProject],
-  );
+  const storageKey = useMemo(() => getCuesheetRundownStorageKey(serverURL, lastLoadedProject), [lastLoadedProject]);
   const [storedSelectedRundownId, setStoredSelectedRundownId] = useSessionStorage<string | null>({
     key: storageKey,
     defaultValue: FOLLOW_LOADED_RUNDOWN_ID,
@@ -53,8 +38,6 @@ export function useRundownSelection(namespace: RundownSelectionNamespace) {
   return {
     loadedRundownId,
     selectedRundownId,
-    /** id for the rundown scope, null follows the loaded rundown */
-    scopedRundownId: selectedRundownId === FOLLOW_LOADED_RUNDOWN_ID ? null : selectedRundownId,
     projectRundowns: projectRundowns.rundowns,
     setSelectedRundownId: (rundownId: string) => {
       startTransition(() => {
@@ -69,7 +52,7 @@ export function useDirectLinkToBackgroundEdit() {
     data: { lastLoadedProject },
   } = useOrderedProjectList();
   const navigate = useNavigate();
-  const storageKey = getRundownSelectionStorageKey('cuesheet', serverURL, lastLoadedProject);
+  const storageKey = getCuesheetRundownStorageKey(serverURL, lastLoadedProject);
   const [_, setStoredSelectedRundownId] = useSessionStorage<string | null>({ key: storageKey, defaultValue: null });
 
   return useCallback(

apps/client/src/views/editor/Editor.tsx

@@ -1,6 +1,5 @@
 import { lazy } from 'react';
 
-import { EditableRundownScopeProvider } from '../../common/context/EditableRundownScopeProvider';
 import TrackingPlaybackBar from '../../features/control/playback/tracking-playback-bar/TrackingPlaybackBar';
 import { AppMode } from '../../ontimeConfig';
 import TitleList from './title-list/TitleList';
@@ -22,9 +21,7 @@ export default function Editor() {
           <TimerControl />
           <MessageControl />
         </div>
-        <EditableRundownScopeProvider rundownId={null}>
-          <Rundown />
-        </EditableRundownScopeProvider>
+        <Rundown />
       </div>
     );
   }
@@ -32,17 +29,14 @@ export default function Editor() {
   if (layoutMode === EditorLayoutMode.TRACKING) {
     return (
       <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
-        {/* the titles and the rundown share a scope, so they follow one cursor */}
-        <EditableRundownScopeProvider rundownId={null}>
-          <div className={styles.rundownLayout}>
-            <div className={styles.titlesPanel}>
-              <TitleList mode={AppMode.Run} />
-            </div>
-            <div className={styles.rundownPanel}>
-              <Rundown />
-            </div>
+        <div className={styles.rundownLayout}>
+          <div className={styles.titlesPanel}>
+            <TitleList mode={AppMode.Run} />
           </div>
-        </EditableRundownScopeProvider>
+          <div className={styles.rundownPanel}>
+            <Rundown />
+          </div>
+        </div>
         <TrackingPlaybackBar />
       </div>
     );
@@ -50,16 +44,14 @@ export default function Editor() {
 
   return (
     <div id='panels' className={styles.panelContainer}>
-      <EditableRundownScopeProvider rundownId={null}>
-        <div className={styles.rundownLayout}>
-          <div className={styles.titlesPanel}>
-            <TitleList mode={AppMode.Edit} />
-          </div>
-          <div className={styles.rundownPanel}>
-            <Rundown />
-          </div>
+      <div className={styles.rundownLayout}>
+        <div className={styles.titlesPanel}>
+          <TitleList mode={AppMode.Edit} />
         </div>
-      </EditableRundownScopeProvider>
+        <div className={styles.rundownPanel}>
+          <Rundown />
+        </div>
+      </div>
     </div>
   );
 }

apps/client/src/views/editor/finder/useFinder.tsx

@@ -207,10 +207,10 @@ export function searchByText(
  * @param activeFilter - a field selected from the filter badges, if any
  */
 export default function useFinder(searchValue: string, activeFilter: MaybeString) {
-  const { data } = useFlatRundown();
+  const { data, rundownId } = useFlatRundown();
   const { data: customFields } = useCustomFields();
 
-  const selectAndRevealEntry = useSelectAndRevealEntry();
+  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
 
   /** The filters offered to the user: the fixed fields plus whatever the project defines */
   const filters = useMemo<FinderFilter[]>(() => {

apps/client/src/views/editor/title-list/TitleList.tsx

@@ -46,6 +46,7 @@ export default function TitleList({ mode }: TitleListProps) {
       eventData={eventData}
       selectedEventId={selectedEventId}
       resolvedFollowEventId={resolvedFollowEventId}
+      rundownId={rundown.id}
     />
   );
 }
@@ -55,14 +56,21 @@ interface TitleListContentProps {
   eventData: ExtendedEntry<OntimeEvent>[];
   selectedEventId: string | null;
   resolvedFollowEventId: string | null;
+  rundownId: string;
 }
 
-function TitleListContent({ mode, eventData, selectedEventId, resolvedFollowEventId }: TitleListContentProps) {
+function TitleListContent({
+  mode,
+  eventData,
+  selectedEventId,
+  resolvedFollowEventId,
+  rundownId,
+}: TitleListContentProps) {
   'use memo';
 
   const virtuosoRef = useRef<VirtuosoHandle | null>(null);
   const scrollParentRef = useRef<HTMLDivElement | null>(null);
-  const selectAndRevealEntry = useSelectAndRevealEntry();
+  const selectAndRevealEntry = useSelectAndRevealEntry(rundownId);
 
   // Calculate current event info
   const currentEventInfo = useMemo(() => {

apps/client/src/views/timeline/useTimelineData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, OntimeEntry, ProjectData, Settings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedFlatRundownWithMetadata } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
+import { useFlatRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import { ExtendedEntry } from '../../common/utils/rundownMetadata';
 import { ViewData, aggregateQueryStatus } from '../utils/viewLoader.utils';
@@ -16,7 +16,7 @@ export interface TimelineData {
 
 export function useTimelineData(): ViewData<TimelineData> {
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useLoadedFlatRundownWithMetadata();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata();
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

apps/client/src/views/timer/Timer.scss

@@ -195,24 +195,6 @@
     font-weight: 600;
   }
 
-  .sound-prompt {
-    position: absolute;
-    bottom: $view-block-padding;
-    left: $view-inline-padding;
-    padding: 0.5em 0.75em;
-    border-radius: $element-border-radius;
-    background-color: $viewer-card-bg-color;
-    color: $viewer-secondary-color;
-    font-size: $timer-label-size;
-    text-transform: uppercase;
-    pointer-events: none;
-    transition: opacity $viewer-transition-time;
-
-    &--hidden {
-      opacity: 0;
-    }
-  }
-
   /* =================== LOGO ===================*/
   .logo {
     position: absolute;

apps/client/src/views/timer/Timer.tsx

@@ -8,7 +8,6 @@ import TitleCard from '../../common/components/title-card/TitleCard';
 import ViewLogo from '../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useAutoTickingClock } from '../../common/hooks/useAutoTickingClock';
-import { useFadeOutOnInactivity } from '../../common/hooks/useFadeOutOnInactivity';
 import { useTimerSocket } from '../../common/hooks/useSocket';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import { cx } from '../../common/utils/styleUtils';
@@ -31,7 +30,6 @@ import {
   getTotalTime,
 } from './timer.utils';
 import { TimerData, useTimerData } from './useTimerData';
-import { useTimerSound } from './useTimerSound';
 
 import './Timer.scss';
 
@@ -68,7 +66,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
     freezeOvertime,
     freezeMessage,
     hidePhase,
-    endSound,
     font,
     keyColour,
     timerColour,
@@ -78,8 +75,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
   const { getLocalizedString } = useTranslation();
   const localisedMinutes = getLocalizedString('common.minutes');
 
-  const showSoundPrompt = useTimerSound(time.phase, endSound);
-
   // gather modifiers
   const viewTimerType = timerType ?? timerTypeNow;
   const showOverlay = getShowMessage(message.timer);
@@ -161,8 +156,6 @@ function Timer({ customFields, projectData, isMirrored, settings, viewSettings,
 
       <ViewParamsEditor target={OntimeView.Timer} viewOptions={timerOptions} />
 
-      {showSoundPrompt && <SoundPermissionPrompt />}
-
       <div className={cx(['blackout', message.timer.blackout && 'blackout--active'])} />
 
       {!hideMessage && (
@@ -234,13 +227,3 @@ function TimerAutoTickingClock({ clockFormat }: { clockFormat: MaybeString }) {
     </div>
   );
 }
-
-function SoundPermissionPrompt() {
-  const isUserActive = useFadeOutOnInactivity(true);
-
-  return (
-    <div className={cx(['sound-prompt', !isUserActive && 'sound-prompt--hidden'])} aria-live='polite'>
-      Interact with the page (click/tap or press any key) to enable sound
-    </div>
-  );
-}

apps/client/src/views/timer/__tests__/timer.utils.test.ts

@@ -1,34 +0,0 @@
-import { TimerPhase } from 'ontime-types';
-
-import { shouldPlayEndSound } from '../timer.utils';
-
-describe('shouldPlayEndSound()', () => {
-  test.each([TimerPhase.Default, TimerPhase.Warning, TimerPhase.Danger])(
-    'sounds when a running timer goes into overtime from %s',
-    (previousPhase) => {
-      expect(shouldPlayEndSound(previousPhase, TimerPhase.Overtime)).toBe(true);
-    },
-  );
-
-  it('stays silent on the first phase we see, a client could be joining mid-overtime', () => {
-    expect(shouldPlayEndSound(null, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('stays silent when the phase was reset, a reload during overtime starts from none', () => {
-    expect(shouldPlayEndSound(TimerPhase.None, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('stays silent for a roll timer waiting to start', () => {
-    expect(shouldPlayEndSound(TimerPhase.Pending, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('sounds once, not on every update while in overtime', () => {
-    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.Overtime)).toBe(false);
-  });
-
-  it('stays silent on phases which are not the end of the timer', () => {
-    expect(shouldPlayEndSound(TimerPhase.Default, TimerPhase.Warning)).toBe(false);
-    expect(shouldPlayEndSound(TimerPhase.Warning, TimerPhase.Danger)).toBe(false);
-    expect(shouldPlayEndSound(TimerPhase.Overtime, TimerPhase.None)).toBe(false);
-  });
-});

apps/client/src/views/timer/timer.options.ts

@@ -16,7 +16,6 @@ import { ViewOption } from '../../common/components/view-params-editor/viewParam
 import { makeOptionsFromCustomFields } from '../../common/components/view-params-editor/viewParams.utils';
 import { PresetContext } from '../../common/context/PresetContext';
 import { isStringBoolean, makeColourString } from '../common/viewUtils';
-import { endSoundOptions, isEndSound, type EndSound } from './timer.sound';
 
 // manually match the properties of TimerType excluding the None
 const timerDisplayOptions: SelectOption[] = [
@@ -77,15 +76,6 @@ export const getTimerOptions = (timeFormat: string, customFields: CustomFields):
           type: 'boolean',
           defaultValue: false,
         },
-        {
-          id: 'endSound',
-          title: 'Play sound on timer end',
-          description:
-            'Plays a sound in this screen when the timer reaches zero. The screen must be interacted with once before it can play',
-          type: 'option',
-          values: endSoundOptions,
-          defaultValue: 'none',
-        },
       ],
     },
     {
@@ -203,7 +193,6 @@ type TimerOptions = {
   freezeOvertime: boolean;
   freezeMessage: string;
   hidePhase: boolean;
-  endSound: EndSound;
   font?: string;
   keyColour?: string;
   timerColour?: string;
@@ -219,7 +208,6 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
 
   // Get timerType from either source
   const timerType = validateTimerType(getValue('timerType'), TimerType.None);
-  const endSoundValue = getValue('endSound');
 
   return {
     hideClock: isStringBoolean(getValue('hideClock')),
@@ -239,7 +227,6 @@ function getOptionsFromParams(searchParams: URLSearchParams, defaultValues?: URL
     freezeOvertime: isStringBoolean(getValue('freezeOvertime')),
     freezeMessage: getValue('freezeMessage') ?? '',
     hidePhase: isStringBoolean(getValue('hidePhase')),
-    endSound: isEndSound(endSoundValue) ? endSoundValue : 'none',
 
     font: getValue('font') ?? undefined,
     keyColour: makeColourString(getValue('keyColour')),

apps/client/src/views/timer/timer.sound.ts

@@ -1,20 +0,0 @@
-import arpeggio from '../../assets/sounds/arpeggio.wav';
-import bell from '../../assets/sounds/bell.wav';
-import chime from '../../assets/sounds/chime.wav';
-import type { SelectOption } from '../../common/components/select/Select';
-
-// synthesised tones bundled with the app, no external source or licence to track
-export const endSoundSources = { chime, bell, arpeggio } as const;
-
-export type EndSound = 'none' | keyof typeof endSoundSources;
-
-export const endSoundOptions: SelectOption[] = [
-  { value: 'none', label: 'None' },
-  { value: 'chime', label: 'Chime' },
-  { value: 'bell', label: 'Bell' },
-  { value: 'arpeggio', label: 'Arpeggio' },
-];
-
-export function isEndSound(value: string | null): value is EndSound {
-  return value === 'none' || value === 'chime' || value === 'bell' || value === 'arpeggio';
-}

apps/client/src/views/timer/timer.utils.ts

@@ -189,18 +189,3 @@ export function getCardData(
     nextSecondary,
   };
 }
-
-/**
- * Whether the end of timer sound should play for a given phase transition
- * We only sound the transition into overtime from a phase that was already counting,
- * which keeps a client that connects or reloads mid-overtime silent
- */
-export function shouldPlayEndSound(previousPhase: TimerPhase | null, phase: TimerPhase): boolean {
-  if (phase !== TimerPhase.Overtime) {
-    return false;
-  }
-
-  return (
-    previousPhase === TimerPhase.Default || previousPhase === TimerPhase.Warning || previousPhase === TimerPhase.Danger
-  );
-}

apps/client/src/views/timer/useTimerData.ts

@@ -1,8 +1,8 @@
 import { CustomFields, ProjectData, RundownEntries, Settings, ViewSettings } from 'ontime-types';
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
-import { useLoadedRundown } from '../../common/hooks-query/useLoadedRundown';
 import useProjectData from '../../common/hooks-query/useProjectData';
+import useRundown from '../../common/hooks-query/useRundown';
 import useSettings from '../../common/hooks-query/useSettings';
 import useViewSettings from '../../common/hooks-query/useViewSettings';
 import { useViewOptionsStore } from '../../common/stores/viewOptions';
@@ -26,7 +26,7 @@ export function useTimerData(): ViewData<TimerData> {
   const { data: viewSettings, status: viewSettingsStatus } = useViewSettings();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();
-  const { data: rundown, status: rundownStatus } = useLoadedRundown();
+  const { data: rundown, status: rundownStatus } = useRundown();
   const { entries } = rundown;
 
   return {

apps/client/src/views/timer/useTimerSound.ts

@@ -1,99 +0,0 @@
-import { TimerPhase } from 'ontime-types';
-import { useEffect, useRef, useState } from 'react';
-
-import { endSoundSources, type EndSound } from './timer.sound';
-import { shouldPlayEndSound } from './timer.utils';
-
-/**
- * Plays a sound when the timer reaches its end
- *
- * Browsers reject playback until the document has been interacted with, and that permission
- * is lost on every page load. Since a timer screen is typically left unattended, we prime the
- * audio element on the first interaction and let the view prompt for one if it never comes.
- * Safari grants the permission per element, so priming has to call play() on this element from
- * inside the event handler, it is not enough to know that an interaction happened.
- */
-export function useTimerSound(phase: TimerPhase, sound: EndSound): boolean {
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const previousPhaseRef = useRef<TimerPhase | null>(null);
-  const [isArmed, setIsArmed] = useState(false);
-
-  const enabled = sound !== 'none';
-
-  // Create and clean up the audio element; changing sounds requires re-arming it in Safari.
-  useEffect(() => {
-    setIsArmed(false);
-
-    if (sound === 'none') {
-      return;
-    }
-
-    const audio = new Audio(endSoundSources[sound]);
-    audioRef.current = audio;
-
-    return () => {
-      audio.pause();
-      audioRef.current = null;
-    };
-  }, [sound]);
-
-  // Listen for user interaction until muted playback succeeds and arms the selected audio element.
-  useEffect(() => {
-    if (!enabled || isArmed) {
-      return;
-    }
-
-    const controller = new AbortController();
-    const prime = () => {
-      const audio = audioRef.current;
-      if (!audio) {
-        return;
-      }
-
-      const wasMuted = audio.muted;
-      audio.muted = true;
-      audio
-        .play()
-        .then(() => {
-          if (audioRef.current !== audio) {
-            return;
-          }
-          audio.pause();
-          audio.currentTime = 0;
-          setIsArmed(true);
-        })
-        .catch(() => {
-          // playback is still blocked, a later interaction will try again
-        })
-        .finally(() => {
-          audio.muted = wasMuted;
-        });
-    };
-
-    document.addEventListener('pointerdown', prime, { capture: true, signal: controller.signal });
-    document.addEventListener('keydown', prime, { capture: true, signal: controller.signal });
-
-    return () => {
-      controller.abort();
-    };
-  }, [enabled, isArmed]);
-
-  // Track phase transitions and play only when a running timer enters overtime.
-  useEffect(() => {
-    const previousPhase = previousPhaseRef.current;
-    previousPhaseRef.current = phase;
-
-    if (!enabled || !shouldPlayEndSound(previousPhase, phase)) {
-      return;
-    }
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    audio.currentTime = 0;
-    audio.play().catch(() => {
-      // the screen has not been interacted with, the view shows a prompt for it
-    });
-  }, [enabled, phase]);
-
-  return enabled && !isArmed;
-}

apps/server/src/api-data/rundown/rundown.service.ts

@@ -816,23 +816,27 @@ export async function createNewRundown(title: string) {
  * @throws if the provided id does not exist
  */
 export async function renameRundown(id: string, title: string) {
-  const { rundown, commit } = createTransaction({ rundownId: id, mutableRundown: true });
+  const dataProvider = getDataProvider();
+  const rundown = dataProvider.getRundown(id);
 
-  if (rundown.title === title) {
-    return getDataProvider().getProjectRundowns();
+  await dataProvider.setRundown(id, { ...rundown, title, revision: rundown.revision + 1 });
+
+  /**
+   * If we are modifying the loaded rundown we re-init it
+   * This is likely over-kill but the simplest way to ensure state consistency
+   */
+  if (isCurrentRundown(id)) {
+    const rundown = dataProvider.getRundown(id);
+    const customField = dataProvider.getCustomFields();
+    // init rundown does its own refetch
+    await initRundown(rundown, customField);
+  } else {
+    setImmediate(() => {
+      sendRefetch(RefetchKey.ProjectRundowns);
+    });
   }
 
-  rundown.title = title;
-
-  // a title has no bearing on the schedule, there is nothing to process and no runtime to notify
-  const { rundownMetadata, revision } = await commit(false);
-
-  setImmediate(() => {
-    notifyChanges(id, rundownMetadata, revision, { external: true });
-    sendRefetch(RefetchKey.ProjectRundowns);
-  });
-
-  return getDataProvider().getProjectRundowns();
+  return dataProvider.getProjectRundowns();
 }
 
 /**

docs/agent-guides/code-quality.md

@@ -36,10 +36,6 @@ Remove comments that:
 
 Update adjacent comments with code. Stale comments are defects.
 
-Add a short comment immediately above every React `useEffect` describing the external synchronization or lifecycle
-responsibility it owns. Explain non-obvious reasons or constraints when they matter; for files with multiple effects, a
-brief responsibility label is useful even when the mechanics are straightforward.
-
 ## Naming and types
 
 - Prefer Ontime terms over vague `data`, `result`, `item`.