polish

src/shared/notes/content.tsx

@@ -12,7 +12,15 @@ import {
 
 import { Content } from '@utils/types';
 
-export function NoteContent({ content }: { content: Content }) {
+export function NoteContent({ content, long }: { content: Content; long?: boolean }) {
+  if (long) {
+    return (
+      <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
+        {content as unknown as string}
+      </ReactMarkdown>
+    );
+  }
+
   return (
     <>
       <ReactMarkdown

src/shared/notes/kinds/repost.tsx

@@ -26,7 +26,7 @@ export function Repost({ event }: { event: LumeEvent }) {
   if (status === 'error') {
     return (
       <div className="flex items-center justify-center overflow-hidden rounded-xl bg-white/10 px-3 py-3">
-        <p className="text-white/50">Failed to fetch</p>
+        <p className="text-white/50">Failed to fetch event: {repostID}</p>
       </div>
     );
   }

src/shared/notes/kinds/sub.tsx

@@ -17,7 +17,7 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
   if (status === 'error') {
     return (
       <div className="mb-5 flex overflow-hidden rounded-xl bg-white/10 px-3 py-3">
-        <p className="text-white/50">Failed to fetch</p>
+        <p className="break-all text-white/50">Failed to fetch event: {id}</p>
       </div>
     );
   }
@@ -30,7 +30,7 @@ export function SubNote({ id, root }: { id: string; root?: string }) {
         <div className="relative z-20 -mt-6 flex items-start gap-3">
           <div className="w-11 shrink-0" />
           <div className="flex-1">
-            <NoteContent content={data.content} />
+            <NoteContent content={data.content} long={data.kind === 30023} />
             <NoteActions id={data.event_id} pubkey={data.pubkey} root={root} />
           </div>
         </div>

src/shared/notes/mentions/note.tsx

@@ -23,6 +23,14 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
     }
   };
 
+  if (!id) {
+    return (
+      <div className="mb-2 mt-3 cursor-default rounded-lg bg-white/10 px-3 py-3">
+        <p className="break-all">Failed to fetch event: {id}</p>
+      </div>
+    );
+  }
+
   return (
     <div
       onClick={(e) => openThread(e, id)}
@@ -56,14 +64,14 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
                 },
               }}
             >
-              {data?.content?.parsed?.length > 160
-                ? data.content.parsed.substring(0, 160) + '...'
-                : data.content.parsed}
+              {data?.content?.original?.length > 160
+                ? data.content.original.substring(0, 160) + '...'
+                : data.content.original}
             </ReactMarkdown>
           </div>
         </>
       ) : (
-        <p>Failed to fetch event</p>
+        <p className="break-all">Failed to fetch event: {id}</p>
       )}
     </div>
   );

src/shared/notes/mentions/user.tsx

@@ -20,7 +20,11 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
       }
       className="break-words font-normal text-blue-400 no-underline hover:text-blue-500"
     >
-      {'@' + user?.name || user?.displayName || displayNpub(pubkey, 16)}
+      {user?.nip05 ||
+        user?.name ||
+        user?.display_name ||
+        user?.username ||
+        displayNpub(pubkey, 16)}
     </button>
   );
 }

src/shared/notes/metadata.tsx

@@ -61,7 +61,7 @@ export function NoteMetadata({ id }: { id: string }) {
 
       return { replies, users, zap };
     },
-    { refetchOnWindowFocus: false, refetchOnReconnect: false }
+    { refetchOnWindowFocus: false, refetchOnReconnect: false, refetchOnMount: false }
   );
 
   if (status === 'loading') {

src/shared/notes/replies/list.tsx

@@ -43,7 +43,7 @@ export function RepliesList({ id }: { id: string }) {
     return (
       <div className="mt-3">
         <div className="flex flex-col">
-          <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-3">
+          <div className="rounded-xl bg-white/10 px-3 py-3">
             <NoteSkeleton />
           </div>
         </div>