Timeline/favs update (#4)

* add viewer state to gallery view with fav and fav count, update timeline to include favs, refactor fav actions

* tidy

__generated__/lexicons.ts

···
               refs: ['lex:social.grain.photo.defs#photoView'],
             },
           },
+          favCount: {
+            type: 'integer',
+          },
           labels: {
             type: 'array',
             items: {
···
           indexedAt: {
             type: 'string',
             format: 'datetime',
+          },
+          viewer: {
+            type: 'ref',
+            ref: 'lex:social.grain.gallery.defs#viewerState',
+          },
+        },
+      },
+      viewerState: {
+        type: 'object',
+        description:
+          "Metadata about the requesting account's relationship with the subject content. Only has meaningful content for authed requests.",
+        properties: {
+          fav: {
+            type: 'string',
+            format: 'at-uri',
           },
         },
       },
···
     defs: {
       main: {
         type: 'record',
-        description: 'Basic EXIF metadata for a photo',
+        description:
+          'Basic EXIF metadata for a photo. Integers are scaled by 1000000 to accommodate decimal values and potentially other tags in the future.',
         key: 'tid',
         record: {
           type: 'object',

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

···
   creator: SocialGrainActorDefs.ProfileView
   record: { [_ in string]: unknown }
   items?: ($Typed<SocialGrainPhotoDefs.PhotoView> | { $type: string })[]
+  favCount?: number
   labels?: ComAtprotoLabelDefs.Label[]
   indexedAt: string
+  viewer?: ViewerState
 }
 
 const hashGalleryView = 'galleryView'
···
 export function validateGalleryView<V>(v: V) {
   return validate<GalleryView & V>(v, id, hashGalleryView)
 }
+
+/** Metadata about the requesting account's relationship with the subject content. Only has meaningful content for authed requests. */
+export interface ViewerState {
+  $type?: 'social.grain.gallery.defs#viewerState'
+  fav?: string
+}
+
+const hashViewerState = 'viewerState'
+
+export function isViewerState<V>(v: V) {
+  return is$typed(v, id, hashViewerState)
+}
+
+export function validateViewerState<V>(v: V) {
+  return validate<ViewerState & V>(v, id, hashViewerState)
+}

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.2",
     "npm:@atproto/lexicon@*": "0.4.11",
     "npm:@atproto/lexicon@0.4.11": "0.4.11",
     "npm:@atproto/lexicon@~0.4.11": "0.4.11",
···
         "multiformats@9.9.0",
         "zod"
       ]
+    },
+    "@atproto/lex-cli@0.8.2": {
+      "integrity": "sha512-yNQFYBV3tBBLnVrRUtUBlx/WIF4ypMFsvOsCLjA7pHL1SyW9JbczSEAoiNtoDmPc4UXCjMtXggz0ovBG8lynNA==",
+      "dependencies": [
+        "@atproto/lexicon",
+        "@atproto/syntax",
+        "chalk",
+        "commander@9.5.0",
+        "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": [
···
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
       "bin": true
     },
+    "ansi-styles@4.3.0": {
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": [
+        "color-convert"
+      ]
+    },
     "array-flatten@1.1.1": {
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
     },
···
     },
     "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=="
···
         "unpipe"
       ]
     },
+    "brace-expansion@2.0.2": {
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dependencies": [
+        "balanced-match"
+      ]
+    },
     "braces@3.0.3": {
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": [
···
       "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@2.20.3": {
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
···
     "commander@8.3.0": {
       "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
     },
+    "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.6_picomatch@4.0.2": {
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "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.9": {
       "integrity": "sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA=="
+    },
+    "prettier@3.5.3": {
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "bin": true
     },
     "prismjs@1.30.0": {
       "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="
···
         "tslib@2.4.0"
       ]
     },
+    "supports-color@7.2.0": {
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": [
+        "has-flag"
+      ]
+    },
     "tailwind-merge@3.3.1": {
       "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g=="
     },
···
         "real-require"
       ]
     },
