fix: issue with incorrect gallery link for reply notifications, display the replyTo focus if available

src/components/NotificationsPage.tsx

···
 import { Record as Comment } from "$lexicon/types/social/grain/comment.ts";
+import { CommentView } from "$lexicon/types/social/grain/comment/defs.ts";
 import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
 import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { Record as Follow } from "$lexicon/types/social/grain/graph/follow.ts";
 import { NotificationView } from "$lexicon/types/social/grain/notification/defs.ts";
-import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import {
+  isPhotoView,
+  PhotoView,
+} from "$lexicon/types/social/grain/photo/defs.ts";
 import { Un$Typed } from "$lexicon/util.ts";
-import { formatRelativeTime, profileLink } from "../utils.ts";
+import { AtUri } from "@atproto/syntax";
+import { formatRelativeTime, galleryLink, profileLink } from "../utils.ts";
 import { ActorAvatar } from "./ActorAvatar.tsx";
 import { GalleryPreviewLink } from "./GalleryPreviewLink.tsx";
 import { Header } from "./Header.tsx";
 
 export function NotificationsPage(
-  { photosMap, galleriesMap, notifications }: Readonly<
+  { photosMap, galleriesMap, notifications, commentsMap }: Readonly<
     {
       photosMap: Map<string, Un$Typed<PhotoView>>;
       galleriesMap: Map<string, Un$Typed<GalleryView>>;
+      commentsMap: Map<string, Un$Typed<CommentView>>;
       notifications: Un$Typed<NotificationView>[];
     }
   >,
···
                     )}
                   </span>
                 </div>
-                {notification.reason === "gallery-favorite" && galleriesMap.get(
-                    (notification.record as Favorite).subject,
-                  )
-                  ? (
-                    <div class="w-[200px]">
-                      <GalleryPreviewLink
-                        gallery={galleriesMap.get(
-                          (notification.record as Favorite).subject,
-                        ) as GalleryView}
-                        size="small"
-                      />
-                    </div>
-                  )
-                  : null}
-                {(notification.reason === "gallery-comment" ||
-                    notification.reason === "reply") && galleriesMap.get(
-                      (notification.record as Comment).subject,
-                    )
-                  ? (
-                    <>
-                      {(notification.record as Comment).text}
-                      {(notification.record as Comment).focus
-                        ? (
-                          <div class="w-[200px] pointer-events-none">
-                            <img
-                              src={photosMap.get(
-                                (notification.record as Comment).focus ?? "",
-                              )?.thumb}
-                              alt={photosMap.get(
-                                (notification.record as Comment).focus ?? "",
-                              )?.alt}
-                              class="rounded-md"
-                            />
-                          </div>
-                        )
-                        : (
-                          <div class="w-[200px]">
-                            <GalleryPreviewLink
-                              gallery={galleriesMap.get(
-                                (notification.record as Favorite).subject,
-                              ) as GalleryView}
-                              size="small"
-                            />
-                          </div>
-                        )}
-                    </>
-                  )
-                  : null}
+                {notification.reason === "gallery-favorite" &&
+                  (
+                    <GalleryFavoriteNotification
+                      notification={notification}
+                      galleriesMap={galleriesMap}
+                    />
+                  )}
+                {notification.reason === "gallery-comment" &&
+                  (
+                    <GalleryCommentNotification
+                      notification={notification}
+                      galleriesMap={galleriesMap}
+                      photosMap={photosMap}
+                    />
+                  )}
+                {notification.reason === "reply" &&
+                  (
+                    <ReplyNotification
+                      notification={notification}
+                      galleriesMap={galleriesMap}
+                      photosMap={photosMap}
+                      commentsMap={commentsMap}
+                    />
+                  )}
               </li>
             ))
           )
···
     </div>
   );
 }
