fix user badges

src/lib/components/EventDetails.svelte

@@ -8,6 +8,7 @@
   import type { NDKEvent } from '$lib/utils/nostrUtils';
   import { getMatchingTags } from '$lib/utils/nostrUtils';
   import ProfileHeader from "$components/cards/ProfileHeader.svelte";
+  import { getUserMetadata } from "$lib/utils/nostrUtils";
 
   const { event, profile = null, searchValue = null } = $props<{
     event: NDKEvent;
@@ -27,6 +28,7 @@
   let showFullContent = $state(false);
   let parsedContent = $state('');
   let contentPreview = $state('');
+  let authorDisplayName = $state<string | undefined>(undefined);
 
   function getEventTitle(event: NDKEvent): string {
     return getMatchingTags(event, 'title')[0]?.[1] || 'Untitled';
@@ -65,6 +67,16 @@
     }
   });
 
+  $effect(() => {
+    if (event?.pubkey) {
+      getUserMetadata(toNpub(event.pubkey) as string).then(profile => {
+        authorDisplayName = profile.displayName || (profile as any).display_name || profile.name || event.pubkey;
+      });
+    } else {
+      authorDisplayName = undefined;
+    }
+  });
+
   // --- Identifier helpers ---
   function getIdentifiers(event: NDKEvent, profile: any): { label: string, value: string, link?: string }[] {
     const ids: { label: string, value: string, link?: string }[] = [];
@@ -109,9 +121,13 @@
 
   <div class="flex items-center space-x-2">
     {#if toNpub(event.pubkey)}
-      <span class="text-gray-700 dark:text-gray-300">Author: {@render userBadge(toNpub(event.pubkey) as string, profile?.display_name || event.pubkey)}</span>
+      <span class="text-gray-700 dark:text-gray-300">
+        Author: {@render userBadge(toNpub(event.pubkey) as string, authorDisplayName)}
+      </span>
     {:else}
-      <span class="text-gray-700 dark:text-gray-300">Author: {profile?.display_name || event.pubkey}</span>
+      <span class="text-gray-700 dark:text-gray-300">
+        Author: {authorDisplayName}
+      </span>
     {/if}
   </div>
 

src/lib/components/PublicationHeader.svelte

@@ -6,6 +6,7 @@
   import { Card, Img } from "flowbite-svelte";
   import CardActions from "$components/util/CardActions.svelte";
   import { userBadge } from "$lib/snippets/UserSnippets.svelte";
+  import { getUserMetadata, toNpub } from '$lib/utils/nostrUtils';
 
   const { event } = $props<{ event: NDKEvent }>();
 
@@ -29,6 +30,19 @@
   let image: string = $derived(event.getMatchingTags('image')[0]?.[1] ?? null);
   let authorPubkey: string = $derived(event.getMatchingTags('p')[0]?.[1] ?? null);
 
+  // New: fetch profile display name for authorPubkey
+  let authorDisplayName = $state<string | undefined>(undefined);
+
+  $effect(() => {
+    if (authorPubkey) {
+      getUserMetadata(toNpub(authorPubkey) as string).then(profile => {
+        authorDisplayName = profile.displayName || (profile as any).display_name || author || authorPubkey;
+      });
+    } else {
+      authorDisplayName = undefined;
+    }
+  });
+
   console.log("PublicationHeader event:", event);
 </script>
 
@@ -46,7 +60,7 @@
           <h3 class='text-base font-normal'>
             by
             {#if authorPubkey != null}
-            {@render userBadge(authorPubkey, author)}
+            {@render userBadge(authorPubkey, authorDisplayName)}
             {:else}
               {author}
             {/if}

src/lib/components/cards/ProfileHeader.svelte

@@ -41,7 +41,7 @@
       {#if profile.picture}
         <img src={profile.picture} alt="Profile avatar" class="w-16 h-16 rounded-full border" onerror={(e) => { (e.target as HTMLImageElement).src = '/favicon.png'; }} />
       {/if}
-      {@render userBadge(toNpub(event.pubkey) as string, profile.displayName || profile.name || event.pubkey)}
+      {@render userBadge(toNpub(event.pubkey) as string, profile.displayName || profile.display_name || profile.name || event.pubkey)}
     </div>
     <div>
       <div class="mt-2 flex flex-col gap-4">

src/lib/utils/nostrUtils.ts

@@ -85,7 +85,7 @@ export async function getUserMetadata(identifier: string): Promise<NostrProfile>
 
     const metadata: NostrProfile = {
       name: profile?.name || fallback.name,
-      displayName: profile?.displayName,
+      displayName: profile?.displayName || profile?.display_name,
       nip05: profile?.nip05,
       picture: profile?.image,
       about: profile?.about,
@@ -155,7 +155,7 @@ export async function createProfileLinkWithVerification(identifier: string, disp
 
   const defaultText = `${cleanId.slice(0, 8)}...${cleanId.slice(-4)}`;
   const escapedText = escapeHtml(displayText || defaultText);
-  const displayIdentifier = profile?.displayName ?? profile?.name ?? escapedText;
+  const displayIdentifier = profile?.displayName ?? profile?.display_name ?? profile?.name ?? escapedText;
 
   const isVerified = await user.validateNip05(nip05);