feat: editor layout

2026-08-11 02:13:48 +00:00 · 2026-01-21 19:56:52 +01:00
parent 967e92e2c8
commit da02ecd113
77 changed files with 2267 additions and 788 deletions
@@ -41,5 +41,4 @@

  padding-inline: 0.5em;
  outline: none;
-
-}
+}
@@ -1,9 +1,8 @@
-import { useMemo } from 'react';
 import { IoPause, IoPlay, IoPlaySkipBack, IoPlaySkipForward, IoReload, IoStop } from 'react-icons/io5';
 import { Playback, TimerPhase } from 'ontime-types';
-import { validatePlayback } from 'ontime-utils';

 import { setPlayback } from '../../../../common/hooks/useSocket';
+import { getPlaybackControlState } from '../playbackControl.utils';
 import TapButton from '../tap-button/TapButton';

 import style from './PlaybackButtons.module.scss';
@@ -15,44 +14,32 @@ interface PlaybackButtonsProps {
  timerPhase: TimerPhase;
 }

-export default function PlaybackButtons(props: PlaybackButtonsProps) {
-  const { playback, numEvents, selectedEventIndex, timerPhase } = props;
-
-  const isRolling = playback === Playback.Roll;
-  const isPlaying = playback === Playback.Play;
-  const isPaused = playback === Playback.Pause;
-  const isArmed = playback === Playback.Armed;
-
-  const isFirst = selectedEventIndex === 0;
-  const isLast = selectedEventIndex === numEvents - 1;
-  const noEvents = numEvents === 0;
-
-  const disableGo = isRolling || noEvents;
-  const disableNext = isRolling || noEvents || isLast;
-  const disablePrev = isRolling || noEvents || isFirst;
-
-  const playbackCan = validatePlayback(playback, timerPhase);
-  const disableStart = !playbackCan.start;
-  const disablePause = !playbackCan.pause;
-  const disableRoll = !playbackCan.roll || noEvents;
-  const disableStop = !playbackCan.stop;
-  const disableReload = !playbackCan.reload;
-
-  const [goModeAction, goModeText] = useMemo(() => {
-    if (isArmed) {
-      return [setPlayback.start, 'Start'];
-    } else if (isLast) {
-      return [setPlayback.stop, 'Finish'];
-    } else if (selectedEventIndex === null) {
-      return [setPlayback.startNext, 'Start'];
-    }
-    return [setPlayback.startNext, 'Next'];
-  }, [isArmed, isLast, selectedEventIndex]);
+export default function PlaybackButtons({ playback, numEvents, selectedEventIndex, timerPhase }: PlaybackButtonsProps) {
+  const {
+    isPlaying,
+    isPaused,
+    isRolling,
+    disableGo,
+    disableNext,
+    disablePrev,
+    disableStart,
+    disablePause,
+    disableRoll,
+    disableStop,
+    disableReload,
+    goAction,
+    goLabel,
+  } = getPlaybackControlState({
+    playback,
+    numEvents,
+    selectedEventIndex,
+    timerPhase,
+  });

  return (
    <div className={style.buttonContainer}>
-      <TapButton disabled={disableGo} onClick={goModeAction} aspect='fill' className={style.go}>
-        {goModeText}
+      <TapButton disabled={disableGo} onClick={goAction} aspect='fill' className={style.go}>
+        {goLabel}
      </TapButton>
      <div className={style.playbackContainer}>
        <TapButton onClick={setPlayback.start} disabled={disableStart} theme={Playback.Play} active={isPlaying}>
@@ -8,6 +8,13 @@
  gap: $element-inner-spacing;
 }

+.timerDisplay {
+  grid-area: timer;
+  max-width: 18.75rem;
+  min-width: 5em;
+  text-align: center;
+}
+
 // ---------> INDICATORS

 .indicators {
@@ -42,7 +42,7 @@ export default function PlaybackTimer({ children }: PropsWithChildren) {
        <div className={style.indicatorNegative} data-active={isOvertime} />
        <Tooltip text={addedTimeLabel} render={<div />} className={style.indicatorDelay} data-active={hasAddedTime} />
      </div>
-      <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} />
+      <TimerDisplay time={isWaiting ? timer.secondaryTimer : timer.current} phase={timer.phase} />
      <div className={style.status}>
        {isWaiting ? (
          <span className={style.rolltag}>Roll: Countdown to start</span>
@@ -0,0 +1,95 @@
+import { Playback, TimerPhase } from 'ontime-types';
+import { validatePlayback } from 'ontime-utils';
+
+import { setPlayback } from '../../../common/hooks/useSocket';
+
+export interface PlaybackControlInput {
+  playback: Playback;
+  numEvents: number;
+  selectedEventIndex: number | null;
+  timerPhase: TimerPhase;
+}
+
+export interface PlaybackControlState {
+  // Playback states
+  isPlaying: boolean;
+  isPaused: boolean;
+  isRolling: boolean;
+  isArmed: boolean;
+  isStopped: boolean;
+
+  // Position states
+  isFirst: boolean;
+  isLast: boolean;
+  noEvents: boolean;
+
+  // Disable flags
+  disableGo: boolean;
+  disableNext: boolean;
+  disablePrev: boolean;
+  disableStart: boolean;
+  disablePause: boolean;
+  disableRoll: boolean;
+  disableStop: boolean;
+  disableReload: boolean;
+  disableAddTime: boolean;
+
+  // Go button configuration
+  goAction: () => void;
+  goLabel: 'Start' | 'Next' | 'Finish';
+}
+
+/**
+ * Centralized playback control state calculator.
+ * Consolidates all playback logic, disable states, and derived values in one place.
+ */
+export function getPlaybackControlState({
+  playback,
+  numEvents,
+  selectedEventIndex,
+  timerPhase,
+}: PlaybackControlInput): PlaybackControlState {
+  const isFirst = selectedEventIndex === 0;
+  const isLast = selectedEventIndex === numEvents - 1;
+  const noEvents = numEvents === 0;
+  const isRolling = playback === Playback.Roll;
+
+  const playbackCan = validatePlayback(playback, timerPhase);
+  const { action: goAction, label: goLabel } = getGoAction(playback, selectedEventIndex, isLast);
+
+  return {
+    isPlaying: playback === Playback.Play,
+    isPaused: playback === Playback.Pause,
+    isRolling,
+    isArmed: playback === Playback.Armed,
+    isStopped: playback === Playback.Stop,
+    isFirst,
+    isLast,
+    noEvents,
+    disableGo: isRolling || noEvents,
+    disableNext: isRolling || noEvents || isLast,
+    disablePrev: isRolling || noEvents || isFirst,
+    disableStart: !playbackCan.start,
+    disablePause: !playbackCan.pause,
+    disableRoll: !playbackCan.roll || noEvents,
+    disableStop: !playbackCan.stop,
+    disableReload: !playbackCan.reload,
+    disableAddTime: playback !== Playback.Play && playback !== Playback.Pause,
+    goAction,
+    goLabel,
+  };
+}
+
+/**
+ * Determines the action and label for the "Go" button based on playback state.
+ */
+function getGoAction(
+  playback: Playback,
+  selectedEventIndex: number | null,
+  isLast: boolean,
+): { action: () => void; label: 'Start' | 'Next' | 'Finish' } {
+  if (playback === Playback.Armed) return { action: setPlayback.start, label: 'Start' };
+  if (isLast) return { action: setPlayback.stop, label: 'Finish' };
+  if (selectedEventIndex === null) return { action: setPlayback.startNext, label: 'Start' };
+  return { action: setPlayback.startNext, label: 'Next' };
+}
@@ -1,23 +1,34 @@
@use '@/theme/viewerDefs' as *;

 .timer {
-  grid-area: timer;
  white-space: nowrap;
-  max-width: 18.75rem;
-  min-width: 5em;

-  color: $timer-color;
-  line-height: 0.9em;
-  text-align: center;
+  line-height: 0.9;
  letter-spacing: 0.1em;
  font-weight: 600;
  font-size: 3.5rem;
-  
-  &.finished {
-    color: $timer-finished-color;
+
+  &[data-phase='default'] {
+    color: $timer-color;
  }

-  &.muted {
+  &[data-phase='warning'] {
+    color: $warning-orange;
+  }
+
+  &[data-phase='danger'] {
+    color: $error-red;
+  }
+
+  &[data-phase='overtime'] {
+    color: $playback-negative;
+  }
+
+  &[data-phase='pending'] {
+    color: $ontime-roll;
+  }
+
+  &[data-phase='none'] {
    color: $muted-gray;
  }
 }
@@ -1,4 +1,4 @@
-import { MaybeNumber } from 'ontime-types';
+import { MaybeNumber, TimerPhase } from 'ontime-types';
 import { millisToString } from 'ontime-utils';

 import { cx, timerPlaceholder } from '../../../../common/utils/styleUtils';
@@ -7,19 +7,20 @@ import style from './TimerDisplay.module.scss';

 interface TimerDisplayProps {
  time: MaybeNumber;
+  phase: TimerPhase;
+  className?: string;
 }

 /**
 * Displays time in ms in formatted timetag
 * Used in editor
 */
-export default function TimerDisplay(props: TimerDisplayProps) {
-  const { time } = props;
+export default function TimerDisplay({ time, phase, className }: TimerDisplayProps) {
+  const display = millisToString(time, { fallback: timerPlaceholder }).replace('-', '');

-  const isNegative = (time ?? 0) < 0;
-  const display =
-    time == null ? timerPlaceholder : millisToString(time, { fallback: timerPlaceholder }).replace('-', '');
-  const classes = cx([style.timer, isNegative ? style.finished : null, time === null && style.muted]);
-
-  return <div className={classes}>{display}</div>;
+  return (
+    <div className={cx([style.timer, className])} data-phase={phase}>
+      {display}
+    </div>
+  );
 }
@@ -0,0 +1,146 @@
+@use '../../../../theme/ontimeColours' as *;
+@use '../../../../theme/ontimeStyles' as *;
+
+$element-height: 4.5rem; // matches go button height in PlaybackButtons
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  gap: 1rem;
+  padding: $panel-gap $section-spacing;
+  background: $bg-container-l2;
+  border-radius: $panel-border-radius;
+}
+
+.itemGroup {
+  display: flex;
+  align-items: center;
+  gap: $element-spacing;
+  flex-shrink: 0;
+}
+
+.goButton,
+.iconButtonWithLabel,
+.iconButton {
+  width: $element-height;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    font-size: 1.25rem;
+  }
+}
+
+.goButton {
+  height: $element-height;
+  min-width: 8rem;
+  line-height: 1.1;
+}
+
+.goLabel {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.shortcutHint {
+  font-size: calc(1rem - 4px);
+  opacity: 0.6;
+}
+
+.addSection {
+  display: contents;
+}
+
+.separator {
+  width: 1px;
+  height: 1.5rem;
+  background: $white-10;
+  margin-inline: 0.25rem;
+}
+
+.timerSection {
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+  gap: 0.5rem;
+}
+
+.negativeIndicator {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1;
+  color: $playback-negative;
+  opacity: 0;
+
+  &[data-active='true'] {
+    opacity: 1;
+  }
+}
+
+// -----> Aux timer section (right)
+
+.auxSection {
+  justify-self: end;
+  display: flex;
+  align-items: center;
+  gap: $element-inner-spacing;
+  flex-shrink: 0;
+}
+
+.auxControls {
+  display: flex;
+  gap: $element-inner-spacing;
+}
+
+.auxTimeInput,
+.auxTimeDisplay {
+  width: 6.5rem;
+  min-width: 6.5rem;
+  max-width: 6.5rem;
+  height: $element-height;
+
+  text-align: center;
+  background: $gray-1050;
+  border-radius: $component-border-radius-md;
+  color: $ui-white;
+}
+
+.auxTimeDisplay {
+  display: grid;
+  place-content: center;
+
+  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.5px;
+
+  padding-inline: 0.5em;
+  outline: none;
+}
+
+// hardcoded value where the timer is over the buttons
+@media (max-width: 1048px) {
+  .container {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .timerSection {
+    justify-self: end;
+  }
+
+  .auxSection {
+    display: none;
+  }
+}
+
+// hardcoded value where the timer is over the buttons
+@media (max-width: 728px) {
+  .addSection {
+    display: none;
+  }
+}
@@ -0,0 +1,184 @@
+import { IoAdd, IoArrowDown, IoArrowUp, IoPause, IoPlay, IoPlaySkipForward, IoRemove, IoStop } from 'react-icons/io5';
+import { useHotkeys, useLocalStorage } from '@mantine/hooks';
+import { Playback, SimpleDirection, SimplePlayback, TimerPhase } from 'ontime-types';
+import { millisToString, parseUserTime } from 'ontime-utils';
+
+import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import {
+  setAuxTimer,
+  setPlayback,
+  useAuxTimerControl,
+  useAuxTimerTime,
+  usePlaybackControl,
+  useTimer,
+} from '../../../../common/hooks/useSocket';
+import { enDash } from '../../../../common/utils/styleUtils';
+import { formatDuration } from '../../../../common/utils/time';
+import { getPlaybackControlState } from '../playbackControl.utils';
+import TapButton from '../tap-button/TapButton';
+import TimerDisplay from '../timer-display/TimerDisplay';
+
+import style from './TrackingPlaybackBar.module.scss';
+
+export default function TrackingPlaybackBar() {
+  const timer = useTimer();
+
+  const { playback, numEvents, selectedEventIndex } = usePlaybackControl();
+
+  const { playback: auxPlayback, direction: auxDirection } = useAuxTimerControl(1);
+  const auxTime = useAuxTimerTime(1);
+
+  const [addTimeInMs] = useLocalStorage({ key: 'add-time', defaultValue: 300_000 });
+
+  const { disableGo, disableNext, disableAddTime, isPlaying, goAction, goLabel } = getPlaybackControlState({
+    playback,
+    numEvents,
+    selectedEventIndex,
+    timerPhase: timer.phase,
+  });
+
+  const disableAddTimeWithAmount = disableAddTime || addTimeInMs === 0;
+
+  const handleAddTime = (direction: 'add' | 'remove') => {
+    if (disableAddTimeWithAmount) return;
+    if (direction === 'add') {
+      setPlayback.addTime(addTimeInMs);
+    } else {
+      setPlayback.addTime(-1 * addTimeInMs);
+    }
+  };
+
+  const handleAuxPlayPause = () => {
+    if (auxPlayback === SimplePlayback.Start) {
+      setAuxTimer.pause(1);
+    } else {
+      setAuxTimer.start(1);
+    }
+  };
+
+  const handleAuxStop = () => {
+    setAuxTimer.stop(1);
+  };
+
+  const handleAuxDirectionToggle = () => {
+    const newDirection =
+      auxDirection === SimpleDirection.CountDown ? SimpleDirection.CountUp : SimpleDirection.CountDown;
+    setAuxTimer.setDirection(1, newDirection);
+  };
+
+  const handleAuxTimeChange = (_field: string, value: string) => {
+    const newTimeInMs = parseUserTime(value);
+    setAuxTimer.setDuration(1, newTimeInMs);
+  };
+
+  useHotkeys([
+    ['Space', () => !disableGo && goAction(), { preventDefault: true }],
+    ['N', () => !disableNext && setPlayback.next(), { preventDefault: true }],
+    ['Escape', () => playback !== Playback.Stop && setPlayback.stop(), { preventDefault: true }],
+  ]);
+
+  const isWaiting = timer.phase === TimerPhase.Pending;
+  const isOvertime = timer.phase === TimerPhase.Overtime;
+  const displayTime = isWaiting ? timer.secondaryTimer : timer.current;
+
+  const addTimeLabel = formatDuration(addTimeInMs);
+
+  return (
+    <div className={style.container}>
+      <div className={style.itemGroup}>
+        <TapButton
+          onClick={goAction}
+          disabled={disableGo}
+          theme={Playback.Play}
+          active={isPlaying}
+          className={style.goButton}
+        >
+          <span className={style.goLabel}>{goLabel}</span>
+          <span className={style.shortcutHint}>[space]</span>
+        </TapButton>
+
+        <TapButton
+          onClick={setPlayback.next}
+          disabled={disableNext}
+          className={style.iconButtonWithLabel}
+          aspect='square'
+        >
+          <IoPlaySkipForward />
+          <span className={style.shortcutHint}>[n]</span>
+        </TapButton>
+
+        <TapButton
+          onClick={setPlayback.stop}
+          disabled={playback === Playback.Stop}
+          className={style.iconButtonWithLabel}
+          aspect='square'
+        >
+          <IoStop />
+          <span className={style.shortcutHint}>[esc]</span>
+        </TapButton>
+
+        <div className={style.addSection}>
+          <div className={style.separator} />
+          <TapButton
+            onClick={() => handleAddTime('remove')}
+            disabled={disableAddTimeWithAmount}
+            className={style.iconButtonWithLabel}
+            aspect='square'
+          >
+            <IoRemove />
+            {addTimeLabel}
+          </TapButton>
+          <TapButton
+            onClick={() => handleAddTime('add')}
+            disabled={disableAddTimeWithAmount}
+            className={style.iconButtonWithLabel}
+            aspect='square'
+          >
+            <IoAdd />
+            {addTimeLabel}
+          </TapButton>
+        </div>
+      </div>
+
+      <div className={style.timerSection}>
+        <span className={style.negativeIndicator} data-active={isOvertime}>
+          {enDash}
+        </span>
+        <TimerDisplay time={displayTime} phase={timer.phase} />
+      </div>
+
+      <div className={style.auxSection}>
+        <TapButton onClick={handleAuxPlayPause} className={style.iconButton} theme={Playback.Play} aspect='square'>
+          {auxPlayback === SimplePlayback.Start ? <IoPause /> : <IoPlay />}
+        </TapButton>
+        <TapButton
+          onClick={handleAuxStop}
+          disabled={auxPlayback === SimplePlayback.Stop}
+          className={style.iconButton}
+          theme={Playback.Stop}
+          aspect='square'
+        >
+          <IoStop />
+        </TapButton>
+        {auxPlayback !== SimplePlayback.Stop ? (
+          <div className={style.auxTimeDisplay}>{millisToString(auxTime)}</div>
+        ) : (
+          <TimeInput
+            name='aux1-tracking'
+            submitHandler={handleAuxTimeChange}
+            time={auxTime}
+            className={style.auxTimeInput}
+          />
+        )}
+        <TapButton
+          onClick={handleAuxDirectionToggle}
+          disabled={auxPlayback !== SimplePlayback.Stop}
+          className={style.iconButton}
+          aspect='square'
+        >
+          {auxDirection === SimpleDirection.CountDown ? <IoArrowDown /> : <IoArrowUp />}
+        </TapButton>
+      </div>
+    </div>
+  );
+}
@@ -12,7 +12,7 @@ import { getDefaultFormat } from '../../common/utils/time';
 import { isTouchDevice } from '../../externals';
 import Loader from '../../views/common/loader/Loader';

-import EditModal from './edit-modal/EditModal';
+import CustomFieldEditModal from './custom-field-edit-modal/CustomFieldEditModal';
 import FollowButton from './follow-button/FollowButton';
 import OperatorEvent from './operator-event/OperatorEvent';
 import OperatorGroup from './operator-group/OperatorGroup';
@@ -118,7 +118,7 @@ function Operator({ rundown, rundownMetadata, customFields, settings }: Operator
  return (
    <div className={style.operatorContainer} data-testid='operator-view'>
      <ViewParamsEditor target={OntimeView.Operator} viewOptions={operatorOptions} />
-      {editEvent && <EditModal event={editEvent} onClose={() => setEditEvent(null)} />}
+      {editEvent && <CustomFieldEditModal event={editEvent} onClose={() => setEditEvent(null)} />}

      <StatusBar />

@@ -9,14 +9,14 @@ import Textarea from '../../../common/components/input/textarea/Textarea';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { EditEvent } from '../operator.types';

-import style from './EditModal.module.scss';
+import style from './CustomFieldEditModal.module.scss';

-interface EditModalProps {
+interface CustomFieldEditModalProps {
  event: EditEvent;
  onClose: () => void;
 }

-export default function EditModal(props: EditModalProps) {
+export default function CustomFieldEditModal(props: CustomFieldEditModalProps) {
  const { event, onClose } = props;

  const { updateEntry } = useEntryActions();
@@ -2,7 +2,13 @@ import { memo, PropsWithChildren } from 'react';

 import { useIsMobileScreen } from '../../common/hooks/useIsMobileScreen';

-import { ClockOverview, MetadataTimes, OffsetOverview, StartTimes, TimerOverview } from './composite/TimeElements';
+import {
+  ClockOverview,
+  MetadataTimes,
+  OffsetOverview,
+  StartTimesRuntime,
+  TimerOverview,
+} from './composite/TimeElements';
 import TitleOverview from './composite/TitleOverview';
 import { OverviewWrapper } from './OverviewWrapper';

@@ -10,8 +16,10 @@ export default memo(CuesheetOverview);
 function CuesheetOverview({ children }: PropsWithChildren) {
  const isMobileScreen = useIsMobileScreen();

-  if (isMobileScreen) return <CuesheetMobile>{children}</CuesheetMobile>;
-  else return <CuesheetDesktop>{children}</CuesheetDesktop>;
+  if (isMobileScreen) {
+    return <CuesheetMobile>{children}</CuesheetMobile>;
+  }
+  return <CuesheetDesktop>{children}</CuesheetDesktop>;
 }

 function CuesheetMobile({ children }: PropsWithChildren) {
@@ -27,7 +35,7 @@ function CuesheetDesktop({ children }: PropsWithChildren) {
  return (
    <OverviewWrapper navElements={children}>
      <TitleOverview />
-      <StartTimes shouldFormat />
+      <StartTimesRuntime shouldFormat />
      <TimerOverview />
      <OffsetOverview />
      <MetadataTimes />
@@ -1,19 +1,73 @@
 import { memo, PropsWithChildren } from 'react';

-import { ClockOverview, MetadataTimes, OffsetOverview, ProgressOverview, StartTimes } from './composite/TimeElements';
+import { EditorLayoutMode, useEditorLayout } from '../../views/editor/useEditorLayout';
+
+import {
+  ClockOverview,
+  MetadataTimes,
+  OffsetOverview,
+  PlanningStats,
+  ProgressOverview,
+  StartTimesPlanning,
+  StartTimesRuntime,
+} from './composite/TimeElements';
 import TitleOverview from './composite/TitleOverview';
 import { OverviewWrapper } from './OverviewWrapper';

+import style from './Overview.module.scss';
+
 export default memo(EditorOverview);
+
 function EditorOverview({ children }: PropsWithChildren) {
+  const { layoutMode } = useEditorLayout();
+
  return (
    <OverviewWrapper navElements={children}>
-      <TitleOverview />
-      <StartTimes />
-      <ProgressOverview />
-      <OffsetOverview />
-      <MetadataTimes />
-      <ClockOverview />
+      {layoutMode === EditorLayoutMode.PLANNING && <OverviewPlanning />}
+      {layoutMode === EditorLayoutMode.TRACKING && <OverviewTracking />}
+      {layoutMode === EditorLayoutMode.CONTROL && <OverviewControl />}
    </OverviewWrapper>
  );
 }
+
+function OverviewPlanning() {
+  return (
+    <>
+      <div className={style.inline}>
+        <TitleOverview />
+        <StartTimesPlanning />
+        <PlanningStats />
+      </div>
+      <ClockOverview />
+    </>
+  );
+}
+
+function OverviewTracking() {
+  return (
+    <>
+      <div className={style.inline}>
+        <StartTimesRuntime />
+        <ProgressOverview />
+        <OffsetOverview />
+      </div>
+      <MetadataTimes />
+      <ClockOverview />
+    </>
+  );
+}
+
+function OverviewControl() {
+  return (
+    <>
+      <TitleOverview />
+      <div className={style.inline}>
+        <StartTimesRuntime />
+        <ProgressOverview />
+        <OffsetOverview />
+      </div>
+      <MetadataTimes />
+      <ClockOverview />
+    </>
+  );
+}
@@ -29,11 +29,22 @@
 }

 .info {
-  flex: 1;
  padding-left: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  overflow-x: auto;
-  overflow-y: hidden;
+  width: max-content;
+  height: 100%;
+}
+
+.infoScroll {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+}
+
+.inline {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
@@ -1,6 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { ErrorBoundary } from '@sentry/react';

+import ScrollArea from '../../common/components/scroll-area/ScrollArea';
 import { useIsOnline } from '../../common/hooks/useSocket';
 import { cx } from '../../common/utils/styleUtils';

@@ -17,7 +18,14 @@ export function OverviewWrapper({ navElements, children }: PropsWithChildren<Ove
    <div className={cx([style.overview, !isOnline && style.isOffline])}>
      <ErrorBoundary>
        <div className={style.nav}>{navElements}</div>
-        <div className={style.info}>{children}</div>
+        <ScrollArea
+          className={style.infoScroll}
+          contentClassName={style.info}
+          contentStyle={{ minWidth: '100%' }}
+          orientation='horizontal'
+        >
+          {children}
+        </ScrollArea>
      </ErrorBoundary>
    </div>
  );
@@ -14,6 +14,13 @@
  gap: 0.5rem;
 }

+.row2 {
+  display: grid;
+  grid-template-columns: 3rem 9rem;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .metadataRow {
  display: grid;
  grid-template-columns: minmax(3rem, 10rem) 8rem 8rem;
@@ -27,7 +27,7 @@ import {
 import { useEntry } from '../../../common/hooks-query/useRundown';
 import { getOffsetState, getOffsetText } from '../../../common/utils/offset';
 import { cx, enDash, timerPlaceholder } from '../../../common/utils/styleUtils';
-import { formatTime } from '../../../common/utils/time';
+import { formatDuration, formatTime } from '../../../common/utils/time';
 import SuperscriptPeriod from '../../../views/common/superscript-time/SuperscriptPeriod';
 import { calculateEndAndDaySpan, formatDueTime } from '../overview.utils';

@@ -39,30 +39,22 @@ interface OverviewTimeElementsProps {
  shouldFormat?: boolean;
 }

-export function StartTimes({ shouldFormat }: OverviewTimeElementsProps) {
+const timeFormatOptions = { format12: 'hh:mm:ss a', format24: 'HH:mm:ss' };
+
+function formatTimeValue(time: number | null, shouldFormat: boolean | undefined): string {
+  if (time === null) return timerPlaceholder;
+  if (shouldFormat) return formatTime(time, timeFormatOptions);
+  return millisToString(time, { fallback: timerPlaceholder });
+}
+
+export function StartTimesRuntime({ shouldFormat }: OverviewTimeElementsProps) {
  const { plannedEnd, plannedStart, actualStart } = useStartTimesOverview();

-  const formatOptions = { format12: 'hh:mm:ss a', format24: 'HH:mm:ss' };
-
-  const plannedStartText = (() => {
-    if (plannedStart === null) return timerPlaceholder;
-    if (shouldFormat) return formatTime(plannedStart, formatOptions);
-    return millisToString(plannedStart, { fallback: timerPlaceholder });
-  })();
-
-  const actualStartText = (() => {
-    if (actualStart === null) return timerPlaceholder;
-    if (shouldFormat) return formatTime(actualStart, formatOptions);
-    return millisToString(actualStart, { fallback: timerPlaceholder });
-  })();
+  const plannedStartText = formatTimeValue(plannedStart, shouldFormat);
+  const actualStartText = formatTimeValue(actualStart, shouldFormat);

  const [maybePlannedEnd, maybePlannedDaySpan] = useMemo(() => calculateEndAndDaySpan(plannedEnd), [plannedEnd]);
-
-  const plannedEndText = (() => {
-    if (maybePlannedEnd === null) return timerPlaceholder;
-    if (shouldFormat) return formatTime(maybePlannedEnd, formatOptions);
-    return millisToString(maybePlannedEnd, { fallback: timerPlaceholder });
-  })();
+  const plannedEndText = formatTimeValue(maybePlannedEnd, shouldFormat);

  const multipleDays = maybePlannedDaySpan > 0;
  const plannedEndTooltip = multipleDays
@@ -122,6 +114,59 @@ export function StartTimes({ shouldFormat }: OverviewTimeElementsProps) {
  );
 }

+export function StartTimesPlanning({ shouldFormat }: OverviewTimeElementsProps) {
+  const { plannedEnd, plannedStart } = useStartTimesOverview();
+
+  const plannedStartText = formatTimeValue(plannedStart, shouldFormat);
+
+  const [maybePlannedEnd, maybePlannedDaySpan] = useMemo(() => calculateEndAndDaySpan(plannedEnd), [plannedEnd]);
+  const plannedEndText = formatTimeValue(maybePlannedEnd, shouldFormat);
+
+  const multipleDays = maybePlannedDaySpan > 0;
+  const plannedEndTooltip = multipleDays
+    ? `Planned end time (rundown spans over ${maybePlannedDaySpan + 1} days)`
+    : 'Planned end time';
+
+  return (
+    <div className={style.column}>
+      <div className={style.row2}>
+        <span className={style.label}>Start</span>
+        <Tooltip
+          text='Planned start time'
+          render={
+            <div className={style.labelledElement}>
+              <TbCalendarPin className={style.icon} />
+              <SuperscriptPeriod
+                className={cx([style.time, plannedStart === null && style.muted])}
+                time={plannedStartText}
+              />
+            </div>
+          }
+        />
+      </div>
+
+      <div className={style.row2}>
+        <span className={style.label}>End</span>
+        <Tooltip
+          text={plannedEndTooltip}
+          render={
+            <div className={style.labelledElement}>
+              <TbCalendarPin className={style.icon} />
+              <SuperscriptPeriod
+                className={cx([style.time, plannedEnd === null && style.muted])}
+                time={plannedEndText}
+              />
+              {multipleDays && (
+                <span className={cx([style.time, style.daySpan])} data-day-offset={maybePlannedDaySpan} />
+              )}
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
 /**
 * Shows the expected end for the rundown
 * Extracted to improve performance as this is a ticking value
@@ -130,11 +175,7 @@ function RundownExpectedEnd({ shouldFormat }: OverviewTimeElementsProps) {
  const expectedEnd = useRundownExpectedEnd();

  const [maybeExpectedEnd, maybeExpectedDaySpan] = useMemo(() => calculateEndAndDaySpan(expectedEnd), [expectedEnd]);
-  const maybeExpectedEndText = (() => {
-    if (maybeExpectedEnd === null) return timerPlaceholder;
-    if (shouldFormat) return formatTime(maybeExpectedEnd, { format12: 'hh:mm:ss a', format24: 'HH:mm:ss' });
-    return millisToString(maybeExpectedEnd, { fallback: timerPlaceholder });
-  })();
+  const maybeExpectedEndText = formatTimeValue(maybeExpectedEnd, shouldFormat);

  const multipleDays = maybeExpectedEnd !== null && maybeExpectedDaySpan > 0;
  const tooltip = multipleDays
@@ -316,11 +357,27 @@ export function TimerOverview({ className }: { className?: string }) {
  const isWaiting = timer.phase === TimerPhase.Pending;
  const title = isWaiting ? 'Count to start' : 'Running timer';
  const display = millisToString(isWaiting ? timer.secondaryTimer : timer.current, { fallback: timerPlaceholder });
-  const timerState = (() => {
+
+  function getTimerState(): 'waiting' | 'muted' | 'active' {
    if (isWaiting) return 'waiting';
    if (timer.current === null) return 'muted';
    return 'active';
-  })();
+  }

-  return <TimeColumn label={title} value={display} state={timerState} className={className} />;
+  return <TimeColumn label={title} value={display} state={getTimerState()} className={className} />;
+}
+
+export function PlanningStats() {
+  const { numEvents } = useProgressOverview();
+  const { plannedEnd, plannedStart } = useStartTimesOverview();
+
+  const hasTimes = plannedStart !== null && plannedEnd !== null;
+  const formattedDuration = hasTimes ? formatDuration(plannedEnd - plannedStart) : timerPlaceholder;
+
+  return (
+    <>
+      <TimeColumn label='Total duration' value={formattedDuration} />
+      <TimeColumn label='Events' value={String(numEvents)} />
+    </>
+  );
 }
@@ -4,8 +4,14 @@
 }

 .rundownContainer {
-  margin-top: 1rem;
-  height: 100%;
+  padding-top: 1rem;
+  flex: 1 1 auto;
+  min-height: 0;
+
+  :is([data-target='small-device']) & {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
 }

 .list {
@@ -17,6 +23,7 @@
  :is([data-target='small-device']) & {
    padding-inline: 0;
    overflow-x: auto;
+    min-width: max-content;
  }
 }

@@ -3,13 +3,19 @@ import { TbFlagFilled } from 'react-icons/tb';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { closestCenter, DndContext } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { useSessionStorage } from '@mantine/hooks';
-import { type EntryId, type Rundown, isOntimeEvent, isOntimeGroup, Playback, SupportedEntry } from 'ontime-types';
+import {
+  type EntryId,
+  type Rundown as RundownType,
+  isOntimeEvent,
+  isOntimeGroup,
+  Playback,
+  SupportedEntry,
+} from 'ontime-types';

 import { useEntryActionsContext } from '../../common/context/EntryActionsContext';
 import { useEntryCopy } from '../../common/stores/entryCopyStore';
 import { lastMetadataKey, RundownMetadataObject } from '../../common/utils/rundownMetadata';
-import { AppMode, sessionKeys } from '../../ontimeConfig';
+import { AppMode } from '../../ontimeConfig';

 import QuickAddButtons from './entry-editor/quick-add-buttons/QuickAddButtons';
 import QuickAddInline from './entry-editor/quick-add-cursor/QuickAddInline';
@@ -20,6 +26,8 @@ import RundownGroup from './rundown-group/RundownGroup';
 import RundownGroupEnd from './rundown-group/RundownGroupEnd';
 import { filterVisibleEntries, makeSortableList } from './rundown.utils';
 import RundownEmpty from './RundownEmpty';
+import { useCollapsedGroups } from './useCollapsedGroups';
+import { useEditorFollowMode } from './useEditorFollowMode';
 import { useEventSelection } from './useEventSelection';

 import style from './Rundown.module.scss';
@@ -27,10 +35,10 @@ import style from './Rundown.module.scss';
 const RundownEntry = lazy(() => import('./RundownEntry'));

 interface RundownProps {
-  entries: Rundown['entries'];
-  id: Rundown['id'];
-  order: Rundown['order'];
-  flatOrder: Rundown['flatOrder'];
+  entries: RundownType['entries'];
+  id: RundownType['id'];
+  order: RundownType['order'];
+  flatOrder: RundownType['flatOrder'];
  rundownMetadata: RundownMetadataObject;
  featureData: {
    playback: Playback;
@@ -55,60 +63,36 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
    setMetadata(rundownMetadata);
  }, [order, entries, rundownMetadata]);

-  const [collapsedGroups, setCollapsedGroups] = useSessionStorage<EntryId[]>({
-    // we ensure that this is unique to the rundown
-    key: `rundown.${id}-editor-collapsed-groups`,
-    defaultValue: [],
-  });
-  const collapsedGroupSet = useMemo(() => new Set(collapsedGroups), [collapsedGroups]);
+  const { getIsCollapsed, collapseGroup, expandGroup } = useCollapsedGroups(id);

  const entryActions = useEntryActionsContext();
  const setEntryCopyId = useEntryCopy((state) => state.setEntryCopyId);

  // cursor
-  const [editorMode] = useSessionStorage<AppMode>({
-    key: sessionKeys.editorMode,
-    defaultValue: AppMode.Edit,
-  });
+  const { editorMode } = useEditorFollowMode();

  const clearSelectedEvents = useEventSelection((state) => state.clearSelectedEvents);
-  const setSelectedEvents = useEventSelection((state) => state.setSelectedEvents);
  const cursor = useEventSelection((state) => state.cursor);
  const scrollToEntry = useEventSelection((state) => state.scrollToEntry);
  const setScrollHandler = useEventSelection((state) => state.setScrollHandler);
+  const selectEntry = useEventSelection((state) => state.setSelectedEvents);

  const cursorRef = useRef<HTMLDivElement | null>(null);
  const scrollRef = useRef<HTMLDivElement | null>(null);
  const virtuosoRef = useRef<VirtuosoHandle | null>(null);

-  /**
-   * Checks whether a group is collapsed
-   */
-  const getIsCollapsed = useCallback(
-    (groupId: EntryId): boolean => {
-      return collapsedGroupSet.has(groupId);
-    },
-    [collapsedGroupSet],
-  );
-
  /**
   * Handles logic for collapsing groups
   */
  const handleCollapseGroup = useCallback(
-    (collapsed: boolean, groupId: EntryId) => {
-      setCollapsedGroups((prev) => {
-        const isCollapsed = getIsCollapsed(groupId);
-        if (collapsed && !isCollapsed) {
-          const newSet = new Set(prev).add(groupId);
-          return [...newSet];
-        }
-        if (!collapsed && isCollapsed) {
-          return [...prev].filter((id) => id !== groupId);
-        }
-        return prev;
-      });
+    (collapsed: boolean, groupId: EntryId | undefined) => {
+      if (collapsed) {
+        collapseGroup(groupId);
+      } else {
+        expandGroup(groupId);
+      }
    },
-    [getIsCollapsed, setCollapsedGroups],
+    [collapseGroup, expandGroup],
  );

  // Commands layer - business logic
@@ -116,7 +100,7 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
    entries,
    flatOrder,
    entryActions,
-    setSelectedEvents,
+    selectEntry,
    handleCollapseGroup,
  });

@@ -145,9 +129,9 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
    return filterVisibleEntries(sortableData, entries, getIsCollapsed);
  }, [sortableData, entries, getIsCollapsed]);

-  // Scroll to a specific entry when requested by keyboard/finder
+  // Provide an imperative scroll handler for explicit jumps (finder/keyboard)
  useEffect(() => {
-    setScrollHandler('rundown-list', (entryId) => {
+    setScrollHandler((entryId) => {
      if (!virtuosoRef.current || dnd.isDraggingRef.current) {
        return;
      }
@@ -164,39 +148,45 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
    });

    return () => {
-      setScrollHandler('rundown-list', null);
+      setScrollHandler(null);
    };
  }, [visibleData, dnd.isDraggingRef, setScrollHandler]);

-  // Follow-scroll in run mode via the shared scroll handler
+  // Keep selected cursor visible by expanding its parent group in any mode.
+  // Finder can select entries while layout is in Run mode, where we do not follow cursor scroll.
  useEffect(() => {
-    if (editorMode !== AppMode.Run || dnd.isDraggingRef.current) {
+    if (!cursor) {
      return;
    }

-    const targetId = featureData?.selectedEventId;
-    if (!targetId) {
-      return;
+    const entry = entries[cursor];
+    if (entry && 'parent' in entry) {
+      expandGroup(entry.parent);
    }
+  }, [cursor, entries, expandGroup]);

-    scrollToEntry(targetId);
-  }, [editorMode, featureData?.selectedEventId, visibleData, dnd.isDraggingRef, scrollToEntry]);
-
-  // in run mode, we follow the playback selection and open groups as needed
+  // Auto-follow behavior in Edit mode: follow the user's cursor
  useEffect(() => {
-    if (editorMode !== AppMode.Run || !featureData?.selectedEventId) {
+    if (dnd.isDraggingRef.current || editorMode !== AppMode.Edit || !cursor) {
      return;
    }
-    const index = order.findIndex((id) => id === featureData.selectedEventId);
-    // @ts-expect-error -- but we safely check if the parent property exists
-    const maybeParent = entries[featureData.selectedEventId]?.parent;
-    if (maybeParent) {
-      // open the group
-      setCollapsedGroups((prev) => [...prev].filter((id) => id !== maybeParent));
+
+    scrollToEntry(cursor);
+  }, [editorMode, cursor, scrollToEntry, dnd.isDraggingRef]);
+
+  // Auto-follow behavior in Run mode: follow the currently playing event
+  useEffect(() => {
+    if (dnd.isDraggingRef.current || editorMode !== AppMode.Run || !featureData?.selectedEventId) {
+      return;
    }

-    setSelectedEvents({ id: featureData.selectedEventId, selectMode: 'click', index });
-  }, [editorMode, entries, featureData.selectedEventId, order, setCollapsedGroups, setSelectedEvents]);
+    // Open parent group if the target is inside a collapsed group
+    const entry = entries[featureData.selectedEventId];
+    if (entry && 'parent' in entry) {
+      expandGroup(entry.parent);
+    }
+    scrollToEntry(featureData.selectedEventId);
+  }, [editorMode, featureData?.selectedEventId, entries, expandGroup, scrollToEntry, dnd.isDraggingRef]);

  // gather presentation options
  const isEditMode = editorMode === AppMode.Edit;
@@ -232,11 +222,9 @@ export default function Rundown({ order, flatOrder, entries, id, rundownMetadata
        );
      }

-      // Regular entry handling - compute all values upfront
      const entry = entries[entryId];
      const entryMetadata = metadata[entryId];

-      // Null check after computing - return null if missing
      if (!entry || !entryMetadata) {
        return null;
      }
@@ -22,14 +22,18 @@
 }

 .rundownRoot {
-  height: calc(100% - 1.5rem);
+  height: calc(100% - 1rem);
  width: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }

 .list {
  display: flex;
  height: inherit;
  padding-inline: 0;
+  padding-bottom: 0;
  box-shadow: $box-shadow-right;

  flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
@@ -11,8 +11,9 @@ import { useIsSmallDevice } from '../../common/hooks/useIsSmallDevice';
 import { handleLinks } from '../../common/utils/linkUtils';
 import { cx } from '../../common/utils/styleUtils';
 import { getIsNavigationLocked } from '../../externals';
-import { AppMode, sessionKeys } from '../../ontimeConfig';
-import EditorEditModal from '../../views/cuesheet/cuesheet-edit-modal/EditorEditModal';
+import { AppMode } from '../../ontimeConfig';
+import EntryEditModal from '../../views/cuesheet/cuesheet-edit-modal/EntryEditModal';
+import { EditorLayoutMode, useEditorLayout } from '../../views/editor/useEditorLayout';

 import RundownEntryEditor from './entry-editor/RundownEntryEditor';
 import FinderPlacement from './placements/FinderPlacement';
@@ -20,8 +21,9 @@ import { RundownContextMenu } from './rundown-context-menu/RundownContextMenu';
 import RundownHeader from './rundown-header/RundownHeader';
 import RundownHeaderMobile from './rundown-header/RundownHeaderMobile';
 import RundownTable from './rundown-table/RundownTable';
+import { RundownViewMode } from './rundown.options';
 import RundownList from './RundownList';
-import { DEFAULT_RUNDOWN_VIEW_MODE, RUNDOWN_VIEW_MODE_STORAGE_KEY, RundownViewMode } from './rundownViewMode';
+import { useEditorFollowMode } from './useEditorFollowMode';

 import style from './RundownExport.module.scss';

@@ -29,13 +31,11 @@ export default memo(RundownExport);

 function RundownExport() {
  const isExtracted = window.location.pathname.includes('/rundown');
-  const [editorMode] = useSessionStorage({
-    key: sessionKeys.editorMode,
-    defaultValue: AppMode.Edit,
-  });
+  const { editorMode } = useEditorFollowMode();
+  const { layoutMode } = useEditorLayout();
  const [viewMode, setViewMode] = useSessionStorage<RundownViewMode>({
-    key: RUNDOWN_VIEW_MODE_STORAGE_KEY,
-    defaultValue: DEFAULT_RUNDOWN_VIEW_MODE,
+    key: 'rundown-view-mode',
+    defaultValue: RundownViewMode.List,
  });
  const isSmallDevice = useIsSmallDevice();
  const entryActions = useEntryActions();
@@ -53,7 +53,7 @@ function RundownExport() {
            <ViewNavigationMenu suppressSettings />
            <div className={style.rundown}>
              <ErrorBoundary>
-                <RundownRoot isSmallDevice viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownRoot isSmallDevice isExtracted viewMode={viewMode} setViewMode={setViewMode} />
                <RundownContextMenu />
              </ErrorBoundary>
            </div>
@@ -63,7 +63,10 @@ function RundownExport() {
    );
  }

-  const hideSideBar = (isExtracted && editorMode === 'run') || viewMode === 'table';
+  const hideSideBar =
+    layoutMode === EditorLayoutMode.TRACKING ||
+    (isExtracted && editorMode === AppMode.Run) ||
+    viewMode === RundownViewMode.Table;

  return (
    <EntryActionsProvider actions={entryActions}>
@@ -75,7 +78,7 @@ function RundownExport() {
            <Editor.Panel className={style.list}>
              <ErrorBoundary>
                {!isExtracted && <Editor.CornerExtract onClick={(event) => handleLinks('rundown', event)} />}
-                <RundownRoot viewMode={viewMode} setViewMode={setViewMode} />
+                <RundownRoot isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
                <RundownContextMenu />
              </ErrorBoundary>
            </Editor.Panel>
@@ -95,16 +98,21 @@ function RundownExport() {

 interface RundownRootProps {
  isSmallDevice?: boolean;
+  isExtracted?: boolean;
  viewMode: RundownViewMode;
  setViewMode: (mode: RundownViewMode) => void;
 }

-function RundownRoot({ isSmallDevice, viewMode, setViewMode }: RundownRootProps) {
+function RundownRoot({ isSmallDevice, isExtracted, viewMode, setViewMode }: RundownRootProps) {
  return (
    <div className={style.rundownRoot}>
-      {isSmallDevice ? <RundownHeaderMobile /> : <RundownHeader viewMode={viewMode} setViewMode={setViewMode} />}
-      {viewMode === 'list' ? <RundownList /> : <RundownTable />}
-      <EditorEditModal />
+      {isSmallDevice ? (
+        <RundownHeaderMobile viewMode={viewMode} setViewMode={setViewMode} />
+      ) : (
+        <RundownHeader isExtracted={isExtracted} viewMode={viewMode} setViewMode={setViewMode} />
+      )}
+      {viewMode === RundownViewMode.List ? <RundownList /> : <RundownTable />}
+      {viewMode === RundownViewMode.Table && <EntryEditModal />}
    </div>
  );
 }
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { isOntimeEvent, isOntimeGroup, isOntimeMilestone, OntimeEntry } from 'ontime-types';

 import useRundown from '../../../common/hooks-query/useRundown';
@@ -15,20 +15,14 @@ interface CuesheetEntryEditorProps {

 export default function CuesheetEntryEditor({ entryId }: CuesheetEntryEditorProps) {
  const { data } = useRundown();
-  const [entry, setEntry] = useState<OntimeEntry | null>(null);

-  useEffect(() => {
+  const entry = useMemo<OntimeEntry | null>(() => {
    if (data.order.length === 0) {
-      setEntry(null);
-      return;
+      return null;
    }

    const event = data.entries[entryId];
-    if (event) {
-      setEntry(event);
-    } else {
-      setEntry(null);
-    }
+    return event ?? null;
  }, [entryId, data.order, data.entries]);

  if (isOntimeEvent(entry)) {
@@ -1,6 +1,6 @@
 .cuesheetEditor,
 .rundownEditor {
-  max-height: 100%;
+  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
@@ -1,13 +1,5 @@
 import { useMemo } from 'react';
-import {
-  isOntimeDelay,
-  isOntimeEvent,
-  isOntimeGroup,
-  isOntimeMilestone,
-  OntimeEvent,
-  OntimeGroup,
-  OntimeMilestone,
-} from 'ontime-types';
+import { isOntimeEvent, isOntimeGroup, isOntimeMilestone, OntimeEntry } from 'ontime-types';

 import useRundown from '../../../common/hooks-query/useRundown';
 import { useEventSelection } from '../useEventSelection';
@@ -24,7 +16,7 @@ export default function RundownEntryEditor() {
  const selectedEvents = useEventSelection((state) => state.selectedEvents);
  const { data } = useRundown();

-  const entry = useMemo<OntimeEvent | OntimeGroup | OntimeMilestone | null>(() => {
+  const entry = useMemo<OntimeEntry | null>(() => {
    if (data.order.length === 0) {
      return null;
    }
@@ -33,12 +25,9 @@ export default function RundownEntryEditor() {
    if (!selectedEventId) {
      return null;
    }
-    const event = data.entries[selectedEventId];

-    if (event && !isOntimeDelay(event)) {
-      return event;
-    }
-    return null;
+    const event = data.entries[selectedEventId];
+    return event ?? null;
  }, [data.order.length, data.entries, selectedEvents]);

  if (!entry) {
@@ -1,25 +1,18 @@
 import { useCallback } from 'react';
-import { type EntryId, type OntimeEntry, type Rundown, isOntimeGroup, SupportedEntry } from 'ontime-types';
-import {
-  getFirstNormal,
-  getLastNormal,
-  getNextGroupNormal,
-  getNextNormal,
-  getPreviousGroupNormal,
-  getPreviousNormal,
-} from 'ontime-utils';
+import { type EntryId, type OntimeEntry, type Rundown, SupportedEntry } from 'ontime-types';
+import { getNextGroupNormal, getNextNormal, getPreviousGroupNormal, getPreviousNormal } from 'ontime-utils';

 import type { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { useEntryCopy } from '../../../common/stores/entryCopyStore';
+import { SelectionMode } from '../useEventSelection';

-type SelectionMode = 'shift' | 'click' | 'ctrl';
 const PAGE_SIZE = 5;

 interface UseRundownCommandsOptions {
  entries: Rundown['entries'];
-  order: Rundown['order'];
+  flatOrder: EntryId[];
  entryActions: ReturnType<typeof useEntryActions>;
-  setSelectedEvents: (selection: { id: EntryId; selectMode: SelectionMode; index: number }) => void;
+  selectEntry: (selection: { id: EntryId; selectMode: SelectionMode; index: number }) => void;
  handleCollapseGroup: (collapsed: boolean, groupId: EntryId) => void;
 }

@@ -28,9 +21,9 @@ interface UseRundownCommandsOptions {
 */
 export function useRundownCommands({
  entries,
-  order,
+  flatOrder,
  entryActions,
-  setSelectedEvents,
+  selectEntry: applySelection,
  handleCollapseGroup,
 }: UseRundownCommandsOptions) {
  const { addEntry, clone, deleteEntry, move, reorderEntry } = entryActions;
@@ -38,13 +31,13 @@ export function useRundownCommands({
  const deleteAtCursor = useCallback(
    (cursor: string | null) => {
      if (!cursor) return;
-      const { entry, index } = getPreviousNormal(entries, order, cursor);
+      const { entry, index } = getPreviousNormal(entries, flatOrder, cursor);
      deleteEntry([cursor]);
      if (entry && index !== null) {
-        setSelectedEvents({ id: entry.id, selectMode: 'click', index });
+        applySelection({ id: entry.id, selectMode: 'click', index });
      }
    },
-    [entries, order, deleteEntry, setSelectedEvents],
+    [entries, flatOrder, deleteEntry, applySelection],
  );

  const insertCopyAtId = useCallback(
@@ -67,7 +60,7 @@ export function useRundownCommands({

      if (entryCopyMode === 'cut') {
        if (!normalisedAtId) {
-          const firstId = order[0];
+          const firstId = flatOrder[0];
          if (!firstId || firstId === entryCopyId) {
            return;
          }
@@ -92,7 +85,7 @@ export function useRundownCommands({
        before: above ? normalisedAtId ?? undefined : undefined,
      });
    },
-    [entries, order, clone, reorderEntry],
+    [entries, flatOrder, clone, reorderEntry],
  );

  /**
@@ -111,70 +104,39 @@ export function useRundownCommands({

  const selectGroup = useCallback(
    (cursor: EntryId | null, direction: 'up' | 'down') => {
-      if (order.length < 1) {
+      if (flatOrder.length < 1) {
        return null;
      }
-      let newCursor = cursor;
-      if (cursor === null) {
-        // there is no cursor, we select the first or last depending on direction
-        const selected = direction === 'up' ? getLastNormal(entries, order) : getFirstNormal(entries, order);
-
-        if (isOntimeGroup(selected)) {
-          setSelectedEvents({ id: selected.id, selectMode: 'click', index: direction === 'up' ? order.length : 0 });
-          return selected.id;
-        }
-        newCursor = selected?.id ?? null;
-      }
-
-      if (newCursor === null) {
-        return null;
-      }
-
-      // otherwise we select the next or previous
      const selected =
        direction === 'up'
-          ? getPreviousGroupNormal(entries, order, newCursor)
-          : getNextGroupNormal(entries, order, newCursor);
+          ? getPreviousGroupNormal(entries, flatOrder, cursor)
+          : getNextGroupNormal(entries, flatOrder, cursor);

-      if (selected.entry !== null && selected.index !== null) {
-        setSelectedEvents({ id: selected.entry.id, selectMode: 'click', index: selected.index });
+      if (selected.entry && selected.index !== null) {
+        applySelection({ id: selected.entry.id, selectMode: 'click', index: selected.index });
        return selected.entry.id;
      }
      return null;
    },
-    [order, entries, setSelectedEvents],
+    [flatOrder, entries, applySelection],
  );

-  /**
-   * TODO: getPreviousNormal and getNextNormal do not work across group boundaries
-   */
  const selectEntry = useCallback(
    (cursor: EntryId | null, direction: 'up' | 'down') => {
-      if (order.length < 1) {
+      if (flatOrder.length < 1) {
        return null;
      }

-      if (cursor === null) {
-        // there is no cursor, we select the first or last depending on direction if it exists
-        const selected = direction === 'up' ? getLastNormal(entries, order) : getFirstNormal(entries, order);
-        if (selected !== null) {
-          setSelectedEvents({ id: selected.id, selectMode: 'click', index: direction === 'up' ? order.length : 0 });
-          return selected.id;
-        }
-        return null;
-      }
-
-      // otherwise we select the next or previous
      const selected =
-        direction === 'up' ? getPreviousNormal(entries, order, cursor) : getNextNormal(entries, order, cursor);
+        direction === 'up' ? getPreviousNormal(entries, flatOrder, cursor) : getNextNormal(entries, flatOrder, cursor);

-      if (selected.entry !== null && selected.index !== null) {
-        setSelectedEvents({ id: selected.entry.id, selectMode: 'click', index: selected.index });
+      if (selected.entry && selected.index !== null) {
+        applySelection({ id: selected.entry.id, selectMode: 'click', index: selected.index });
        return selected.entry.id;
      }
      return null;
    },
-    [order, entries, setSelectedEvents],
+    [flatOrder, entries, applySelection],
  );

  const moveEntry = useCallback(
@@ -204,67 +166,52 @@ export function useRundownCommands({

  const selectEdge = useCallback(
    (direction: 'top' | 'bottom') => {
-      if (order.length < 1) {
+      if (flatOrder.length < 1) {
        return null;
      }

-      const selected = direction === 'top' ? getFirstNormal(entries, order) : getLastNormal(entries, order);
-      if (!selected) {
-        return null;
-      }
+      const index = direction === 'top' ? 0 : flatOrder.length - 1;
+      const selectedId = flatOrder[index];
+      if (!selectedId) return null;

-      const index = order.indexOf(selected.id);
-      if (index === -1) {
-        return null;
-      }
-
-      setSelectedEvents({ id: selected.id, selectMode: 'click', index });
-      return selected.id;
+      applySelection({ id: selectedId, selectMode: 'click', index });
+      return selectedId;
    },
-    [entries, order, setSelectedEvents],
+    [flatOrder, applySelection],
  );

  const selectPage = useCallback(
    (cursor: EntryId | null, direction: 'up' | 'down') => {
-      if (order.length < 1) {
+      if (flatOrder.length < 1) {
        return null;
      }

-      if (cursor === null) {
-        const selected = direction === 'down' ? getFirstNormal(entries, order) : getLastNormal(entries, order);
-        if (!selected) {
-          return null;
-        }
-        const index = order.indexOf(selected.id);
-        if (index !== -1) {
-          setSelectedEvents({ id: selected.id, selectMode: 'click', index });
-          return selected.id;
-        }
-        return null;
+      let currentIndex = cursor ? flatOrder.indexOf(cursor) : -1;
+      if (currentIndex === -1) {
+        currentIndex = direction === 'down' ? -1 : flatOrder.length;
      }

-      let nextCursor = cursor;
-      let target: { entry: OntimeEntry | null; index: number | null } | null = null;
-
+      let targetIndex = currentIndex;
+      let lastValidIndex: number | null = null;
      for (let step = 0; step < PAGE_SIZE; step += 1) {
-        const next =
-          direction === 'down'
-            ? getNextNormal(entries, order, nextCursor)
-            : getPreviousNormal(entries, order, nextCursor);
-        if (next.entry === null || next.index === null) {
+        targetIndex = direction === 'down' ? targetIndex + 1 : targetIndex - 1;
+        if (targetIndex < 0 || targetIndex >= flatOrder.length) {
          break;
        }
-        target = next;
-        nextCursor = next.entry.id;
+        lastValidIndex = targetIndex;
      }

-      if (target?.entry && target.index !== null) {
-        setSelectedEvents({ id: target.entry.id, selectMode: 'click', index: target.index });
-        return target.entry.id;
+      if (lastValidIndex === null) {
+        return null;
      }
-      return null;
+
+      const selectedId = flatOrder[lastValidIndex];
+      if (!selectedId) return null;
+
+      applySelection({ id: selectedId, selectMode: 'click', index: lastValidIndex });
+      return selectedId;
    },
-    [entries, order, setSelectedEvents],
+    [flatOrder, applySelection],
  );

  return {
@@ -11,7 +11,7 @@ interface UseRundownDndOptions {
  sortableData: EntryId[];
  setSortableData: Dispatch<SetStateAction<EntryId[]>>;
  getIsCollapsed: (groupId: EntryId) => boolean;
-  handleCollapseGroup: (collapsed: boolean, groupId: EntryId) => void;
+  handleCollapseGroup: (collapsed: boolean, groupId: EntryId | undefined) => void;
  entryActions: ReturnType<typeof useEntryActions>;
 }

@@ -132,13 +132,11 @@ export function useRundownDnd({
      if (event.over?.data.current?.type !== SupportedEntry.Group) {
        return;
      }
-      const groupId = event.over?.id as EntryId;
-      const isCollapsed = getIsCollapsed(groupId);
-      if (isCollapsed) {
-        handleCollapseGroup(false, groupId);
-      }
+
+      const groupId = event.over?.id as EntryId | undefined;
+      handleCollapseGroup(false, groupId);
    },
-    [getIsCollapsed, handleCollapseGroup],
+    [handleCollapseGroup],
  );

  return useMemo(
@@ -103,8 +103,8 @@ export default function RundownEvent({

  const isSelected = useEventSelection((state) => state.selectedEvents.has(eventId));
  const unselect = useEventSelection((state) => state.unselect);
-  const setSelectedEvents = useEventSelection((state) => state.setSelectedEvents);
  const clearSelectedEvents = useEventSelection((state) => state.clearSelectedEvents);
+  const selectEntry = useEventSelection((state) => state.setSelectedEvents);

  const selectedEvents = useEventSelection((state) => state.selectedEvents);
  const entryCopyId = useEntryCopy((state) => state.entryCopyId);
@@ -265,7 +265,7 @@ export default function RundownEvent({
    // UI indexes are 1 based
    const index = eventIndex - 1;
    const editMode = getSelectionMode(event);
-    setSelectedEvents({ id: eventId, index, selectMode: editMode });
+    selectEntry({ id: eventId, index, selectMode: editMode });
  };

  const isPlaying = playback ? isPlaybackActive(playback) : false;
@@ -10,14 +10,14 @@ import {
  IoTime,
 } from 'react-icons/io5';
 import { LuArrowDownToLine } from 'react-icons/lu';
-import { useSessionStorage } from '@mantine/hooks';
 import { EndAction, Playback, TimerType, TimeStrategy } from 'ontime-types';

 import Tooltip from '../../../common/components/tooltip/Tooltip';
 import { cx } from '../../../common/utils/styleUtils';
-import { AppMode, sessionKeys } from '../../../ontimeConfig';
+import { AppMode } from '../../../ontimeConfig';
 import TitleEditor from '../common/TitleEditor';
 import TimeInputFlow from '../time-input-flow/TimeInputFlow';
+import { useEditorFollowMode } from '../useEditorFollowMode';

 import RundownEventChip from './composite/RundownEventChip';
 import EventBlockPlayback from './composite/RundownEventPlayback';
@@ -76,10 +76,7 @@ function RundownEventInner({
  isLinkedToLoaded,
  hasTriggers,
 }: RundownEventInnerProps) {
-  const [editorMode] = useSessionStorage({
-    key: sessionKeys.editorMode,
-    defaultValue: AppMode.Edit,
-  });
+  const { editorMode } = useEditorFollowMode();

  const eventIsPlaying = playback === Playback.Play;
  const eventIsPaused = playback === Playback.Pause;
@@ -40,7 +40,7 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
  const handleRef = useRef<null | HTMLSpanElement>(null);
  const { clone, ungroup, deleteEntry } = useEntryActionsContext();

-  const setSingleEntrySelection = useEventSelection((state) => state.setSingleEntrySelection);
+  const selectSingleEntry = useEventSelection((state) => state.setSingleEntrySelection);
  const selectedEvents = useEventSelection((state) => state.selectedEvents);
  const entryCopyId = useEntryCopy((state) => state.entryCopyId);

@@ -97,7 +97,7 @@ export default function RundownGroup({ data, hasCursor, collapsed, onCollapse }:
    }

    // UI indexes are 1 based
-    setSingleEntrySelection({ id: data.id });
+    selectSingleEntry({ id: data.id });
  };

  const binderColours = data.colour && getAccessibleColour(data.colour);
@@ -2,6 +2,7 @@
  padding-inline: 1rem 2rem;
  display: flex;
  align-items: center;
+  gap: 1rem;

  :is([data-target='small-device']) & {
    padding-inline: 0;
@@ -57,52 +58,17 @@
  }
 }

+.toggleTooltipTrigger {
+  display: flex;
+}
+
 .apart {
  margin-left: auto;
 }

-.separator {
-  margin-inline: 1rem;
-}
-
 .column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: start;
 }
-
-.sectionTitle {
-  text-transform: uppercase;
-  font-weight: 600;
-  font-size: 0.75rem;
-  color: $gray-400; // Guessing color based on cuesheet
-}
-
-.popoverContent {
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    min-width: 200px;
-}
-
-.column {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  align-self: start;
-}
-
-.sectionTitle {
-  text-transform: uppercase;
-  font-weight: 600;
-  font-size: 0.75rem;
-  color: $gray-400; // Guessing color
-}
-
-.popoverContent {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
@@ -2,25 +2,56 @@ import { memo } from 'react';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { Toolbar } from '@base-ui/react/toolbar';
-import { useSessionStorage } from '@mantine/hooks';
+import { OffsetMode } from 'ontime-types';

-import * as Editor from '../../../common/components/editor-utils/EditorUtils';
-import { AppMode, sessionKeys } from '../../../ontimeConfig';
-import { RundownViewMode } from '../rundownViewMode';
+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 { RundownViewMode } from '../rundown.options';
+import { useEditorFollowMode } from '../useEditorFollowMode';

 import RundownMenu from './RundownMenu';
-import RundownSettings from './RundownSettings';

 import style from './RundownHeader.module.scss';

 interface RundownHeaderProps {
+  isExtracted?: boolean;
  viewMode: RundownViewMode;
  setViewMode: (mode: RundownViewMode) => void;
 }

+interface HeaderControlsConfig {
+  showRunEditToggle: boolean;
+  showOffsetToggle: boolean;
+  showOverflowMenu: boolean;
+}
+
+export const HEADER_CONTROLS_CONFIG: Record<EditorLayoutMode, HeaderControlsConfig> = {
+  [EditorLayoutMode.CONTROL]: {
+    showRunEditToggle: true,
+    showOffsetToggle: true,
+    showOverflowMenu: true,
+  },
+  [EditorLayoutMode.PLANNING]: {
+    showRunEditToggle: false,
+    showOffsetToggle: false,
+    showOverflowMenu: true,
+  },
+  [EditorLayoutMode.TRACKING]: {
+    showRunEditToggle: false,
+    showOffsetToggle: true,
+    showOverflowMenu: false,
+  },
+} as const;
+
 export default memo(RundownHeader);
-function RundownHeader({ viewMode, setViewMode }: RundownHeaderProps) {
-  const [editorMode, setEditorMode] = useSessionStorage({ key: sessionKeys.editorMode, defaultValue: AppMode.Edit });
+function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProps) {
+  const { editorMode, setEditorMode } = useEditorFollowMode();
+  const offsetMode = useOffsetMode();
+  const { layoutMode } = useEditorLayout();
+
+  const { showRunEditToggle, showOffsetToggle, showOverflowMenu } = HEADER_CONTROLS_CONFIG[layoutMode];

  const toggleAppMode = (mode: AppMode[]) => {
    // we need to stop user from deselecting a mode
@@ -29,22 +60,70 @@ function RundownHeader({ viewMode, setViewMode }: RundownHeaderProps) {
    setEditorMode(newValue);
  };

+  const toggleViewMode = (mode: RundownViewMode[]) => {
+    const newValue = mode.at(0);
+    if (!newValue) return;
+    setViewMode(newValue);
+  };
+
+  const toggleOffsetMode = (mode: OffsetMode[]) => {
+    const newValue = mode.at(0);
+    if (!newValue) return;
+    setOffsetMode(newValue);
+  };
+
  return (
    <Toolbar.Root className={style.header}>
-      <ToggleGroup value={[editorMode]} onValueChange={toggleAppMode} className={style.group}>
-        <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
-          Run
-        </Toolbar.Button>
-        <Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton}>
-          Edit
-        </Toolbar.Button>
+      {showRunEditToggle && (
+        <ToggleGroup value={[editorMode]} onValueChange={toggleAppMode} className={style.group}>
+          <Tooltip
+            text='Live playback view with auto-follow'
+            render={<Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton} />}
+          >
+            Run
+          </Tooltip>
+          <Tooltip
+            text='Manual editing without playback automation'
+            render={<Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton} />}
+          >
+            Edit
+          </Tooltip>
+        </ToggleGroup>
+      )}
+
+      <ToggleGroup value={[viewMode]} onValueChange={toggleViewMode} className={style.group}>
+        <Tooltip
+          text='View rundown in list mode'
+          render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.List} className={style.radioButton} />}
+        >
+          List
+        </Tooltip>
+        <Tooltip
+          text='View rundown in table mode'
+          render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.Table} className={style.radioButton} />}
+        >
+          Table
+        </Tooltip>
      </ToggleGroup>

-      <Editor.Separator className={style.separator} />
+      {showOffsetToggle && (
+        <ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.group}>
+          <Tooltip
+            text='Offsets use fixed clock time'
+            render={<Toolbar.Button render={<Toggle />} value={OffsetMode.Absolute} className={style.radioButton} />}
+          >
+            Absolute
+          </Tooltip>
+          <Tooltip
+            text='Offsets follow the rundown relative start'
+            render={<Toolbar.Button render={<Toggle />} value={OffsetMode.Relative} className={style.radioButton} />}
+          >
+            Relative
+          </Tooltip>
+        </ToggleGroup>
+      )}

-      <RundownSettings viewMode={viewMode} setViewMode={setViewMode} />
-
-      <RundownMenu />
+      {showOverflowMenu && <RundownMenu allowNavigation={!isExtracted} />}
    </Toolbar.Root>
  );
 }
@@ -2,23 +2,21 @@ import { memo } from 'react';
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { Toolbar } from '@base-ui/react/toolbar';
-import { useSessionStorage } from '@mantine/hooks';
-import { OffsetMode } from 'ontime-types';

-import * as Editor from '../../../common/components/editor-utils/EditorUtils';
-import { setOffsetMode, useOffsetMode } from '../../../common/hooks/useSocket';
-import { AppMode, sessionKeys } from '../../../ontimeConfig';
+import { AppMode } from '../../../ontimeConfig';
+import { RundownViewMode } from '../rundown.options';
+import { useEditorFollowMode } from '../useEditorFollowMode';

 import style from './RundownHeader.module.scss';

-export default memo(RundownHeader);
-function RundownHeader() {
-  const [editorMode, setEditorMode] = useSessionStorage<AppMode>({
-    key: sessionKeys.editorMode,
-    defaultValue: AppMode.Edit,
-  });
+interface RundownHeaderMobileProps {
+  viewMode: RundownViewMode;
+  setViewMode: (mode: RundownViewMode) => void;
+}

-  const offsetMode = useOffsetMode();
+export default memo(RundownHeaderMobile);
+function RundownHeaderMobile({ viewMode, setViewMode }: RundownHeaderMobileProps) {
+  const { editorMode, setEditorMode } = useEditorFollowMode();

  const toggleAppMode = (mode: AppMode[]) => {
    // we need to stop user from deselecting a mode
@@ -27,11 +25,10 @@ function RundownHeader() {
    setEditorMode(newValue);
  };

-  const toggleOffsetMode = (mode: OffsetMode[]) => {
-    // we need to stop user from deselecting a mode
+  const toggleViewMode = (mode: RundownViewMode[]) => {
    const newValue = mode.at(0);
    if (!newValue) return;
-    setOffsetMode(newValue);
+    setViewMode(newValue);
  };

  return (
@@ -40,19 +37,18 @@ function RundownHeader() {
        <Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton}>
          Run
        </Toolbar.Button>
+
        <Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton}>
          Edit
        </Toolbar.Button>
      </ToggleGroup>

-      <Editor.Separator className={style.separator} />
-
-      <ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.group}>
-        <Toolbar.Button render={<Toggle />} value={OffsetMode.Absolute} className={style.radioButton}>
-          Absolute
+      <ToggleGroup value={[viewMode]} onValueChange={toggleViewMode} className={style.group}>
+        <Toolbar.Button render={<Toggle />} value={RundownViewMode.List} className={style.radioButton}>
+          List
        </Toolbar.Button>
-        <Toolbar.Button render={<Toggle />} value={OffsetMode.Relative} className={style.radioButton}>
-          Relative
+        <Toolbar.Button render={<Toggle />} value={RundownViewMode.Table} className={style.radioButton}>
+          Table
        </Toolbar.Button>
      </ToggleGroup>
    </Toolbar.Root>
@@ -13,8 +13,12 @@ import { useEventSelection } from '../useEventSelection';

 import style from './RundownHeader.module.scss';

+interface RundownMenuProps {
+  allowNavigation?: boolean;
+}
+
 export default memo(RundownMenu);
-function RundownMenu() {
+function RundownMenu({ allowNavigation }: RundownMenuProps) {
  const [isOpen, handlers] = useDisclosure();

  const clearSelectedEvents = useEventSelection((state) => state.clearSelectedEvents);
@@ -38,6 +42,7 @@ function RundownMenu() {
              label: 'Manage Rundowns...',
              icon: IoList,
              onClick: () => setLocation('manage'),
+              disabled: !allowNavigation,
            },
            { type: 'divider' },
            {
@@ -1,33 +0,0 @@
-import { memo } from 'react';
-import { Toggle } from '@base-ui/react/toggle';
-import { ToggleGroup } from '@base-ui/react/toggle-group';
-import { Toolbar } from '@base-ui/react/toolbar';
-
-import { RundownViewMode } from '../rundownViewMode';
-
-import style from './RundownHeader.module.scss';
-
-interface RundownSettingsProps {
-  viewMode: RundownViewMode;
-  setViewMode: (mode: RundownViewMode) => void;
-}
-
-export default memo(RundownSettings);
-function RundownSettings({ viewMode, setViewMode }: RundownSettingsProps) {
-  const toggleViewMode = (mode: RundownViewMode[]) => {
-    const newValue = mode.at(0);
-    if (!newValue) return;
-    setViewMode(newValue);
-  };
-
-  return (
-    <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>
-  );
-}
@@ -30,7 +30,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
  const { updateEntry, deleteEntry } = useEntryActionsContext();

  const selectedEvents = useEventSelection((state) => state.selectedEvents);
-  const setSingleEntrySelection = useEventSelection((state) => state.setSingleEntrySelection);
+  const selectSingleEntry = useEventSelection((state) => state.setSingleEntrySelection);
  const entryCopyId = useEntryCopy((state) => state.entryCopyId);

  const [onContextMenu] = useContextMenu<HTMLDivElement>(() => [
@@ -69,7 +69,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
    }

    // UI indexes are 1 based
-    setSingleEntrySelection({ id: entryId });
+    selectSingleEntry({ id: entryId });
  };

  const handleUpdate = (field: 'cue' | 'title', value: string) => {
@@ -1,22 +1,30 @@
-import { memo, useMemo } from 'react';
-import { useSessionStorage } from '@mantine/hooks';
+import { memo, useEffect, useMemo } from 'react';

 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 { useCuesheetPermissions } from '../../../views/cuesheet/useTablePermissions';
+import { useEditorFollowMode } from '../useEditorFollowMode';

 import { makeRundownColumns } from './makeRundownColumns';

 export default memo(RundownTable);
 function RundownTable() {
  const { data: customFields, status: customFieldStatus } = useCustomFields();
+  const setPermissions = useCuesheetPermissions((state) => state.setPermissions);
+  const { editorMode } = useEditorFollowMode();

-  const [editorMode] = useSessionStorage({
-    key: sessionKeys.editorMode,
-    defaultValue: AppMode.Edit,
-  });
+  // Editor always has full permissions
+  useEffect(() => {
+    setPermissions({
+      canChangeMode: true,
+      canCreateEntries: true,
+      canEditEntries: true,
+      canFlag: true,
+      canShare: true,
+    });
+  }, [setPermissions]);

  const columns = useMemo(() => makeRundownColumns(customFields), [customFields]);

@@ -58,3 +58,8 @@ export function makeRundownCustomColumns(customFields: CustomFields) {
    };
  });
 }
+
+export enum RundownViewMode {
+  List = 'list',
+  Table = 'table',
+}
@@ -1,4 +1,4 @@
-import { EntryId, isOntimeEvent, isOntimeGroup, RundownEntries, SupportedEntry } from 'ontime-types';
+import { EntryId, isOntimeGroup, RundownEntries, SupportedEntry } from 'ontime-types';

 /**
 * Creates a sortable list of entries
@@ -1,5 +0,0 @@
-export const RUNDOWN_VIEW_MODES = ['list', 'table'] as const;
-export type RundownViewMode = (typeof RUNDOWN_VIEW_MODES)[number];
-
-export const DEFAULT_RUNDOWN_VIEW_MODE: RundownViewMode = 'list';
-export const RUNDOWN_VIEW_MODE_STORAGE_KEY = 'rundown-view-mode';
@@ -0,0 +1,47 @@
+import { useCallback, useMemo } from 'react';
+import { useSessionStorage } from '@mantine/hooks';
+import { EntryId } from 'ontime-types';
+
+/**
+ * Keeps track of which groups are collapsed
+ * This information is saved in session storage as an array (serializable)
+ * but provides Set-like operations for fast lookups
+ */
+export function useCollapsedGroups(rundownId: string) {
+  const [collapsedGroups, setCollapsedGroups] = useSessionStorage<EntryId[]>({
+    key: `rundown.${rundownId}-editor-collapsed-groups`,
+    defaultValue: [],
+  });
+
+  const collapsedGroupSet = useMemo(() => new Set(collapsedGroups), [collapsedGroups]);
+
+  const getIsCollapsed = useCallback(
+    (groupId: EntryId): boolean => {
+      return collapsedGroupSet.has(groupId);
+    },
+    [collapsedGroupSet],
+  );
+
+  const collapseGroup = useCallback(
+    (groupId: EntryId | null | undefined) => {
+      if (!groupId) return;
+      setCollapsedGroups((prev) => {
+        if (prev.includes(groupId)) {
+          return prev;
+        }
+        return [...prev, groupId];
+      });
+    },
+    [setCollapsedGroups],
+  );
+
+  const expandGroup = useCallback(
+    (groupId: EntryId | null | undefined) => {
+      if (!groupId) return;
+      setCollapsedGroups((prev) => prev.filter((id) => id !== groupId));
+    },
+    [setCollapsedGroups],
+  );
+
+  return { getIsCollapsed, collapseGroup, expandGroup };
+}
@@ -0,0 +1,41 @@
+import { useSessionStorage } from '@mantine/hooks';
+
+import { AppMode, sessionKeys } from '../../ontimeConfig';
+import { EditorLayoutMode, useEditorLayout } from '../../views/editor/useEditorLayout';
+
+/**
+ * Manages the editor mode (Edit/Run) derived from layout mode
+ *
+ * Editor mode is automatically determined by the layout:
+ * - PLANNING: Always Edit mode (follows user selection)
+ * - TRACKING: Always Run mode (follows current event)
+ * - CONTROL: User preference (defaults to Run mode), persisted in session storage
+ *
+ * Edit: Manual editing, follows user selection
+ * Run: Live playback view, auto-follows current event
+ */
+export function useEditorFollowMode() {
+  const { layoutMode } = useEditorLayout();
+
+  // Only used for CONTROL layout - stores user preference
+  const [controlModePreference, setControlModePreference] = useSessionStorage<AppMode>({
+    key: sessionKeys.editorMode,
+    defaultValue: AppMode.Run,
+  });
+
+  // Derive editor mode from layout mode
+  const editorMode = (() => {
+    if (layoutMode === EditorLayoutMode.CONTROL) return controlModePreference;
+    if (layoutMode === EditorLayoutMode.PLANNING) return AppMode.Edit;
+    return AppMode.Run;
+  })();
+
+  // setEditorMode only affects CONTROL layout
+  const setEditorMode = (mode: AppMode) => {
+    if (layoutMode === EditorLayoutMode.CONTROL) {
+      setControlModePreference(mode);
+    }
+  };
+
+  return { editorMode, setEditorMode };
+}
@@ -6,7 +6,7 @@ import { RUNDOWN } from '../../common/api/constants';
 import { ontimeQueryClient } from '../../common/queryClient';
 import { isMacOS } from '../../common/utils/deviceUtils';

-type SelectionMode = 'shift' | 'click' | 'ctrl';
+export type SelectionMode = 'shift' | 'click' | 'ctrl';

 interface EventSelectionStore {
  selectedEvents: Set<EntryId>;
@@ -14,23 +14,25 @@ interface EventSelectionStore {
  cursor: EntryId | null;
  entryMode: 'event' | 'single' | null;
  scrollHandler: ((id: EntryId) => void) | null;
-  scrollHandlerSource: string | null;
  setSingleEntrySelection: (selectionArgs: { id: EntryId }) => void;
  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
  clearSelectedEvents: () => void;
  clearMultiSelect: () => void;
  unselect: (id: EntryId) => void;
-  setScrollHandler: (source: string, handler: ((id: EntryId) => void) | null) => void;
+  setScrollHandler: (handler: ((id: EntryId) => void) | null) => void;
  scrollToEntry: (id: EntryId) => void;
 }

+/**
+ * Keeps track of the selected entries and selection mode
+ * Provides methods to update the selection based on user interactions
+ */
 export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
  selectedEvents: new Set(),
  anchoredIndex: null,
  cursor: null,
  entryMode: null,
  scrollHandler: null,
-  scrollHandlerSource: null,
  setSingleEntrySelection: ({ id }) => {
    set({ selectedEvents: new Set([id]), anchoredIndex: null, cursor: id, entryMode: 'single' });
  },
@@ -123,16 +125,9 @@ export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
      entryMode: selectedEvents.size === 0 ? null : entryMode,
    });
  },
-  setScrollHandler: (source, handler) =>
-    set((state) => {
-      if (handler) {
-        return { scrollHandler: handler, scrollHandlerSource: source };
-      }
-      if (state.scrollHandlerSource !== source) {
-        return state;
-      }
-      return { scrollHandler: null, scrollHandlerSource: null };
-    }),
+  // Sets the scroll handler for programmatic scrolling to entries
+  setScrollHandler: (handler) => set({ scrollHandler: handler }),
+  // Scrolls to the specified entry using the registered scroll handler
  scrollToEntry: (id: EntryId) => {
    const handler = get().scrollHandler;
    if (handler) {
@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import { EntryId, MaybeString } from 'ontime-types';
+
+import { useCollapsedGroups } from './useCollapsedGroups';
+import { useEventSelection } from './useEventSelection';
+
+type SelectAndRevealOptions = {
+  id: EntryId;
+  index: number;
+  parent?: MaybeString;
+};
+
+export function useSelectAndRevealEntry(rundownId: string) {
+  const { expandGroup } = useCollapsedGroups(rundownId);
+  const selectEntry = useEventSelection((state) => state.setSelectedEvents);
+  const scrollToEntry = useEventSelection((state) => state.scrollToEntry);
+
+  return useCallback(
+    ({ id, index, parent }: SelectAndRevealOptions) => {
+      expandGroup(parent);
+      selectEntry({ id, index, selectMode: 'click' });
+      // Wait one frame so collapsed-group expansion is reflected in rendered/visible entries before scrolling.
+      requestAnimationFrame(() => {
+        scrollToEntry(id);
+      });
+    },
+    [expandGroup, scrollToEntry, selectEntry],
+  );
+}