🛠️ Update GitHub link title, remove unused SvglVersion component, improve search input with name attribute & dialog, popover and tabs improvements

src/components/githubLink.svelte

@@ -26,7 +26,7 @@
 
 <a
   target="_blank"
-  title="GitHub Repository"
+  title="pheralb/svgl Repository"
   href={globals.githubUrl}
   class={cn(
     buttonVariants({ variant: "ghost" }),

src/components/layout/header.svelte

@@ -9,7 +9,6 @@
 
   import { Separator } from "@/components/ui/separator";
   import { buttonVariants } from "@/components/ui/button";
-  import SvglVersion from "@/components/svglVersion.svelte";
   import SendIcon from "@/components/ui/moving-icons/send-icon.svelte";
   import SidebarMobileMenu from "@/components/layout/sidebarMobileMenu.svelte";
   import SettingsMenu from "@/components/settings/settingsMenu.svelte";
@@ -20,16 +19,15 @@
   class="sticky top-0 z-50 w-full bg-neutral-100 px-2 py-3 md:px-4 md:py-4 dark:bg-neutral-950"
 >
   <nav class="flex w-full items-center justify-between">
-    <div class="flex items-center space-x-3">
+    <div class="flex items-center space-x-2">
       <SidebarMobileMenu className="md:hidden" />
       <a
         href="/"
-        class="flex items-center space-x-2.5 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
+        class="flex items-center space-x-2 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
       >
         <Svgl size={28} />
         <h2 class="text-xl font-medium tracking-tight">svgl</h2>
       </a>
-      <SvglVersion className="hidden md:block" />
     </div>
     <div class="flex h-5 items-center space-x-2.5">
       <div class="flex items-center space-x-1.5">

src/components/search.svelte

@@ -60,6 +60,7 @@
     autocomplete="off"
     placeholder={placeholder || "Search..."}
     oninput={onInput}
+    name="search"
     value={searchValue}
     class={cn(
       "overflow-hidden shadow-sm",

src/components/svglVersion.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { PUBLIC_SVGL_VERSION } from "$env/static/public";
-  import Badge from "@/components/ui/badge/badge.svelte";
-
-  interface Props {
-    className?: string;
-  }
-
-  let { className }: Props = $props();
-</script>
-
-{#if PUBLIC_SVGL_VERSION}
-  <Badge variant="outline" class={className}>{PUBLIC_SVGL_VERSION}</Badge>
-{/if}

src/components/svgs/copySvg.svelte

@@ -16,6 +16,7 @@
 
   // UI Components:
   import { toast } from "svelte-sonner";
+  import { Separator } from "@/components/ui/separator";
   import * as Tabs from "@/components/ui/tabs";
   import { Button, buttonVariants } from "@/components/ui/button";
   import * as Popover from "@/components/ui/popover";
@@ -37,6 +38,7 @@
   import React from "@/components/logos/react.svelte";
   import Astro from "@/components/logos/astro.svelte";
   import Svelte from "@/components/logos/svelte.svelte";
+  import Shadcn from "@/components/logos/shadcn.svelte";
   import Angular from "@/components/logos/angular.svelte";
   import WebComponents from "@/components/logos/webComponents.svelte";
 
@@ -389,42 +391,43 @@
       <CopyIcon {size} strokeWidth={iconStroke} />
     {/if}
   </Popover.Trigger>
-  <Popover.Content class="flex w-fit flex-col space-y-2 p-4" sideOffset={2}>
+  <Popover.Content class="flex flex-col space-y-2 p-4" sideOffset={2}>
     <Tabs.Root value="source" class="flex w-full flex-col space-y-1">
-      <Tabs.List class="w-fit border-none bg-transparent">
+      <Tabs.List
+        class="flex h-auto w-auto flex-col space-y-2 space-x-0 border-0 md:h-9 md:flex-row md:space-y-0 md:space-x-1"
+      >
+        <div class="flex items-center space-x-1">
           <Tabs.Trigger value="source">Source</Tabs.Trigger>
-        <Tabs.Trigger value="shadcn">shadcn/ui</Tabs.Trigger>
+          <Tabs.Trigger value="shadcn" title="shadcn/ui">
-        <div
+            <Shadcn size={18} />
-          class="ml-3 flex flex-row space-x-1 border-l border-neutral-200 pl-3 dark:border-neutral-800"
+          </Tabs.Trigger>
-        >
+        </div>
-          <Tabs.Trigger
+        <div class="flex items-center space-x-1">
-            class="px-2.5"
+          <Tabs.Trigger value="web-component" title="Web Component">
-            value="web-component"
-            title="Web Component"
-          >
             <WebComponents size={21} />
           </Tabs.Trigger>
-          <Tabs.Trigger class="px-2.5" value="react" title="React">
+          <Tabs.Trigger value="react" title="React">
             <React size={20} />
           </Tabs.Trigger>
-          <Tabs.Trigger class="px-2.5" value="vue" title="Vue">
+          <Tabs.Trigger value="vue" title="Vue">
             <Vue size={20} />
           </Tabs.Trigger>
-          <Tabs.Trigger class="px-2.5" value="svelte" title="Svelte">
+          <Tabs.Trigger value="svelte" title="Svelte">
             <Svelte size={20} />
           </Tabs.Trigger>
-          <Tabs.Trigger class="px-2.5" value="angular" title="Angular">
+          <Tabs.Trigger value="angular" title="Angular">
             <Angular size={20} />
           </Tabs.Trigger>
           <Tabs.Trigger
             value="astro"
             title="Astro"
-            class="px-2.5 text-black dark:text-white"
+            class="text-black dark:text-white"
           >
             <Astro size={21} />
           </Tabs.Trigger>
         </div>
       </Tabs.List>
+      <Separator class="block md:hidden" />
       <!-- Source -->
       <Tabs.Content value="source">
         <section class="flex flex-col space-y-2">

src/components/svgs/svgCard.svelte

@@ -46,9 +46,9 @@
 
 <div
   class={cn(
-    "group flex flex-col items-center justify-center px-3.5 py-3",
+    "flex flex-col items-center justify-center px-3.5 py-3",
     "rounded-md border border-neutral-200 dark:border-neutral-800",
-    "transition-colors duration-100 hover:bg-neutral-100/80 dark:hover:bg-neutral-800/20",
+    "hover:bg-neutral-100/80 dark:hover:bg-neutral-800/20",
   )}
 >
   <!-- Image Options -->
@@ -72,6 +72,7 @@
   <!-- Image -->
   {#if wordmarkSvg && svgInfo.wordmark !== undefined}
     <img
+      loading="lazy"
       class={cn("hidden dark:block", globalImageStyles)}
       src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: true })}
       alt={svgInfo.title}
@@ -80,6 +81,7 @@
       height="40"
     />
     <img
+      loading="lazy"
       class={cn("block dark:hidden", globalImageStyles)}
       src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: false })}
       alt={svgInfo.title}