+    "tinyglobby@0.2.14_picomatch@4.0.2": {
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "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.61": {
       "integrity": "sha512-fzfJgUw78LTNnHujj9re1Ov/JJQkRZZGDMcYqSx7Hp4rPOkKywaFHq0S6GoHeXs0wGNE/sIOutkXgnwzrVOGCQ=="

lexicons/social/grain/gallery/defs.json

···
             ]
           }
         },
+        "favCount": { "type": "integer" },
         "labels": {
           "type": "array",
           "items": { "type": "ref", "ref": "com.atproto.label.defs#label" }
         },
-        "indexedAt": { "type": "string", "format": "datetime" }
+        "indexedAt": { "type": "string", "format": "datetime" },
+        "viewer": { "type": "ref", "ref": "#viewerState" }
+      }
+    },
+    "viewerState": {
+      "type": "object",
+      "description": "Metadata about the requesting account's relationship with the subject content. Only has meaningful content for authed requests.",
+      "properties": {
+        "fav": { "type": "string", "format": "at-uri" }
       }
     }
   }

src/components/FavoriteButton.tsx

···
-import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { AtUri } from "@atproto/syntax";
-import { WithBffMeta } from "@bigmoves/bff";
 import { cn } from "@bigmoves/bff/components";
 import { Button } from "./Button.tsx";
 
+export type ButtonVariant = "button" | "icon-button";
+
 export function FavoriteButton({
-  currentUserDid,
-  favs = [],
-  galleryUri,
+  class: classProp,
+  variant,
+  gallery,
 }: Readonly<{
-  currentUserDid?: string;
-  favs: WithBffMeta<Favorite>[];
-  galleryUri: string;
+  class?: string;
+  variant?: "button" | "icon-button";
+  gallery: GalleryView;
 }>) {
-  const isCreator = currentUserDid === new AtUri(galleryUri).hostname;
-  const favUri = favs.find((s) => currentUserDid === s.did)?.uri;
+  const variantClass = variant === "icon-button"
+    ? "flex w-fit items-center gap-2 m-0 p-0 mt-2"
+    : undefined;
+  const galleryRkey = new AtUri(gallery.uri).rkey;
+  const favRrkey = gallery.viewer?.fav
+    ? new AtUri(gallery.viewer.fav).rkey
+    : undefined;
   return (
     <Button
-      variant="primary"
+      variant={variant === "icon-button" ? "ghost" : "primary"}
       class={cn(
         "self-start w-full sm:w-fit whitespace-nowrap",
-        isCreator &&
-          "bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 text-zinc-950 dark:text-zinc-50",
+        variant === "icon-button" && gallery.viewer?.fav
+          ? "text-pink-500"
+          : undefined,
+        variantClass,
+        classProp,
       )}
       type="button"
-      hx-post={`/actions/favorite?galleryUri=${galleryUri}${
-        favUri ? "&favUri=" + favUri : ""
-      }`}
+      {...gallery.viewer?.fav
+        ? {
+          "hx-delete":
+            `/actions/${gallery.creator.did}/gallery/${galleryRkey}/favorite/${favRrkey}?variant=${variant}`,
+        }
+        : {
+          "hx-post":
+            `/actions/${gallery.creator.did}/gallery/${galleryRkey}/favorite?variant=${variant}`,
+        }}
       hx-target="this"
       hx-swap="outerHTML"
-      disabled={isCreator}
     >
       <i
-        class={cn("fa-heart", favUri || isCreator ? "fa-solid" : "fa-regular")}
+        class={cn(
+          "fa-heart",
+          variant === "icon-button" && gallery.viewer?.fav
+            ? "text-pink-500"
+            : undefined,
+          gallery.viewer?.fav ? "fa-solid" : "fa-regular",
+        )}
       >
       </i>{" "}
-      {favs.length}
+      {gallery.favCount}
     </Button>
   );
 }

src/components/GalleryPage.tsx

