feat: gallery comments and comment notifications

__generated__/lexicons.ts

···
             type: 'string',
             description:
               'The reason why this notification was delivered - e.g. your gallery was favd, or you received a new follower.',
-            knownValues: ['follow', 'gallery-favorite', 'unknown'],
+            knownValues: [
+              'follow',
+              'gallery-favorite',
+              'gallery-comment',
+              'unknown',
+            ],
           },
           reasonSubject: {
             type: 'string',
···
       },
     },
   },
+  SocialGrainCommentDefs: {
+    lexicon: 1,
+    id: 'social.grain.comment.defs',
+    defs: {
+      commentView: {
+        type: 'object',
+        required: ['uri', 'cid', 'author', 'text', 'createdAt'],
+        properties: {
+          uri: {
+            type: 'string',
+            format: 'at-uri',
+          },
+          cid: {
+            type: 'string',
+            format: 'cid',
+          },
+          author: {
+            type: 'ref',
+            ref: 'lex:social.grain.actor.defs#profileView',
+          },
+          text: {
+            type: 'string',
+            maxLength: 3000,
+            maxGraphemes: 300,
+          },
+          subject: {
+            type: 'union',
+            refs: ['lex:social.grain.gallery.defs#galleryView'],
+            description:
+              'The subject of the comment, which can be a gallery or a photo.',
+          },
+          focus: {
+            type: 'union',
+            refs: ['lex:social.grain.photo.defs#photoView'],
+            description:
+              'The photo that the comment is focused on, if applicable.',
+          },
+          replyTo: {
+            type: 'string',
+            format: 'at-uri',
+            description:
+              'The URI of the comment this comment is replying to, if applicable.',
+          },
+          createdAt: {
+            type: 'string',
+            format: 'datetime',
+          },
+        },
+      },
+    },
+  },
+  SocialGrainComment: {
+    lexicon: 1,
+    id: 'social.grain.comment',
+    defs: {
+      main: {
+        type: 'record',
+        key: 'tid',
+        record: {
+          type: 'object',
+          required: ['text', 'subject', 'createdAt'],
+          properties: {
+            text: {
+              type: 'string',
+              maxLength: 3000,
+              maxGraphemes: 300,
+            },
+            subject: {
+              type: 'string',
+              format: 'at-uri',
+            },
+            focus: {
+              type: 'string',
+              format: 'at-uri',
+            },
+            replyTo: {
+              type: 'string',
+              format: 'at-uri',
+            },
+            createdAt: {
+              type: 'string',
+              format: 'datetime',
+            },
+          },
+        },
+      },
+    },
+  },
   SocialGrainGalleryItem: {
     lexicon: 1,
     id: 'social.grain.gallery.item',
···
             },
           },
           favCount: {
+            type: 'integer',
+          },
+          commentCount: {
             type: 'integer',
           },
           labels: {
···
   ShTangledActorProfile: 'sh.tangled.actor.profile',
   SocialGrainDefs: 'social.grain.defs',
   SocialGrainNotificationDefs: 'social.grain.notification.defs',
+  SocialGrainCommentDefs: 'social.grain.comment.defs',
+  SocialGrainComment: 'social.grain.comment',
   SocialGrainGalleryItem: 'social.grain.gallery.item',
   SocialGrainGalleryDefs: 'social.grain.gallery.defs',
   SocialGrainGallery: 'social.grain.gallery',

__generated__/types/social/grain/comment.ts

···
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { type ValidationResult, BlobRef } from "npm:@atproto/lexicon"
+import { CID } from "npm:multiformats/cid"
+import { validate as _validate } from '../../../lexicons.ts'
+import { type $Typed, is$typed as _is$typed, type OmitKey } from '../../../util.ts'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'social.grain.comment'
+
+export interface Record {
+  $type: 'social.grain.comment'
+  text: string
+  subject: string
+  focus?: string
+  replyTo?: string
+  createdAt: string
+  [k: string]: unknown
+}
+
+const hashRecord = 'main'
+
+export function isRecord<V>(v: V) {
+  return is$typed(v, id, hashRecord)
+}
+
+export function validateRecord<V>(v: V) {
+  return validate<Record & V>(v, id, hashRecord, true)
+}

__generated__/types/social/grain/comment/defs.ts

···
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { type ValidationResult, BlobRef } from "npm:@atproto/lexicon"
+import { CID } from "npm:multiformats/cid"
+import { validate as _validate } from '../../../../lexicons.ts'
+import {
+  type $Typed,
+  is$typed as _is$typed,
+  type OmitKey,
+} from '../../../../util.ts'
+import type * as SocialGrainActorDefs from '../actor/defs.ts'
+import type * as SocialGrainGalleryDefs from '../gallery/defs.ts'
+import type * as SocialGrainPhotoDefs from '../photo/defs.ts'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'social.grain.comment.defs'
+
+export interface CommentView {
+  $type?: 'social.grain.comment.defs#commentView'
+  uri: string
+  cid: string
+  author: SocialGrainActorDefs.ProfileView
+  text: string
+  subject?: $Typed<SocialGrainGalleryDefs.GalleryView> | { $type: string }
+  focus?: $Typed<SocialGrainPhotoDefs.PhotoView> | { $type: string }
+  /** The URI of the comment this comment is replying to, if applicable. */
+  replyTo?: string
+  createdAt: string
+}
+
+const hashCommentView = 'commentView'
+
+export function isCommentView<V>(v: V) {
+  return is$typed(v, id, hashCommentView)
+}
+
+export function validateCommentView<V>(v: V) {
+  return validate<CommentView & V>(v, id, hashCommentView)
+}

__generated__/types/social/grain/gallery/defs.ts

···
   record: { [_ in string]: unknown }
   items?: ($Typed<SocialGrainPhotoDefs.PhotoView> | { $type: string })[]
   favCount?: number
+  commentCount?: number
   labels?: ComAtprotoLabelDefs.Label[]
   indexedAt: string
   viewer?: ViewerState

__generated__/types/social/grain/notification/defs.ts

···
   cid: string
   author: SocialGrainActorDefs.ProfileView
   /** The reason why this notification was delivered - e.g. your gallery was favd, or you received a new follower. */
-  reason: 'follow' | 'gallery-favorite' | 'unknown' | (string & {})
+  reason:
+    | 'follow'
+    | 'gallery-favorite'
+    | 'gallery-comment'
+    | 'unknown'
+    | (string & {})
   reasonSubject?: string
   record: { [_ in string]: unknown }
   isRead: boolean

deno.json

···
     "dev:server": "deno run -A --env-file --watch ./src/main.tsx",
     "dev:tailwind": "deno run -A --node-modules-dir npm:@tailwindcss/cli -i ./src/input.css -o ./build/styles.css --watch",
     "dev:fonts": "rm -rf ./build/fonts && cp -r ./static/fonts/. ./build/fonts",
-    "sync": "deno run -A --env=.env jsr:@bigmoves/bff-cli@0.3.0-beta.40 sync --collections=social.grain.gallery,social.grain.actor.profile,social.grain.photo,social.grain.favorite,social.grain.gallery.item,social.grain.graph.follow,social.grain.photo.exif --external-collections=app.bsky.actor.profile,app.bsky.graph.follow,sh.tangled.graph.follow,sh.tangled.actor.profile --collection-key-map=\"{\"social.grain.favorite\":[\"subject\"],\"social.grain.graph.follow\":[\"subject\"],\"social.grain.gallery.item\":[\"gallery\",\"item\"],\"social.grain.photo.exif\":[\"photo\"]}\"",
-    "codegen": "deno run -A jsr:@bigmoves/bff-cli@0.3.0-beta.37 lexgen"
+    "sync": "deno run -A --env=.env jsr:@bigmoves/bff-cli@0.3.0-beta.40 sync --collections=social.grain.gallery,social.grain.actor.profile,social.grain.photo,social.grain.favorite,social.grain.gallery.item,social.grain.graph.follow,social.grain.photo.exif,social.grain.comment --external-collections=app.bsky.actor.profile,app.bsky.graph.follow,sh.tangled.graph.follow,sh.tangled.actor.profile --collection-key-map=\"{\\\"social.grain.favorite\\\":[\\\"subject\\\"],\\\"social.grain.graph.follow\\\":[\\\"subject\\\"],\\\"social.grain.gallery.item\\\":[\\\"gallery\\\",\\\"item\\\"],\\\"social.grain.photo.exif\\\":[\\\"photo\\\"],\\\"social.grain.comment\\\":[\\\"subject\\\"]}\"",
+    "codegen": "deno run -A jsr:@bigmoves/bff-cli@0.3.0-beta.40 lexgen"
   },
   "compilerOptions": {
     "jsx": "precompile",

lexicons/social/grain/comment/comment.json

···
+{
+  "lexicon": 1,
+  "id": "social.grain.comment",
+  "defs": {
+    "main": {
+      "type": "record",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["text", "subject", "createdAt"],
+        "properties": {
+          "text": {
+            "type": "string",
+            "maxLength": 3000,
+            "maxGraphemes": 300
+          },
+          "subject": {
+            "type": "string",
+            "format": "at-uri"
+          },
+          "focus": {
+            "type": "string",
+            "format": "at-uri"
+          },
+          "replyTo": {
+            "type": "string",
+            "format": "at-uri"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      }
+    }
+  }
+}

lexicons/social/grain/comment/defs.json

···
+{
+  "lexicon": 1,
+  "id": "social.grain.comment.defs",
+  "defs": {
+    "commentView": {
+      "type": "object",
+      "required": ["uri", "cid", "author", "text", "createdAt"],
+      "properties": {
+        "uri": { "type": "string", "format": "at-uri" },
+        "cid": { "type": "string", "format": "cid" },
+        "author": {
+          "type": "ref",
+          "ref": "social.grain.actor.defs#profileView"
+        },
+        "text": {
+          "type": "string",
+          "maxLength": 3000,
+          "maxGraphemes": 300
+        },
+        "subject": {
+          "type": "union",
+          "refs": [
+            "social.grain.gallery.defs#galleryView"
+          ],
+          "description": "The subject of the comment, which can be a gallery or a photo."
+        },
+        "focus": {
+          "type": "union",
+          "refs": [
+            "social.grain.photo.defs#photoView"
+          ],
+          "description": "The photo that the comment is focused on, if applicable."
+        },
+        "replyTo": {
+          "type": "string",
+          "format": "at-uri",
+          "description": "The URI of the comment this comment is replying to, if applicable."
+        },
+        "createdAt": {
+          "type": "string",
+          "format": "datetime"
+        }
+      }
+    }
+  }
+}

lexicons/social/grain/gallery/defs.json

···
           }
         },
         "favCount": { "type": "integer" },
