From c19d446e205b2accecd8f4bb177c3fead2b5a511 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Mon, 15 Dec 2025 11:18:10 +0400
Subject: [PATCH] add popover to post header and pub page

---
 .../[did]/[publication]/PublicationAuthor.tsx | 21 +++++++++++++++++++
 .../[rkey]/PostHeader/PostHeader.tsx          | 17 ++++++++-------
 app/lish/[did]/[publication]/page.tsx         | 15 ++++++-------
 3 files changed, 36 insertions(+), 17 deletions(-)
 create mode 100644 app/lish/[did]/[publication]/PublicationAuthor.tsx

diff --git a/app/lish/[did]/[publication]/PublicationAuthor.tsx b/app/lish/[did]/[publication]/PublicationAuthor.tsx
new file mode 100644
index 00000000..15f3e949
--- /dev/null
+++ b/app/lish/[did]/[publication]/PublicationAuthor.tsx
@@ -0,0 +1,21 @@
+"use client";
+import { ProfilePopover } from "components/ProfilePopover";
+
+export const PublicationAuthor = (props: {
+  did: string;
+  displayName?: string;
+  handle: string;
+}) => {
+  return (
+    <p className="italic text-tertiary sm:text-base text-sm">
+      <ProfilePopover
+        didOrHandle={props.did}
+        trigger={
+          <span className="hover:underline">
+            <strong>by {props.displayName}</strong> @{props.handle}
+          </span>
+        }
+      />
+    </p>
+  );
+};
diff --git a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
index c24a83a2..9936d2c0 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx
@@ -18,6 +18,7 @@ import { SpeedyLink } from "components/SpeedyLink";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import Post from "app/p/[didOrHandle]/[rkey]/l-quote/[quote]/page";
 import { Separator } from "components/Layout";
+import { ProfilePopover } from "components/ProfilePopover";
 
 export function PostHeader(props: {
   data: PostPageData;
@@ -72,14 +73,14 @@ export function PostHeader(props: {
         <>
           <div className="flex flex-row gap-2 items-center">
             {profile ? (
-              <>
-                <a
-                  className="text-tertiary"
-                  href={`https://bsky.app/profile/${profile.handle}`}
-                >
-                  {profile.displayName || profile.handle}
-                </a>
-              </>
+              <ProfilePopover
+                didOrHandle={profile.did}
+                trigger={
+                  <span className="text-tertiary hover:underline">
+                    {profile.displayName || profile.handle}
+                  </span>
+                }
+              />
             ) : null}
             {record.publishedAt ? (
               <>
diff --git a/app/lish/[did]/[publication]/page.tsx b/app/lish/[did]/[publication]/page.tsx
index 6754053a..388ccff3 100644
--- a/app/lish/[did]/[publication]/page.tsx
+++ b/app/lish/[did]/[publication]/page.tsx
@@ -17,6 +17,7 @@ import { CommentTiny } from "components/Icons/CommentTiny";
 import { InteractionPreview } from "components/InteractionsPreview";
 import { LocalizedDate } from "./LocalizedDate";
 import { PublicationHomeLayout } from "./PublicationHomeLayout";
+import { PublicationAuthor } from "./PublicationAuthor";
 
 export default async function Publication(props: {
   params: Promise<{ publication: string; did: string }>;
@@ -91,15 +92,11 @@ export default async function Publication(props: {
                 {record?.description}{" "}
               </p>
               {profile && (
-                <p className="italic text-tertiary sm:text-base text-sm">
-                  <strong className="">by {profile.displayName}</strong>{" "}
-                  <a
-                    className="text-tertiary"
-                    href={`https://bsky.app/profile/${profile.handle}`}
-                  >
-                    @{profile.handle}
-                  </a>
-                </p>
+                <PublicationAuthor
+                  did={profile.did}
+                  displayName={profile.displayName}
+                  handle={profile.handle}
+                />
               )}
               <div className="sm:pt-4 pt-4">
                 <SubscribeWithBluesky
-- 
2.51.2