+
+function GalleryCommentNotification(
+  { notification, galleriesMap, photosMap }: {
+    notification: NotificationView;
+    galleriesMap: Map<string, GalleryView>;
+    photosMap: Map<string, PhotoView>;
+  },
+) {
+  const comment = notification.record as Comment;
+  const gallery = galleriesMap.get(comment.subject) as GalleryView | undefined;
+  if (!gallery) return null;
+  return (
+    <>
+      {comment.text}
+      {comment.focus
+        ? (
+          <a
+            href={galleryLink(
+              gallery.creator.handle,
+              new AtUri(gallery.uri).rkey,
+            )}
+            class="w-[200px]"
+          >
+            <img
+              src={photosMap.get(comment.focus ?? "")?.thumb}
+              alt={photosMap.get(comment.focus ?? "")?.alt}
+              class="rounded-md"
+            />
+          </a>
+        )
+        : (
+          <div class="w-[200px]">
+            <GalleryPreviewLink
+              gallery={gallery}
+              size="small"
+            />
+          </div>
+        )}
+    </>
+  );
+}
+
+function ReplyNotification(
+  { notification, galleriesMap, photosMap, commentsMap }: {
+    notification: NotificationView;
+    galleriesMap: Map<string, GalleryView>;
+    photosMap: Map<string, PhotoView>;
+    commentsMap: Map<string, CommentView>;
+  },
+) {
+  const comment = notification.record as Comment;
+  const gallery = galleriesMap.get(comment.subject) as GalleryView | undefined;
+  let replyToComment: CommentView | undefined = undefined;
+  if (comment.replyTo) {
+    replyToComment = commentsMap.get(comment.replyTo);
+  }
+  if (!gallery) return null;
+  return (
+    <>
+      {replyToComment && (
+        <div class="text-sm border-l-2 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-500 pl-2 max-w-[200px]">
+          {replyToComment.text}
+          {isPhotoView(replyToComment?.focus)
+            ? (
+              <a
+                class="block mt-2"
+                href={galleryLink(
+                  gallery.creator.handle,
+                  new AtUri(gallery.uri).rkey,
+                )}
+              >
+                <img
+                  src={photosMap.get(replyToComment.focus.uri)?.thumb}
+                  alt={photosMap.get(replyToComment.focus.uri)?.alt}
+                  class="rounded-md"
+                />
+              </a>
+            )
+            : (
+              <GalleryPreviewLink
+                gallery={gallery}
+                size="small"
+              />
+            )}
+        </div>
+      )}
+      {comment.text}
+      {comment.focus
+        ? (
+          <a
+            href={galleryLink(
+              gallery.creator.handle,
+              new AtUri(gallery.uri).rkey,
+            )}
+            class="max-w-[200px]"
+          >
+            <img
+              src={photosMap.get(comment.focus ?? "")?.thumb}
+              alt={photosMap.get(comment.focus ?? "")?.alt}
+              class="rounded-md"
+            />
+          </a>
+        )
+        : !replyToComment
+        ? (
+          <div class="w-[200px]">
+            <GalleryPreviewLink
+              gallery={gallery}
+              size="small"
+            />
+          </div>
+        )
+        : null}
+    </>
+  );
+}
+
+function GalleryFavoriteNotification({ notification, galleriesMap }: {
+  notification: NotificationView;
+  galleriesMap: Map<string, GalleryView>;
+}) {
+  const favorite = notification.record as Favorite;
+  const gallery = galleriesMap.get(favorite.subject) as GalleryView | undefined;
+  if (!gallery) return null;
+  return (
+    <div class="w-[200px]">
+      <GalleryPreviewLink
+        gallery={gallery}
+        size="small"
+      />
+    </div>
+  );
+}

src/lib/gallery.ts

···
 import { AtUri } from "@atproto/syntax";
 import { BffContext, WithBffMeta } from "@bigmoves/bff";
 import { getGalleryCommentsCount } from "../modules/comments.tsx";
-import { getActorProfile } from "./actor.ts";
+import { getActorProfile, getActorProfilesBulk } from "./actor.ts";
 import { photoToView } from "./photo.ts";
 
 type PhotoWithExif = WithBffMeta<Photo> & {
···
 
   const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
 
-  const profile = getActorProfile(galleries[0].did, ctx);
-  if (!profile) return [];
+  const uniqueDids = Array.from(new Set(galleries.map((g) => g.did)));
+  const creators = getActorProfilesBulk(uniqueDids, ctx);
+  const creatorMap = new Map(creators.map((c) => [c.did, c]));
 
   const labels = ctx.indexService.queryLabels({ subjects: uris });
 
-  return galleries.map((gallery) =>
-    galleryToView({
-      record: gallery,
-      creator: profile,
-      items: galleryPhotosMap.get(gallery.uri) ?? [],
-      labels,
+  return galleries
+    .map((gallery) => {
+      const creator = creatorMap.get(gallery.did);
+      if (!creator) return null;
+      return galleryToView({
+        record: gallery,
+        creator,
+        items: galleryPhotosMap.get(gallery.uri) ?? [],
+        labels,
+      });
     })
-  );
+    .filter((g): g is ReturnType<typeof galleryToView> => g !== null);
 }

src/modules/comments.tsx

···
   ),
 ];
 
