refactor: allow secondary rundowns (#2086)

* refactor: allow secondary rundowns

* ui: move dropdown

* feat: follow loaded

* ui: background edit warning

ui: fix disable radio button

* feat(ui): add loaded sufix in the rundown list

* feat(ui): add direct link to background edit from rundown manager

* fix: better fallback

* fix: default to is isCurrentRundown for nav bar colour

* chore: rename navigate to cuesheet

---------

Co-authored-by: alex-arc <ac@omnivox.dk>

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

@@ -9,6 +9,7 @@ import {
   IoPencilOutline,
   IoTrash,
 } from 'react-icons/io5';
+import { TbGhost3 } from 'react-icons/tb';
 
 import { downloadAsExcel } from '../../../../common/api/excel';
 import { maybeAxiosError } from '../../../../common/api/utils';
@@ -19,6 +20,7 @@ import { DropdownMenu } from '../../../../common/components/dropdown-menu/Dropdo
 import Tag from '../../../../common/components/tag/Tag';
 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';
@@ -97,6 +99,8 @@ export default function ManageRundowns() {
     await downloadAsExcel(rundownId, title);
   };
 
+  const navigateToCuesheet = useDirectLinkToBackgroundEdit();
+
   return (
     <>
       <Panel.Section>
@@ -180,6 +184,12 @@ export default function ManageRundowns() {
                               label: 'Duplicate',
                               onClick: () => submitRundownDuplicate(id),
                             },
+                            {
+                              type: 'item',
+                              icon: TbGhost3,
+                              label: 'Edit in cuesheet',
+                              onClick: () => navigateToCuesheet(id),
+                            },
                             { type: 'divider' },
                             {
                               type: 'destructive',

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

@@ -6,6 +6,7 @@ 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';
@@ -104,6 +105,8 @@ interface RundownRootProps {
 }
 
 function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
+  const source = useLoadedRundownSource();
+
   return (
     <div className={style.rundownRoot}>
       {isSmallDevice ? (
@@ -112,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/entry-editor/CuesheetEventEditor.tsx

@@ -1,7 +1,6 @@
-import { OntimeEntry, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
+import { OntimeEntry, Rundown, isOntimeEvent, isOntimeGroup, isOntimeMilestone } from 'ontime-types';
 import { useMemo } from 'react';
 
-import useRundown from '../../../common/hooks-query/useRundown';
 import EventEditor from './EventEditor';
 import GroupEditor from './GroupEditor';
 import MilestoneEditor from './MilestoneEditor';
@@ -10,19 +9,18 @@ import style from './EntryEditor.module.scss';
 
 interface CuesheetEntryEditorProps {
   entryId: string;
+  rundown: Rundown;
 }
 
-export default function CuesheetEntryEditor({ entryId }: CuesheetEntryEditorProps) {
-  const { data } = useRundown();
-
+export default function CuesheetEntryEditor({ entryId, rundown }: CuesheetEntryEditorProps) {
   const entry = useMemo<OntimeEntry | null>(() => {
-    if (data.order.length === 0) {
+    if (rundown.order.length === 0) {
       return null;
     }
 
-    const event = data.entries[entryId];
+    const event = rundown.entries[entryId];
     return event ?? null;
-  }, [entryId, data.order, data.entries]);
+  }, [entryId, rundown.entries, rundown.order.length]);
 
   if (isOntimeEvent(entry)) {
     return (

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

@@ -1,39 +0,0 @@
-import { Toolbar } from '@base-ui/react/toolbar';
-import type { Column } from '@tanstack/react-table';
-
-import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
-import {
-  ColumnSettings,
-  ViewSettings,
-} from '../../../views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings';
-import { usePersistedRundownOptions } from '../rundown.options';
-
-import style from '../../../views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.module.scss';
-
-interface EditorTableSettingsProps {
-  columns: Column<ExtendedEntry, unknown>[];
-  handleResetResizing: () => void;
-  handleResetReordering: () => void;
-  handleClearToggles: () => void;
-}
-
-export default function EditorTableSettings({
-  columns,
-  handleResetResizing,
-  handleResetReordering,
-  handleClearToggles,
-}: EditorTableSettingsProps) {
-  const options = usePersistedRundownOptions();
-
-  return (
-    <Toolbar.Root className={style.tableSettings}>
-      <ViewSettings optionsStore={options} />
-      <ColumnSettings
-        columns={columns}
-        handleResetResizing={handleResetResizing}
-        handleResetReordering={handleResetReordering}
-        handleClearToggles={handleClearToggles}
-      />
-    </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/features/rundown/useEventSelection.ts

@@ -2,7 +2,7 @@ import { EntryId, MaybeNumber, ProjectRundownsList, Rundown, isOntimeEvent } fro
 import { MouseEvent } from 'react';
 import { create } from 'zustand';
 
-import { CURRENT_RUNDOWN_QUERY_KEY, PROJECT_RUNDOWNS, getRundownQueryKey } from '../../common/api/constants';
+import { PROJECT_RUNDOWNS, getRundownQueryKey } from '../../common/api/constants';
 import { ontimeQueryClient } from '../../common/queryClient';
 import { isMacOS } from '../../common/utils/deviceUtils';
 
@@ -137,12 +137,9 @@ export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
 }));
 
 function getLoadedRundownData() {
-  const loadedRundownId = ontimeQueryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
-  if (loadedRundownId) {
-    return ontimeQueryClient.getQueryData<Rundown>(getRundownQueryKey(loadedRundownId));
-  }
-
-  return ontimeQueryClient.getQueryData<Rundown>(CURRENT_RUNDOWN_QUERY_KEY);
+  const rundownId = ontimeQueryClient.getQueryData<ProjectRundownsList>(PROJECT_RUNDOWNS)?.loaded;
+  if (!rundownId) return undefined;
+  return ontimeQueryClient.getQueryData<Rundown>(getRundownQueryKey(rundownId));
 }
 
 export function getSelectionMode(event: MouseEvent): SelectionMode {