Fix/small bugs and opt

app/package.json

@@ -14,17 +14,19 @@
 	"devDependencies": {
 		"@fontsource-variable/inter": "^5.2.8",
 		"@internationalized/date": "^3.12.1",
-		"@lucide/svelte": "^1.17.0",
+		"@lucide/svelte": "^1.23.0",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.57.0",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
 		"@tailwindcss/vite": "^4.2.2",
 		"bits-ui": "^2.18.0",
 		"clsx": "^2.1.1",
+		"mode-watcher": "^1.1.0",
 		"shadcn-svelte": "^1.2.7",
 		"svelte": "^5.55.2",
 		"svelte-check": "^4.4.6",
+		"svelte-sonner": "^1.1.1",
 		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2",
 		"tailwindcss": "^4.2.2",

app/src/lib/auth/right-panel.svelte

@@ -7,12 +7,12 @@
         class="relative w-full rounded-3xl overflow-hidden flex flex-col justify-between p-10"
     >
         <img
-            src="/gradients/Gradient-dark.svg"
+            src="/gradients/Gradient-dark.webp"
             alt=""
             class="absolute inset-0 w-full h-full object-cover dark:hidden"
         />
         <img
-            src="/gradients/Gradient-light.svg"
+            src="/gradients/Gradient-light.webp"
             alt=""
             class="absolute inset-0 w-full h-full object-cover hidden dark:block"
         />

app/src/lib/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

app/src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import CircleCheckIcon from '@lucide/svelte/icons/circle-check';
+	import OctagonXIcon from '@lucide/svelte/icons/octagon-x';
+	import InfoIcon from '@lucide/svelte/icons/info';
+	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	position="top-center"
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border); --error-bg: var(--color-popover); --error-text: var(--color-destructive); --error-border: var(--color-destructive);"
+	{...restProps}
+>
+	{#snippet loadingIcon()}
+		<Loader2Icon class="size-4 animate-spin" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="size-4 text-destructive" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-4" />
+	{/snippet}
+</Sonner>

app/src/lib/components/ui/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from "./spinner.svelte";

app/src/lib/components/ui/spinner/spinner.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import Loader2Icon from '@lucide/svelte/icons/loader-2';
+	import type { SVGAttributes } from "svelte/elements";
+
+	let {
+		class: className,
+		role = "status",
+		// we add name, color, and stroke for compatibility with different icon libraries props
+		name,
+		color,
+		stroke,
+		"aria-label": ariaLabel = "Loading",
+		...restProps
+	}: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Loader2Icon {role} name={name === null ? undefined : name} color={color === null ? undefined : color} stroke={stroke === null ? undefined : stroke} aria-label={ariaLabel} class={cn("size-4 animate-spin", className)} {...restProps} />

app/src/routes/(app)/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+    import * as Sidebar from "$lib/components/ui/sidebar/index.js";
 </script>
 
 <header class="flex h-16 shrink-0 items-center gap-2 px-4 border-b">
-	<Sidebar.Trigger class="-ms-1" />
+    <Sidebar.Trigger class="-ms-1" />
 </header>
 
 <div class="flex flex-1 flex-col gap-4 p-6">
-	<h1 class="text-2xl font-bold">Dashboard</h1>
+    <h1 class="text-2xl font-bold">Dashboard</h1>
 </div>

app/src/routes/(auth)/login/+page.svelte

@@ -2,35 +2,39 @@
     import { Button } from "$lib/components/ui/button/index.js";
     import { Input } from "$lib/components/ui/input/index.js";
     import { Label } from "$lib/components/ui/label/index.js";
-    import { Lock, User } from "@lucide/svelte";
+    import { Lock, User, CircleCheck } from "@lucide/svelte";
     import { goto } from "$app/navigation";
     import { login, TwoFactorRequiredError } from "$lib/auth/api";
     import { auth } from "$lib/auth/store.svelte";
+    import Spinner from "$lib/components/ui/spinner/spinner.svelte";
+    import { toast } from "svelte-sonner";
+
+    type Status = "idle" | "loading" | "success";
 
     let username = $state("");
     let password = $state("");
-    let loading = $state(false);
-    let error = $state<string | null>(null);
+    let status = $state<Status>("idle");
 
     async function handleSubmit() {
-        error = null;
-        loading = true;
+        status = "loading";
         try {
             const response = await login(username, password);
             auth.setSession(response);
-            if (response.force_password_change) {
-                goto("/pw_change");
-            } else {
-                goto("/");
-            }
+            status = "success";
+            const target = response.force_password_change ? "/pw_change" : "/";
+            setTimeout(() => goto(target), 600);
         } catch (err) {
+            status = "idle";
             if (err instanceof TwoFactorRequiredError) {
-                goto(`/otp?username=${encodeURIComponent(err.username)}&password=${encodeURIComponent(err.password)}`);
+                goto(
+                    `/otp?username=${encodeURIComponent(err.username)}&password=${encodeURIComponent(err.password)}`,
+                );
             } else {
-                error = "Invalid credentials";
+                toast.error("Invalid credentials", {
+                    description:
+                        "Check your username and password and try again",
+                });
             }
-        } finally {
-            loading = false;
         }
     }
 </script>
@@ -42,11 +46,19 @@
 />
 <h1 class="text-2xl font-light mb-10">Sign in</h1>
 
-<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} class="flex flex-col">
+<form
+    onsubmit={(e) => {
+        e.preventDefault();
+        handleSubmit();
+    }}
+    class="flex flex-col"
+>
     <div class="flex flex-col gap-1 mb-4">
         <Label for="username" class="text-xs font-bold mb-1">Username</Label>
         <div class="relative">
-            <User class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground size-4" />
+            <User
+                class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground size-4"
+            />
             <Input
                 id="username"
                 type="text"
@@ -61,7 +73,9 @@
     <div class="flex flex-col gap-1 mb-6">
         <Label for="password" class="text-xs font-bold mb-1">Password</Label>
         <div class="relative">
-            <Lock class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+            <Lock
+                class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground"
+            />
             <Input
                 id="password"
                 type="password"
@@ -73,11 +87,17 @@
         </div>
     </div>
 
-    {#if error}
-        <div class="mb-4 text-sm text-destructive">{error}</div>
-    {/if}
-
-    <Button class="w-full" type="submit" disabled={loading || !username || !password}>
-        {loading ? "Signing in..." : "Sign in"}
+    <Button
+        class="w-full"
+        type="submit"
+        disabled={status !== "idle" || !username || !password}
+    >
+        {#if status === "loading"}
+            <Spinner />
+        {:else if status === "success"}
+            <CircleCheck class="size-4 animate-in zoom-in-50 duration-300" />
+        {:else}
+            Sign in
+        {/if}
     </Button>
 </form>