feat: support elementary keyboard shortcuts

src/components/NotePostForm.tsx

@@ -1,11 +1,14 @@
-import { createSignal, createMemo, type Component, type JSX } from 'solid-js';
+import { createSignal, createMemo, onMount, type Component, type JSX } from 'solid-js';
 import PaperAirplane from 'heroicons/24/solid/paper-airplane.svg';
 
 type NotePostFormProps = {
   onPost: (textNote: { content: string }) => void;
+  onClose: () => void;
 };
 
 const NotePostForm: Component<NotePostFormProps> = (props) => {
+  let textAreaRef: HTMLTextAreaElement | undefined;
+
   const [text, setText] = createSignal<string>('');
 
   const clearText = () => setText('');
@@ -28,15 +31,24 @@ const NotePostForm: Component<NotePostFormProps> = (props) => {
   const handleKeyDown: JSX.EventHandlerUnion<HTMLTextAreaElement, KeyboardEvent> = (ev) => {
     if (ev.key === 'Enter' && (ev.ctrlKey || ev.metaKey)) {
       submit();
+    } else if (ev.key === 'Escape') {
+      props.onClose();
     }
   };
 
   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}
           name="text"
           class="rounded border-none"
           rows={4}

src/components/SideBar.tsx

@@ -1,15 +1,44 @@
-import { createSignal, Show } from 'solid-js';
-import type { Component } from 'solid-js';
+import { createSignal, Show, type JSX, Component } from 'solid-js';
 import MagnifyingGlass from 'heroicons/24/solid/magnifying-glass.svg';
 import PencilSquare from 'heroicons/24/solid/pencil-square.svg';
 
-type SideBarProps = {
-  postForm: () => JSX.Element;
-};
+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';
+
+const SideBar: Component = (props) => {
+  const [config] = useConfig();
+  const pubkey = usePubkey();
+  const commands = useCommands();
 
-const SideBar: Component<SideBarProps> = (props) => {
   const [formOpened, setFormOpened] = createSignal(false);
 
+  const handlePost = ({ content }: { content: string }) => {
+    commands
+      .publishTextNote({
+        relayUrls: config().relayUrls,
+        pubkey: pubkey(),
+        content,
+      })
+      .then(() => {
+        console.log('ok');
+      })
+      .catch((err) => {
+        console.error('error', err);
+      });
+  };
+
+  useHandleCommand(() => ({
+    commandType: 'openPostForm',
+    handler: (cmd) => {
+      setFormOpened(true);
+    },
+  }));
+
   return (
     <div class="flex shrink-0 flex-row border-r bg-sidebar-bg">
       <div class="flex w-14 flex-auto flex-col items-center gap-3 border-r border-rose-200 py-5">
@@ -25,7 +54,9 @@ const SideBar: Component<SideBarProps> = (props) => {
         {/* <div>column 1</div> */}
         {/* <div>column 2</div> */}
       </div>
-      <Show when={formOpened()}>{() => props.postForm()}</Show>
+      <Show when={formOpened()}>
+        <NotePostForm onPost={handlePost} onClose={() => setFormOpened(false)} />
+      </Show>
     </div>
   );
 };

src/components/textNote/ImageDisplay.tsx

@@ -25,7 +25,7 @@ const ImageDisplay: Component<ImageDisplayProps> = (props) => {
   return (
     <a href={props.url} target="_blank" rel="noopener noreferrer">
       <img
-        class="max-h-full max-w-full rounded object-contain shadow"
+        class="inline-block max-h-64 max-w-full rounded object-contain shadow"
         src={fixUrl(url())}
         alt={props.url}
       />