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/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>