updated newsfeed note ui

src/components/note/base.tsx

@@ -44,12 +44,8 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
         <div onClick={(e) => openUserPage(e)}>
           <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
         </div>
-        <div className="-mt-5 pl-[52px]">
-          <div className="flex flex-col gap-2">
-            <div className="prose	prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-              {content}
-            </div>
-          </div>
+        <div className="mt-1 pl-[52px]">
+          <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
         </div>
         <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
           <NoteMetadata

src/components/note/meta/comment.tsx

@@ -6,7 +6,7 @@ import { dateToUnix } from '@utils/getDate';
 
 import * as Dialog from '@radix-ui/react-dialog';
 import useLocalStorage from '@rehooks/local-storage';
-import { MultiBubble, OpenNewWindow } from 'iconoir-react';
+import { ChatLines, OpenNewWindow } from 'iconoir-react';
 import { useRouter } from 'next/navigation';
 import { getEventHash, signEvent } from 'nostr-tools';
 import { useContext, useState } from 'react';
@@ -57,7 +57,7 @@ export const NoteComment = ({
       <Dialog.Trigger asChild>
         <button className="group flex w-16 items-center gap-1 text-sm text-zinc-500">
           <div className="rounded-md p-1 group-hover:bg-zinc-800">
-            <MultiBubble width={20} height={20} className="text-zinc-500" />
+            <ChatLines width={20} height={20} className="text-zinc-500" />
           </div>
           <span>{count}</span>
         </button>

src/components/note/parent.tsx

@@ -82,12 +82,8 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
         <div className="absolute left-[21px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600"></div>
         <div className="relative z-10 flex flex-col">
           <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
-          <div className="-mt-5 pl-[52px]">
-            <div className="flex flex-col gap-2">
-              <div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-                {content}
-              </div>
-            </div>
+          <div className="mt-1 pl-[52px]">
+            <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
           </div>
           <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
             <NoteMetadata

src/components/note/preview/image.tsx

@@ -4,7 +4,9 @@ import { memo } from 'react';
 export const ImagePreview = memo(function ImagePreview({ url, size }: { url: string; size: string }) {
   return (
     <div
-      className={`relative h-full ${size === 'large' ? 'w-full' : 'w-2/3'} rounded-lg border border-zinc-800 xl:w-2/3`}
+      className={`relative h-full ${
+        size === 'large' ? 'w-full' : 'w-2/3'
+      } mt-2 rounded-lg border border-zinc-800 xl:w-2/3`}
     >
       <Image
         src={url}

src/components/note/preview/video.tsx

@@ -3,7 +3,7 @@ import ReactPlayer from 'react-player/lazy';
 
 export const VideoPreview = memo(function VideoPreview({ url }: { url: string }) {
   return (
-    <div onClick={(e) => e.stopPropagation()} className="relative flex flex-col overflow-hidden rounded-lg">
+    <div onClick={(e) => e.stopPropagation()} className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
       <ReactPlayer
         url={url}
         controls={true}

src/components/note/quote.tsx

@@ -81,12 +81,8 @@ export const NoteQuote = memo(function NoteQuote({ id }: { id: string }) {
       <div className="relative mb-2 mt-3 rounded-lg border border-zinc-700 bg-zinc-800 p-2 py-3">
         <div className="relative z-10 flex flex-col">
           <UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
-          <div className="-mt-5 pl-[52px]">
-            <div className="flex flex-col gap-2">
-              <div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-                {content}
-              </div>
-            </div>
+          <div className="mt-1 pl-[52px]">
+            <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
           </div>
         </div>
       </div>

src/components/note/rootNote.tsx

@@ -69,12 +69,8 @@ export const RootNote = memo(function RootNote({ event }: { event: any }) {
         <div onClick={(e) => openUserPage(e)}>
           <UserExtend pubkey={data.pubkey} time={data.created_at} />
         </div>
-        <div className="-mt-5 pl-[52px]">
-          <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none whitespace-pre-line break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-              {content}
-            </div>
-          </div>
+        <div className="mt-1 pl-[52px]">
+          <div className="whitespace-pre-line break-words text-[15px] leading-tight text-zinc-100">{content}</div>
         </div>
         <div onClick={(e) => e.stopPropagation()} className="mt-5 pl-[52px]">
           <NoteMetadata

src/components/user/extend.tsx

@@ -3,11 +3,10 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { DEFAULT_AVATAR } from '@stores/constants';
 
 import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
-import { truncate } from '@utils/truncate';
+import { shortenKey } from '@utils/shortenKey';
 
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { MoreHoriz } from 'iconoir-react';
 
 dayjs.extend(relativeTime);
 
@@ -15,7 +14,7 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
   const profile = useProfileMetadata(pubkey);
 
   return (
-    <div className="group flex items-start gap-2">
+    <div className="group flex h-11 items-center gap-2">
       <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
         <ImageWithFallback
           src={profile?.picture || DEFAULT_AVATAR}
@@ -25,19 +24,16 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
         />
       </div>
       <div className="flex w-full flex-1 items-start justify-between">
-        <div className="flex w-full justify-between">
-          <div className="flex items-baseline gap-2 text-sm">
-            <span className="font-bold leading-tight group-hover:underline">
-              {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
-            </span>
-            <span className="leading-tight text-zinc-500">·</span>
-            <span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
-          </div>
-          <div>
-            <button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
-              <MoreHoriz width={12} height={12} className="text-zinc-500" />
-            </button>
+        <div className="flex flex-col gap-1">
+          <div className="flex items-baseline gap-2">
+            <h5 className="text-sm font-semibold leading-none group-hover:underline">
+              {profile?.display_name || profile?.name || shortenKey(pubkey)}
+            </h5>
+            <span className="text-sm leading-none text-zinc-700"></span>
           </div>
+          <span className="text-sm leading-none text-zinc-500">
+            {profile?.nip05 || shortenKey(pubkey)} • {dayjs().to(dayjs.unix(time))}
+          </span>
         </div>
       </div>
     </div>