+        "commentCount": { "type": "integer" },
         "labels": {
           "type": "array",
           "items": { "type": "ref", "ref": "com.atproto.label.defs#label" }

lexicons/social/grain/notification/defs.json

···
           "knownValues": [
             "follow",
             "gallery-favorite",
+            "gallery-comment",
             "unknown"
           ]
         },

src/components/ActorInfo.tsx

···
 import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
 import { Un$Typed } from "$lexicon/util.ts";
+import { cn } from "@bigmoves/bff/components";
 import { profileLink } from "../utils.ts";
 import { ActorAvatar } from "./ActorAvatar.tsx";
 
 export function ActorInfo(
-  { profile }: Readonly<{ profile: Un$Typed<ProfileView> }>,
+  { class: classProp, profile, avatarSize = 28 }: Readonly<
+    { class?: string; profile: Un$Typed<ProfileView>; avatarSize?: number }
+  >,
 ) {
   return (
-    <div class="flex items-center gap-2 min-w-0 flex-1">
-      <ActorAvatar profile={profile} size={28} class="shrink-0" />
+    <div class={cn("flex items-center gap-2 min-w-0", classProp)}>
+      <ActorAvatar profile={profile} size={avatarSize} class="shrink-0" />
       <a
         href={profileLink(profile.handle)}
         class="hover:underline text-zinc-600 dark:text-zinc-500 truncate max-w-[300px] sm:max-w-[400px]"

src/components/Dialog.tsx

···
       {...{
         _: `on closeDialog
               remove me
-              remove .tw:pointer-events-none from document.body
+              remove .pointer-events-none from document.body
               remove [@data-scroll-locked] from document.body
             on keyup[key is 'Escape'] from <body/> trigger closeDialog
             init
-              add .tw:pointer-events-none to document.body
-              add .tw:pointer-events-auto to me
+              add .pointer-events-none to document.body
+              add .pointer-events-auto to me
               add [@data-scroll-locked=true] to document.body
             ${_}`,
       }}

src/components/FavoriteButton.tsx

···
     : undefined;
   return (
     <Button
-      variant={variant === "icon-button" ? "ghost" : "primary"}
+      variant={variant === "icon-button" ? "ghost" : "secondary"}
       class={cn(
-        "self-start w-full sm:w-fit whitespace-nowrap",
-        variant === "icon-button" && gallery.viewer?.fav
-          ? "text-pink-500"
-          : undefined,
+        "whitespace-nowrap",
+        gallery.viewer?.fav ? "text-pink-500" : undefined,
         variantClass,
         classProp,
       )}

src/components/GalleryLayout.tsx

···
       type="button"
       hx-get={photoDialogLink(gallery, photo)}
       hx-trigger="click"
-      hx-target="#layout"
-      hx-swap="afterbegin"
+      hx-target="#dialog-target"
+      hx-swap="innerHTML"
       class="gallery-item absolute cursor-pointer"
       data-width={photo.aspectRatio?.width}
       data-height={photo.aspectRatio?.height}

src/components/GalleryPage.tsx

···
 import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
 import { AtUri } from "@atproto/syntax";
 import { ModerationDecsion } from "../lib/moderation.ts";
+import { CommentsButton } from "../modules/comments.tsx";
 import { EditGalleryButton } from "./EditGalleryDialog.tsx";
 import { FavoriteButton } from "./FavoriteButton.tsx";
 import { GalleryInfo } from "./GalleryInfo.tsx";
···
         <GalleryInfo gallery={gallery} />
         {isLoggedIn && isCreator
           ? (
-            <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row sm:flex-wrap sm:justify-end">
+            <div class="flex self-start gap-2 w-full flex-col sm:flex-row sm:justify-end">
               <EditGalleryButton gallery={gallery} />
-              <ShareGalleryDialogButton gallery={gallery} />
-              <FavoriteButton gallery={gallery} />
+              <div class="flex flex-row gap-2">
+                <FavoriteButton class="flex-1" gallery={gallery} />
+                <CommentsButton class="flex-1" gallery={gallery} />
+                <ShareGalleryDialogButton class="flex-1" gallery={gallery} />
+              </div>
             </div>
           )
           : null}
         {!isCreator
           ? (
-            <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
-              <ShareGalleryDialogButton gallery={gallery} />
-              <FavoriteButton gallery={gallery} />
+            <div class="flex self-start gap-2 flex-row">
+              <FavoriteButton class="flex-1" gallery={gallery} />
+              <CommentsButton class="flex-1" gallery={gallery} />
+              <ShareGalleryDialogButton class="flex-1" gallery={gallery} />
             </div>
           )
           : null}

src/components/NotificationsPage.tsx

···
+import { Record as Comment } from "$lexicon/types/social/grain/comment.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 { Un$Typed } from "$lexicon/util.ts";
 import { formatRelativeTime, profileLink } from "../utils.ts";
 import { ActorAvatar } from "./ActorAvatar.tsx";
···
 import { Header } from "./Header.tsx";
 
 export function NotificationsPage(
-  { galleriesMap, notifications }: Readonly<
+  { photosMap, galleriesMap, notifications }: Readonly<
     {
+      photosMap: Map<string, Un$Typed<PhotoView>>;
       galleriesMap: Map<string, Un$Typed<GalleryView>>;
       notifications: Un$Typed<NotificationView>[];
     }
···
                       <>
                         favorited your gallery · {formatRelativeTime(
                           new Date((notification.record as Favorite).createdAt),
+                        )}
+                      </>
+                    )}
+                    {notification.reason === "gallery-comment" && (
+                      <>
+                        commented on your gallery · {formatRelativeTime(
+                          new Date((notification.record as Comment).createdAt),
                         )}
                       </>
                     )}
···
                       <GalleryPreviewLink
                         gallery={galleriesMap.get(
                           (notification.record as Favorite).subject,
-                        ) as Un$Typed<GalleryView>}
+                        ) as GalleryView}
                         size="small"
                       />
                     </div>
