From 4e80ae0ca4cf58c82ebbe17c1f65eea45cc92a3d Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 13 Jan 2026 15:12:13 -1000
Subject: [PATCH] fixed some layout with popover, now opens on tap rather than
 hover (#255)

* fixed some layout with popover, now opens on tap rather than hover

* little popover fixes
---
 .../p/[didOrHandle]/ProfileHeader.tsx         | 92 +++++++++++--------
 .../p/[didOrHandle]/ProfileTabs.tsx           |  2 +-
 components/ProfilePopover.tsx                 | 60 ++++++------
 3 files changed, 90 insertions(+), 64 deletions(-)

diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
index 459ef99c..a0fd68e4 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
@@ -1,8 +1,6 @@
 "use client";
 import { Avatar } from "components/Avatar";
-import { AppBskyActorProfile, PubLeafletPublication } from "lexicons/api";
-import { blobRefToSrc } from "src/utils/blobRefToSrc";
-import type { ProfileData } from "./layout";
+import { PubLeafletPublication } from "lexicons/api";
 import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
 import { colorToString } from "components/ThemeManager/useColorAttribute";
 import { PubIcon } from "components/ActionBar/Publications";
@@ -25,13 +23,13 @@ export const ProfileHeader = (props: {
     <Avatar
       src={profileRecord.avatar}
       displayName={profileRecord.displayName}
-      className="mx-auto mt-3 sm:mt-4"
+      className="profileAvatar mx-auto mt-3 sm:mt-4"
       giant
     />
   );
 
   const displayNameElement = (
-    <h3 className=" px-3 sm:px-4 pt-2 leading-tight">
+    <h3 className="profileName px-3 sm:px-4 pt-2 leading-tight">
       {profileRecord.displayName
         ? profileRecord.displayName
         : `@${props.profile.handle}`}
@@ -40,20 +38,21 @@ export const ProfileHeader = (props: {
 
   const handleElement = profileRecord.displayName && (
     <div
-      className={`text-tertiary ${props.popover ? "text-xs" : "text-sm"} pb-1 italic px-3 sm:px-4 truncate`}
+      className={`profileHandle text-secondary ${props.popover ? "text-sm" : "text-sm"}  px-3 sm:px-4 truncate`}
     >
       @{props.profile.handle}
     </div>
   );
+  console.log(props.profile);
 
   return (
     <div
-      className={`flex flex-col relative ${props.popover && "text-sm"}`}
+      className={`profileHeader flex flex-col relative `}
       id="profile-header"
     >
-      <ProfileLinks handle={props.profile.handle || ""} />
-      <div className="flex flex-col">
-        <div className="flex flex-col group">
+      {!props.popover && <ProfileLinks handle={props.profile.handle || ""} />}
+      <div className="profileInfo flex flex-col gap-3">
+        <div className="profileNameAndHandle flex flex-col ">
           {props.popover ? (
             <SpeedyLink className={"hover:no-underline!"} href={profileUrl}>
               {avatarElement}
@@ -61,30 +60,22 @@ export const ProfileHeader = (props: {
           ) : (
             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
-          )}
+          {displayNameElement}
+
+          {handleElement}
+          <KnownFollowers
+            viewer={props.profile.viewer}
+            did={props.profile.did}
+          />
+
+          <pre className="profileDescription pt-1 px-3 sm:px-4 whitespace-pre-wrap">
+            {profileRecord.description
+              ? parseDescription(profileRecord.description)
+              : null}
+          </pre>
         </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 py-3 mb-3 ">
+
+        <div className="profilePublicationCards w-full overflow-x-scroll">
           <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]"}`}
           >
@@ -104,7 +95,7 @@ export const ProfileHeader = (props: {
 
 const ProfileLinks = (props: { handle: string }) => {
   return (
-    <div className="absolute sm:top-4 top-3 sm:right-4 right-3 flex flex-row gap-2">
+    <div className="profileLinks absolute sm:top-4 top-3 sm:right-4 right-3 flex flex-row gap-2">
       <a
         className="text-tertiary hover:text-accent-contrast hover:no-underline!"
         href={`https://bsky.app/profile/${props.handle}`}
@@ -124,7 +115,7 @@ const PublicationCard = (props: {
   return (
     <a
       href={`https://${record.base_path}`}
-      className="border border-border p-2 rounded-lg hover:no-underline! text-primary basis-1/2"
+      className="profilePublicationCard border border-border p-2 rounded-lg hover:no-underline! text-primary basis-1/2 "
       style={{ backgroundColor: `rgb(${colorToString(bgLeaflet, "rgb")})` }}
     >
       <div
@@ -225,7 +216,12 @@ function parseDescription(description: string): ReactNode[] {
           ? urlWithoutProtocol.slice(0, 50) + "…"
           : urlWithoutProtocol;
       parts.push(
-        <a key={key++} href={match.href} target="_blank" rel="noopener noreferrer">
+        <a
+          key={key++}
+          href={match.href}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           {displayText}
         </a>,
       );
@@ -241,3 +237,27 @@ function parseDescription(description: string): ReactNode[] {
 
   return parts;
 }
+
+const KnownFollowers = (props: {
+  viewer: ProfileViewDetailed["viewer"];
+  did: string;
+}) => {
+  if (!props.viewer?.knownFollowers) return null;
+  let count = props.viewer.knownFollowers.count;
+
+  return (
+    <>
+      <div className="profileKnownFollowers sm:px-4 px-3 text-xs text-tertiary  italic">
+        Followed by{" "}
+        <a
+          className="hover:underline"
+          href={`https://bsky.app/profile/${props.did}/known-followers`}
+          target="_blank"
+        >
+          {props.viewer?.knownFollowers?.followers[0]?.displayName}{" "}
+          {count > 1 ? `and ${count - 1} other${count > 2 ? "s" : ""}` : ""}
+        </a>
+      </div>
+    </>
+  );
+};
diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
index 4609a0a1..c5b9e3a2 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx
@@ -41,7 +41,7 @@ export const ProfileTabs = (props: { didOrHandle: string }) => {
   const bgColor = cardBorderHidden ? "var(--bg-leaflet)" : "var(--bg-page)";
 
   return (
-    <div className="flex flex-col w-full sticky top-3 sm:top-4 z-20 sm:px-4 px-3">
+    <div className="flex flex-col w-full sticky top-3 sm:top-4 z-20 sm:px-4 px-3 pt-6">
       <div
         style={
           scrollPosWithinTabContent < 20
diff --git a/components/ProfilePopover.tsx b/components/ProfilePopover.tsx
index 00c2d127..46641b41 100644
--- a/components/ProfilePopover.tsx
+++ b/components/ProfilePopover.tsx
@@ -7,6 +7,8 @@ import { ProfileHeader } from "app/(home-pages)/p/[didOrHandle]/ProfileHeader";
 import { SpeedyLink } from "./SpeedyLink";
 import { Tooltip } from "./Tooltip";
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { BlueskyTiny } from "./Icons/BlueskyTiny";
+import { ArrowRightTiny } from "./Icons/ArrowRightTiny";
 
 export const ProfilePopover = (props: {
   trigger: React.ReactNode;
@@ -27,14 +29,11 @@ export const ProfilePopover = (props: {
   );
 
   return (
-    <Tooltip
+    <Popover
       className="max-w-sm p-0! text-center"
-      asChild
       trigger={
-        <a
+        <div
           className="no-underline"
-          href={`https://leaflet.pub/p/${props.didOrHandle}`}
-          target="_blank"
           onPointerEnter={(e) => {
             if (hoverTimeout.current) {
               window.clearTimeout(hoverTimeout.current);
@@ -53,7 +52,7 @@ export const ProfilePopover = (props: {
           }}
         >
           {props.trigger}
-        </a>
+        </div>
       }
       onOpenChange={setIsOpen}
     >
@@ -66,33 +65,40 @@ export const ProfilePopover = (props: {
             publications={data.publications}
             popover
           />
-          <KnownFollowers viewer={data.profile.viewer} did={data.profile.did} />
+
+          <ProfileLinks handle={data.profile.handle} />
         </div>
       ) : (
-        <div className="text-secondary py-2 px-4">Profile not found</div>
+        <div className="text-secondary py-2 px-4">No profile found...</div>
       )}
-    </Tooltip>
+    </Popover>
   );
 };
 
-let KnownFollowers = (props: {
-  viewer: ProfileViewDetailed["viewer"];
-  did: string;
-}) => {
-  if (!props.viewer?.knownFollowers) return null;
-  let count = props.viewer.knownFollowers.count;
+const ProfileLinks = (props: { handle: string }) => {
+  let linkClassName =
+    "flex gap-1.5 text-tertiary items-center border border-transparent px-1  rounded-md hover:bg-[var(--accent-light)] hover:border-accent-contrast hover:text-accent-contrast no-underline hover:no-underline";
   return (
-    <>
-      <hr className="border-border" />
-      Followed by{" "}
-      <a
-        className="hover:underline"
-        href={`https://bsky.social/profile/${props.did}/known-followers`}
-        target="_blank"
-      >
-        {props.viewer?.knownFollowers?.followers[0]?.displayName}{" "}
-        {count > 1 ? `and ${count - 1} other${count > 2 ? "s" : ""}` : ""}
-      </a>
-    </>
+    <div className="w-full flex-col">
+      <hr className="border-border-light mt-3" />
+      <div className="flex gap-2 justify-between sm:px-4 px-3 py-2">
+        <div className="flex gap-2">
+          <a
+            href={`https://bsky.app/profile/${props.handle}`}
+            target="_blank"
+            className={linkClassName}
+          >
+            <BlueskyTiny />
+            Bluesky
+          </a>
+        </div>
+        <SpeedyLink
+          href={`https://leaflet.pub/p/${props.handle}`}
+          className={linkClassName}
+        >
+          Full profile <ArrowRightTiny />
+        </SpeedyLink>
+      </div>
+    </div>
   );
 };
-- 
2.51.2