finally break up main.tsx into separate files

.editorconfig

···
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.txt]
+indent_style = tab
+indent_size = 4
+
+[*.{diff,md}]
+trim_trailing_whitespace = false

Dockerfile

···
 
 # Give ownership to deno user and cache dependencies
 RUN chown -R deno:deno /app && \
-	deno cache ./main.tsx
+	deno cache ./src/main.tsx
 
 FROM denoland/deno:alpine-2.2.3
 
···
 
 # Run LiteFS as the entrypoint. After it has connected and sync'd with the
 # cluster, it will run the commands listed in the "exec" field of the config.
-ENTRYPOINT ["litefs", "mount"]
+ENTRYPOINT ["litefs", "mount"]

deno.json

···
     "typed-htmx": "npm:typed-htmx@^0.3.1"
   },
   "tasks": {
-    "start": "deno run -A --unstable-kv --unstable-ffi main.tsx",
+    "start": "deno run -A --unstable-kv --unstable-ffi ./src/main.tsx",
     "dev": "deno run \"dev:*\"",
-    "dev:server": "deno run -A --unstable-kv --unstable-ffi --env-file=.env --watch ./main.tsx",
-    "dev:tailwind": "deno run -A --node-modules-dir npm:@tailwindcss/cli -i ./input.css -o ./static/styles.css --watch",
-    "codegen": "deno run -A ../../packages/bff-cli/mod.ts lex"
+    "dev:server": "deno run -A --unstable-kv --unstable-ffi --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"
   },
   "compilerOptions": {
     "jsx": "precompile",

litefs.yml

···
 # the last command to be long-running (e.g. an application server). When the
 # last command exits, LiteFS is shut down.
 exec:
-  - cmd: "deno run -A --unstable-kv --unstable-ffi main.tsx"
+  - cmd: "deno run start"
 
 # The lease section specifies how the cluster will be managed. We're using the
 # "consul" lease type so that our application can dynamically change the primary.

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";
-import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
-import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
-import { Record as GalleryItem } from "$lexicon/types/social/grain/gallery/item.ts";
-import { NotificationView } from "$lexicon/types/social/grain/notification/defs.ts";
-import {
-  isRecord as isPhoto,
-  Record as Photo,
-} from "$lexicon/types/social/grain/photo.ts";
-import {
-  isPhotoView,
-  PhotoView,
-} from "$lexicon/types/social/grain/photo/defs.ts";
-import { $Typed, Un$Typed } from "$lexicon/util.ts";
-import { AtUri } from "@atproto/syntax";
-import {
-  ActorTable,
-  bff,
-  BffContext,
-  BffMiddleware,
-  CSS,
-  JETSTREAM,
-  oauth,
-  OAUTH_ROUTES,
-  onSignedInArgs,
-  RateLimitError,
-  RootProps,
-  route,
-  RouteHandler,
-  UnauthorizedError,
-  WithBffMeta,
-} from "@bigmoves/bff";
-import { BFFPhotoProcessor } from "@bigmoves/bff-photo-processor";
-import {
-  Button,
-  cn,
-  Dialog,
-  Input,
-  Layout,
-  Login,
-  Meta,
-  type MetaDescriptor,
-  Textarea,
-} from "@bigmoves/bff/components";
-import { createCanvas, Image } from "@gfx/canvas";
-import { join } from "@std/path";
-import {
-  differenceInDays,
-  differenceInHours,
-  differenceInMinutes,
-  differenceInWeeks,
-  formatDuration,
-  intervalToDuration,
-} from "date-fns";
-import { wrap } from "popmotion";
-import { ComponentChildren, JSX, VNode } from "preact";
-
-const PUBLIC_URL = Deno.env.get("BFF_PUBLIC_URL") ?? "http://localhost:8080";
-const GOATCOUNTER_URL = Deno.env.get("GOATCOUNTER_URL");
-
-const staticFilesHash = new Map<string, string>();
-
-const photoProcessor = new BFFPhotoProcessor();
-
-bff({
-  appName: "Grain Social",
-  collections: [
-    "social.grain.gallery",
-    "social.grain.actor.profile",
-    "social.grain.photo",
-    "social.grain.favorite",
-    "social.grain.gallery.item",
-  ],
-  jetstreamUrl: JETSTREAM.WEST_1,
-  lexicons,
-  rootElement: Root,
-  onListen: async () => {
-    for (const entry of Deno.readDirSync(join(Deno.cwd(), "static"))) {
-      if (
-        entry.isFile &&
-        (entry.name.endsWith(".js") || entry.name.endsWith(".css"))
-      ) {
-        const fileContent = await Deno.readFile(
-          join(Deno.cwd(), "static", entry.name),
-        );
-        const hashBuffer = await crypto.subtle.digest("SHA-256", fileContent);
-        const hash = Array.from(new Uint8Array(hashBuffer))
-          .map((b) => b.toString(16).padStart(2, "0"))
-          .join("");
-        staticFilesHash.set(entry.name, hash);
-      }
-    }
-  },
-  onError: (err) => {
-    if (err instanceof UnauthorizedError) {
-      const ctx = err.ctx;
-      return ctx.redirect(OAUTH_ROUTES.loginPage);
-    }
-    if (err instanceof RateLimitError) {
-      const now = new Date();
-      const future = new Date(now.getTime() + (err.retryAfter ?? 0) * 1000);
-      const duration = intervalToDuration({ start: now, end: future });
-      const formatted = formatDuration(duration, {
-        format: ["minutes", "seconds"],
-      });
-      return new Response(
-        `Too many requests. Retry in ${formatted}.`,
-        {
-          status: 429,
-          headers: {
-            ...err.retryAfter && { "Retry-After": err.retryAfter.toString() },
-            "Content-Type": "text/plain",
-          },
-        },
-      );
-    }
-    return new Response("Internal Server Error", {
-      status: 500,
-    });
-  },
-  middlewares: [
-    (req, ctx) => {
-      if (ctx.currentUser) {
-        const url = new URL(req.url);
-        if (
-          ["actions", "embed"].some((path) => url.pathname.includes(path)) ||
-          (url.pathname.includes("dialogs") &&
-            !url.pathname.includes("/dialogs/profile"))
-        ) {
-          return ctx.next();
-        }
-        const profile = getActorProfile(ctx.currentUser.did, ctx);
-        if (profile) {
-          ctx.state.profile = profile;
-        }
-        const notifications = getNotifications(ctx.currentUser, ctx);
-        ctx.state.notifications = notifications;
-        return ctx.next();
-      }
-      return ctx.next();
-    },
-    oauth({
-      onSignedIn,
-      LoginComponent: ({ error }) => (
-        <div
-          id="login"
-          class="flex justify-center items-center w-full h-full relative"
-          style="background-image: url('https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:bcgltzqazw5tb6k2g3ttenbj/bafkreiewhwu3ro5dv7omedphb62db4koa7qtvyzfhiiypg3ru4tvuxkrjy@jpeg'); background-size: cover; background-position: center;"
-        >
-          <Login hx-target="#login" error={error} errorClass="text-white" />
-          <div class="absolute bottom-2 right-2 text-white text-sm">
-            Photo by{" "}
-            <a
-              href={profileLink("chadtmiller.com")}
-              class="hover:underline font-semibold"
-            >
-              @chadtmiller.com
-            </a>
-          </div>
-        </div>
-      ),
-    }),
-    route("/", (_req, _params, ctx) => {
-      const items = getTimeline(ctx);
-      ctx.state.meta = [{ title: "Timeline — Grain" }, getPageMeta("")];
-      return ctx.render(<Timeline items={items} />);
-    }),
-    route("/notifications", (_req, _params, ctx: BffContext<State>) => {
-      ctx.requireAuth();
-      ctx.state.meta = [
-        { title: "Notifications — Grain" },
-      ];
-      return ctx.render(
-        <NotificationsPage notifications={ctx.state.notifications ?? []} />,
-      );
-    }),
-    route("/profile/:handle", (req, params, ctx) => {
-      const url = new URL(req.url);
-      const tab = url.searchParams.get("tab");
-      const handle = params.handle;
-      const timelineItems = getActorTimeline(handle, ctx);
-      const galleries = getActorGalleries(handle, ctx);
-      const actor = ctx.indexService.getActorByHandle(handle);
-      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
-            ? `${profile.displayName} (${profile.handle}) — Grain`
-            : `${profile.handle} — Grain`,
-        },
-        getPageMeta(profileLink(handle)),
-      ];
-      if (tab) {
-        return ctx.html(
-          <ProfilePage
-            followUri={follow?.uri}
-            loggedInUserDid={ctx.currentUser?.did}
-            timelineItems={timelineItems}
-            profile={profile}
-            selectedTab={tab}
-            galleries={galleries}
-          />,
-        );
-      }
-      return ctx.render(
-        <ProfilePage
-          followUri={follow?.uri}
-          loggedInUserDid={ctx.currentUser?.did}
-          timelineItems={timelineItems}
-          profile={profile}
-        />,
-      );
-    }),
-    route(
-      "/profile/:handle/gallery/:rkey",
-      (_req, params, 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` },
-          ...getPageMeta(galleryLink(handle, rkey)),
-          ...getGalleryMeta(gallery),
-        ];
-        ctx.state.scripts = ["photo_dialog.js", "masonry.js", "sortable.js"];
-        return ctx.render(
-          <GalleryPage favs={favs} gallery={gallery} currentUserDid={did} />,
-        );
-      },
-    ),
-    route("/embed/profile/:did/gallery/:rkey", (_req, params, ctx) => {
-      const gallery = getGallery(params.did, params.rkey, ctx);
-      if (!gallery) return ctx.next();
-      return ctx.html(<GalleryPreviewLink gallery={gallery} size="small" />);
-    }),
-    route("/upload", (req, _params, ctx) => {
-      const { did, handle } = ctx.requireAuth();
-      const url = new URL(req.url);
-      const galleryRkey = url.searchParams.get("returnTo");
-      const photos = getActorPhotos(did, ctx);
-      ctx.state.meta = [{ title: "Upload — Grain" }, getPageMeta("/upload")];
-      ctx.state.scripts = ["upload_page.js"];
-      return ctx.render(
-        <UploadPage
-          handle={handle}
-          photos={photos}
-          returnTo={galleryRkey ? galleryLink(handle, galleryRkey) : undefined}
-        />,
-      );
-    }),
-    route("/onboard", (_req, _params, ctx) => {
-      ctx.requireAuth();
-      return ctx.render(
-        <div
-          hx-get="/dialogs/profile"
-          hx-trigger="load"
-          hx-target="body"
-          hx-swap="afterbegin"
-        />,
-      );
-    }),
-    route("/dialogs/gallery/new", (_req, _params, ctx) => {
-      ctx.requireAuth();
-      return ctx.html(<GalleryCreateEditDialog />);
-    }),
-    route("/dialogs/gallery/:rkey", (_req, params, ctx) => {
-      const { handle } = ctx.requireAuth();
-      const rkey = params.rkey;
-      const gallery = getGallery(handle, rkey, ctx);
-      return ctx.html(<GalleryCreateEditDialog gallery={gallery} />);
-    }),
-    route("/dialogs/gallery/:rkey/sort", (_req, params, ctx) => {
-      const { handle } = ctx.requireAuth();
-      const rkey = params.rkey;
-      const gallery = getGallery(handle, rkey, ctx);
-      if (!gallery) return ctx.next();
-      return ctx.html(<GallerySortDialog gallery={gallery} />);
-    }),
-    route("/dialogs/profile", (_req, _params, ctx: BffContext<State>) => {
-      const { did } = ctx.requireAuth();
-
-      if (!ctx.state.profile) return ctx.next();
-
-      const profileRecord = ctx.indexService.getRecord<Profile>(
-        `at://${did}/social.grain.actor.profile/self`,
-      );
-
-      if (!profileRecord) return ctx.next();
-
-      return ctx.html(
-        <ProfileDialog
-          profile={ctx.state.profile}
-        />,
-      );
-    }),
-    route("/dialogs/avatar/:handle", (_req, params, ctx) => {
-      const handle = params.handle;
-      const actor = ctx.indexService.getActorByHandle(handle);
-      if (!actor) return ctx.next();
-      const profile = getActorProfile(actor.did, ctx);
-      if (!profile) return ctx.next();
-      return ctx.html(<AvatarDialog profile={profile} />);
-    }),
-    route("/dialogs/image", (req, _params, ctx) => {
-      const url = new URL(req.url);
-      const galleryUri = url.searchParams.get("galleryUri");
-      const imageCid = url.searchParams.get("imageCid");
-      if (!galleryUri || !imageCid) return ctx.next();
-      const atUri = new AtUri(galleryUri);
-      const galleryDid = atUri.hostname;
-      const galleryRkey = atUri.rkey;
-      const gallery = getGallery(galleryDid, galleryRkey, ctx);
-      if (!gallery?.items) return ctx.next();
-      const image = gallery.items.filter(isPhotoView).find((item) => {
-        return item.cid === imageCid;
-      });
-      const imageAtIndex = gallery.items
-        .filter(isPhotoView)
-        .findIndex((image) => {
-          return image.cid === imageCid;
-        });
-      const next = wrap(0, gallery.items.length, imageAtIndex + 1);
-      const prev = wrap(0, gallery.items.length, imageAtIndex - 1);
-      if (!image) return ctx.next();
-      return ctx.html(
-        <PhotoDialog
-          gallery={gallery}
-          image={image}
-          nextImage={gallery.items.filter(isPhotoView).at(next)}
-          prevImage={gallery.items.filter(isPhotoView).at(prev)}
-        />,
-      );
-    }),
-    route("/dialogs/photo/:rkey/alt", (_req, params, ctx) => {
-      const { did } = ctx.requireAuth();
-      const photoRkey = params.rkey;
-      const photoUri = `at://${did}/social.grain.photo/${photoRkey}`;
-      const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
-      if (!photo) return ctx.next();
-      return ctx.html(
-        <PhotoAltDialog photo={photoToView(did, photo)} />,
-      );
-    }),
-    route("/dialogs/photo-select/:galleryRkey", (_req, params, ctx) => {
-      const { did } = ctx.requireAuth();
-      const photos = getActorPhotos(did, ctx);
-      const galleryUri =
-        `at://${did}/social.grain.gallery/${params.galleryRkey}`;
-      const gallery = ctx.indexService.getRecord<WithBffMeta<Gallery>>(
-        galleryUri,
-      );
-      if (!gallery) return ctx.next();
-      const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, [gallery]);
-      const itemUris = galleryPhotosMap.get(galleryUri)?.map((photo) =>
-        photo.uri
-      ) ?? [];
-      return ctx.html(
-        <PhotoSelectDialog
-          galleryUri={galleryUri}
-          itemUris={itemUris}
-          photos={photos}
-        />,
-      );
-    }),
-    route("/actions/update-seen", ["POST"], (_req, _params, ctx) => {
-      ctx.requireAuth();
-      ctx.updateSeen();
-      return new Response(null, { status: 200 });
-    }),
-    route("/actions/follow/:did", ["POST"], async (_req, params, ctx) => {
-      ctx.requireAuth();
-      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(
-      "/actions/follow/:followeeDid/:rkey",
-      ["DELETE"],
-      async (_req, params, ctx) => {
-        const { did } = ctx.requireAuth();
-        const followeeDid = params.followeeDid;
-        const rkey = params.rkey;
-        await ctx.deleteRecord(
-          `at://${did}/app.bsky.graph.follow/${rkey}`,
-        );
-        return ctx.html(
-          <FollowButton followeeDid={followeeDid} followUri={undefined} />,
-        );
-      },
-    ),
-    route("/actions/create-edit", ["POST"], async (req, _params, ctx) => {
-      const { handle } = ctx.requireAuth();
-      const formData = await req.formData();
-      const title = formData.get("title") as string;
-      const description = formData.get("description") as string;
-      const url = new URL(req.url);
-      const searchParams = new URLSearchParams(url.search);
-      const uri = searchParams.get("uri");
-
-      if (uri) {
-        const gallery = ctx.indexService.getRecord<WithBffMeta<Gallery>>(uri);
-        if (!gallery) return ctx.next();
-        const rkey = new AtUri(uri).rkey;
-        try {
-          await ctx.updateRecord<Gallery>("social.grain.gallery", rkey, {
-            title,
-            description,
-            createdAt: gallery.createdAt,
-          });
-        } catch (e) {
-          console.error("Error updating record:", e);
-          const errorMessage = e instanceof Error
-            ? e.message
-            : "Unknown error occurred";
-          return new Response(errorMessage, { status: 400 });
-        }
-        return ctx.redirect(galleryLink(handle, rkey));
-      }
-
-      const createdUri = await ctx.createRecord<Gallery>(
-        "social.grain.gallery",
-        {
-          title,
-          description,
-          createdAt: new Date().toISOString(),
-        },
-      );
-      return ctx.redirect(galleryLink(handle, new AtUri(createdUri).rkey));
-    }),
-    route("/actions/gallery/delete", ["POST"], async (req, _params, ctx) => {
-      ctx.requireAuth();
-      const formData = await req.formData();
-      const uri = formData.get("uri") as string;
-      await deleteGallery(uri, ctx);
-      return ctx.redirect("/");
-    }),
-    route(
-      "/actions/gallery/:galleryRkey/add-photo/:photoRkey",
-      ["PUT"],
-      async (_req, params, ctx) => {
-        const { did } = ctx.requireAuth();
-        const galleryRkey = params.galleryRkey;
-        const photoRkey = params.photoRkey;
-        const galleryUri = `at://${did}/social.grain.gallery/${galleryRkey}`;
-        const photoUri = `at://${did}/social.grain.photo/${photoRkey}`;
-        const gallery = getGallery(did, galleryRkey, ctx);
-        const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
-        if (!gallery || !photo) return ctx.next();
-        if (
-          gallery.items
-            ?.filter(isPhotoView)
-            .some((item) => item.uri === photoUri)
-        ) {
-          return new Response(null, { status: 500 });
-        }
-        await ctx.createRecord<Gallery>("social.grain.gallery.item", {
-          gallery: galleryUri,
-          item: photoUri,
-          position: gallery.items?.length ?? 0,
-          createdAt: new Date().toISOString(),
-        });
-        gallery.items = [
-          ...(gallery.items ?? []),
-          photoToView(photo.did, photo),
-        ];
-        return ctx.html(
-          <>
-            <div hx-swap-oob="beforeend:#masonry-container">
-              <PhotoButton
-                key={photo.cid}
-                photo={photoToView(photo.did, photo)}
-                gallery={gallery}
-              />
-            </div>
-            <PhotoSelectButton
-              galleryUri={galleryUri}
-              itemUris={gallery.items?.filter(isPhotoView).map((item) =>
-                item.uri
-              ) ?? []}
-              photo={photoToView(photo.did, photo)}
-            />
-          </>,
-        );
-      },
-    ),
-    route(
-      "/actions/gallery/:galleryRkey/remove-photo/:photoRkey",
-      ["PUT"],
-      async (_req, params, ctx) => {
-        const { did } = ctx.requireAuth();
-        const galleryRkey = params.galleryRkey;
-        const photoRkey = params.photoRkey;
-        const galleryUri = `at://${did}/social.grain.gallery/${galleryRkey}`;
-        const photoUri = `at://${did}/social.grain.photo/${photoRkey}`;
-        if (!galleryRkey || !photoRkey) return ctx.next();
-        const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
-        if (!photo) return ctx.next();
-        const {
-          items: [item],
-        } = ctx.indexService.getRecords<WithBffMeta<GalleryItem>>(
-          "social.grain.gallery.item",
-          {
-            where: [
-              {
-                field: "gallery",
-                equals: galleryUri,
-              },
-              {
-                field: "item",
-                equals: photoUri,
-              },
-            ],
-          },
-        );
-        if (!item) return ctx.next();
-        await ctx.deleteRecord(item.uri);
-        const gallery = getGallery(did, galleryRkey, ctx);
-        if (!gallery) return ctx.next();
-        return ctx.html(
-          <PhotoSelectButton
-            galleryUri={galleryUri}
-            itemUris={gallery.items?.filter(isPhotoView).map((item) =>
-              item.uri
-            ) ?? []}
-            photo={photoToView(photo.did, photo)}
-          />,
-        );
-      },
-    ),
-    route("/actions/photo/:rkey", ["PUT"], async (req, params, ctx) => {
-      const { did } = ctx.requireAuth();
-      const photoRkey = params.rkey;
-      const formData = await req.formData();
-      const alt = formData.get("alt") as string;
-      const photoUri = `at://${did}/social.grain.photo/${photoRkey}`;
-      const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
-      if (!photo) return ctx.next();
-      await ctx.updateRecord<Photo>("social.grain.photo", photoRkey, {
-        photo: photo.photo,
-        aspectRatio: photo.aspectRatio,
-        alt,
-        createdAt: photo.createdAt,
-      });
-      return new Response(null, { status: 200 });
-    }),
-    route("/actions/photo/:rkey", ["DELETE"], (_req, params, ctx) => {
-      const { did } = ctx.requireAuth();
-      ctx.deleteRecord(
-        `at://${did}/social.grain.photo/${params.rkey}`,
-      );
-      return new Response(null, { status: 200 });
-    }),
-    route("/actions/favorite", ["POST"], async (req, _params, ctx) => {
-      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) {
-        await ctx.deleteRecord(favUri);
-        const favs = getGalleryFavs(galleryUri, ctx);
-        return ctx.html(
-          <FavoriteButton
-            currentUserDid={did}
-            favs={favs}
-            galleryUri={galleryUri}
-          />,
-        );
-      }
-
-      await ctx.createRecord<WithBffMeta<Favorite>>("social.grain.favorite", {
-        subject: galleryUri,
-        createdAt: new Date().toISOString(),
-      });
-
-      const favs = getGalleryFavs(galleryUri, ctx);
-
-      return ctx.html(
-        <FavoriteButton
-          currentUserDid={did}
-          galleryUri={galleryUri}
-          favs={favs}
-        />,
-      );
-    }),
-    route("/actions/profile/update", ["POST"], async (req, _params, ctx) => {
-      const { did, handle } = ctx.requireAuth();
-      const formData = await req.formData();
-      const displayName = formData.get("displayName") as string;
-      const description = formData.get("description") as string;
-      const uploadId = formData.get("uploadId") as string;
-
-      const record = ctx.indexService.getRecord<Profile>(
-        `at://${did}/social.grain.actor.profile/self`,
-      );
-
-      if (!record) {
-        return new Response("Profile record not found", { status: 404 });
-      }
-
-      await ctx.updateRecord<Profile>("social.grain.actor.profile", "self", {
-        displayName,
-        description,
-        avatar: photoProcessor.getUploadStatus(uploadId)?.blobRef ??
-          record.avatar,
-      });
-
-      return ctx.redirect(`/profile/${handle}`);
-    }),
-    route(
-      "/actions/gallery/:rkey/sort",
-      ["POST"],
-      async (req, params, ctx) => {
-        const { did, handle } = ctx.requireAuth();
-        const galleryRkey = params.rkey;
-        const galleryUri = `at://${did}/social.grain.gallery/${galleryRkey}`;
-        const {
-          items,
-        } = ctx.indexService.getRecords<WithBffMeta<GalleryItem>>(
-          "social.grain.gallery.item",
-          {
-            where: [
-              {
-                field: "gallery",
-                equals: galleryUri,
-              },
-            ],
-          },
-        );
-        const itemsMap = new Map<string, WithBffMeta<GalleryItem>>();
-        for (const item of items) {
-          itemsMap.set(item.item, item);
-        }
-        const formData = await req.formData();
-        const sortedItems = formData.getAll("item") as string[];
-        const updates = [];
-        let position = 0;
-        for (const sortedItemUri of sortedItems) {
-          const item = itemsMap.get(sortedItemUri);
-          if (!item) continue;
-          updates.push({
-            collection: "social.grain.gallery.item",
-            rkey: new AtUri(item.uri).rkey,
-            data: {
-              gallery: item.gallery,
-              item: item.item,
-              createdAt: item.createdAt,
-              position,
-            },
-          });
-          position++;
-        }
-        await ctx.updateRecords<WithBffMeta<GalleryItem>>(updates);
-        return ctx.redirect(
-          galleryLink(handle, new AtUri(galleryUri).rkey),
-        );
-      },
-    ),
-    ...photoUploadRoutes(),
-    ...avatarUploadRoutes(),
-  ],
-});
-
-type State = {
-  profile?: ProfileView;
-  scripts?: string[];
-  meta?: MetaDescriptor[];
-  notifications?: Un$Typed<NotificationView>[];
-};
-
-function readFileAsDataURL(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => resolve(e.target?.result as string);
-    reader.onerror = (e) => reject(e);
-    reader.readAsDataURL(file);
-  });
-}
-
-function createImageFromDataURL(dataURL: string): Promise<Image> {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.onload = () => resolve(img);
-    img.src = dataURL;
-  });
-}
-
-async function compressImageForPreview(file: File): Promise<string> {
-  const maxWidth = 500,
-    maxHeight = 500,
-    format = "jpeg";
-
-  // Create an image from the file
-  const dataUrl = await readFileAsDataURL(file);
-  const img = await createImageFromDataURL(dataUrl);
-
-  // Create a canvas with reduced dimensions
-  const canvas = createCanvas(img.width, img.height);
-  let width = img.width;
-  let height = img.height;
-
-  // Calculate new dimensions while maintaining aspect ratio
-  if (width > height) {
-    if (width > maxWidth) {
-      height = Math.round((height * maxWidth) / width);
-      width = maxWidth;
-    }
-  } else {
-    if (height > maxHeight) {
-      width = Math.round((width * maxHeight) / height);
-      height = maxHeight;
-    }
-  }
-
-  canvas.width = width;
-  canvas.height = height;
-
-  // Draw and compress the image
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    throw new Error("Failed to get canvas context");
-  }
-  ctx.drawImage(img, 0, 0, width, height);
-
-  // Convert to compressed image data URL
-  return canvas.toDataURL(format);
-}
-
-type TimelineItemType = "gallery" | "favorite";
-
-type TimelineItem = {
-  createdAt: string;
-  itemType: TimelineItemType;
-  itemUri: string;
-  actor: Un$Typed<ProfileView>;
-  gallery: GalleryView;
-};
-
-type TimelineOptions = {
-  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>[],
-): Map<string, WithBffMeta<Photo>[]> {
-  const galleryUris = galleries.map(
-    (gallery) =>
-      `at://${gallery.did}/social.grain.gallery/${new AtUri(gallery.uri).rkey}`,
-  );
-
-  if (galleryUris.length === 0) return new Map();
-
-  const { items: galleryItems } = ctx.indexService.getRecords<
-    WithBffMeta<GalleryItem>
-  >("social.grain.gallery.item", {
-    orderBy: [{ field: "position", direction: "asc" }],
-    where: [{ field: "gallery", in: galleryUris }],
-  });
-
-  const photoUris = galleryItems.map((item) => item.item).filter(Boolean);
-  if (photoUris.length === 0) return new Map();
-
-  const { items: photos } = ctx.indexService.getRecords<WithBffMeta<Photo>>(
-    "social.grain.photo",
-    {
-      where: [{ field: "uri", in: photoUris }],
-    },
-  );
-
-  const photosMap = new Map<string, WithBffMeta<Photo>>();
-  for (const photo of photos) {
-    photosMap.set(photo.uri, photo);
-  }
-
-  const galleryPhotosMap = new Map<string, WithBffMeta<Photo>[]>();
-  for (const item of galleryItems) {
-    const galleryUri = item.gallery;
-    const photo = photosMap.get(item.item);
-
-    if (!galleryPhotosMap.has(galleryUri)) {
-      galleryPhotosMap.set(galleryUri, []);
-    }
-
-    if (photo) {
-      galleryPhotosMap.get(galleryUri)?.push(photo);
-    }
-  }
-
-  return galleryPhotosMap;
-}
-
-function processGalleries(
-  ctx: BffContext,
-  options?: TimelineOptions,
-): TimelineItem[] {
-  const items: TimelineItem[] = [];
-
-  const whereClause = options?.actorDid
-    ? [{ field: "did", equals: options.actorDid }]
-    : undefined;
-
-  const { items: galleries } = ctx.indexService.getRecords<
-    WithBffMeta<Gallery>
-  >("social.grain.gallery", {
-    orderBy: [{ field: "createdAt", direction: "desc" }],
-    where: whereClause,
-  });
-
-  if (galleries.length === 0) return items;
-
-  // Get photos for all galleries
-  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
-
-  for (const gallery of galleries) {
-    const actor = ctx.indexService.getActor(gallery.did);
-    if (!actor) continue;
-    const profile = getActorProfile(actor.did, ctx);
-    if (!profile) continue;
-
-    const galleryUri = `at://${gallery.did}/social.grain.gallery/${
-      new AtUri(gallery.uri).rkey
-    }`;
-    const galleryPhotos = galleryPhotosMap.get(galleryUri) || [];
-
-    const galleryView = galleryToView(gallery, profile, galleryPhotos);
-    items.push({
-      itemType: "gallery",
-      createdAt: gallery.createdAt,
-      itemUri: galleryView.uri,
-      actor: galleryView.creator,
-      gallery: galleryView,
-    });
-  }
-
-  return items;
-}
-
-function processFavs(
-  ctx: BffContext,
-  options?: TimelineOptions,
-): TimelineItem[] {
-  const items: TimelineItem[] = [];
-
-  const whereClause = options?.actorDid
-    ? [{ field: "did", equals: options.actorDid }]
-    : undefined;
-
-  const { items: favs } = ctx.indexService.getRecords<WithBffMeta<Favorite>>(
-    "social.grain.favorite",
-    {
-      orderBy: [{ field: "createdAt", direction: "desc" }],
-      where: whereClause,
-    },
-  );
-
-  if (favs.length === 0) return items;
-
-  // Collect all gallery references from favorites
-  const galleryRefs = new Map<string, WithBffMeta<Gallery>>();
-
-  for (const favorite of favs) {
-    if (!favorite.subject) continue;
-
-    try {
-      const atUri = new AtUri(favorite.subject);
-      const galleryDid = atUri.hostname;
-      const galleryRkey = atUri.rkey;
-      const galleryUri =
-        `at://${galleryDid}/social.grain.gallery/${galleryRkey}`;
-
-      const gallery = ctx.indexService.getRecord<WithBffMeta<Gallery>>(
-        galleryUri,
-      );
-      if (gallery) {
-        galleryRefs.set(galleryUri, gallery);
-      }
-    } catch (e) {
-      console.error("Error processing favorite:", e);
-    }
-  }
-
-  const galleries = Array.from(galleryRefs.values());
-  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
-
-  for (const favorite of favs) {
-    if (!favorite.subject) continue;
-
-    try {
-      const atUri = new AtUri(favorite.subject);
-      const galleryDid = atUri.hostname;
-      const galleryRkey = atUri.rkey;
-      const galleryUri =
-        `at://${galleryDid}/social.grain.gallery/${galleryRkey}`;
-
-      const gallery = galleryRefs.get(galleryUri);
-      if (!gallery) continue;
-
-      const galleryActor = ctx.indexService.getActor(galleryDid);
-      if (!galleryActor) continue;
-      const galleryProfile = getActorProfile(galleryActor.did, ctx);
-      if (!galleryProfile) continue;
-
-      const favActor = ctx.indexService.getActor(favorite.did);
-      if (!favActor) continue;
-      const favProfile = getActorProfile(favActor.did, ctx);
-      if (!favProfile) continue;
-
-      const galleryPhotos = galleryPhotosMap.get(galleryUri) || [];
-      const galleryView = galleryToView(gallery, galleryProfile, galleryPhotos);
-
-      items.push({
-        itemType: "favorite",
-        createdAt: favorite.createdAt,
-        itemUri: favorite.uri,
-        actor: favProfile,
-        gallery: galleryView,
-      });
-    } catch (e) {
-      console.error("Error processing favorite:", e);
-      continue;
-    }
-  }
-
-  return items;
-}
-
-function getTimelineItems(
-  ctx: BffContext,
-  options?: TimelineOptions,
-): TimelineItem[] {
-  const galleryItems = processGalleries(ctx, options);
-  const favsItems = processFavs(ctx, options);
-  const timelineItems = [...galleryItems, ...favsItems];
-
-  return timelineItems.sort(
-    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-  );
-}
-
-function getTimeline(ctx: BffContext): TimelineItem[] {
-  return getTimelineItems(ctx);
-}
-
-function getActorTimeline(handleOrDid: string, ctx: BffContext) {
-  let did: string;
-  if (handleOrDid.includes("did:")) {
-    did = handleOrDid;
-  } else {
-    const actor = ctx.indexService.getActorByHandle(handleOrDid);
-    if (!actor) return [];
-    did = actor.did;
-  }
-  return getTimelineItems(ctx, { actorDid: did });
-}
-
-function getActorPhotos(handleOrDid: string, ctx: BffContext) {
-  let did: string;
-  if (handleOrDid.includes("did:")) {
-    did = handleOrDid;
-  } else {
-    const actor = ctx.indexService.getActorByHandle(handleOrDid);
-    if (!actor) return [];
-    did = actor.did;
-  }
-  const photos = ctx.indexService.getRecords<WithBffMeta<Photo>>(
-    "social.grain.photo",
-    {
-      where: [{ field: "did", equals: did }],
-      orderBy: [{ field: "createdAt", direction: "desc" }],
-    },
-  );
-  return photos.items.map((photo) => photoToView(photo.did, photo));
-}
-
-function getActorGalleries(handleOrDid: string, ctx: BffContext) {
-  let did: string;
-  if (handleOrDid.includes("did:")) {
-    did = handleOrDid;
-  } else {
-    const actor = ctx.indexService.getActorByHandle(handleOrDid);
-    if (!actor) return [];
-    did = actor.did;
-  }
-  const { items: galleries } = ctx.indexService.getRecords<
-    WithBffMeta<Gallery>
-  >("social.grain.gallery", {
-    where: [{ field: "did", equals: did }],
-    orderBy: [{ field: "createdAt", direction: "desc" }],
-  });
-  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
-  const creator = getActorProfile(did, ctx);
-  if (!creator) return [];
-  return galleries.map((gallery) =>
-    galleryToView(gallery, creator, galleryPhotosMap.get(gallery.uri) ?? [])
-  );
-}
-
-function getNotifications(
-  currentUser: ActorTable,
-  ctx: BffContext,
-) {
-  const { lastSeenNotifs } = currentUser;
-  const notifications = ctx.getNotifications<NotificationRecords>();
-  return notifications.map((notification) => {
-    const actor = ctx.indexService.getActor(notification.did);
-    const authorProfile = getActorProfile(notification.did, ctx);
-    if (!actor || !authorProfile) return null;
-    return notificationToView(
-      notification,
-      authorProfile,
-      lastSeenNotifs,
-    );
-  }).filter((view): view is Un$Typed<NotificationView> => Boolean(view));
-}
-
-function getGallery(handleOrDid: string, rkey: string, ctx: BffContext) {
-  let did: string;
-  if (handleOrDid.includes("did:")) {
-    did = handleOrDid;
-  } else {
-    const actor = ctx.indexService.getActorByHandle(handleOrDid);
-    if (!actor) return null;
-    did = actor.did;
-  }
-  const gallery = ctx.indexService.getRecord<WithBffMeta<Gallery>>(
-    `at://${did}/social.grain.gallery/${rkey}`,
-  );
-  if (!gallery) return null;
-  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, [gallery]);
-  const profile = getActorProfile(did, ctx);
-  if (!profile) return null;
-  return galleryToView(
-    gallery,
-    profile,
-    galleryPhotosMap.get(gallery.uri) ?? [],
-  );
-}
-
-async function deleteGallery(uri: string, ctx: BffContext) {
-  await ctx.deleteRecord(uri);
-  const { items: galleryItems } = ctx.indexService.getRecords<
-    WithBffMeta<GalleryItem>
-  >("social.grain.gallery.item", {
-    where: [{ field: "gallery", equals: uri }],
-  });
-  for (const item of galleryItems) {
-    await ctx.deleteRecord(item.uri);
-  }
-  const { items: favs } = ctx.indexService.getRecords<WithBffMeta<Favorite>>(
-    "social.grain.favorite",
-    {
-      where: [{ field: "subject", equals: uri }],
-    },
-  );
-  for (const fav of favs) {
-    await ctx.deleteRecord(fav.uri);
-  }
-}
-
-function getGalleryFavs(galleryUri: string, ctx: BffContext) {
-  const atUri = new AtUri(galleryUri);
-  const results = ctx.indexService.getRecords<WithBffMeta<Favorite>>(
-    "social.grain.favorite",
-    {
-      where: [
-        {
-          field: "subject",
-          equals: `at://${atUri.hostname}/social.grain.gallery/${atUri.rkey}`,
-        },
-      ],
-    },
-  );
-  return results.items;
-}
-
-function getPageMeta(pageUrl: string): MetaDescriptor[] {
-  return [
-    {
-      tagName: "link",
-      property: "canonical",
-      href: `${PUBLIC_URL}${pageUrl}`,
-    },
-    { property: "og:site_name", content: "Grain Social" },
-  ];
-}
-
-function getGalleryMeta(gallery: GalleryView): MetaDescriptor[] {
-  return [
-    // { property: "og:type", content: "website" },
-    {
-      property: "og:url",
-      content: `${PUBLIC_URL}${
-        galleryLink(
-          gallery.creator.handle,
-          new AtUri(gallery.uri).rkey,
-        )
-      }`,
-    },
-    { property: "og:title", content: (gallery.record as Gallery).title },
-    {
-      property: "og:description",
-      content: (gallery.record as Gallery).description,
-    },
-    {
-      property: "og:image",
-      content: gallery?.items?.filter(isPhotoView)?.[0]?.thumb,
-    },
-  ];
-}
-
-function Root(props: Readonly<RootProps<State>>) {
-  const profile = props.ctx.state.profile;
-  const scripts = props.ctx.state.scripts;
-  const hasNotifications =
-    props.ctx.state.notifications?.find((n) => n.isRead === false) !==
-      undefined;
-  return (
-    <html lang="en" class="w-full h-full">
-      <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <Meta meta={props.ctx.state.meta} />
-        {GOATCOUNTER_URL
-          ? (
-            <script
-              data-goatcounter={GOATCOUNTER_URL}
-              async
-              src="//gc.zgo.at/count.js"
-            />
-          )
-          : null}
-        <script src="https://unpkg.com/htmx.org@1.9.10" />
-        <script src="https://unpkg.com/hyperscript.org@0.9.14" />
-        <script src="https://unpkg.com/sortablejs@1.15.6" />
-        <style dangerouslySetInnerHTML={{ __html: CSS }} />
-        <link
-          rel="stylesheet"
-          href={`/static/styles.css?${staticFilesHash.get("styles.css")}`}
-        />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin="anonymous"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Jersey+20&display=swap"
-          rel="stylesheet"
-        />
-        <link
-          rel="stylesheet"
-          href="https://unpkg.com/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"
-          preload
-        />
-        {scripts?.map((file) => (
-          <script
-            key={file}
-            src={`/static/${file}?${staticFilesHash.get(file)}`}
-          />
-        ))}
-      </head>
-      <body class="h-full w-full dark:bg-zinc-950 dark:text-white">
-        <Layout id="layout" class="border-zinc-200 dark:border-zinc-800">
-          <Layout.Nav
-            heading={
-              <h1 class="font-['Jersey_20'] text-4xl text-zinc-900 dark:text-white">
-                grain
-                <sub class="bottom-[0.75rem] text-[1rem]">beta</sub>
-              </h1>
-            }
-            profile={profile}
-            hasNotifications={hasNotifications}
-            class="border-zinc-200 dark:border-zinc-800"
-          />
-          <Layout.Content>{props.children}</Layout.Content>
-        </Layout>
-      </body>
-    </html>
-  );
-}
-
-function Header({
-  children,
-  class: classProp,
-  ...props
-}: Readonly<
-  JSX.HTMLAttributes<HTMLHeadingElement> & { children: ComponentChildren }
->) {
-  return (
-    <h1 class={cn("text-xl font-semibold", classProp)} {...props}>
-      {children}
-    </h1>
-  );
-}
-
-function AvatarButton({
-  profile,
-}: Readonly<{ profile: Un$Typed<ProfileView> }>) {
-  return (
-    <button
-      type="button"
-      class="cursor-pointer"
-      hx-get={`/dialogs/avatar/${profile.handle}`}
-      hx-trigger="click"
-      hx-target="body"
-      hx-swap="afterbegin"
-    >
-      <img
-        src={profile.avatar}
-        alt={profile.handle}
-        class="rounded-full object-cover size-16"
-      />
-    </button>
-  );
-}
-
-function AvatarDialog({
-  profile,
-}: Readonly<{ profile: Un$Typed<ProfileView> }>) {
-  return (
-    <Dialog>
-      <Dialog.X />
-      <div
-        class="w-[400px] h-[400px] flex flex-col p-4 z-10"
-        _={Dialog._closeOnClick}
-      >
-        <ActorAvatar class="w-full h-full" profile={profile} />
-      </div>
-    </Dialog>
-  );
-}
-
-function ActorAvatar({
-  profile,
-  class: classProp,
-}: Readonly<{ profile: Un$Typed<ProfileView>; class?: string }>) {
-  return (
-    <img
-      src={profile.avatar}
-      alt={profile.handle}
-      title={profile.handle}
-      class={cn("rounded-full object-cover", classProp)}
-    />
-  );
-}
-
-function ActorInfo({ profile }: Readonly<{ profile: Un$Typed<ProfileView> }>) {
-  return (
-    <div class="flex items-center gap-2 min-w-0 flex-1">
-      <ActorAvatar profile={profile} class="size-7 shrink-0" />
-      <a
-        href={profileLink(profile.handle)}
-        class="hover:underline text-zinc-600 dark:text-zinc-500 truncate max-w-[300px] sm:max-w-[400px]"
-      >
-        <span class="text-zinc-950 dark:text-zinc-50 font-semibold text-">
-          {profile.displayName || profile.handle}
-        </span>{" "}
-        <span class="truncate">@{profile.handle}</span>
-      </a>
-    </div>
-  );
-}
-
-function Timeline({ items }: Readonly<{ items: TimelineItem[] }>) {
-  return (
-    <div class="px-4 mb-4">
-      <div class="my-4">
-        <Header>Timeline</Header>
-      </div>
-      <ul class="space-y-4 relative divide-zinc-200 dark:divide-zinc-800 divide-y w-fit">
-        {items.map((item) => <TimelineItem item={item} key={item.itemUri} />)}
-      </ul>
-    </div>
-  );
-}
-
-function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
-  return (
-    <li>
-      <div class="w-fit flex flex-col gap-4 pb-4">
-        <div class="flex items-center justify-between gap-2 w-full">
-          <ActorInfo profile={item.actor} />
-          <span class="shrink-0">
-            {formatRelativeTime(new Date(item.createdAt))}
-          </span>
-        </div>
-        {item.gallery.items?.filter(isPhotoView).length
-          ? (
-            <GalleryPreviewLink
-              gallery={item.gallery}
-            />
-          )
-          : null}
-        <p>
-          {item.itemType === "favorite" ? "Favorited" : "Created"}{" "}
-          <a
-            href={galleryLink(
-              item.gallery.creator.handle,
-              new AtUri(item.gallery.uri).rkey,
-            )}
-            class="font-semibold hover:underline"
-          >
-            {(item.gallery.record as Gallery).title}
-          </a>
-        </p>
-      </div>
-    </li>
-  );
-}
-
-function GalleryPreviewLink({
-  gallery,
-  size = "default",
-}: Readonly<{ gallery: Un$Typed<GalleryView>; size?: "small" | "default" }>) {
-  const gap = size === "small" ? "gap-1" : "gap-2";
-  return (
-    <a
-      href={galleryLink(
-        gallery.creator.handle,
-        new AtUri(gallery.uri).rkey,
-      )}
-      class={cn("flex w-full max-w-md aspect-[3/2] overflow-hidden", gap)}
-    >
-      <div class="w-2/3 h-full">
-        <img
-          src={gallery.items?.filter(isPhotoView)[0].thumb}
-          alt={gallery.items?.filter(isPhotoView)[0].alt}
-          class="w-full h-full object-cover"
-        />
-      </div>
-      <div class={cn("w-1/3 flex flex-col h-full", gap)}>
-        <div class="h-1/2">
-          {gallery.items?.filter(isPhotoView)?.[1]
-            ? (
-              <img
-                src={gallery.items?.filter(isPhotoView)?.[1]
-                  ?.thumb}
-                alt={gallery.items?.filter(isPhotoView)?.[1]?.alt}
-                class="w-full h-full object-cover"
-              />
-            )
-            : <div className="w-full h-full bg-zinc-200 dark:bg-zinc-900" />}
-        </div>
-        <div class="h-1/2">
-          {gallery.items?.filter(isPhotoView)?.[2]
-            ? (
-              <img
-                src={gallery.items?.filter(isPhotoView)?.[2]
-                  ?.thumb}
-                alt={gallery.items?.filter(isPhotoView)?.[2]?.alt}
-                class="w-full h-full object-cover"
-              />
-            )
-            : <div className="w-full h-full bg-zinc-200 dark:bg-zinc-900" />}
-        </div>
-      </div>
-    </a>
-  );
-}
-
-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-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 text-zinc-950 dark:text-zinc-50",
-      )}
-      {...(isFollowing
-        ? {
-          children: "Following",
-          "hx-delete": `/actions/follow/${followeeDid}/${
-            new AtUri(followUri).rkey
-          }`,
-        }
-        : {
-          children: (
-            <>
-              <i class="fa-solid fa-plus mr-2" />
-              Follow
-            </>
-          ),
-          "hx-post": `/actions/follow/${followeeDid}`,
-        })}
-      hx-trigger="click"
-      hx-target="this"
-      hx-swap="outerHTML"
-    />
-  );
-}
-
-function formatRelativeTime(date: Date) {
-  const now = new Date();
-  const weeks = differenceInWeeks(now, date);
-  if (weeks > 0) return `${weeks}w`;
-
-  const days = differenceInDays(now, date);
-  if (days > 0) return `${days}d`;
-
-  const hours = differenceInHours(now, date);
-  if (hours > 0) return `${hours}h`;
-
-  const minutes = differenceInMinutes(now, date);
-  return `${Math.max(1, minutes)}m`;
-}
-
-function NotificationsPage(
-  { notifications }: Readonly<{ notifications: Un$Typed<NotificationView>[] }>,
-) {
-  return (
-    <div class="px-4 mb-4">
-      <div hx-post="/actions/update-seen" hx-trigger="load delay:1s" />
-      <div class="my-4">
-        <Header>Notifications</Header>
-      </div>
-      <ul class="space-y-4 relative divide-zinc-200 dark:divide-zinc-800 divide-y">
-        {notifications.length
-          ? (
-            notifications.map((notification) => (
-              <li
-                key={notification.uri}
-                class="flex flex-col gap-4 pb-4"
-              >
-                <div class="flex flex-wrap items-center gap-2">
-                  <a
-                    href={profileLink(notification.author.handle)}
-                    class="flex items-center gap-2 hover:underline"
-                  >
-                    <ActorAvatar
-                      profile={notification.author}
-                      class="h-8 w-8"
-                    />
-                    <span class="font-semibold break-words">
-                      {notification.author.displayName ??
-                        notification.author.handle}
-                    </span>
-                  </a>
-                  <span class="break-words">
-                    favorited your gallery · {formatRelativeTime(
-                      new Date((notification.record as Favorite).createdAt),
-                    )}
-                  </span>
-                </div>
-                <div
-                  hx-get={`/embed/profile/${
-                    new AtUri(notification.reasonSubject ?? "").hostname
-                  }/gallery/${
-                    new AtUri(notification.reasonSubject ?? "").rkey
-                  }`}
-                  hx-trigger="load"
-                  hx-target="this"
-                  hx-swap="innerHTML"
-                  class="w-[200px]"
-                />
-              </li>
-            ))
-          )
-          : <li>No notifications yet.</li>}
-      </ul>
-    </div>
-  );
-}
-
-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;
-  const displayName = profile.displayName || profile.handle;
-  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">
-        <div class="flex flex-col mb-4">
-          <AvatarButton profile={profile} />
-          <p class="text-2xl font-bold">{displayName}</p>
-          <p class="text-zinc-600 dark:text-zinc-500">@{profile.handle}</p>
-          {profile.description
-            ? <p class="mt-2">{profile.description}</p>
-            : null}
-        </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} />
-            </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>
-                <a href="/upload">
-                  <i class="fa-solid fa-upload mr-2" />
-                  Upload
-                </a>
-              </Button>
-              <Button
-                variant="primary"
-                type="button"
-                hx-get="/dialogs/profile"
-                hx-target="#layout"
-                hx-swap="afterbegin"
-                class="w-full sm:w-fit"
-              >
-                Edit Profile
-              </Button>
-              <Button
-                variant="primary"
-                type="button"
-                class="w-full sm:w-fit"
-                hx-get="/dialogs/gallery/new"
-                hx-target="#layout"
-                hx-swap="afterbegin"
-              >
-                Create Gallery
-              </Button>
-            </div>
-          )
-          : null}
-      </div>
-      <div class="my-4 space-x-2 w-full flex sm:w-fit" role="tablist">
-        <button
-          type="button"
-          hx-get={profileLink(profile.handle)}
-          hx-target="body"
-          hx-swap="outerHTML"
-          class={cn(
-            "flex-1 py-2 px-4 cursor-pointer font-semibold",
-            !selectedTab && "bg-zinc-100 dark:bg-zinc-800 font-semibold",
-          )}
-          role="tab"
-          aria-selected="true"
-          aria-controls="tab-content"
-        >
-          Activity
-        </button>
-        <button
-          type="button"
-          hx-get={profileLink(profile.handle) + "?tab=galleries"}
-          hx-target="#profile-page"
-          hx-swap="outerHTML"
-          class={cn(
-            "flex-1 py-2 px-4 cursor-pointer font-semibold",
-            selectedTab === "galleries" && "bg-zinc-100 dark:bg-zinc-800",
-          )}
-          role="tab"
-          aria-selected="false"
-          aria-controls="tab-content"
-        >
-          Galleries
-        </button>
-      </div>
-      <div id="tab-content" role="tabpanel">
-        {!selectedTab
-          ? (
-            <ul class="space-y-4 relative divide-zinc-200 dark:divide-zinc-800 divide-y w-fit">
-              {timelineItems.length
-                ? (
-                  timelineItems.map((item) => (
-                    <TimelineItem item={item} key={item.itemUri} />
-                  ))
-                )
-                : <li>No activity yet.</li>}
-            </ul>
-          )
-          : null}
-        {selectedTab === "galleries"
-          ? (
-            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-4">
-              {galleries?.length
-                ? (
-                  galleries.map((gallery) => (
-                    <a
-                      href={galleryLink(
-                        gallery.creator.handle,
-                        new AtUri(gallery.uri).rkey,
-                      )}
-                      class="cursor-pointer relative aspect-square"
-                    >
-                      {gallery.items?.length
-                        ? (
-                          <img
-                            src={gallery.items?.filter(isPhotoView)?.[0]
-                              ?.fullsize}
-                            alt={gallery.items?.filter(isPhotoView)?.[0]?.alt}
-                            class="w-full h-full object-cover"
-                          />
-                        )
-                        : (
-                          <div class="w-full h-full bg-zinc-200 dark:bg-zinc-900" />
-                        )}
-                      <div class="absolute bottom-0 left-0 bg-black/80 text-white p-2">
-                        {(gallery.record as Gallery).title}
-                      </div>
-                    </a>
-                  ))
-                )
-                : <p>No galleries yet.</p>}
-            </div>
-          )
-          : null}
-      </div>
-    </div>
-  );
-}
-
-function UploadPage({
-  handle,
-  photos,
-  returnTo,
-}: Readonly<{ handle: string; photos: PhotoView[]; returnTo?: string }>) {
-  return (
-    <div class="flex flex-col px-4 pt-4 mb-4 space-y-4">
-      <div class="flex">
-        <div class="flex-1">
-          {returnTo
-            ? (
-              <a href={returnTo} class="hover:underline">
-                <i class="fa-solid fa-arrow-left mr-2" />
-                Back to gallery
-              </a>
-            )
-            : (
-              <a href={profileLink(handle)} class="hover:underline">
-                <i class="fa-solid fa-arrow-left mr-2" />
-                Back to profile
-              </a>
-            )}
-        </div>
-      </div>
-      <Button variant="primary" class="mb-4 w-full sm:w-fit" asChild>
-        <label>
-          <i class="fa fa-plus"></i> Add photos
-          <input
-            class="hidden"
-            type="file"
-            multiple
-            accept="image/*"
-            _="on change call uploadPhotos(me)"
-          />
-        </label>
-      </Button>
-      <div
-        id="image-preview"
-        class="w-full h-full grid grid-cols-2 sm:grid-cols-5 gap-2"
-      >
-        {photos.map((photo) => (
-          <PhotoPreview key={photo.cid} src={photo.thumb} uri={photo.uri} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function ProfileDialog({
-  profile,
-}: Readonly<{
-  profile: ProfileView;
-}>) {
-  return (
-    <Dialog>
-      <Dialog.Content class="dark:bg-zinc-950 relative">
-        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
-        <Dialog.Title>Edit my profile</Dialog.Title>
-        <div>
-          <AvatarForm src={profile.avatar} alt={profile.handle} />
-        </div>
-        <form
-          hx-post="/actions/profile/update"
-          hx-swap="none"
-          _="on htmx:afterOnLoad trigger closeModal"
-        >
-          <div id="image-input" />
-          <div class="mb-4 relative">
-            <label htmlFor="displayName">Display Name</label>
-            <Input
-              type="text"
-              required
-              id="displayName"
-              name="displayName"
-              class="dark:bg-zinc-800 dark:text-white"
-              value={profile.displayName}
-              autoFocus
-            />
-          </div>
-          <div class="mb-4 relative">
-            <label htmlFor="description">Description</label>
-            <Textarea
-              id="description"
-              name="description"
-              rows={4}
-              class="dark:bg-zinc-800 dark:text-white"
-            >
-              {profile.description}
-            </Textarea>
-          </div>
-          <Button type="submit" variant="primary" class="w-full">
-            Update
-          </Button>
-          <Button
-            variant="secondary"
-            type="button"
-            class="w-full"
-            _={Dialog._closeOnClick}
-          >
-            Cancel
-          </Button>
-        </form>
-      </Dialog.Content>
-    </Dialog>
-  );
-}
-
-function AvatarForm({ src, alt }: Readonly<{ src?: string; alt?: string }>) {
-  return (
-    <form
-      id="avatar-file-form"
-      hx-post="/actions/avatar/upload-start"
-      hx-target="#image-preview"
-      hx-swap="innerHTML"
-      hx-encoding="multipart/form-data"
-      hx-trigger="change from:#file"
-    >
-      <label htmlFor="file">
-        <span class="sr-only">Upload avatar</span>
-        <div class="border rounded-full border-zinc-900 w-16 h-16 mx-auto mb-2 relative my-2 cursor-pointer">
-          <div class="absolute bottom-0 right-0 bg-zinc-800 rounded-full w-5 h-5 flex items-center justify-center z-10">
-            <i class="fa-solid fa-camera text-white text-xs"></i>
-          </div>
-          <div id="image-preview" class="w-full h-full">
-            {src
-              ? (
-                <img
-                  src={src}
-                  alt={alt}
-                  className="rounded-full w-full h-full object-cover"
-                />
-              )
-              : null}
-          </div>
-        </div>
-        <input
-          class="hidden"
-          type="file"
-          id="file"
-          name="file"
-          accept="image/*"
-        />
-      </label>
-    </form>
-  );
-}
-
-function GalleryPage({
-  gallery,
-  favs = [],
-  currentUserDid,
-}: Readonly<{
-  gallery: GalleryView;
-  favs: WithBffMeta<Favorite>[];
-  currentUserDid?: string;
-}>) {
-  const isCreator = currentUserDid === gallery.creator.did;
-  const isLoggedIn = !!currentUserDid;
-  const description = (gallery.record as Gallery).description;
-  return (
-    <div class="px-4">
-      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4 mb-2">
-        <div class="flex flex-col space-y-2 mb-4">
-          <h1 class="font-bold text-2xl">
-            {(gallery.record as Gallery).title}
-          </h1>
-          <ActorInfo profile={gallery.creator} />
-          {description ? <p>{description}</p> : null}
-        </div>
-        {isLoggedIn && isCreator
-          ? (
-            <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
-              <Button
-                variant="primary"
-                class="self-start w-full sm:w-fit"
-                hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}`}
-                hx-target="#layout"
-                hx-swap="afterbegin"
-              >
-                Edit
-              </Button>
-              <Button
-                hx-get={`/dialogs/photo-select/${new AtUri(gallery.uri).rkey}`}
-                hx-target="#layout"
-                hx-swap="afterbegin"
-                variant="primary"
-                class="self-start w-full sm:w-fit"
-              >
-                Add photos
-              </Button>
-              <Button
-                variant="primary"
-                class="self-start w-full sm:w-fit"
-                hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}/sort`}
-                hx-target="#layout"
-                hx-swap="afterbegin"
-              >
-                Sort order
-              </Button>
-              <ShareGalleryButton gallery={gallery} />
-            </div>
-          )
-          : null}
-        {!isCreator
-          ? (
-            <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}
-              />
-            </div>
-          )
-          : null}
-      </div>
-      <div class="flex justify-end mb-2">
-        <Button
-          id="justified-button"
-          title="Justified layout"
-          variant="primary"
-          class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
-          _="on click call toggleLayout('justified')
-            set @data-selected to 'true'
-            set #masonry-button's @data-selected to 'false'"
-        >
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="2" y="2" width="8" height="6" fill="currentColor" rx="1" />
-            <rect
-              x="12"
-              y="2"
-              width="10"
-              height="6"
-              fill="currentColor"
-              rx="1"
-            />
-            <rect
-              x="2"
-              y="10"
-              width="6"
-              height="6"
-              fill="currentColor"
-              rx="1"
-            />
-            <rect
-              x="10"
-              y="10"
-              width="12"
-              height="6"
-              fill="currentColor"
-              rx="1"
-            />
-            <rect
-              x="2"
-              y="18"
-              width="20"
-              height="4"
-              fill="currentColor"
-              rx="1"
-            />
-          </svg>
-        </Button>
-        <Button
-          id="masonry-button"
-          title="Masonry layout"
-          variant="primary"
-          data-selected="false"
-          class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
-          _="on click call toggleLayout('masonry')
-            set @data-selected to 'true'
-            set #justified-button's @data-selected to 'false'"
-        >
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect x="2" y="2" width="8" height="8" fill="currentColor" rx="1" />
-            <rect
-              x="12"
-              y="2"
-              width="8"
-              height="4"
-              fill="currentColor"
-              rx="1"
-            />
-            <rect
-              x="12"
-              y="8"
-              width="8"
-              height="6"
-              fill="currentColor"
-              rx="1"
-            />
-            <rect
-              x="2"
-              y="12"
-              width="8"
-              height="8"
-              fill="currentColor"
-              rx="1"
-            />
-            <rect
-              x="12"
-              y="16"
-              width="8"
-              height="4"
-              fill="currentColor"
-              rx="1"
-            />
-          </svg>
-        </Button>
-      </div>
-      <div
-        id="masonry-container"
-        class="h-0 overflow-hidden relative mx-auto w-full"
-        _="on load or htmx:afterSettle call computeLayout()"
-      >
-        {gallery.items?.filter(isPhotoView)?.length
-          ? gallery?.items
-            ?.filter(isPhotoView)
-            ?.map((photo) => (
-              <PhotoButton
-                key={photo.cid}
-                photo={photo}
-                gallery={gallery}
-              />
-            ))
-          : null}
-      </div>
-    </div>
-  );
-}
-
-function PhotoButton({
-  photo,
-  gallery,
-}: Readonly<{
-  photo: PhotoView;
-  gallery: GalleryView;
-}>) {
-  return (
-    <button
-      id={`photo-${new AtUri(photo.uri).rkey}`}
-      type="button"
-      hx-get={photoDialogLink(gallery, photo)}
-      hx-trigger="click"
-      hx-target="#layout"
-      hx-swap="afterbegin"
-      class="masonry-tile absolute cursor-pointer"
-      data-width={photo.aspectRatio?.width}
-      data-height={photo.aspectRatio?.height}
-    >
-      <img
-        src={photo.fullsize}
-        alt={photo.alt}
-        class="w-full h-full object-cover"
-      />
-      {photo.alt
-        ? (
-          <div class="absolute bg-zinc-950 dark:bg-zinc-900 bottom-1 right-1 sm:bottom-1 sm:right-1 text-xs text-white font-semibold py-[1px] px-[3px]">
-            ALT
-          </div>
-        )
-        : null}
-    </button>
-  );
-}
-
-function GallerySortDialog({ gallery }: Readonly<{ gallery: GalleryView }>) {
-  return (
-    <Dialog>
-      <Dialog.Content class="dark:bg-zinc-950 relative">
-        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
-        <Dialog.Title>Sort gallery</Dialog.Title>
-        <p class="my-2 text-center">Drag photos to rearrange</p>
-        <form
-          hx-post={`/actions/gallery/${new AtUri(gallery.uri).rkey}/sort`}
-          hx-trigger="submit"
-          hx-swap="none"
-        >
-          <div class="sortable grid grid-cols-3 sm:grid-cols-5 gap-2 mt-2">
-            {gallery?.items?.filter(isPhotoView).map((item) => (
-              <div
-                key={item.cid}
-                class="relative aspect-square cursor-grab"
-              >
-                <input type="hidden" name="item" value={item.uri} />
-                <img
-                  src={item.fullsize}
-                  alt={item.alt}
-                  class="w-full h-full absolute object-cover"
-                />
-              </div>
-            ))}
-          </div>
-          <div class="flex flex-col gap-2 mt-2">
-            <Button
-              variant="primary"
-              type="submit"
-              class="w-full"
-            >
-              Save
-            </Button>
-            <Button
-              variant="secondary"
-              type="button"
-              class="w-full"
-              _={Dialog._closeOnClick}
-            >
-              Cancel
-            </Button>
-          </div>
-        </form>
-      </Dialog.Content>
-    </Dialog>
-  );
-}
-
-function ShareGalleryButton({ gallery }: Readonly<{ gallery: GalleryView }>) {
-  const intentLink = `https://bsky.app/intent/compose?text=${
-    encodeURIComponent(
-      "Check out this gallery on @grain.social \n" +
-        publicGalleryLink(gallery.creator.handle, gallery.uri),
-    )
-  }`;
-  return (
-    <Button
-      variant="primary"
-      asChild
-    >
-      <a href={intentLink} target="_blank" rel="noopener noreferrer">
-        <i class="fa-solid fa-arrow-up-from-bracket mr-2" />
-        Share to Bluesky
-      </a>
-    </Button>
-  );
-}
-
-// function ShareGalleryButton({ gallery }: Readonly<{ gallery: GalleryView }>) {
-//   return (
-//     <>
-//       <input
-//         type="hidden"
-//         id="copy-text"
-//         value={publicGalleryLink(gallery.creator.handle, gallery.uri)}
-//       />
-//       <Button
-//         variant="primary"
-//         _={`on click
-//       set copyText to #copy-text.value
-//       writeText(copyText) on navigator.clipboard
-//       alert('Copied to clipboard')`}
-//       >
-//         <i class="fa-solid fa-share-nodes mr-2" />
-//         Share
-//       </Button>
-//     </>
-//   );
-// }
-
-function FavoriteButton({
-  currentUserDid,
-  favs = [],
-  galleryUri,
-}: Readonly<{
-  currentUserDid?: string;
-  favs: WithBffMeta<Favorite>[];
-  galleryUri: string;
-}>) {
-  const favUri = favs.find((s) => currentUserDid === s.did)?.uri;
-  return (
-    <Button
-      variant="primary"
-      class="self-start w-full sm:w-fit"
-      type="button"
-      hx-post={`/actions/favorite?galleryUri=${galleryUri}${
-        favUri ? "&favUri=" + favUri : ""
-      }`}
-      hx-target="this"
-      hx-swap="outerHTML"
-    >
-      <i class={cn("fa-heart", favUri ? "fa-solid" : "fa-regular")}></i>{" "}
-      {favs.length}
-    </Button>
-  );
-}
-
-function GalleryCreateEditDialog({
-  gallery,
-}: Readonly<{ gallery?: GalleryView | null }>) {
-  return (
-    <Dialog id="gallery-dialog" class="z-30">
-      <Dialog.Content class="dark:bg-zinc-950 relative">
-        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
-        <Dialog.Title>
-          {gallery ? "Edit gallery" : "Create a new gallery"}
-        </Dialog.Title>
-        <form
-          id="gallery-form"
-          class="max-w-xl"
-          hx-post={`/actions/create-edit${
-            gallery ? "?uri=" + gallery?.uri : ""
-          }`}
-          hx-swap="none"
-          _="on htmx:afterOnLoad
-            if event.detail.xhr.status != 200
-              alert('Error: ' + event.detail.xhr.responseText)"
-        >
-          <div class="mb-4 relative">
-            <label htmlFor="title">Gallery name</label>
-            <Input
-              type="text"
-              id="title"
-              name="title"
-              class="dark:bg-zinc-800 dark:text-white"
-              required
-              value={(gallery?.record as Gallery)?.title}
-              autofocus
-            />
-          </div>
-          <div class="mb-2 relative">
-            <label htmlFor="description">Description</label>
-            <Textarea
-              id="description"
-              name="description"
-              rows={4}
-              class="dark:bg-zinc-800 dark:text-white"
-            >
-              {(gallery?.record as Gallery)?.description}
-            </Textarea>
-          </div>
-        </form>
-        <div class="max-w-xl">
-          <input
-            type="button"
-            name="galleryUri"
-            value={gallery?.uri}
-            class="hidden"
-          />
-        </div>
-        <form
-          id="delete-form"
-          hx-post={`/actions/gallery/delete?uri=${gallery?.uri}`}
-        >
-          <input type="hidden" name="uri" value={gallery?.uri} />
-        </form>
-        <div class="flex flex-col gap-2 mt-2">
-          <Button
-            variant="primary"
-            form="gallery-form"
-            type="submit"
-            class="w-full"
-          >
-            {gallery ? "Update gallery" : "Create gallery"}
-          </Button>
-          {gallery
-            ? (
-              <Button
-                variant="destructive"
-                form="delete-form"
-                type="submit"
-                class="w-full"
-              >
-                Delete gallery
-              </Button>
-            )
-            : null}
-          <Button
-            variant="secondary"
-            type="button"
-            class="w-full"
-            _={Dialog._closeOnClick}
-          >
-            Cancel
-          </Button>
-        </div>
-      </Dialog.Content>
-    </Dialog>
-  );
-}
-
-function PhotoPreview({
-  src,
-  uri,
-}: Readonly<{
-  src: string;
-  uri?: string;
-}>) {
-  return (
-    <div class="relative aspect-square bg-zinc-200 dark:bg-zinc-900">
-      {uri ? <AltTextButton photoUri={uri} /> : null}
-      {uri
-        ? (
-          <button
-            type="button"
-            hx-delete={`/actions/photo/${new AtUri(uri).rkey}`}
-            class="bg-zinc-950 z-10 absolute top-2 right-2 cursor-pointer size-4 flex items-center justify-center"
-            _="on htmx:afterOnLoad remove me.parentNode"
-          >
-            <i class="fas fa-close text-white"></i>
-          </button>
-        )
-        : null}
-      <img
-        src={src}
-        alt=""
-        data-state={uri ? "complete" : "pending"}
-        class="absolute inset-0 w-full h-full object-contain data-[state=pending]:opacity-50"
-      />
-    </div>
-  );
-}
-
-function AltTextButton({ photoUri }: Readonly<{ photoUri: string }>) {
-  return (
-    <div
-      class="bg-zinc-950 dark:bg-zinc-950 py-[1px] px-[3px] absolute top-2 left-2 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10"
-      hx-get={`/dialogs/photo/${new AtUri(photoUri).rkey}/alt`}
-      hx-trigger="click"
-      hx-target="#layout"
-      hx-swap="afterbegin"
-      _="on click halt"
-    >
-      <i class="fas fa-plus text-[10px] mr-1"></i> ALT
-    </div>
-  );
-}
-
-function PhotoDialog({
-  gallery,
-  image,
-  nextImage,
-  prevImage,
-}: Readonly<{
-  gallery: GalleryView;
-  image: PhotoView;
-  nextImage?: PhotoView;
-  prevImage?: PhotoView;
-}>) {
-  return (
-    <Dialog id="photo-dialog" class="bg-zinc-950 z-30">
-      <Dialog.X />
-      {nextImage
-        ? (
-          <div
-            hx-get={photoDialogLink(gallery, nextImage)}
-            hx-trigger="keyup[key=='ArrowRight'] from:body, swipeleft from:body"
-            hx-target="#photo-dialog"
-            hx-swap="innerHTML"
-          />
-        )
-        : null}
-      {prevImage
-        ? (
-          <div
-            hx-get={photoDialogLink(gallery, prevImage)}
-            hx-trigger="keyup[key=='ArrowLeft'] from:body, swiperight from:body"
-            hx-target="#photo-dialog"
-            hx-swap="innerHTML"
-          />
-        )
-        : null}
-      <div
-        class="flex flex-col w-5xl h-[calc(100vh-100px)] sm:h-screen z-20"
-        _={Dialog._closeOnClick}
-      >
-        <div class="flex flex-col p-4 z-20 flex-1 relative">
-          <img
-            src={image.fullsize}
-            alt={image.alt}
-            class="absolute inset-0 w-full h-full object-contain"
-          />
-        </div>
-        {image.alt
-          ? (
-            <div class="px-4 sm:px-0 py-4 bg-black text-white text-left">
-              {image.alt}
-            </div>
-          )
-          : null}
-      </div>
-    </Dialog>
-  );
-}
-
-function PhotoAltDialog({
-  photo,
-}: Readonly<{
-  photo: PhotoView;
-}>) {
-  return (
-    <Dialog id="photo-alt-dialog" class="z-30">
-      <Dialog.Content class="dark:bg-zinc-950 relative">
-        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
-        <Dialog.Title>Add alt text</Dialog.Title>
-        <div class="aspect-square relative">
-          <img
-            src={photo.fullsize}
-            alt={photo.alt}
-            class="absolute inset-0 w-full h-full object-contain"
-          />
-        </div>
-        <form
-          hx-put={`/actions/photo/${new AtUri(photo.uri).rkey}`}
-          _="on htmx:afterOnLoad trigger closeDialog"
-        >
-          <div class="my-2">
-            <label htmlFor="alt">Descriptive alt text</label>
-            <Textarea
-              id="alt"
-              name="alt"
-              rows={4}
-              defaultValue={photo.alt}
-              placeholder="Alt text"
-              autoFocus
-              class="dark:bg-zinc-800 dark:text-white"
-            />
-          </div>
-          <div class="w-full flex flex-col gap-2 mt-2">
-            <Button type="submit" variant="primary" class="w-full">
-              Save
-            </Button>
-            <Dialog.Close class="w-full">Cancel</Dialog.Close>
-          </div>
-        </form>
-      </Dialog.Content>
-    </Dialog>
-  );
-}
-
-function PhotoSelectDialog({
-  galleryUri,
-  itemUris,
-  photos,
-}: Readonly<{
-  galleryUri: string;
-  itemUris: string[];
-  photos: PhotoView[];
-}>) {
-  return (
-    <Dialog id="photo-select-dialog" class="z-30">
-      <Dialog.Content class="w-full max-w-5xl dark:bg-zinc-950 sm:min-h-screen flex flex-col relative">
-        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
-        <Dialog.Title>Add photos</Dialog.Title>
-        {photos.length
-          ? (
-            <p class="my-2 text-center">
-              Choose photos to add/remove from your gallery. Click close when
-              done.
-            </p>
-          )
-          : null}
-        {photos.length
-          ? (
-            <div class="grid grid-cols-3 sm:grid-cols-5 gap-4 my-4 flex-1">
-              {photos.map((photo) => (
-                <PhotoSelectButton
-                  key={photo.cid}
-                  galleryUri={galleryUri}
-                  itemUris={itemUris}
-                  photo={photo}
-                />
-              ))}
-            </div>
-          )
-          : (
-            <div class="flex-1 flex justify-center items-center my-30">
-              <p>
-                No photos yet.{" "}
-                <a
-                  href={`/upload?returnTo=${new AtUri(galleryUri).rkey}`}
-                  class="hover:underline font-semibold text-sky-500"
-                >
-                  Upload
-                </a>{" "}
-                photos and return to add.
-              </p>
-            </div>
-          )}
-        <div class="w-full flex flex-col gap-2 mt-2">
-          <Dialog.Close class="w-full">Close</Dialog.Close>
-        </div>
-      </Dialog.Content>
-    </Dialog>
-  );
-}
-
-function PhotoSelectButton({
-  galleryUri,
-  itemUris,
-  photo,
-}: Readonly<{
-  galleryUri: string;
-  itemUris: string[];
-  photo: PhotoView;
-}>) {
-  return (
-    <button
-      hx-put={`/actions/gallery/${new AtUri(galleryUri).rkey}/${
-        itemUris.includes(photo.uri) ? "remove-photo" : "add-photo"
-      }/${new AtUri(photo.uri).rkey}`}
-      hx-swap="outerHTML"
-      type="button"
-      data-added={itemUris.includes(photo.uri) ? "true" : "false"}
-      class="group cursor-pointer relative aspect-square data-[added=true]:ring-2 ring-sky-500 disabled:opacity-50"
-      _={`on htmx:beforeRequest add @disabled to me
-     then on htmx:afterOnLoad
-       remove @disabled from me
-       if @data-added == 'true'
-         set @data-added to 'false' 
-         remove #photo-${new AtUri(photo.uri).rkey}
-       else
-         set @data-added to 'true'
-       end`}
-    >
-      <div class="hidden group-data-[added=true]:block absolute top-2 right-2 z-30">
-        <i class="fa-check fa-solid text-sky-500 z-10" />
-      </div>
-      <img
-        src={photo.fullsize}
-        alt={photo.alt}
-        class="absolute inset-0 w-full h-full object-contain"
-      />
-    </button>
-  );
-}
-
-function getActorProfile(did: string, ctx: BffContext) {
-  const actor = ctx.indexService.getActor(did);
-  if (!actor) return null;
-  const profileRecord = ctx.indexService.getRecord<WithBffMeta<Profile>>(
-    `at://${did}/social.grain.actor.profile/self`,
-  );
-  return profileRecord ? profileToView(profileRecord, actor.handle) : null;
-}
-
-function galleryToView(
-  record: WithBffMeta<Gallery>,
-  creator: Un$Typed<ProfileView>,
-  items: Photo[],
-): Un$Typed<GalleryView> {
-  return {
-    uri: record.uri,
-    cid: record.cid,
-    creator,
-    record,
-    items: items
-      ?.map((item) => itemToView(record.did, item))
-      .filter(isPhotoView),
-    indexedAt: record.indexedAt,
-  };
-}
-
-function itemToView(
-  did: string,
-  item:
-    | WithBffMeta<Photo>
-    | {
-      $type: string;
-    },
-): Un$Typed<PhotoView> | undefined {
-  if (isPhoto(item)) {
-    return photoToView(did, item);
-  }
-  return undefined;
-}
-
-function photoThumb(did: string, cid: string) {
-  return `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${cid}@jpeg`;
-}
-
-function photoToView(
-  did: string,
-  photo: WithBffMeta<Photo>,
-): $Typed<PhotoView> {
-  return {
-    $type: "social.grain.photo.defs#photoView",
-    uri: photo.uri,
-    cid: photo.photo.ref.toString(),
-    thumb:
-      `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${photo.photo.ref.toString()}@jpeg`,
-    fullsize:
-      `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${photo.photo.ref.toString()}@jpeg`,
-    alt: photo.alt,
-    aspectRatio: photo.aspectRatio,
-  };
-}
-
-function profileToView(
-  record: WithBffMeta<Profile>,
-  handle: string,
-): Un$Typed<ProfileView> {
-  return {
-    did: record.did,
-    handle,
-    displayName: record.displayName,
-    description: record.description,
-    avatar: record?.avatar
-      ? `https://cdn.bsky.app/img/feed_thumbnail/plain/${record.did}/${record.avatar.ref.toString()}`
-      : undefined,
-  };
-}
-
-type NotificationRecords = WithBffMeta<Favorite>;
-
-function notificationToView(
-  record: NotificationRecords,
-  author: Un$Typed<ProfileView>,
-  lastSeenNotifs: string | undefined,
-): Un$Typed<NotificationView> {
-  const reason = record.$type === "social.grain.favorite"
-    ? "gallery-favorite"
-    : "unknown";
-  const reasonSubject = record.$type === "social.grain.favorite"
-    ? record.subject
-    : undefined;
-  const isRead = lastSeenNotifs ? record.createdAt <= lastSeenNotifs : false;
-  return {
-    uri: record.uri,
-    cid: record.cid,
-    author,
-    record,
-    reason,
-    reasonSubject,
-    isRead,
-    indexedAt: record.indexedAt,
-  };
-}
-
-function profileLink(handle: string) {
-  return `/profile/${handle}`;
-}
-
-function galleryLink(handle: string, galleryRkey: string) {
-  return `/profile/${handle}/gallery/${galleryRkey}`;
-}
-
-function photoDialogLink(gallery: GalleryView, image: PhotoView) {
-  return `/dialogs/image?galleryUri=${gallery.uri}&imageCid=${image.cid}`;
-}
-
-async function onSignedIn({ actor, ctx }: onSignedInArgs) {
-  await ctx.backfillCollections(
-    [actor.did],
-    [
-      ...ctx.cfg.collections!,
-      "app.bsky.actor.profile",
-      "app.bsky.graph.follow",
-    ],
-  );
-
-  const profileResults = ctx.indexService.getRecords<Profile>(
-    "social.grain.actor.profile",
-    {
-      where: [{ field: "did", equals: actor.did }],
-    },
-  );
-
-  const profile = profileResults.items[0];
-
-  if (profile) {
-    console.log("Profile already exists");
-    return `/profile/${actor.handle}`;
-  }
-
-  const bskyProfileResults = ctx.indexService.getRecords<BskyProfile>(
-    "app.bsky.actor.profile",
-    {
-      where: [{ field: "did", equals: actor.did }],
-    },
-  );
-
-  const bskyProfile = bskyProfileResults.items[0];
-
-  if (!bskyProfile) {
-    console.error("Failed to get profile");
-    return;
-  }
-
-  await ctx.createRecord<Profile>(
-    "social.grain.actor.profile",
-    {
-      displayName: bskyProfile.displayName ?? undefined,
-      description: bskyProfile.description ?? undefined,
-      avatar: bskyProfile.avatar ?? undefined,
-      createdAt: new Date().toISOString(),
-    },
-    true,
-  );
-
-  return "/onboard";
-}
-
-function uploadStart(
-  routePrefix: string,
-  cb: (params: { uploadId: string; src: string; done?: boolean }) => VNode,
-): RouteHandler {
-  return async (req, _params, ctx) => {
-    ctx.requireAuth();
-    ctx.rateLimit({
-      namespace: "upload",
-      points: 1,
-      limit: 50,
-      window: 24 * 60 * 60 * 1000, // 24 hours
-    });
-    const formData = await req.formData();
-    const file = formData.get("file") as File;
-    if (!file) {
-      return new Response("No file", { status: 400 });
-    }
-    const dataUrl = await compressImageForPreview(file);
-    if (!ctx.agent) {
-      return new Response("No agent", { status: 400 });
-    }
-    await photoProcessor.initialize(ctx.agent);
-    const uploadId = photoProcessor.startUpload(file);
-    return ctx.html(
-      <div
-        id={`upload-id-${uploadId}`}
-        hx-trigger="done"
-        hx-get={`/actions/${routePrefix}/upload-done?uploadId=${uploadId}`}
-        hx-target="this"
-        hx-swap="outerHTML"
-        class="h-full w-full"
-      >
-        <div
-          hx-get={`/actions/${routePrefix}/upload-check-status?uploadId=${uploadId}`}
-          hx-trigger="every 600ms"
-          hx-target="this"
-          hx-swap="innerHTML"
-          class="h-full w-full"
-        >
-          {cb({ uploadId, src: dataUrl })}
-        </div>
-      </div>,
-    );
-  };
-}
-
-function uploadCheckStatus(): RouteHandler {
-  return (req, _params, ctx) => {
-    ctx.requireAuth();
-    const url = new URL(req.url);
-    const searchParams = new URLSearchParams(url.search);
-    const uploadId = searchParams.get("uploadId");
-    if (!uploadId) return ctx.next();
-    const meta = photoProcessor.getUploadStatus(uploadId);
-    return new Response(
-      null,
-      {
-        status: meta?.blobRef ? 200 : 204,
-        headers: meta?.blobRef ? { "HX-Trigger": "done" } : {},
-      },
-    );
-  };
-}
-
-function avatarUploadDone(
-  cb: (params: { src: string; uploadId: string }) => VNode,
-): RouteHandler {
-  return (req, _params, ctx) => {
-    const { did } = ctx.requireAuth();
-    const url = new URL(req.url);
-    const searchParams = new URLSearchParams(url.search);
-    const uploadId = searchParams.get("uploadId");
-    if (!uploadId) return ctx.next();
-    const meta = photoProcessor.getUploadStatus(uploadId);
-    if (!meta?.blobRef) return ctx.next();
-    return ctx.html(
-      cb({ src: photoThumb(did, meta.blobRef.ref.toString()), uploadId }),
-    );
-  };
-}
-
-function photoUploadDone(
-  cb: (params: { src: string; uri: string }) => VNode,
-): RouteHandler {
-  return async (req, _params, ctx) => {
-    const { did } = ctx.requireAuth();
-    const url = new URL(req.url);
-    const searchParams = new URLSearchParams(url.search);
-    const uploadId = searchParams.get("uploadId");
-    if (!uploadId) return ctx.next();
-    const meta = photoProcessor.getUploadStatus(uploadId);
-    if (!meta?.blobRef) return ctx.next();
-    const photoUri = await ctx.createRecord<Photo>("social.grain.photo", {
-      photo: meta.blobRef,
-      aspectRatio: meta.dimensions?.width && meta.dimensions?.height
-        ? {
-          width: meta.dimensions.width,
-          height: meta.dimensions.height,
-        }
-        : undefined,
-      alt: "",
-      createdAt: new Date().toISOString(),
-    });
-    return ctx.html(
-      cb({ src: photoThumb(did, meta.blobRef.ref.toString()), uri: photoUri }),
-    );
-  };
-}
-
-function photoUploadRoutes(): BffMiddleware[] {
-  return [
-    route(
-      `/actions/photo/upload-start`,
-      ["POST"],
-      uploadStart(
-        "photo",
-        ({ src }) => <PhotoPreview src={src} />,
-      ),
-    ),
-    route(
-      `/actions/photo/upload-check-status`,
-      ["GET"],
-      uploadCheckStatus(),
-    ),
-    route(
-      `/actions/photo/upload-done`,
-      ["GET"],
-      photoUploadDone(({ src, uri }) => (
-        <PhotoPreview
-          src={src}
-          uri={uri}
-        />
-      )),
-    ),
-  ];
-}
-
-function avatarUploadRoutes(): BffMiddleware[] {
-  return [
-    route(
-      `/actions/avatar/upload-start`,
-      ["POST"],
-      uploadStart("avatar", ({ src }) => (
-        <img
-          src={src}
-          alt=""
-          data-state="pending"
-          class="rounded-full w-full h-full object-cover data-[state=pending]:opacity-50"
-        />
-      )),
-    ),
-    route(
-      `/actions/avatar/upload-check-status`,
-      ["GET"],
-      uploadCheckStatus(),
-    ),
-    route(
-      `/actions/avatar/upload-done`,
-      ["GET"],
-      avatarUploadDone(({ src, uploadId }) => (
-        <>
-          <div hx-swap-oob="innerHTML:#image-input">
-            <input type="hidden" name="uploadId" value={uploadId} />
-          </div>
-          <img
-            src={src}
-            alt=""
-            class="rounded-full w-full h-full object-cover"
-          />
-        </>
-      )),
-    ),
-  ];
-}
-
-function publicGalleryLink(handle: string, galleryUri: string): string {
-  return `${PUBLIC_URL}${galleryLink(handle, new AtUri(galleryUri).rkey)}`;
-}

src/actor.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 Gallery } from "$lexicon/types/social/grain/gallery.ts";
+import { Record as Photo } from "$lexicon/types/social/grain/photo.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { BffContext, WithBffMeta } from "@bigmoves/bff";
+import { galleryToView, getGalleryItemsAndPhotos } from "./gallery.ts";
+import { photoToView } from "./photo.ts";
+
+export function getActorProfile(did: string, ctx: BffContext) {
+  const actor = ctx.indexService.getActor(did);
+  if (!actor) return null;
+  const profileRecord = ctx.indexService.getRecord<WithBffMeta<Profile>>(
+    `at://${did}/social.grain.actor.profile/self`,
+  );
+  return profileRecord ? profileToView(profileRecord, actor.handle) : null;
+}
+
+function profileToView(
+  record: WithBffMeta<Profile>,
+  handle: string,
+): Un$Typed<ProfileView> {
+  return {
+    did: record.did,
+    handle,
+    displayName: record.displayName,
+    description: record.description,
+    avatar: record?.avatar
+      ? `https://cdn.bsky.app/img/feed_thumbnail/plain/${record.did}/${record.avatar.ref.toString()}`
+      : undefined,
+  };
+}
+
+export function getActorPhotos(handleOrDid: string, ctx: BffContext) {
+  let did: string;
+  if (handleOrDid.includes("did:")) {
+    did = handleOrDid;
+  } else {
+    const actor = ctx.indexService.getActorByHandle(handleOrDid);
+    if (!actor) return [];
+    did = actor.did;
+  }
+  const photos = ctx.indexService.getRecords<WithBffMeta<Photo>>(
+    "social.grain.photo",
+    {
+      where: [{ field: "did", equals: did }],
+      orderBy: [{ field: "createdAt", direction: "desc" }],
+    },
+  );
+  return photos.items.map((photo) => photoToView(photo.did, photo));
+}
+
+export function getActorGalleries(handleOrDid: string, ctx: BffContext) {
+  let did: string;
+  if (handleOrDid.includes("did:")) {
+    did = handleOrDid;
+  } else {
+    const actor = ctx.indexService.getActorByHandle(handleOrDid);
+    if (!actor) return [];
+    did = actor.did;
+  }
+  const { items: galleries } = ctx.indexService.getRecords<
+    WithBffMeta<Gallery>
+  >("social.grain.gallery", {
+    where: [{ field: "did", equals: did }],
+    orderBy: [{ field: "createdAt", direction: "desc" }],
+  });
+  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
+  const creator = getActorProfile(did, ctx);
+  if (!creator) return [];
+  return galleries.map((gallery) =>
+    galleryToView(gallery, creator, galleryPhotosMap.get(gallery.uri) ?? [])
+  );
+}

src/app.tsx

···
+import { CSS, RootProps } from "@bigmoves/bff";
+import { Layout, Meta } from "@bigmoves/bff/components";
+import { GOATCOUNTER_URL } from "./env.ts";
+import type { State } from "./state.ts";
+
+export function Root(props: Readonly<RootProps<State>>) {
+  const profile = props.ctx.state.profile;
+  const scripts = props.ctx.state.scripts;
+  const hasNotifications =
+    props.ctx.state.notifications?.find((n) => n.isRead === false) !==
+      undefined;
+  const staticFilesHash = props.ctx.state.staticFilesHash;
+  return (
+    <html lang="en" class="w-full h-full">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <Meta meta={props.ctx.state.meta} />
+        {GOATCOUNTER_URL
+          ? (
+            <script
+              data-goatcounter={GOATCOUNTER_URL}
+              async
+              src="//gc.zgo.at/count.js"
+            />
+          )
+          : null}
+        <script src="https://unpkg.com/htmx.org@1.9.10" />
+        <script src="https://unpkg.com/hyperscript.org@0.9.14" />
+        <script src="https://unpkg.com/sortablejs@1.15.6" />
+        <style dangerouslySetInnerHTML={{ __html: CSS }} />
+        <link
+          rel="stylesheet"
+          href={`/static/styles.css?${staticFilesHash?.get("styles.css")}`}
+        />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin="anonymous"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Jersey+20&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          rel="stylesheet"
+          href="https://unpkg.com/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"
+          preload
+        />
+        {scripts?.map((file) => (
+          <script
+            key={file}
+            src={`/static/${file}?${staticFilesHash?.get(file)}`}
+          />
+        ))}
+      </head>
+      <body class="h-full w-full dark:bg-zinc-950 dark:text-white">
+        <Layout id="layout" class="border-zinc-200 dark:border-zinc-800">
+          <Layout.Nav
+            heading={
+              <h1 class="font-['Jersey_20'] text-4xl text-zinc-900 dark:text-white">
+                grain
+                <sub class="bottom-[0.75rem] text-[1rem]">beta</sub>
+              </h1>
+            }
+            profile={profile}
+            hasNotifications={hasNotifications}
+            class="border-zinc-200 dark:border-zinc-800"
+          />
+          <Layout.Content>{props.children}</Layout.Content>
+        </Layout>
+      </body>
+    </html>
+  );
+}

src/components/ActorAvatar.tsx

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { cn } from "@bigmoves/bff/components";
+
+export function ActorAvatar({
+  profile,
+  class: classProp,
+}: Readonly<{ profile: Un$Typed<ProfileView>; class?: string }>) {
+  return (
+    <img
+      src={profile.avatar}
+      alt={profile.handle}
+      title={profile.handle}
+      class={cn("rounded-full object-cover", classProp)}
+    />
+  );
+}

src/components/ActorInfo.tsx

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { profileLink } from "../utils.ts";
+import { ActorAvatar } from "./ActorAvatar.tsx";
+
+export function ActorInfo(
+  { profile }: Readonly<{ profile: Un$Typed<ProfileView> }>,
+) {
+  return (
+    <div class="flex items-center gap-2 min-w-0 flex-1">
+      <ActorAvatar profile={profile} class="size-7 shrink-0" />
+      <a
+        href={profileLink(profile.handle)}
+        class="hover:underline text-zinc-600 dark:text-zinc-500 truncate max-w-[300px] sm:max-w-[400px]"
+      >
+        <span class="text-zinc-950 dark:text-zinc-50 font-semibold text-">
+          {profile.displayName || profile.handle}
+        </span>{" "}
+        <span class="truncate">@{profile.handle}</span>
+      </a>
+    </div>
+  );
+}

src/components/AltTextButton.tsx

···
+import { AtUri } from "@atproto/syntax";
+
+export function AltTextButton({ photoUri }: Readonly<{ photoUri: string }>) {
+  return (
+    <div
+      class="bg-zinc-950 dark:bg-zinc-950 py-[1px] px-[3px] absolute top-2 left-2 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10"
+      hx-get={`/dialogs/photo/${new AtUri(photoUri).rkey}/alt`}
+      hx-trigger="click"
+      hx-target="#layout"
+      hx-swap="afterbegin"
+      _="on click halt"
+    >
+      <i class="fas fa-plus text-[10px] mr-1"></i> ALT
+    </div>
+  );
+}

src/components/AvatarButton.tsx

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+
+export function AvatarButton({
+  profile,
+}: Readonly<{ profile: Un$Typed<ProfileView> }>) {
+  return (
+    <button
+      type="button"
+      class="cursor-pointer"
+      hx-get={`/dialogs/avatar/${profile.handle}`}
+      hx-trigger="click"
+      hx-target="body"
+      hx-swap="afterbegin"
+    >
+      <img
+        src={profile.avatar}
+        alt={profile.handle}
+        class="rounded-full object-cover size-16"
+      />
+    </button>
+  );
+}

src/components/AvatarDialog.tsx

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { Dialog } from "@bigmoves/bff/components";
+import { ActorAvatar } from "./ActorAvatar.tsx";
+
+export function AvatarDialog({
+  profile,
+}: Readonly<{ profile: Un$Typed<ProfileView> }>) {
+  return (
+    <Dialog>
+      <Dialog.X />
+      <div
+        class="w-[400px] h-[400px] flex flex-col p-4 z-10"
+        _={Dialog._closeOnClick}
+      >
+        <ActorAvatar class="w-full h-full" profile={profile} />
+      </div>
+    </Dialog>
+  );
+}

src/components/AvatarForm.tsx

···
+export function AvatarForm(
+  { src, alt }: Readonly<{ src?: string; alt?: string }>,
+) {
+  return (
+    <form
+      id="avatar-file-form"
+      hx-post="/actions/avatar/upload-start"
+      hx-target="#image-preview"
+      hx-swap="innerHTML"
+      hx-encoding="multipart/form-data"
+      hx-trigger="change from:#file"
+    >
+      <label htmlFor="file">
+        <span class="sr-only">Upload avatar</span>
+        <div class="border rounded-full border-zinc-900 w-16 h-16 mx-auto mb-2 relative my-2 cursor-pointer">
+          <div class="absolute bottom-0 right-0 bg-zinc-800 rounded-full w-5 h-5 flex items-center justify-center z-10">
+            <i class="fa-solid fa-camera text-white text-xs"></i>
+          </div>
+          <div id="image-preview" class="w-full h-full">
+            {src
+              ? (
+                <img
+                  src={src}
+                  alt={alt}
+                  className="rounded-full w-full h-full object-cover"
+                />
+              )
+              : null}
+          </div>
+        </div>
+        <input
+          class="hidden"
+          type="file"
+          id="file"
+          name="file"
+          accept="image/*"
+        />
+      </label>
+    </form>
+  );
+}

src/components/FavoriteButton.tsx

···
+import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
+import { WithBffMeta } from "@bigmoves/bff";
+import { Button, cn } from "@bigmoves/bff/components";
+
+export function FavoriteButton({
+  currentUserDid,
+  favs = [],
+  galleryUri,
+}: Readonly<{
+  currentUserDid?: string;
+  favs: WithBffMeta<Favorite>[];
+  galleryUri: string;
+}>) {
+  const favUri = favs.find((s) => currentUserDid === s.did)?.uri;
+  return (
+    <Button
+      variant="primary"
+      class="self-start w-full sm:w-fit"
+      type="button"
+      hx-post={`/actions/favorite?galleryUri=${galleryUri}${
+        favUri ? "&favUri=" + favUri : ""
+      }`}
+      hx-target="this"
+      hx-swap="outerHTML"
+    >
+      <i class={cn("fa-heart", favUri ? "fa-solid" : "fa-regular")}></i>{" "}
+      {favs.length}
+    </Button>
+  );
+}

src/components/FollowButton.tsx

···
+import { AtUri } from "@atproto/syntax";
+import { Button, cn } from "@bigmoves/bff/components";
+
+export 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-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 text-zinc-950 dark:text-zinc-50",
+      )}
+      {...(isFollowing
+        ? {
+          children: "Following",
+          "hx-delete": `/actions/follow/${followeeDid}/${
+            new AtUri(followUri).rkey
+          }`,
+        }
+        : {
+          children: (
+            <>
+              <i class="fa-solid fa-plus mr-2" />
+              Follow
+            </>
+          ),
+          "hx-post": `/actions/follow/${followeeDid}`,
+        })}
+      hx-trigger="click"
+      hx-target="this"
+      hx-swap="outerHTML"
+    />
+  );
+}

