From 126ff6173838ccf99cc5d9a5f7259e366c4837bb Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Thu, 24 Jul 2025 07:51:27 +0200
Subject: [PATCH] refactor: milestone actions in context menu

---
 .../RundownMilestone.module.scss              |  2 +-
 .../rundown-milestone/RundownMilestone.tsx    | 22 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.module.scss b/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.module.scss
index 048c921fd..38ef8c19d 100644
--- a/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.module.scss
+++ b/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.module.scss
@@ -10,7 +10,7 @@
   color: $section-white; // to override inline
 
   display: grid;
-  grid-template-columns: 2rem 8rem 1fr auto;
+  grid-template-columns: 2rem 1fr 3fr;
   align-items: center;
   height: $secondary-block-height;
   gap: 0.5rem;
diff --git a/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx b/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx
index 14a8df5ea..6c083478c 100644
--- a/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx
+++ b/apps/client/src/features/rundown/rundown-milestone/RundownMilestone.tsx
@@ -1,12 +1,12 @@
 import { MouseEvent, useCallback, useRef } from 'react';
-import { IoClose, IoReorderTwo } from 'react-icons/io5';
+import { IoReorderTwo, IoTrash } from 'react-icons/io5';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { EntryId } from 'ontime-types';
 
-import Button from '../../../common/components/buttons/Button';
 import Input from '../../../common/components/input/input/Input';
 import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
+import { useContextMenu } from '../../../common/hooks/useContextMenu';
 import { useEntryActions } from '../../../common/hooks/useEntryAction';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import { useEventSelection } from '../useEventSelection';
@@ -26,6 +26,15 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
   const { updateEntry, deleteEntry } = useEntryActions();
   const { selectedEvents, setSelectedBlock } = useEventSelection();
 
+  const [onContextMenu] = useContextMenu<HTMLDivElement>([
+    {
+      type: 'item',
+      label: 'Delete',
+      icon: IoTrash,
+      onClick: () => deleteEntry([entryId]),
+    },
+  ]);
+
   const {
     attributes: dragAttributes,
     listeners: dragListeners,
@@ -59,11 +68,6 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
     updateEntry({ id: entryId, [field]: value });
   };
 
-  const handleDelete = (event: MouseEvent) => {
-    event.stopPropagation();
-    deleteEntry([entryId]);
-  };
-
   const dragStyle = {
     zIndex: isDragging ? 2 : 'inherit',
     transform: CSS.Translate.toString(transform),
@@ -77,6 +81,7 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
       className={cx([style.milestone, hasCursor ? style.hasCursor : null])}
       ref={setNodeRef}
       onClick={handleFocusClick}
+      onContextMenu={onContextMenu}
       style={dragStyle}
       data-testid='rundown-milestone'
     >
@@ -87,9 +92,6 @@ export default function RundownMilestone({ colour, cue, entryId, hasCursor, titl
       </div>
       <MilestoneTextInput field='cue' initialValue={cue} placeholder='Cue' submitHandler={handleUpdate} />
       <MilestoneTextInput field='title' initialValue={title} placeholder='Title' submitHandler={handleUpdate} />
-      <Button variant='ghosted-destructive' onClick={handleDelete}>
-        <IoClose /> Cancel
-      </Button>
     </div>
   );
 }