user is logged in front check

src/lib/components/UserIsLogged.svelte

@@ -0,0 +1,24 @@
+<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) => {
+    if (!user) {
+      loginModalStore.update(() => true);
+    }
+  };
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="w-full cursor-pointer"
+  on:click={handleClick}
+>
+  <div class:pointer-events-none={!user}>
+    <slot />
+  </div>
+</div>

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

@@ -2,6 +2,7 @@
   import { browser } from '$app/environment';
 	import Icon from "@iconify/svelte";
   import { REACTION_EMOJIS } from "$lib/utils";
+	import UserIsLogged from '$lib/components/UserIsLogged.svelte';
 
   export let count: number;
   export let reactions: Array<{ emoji: string, count: number }> = [];
@@ -59,12 +60,14 @@
     class:pointer-events-auto={isOpen}
   >
     {#each AVAILABLE_EMOJIS as emoji}
-      <button
-        class="w-8 h-8 hover:bg-neutral-200 rounded-full text-center flex items-center justify-center"
-        on:click={() => handleReaction(emoji)}
-      >
-        {emoji}
-      </button>
+      <UserIsLogged>
+        <button
+          class="w-8 h-8 hover:bg-neutral-200 rounded-full text-center flex items-center justify-center"
+          on:click={() => handleReaction(emoji)}
+        >
+          {emoji}
+        </button>
+      </UserIsLogged>
     {/each}
   </div>
 </div>

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import UserIsLogged from "$lib/components/UserIsLogged.svelte";
+
   export let emoji: string;
   export let count: number;
   export let gallery_id: string;
@@ -19,10 +21,12 @@
   }
 </script>
 
-<button
-  class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white hover:bg-neutral-200"
-  on:click={() => handleReaction(emoji)}
->
-  <span>{emoji}</span>
-  {count}
-</button>
+<UserIsLogged>
+  <button
+    class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white hover:bg-neutral-200"
+    on:click={() => handleReaction(emoji)}
+  >
+    <span>{emoji}</span>
+    {count}
+  </button>
+</UserIsLogged>

src/lib/stores/use-login-modal.ts

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const loginModalStore = writable<boolean>(false);

src/routes/+layout.svelte

@@ -1,10 +1,20 @@
 <script>
+	import { get } from "svelte/store";
 	import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
 	import "$lib/styles/tailwind.css"
 	import { userStore } from "$lib/stores/use-user";
+	import Dialog from "$lib/components/dialog/Dialog.svelte";
+	import { loginModalStore } from "$lib/stores/use-login-modal";
+	import Icon from "@iconify/svelte";
 
 	export let data;
 	userStore.set(data?.user?.user);
+
+	let open = get(loginModalStore);
+
+	loginModalStore.subscribe((v) => {
+		open = v;
+  });
 </script>
 
 <div class="flex items-start">
@@ -12,4 +22,22 @@
 	<main id="app" class="flex-1 h-screen overflow-y-auto">
 		<slot />
 	</main>
+	<Dialog {open} onClose={() => loginModalStore.set(false)}>
+		<div class="grid grid-cols-1 gap-7 text-center">
+			<Icon icon="fluent-emoji:sparkles" class="w-12 h-12 mx-auto" />
+			<header>
+				<p class="text-white font-semibold text-lg">
+					Login to LoRA Studio
+				</p>
+				<p class="text-neutral-300 text-base mt-1">
+					Login to get a full access and get the most out of LoRA Studio.
+				</p>
+			</header>
+			<main>
+				<a href="/api/auth/login">
+					<img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg.svg" alt="Sign in with Hugging Face" class="mx-auto" />
+				</a>
+			</main>
+		</div>
+	</Dialog>
 </div>

src/routes/+page.svelte

@@ -9,6 +9,7 @@
 	import GoTop from "$lib/components/GoTop.svelte";
 	import Dialog from "$lib/components/dialog/Dialog.svelte";
 	import SubmitModel from "$lib/components/models/Submit.svelte";
+	import UserIsLogged from "$lib/components/UserIsLogged.svelte";
 
 	export let data
 
@@ -60,31 +61,35 @@
 		<Radio options={MODELS_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
 		<div class="items-center justify-end gap-5 hidden lg:flex">
 			<Button href="https://huggingface.co/new/stable-diffusion-lora" target="_blank" icon="ic:round-plus" theme="dark" size="lg">Create</Button>
-			<Button
-				icon="octicon:upload-16"
-				theme="blue"
-				size="lg"
-				onClick={() => submitModelDialog = true}
-			>
-				Upload model
-			</Button>
+			<UserIsLogged>
+				<Button
+					icon="octicon:upload-16"
+					theme="blue"
+					size="lg"
+					onClick={() => submitModelDialog = true}
+				>
+					Upload model
+				</Button>
+			</UserIsLogged>
 		</div>
 		<div class="items-center justify-end gap-3 flex lg:hidden">
 			<Button href="https://huggingface.co/new/stable-diffusion-lora" target="_blank" icon="ic:round-plus" theme="dark" size="md">Create</Button>
-			<Button
-				icon="octicon:upload-16"
-				theme="blue"
-				size="md"
-				onClick={() => submitModelDialog = true}
-			>
-				Upload model
-			</Button>
+			<UserIsLogged>
+				<Button
+					icon="octicon:upload-16"
+					theme="blue"
+					size="md"
+					onClick={() => submitModelDialog = true}
+				>
+					Upload model
+				</Button>
+			</UserIsLogged>
 		</div>
 	</div>
 	<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 2xl: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 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5 gap-5 mt-8 lg:mt-10">
 		{#each data.cards as card}
 			<Card card={card} />
 		{/each}

src/routes/gallery/+page.svelte

@@ -8,6 +8,7 @@
 	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 UserIsLogged from "$lib/components/UserIsLogged.svelte";
 
 	export let data
 
@@ -54,11 +55,15 @@
 	<div class="flex items-center justify-between mt-5">
 		<Radio options={COMMUNITY_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
 		<div class="items-center justify-end gap-5 hidden lg:flex">
-			<Button icon="ic:round-plus" theme="dark" size="lg">Upload own Image</Button>
+			<UserIsLogged>
+				<Button icon="ic:round-plus" theme="dark" size="lg">Upload own Image</Button>
+			</UserIsLogged>
 			<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
 		</div>
 		<div class="items-center justify-end gap-3 flex lg:hidden">
-			<Button icon="ic:round-plus" theme="dark" size="md">Upload own Image</Button>
+			<UserIsLogged>
+				<Button icon="ic:round-plus" theme="dark" size="md">Upload own Image</Button>
+			</UserIsLogged>
 			<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="md">Generate</Button>
 		</div>
 	</div>

tailwind.config.js

@@ -5,7 +5,11 @@ export default {
     fontFamily: {
       sans: ['DM Sans', 'IBM Plex Mono'],
     },
-    extend: {},
+    extend: {
+      screens: {
+        '3xl': '1920px',
+      }
+    },
   },
   plugins: [],
 }