update

src/components/DeprecatedRepost.tsx

@@ -7,6 +7,7 @@ import ColumnItem from '@/components/ColumnItem';
 import UserDisplayName from '@/components/UserDisplayName';
 import eventWrapper from '@/core/event';
 import useFormatDate from '@/hooks/useFormatDate';
+import useModalState from '@/hooks/useModalState';
 import TextNoteDisplayById from './textNote/TextNoteDisplayById';
 
 export type DeprecatedRepostProps = {
@@ -14,6 +15,7 @@ export type DeprecatedRepostProps = {
 };
 
 const DeprecatedRepost: Component<DeprecatedRepostProps> = (props) => {
+  const { showProfile } = useModalState();
   const formatDate = useFormatDate();
   const repostedId = () => props.event.tags.find(([tagName]) => tagName === 'e')?.[1];
   const event = createMemo(() => eventWrapper(props.event));
@@ -25,7 +27,12 @@ const DeprecatedRepost: Component<DeprecatedRepostProps> = (props) => {
           <ArrowPathRoundedSquare />
         </div>
         <div class="flex-1 truncate break-all">
-          <UserDisplayName pubkey={props.event.pubkey} />
+          <button
+            class="hover:text-blue-500 hover:underline"
+            onClick={() => showProfile(props.event.pubkey)}
+          >
+            <UserDisplayName pubkey={props.event.pubkey} />
+          </button>
           {' がリポスト'}
         </div>
         <div>{formatDate(event().createdAtAsDate())}</div>

src/components/ProfileDisplay.tsx

@@ -5,6 +5,7 @@ import XMark from 'heroicons/24/outline/x-mark.svg';
 
 import Modal from '@/components/Modal';
 import Copy from '@/components/utils/Copy';
+import SafeLink from '@/components/utils/SafeLink';
 
 import useProfile from '@/nostr/useProfile';
 import npubEncodeFallback from '@/utils/npubEncodeFallback';
@@ -23,25 +24,19 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
 
   return (
     <Modal onClose={() => props.onClose?.()}>
-      <div class="max-h-full w-[640px] max-w-full overflow-scroll">
+      <div class="max-h-full w-[640px] max-w-full">
-        <div class="flex justify-end">
+        <button class="h-8 w-8 text-stone-700" aria-label="Close" onClick={() => props.onClose?.()}>
-          <button
+          <XMark />
-            class="h-8 w-8 text-stone-700"
+        </button>
-            aria-label="Close"
-            onClick={() => props.onClose?.()}
-          >
-            <XMark />
-          </button>
-        </div>
         <div class="flex w-full flex-col overflow-hidden rounded-2xl border bg-white text-stone-700 shadow-lg">
           <Show when={query.isFetched} fallback={<>loading</>}>
-            <div class="h-40 w-full sm:h-52">
+            <Show when={profile()?.banner} fallback={<div class="h-20" />} keyed>
-              <Show when={profile()?.banner} keyed>
+              {(bannerUrl) => (
-                {(bannerUrl) => (
+                <div class="h-40 w-full sm:h-52">
                   <img src={bannerUrl} alt="header" class="h-full w-full object-cover" />
-                )}
+                </div>
-              </Show>
+              )}
-            </div>
+            </Show>
             <div class="flex h-[64px] items-center gap-4 px-4">
               <div class="mt-[-64px] h-28 w-28 shrink-0 rounded-lg bg-stone-400 shadow-md">
                 <Show when={profile()?.picture} keyed>
@@ -54,35 +49,33 @@ const ProfileDisplay: Component<ProfileDisplayProps> = (props) => {
                   )}
                 </Show>
               </div>
-              <div>
+              <div class="flex-1 overflow-hidden">
                 <div class="flex items-center gap-2">
                   <div class="truncate text-xl font-bold">{profile()?.display_name}</div>
                   <div class="shrink-0 text-sm font-bold">@{profile()?.name}</div>
                 </div>
                 <div class="flex gap-1">
                   <div class="truncate text-xs">{npub()}</div>
-                  <Copy class="h-4 w-4 text-stone-500 hover:text-stone-700" text={npub()} />
+                  <Copy
+                    class="h-4 w-4 shrink-0 text-stone-500 hover:text-stone-700"
+                    text={npub()}
+                  />
                 </div>
               </div>
             </div>
-            <div class="max-h-32 overflow-scroll whitespace-pre-wrap px-5 py-2 text-sm">
+            <div class="max-h-32 overflow-auto whitespace-pre-wrap px-5 py-2 text-sm">
               {profile()?.about}
             </div>
             <ul class="border-t px-5 py-2 text-xs">
-              <Show when={profile()?.website}>
+              <Show when={profile()?.website} keyed>
-                <li class="flex items-center gap-1">
+                {(website) => (
-                  <span class="inline-block h-4 w-4" area-label="website" title="website">
+                  <li class="flex items-center gap-1">
-                    <GlobeAlt />
+                    <span class="inline-block h-4 w-4" area-label="website" title="website">
-                  </span>
+                      <GlobeAlt />
-                  <a
+                    </span>
-                    class="text-blue-500 underline"
+                    <SafeLink class="text-blue-500 underline" href={website} />
-                    href={profile()?.website}
+                  </li>
-                    target="_blank"
+                )}
-                    rel="noreferrer noopener"
-                  >
-                    {profile()?.website}
-                  </a>
-                </li>
               </Show>
             </ul>
           </Show>

src/components/notification/Reaction.tsx

@@ -8,13 +8,17 @@ import UserDisplayName from '@/components/UserDisplayName';
 
 import useProfile from '@/nostr/useProfile';
 import useEvent from '@/nostr/useEvent';
+import eventWrapper from '@/core/event';
+import useModalState from '@/hooks/useModalState';
 
 type ReactionProps = {
   event: NostrEvent;
 };
 
 const Reaction: Component<ReactionProps> = (props) => {
-  const eventId = () => props.event.tags.find(([tagName]) => tagName === 'e')?.[1];
+  const { showProfile } = useModalState();
+  const event = () => eventWrapper(props.event);
+  const eventId = () => event().taggedEvents()[0].id;
 
   const { profile } = useProfile(() => ({
     pubkey: props.event.pubkey,
@@ -50,9 +54,12 @@ const Reaction: Component<ReactionProps> = (props) => {
               </Show>
             </div>
             <div>
-              <span class="truncate whitespace-pre-wrap break-all font-bold">
+              <button
+                class="truncate whitespace-pre-wrap break-all font-bold hover:text-blue-500 hover:underline"
+                onClick={() => showProfile(props.event.pubkey)}
+              >
                 <UserDisplayName pubkey={props.event.pubkey} />
-              </span>
+              </button>
               {' がリアクション'}
             </div>
           </div>
@@ -63,7 +70,7 @@ const Reaction: Component<ReactionProps> = (props) => {
             fallback={<div class="truncate">loading {eventId()}</div>}
             keyed
           >
-            {(event) => <TextNoteDisplay event={event} />}
+            {(ev) => <TextNoteDisplay event={ev} />}
           </Show>
         </div>
       </ColumnItem>

src/components/textNote/ImageDisplay.tsx

@@ -1,5 +1,6 @@
 import { Component, createEffect, createSignal, Show } from 'solid-js';
 import { fixUrl } from '@/utils/imageUrl';
+import SafeLink from '../utils/SafeLink';
 
 type ImageDisplayProps = {
   url: string;
@@ -21,13 +22,13 @@ const ImageDisplay: Component<ImageDisplayProps> = (props) => {
         </button>
       }
     >
-      <a class="my-2 block" href={props.url} target="_blank" rel="noopener noreferrer">
+      <SafeLink class="my-2 block" href={props.url}>
         <img
           class="inline-block max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
-          src={fixUrl(new URL(props.url)).toString()}
+          src={fixUrl(props.url)}
           alt={props.url}
         />
-      </a>
+      </SafeLink>
     </Show>
   );
 };

src/components/textNote/TextNoteContentDisplay.tsx

@@ -5,6 +5,7 @@ import PlainTextDisplay from '@/components/textNote/PlainTextDisplay';
 import MentionedUserDisplay from '@/components/textNote/MentionedUserDisplay';
 import MentionedEventDisplay from '@/components/textNote/MentionedEventDisplay';
 import ImageDisplay from '@/components/textNote/ImageDisplay';
+import SafeLink from '@/components/utils/SafeLink';
 import eventWrapper from '@/core/event';
 import { isImageUrl } from '@/utils/imageUrl';
 import useConfig from '@/nostr/useConfig';
@@ -58,16 +59,7 @@ const TextNoteContentDisplay = (props: TextNoteContentDisplayProps) => {
               />
             );
           }
-          return (
+          return <SafeLink class="text-blue-500 underline" href={item.content} />;
-            <a
-              class="text-blue-500 underline"
-              href={item.content}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {item.content}
-            </a>
-          );
         }
         return null;
       }}

src/components/textNote/TextNoteDisplay.tsx

@@ -161,12 +161,14 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
         <div class="min-w-0 flex-auto">
           <div class="flex justify-between gap-1 text-xs">
             <button
-              class="author flex min-w-0 truncate"
+              class="author flex min-w-0 truncate hover:text-blue-500"
               onClick={() => showProfile(event().pubkey)}
             >
               {/* TODO link to author */}
               <Show when={(author()?.display_name?.length ?? 0) > 0}>
-                <div class="author-name truncate pr-1 font-bold">{author()?.display_name}</div>
+                <div class="author-name truncate pr-1 font-bold hover:underline">
+                  {author()?.display_name}
+                </div>
               </Show>
               <div class="author-username truncate text-zinc-600">
                 <Show
@@ -192,7 +194,7 @@ const TextNoteDisplay: Component<TextNoteDisplayProps> = (props) => {
               <For each={event().mentionedPubkeys()}>
                 {(replyToPubkey: string) => (
                   <button
-                    class="pr-1 text-blue-500 underline"
+                    class="pr-1 text-blue-500 hover:underline"
                     onClick={() => showProfile(replyToPubkey)}
                   >
                     <GeneralUserMentionDisplay pubkey={replyToPubkey} />

src/components/utils/SafeLink.tsx

@@ -0,0 +1,28 @@
+import { Component, Show, JSX } from 'solid-js';
+
+type SafeLinkProps = {
+  class?: string;
+  href: string;
+  children?: JSX.Element;
+};
+
+const SafeLink: Component<SafeLinkProps> = (props) => {
+  const isSafe = () => {
+    try {
+      const url = new URL(props.href.toString());
+      return url.protocol === 'https:' || url.protocol === 'http:';
+    } catch {
+      return false;
+    }
+  };
+
+  return (
+    <Show when={isSafe()} fallback={props.href}>
+      <a class={props.class} href={props.href} target="_blank" rel="noreferrer noopener">
+        {props.children ?? props.href}
+      </a>
+    </Show>
+  );
+};
+
+export default SafeLink;

src/utils/imageUrl.ts

@@ -2,27 +2,32 @@ export const isImageUrl = (url: URL): boolean => {
   return /\.(jpeg|jpg|png|gif|webp)$/i.test(url.pathname);
 };
 
-export const fixUrl = (url: URL): URL => {
+export const fixUrl = (urlString: string): string => {
-  // Imgur
+  try {
-  if (url.host === 'i.imgur.com' || url.host === 'imgur.com') {
+    const url = new URL(urlString);
-    const match = url.pathname.match(/^\/([a-zA-Z0-9]+)\.(jpg|jpeg|png|gif)/);
+    // Imgur
-    if (match != null) {
+    if (url.host === 'i.imgur.com' || url.host === 'imgur.com') {
-      const result = new URL(url);
+      const match = url.pathname.match(/^\/([a-zA-Z0-9]+)\.(jpg|jpeg|png|gif)/);
-      const imageId = match[1];
+      if (match != null) {
-      result.host = 'i.imgur.com';
+        const result = new URL(url);
-      result.pathname = `${imageId}l.webp`;
+        const imageId = match[1];
-      return result;
+        result.host = 'i.imgur.com';
+        result.pathname = `${imageId}l.webp`;
+        return result.toString();
+      }
+      return url.toString();
     }
-    return url;
-  }
 
-  // Gyazo
+    // Gyazo
-  if (url.host === 'i.gyazo.com') {
+    if (url.host === 'i.gyazo.com') {
-    const result = new URL(url);
+      const result = new URL(url);
-    result.host = 'thumb.gyazo.com';
+      result.host = 'thumb.gyazo.com';
-    result.pathname = `/thumb/640_w${url.pathname}`;
+      result.pathname = `/thumb/640_w${url.pathname}`;
-    return result;
+      return result.toString();
-  }
+    }
 
-  return url;
+    return url.toString();
+  } catch {
+    return urlString;
+  }
 };