From aae0771f189f10d086e07f2efea9c77abd80c157 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Mon, 22 Sep 2025 18:57:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Remove=20lazy=20loading=20from?=
 =?UTF-8?q?=20images=20and=20update=20sidebar=20badge=20classes=20for=20co?=
 =?UTF-8?q?nsistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/extension.svelte              |  1 -
 src/components/layout/sidebarBadgeClasses.ts |  2 +-
 src/components/settings/settingsMenu.svelte  |  1 +
 src/components/svgs/svgCard.svelte           |  4 ----
 src/components/svgs/svgNotFound.svelte       |  7 ++++---
 src/components/ui/sonner/sonner.svelte       | 17 +++++++++++++----
 6 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/extension.svelte b/src/components/extension.svelte
index ec329fb..fba351b 100644
--- a/src/components/extension.svelte
+++ b/src/components/extension.svelte
@@ -26,7 +26,6 @@
       <img
         src={data.image}
         alt={data.name}
-        loading="lazy"
         class="h-8 w-8 rounded-md object-contain"
       />
       <a
diff --git a/src/components/layout/sidebarBadgeClasses.ts b/src/components/layout/sidebarBadgeClasses.ts
index b5bbfed..ee6d95b 100644
--- a/src/components/layout/sidebarBadgeClasses.ts
+++ b/src/components/layout/sidebarBadgeClasses.ts
@@ -2,5 +2,5 @@ import { cn } from "@/utils/cn";
 
 export const sidebarBadgeClasses = cn(
   "animate-in zoom-in-20 fade-in",
-  "dark:bg-dark rounded-lg border border-neutral-200 bg-white px-2 py-0.5 font-mono text-xs font-medium text-neutral-600 shadow-sm dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400",
+  "rounded-lg border border-neutral-300 bg-white px-2 py-0.5 font-mono text-xs font-medium text-neutral-600 shadow-sm dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400 drop-shadow",
 );
diff --git a/src/components/settings/settingsMenu.svelte b/src/components/settings/settingsMenu.svelte
index 062eed0..c61acc9 100644
--- a/src/components/settings/settingsMenu.svelte
+++ b/src/components/settings/settingsMenu.svelte
@@ -21,6 +21,7 @@
 
 <Dialog.Root>
   <Dialog.Trigger
+    title="Settings"
     class={cn(
       buttonVariants({ variant: "ghost", size: "icon" }),
       "hover:bg-neutral-200 dark:hover:bg-neutral-800",
diff --git a/src/components/svgs/svgCard.svelte b/src/components/svgs/svgCard.svelte
index 25d1d09..ce142d9 100644
--- a/src/components/svgs/svgCard.svelte
+++ b/src/components/svgs/svgCard.svelte
@@ -76,7 +76,6 @@
       src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: true })}
       alt={svgInfo.title}
       title={svgInfo.title}
-      loading="lazy"
       width="140"
       height="40"
     />
@@ -85,7 +84,6 @@
       src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: false })}
       alt={svgInfo.title}
       title={svgInfo.title}
-      loading="lazy"
       width="140"
       height="40"
     />
@@ -95,7 +93,6 @@
       src={getSvgImgUrl({ url: svgInfo.route, isDark: true })}
       alt={svgInfo.title}
       title={svgInfo.title}
-      loading="lazy"
       width="140"
       height="40"
     />
@@ -104,7 +101,6 @@
       src={getSvgImgUrl({ url: svgInfo.route, isDark: false })}
       alt={svgInfo.title}
       title={svgInfo.title}
-      loading="lazy"
       width="140"
       height="40"
     />
diff --git a/src/components/svgs/svgNotFound.svelte b/src/components/svgs/svgNotFound.svelte
index 81d3764..6a86d9d 100644
--- a/src/components/svgs/svgNotFound.svelte
+++ b/src/components/svgs/svgNotFound.svelte
@@ -9,12 +9,13 @@
   interface Props {
     svgTitle: string;
     category?: string;
+    searchGlobally?: boolean;
   }
 
-  let { svgTitle, category }: Props = $props();
+  let { svgTitle, category, searchGlobally }: Props = $props();
 </script>
 
-<div class="flex w-full flex-col items-center justify-center space-y-4">
+<div class="flex w-full flex-col items-center justify-center space-y-4 py-6">
   <BoxesIcon size={48} strokeWidth={1} />
   <h2 class="text-xl font-semibold">SVG not found</h2>
   {#if category}
@@ -27,7 +28,7 @@
     </p>
   {/if}
   <div class="flex items-center justify-center space-x-2">
-    {#if category}
+    {#if category || searchGlobally}
       <a
         href={`/?search=${svgTitle}`}
         class={buttonVariants({ variant: "outline" })}
diff --git a/src/components/ui/sonner/sonner.svelte b/src/components/ui/sonner/sonner.svelte
index 3ea4de7..354493f 100644
--- a/src/components/ui/sonner/sonner.svelte
+++ b/src/components/ui/sonner/sonner.svelte
@@ -3,6 +3,8 @@
     Toaster as Sonner,
     type ToasterProps as SonnerProps,
   } from "svelte-sonner";
+
+  import { cn } from "@/utils/cn";
   import { mode } from "mode-watcher";
 
   let { ...restProps }: SonnerProps = $props();
@@ -10,12 +12,19 @@
 
 <Sonner
   theme={mode.current}
-  class="toaster group"
+  position="bottom-center"
   toastOptions={{
+    unstyled: true,
     classes: {
-      toast:
-        "group toast dark:group-[.toaster]:bg-neutral-900 group-[.toaster]:font-sans",
-      description: "group-[.toast]:text-xs font-mono",
+      toast: cn(
+        "w-full max-w-md",
+        "flex items-center gap-3 p-4 rounded-lg shadow-md font-sans",
+        "bg-neutral-50 dark:bg-neutral-900",
+        "border border-neutral-200 dark:border-neutral-800",
+        "text-neutral-900 dark:text-neutral-100",
+      ),
+      title: "font-medium",
+      description: "text-sm text-pretty text-neutral-600 dark:text-neutral-400",
     },
   }}
   {...restProps}