add bsky follow lexicon and button on profile

__generated__/index.ts

···
 export class AppBskyNS {
   _server: Server
   embed: AppBskyEmbedNS
+  graph: AppBskyGraphNS
   feed: AppBskyFeedNS
   richtext: AppBskyRichtextNS
   actor: AppBskyActorNS
···
   constructor(server: Server) {
     this._server = server
     this.embed = new AppBskyEmbedNS(server)
+    this.graph = new AppBskyGraphNS(server)
     this.feed = new AppBskyFeedNS(server)
     this.richtext = new AppBskyRichtextNS(server)
     this.actor = new AppBskyActorNS(server)
···
 }
 
 export class AppBskyEmbedNS {
+  _server: Server
+
+  constructor(server: Server) {
+    this._server = server
+  }
+}
+
+export class AppBskyGraphNS {
   _server: Server
 
   constructor(server: Server) {

__generated__/lexicons.ts

···
       },
     },
   },
+  AppBskyGraphFollow: {
+    lexicon: 1,
+    id: 'app.bsky.graph.follow',
+    defs: {
+      main: {
+        key: 'tid',
+        type: 'record',
+        record: {
+          type: 'object',
+          required: ['subject', 'createdAt'],
+          properties: {
+            subject: {
+              type: 'string',
+              format: 'did',
+            },
+            createdAt: {
+              type: 'string',
+              format: 'datetime',
+            },
+          },
+        },
+        description:
+          "Record declaring a social 'follow' relationship of another account. Duplicate follows will be ignored by the AppView.",
+      },
+    },
+  },
   AppBskyGraphDefs: {
     lexicon: 1,
     id: 'app.bsky.graph.defs',
···
   AppBskyEmbedRecordWithMedia: 'app.bsky.embed.recordWithMedia',
   AppBskyEmbedVideo: 'app.bsky.embed.video',
   AppBskyEmbedExternal: 'app.bsky.embed.external',
+  AppBskyGraphFollow: 'app.bsky.graph.follow',
   AppBskyGraphDefs: 'app.bsky.graph.defs',
   AppBskyFeedDefs: 'app.bsky.feed.defs',
   AppBskyFeedPostgate: 'app.bsky.feed.postgate',

__generated__/types/app/bsky/graph/follow.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 = 'app.bsky.graph.follow'
+
+export interface Record {
+  $type: 'app.bsky.graph.follow'
+  subject: 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)
+}

lexicons.json

···
     "app.feed.post",
     "app.bsky.feed.post",
     "app.bsky.actor.profile",
-    "app.bsky.actor.defs"
+    "app.bsky.actor.defs",
+    "app.bsky.graph.follow"
   ]
 }

lexicons/app/bsky/graph/follow.json

···
+{
+  "lexicon": 1,
+  "id": "app.bsky.graph.follow",
+  "defs": {
+    "main": {
+      "key": "tid",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": [
+          "subject",
+          "createdAt"
+        ],
+        "properties": {
+          "subject": {
+            "type": "string",
+            "format": "did"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      },
+      "description": "Record declaring a social 'follow' relationship of another account. Duplicate follows will be ignored by the AppView."
+    }
+  }
+}

main.tsx

···
 import { lexicons } from "$lexicon/lexicons.ts";
 import { Record as BskyProfile } from "$lexicon/types/app/bsky/actor/profile.ts";
+import { Record as BskyFollow } from "$lexicon/types/app/bsky/graph/follow.ts";
 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 Favorite } from "$lexicon/types/social/grain/favorite.ts";
···
       if (!actor) return ctx.next();
       const profile = getActorProfile(actor.did, ctx);
       if (!profile) return ctx.next();
