fix(cuesheet): avoid layout shifts when images scroll back into view

The cuesheet is a virtualised table: rows are unmounted once they leave
the viewport, taking the <img> elements with them. On the way back the
image has no dimensions until the browser makes it available, so the row
grows under the user as it loads.

We now remember the aspect ratio of the images we have seen and use it to
reserve the space the image will take. This holds two numbers per image:
the image data itself is left to the browser cache, which is better
placed than us to decide when memory should be released.

Also drops the lazy loading attribute: the row is only mounted when it is
already close to the viewport, so it only adds a gate before the request.

Whether the image is fetched again on scroll back is decided by the cache
headers of the host serving it, and cannot be worked around from here.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CKXcDrZoQXbJpaXiLi1aff

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

@@ -1,15 +1,15 @@
 import { PropsWithChildren, createContext, useContext } from 'react';
 
-import { useEntryActions, useScopedEntryActions } from '../hooks/useEntryAction';
-import { useRundownSelectionContext } from './RundownSelectionContext';
+import { useEntryActions } from '../hooks/useEntryAction';
 
 type EntryActionsContextValue = ReturnType<typeof useEntryActions>;
 const EntryActionsContext = createContext<EntryActionsContextValue | null>(null);
 
-export function EntryActionsProvider({ children }: PropsWithChildren) {
-  const { effectiveRundownId } = useRundownSelectionContext();
-  const actions = useScopedEntryActions(effectiveRundownId);
+interface EntryActionsProviderProps extends PropsWithChildren {
+  actions: EntryActionsContextValue;
+}
 
+export function EntryActionsProvider({ children, actions }: EntryActionsProviderProps) {
   return <EntryActionsContext.Provider value={actions}>{children}</EntryActionsContext.Provider>;
 }
 

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

@@ -1,120 +0,0 @@
-import { Maybe, ProjectRundown } from 'ontime-types';
-import { PropsWithChildren, createContext, startTransition, useCallback, useContext, useEffect, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
-import { useNavigate } from 'react-router';
-
-import { useProjectRundowns } from '../hooks-query/useProjectRundowns';
-
-export type RundownScopeValue = {
-  loadedRundownId: string;
-  selectedRundownId: Maybe<string>;
-  isLoadedRundown: boolean;
-  effectiveRundownId: string;
-  selectRundownId: (val: Maybe<string>) => void;
-  rundowns: ProjectRundown[];
-};
-
-const RundownScopeContext = createContext<RundownScopeValue | null>(null);
-
-export function RundownSelectionContextProvider({ children }: PropsWithChildren) {
-  'use memo';
-  const { data } = useProjectRundowns();
-  const { loaded, rundowns } = data;
-
-  const [selectedRundownId, setSelectedRundownId] = useSelectRundownFromParams();
-
-  const selectRundownId = useCallback(
-    (rundownId: Maybe<string>) => {
-      startTransition(() => {
-        if (rundowns.find((entry) => entry.id === rundownId)) setSelectedRundownId(rundownId);
-        else setSelectedRundownId(null);
-      });
-    },
-    [rundowns, setSelectedRundownId],
-  );
-
-  const effectiveRundownId = selectedRundownId ? selectedRundownId : loaded;
-  const isLoadedRundown = effectiveRundownId === loaded;
-
-  useEffect(() => {
-    if (!rundowns.find((entry) => entry.id === effectiveRundownId)) setSelectedRundownId(null);
-  }, [rundowns, effectiveRundownId, setSelectedRundownId]);
-
-  const value = useMemo(
-    (): RundownScopeValue => ({
-      loadedRundownId: loaded,
-      isLoadedRundown,
-      selectedRundownId,
-      effectiveRundownId,
-      selectRundownId,
-      rundowns,
-    }),
-    [loaded, isLoadedRundown, selectedRundownId, effectiveRundownId, selectRundownId, rundowns],
-  );
-
-  return <RundownScopeContext.Provider value={value}>{children}</RundownScopeContext.Provider>;
-}
-
-export function useRundownSelectionContext() {
-  const context = useContext(RundownScopeContext);
-
-  if (!context) {
-    throw new Error('useRundownScopeSelection requires a RundownSelectionContextProvider');
-  }
-
-  return context;
-}
-
-const rundownParam = 'rundownId';
-
-export function useSelectRundownFromParams(): [Maybe<string>, (id: Maybe<string>) => void] {
-  'use memo';
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const selectedRundownId = searchParams.get(rundownParam);
-  const setSelectedRundownId = useCallback(
-    (id: Maybe<string>) => {
-      if (id === null) {
-        setSearchParams((searchParams) => {
-          searchParams.delete(rundownParam);
-          return searchParams;
-        });
-      } else {
-        setSearchParams((searchParams) => {
-          searchParams.set(rundownParam, id);
-          return searchParams;
-        });
-      }
-    },
-    [setSearchParams],
-  );
-
-  return [selectedRundownId, setSelectedRundownId];
-}
-
-/**
- *
- * mutates the provided `searchParams`
- */
-export function setSelectRundownInParams(id: Maybe<string>, searchParams: URLSearchParams): void {
-  if (id === null) {
-    searchParams.delete(rundownParam);
-  } else {
-    searchParams.set(rundownParam, id);
-  }
-}
-
-export function useDirectLinkToBackgroundEdit() {
-  const navigate = useNavigate();
-  const [search] = useSearchParams();
-  return useCallback(
-    async (rundownId: string) => {
-      setSelectRundownInParams(rundownId, search);
-      navigate({
-        pathname: '/cuesheet',
-        search: search.toString(),
-      });
-    },
-    [navigate, search],
-  );
-}

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

@@ -1,101 +0,0 @@
-import { isOntimeEvent, OntimeEvent } from 'ontime-types';
-import { useMemo } from 'react';
-
-import { useRundownSelectionContext } from '../context/RundownSelectionContext';
-import { useSelectedEventId } from '../hooks/useSocket';
-import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
-import { useFlatRundown, useRundown } from './useRundown';
-
-export function useContextRundownEditModal() {
-  'use memo';
-  const { effectiveRundownId } = useRundownSelectionContext();
-  const { data: rundown } = useRundown(effectiveRundownId);
-  return { rundown };
-}
-
-export function useContextRundownCueRenumberModal() {
-  'use memo';
-  const { effectiveRundownId } = useRundownSelectionContext();
-  const { data } = useRundown(effectiveRundownId);
-  const { flatOrder } = data;
-  return { flatOrder };
-}
-
-export function useContextRundownList() {
-  'use memo';
-  const { effectiveRundownId, isLoadedRundown } = useRundownSelectionContext();
-  const loadedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? loadedEventId : null;
-  const { data: rundown, status } = useRundown(effectiveRundownId);
-  const rundownMetadata = useMemo(
-    () => getRundownMetadata(rundown, effectiveSelectedEventId),
-    [effectiveSelectedEventId, rundown],
-  );
-
-  return useMemo(
-    () => ({
-      rundown,
-      rundownMetadata,
-      status,
-      isLoadedRundown,
-    }),
-    [rundown, rundownMetadata, status, isLoadedRundown],
-  );
-}
-
-export function useContextRundownTitleList() {
-  'use memo';
-  const { effectiveRundownId, isLoadedRundown } = useRundownSelectionContext();
-  const loadedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? loadedEventId : null;
-  const { data: rundown, status } = useRundown(effectiveRundownId);
-  const flatRundown = useMemo(() => {
-    const flatData = getFlatRundownMetadata(rundown, effectiveSelectedEventId);
-    return flatData.filter(isOntimeEvent) as ExtendedEntry<OntimeEvent>[];
-  }, [effectiveSelectedEventId, rundown]);
-
-  return useMemo(
-    () => ({
-      flatRundown,
-      status,
-      isLoadedRundown,
-    }),
-    [status, isLoadedRundown, flatRundown],
-  );
-}
-
-export function useContextRundownTable() {
-  'use memo';
-  const { effectiveRundownId, isLoadedRundown } = useRundownSelectionContext();
-  const loadedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? loadedEventId : null;
-  const { data: rundown, status } = useRundown(effectiveRundownId);
-  const flatRundown = useMemo(
-    () => getFlatRundownMetadata(rundown, effectiveSelectedEventId),
-    [effectiveSelectedEventId, rundown],
-  );
-
-  return useMemo(
-    () => ({
-      flatRundown,
-      status,
-      loadedEventId,
-    }),
-    [flatRundown, status, loadedEventId],
-  );
-}
-
-export function useContextRundownFinder() {
-  'use memo';
-  const { effectiveRundownId } = useRundownSelectionContext();
-  const { data: rundown, status } = useFlatRundown(effectiveRundownId);
-
-  return useMemo(
-    () => ({
-      rundown,
-      rundownId: effectiveRundownId,
-      status,
-    }),
-    [rundown, status, effectiveRundownId],
-  );
-}

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

@@ -1,18 +1,24 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
-import { ProjectFile, ProjectFileList } from 'ontime-types';
-import { MILLIS_PER_HOUR } from 'ontime-utils';
+import { useQuery } from '@tanstack/react-query';
+import { ProjectFile, ProjectFileList, ProjectFileListResponse } from 'ontime-types';
 import { useMemo } from 'react';
 
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_LIST } from '../api/constants';
 import { getProjects } from '../api/db';
 
-export function useProjectList() {
-  const { data, status, refetch } = useSuspenseQuery({
+const placeholderProjectList: ProjectFileListResponse = {
+  files: [],
+  lastLoadedProject: '',
+};
+
+function useProjectList() {
+  const { data, status, refetch } = useQuery({
     queryKey: PROJECT_LIST,
     queryFn: ({ signal }) => getProjects({ signal }),
-    staleTime: MILLIS_PER_HOUR,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
   });
-  return { data, status, refetch };
+  return { data: data ?? placeholderProjectList, status, refetch };
 }
 
 export type ProjectSortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'modified-asc' | 'modified-desc';

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

@@ -1,7 +1,7 @@
-import { useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ProjectRundownsList } from 'ontime-types';
-import { MILLIS_PER_HOUR } from 'ontime-utils';
 
+import { queryRefetchIntervalSlow } from '../../ontimeConfig';
 import { PROJECT_RUNDOWNS } from '../api/constants';
 import {
   createRundown,
@@ -11,21 +11,24 @@ import {
   loadRundown,
   renameRundown,
 } from '../api/rundown';
-import { ontimeQueryClient } from '../queryClient';
 
+//TODO: make suspends so we don't have to deal with no value all over
 /**
  * Project rundowns
  */
 export function useProjectRundowns() {
-  const { data, status, isError, refetch, isFetching } = useSuspenseQuery<ProjectRundownsList>({
+  const { data, status, isError, refetch, isFetching } = useQuery<ProjectRundownsList>({
     queryKey: PROJECT_RUNDOWNS,
     queryFn: ({ signal }) => fetchProjectRundownList({ signal }),
-    staleTime: MILLIS_PER_HOUR,
+    placeholderData: (previousData, _previousQuery) => previousData,
+    refetchInterval: queryRefetchIntervalSlow,
   });
-  return { data, status, isError, refetch, isFetching };
+  return { data: data ?? { loaded: '', rundowns: [] }, status, isError, refetch, isFetching };
 }
 
 export function useMutateProjectRundowns() {
+  const ontimeQueryClient = useQueryClient();
+
   const { mutateAsync: create } = useMutation({
     mutationFn: createRundown,
     onMutate: () => {

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

@@ -1,10 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
-import { EntryId, Maybe, OntimeEntry, Rundown } 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 { queryRefetchIntervalSlow } from '../../ontimeConfig';
-import { getRundownQueryKey } from '../api/constants';
-import { fetchRundown } from '../api/rundown';
+import { CURRENT_RUNDOWN_QUERY_KEY, getRundownQueryKey } from '../api/constants';
+import { fetchCurrentRundown, fetchRundown } from '../api/rundown';
 import { useSelectedEventId } from '../hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata, getRundownMetadata } from '../utils/rundownMetadata';
 import { useProjectRundowns } from './useProjectRundowns';
@@ -20,36 +20,43 @@ const cachedRundownPlaceholder: Rundown = {
 };
 
 /**
- * Provides access to a specific rundown by ID.
- * When rundownId is not provided the loaded rundown is provided
+ * 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 function useRundown(rundownId: Maybe<string>) {
-  'use memo';
-
+export default function useRundown() {
+  const queryClient = useQueryClient();
   const {
     data: { loaded: loadedRundownId },
   } = useProjectRundowns();
 
-  const effectiveRundownId = rundownId !== null ? rundownId : loadedRundownId;
-  const isLoadedRundown = effectiveRundownId === loadedRundownId;
-
   const { data, status, isError, refetch, isFetching } = useQuery<Rundown>({
-    queryKey: getRundownQueryKey(effectiveRundownId),
-    queryFn: ({ signal }) => fetchRundown(effectiveRundownId, { signal }),
-    placeholderData: (previousData, _previousQuery) => previousData,
+    queryKey: loadedRundownId ? getRundownQueryKey(loadedRundownId) : CURRENT_RUNDOWN_QUERY_KEY,
+    queryFn: ({ signal }) => fetchCurrentRundown({ signal }),
     refetchInterval: queryRefetchIntervalSlow,
   });
 
-  return { data: data ?? cachedRundownPlaceholder, status, isError, refetch, isFetching, isLoadedRundown };
+  // 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(rundownId: Maybe<string>) {
-  'use memo';
-
-  const { data, status, isLoadedRundown } = useRundown(rundownId);
+export function useRundownWithMetadata() {
+  const { data, status } = useRundown();
   const selectedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? selectedEventId : null;
-  const rundownMetadata = getRundownMetadata(data, effectiveSelectedEventId);
+  const rundownMetadata = useMemo(() => getRundownMetadata(data, selectedEventId), [data, selectedEventId]);
   return { data, status, rundownMetadata };
 }
 
@@ -57,8 +64,8 @@ export function useRundownWithMetadata(rundownId: Maybe<string>) {
  * Provides access to a flat rundown
  * built from the order and rundown fields
  */
-export function useFlatRundown(rundownId: Maybe<string>) {
-  const { data, status } = useRundown(rundownId);
+export function useFlatRundown() {
+  const { data, status } = useRundown();
 
   const flatRundown = useMemo(() => {
     if (data.revision === -1) {
@@ -70,13 +77,11 @@ export function useFlatRundown(rundownId: Maybe<string>) {
   return { data: flatRundown, rundownId: data.id, status };
 }
 
-export function useFlatRundownWithMetadata(rundownId: Maybe<string>) {
-  'use memo';
-
-  const { data, status, isLoadedRundown } = useRundown(rundownId);
+export function useFlatRundownWithMetadata() {
+  const { data, status } = useRundown();
   const selectedEventId = useSelectedEventId();
-  const effectiveSelectedEventId = isLoadedRundown ? selectedEventId : null;
-  const rundownWithMetadata = getFlatRundownMetadata(data, effectiveSelectedEventId);
+
+  const rundownWithMetadata = useMemo(() => getFlatRundownMetadata(data, selectedEventId), [data, selectedEventId]);
   return { data: rundownWithMetadata, status };
 }
 
@@ -87,8 +92,8 @@ export function useFlatRundownWithMetadata(rundownId: Maybe<string>) {
  * re-filtering on every render.
  *
  */
-export function usePartialRundown(rundownId: Maybe<string>, cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
-  const { data, status } = useFlatRundownWithMetadata(rundownId);
+export function usePartialRundown(cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
+  const { data, status } = useFlatRundownWithMetadata();
   const filteredData = useMemo(() => {
     return data.filter(cb);
   }, [data, cb]);
@@ -98,20 +103,37 @@ export function usePartialRundown(rundownId: Maybe<string>, cb: (event: Extended
 
 /**
  * Hook to get a specific entry by ID from the rundown
- * @deprecated
  */
-export function useEntry(rundownId: Maybe<string>, entryId: EntryId | null): OntimeEntry | null {
-  const { data: rundown } = useRundown(rundownId);
+export function useEntry(entryId: EntryId | null): OntimeEntry | null {
+  const { data: rundown } = useRundown();
 
   if (entryId === null) return null;
   return rundown.entries[entryId] ?? null;
 }
 
-export function useRundownAuxData(rundownId: Maybe<string>) {
-  const { data, status } = useRundown(rundownId);
+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/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/utils/__tests__/imageDimensions.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from 'vitest';
+
+import { getRememberedAspectRatio, rememberAspectRatio } from '../imageDimensions';
+
+/** stand-in for a loaded HTMLImageElement */
+function makeImage(naturalWidth: number, naturalHeight: number) {
+  return { naturalWidth, naturalHeight } as HTMLImageElement;
+}
+
+describe('image dimensions', () => {
+  test('remembers the aspect ratio of a loaded image', () => {
+    expect(getRememberedAspectRatio('http://ontime.local/image.png')).toBe(null);
+
+    rememberAspectRatio('http://ontime.local/image.png', makeImage(1920, 1080));
+
+    expect(getRememberedAspectRatio('http://ontime.local/image.png')).toBe(1920 / 1080);
+  });
+
+  test('handles images which have not loaded', () => {
+    rememberAspectRatio('http://ontime.local/broken.png', makeImage(0, 0));
+    expect(getRememberedAspectRatio('http://ontime.local/broken.png')).toBe(null);
+  });
+
+  test('handles missing values', () => {
+    expect(getRememberedAspectRatio(undefined)).toBe(null);
+    expect(getRememberedAspectRatio('')).toBe(null);
+    expect(() => rememberAspectRatio('', makeImage(100, 100))).not.toThrow();
+  });
+
+  test('forgets the least recently used entries', () => {
+    for (let i = 0; i < 600; i++) {
+      rememberAspectRatio(`http://ontime.local/${i}.png`, makeImage(100, 50));
+    }
+
+    expect(getRememberedAspectRatio('http://ontime.local/0.png')).toBe(null);
+    expect(getRememberedAspectRatio('http://ontime.local/599.png')).toBe(2);
+  });
+});

apps/client/src/common/utils/__tests__/rundownMetadata.test.ts

@@ -90,7 +90,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 0,
       isPast: true,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -108,7 +107,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 1, // UI indexes are 1 based
       isPast: true,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -126,7 +124,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 1,
       isPast: true,
       isNextDay: false,
-      isParentToLoaded: true,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -143,7 +140,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 2,
       isPast: true,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -160,7 +156,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 2,
       isPast: true,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -177,7 +172,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 3,
       isPast: false,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: true,
       isLoaded: true,
@@ -194,7 +188,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 4,
       isPast: false,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: true,
       isLoaded: false,
@@ -211,7 +204,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 5,
       isPast: false,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 7,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -264,7 +256,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 0,
       isPast: false,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -282,7 +273,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 1,
       isPast: false,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,
@@ -300,7 +290,6 @@ describe('initRundownMetadata()', () => {
       eventIndex: 2,
       isPast: false,
       isNextDay: false,
-      isParentToLoaded: false,
       totalGap: 0,
       isLinkedToLoaded: false,
       isLoaded: false,

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

@@ -0,0 +1,47 @@
+/**
+ * Images in the cuesheet live inside a virtualised table:
+ * rows are unmounted when they leave the viewport and mounted again when they come back.
+ * A re-mounted image has no dimensions until it is available,
+ * which makes the row change height and the table shift under the user.
+ *
+ * We remember the aspect ratio of the images we have already seen
+ * so that we can reserve the space they will take.
+ * This only holds two numbers per image: we leave the image data itself to the browser cache,
+ * which knows better than us when memory should be released.
+ */
+
+/** how many aspect ratios we remember, this is only a few bytes per entry */
+const maxSize = 500;
+
+const aspectRatios = new Map<string, number>();
+
+/**
+ * @returns the aspect ratio of a previously loaded image, if we have seen it before
+ */
+export function getRememberedAspectRatio(src: string | null | undefined): number | null {
+  if (!src) {
+    return null;
+  }
+  return aspectRatios.get(src) ?? null;
+}
+
+/**
+ * Records the aspect ratio of a loaded image
+ */
+export function rememberAspectRatio(src: string | null | undefined, image: HTMLImageElement) {
+  if (!src || image.naturalHeight === 0) {
+    return;
+  }
+
+  // the map iteration order is our LRU queue, re-adding the entry marks it as recently used
+  aspectRatios.delete(src);
+  aspectRatios.set(src, image.naturalWidth / image.naturalHeight);
+
+  while (aspectRatios.size > maxSize) {
+    const oldest = aspectRatios.keys().next();
+    if (oldest.done) {
+      return;
+    }
+    aspectRatios.delete(oldest.value);
+  }
+}

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

@@ -27,7 +27,6 @@ export type RundownMetadata = {
   groupColour: string | undefined;
   groupEntries: number | undefined;
   isFirstAfterGroup: boolean;
-  isParentToLoaded: boolean; // if the group contains the loaded event
 };
 
 export type ExtendedEntry<T extends OntimeEntry = OntimeEntry> = T & RundownMetadata;
@@ -95,7 +94,6 @@ export function initRundownMetadata(selectedEventId: MaybeString) {
     groupColour: undefined,
     groupEntries: undefined,
     isFirstAfterGroup: false,
-    isParentToLoaded: false,
   };
 
   function process(entry: OntimeEntry): Readonly<RundownMetadata> {
@@ -119,7 +117,6 @@ function processEntry(
   // initialise data to be overridden below
   processedData.isNextDay = false;
   processedData.isLoaded = false;
-  processedData.isParentToLoaded = false;
 
   processedData.previousEntryId = processedData.thisId; // thisId comes from the previous iteration
   processedData.thisId = entry.id; // we reassign thisId
@@ -135,7 +132,6 @@ function processEntry(
     processedData.groupId = entry.id;
     processedData.groupColour = entry.colour;
     processedData.groupEntries = entry.entries.length;
-    processedData.isParentToLoaded = selectedEventId ? entry.entries.includes(selectedEventId) : false;
   } else {
     // for delays and groups, we insert the group metadata
     if ((entry as OntimeEvent | OntimeDelay | OntimeMilestone).parent !== processedData.groupId) {

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

@@ -14,6 +14,7 @@ import {
   APP_SETTINGS,
   CLIENT_LIST,
   CSS_OVERRIDE,
+  CURRENT_RUNDOWN_QUERY_KEY,
   CUSTOM_FIELDS,
   PROJECT_DATA,
   REPORT,
@@ -24,7 +25,6 @@ import {
   VIEW_SETTINGS,
   getRundownQueryKey,
   PROJECT_RUNDOWNS,
-  PROJECT_LIST,
 } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
@@ -216,9 +216,6 @@ export const connectSocket = () => {
             case RefetchKey.ProjectRundowns:
               ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_RUNDOWNS });
               break;
-            case RefetchKey.ProjectFiles:
-              ontimeQueryClient.invalidateQueries({ queryKey: PROJECT_LIST });
-              break;
             default: {
               target satisfies never;
               break;
@@ -241,6 +238,7 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
   if (!rundownId) {
     // we omit rundownId to signify invalidate all rundowns
     ontimeQueryClient.invalidateQueries({ queryKey: RUNDOWN });
+    ontimeQueryClient.invalidateQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
     return;
   }
 
@@ -254,6 +252,12 @@ export function maybeInvalidateRundownCache(revision: MaybeNumber, rundownId?: s
   }
 
   ontimeQueryClient.invalidateQueries({ queryKey, exact: true });
+
+  // keep current alias in sync with the ID-based cache
+  const loadedRundownId = ontimeQueryClient.getQueryData<{ loaded: string }>(PROJECT_RUNDOWNS)?.loaded;
+  if (!loadedRundownId || loadedRundownId === rundownId) {
+    ontimeQueryClient.invalidateQueries({ queryKey: CURRENT_RUNDOWN_QUERY_KEY, exact: true });
+  }
 }
 
 export function sendSocket<T extends MessageTag | ApiActionTag>(

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

@@ -5,7 +5,7 @@ import { deleteAllReport } from '../../../../common/api/report';
 import { createBlob, downloadBlob } from '../../../../common/api/utils';
 import Button from '../../../../common/components/buttons/Button';
 import useReport from '../../../../common/hooks-query/useReport';
-import { useRundown } from '../../../../common/hooks-query/useRundown';
+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 } = useRundown(null);
+  const { data } = useRundown();
 
   const clearReport = async () => await deleteAllReport();
   const downloadCSV = (combinedReport: CombinedReport[]) => {

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

@@ -1,5 +1,5 @@
 import { useDisclosure } from '@mantine/hooks';
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 import {
   IoAdd,
   IoDocumentOutline,
@@ -18,9 +18,9 @@ import IconButton from '../../../../common/components/buttons/IconButton';
 import Dialog from '../../../../common/components/dialog/Dialog';
 import { DropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
 import Tag from '../../../../common/components/tag/Tag';
-import { useDirectLinkToBackgroundEdit } from '../../../../common/context/RundownSelectionContext';
 import { useMutateProjectRundowns, useProjectRundowns } from '../../../../common/hooks-query/useProjectRundowns';
 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';
@@ -28,20 +28,6 @@ import { ManageRundownForm } from './ManageRundownForm';
 import style from './ManagePanel.module.scss';
 
 export default function ManageRundowns() {
-  return (
-    <Suspense
-      fallback={
-        <div className={style.empty}>
-          <Panel.Loader isLoading />
-        </div>
-      }
-    >
-      <ManageRundownsSuspense />
-    </Suspense>
-  );
-}
-
-function ManageRundownsSuspense() {
   const { data } = useProjectRundowns();
   const { duplicate, remove, load, rename } = useMutateProjectRundowns();
   const [isOpenDelete, deleteHandlers] = useDisclosure();

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 { useRundown } from '../../../../../common/hooks-query/useRundown';
+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 } = useRundown(null);
+  const { data: currentRundown } = useRundown();
   const { applyImport } = useSpreadsheetImport();
   const navigate = useNavigate();
 

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

@@ -1,4 +1,4 @@
-import { Suspense, useState } from 'react';
+import { useState } from 'react';
 import { IoArrowDown, IoArrowUp } from 'react-icons/io5';
 
 import Info from '../../../../common/components/info/Info';
@@ -11,25 +11,11 @@ import style from './ProjectPanel.module.scss';
 type SortParameter = 'alphabetical' | 'modified';
 
 export default function ProjectList() {
-  return (
-    <Suspense
-      fallback={
-        <div className={style.empty}>
-          <Panel.Loader isLoading />
-        </div>
-      }
-    >
-      <ProjectListSuspend />
-    </Suspense>
-  );
-}
-
-function ProjectListSuspend() {
   const [editingMode, setEditingMode] = useState<EditMode | null>(null);
   const [editingFilename, setEditingFilename] = useState<string | null>(null);
   const [sortMode, setSortMode] = useState<ProjectSortMode>('modified-desc');
 
-  const { data, refetch } = useOrderedProjectList(sortMode);
+  const { data, refetch, status } = useOrderedProjectList(sortMode);
 
   const handleToggleEditMode = (editMode: EditMode, filename: string | null) => {
     setEditingMode((prev) => (prev === editMode && filename === editingFilename ? null : editMode));
@@ -52,6 +38,14 @@ function ProjectListSuspend() {
     });
   };
 
+  if (status === 'pending') {
+    return (
+      <div className={style.empty}>
+        <Panel.Loader isLoading />
+      </div>
+    );
+  }
+
   const numProjects = data.reorderedProjectFiles.length;
 
   return (

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

@@ -14,7 +14,7 @@ export interface OperatorData {
 }
 
 export function useOperatorData(): ViewData<OperatorData> {
-  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata(null);
+  const { data: rundown, rundownMetadata, status: rundownStatus } = useRundownWithMetadata();
   const { data: customFields, status: customFieldStatus } = useCustomFields();
   const { data: settings, status: settingsStatus } = useSettings();
 

apps/client/src/features/overview/OverviewWrapper.tsx

@@ -1,10 +1,9 @@
 import { ErrorBoundary } from '@sentry/react';
-import { PropsWithChildren, ReactNode, Suspense } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 
 import ScrollArea from '../../common/components/scroll-area/ScrollArea';
 import { useIsOnline } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';
-import Loader from '../../views/common/loader/Loader';
 
 import style from './Overview.module.scss';
 
@@ -16,37 +15,18 @@ export function OverviewWrapper({ navElements, children }: PropsWithChildren<Ove
   const isOnline = useIsOnline();
 
   return (
-    <Suspense fallback={<OverviewFallback navElements={navElements} />}>
-      <div className={cx([style.overview, !isOnline && style.isOffline])}>
-        <ErrorBoundary>
-          <div className={style.nav}>{navElements}</div>
-          <ScrollArea
-            className={style.infoScroll}
-            contentClassName={style.info}
-            contentStyle={{ minWidth: '100%' }}
-            orientation='horizontal'
-          >
-            {children}
-          </ScrollArea>
-        </ErrorBoundary>
-      </div>
-    </Suspense>
-  );
-}
-
-function OverviewFallback({ navElements }: OverviewWrapperProps) {
-  return (
-    <div className={style.overview}>
-      <div className={style.nav}>{navElements}</div>
-      <ScrollArea
-        className={style.infoScroll}
-        contentClassName={style.info}
-        contentStyle={{ minWidth: '100%' }}
-        orientation='horizontal'
-      >
-        {/* TODO: this could be alined in a nicer way */}
-        <Loader />
-      </ScrollArea>
+    <div className={cx([style.overview, !isOnline && style.isOffline])}>
+      <ErrorBoundary>
+        <div className={style.nav}>{navElements}</div>
+        <ScrollArea
+          className={style.infoScroll}
+          contentClassName={style.info}
+          contentStyle={{ minWidth: '100%' }}
+          orientation='horizontal'
+        >
+          {children}
+        </ScrollArea>
+      </ErrorBoundary>
     </div>
   );
 }

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

@@ -210,7 +210,7 @@ export function MetadataTimes() {
 function GroupTimes() {
   const { clock, mode, groupExpectedEnd, actualGroupStart, currentDay, playback, phase } = useGroupTimerOverView();
   const currentGroupId = useCurrentGroupId();
-  const group = useEntry(null, 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 = useEntry(null, 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

@@ -6,7 +6,7 @@ import style from './TitleOverview.module.scss';
 export default function TitleOverview() {
   'use memo';
   const { data: projectData } = useProjectData();
-  const { data: rundownData } = useRundownAuxData(null);
+  const { data: rundownData } = useRundownAuxData();
 
   if (!projectData.title && !rundownData.title) {
     return null;

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

@@ -6,7 +6,8 @@ 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 { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
+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';
@@ -38,29 +39,28 @@ function RundownExport() {
     defaultValue: RundownViewMode.List,
   });
   const isSmallDevice = useIsSmallDevice();
+  const entryActions = useEntryActions();
 
   if (isSmallDevice && isExtracted) {
     return (
-      <RundownSelectionContextProvider>
-        <EntryActionsProvider>
-          <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>
+      <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>
-          </ProtectRoute>
-        </EntryActionsProvider>
-      </RundownSelectionContextProvider>
+          </div>
+        </ProtectRoute>
+      </EntryActionsProvider>
     );
   }
 
@@ -70,32 +70,30 @@ function RundownExport() {
     viewMode === RundownViewMode.Table;
 
   return (
-    <RundownSelectionContextProvider>
-      <EntryActionsProvider>
-        <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}>
+    <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>
+                {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
+                <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownContextMenu />
+              </ErrorBoundary>
+            </Editor.Panel>
+            {!hideSideBar && (
+              <div className={style.side}>
                 <ErrorBoundary>
-                  {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
-                  <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
-                  <RundownContextMenu />
+                  <RundownEntryEditor />
                 </ErrorBoundary>
-              </Editor.Panel>
-              {!hideSideBar && (
-                <div className={style.side}>
-                  <ErrorBoundary>
-                    <RundownEntryEditor />
-                  </ErrorBoundary>
-                </div>
-              )}
-            </div>
+              </div>
+            )}
           </div>
-        </ProtectRoute>
-      </EntryActionsProvider>
-    </RundownSelectionContextProvider>
+        </div>
+      </ProtectRoute>
+    </EntryActionsProvider>
   );
 }
 
@@ -107,16 +105,17 @@ interface RundownRootProps {
 }
 
 function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
+  const source = useLoadedRundownSource();
+
   return (
     <div className={style.rundownRoot}>
       {isSmallDevice ? (
         <RundownHeaderMobile viewMode={viewMode} setViewMode={setViewMode} />
       ) : (
-        // TODO: add data-background-rundown={!isLoadedRundown} styling
         <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,23 +1,16 @@
-import { Playback } from 'ontime-types';
 import { memo } from 'react';
 
 import Empty from '../../common/components/state/Empty';
-import { useContextRundownList } from '../../common/hooks-query/useContextRundown';
+import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
 import { useRundownEditor } from '../../common/hooks/useSocket';
 import Rundown from './Rundown';
 
-const backgroundFeatureData = {
-  playback: Playback.Stop,
-  selectedEventId: null,
-  nextEventId: null,
-};
-
 export default memo(RundownList);
 function RundownList() {
-  const { rundown, status, rundownMetadata, isLoadedRundown } = useContextRundownList();
+  const { data, status, rundownMetadata } = useRundownWithMetadata();
   const featureData = useRundownEditor();
 
-  const isLoading = status !== 'success' || !rundown || !rundownMetadata;
+  const isLoading = status !== 'success' || !data || !rundownMetadata;
 
   if (isLoading) {
     return <Empty text='Connecting to server' />;
@@ -25,12 +18,12 @@ function RundownList() {
 
   return (
     <Rundown
-      order={rundown.order}
-      flatOrder={rundown.flatOrder}
-      entries={rundown.entries}
-      id={rundown.id}
+      order={data.order}
+      flatOrder={data.flatOrder}
+      entries={data.entries}
+      id={data.id}
       rundownMetadata={rundownMetadata}
-      featureData={isLoadedRundown ? featureData : backgroundFeatureData}
+      featureData={featureData}
     />
   );
 }

apps/client/src/features/rundown/common/RundownSelect.module.scss

@@ -1,3 +0,0 @@
-.rundownSelect {
-  min-width: min(20rem, calc(100vw - 6rem));
-}

apps/client/src/features/rundown/common/RundownSelect.tsx

@@ -1,42 +0,0 @@
-import Select from '../../../common/components/select/Select';
-import { useRundownSelectionContext } from '../../../common/context/RundownSelectionContext';
-import { AppMode } from '../../../ontimeConfig';
-
-import styles from './RundownSelect.module.scss';
-
-const FOLLOW = '___null___';
-
-interface RundownSelectProps {
-  appMode: AppMode;
-}
-
-export function RundownSelect({ appMode }: RundownSelectProps) {
-  'use memo';
-  const { selectRundownId, rundowns, loadedRundownId, selectedRundownId } = useRundownSelectionContext();
-
-  const options = rundowns.map(({ id, title }) => ({
-    value: id,
-    label: loadedRundownId === id ? `${title} (loaded)` : title,
-  }));
-
-  // add a follow option
-  options.unshift({
-    value: FOLLOW,
-    label: 'Follow loaded',
-  });
-
-  return (
-    <div className={styles.rundownSelect}>
-      <Select
-        value={selectedRundownId ?? FOLLOW}
-        options={options}
-        onValueChange={(value) => {
-          if (value === FOLLOW) selectRundownId(null);
-          else selectRundownId(value);
-        }}
-        disabled={appMode === AppMode.Run}
-        fluid
-      />
-    </div>
-  );
-}

apps/client/src/features/rundown/entry-editor/RundownEntryEditor.tsx

@@ -1,7 +1,7 @@
 import { OntimeEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { useMemo } from 'react';
 
-import { useRundown } from '../../../common/hooks-query/useRundown';
+import useRundown from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../useEventSelection';
 import EventEditorFooter from './composite/EventEditorFooter';
 import EventEditor from './EventEditor';
@@ -13,7 +13,7 @@ import style from './EntryEditor.module.scss';
 
 export default function RundownEntryEditor() {
   const selectedEvents = useEventSelection((state) => state.selectedEvents);
-  const { data } = useRundown(null);
+  const { data } = useRundown();
 
   const entry = useMemo<OntimeEntry | null>(() => {
     if (data.order.length === 0) {

apps/client/src/features/rundown/renumber-cues-dialog/RenumberCuesDialog.tsx

@@ -7,7 +7,7 @@ import Button from '../../../common/components/buttons/Button';
 import Dialog from '../../../common/components/dialog/Dialog';
 import Input from '../../../common/components/input/input/Input';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useContextRundownCueRenumberModal } from '../../../common/hooks-query/useContextRundown';
+import useRundown from '../../../common/hooks-query/useRundown';
 import { orderEntries } from '../rundown.utils';
 import { useEventSelection } from '../useEventSelection';
 
@@ -17,7 +17,8 @@ type RenumberCueData = Pick<RenumberCues, 'increment' | 'prefix' | 'start'>;
 
 export default function RenumberCuesDialog() {
   'use memo';
-  const { flatOrder } = useContextRundownCueRenumberModal();
+  const { data } = useRundown();
+  const { flatOrder } = data;
   const { onClose, isOpen } = useRenumberCuesDialogStore();
   const { renumberCues } = useEntryActionsContext();
   const selectedEvents = useEventSelection((state) => state.selectedEvents);

apps/client/src/features/rundown/rundown-header/RundownHeader.tsx

@@ -8,7 +8,6 @@ import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { setOffsetMode, useOffsetMode } from '../../../common/hooks/useSocket';
 import { AppMode } from '../../../ontimeConfig';
 import { EditorLayoutMode, useEditorLayout } from '../../../views/editor/useEditorLayout';
-import { RundownSelect } from '../common/RundownSelect';
 import { RundownViewMode } from '../rundown.options';
 import { useEditorFollowMode } from '../useEditorFollowMode';
 import RundownMenu from './RundownMenu';
@@ -25,7 +24,6 @@ interface HeaderControlsConfig {
   showRunEditToggle: boolean;
   showOffsetToggle: boolean;
   showOverflowMenu: boolean;
-  showRundownSelect: boolean;
 }
 
 export const HEADER_CONTROLS_CONFIG: Record<EditorLayoutMode, HeaderControlsConfig> = {
@@ -33,19 +31,16 @@ export const HEADER_CONTROLS_CONFIG: Record<EditorLayoutMode, HeaderControlsConf
     showRunEditToggle: true,
     showOffsetToggle: true,
     showOverflowMenu: true,
-    showRundownSelect: false,
   },
   [EditorLayoutMode.PLANNING]: {
     showRunEditToggle: false,
     showOffsetToggle: false,
     showOverflowMenu: true,
-    showRundownSelect: true,
   },
   [EditorLayoutMode.TRACKING]: {
     showRunEditToggle: false,
     showOffsetToggle: true,
     showOverflowMenu: false,
-    showRundownSelect: false,
   },
 } as const;
 
@@ -55,8 +50,7 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
   const offsetMode = useOffsetMode();
   const { layoutMode } = useEditorLayout();
 
-  const { showRunEditToggle, showOffsetToggle, showOverflowMenu, showRundownSelect } =
-    HEADER_CONTROLS_CONFIG[layoutMode];
+  const { showRunEditToggle, showOffsetToggle, showOverflowMenu } = HEADER_CONTROLS_CONFIG[layoutMode];
 
   const toggleAppMode = (mode: AppMode[]) => {
     // we need to stop user from deselecting a mode
@@ -128,8 +122,6 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
         </ToggleGroup>
       )}
 
-      {showRundownSelect && <RundownSelect appMode={editorMode} />}
-
       {showOverflowMenu && <RundownMenu allowNavigation={!isExtracted} />}
     </Toolbar.Root>
   );

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

@@ -1,7 +1,10 @@
 import { memo, useEffect, useMemo } from 'react';
 
 import EmptyPage from '../../../common/components/state/EmptyPage';
+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';
@@ -13,6 +16,8 @@ function RundownTable() {
   const { data: customFields, status: customFieldStatus } = useCustomFields();
   const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
   const { editorMode } = useEditorFollowMode();
+  const source = useLoadedRundownSource();
+  const actions = useEntryActions();
 
   // Editor always has full permissions
   useEffect(() => {
@@ -30,12 +35,14 @@ function RundownTable() {
   const isLoading = !customFields || customFieldStatus === 'pending';
 
   return (
-    <CuesheetDnd columns={columns} tableRoot='editor'>
-      {isLoading ? (
-        <EmptyPage text='Loading...' />
-      ) : (
-        <CuesheetTable columns={columns} cuesheetMode={editorMode} tableRoot='editor' />
-      )}
-    </CuesheetDnd>
+    <EntryActionsProvider actions={actions}>
+      <CuesheetDnd columns={columns} tableRoot='editor'>
+        {isLoading ? (
+          <EmptyPage text='Loading...' />
+        ) : (
+          <CuesheetTable columns={columns} source={source} cuesheetMode={editorMode} tableRoot='editor' />
+        )}
+      </CuesheetDnd>
+    </EntryActionsProvider>
   );
 }

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

@@ -20,7 +20,7 @@ export function useBackstageData(): ViewData<BackstageData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundown(null);
+  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

@@ -45,7 +45,7 @@ export const ScheduleProvider = ({ children, selectedEventId }: PropsWithChildre
     [filter],
   );
 
-  const { data: events } = usePartialRundown(null, filterCallback);
+  const { data: events } = usePartialRundown(filterCallback);
 
   const [firstIndex, setFirstIndex] = useState(-1);
   const [numPages, setNumPages] = useState(0);

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

@@ -21,7 +21,7 @@ export function useCountdownData(): ViewData<CountdownData> {
   const isMirrored = useViewOptionsStore((state) => state.mirror);
 
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata(null);
+  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.module.scss

@@ -14,3 +14,7 @@
     'table';
   color: $ui-white;
 }
+
+.rundownSelect {
+  min-width: min(20rem, calc(100vw - 6rem));
+}

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

@@ -4,46 +4,51 @@ import { IoApps } from 'react-icons/io5';
 import IconButton from '../../common/components/buttons/IconButton';
 import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
 import { EntryActionsProvider } from '../../common/context/EntryActionsContext';
-import { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
+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 { 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 (
-    <RundownSelectionContextProvider>
-      <EntryActionsProvider>
-        <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
-        <EntryEditModal />
-        <div className={styles.tableWrapper} data-testid='cuesheet'>
-          <CuesheetOverview>
-            {!isLocked && (
-              <IconButton
-                aria-label='Toggle navigation'
-                variant='subtle-white'
-                size='xlarge'
-                onClick={menuHandler.open}
-              >
-                <IoApps />
-              </IconButton>
-            )}
-          </CuesheetOverview>
-          <CuesheetProgress />
-          <CuesheetTableWrapper />
-        </div>
-      </EntryActionsProvider>
-    </RundownSelectionContextProvider>
+    <EntryActionsProvider actions={actions}>
+      <NavigationMenu isOpen={isMenuOpen} onClose={menuHandler.close} />
+      <EntryEditModal rundown={source.rundown} />
+      <div className={styles.tableWrapper} data-testid='cuesheet'>
+        <CuesheetOverview>
+          {!isLocked && (
+            <IconButton aria-label='Toggle navigation' variant='subtle-white' size='xlarge' onClick={menuHandler.open}>
+              <IoApps />
+            </IconButton>
+          )}
+        </CuesheetOverview>
+        <CuesheetProgress />
+        <CuesheetTableWrapper
+          source={source}
+          selectedRundownId={selectedRundownId}
+          loadedRundownId={loadedRundownId}
+          setSelectedRundownId={setSelectedRundownId}
+          projectRundowns={projectRundowns}
+        />
+      </div>
+    </EntryActionsProvider>
   );
 }

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

@@ -1,20 +1,39 @@
+import { MaybeString, ProjectRundown } from 'ontime-types';
 import { memo, use, useMemo } from 'react';
 
+import Select from '../../common/components/select/Select';
 import EmptyPage from '../../common/components/state/EmptyPage';
 import { PresetContext } from '../../common/context/PresetContext';
-import { useRundownSelectionContext } from '../../common/context/RundownSelectionContext';
 import useCustomFields from '../../common/hooks-query/useCustomFields';
+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;
+  projectRundowns: ProjectRundown[];
+}
 
 export default memo(CuesheetTableWrapper);
-function CuesheetTableWrapper() {
+function CuesheetTableWrapper({
+  source,
+  selectedRundownId,
+  setSelectedRundownId,
+  loadedRundownId,
+  projectRundowns,
+}: CuesheetTableWrapperProps) {
   const preset = use(PresetContext);
-  const { isLoadedRundown } = useRundownSelectionContext();
-
-  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isLoadedRundown });
+  const isCurrentRundown = source.rundownId !== null && source.rundownId === loadedRundownId;
+  const { cuesheetMode, setCuesheetMode } = useApplyCuesheetPolicy(preset, { canRunMode: isCurrentRundown });
   const { data: customFields, status: customFieldStatus } = useCustomFields();
 
   const columns = useMemo(
@@ -31,11 +50,66 @@ function CuesheetTableWrapper() {
       ) : (
         <CuesheetTable
           columns={columns}
+          source={source}
           cuesheetMode={cuesheetMode}
           tableRoot='cuesheet'
           setCuesheetMode={setCuesheetMode}
+          isCurrentRundown={isCurrentRundown}
+          insertElement={
+            <>
+              <RundownSelect
+                cuesheetMode={cuesheetMode}
+                selectedRundownId={selectedRundownId}
+                loadedRundownId={loadedRundownId}
+                setSelectedRundownId={setSelectedRundownId}
+                projectRundowns={projectRundowns}
+              />
+            </>
+          }
         />
       )}
     </CuesheetDnd>
   );
 }
+
+interface RundownSelectProps {
+  cuesheetMode: AppMode;
+  selectedRundownId: MaybeString;
+  loadedRundownId: string;
+  setSelectedRundownId: (rundownId: string) => void;
+  projectRundowns: ProjectRundown[];
+}
+
+function RundownSelect({
+  cuesheetMode,
+  projectRundowns,
+  loadedRundownId,
+  selectedRundownId,
+  setSelectedRundownId,
+}: RundownSelectProps) {
+  'use memo';
+  const options = projectRundowns.map(({ id, title }) => ({
+    value: id,
+    label: loadedRundownId === id ? `${title} (loaded)` : title,
+  }));
+  options.unshift({
+    value: FOLLOW_LOADED_RUNDOWN_ID,
+    label: 'Follow loaded', // TODO: Better wording and maybe icon? and translation
+  });
+
+  return (
+    <div className={styles.rundownSelect}>
+      <Select
+        value={selectedRundownId ?? undefined}
+        options={options}
+        onValueChange={(value) => {
+          if (value) {
+            setSelectedRundownId(value);
+          }
+        }}
+        disabled={cuesheetMode === AppMode.Run}
+        fluid
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,21 @@
+import {
+  FOLLOW_LOADED_RUNDOWN_ID,
+  getCuesheetRundownStorageKey,
+  resolveSelectedRundownId,
+} from '../useCuesheetRundownSelection';
+
+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',
+    );
+  });
+
+  it('falls back to the follow loaded rundown when the stored selection is missing', () => {
+    expect(resolveSelectedRundownId('missing', new Set(['loaded', 'other']))).toBe(FOLLOW_LOADED_RUNDOWN_ID);
+  });
+
+  it('keeps the stored selection when it still exists in the current project', () => {
+    expect(resolveSelectedRundownId('other', new Set(['loaded', 'other']))).toBe('other');
+  });
+});

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 { useContextRundownEditModal } from '../../../common/hooks-query/useContextRundown';
 import CuesheetEntryEditor from '../../../features/rundown/entry-editor/CuesheetEventEditor';
 import { useEditModal } from './useEditModal';
 
+interface EntryEditModalProps {
+  rundown: Rundown;
+}
+
 export default memo(EntryEditModal);
-function EntryEditModal() {
-  const { rundown } = useContextRundownEditModal();
+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

@@ -1,7 +1,7 @@
 import { useTableNav } from '@table-nav/react';
 import { ColumnDef, Table, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { OntimeEntry, SupportedEntry, TimeField, isOntimeDelay, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
-import { ComponentProps, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { ComponentProps, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   ContextProp,
   ItemProps,
@@ -14,7 +14,7 @@ import {
 import EmptyPage from '../../../common/components/state/EmptyPage';
 import EmptyTableBody from '../../../common/components/state/EmptyTableBody';
 import { useEntryActionsContext } from '../../../common/context/EntryActionsContext';
-import { useContextRundownTable } from '../../../common/hooks-query/useContextRundown';
+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';
@@ -35,22 +35,34 @@ import style from './CuesheetTable.module.scss';
 type CuesheetTableBaseProps = {
   columns: ColumnDef<ExtendedEntry>[];
   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;
 
-export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCuesheetMode }: CuesheetTableProps) {
-  const { flatRundown, status, loadedEventId } = useContextRundownTable();
+export default function CuesheetTable({
+  columns,
+  cuesheetMode,
+  source,
+  tableRoot,
+  setCuesheetMode,
+  isCurrentRundown,
+  insertElement,
+}: CuesheetTableProps) {
+  const { flatRundown, status, selectedEventId } = source;
   const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
   const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;
 
@@ -131,17 +143,17 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
 
   // in Run mode, follow the current event
   useEffect(() => {
-    if (virtuosoRef.current === null || cuesheetMode !== AppMode.Run || !loadedEventId) {
+    if (virtuosoRef.current === null || cuesheetMode !== AppMode.Run || !selectedEventId) {
       return;
     }
 
-    const eventIndex = flatRundown.findIndex((event) => event.id === loadedEventId);
+    const eventIndex = flatRundown.findIndex((event) => event.id === selectedEventId);
     if (eventIndex === -1) {
       return;
     }
 
     virtuosoRef.current.scrollToIndex({ index: eventIndex, behavior: 'auto', align: 'start', offset: -50 });
-  }, [cuesheetMode, flatRundown, loadedEventId]);
+  }, [cuesheetMode, flatRundown, selectedEventId]);
 
   // Provide an imperative scroll handler for explicit jumps (finder/keyboard)
   useEffect(() => {
@@ -230,9 +242,17 @@ export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCue
         handleResetResizing={resetColumnResizing}
         handleResetReordering={resetColumnOrder}
         handleClearToggles={setAllVisible}
-        appMode={cuesheetMode}
-        tableRoot={tableRoot}
-        setCuesheetMode={setCuesheetMode}
+        insertElement={insertElement}
+        modeControls={
+          tableRoot === 'cuesheet'
+            ? {
+                cuesheetMode,
+                setCuesheetMode,
+                isCurrentRundown,
+              }
+            : undefined
+        }
+        showShare={tableRoot === 'cuesheet'}
       />
       <TableVirtuoso
         ref={virtuosoRef}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx

@@ -1,7 +1,8 @@
-import { memo } from 'react';
+import { memo, useState } from 'react';
 
 import Button from '../../../../common/components/buttons/Button';
 import Input from '../../../../common/components/input/input/Input';
+import { getRememberedAspectRatio, rememberAspectRatio } from '../../../../common/utils/imageDimensions';
 
 import style from './EditableImage.module.scss';
 
@@ -14,6 +15,14 @@ interface EditableImageProps {
 export default memo(EditableImage);
 
 function EditableImage({ initialValue, readOnly, updateValue }: EditableImageProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  /**
+   * The cuesheet is virtualised: rows are unmounted once they leave the viewport.
+   * When the row comes back, we reserve the space the image took
+   * so that the table does not shift while the browser makes it available.
+   */
+  const knownAspectRatio = getRememberedAspectRatio(initialValue);
+
   const handleUpdate = (newValue: string) => {
     if (newValue === initialValue) {
       return;
@@ -62,7 +71,17 @@ function EditableImage({ initialValue, readOnly, updateValue }: EditableImagePro
           </Button>
         </div>
       )}
-      {Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />}
+      <img
+        src={initialValue}
+        alt=''
+        className={style.image}
+        onLoad={(event) => {
+          rememberAspectRatio(initialValue, event.currentTarget);
+          setIsLoaded(true);
+        }}
+        /** until the image is available, we reserve the space it took the last time we saw it */
+        style={!isLoaded && knownAspectRatio !== null ? { aspectRatio: knownAspectRatio, width: '100%' } : undefined}
+      />
     </div>
   );
 }

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableHeaderToolbar.tsx

@@ -10,9 +10,7 @@ import Button from '../../../../common/components/buttons/Button';
 import Checkbox from '../../../../common/components/checkbox/Checkbox';
 import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
 import PopoverContents from '../../../../common/components/popover/Popover';
-import { useRundownSelectionContext } from '../../../../common/context/RundownSelectionContext';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
-import { RundownSelect } from '../../../../features/rundown/common/RundownSelect';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetPermissions } from '../../useTablePermissions';
 import CuesheetShareModal from './CuesheetShareModal';
@@ -32,15 +30,21 @@ type TableHeaderOptionValues = Pick<
   'hideTableSeconds' | 'hideIndexColumn' | 'showDelayedTimes' | 'hideDelays'
 >;
 
+type TableModeControls = {
+  cuesheetMode: AppMode;
+  setCuesheetMode: (mode: AppMode) => void;
+  isCurrentRundown?: boolean;
+};
+
 interface CuesheetTableHeaderToolbarProps {
   columns: Column<ExtendedEntry, unknown>[];
   optionsStore: TableHeaderOptionsStore;
   handleResetResizing: () => void;
   handleResetReordering: () => void;
   handleClearToggles: () => void;
-  setCuesheetMode?: (mode: AppMode) => void;
-  appMode: AppMode;
-  tableRoot: 'editor' | 'cuesheet';
+  insertElement?: ReactNode;
+  modeControls?: TableModeControls;
+  showShare?: boolean;
 }
 
 export default function CuesheetTableHeaderToolbar({
@@ -49,23 +53,23 @@ export default function CuesheetTableHeaderToolbar({
   handleResetResizing,
   handleResetReordering,
   handleClearToggles,
-  setCuesheetMode,
-  tableRoot,
-  appMode,
+  insertElement,
+  modeControls,
+  showShare = false,
 }: CuesheetTableHeaderToolbarProps) {
-  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode) && tableRoot === 'cuesheet';
-  const canShare = useCuesheetPermissions((state) => state.canShare) && tableRoot === 'cuesheet';
-  const showRundownSelect = tableRoot === 'cuesheet';
-  const { isLoadedRundown } = useRundownSelectionContext();
+  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode);
+  const canShare = useCuesheetPermissions((state) => state.canShare);
 
   const toggleCuesheetMode = (mode: AppMode[]) => {
     const newValue = mode.at(0);
-    if (!newValue || !setCuesheetMode) return;
-    setCuesheetMode(newValue);
+    if (!newValue || !modeControls) return;
+    modeControls.setCuesheetMode(newValue);
   };
 
+  const isBackground = !(modeControls?.isCurrentRundown ?? true);
+
   return (
-    <Toolbar.Root className={style.tableSettings} data-background-rundown={!isLoadedRundown}>
+    <Toolbar.Root className={style.tableSettings} data-background-rundown={isBackground}>
       <ViewSettings optionsStore={optionsStore} />
       <ColumnSettings
         columns={columns}
@@ -73,14 +77,14 @@ export default function CuesheetTableHeaderToolbar({
         handleResetReordering={handleResetReordering}
         handleClearToggles={handleClearToggles}
       />
-      <div className={style.apart}>
-        {showRundownSelect && <RundownSelect appMode={appMode} />}
-        {canChangeMode && (
+      {modeControls && canChangeMode && (
+        <div className={style.apart}>
+          {insertElement}
           <ToggleGroup
-            value={[appMode]}
+            value={[modeControls.cuesheetMode]}
             onValueChange={toggleCuesheetMode}
             className={style.group}
-            disabled={!isLoadedRundown}
+            disabled={!modeControls.isCurrentRundown}
           >
             <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
               Run
@@ -89,10 +93,10 @@ export default function CuesheetTableHeaderToolbar({
               Edit
             </Toolbar.Button>
           </ToggleGroup>
-        )}
-      </div>
+        </div>
+      )}
 
-      {canShare && (
+      {showShare && canShare && (
         <>
           <Editor.Separator orientation='vertical' />
           <CuesheetShareModal />

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

@@ -0,0 +1,65 @@
+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';
+
+export const FOLLOW_LOADED_RUNDOWN_ID = '__follow-loaded__' as const;
+
+export function getCuesheetRundownStorageKey(server: string, projectFilename: string) {
+  return `cuesheet-selected-rundown:${server}:${projectFilename}`;
+}
+
+export function resolveSelectedRundownId(storedSelectedRundownId: string | null, availableRundownIds: Set<string>) {
+  if (storedSelectedRundownId && availableRundownIds.has(storedSelectedRundownId)) return storedSelectedRundownId;
+  return FOLLOW_LOADED_RUNDOWN_ID;
+}
+
+export function useCuesheetRundownSelection() {
+  'use memo';
+
+  const { data: projectRundowns } = useProjectRundowns();
+  const {
+    data: { lastLoadedProject },
+  } = useOrderedProjectList();
+  const storageKey = useMemo(() => getCuesheetRundownStorageKey(serverURL, lastLoadedProject), [lastLoadedProject]);
+  const [storedSelectedRundownId, setStoredSelectedRundownId] = useSessionStorage<string | null>({
+    key: storageKey,
+    defaultValue: FOLLOW_LOADED_RUNDOWN_ID,
+  });
+
+  const availableRundownIds = new Set(projectRundowns.rundowns.map(({ id }) => id)).add(FOLLOW_LOADED_RUNDOWN_ID);
+  const { loaded: loadedRundownId } = projectRundowns;
+
+  const selectedRundownId = resolveSelectedRundownId(storedSelectedRundownId, availableRundownIds);
+
+  return {
+    loadedRundownId,
+    selectedRundownId,
+    projectRundowns: projectRundowns.rundowns,
+    setSelectedRundownId: (rundownId: string) => {
+      startTransition(() => {
+        setStoredSelectedRundownId(rundownId);
+      });
+    },
+  };
+}
+
+export function useDirectLinkToBackgroundEdit() {
+  const {
+    data: { lastLoadedProject },
+  } = useOrderedProjectList();
+  const navigate = useNavigate();
+  const storageKey = getCuesheetRundownStorageKey(serverURL, lastLoadedProject);
+  const [_, setStoredSelectedRundownId] = useSessionStorage<string | null>({ key: storageKey, defaultValue: null });
+
+  return useCallback(
+    async (rundownId: string) => {
+      await navigate('/cuesheet');
+      startTransition(() => setStoredSelectedRundownId(rundownId));
+    },
+    [setStoredSelectedRundownId, navigate],
+  );
+}

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

@@ -1,6 +1,5 @@
 import { lazy } from 'react';
 
-import { RundownSelectionContextProvider } from '../../common/context/RundownSelectionContext';
 import TrackingPlaybackBar from '../../features/control/playback/tracking-playback-bar/TrackingPlaybackBar';
 import { AppMode } from '../../ontimeConfig';
 import TitleList from './title-list/TitleList';
@@ -15,51 +14,44 @@ const MessageControl = lazy(() => import('../../features/control/message/Message
 export default function Editor() {
   const { layoutMode } = useEditorLayout();
 
-  switch (layoutMode) {
-    case EditorLayoutMode.TRACKING: {
-      return (
-        <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
-          <div className={styles.rundownLayout}>
-            <div className={styles.titlesPanel}>
-              <RundownSelectionContextProvider>
-                <TitleList mode={AppMode.Run} />
-              </RundownSelectionContextProvider>
-            </div>
-            <div className={styles.rundownPanel}>
-              <Rundown />
-            </div>
-          </div>
-          <TrackingPlaybackBar />
+  if (layoutMode === EditorLayoutMode.CONTROL) {
+    return (
+      <div id='panels' className={styles.panelContainer}>
+        <div className={styles.left}>
+          <TimerControl />
+          <MessageControl />
         </div>
-      );
-    }
-    case EditorLayoutMode.PLANNING: {
-      return (
-        <div id='panels' className={styles.panelContainer}>
-          <div className={styles.rundownLayout}>
-            <div className={styles.titlesPanel}>
-              <RundownSelectionContextProvider>
-                <TitleList mode={AppMode.Edit} />
-              </RundownSelectionContextProvider>
-            </div>
-            <div className={styles.rundownPanel}>
-              <Rundown />
-            </div>
+        <Rundown />
+      </div>
+    );
+  }
+
+  if (layoutMode === EditorLayoutMode.TRACKING) {
+    return (
+      <div id='panels' className={`${styles.panelContainer} ${styles.panelContainerTracking}`}>
+        <div className={styles.rundownLayout}>
+          <div className={styles.titlesPanel}>
+            <TitleList mode={AppMode.Run} />
+          </div>
+          <div className={styles.rundownPanel}>
+            <Rundown />
           </div>
         </div>
-      );
-    }
-    case EditorLayoutMode.CONTROL:
-    default: {
-      return (
-        <div id='panels' className={styles.panelContainer}>
-          <div className={styles.left}>
-            <TimerControl />
-            <MessageControl />
-          </div>
+        <TrackingPlaybackBar />
+      </div>
+    );
+  }
+
+  return (
+    <div id='panels' className={styles.panelContainer}>
+      <div className={styles.rundownLayout}>
+        <div className={styles.titlesPanel}>
+          <TitleList mode={AppMode.Edit} />
+        </div>
+        <div className={styles.rundownPanel}>
           <Rundown />
         </div>
-      );
-    }
-  }
+      </div>
+    </div>
+  );
 }

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

@@ -1,7 +1,7 @@
 import { EntryId, MaybeString, SupportedEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 
-import { useContextRundownFinder } from '../../../common/hooks-query/useContextRundown';
+import { useFlatRundown } from '../../../common/hooks-query/useRundown';
 import { useSelectAndRevealEntry } from '../../../features/rundown/useSelectAndRevealEntry';
 
 const maxResults = 12;
@@ -38,7 +38,7 @@ type FilterableMilestone = {
 type FilterableEntry = FilterableGroup | FilterableEvent | FilterableMilestone;
 
 export default function useFinder() {
-  const { rundown: data, rundownId } = useContextRundownFinder();
+  const { data, rundownId } = useFlatRundown();
   const [results, setResults] = useState<FilterableEntry[]>([]);
   const [error, setError] = useState<MaybeString>(null);
   const lastSearchString = useRef('');

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

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import ScrollArea from '../../../common/components/scroll-area/ScrollArea';
-import { useContextRundownList } from '../../../common/hooks-query/useContextRundown';
+import useRundown from '../../../common/hooks-query/useRundown';
 import { useSelectedEventId } from '../../../common/hooks/useSocket';
 import { ExtendedEntry, getFlatRundownMetadata } from '../../../common/utils/rundownMetadata';
 import { useEventSelection } from '../../../features/rundown/useEventSelection';
@@ -20,7 +20,7 @@ interface TitleListProps {
 }
 
 export default function TitleList({ mode }: TitleListProps) {
-  const { rundown } = useContextRundownList();
+  const { data: rundown } = useRundown();
   const selectedEventId = useSelectedEventId();
   const cursor = useEventSelection((state) => state.cursor);
 

apps/client/src/views/editor/useEditorLayout.ts

@@ -1,9 +1,6 @@
 import { isValueOfEnum } from 'ontime-utils';
-import { useCallback, useEffect } from 'react';
 import { useSearchParams } from 'react-router';
 
-import { setSelectRundownInParams } from '../../common/context/RundownSelectionContext';
-
 const layoutParam = 'layout';
 
 export enum EditorLayoutMode {
@@ -23,29 +20,14 @@ function getEditorLayout(value: string | null): EditorLayoutMode {
 }
 
 export function useEditorLayout() {
-  'use memo';
-
   const [searchParams, setSearchParams] = useSearchParams();
   const layoutMode = getEditorLayout(searchParams.get(layoutParam));
 
-  useEffect(() => {
-    setSearchParams((searchParams) => {
-      if (layoutMode !== EditorLayoutMode.PLANNING) setSelectRundownInParams(null, searchParams);
-      return searchParams;
-    });
-  }, [setSearchParams, layoutMode]);
-
-  const setLayoutMode = useCallback(
-    (mode: EditorLayoutMode) => {
-      setSearchParams((searchParams) => {
-        searchParams.set(layoutParam, mode);
-        // Only the Planning layout is allowed to look at something other than the current rundown
-        if (mode !== EditorLayoutMode.PLANNING) setSelectRundownInParams(null, searchParams);
-        return searchParams;
-      });
-    },
-    [setSearchParams],
-  );
+  const setLayoutMode = (mode: EditorLayoutMode) => {
+    const nextParams = new URLSearchParams(searchParams);
+    nextParams.set(layoutParam, mode);
+    setSearchParams(nextParams, { replace: true });
+  };
 
   return { layoutMode, setLayoutMode };
 }

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

@@ -16,7 +16,7 @@ export interface TimelineData {
 
 export function useTimelineData(): ViewData<TimelineData> {
   // HTTP API data
-  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata(null);
+  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/useTimerData.ts

@@ -2,7 +2,7 @@ import { CustomFields, ProjectData, RundownEntries, Settings, ViewSettings } fro
 
 import useCustomFields from '../../common/hooks-query/useCustomFields';
 import useProjectData from '../../common/hooks-query/useProjectData';
-import { useRundown } from '../../common/hooks-query/useRundown';
+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 } = useRundown(null);
+  const { data: rundown, status: rundownStatus } = useRundown();
   const { entries } = rundown;
 
   return {

apps/server/src/services/project-service/ProjectService.ts

@@ -1,10 +1,9 @@
 import { copyFile } from 'fs/promises';
 import { join } from 'path';
 
-import { DatabaseModel, LogOrigin, ProjectFileListResponse, RefetchKey } from 'ontime-types';
+import { DatabaseModel, LogOrigin, ProjectFileListResponse } from 'ontime-types';
 import { getErrorMessage, getFirstRundown } from 'ontime-utils';
 
-import { sendRefetch } from '../../adapters/WebsocketAdapter.js';
 import { parseCustomFields } from '../../api-data/custom-fields/customFields.parser.js';
 import { parseDatabaseModel } from '../../api-data/db/db.parser.js';
 import { getCurrentRundown } from '../../api-data/rundown/rundown.dao.js';
@@ -106,9 +105,6 @@ async function loadProject(projectData: DatabaseModel, fileName: string, rundown
     currentProjectName: fileName,
   };
 
-  setImmediate(() => {
-    sendRefetch(RefetchKey.ProjectFiles);
-  });
   return fileName;
 }
 
@@ -267,10 +263,6 @@ export async function duplicateProjectFile(originalFile: string, newFilename: st
 
   const pathToDuplicate = getPathToProject(newFilename);
   await copyFile(projectFilePath, pathToDuplicate);
-
-  setImmediate(() => {
-    sendRefetch(RefetchKey.ProjectFiles);
-  });
   return;
 }
 
@@ -301,10 +293,6 @@ export async function renameProjectFile(originalFile: string, newFilename: strin
     const newFileName = await loadProject(projectData.data, newFilename);
     return newFileName;
   }
-
-  setImmediate(() => {
-    sendRefetch(RefetchKey.ProjectFiles);
-  });
   return newFilename;
 }
 
@@ -344,9 +332,6 @@ export async function deleteProjectFile(filename: string) {
   }
 
   await deleteFile(projectFilePath);
-  setImmediate(() => {
-    sendRefetch(RefetchKey.ProjectFiles);
-  });
 }
 
 /**
@@ -389,7 +374,6 @@ export async function patchCurrentProject(data: Partial<DatabaseModel>) {
     }
   }
 
-  const updatedData = getDataProvider().getData();
-
+  const updatedData = await getDataProvider().getData();
   return updatedData;
 }

packages/types/src/api/websocket/refetch.type.ts

@@ -1,7 +1,6 @@
 export enum RefetchKey {
   All = 'all',
   CustomFields = 'custom-fields',
-  ProjectFiles = 'project-files',
   ProjectData = 'project-data',
   ProjectRundowns = 'project-rundowns',
   Report = 'report',