From cb464682fd579e92cc70c2ac1a86ab132f0d046d Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Sun, 14 Dec 2025 09:11:17 -0500
Subject: [PATCH] small updates to the profile popover styling

---
 .../p/[didOrHandle]/ProfileHeader.tsx         | 81 ++++++++++++++-----
 components/ProfilePopover.tsx                 | 22 +++--
 2 files changed, 77 insertions(+), 26 deletions(-)

diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
index 3f2adb2d..2a658cc3 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
@@ -15,37 +15,78 @@ import { ReactNode } from "react";
 export const ProfileHeader = (props: {
   profile: ProfileViewDetailed;
   publications: { record: Json; uri: string }[];
+  popover?: boolean;
 }) => {
   let profileRecord = props.profile;
+  const profileUrl = `/p/${props.profile.handle}`;
+
+  const avatarElement = (
+    <Avatar
+      src={profileRecord.avatar}
+      displayName={profileRecord.displayName}
+      className="mx-auto mt-3 sm:mt-4"
+      giant
+    />
+  );
+
+  const displayNameElement = (
+    <h3 className=" px-3 sm:px-4 pt-2 leading-tight">
+      {profileRecord.displayName
+        ? profileRecord.displayName
+        : `@${props.profile.handle}`}
+    </h3>
+  );
+
+  const handleElement = profileRecord.displayName && (
+    <div
+      className={`text-tertiary ${props.popover ? "text-xs" : "text-sm"} pb-1 italic px-3 sm:px-4 truncate`}
+    >
+      @{props.profile.handle}
+    </div>
+  );
 
   return (
-    <div className="flex flex-col relative" id="profile-header">
-      <Avatar
-        src={profileRecord.avatar}
-        displayName={profileRecord.displayName}
-        className="mx-auto mt-3 sm:mt-4"
-        giant
-      />
+    <div
+      className={`flex flex-col relative ${props.popover && "text-sm"}`}
+      id="profile-header"
+    >
       <ProfileLinks handle={props.profile.handle || ""} />
       <div className="flex flex-col">
-        <h3 className=" px-3 sm:px-4 pt-2 leading-tight">
-          {profileRecord.displayName
-            ? profileRecord.displayName
-            : `@${props.profile.handle}`}
-        </h3>
-        {profileRecord.displayName && (
-          <div className="text-tertiary text-sm pb-1 italic px-3 sm:px-4 truncate">
-            @{props.profile.handle}
-          </div>
-        )}
-        <pre className="text-secondary px-3 sm:px-4 ">
+        <div className="flex flex-col group">
+          {props.popover ? (
+            <SpeedyLink className={"hover:no-underline!"} href={profileUrl}>
+              {avatarElement}
+            </SpeedyLink>
+          ) : (
+            avatarElement
+          )}
+          {props.popover ? (
+            <SpeedyLink
+              className={" text-primary group-hover:underline"}
+              href={profileUrl}
+            >
+              {displayNameElement}
+            </SpeedyLink>
+          ) : (
+            displayNameElement
+          )}
+          {props.popover && handleElement ? (
+            <SpeedyLink className={"group-hover:underline"} href={profileUrl}>
+              {handleElement}
+            </SpeedyLink>
+          ) : (
+            handleElement
+          )}
+        </div>
+        <pre className="text-secondary px-3 sm:px-4 whitespace-pre-wrap">
           {profileRecord.description
             ? parseDescription(profileRecord.description)
             : null}
         </pre>
         <div className=" w-full overflow-x-scroll mt-3 mb-6 ">
-          <div className="grid grid-flow-col  auto-cols-[164px] sm:auto-cols-[240px] gap-2 mx-auto w-fit px-3 sm:px-4 ">
-            {/*<div className="spacer "/>*/}
+          <div
+            className={`grid grid-flow-col  gap-2 mx-auto w-fit px-3 sm:px-4 ${props.popover ? "auto-cols-[164px]" : "auto-cols-[164px] sm:auto-cols-[240px]"}`}
+          >
             {props.publications.map((p) => (
               <PublicationCard
                 key={p.uri}
diff --git a/components/ProfilePopover.tsx b/components/ProfilePopover.tsx
index 7c664524..bc76d7e0 100644
--- a/components/ProfilePopover.tsx
+++ b/components/ProfilePopover.tsx
@@ -4,6 +4,8 @@ import useSWR from "swr";
 import { callRPC } from "app/api/rpc/client";
 import { useState } from "react";
 import { ProfileHeader } from "app/(home-pages)/p/[didOrHandle]/ProfileHeader";
+import { SpeedyLink } from "./SpeedyLink";
+import { Tooltip } from "./Tooltip";
 
 export const ProfilePopover = (props: {
   trigger: React.ReactNode;
@@ -22,7 +24,7 @@ export const ProfilePopover = (props: {
   );
 
   return (
-    <Popover
+    <Tooltip
       className="max-w-sm p-0! text-center"
       trigger={props.trigger}
       onOpenChange={setIsOpen}
@@ -30,13 +32,21 @@ export const ProfilePopover = (props: {
       {isLoading ? (
         <div className="text-secondary p-4">Loading...</div>
       ) : data ? (
-        <ProfileHeader
-          profile={data.profile}
-          publications={data.publications}
-        />
+        <div>
+          <ProfileHeader
+            profile={data.profile}
+            publications={data.publications}
+            popover
+          />
+          <hr className="border-border" />
+          <div className="py-2 text-sm text-tertiary">
+            Followed by{" "}
+            <button className="hover:underline">celine and 4 others</button>
+          </div>
+        </div>
       ) : (
         <div className="text-secondary p-4">Profile not found</div>
       )}
-    </Popover>
+    </Tooltip>
   );
 };
-- 
2.51.2