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>
This commit is contained in:
Matt 2026-05-01 23:00:11 +00:00
commit 9d3b972d81

View file

@ -1,5 +1,5 @@
import { useState, useRef, useEffect } from 'react' import { useState, useRef, useEffect } from 'react'
import { Palette } from 'lucide-react'
import { themeList } from '../themes/registry' import { themeList } from '../themes/registry'
import { useStore } from '../store' import { useStore } from '../store'
@ -78,18 +78,27 @@ export default function ThemePicker() {
return ( return (
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
{/* Trigger button */} {/* Trigger button - shows current theme name */}
<button <button
ref={triggerRef} ref={triggerRef}
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="p-1.5 rounded flex items-center justify-center" style={{
style={{ color: 'var(--text-secondary)' }} 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" aria-label="Select theme"
title="Select theme" title="Select theme"
aria-expanded={isOpen} aria-expanded={isOpen}
aria-haspopup="true" aria-haspopup="true"
> >
<Palette size={16} /> {currentTheme.name}
</button> </button>
{/* Popover */} {/* Popover */}