@@ -89,6 +91,7 @@
     />
   {:else}
     <img
+      loading="lazy"
       class={cn("hidden dark:block", globalImageStyles)}
       src={getSvgImgUrl({ url: svgInfo.route, isDark: true })}
       alt={svgInfo.title}
@@ -97,6 +100,7 @@
       height="40"
     />
     <img
+      loading="lazy"
       class={cn("block dark:hidden", globalImageStyles)}
       src={getSvgImgUrl({ url: svgInfo.route, isDark: false })}
       alt={svgInfo.title}
@@ -127,7 +131,6 @@
             {c}
           </a>
         {/each}
-
         {#if svgInfo.category.length > maxVisibleCategories}
           <Popover.Root
             open={moreTagsOptions}
@@ -148,11 +151,14 @@
               {/if}
             </Popover.Trigger>
             <Popover.Content class="flex w-auto flex-col space-y-2">
-              <p class="font-medium">More tags:</p>
+              <p class="font-medium">More tags</p>
               {#each svgInfo.category.slice(maxVisibleCategories) as c (c)}
                 <a
                   href={`/directory/${c.toLowerCase()}`}
-                  class={cn(buttonVariants({ variant: "outline" }), "w-full")}
+                  class={cn(
+                    buttonVariants({ variant: "outline" }),
+                    "w-full justify-start",
+                  )}
                 >
                   <TagIcon size={15} strokeWidth={1.5} />
                   <span>{c}</span>

src/components/ui/button/button.variants.ts

@@ -7,7 +7,7 @@ const buttonVariants = tv({
       default:
         "bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/70",
       radial:
-        "bg-radial-[at_52%_-52%] **:[text-shadow:0_1px_0_var(--color-neutral-950)] border-neutral-950 from-neutral-950/70 to-neutral-950/95 text-white inset-shadow-2xs inset-shadow-white/25 border text-sm shadow-md shadow-neutral-950/30 ring-0 transition-[filter] duration-200 hover:brightness-125 active:brightness-95 dark:border-0 dark:from-neutral-950/70 dark:to-neutral-900/90",
+        "bg-radial-[at_52%_-52%] **:[text-shadow:0_1px_0_var(--color-neutral-950)] border-neutral-950 from-neutral-950/70 to-neutral-950/95 text-white inset-shadow-2xs inset-shadow-white/25 border text-sm shadow-md shadow-neutral-950/30 ring-0 transition-[filter] duration-200 hover:brightness-125 active:brightness-95 dark:bg-white dark:text-neutral-50 dark:shadow-none dark:border-0",
       destructive:
         "bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
       outline:

src/components/ui/dialog/dialog-content.svelte

@@ -36,6 +36,7 @@
     {@render children?.()}
     {#if showCloseButton}
       <DialogPrimitive.Close
+        title="Close"
         class={cn(
           "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-hidden disabled:pointer-events-none  [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           "ring-offset-white focus:ring-neutral-400 focus:ring-offset-2 data-[state=open]:bg-white data-[state=open]:text-neutral-500 dark:ring-offset-neutral-300 dark:focus:ring-neutral-700 dark:data-[state=open]:bg-neutral-900 dark:data-[state=open]:text-neutral-400",

src/components/ui/popover/popover-content.svelte

@@ -21,7 +21,7 @@
     {sideOffset}
     {align}
     class={cn(
-      "z-50 w-fit max-w-[480px] origin-(--bits-popover-content-transform-origin) rounded-md border border-neutral-200 bg-white p-4 text-neutral-900 shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
+      "z-50 w-auto max-w-96 origin-(--bits-popover-content-transform-origin) rounded-md border border-neutral-200 bg-white p-4 text-neutral-900 shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 md:max-w-[480px] dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
       className,
     )}
     {...restProps}

src/components/ui/tabs/tabs-list.svelte

@@ -13,7 +13,7 @@
   bind:ref
   data-slot="tabs-list"
   class={cn(
-    "inline-flex h-9 items-center justify-center rounded-md border border-neutral-200 bg-white p-1 text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400",
+    "inline-flex h-9 items-center justify-center rounded-md border border-neutral-200 bg-white text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400",
     className,
   )}
   {...restProps}

src/components/ui/tabs/tabs-trigger.svelte

@@ -13,7 +13,7 @@
   bind:ref
   data-slot="tabs-trigger"
   class={cn(
-    "inline-flex cursor-pointer items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all hover:text-black focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none  disabled:opacity-50 data-[state=active]:bg-neutral-200 data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:hover:text-white dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-neutral-50",
+    "inline-flex cursor-pointer items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all hover:bg-neutral-200 hover:text-black focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50  data-[state=active]:bg-neutral-200 data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-white dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-neutral-50",
     className,
   )}
   {...restProps}