src/components/GalleryCreateEditDialog.tsx

···
+import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { Button, Dialog, Input, Textarea } from "@bigmoves/bff/components";
+
+export function GalleryCreateEditDialog({
+  gallery,
+}: Readonly<{ gallery?: GalleryView | null }>) {
+  return (
+    <Dialog id="gallery-dialog" class="z-30">
+      <Dialog.Content class="dark:bg-zinc-950 relative">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <Dialog.Title>
+          {gallery ? "Edit gallery" : "Create a new gallery"}
+        </Dialog.Title>
+        <form
+          id="gallery-form"
+          class="max-w-xl"
+          hx-post={`/actions/create-edit${
+            gallery ? "?uri=" + gallery?.uri : ""
+          }`}
+          hx-swap="none"
+          _="on htmx:afterOnLoad
+            if event.detail.xhr.status != 200
+              alert('Error: ' + event.detail.xhr.responseText)"
+        >
+          <div class="mb-4 relative">
+            <label htmlFor="title">Gallery name</label>
+            <Input
+              type="text"
+              id="title"
+              name="title"
+              class="dark:bg-zinc-800 dark:text-white"
+              required
+              value={(gallery?.record as Gallery)?.title}
+              autofocus
+            />
+          </div>
+          <div class="mb-2 relative">
+            <label htmlFor="description">Description</label>
+            <Textarea
+              id="description"
+              name="description"
+              rows={4}
+              class="dark:bg-zinc-800 dark:text-white"
+            >
+              {(gallery?.record as Gallery)?.description}
+            </Textarea>
+          </div>
+        </form>
+        <div class="max-w-xl">
+          <input
+            type="button"
+            name="galleryUri"
+            value={gallery?.uri}
+            class="hidden"
+          />
+        </div>
+        <form
+          id="delete-form"
+          hx-post={`/actions/gallery/delete?uri=${gallery?.uri}`}
+        >
+          <input type="hidden" name="uri" value={gallery?.uri} />
+        </form>
+        <div class="flex flex-col gap-2 mt-2">
+          <Button
+            variant="primary"
+            form="gallery-form"
+            type="submit"
+            class="w-full"
+          >
+            {gallery ? "Update gallery" : "Create gallery"}
+          </Button>
+          {gallery
+            ? (
+              <Button
+                variant="destructive"
+                form="delete-form"
+                type="submit"
+                class="w-full"
+              >
+                Delete gallery
+              </Button>
+            )
+            : null}
+          <Button
+            variant="secondary"
+            type="button"
+            class="w-full"
+            _={Dialog._closeOnClick}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

src/components/GalleryPage.tsx

···
+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 { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { WithBffMeta } from "@bigmoves/bff";
+import { Button } from "@bigmoves/bff/components";
+import { ActorInfo } from "./ActorInfo.tsx";
+import { FavoriteButton } from "./FavoriteButton.tsx";
+import { PhotoButton } from "./PhotoButton.tsx";
+import { ShareGalleryButton } from "./ShareGalleryButton.tsx";
+
+export function GalleryPage({
+  gallery,
+  favs = [],
+  currentUserDid,
+}: Readonly<{
+  gallery: GalleryView;
+  favs: WithBffMeta<Favorite>[];
+  currentUserDid?: string;
+}>) {
+  const isCreator = currentUserDid === gallery.creator.did;
+  const isLoggedIn = !!currentUserDid;
+  const description = (gallery.record as Gallery).description;
+  return (
+    <div class="px-4">
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4 mb-2">
+        <div class="flex flex-col space-y-2 mb-4">
+          <h1 class="font-bold text-2xl">
+            {(gallery.record as Gallery).title}
+          </h1>
+          <ActorInfo profile={gallery.creator} />
+          {description ? <p>{description}</p> : null}
+        </div>
+        {isLoggedIn && isCreator
+          ? (
+            <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
+              <Button
+                variant="primary"
+                class="self-start w-full sm:w-fit"
+                hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}`}
+                hx-target="#layout"
+                hx-swap="afterbegin"
+              >
+                Edit
+              </Button>
+              <Button
+                hx-get={`/dialogs/photo-select/${new AtUri(gallery.uri).rkey}`}
+                hx-target="#layout"
+                hx-swap="afterbegin"
+                variant="primary"
+                class="self-start w-full sm:w-fit"
+              >
+                Add photos
+              </Button>
+              <Button
+                variant="primary"
+                class="self-start w-full sm:w-fit"
+                hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}/sort`}
+                hx-target="#layout"
+                hx-swap="afterbegin"
+              >
+                Sort order
+              </Button>
+              <ShareGalleryButton gallery={gallery} />
+            </div>
+          )
+          : null}
+        {!isCreator
+          ? (
+            <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}
+              />
+            </div>
+          )
+          : null}
+      </div>
+      <div class="flex justify-end mb-2">
+        <Button
+          id="justified-button"
+          title="Justified layout"
+          variant="primary"
+          class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
+          _="on click call toggleLayout('justified')
+            set @data-selected to 'true'
+            set #masonry-button's @data-selected to 'false'"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect x="2" y="2" width="8" height="6" fill="currentColor" rx="1" />
+            <rect
+              x="12"
+              y="2"
+              width="10"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="2"
+              y="10"
+              width="6"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="10"
+              y="10"
+              width="12"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="2"
+              y="18"
+              width="20"
+              height="4"
+              fill="currentColor"
+              rx="1"
+            />
+          </svg>
+        </Button>
+        <Button
+          id="masonry-button"
+          title="Masonry layout"
+          variant="primary"
+          data-selected="false"
+          class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
+          _="on click call toggleLayout('masonry')
+            set @data-selected to 'true'
+            set #justified-button's @data-selected to 'false'"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect x="2" y="2" width="8" height="8" fill="currentColor" rx="1" />
+            <rect
+              x="12"
+              y="2"
+              width="8"
+              height="4"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="12"
+              y="8"
+              width="8"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="2"
+              y="12"
+              width="8"
+              height="8"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="12"
+              y="16"
+              width="8"
+              height="4"
+              fill="currentColor"
+              rx="1"
+            />
+          </svg>
+        </Button>
+      </div>
+      <div
+        id="masonry-container"
+        class="h-0 overflow-hidden relative mx-auto w-full"
+        _="on load or htmx:afterSettle call computeLayout()"
+      >
+        {gallery.items?.filter(isPhotoView)?.length
+          ? gallery?.items
+            ?.filter(isPhotoView)
+            ?.map((photo) => (
+              <PhotoButton
+                key={photo.cid}
+                photo={photo}
+                gallery={gallery}
+              />
+            ))
+          : null}
+      </div>
+    </div>
+  );
+}

