diff --git a/src/components/shared/impersonation-banner.tsx b/src/components/shared/impersonation-banner.tsx index f818331..7d038b1 100644 --- a/src/components/shared/impersonation-banner.tsx +++ b/src/components/shared/impersonation-banner.tsx @@ -1,15 +1,14 @@ 'use client' import { useSession } from 'next-auth/react' -import { useRouter } from 'next/navigation' import { trpc } from '@/lib/trpc/client' import { Button } from '@/components/ui/button' import { ArrowLeft, Loader2 } from 'lucide-react' import { toast } from 'sonner' +import type { UserRole } from '@prisma/client' export function ImpersonationBanner() { const { data: session, update } = useSession() - const router = useRouter() const endImpersonation = trpc.user.endImpersonation.useMutation() if (!session?.user?.impersonating) return null @@ -18,23 +17,29 @@ export function ImpersonationBanner() { try { await endImpersonation.mutateAsync() await update({ endImpersonation: true }) - // Full page navigation to ensure updated JWT cookie is sent window.location.href = '/admin/members' } catch (error) { toast.error(error instanceof Error ? error.message : 'Failed to end impersonation') } } + // Show every role the impersonated user holds (multi-role support). + const roles = (session.user.roles as UserRole[] | undefined) ?? [session.user.role as UserRole] + const rolesLabel = roles.map((r) => r.replace(/_/g, ' ')).join(', ') + return ( -
+ // pointer-events-none on the wrapper so the banner doesn't intercept clicks + // on anything underneath (e.g., the user-menu dropdown). The button inside + // re-enables pointer-events on itself only. +
Impersonating {session.user.name || session.user.email}{' '} - ({session.user.role.replace('_', ' ')}) + ({rolesLabel})