+                  )
+                  : null}
+                {notification.reason === "gallery-comment" && 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}
               </li>

src/components/PhotoDialog.tsx

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
 import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
 import { AtUri } from "@atproto/syntax";
 import { cn } from "@bigmoves/bff/components";
+import { ReplyButton } from "../modules/comments.tsx";
 import { photoDialogLink } from "../utils.ts";
 import { Dialog } from "./Dialog.tsx";
 
 export function PhotoDialog({
+  userProfile,
   gallery,
   image,
   nextImage,
   prevImage,
 }: Readonly<{
+  userProfile?: ProfileView;
   gallery: GalleryView;
   image: PhotoView;
   nextImage?: PhotoView;
···
             class="absolute inset-0 w-full h-full object-contain"
           />
         </div>
-        {image.exif
+        {image.alt
           ? (
-            <div class="hidden sm:block absolute bottom-2 right-2">
-              <ExifButton photo={image} />
+            <div class="px-4 sm:px-0 py-4 bg-black text-white text-left flex">
+              <span class="flex-1 mr-2">{image.alt}</span>
             </div>
           )
           : null}
-        {image.alt
+        {(userProfile || image.exif)
           ? (
-            <div class="px-4 sm:px-0 py-4 bg-black text-white text-left flex">
-              <span class="flex-1 mr-2">{image.alt}</span>
-              {image.exif
+            <div class="flex w-full gap-2 p-2 sm:px-0 sm:py-2">
+              {userProfile
                 ? (
-                  <div class="block sm:hidden self-end justify-end -m-2">
-                    <ExifButton photo={image} />
-                  </div>
+                  <ReplyButton
+                    class="flex-1 bg-zinc-800 sm:bg-transparent sm:hover:bg-zinc-800 text-zinc-50"
+                    gallery={gallery}
+                    photo={image}
+                    userProfile={userProfile}
+                  />
                 )
-                : null}
+                : <div class="flex-1" />}
+              {image.exif ? <ExifButton photo={image} /> : null}
             </div>
-          )
-          : null}
-        {!image.alt && image.exif
-          ? (
-            <ExifButton
-              photo={image}
-              class="block sm:hidden absolute bottom-2 right-2 z-100"
-            />
           )
           : null}
       </div>

src/components/ShareGalleryDialog.tsx

···
 import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { AtUri } from "@atproto/syntax";
+import { cn } from "@bigmoves/bff/components";
 import { publicGalleryLink } from "../utils.ts";
 import { Button } from "./Button.tsx";
 import { Dialog } from "./Dialog.tsx";
···
 }
 
 export function ShareGalleryDialogButton(
-  { gallery }: Readonly<{ gallery: GalleryView }>,
+  { class: classProp, gallery }: Readonly<
+    { class?: string; gallery: GalleryView }
+  >,
 ) {
   const rkey = new AtUri(gallery.uri).rkey;
   return (
     <Button
-      variant="primary"
-      class="whitespace-nowrap"
+      variant="secondary"
+      class={cn("whitespace-nowrap", classProp)}
       hx-get={`/dialogs/${gallery.creator.did}/gallery/${rkey}/share`}
       hx-trigger="click"
       hx-target="#dialog-target"

src/components/Timeline.tsx

···
 ) {
   return (
     <div class="px-4 mb-4" id="timeline-page">
+      <div id="dialog-target" />
       {isLoggedIn
         ? (
           <>

src/components/TimelineItem.tsx

···
 import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
 import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
 import { type TimelineItem } from "../lib/timeline.ts";
+import { CommentsButton } from "../modules/comments.tsx";
 import { formatRelativeTime } from "../utils.ts";
 import { ActorInfo } from "./ActorInfo.tsx";
 import { FavoriteButton } from "./FavoriteButton.tsx";
···
     <li>
       <div class="flex flex-col pb-4 max-w-md">
         <div class="flex items-center justify-between gap-2 w-full mb-4">
-          <ActorInfo profile={item.actor} />
+          <ActorInfo profile={item.actor} class="flex-1" />
           <span class="shrink-0">
             {formatRelativeTime(new Date(item.createdAt))}
           </span>
···
             {description}
           </p>
         )}
-        <FavoriteButton
-          gallery={item.gallery}
-          variant="icon-button"
-        />
+        <div class="flex gap-4">
+          <FavoriteButton
+            gallery={item.gallery}
+            variant="icon-button"
+          />
+          <CommentsButton
+            gallery={item.gallery}
+            variant="icon-button"
+          />
+        </div>
       </div>
     </li>
   );

src/input.css

···
     margin-top: 0;
     margin-right: 0px !important;
   }
+
+  .grain-scroll-area {
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin; /* Firefox */
+  }
+
+  .grain-scroll-area::-webkit-scrollbar {
+    width: 8px; /* Chrome/Safari */
+  }
+
+  .grain-scroll-area::-webkit-scrollbar-thumb {
+    background: rgba(100, 100, 100, 0.4);
+    border-radius: 4px;
+  }
 }

src/lib/actor.ts

···
   if (tangledProfiles.length) profiles.push("tangled");
   return profiles;
 }
+
+export function getActorProfilesBulk(
+  dids: string[],
+  ctx: BffContext,
+) {
+  const { items: profiles } = ctx.indexService.getRecords<
+    WithBffMeta<GrainProfile>
+  >(
+    "social.grain.actor.profile",
+    {
+      where: {
+        AND: [
+          { field: "did", in: dids },
+        ],
+      },
+    },
+  );
+
+  return profiles.map((profile) => {
+    const handle = ctx.indexService.getActor(profile.did)?.handle ?? "";
+    return profileToView(profile, handle);
+  });
+}

src/lib/gallery.ts

···
   PhotoView,
 } from "$lexicon/types/social/grain/photo/defs.ts";
 import { Record as PhotoExif } from "$lexicon/types/social/grain/photo/exif.ts";
-import { Un$Typed } from "$lexicon/util.ts";
+import { $Typed, Un$Typed } from "$lexicon/util.ts";
 import { AtUri } from "@atproto/syntax";
 import { BffContext, WithBffMeta } from "@bigmoves/bff";
+import { getGalleryCommentsCount } from "../modules/comments.tsx";
 import { getActorProfile } from "./actor.ts";
 import { photoToView } from "./photo.ts";
 
···
 
   const favs = getGalleryFavs(gallery.uri, ctx);
 
+  const comments = getGalleryCommentsCount(gallery.uri, ctx);
+
   let viewerFav: string | undefined = undefined;
   if (ctx.currentUser?.did) {
     const fav = getGalleryFav(ctx.currentUser?.did, gallery.uri, ctx);
···
     items: galleryPhotosMap.get(gallery.uri) ?? [],
     labels,
     favCount: favs,
+    commentCount: comments,
     viewerState: {
       fav: viewerFav,
     },
···
   items,
   labels = [],
   favCount,
+  commentCount,
   viewerState,
 }: {
   record: WithBffMeta<Gallery>;
···
   items: PhotoWithExif[];
   labels: Label[];
   favCount?: number;
+  commentCount?: number;
   viewerState?: ViewerState;
-}): Un$Typed<GalleryView> {
+}): $Typed<GalleryView> {
   return {
+    $type: "social.grain.gallery.defs#galleryView",
     uri: record.uri,
     cid: record.cid,
     creator,
···
     labels,
     indexedAt: record.indexedAt,
     favCount,
+    commentCount,
     viewer: viewerState,
   };
 }
