render profile sub things as pages

app/p/[didOrHandle]/(profile)/ProfileDashboardLayout.tsx

···
+"use client";
+
+import { Actions } from "app/(home-pages)/home/Actions/Actions";
+import { Footer } from "components/ActionBar/Footer";
+import { Sidebar } from "components/ActionBar/Sidebar";
+import {
+  DesktopNavigation,
+  MobileNavigation,
+} from "components/ActionBar/Navigation";
+import { MediaContents } from "components/Media";
+import { Separator } from "components/Layout";
+
+export function ProfileDashboardLayout(props: {
+  did: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={`dashboard pwa-padding relative max-w-(--breakpoint-lg) w-full h-full mx-auto flex sm:flex-row flex-col sm:items-stretch sm:px-6`}
+    >
+      <MediaContents mobile={false}>
+        <div className="flex flex-col gap-3 my-6">
+          <DesktopNavigation currentPage="home" />
+          <Sidebar alwaysOpen>
+            <Actions />
+          </Sidebar>
+        </div>
+      </MediaContents>
+      <div
+        className={`w-full h-full flex flex-col gap-2 relative overflow-y-scroll pt-3 pb-12 px-3 sm:pt-8 sm:pb-12 sm:pl-6 sm:pr-4`}
+        id="home-content"
+      >
+        {props.children}
+      </div>
+      <Footer>
+        <MobileNavigation currentPage="home" />
+        <Separator />
+        <Actions />
+      </Footer>
+    </div>
+  );
+}

