feat: rich text support

- add facets to gallery and comment lexicons
- add hashtag page for linked galleries
- render facets in profile descriptions
- add notifications for "gallery-mention" and "gallery-comment" for when a user is mentioned in either a comment or gallery description
- add "updatedAt" to gallery lexicon

__generated__/lexicons.ts

···
               'gallery-favorite',
               'gallery-comment',
               'reply',
+              'gallery-mention',
+              'gallery-comment-mention',
               'unknown',
             ],
           },
···
           author: {
             type: 'ref',
             ref: 'lex:social.grain.actor.defs#profileView',
+          },
+          record: {
+            type: 'unknown',
           },
           text: {
             type: 'string',
···
               type: 'string',
               maxLength: 3000,
               maxGraphemes: 300,
+            },
+            facets: {
+              type: 'array',
+              description:
+                'Annotations of description text (mentions and URLs, hashtags, etc)',
+              items: {
+                type: 'ref',
+                ref: 'lex:app.bsky.richtext.facet',
+              },
             },
             subject: {
               type: 'string',
···
               type: 'string',
               maxLength: 1000,
             },
+            facets: {
+              type: 'array',
+              description:
+                'Annotations of description text (mentions, URLs, hashtags, etc)',
+              items: {
+                type: 'ref',
+                ref: 'lex:app.bsky.richtext.facet',
+              },
+            },
             labels: {
               type: 'union',
               description:
                 'Self-label values for this post. Effectively content warnings.',
               refs: ['lex:com.atproto.label.defs#selfLabels'],
+            },
+            updatedAt: {
+              type: 'string',
+              format: 'datetime',
             },
             createdAt: {
               type: 'string',

__generated__/types/social/grain/comment.ts

···
 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 AppBskyRichtextFacet from '../../app/bsky/richtext/facet.ts'
 
 const is$typed = _is$typed,
   validate = _validate
···
 export interface Record {
   $type: 'social.grain.comment'
   text: string
+  /** Annotations of description text (mentions and URLs, hashtags, etc) */
+  facets?: AppBskyRichtextFacet.Main[]
   subject: string
   focus?: string
   replyTo?: string

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

···
   uri: string
   cid: string
   author: SocialGrainActorDefs.ProfileView
+  record?: { [_ in string]: unknown }
   text: string
   subject?: $Typed<SocialGrainGalleryDefs.GalleryView> | { $type: string }
   focus?: $Typed<SocialGrainPhotoDefs.PhotoView> | { $type: string }

__generated__/types/social/grain/gallery.ts

···
 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 AppBskyRichtextFacet from '../../app/bsky/richtext/facet.ts'
 import type * as ComAtprotoLabelDefs from '../../com/atproto/label/defs.ts'
 
 const is$typed = _is$typed,
···
   $type: 'social.grain.gallery'
   title: string
   description?: string
+  /** Annotations of description text (mentions, URLs, hashtags, etc) */
+  facets?: AppBskyRichtextFacet.Main[]
   labels?: $Typed<ComAtprotoLabelDefs.SelfLabels> | { $type: string }
+  updatedAt?: string
   createdAt: string
   [k: string]: unknown
 }

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

···
     | 'gallery-favorite'
     | 'gallery-comment'
     | 'reply'
+    | 'gallery-mention'
+    | 'gallery-comment-mention'
     | 'unknown'
     | (string & {})
   reasonSubject?: string

deno.json

···
 {
   "imports": {
     "$lexicon/": "./__generated__/",
+    "@atproto/api": "npm:@atproto/api@^0.15.16",
     "@atproto/syntax": "npm:@atproto/syntax@^0.4.0",
-    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.40",
+    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.41",
     "@std/http": "jsr:@std/http@^1.0.17",
     "@std/path": "jsr:@std/path@^1.0.9",
     "@tailwindcss/cli": "npm:@tailwindcss/cli@^4.1.4",

deno.lock

···
   "version": "5",
   "specifiers": {
     "jsr:@bigmoves/atproto-oauth-client@0.2": "0.2.0",
-    "jsr:@bigmoves/bff@0.3.0-beta.40": "0.3.0-beta.40",
+    "jsr:@bigmoves/bff@0.3.0-beta.41": "0.3.0-beta.41",
     "jsr:@deno/gfm@0.10": "0.10.0",
     "jsr:@denosaurs/emoji@0.3": "0.3.1",
     "jsr:@luca/esbuild-deno-loader@~0.11.1": "0.11.1",
···
     "jsr:@std/path@^1.1.0": "1.1.0",
     "jsr:@std/streams@^1.0.10": "1.0.10",
     "jsr:@std/testing@^1.0.11": "1.0.11",
-    "npm:@atproto-labs/handle-resolver-node@~0.1.14": "0.1.16",
+    "npm:@atproto-labs/handle-resolver-node@~0.1.14": "0.1.18",
     "npm:@atproto-labs/simple-store@~0.1.2": "0.1.2",
-    "npm:@atproto/api@~0.15.7": "0.15.15",
+    "npm:@atproto/api@*": "0.15.16",
+    "npm:@atproto/api@~0.15.16": "0.15.16",
+    "npm:@atproto/api@~0.15.7": "0.15.16",
     "npm:@atproto/common@~0.4.10": "0.4.11",
     "npm:@atproto/identity@~0.4.7": "0.4.8",
     "npm:@atproto/jwk@0.1.4": "0.1.4",
···
     "npm:@atproto/syntax@0.4": "0.4.0",
     "npm:@atproto/xrpc-server@*": "0.7.19",
     "npm:@atproto/xrpc-server@0.7.18": "0.7.18",
+    "npm:@atproto/xrpc-server@0.7.19": "0.7.19",
     "npm:@tailwindcss/cli@*": "4.1.9",
     "npm:@tailwindcss/cli@^4.0.12": "4.1.9",
     "npm:@tailwindcss/cli@^4.1.3": "4.1.9",
···
         "npm:jose"
       ]
     },
-    "@bigmoves/bff@0.3.0-beta.40": {
-      "integrity": "826055f189da5fafb53011ad393e44f605aa5bfb7bc5b016b8663e5c922d7abd",
+    "@bigmoves/bff@0.3.0-beta.41": {
+      "integrity": "141414a26dcb44d6a08a8a259011e0a7ef01b104ff5664dafc380a6f0f9a22c0",
       "dependencies": [
         "jsr:@bigmoves/atproto-oauth-client",
         "jsr:@std/assert@^1.0.13",
···
         "jsr:@std/fmt",
         "jsr:@std/http@^1.0.13",
         "jsr:@std/path@^1.0.8",
-        "npm:@atproto/api",
+        "npm:@atproto/api@~0.15.7",
         "npm:@atproto/common",
         "npm:@atproto/identity",
         "npm:@atproto/lexicon@0.4.11",
         "npm:@atproto/lexicon@~0.4.11",
         "npm:@atproto/oauth-client",
         "npm:@atproto/syntax",
-        "npm:@atproto/xrpc-server@0.7.18",
+        "npm:@atproto/xrpc-server@0.7.19",
         "npm:clsx",
         "npm:multiformats@^13.3.2",
         "npm:preact",
···
         "@atproto-labs/pipe"
       ]
     },
-    "@atproto-labs/handle-resolver-node@0.1.16": {
-      "integrity": "sha512-i2F989zjyC7b/odrV3/tOpIT1IDIxR3F0khPG4REfOWcmJ89QcP8BiejJ6KFJk3hbTJHq6X9/pTG1vesCvyIKA==",
+    "@atproto-labs/handle-resolver-node@0.1.18": {
+      "integrity": "sha512-/qo14c3I+kagT1UWSp3lTIzwDetfkxvF3Y3VlX2NyQ2jHwgtIAJ81KFNqe7t82NpQDjWiM5h4bdjvdbFIh5djQ==",
       "dependencies": [
         "@atproto-labs/fetch-node",
-        "@atproto-labs/handle-resolver",
+        "@atproto-labs/handle-resolver@0.3.0",
         "@atproto/did"
       ]
     },
···
         "zod"
       ]
     },
+    "@atproto-labs/handle-resolver@0.3.0": {
+      "integrity": "sha512-TREelvXB6P2eHxx6QjINRkBzUZu/aXWrdY9iN57shQe3C8rzsHNEHHuTVvRa33Hc7vFdQbZN0TnCgKveoyiL/A==",
+      "dependencies": [
+        "@atproto-labs/simple-store@0.2.0",
+        "@atproto-labs/simple-store-memory",
+        "@atproto/did",
+        "zod"
+      ]
+    },
     "@atproto-labs/identity-resolver@0.1.18": {
       "integrity": "sha512-DArYXP1hzZJIBcojun0CWEF+TjAhlGKcVq/RwLiGfY1mKq2yPjCiXyHj+5L0+z9jBSZiAB7L65JgcjI2+MFiRg==",
       "dependencies": [
         "@atproto-labs/did-resolver",
-        "@atproto-labs/handle-resolver",
+        "@atproto-labs/handle-resolver@0.1.8",
         "@atproto/syntax"
       ]
     },
···
     "@atproto-labs/simple-store@0.2.0": {
       "integrity": "sha512-0bRbAlI8Ayh03wRwncAMEAyUKtZ+AuTS1jgPrfym1WVOAOiottI/ZmgccqLl6w5MbxVcClNQF7WYGKvGwGoIhA=="
     },
-    "@atproto/api@0.15.15": {
-      "integrity": "sha512-Wn8jv76pCvffnkNj68w0CGZ3PT4DJGM8DUZnYq9kEW2im6jbRBYI0yYrHNhSiE92A5Ox0HjL2jMhalsI2p9VlQ==",
+    "@atproto/api@0.15.16": {
+      "integrity": "sha512-ZNBrzBg2l0lHreKik1lJn8lrhAktwlY8NUPBU/hO9dwjAnDHQTiSzNFZt65dp9djmqZ75sX/VJ+heNuaJBvnhQ==",
       "dependencies": [
         "@atproto/common-web",
         "@atproto/lexicon",
···
       "dependencies": [
         "@atproto-labs/did-resolver",
         "@atproto-labs/fetch",
-        "@atproto-labs/handle-resolver",
+        "@atproto-labs/handle-resolver@0.1.8",
         "@atproto-labs/identity-resolver",
         "@atproto-labs/simple-store@0.2.0",
         "@atproto-labs/simple-store-memory",
···
   },
   "workspace": {
     "dependencies": [
-      "jsr:@bigmoves/bff@0.3.0-beta.40",
+      "jsr:@bigmoves/bff@0.3.0-beta.41",
       "jsr:@std/http@^1.0.17",
       "jsr:@std/path@^1.0.9",
+      "npm:@atproto/api@~0.15.16",
       "npm:@atproto/syntax@0.4",
       "npm:@tailwindcss/cli@^4.1.4",
       "npm:date-fns@^4.1.0",

lexicons.json

···
     "app.bsky.actor.defs",
     "app.bsky.graph.follow",
     "com.atproto.label.defs",
-    "com.atproto.moderation.defs"
+    "com.atproto.moderation.defs",
+    "app.bsky.richtext.facet"
   ]
 }

lexicons/social/grain/comment/comment.json

···
             "maxLength": 3000,
             "maxGraphemes": 300
           },
+          "facets": {
+            "type": "array",
+            "description": "Annotations of description text (mentions and URLs, hashtags, etc)",
+            "items": { "type": "ref", "ref": "app.bsky.richtext.facet" }
+          },
           "subject": {
             "type": "string",
             "format": "at-uri"

lexicons/social/grain/comment/defs.json

···
           "type": "ref",
           "ref": "social.grain.actor.defs#profileView"
         },
+        "record": { "type": "unknown" },
         "text": {
           "type": "string",
           "maxLength": 3000,

lexicons/social/grain/gallery/gallery.json

···
         "properties": {
           "title": { "type": "string", "maxLength": 100 },
           "description": { "type": "string", "maxLength": 1000 },
+          "facets": {
+            "type": "array",
+            "description": "Annotations of description text (mentions, URLs, hashtags, etc)",
+            "items": { "type": "ref", "ref": "app.bsky.richtext.facet" }
+          },
           "labels": {
             "type": "union",
             "description": "Self-label values for this post. Effectively content warnings.",
             "refs": ["com.atproto.label.defs#selfLabels"]
           },
+          "updatedAt": { "type": "string", "format": "datetime" },
           "createdAt": { "type": "string", "format": "datetime" }
         }
       }

lexicons/social/grain/notification/defs.json

···
             "gallery-favorite",
             "gallery-comment",
             "reply",
+            "gallery-mention",
+            "gallery-comment-mention",
             "unknown"
           ]
         },

src/components/GalleryDetailsDialog.tsx

···
       <Dialog.Content>
         <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>
-          {gallery ? "Edit gallery" : "Create a new gallery"}
+          {gallery ? "Edit details" : "Create a new gallery"}
         </Dialog.Title>
         <form
           id="gallery-form"

src/components/GalleryInfo.tsx

···
 import { getGalleryCameras } from "../lib/gallery.ts";
 import { ActorInfo } from "./ActorInfo.tsx";
 import { CameraBadges } from "./CameraBadges.tsx";
+import { RenderFacetedText } from "./RenderFacetedText.tsx";
 
-export function GalleryInfo({ gallery }: Readonly<{ gallery: GalleryView }>) {
+export function GalleryInfo(
+  { gallery }: Readonly<{ gallery: GalleryView }>,
+) {
   const description = (gallery.record as Gallery).description;
+  const facets = (gallery.record as Gallery).facets;
   const cameras = getGalleryCameras(gallery);
   return (
     <div
···
         {(gallery.record as Gallery).title}
       </h1>
       <ActorInfo profile={gallery.creator} />
-      {description ? <p>{description}</p> : null}
+      {description
+        ? (
+          <p>
+            <RenderFacetedText text={description} facets={facets} />
+          </p>
+        )
+        : null}
       <CameraBadges class="my-1" cameras={cameras} />
     </div>
   );

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 { Record as Gallery } from "$lexicon/types/social/grain/gallery.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";
···
 } from "$lexicon/types/social/grain/photo/defs.ts";
 import { Un$Typed } from "$lexicon/util.ts";
 import { AtUri } from "@atproto/syntax";
+import { WithBffMeta } from "@bigmoves/bff";
 import { formatRelativeTime, galleryLink, profileLink } from "../utils.ts";
 import { ActorAvatar } from "./ActorAvatar.tsx";
 import { GalleryPreviewLink } from "./GalleryPreviewLink.tsx";
 import { Header } from "./Header.tsx";
+import { RenderFacetedText } from "./RenderFacetedText.tsx";
 
 export function NotificationsPage(
   { photosMap, galleriesMap, notifications, commentsMap }: Readonly<
···
                         )}
                       </>
                     )}
