staff are able to unpublish model

src/lib/components/models/Card.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
 	import type { ModelCard } from "$lib/type";
+	import { get } from "svelte/store";
 	import Icon from "@iconify/svelte";
   import { goto } from "$app/navigation";
   import { page } from "$app/stores"; 
 	import Button from "$lib/components/Button.svelte";
 	import { success } from "$lib/utils/toaster";
+	import { userStore } from "$lib/stores/use-user";
 
   export let card: ModelCard;
 
-  let visible = true;
+  let user = get(userStore);
 
   const handleClick = async () => {
     $page.url.searchParams.set('model', card?.id);
@@ -32,28 +34,30 @@
     });
     const response = await request.json();
     if (response.success) {
-      visible = false;
-      success("Model deleted successfully!");
+      card.isPublic = false;
+      success("Model unpublished successfully!");
     }
   };
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-{#if visible}
 <div
   class="w-full cursor-pointer group bg-neutral-900 rounded-xl relative flex items-start justify-between flex-col p-3 border border-neutral-800 transition-all duration-200 brightness-90 hover:brightness-100 z-[1]"
   on:click={handleClick}
 >
   <div class="w-full h-[350px] relative z-[1] mb-3 overflow-hidden">
     <img src="{card.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt="{card?.id}" />
-    {#if !card.isPublic}
+    {#if user?.is_admin}
       <div
-        class="absolute flex items-center justify-between bottom-0 left-0 w-full p-5 bg-neutral-900/30"
+        class="absolute flex items-center justify-between bottom-0 left-0 w-full p-5 bg-gradient-to-t from-black to-transparent"
         on:click={e => e.stopPropagation()}
       >
-        <Button theme="red" onClick={remove}>Delete</Button>
-        <Button theme="blue" icon="icon-park-solid:check-one" onClick={publish}>Publish</Button>
+        {#if !card.isPublic}
+          <Button theme="blue" icon="icon-park-solid:check-one" onClick={publish}>Publish</Button>
+        {:else}
+          <Button theme="red" onClick={remove}>Delete</Button>
+        {/if}
       </div>
     {/if}
   </div>
@@ -70,5 +74,4 @@
       </div>
     </div>
   </div>
-</div>
-{/if}
+</div>

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

@@ -177,9 +177,12 @@ export async function DELETE({ params, cookies } : RequestEvent) {
     }, { status: 404 })
   }
 
-  await prisma.model.delete({
+  await prisma.model.update({
     where: {
       id,
+    },
+    data: {
+      isPublic: false,
     }
   })