feat: add separate gradients for Grimoire members based on login state (#138)

* feat: add separate gradients for Grimoire members based on login state

Updates the UserName component to display different gradient colors for
Grimoire members depending on whether they are the logged-in user:
- Orange-yellow gradient for logged-in Grimoire members (current user)
- Purple-blue gradient for other Grimoire members (not logged in)

This visual distinction makes it easier to identify your own username
versus other Grimoire members in feeds and conversations.

* refine: make blue tone more subtle in Grimoire member gradient

Changes the non-logged-in Grimoire member gradient from cyan-500 to
blue-400 for a softer, more subtle blue tone on the bottom-right
diagonal of the gradient.

* refine: reposition blue to match yellow placement in gradients

Rearranges the purple-blue gradient to start with blue-400 (matching
the top-left position of yellow-500 in the orange-yellow gradient) and
transition through purple-500 to purple-600.

Gradient order:
- Logged-in: yellow → orange → orange
- Other members: blue → purple → purple

* refine: adjust purple tones to match accent color

Updates the gradient to use purple-400 and purple-500 (instead of
purple-500 and purple-600) to better match the accent purple (HSL 270
100% 70%) used for regular usernames in dark mode.

Final gradient: blue-400 → purple-400 → purple-500

* refine: improve gradients to match theme colors and work across themes

Updates both Grimoire member gradients to better align with their
non-member equivalents while ensuring visibility in both light and dark themes:

**Logged-in gradient** (orange-dominant to match highlight color):
- Changed: yellow-500 → orange-500 → orange-600
- To: orange-400 → orange-500 → amber-600
- Matches highlight (HSL 25 90% 35% light, 27 96% 61% dark)

**Non-logged-in gradient** (purple-dominant to match accent color):
- Changed: blue-400 → purple-400 → purple-500
- To: violet-500 → purple-500 → fuchsia-600
- Matches accent (HSL 270 100% 70% dark)
- More saturated to stand out in light theme

Both gradients now maintain their primary colors while being more
visible and consistent across light and dark themes.

* feat: add 4-color gradients with bright highlights for classy look

Enhances both Grimoire member gradients with a subtle bright color at
the top for a more stylish, classy appearance:

**Logged-in gradient:**
- yellow-300 → orange-400 → orange-500 → amber-600
- Bright yellow shimmer at top, deepening to amber

**Non-logged-in gradient:**
- violet-400 → violet-500 → purple-500 → fuchsia-600
- Lighter violet glow at top, transitioning to purple-pink

The 4-color gradients add depth and sophistication while maintaining
the theme color alignment (orange for highlight, purple for accent).

* refine: simplify to elegant 2-color gradients and add badge check icon

Simplifies Grimoire member styling for a more elegant appearance:

**Gradient changes:**
- Direction: bg-gradient-to-br → bg-gradient-to-tr (diagonal from top-left)
- Logged-in: Simplified to orange-400 → amber-600 (warm elegant gradient)
- Non-logged-in: Simplified to violet-500 → fuchsia-600 (cool elegant gradient)

**Badge check icon:**
- Added BadgeCheck icon after member names
- Icon scales automatically with username size using w-[1em] h-[1em]
- Provides visual verification of Grimoire membership

The simpler 2-color gradients with top-right direction create a more
refined, classy look while the badge check adds instant recognition.

* fix: make BadgeCheck icon visible by separating from gradient text

The badge icon was invisible because it inherited the text-transparent
class from the parent span. Fixed by:

- Moving gradient styling to only the displayName span
- Giving BadgeCheck its own explicit color (orange-500 for logged-in,
  violet-500 for others)
- Icon now properly visible and color-coordinated with the gradient

* feat: add subtle gradient to BadgeCheck icon matching username

The badge icon now has its own subtle gradient that continues from
the username gradient's ending color:

- Logged-in: amber-600 → amber-400 (darker to brighter amber)
- Others: fuchsia-600 → fuchsia-400 (darker to brighter fuchsia)
- Both use bg-gradient-to-tr direction to match username

This creates a cohesive visual flow where the gradient subtly
continues from the username into the verification badge.

* fix: use solid colors for BadgeCheck icon (gradients don't work on SVG)

The bg-clip-text technique only works on actual text elements, not SVG
paths. Reverted to solid colors that complement the gradient themes:

- Logged-in: text-amber-500 (matches the amber gradient tones)
- Others: text-fuchsia-500 (matches the fuchsia gradient tones)

The icon is now visible and color-coordinated with the username gradients.

---------

Co-authored-by: Claude <noreply@anthropic.com>

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) {
     <span
       dir="auto"
       className={cn(
-        "font-semibold cursor-crosshair hover:underline hover:decoration-dotted",
-        isGrimoire
-          ? "bg-gradient-to-br from-yellow-500 via-orange-500 to-orange-600 bg-clip-text text-transparent"
-          : isActiveAccount
-            ? "text-highlight"
-            : "text-accent",
+        "font-semibold cursor-crosshair hover:underline hover:decoration-dotted inline-flex items-center gap-1",
         className,
       )}
       onClick={handleClick}
     >
-      {isMention ? "@" : null}
-      {displayName}
+      <span
+        className={cn(
+          isGrimoire
+            ? isActiveAccount
+              ? "bg-gradient-to-tr from-orange-400 to-amber-600 bg-clip-text text-transparent"
+              : "bg-gradient-to-tr from-violet-500 to-fuchsia-600 bg-clip-text text-transparent"
+            : isActiveAccount
+              ? "text-highlight"
+              : "text-accent",
+        )}
+      >
+        {isMention ? "@" : null}
+        {displayName}
+      </span>
+      {isGrimoire && (
+        <BadgeCheck
+          className={cn(
+            "inline-block w-[1em] h-[1em]",
+            isActiveAccount ? "text-amber-500" : "text-fuchsia-500",
+          )}
+        />
+      )}
     </span>
   );
 }