src/components/GalleryPreviewLink.tsx

···
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { AtUri } from "@atproto/syntax";
+import { cn } from "@bigmoves/bff/components";
+import { galleryLink } from "../utils.ts";
+
+export function GalleryPreviewLink({
+  gallery,
+  size = "default",
+}: Readonly<{ gallery: Un$Typed<GalleryView>; size?: "small" | "default" }>) {
+  const gap = size === "small" ? "gap-1" : "gap-2";
+  return (
+    <a
+      href={galleryLink(
+        gallery.creator.handle,
+        new AtUri(gallery.uri).rkey,
+      )}
+      class={cn("flex w-full max-w-md aspect-[3/2] overflow-hidden", gap)}
+    >
+      <div class="w-2/3 h-full">
+        <img
+          src={gallery.items?.filter(isPhotoView)[0].thumb}
+          alt={gallery.items?.filter(isPhotoView)[0].alt}
+          class="w-full h-full object-cover"
+        />
+      </div>
+      <div class={cn("w-1/3 flex flex-col h-full", gap)}>
+        <div class="h-1/2">
+          {gallery.items?.filter(isPhotoView)?.[1]
+            ? (
+              <img
+                src={gallery.items?.filter(isPhotoView)?.[1]
+                  ?.thumb}
+                alt={gallery.items?.filter(isPhotoView)?.[1]?.alt}
+                class="w-full h-full object-cover"
+              />
+            )
+            : <div className="w-full h-full bg-zinc-200 dark:bg-zinc-900" />}
+        </div>
+        <div class="h-1/2">
+          {gallery.items?.filter(isPhotoView)?.[2]
+            ? (
+              <img
+                src={gallery.items?.filter(isPhotoView)?.[2]
+                  ?.thumb}
+                alt={gallery.items?.filter(isPhotoView)?.[2]?.alt}
+                class="w-full h-full object-cover"
+              />
+            )
+            : <div className="w-full h-full bg-zinc-200 dark:bg-zinc-900" />}
+        </div>
+      </div>
+    </a>
+  );
+}

