add gallery sorting

__generated__/lexicons.ts

···
               type: 'string',
               format: 'at-uri',
             },
+            position: {
+              type: 'integer',
+              default: 0,
+            },
           },
         },
       },

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

···
   createdAt: string
   gallery: string
   item: string
+  position: number
   [k: string]: unknown
 }
 

deno.json

···
   "imports": {
     "$lexicon/": "./__generated__/",
     "@atproto/syntax": "npm:@atproto/syntax@^0.4.0",
-    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.14",
+    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.15",
     "@gfx/canvas": "jsr:@gfx/canvas@^0.5.8",
     "@std/path": "jsr:@std/path@^1.0.9",
     "@tailwindcss/cli": "npm:@tailwindcss/cli@^4.1.4",

deno.lock

···
   "version": "4",
   "specifiers": {
     "jsr:@bigmoves/atproto-oauth-client@0.2": "0.2.0",
-    "jsr:@bigmoves/bff@0.3.0-beta.14": "0.3.0-beta.14",
+    "jsr:@bigmoves/bff@0.3.0-beta.15": "0.3.0-beta.15",
     "jsr:@deno/gfm@0.10": "0.10.0",
     "jsr:@denosaurs/emoji@0.3": "0.3.1",
     "jsr:@denosaurs/plug@1": "1.0.5",
···
         "npm:jose"
       ]
     },
