Feature/profiles (#247)

* created profile page, 404s

* init page profile stuff

* replaces placehodler with profile pic

* added tab component, rm activity tab from profile

* add publications

* add posts to profile page

* paginate posts

* update to teh layout, wip comment deisgn

* fixed up some weirdness that happened with merging

* new comment design

* render profile sub things as pages

* small icon size adjustment

* side scroll the pub list

* refactored cardBorderHidden into a context in ThemeProvider and a hook

* sticky header for tabs in profile page

* simplied the scroll logic, fixed a boo boo

* wire up comments and implement deep linking to em

* fix comment action import

* add subscriptions to profiles

* moved profile pic, removed console logs

* bluesky profile link

* get home theme on profile pages

* Profile popover init

* use bluesky api for profile data

* parse and render description

* small updates to the profile popover styling

* tweaks to get the tabs working if cardBorderHidden

* new styling on @mentions and adding profile popover on hover

* prefetch profile data on hover

* fix adding local comments

* render known followers

* link to bsky known followers page

* fixes

* add titles to tags and profiles

* fix links and themes for standalone docs on profile

* add popover to post header and pub page

* use linkify js for urls in profiles

* wip tooltip stuff

* use localizeddate in post listing

---------

Co-authored-by: celine <[e-mail]>
Co-authored-by: Jared Pereira <[e-mail]>

app/(home-pages)/discover/page.tsx

···
   return (
     <DashboardLayout
       id="discover"
-      cardBorderHidden={false}
       currentPage="discover"
       defaultTab="default"
       actions={null}
···
 }
 
 const DiscoverContent = async (props: { order: string }) => {
-  const orderValue =
-    props.order === "popular" ? "popular" : "recentlyUpdated";
+  const orderValue = props.order === "popular" ? "popular" : "recentlyUpdated";
   let { publications, nextCursor } = await getPublications(orderValue);
 
   return (

app/(home-pages)/home/HomeLayout.tsx

···
   useDashboardState,
 } from "components/PageLayouts/DashboardLayout";
 import { Actions } from "./Actions/Actions";
-import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 import { GetLeafletDataReturnType } from "app/api/rpc/[command]/get_leaflet_data";
 import { useState } from "react";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
···
     props.entityID,
     "theme/background-image",
   );
-  let cardBorderHidden = !!useCardBorderHidden(props.entityID);
 
   let [searchValue, setSearchValue] = useState("");
   let [debouncedSearchValue, setDebouncedSearchValue] = useState("");
···
   return (
     <DashboardLayout
       id="home"
-      cardBorderHidden={cardBorderHidden}
       currentPage="home"
       defaultTab="home"
       actions={<Actions />}
···
             <HomeLeafletList
               titles={props.titles}
               initialFacts={props.initialFacts}
-              cardBorderHidden={cardBorderHidden}
               searchValue={debouncedSearchValue}
             />
           ),
···
     [root_entity: string]: Fact<Attribute>[];
   };
   searchValue: string;
