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/menu/EventListMenu.jsx

@@ -1,16 +1,16 @@
-import { memo, useMemo } from 'react';
+import { memo, useContext } from 'react';
 import { Divider } from '@chakra-ui/react';
-import style from './EventListMenu.module.css';
+import { CursorContext } from '../../app/context/CursorContext';
 import MenuActionButtons from './MenuActionButtons';
 import CollapseBtn from 'common/components/buttons/CollapseBtn';
-import ExpandBtn from 'common/components/buttons/ExpandBtn';
-import { SelectSetting, HandleOptions } from 'app/context/settingsAtom';
-import { useAtom } from 'jotai';
-import LockIconBtn from 'common/components/buttons/LockIconBtn';
+import CursorUpBtn from '../../common/components/buttons/CursorUpBtn';
+import CursorDownBtn from '../../common/components/buttons/CursorDownBtn';
+import CursorLockedBtn from 'common/components/buttons/CursorLockedBtn';
+import style from './EventListMenu.module.css';
 
 const EventListMenu = ({ eventsHandler }) => {
-  const [cursorSettings] = useAtom(useMemo(() => SelectSetting('cursor'), []));
-  const [, SetOption] = useAtom(HandleOptions);
+  const { isCursorLocked, toggleCursorLocked, moveCursorUp, moveCursorDown } =
+    useContext(CursorContext);
 
   const actionHandler = (action) => {
     switch (action) {
@@ -23,12 +23,14 @@ const EventListMenu = ({ eventsHandler }) => {
       case 'block':
         eventsHandler('add', { type: action, order: 0 });
         break;
+      case 'cursorUp':
+        moveCursorUp();
+        break;
+      case 'cursorDown':
+        moveCursorDown();
+        break;
       case 'togglelock':
-        let newSet = 'locked';
-        if (cursorSettings === 'locked') {
-          newSet = 'unlocked';
-        }
-        SetOption({ cursor: newSet });
+        toggleCursorLocked();
         break;
       case 'deleteall':
         eventsHandler('deleteall');
@@ -40,16 +42,14 @@ const EventListMenu = ({ eventsHandler }) => {
 
   return (
     <div className={style.headerButtons}>
-      <CollapseBtn
-        size='sm'
-        clickhandler={() => eventsHandler('collapseall')}
-      />
-      <ExpandBtn size='sm' clickhandler={() => eventsHandler('expandall')} />
+      <CollapseBtn size='sm' clickhandler={() => eventsHandler('collapseall')} />
       <Divider orientation='vertical' />
-      <LockIconBtn
+      <CursorUpBtn size='sm' clickhandler={() => actionHandler('cursorUp')} />
+      <CursorDownBtn size='sm' clickhandler={() => actionHandler('cursorDown')} />
+      <CursorLockedBtn
         size='sm'
         clickhandler={() => actionHandler('togglelock')}
-        active={cursorSettings === 'locked'}
+        active={isCursorLocked}
       />
       <Divider orientation='vertical' />
       <MenuActionButtons actionHandler={actionHandler} size='sm' />