fix: focus textarea when n key is pressed

src/components/NotePostForm.tsx

@@ -2,13 +2,12 @@ import { createSignal, createMemo, onMount, type Component, type JSX } from 'sol
 import PaperAirplane from 'heroicons/24/solid/paper-airplane.svg';
 
 type NotePostFormProps = {
+  ref?: HTMLTextAreaElement | undefined;
   onPost: (textNote: { content: string }) => void;
   onClose: () => void;
 };
 
 const NotePostForm: Component<NotePostFormProps> = (props) => {
-  let textAreaRef: HTMLTextAreaElement | undefined;
-
   const [text, setText] = createSignal<string>('');
 
   const clearText = () => setText('');
@@ -38,17 +37,11 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
 
   const submitDisabled = createMemo(() => text().trim().length === 0);
 
-  onMount(() => {
-    if (textAreaRef != null) {
-      textAreaRef.focus();
-    }
-  });
-
   return (
     <div class="p-1">
       <form class="flex flex-col gap-1" onSubmit={handleSubmit}>
         <textarea
-          ref={textAreaRef}
+          ref={props.ref}
           name="text"
           class="rounded border-none"
           rows={4}

src/components/SideBar.tsx

@@ -7,21 +7,27 @@ import NotePostForm from '@/components/NotePostForm';
 import useConfig from '@/clients/useConfig';
 import useCommands from '@/clients/useCommands';
 import usePubkey from '@/clients/usePubkey';
-
 import { useHandleCommand } from '@/hooks/useCommandBus';
+import ensureNonNull from '@/utils/ensureNonNull';
 
 const SideBar: Component = (props) => {
+  let formTextAreaRef: HTMLTextAreaElement | undefined;
   const [config] = useConfig();
-  const pubkey = usePubkey();
+  const getPubkey = usePubkey();
   const commands = useCommands();
 
   const [formOpened, setFormOpened] = createSignal(false);
 
   const handlePost = ({ content }: { content: string }) => {
+    const pubkey = getPubkey();
+    if (pubkey == null) {
+      console.error('pubkey is not available');
+      return;
+    }
     commands
       .publishTextNote({
         relayUrls: config().relayUrls,
-        pubkey: pubkey(),
+        pubkey,
         content,
       })
       .then(() => {
@@ -36,6 +42,7 @@ const SideBar: Component = (props) => {
     commandType: 'openPostForm',
     handler: (cmd) => {
       setFormOpened(true);
+      formTextAreaRef?.focus?.();
     },
   }));
 
@@ -55,7 +62,11 @@ const SideBar: Component = (props) => {
         {/* <div>column 2</div> */}
       </div>
       <Show when={formOpened()}>
-        <NotePostForm onPost={handlePost} onClose={() => setFormOpened(false)} />
+        <NotePostForm
+          ref={formTextAreaRef}
+          onPost={handlePost}
+          onClose={() => setFormOpened(false)}
+        />
       </Show>
     </div>
   );

src/hooks/useShortcutKeys.ts

@@ -2,6 +2,7 @@
 // type Commands = (typeof commands)[number];
 
 import { onMount, onCleanup, type JSX } from 'solid-js';
+import throttle from 'lodash/throttle';
 
 import { useRequestCommand, type Command } from '@/hooks/useCommandBus';
 
@@ -42,7 +43,7 @@ const useShortcutKeys = ({ shortcuts = defaultShortcut, onShortcut }: UseShortcu
   const shortcutsMap = createShortcutsMap(shortcuts);
 
   onMount(() => {
-    const handleKeydown = (ev: KeyboardEvent) => {
+    const handleKeydown = throttle((ev: KeyboardEvent) => {
       if (ev.type !== 'keydown') return;
       if (ev.target instanceof HTMLTextAreaElement || ev.target instanceof HTMLInputElement) return;
 
@@ -51,7 +52,7 @@ const useShortcutKeys = ({ shortcuts = defaultShortcut, onShortcut }: UseShortcu
       if (shortcut == null) return;
 
       onShortcut(shortcut);
-    };
+    }, 100);
 
     window.addEventListener('keydown', handleKeydown);
 
@@ -66,7 +67,10 @@ export const useMountShortcutKeys = () => {
 
   useShortcutKeys({
     onShortcut: (shortcut) => {
-      request(shortcut.command);
+      request(shortcut.command).then(
+        () => console.debug(`${shortcut.key} was processed successfully`),
+        (err) => console.error(err),
+      );
     },
   });
 };