🎨 Remove lazy loading from images and update sidebar badge classes for consistency

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

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",
 );

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",

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"
     />

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" })}

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:
+      toast: cn(
-        "group toast dark:group-[.toaster]:bg-neutral-900 group-[.toaster]:font-sans",
+        "w-full max-w-md",
-      description: "group-[.toast]:text-xs font-mono",
+        "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}