🛠️ 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}