From 6b58d1673bfe2e07773574866c15d64c37662b67 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng@outlook.com>
Date: Tue, 24 Dec 2024 15:12:01 +0800
Subject: [PATCH] feat: display client tag

---
 src/components/Note/index.tsx | 20 ++++++++++++++------
 src/lib/event.ts              |  4 ++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/Note/index.tsx b/src/components/Note/index.tsx
index 4b66155b..18851b39 100644
--- a/src/components/Note/index.tsx
+++ b/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
-            userId={event.pubkey}
-            className={`font-semibold flex ${size === 'small' ? 'text-sm' : ''}`}
-            skeletonClassName={size === 'small' ? 'h-3' : 'h-4'}
-          />
+          <div className="flex gap-2 items-center">
+            <Username
+              userId={event.pubkey}
+              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>
diff --git a/src/lib/event.ts b/src/lib/event.ts
index 77992930..03149676 100644
--- a/src/lib/event.ts
+++ b/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>()