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,
+}

client/src/common/components/buttons/AddIconBtn.jsx

@@ -1,18 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiPlus } from '@react-icons/all-files/fi/FiPlus';
-
-export default function AddIconBtn(props) {
-  const { clickhandler, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiPlus />}
-      _expanded={{ bg: 'orange.300', color: 'white' }}
-      _focus={{ boxShadow: 'none' }}
-      backgroundColor={'orange.200'}
-      color={'orange.500'}
-      onClick={clickhandler}
-      {...rest}
-    />
-  );
-}

client/src/common/components/buttons/ApplyIconBtn.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
-
-export default function ApplyIconBtn(props) {
-  const { clickhandler, size, ...rest } = props;
-  return (
-    <Tooltip label='Apply delays'>
-      <IconButton
-        size={size || 'xs'}
-        icon={<FiCheck />}
-        colorScheme='orange'
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/BlockIconBtn.jsx

@@ -1,16 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiMinusCircle } from '@react-icons/all-files/fi/FiMinusCircle';
-
-export default function BlockIconBtn(props) {
-  const { clickhandler, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiMinusCircle />}
-      colorScheme='purple'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
-  );
-}

client/src/common/components/buttons/CollapseBtn.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { FiChevronsUp } from '@react-icons/all-files/fi/FiChevronsUp';
-
-export default function CollapseBtn(props) {
-  const { clickhandler, size } = props;
-  return (
-    <Tooltip label='Collapse all'>
-      <IconButton
-        size={size || 'xs'}
-        icon={<FiChevronsUp />}
-        colorScheme='white'
-        variant='outline'
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/CurrentBtn.jsx

@@ -1,18 +0,0 @@
-import { Button } from '@chakra-ui/button';
-import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
-
-export default function CurrentBtn(props) {
-  const { clickhandler, active } = props;
-  return (
-    <Button
-      size={props.size || 'xs'}
-      leftIcon={<FiTarget />}
-      colorScheme='whiteAlpha'
-      variant={active ? 'solid' : 'outline'}
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-    >
-      Goto Current
-    </Button>
-  );
-}

client/src/common/components/buttons/CursorDownBtn.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { IoCaretDown } from '@react-icons/all-files/io5/IoCaretDown';
-
-export default function CursorDownBtn(props) {
-  const { clickhandler, active, ref, size } = props;
-  return (
-    <Tooltip label='Move cursor down Alt + ↓'>
-      <IconButton
-        ref={ref}
-        size={size || 'xs'}
-        icon={<IoCaretDown />}
-        color={active ? 'pink.100' : 'pink.300'}
-        borderColor={active ? undefined : 'pink.300'}
-        backgroundColor={active ? 'pink.400' : undefined}
-        variant={active ? 'solid' : 'outline'}
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/CursorLockedBtn.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { FiTarget } from '@react-icons/all-files/fi/FiTarget';
-
-export default function CursorLockedBtn(props) {
-  const { clickhandler, active, ref, size, ...rest } = props;
-  return (
-    <Tooltip label='Lock cursor to current'>
-      <IconButton
-        ref={ref}
-        size={size || 'xs'}
-        icon={<FiTarget />}
-        color={active ? 'pink.100' : 'pink.300'}
-        borderColor={active ? undefined : 'pink.300'}
-        backgroundColor={active ? 'pink.400' : undefined}
-        variant={active ? 'solid' : 'outline'}
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/CursorUpBtn.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { IoCaretUp } from '@react-icons/all-files/io5/IoCaretUp';
-
-export default function CursorUpBtn(props) {
-  const { clickhandler, active, ref, size } = props;
-  return (
-    <Tooltip label='Move cursor up Alt + ↑'>
-      <IconButton
-        ref={ref}
-        size={size || 'xs'}
-        icon={<IoCaretUp />}
-        color={active ? 'pink.100' : 'pink.300'}
-        borderColor={active ? undefined : 'pink.300'}
-        backgroundColor={active ? 'pink.400' : undefined}
-        variant={active ? 'solid' : 'outline'}
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/DelayIconBtn.jsx

@@ -1,16 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiClock } from '@react-icons/all-files/fi/FiClock';
-
-export default function DelayIconBtn(props) {
-  const { clickhandler, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiClock />}
-      colorScheme='yellow'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
-  );
-}

client/src/common/components/buttons/DeleteIconBtn.jsx

@@ -1,29 +0,0 @@
-import React, { useState } from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoRemove } from '@react-icons/all-files/io5/IoRemove';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function DeleteIconBtn(props) {
-  const { actionHandler, size, ...rest } = props;
-  const [loading, setLoading] = useState(false);
-
-  const handleClick = () => {
-    setLoading(true);
-    actionHandler('delete');
-  };
-
-  return (
-    <Tooltip label='Delete'>
-      <IconButton
-        size={size || 'xs'}
-        icon={<IoRemove />}
-        colorScheme='red'
-        onClick={handleClick}
-        _focus={{ boxShadow: 'none' }}
-        disabled={loading}
-        isLoading={loading}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/EnableBtn.jsx

@@ -2,19 +2,26 @@ import React from 'react';
 import { IoCloseSharp } from '@react-icons/all-files/io5/IoCloseSharp';
 import { IoCheckmarkSharp } from '@react-icons/all-files/io5/IoCheckmarkSharp';
 import { Button } from '@chakra-ui/button';
+import PropTypes from 'prop-types';
 
 export default function EnableBtn(props) {
-  const { active, text, actionHandler, size } = props;
+  const { active, text, actionHandler, size = 'xs' } = props;
   return (
     <Button
-      size={size || 'xs'}
+      size={size}
       leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
       colorScheme='blue'
       variant={active ? 'solid' : 'outline'}
       onClick={actionHandler}
-      _focus={{ boxShadow: 'none' }}
     >
       {text}
     </Button>
   );
 }
+
+EnableBtn.propTypes = {
+  active: PropTypes.bool,
+  text: PropTypes.string,
+  actionHandler: PropTypes.func,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+}

client/src/common/components/buttons/ExpandBtn.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { Tooltip } from '@chakra-ui/tooltip';
-import { FiChevronsDown } from '@react-icons/all-files/fi/FiChevronsDown';
-
-export default function ExpandBtn(props) {
-  const { clickhandler, size } = props;
-  return (
-    <Tooltip label='Expand all'>
-      <IconButton
-        size={size || 'xs'}
-        icon={<FiChevronsDown />}
-        colorScheme='white'
-        variant='outline'
-        onClick={clickhandler}
-        _focus={{ boxShadow: 'none' }}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/NextIconBtn.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoPlaySkipForward } from '@react-icons/all-files/io5/IoPlaySkipForward';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function NextIconBtn(props) {
-  const { clickhandler, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Next event' openDelay={500} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoPlaySkipForward size='22px' />}
-        colorScheme='whiteAlpha'
-        backgroundColor='#ffffff11'
-        variant='outline'
-        onClick={clickhandler}
-        width={90}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/OnAirIconBtn.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoMicSharp } from '@react-icons/all-files/io5/IoMicSharp';
-import { IoMicOffOutline } from '@react-icons/all-files/io5/IoMicOffOutline';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function OnAirIconBtn(props) {
-  const { actionHandler, active, size, ...rest } = props;
-  return (
-    <Tooltip label={active ? 'Go Off Air' : 'Go On Air'} openDelay={500}>
-      <IconButton
-        size={size || 'xs'}
-        icon={active ? <IoMicSharp size='24px' /> : <IoMicOffOutline size='24px' />}
-        colorScheme='blue'
-        variant={active ? 'solid' : 'outline'}
-        onClick={() => actionHandler('update', { field: 'isPublic', value: !active })}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/PauseIconBtn.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
 
 export default function PauseIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
@@ -10,12 +11,19 @@ export default function PauseIconBtn(props) {
       <IconButton
         icon={<IoPause size='24px' />}
         colorScheme='orange'
+        _hover={!disabled && { bg: 'orange.400' }}
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         width={120}
-        _focus={{ boxShadow: 'none' }}
+        disabled={disabled}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+PauseIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
+}

client/src/common/components/buttons/PrevIconBtn.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoPlaySkipBack } from '@react-icons/all-files/io5/IoPlaySkipBack';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function PrevIconBtn(props) {
-  const { clickhandler, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Previous event' openDelay={500} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoPlaySkipBack size='22px' />}
-        colorScheme='whiteAlpha'
-        backgroundColor='#ffffff11'
-        variant='outline'
-        onClick={clickhandler}
-        width={90}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/PublicIconBtn.jsx

@@ -2,20 +2,26 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { Tooltip } from '@chakra-ui/tooltip';
 import { FiUsers } from '@react-icons/all-files/fi/FiUsers';
+import PropTypes from 'prop-types';
 
 export default function PublicIconBtn(props) {
-  const { actionHandler, active, size, ...rest } = props;
+  const { actionHandler, active, size = 'xs', ...rest } = props;
   return (
     <Tooltip label={active ? 'Make event private' : 'Make event public'}>
       <IconButton
-        size={size || 'xs'}
+        size={size}
         icon={<FiUsers />}
         colorScheme='blue'
         variant={active ? 'solid' : 'outline'}
         onClick={() => actionHandler('update', { field: 'isPublic', value: !active })}
-        _focus={{ boxShadow: 'none' }}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+PublicIconBtn.propTypes = {
+  actionHandler: PropTypes.func,
+  active: PropTypes.bool,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+};

client/src/common/components/buttons/QuitIconBtn.jsx

@@ -0,0 +1,67 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { Button, IconButton } from '@chakra-ui/button';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+} from '@chakra-ui/modal';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiPower } from '@react-icons/all-files/fi/FiPower';
+import PropTypes from 'prop-types';
+
+export default function QuitIconBtn(props) {
+  const { clickHandler, size = 'lg', ...rest } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const onClose = () => setIsOpen(false);
+  const cancelRef = useRef();
+
+  const handleShutdown = useCallback(() => {
+    onClose();
+    clickHandler();
+  },[clickHandler]);
+
+  return (
+    <>
+      <Tooltip label='Quit Application'>
+        <IconButton
+          size={size}
+          icon={<FiPower />}
+          colorScheme='red'
+          variant='outline'
+          isRound
+          onClick={() => setIsOpen(true)}
+          _focus={{ boxShadow: 'none' }}
+          {...rest}
+        />
+      </Tooltip>
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Server Shutdown
+            </AlertDialogHeader>
+            <AlertDialogBody>
+              This will shutdown the program and all running servers. Are you sure?
+            </AlertDialogBody>
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button colorScheme='red' onClick={handleShutdown} ml={3}>
+                Shutdown
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+}
+
+QuitIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+};

client/src/common/components/buttons/ReloadIconBtn.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoArrowUndo } from '@react-icons/all-files/io5/IoArrowUndo';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function ReloadIconButton(props) {
-  const { clickhandler, disabled, ...rest } = props;
-  return (
-    <Tooltip label='Reload event' openDelay={500} shouldWrapChildren={disabled}>
-      <IconButton
-        icon={<IoArrowUndo size='22px' />}
-        colorScheme='whiteAlpha'
-        backgroundColor='#ffffff05'
-        variant='outline'
-        onClick={clickhandler}
-        width={90}
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/buttons/RollIconBtn.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { IoTimeOutline } from '@react-icons/all-files/io5/IoTimeOutline';
 import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
 
 export default function RollIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
@@ -13,9 +14,15 @@ export default function RollIconBtn(props) {
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         width={120}
-        _focus={{ boxShadow: 'none' }}
+        disabled={disabled}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+RollIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
+}

client/src/common/components/buttons/StartIconBtn.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
 import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
 
 export default function StartIconBtn(props) {
   const { clickhandler, active, disabled, ...rest } = props;
@@ -13,9 +14,15 @@ export default function StartIconBtn(props) {
         variant={active ? 'solid' : 'outline'}
         onClick={clickhandler}
         width={120}
-        _focus={{ boxShadow: 'none' }}
+        disabled={disabled}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+StartIconBtn.propTypes = {
+  clickhandler: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
+}

client/src/common/components/buttons/TooltipActionBtn.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
+
+export default function TooltipActionBtn(props) {
+  const { clickHandler, icon, color, size='xs', tooltip, ...rest } = props;
+  return (
+    <Tooltip label={tooltip}>
+      <IconButton
+        aria-label={tooltip}
+        size={size}
+        icon={icon}
+        onClick={clickHandler}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+TooltipActionBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  icon: PropTypes.element,
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  tooltip: PropTypes.string
+}

client/src/common/components/buttons/TooltipLoadingActionBtn.jsx

@@ -0,0 +1,36 @@
+import React, { useCallback, useState } from 'react';
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
+
+export default function TooltipLoadingActionBtn(props) {
+  const { clickHandler, icon, color, size = 'xs', tooltip, ...rest } = props;
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = useCallback(() => {
+    setLoading(true);
+    clickHandler();
+  },[clickHandler, setLoading]);
+
+  return (
+    <Tooltip label={tooltip} shouldWrapChildren={loading}>
+      <IconButton
+        aria-label={tooltip}
+        size={size}
+        icon={icon}
+        onClick={handleClick}
+        disabled={loading}
+        isLoading={loading}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+TooltipLoadingActionBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  icon: PropTypes.element,
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
+  tooltip: PropTypes.string,
+};

client/src/common/components/buttons/TransportIconBtn.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
+
+export default function TransportIconBtn(props) {
+  const { clickHandler, icon, tooltip, disabled, ...rest } = props;
+  return (
+    <Tooltip label={tooltip} openDelay={500} shouldWrapChildren={disabled}>
+      <IconButton
+        icon={icon}
+        colorScheme='white'
+        variant='outline'
+        _hover={!disabled && { bg: '#ebedf0', color: '#333' }}
+        onClick={clickHandler}
+        width={90}
+        disabled={disabled}
+        {...rest}
+      />
+    </Tooltip>
+  );
+}
+
+TransportIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  icon: PropTypes.element,
+  tooltip: PropTypes.string,
+  disabled: PropTypes.bool,
+};

client/src/common/components/buttons/TrashIconBtn.jsx

@@ -1,16 +0,0 @@
-import { IconButton } from '@chakra-ui/button';
-import { FiTrash2 } from '@react-icons/all-files/fi/FiTrash2';
-
-export default function TrashIconBtn(props) {
-  const { clickhandler, ...rest } = props;
-  return (
-    <IconButton
-      size={props.size || 'xs'}
-      icon={<FiTrash2 />}
-      colorScheme='red'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-      {...rest}
-    />
-  );
-}

client/src/common/components/buttons/UnloadIconBtn.jsx

@@ -2,20 +2,26 @@ import React from 'react';
 import { IconButton } from '@chakra-ui/button';
 import { IoStop } from '@react-icons/all-files/io5/IoStop';
 import { Tooltip } from '@chakra-ui/tooltip';
+import PropTypes from 'prop-types';
 
 export default function UnloadIconBtn(props) {
-  const { clickhandler, disabled, ...rest } = props;
+  const { clickHandler, disabled, ...rest } = props;
   return (
     <Tooltip label='Unload event' openDelay={500} shouldWrapChildren={disabled}>
       <IconButton
         icon={<IoStop size='22px' />}
         colorScheme='red'
         variant='outline'
-        onClick={clickhandler}
+        onClick={clickHandler}
         width={90}
-        _focus={{ boxShadow: 'none' }}
+        disabled={disabled}
         {...rest}
       />
     </Tooltip>
   );
 }
+
+UnloadIconBtn.propTypes = {
+  clickHandler: PropTypes.func,
+  disabled: PropTypes.bool,
+};

client/src/common/components/buttons/VisibleIconBtn.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { IconButton } from '@chakra-ui/button';
-import { IoSunny } from '@react-icons/all-files/io5/IoSunny';
-import { Tooltip } from '@chakra-ui/tooltip';
-
-export default function VisibleIconBtn(props) {
-  const { actionHandler, active, size, ...rest } = props;
-  return (
-    <Tooltip label={active ? 'Make invisible' : 'Make visible'} openDelay={500}>
-      <IconButton
-        size={size || 'xs'}
-        icon={<IoSunny size='18px' />}
-        colorScheme='blue'
-        variant={active ? 'solid' : 'outline'}
-        onClick={() =>
-          actionHandler('update', { field: 'isPublic', value: !active })
-        }
-        _focus={{ boxShadow: 'none' }}
-        {...rest}
-      />
-    </Tooltip>
-  );
-}

client/src/common/components/errorBoundary/ErrorBoundary.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { LoggingContext } from '../../../app/context/LoggingContext';
 import style from './ErrorBoundary.module.scss';
+const appVersion = require('../../../../package.json').version;
 
 class ErrorBoundary extends React.Component {
   static contextType = LoggingContext;
@@ -22,7 +23,11 @@ class ErrorBoundary extends React.Component {
       error: error,
       errorInfo: info,
     });
-    this.context.emitError(error.toString());
+    try {
+      this.context.emitError(error.toString());
+    } catch {
+      console.log('Unable to emit error')
+    }
     this.reportContent = `${error} ${info.componentStack}`;
   }
 
@@ -35,10 +40,27 @@ class ErrorBoundary extends React.Component {
             <p>Something went wrong</p>
             <p
               className={style.report}
-              onClick={() => navigator.clipboard.writeText(this.reportContent)}
+              onClick={() => {
+                if (navigator.clipboard) {
+                  const copyContent = `ontime version ${appVersion} \n ${this.reportContent}`;
+                  navigator.clipboard.writeText(copyContent);
+                }
+              }}
             >
               Copy error
             </p>
+            <p
+              className={style.report}
+              onClick={() => {
+                if (window.process.type === 'renderer') {
+                  window.ipcRenderer.send('reload');
+                } else {
+                  window.location.reload();
+                }
+              }}
+            >
+              Reload interface
+            </p>
           </div>
         </div>
       );

client/src/common/components/eventTimes/EventTimes.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import EditableTimer from 'common/input/EditableTimer';
 import { LoggingContext } from '../../../app/context/LoggingContext';
 import { validateTimes } from '../../../app/entryValidator';
@@ -15,29 +15,28 @@ export default function EventTimes(props) {
    * @param {number} val - field value
    * @return {boolean}
    */
-  const handleValidate = (entry, val) => {
-    if (val == null || timeStart == null || timeEnd == null) return true;
-    if (timeStart === 0) return true;
+  const handleValidate = useCallback(
+    () => (entry, val) => {
+      if (val == null || timeStart == null || timeEnd == null) return true;
+      if (timeStart === 0) return true;
 
-    let start = timeStart;
-    let end = timeEnd;
-    if (entry === 'timeStart') {
-      start = val;
-    } else if (entry === 'timeEnd') {
-      end = val;
-    } else if (entry === 'durationOverride'){
-      return true;
-    } else {
-      return false
-    }
+      let start = timeStart;
+      let end = timeEnd;
+      if (entry === 'timeStart') {
+        start = val;
+      } else if (entry === 'timeEnd') {
+        end = val;
+      } else return entry === 'durationOverride';
 
-    const valid = validateTimes(start, end);
-    // give warning but not enforce validation
-    if (!valid.value) {
-      emitWarning(`Time Input Warning: ${valid.catch}`);
-    }
-    return valid.value;
-  };
+      const valid = validateTimes(start, end);
+      // give warning but not enforce validation
+      if (!valid.value) {
+        emitWarning(`Time Input Warning: ${valid.catch}`);
+      }
+      return valid.value;
+    },
+    [emitWarning, timeEnd, timeStart]
+  );
 
   return (
     <>

client/src/common/components/eventTimes/EventTimesVertical.jsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { LoggingContext } from '../../../app/context/LoggingContext';
 import { validateTimes } from '../../../app/entryValidator';
 import PropTypes from 'prop-types';
@@ -16,25 +16,28 @@ export default function EventTimesVertical(props) {
    * @param {number} val - field value
    * @return {boolean}
    */
-  const handleValidate = (entry, val) => {
-    if (val == null || timeStart == null || timeEnd == null) return true;
-    if (timeStart === 0) return true;
+  const handleValidate = useCallback(
+    () => (entry, val) => {
+      if (val == null || timeStart == null || timeEnd == null) return true;
+      if (timeStart === 0) return true;
 
-    let start = timeStart;
-    let end = timeEnd;
-    if (entry === 'timeStart') {
-      start = val;
-    } else if (entry === 'timeEnd') {
-      end = val;
-    } else return entry === 'durationOverride';
+      let start = timeStart;
+      let end = timeEnd;
+      if (entry === 'timeStart') {
+        start = val;
+      } else if (entry === 'timeEnd') {
+        end = val;
+      } else return entry === 'durationOverride';
 
-    const valid = validateTimes(start, end);
-    // give warning but not enforce validation
-    if (!valid.value) {
-      emitWarning(`Time Input Warning: ${valid.catch}`);
-    }
-    return valid.value;
-  };
+      const valid = validateTimes(start, end);
+      // give warning but not enforce validation
+      if (!valid.value) {
+        emitWarning(`Time Input Warning: ${valid.catch}`);
+      }
+      return valid.value;
+    },
+    [emitWarning, timeEnd, timeStart]
+  );
 
   return delay != null && delay !== 0 ? (
     <TimesDelayed

client/src/common/components/myProgressBar/MyProgressBar.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { clamp } from 'app/utils/math';
+import PropTypes from 'prop-types';
 import styles from './MyProgressBar.module.scss';
 
 export default function MyProgressBar(props) {
@@ -22,3 +23,9 @@ export default function MyProgressBar(props) {
     </div>
   );
 }
+
+MyProgressBar.propTypes = {
+  now: PropTypes.number,
+  complete: PropTypes.number,
+  showElapsed: PropTypes.bool,
+}

client/src/common/components/nav/NavLogo.jsx

@@ -10,9 +10,9 @@ export default function NavLogo(props) {
   const { isHidden } = props;
   const [showNav, setShowNav] = useState(false);
 
-  const handleClick = () => {
-    setShowNav(!showNav);
-  };
+  const handleClick = useCallback(() => {
+    setShowNav((prev) => !prev);
+  }, []);
 
   // Handle keyboard shortcuts
   const handleKeyPress = useCallback((e) => {
@@ -35,6 +35,10 @@ export default function NavLogo(props) {
   }, [handleKeyPress]);
 
   const baseOpacity = isHidden ? 0 : 0.5;
+  const tabProps = {
+    className: style.navItem,
+    tabIndex: 0,
+  };
 
   return (
     <motion.div
@@ -52,25 +56,23 @@ export default function NavLogo(props) {
             exit={{ opacity: 0, scaleY: 0, y: -50 }}
             className={style.nav}
           >
-            <Link to='/timer' className={style.navItem} tabIndex={1}>
-              Timer
-            </Link>
-            <Link to='/minimal' className={style.navItem} tabIndex={2}>
+            <Link to='/timer' {...tabProps}>Timer</Link>
+            <Link to='/minimal' {...tabProps}>
               Minimal Timer
             </Link>
-            <Link to='/sm' className={style.navItem} tabIndex={3}>
+            <Link to='/sm' {...tabProps}>
               Backstage
             </Link>
-            <Link to='/public' className={style.navItem} tabIndex={4}>
+            <Link to='/public' {...tabProps}>
               Public
             </Link>
-            <Link to='/lower' className={style.navItem} tabIndex={5}>
+            <Link to='/lower' {...tabProps}>
               Lower Thirds
             </Link>
-            <Link to='/pip' className={style.navItem} tabIndex={6}>
+            <Link to='/pip' {...tabProps}>
               PIP
             </Link>
-            <Link to='/studio' className={style.navItem} tabIndex={7}>
+            <Link to='/studio' {...tabProps}>
               Studio Clock
             </Link>
           </motion.div>

client/src/common/components/protectRoute/ProtectRoute.jsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import style from './ProtectRoute.module.scss';
 import { HStack, PinInput, PinInputField } from '@chakra-ui/react';
 import { IconButton } from '@chakra-ui/button';
 import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
 import { AppContext } from '../../../app/context/AppContext';
+import style from './ProtectRoute.module.scss';
 
 export default function ProtectRoute({ children }) {
   const isLocal =
@@ -36,7 +36,7 @@ export default function ProtectRoute({ children }) {
         handleValidation();
       }
     },
-    [handleValidation],
+    [handleValidation]
   );
 
   useEffect(() => {
@@ -51,39 +51,38 @@ export default function ProtectRoute({ children }) {
 
   if (isLocal || auth) {
     return children;
-  } else {
-    return (
-      <div className={style.container}>
-        ontime
-        <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
-          <PinInput
-            type='alphanumeric'
-            size='lg'
-            mask
-            autoFocus
-            value={pin}
-            onChange={(value) => {
-              setFailed(false);
-              setPin(value);
-            }}
-          >
-            <PinInputField />
-            <PinInputField />
-            <PinInputField />
-            <PinInputField />
-          </PinInput>
-          <IconButton
-            aria-label='Enter'
-            size='lg'
-            isRound
-            icon={<FiCheck />}
-            style={{ fontSize: '1.5em' }}
-            onClick={() => handleValidation()}
-          />
-        </HStack>
-      </div>
-    );
   }
+
+  return (
+    <div className={style.container}>
+      ontime
+      <HStack spacing='10px' className={failed ? style.pin__failed : style.pin}>
+        <PinInput
+          type='alphanumeric'
+          size='lg'
+          mask
+          autoFocus
+          value={pin}
+          onChange={(value) => {
+            setFailed(false);
+            setPin(value);
+          }}
+        >
+          <PinInputField />
+          <PinInputField />
+          <PinInputField />
+          <PinInputField />
+        </PinInput>
+        <IconButton
+          aria-label='Enter'
+          size='lg'
+          isRound
+          icon={<FiCheck />}
+          onClick={() => handleValidation()}
+        />
+      </HStack>
+    </div>
+  );
 }
 
 ProtectRoute.propTypes = {

client/src/common/components/views/Paginator.jsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import TodayItem from './TodayItem';
 import { useInterval } from 'app/hooks/useInterval';
 import PropTypes from 'prop-types';
-import style from './Paginator.module.scss';
 import Empty from '../../state/Empty';
+import style from './Paginator.module.scss';
 
 export default function Paginator(props) {
   const {
@@ -64,27 +64,27 @@ export default function Paginator(props) {
 
   if (events?.length < 1) {
     return <Empty text='No events to show' />;
-  } else {
-    return (
-      <div className={style.entries}>
-        {page.map((e) => {
-          if (e.id === selectedId) selectedState = 1;
-          else if (selectedState === 1) selectedState = 2;
-          return (
-            <TodayItem
-              key={e.id}
-              selected={selectedState}
-              timeStart={e.timeStart}
-              timeEnd={e.timeEnd}
-              title={e.title}
-              colour={isBackstage ? e.colour : ''}
-              backstageEvent={!e.isPublic}
-            />
-          );
-        })}
-      </div>
-    );
   }
+
+  return (
+    <div className={style.entries}>
+      {page.map((e) => {
+        if (e.id === selectedId) selectedState = 1;
+        else if (selectedState === 1) selectedState = 2;
+        return (
+          <TodayItem
+            key={e.id}
+            selected={selectedState}
+            timeStart={e.timeStart}
+            timeEnd={e.timeEnd}
+            title={e.title}
+            colour={isBackstage ? e.colour : ''}
+            backstageEvent={!e.isPublic}
+          />
+        );
+      })}
+    </div>
+  );
 }
 
 Paginator.propTypes = {

client/src/common/components/views/TitleCard.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import style from './TitleCard.module.scss';
 
 export default function TitleCard(props) {
@@ -13,3 +14,10 @@ export default function TitleCard(props) {
     </>
   );
 }
+
+TitleCard.propTypes = {
+  label: PropTypes.string,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  presenter: PropTypes.string,
+}

client/src/common/components/views/TitleSide.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import style from './TitleSide.module.scss';
 
 export default function TitleSide(props) {
@@ -17,3 +18,11 @@ export default function TitleSide(props) {
     </>
   );
 }
+
+TitleSide.propTypes = {
+  type: PropTypes.oneOf(['now', 'next']),
+  label: PropTypes.string,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  presenter: PropTypes.string,
+}