-function groupComments(comments: CommentView[]) {
-  const repliesByParent = new Map<string, CommentView[]>();
-  const topLevel: CommentView[] = [];
-
-  for (const comment of comments) {
-    if (comment.replyTo) {
-      if (!repliesByParent.has(comment.replyTo)) {
-        repliesByParent.set(comment.replyTo, []);
-      }
-      repliesByParent.get(comment.replyTo)!.push(comment);
-    } else {
-      topLevel.push(comment);
-    }
-  }
-
-  return { topLevel, repliesByParent };
-}
-
-export function getGalleryCommentsCount(uri: string, ctx: BffContext): number {
-  return ctx.indexService.countRecords(
-    "social.grain.comment",
-    {
-      where: {
-        "AND": [{ field: "subject", equals: uri }],
-      },
-      limit: 0,
-    },
-  );
-}
-
-function getGalleryComments(uri: string, ctx: BffContext): CommentView[] {
-  const { items: comments } = ctx.indexService.getRecords<WithBffMeta<Comment>>(
-    "social.grain.comment",
-    {
-      orderBy: [{ field: "createdAt", direction: "desc" }],
-      where: {
-        "AND": [{ field: "subject", equals: uri }],
-      },
-      limit: 100,
-    },
-  );
-
-  // Batch fetch all authors, subjects, and focus photos for comments using bulk functions
+function hydrateComments(
+  comments: WithBffMeta<Comment>[],
+  ctx: BffContext,
+): CommentView[] {
   const authorDids = Array.from(new Set(comments.map((c) => c.did)));
   const subjectUris = Array.from(new Set(comments.map((c) => c.subject)));
   const focusUris: string[] = Array.from(
···
     acc.push(commentToView(comment, author, subject, focus));
     return acc;
   }, []);
+}
+
+function getGalleryComments(uri: string, ctx: BffContext): CommentView[] {
+  const { items: comments } = ctx.indexService.getRecords<WithBffMeta<Comment>>(
+    "social.grain.comment",
+    {
+      orderBy: [{ field: "createdAt", direction: "desc" }],
+      where: {
+        "AND": [{ field: "subject", equals: uri }],
+      },
+      limit: 100,
+    },
+  );
+  return hydrateComments(comments, ctx);
+}
+
+export function getCommentsBulk(
+  uris: string[],
+  ctx: BffContext,
+): CommentView[] {
+  const { items: comments } = ctx.indexService.getRecords<WithBffMeta<Comment>>(
+    "social.grain.comment",
+    {
+      where: [{ field: "uri", in: uris }],
+    },
+  );
+  return hydrateComments(comments, ctx);
+}
+
+function groupComments(comments: CommentView[]) {
+  const repliesByParent = new Map<string, CommentView[]>();
+  const topLevel: CommentView[] = [];
+
+  for (const comment of comments) {
+    if (comment.replyTo) {
+      if (!repliesByParent.has(comment.replyTo)) {
+        repliesByParent.set(comment.replyTo, []);
+      }
+      repliesByParent.get(comment.replyTo)!.push(comment);
+    } else {
+      topLevel.push(comment);
+    }
+  }
+
+  return { topLevel, repliesByParent };
+}
+
+export function getGalleryCommentsCount(uri: string, ctx: BffContext): number {
+  return ctx.indexService.countRecords(
+    "social.grain.comment",
+    {
+      where: {
+        "AND": [{ field: "subject", equals: uri }],
+      },
+      limit: 0,
+    },
+  );
 }
 
 function getComment(uri: string, ctx: BffContext) {

src/routes/notifications.tsx

···
 import { Record as Comment } from "$lexicon/types/social/grain/comment.ts";
+import { CommentView } from "$lexicon/types/social/grain/comment/defs.ts";
 import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
 import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { NotificationView } from "$lexicon/types/social/grain/notification/defs.ts";
-import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import {
+  isPhotoView,
+  PhotoView,
+} from "$lexicon/types/social/grain/photo/defs.ts";
 import { Un$Typed } from "$lexicon/util.ts";
 import { BffContext, RouteHandler } from "@bigmoves/bff";
 import { NotificationsPage } from "../components/NotificationsPage.tsx";
 import { getGalleriesBulk } from "../lib/gallery.ts";
 import { getPhotosBulk } from "../lib/photo.ts";
+import { getCommentsBulk } from "../modules/comments.tsx";
 import type { State } from "../state.ts";
 
 export const handler: RouteHandler = (
···
   for (const photo of photos) {
     photosMap.set(photo.uri, photo);
   }
+  const commentUris = getReplyToUrisForNotifications(
+    ctx.state.notifications ?? [],
+  );
+  const comments = getCommentsBulk(commentUris, ctx);
+  const commentsMap = new Map<string, CommentView>();
+  for (const comment of comments) {
+    commentsMap.set(comment.uri, comment);
+    if (isPhotoView(comment.focus)) {
+      photosMap.set(comment.focus.uri, comment.focus);
+    }
+  }
   return ctx.render(
     <NotificationsPage
       photosMap={photosMap}
       galleriesMap={galleriesMap}
+      commentsMap={commentsMap}
       notifications={ctx.state.notifications ?? []}
     />,
   );
···
     .map((n) => (n.record as Comment).focus)
     .filter((focus): focus is string => typeof focus === "string" && !!focus);
 }
+
+function getReplyToUrisForNotifications(
+  notifications: Un$Typed<NotificationView>[],
+): string[] {
+  return notifications
+    .filter((n) => n.record.$type === "social.grain.comment")
+    .map((n) => (n.record as Comment).replyTo)
+    .filter((replyTo): replyTo is string =>
+      typeof replyTo === "string" && !!replyTo
+    );
+}