Feat/55 v2 (#225)

* chore: upgrade relevant libraries
* feat(skip): add skip styling to paginated items
* chore: upgrade relevant libraries
* Fix: issue with text colour (#214)
* fix: adjust text colour from context
* fix: issue with wrong proptype
* fix issue with vite migration (#217)
* hotfix: 1.8.2 issues vite migration
* fix: file import options
* feat(55): styling
* refactor: remove onhover option for entry block
* refactor: relocate logging provider
* refactor: convert to typescript
* feat(55): add event editor
* refactor: extract event actions
* fix: bad import
* feat(55): redesign components
* fix: issues with not awaiting async
* refactor: replace socket with subscription
* refactor: remove unused
* style: small tweaks
* refactor: extract event actions
* refactor: cleanup debug
* refactor: chakra imports
* fix: optimistic mutations
* refactor: handle promise rejections
* refactor: validation
* fix: rq optimistic mutations
* feat: add playback feedback to block
* refactor: no optimistic adding of events
* refactor: simplify cursor state
* styles: cleanup editor style
* refactor: cleanup duration update
* fix: revert package upgrade (issues with vitest)
* fix: prevent cyclic imports
* refactor: extract data fetcher
* refactor: typescript migration
* chore: update tests

client/src/features/editors/block-block/BlockBlock.jsx

@@ -0,0 +1,42 @@
+import { Draggable } from 'react-beautiful-dnd';
+import { HStack } from '@chakra-ui/react';
+import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
+import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
+import PropTypes from 'prop-types';
+
+import ActionButtons from '../../../common/components/buttons/ActionButtons';
+import TooltipLoadingActionBtn from '../../../common/components/buttons/TooltipLoadingActionBtn';
+
+import style from './BlockBlock.module.scss';
+
+export default function BlockBlock(props) {
+  const { index, data, actionHandler } = props;
+
+  return (
+    <Draggable key={data.id} draggableId={data.id} index={index}>
+      {(provided) => (
+        <div className={style.block} {...provided.draggableProps} ref={provided.innerRef}>
+          <span className={style.drag} {...provided.dragHandleProps}>
+            <IoReorderTwo />
+          </span>
+          <HStack spacing='4px' className={style.actionOverlay}>
+            <TooltipLoadingActionBtn
+              clickHandler={() => actionHandler('delete')}
+              icon={<IoRemove />}
+              colorScheme='red'
+              tooltip='Delete'
+              _hover={{ bg: 'red.400' }}
+            />
+            <ActionButtons showAdd showDelay actionHandler={actionHandler} />
+          </HStack>
+        </div>
+      )}
+    </Draggable>
+  );
+}
+
+BlockBlock.propTypes = {
+  index: PropTypes.number.isRequired,
+  data: PropTypes.object.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+};