From a2d25953268cf6c41b04d9c20d5cd7f514d11cd8 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 11 Nov 2025 18:30:51 -0500
Subject: [PATCH] add compact rendering for notification list - mostly credit
 to jared

---
 .../notifications/CommentNotication.tsx       |  2 +-
 .../notifications/Notification.tsx            | 16 ++++++++++--
 .../notifications/NotificationList.tsx        | 26 ++++++++++++-------
 .../notifications/ReplyNotification.tsx       |  2 +-
 components/ActionBar/Navigation.tsx           |  2 +-
 5 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/app/(home-pages)/notifications/CommentNotication.tsx b/app/(home-pages)/notifications/CommentNotication.tsx
index c24c668a..f8a68def 100644
--- a/app/(home-pages)/notifications/CommentNotication.tsx
+++ b/app/(home-pages)/notifications/CommentNotication.tsx
@@ -32,7 +32,7 @@ export const CommentNotification = (props: HydratedCommentNotification) => {
 
   return (
     <Notification
-      timestamp=""
+      timestamp={props.commentData.indexed_at}
       href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`}
       icon={<CommentTiny />}
       actionText={<>{displayName} commented on your post</>}
diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx
index 2a15c5ff..933ee231 100644
--- a/app/(home-pages)/notifications/Notification.tsx
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -4,6 +4,8 @@ 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";
+import { useContext } from "react";
+import { NotificationContext } from "./NotificationList";
 
 export const Notification = (props: {
   icon: React.ReactNode;
@@ -13,9 +15,15 @@ export const Notification = (props: {
   href: string;
 }) => {
   let { rootEntity } = useReplicache();
+  let { compact } = useContext(NotificationContext);
   let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
     .value;
 
+  // If compact mode, always hide border
+  if (compact) {
+    cardBorderHidden = true;
+  }
+
   return (
     <div
       className={`relative flex flex-col w-full py-3 sm:py-4 pt-2 sm:pt-3! ${
@@ -36,11 +44,15 @@ export const Notification = (props: {
       <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">
+          <div
+            className={`text-secondary font-bold grow truncate min-w-0 ${compact ? "text-sm" : ""}`}
+          >
             {props.actionText}
           </div>
         </div>
-        <div className="text-sm text-tertiary shrink-0 min-w-8">
+        <div
+          className={`text-tertiary shrink-0 min-w-8 ${compact ? "text-xs" : "text-sm"}`}
+        >
           {timeAgo(props.timestamp)}
         </div>
       </div>
diff --git a/app/(home-pages)/notifications/NotificationList.tsx b/app/(home-pages)/notifications/NotificationList.tsx
index bd1f5ae0..e7a1bed4 100644
--- a/app/(home-pages)/notifications/NotificationList.tsx
+++ b/app/(home-pages)/notifications/NotificationList.tsx
@@ -3,14 +3,18 @@
 import { HydratedNotification } from "src/notifications";
 import { CommentNotification } from "./CommentNotication";
 import { useEntity, useReplicache } from "src/replicache";
-import { useEffect } from "react";
+import { useEffect, createContext } from "react";
 import { markAsRead } from "./getNotifications";
 import { ReplyNotification } from "./ReplyNotification";
 
+export const NotificationContext = createContext({ compact: false });
+
 export function NotificationList({
   notifications,
+  compact,
 }: {
   notifications: HydratedNotification[];
+  compact?: boolean;
 }) {
   useEffect(() => {
     setTimeout(() => {
@@ -25,15 +29,17 @@ export function NotificationList({
       </div>
     );
   return (
-    <div className="max-w-prose mx-auto w-full">
-      <div className={`flex flex-col gap-2`}>
-        {notifications.map((n) => {
-          if (n.type === "comment") {
-            if (n.parentData) return <ReplyNotification key={n.id} {...n} />;
-            return <CommentNotification key={n.id} {...n} />;
-          }
-        })}
+    <NotificationContext.Provider value={{ compact: compact ?? false }}>
+      <div className="max-w-prose mx-auto w-full">
+        <div className={`flex flex-col gap-2`}>
+          {notifications.map((n) => {
+            if (n.type === "comment") {
+              if (n.parentData) return <ReplyNotification key={n.id} {...n} />;
+              return <CommentNotification key={n.id} {...n} />;
+            }
+          })}
+        </div>
       </div>
-    </div>
+    </NotificationContext.Provider>
   );
 }
diff --git a/app/(home-pages)/notifications/ReplyNotification.tsx b/app/(home-pages)/notifications/ReplyNotification.tsx
index 03d02065..10aa4703 100644
--- a/app/(home-pages)/notifications/ReplyNotification.tsx
+++ b/app/(home-pages)/notifications/ReplyNotification.tsx
@@ -40,7 +40,7 @@ export const ReplyNotification = (props: HydratedCommentNotification) => {
 
   return (
     <Notification
-      timestamp={commentRecord.createdAt}
+      timestamp={props.commentData.indexed_at}
       href={`https://${pubRecord.base_path}/${rkey}?interactionDrawer=comments`}
       icon={<ReplyTiny />}
       actionText={`${displayName} replied to your comment`}
diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx
index 8edb9a1a..cf7da487 100644
--- a/components/ActionBar/Navigation.tsx
+++ b/components/ActionBar/Navigation.tsx
@@ -211,7 +211,7 @@ export function NotificationButton(props: { current?: boolean }) {
         </div>
       ) : (
         <>
-          <NotificationList notifications={notifications!} />
+          <NotificationList compact notifications={notifications!} />
           {notifications && notifications.length > 0 && (
             <SpeedyLink
               className="flex justify-end pt-2 text-sm"
-- 
2.51.2