···
-import { Record as Favorite } from "$lexicon/types/social/grain/favorite.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";
-import { WithBffMeta } from "@bigmoves/bff";
 import { ModerationDecsion } from "../lib/moderation.ts";
 import { EditGalleryButton } from "./EditGalleryDialog.tsx";
 import { FavoriteButton } from "./FavoriteButton.tsx";
···
 
 export function GalleryPage({
   gallery,
-  favs = [],
   currentUserDid,
   modDecision,
 }: Readonly<{
   gallery: GalleryView;
-  favs: WithBffMeta<Favorite>[];
   currentUserDid?: string;
   modDecision?: ModerationDecsion;
 }>) {
···
             <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row sm:flex-wrap sm:justify-end">
               <EditGalleryButton gallery={gallery} />
               <ShareGalleryButton gallery={gallery} />
-              <FavoriteButton
-                currentUserDid={currentUserDid}
-                favs={favs}
-                galleryUri={gallery.uri}
-              />
+              <FavoriteButton gallery={gallery} />
             </div>
           )
           : null}
···
           ? (
             <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
               <ShareGalleryButton gallery={gallery} />
-              <FavoriteButton
-                currentUserDid={currentUserDid}
-                favs={favs}
-                galleryUri={gallery.uri}
-              />
+              <FavoriteButton gallery={gallery} />
             </div>
           )
           : null}

src/components/ModerationWrapper.tsx

···
               data-state="closed"
               class={classProp}
             >
-              <div class="bg-zinc-200 dark:bg-zinc-800 p-4 w-full">
+              <div class="bg-zinc-200 dark:bg-zinc-800 p-4 w-full rounded-md">
                 <div class="flex items-center justify-between gap-2 w-full">
                   <div class="flex items-center gap-2">
                     <i class="fa fa-circle-info text-zinc-500"></i>

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 { AtUri } from "@atproto/syntax";
 import { type TimelineItem } from "../lib/timeline.ts";
-import { formatRelativeTime, galleryLink } from "../utils.ts";
+import { formatRelativeTime } from "../utils.ts";
 import { ActorInfo } from "./ActorInfo.tsx";
+import { FavoriteButton } from "./FavoriteButton.tsx";
 import { GalleryPreviewLink } from "./GalleryPreviewLink.tsx";
 import { ModerationWrapper } from "./ModerationWrapper.tsx";
 
 export function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
+  const title = (item.gallery.record as Gallery).title;
+  const description = (item.gallery.record as Gallery).description;
   return (
     <li>
-      <div class="flex flex-col gap-4 pb-4 max-w-md">
-        <div class="flex items-center justify-between gap-2 w-full">
+      <div class="flex flex-col pb-4 max-w-md">
+        <div class="flex items-center justify-between gap-2 w-full mb-4">
           <ActorInfo profile={item.actor} />
           <span class="shrink-0">
             {formatRelativeTime(new Date(item.createdAt))}
           </span>
         </div>
-        {item.gallery.items?.filter(isPhotoView).length
+        {item.gallery.items?.length && item.gallery.items?.length > 0
           ? (
-            <ModerationWrapper
-              moderationDecision={item.modDecision}
-              class="gap-2 sm:min-w-md"
-            >
-              <GalleryPreviewLink
-                gallery={item.gallery}
-              />
-            </ModerationWrapper>
+            <div class="mb-4">
+              {item.gallery.items?.filter(isPhotoView).length
+                ? (
+                  <ModerationWrapper
+                    moderationDecision={item.modDecision}
+                    class="gap-2 sm:min-w-md"
+                  >
+                    <GalleryPreviewLink
+                      gallery={item.gallery}
+                    />
+                  </ModerationWrapper>
+                )
+                : null}
+            </div>
           )
           : null}
-        <p class="w-full flex items-baseline gap-1">
-          Created{" "}
-          <a
-            href={galleryLink(
-              item.gallery.creator.handle,
-              new AtUri(item.gallery.uri).rkey,
-            )}
-            class="inline-block truncate max-w-[200px] overflow-hidden font-semibold hover:underline"
-          >
-            {(item.gallery.record as Gallery).title}
-          </a>
-        </p>
+        {title && (
+          <p class="font-semibold">
+            {title}
+          </p>
+        )}
+        {description && (
+          <p class="mt-2 text-sm text-zinc-600 dark:text-zinc-500">
+            {description}
+          </p>
+        )}
+        <FavoriteButton
+          gallery={item.gallery}
+          variant="icon-button"
+        />
       </div>
     </li>
   );

src/lib/actor.ts

···
   if (!creator) return [];
 
   return galleries.map((gallery) =>
-    galleryToView(
-      gallery,
+    galleryToView({
+      record: gallery,
       creator,
-      galleryPhotosMap.get(gallery.uri) ?? [],
-      labelMap.get(gallery.uri) ?? [],
-    )
+      items: galleryPhotosMap.get(gallery.uri) ?? [],
+      labels: labelMap.get(gallery.uri) ?? [],
+    })
   );
 }
 
