V2 monorepo (#285)

* refactor(project structure): UI

* refactor(project structure): extract utilities

* refactor(project structure): remove unused

* refactor(project structure): electron

* refactor(project structure): server

refactor: migrate to vitest

refactor: monorepo config

* refactor: extract application menu

* refactor: exit process

* refactor: extract tray menu

* chore: electron build

* Added Seconds in studio clock #282
---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>

---------

Co-authored-by: Fabian Posenau <fabian.p99@gmx.de>
Co-authored-by: Fabian Posenau <fabian@fphome.de>

apps/client/src/features/rundown/block-block/BlockBlock.module.scss

@@ -0,0 +1,23 @@
+@use '../blockMixins' as *;
+
+.block {
+  @include block-spacing;
+  @include block-styling;
+  box-sizing: content-box;
+  display: grid;
+  grid-template-columns: 32px 1fr auto;
+  align-items: center;
+  height: $secondary-block-height;
+
+  &.hasCursor {
+    outline: 1px solid $block-cursor-color;
+  }
+}
+
+.drag {
+  @include drag-style;
+}
+
+.actionOverlay {
+  justify-self: flex-end;
+}

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

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+import { Draggable } from 'react-beautiful-dnd';
+import { IoReorderTwo } from '@react-icons/all-files/io5/IoReorderTwo';
+
+import { OntimeBlock, OntimeEvent } from '../../../common/models/EventTypes';
+import { cx } from '../../../common/utils/styleUtils';
+import BlockActionMenu from '../event-block/composite/BlockActionMenu';
+import { EventItemActions } from '../RundownEntry';
+
+import style from './BlockBlock.module.scss';
+
+interface BlockBlockProps {
+  index: number;
+  data: OntimeBlock;
+  hasCursor: boolean;
+  actionHandler: (action: EventItemActions, payload?: number | { field: keyof OntimeEvent, value: unknown }) => void;
+}
+
+export default function BlockBlock(props: BlockBlockProps) {
+  const { index, data, hasCursor, actionHandler } = props;
+  const onFocusRef = useRef<null | HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (hasCursor) {
+      onFocusRef?.current?.focus();
+    }
+  }, [hasCursor])
+
+  const blockClasses = cx([
+    style.block,
+    hasCursor ? style.hasCursor : null,
+  ]);
+
+  return (
+    <Draggable key={data.id} draggableId={data.id} index={index}>
+      {(provided) => (
+        <div className={blockClasses} {...provided.draggableProps} ref={provided.innerRef}>
+          <span className={style.drag} {...provided.dragHandleProps} ref={onFocusRef}>
+            <IoReorderTwo />
+          </span>
+          <BlockActionMenu
+            className={style.actionOverlay}
+            showAdd
+            showDelay
+            enableDelete
+            actionHandler={actionHandler}
+          />
+        </div>
+      )}
+    </Draggable>
+  );
+}