feat: nip05 feeds

src/components/Note/index.tsx

@@ -7,11 +7,13 @@ import {
   isSupportedKind
 } from '@/lib/event'
 import { toNote } from '@/lib/link'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { Event, kinds } from 'nostr-tools'
 import { useMemo } from 'react'
 import Content from '../Content'
 import { FormattedTimestamp } from '../FormattedTimestamp'
 import ImageGallery from '../ImageGallery'
+import Nip05 from '../Nip05'
 import NoteOptions from '../NoteOptions'
 import ParentNotePreview from '../ParentNotePreview'
 import TranslateButton from '../TranslateButton'
@@ -33,6 +35,7 @@ export default function Note({
   hideParentNotePreview?: boolean
 }) {
   const { push } = useSecondaryPage()
+  const { isSmallScreen } = useScreenSize()
   const parentEventId = useMemo(
     () => (hideParentNotePreview ? undefined : getParentEventId(event)),
     [event, hideParentNotePreview]
@@ -47,28 +50,33 @@ export default function Note({
     <div className={className}>
       <div className="flex justify-between items-start gap-2">
         <div className="flex items-center space-x-2 flex-1">
-          <UserAvatar userId={event.pubkey} size={size === 'small' ? 'small' : 'normal'} />
-          <div
-            className={`flex-1 w-0 ${size === 'small' ? 'flex space-x-2 items-center overflow-hidden' : ''}`}
-          >
-            <div className="flex gap-2 items-center">
+          <UserAvatar userId={event.pubkey} size={size === 'small' ? 'medium' : 'normal'} />
+          <div className="flex-1 w-0">
+            <div className="flex gap-2 items-baseline">
               <Username
                 userId={event.pubkey}
                 className={`font-semibold flex truncate ${size === 'small' ? 'text-sm' : ''}`}
                 skeletonClassName={size === 'small' ? 'h-3' : 'h-4'}
               />
               {usingClient && size === 'normal' && (
-                <div className="text-xs text-muted-foreground shrink-0">using {usingClient}</div>
+                <span className="text-sm text-muted-foreground shrink-0">using {usingClient}</span>
               )}
             </div>
-            <div className="text-xs text-muted-foreground shrink-0">
-              <FormattedTimestamp timestamp={event.created_at} />
+            <div className="flex items-baseline gap-1 text-sm text-muted-foreground">
+              <Nip05 pubkey={event.pubkey} append="·" />
+              <FormattedTimestamp
+                timestamp={event.created_at}
+                className="shrink-0"
+                short={isSmallScreen}
+              />
             </div>
           </div>
         </div>
         <div className="flex items-center">
           <TranslateButton event={event} className={size === 'normal' ? '' : 'pr-0'} />
-          {size === 'normal' && <NoteOptions event={event} className="shrink-0 [&_svg]:size-5" />}
+          {size === 'normal' && (
+            <NoteOptions event={event} className="py-1 shrink-0 [&_svg]:size-5" />
+          )}
         </div>
       </div>
       {parentEventId && (