From 9d3b972d815c72859f869005c8f6c44f8e26ce3d Mon Sep 17 00:00:00 2001
From: Matt <matt@echo6.co>
Date: Fri, 1 May 2026 23:00:11 +0000
Subject: [PATCH] feat(ui): Show theme name as picker trigger button

Replace palette icon with current theme name as clickable text.
Hover changes from --text-secondary to --text-primary.
Popover behavior unchanged.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/ThemePicker.jsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ThemePicker.jsx b/src/components/ThemePicker.jsx
index 9e0e35e..15084a9 100644
--- a/src/components/ThemePicker.jsx
+++ b/src/components/ThemePicker.jsx
@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
-import { Palette } from 'lucide-react'
+
 import { themeList } from '../themes/registry'
 import { useStore } from '../store'
 
@@ -78,18 +78,27 @@ export default function ThemePicker() {
 
   return (
     <div style={{ position: 'relative' }}>
-      {/* Trigger button */}
+      {/* Trigger button - shows current theme name */}
       <button
         ref={triggerRef}
         onClick={() => setIsOpen(!isOpen)}
-        className="p-1.5 rounded flex items-center justify-center"
-        style={{ color: 'var(--text-secondary)' }}
+        style={{
+          background: 'transparent',
+          border: 'none',
+          padding: '4px 8px',
+          cursor: 'pointer',
+          fontSize: 'var(--text-sm)',
+          color: 'var(--text-secondary)',
+          transition: 'color 0.15s',
+        }}
+        onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-primary)'}
+        onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-secondary)'}
         aria-label="Select theme"
         title="Select theme"
         aria-expanded={isOpen}
         aria-haspopup="true"
       >
-        <Palette size={16} />
+        {currentTheme.name}
       </button>
 
       {/* Popover */}