update

src/components/DeprecatedRepost.tsx

@@ -1,5 +1,5 @@
 // NIP-18 (DEPRECATED)
-import { Show, type Component } from 'solid-js';
+import { Show, Switch, Match, type Component } from 'solid-js';
 import { Event as NostrEvent } from 'nostr-tools/event';
 import ArrowPathRoundedSquare from 'heroicons/24/outline/arrow-path-rounded-square.svg';
 
@@ -7,6 +7,7 @@ import useConfig from '@/clients/useConfig';
 import useEvent from '@/clients/useEvent';
 import useProfile from '@/clients/useProfile';
 
+import UserNameDisplay from '@/components/UserNameDisplay';
 import TextNote from '@/components/TextNote';
 
 export type DeprecatedRepostProps = {
@@ -30,19 +31,22 @@ const DeprecatedRepost: Component<DeprecatedRepostProps> = (props) => {
         <div class="h-5 w-5 shrink-0 pr-1 text-green-500" aria-hidden="true">
           <ArrowPathRoundedSquare />
         </div>
-        <div class="truncate">
-          <Show when={(profile()?.display_name?.length ?? 0) > 0} fallback={props.event.pubkey}>
-            {profile()?.display_name}
-          </Show>
+        <div class="truncate break-all">
+          <UserNameDisplay pubkey={props.event.pubkey} />
           {' Reposted'}
         </div>
       </div>
-      <Show
-        when={event() != null}
-        fallback={<Show when={eventQuery.isLoading}>loading {eventId()}</Show>}
-      >
-        <TextNote event={event()} />
-      </Show>
+      <Switch fallback="failed to load">
+        <Match when={event() != null}>
+          <TextNote event={event()} />
+        </Match>
+        <Match when={eventQuery.isLoading}>
+          <div class="truncate">
+            {'loading '}
+            <span>{eventId()}</span>
+          </div>
+        </Match>
+      </Switch>
     </div>
   );
 };

src/components/Notification.tsx

@@ -3,6 +3,7 @@ import { Kind, type Event as NostrEvent } from 'nostr-tools/event';
 
 import TextNote from '@/components/TextNote';
 import Reaction from '@/components/notification/Reaction';
+import DeprecatedRepost from '@/components/DeprecatedRepost';
 
 export type TimelineProps = {
   events: NostrEvent[];
@@ -19,6 +20,10 @@ const Timeline: Component<TimelineProps> = (props) => {
           <Match when={event.kind === Kind.Reaction}>
             <Reaction event={event} />
           </Match>
+          {/* TODO ちゃんとnotification用のコンポーネント使う */}
+          <Match when={event.kind === 1}>
+            <DeprecatedRepost event={event} />
+          </Match>
         </Switch>
       )}
     </For>

src/components/UserNameDisplay.tsx

@@ -0,0 +1,25 @@
+import { Component, Switch, Match } from 'solid-js';
+
+import useConfig from '@/clients/useConfig';
+import useProfile, { type Profile } from '@/clients/useProfile';
+
+type UserNameDisplayProps = {
+  pubkey: string;
+};
+
+const UserNameDisplay: Component<UserNameDisplayProps> = (props) => {
+  const [config] = useConfig();
+  const { profile } = useProfile(() => ({
+    relayUrls: config().relayUrls,
+    pubkey: props.pubkey,
+  }));
+
+  return (
+    <Switch fallback={`@${props.pubkey}`}>
+      <Match when={(profile()?.display_name?.length ?? 0) > 0}>{profile()?.display_name}</Match>
+      <Match when={(profile()?.name?.length ?? 0) > 0}>@{profile()?.name}</Match>
+    </Switch>
+  );
+};
+
+export default UserNameDisplay;

src/components/notification/Reaction.tsx

@@ -2,10 +2,12 @@ import { Switch, Match, type Component, Show } from 'solid-js';
 import { type Event as NostrEvent } from 'nostr-tools/event';
 import HeartSolid from 'heroicons/24/solid/heart.svg';
 
+import UserNameDisplay from '@/components/UserNameDisplay';
+import TextNote from '@/components/TextNote';
+
 import useConfig from '@/clients/useConfig';
 import useProfile from '@/clients/useProfile';
 import useEvent from '@/clients/useEvent';
-import TextNote from '../TextNote';
 
 type ReactionProps = {
   event: NostrEvent;
@@ -52,9 +54,7 @@ const Reaction: Component<ReactionProps> = (props) => {
             </div>
             <div>
               <span class="truncate whitespace-pre-wrap break-all font-bold">
-                <Show when={profile() != null} fallback={props.event.pubkey}>
-                  {profile()?.display_name}
-                </Show>
+                <UserNameDisplay pubkey={props.event.pubkey} />
               </span>
               {' reacted'}
             </div>