From 991e9c0a4ba4dc0f2a3c6f64d1cdcd269ace103e Mon Sep 17 00:00:00 2001
From: Madhura68 <janpetervisser2@gmail.com>
Date: Sun, 26 Apr 2026 17:59:36 +0200
Subject: [PATCH] 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 | 44 +++++++++++++++++++++++++----------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/components/shared/nav-bar.tsx b/components/shared/nav-bar.tsx
index b2c9888..5ca2abc 100644
--- a/components/shared/nav-bar.tsx
+++ b/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">
-            {roles.map(r => ROLE_LABELS[r]).filter(Boolean).join(' · ')}
-          </span>
+          <TooltipProvider>
+            <Tooltip>
+              <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
-            href={`/products/${currentProduct.id}`}
-            className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 truncate max-w-[160px]"
-            title={currentProduct.name}
-          >
-            {currentProduct.name.length > 20
-              ? currentProduct.name.slice(0, 20) + '…'
-              : currentProduct.name}
-          </Link>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger render={
+                <Link
+                  href={`/products/${currentProduct.id}`}
+                  className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 truncate max-w-[160px]"
+                />
+              }>
+                {currentProduct.name.length > 20
+                  ? currentProduct.name.slice(0, 20) + '…'
+                  : currentProduct.name}
+              </TooltipTrigger>
+              <TooltipContent>{currentProduct.name}</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         )}
         <Link
           href="/settings"