add grain follows, add follow graph filter, update follow button logic to show other atproto networks your user is connected to (e.g. tangled, bsky, grain, etc)

__generated__/index.ts

···
 export class Server {
   xrpc: XrpcServer
   app: AppNS
+  sh: ShNS
   social: SocialNS
   com: ComNS
 
   constructor(options?: XrpcOptions) {
     this.xrpc = createXrpcServer(schemas, options)
     this.app = new AppNS(this)
+    this.sh = new ShNS(this)
     this.social = new SocialNS(this)
     this.com = new ComNS(this)
   }
···
   }
 }
 
+export class ShNS {
+  _server: Server
+  tangled: ShTangledNS
+
+  constructor(server: Server) {
+    this._server = server
+    this.tangled = new ShTangledNS(server)
+  }
+}
+
+export class ShTangledNS {
+  _server: Server
+  graph: ShTangledGraphNS
+  actor: ShTangledActorNS
+
+  constructor(server: Server) {
+    this._server = server
+    this.graph = new ShTangledGraphNS(server)
+    this.actor = new ShTangledActorNS(server)
+  }
+}
+
+export class ShTangledGraphNS {
+  _server: Server
+
+  constructor(server: Server) {
+    this._server = server
+  }
+}
+
+export class ShTangledActorNS {
+  _server: Server
+
+  constructor(server: Server) {
+    this._server = server
+  }
+}
+
 export class SocialNS {
   _server: Server
   grain: SocialGrainNS
···
 export class SocialGrainNS {
   _server: Server
   gallery: SocialGrainGalleryNS
+  graph: SocialGrainGraphNS
   actor: SocialGrainActorNS
 
   constructor(server: Server) {
     this._server = server
     this.gallery = new SocialGrainGalleryNS(server)
+    this.graph = new SocialGrainGraphNS(server)
     this.actor = new SocialGrainActorNS(server)
   }
 }
 
 export class SocialGrainGalleryNS {
+  _server: Server
+
+  constructor(server: Server) {
+    this._server = server
+  }
+}
+
+export class SocialGrainGraphNS {
   _server: Server
 
   constructor(server: Server) {

__generated__/lexicons.ts

···
       },
     },
   },
