feat(ST-904): split NavBar into 5 tabs with disabled-states and product-switcher dropdown

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

app/(app)/layout.tsx

@@ -16,7 +16,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     redirect('/login')
   }
 
-  const [user, userRoles] = await Promise.all([
+  const [user, userRoles, accessibleProducts] = await Promise.all([
     prisma.user.findUnique({
       where: { id: session.userId },
       select: { username: true, email: true, active_product_id: true },
@@ -25,6 +25,11 @@ export default async function AppLayout({ children }: { children: React.ReactNod
       where: { user_id: session.userId },
       select: { role: true },
     }),
+    prisma.product.findMany({
+      where: { archived: false, ...productAccessFilter(session.userId) },
+      orderBy: { name: 'asc' },
+      select: { id: true, name: true },
+    }),
   ])
   const roles = userRoles.map(r => r.role as string)
 
@@ -34,6 +39,7 @@ export default async function AppLayout({ children }: { children: React.ReactNod
 
   // Resolve active product — clear stale reference if archived or inaccessible
   let activeProduct: { id: string; name: string } | null = null
+  let hasActiveSprint = false
   if (user.active_product_id) {
     const product = await prisma.product.findFirst({
       where: { id: user.active_product_id, archived: false, ...productAccessFilter(session.userId) },
@@ -41,6 +47,11 @@ export default async function AppLayout({ children }: { children: React.ReactNod
     })
     if (product) {
       activeProduct = product
+      const sprint = await prisma.sprint.findFirst({
+        where: { product_id: product.id, status: 'ACTIVE' },
+        select: { id: true },
+      })
+      hasActiveSprint = !!sprint
     } else {
       await prisma.user.update({
         where: { id: session.userId },
@@ -61,6 +72,8 @@ export default async function AppLayout({ children }: { children: React.ReactNod
         username={user.username}
         email={user.email}
         activeProduct={activeProduct}
+        products={accessibleProducts}
+        hasActiveSprint={hasActiveSprint}
       />
       <MinWidthBanner />
       <main id="main-content" className="flex-1 flex flex-col overflow-y-auto min-h-0">

components/shared/nav-bar.tsx

@@ -1,13 +1,23 @@
 'use client'
 
 import Link from 'next/link'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
+import { useTransition } from 'react'
+import { ChevronDown } from 'lucide-react'
+import { toast } from 'sonner'
 import { Badge } from '@/components/ui/badge'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { AppIcon } from '@/components/shared/app-icon'
 import { UserMenu } from '@/components/shared/user-menu'
 import { cn } from '@/lib/utils'
-import { useProductStore } from '@/stores/product-store'
+import { setActiveProductAction } from '@/actions/active-product'
 
 interface NavBarProps {
   isDemo: boolean
@@ -16,23 +26,83 @@ interface NavBarProps {
   username: string
   email: string | null
   activeProduct: { id: string; name: string } | null
+  products: { id: string; name: string }[]
+  hasActiveSprint: boolean
 }
 
-export function NavBar({ isDemo, roles, userId, username, email, activeProduct: _activeProduct }: NavBarProps) {
+export function NavBar({
+  isDemo,
+  roles,
+  userId,
+  username,
+  email,
+  activeProduct,
+  products,
+  hasActiveSprint,
+}: NavBarProps) {
   const pathname = usePathname()
-  const currentProduct = useProductStore(s => s.currentProduct)
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
 
-  const productMatch = pathname.match(/^\/products\/([^/]+)/)
-  const productId = productMatch ? productMatch[1] : null
+  function handleSwitchProduct(productId: string) {
+    startTransition(async () => {
+      const result = await setActiveProductAction(productId)
+      if (result?.error) {
+        toast.error(typeof result.error === 'string' ? result.error : 'Wisselen mislukt')
+      } else {
+        router.push(`/products/${productId}`)
+      }
+    })
+  }
 
-  const sprintHref = productId ? `/products/${productId}/sprint` : null
+  const activeId = activeProduct?.id ?? null
 
-  const navLinks = [
-    { href: '/dashboard', label: 'Producten', active: pathname.startsWith('/dashboard') || (pathname.startsWith('/products') && !pathname.includes('/solo')) },
-    { href: sprintHref, label: 'Sprint', active: pathname.includes('/sprint') },
-    { href: '/solo', label: 'Solo', active: pathname.includes('/solo') },
-    { href: '/todos', label: "Todo's", active: pathname.startsWith('/todos') },
-  ]
+  // Nav link helpers
+  const disabledSpan = (label: string) => (
+    <span
+      key={label}
+      className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-not-allowed select-none"
+    >
+      {label}
+    </span>
+  )
+
+  const navLink = (href: string, label: string, isActive: boolean) => (
+    <Link
+      key={label}
+      href={href}
+      className={cn(
+        'px-3 py-1.5 rounded-md text-sm transition-colors',
+        isActive
+          ? 'bg-primary-container text-primary-container-foreground font-medium'
+          : 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
+      )}
+    >
+      {label}
+    </Link>
+  )
+
+  const sprintNode = () => {
+    if (!activeId) return disabledSpan('Sprint')
+    const href = `/products/${activeId}/sprint`
+    const isActive = pathname.includes('/sprint')
+    if (!hasActiveSprint) {
+      return (
+        <TooltipProvider key="sprint">
+          <Tooltip>
+            <TooltipTrigger
+              className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-not-allowed select-none"
+              aria-disabled="true"
+            >
+              Sprint
+            </TooltipTrigger>
+            <TooltipContent>Geen actieve sprint</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )
+    }
+    return navLink(href, 'Sprint', isActive)
+  }
 
   return (
     <header className="bg-surface-container-low border-b border-border h-14 flex items-center px-4 shrink-0">
@@ -49,50 +119,63 @@ export function NavBar({ isDemo, roles, userId, username, email, activeProduct:
         </Link>
 
         <nav className="flex items-center gap-1 ml-2">
-          {navLinks.map(link =>
-            link.href ? (
-              <Link
-                key={link.label}
-                href={link.href}
-                className={cn(
-                  'px-3 py-1.5 rounded-md text-sm transition-colors',
-                  link.active
-                    ? 'bg-primary-container text-primary-container-foreground font-medium'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
-                )}
-              >
-                {link.label}
-              </Link>
-            ) : (
-              <span
-                key={link.label}
-                className="px-3 py-1.5 rounded-md text-sm text-muted-foreground/40 cursor-default select-none"
-              >
-                {link.label}
-              </span>
-            )
-          )}
+          {navLink('/dashboard', 'Producten', pathname.startsWith('/dashboard'))}
+          {activeId
+            ? navLink(
+                `/products/${activeId}`,
+                'Product Backlog',
+                pathname.startsWith(`/products/${activeId}`) && !pathname.includes('/sprint') && !pathname.includes('/solo')
+              )
+            : disabledSpan('Product Backlog')}
+          {sprintNode()}
+          {activeId
+            ? navLink(
+                `/products/${activeId}/solo`,
+                'Solo',
+                pathname.includes('/solo')
+              )
+            : disabledSpan('Solo')}
+          {navLink('/todos', "Todo's", pathname.startsWith('/todos'))}
         </nav>
       </div>
 
-      {/* Midden: productnaam */}
+      {/* Midden: actief product dropdown */}
       <div className="flex items-center justify-center">
-        {currentProduct && (
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger render={
-                <Link
-                  href={`/products/${currentProduct.id}`}
-                  className="text-sm font-medium text-foreground hover:text-primary transition-colors px-2 truncate max-w-[200px]"
-                />
-              }>
-                {currentProduct.name.length > 20
-                  ? currentProduct.name.slice(0, 20) + '…'
-                  : currentProduct.name}
-              </TooltipTrigger>
-              <TooltipContent>{currentProduct.name}</TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+        {activeProduct ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              disabled={isPending}
+              className="flex items-center gap-1 text-sm font-medium text-foreground hover:text-primary transition-colors px-2 rounded-md hover:bg-surface-container focus:outline-none"
+            >
+              <span className="truncate max-w-[180px]">
+                {activeProduct.name.length > 22
+                  ? activeProduct.name.slice(0, 22) + '…'
+                  : activeProduct.name}
+              </span>
+              <ChevronDown className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center" className="w-56">
+              {products.map(p => (
+                <DropdownMenuItem
+                  key={p.id}
+                  onSelect={() => p.id !== activeProduct.id && handleSwitchProduct(p.id)}
+                  className={cn(
+                    p.id === activeProduct.id && 'bg-primary-container text-primary-container-foreground font-medium'
+                  )}
+                >
+                  <span className="truncate">{p.name}</span>
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <Link href="/dashboard" className="w-full">
+                  Producten beheren →
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : (
+          <span className="text-sm text-muted-foreground/50 select-none">Geen actief product</span>
         )}
       </div>