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/common/components/buttons/ActionButtons.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
+import { IconButton } from '@chakra-ui/button';
+import { FiClock } from '@react-icons/all-files/fi/FiClock';
+import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
+import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
+import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
+
+export default function ActionButtons(props) {
+  const { showAdd, showDelay, showBlock, actionHandler } = props;
+
+  const menuStyle = {
+    color: '#000000',
+    backgroundColor: 'rgba(255,255,255,1)',
+  };
+
+  return (
+    <Menu isLazy lazyBehavior='unmount'>
+      <Tooltip label='Add ...' delay={500}>
+        <MenuButton
+          as={IconButton}
+          aria-label='Options'
+          size='xs'
+          icon={<FiPlus />}
+          _expanded={{ bg: 'orange.300', color: 'white' }}
+          _focus={{ boxShadow: 'none' }}
+          backgroundColor='orange.200'
+          color='orange.500'
+        />
+      </Tooltip>
+      <MenuList style={menuStyle}>
+        <MenuItem icon={<FiPlus />} onClick={() => actionHandler('event')} isDisabled={!showAdd}>
+          Add Event after
+        </MenuItem>
+
+        <MenuItem icon={<FiClock />} onClick={() => actionHandler('delay')} isDisabled={!showDelay}>
+          Add Delay after
+        </MenuItem>
+        <MenuItem
+          icon={<FiMinusCircle />}
+          onClick={() => actionHandler('block')}
+          isDisabled={!showBlock}
+        >
+          Add Block after
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+}
+
+ActionButtons.propTypes = {
+  showAdd: PropTypes.bool,
+  showDelay: PropTypes.bool,
+  showBlock: PropTypes.bool,
+  actionHandler: PropTypes.func,
+}