refactor(devtools): replace <a> tags with <StxLink> for router-managed navigation

Converts all static internal links to StxLink components which provide
automatic active class management via the stx router and prefetching on
hover. Removes manual updateActiveLinks() JS from layout — the router
handles it via data-stx-link/data-stx-active-class attributes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: glennmichael123

packages/devtools/src/layouts/app.stx

@@ -18,10 +18,7 @@
     .sidebar.collapsed .nav-item-text { display: none; }
     .sidebar.collapsed ~ .main-wrapper { margin-left: 56px !important; }
 
-    /* Override router inline styles on nav items — sidebar manages its own active state */
-    #sidebar .nav-item { background: unset !important; color: unset !important; font-weight: unset !important; }
-
-    /* Active state */
+    /* Active state — managed by StxLink + router via data-stx-active-class="active" */
     #sidebar .nav-item.active { background: #6366f1 !important; color: white !important; }
     #sidebar .nav-item.active svg { opacity: 1; }
   </style>
@@ -42,41 +39,10 @@
 
   <script client>
     const collapsed = useLocalStorage<boolean>('sidebar-collapsed', false)
-    const currentPath = state<string>(location.pathname)
 
     function toggle(): void {
       collapsed.set(!collapsed())
     }
-
-    function isActive(href: string): boolean {
-      const cur: string = currentPath()
-      if (href === '/') return cur === '/'
-      return cur === href || cur.startsWith(href + '/')
-    }
-
-    function updateActiveLinks(): void {
-      const cur: string = currentPath()
-      const links: HTMLElement | null = useRef<HTMLElement>('sidebar-nav').current
-      if (!links) return
-      links.querySelectorAll('.nav-item').forEach((a: Element) => {
-        const href: string = a.getAttribute('href') || ''
-        const active: boolean = href === '/' ? cur === '/' : (cur === href || cur.startsWith(href + '/'))
-        if (active) a.classList.add('active')
-        else a.classList.remove('active')
-      })
-    }
-
-    onMount((): void => { updateActiveLinks() })
-
-    useEventListener('stx:navigate', (): void => {
-      currentPath.set(location.pathname)
-      updateActiveLinks()
-    })
-
-    useEventListener('popstate', (): void => {
-      currentPath.set(location.pathname)
-      updateActiveLinks()
-    })
   </script>
 
 </body>

packages/devtools/src/pages/batch-details.stx

@@ -14,10 +14,10 @@ Batch Details — bun-queue
 
 @section('content')
   <div class="max-w-[1200px] mx-auto p-6">
-    <a href="/batches" class="inline-flex items-center gap-1.5 text-zinc-500 no-underline text-[0.8125rem] mb-4 transition-colors duration-150 hover:text-indigo-500">
+    <StxLink to="/batches" class="inline-flex items-center gap-1.5 text-zinc-500 no-underline text-[0.8125rem] mb-4 transition-colors duration-150 hover:text-indigo-500">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
       Back to Batches
-    </a>
+    </StxLink>
 
     <div class="flex items-center justify-between mb-6">
       <div>

packages/devtools/src/pages/group-details.stx

@@ -6,10 +6,10 @@ Group Details — bun-queue
 
 @section('content')
   <div class="max-w-[1200px] mx-auto p-6">
-    <a href="/groups" class="inline-flex items-center gap-1.5 text-zinc-500 no-underline text-[0.8125rem] mb-4 transition-colors duration-150 hover:text-indigo-500">
+    <StxLink to="/groups" class="inline-flex items-center gap-1.5 text-zinc-500 no-underline text-[0.8125rem] mb-4 transition-colors duration-150 hover:text-indigo-500">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
       Back to Groups
-    </a>
+    </StxLink>
 
     <div class="flex items-center justify-between mb-6">
       <div>

packages/devtools/src/pages/index.stx

@@ -85,7 +85,7 @@ bun-queue Dashboard
       <div class="bg-[#141419] border border-zinc-800 rounded-lg p-6">
         <div class="flex items-center justify-between mb-4">
           <span class="text-sm font-semibold text-zinc-50">Recent Jobs</span>