+                    {notification.reason === "gallery-mention" && (
+                      <>
+                        mentioned you in a gallery · {formatRelativeTime(
+                          new Date((notification.record as Comment).createdAt),
+                        )}
+                      </>
+                    )}
                     {notification.reason === "reply" && (
                       <>
                         replied to your comment · {formatRelativeTime(
···
                       commentsMap={commentsMap}
                     />
                   )}
+                {notification.reason === "gallery-mention" &&
+                  (
+                    <GalleryMentionNotification
+                      notification={notification}
+                      galleriesMap={galleriesMap}
+                    />
+                  )}
               </li>
             ))
           )
···
 }
 
 function GalleryCommentNotification(
-  { notification, galleriesMap, photosMap }: {
+  { notification, galleriesMap, photosMap }: Readonly<{
     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;
···
 }
 
 function ReplyNotification(
-  { notification, galleriesMap, photosMap, commentsMap }: {
+  { notification, galleriesMap, photosMap, commentsMap }: Readonly<{
     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;
···
   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}
+        <div class="text-sm border-l-2 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-500 pl-2">
+          <RenderFacetedText
+            text={replyToComment.text}
+            facets={(replyToComment.record as Comment).facets}
+          />
           {isPhotoView(replyToComment?.focus)
             ? (
               <a
-                class="block mt-2"
+                class="block mt-2 max-w-[200px]"
                 href={galleryLink(
                   gallery.creator.handle,
                   new AtUri(gallery.uri).rkey,
···
               </a>
             )
             : (
-              <GalleryPreviewLink
-                class="mt-2"
-                gallery={gallery}
-                size="small"
-              />
+              <div class="mt-2 max-w-[200px]">
+                <GalleryPreviewLink
+                  class="mt-2"
+                  gallery={gallery}
+                  size="small"
+                />
+              </div>
             )}
         </div>
       )}
-      {comment.text}
+      <RenderFacetedText text={comment.text} facets={comment.facets} />
       {comment.focus
         ? (
           <a
···
   );
 }
 
-function GalleryFavoriteNotification({ notification, galleriesMap }: {
-  notification: NotificationView;
-  galleriesMap: Map<string, GalleryView>;
-}) {
+function GalleryFavoriteNotification(
+  { notification, galleriesMap }: Readonly<{
+    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;
···
     </div>
   );
 }
+
+function GalleryMentionNotification(
+  { notification, galleriesMap }: Readonly<{
+    notification: NotificationView;
+    galleriesMap: Map<string, GalleryView>;
+  }>,
+) {
+  const galleryRecord = notification.record as WithBffMeta<Gallery>;
+  const gallery = galleriesMap.get(galleryRecord.uri) as
+    | GalleryView
+    | undefined;
+  if (!gallery) return null;
+  return (
+    <div class="text-sm border-l-2 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-500 pl-2">
+      {(gallery.record as Gallery).description}
+      <div class="mt-2 max-w-[200px]">
+        <GalleryPreviewLink
+          gallery={gallery}
+          size="small"
+        />
+      </div>
+    </div>
+  );
+}

src/components/ProfilePage.tsx

···
 import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
 import { Un$Typed } from "$lexicon/util.ts";
+import { Facet } from "@atproto/api";
 import { AtUri } from "@atproto/syntax";
 import { LabelerPolicies } from "@bigmoves/bff";
 import { getGalleryCameras } from "../lib/gallery.ts";
···
 import { FollowButton } from "./FollowButton.tsx";
 import { LabelDefinitionButton } from "./LabelDefinitionButton.tsx";
 import { LabelerAvatar } from "./LabelerAvatar.tsx";
+import { RenderFacetedText } from "./RenderFacetedText.tsx";
 
 export type ProfileTabs = "favs" | "galleries" | "labels";
 
···
   userProfiles,
   loggedInUserDid,
   profile,
+  descriptionFacets,
   selectedTab,
   galleries,
   galleryFavs,
···
   actorProfiles: SocialNetwork[];
   loggedInUserDid?: string;
   profile: Un$Typed<ProfileView>;
+  descriptionFacets?: Facet[];
   selectedTab?: ProfileTabs;
   galleries?: GalleryView[];
   galleryFavs?: GalleryView[];
···
             </>
           )}
           {profile.description
-            ? <p class="mt-2 sm:max-w-[500px]">{profile.description}</p>
+            ? (
+              descriptionFacets
+                ? (
+                  <p class="mt-2 sm:max-w-[500px]">
+                    <RenderFacetedText
+                      text={profile.description}
+                      facets={descriptionFacets}
+                    />
+                  </p>
+                )
+                : (
+                  <p class="mt-2 sm:max-w-[500px]">
+                    {profile.description}
+                  </p>
+                )
+            )
             : null}
           <p>
             {userProfiles.includes("bluesky") && (

src/components/RenderFacetedText.tsx

···
+import { Facet, RichText } from "@atproto/api";
+
+type Props = Readonly<{
+  text: string;
+  facets?: Facet[];
+}>;
+
+export function RenderFacetedText({ text, facets }: Props) {
+  const rt = new RichText({ text, facets });
+  return (
+    <>
+      {[...rt.segments()].map((segment) => {
+        const content = segment.text;
+
+        if (segment.isMention()) {
+          return (
+            <a
+              key={segment.mention?.did || segment.text}
+              href={`/profile/${segment.mention?.did}`}
+              class="text-sky-500 hover:underline"
+            >
+              {content}
+            </a>
+          );
+        }
+
+        if (segment.isLink()) {
+          return (
+            <a
+              key={segment.link?.uri || segment.text}
+              href={segment.link?.uri}
+              class="text-sky-500 underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {content}
+            </a>
+          );
+        }
+
+        if (segment.isTag() && segment.tag?.tag) {
+          return (
+            <a
+              key={segment.tag.tag}
+              href={`/hashtag/${segment.tag.tag}`}
+              class="text-sky-500 hover:underline"
+            >
+              #{segment.tag.tag}
+            </a>
+          );
+        }
+
+        return <span key={segment.text}>{content}</span>;
+      })}
+    </>
+  );
+}

src/components/TimelineItem.tsx

···
 import { FavoriteButton } from "./FavoriteButton.tsx";
 import { GalleryPreviewLink } from "./GalleryPreviewLink.tsx";
 import { ModerationWrapper } from "./ModerationWrapper.tsx";
+import { RenderFacetedText } from "./RenderFacetedText.tsx";
 
 export function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
   const title = (item.gallery.record as Gallery).title;
   const description = (item.gallery.record as Gallery).description;
+  const facets = (item.gallery.record as Gallery).facets;
   return (
     <li>
       <div class="flex flex-col pb-4 max-w-md">
···
         )}
         {description && (
           <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-500">
-            {description}
+            {facets && facets.length > 0
+              ? <RenderFacetedText text={description} facets={facets} />
+              : description}
           </p>
         )}
         <div class="flex gap-4">

src/lib/actor.ts

···
 import { Un$Typed } from "$lexicon/util.ts";
 import { BffContext, WithBffMeta } from "@bigmoves/bff";
 import { galleryToView, getGalleryItemsAndPhotos } from "./gallery.ts";
-import { photoToView } from "./photo.ts";
+import { photoToView, photoUrl } from "./photo.ts";
 import type { SocialNetwork } from "./timeline.ts";
 
 export function getActorProfile(did: string, ctx: BffContext) {
···
     displayName: record.displayName,
     description: record.description,
     avatar: record?.avatar
-      ? `https://cdn.bsky.app/img/feed_thumbnail/plain/${record.did}/${record.avatar.ref.toString()}`
+      ? photoUrl(record.did, record.avatar.ref.toString(), "thumbnail")
       : undefined,
   };
 }

src/lib/gallery.ts

···
 import { Label } from "$lexicon/types/com/atproto/label/defs.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 Gallery } from "$lexicon/types/social/grain/gallery.ts";
 import {
···
       items: galleryPhotosMap.get(gallery.uri) ?? [],
       labels,
     })
+  );
+}
+
+export function getGalleryUrisByFacet(
+  type: string,
+  value: string,
+  ctx: BffContext,
+) {
+  const { items: galleries } = ctx.indexService.getRecords<
+    WithBffMeta<Gallery>
+  >(
+    "social.grain.gallery",
+    {
+      facet: {
+        "type": type,
+        "value": value,
+      },
+      orderBy: [{ field: "createdAt", direction: "desc" }],
+    },
+  );
+  return galleries.map((g) => g.uri);
+}
+
+export function getGalleryUrisByCommentFacet(
+  type: string,
+  value: string,
+  ctx: BffContext,
+) {
+  const { items: comments } = ctx.indexService.getRecords<Comment>(
+    "social.grain.comment",
+    {
+      facet: {
+        type,
+        value,
+      },
+    },
+  );
+  return comments.map((comment) => comment.subject).filter((uri) =>
+    uri.includes("social.grain.gallery")
   );
 }
 

