feat: enhance gallery and actor lexicons with cameras and createdAt fields; update related components to utilize new properties

__generated__/lexicons.ts

···
           description: {
             type: 'string',
           },
+          cameras: {
+            type: 'array',
+            description:
+              'List of camera make and models used in this gallery derived from EXIF data.',
+            items: {
+              type: 'string',
+            },
+          },
           facets: {
             type: 'array',
             description:
···
               type: 'ref',
               ref: 'lex:com.atproto.label.defs#label',
             },
+          },
+          createdAt: {
+            type: 'string',
+            format: 'datetime',
           },
           indexedAt: {
             type: 'string',
···
     defs: {
       profileView: {
         type: 'object',
-        required: ['did', 'handle'],
+        required: ['cid', 'did', 'handle'],
         properties: {
+          cid: {
+            type: 'string',
+            format: 'cid',
+          },
           did: {
             type: 'string',
             format: 'did',
···
       },
       profileViewDetailed: {
         type: 'object',
-        required: ['did', 'handle'],
+        required: ['cid', 'did', 'handle'],
         properties: {
+          cid: {
+            type: 'string',
+            format: 'cid',
+          },
           did: {
             type: 'string',
             format: 'did',
···
           avatar: {
             type: 'string',
             format: 'uri',
+          },
+          cameras: {
+            type: 'array',
+            items: {
+              type: 'string',
+            },
+            description:
+              'List of camera make and models used by this actor derived from EXIF data of photos linked to galleries.',
           },
           followersCount: {
             type: 'integer',

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

···
 
 export interface ProfileView {
   $type?: 'social.grain.actor.defs#profileView'
+  cid: string
   did: string
   handle: string
   displayName?: string
···
 
 export interface ProfileViewDetailed {
   $type?: 'social.grain.actor.defs#profileViewDetailed'
+  cid: string
   did: string
   handle: string
   displayName?: string
   description?: string
   avatar?: string
+  /** List of camera make and models used by this actor derived from EXIF data of photos linked to galleries. */
+  cameras?: string[]
   followersCount?: number
   followsCount?: number
   galleryCount?: number

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

···
   cid: string
   title?: string
   description?: string
+  /** List of camera make and models used in this gallery derived from EXIF data. */
+  cameras?: string[]
   /** Annotations of description text (mentions, URLs, hashtags, etc) */
   facets?: AppBskyRichtextFacet.Main[]
   creator: SocialGrainActorDefs.ProfileView
···
   favCount?: number
   commentCount?: number
   labels?: ComAtprotoLabelDefs.Label[]
+  createdAt?: string
   indexedAt: string
   viewer?: ViewerState
 }

lexicons/social/grain/actor/defs.json

···
   "defs": {
     "profileView": {
       "type": "object",
-      "required": ["did", "handle"],
+      "required": ["cid", "did", "handle"],
       "properties": {
+        "cid": { "type": "string", "format": "cid" },
         "did": { "type": "string", "format": "did" },
         "handle": { "type": "string", "format": "handle" },
         "displayName": {
···
     },
     "profileViewDetailed": {
       "type": "object",
-      "required": ["did", "handle"],
+      "required": ["cid", "did", "handle"],
       "properties": {
+        "cid": { "type": "string", "format": "cid" },
         "did": { "type": "string", "format": "did" },
         "handle": { "type": "string", "format": "handle" },
         "displayName": {
···
           "maxLength": 2560
         },
         "avatar": { "type": "string", "format": "uri" },
+        "cameras": {
+          "type": "array",
+          "items": { "type": "string" },
+          "description": "List of camera make and models used by this actor derived from EXIF data of photos linked to galleries."
+        },
         "followersCount": { "type": "integer" },
         "followsCount": { "type": "integer" },
         "galleryCount": { "type": "integer" },

lexicons/social/grain/gallery/defs.json

···
         "cid": { "type": "string", "format": "cid" },
         "title": { "type": "string" },
         "description": { "type": "string" },
+        "cameras": {
+          "type": "array",
+          "description": "List of camera make and models used in this gallery derived from EXIF data.",
+          "items": { "type": "string" }
+        },
         "facets": {
           "type": "array",
           "description": "Annotations of description text (mentions, URLs, hashtags, etc)",
···
           "type": "array",
           "items": { "type": "ref", "ref": "com.atproto.label.defs#label" }
         },
+        "createdAt": { "type": "string", "format": "datetime" },
         "indexedAt": { "type": "string", "format": "datetime" },
         "viewer": { "type": "ref", "ref": "#viewerState" }
       }

src/components/GalleryInfo.tsx

···
-import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
 import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
-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 }>,
 ) {
-  const description = (gallery.record as Gallery).description;
-  const facets = (gallery.record as Gallery).facets;
-  const cameras = getGalleryCameras(gallery);
+  const description = gallery.description;
+  const facets = gallery.facets;
   return (
     <div
       class="flex flex-col space-y-2 mb-4 max-w-[500px]"
       id="gallery-info"
     >
       <h1 class="font-bold text-2xl">
-        {(gallery.record as Gallery).title}
+        {gallery.title}
       </h1>
       <ActorInfo profile={gallery.creator} />
       {description
···
           </p>
         )
         : null}
-      <CameraBadges class="my-1" cameras={cameras} />
+      <CameraBadges class="my-1" cameras={gallery.cameras ?? []} />
     </div>
   );
 }

src/components/GallerySelectDialog.tsx

···
-import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
 import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { AtUri } from "@atproto/syntax";
 import { Button } from "./Button.tsx";
···
                     hx-swap="none"
                     class="block text-left w-full px-2 py-4"
                   >
-                    {(gallery.record as Gallery).title}
+                    {gallery.title}
                     <div class="text-sm text-zinc-600 dark:text-zinc-500">
-                      {(gallery.record as Gallery).description}
+                      {gallery.description}
                     </div>
                   </button>
                 )
···
                     href={uploadPageLink(gallery.uri)}
                     class="block w-full px-2 py-4"
                   >
-                    {(gallery.record as Gallery).title}
+                    {gallery.title}
                     <div class="text-sm text-zinc-600 dark:text-zinc-500">
-                      {(gallery.record as Gallery).description}
+                      {gallery.description}
                     </div>
                   </a>
                 )}

src/components/NotificationsPage.tsx

···
   return (
     <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={(gallery.record as Gallery).description ?? ""}
+        text={gallery.description ?? ""}
         facets={galleryRecord.facets}
       />
       <div class="mt-2 max-w-[200px]">

src/components/ProfilePage.tsx

···
 import { LabelValueDefinition } from "$lexicon/types/com/atproto/label/defs.ts";
-import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
-import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
+import { ProfileViewDetailed } from "$lexicon/types/social/grain/actor/defs.ts";
 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 {
   atprotoLabelValueDefinitions,
   ModerationDecsion,
···
 export type ProfileTabs = "favs" | "galleries" | "labels";
 
 export function ProfilePage({
-  followUri,
-  followersCount,
-  followingCount,
   userProfiles,
   loggedInUserDid,
   profile,
···
   isLabeler,
   labelerDefinitions,
 }: Readonly<{
-  followUri?: string;
-  followersCount?: number;
-  followingCount?: number;
   userProfiles: SocialNetwork[];
   actorProfiles: SocialNetwork[];
   loggedInUserDid?: string;
-  profile: Un$Typed<ProfileView>;
+  profile: Un$Typed<ProfileViewDetailed>;
   descriptionFacets?: Facet[];
   selectedTab?: ProfileTabs;
   galleries?: GalleryView[];
···
 }>) {
   const isCreator = loggedInUserDid === profile.did;
   const displayName = profile.displayName || profile.handle;
-  const cameras = Array.from(
-    new Set(galleries?.flatMap(getGalleryCameras) ?? []),
-  );
   return (
     <div class="px-4 mb-4" id="profile-page">
       <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4">
···
               <p class="space-x-1">
                 <a href={followersLink(profile.handle)}>
                   <span class="font-semibold" id="followers-count">
-                    {followersCount ?? 0}
+                    {profile.followersCount ?? 0}
                   </span>{" "}
                   <span class="text-zinc-600 dark:text-zinc-500">
                     followers
···
                 </a>{" "}
                 <a href={followingLink(profile.handle)}>
                   <span class="font-semibold" id="following-count">
-                    {followingCount ?? 0}
+                    {profile.followsCount ?? 0}
                   </span>{" "}
                   <span class="text-zinc-600 dark:text-zinc-500">
                     following
···
                 <span class="font-semibold">{galleries?.length ?? 0}</span>
                 <span class="text-zinc-600 dark:text-zinc-500">galleries</span>
               </p>
-              <CameraBadges cameras={cameras} class="mt-2" />
+              <CameraBadges cameras={profile.cameras ?? []} class="mt-2" />
             </>
           )}
           {profile.description
···
             <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
               <FollowButton
                 followeeDid={profile.did}
-                followUri={followUri}
+                followUri={profile.viewer?.following}
               />
             </div>
           )
···
         )
         : <div class="w-full h-full bg-zinc-200 dark:bg-zinc-900" />}
       <div class="absolute sm:flex hidden bottom-0 left-0 bg-black/80 text-white p-2 items-center gap-2">
-        {(gallery.record as Gallery).title}
+        {gallery.title}
       </div>
     </a>
   );
···
         )
         : <div class="w-full h-full bg-zinc-200 dark:bg-zinc-900" />}
       <div class="absolute bottom-0 left-0 bg-black/80 text-white p-2 hidden sm:flex items-center gap-2">
-        <ActorAvatar profile={gallery.creator} size={20} />{" "}
-        {(gallery.record as Gallery).title}
+        <ActorAvatar profile={gallery.creator} size={20} /> {gallery.title}
       </div>
     </a>
   );

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 { 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;
+  const title = item.gallery.title;
+  const description = item.gallery.description;
+  const facets = item.gallery.facets;
   return (
     <li>
       <div class="flex flex-col pb-4 max-w-md">

src/lib/actor.ts

···
 import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
 import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
 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 { Un$Typed } from "$lexicon/util.ts";
 import { BffContext, WithBffMeta } from "@bigmoves/bff";
 import { getFollow, getFollowersCount, getFollowsCount } from "./follow.ts";
 import {
   galleryToView,
-  getGalleryCount,
+  getGalleryCameras,
   getGalleryItemsAndPhotos,
 } from "./gallery.ts";
 import { photoToView, photoUrl } from "./photo.ts";
···
   );
   const followersCount = getFollowersCount(did, ctx);
   const followsCount = getFollowsCount(did, ctx);
-  const galleryCount = getGalleryCount(did, ctx);
+  const galleries = getActorGalleries(did, ctx);
+  const cameras = Array.from(
+    new Set(
+      galleries.flatMap((g) =>
+        getGalleryCameras(g.items?.filter(isPhotoView) ?? [])
+      ),
+    ),
+  ).sort((a, b) => a.localeCompare(b));
 
   let followedBy: string | undefined = "";
   let following: string | undefined = "";
···
   }
 
   return profileRecord
-    ? profileDetailedToView(
-      profileRecord,
-      actor.handle,
+    ? profileDetailedToView({
+      record: profileRecord,
+      handle: actor.handle,
+      cameras,
       followersCount,
       followsCount,
-      galleryCount,
-      {
+      galleryCount: galleries.length,
+      viewer: {
         followedBy,
         following,
       },
-    )
+    })
     : null;
 }
 
···
   handle: string,
 ): Un$Typed<ProfileView> {
   return {
+    cid: record.cid,
     did: record.did,
     handle,
     displayName: record.displayName,
···
   };
 }
 
-export function profileDetailedToView(
-  record: WithBffMeta<GrainProfile>,
-  handle: string,
-  followersCount: number,
-  followsCount: number,
-  galleryCount: number,
-  viewer: ViewerState,
-): Un$Typed<ProfileViewDetailed> {
+export function profileDetailedToView(params: {
+  record: WithBffMeta<GrainProfile>;
+  handle: string;
+  followersCount: number;
+  followsCount: number;
+  galleryCount: number;
+  viewer: ViewerState;
+  cameras?: string[];
+}): Un$Typed<ProfileViewDetailed> {
+  const {
+    record,
+    handle,
+    followersCount,
+    followsCount,
+    galleryCount,
+    viewer,
+    cameras,
+  } = params;
   return {
+    cid: record.cid,
     did: record.did,
     handle,
     displayName: record.displayName,
···
     followsCount,
     galleryCount,
     viewer,
+    cameras,
   };
 }
 

src/lib/gallery.ts

···
   favCount?: number;
   commentCount?: number;
   viewerState?: ViewerState;
+  cameras?: string[];
 }): $Typed<GalleryView> {
+  const viewItems = items
+    ?.map((item) => itemToView(record.did, item))
+    .filter(isPhotoView);
+  const cameras = getGalleryCameras(viewItems);
   return {
     $type: "social.grain.gallery.defs#galleryView",
     uri: record.uri,
     cid: record.cid,
     title: record.title,
     description: record.description,
+    cameras,
     facets: record.facets,
     creator,
     record,
-    items: items
-      ?.map((item) => itemToView(record.did, item))
-      .filter(isPhotoView),
+    items: viewItems,
     labels,
-    indexedAt: record.indexedAt,
     favCount,
     commentCount,
     viewer: viewerState,
+    createdAt: record.createdAt,
+    indexedAt: record.indexedAt,
   };
 }
 
···
 }
 
 export function getGalleryCameras(
-  gallery: GalleryView,
+  items: Array<PhotoWithExif | PhotoView>,
 ): string[] {
-  const photos = gallery.items?.filter(isPhotoView) ?? [];
   const cameras = new Set<string>();
-  for (const photo of photos) {
-    if (photo.exif?.make) {
-      cameras.add(`${photo.exif.make} ${photo.exif.model}`.trim());
+  if (!Array.isArray(items)) return [];
+  for (const item of items) {
+    const exif = "exif" in item ? item.exif : (item as PhotoView).exif;
+    if (exif?.make && exif?.model) {
+      cameras.add(`${exif.make} ${exif.model}`.trim());
     }
   }
   return Array.from(cameras);

src/meta.ts

···
-import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
 import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
 import { AtUri } from "@atproto/syntax";
···
         )
       }`,
     },
-    { property: "og:title", content: (gallery.record as Gallery).title },
+    { property: "og:title", content: gallery.title },
     {
       property: "og:description",
-      content: (gallery.record as Gallery).description,
+      content: gallery.description,
     },
     {
       property: "og:image",

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,
···
                 />
               )}
               {!comment && !photo && gallery &&
-                (gallery.record as Gallery).title}
+                gallery.title}
               {!comment && !photo && gallery
                 ? (
                   <div class="w-[200px] pointer-events-none">
···
               {gallery.creator
                 ? <div class="font-semibold">{gallery.creator.displayName}</div>
                 : null}
-              {(gallery.record as Gallery).title}
+              {gallery.title}
               <div class="w-[200px] pointer-events-none">
                 <GalleryPreviewLink
                   gallery={gallery}

src/routes/gallery.tsx

···
-import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
 import { BffContext, RouteHandler } from "@bigmoves/bff";
 import { GalleryPage } from "../components/GalleryPage.tsx";
 import { getGallery } from "../lib/gallery.ts";
···
   if (!gallery) return ctx.next();
 
   ctx.state.meta = [
-    { title: `${(gallery.record as Gallery).title} — Grain` },
+    { title: `${gallery.title} — Grain` },
     ...getPageMeta(galleryLink(handle, rkey)),
     ...getGalleryMeta(gallery),
   ];

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";
···
     gallery: GalleryView;
   }>,
 ) {
-  const title = (gallery.record as Gallery).title;
-  const description = (gallery.record as Gallery).description;
-  const facets = (gallery.record as Gallery).facets || [];
+  const title = gallery.title;
+  const description = gallery.description;
+  const facets = gallery.facets || [];
   return (
     <div class="flex flex-col gap-2" key={gallery.uri}>
       <ActorInfo profile={gallery.creator} />

src/routes/profile.tsx

···
 import {
   getActorGalleries,
   getActorGalleryFavs,
-  getActorProfile,
+  getActorProfileDetailed,
   getActorProfiles,
 } from "../lib/actor.ts";
-import { getFollow, getFollowers, getFollowing } from "../lib/follow.ts";
 import {
   isLabeler as isLabelerFn,
   moderateGallery,
···
   const isHxRequest = req.headers.get("hx-request") !== null;
   const render = isHxRequest ? ctx.html : ctx.render;
 
-  const profile = getActorProfile(actor.did, ctx);
+  const profile = getActorProfileDetailed(actor.did, 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) {
···
 
   if (!profile) return ctx.next();
 
-  let followUri: string | undefined;
   let actorProfiles: SocialNetwork[] = [];
   let userProfiles: SocialNetwork[] = [];
 
   if (ctx.currentUser) {
-    followUri = getFollow(profile.did, ctx.currentUser.did, ctx)?.uri;
     actorProfiles = getActorProfiles(ctx.currentUser.did, ctx);
   }
 
···
     const galleryFavs = getActorGalleryFavs(actor.did, ctx);
     return render(
       <ProfilePage
-        followersCount={followers.length}
-        followingCount={following.length}
         userProfiles={userProfiles}
         actorProfiles={actorProfiles}
-        followUri={followUri}
         loggedInUserDid={ctx.currentUser?.did}
         profile={profile}
         selectedTab="favs"
···
   }
   return render(
     <ProfilePage
-      followersCount={followers.length}
-      followingCount={following.length}
       userProfiles={userProfiles}
       actorProfiles={actorProfiles}
-      followUri={followUri}
       loggedInUserDid={ctx.currentUser?.did}
       profile={profile}
       descriptionFacets={descriptionFacets}