refactor: show profile username with theme-aware gradient

Updates UserName component to display the user's actual profile name
instead of the Grimoire username, while still applying gradient styling
to Grimoire members. Also improves gradient colors for better visibility
across all themes.

Changes:
- Always use profile name from getDisplayName (not Grimoire username)
- Grimoire members still get gradient styling applied to their profile name
- Updated gradient colors to darker shades for better contrast:
  - from-yellow-500 (was yellow-400)
  - via-orange-500 (was orange-400)
  - to-orange-600 (was orange-500)
- Removed unused getGrimoireUsername import

The darker gradient colors (#eab308 → #f97316 → #ea580c) provide better
readability on both light and dark themes while maintaining the vibrant
yellow-to-orange diagonal effect.
This commit is contained in:
Claude
2026-01-18 11:33:46 +00:00
parent 1a50cea5b1
commit 661d11ed54

View File

@@ -2,7 +2,7 @@ import { useProfile } from "@/hooks/useProfile";
import { getDisplayName } from "@/lib/nostr-utils";
import { cn } from "@/lib/utils";
import { useGrimoire } from "@/core/state";
import { getGrimoireUsername, isGrimoireMember } from "@/lib/grimoire-members";
import { isGrimoireMember } from "@/lib/grimoire-members";
interface UserNameProps {
pubkey: string;
@@ -21,11 +21,7 @@ export function UserName({ pubkey, isMention, className }: UserNameProps) {
const { addWindow, state } = useGrimoire();
const profile = useProfile(pubkey);
const isGrimoire = isGrimoireMember(pubkey);
const grimoireUsername = getGrimoireUsername(pubkey);
const displayName =
isGrimoire && grimoireUsername
? grimoireUsername
: getDisplayName(pubkey, profile);
const displayName = getDisplayName(pubkey, profile);
// Check if this is the logged-in user
const isActiveAccount = state.activeAccount?.pubkey === pubkey;
@@ -41,7 +37,7 @@ export function UserName({ pubkey, isMention, className }: UserNameProps) {
className={cn(
"font-semibold cursor-crosshair hover:underline hover:decoration-dotted",
isGrimoire
? "bg-gradient-to-br from-yellow-400 via-orange-400 to-orange-500 bg-clip-text text-transparent"
? "bg-gradient-to-br from-yellow-500 via-orange-500 to-orange-600 bg-clip-text text-transparent"
: isActiveAccount
? "text-highlight"
: "text-accent",