feat: add share gallery dialog with additional copy link support

src/components/GalleryPage.tsx

···
 import { GalleryInfo } from "./GalleryInfo.tsx";
 import { GalleryLayout } from "./GalleryLayout.tsx";
 import { ModerationWrapper } from "./ModerationWrapper.tsx";
-import { ShareGalleryButton } from "./ShareGalleryButton.tsx";
+import { ShareGalleryDialogButton } from "./ShareGalleryDialog.tsx";
 
 export function GalleryPage({
   gallery,
···
           ? (
             <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row sm:flex-wrap sm:justify-end">
               <EditGalleryButton gallery={gallery} />
-              <ShareGalleryButton gallery={gallery} />
+              <ShareGalleryDialogButton gallery={gallery} />
               <FavoriteButton gallery={gallery} />
             </div>
           )
···
         {!isCreator
           ? (
             <div class="flex self-start gap-2 w-full sm:w-fit flex-col sm:flex-row">
-              <ShareGalleryButton gallery={gallery} />
+              <ShareGalleryDialogButton gallery={gallery} />
               <FavoriteButton gallery={gallery} />
             </div>
           )

src/components/ShareGalleryButton.tsx

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

src/components/ShareGalleryDialog.tsx

···
+import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
+import { AtUri } from "@atproto/syntax";
+import { publicGalleryLink } from "../utils.ts";
+import { Button } from "./Button.tsx";
+import { Dialog } from "./Dialog.tsx";
+
+export function ShareGalleryDialog({ gallery }: Readonly<{
+  gallery: GalleryView;
+}>) {
+  const publicLink = publicGalleryLink(
+    gallery.creator.handle,
+    gallery.uri,
+  );
+  const intentLink = `https://bsky.app/intent/compose?text=${
+    encodeURIComponent(
+      "Check out this gallery on @grain.social \n" +
+        publicLink,
+    )
+  }`;
+  return (
+    <Dialog>
+      <Dialog.Content class="gap-4">
+        <Dialog.Title>Share 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">
+            <a
+              href={intentLink}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex gap-2 justify-start items-center text-left w-full px-2 py-4 cursor-pointer"
+            >
+              <i class="fa-brands fa-bluesky" />
+              Share to Bluesky
+            </a>
+          </li>
+          <li class="w-full hover:bg-zinc-200 dark:hover:bg-zinc-800">
+            <button
+              type="button"
+              class="flex gap-2 justify-start items-center text-left w-full px-2 py-4 cursor-pointer"
+              _={`on click call Grain.utils.copyToClipboard("${publicLink}")`}
+            >
+              <i class="fa-solid fa-link"></i>
+              Copy link
+            </button>
+          </li>
+        </ul>
+        <Dialog.Close variant="secondary">Close</Dialog.Close>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+export function ShareGalleryDialogButton(
+  { gallery }: Readonly<{ gallery: GalleryView }>,
+) {
+  const rkey = new AtUri(gallery.uri).rkey;
+  return (
+    <Button
+      variant="primary"
+      class="whitespace-nowrap"
+      hx-get={`/dialogs/${gallery.creator.did}/gallery/${rkey}/share`}
+      hx-trigger="click"
+      hx-target="#dialog-target"
+      hx-swap="innerHTML"
+    >
+      <i class="fa-solid fa-arrow-up-from-bracket mr-2" />
+      Share
+    </Button>
+  );
+}

src/main.tsx

···
     route("/dialogs/gallery/:rkey/edit", dialogs.editGalleryDetails),
     route("/dialogs/gallery/:rkey/sort", dialogs.sortGallery),
     route("/dialogs/gallery/:rkey/library", dialogs.galleryAddFromLibrary),
+    route("/dialogs/:creatorDid/gallery/:rkey/share", dialogs.galleryShare),
     route("/dialogs/gallery/:did/select", dialogs.gallerySelect),
     route("/dialogs/label/:src/:val", dialogs.labelValueDefinition),
     route("/dialogs/profile", dialogs.editProfile),

src/routes/dialogs.tsx

···
 import { PhotoExifDialog } from "../components/PhotoExifDialog.tsx";
 import { ProfileDialog } from "../components/ProfileDialog.tsx";
 import { RemovePhotoDialog } from "../components/RemovePhotoDialog.tsx";
+import { ShareGalleryDialog } from "../components/ShareGalleryDialog.tsx";
 import {
   getActorGalleries,
   getActorPhotos,
···
       galleryUri={galleryUri}
       photos={photos}
     />,
+  );
+};
+
+export const galleryShare: RouteHandler = (
+  _req,
+  params,
+  ctx: BffContext<State>,
+) => {
+  const did = params.creatorDid;
+  const rkey = params.rkey;
+  const gallery = getGallery(did, rkey, ctx);
+  if (!gallery) return ctx.next();
+  return ctx.html(
+    <ShareGalleryDialog gallery={gallery} />,
   );
 };
 

src/static/mod.ts

···
 import { PhotoDialog } from "./photo_dialog.ts";
 import { ProfileDialog } from "./profile_dialog.ts";
 import { UploadPage } from "./upload_page.ts";
+import * as utils from "./utils.ts";
 
 const galleryLayout = new GalleryLayout({
   layoutMode: "justified",
···
     profileDialog?: ProfileDialog;
     galleryLayout?: GalleryLayout;
     galleryPhotosDialog?: GalleryPhotosDialog;
+    utils?: typeof utils;
   };
 };
 
···
 g.Grain.profileDialog = new ProfileDialog();
 g.Grain.galleryPhotosDialog = new GalleryPhotosDialog();
 g.Grain.galleryLayout = galleryLayout;
+g.Grain.utils = utils;

src/static/utils.ts

···
+export async function copyToClipboard(link: string) {
+  await navigator.clipboard.writeText(link);
+  alert("Link copied to clipboard!");
+}