src/lib/notifications.ts

···
+import {
+  isMention,
+  type Main as Facet,
+} from "$lexicon/types/app/bsky/richtext/facet.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 {
+  isRecord as isComment,
+  Record as Comment,
+} from "$lexicon/types/social/grain/comment.ts";
+import {
+  isRecord as isFavorite,
+  Record as Favorite,
+} from "$lexicon/types/social/grain/favorite.ts";
+import {
+  isRecord as isGallery,
+  Record as Gallery,
+} from "$lexicon/types/social/grain/gallery.ts";
+import {
+  isRecord as isFollow,
+  Record as Follow,
+} from "$lexicon/types/social/grain/graph/follow.ts";
 import { NotificationView } from "$lexicon/types/social/grain/notification/defs.ts";
 import { Un$Typed } from "$lexicon/util.ts";
 import { ActorTable, BffContext, WithBffMeta } from "@bigmoves/bff";
 import { getActorProfile } from "./actor.ts";
 
-export type NotificationRecords = WithBffMeta<Favorite | Follow | Comment>;
+export type NotificationRecords = WithBffMeta<
+  Favorite | Follow | Comment | Gallery
+>;
 
 export function getNotifications(
-  currentUser: ActorTable,
   ctx: BffContext,
 ) {
-  const { lastSeenNotifs } = currentUser;
   const notifications = ctx.getNotifications<NotificationRecords>();
   return notifications
     .filter(
       (notification) =>
         notification.$type === "social.grain.favorite" ||
         notification.$type === "social.grain.graph.follow" ||
-        notification.$type === "social.grain.comment",
+        notification.$type === "social.grain.comment" ||
+        notification.$type === "social.grain.gallery",
     )
     .map((notification) => {
       const actor = ctx.indexService.getActor(notification.did);
···
       return notificationToView(
         notification,
         authorProfile,
-        lastSeenNotifs,
+        ctx.currentUser,
       );
     })
     .filter((view): view is Un$Typed<NotificationView> => Boolean(view));
···
 export function notificationToView(
   record: NotificationRecords,
   author: Un$Typed<ProfileView>,
-  lastSeenNotifs: string | undefined,
+  currentUser?: ActorTable,
 ): Un$Typed<NotificationView> {
   let reason: string;
-  if (record.$type === "social.grain.favorite") {
+  if (isFavorite(record)) {
     reason = "gallery-favorite";
-  } else if (record.$type === "social.grain.graph.follow") {
+  } else if (isFollow(record)) {
     reason = "follow";
   } else if (
-    record.$type === "social.grain.comment" &&
+    isComment(record) &&
     record.replyTo
   ) {
     reason = "reply";
-  } else if (record.$type === "social.grain.comment") {
+    // @TODO: check the nsid here if support other types of comments
+  } else if (isComment(record)) {
     reason = "gallery-comment";
+  } else if (
+    isGallery(record) && recordHasMentionFacet(
+      record,
+      currentUser?.did,
+    )
+  ) {
+    reason = "gallery-mention";
   } else {
     reason = "unknown";
   }
   const reasonSubject = record.$type === "social.grain.favorite"
     ? record.subject
     : undefined;
-  const isRead = lastSeenNotifs ? record.createdAt <= lastSeenNotifs : false;
+  const isRead = currentUser?.lastSeenNotifs
+    ? record.createdAt <= currentUser.lastSeenNotifs
+    : false;
   return {
     uri: record.uri,
     cid: record.cid,
···
     indexedAt: record.indexedAt,
   };
 }
+
+function recordHasMentionFacet(
+  record: NotificationRecords,
+  currentUserDid?: string,
+): boolean {
+  if (
+    record.$type === "social.grain.gallery" &&
+    Array.isArray(record.facets)
+  ) {
+    return record.facets.some((facet) => {
+      if (!currentUserDid) return true;
+      const features = (facet as Facet).features;
+      // Check if facet features contain the current user's DID
+      if (Array.isArray(features)) {
+        return features.filter(isMention).some(
+          (feature) => feature.did === currentUserDid,
+        );
+      }
+      return false;
+    });
+  }
+  return false;
+}

src/lib/rich_text.ts

···
+import { AppBskyRichtextFacet, Facet, RichText } from "@atproto/api";
+import { BffContext } from "@bigmoves/bff";
+
+export function parseFacetedText(
+  text: string,
+  ctx: BffContext,
+): { text: string; facets: RichText["facets"] } {
+  const rt = new RichText({ text });
+  rt.detectFacetsWithoutResolution();
+  if (rt.facets) {
+    for (const facet of rt.facets) {
+      for (const feature of facet.features) {
+        if (AppBskyRichtextFacet.isMention(feature)) {
+          const actor = ctx.indexService.getActorByHandle(feature.did);
+          if (actor) {
+            feature.did = actor.did;
+          } else {
+            rt.delete(facet.index.byteStart, facet.index.byteEnd);
+          }
+        }
+      }
+    }
+  }
+  return { text: rt.text, facets: rt.facets?.sort(facetSort) };
+}
+
+const facetSort = (a: Facet, b: Facet) => a.index.byteStart - b.index.byteStart;

src/main.tsx

···
 import { handler as followersHandler } from "./routes/followers.tsx";
 import { handler as followsHandler } from "./routes/follows.tsx";
 import { handler as galleryHandler } from "./routes/gallery.tsx";
+import { handler as hashtagHandler } from "./routes/hashtag.tsx";
 import * as legal from "./routes/legal.tsx";
 import { handler as notificationsHandler } from "./routes/notifications.tsx";
 import { handler as onboardHandler } from "./routes/onboard.tsx";
···
     route("/", timelineHandler),
     route("/explore", exploreHandler),
     route("/notifications", notificationsHandler),
-    route("/profile/:handle", profileHandler),
+    route("/profile/:handleOrDid", profileHandler),
     route("/profile/:handle/followers", followersHandler),
     route("/profile/:handle/follows", followsHandler),
     route("/profile/:handle/gallery/:rkey", galleryHandler),
+    route("/hashtag/:tag", hashtagHandler),
     route("/upload", uploadHandler),
     route("/onboard", onboardHandler),
     route("/support", supportHandler),

src/modules/comments.tsx

···
   isPhotoView,
   PhotoView,
 } from "$lexicon/types/social/grain/photo/defs.ts";
+import { Facet } from "@atproto/api";
 import { AtUri } from "@atproto/syntax";
 import { BffContext, BffMiddleware, route, WithBffMeta } from "@bigmoves/bff";
 import { cn } from "@bigmoves/bff/components";
···
 import { ActorInfo } from "../components/ActorInfo.tsx";
 import { Button } from "../components/Button.tsx";
 import { GalleryPreviewLink } from "../components/GalleryPreviewLink.tsx";
+import { RenderFacetedText } from "../components/RenderFacetedText.tsx";
 import { Textarea } from "../components/Textarea.tsx";
 import { getActorProfile, getActorProfilesBulk } from "../lib/actor.ts";
+import { BadRequestError } from "../lib/errors.ts";
 import { getGalleriesBulk, getGallery } from "../lib/gallery.ts";
 import { getPhoto, getPhotosBulk } from "../lib/photo.ts";
+import { parseFacetedText } from "../lib/rich_text.ts";
 import { formatRelativeTime } from "../utils.ts";
 
 export function ReplyDialog({ userProfile, gallery, photo, comment }: Readonly<{
···
               ? <ActorAvatar profile={comment.author} size={42} />
               : null}
             <div class="flex flex-col gap-2">
-              {comment && comment.author
+              {comment?.author
                 ? <div class="font-semibold">{comment.author.displayName}</div>
                 : (
                   <div class="font-semibold">
                     {gallery?.creator.displayName}
                   </div>
                 )}
-              {comment && comment.text}
+              {comment?.text && (
+                <RenderFacetedText
+                  text={comment.text}
+                  facets={(comment.record as Comment).facets}
+                />
+              )}
               {!comment && !photo && gallery &&
                 (gallery.record as Gallery).title}
               {!comment && !photo && gallery
···
           </span>
         </div>
 
-        <div class="mt-1">{comment.text}</div>
+        <div class="mt-1">
+          <RenderFacetedText
+            text={comment.text}
+            facets={(comment.record as Comment).facets}
+          />
+        </div>
 
         {isPhotoView(comment.focus) && (
           <img
···
         return new Response("Text is required", { status: 400 });
       }
 
+      let facets: Facet[] | undefined = undefined;
+      if (text) {
+        try {
+          const resp = parseFacetedText(text, ctx);
+          facets = resp.facets;
+        } catch (e) {
+          console.error("Failed to parse facets:", e);
+        }
+      }
+
       try {
         await ctx.createRecord<WithBffMeta<Comment>>(
           "social.grain.comment",
           {
             text,
+            facets,
             subject: gallery.uri,
             focus: focus ?? undefined,
             replyTo: replyTo ?? undefined,
···
         );
       } catch (error) {
         console.error("Error creating comment:", error);
+        if (error instanceof Error) {
+          throw new BadRequestError(error.message);
+        } else {
+          throw new BadRequestError("Unknown error");
+        }
       }
 
       const comments = getGalleryComments(gallery.uri, ctx);
···
     focus: isPhotoView(focus) ? focus : undefined,
     replyTo: record.replyTo,
     author,
+    record,
     createdAt: record.createdAt,
   };
 }

src/routes/actions.tsx

···
 import { Record as Photo } from "$lexicon/types/social/grain/photo.ts";
 import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
 import { Record as PhotoExif } from "$lexicon/types/social/grain/photo/exif.ts";
+import { Facet } from "@atproto/api";
 import { AtUri } from "@atproto/syntax";
 import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
 import {
···
 import { getFollowers } from "../lib/follow.ts";
 import { deleteGallery, getGallery } from "../lib/gallery.ts";
 import { getPhoto, photoToView } from "../lib/photo.ts";
+import { parseFacetedText } from "../lib/rich_text.ts";
 import type { State } from "../state.ts";
 import { galleryLink, profileLink, uploadPageLink } from "../utils.ts";
 
···
   const searchParams = new URLSearchParams(url.search);
   const uri = searchParams.get("uri");
 
+  let facets: Facet[] | undefined = undefined;
+  if (description) {
+    try {
+      const resp = parseFacetedText(description, ctx);
+      facets = resp.facets;
+    } catch (e) {
+      console.error("Failed to parse facets:", e);
+    }
+  }
+
   if (uri) {
     const gallery = ctx.indexService.getRecord<WithBffMeta<Gallery>>(uri);
     if (!gallery) return ctx.next();
···
       await ctx.updateRecord<Gallery>("social.grain.gallery", rkey, {
         title,
         description,
+        facets,
+        updatedAt: new Date().toISOString(),
         createdAt: gallery.createdAt,
       });
     } catch (e) {
···
     {
       title,
       description,
+      facets,
+      updatedAt: new Date().toISOString(),
       createdAt: new Date().toISOString(),
     },
   );

src/routes/hashtag.tsx

···
+import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { BffContext, RouteHandler } from "@bigmoves/bff";
+import { ActorInfo } from "../components/ActorInfo.tsx";
+import { Breadcrumb } from "../components/Breadcrumb.tsx";
+import { GalleryPreviewLink } from "../components/GalleryPreviewLink.tsx";
+import { Header } from "../components/Header.tsx";
+import { RenderFacetedText } from "../components/RenderFacetedText.tsx";
+import {
+  getGalleriesBulk,
+  getGalleryUrisByCommentFacet,
+  getGalleryUrisByFacet,
+} from "../lib/gallery.ts";
+import { State } from "../state.ts";
+
+export const handler: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const tag = params.tag;
+
+  const galleryUris = getGalleryUrisByFacet(
+    "tag",
+    tag,
+    ctx,
+  );
+
+  const galleriesUrisInComments = getGalleryUrisByCommentFacet(
+    "tag",
+    tag,
+    ctx,
+  );
+
+  const uniqueGalleryUris = Array.from(
+    new Set([...galleryUris, ...galleriesUrisInComments]),
+  );
+  const galleries = getGalleriesBulk(
+    uniqueGalleryUris,
+    ctx,
+  );
+
+  ctx.state.meta = [{ title: `Hashtag — Grain` }];
+
+  return ctx.render(
+    <div class="p-4 flex flex-col gap-4">
+      <Breadcrumb
+        class="m-0"
+        items={[{ label: "home", href: "/" }, {
+          label: tag,
+        }]}
+      />
+      <Header>#{tag}</Header>
+
+      {galleries.length > 0
+        ? (
+          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            {galleries.map((gallery) => (
+              <HashtagGalleryItem gallery={gallery} key={gallery.uri} />
+            ))}
+          </div>
+        )
+        : <div>No galleries found.</div>}
+    </div>,
+  );
+};
+
+function HashtagGalleryItem(
+  { gallery }: Readonly<{
+    gallery: GalleryView;
+  }>,
+) {
+  const title = (gallery.record as Gallery).title;
+  const description = (gallery.record as Gallery).description;
+  const facets = (gallery.record as Gallery).facets || [];
+  return (
+    <div class="flex flex-col gap-2" key={gallery.uri}>
+      <ActorInfo profile={gallery.creator} />
+      <GalleryPreviewLink gallery={gallery} />
+      <div class="font-semibold">
+        {title}
+      </div>
+      {description && (
+        <p class="text-sm text-zinc-600 dark:text-zinc-500">
+          {facets && Array.isArray(facets) &&
+              facets.length > 0
+            ? (
+              <RenderFacetedText
+                text={description}
+                facets={facets}
+              />
+            )
+            : description}
+        </p>
+      )}
+    </div>
+  );
+}

src/routes/notifications.tsx

···
 function getGalleriesUrisForNotifications(
   notifications: Un$Typed<NotificationView>[],
 ): string[] {
-  const uris = notifications
-    .filter((n) =>
+  const uris: string[] = [];
+  for (const n of notifications) {
+    if (
       n.record.$type === "social.grain.favorite" ||
       n.record.$type === "social.grain.comment"
-    )
-    .filter((n) =>
-      (n.record as WithSubject).subject.includes("social.grain.gallery")
-    )
-    .map((n) => (n.record as WithSubject).subject);
+    ) {
+      if (
+        (n.record as WithSubject).subject &&
+        (n.record as WithSubject).subject.includes("social.grain.gallery")
+      ) {
+        uris.push((n.record as WithSubject).subject);
+      }
+    } else if (n.record.$type === "social.grain.gallery") {
+      if (typeof n.record.uri === "string") {
+        uris.push(n.record.uri);
+      }
+    }
+  }
   return uris;
 }
 

src/routes/profile.tsx

···
-import { BffContext, LabelerPolicies, RouteHandler } from "@bigmoves/bff";
+import { RichText } from "@atproto/api";
+import {
+  ActorTable,
+  BffContext,
+  LabelerPolicies,
+  RouteHandler,
+} from "@bigmoves/bff";
 import { ProfilePage, ProfileTabs } from "../components/ProfilePage.tsx";
 import {
   getActorGalleries,
···
   moderateGallery,
   ModerationDecsion,
 } from "../lib/moderation.ts";
+import { parseFacetedText } from "../lib/rich_text.ts";
 import { type SocialNetwork } from "../lib/timeline.ts";
 import { getPageMeta } from "../meta.ts";
 import type { State } from "../state.ts";
···
 ) => {
   const url = new URL(req.url);
   const tab = url.searchParams.get("tab") as ProfileTabs;
-  const handle = params.handle;
-  const actor = ctx.indexService.getActorByHandle(handle);
+  const handleOrDid = params.handleOrDid;
+
+  let actor: ActorTable | undefined;
+  if (handleOrDid.includes("did:")) {
+    actor = ctx.indexService.getActor(handleOrDid);
+  } else {
+    actor = ctx.indexService.getActorByHandle(handleOrDid);
+  }
+
+  if (!actor) return ctx.next();
+
   const isHxRequest = req.headers.get("hx-request") !== null;
   const render = isHxRequest ? ctx.html : ctx.render;
 
-  if (!actor) return ctx.next();
-
   const profile = getActorProfile(actor.did, ctx);
-  const galleries = getActorGalleries(handle, ctx);
+  const galleries = getActorGalleries(actor.did, ctx);
   const followers = getFollowers(actor.did, ctx);
   const following = getFollowing(actor.did, ctx);
 
+  let descriptionFacets: RichText["facets"] = undefined;
+  if (profile?.description) {
+    const resp = parseFacetedText(profile?.description, ctx);
+    descriptionFacets = resp.facets;
+  }
+
   let labelerDefinitions: LabelerPolicies | undefined = undefined;
   const isLabeler = await isLabelerFn(actor.did, ctx);
   if (isLabeler) {
···
     actorProfiles = getActorProfiles(ctx.currentUser.did, ctx);
   }
 
-  userProfiles = getActorProfiles(handle, ctx);
+  userProfiles = getActorProfiles(actor.did, ctx);
 
   ctx.state.meta = [
     {
···
         ? `${profile.displayName} (${profile.handle}) — Grain`
         : `${profile.handle} — Grain`,
     },
-    ...getPageMeta(profileLink(handle)),
+    ...getPageMeta(profileLink(actor.did)),
   ];
 
   if (tab === "favs") {
-    const galleryFavs = getActorGalleryFavs(handle, ctx);
+    const galleryFavs = getActorGalleryFavs(actor.did, ctx);
     return render(
       <ProfilePage
         followersCount={followers.length}
···
       followUri={followUri}
       loggedInUserDid={ctx.currentUser?.did}
       profile={profile}
+      descriptionFacets={descriptionFacets}
       selectedTab={isLabeler ? "labels" : "galleries"}
       galleries={galleries}
       galleryModDecisionsMap={galleryModDecisionsMap}

src/state.ts

···
     if (profile) {
       ctx.state.profile = profile;
     }
-    const notifications = getNotifications(ctx.currentUser, ctx);
+    const notifications = getNotifications(ctx);
     ctx.state.notifications = notifications;
     return ctx.next();
   }

src/utils.ts

···
     (selectedGalleryRkey ? "?gallery=" + selectedGalleryRkey : "");
 }
 
-export function profileLink(handle: string) {
-  return `/profile/${handle}`;
+export function profileLink(handleOrDid: string) {
+  return `/profile/${handleOrDid}`;
 }
 
 export function followersLink(handle: string) {