delete img

src/lib/components/community/Card.svelte

@@ -11,8 +11,9 @@
   export let card: CommunityCard;
   export let form: Record<string, string> | undefined = undefined;
   export let displayReactions: boolean = true;
-  export let onDelete: ((id: string) => Promise<void>) | undefined = undefined;
-
+  export let displayDelete: boolean = false;
+  
+  let is_visible = true;
   let loading = false;
 
   const handleClick = async () => {
@@ -30,45 +31,51 @@
   };
 
   const handleDelete = async (id: string) => {
-    if (loading || !onDelete) return;
+    if (loading) return;
     loading = true
-    await onDelete?.(id);
+		const request = await fetch(`/api/community/${id}`, {
+			method: "DELETE"
+		});
+		const { success } = await request.json();
+    if (success) is_visible = false;
     loading = false;
-  }
+	}
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-  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" class:!brightness-50={loading}>
-    <img class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 object-cover" src="/api/images/{card.image}" alt="{card.prompt}" />
-    <div class="bg-gradient-to-b from-transparent via-black/50 to-black/70 absolute h-[100px] bottom-0 left-0 w-full"></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">
-    <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 w-full">
-      <p class="text-white font-semibold text-lg">{card.prompt}</p>
-      <p class="text-white/75 font-regular text-base">{card.model.id}</p>
+{#if is_visible}
+  <div
+    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" class:!brightness-50={loading}>
+      <img class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 object-cover" src="/api/images/{card.image}" alt="{card.prompt}" />
+      <div class="bg-gradient-to-b from-transparent via-black/50 to-black/70 absolute h-[100px] bottom-0 left-0 w-full"></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">
+      <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 w-full">
+        <p class="text-white font-semibold text-lg">{card.prompt}</p>
+        <p class="text-white/75 font-regular text-base">{card.model.id}</p>
+      </div>
     </div>
+    {#if displayReactions}
+      <Reactions reactions={card.reactions} gallery_id={card.id} />
+    {/if}
+    {#if displayDelete}
+      <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={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          handleDelete(card.id);
+        }}
+      >
+        <Icon icon="ic:round-delete" class="text-white w-5 h-5" />
+      </button>
+    {/if}
+    {#if loading}
+      <Loading />
+    {/if}
   </div>
-  {#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={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        handleDelete(card.id);
-      }}
-    >
-      <Icon icon="ic:round-delete" class="text-white w-5 h-5" />
-    </button>
-  {/if}
-  {#if loading}
-    <Loading />
-  {/if}
-</div>
+{/if}

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

@@ -145,8 +145,8 @@ export async function DELETE({ params, cookies }: RequestEvent) {
     }, { status: 401 })
   }
 
-  const is_token_available = await tokenIsAvailable(token)
-  if (!is_token_available) {
+  const user = await tokenIsAvailable(token)
+  if (!user) {
     return json({
       error: "Invalid token"
     }, { status: 401 })
@@ -155,10 +155,16 @@ export async function DELETE({ params, cookies }: RequestEvent) {
   const gallery = await prisma.gallery.findFirst({
     where: {
       id,
-      userId: is_token_available.sub
+      userId: user.sub
     }
   })
 
+  if (gallery?.userId !== user.sub || !process?.env?.SECRET_HF_ADMIN?.includes(user?.sub) ) {
+    return json({
+      error: "You are not authorized to delete this gallery"
+    }, { status: 401 })
+  }
+
   if (!gallery) {
     return json({
       error: "Gallery not found"

src/routes/gallery/+page.svelte

@@ -8,11 +8,12 @@
 	import Radio from "$lib/components/fields/Radio.svelte";
 	import { COMMUNITY_FILTER_OPTIONS } from "$lib/utils/index.js";
 	import GoTop from "$lib/components/GoTop.svelte";
-	// import GalleryViewer from "$lib/components/community/viewer/Viewer.svelte";
 	import GalleryDrawer from "$lib/components/community/drawer/Drawer.svelte";
-	// import UserIsLogged from "$lib/components/UserIsLogged.svelte";
+	import { get } from "svelte/store";
+	import { userStore } from "$lib/stores/use-user";
 
 	export let data
+	let user = get(userStore);
 
 	let form = {
 		filter: "new",
@@ -75,7 +76,7 @@
 	<!-- mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5 gap-5 mt-8 lg:mt-10 -->
 	<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} form={form} />
+			<Card card={card} form={form} displayDelete={user?.is_admin} />
 		{/each}
 		<InfiniteScroll
 			elementScroll="{elementScroll ?? undefined}"

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

@@ -4,19 +4,6 @@
 	import GalleryViewer from "$lib/components/community/viewer/Viewer.svelte";
 
   export let data
-
-	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>
@@ -30,7 +17,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} displayReactions={false} onDelete={handleDelete} />
+			<Card card={card} displayReactions={false} displayDelete={true} />
 		{/each}
 		<GoTop />
 	</div>