refactor: react state for cuesheet v editor layout

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

@@ -59,7 +59,6 @@ export function useRundownWithMetadata(rundownId: Maybe<string>) {
 /**
  * Provides access to a flat rundown
  * built from the order and rundown fields
- * @deprecated
  */
 export function useFlatRundown(rundownId: Maybe<string>) {
   const { data, status } = useRundown(rundownId);
@@ -90,7 +89,6 @@ export function useFlatRundownWithMetadata(rundownId: Maybe<string>) {
  * Callers MUST memoize the callback with useCallback to prevent
  * re-filtering on every render.
  *
- * @deprecated
  */
 export function usePartialRundown(rundownId: Maybe<string>, cb: (event: ExtendedEntry<OntimeEntry>) => boolean) {
   const { data, status } = useFlatRundownWithMetadata(rundownId);
@@ -112,10 +110,6 @@ export function useEntry(rundownId: Maybe<string>, entryId: EntryId | null): Ont
   return rundown.entries[entryId] ?? null;
 }
 
-/**
- *
- * @deprecated
- */
 export function useRundownAuxData(rundownId: Maybe<string>) {
   const { data, status } = useRundown(rundownId);
   const filteredData = useMemo(() => {

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(currentGroupId) as OntimeGroup | null;
+  const group = useEntry(null, 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(id) as OntimeEvent | null;
+  const entry = useEntry(null, 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();
+  const { data: rundownData } = useRundownAuxData(null);
 
   if (!projectData.title && !rundownData.title) {
     return null;

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();
+  const { data: rundownData, status: rundownStatus } = useFlatRundown(null);
   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(filterCallback);
+  const { data: events } = usePartialRundown(null, 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();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata(null);
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();

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

@@ -34,7 +34,6 @@ function CuesheetTableWrapper() {
           cuesheetMode={cuesheetMode}
           tableRoot='cuesheet'
           setCuesheetMode={setCuesheetMode}
-          isCurrentRundown={isLoadedRundown}
         />
       )}
     </CuesheetDnd>

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, ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { ComponentProps, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
   ContextProp,
   ItemProps,
@@ -40,25 +40,17 @@ type CuesheetTableBaseProps = {
 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({
+export default function CuesheetTable({ columns, cuesheetMode, tableRoot, setCuesheetMode }: CuesheetTableProps) {
-  columns,
+  const { flatRundown, status, loadedEventId } = useContextRundownTable();
-  cuesheetMode,
-  tableRoot,
-  setCuesheetMode,
-  isCurrentRundown,
-}: CuesheetTableProps) {
-  const { flatRundown, status, selectedEventId } = source;
   const { updateEntry, updateTimer, addEntry } = useEntryActionsContext();
   const canCreateEntries = useCuesheetPermissions((state) => state.canCreateEntries) && cuesheetMode === AppMode.Edit;
 
@@ -238,16 +230,9 @@ export default function CuesheetTable({
         handleResetResizing={resetColumnResizing}
         handleResetReordering={resetColumnOrder}
         handleClearToggles={setAllVisible}
-        modeControls={
+        appMode={cuesheetMode}
-          tableRoot === 'cuesheet'
+        tableRoot={tableRoot}
-            ? {
+        setCuesheetMode={setCuesheetMode}
-                cuesheetMode,
-                setCuesheetMode,
-                isCurrentRundown,
-              }
-            : undefined
-        }
-        showShare={tableRoot === 'cuesheet'}
       />
       <TableVirtuoso
         ref={virtuosoRef}

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

@@ -10,6 +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 { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetPermissions } from '../../useTablePermissions';
@@ -31,20 +32,15 @@ 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;
-  modeControls?: TableModeControls;
+  setCuesheetMode?: (mode: AppMode) => void;
-  showShare?: boolean;
+  appMode: AppMode;
+  tableRoot: 'editor' | 'cuesheet';
 }
 
 export default function CuesheetTableHeaderToolbar({
@@ -53,22 +49,22 @@ export default function CuesheetTableHeaderToolbar({
   handleResetResizing,
   handleResetReordering,
   handleClearToggles,
-  modeControls,
+  setCuesheetMode,
-  showShare = false,
+  tableRoot,
+  appMode,
 }: CuesheetTableHeaderToolbarProps) {
-  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode);
+  const canChangeMode = useCuesheetPermissions((state) => state.canChangeMode) && tableRoot === 'cuesheet';
-  const canShare = useCuesheetPermissions((state) => state.canShare);
+  const canShare = useCuesheetPermissions((state) => state.canShare) && tableRoot === 'cuesheet';
+  const { isLoadedRundown } = useRundownSelectionContext();
 
   const toggleCuesheetMode = (mode: AppMode[]) => {
     const newValue = mode.at(0);
-    if (!newValue || !modeControls) return;
+    if (!newValue || !setCuesheetMode) return;
-    modeControls.setCuesheetMode(newValue);
+    setCuesheetMode(newValue);
   };
 
-  const isBackground = !(modeControls?.isCurrentRundown ?? true);
-
   return (
-    <Toolbar.Root className={style.tableSettings} data-background-rundown={isBackground}>
+    <Toolbar.Root className={style.tableSettings} data-background-rundown={!isLoadedRundown}>
       <ViewSettings optionsStore={optionsStore} />
       <ColumnSettings
         columns={columns}
@@ -76,15 +72,14 @@ export default function CuesheetTableHeaderToolbar({
         handleResetReordering={handleResetReordering}
         handleClearToggles={handleClearToggles}
       />
-      {modeControls && canChangeMode && (
+      <div className={style.apart}>
-        <div className={style.apart}>
+        <RundownSelect appMode={appMode} />
-          {/* {insertElement} */}
+        {canChangeMode && (
-          <RundownSelect cuesheetMode={modeControls.cuesheetMode} />
           <ToggleGroup
-            value={[modeControls.cuesheetMode]}
+            value={[appMode]}
             onValueChange={toggleCuesheetMode}
             className={style.group}
-            disabled={!modeControls.isCurrentRundown}
+            disabled={!isLoadedRundown}
           >
             <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
               Run
@@ -93,10 +88,10 @@ export default function CuesheetTableHeaderToolbar({
               Edit
             </Toolbar.Button>
           </ToggleGroup>
-        </div>
+        )}
-      )}
+      </div>
 
-      {showShare && canShare && (
+      {canShare && (
         <>
           <Editor.Separator orientation='vertical' />
           <CuesheetShareModal />

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

@@ -7,10 +7,10 @@ import styles from './RundownSelect.module.scss';
 const FOLLOW = '___null___';
 
 interface RundownSelectProps {
-  cuesheetMode: AppMode;
+  appMode: AppMode;
 }
 
-export function RundownSelect({ cuesheetMode }: RundownSelectProps) {
+export function RundownSelect({ appMode }: RundownSelectProps) {
   'use memo';
   const { selectRundownId, rundowns, loadedRundownId, selectedRundownId } = useRundownSelectionContext();
 
@@ -34,7 +34,7 @@ export function RundownSelect({ cuesheetMode }: RundownSelectProps) {
           if (value === FOLLOW) selectRundownId(null);
           else selectRundownId(value);
         }}
-        disabled={cuesheetMode === AppMode.Run}
+        disabled={appMode === AppMode.Run}
         fluid
       />
     </div>

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();
+  const { data: rundownData, status: rundownStatus } = useFlatRundownWithMetadata(null);
   const { data: projectData, status: projectDataStatus } = useProjectData();
   const { data: settings, status: settingsStatus } = useSettings();
   const { data: customFields, status: customFieldsStatus } = useCustomFields();