mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25:46 +00:00
Psychotoxical
028eb65f7d
* feat(titlebar): selectable window button styles + minimize toggle Custom title bar (Linux) gains a window-button style picker, mirroring the seekbar style picker pattern. Six form-named styles: dots, dotsGlyph, flat, pill, outline, glyph. All buttons now carry minimize/maximize/close glyphs for clear, colour-blind-friendly iconography; dots reveal glyphs on hover, dotsGlyph always shows them. - New authStore state windowButtonStyle (default dots) + showMinimizeButton, with rehydrate validation falling back to dots on unknown values. - WindowButtonPreview reuses the real .titlebar-btn classes for WYSIWYG tiles. - Picker + minimize toggle render under the Custom title bar setting, gated on the toggle being on. - Monochrome styles use --text-primary glyphs and stronger borders for contrast on dark themes. - Dev-build grey marker scoped to the real title bar so previews show true colours. - i18n keys in all 9 locales; setter and rehydrate tests. * docs(changelog): window button styles (#1083)
70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Minus, Square, X } from 'lucide-react';
|
|
import type { WindowButtonStyle } from '../store/authStoreTypes';
|
|
|
|
interface Props {
|
|
style: WindowButtonStyle;
|
|
label: string;
|
|
selected: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
/**
|
|
* Selection tile for the custom-title-bar window-button style picker. Renders
|
|
* the real `.titlebar-controls` / `.titlebar-btn` classes inside a mini title
|
|
* bar so the preview is exactly what the chosen style produces.
|
|
*/
|
|
export default function WindowButtonPreview({ style, label, selected, onClick }: Props) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
aria-pressed={selected}
|
|
style={{
|
|
border: `2px solid ${selected ? 'var(--accent)' : 'var(--bg-hover)'}`,
|
|
borderRadius: 8,
|
|
background: selected
|
|
? 'color-mix(in srgb, var(--accent) 12%, transparent)'
|
|
: 'var(--bg-card, var(--bg-app))',
|
|
padding: '10px 12px 8px',
|
|
cursor: 'pointer',
|
|
width: 130,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 6,
|
|
alignItems: 'stretch',
|
|
transition: 'border-color 0.15s, background 0.15s',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
minHeight: 34,
|
|
background: 'var(--bg-sidebar)',
|
|
border: '1px solid var(--border-subtle)',
|
|
borderRadius: 6,
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<div className="titlebar-controls" data-btnstyle={style} aria-hidden>
|
|
<span className="titlebar-btn titlebar-btn-minimize"><Minus size={10} strokeWidth={2.5} /></span>
|
|
<span className="titlebar-btn titlebar-btn-maximize"><Square size={9} strokeWidth={2.5} /></span>
|
|
<span className="titlebar-btn titlebar-btn-close"><X size={10} strokeWidth={2.5} /></span>
|
|
</div>
|
|
</div>
|
|
<span
|
|
style={{
|
|
fontSize: 11,
|
|
color: selected ? 'var(--accent)' : 'var(--text-secondary)',
|
|
textAlign: 'center',
|
|
fontWeight: selected ? 600 : 400,
|
|
}}
|
|
>
|
|
{label}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|