feat: time to next flag

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/BlockRow.tsx

@@ -45,7 +45,7 @@ export default function BlockRow({ blockId, colour, hidePast, rowId, rowIndex, t
             onClick={(e) => {
               const rect = e.currentTarget.getBoundingClientRect();
               const yPos = 8 + rect.y + rect.height / 2;
-              openMenu({ x: rect.x, y: yPos }, blockId, SupportedEntry.Block, rowIndex, null);
+              openMenu({ x: rect.x, y: yPos }, blockId, SupportedEntry.Block, rowIndex, null, null);
             }}
           >
             <IoEllipsisHorizontal />

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -100,7 +100,7 @@ export default function EventRow({
             onClick={(e) => {
               const rect = e.currentTarget.getBoundingClientRect();
               const yPos = 8 + rect.y + rect.height / 2;
-              openMenu({ x: rect.x, y: yPos }, event.id, SupportedEntry.Event, rowIndex, event.parent);
+              openMenu({ x: rect.x, y: yPos }, event.id, SupportedEntry.Event, rowIndex, event.parent, event.flag);
             }}
           >
             <IoEllipsisHorizontal />

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/FlagCell.module.scss

@@ -0,0 +1,7 @@
+.flag {
+  width: 100%;
+  height: 100%;
+  color: $active-indicator;
+  padding-top: 0.5rem;
+  padding-left: 0.75rem;
+}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/FlagCell.tsx

@@ -0,0 +1,11 @@
+import { TbFlagFilled } from 'react-icons/tb';
+
+import style from './FlagCell.module.scss';
+
+export default function FlagCell() {
+  return (
+    <div className={style.flag}>
+      <TbFlagFilled />
+    </div>
+  );
+}

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MilestoneRow.tsx

@@ -57,7 +57,7 @@ export default function MilestoneRow({
             onClick={(e) => {
               const rect = e.currentTarget.getBoundingClientRect();
               const yPos = 8 + rect.y + rect.height / 2;
-              openMenu({ x: rect.x, y: yPos }, entryId, SupportedEntry.Milestone, rowIndex, parentId);
+              openMenu({ x: rect.x, y: yPos }, entryId, SupportedEntry.Milestone, rowIndex, parentId, null);
             }}
           >
             <IoEllipsisHorizontal />

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx

@@ -8,6 +8,7 @@ import { formatDuration, formatTime } from '../../../../common/utils/time';
 
 import DurationInput from './DurationInput';
 import EditableImage from './EditableImage';
+import FlagCell from './FlagCell';
 import MultiLineCell from './MultiLineCell';
 import MutedText from './MutedText';
 import SingleLineCell from './SingleLineCell';
@@ -154,6 +155,14 @@ function MakeSingleLineField({ row, column, table }: CellContext<OntimeEntry, un
   return <SingleLineCell initialValue={initialValue as string} handleUpdate={update} />;
 }
 
+function MakeFlagField({ row }: CellContext<OntimeEntry, unknown>) {
+  const event = row.original;
+  if (!isOntimeEvent(event) || !event.flag) {
+    return null;
+  }
+  return <FlagCell />;
+}
+
 function MakeCustomField({ row, column, table }: CellContext<OntimeEntry, unknown>) {
   const update = useCallback(
     (newValue: string) => {
@@ -189,6 +198,14 @@ export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<Ontim
   }));
 
   return [
+    {
+      accessorKey: 'flag',
+      id: 'flag',
+      header: 'Flag',
+      cell: MakeFlagField,
+      size: 45,
+      minSize: 45,
+    },
     {
       accessorKey: 'cue',
       id: 'cue',