From 0bae6674ced02abbd3f22c70fa665a73f8e53641 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Fri, 3 Oct 2025 00:00:04 +0200
Subject: [PATCH] feat(ui): resolve author names using applesauce ProfileModel

- Import useEventModel and Models from applesauce-react
- Use ProfileModel to fetch author profile data for each bookmark
- Display author name/display_name/nip05 instead of raw pubkey
- Fallback to short pubkey if profile not available
- Improves readability by showing human-readable author names
---
 src/components/BookmarkItem.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/BookmarkItem.tsx b/src/components/BookmarkItem.tsx
index 1824a2b3..33b37707 100644
--- a/src/components/BookmarkItem.tsx
+++ b/src/components/BookmarkItem.tsx
@@ -22,6 +22,8 @@ import {
   faEyeSlash,
   faThumbtack
 } from '@fortawesome/free-solid-svg-icons'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
 import { IndividualBookmark } from '../types/bookmarks'
 import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
 import { extractUrlsFromContent } from '../services/bookmarkHelpers'
@@ -47,6 +49,17 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
   const extractedUrls = extractUrlsFromContent(bookmark.content)
   const hasUrls = extractedUrls.length > 0
 
+  // Resolve author profile using applesauce
+  const authorProfile = useEventModel(Models.ProfileModel, [bookmark.pubkey])
+  
+  // Get display name for author
+  const getAuthorDisplayName = () => {
+    if (authorProfile?.name) return authorProfile.name
+    if (authorProfile?.display_name) return authorProfile.display_name
+    if (authorProfile?.nip05) return authorProfile.nip05
+    return short(bookmark.pubkey) // fallback to short pubkey
+  }
+
   // Map kind numbers to FontAwesome icons
   const getKindIcon = (kind: number) => {
     const iconMap: Record<number, any> = {
@@ -139,7 +152,7 @@ export const BookmarkItem: React.FC<BookmarkItemProps> = ({ bookmark, index, onS
           <FontAwesomeIcon icon={getKindIcon(bookmark.kind)} />
         </span>
         <span>
-          Author: {short(bookmark.pubkey)}
+          Author: {getAuthorDisplayName()}
           <button className="copy-btn" onClick={() => copy(bookmark.pubkey)} title="Copy author pubkey">
             <FontAwesomeIcon icon={faCopy} />
           </button>