feat: context menu actions (#414)

* refactor: abstract copy to clipboard logic

* feat: add actions to <EventBlock> context menu

apps/client/src/common/components/copy-tag/CopyTag.tsx

@@ -4,6 +4,7 @@ import { IoCopy } from '@react-icons/all-files/io5/IoCopy';
 
 import { tooltipDelayFast } from '../../../ontimeConfig';
 import { Size } from '../../models/Util.type';
+import copyToClipboard from '../../utils/copyToClipboard';
 
 interface CopyTagProps {
   label: string;
@@ -14,10 +15,7 @@ interface CopyTagProps {
 export default function CopyTag(props: PropsWithChildren<CopyTagProps>) {
   const { label, className, size = 'xs', children } = props;
 
-  const handleClick = () => {
+  const handleClick = () => copyToClipboard(children as string);
-    // we need to this as a promise because safari
-    setTimeout(async () => await navigator.clipboard.writeText(children as string));
-  };
 
   return (
     <Tooltip label={label} openDelay={tooltipDelayFast}>

apps/client/src/common/utils/copyToClipboard.ts

@@ -0,0 +1,4 @@
+// we need to this as a promise because safari
+export default async function copyToClipboard(text: string) {
+  setTimeout(async () => await navigator.clipboard.writeText(text));
+}

apps/client/src/features/rundown/event-block/EventBlock.tsx

@@ -1,12 +1,15 @@
 import { MouseEvent, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { IoAdd } from '@react-icons/all-files/io5/IoAdd';
+import { IoCopyOutline } from '@react-icons/all-files/io5/IoCopyOutline';
+import { IoPeopleOutline } from '@react-icons/all-files/io5/IoPeopleOutline';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
 import { EndAction, OntimeEvent, Playback, TimerType } from 'ontime-types';
 
 import { useContextMenu } from '../../../common/hooks/useContextMenu';
+import { useEventAction } from '../../../common/hooks/useEventAction';
 import { useAppMode } from '../../../common/stores/appModeStore';
+import copyToClipboard from '../../../common/utils/copyToClipboard';
 import { cx, getAccessibleColour } from '../../../common/utils/styleUtils';
 import type { EventItemActions } from '../RundownEntry';
 
@@ -72,13 +75,22 @@ export default function EventBlock(props: EventBlockProps) {
     actionHandler,
     disableEdit,
   } = props;
-
+  const { updateEvent } = useEventAction();
   const moveCursorTo = useAppMode((state) => state.setCursor);
   const handleRef = useRef<null | HTMLSpanElement>(null);
   const [isVisible, setIsVisible] = useState(false);
   const openId = useAppMode((state) => state.editId);
   const [onContextMenu] = useContextMenu<HTMLDivElement>([
-    { label: eventId, icon: IoAdd, onClick: () => console.log(eventId) },
+    { label: `Copy ID: ${eventId}}`, icon: IoCopyOutline, onClick: () => copyToClipboard(eventId) },
+    {
+      label: 'Toggle public',
+      icon: IoPeopleOutline,
+      onClick: () =>
+        updateEvent({
+          id: eventId,
+          isPublic: !isPublic,
+        }),
+    },
   ]);
 
   const {