-    "@bigmoves/bff@0.3.0-beta.14": {
-      "integrity": "2b94d1f58c9b035cb2a50e3161953ab5c8c158caf902eccd89ae0beb2db60edc",
+    "@bigmoves/bff@0.3.0-beta.15": {
+      "integrity": "934d0fab8cc73804099ccb5362fa89f5ef3cd6269a6613029131770c97cdfcb9",
       "dependencies": [
         "jsr:@bigmoves/atproto-oauth-client",
         "jsr:@std/assert@^1.0.13",
···
   },
   "workspace": {
     "dependencies": [
-      "jsr:@bigmoves/bff@0.3.0-beta.14",
+      "jsr:@bigmoves/bff@0.3.0-beta.15",
       "jsr:@gfx/canvas@~0.5.8",
       "jsr:@std/path@^1.0.9",
       "npm:@atproto/syntax@0.4",

lexicons/social/grain/gallery/item.json

···
             "type": "string",
             "format": "at-uri"
           },
-          "sort": {
+          "position": {
             "type": "integer",
             "default": 0
           }

main.tsx

···
 const PUBLIC_URL = Deno.env.get("BFF_PUBLIC_URL") ?? "http://localhost:8080";
 const GOATCOUNTER_URL = Deno.env.get("GOATCOUNTER_URL");
 
-let cssContentHash: string = "";
-const staticJsFiles = new Map<string, string>();
+const staticFilesHash = new Map<string, string>();
 
 bff({
   appName: "Grain Social",
···
   lexicons,
   rootElement: Root,
   onListen: async () => {
-    const cssFileContent = await Deno.readFile(
-      join(Deno.cwd(), "static", "styles.css"),
-    );
-    const hashBuffer = await crypto.subtle.digest("SHA-256", cssFileContent);
-    cssContentHash = Array.from(new Uint8Array(hashBuffer))
-      .map((b) => b.toString(16).padStart(2, "0"))
-      .join("");
     for (const entry of Deno.readDirSync(join(Deno.cwd(), "static"))) {
-      if (entry.isFile && entry.name.endsWith(".js")) {
+      if (
+        entry.isFile &&
+        (entry.name.endsWith(".js") || entry.name.endsWith(".css"))
+      ) {
         const fileContent = await Deno.readFile(
           join(Deno.cwd(), "static", entry.name),
         );
···
         const hash = Array.from(new Uint8Array(hashBuffer))
           .map((b) => b.toString(16).padStart(2, "0"))
           .join("");
-        staticJsFiles.set(entry.name, hash);
+        staticFilesHash.set(entry.name, hash);
       }
     }
   },
···
       const rkey = params.rkey;
       const gallery = getGallery(handle, rkey, ctx);
       return ctx.html(<GalleryCreateEditDialog gallery={gallery} />);
+    }),
+    route("/dialogs/gallery/:rkey/sort", (_req, params, ctx) => {
+      requireAuth(ctx);
+      const handle = ctx.currentUser.handle;
+      const rkey = params.rkey;
+      const gallery = getGallery(handle, rkey, ctx);
+      if (!gallery) return ctx.next();
+      return ctx.html(<GallerySortDialog gallery={gallery} />);
     }),
     route("/onboard", (_req, _params, ctx) => {
       requireAuth(ctx);
···
 
       return ctx.redirect(`/profile/${ctx.currentUser.handle}`);
     }),
-    route("/actions/sort-end", ["POST"], async (req, _params, ctx) => {
-      const formData = await req.formData();
-      const items = formData.getAll("item") as string[];
-      console.log(items);
-      return new Response(null, { status: 200 });
-    }),
+    route(
+      "/actions/gallery/:rkey/sort",
+      ["POST"],
+      async (req, params, ctx) => {
+        requireAuth(ctx);
+        const galleryRkey = params.rkey;
+        const galleryUri =
+          `at://${ctx.currentUser.did}/social.grain.gallery/${galleryRkey}`;
+        const {
+          items,
+        } = ctx.indexService.getRecords<WithBffMeta<GalleryItem>>(
+          "social.grain.gallery.item",
+          {
+            where: [
+              {
+                field: "gallery",
+                equals: galleryUri,
+              },
+            ],
+          },
+        );
+        const itemsMap = new Map<string, WithBffMeta<GalleryItem>>();
+        for (const item of items) {
+          itemsMap.set(item.item, item);
+        }
+        const formData = await req.formData();
+        const sortedItems = formData.getAll("item") as string[];
+        const updates = [];
+        let position = 0;
+        for (const sortedItemUri of sortedItems) {
+          const item = itemsMap.get(sortedItemUri);
+          if (!item) continue;
+          updates.push({
+            collection: "social.grain.gallery.item",
+            rkey: new AtUri(item.uri).rkey,
+            data: {
+              gallery: item.gallery,
+              item: item.item,
+              createdAt: item.createdAt,
+              position,
+            },
+          });
+          position++;
+        }
+        await ctx.updateRecords<WithBffMeta<GalleryItem>>(updates);
+        return ctx.redirect(
+          `/profile/${ctx.currentUser.handle}/${galleryRkey}`,
+        );
+      },
+    ),
     ...photoUploadRoutes(),
     ...avatarUploadRoutes(),
   ],
···
   const { items: galleryItems } = ctx.indexService.getRecords<
     WithBffMeta<GalleryItem>
   >("social.grain.gallery.item", {
-    orderBy: { field: "createdAt", direction: "asc" },
+    orderBy: { field: "position", direction: "asc" },
     where: [{ field: "gallery", in: galleryUris }],
   });
 
···
         <script src="https://unpkg.com/hyperscript.org@0.9.14" />
         <script src="https://unpkg.com/sortablejs@1.15.6" />
         <style dangerouslySetInnerHTML={{ __html: CSS }} />
-        <link rel="stylesheet" href={`/static/styles.css?${cssContentHash}`} />
+        <link
+          rel="stylesheet"
+          href={`/static/styles.css?${staticFilesHash.get("styles.css")}`}
+        />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link
           rel="preconnect"
···
         {scripts?.map((file) => (
           <script
             key={file}
-            src={`/static/${file}?${staticJsFiles.get(file)}`}
+            src={`/static/${file}?${staticFilesHash.get(file)}`}
           />
         ))}
       </head>
···
                 hx-target="#layout"
                 hx-swap="afterbegin"
               >
-                Change Sort
-              </Button>
-              <Button
-                variant="primary"
-                class="self-start w-full sm:w-fit"
-                hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}`}
-                hx-target="#layout"
-                hx-swap="afterbegin"
-              >
                 Edit
               </Button>
               <Button
···
               >
                 Add photos
               </Button>
+              <Button
+                variant="primary"
+                class="self-start w-full sm:w-fit"
+                hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}/sort`}
+                hx-target="#layout"
+                hx-swap="afterbegin"
+              >
+                Sort order
+              </Button>
               <ShareGalleryButton gallery={gallery} />
             </div>
           )
···
           )
           : null}
       </div>
