chore: wip

Author: glennmichael123

packages/devtools/src/layouts/app.stx

@@ -16,6 +16,10 @@
     .sidebar.collapsed .nav-label { opacity: 0; height: 0; padding: 0; overflow: hidden; }
     .sidebar.collapsed .nav-item-text { display: none; }
     .main-wrapper.sidebar-collapsed { margin-left: 56px !important; }
+
+    /* Active states */
+    .nav-item.active { background: #6366f1; color: white; }
+    .nav-item.active svg { opacity: 1; }
   </style>
   @stack('styles')
 </head>
@@ -46,20 +50,11 @@
 
     // Active nav highlighting based on current route
     const currentPath = useRoute().path
-    const navItems = document.querySelectorAll('#sidebar .nav-item')
-    navItems.forEach((item) => {
+    document.querySelectorAll('#sidebar .nav-item').forEach((item) => {
       const href = item.getAttribute('href')
       if (!href) return
       const isActive = href === '/' ? currentPath === '/' : currentPath.startsWith(href)
-      if (isActive) {
-        item.classList.remove('text-zinc-400', 'hover:bg-[#1e1e26]', 'hover:text-zinc-50')
-        item.classList.add('bg-indigo-500', 'text-white')
-        const icon = item.querySelector('svg')
-        if (icon) {
-          icon.classList.remove('opacity-70')
-          icon.classList.add('opacity-100')
-        }
-      }
+      if (isActive) item.classList.add('active')
     })
   </script>
   @stack('scripts')

packages/devtools/src/pages/jobs.stx

@@ -5,6 +5,7 @@
 @push('styles')
   <style>
     .search-input::placeholder { color: #71717a; }
+    .filter-btn.active { background: #6366f1; color: white; }
   </style>
 @endpush
 
@@ -20,11 +21,11 @@
     <!-- Toolbar -->
     <div class="flex items-center gap-3 mb-6 flex-wrap">
       <div class="flex gap-1 bg-[#141419] border border-zinc-800 rounded-md p-1" ref="filter-bar">
-        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 bg-indigo-500 !text-white active" data-status="all">All</button>
-        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 bg-transparent" data-status="waiting">Waiting</button>
-        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 bg-transparent" data-status="active">Active</button>
-        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 bg-transparent" data-status="completed">Completed</button>
-        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 bg-transparent" data-status="failed">Failed</button>
+        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 active" data-status="all">All</button>
+        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150" data-status="waiting">Waiting</button>
+        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150" data-status="active">Active</button>
+        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150" data-status="completed">Completed</button>
+        <button class="filter-btn px-3 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150" data-status="failed">Failed</button>
       </div>
       <div class="relative flex-1 max-w-[280px]">
         <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 pointer-events-none" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
@@ -125,13 +126,8 @@
     useEventListener('click', (e: Event) => {
       const target = (e.target as HTMLElement).closest('.filter-btn') as HTMLButtonElement | null
       if (!target) return
-      const filterBar = useRef('filter-bar')
-      filterBar.querySelectorAll('.filter-btn').forEach((b: Element) => {
-        b.classList.remove('active', 'bg-indigo-500', '!text-white')
-        b.classList.add('bg-transparent')
-      })
-      target.classList.add('active', 'bg-indigo-500', '!text-white')
-      target.classList.remove('bg-transparent')
+      useRef('filter-bar').querySelectorAll('.filter-btn').forEach((b: Element) => b.classList.remove('active'))
+      target.classList.add('active')
       currentStatus = target.dataset.status!
       filterJobs()
     }, { target: '[ref="filter-bar"]' })

packages/devtools/src/pages/metrics.stx

@@ -9,6 +9,7 @@
 @push('styles')
   <style>
     .chart-container { position: relative; height: 280px; width: 100%; }
+    .time-range-btn.active { background: #6366f1; color: white; }
   </style>
 @endpush
 
@@ -20,9 +21,9 @@
         <p class="text-sm text-zinc-500 mt-1">Job throughput, latency, and error analysis</p>
       </div>
       <div class="flex gap-1 bg-[#141419] border border-zinc-800 rounded-md p-1" ref="time-range-bar">
-        <button class="time-range-btn px-3.5 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 bg-indigo-500 !text-white active" data-range="24h">24h</button>
-        <button class="time-range-btn px-3.5 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 bg-transparent" data-range="7d">7d</button>
-        <button class="time-range-btn px-3.5 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 bg-transparent" data-range="30d">30d</button>
+        <button class="time-range-btn px-3.5 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150 active" data-range="24h">24h</button>
+        <button class="time-range-btn px-3.5 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150" data-range="7d">7d</button>
+        <button class="time-range-btn px-3.5 py-1.5 border-none rounded text-zinc-400 text-sm font-medium cursor-pointer hover:text-zinc-50 hover:bg-[#1e1e26] transition-all duration-150" data-range="30d">30d</button>
       </div>
     </div>
 
@@ -190,13 +191,8 @@
 
     // Time range button handling via event delegation
     function setActiveButton(activeBtn: HTMLButtonElement): void {
-      const timeRangeBar = useRef('time-range-bar')
-      timeRangeBar.querySelectorAll('.time-range-btn').forEach((b: Element) => {
-        b.classList.remove('active', 'bg-indigo-500', '!text-white')
-        b.classList.add('bg-transparent')
-      })
-      activeBtn.classList.add('active', 'bg-indigo-500', '!text-white')
-      activeBtn.classList.remove('bg-transparent')
+      useRef('time-range-bar').querySelectorAll('.time-range-btn').forEach((b: Element) => b.classList.remove('active'))
+      activeBtn.classList.add('active')
     }
 
     useEventListener('click', (e: Event) => {