feat: use thumbnail url in reaction and user list

src/components/event/ProfileListItem.tsx

@@ -2,6 +2,7 @@ import { Component, Show } from 'solid-js';
 
 import useProfile from '@/nostr/useProfile';
 import npubEncodeFallback from '@/utils/npubEncodeFallback';
+import { thumbnailUrl } from '@/utils/url';
 
 export type ProfileListItemProps = {
   pubkey: string;
@@ -24,7 +25,9 @@ const ProfileListItem: Component<ProfileListItemProps> = (props) => {
         }}
       >
         <Show when={profile()?.picture} keyed>
-          {(url) => <img src={url} alt="icon" class="h-full w-full rounded object-cover" />}
+          {(url) => (
+            <img src={thumbnailUrl(url)} alt="icon" class="h-full w-full rounded object-cover" />
+          )}
         </Show>
       </button>
       <div class="min-w-0 flex-auto">

src/components/event/Reaction.tsx

@@ -13,6 +13,7 @@ import { reaction } from '@/nostr/event';
 import useEvent from '@/nostr/useEvent';
 import useProfile from '@/nostr/useProfile';
 import ensureNonNull from '@/utils/ensureNonNull';
+import { thumbnailUrl } from '@/utils/url';
 
 type ReactionDisplayProps = {
   event: NostrEvent;
@@ -47,13 +48,15 @@ const ReactionDisplay: Component<ReactionDisplayProps> = (props) => {
         </div>
         <div class="notification-user flex flex-1 gap-1 overflow-hidden">
           <div class="author-icon h-5 w-5 shrink-0 overflow-hidden rounded">
-            <Show when={profile()?.picture != null}>
+            <Show when={profile()?.picture} keyed>
+              {(url) => (
                 <img
-                src={profile()?.picture}
+                  src={thumbnailUrl(url)}
                   alt="icon"
                   // TODO autofit
                   class="h-full w-full object-cover"
                 />
+              )}
             </Show>
           </div>
           <div class="flex min-w-0 flex-1 overflow-hidden">