From ff06486b15928f3161138bfd9ff0fc122e6b296e Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Wed, 30 Oct 2024 14:17:17 -0700
Subject: [PATCH] Add profile card preview on mention hover

---
 .../topicHeader/TopicHeader.tsx               |  2 +-
 .../dataDisplay/postText/postText.tsx         | 27 ++++++++++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/contentDisplay/topicHeader/TopicHeader.tsx b/src/components/contentDisplay/topicHeader/TopicHeader.tsx
index 100fb36a..3f7f05c5 100644
--- a/src/components/contentDisplay/topicHeader/TopicHeader.tsx
+++ b/src/components/contentDisplay/topicHeader/TopicHeader.tsx
@@ -19,7 +19,7 @@ export default function TopicHeader(props: Props) {
   if (isLoading && !data) return <TopicHeaderSkeleton />;
 
   return (
-    <article className="border-skin-base flex flex-col gap-2 border border-x-0 border-t-0 p-3 md:border md:rounded-t-2xl">
+    <article className="border-skin-base flex flex-col gap-2 border-x-0 border-t-0 p-3 md:border md:border-b-0 md:rounded-t-2xl">
       {error && (
         <FeedAlert
           variant="badResponse"
diff --git a/src/components/dataDisplay/postText/postText.tsx b/src/components/dataDisplay/postText/postText.tsx
index 6f7571a9..fe733c2a 100644
--- a/src/components/dataDisplay/postText/postText.tsx
+++ b/src/components/dataDisplay/postText/postText.tsx
@@ -8,6 +8,7 @@ import { Fragment } from "react";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { BiLinkExternal } from "react-icons/bi";
 import PostTag from "../postTag/PostTag";
+import ProfileHoverCard from "@/components/contentDisplay/profileHoverCard/ProfileHoverCard";
 
 interface Props {
   record: PostView["record"];
@@ -33,14 +34,20 @@ export default function PostText(props: Props) {
       content.push({
         text: segment.text,
         component: (
-          <Link
-            className="text-skin-link-base hover:text-skin-link-hover break-after-auto"
-            href={`/dashboard/user/${getHandle(segment.text)}`}
-            key={segment.mention?.did}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {segment.text}
-          </Link>
+          <>
+            {segment.mention?.did && (
+              <Link
+                className="text-skin-link-base hover:text-skin-link-hover break-after-auto"
+                href={`/dashboard/user/${getHandle(segment.text)}`}
+                key={segment.mention?.did}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <ProfileHoverCard handle={segment.mention.did}>
+                  {segment.text}
+                </ProfileHoverCard>
+              </Link>
+            )}
+          </>
         ),
       });
     } else if (segment.isLink()) {
@@ -61,12 +68,12 @@ export default function PostText(props: Props) {
                 </Link>
               </Tooltip.Trigger>
               <Tooltip.Portal>
-                <Tooltip.Content className="bg-skin-base z-[60] p-3 border border-skin-base rounded-xl max-w-xs shadow-lg m-3">
+                <Tooltip.Content className="flex flex-col gap-1 bg-skin-base z-[60] p-3 border border-skin-base rounded-xl max-w-xs shadow-lg m-3">
                   <div className="flex flex-wrap items-center gap-2 text-lg">
+                    <BiLinkExternal />
                     <span className="block text-skin-base font-medium">
                       Link
                     </span>
-                    <BiLinkExternal />
                   </div>
 
                   <Link