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/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx

@@ -1,9 +1,11 @@
 import { IoEllipsisHorizontal } from 'react-icons/io5';
 import { flexRender, Table } from '@tanstack/react-table';
-import { EntryId, OntimeEntry, SupportedEntry } from 'ontime-types';
+import { EntryId, SupportedEntry } from 'ontime-types';
+import { colourToHex, cssOrHexToColour } from 'ontime-utils';
 
 import IconButton from '../../../../common/components/buttons/IconButton';
-import { cx, enDash } from '../../../../common/utils/styleUtils';
+import type { ExtendedEntry } from '../../../../common/utils/rundownMetadata';
+import { cx, enDash, getAccessibleColour } from '../../../../common/utils/styleUtils';
 import { AppMode } from '../../../../ontimeConfig';
 import { useCuesheetTableMenu } from '../cuesheet-table-menu/useCuesheetTableMenu';
 
@@ -12,12 +14,12 @@ import style from './MilestoneRow.module.scss';
 interface MilestoneRowProps {
   entryId: EntryId;
   isPast: boolean;
-  parentBgColour: string | null;
+  parentBgColour?: string;
   parentId: EntryId | null;
-  rowBgColour?: string;
+  colour: string;
   rowId: string;
   rowIndex: number;
-  table: Table<OntimeEntry>;
+  table: Table<ExtendedEntry>;
 }
 
 export default function MilestoneRow({
@@ -25,10 +27,11 @@ export default function MilestoneRow({
   isPast,
   parentBgColour,
   parentId,
-  rowBgColour,
+  colour,
   rowId,
   rowIndex,
   table,
+  ...virtuosoProps
 }: MilestoneRowProps) {
   const { cuesheetMode, hideIndexColumn } = table.options.meta?.options ?? {
     cuesheetMode: AppMode.Edit,
@@ -37,6 +40,18 @@ export default function MilestoneRow({
 
   const openMenu = useCuesheetTableMenu((store) => store.openMenu);
 
+  let rowBgColour: string | undefined;
+  if (colour) {
+    // the colour is user defined and might be invalid
+    const accessibleBackgroundColor = cssOrHexToColour(getAccessibleColour(colour).backgroundColor);
+    if (accessibleBackgroundColor !== null) {
+      rowBgColour = colourToHex({
+        ...accessibleBackgroundColor,
+        alpha: accessibleBackgroundColor.alpha * 0.25,
+      });
+    }
+  }
+
   return (
     <tr
       className={cx([style.milestoneRow, Boolean(parentBgColour) && style.hasParent])}
@@ -45,6 +60,7 @@ export default function MilestoneRow({
         '--user-bg': parentBgColour ?? 'transparent',
       }}
       data-testid='cuesheet-milestone'
+      {...virtuosoProps}
     >
       {cuesheetMode === AppMode.Edit && (
         <td className={style.actionColumn} tabIndex={-1} role='cell'>
@@ -79,9 +95,9 @@ export default function MilestoneRow({
               style={{
                 width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
                 backgroundColor: rowBgColour,
+                opacity: canRender ? 1 : 0.4,
               }}
               tabIndex={-1}
-              role='cell'
             >
               {canRender && flexRender(cell.column.columnDef.cell, cell.getContext())}
             </td>