V1 (#118)

* chore: upgrade minor versions
* chore: upgrade cypress
* chore: upgrade fe dependencies
* update readme
* update osx images
* update readme
* upgrade dependencies
* upgrade test dependency
* feat: add option to input autofill
* feat: autofill to the left
* chore: update docs
* chore: cleanup ci
* version bump
* style: prevent zero height bar
* fix: prevent loosing menu
* ux: improve input, no spellcheck or autocomplete
* small ux improvements in cuesheets
* feat 111/increase maximum number of events
* fix: optimistic delete issue with filter
* refact: pincode workflow
* chore: add versioning to packages

client/src/features/menu/EventListMenu.jsx

@@ -1,67 +1,114 @@
-import React, { memo, useContext } from 'react';
-import { ButtonGroup, Divider, HStack } from '@chakra-ui/react';
+import React, { memo, useCallback, useContext } from 'react';
+import { ButtonGroup, HStack } from '@chakra-ui/react';
 import { CursorContext } from '../../app/context/CursorContext';
+import { FiChevronsUp } from '@react-icons/all-files/fi/FiChevronsUp';
+import { FiChevronsDown } from '@react-icons/all-files/fi/FiChevronsDown';
+import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
+import { IoCaretUp } from '@react-icons/all-files/io5/IoCaretUp';
+import { IoCaretDown } from '@react-icons/all-files/io5/IoCaretDown';
+import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
 import MenuActionButtons from './MenuActionButtons';
-import CollapseBtn from 'common/components/buttons/CollapseBtn';
-import CursorUpBtn from '../../common/components/buttons/CursorUpBtn';
-import CursorDownBtn from '../../common/components/buttons/CursorDownBtn';
-import CursorLockedBtn from 'common/components/buttons/CursorLockedBtn';
+import PropTypes from 'prop-types';
 import style from './EventListMenu.module.css';
-import ExpandBtn from '../../common/components/buttons/ExpandBtn';
 
 const EventListMenu = ({ eventsHandler }) => {
   const { isCursorLocked, toggleCursorLocked, moveCursorUp, moveCursorDown } =
     useContext(CursorContext);
 
-  const actionHandler = (action) => {
-    switch (action) {
-      case 'event':
-        eventsHandler('add', { type: action, order: 0 });
-        break;
-      case 'delay':
-        eventsHandler('add', { type: action, order: 0 });
-        break;
-      case 'block':
-        eventsHandler('add', { type: action, order: 0 });
-        break;
-      case 'cursorUp':
-        moveCursorUp();
-        break;
-      case 'cursorDown':
-        moveCursorDown();
-        break;
-      case 'togglelock':
-        toggleCursorLocked();
-        break;
-      case 'deleteall':
-        eventsHandler('deleteall');
-        break;
-      default:
-        break;
-    }
+  const actionHandler = useCallback(
+    (action) => {
+      switch (action) {
+        case 'event':
+          eventsHandler('add', { type: action });
+          break;
+        case 'delay':
+          eventsHandler('add', { type: action });
+          break;
+        case 'block':
+          eventsHandler('add', { type: action });
+          break;
+        case 'cursorUp':
+          moveCursorUp();
+          break;
+        case 'cursorDown':
+          moveCursorDown();
+          break;
+        case 'togglelock':
+          toggleCursorLocked();
+          break;
+        case 'deleteall':
+          eventsHandler('deleteall');
+          break;
+        default:
+          break;
+      }
+    },
+    [eventsHandler, moveCursorDown, moveCursorUp, toggleCursorLocked]
+  );
+
+  const collapsingBtnProps = {
+    variant: 'outline',
+    size: 'sm',
+  };
+
+  const cursorBtnProps = {
+    size: 'sm',
+    color: 'pink.300',
+    borderColor: 'pink.300',
+    variant: 'outline',
   };
 
   return (
     <HStack className={style.headerButtons}>
       <ButtonGroup isAttached>
-        <ExpandBtn size='sm' clickhandler={() => eventsHandler('expandall')} />
-        <CollapseBtn size='sm' clickhandler={() => eventsHandler('collapseall')} />
-      </ButtonGroup>
-      <Divider orientation='vertical' />
-      <ButtonGroup isAttached>
-        <CursorUpBtn size='sm' clickhandler={() => actionHandler('cursorUp')} />
-        <CursorDownBtn size='sm' clickhandler={() => actionHandler('cursorDown')} />
-        <CursorLockedBtn
-          size='sm'
-          clickhandler={() => actionHandler('togglelock')}
-          active={isCursorLocked}
-          width='3em'
+        <TooltipActionBtn
+          clickHandler={() => eventsHandler('expandall')}
+          icon={<FiChevronsDown />}
+          tooltip='Expand All'
+          _hover={{ bg: '#ebedf0', color: '#333' }}
+          {...collapsingBtnProps}
+        />
+        <TooltipActionBtn
+          clickHandler={() => eventsHandler('collapseall')}
+          icon={<FiChevronsUp />}
+          tooltip='Collapse All'
+          _hover={{ bg: '#ebedf0', color: '#333' }}
+          {...collapsingBtnProps}
+        />
+      </ButtonGroup>
+      <ButtonGroup isAttached>
+        <TooltipActionBtn
+          {...cursorBtnProps}
+          clickHandler={() => actionHandler('cursorUp')}
+          icon={<IoCaretUp />}
+          tooltip='Move cursor up Alt + ↑'
+          _hover={{ bg: 'pink.400' }}
+        />
+        <TooltipActionBtn
+          {...cursorBtnProps}
+          clickHandler={() => actionHandler('cursorDown')}
+          icon={<IoCaretDown />}
+          tooltip='Move cursor down Alt + ↓'
+          _hover={{ bg: 'pink.400' }}
+        />
+        <TooltipActionBtn
+          {...cursorBtnProps}
+          clickHandler={() => actionHandler('togglelock')}
+          icon={<FiTarget />}
+          tooltip='Lock cursor to current'
+          width='3em'
+          backgroundColor={isCursorLocked && 'pink.400'}
+          _hover={{ bg: 'pink.300' }}
+          variant={isCursorLocked ? 'solid' : 'outline'}
         />
       </ButtonGroup>
-      <Divider orientation='vertical' />
       <MenuActionButtons actionHandler={actionHandler} size='sm' />
     </HStack>
   );
 };
 
 export default memo(EventListMenu);
+
+EventListMenu.propTypes = {
+  eventsHandler: PropTypes.func,
+};