src/components/GallerySortDialog.tsx

···
+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 { Button, Dialog } from "@bigmoves/bff/components";
+
+export function GallerySortDialog(
+  { gallery }: Readonly<{ gallery: GalleryView }>,
+) {
+  return (
+    <Dialog>
+      <Dialog.Content class="dark:bg-zinc-950 relative">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <Dialog.Title>Sort gallery</Dialog.Title>
+        <p class="my-2 text-center">Drag photos to rearrange</p>
+        <form
+          hx-post={`/actions/gallery/${new AtUri(gallery.uri).rkey}/sort`}
+          hx-trigger="submit"
+          hx-swap="none"
+        >
+          <div class="sortable grid grid-cols-3 sm:grid-cols-5 gap-2 mt-2">
+            {gallery?.items?.filter(isPhotoView).map((item) => (
+              <div
+                key={item.cid}
+                class="relative aspect-square cursor-grab"
+              >
+                <input type="hidden" name="item" value={item.uri} />
+                <img
+                  src={item.fullsize}
+                  alt={item.alt}
+                  class="w-full h-full absolute object-cover"
+                />
+              </div>
+            ))}
+          </div>
+          <div class="flex flex-col gap-2 mt-2">
+            <Button
+              variant="primary"
+              type="submit"
+              class="w-full"
+            >
+              Save
+            </Button>
+            <Button
+              variant="secondary"
+              type="button"
+              class="w-full"
+              _={Dialog._closeOnClick}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

src/components/Header.tsx

···
+import { cn } from "@bigmoves/bff/components";
+import { ComponentChildren, JSX } from "preact";
+
+export function Header({
+  children,
+  class: classProp,
+  ...props
+}: Readonly<
+  JSX.HTMLAttributes<HTMLHeadingElement> & { children: ComponentChildren }
+>) {
+  return (
+    <h1 class={cn("text-xl font-semibold", classProp)} {...props}>
+      {children}
+    </h1>
+  );
+}

src/components/LoginPage.tsx

···
+import { Login } from "@bigmoves/bff/components";
+import { profileLink } from "../utils.ts";
+
+export function LoginPage({ error }: Readonly<{ error?: string }>) {
+  return (
+    <div
+      id="login"
+      class="flex justify-center items-center w-full h-full relative"
+      style="background-image: url('https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:bcgltzqazw5tb6k2g3ttenbj/bafkreiewhwu3ro5dv7omedphb62db4koa7qtvyzfhiiypg3ru4tvuxkrjy@jpeg'); background-size: cover; background-position: center;"
+    >
+      <Login hx-target="#login" error={error} errorClass="text-white" />
+      <div class="absolute bottom-2 right-2 text-white text-sm">
+        Photo by{" "}
+        <a
+          href={profileLink("chadtmiller.com")}
+          class="hover:underline font-semibold"
+        >
+          @chadtmiller.com
+        </a>
+      </div>
+    </div>
+  );
+}

src/components/NotificationsPage.tsx

···
+import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
+import { NotificationView } from "$lexicon/types/social/grain/notification/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { AtUri } from "@atproto/syntax";
+import { formatRelativeTime, profileLink } from "../utils.ts";
+import { ActorAvatar } from "./ActorAvatar.tsx";
+import { Header } from "./Header.tsx";
+
+export function NotificationsPage(
+  { notifications }: Readonly<{ notifications: Un$Typed<NotificationView>[] }>,
+) {
+  return (
+    <div class="px-4 mb-4">
+      <div hx-post="/actions/update-seen" hx-trigger="load delay:1s" />
+      <div class="my-4">
+        <Header>Notifications</Header>
+      </div>
+      <ul class="space-y-4 relative divide-zinc-200 dark:divide-zinc-800 divide-y">
+        {notifications.length
+          ? (
+            notifications.map((notification) => (
+              <li
+                key={notification.uri}
+                class="flex flex-col gap-4 pb-4"
+              >
+                <div class="flex flex-wrap items-center gap-2">
+                  <a
+                    href={profileLink(notification.author.handle)}
+                    class="flex items-center gap-2 hover:underline"
+                  >
+                    <ActorAvatar
+                      profile={notification.author}
+                      class="h-8 w-8"
+                    />
+                    <span class="font-semibold break-words">
+                      {notification.author.displayName ??
+                        notification.author.handle}
+                    </span>
+                  </a>
+                  <span class="break-words">
+                    favorited your gallery · {formatRelativeTime(
+                      new Date((notification.record as Favorite).createdAt),
+                    )}
+                  </span>
+                </div>
+                <div
+                  hx-get={`/embed/profile/${
+                    new AtUri(notification.reasonSubject ?? "").hostname
+                  }/gallery/${
+                    new AtUri(notification.reasonSubject ?? "").rkey
+                  }`}
+                  hx-trigger="load"
+                  hx-target="this"
+                  hx-swap="innerHTML"
+                  class="w-[200px]"
+                />
+              </li>
+            ))
+          )
+          : <li>No notifications yet.</li>}
+      </ul>
+    </div>
+  );
+}

src/components/PhotoAltDialog.tsx

···
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { Button, Dialog, Textarea } from "@bigmoves/bff/components";
+
+export function PhotoAltDialog({
+  photo,
+}: Readonly<{
+  photo: PhotoView;
+}>) {
+  return (
+    <Dialog id="photo-alt-dialog" class="z-30">
+      <Dialog.Content class="dark:bg-zinc-950 relative">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <Dialog.Title>Add alt text</Dialog.Title>
+        <div class="aspect-square relative">
+          <img
+            src={photo.fullsize}
+            alt={photo.alt}
+            class="absolute inset-0 w-full h-full object-contain"
+          />
+        </div>
+        <form
+          hx-put={`/actions/photo/${new AtUri(photo.uri).rkey}`}
+          _="on htmx:afterOnLoad trigger closeDialog"
+        >
+          <div class="my-2">
+            <label htmlFor="alt">Descriptive alt text</label>
+            <Textarea
+              id="alt"
+              name="alt"
+              rows={4}
+              defaultValue={photo.alt}
+              placeholder="Alt text"
+              autoFocus
+              class="dark:bg-zinc-800 dark:text-white"
+            />
+          </div>
+          <div class="w-full flex flex-col gap-2 mt-2">
+            <Button type="submit" variant="primary" class="w-full">
+              Save
+            </Button>
+            <Dialog.Close class="w-full">Cancel</Dialog.Close>
+          </div>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

src/components/PhotoButton.tsx

···
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { photoDialogLink } from "../utils.ts";
+
+export function PhotoButton({
+  photo,
+  gallery,
+}: Readonly<{
+  photo: PhotoView;
+  gallery: GalleryView;
+}>) {
+  return (
+    <button
+      id={`photo-${new AtUri(photo.uri).rkey}`}
+      type="button"
+      hx-get={photoDialogLink(gallery, photo)}
+      hx-trigger="click"
+      hx-target="#layout"
+      hx-swap="afterbegin"
+      class="masonry-tile absolute cursor-pointer"
+      data-width={photo.aspectRatio?.width}
+      data-height={photo.aspectRatio?.height}
+    >
+      <img
+        src={photo.fullsize}
+        alt={photo.alt}
+        class="w-full h-full object-cover"
+      />
+      {photo.alt
+        ? (
+          <div class="absolute bg-zinc-950 dark:bg-zinc-900 bottom-1 right-1 sm:bottom-1 sm:right-1 text-xs text-white font-semibold py-[1px] px-[3px]">
+            ALT
+          </div>
+        )
+        : null}
+    </button>
+  );
+}

src/components/PhotoDialog.tsx

···
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { Dialog } from "https://jsr.io/@bigmoves/bff/0.3.0-beta.21/components/Dialog.tsx";
+import { photoDialogLink } from "../utils.ts";
+
+export function PhotoDialog({
+  gallery,
+  image,
+  nextImage,
+  prevImage,
+}: Readonly<{
+  gallery: GalleryView;
+  image: PhotoView;
+  nextImage?: PhotoView;
+  prevImage?: PhotoView;
+}>) {
+  return (
+    <Dialog id="photo-dialog" class="bg-zinc-950 z-30">
+      <Dialog.X />
+      {nextImage
+        ? (
+          <div
+            hx-get={photoDialogLink(gallery, nextImage)}
+            hx-trigger="keyup[key=='ArrowRight'] from:body, swipeleft from:body"
+            hx-target="#photo-dialog"
+            hx-swap="innerHTML"
+          />
+        )
+        : null}
+      {prevImage
+        ? (
+          <div
+            hx-get={photoDialogLink(gallery, prevImage)}
+            hx-trigger="keyup[key=='ArrowLeft'] from:body, swiperight from:body"
+            hx-target="#photo-dialog"
+            hx-swap="innerHTML"
+          />
+        )
+        : null}
+      <div
+        class="flex flex-col w-5xl h-[calc(100vh-100px)] sm:h-screen z-20"
+        _={Dialog._closeOnClick}
+      >
+        <div class="flex flex-col p-4 z-20 flex-1 relative">
+          <img
+            src={image.fullsize}
+            alt={image.alt}
+            class="absolute inset-0 w-full h-full object-contain"
+          />
+        </div>
+        {image.alt
+          ? (
+            <div class="px-4 sm:px-0 py-4 bg-black text-white text-left">
+              {image.alt}
+            </div>
+          )
+          : null}
+      </div>
+    </Dialog>
+  );
+}

src/components/PhotoPreview.tsx

···
+import { AtUri } from "@atproto/syntax";
+import { AltTextButton } from "./AltTextButton.tsx";
+
+export function PhotoPreview({
+  src,
+  uri,
+}: Readonly<{
+  src: string;
+  uri?: string;
+}>) {
+  return (
+    <div class="relative aspect-square bg-zinc-200 dark:bg-zinc-900">
+      {uri ? <AltTextButton photoUri={uri} /> : null}
+      {uri
+        ? (
+          <button
+            type="button"
+            hx-delete={`/actions/photo/${new AtUri(uri).rkey}`}
+            class="bg-zinc-950 z-10 absolute top-2 right-2 cursor-pointer size-4 flex items-center justify-center"
+            _="on htmx:afterOnLoad remove me.parentNode"
+          >
+            <i class="fas fa-close text-white"></i>
+          </button>
+        )
+        : null}
+      <img
+        src={src}
+        alt=""
+        data-state={uri ? "complete" : "pending"}
+        class="absolute inset-0 w-full h-full object-contain data-[state=pending]:opacity-50"
+      />
+    </div>
+  );
+}

src/components/PhotoSelectButton.tsx

···
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+
+export function PhotoSelectButton({
+  galleryUri,
+  itemUris,
+  photo,
+}: Readonly<{
+  galleryUri: string;
+  itemUris: string[];
+  photo: PhotoView;
+}>) {
+  return (
+    <button
+      hx-put={`/actions/gallery/${new AtUri(galleryUri).rkey}/${
+        itemUris.includes(photo.uri) ? "remove-photo" : "add-photo"
+      }/${new AtUri(photo.uri).rkey}`}
+      hx-swap="outerHTML"
+      type="button"
+      data-added={itemUris.includes(photo.uri) ? "true" : "false"}
+      class="group cursor-pointer relative aspect-square data-[added=true]:ring-2 ring-sky-500 disabled:opacity-50"
+      _={`on htmx:beforeRequest add @disabled to me
+     then on htmx:afterOnLoad
+       remove @disabled from me
+       if @data-added == 'true'
+         set @data-added to 'false' 
+         remove #photo-${new AtUri(photo.uri).rkey}
+       else
+         set @data-added to 'true'
+       end`}
+    >
+      <div class="hidden group-data-[added=true]:block absolute top-2 right-2 z-30">
+        <i class="fa-check fa-solid text-sky-500 z-10" />
+      </div>
+      <img
+        src={photo.fullsize}
+        alt={photo.alt}
+        class="absolute inset-0 w-full h-full object-contain"
+      />
+    </button>
+  );
+}

src/components/PhotoSelectDialog.tsx

···
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { Dialog } from "@bigmoves/bff/components";
+import { PhotoSelectButton } from "./PhotoSelectButton.tsx";
+
+export function PhotoSelectDialog({
+  galleryUri,
+  itemUris,
+  photos,
+}: Readonly<{
+  galleryUri: string;
+  itemUris: string[];
+  photos: PhotoView[];
+}>) {
+  return (
+    <Dialog id="photo-select-dialog" class="z-30">
+      <Dialog.Content class="w-full max-w-5xl dark:bg-zinc-950 sm:min-h-screen flex flex-col relative">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <Dialog.Title>Add photos</Dialog.Title>
+        {photos.length
+          ? (
+            <p class="my-2 text-center">
+              Choose photos to add/remove from your gallery. Click close when
+              done.
+            </p>
+          )
+          : null}
+        {photos.length
+          ? (
+            <div class="grid grid-cols-3 sm:grid-cols-5 gap-4 my-4 flex-1">
+              {photos.map((photo) => (
+                <PhotoSelectButton
+                  key={photo.cid}
+                  galleryUri={galleryUri}
+                  itemUris={itemUris}
+                  photo={photo}
+                />
+              ))}
+            </div>
+          )
+          : (
+            <div class="flex-1 flex justify-center items-center my-30">
+              <p>
+                No photos yet.{" "}
+                <a
+                  href={`/upload?returnTo=${new AtUri(galleryUri).rkey}`}
+                  class="hover:underline font-semibold text-sky-500"
+                >
+                  Upload
+                </a>{" "}
+                photos and return to add.
+              </p>
+            </div>
+          )}
+        <div class="w-full flex flex-col gap-2 mt-2">
+          <Dialog.Close class="w-full">Close</Dialog.Close>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

src/components/ProfileDialog.tsx

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { Button, Dialog, Input, Textarea } from "@bigmoves/bff/components";
+import { AvatarForm } from "./AvatarForm.tsx";
+
+export function ProfileDialog({
+  profile,
+}: Readonly<{
+  profile: ProfileView;
+}>) {
+  return (
+    <Dialog>
+      <Dialog.Content class="dark:bg-zinc-950 relative">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <Dialog.Title>Edit my profile</Dialog.Title>
+        <div>
+          <AvatarForm src={profile.avatar} alt={profile.handle} />
+        </div>
+        <form
+          hx-post="/actions/profile/update"
+          hx-swap="none"
+          _="on htmx:afterOnLoad trigger closeModal"
+        >
+          <div id="image-input" />
+          <div class="mb-4 relative">
+            <label htmlFor="displayName">Display Name</label>
+            <Input
+              type="text"
+              required
+              id="displayName"
+              name="displayName"
+              class="dark:bg-zinc-800 dark:text-white"
+              value={profile.displayName}
+              autoFocus
+            />
+          </div>
+          <div class="mb-4 relative">
+            <label htmlFor="description">Description</label>
+            <Textarea
+              id="description"
+              name="description"
+              rows={4}
+              class="dark:bg-zinc-800 dark:text-white"
+            >
+              {profile.description}
+            </Textarea>
+          </div>
+          <Button type="submit" variant="primary" class="w-full">
+            Update
+          </Button>
+          <Button
+            variant="secondary"
+            type="button"
+            class="w-full"
+            _={Dialog._closeOnClick}
+          >
+            Cancel
+          </Button>
+        </form>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

src/components/ProfilePage.tsx

···
+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 { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { AtUri } from "@atproto/syntax";
+import { Button, cn } from "@bigmoves/bff/components";
+import { TimelineItem } from "../timeline.ts";
+import { galleryLink, profileLink } from "../utils.ts";
+import { AvatarButton } from "./AvatarButton.tsx";
+import { FollowButton } from "./FollowButton.tsx";
+import { TimelineItem as Item } from "./TimelineItem.tsx";
+
+export 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;
+  const displayName = profile.displayName || profile.handle;
+  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">
+        <div class="flex flex-col mb-4">
+          <AvatarButton profile={profile} />
+          <p class="text-2xl font-bold">{displayName}</p>
+          <p class="text-zinc-600 dark:text-zinc-500">@{profile.handle}</p>
+          {profile.description
+            ? <p class="mt-2">{profile.description}</p>
+            : null}
+        </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} />
+            </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>
+                <a href="/upload">
+                  <i class="fa-solid fa-upload mr-2" />
+                  Upload
+                </a>
+              </Button>
+              <Button
+                variant="primary"
+                type="button"
+                hx-get="/dialogs/profile"
+                hx-target="#layout"
+                hx-swap="afterbegin"
+                class="w-full sm:w-fit"
+              >
+                Edit Profile
+              </Button>
+              <Button
+                variant="primary"
+                type="button"
+                class="w-full sm:w-fit"
+                hx-get="/dialogs/gallery/new"
+                hx-target="#layout"
+                hx-swap="afterbegin"
+              >
+                Create Gallery
+              </Button>
+            </div>
+          )
+          : null}
+      </div>
+      <div class="my-4 space-x-2 w-full flex sm:w-fit" role="tablist">
+        <button
+          type="button"
+          hx-get={profileLink(profile.handle)}
+          hx-target="body"
+          hx-swap="outerHTML"
+          class={cn(
+            "flex-1 py-2 px-4 cursor-pointer font-semibold",
+            !selectedTab && "bg-zinc-100 dark:bg-zinc-800 font-semibold",
+          )}
+          role="tab"
+          aria-selected="true"
+          aria-controls="tab-content"
+        >
+          Activity
+        </button>
+        <button
+          type="button"
+          hx-get={profileLink(profile.handle) + "?tab=galleries"}
+          hx-target="#profile-page"
+          hx-swap="outerHTML"
+          class={cn(
+            "flex-1 py-2 px-4 cursor-pointer font-semibold",
+            selectedTab === "galleries" && "bg-zinc-100 dark:bg-zinc-800",
+          )}
+          role="tab"
+          aria-selected="false"
+          aria-controls="tab-content"
+        >
+          Galleries
+        </button>
+      </div>
+      <div id="tab-content" role="tabpanel">
+        {!selectedTab
+          ? (
+            <ul class="space-y-4 relative divide-zinc-200 dark:divide-zinc-800 divide-y w-fit">
+              {timelineItems.length
+                ? (
+                  timelineItems.map((item) => (
+                    <Item item={item} key={item.itemUri} />
+                  ))
+                )
+                : <li>No activity yet.</li>}
+            </ul>
+          )
+          : null}
+        {selectedTab === "galleries"
+          ? (
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-4">
+              {galleries?.length
+                ? (
+                  galleries.map((gallery) => (
+                    <a
+                      href={galleryLink(
+                        gallery.creator.handle,
+                        new AtUri(gallery.uri).rkey,
+                      )}
+                      class="cursor-pointer relative aspect-square"
+                    >
+                      {gallery.items?.length
+                        ? (
+                          <img
+                            src={gallery.items?.filter(isPhotoView)?.[0]
+                              ?.fullsize}
+                            alt={gallery.items?.filter(isPhotoView)?.[0]?.alt}
+                            class="w-full h-full object-cover"
+                          />
+                        )
+                        : (
+                          <div class="w-full h-full bg-zinc-200 dark:bg-zinc-900" />
+                        )}
+                      <div class="absolute bottom-0 left-0 bg-black/80 text-white p-2">
+                        {(gallery.record as Gallery).title}
+                      </div>
+                    </a>
+                  ))
+                )
+                : <p>No galleries yet.</p>}
+            </div>
+          )
+          : null}
+      </div>
+    </div>
+  );
+}

src/components/ShareGalleryButton.tsx

···
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { Button } from "@bigmoves/bff/components";
+import { publicGalleryLink } from "../utils.ts";
+
+export function ShareGalleryButton(
+  { gallery }: Readonly<{ gallery: GalleryView }>,
+) {
+  const intentLink = `https://bsky.app/intent/compose?text=${
+    encodeURIComponent(
+      "Check out this gallery on @grain.social \n" +
+        publicGalleryLink(gallery.creator.handle, gallery.uri),
+    )
+  }`;
+  return (
+    <Button
+      variant="primary"
+      asChild
+    >
+      <a href={intentLink} target="_blank" rel="noopener noreferrer">
+        <i class="fa-solid fa-arrow-up-from-bracket mr-2" />
+        Share to Bluesky
+      </a>
+    </Button>
+  );
+}

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 "../timeline.ts";
+import { formatRelativeTime, galleryLink } from "../utils.ts";
+import { ActorInfo } from "./ActorInfo.tsx";
+import { GalleryPreviewLink } from "./GalleryPreviewLink.tsx";
+
+export function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
+  return (
+    <li>
+      <div class="w-fit flex flex-col gap-4 pb-4">
+        <div class="flex items-center justify-between gap-2 w-full">
+          <ActorInfo profile={item.actor} />
+          <span class="shrink-0">
+            {formatRelativeTime(new Date(item.createdAt))}
+          </span>
+        </div>
+        {item.gallery.items?.filter(isPhotoView).length
+          ? (
+            <GalleryPreviewLink
+              gallery={item.gallery}
+            />
+          )
+          : null}
+        <p>
+          {item.itemType === "favorite" ? "Favorited" : "Created"}{" "}
+          <a
+            href={galleryLink(
+              item.gallery.creator.handle,
+              new AtUri(item.gallery.uri).rkey,
+            )}
+            class="font-semibold hover:underline"
+          >
+            {(item.gallery.record as Gallery).title}
+          </a>
+        </p>
+      </div>
+    </li>
+  );
+}

src/components/Timline.tsx

···
+import { type TimelineItem } from "../timeline.ts";
+import { Header } from "./Header.tsx";
+import { TimelineItem as Item } from "./TimelineItem.tsx";
+
+export function Timeline({ items }: Readonly<{ items: TimelineItem[] }>) {
+  return (
+    <div class="px-4 mb-4">
+      <div class="my-4">
+        <Header>Timeline</Header>
+      </div>
+      <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} />)}
+      </ul>
+    </div>
+  );
+}

