refactor: style tweaks and bug fixes

- italic and bold for rundown metadata entries
- allow deleting groups
- make groups in order
- correct style for milestones
- open playing groups
- style tweaks

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

@@ -298,8 +298,15 @@ export default function Rundown({ data }: RundownProps) {
       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));
+    }
+
     setSelectedEvents({ id: featureData.selectedEventId, selectMode: 'click', index });
-  }, [editorMode, featureData.selectedEventId, order, setSelectedEvents]);
+  }, [editorMode, entries, featureData.selectedEventId, order, setCollapsedGroups, setSelectedEvents]);
 
   /**
    * On drag end, we reorder the events

apps/client/src/features/rundown/__tests__/rundown.utils.test.ts

@@ -1,6 +1,6 @@
 import { EntryId, OntimeBlock, OntimeDelay, OntimeEvent, RundownEntries, SupportedEntry } from 'ontime-types';
 
-import { makeRundownMetadata, makeSortableList, moveDown, moveUp } from '../rundown.utils';
+import { makeRundownMetadata, makeSortableList, moveDown, moveUp, orderEntries } from '../rundown.utils';
 
 describe('makeRundownMetadata()', () => {
   it('processes nested rundown data', () => {
@@ -339,7 +339,6 @@ describe('makeSortableList()', () => {
   });
 });
 
-
 describe('moveUp()', () => {
   const rundown = {
     entries: {
@@ -535,3 +534,40 @@ describe('moveDown()', () => {
     });
   });
 });
+
+describe('orderEntries()', () => {
+  it('should return an empty array when both inputs are empty', () => {
+    const unorderedArray: string[] = [];
+    const flatOrder: string[] = [];
+    const result = orderEntries(unorderedArray, flatOrder);
+    expect(result).toEqual([]);
+  });
+
+  it('should return an ordered array based on flatOrder', () => {
+    const unorderedArray = ['b', 'a', 'c'];
+    const flatOrder = ['a', 'b', 'c'];
+    const result = orderEntries(unorderedArray, flatOrder);
+    expect(result).toEqual(['a', 'b', 'c']);
+  });
+
+  it('should ignore elements in unorderedArray not present in flatOrder', () => {
+    const unorderedArray = ['b', 'a', 'c', 'd'];
+    const flatOrder = ['a', 'b', 'c'];
+    const result = orderEntries(unorderedArray, flatOrder);
+    expect(result).toEqual(['a', 'b', 'c']);
+  });
+
+  it('should handle cases where flatOrder has elements not in unorderedArray', () => {
+    const unorderedArray = ['b', 'a'];
+    const flatOrder = ['a', 'b', 'c'];
+    const result = orderEntries(unorderedArray, flatOrder);
+    expect(result).toEqual(['a', 'b']);
+  });
+
+  it('should return an empty array if unorderedArray has no matching elements in flatOrder', () => {
+    const unorderedArray = ['x', 'y', 'z'];
+    const flatOrder = ['a', 'b', 'c'];
+    const result = orderEntries(unorderedArray, flatOrder);
+    expect(result).toEqual([]);
+  });
+});

apps/client/src/features/rundown/rundown-block/RundownBlock.tsx

@@ -43,7 +43,6 @@ export default function RundownBlock({ data, hasCursor, collapsed, onCollapse }:
     },
     {
       type: 'item',
-
       label: 'Ungroup',
       icon: IoFolderOpenOutline,
       onClick: () => ungroup(data.id),
@@ -55,7 +54,6 @@ export default function RundownBlock({ data, hasCursor, collapsed, onCollapse }:
       label: 'Delete Group',
       icon: IoTrash,
       onClick: () => deleteEntry([data.id]),
-      disabled: true,
     },
   ]);
 

apps/client/src/features/rundown/rundown-event/RundownEvent.module.scss

@@ -94,7 +94,7 @@ $skip-opacity: 0.2;
   cursor: pointer;
 
   background-color: $gray-1050; // to override inline
-  color: $section-white;
+  color: $section-white; // to override inline
   font-size: 1rem;
   border-radius: 3px 0 0 3px;
 

apps/client/src/features/rundown/rundown-milestone/RundownMilestone.module.scss

@@ -6,7 +6,8 @@
   margin-left: calc(2rem + 1px); // binder + border
   margin-block: 0.125rem;
   padding-right: 0.25rem;
-  background-color: color-mix(in srgb, var(--user-bg, $block-bg) 15%, transparent 85%);
+  background-color: $gray-1050; // to override inline
+  color: $section-white; // to override inline
 
   display: grid;
   grid-template-columns: 2rem 8rem 1fr auto;
@@ -23,7 +24,8 @@
   height: 100%;
   display: grid;
   place-content: center;
-  background-color: var(--user-bg, $block-bg);
+  background-color: $gray-1050; // to override inline
+  color: $section-white; // to override inline
 }
 
 .drag {

apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx

@@ -76,17 +76,11 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
       className={cx([style.milestone, hasCursor ? style.hasCursor : null])}
       ref={setNodeRef}
       onClick={handleFocusClick}
-      style={{ ...dragStyle, '--user-bg': colour }}
+      style={dragStyle}
       data-testid='rundown-milestone'
     >
-      <div className={style.binder}>
-        <span
-          className={style.drag}
-          style={{ ...binderColours }}
-          ref={handleRef}
-          {...dragAttributes}
-          {...dragListeners}
-        >
+      <div className={style.binder} style={{ ...binderColours }}>
+        <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
           <IoReorderTwo />
         </span>
       </div>

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

@@ -306,3 +306,17 @@ export function moveDown(
   // default - swap positions with next entry
   return { destinationId: nextEntryId, order: 'after' };
 }
+
+/**
+ * Reorders unorderedArray to match the flatOrder entries
+ * Useful for operations that convert selections (out of order) to rundown
+ */
+export function orderEntries(unorderedArray: EntryId[], flatOrder: EntryId[]): EntryId[] {
+  const orderedArray: EntryId[] = [];
+  for (const id of flatOrder) {
+    if (unorderedArray.includes(id)) {
+      orderedArray.push(id);
+    }
+  }
+  return orderedArray;
+}