autosubscribe user store

src/lib/components/UserIsLogged.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-  import { get } from "svelte/store";
 	import { loginModalStore } from "$lib/stores/use-login-modal";
 	import { userStore } from "$lib/stores/use-user";
 
-  let user = get(userStore);
 
   const handleClick = (e: any) => {
     e.preventDefault();
     e.stopPropagation();
-    if (!user) {
+    if (!$userStore) {
       loginModalStore.update(() => true);
     }
   };
@@ -20,7 +18,7 @@
   class="w-full cursor-pointer block"
   on:click={handleClick}
 >
-  <div class:pointer-events-none={!user}>
+  <div class:pointer-events-none={!$userStore}>
     <slot />
   </div>
 </div>

src/lib/components/comments/Comment.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { CommentType } from "$lib/type";
-  import { get } from "svelte/store";
   import { userStore } from "$lib/stores/use-user";
 
   export let comment: CommentType;
@@ -10,8 +9,7 @@
     return `${d.toLocaleDateString()} ${d.toLocaleTimeString()}`;
   }
 
-  const user = get(userStore);
-  const isMe = comment?.user?.sub === user?.sub;
+  const isMe = comment?.user?.sub === $userStore?.sub;
 </script>
 
 <div

src/lib/components/community/reactions/Reactions.svelte

@@ -2,11 +2,9 @@
   import type { ReactionType } from "$lib/type";
   import Add from "$lib/components/community/reactions/Add.svelte";
   import Reaction from "$lib/components/community/reactions/Reaction.svelte";
-  import { get } from 'svelte/store';
   import { userStore } from "$lib/stores/use-user";
   import UserIsLogged from "$lib/components/UserIsLogged.svelte";
 
-  let user = get(userStore);
 
   export let reactions: ReactionType[] = [];
   export let gallery_id: string;
@@ -17,7 +15,7 @@
       return {
         emoji,
         count: reactions.filter((reaction) => reaction.emoji === emoji).length,
-        liked: !!reactions.find((reaction) => reaction.emoji === emoji && reaction.userId === user?.sub)
+        liked: !!reactions.find((reaction) => reaction.emoji === emoji && reaction.userId === $userStore?.sub)
       };
     });
   };
@@ -37,7 +35,7 @@
           if (deleted) {
             reactions = reactions.filter((reaction) => reaction.id !== id);
           } else {
-            reactions = [...reactions, { emoji, userId: user?.sub, galleryId: gallery_id, id }];
+            reactions = [...reactions, { emoji, userId: $userStore?.sub, galleryId: gallery_id, id }];
           }
         }}
       />
@@ -47,7 +45,7 @@
       reactions={groupedReactions}
       {gallery_id}
       onAdd={(emoji, id) => {
-        reactions = [...reactions, { emoji, userId: user?.sub, galleryId: gallery_id, id }];
+        reactions = [...reactions, { emoji, userId: $userStore?.sub, galleryId: gallery_id, id }];
       }}
     />
   </div>

src/lib/components/generate/Response.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
-  import { get } from "svelte/store";
   import { generationStore } from "$lib/stores/use-generation";
-
 	import Button from "$lib/components/Button.svelte";
 	import { userStore } from "$lib/stores/use-user";
 
-  let generation = get(generationStore);
   export let loading_generation: boolean = false;
 
   let loading: boolean = false;