src/components/UploadPage.tsx

···
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { Button } from "https://jsr.io/@bigmoves/bff/0.3.0-beta.21/components/Button.tsx";
+import { profileLink } from "../utils.ts";
+import { PhotoPreview } from "./PhotoPreview.tsx";
+
+export function UploadPage({
+  handle,
+  photos,
+  returnTo,
+}: Readonly<{ handle: string; photos: PhotoView[]; returnTo?: string }>) {
+  return (
+    <div class="flex flex-col px-4 pt-4 mb-4 space-y-4">
+      <div class="flex">
+        <div class="flex-1">
+          {returnTo
+            ? (
+              <a href={returnTo} class="hover:underline">
+                <i class="fa-solid fa-arrow-left mr-2" />
+                Back to gallery
+              </a>
+            )
+            : (
+              <a href={profileLink(handle)} class="hover:underline">
+                <i class="fa-solid fa-arrow-left mr-2" />
+                Back to profile
+              </a>
+            )}
+        </div>
+      </div>
+      <Button variant="primary" class="mb-4 w-full sm:w-fit" asChild>
+        <label>
+          <i class="fa fa-plus"></i> Add photos
+          <input
+            class="hidden"
+            type="file"
+            multiple
+            accept="image/*"
+            _="on change call uploadPhotos(me)"
+          />
+        </label>
+      </Button>
+      <div
+        id="image-preview"
+        class="w-full h-full grid grid-cols-2 sm:grid-cols-5 gap-2"
+      >
+        {photos.map((photo) => (
+          <PhotoPreview key={photo.cid} src={photo.thumb} uri={photo.uri} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/env.ts

···
+export const PUBLIC_URL = Deno.env.get("BFF_PUBLIC_URL") ??
+  "http://localhost:8080";
+export const GOATCOUNTER_URL = Deno.env.get("GOATCOUNTER_URL");

src/errors.ts

···
+import { OAUTH_ROUTES, RateLimitError, UnauthorizedError } from "@bigmoves/bff";
+import { formatDuration, intervalToDuration } from "date-fns";
+
+export function onError(err: unknown): Response {
+  if (err instanceof UnauthorizedError) {
+    const ctx = err.ctx;
+    return ctx.redirect(OAUTH_ROUTES.loginPage);
+  }
+  if (err instanceof RateLimitError) {
+    const now = new Date();
+    const future = new Date(now.getTime() + (err.retryAfter ?? 0) * 1000);
+    const duration = intervalToDuration({ start: now, end: future });
+    const formatted = formatDuration(duration, {
+      format: ["minutes", "seconds"],
+    });
+    return new Response(
+      `Too many requests. Retry in ${formatted}.`,
+      {
+        status: 429,
+        headers: {
+          ...err.retryAfter && { "Retry-After": err.retryAfter.toString() },
+          "Content-Type": "text/plain",
+        },
+      },
+    );
+  }
+  return new Response("Internal Server Error", {
+    status: 500,
+  });
+}

src/follow.ts

···
+import { Record as BskyFollow } from "$lexicon/types/app/bsky/graph/follow.ts";
+import { BffContext, WithBffMeta } from "@bigmoves/bff";
+
+export 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;
+}

src/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 { Record as GalleryItem } from "$lexicon/types/social/grain/gallery/item.ts";
+import {
+  isRecord as isPhoto,
+  Record as Photo,
+} from "$lexicon/types/social/grain/photo.ts";
+import {
+  isPhotoView,
+  PhotoView,
+} from "$lexicon/types/social/grain/photo/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { AtUri } from "@atproto/syntax";
+import { BffContext, WithBffMeta } from "@bigmoves/bff";
+import { getActorProfile } from "./actor.ts";
+import { photoToView } from "./photo.ts";
+
+export function getGalleryItemsAndPhotos(
+  ctx: BffContext,
+  galleries: WithBffMeta<Gallery>[],
+): Map<string, WithBffMeta<Photo>[]> {
+  const galleryUris = galleries.map(
+    (gallery) =>
+      `at://${gallery.did}/social.grain.gallery/${new AtUri(gallery.uri).rkey}`,
+  );
+
+  if (galleryUris.length === 0) return new Map();
+
+  const { items: galleryItems } = ctx.indexService.getRecords<
+    WithBffMeta<GalleryItem>
+  >("social.grain.gallery.item", {
+    orderBy: [{ field: "position", direction: "asc" }],
+    where: [{ field: "gallery", in: galleryUris }],
+  });
+
+  const photoUris = galleryItems.map((item) => item.item).filter(Boolean);
+  if (photoUris.length === 0) return new Map();
+
+  const { items: photos } = ctx.indexService.getRecords<WithBffMeta<Photo>>(
+    "social.grain.photo",
+    {
+      where: [{ field: "uri", in: photoUris }],
+    },
+  );
+
+  const photosMap = new Map<string, WithBffMeta<Photo>>();
+  for (const photo of photos) {
+    photosMap.set(photo.uri, photo);
+  }
+
+  const galleryPhotosMap = new Map<string, WithBffMeta<Photo>[]>();
+  for (const item of galleryItems) {
+    const galleryUri = item.gallery;
+    const photo = photosMap.get(item.item);
+
+    if (!galleryPhotosMap.has(galleryUri)) {
+      galleryPhotosMap.set(galleryUri, []);
+    }
+
+    if (photo) {
+      galleryPhotosMap.get(galleryUri)?.push(photo);
+    }
+  }
+
+  return galleryPhotosMap;
+}
+
+export function getGallery(handleOrDid: string, rkey: string, ctx: BffContext) {
+  let did: string;
+  if (handleOrDid.includes("did:")) {
+    did = handleOrDid;
+  } else {
+    const actor = ctx.indexService.getActorByHandle(handleOrDid);
+    if (!actor) return null;
+    did = actor.did;
+  }
+  const gallery = ctx.indexService.getRecord<WithBffMeta<Gallery>>(
+    `at://${did}/social.grain.gallery/${rkey}`,
+  );
+  if (!gallery) return null;
+  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, [gallery]);
+  const profile = getActorProfile(did, ctx);
+  if (!profile) return null;
+  return galleryToView(
+    gallery,
+    profile,
+    galleryPhotosMap.get(gallery.uri) ?? [],
+  );
+}
+
+export async function deleteGallery(uri: string, ctx: BffContext) {
+  await ctx.deleteRecord(uri);
+  const { items: galleryItems } = ctx.indexService.getRecords<
+    WithBffMeta<GalleryItem>
+  >("social.grain.gallery.item", {
+    where: [{ field: "gallery", equals: uri }],
+  });
+  for (const item of galleryItems) {
+    await ctx.deleteRecord(item.uri);
+  }
+  const { items: favs } = ctx.indexService.getRecords<WithBffMeta<Favorite>>(
+    "social.grain.favorite",
+    {
+      where: [{ field: "subject", equals: uri }],
+    },
+  );
+  for (const fav of favs) {
+    await ctx.deleteRecord(fav.uri);
+  }
+}
+
+export function getGalleryFavs(galleryUri: string, ctx: BffContext) {
+  const atUri = new AtUri(galleryUri);
+  const results = ctx.indexService.getRecords<WithBffMeta<Favorite>>(
+    "social.grain.favorite",
+    {
+      where: [
+        {
+          field: "subject",
+          equals: `at://${atUri.hostname}/social.grain.gallery/${atUri.rkey}`,
+        },
+      ],
+    },
+  );
+  return results.items;
+}
+
+export function galleryToView(
+  record: WithBffMeta<Gallery>,
+  creator: Un$Typed<ProfileView>,
+  items: Photo[],
+): Un$Typed<GalleryView> {
+  return {
+    uri: record.uri,
+    cid: record.cid,
+    creator,
+    record,
+    items: items
+      ?.map((item) => itemToView(record.did, item))
+      .filter(isPhotoView),
+    indexedAt: record.indexedAt,
+  };
+}
+
+function itemToView(
+  did: string,
+  item:
+    | WithBffMeta<Photo>
+    | {
+      $type: string;
+    },
+): Un$Typed<PhotoView> | undefined {
+  if (isPhoto(item)) {
+    return photoToView(did, item);
+  }
+  return undefined;
+}

src/main.tsx

···
+import { lexicons } from "$lexicon/lexicons.ts";
+import { bff, BffContext, JETSTREAM, oauth, route } from "@bigmoves/bff";
+import { Root } from "./app.tsx";
+import { LoginPage } from "./components/LoginPage.tsx";
+import { onError } from "./errors.ts";
+import * as actionHandlers from "./routes/actions.tsx";
+import * as dialogHandlers from "./routes/dialogs.tsx";
+import { handler as galleryHandler } from "./routes/gallery.tsx";
+import { handler as galleryEmbedHandler } from "./routes/gallery_embed.tsx";
+import { handler as notificationsHandler } from "./routes/notifications.tsx";
+import { handler as onboardHandler } from "./routes/onboard.tsx";
+import { handler as profileHandler } from "./routes/profile.tsx";
+import { handler as timelineHandler } from "./routes/timeline.tsx";
+import { handler as uploadHandler } from "./routes/upload.tsx";
+import { appStateMiddleware, type State } from "./state.ts";
+import { avatarUploadRoutes, photoUploadRoutes } from "./uploads.tsx";
+import { generateStaticFilesHash, onSignedIn } from "./utils.ts";
+
+let staticFilesHash = new Map<string, string>();
+
+bff({
+  appName: "Grain Social",
+  collections: [
+    "social.grain.gallery",
+    "social.grain.actor.profile",
+    "social.grain.photo",
+    "social.grain.favorite",
+    "social.grain.gallery.item",
+  ],
+  jetstreamUrl: JETSTREAM.WEST_1,
+  lexicons,
+  rootElement: Root,
+  onListen: async () => {
+    staticFilesHash = await generateStaticFilesHash();
+  },
+  onError,
+  middlewares: [
+    (_req, ctx: BffContext<State>) => {
+      ctx.state.staticFilesHash = staticFilesHash;
+      return ctx.next();
+    },
+    appStateMiddleware,
+    oauth({
+      onSignedIn,
+      LoginComponent: LoginPage,
+    }),
+    route("/", timelineHandler),
+    route("/notifications", notificationsHandler),
+    route("/profile/:handle", profileHandler),
+    route("/profile/:handle/gallery/:rkey", galleryHandler),
+    route("/embed/profile/:did/gallery/:rkey", galleryEmbedHandler),
+    route("/upload", uploadHandler),
+    route("/onboard", onboardHandler),
+    route("/dialogs/gallery/new", dialogHandlers.createGallery),
+    route("/dialogs/gallery/:rkey", dialogHandlers.editGallery),
+    route("/dialogs/gallery/:rkey/sort", dialogHandlers.sortGallery),
+    route("/dialogs/profile", dialogHandlers.editProfile),
+    route("/dialogs/avatar/:handle", dialogHandlers.avatar),
+    route("/dialogs/image", dialogHandlers.image),
+    route("/dialogs/photo/:rkey/alt", dialogHandlers.photoAlt),
+    route(
+      "/dialogs/photo-select/:galleryRkey",
+      dialogHandlers.galleryPhotoSelect,
+    ),
+    route("/actions/update-seen", ["POST"], actionHandlers.updateSeen),
+    route("/actions/follow/:did", ["POST"], actionHandlers.follow),
+    route(
+      "/actions/follow/:followeeDid/:rkey",
+      ["DELETE"],
+      actionHandlers.unfollow,
+    ),
+    route("/actions/create-edit", ["POST"], actionHandlers.galleryCreateEdit),
+    route("/actions/gallery/delete", ["POST"], actionHandlers.galleryDelete),
+    route(
+      "/actions/gallery/:galleryRkey/add-photo/:photoRkey",
+      ["PUT"],
+      actionHandlers.galleryAddPhoto,
+    ),
+    route(
+      "/actions/gallery/:galleryRkey/remove-photo/:photoRkey",
+      ["PUT"],
+      actionHandlers.galleryRemovePhoto,
+    ),
+    route("/actions/photo/:rkey", ["PUT"], actionHandlers.photoEdit),
+    route("/actions/photo/:rkey", ["DELETE"], actionHandlers.photoDelete),
+    route("/actions/favorite", ["POST"], actionHandlers.galleryFavorite),
+    route("/actions/profile/update", ["POST"], actionHandlers.profileUpdate),
+    route(
+      "/actions/gallery/:rkey/sort",
+      ["POST"],
+      actionHandlers.gallerySort,
+    ),
+    ...photoUploadRoutes(),
+    ...avatarUploadRoutes(),
+  ],
+});

src/meta.ts

···
+import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { MetaDescriptor } from "@bigmoves/bff/components";
+import { PUBLIC_URL } from "./env.ts";
+import { galleryLink } from "./utils.ts";
+
+export function getPageMeta(pageUrl: string): MetaDescriptor[] {
+  return [
+    {
+      tagName: "link",
+      property: "canonical",
+      href: `${PUBLIC_URL}${pageUrl}`,
+    },
+    { property: "og:site_name", content: "Grain Social" },
+  ];
+}
+
+export function getGalleryMeta(gallery: GalleryView): MetaDescriptor[] {
+  return [
+    // { property: "og:type", content: "website" },
+    {
+      property: "og:url",
+      content: `${PUBLIC_URL}${
+        galleryLink(
+          gallery.creator.handle,
+          new AtUri(gallery.uri).rkey,
+        )
+      }`,
+    },
+    { property: "og:title", content: (gallery.record as Gallery).title },
+    {
+      property: "og:description",
+      content: (gallery.record as Gallery).description,
+    },
+    {
+      property: "og:image",
+      content: gallery?.items?.filter(isPhotoView)?.[0]?.thumb,
+    },
+  ];
+}

src/notifications.ts

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
+import { NotificationView } from "$lexicon/types/social/grain/notification/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { ActorTable, BffContext, WithBffMeta } from "@bigmoves/bff";
+import { getActorProfile } from "./actor.ts";
+
+export type NotificationRecords = WithBffMeta<Favorite>;
+
+export function getNotifications(
+  currentUser: ActorTable,
+  ctx: BffContext,
+) {
+  const { lastSeenNotifs } = currentUser;
+  const notifications = ctx.getNotifications<NotificationRecords>();
+  return notifications.map((notification) => {
+    const actor = ctx.indexService.getActor(notification.did);
+    const authorProfile = getActorProfile(notification.did, ctx);
+    if (!actor || !authorProfile) return null;
+    return notificationToView(
+      notification,
+      authorProfile,
+      lastSeenNotifs,
+    );
+  }).filter((view): view is Un$Typed<NotificationView> => Boolean(view));
+}
+
+export function notificationToView(
+  record: NotificationRecords,
+  author: Un$Typed<ProfileView>,
+  lastSeenNotifs: string | undefined,
+): Un$Typed<NotificationView> {
+  const reason = record.$type === "social.grain.favorite"
+    ? "gallery-favorite"
+    : "unknown";
+  const reasonSubject = record.$type === "social.grain.favorite"
+    ? record.subject
+    : undefined;
+  const isRead = lastSeenNotifs ? record.createdAt <= lastSeenNotifs : false;
+  return {
+    uri: record.uri,
+    cid: record.cid,
+    author,
+    record,
+    reason,
+    reasonSubject,
+    isRead,
+    indexedAt: record.indexedAt,
+  };
+}

src/photo.ts

···
+import { Record as Photo } from "$lexicon/types/social/grain/photo.ts";
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { $Typed } from "$lexicon/util.ts";
+import { WithBffMeta } from "@bigmoves/bff";
+
+export function photoThumb(did: string, cid: string) {
+  return `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${cid}@jpeg`;
+}
+
+export function photoToView(
+  did: string,
+  photo: WithBffMeta<Photo>,
+): $Typed<PhotoView> {
+  return {
+    $type: "social.grain.photo.defs#photoView",
+    uri: photo.uri,
+    cid: photo.photo.ref.toString(),
+    thumb:
+      `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${photo.photo.ref.toString()}@jpeg`,
+    fullsize:
+      `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${photo.photo.ref.toString()}@jpeg`,
+    alt: photo.alt,
+    aspectRatio: photo.aspectRatio,
+  };
+}

src/routes/actions.tsx

···
+import { Record as BskyFollow } from "$lexicon/types/app/bsky/graph/follow.ts";
+import { Record as Profile } 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 GalleryItem } from "$lexicon/types/social/grain/gallery/item.ts";
+import { Record as Photo } from "$lexicon/types/social/grain/photo.ts";
+import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
+import { FavoriteButton } from "../components/FavoriteButton.tsx";
+import { FollowButton } from "../components/FollowButton.tsx";
+import { PhotoButton } from "../components/PhotoButton.tsx";
+import { PhotoSelectButton } from "../components/PhotoSelectButton.tsx";
+import { deleteGallery, getGallery, getGalleryFavs } from "../gallery.ts";
+import { photoToView } from "../photo.ts";
+import type { State } from "../state.ts";
+import { photoProcessor } from "../uploads.tsx";
+import { galleryLink } from "../utils.ts";
+
+export const updateSeen: RouteHandler = (
+  _req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  ctx.requireAuth();
+  ctx.updateSeen();
+  return new Response(null, { status: 200 });
+};
+
+export const follow: RouteHandler = async (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  ctx.requireAuth();
+  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} />);
+};
+
+export const unfollow: RouteHandler = async (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const followeeDid = params.followeeDid;
+  const rkey = params.rkey;
+  await ctx.deleteRecord(
+    `at://${did}/app.bsky.graph.follow/${rkey}`,
+  );
+  return ctx.html(
+    <FollowButton followeeDid={followeeDid} followUri={undefined} />,
+  );
+};
+
+export const galleryCreateEdit: RouteHandler = async (
+  req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  const { handle } = ctx.requireAuth();
+  const formData = await req.formData();
+  const title = formData.get("title") as string;
+  const description = formData.get("description") as string;
+  const url = new URL(req.url);
+  const searchParams = new URLSearchParams(url.search);
+  const uri = searchParams.get("uri");
+
+  if (uri) {
+    const gallery = ctx.indexService.getRecord<WithBffMeta<Gallery>>(uri);
+    if (!gallery) return ctx.next();
+    const rkey = new AtUri(uri).rkey;
+    try {
+      await ctx.updateRecord<Gallery>("social.grain.gallery", rkey, {
+        title,
+        description,
+        createdAt: gallery.createdAt,
+      });
+    } catch (e) {
+      console.error("Error updating record:", e);
+      const errorMessage = e instanceof Error
+        ? e.message
+        : "Unknown error occurred";
+      return new Response(errorMessage, { status: 400 });
+    }
+    return ctx.redirect(galleryLink(handle, rkey));
+  }
+
+  const createdUri = await ctx.createRecord<Gallery>(
+    "social.grain.gallery",
+    {
+      title,
+      description,
+      createdAt: new Date().toISOString(),
+    },
+  );
+  return ctx.redirect(galleryLink(handle, new AtUri(createdUri).rkey));
+};
+
+export const galleryDelete: RouteHandler = async (
+  req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  ctx.requireAuth();
+  const formData = await req.formData();
+  const uri = formData.get("uri") as string;
+  await deleteGallery(uri, ctx);
+  return ctx.redirect("/");
+};
+
+export const galleryAddPhoto: RouteHandler = async (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const galleryRkey = params.galleryRkey;
+  const photoRkey = params.photoRkey;
+  const galleryUri = `at://${did}/social.grain.gallery/${galleryRkey}`;
+  const photoUri = `at://${did}/social.grain.photo/${photoRkey}`;
+  const gallery = getGallery(did, galleryRkey, ctx);
+  const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
+  if (!gallery || !photo) return ctx.next();
+  if (
+    gallery.items
+      ?.filter(isPhotoView)
+      .some((item) => item.uri === photoUri)
+  ) {
+    return new Response(null, { status: 500 });
+  }
+  await ctx.createRecord<Gallery>("social.grain.gallery.item", {
+    gallery: galleryUri,
+    item: photoUri,
+    position: gallery.items?.length ?? 0,
+    createdAt: new Date().toISOString(),
+  });
+  gallery.items = [
+    ...(gallery.items ?? []),
+    photoToView(photo.did, photo),
+  ];
+  return ctx.html(
+    <>
+      <div hx-swap-oob="beforeend:#masonry-container">
+        <PhotoButton
+          key={photo.cid}
+          photo={photoToView(photo.did, photo)}
+          gallery={gallery}
+        />
+      </div>
+      <PhotoSelectButton
+        galleryUri={galleryUri}
+        itemUris={gallery.items?.filter(isPhotoView).map((item) => item.uri) ??
+          []}
+        photo={photoToView(photo.did, photo)}
+      />
+    </>,
+  );
+};
+
+export const galleryRemovePhoto: RouteHandler = async (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const galleryRkey = params.galleryRkey;
+  const photoRkey = params.photoRkey;
+  const galleryUri = `at://${did}/social.grain.gallery/${galleryRkey}`;
+  const photoUri = `at://${did}/social.grain.photo/${photoRkey}`;
+  if (!galleryRkey || !photoRkey) return ctx.next();
+  const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
+  if (!photo) return ctx.next();
+  const {
+    items: [item],
+  } = ctx.indexService.getRecords<WithBffMeta<GalleryItem>>(
+    "social.grain.gallery.item",
+    {
+      where: [
+        {
+          field: "gallery",
+          equals: galleryUri,
+        },
+        {
+          field: "item",
+          equals: photoUri,
+        },
+      ],
+    },
+  );
+  if (!item) return ctx.next();
+  await ctx.deleteRecord(item.uri);
+  const gallery = getGallery(did, galleryRkey, ctx);
+  if (!gallery) return ctx.next();
+  return ctx.html(
+    <PhotoSelectButton
+      galleryUri={galleryUri}
+      itemUris={gallery.items?.filter(isPhotoView).map((item) => item.uri) ??
+        []}
+      photo={photoToView(photo.did, photo)}
+    />,
+  );
+};
+
+export const photoEdit: RouteHandler = async (
+  req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const photoRkey = params.rkey;
+  const formData = await req.formData();
+  const alt = formData.get("alt") as string;
+  const photoUri = `at://${did}/social.grain.photo/${photoRkey}`;
+  const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
+  if (!photo) return ctx.next();
+  await ctx.updateRecord<Photo>("social.grain.photo", photoRkey, {
+    photo: photo.photo,
+    aspectRatio: photo.aspectRatio,
+    alt,
+    createdAt: photo.createdAt,
+  });
+  return new Response(null, { status: 200 });
+};
+
+export const photoDelete: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  ctx.deleteRecord(
+    `at://${did}/social.grain.photo/${params.rkey}`,
+  );
+  return new Response(null, { status: 200 });
+};
+
+export const galleryFavorite: 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) {
+    await ctx.deleteRecord(favUri);
+    const favs = getGalleryFavs(galleryUri, ctx);
+    return ctx.html(
+      <FavoriteButton
+        currentUserDid={did}
+        favs={favs}
+        galleryUri={galleryUri}
+      />,
+    );
+  }
+  await ctx.createRecord<WithBffMeta<Favorite>>("social.grain.favorite", {
+    subject: galleryUri,
+    createdAt: new Date().toISOString(),
+  });
+  const favs = getGalleryFavs(galleryUri, ctx);
+  return ctx.html(
+    <FavoriteButton
+      currentUserDid={did}
+      galleryUri={galleryUri}
+      favs={favs}
+    />,
+  );
+};
+
+export const gallerySort: RouteHandler = async (
+  req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did, handle } = ctx.requireAuth();
+  const galleryRkey = params.rkey;
+  const galleryUri = `at://${did}/social.grain.gallery/${galleryRkey}`;
+  const {
+    items,
+  } = ctx.indexService.getRecords<WithBffMeta<GalleryItem>>(
+    "social.grain.gallery.item",
+    {
+      where: [
+        {
+          field: "gallery",
+          equals: galleryUri,
+        },
+      ],
+    },
+  );
+  const itemsMap = new Map<string, WithBffMeta<GalleryItem>>();
+  for (const item of items) {
+    itemsMap.set(item.item, item);
+  }
+  const formData = await req.formData();
+  const sortedItems = formData.getAll("item") as string[];
+  const updates = [];
+  let position = 0;
+  for (const sortedItemUri of sortedItems) {
+    const item = itemsMap.get(sortedItemUri);
+    if (!item) continue;
+    updates.push({
+      collection: "social.grain.gallery.item",
+      rkey: new AtUri(item.uri).rkey,
+      data: {
+        gallery: item.gallery,
+        item: item.item,
+        createdAt: item.createdAt,
+        position,
+      },
+    });
+    position++;
+  }
+  await ctx.updateRecords<WithBffMeta<GalleryItem>>(updates);
+  return ctx.redirect(
+    galleryLink(handle, new AtUri(galleryUri).rkey),
+  );
+};
+
+export const profileUpdate: RouteHandler = async (
+  req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  const { did, handle } = ctx.requireAuth();
+  const formData = await req.formData();
+  const displayName = formData.get("displayName") as string;
+  const description = formData.get("description") as string;
+  const uploadId = formData.get("uploadId") as string;
+
+  const record = ctx.indexService.getRecord<Profile>(
+    `at://${did}/social.grain.actor.profile/self`,
+  );
+
+  if (!record) {
+    return new Response("Profile record not found", { status: 404 });
+  }
+
+  await ctx.updateRecord<Profile>("social.grain.actor.profile", "self", {
+    displayName,
+    description,
+    avatar: photoProcessor.getUploadStatus(uploadId)?.blobRef ??
+      record.avatar,
+  });
+
+  return ctx.redirect(`/profile/${handle}`);
+};

