tweaks: Load mentions

Nip5 cleanup

src/element/Mention.tsx

@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+import { Link } from "react-router-dom";
+import useProfile from "../feed/ProfileFeed";
+import { HexKey } from "../nostr";
+import { hexToBech32, profileLink } from "../Util";
+
+export default function Mention({ pubkey }: { pubkey: HexKey }) {
+    const user = useProfile(pubkey)?.get(pubkey);
+
+    const name = useMemo(() => {
+        let name = hexToBech32("npub", pubkey).substring(0, 12);
+        if ((user?.display_name?.length ?? 0) > 0) {
+            name = user!.display_name!;
+        } else if ((user?.name?.length ?? 0) > 0) {
+            name = user!.name!;
+        }
+        return name;
+    }, [user]);
+
+    return <Link to={profileLink(pubkey)} onClick={(e) => e.stopPropagation()}>@{name}</Link>
+}

src/element/Nip05.css

@@ -5,6 +5,10 @@
     margin: .2em;
 }
 
+.nip05.failed {
+    text-decoration: line-through;
+}
+
 .nip05 .nick {
     color: var(--gray-light);
     font-weight: bold;

src/element/Nip05.tsx

@@ -53,7 +53,7 @@ const Nip05 = (props: Nip05Params) => {
   const { isVerified, couldNotVerify } = useIsVerified(props.pubkey, props.nip05)
 
   return (
-    <div className="flex nip05" onClick={(ev) => ev.stopPropagation()}>
+    <div className={`flex nip05${couldNotVerify ? " failed" : ""}`} onClick={(ev) => ev.stopPropagation()}>
       <div className="nick">
         {!isDefaultUser && name}
       </div>
@@ -68,13 +68,6 @@ const Nip05 = (props: Nip05Params) => {
             size="xs"
           />
         )}
-        {isVerified && (
-          <FontAwesomeIcon
-            color={"var(--success)"}
-            icon={faCheck}
-            size="xs"
-          />
-        )}
         {couldNotVerify && (
           <FontAwesomeIcon
             color={"var(--error)"}

src/element/ProfileImage.tsx

@@ -19,8 +19,7 @@ export interface ProfileImageProps {
 export default function ProfileImage({ pubkey, subHeader, showUsername = true, className, link }: ProfileImageProps) {
     const navigate = useNavigate();
     const user = useProfile(pubkey)?.get(pubkey);
-    
-    const hasImage = (user?.picture?.length ?? 0) > 0;
+
     const name = useMemo(() => {
         let name = hexToBech32("npub", pubkey).substring(0, 12);
         if ((user?.display_name?.length ?? 0) > 0) {
@@ -34,7 +33,7 @@ export default function ProfileImage({ pubkey, subHeader, showUsername = true, c
     return (
         <div className={`pfp${className ? ` ${className}` : ""}`}>
             <div className="avatar-wrapper">
-               <Avatar user={user} onClick={() => navigate(link ?? profileLink(pubkey))} />
+                <Avatar user={user} onClick={() => navigate(link ?? profileLink(pubkey))} />
             </div>
             {showUsername && (<div className="f-grow">
                 <Link key={pubkey} to={link ?? profileLink(pubkey)}>

src/element/Text.tsx

@@ -12,6 +12,7 @@ import './Text.css'
 import { useMemo } from "react";
 import Tag from "../nostr/Tag";
 import { MetadataCache } from "../db/User";
+import Mention from "./Mention";
 
 function transformHttpLink(a: string) {
     try {
@@ -94,8 +95,7 @@ function extractMentions(fragments: Fragment[], tags: Tag[], users: Map<string,
                     if (ref) {
                         switch (ref.Key) {
                             case "p": {
-                                let pUser = users.get(ref.PubKey!)?.name ?? hexToBech32("npub", ref.PubKey!).substring(0, 12);
-                                return <Link key={ref.PubKey} to={profileLink(ref.PubKey!)} onClick={(e) => e.stopPropagation()}>@{pUser}</Link>;
+                                return <Mention pubkey={ref.PubKey!} />
                             }
                             case "e": {
                                 let eText = hexToBech32("note", ref.Event!).substring(0, 12);