From 03decc6790eebfcb7b50b2ce34e0ec24edba0602 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Tue, 11 Nov 2025 15:28:22 -0500
Subject: [PATCH] passed how cardBorder Hidden to other notifcation types

---
 .../notifications/CommentNotication.tsx       | 16 ++++++--
 .../notifications/FollowNotification.tsx      |  5 ++-
 .../notifications/MentionNotification.tsx     | 11 +++++-
 .../notifications/Notification.tsx            | 37 ++++++++++---------
 .../notifications/NotificationList.tsx        | 14 +++++--
 .../notifications/ReplyNotification.tsx       |  6 ++-
 components/ActionBar/Navigation.tsx           | 25 +++++--------
 7 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/app/(home-pages)/notifications/CommentNotication.tsx b/app/(home-pages)/notifications/CommentNotication.tsx
index f9c669d5..4265dd42 100644
--- a/app/(home-pages)/notifications/CommentNotication.tsx
+++ b/app/(home-pages)/notifications/CommentNotication.tsx
@@ -15,7 +15,9 @@ import {
   Notification,
 } from "./Notification";
 
-export const CommentNotification = (props: HydratedCommentNotification) => {
+export const CommentNotification = (
+  props: { cardBorderHidden: boolean } & HydratedCommentNotification,
+) => {
   let docRecord = props.commentData.documents
     ?.data as PubLeafletDocument.Record;
   let commentRecord = props.commentData.record as PubLeafletComment.Record;
@@ -25,14 +27,20 @@ export const CommentNotification = (props: HydratedCommentNotification) => {
     profileRecord.displayName ||
     props.commentData.bsky_profiles?.handle ||
     "Someone";
-  const publication = props.commentData.documents?.documents_in_publications[0]
-    ?.publications?.record as PubLeafletPublication.Record;
+  const publication =
+    props.commentData.documents?.documents_in_publications[0]?.publications ||
+    undefined;
   return (
     <Notification
+      cardBorderHidden={props.cardBorderHidden}
       icon={<CommentTiny />}
       actionText={<>{displayName} commented on your post</>}
       content={
-        <ContentLayout postTitle={docRecord.title} publication={publication}>
+        <ContentLayout
+          cardBorderHidden={props.cardBorderHidden}
+          postTitle={docRecord.title}
+          publication={publication}
+        >
           <CommentInNotification
             className=""
             avatar={
diff --git a/app/(home-pages)/notifications/FollowNotification.tsx b/app/(home-pages)/notifications/FollowNotification.tsx
index db434415..8c83bf03 100644
--- a/app/(home-pages)/notifications/FollowNotification.tsx
+++ b/app/(home-pages)/notifications/FollowNotification.tsx
@@ -1,12 +1,15 @@
 import { Avatar } from "components/Avatar";
 import { Notification } from "./Notification";
 
-export const DummyFollowNotification = () => {
+export const DummyFollowNotification = (props: {
+  cardBorderHidden: boolean;
+}) => {
   const identity = "celine";
   const pubName = "Pub Name Here";
   return (
     <Notification
       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
index d1d9685f..5e4ebc63 100644
--- a/app/(home-pages)/notifications/MentionNotification.tsx
+++ b/app/(home-pages)/notifications/MentionNotification.tsx
@@ -1,14 +1,18 @@
 import { MentionTiny } from "components/Icons/MentionTiny";
 import { ContentLayout, Notification } from "./Notification";
 
-export const DummyPostMentionNotification = () => {
+export const DummyPostMentionNotification = (props: {
+  cardBorderHidden: boolean;
+}) => {
   return (
     <Notification
       icon={<MentionTiny />}
+      cardBorderHidden={props.cardBorderHidden}
       actionText={<>celine mentioned your post</>}
       content={
         <ContentLayout
           postTitle={"Post Title Here"}
+          cardBorderHidden={props.cardBorderHidden}
           publication={{ name: "My Publication" } as any}
         >
           I'm just gonna put the description here. The surrounding context is
@@ -25,7 +29,9 @@ export const DummyPostMentionNotification = () => {
   );
 };
 
-export const DummyUserMentionNotification = () => {
+export const DummyUserMentionNotification = (props: {
+  cardBorderHidden: boolean;
+}) => {
   return (
     <Notification
       icon={<MentionTiny />}
@@ -34,6 +40,7 @@ export const DummyUserMentionNotification = () => {
         <ContentLayout
           postTitle={"Post Title Here"}
           publication={{ 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
index 1402b6ff..c9fc2e38 100644
--- a/app/(home-pages)/notifications/Notification.tsx
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -2,6 +2,8 @@ import { Avatar } from "components/Avatar";
 import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
 import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api";
 import { useEntity, useReplicache } from "src/replicache";
+import { PubIcon } from "components/ActionBar/Publications";
+import { Json } from "supabase/database.types";
 
 export const Notification = (props: {
   icon: React.ReactNode;
@@ -9,19 +11,15 @@ export const Notification = (props: {
   content?: React.ReactNode;
   cardBorderHidden?: boolean;
 }) => {
-  let { rootEntity } = useReplicache();
-  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
-    .value;
-
   return (
     <div
-      className={`flex flex-col w-full sm:p-4 px-3 pl-2 sm:pl-3 pt-2 sm:pt-3! ${
-        cardBorderHidden
+      className={`flex flex-col w-full  ${
+        props.cardBorderHidden
           ? ""
-          : " block-border border-border! hover:outline-border "
+          : " block-border border-border! hover:outline-border sm:p-4 px-3 pl-2 sm:pl-3 pt-2 sm:pt-3!"
       }`}
       style={{
-        backgroundColor: cardBorderHidden
+        backgroundColor: props.cardBorderHidden
           ? "transparent"
           : "rgba(var(--bg-page), var(--bg-page-alpha))",
       }}
@@ -43,25 +41,28 @@ export const Notification = (props: {
 export const ContentLayout = (props: {
   children: React.ReactNode;
   postTitle: string;
-  publication: PubLeafletPublication.Record;
+  publication?: { record: Json; uri: string };
+  cardBorderHidden: boolean;
 }) => {
-  let { rootEntity } = useReplicache();
-  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
-    .value;
+  let pubRecord = props.publication?.record as PubLeafletPublication.Record;
 
   return (
     <div
-      className={`border border-border-light rounded-md px-2 py-[6px] w-full ${cardBorderHidden ? "transparent" : "bg-bg-page"}`}
+      className={`border border-border-light rounded-md px-2 py-[6px] w-full ${props.cardBorderHidden ? "transparent" : "bg-bg-page"}`}
     >
       <div className="text-tertiary text-sm italic font-bold pb-1">
         {props.postTitle}
       </div>
       {props.children}
-      <hr className="mt-2 mb-1 border-border-light" />
-
-      <div className="text-xs text-tertiary flex gap-[6px] items-center">
-        {props.publication.name}
-      </div>
+      {props.publication && (
+        <>
+          <hr className="mt-3 mb-2 border-border-light" />
+          <div className="text-xs text-tertiary flex gap-[6px] items-center">
+            <PubIcon small record={pubRecord} uri={props.publication.uri} />
+            {pubRecord.name}
+          </div>
+        </>
+      )}
     </div>
   );
 };
diff --git a/app/(home-pages)/notifications/NotificationList.tsx b/app/(home-pages)/notifications/NotificationList.tsx
index b26a82d2..1f1d1fb5 100644
--- a/app/(home-pages)/notifications/NotificationList.tsx
+++ b/app/(home-pages)/notifications/NotificationList.tsx
@@ -16,14 +16,22 @@ export function NotificationList({
       markAsRead();
     }, 500);
   }, []);
-
+  let { rootEntity } = useReplicache();
+  let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
+    .value;
   return (
     <div className="max-w-prose mx-auto w-full">
-      <div className="flex flex-col gap-2">
+      <div className={`flex flex-col ${cardBorderHidden ? "gap-6" : "gap-2"}`}>
         {notifications.map((n) => {
           if (n.type === "comment") {
             n;
-            return <CommentNotification key={n.id} {...n} />;
+            return (
+              <CommentNotification
+                cardBorderHidden={!!cardBorderHidden}
+                key={n.id}
+                {...n}
+              />
+            );
           }
         })}
       </div>
diff --git a/app/(home-pages)/notifications/ReplyNotification.tsx b/app/(home-pages)/notifications/ReplyNotification.tsx
index dd806220..b839c104 100644
--- a/app/(home-pages)/notifications/ReplyNotification.tsx
+++ b/app/(home-pages)/notifications/ReplyNotification.tsx
@@ -7,13 +7,17 @@ import {
   Notification,
 } from "./Notification";
 
-export const DummyReplyNotification = () => {
+export const DummyReplyNotification = (props: {
+  cardBorderHidden: boolean;
+}) => {
   return (
     <Notification
       icon={<ReplyTiny />}
       actionText={<>jared replied to your comment</>}
+      cardBorderHidden={props.cardBorderHidden}
       content={
         <ContentLayout
+          cardBorderHidden={props.cardBorderHidden}
           postTitle="This is the Post Title"
           publication={{ name: "My Publication" } as any}
         >
diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx
index bf370238..0ff4240e 100644
--- a/components/ActionBar/Navigation.tsx
+++ b/components/ActionBar/Navigation.tsx
@@ -16,23 +16,10 @@ import {
   NotificationsUnreadSmall,
 } from "components/Icons/NotificationSmall";
 import { SpeedyLink } from "components/SpeedyLink";
-import { NotificationInstance } from "twilio/lib/rest/api/v2010/account/notification";
-import { getIdentityData } from "actions/getIdentityData";
-import { redirect } from "next/navigation";
-import { hydrateNotifications } from "src/notifications";
-import { supabaseServerClient } from "supabase/serverClient";
-import {
-  CommentNotification,
-  DummyCommentNotification,
-} from "app/(home-pages)/notifications/CommentNotication";
+
+import { CommentNotification } from "app/(home-pages)/notifications/CommentNotication";
 import { Separator } from "components/Layout";
 import { useIsMobile } from "src/hooks/isMobile";
-import { DummyReplyNotification } from "app/(home-pages)/notifications/ReplyNotification";
-import { DummyFollowNotification } from "app/(home-pages)/notifications/FollowNotification";
-import {
-  DummyPostMentionNotification,
-  DummyUserMentionNotification,
-} from "app/(home-pages)/notifications/MentionNotification";
 import useSWR from "swr";
 import {
   getNotifications,
@@ -226,7 +213,13 @@ export function NotificationButton(props: { current?: boolean }) {
           notifications?.map((n) => {
             if (n.type === "comment") {
               n;
-              return <CommentNotification key={n.id} {...n} />;
+              return (
+                <CommentNotification
+                  cardBorderHidden={true}
+                  key={n.id}
+                  {...n}
+                />
+              );
             }
           })
         )}
-- 
2.54.0