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

feat(ST-507): replace navbar roles/settings/logout with avatar user menu

Browse source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-26 19:31:21 +02:00
parent 8a5076a5ed
commit e887f796c7
3 changed files with 141 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,32 +2,22 @@
import Link from 'next/link'
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 { UserMenu } from '@/components/shared/user-menu'
import { cn } from '@/lib/utils'
import { useProductStore } from '@/stores/product-store'
const ROLE_LABELS: Record<string, string> = {
PRODUCT_OWNER: 'PO',
SCRUM_MASTER: 'SM',
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[]
userId: string
username: string
bio: string | null
}
export function NavBar({ isDemo, roles }: NavBarProps) {
export function NavBar({ isDemo, roles, userId, username, bio }: NavBarProps) {
const pathname = usePathname()
const currentProduct = useProductStore(s => s.currentProduct)
@ -105,36 +95,9 @@ export function NavBar({ isDemo, roles }: NavBarProps) {
)}
</div>
{/* Rechts: rollen + instellingen + uitloggen */}
{/* Rechts: account-menu */}
<div className="flex items-center gap-2 flex-1 justify-end">
{roles.length > 0 && (
<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>
)}
<Link
href="/settings"
className={cn(
'px-3 py-1.5 rounded-md text-sm transition-colors',
pathname.startsWith('/settings')
? 'bg-primary-container text-primary-container-foreground font-medium'
: 'text-muted-foreground hover:text-foreground hover:bg-surface-container'
)}
>
Instellingen
</Link>
<form action={logoutAction}>
<Button variant="ghost" size="sm" type="submit" className="text-muted-foreground hover:text-foreground">
Uitloggen
</Button>
</form>
<UserMenu userId={userId} username={username} bio={bio} roles={roles} />
</div>
</header>
)

113
components/shared/user-menu.tsx Normal file
View file

@ -0,0 +1,113 @@
'use client'
import Link from 'next/link'
import { Settings, Sun, Globe, LogOut } from 'lucide-react'
import { logoutAction } from '@/actions/auth'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
const ROLE_LABELS: Record<string, string> = {
PRODUCT_OWNER: 'Product Owner',
SCRUM_MASTER: 'Scrum Master',
DEVELOPER: 'Developer',
}
interface UserMenuProps {
userId: string
username: string
bio: string | null
roles: string[]
}
export function UserMenu({ userId, username, bio, roles }: UserMenuProps) {
const initials = username.slice(0, 2).toUpperCase()
const roleLabels = roles.map((r) => ROLE_LABELS[r]).filter(Boolean)
const subtitle = bio?.trim() ? bio.trim() : 'Lokaal account'
return (
<DropdownMenu>
<DropdownMenuTrigger
className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
aria-label="Accountmenu openen"
>
<Avatar size="default">
<AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
<AvatarFallback className="bg-primary-container text-primary-container-foreground">
{initials}
</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" sideOffset={8} className="w-72">
<div className="flex items-center gap-3 px-2 py-2">
<Avatar size="lg">
<AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
<AvatarFallback className="bg-primary-container text-primary-container-foreground">
{initials}
</AvatarFallback>
</Avatar>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium text-foreground truncate">{username}</div>
<div className="text-xs text-muted-foreground truncate">{subtitle}</div>
</div>
</div>
{roleLabels.length > 0 && (
<>
<DropdownMenuSeparator />
<DropdownMenuLabel className="text-xs uppercase tracking-wide text-muted-foreground">
Rollen
</DropdownMenuLabel>
<div className="px-2 pb-2 text-sm text-foreground">
{roleLabels.join(', ')}
</div>
</>
)}
<DropdownMenuSeparator />
<DropdownMenuItem render={<Link href="/settings" />}>
<Settings className="mr-2 h-4 w-4" />
<span>Instellingen</span>
</DropdownMenuItem>
<DropdownMenuItem disabled className="opacity-60">
<Sun className="mr-2 h-4 w-4" />
<span>Thema: licht</span>
<Badge className="ml-auto bg-muted text-muted-foreground text-[10px] px-1.5 py-0">
Binnenkort
</Badge>
</DropdownMenuItem>
<DropdownMenuItem disabled className="opacity-60">
<Globe className="mr-2 h-4 w-4" />
<span>Taal: Nederlands</span>
<Badge className="ml-auto bg-muted text-muted-foreground text-[10px] px-1.5 py-0">
Binnenkort
</Badge>
</DropdownMenuItem>
<DropdownMenuSeparator />
<form action={logoutAction}>
<DropdownMenuItem
render={
<button type="submit" className="w-full text-left cursor-pointer" />
}
>
<LogOut className="mr-2 h-4 w-4" />
<span>Uitloggen</span>
</DropdownMenuItem>
</form>
</DropdownMenuContent>
</DropdownMenu>
)
}