user is able to delete his own generations

src/lib/components/community/Card.svelte

@@ -2,13 +2,19 @@
   import { env } from "$env/dynamic/public";
   import { goto } from "$app/navigation";
   import { page } from "$app/stores"; 
+	import Icon from "@iconify/svelte";
   
 	import type { CommunityCard } from "$lib/type";
   import { galleryStore } from "$lib/stores/use-gallery";
+	import Loading from "$lib/components/Loading.svelte";
 	import Reactions from "./reactions/Reactions.svelte";
 
   export let card: CommunityCard;
-  export let form: Record<string, string>;
+  export let form: Record<string, string> | undefined = undefined;
+  export let displayReactions: boolean = true;
+  export let onDelete: ((id: string) => Promise<void>) | undefined = undefined;
+
+  let loading = false;
 
   const handleClick = async () => {
     const request = await fetch(`/api/community/${card?.id}?${new URLSearchParams(form)}`);
@@ -23,6 +29,13 @@
     $page.url.searchParams.set('gallery', card?.id);
     goto(`?${$page.url.searchParams.toString()}`);
   };
+
+  const handleDelete = async (id: string) => {
+    if (loading || !onDelete) return;
+    loading = true
+    await onDelete?.(id);
+    loading = false;
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -31,7 +44,7 @@
   class="cursor-pointer group bg-neutral-700 rounded-xl h-[400px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-90 hover:brightness-100 z-[1] overflow-hidden"
   on:click={handleClick}
 >
-  <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden">
+  <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden" class:!brightness-50={loading}>
     <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('{env.PUBLIC_FILE_UPLOAD_DIR}/{card.image}');"></div>
   </div>
   <div class="group-hover:opacity-100 opacity-0 translate-y-full group-hover:translate-y-0 transition-all duration-200 flex flex-col gap-4 w-full">
@@ -40,5 +53,15 @@
       <p class="text-white/75 font-regular text-base">{card.model.id}</p>
     </div>
   </div>
-  <Reactions reactions={card.reactions} gallery_id={card.id} />
+  {#if displayReactions}
+    <Reactions reactions={card.reactions} gallery_id={card.id} />
+  {/if}
+  {#if onDelete}
+    <button class="absolute bottom-3 right-3 p-2.5  rounded-full bg-red-500 backdrop-blur-sm transition-all duration-200 hover:bg-red-700" on:click={() => handleDelete(card.id)}>
+      <Icon icon="ic:round-delete" class="text-white w-5 h-5" />
+    </button>
+  {/if}
+  {#if loading}
+    <Loading />
+  {/if}
 </div>

src/routes/api/community/[id]/+server.ts

@@ -1,5 +1,6 @@
 import { json, type RequestEvent } from '@sveltejs/kit';
 import prisma from '$lib/prisma';
+import { tokenIsAvailable } from '$lib/utils';
 
 /** @type {import('./$types').RequestHandler} */
 
@@ -116,3 +117,44 @@ export async function GET({ params, url } : RequestEvent) {
     previous: previous ? previous.id : undefined,
   })
 }
+
+export async function DELETE({ params, cookies }: RequestEvent) {
+  const id = params.id;
+
+  const token = cookies.get('hf_access_token')
+  if (!token) {
+    return json({
+      error: "You must be logged"
+    }, { status: 401 })
+  }
+
+  const is_token_available = await tokenIsAvailable(token)
+  if (!is_token_available) {
+    return json({
+      error: "Invalid token"
+    }, { status: 401 })
+  }
+  
+  const gallery = await prisma.gallery.findFirst({
+    where: {
+      id,
+      userId: is_token_available.sub
+    }
+  })
+
+  if (!gallery) {
+    return json({
+      error: "Gallery not found"
+    }, { status: 404 })
+  }
+
+  await prisma.gallery.delete({
+    where: {
+      id
+    }
+  })
+
+  return json({
+    success: true
+  })
+}

src/routes/saved-generations/+page.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
-  import { browser } from "$app/environment";
-
 	import Card from "$lib/components/community/Card.svelte";
 	import GoTop from "$lib/components/GoTop.svelte";
 
   export let data
 
-  $: elementScroll = browser ? document?.getElementById('app') : undefined;
+	const handleDelete = async (id: string) => {
+		const request = await fetch(`/api/community/${id}`, {
+			method: "DELETE"
+		});
+		const { success } = await request.json();
+		if (success) {
+			data = {
+				...data,
+				cards: data.cards.filter((card: any) => card.id !== id)
+			}
+		}
+	}
 </script>
 
 <svelte:head>
@@ -20,7 +29,7 @@
 	</h1>
 	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-5 mt-8 lg:mt-10">
 		{#each data.cards as card}
-			<Card card={card} />
+			<Card card={card} displayReactions={false} onDelete={handleDelete} />
 		{/each}
 		<GoTop />
 	</div>