feat: editor layout

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

@@ -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)) {

apps/client/src/features/rundown/entry-editor/EntryEditor.module.scss

@@ -1,6 +1,6 @@
 .cuesheetEditor,
 .rundownEditor {
-  max-height: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow-x: auto;

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

@@ -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) {