update

src/components/Column.tsx

@@ -22,12 +22,12 @@ const Column: Component<ColumnProps> = (props) => {
   };
 
   return (
-    <div class={`h-full shrink-0 border-r ${width()}`}>
+    <div class={`flex shrink-0 flex-col border-r ${width()}`}>
-      <div class="flex h-8 items-center border-b bg-white px-2">
+      <div class="flex h-8 shrink-0 items-center border-b bg-white px-2">
         {/* <span class="column-icon">🏠</span> */}
         <span class="column-name">{props.name}</span>
       </div>
-      <div class="h-full overflow-y-scroll pb-8">{props.children}</div>
+      <div class="flex flex-col overflow-y-scroll scroll-smooth">{props.children}</div>
     </div>
   );
 };

src/components/SideBar.tsx

@@ -8,9 +8,8 @@ import useConfig from '@/nostr/useConfig';
 import useCommands from '@/nostr/useCommands';
 import usePubkey from '@/nostr/usePubkey';
 import { useHandleCommand } from '@/hooks/useCommandBus';
-import ensureNonNull from '@/utils/ensureNonNull';
 
-const SideBar: Component = (props) => {
+const SideBar: Component = () => {
   let formTextAreaRef: HTMLTextAreaElement | undefined;
   const [config] = useConfig();
   const getPubkey = usePubkey();
@@ -18,6 +17,17 @@ const SideBar: Component = (props) => {
 
   const [formOpened, setFormOpened] = createSignal(false);
 
+  const openForm = () => {
+    setFormOpened(true);
+    setTimeout(() => {
+      formTextAreaRef?.focus?.();
+    }, 100);
+  };
+  const closeForm = () => {
+    setFormOpened(false);
+    formTextAreaRef?.blur?.();
+  };
+
   const handlePost = ({ content }: { content: string }) => {
     const pubkey = getPubkey();
     if (pubkey == null) {
@@ -41,8 +51,7 @@ const SideBar: Component = (props) => {
   useHandleCommand(() => ({
     commandType: 'openPostForm',
     handler: (cmd) => {
-      setFormOpened(true);
+      openForm();
-      formTextAreaRef?.focus?.();
     },
   }));
 
@@ -62,11 +71,7 @@ const SideBar: Component = (props) => {
         {/* <div>column 2</div> */}
       </div>
       <Show when={formOpened()}>
-        <NotePostForm
+        <NotePostForm ref={formTextAreaRef} onPost={handlePost} onClose={closeForm} />
-          ref={formTextAreaRef}
-          onPost={handlePost}
-          onClose={() => setFormOpened(false)}
-        />
       </Show>
     </div>
   );

src/components/UserDisplayName.tsx

@@ -1,7 +1,7 @@
 import { Component, Switch, Match } from 'solid-js';
 
 import useConfig from '@/nostr/useConfig';
-import useProfile, { type Profile } from '@/nostr/useProfile';
+import useProfile from '@/nostr/useProfile';
 
 type UserNameDisplayProps = {
   pubkey: string;

src/components/textNote/GeneralUserMentionDisplay.tsx

@@ -15,7 +15,7 @@ const GeneralUserMentionDisplay = (props: GeneralUserMentionDisplayProps) => {
   }));
 
   return (
-    <Show when={profile() != null} fallback={`@${props.pubkey}`}>
+    <Show when={(profile()?.name?.length ?? 0) > 0} fallback={`@${props.pubkey}`}>
       @{profile()?.name ?? props.pubkey}
     </Show>
   );

src/components/textNote/ImageDisplay.tsx

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

src/hooks/useCommandBus.ts

@@ -1,4 +1,3 @@
-import { onMount } from 'solid-js';
 import { useRequestMessage, useHandleMessage } from '@/hooks/useMessageBus';
 
 type UseHandleCommandProps = {

src/hooks/useMessageBus.ts

@@ -14,11 +14,9 @@ export type MessageChannelRequest<T> = {
   request: T;
 };
 
-export type MessageChannelResponse<T> = {
+export type MessageChannelResponse<T> =
-  requestId: string;
+  | { requestId: string; ok: true; response: T }
-  response?: T;
+  | { requestId: string; ok: false; error: any };
-  error?: any;
-};
 
 const [channels, setChannels]: Signal<Record<string, MessageChannel>> = createSignal({});
 
@@ -42,22 +40,26 @@ export const useRequestMessage = <Req, Res>(propsProvider: () => UseRequestMessa
 
   const waitResponse = (requestId: string, timeoutMs = 1000): Promise<Res> =>
     new Promise((resolve, reject) => {
+      let timeoutId: ReturnType<typeof setTimeout> | undefined;
       const listener = (event: MessageEvent) => {
         const data = event.data as MessageChannelResponse<Res>;
 
         if (data.requestId !== requestId) return;
 
         channel().port1.removeEventListener('message', listener);
-        if (data.response != null) {
+        if (data.ok) {
           resolve(data.response);
         } else {
           reject(data.error);
         }
+        if (timeoutId != null) {
+          clearTimeout(timeoutId);
+        }
       };
 
-      setTimeout(() => {
+      timeoutId = setTimeout(() => {
         channel().port1.removeEventListener('message', listener);
-        reject(new Error('TimeoutError'));
+        reject(new Error(`TimeoutError: ${requestId}`));
       }, timeoutMs);
 
       channel().port1.addEventListener('message', listener, false);
@@ -84,6 +86,9 @@ export const useHandleMessage = <Req, Res>(
   const channel = () => channels()[props().id];
 
   onMount(() => {
+    const { id } = props();
+    registerChannelIfNotExist(id);
+
     const port = channel().port2;
     const messageHandler = (event: MessageEvent) => {
       const { requestId, request } = event.data as MessageChannelRequest<Req>;
@@ -92,12 +97,12 @@ export const useHandleMessage = <Req, Res>(
 
       resultPromise
         .then((res) => {
-          const response: MessageChannelResponse<Res> = { requestId, response: res };
+          const response: MessageChannelResponse<Res> = { requestId, ok: true, response: res };
           port.postMessage(response);
         })
         .catch((err) => {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          const response: MessageChannelResponse<Res> = { requestId, error: err };
+          const response: MessageChannelResponse<Res> = { requestId, ok: false, error: err };
           port.postMessage(response);
         });
     };

src/hooks/useShortcutKeys.ts

@@ -68,7 +68,7 @@ export const useMountShortcutKeys = () => {
   useShortcutKeys({
     onShortcut: (shortcut) => {
       request(shortcut.command).then(
-        () => console.debug(`${shortcut.key} was processed successfully`),
+        () => console.debug(`shortcut key '${shortcut.key}' was processed successfully`),
         (err) => console.error(err),
       );
     },

src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { Show, For, createSignal, createEffect, onMount, type Component } from 'solid-js';
+import { createEffect, onMount, type Component } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 
 import Column from '@/components/Column';
@@ -16,9 +16,8 @@ import { useMountShortcutKeys } from '@/hooks/useShortcutKeys';
 import useLoginStatus from '@/hooks/useLoginStatus';
 import ensureNonNull from '@/utils/ensureNonNull';
 
-useMountShortcutKeys();
-
 const Home: Component = () => {
+  useMountShortcutKeys();
   const navigate = useNavigate();
   const { loginStatus } = useLoginStatus();
 
@@ -29,7 +28,8 @@ const Home: Component = () => {
   createEffect(() => {
     config().relayUrls.map(async (relayUrl) => {
       const relay = await pool().ensureRelay(relayUrl);
-      relay.on('notice', (msg) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      relay.on('notice', (msg: any) => {
         console.error(`NOTICE: ${relayUrl}: ${msg}`);
       });
     });
@@ -123,7 +123,7 @@ const Home: Component = () => {
   return (
     <div class="flex h-screen w-screen flex-row overflow-hidden">
       <SideBar />
-      <div class="flex flex-row overflow-y-hidden overflow-x-scroll">
+      <div class="flex h-full flex-row overflow-y-hidden overflow-x-scroll">
         <Column name="ホーム" width="widest">
           <Timeline events={followingsPosts()} />
         </Column>
@@ -136,6 +136,9 @@ const Home: Component = () => {
         <Column name="自分の投稿" width="medium">
           <Timeline events={myPosts()} />
         </Column>
+        <Column name="テスト" width="medium">
+          <></>
+        </Column>
       </div>
     </div>
   );