feat: autofocus search input and keyboard shortcut

therealrinku · Apr 19, 2024 · 247a12b · 247a12b
1 parent 69e55d6
commit 247a12b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/renderer/components/SearchPopup.tsx b/src/renderer/components/SearchPopup.tsx
@@ -67,6 +67,7 @@ export default function SearchPopup({ onClose }: Props) {
           className="bg-gray-100 mx-5 px-3 rounded text-xs py-2 outline-none focus:outline focus:outline-1 focus:outline-green-500"
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
+          autoFocus={true}
         />
 
         <div className="max-h-[200px] overflow-y-auto flex flex-col gap-2 px-5 pb-5">

diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import {
   GoFile,
   GoGear,
@@ -29,6 +29,22 @@ export default function Sidebar() {
   const { notes, handleCreateNewNote } = useNotes();
   const { handleChangeDir } = useDir();
 
+  function handleShortcuts(e: KeyboardEvent) {
+    if (e.ctrlKey && e.key === 's') {
+      setShowSearchPopup(true);
+    }
+
+    // if (e.ctrlKey && e.key === 'n') {
+    //   handleCreateNewNote();
+    // }
+  }
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleShortcuts);
+
+    return () => document.removeEventListener('keydown', handleShortcuts);
+  }, []);
+
   return (
     <Fragment>
       <div className="relative bg-gray-100 min-w-64 max-w-64 min-h-screen flex flex-col items-center gap-5 py-5">