Update gallery upload/add photos flow, styles refresh (#3)

* wip

* update env vars and readme

* wip

* wip

* move login from bff, update nav with new styles, add confirm deletes to photos and galleries

* tidy

* remove unused

* update bff, update gallery info on add photos

* update lock

* flex wrap camera badges

* fix photo count formatting

.env.example

···
 BFF_PRIVATE_KEY_1=
 BFF_PRIVATE_KEY_2=
 BFF_PRIVATE_KEY_3=
+BFF_JETSTREAM_URL=wss://jetstream1.us-west.bsky.network
+PDS_HOST_URL=https://ansel.grainsocial.network
 USE_CDN=true
 
 # If running local infra

README.md

···
 ```bash
 # .env
 BFF_DATABASE_URL=grain.db             # SQLite db file
+BFF_JETSTREAM_URL=wss://jetstream1.us-west.bsky.network
+PDS_HOST_URL=https://ansel.grainsocial.network
 USE_CDN=true                          # Use bsky cdn
 ```
 

deno.json

···
   "imports": {
     "$lexicon/": "./__generated__/",
     "@atproto/syntax": "npm:@atproto/syntax@^0.4.0",
-    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.38",
+    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.39",
     "@std/http": "jsr:@std/http@^1.0.17",
     "@std/path": "jsr:@std/path@^1.0.9",
     "@tailwindcss/cli": "npm:@tailwindcss/cli@^4.1.4",

deno.lock

···
   "version": "5",
   "specifiers": {
     "jsr:@bigmoves/atproto-oauth-client@0.2": "0.2.0",
-    "jsr:@bigmoves/bff@0.3.0-beta.38": "0.3.0-beta.38",
+    "jsr:@bigmoves/bff@0.3.0-beta.39": "0.3.0-beta.39",
     "jsr:@deno/gfm@0.10": "0.10.0",
     "jsr:@denosaurs/emoji@0.3": "0.3.1",
     "jsr:@luca/esbuild-deno-loader@~0.11.1": "0.11.1",
···
     "jsr:@std/streams@^1.0.10": "1.0.10",
     "jsr:@std/testing@^1.0.11": "1.0.11",
     "npm:@atproto-labs/handle-resolver-node@~0.1.14": "0.1.16",
+    "npm:@atproto-labs/simple-store@~0.1.2": "0.1.2",
     "npm:@atproto/api@~0.15.7": "0.15.15",
     "npm:@atproto/common@~0.4.10": "0.4.11",
     "npm:@atproto/identity@~0.4.7": "0.4.8",
···
     "npm:@atproto/lexicon@0.4.11": "0.4.11",
     "npm:@atproto/lexicon@~0.4.11": "0.4.11",
     "npm:@atproto/oauth-client@~0.3.13": "0.3.22",
+    "npm:@atproto/oauth-types@~0.2.4": "0.2.8",
     "npm:@atproto/syntax@0.4": "0.4.0",
     "npm:@atproto/xrpc-server@*": "0.7.19",
+    "npm:@atproto/xrpc-server@0.7.18": "0.7.18",
     "npm:@tailwindcss/cli@*": "4.1.9",
     "npm:@tailwindcss/cli@^4.0.12": "4.1.9",
     "npm:@tailwindcss/cli@^4.1.3": "4.1.9",
···
       "integrity": "5c3ca124dd52eff51dace83790779ebe48c4b41559b799e16c8750bd415f2124",
       "dependencies": [
         "npm:@atproto-labs/handle-resolver-node",
+        "npm:@atproto-labs/simple-store",
         "npm:@atproto/jwk",
         "npm:@atproto/oauth-client",
+        "npm:@atproto/oauth-types",
         "npm:jose"
       ]
     },
-    "@bigmoves/bff@0.3.0-beta.38": {
-      "integrity": "74b8b77f451a00b16c9a43ce776bdac87753429bf2d15bf6c81b5eda1e2f9e0e",
+    "@bigmoves/bff@0.3.0-beta.39": {
+      "integrity": "6841d6b04aa91f5c79b8530af1d2721c0f1bf5b4038270da528121f3ab57765f",
       "dependencies": [
         "jsr:@bigmoves/atproto-oauth-client",
         "jsr:@std/assert@^1.0.13",
···
         "npm:@atproto/api",
         "npm:@atproto/common",
         "npm:@atproto/identity",
+        "npm:@atproto/lexicon@0.4.11",
         "npm:@atproto/lexicon@~0.4.11",
         "npm:@atproto/oauth-client",
         "npm:@atproto/syntax",
+        "npm:@atproto/xrpc-server@0.7.18",
         "npm:clsx",
         "npm:multiformats@^13.3.2",
         "npm:preact",
···
       "dependencies": [
         "@atproto-labs/fetch",
         "@atproto-labs/pipe",
-        "@atproto-labs/simple-store",
+        "@atproto-labs/simple-store@0.2.0",
         "@atproto-labs/simple-store-memory",
         "@atproto/did",
         "zod"
···
     "@atproto-labs/handle-resolver@0.1.8": {
       "integrity": "sha512-Y0ckccoCGDo/3g4thPkgp9QcORmc+qqEaCBCYCZYtfLIQp4775u22wd+4fyEyJP4DqoReKacninkICgRGfs3dQ==",
       "dependencies": [
-        "@atproto-labs/simple-store",
+        "@atproto-labs/simple-store@0.2.0",
         "@atproto-labs/simple-store-memory",
         "@atproto/did",
         "zod"
···
     "@atproto-labs/simple-store-memory@0.1.3": {
       "integrity": "sha512-jkitT9+AtU+0b28DoN92iURLaCt/q/q4yX8q6V+9LSwYlUTqKoj/5NFKvF7x6EBuG+gpUdlcycbH7e60gjOhRQ==",
       "dependencies": [
-        "@atproto-labs/simple-store",
+        "@atproto-labs/simple-store@0.2.0",
         "lru-cache"
       ]
     },
+    "@atproto-labs/simple-store@0.1.2": {
+      "integrity": "sha512-9vTNvyPPBs44tKVFht16wGlilW8u4wpEtKwLkWbuNEh3h9TTQ8zjVhEoGZh/v73G4Otr9JUOSIq+/5+8OZD2mQ=="
+    },
     "@atproto-labs/simple-store@0.2.0": {
       "integrity": "sha512-0bRbAlI8Ayh03wRwncAMEAyUKtZ+AuTS1jgPrfym1WVOAOiottI/ZmgccqLl6w5MbxVcClNQF7WYGKvGwGoIhA=="
     },
···
         "@atproto-labs/fetch",
         "@atproto-labs/handle-resolver",
         "@atproto-labs/identity-resolver",
-        "@atproto-labs/simple-store",
+        "@atproto-labs/simple-store@0.2.0",
         "@atproto-labs/simple-store-memory",
         "@atproto/did",
         "@atproto/jwk@0.2.0",
···
     },
     "@atproto/syntax@0.4.0": {
       "integrity": "sha512-b9y5ceHS8YKOfP3mdKmwAx5yVj9294UN7FG2XzP6V5aKUdFazEYRnR9m5n5ZQFKa3GNvz7de9guZCJ/sUTcOAA=="
+    },
+    "@atproto/xrpc-server@0.7.18": {
+      "integrity": "sha512-kjlAsI+UNbbm6AK3Y5Hb4BJ7VQHNKiYYu2kX5vhZJZHO8qfO40GPYYb/2TknZV8IG6fDPBQhUpcDRolI86sgag==",
+      "dependencies": [
+        "@atproto/common",
+        "@atproto/crypto",
+        "@atproto/lexicon",
+        "@atproto/xrpc",
+        "cbor-x",
+        "express",
+        "http-errors",
+        "mime-types",
+        "rate-limiter-flexible",
+        "uint8arrays",
+        "ws",
+        "zod"
+      ]
     },
     "@atproto/xrpc-server@0.7.19": {
       "integrity": "sha512-YSCl/tU2NDykgDYslFSOYCr96esUgDwncFiADKL59/fyIFPLoT0qY8Uq/budpxUh0qPzjow4HHgVWESOaOpUmA==",
···
   },
   "workspace": {
     "dependencies": [
-      "jsr:@bigmoves/bff@0.3.0-beta.38",
+      "jsr:@bigmoves/bff@0.3.0-beta.39",
       "jsr:@std/http@^1.0.17",
       "jsr:@std/path@^1.0.9",
       "npm:@atproto/syntax@0.4",

fly.toml

···
   BFF_DATABASE_URL = '/litefs/sqlite.db'
   BFF_PORT = '8081'
   BFF_PUBLIC_URL = 'https://grain.social'
+  BFF_JETSTREAM_URL = 'wss://jetstream1.us-west.bsky.network'
   GOATCOUNTER_URL = 'https://grain.goatcounter.com/count'
   USE_CDN = 'true'
   PDS_HOST_URL = 'https://ansel.grainsocial.network'

src/components/AltTextButton.tsx

···
   return (
     <button
       type="button"
-      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"
+      class="bg-zinc-950/50 dark:bg-zinc-950/50 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"

src/components/AvatarButton.tsx

···
       ? (
         <button
           type="button"
-          class="cursor-pointer"
+          class="cursor-pointer w-fit"
           hx-get={`/dialogs/avatar/${profile.handle}`}
           hx-trigger="click"
           hx-target="body"

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";
+import { Dialog } from "./Dialog.tsx";
 
 export function AvatarDialog({
   profile,
 }: Readonly<{ profile: Un$Typed<ProfileView> }>) {
   return (
-    <Dialog class="z-100">
+    <Dialog>
       <Dialog.X />
       <div
         class="w-[400px] h-[400px] flex flex-col p-4 z-10"

src/components/Breadcrumb.tsx

···
+import { cn } from "@bigmoves/bff/components";
+
 type BreadcrumbItem = {
   label: string;
   href?: string;
 };
 
-export function Breadcrumb({ items }: Readonly<{ items: BreadcrumbItem[] }>) {
+export function Breadcrumb(
+  { class: classProp, items }: Readonly<
+    { class?: string; items: BreadcrumbItem[] }
+  >,
+) {
   return (
-    <nav className="mb-4 text-sm text-zinc-500 dark:text-zinc-300">
+    <nav
+      className={cn("mb-4 text-sm text-zinc-500 dark:text-zinc-300", classProp)}
+    >
       {items.map((item, idx) => (
         <>
           {item.href

src/components/Button.tsx

···
+import { cn } from "@bigmoves/bff/components";
+import { cloneElement, type JSX } from "preact";
+
+export type ButtonProps =
+  & JSX.ButtonHTMLAttributes<HTMLButtonElement>
+  & Readonly<{
+    variant?: "primary" | "secondary" | "ghost" | "destructive" | "tab";
+    asChild?: boolean;
+  }>;
+
+export function Button(props: ButtonProps): JSX.Element {
+  const { variant, class: classProp, asChild, children, ...rest } = props;
+  const className = cn(
+    "grain-btn",
+    variant === "primary" && "grain-btn-primary",
+    variant === "secondary" && "grain-btn-secondary",
+    variant === "ghost" && "grain-btn-ghost",
+    variant === "destructive" && "grain-btn-destructive",
+    variant === "tab" && "grain-btn-tab",
+    classProp,
+  );
+  if (
+    asChild && children && typeof children === "object" && children !== null &&
+    "type" in children
+  ) {
+    return cloneElement(children, {
+      ...rest,
+      ...children.props,
+      class: cn(className, children.props.class),
+    });
+  }
+  return <button class={className} {...rest}>{children}</button>;
+}

src/components/CameraBadges.tsx

···
 ) {
   if (cameras.length === 0) return null;
   return (
-    <div class={cn("flex gap-1", classProp)} id="camera-badges">
+    <div class={cn("flex flex-wrap gap-1", classProp)} id="camera-badges">
       {cameras.sort().map((camera) => (
-        <span class="text-xs font-semibold bg-zinc-100 dark:bg-zinc-800 w-fit px-1">
+        <span class="text-xs font-semibold bg-zinc-100 dark:bg-zinc-800 w-fit px-2 py-1 rounded-full">
           📷 {camera}
         </span>
       ))}

src/components/CreateAccountDialog.tsx

···
 import { OAUTH_ROUTES } from "@bigmoves/bff";
-import { Button, Dialog } from "@bigmoves/bff/components";
 import { PDS_HOST_URL } from "../env.ts";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
 
 export function CreateAccountDialog({}: Readonly<{}>) {
   return (
-    <Dialog id="photo-alt-dialog" class="z-100">
-      <Dialog.Content class="dark:bg-zinc-950 relative">
+    <Dialog id="photo-alt-dialog">
+      <Dialog.Content>
         <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>Choose your handle</Dialog.Title>
         <div className="flex flex-col space-y-4 my-10">

src/components/Dialog.tsx

···
+import { cn } from "@bigmoves/bff/components";
+import type { FunctionalComponent, JSX } from "preact";
+import { Button, ButtonProps } from "./Button.tsx";
+
+type DialogProps = JSX.HTMLAttributes<HTMLDivElement> & { _?: string } & {
+  children: preact.ComponentChildren;
+};
+
+type DialogContentProps = JSX.HTMLAttributes<HTMLDivElement> & {
+  children: preact.ComponentChildren;
+};
+
+type DialogTitleProps = {
+  children: preact.ComponentChildren;
+};
+
+type DialogCloseProps = JSX.HTMLAttributes<HTMLButtonElement> & ButtonProps & {
+  children: preact.ComponentChildren;
+};
+
+type DialogXProps = JSX.HTMLAttributes<HTMLButtonElement>;
+
+const _closeOnClick = "on click trigger closeDialog";
+
+const Dialog: FunctionalComponent<DialogProps> & {
+  Content: FunctionalComponent<DialogContentProps>;
+  Title: FunctionalComponent<DialogTitleProps>;
+  Close: FunctionalComponent<DialogCloseProps>;
+  X: FunctionalComponent<DialogXProps>;
+  _closeOnClick: string;
+} = ({ children, class: classProp, _ = "", ...props }) => {
+  return (
+    <div
+      class={cn(
+        "fixed top-0 bottom-0 right-0 left-0 flex items-center justify-center z-100",
+        classProp,
+      )}
+      {...{
+        _: `on closeDialog
+              remove me
+              remove .tw:pointer-events-none from document.body
+              remove [@data-scroll-locked] from document.body
+            on keyup[key is 'Escape'] from <body/> trigger closeDialog
+            init
+              add .tw:pointer-events-none to document.body
+              add .tw:pointer-events-auto to me
+              add [@data-scroll-locked=true] to document.body
+            ${_}`,
+      }}
+      {...props}
+    >
+      <div
+        class="absolute top-0 left-0 right-0 bottom-0 bg-black/80"
+        {...{
+          _: _closeOnClick,
+        }}
+      />
+      {children}
+    </div>
+  );
+};
+
+const DialogContent: FunctionalComponent<DialogContentProps> = (
+  { children, class: classProp, ...props },
+) => {
+  return (
+    <div
+      class={cn(
+        "w-[400px] bg-white dark:bg-zinc-900 rounded-md flex flex-col p-4 max-h-[calc(100vh-100px)] overflow-y-auto z-20 relative",
+        classProp,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+const DialogTitle: FunctionalComponent<DialogTitleProps> = ({ children }) => {
+  return (
+    <h1 class="text-lg font-semibold text-center w-full mb-2">
+      {children}
+    </h1>
+  );
+};
+
+const DialogX: FunctionalComponent<DialogXProps> = ({
+  class: classProp,
+}) => {
+  return (
+    <button
+      type="button"
+      class={cn(
+        "absolute top-4 right-4 h-4 w-4 cursor-pointer z-30 fill-white",
+        classProp,
+      )}
+      {...{
+        _: _closeOnClick,
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 384 512"
+      >
+        {/* <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->*/}
+        <path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
+      </svg>
+    </button>
+  );
+};
+
+const DialogClose: FunctionalComponent<DialogCloseProps> = (
+  { children, ...props },
+) => {
+  return (
+    <Button
+      {...{
+        _: _closeOnClick,
+      }}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+};
+
+Dialog.Content = DialogContent;
+Dialog.Title = DialogTitle;
+Dialog.Close = DialogClose;
+Dialog.X = DialogX;
+Dialog._closeOnClick = _closeOnClick;
+
+export { Dialog };

src/components/EditGalleryDialog.tsx

···
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
+
+export function EditGalleryDialog({ gallery }: Readonly<{
+  gallery: GalleryView;
+}>) {
+  const rkey = new AtUri(gallery.uri).rkey;
+  return (
+    <Dialog>
+      <Dialog.Content class="gap-4">
+        <Dialog.Title>Edit gallery</Dialog.Title>
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+
+        <ul class="divide-y divide-zinc-200 dark:divide-zinc-800 border-t border-b border-zinc-200 dark:border-zinc-800">
+          <li class="w-full hover:bg-zinc-200 dark:hover:bg-zinc-800">
+            <button
+              type="button"
+              class="flex flex-col justify-start items-start text-left w-full px-2 py-4 cursor-pointer"
+              hx-get={`/dialogs/gallery/${rkey}/edit`}
+              hx-target="#dialog-target"
+              hx-swap="innerHTML"
+            >
+              Edit details
+              <div class="text-sm text-zinc-600 dark:text-zinc-500">
+                Update title, description, etc
+              </div>
+            </button>
+          </li>
+          <li class="w-full hover:bg-zinc-200 dark:hover:bg-zinc-800">
+            <button
+              type="button"
+              class="flex flex-col justify-start items-start text-left w-full px-2 py-4 cursor-pointer"
+              hx-get={`/dialogs/gallery/${rkey}/photos`}
+              hx-target="#dialog-target"
+              hx-swap="innerHTML"
+            >
+              Edit photos
+              <div class="text-sm text-zinc-600 dark:text-zinc-500">
+                Upload photos, add from library, or remove photos
+              </div>
+            </button>
+          </li>
+          <li class="w-full hover:bg-zinc-200 dark:hover:bg-zinc-800">
+            <button
+              type="button"
+              hx-get={`/dialogs/gallery/${rkey}/sort`}
+              hx-target="#dialog-target"
+              hx-swap="innerHTML"
+              class="flex justify-between items-center text-left w-full px-2 py-4 cursor-pointer"
+            >
+              Change sort order
+            </button>
+          </li>
+        </ul>
+        <form
+          id="delete-form"
+          hx-post={`/actions/gallery/delete`}
+          hx-confirm="Are you sure you want to delete this gallery? This action cannot be undone. Photos in the gallery will not be deleted."
+        >
+          <input type="hidden" name="uri" value={gallery?.uri} />
+        </form>
+        <Button
+          variant="destructive"
+          form="delete-form"
+        >
+          Delete gallery
+        </Button>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+export function EditGalleryButton({ gallery }: Readonly<{
+  gallery: GalleryView;
+}>) {
+  const rkey = new AtUri(gallery.uri).rkey;
+  return (
+    <Button
+      type="button"
+      variant="primary"
+      hx-get={`/dialogs/gallery/${rkey}`}
+      hx-trigger="click"
+      hx-target="#dialog-target"
+      hx-swap="innerHTML"
+    >
+      Edit gallery
+    </Button>
+  );
+}

src/components/ExifInfoDialog.tsx

···
-import { Dialog } from "@bigmoves/bff/components";
+import { Dialog } from "./Dialog.tsx";
 
 export function ExifInfoDialog() {
   return (
-    <Dialog class="z-100">
-      <Dialog.Content class="dark:bg-zinc-950 relative">
+    <Dialog class="z-101">
+      <Dialog.Content class="flex flex-col gap-4">
         <Dialog.Title>EXIF Info</Dialog.Title>
         <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <div class="text-sm mt-2">
···
             .
           </p>
         </div>
+        <Dialog.Close variant="secondary">Close</Dialog.Close>
       </Dialog.Content>
     </Dialog>
   );

src/components/ExifOverlayDialog.tsx

···
 import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
-import { Dialog } from "@bigmoves/bff/components";
 import { getOrderedExifData } from "../lib/photo.ts";
+import { Dialog } from "./Dialog.tsx";
 
 export function ExifOverlayDialog({
   photo,
···
   return (
     <Dialog class="z-101">
       <Dialog.Content
-        class="bg-transparent text-zinc-50 relative"
+        class="bg-transparent! text-zinc-50 relative"
         _={Dialog._closeOnClick}
       >
         <Dialog.Title>Camera Settings</Dialog.Title>

src/components/FavoriteButton.tsx

···
 import { Record as Favorite } from "$lexicon/types/social/grain/favorite.ts";
 import { AtUri } from "@atproto/syntax";
 import { WithBffMeta } from "@bigmoves/bff";
-import { Button, cn } from "@bigmoves/bff/components";
+import { cn } from "@bigmoves/bff/components";
+import { Button } from "./Button.tsx";
 
 export function FavoriteButton({
   currentUserDid,

src/components/FollowButton.tsx

···
 import { AtUri } from "@atproto/syntax";
-import { Button, cn } from "@bigmoves/bff/components";
+import { cn } from "@bigmoves/bff/components";
+import { Button } from "./Button.tsx";
 
 export function FollowButton({
   followeeDid,

src/components/GalleryCreateEditDialog.tsx src/components/GalleryDetailsDialog.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";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
+import { Input } from "./Input.tsx";
+import { Label } from "./Label.tsx";
+import { Textarea } from "./Textarea.tsx";
 
-export function GalleryCreateEditDialog({
+export function GalleryDetailsDialog({
   gallery,
 }: Readonly<{ gallery?: GalleryView | null }>) {
   return (
-    <Dialog id="gallery-dialog" class="z-100">
-      <Dialog.Content class="dark:bg-zinc-950 relative">
+    <Dialog id="gallery-dialog">
+      <Dialog.Content>
         <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>
           {gallery ? "Edit gallery" : "Create a new gallery"}
···
               alert('Error: ' + event.detail.xhr.responseText)"
         >
           <div class="mb-4 relative">
-            <label htmlFor="title">Gallery name</label>
+            <Label htmlFor="title">Gallery name</Label>
             <Input
               type="text"
               id="title"
···
             />
           </div>
           <div class="mb-2 relative">
-            <label htmlFor="description">Description</label>
+            <Label htmlFor="description">Description</Label>
             <Textarea
               id="description"
               name="description"
···
             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"
···
           >
             {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"

src/components/GalleryEditPhotosDialog.tsx

···
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { $Typed } from "$lexicon/util.ts";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
+import { LibaryPhotoSelectDialogButton } from "./LibraryPhotoSelectDialog.tsx";
+import { PhotoSelectButton } from "./PhotoSelectButton.tsx";
+
+export function GalleryEditPhotosDialog({
+  galleryUri,
+  photos,
+}: Readonly<{
+  galleryUri: string;
+  photos: $Typed<PhotoView>[];
+}>) {
+  return (
+    <Dialog id="photo-select-dialog">
+      <Dialog.Content class="flex flex-col gap-4">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <Dialog.Title>Edit photos</Dialog.Title>
+        <div class="flex flex-col gap-4">
+          <form
+            class="w-full flex flex-col gap-4"
+            hx-encoding="multipart/form-data"
+            _="on change from #file-input call Grain.galleryPhotosDialog.uploadPhotos(me)"
+          >
+            <input hidden name="page" value="gallery" />
+            <input hidden name="galleryUri" value={galleryUri} />
+            <Button variant="primary" class="w-full" asChild>
+              <label>
+                <i class="fa-solid fa-cloud-arrow-up mr-2" />
+                Upload photos
+                <input
+                  id="file-input"
+                  class="hidden"
+                  type="file"
+                  name="files"
+                  multiple
+                  accept="image/*"
+                />
+              </label>
+            </Button>
+
+            <label class="block gap-2">
+              <input
+                id="parse-exif"
+                type="checkbox"
+                name="parseExif"
+                class="mr-2 accent-sky-600"
+                checked
+              />
+              Include image metadata (EXIF)
+              <button
+                type="button"
+                hx-get="/dialogs/exif-info"
+                hx-target="#layout"
+                hx-swap="afterbegin"
+                class="cursor-pointer"
+              >
+                <i class="fa fa-info-circle ml-1" />
+              </button>
+            </label>
+          </form>
+          <LibaryPhotoSelectDialogButton galleryUri={galleryUri} />
+        </div>
+        <div class="flex-1 overflow-y-auto">
+          <div id="image-preview" class="grid grid-cols-3 gap-2">
+            {photos.length
+              ? (
+                photos.map((photo) => (
+                  <PhotoSelectButton
+                    key={photo.cid}
+                    galleryUri={galleryUri}
+                    photo={photo}
+                  />
+                ))
+              )
+              : null}
+          </div>
+        </div>
+        <Dialog.Close variant="secondary" class="w-full">Close</Dialog.Close>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

src/components/GalleryLayout.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 { Button } from "@bigmoves/bff/components";
 import { ComponentChildren } from "preact";
 import { photoDialogLink } from "../utils.ts";
+import { Button } from "./Button.tsx";
 import { JustifiedSvg } from "./JustifiedSvg.tsx";
 import { MasonrySvg } from "./MasonrySvg.tsx";
 

src/components/GalleryPage.tsx

···
 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 { ModerationDecsion } from "../lib/moderation.ts";
+import { EditGalleryButton } from "./EditGalleryDialog.tsx";
 import { FavoriteButton } from "./FavoriteButton.tsx";
 import { GalleryInfo } from "./GalleryInfo.tsx";
 import { GalleryLayout } from "./GalleryLayout.tsx";
···
   const galleryItems = gallery.items?.filter(isPhotoView) ?? [];
   return (
     <div class="px-4" id="gallery-page">
+      <div id="dialog-target" />
       <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4 mb-2">
         <GalleryInfo gallery={gallery} />
         {isLoggedIn && isCreator
           ? (
             <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row sm:flex-wrap sm:justify-end">
-              <Button
-                variant="primary"
-                class="self-start w-full sm:w-fit whitespace-nowrap"
-                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 whitespace-nowrap"
-              >
-                Add photos
-              </Button>
-              <Button
-                variant="primary"
-                class="self-start w-full sm:w-fit whitespace-nowrap"
-                hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}/sort`}
-                hx-target="#layout"
-                hx-swap="afterbegin"
-              >
-                Sort order
-              </Button>
+              <EditGalleryButton gallery={gallery} />
               <ShareGalleryButton gallery={gallery} />
               <FavoriteButton
                 currentUserDid={currentUserDid}
···
           )
           : null}
       </div>
+      {isLoggedIn && isCreator && gallery.items?.length === 0
+        ? (
+          <div
+            hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}/photos`}
+            hx-trigger="load"
+            hx-target="#dialog-target"
+            hx-swap="innerHTML"
+          />
+        )
+        : null}
       {
         <ModerationWrapper moderationDecision={modDecision} class="mb-2">
           <GalleryLayout

src/components/GalleryPreviewLink.tsx

···
   gallery,
   size = "default",
 }: Readonly<{ gallery: Un$Typed<GalleryView>; size?: "small" | "default" }>) {
-  const gap = size === "small" ? "gap-1" : "gap-2";
+  const gap = size === "small" ? "gap-1" : "gap-1";
   return (
     <a
       href={galleryLink(

src/components/GallerySelectDialog.tsx

···
+import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
+import { Input } from "./Input.tsx";
+
+export function GallerySelectDialog(
+  { photoUri, userDid, galleries }: Readonly<
+    {
+      photoUri?: string;
+      userDid: string;
+      galleries: GalleryView[];
+    }
+  >,
+) {
+  return (
+    <Dialog id="gallery-select-dialog">
+      <Dialog.Content class="min-h-[calc(100vh-100px)] overflow-hidden flex flex-col gap-4">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <Dialog.Title>
+          {photoUri ? "Add to gallery" : "Select gallery"}
+        </Dialog.Title>
+
+        <form>
+          <Input
+            type="text"
+            name="q"
+            placeholder="Enter gallery name or select from the list"
+            hx-get={`/dialogs/gallery/${userDid}/select`}
+            hx-target="#search-results"
+            hx-trigger="input changed delay:500ms, keyup[key=='Enter']"
+            hx-swap="innerHTML"
+            autoFocus
+          />
+        </form>
+
+        <div id="search-results" class="flex-1 overflow-y-auto">
+          <GallerySelectDialogSearchResults
+            photoUri={photoUri}
+            galleries={galleries}
+          />
+        </div>
+        <Dialog.Close variant="secondary">
+          Close
+        </Dialog.Close>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+export function GallerySelectDialogSearchResults(
+  { photoUri, galleries }: {
+    photoUri?: string;
+    galleries: GalleryView[];
+  },
+) {
+  return (
+    galleries.length > 0
+      ? (
+        <ul class="divide-zinc-200 dark:divide-zinc-800 divide-y">
+          {galleries.map((gallery) => (
+            <li
+              key={gallery.cid}
+              class="w-full hover:bg-zinc-200 dark:hover:bg-zinc-800"
+            >
+              {photoUri
+                ? (
+                  <button
+                    type="button"
+                    hx-put={addToGalleryActionLink(photoUri, gallery.uri)}
+                    hx-swap="none"
+                    class="block text-left w-full px-2 py-4"
+                  >
+                    {(gallery.record as Gallery).title}
+                    <div class="text-sm text-zinc-600 dark:text-zinc-500">
+                      {(gallery.record as Gallery).description}
+                    </div>
+                  </button>
+                )
+                : (
+                  <a
+                    href={uploadPageLink(gallery.uri)}
+                    class="block w-full px-2 py-4"
+                  >
+                    {(gallery.record as Gallery).title}
+                    <div class="text-sm text-zinc-600 dark:text-zinc-500">
+                      {(gallery.record as Gallery).description}
+                    </div>
+                  </a>
+                )}
+            </li>
+          ))}
+        </ul>
+      )
+      : <p>No galleries found.</p>
+  );
+}
+
+function addToGalleryActionLink(photoUri: string, galleryUri: string) {
+  const photoRKey = new AtUri(photoUri).rkey;
+  const galleryRkey = new AtUri(galleryUri).rkey;
+  return `/actions/gallery/${galleryRkey}/add-photo/${photoRKey}?page=upload`;
+}
+
+function uploadPageLink(galleryUri: string) {
+  const rkey = new AtUri(galleryUri).rkey;
+  return `/upload?gallery=${rkey}`;
+}
+
+export function GallerySelectDialogButton(
+  { userDid }: Readonly<{ userDid: string }>,
+) {
+  return (
+    <Button
+      type="button"
+      variant="secondary"
+      class="w-full sm:w-fit"
+      hx-get={`/dialogs/gallery/${userDid}/select`}
+      hx-trigger="click"
+      hx-target="#layout"
+      hx-swap="afterbegin"
+      _="on click halt"
+    >
+      <i class="fa fa-filter mr-2" />
+      Filter by gallery
+    </Button>
+  );
+}

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";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
 
 export function GallerySortDialog(
   { gallery }: Readonly<{ gallery: GalleryView }>,
 ) {
   return (
-    <Dialog class="z-100" id="gallery-sort-dialog">
-      <Dialog.Content class="dark:bg-zinc-950 relative">
+    <Dialog id="gallery-sort-dialog">
+      <Dialog.Content>
         <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>

src/components/Input.tsx

···
+import { cn } from "@bigmoves/bff/components";
+import type { JSX } from "preact";
+
+export type InputProps = JSX.InputHTMLAttributes<HTMLInputElement>;
+
+export function Input(props: InputProps): JSX.Element {
+  const { class: classProp, ...rest } = props;
+  const className = cn(
+    "grain-input",
+    classProp,
+  );
+  return <input class={className} {...rest} />;
+}

src/components/Label.tsx

···
+import { cn } from "@bigmoves/bff/components";
+import type { JSX } from "preact";
+
+export type LabelProps = JSX.LabelHTMLAttributes<HTMLLabelElement>;
+
+export function Label(props: LabelProps): JSX.Element {
+  const { class: classProp, ...rest } = props;
+  const className = cn(
+    "grain-label",
+    classProp,
+  );
+  return <label class={className} {...rest} />;
+}

src/components/LabelDefinitionDialog.tsx

···
 import { LabelValueDefinition } from "$lexicon/types/com/atproto/label/defs.ts";
-import { Dialog } from "@bigmoves/bff/components";
 import { profileLink } from "../utils.ts";
+import { Dialog } from "./Dialog.tsx";
 
 export function LabelDefinitionDialog({
   labelValueDefinition,
···
     (locale) => locale.lang === "en",
   );
   return (
-    <Dialog id="mod-decision-dialog" class="z-100">
-      <Dialog.Content class="dark:bg-zinc-950 relative gap-2">
+    <Dialog id="mod-decision-dialog">
+      <Dialog.Content class="gap-2">
         <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>{enLocale?.name}</Dialog.Title>
         <p>{enLocale?.description}</p>

src/components/Layout.tsx

···
 import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
 import { Un$Typed } from "$lexicon/util.ts";
-import { Button, cn } from "@bigmoves/bff/components";
+import { cn } from "@bigmoves/bff/components";
 import type { FunctionalComponent, JSX } from "preact";
 import { ActorAvatar } from "./ActorAvatar.tsx";
+import { Button } from "./Button.tsx";
 
 type LayoutProps = JSX.HTMLAttributes<HTMLDivElement> & {
   children: preact.ComponentChildren;
···
         <div class="flex space-x-2">
           {profile
             ? (
-              <div class="flex items-center ts:space-x-1 sm:space-x-2">
+              <div class="flex items-center space-x-1 sm:space-x-2">
                 <form hx-post="/logout" hx-swap="none" class="inline">
                   <Button type="submit" variant="secondary">Sign out</Button>
                 </form>
                 <Button
                   asChild
-                  variant="secondary"
-                  class="relative pl-2"
+                  variant="ghost"
                 >
                   <a href="/explore">
                     <i class="fas fa-search text-zinc-950 dark:text-zinc-50" />
···
                 </Button>
                 <Button
                   asChild
-                  variant="secondary"
-                  class="relative pl-2"
+                  variant="ghost"
+                  class="relative"
                 >
                   <a href="/notifications">
                     <i class="fas fa-bell text-zinc-950 dark:text-zinc-50" />
···
               </div>
             )
             : (
-              <div class="flex items-center space-x-4">
+              <div class="flex items-center space-x-2">
                 <Button
                   variant="secondary"
                   hx-get={`/dialogs/create-account`}
···
                 >
                   Create account
                 </Button>
-                <Button variant="secondary" asChild>
+                <Button variant="primary" asChild>
                   <a href="/login">
                     Sign in
                   </a>

src/components/LibraryPhotoSelectDialog.tsx

···
+import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
+import { $Typed } from "$lexicon/util.ts";
+import { AtUri } from "@atproto/syntax";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
+
+export function LibraryPhotoSelectDialog({
+  galleryUri,
+  photos,
+}: Readonly<{
+  galleryUri: string;
+  photos: $Typed<PhotoView>[];
+}>) {
+  const rkey = new AtUri(galleryUri).rkey;
+  return (
+    <Dialog id="photo-select-dialog" class="z-101">
+      <Dialog.Content class="flex flex-col gap-4">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <Dialog.Title>My library</Dialog.Title>
+
+        <form
+          id="photo-select-form"
+          hx-put={`/actions/gallery/${rkey}/add-photos`}
+          hx-target="#dialog-target"
+          hx-swap="innerHTML"
+          class="flex-1 overflow-y-auto"
+        >
+          {photos.length
+            ? (
+              <div class="grid grid-cols-3 gap-2">
+                {photos.map((photo) => (
+                  <PhotoItem
+                    key={photo.cid}
+                    photo={photo}
+                  />
+                ))}
+              </div>
+            )
+            : (
+              <div class="flex justify-center items-center my-30 h-full">
+                <p>No photos yet.</p>
+              </div>
+            )}
+        </form>
+
+        <div
+          id="photo-select-overlay"
+          class="w-full bg-white dark:bg-zinc-900 flex justify-between items-center z-102"
+          _="on load set my.count to 0"
+        >
+          <span id="selected-count">0 selected</span>
+          <Button
+            type="submit"
+            form="photo-select-form"
+            variant="primary"
+          >
+            Add to gallery
+          </Button>
+        </div>
+
+        <Dialog.Close variant="secondary" class="w-full">Close</Dialog.Close>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+export function LibaryPhotoSelectDialogButton({ galleryUri }: Readonly<{
+  galleryUri: string;
+}>) {
+  const rkey = new AtUri(galleryUri).rkey;
+  return (
+    <Button
+      type="button"
+      variant="secondary"
+      hx-get={`/dialogs/gallery/${rkey}/library`}
+      hx-trigger="click"
+      hx-target="#dialog-target"
+      hx-swap="innerHTML"
+    >
+      <i class="fa-solid fa-plus mr-2" />
+      Add from library
+    </Button>
+  );
+}
+
+export function PhotoItem({
+  photo,
+}: Readonly<{
+  photo: PhotoView;
+}>) {
+  return (
+    <button
+      type="button"
+      class="group relative aspect-square cursor-pointer"
+      _="
+    on click
+      set checkbox to me.querySelector('input[type=checkbox]')
+      set checkbox.checked to not checkbox.checked
+      trigger change on checkbox
+  "
+    >
+      <input
+        type="checkbox"
+        name="photoUri"
+        value={photo.uri}
+        class="peer absolute top-2 left-2 z-30 w-5 h-5 accent-sky-600"
+        _="
+      on change
+        set checkedCount to my.closest('form') or document
+        then set checkedInputs to checkedCount.querySelectorAll('input[type=checkbox]:checked')
+        then set count to checkedInputs.length
+        then set #selected-count's innerText to `${count} selected`"
+      />
+
+      <img
+        src={photo.fullsize}
+        alt={photo.alt}
+        loading="lazy"
+        class="w-full h-full object-cover transition-opacity duration-200 peer-checked:opacity-50"
+      />
+    </button>
+  );
+}

src/components/Login.tsx

···
+import { cn } from "@bigmoves/bff/components";
+import type { JSX } from "preact";
+import { Button } from "./Button.tsx";
+import { Input } from "./Input.tsx";
+
+export type LoginProps =
+  & JSX.HTMLAttributes<HTMLFormElement>
+  & Readonly<{
+    inputPlaceholder?: string;
+    submitText?: string;
+    infoText?: string;
+    error?: string;
+    errorClass?: string;
+    infoClass?: string;
+  }>;
+
+export function Login(
+  {
+    inputPlaceholder = "Handle (e.g., user.bsky.social)",
+    submitText = "Login with Bluesky",
+    infoText = "",
+    error,
+    errorClass,
+    infoClass,
+    ...rest
+  }: LoginProps,
+): JSX.Element {
+  return (
+    <form
+      id="login-form"
+      hx-post="/oauth/login"
+      hx-target="#login-form"
+      hx-swap="outerHTML"
+      {...rest}
+      class={cn(
+        "tw:mx-4 tw:sm:mx-0 tw:w-full tw:sm:max-w-[300px] tw:space-y-2",
+        rest.class,
+      )}
+    >
+      <div>
+        <label htmlFor="handle" class="tw:sr-only">
+          Handle
+        </label>
+        <Input
+          id="handle"
+          class="bg-white text-zinc-900"
+          placeholder={inputPlaceholder}
+          name="handle"
+        />
+      </div>
+      <Button
+        variant="primary"
+        id="submit"
+        type="submit"
+        class="tw:w-full"
+      >
+        {submitText}
+      </Button>
+      {infoText && (
+        <div class={cn("tw:text-sm tw:text", infoClass)}>
+          {infoText}
+        </div>
+      )}
+      <div className="tw:h-4">
+        {error
+          ? (
+            <div className={cn("tw:text-sm tw:font-mono", errorClass)}>
+              {error}
+            </div>
+          )
+          : null}
+      </div>
+    </form>
+  );
+}

src/components/LoginPage.tsx

···
-import { Login } from "@bigmoves/bff/components";
 import { profileLink } from "../utils.ts";
+import { Login } from "./Login.tsx";
 
 export function LoginPage({ error }: Readonly<{ error?: string }>) {
   return (

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";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
+import { Label } from "./Label.tsx";
+import { Textarea } from "./Textarea.tsx";
 
 export function PhotoAltDialog({
   photo,
···
   photo: PhotoView;
 }>) {
   return (
-    <Dialog id="photo-alt-dialog" class="z-100">
-      <Dialog.Content class="dark:bg-zinc-950 relative">
+    <Dialog id="photo-alt-dialog">
+      <Dialog.Content>
         <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>Add alt text</Dialog.Title>
         <div class="aspect-square relative">
···
           _="on htmx:afterOnLoad trigger closeDialog"
         >
           <div class="my-2">
-            <label htmlFor="alt">Descriptive alt text</label>
+            <Label htmlFor="alt">Descriptive alt text</Label>
             <Textarea
               id="alt"
               name="alt"
···
             <Button type="submit" variant="primary" class="w-full">
               Save
             </Button>
-            <Dialog.Close class="w-full">Cancel</Dialog.Close>
+            <Dialog.Close variant="secondary" class="w-full">
+              Close
+            </Dialog.Close>
           </div>
         </form>
       </Dialog.Content>

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 { AtUri } from "@atproto/syntax";
-import { cn, Dialog } from "@bigmoves/bff/components";
+import { cn } from "@bigmoves/bff/components";
 import { photoDialogLink } from "../utils.ts";
+import { Dialog } from "./Dialog.tsx";
 
 export function PhotoDialog({
   gallery,
···
   prevImage?: PhotoView;
 }>) {
   return (
-    <Dialog id="photo-dialog" class="bg-zinc-950 z-100">
+    <Dialog id="photo-dialog" class="bg-zinc-950">
       <Dialog.X />
       {nextImage
         ? (

src/components/PhotoExifButton.tsx

···
 export function PhotoExifButton({ photoUri }: Readonly<{ photoUri: string }>) {
   return (
     <div
-      class="bg-zinc-950 dark:bg-zinc-950 py-[1px] px-[3px] absolute bottom-2 left-2 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10"
+      class="bg-zinc-950/50 dark:bg-zinc-950/50 py-[1px] px-[3px] absolute bottom-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}/exif`}
       hx-trigger="click"
       hx-target="#layout"

src/components/PhotoExifDialog.tsx

···
 import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
-import { Dialog } from "@bigmoves/bff/components";
 import { getOrderedExifData } from "../lib/photo.ts";
+import { Dialog } from "./Dialog.tsx";
 
 export function PhotoExifDialog({
   photo,
···
   photo: PhotoView;
 }>) {
   return (
-    <Dialog id="photo-alt-dialog" class="z-100">
-      <Dialog.Content class="dark:bg-zinc-950 relative">
+    <Dialog id="photo-alt-dialog">
+      <Dialog.Content>
         <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>Camera Settings</Dialog.Title>
         <div class="aspect-square relative">
···
             ))}
           </div>
         )}
+        <Dialog.Close variant="secondary" class="w-full mt-4">
+          Close
+        </Dialog.Close>
       </Dialog.Content>
     </Dialog>
   );

src/components/PhotoPreview.tsx

···
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
 import { Un$Typed } from "$lexicon/util.ts";
 import { AtUri } from "@atproto/syntax";
 import { AltTextButton } from "./AltTextButton.tsx";
 import { PhotoExifButton } from "./PhotoExifButton.tsx";
+import { RemovePhotoDialogButton } from "./RemovePhotoDialog.tsx";
 
 export function PhotoPreview({
   photo,
+  selectedGallery,
 }: Readonly<{
   photo: Un$Typed<PhotoView>;
+  selectedGallery?: GalleryView;
 }>) {
-  const rkey = new AtUri(photo.uri).rkey;
+  const atUri = new AtUri(photo.uri);
+  const did = atUri.hostname;
+  const rkey = atUri.rkey;
   return (
     <div
       class="relative aspect-square bg-zinc-200 dark:bg-zinc-900"
-      id={rkey}
+      id={`photo-${rkey}`}
     >
       {photo.uri ? <AltTextButton photoUri={photo.uri} /> : null}
       {photo.exif ? <PhotoExifButton photoUri={photo.uri} /> : null}
       {photo.uri
         ? (
+          <RemovePhotoDialogButton
+            selectedGallery={selectedGallery}
+            photoUri={photo.uri}
+          />
+        )
+        : null}
+      {photo.uri
+        ? (
           <button
             type="button"
-            id={`delete-photo-${rkey}`}
-            hx-delete={`/actions/photo/${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"
+            hx-get={`/dialogs/gallery/${did}/select?photoUri=${photo.uri}`}
+            hx-trigger="click"
+            hx-target="#layout"
+            hx-swap="afterbegin"
+            class="bg-zinc-950/50 z-10 absolute bottom-2 right-2 cursor-pointer size-4 flex items-center justify-center"
           >
-            <i class="fas fa-close text-white"></i>
+            <i class="fas fa-plus text-white"></i>
           </button>
         )
         : null}

src/components/PhotoSelectButton.tsx

···
 
 export function PhotoSelectButton({
   galleryUri,
-  itemUris,
   photo,
 }: Readonly<{
   galleryUri: string;
-  itemUris: string[];
   photo: PhotoView;
 }>) {
+  const galleryRkey = new AtUri(galleryUri).rkey;
+  const photoRkey = new AtUri(photo.uri).rkey;
   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"
+      hx-put={`/actions/gallery/${galleryRkey}/remove-photo/${photoRkey}?selectedGallery=${
+        galleryUri ?? ""
+      }`}
+      hx-swap="none"
+      hx-confirm="Are you sure you want to remove this photo from the gallery?"
       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`}
+      class="group cursor-pointer aspect-square relative"
+      _={`on htmx:afterOnLoad remove me`}
     >
-      <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 class="absolute top-2 right-2 z-30 size-4 bg-zinc-950/50 flex items-center justify-center">
+        <i class="fa-close fa-solid text-white z-10" />
       </div>
       <img
         src={photo.fullsize}
         alt={photo.alt}
-        class="absolute inset-0 w-full h-full object-contain"
+        class="w-full h-full object-cover"
+        loading="lazy"
       />
     </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-100">
-      <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 { AvatarInput } from "./AvatarInput.tsx";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
+import { Input } from "./Input.tsx";
+import { Label } from "./Label.tsx";
+import { Textarea } from "./Textarea.tsx";
 
 export function ProfileDialog({
   profile,
···
   profile: ProfileView;
 }>) {
   return (
-    <Dialog class="z-100">
-      <Dialog.Content class="dark:bg-zinc-950 relative">
+    <Dialog>
+      <Dialog.Content>
         <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>Edit my profile</Dialog.Title>
         <form
           id="profile-form"
           hx-encoding="multipart/form-data"
+          autocomplete="off"
           _="on submit
               halt the event
               put 'Updating...' into #submit-button.innerText
···
         >
           <AvatarInput profile={profile} />
           <div class="mb-4 relative">
-            <label htmlFor="displayName">Display Name</label>
+            <Label htmlFor="displayName">Display Name</Label>
             <Input
               type="text"
               id="displayName"
               name="displayName"
               placeholder="e.g. Ansel Lastname"
-              class="dark:bg-zinc-800 dark:text-white"
               value={profile.displayName}
               autoFocus
+              autocomplete="off"
             />
           </div>
           <div class="mb-4 relative">
-            <label htmlFor="description">Description</label>
+            <Label htmlFor="description">Description</Label>
             <Textarea
               id="description"
               name="description"
···
               {profile.description}
             </Textarea>
           </div>
-          <Button
-            type="submit"
-            id="submit-button"
-            variant="primary"
-            class="w-full"
-          >
-            Update
-          </Button>
-          <Button
-            variant="secondary"
-            type="button"
-            class="w-full"
-            _={Dialog._closeOnClick}
-          >
-            Cancel
-          </Button>
+          <div class="flex flex-col gap-2">
+            <Button
+              type="submit"
+              id="submit-button"
+              variant="primary"
+              class="w-full"
+            >
+              Update
+            </Button>
+            <Button
+              variant="secondary"
+              type="button"
+              class="w-full"
+              _={Dialog._closeOnClick}
+            >
+              Cancel
+            </Button>
+          </div>
         </form>
       </Dialog.Content>
     </Dialog>

src/components/ProfilePage.tsx

···
 import { Un$Typed } from "$lexicon/util.ts";
 import { AtUri } from "@atproto/syntax";
 import { LabelerPolicies } from "@bigmoves/bff";
-import { Button, cn } from "@bigmoves/bff/components";
 import { getGalleryCameras } from "../lib/gallery.ts";
 import {
   atprotoLabelValueDefinitions,
···
 } from "../utils.ts";
 import { ActorAvatar } from "./ActorAvatar.tsx";
 import { AvatarButton } from "./AvatarButton.tsx";
+import { Button } from "./Button.tsx";
 import { CameraBadges } from "./CameraBadges.tsx";
 import { FollowButton } from "./FollowButton.tsx";
 import { LabelDefinitionButton } from "./LabelDefinitionButton.tsx";
···
           ? (
             <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row sm:flex-wrap sm:justify-end">
               <Button
-                variant="primary"
+                variant="secondary"
                 class="w-full sm:w-fit whitespace-nowrap"
                 asChild
               >
                 <a href="/upload">
                   <i class="fa-solid fa-upload mr-2" />
-                  Upload
+                  Photo library
                 </a>
               </Button>
               <Button
-                variant="primary"
+                variant="secondary"
                 type="button"
                 hx-get="/dialogs/profile"
                 hx-target="#layout"
                 hx-swap="afterbegin"
                 class="w-full sm:w-fit whitespace-nowrap"
               >
-                Edit Profile
+                Edit profile
               </Button>
               <Button
                 variant="primary"
···
                 hx-target="#layout"
                 hx-swap="afterbegin"
               >
-                Create Gallery
+                Create gallery
               </Button>
             </div>
           )
···
       >
         {isLabeler
           ? (
-            <button
-              type="button"
+            <Button
+              variant="tab"
               name="tab"
+              class="flex-1"
               value="favs"
               hx-get={profileLink(profile.handle)}
               hx-target="#profile-page"
               hx-swap="outerHTML"
-              class={cn(
-                "flex-1 min-w-[120px] py-2 px-4 cursor-pointer font-semibold",
-                selectedTab === "labels" && "bg-zinc-100 dark:bg-zinc-800",
-              )}
               role="tab"
               aria-selected={selectedTab === "labels"}
               aria-controls="tab-content"
             >
               Labels
-            </button>
+            </Button>
           )
           : (
-            <button
-              type="button"
+            <Button
+              variant="tab"
               name="tab"
+              class="flex-1"
               value="galleries"
               hx-get={profileLink(profile.handle)}
               hx-target="#profile-page"
               hx-swap="outerHTML"
-              class={cn(
-                "flex-1 min-w-[120px] py-2 px-4 cursor-pointer font-semibold",
-                selectedTab === "galleries" && "bg-zinc-100 dark:bg-zinc-800",
-              )}
               role="tab"
               aria-selected={selectedTab === "galleries"}
               aria-controls="tab-content"
             >
               Galleries
-            </button>
+            </Button>
           )}
 
         {isCreator && (
-          <button
-            type="button"
+          <Button
+            variant="tab"
             name="tab"
+            class="flex-1"
             value="favs"
             hx-get={profileLink(profile.handle)}
             hx-target="#profile-page"
             hx-swap="outerHTML"
-            class={cn(
-              "flex-1 min-w-[120px] py-2 px-4 cursor-pointer font-semibold",
-              selectedTab === "favs" && "bg-zinc-100 dark:bg-zinc-800",
-            )}
             role="tab"
             aria-selected={selectedTab === "favs"}
             aria-controls="tab-content"
           >
             Favs
-          </button>
+          </Button>
         )}
       </div>
       {selectedTab === "labels" && labelerDefinitions
···
         : null}
       {selectedTab === "galleries"
         ? (
-          <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-4">
+          <div class="grid grid-cols-3 gap-1 mb-4">
             {galleries?.length
               ? (
                 galleries.map((gallery) => (
···
         : null}
       {selectedTab === "favs"
         ? (
-          <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-4">
+          <div class="grid grid-cols-3 gap-1 mb-4">
             {galleryFavs?.length
               ? (
                 galleryFavs.map((gallery) => (
···
         gallery.creator.handle,
         new AtUri(gallery.uri).rkey,
       )}
-      class="cursor-pointer relative aspect-square"
+      class="cursor-pointer relative aspect-3/4"
     >
       {modDecision && !modDecision.isMe
         ? (
···
           />
         )
         : <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 flex items-center gap-2">
+      <div class="absolute sm:flex hidden bottom-0 left-0 bg-black/80 text-white p-2 items-center gap-2">
         {(gallery.record as Gallery).title}
       </div>
     </a>
···
         gallery.creator.handle,
         new AtUri(gallery.uri).rkey,
       )}
-      class="cursor-pointer relative aspect-square"
+      class="cursor-pointer relative aspect-3/4"
     >
       {gallery.items?.length
         ? (
···
           />
         )
         : <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 flex items-center gap-2">
+      <div class="absolute bottom-0 left-0 bg-black/80 text-white p-2 hidden sm:flex items-center gap-2">
         <ActorAvatar profile={gallery.creator} size={20} />{" "}
         {(gallery.record as Gallery).title}
       </div>

src/components/RemovePhotoDialog.tsx

···
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
+
+export function RemovePhotoDialog(
+  { photoUri, galleries, selectedGallery }: Readonly<
+    {
+      photoUri: string;
+      galleries: GalleryView[];
+      selectedGallery?: GalleryView;
+    }
+  >,
+) {
+  const rkey = new AtUri(photoUri).rkey;
+  return (
+    <Dialog>
+      <Dialog.Content class="gap-4">
+        <Dialog.Title>Remove photo</Dialog.Title>
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+
+        {galleries.length > 0
+          ? (
+            <div id="photo-galleries" class="flex flex-col gap-2">
+              <h2>
+                This photo appears in the following galleries. Select to remove.
+              </h2>
+              <ul class="divide-y divide-zinc-200 dark:divide-zinc-800 border-t border-b border-zinc-200 dark:border-zinc-800">
+                {galleries.map((gallery) => (
+                  <li
+                    key={gallery.uri}
+                    class="w-full hover:bg-zinc-200 dark:hover:bg-zinc-800"
+                  >
+                    <button
+                      type="button"
+                      hx-put={`/actions/gallery/${
+                        new AtUri(gallery.uri).rkey
+                      }/remove-photo/${rkey}?selectedGallery=${
+                        selectedGallery?.uri ?? ""
+                      }`}
+                      class="flex justify-between items-center text-left w-full px-2 py-4"
+                      _="on htmx:afterRequest
+                          if me.closest('ul').children.length is 1
+                            then remove #photo-galleries
+                            else remove me.closest('li')"
+                    >
+                      {gallery.record.title || "Untitled Gallery"}
+                      <i class="fa fa-close" />
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )
+          : null}
+
+        <Button
+          variant="destructive"
+          hx-delete={`/actions/photo/${rkey}?selectedGallery=${
+            selectedGallery?.uri ?? ""
+          }`}
+          hx-swap="none"
+          hx-confirm="Are you sure you want to delete this photo? This action cannot be undone."
+        >
+          Delete photo
+        </Button>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+export function RemovePhotoDialogButton(
+  { selectedGallery, photoUri }: Readonly<
+    { selectedGallery?: GalleryView; photoUri: string }
+  >,
+) {
+  const rkey = new AtUri(photoUri).rkey;
+  return (
+    <button
+      type="button"
+      class="bg-zinc-950/50 z-10 absolute top-2 right-2 cursor-pointer size-4 flex items-center justify-center"
+      hx-get={`/dialogs/photo/${rkey}/remove?selectedGallery=${
+        selectedGallery?.uri ?? ""
+      }`}
+      hx-trigger="click"
+      hx-target="#layout"
+      hx-swap="afterbegin"
+      _="on click halt"
+    >
+      <i class="fas fa-close text-white"></i>
+    </button>
+  );
+}

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";
+import { Button } from "./Button.tsx";
 
 export function ShareGalleryButton(
   { gallery }: Readonly<{ gallery: GalleryView }>,

src/components/Textarea.tsx

···
+import { cn } from "@bigmoves/bff/components";
+import type { JSX } from "preact";
+
+export type TextareaProps = JSX.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export function Textarea(props: TextareaProps): JSX.Element {
+  const { class: classProp, ...rest } = props;
+  const className = cn(
+    "grain-input",
+    classProp,
+  );
+  return <textarea class={className} {...rest} />;
+}

src/components/Timeline.tsx

···
-import { cn } from "@bigmoves/bff/components";
 import { type TimelineItem } from "../lib/timeline.ts";
+import { Button } from "./Button.tsx";
 import { Header } from "./Header.tsx";
 import { TimelineItem as Item } from "./TimelineItem.tsx";
 
···
           <>
             <div class="my-4 pb-4 border-b border-zinc-200 dark:border-zinc-800">
               <div class="flex sm:w-fit">
-                <button
-                  type="button"
+                <Button
+                  variant="tab"
+                  class="flex-1"
                   hx-get={`/?graph=${selectedGraph}`}
                   hx-target="#timeline-page"
                   hx-swap="outerHTML"
-                  class={cn(
-                    "flex-1 py-2 sm:min-w-[120px] px-4 cursor-pointer font-semibold",
-                    !selectedTab &&
-                      "bg-zinc-100 dark:bg-zinc-800 font-semibold",
-                  )}
                   role="tab"
                   aria-selected={!selectedTab}
                   aria-controls="tab-content"
                 >
                   Timeline
-                </button>
-                <button
-                  type="button"
+                </Button>
+                <Button
+                  variant="tab"
+                  class="flex-1"
                   hx-get={`/?tab=following&graph=${selectedGraph}`}
                   hx-target="#timeline-page"
                   hx-swap="outerHTML"
-                  class={cn(
-                    "flex-1 py-2 sm:min-w-[120px] px-4 cursor-pointer font-semibold",
-                    selectedTab === "following" &&
-                      "bg-zinc-100 dark:bg-zinc-800 font-semibold",
-                  )}
                   role="tab"
                   aria-selected={selectedTab === "following"}
                   aria-controls="tab-content"
                   _="on click js document.title = 'Following — Grain'; end"
                 >
                   Following
-                </button>
+                </Button>
               </div>
             </div>
             <div id="tab-content" role="tabpanel">

src/components/UploadPage.tsx

···
+import { Record as Gallery } from "$lexicon/types/social/grain/gallery.ts";
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
 import { PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
-import { Button } from "@bigmoves/bff/components";
+import { Un$Typed } from "$lexicon/util.ts";
 import { profileLink } from "../utils.ts";
 import { Breadcrumb } from "./Breadcrumb.tsx";
+import { Button } from "./Button.tsx";
+import { GallerySelectDialogButton } from "./GallerySelectDialog.tsx";
 import { PhotoPreview } from "./PhotoPreview.tsx";
 
 export function UploadPage({
-  handle,
+  userDid,
+  userHandle,
   photos,
   returnTo,
-}: Readonly<{ handle: string; photos: PhotoView[]; returnTo?: string }>) {
+  selectedGallery,
+}: Readonly<
+  {
+    userDid: string;
+    userHandle: string;
+    photos: PhotoView[];
+    returnTo?: string;
+    selectedGallery?: Un$Typed<GalleryView>;
+  }
+>) {
   return (
     <div class="flex flex-col px-4 pt-4 mb-4 space-y-4">
       <Breadcrumb
         items={[
           returnTo
             ? { label: "Gallery", href: returnTo }
-            : { label: "Profile", href: profileLink(handle) },
+            : { label: "Profile", href: profileLink(userHandle) },
           { label: "Upload" },
         ]}
       />
-      <div>
-        Upload 10 photos at a time. Click{" "}
-        <button
-          type="button"
-          hx-get="/dialogs/gallery/new"
-          hx-target="#layout"
-          hx-swap="afterbegin"
-          class="font-semibold hover:underline cursor-pointer text-sky-500"
-        >
-          here
-        </button>{" "}
-        to create a gallery or add to existing galleries once you're done!
-      </div>
       <form
         hx-encoding="multipart/form-data"
         _="on change from #file-input call Grain.uploadPage.uploadPhotos(me)"
       >
+        <input hidden name="galleryUri" value={selectedGallery?.uri} />
         <Button variant="primary" class="mb-4 w-full sm:w-fit" asChild>
           <label>
-            <i class="fa fa-plus"></i> Add photos
+            <i class="fa fa-plus"></i>{" "}
+            {selectedGallery ? "Add photos to gallery" : "Add photos"}
             <input
               id="file-input"
               class="hidden"
···
           </button>
         </label>
       </form>
+      <div class="flex flex-col sm:flex-row items-center justify-between gap-2">
+        {selectedGallery
+          ? (
+            <div className="flex-1 flex items-center my-2">
+              Showing photos for &quot;{(selectedGallery?.record as Gallery)
+                .title}&quot;&nbsp; (
+              <span id="photos-count">{photos.length}</span>
+              )
+            </div>
+          )
+          : (
+            <div className="flex-1 flex items-center my-2">
+              All photos&nbsp;(
+              <span id="photos-count">{photos.length}</span>
+              )
+            </div>
+          )}
+        <div class="flex items-center flex-col sm:flex-row gap-2 w-full justify-end flex-1">
+          {selectedGallery
+            ? (
+              <Button variant="secondary" class="w-full sm:w-fit" asChild>
+                <a
+                  href="/upload"
+                  title="Clear gallery selection"
+                >
+                  <i class="fa fa-close mr-2" />
+                  Remove gallery filter
+                </a>
+              </Button>
+            )
+            : null}
+          {!selectedGallery
+            ? <GallerySelectDialogButton userDid={userDid} />
+            : null}
+          {
+            /* {!selectedGallery && (
+            <Button variant="secondary" class="w-full sm:w-fit">
+              <i class="fa fa-plus"></i> Create gallery
+            </Button>
+          )} */
+          }
+          {
+            /* {selectedGallery
+            ? (
+              <Button variant="secondary" asChild>
+                <a
+                  class="w-full sm:w-fit"
+                  href={galleryLink(
+                    selectedGallery.creator.handle,
+                    new AtUri(selectedGallery.uri).rkey,
+                  )}
+                >
+                  Go to gallery page
+                </a>
+              </Button>
+            )
+            : null} */
+          }
+        </div>
+      </div>
       <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} photo={photo} />)}
+        {photos.map((photo) => (
+          <PhotoPreview
+            key={photo.cid}
+            photo={photo}
+            selectedGallery={selectedGallery}
+          />
+        ))}
       </div>
     </div>
   );

src/input.css

···
   font-style: normal;
   font-display: swap;
 }
+
+:root {
+  --focus-ring-light: var(--color-zinc-200);
+  --focus-ring-dark: var(--color-zinc-500);
+  --btn-border-radius: var(--radius-sm);
+  --input-border-radius: var(--radius-sm);
+}
+
+@layer base {
+  :focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--focus-ring-light);
+    border-radius: var(--radius-sm);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :focus-visible {
+    box-shadow: 0 0 0 2px var(--focus-ring-dark);
+  }
+}
+
+@layer components {
+  .grain-label {
+    display: block;
+    margin-bottom: --spacing(2);
+  }
+
+  .grain-input {
+    border: 1px solid var(--color-zinc-100);
+    padding-inline: --spacing(3);
+    padding-block: --spacing(2);
+    width: 100%;
+    background-color: var(--color-zinc-100);
+    color: var(--color-zinc-900);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-normal);
+    border-radius: var(--input-border-radius);
+    box-shadow: none;
+    outline: none;
+  }
+
+  .grain-input::placeholder {
+    color: var(--color-zinc-400);
+  }
+
+  .grain-input:disabled {
+    background-color: var(--color-zinc-100);
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  .grain-input.grain-input-error {
+    border-color: var(--color-red-500);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .grain-input {
+      background-color: var(--color-zinc-800);
+      color: var(--color-zinc-50);
+      border-color: var(--color-zinc-800);
+    }
+  }
+
+  .grain-btn {
+    display: inline-block;
+    padding-inline: --spacing(3);
+    padding-block: --spacing(1.5);
+    font-size: var(--font-size-base);
+    font-weight: 500;
+    line-height: var(--line-height-normal);
+    text-align: center;
+    cursor: pointer;
+    border-radius: var(--btn-border-radius);
+    box-shadow: none;
+    outline: none;
+
+    &.grain-btn-primary {
+      background-color: var(--color-sky-500);
+      color: var(--color-white);
+      border: 1px solid var(--color-sky-500);
+    }
+
+    &.grain-btn-secondary {
+      background-color: var(--color-zinc-100);
+      color: var(--color-zinc-800);
+      border: 1px solid var(--color-zinc-100);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      &.grain-btn-secondary {
+        background-color: var(--color-zinc-800);
+        color: var(--color-zinc-100);
+        border: 1px solid var(--color-zinc-800);
+      }
+    }
+
+    &.grain-btn-ghost {
+      background-color: transparent;
+      border: 1px solid transparent;
+    }
+
+    &.grain-btn-destructive {
+      background-color: var(--color-red-500);
+      color: var(--color-white);
+      border: 1px solid var(--color-red-500);
+    }
+
+    &.grain-btn-tab {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 120px;
+      padding-inline: --spacing(3);
+      padding-block: --spacing(2);
+      cursor: pointer;
+      font-weight: var(--font-weight-semibold);
+      text-align: center;
+
+      &[aria-selected="true"] {
+        background-color: var(--color-zinc-100);
+        font-weight: 600;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        &[aria-selected="true"] {
+          background-color: var(--color-zinc-800);
+        }
+      }
+    }
+  }
+
+  .grain-input:focus-visible,
+  .grain-btn:focus-visible {
+    box-shadow: 0 0 0 2px var(--focus-ring-light);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .grain-input:focus-visible,
+    .grain-btn:focus-visible {
+      box-shadow: 0 0 0 2px var(--focus-ring-dark);
+    }
+  }
+
+  body[data-scroll-locked] {
+    overflow: hidden !important;
+    overscroll-behavior: contain;
+    position: relative !important;
+    padding-left: 0px;
+    padding-top: 0px;
+    padding-right: 0px;
+    margin-left: 0;
+    margin-top: 0;
+    margin-right: 0px !important;
+  }
+}

src/lib/gallery.ts

···
     "social.grain.photo",
     {
       where: [{ field: "uri", in: photoUris }],
+      orderBy: [{ field: "createdAt", direction: "asc" }],
     },
   );
 
···
   }
   return Array.from(cameras);
 }
+
+export function queryGalleriesByName(
+  userDid: string,
+  nameQuery: string,
+  ctx: BffContext,
+): GalleryView[] {
+  if (!nameQuery || !userDid) return [];
+  const { items: galleries } = ctx.indexService.getRecords<
+    WithBffMeta<Gallery>
+  >(
+    "social.grain.gallery",
+    {
+      where: [
+        { field: "did", equals: userDid },
+        { field: "title", contains: nameQuery },
+      ],
+      orderBy: [{ field: "createdAt", direction: "desc" }],
+    },
+  );
+  if (!galleries.length) return [];
+
+  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
+
+  const profile = getActorProfile(userDid, ctx);
+  if (!profile) return [];
+
+  const uris = galleries.map((g) => g.uri);
+  const labels = ctx.indexService.queryLabels({ subjects: uris });
+
+  return galleries.map((gallery) =>
+    galleryToView(
+      gallery,
+      profile,
+      galleryPhotosMap.get(gallery.uri) ?? [],
+      labels,
+    )
+  );
+}
+
+export function getGalleryPhotos(
+  galleryUri: string,
+  ctx: BffContext,
+): PhotoView[] {
+  if (!galleryUri) return [];
+  const { items: galleryItems } = ctx.indexService.getRecords<
+    WithBffMeta<GalleryItem>
+  >(
+    "social.grain.gallery.item",
+    {
+      where: [{ field: "gallery", equals: galleryUri }],
+    },
+  );
+  const photoUris = galleryItems.map((item) => item.item).filter(Boolean);
+  if (!photoUris.length) return [];
+  const { items: photos } = ctx.indexService.getRecords<WithBffMeta<Photo>>(
+    "social.grain.photo",
+    {
+      where: [{ field: "uri", in: photoUris }],
+      orderBy: [{ field: "createdAt", direction: "desc" }],
+    },
+  );
+  const { items: photosExif } = ctx.indexService.getRecords<
+    WithBffMeta<PhotoExif>
+  >(
+    "social.grain.photo.exif",
+    {
+      where: [{ field: "photo", in: photoUris }],
+    },
+  );
+  const photosMap = new Map<string, PhotoWithExif>();
+  const exifMap = new Map<string, WithBffMeta<PhotoExif>>();
+  for (const exif of photosExif) {
+    exifMap.set(exif.photo, exif);
+  }
+  for (const photo of photos) {
+    const exif = exifMap.get(photo.uri);
+    photosMap.set(photo.uri, exif ? { ...photo, exif } : photo);
+  }
+  // Get the gallery DID from the URI
+  const did = (() => {
+    try {
+      return new AtUri(galleryUri).hostname;
+    } catch {
+      return undefined;
+    }
+  })();
+  // Return PhotoView[] in the order of photo creation time (already sorted by SQL)
+  return photos
+    .map((photo) => {
+      const exif = exifMap.get(photo.uri);
+      if (did) {
+        return photoToView(did, exif ? { ...photo, exif } : photo, exif);
+      }
+      return undefined;
+    })
+    .filter(isPhotoView);
+}

src/lib/photo.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 { Record as Photo } from "$lexicon/types/social/grain/photo.ts";
 import { ExifView, PhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
 import { Record as PhotoExif } from "$lexicon/types/social/grain/photo/exif.ts";
···
 import { BffContext, WithBffMeta } from "@bigmoves/bff";
 import { format, parseISO } from "date-fns";
 import { PUBLIC_URL, USE_CDN } from "../env.ts";
+import { getActorProfile } from "./actor.ts";
+import { galleryToView, getGalleryItemsAndPhotos } from "./gallery.ts";
 
 export function getPhoto(
   uri: string,
···
     return aIdx - bIdx;
   });
 }
+
+export function getPhotoGalleries(
+  photoUri: string,
+  ctx: BffContext,
+): GalleryView[] {
+  const { items: galleryItems } = ctx.indexService.getRecords<
+    WithBffMeta<GalleryItem>
+  >(
+    "social.grain.gallery.item",
+    {
+      where: [{ field: "item", equals: photoUri }],
+    },
+  );
+
+  const galleryUris = Array.from(
+    new Set(galleryItems.map((item) => item.gallery)),
+  );
+  if (galleryUris.length === 0) return [];
+
+  const { items: galleries } = ctx.indexService.getRecords<
+    WithBffMeta<Gallery>
+  >(
+    "social.grain.gallery",
+    {
+      where: [{ field: "uri", in: galleryUris }],
+    },
+  );
+  if (!galleries.length) return [];
+
+  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, galleries);
+  const labels = ctx.indexService.queryLabels({ subjects: galleryUris });
+  return galleries
+    .map((gallery) => {
+      const profile = getActorProfile(gallery.did, ctx);
+      if (!profile) return undefined;
+      return galleryToView(
+        gallery,
+        profile,
+        galleryPhotosMap.get(gallery.uri) ?? [],
+        labels ?? [],
+      );
+    })
+    .filter((g): g is GalleryView => Boolean(g));
+}

src/main.tsx

···
 import { LoginPage } from "./components/LoginPage.tsx";
 import { PDS_HOST_URL } from "./env.ts";
 import { onError } from "./lib/errors.ts";
-import * as actionHandlers from "./routes/actions.tsx";
+import * as actions from "./routes/actions.tsx";
 import { handler as communityGuidelinesHandler } from "./routes/community_guidelines.tsx";
-import * as dialogHandlers from "./routes/dialogs.tsx";
+import * as dialogs from "./routes/dialogs.tsx";
 import { handler as exploreHandler } from "./routes/explore.tsx";
 import { handler as followersHandler } from "./routes/followers.tsx";
 import { handler as followsHandler } from "./routes/follows.tsx";
 import { handler as galleryHandler } from "./routes/gallery.tsx";
-import * as legalHandlers from "./routes/legal.tsx";
+import * as legal from "./routes/legal.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";
···
     route("/upload", uploadHandler),
     route("/onboard", onboardHandler),
     route("/support", supportHandler),
-    route("/support/privacy", legalHandlers.privacyHandler),
-    route("/support/terms", legalHandlers.termsHandler),
-    route("/support/copyright", legalHandlers.copyrightHandler),
+    route("/support/privacy", legal.privacyHandler),
+    route("/support/terms", legal.termsHandler),
+    route("/support/copyright", legal.copyrightHandler),
     route("/support/community-guidelines", communityGuidelinesHandler),
-    route("/dialogs/create-account", dialogHandlers.createAccount),
-    route("/dialogs/gallery/new", dialogHandlers.createGallery),
-    route("/dialogs/gallery/:rkey", dialogHandlers.editGallery),
-    route("/dialogs/gallery/:rkey/sort", dialogHandlers.sortGallery),
-    route("/dialogs/label/:src/:val", dialogHandlers.labelValueDefinition),
-    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/create-account", dialogs.createAccount),
+    route("/dialogs/gallery/new", dialogs.createGallery),
+    route("/dialogs/gallery/:rkey", dialogs.editGallery),
+    route("/dialogs/gallery/:rkey/photos", dialogs.galleryPhotoSelect),
+    route("/dialogs/gallery/:rkey/edit", dialogs.editGalleryDetails),
+    route("/dialogs/gallery/:rkey/sort", dialogs.sortGallery),
+    route("/dialogs/gallery/:rkey/library", dialogs.galleryAddFromLibrary),
+    route("/dialogs/gallery/:did/select", dialogs.gallerySelect),
+    route("/dialogs/label/:src/:val", dialogs.labelValueDefinition),
+    route("/dialogs/profile", dialogs.editProfile),
+    route("/dialogs/avatar/:handle", dialogs.avatar),
+    route("/dialogs/image", dialogs.image),
+    route("/dialogs/photo/:rkey/remove", dialogs.photoRemove),
+    route("/dialogs/photo/:rkey/alt", dialogs.photoAlt),
+    route("/dialogs/photo/:rkey/exif", dialogs.photoExif),
+    route("/dialogs/photo/:did/:rkey/exif-overlay", dialogs.photoExifOverlay),
+    route("/dialogs/exif-info", dialogs.exifInfo),
+    route("/actions/update-seen", ["POST"], actions.updateSeen),
+    route("/actions/follow/:followeeDid", ["POST"], actions.follow),
+    route("/actions/follow/:followeeDid/:rkey", ["DELETE"], actions.unfollow),
+    route("/actions/create-edit", ["POST"], actions.galleryCreateEdit),
+    route("/actions/gallery/delete", ["POST"], actions.galleryDelete),
     route(
-      "/dialogs/photo/:rkey/exif",
-      dialogHandlers.photoExif,
+      "/actions/gallery/:rkey/add-photos",
+      ["PUT"],
+      actions.galleryAddPhotos,
     ),
-    route(
-      "/dialogs/photo/:did/:rkey/exif-overlay",
-      dialogHandlers.photoExifOverlay,
-    ),
-    route(
-      "/dialogs/exif-info",
-      dialogHandlers.exifInfo,
-    ),
-    route(
-      "/dialogs/photo-select/:galleryRkey",
-      dialogHandlers.galleryPhotoSelect,
-    ),
-    route("/actions/update-seen", ["POST"], actionHandlers.updateSeen),
-    route("/actions/follow/:followeeDid", ["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,
+      actions.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/photo", ["POST"], actionHandlers.uploadPhoto),
-    route("/actions/favorite", ["POST"], actionHandlers.galleryFavorite),
-    route("/actions/profile", ["PUT"], actionHandlers.profileUpdate),
-    route(
-      "/actions/gallery/:rkey/sort",
-      ["POST"],
-      actionHandlers.gallerySort,
+      actions.galleryRemovePhoto,
     ),
-    route("/actions/get-blob", ["GET"], actionHandlers.getBlob),
+    route("/actions/photo/:rkey", ["PUT"], actions.photoEdit),
+    route("/actions/photo/:rkey", ["DELETE"], actions.photoDelete),
+    route("/actions/photo", ["POST"], actions.uploadPhoto),
+    route("/actions/favorite", ["POST"], actions.galleryFavorite),
+    route("/actions/profile", ["PUT"], actions.profileUpdate),
+    route("/actions/gallery/:rkey/sort", ["POST"], actions.gallerySort),
+    route("/actions/get-blob", ["GET"], actions.getBlob),
     route("/:did/:collection/:rkey", recordHandler),
   ],
 });

src/routes/actions.tsx

···
 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 { Record as Photo } from "$lexicon/types/social/grain/photo.ts";
 import { isPhotoView } from "$lexicon/types/social/grain/photo/defs.ts";
···
 import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
 import { FavoriteButton } from "../components/FavoriteButton.tsx";
 import { FollowButton } from "../components/FollowButton.tsx";
+import { GalleryEditPhotosDialog } from "../components/GalleryEditPhotosDialog.tsx";
 import { GalleryInfo } from "../components/GalleryInfo.tsx";
 import { GalleryLayout } from "../components/GalleryLayout.tsx";
 import { PhotoPreview } from "../components/PhotoPreview.tsx";
 import { PhotoSelectButton } from "../components/PhotoSelectButton.tsx";
+import { getActorPhotos } from "../lib/actor.ts";
 import { getFollowers } from "../lib/follow.ts";
 import { deleteGallery, getGallery, getGalleryFavs } from "../lib/gallery.ts";
 import { getPhoto, photoToView } from "../lib/photo.ts";
 import type { State } from "../state.ts";
-import { galleryLink } from "../utils.ts";
+import { galleryLink, profileLink, uploadPageLink } from "../utils.ts";
 
 export const updateSeen: RouteHandler = (
   _req,
···
   _params,
   ctx: BffContext<State>,
 ) => {
-  ctx.requireAuth();
+  const { handle } = ctx.requireAuth();
   const formData = await req.formData();
   const uri = formData.get("uri") as string;
   await deleteGallery(uri, ctx);
-  return ctx.redirect("/");
+  return ctx.redirect(profileLink(handle));
+};
+
+export const galleryAddPhotos: RouteHandler = async (
+  req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const galleryRkey = params.rkey;
+  const formData = await req.formData();
+  const uris = formData.getAll("photoUri") as string[];
+  const gallery = getGallery(did, galleryRkey, ctx);
+  if (!gallery) return ctx.next();
+
+  const creates = [];
+  let position = gallery.items?.length ?? 0;
+  for (const uri of uris) {
+    creates.push({
+      collection: "social.grain.gallery.item",
+      data: {
+        gallery: gallery.uri,
+        item: uri,
+        createdAt: new Date().toISOString(),
+        position,
+      },
+    });
+    position++;
+  }
+  await ctx.createRecords<WithBffMeta<GalleryItem>>(creates);
+
+  const updatedGallery = getGallery(did, galleryRkey, ctx);
+  if (!updatedGallery) return ctx.next();
+
+  return ctx.html(
+    <>
+      <GalleryEditPhotosDialog
+        galleryUri={gallery.uri}
+        photos={updatedGallery?.items
+          ?.filter(isPhotoView) ?? []}
+      />
+      <div hx-swap-oob="beforeend:#gallery-container">
+        {updatedGallery.items?.filter(isPhotoView).filter((i) =>
+          uris.includes(i.uri)
+        ).map((item) => (
+          <GalleryLayout.Item
+            key={item.uri}
+            photo={item}
+            gallery={updatedGallery}
+          />
+        ))}
+      </div>
+      <div hx-swap-oob="outerHTML:#gallery-info">
+        <GalleryInfo gallery={updatedGallery} />
+      </div>
+    </>,
+  );
 };
 
 export const galleryAddPhoto: RouteHandler = async (
-  _req,
+  req,
   params,
   ctx: BffContext<State>,
 ) => {
   const { did } = ctx.requireAuth();
+  const url = new URL(req.url);
+  const page = url.searchParams.get("page") || undefined;
   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 = getPhoto(photoUri, ctx);
+
   if (!gallery || !photo) return ctx.next();
+
   if (
     gallery.items
       ?.filter(isPhotoView)
       .some((item) => item.uri === photoUri)
   ) {
+    if (page === "upload") {
+      return ctx.redirect(uploadPageLink(galleryRkey));
+    }
     return new Response(null, { status: 500 });
   }
-  await ctx.createRecord<Gallery>("social.grain.gallery.item", {
+
+  await ctx.createRecord<GalleryItem>("social.grain.gallery.item", {
     gallery: galleryUri,
     item: photoUri,
     position: gallery.items?.length ?? 0,
     createdAt: new Date().toISOString(),
   });
-  gallery.items = [
-    ...(gallery.items ?? []),
-    photo,
-  ];
+
+  if (page === "upload") {
+    return ctx.redirect(uploadPageLink(galleryRkey));
+  }
+
   return ctx.html(
     <>
       <div hx-swap-oob="beforeend:#gallery-container">
···
       </div>
       <PhotoSelectButton
         galleryUri={galleryUri}
-        itemUris={gallery.items?.filter(isPhotoView).map((item) => item.uri) ??
-          []}
         photo={photo}
       />
     </>,
···
 };
 
 export const galleryRemovePhoto: RouteHandler = async (
-  _req,
+  req,
   params,
   ctx: BffContext<State>,
 ) => {
   const { did } = ctx.requireAuth();
+  const url = new URL(req.url);
+  const selectedGallery = url.searchParams.get("selectedGallery");
   const galleryRkey = params.galleryRkey;
   const photoRkey = params.photoRkey;
   const galleryUri = `at://${did}/social.grain.gallery/${galleryRkey}`;
···
       <div hx-swap-oob="outerHTML:#gallery-info">
         <GalleryInfo gallery={gallery} />
       </div>
-      <PhotoSelectButton
-        galleryUri={galleryUri}
-        itemUris={gallery.items?.filter(isPhotoView).map((item) => item.uri) ??
-          []}
-        photo={photoToView(photo.did, photo)}
-      />
+      {/* Remove from gallery container or image previews */}
+      {selectedGallery
+        ? <div hx-swap-oob={`delete:#photo-${photoRkey}`} />
+        : null}
     </>,
   );
 };
···
 };
 
 export const photoDelete: RouteHandler = async (
-  _req,
+  req,
   params,
   ctx: BffContext<State>,
 ) => {
   const { did } = ctx.requireAuth();
+  const url = new URL(req.url);
+  const selectedGallery = url.searchParams.get("selectedGallery");
+  const selectedGalleryRkey = selectedGallery
+    ? new AtUri(selectedGallery).rkey
+    : undefined;
   const deleteUris: string[] = [];
   await ctx.deleteRecord(
     `at://${did}/social.grain.photo/${params.rkey}`,
···
   for (const uri of deleteUris) {
     await ctx.deleteRecord(uri);
   }
-  return new Response(null, { status: 200 });
+  return ctx.redirect(uploadPageLink(selectedGalleryRkey));
 };
 
 export const galleryFavorite: RouteHandler = async (
···
     const width = Number(formData.get("width")) || undefined;
     const height = Number(formData.get("height")) || undefined;
     const exifJsonString = formData.get("exif") as string;
+    const galleryUri = formData.get("galleryUri") as string || undefined;
+    const page = formData.get("page") as string || undefined;
     let exif = undefined;
 
     if (exifJsonString) {
···
       return new Response("Photo not found after creation", { status: 404 });
     }
 
+    let gallery: GalleryView | undefined = undefined;
+    if (galleryUri) {
+      gallery = getGallery(did, new AtUri(galleryUri).rkey, ctx) ?? undefined;
+      if (gallery) {
+        await ctx.createRecord<GalleryItem>("social.grain.gallery.item", {
+          gallery: galleryUri,
+          item: photoUri,
+          position: gallery.items?.length ?? 0,
+          createdAt: new Date().toISOString(),
+        });
+      }
+    }
+
     let exifRecord: WithBffMeta<PhotoExif> | undefined = undefined;
     if (exifUri) {
       exifRecord = ctx.indexService.getRecord<WithBffMeta<PhotoExif>>(
···
       );
     }
 
+    if (page === "gallery" && gallery && galleryUri) {
+      const rkey = new AtUri(gallery.uri).rkey;
+      // updated gallery post gallery item creation
+      const updatedGallery = getGallery(did, rkey, ctx);
+      if (!updatedGallery) {
+        return ctx.next();
+      }
+      const p = photoToView(did, photo, exifRecord);
+      return ctx.html(
+        <>
+          <PhotoSelectButton
+            galleryUri={gallery.uri}
+            photo={p}
+          />
+          <div hx-swap-oob="beforeend:#gallery-container">
+            <GalleryLayout.Item
+              key={photo.cid}
+              photo={p}
+              gallery={updatedGallery}
+            />
+          </div>
+          <div hx-swap-oob="outerHTML:#gallery-info">
+            <GalleryInfo gallery={updatedGallery} />
+          </div>
+        </>,
+      );
+    }
+
+    // @TODO: Use count queries
+    let photosCount = 0;
+    if (gallery && galleryUri) {
+      const rkey = new AtUri(gallery.uri).rkey;
+      const updatedGallery = getGallery(did, rkey, ctx);
+      photosCount = updatedGallery?.items?.length ?? 0;
+    } else {
+      const photos = getActorPhotos(did, ctx);
+      photosCount = photos.length;
+    }
+
     return ctx.html(
-      <PhotoPreview
-        photo={photoToView(did, photo, exifRecord)}
-      />,
+      <>
+        <PhotoPreview
+          photo={photoToView(did, photo, exifRecord)}
+          selectedGallery={gallery}
+        />
+        <div hx-swap-oob="photos-count">{photosCount}</div>
+      </>,
     );
   } catch (e) {
     console.error("Error in uploadStart:", e);

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 { wrap } from "popmotion";
 import { AvatarDialog } from "../components/AvatarDialog.tsx";
 import { CreateAccountDialog } from "../components/CreateAccountDialog.tsx";
+import { EditGalleryDialog } from "../components/EditGalleryDialog.tsx";
 import { ExifInfoDialog } from "../components/ExifInfoDialog.tsx";
 import { ExifOverlayDialog } from "../components/ExifOverlayDialog.tsx";
-import { GalleryCreateEditDialog } from "../components/GalleryCreateEditDialog.tsx";
+import { GalleryDetailsDialog } from "../components/GalleryDetailsDialog.tsx";
+import { GalleryEditPhotosDialog } from "../components/GalleryEditPhotosDialog.tsx";
+import {
+  GallerySelectDialog,
+  GallerySelectDialogSearchResults,
+} from "../components/GallerySelectDialog.tsx";
 import { GallerySortDialog } from "../components/GallerySortDialog.tsx";
 import { LabelDefinitionDialog } from "../components/LabelDefinitionDialog.tsx";
+import { LibraryPhotoSelectDialog } from "../components/LibraryPhotoSelectDialog.tsx";
 import { PhotoAltDialog } from "../components/PhotoAltDialog.tsx";
 import { PhotoDialog } from "../components/PhotoDialog.tsx";
 import { PhotoExifDialog } from "../components/PhotoExifDialog.tsx";
-import { PhotoSelectDialog } from "../components/PhotoSelectDialog.tsx";
 import { ProfileDialog } from "../components/ProfileDialog.tsx";
-import { getActorPhotos, getActorProfile } from "../lib/actor.ts";
-import { getGallery, getGalleryItemsAndPhotos } from "../lib/gallery.ts";
+import { RemovePhotoDialog } from "../components/RemovePhotoDialog.tsx";
+import {
+  getActorGalleries,
+  getActorPhotos,
+  getActorProfile,
+} from "../lib/actor.ts";
+import { getGallery, queryGalleriesByName } from "../lib/gallery.ts";
 import { atprotoLabelValueDefinitions } from "../lib/moderation.ts";
-import { getPhoto, photoToView } from "../lib/photo.ts";
+import { getPhoto, getPhotoGalleries, photoToView } from "../lib/photo.ts";
 import type { State } from "../state.ts";
 
 export const createGallery: RouteHandler = (
···
   ctx: BffContext<State>,
 ) => {
   ctx.requireAuth();
-  return ctx.html(<GalleryCreateEditDialog />);
+  return ctx.html(<GalleryDetailsDialog />);
 };
 
 export const editGallery: RouteHandler = (
···
   const { handle } = ctx.requireAuth();
   const rkey = params.rkey;
   const gallery = getGallery(handle, rkey, ctx);
-  return ctx.html(<GalleryCreateEditDialog gallery={gallery} />);
+  if (!gallery) return ctx.next();
+  return ctx.html(<EditGalleryDialog gallery={gallery} />);
+};
+
+export const editGalleryDetails: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { handle } = ctx.requireAuth();
+  const rkey = params.rkey;
+  const gallery = getGallery(handle, rkey, ctx);
+  return ctx.html(<GalleryDetailsDialog gallery={gallery} />);
 };
 
 export const sortGallery: RouteHandler = (
···
   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,
+  const galleryUri = `at://${did}/social.grain.gallery/${params.rkey}`;
+  const gallery = getGallery(did, params.rkey, ctx);
+  if (!gallery) return ctx.next();
+  return ctx.html(
+    <GalleryEditPhotosDialog
+      galleryUri={galleryUri}
+      photos={gallery?.items
+        ?.filter(isPhotoView) ?? []}
+    />,
   );
+};
+
+export const galleryAddFromLibrary: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const galleryUri = `at://${did}/social.grain.gallery/${params.rkey}`;
+  const gallery = getGallery(did, params.rkey, ctx);
   if (!gallery) return ctx.next();
-  const galleryPhotosMap = getGalleryItemsAndPhotos(ctx, [gallery]);
-  const itemUris =
-    galleryPhotosMap.get(galleryUri)?.map((photo) => photo.uri) ?? [];
+  const galleryPhotoUris = new Set(
+    gallery.items?.filter(isPhotoView).map((item) => item.uri),
+  );
+  const photos = getActorPhotos(did, ctx).filter((photo) => {
+    return !galleryPhotoUris.has(photo.uri);
+  });
   return ctx.html(
-    <PhotoSelectDialog
+    <LibraryPhotoSelectDialog
       galleryUri={galleryUri}
-      itemUris={itemUris}
       photos={photos}
     />,
   );
···
     <ExifInfoDialog />,
   );
 };
+
+export const gallerySelect: RouteHandler = (
+  req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const url = new URL(req.url);
+  const photoUri = url.searchParams.get("photoUri") as string || undefined;
+  const galleries = getActorGalleries(did, ctx);
+  const query = url.searchParams.get("q");
+
+  if (query) {
+    const galleries = queryGalleriesByName(did, query, ctx);
+    return ctx.html(
+      <GallerySelectDialogSearchResults galleries={galleries} />,
+    );
+  }
+
+  if (query === "") {
+    // no-op keep the original dialog open
+    return ctx.html(<GallerySelectDialogSearchResults galleries={galleries} />);
+  }
+
+  return ctx.html(
+    <GallerySelectDialog
+      photoUri={photoUri}
+      userDid={did}
+      galleries={galleries ?? []}
+    />,
+  );
+};
+
+export const photoRemove: RouteHandler = (
+  req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const { did } = ctx.requireAuth();
+  const url = new URL(req.url);
+  const selectedGalleryUri = url.searchParams.get("selectedGallery");
+  const rkey = params.rkey;
+  const photoUri = `at://${did}/social.grain.photo/${rkey}`;
+  const galleries = getPhotoGalleries(photoUri, ctx);
+
+  const selectedGallery = selectedGalleryUri
+    ? galleries.find((gallery) => gallery.uri === selectedGalleryUri)
+    : undefined;
+
+  return ctx.html(
+    <RemovePhotoDialog
+      photoUri={photoUri}
+      galleries={galleries ?? []}
+      selectedGallery={selectedGallery}
+    />,
+  );
+};

src/routes/explore.tsx

···
 import { Record as Profile } from "$lexicon/types/social/grain/actor/profile.ts";
 import { Un$Typed } from "$lexicon/util.ts";
 import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
-import { Input } from "@bigmoves/bff/components";
 import { ComponentChildren } from "preact";
 import { ActorAvatar } from "../components/ActorAvatar.tsx";
+import { Input } from "../components/Input.tsx";
 import { LabelerAvatar } from "../components/LabelerAvatar.tsx";
 import { profileToView } from "../lib/actor.ts";
 import { getPageMeta } from "../meta.ts";
···
       <div class="my-4">
         <Input
           name="q"
-          class="dark:bg-zinc-800 dark:text-white border-zinc-100 bg-zinc-100 dark:border-zinc-800"
           placeholder="Search for users"
           hx-get="/explore"
           hx-target="#search-results"

src/routes/upload.tsx

···
 import { BffContext, RouteHandler } from "@bigmoves/bff";
 import { UploadPage } from "../components/UploadPage.tsx";
 import { getActorPhotos } from "../lib/actor.ts";
+import { getGallery, getGalleryPhotos } from "../lib/gallery.ts";
 import { getPageMeta } from "../meta.ts";
 import type { State } from "../state.ts";
 import { galleryLink } from "../utils.ts";
···
 ) => {
   const { did, handle } = ctx.requireAuth();
   const url = new URL(req.url);
+  const selectedGalleryRkey = url.searchParams.get("gallery") ?? "";
+  const selectedGalleryUri =
+    `at://${did}/social.grain.gallery/${selectedGalleryRkey}`;
   const galleryRkey = url.searchParams.get("returnTo");
-  const photos = getActorPhotos(did, ctx);
+  const photos = selectedGalleryRkey
+    ? getGalleryPhotos(selectedGalleryUri, ctx)
+    : getActorPhotos(did, ctx);
+  const selectedGallery = getGallery(did, selectedGalleryRkey, ctx);
   ctx.state.meta = [{ title: "Upload — Grain" }, ...getPageMeta("/upload")];
   return ctx.render(
     <UploadPage
-      handle={handle}
+      userDid={did}
+      userHandle={handle}
       photos={photos}
       returnTo={galleryRkey ? galleryLink(handle, galleryRkey) : undefined}
+      selectedGallery={selectedGallery ?? undefined}
     />,
   );
 };

src/static/exif.ts

···
+export const tags = [
+  "DateTimeOriginal",
+  "ExposureTime",
+  "FNumber",
+  "Flash",
+  "FocalLengthIn35mmFormat",
+  "ISO",
+  "LensMake",
+  "LensModel",
+  "Make",
+  "Model",
+];
+
+export const SCALE_FACTOR = 1000000;
+
+export type Exif = Record<
+  string,
+  number | string | boolean | Array<number | string> | undefined | Date
+>;
+
+export function normalizeExif(
+  exif: Exif,
+  scale: number = SCALE_FACTOR,
+): Exif {
+  const normalized: Record<
+    string,
+    number | string | boolean | Array<number | string> | undefined
+  > = {};
+
+  for (const [key, value] of Object.entries(exif)) {
+    const camelKey = key[0].toLowerCase() + key.slice(1);
+
+    if (typeof value === "number") {
+      normalized[camelKey] = Math.round(value * scale);
+    } else if (Array.isArray(value)) {
+      normalized[camelKey] = value.map((v) =>
+        typeof v === "number" ? Math.round(v * scale) : v
+      );
+    } else if (value instanceof Date) {
+      normalized[camelKey] = value.toISOString();
+    } else if (typeof value === "string") {
+      normalized[camelKey] = value;
+    } else if (typeof value === "boolean") {
+      normalized[camelKey] = value;
+    } else if (value === undefined) {
+      normalized[camelKey] = undefined;
+    } else {
+      // fallback for unknown types
+      normalized[camelKey] = String(value);
+    }
+  }
+
+  return normalized;
+}

src/static/gallery_photos_dialog.ts

···
+import {
+  dataURLToBlob,
+  doResize,
+  readFileAsDataURL,
+} from "@bigmoves/bff/browser";
+import exifr from "exifr";
+import htmx from "htmx.org";
+import { Exif, normalizeExif, tags as supportedTags } from "./exif.ts";
+
+export class GalleryPhotosDialog {
+  public async uploadPhotos(formElement: HTMLFormElement): Promise<void> {
+    const formData = new FormData(formElement);
+    const fileList = formData.getAll("files") as File[] ?? [];
+    const parseExif = formData.get("parseExif") === "on";
+    const galleryUri = formData.get("galleryUri") as string;
+    const page = formData.get("page") as string;
+
+    if (fileList.length > 10) {
+      alert("You can only upload 10 photos at a time");
+      return;
+    }
+
+    const uploadPromises = fileList.map(async (file) => {
+      let fileDataUri: string | ArrayBuffer | null;
+      let tags: Exif | undefined = undefined;
+      let resized;
+
+      try {
+        fileDataUri = await readFileAsDataURL(file);
+        if (fileDataUri === null || typeof fileDataUri !== "string") {
+          console.error("File data URL is not a string:", fileDataUri);
+          alert("Error reading file.");
+          return;
+        }
+      } catch (err) {
+        console.error("Error reading file as Data URL:", err);
+        alert("Error reading file.");
+        return;
+      }
+
+      if (parseExif) {
+        try {
+          const rawTags = await exifr.parse(file, { pick: supportedTags });
+          console.log("EXIF tags:", await exifr.parse(file));
+          tags = normalizeExif(rawTags);
+        } catch (err) {
+          console.error("Error reading EXIF data:", err);
+        }
+      }
+
+      try {
+        resized = await doResize(fileDataUri, {
+          width: 2000,
+          height: 2000,
+          maxSize: 1000 * 1000, // 1MB
+          mode: "contain",
+        });
+      } catch (err) {
+        console.error("Error resizing image:", err);
+        alert("Error resizing image.");
+        return;
+      }
+
+      const blob = dataURLToBlob(resized.path);
+
+      const fd = new FormData();
+      fd.append("file", blob, file.name);
+      fd.append("width", String(resized.width));
+      fd.append("height", String(resized.height));
+
+      if (tags) {
+        fd.append("exif", JSON.stringify(tags));
+      }
+
+      if (galleryUri) {
+        fd.append("galleryUri", galleryUri);
+      }
+
+      if (page) {
+        fd.append("page", page);
+      }
+
+      const response = await fetch(`/actions/photo`, {
+        method: "POST",
+        body: fd,
+      });
+
+      if (!response.ok) {
+        alert(await response.text());
+        return;
+      }
+
+      const html = await response.text();
+      const temp = document.createElement("div");
+      temp.innerHTML = html;
+
+      const preview = document.querySelector("#image-preview");
+      if (preview) {
+        const child = temp.firstElementChild;
+        if (child) {
+          preview.appendChild(child);
+        }
+        htmx.process(preview);
+      }
+
+      const galleryContainer = document.querySelector(
+        "#gallery-container",
+      );
+      if (galleryContainer) {
+        const child = temp.firstElementChild;
+        if (child) {
+          galleryContainer.appendChild(child.children[0]);
+        }
+        htmx.process(galleryContainer);
+      }
+
+      const galleryInfo = document.querySelector(
+        "#gallery-info",
+      );
+      if (galleryInfo) {
+        const child = temp.children[1];
+        if (child) {
+          galleryInfo.replaceWith(child.children[0]);
+        }
+        htmx.process(galleryInfo);
+      }
+    });
+
+    await Promise.all(uploadPromises);
+
+    // Clear the file input after upload
+    const fileInput = formElement.querySelector("input[type='file']");
+    if (fileInput instanceof HTMLInputElement) {
+      fileInput.value = "";
+    }
+  }
+}

src/static/mod.ts

···
 import _hyperscript from "hyperscript.org";
 import Sortable from "sortablejs";
 import { GalleryLayout } from "./gallery_layout.ts";
+import { GalleryPhotosDialog } from "./gallery_photos_dialog.ts";
 import { PhotoDialog } from "./photo_dialog.ts";
 import { ProfileDialog } from "./profile_dialog.ts";
 import { UploadPage } from "./upload_page.ts";
 
-const galleryLayout = new GalleryLayout({ layoutMode: "justified" });
+const galleryLayout = new GalleryLayout({
+  layoutMode: "justified",
+  spacing: 4,
+});
 galleryLayout.init();
 
 htmx.onLoad(function (element) {
···
     uploadPage?: UploadPage;
     profileDialog?: ProfileDialog;
     galleryLayout?: GalleryLayout;
+    galleryPhotosDialog?: GalleryPhotosDialog;
   };
 };
 
···
 g.Grain = g.Grain ?? {};
 g.Grain.uploadPage = new UploadPage();
 g.Grain.profileDialog = new ProfileDialog();
+g.Grain.galleryPhotosDialog = new GalleryPhotosDialog();
 g.Grain.galleryLayout = galleryLayout;

src/static/tags.ts

···
-export const tags = [
-  "DateTimeOriginal",
-  "ExposureTime",
-  "FNumber",
-  "Flash",
-  "FocalLengthIn35mmFormat",
-  "ISO",
-  "LensMake",
-  "LensModel",
-  "Make",
-  "Model",
-];

src/static/upload_page.ts

···
 import exifr from "exifr";
 import htmx from "htmx.org";
 import hyperscript from "hyperscript.org";
-import { tags as supportedTags } from "./tags.ts";
+import { Exif, normalizeExif, tags as supportedTags } from "./exif.ts";
 
 export class UploadPage {
   public async uploadPhotos(formElement: HTMLFormElement): Promise<void> {
     const formData = new FormData(formElement);
     const fileList = formData.getAll("files") as File[] ?? [];
     const parseExif = formData.get("parseExif") === "on";
+    const galleryUri = formData.get("galleryUri") as string;
 
     if (fileList.length > 10) {
       alert("You can only upload 10 photos at a time");
···
       const blob = dataURLToBlob(resized.path);
 
       const fd = new FormData();
-      fd.append("file", blob, (file as File).name);
+      fd.append("file", blob, file.name);
       fd.append("width", String(resized.width));
       fd.append("height", String(resized.height));
 
       if (tags) {
         fd.append("exif", JSON.stringify(tags));
+      }
+
+      if (galleryUri) {
+        fd.append("galleryUri", galleryUri);
       }
 
       const response = await fetch("/actions/photo", {
···
         const deleteButton = preview.querySelector(
           `#delete-photo-${photoId}`,
         );
-        if (!deleteButton) {
-          return;
+        if (deleteButton) {
+          htmx.process(deleteButton);
+          hyperscript.processNode(deleteButton);
+        }
+      }
+
+      const photosCount = document.querySelector("#photos-count");
+      if (photosCount) {
+        const firstChild = temp.firstElementChild;
+        if (firstChild) {
+          photosCount.replaceWith(firstChild.innerHTML);
         }
-        htmx.process(deleteButton);
-        hyperscript.processNode(deleteButton);
       }
     });
 
···
     }
   }
 }
-
-const SCALE_FACTOR = 1000000;
-
-type Exif = Record<
-  string,
-  number | string | boolean | Array<number | string> | undefined | Date
->;
-
-function normalizeExif(
-  exif: Exif,
-  scale: number = SCALE_FACTOR,
-): Exif {
-  const normalized: Record<
-    string,
-    number | string | boolean | Array<number | string> | undefined
-  > = {};
-
-  for (const [key, value] of Object.entries(exif)) {
-    const camelKey = key[0].toLowerCase() + key.slice(1);
-
-    if (typeof value === "number") {
-      normalized[camelKey] = Math.round(value * scale);
-    } else if (Array.isArray(value)) {
-      normalized[camelKey] = value.map((v) =>
-        typeof v === "number" ? Math.round(v * scale) : v
-      );
-    } else if (value instanceof Date) {
-      normalized[camelKey] = value.toISOString();
-    } else if (typeof value === "string") {
-      normalized[camelKey] = value;
-    } else if (typeof value === "boolean") {
-      normalized[camelKey] = value;
-    } else if (value === undefined) {
-      normalized[camelKey] = undefined;
-    } else {
-      // fallback for unknown types
-      normalized[camelKey] = String(value);
-    }
-  }
-
-  return normalized;
-}

src/utils.ts

···
   return `${Math.max(1, minutes)}m`;
 }
 
+export function uploadPageLink(selectedGalleryRkey?: string) {
+  return "/upload" +
+    (selectedGalleryRkey ? "?gallery=" + selectedGalleryRkey : "");
+}
+
 export function profileLink(handle: string) {
   return `/profile/${handle}`;
 }

sync.sh

···
 
 # Helpful when running local-infra. Specify the repos you've created on a local pds instance.
 
-REPOS="did:plc:gdvspmipkels2qp43m4czqhp"
+REPOS="did:plc:yyz2m2gxnbaxoru2sepbltxv"
 COLLECTIONS="social.grain.gallery,social.grain.actor.profile,social.grain.photo,social.grain.favorite,social.grain.gallery.item,social.grain.graph.follow,social.grain.photo.exif"
 EXTERNAL_COLLECTIONS="app.bsky.actor.profile,app.bsky.graph.follow,sh.tangled.graph.follow,sh.tangled.actor.profile"