feat: create group from entry selection

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

@@ -19,18 +19,17 @@ import EventBlock from './event-block/EventBlock';
 import { useEventSelection } from './useEventSelection';
 
 export type EventItemActions =
-  | 'set-cursor'
   | 'event'
   | 'event-before'
   | 'delay'
   | 'delay-before'
   | 'block'
   | 'block-before'
+  | 'swap'
   | 'delete'
   | 'clone'
-  | 'update'
-  | 'swap'
-  | 'clear-report';
+  | 'group'
+  | 'update';
 
 interface RundownEntryProps {
   type: SupportedEntry;
@@ -66,7 +65,7 @@ export default function RundownEntry(props: RundownEntryProps) {
     isLinkedToLoaded,
   } = props;
   const { emitError } = useEmitLog();
-  const { addEntry, updateEntry, batchUpdateEvents, deleteEntry, swapEvents } = useEntryActions();
+  const { addEntry, updateEntry, batchUpdateEvents, deleteEntry, groupEntries, swapEvents } = useEntryActions();
   const { selectedEvents, unselect, clearSelectedEvents } = useEventSelection();
 
   const removeOpenEvent = useCallback(() => {
@@ -129,6 +128,13 @@ export default function RundownEntry(props: RundownEntryProps) {
         addEntry(newEvent, { after: data.id });
         break;
       }
+      case 'group': {
+        if (selectedEvents.size > 1) {
+          clearMultiSelection();
+          return groupEntries(Array.from(selectedEvents));
+        }
+        break;
+      }
       case 'update': {
         // Handles and filters update requests
         const { field, value } = payload as FieldValue;

apps/client/src/features/rundown/event-block/EventBlock.tsx

@@ -2,6 +2,7 @@ import { MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import {
   IoAdd,
   IoDuplicateOutline,
+  IoFolder,
   IoLink,
   IoPeople,
   IoPeopleOutline,
@@ -26,7 +27,7 @@ import RundownIndicators from './RundownIndicators';
 import style from './EventBlock.module.scss';
 
 interface EventBlockProps {
-  eventId: string;
+  eventId: EntryId;
   cue: string;
   timeStart: number;
   timeEnd: number;
@@ -144,6 +145,7 @@ export default function EventBlock(props: EventBlockProps) {
                 value: false,
               }),
           },
+          { withDivider: true, label: 'Group', icon: IoFolder, onClick: () => actionHandler('group') },
           { withDivider: true, label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
         ]
       : [

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

@@ -9,13 +9,13 @@ import { isMacOS } from '../../common/utils/deviceUtils';
 type SelectionMode = 'shift' | 'click' | 'ctrl';
 
 interface EventSelectionStore {
-  selectedEvents: Set<string>;
+  selectedEvents: Set<EntryId>;
   anchoredIndex: MaybeNumber;
   cursor: MaybeString;
-  setSelectedEvents: (selectionArgs: { id: string; index: number; selectMode: SelectionMode }) => void;
+  setSelectedEvents: (selectionArgs: { id: EntryId; index: number; selectMode: SelectionMode }) => void;
   clearSelectedEvents: () => void;
   clearMultiSelect: () => void;
-  unselect: (id: string) => void;
+  unselect: (id: EntryId) => void;
 }
 
 export const useEventSelection = create<EventSelectionStore>()((set, get) => ({