desktop hover profile

package-lock.json

···
         "@atproto/oauth-client-browser": "^0.3.33",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
+        "@radix-ui/react-hover-card": "^1.1.15",
         "@radix-ui/react-slider": "^1.3.6",
         "@tailwindcss/vite": "^4.0.6",
         "@tanstack/query-sync-storage-persister": "^5.85.6",
···
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
       "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-compose-refs": "1.1.2",

package.json

···
     "@atproto/oauth-client-browser": "^0.3.33",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-slider": "^1.3.6",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/query-sync-storage-persister": "^5.85.6",

src/components/UniversalPostRenderer.tsx

···
 import DOMPurify from "dompurify";
 import { useAtom } from "jotai";
 import { DropdownMenu } from "radix-ui";
+import { HoverCard } from "radix-ui";
 import * as React from "react";
 import { type SVGProps } from "react";
 
-import { composerAtom, constellationURLAtom, imgCDNAtom, likedPostsAtom } from "~/utils/atoms";
+import {
+  composerAtom,
+  constellationURLAtom,
+  imgCDNAtom,
+  likedPostsAtom,
+} from "~/utils/atoms";
 import { useHydratedEmbed } from "~/utils/useHydrated";
 import {
   useQueryConstellation,
···
   //   path: ".reply.parent.uri",
   // });
 
-  const [constellationurl] = useAtom(constellationURLAtom)
+  const [constellationurl] = useAtom(constellationURLAtom);
 
   const infinitequeryresults = useInfiniteQuery({
     ...yknowIReallyHateThisButWhateverGuardedConstructConstellationInfiniteQueryLinks(
···
     error: embedError,
   } = useHydratedEmbed(postRecord?.value?.embed, resolved?.did);
 
-  const [imgcdn] = useAtom(imgCDNAtom)
+  const [imgcdn] = useAtom(imgCDNAtom);
 
   const parsedaturi = new AtUri(aturi); //parseAtUri(aturi);
 
+  const fakeprofileviewbasic = React.useMemo<AppBskyActorDefs.ProfileViewBasic>(
+    () => ({
+      did: resolved?.did || "",
+      handle: resolved?.handle || "",
+      displayName: profileRecord?.value?.displayName || "",
+      avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "",
+      viewer: undefined,
+      labels: profileRecord?.labels || undefined,
+      verification: undefined,
+    }),
+    [imgcdn, profileRecord, resolved?.did, resolved?.handle]
+  );
+
+  const fakeprofileviewdetailed =
+    React.useMemo<AppBskyActorDefs.ProfileViewDetailed>(
+      () => ({
+        ...fakeprofileviewbasic,
+        $type: "app.bsky.actor.defs#profileViewDetailed",
+        description: profileRecord?.value?.description || undefined,
+      }),
+      [fakeprofileviewbasic, profileRecord?.value?.description]
+    );
+
   const fakepost = React.useMemo<AppBskyFeedDefs.PostView>(
     () => ({
       $type: "app.bsky.feed.defs#postView",
       uri: aturi,
       cid: postRecord?.cid || "",
-      author: {
-        did: resolved?.did || "",
-        handle: resolved?.handle || "",
-        displayName: profileRecord?.value?.displayName || "",
-        avatar: getAvatarUrl(profileRecord, resolved?.did, imgcdn) || "",
-        viewer: undefined,
-        labels: profileRecord?.labels || undefined,
-        verification: undefined,
-      },
+      author: fakeprofileviewbasic,
       record: postRecord?.value || {},
       embed: hydratedEmbed ?? undefined,
       replyCount: repliesCount ?? 0,
···
       postRecord?.cid,
       postRecord?.value,
       postRecord?.labels,
-      resolved?.did,
-      resolved?.handle,
-      profileRecord,
+      fakeprofileviewbasic,
       hydratedEmbed,
       repliesCount,
       repostsCount,
       likesCount,
-      imgcdn
     ]
   );
 
···
           }
         }}
         post={fakepost}
+        uprrrsauthor={fakeprofileviewdetailed}
         salt={aturi}
         bottomReplyLine={bottomReplyLine}
         topReplyLine={topReplyLine}
···
 //import Masonry from "@mui/lab/Masonry";
 import {
   type $Typed,
+  AppBskyActorDefs,
   AppBskyEmbedDefs,
   AppBskyEmbedExternal,
   AppBskyEmbedImages,
···
 
 import defaultpfp from "~/../public/favicon.png";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
+import { FollowButton, Mutual } from "~/routes/profile.$did";
 import type { LightboxProps } from "~/routes/profile.$did/post.$rkey.image.$i";
 // import type { OutputSchema } from "@atproto/api/dist/client/types/app/bsky/feed/getFeed";
 // import type {
···
 
 function UniversalPostRenderer({
   post,
+  uprrrsauthor,
   //setMainItem,
   //isMainItem,
   onPostClick,
···
   maxReplies,
 }: {
   post: PostView;
+  uprrrsauthor?: AppBskyActorDefs.ProfileViewDetailed;
   // optional for now because i havent ported every use to this yet
   // setMainItem?: React.Dispatch<
   //   React.SetStateAction<AppBskyFeedDefs.FeedViewPost>
···
             className="bg-gray-500 dark:bg-gray-400"
           />
         )}
-        <div
-          style={{
-            position: "absolute",
-            //top: isRepost ? "calc(16px + 1rem)" : 16,
-            //left: 16,
-            zIndex: 1,
-            top: isRepost
-              ? "calc(16px + 1rem)"
-              : isQuote
-                ? 12
-                : topReplyLine
-                  ? 8
-                  : 16,
-            left: isQuote ? 12 : 16,
-          }}
-          onClick={onProfileClick}
-        >
-          <img
-            src={post.author.avatar || defaultpfp}
-            alt="avatar"
-            // transition={{
-            //   type: "spring",
-            //   stiffness: 260,
-            //   damping: 20,
-            // }}
-            style={{
-              borderRadius: "50%",
-              marginRight: 12,
-              objectFit: "cover",
-              //background: theme.border,
-              //border: `1px solid ${theme.border}`,
-              width: isQuote ? 16 : 42,
-              height: isQuote ? 16 : 42,
-            }}
-            className="border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600"
-          />
-        </div>
+        <HoverCard.Root>
+          <HoverCard.Trigger asChild>
+            <div
+              className={`absolute`}
+              style={{
+                top: isRepost
+                  ? "calc(16px + 1rem)"
+                  : isQuote
+                    ? 12
+                    : topReplyLine
+                      ? 8
+                      : 16,
+                left: isQuote ? 12 : 16,
+              }}
+              onClick={onProfileClick}
+            >
+              <img
+                src={post.author.avatar || defaultpfp}
+                alt="avatar"
+                className={`rounded-full object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600`}
+                style={{
+                  width: isQuote ? 16 : 42,
+                  height: isQuote ? 16 : 42,
+                }}
+              />
+            </div>
+          </HoverCard.Trigger>
+          <HoverCard.Portal>
+            <HoverCard.Content
+              className="rounded-md p-4 w-72 bg-gray-50 dark:bg-gray-900 shadow-lg border border-gray-300 dark:border-gray-800 animate-slide-fade z-50"
+              side={"bottom"}
+              sideOffset={5}
+            >
+              <div className="flex flex-col gap-2">
+                <div className="flex flex-row">
+                  <img
+                    src={post.author.avatar || defaultpfp}
+                    alt="avatar"
+                    className="rounded-full w-[58px] h-[58px] object-cover border border-gray-300 dark:border-gray-800 bg-gray-300 dark:bg-gray-600"
+                  />
+                  <div className=" flex-1 flex flex-row align-middle justify-end">
+                    <FollowButton targetdidorhandle={post.author.did} />
+                  </div>
+                </div>
+                <div className="flex flex-col gap-3">
+                  <div>
+                    <div className="text-gray-900 dark:text-gray-100 font-medium text-md">
+                      {post.author.displayName || post.author.handle}{" "}
+                    </div>
+                    <div className="text-gray-500 dark:text-gray-400 text-md flex flex-row gap-1">
+                      <Mutual targetdidorhandle={post.author.did} />@{post.author.handle}{" "} 
+                    </div>
+                  </div>
+                  {uprrrsauthor?.description && (
+                    <div className="text-gray-700 dark:text-gray-300 text-sm text-left break-words line-clamp-3">
+                      {uprrrsauthor.description}
+                    </div>
+                  )}
+                  {/* <div className="flex gap-4">
+                    <div className="flex gap-1">
+                      <div className="font-medium text-gray-900 dark:text-gray-100">
+                        0
+                      </div>
+                      <div className="text-gray-500 dark:text-gray-400">
+                        Following
+                      </div>
+                    </div>
+                    <div className="flex gap-1">
+                      <div className="font-medium text-gray-900 dark:text-gray-100">
+                        2,900
+                      </div>
+                      <div className="text-gray-500 dark:text-gray-400">
+                        Followers
+                      </div>
+                    </div>
+                  </div> */}
+                </div>
+              </div>
+
+              {/* <HoverCard.Arrow className="fill-gray-50 dark:fill-gray-900" /> */}
+            </HoverCard.Content>
+          </HoverCard.Portal>
+        </HoverCard.Root>
+
         <div style={{ display: "flex", alignItems: "flex-start", zIndex: 2 }}>
           <div
             style={{

src/routes/profile.$did/index.tsx

···
 import { UniversalPostRendererATURILoader } from "~/components/UniversalPostRenderer";
 import { useAuth } from "~/providers/UnifiedAuthProvider";
 import { imgCDNAtom } from "~/utils/atoms";
-import { toggleFollow, useGetFollowState } from "~/utils/followState";
+import { toggleFollow, useGetFollowState, useGetOneToOneState } from "~/utils/followState";
 import {
   useInfiniteQueryAuthorFeed,
   useQueryIdentity,
···
   // booo bad this is not always the did it might be a handle, use identity.did instead
   const { did } = Route.useParams();
   const queryClient = useQueryClient();
-  const { agent } = useAuth();
   const {
     data: identity,
     isLoading: isIdentityLoading,
     error: identityError,
   } = useQueryIdentity(did);
-
-  const followRecords = useGetFollowState({
-    target: identity?.did || did,
-    user: agent?.did,
-  });
 
   const resolvedDid = did.startsWith("did:") ? did : identity?.did;
   const resolvedHandle = did.startsWith("did:") ? identity?.handle : did;
···
     () => postsData?.pages.flatMap((page) => page.records) ?? [],
     [postsData]
   );
-  
-  const [imgcdn] = useAtom(imgCDNAtom)
+
+  const [imgcdn] = useAtom(imgCDNAtom);
 
   function getAvatarUrl(p: typeof profile) {
     const link = p?.avatar?.ref?.["$link"];
···
             also delay the backfill to be on demand because it would be pretty intense
             also save it persistently
           */}
-          {identity?.did !== agent?.did ? (
-            <>
-              {!(followRecords?.length && followRecords?.length > 0) ? (
-                <button
-                  onClick={() =>
-                    toggleFollow({
-                      agent: agent || undefined,
-                      targetDid: identity?.did,
-                      followRecords: followRecords,
-                      queryClient: queryClient,
-                    })
-                  }
-                  className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"
-                >
-                  Follow
-                </button>
-              ) : (
-                <button
-                  onClick={() =>
-                    toggleFollow({
-                      agent: agent || undefined,
-                      targetDid: identity?.did,
-                      followRecords: followRecords,
-                      queryClient: queryClient,
-                    })
-                  }
-                  className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]"
-                >
-                  Unfollow
-                </button>
-              )}
-            </>
-          ) : (
-            <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
-              Edit Profile
-            </button>
-          )}
+          <FollowButton targetdidorhandle={did} />
           <button className="rounded-full dark:bg-gray-600 bg-gray-300 px-3 py-2 text-[14px]">
             ... {/* todo: icon */}
           </button>
···
         {/* Info Card */}
         <div className="mt-16 pb-2 px-4 text-gray-900 dark:text-gray-100">
           <div className="font-bold text-2xl">{displayName}</div>
-          <div className="text-gray-500 dark:text-gray-400 text-base mb-3">
+          <div className="text-gray-500 dark:text-gray-400 text-base mb-3 flex flex-row gap-1">
+            <Mutual targetdidorhandle={did} /> 
             {handle}
           </div>
           {description && (
···
     </>
   );
 }
+
+export function FollowButton({targetdidorhandle}:{targetdidorhandle: string}) {
+  const {agent} = useAuth()
+  const {data: identity} = useQueryIdentity(targetdidorhandle);
+  const queryClient = useQueryClient();
+
+  const followRecords = useGetFollowState({
+    target: identity?.did ?? targetdidorhandle,
+    user: agent?.did,
+  });
+  
+  return (
+    <>
+      {identity?.did !== agent?.did ? (
+        <>
+          {!(followRecords?.length && followRecords?.length > 0) ? (
+            <button
+              onClick={(e) =>
+              {
+                e.stopPropagation();
+                toggleFollow({
+                  agent: agent || undefined,
+                  targetDid: identity?.did,
+                  followRecords: followRecords,
+                  queryClient: queryClient,
+                })
+              }
+              }
+              className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"
+            >
+              Follow
+            </button>
+          ) : (
+            <button
+              onClick={(e) =>
+              {
+                e.stopPropagation();
+                toggleFollow({
+                  agent: agent || undefined,
+                  targetDid: identity?.did,
+                  followRecords: followRecords,
+                  queryClient: queryClient,
+                })
+              }
+              }
+              className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]"
+            >
+              Unfollow
+            </button>
+          )}
+        </>
+      ) : (
+        <button className="rounded-full h-10 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors px-4 py-2 text-[14px]">
+          Edit Profile
+        </button>
+      )}
+    </>
+  );
+}
+
+
+export function Mutual({targetdidorhandle}:{targetdidorhandle: string}) {
+  const {agent} = useAuth()
+  const {data: identity} = useQueryIdentity(targetdidorhandle);
+
+  const mutualfollows = useGetOneToOneState(agent?.did ? {
+    target: agent?.did,
+    user: identity?.did ?? targetdidorhandle,
+    collection: "app.bsky.graph.follow",
+    path: ".subject"
+  }:undefined);
+
+  const ismutual: boolean = (!!mutualfollows?.length && mutualfollows.length > 0)
+  
+  return (
+    <>
+      {identity?.did !== agent?.did ? (
+        <>
+          {!(ismutual) ? (
+            <></>
+          ) : (
+            <div className=" text-sm px-1.5 py-0.5 text-gray-500 bg-gray-200 dark:text-gray-400 dark:bg-gray-800 rounded-lg flex flex-row items-center justify-center">mutuals</div>
+          )}
+        </>
+      ) : (
+        // lmao can someone be mutuals with themselves ??
+        <></>
+      )}
+    </>
+  );
+}

src/utils/followState.ts

···
     };
   });
 }
+
+
+
+export function useGetOneToOneState(params?: {
+  target: string;
+  user: string;
+  collection: string;
+  path: string;
+}): string[] | undefined {
+  const { data: arbitrarydata } = useQueryConstellation(
+    params && params.user
+      ? {
+          method: "/links",
+          target: params.target,
+          // @ts-expect-error overloading sucks so much
+          collection: params.collection,
+          path: params.path,
+          dids: [params.user],
+        }
+      : { method: "undefined", target: "whatever" }
+    // overloading sucks so much
+  ) as { data: linksRecordsResponse | undefined };
+  if (!params || !params.user) return undefined;
+  const data = arbitrarydata?.linking_records.slice(0, 50) ?? [];
+
+  if (data.length > 0) {
+    return data.map((linksRecord) => {
+      return `at://${linksRecord.did}/${linksRecord.collection}/${linksRecord.rkey}`;
+    });
+  }
+
+  return undefined;
+}