From 7e619d33b53a40d069aba08fbcc0cce157d7a3de Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Fri, 9 May 2025 16:22:01 -0700
Subject: [PATCH 1/4] update timeline styles

---
 main.tsx | 73 +++++++++++++++++++++++++++++---------------------------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/main.tsx b/main.tsx
index aa470ad..76d4374 100644
--- a/main.tsx
+++ b/main.tsx
@@ -1070,7 +1070,9 @@ function Root(props: Readonly<RootProps<State>>) {
             heading={
               <h1 class="font-['Jersey_20'] text-4xl text-zinc-900 dark:text-white">
                 grain
-                <sub class="bottom-[0.75rem] text-[1rem]">beta</sub>
+                <sub class="bottom-[0.75rem] text-[1rem] text-sky-500">
+                  beta
+                </sub>
               </h1>
             }
             profile={profile}
@@ -1153,39 +1155,16 @@ function Timeline({ items }: Readonly<{ items: TimelineItem[] }>) {
 function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
   return (
     <li class="space-y-2">
-      <div class="bg-zinc-100 dark:bg-zinc-900 w-fit p-2">
-        <a
-          href={profileLink(item.actor.handle)}
-          class="font-semibold hover:underline"
-        >
-          @{item.actor.handle}
-        </a>{" "}
-        {item.itemType === "favorite" ? "favorited" : "created"}{" "}
-        <a
-          href={galleryLink(
-            item.gallery.creator.handle,
-            new AtUri(item.gallery.uri).rkey,
-          )}
-          class="font-semibold hover:underline"
-        >
-          {(item.gallery.record as Gallery).title}
-        </a>
-        <span class="ml-1">
-          {formatDistanceStrict(item.createdAt, new Date(), {
-            addSuffix: true,
-          })}
-        </span>
-      </div>
-      <a
-        href={galleryLink(
-          item.gallery.creator.handle,
-          new AtUri(item.gallery.uri).rkey,
-        )}
-        class="w-fit flex"
-      >
+      <div class="w-fit flex flex-col bg-zinc-100 dark:bg-zinc-900 p-2 gap-2">
         {item.gallery.items?.filter(isPhotoView).length
           ? (
-            <div class="flex w-full max-w-md mx-auto aspect-[3/2] overflow-hidden gap-2">
+            <a
+              href={galleryLink(
+                item.gallery.creator.handle,
+                new AtUri(item.gallery.uri).rkey,
+              )}
+              class="flex w-full max-w-md mx-auto aspect-[3/2] overflow-hidden gap-2"
+            >
               <div class="w-2/3 h-full">
                 <img
                   src={item.gallery.items?.filter(isPhotoView)[0].thumb}
@@ -1223,10 +1202,33 @@ function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
                     )}
                 </div>
               </div>
-            </div>
+            </a>
           )
           : null}
-      </a>
+        <p>
+          <a
+            href={profileLink(item.actor.handle)}
+            class="font-semibold hover:underline"
+          >
+            @{item.actor.handle}
+          </a>{" "}
+          {item.itemType === "favorite" ? "favorited" : "created"}{" "}
+          <a
+            href={galleryLink(
+              item.gallery.creator.handle,
+              new AtUri(item.gallery.uri).rkey,
+            )}
+            class="font-semibold hover:underline"
+          >
+            {(item.gallery.record as Gallery).title}
+          </a>
+          <span class="ml-1">
+            {formatDistanceStrict(item.createdAt, new Date(), {
+              addSuffix: true,
+            })}
+          </span>
+        </p>
+      </div>
     </li>
   );
 }
