🛠️ Refactor sidebar link activation, enhance PageCard and PageHeader components, and improve badge styles

src/components/layout/showSidebarLinks.svelte

@@ -54,7 +54,7 @@
   class={cn(
     sidebarItemClasses.base,
     "justify-start space-x-3",
-    String(page.url.pathname) === "/api" && sidebarItemClasses.active,
+    String(page.url.pathname) === "/docs/api" && sidebarItemClasses.active,
   )}
 >
   <Cloud size={16} />

src/components/pageCard.svelte

@@ -4,9 +4,11 @@
 
   interface PageCardProps {
     children: Snippet;
+    containerClass?: string;
+    contentCardClass?: string;
   }
 
-  let { children }: PageCardProps = $props();
+  let { children, contentCardClass, containerClass }: PageCardProps = $props();
 </script>
 
 <div
@@ -14,11 +16,13 @@
     "mt-2.5 overflow-hidden",
     "rounded-md border border-neutral-200 dark:border-neutral-800",
     "bg-white dark:bg-neutral-900/40",
+    containerClass,
   )}
 >
   <div
     class={cn(
       "max-h-[calc(100vh-8.6rem)] min-h-[calc(100vh-8.6rem)] overflow-y-auto",
+      contentCardClass,
     )}
   >
     {@render children?.()}

src/components/pageHeader.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cn } from "@/utils/cn";
+
+  interface PageHeaderProps {
+    children: Snippet;
+    className?: string;
+  }
+
+  let { children, className }: PageHeaderProps = $props();
+</script>
+
+<div
+  class={cn(
+    "sticky top-0 z-50 flex h-12.5 items-center justify-between py-1.5 pr-2 pl-3",
+    "border-b border-neutral-200 dark:border-neutral-800",
+    "bg-white/80 backdrop-blur-sm dark:bg-neutral-900/40",
+    className,
+  )}
+>
+  {@render children?.()}
+</div>

src/components/ui/badge/badge.variants.ts

@@ -17,7 +17,7 @@ const badgeVariants = tv({
       danger:
         "bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-100 dark:border-red-800",
       outline:
-        "bg-transparent border border-neutral-300 text-neutral-700 dark:border-neutral-700 dark:text-neutral-400",
+        "bg-transparent border border-neutral-300 text-neutral-700 dark:border-neutral-800 dark:text-neutral-400",
     },
     size: {
       sm: "text-xs px-2 py-0.5",

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-neutral-100 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 p-1 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 items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all 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-white data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-950 dark:data-[state=active]:text-neutral-50",
+    "inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all 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:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-neutral-50",
     className,
   )}
   {...restProps}

src/routes/+page.svelte

@@ -14,6 +14,7 @@
   import Container from "@/components/container.svelte";
 
   import PageCard from "@/components/pageCard.svelte";
+  import PageHeader from "@/components/pageHeader.svelte";
   import FolderIcon from "@lucide/svelte/icons/folder";
   import FolderSearchIcon from "@lucide/svelte/icons/folder-search";
 
@@ -64,6 +65,10 @@
   });
 </script>
 
+<svelte:head>
+  <title>A beautiful library with SVG logos - Svgl</title>
+</svelte:head>
+
 <Search
   searchValue={searchTerm}
   onSearch={handleSearch}
@@ -71,13 +76,7 @@
 />
 
 <PageCard>
-  <div
+  <PageHeader>
-    class={cn(
-      "sticky top-0 z-50 flex h-12.5 items-center justify-between py-1.5 pr-2 pl-3",
-      "border-b border-neutral-200 dark:border-neutral-800",
-      "bg-white/80 backdrop-blur-sm dark:bg-neutral-900/40",
-    )}
-  >
     <div
       class="flex items-center space-x-2 text-neutral-500 dark:text-neutral-400"
     >
@@ -103,7 +102,7 @@
         searchSvgs();
       }}
     />
-  </div>
+  </PageHeader>
   <Container className="my-6">
     <Grid>
       {#each displaySvgs as svg}

src/routes/api/+page.server.ts

@@ -0,0 +1,5 @@
+import { redirect } from "@sveltejs/kit";
+
+export const load = async () => {
+  return redirect(307, "/docs/api");
+};

src/routes/directory/[category]/+page.svelte

@@ -2,6 +2,10 @@
   import type { iSVG } from "@/types/svg";
   import type { PageProps } from "./$types";
 
+  import { page } from "$app/state";
+  import { goto } from "$app/navigation";
+  import { SvelteURLSearchParams } from "svelte/reactivity";
+
   import { cn } from "@/utils/cn";
   import { searchWithFuse } from "@/utils/searchWithFuse";
 
@@ -12,16 +16,14 @@
   import Container from "@/components/container.svelte";
 
   import PageCard from "@/components/pageCard.svelte";
+  import PageHeader from "@/components/pageHeader.svelte";
   import FolderIcon from "@lucide/svelte/icons/folder-open";
   import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
-
-  import { page } from "$app/state";
-  import { goto } from "$app/navigation";
-  import { SvelteURLSearchParams } from "svelte/reactivity";
   import { buttonVariants } from "@/components/ui/button";
 
   // SSR Data:
   let { data }: PageProps = $props();
+  const directoryData = $derived(data);
 
   // States:
   let searchTerm = $state<string>(data.searchTerm || "");
@@ -62,6 +64,9 @@
     searchSvgs();
   };
 
+  const formatCategory = (category: string) =>
+    category.charAt(0).toUpperCase() + category.slice(1);
+
   $effect(() => {
     filteredSvgs = data.svgs.filter((svg: iSVG) =>
       svg.title.toLowerCase().includes(searchTerm.toLowerCase()),
@@ -69,6 +74,10 @@
   });
 </script>
 
+<svelte:head>
+  <title>{formatCategory(directoryData.category)} SVG logos - Svgl</title>
+</svelte:head>
+
 <Search
   searchValue={searchTerm}
   onSearch={handleSearch}
@@ -76,13 +85,7 @@
 />
 
 <PageCard>
-  <div
+  <PageHeader>
-    class={cn(
-      "sticky top-0 z-50 flex h-12.5 items-center justify-between py-1.5 pr-2 pl-2",
-      "border-b border-neutral-200 dark:border-neutral-800",
-      "bg-white/80 backdrop-blur-sm dark:bg-neutral-900/40",
-    )}
-  >
     <div
       class="flex items-center space-x-2 font-medium text-neutral-950 dark:text-neutral-50"
     >
@@ -100,7 +103,7 @@
       </a>
       <FolderIcon size={18} strokeWidth={1.5} />
       <p>
-        {data.category.slice(0, 1).toUpperCase() + data.category.slice(1)}
+        {formatCategory(directoryData.category)}
       </p>
       <span>-</span>
       {#if !searchTerm}
@@ -114,7 +117,7 @@
         </p>
       {/if}
     </div>
-  </div>
+  </PageHeader>
   <Container className="my-6">
     <Grid>
       {#each filteredSvgs as svg}