feat: edit groups

apps/client/src/features/rundown/rundown-delay/RundownDelay.module.scss

@@ -0,0 +1,32 @@
+@use '../blockMixins' as *;
+
+.delay {
+  @include block-styling;
+
+  margin-block: 0.25rem;
+  background-color: $block-bg2;
+  padding-right: 0.5rem;
+
+  display: grid;
+  grid-template-columns: 2rem 1fr auto;
+  grid-template-areas: 'drag inpt btns';
+  align-items: center;
+  height: $secondary-block-height;
+  gap: 0.5rem;
+
+  &.hasCursor {
+    outline: 1px solid $block-cursor-color;
+  }
+}
+
+.drag {
+  @include drag-style;
+  grid-area: drag;
+}
+
+.actionButtons {
+  grid-area: btns;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}

apps/client/src/features/rundown/rundown-delay/RundownDelay.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from 'react';
+import { IoCheckmarkDone, IoClose, IoReorderTwo } from 'react-icons/io5';
+import { Button } from '@chakra-ui/react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { OntimeDelay } from 'ontime-types';
+
+import DelayInput from '../../../common/components/input/delay-input/DelayInput';
+import { useEntryActions } from '../../../common/hooks/useEntryAction';
+import { cx } from '../../../common/utils/styleUtils';
+
+import style from './RundownDelay.module.scss';
+
+interface RundownDelayProps {
+  data: OntimeDelay;
+  hasCursor: boolean;
+}
+
+export default function RundownDelay({ data, hasCursor }: RundownDelayProps) {
+  const { applyDelay, deleteEntry } = useEntryActions();
+  const handleRef = useRef<null | HTMLSpanElement>(null);
+
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef,
+    isDragging,
+    transform,
+    transition,
+  } = useSortable({
+    id: data.id,
+    data: {
+      type: 'delay',
+    },
+    animateLayoutChanges: () => false,
+  });
+
+  const dragStyle = {
+    zIndex: isDragging ? 2 : 'inherit',
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
+  useEffect(() => {
+    if (hasCursor) {
+      handleRef?.current?.focus();
+    }
+  }, [hasCursor]);
+
+  const applyDelayHandler = () => {
+    applyDelay(data.id);
+  };
+
+  const cancelDelayHandler = () => {
+    deleteEntry([data.id]);
+  };
+
+  const blockClasses = cx([style.delay, hasCursor ? style.hasCursor : null]);
+
+  return (
+    <div className={blockClasses} ref={setNodeRef} style={dragStyle}>
+      <span className={style.drag} ref={handleRef} {...dragAttributes} {...dragListeners}>
+        <IoReorderTwo />
+      </span>
+      <DelayInput eventId={data.id} duration={data.duration} />
+      <div className={style.actionButtons}>
+        <Button onClick={applyDelayHandler} size='sm' leftIcon={<IoCheckmarkDone />} variant='ontime-ghosted-white'>
+          Make permanent
+        </Button>
+        <Button onClick={cancelDelayHandler} size='sm' leftIcon={<IoClose />} variant='ontime-ghosted-white'>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}