feat: display client tag

src/components/Note/index.tsx

@@ -1,6 +1,8 @@
 import { useSecondaryPage } from '@/PageManager'
+import { getUsingClient } from '@/lib/event'
 import { toNote } from '@/lib/link'
 import { Event } from 'nostr-tools'
+import { useMemo } from 'react'
 import Content from '../Content'
 import { FormattedTimestamp } from '../FormattedTimestamp'
 import NoteStats from '../NoteStats'
@@ -24,19 +26,25 @@ export default function Note({
   fetchNoteStats?: boolean
 }) {
   const { push } = useSecondaryPage()
+  const usingClient = useMemo(() => getUsingClient(event), [event])
 
   return (
     <div className={className}>
       <div className="flex items-center space-x-2">
         <UserAvatar userId={event.pubkey} size={size === 'small' ? 'small' : 'normal'} />
         <div
-          className={`flex-1 w-0 ${size === 'small' ? 'flex space-x-2 items-end overflow-hidden' : ''}`}
+          className={`flex-1 w-0 ${size === 'small' ? 'flex space-x-2 items-center overflow-hidden' : ''}`}
         >
-          <Username
+          <div className="flex gap-2 items-center">
-            userId={event.pubkey}
+            <Username
-            className={`font-semibold flex ${size === 'small' ? 'text-sm' : ''}`}
+              userId={event.pubkey}
-            skeletonClassName={size === 'small' ? 'h-3' : 'h-4'}
+              className={`font-semibold flex ${size === 'small' ? 'text-sm' : ''}`}
-          />
+              skeletonClassName={size === 'small' ? 'h-3' : 'h-4'}
+            />
+            {usingClient && size === 'normal' && (
+              <div className="text-xs text-muted-foreground truncate">using {usingClient}</div>
+            )}
+          </div>
           <div className="text-xs text-muted-foreground line-clamp-1">
             <FormattedTimestamp timestamp={event.created_at} />
           </div>

src/lib/event.ts

@@ -51,6 +51,10 @@ export function getSharableEventId(event: Event) {
   return nip19.neventEncode({ id: event.id, author: event.pubkey, kind: event.kind })
 }
 
+export function getUsingClient(event: Event) {
+  return event.tags.find(tagNameEquals('client'))?.[1]
+}
+
 export async function extractMentions(content: string, parentEvent?: Event) {
   const pubkeySet = new Set<string>()
   const relatedEventIdSet = new Set<string>()