matt/navi
1
0
Fork 0
mirror of https://github.com/zvx-echo6/navi.git synced 2026-05-20 22:54:42 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): Use 4-column grid for theme picker

Browse source 
8 themes no longer fit in a single row. Changed from flex row
to a 4x2 grid layout so all themes are visible.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-05-01 22:59:24 +00:00
commit 66a35d9472
1 changed files with 167 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

334
src/components/ThemePicker.jsx
View file

@ -1,167 +1,167 @@
import { useState, useRef, useEffect } from 'react' import { useState, useRef, useEffect } from 'react'
import { Palette } from 'lucide-react' import { Palette } from 'lucide-react'
import { themeList } from '../themes/registry' import { themeList } from '../themes/registry'
import { useStore } from '../store' import { useStore } from '../store'
/** /**
* ThemeSwatch - Renders a circular swatch with 3 color segments * ThemeSwatch - Renders a circular swatch with 3 color segments
*/ */
function ThemeSwatch({ colors, size = 28, active = false }) { function ThemeSwatch({ colors, size = 28, active = false }) {
// Split circle into 3 segments using conic gradient // Split circle into 3 segments using conic gradient
const gradient = `conic-gradient( const gradient = `conic-gradient(
${colors[0]} 0deg 120deg, ${colors[0]} 0deg 120deg,
${colors[1]} 120deg 240deg, ${colors[1]} 120deg 240deg,
${colors[2]} 240deg 360deg ${colors[2]} 240deg 360deg
)` )`
return ( return (
<div <div
style={{ style={{
width: size, width: size,
height: size, height: size,
borderRadius: '50%', borderRadius: '50%',
background: gradient, background: gradient,
border: active ? '2px solid var(--accent)' : '2px solid var(--border)', border: active ? '2px solid var(--accent)' : '2px solid var(--border)',
boxShadow: active ? '0 0 0 2px var(--accent-muted)' : 'none', boxShadow: active ? '0 0 0 2px var(--accent-muted)' : 'none',
transition: 'border-color 0.15s, box-shadow 0.15s', transition: 'border-color 0.15s, box-shadow 0.15s',
}} }}
/> />
) )
} }
/** /**
* ThemePicker - Popover component for selecting themes * ThemePicker - Popover component for selecting themes
*/ */
export default function ThemePicker() { export default function ThemePicker() {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
const theme = useStore((s) => s.theme) const theme = useStore((s) => s.theme)
const setThemeOverride = useStore((s) => s.setThemeOverride) const setThemeOverride = useStore((s) => s.setThemeOverride)
const triggerRef = useRef(null) const triggerRef = useRef(null)
const popoverRef = useRef(null) const popoverRef = useRef(null)
const themes = themeList() const themes = themeList()
const currentTheme = themes.find(t => t.id === theme) || themes[0] const currentTheme = themes.find(t => t.id === theme) || themes[0]
// Handle click outside to close // Handle click outside to close
useEffect(() => { useEffect(() => {
if (!isOpen) return if (!isOpen) return
function handleClickOutside(e) { function handleClickOutside(e) {
if ( if (
popoverRef.current && popoverRef.current &&
!popoverRef.current.contains(e.target) && !popoverRef.current.contains(e.target) &&
triggerRef.current && triggerRef.current &&
!triggerRef.current.contains(e.target) !triggerRef.current.contains(e.target)
) { ) {
setIsOpen(false) setIsOpen(false)
} }
} }
function handleEscape(e) { function handleEscape(e) {
if (e.key === 'Escape') { if (e.key === 'Escape') {
setIsOpen(false) setIsOpen(false)
} }
} }
document.addEventListener('mousedown', handleClickOutside) document.addEventListener('mousedown', handleClickOutside)
document.addEventListener('keydown', handleEscape) document.addEventListener('keydown', handleEscape)
return () => { return () => {
document.removeEventListener('mousedown', handleClickOutside) document.removeEventListener('mousedown', handleClickOutside)
document.removeEventListener('keydown', handleEscape) document.removeEventListener('keydown', handleEscape)
} }
}, [isOpen]) }, [isOpen])
const handleThemeSelect = (themeId) => { const handleThemeSelect = (themeId) => {
setThemeOverride(themeId) setThemeOverride(themeId)
setIsOpen(false) setIsOpen(false)
} }
return ( return (
<div style={{ position: 'relative' }}> <div style={{ position: 'relative' }}>
{/* Trigger button */} {/* Trigger button */}
<button <button
ref={triggerRef} ref={triggerRef}
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="p-1.5 rounded flex items-center justify-center" className="p-1.5 rounded flex items-center justify-center"
style={{ color: 'var(--text-secondary)' }} 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} /> <Palette size={16} />
</button> </button>
{/* Popover */} {/* Popover */}
{isOpen && ( {isOpen && (
<div <div
ref={popoverRef} ref={popoverRef}
style={{ style={{
position: 'absolute', position: 'absolute',
top: 'calc(100% + 8px)', top: 'calc(100% + 8px)',
right: 0, right: 0,
background: 'var(--bg-raised)', background: 'var(--bg-raised)',
border: '1px solid var(--border)', border: '1px solid var(--border)',
borderRadius: '8px', borderRadius: '8px',
padding: '12px', padding: '12px',
boxShadow: 'var(--shadow-lg)', boxShadow: 'var(--shadow-lg)',
zIndex: 100, zIndex: 100,
minWidth: '140px', minWidth: '140px',
}} }}
role="menu" role="menu"
aria-orientation="horizontal" aria-orientation="horizontal"
> >
<div <div
style={{ style={{
display: 'flex', display: 'grid',
gap: '16px', gridTemplateColumns: 'repeat(4, 1fr)',
justifyContent: 'center', gap: '12px',
}} }}
> >
{themes.map((t) => ( {themes.map((t) => (
<button <button
key={t.id} key={t.id}
onClick={() => handleThemeSelect(t.id)} onClick={() => handleThemeSelect(t.id)}
style={{ style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
gap: '6px', gap: '6px',
background: 'transparent', background: 'transparent',
border: 'none', border: 'none',
padding: '4px', padding: '4px',
borderRadius: '6px', borderRadius: '6px',
cursor: 'pointer', cursor: 'pointer',
transition: 'background 0.1s', transition: 'background 0.1s',
}} }}
onMouseEnter={(e) => { onMouseEnter={(e) => {
e.currentTarget.style.background = 'var(--bg-overlay)' e.currentTarget.style.background = 'var(--bg-overlay)'
}} }}
onMouseLeave={(e) => { onMouseLeave={(e) => {
e.currentTarget.style.background = 'transparent' e.currentTarget.style.background = 'transparent'
}} }}
role="menuitem" role="menuitem"
aria-current={t.id === theme ? 'true' : undefined} aria-current={t.id === theme ? 'true' : undefined}
> >
<ThemeSwatch <ThemeSwatch
colors={t.swatch} colors={t.swatch}
size={32} size={28}
active={t.id === theme} active={t.id === theme}
/> />
<span <span
style={{ style={{
fontSize: 'var(--text-xs)', fontSize: 'var(--text-xs)',
color: t.id === theme ? 'var(--accent)' : 'var(--text-secondary)', color: t.id === theme ? 'var(--accent)' : 'var(--text-secondary)',
fontWeight: t.id === theme ? 500 : 400, fontWeight: t.id === theme ? 500 : 400,
}} }}
> >
{t.name} {t.name}
</span> </span>
</button> </button>
))} ))}
</div> </div>
</div> </div>
)} )}
</div> </div>
) )
} }