From 002d86dc5491f87cdc0d3dbad3632adf4c1a04e9 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 12 Dec 2025 03:14:45 -0500
Subject: [PATCH] update to teh layout, wip comment deisgn

---
 app/p/[didOrHandle]/ProfilePageLayout.tsx     |  89 ++++++++-------
 .../ProfileTabs/Activity/Activity.tsx         |  14 ---
 .../ProfileTabs/Activity/Comment.tsx          |  12 ---
 .../ProfileTabs/Activity/Publication.tsx      |   0
 .../ProfileTabs/TabContent.tsx/Comment.tsx    | 101 ++++++++++++++++++
 .../{Activity => TabContent.tsx}/Post.tsx     |   0
 .../Subscription.tsx                          |   0
 app/p/[didOrHandle]/ProfileTabs/Tabs.tsx      |   5 +-
 8 files changed, 157 insertions(+), 64 deletions(-)
 delete mode 100644 app/p/[didOrHandle]/ProfileTabs/Activity/Activity.tsx
 delete mode 100644 app/p/[didOrHandle]/ProfileTabs/Activity/Comment.tsx
 delete mode 100644 app/p/[didOrHandle]/ProfileTabs/Activity/Publication.tsx
 create mode 100644 app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Comment.tsx
 rename app/p/[didOrHandle]/ProfileTabs/{Activity => TabContent.tsx}/Post.tsx (100%)
 rename app/p/[didOrHandle]/ProfileTabs/{Activity => TabContent.tsx}/Subscription.tsx (100%)

diff --git a/app/p/[didOrHandle]/ProfilePageLayout.tsx b/app/p/[didOrHandle]/ProfilePageLayout.tsx
index 4f940ad2..994f0aec 100644
--- a/app/p/[didOrHandle]/ProfilePageLayout.tsx
+++ b/app/p/[didOrHandle]/ProfilePageLayout.tsx
@@ -69,49 +69,66 @@ const ProfilePageContent = (props: {
 
   if (!props.profile) return;
   return (
-    <div
-      className={`
+    <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 px-3 sm:px-4 mt-8`}
-    >
-      <Avatar
-        src={
-          profileRecord.avatar?.ref &&
-          blobRefToSrc(profileRecord.avatar?.ref, props.profile.did)
-        }
-        displayName={profileRecord.displayName}
-        className="mx-auto -mt-8"
-        giant
-      />
-      <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}
+      >
+        <Avatar
+          src={
+            profileRecord.avatar?.ref &&
+            blobRefToSrc(profileRecord.avatar?.ref, props.profile.did)
+          }
+          displayName={profileRecord.displayName}
+          className="mx-auto -mt-8"
+          giant
+        />
+        <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 className="text-secondary">{profileRecord.description}</div>
-      <div className="flex flex-row gap-2 mx-auto my-3">
-        {props.publications.map((p) => (
-          <PublicationCard
-            key={p.uri}
-            record={p.record as PubLeafletPublication.Record}
-            uri={p.uri}
+        <ProfileTabs tab={tab} setTab={setTab} />
+
+        <div className="h-full overflow-y-scroll pt-2 flex flex-col">
+          <TabContent
+            tab={tab}
+            did={props.profile.did}
+            posts={props.posts}
+            nextCursor={props.nextCursor}
           />
-        ))}
+        </div>
+        <div className="text-secondary">{profileRecord.description}</div>
+        <div className="flex flex-row gap-2 mx-auto my-3">
+          {props.publications.map((p) => (
+            <PublicationCard
+              key={p.uri}
+              record={p.record as PubLeafletPublication.Record}
+              uri={p.uri}
+            />
+          ))}
+        </div>
+        <ProfileTabs tab={tab} setTab={setTab} />
+        <TabContent
+          tab={tab}
+          did={props.profile.did}
+          posts={props.posts}
+          nextCursor={props.nextCursor}
+        />
       </div>
-      <ProfileTabs tab={tab} setTab={setTab} />
-      <TabContent
-        tab={tab}
-        did={props.profile.did}
-        posts={props.posts}
-        nextCursor={props.nextCursor}
-      />
     </div>
   );
 };
