From 661d11ed543deca1b0a08f09bdf0bfad94771a04 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 18 Jan 2026 11:33:46 +0000
Subject: [PATCH] refactor: show profile username with theme-aware gradient
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/components/nostr/UserName.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/nostr/UserName.tsx b/src/components/nostr/UserName.tsx
index c03ea41..270055a 100644
--- a/src/components/nostr/UserName.tsx
+++ b/src/components/nostr/UserName.tsx
@@ -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",