-          <a href="/jobs" class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium border border-zinc-800 bg-[#1e1e26] text-zinc-400 no-underline cursor-pointer hover:border-indigo-500 hover:text-zinc-50 transition-all duration-150">View All</a>
+          <StxLink to="/jobs" class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium border border-zinc-800 bg-[#1e1e26] text-zinc-400 no-underline cursor-pointer hover:border-indigo-500 hover:text-zinc-50 transition-all duration-150">View All</StxLink>
         </div>
 
         <!-- Loading state -->
@@ -123,7 +123,7 @@ bun-queue Dashboard
       <div class="bg-[#141419] border border-zinc-800 rounded-lg p-6">
         <div class="flex items-center justify-between mb-4">
           <span class="text-sm font-semibold text-zinc-50">Queue List</span>
-          <a href="/queues" class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium border border-zinc-800 bg-[#1e1e26] text-zinc-400 no-underline cursor-pointer hover:border-indigo-500 hover:text-zinc-50 transition-all duration-150">View All</a>
+          <StxLink to="/queues" class="inline-flex items-center px-3 py-1.5 rounded-md text-sm font-medium border border-zinc-800 bg-[#1e1e26] text-zinc-400 no-underline cursor-pointer hover:border-indigo-500 hover:text-zinc-50 transition-all duration-150">View All</StxLink>
         </div>
 
         <!-- Loading state -->

packages/devtools/src/pages/job-details.stx

@@ -6,10 +6,10 @@ Job Details — bun-queue
 
 @section('content')
   <div class="max-w-[1200px] mx-auto p-6">
-    <a href="/jobs" class="inline-flex items-center gap-1.5 text-zinc-500 no-underline text-[0.8125rem] mb-4 transition-colors duration-150 hover:text-indigo-500">
+    <StxLink to="/jobs" class="inline-flex items-center gap-1.5 text-zinc-500 no-underline text-[0.8125rem] mb-4 transition-colors duration-150 hover:text-indigo-500">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
       Back to Jobs
-    </a>
+    </StxLink>
 
     <div class="flex items-center justify-between mb-6">
       <div>

packages/devtools/src/pages/queue-details.stx

@@ -16,10 +16,10 @@ Queue Details — bun-queue
 
 @section('content')
   <div class="max-w-[1200px] mx-auto p-6">
-    <a href="/queues" class="inline-flex items-center gap-1.5 text-zinc-500 no-underline text-[0.8125rem] mb-4 transition-colors duration-150 hover:text-indigo-500">
+    <StxLink to="/queues" class="inline-flex items-center gap-1.5 text-zinc-500 no-underline text-[0.8125rem] mb-4 transition-colors duration-150 hover:text-indigo-500">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
       Back to Queues
-    </a>
+    </StxLink>
 
     <div class="flex items-center justify-between mb-6">
       <div>

packages/devtools/src/partials/sidebar.stx

@@ -1,40 +1,40 @@
 <!-- Sidebar -->
 <aside class="sidebar fixed top-0 left-0 bottom-0 flex flex-col z-[100] overflow-hidden bg-[#141419] border-r border-zinc-800 transition-all duration-200 ease-in-out" :class="{ collapsed: collapsed() }" id="sidebar" ref="sidebar" style="width: 240px;">
   <div class="flex items-center justify-between p-4 border-b border-zinc-800 min-h-[56px]">
-    <a href="/" class="flex items-center gap-2.5 no-underline text-zinc-50 font-bold text-[0.9375rem] whitespace-nowrap overflow-hidden">
+    <StxLink to="/" class="flex items-center gap-2.5 no-underline text-zinc-50 font-bold text-[0.9375rem] whitespace-nowrap overflow-hidden">
       <div class="w-6 h-6 bg-indigo-500 rounded-md flex items-center justify-center shrink-0 text-xs text-white font-extrabold">Q</div>
       <span class="sidebar-brand-text">bun-queue</span>
-    </a>
+    </StxLink>
     <button class="sidebar-toggle-btn bg-transparent border-none text-zinc-500 cursor-pointer p-1 rounded flex items-center justify-center transition-colors duration-150 shrink-0 hover:text-zinc-50" @click="toggle()" ref="sidebar-toggle" title="Toggle sidebar">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 4h10M3 8h10M3 12h10"/></svg>
     </button>
   </div>
   <nav class="flex-1 p-2 overflow-y-auto overflow-x-hidden" id="sidebar-nav" ref="sidebar-nav">
     <div class="nav-label text-[0.625rem] font-semibold text-zinc-500 uppercase tracking-wider px-3 pt-3 pb-1.5 whitespace-nowrap overflow-hidden">Navigation</div>
-    <a href="/" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" data-stx-prefetch>
+    <StxLink to="/" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" activeClass="active" prefetch>
       <svg class="w-[18px] h-[18px] shrink-0 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
       <span class="nav-item-text">Dashboard</span>
-    </a>
-    <a href="/monitoring" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" data-stx-prefetch>
+    </StxLink>
+    <StxLink to="/monitoring" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" activeClass="active" prefetch>
       <svg class="w-[18px] h-[18px] shrink-0 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
       <span class="nav-item-text">Monitoring</span>
-    </a>
-    <a href="/metrics" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" data-stx-prefetch>
+    </StxLink>
+    <StxLink to="/metrics" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" activeClass="active" prefetch>
       <svg class="w-[18px] h-[18px] shrink-0 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
       <span class="nav-item-text">Metrics</span>
-    </a>
+    </StxLink>
     <div class="nav-label text-[0.625rem] font-semibold text-zinc-500 uppercase tracking-wider px-3 pt-3 pb-1.5 whitespace-nowrap overflow-hidden">Management</div>
-    <a href="/groups" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" data-stx-prefetch>
+    <StxLink to="/groups" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" activeClass="active" prefetch>
       <svg class="w-[18px] h-[18px] shrink-0 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
       <span class="nav-item-text">Groups</span>
-    </a>
-    <a href="/batches" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" data-stx-prefetch>
+    </StxLink>
+    <StxLink to="/batches" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" activeClass="active" prefetch>
       <svg class="w-[18px] h-[18px] shrink-0 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 3H8l-2 4h12l-2-4z"/></svg>
       <span class="nav-item-text">Batches</span>
-    </a>
-    <a href="/jobs" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" data-stx-prefetch>
+    </StxLink>
+    <StxLink to="/jobs" class="nav-item flex items-center gap-3 px-3 py-2 rounded-md text-zinc-400 text-sm font-medium no-underline whitespace-nowrap overflow-hidden mb-px hover:bg-[#1e1e26] hover:text-zinc-50 transition-all duration-150" activeClass="active" prefetch>
       <svg class="w-[18px] h-[18px] shrink-0 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
       <span class="nav-item-text">Jobs</span>
-    </a>
+    </StxLink>
   </nav>
 </aside>