my generations page added

src/lib/components/generate/Response.svelte

@@ -69,7 +69,7 @@
 
 </script>
 
-<div class=" w-full border-t xl:border-t-0 xl:border-l border-neutral-800 h-full col-span-5 xl:col-span-2" class:!border-black={!generation?.image || loading_generation} class:animate-pulse={loading_generation}>
+<div class=" w-full border-t xl:border-t-0 xl:border-l border-neutral-800 h-full col-span-5 xl:col-span-2" class:!border-black={!generation?.image || loading_generation}>
   {#if loading_generation}
     <div class="w-full h-full flex items-center justify-center flex-col gap-3 bg-neutral-950 relative">
       <p class="text-neutral-100 text-xl font-semibold">

src/lib/components/sidebar/Sidebar.svelte

@@ -5,7 +5,6 @@
 
   import { userStore, openWindowLogin } from "$lib/stores/use-user";
 	import { SIDEBAR_MENUS } from "$lib/utils";
-  import HFLogo from "$lib/assets/hf-logo.svg";
 
 	import Menu from "./Menu.svelte";
 
@@ -41,8 +40,13 @@
             <Icon icon={menu.icon} class="w-5 h-5" />
             {menu.label}
           </Menu>
-          
         {/each}
+        {#if user?.sub}
+          <Menu href="/saved-generations">
+            <Icon icon="mdi:heart" class="w-5 h-5" />
+            Saved generations
+          </Menu>
+        {/if}
       </ul>
       <hr class="border-neutral-800/50 mt-10 mx-4">
       <Menu href="https://huggingface.co/spaces/enzostvs/loras-studio/discussions/1">

src/lib/utils/index.ts

@@ -12,7 +12,7 @@ export const COMMUNITY_FILTER_OPTIONS = [
     value: "new",
     icon: "lucide:zap",
     iconColor: "text-yellow-500"
-  },
+  }
 ];
 
 export const MODELS_FILTER_OPTIONS = [

src/routes/+page.svelte

@@ -91,7 +91,7 @@
 	<div class="mt-5 max-w-sm">
 		<Input value={form.search} placeholder="Search a model" onChange={handleChangeSearch} />
 	</div>
-	<div class="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} />
 		{/each}

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

@@ -0,0 +1,53 @@
+import { json, type RequestEvent } from '@sveltejs/kit';
+import prisma from '$lib/prisma';
+
+import { tokenIsAvailable } from '$lib/utils';
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function GET({ cookies } : RequestEvent) {
+  const token = cookies.get('hf_access_token')
+  if (!token) {
+    return json({
+      error: {
+        token: "You must be logged"
+      }
+    }, { status: 401 })
+  }
+
+  const user = await tokenIsAvailable(token)
+  if (!user) {
+    return json({
+      error: {
+        token: "Invalid token"
+      }
+    }, { status: 401 })
+  }
+
+  const cards = await prisma.gallery.findMany({
+    where: {
+      hf_user_id: user.sub
+    },
+    orderBy: {
+      createdAt: 'desc'
+    },
+    select: {
+      reactions: true,
+      id: true,
+      prompt: true,
+      image: true,
+      model: true,
+    },
+  })
+
+  const total_reposId = await prisma.gallery.count({
+    where: {
+      hf_user_id: user.sub
+    },
+  })
+
+  return json({
+    cards,
+    total_items: total_reposId
+  })
+}

src/routes/api/generate/share/+server.ts

@@ -4,9 +4,18 @@ import { UploaderDataset } from '$lib/utils/uploader';
 import { json, type RequestEvent } from '@sveltejs/kit';
 
 import prisma from '$lib/prisma';
+import { tokenIsAvailable } from '$lib/utils';
 
-export async function POST({ request } : RequestEvent) {
+export async function POST({ request, cookies } : RequestEvent) {
   const { generation, image } = await request.json()
+  const token = cookies.get('hf_access_token')
+
+  let hf_user_id = null;
+
+  if (token) {
+    const user = await tokenIsAvailable(token)
+    if (user) hf_user_id = user?.sub;
+  }
 
   if (!generation?.model?.id) {
     return json({
@@ -50,6 +59,7 @@ export async function POST({ request } : RequestEvent) {
     data: {
       image: success.path as string,
       prompt: generation.inputs,
+      hf_user_id,
       model: {
         connect: {
           id: generation.model.id

src/routes/gallery/+page.svelte

@@ -70,6 +70,7 @@
 	<div class="mt-5 max-w-sm">
 		<Input value={form.search} placeholder="Search an image" onChange={handleChangeSearch} />
 	</div>
+	<!-- 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} />

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

@@ -0,0 +1,27 @@
+<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;
+</script>
+
+<svelte:head>
+	<title>My saved generations</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<main class="px-6 py-10 lg:px-10 lg:py-12">
+	<h1 class="text-white font-semibold text-2xl">
+		Saved generations ({data.total_items})
+	</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} />
+		{/each}
+		<GoTop />
+	</div>
+</main>

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

@@ -0,0 +1,10 @@
+export async function load({ fetch }) {
+  const response = await fetch("/api/@me/generations", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+  const data = await response.json()
+  return data
+}