feat: table mode in editor

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

@@ -57,6 +57,7 @@ interface RundownProps {
 }
 
 export default function Rundown({ data, rundownMetadata }: RundownProps) {
+  // invoke the compiler for the component
   'use memo';
 
   const { order, entries, id } = data;

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

@@ -14,7 +14,7 @@ import { AppMode, sessionKeys } from '../../ontimeConfig';
 import RundownEntryEditor from './entry-editor/RundownEntryEditor';
 import FinderPlacement from './placements/FinderPlacement';
 import { RundownContextMenu } from './rundown-context-menu/RundownContextMenu';
-import RundownWrapper from './RundownWrapper';
+import RundownWrapper, { RundownViewMode } from './RundownWrapper';
 
 import style from './RundownExport.module.scss';
 
@@ -26,6 +26,10 @@ function RundownExport() {
     key: sessionKeys.editorMode,
     defaultValue: AppMode.Edit,
   });
+  const [viewMode, setViewMode] = useSessionStorage<RundownViewMode>({
+    key: 'rundown-view-mode',
+    defaultValue: 'list',
+  });
   const isSmallDevice = useIsSmallDevice();
 
   if (isSmallDevice && isExtracted) {
@@ -41,7 +45,7 @@ function RundownExport() {
           <div className={style.rundown}>
             <ErrorBoundary>
               <RundownContextMenu>
-                <RundownWrapper isSmallDevice />
+                <RundownWrapper isSmallDevice viewMode={viewMode} setViewMode={setViewMode} />
               </RundownContextMenu>
             </ErrorBoundary>
           </div>
@@ -50,7 +54,7 @@ function RundownExport() {
     );
   }
 
-  const hideSideBar = isExtracted && editorMode === 'run';
+  const hideSideBar = (isExtracted && editorMode === 'run') || viewMode === 'table';
 
   return (
     <ProtectRoute permission='editor'>
@@ -62,7 +66,7 @@ function RundownExport() {
             <ErrorBoundary>
               {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
               <RundownContextMenu>
-                <RundownWrapper />
+                <RundownWrapper viewMode={viewMode} setViewMode={setViewMode} />
               </RundownContextMenu>
             </ErrorBoundary>
           </Editor.Panel>

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

@@ -1,27 +1,34 @@
 import Empty from '../../common/components/state/Empty';
 import { useRundownWithMetadata } from '../../common/hooks-query/useRundown';
+import EditorEditModal from '../../views/cuesheet/cuesheet-edit-modal/EditorEditModal';
 
 import RundownHeader from './rundown-header/RundownHeader';
 import RundownHeaderMobile from './rundown-header/RundownHeaderMobile';
+import RundownTable from './rundown-table/RundownTable';
 import Rundown from './Rundown';
 
 import styles from './Rundown.module.scss';
 
+export type RundownViewMode = 'list' | 'table';
+
 interface RundownWrapperProps {
   isSmallDevice?: boolean;
+  viewMode: RundownViewMode;
+  setViewMode: (mode: RundownViewMode) => void;
 }
 
-export default function RundownWrapper({ isSmallDevice }: RundownWrapperProps) {
+export default function RundownWrapper({ isSmallDevice, viewMode, setViewMode }: RundownWrapperProps) {
   const { data, status, rundownMetadata } = useRundownWithMetadata();
 
+  const isLoading = status !== 'success' || !data || !rundownMetadata;
+
   return (
     <div className={styles.rundownWrapper}>
-      {isSmallDevice ? <RundownHeaderMobile /> : <RundownHeader />}
-      {status === 'success' && data && rundownMetadata ? (
-        <Rundown data={data} rundownMetadata={rundownMetadata} />
-      ) : (
-        <Empty text='Connecting to server' />
-      )}
+      {isSmallDevice ? <RundownHeaderMobile /> : <RundownHeader viewMode={viewMode} setViewMode={setViewMode} />}
+      {isLoading && <Empty text='Connecting to server' />}
+      {!isLoading && viewMode === 'list' && <Rundown data={data} rundownMetadata={rundownMetadata} />}
+      {!isLoading && viewMode === 'table' && <RundownTable />}
+      <EditorEditModal />
     </div>
   );
 }

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

@@ -13,8 +13,15 @@ import RundownMenu from './RundownMenu';
 
 import style from './RundownHeader.module.scss';
 
+type RundownViewMode = 'list' | 'table';
+
+interface RundownHeaderProps {
+  viewMode: RundownViewMode;
+  setViewMode: (mode: RundownViewMode) => void;
+}
+
 export default memo(RundownHeader);
-function RundownHeader() {
+function RundownHeader({ viewMode, setViewMode }: RundownHeaderProps) {
   const [editorMode, setEditorMode] = useSessionStorage({ key: sessionKeys.editorMode, defaultValue: AppMode.Edit });
 
   const { offsetMode } = useOffsetMode();
@@ -33,6 +40,13 @@ function RundownHeader() {
     setOffsetMode(newValue);
   };
 
+  const toggleViewMode = (mode: RundownViewMode[]) => {
+    // we need to stop user from deselecting a mode
+    const newValue = mode.at(0);
+    if (!newValue) return;
+    setViewMode(newValue);
+  };
+
   return (
     <Toolbar.Root className={style.header}>
       <ToggleGroup value={[editorMode]} onValueChange={toggleAppMode} className={style.group}>
@@ -55,6 +69,17 @@ function RundownHeader() {
         </Toolbar.Button>
       </ToggleGroup>
 
+      <Editor.Separator className={style.separator} />
+
+      <ToggleGroup value={[viewMode]} onValueChange={toggleViewMode} className={style.group}>
+        <Toolbar.Button render={<Toggle />} value='list' className={style.radioButton}>
+          List
+        </Toolbar.Button>
+        <Toolbar.Button render={<Toggle />} value='table' className={style.radioButton}>
+          Table
+        </Toolbar.Button>
+      </ToggleGroup>
+
       <RundownMenu />
     </Toolbar.Root>
   );

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

@@ -0,0 +1,42 @@
+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}
+      />
+      {/* No mode toggle - already in RundownHeader */}
+      {/* No share modal - cuesheet only */}
+    </Toolbar.Root>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { memo, useMemo } from 'react';
+import { useSessionStorage } from '@mantine/hooks';
+
+import EmptyPage from '../../../common/components/state/EmptyPage';
+import useCustomFields from '../../../common/hooks-query/useCustomFields';
+import { AppMode, sessionKeys } from '../../../ontimeConfig';
+import CuesheetDnd from '../../../views/cuesheet/cuesheet-dnd/CuesheetDnd';
+import CuesheetTable from '../../../views/cuesheet/cuesheet-table/CuesheetTable';
+
+import { makeRundownColumns } from './makeRundownColumns';
+
+export default memo(RundownTable);
+function RundownTable() {
+  const { data: customFields, status: customFieldStatus } = useCustomFields();
+
+  const [editorMode] = useSessionStorage({
+    key: sessionKeys.editorMode,
+    defaultValue: AppMode.Edit,
+  });
+
+  const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);
+
+  const isLoading = !customFields || customFieldStatus === 'pending';
+
+  return (
+    <CuesheetDnd columns={columns} tableRoot='editor'>
+      {isLoading ? (
+        <EmptyPage text='Loading...' />
+      ) : (
+        <CuesheetTable columns={columns} cuesheetMode={editorMode} tableRoot='editor' />
+      )}
+    </CuesheetDnd>
+  );
+}

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

@@ -0,0 +1,16 @@
+import type { ColumnDef } from '@tanstack/react-table';
+import type { CustomFields } from 'ontime-types';
+
+import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
+import { AppMode } from '../../../ontimeConfig';
+import { makeCuesheetColumns } from '../../../views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory';
+
+/**
+ * Creates column definitions for the rundown table
+ * Reuses cuesheetColsFactory with preset=undefined for full access
+ */
+export function makeRundownColumns(customFields: CustomFields): ColumnDef<ExtendedEntry>[] {
+  // When preset=undefined, factory defaults to fullRead=true, fullWrite=true
+  // canWrite is determined by editorMode (AppMode.Edit vs AppMode.Run)
+  return makeCuesheetColumns(customFields, AppMode.Edit, undefined);
+}

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

@@ -0,0 +1,60 @@
+import { CustomFields } from 'ontime-types';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+type OptionValues = {
+  hideTableSeconds: boolean;
+  hideIndexColumn: boolean;
+  showDelayedTimes: boolean;
+  hideDelays: boolean;
+};
+
+const defaultOptions: OptionValues = {
+  hideTableSeconds: false,
+  hideIndexColumn: false,
+  showDelayedTimes: false,
+  hideDelays: false,
+};
+
+export type RundownOptionKeys = keyof OptionValues;
+
+export interface RundownOptions extends OptionValues {
+  setOption: <K extends RundownOptionKeys>(key: K, value: OptionValues[K]) => void;
+  toggleOption: (key: RundownOptionKeys) => void;
+  resetOptions: () => void;
+}
+
+export const usePersistedRundownOptions = create<RundownOptions>()(
+  persist(
+    (set) => {
+      return {
+        ...defaultOptions,
+        setOption: (key, value) => set((state) => ({ ...state, [key]: value })),
+        toggleOption: (key) => set((state) => ({ ...state, [key]: !state[key] })),
+        resetOptions: () => set(defaultOptions),
+      };
+    },
+    {
+      name: 'editor-options',
+    },
+  ),
+);
+
+export const rundownDefaultColumns = [
+  { value: 'flag', label: 'Flag' },
+  { value: 'cue', label: 'Cue' },
+  { value: 'title', label: 'Title' },
+  { value: 'timeStart', label: 'Time start' },
+  { value: 'timeEnd', label: 'Time end' },
+  { value: 'duration', label: 'Duration' },
+  { value: 'note', label: 'Note' },
+];
+
+export function makeRundownCustomColumns(customFields: CustomFields) {
+  return Object.entries(customFields).map(([key, field]) => {
+    return {
+      value: `custom-${key}`,
+      label: field.label,
+    };
+  });
+}

apps/client/src/views/cuesheet/cuesheet-dnd/CuesheetDnd.tsx

@@ -15,10 +15,15 @@ import { useColumnOrder } from '../cuesheet-table/useColumnManager';
 
 interface CuesheetDndProps {
   columns: ColumnDef<ExtendedEntry>[];
+  tableRoot?: 'editor' | 'cuesheet';
 }
 
-export default function CuesheetDnd({ columns, children }: PropsWithChildren<CuesheetDndProps>) {
-  const { columnOrder, saveColumnOrder } = useColumnOrder(columns);
+export default function CuesheetDnd({
+  columns,
+  tableRoot = 'cuesheet',
+  children,
+}: PropsWithChildren<CuesheetDndProps>) {
+  const { columnOrder, saveColumnOrder } = useColumnOrder(columns, tableRoot);
 
   const sensors = useSensors(
     useSensor(PointerSensor, {

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

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+
+import Modal from '../../../common/components/modal/Modal';
+import CuesheetEntryEditor from '../../../features/rundown/entry-editor/CuesheetEventEditor';
+
+import { useEditorEditModal } from './useEditorEditModal';
+
+export default memo(EditorEditModal);
+function EditorEditModal() {
+  const entryId = useEditorEditModal((state) => state.selectedEntryId);
+  const closeModal = useEditorEditModal((state) => state.clearSelection);
+
+  if (entryId === null) {
+    return null;
+  }
+
+  return (
+    <Modal
+      isOpen
+      onClose={closeModal}
+      title='Edit entry'
+      showCloseButton
+      bodyElements={<CuesheetEntryEditor entryId={entryId} />}
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { EntryId } from 'ontime-types';
+import { create } from 'zustand';
+
+interface SelectedEntryState {
+  selectedEntryId: EntryId | null;
+  setEditableEntry: (entryId: EntryId) => void;
+  clearSelection: () => void;
+}
+
+export const useEditorEditModal = create<SelectedEntryState>((set) => ({
+  selectedEntryId: null,
+  setEditableEntry: (entryId: EntryId) => set({ selectedEntryId: entryId }),
+  clearSelection: () => set({ selectedEntryId: null }),
+}));

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

@@ -10,6 +10,8 @@ import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { useSelectedEventId } from '../../../common/hooks/useSocket';
 import { useFlatRundownWithMetadata } from '../../../common/hooks-query/useRundown';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
+import { usePersistedRundownOptions } from '../../../features/rundown/rundown.options';
+import EditorTableSettings from '../../../features/rundown/rundown-table/EditorTableSettings';
 import { AppMode } from '../../../ontimeConfig';
 import { usePersistedCuesheetOptions } from '../cuesheet.options';
 
@@ -19,6 +21,7 @@ import EventRow from './cuesheet-table-elements/EventRow';
 import GroupRow from './cuesheet-table-elements/GroupRow';
 import MilestoneRow from './cuesheet-table-elements/MilestoneRow';
 import CuesheetTableMenu from './cuesheet-table-menu/CuesheetTableMenu';
+import EditorTableMenu from './cuesheet-table-menu/EditorTableMenu';
 import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
 import { useColumnOrder, useColumnSizes, useColumnVisibility } from './useColumnManager';
 
@@ -27,14 +30,17 @@ import style from './CuesheetTable.module.scss';
 interface CuesheetTableProps {
   columns: ColumnDef<ExtendedEntry>[];
   cuesheetMode: AppMode;
+  tableRoot?: 'editor' | 'cuesheet';
 }
 
-export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTableProps) {
+export default function CuesheetTable({ columns, cuesheetMode, tableRoot = 'cuesheet' }: CuesheetTableProps) {
   const { data, status } = useFlatRundownWithMetadata();
   const { updateEntry, updateTimer } = useEntryActions();
-  const showDelayedTimes = usePersistedCuesheetOptions((state) => state.showDelayedTimes);
-  const hideTableSeconds = usePersistedCuesheetOptions((state) => state.hideTableSeconds);
-  const hideIndexColumn = usePersistedCuesheetOptions((state) => state.hideIndexColumn);
+
+  const useOptions = tableRoot === 'editor' ? usePersistedRundownOptions : usePersistedCuesheetOptions;
+  const showDelayedTimes = useOptions((state) => state.showDelayedTimes);
+  const hideTableSeconds = useOptions((state) => state.hideTableSeconds);
+  const hideIndexColumn = useOptions((state) => state.hideIndexColumn);
 
   const { selectedEventId } = useSelectedEventId();
 
@@ -79,9 +85,9 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
     [cuesheetMode, data, hideIndexColumn, hideTableSeconds, showDelayedTimes, updateEntry, updateTimer],
   );
 
-  const { columnOrder, resetColumnOrder } = useColumnOrder(columns);
-  const { columnSizing, setColumnSizing } = useColumnSizes();
-  const { columnVisibility, setColumnVisibility } = useColumnVisibility();
+  const { columnOrder, resetColumnOrder } = useColumnOrder(columns, tableRoot);
+  const { columnSizing, setColumnSizing } = useColumnSizes(tableRoot);
+  const { columnVisibility, setColumnVisibility } = useColumnVisibility(tableRoot);
 
   const table = useReactTable({
     data,
@@ -143,9 +149,13 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
     return <EmptyPage text='Loading...' />;
   }
 
+  // control components need different implementations for handling permissions
+  const TableRootSettings = tableRoot === 'editor' ? EditorTableSettings : CuesheetTableSettings;
+  const TableMenu = tableRoot === 'editor' ? EditorTableMenu : CuesheetTableMenu;
+
   return (
     <>
-      <CuesheetTableSettings
+      <TableRootSettings
         columns={allLeafColumns}
         handleResetResizing={resetColumnResizing}
         handleResetReordering={resetColumnOrder}
@@ -249,7 +259,7 @@ export default function CuesheetTable({ columns, cuesheetMode }: CuesheetTablePr
         }}
       />
 
-      <CuesheetTableMenu />
+      <TableMenu />
     </>
   );
 }

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/DelayRow.module.scss

@@ -15,3 +15,14 @@
     }
   }
 }
+
+.delayRowHidden {
+  visibility: hidden;
+
+  td {
+    padding: 0;
+    height: 1px;
+    line-height: 1px;
+    font-size: 0;
+  }
+}

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

@@ -14,7 +14,16 @@ function DelayRow({ duration, injectedStyles, ...virtuosoProps }: DelayRowProps)
   const hideDelays = usePersistedCuesheetOptions((state) => state.hideDelays);
 
   if (hideDelays || duration === 0) {
-    return null;
+    return (
+      <tr
+        className={`${style.delayRow} ${style.delayRowHidden}`}
+        data-testid='cuesheet-delay-hidden'
+        style={injectedStyles}
+        {...virtuosoProps}
+      >
+        <td />
+      </tr>
+    );
   }
 
   const delayTime = millisToDelayString(duration, 'expanded');

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/EditorTableMenu.tsx

@@ -0,0 +1,85 @@
+import { memo } from 'react';
+import { IoAdd, IoArrowDown, IoArrowUp, IoDuplicateOutline, IoOptions, IoTrash } from 'react-icons/io5';
+import { SupportedEntry } from 'ontime-types';
+
+import { PositionedDropdownMenu } from '../../../../common/components/dropdown-menu/DropdownMenu';
+import { useEntryActions } from '../../../../common/hooks/useEntryAction';
+import { useCuesheetEditModal } from '../../cuesheet-edit-modal/useCuesheetEditModal';
+
+import { useCuesheetTableMenu } from './useCuesheetTableMenu';
+
+export default memo(EditorTableMenu);
+
+function EditorTableMenu() {
+  const { isOpen, entryId, entryIndex, parentId, flag, position, closeMenu } = useCuesheetTableMenu();
+  const { addEntry, clone, deleteEntry, move, updateEntry } = useEntryActions();
+  const showModal = useCuesheetEditModal((state) => state.setEditableEntry);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <PositionedDropdownMenu
+      isOpen
+      onClose={closeMenu}
+      items={[
+        {
+          type: 'item',
+          label: 'Edit...',
+          onClick: () => showModal(entryId),
+          icon: IoOptions,
+        },
+        { type: 'divider' },
+        {
+          type: 'item',
+          label: flag ? 'Remove flag' : 'Add flag',
+          onClick: () => updateEntry({ id: entryId, flag: !flag }),
+          icon: IoDuplicateOutline,
+          disabled: flag === null,
+        },
+        { type: 'divider' },
+        {
+          type: 'item',
+          label: 'Add event above',
+          onClick: () => addEntry({ type: SupportedEntry.Event, parent: parentId }, { before: entryId }),
+          icon: IoAdd,
+        },
+        {
+          type: 'item',
+          label: 'Add event below',
+          onClick: () => addEntry({ type: SupportedEntry.Event, parent: parentId }, { after: entryId }),
+          icon: IoAdd,
+        },
+        {
+          type: 'item',
+          label: 'Clone event',
+          onClick: () => clone(entryId),
+          icon: IoDuplicateOutline,
+        },
+        { type: 'divider' },
+        {
+          type: 'item',
+          label: 'Move up',
+          onClick: () => move(entryId, 'up'),
+          icon: IoArrowUp,
+          disabled: entryIndex < 1,
+        },
+        {
+          type: 'item',
+          label: 'Move down',
+          onClick: () => move(entryId, 'down'),
+          icon: IoArrowDown,
+        },
+        { type: 'divider' },
+        {
+          type: 'item',
+          label: 'Delete',
+          onClick: () => deleteEntry([entryId]),
+          icon: IoTrash,
+        },
+      ]}
+      position={position}
+    />
+  );
+}

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

@@ -15,7 +15,7 @@ import { PresetContext } from '../../../../common/context/PresetContext';
 import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
 import { cx } from '../../../../common/utils/styleUtils';
 import { AppMode, sessionKeys } from '../../../../ontimeConfig';
-import { usePersistedCuesheetOptions } from '../../cuesheet.options';
+import { CuesheetOptions, usePersistedCuesheetOptions } from '../../cuesheet.options';
 import { useCuesheetPermissions } from '../../useTablePermissions';
 
 import CuesheetShareModal from './CuesheetShareModal';
@@ -29,6 +29,17 @@ interface CuesheetTableSettingsProps {
   handleClearToggles: () => void;
 }
 
+export interface ViewSettingsProps {
+  optionsStore: CuesheetOptions;
+}
+
+export interface ColumnSettingsProps {
+  columns: Column<ExtendedEntry, unknown>[];
+  handleResetResizing: () => void;
+  handleResetReordering: () => void;
+  handleClearToggles: () => void;
+}
+
 export default function CuesheetTableSettings({
   columns,
   handleResetResizing,
@@ -37,6 +48,7 @@ export default function CuesheetTableSettings({
 }: CuesheetTableSettingsProps) {
   const canShare = useCuesheetPermissions((state) => state.canShare);
   const preset = use(PresetContext);
+  const options = usePersistedCuesheetOptions();
 
   const [cuesheetMode, setCuesheetMode] = useSessionStorage({
     key: preset ? `${preset.alias}${sessionKeys.cuesheetMode}` : sessionKeys.cuesheetMode,
@@ -52,7 +64,7 @@ export default function CuesheetTableSettings({
 
   return (
     <Toolbar.Root className={style.tableSettings}>
-      <ViewSettings />
+      <ViewSettings optionsStore={options} />
       <ColumnSettings
         columns={columns}
         handleResetResizing={handleResetResizing}
@@ -78,8 +90,8 @@ export default function CuesheetTableSettings({
   );
 }
 
-function ViewSettings() {
-  const options = usePersistedCuesheetOptions();
+export function ViewSettings({ optionsStore }: ViewSettingsProps) {
+  const options = optionsStore;
 
   return (
     <Popover.Root>
@@ -137,12 +149,12 @@ function ViewSettings() {
   );
 }
 
-function ColumnSettings({
+export function ColumnSettings({
   columns,
   handleResetResizing,
   handleResetReordering,
   handleClearToggles,
-}: CuesheetTableSettingsProps) {
+}: ColumnSettingsProps) {
   return (
     <Popover.Root>
       <Popover.Trigger

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocalStorage } from '@mantine/hooks';
 import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
 
@@ -6,15 +6,11 @@ import { debounce } from '../../../common/utils/debounce';
 import { makeStageKey } from '../../../common/utils/localStorage';
 import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
 
-const tableSizesKey = makeStageKey('cuesheet-sizes');
-const tableHiddenKey = makeStageKey('cuesheet-hidden');
-const tableOrderKey = makeStageKey('cuesheet-order');
+type TableRoot = 'editor' | 'cuesheet';
 
-const saveSizesToStorage = debounce((sizes: Record<string, number>) => {
-  localStorage.setItem(tableSizesKey, JSON.stringify(sizes));
-}, 500);
+export function useColumnSizes(tableRoot: TableRoot = 'cuesheet') {
+  const tableSizesKey = useMemo(() => makeStageKey(`${tableRoot}-table-sizes`), [tableRoot]);
 
-export function useColumnSizes() {
   const [columnSizing, setColumnSizingState] = useState<Record<string, number>>(() => {
     try {
       const stored = localStorage.getItem(tableSizesKey);
@@ -26,8 +22,11 @@ export function useColumnSizes() {
 
   // save sizes to localStorage whenever they change (debounced)
   useEffect(() => {
+    const saveSizesToStorage = debounce((sizes: Record<string, number>) => {
+      localStorage.setItem(tableSizesKey, JSON.stringify(sizes));
+    }, 500);
     saveSizesToStorage(columnSizing);
-  }, [columnSizing]);
+  }, [columnSizing, tableSizesKey]);
 
   const setColumnSizing = useCallback((sizesOrUpdater: Updater<ColumnSizingState>) => {
     setColumnSizingState(sizesOrUpdater);
@@ -39,7 +38,9 @@ export function useColumnSizes() {
   };
 }
 
-export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[]) {
+export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[], tableRoot: TableRoot = 'cuesheet') {
+  const tableOrderKey = useMemo(() => makeStageKey(`${tableRoot}-table-order`), [tableRoot]);
+
   const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
     key: tableOrderKey,
     defaultValue: columns.map((col) => col.id as string),
@@ -64,7 +65,9 @@ export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[]) {
   };
 }
 
-export function useColumnVisibility() {
+export function useColumnVisibility(tableRoot: TableRoot = 'cuesheet') {
+  const tableHiddenKey = useMemo(() => makeStageKey(`${tableRoot}-table-hidden`), [tableRoot]);
+
   const [columnVisibility, setColumnVisibility] = useLocalStorage({
     key: tableHiddenKey,
     defaultValue: {},