From 3777366b8721b758409b21324e5b783e558c3b62 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Jan 2026 17:37:32 +0000
Subject: [PATCH] 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            | 4 ++--
 src/components/nostr/kinds/SpellRenderer.tsx | 2 +-
 src/index.css                                | 6 ++++++
 src/lib/themes/apply.ts                      | 5 +++++
 src/lib/themes/builtin/dark.ts               | 3 +++
 src/lib/themes/builtin/light.ts              | 3 +++
 src/lib/themes/builtin/plan9.ts              | 3 +++
 src/lib/themes/types.ts                      | 3 +++
 tailwind.config.js                           | 2 ++
 9 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/nostr/UserName.tsx b/src/components/nostr/UserName.tsx
index e8a17d9..551e86c 100644
--- a/src/components/nostr/UserName.tsx
+++ b/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}
diff --git a/src/components/nostr/kinds/SpellRenderer.tsx b/src/components/nostr/kinds/SpellRenderer.tsx
index 35e8263..0002046 100644
--- a/src/components/nostr/kinds/SpellRenderer.tsx
+++ b/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,
diff --git a/src/index.css b/src/index.css
index fdf2997..9550c3f 100644
--- a/src/index.css
+++ b/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%;
diff --git a/src/lib/themes/apply.ts b/src/lib/themes/apply.ts
index bff8c6f..0900fb0 100644
--- a/src/lib/themes/apply.ts
+++ b/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",
diff --git a/src/lib/themes/builtin/dark.ts b/src/lib/themes/builtin/dark.ts
index 324e1ec..39ef1e3 100644
--- a/src/lib/themes/builtin/dark.ts
+++ b/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: {
diff --git a/src/lib/themes/builtin/light.ts b/src/lib/themes/builtin/light.ts
index fa03e0f..d109869 100644
--- a/src/lib/themes/builtin/light.ts
+++ b/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: {
diff --git a/src/lib/themes/builtin/plan9.ts b/src/lib/themes/builtin/plan9.ts
index 5d8aa1f..494daa7 100644
--- a/src/lib/themes/builtin/plan9.ts
+++ b/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: {
diff --git a/src/lib/themes/types.ts b/src/lib/themes/types.ts
index 75732e5..08d3e1f 100644
--- a/src/lib/themes/types.ts
+++ b/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 */
diff --git a/tailwind.config.js b/tailwind.config.js
index 8614cbf..8b9d517 100644
--- a/tailwind.config.js
+++ b/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))",
       },
     },
   },