feat(titlebar): selectable window button styles + minimize toggle (#1083)

* 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)
2026-07-22 15:25:46 +00:00 · 2026-06-13 23:52:56 +02:00
parent be3f1dc299
commit 028eb65f7d
21 changed files with 386 additions and 47 deletions
@@ -228,6 +228,16 @@ export const settings = {
  discordRichPresenceNotice: 'Achtung: Dies ist die in Psysonic integrierte Discord Rich Presence. Wenn du stattdessen das offizielle Navidrome-Discord-Rich-Presence-Plugin nutzen möchtest, lass diese Funktion deaktiviert und aktiviere stattdessen weiter unten auf dieser Seite „Im Livefenster anzeigen".',
  useCustomTitlebar: 'Eigene Titelleiste',
  useCustomTitlebarDesc: 'Ersetzt die System-Titelleiste durch eine eingebaute, die zum App-Theme passt. Deaktivieren, um die native GNOME/GTK-Titelleiste zu verwenden.',
+  windowButtonStyle: 'Fenster-Buttons',
+  windowButtonStyleDesc: 'Wähle das Aussehen der Minimieren-, Maximieren- und Schließen-Buttons.',
+  windowButtonsDots: 'Punkte',
+  windowButtonsDotsGlyph: 'Punkte + Symbole',
+  windowButtonsFlat: 'Flach',
+  windowButtonsPill: 'Pille',
+  windowButtonsOutline: 'Umriss',
+  windowButtonsGlyph: 'Minimal',
+  showMinimizeButton: 'Minimieren-Button anzeigen',
+  showMinimizeButtonDesc: 'Ausschalten, um nur Maximieren und Schließen anzuzeigen.',
  linuxWebkitSmoothScroll: 'Sanftes Mausrad (Linux)',
  linuxWebkitSmoothScrollDesc: 'An: mit Nachlauf. Aus: zeilenweise wie in GTK-Apps.',
  linuxWebkitInputForceRepaint: 'Eingabefelder beim Fokus neu zeichnen (Linux)',
@@ -231,6 +231,16 @@ export const settings = {
  discordRichPresenceNotice: 'Heads up: this is Psysonic\'s built-in Discord Rich Presence. If you\'d rather use the official Navidrome Discord Rich Presence plugin, leave this switched off and enable "Show in Now Playing" further down this page instead.',
  useCustomTitlebar: 'Custom title bar',
  useCustomTitlebarDesc: 'Replace the system title bar with a built-in one that matches the app theme. Disable to use the native GNOME/GTK title bar.',
+  windowButtonStyle: 'Window buttons',
+  windowButtonStyleDesc: 'Pick the look of the minimize, maximize and close buttons.',
+  windowButtonsDots: 'Dots',
+  windowButtonsDotsGlyph: 'Dots + icons',
+  windowButtonsFlat: 'Flat',
+  windowButtonsPill: 'Pill',
+  windowButtonsOutline: 'Outline',
+  windowButtonsGlyph: 'Minimal',
+  showMinimizeButton: 'Show minimize button',
+  showMinimizeButtonDesc: 'Turn off to show only the maximize and close buttons.',
  linuxWebkitSmoothScroll: 'Smooth wheel (Linux)',
  linuxWebkitSmoothScrollDesc: 'On: inertial scroll. Off: line-by-line, GTK-style.',
  linuxWebkitInputForceRepaint: 'Repaint inputs on focus (Linux)',
@@ -227,6 +227,16 @@ export const settings = {
  discordRichPresenceNotice: 'Aviso: esta es la Discord Rich Presence integrada en Psysonic. Si prefieres usar el plugin oficial de Discord Rich Presence de Navidrome, deja esta función desactivada y activa en su lugar «Mostrar en Reproduciendo Ahora» más abajo en esta página.',
  useCustomTitlebar: 'Barra de título personalizada',
  useCustomTitlebarDesc: 'Reemplaza la barra de título del sistema con una integrada que coincide con el tema de la app. Desactiva para usar la barra nativa de GNOME/GTK.',
+  windowButtonStyle: 'Botones de ventana',
+  windowButtonStyleDesc: 'Elige el aspecto de los botones de minimizar, maximizar y cerrar.',
+  windowButtonsDots: 'Puntos',
+  windowButtonsDotsGlyph: 'Puntos + iconos',
+  windowButtonsFlat: 'Plano',
+  windowButtonsPill: 'Píldora',
+  windowButtonsOutline: 'Contorno',
+  windowButtonsGlyph: 'Minimalista',
+  showMinimizeButton: 'Mostrar botón de minimizar',
+  showMinimizeButtonDesc: 'Desactiva para mostrar solo maximizar y cerrar.',
  linuxWebkitSmoothScroll: 'Rueda suave (Linux)',
  linuxWebkitSmoothScrollDesc: 'Activado: inercia. Desactivado: pasos por línea (estilo GTK).',
  linuxWebkitInputForceRepaint: 'Repintar los campos al enfocar (Linux)',
@@ -611,6 +611,16 @@ export const settings = {
  waveformCacheClearFailed: 'Impossible de vider le cache des formes d’onde.',
  useCustomTitlebar: 'Barre de titre personnalisée',
  useCustomTitlebarDesc: 'Remplace la barre de titre système par une barre intégrée assortie au thème de l’app. Désactivez pour utiliser la barre GNOME/GTK native.',
+  windowButtonStyle: 'Boutons de fenêtre',
+  windowButtonStyleDesc: 'Choisissez l’apparence des boutons réduire, agrandir et fermer.',
+  windowButtonsDots: 'Points',
+  windowButtonsDotsGlyph: 'Points + icônes',
+  windowButtonsFlat: 'Plat',
+  windowButtonsPill: 'Pilule',
+  windowButtonsOutline: 'Contour',
+  windowButtonsGlyph: 'Minimal',
+  showMinimizeButton: 'Afficher le bouton réduire',
+  showMinimizeButtonDesc: 'Désactivez pour n’afficher qu’agrandir et fermer.',
  analyticsStrategyTitle: 'Stratégies d’analyse',
  analyticsStrategyDesc: 'Choisissez le style d’analyse pour la bibliothèque.',
  analyticsStrategyLabel: 'Stratégie',
@@ -612,6 +612,16 @@ export const settings = {
  showTrayIconDesc: 'Vis Psysonic-ikonet i systemstatusfeltet / menylinjen.',
  useCustomTitlebar: 'Tilpasset tittellinje',
  useCustomTitlebarDesc: 'Erstatt systemets tittellinje med en innebygd som matcher app-temaet. Slå av for å bruke den native GNOME/GTK-tittellinjen.',
+  windowButtonStyle: 'Vindusknapper',
+  windowButtonStyleDesc: 'Velg utseendet på knappene for minimer, maksimer og lukk.',
+  windowButtonsDots: 'Prikker',
+  windowButtonsDotsGlyph: 'Prikker + ikoner',
+  windowButtonsFlat: 'Flat',
+  windowButtonsPill: 'Pille',
+  windowButtonsOutline: 'Omriss',
+  windowButtonsGlyph: 'Minimal',
+  showMinimizeButton: 'Vis minimer-knapp',
+  showMinimizeButtonDesc: 'Slå av for å vise bare maksimer og lukk.',
  analyticsStrategyTitle: 'Analysestrategier',
  analyticsStrategyDesc: 'Velg analysestil for biblioteket.',
  analyticsStrategyLabel: 'Strategi',
@@ -611,6 +611,16 @@ export const settings = {
  waveformCacheClearFailed: 'Waveform-cache wissen mislukt.',
  useCustomTitlebar: 'Aangepaste titelbalk',
  useCustomTitlebarDesc: 'Vervang de systeemtitelbalk door een ingebouwde balk die bij het app-thema past. Schakel uit om de native GNOME/GTK-titelbalk te gebruiken.',
+  windowButtonStyle: 'Vensterknoppen',
+  windowButtonStyleDesc: 'Kies het uiterlijk van de knoppen minimaliseren, maximaliseren en sluiten.',
+  windowButtonsDots: 'Stippen',
+  windowButtonsDotsGlyph: 'Stippen + iconen',
+  windowButtonsFlat: 'Plat',
+  windowButtonsPill: 'Pil',
+  windowButtonsOutline: 'Omtrek',
+  windowButtonsGlyph: 'Minimaal',
+  showMinimizeButton: 'Minimaliseerknop tonen',
+  showMinimizeButtonDesc: 'Schakel uit om alleen maximaliseren en sluiten te tonen.',
  analyticsStrategyTitle: 'Analysestrategieën',
  analyticsStrategyDesc: 'Kies de analysemethode voor de bibliotheek.',
  analyticsStrategyLabel: 'Strategie',
@@ -230,6 +230,16 @@ export const settings = {
  discordRichPresenceNotice: 'Atenție: aceasta este Discord Rich Presence integrată în Psysonic. Dacă preferi să folosești pluginul oficial Discord Rich Presence de la Navidrome, lasă această funcție dezactivată și activează în schimb „Se afișează în Now Playing" mai jos pe această pagină.',
  useCustomTitlebar: 'Bară de titlu personalizată',
  useCustomTitlebarDesc: 'Înlocuiește bara de titlu a sistemului cu una care corespunde cu tema aplicației. Dezactivează pentru a folosi bara de titlu nativ GNOME/GTK.',
+  windowButtonStyle: 'Butoane de fereastră',
+  windowButtonStyleDesc: 'Alege aspectul butoanelor de minimizare, maximizare și închidere.',
+  windowButtonsDots: 'Puncte',
+  windowButtonsDotsGlyph: 'Puncte + pictograme',
+  windowButtonsFlat: 'Plat',
+  windowButtonsPill: 'Pastilă',
+  windowButtonsOutline: 'Contur',
+  windowButtonsGlyph: 'Minimal',
+  showMinimizeButton: 'Afișează butonul de minimizare',
+  showMinimizeButtonDesc: 'Dezactivează pentru a afișa doar maximizare și închidere.',
  linuxWebkitSmoothScroll: 'Rotiță lină (Linux)',
  linuxWebkitSmoothScrollDesc: 'Pornit: scroll inert. Oprit: linie cu linie, în stil GTK.',
  linuxWebkitInputForceRepaint: 'Redesenare câmpuri la focus (Linux)',
@@ -230,6 +230,16 @@ export const settings = {
  useCustomTitlebar: 'Своя строка заголовка',
  useCustomTitlebarDesc:
    'Заменить системную строку заголовка встроенной, в стиле темы приложения. Отключите, чтобы использовать родную строку GNOME/GTK и т.д.',
+  windowButtonStyle: 'Кнопки окна',
+  windowButtonStyleDesc: 'Выберите вид кнопок свернуть, развернуть и закрыть.',
+  windowButtonsDots: 'Кружки',
+  windowButtonsDotsGlyph: 'Кружки + значки',
+  windowButtonsFlat: 'Плоские',
+  windowButtonsPill: 'Пилюля',
+  windowButtonsOutline: 'Контур',
+  windowButtonsGlyph: 'Минимал',
+  showMinimizeButton: 'Показывать кнопку «Свернуть»',
+  showMinimizeButtonDesc: 'Выключите, чтобы показывать только «Развернуть» и «Закрыть».',
  linuxWebkitSmoothScroll: 'Плавное колесо (Linux)',
  linuxWebkitSmoothScrollDesc: 'Вкл — инерция. Выкл — по шагам, как в GTK.',
  linuxWebkitInputForceRepaint: 'Перерисовывать поля ввода при фокусе (Linux)',
@@ -610,6 +610,16 @@ export const settings = {
  waveformCacheClearFailed: '清除波形缓存失败。',
  useCustomTitlebar: '自定义标题栏',
  useCustomTitlebarDesc: '用与应用主题匹配的内置标题栏替换系统标题栏。关闭后将使用原生 GNOME/GTK 标题栏。',
+  windowButtonStyle: '窗口按钮',
+  windowButtonStyleDesc: '选择最小化、最大化和关闭按钮的外观。',
+  windowButtonsDots: '圆点',
+  windowButtonsDotsGlyph: '圆点 + 图标',
+  windowButtonsFlat: '扁平',
+  windowButtonsPill: '胶囊',
+  windowButtonsOutline: '描边',
+  windowButtonsGlyph: '极简',
+  showMinimizeButton: '显示最小化按钮',
+  showMinimizeButtonDesc: '关闭后仅显示最大化和关闭按钮。',
  analyticsStrategyTitle: '分析策略',
  analyticsStrategyDesc: '选择库的分析方式。',
  analyticsStrategyLabel: '策略',