52 lines
2 KiB
JavaScript
52 lines
2 KiB
JavaScript
// Tweaks panel for RecordingsViewer
|
|
// Loaded after tweaks-panel.jsx
|
|
|
|
function TweaksApp() {
|
|
const { TweaksPanel, TweakSection, TweakToggle, TweakRadio, TweakColor, useTweaks } = window;
|
|
|
|
const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
|
|
"accentColor": "oklch(0.75 0.15 65)",
|
|
"density": "normal",
|
|
"monoTimestamps": true,
|
|
"showQualityColors": true,
|
|
"sidebarCollapsed": false
|
|
}/*EDITMODE-END*/);
|
|
|
|
// Apply tweaks to CSS vars live
|
|
React.useEffect(() => {
|
|
const root = document.documentElement;
|
|
// Accent color
|
|
root.style.setProperty('--amber', tweaks.accentColor);
|
|
// Density
|
|
const pad = tweaks.density === 'compact' ? '6px 10px' : tweaks.density === 'comfortable' ? '14px 18px' : '9px 12px';
|
|
root.style.setProperty('--row-padding', pad);
|
|
// Monospace timestamps
|
|
document.querySelectorAll('.mono-ts').forEach(el => {
|
|
el.style.fontFamily = tweaks.monoTimestamps ? 'var(--font-mono)' : 'var(--font-sans)';
|
|
});
|
|
}, [tweaks]);
|
|
|
|
return (
|
|
<TweaksPanel>
|
|
<TweakSection label="Appearance">
|
|
<TweakColor label="Accent color" value={tweaks.accentColor} onChange={v => setTweak('accentColor', v)} />
|
|
<TweakRadio
|
|
label="Density"
|
|
value={tweaks.density}
|
|
options={[{ label: 'Compact', value: 'compact' }, { label: 'Normal', value: 'normal' }, { label: 'Airy', value: 'comfortable' }]}
|
|
onChange={v => setTweak('density', v)}
|
|
/>
|
|
</TweakSection>
|
|
<TweakSection label="Display">
|
|
<TweakToggle label="Monospace timestamps" value={tweaks.monoTimestamps} onChange={v => setTweak('monoTimestamps', v)} />
|
|
<TweakToggle label="Quality color coding" value={tweaks.showQualityColors} onChange={v => setTweak('showQualityColors', v)} />
|
|
</TweakSection>
|
|
</TweaksPanel>
|
|
);
|
|
}
|
|
|
|
// Mount tweaks panel in a separate div
|
|
const tweaksRoot = document.createElement('div');
|
|
tweaksRoot.id = 'tweaks-root';
|
|
document.body.appendChild(tweaksRoot);
|
|
ReactDOM.createRoot(tweaksRoot).render(<TweaksApp />);
|