update

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>
   );
 };