···
     })
     .filter(isPhotoView);
 }
+
+export function getGalleriesBulk(
+  uris: string[],
+  ctx: BffContext,
+) {
+  if (!uris.length) return [];
+  const { items: galleries } = ctx.indexService.getRecords<
+    WithBffMeta<Gallery>
+  >(
+    "social.grain.gallery",
+    {
+      where: [{ field: "uri", in: uris }],
+    },
+  );
+  if (!galleries.length) return [];
+
+  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
+
+  const profile = getActorProfile(galleries[0].did, ctx);
+  if (!profile) return [];
+
+  const labels = ctx.indexService.queryLabels({ subjects: uris });
+
+  return galleries.map((gallery) =>
+    galleryToView({
+      record: gallery,
+      creator: profile,
+      items: galleryPhotosMap.get(gallery.uri) ?? [],
+      labels,
+    })
+  );
+}

src/lib/notifications.ts

···
 import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { Record as Comment } from "$lexicon/types/social/grain/comment.ts";
 import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
 import { Record as Follow } from "$lexicon/types/social/grain/graph/follow.ts";
 import { NotificationView } from "$lexicon/types/social/grain/notification/defs.ts";
···
 import { ActorTable, BffContext, WithBffMeta } from "@bigmoves/bff";
 import { getActorProfile } from "./actor.ts";
 