···
       if (!gallery) return null;
       const creator = creators.get(gallery.did);
       if (!creator) return null;
-      return galleryToView(
-        gallery,
+      return galleryToView({
+        record: gallery,
         creator,
-        galleryPhotosMap.get(gallery.uri) ?? [],
-        labelMap.get(gallery.uri) ?? [],
-      );
+        items: galleryPhotosMap.get(gallery.uri) ?? [],
+        labels: labelMap.get(gallery.uri) ?? [],
+      });
     })
     .filter((g) => g !== null);
 }

src/lib/gallery.ts

···
 import { ProfileView } from "$lexicon/types/social/grain/actor/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 {
+  GalleryView,
+  ViewerState,
+} from "$lexicon/types/social/grain/gallery/defs.ts";
 import { Record as GalleryItem } from "$lexicon/types/social/grain/gallery/item.ts";
 import {
   isRecord as isPhoto,
···
   const labels = ctx.indexService.queryLabels({
     subjects: [gallery.uri],
   });
-  return galleryToView(
-    gallery,
-    profile,
-    galleryPhotosMap.get(gallery.uri) ?? [],
+  const favs = getGalleryFavs(gallery.uri, ctx);
+  const viewerFav = favs.find((fav) => fav.did === ctx.currentUser?.did);
+  return galleryToView({
+    record: gallery,
+    creator: profile,
+    items: galleryPhotosMap.get(gallery.uri) ?? [],
     labels,
-  );
+    favCount: favs.length,
+    viewerState: {
+      fav: viewerFav ? viewerFav.uri : undefined,
+    },
+  });
 }
 
 export async function deleteGallery(uri: string, ctx: BffContext) {
···
   return results.items;
 }
 
-export function galleryToView(
-  record: WithBffMeta<Gallery>,
-  creator: Un$Typed<ProfileView>,
-  items: PhotoWithExif[],
-  labels: Label[] = [],
-): Un$Typed<GalleryView> {
+export function galleryToView({
+  record,
+  creator,
+  items,
+  labels = [],
+  favCount,
+  viewerState,
+}: {
+  record: WithBffMeta<Gallery>;
+  creator: Un$Typed<ProfileView>;
+  items: PhotoWithExif[];
+  labels: Label[];
+  favCount?: number;
+  viewerState?: ViewerState;
+}): Un$Typed<GalleryView> {
   return {
     uri: record.uri,
     cid: record.cid,
···
       .filter(isPhotoView),
     labels,
     indexedAt: record.indexedAt,
+    favCount,
+    viewer: viewerState,
   };
 }
 
···
   const labels = ctx.indexService.queryLabels({ subjects: uris });
 
   return galleries.map((gallery) =>
-    galleryToView(
-      gallery,
-      profile,
-      galleryPhotosMap.get(gallery.uri) ?? [],
+    galleryToView({
+      record: gallery,
+      creator: profile,
+      items: galleryPhotosMap.get(gallery.uri) ?? [],
       labels,
-    )
+    })
   );
 }
 

