feat: time to next flag

apps/client/src/features/rundown/Rundown.module.scss

@@ -38,10 +38,24 @@
 }
 
 .entryIndex {
-  text-align: right;
+  padding-block: 0.25rem;
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;  
+  justify-items: end;
   min-width: 2em;
   color: $label-gray;
   font-size: calc(1rem - 3px);
+  height: 6.5rem;
+}
+
+.flag {
+  grid-row: 1;
+  color: $active-indicator;
+  font-size: 1rem;
+}
+
+.index {
+  grid-row: 2;
 }
 
 .entry {

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

@@ -1,4 +1,5 @@
 import { Fragment, lazy, useCallback, useEffect, useRef, useState } from 'react';
+import { TbFlagFilled } from 'react-icons/tb';
 import {
   closestCenter,
   DndContext,
@@ -482,7 +483,12 @@ export default function Rundown({ data }: RundownProps) {
                       data-testid={`entry-${rundownMetadata.eventIndex}`}
                       style={blockColour ? { '--user-bg': blockColour } : {}}
                     >
-                      {isOntimeEvent(entry) && <div className={style.entryIndex}>{rundownMetadata.eventIndex}</div>}
+                      {isOntimeEvent(entry) && (
+                        <div className={style.entryIndex}>
+                          {entry.flag && <TbFlagFilled className={style.flag} />}
+                          <div className={style.index}>{rundownMetadata.eventIndex}</div>
+                        </div>
+                      )}
                       <div className={style.entry} key={entry.id} ref={hasCursor ? cursorRef : undefined}>
                         <RundownEntry
                           type={entry.type}

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

@@ -17,7 +17,7 @@ $skip-opacity: 0.2;
     'binder ...        ...     ...';
 
   grid-template-columns: $block-binder-width 3rem 1fr 3rem;
-  grid-template-rows: 0.125rem 2rem 2rem auto 0.125rem;
+  grid-template-rows: 0.125rem 2rem 2rem auto 0.125rem; 
   align-items: center;
   padding-right: $block-clearance;
   gap: 2px;

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

@@ -2,7 +2,6 @@ import { MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import {
   IoAdd,
   IoDuplicateOutline,
-  IoFlag,
   IoFolder,
   IoLink,
   IoReorderTwo,
@@ -10,6 +9,7 @@ import {
   IoTrash,
   IoUnlink,
 } from 'react-icons/io5';
+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';
@@ -148,7 +148,7 @@ export default function RundownEvent({
           {
             type: 'item',
             label: flag ? 'Remove flag' : 'Add flag',
-            icon: IoFlag,
+            icon: TbFlagFilled,
             onClick: () =>
               actionHandler('update', {
                 field: 'flag',