-  cardBorderHidden: boolean;
 }) {
   let { identity } = useIdentityData();
   let { data: initialFacts } = useSWR(
···
         searchValue={props.searchValue}
         leaflets={leaflets}
         titles={initialFacts?.titles || {}}
-        cardBorderHidden={props.cardBorderHidden}
         initialFacts={initialFacts?.facts || {}}
         showPreview
       />
···
     [root_entity: string]: Fact<Attribute>[];
   };
   searchValue: string;
-  cardBorderHidden: boolean;
   showPreview?: boolean;
 }) {
   let { identity } = useIdentityData();
···
               loggedIn={!!identity}
               display={display}
               added_at={added_at}
-              cardBorderHidden={props.cardBorderHidden}
               index={index}
               showPreview={props.showPreview}
               isHidden={

app/(home-pages)/home/LeafletList/LeafletListItem.tsx

···
 import { useState, useRef, useEffect } from "react";
 import { SpeedyLink } from "components/SpeedyLink";
 import { useLeafletPublicationStatus } from "components/PageSWRDataProvider";
+import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 
 export const LeafletListItem = (props: {
   archived?: boolean | null;
   loggedIn: boolean;
   display: "list" | "grid";
-  cardBorderHidden: boolean;
   added_at: string;
   title?: string;
   index: number;
   isHidden: boolean;
   showPreview?: boolean;
 }) => {
+  const cardBorderHidden = useCardBorderHidden();
   const pubStatus = useLeafletPublicationStatus();
   let [isOnScreen, setIsOnScreen] = useState(props.index < 16 ? true : false);
   let previewRef = useRef<HTMLDivElement | null>(null);
···
           ref={previewRef}
           className={`relative flex gap-3 w-full
             ${props.isHidden ? "hidden" : "flex"}
-            ${props.cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`}
+            ${cardBorderHidden ? "" : "px-2 py-1 block-border hover:outline-border relative"}`}
           style={{
-            backgroundColor: props.cardBorderHidden
+            backgroundColor: cardBorderHidden
               ? "transparent"
               : "rgba(var(--bg-page), var(--bg-page-alpha))",
           }}
···
             loggedIn={props.loggedIn}
           />
         </div>
-        {props.cardBorderHidden && (
+        {cardBorderHidden && (
           <hr
             className="last:hidden border-border-light"
             style={{
···
        ${props.isHidden ? "hidden" : "flex"}
         `}
       style={{
-        backgroundColor: props.cardBorderHidden
+        backgroundColor: cardBorderHidden
           ? "transparent"
           : "rgba(var(--bg-page), var(--bg-page-alpha))",
       }}

app/(home-pages)/home/LeafletList/LeafletPreview.tsx

···
   const firstPage = useEntity(root, "root/page")[0];
   const page = firstPage?.data.value || root;
 
-  const cardBorderHidden = useCardBorderHidden(root);
+  const cardBorderHidden = useEntity(root, "theme/card-border-hidden")?.data
+    .value;
   const rootBackgroundImage = useEntity(root, "theme/card-background-image");
   const rootBackgroundRepeat = useEntity(
     root,
···
 
   const contentWrapperClass = `leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`;
 
-  return { root, page, cardBorderHidden, contentWrapperStyle, contentWrapperClass };
+  return {
+    root,
+    page,
+    cardBorderHidden,
+    contentWrapperStyle,
+    contentWrapperClass,
+  };
 }
 
 export const LeafletListPreview = (props: { isVisible: boolean }) => {
-  const { root, page, cardBorderHidden, contentWrapperStyle, contentWrapperClass } =
-    useLeafletPreviewData();
+  const {
+    root,
+    page,
+    cardBorderHidden,
+    contentWrapperStyle,
+    contentWrapperClass,
+  } = useLeafletPreviewData();
 
   return (
     <Tooltip
-      open={true}
-      delayDuration={0}
       side="right"
+      asChild
       trigger={
-        <div className="w-12 h-full py-1">
+        <div className="w-12 h-full py-1 z-10">
           <div className="rounded-md h-full overflow-hidden">
             <ThemeProvider local entityID={root} className="">
               <ThemeBackgroundProvider entityID={root}>

app/(home-pages)/looseleafs/LooseleafsLayout.tsx

···
 "use client";
 import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
-import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
 import { useState } from "react";
 import { useDebouncedEffect } from "src/hooks/useDebouncedEffect";
 import { Fact, PermissionToken } from "src/replicache";
···
     [searchValue],
   );
 
-  let cardBorderHidden = !!useCardBorderHidden(props.entityID);
   return (
     <DashboardLayout
       id="looseleafs"
-      cardBorderHidden={cardBorderHidden}
       currentPage="looseleafs"
       defaultTab="home"
       actions={<Actions />}
···
             <LooseleafList
               titles={props.titles}
               initialFacts={props.initialFacts}
-              cardBorderHidden={cardBorderHidden}
               searchValue={debouncedSearchValue}
             />
           ),
···
     [root_entity: string]: Fact<Attribute>[];
   };
   searchValue: string;
-  cardBorderHidden: boolean;
 }) => {
   let { identity } = useIdentityData();
   let { data: initialFacts } = useSWR(
···
       searchValue={props.searchValue}
       leaflets={leaflets}
       titles={initialFacts?.titles || {}}
-      cardBorderHidden={props.cardBorderHidden}
       initialFacts={initialFacts?.facts || {}}
       showPreview
     />

app/(home-pages)/notifications/page.tsx

···
   return (
     <DashboardLayout
       id="discover"
-      cardBorderHidden={true}
       currentPage="notifications"
       defaultTab="default"
       actions={null}

app/(home-pages)/p/[didOrHandle]/PostsContent.tsx

···
+"use client";
+
+import { PostListing } from "components/PostListing";
+import type { Post } from "app/(home-pages)/reader/getReaderFeed";
+import type { Cursor } from "./getProfilePosts";
+import { getProfilePosts } from "./getProfilePosts";
+import useSWRInfinite from "swr/infinite";
+import { useEffect, useRef } from "react";
+
+export const ProfilePostsContent = (props: {
+  did: string;
+  posts: Post[];
+  nextCursor: Cursor | null;
+}) => {
+  const getKey = (
+    pageIndex: number,
+    previousPageData: {
+      posts: Post[];
+      nextCursor: Cursor | null;
+    } | null,
+  ) => {
+    // Reached the end
+    if (previousPageData && !previousPageData.nextCursor) return null;
+
+    // First page, we don't have previousPageData
+    if (pageIndex === 0) return ["profile-posts", props.did, null] as const;
+
+    // Add the cursor to the key
+    return ["profile-posts", props.did, previousPageData?.nextCursor] as const;
+  };
+
+  const { data, size, setSize, isValidating } = useSWRInfinite(
+    getKey,
+    ([_, did, cursor]) => getProfilePosts(did, cursor),
+    {
+      fallbackData: [{ posts: props.posts, nextCursor: props.nextCursor }],
+      revalidateFirstPage: false,
+    },
+  );
+
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+
+  // Set up intersection observer to load more when trigger element is visible
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !isValidating) {
+          const hasMore = data && data[data.length - 1]?.nextCursor;
+          if (hasMore) {
+            setSize(size + 1);
+          }
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (loadMoreRef.current) {
+      observer.observe(loadMoreRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [data, size, setSize, isValidating]);
+
+  const allPosts = data ? data.flatMap((page) => page.posts) : [];
+
+  if (allPosts.length === 0 && !isValidating) {
+    return <div className="text-tertiary text-center py-4">No posts yet</div>;
+  }
+
+  return (
+    <div className="flex flex-col gap-3 text-left relative">
+      {allPosts.map((post) => (
+        <PostListing key={post.documents.uri} {...post} />
+      ))}
+      {/* Trigger element for loading more posts */}
+      <div
+        ref={loadMoreRef}
+        className="absolute bottom-96 left-0 w-full h-px pointer-events-none"
+        aria-hidden="true"
+      />
+      {isValidating && (
+        <div className="text-center text-tertiary py-4">
+          Loading more posts...
+        </div>
+      )}
+    </div>
+  );
+};

app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx

···
+"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 { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
+import { colorToString } from "components/ThemeManager/useColorAttribute";
+import { PubIcon } from "components/ActionBar/Publications";
+import { Json } from "supabase/database.types";
+import { BlueskyTiny } from "components/Icons/BlueskyTiny";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { SpeedyLink } from "components/SpeedyLink";
+import { ReactNode } from "react";
+import * as linkify from "linkifyjs";
+
+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 ${props.popover && "text-sm"}`}
+      id="profile-header"
+    >
+      <ProfileLinks handle={props.profile.handle || ""} />
+      <div className="flex flex-col">
+        <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 py-3 mb-3 ">
+          <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}
+                record={p.record as PubLeafletPublication.Record}
+                uri={p.uri}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ProfileLinks = (props: { handle: string }) => {
+  return (
+    <div className="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}`}
+      >
+        <BlueskyTiny />
+      </a>
+    </div>
+  );
+};
+const PublicationCard = (props: {
+  record: PubLeafletPublication.Record;
+  uri: string;
+}) => {
+  const { record, uri } = props;
+  const { bgLeaflet, bgPage, primary } = usePubTheme(record.theme);
+
+  return (
+    <a
+      href={`https://${record.base_path}`}
+      className="border border-border p-2 rounded-lg hover:no-underline! text-primary basis-1/2"
+      style={{ backgroundColor: `rgb(${colorToString(bgLeaflet, "rgb")})` }}
+    >
+      <div
+        className="rounded-md p-2 flex flex-row gap-2"
+        style={{
+          backgroundColor: record.theme?.showPageBackground
+            ? `rgb(${colorToString(bgPage, "rgb")})`
+            : undefined,
+        }}
+      >
+        <PubIcon record={record} uri={uri} />
+        <h4
+          className="truncate min-w-0"
+          style={{
+            color: `rgb(${colorToString(primary, "rgb")})`,
+          }}
+        >
+          {record.name}
+        </h4>
+      </div>
+    </a>
+  );
+};
+
+function parseDescription(description: string): ReactNode[] {
+  // Find all mentions using regex
+  const mentionRegex = /@\S+/g;
+  const mentions: { start: number; end: number; value: string }[] = [];
+  let mentionMatch;
+  while ((mentionMatch = mentionRegex.exec(description)) !== null) {
+    mentions.push({
+      start: mentionMatch.index,
+      end: mentionMatch.index + mentionMatch[0].length,
+      value: mentionMatch[0],
+    });
+  }
+
+  // Find all URLs using linkifyjs
+  const links = linkify.find(description).filter((link) => link.type === "url");
+
+  // Filter out URLs that overlap with mentions (mentions take priority)
+  const nonOverlappingLinks = links.filter((link) => {
+    return !mentions.some(
+      (mention) =>
+        (link.start >= mention.start && link.start < mention.end) ||
+        (link.end > mention.start && link.end <= mention.end) ||
+        (link.start <= mention.start && link.end >= mention.end),
+    );
+  });
+
+  // Combine into a single sorted list
+  const allMatches: Array<{
+    start: number;
+    end: number;
+    value: string;
+    href: string;
+    type: "url" | "mention";
+  }> = [
+    ...nonOverlappingLinks.map((link) => ({
+      start: link.start,
+      end: link.end,
+      value: link.value,
+      href: link.href,
+      type: "url" as const,
+    })),
+    ...mentions.map((mention) => ({
+      start: mention.start,
+      end: mention.end,
+      value: mention.value,
+      href: `/p/${mention.value.slice(1)}`,
+      type: "mention" as const,
+    })),
+  ].sort((a, b) => a.start - b.start);
+
+  const parts: ReactNode[] = [];
+  let lastIndex = 0;
+  let key = 0;
+
+  for (const match of allMatches) {
+    // Add text before this match
+    if (match.start > lastIndex) {
+      parts.push(description.slice(lastIndex, match.start));
+    }
+
+    if (match.type === "mention") {
+      parts.push(
+        <SpeedyLink key={key++} href={match.href}>
+          {match.value}
+        </SpeedyLink>,
+      );
+    } else {
+      // It's a URL
+      const urlWithoutProtocol = match.value
+        .replace(/^https?:\/\//, "")
+        .replace(/\/+$/, "");
+      const displayText =
+        urlWithoutProtocol.length > 50
+          ? urlWithoutProtocol.slice(0, 50) + "…"
+          : urlWithoutProtocol;
+      parts.push(
+        <a key={key++} href={match.href} target="_blank" rel="noopener noreferrer">
+          {displayText}
+        </a>,
+      );
+    }
+
+    lastIndex = match.end;
+  }
+
+  // Add remaining text after last match
+  if (lastIndex < description.length) {
+    parts.push(description.slice(lastIndex));
+  }
+
+  return parts;
+}

app/(home-pages)/p/[didOrHandle]/ProfileLayout.tsx

···
+"use client";
+
+import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
+
+export function ProfileLayout(props: { children: React.ReactNode }) {
+  let cardBorderHidden = useCardBorderHidden();
+  return (
+    <div
+      id="profile-content"
+      className={`
+          ${
+            cardBorderHidden
+              ? ""
+              : "overflow-y-scroll h-full border border-border-light rounded-lg  bg-bg-page"
+          }
+          max-w-prose mx-auto w-full
+          flex flex-col
+          text-center
+    `}
+    >
+      {props.children}
+    </div>
+  );
+}

app/(home-pages)/p/[didOrHandle]/ProfileTabs.tsx

···
+"use client";
+
+import { SpeedyLink } from "components/SpeedyLink";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { useState, useEffect } from "react";
+import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
+
+export type ProfileTabType = "posts" | "comments" | "subscriptions";
+
+export const ProfileTabs = (props: { didOrHandle: string }) => {
+  const cardBorderHidden = useCardBorderHidden();
+  const segment = useSelectedLayoutSegment();
+  const currentTab = (segment || "posts") as ProfileTabType;
+  const [scrollPosWithinTabContent, setScrollPosWithinTabContent] = useState(0);
+  const [headerHeight, setHeaderHeight] = useState(0);
+  useEffect(() => {
+    let headerHeight =
+      document.getElementById("profile-header")?.clientHeight || 0;
+    setHeaderHeight(headerHeight);
+
+    const profileContent = cardBorderHidden
+      ? document.getElementById("home-content")
+      : document.getElementById("profile-content");
+    const handleScroll = () => {
+      if (profileContent) {
+        setScrollPosWithinTabContent(
+          profileContent.scrollTop - headerHeight > 0
+            ? profileContent.scrollTop - headerHeight
+            : 0,
+        );
+      }
+    };
+
+    if (profileContent) {
+      profileContent.addEventListener("scroll", handleScroll);
+      return () => profileContent.removeEventListener("scroll", handleScroll);
+    }
+  }, []);
+
+  const baseUrl = `/p/${props.didOrHandle}`;
+  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
+        style={
+          scrollPosWithinTabContent < 20
+            ? {
+                paddingLeft: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
+                paddingRight: `calc(${scrollPosWithinTabContent / 20} * 12px )`,
+              }
+            : { paddingLeft: "12px", paddingRight: "12px" }
+        }
+      >
+        <div
+          className={`
+            border rounded-lg
+            ${scrollPosWithinTabContent > 20 ? "border-border-light" : "border-transparent"}
+            py-1
+            w-full `}
+          style={
+            scrollPosWithinTabContent < 20
+              ? {
+                  backgroundColor: !cardBorderHidden
+                    ? `rgba(${bgColor}, ${scrollPosWithinTabContent / 60 + 0.75})`
+                    : `rgba(${bgColor}, ${scrollPosWithinTabContent / 20})`,
+                  paddingLeft: !cardBorderHidden
+                    ? "4px"
+                    : `calc(${scrollPosWithinTabContent / 20} * 4px)`,
+                  paddingRight: !cardBorderHidden
+                    ? "4px"
+                    : `calc(${scrollPosWithinTabContent / 20} * 4px)`,
+                }
+              : {
+                  backgroundColor: `rgb(${bgColor})`,
+                  paddingLeft: "4px",
+                  paddingRight: "4px",
+                }
+          }
+        >
+          <div className="flex gap-2 justify-between">
+            <div className="flex gap-2">
+              <TabLink
+                href={baseUrl}
+                name="Posts"
+                selected={currentTab === "posts"}
+              />
+              <TabLink
+                href={`${baseUrl}/comments`}
+                name="Comments"
+                selected={currentTab === "comments"}
+              />
+            </div>
+            <TabLink
+              href={`${baseUrl}/subscriptions`}
+              name="Subscriptions"
+              selected={currentTab === "subscriptions"}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const TabLink = (props: { href: string; name: string; selected: boolean }) => {
+  return (
+    <SpeedyLink
+      href={props.href}
+      className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer hover:no-underline! ${
+        props.selected
+          ? "text-accent-2 bg-accent-1 font-bold -mb-px"
+          : "text-tertiary"
+      }`}
+    >
+      {props.name}
+    </SpeedyLink>
+  );
+};

app/(home-pages)/p/[didOrHandle]/comments/CommentsContent.tsx

···
+"use client";
+
+import { useEffect, useRef, useMemo } from "react";
+import useSWRInfinite from "swr/infinite";
+import { AppBskyActorProfile, AtUri } from "@atproto/api";
+import { PubLeafletComment, PubLeafletDocument } from "lexicons/api";
+import { ReplyTiny } from "components/Icons/ReplyTiny";
+import { Avatar } from "components/Avatar";
+import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
+import { blobRefToSrc } from "src/utils/blobRefToSrc";
+import {
+  getProfileComments,
+  type ProfileComment,
+  type Cursor,
+} from "./getProfileComments";
+import { timeAgo } from "src/utils/timeAgo";
+import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
+
+export const ProfileCommentsContent = (props: {
+  did: string;
+  comments: ProfileComment[];
+  nextCursor: Cursor | null;
+}) => {
+  const getKey = (
+    pageIndex: number,
+    previousPageData: {
+      comments: ProfileComment[];
+      nextCursor: Cursor | null;
+    } | null,
+  ) => {
+    // Reached the end
+    if (previousPageData && !previousPageData.nextCursor) return null;
+
+    // First page, we don't have previousPageData
+    if (pageIndex === 0) return ["profile-comments", props.did, null] as const;
+
+    // Add the cursor to the key
+    return [
+      "profile-comments",
+      props.did,
+      previousPageData?.nextCursor,
+    ] as const;
+  };
+
+  const { data, size, setSize, isValidating } = useSWRInfinite(
+    getKey,
+    ([_, did, cursor]) => getProfileComments(did, cursor),
+    {
+      fallbackData: [
+        { comments: props.comments, nextCursor: props.nextCursor },
+      ],
+      revalidateFirstPage: false,
+    },
+  );
+
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+
+  // Set up intersection observer to load more when trigger element is visible
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !isValidating) {
+          const hasMore = data && data[data.length - 1]?.nextCursor;
+          if (hasMore) {
+            setSize(size + 1);
+          }
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (loadMoreRef.current) {
+      observer.observe(loadMoreRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [data, size, setSize, isValidating]);
+
+  const allComments = data ? data.flatMap((page) => page.comments) : [];
+
+  if (allComments.length === 0 && !isValidating) {
+    return (
+      <div className="text-tertiary text-center py-4">No comments yet</div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2 text-left relative">
+      {allComments.map((comment) => (
+        <CommentItem key={comment.uri} comment={comment} />
+      ))}
+      {/* Trigger element for loading more comments */}
+      <div
+        ref={loadMoreRef}
+        className="absolute bottom-96 left-0 w-full h-px pointer-events-none"
+        aria-hidden="true"
+      />
+      {isValidating && (
+        <div className="text-center text-tertiary py-4">
+          Loading more comments...
+        </div>
+      )}
+    </div>
+  );
+};
+
+const CommentItem = ({ comment }: { comment: ProfileComment }) => {
+  const record = comment.record as PubLeafletComment.Record;
+  const profile = comment.bsky_profiles?.record as
+    | AppBskyActorProfile.Record
+    | undefined;
+  const displayName =
+    profile?.displayName || comment.bsky_profiles?.handle || "Unknown";
+
+  // Get commenter DID from comment URI
+  const commenterDid = new AtUri(comment.uri).host;
+
+  const isReply = !!record.reply;
+
+  // Get document title
+  const docData = comment.document?.data as
+    | PubLeafletDocument.Record
+    | undefined;
+  const postTitle = docData?.title || "Untitled";
+
+  // Get parent comment info for replies
+  const parentRecord = comment.parentComment?.record as
+    | PubLeafletComment.Record
+    | undefined;
+  const parentProfile = comment.parentComment?.bsky_profiles?.record as
+    | AppBskyActorProfile.Record
+    | undefined;
+  const parentDisplayName =
+    parentProfile?.displayName || comment.parentComment?.bsky_profiles?.handle;
+
+  // Build direct link to the comment
+  const commentLink = useMemo(() => {
+    if (!comment.document) return null;
+    const docUri = new AtUri(comment.document.uri);
+
+    // Get base URL using getPublicationURL if publication exists, otherwise build path
+    let baseUrl: string;
+    if (comment.publication) {
+      baseUrl = getPublicationURL(comment.publication);
+      const pubUri = new AtUri(comment.publication.uri);
+      // If getPublicationURL returns a relative path, append the document rkey
+      if (baseUrl.startsWith("/")) {
+        baseUrl = `${baseUrl}/${docUri.rkey}`;
+      } else {
+        // For custom domains, append the document rkey
+        baseUrl = `${baseUrl}/${docUri.rkey}`;
+      }
+    } else {
+      baseUrl = `/lish/${docUri.host}/-/${docUri.rkey}`;
+    }
+
+    // Build query parameters
+    const params = new URLSearchParams();
+    params.set("interactionDrawer", "comments");
+    if (record.onPage) {
+      params.set("page", record.onPage);
+    }
+
+    // Use comment URI as hash for direct reference
+    const commentId = encodeURIComponent(comment.uri);
+
+    return `${baseUrl}?${params.toString()}#${commentId}`;
+  }, [comment.document, comment.publication, comment.uri, record.onPage]);
+
+  // Get avatar source
+  const avatarSrc = profile?.avatar?.ref
+    ? blobRefToSrc(profile.avatar.ref, commenterDid)
+    : undefined;
+
+  return (
+    <div id={comment.uri} className="w-full flex flex-col text-left mb-8">
+      <div className="flex gap-2 w-full">
+        <Avatar src={avatarSrc} displayName={displayName} />
+        <div className="flex flex-col w-full min-w-0 grow">
+          <div className="flex flex-row gap-2">
+            <div className="text-tertiary text-sm truncate">
+              <span className="font-bold text-secondary">{displayName}</span>{" "}
+              {isReply ? "replied" : "commented"} on{" "}
+              {commentLink ? (
+                <a
+                  href={commentLink}
+                  className="italic text-accent-contrast hover:underline"
+                >
+                  {postTitle}
+                </a>
+              ) : (
+                <span className="italic text-accent-contrast">{postTitle}</span>
+              )}
+            </div>
+          </div>
+          {isReply && parentRecord && (
+            <div className="text-xs text-tertiary flex flex-row gap-2 w-full my-0.5 items-center">
+              <ReplyTiny className="shrink-0 scale-75" />
+              {parentDisplayName && (
+                <div className="font-bold shrink-0">{parentDisplayName}</div>
+              )}
+              <div className="grow truncate">{parentRecord.plaintext}</div>
+            </div>
+          )}
+          <pre
+            style={{ wordBreak: "break-word" }}
+            className="whitespace-pre-wrap text-secondary"
+          >
+            <BaseTextBlock
+              index={[]}
+              plaintext={record.plaintext}
+              facets={record.facets}
+            />
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+};

app/(home-pages)/p/[didOrHandle]/comments/getProfileComments.ts

···
+"use server";
+
+import { supabaseServerClient } from "supabase/serverClient";
+import { Json } from "supabase/database.types";
+import { PubLeafletComment } from "lexicons/api";
+
+export type Cursor = {
+  indexed_at: string;
+  uri: string;
+};
+
+export type ProfileComment = {
+  uri: string;
+  record: Json;
+  indexed_at: string;
+  bsky_profiles: { record: Json; handle: string | null } | null;
+  document: {
+    uri: string;
+    data: Json;
+  } | null;
+  publication: {
+    uri: string;
+    record: Json;
+  } | null;
+  // For replies, include the parent comment info
+  parentComment: {
+    uri: string;
+    record: Json;
+    bsky_profiles: { record: Json; handle: string | null } | null;
+  } | null;
+};
+
+export async function getProfileComments(
+  did: string,
+  cursor?: Cursor | null,
+): Promise<{ comments: ProfileComment[]; nextCursor: Cursor | null }> {
+  const limit = 20;
+
+  let query = supabaseServerClient
+    .from("comments_on_documents")
+    .select(
+      `*,
+      bsky_profiles(record, handle),
+      documents(uri, data, documents_in_publications(publications(*)))`,
+    )
+    .eq("profile", did)
+    .order("indexed_at", { ascending: false })
+    .order("uri", { ascending: false })
+    .limit(limit);
+
+  if (cursor) {
+    query = query.or(
+      `indexed_at.lt.${cursor.indexed_at},and(indexed_at.eq.${cursor.indexed_at},uri.lt.${cursor.uri})`,
+    );
+  }
+
+  const { data: rawComments } = await query;
+
+  if (!rawComments || rawComments.length === 0) {
+    return { comments: [], nextCursor: null };
+  }
+
+  // Collect parent comment URIs for replies
+  const parentUris = rawComments
+    .map((c) => (c.record as PubLeafletComment.Record).reply?.parent)
+    .filter((uri): uri is string => !!uri);
+
+  // Fetch parent comments if there are any replies
+  let parentCommentsMap = new Map<
+    string,
+    {
+      uri: string;
+      record: Json;
+      bsky_profiles: { record: Json; handle: string | null } | null;
+    }
+  >();
+
+  if (parentUris.length > 0) {
+    const { data: parentComments } = await supabaseServerClient
+      .from("comments_on_documents")
+      .select(`uri, record, bsky_profiles(record, handle)`)
+      .in("uri", parentUris);
+
+    if (parentComments) {
+      for (const pc of parentComments) {
+        parentCommentsMap.set(pc.uri, {
+          uri: pc.uri,
+          record: pc.record,
+          bsky_profiles: pc.bsky_profiles,
+        });
+      }
+    }
+  }
+
+  // Transform to ProfileComment format
+  const comments: ProfileComment[] = rawComments.map((comment) => {
+    const record = comment.record as PubLeafletComment.Record;
+    const doc = comment.documents;
+    const pub = doc?.documents_in_publications?.[0]?.publications;
+
+    return {
+      uri: comment.uri,
+      record: comment.record,
+      indexed_at: comment.indexed_at,
+      bsky_profiles: comment.bsky_profiles,
+      document: doc
+        ? {
+            uri: doc.uri,
+            data: doc.data,
+          }
+        : null,
+      publication: pub
+        ? {
+            uri: pub.uri,
+            record: pub.record,
+          }
+        : null,
+      parentComment: record.reply?.parent
+        ? parentCommentsMap.get(record.reply.parent) || null
+        : null,
+    };
+  });
+
+  const nextCursor =
+    comments.length === limit
+      ? {
+          indexed_at: comments[comments.length - 1].indexed_at,
+          uri: comments[comments.length - 1].uri,
+        }
+      : null;
+
+  return { comments, nextCursor };
+}

app/(home-pages)/p/[didOrHandle]/comments/page.tsx

···
+import { idResolver } from "app/(home-pages)/reader/idResolver";
+import { getProfileComments } from "./getProfileComments";
+import { ProfileCommentsContent } from "./CommentsContent";
+
+export default async function ProfileCommentsPage(props: {
+  params: Promise<{ didOrHandle: string }>;
+}) {
+  let params = await props.params;
+  let didOrHandle = decodeURIComponent(params.didOrHandle);
+
+  // Resolve handle to DID if necessary
+  let did = didOrHandle;
+  if (!didOrHandle.startsWith("did:")) {
+    let resolved = await idResolver.handle.resolve(didOrHandle);
+    if (!resolved) return null;
+    did = resolved;
+  }
+
+  const { comments, nextCursor } = await getProfileComments(did);
+
+  return (
+    <ProfileCommentsContent
+      did={did}
+      comments={comments}
+      nextCursor={nextCursor}
+    />
+  );
+}

app/(home-pages)/p/[didOrHandle]/getProfilePosts.ts

···
+"use server";
+
+import { supabaseServerClient } from "supabase/serverClient";
+import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
+import type { Post } from "app/(home-pages)/reader/getReaderFeed";
+
+export type Cursor = {
+  indexed_at: string;
+  uri: string;
+};
+
+export async function getProfilePosts(
+  did: string,
+  cursor?: Cursor | null,
+): Promise<{ posts: Post[]; nextCursor: Cursor | null }> {
+  const limit = 20;
+
+  let query = supabaseServerClient
+    .from("documents")
+    .select(
+      `*,
+      comments_on_documents(count),
+      document_mentions_in_bsky(count),
+      documents_in_publications(publications(*))`,
+    )
+    .like("uri", `at://${did}/%`)
+    .order("indexed_at", { ascending: false })
+    .order("uri", { ascending: false })
+    .limit(limit);
+
+  if (cursor) {
+    query = query.or(
+      `indexed_at.lt.${cursor.indexed_at},and(indexed_at.eq.${cursor.indexed_at},uri.lt.${cursor.uri})`,
+    );
+  }
+
+  let [{ data: docs }, { data: pubs }, { data: profile }] = await Promise.all([
+    query,
+    supabaseServerClient
+      .from("publications")
+      .select("*")
+      .eq("identity_did", did),
+    supabaseServerClient
+      .from("bsky_profiles")
+      .select("handle")
+      .eq("did", did)
+      .single(),
+  ]);
+
+  // Build a map of publications for quick lookup
+  let pubMap = new Map<string, NonNullable<typeof pubs>[number]>();
+  for (let pub of pubs || []) {
+    pubMap.set(pub.uri, pub);
+  }
+
+  // Transform data to Post[] format
+  let handle = profile?.handle ? `@${profile.handle}` : null;
+  let posts: Post[] = [];
+
+  for (let doc of docs || []) {
+    let pubFromDoc = doc.documents_in_publications?.[0]?.publications;
+    let pub = pubFromDoc ? pubMap.get(pubFromDoc.uri) || pubFromDoc : null;
+
+    let post: Post = {
+      author: handle,
+      documents: {
+        data: doc.data,
+        uri: doc.uri,
+        indexed_at: doc.indexed_at,
+        comments_on_documents: doc.comments_on_documents,
+        document_mentions_in_bsky: doc.document_mentions_in_bsky,
+      },
+    };
+
+    if (pub) {
+      post.publication = {
+        href: getPublicationURL(pub),
+        pubRecord: pub.record,
+        uri: pub.uri,
+      };
+    }
+
+    posts.push(post);
+  }
+
+  const nextCursor =
+    posts.length === limit
+      ? {
+          indexed_at: posts[posts.length - 1].documents.indexed_at,
+          uri: posts[posts.length - 1].documents.uri,
+        }
+      : null;
+
+  return { posts, nextCursor };
+}

app/(home-pages)/p/[didOrHandle]/layout.tsx

···
+import { idResolver } from "app/(home-pages)/reader/idResolver";
+import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
+import { supabaseServerClient } from "supabase/serverClient";
+import { Json } from "supabase/database.types";
+import { ProfileHeader } from "./ProfileHeader";
+import { ProfileTabs } from "./ProfileTabs";
+import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
+import { ProfileLayout } from "./ProfileLayout";
+import { Agent } from "@atproto/api";
+import { get_profile_data } from "app/api/rpc/[command]/get_profile_data";
+import { Metadata } from "next";
+
+export async function generateMetadata(props: {
+  params: Promise<{ didOrHandle: string }>;
+}): Promise<Metadata> {
+  let params = await props.params;
+  let didOrHandle = decodeURIComponent(params.didOrHandle);
+
+  let did = didOrHandle;
+  if (!didOrHandle.startsWith("did:")) {
+    let resolved = await idResolver.handle.resolve(didOrHandle);
+    if (!resolved) return { title: "Profile - Leaflet" };
+    did = resolved;
+  }
+
+  let profileData = await get_profile_data.handler(
+    { didOrHandle: did },
+    { supabase: supabaseServerClient },
+  );
+  let { profile } = profileData.result;
+
+  if (!profile) return { title: "Profile - Leaflet" };
+
+  const displayName = profile.displayName;
+  const handle = profile.handle;
+
+  const title = displayName
+    ? `${displayName} (@${handle}) - Leaflet`
+    : `@${handle} - Leaflet`;
+
+  return { title };
+}
+
+export default async function ProfilePageLayout(props: {
+  params: Promise<{ didOrHandle: string }>;
+  children: React.ReactNode;
+}) {
+  let params = await props.params;
+  let didOrHandle = decodeURIComponent(params.didOrHandle);
+
+  // Resolve handle to DID if necessary
+  let did = didOrHandle;
+
+  if (!didOrHandle.startsWith("did:")) {
+    let resolved = await idResolver.handle.resolve(didOrHandle);
+    if (!resolved) {
+      return (
+        <NotFoundLayout>
+          <p className="font-bold">Sorry, can&apos;t resolve handle!</p>
+          <p>
+            This may be a glitch on our end. If the issue persists please{" "}
+            <a href="mailto:[e-mail]">send us a note</a>.
+          </p>
+        </NotFoundLayout>
+      );
+    }
+    did = resolved;
+  }
+  let profileData = await get_profile_data.handler(
+    { didOrHandle: did },
+    { supabase: supabaseServerClient },
+  );
+  let { publications, profile } = profileData.result;
+
+  if (!profile) return null;
+
+  return (
+    <DashboardLayout
+      id="profile"
+      defaultTab="default"
+      currentPage="profile"
+      actions={null}
+      tabs={{
+        default: {
+          controls: null,
+          content: (
+            <ProfileLayout>
+              <ProfileHeader
+                profile={profile}
+                publications={publications || []}
+              />
+              <ProfileTabs didOrHandle={params.didOrHandle} />
+              <div className="h-full pt-3 pb-4 px-3 sm:px-4 flex flex-col">
+                {props.children}
+              </div>
+            </ProfileLayout>
+          ),
+        },
+      }}
+    />
+  );
+}
+
+export type ProfileData = {
+  did: string;
+  handle: string | null;
+  indexed_at: string;
+  record: Json;
+};

app/(home-pages)/p/[didOrHandle]/page.tsx

···
+import { idResolver } from "app/(home-pages)/reader/idResolver";
+import { getProfilePosts } from "./getProfilePosts";
+import { ProfilePostsContent } from "./PostsContent";
+
+export default async function ProfilePostsPage(props: {
+  params: Promise<{ didOrHandle: string }>;
+}) {
+  let params = await props.params;
+  let didOrHandle = decodeURIComponent(params.didOrHandle);
+
+  // Resolve handle to DID if necessary
+  let did = didOrHandle;
+  if (!didOrHandle.startsWith("did:")) {
+    let resolved = await idResolver.handle.resolve(didOrHandle);
+    if (!resolved) return null;
+    did = resolved;
+  }
+
+  const { posts, nextCursor } = await getProfilePosts(did);
+
+  return (
+    <ProfilePostsContent did={did} posts={posts} nextCursor={nextCursor} />
+  );
+}

app/(home-pages)/p/[didOrHandle]/subscriptions/SubscriptionsContent.tsx

···
+"use client";
+
+import { useEffect, useRef } from "react";
+import useSWRInfinite from "swr/infinite";
+import { PubListing } from "app/(home-pages)/discover/PubListing";
+import {
+  getSubscriptions,
+  type PublicationSubscription,
+} from "app/(home-pages)/reader/getSubscriptions";
+import { Cursor } from "app/(home-pages)/reader/getReaderFeed";
+
+export const ProfileSubscriptionsContent = (props: {
+  did: string;
+  subscriptions: PublicationSubscription[];
+  nextCursor: Cursor | null;
+}) => {
+  const getKey = (
+    pageIndex: number,
+    previousPageData: {
+      subscriptions: PublicationSubscription[];
+      nextCursor: Cursor | null;
+    } | null,
+  ) => {
+    // Reached the end
+    if (previousPageData && !previousPageData.nextCursor) return null;
+
+    // First page, we don't have previousPageData
+    if (pageIndex === 0)
+      return ["profile-subscriptions", props.did, null] as const;
+
+    // Add the cursor to the key
+    return [
+      "profile-subscriptions",
+      props.did,
+      previousPageData?.nextCursor,
+    ] as const;
+  };
+
+  const { data, size, setSize, isValidating } = useSWRInfinite(
+    getKey,
+    ([_, did, cursor]) => getSubscriptions(did, cursor),
+    {
+      fallbackData: [
+        { subscriptions: props.subscriptions, nextCursor: props.nextCursor },
+      ],
+      revalidateFirstPage: false,
+    },
+  );
+
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+
+  // Set up intersection observer to load more when trigger element is visible
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && !isValidating) {
+          const hasMore = data && data[data.length - 1]?.nextCursor;
+          if (hasMore) {
+            setSize(size + 1);
+          }
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    if (loadMoreRef.current) {
+      observer.observe(loadMoreRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [data, size, setSize, isValidating]);
+
+  const allSubscriptions = data
+    ? data.flatMap((page) => page.subscriptions)
+    : [];
+
+  if (allSubscriptions.length === 0 && !isValidating) {
+    return (
+      <div className="text-tertiary text-center py-4">No subscriptions yet</div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3">
+        {allSubscriptions.map((sub) => (
+          <PubListing key={sub.uri} {...sub} />
+        ))}
+      </div>
+      {/* Trigger element for loading more subscriptions */}
+      <div
+        ref={loadMoreRef}
+        className="absolute bottom-96 left-0 w-full h-px pointer-events-none"
+        aria-hidden="true"
+      />
+      {isValidating && (
+        <div className="text-center text-tertiary py-4">
+          Loading more subscriptions...
+        </div>
+      )}
+    </div>
+  );
+};

app/(home-pages)/p/[didOrHandle]/subscriptions/page.tsx

···
+import { idResolver } from "app/(home-pages)/reader/idResolver";
+import { getSubscriptions } from "app/(home-pages)/reader/getSubscriptions";
+import { ProfileSubscriptionsContent } from "./SubscriptionsContent";
+
+export default async function ProfileSubscriptionsPage(props: {
+  params: Promise<{ didOrHandle: string }>;
+}) {
+  const params = await props.params;
+  const didOrHandle = decodeURIComponent(params.didOrHandle);
+
+  // Resolve handle to DID if necessary
+  let did = didOrHandle;
+  if (!didOrHandle.startsWith("did:")) {
+    const resolved = await idResolver.handle.resolve(didOrHandle);
+    if (!resolved) return null;
+    did = resolved;
+  }
+
+  const { subscriptions, nextCursor } = await getSubscriptions(did);
+
+  return (
+    <ProfileSubscriptionsContent
+      did={did}
+      subscriptions={subscriptions}
+      nextCursor={nextCursor}
+    />
+  );
+}

app/(home-pages)/reader/SubscriptionsContent.tsx

···
 
   const { data, error, size, setSize, isValidating } = useSWRInfinite(
     getKey,
-    ([_, cursor]) => getSubscriptions(cursor),
+    ([_, cursor]) => getSubscriptions(null, cursor),
     {
       fallbackData: [
         { subscriptions: props.publications, nextCursor: props.nextCursor },

app/(home-pages)/reader/getReaderFeed.ts

···
 
 export type Post = {
   author: string | null;
-  publication: {
+  publication?: {
     href: string;
     pubRecord: Json;
     uri: string;

app/(home-pages)/reader/getSubscriptions.ts

···
 import { idResolver } from "./idResolver";
 import { Cursor } from "./getReaderFeed";
 
-export async function getSubscriptions(cursor?: Cursor | null): Promise<{
+export async function getSubscriptions(
+  did?: string | null,
+  cursor?: Cursor | null,
+): Promise<{
   nextCursor: null | Cursor;
   subscriptions: PublicationSubscription[];
 }> {
-  let auth_res = await getIdentityData();
-  if (!auth_res?.atp_did) return { subscriptions: [], nextCursor: null };
+  // If no DID provided, use logged-in user's DID
+  let identity = did;
+  if (!identity) {
+    const auth_res = await getIdentityData();
+    if (!auth_res?.atp_did) return { subscriptions: [], nextCursor: null };
+    identity = auth_res.atp_did;
+  }
+
   let query = supabaseServerClient
     .from("publication_subscriptions")
     .select(`*, publications(*, documents_in_publications(*, documents(*)))`)
···
     })
     .limit(1, { referencedTable: "publications.documents_in_publications" })
     .limit(25)
-    .eq("identity", auth_res.atp_did);
+    .eq("identity", identity);
 
   if (cursor) {
     query = query.or(

app/(home-pages)/reader/page.tsx

···
   return (
     <DashboardLayout
       id="reader"
-      cardBorderHidden={false}
       currentPage="reader"
       defaultTab="Read"
       actions={null}

app/(home-pages)/tag/[tag]/page.tsx

···
 import { PostListing } from "components/PostListing";
 import { getDocumentsByTag } from "./getDocumentsByTag";
 import { TagTiny } from "components/Icons/TagTiny";
+import { Metadata } from "next";
+
+export async function generateMetadata(props: {
+  params: Promise<{ tag: string }>;
+}): Promise<Metadata> {
+  const params = await props.params;
+  const decodedTag = decodeURIComponent(params.tag);
+  return { title: `${decodedTag} - Leaflet` };
+}
 
 export default async function TagPage(props: {
   params: Promise<{ tag: string }>;
···
   return (
     <DashboardLayout
       id="tag"
-      cardBorderHidden={false}
       currentPage="tag"
       defaultTab="default"
       actions={null}

app/api/rpc/[command]/get_profile_data.ts

···
+import { z } from "zod";
+import { makeRoute } from "../lib";
+import type { Env } from "./route";
+import { idResolver } from "app/(home-pages)/reader/idResolver";
+import { supabaseServerClient } from "supabase/serverClient";
+import { Agent } from "@atproto/api";
+import { getIdentityData } from "actions/getIdentityData";
+import { createOauthClient } from "src/atproto-oauth";
+
+export type GetProfileDataReturnType = Awaited<
+  ReturnType<(typeof get_profile_data)["handler"]>
+>;
+
+export const get_profile_data = makeRoute({
+  route: "get_profile_data",
+  input: z.object({
+    didOrHandle: z.string(),
+  }),
+  handler: async ({ didOrHandle }, { supabase }: Pick<Env, "supabase">) => {
+    // Resolve handle to DID if necessary
+    let did = didOrHandle;
+
+    if (!didOrHandle.startsWith("did:")) {
+      const resolved = await idResolver.handle.resolve(didOrHandle);
+      if (!resolved) {
+        throw new Error("Could not resolve handle to DID");
+      }
+      did = resolved;
+    }
+    let agent;
+    let authed_identity = await getIdentityData();
+    if (authed_identity?.atp_did) {
+      try {
+        const oauthClient = await createOauthClient();
+        let credentialSession = await oauthClient.restore(
+          authed_identity.atp_did,
+        );
+        agent = new Agent(credentialSession);
+      } catch (e) {
+        agent = new Agent({
+          service: "https://public.api.bsky.app",
+        });
+      }
+    } else {
+      agent = new Agent({
+        service: "https://public.api.bsky.app",
+      });
+    }
+
+    let profileReq = agent.app.bsky.actor.getProfile({ actor: did });
+
+    let publicationsReq = supabase
+      .from("publications")
+      .select("*")
+      .eq("identity_did", did);
+
+    let [{ data: profile }, { data: publications }] = await Promise.all([
+      profileReq,
+      publicationsReq,
+    ]);
+
+    return {
+      result: {
+        profile,
+        publications: publications || [],
+      },
+    };
+  },
+});

app/api/rpc/[command]/route.ts

···
 import { get_publication_data } from "./get_publication_data";
 import { search_publication_names } from "./search_publication_names";
 import { search_publication_documents } from "./search_publication_documents";
+import { get_profile_data } from "./get_profile_data";
 
 let supabase = createClient<Database>(
   process.env.NEXT_PUBLIC_SUPABASE_API_URL as string,
···
   get_publication_data,
   search_publication_names,
   search_publication_documents,
+  get_profile_data,
 ];
 export async function POST(
   req: Request,

app/globals.css

···
   @apply py-[1.5px];
 }
 
-/* Underline mention nodes when selected in ProseMirror */
+.ProseMirror:focus-within .selection-highlight {
+  background-color: transparent;
+}
+
 .ProseMirror .atMention.ProseMirror-selectednode,
 .ProseMirror .didMention.ProseMirror-selectednode {
-  text-decoration: underline;
+  @apply text-accent-contrast;
+  @apply px-0.5;
+  @apply -mx-[3px]; /* extra px to account for the border*/
+  @apply -my-px; /*to account for the border*/
+  @apply rounded-[4px];
+  @apply box-decoration-clone;
+  background-color: rgba(var(--accent-contrast), 0.2);
+  border: 1px solid rgba(var(--accent-contrast), 1);
 }
 
-.ProseMirror:focus-within .selection-highlight {
-  background-color: transparent;
+.mention {
+  @apply cursor-pointer;
+  @apply text-accent-contrast;
+  @apply px-0.5;
+  @apply -mx-[3px];
+  @apply -my-px; /*to account for the border*/
+  @apply rounded-[4px];
+  @apply box-decoration-clone;
+  background-color: rgba(var(--accent-contrast), 0.2);
+  border: 1px solid transparent;
 }
 
 .multiselected:focus-within .selection-highlight {

app/lish/[did]/[publication]/PublicationAuthor.tsx

···
+"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>
+  );
+};

app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx

···
 import { PubLeafletRichtextFacet } from "lexicons/api";
 import { didToBlueskyUrl } from "src/utils/mentionUtils";
 import { AtMentionLink } from "components/AtMentionLink";
+import { ProfilePopover } from "components/ProfilePopover";
 
 type Facet = PubLeafletRichtextFacet.Main;
 export function BaseTextBlock(props: {
···
     let isDidMention = segment.facet?.find(
       PubLeafletRichtextFacet.isDidMention,
     );
-    let isAtMention = segment.facet?.find(
-      PubLeafletRichtextFacet.isAtMention,
-    );
+    let isAtMention = segment.facet?.find(PubLeafletRichtextFacet.isAtMention);
     let isUnderline = segment.facet?.find(PubLeafletRichtextFacet.isUnderline);
     let isItalic = segment.facet?.find(PubLeafletRichtextFacet.isItalic);
     let isHighlighted = segment.facet?.find(
···
       ${isHighlighted ? "highlight bg-highlight-1" : ""}`.replaceAll("\n", " ");
 
     // Split text by newlines and insert <br> tags
-    const textParts = segment.text.split('\n');
+    const textParts = segment.text.split("\n");
     const renderedText = textParts.flatMap((part, i) =>
-      i < textParts.length - 1 ? [part, <br key={`br-${counter}-${i}`} />] : [part]
+      i < textParts.length - 1
+        ? [part, <br key={`br-${counter}-${i}`} />]
+        : [part],
     );
 
     if (isCode) {
···
       );
     } else if (isDidMention) {
       children.push(
-        <a
+        <ProfilePopover
           key={counter}
-          href={didToBlueskyUrl(isDidMention.did)}
-          className={`text-accent-contrast hover:underline cursor-pointer ${className}`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {renderedText}
-        </a>,
+          didOrHandle={isDidMention.did}
+          trigger={<span className="mention">{renderedText}</span>}
+        />,
       );
     } else if (isAtMention) {
       children.push(

app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx

···
     <PageWrapper
       pageType="canvas"
       fullPageScroll={fullPageScroll}
-      cardBorderHidden={!hasPageBackground}
       id={pageId ? `post-page-${pageId}` : "post-page"}
       drawerOpen={
         !!drawer && (pageId ? drawer.pageId === pageId : !drawer.pageId)

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx

···
-import { UnicodeString } from "@atproto/api";
+import { AtUri, UnicodeString } from "@atproto/api";
 import { autolink } from "components/Blocks/TextBlock/autolink-plugin";
 import { multiBlockSchema } from "components/Blocks/TextBlock/schema";
 import { PubLeafletRichtextFacet } from "lexicons/api";
···
         {
           record: comment.record,
           uri: comment.uri,
-          bsky_profiles: { record: comment.profile as Json },
+          bsky_profiles: {
+            record: comment.profile as Json,
+            did: new AtUri(comment.uri).host,
+          },
         },
       ],
     }));

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx

···
 import { QuoteContent } from "../Quotes";
 import { timeAgo } from "src/utils/timeAgo";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
+import { ProfilePopover } from "components/ProfilePopover";
 
 export type Comment = {
   record: Json;
   uri: string;
-  bsky_profiles: { record: Json } | null;
+  bsky_profiles: { record: Json; did: string } | null;
 };
 export function Comments(props: {
   document_uri: string;
···
   document: string;
   comment: Comment;
   comments: Comment[];
-  profile?: AppBskyActorProfile.Record;
+  profile: AppBskyActorProfile.Record;
   record: PubLeafletComment.Record;
   pageId?: string;
 }) => {
+  const did = props.comment.bsky_profiles?.did;
+
   return (
-    <div className="comment">
+    <div id={props.comment.uri} className="comment">
       <div className="flex gap-2">
-        {props.profile && (
-          <ProfilePopover profile={props.profile} comment={props.comment.uri} />
+        {did && (
+          <ProfilePopover
+            didOrHandle={did}
+            trigger={
+              <div className="text-sm text-tertiary font-bold hover:underline">
+                {props.profile.displayName}
+              </div>
+            }
+          />
         )}
-        <DatePopover date={props.record.createdAt} />
       </div>
       {props.record.attachment &&
         PubLeafletComment.isLinearDocumentQuote(props.record.attachment) && (
···
     </Popover>
   );
 };
-
-const ProfilePopover = (props: {
-  profile: AppBskyActorProfile.Record;
-  comment: string;
-}) => {
-  let commenterId = new AtUri(props.comment).host;
-
-  return (
-    <>
-      <a
-        className="font-bold  text-tertiary text-sm hover:underline"
-        href={`https://bsky.app/profile/${commenterId}`}
-      >
-        {props.profile.displayName}
-      </a>
-      {/*<Media mobile={false}>
-        <Popover
-          align="start"
-          trigger={
-            <div
-              onMouseOver={() => {
-                setHovering(true);
-                hoverTimeout.current = window.setTimeout(() => {
-                  setLoadProfile(true);
-                }, 500);
-              }}
-              onMouseOut={() => {
-                setHovering(false);
-                clearTimeout(hoverTimeout.current);
-              }}
-              className="font-bold  text-tertiary text-sm hover:underline"
-            >
-              {props.profile.displayName}
-            </div>
-          }
-          className="max-w-sm"
-        >
-          {profile && (
-            <>
-              <div className="profilePopover text-sm flex gap-2">
-                <div className="w-5 h-5 bg-test rounded-full shrink-0 mt-[2px]" />
-                <div className="flex flex-col">
-                  <div className="flex justify-between">
-                    <div className="profileHeader flex gap-2 items-center">
-                      <div className="font-bold">celine</div>
-                      <a className="text-tertiary" href="/">
-                        @{profile.handle}
-                      </a>
-                    </div>
-                  </div>
-
-                  <div className="profileBio text-secondary ">
-                    {profile.description}
-                  </div>
-                  <div className="flex flex-row gap-2 items-center pt-2 font-bold">
-                    {!profile.viewer?.following ? (
-                      <div className="text-tertiary bg-border-light rounded-md px-1 py-0">
-                        Following
-                      </div>
-                    ) : (
-                      <ButtonPrimary compact className="text-sm">
-                        Follow <BlueskyTiny />
-                      </ButtonPrimary>
-                    )}
-                    {profile.viewer?.followedBy && (
-                      <div className="text-tertiary">Follows You</div>
-                    )}
-                  </div>
-                </div>
-              </div>
-
-              <hr className="my-2 border-border-light" />
-              <div className="flex gap-2 leading-tight items-center text-tertiary text-sm">
-                <div className="flex flex-col w-6 justify-center">
-                  {profile.viewer?.knownFollowers?.followers.map((follower) => {
-                    return (
-                      <div
-                        className="w-[18px] h-[18px] bg-test rounded-full border-2 border-bg-page"
-                        key={follower.did}
-                      />
-                    );
-                  })}
-                  <div className="w-[18px] h-[18px] bg-test rounded-full -mt-2 border-2 border-bg-page" />
-                  <div className="w-[18px] h-[18px] bg-test rounded-full -mt-2 border-2 border-bg-page" />
-                </div>
-              </div>
-            </>
-          )}
-        </Popover>
-      </Media>*/}
-    </>
-  );
-};

app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer.tsx

···
 export const useDrawerOpen = (uri: string) => {
   let params = useSearchParams();
   let interactionDrawerSearchParam = params.get("interactionDrawer");
+  let pageParam = params.get("page");
   let { drawerOpen: open, drawer, pageId } = useInteractionState(uri);
   if (open === false || (open === undefined && !interactionDrawerSearchParam))
     return null;
   drawer =
     drawer || (interactionDrawerSearchParam as InteractionState["drawer"]);
-  return { drawer, pageId };
+  // Use pageId from state, or fall back to page search param
+  const resolvedPageId = pageId ?? pageParam ?? undefined;
+  return { drawer, pageId: resolvedPageId };
 };

app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx

···
       <PageWrapper
         pageType="doc"
         fullPageScroll={fullPageScroll}
-        cardBorderHidden={!hasPageBackground}
         id={pageId ? `post-page-${pageId}` : "post-page"}
         drawerOpen={
           !!drawer && (pageId ? drawer.pageId === pageId : !drawer.pageId)

app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx

···
 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;
···
         <>
           <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 ? (
               <>
···
         {props.postTitle ? props.postTitle : "Untitled"}
       </h2>
       {props.postDescription ? (
-        <p className="postDescription italic text-secondary outline-hidden bg-transparent pt-1">
+        <div className="postDescription italic text-secondary outline-hidden bg-transparent pt-1">
           {props.postDescription}
-        </p>
+        </div>
       ) : null}
       <div className="postInfo text-sm text-tertiary pt-3 flex gap-1 flex-wrap justify-between">
         {props.postInfo}

app/lish/[did]/[publication]/[rkey]/PostPages.tsx

···
         });
         return;
       }
-
       // Then check for quote param
       if (quote) {
         const decodedQuote = decodeQuotePosition(quote as string);
···
       // Mark as initialized even if no pageId found
       usePostPageUIState.setState({ initialized: true });
     }
-  }, [quote]);
+  }, [quote, pageParam]);
 };
 
 export const openPage = (
···
       absolute sm:-right-[20px] right-3 sm:top-3 top-0
       flex sm:flex-col flex-row-reverse gap-1 items-start`}
     >
-      <PageOptionButton
-        cardBorderHidden={!props.hasPageBackground}
-        onClick={props.onClick}
-      >
+      <PageOptionButton onClick={props.onClick}>
         <CloseTiny />
       </PageOptionButton>
     </div>

app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx

···
 
   return (
     <PageWrapper
-      cardBorderHidden={!!cardBorderHidden}
       pageType="doc"
       fullPageScroll={false}
       id={`post-page-${pageId}`}

app/lish/[did]/[publication]/dashboard/DraftList.tsx

···
         searchValue={props.searchValue}
         showPreview={false}
         defaultDisplay="list"
-        cardBorderHidden={!props.showPageBackground}
         leaflets={leaflets_in_publications
           .filter((l) => !l.documents)
           .filter((l) => !l.archived)

app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx

···
   return (
     <DashboardLayout
       id={publication.uri}
-      cardBorderHidden={!!record.theme?.showPageBackground}
       defaultTab="Drafts"
       tabs={{
         Drafts: {

app/lish/[did]/[publication]/page.tsx

···
 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 }>;
···
                 {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

app/p/[didOrHandle]/[rkey]/page.tsx

···
 import { Metadata } from "next";
 import { idResolver } from "app/(home-pages)/reader/idResolver";
 import { DocumentPageRenderer } from "app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer";
+import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
 
 export async function generateMetadata(props: {
   params: Promise<{ didOrHandle: string; rkey: string }>;
···
   let docRecord = document.data as PubLeafletDocument.Record;
 
   // For documents in publications, include publication name
-  let publicationName = document.documents_in_publications[0]?.publications?.name;
+  let publicationName =
+    document.documents_in_publications[0]?.publications?.name;
 
   return {
     icons: {
···
       let resolved = await idResolver.handle.resolve(didOrHandle);
       if (!resolved) {
         return (
-          <div className="p-4 text-lg text-center flex flex-col gap-4">
-            <p>Sorry, can&apos;t resolve handle.</p>
+          <NotFoundLayout>
+            <p className="font-bold">Sorry, we can't find this handle!</p>
             <p>
               This may be a glitch on our end. If the issue persists please{" "}
               <a href="mailto:[e-mail]">send us a note</a>.
             </p>
-          </div>
+          </NotFoundLayout>
         );
       }
       did = resolved;
     } catch (e) {
       return (
-        <div className="p-4 text-lg text-center flex flex-col gap-4">
-          <p>Sorry, can&apos;t resolve handle.</p>
+        <NotFoundLayout>
+          <p className="font-bold">Sorry, we can't find this leaflet!</p>
           <p>
             This may be a glitch on our end. If the issue persists please{" "}
             <a href="mailto:[e-mail]">send us a note</a>.
           </p>
-        </div>
+        </NotFoundLayout>
       );
     }
   }

components/ActionBar/Navigation.tsx

···
   | "discover"
   | "notifications"
   | "looseleafs"
-  | "tag";
+  | "tag"
+  | "profile";
 
 export const DesktopNavigation = (props: {
   currentPage: navPages;

components/ActionBar/Publications.tsx

···
 
   return props.record.icon ? (
     <div
-      className={`${iconSizeClassName} ${props.className} relative overflow-hidden`}
+      className={`${iconSizeClassName} ${props.className} relative overflow-hidden shrink-0`}
     >
       <img
         src={`/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(props.record.icon?.ref as unknown as { $link: string })["$link"]}`}

components/AtMentionLink.tsx

···
     isPublication || isDocument ? (
       <img
         src={`/api/pub_icon?at_uri=${encodeURIComponent(atURI)}`}
-        className="inline-block w-5 h-5 rounded-full mr-1 align-text-top"
+        className="inline-block w-4 h-4 rounded-full mr-1 mt-[3px] align-text-top"
         alt=""
         width="20"
         height="20"
···
       href={atUriToUrl(atURI)}
       target="_blank"
       rel="noopener noreferrer"
-      className={`text-accent-contrast hover:underline cursor-pointer ${isPublication ? "font-bold" : ""} ${isDocument ? "italic" : ""} ${className}`}
+      className={`mention ${isPublication ? "font-bold" : ""} ${isDocument ? "italic" : ""} ${className}`}
     >
       {icon}
       {children}

components/Avatar.tsx

···
 export const Avatar = (props: {
   src: string | undefined;
   displayName: string | undefined;
+  className?: string;
   tiny?: boolean;
+  large?: boolean;
+  giant?: boolean;
 }) => {
   if (props.src)
     return (
       <img
-        className={`${props.tiny ? "w-4 h-4" : "w-5 h-5"} rounded-full shrink-0 border border-border-light`}
+        className={`${props.tiny ? "w-4 h-4" : props.large ? "h-8 w-8" : props.giant ? "h-16 w-16" : "w-5 h-5"} rounded-full shrink-0 border border-border-light ${props.className}`}
         src={props.src}
         alt={
           props.displayName

components/Blocks/TextBlock/RenderYJSFragment.tsx

···
 import { didToBlueskyUrl } from "src/utils/mentionUtils";
 import { AtMentionLink } from "components/AtMentionLink";
 import { Delta } from "src/utils/yjsFragmentToString";
+import { ProfilePopover } from "components/ProfilePopover";
 
 type BlockElements = "h1" | "h2" | "h3" | null | "blockquote" | "p";
 export function RenderYJSFragment({
···
                   );
                 }
 
-                if (node.constructor === XmlElement && node.nodeName === "hard_break") {
+                if (
+                  node.constructor === XmlElement &&
+                  node.nodeName === "hard_break"
+                ) {
                   return <br key={index} />;
                 }
 
                 // Handle didMention inline nodes
-                if (node.constructor === XmlElement && node.nodeName === "didMention") {
+                if (
+                  node.constructor === XmlElement &&
+                  node.nodeName === "didMention"
+                ) {
                   const did = node.getAttribute("did") || "";
                   const text = node.getAttribute("text") || "";
                   return (
···
                       target="_blank"
                       rel="noopener noreferrer"
                       key={index}
-                      className="text-accent-contrast hover:underline cursor-pointer"
+                      className="mention"
                     >
                       {text}
                     </a>
···
                 }
 
                 // Handle atMention inline nodes
-                if (node.constructor === XmlElement && node.nodeName === "atMention") {
+                if (
+                  node.constructor === XmlElement &&
+                  node.nodeName === "atMention"
+                ) {
                   const atURI = node.getAttribute("atURI") || "";
                   const text = node.getAttribute("text") || "";
                   return (
···
 
   return props;
 }
-

components/Blocks/TextBlock/schema.ts

···
       toDOM(node) {
         // NOTE: This rendering should match the AtMentionLink component in
         // components/AtMentionLink.tsx. If you update one, update the other.
-        let className = "atMention text-accent-contrast";
+        let className = "atMention mention";
         let aturi = new AtUri(node.attrs.atURI);
         if (aturi.collection === "pub.leaflet.publication")
           className += " font-bold";
···
               "img",
               {
                 src: `/api/pub_icon?at_uri=${encodeURIComponent(node.attrs.atURI)}`,
-                class: "inline-block w-5 h-5 rounded-full mr-1 align-text-top",
+                class:
+                  "inline-block w-4 h-4 rounded-full mt-[3px] mr-1 align-text-top",
                 alt: "",
                 width: "16",
                 height: "16",
···
         return [
           "span",
           {
-            class: "didMention text-accent-contrast",
+            class: "didMention mention",
             "data-did": node.attrs.did,
           },
           node.attrs.text,

components/Icons/ReplyTiny.tsx

···
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         fillRule="evenodd"

components/PageHeader.tsx

···
 "use client";
 import { useState, useEffect } from "react";
+import { useCardBorderHidden } from "./Pages/useCardBorderHidden";
 
-export const Header = (props: {
-  children: React.ReactNode;
-  cardBorderHidden: boolean;
-}) => {
+export const Header = (props: { children: React.ReactNode }) => {
+  let cardBorderHidden = useCardBorderHidden();
   let [scrollPos, setScrollPos] = useState(0);
 
   useEffect(() => {
···
     }
   }, []);
 
-  let headerBGColor = props.cardBorderHidden
+  let headerBGColor = !cardBorderHidden
     ? "var(--bg-leaflet)"
     : "var(--bg-page)";
 
···
           style={
             scrollPos < 20
               ? {
-                  backgroundColor: props.cardBorderHidden
+                  backgroundColor: !cardBorderHidden
                     ? `rgba(${headerBGColor}, ${scrollPos / 60 + 0.75})`
                     : `rgba(${headerBGColor}, ${scrollPos / 20})`,
-                  paddingLeft: props.cardBorderHidden
+                  paddingLeft: !cardBorderHidden
                     ? "4px"
                     : `calc(${scrollPos / 20}*4px)`,
-                  paddingRight: props.cardBorderHidden
+                  paddingRight: !cardBorderHidden
                     ? "8px"
                     : `calc(${scrollPos / 20}*8px)`,
                 }

components/PageLayouts/DashboardLayout.tsx

···
 import Link from "next/link";
 import { ExternalLinkTiny } from "components/Icons/ExternalLinkTiny";
 import { usePreserveScroll } from "src/hooks/usePreserveScroll";
+import { Tab } from "components/Tab";
 
 export type DashboardState = {
   display?: "grid" | "list";
···
   },
 >(props: {
   id: string;
-  cardBorderHidden: boolean;
   tabs: T;
   defaultTab: keyof T;
   currentPage: navPages;
···
         >
           {Object.keys(props.tabs).length <= 1 && !controls ? null : (
             <>
-              <Header cardBorderHidden={props.cardBorderHidden}>
+              <Header>
                 {headerState === "default" ? (
                   <>
                     {Object.keys(props.tabs).length > 1 && (
···
   );
 };
 
-function Tab(props: {
-  name: string;
-  selected: boolean;
-  onSelect: () => void;
-  href?: string;
-}) {
-  return (
-    <div
-      className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${props.selected ? "text-accent-2 bg-accent-1 font-bold -mb-px" : "text-tertiary"}`}
-      onClick={() => props.onSelect()}
-    >
-      {props.name}
-      {props.href && <ExternalLinkTiny />}
-    </div>
-  );
-}
-
-const FilterOptions = (props: {
-  hasPubs: boolean;
-  hasArchived: boolean;
-}) => {
+const FilterOptions = (props: { hasPubs: boolean; hasArchived: boolean }) => {
   let { filter } = useDashboardState();
   let setState = useSetDashboardState();
   let filterCount = Object.values(filter).filter(Boolean).length;

components/Pages/Page.tsx

···
     return focusedPageID === props.entityID;
   });
   let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
-  let cardBorderHidden = useCardBorderHidden(props.entityID);
 
   let drawerOpen = useDrawerOpen(props.entityID);
   return (
···
         }}
         id={elementId.page(props.entityID).container}
         drawerOpen={!!drawerOpen}
-        cardBorderHidden={!!cardBorderHidden}
         isFocused={isFocused}
         fullPageScroll={props.fullPageScroll}
         pageType={pageType}
···
   id: string;
   children: React.ReactNode;
   pageOptions?: React.ReactNode;
-  cardBorderHidden: boolean;
   fullPageScroll: boolean;
   isFocused?: boolean;
   onClickAction?: (e: React.MouseEvent) => void;
   pageType: "canvas" | "doc";
   drawerOpen: boolean | undefined;
 }) => {
+  const cardBorderHidden = useCardBorderHidden();
   let { ref } = usePreserveScroll<HTMLDivElement>(props.id);
   return (
     // this div wraps the contents AND the page options.
···
       shrink-0 snap-center
       overflow-y-scroll
       ${
-        !props.cardBorderHidden &&
+        !cardBorderHidden &&
         `h-full border
           bg-[rgba(var(--bg-page),var(--bg-page-alpha))]
           ${props.drawerOpen ? "rounded-l-lg " : "rounded-lg"}
           ${props.isFocused ? "shadow-md border-border" : "border-border-light"}`
       }
-      ${props.cardBorderHidden && "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3"}
+      ${cardBorderHidden && "sm:h-[calc(100%+48px)] h-[calc(100%+20px)] sm:-my-6 -my-3 sm:pt-6 pt-3"}
       ${props.fullPageScroll && "max-w-full "}
     ${props.pageType === "doc" && !props.fullPageScroll && "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]"}
     ${

components/Pages/PageOptions.tsx

···
 export const PageOptionButton = ({
   children,
   secondary,
-  cardBorderHidden,
   className,
   disabled,
   ...props
 }: {
   children: React.ReactNode;
   secondary?: boolean;
-  cardBorderHidden: boolean | undefined;
   className?: string;
   disabled?: boolean;
 } & Omit<JSX.IntrinsicElements["button"], "content">) => {
+  const cardBorderHidden = useCardBorderHidden();
   return (
     <button
       className={`
···
   first: boolean | undefined;
   isFocused: boolean;
 }) => {
-  let cardBorderHidden = useCardBorderHidden(props.entityID);
-
   return (
     <div
       className={`pageOptions w-fit z-10
···
     >
       {!props.first && (
         <PageOptionButton
-          cardBorderHidden={cardBorderHidden}
           secondary
           onClick={() => {
             useUIState.getState().closePage(props.entityID);
···
           <CloseTiny />
         </PageOptionButton>
       )}
-      <OptionsMenu
-        entityID={props.entityID}
-        first={!!props.first}
-        cardBorderHidden={cardBorderHidden}
-      />
-      <UndoButtons cardBorderHidden={cardBorderHidden} />
+      <OptionsMenu entityID={props.entityID} first={!!props.first} />
+      <UndoButtons />
     </div>
   );
 };
 
-export const UndoButtons = (props: {
-  cardBorderHidden: boolean | undefined;
-}) => {
+export const UndoButtons = () => {
   let undoState = useUndoState();
   let { undoManager } = useReplicache();
   return (
     <Media mobile>
       {undoState.canUndo && (
         <div className="gap-1 flex sm:flex-col">
-          <PageOptionButton
-            secondary
-            cardBorderHidden={props.cardBorderHidden}
-            onClick={() => undoManager.undo()}
-          >
+          <PageOptionButton secondary onClick={() => undoManager.undo()}>
             <UndoTiny />
           </PageOptionButton>
 
           <PageOptionButton
             secondary
-            cardBorderHidden={props.cardBorderHidden}
             onClick={() => undoManager.undo()}
             disabled={!undoState.canRedo}
           >
···
   );
 };
 
-export const OptionsMenu = (props: {
-  entityID: string;
-  first: boolean;
-  cardBorderHidden: boolean | undefined;
-}) => {
+export const OptionsMenu = (props: { entityID: string; first: boolean }) => {
   let [state, setState] = useState<"normal" | "theme" | "share">("normal");
   let { permissions } = useEntitySetContext();
   if (!permissions.write) return null;
···
         if (!open) setState("normal");
       }}
       trigger={
-        <PageOptionButton
-          cardBorderHidden={props.cardBorderHidden}
-          className="!w-8 !h-5 sm:!w-5 sm:!h-8"
-        >
+        <PageOptionButton className="!w-8 !h-5 sm:!w-5 sm:!h-8">
           <MoreOptionsTiny className="sm:rotate-90" />
         </PageOptionButton>
       }

components/Pages/useCardBorderHidden.ts

···
-import { useLeafletPublicationData } from "components/PageSWRDataProvider";
-import { PubLeafletPublication } from "lexicons/api";
-import { useEntity, useReplicache } from "src/replicache";
+import { useCardBorderHiddenContext } from "components/ThemeManager/ThemeProvider";
 
-export function useCardBorderHidden(entityID: string | null) {
-  let { rootEntity } = useReplicache();
-  let { data: pub } = useLeafletPublicationData();
-  let rootCardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
-
-  let cardBorderHidden =
-    useEntity(entityID, "theme/card-border-hidden") || rootCardBorderHidden;
-  if (!cardBorderHidden && !rootCardBorderHidden) {
-    if (pub?.publications?.record) {
-      let record = pub.publications.record as PubLeafletPublication.Record;
-      return !record.theme?.showPageBackground;
-    }
-    return false;
-  }
-  return (cardBorderHidden || rootCardBorderHidden)?.data.value;
+export function useCardBorderHidden(entityID?: string | null) {
+  return useCardBorderHiddenContext();
 }

components/PostListing.tsx

···
 
 import Link from "next/link";
 import { InteractionPreview } from "./InteractionsPreview";
+import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 
 export const PostListing = (props: Post) => {
-  let pubRecord = props.publication.pubRecord as PubLeafletPublication.Record;
+  let pubRecord = props.publication?.pubRecord as
+    | PubLeafletPublication.Record
+    | undefined;
 
   let postRecord = props.documents.data as PubLeafletDocument.Record;
   let postUri = new AtUri(props.documents.uri);
 
-  let theme = usePubTheme(pubRecord.theme);
-  let backgroundImage = pubRecord?.theme?.backgroundImage?.image?.ref
-    ? blobRefToSrc(
-        pubRecord?.theme?.backgroundImage?.image?.ref,
-        new AtUri(props.publication.uri).host,
-      )
-    : null;
+  let theme = usePubTheme(pubRecord?.theme || postRecord?.theme);
+  let backgroundImage =
+    pubRecord?.theme?.backgroundImage?.image?.ref && props.publication
+      ? blobRefToSrc(
+          pubRecord.theme.backgroundImage.image.ref,
+          new AtUri(props.publication.uri).host,
+        )
+      : null;
 
   let backgroundImageRepeat = pubRecord?.theme?.backgroundImage?.repeat;
   let backgroundImageSize = pubRecord?.theme?.backgroundImage?.width || 500;
 
-  let showPageBackground = pubRecord.theme?.showPageBackground;
+  let showPageBackground = pubRecord?.theme?.showPageBackground;
 
   let quotes = props.documents.document_mentions_in_bsky?.[0]?.count || 0;
   let comments =
-    pubRecord.preferences?.showComments === false
+    pubRecord?.preferences?.showComments === false
       ? 0
       : props.documents.comments_on_documents?.[0]?.count || 0;
   let tags = (postRecord?.tags as string[] | undefined) || [];
 
+  // For standalone posts, link directly to the document
+  let postHref = props.publication
+    ? `${props.publication.href}/${postUri.rkey}`
+    : `/p/${postUri.host}/${postUri.rkey}`;
+
   return (
     <BaseThemeProvider {...theme} local>
       <div
         style={{
-          backgroundImage: `url(${backgroundImage})`,
+          backgroundImage: backgroundImage
+            ? `url(${backgroundImage})`
+            : undefined,
           backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
           backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
         }}
···
           hover:outline-accent-contrast hover:border-accent-contrast
           `}
       >
-        <Link
-          className="h-full w-full absolute top-0 left-0"
-          href={`${props.publication.href}/${postUri.rkey}`}
-        />
+        <Link className="h-full w-full absolute top-0 left-0" href={postHref} />
         <div
           className={`${showPageBackground ? "bg-bg-page " : "bg-transparent"}  rounded-md w-full  px-[10px] pt-2 pb-2`}
           style={{
···
 
           <p className="text-secondary italic">{postRecord.description}</p>
           <div className="flex flex-col-reverse md:flex-row md gap-2 text-sm text-tertiary items-center justify-start pt-1.5 md:pt-3 w-full">
-            <PubInfo
-              href={props.publication.href}
-              pubRecord={pubRecord}
-              uri={props.publication.uri}
-            />
+            {props.publication && pubRecord && (
+              <PubInfo
+                href={props.publication.href}
+                pubRecord={pubRecord}
+                uri={props.publication.uri}
+              />
+            )}
             <div className="flex flex-row justify-between gap-2 items-center w-full">
               <PostInfo publishedAt={postRecord.publishedAt} />
               <InteractionPreview
-                postUrl={`${props.publication.href}/${postUri.rkey}`}
+                postUrl={postHref}
                 quotesCount={quotes}
                 commentsCount={comments}
                 tags={tags}
-                showComments={pubRecord.preferences?.showComments}
+                showComments={pubRecord?.preferences?.showComments}
                 share
               />
             </div>
···
 };
 
 const PostInfo = (props: { publishedAt: string | undefined }) => {
+  let localizedDate = useLocalizedDate(props.publishedAt || "", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
   return (
     <div className="flex gap-2 items-center shrink-0 self-start">
       {props.publishedAt && (
         <>
-          <div className="shrink-0">
-            {new Date(props.publishedAt).toLocaleDateString("en-US", {
-              year: "numeric",
-              month: "short",
-              day: "numeric",
-            })}
-          </div>
+          <div className="shrink-0">{localizedDate}</div>
         </>
       )}
     </div>

components/ProfilePopover.tsx

···
+"use client";
+import { Popover } from "./Popover";
+import useSWR from "swr";
+import { callRPC } from "app/api/rpc/client";
+import { useRef, useState } from "react";
+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";
+
+export const ProfilePopover = (props: {
+  trigger: React.ReactNode;
+  didOrHandle: string;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  let [isHovered, setIsHovered] = useState(false);
+  const hoverTimeout = useRef<null | number>(null);
+
+  const { data, isLoading } = useSWR(
+    isHovered ? ["profile-data", props.didOrHandle] : null,
+    async () => {
+      const response = await callRPC("get_profile_data", {
+        didOrHandle: props.didOrHandle,
+      });
+      return response.result;
+    },
+  );
+
+  return (
+    <Tooltip
+      className="max-w-sm p-0! text-center"
+      asChild
+      trigger={
+        <a
+          className="no-underline"
+          href={`https://leaflet.pub/p/${props.didOrHandle}`}
+          target="_blank"
+          onPointerEnter={(e) => {
+            if (hoverTimeout.current) {
+              window.clearTimeout(hoverTimeout.current);
+            }
+            hoverTimeout.current = window.setTimeout(async () => {
+              setIsHovered(true);
+            }, 150);
+          }}
+          onPointerLeave={() => {
+            if (isHovered) return;
+            if (hoverTimeout.current) {
+              window.clearTimeout(hoverTimeout.current);
+              hoverTimeout.current = null;
+            }
+            setIsHovered(false);
+          }}
+        >
+          {props.trigger}
+        </a>
+      }
+      onOpenChange={setIsOpen}
+    >
+      {isLoading ? (
+        <div className="text-secondary p-4">Loading...</div>
+      ) : data ? (
+        <div>
+          <ProfileHeader
+            profile={data.profile}
+            publications={data.publications}
+            popover
+          />
+          <KnownFollowers viewer={data.profile.viewer} did={data.profile.did} />
+        </div>
+      ) : (
+        <div className="text-secondary py-2 px-4">Profile not found</div>
+      )}
+    </Tooltip>
+  );
+};
+
+let KnownFollowers = (props: {
+  viewer: ProfileViewDetailed["viewer"];
+  did: string;
+}) => {
+  if (!props.viewer?.knownFollowers) return null;
+  let count = props.viewer.knownFollowers.count;
+  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>
+    </>
+  );
+};

components/Tab.tsx

···
+import { ExternalLinkTiny } from "./Icons/ExternalLinkTiny";
+
+export const Tab = (props: {
+  name: string;
+  selected: boolean;
+  onSelect: () => void;
+  href?: string;
+}) => {
+  return (
+    <div
+      className={`pubTabs px-1 py-0 flex gap-1 items-center rounded-md hover:cursor-pointer ${props.selected ? "text-accent-2 bg-accent-1 font-bold -mb-px" : "text-tertiary"}`}
+      onClick={() => props.onSelect()}
+    >
+      {props.name}
+      {props.href && <ExternalLinkTiny />}
+    </div>
+  );
+};

components/ThemeManager/PublicationThemeProvider.tsx

···
 import { useEntity } from "src/replicache";
 import { getColorContrast } from "./themeUtils";
 import { useColorAttribute, colorToString } from "./useColorAttribute";
-import { BaseThemeProvider } from "./ThemeProvider";
+import { BaseThemeProvider, CardBorderHiddenContext } from "./ThemeProvider";
 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";
 import { usePublicationData } from "app/lish/[did]/[publication]/dashboard/PublicationSWRProvider";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
···
   isStandalone?: boolean;
 }) {
   let colors = usePubTheme(props.theme, props.isStandalone);
+  let cardBorderHidden = !colors.showPageBackground;
   return (
-    <BaseThemeProvider local={props.local} {...colors}>
-      {props.children}
-    </BaseThemeProvider>
+    <CardBorderHiddenContext.Provider value={cardBorderHidden}>
+      <BaseThemeProvider local={props.local} {...colors}>
+        {props.children}
+      </BaseThemeProvider>
+    </CardBorderHiddenContext.Provider>
   );
 }
 

components/ThemeManager/ThemeProvider.tsx

···
 "use client";
 
-import {
-  createContext,
-  CSSProperties,
-  useContext,
-  useEffect,
-} from "react";
+import { createContext, CSSProperties, useContext, useEffect } from "react";
+
+// Context for cardBorderHidden
+export const CardBorderHiddenContext = createContext<boolean>(false);
+
+export function useCardBorderHiddenContext() {
+  return useContext(CardBorderHiddenContext);
+}
 import {
   colorToString,
   useColorAttribute,
···
 }) {
   let bgLeaflet = useColorAttribute(props.entityID, "theme/page-background");
   let bgPage = useColorAttribute(props.entityID, "theme/card-background");
-  let showPageBackground = !useEntity(
+  let cardBorderHiddenValue = useEntity(
     props.entityID,
     "theme/card-border-hidden",
   )?.data.value;
+  let showPageBackground = !cardBorderHiddenValue;
   let primary = useColorAttribute(props.entityID, "theme/primary");
 
   let highlight1 = useEntity(props.entityID, "theme/highlight-1");
···
   let accent2 = useColorAttribute(props.entityID, "theme/accent-text");
 
   return (
-    <BaseThemeProvider
-      local={props.local}
-      bgLeaflet={bgLeaflet}
-      bgPage={bgPage}
-      primary={primary}
-      highlight2={highlight2}
-      highlight3={highlight3}
-      highlight1={highlight1?.data.value}
-      accent1={accent1}
-      accent2={accent2}
-      showPageBackground={showPageBackground}
-    >
-      {props.children}
-    </BaseThemeProvider>
+    <CardBorderHiddenContext.Provider value={!!cardBorderHiddenValue}>
+      <BaseThemeProvider
+        local={props.local}
+        bgLeaflet={bgLeaflet}
+        bgPage={bgPage}
+        primary={primary}
+        highlight2={highlight2}
+        highlight3={highlight3}
+        highlight1={highlight1?.data.value}
+        accent1={accent1}
+        accent2={accent2}
+        showPageBackground={showPageBackground}
+      >
+        {props.children}
+      </BaseThemeProvider>
+    </CardBorderHiddenContext.Provider>
   );
 }
 
···
     </div>
   );
 };
-

components/Tooltip.tsx

···
         props.skipDelayDuration ? props.skipDelayDuration : 300
       }
     >
-      <RadixTooltip.Root>
+      <RadixTooltip.Root onOpenChange={props.onOpenChange}>
         <RadixTooltip.Trigger disabled={props.disabled} asChild={props.asChild}>
           {props.trigger}
         </RadixTooltip.Trigger>

src/hooks/useLocalizedDate.ts

···
       ? timezone || "UTC"
       : Intl.DateTimeFormat().resolvedOptions().timeZone;
 
-    console.log("tz", effectiveTimezone);
-
     // Apply timezone if available
     if (effectiveTimezone) {
       dateTime = dateTime.setZone(effectiveTimezone);