fix: modify the color of the username in the preview

src/components/ContentPreview/index.tsx

@@ -3,7 +3,11 @@ import { cn } from '@/lib/utils'
 import { Event } from 'nostr-tools'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { embedded, embeddedNostrNpubRenderer, embeddedNostrProfileRenderer } from '../Embedded'
+import {
+  embedded,
+  embeddedNostrNpubTextRenderer,
+  embeddedNostrProfileTextRenderer
+} from '../Embedded'
 
 export default function ContentPreview({
   event,
@@ -26,7 +30,10 @@ export default function ContentPreview({
     if (embeddedNotes.length) {
       contents.push(`[${t('note')}]`)
     }
-    return embedded(contents.join(' '), [embeddedNostrProfileRenderer, embeddedNostrNpubRenderer])
+    return embedded(contents.join(' '), [
+      embeddedNostrProfileTextRenderer,
+      embeddedNostrNpubTextRenderer
+    ])
   }, [event])
   if (!event) return null
 

src/components/Embedded/EmbeddedMention.tsx

@@ -1,4 +1,4 @@
-import Username from '../Username'
+import Username, { SimpleUsername } from '../Username'
 import { TEmbeddedRenderer } from './types'
 
 export function EmbeddedMention({ userId }: { userId: string }) {
@@ -12,6 +12,17 @@ export function EmbeddedMention({ userId }: { userId: string }) {
   )
 }
 
+export function EmbeddedMentionText({ userId }: { userId: string }) {
+  return (
+    <SimpleUsername
+      userId={userId}
+      showAt
+      className="font-normal inline truncate"
+      withoutSkeleton
+    />
+  )
+}
+
 export const embeddedNostrNpubRenderer: TEmbeddedRenderer = {
   regex: /(nostr:npub1[a-z0-9]{58})/g,
   render: (id: string, index: number) => {
@@ -34,3 +45,24 @@ export const embeddedNpubRenderer: TEmbeddedRenderer = {
     return <EmbeddedMention key={`embedded-npub-${index}-${npub1}`} userId={npub1} />
   }
 }
+
+export const embeddedNostrNpubTextRenderer: TEmbeddedRenderer = {
+  regex: /(nostr:npub1[a-z0-9]{58})/g,
+  render: (id: string, index: number) => {
+    const npub1 = id.split(':')[1]
+    return <EmbeddedMentionText key={`embedded-nostr-npub-text-${index}-${npub1}`} userId={npub1} />
+  }
+}
+
+export const embeddedNostrProfileTextRenderer: TEmbeddedRenderer = {
+  regex: /(nostr:nprofile1[a-z0-9]+)/g,
+  render: (id: string, index: number) => {
+    const nprofile = id.split(':')[1]
+    return (
+      <EmbeddedMentionText
+        key={`embedded-nostr-profile-text-${index}-${nprofile}`}
+        userId={nprofile}
+      />
+    )
+  }
+}

src/components/Username/index.tsx

@@ -56,21 +56,24 @@ export function SimpleUsername({
   userId,
   showAt = false,
   className,
-  skeletonClassName
+  skeletonClassName,
+  withoutSkeleton = false
 }: {
   userId: string
   showAt?: boolean
   className?: string
   skeletonClassName?: string
+  withoutSkeleton?: boolean
 }) {
   const { profile } = useFetchProfile(userId)
-  if (!profile) {
+  if (!profile && !withoutSkeleton) {
     return (
       <div className="py-1">
         <Skeleton className={cn('w-16', skeletonClassName)} />
       </div>
     )
   }
+  if (!profile) return null
 
   const { username } = profile