src/routes/dialogs.tsx

···
+import { Record as Profile } from "$lexicon/types/social/grain/actor/profile.ts";
+import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
+import { Record as Photo } from "$lexicon/types/social/grain/photo.ts";
+import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
+import { wrap } from "popmotion";
+import { getActorPhotos, getActorProfile } from "../actor.ts";
+import { AvatarDialog } from "../components/AvatarDialog.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 { getGallery, getGalleryItemsAndPhotos } from "../gallery.ts";
+import { photoToView } from "../photo.ts";
+import type { State } from "../state.ts";
+
+export const createGallery: RouteHandler = (
+  _req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  ctx.requireAuth();
+  return ctx.html(<GalleryCreateEditDialog />);
+};
+
+export const editGallery: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { handle } = ctx.requireAuth();
+  const rkey = params.rkey;
+  const gallery = getGallery(handle, rkey, ctx);
+  return ctx.html(<GalleryCreateEditDialog gallery={gallery} />);
+};
+
+export const sortGallery: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { handle } = ctx.requireAuth();
+  const rkey = params.rkey;
+  const gallery = getGallery(handle, rkey, ctx);
+  if (!gallery) return ctx.next();
+  return ctx.html(<GallerySortDialog gallery={gallery} />);
+};
+
+export const editProfile: RouteHandler = (
+  _req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  if (!ctx.state.profile) return ctx.next();
+  const profileRecord = ctx.indexService.getRecord<Profile>(
+    `at://${did}/social.grain.actor.profile/self`,
+  );
+  if (!profileRecord) return ctx.next();
+  return ctx.html(
+    <ProfileDialog
+      profile={ctx.state.profile}
+    />,
+  );
+};
+
+export const avatar: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const handle = params.handle;
+  const actor = ctx.indexService.getActorByHandle(handle);
+  if (!actor) return ctx.next();
+  const profile = getActorProfile(actor.did, ctx);
+  if (!profile) return ctx.next();
+  return ctx.html(<AvatarDialog profile={profile} />);
+};
+
+export const image: RouteHandler = (
+  req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  const url = new URL(req.url);
+  const galleryUri = url.searchParams.get("galleryUri");
+  const imageCid = url.searchParams.get("imageCid");
+  if (!galleryUri || !imageCid) return ctx.next();
+  const atUri = new AtUri(galleryUri);
+  const galleryDid = atUri.hostname;
+  const galleryRkey = atUri.rkey;
+  const gallery = getGallery(galleryDid, galleryRkey, ctx);
+  if (!gallery?.items) return ctx.next();
+  const image = gallery.items.filter(isPhotoView).find((item) => {
+    return item.cid === imageCid;
+  });
+  const imageAtIndex = gallery.items
+    .filter(isPhotoView)
+    .findIndex((image) => {
+      return image.cid === imageCid;
+    });
+  const next = wrap(0, gallery.items.length, imageAtIndex + 1);
+  const prev = wrap(0, gallery.items.length, imageAtIndex - 1);
+  if (!image) return ctx.next();
+  return ctx.html(
+    <PhotoDialog
+      gallery={gallery}
+      image={image}
+      nextImage={gallery.items.filter(isPhotoView).at(next)}
+      prevImage={gallery.items.filter(isPhotoView).at(prev)}
+    />,
+  );
+};
+
+export const photoAlt: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const photoRkey = params.rkey;
+  const photoUri = `at://${did}/social.grain.photo/${photoRkey}`;
+  const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
+  if (!photo) return ctx.next();
+  return ctx.html(
+    <PhotoAltDialog photo={photoToView(did, photo)} />,
+  );
+};
+
+export const galleryPhotoSelect: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const photos = getActorPhotos(did, ctx);
+  const galleryUri = `at://${did}/social.grain.gallery/${params.galleryRkey}`;
+  const gallery = ctx.indexService.getRecord<WithBffMeta<Gallery>>(
+    galleryUri,
+  );
+  if (!gallery) return ctx.next();
+  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, [gallery]);
+  const itemUris =
+    galleryPhotosMap.get(galleryUri)?.map((photo) => photo.uri) ?? [];
+  return ctx.html(
+    <PhotoSelectDialog
+      galleryUri={galleryUri}
+      itemUris={itemUris}
+      photos={photos}
+    />,
+  );
+};

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 { GalleryPage } from "../components/GalleryPage.tsx";
+import { getGallery, getGalleryFavs } from "../gallery.ts";
+import { getGalleryMeta, getPageMeta } from "../meta.ts";
+import type { State } from "../state.ts";
+import { galleryLink } from "../utils.ts";
+
+export const handler: RouteHandler = (
+  _req,
+  params,
+  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` },
+    ...getPageMeta(galleryLink(handle, rkey)),
+    ...getGalleryMeta(gallery),
+  ];
+  ctx.state.scripts = ["photo_dialog.js", "masonry.js", "sortable.js"];
+  return ctx.render(
+    <GalleryPage favs={favs} gallery={gallery} currentUserDid={did} />,
+  );
+};

src/routes/gallery_embed.tsx

···
+import { BffContext, RouteHandler } from "@bigmoves/bff";
+import { GalleryPreviewLink } from "../components/GalleryPreviewLink.tsx";
+import { getGallery } from "../gallery.ts";
+import type { State } from "../state.ts";
+
+export const handler: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const gallery = getGallery(params.did, params.rkey, ctx);
+  if (!gallery) return ctx.next();
+  return ctx.html(<GalleryPreviewLink gallery={gallery} size="small" />);
+};

src/routes/notifications.tsx

···
+import { BffContext, RouteHandler } from "@bigmoves/bff";
+import { NotificationsPage } from "../components/NotificationsPage.tsx";
+import type { State } from "../state.ts";
+
+export const handler: RouteHandler = (
+  _req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  ctx.requireAuth();
+  ctx.state.meta = [
+    { title: "Notifications — Grain" },
+  ];
+  return ctx.render(
+    <NotificationsPage notifications={ctx.state.notifications ?? []} />,
+  );
+};

src/routes/onboard.tsx

···
+import { BffContext, RouteHandler } from "@bigmoves/bff";
+import type { State } from "../state.ts";
+
+export const handler: RouteHandler = (
+  _req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  ctx.requireAuth();
+  return ctx.render(
+    <div
+      hx-get="/dialogs/profile"
+      hx-trigger="load"
+      hx-target="body"
+      hx-swap="afterbegin"
+    />,
+  );
+};

src/routes/profile.tsx

···
+import { Record as BskyFollow } from "$lexicon/types/app/bsky/graph/follow.ts";
+import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
+import { getActorGalleries, getActorProfile } from "../actor.ts";
+import { ProfilePage } from "../components/ProfilePage.tsx";
+import { getFollow } from "../follow.ts";
+import { getPageMeta } from "../meta.ts";
+import type { State } from "../state.ts";
+import { getActorTimeline } from "../timeline.ts";
+import { profileLink } from "../utils.ts";
+
+export const handler: RouteHandler = (
+  req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const url = new URL(req.url);
+  const tab = url.searchParams.get("tab");
+  const handle = params.handle;
+  const timelineItems = getActorTimeline(handle, ctx);
+  const galleries = getActorGalleries(handle, ctx);
+  const actor = ctx.indexService.getActorByHandle(handle);
+  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
+        ? `${profile.displayName} (${profile.handle}) — Grain`
+        : `${profile.handle} — Grain`,
+    },
+    ...getPageMeta(profileLink(handle)),
+  ];
+  if (tab) {
+    return ctx.html(
+      <ProfilePage
+        followUri={follow?.uri}
+        loggedInUserDid={ctx.currentUser?.did}
+        timelineItems={timelineItems}
+        profile={profile}
+        selectedTab={tab}
+        galleries={galleries}
+      />,
+    );
+  }
+  return ctx.render(
+    <ProfilePage
+      followUri={follow?.uri}
+      loggedInUserDid={ctx.currentUser?.did}
+      timelineItems={timelineItems}
+      profile={profile}
+    />,
+  );
+};

src/routes/timeline.tsx

···
+import { BffContext, RouteHandler } from "@bigmoves/bff";
+import { Timeline } from "../components/Timline.tsx";
+import { getPageMeta } from "../meta.ts";
+import type { State } from "../state.ts";
+import { getTimeline } from "../timeline.ts";
+
+export const handler: RouteHandler = (
+  _req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  const items = getTimeline(ctx);
+  ctx.state.meta = [{ title: "Timeline — Grain" }, ...getPageMeta("")];
+  return ctx.render(<Timeline items={items} />);
+};

src/routes/upload.tsx

···
+import { BffContext, RouteHandler } from "@bigmoves/bff";
+import { getActorPhotos } from "../actor.ts";
+import { UploadPage } from "../components/UploadPage.tsx";
+import { getPageMeta } from "../meta.ts";
+import type { State } from "../state.ts";
+import { galleryLink } from "../utils.ts";
+
+export const handler: RouteHandler = (
+  req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  const { did, handle } = ctx.requireAuth();
+  const url = new URL(req.url);
+  const galleryRkey = url.searchParams.get("returnTo");
+  const photos = getActorPhotos(did, ctx);
+  ctx.state.meta = [{ title: "Upload — Grain" }, ...getPageMeta("/upload")];
+  ctx.state.scripts = ["upload_page.js"];
+  return ctx.render(
+    <UploadPage
+      handle={handle}
+      photos={photos}
+      returnTo={galleryRkey ? galleryLink(handle, galleryRkey) : undefined}
+    />,
+  );
+};

src/state.ts

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { NotificationView } from "$lexicon/types/social/grain/notification/defs.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { BffMiddleware } from "@bigmoves/bff";
+import { MetaDescriptor } from "@bigmoves/bff/components";
+import { getActorProfile } from "./actor.ts";
+import { getNotifications } from "./notifications.ts";
+
+export type State = {
+  profile?: ProfileView;
+  scripts?: string[];
+  meta?: MetaDescriptor[];
+  notifications?: Un$Typed<NotificationView>[];
+  staticFilesHash?: Map<string, string>;
+};
+
+export const appStateMiddleware: BffMiddleware = (req, ctx) => {
+  if (ctx.currentUser) {
+    const url = new URL(req.url);
+    // ignore routes prefixed with actions, embed and dialogs (no need to resolve profile)
+    if (
+      ["actions", "embed"].some((path) => url.pathname.includes(path)) ||
+      (url.pathname.includes("dialogs") &&
+        !url.pathname.includes("/dialogs/profile"))
+    ) {
+      return ctx.next();
+    }
+    const profile = getActorProfile(ctx.currentUser.did, ctx);
+    if (profile) {
+      ctx.state.profile = profile;
+    }
+    const notifications = getNotifications(ctx.currentUser, ctx);
+    ctx.state.notifications = notifications;
+    return ctx.next();
+  }
+  return ctx.next();
+};

src/timeline.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 { Un$Typed } from "$lexicon/util.ts";
+import { AtUri } from "@atproto/syntax";
+import { BffContext, WithBffMeta } from "@bigmoves/bff";
+import { getActorProfile } from "./actor.ts";
+import { galleryToView, getGalleryItemsAndPhotos } from "./gallery.ts";
+
+type TimelineItemType = "gallery" | "favorite";
+
+export type TimelineItem = {
+  createdAt: string;
+  itemType: TimelineItemType;
+  itemUri: string;
+  actor: Un$Typed<ProfileView>;
+  gallery: GalleryView;
+};
+
+type TimelineOptions = {
+  actorDid?: string;
+};
+
+function processGalleries(
+  ctx: BffContext,
+  options?: TimelineOptions,
+): TimelineItem[] {
+  const items: TimelineItem[] = [];
+
+  const whereClause = options?.actorDid
+    ? [{ field: "did", equals: options.actorDid }]
+    : undefined;
+
+  const { items: galleries } = ctx.indexService.getRecords<
+    WithBffMeta<Gallery>
+  >("social.grain.gallery", {
+    orderBy: [{ field: "createdAt", direction: "desc" }],
+    where: whereClause,
+  });
+
+  if (galleries.length === 0) return items;
+
+  // Get photos for all galleries
+  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
+
+  for (const gallery of galleries) {
+    const actor = ctx.indexService.getActor(gallery.did);
+    if (!actor) continue;
+    const profile = getActorProfile(actor.did, ctx);
+    if (!profile) continue;
+
+    const galleryUri = `at://${gallery.did}/social.grain.gallery/${
+      new AtUri(gallery.uri).rkey
+    }`;
+    const galleryPhotos = galleryPhotosMap.get(galleryUri) || [];
+
+    const galleryView = galleryToView(gallery, profile, galleryPhotos);
+    items.push({
+      itemType: "gallery",
+      createdAt: gallery.createdAt,
+      itemUri: galleryView.uri,
+      actor: galleryView.creator,
+      gallery: galleryView,
+    });
+  }
+
+  return items;
+}
+
+function processFavs(
+  ctx: BffContext,
+  options?: TimelineOptions,
+): TimelineItem[] {
+  const items: TimelineItem[] = [];
+
+  const whereClause = options?.actorDid
+    ? [{ field: "did", equals: options.actorDid }]
+    : undefined;
+
+  const { items: favs } = ctx.indexService.getRecords<WithBffMeta<Favorite>>(
+    "social.grain.favorite",
+    {
+      orderBy: [{ field: "createdAt", direction: "desc" }],
+      where: whereClause,
+    },
+  );
+
+  if (favs.length === 0) return items;
+
+  // Collect all gallery references from favorites
+  const galleryRefs = new Map<string, WithBffMeta<Gallery>>();
+
+  for (const favorite of favs) {
+    if (!favorite.subject) continue;
+
+    try {
+      const atUri = new AtUri(favorite.subject);
+      const galleryDid = atUri.hostname;
+      const galleryRkey = atUri.rkey;
+      const galleryUri =
+        `at://${galleryDid}/social.grain.gallery/${galleryRkey}`;
+
+      const gallery = ctx.indexService.getRecord<WithBffMeta<Gallery>>(
+        galleryUri,
+      );
+      if (gallery) {
+        galleryRefs.set(galleryUri, gallery);
+      }
+    } catch (e) {
+      console.error("Error processing favorite:", e);
+    }
+  }
+
+  const galleries = Array.from(galleryRefs.values());
+  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
+
+  for (const favorite of favs) {
+    if (!favorite.subject) continue;
+
+    try {
+      const atUri = new AtUri(favorite.subject);
+      const galleryDid = atUri.hostname;
+      const galleryRkey = atUri.rkey;
+      const galleryUri =
+        `at://${galleryDid}/social.grain.gallery/${galleryRkey}`;
+
+      const gallery = galleryRefs.get(galleryUri);
+      if (!gallery) continue;
+
+      const galleryActor = ctx.indexService.getActor(galleryDid);
+      if (!galleryActor) continue;
+      const galleryProfile = getActorProfile(galleryActor.did, ctx);
+      if (!galleryProfile) continue;
+
+      const favActor = ctx.indexService.getActor(favorite.did);
+      if (!favActor) continue;
+      const favProfile = getActorProfile(favActor.did, ctx);
+      if (!favProfile) continue;
+
+      const galleryPhotos = galleryPhotosMap.get(galleryUri) || [];
+      const galleryView = galleryToView(gallery, galleryProfile, galleryPhotos);
+
+      items.push({
+        itemType: "favorite",
+        createdAt: favorite.createdAt,
+        itemUri: favorite.uri,
+        actor: favProfile,
+        gallery: galleryView,
+      });
+    } catch (e) {
+      console.error("Error processing favorite:", e);
+      continue;
+    }
+  }
+
+  return items;
+}
+
+function getTimelineItems(
+  ctx: BffContext,
+  options?: TimelineOptions,
+): TimelineItem[] {
+  const galleryItems = processGalleries(ctx, options);
+  const favsItems = processFavs(ctx, options);
+  const timelineItems = [...galleryItems, ...favsItems];
+
+  return timelineItems.sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+  );
+}
+
+export function getTimeline(ctx: BffContext): TimelineItem[] {
+  return getTimelineItems(ctx);
+}
+
+export function getActorTimeline(handleOrDid: string, ctx: BffContext) {
+  let did: string;
+  if (handleOrDid.includes("did:")) {
+    did = handleOrDid;
+  } else {
+    const actor = ctx.indexService.getActorByHandle(handleOrDid);
+    if (!actor) return [];
+    did = actor.did;
+  }
+  return getTimelineItems(ctx, { actorDid: did });
+}