+      let follow: WithBffMeta<BskyFollow> | undefined;
+      if (ctx.currentUser) {
+        follow = getFollow(
+          profile.did,
+          ctx.currentUser.did,
+          ctx,
+        );
+      }
       ctx.state.meta = [
         {
           title: profile.displayName
···
       if (tab) {
         return ctx.html(
           <ProfilePage
+            followUri={follow?.uri}
             loggedInUserDid={ctx.currentUser?.did}
             timelineItems={timelineItems}
             profile={profile}
···
       }
       return ctx.render(
         <ProfilePage
+          followUri={follow?.uri}
           loggedInUserDid={ctx.currentUser?.did}
           timelineItems={timelineItems}
           profile={profile}
···
             ? galleryLink(ctx.currentUser.handle, galleryRkey)
             : undefined}
         />,
+      );
+    }),
+    route("/follow/:did", ["POST"], async (_req, params, ctx) => {
+      requireAuth(ctx);
+      const did = params.did;
+      if (!did) return ctx.next();
+      const followUri = await ctx.createRecord<BskyFollow>(
+        "app.bsky.graph.follow",
+        {
+          subject: did,
+          createdAt: new Date().toISOString(),
+        },
+      );
+      return ctx.html(
+        <FollowButton followeeDid={did} followUri={followUri} />,
+      );
+    }),
+    route("/follow/:did/:rkey", ["DELETE"], async (_req, params, ctx) => {
+      requireAuth(ctx);
+      const did = params.did;
+      const rkey = params.rkey;
+      if (!did) return ctx.next();
+      await ctx.deleteRecord(
+        `at://${ctx.currentUser.did}/app.bsky.graph.follow/${rkey}`,
+      );
+      return ctx.html(
+        <FollowButton followeeDid={did} followUri={undefined} />,
       );
     }),
     route("/dialogs/gallery/new", (_req, _params, ctx) => {
···
   actorDid?: string;
 };
 
+function getFollow(followeeDid: string, followerDid: string, ctx: BffContext) {
+  const { items: [follow] } = ctx.indexService.getRecords<
+    WithBffMeta<BskyFollow>
+  >(
+    "app.bsky.graph.follow",
+    {
+      where: [
+        {
+          field: "did",
+          equals: followerDid,
+        },
+        {
+          field: "subject",
+          equals: followeeDid,
+        },
+      ],
+    },
+  );
+  return follow;
+}
+
 function getGalleryItemsAndPhotos(
   ctx: BffContext,
   galleries: WithBffMeta<Gallery>[],
···
   );
 }
 
+function FollowButton({
+  followeeDid,
+  followUri,
+}: Readonly<{ followeeDid: string; load?: boolean; followUri?: string }>) {
+  const isFollowing = followUri;
+  return (
+    <Button
+      variant="primary"
+      class={cn(
+        "w-full sm:w-fit",
+        isFollowing &&
+          "bg-zinc-200 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-800",
+      )}
+      {...(isFollowing
+        ? {
+          children: "Following",
+          "hx-delete": `/follow/${followeeDid}/${new AtUri(followUri).rkey}`,
+        }
+        : {
+          children: (
+            <>
+              <i class="fa-solid fa-plus mr-2" />Follow
+            </>
+          ),
+          "hx-post": `/follow/${followeeDid}`,
+        })}
+      hx-trigger="click"
+      hx-target="this"
+      hx-swap="outerHTML"
+    />
+  );
+}
+
 function ProfilePage({
+  followUri,
   loggedInUserDid,
   timelineItems,
   profile,
   selectedTab,
   galleries,
 }: Readonly<{
+  followUri?: string;
   loggedInUserDid?: string;
   timelineItems: TimelineItem[];
   profile: Un$Typed<ProfileView>;
   selectedTab?: string;
   galleries?: GalleryView[];
 }>) {
+  const isCreator = loggedInUserDid === profile.did;
   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="text-zinc-600 dark:text-zinc-500">@{profile.handle}</p>
           <p class="my-2">{profile.description}</p>
         </div>
-        {loggedInUserDid === profile.did
+        {!isCreator && loggedInUserDid
+          ? (
+            <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
+              <FollowButton followeeDid={profile.did} followUri={followUri} />
+            </div>
+          )
+          : null}
+        {isCreator
           ? (
             <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
               <Button variant="primary" class="w-full sm:w-fit" asChild>
···
 async function onSignedIn({ actor, ctx }: onSignedInArgs) {
   await ctx.backfillCollections(
     [actor.did],
-    [...ctx.cfg.collections!, "app.bsky.actor.profile"],
+    [
+      ...ctx.cfg.collections!,
+      "app.bsky.actor.profile",
+      "app.bsky.graph.follow",
+    ],
   );
 
   const profileResults = ctx.indexService.getRecords<Profile>(

static/styles.css

···
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-zinc-200 {
+    border-color: var(--color-zinc-200);
+  }
   .border-zinc-900 {
     border-color: var(--color-zinc-900);
   }