feat: time to next flag

2026-08-16 21:03:29 +00:00 · 2025-07-13 16:52:35 +02:00
parent 637454f73d
commit 445cc9e845
43 changed files with 550 additions and 310 deletions
@@ -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 />
@@ -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 />
@@ -0,0 +1,7 @@
+.flag {
+  width: 100%;
+  height: 100%;
+  color: $active-indicator;
+  padding-top: 0.5rem;
+  padding-left: 0.75rem;
+}
@@ -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>
+  );
+}
@@ -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 />
@@ -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',
@@ -11,8 +11,8 @@ import { useCuesheetTableMenu } from './useCuesheetTableMenu';
 export default memo(CuesheetTableMenu);

 function CuesheetTableMenu() {
-  const { isOpen, entryId, entryIndex, parentId, position, closeMenu } = useCuesheetTableMenu();
-  const { addEntry, clone, deleteEntry, move } = useEntryActions();
+  const { isOpen, entryId, entryIndex, parentId, flag, position, closeMenu } = useCuesheetTableMenu();
+  const { addEntry, clone, deleteEntry, move, updateEntry } = useEntryActions();
  const showModal = useCuesheetEditModal((state) => state.setEditableEntry);

  if (!isOpen) {
@@ -26,6 +26,14 @@ function CuesheetTableMenu() {
      items={[
        { type: 'item', label: 'Edit...', onClick: () => showModal(entryId), icon: IoOptions },
        { type: 'divider' },
+        {
+          type: 'item',
+          label: flag ? 'Remove flag' : 'Add flag',
+          onClick: () => updateEntry({ id: entryId, flag: !flag }),
+          icon: IoDuplicateOutline,
+          disabled: flag === null,
+        },
+        { type: 'divider' },
        {
          type: 'item',
          label: 'Add event above',
@@ -9,6 +9,7 @@ type OpenMenu = {
  entryType: SupportedEntry;
  entryIndex: number;
  parentId: EntryId | null;
+  flag: boolean | null;
 };

 type ClosedMenu = {
@@ -17,6 +18,7 @@ type ClosedMenu = {
  entryType: null;
  entryIndex: null;
  parentId: null;
+  flag: null;
 };

 type CuesheetTableMenuStore = (OpenMenu | ClosedMenu) & {
@@ -27,6 +29,7 @@ type CuesheetTableMenuStore = (OpenMenu | ClosedMenu) & {
    entryType: SupportedEntry,
    entryIndex: number,
    parentId: EntryId | null,
+    flag: boolean | null,
  ) => void;
  closeMenu: () => void;
 };
@@ -38,12 +41,14 @@ export const useCuesheetTableMenu = create<CuesheetTableMenuStore>((set) => ({
  entryIndex: null,
  parentId: null,
  position: { x: 0, y: 0 },
+  flag: null,
  openMenu: (
    position: Anchor,
    entryId: EntryId,
    entryType: SupportedEntry,
    entryIndex: number,
    parentId: EntryId | null,
-  ) => set({ isOpen: true, position, entryId, entryType, entryIndex, parentId }),
+    flag: null | boolean,
+  ) => set({ isOpen: true, position, entryId, entryType, entryIndex, parentId, flag }),
  closeMenu: () => set({ isOpen: false }),
 }));
@@ -13,7 +13,7 @@ $panel-gap: 0.5rem;

  display: grid;
  grid-template-columns: auto;
-  grid-template-rows: 3rem 1fr;
+  grid-template-rows: 3.5rem 1fr;
  grid-template-areas:
    'overview'
    'main';