feat: Add highlight theme color for active user display

Add dedicated 'highlight' color to theme system for displaying the
logged-in user's name, replacing the use of 'zap' color which felt
semantically incorrect. The highlight color is optimized for contrast
on each theme's background.

- Add highlight to ThemeColors interface and apply.ts
- Add --highlight CSS variable to index.css (light and dark)
- Add highlight to tailwind.config.js
- Configure appropriate highlight values for dark, light, and plan9 themes
- Update UserName.tsx to use text-highlight for active account
- Update SpellRenderer.tsx MePlaceholder to use text-highlight

src/components/nostr/UserName.tsx

@@ -13,7 +13,7 @@ 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 zap color for the logged-in user (themeable gold/amber)
+ * Uses highlight color for the logged-in user (themeable amber)
  */
 export function UserName({ pubkey, isMention, className }: UserNameProps) {
   const { addWindow, state } = useGrimoire();
@@ -33,7 +33,7 @@ export function UserName({ pubkey, isMention, className }: UserNameProps) {
       dir="auto"
       className={cn(
         "font-semibold cursor-crosshair hover:underline hover:decoration-dotted",
-        isActiveAccount ? "text-zap" : "text-accent",
+        isActiveAccount ? "text-highlight" : "text-accent",
         className,
       )}
       onClick={handleClick}

src/components/nostr/kinds/SpellRenderer.tsx

@@ -42,7 +42,7 @@ export function MePlaceholder({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1.5 font-bold text-zap select-none",
+        "inline-flex items-center gap-1.5 font-bold text-highlight select-none",
         pubkey && "cursor-crosshair hover:underline decoration-dotted",
         size === "sm" ? "text-xs" : size === "md" ? "text-sm" : "text-lg",
         className,

src/index.css

@@ -62,6 +62,9 @@
     --zap: 45 93% 40%;
     --live: 0 72% 45%;
 
+    /* UI highlight (active user, self-references) */
+    --highlight: 25 90% 35%;
+
     /* Syntax highlighting */
     --syntax-comment: 215.4 16.3% 46.9%;
     --syntax-punctuation: 222.2 84% 30%;
@@ -123,6 +126,9 @@
     --zap: 45 93% 58%;
     --live: 0 72% 51%;
 
+    /* UI highlight (active user, self-references) */
+    --highlight: 38 92% 55%;
+
     /* Syntax highlighting */
     --syntax-comment: 215 20.2% 70%;
     --syntax-punctuation: 210 40% 70%;

src/lib/themes/apply.ts

@@ -57,6 +57,9 @@ export function applyTheme(theme: Theme): void {
   root.style.setProperty("--zap", theme.colors.zap);
   root.style.setProperty("--live", theme.colors.live);
 
+  // UI highlight color
+  root.style.setProperty("--highlight", theme.colors.highlight);
+
   // Syntax highlighting
   root.style.setProperty("--syntax-comment", theme.syntax.comment);
   root.style.setProperty("--syntax-punctuation", theme.syntax.punctuation);
@@ -120,6 +123,8 @@ export function getThemeVariables(): string[] {
     // Nostr-specific
     "--zap",
     "--live",
+    // UI highlight
+    "--highlight",
     // Syntax
     "--syntax-comment",
     "--syntax-punctuation",

src/lib/themes/builtin/dark.ts

@@ -46,6 +46,9 @@ export const darkTheme: Theme = {
     // Nostr-specific colors
     zap: "45 93% 58%", // Gold/yellow for zaps
     live: "0 72% 51%", // Red for live indicator
+
+    // UI highlight (active user, self-references)
+    highlight: "38 92% 55%", // Warm amber
   },
 
   syntax: {

src/lib/themes/builtin/light.ts

@@ -46,6 +46,9 @@ export const lightTheme: Theme = {
     // Nostr-specific colors (darker for light background)
     zap: "45 93% 40%", // Darker gold for contrast on light
     live: "0 72% 45%", // Dark red for live indicator
+
+    // UI highlight (darker for light background)
+    highlight: "25 90% 35%", // Dark amber/brown
   },
 
   syntax: {

src/lib/themes/builtin/plan9.ts

@@ -60,6 +60,9 @@ export const plan9Theme: Theme = {
     // Nostr-specific colors (dark for contrast on pale yellow)
     zap: "35 90% 35%", // Dark amber/gold for zaps
     live: "0 70% 40%", // Dark red for live indicator
+
+    // UI highlight (dark for contrast on pale yellow)
+    highlight: "25 85% 30%", // Dark brown/amber
   },
 
   syntax: {

src/lib/themes/types.ts

@@ -63,6 +63,9 @@ export interface ThemeColors {
   // Nostr-specific colors
   zap: HSLValue; // Lightning zaps (typically yellow/gold)
   live: HSLValue; // Live streaming indicator (typically red)
+
+  // UI highlight color (for active user, self-references, etc.)
+  highlight: HSLValue;
 }
 
 /** Syntax highlighting colors for code blocks */

tailwind.config.js

@@ -72,6 +72,8 @@ export default {
         // Nostr-specific colors
         zap: "hsl(var(--zap))",
         live: "hsl(var(--live))",
+        // UI highlight (active user, self-references)
+        highlight: "hsl(var(--highlight))",
       },
     },
   },