src/uploads.tsx

···
+import { Record as Photo } from "$lexicon/types/social/grain/photo.ts";
+import { BffMiddleware, route, RouteHandler } from "@bigmoves/bff";
+import { BFFPhotoProcessor } from "@bigmoves/bff-photo-processor";
+import { createCanvas, Image } from "@gfx/canvas";
+import { VNode } from "preact";
+import { PhotoPreview } from "./components/PhotoPreview.tsx";
+import { photoThumb } from "./photo.ts";
+
+export const photoProcessor = new BFFPhotoProcessor();
+
+function uploadStart(
+  routePrefix: string,
+  cb: (params: { uploadId: string; src: string; done?: boolean }) => VNode,
+): RouteHandler {
+  return async (req, _params, ctx) => {
+    ctx.requireAuth();
+    ctx.rateLimit({
+      namespace: "upload",
+      points: 1,
+      limit: 50,
+      window: 24 * 60 * 60 * 1000, // 24 hours
+    });
+    const formData = await req.formData();
+    const file = formData.get("file") as File;
+    if (!file) {
+      return new Response("No file", { status: 400 });
+    }
+    const dataUrl = await compressImageForPreview(file);
+    if (!ctx.agent) {
+      return new Response("No agent", { status: 400 });
+    }
+    await photoProcessor.initialize(ctx.agent);
+    const uploadId = photoProcessor.startUpload(file);
+    return ctx.html(
+      <div
+        id={`upload-id-${uploadId}`}
+        hx-trigger="done"
+        hx-get={`/actions/${routePrefix}/upload-done?uploadId=${uploadId}`}
+        hx-target="this"
+        hx-swap="outerHTML"
+        class="h-full w-full"
+      >
+        <div
+          hx-get={`/actions/${routePrefix}/upload-check-status?uploadId=${uploadId}`}
+          hx-trigger="every 600ms"
+          hx-target="this"
+          hx-swap="innerHTML"
+          class="h-full w-full"
+        >
+          {cb({ uploadId, src: dataUrl })}
+        </div>
+      </div>,
+    );
+  };
+}
+
+function uploadCheckStatus(): RouteHandler {
+  return (req, _params, ctx) => {
+    ctx.requireAuth();
+    const url = new URL(req.url);
+    const searchParams = new URLSearchParams(url.search);
+    const uploadId = searchParams.get("uploadId");
+    if (!uploadId) return ctx.next();
+    const meta = photoProcessor.getUploadStatus(uploadId);
+    return new Response(
+      null,
+      {
+        status: meta?.blobRef ? 200 : 204,
+        headers: meta?.blobRef ? { "HX-Trigger": "done" } : {},
+      },
+    );
+  };
+}
+
+function avatarUploadDone(
+  cb: (params: { src: string; uploadId: string }) => VNode,
+): RouteHandler {
+  return (req, _params, ctx) => {
+    const { did } = ctx.requireAuth();
+    const url = new URL(req.url);
+    const searchParams = new URLSearchParams(url.search);
+    const uploadId = searchParams.get("uploadId");
+    if (!uploadId) return ctx.next();
+    const meta = photoProcessor.getUploadStatus(uploadId);
+    if (!meta?.blobRef) return ctx.next();
+    return ctx.html(
+      cb({ src: photoThumb(did, meta.blobRef.ref.toString()), uploadId }),
+    );
+  };
+}
+
+function photoUploadDone(
+  cb: (params: { src: string; uri: string }) => VNode,
+): RouteHandler {
+  return async (req, _params, ctx) => {
+    const { did } = ctx.requireAuth();
+    const url = new URL(req.url);
+    const searchParams = new URLSearchParams(url.search);
+    const uploadId = searchParams.get("uploadId");
+    if (!uploadId) return ctx.next();
+    const meta = photoProcessor.getUploadStatus(uploadId);
+    if (!meta?.blobRef) return ctx.next();
+    const photoUri = await ctx.createRecord<Photo>("social.grain.photo", {
+      photo: meta.blobRef,
+      aspectRatio: meta.dimensions?.width && meta.dimensions?.height
+        ? {
+          width: meta.dimensions.width,
+          height: meta.dimensions.height,
+        }
+        : undefined,
+      alt: "",
+      createdAt: new Date().toISOString(),
+    });
+    return ctx.html(
+      cb({ src: photoThumb(did, meta.blobRef.ref.toString()), uri: photoUri }),
+    );
+  };
+}
+
+export function photoUploadRoutes(): BffMiddleware[] {
+  return [
+    route(
+      `/actions/photo/upload-start`,
+      ["POST"],
+      uploadStart(
+        "photo",
+        ({ src }) => <PhotoPreview src={src} />,
+      ),
+    ),
+    route(
+      `/actions/photo/upload-check-status`,
+      ["GET"],
+      uploadCheckStatus(),
+    ),
+    route(
+      `/actions/photo/upload-done`,
+      ["GET"],
+      photoUploadDone(({ src, uri }) => (
+        <PhotoPreview
+          src={src}
+          uri={uri}
+        />
+      )),
+    ),
+  ];
+}
+
+export function avatarUploadRoutes(): BffMiddleware[] {
+  return [
+    route(
+      `/actions/avatar/upload-start`,
+      ["POST"],
+      uploadStart("avatar", ({ src }) => (
+        <img
+          src={src}
+          alt=""
+          data-state="pending"
+          class="rounded-full w-full h-full object-cover data-[state=pending]:opacity-50"
+        />
+      )),
+    ),
+    route(
+      `/actions/avatar/upload-check-status`,
+      ["GET"],
+      uploadCheckStatus(),
+    ),
+    route(
+      `/actions/avatar/upload-done`,
+      ["GET"],
+      avatarUploadDone(({ src, uploadId }) => (
+        <>
+          <div hx-swap-oob="innerHTML:#image-input">
+            <input type="hidden" name="uploadId" value={uploadId} />
+          </div>
+          <img
+            src={src}
+            alt=""
+            class="rounded-full w-full h-full object-cover"
+          />
+        </>
+      )),
+    ),
+  ];
+}
+
+function readFileAsDataURL(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(e.target?.result as string);
+    reader.onerror = (e) => reject(e);
+    reader.readAsDataURL(file);
+  });
+}
+
+function createImageFromDataURL(dataURL: string): Promise<Image> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.src = dataURL;
+  });
+}
+
+async function compressImageForPreview(file: File): Promise<string> {
+  const maxWidth = 500,
+    maxHeight = 500,
+    format = "jpeg";
+
+  // Create an image from the file
+  const dataUrl = await readFileAsDataURL(file);
+  const img = await createImageFromDataURL(dataUrl);
+
+  // Create a canvas with reduced dimensions
+  const canvas = createCanvas(img.width, img.height);
+  let width = img.width;
+  let height = img.height;
+
+  // Calculate new dimensions while maintaining aspect ratio
+  if (width > height) {
+    if (width > maxWidth) {
+      height = Math.round((height * maxWidth) / width);
+      width = maxWidth;
+    }
+  } else {
+    if (height > maxHeight) {
+      width = Math.round((width * maxHeight) / height);
+      height = maxHeight;
+    }
+  }
+
+  canvas.width = width;
+  canvas.height = height;
+
+  // Draw and compress the image
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+  ctx.drawImage(img, 0, 0, width, height);
+
+  // Convert to compressed image data URL
+  return canvas.toDataURL(format);
+}