+  ShTangledGraphFollow: {
+    lexicon: 1,
+    id: 'sh.tangled.graph.follow',
+    defs: {
+      main: {
+        type: 'record',
+        key: 'tid',
+        record: {
+          type: 'object',
+          required: ['subject', 'createdAt'],
+          properties: {
+            subject: {
+              type: 'string',
+              format: 'did',
+            },
+            createdAt: {
+              type: 'string',
+              format: 'datetime',
+            },
+          },
+        },
+      },
+    },
+  },
+  ShTangledActorProfile: {
+    lexicon: 1,
+    id: 'sh.tangled.actor.profile',
+    defs: {
+      main: {
+        type: 'record',
+        description: 'A declaration of a Tangled account profile.',
+        key: 'literal:self',
+        record: {
+          type: 'object',
+          required: ['bluesky'],
+          properties: {
+            description: {
+              type: 'string',
+              description: 'Free-form profile description text.',
+              maxGraphemes: 256,
+              maxLength: 2560,
+            },
+            links: {
+              type: 'array',
+              minLength: 0,
+              maxLength: 5,
+              items: {
+                type: 'string',
+                description:
+                  'Any URI, intended for social profiles or websites, can be used to link DIDs/AT-URIs too.',
+              },
+            },
+            stats: {
+              type: 'array',
+              minLength: 0,
+              maxLength: 2,
+              items: {
+                type: 'string',
+                description: 'Vanity stats.',
+                enum: [
+                  'merged-pull-request-count',
+                  'closed-pull-request-count',
+                  'open-pull-request-count',
+                  'open-issue-count',
+                  'closed-issue-count',
+                  'repository-count',
+                ],
+              },
+            },
+            bluesky: {
+              type: 'boolean',
+              description: 'Include link to this account on Bluesky.',
+            },
+            location: {
+              type: 'string',
+              description: 'Free-form location text.',
+              maxGraphemes: 40,
+              maxLength: 400,
+            },
+            pinnedRepositories: {
+              type: 'array',
+              description:
+                'Any ATURI, it is up to appviews to validate these fields.',
+              minLength: 0,
+              maxLength: 6,
+              items: {
+                type: 'string',
+                format: 'at-uri',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
   SocialGrainDefs: {
     lexicon: 1,
     id: 'social.grain.defs',
···
             description: {
               type: 'string',
               maxLength: 1000,
+            },
+            createdAt: {
+              type: 'string',
+              format: 'datetime',
+            },
+          },
+        },
+      },
+    },
+  },
+  SocialGrainGraphFollow: {
+    lexicon: 1,
+    id: 'social.grain.graph.follow',
+    defs: {
+      main: {
+        key: 'tid',
+        type: 'record',
+        record: {
+          type: 'object',
+          required: ['subject', 'createdAt'],
+          properties: {
+            subject: {
+              type: 'string',
+              format: 'did',
             },
             createdAt: {
               type: 'string',
···
   AppBskyActorDefs: 'app.bsky.actor.defs',
   AppBskyActorProfile: 'app.bsky.actor.profile',
   AppBskyLabelerDefs: 'app.bsky.labeler.defs',
+  ShTangledGraphFollow: 'sh.tangled.graph.follow',
+  ShTangledActorProfile: 'sh.tangled.actor.profile',
   SocialGrainDefs: 'social.grain.defs',
   SocialGrainNotificationDefs: 'social.grain.notification.defs',
   SocialGrainGalleryItem: 'social.grain.gallery.item',
   SocialGrainGalleryDefs: 'social.grain.gallery.defs',
   SocialGrainGallery: 'social.grain.gallery',
+  SocialGrainGraphFollow: 'social.grain.graph.follow',
   SocialGrainFavorite: 'social.grain.favorite',
   SocialGrainActorDefs: 'social.grain.actor.defs',
   SocialGrainActorProfile: 'social.grain.actor.profile',

__generated__/types/sh/tangled/actor/profile.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 = 'sh.tangled.actor.profile'
+
+export interface Record {
+  $type: 'sh.tangled.actor.profile'
+  /** Free-form profile description text. */
+  description?: string
+  links?: string[]
+  stats?:
+    | 'merged-pull-request-count'
+    | 'closed-pull-request-count'
+    | 'open-pull-request-count'
+    | 'open-issue-count'
+    | 'closed-issue-count'
+    | 'repository-count'[]
+  /** Include link to this account on Bluesky. */
+  bluesky: boolean
+  /** Free-form location text. */
+  location?: string
+  /** Any ATURI, it is up to appviews to validate these fields. */
+  pinnedRepositories?: 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/sh/tangled/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 = 'sh.tangled.graph.follow'
+
+export interface Record {
+  $type: 'sh.tangled.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)
+}

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

deno.json

···
     "dev": "deno run \"dev:*\"",
     "dev:server": "deno run -A --env-file=.env --watch ./src/main.tsx",
     "dev:tailwind": "deno run -A --node-modules-dir npm:@tailwindcss/cli -i ./src/input.css -o ./static/styles.css --watch",
-    "sync": "deno run -A --env=.env jsr:@bigmoves/bff-cli@0.3.0-beta.30 sync --collections=social.grain.gallery,social.grain.actor.profile,social.grain.photo,social.grain.favorite,social.grain.gallery.item --external-collections=app.bsky.actor.profile,app.bsky.graph.follow",
+    "sync": "deno run -A --env=.env jsr:@bigmoves/bff-cli@0.3.0-beta.30 sync --collections=social.grain.gallery,social.grain.actor.profile,social.grain.photo,social.grain.favorite,social.grain.gallery.item,social.grain.graph.follow --external-collections=app.bsky.actor.profile,app.bsky.graph.follow,sh.tangled.graph.follow,sh.tangled.actor.profile",
     "codegen": "deno run -A jsr:@bigmoves/bff-cli@0.3.0-beta.30 lexgen"
   },
   "compilerOptions": {

deno.lock

···
     "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/lex-cli@*": "0.8.1",
     "npm:@atproto/lexicon@*": "0.4.11",
     "npm:@atproto/lexicon@~0.4.11": "0.4.11",
     "npm:@atproto/oauth-client@~0.3.13": "0.3.16",
···
         "multiformats@9.9.0",
         "zod"
       ]
+    },
+    "@atproto/lex-cli@0.8.1": {
+      "integrity": "sha512-0Ns6kX46gum2jU8bpvWCSVqoYhjmJrOGR/NLfLHgPbJtBlyxMGQAxqpy1x6zOi6SkkRGWYhHvRfr5J8lTHbxjA==",
+      "dependencies": [
+        "@atproto/lexicon",
+        "@atproto/syntax",
+        "chalk",
+        "commander",
+        "prettier",
+        "ts-morph",
+        "yesno",
+        "zod"
+      ],
+      "bin": true
     },
     "@atproto/lexicon@0.4.11": {
       "integrity": "sha512-btefdnvNz2Ao2I+qbmj0F06HC8IlrM/IBz6qOBS50r0S6uDf5tOO+Mv2tSVdimFkdzyDdLtBI1sV36ONxz2cOw==",
···
       ],
       "scripts": true
     },
+    "@ts-morph/common@0.25.0": {
+      "integrity": "sha512-kMnZz+vGGHi4GoHnLmMhGNjm44kGtKUXGnOvrKmMwAuvNjM/PgKVGfUnL7IDvK7Jb2QQ82jq3Zmp04Gy+r3Dkg==",
+      "dependencies": [
+        "minimatch",
+        "path-browserify",
+        "tinyglobby"
+      ]
+    },
     "@tybys/wasm-util@0.9.0": {
       "integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==",
       "dependencies": [
···
       "dependencies": [
         "mime-types",
         "negotiator"
+      ]
+    },
+    "ansi-styles@4.3.0": {
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": [
+        "color-convert"
       ]
     },
     "array-flatten@1.1.1": {
···
     "await-lock@2.2.2": {
       "integrity": "sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw=="
     },
+    "balanced-match@1.0.2": {
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
     "base64-js@1.5.1": {
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
···
         "raw-body",
         "type-is",
         "unpipe"
+      ]
+    },
+    "brace-expansion@2.0.1": {
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": [
+        "balanced-match"
       ]
     },
     "braces@3.0.3": {
···
       "integrity": "sha512-b3tFPA9pUr2zCUiCfRd2+wok2/LBSNUMKOuRRok+WlvvAgEt/PlbgPTsZUcwCOs53IJvLgTp0eotwtosE6njug==",
       "bin": true
     },
+    "chalk@4.1.2": {
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": [
+        "ansi-styles",
+        "supports-color"
+      ]
+    },
     "chownr@3.0.0": {
       "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="
     },
     "clsx@2.1.1": {
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
     },
+    "code-block-writer@13.0.3": {
+      "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg=="
+    },
+    "color-convert@2.0.1": {
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": [
+        "color-name"
+      ]
+    },
+    "color-name@1.1.4": {
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "commander@9.5.0": {
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="
+    },
     "content-disposition@0.5.4": {
       "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "dependencies": [
···
     "fast-redact@3.5.0": {
       "integrity": "sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A=="
     },
+    "fdir@6.4.4_picomatch@4.0.2": {
+      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
+      "dependencies": [
+        "picomatch@4.0.2"
+      ],
+      "optionalPeers": [
+        "picomatch@4.0.2"
+      ]
+    },
     "fill-range@7.1.1": {
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": [
···
     "graphemer@1.4.0": {
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
     },
+    "has-flag@4.0.0": {
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+    },
     "has-symbols@1.1.0": {
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ=="
     },
···
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dependencies": [
         "braces",
-        "picomatch"
+        "picomatch@2.3.1"
       ]
     },
     "mime-db@1.52.0": {
···
     "mime@1.6.0": {
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
       "bin": true
+    },
+    "minimatch@9.0.5": {
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dependencies": [
+        "brace-expansion"
+      ]
     },
     "minipass@7.1.2": {
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="
···
     "parseurl@1.3.3": {
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
+    "path-browserify@1.0.1": {
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
+    },
     "path-to-regexp@0.1.12": {
       "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
     },
···
     "picomatch@2.3.1": {
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
+    "picomatch@4.0.2": {
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg=="
+    },
     "pino-abstract-transport@1.2.0": {
       "integrity": "sha512-Guhh8EZfPCfH+PMXAb6rKOjGQEoy0xlAIn+irODG5kgfYV+BQ0rGYYWTIel3P5mmyXqkYkPmdIkywsn6QKUR1Q==",
       "dependencies": [
···
     },
     "preact@10.26.6": {
       "integrity": "sha512-5SRRBinwpwkaD+OqlBDeITlRgvd8I8QlxHJw9AxSdMNV6O+LodN9nUyYGpSF7sadHjs6RzeFShMexC6DbtWr9g=="
+    },
+    "prettier@3.5.3": {
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "bin": true
     },
     "process-warning@3.0.0": {
       "integrity": "sha512-mqn0kFRl0EoqhnL0GQ0veqFHyIN1yig9RHh/InzORTUiZHFRAur+aMtRkELNwGs9aNwKS6tg/An4NYBPGwvtzQ=="
···
         "tslib@2.4.0"
       ]
     },
+    "supports-color@7.2.0": {
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": [
+        "has-flag"
+      ]
+    },
     "tailwind-merge@3.3.0": {
       "integrity": "sha512-fyW/pEfcQSiigd5SNn0nApUOxx0zB/dm6UDU/rEwc2c3sX2smWUNbapHv+QRqLGVp9GWX3THIa7MUGPo+YkDzQ=="
     },
···
         "real-require"
       ]
     },
+    "tinyglobby@0.2.13_picomatch@4.0.2": {
+      "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
+      "dependencies": [
+        "fdir",
+        "picomatch@4.0.2"
+      ]
+    },
     "tlds@1.259.0": {
       "integrity": "sha512-AldGGlDP0PNgwppe2quAvuBl18UcjuNtOnDuUkqhd6ipPqrYYBt3aTxK1QTsBVknk97lS2JcafWMghjGWFtunw==",
       "bin": true
···
     },
     "toidentifier@1.0.1": {
       "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
+    },
+    "ts-morph@24.0.0": {
+      "integrity": "sha512-2OAOg/Ob5yx9Et7ZX4CvTCc0UFoZHwLEJ+dpDPSUi5TgwwlTlX47w+iFRrEwzUZwYACjq83cgjS/Da50Ga37uw==",
+      "dependencies": [
+        "@ts-morph/common",
+        "code-block-writer"
+      ]
     },
     "tslib@2.4.0": {
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
···
     },
     "yallist@5.0.0": {
       "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="
+    },
+    "yesno@0.4.0": {
+      "integrity": "sha512-tdBxmHvbXPBKYIg81bMCB7bVeDmHkRzk5rVJyYYXurwKkHq/MCd8rz4HSJUP7hW0H2NlXiq8IFiWvYKEHhlotA=="
     },
     "zod@3.25.7": {
       "integrity": "sha512-YGdT1cVRmKkOg6Sq7vY7IkxdphySKnXhaUmFI4r4FcuFVNgpCb9tZfNwXbT6BPjD5oz0nubFsoo9pIqKrDcCvg=="

lexicons/sh/tangled/actor/profile.json

···
+{
+  "lexicon": 1,
+  "id": "sh.tangled.actor.profile",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "A declaration of a Tangled account profile.",
+      "key": "literal:self",
+      "record": {
+        "type": "object",
+        "required": [
+          "bluesky"
+        ],
+        "properties": {
+          "description": {
+            "type": "string",
+            "description": "Free-form profile description text.",
+            "maxGraphemes": 256,
+            "maxLength": 2560
+          },
+          "links": {
+            "type": "array",
+            "minLength": 0,
+            "maxLength": 5,
+            "items": {
+              "type": "string",
+              "description": "Any URI, intended for social profiles or websites, can be used to link DIDs/AT-URIs too."
+            }
+          },
+          "stats": {
+            "type": "array",
+            "minLength": 0,
+            "maxLength": 2,
+            "items": {
+              "type": "string",
+              "description": "Vanity stats.",
+              "enum": [
+                "merged-pull-request-count",
+                "closed-pull-request-count",
+                "open-pull-request-count",
+                "open-issue-count",
+                "closed-issue-count",
+                "repository-count"
+              ]
+            }
+          },
+          "bluesky": {
+            "type": "boolean",
+            "description": "Include link to this account on Bluesky."
+          },
+          "location": {
+            "type": "string",
+            "description": "Free-form location text.",
+            "maxGraphemes": 40,
+            "maxLength": 400
+          },
+          "pinnedRepositories": {
+            "type": "array",
+            "description": "Any ATURI, it is up to appviews to validate these fields.",
+            "minLength": 0,
+            "maxLength": 6,
+            "items": {
+              "type": "string",
+              "format": "at-uri"
+            }
+          }
+        }
+      }
+    }
+  }
+}

lexicons/sh/tangled/graph/follow.json

···
+{
+  "lexicon": 1,
+  "id": "sh.tangled.graph.follow",
+  "defs": {
+    "main": {
+      "type": "record",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": [
+          "subject",
+          "createdAt"
+        ],
+        "properties": {
+          "subject": {
+            "type": "string",
+            "format": "did"
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      }
+    }
+  }
+}

lexicons/social/grain/graph/follow.json

···
+{
+  "lexicon": 1,
+  "id": "social.grain.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"
+          }
+        }
+      }
+    }
+  }
+}