diff --git a/app/p/[didOrHandle]/ProfileTabs/Activity/Activity.tsx b/app/p/[didOrHandle]/ProfileTabs/Activity/Activity.tsx
deleted file mode 100644
index 99f5fe30..00000000
--- a/app/p/[didOrHandle]/ProfileTabs/Activity/Activity.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export const Activity = (props: {
-  icon: React.ReactNode;
-  activity: React.ReactNode;
-  content: React.ReactNode;
-}) => {
-  return (
-    <div className="flex flex-col">
-      <div className="flex gap-2 items-center text-tertiary font-bold">
-        {props.icon} {props.activity}
-      </div>
-      <div>{props.content}</div>
-    </div>
-  );
-};
diff --git a/app/p/[didOrHandle]/ProfileTabs/Activity/Comment.tsx b/app/p/[didOrHandle]/ProfileTabs/Activity/Comment.tsx
deleted file mode 100644
index 0c4648d4..00000000
--- a/app/p/[didOrHandle]/ProfileTabs/Activity/Comment.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CommentTiny } from "components/Icons/CommentTiny";
-import { Activity } from "./Activity";
-
-export const CommentActivty = () => {
-  return (
-    <Activity
-      icon={<CommentTiny />}
-      activity={"celine commented"}
-      content={<div>hello</div>}
-    />
-  );
-};
diff --git a/app/p/[didOrHandle]/ProfileTabs/Activity/Publication.tsx b/app/p/[didOrHandle]/ProfileTabs/Activity/Publication.tsx
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Comment.tsx b/app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Comment.tsx
new file mode 100644
index 00000000..c6e485c7
--- /dev/null
+++ b/app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Comment.tsx
@@ -0,0 +1,101 @@
+import Post from "app/lish/[did]/[publication]/[rkey]/l-quote/[quote]/page";
+import { CommentTiny } from "components/Icons/CommentTiny";
+
+export const CommentTabContent = () => {
+  let isReply = true;
+  return (
+    <>
+      <CommentWrapper2 isReply />
+      <CommentWrapper2 />
+      <CommentWrapper2 />
+      <CommentWrapper2 isReply />
+    </>
+  );
+};
+
+const PostListingCompact = (props: { title: string; pubName: string }) => {
+  return (
+    <div className=" flex gap-2 justify-between border-b border-border-light   pt-2 pb-0.5 text-xs text-tertiary font-bold text-left">
+      {props.title}
+      <div className="flex gap-2 text-xs text-tertiary font-normal items-center">
+        {props.pubName}
+      </div>
+    </div>
+  );
+};
+
+const Comment = (props: {
+  displayName: React.ReactNode;
+  handle: string;
+  comment: string;
+  reply?: boolean;
+}) => {
+  return (
+    <div className={`w-full flex flex-col ${props.reply ? "text-xs" : ""}`}>
+      <div className="flex gap-2">
+        <div className="flex flex-col  min-h-full shrink-0 ">
+          <div className={`rounded-full  bg-test shrink-0 w-5 h-5`} />
+
+          {props.reply && (
+            <div className={`border-l border-border-light h-full mx-auto`} />
+          )}
+        </div>
+        <div className={`flex flex-col`}>
+          <div className="flex flex-row gap-2">
+            <div
+              className={` font-bold ${props.reply ? "text-tertiary" : "text-primary"}`}
+            >
+              {props.displayName}
+            </div>
+            {props.reply && <div>reply</div>}
+          </div>
+          <div
+            className={`w-full text-left ${props.reply ? "truncate text-tertiary" : "text-secondary"} `}
+          >
+            {props.comment}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const CommentWrapper1 = (props: { isReply?: boolean }) => {
+  return (
+    <div className="flex flex-col rounded-md  pb-8">
+      <PostListingCompact title="Post Title Here" pubName="Pub Name" />
+      {props.isReply && (
+        <Comment
+          displayName="jared"
+          handle="awarm.space"
+          comment="this is some content that i am would like a reply to. It's really really long"
+          reply
+        />
+      )}
+      <Comment
+        displayName="celine"
+        handle="cozylittle.house"
+        comment="Here's my reply! I'm hoping i can makie ti long enought to space two lines. Do we want rich text here? Probably not since we dont support that anyway lol"
+      />
+    </div>
+  );
+};
+
+const CommentWrapper2 = (props: { isReply?: boolean }) => {
+  return (
+    <div className="mb-8">
+      <Comment
+        displayName={
+          <div className="font-normal text-tertiary text-sm">
+            <span className="font-bold">celine </span>commented on{" "}
+            <span className=" italic text-accent-contrast">
+              Leaflet Lab Notes
+            </span>
+          </div>
+        }
+        handle="cozylittle.house"
+        comment="Here's my reply! I'm hoping i can makie ti long enought to space two lines. Do we want rich text here? Probably not since we dont support that anyway lol"
+      />
+    </div>
+  );
+};
diff --git a/app/p/[didOrHandle]/ProfileTabs/Activity/Post.tsx b/app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Post.tsx
similarity index 100%
rename from app/p/[didOrHandle]/ProfileTabs/Activity/Post.tsx
rename to app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Post.tsx
diff --git a/app/p/[didOrHandle]/ProfileTabs/Activity/Subscription.tsx b/app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Subscription.tsx
similarity index 100%
rename from app/p/[didOrHandle]/ProfileTabs/Activity/Subscription.tsx
rename to app/p/[didOrHandle]/ProfileTabs/TabContent.tsx/Subscription.tsx
diff --git a/app/p/[didOrHandle]/ProfileTabs/Tabs.tsx b/app/p/[didOrHandle]/ProfileTabs/Tabs.tsx
index c8d4b1e4..3eb8a9c3 100644
--- a/app/p/[didOrHandle]/ProfileTabs/Tabs.tsx
+++ b/app/p/[didOrHandle]/ProfileTabs/Tabs.tsx
@@ -6,6 +6,7 @@ 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;
@@ -38,7 +39,7 @@ export const ProfileTabs = (props: {
           }}
         />
       </div>
-      <hr className="border-border-light mb-2 mt-1" />
+      <hr className="border-border-light mt-1" />
     </div>
   );
 };
@@ -59,7 +60,7 @@ export const TabContent = (props: {
         />
       );
     case "comments":
-      return <div>comments here!</div>;
+      return <CommentTabContent />;
     case "subscriptions":
       return <div>subscriptions here!</div>;
   }
-- 
2.51.2