Delete block (#895)

apps/client/src/features/rundown/block-block/BlockBlock.tsx

@@ -1,14 +1,14 @@
 import { useRef } from 'react';
-import { IconButton } from '@chakra-ui/react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
-import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { OntimeBlock } from 'ontime-types';
 
 import { cx } from '../../../common/utils/styleUtils';
 import EditableBlockTitle from '../common/EditableBlockTitle';
 
+import BlockDelete from './BlockDelete';
+
 import style from './BlockBlock.module.scss';
 
 interface BlockBlockProps {
@@ -19,6 +19,7 @@ interface BlockBlockProps {
 
 export default function BlockBlock(props: BlockBlockProps) {
   const { data, hasCursor, onDelete } = props;
+
   const handleRef = useRef<null | HTMLSpanElement>(null);
 
   const {
@@ -45,14 +46,7 @@ export default function BlockBlock(props: BlockBlockProps) {
         <IoReorderTwo />
       </span>
       <EditableBlockTitle title={data.title} eventId={data.id} placeholder='Block title' />
-      <IconButton
+      <BlockDelete onDelete={onDelete} />
-        aria-label='Delete'
-        size='sm'
-        icon={<IoTrash />}
-        variant='ontime-subtle'
-        color='#FA5656'
-        onClick={onDelete}
-      />
     </div>
   );
 }

apps/client/src/features/rundown/block-block/BlockDelete.tsx

@@ -0,0 +1,27 @@
+import { IconButton } from '@chakra-ui/react';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
+
+import { AppMode, useAppMode } from '../../../common/stores/appModeStore';
+
+interface BlockDeleteProps {
+  onDelete: () => void;
+}
+
+export default function BlockDelete(props: BlockDeleteProps) {
+  const { onDelete } = props;
+  const mode = useAppMode((state) => state.mode);
+
+  const isRunMode = mode === AppMode.Run;
+
+  return (
+    <IconButton
+      aria-label='Delete'
+      size='sm'
+      icon={<IoTrash />}
+      variant='ontime-subtle'
+      color='#FA5656'
+      onClick={onDelete}
+      isDisabled={isRunMode}
+    />
+  );
+}