-export type NotificationRecords = WithBffMeta<Favorite | Follow>;
+export type NotificationRecords = WithBffMeta<Favorite | Follow | Comment>;
 
 export function getNotifications(
   currentUser: ActorTable,
···
     .filter(
       (notification) =>
         notification.$type === "social.grain.favorite" ||
-        notification.$type === "social.grain.graph.follow",
+        notification.$type === "social.grain.graph.follow" ||
+        notification.$type === "social.grain.comment",
     )
     .map((notification) => {
       const actor = ctx.indexService.getActor(notification.did);
···
     reason = "gallery-favorite";
   } else if (record.$type === "social.grain.graph.follow") {
     reason = "follow";
+  } else if (record.$type === "social.grain.comment") {
+    reason = "gallery-comment";
   } else {
     reason = "unknown";
   }

src/lib/photo.ts

···
         labels: labels ?? [],
       });
     })
-    .filter((g): g is GalleryView => Boolean(g));
+    .filter((g): g is $Typed<GalleryView> => Boolean(g));
+}
+
+export function getPhotosBulk(
+  uris: string[],
+  ctx: BffContext,
+) {
+  if (!uris.length) return [];
+  const { items: photos } = ctx.indexService.getRecords<WithBffMeta<Photo>>(
+    "social.grain.photo",
+    {
+      where: [{ field: "uri", in: uris }],
+    },
+  );
+  if (!photos.length) return [];
+  const { items: exifItems } = ctx.indexService.getRecords<
+    WithBffMeta<PhotoExif>
+  >(
+    "social.grain.photo.exif",
+    {
+      where: [{ field: "photo", in: uris }],
+    },
+  );
+  const exifMap = new Map<string, WithBffMeta<PhotoExif>>();
+  for (const exif of exifItems) {
+    exifMap.set(exif.photo, exif);
+  }
+  return photos.map((photo) =>
+    photoToView(photo.did, photo, exifMap.get(photo.uri))
+  );
 }

src/lib/timeline.ts

···
 import { Un$Typed } from "$lexicon/util.ts";
 import { AtUri } from "@atproto/syntax";
 import { BffContext, QueryOptions, WithBffMeta } from "@bigmoves/bff";
+import { getGalleryCommentsCount } from "../modules/comments.tsx";
 import { getActorProfile } from "./actor.ts";
 import {
   galleryToView,
···
       }
     }
 
+    const comments = getGalleryCommentsCount(gallery.uri, ctx);
+
     const galleryView = galleryToView({
       record: gallery,
       creator: profile,
       items: galleryPhotos,
       labels,
       favCount: favs,
+      commentCount: comments,
       viewerState: {
         fav: viewerFav,
       },

src/main.tsx

···
 import { LoginPage } from "./components/LoginPage.tsx";
 import { PDS_HOST_URL } from "./env.ts";
 import { onError } from "./lib/errors.ts";
+import { middlewares as comments } from "./modules/comments.tsx";
 import * as actions from "./routes/actions.tsx";
 import { handler as communityGuidelinesHandler } from "./routes/community_guidelines.tsx";
 import * as dialogs from "./routes/dialogs.tsx";
···
     "social.grain.graph.follow": ["subject"],
     "social.grain.gallery.item": ["gallery", "item"],
     "social.grain.photo.exif": ["photo"],
+    "social.grain.comment": ["subject"],
   },
   lexicons,
   rootElement: Root,
···
     route("/actions/profile", ["PUT"], actions.profileUpdate),
     route("/actions/gallery/:rkey/sort", ["POST"], actions.gallerySort),
     route("/actions/get-blob", ["GET"], actions.getBlob),
+    ...comments,
     route("/:did/:collection/:rkey", recordHandler),
   ],
 });

