From 976985a28fc3ede26cea7d1f36d6dee25df3425e Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 11 Nov 2025 23:20:54 +0000
Subject: [PATCH] refactoring to add notification list in popover as well, added timestamp

---
 app/(home-pages)/notifications/CommentNotication.tsx | 12 +++---------
 app/(home-pages)/notifications/FollowNotification.tsx | 6 ++----
 app/(home-pages)/notifications/MentionNotification.tsx | 9 +++------
 app/(home-pages)/notifications/Notification.tsx | 39 ++++++++++++++++++++++++++++-----------
 app/(home-pages)/notifications/NotificationList.tsx | 22 +++-------------------
 app/(home-pages)/notifications/ReplyNotification.tsx | 12 +++---------
 6 file(s) changed, 42 insertion(s)(+), 58 deletion(s)(-)

diff --git a/app/(home-pages)/notifications/CommentNotication.tsx b/app/(home-pages)/notifications/CommentNotication.tsx
--- a/app/(home-pages)/notifications/CommentNotication.tsx
+++ b/app/(home-pages)/notifications/CommentNotication.tsx
@@ -16,9 +16,7 @@
 } from "./Notification";
 import { AtUri } from "@atproto/api";
 
-export const CommentNotification = (
-  props: { cardBorderHidden: boolean } & HydratedCommentNotification,
-) => {
+export const CommentNotification = (props: HydratedCommentNotification) => {
   let docRecord = props.commentData.documents
     ?.data as PubLeafletDocument.Record;
   let commentRecord = props.commentData.record as PubLeafletComment.Record;
@@ -34,16 +32,12 @@
 
   return (
     <Notification
+      timestamp=""
       href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`}
-      cardBorderHidden={props.cardBorderHidden}
       icon={<CommentTiny />}
       actionText={<>{displayName} commented on your post</>}
       content={
-        <ContentLayout
-          cardBorderHidden={props.cardBorderHidden}
-          postTitle={docRecord.title}
-          pubRecord={pubRecord}
-        >
+        <ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}>
           <CommentInNotification
             className=""
             avatar={
diff --git a/app/(home-pages)/notifications/FollowNotification.tsx b/app/(home-pages)/notifications/FollowNotification.tsx
--- a/app/(home-pages)/notifications/FollowNotification.tsx
+++ b/app/(home-pages)/notifications/FollowNotification.tsx
@@ -1,16 +1,14 @@
 import { Avatar } from "components/Avatar";
 import { Notification } from "./Notification";
 
-export const DummyFollowNotification = (props: {
-  cardBorderHidden: boolean;
-}) => {
+export const DummyFollowNotification = (props: {}) => {
   const identity = "celine";
   const pubName = "Pub Name Here";
   return (
     <Notification
+      timestamp={""}
       href="/"
       icon={<Avatar src={undefined} displayName={identity} tiny />}
-      cardBorderHidden={props.cardBorderHidden}
       actionText={
         <>
           {identity} followed {pubName}!
diff --git a/app/(home-pages)/notifications/MentionNotification.tsx b/app/(home-pages)/notifications/MentionNotification.tsx
--- a/app/(home-pages)/notifications/MentionNotification.tsx
+++ b/app/(home-pages)/notifications/MentionNotification.tsx
@@ -1,19 +1,16 @@
 import { MentionTiny } from "components/Icons/MentionTiny";
 import { ContentLayout, Notification } from "./Notification";
 
-export const DummyPostMentionNotification = (props: {
-  cardBorderHidden: boolean;
-}) => {
+export const DummyPostMentionNotification = (props: {}) => {
   return (
     <Notification
+      timestamp={""}
       href="/"
       icon={<MentionTiny />}
-      cardBorderHidden={props.cardBorderHidden}
       actionText={<>celine mentioned your post</>}
       content={
         <ContentLayout
           postTitle={"Post Title Here"}
-          cardBorderHidden={props.cardBorderHidden}
           pubRecord={{ name: "My Publication" } as any}
         >
           I'm just gonna put the description here. The surrounding context is
@@ -35,6 +32,7 @@
 }) => {
   return (
     <Notification
+      timestamp={""}
       href="/"
       icon={<MentionTiny />}
       actionText={<>celine mentioned you</>}
@@ -42,7 +40,6 @@
         <ContentLayout
           postTitle={"Post Title Here"}
           pubRecord={{ name: "My Publication" } as any}
-          cardBorderHidden={props.cardBorderHidden}
         >
           <div>
             ...llo this is the content of a post or whatever here it comes{" "}
diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx
--- a/app/(home-pages)/notifications/Notification.tsx
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -1,23 +1,30 @@
+"use client";
 import { Avatar } from "components/Avatar";
 import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
 import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api";
+import { timeAgo } from "src/utils/timeAgo";
+import { useReplicache, useEntity } from "src/replicache";
 
 export const Notification = (props: {
   icon: React.ReactNode;
   actionText: React.ReactNode;
   content?: React.ReactNode;
-  cardBorderHidden?: boolean;
+  timestamp: string;
   href: string;
 }) => {
+  let { rootEntity } = useReplicache();
+  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
+    .value;
+
   return (
     <div
-      className={`relative flex flex-col w-full  ${
-        props.cardBorderHidden
-          ? ""
-          : " block-border border-border! hover:outline-border sm:p-4 px-3 pl-2 sm:pl-3 pt-2 sm:pt-3!"
+      className={`relative flex flex-col w-full py-3 sm:py-4 pt-2 sm:pt-3! ${
+        cardBorderHidden
+          ? " first:pt-0! "
+          : " block-border border-border! hover:outline-border sm:px-4 px-3 pl-2 sm:pl-3 "
       }`}
       style={{
-        backgroundColor: props.cardBorderHidden
+        backgroundColor: cardBorderHidden
           ? "transparent"
           : "rgba(var(--bg-page), var(--bg-page-alpha))",
       }}
@@ -26,9 +33,16 @@
         href={props.href}
         className=" absolute top-0 bottom-0 left-0 right-0"
       />
-      <div className={`flex flex-row gap-2 items-center`}>
-        <div className="text-secondary shrink-0">{props.icon}</div>
-        <div className="text-secondary font-bold">{props.actionText}</div>
+      <div className="flex justify-between items-center gap-3 w-full ">
+        <div className={`flex flex-row gap-2 items-center grow w-full min-w-0`}>
+          <div className="text-secondary shrink-0">{props.icon}</div>
+          <div className="text-secondary font-bold grow truncate min-w-0">
+            {props.actionText}
+          </div>
+        </div>
+        <div className="text-sm text-tertiary shrink-0 min-w-8">
+          {timeAgo(props.timestamp)}
+        </div>
       </div>
       {props.content && (
         <div className="flex flex-row gap-2 mt-1 w-full">
@@ -44,11 +58,14 @@
   children: React.ReactNode;
   postTitle: string;
   pubRecord?: PubLeafletPublication.Record;
-  cardBorderHidden: boolean;
 }) => {
+  let { rootEntity } = useReplicache();
+  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
+    .value;
+
   return (
     <div
-      className={`border border-border-light rounded-md px-2 py-[6px] w-full ${props.cardBorderHidden ? "transparent" : "bg-bg-page"}`}
+      className={`border border-border-light rounded-md px-2 py-[6px] w-full ${cardBorderHidden ? "transparent" : "bg-bg-page"}`}
     >
       <div className="text-tertiary text-sm italic font-bold pb-1">
         {props.postTitle}
diff --git a/app/(home-pages)/notifications/NotificationList.tsx b/app/(home-pages)/notifications/NotificationList.tsx
--- a/app/(home-pages)/notifications/NotificationList.tsx
+++ b/app/(home-pages)/notifications/NotificationList.tsx
@@ -17,9 +17,6 @@
       markAsRead();
     }, 500);
   }, []);
-  let { rootEntity } = useReplicache();
-  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
-    .value;
 
   if (notifications.length === 0)
     return (
@@ -29,24 +26,11 @@
     );
   return (
     <div className="max-w-prose mx-auto w-full">
-      <div className={`flex flex-col ${cardBorderHidden ? "gap-6" : "gap-2"}`}>
+      <div className={`flex flex-col gap-2`}>
         {notifications.map((n) => {
           if (n.type === "comment") {
-            if (n.parentData)
-              return (
-                <ReplyNotification
-                  cardBorderHidden={!!cardBorderHidden}
-                  key={n.id}
-                  {...n}
-                />
-              );
-            return (
-              <CommentNotification
-                cardBorderHidden={!!cardBorderHidden}
-                key={n.id}
-                {...n}
-              />
-            );
+            if (n.parentData) return <ReplyNotification key={n.id} {...n} />;
+            return <CommentNotification key={n.id} {...n} />;
           }
         })}
       </div>
diff --git a/app/(home-pages)/notifications/ReplyNotification.tsx b/app/(home-pages)/notifications/ReplyNotification.tsx
--- a/app/(home-pages)/notifications/ReplyNotification.tsx
+++ b/app/(home-pages)/notifications/ReplyNotification.tsx
@@ -15,9 +15,7 @@
 import { AppBskyActorProfile, AtUri } from "@atproto/api";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
 
-export const ReplyNotification = (
-  props: { cardBorderHidden: boolean } & HydratedCommentNotification,
-) => {
+export const ReplyNotification = (props: HydratedCommentNotification) => {
   let docRecord = props.commentData.documents
     ?.data as PubLeafletDocument.Record;
   let commentRecord = props.commentData.record as PubLeafletComment.Record;
@@ -42,16 +40,12 @@
 
   return (
     <Notification
+      timestamp={commentRecord.createdAt}
       href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`}
       icon={<ReplyTiny />}
       actionText={`${displayName} replied to your comment`}
-      cardBorderHidden={props.cardBorderHidden}
       content={
-        <ContentLayout
-          cardBorderHidden={props.cardBorderHidden}
-          postTitle={docRecord.title}
-          pubRecord={pubRecord}
-        >
+        <ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}>
           <CommentInNotification
             className=""
             avatar={

--
tangled.sh