update

src/clients/useCommands.ts

@@ -4,7 +4,11 @@ import type { Event as NostrEvent } from 'nostr-tools/event';
 import usePool from '@/clients/usePool';
 
 type UseCommands = {
-  publishTextNote: ({ content }: { content: string }) => Promise<void>;
+  publishTextNote: (props: {
+    relayUrls: string[];
+    pubkey: string;
+    content: string;
+  }) => Promise<void>;
 };
 
 const useCommands = (): UseCommands => {

src/clients/useSubscription.ts

@@ -1,4 +1,4 @@
-import { createSignal, createEffect } from 'solid-js';
+import { createSignal, createEffect, onCleanup } from 'solid-js';
 import type { Event as NostrEvent } from 'nostr-tools/event';
 import type { Filter } from 'nostr-tools/filter';
 import type { SubscriptionOptions } from 'nostr-tools/relay';
@@ -10,7 +10,8 @@ export type UseSubscriptionProps = {
   options?: SubscriptionOptions;
 };
 
-const sortEvents = (events: NostrEvent[]) => events.sort((a, b) => b.created_at - a.created_at);
+const sortEvents = (events: NostrEvent[]) =>
+  Array.from(events).sort((a, b) => b.created_at - a.created_at);
 
 const useSubscription = (propsProvider: () => UseSubscriptionProps) => {
   const pool = usePool();
@@ -36,6 +37,7 @@ const useSubscription = (propsProvider: () => UseSubscriptionProps) => {
       setEvents(sortEvents(storedEvents));
     });
 
+    // avoid updating an array too rapidly while this is fetching stored events
     const intervalId = setInterval(() => {
       if (eose) {
         clearInterval(intervalId);
@@ -44,10 +46,14 @@ const useSubscription = (propsProvider: () => UseSubscriptionProps) => {
       setEvents(sortEvents(storedEvents));
     }, 100);
 
-    return () => {
+    onCleanup(() => {
       sub.unsub();
       clearInterval(intervalId);
-    };
+    });
+  });
+
+  createEffect(() => {
+    console.log(events());
   });
 
   return { events };

src/components/ColumnItem.tsx

@@ -0,0 +1,13 @@
+import { type Component, type JSX } from 'solid-js';
+
+type ColumnItemProps = {
+  children: JSX.Element;
+};
+
+const ColumnItem: Component<ColumnItemProps> = (props) => {
+  return (
+    <div class="flex w-full flex-row gap-1 overflow-hidden border-b p-1">{props.children}</div>
+  );
+};
+
+export default ColumnItem;

src/components/NotePostForm.tsx

@@ -1,12 +1,15 @@
-import { createSignal } from 'solid-js';
-import type { Component } from 'solid-js';
+import { createSignal, type Component, type JSX } from 'solid-js';
 import PaperAirplane from 'heroicons/24/solid/paper-airplane.svg';
 
-const NotePostForm: Component = (props) => {
-  const [text, setText] = createSignal('');
+type NotePostFormProps = {
+  onPost: (textNote: { content: string }) => void;
+};
+
+const NotePostForm: Component<NotePostFormProps> = (props) => {
+  const [text, setText] = createSignal<string>('');
 
   const handleSubmit: JSX.EventHandler<HTMLFormElement, Event> = (ev) => {
-    ev.preventDefault(true);
+    ev.preventDefault();
     props.onPost({ content: text() });
   };
 

src/components/TextNote.tsx

@@ -4,6 +4,7 @@ import type { Event as NostrEvent } from 'nostr-tools/event';
 import useProfile from '@/clients/useProfile';
 import useConfig from '@/clients/useConfig';
 import TextNoteContentDisplay from '@/components/textNote/TextNoteContentDisplay';
+import ColumnItem from '@/components/ColumnItem';
 import GeneralUserMentionDisplay from './textNote/GeneralUserMentionDisplay';
 
 export type TextNoteProps = {
@@ -23,48 +24,50 @@ const TextNote: Component<TextNoteProps> = (props) => {
   const createdAt = () => new Date(props.event.created_at * 1000).toLocaleTimeString();
 
   return (
-    <div class="textnote flex w-full flex-row gap-1 overflow-hidden border-b p-1">
-      <div class="author-icon max-w-10 max-h-10 shrink-0">
-        <Show when={author()?.picture} fallback={<div class="h-10 w-10" />}>
-          <img
-            src={author()?.picture}
-            alt="icon"
-            // TODO autofit
-            class="h-10 w-10 rounded"
-          />
-        </Show>
-      </div>
-      <div class="min-w-0 flex-auto">
-        <div class="flex justify-between gap-1 text-xs">
-          <div class="author flex min-w-0 truncate">
-            {/* TODO link to author */}
-            <Show when={author()?.display_name}>
-              <div class="author-name pr-1 font-bold">{author()?.display_name}</div>
-            </Show>
-            <div class="author-username truncate">
-              <Show when={author()?.name} fallback={props.event.pubkey}>
-                @{author()?.name}
+    <div class="textnote">
+      <ColumnItem>
+        <div class="author-icon max-w-10 max-h-10 shrink-0">
+          <Show when={author()?.picture} fallback={<div class="h-10 w-10" />}>
+            <img
+              src={author()?.picture}
+              alt="icon"
+              // TODO autofit
+              class="h-10 w-10 rounded"
+            />
+          </Show>
+        </div>
+        <div class="min-w-0 flex-auto">
+          <div class="flex justify-between gap-1 text-xs">
+            <div class="author flex min-w-0 truncate">
+              {/* TODO link to author */}
+              <Show when={author()?.display_name}>
+                <div class="author-name pr-1 font-bold">{author()?.display_name}</div>
               </Show>
+              <div class="author-username truncate">
+                <Show when={author()?.name} fallback={props.event.pubkey}>
+                  @{author()?.name}
+                </Show>
+              </div>
             </div>
+            <div class="created-at shrink-0">{createdAt()}</div>
           </div>
-          <div class="created-at shrink-0">{createdAt()}</div>
-        </div>
-        <Show when={replyingToPubKeys().length > 0}>
-          <div class="text-xs">
-            {'Replying to '}
-            <For each={replyingToPubKeys()}>
-              {(pubkey: string) => (
-                <span class="pr-1 text-blue-500 underline">
-                  <GeneralUserMentionDisplay pubkey={pubkey} />
-                </span>
-              )}
-            </For>
+          <Show when={replyingToPubKeys().length > 0}>
+            <div class="text-xs">
+              {'Replying to '}
+              <For each={replyingToPubKeys()}>
+                {(pubkey: string) => (
+                  <span class="pr-1 text-blue-500 underline">
+                    <GeneralUserMentionDisplay pubkey={pubkey} />
+                  </span>
+                )}
+              </For>
+            </div>
+          </Show>
+          <div class="content whitespace-pre-wrap break-all">
+            <TextNoteContentDisplay event={props.event} />
           </div>
-        </Show>
-        <div class="content whitespace-pre-wrap break-all">
-          <TextNoteContentDisplay event={props.event} />
         </div>
-      </div>
+      </ColumnItem>
     </div>
   );
 };

src/components/Timeline.tsx

@@ -0,0 +1,27 @@
+import { For, Switch, Match, type Component } from 'solid-js';
+import type { Event as NostrEvent } from 'nostr-tools/event';
+
+import TextNote from '@/components/TextNote';
+
+export type TimelineProps = {
+  events: NostrEvent[];
+};
+
+export const Timeline: Component<TimelineProps> = (props) => {
+  return (
+    <For each={props.events}>
+      {(event) => (
+        <Switch fallback={<div>unknown event</div>}>
+          <Match when={event.kind === 1}>
+            <TextNote event={event} />
+          </Match>
+          <Match when={event.kind === 6}>
+            <div>Deprecated Repost</div>
+          </Match>
+        </Switch>
+      )}
+    </For>
+  );
+};
+
+export default Timeline;

src/components/textNote/GeneralUserMentionDisplay.tsx

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

src/hooks/useMessageBus.ts

@@ -0,0 +1,57 @@
+import { createSignal, onMount, type Signal } from 'solid-js';
+
+const [channels, setChannels]: Signal<Record<string, MessageChannel>> = createSignal({});
+
+export const CommandChannel = 'CommandChannel' as const;
+
+export type UseMessageChannelProps = {
+  id: typeof CommandChannel;
+};
+
+const useMessageChannel = (propsProvider: () => UseMessageChannelProps) => {
+  const channel = () => channels()[id];
+
+  onMount(() => {
+    const { id } = propsProvider();
+    if (channel() == null) {
+      setChannels((currentChannels) => ({
+        ...currentChannels,
+        [id]: new MessageChannel(),
+      }));
+    }
+  });
+
+  const listen = async (requestId: string, timeout = 1000) => {
+    return new Promise((resolve, reject) => {
+      const listener = (event: MessageEvent) => {
+        if (event.origin !== window.location.origin) return;
+
+        const data = JSON.parse(event.data);
+
+        if (data.requestId !== requestId) return;
+
+        channel().port2.removeEventListener('message', listener);
+        resolve(data);
+      };
+
+      setTimeout(() => {
+        reject(new Error('Timeout'));
+        channel().port2.removeEventListener('message', listener);
+      }, timeout);
+
+      window.addEventListener('message', listener, false);
+    });
+  };
+
+  return {
+    async requst(message) {
+      const requestId = Math.random();
+      const messageStr = JSON.stringify({ ...message, requestId });
+      const response = listen(requestId, timeout);
+      channel().postMessage(messageStr);
+
+      return response;
+    },
+    handle(handler) {},
+  };
+};

src/pages/Home.tsx

@@ -1,10 +1,10 @@
-import { createSignal, createEffect, Show, For } from 'solid-js';
+import { createSignal, Show, For } from 'solid-js';
 import type { Component } from 'solid-js';
 
 import Column from '@/components/Column';
 import NotePostForm from '@/components/NotePostForm';
 import SideBar from '@/components/SideBar';
-import TextNote from '@/components/TextNote';
+import Timeline from '@/components/Timeline';
 import useCommands from '@/clients/useCommands';
 import useConfig from '@/clients/useConfig';
 import useSubscription from '@/clients/useSubscription';
@@ -38,31 +38,54 @@ const Home: Component = () => {
     pubkey: pubkeyHex,
   }));
 
-  const { events: myPosts } = useSubscription(() => ({
-    relayUrls: config().relayUrls,
-    filters: [
-      {
-        kinds: [1],
-        authors: [pubkeyHex],
-        limit: 100,
-      },
-    ],
-  }));
-
   const { events: followingsPosts } = useSubscription(() => ({
     relayUrls: config().relayUrls,
     filters: [
       {
-        kinds: [1],
+        kinds: [1, 6],
         authors: followings()?.map((f) => f.pubkey) ?? [pubkeyHex],
-        limit: 100,
+        limit: 25,
         since: Math.floor(Date.now() / 1000) - 12 * 60 * 60,
       },
     ],
   }));
 
-  const handlePost = ({ content }) => {
-    commands.publishTextNote({ relayUrls: config().relayUrls, pubkey: pubkeyHex, content });
+  const { events: myPosts } = useSubscription(() => ({
+    relayUrls: config().relayUrls,
+    filters: [
+      {
+        kinds: [1, 6],
+        authors: [pubkeyHex],
+        limit: 25,
+      },
+    ],
+  }));
+
+  const { events: searchPosts } = useSubscription(() => ({
+    relayUrls: ['wss://relay.nostr.band/'],
+    filters: [
+      {
+        kinds: [1],
+        search: '#nostrstudy',
+        limit: 25,
+        since: Math.floor(Date.now() / 1000) - 12 * 60 * 60,
+      },
+    ],
+  }));
+
+  const handlePost = ({ content }: { content: string }) => {
+    commands
+      .publishTextNote({
+        relayUrls: config().relayUrls,
+        pubkey: pubkeyHex,
+        content,
+      })
+      .then(() => {
+        console.log('ok');
+      })
+      .catch((err) => {
+        console.error('error', err);
+      });
   };
 
   return (
@@ -70,10 +93,13 @@ const Home: Component = () => {
       <SideBar postForm={() => <NotePostForm onPost={handlePost} />} />
       <div class="flex flex-row overflow-y-hidden overflow-x-scroll">
         <Column name="ホーム" width="widest">
-          <For each={followingsPosts()}>{(ev) => <TextNote event={ev} />}</For>
+          <Timeline events={followingsPosts()} />
         </Column>
         <Column name="自分の投稿" width="medium">
-          <For each={myPosts()}>{(ev) => <TextNote event={ev} />}</For>
+          <Timeline events={myPosts()} />
+        </Column>
+        <Column name="#nostrstudy" width="medium">
+          <Timeline events={searchPosts()} />
         </Column>
       </div>
     </div>