add notifications for bsky post mentions

app/(home-pages)/notifications/MentionNotification.tsx

···
 import { MentionTiny } from "components/Icons/MentionTiny";
 import { ContentLayout, Notification } from "./Notification";
+import { HydratedQuoteNotification } from "src/notifications";
+import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api";
+import { AtUri } from "@atproto/api";
+import { Avatar } from "components/Avatar";
 
-export const DummyPostMentionNotification = (props: {}) => {
-  return (
-    <Notification
-      timestamp={""}
-      href="/"
-      icon={<MentionTiny />}
-      actionText={<>celine mentioned your post</>}
-      content={
-        <ContentLayout
-          postTitle={"Post Title Here"}
-          pubRecord={{ 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">
-            <div className="font-bold">Title of the Mentioned Post</div>
-            <div className="text-tertiary">
-              And here is the description that follows it
-            </div>
-          </div>
-        </ContentLayout>
-      }
-    />
-  );
-};
+export const QuoteNotification = (props: HydratedQuoteNotification) => {
+  const postView = props.bskyPost.post_view as any;
+  const author = postView.author;
+  const displayName = author.displayName || author.handle || "Someone";
+  const docRecord = props.document.data as PubLeafletDocument.Record;
+  const pubRecord = props.document.documents_in_publications[0]?.publications
+    ?.record as PubLeafletPublication.Record;
+  const rkey = new AtUri(props.document.uri).rkey;
+  const postText = postView.record?.text || "";
 
-export const DummyUserMentionNotification = (props: {
-  cardBorderHidden: boolean;
-}) => {
   return (
     <Notification
-      timestamp={""}
-      href="/"
+      timestamp={props.created_at}
+      href={`https://${pubRecord.base_path}/${rkey}`}
       icon={<MentionTiny />}
-      actionText={<>celine mentioned you</>}
+      actionText={<>{displayName} quoted your post</>}
       content={
-        <ContentLayout
-          postTitle={"Post Title Here"}
-          pubRecord={{ 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
-            was! ooooh heck yeah the high is unre...
+        <ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}>
+          <div className="flex gap-2 text-sm w-full">
+            <Avatar
+              src={author.avatar}
+              displayName={displayName}
+            />
+            <pre
+              style={{ wordBreak: "break-word" }}
+              className="whitespace-pre-wrap text-secondary line-clamp-3 sm:line-clamp-6"
+            >
+              {postText}
+            </pre>
           </div>
         </ContentLayout>
       }

app/(home-pages)/notifications/NotificationList.tsx

···
 import { ReplyNotification } from "./ReplyNotification";
 import { useIdentityData } from "components/IdentityProvider";
 import { FollowNotification } from "./FollowNotification";
+import { QuoteNotification } from "./MentionNotification";
 
 export function NotificationList({
   notifications,
···
           }
           if (n.type === "subscribe") {
             return <FollowNotification key={n.id} {...n} />;
+          }
+          if (n.type === "quote") {
+            return <QuoteNotification key={n.id} {...n} />;
           }
         })}
       </div>

app/api/inngest/functions/index_post_mention.ts

···
 import { AtpAgent, AtUri } from "@atproto/api";
 import { Json } from "supabase/database.types";
 import { ids } from "lexicons/api/lexicons";
+import { Notification, pingIdentityToUpdateNotification } from "src/notifications";
+import { v7 } from "uuid";
 
 export const index_post_mention = inngest.createFunction(
   { id: "index_post_mention" },
···
       return { message: `No post found for ${event.data.post_uri}` };
     }
 
+    const documentUri = AtUri.make(
+      pub.identity_did,
+      ids.PubLeafletDocument,
+      path[0],
+    ).toString();
+
     await step.run("index-bsky-post", async () => {
       await supabaseServerClient.from("bsky_posts").insert({
         uri: bsky_post.uri,
···
       });
       await supabaseServerClient.from("document_mentions_in_bsky").insert({
         uri: bsky_post.uri,
-        document: AtUri.make(
-          pub.identity_did,
-          ids.PubLeafletDocument,
-          path[0],
-        ).toString(),
+        document: documentUri,
         link: event.data.document_link,
       });
+    });
+
+    await step.run("create-notification", async () => {
+      // Only create notification if the quote is from someone other than the author
+      if (bsky_post.author.did !== pub.identity_did) {
+        const notification: Notification = {
+          id: v7(),
+          recipient: pub.identity_did,
+          data: {
+            type: "quote",
+            bsky_post_uri: bsky_post.uri,
+            document_uri: documentUri,
+          },
+        };
+        await supabaseServerClient.from("notifications").insert(notification);
+        await pingIdentityToUpdateNotification(pub.identity_did);
+      }
     });
   },
 );

src/notifications.ts

···
 
 export type NotificationData =
   | { type: "comment"; comment_uri: string; parent_uri?: string }
-  | { type: "subscribe"; subscription_uri: string };
+  | { type: "subscribe"; subscription_uri: string }
+  | { type: "quote"; bsky_post_uri: string; document_uri: string };
 
 export type HydratedNotification =
   | HydratedCommentNotification
-  | HydratedSubscribeNotification;
+  | HydratedSubscribeNotification
+  | HydratedQuoteNotification;
 export async function hydrateNotifications(
   notifications: NotificationRow[],
 ): Promise<Array<HydratedNotification>> {
   // Call all hydrators in parallel
-  const [commentNotifications, subscribeNotifications] = await Promise.all([
+  const [commentNotifications, subscribeNotifications, quoteNotifications] = await Promise.all([
     hydrateCommentNotifications(notifications),
     hydrateSubscribeNotifications(notifications),
+    hydrateQuoteNotifications(notifications),
   ]);
 
   // Combine all hydrated notifications
-  const allHydrated = [...commentNotifications, ...subscribeNotifications];
+  const allHydrated = [...commentNotifications, ...subscribeNotifications, ...quoteNotifications];
 
   // Sort by created_at to maintain order
   allHydrated.sort(
···
     subscriptionData: subscriptions?.find(
       (s) => s.uri === notification.data.subscription_uri,
     )!,
+  }));
+}
+
+export type HydratedQuoteNotification = Awaited<
+  ReturnType<typeof hydrateQuoteNotifications>
+>[0];
+
+async function hydrateQuoteNotifications(notifications: NotificationRow[]) {
+  const quoteNotifications = notifications.filter(
+    (n): n is NotificationRow & { data: ExtractNotificationType<"quote"> } =>
+      (n.data as NotificationData)?.type === "quote",
+  );
+
+  if (quoteNotifications.length === 0) {
+    return [];
+  }
+
+  // Fetch bsky post data and document data
+  const bskyPostUris = quoteNotifications.map((n) => n.data.bsky_post_uri);
+  const documentUris = quoteNotifications.map((n) => n.data.document_uri);
+
+  const { data: bskyPosts } = await supabaseServerClient
+    .from("bsky_posts")
+    .select("*")
+    .in("uri", bskyPostUris);
+
+  const { data: documents } = await supabaseServerClient
+    .from("documents")
+    .select("*, documents_in_publications(publications(*))")
+    .in("uri", documentUris);
+
+  return quoteNotifications.map((notification) => ({
+    id: notification.id,
+    recipient: notification.recipient,
+    created_at: notification.created_at,
+    type: "quote" as const,
+    bsky_post_uri: notification.data.bsky_post_uri,
+    document_uri: notification.data.document_uri,
+    bskyPost: bskyPosts?.find((p) => p.uri === notification.data.bsky_post_uri)!,
+    document: documents?.find((d) => d.uri === notification.data.document_uri)!,
   }));
 }