Spaces:
Sleeping
Sleeping
File size: 2,805 Bytes
94004a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | /**
* Settings → Appearance panel.
*
* Houses the UI scale (S/M/L) and color-theme picker that used to live in
* the always-visible LogsFooter chrome. Moved here because they're
* rarely-used preferences that don't need to compete with logs / error
* counts on every screen — Settings is where appearance config belongs.
*/
import React from 'react';
import { Palette } from 'lucide-react';
import { Segmented } from '../../ui';
import { useAppStore } from '../../store';
import './AppearancePanel.css';
const THEMES = [
{ id: 'gruvbox', label: 'Gruvbox', dot: '#d3869b' },
{ id: 'midnight', label: 'Midnight', dot: '#8b5cf6' },
{ id: 'nord', label: 'Nord', dot: '#88c0d0' },
{ id: 'solarized', label: 'Solarized', dot: '#268bd2' },
{ id: 'rose-pine', label: 'Rosé Pine', dot: '#ebbcba' },
{ id: 'catppuccin', label: 'Catppuccin', dot: '#cba6f7' },
];
export default function AppearancePanel() {
const uiScale = useAppStore(s => s.uiScale);
const setUiScale = useAppStore(s => s.setUiScale);
const theme = useAppStore(s => s.theme);
const setTheme = useAppStore(s => s.setTheme);
return (
<section className="appearance-panel" aria-labelledby="appearance-panel-heading">
<h3 id="appearance-panel-heading" className="appearance-panel__title">
<Palette size={14} /> Appearance
</h3>
<div className="appearance-panel__row">
<span className="appearance-panel__label">UI scale</span>
<Segmented
size="xs"
value={uiScale}
onChange={setUiScale}
items={[
{ value: 1, label: 'S', title: 'Small UI scale' },
{ value: 1.3, label: 'M', title: 'Medium UI scale' },
{ value: 1.5, label: 'L', title: 'Large UI scale' },
]}
/>
</div>
<div className="appearance-panel__row">
<span className="appearance-panel__label">Color theme</span>
<div className="appearance-panel__themes" role="radiogroup" aria-label="Color theme">
{THEMES.map(t => (
<button
key={t.id}
type="button"
className={`appearance-panel__theme-dot ${theme === t.id ? 'is-active' : ''}`}
style={{ '--dot-color': t.dot }}
onClick={() => setTheme(t.id)}
title={t.label}
aria-label={`${t.label} theme`}
aria-checked={theme === t.id}
role="radio"
/>
))}
</div>
</div>
<p className="appearance-panel__help">
These controls used to live in the bottom logs bar — moved here so
the footer can stay focused on logs. Changes apply instantly and
persist across launches.
</p>
</section>
);
}
|