src/components/FollowButton.tsx

···
-import { AtUri } from "@atproto/syntax";
 import { Button, cn } from "@bigmoves/bff/components";
+import type { SocialNetwork } from "../lib/timeline.ts";
+import { formatGraphName } from "./Timeline.tsx";
 
 export function FollowButton({
   followeeDid,
   followUri,
-}: Readonly<{ followeeDid: string; load?: boolean; followUri?: string }>) {
+  collection,
+  class: classProp,
+}: Readonly<
+  {
+    followeeDid: string;
+    followUri?: string;
+    collection?: string;
+    class?: string;
+  }
+>) {
   const isFollowing = followUri;
+  let followPostUrl = `/actions/follow/${followeeDid}`;
+  const hideCollectionParam = !collection ? "&hideCollection=true" : "";
+  const followDeleteUrl = followUri
+    ? `/actions/follow/${followeeDid}?uri=${
+      encodeURIComponent(followUri)
+    }${hideCollectionParam}`
+    : undefined;
+  if (collection) {
+    followPostUrl += `?collection=${encodeURIComponent(collection)}`;
+  } else {
+    followPostUrl += `?collection=${
+      encodeURIComponent("social.grain.graph.follow")
+    }${hideCollectionParam}`;
+  }
+  const source = formatGraphName(sourceForCollection(collection || ""));
+
   return (
     <Button
+      id="follow-botton"
       variant="primary"
       class={cn(
         "w-full sm:w-fit whitespace-nowrap",
         isFollowing &&
           "bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 text-zinc-950 dark:text-zinc-50",
+        classProp,
       )}
       {...(isFollowing
         ? {
-          children: "Following",
-          "hx-delete": `/actions/follow/${followeeDid}/${
-            new AtUri(followUri).rkey
-          }`,
+          children: source ? `Following on ${source}` : "Following",
+          "hx-delete": followDeleteUrl,
         }
         : {
           children: (
             <>
               <i class="fa-solid fa-plus mr-2" />
-              Follow
+              {source ? `Follow on ${source}` : "Follow"}
             </>
           ),
-          "hx-post": `/actions/follow/${followeeDid}`,
+          "hx-post": followPostUrl,
         })}
       hx-trigger="click"
       hx-target="this"
···
     />
   );
 }