src/modules/comments.tsx

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { Record as Comment } from "$lexicon/types/social/grain/comment.ts";
+import { CommentView } from "$lexicon/types/social/grain/comment/defs.ts";
+import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
+import {
+  GalleryView,
+  isGalleryView,
+} from "$lexicon/types/social/grain/gallery/defs.ts";
+import {
+  isPhotoView,
+  PhotoView,
+} from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { BffContext, BffMiddleware, route, WithBffMeta } from "@bigmoves/bff";
+import { cn } from "@bigmoves/bff/components";
+import { Dialog } from "..//components/Dialog.tsx";
+import { ActorAvatar } from "../components/ActorAvatar.tsx";
+import { ActorInfo } from "../components/ActorInfo.tsx";
+import { Button } from "../components/Button.tsx";
+import { GalleryPreviewLink } from "../components/GalleryPreviewLink.tsx";
+import { Textarea } from "../components/Textarea.tsx";
+import { getActorProfile, getActorProfilesBulk } from "../lib/actor.ts";
+import { getGalleriesBulk, getGallery } from "../lib/gallery.ts";
+import { getPhoto, getPhotosBulk } from "../lib/photo.ts";
+import { formatRelativeTime } from "../utils.ts";
+
+export function ReplyDialog({ userProfile, gallery, photo, comment }: Readonly<{
+  userProfile: ProfileView;
+  gallery?: GalleryView;
+  photo?: PhotoView;
+  comment?: CommentView;
+}>) {
+  const galleryRkey = gallery ? new AtUri(gallery.uri).rkey : undefined;
+  const profile = gallery?.creator;
+  return (
+    <Dialog class="z-101">
+      <Dialog.Content class="gap-4">
+        <Dialog.Title>Add a comment</Dialog.Title>
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <div class="divide-y divide-zinc-200 dark:divide-zinc-800 space-y-4">
+          <div class="flex gap-4 pb-4">
+            {!comment && profile
+              ? <ActorAvatar profile={profile} size={42} />
+              : null}
+            {comment
+              ? <ActorAvatar profile={comment.author} size={42} />
+              : null}
+            <div class="flex flex-col gap-2">
+              {profile
+                ? <div class="font-semibold">{profile.displayName}</div>
+                : null}
+              {comment && comment.text}
+              {!comment && !photo && gallery &&
+                (gallery.record as Gallery).title}
+              {!comment && !photo && gallery
+                ? (
+                  <div class="w-[200px] pointer-events-none">
+                    <GalleryPreviewLink
+                      gallery={gallery}
+                      size="small"
+                    />
+                  </div>
+                )
+                : null}
+              {photo
+                ? (
+                  <div class="w-[200px] pointer-events-none">
+                    <img src={photo.thumb} alt={photo.alt} class="rounded-md" />
+                  </div>
+                )
+                : null}
+            </div>
+          </div>
+          <form
+            id="reply-form"
+            class="flex gap-4"
+            hx-post={`/actions/comments/${gallery?.creator.did}/gallery/${galleryRkey}`}
+            hx-target="#dialog-target"
+            hx-swap="innerHTML"
+            _="on htmx:afterOnLoad
+            if event.detail.xhr.status != 200
+              alert('Error: ' + event.detail.xhr.responseText)"
+          >
+            <ActorAvatar profile={userProfile} size={42} />
+            {!comment && photo
+              ? <input type="hidden" name="focus" value={photo.uri} />
+              : null}
+            {comment
+              ? <input type="hidden" name="replyTo" value={comment.uri} />
+              : null}
+            <Textarea
+              class="flex-1"
+              name="text"
+              placeholder="Add a comment"
+              rows={5}
+              autoFocus
+            />
+          </form>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Button type="submit" form="reply-form" variant="primary">
+            Reply
+          </Button>
+          <Dialog.Close variant="secondary">Cancel</Dialog.Close>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+export function GalleryCommentsDialog(
+  { userProfile, comments, gallery }: Readonly<{
+    userProfile: ProfileView;
+    comments: CommentView[];
+    gallery: GalleryView;
+  }>,
+) {
+  const { topLevel, repliesByParent } = groupComments(comments);
+  return (
+    <Dialog>
+      <Dialog.Content class="flex flex-col max-h-[90vh] overflow-hidden">
+        <div>
+          <Dialog.Title>Comments</Dialog.Title>
+          <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        </div>
+        <div>
+          <div class="flex gap-4 pb-4 border-b border-zinc-200 dark:border-zinc-800">
+            {gallery.creator
+              ? <ActorAvatar profile={gallery.creator} size={42} />
+              : null}
+            <div class="flex flex-col gap-2">
+              {gallery.creator
+                ? <div class="font-semibold">{gallery.creator.displayName}</div>
+                : null}
+              {(gallery.record as Gallery).title}
+              <div class="w-[200px] pointer-events-none">
+                <GalleryPreviewLink
+                  gallery={gallery}
+                  size="small"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="py-1 border-b border-zinc-200 dark:border-zinc-800">
+            {gallery
+              ? (
+                <ReplyButton
+                  class="w-full bg-zinc-100 dark:bg-zinc-800 sm:bg-transparent dark:sm:bg-transparent sm:hover:bg-zinc-100 dark:sm:hover:bg-zinc-800"
+                  userProfile={userProfile}
+                  gallery={gallery}
+                />
+              )
+              : null}
+          </div>
+        </div>
+        {topLevel && topLevel.length > 0
+          ? (
+            <div class="flex-1 flex flex-col py-4 gap-6 overflow-y-scroll grain-scroll-area">
+              {topLevel.map((comment) => (
+                <div key={comment.cid} class="flex flex-col gap-4">
+                  <CommentBlock comment={comment} />
+
+                  {repliesByParent.get(comment.uri)?.map((reply) => (
+                    <div key={reply.cid} class="ml-6">
+                      <CommentBlock comment={reply} />
+                    </div>
+                  ))}
+                </div>
+              ))}
+            </div>
+          )
+          : <div class="py-4">No comments yet.</div>}
+        <div class="pt-2 border-t border-zinc-200 dark:border-zinc-800">
+          <Dialog.Close
+            variant="secondary"
+            class="w-full"
+          >
+            Close
+          </Dialog.Close>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+function CommentBlock({ comment }: Readonly<{ comment: CommentView }>) {
+  const gallery = isGalleryView(comment.subject) ? comment.subject : undefined;
+  const rkey = gallery ? new AtUri(gallery.uri).rkey : undefined;
+  return (
+    <div class="flex gap-3 items-start">
+      <div class="flex flex-col flex-1 min-w-0">
+        <div class="flex items-center gap-2 min-w-0 text-sm text-zinc-500">
+          <ActorInfo profile={comment.author} avatarSize={22} />
+          <span class="shrink-0">·</span>
+          <span class="shrink-0">
+            {comment.createdAt
+              ? formatRelativeTime(new Date(comment.createdAt))
+              : ""}
+          </span>
+        </div>
+
+        <div class="mt-1">{comment.text}</div>
+
+        {isPhotoView(comment.focus) && (
+          <img
+            src={comment.focus.thumb}
+            alt={comment.focus.alt}
+            class="mt-2 rounded-md max-w-[200px] max-h-[150px] object-contain w-fit"
+          />
+        )}
+
+        {!comment.replyTo
+          ? (
+            <button
+              type="button"
+              class="w-fit p-0 mt-2 cursor-pointer text-zinc-600 dark:text-zinc-500 font-semibold text-sm"
+              hx-get={`/ui/comments/${gallery?.creator.did}/gallery/${rkey}/reply?comment=${
+                encodeURIComponent(comment.uri)
+              }`}
+              hx-trigger="click"
+              hx-target="#dialog-target"
+              hx-swap="innerHTML"
+            >
+              Reply
+            </button>
+          )
+          : null}
+      </div>
+    </div>
+  );
+}
+
+export function CommentsButton(
+  { class: classProp, variant, gallery }: Readonly<{
+    class?: string;
+    variant: "button" | "icon-button";
+    gallery: GalleryView;
+  }>,
+) {
+  const variantClass = variant === "icon-button"
+    ? "flex w-fit items-center gap-2 m-0 p-0 mt-2"
+    : undefined;
+  const rkey = new AtUri(gallery.uri).rkey;
+  return (
+    <Button
+      type="button"
+      variant={variant === "icon-button" ? "ghost" : "secondary"}
+      class={cn("whitespace-nowrap", variantClass, classProp)}
+      hx-get={`/ui/comments/${gallery.creator.did}/gallery/${rkey}`}
+      hx-trigger="click"
+      hx-target="#dialog-target"
+      hx-swap="innerHTML"
+    >
+      <i class="fa-regular fa-comment" /> {gallery.commentCount ?? 0}
+    </Button>
+  );
+}
+
+export function ReplyButton(
+  { class: classProp, userProfile, gallery, photo }: Readonly<{
+    class?: string;
+    userProfile: ProfileView;
+    gallery: GalleryView;
+    photo?: PhotoView;
+  }>,
+) {
+  const rkey = new AtUri(gallery.uri).rkey;
+  return (
+    <button
+      type="button"
+      class={cn(
+        "flex items-center gap-4 p-3 rounded-full cursor-pointer",
+        classProp,
+      )}
+      hx-get={`/ui/comments/${gallery.creator.did}/gallery/${rkey}/reply${
+        photo ? `?photo=${encodeURIComponent(photo.uri)}` : ""
+      }`}
+      hx-trigger="click"
+      hx-target="#dialog-target"
+      hx-swap="innerHTML"
+      _="on click halt"
+    >
+      <ActorAvatar profile={userProfile} size={22} />
+      Add a comment
+    </button>
+  );
+}
+
+export const middlewares: BffMiddleware[] = [
+  // Actions
+  route(
+    "/actions/comments/:creatorDid/gallery/:rkey",
+    ["POST"],
+    async (req, params, ctx) => {
+      const { did } = ctx.requireAuth();
+      const profile = getActorProfile(did, ctx);
+      if (!profile) return ctx.next();
+
+      const creatorDid = params.creatorDid;
+      const rkey = params.rkey;
+
+      const gallery = getGallery(creatorDid, rkey, ctx);
+      if (!gallery) return ctx.next();
+
+      const form = await req.formData();
+      const text = form.get("text") as string;
+      const focus = form.get("focus") as string;
+      const replyTo = form.get("replyTo") as string;
+
+      if (typeof text !== "string" || text.length === 0) {
+        return new Response("Text is required", { status: 400 });
+      }
+
+      try {
+        await ctx.createRecord<WithBffMeta<Comment>>(
+          "social.grain.comment",
+          {
+            text,
+            subject: gallery.uri,
+            focus: focus ?? undefined,
+            replyTo: replyTo ?? undefined,
+            createdAt: new Date().toISOString(),
+          },
+        );
+      } catch (error) {
+        console.error("Error creating comment:", error);
+      }
+
+      const comments = getGalleryComments(gallery.uri, ctx);
+
+      return ctx.html(
+        <GalleryCommentsDialog
+          userProfile={profile}
+          comments={comments}
+          gallery={gallery}
+        />,
+      );
+    },
+  ),
+
+  // UI
+  route(
+    "/ui/comments/:creatorDid/gallery/:rkey",
+    (_req, params, ctx) => {
+      const { did } = ctx.requireAuth();
+      const profile = getActorProfile(did, ctx);
+      if (!profile) return ctx.next();
+      const creatorDid = params.creatorDid;
+      const rkey = params.rkey;
+      const gallery = getGallery(creatorDid, rkey, ctx);
+      if (!gallery) return ctx.next();
+      const comments = getGalleryComments(gallery.uri, ctx);
+      return ctx.html(
+        <GalleryCommentsDialog
+          userProfile={profile}
+          comments={comments}
+          gallery={gallery}
+        />,
+      );
+    },
+  ),
+  route(
+    "/ui/comments/:creatorDid/gallery/:rkey/reply",
+    (req, params, ctx) => {
+      const { did } = ctx.requireAuth();
+      const profile = getActorProfile(did, ctx);
+      if (!profile) return ctx.next();
+      const url = new URL(req.url);
+      const photoUri = url.searchParams.get("photo");
+      const commentUri = url.searchParams.get("comment");
+      if (commentUri) {
+        const comment = getComment(commentUri, ctx);
+        if (comment) {
+          const gallery = isGalleryView(comment.subject)
+            ? comment.subject
+            : undefined;
+          const photo = isPhotoView(comment.focus) ? comment.focus : undefined;
+          return ctx.html(
+            <ReplyDialog
+              userProfile={profile}
+              comment={comment}
+              gallery={gallery}
+              photo={photo}
+            />,
+          );
+        }
+      }
+      const creatorDid = params.creatorDid;
+      const rkey = params.rkey;
+      let photo: PhotoView | undefined;
+      if (photoUri) {
+        const p = getPhoto(photoUri, ctx);
+        photo = p ?? undefined;
+      }
+      const gallery = getGallery(creatorDid, rkey, ctx);
+      if (!gallery) return ctx.next();
+      return ctx.html(
+        <ReplyDialog userProfile={profile} photo={photo} gallery={gallery} />,
+      );
+    },
+  ),
+];
+
+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
+  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(
+    new Set(
+      comments.map((c) => typeof c.focus === "string" ? c.focus : undefined)
+        .filter((uri): uri is string => !!uri),
+    ),
+  );
+
+  const authorProfiles = getActorProfilesBulk(authorDids, ctx);
+  const authorMap = new Map(authorProfiles.map((p) => [p.did, p]));
+  const subjectViews = getGalleriesBulk(subjectUris, ctx);
+  const subjectMap = new Map(subjectViews.map((g) => [g.uri, g]));
+  const focusViews = getPhotosBulk(focusUris, ctx);
+  const focusMap = new Map(focusViews.map((p) => [p.uri, p]));
+
+  return comments.reduce<CommentView[]>((acc, comment) => {
+    const author = authorMap.get(comment.did);
+    if (!author) return acc;
+    const subject = subjectMap.get(comment.subject);
+    if (!subject) return acc;
+    let focus: PhotoView | undefined = undefined;
+    if (comment.focus) {
+      focus = focusMap.get(comment.focus);
+    }
+    acc.push(commentToView(comment, author, subject, focus));
+    return acc;
+  }, []);
+}
+
+function getComment(uri: string, ctx: BffContext) {
+  const { items: comments } = ctx.indexService.getRecords<WithBffMeta<Comment>>(
+    "social.grain.comment",
+    {
+      where: [{ field: "uri", equals: uri }],
+    },
+  );
+  if (comments.length === 0) return undefined;
+  const comment = comments[0];
+  const author = getActorProfile(comment.did, ctx);
+  if (!author) return undefined;
+  const subjectDid = new AtUri(comment.subject).hostname;
+  const subjectRkey = new AtUri(comment.subject).rkey;
+  const subject = getGallery(subjectDid, subjectRkey, ctx);
+  if (!subject) return undefined;
+  let focus: PhotoView | undefined = undefined;
+  if (comment.focus) {
+    focus = getPhoto(comment.focus, ctx) ?? undefined;
+  }
+  return commentToView(comment, author, subject, focus);
+}
+
+function commentToView(
+  record: WithBffMeta<Comment>,
+  author: ProfileView,
+  subject?: GalleryView,
+  focus?: PhotoView,
+): CommentView {
+  return {
+    uri: record.uri,
+    cid: record.cid,
+    text: record.text,
+    subject: isGalleryView(subject) ? subject : undefined,
+    focus: isPhotoView(focus) ? focus : undefined,
+    replyTo: record.replyTo,
+    author,
+    createdAt: record.createdAt,
+  };
+}

src/routes/dialogs.tsx

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
 import { Record as Profile } from "$lexicon/types/social/grain/actor/profile.ts";
 import { Record as Photo } from "$lexicon/types/social/grain/photo.ts";
 import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
···
   const next = wrap(0, gallery.items.length, imageAtIndex + 1);
   const prev = wrap(0, gallery.items.length, imageAtIndex - 1);
   if (!image) return ctx.next();
+  let userProfile: ProfileView | undefined;
+  if (ctx.currentUser) {
+    const profile = getActorProfile(ctx.currentUser.did, ctx);
+    userProfile = profile ?? undefined;
+  }
   return ctx.html(
     <PhotoDialog
+      userProfile={userProfile}
       gallery={gallery}
       image={image}
       nextImage={gallery.items.filter(isPhotoView).at(next)}

src/routes/notifications.tsx

···
+import { Record as Comment } from "$lexicon/types/social/grain/comment.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 { Un$Typed } from "$lexicon/util.ts";
-import { AtUri } from "@atproto/syntax";
 import { BffContext, RouteHandler } from "@bigmoves/bff";
 import { NotificationsPage } from "../components/NotificationsPage.tsx";
-import { getGallery } from "../lib/gallery.ts";
+import { getGalleriesBulk } from "../lib/gallery.ts";
+import { getPhotosBulk } from "../lib/photo.ts";
 import type { State } from "../state.ts";
 
 export const handler: RouteHandler = (
···
   ctx.state.meta = [
     { title: "Notifications — Grain" },
   ];
+  const galleryUris = getGalleriesUrisForNotifications(
+    ctx.state.notifications ?? [],
+  );
+  const galleries = getGalleriesBulk(galleryUris, ctx);
   const galleriesMap = new Map<string, GalleryView>();
-  const galleryUris = getGalleriesUrisForNotifications(
+  for (const gallery of galleries) {
+    galleriesMap.set(gallery.uri, gallery);
+  }
+  const photoUris = getPhotoUrisForNotifications(
     ctx.state.notifications ?? [],
   );
-  for (const uri of galleryUris) {
-    const gallery = getGallery(
-      new AtUri(uri).hostname,
-      new AtUri(uri).rkey,
-      ctx,
-    );
-    if (gallery) {
-      galleriesMap.set(uri, gallery);
-    }
+  const photos = getPhotosBulk(photoUris, ctx);
+  const photosMap = new Map<string, PhotoView>();
+  for (const photo of photos) {
+    photosMap.set(photo.uri, photo);
   }
   return ctx.render(
     <NotificationsPage
+      photosMap={photosMap}
       galleriesMap={galleriesMap}
       notifications={ctx.state.notifications ?? []}
     />,
   );
 };
+
+type WithSubject = Favorite | Comment;
 
 function getGalleriesUrisForNotifications(
   notifications: Un$Typed<NotificationView>[],
 ): string[] {
   const uris = notifications
-    .filter((n) => n.record.$type === "social.grain.favorite")
     .filter((n) =>
-      (n.record as Favorite).subject.includes("social.grain.gallery")
+      n.record.$type === "social.grain.favorite" ||
+      n.record.$type === "social.grain.comment"
     )
-    .map((n) => (n.record as Favorite).subject);
+    .filter((n) =>
+      (n.record as WithSubject).subject.includes("social.grain.gallery")
+    )
+    .map((n) => (n.record as WithSubject).subject);
   return uris;
 }
+
+function getPhotoUrisForNotifications(
+  notifications: Un$Typed<NotificationView>[],
+): string[] {
+  return notifications
+    .filter((n) => n.record.$type === "social.grain.comment")
+    .map((n) => (n.record as Comment).focus)
+    .filter((focus): focus is string => typeof focus === "string" && !!focus);
+}

sync.sh

···
 
 # Helpful when running local-infra. Specify the repos you've created on a local pds instance.
 
-DB="backup-2025-06-18.db"
-REPOS=""
-COLLECTIONS="social.grain.gallery,social.grain.actor.profile,social.grain.photo,social.grain.favorite,social.grain.gallery.item,social.grain.graph.follow,social.grain.photo.exif"
+DB="grain.db"
+REPOS="did:plc:gdvspmipkels2qp43m4czqhp"
+COLLECTIONS="social.grain.gallery,social.grain.actor.profile,social.grain.photo,social.grain.favorite,social.grain.gallery.item,social.grain.graph.follow,social.grain.photo.exif,social.grain.comment"
 EXTERNAL_COLLECTIONS="app.bsky.actor.profile,app.bsky.graph.follow,sh.tangled.graph.follow,sh.tangled.actor.profile"
-COLLECTION_KEY_MAP='{"social.grain.favorite":["subject"],"social.grain.graph.follow":["subject"],"social.grain.gallery.item":["gallery","item"],"social.grain.photo.exif":["photo"]}'
+COLLECTION_KEY_MAP='{"social.grain.favorite":["subject"],"social.grain.graph.follow":["subject"],"social.grain.gallery.item":["gallery","item"],"social.grain.photo.exif":["photo"],"social.grain.comment":["subject"]}'
 
 deno run -A --env=.env jsr:@bigmoves/bff-cli@0.3.0-beta.40 sync \
   --db="$DB" \