fix: nav highlight follows current page via Alpine.js client-side state

- Server-side {{if eq $.View .ID}} only works on initial page load
- HTMX swaps #main-content only, nav never re-renders → stale highlight
- Add x-data page state + @after-settle.window listener to track current route
- Nav items use :class binding to apply active style based on Alpine state

app/backend/views/nav.html

@@ -1,5 +1,6 @@
 {{define "nav"}}
-<nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0">
+<nav class="w-[260px] min-h-screen bg-white/70 backdrop-blur-md border-r border-outline-variant/30 flex flex-col shrink-0"
+     x-data="{ page: '{{.View}}' }" @after-settle.window="page = location.pathname.slice(1) || 'hosts'">
   <div class="p-3 border-b border-outline-variant/20">
     <div class="flex items-center gap-2">
       <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm font-bold">K</div>
@@ -10,9 +11,8 @@
     {{range .NavItems}}
     <a href="/{{.ID}}"
        hx-get="/{{.ID}}" hx-target="#main-content" hx-push-url="true"
-       class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm
+       :class="page === '{{.ID}}' ? 'bg-primary/10 text-primary font-medium' : 'text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface'"
-              {{if eq $.View .ID}}bg-primary/10 text-primary font-medium
+       class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-sm">
-              {{else}}text-on-surface-variant hover:bg-surface-container-low hover:text-on-surface{{end}}">
       <span class="w-5 h-5 flex items-center justify-center">{{svg .Icon}}</span>
       <span>{{.Label}}</span>
     </a>