+
+function sourceForCollection(collection: string): SocialNetwork | "" {
+  switch (collection) {
+    case "app.bsky.graph.follow":
+      return "bluesky";
+    case "social.grain.graph.follow":
+      return "grain";
+    case "sh.tangled.graph.follow":
+      return "tangled";
+    default:
+      return "";
+  }
+}

src/components/FollowsButton.tsx

···
+import { Button, cn } from "@bigmoves/bff/components";
+import { FollowMap } from "../lib/follow.ts";
+import type { SocialNetwork } from "../lib/timeline.ts";
+import { collectionForSource } from "./FollowsDialog.tsx";
+
+export function FollowsButton({
+  actorProfiles,
+  followeeDid,
+  followMap,
+}: Readonly<
+  {
+    actorProfiles: SocialNetwork[];
+    followeeDid: string;
+    followMap: FollowMap;
+  }
+>) {
+  const followSources = followMap
+    ? (Object.keys(followMap) as Array<keyof typeof followMap>).filter(
+      (source) => followMap[source] !== undefined,
+    )
+    : [];
+  const isFollowing = followSources.length > 0;
+  const totalSources = actorProfiles.length;
+  const followingCount =
+    actorProfiles.filter((source) =>
+      !!followMap[collectionForSource(source) as keyof typeof followMap]
+    ).length;
+  return (
+    <Button
+      id="follows-button"
+      variant="primary"
+      class={cn(
+        "w-full sm:w-fit whitespace-nowrap",
+        isFollowing &&
+          "bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 text-zinc-950 dark:text-zinc-50",
+      )}
+      hx-get={`/dialogs/follows/${followeeDid}`}
+      hx-trigger="click"
+      hx-target="#layout"
+      hx-swap="afterbegin"
+      {...(isFollowing
+        ? {
+          children: (
+            <>
+              Following ({followingCount}/{totalSources})
+            </>
+          ),
+        }
+        : {
+          children: (
+            <>
+              <i class="fa-solid fa-plus mr-2" />
+              Follow ({followingCount}/{totalSources})
+            </>
+          ),
+        })}
+    />
+  );
+}

src/components/FollowsDialog.tsx

···
+import { Dialog } from "@bigmoves/bff/components";
+import { type FollowMap } from "../lib/follow.ts";
+import type { SocialNetwork } from "../lib/timeline.ts";
+import { FollowButton } from "./FollowButton.tsx";
+
+export function FollowsDialog(
+  { sources, followeeDid, followMap }: Readonly<
+    { sources: SocialNetwork[]; followeeDid: string; followMap: FollowMap }
+  >,
+) {
+  return (
+    <Dialog class="z-100" _="on closeDialog call window.location.reload()">
+      <Dialog.Content class="dark:bg-zinc-950 relative">
+        <Dialog.X />
+        <Dialog.Title>Follow</Dialog.Title>
+        <ul class="w-full my-4 space-y-2">
+          {sources.map((source) => {
+            const collection = collectionForSource(source);
+            return (
+              <li key={source} class="w-full">
+                <FollowButton
+                  class="sm:w-full"
+                  collection={collection}
+                  followeeDid={followeeDid}
+                  followUri={followMap[collection as keyof FollowMap]}
+                />
+              </li>
+            );
+          })}
+        </ul>
+        <Dialog.Close class="w-full mt-2">
+          Close
+        </Dialog.Close>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+export function collectionForSource(source: SocialNetwork): string {
+  switch (source) {
+    case "bluesky":
+      return "app.bsky.graph.follow";
+    case "grain":
+      return "social.grain.graph.follow";
+    case "tangled":
+      return "sh.tangled.graph.follow";
+    default:
+      return "";
+  }
+}

src/components/ProfilePage.tsx

···
 import { Un$Typed } from "$lexicon/util.ts";
 import { AtUri } from "@atproto/syntax";
 import { Button, cn } from "@bigmoves/bff/components";
-import { TimelineItem } from "../lib/timeline.ts";
+import { FollowMap } from "../lib/follow.ts";
+import type { SocialNetwork, TimelineItem } from "../lib/timeline.ts";
 import { bskyProfileLink, galleryLink, profileLink } from "../utils.ts";
 import { ActorAvatar } from "./ActorAvatar.tsx";
 import { AvatarButton } from "./AvatarButton.tsx";
 import { FollowButton } from "./FollowButton.tsx";
+import { FollowsButton } from "./FollowsButton.tsx";
 import { TimelineItem as Item } from "./TimelineItem.tsx";
 
 export type ProfileTabs = "favs" | "galleries" | null;
 
 export function ProfilePage({
-  followUri,
+  userProfiles,
+  actorProfiles,
+  followMap,
   loggedInUserDid,
   timelineItems,
   profile,
···
   galleries,
   galleryFavs,
 }: Readonly<{
-  followUri?: string;
+  userProfiles: SocialNetwork[];
+  actorProfiles: SocialNetwork[];
+  followMap: FollowMap;
   loggedInUserDid?: string;
   timelineItems: TimelineItem[];
   profile: Un$Typed<ProfileView>;
···
 }>) {
   const isCreator = loggedInUserDid === profile.did;
   const displayName = profile.displayName || profile.handle;
+  const grainOnly = actorProfiles.length === 1 &&
+    actorProfiles.includes("grain");
+  const profilesIntersection = userProfiles.filter((p) =>
+    actorProfiles.includes(p)
+  );
   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="mt-2 sm:max-w-[500px]">{profile.description}</p>
             : null}
           <p>
-            <a
-              href={bskyProfileLink(profile.handle)}
-              class="text-xs hover:underline"
-            >
-              <i class="fa-brands fa-bluesky text-sky-500" /> @{profile.handle}
-            </a>
+            {userProfiles.includes("bluesky") && (
+              <a
+                href={bskyProfileLink(profile.handle)}
+                class="text-xs hover:underline"
+              >
+                <i class="fa-brands fa-bluesky text-sky-500" />{" "}
+                @{profile.handle}
+              </a>
+            )}
           </p>
         </div>
         {!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} />
+              {grainOnly
+                ? (
+                  <FollowButton
+                    followeeDid={profile.did}
+                    followUri={followMap["social.grain.graph.follow"]}
+                  />
+                )
+                : (
+                  <FollowsButton
+                    actorProfiles={profilesIntersection}
+                    followeeDid={profile.did}
+                    followMap={followMap}
+                  />
+                )}
             </div>
           )
           : null}

