feat: able to publish even after the generation

src/lib/components/community/Card.svelte

@@ -7,12 +7,13 @@
   import { galleryStore } from "$lib/stores/use-gallery";
 	import Loading from "$lib/components/Loading.svelte";
 	import Reactions from "./reactions/Reactions.svelte";
-	import { success } from "$lib/utils/toaster";
+	import { error, success } from "$lib/utils/toaster";
 
   export let card: CommunityCard;
   export let form: Record<string, string> | undefined = undefined;
   export let displayReactions: boolean = true;
   export let displayDelete: boolean = false;
+  export let displayPublish: boolean = false;
   
   let is_visible = true;
   let loading = false;
@@ -41,6 +42,17 @@
     if (success) is_visible = false;
     loading = false;
 	}
+
+  const handlePublish = async (id: string) => {
+    if (loading) return;
+    loading = true
+    const request = await fetch(`/api/community/${id}/publish`, {
+      method: "POST"
+    });
+    const { success } = await request.json();
+    if (success) card.isPublic = true;
+    loading = false;
+  }
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -74,17 +86,35 @@
     {#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 displayPublish || displayDelete}
+      <div class="absolute bottom-0 left-0 w-full p-4 flex items-center justify-end gap-3">
+        {#if displayPublish && !card.isPublic}
+          <button
+            class="px-4 py-2.5 text-white rounded-full bg-blue-500 backdrop-blur-sm text-sm font-medium transition-all duration-200 hover:bg-blue-700"
+            on:click={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handlePublish(card.id);
+              success("Published successfully");
+            }}
+          >
+            Publish
+          </button>
+        {/if}
+        {#if displayDelete}
+          <button
+            class="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);
+              error("Deleted successfully");
+            }}
+          >
+            <Icon icon="ic:round-delete" class="text-white w-5 h-5" />
+          </button>
+        {/if}
+      </div>
     {/if}
     {#if loading}
       <Loading />

src/lib/type.ts

@@ -11,6 +11,7 @@ export interface CommunityCard {
   model: ModelCard,
   prompt: string,
   createdAt: Date,
+  isPublic: boolean,
   user: UserType,
   image: string,
   comments?: CommentType[],

src/routes/api/@me/generations/+server.ts

@@ -35,6 +35,7 @@ export async function GET({ cookies } : RequestEvent) {
       reactions: true,
       id: true,
       prompt: true,
+      isPublic: true,
       image: true,
       model: true,
     },

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

@@ -17,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} displayDelete={true} />
+			<Card card={card} displayReactions={false} displayDelete={true} displayPublish={true} />
 		{/each}
 		<GoTop />
 	</div>