feat(gui-v2): port SidebarNav to TypeScript

Ports crewli-starter's sidebar nav into the SPA as production TS:
V2NavGroup/V2NavItem types, a pure toV2NavGroups adapter wrapped by
useV2Nav(items) (composables zone can't import @/navigation, so the
v1 nav array is passed in — the layout supplies orgNavItems in Task 7),
a pure isNavItemActive helper, and SidebarNav.vue (props-only,
router-driven nav, route-based active state, collapsed mode, main.css
translated to Tailwind inline). 16 unit tests. Icon import is
allowed via the components-foundation bridge (no eslint-disable).

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

apps/app/src/components-v2/layout/SidebarNav.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router'
+import Icon from '@/components/Icon.vue'
+import { isNavItemActive } from '@/components-v2/layout/sidebarNavActive'
+import type { V2NavGroup, V2NavItem } from '@/types/v2/nav'
+
+defineProps<{
+  groups: V2NavGroup[]
+  collapsed: boolean
+}>()
+
+const router = useRouter()
+const route = useRoute()
+
+function navigate(item: V2NavItem): void {
+  router.push(item.to)
+}
+
+function checkActive(item: V2NavItem): boolean {
+  return isNavItemActive(item, route.name)
+}
+</script>
+
+<template>
+  <!--
+    .nav        → flex-1 min-h-0 overflow-y-auto py-3.5 px-2.5 [scrollbar-width:thin]
+    .nav-group  → mt-[18px] (only from the second group onward, via CSS sibling selector →
+    Tailwind cannot express `+ .nav-group { margin-top }` on a class without
+    a group-based trick; using first:mt-0 / not-first:mt-[18px] via the
+    :not(:first-child) pseudo equivalent — `[&:not(:first-child)]:mt-[18px]`)
+    .nav-label  → text-[11px] font-semibold text-surface-500 dark:text-surface-400
+    uppercase tracking-[0.06em] px-2.5 pb-1.5 whitespace-nowrap overflow-hidden
+    .nav-item   → flex items-center gap-3 py-[var(--nav-y,9px)] px-2.5 rounded-[var(--radius,6px)]
+    text-surface-600 dark:text-surface-300 text-[13.5px] font-medium
+    transition-[background,color] duration-150 whitespace-nowrap relative
+    cursor-pointer border-0 bg-transparent w-full text-left min-w-0
+    .nav-item:hover       → hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-0
+    .nav-item.active      → bg-primary-50 dark:bg-primary-950 text-primary-600 dark:text-primary-400 font-semibold
+    .nav-item.active::before → the left accent bar — inexpressible in Tailwind without a plugin
+    (position:absolute left:-10px, custom width:3px, height:18px,
+    background:primary, transform:translateY(-50%)). Using <style scoped>.
+    .nav-item .iconify    → text-[18px] flex-shrink-0  (handled by Icon's own sizing via :size)
+    .count      → ms-auto text-[11px] font-semibold bg-surface-100 dark:bg-surface-800
+    text-surface-500 dark:text-surface-400 px-1.5 py-px rounded-full
+    .nav-item.active .count → bg-primary-600 dark:bg-primary-500 text-white
+  -->
+  <nav class="flex-1 min-h-0 overflow-y-auto py-3.5 px-2.5 [scrollbar-width:thin]">
+    <div
+      v-for="(group, gi) in groups"
+      :key="gi"
+      class="[&:not(:first-child)]:mt-[18px]"
+    >
+      <!-- Group label: hidden in collapsed mode -->
+      <div
+        v-if="group.label && !collapsed"
+        class="text-[11px] font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-[0.06em] px-2.5 pb-1.5 whitespace-nowrap overflow-hidden"
+      >
+        {{ group.label }}
+      </div>
+
+      <button
+        v-for="item in group.items"
+        :key="item.id"
+        class="flex items-center gap-3 py-[9px] rounded-md text-[13.5px] font-medium transition-[background,color] duration-150 whitespace-nowrap relative cursor-pointer border-0 bg-transparent w-full text-left min-w-0"
+        :class="[
+          collapsed ? 'justify-center px-0' : 'px-2.5',
+          checkActive(item)
+            ? 'nav-item-active bg-primary-50 dark:bg-primary-950 text-primary-600 dark:text-primary-400 font-semibold'
+            : 'text-surface-600 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800 hover:text-surface-900 dark:hover:text-surface-0',
+        ]"
+        :title="collapsed ? item.label : undefined"
+        :aria-label="item.label"
+        @click="navigate(item)"
+      >
+        <Icon
+          :name="item.icon"
+          :size="18"
+          class="flex-shrink-0"
+        />
+
+        <!-- Text label: hidden in collapsed mode -->
+        <span
+          v-if="!collapsed"
+          class="overflow-hidden text-ellipsis min-w-0"
+        >
+          {{ item.label }}
+        </span>
+
+        <!-- Count badge: hidden in collapsed mode -->
+        <span
+          v-if="item.count != null && !collapsed"
+          class="ms-auto text-[11px] font-semibold px-1.5 py-px rounded-full"
+          :class="[
+            checkActive(item)
+              ? 'bg-primary-600 dark:bg-primary-500 text-white'
+              : 'bg-surface-100 dark:bg-surface-800 text-surface-500 dark:text-surface-400',
+          ]"
+        >
+          {{ item.count }}
+        </span>
+      </button>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+/*
+ * The active left-accent bar (.nav-item.active::before in crewli-starter main.css).
+ * position:absolute with left:-10px, specific width/height, and transform:translateY(-50%)
+ * cannot be expressed with Tailwind utilities alone — no utility maps to a
+ * pseudo-element with these exact values, and arbitrary-value pseudo variants
+ * like before:content-[''] with left-[-10px] do not compose with transform/height
+ * reliably across Tailwind v3/v4. A <style scoped> pseudo-element is the
+ * correct Tailwind-escape-hatch per RFC (customization order: Tailwind →
+ * pt API → Aura → <style scoped> last resort with comment).
+ */
+.nav-item-active::before {
+  content: "";
+  position: absolute;
+  left: -10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 18px;
+  background: var(--p-primary-500, theme('colors.primary.500', #6366f1));
+  border-radius: 0 3px 3px 0;
+}
+</style>