refactor: delete several events

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

@@ -45,7 +45,7 @@ export default function Rundown({ data }: RundownProps) {
     (cursor: string | null) => {
       if (!cursor) return;
       const previous = getPreviousNormal(rundown, order, cursor).entry?.id ?? null;
-      deleteEvent(cursor);
+      deleteEvent([cursor]);
       setCursor(previous);
     },
     [deleteEvent, order, rundown, setCursor],

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

@@ -58,18 +58,20 @@ export default function RundownEntry(props: RundownEntryProps) {
   const { addEvent, updateEvent, batchUpdateEvents, deleteEvent, swapEvents } = useEventAction();
   const cursor = useAppMode((state) => state.cursor);
   const setCursor = useAppMode((state) => state.setCursor);
-  const { selectedEvents, clearSelectedEvents } = useEventSelection();
+  const { selectedEvents, unselect, clearSelectedEvents } = useEventSelection();
 
   const removeOpenEvent = useCallback(() => {
-    if (selectedEvents.has(data.id)) {
-      clearSelectedEvents();
-    }
-
+    unselect(data.id);
     // clear cursor if we are deleting the event that is currently selected
     if (cursor === data.id) {
       setCursor(null);
     }
-  }, [selectedEvents, data.id, cursor, clearSelectedEvents, setCursor]);
+  }, [unselect, data.id, cursor, setCursor]);
+
+  const clearMultiSelection = useCallback(() => {
+    clearSelectedEvents();
+    setCursor(null);
+  }, [clearSelectedEvents, setCursor]);
 
   // Create / delete new events
   type FieldValue = {
@@ -111,10 +113,12 @@ export default function RundownEntry(props: RundownEntryProps) {
         return swapEvents({ from: value as string, to: data.id });
       }
       case 'delete': {
-        if (selectedEvents.has(data.id)) {
-          removeOpenEvent();
+        if (selectedEvents.size > 1) {
+          clearMultiSelection();
+          return deleteEvent(Array.from(selectedEvents));
         }
-        return deleteEvent(data.id);
+        removeOpenEvent();
+        return deleteEvent([data.id]);
       }
       case 'clone': {
         const newEvent = cloneEvent(data as OntimeEvent, data.id);
@@ -134,7 +138,7 @@ export default function RundownEntry(props: RundownEntryProps) {
         if (selectedEvents.size > 1) {
           const changes: Partial<OntimeEvent> = { [field]: value };
           batchUpdateEvents(changes, Array.from(selectedEvents));
-          return clearSelectedEvents();
+          return;
         }
         if (field in data) {
           // @ts-expect-error -- not sure how to type this

apps/client/src/features/rundown/delay-block/DelayBlock.tsx

@@ -50,7 +50,7 @@ export default function DelayBlock(props: DelayBlockProps) {
   };
 
   const cancelDelayHandler = () => {
-    deleteEvent(data.id);
+    deleteEvent([data.id]);
   };
 
   const blockClasses = cx([style.delay, hasCursor ? style.hasCursor : null]);

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

@@ -113,6 +113,7 @@ export default function EventBlock(props: EventBlockProps) {
                 value: false,
               }),
           },
+          { withDivider: true, label: 'Delete', icon: IoTrash, onClick: () => actionHandler('delete') },
         ]
       : [
           {

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

@@ -13,6 +13,8 @@ interface EventSelectionStore {
   anchoredIndex: number | null;
   setSelectedEvents: (selectionArgs: { id: string; index: number; selectMode: SelectionMode }) => void;
   clearSelectedEvents: () => void;
+  clearMultiSelect: () => void;
+  unselect: (id: string) => void;
 }
 
 export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
@@ -81,7 +83,17 @@ export const useEventSelection = create<EventSelectionStore>()((set, get) => ({
       });
     }
   },
-  clearSelectedEvents: () => set({ selectedEvents: new Set() }),
+  clearSelectedEvents: () => set({ selectedEvents: new Set(), anchoredIndex: null }),
+  clearMultiSelect: () => {
+    const { selectedEvents } = get();
+    const [firstSelected] = selectedEvents;
+    set({ selectedEvents: new Set(firstSelected || undefined), anchoredIndex: null });
+  },
+  unselect: (id: string) => {
+    const { selectedEvents } = get();
+    selectedEvents.delete(id);
+    set({ selectedEvents });
+  },
 }));
 
 export function getSelectionMode(event: MouseEvent): SelectionMode {