feat: adding button to delete image

frontend/src/components/image/index.tsx

@@ -1,25 +1,105 @@
-import { Component } from "solid-js";
+import { Component, createSignal } from "solid-js";
 import { base } from "../../network";
 import { A } from "@solidjs/router";
+import { Dialog } from "@kobalte/core";
+
+type ImageComponentProps = {
+    ID: string;
+    onDelete: (id: string) => void;
+}
+
+export const ImageComponent: Component<ImageComponentProps> = (props) => {
+    const [isOpen, setIsOpen] = createSignal(false);
 
-export const ImageComponent: Component<{ ID: string }> = (props) => {
     return (
-		<A href={`/image/${props.ID}`} class="w-full flex justify-center h-[300px]">
+        <>
+            <div class="relative w-full flex justify-center h-[300px]">
+                <A href={`/image/${props.ID}`} class="flex w-full">
                     <img
                         class="flex w-full object-cover rounded-xl"
                         src={`${base}/images/${props.ID}`}
                     />
                 </A>
+                <button
+                    aria-label="Delete image"
+                    class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
+                    onClick={() => setIsOpen(true)}
+                >
+                    ×
+                </button>
+            </div>
+
+            <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
+                <Dialog.Portal>
+                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
+                    <Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
+                        <Dialog.Title class="text-lg font-bold mb-2">
+                            Confirm Delete
+                        </Dialog.Title>
+                        <Dialog.Description class="mb-4">
+                            Are you sure you want to delete this image?
+                        </Dialog.Description>
+                        <div class="flex justify-end gap-2">
+                            <Dialog.CloseButton>
+                                <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
+                                    Cancel
+                                </button>
+                            </Dialog.CloseButton>
+                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
+                                Confirm
+                            </button>
+                        </div>
+                    </Dialog.Content>
+                </Dialog.Portal>
+            </Dialog.Root>
+        </>
     );
 };
 
-export const ImageComponentFullHeight: Component<{ ID: string }> = (props) => {
+export const ImageComponentFullHeight: Component<ImageComponentProps> = (props) => {
+    const [isOpen, setIsOpen] = createSignal(false);
+
     return (
-		<A href={`/image/${props.ID}`} class="w-full flex justify-center">
+        <>
+            <div class="relative w-full flex justify-center">
+                <A href={`/image/${props.ID}`} class="flex w-full">
                     <img
                         class="flex w-full object-cover rounded-xl"
                         src={`${base}/images/${props.ID}`}
                     />
                 </A>
+                <button
+                    aria-label="Delete image"
+                    class="absolute top-2 right-2 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600"
+                    onClick={() => setIsOpen(true)}
+                >
+                    ×
+                </button>
+            </div>
+
+            <Dialog.Root open={isOpen()} onOpenChange={setIsOpen}>
+                <Dialog.Portal>
+                    <Dialog.Overlay class="fixed inset-0 bg-black bg-opacity-50" />
+                    <Dialog.Content class="fixed top-1/2 left-1/2 max-w-md w-full p-6 bg-white rounded shadow-lg transform -translate-x-1/2 -translate-y-1/2">
+                        <Dialog.Title class="text-lg font-bold mb-2">
+                            Confirm Delete
+                        </Dialog.Title>
+                        <Dialog.Description class="mb-4">
+                            Are you sure you want to delete this image?
+                        </Dialog.Description>
+                        <div class="flex justify-end gap-2">
+                            <Dialog.CloseButton>
+                                <button class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
+                                    Cancel
+                                </button>
+                            </Dialog.CloseButton>
+                            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" onClick={() => props.onDelete(props.ID)}>
+                                Confirm
+                            </button>
+                        </div>
+                    </Dialog.Content>
+                </Dialog.Portal>
+            </Dialog.Root>
+        </>
     );
 };

frontend/src/contexts/SearchImageContext.tsx

@@ -3,12 +3,11 @@ import {
     type Component,
     type ParentProps,
     createContext,
-	createEffect,
     createMemo,
     createResource,
     useContext,
 } from "solid-js";
-import { getUserImages, JustTheImageWhatAreTheseNames } from "../network";
+import { deleteImage, getUserImages, JustTheImageWhatAreTheseNames } from "../network";
 
 export type SearchImageStore = {
     imagesByDate: Accessor<
@@ -24,16 +23,13 @@ export type SearchImageStore = {
     >;
 
     onRefetchImages: () => void;
+    onDeleteImage: (imageID: string) => void;
 };
 
 const SearchImageContext = createContext<SearchImageStore>();
 export const SearchImageContextProvider: Component<ParentProps> = (props) => {
     const [data, { refetch }] = createResource(getUserImages);
 
-	createEffect(() => {
-		console.log(data());
-	});
-
     const sortedImages = createMemo<ReturnType<SearchImageStore["imagesByDate"]>>(
         () => {
             const d = data();
@@ -73,6 +69,9 @@ export const SearchImageContextProvider: Component<ParentProps> = (props) => {
                 userImages: () => data()?.userImages ?? [],
                 processingImages,
                 onRefetchImages: refetch,
+                onDeleteImage: (imageID: string) => {
+                    deleteImage(imageID).then(refetch);
+                }
             }}
         >
             {props.children}

frontend/src/pages/all-images/index.tsx

@@ -3,6 +3,7 @@ import { Component, For } from "solid-js";
 import { createVirtualizer } from "@tanstack/solid-virtual";
 import { ImageComponent } from "@components/image";
 import { chunkRows } from "./chunk";
+import { deleteImage } from "@network/index";
 
 type ImageOrDate =
     | { type: "image"; ID: string[] }
@@ -11,7 +12,7 @@ type ImageOrDate =
 export const AllImages: Component = () => {
     let scrollRef: HTMLDivElement | undefined;
 
-	const { imagesByDate } = useSearchImageContext();
+    const { imagesByDate, onDeleteImage } = useSearchImageContext();
 
     const items = () => {
         const items: Array<ImageOrDate> = [];
@@ -47,7 +48,7 @@ export const AllImages: Component = () => {
                         const item = items()[i.index];
                         if (item.type === "image") {
                             return (
-								<For each={item.ID}>{(id) => <ImageComponent ID={id} />}</For>
+                                <For each={item.ID}>{(id) => <ImageComponent ID={id} onDelete={onDeleteImage} />}</For>
                             );
                         } else {
                             return (

frontend/src/pages/front/recent.tsx

@@ -1,11 +1,12 @@
 import { Component, For } from "solid-js";
 import { ImageComponent } from "@components/image";
 import { useSearchImageContext } from "@contexts/SearchImageContext";
+import { deleteImage } from "@network/index";
 
 const NUMBER_OF_MAX_RECENT_IMAGES = 10;
 
 export const Recent: Component = () => {
-	const { userImages } = useSearchImageContext();
+    const { userImages, onDeleteImage } = useSearchImageContext();
 
     const latestImages = () =>
         userImages()
@@ -20,7 +21,7 @@ export const Recent: Component = () => {
             <h2 class="text-xl font-bold">Recent Screenshots</h2>
             <div class="grid grid-cols-3 gap-4 place-items-center">
                 <For each={latestImages()}>
-					{(image) => <ImageComponent ID={image.ImageID} />}
+                    {(image) => <ImageComponent ID={image.ImageID} onDelete={onDeleteImage} />}
                 </For>
             </div>
         </div>

frontend/src/pages/image/index.tsx

@@ -4,18 +4,19 @@ import { useParams } from "@solidjs/router";
 import { For, type Component } from "solid-js";
 import SolidjsMarkdown from "solidjs-markdown";
 import { ListCard } from "@components/list-card";
+import { deleteImage } from "@network/index";
 
 export const ImagePage: Component = () => {
     const { imageId } = useParams<{ imageId: string }>();
 
-	const { userImages, lists } = useSearchImageContext();
+    const { userImages, lists, onDeleteImage } = useSearchImageContext();
 
     const image = () => userImages().find((i) => i.ImageID === imageId);
 
     return (
         <main class="flex flex-col items-center gap-4">
             <div class="w-full bg-white rounded-xl p-4">
-				<ImageComponentFullHeight ID={imageId} />
+                <ImageComponentFullHeight ID={imageId} onDelete={onDeleteImage()} />
             </div>
             <div class="w-full bg-white rounded-xl p-4 flex flex-col gap-4">
                 <h2 class="font-bold text-2xl">Description</h2>

frontend/src/pages/search/index.tsx

@@ -2,12 +2,15 @@ import { Component, createSignal, For } from "solid-js";
 import { Search } from "@kobalte/core/search";
 import { IconSearch } from "@tabler/icons-solidjs";
 import { useSearch } from "./search";
-import { JustTheImageWhatAreTheseNames } from "@network/index";
+import { deleteImage, JustTheImageWhatAreTheseNames } from "@network/index";
 import { ImageComponent } from "@components/image";
+import { useSearchImageContext } from "@contexts/SearchImageContext";
 
 export const SearchPage: Component = () => {
     const fuse = useSearch();
 
+    const { onDeleteImage } = useSearchImageContext();
+
     const [searchItems, setSearchItems] =
         createSignal<JustTheImageWhatAreTheseNames>([]);
 
@@ -38,7 +41,7 @@ export const SearchPage: Component = () => {
                 <Search.Content class="container relative w-full rounded-xl bg-white p-4 grid grid-cols-3 gap-4">
                     <Search.Arrow />
                     <For each={searchItems()}>
-						{(item) => <ImageComponent ID={item.ImageID} />}
+                        {(item) => <ImageComponent ID={item.ImageID} onDelete={onDeleteImage} />}
                     </For>
                     <Search.NoResult>No result found</Search.NoResult>
                 </Search.Content>