-      <SortableGrid gallery={gallery} />
-      {
-        /* <div
       <div class="flex justify-end mb-2">
         <Button
           id="justified-button"
···
               />
             ))
           : null}
-      </div> */
-      }
+      </div>
     </div>
   );
 }
···
   );
 }
 
-function SortableGrid({ gallery }: Readonly<{ gallery: GalleryView }>) {
+function GallerySortDialog({ gallery }: Readonly<{ gallery: GalleryView }>) {
   return (
-    <form
-      id="masonry-container"
-      class="sortable h-0 overflow-hidden relative mx-auto w-full"
-      _="on load or htmx:afterSettle call computeMasonry()"
-      // hx-post="/actions/sort-end"
-      // hx-trigger="end"
-      // hx-swap="none"
-    >
-      <div class="htmx-indicator">Updating...</div>
-      {gallery?.items?.filter(isPhotoView).map((item) => (
-        <div
-          key={item.cid}
-          class="masonry-tile absolute cursor-pointer"
-          data-width={item.aspectRatio?.width}
-          data-height={item.aspectRatio?.height}
+    <Dialog>
+      <Dialog.Content class="dark:bg-zinc-950 relative">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
+        <Dialog.Title>Sort gallery</Dialog.Title>
+        <p class="my-2 text-center">Drag photos to rearrange</p>
+        <form
+          hx-post={`/actions/gallery/${new AtUri(gallery.uri).rkey}/sort`}
+          hx-trigger="submit"
+          hx-swap="none"
         >
-          <input type="hidden" name="item" value={item.uri} />
-          <img
-            src={item.fullsize}
-            alt={item.alt}
-            class="w-full h-full object-cover"
-          />
-        </div>
-      ))}
-    </form>
+          <div class="sortable grid grid-cols-3 sm:grid-cols-5 gap-2 mt-2">
+            {gallery?.items?.filter(isPhotoView).map((item) => (
+              <div
+                key={item.cid}
+                class="relative aspect-square cursor-grab"
+              >
+                <input type="hidden" name="item" value={item.uri} />
+                <img
+                  src={item.fullsize}
+                  alt={item.alt}
+                  class="w-full h-full absolute object-cover"
+                />
+              </div>
+            ))}
+          </div>
+          <div class="flex flex-col gap-2 mt-2">
+            <Button
+              variant="primary"
+              type="submit"
+              class="w-full"
+            >
+              Save
+            </Button>
+            <Button
+              variant="secondary"
+              type="button"
+              class="w-full"
+              _={Dialog._closeOnClick}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </Dialog.Content>
+    </Dialog>
   );
 }
 

static/sortable.js

···
 htmx.onLoad(function (content) {
   const sortables = content.querySelectorAll(".sortable");
   for (const sortable of sortables) {
-    const sortableInstance = new Sortable(sortable, {
+    new Sortable(sortable, {
       animation: 150,
-      swap: true,
-      swapClass: "opacity-50",
-
-      // Make the `.htmx-indicator` unsortable
-      filter: ".htmx-indicator",
-      onMove: function (evt) {
-        console.log("onMove", evt);
-        return evt.related.className.indexOf("htmx-indicator") === -1;
-      },
-
-      // Disable sorting on the `end` event
-      onEnd: function (_evt) {
-        console.log("onEnd");
-        // this.option("disabled", true);
-      },
-    });
-
-    // Re-enable sorting on the `htmx:afterSwap` event
-    sortable.addEventListener("htmx:afterSwap", function () {
-      //   sortableInstance.option("disabled", false);
     });
   }
 });

static/styles.css

···
   .shrink-0 {
     flex-shrink: 0;
   }
+  .cursor-grab {
+    cursor: grab;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
···
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
     }
+  }
+  .bg-sky-500 {
+    background-color: var(--color-sky-500);
   }
   .bg-zinc-100 {
     background-color: var(--color-zinc-100);
···
   }
   .lowercase {
     text-transform: lowercase;
-  }
-  .opacity-50 {
-    opacity: 50%;
   }
   .ring-sky-500 {
     --tw-ring-color: var(--color-sky-500);