src/lib/photo.ts

···
     .map((gallery) => {
       const profile = getActorProfile(gallery.did, ctx);
       if (!profile) return undefined;
-      return galleryToView(
-        gallery,
-        profile,
-        galleryPhotosMap.get(gallery.uri) ?? [],
-        labels ?? [],
-      );
+      return galleryToView({
+        record: gallery,
+        creator: profile,
+        items: galleryPhotosMap.get(gallery.uri) ?? [],
+        labels: labels ?? [],
+      });
     })
     .filter((g): g is GalleryView => Boolean(g));
 }

src/lib/timeline.ts

···
 import { AtUri } from "@atproto/syntax";
 import { BffContext, QueryOptions, WithBffMeta } from "@bigmoves/bff";
 import { getActorProfile } from "./actor.ts";
-import { galleryToView, getGalleryItemsAndPhotos } from "./gallery.ts";
+import {
+  galleryToView,
+  getGalleryFavs,
+  getGalleryItemsAndPhotos,
+} from "./gallery.ts";
 import { moderateGallery, ModerationDecsion } from "./moderation.ts";
 
 export type TimelineItemType = "gallery";
···
     const labels = ctx.indexService.queryLabels({
       subjects: [gallery.uri],
     });
-    const galleryView = galleryToView(gallery, profile, galleryPhotos, labels);
+    const favs = getGalleryFavs(gallery.uri, ctx);
+    const viewerFav = favs.find((fav) => fav.did === ctx.currentUser?.did);
+    const galleryView = galleryToView({
+      record: gallery,
+      creator: profile,
+      items: galleryPhotos,
+      labels,
+      favCount: favs.length,
+      viewerState: {
+        fav: viewerFav ? viewerFav.uri : undefined,
+      },
+    });
 
     let modDecision: ModerationDecsion | undefined = undefined;
     if (galleryView.labels?.length) {

src/main.tsx

···
     route("/actions/photo/:rkey", ["PUT"], actions.photoEdit),
     route("/actions/photo/:rkey", ["DELETE"], actions.photoDelete),
     route("/actions/photo", ["POST"], actions.uploadPhoto),
-    route("/actions/favorite", ["POST"], actions.galleryFavorite),
+    route(
+      "/actions/:creatorDid/gallery/:rkey/favorite",
+      ["POST"],
+      actions.galleryFavorite,
+    ),
+    route(
+      "/actions/:creatorDid/gallery/:rkey/favorite/:favRkey",
+      ["DELETE"],
+      actions.galleryUnfavorite,
+    ),
     route("/actions/profile", ["PUT"], actions.profileUpdate),
     route("/actions/gallery/:rkey/sort", ["POST"], actions.gallerySort),
     route("/actions/get-blob", ["GET"], actions.getBlob),

src/routes/actions.tsx

···
 import { Record as PhotoExif } from "$lexicon/types/social/grain/photo/exif.ts";
 import { AtUri } from "@atproto/syntax";
 import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
-import { FavoriteButton } from "../components/FavoriteButton.tsx";
+import {
+  ButtonVariant,
+  FavoriteButton,
+} from "../components/FavoriteButton.tsx";
 import { FollowButton } from "../components/FollowButton.tsx";
 import { GalleryEditPhotosDialog } from "../components/GalleryEditPhotosDialog.tsx";
 import { GalleryInfo } from "../components/GalleryInfo.tsx";
···
 import { PhotoSelectButton } from "../components/PhotoSelectButton.tsx";
 import { getActorPhotos } from "../lib/actor.ts";
 import { getFollowers } from "../lib/follow.ts";
-import { deleteGallery, getGallery, getGalleryFavs } from "../lib/gallery.ts";
+import { deleteGallery, getGallery } from "../lib/gallery.ts";
 import { getPhoto, photoToView } from "../lib/photo.ts";
 import type { State } from "../state.ts";
 import { galleryLink, profileLink, uploadPageLink } from "../utils.ts";
···
 
 export const galleryFavorite: RouteHandler = async (
   req,
-  _params,
+  params,
+  ctx: BffContext<State>,
+) => {
+  ctx.requireAuth();
+  const url = new URL(req.url);
+  const variant = url.searchParams.get("variant") as ButtonVariant || "button";
+  const creatorDid = params.creatorDid;
+  const galleryRkey = params.rkey;
+  const galleryUri = `at://${creatorDid}/social.grain.gallery/${galleryRkey}`;
+
+  try {
+    await ctx.createRecord<WithBffMeta<Favorite>>("social.grain.favorite", {
+      subject: galleryUri,
+      createdAt: new Date().toISOString(),
+    });
+  } catch (e) {
+    console.error("Error creating favorite record:", e);
+  }
+
+  const gallery = getGallery(creatorDid, galleryRkey, ctx);
+  if (!gallery) return ctx.next();
+
+  return ctx.html(
+    <FavoriteButton gallery={gallery} variant={variant} />,
+  );
+};
+
+export const galleryUnfavorite: RouteHandler = async (
+  req,
+  params,
   ctx: BffContext<State>,
 ) => {
   const { did } = ctx.requireAuth();
   const url = new URL(req.url);
-  const searchParams = new URLSearchParams(url.search);
-  const galleryUri = searchParams.get("galleryUri");
-  const favUri = searchParams.get("favUri") ?? undefined;
-  if (!galleryUri) return ctx.next();
-  if (favUri) {
+  const variant = url.searchParams.get("variant") as ButtonVariant || "button";
+  const creatorDid = params.creatorDid;
+  const galleryRkey = params.rkey;
+  const favRkey = params.favRkey;
+  const favUri = `at://${did}/social.grain.favorite/${favRkey}`;
+
+  try {
     await ctx.deleteRecord(favUri);
-    const favs = getGalleryFavs(galleryUri, ctx);
-    return ctx.html(
-      <FavoriteButton
-        currentUserDid={did}
-        favs={favs}
-        galleryUri={galleryUri}
-      />,
-    );
+  } catch (e) {
+    console.error("Error deleting favorite record:", e);
   }
-  await ctx.createRecord<WithBffMeta<Favorite>>("social.grain.favorite", {
-    subject: galleryUri,
-    createdAt: new Date().toISOString(),
-  });
-  const favs = getGalleryFavs(galleryUri, ctx);
+
+  const gallery = getGallery(creatorDid, galleryRkey, ctx);
+  if (!gallery) return ctx.next();
+
   return ctx.html(
-    <FavoriteButton
-      currentUserDid={did}
-      galleryUri={galleryUri}
-      favs={favs}
-    />,
+    <FavoriteButton gallery={gallery} variant={variant} />,
   );
 };
 

src/routes/gallery.tsx

···
-import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
 import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
-import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
+import { BffContext, RouteHandler } from "@bigmoves/bff";
 import { GalleryPage } from "../components/GalleryPage.tsx";
-import { getGallery, getGalleryFavs } from "../lib/gallery.ts";
+import { getGallery } from "../lib/gallery.ts";
 import { moderateGallery, ModerationDecsion } from "../lib/moderation.ts";
 import { getGalleryMeta, getPageMeta } from "../meta.ts";
 import type { State } from "../state.ts";
···
   ctx: BffContext<State>,
 ) => {
   const did = ctx.currentUser?.did;
-  let favs: WithBffMeta<Favorite>[] = [];
   const handle = params.handle;
   const rkey = params.rkey;
   const gallery = getGallery(handle, rkey, ctx);
 
   if (!gallery) return ctx.next();
-
-  favs = getGalleryFavs(gallery.uri, ctx);
 
   ctx.state.meta = [
     { title: `${(gallery.record as Gallery).title} — Grain` },
···
 
   return ctx.render(
     <GalleryPage
-      favs={favs}
       gallery={gallery}
       currentUserDid={did}
       modDecision={modDecision}