grain.social
grain.social is a photo sharing platform built on atproto.
chadtmiller.com
1import { GalleryView } from "$lexicon/types/social/grain/gallery/defs.ts";
2import { AtUri } from "@atproto/syntax";
3import { Button } from "./Button.tsx";
4import { Dialog } from "./Dialog.tsx";
5
6export function RemovePhotoDialog(
7 { photoUri, galleries, selectedGallery }: Readonly<
8 {
9 photoUri: string;
10 galleries: GalleryView[];
11 selectedGallery?: GalleryView;
12 }
13 >,
14) {
15 const rkey = new AtUri(photoUri).rkey;
16 return (
17 <Dialog>
18 <Dialog.Content class="gap-4">
19 <Dialog.Title>Remove photo</Dialog.Title>
20 <Dialog.X class="fill-zinc-950 dark:fill-zinc-50" />
21
22 {galleries.length > 0
23 ? (
24 <div id="photo-galleries" class="flex flex-col gap-2">
25 <h2>
26 This photo appears in the following galleries. Select to remove.
27 </h2>
28 <ul class="divide-y divide-zinc-200 dark:divide-zinc-800 border-t border-b border-zinc-200 dark:border-zinc-800">
29 {galleries.map((gallery) => (
30 <li
31 key={gallery.uri}
32 class="w-full hover:bg-zinc-200 dark:hover:bg-zinc-800"
33 >
34 <button
35 type="button"
36 hx-put={`/actions/gallery/${
37 new AtUri(gallery.uri).rkey
38 }/remove-photo/${rkey}?selectedGallery=${
39 selectedGallery?.uri ?? ""
40 }`}
41 class="flex justify-between items-center text-left w-full px-2 py-4"
42 _="on htmx:afterRequest
43 if me.closest('ul').children.length is 1
44 then remove #photo-galleries
45 else remove me.closest('li')"
46 >
47 {gallery.record.title || "Untitled Gallery"}
48 <i class="fa fa-close" />
49 </button>
50 </li>
51 ))}
52 </ul>
53 </div>
54 )
55 : null}
56
57 <Button
58 variant="destructive"
59 hx-delete={`/actions/photo/${rkey}?selectedGallery=${
60 selectedGallery?.uri ?? ""
61 }`}
62 hx-swap="none"
63 hx-confirm="Are you sure you want to delete this photo? This action cannot be undone."
64 >
65 Delete photo
66 </Button>
67 </Dialog.Content>
68 </Dialog>
69 );
70}
71
72export function RemovePhotoDialogButton(
73 { selectedGallery, photoUri }: Readonly<
74 { selectedGallery?: GalleryView; photoUri: string }
75 >,
76) {
77 const rkey = new AtUri(photoUri).rkey;
78 return (
79 <button
80 type="button"
81 class="bg-zinc-950/50 z-10 absolute top-2 right-2 cursor-pointer size-4 flex items-center justify-center"
82 hx-get={`/dialogs/photo/${rkey}/remove?selectedGallery=${
83 selectedGallery?.uri ?? ""
84 }`}
85 hx-trigger="click"
86 hx-target="#layout"
87 hx-swap="afterbegin"
88 _="on click halt"
89 >
90 <i class="fas fa-close text-white"></i>
91 </button>
92 );
93}