janpeter/Scrum4Me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

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

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-26 17:59:36 +02:00
parent 29ed4f2773
commit 991e9c0a4b
1 changed files with 32 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

44
components/shared/nav-bar.tsx
View file

@ -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"