AI pass on redesign

src/lib/components/SecondaryNavItem.svelte

@@ -36,11 +36,15 @@
 
   const active = $derived($page.url.pathname === href)
   const wrapperClass = $derived(
-    cx(restProps.class, "relative flex shrink-0 items-center gap-3 text-left transition-all", {
-      "hover:bg-base-100 hover:text-base-content": true,
-      "text-base-content bg-base-100": active,
-      "tooltip tooltip-right": title,
-    }),
+    cx(
+      restProps.class,
+      "group relative flex shrink-0 items-center gap-3 rounded-xl text-left transition-all",
+      {
+        "hover:bg-base-100": true,
+        "bg-primary/15 text-primary font-semibold": active,
+        "tooltip tooltip-right": title,
+      },
+    ),
   )
 </script>
 
@@ -51,16 +55,19 @@
     data-tip={title}
     data-sveltekit-replacestate={replaceState}
     class={wrapperClass}>
+    {#if active}
+      <div class="bg-primary absolute top-1/2 left-0 h-5 w-1 -translate-y-1/2 rounded-r-full"></div>
+    {/if}
     {@render children?.()}
     {#if notification}
-      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
+      <div class="bg-secondary absolute top-5 right-[1.15rem] h-2 w-2 rounded-full" transition:fade>
       </div>
     {/if}
   </a>
 {:else}
   <button {...restProps} data-tip={title} class={wrapperClass}>
     {#if notification}
-      <div class="absolute right-[1.15rem] top-5 h-2 w-2 rounded-full bg-primary" transition:fade>
+      <div class="bg-secondary absolute top-5 right-[1.15rem] h-2 w-2 rounded-full" transition:fade>
       </div>
     {/if}
     {@render children?.()}