diff --git a/src/components/nostr/UserName.tsx b/src/components/nostr/UserName.tsx index 270055a..4134a2a 100644 --- a/src/components/nostr/UserName.tsx +++ b/src/components/nostr/UserName.tsx @@ -3,6 +3,7 @@ import { getDisplayName } from "@/lib/nostr-utils"; import { cn } from "@/lib/utils"; import { useGrimoire } from "@/core/state"; import { isGrimoireMember } from "@/lib/grimoire-members"; +import { BadgeCheck } from "lucide-react"; interface UserNameProps { pubkey: string; @@ -14,8 +15,11 @@ interface UserNameProps { * Component that displays a user's name from their Nostr profile * Shows placeholder derived from pubkey while loading or if no profile exists * Clicking opens the user's profile - * Uses highlight color for the logged-in user (themeable amber) - * Shows Grimoire members with yellow-orange gradient styling + * Uses highlight color for the logged-in user (themeable orange) + * Shows Grimoire members with elegant 2-color gradient styling and badge check: + * - Orange→Amber gradient for logged-in member + * - Violet→Fuchsia gradient for other members + * - BadgeCheck icon that scales with username size */ export function UserName({ pubkey, isMention, className }: UserNameProps) { const { addWindow, state } = useGrimoire(); @@ -35,18 +39,33 @@ export function UserName({ pubkey, isMention, className }: UserNameProps) { - {isMention ? "@" : null} - {displayName} + + {isMention ? "@" : null} + {displayName} + + {isGrimoire && ( + + )} ); }