Alpha 5 (#1741)

* refactor: align header columns

* refactor: improve scrollbar visibility

* refactor: center align table elements

* refactor: make param elements stateful

* fix: issue with collapsed elements not loosing value

* fix: prevent search params containing multiple alias references

* fix: the issue where a file disappears if it is both migrated and recovered in the same load operation (#1744)

* refactor: disable group action for elements in groups

* refactor: move context menu items into the event element (#1747)

* feat: sheet import new features for v4 (#1730)

* import milestone

* fixup! import milestone

* test: milestone import

* add entries to group

stop on new group or on group-end type

* fixup! add entries to group

* cleanup

* add event target duration

* link start if undefined

* add skip import type

* extract some to the excel paresing functions

* tweaks to presentation

* move file

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* fix: notify runtimeStore of events bieng groupd

* fix: improve authentication and stage detection in demo

* chore: ship logo with project

* fix: client is referenced by name

* fix: prevent reflow in event editor

* fix: stale render on selected event due to ref mismatch

* Create/Load/Delete multiple rundowns (#1696)

* refactor: restore last loaded rundown

* refactor: initialise rundown in ProjectService

* feat: allow switching rundowns

ensure on coordination between the db object and the working object

server provide list of rundowns

implement switch in the UI

implement delete

implement new rundown button

* fix: render order for floating button

* refactor: appropriate names to service

* refactor: rundown endpoints

* refactor: save last loaded rundown ID

* refactor: rundown management UI

* refactor: emit refetch all on project load

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* feat: recover single event subscription

* fixup! feat: sheet import new features for v4 (#1730)

* fix: prevent dropping a group inside another

* fixup! refactor: move context menu items into the event element (#1747)

* fix: prevent stale references to custom fields

* fix: propagate updates to all rundowns

* refactor: client rundown metadata (#1728)

* generate metadata in the hook

* move test

* ensure there is always a last element

* use for-loop

* update metadata in useEfect

* fully extract metadata generation

* use direct assignment

* cleanup

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

* refactor: small imporvement and tests for coerce functions (#1752)

* refactor: small imporvement and tests for coerce functions

add test `coerceString`

add test `coerceBoolean`

add test `coerceColour`

* remove old todo

* fix: consistent quick add behaviour

* refactor: create flat rundown with metadata

* fix: show add buttons on top

* feat: allow editing milestones

* refactor: style tweaks to rundown elements

refactor: milestones are full width

refactor: cuesheet header alignment

fix: editor styling in cuesheet

* refactor: virtualise table

* refactor: improve overscan (#1758)

* bump version to 4.0.0-alpha.5

---------

Co-authored-by: Alex Christoffer Rasmussen <ac@omnivox.dk>

apps/client/src/features/rundown/rundown-event/RundownEvent.tsx

@@ -12,12 +12,12 @@ import {
 import { TbFlagFilled } from 'react-icons/tb';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { EndAction, EntryId, OntimeEvent, Playback, TimerType, TimeStrategy } from 'ontime-types';
+import { EndAction, EntryId, Playback, TimerType, TimeStrategy } from 'ontime-types';
 import { isPlaybackActive } from 'ontime-utils';
 
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
+import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
-import type { EventItemActions } from '../RundownEntry';
 import { useEventIdSwapping } from '../useEventIdSwapping';
 import { getSelectionMode, useEventSelection } from '../useEventSelection';
 
@@ -56,15 +56,7 @@ interface RundownEventProps {
   dayOffset: number;
   totalGap: number;
   isLinkedToLoaded: boolean;
-  actionHandler: (
-    action: EventItemActions,
-    payload?:
-      | number
-      | {
-          field: keyof Omit<OntimeEvent, 'duration'> | 'durationOverride';
-          value: unknown;
-        },
-  ) => void;
+  createCloneEvent: () => void;
   hasTriggers: boolean;
 }
 
@@ -98,11 +90,13 @@ export default function RundownEvent({
   dayOffset,
   totalGap,
   isLinkedToLoaded,
-  actionHandler,
   hasTriggers,
+  createCloneEvent,
 }: RundownEventProps) {
   const { selectedEventId, setSelectedEventId, clearSelectedEventId } = useEventIdSwapping();
-  const { selectedEvents, setSelectedEvents } = useEventSelection();
+  const { updateEntry, batchUpdateEvents, deleteEntry, groupEntries, swapEvents } = useEntryActions();
+
+  const { selectedEvents, unselect, setSelectedEvents, clearSelectedEvents } = useEventSelection();
   const handleRef = useRef<null | HTMLSpanElement>(null);
   const [isVisible, setIsVisible] = useState(false);
 
@@ -113,37 +107,48 @@ export default function RundownEvent({
             type: 'item',
             label: 'Link to previous',
             icon: IoLink,
-            onClick: () =>
-              actionHandler('update', {
-                field: 'linkStart',
-                value: 'true',
-              }),
+            onClick: () => {
+              batchUpdateEvents({ linkStart: true }, Array.from(selectedEvents));
+            },
           },
           {
             type: 'item',
             label: 'Unlink from previous',
             icon: IoUnlink,
-            onClick: () =>
-              actionHandler('update', {
-                field: 'linkStart',
-                value: null,
-              }),
+            onClick: () => {
+              batchUpdateEvents({ linkStart: false }, Array.from(selectedEvents));
+            },
           },
           { type: 'divider' },
-          { type: 'item', label: 'Group', icon: IoFolder, onClick: () => actionHandler('make-group') },
+          {
+            type: 'item',
+            label: 'Group',
+            icon: IoFolder,
+            onClick: () => {
+              groupEntries(Array.from(selectedEvents));
+              clearSelectedEvents();
+            },
+            disabled: parent !== null,
+          },
           { type: 'divider' },
-          { type: 'item', label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
+          {
+            type: 'item',
+            label: 'Delete',
+            icon: IoTrash,
+            onClick: () => {
+              clearSelectedEvents();
+              deleteEntry(Array.from(selectedEvents));
+            },
+          },
         ]
       : [
           {
             type: 'item',
             label: flag ? 'Remove flag' : 'Add flag',
             icon: TbFlagFilled,
-            onClick: () =>
-              actionHandler('update', {
-                field: 'flag',
-                value: !flag,
-              }),
+            onClick: () => {
+              updateEntry({ id: eventId, flag: !flag });
+            },
           },
           { type: 'divider' },
           {
@@ -157,7 +162,8 @@ export default function RundownEvent({
             label: `Swap this event with ${selectedEventId ?? ''}`,
             icon: IoSwapVertical,
             onClick: () => {
-              actionHandler('swap', { field: 'id', value: selectedEventId });
+              if (!selectedEventId) return;
+              swapEvents(selectedEventId, eventId);
               clearSelectedEventId();
             },
             disabled: selectedEventId == null || selectedEventId === eventId,
@@ -166,10 +172,18 @@ export default function RundownEvent({
             type: 'item',
             label: 'Clone',
             icon: IoDuplicateOutline,
-            onClick: () => actionHandler('clone'),
+            onClick: createCloneEvent,
           },
           { type: 'divider' },
-          { type: 'item', label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
+          {
+            type: 'item',
+            label: 'Delete',
+            icon: IoTrash,
+            onClick: () => {
+              deleteEntry([eventId]);
+              unselect(eventId);
+            },
+          },
         ],
   );