src/components/Timeline.tsx

···
 import { TimelineItem as Item } from "./TimelineItem.tsx";
 
 export function Timeline(
-  { isLoggedIn, selectedTab, items }: Readonly<
-    { isLoggedIn: boolean; selectedTab: string; items: TimelineItem[] }
+  { isLoggedIn, selectedTab, items, actorProfiles, selectedGraph }: Readonly<
+    {
+      isLoggedIn: boolean;
+      selectedTab: string;
+      items: TimelineItem[];
+      actorProfiles: string[];
+      selectedGraph: string;
+    }
   >,
 ) {
   return (
···
               <div class="flex sm:w-fit">
                 <button
                   type="button"
-                  hx-get="/"
-                  hx-target="body"
+                  hx-get={`/?graph=${selectedGraph}`}
+                  hx-target="#timeline-page"
                   hx-swap="outerHTML"
                   class={cn(
                     "flex-1 py-2 sm:min-w-[120px] px-4 cursor-pointer font-semibold",
···
                 </button>
                 <button
                   type="button"
-                  hx-get="/?tab=following"
+                  hx-get={`/?tab=following&graph=${selectedGraph}`}
                   hx-target="#timeline-page"
                   hx-swap="outerHTML"
                   class={cn(
···
               </div>
             </div>
             <div id="tab-content" role="tabpanel">
+              {actorProfiles.length > 1 && selectedTab === "following"
+                ? (
+                  <form
+                    hx-get="/"
+                    hx-target="#timeline-page"
+                    hx-swap="outerHTML"
+                    hx-trigger="change from:#graph-filter"
+                    class="mb-4 flex flex-col border-b border-zinc-200 dark:border-zinc-800 pb-4"
+                  >
+                    <label
+                      htmlFor="graph-filter"
+                      class="mb-1 font-medium sr-only"
+                    >
+                      Filter by AT Protocol Social Network
+                    </label>
+
+                    <input type="hidden" name="tab" value={selectedTab || ""} />
+
+                    <select
+                      id="graph-filter"
+                      name="graph"
+                      class="border rounded px-2 py-1 dark:bg-zinc-900 dark:border-zinc-700 max-w-md"
+                    >
+                      {actorProfiles.map((graph) => (
+                        <option
+                          value={graph}
+                          key={graph}
+                          selected={graph === selectedGraph}
+                        >
+                          {formatGraphName(graph)}
+                        </option>
+                      ))}
+                    </select>
+                  </form>
+                )
+                : null}
               <ul class="space-y-4 relative divide-zinc-200 dark:divide-zinc-800 divide-y w-fit">
-                {items.map((item) => <Item item={item} key={item.itemUri} />)}
+                {items.length > 0
+                  ? items.map((item) => <Item item={item} key={item.itemUri} />)
+                  : (
+                    <li class="text-center">
+                      No galleries by people you follow on{" "}
+                      {formatGraphName(selectedGraph)} yet.
+                    </li>
+                  )}
               </ul>
             </div>
           </>
···
     </div>
   );
 }
+
+export function formatGraphName(graph: string): string {
+  return graph.charAt(0).toUpperCase() + graph.slice(1);
+}

src/lib/actor.ts

···
+import { Record as BskyProfile } from "$lexicon/types/app/bsky/actor/profile.ts";
+import { Record as TangledProfile } from "$lexicon/types/sh/tangled/actor/profile.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 GrainProfile } from "$lexicon/types/social/grain/actor/profile.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 { BffContext, WithBffMeta } from "@bigmoves/bff";
 import { galleryToView, getGalleryItemsAndPhotos } from "./gallery.ts";
 import { photoToView } from "./photo.ts";
+import type { SocialNetwork } from "./timeline.ts";
 
 export function getActorProfile(did: string, ctx: BffContext) {
   const actor = ctx.indexService.getActor(did);
   if (!actor) return null;
-  const profileRecord = ctx.indexService.getRecord<WithBffMeta<Profile>>(
+  const profileRecord = ctx.indexService.getRecord<WithBffMeta<GrainProfile>>(
     `at://${did}/social.grain.actor.profile/self`,
   );
   return profileRecord ? profileToView(profileRecord, actor.handle) : null;
 }
 
 export function profileToView(
-  record: WithBffMeta<Profile>,
+  record: WithBffMeta<GrainProfile>,
   handle: string,
 ): Un$Typed<ProfileView> {
   return {
···
     new Set(galleries.map((gallery) => gallery.did)),
   );
 
-  const { items: profiles } = ctx.indexService.getRecords<WithBffMeta<Profile>>(
+  const { items: profiles } = ctx.indexService.getRecords<
+    WithBffMeta<GrainProfile>
+  >(
     "social.grain.actor.profile",
     {
       where: [{ field: "did", in: uniqueDids }],
···
     })
     .filter((g) => g !== null);
 }
+
+export function getActorProfiles(
+  handleOrDid: string,
+  ctx: BffContext,
+): SocialNetwork[] {
+  let did: string;
+
+  if (handleOrDid.includes("did:")) {
+    did = handleOrDid;
+  } else {
+    const actor = ctx.indexService.getActorByHandle(handleOrDid);
+    if (!actor) return [];
+    did = actor.did;
+  }
+
+  const { items: grainProfiles } = ctx.indexService.getRecords<
+    WithBffMeta<GrainProfile>
+  >(
+    "social.grain.actor.profile",
+    {
+      where: {
+        AND: [
+          { field: "did", equals: did },
+          { field: "uri", contains: "self" },
+        ],
+      },
+    },
+  );
+
+  const { items: tangledProfiles } = ctx.indexService.getRecords<
+    WithBffMeta<TangledProfile>
+  >(
+    "sh.tangled.actor.profile",
+    {
+      where: {
+        AND: [
+          { field: "did", equals: did },
+          { field: "uri", contains: "self" },
+        ],
+      },
+    },
+  );
+
+  const { items: bskyProfiles } = ctx.indexService.getRecords<
+    WithBffMeta<BskyProfile>
+  >(
+    "app.bsky.actor.profile",
+    {
+      where: {
+        AND: [
+          { field: "did", equals: did },
+          { field: "uri", contains: "self" },
+        ],
+      },
+    },
+  );
+
+  const profiles: SocialNetwork[] = [];
+  if (grainProfiles.length) profiles.push("grain");
+  if (bskyProfiles.length) profiles.push("bluesky");
+  if (tangledProfiles.length) profiles.push("tangled");
+  return profiles;
+}

src/lib/follow.ts

···
 import { Record as BskyFollow } from "$lexicon/types/app/bsky/graph/follow.ts";
+import { Record as TangledFollow } from "$lexicon/types/sh/tangled/graph/follow.ts";
+import { Record as GrainFollow } from "$lexicon/types/social/grain/graph/follow.ts";
 import { BffContext, WithBffMeta } from "@bigmoves/bff";
 
-export function getFollow(
+export type FollowSource =
+  | "app.bsky.graph.follow"
+  | "sh.tangled.graph.follow"
+  | "social.grain.graph.follow";
+
+export type FollowMap = Record<FollowSource, string>;
+
+export function getFollows(
   followeeDid: string,
   followerDid: string,
   ctx: BffContext,
-) {
-  const {
-    items: [follow],
-  } = ctx.indexService.getRecords<WithBffMeta<BskyFollow>>(
+): FollowMap {
+  const sources: FollowSource[] = [
     "app.bsky.graph.follow",
-    {
+    "sh.tangled.graph.follow",
+    "social.grain.graph.follow",
+  ];
+
+  const result: FollowMap = {} as FollowMap;
+
+  for (const source of sources) {
+    const {
+      items: [follow],
+    } = ctx.indexService.getRecords<
+      WithBffMeta<BskyFollow | GrainFollow | TangledFollow>
+    >(source, {
       where: [
         {
           field: "did",
···
           equals: followeeDid,
         },
       ],
-    },
-  );
-  return follow;
+    });
+    if (follow && "uri" in follow) {
+      result[source] = follow.uri;
+    }
+  }
+  return result;
 }

src/lib/timeline.ts

···
 import { Record as BskyFollow } from "$lexicon/types/app/bsky/graph/follow.ts";
+import { Record as TangledFollow } from "$lexicon/types/sh/tangled/graph/follow.ts";
 import { ProfileView } from "$lexicon/types/social/grain/actor/defs.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 GrainFollow } from "$lexicon/types/social/grain/graph/follow.ts";
 import { Un$Typed } from "$lexicon/util.ts";
 import { AtUri } from "@atproto/syntax";
 import { BffContext, QueryOptions, WithBffMeta } from "@bigmoves/bff";
 import { getActorProfile } from "./actor.ts";
 import { galleryToView, getGalleryItemsAndPhotos } from "./gallery.ts";
 
-type TimelineItemType = "gallery";
+export type TimelineItemType = "gallery";
+
+export type SocialNetwork = "bluesky" | "grain" | "tangled";
 
 export type TimelineItem = {
   createdAt: string;
···
     ? [{ field: "did", equals: options.actorDid }]
     : undefined;
 
-  if (options?.followingDids && options.followingDids.size > 0) {
-    whereClause = [
-      ...(whereClause ?? []),
-      { field: "did", in: Array.from(options.followingDids) },
-    ];
+  if (options?.followingDids) {
+    if (options.followingDids.size > 0) {
+      whereClause = [
+        ...(whereClause ?? []),
+        { field: "did", in: Array.from(options.followingDids) },
+      ];
+    } else {
+      return [];
+    }
   }
 
   const { items: galleries } = ctx.indexService.getRecords<
···
   );
 }
 
-function getFollowingDids(ctx: BffContext): Set<string> {
+function getFollowingDids(type: SocialNetwork, ctx: BffContext): Set<string> {
   if (!ctx.currentUser?.did) return new Set();
+  const typeToCollection: Record<SocialNetwork, string> = {
+    bluesky: "app.bsky.graph.follow",
+    grain: "social.grain.graph.follow",
+    tangled: "sh.tangled.graph.follow",
+  };
+  const collection = typeToCollection[type];
+  if (!collection) {
+    throw new Error(`Unsupported social graph type: ${type}`);
+  }
   const { items: follows } = ctx.indexService.getRecords<
-    WithBffMeta<BskyFollow>
+    WithBffMeta<BskyFollow | GrainFollow | TangledFollow>
   >(
-    "app.bsky.graph.follow",
+    collection,
     { where: [{ field: "did", equals: ctx.currentUser.did }] },
   );
   return new Set(follows.map((f) => f.subject).filter(Boolean));
···
 
 export function getTimeline(
   ctx: BffContext,
-  type: "timeline" | "following" = "timeline",
+  type: "timeline" | "following",
+  graph: SocialNetwork,
 ): TimelineItem[] {
   let followingDids: Set<string> | undefined = undefined;
   if (type === "following") {
-    followingDids = getFollowingDids(ctx);
+    followingDids = getFollowingDids(graph, ctx);
   }
   const galleryItems = processGalleries(ctx, { followingDids });
   return galleryItems.sort(

src/main.tsx

···
     "social.grain.photo",
     "social.grain.favorite",
     "social.grain.gallery.item",
+    "social.grain.graph.follow",
   ],
   externalCollections: [
     "app.bsky.actor.profile",
     "app.bsky.graph.follow",
+    "sh.tangled.actor.profile",
+    "sh.tangled.graph.follow",
   ],
   jetstreamUrl: JETSTREAM.WEST_1,
   lexicons,
···
       "/dialogs/photo-select/:galleryRkey",
       dialogHandlers.galleryPhotoSelect,
     ),
+    route("/dialogs/follows/:followeeDid", dialogHandlers.follows),
     route("/actions/update-seen", ["POST"], actionHandlers.updateSeen),
     route("/actions/follow/:did", ["POST"], actionHandlers.follow),
     route(
-      "/actions/follow/:followeeDid/:rkey",
+      "/actions/follow/:followeeDid",
       ["DELETE"],
       actionHandlers.unfollow,
     ),

src/routes/actions.tsx

···
 import { PhotoButton } from "../components/PhotoButton.tsx";
 import { PhotoPreview } from "../components/PhotoPreview.tsx";
 import { PhotoSelectButton } from "../components/PhotoSelectButton.tsx";
+import { BadRequestError } from "../lib/errors.ts";
 import { deleteGallery, getGallery, getGalleryFavs } from "../lib/gallery.ts";
 import { photoThumb, photoToView } from "../lib/photo.ts";
 import type { State } from "../state.ts";
···
 };
 
 export const follow: RouteHandler = async (
-  _req,
+  req,
   params,
   ctx: BffContext<State>,
 ) => {
   ctx.requireAuth();
   const did = params.did;
-  if (!did) return ctx.next();
+  const url = new URL(req.url);
+  const collection = url.searchParams.get("collection") || undefined;
+  const hideCollection = url.searchParams.get("hideCollection") === "true";
+  // TODO: check for supported collections
+  if (!did || !collection) {
+    throw new BadRequestError("Missing did or collection");
+  }
   const followUri = await ctx.createRecord<BskyFollow>(
-    "app.bsky.graph.follow",
+    collection,
     {
       subject: did,
       createdAt: new Date().toISOString(),
     },
   );
+  if (collection) {
+    return ctx.html(
+      <FollowButton
+        {...!hideCollection && {
+          class: "sm:w-full",
+          collection,
+        }}
+        followeeDid={did}
+        followUri={followUri}
+      />,
+    );
+  }
   return ctx.html(<FollowButton followeeDid={did} followUri={followUri} />);
 };
 
 export const unfollow: RouteHandler = async (
-  _req,
+  req,
   params,
   ctx: BffContext<State>,
 ) => {
-  const { did } = ctx.requireAuth();
+  ctx.requireAuth();
   const followeeDid = params.followeeDid;
-  const rkey = params.rkey;
+  const url = new URL(req.url);
+  const uri = url.searchParams.get("uri") || undefined;
+  const hideCollection = url.searchParams.get("hideCollection") === "true";
+  if (!followeeDid || !uri) {
+    throw new BadRequestError("Missing followeeDid or uri");
+  }
   await ctx.deleteRecord(
-    `at://${did}/app.bsky.graph.follow/${rkey}`,
+    uri,
   );
   return ctx.html(
-    <FollowButton followeeDid={followeeDid} followUri={undefined} />,
+    <FollowButton
+      {...!hideCollection && {
+        class: "sm:w-full",
+        collection: new AtUri(uri).collection,
+      }}
+      followeeDid={followeeDid}
+      followUri={undefined}
+    />,
   );
 };
 

src/routes/dialogs.tsx

···
 import { wrap } from "popmotion";
 import { AvatarDialog } from "../components/AvatarDialog.tsx";
 import { CreateAccountDialog } from "../components/CreateAccountDialog.tsx";
+import { FollowsDialog } from "../components/FollowsDialog.tsx";
 import { GalleryCreateEditDialog } from "../components/GalleryCreateEditDialog.tsx";
 import { GallerySortDialog } from "../components/GallerySortDialog.tsx";
 import { PhotoAltDialog } from "../components/PhotoAltDialog.tsx";
 import { PhotoDialog } from "../components/PhotoDialog.tsx";
 import { PhotoSelectDialog } from "../components/PhotoSelectDialog.tsx";
 import { ProfileDialog } from "../components/ProfileDialog.tsx";
-import { getActorPhotos, getActorProfile } from "../lib/actor.ts";
+import {
+  getActorPhotos,
+  getActorProfile,
+  getActorProfiles,
+} from "../lib/actor.ts";
+import { BadRequestError } from "../lib/errors.ts";
+import { getFollows } from "../lib/follow.ts";
 import { getGallery, getGalleryItemsAndPhotos } from "../lib/gallery.ts";
 import { photoToView } from "../lib/photo.ts";
 import type { State } from "../state.ts";
···
 ) => {
   return ctx.html(<CreateAccountDialog />);
 };
+
+export const follows: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const followeeDid = params.followeeDid;
+  if (!followeeDid) {
+    throw new BadRequestError("Missing followeeDid parameter");
+  }
+  const followMap = getFollows(followeeDid, did, ctx);
+  const sources = getActorProfiles(followeeDid, ctx);
+  return ctx.html(
+    <FollowsDialog
+      sources={sources}
+      followeeDid={followeeDid}
+      followMap={followMap}
+    />,
+  );
+};

src/routes/profile.tsx

···
-import { Record as BskyFollow } from "$lexicon/types/app/bsky/graph/follow.ts";
-import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
+import { BffContext, RouteHandler } from "@bigmoves/bff";
 import { ProfilePage, ProfileTabs } from "../components/ProfilePage.tsx";
 import {
   getActorGalleries,
   getActorGalleryFavs,
   getActorProfile,
+  getActorProfiles,
 } from "../lib/actor.ts";
-import { getFollow } from "../lib/follow.ts";
-import { getActorTimeline } from "../lib/timeline.ts";
+import { type FollowMap, getFollows } from "../lib/follow.ts";
+import { getActorTimeline, type SocialNetwork } from "../lib/timeline.ts";
 import { getPageMeta } from "../meta.ts";
 import type { State } from "../state.ts";
 import { profileLink } from "../utils.ts";
···
 
   if (!profile) return ctx.next();
 
-  let follow: WithBffMeta<BskyFollow> | undefined;
+  let followMap: FollowMap = {
+    "social.grain.graph.follow": "",
+    "app.bsky.graph.follow": "",
+    "sh.tangled.graph.follow": "",
+  };
+  let actorProfiles: SocialNetwork[] = [];
+  let userProfiles: SocialNetwork[] = [];
 
   if (ctx.currentUser) {
-    follow = getFollow(profile.did, ctx.currentUser.did, ctx);
+    followMap = getFollows(profile.did, ctx.currentUser.did, ctx);
+    actorProfiles = getActorProfiles(ctx.currentUser.did, ctx);
   }
+
+  userProfiles = getActorProfiles(handle, ctx);
 
   ctx.state.meta = [
     {
···
     const galleryFavs = getActorGalleryFavs(handle, ctx);
     return render(
       <ProfilePage
-        followUri={follow?.uri}
+        userProfiles={userProfiles}
+        actorProfiles={actorProfiles}
+        followMap={followMap}
         loggedInUserDid={ctx.currentUser?.did}
         timelineItems={timelineItems}
         profile={profile}
···
     const galleries = getActorGalleries(handle, ctx);
     return render(
       <ProfilePage
-        followUri={follow?.uri}
+        userProfiles={userProfiles}
+        actorProfiles={actorProfiles}
+        followMap={followMap}
         loggedInUserDid={ctx.currentUser?.did}
         timelineItems={timelineItems}
         profile={profile}
···
   }
   return ctx.render(
     <ProfilePage
-      followUri={follow?.uri}
+      userProfiles={userProfiles}
+      actorProfiles={actorProfiles}
+      followMap={followMap}
       loggedInUserDid={ctx.currentUser?.did}
       timelineItems={timelineItems}
       profile={profile}

src/routes/timeline.tsx

···
 import { BffContext, RouteHandler } from "@bigmoves/bff";
 import { getCookies, setCookie } from "@std/http";
 import { Timeline } from "../components/Timeline.tsx";
-import { getTimeline } from "../lib/timeline.ts";
+import { getActorProfiles } from "../lib/actor.ts";
+import { getTimeline, SocialNetwork } from "../lib/timeline.ts";
 import { getPageMeta } from "../meta.ts";
 import type { State } from "../state.ts";
 
···
 ) => {
   const url = new URL(req.url);
   const tabSearchParam = url.searchParams.get("tab") || "";
-  const cookieState = getCookieState(req.headers);
+  const graphSearchParam = url.searchParams.get("graph") as SocialNetwork ||
+    "grain";
+  const cookieState = getCookieState(ctx?.currentUser?.did, req.headers);
+  const isHxRequest = req.headers.get("hx-request") !== null;
+  const render = isHxRequest ? ctx.html : ctx.render;
+
   let tab;
+  let graph: SocialNetwork = "grain";
   let headers: Record<string, string> = {};
 
+  const actorProfiles = getActorProfiles(ctx?.currentUser?.did ?? "", ctx);
+
   if (!ctx.currentUser) {
     tab = "";
-  } else if (!req.headers.get("hx-request")) {
+  } else if (!isHxRequest) {
     tab = cookieState.lastSelectedHomeFeed || "";
+    graph = cookieState.lastSelectedFollowGraph || "grain";
   } else {
     tab = tabSearchParam || "";
+    graph = graphSearchParam;
     headers = setCookieState(url.hostname, {
+      did: ctx.currentUser.did,
       lastSelectedHomeFeed: tab,
+      lastSelectedFollowGraph: graph,
     });
   }
 
+  if (!graph && actorProfiles.length > 0) {
+    graph = actorProfiles[0];
+  }
+
   const items = getTimeline(
     ctx,
     tab === "following" ? "following" : "timeline",
+    graph,
   );
 
   if (tab === "following") {
-    if (!req.headers.get("hx-request")) {
-      ctx.state.meta = [{ title: "Following — Grain" }, ...getPageMeta("")];
-      return ctx.render(
-        <Timeline
-          isLoggedIn={!!ctx.currentUser}
-          selectedTab={tab}
-          items={items}
-        />,
-        headers,
-      );
-    }
-    return ctx.html(
+    ctx.state.meta = [{ title: "Following — Grain" }, ...getPageMeta("")];
+    return render(
       <Timeline
         isLoggedIn={!!ctx.currentUser}
         selectedTab={tab}
         items={items}
+        selectedGraph={graph}
+        actorProfiles={actorProfiles}
       />,
       headers,
     );
···
 
   ctx.state.meta = [{ title: "Timeline — Grain" }, ...getPageMeta("")];
 
-  return ctx.render(
-    <Timeline isLoggedIn={!!ctx.currentUser} selectedTab={tab} items={items} />,
+  return render(
+    <Timeline
+      isLoggedIn={!!ctx.currentUser}
+      selectedTab={tab}
+      items={items}
+      selectedGraph={graph}
+      actorProfiles={actorProfiles}
+    />,
     headers,
   );
 };
 
 type GrainStorageState = {
+  did?: string;
   lastSelectedHomeFeed?: string;
-};
-
-const defaultGrainStorageState: GrainStorageState = {
-  lastSelectedHomeFeed: undefined,
+  lastSelectedFollowGraph?: SocialNetwork;
 };
 
 function setCookieState(
···
 }
 
 function getCookieState(
+  did: string | undefined,
   headers: Headers,
 ): GrainStorageState {
   const cookies = getCookies(headers);
   if (!cookies.grain_storage) {
-    return defaultGrainStorageState;
+    return createDefaultCookieState(did);
   }
   const grainStorage = atob(cookies.grain_storage);
   if (grainStorage) {
     try {
-      return JSON.parse(grainStorage);
+      const parsed = JSON.parse(grainStorage);
+      if (parsed.did && parsed.did !== did) {
+        // If the did in the cookie doesn't match the current user, reset the state
+        return createDefaultCookieState(did);
+      }
+      if (!parsed.did && did) {
+        return createDefaultCookieState(did);
+      }
+      return parsed as GrainStorageState;
     } catch {
-      return defaultGrainStorageState;
+      return createDefaultCookieState(did);
     }
   }
-  return defaultGrainStorageState;
+  return createDefaultCookieState(did);
+}
+
+function createDefaultCookieState(
+  did: string | undefined,
+): GrainStorageState {
+  return {
+    did,
+    lastSelectedHomeFeed: "",
+    lastSelectedFollowGraph: "grain",
+  };
 }

static/styles.css

···
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
+    --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --default-font-family: var(--font-sans);
···
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
···
   }
   .overflow-x-auto {
     overflow-x: auto;
+  }
+  .rounded {
+    border-radius: 0.25rem;
   }
   .rounded-full {
     border-radius: calc(infinity * 1px);
···
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
   .px-\[3px\] {
     padding-inline: 3px;
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
   }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
···
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
···
       width: fit-content;
     }
   }
+  .sm\:w-full {
+    @media (width >= 40rem) {
+      width: 100%;
+    }
+  }
   .sm\:max-w-\[400px\] {
     @media (width >= 40rem) {
       max-width: 400px;
···
       :where(& > :not(:last-child)) {
         border-color: var(--color-zinc-800);
       }
+    }
+  }
+  .dark\:border-zinc-700 {
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--color-zinc-700);
     }
   }
   .dark\:border-zinc-800 {