Feat/block improvements (#95)

* feat/89-block-improvements style: replace reload icon
* feat/block-feat/block-improvements add cursor buttons
* feat/block-improvements hover to create
* feat/block-improvements change settings in modal
* feat/block-improvements version bump

client/src/features/editors/EntryBlock/EntryBlock.jsx

@@ -0,0 +1,73 @@
+import { Tooltip } from '@chakra-ui/tooltip';
+import { Checkbox } from '@chakra-ui/react';
+import style from './EntryBlock.module.scss';
+import { useContext, useEffect, useState } from 'react';
+import { LocalEventSettingsContext } from '../../../app/context/LocalEventSettingsContext';
+
+export default function EntryBlock(props) {
+  const { showKbd, index, eventsHandler } = props;
+  const { starTimeIsLastEnd, defaultPublic } = useContext(LocalEventSettingsContext);
+  const [doStartTime, setStartTime] = useState(starTimeIsLastEnd);
+  const [doPublic, setPublic] = useState(defaultPublic);
+
+  useEffect(() => {
+    setStartTime(starTimeIsLastEnd);
+  }, [starTimeIsLastEnd]);
+
+  useEffect(() => {
+    setPublic(defaultPublic);
+  }, [defaultPublic]);
+
+  return (
+    <div className={style.create}>
+      <Tooltip label='Add Event' openDelay={300}>
+        <span
+          className={style.createEvent}
+          onClick={() =>
+            eventsHandler(
+              'add',
+              { type: 'event', order: index + 1, isPublic: doPublic },
+              { startIsLastEnd: doStartTime ? index : undefined }
+            )
+          }
+        >
+          E{showKbd && <span className={style.keyboard}>Alt + E</span>}
+        </span>
+      </Tooltip>
+      <Tooltip label='Add Delay' openDelay={300}>
+        <span
+          className={style.createDelay}
+          onClick={() => eventsHandler('add', { type: 'delay', order: index + 1 })}
+        >
+          D{showKbd && <span className={style.keyboard}>Alt + D</span>}
+        </span>
+      </Tooltip>
+      <Tooltip label='Add Block' openDelay={300}>
+        <span
+          className={style.createBlock}
+          onClick={() => eventsHandler('add', { type: 'block', order: index + 1 })}
+        >
+          B{showKbd && <span className={style.keyboard}>Alt + B</span>}
+        </span>
+      </Tooltip>
+      <div className={style.options}>
+        <Checkbox
+          size='sm'
+          colorScheme='blue'
+          isChecked={doStartTime}
+          onChange={(e) => setStartTime(e.target.checked)}
+        >
+          Start time is last end
+        </Checkbox>
+        <Checkbox
+          size='sm'
+          colorScheme='blue'
+          isChecked={doPublic}
+          onChange={(e) => setPublic(e.target.checked)}
+        >
+          Default public
+        </Checkbox>
+      </div>
+    </div>
+  );
+}

client/src/features/editors/EntryBlock/EntryBlock.module.scss

@@ -0,0 +1,92 @@
+@use '../../../styles/main' as *;
+
+.create {
+  padding: 0 0.5em;
+  box-sizing: border-box;
+
+  width: 100%;
+  border-radius: 8px;
+  font-size: 12px;
+
+  position: relative;
+  height: 20px;
+  margin: -8px 0;
+  transition: height 0.1s ease;
+
+  * {
+    display: none;
+  }
+
+  &:hover {
+    opacity: 1;
+    height: calc(2.5em + 20px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5%;
+    transition: height 0.15s ease;
+
+    * {
+      display: flex;
+    }
+  }
+
+  .createEvent,
+  .createDelay,
+  .createBlock {
+    width: auto;
+    padding: 0 16px;
+    height: 24px;
+    text-align: center;
+    vertical-align: center;
+    font-weight: 600;
+    line-height: 21px;
+    border-radius: 4px;
+    opacity: 0.6;
+
+    .keyboard {
+      margin-left: 4px;
+      padding: 0 4px;
+      color: #ccc;
+      border-radius: 2px;
+      font-family: Monospaced, sans-serif;
+      background-color: rgba(0, 0, 0, 0.24);
+    }
+  }
+
+  .createEvent {
+    border: 1px solid #2b6cb0;
+    color: lighten(#2b6cb0, 30%);
+
+    &:hover {
+      background-color: #2b6cb0;
+      opacity: 1;
+    }
+  }
+
+  .createDelay {
+    border: 1px solid #ecc94b;;
+    color: lighten(#ecc94b, 30%);
+
+    &:hover {
+      background-color: #ecc94b;
+      opacity: 1;
+    }
+  }
+
+  .createBlock {
+    border: 1px solid #805ad5;
+    color: lighten(#805ad5, 30%);
+
+    &:hover {
+      background-color: #805ad5;
+      opacity: 1;
+    }
+  }
+
+  .options {
+    display: flex;
+    flex-direction: column;
+    opacity: 0.65;
+  }
+}