From d3a2a12e1fdcca502c0d3d6dc60d3e4c577165f2 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 26 Apr 2024 14:41:57 +0330
Subject: [PATCH] feat: add keyboard shortcut for play button

---
 src/components/buttons/play/play.tsx       | 20 ++++++++++++++++----
 src/components/toolbox/notepad/notepad.tsx |  1 +
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/buttons/play/play.tsx b/src/components/buttons/play/play.tsx
index 20960f7..877ac8a 100644
--- a/src/components/buttons/play/play.tsx
+++ b/src/components/buttons/play/play.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { BiPause, BiPlay } from 'react-icons/bi/index';
 
 import { useSoundStore } from '@/store';
@@ -15,21 +15,33 @@ export function PlayButton() {
 
   const showSnackbar = useSnackbar();
 
-  const handleClick = () => {
+  const handleToggle = useCallback(() => {
     if (noSelected) return showSnackbar('Please first select a sound to play.');
 
     toggle();
-  };
+  }, [showSnackbar, toggle, noSelected]);
 
   useEffect(() => {
     if (isPlaying && noSelected) pause();
   }, [isPlaying, pause, noSelected]);
 
+  useEffect(() => {
+    const listener = (e: KeyboardEvent) => {
+      if (e.shiftKey && e.key === ' ') {
+        handleToggle();
+      }
+    };
+
+    document.addEventListener('keydown', listener);
+
+    return () => document.removeEventListener('keydown', listener);
+  }, [handleToggle]);
+
   return (
     <button
       aria-disabled={noSelected}
       className={cn(styles.playButton, noSelected && styles.disabled)}
-      onClick={handleClick}
+      onClick={handleToggle}
     >
       {isPlaying ? (
         <>
diff --git a/src/components/toolbox/notepad/notepad.tsx b/src/components/toolbox/notepad/notepad.tsx
index de12e0d..f2b972f 100644
--- a/src/components/toolbox/notepad/notepad.tsx
+++ b/src/components/toolbox/notepad/notepad.tsx
@@ -71,6 +71,7 @@ export function Notepad({ onClose, show }: NotepadProps) {
         ref={textareaRef}
         value={note}
         onChange={e => write(e.target.value)}
+        onKeyDown={e => e.stopPropagation()}
       />
 
       <p className={styles.counter}>