app/p/[didOrHandle]/(profile)/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";
+
+export const ProfileHeader = (props: {
+  profile: ProfileData;
+  publications: { record: Json; uri: string }[];
+}) => {
+  let profileRecord = props.profile.record as AppBskyActorProfile.Record;
+
+  return (
+    <>
+      <Avatar
+        src={
+          profileRecord.avatar?.ref &&
+          blobRefToSrc(profileRecord.avatar?.ref, props.profile.did)
+        }
+        displayName={profileRecord.displayName}
+        className="mx-auto -mt-8"
+        giant
+      />
+      <div className="px-3 sm:px-4 flex flex-col">
+        <h3 className="pt-2 leading-tight">
+          {profileRecord.displayName
+            ? profileRecord.displayName
+            : `@${props.profile.handle}`}
+        </h3>
+        {profileRecord.displayName && (
+          <div className="text-tertiary text-sm pb-1 italic">
+            @{props.profile.handle}
+          </div>
+        )}
+        <div className="text-secondary">{profileRecord.description}</div>
+        <div className="flex flex-row gap-2 mx-auto my-3">
+          {props.publications.map((p) => (
+            <PublicationCard
+              record={p.record as PubLeafletPublication.Record}
+              uri={p.uri}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+const PublicationCard = (props: {
+  record: PubLeafletPublication.Record;
+  uri: string;
+}) => {
+  const { record, uri } = props;
+  const { bgLeaflet, bgPage } = usePubTheme(record.theme);
+
+  return (
+    <a
+      href={`https://${record.base_path}`}
+      className="border border-border p-2 rounded-lg hover:no-underline!"
+      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>{record.name}</h4>
+      </div>
+    </a>
+  );
+};

app/p/[didOrHandle]/(profile)/ProfileTabs.tsx

···
+"use client";
+
+import { SpeedyLink } from "components/SpeedyLink";
+import { useSelectedLayoutSegment } from "next/navigation";
+
+export type ProfileTabType = "posts" | "comments" | "subscriptions";
+
+export const ProfileTabs = (props: { didOrHandle: string }) => {
+  const segment = useSelectedLayoutSegment();
+  const currentTab = (segment || "posts") as ProfileTabType;
+
+  const baseUrl = `/p/${props.didOrHandle}`;
+
+  return (
+    <div className="flex flex-col w-full px-3 sm:px-4">
+      <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>
+      <hr className="border-border-light mt-1" />
+    </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 ${
+        props.selected
+          ? "text-accent-2 bg-accent-1 font-bold -mb-px"
+          : "text-tertiary"
+      }`}
+    >
+      {props.name}
+    </SpeedyLink>
+  );
+};

app/p/[didOrHandle]/(profile)/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 { ProfileDashboardLayout } from "./ProfileDashboardLayout";
+
+export default async function ProfileLayout(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 { data: profile } = await supabaseServerClient
+    .from("bsky_profiles")
+    .select(`*`)
+    .eq("did", did)
+    .single();
+  let { data: publications } = await supabaseServerClient
+    .from("publications")
+    .select("*")
+    .eq("identity_did", did);
+
+  if (!profile) return null;
+
+  return (
+    <ProfileDashboardLayout did={did}>
+      <div className="h-full">
+        <div
+          className={`
+          max-w-prose mx-auto w-full h-full
+          flex flex-col
+          border border-border-light rounded-lg
+          text-center mt-8`}
+        >
+          <ProfileHeader profile={profile} publications={publications || []} />
+          <ProfileTabs didOrHandle={params.didOrHandle} />
+          <div className="h-full overflow-y-scroll pt-3 pb-4 px-3 sm:px-4 flex flex-col">
+            {props.children}
+          </div>
+        </div>
+      </div>
+    </ProfileDashboardLayout>
+  );
+}
+
+export type ProfileData = {
+  did: string;
+  handle: string | null;
+  indexed_at: string;
+  record: Json;
+};

app/p/[didOrHandle]/(profile)/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/p/[didOrHandle]/(profile)/subscriptions/page.tsx

···
+export default function ProfileSubscriptionsPage() {
+  return <div>subscriptions here!</div>;
+}

app/p/[didOrHandle]/ProfilePageLayout.tsx

···
-"use client";
-import { Actions } from "app/(home-pages)/home/Actions/Actions";
-import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
-import { useState } from "react";
-import { ProfileTabs, TabContent } from "./ProfileTabs/Tabs";
-import { Json } from "supabase/database.types";
-import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
-import { Avatar } from "components/Avatar";
-import { AppBskyActorProfile, PubLeafletPublication } from "lexicons/api";
-import { blobRefToSrc } from "src/utils/blobRefToSrc";
-import { PubIcon } from "components/ActionBar/Publications";
-import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
-import { colorToString } from "components/ThemeManager/useColorAttribute";
-import type { Post } from "app/(home-pages)/reader/getReaderFeed";
-import type { Cursor } from "./getProfilePosts";
-
-export const ProfilePageLayout = (props: {
-  publications: { record: Json; uri: string }[];
-  posts: Post[];
-  nextCursor: Cursor | null;
-  profile: {
-    did: string;
-    handle: string | null;
-    indexed_at: string;
-    record: Json;
-  } | null;
-}) => {
-  if (!props.profile) return null;
-
-  return (
-    <DashboardLayout
-      id={props.profile.did}
-      cardBorderHidden={false}
-      defaultTab="home"
-      tabs={{
-        home: {
-          content: (
-            <ProfilePageContent
-              profile={props.profile}
-              publications={props.publications}
-              posts={props.posts}
-              nextCursor={props.nextCursor}
-            />
-          ),
-          controls: null,
-        },
-      }}
-      actions={<Actions />}
-      currentPage="home"
-    />
-  );
-};
-
-export type profileTabsType = "posts" | "comments" | "subscriptions";
-const ProfilePageContent = (props: {
-  publications: { record: Json; uri: string }[];
-  posts: Post[];
-  nextCursor: Cursor | null;
-  profile: {
-    did: string;
-    handle: string | null;
-    indexed_at: string;
-    record: Json;
-  } | null;
-}) => {
-  let [tab, setTab] = useState<profileTabsType>("posts");
-
-  let profileRecord = props.profile?.record as AppBskyActorProfile.Record;
-
-  if (!props.profile) return;
-  return (
-    <div className="h-full">
-      <div
-        className={`
-        max-w-prose mx-auto w-full h-full
-        flex flex-col
-        border border-border-light rounded-lg
-        text-center mt-8`}
-      >
-        <Avatar
-          src={
-            profileRecord.avatar?.ref &&
-            blobRefToSrc(profileRecord.avatar?.ref, props.profile.did)
-          }
-          displayName={profileRecord.displayName}
-          className="mx-auto -mt-8"
-          giant
-        />
-        <div className=" px-3 sm:px-4 flex flex-col ">
-          <h3 className="pt-2 leading-tight">
-            {profileRecord.displayName
-              ? profileRecord.displayName
-              : `@${props.profile?.handle}`}
-          </h3>
-          {profileRecord.displayName && (
-            <div className="text-tertiary text-sm pb-1 italic">
-              @{props.profile?.handle}
-            </div>
-          )}
-          <div className="text-secondary">{profileRecord.description}</div>
-          <div className="flex flex-row gap-2 mx-auto my-3">
-            <div>pub 1</div>
-            <div>pub 2</div>
-          </div>
-        </div>
-        <ProfileTabs tab={tab} setTab={setTab} />
-
-        <div className="h-full overflow-y-scroll pt-3 pb-4 px-3 sm:px-4 flex flex-col">
-          <TabContent
-            tab={tab}
-            did={props.profile.did}
-            posts={props.posts}
-            nextCursor={props.nextCursor}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const PubListingCompact = () => {
-  return <div></div>;
-};
-
-const PublicationCard = (props: {
-  record: PubLeafletPublication.Record;
-  uri: string;
-}) => {
-  const { record, uri } = props;
-  const { bgLeaflet, bgPage } = usePubTheme(record.theme);
-
-  return (
-    <a
-      href={`https://${record.base_path}`}
-      className="border border-border p-2 rounded-lg hover:no-underline!"
-      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>{record.name}</h4>
-      </div>
-    </a>
-  );
-};

app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Comment.tsx app/p/[didOrHandle]/(profile)/comments/page.tsx

···
-import Post from "app/lish/[did]/[publication]/[rkey]/l-quote/[quote]/page";
-import { CommentTiny } from "components/Icons/CommentTiny";
 import { ReplyTiny } from "components/Icons/ReplyTiny";
 
-export const CommentTabContent = () => {
+export default function ProfileCommentsPage() {
+  return <CommentsContent />;
+}
+
+const CommentsContent = () => {
   let isReply = true;
   return (
     <>

app/p/[didOrHandle]/ProfileTabs/Tabs.tsx app/p/[didOrHandle]/(profile)/PostsContent.tsx

···
-import { Tab } from "components/Tab";
-import { profileTabsType } from "../ProfilePageLayout";
+"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";
-import { CommentTabContent } from "./TabContent.tsx/Comment";
 
-export const ProfileTabs = (props: {
-  tab: profileTabsType;
-  setTab: (t: profileTabsType) => void;
-}) => {
-  return (
-    <div className="flex flex-col w-full  px-3 sm:px-4 ">
-      <div className="flex gap-2 justify-between">
-        <div className="flex gap-2">
-          <Tab
-            name="Posts"
-            selected={props.tab === "posts"}
-            onSelect={() => {
-              props.setTab("posts");
-            }}
-          />
-          <Tab
-            name="Comments"
-            selected={props.tab === "comments"}
-            onSelect={() => {
-              props.setTab("comments");
-            }}
-          />
-        </div>
-        <Tab
-          name="Subscriptions"
-          selected={props.tab === "subscriptions"}
-          onSelect={() => {
-            props.setTab("subscriptions");
-          }}
-        />
-      </div>
-      <hr className="border-border-light mt-1" />
-    </div>
-  );
-};
-
-export const TabContent = (props: {
-  tab: profileTabsType;
-  did: string;
-  posts: Post[];
-  nextCursor: Cursor | null;
-}) => {
-  switch (props.tab) {
-    case "posts":
-      return (
-        <ProfilePostsContent
-          did={props.did}
-          posts={props.posts}
-          nextCursor={props.nextCursor}
-        />
-      );
-    case "comments":
-      return <CommentTabContent />;
-    case "subscriptions":
-      return <div>subscriptions here!</div>;
-  }
-};
-
-const ProfilePostsContent = (props: {
+export const ProfilePostsContent = (props: {
   did: string;
   posts: Post[];
   nextCursor: Cursor | null;

app/p/[didOrHandle]/page.tsx

···
-import { idResolver } from "app/(home-pages)/reader/idResolver";
-import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout";
-import { ProfilePageLayout } from "./ProfilePageLayout";
-import { supabaseServerClient } from "supabase/serverClient";
-import { getProfilePosts } from "./getProfilePosts";
-
-export default async function ProfilePage(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 (
-        <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;
-  }
-
-  // Fetch profile, publications, and initial posts in parallel
-  let [{ data: profile }, { data: pubs }, { posts, nextCursor }] =
-    await Promise.all([
-      supabaseServerClient
-        .from("bsky_profiles")
-        .select(`*`)
-        .eq("did", did)
-        .single(),
-      supabaseServerClient
-        .from("publications")
-        .select("*")
-        .eq("identity_did", did),
-      getProfilePosts(did),
-    ]);
-
-  return (
-    <ProfilePageLayout
-      profile={profile}
-      publications={pubs || []}
-      posts={posts}
-      nextCursor={nextCursor}
-    />
-  );
-}