From 8afc0e8f3e5648b59c1b10dc6522b02a6ea5dc9f Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Mon, 10 Nov 2025 14:02:11 -0500
Subject: [PATCH] wire up notifications

---
 actions/getIdentityData.ts                    |  2 +
 .../notifications/CommentNotication.tsx       | 27 +++++-----
 .../notifications/MentionNotification.tsx     | 10 +++-
 .../notifications/Notification.tsx            | 10 ++--
 .../notifications/NotificationList.tsx        | 36 +++++++++++++
 .../notifications/ReplyNotification.tsx       |  5 +-
 .../notifications/getNotifications.ts         | 28 ++++++++++
 app/(home-pages)/notifications/page.tsx       | 14 +----
 components/ActionBar/Navigation.tsx           | 54 +++++++++++++++----
 src/notifications.ts                          | 11 +++-
 10 files changed, 153 insertions(+), 44 deletions(-)
 create mode 100644 app/(home-pages)/notifications/NotificationList.tsx
 create mode 100644 app/(home-pages)/notifications/getNotifications.ts

diff --git a/actions/getIdentityData.ts b/actions/getIdentityData.ts
index c9c407b5..7224413b 100644
--- a/actions/getIdentityData.ts
+++ b/actions/getIdentityData.ts
@@ -17,6 +17,7 @@ export async function uncachedGetIdentityData() {
           identities(
             *,
             bsky_profiles(*),
+            notifications(count),
             publication_subscriptions(*),
             custom_domains!custom_domains_identity_id_fkey(publication_domains(*), *),
             home_leaflet:permission_tokens!identities_home_page_fkey(*, permission_token_rights(*,
@@ -33,6 +34,7 @@ export async function uncachedGetIdentityData() {
             )
           )`,
         )
+        .eq("identities.notifications.read", false)
         .eq("id", auth_token)
         .eq("confirmed", true)
         .single()
diff --git a/app/(home-pages)/notifications/CommentNotication.tsx b/app/(home-pages)/notifications/CommentNotication.tsx
index eace88c3..3b95e394 100644
--- a/app/(home-pages)/notifications/CommentNotication.tsx
+++ b/app/(home-pages)/notifications/CommentNotication.tsx
@@ -3,6 +3,7 @@ import {
   AppBskyActorProfile,
   PubLeafletComment,
   PubLeafletDocument,
+  PubLeafletPublication,
 } from "lexicons/api";
 import { HydratedCommentNotification } from "src/notifications";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
@@ -20,17 +21,18 @@ export const CommentNotification = (props: HydratedCommentNotification) => {
   let commentRecord = props.commentData.record as PubLeafletComment.Record;
   let profileRecord = props.commentData.bsky_profiles
     ?.record as AppBskyActorProfile.Record;
-  const displayName = profileRecord.displayName || "Someone";
+  const displayName =
+    profileRecord.displayName ||
+    props.commentData.bsky_profiles?.handle ||
+    "Someone";
+  const publication = props.commentData.documents?.documents_in_publications[0]
+    ?.publications?.record as PubLeafletPublication.Record;
   return (
     <Notification
       icon={<CommentTiny />}
-      actionText={
-        <>
-          {displayName} commented on your post
-        </>
-      }
+      actionText={<>{displayName} commented on your post</>}
       content={
-        <ContentLayout postTitle={docRecord.title}>
+        <ContentLayout postTitle={docRecord.title} publication={publication}>
           <CommentInNotification
             className=""
             avatar={
@@ -40,11 +42,7 @@ export const CommentNotification = (props: HydratedCommentNotification) => {
                 props.commentData.bsky_profiles?.did || "",
               )
             }
-            displayName={
-              profileRecord?.displayName ||
-              props.commentData.bsky_profiles?.handle ||
-              "Someone"
-            }
+            displayName={displayName}
             index={[]}
             plaintext={commentRecord.plaintext}
             facets={commentRecord.facets}
@@ -61,7 +59,10 @@ export const DummyCommentNotification = () => {
       icon={<CommentTiny />}
       actionText={<>celine commented on your post</>}
       content={
-        <ContentLayout postTitle="This is the Post Title">
+        <ContentLayout
+          postTitle="This is the Post Title"
+          publication={{ name: "My Publication" } as PubLeafletPublication.Record}
+        >
           <CommentInNotification
             className=""
             avatar={undefined}
diff --git a/app/(home-pages)/notifications/MentionNotification.tsx b/app/(home-pages)/notifications/MentionNotification.tsx
index 0b93882b..d1d9685f 100644
--- a/app/(home-pages)/notifications/MentionNotification.tsx
+++ b/app/(home-pages)/notifications/MentionNotification.tsx
@@ -7,7 +7,10 @@ export const DummyPostMentionNotification = () => {
       icon={<MentionTiny />}
       actionText={<>celine mentioned your post</>}
       content={
-        <ContentLayout postTitle={"Post Title Here"}>
+        <ContentLayout
+          postTitle={"Post Title Here"}
+          publication={{ name: "My Publication" } as any}
+        >
           I'm just gonna put the description here. The surrounding context is
           just sort of a pain to figure out
           <div className="border border-border-light rounded-md p-1 my-1 text-xs text-secondary">
@@ -28,7 +31,10 @@ export const DummyUserMentionNotification = () => {
       icon={<MentionTiny />}
       actionText={<>celine mentioned you</>}
       content={
-        <ContentLayout postTitle={"Post Title Here"}>
+        <ContentLayout
+          postTitle={"Post Title Here"}
+          publication={{ name: "My Publication" } as any}
+        >
           <div>
             ...llo this is the content of a post or whatever here it comes{" "}
             <span className="text-accent-contrast">@celine </span> and here it
diff --git a/app/(home-pages)/notifications/Notification.tsx b/app/(home-pages)/notifications/Notification.tsx
index 5ca9d9ef..a20f27bb 100644
--- a/app/(home-pages)/notifications/Notification.tsx
+++ b/app/(home-pages)/notifications/Notification.tsx
@@ -1,6 +1,10 @@
 import { Avatar } from "components/Avatar";
 import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
-import { PubLeafletRichtextFacet } from "lexicons/api";
+import {
+  PubLeafletDocument,
+  PubLeafletPublication,
+  PubLeafletRichtextFacet,
+} from "lexicons/api";
 
 export const Notification = (props: {
   icon: React.ReactNode;
@@ -26,6 +30,7 @@ export const Notification = (props: {
 export const ContentLayout = (props: {
   children: React.ReactNode;
   postTitle: string;
+  publication: PubLeafletPublication.Record;
 }) => {
   return (
     <div className="border border-border-light rounded-md px-2 py-[6px] w-full">
@@ -36,8 +41,7 @@ export const ContentLayout = (props: {
       <hr className="mt-2 mb-1 border-border-light" />
 
       <div className="text-xs text-tertiary flex gap-[6px] items-center">
-        <div className="bg-test rounded-full w-[12px] h-[12px] " />
-        Pub Name Here
+        {props.publication.name}
       </div>
     </div>
   );
diff --git a/app/(home-pages)/notifications/NotificationList.tsx b/app/(home-pages)/notifications/NotificationList.tsx
new file mode 100644
index 00000000..8c22f80a
--- /dev/null
+++ b/app/(home-pages)/notifications/NotificationList.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { HydratedNotification } from "src/notifications";
+import { CommentNotification } from "./CommentNotication";
+import { useEntity, useReplicache } from "src/replicache";
+import { useEffect } from "react";
+import { markAsRead } from "./getNotifications";
+
+export function NotificationList({
+  notifications,
+}: {
+  notifications: HydratedNotification[];
+}) {
+  useEffect(() => {
+    setTimeout(() => {
+      markAsRead();
+    }, 500);
+  }, []);
+  let { rootEntity } = useReplicache();
+
+  let showPageBackground = !useEntity(rootEntity, "theme/card-border-hidden")
+    ?.data.value;
+
+  return (
+    <div className="max-w-prose mx-auto w-full">
+      <div className="flex flex-col gap-6 pt-1">
+        {notifications.map((n) => {
+          if (n.type === "comment") {
+            n;
+            return <CommentNotification key={n.id} {...n} />;
+          }
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/app/(home-pages)/notifications/ReplyNotification.tsx b/app/(home-pages)/notifications/ReplyNotification.tsx
index f272905e..dd806220 100644
--- a/app/(home-pages)/notifications/ReplyNotification.tsx
+++ b/app/(home-pages)/notifications/ReplyNotification.tsx
@@ -13,7 +13,10 @@ export const DummyReplyNotification = () => {
       icon={<ReplyTiny />}
       actionText={<>jared replied to your comment</>}
       content={
-        <ContentLayout postTitle="This is the Post Title">
+        <ContentLayout
+          postTitle="This is the Post Title"
+          publication={{ name: "My Publication" } as any}
+        >
           <CommentInNotification
             className="text-tertiary italic line-clamp-1!"
             avatar={undefined}
diff --git a/app/(home-pages)/notifications/getNotifications.ts b/app/(home-pages)/notifications/getNotifications.ts
new file mode 100644
index 00000000..27d2fb48
--- /dev/null
+++ b/app/(home-pages)/notifications/getNotifications.ts
@@ -0,0 +1,28 @@
+"use server";
+import { getIdentityData } from "actions/getIdentityData";
+import { hydrateNotifications } from "src/notifications";
+import { supabaseServerClient } from "supabase/serverClient";
+
+export async function getNotifications(limit?: number) {
+  let identity = await getIdentityData();
+  if (!identity?.atp_did) return [];
+  let query = supabaseServerClient
+    .from("notifications")
+    .select("*")
+    .eq("recipient", identity.atp_did)
+    .order("created_at", { ascending: false });
+  if (limit) query.limit(limit);
+  let { data } = await query;
+  let notifications = await hydrateNotifications(data || []);
+  return notifications;
+}
+
+export async function markAsRead() {
+  let identity = await getIdentityData();
+  if (!identity?.atp_did) return [];
+  await supabaseServerClient
+    .from("notifications")
+    .update({ read: true })
+    .eq("recipient", identity.atp_did);
+  return;
+}
diff --git a/app/(home-pages)/notifications/page.tsx b/app/(home-pages)/notifications/page.tsx
index 1c1f0278..8c0f08b2 100644
--- a/app/(home-pages)/notifications/page.tsx
+++ b/app/(home-pages)/notifications/page.tsx
@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import { hydrateNotifications } from "src/notifications";
 import { supabaseServerClient } from "supabase/serverClient";
 import { CommentNotification } from "./CommentNotication";
+import { NotificationList } from "./NotificationList";
 
 export default async function Notifications() {
   return (
@@ -31,16 +32,5 @@ const NotificationContent = async () => {
     .select("*")
     .eq("recipient", identity.atp_did);
   let notifications = await hydrateNotifications(data || []);
-  return (
-    <div className="max-w-prose mx-auto w-full">
-      <div className="flex flex-col gap-6 pt-1">
-        {notifications.map((n) => {
-          if (n.type === "comment") {
-            n;
-            return <CommentNotification key={n.id} {...n} />;
-          }
-        })}
-      </div>
-    </div>
-  );
+  return <NotificationList notifications={notifications} />;
 };
diff --git a/components/ActionBar/Navigation.tsx b/components/ActionBar/Navigation.tsx
index b1c0b245..5f8b8a50 100644
--- a/components/ActionBar/Navigation.tsx
+++ b/components/ActionBar/Navigation.tsx
@@ -33,6 +33,12 @@ import {
   DummyPostMentionNotification,
   DummyUserMentionNotification,
 } from "app/(home-pages)/notifications/MentionNotification";
+import useSWR from "swr";
+import {
+  getNotifications,
+  markAsRead,
+} from "app/(home-pages)/notifications/getNotifications";
+import { DotLoader } from "components/utils/DotLoader";
 
 export type navPages = "home" | "reader" | "pub" | "discover" | "notifications";
 
@@ -40,11 +46,14 @@ export const DesktopNavigation = (props: {
   currentPage: navPages;
   publication?: string;
 }) => {
+  let { identity } = useIdentityData();
   return (
     <div className="flex flex-col gap-2">
-      <Sidebar alwaysOpen>
-        <NotificationButton />
-      </Sidebar>
+      {identity?.atp_did && (
+        <Sidebar alwaysOpen>
+          <NotificationButton />
+        </Sidebar>
+      )}
       <Sidebar alwaysOpen>
         <NavigationOptions
           currentPage={props.currentPage}
@@ -81,8 +90,12 @@ export const MobileNavigation = (props: {
           isMobile
         />
       </Popover>
-      <Separator />
-      <NotificationButton />
+      {identity?.atp_did && (
+        <>
+          <Separator />
+          <NotificationButton />
+        </>
+      )}
     </div>
   );
 };
@@ -161,8 +174,12 @@ const DiscoverButton = (props: { current?: boolean }) => {
 };
 
 export function NotificationButton(props: { current?: boolean }) {
-  let unreads = true;
+  let { identity, mutate } = useIdentityData();
+  let unreads = identity?.notifications[0]?.count;
   let isMobile = useIsMobile();
+  let { data: notifications, isLoading } = useSWR("notifications", () =>
+    getNotifications(3),
+  );
   // let identity = await getIdentityData();
   // if (!identity?.atp_did) return;
   // let { data } = await supabaseServerClient
@@ -173,6 +190,13 @@ export function NotificationButton(props: { current?: boolean }) {
 
   return (
     <Popover
+      onOpenChange={async (open) => {
+        if (open) {
+          console.log(open);
+          await markAsRead();
+          mutate();
+        }
+      }}
       asChild
       side={isMobile ? "top" : "right"}
       align={isMobile ? "center" : "start"}
@@ -194,11 +218,19 @@ export function NotificationButton(props: { current?: boolean }) {
       }
     >
       <div className="flex flex-col gap-5 text-sm">
-        <DummyCommentNotification />
-        <DummyReplyNotification />
-        <DummyFollowNotification />
-        <DummyPostMentionNotification />
-        <DummyUserMentionNotification />
+        {isLoading ? (
+          <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm mt-8">
+            <span>loading</span>
+            <DotLoader />
+          </div>
+        ) : (
+          notifications?.map((n) => {
+            if (n.type === "comment") {
+              n;
+              return <CommentNotification key={n.id} {...n} />;
+            }
+          })
+        )}
       </div>
       <SpeedyLink
         className="flex justify-end pt-2 text-sm"
diff --git a/src/notifications.ts b/src/notifications.ts
index ed32fd4b..43924397 100644
--- a/src/notifications.ts
+++ b/src/notifications.ts
@@ -13,7 +13,12 @@ export type NotificationData =
   | { type: "comment"; comment_uri: string }
   | { type: "subscribe"; subscription_uri: string };
 
-export async function hydrateNotifications(notifications: NotificationRow[]) {
+export type HydratedNotification =
+  | HydratedCommentNotification
+  | HydratedSubscribeNotification;
+export async function hydrateNotifications(
+  notifications: NotificationRow[],
+): Promise<Array<HydratedNotification>> {
   // Call all hydrators in parallel
   const [commentNotifications, subscribeNotifications] = await Promise.all([
     hydrateCommentNotifications(notifications),
@@ -56,7 +61,9 @@ async function hydrateCommentNotifications(notifications: NotificationRow[]) {
   const commentUris = commentNotifications.map((n) => n.data.comment_uri);
   const { data: comments } = await supabaseServerClient
     .from("comments_on_documents")
-    .select("*,bsky_profiles(*), documents(*)")
+    .select(
+      "*,bsky_profiles(*), documents(*, documents_in_publications(publications(*)))",
+    )
     .in("uri", commentUris);
 
   return commentNotifications.map((notification) => ({
-- 
2.51.2