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 { 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 */}