update

src/components/DeprecatedRepost.tsx

@@ -0,0 +1,43 @@
+// NIP-18 (DEPRECATED)
+import { Show, type Component } from 'solid-js';
+import { Event as NostrEvent } from 'nostr-tools/event';
+import ArrowPathRoundedSquare from 'heroicons/24/outline/arrow-path-rounded-square.svg';
+
+import useConfig from '@/clients/useConfig';
+import useEvent from '@/clients/useEvent';
+import useProfile from '@/clients/useProfile';
+
+import TextNote from '@/components/TextNote';
+
+export type DeprecatedRepostProps = {
+  event: NostrEvent;
+};
+
+const DeprecatedRepost: Component<DeprecatedRepostProps> = (props) => {
+  const [config] = useConfig();
+  const pubkey = () => props.event.pubkey;
+  const eventId = () => props.event.tags.find(([tagName]) => tagName === 'e')?.[1];
+
+  if (eventId() == null) {
+    return 'event not found';
+  }
+
+  const { profile } = useProfile(() => ({ relayUrls: config().relayUrls, pubkey: pubkey() }));
+  const { event } = useEvent(() => ({ relayUrls: config().relayUrls, eventId: eventId() }));
+
+  return (
+    <div>
+      <div class="flex  content-center px-1 text-xs">
+        <div class="h-5 w-5 pr-1 text-green-500" aria-hidden="true">
+          <ArrowPathRoundedSquare />
+        </div>
+        <div>{profile()?.display_name} Reposted</div>
+      </div>
+      <Show when={event() != null}>
+        <TextNote event={event()} />
+      </Show>
+    </div>
+  );
+};
+
+export default DeprecatedRepost;

src/components/TextNote.tsx

@@ -1,17 +1,24 @@
-import { createMemo, Show, For } from 'solid-js';
+import { Show, For, createSignal, createMemo, onMount, onCleanup } from 'solid-js';
 import type { Component } from 'solid-js';
 import type { Event as NostrEvent } from 'nostr-tools/event';
+
+import HeartOutlined from 'heroicons/24/outline/heart.svg';
+import ArrowPathRoundedSquare from 'heroicons/24/outline/arrow-path-rounded-square.svg';
+
 import useProfile from '@/clients/useProfile';
 import useConfig from '@/clients/useConfig';
-import TextNoteContentDisplay from '@/components/textNote/TextNoteContentDisplay';
+import useDatePulser from '@/hooks/useDatePulser';
+import { formatRelative } from '@/utils/formatDate';
 import ColumnItem from '@/components/ColumnItem';
-import GeneralUserMentionDisplay from './textNote/GeneralUserMentionDisplay';
+import GeneralUserMentionDisplay from '@/components/textNote/GeneralUserMentionDisplay';
+import TextNoteContentDisplay from '@/components/textNote/TextNoteContentDisplay';
 
 export type TextNoteProps = {
   event: NostrEvent;
 };
 
 const TextNote: Component<TextNoteProps> = (props) => {
+  const currentDate = useDatePulser();
   const [config] = useConfig();
   const { profile: author } = useProfile(() => ({
     relayUrls: config().relayUrls,
@@ -21,7 +28,7 @@ const TextNote: Component<TextNoteProps> = (props) => {
     props.event.tags.filter((tag) => tag[0] === 'p').map((e) => e[1]),
   );
   // TODO 日付をいい感じにフォーマットする関数を作る
-  const createdAt = () => new Date(props.event.created_at * 1000).toLocaleTimeString();
+  const createdAt = () => formatRelative(new Date(props.event.created_at * 1000), currentDate());
 
   return (
     <div class="textnote">
@@ -43,7 +50,7 @@ const TextNote: Component<TextNoteProps> = (props) => {
               <Show when={author()?.display_name}>
                 <div class="author-name pr-1 font-bold">{author()?.display_name}</div>
               </Show>
-              <div class="author-username truncate">
+              <div class="author-username truncate text-zinc-600">
                 <Show when={author()?.name} fallback={props.event.pubkey}>
                   @{author()?.name}
                 </Show>
@@ -66,6 +73,14 @@ const TextNote: Component<TextNoteProps> = (props) => {
           <div class="content whitespace-pre-wrap break-all">
             <TextNoteContentDisplay event={props.event} />
           </div>
+          <div class="flex justify-evenly">
+            <button class="h-4 w-4 text-zinc-400">
+              <ArrowPathRoundedSquare />
+            </button>
+            <button class="h-4 w-4 text-zinc-400">
+              <HeartOutlined />
+            </button>
+          </div>
         </div>
       </ColumnItem>
     </div>

src/components/Timeline.tsx

@@ -2,6 +2,7 @@ import { For, Switch, Match, type Component } from 'solid-js';
 import type { Event as NostrEvent } from 'nostr-tools/event';
 
 import TextNote from '@/components/TextNote';
+import DeprecatedRepost from '@/components/DeprecatedRepost';
 
 export type TimelineProps = {
   events: NostrEvent[];
@@ -16,7 +17,7 @@ export const Timeline: Component<TimelineProps> = (props) => {
             <TextNote event={event} />
           </Match>
           <Match when={event.kind === 6}>
-            <div>Deprecated Repost</div>
+            <DeprecatedRepost event={event} />
           </Match>
         </Switch>
       )}

src/components/textNote/TextNoteContentDisplay.tsx

@@ -9,7 +9,7 @@ export type TextNoteContentDisplayProps = {
   event: NostrEvent;
 };
 
-export const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
+const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
   return (
     <For each={parseTextNote(props.event)}>
       {(item: ParsedTextNoteNode) => {