src/utils.ts

···
+import { Record as BskyProfile } from "$lexicon/types/app/bsky/actor/profile.ts";
+import { Record as Profile } from "$lexicon/types/social/grain/actor/profile.ts";
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { onSignedInArgs } from "@bigmoves/bff";
+import { join } from "@std/path/join";
+import {
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  differenceInWeeks,
+} from "date-fns";
+import { PUBLIC_URL } from "./env.ts";
+
+export function formatRelativeTime(date: Date) {
+  const now = new Date();
+  const weeks = differenceInWeeks(now, date);
+  if (weeks > 0) return `${weeks}w`;
+
+  const days = differenceInDays(now, date);
+  if (days > 0) return `${days}d`;
+
+  const hours = differenceInHours(now, date);
+  if (hours > 0) return `${hours}h`;
+
+  const minutes = differenceInMinutes(now, date);
+  return `${Math.max(1, minutes)}m`;
+}
+
+export function profileLink(handle: string) {
+  return `/profile/${handle}`;
+}
+
+export function galleryLink(handle: string, galleryRkey: string) {
+  return `/profile/${handle}/gallery/${galleryRkey}`;
+}
+
+export function photoDialogLink(gallery: GalleryView, image: PhotoView) {
+  return `/dialogs/image?galleryUri=${gallery.uri}&imageCid=${image.cid}`;
+}
+
+export function publicGalleryLink(handle: string, galleryUri: string): string {
+  return `${PUBLIC_URL}${galleryLink(handle, new AtUri(galleryUri).rkey)}`;
+}
+
+export async function onSignedIn({ actor, ctx }: onSignedInArgs) {
+  await ctx.backfillCollections(
+    [actor.did],
+    [
+      ...ctx.cfg.collections!,
+      "app.bsky.actor.profile",
+      "app.bsky.graph.follow",
+    ],
+  );
+
+  const profileResults = ctx.indexService.getRecords<Profile>(
+    "social.grain.actor.profile",
+    {
+      where: [{ field: "did", equals: actor.did }],
+    },
+  );
+
+  const profile = profileResults.items[0];
+
+  if (profile) {
+    console.log("Profile already exists");
+    return `/profile/${actor.handle}`;
+  }
+
+  const bskyProfileResults = ctx.indexService.getRecords<BskyProfile>(
+    "app.bsky.actor.profile",
+    {
+      where: [{ field: "did", equals: actor.did }],
+    },
+  );
+
+  const bskyProfile = bskyProfileResults.items[0];
+
+  if (!bskyProfile) {
+    console.error("Failed to get profile");
+    return;
+  }
+
+  await ctx.createRecord<Profile>(
+    "social.grain.actor.profile",
+    {
+      displayName: bskyProfile.displayName ?? undefined,
+      description: bskyProfile.description ?? undefined,
+      avatar: bskyProfile.avatar ?? undefined,
+      createdAt: new Date().toISOString(),
+    },
+    true,
+  );
+
+  return "/onboard";
+}
+
+export async function generateStaticFilesHash(): Promise<Map<string, string>> {
+  const staticFilesHash = new Map<string, string>();
+
+  for (const entry of Deno.readDirSync(join(Deno.cwd(), "static"))) {
+    if (
+      entry.isFile &&
+      (entry.name.endsWith(".js") || entry.name.endsWith(".css"))
+    ) {
+      const fileContent = await Deno.readFile(
+        join(Deno.cwd(), "static", entry.name),
+      );
+      const hashBuffer = await crypto.subtle.digest("SHA-256", fileContent);
+      const hash = Array.from(new Uint8Array(hashBuffer))
+        .map((b) => b.toString(16).padStart(2, "0"))
+        .join("");
+      staticFilesHash.set(entry.name, hash);
+    }
+  }
+
+  return staticFilesHash;
+}