mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-05-20 14:44:51 +02:00
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:
parent
66a35d9472
commit
9d3b972d81
1 changed files with 14 additions and 5 deletions
|
|
@ -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 */}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue