add follow notification

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

···
 import { Avatar } from "components/Avatar";
 import { Notification } from "./Notification";
+import { HydratedSubscribeNotification } from "src/notifications";
+import { blobRefToSrc } from "src/utils/blobRefToSrc";
+import { AppBskyActorProfile, PubLeafletPublication } from "lexicons/api";
 
-export const DummyFollowNotification = (props: {}) => {
-  const identity = "celine";
-  const pubName = "Pub Name Here";
+export const FollowNotification = (props: HydratedSubscribeNotification) => {
+  const profileRecord = props.subscriptionData?.identities?.bsky_profiles
+    ?.record as AppBskyActorProfile.Record;
+  const displayName =
+    profileRecord?.displayName ||
+    props.subscriptionData?.identities?.bsky_profiles?.handle ||
+    "Someone";
+  const pubRecord = props.subscriptionData?.publications
+    ?.record as PubLeafletPublication.Record;
+  const avatarSrc =
+    profileRecord?.avatar?.ref &&
+    blobRefToSrc(
+      profileRecord.avatar.ref,
+      props.subscriptionData?.identity || "",
+    );
+
   return (
     <Notification
-      timestamp={""}
-      href="/"
-      icon={<Avatar src={undefined} displayName={identity} tiny />}
+      timestamp={props.created_at}
+      href={`https://${pubRecord?.base_path}`}
+      icon={<Avatar src={avatarSrc} displayName={displayName} tiny />}
       actionText={
         <>
-          {identity} followed {pubName}!
+          {displayName} subscribed to {pubRecord?.name}!
         </>
       }
     />

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

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

app/lish/subscribeToPublication.ts

···
 import { encodeActionToSearchParam } from "app/api/oauth/[route]/afterSignInActions";
 import { Json } from "supabase/database.types";
 import { IdResolver } from "@atproto/identity";
+import {
+  Notification,
+  pingIdentityToUpdateNotification,
+} from "src/notifications";
+import { v7 } from "uuid";
 
 let leafletFeedURI =
   "at://did:plc:btxrwcaeyodrap5mnjw2fvmz/app.bsky.feed.generator/subscribedPublications";
···
       publication,
       identity: credentialSession.did!,
     });
+
+  // Create notification for the publication owner
+  let publicationOwner = new AtUri(publication).host;
+  if (publicationOwner !== credentialSession.did) {
+    let notification: Notification = {
+      id: v7(),
+      recipient: publicationOwner,
+      data: {
+        type: "subscribe",
+        subscription_uri: record.uri,
+      },
+    };
+    await supabaseServerClient.from("notifications").insert(notification);
+    await pingIdentityToUpdateNotification(publicationOwner);
+  }
+
   let bsky = new BskyAgent(credentialSession);
   let [prefs, profile, resolveDid] = await Promise.all([
     bsky.app.bsky.actor.getPreferences(),

src/notifications.ts

···
   }));
 }
 
-export type HydratedSubscribeNotification = {
-  id: string;
-  recipient: string;
-  created_at: string;
-  type: "subscribe";
-  subscription_uri: string;
-  subscriptionData?: Tables<"publication_subscriptions">;
-};
-async function hydrateSubscribeNotifications(
-  notifications: NotificationRow[],
-): Promise<HydratedSubscribeNotification[]> {
+export type HydratedSubscribeNotification = Awaited<
+  ReturnType<typeof hydrateSubscribeNotifications>
+>[0];
+
+async function hydrateSubscribeNotifications(notifications: NotificationRow[]) {
   const subscribeNotifications = notifications.filter(
     (
       n,
···
     return [];
   }
 
-  // Fetch subscription data from the database
+  // Fetch subscription data from the database with related data
   const subscriptionUris = subscribeNotifications.map(
     (n) => n.data.subscription_uri,
   );
   const { data: subscriptions } = await supabaseServerClient
     .from("publication_subscriptions")
-    .select("*")
+    .select("*, identities(bsky_profiles(*)), publications(*)")
     .in("uri", subscriptionUris);
 
   return subscribeNotifications.map((notification) => ({
···
     subscription_uri: notification.data.subscription_uri,
     subscriptionData: subscriptions?.find(
       (s) => s.uri === notification.data.subscription_uri,
-    ),
+    )!,
   }));
 }