diff --git a/src/components/nostr/UserName.tsx b/src/components/nostr/UserName.tsx index 11fcb80..868e5a5 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; @@ -15,9 +16,10 @@ interface UserNameProps { * 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 orange) - * Shows Grimoire members with 4-color gradient styling: - * - Yellow→Orange→Amber for logged-in member (bright shimmer at top) - * - Violet→Purple→Fuchsia for other members (bright highlight at top) + * 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(); @@ -37,11 +39,11 @@ export function UserName({ pubkey, isMention, className }: UserNameProps) { - {isMention ? "@" : null} - {displayName} + + {isMention ? "@" : null} + {displayName} + + {isGrimoire && } ); }