From 487fce74325cc474e04db0a495b10e4b9018df53 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Thu, 18 Jan 2024 13:01:49 +0100
Subject: [PATCH] Add user mention hover info

---
 .../MentionedUserLink.module.scss             | 69 +++++++++++--------
 .../MentionedUserLink/MentionedUserLink.tsx   | 35 ++++++++--
 src/components/Note/Note.module.scss          |  1 -
 src/components/Note/NoteReplyToHeader.tsx     |  6 +-
 4 files changed, 75 insertions(+), 36 deletions(-)

diff --git a/src/components/Note/MentionedUserLink/MentionedUserLink.module.scss b/src/components/Note/MentionedUserLink/MentionedUserLink.module.scss
index 8208ede..74c53dc 100644
--- a/src/components/Note/MentionedUserLink/MentionedUserLink.module.scss
+++ b/src/components/Note/MentionedUserLink/MentionedUserLink.module.scss
@@ -1,39 +1,54 @@
 .userMention {
   position: relative;
   .userPreview {
+    position: absolute;
+    left: 0;
+    width: 220px;
+    z-index: var(--z-index-floater);
+    background-color: var(--background-site);
     display: none;
+    padding: 4px;
+    border: 1px solid var(--devider);
+    border-radius: 0;
+    color: var(--text-secondary-2);
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 400;
+    margin-top: 2px;
+    > div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-left: 4px;
+
+      > 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 {
-      position: absolute;
-      left: 0;
-      width: 220px;
-      z-index: var(--z-index-floater);
-      background-color: var(--background-input);
       display: flex;
-      padding: 4px;
-      border: 1px solid var(--text-tertiary-2);
-      border-radius: 8px;
-      color: var(--text-secondary-2);
-      font-size: 14px;
-      line-height: 16px;
-      font-weight: 400;
-      margin-top: 1px;
-      > div {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-left: 4px;
-
-        > div {
-          &.userName {
-            font-weight: 800;
-            color: var(--text-primary);
-          }
-          padding-block: 2px;
-        }
-      }
     }
   }
 }
diff --git a/src/components/Note/MentionedUserLink/MentionedUserLink.tsx b/src/components/Note/MentionedUserLink/MentionedUserLink.tsx
index ba0d2be..6e2f0df 100644
--- a/src/components/Note/MentionedUserLink/MentionedUserLink.tsx
+++ b/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 id={props.id} class={styles.userMention} href={`/p/${props.user.npub}`}>{p.children}</A>;
+      <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>
   );
 }
diff --git a/src/components/Note/Note.module.scss b/src/components/Note/Note.module.scss
index 5e188d5..f164038 100644
--- a/src/components/Note/Note.module.scss
+++ b/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 {
diff --git a/src/components/Note/NoteReplyToHeader.tsx b/src/components/Note/NoteReplyToHeader.tsx
index f992a4c..dfb27a1 100644
--- a/src/components/Note/NoteReplyToHeader.tsx
+++ b/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 { date } from '../../lib/dates';
-import VerificationCheck from '../VerificationCheck/VerificationCheck';
+import MentionedUserLink from './MentionedUserLink/MentionedUserLink';
 
 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>