@@ -1391,7 +1393,8 @@ function ProfilePage({
                       {gallery.items?.length
                         ? (
                           <img
-                            src={gallery.items?.filter(isPhotoView)?.[0]?.thumb}
+                            src={gallery.items?.filter(isPhotoView)?.[0]
+                              ?.fullsize}
                             alt={gallery.items?.filter(isPhotoView)?.[0]?.alt}
                             class="w-full h-full object-cover"
                           />
-- 
2.51.2


From ec2587c333e85e92b11505c88d6d404f983af969 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Tue, 13 May 2025 12:26:43 -0700
Subject: [PATCH 2/4] various style changes, add share gallery button, move alt
 dialog to upload page

---
 deno.json         |   2 +-
 deno.lock         |  34 +++----
 main.tsx          | 237 +++++++++++++++++++++++++++-------------------
 static/masonry.js |   2 +-
 static/styles.css |  55 +++++++++--
 5 files changed, 204 insertions(+), 126 deletions(-)

diff --git a/deno.json b/deno.json
index ba90ae0..d3eb0e4 100644
--- a/deno.json
+++ b/deno.json
@@ -2,7 +2,7 @@
   "imports": {
     "$lexicon/": "./__generated__/",
     "@atproto/syntax": "npm:@atproto/syntax@^0.4.0",
-    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.11",
+    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.12",
     "@gfx/canvas": "jsr:@gfx/canvas@^0.5.8",
     "@std/path": "jsr:@std/path@^1.0.9",
     "@tailwindcss/cli": "npm:@tailwindcss/cli@^4.1.4",
diff --git a/deno.lock b/deno.lock
index 4f6a181..5f49eb6 100644
--- a/deno.lock
+++ b/deno.lock
@@ -2,7 +2,7 @@
   "version": "4",
   "specifiers": {
     "jsr:@bigmoves/atproto-oauth-client@0.1": "0.1.0",
-    "jsr:@bigmoves/bff@0.3.0-beta.11": "0.3.0-beta.11",
+    "jsr:@bigmoves/bff@0.3.0-beta.12": "0.3.0-beta.12",
     "jsr:@denosaurs/plug@1": "1.0.5",
     "jsr:@denosaurs/plug@1.0.5": "1.0.5",
     "jsr:@gfx/canvas@~0.5.8": "0.5.8",
@@ -15,12 +15,12 @@
     "jsr:@std/encoding@0.217.0": "0.217.0",
     "jsr:@std/encoding@^1.0.10": "1.0.10",
     "jsr:@std/fmt@0.214": "0.214.0",
-    "jsr:@std/fmt@^1.0.7": "1.0.7",
+    "jsr:@std/fmt@^1.0.8": "1.0.8",
     "jsr:@std/fs@0.214": "0.214.0",
     "jsr:@std/fs@0.217.0": "0.217.0",
-    "jsr:@std/html@^1.0.3": "1.0.3",
-    "jsr:@std/http@^1.0.13": "1.0.15",
-    "jsr:@std/internal@^1.0.6": "1.0.6",
+    "jsr:@std/html@^1.0.4": "1.0.4",
+    "jsr:@std/http@^1.0.13": "1.0.16",
+    "jsr:@std/internal@^1.0.6": "1.0.7",
     "jsr:@std/media-types@^1.1.0": "1.1.0",
     "jsr:@std/net@^1.0.4": "1.0.4",
     "jsr:@std/path@0.214": "0.214.0",
@@ -70,8 +70,8 @@
         "npm:jose"
       ]
     },
-    "@bigmoves/bff@0.3.0-beta.11": {
-      "integrity": "1bcdf36eaa440d2cafbf834b37852b4b3f49c97d9802b2307d077cb2f507db5f",
+    "@bigmoves/bff@0.3.0-beta.12": {
+      "integrity": "26d404d3db39d2fa187e36a97ebd244ff648152d0820e17b1a2b993da4fbf34b",
       "dependencies": [
         "jsr:@bigmoves/atproto-oauth-client",
         "jsr:@std/assert@^1.0.13",
@@ -140,8 +140,8 @@
     "@std/fmt@0.214.0": {
       "integrity": "40382cff88a0783b347b4d69b94cf931ab8e549a733916718cb866c08efac4d4"
     },
-    "@std/fmt@1.0.7": {
-      "integrity": "2a727c043d8df62cd0b819b3fb709b64dd622e42c3b1bb817ea7e6cc606360fb"
+    "@std/fmt@1.0.8": {
+      "integrity": "71e1fc498787e4434d213647a6e43e794af4fd393ef8f52062246e06f7e372b7"
     },
     "@std/fs@0.214.0": {
       "integrity": "bc880fea0be120cb1550b1ed7faf92fe071003d83f2456a1e129b39193d85bea",
@@ -157,15 +157,15 @@
         "jsr:@std/path@0.217"
       ]
     },
-    "@std/html@1.0.3": {
-      "integrity": "7a0ac35e050431fb49d44e61c8b8aac1ebd55937e0dc9ec6409aa4bab39a7988"
+    "@std/html@1.0.4": {
+      "integrity": "eff3497c08164e6ada49b7f81a28b5108087033823153d065e3f89467dd3d50e"
     },
-    "@std/http@1.0.15": {
-      "integrity": "435a4934b4e196e82a8233f724da525f7b7112f3566502f28815e94764c19159",
+    "@std/http@1.0.16": {
+      "integrity": "80c8d08c4bfcf615b89978dcefb84f7e880087cf3b6b901703936f3592a06933",
       "dependencies": [
         "jsr:@std/cli",
         "jsr:@std/encoding@^1.0.10",
-        "jsr:@std/fmt@^1.0.7",
+        "jsr:@std/fmt@^1.0.8",
         "jsr:@std/html",
         "jsr:@std/media-types",
         "jsr:@std/net",
@@ -173,8 +173,8 @@
         "jsr:@std/streams"
       ]
     },
-    "@std/internal@1.0.6": {
-      "integrity": "9533b128f230f73bd209408bb07a4b12f8d4255ab2a4d22a1fd6d87304aca9a4"
+    "@std/internal@1.0.7": {
+      "integrity": "39eeb5265190a7bc5d5591c9ff019490bd1f2c3907c044a11b0d545796158a0f"
     },
     "@std/media-types@1.1.0": {
       "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4"
@@ -1608,7 +1608,7 @@
   },
   "workspace": {
     "dependencies": [
-      "jsr:@bigmoves/bff@0.3.0-beta.11",
+      "jsr:@bigmoves/bff@0.3.0-beta.12",
       "jsr:@gfx/canvas@~0.5.8",
       "jsr:@std/path@^1.0.9",
       "npm:@atproto/syntax@0.4",
diff --git a/main.tsx b/main.tsx
index 76d4374..a8750ad 100644
--- a/main.tsx
+++ b/main.tsx
@@ -46,7 +46,12 @@ import {
 } from "@bigmoves/bff/components";
 import { createCanvas, Image } from "@gfx/canvas";
 import { join } from "@std/path";
-import { formatDistanceStrict } from "date-fns";
+import {
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  differenceInWeeks,
+} from "date-fns";
 import { wrap } from "popmotion";
 import { ComponentChildren, JSX, VNode } from "preact";
 
@@ -308,21 +313,15 @@ bff({
         />,
       );
     }),
-    route("/dialogs/image-alt", (req, _params, ctx) => {
-      const url = new URL(req.url);
-      const galleryUri = url.searchParams.get("galleryUri");
-      const imageCid = url.searchParams.get("imageCid");
-      if (!galleryUri || !imageCid) return ctx.next();
-      const atUri = new AtUri(galleryUri);
-      const galleryDid = atUri.hostname;
-      const galleryRkey = atUri.rkey;
-      const gallery = getGallery(galleryDid, galleryRkey, ctx);
-      const photo = gallery?.items?.filter(isPhotoView).find((photo) => {
-        return photo.cid === imageCid;
-      });
-      if (!photo || !gallery) return ctx.next();
+    route("/dialogs/photo/:rkey/alt", (_req, params, ctx) => {
+      requireAuth(ctx);
+      const photoRkey = params.rkey;
+      const photoUri =
+        `at://${ctx.currentUser.did}/social.grain.photo/${photoRkey}`;
+      const photo = ctx.indexService.getRecord<WithBffMeta<Photo>>(photoUri);
+      if (!photo) return ctx.next();
       return ctx.html(
-        <PhotoAltDialog galleryUri={gallery.uri} photo={photo} />,
+        <PhotoAltDialog photo={photoToView(ctx.currentUser.did, photo)} />,
       );
     }),
     route("/dialogs/photo-select/:galleryRkey", (_req, params, ctx) => {
@@ -430,8 +429,6 @@ bff({
                 key={photo.cid}
                 photo={photoToView(photo.did, photo)}
                 gallery={gallery}
-                isCreator={ctx.currentUser.did === gallery.creator.did}
-                isLoggedIn={!!ctx.currentUser.did}
               />
             </div>
             <PhotoSelectButton
@@ -508,6 +505,13 @@ bff({
       });
       return new Response(null, { status: 200 });
     }),
+    route("/actions/photo/:rkey", ["DELETE"], (_req, params, ctx) => {
+      requireAuth(ctx);
+      ctx.deleteRecord(
+        `at://${ctx.currentUser.did}/social.grain.photo/${params.rkey}`,
+      );
+      return new Response(null, { status: 200 });
+    }),
     route("/actions/favorite", ["POST"], async (req, _params, ctx) => {
       requireAuth(ctx);
       const url = new URL(req.url);
@@ -566,13 +570,6 @@ bff({
 
       return ctx.redirect(`/profile/${ctx.currentUser.handle}`);
     }),
-    route("/actions/photo/:rkey", ["DELETE"], (_req, params, ctx) => {
-      requireAuth(ctx);
-      ctx.deleteRecord(
-        `at://${ctx.currentUser.did}/social.grain.photo/${params.rkey}`,
-      );
-      return new Response(null, { status: 200 });
-    }),
     ...photoUploadRoutes(),
     ...avatarUploadRoutes(),
   ],
@@ -1065,18 +1062,18 @@ function Root(props: Readonly<RootProps<State>>) {
         {scripts?.map((file) => <script key={file} src={`/static/${file}`} />)}
       </head>
       <body class="h-full w-full dark:bg-zinc-950 dark:text-white">
-        <Layout id="layout" class="dark:border-zinc-800">
+        <Layout id="layout" class="border-zinc-200 dark:border-zinc-800">
           <Layout.Nav
             heading={
               <h1 class="font-['Jersey_20'] text-4xl text-zinc-900 dark:text-white">
                 grain
-                <sub class="bottom-[0.75rem] text-[1rem] text-sky-500">
+                <sub class="bottom-[0.75rem] text-[1rem]">
                   beta
                 </sub>
               </h1>
             }
             profile={profile}
-            class="dark:border-zinc-800"
+            class="border-zinc-200 dark:border-zinc-800"
           />
           <Layout.Content>{props.children}</Layout.Content>
         </Layout>
@@ -1139,6 +1136,29 @@ function AvatarDialog({
   );
 }
 
+function ActorInfo({ profile }: Readonly<{ profile: Un$Typed<ProfileView> }>) {
+  return (
+    <div class="flex items-center gap-2 min-w-0 flex-1">
+      <img
+        src={profile.avatar}
+        alt={profile.handle}
+        class="rounded-full object-cover size-7 shrink-0"
+      />
+      <a
+        href={profileLink(profile.handle)}
+        class="hover:underline text-zinc-600 dark:text-zinc-500 truncate max-w-[300px] sm:max-w-[400px]"
+      >
+        <span class="text-zinc-950 dark:text-zinc-50 font-semibold text-">
+          {profile.displayName || profile.handle}
+        </span>{" "}
+        <span class="truncate">
+          @{profile.handle}
+        </span>
+      </a>
+    </div>
+  );
+}
+
 function Timeline({ items }: Readonly<{ items: TimelineItem[] }>) {
   return (
     <div class="px-4 mb-4">
@@ -1154,8 +1174,14 @@ function Timeline({ items }: Readonly<{ items: TimelineItem[] }>) {
 
 function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
   return (
-    <li class="space-y-2">
-      <div class="w-fit flex flex-col bg-zinc-100 dark:bg-zinc-900 p-2 gap-2">
+    <li>
+      <div class="w-fit flex flex-col gap-4 pb-4 border-b border-zinc-200 dark:border-zinc-800">
+        <div class="flex items-center justify-between gap-2 w-full">
+          <ActorInfo profile={item.actor} />
+          <span class="shrink-0">
+            {formatRelativeTime(new Date(item.createdAt))}
+          </span>
+        </div>
         {item.gallery.items?.filter(isPhotoView).length
           ? (
             <a
@@ -1206,13 +1232,7 @@ function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
           )
           : null}
         <p>
-          <a
-            href={profileLink(item.actor.handle)}
-            class="font-semibold hover:underline"
-          >
-            @{item.actor.handle}
-          </a>{" "}
-          {item.itemType === "favorite" ? "favorited" : "created"}{" "}
+          {item.itemType === "favorite" ? "Favorited" : "Created"}{" "}
           <a
             href={galleryLink(
               item.gallery.creator.handle,
@@ -1222,11 +1242,6 @@ function TimelineItem({ item }: Readonly<{ item: TimelineItem }>) {
           >
             {(item.gallery.record as Gallery).title}
           </a>
-          <span class="ml-1">
-            {formatDistanceStrict(item.createdAt, new Date(), {
-              addSuffix: true,
-            })}
-          </span>
         </p>
       </div>
     </li>
@@ -1266,6 +1281,21 @@ function FollowButton({
   );
 }
 
+function formatRelativeTime(date: Date) {
+  const now = new Date();
+  const weeks = differenceInWeeks(now, date);
+  if (weeks > 0) return `${weeks}w`;
+
+  const days = differenceInDays(now, date);
+  if (days > 0) return `${days}d`;
+
+  const hours = differenceInHours(now, date);
+  if (hours > 0) return `${hours}h`;
+
+  const minutes = differenceInMinutes(now, date);
+  return `${Math.max(1, minutes)}m`;
+}
+
 function ProfilePage({
   followUri,
   loggedInUserDid,
@@ -1282,14 +1312,17 @@ function ProfilePage({
   galleries?: GalleryView[];
 }>) {
   const isCreator = loggedInUserDid === profile.did;
+  const displayName = profile.displayName || profile.handle;
   return (
     <div class="px-4 mb-4" id="profile-page">
       <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4">
-        <div class="flex flex-col">
+        <div class="flex flex-col mb-4">
           <AvatarButton profile={profile} />
-          <p class="text-2xl font-bold">{profile.displayName}</p>
+          <p class="text-2xl font-bold">{displayName}</p>
           <p class="text-zinc-600 dark:text-zinc-500">@{profile.handle}</p>
-          <p class="my-2">{profile.description}</p>
+          {profile.description
+            ? <p class="mt-2">{profile.description}</p>
+            : null}
         </div>
         {!isCreator && loggedInUserDid
           ? (
@@ -1379,7 +1412,7 @@ function ProfilePage({
           : null}
         {selectedTab === "galleries"
           ? (
-            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-4">
               {galleries?.length
                 ? (
                   galleries.map((gallery) => (
@@ -1443,10 +1476,9 @@ function UploadPage(
               </a>
             )}
         </div>
-        <div>10/100 photos</div>
       </div>
-      <Button variant="primary" class="mb-4" asChild>
-        <label class="w-fit">
+      <Button variant="primary" class="mb-4 w-full sm:w-fit" asChild>
+        <label>
           <i class="fa fa-plus"></i> Add photos
           <input
             class="hidden"
@@ -1594,59 +1626,52 @@ function GalleryPage({
 }>) {
   const isCreator = currentUserDid === gallery.creator.did;
   const isLoggedIn = !!currentUserDid;
+  const description = (gallery.record as Gallery).description;
   return (
     <div class="px-4">
-      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4">
-        <div class="flex flex-col space-y-1 mb-4">
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mt-4 mb-2">
+        <div class="flex flex-col space-y-2 mb-4">
           <h1 class="font-bold text-2xl">
             {(gallery.record as Gallery).title}
           </h1>
-          <div>
-            Gallery by{" "}
-            <a
-              href={profileLink(gallery.creator.handle)}
-              class="hover:underline"
-            >
-              <span class="font-semibold">{gallery.creator.displayName}</span>
-              {" "}
-              <span class="text-zinc-600 dark:text-zinc-500">
-                @{gallery.creator.handle}
-              </span>
-            </a>
-          </div>
-          <p>{(gallery.record as Gallery).description}</p>
+          <ActorInfo profile={gallery.creator} />
+          {description ? <p>{description}</p> : null}
         </div>
         {isLoggedIn && isCreator
           ? (
             <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
               <Button
-                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"
+                hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}`}
+                hx-target="#layout"
+                hx-swap="afterbegin"
               >
-                Add photos
+                Edit
               </Button>
               <Button
-                variant="primary"
-                class="self-start w-full sm:w-fit"
-                hx-get={`/dialogs/gallery/${new AtUri(gallery.uri).rkey}`}
+                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"
               >
-                Edit
+                Add photos
               </Button>
+              <ShareGalleryButton gallery={gallery} />
             </div>
           )
           : null}
         {!isCreator
           ? (
-            <FavoriteButton
-              currentUserDid={currentUserDid}
-              favs={favs}
-              galleryUri={gallery.uri}
-            />
+            <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
+              <ShareGalleryButton gallery={gallery} />
+              <FavoriteButton
+                currentUserDid={currentUserDid}
+                favs={favs}
+                galleryUri={gallery.uri}
+              />
+            </div>
           )
           : null}
       </div>
@@ -1663,8 +1688,6 @@ function GalleryPage({
                 key={photo.cid}
                 photo={photo}
                 gallery={gallery}
-                isCreator={isCreator}
-                isLoggedIn={isLoggedIn}
               />
             ))
           : null}
@@ -1676,13 +1699,9 @@ function GalleryPage({
 function PhotoButton({
   photo,
   gallery,
-  isCreator,
-  isLoggedIn,
 }: Readonly<{
   photo: PhotoView;
   gallery: GalleryView;
-  isCreator: boolean;
-  isLoggedIn: boolean;
 }>) {
   return (
     <button
@@ -1696,15 +1715,12 @@ function PhotoButton({
       data-width={photo.aspectRatio?.width}
       data-height={photo.aspectRatio?.height}
     >
-      {isLoggedIn && isCreator
-        ? <AltTextButton galleryUri={gallery.uri} cid={photo.cid} />
-        : null}
       <img
         src={photo.fullsize}
         alt={photo.alt}
         class="w-full h-full object-cover"
       />
-      {!isCreator && photo.alt
+      {photo.alt
         ? (
           <div class="absolute bg-zinc-950 dark:bg-zinc-900 bottom-1 right-1 sm:bottom-1 sm:right-1 text-xs text-white font-semibold py-[1px] px-[3px]">
             ALT
@@ -1715,6 +1731,30 @@ function PhotoButton({
   );
 }
 
+function ShareGalleryButton({
+  gallery,
+}: Readonly<{ gallery: GalleryView }>) {
+  return (
+    <>
+      <input
+        type="hidden"
+        id="copy-text"
+        value={publicGalleryLink(gallery.creator.handle, gallery.uri)}
+      />
+      <Button
+        variant="primary"
+        _={`on click 
+      set copyText to #copy-text.value
+      writeText(copyText) on navigator.clipboard
+      alert('Copied to clipboard')`}
+      >
+        <i class="fa-solid fa-share-nodes mr-2" />
+        Share
+      </Button>
+    </>
+  );
+}
+
 function FavoriteButton({
   currentUserDid,
   favs = [],
@@ -1844,6 +1884,7 @@ function PhotoPreview({
 }>) {
   return (
     <div class="relative aspect-square bg-zinc-200 dark:bg-zinc-900">
+      {uri ? <AltTextButton photoUri={uri} /> : null}
       {uri
         ? (
           <button
@@ -1867,13 +1908,12 @@ function PhotoPreview({
 }
 
 function AltTextButton({
-  galleryUri,
-  cid,
-}: Readonly<{ galleryUri: string; cid: string }>) {
+  photoUri,
+}: Readonly<{ photoUri: string }>) {
   return (
     <div
-      class="bg-zinc-950 dark:bg-zinc-900 py-[1px] px-[3px] absolute top-1 left-1 sm:top-1 sm:left-1 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10"
-      hx-get={`/dialogs/image-alt?galleryUri=${galleryUri}&imageCid=${cid}`}
+      class="bg-zinc-950 dark:bg-zinc-950 py-[1px] px-[3px] absolute top-1 left-1 sm:top-1 sm:left-1 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10"
+      hx-get={`/dialogs/photo/${new AtUri(photoUri).rkey}/alt`}
       hx-trigger="click"
       hx-target="#layout"
       hx-swap="afterbegin"
@@ -1942,10 +1982,8 @@ function PhotoDialog({
 
 function PhotoAltDialog({
   photo,
-  galleryUri,
 }: Readonly<{
   photo: PhotoView;
-  galleryUri: string;
 }>) {
   return (
     <Dialog id="photo-alt-dialog" class="z-30">
@@ -1962,8 +2000,6 @@ function PhotoAltDialog({
           hx-put={`/actions/photo/${new AtUri(photo.uri).rkey}`}
           _="on htmx:afterOnLoad trigger closeDialog"
         >
-          <input type="hidden" name="galleryUri" value={galleryUri} />
-          <input type="hidden" name="cid" value={photo.cid} />
           <div class="my-2">
             <label htmlFor="alt">Descriptive alt text</label>
             <Textarea
@@ -2072,7 +2108,7 @@ function PhotoSelectButton({
          set @data-added to 'true'
        end`}
     >
-      <div class="hidden group-data-[added=true]:block absolute top-2 right-2">
+      <div class="hidden group-data-[added=true]:block absolute top-2 right-2 z-30">
         <i class="fa-check fa-solid text-sky-500 z-10" />
       </div>
       <img
@@ -2397,3 +2433,10 @@ function avatarUploadRoutes(): BffMiddleware[] {
     ),
   ];
 }
+
+function publicGalleryLink(
+  handle: string,
+  galleryUri: string,
+): string {
+  return `${PUBLIC_URL}/profile/${handle}/${new AtUri(galleryUri).rkey}`;
+}
diff --git a/static/masonry.js b/static/masonry.js
index bf237af..67c1eb4 100644
--- a/static/masonry.js
+++ b/static/masonry.js
@@ -6,7 +6,7 @@ function computeMasonry() {
   const container = document.getElementById("masonry-container");
   if (!container) return;
 
-  const spacing = 12;
+  const spacing = 8;
   const containerWidth = container.offsetWidth;
 
   if (containerWidth === 0) {
diff --git a/static/styles.css b/static/styles.css
index 5bb203a..ac209b3 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -8,6 +8,7 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-sky-500: oklch(68.5% 0.169 237.323);
+    --color-zinc-50: oklch(98.5% 0 0);
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
@@ -281,6 +282,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -293,9 +297,6 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
-  }
   .flex {
     display: flex;
   }
@@ -315,6 +316,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-16 {
     width: calc(var(--spacing) * 16);
     height: calc(var(--spacing) * 16);
@@ -367,15 +372,24 @@
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
+  .max-w-\[300px\] {
+    max-width: 300px;
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .max-w-xl {
     max-width: var(--container-xl);
   }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
   .flex-1 {
     flex: 1;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -394,6 +408,9 @@
   .items-center {
     align-items: center;
   }
+  .justify-between {
+    justify-content: space-between;
+  }
   .justify-center {
     justify-content: center;
   }
@@ -403,13 +420,6 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  .space-y-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -434,6 +444,11 @@
   .self-start {
     align-self: flex-start;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -444,6 +459,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
@@ -501,6 +520,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
   .text-center {
     text-align: center;
   }
@@ -556,6 +578,9 @@
   .text-zinc-900 {
     color: var(--color-zinc-900);
   }
+  .text-zinc-950 {
+    color: var(--color-zinc-950);
+  }
   .lowercase {
     text-transform: lowercase;
   }
@@ -625,6 +650,11 @@
       width: fit-content;
     }
   }
+  .sm\:max-w-\[400px\] {
+    @media (width >= 40rem) {
+      max-width: 400px;
+    }
+  }
   .sm\:grid-cols-3 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -680,6 +710,11 @@
       color: var(--color-white);
     }
   }
+  .dark\:text-zinc-50 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-zinc-50);
+    }
+  }
   .dark\:text-zinc-500 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-zinc-500);
-- 
2.51.2


From 16b38e0bebaaaa00579ddfbe2eb269126ecaa4fc Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Tue, 13 May 2025 16:43:23 -0700
Subject: [PATCH 3/4] add justified gallery layout, add toggle to switch
 between layouts

---
 input.css         |  12 +----
 main.tsx          | 123 +++++++++++++++++++++++++++++++++++++++++++++-
 static/masonry.js |  86 +++++++++++++++++++++++++++++++-
 static/styles.css |  26 ++++++----
 4 files changed, 223 insertions(+), 24 deletions(-)

diff --git a/input.css b/input.css
index 972626a..cc30f36 100644
--- a/input.css
+++ b/input.css
@@ -1,12 +1,4 @@
 @import "tailwindcss";
 
-.htmx-request.htmx-indicator {
-  display: inline;
-}
-.htmx-indicator {
-  display: none;
-}
-.htmx-request #submit-button {
-  opacity: 0.5;
-  pointer-events: none;
-}
+/* use to test light mode */
+/* @custom-variant dark (&:where(.dark, .dark *)); */
diff --git a/main.tsx b/main.tsx
index a8750ad..cf8ee33 100644
--- a/main.tsx
+++ b/main.tsx
@@ -59,6 +59,7 @@ 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>();
 
 bff({
   appName: "Grain Social",
@@ -80,6 +81,18 @@ bff({
     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")) {
+        const fileContent = await Deno.readFile(
+          join(Deno.cwd(), "static", entry.name),
+        );
+        const hashBuffer = await crypto.subtle.digest("SHA-256", fileContent);
+        const hash = Array.from(new Uint8Array(hashBuffer))
+          .map((b) => b.toString(16).padStart(2, "0"))
+          .join("");
+        staticJsFiles.set(entry.name, hash);
+      }
+    }
   },
   onError: (err) => {
     if (err instanceof UnauthorizedError) {
@@ -1059,7 +1072,12 @@ function Root(props: Readonly<RootProps<State>>) {
           href="https://unpkg.com/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"
           preload
         />
-        {scripts?.map((file) => <script key={file} src={`/static/${file}`} />)}
+        {scripts?.map((file) => (
+          <script
+            key={file}
+            src={`/static/${file}?${staticJsFiles.get(file)}`}
+          />
+        ))}
       </head>
       <body class="h-full w-full dark:bg-zinc-950 dark:text-white">
         <Layout id="layout" class="border-zinc-200 dark:border-zinc-800">
@@ -1675,10 +1693,111 @@ function GalleryPage({
           )
           : null}
       </div>
+      <div class="flex justify-end mb-2">
+        <Button
+          id="justified-button"
+          variant="primary"
+          class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
+          _="on click call toggleLayout('justified')
+            set @data-selected to 'true'
+            set #masonry-button's @data-selected to 'false'"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect x="2" y="2" width="8" height="6" fill="currentColor" rx="1" />
+            <rect
+              x="12"
+              y="2"
+              width="10"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="2"
+              y="10"
+              width="6"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="10"
+              y="10"
+              width="12"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="2"
+              y="18"
+              width="20"
+              height="4"
+              fill="currentColor"
+              rx="1"
+            />
+          </svg>
+        </Button>
+        <Button
+          id="masonry-button"
+          variant="primary"
+          data-selected="false"
+          class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
+          _="on click call toggleLayout('masonry')
+            set @data-selected to 'true'
+            set #justified-button's @data-selected to 'false'"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect x="2" y="2" width="8" height="8" fill="currentColor" rx="1" />
+            <rect
+              x="12"
+              y="2"
+              width="8"
+              height="4"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="12"
+              y="8"
+              width="8"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="2"
+              y="12"
+              width="8"
+              height="8"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="12"
+              y="16"
+              width="8"
+              height="4"
+              fill="currentColor"
+              rx="1"
+            />
+          </svg>
+        </Button>
+      </div>
       <div
         id="masonry-container"
         class="h-0 overflow-hidden relative mx-auto w-full"
-        _="on load or htmx:afterSettle call computeMasonry()"
+        _="on load or htmx:afterSettle call computeLayout()"
       >
         {gallery.items?.filter(isPhotoView)?.length
           ? gallery?.items
diff --git a/static/masonry.js b/static/masonry.js
index 67c1eb4..abb5180 100644
--- a/static/masonry.js
+++ b/static/masonry.js
@@ -1,6 +1,20 @@
 // deno-lint-ignore-file
 
 let masonryObserverInitialized = false;
+let layoutMode = "justified";
+
+function computeLayout() {
+  if (layoutMode === "masonry") {
+    computeMasonry();
+  } else {
+    computeJustified();
+  }
+}
+
+function toggleLayout(layout = "justified") {
+  layoutMode = layout;
+  computeLayout();
+}
 
 function computeMasonry() {
   const container = document.getElementById("masonry-container");
@@ -52,6 +66,74 @@ function computeMasonry() {
   container.style.height = `${Math.max(...columnHeights)}px`;
 }
 
+function computeJustified() {
+  const container = document.getElementById("masonry-container");
+  if (!container) return;
+
+  const spacing = 8;
+  const containerWidth = container.offsetWidth;
+
+  if (containerWidth === 0) {
+    requestAnimationFrame(computeJustified);
+    return;
+  }
+
+  const tiles = Array.from(container.querySelectorAll(".masonry-tile"));
+  let currentRow = [];
+  let rowAspectRatioSum = 0;
+  let yOffset = 0;
+
+  // Clear all styles before layout
+  tiles.forEach((tile) => {
+    Object.assign(tile.style, {
+      position: "absolute",
+      left: "0px",
+      top: "0px",
+      width: "auto",
+      height: "auto",
+    });
+  });
+
+  for (let i = 0; i < tiles.length; i++) {
+    const tile = tiles[i];
+    const imgW = parseFloat(tile.dataset.width);
+    const imgH = parseFloat(tile.dataset.height);
+    if (!imgW || !imgH) continue;
+
+    const aspectRatio = imgW / imgH;
+    currentRow.push({ tile, aspectRatio, imgW, imgH });
+    rowAspectRatioSum += aspectRatio;
+
+    // Estimate if row is "full" enough
+    const estimatedRowHeight =
+      (containerWidth - (currentRow.length - 1) * spacing) / rowAspectRatioSum;
+
+    // If height is reasonable or we're at the end, render the row
+    if (estimatedRowHeight < 300 || i === tiles.length - 1) {
+      let xOffset = 0;
+
+      for (const item of currentRow) {
+        const width = estimatedRowHeight * item.aspectRatio;
+        Object.assign(item.tile.style, {
+          position: "absolute",
+          top: `${yOffset}px`,
+          left: `${xOffset}px`,
+          width: `${width}px`,
+          height: `${estimatedRowHeight}px`,
+        });
+        xOffset += width + spacing;
+      }
+
+      yOffset += estimatedRowHeight + spacing;
+      currentRow = [];
+      rowAspectRatioSum = 0;
+    }
+  }
+
+  container.style.position = "relative";
+  container.style.height = `${yOffset}px`;
+}
+
 function observeMasonry() {
   if (masonryObserverInitialized) return;
   masonryObserverInitialized = true;
@@ -61,7 +143,7 @@ function observeMasonry() {
 
   // Observe parent resize
   if (typeof ResizeObserver !== "undefined") {
-    const resizeObserver = new ResizeObserver(() => computeMasonry());
+    const resizeObserver = new ResizeObserver(() => computeLayout());
     if (container.parentElement) {
       resizeObserver.observe(container.parentElement);
     }
@@ -69,7 +151,7 @@ function observeMasonry() {
 
   // Observe inner content changes (tiles being added/removed)
   const mutationObserver = new MutationObserver(() => {
-    computeMasonry();
+    computeLayout();
   });
 
   mutationObserver.observe(container, {
diff --git a/static/styles.css b/static/styles.css
index ac209b3..b3f39b7 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -414,6 +414,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -463,6 +466,9 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-zinc-100 {
+    border-color: var(--color-zinc-100);
+  }
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
@@ -610,6 +616,16 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .data-\[selected\=false\]\:border-transparent {
+    &[data-selected="false"] {
+      border-color: transparent;
+    }
+  }
+  .data-\[selected\=false\]\:bg-transparent {
+    &[data-selected="false"] {
+      background-color: transparent;
+    }
+  }
   .data-\[state\=pending\]\:opacity-50 {
     &[data-state="pending"] {
       opacity: 50%;
@@ -721,16 +737,6 @@
     }
   }
 }
-.htmx-request.htmx-indicator {
-  display: inline;
-}
-.htmx-indicator {
-  display: none;
-}
-.htmx-request #submit-button {
-  opacity: 0.5;
-  pointer-events: none;
-}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
-- 
2.51.2


From 118e3cc007df495e896a0846364242ed955df391 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Wed, 14 May 2025 14:35:56 -0700
Subject: [PATCH 4/4] fix dialog x location, use jpeg instead of webp, update
 bff with jwks private keys

---
 deno.json         |   2 +-
 deno.lock         | 218 ++++++++++++++++++++++++++++++++++++++++++++--
 main.tsx          |  24 +++--
 static/styles.css |  28 +++---
 4 files changed, 239 insertions(+), 33 deletions(-)

diff --git a/deno.json b/deno.json
index d3eb0e4..d189e75 100644
--- a/deno.json
+++ b/deno.json
@@ -2,7 +2,7 @@
   "imports": {
     "$lexicon/": "./__generated__/",
     "@atproto/syntax": "npm:@atproto/syntax@^0.4.0",
-    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.12",
+    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.14",
     "@gfx/canvas": "jsr:@gfx/canvas@^0.5.8",
     "@std/path": "jsr:@std/path@^1.0.9",
     "@tailwindcss/cli": "npm:@tailwindcss/cli@^4.1.4",
diff --git a/deno.lock b/deno.lock
index 5f49eb6..062333a 100644
--- a/deno.lock
+++ b/deno.lock
@@ -1,16 +1,21 @@
 {
   "version": "4",
   "specifiers": {
-    "jsr:@bigmoves/atproto-oauth-client@0.1": "0.1.0",
-    "jsr:@bigmoves/bff@0.3.0-beta.12": "0.3.0-beta.12",
+    "jsr:@bigmoves/atproto-oauth-client@0.2": "0.2.0",
+    "jsr:@bigmoves/bff@0.3.0-beta.14": "0.3.0-beta.14",
+    "jsr:@deno/gfm@0.10": "0.10.0",
+    "jsr:@denosaurs/emoji@0.3": "0.3.1",
     "jsr:@denosaurs/plug@1": "1.0.5",
     "jsr:@denosaurs/plug@1.0.5": "1.0.5",
     "jsr:@gfx/canvas@~0.5.8": "0.5.8",
     "jsr:@std/assert@0.214": "0.214.0",
     "jsr:@std/assert@0.217": "0.217.0",
+    "jsr:@std/assert@^1.0.12": "1.0.13",
     "jsr:@std/assert@^1.0.13": "1.0.13",
+    "jsr:@std/async@^1.0.12": "1.0.12",
     "jsr:@std/cache@0.2": "0.2.0",
     "jsr:@std/cli@^1.0.17": "1.0.17",
+    "jsr:@std/data-structures@^1.0.6": "1.0.7",
     "jsr:@std/encoding@0.214": "0.214.0",
     "jsr:@std/encoding@0.217.0": "0.217.0",
     "jsr:@std/encoding@^1.0.10": "1.0.10",
@@ -18,6 +23,8 @@
     "jsr:@std/fmt@^1.0.8": "1.0.8",
     "jsr:@std/fs@0.214": "0.214.0",
     "jsr:@std/fs@0.217.0": "0.217.0",
+    "jsr:@std/fs@^1.0.15": "1.0.17",
+    "jsr:@std/fs@^1.0.16": "1.0.17",
     "jsr:@std/html@^1.0.4": "1.0.4",
     "jsr:@std/http@^1.0.13": "1.0.16",
     "jsr:@std/internal@^1.0.6": "1.0.7",
@@ -29,6 +36,7 @@
     "jsr:@std/path@^1.0.8": "1.0.9",
     "jsr:@std/path@^1.0.9": "1.0.9",
     "jsr:@std/streams@^1.0.9": "1.0.9",
+    "jsr:@std/testing@^1.0.11": "1.0.11",
     "npm:@atproto-labs/handle-resolver-node@~0.1.14": "0.1.14",
     "npm:@atproto-labs/simple-store@~0.1.2": "0.1.2",
     "npm:@atproto/api@~0.14.19": "0.14.22",
@@ -42,25 +50,39 @@
     "npm:@atproto/oauth-types@~0.2.4": "0.2.4",
     "npm:@atproto/syntax@0.4": "0.4.0",
     "npm:@atproto/xrpc-server@*": "0.7.15",
+    "npm:@skyware/jetstream@~0.2.2": "0.2.2",
     "npm:@tailwindcss/cli@*": "4.1.4",
+    "npm:@tailwindcss/cli@^4.0.12": "4.1.4",
+    "npm:@tailwindcss/cli@^4.1.3": "4.1.4",
     "npm:@tailwindcss/cli@^4.1.4": "4.1.4",
     "npm:@types/node@*": "22.12.0",
     "npm:clsx@^2.1.1": "2.1.1",
     "npm:date-fns@^4.1.0": "4.1.0",
+    "npm:github-slugger@2": "2.0.0",
+    "npm:he@^1.2.0": "1.2.0",
     "npm:jose@5.9.6": "5.9.6",
+    "npm:katex@0.16": "0.16.22",
+    "npm:marked-alert@2": "2.1.2_marked@12.0.2",
+    "npm:marked-footnote@^1.2.0": "1.2.4_marked@12.0.2",
+    "npm:marked-gfm-heading-id@^3.1.0": "3.2.0_marked@12.0.2",
+    "npm:marked@12": "12.0.2",
     "npm:multiformats@*": "9.9.0",
     "npm:multiformats@^13.3.2": "13.3.2",
     "npm:popmotion@^11.0.5": "11.0.5",
     "npm:preact-render-to-string@^6.5.13": "6.5.13_preact@10.26.5",
     "npm:preact@^10.26.5": "10.26.5",
+    "npm:prismjs@^1.29.0": "1.30.0",
+    "npm:sanitize-html@^2.13.0": "2.15.0",
     "npm:sharp@~0.34.1": "0.34.1",
     "npm:tailwind-merge@^3.2.0": "3.2.0",
+    "npm:tailwindcss@^4.0.12": "4.1.4",
+    "npm:tailwindcss@^4.1.3": "4.1.4",
     "npm:tailwindcss@^4.1.4": "4.1.4",
     "npm:typed-htmx@~0.3.1": "0.3.1"
   },
   "jsr": {
-    "@bigmoves/atproto-oauth-client@0.1.0": {
-      "integrity": "d5858f534a800a46af28b1c03b447b179d15bbf164c24767601ae78513501711",
+    "@bigmoves/atproto-oauth-client@0.2.0": {
+      "integrity": "5c3ca124dd52eff51dace83790779ebe48c4b41559b799e16c8750bd415f2124",
       "dependencies": [
         "npm:@atproto-labs/handle-resolver-node",
         "npm:@atproto-labs/simple-store",
@@ -70,8 +92,8 @@
         "npm:jose"
       ]
     },
-    "@bigmoves/bff@0.3.0-beta.12": {
-      "integrity": "26d404d3db39d2fa187e36a97ebd244ff648152d0820e17b1a2b993da4fbf34b",
+    "@bigmoves/bff@0.3.0-beta.14": {
+      "integrity": "2b94d1f58c9b035cb2a50e3161953ab5c8c158caf902eccd89ae0beb2db60edc",
       "dependencies": [
         "jsr:@bigmoves/atproto-oauth-client",
         "jsr:@std/assert@^1.0.13",
@@ -91,6 +113,24 @@
         "npm:tailwind-merge"
       ]
     },
+    "@deno/gfm@0.10.0": {
+      "integrity": "51708205e3559a4aeb6afb29d07c5bfafe7941f91bb360351ef6621de9a39527",
+      "dependencies": [
+        "jsr:@denosaurs/emoji",
+        "npm:github-slugger",
+        "npm:he",
+        "npm:katex",
+        "npm:marked",
+        "npm:marked-alert",
+        "npm:marked-footnote",
+        "npm:marked-gfm-heading-id",
+        "npm:prismjs",
+        "npm:sanitize-html"
+      ]
+    },
+    "@denosaurs/emoji@0.3.1": {
+      "integrity": "b0aed5f55dec99e83da7c9637fe0a36d1d6252b7c99deaaa3fc5dea3fcf3da8b"
+    },
     "@denosaurs/plug@1.0.5": {
       "integrity": "04cd988da558adc226202d88c3a434d5fcc08146eaf4baf0cea0c2284b16d2bf",
       "dependencies": [
@@ -122,12 +162,18 @@
         "jsr:@std/internal"
       ]
     },
+    "@std/async@1.0.12": {
+      "integrity": "d1bfcec459e8012846fe4e38dfc4241ab23240ecda3d8d6dfcf6d81a632e803d"
+    },
     "@std/cache@0.2.0": {
       "integrity": "63a2ccd5a9e7c03e430f7d34dfcfd0d0cfc90731a1eaf8208f4c66e418fc3035"
     },
     "@std/cli@1.0.17": {
       "integrity": "e15b9abe629e17be90cc6216327f03a29eae613365f1353837fa749aad29ce7b"
     },
+    "@std/data-structures@1.0.7": {
+      "integrity": "16932d2c8d281f65eaaa2209af2473209881e33b1ced54cd1b015e7b4cdbb0d2"
+    },
     "@std/encoding@0.214.0": {
       "integrity": "30a8713e1db22986c7e780555ffd2fefd1d4f9374d734bb41f5970f6c3352af5"
     },
@@ -157,6 +203,12 @@
         "jsr:@std/path@0.217"
       ]
     },
+    "@std/fs@1.0.17": {
+      "integrity": "1c00c632677c1158988ef7a004cb16137f870aafdb8163b9dce86ec652f3952b",
+      "dependencies": [
+        "jsr:@std/path@^1.0.9"
+      ]
+    },
     "@std/html@1.0.4": {
       "integrity": "eff3497c08164e6ada49b7f81a28b5108087033823153d065e3f89467dd3d50e"
     },
@@ -199,9 +251,29 @@
     },
     "@std/streams@1.0.9": {
       "integrity": "a9d26b1988cdd7aa7b1f4b51e1c36c1557f3f252880fa6cc5b9f37078b1a5035"
+    },
+    "@std/testing@1.0.11": {
+      "integrity": "12b3db12d34f0f385a26248933bde766c0f8c5ad8b6ab34d4d38f528ab852f48",
+      "dependencies": [
+        "jsr:@std/assert@^1.0.12",
+        "jsr:@std/async",
+        "jsr:@std/data-structures",
+        "jsr:@std/fs@^1.0.16",
+        "jsr:@std/internal",
+        "jsr:@std/path@^1.0.8"
+      ]
     }
   },
   "npm": {
+    "@atcute/bluesky@1.0.15_@atcute+client@2.0.9": {
+      "integrity": "sha512-+EFiybmKQ97aBAgtaD+cKRJER5AMn3cZMkEwEg/pDdWyzxYJ9m1UgemmLdTgI8VrxPufKqdXS2nl7uO7TY6BPA==",
+      "dependencies": [
+        "@atcute/client"
+      ]
+    },
+    "@atcute/client@2.0.9": {
+      "integrity": "sha512-QNDm9gMP6x9LY77ArwY+urQOBtQW74/onEAz42c40JxRm6Rl9K9cU4ROvNKJ+5cpVmEm1sthEWVRmDr5CSZENA=="
+    },
     "@atproto-labs/did-resolver@0.1.11": {
       "integrity": "sha512-qXNzIX2GPQnxT1gl35nv/8ErDdc4Fj/+RlJE7oyE7JGkFAPUyuY03TvKJ79SmWFsWE8wyTXEpLuphr9Da1Vhkw==",
       "dependencies": [
@@ -334,7 +406,7 @@
         "@atproto/lexicon",
         "@atproto/syntax",
         "chalk",
-        "commander",
+        "commander@9.5.0",
         "prettier",
         "ts-morph",
         "yesno",
@@ -611,6 +683,13 @@
         "node-addon-api"
       ]
     },
+    "@skyware/jetstream@0.2.2": {
+      "integrity": "sha512-d1MtWPTIFEciSzV8OClXZCJoz0DJ7aupt4EZSwpGAASYG0ZIPmZTt7RVJkoFzQyqRPHAMD7CvEwu0ut3MHX1og==",
+      "dependencies": [
+        "@atcute/bluesky",
+        "partysocket"
+      ]
+    },
     "@tailwindcss/cli@4.1.4": {
       "integrity": "sha512-gP05Qihh+cZ2FqD5fa0WJXx3KEk2YWUYv/RBKAyiOg0V4vYVDr/xlLc0sacpnVEXM45BVUR9U2hsESufYs6YTA==",
       "dependencies": [
@@ -857,6 +936,9 @@
         "color-string"
       ]
     },
+    "commander@8.3.0": {
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="
+    },
     "commander@9.5.0": {
       "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ=="
     },
@@ -884,6 +966,9 @@
         "ms@2.0.0"
       ]
     },
+    "deepmerge@4.3.1": {
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+    },
     "depd@2.0.0": {
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
@@ -896,6 +981,31 @@
     "detect-libc@2.0.3": {
       "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw=="
     },
+    "dom-serializer@2.0.0": {
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": [
+        "domelementtype",
+        "domhandler",
+        "entities"
+      ]
+    },
+    "domelementtype@2.3.0": {
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+    },
+    "domhandler@5.0.3": {
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": [
+        "domelementtype"
+      ]
+    },
+    "domutils@3.2.2": {
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dependencies": [
+        "dom-serializer",
+        "domelementtype",
+        "domhandler"
+      ]
+    },
     "dunder-proto@1.0.1": {
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
       "dependencies": [
@@ -920,6 +1030,9 @@
         "tapable"
       ]
     },
+    "entities@4.5.0": {
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+    },
     "es-define-property@1.0.1": {
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="
     },
@@ -935,9 +1048,15 @@
     "escape-html@1.0.3": {
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
+    "escape-string-regexp@4.0.0": {
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+    },
     "etag@1.8.1": {
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
     },
+    "event-target-polyfill@0.0.4": {
+      "integrity": "sha512-Gs6RLjzlLRdT8X9ZipJdIZI/Y6/HhRLyq9RdDlCsnpxr/+Nn6bU2EFGuC94GjxqhM+Nmij2Vcq98yoHrU8uNFQ=="
+    },
     "event-target-shim@5.0.1": {
       "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
     },
@@ -1044,6 +1163,9 @@
         "es-object-atoms"
       ]
     },
+    "github-slugger@2.0.0": {
+      "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
+    },
     "gopd@1.2.0": {
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="
     },
@@ -1065,9 +1187,21 @@
         "function-bind"
       ]
     },
+    "he@1.2.0": {
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+    },
     "hey-listen@1.0.8": {
       "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
     },
+    "htmlparser2@8.0.2": {
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "dependencies": [
+        "domelementtype",
+        "domhandler",
+        "domutils",
+        "entities"
+      ]
+    },
     "http-errors@2.0.0": {
       "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "dependencies": [
@@ -1111,6 +1245,9 @@
     "is-number@7.0.0": {
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
+    "is-plain-object@5.0.0": {
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+    },
     "iso-datestring-validator@2.2.2": {
       "integrity": "sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA=="
     },
@@ -1120,6 +1257,12 @@
     "jose@5.9.6": {
       "integrity": "sha512-AMlnetc9+CV9asI19zHmrgS/WYsWUwCn2R7RzlbJWD7F9eWYUTGyBmU9o6PxngtLGOiDGPRu+Uc4fhKzbpteZQ=="
     },
+    "katex@0.16.22": {
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "dependencies": [
+        "commander@8.3.0"
+      ]
+    },
     "lightningcss-darwin-arm64@1.29.2": {
       "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA=="
     },
@@ -1169,6 +1312,28 @@
     "lru-cache@10.4.3": {
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
     },
+    "marked-alert@2.1.2_marked@12.0.2": {
+      "integrity": "sha512-EFNRZ08d8L/iEIPLTlQMDjvwIsj03gxWCczYTht6DCiHJIZhMk4NK5gtPY9UqAYb09eV5VGT+jD4lp396E0I+w==",
+      "dependencies": [
+        "marked"
+      ]
+    },
+    "marked-footnote@1.2.4_marked@12.0.2": {
+      "integrity": "sha512-DB2Kl+wFh6YwZd70qABMY6WUkG1UuyqoNTFoDfGyG79Pz24neYtLBkB+45a7o72V7gkfvbC3CGzIYFobxfMT1Q==",
+      "dependencies": [
+        "marked"
+      ]
+    },
+    "marked-gfm-heading-id@3.2.0_marked@12.0.2": {
+      "integrity": "sha512-Xfxpr5lXLDLY10XqzSCA9l2dDaiabQUgtYM9hw8yunyVsB/xYBRpiic6BOiY/EAJw1ik1eWr1ET1HKOAPZBhXg==",
+      "dependencies": [
+        "github-slugger",
+        "marked"
+      ]
+    },
+    "marked@12.0.2": {
+      "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q=="
+    },
     "math-intrinsics@1.1.0": {
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="
     },
@@ -1221,6 +1386,9 @@
     "multiformats@9.9.0": {
       "integrity": "sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg=="
     },
+    "nanoid@3.3.11": {
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="
+    },
     "negotiator@0.6.3": {
       "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
     },
@@ -1245,9 +1413,18 @@
         "ee-first"
       ]
     },
+    "parse-srcset@1.0.2": {
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
     "parseurl@1.3.3": {
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
+    "partysocket@1.1.3": {
+      "integrity": "sha512-87Jd/nqPoWnVfzHE6Z12WLWTJ+TAgxs0b7i2S163HfQSrVDUK5tW/FC64T5N8L5ss+gqF+EV0BwjZMWggMY3UA==",
+      "dependencies": [
+        "event-target-polyfill"
+      ]
+    },
     "path-browserify@1.0.1": {
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="
     },
@@ -1298,6 +1475,14 @@
         "tslib@2.4.0"
       ]
     },
+    "postcss@8.5.3": {
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "dependencies": [
+        "nanoid",
+        "picocolors",
+        "source-map-js"
+      ]
+    },
     "preact-render-to-string@6.5.13_preact@10.26.5": {
       "integrity": "sha512-iGPd+hKPMFKsfpR2vL4kJ6ZPcFIoWZEcBf0Dpm3zOpdVvj77aY8RlLiQji5OMrngEyaxGogeakTb54uS2FvA6w==",
       "dependencies": [
@@ -1310,6 +1495,9 @@
     "prettier@3.5.3": {
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw=="
     },
+    "prismjs@1.30.0": {
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="
+    },
     "process-warning@3.0.0": {
       "integrity": "sha512-mqn0kFRl0EoqhnL0GQ0veqFHyIN1yig9RHh/InzORTUiZHFRAur+aMtRkELNwGs9aNwKS6tg/An4NYBPGwvtzQ=="
     },
@@ -1378,6 +1566,17 @@
     "safer-buffer@2.1.2": {
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sanitize-html@2.15.0": {
+      "integrity": "sha512-wIjst57vJGpLyBP8ioUbg6ThwJie5SuSIjHxJg53v5Fg+kUK+AXlb7bK3RNXpp315MvwM+0OBGCV6h5pPHsVhA==",
+      "dependencies": [
+        "deepmerge",
+        "escape-string-regexp",
+        "htmlparser2",
+        "is-plain-object",
+        "parse-srcset",
+        "postcss"
+      ]
+    },
     "semver@7.7.1": {
       "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="
     },
@@ -1487,6 +1686,9 @@
         "atomic-sleep"
       ]
     },
+    "source-map-js@1.2.1": {
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
+    },
     "split2@4.2.0": {
       "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg=="
     },
@@ -1608,7 +1810,7 @@
   },
   "workspace": {
     "dependencies": [
-      "jsr:@bigmoves/bff@0.3.0-beta.12",
+      "jsr:@bigmoves/bff@0.3.0-beta.14",
       "jsr:@gfx/canvas@~0.5.8",
       "jsr:@std/path@^1.0.9",
       "npm:@atproto/syntax@0.4",
diff --git a/main.tsx b/main.tsx
index cf8ee33..2dd4591 100644
--- a/main.tsx
+++ b/main.tsx
@@ -120,7 +120,7 @@ bff({
         <div
           id="login"
           class="flex justify-center items-center w-full h-full relative"
-          style="background-image: url('https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:bcgltzqazw5tb6k2g3ttenbj/bafkreiewhwu3ro5dv7omedphb62db4koa7qtvyzfhiiypg3ru4tvuxkrjy@webp'); background-size: cover; background-position: center;"
+          style="background-image: url('https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:bcgltzqazw5tb6k2g3ttenbj/bafkreiewhwu3ro5dv7omedphb62db4koa7qtvyzfhiiypg3ru4tvuxkrjy@jpeg'); background-size: cover; background-position: center;"
         >
           <Login hx-target="#login" error={error} errorClass="text-white" />
           <div class="absolute bottom-2 right-2 text-white text-sm">
@@ -1541,7 +1541,8 @@ function ProfileDialog({
 }>) {
   return (
     <Dialog>
-      <Dialog.Content class="dark:bg-zinc-950">
+      <Dialog.Content class="dark:bg-zinc-950 relative">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>Edit my profile</Dialog.Title>
         <div>
           <AvatarForm src={profile.avatar} alt={profile.handle} />
@@ -1563,6 +1564,7 @@ function ProfileDialog({
               name="displayName"
               class="dark:bg-zinc-800 dark:text-white"
               value={profile.displayName}
+              autoFocus
             />
           </div>
           <div class="mb-4 relative">
@@ -1906,7 +1908,8 @@ function GalleryCreateEditDialog({
 }: Readonly<{ gallery?: GalleryView | null }>) {
   return (
     <Dialog id="gallery-dialog" class="z-30">
-      <Dialog.Content class="dark:bg-zinc-950">
+      <Dialog.Content class="dark:bg-zinc-950 relative">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>
           {gallery ? "Edit gallery" : "Create a new gallery"}
         </Dialog.Title>
@@ -2031,7 +2034,7 @@ function AltTextButton({
 }: Readonly<{ photoUri: string }>) {
   return (
     <div
-      class="bg-zinc-950 dark:bg-zinc-950 py-[1px] px-[3px] absolute top-1 left-1 sm:top-1 sm:left-1 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10"
+      class="bg-zinc-950 dark:bg-zinc-950 py-[1px] px-[3px] absolute top-2 left-2 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10"
       hx-get={`/dialogs/photo/${new AtUri(photoUri).rkey}/alt`}
       hx-trigger="click"
       hx-target="#layout"
@@ -2056,6 +2059,7 @@ function PhotoDialog({
 }>) {
   return (
     <Dialog id="photo-dialog" class="bg-zinc-950 z-30">
+      <Dialog.X />
       {nextImage
         ? (
           <div
@@ -2106,7 +2110,8 @@ function PhotoAltDialog({
 }>) {
   return (
     <Dialog id="photo-alt-dialog" class="z-30">
-      <Dialog.Content class="dark:bg-zinc-950">
+      <Dialog.Content class="dark:bg-zinc-950 relative">
+        <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
         <Dialog.Title>Add alt text</Dialog.Title>
         <div class="aspect-square relative">
           <img
@@ -2154,7 +2159,8 @@ function PhotoSelectDialog({
 }>) {
   return (
     <Dialog id="photo-select-dialog" class="z-30">
-      <Dialog.Content class="w-full max-w-5xl dark:bg-zinc-950 sm:min-h-screen flex flex-col">
+      <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
           ? (
@@ -2166,7 +2172,7 @@ function PhotoSelectDialog({
           : null}
         {photos.length
           ? (
-            <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 my-4 flex-1">
+            <div class="grid grid-cols-3 sm:grid-cols-5 gap-4 my-4 flex-1">
               {photos.map((photo) => (
                 <PhotoSelectButton
                   key={photo.cid}
@@ -2288,9 +2294,9 @@ function photoToView(
     uri: photo.uri,
     cid: photo.photo.ref.toString(),
     thumb:
-      `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${photo.photo.ref.toString()}@webp`,
+      `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${photo.photo.ref.toString()}@jpeg`,
     fullsize:
-      `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${photo.photo.ref.toString()}@webp`,
+      `https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${photo.photo.ref.toString()}@jpeg`,
     alt: photo.alt,
     aspectRatio: photo.aspectRatio,
   };
diff --git a/static/styles.css b/static/styles.css
index b3f39b7..f373e11 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -207,9 +207,6 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -237,8 +234,8 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
+  .left-2 {
+    left: calc(var(--spacing) * 2);
   }
   .z-10 {
     z-index: 10;
@@ -402,6 +399,9 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -496,6 +496,9 @@
   .bg-zinc-950 {
     background-color: var(--color-zinc-950);
   }
+  .fill-zinc-950 {
+    fill: var(--color-zinc-950);
+  }
   .object-contain {
     object-fit: contain;
   }
@@ -631,11 +634,6 @@
       opacity: 50%;
     }
   }
-  .sm\:top-1 {
-    @media (width >= 40rem) {
-      top: calc(var(--spacing) * 1);
-    }
-  }
   .sm\:right-1 {
     @media (width >= 40rem) {
       right: calc(var(--spacing) * 1);
@@ -646,11 +644,6 @@
       bottom: calc(var(--spacing) * 1);
     }
   }
-  .sm\:left-1 {
-    @media (width >= 40rem) {
-      left: calc(var(--spacing) * 1);
-    }
-  }
   .sm\:h-screen {
     @media (width >= 40rem) {
       height: 100vh;
@@ -721,6 +714,11 @@
       background-color: var(--color-zinc-950);
     }
   }
+  .dark\:fill-zinc-50 {
+    @media (prefers-color-scheme: dark) {
+      fill: var(--color-zinc-50);
+    }
+  }
   .dark\:text-white {
     @media (prefers-color-scheme: dark) {
       color: var(--color-white);
-- 
2.51.2