implement parseTextNote

src/components/Column.tsx

@@ -1,9 +1,4 @@
-import type { Component } from 'solid-js';
-
-type ColumnProps = {
-  width: 'wide' | 'medium' | 'narrow' | null | undefined;
-  children: JSX.Element;
-};
+import type { Component, JSX } from 'solid-js';
 
 const widthToClass = {
   widest: 'w-[500px]',
@@ -12,6 +7,12 @@ const widthToClass = {
   narrow: 'w-[270px]',
 } as const;
 
+type ColumnProps = {
+  name: string;
+  width: keyof typeof widthToClass | null | undefined;
+  children: JSX.Element;
+};
+
 const Column: Component<ColumnProps> = (props) => {
   const width = () => {
     if (props.width == null) {
@@ -23,8 +24,8 @@ const Column: Component<ColumnProps> = (props) => {
   return (
     <div class={`h-full shrink-0 border-r ${width()}`}>
       <div class="flex h-8 items-center border-b bg-white px-2">
-        <span class="column-icon">🏠</span>
-        <span class="column-name">Home</span>
+        {/* <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>

src/components/SideBar.tsx

@@ -8,7 +8,7 @@ type SideBarProps = {
 };
 
 const SideBar: Component<SideBarProps> = (props) => {
-  const [formOpened, setFormOpened] = createSignal(true);
+  const [formOpened, setFormOpened] = createSignal(false);
 
   return (
     <div class="flex shrink-0 flex-row border-r bg-sidebar-bg">
@@ -22,8 +22,8 @@ const SideBar: Component<SideBarProps> = (props) => {
         <button class="h-9 w-9 rounded-full border border-primary p-2 text-2xl font-bold text-primary">
           <MagnifyingGlass />
         </button>
-        <div>column 1</div>
-        <div>column 2</div>
+        {/* <div>column 1</div> */}
+        {/* <div>column 2</div> */}
       </div>
       <Show when={formOpened()}>{() => props.postForm()}</Show>
     </div>

src/components/TextNote.tsx

@@ -1,31 +1,69 @@
+import { createMemo, Show, For } from 'solid-js';
 import type { Component } from 'solid-js';
+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 GeneralUserMentionDisplay from './textNote/GeneralUserMentionDisplay';
 
 export type TextNoteProps = {
-  content: string;
-  createdAt: Date;
+  event: NostrEvent;
 };
 
 const TextNote: Component<TextNoteProps> = (props) => {
+  const [config] = useConfig();
+  const { profile: author } = useProfile(() => ({
+    relayUrls: config().relayUrls,
+    pubkey: props.event.pubkey,
+  }));
+  const replyingToPubKeys = createMemo(() =>
+    props.event.tags.filter((tag) => tag[0] === 'p').map((e) => e[1]),
+  );
+  // TODO 日付をいい感じにフォーマットする関数を作る
+  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 shrink-0">
-        <img
-          src="https://i.gyazo.com/883119a7763e594d30c5706a62969d52.jpg"
-          alt="author icon"
-          // TODO autofit
-          class="w-10 rounded"
-        />
+      <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">
-            {/* TODO link to profile */}
-            <div class="author-name font-bold">Author</div>
-            <div class="author-username truncate pl-1">@aauthorauthorauthorauthorauthoruthor</div>
+          <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">{props.createdAt.toLocaleTimeString()}</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>
+          </div>
+        </Show>
+        <div class="content whitespace-pre-wrap break-all">
+          <TextNoteContentDisplay event={props.event} />
         </div>
-        <div class="content whitespace-pre-wrap break-all">{props.content}</div>
       </div>
     </div>
   );

src/components/textNote/GeneralUserMentionDisplay.tsx

@@ -0,0 +1,24 @@
+import type { MentionedUser } from '@/core/parseTextNote';
+import useProfile from '@/clients/useProfile';
+import useConfig from '@/clients/useConfig';
+import { Show } from 'solid-js';
+
+export type GeneralUserMentionDisplayProps = {
+  pubkey: string;
+};
+
+const GeneralUserMentionDisplay = (props: GeneralUserMentionDisplayProps) => {
+  const [config] = useConfig();
+  const { profile } = useProfile(() => ({
+    relayUrls: config().relayUrls,
+    pubkey: props.pubkey,
+  }));
+
+  return (
+    <Show when={profile() != null} fallback={`@${props.pubkey}`}>
+      @{profile()?.display_name ?? props.pubkey}
+    </Show>
+  );
+};
+
+export default GeneralUserMentionDisplay;

src/components/textNote/MentionedEventDisplay.tsx

@@ -0,0 +1,11 @@
+import type { MentionedEvent } from '@/core/parseTextNote';
+
+export type MentionedEventDisplayProps = {
+  mentionedEvent: MentionedEvent;
+};
+
+const MentionedEventDisplay = (props: MentionedEventDisplayProps) => {
+  return <span class="text-blue-500 underline">@{props.mentionedEvent.eventId}</span>;
+};
+
+export default MentionedEventDisplay;

src/components/textNote/MentionedUserDisplay.tsx

@@ -0,0 +1,16 @@
+import type { MentionedUser } from '@/core/parseTextNote';
+import GeneralUserMentionDisplay from '@/components/textNote/GeneralUserMentionDisplay';
+
+export type MentionedUserDisplayProps = {
+  mentionedUser: MentionedUser;
+};
+
+const MentionedUserDisplay = (props: MentionedUserDisplayProps) => {
+  return (
+    <span class="text-blue-500 underline">
+      <GeneralUserMentionDisplay pubkey={props.mentionedUser.pubkey} />
+    </span>
+  );
+};
+
+export default MentionedUserDisplay;

src/components/textNote/PlainTextDisplay.tsx

@@ -0,0 +1,11 @@
+import type { PlainText } from '@/core/parseTextNote';
+
+export type PlainTextDisplayProps = {
+  plainText: PlainText;
+};
+
+const PlainTextDisplay = (props: PlainTextDisplayProps) => {
+  return <span>{props.plainText.content}</span>;
+};
+
+export default PlainTextDisplay;

src/components/textNote/TextNoteContentDisplay.tsx

@@ -0,0 +1,34 @@
+import { For } from 'solid-js';
+import parseTextNote, { type ParsedTextNoteNode } from '@/core/parseTextNote';
+import type { Event as NostrEvent } from 'nostr-tools/event';
+import PlainTextDisplay from '@/components/textNote/PlainTextDisplay';
+import MentionedUserDisplay from '@/components/textNote/MentionedUserDisplay';
+import MentionedEventDisplay from '@/components/textNote/MentionedEventDisplay';
+
+export type TextNoteContentDisplayProps = {
+  event: NostrEvent;
+};
+
+export const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
+  return (
+    <For each={parseTextNote(props.event)}>
+      {(item: ParsedTextNoteNode) => {
+        if (item.type === 'PlainText') {
+          return <PlainTextDisplay plainText={item} />;
+        }
+        if (item.type === 'MentionedUser') {
+          return <MentionedUserDisplay mentionedUser={item} />;
+        }
+        if (item.type === 'MentionedEvent') {
+          return <MentionedEventDisplay mentionedEvent={item} />;
+        }
+        if (item.type === 'HashTag') {
+          return <span class="text-blue-500 underline ">{item.content}</span>;
+        }
+        return null;
+      }}
+    </For>
+  );
+};
+
+export default TextNoteContentDisplay;