-  let user = get(userStore)
 
   const saveImage = () => {
 		const link = document.createElement('a');
-		link.href = generation?.image as string;
-		link.download = `${generation?.form?.inputs?.slice(0, 20)}.png`;
+		link.href = $generationStore?.image as string;
+		link.download = `${$generationStore?.form?.inputs?.slice(0, 20)}.png`;
 		document.body.appendChild(link);
 		link.click();
 		document.body.removeChild(link);
@@ -23,7 +19,7 @@
   const share = () => {
     if (loading) return;
     loading = true;
-    fetch(`/api/community/${generation?.gallery?.id}/publish`, {
+    fetch(`/api/community/${$generationStore?.gallery?.id}/publish`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
@@ -39,10 +35,6 @@
     })
   }
 
-  generationStore.subscribe((value) => {
-    generation = value;
-  })
-
   // create a ms countup depending on the generation time, to show the user how long it took to generate the image
   let ms = 0;
   let interval: any;
@@ -70,7 +62,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}>
+<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={!$generationStore?.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">
@@ -81,13 +73,13 @@
       </p>
     </div>
   {:else}
-    {#if generation?.image}
-      {#if typeof generation?.image === "string"}
-        <img src={generation?.image} alt="Generation" class="w-full mx-auto object-contain" />
+    {#if $generationStore?.image}
+      {#if typeof $generationStore?.image === "string"}
+        <img src={$generationStore?.image} alt="Generation" class="w-full mx-auto object-contain" />
         <div class="p-8 w-full">
           <div class="w-full flex items-center justify-end gap-4">
             <Button size="lg" theme="light" icon="material-symbols:save" iconPosition="right" onClick={saveImage}>Download</Button>
-            {#if user?.sub}
+            {#if $userStore?.sub}
               <Button
                 size="lg"
                 theme="blue"
@@ -95,9 +87,9 @@
                 iconPosition="right"
                 loading={loading}
                 onClick={share}
-                disabled={loading || generation?.already_saved}
+                disabled={loading || $generationStore?.already_saved}
               >
-                {#if generation?.already_saved}
+                {#if $generationStore?.already_saved}
                   Shared!
                 {:else}
                   Share with community
@@ -105,17 +97,17 @@
               </Button>
             {/if}
           </div>
-          {#if generation?.form}
+          {#if $generationStore?.form}
             <div class="mt-6 grid grid-cols-1 gap-4">
               <div>
                 <p class="text-neutral-400 font-semibold text-xs uppercase">
                   Model selected
                 </p>
                 <div class="flex items-center justify-start gap-4 px-2 py-2.5 rounded-lg cursor-pointer w-full text-left">
-                  <img src={generation?.form?.model.image} alt={generation?.form?.model.title} class="w-14 h-14 rounded-lg object-cover" />
+                  <img src={$generationStore?.form?.model.image} alt={$generationStore?.form?.model.title} class="w-14 h-14 rounded-lg object-cover" />
                   <div>
-                    <p class="text-neutral-200 text-base font-medium">{generation?.form?.model.id}</p>
-                    <p class="text-neutral-400 text-sm">{generation?.form?.model.id}</p>
+                    <p class="text-neutral-200 text-base font-medium">{$generationStore?.form?.model.id}</p>
+                    <p class="text-neutral-400 text-sm">{$generationStore?.form?.model.id}</p>
                   </div>
                 </div>
               </div>
@@ -123,7 +115,7 @@
                 <p class="text-neutral-400 font-semibold text-xs uppercase">
                   Prompt
                 </p>
-                <p class="text-neutral-200 text-base font-medium mt-2">"{generation?.form.inputs}"</p>
+                <p class="text-neutral-200 text-base font-medium mt-2">"{$generationStore?.form.inputs}"</p>
               </div>
             </div>
           {/if}

src/lib/components/models/Card.svelte

@@ -1,6 +1,5 @@
 <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"; 
@@ -10,7 +9,6 @@
 
   export let card: ModelCard;
 
-  let user = get(userStore);
 
   const handleClick = async () => {
     $page.url.searchParams.set('model', card?.id);
@@ -48,7 +46,7 @@
 >
   <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 user?.is_admin}
+    {#if $userStore?.is_admin}
       <div
         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()}

src/lib/components/models/Submit.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-  import { get } from 'svelte/store';
   import { userStore } from "$lib/stores/use-user";
 
 	import Input from "$lib/components/fields/Input.svelte";
 	import Button from "$lib/components/Button.svelte";
 
-  let user = get(userStore);
   export let onClose: () => void;
   let model = {
     id: '',
@@ -41,12 +39,12 @@
   }
 </script>
 <div class="grid grid-cols-1 gap-8">
-  {#if user?.picture}
+  {#if $userStore?.picture}
     <div class="flex items-center justify-start gap-3">
-      <img src={user.picture} alt="User avatar" class="w-8 h-8 rounded-full border border-white inline-block" />
+      <img src={$userStore.picture} alt="User avatar" class="w-8 h-8 rounded-full border border-white inline-block" />
       <div class="w-full text-left text-white">
-        <p class="text-base font-semibold">{user?.name}</p>
-        <p class="text-xs leading-none text-neutral-400">{user?.preferred_username}</p>
+        <p class="text-base font-semibold">{$userStore?.name}</p>
+        <p class="text-xs leading-none text-neutral-400">{$userStore?.preferred_username}</p>
       </div>
     </div>
   {:else}
@@ -70,7 +68,7 @@
       </p>
       <Input
         value={model.id}
-        placeholder="{`${user?.preferred_username ?? 'enzostvs'}/`}"
+        placeholder="{`${$userStore?.preferred_username ?? 'enzostvs'}/`}"
         prefix="huggingface.co/"
         onChange={(value) => model.id = value}
       />

src/lib/components/sidebar/Sidebar.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import cookies from 'js-cookie';
   import Icon from "@iconify/svelte"
-  import { get } from 'svelte/store';
 	import { page } from '$app/stores';
 
   import { userStore, openWindowLogin } from "$lib/stores/use-user";
@@ -12,7 +11,6 @@
 	import { galleryStore } from '$lib/stores/use-gallery';
 
   let isOpen = false;
-  let user = get(userStore);
 
   const handleClick = () => {
     const app = document.getElementById("app");
@@ -58,7 +56,7 @@
             {menu.label}
           </Menu>
         {/each}
-        {#if user?.sub}
+        {#if $userStore?.sub}
           <Menu href="/saved-generations">
             <Icon icon="mdi:heart" class="w-5 h-5" />
             Saved generations
@@ -72,18 +70,18 @@
       </Menu>
     </div>
   </div>
-  {#if user?.picture}
+  {#if $userStore?.picture}
     <footer class="text-white text-center text-base pb-8 px-8 flex items-center justify-between gap-4">
       <div class="flex items-center justify-start gap-4">
-        <img src={user?.picture?.startsWith('http') ? user?.picture : `https://huggingface.co${user?.picture}`} alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white inline-block" />
+        <img src={$userStore?.picture?.startsWith('http') ? $userStore?.picture : `https://huggingface.co${$userStore?.picture}`} alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white inline-block" />
         <div class="w-full text-left">
           <p class="text-lg font-semibold">
-            {user.name}
-            {#if user?.is_admin}
+            {$userStore.name}
+            {#if $userStore?.is_admin}
               <span class="text-yellow-400 bg-yellow-500 bg-opacity-20 rounded-lg px-2 py-1 text-xs font-semibold ml-1">HF Staff</span>
             {/if}
           </p>
-          <p class="text-sm leading-none text-neutral-400">{user.preferred_username}</p>
+          <p class="text-sm leading-none text-neutral-400">{$userStore.preferred_username}</p>
         </div>
       </div>
       <button on:click={logout}>

src/routes/+page.svelte

@@ -15,7 +15,6 @@
 	import Drawer from "$lib/components/models/drawer/Drawer.svelte";
 	import { onMount } from "svelte";
 	import type { ModelCard } from "$lib/type";
-	import { get } from "svelte/store";
 	import { userStore } from "$lib/stores/use-user";
 	import Add from "$lib/components/community/reactions/Add.svelte";
 
@@ -26,7 +25,6 @@
 		models: [],
 		total_items: 0,
 	}
-	let user = get(userStore);
 
 	let form: Record<string, string> = {
 		filter: $page.url.searchParams.get('filter') ?? "hotest",
@@ -93,7 +91,7 @@
 		<Radio
 			options={[
 				...MODELS_FILTER_OPTIONS,
-				...(user?.is_admin ? [
+				...($userStore?.is_admin ? [
 					{
 					label: "Staff only",
 					value: "staff_only",

src/routes/gallery/+page.svelte

@@ -9,12 +9,10 @@
 	import { COMMUNITY_FILTER_OPTIONS } from "$lib/utils/index.js";
 	import GoTop from "$lib/components/GoTop.svelte";
 	import GalleryDrawer from "$lib/components/community/drawer/Drawer.svelte";
-	import { get } from "svelte/store";
 	import { userStore } from "$lib/stores/use-user";
 	import { onMount } from "svelte";
 	import type { CommunityCard } from "$lib/type";
 
-	let user = get(userStore);
 	let data: {
 		cards: CommunityCard[],
 		total_items: number,
@@ -88,7 +86,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 flex flex-wrap gap-5 mt-8 lg:mt-10 justify-center md:justify-start">
 		{#each data.cards as card}
-			<Card card={card} form={form} displayDelete={user?.is_admin} />
+			<Card card={card} form={form} displayDelete={$userStore?.is_admin} />
 		{/each}
 		<InfiniteScroll
 			elementScroll="{elementScroll ?? undefined}"