feat: add hover tooltips to roles and product name in navbar

Roles show full names (e.g. Product Owner), product shows full name.

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

components/shared/nav-bar.tsx

@@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation'
 import { logoutAction } from '@/actions/auth'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { AppIcon } from '@/components/shared/app-icon'
 import { cn } from '@/lib/utils'
 import { useProductStore } from '@/stores/product-store'
@@ -15,6 +16,12 @@ const ROLE_LABELS: Record<string, string> = {
   DEVELOPER: 'Dev',
 }
 
+const ROLE_FULL_LABELS: Record<string, string> = {
+  PRODUCT_OWNER: 'Product Owner',
+  SCRUM_MASTER: 'Scrum Master',
+  DEVELOPER: 'Developer',
+}
+
 interface NavBarProps {
   isDemo: boolean
   roles: string[]
@@ -79,20 +86,33 @@ export function NavBar({ isDemo, roles }: NavBarProps) {
       {/* Rechts: rollen + instellingen + uitloggen */}
       <div className="ml-auto flex items-center gap-2">
         {roles.length > 0 && (
-          <span className="text-xs text-muted-foreground px-2">
+          <TooltipProvider>
-            {roles.map(r => ROLE_LABELS[r]).filter(Boolean).join(' · ')}
+            <Tooltip>
-          </span>
+              <TooltipTrigger render={<span className="text-xs text-muted-foreground px-2 cursor-default" />}>
+                {roles.map(r => ROLE_LABELS[r]).filter(Boolean).join(' · ')}
+              </TooltipTrigger>
+              <TooltipContent>
+                {roles.map(r => ROLE_FULL_LABELS[r]).filter(Boolean).join(' · ')}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         )}
         {currentProduct && (
-          <Link
+          <TooltipProvider>
-            href={`/products/${currentProduct.id}`}
+            <Tooltip>
-            className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 truncate max-w-[160px]"
+              <TooltipTrigger render={
-            title={currentProduct.name}
+                <Link
-          >
+                  href={`/products/${currentProduct.id}`}
-            {currentProduct.name.length > 20
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 truncate max-w-[160px]"
-              ? currentProduct.name.slice(0, 20) + '…'
+                />
-              : currentProduct.name}
+              }>
-          </Link>
+                {currentProduct.name.length > 20
+                  ? currentProduct.name.slice(0, 20) + '…'
+                  : currentProduct.name}
+              </TooltipTrigger>
+              <TooltipContent>{currentProduct.name}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         )}
         <Link
           href="/settings"