Add user mention hover info

src/components/Note/MentionedUserLink/MentionedUserLink.module.scss

@@ -1,25 +1,20 @@
 .userMention {
   position: relative;
-  .userPreview {
-    display: none;
-  }
-
-  &:hover {
   .userPreview {
     position: absolute;
     left: 0;
     width: 220px;
     z-index: var(--z-index-floater);
-      background-color: var(--background-input);
+    background-color: var(--background-site);
-      display: flex;
+    display: none;
     padding: 4px;
-      border: 1px solid var(--text-tertiary-2);
+    border: 1px solid var(--devider);
-      border-radius: 8px;
+    border-radius: 0;
     color: var(--text-secondary-2);
     font-size: 14px;
     line-height: 16px;
     font-weight: 400;
-      margin-top: 1px;
+    margin-top: 2px;
     > div {
       display: flex;
       flex-direction: column;
@@ -28,12 +23,32 @@
 
       > div {
         &.userName {
+          display: flex;
+          flex-direction: row;
           font-weight: 800;
           color: var(--text-primary);
         }
+
+        &.verification {
+          max-width: 170px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          color: var(--text-tertiary);
+
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 14px;
+        }
+
         padding-block: 2px;
       }
     }
   }
+
+  &:hover {
+    .userPreview {
+      display: flex;
+    }
   }
 }

src/components/Note/MentionedUserLink/MentionedUserLink.tsx

@@ -1,8 +1,10 @@
 import { A } from "@solidjs/router";
-import { Component, JSXElement } from "solid-js";
+import { Component, createSignal, JSXElement, onMount, Show } from "solid-js";
 import { hookForDev } from "../../../lib/devTools";
-import { userName } from "../../../stores/profile";
+import { nip05Verification, userName } from "../../../stores/profile";
 import { PrimalUser } from "../../../types/primal";
+import Avatar from "../../Avatar/Avatar";
+import VerificationCheck from "../../VerificationCheck/VerificationCheck";
 import styles from  "./MentionedUserLink.module.scss";
 
 const MentionedUserLink: Component<{
@@ -13,13 +15,38 @@ const MentionedUserLink: Component<{
 
   const LinkComponent: Component<{ children: JSXElement }> = (p) => {
     return props.openInNewTab ?
-      <a id={props.id} class={styles.userMention} href={`/p/${props.user.npub}`} target="_blank">{p.children}</a> :
+      <a
-      <A id={props.id} class={styles.userMention} href={`/p/${props.user.npub}`}>{p.children}</A>;
+        id={props.id}
+        class={styles.userMention}
+        href={`/p/${props.user.npub}`}
+        target="_blank"
+      >
+        {p.children}
+      </a> :
+      <A
+        id={props.id}
+        class={styles.userMention}
+        href={`/p/${props.user.npub}`}
+      >
+        {p.children}
+      </A>;
   };
 
   return (
     <LinkComponent>
       @{userName(props.user)}
+        <div class={styles.userPreview}>
+          <Avatar user={props.user} />
+          <div>
+            <div class={styles.userName}>
+              {userName(props.user)}
+              <VerificationCheck user={props.user} />
+            </div>
+            <div class={styles.verification}>
+              {nip05Verification(props.user)}
+            </div>
+          </div>
+        </div>
     </LinkComponent>
   );
 }

src/components/Note/Note.module.scss

@@ -84,7 +84,6 @@
         line-height: 20px;
         margin-top: 6px;
         max-width: 518px;
-        overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         .label {

src/components/Note/NoteReplyToHeader.tsx

@@ -11,9 +11,7 @@ import { useIntl } from '@cookbook/solid-intl';
 import { authorName, nip05Verification, truncateNpub, userName } from '../../stores/profile';
 import { note as t } from '../../translations';
 import { hookForDev } from '../../lib/devTools';
-import Avatar from '../Avatar/Avatar';
+import MentionedUserLink from './MentionedUserLink/MentionedUserLink';
-import { date } from '../../lib/dates';
-import VerificationCheck from '../VerificationCheck/VerificationCheck';
 
 const NoteReplyHeader: Component<{
   note: PrimalNote,
@@ -40,7 +38,7 @@ const NoteReplyHeader: Component<{
           href={`/p/${rootAuthor()?.npub}`}
           class={styles.author}
         >
-          @{userName(rootAuthor())}
+          <MentionedUserLink user={rootAuthor()} />
         </A>
       </span>
     </Show>