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)

src/components/TitleBar.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { getCurrentWindow } from '@tauri-apps/api/window';
+import { Minus, Square, X } from 'lucide-react';
 import { usePlayerStore } from '../store/playerStore';
+import { useAuthStore } from '../store/authStore';
 
 export default function TitleBar() {
   const win = getCurrentWindow();
   const currentTrack = usePlayerStore(s => s.currentTrack);
   const isPlaying = usePlayerStore(s => s.isPlaying);
+  const windowButtonStyle = useAuthStore(s => s.windowButtonStyle);
+  const showMinimizeButton = useAuthStore(s => s.showMinimizeButton);
 
   return (
     <div className="titlebar" data-tauri-drag-region>
@@ -20,28 +24,36 @@ export default function TitleBar() {
         )}
       </div>
 
-      <div className="titlebar-controls">
-        <button
-          className="titlebar-btn titlebar-btn-minimize"
-          onClick={() => win.minimize()}
-          data-tooltip="Minimize"
-          data-tooltip-pos="bottom"
-          aria-label="Minimize"
-        />
+      <div className="titlebar-controls" data-btnstyle={windowButtonStyle}>
+        {showMinimizeButton && (
+          <button
+            className="titlebar-btn titlebar-btn-minimize"
+            onClick={() => win.minimize()}
+            data-tooltip="Minimize"
+            data-tooltip-pos="bottom"
+            aria-label="Minimize"
+          >
+            <Minus size={10} strokeWidth={2.5} aria-hidden />
+          </button>
+        )}
         <button
           className="titlebar-btn titlebar-btn-maximize"
           onClick={() => win.toggleMaximize()}
           data-tooltip="Maximize"
           data-tooltip-pos="bottom"
           aria-label="Maximize"
-        />
+        >
+          <Square size={9} strokeWidth={2.5} aria-hidden />
+        </button>
         <button
           className="titlebar-btn titlebar-btn-close"
           onClick={() => win.close()}
           data-tooltip="Close"
           data-tooltip-pos="bottom"
           aria-label="Close"
-        />
+        >
+          <X size={10} strokeWidth={2.5} aria-hidden />
+        </button>
       </div>
     </div>
   );

src/components/WindowButtonPreview.tsx

@@ -0,0 +1,69 @@
+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>
+  );
+}

src/components/settings/AppearanceTab.tsx

@@ -7,12 +7,13 @@ import {
   LIBRARY_GRID_MAX_COLUMNS_MAX,
   LIBRARY_GRID_MAX_COLUMNS_MIN,
 } from '../../store/authStoreDefaults';
-import type { SeekbarStyle } from '../../store/authStoreTypes';
+import type { SeekbarStyle, WindowButtonStyle } from '../../store/authStoreTypes';
 import { useFontStore, FontId } from '../../store/fontStore';
 import { useThemeStore } from '../../store/themeStore';
 import { IS_LINUX, IS_WINDOWS } from '../../utils/platform';
 import SettingsSubSection from '../SettingsSubSection';
 import { SeekbarPreview } from '../WaveformSeekPreview';
+import WindowButtonPreview from '../WindowButtonPreview';
 
 export function AppearanceTab() {
   const { t } = useTranslation();
@@ -170,6 +171,39 @@ export function AppearanceTab() {
                   <span className="toggle-track" />
                 </label>
               </div>
+              {auth.useCustomTitlebar && (
+                <>
+                  <div className="settings-section-divider" />
+                  <div>
+                    <div style={{ fontWeight: 500 }}>{t('settings.windowButtonStyle')}</div>
+                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: '0.75rem' }}>
+                      {t('settings.windowButtonStyleDesc')}
+                    </div>
+                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
+                      {(['dots', 'dotsGlyph', 'flat', 'pill', 'outline', 'glyph'] as WindowButtonStyle[]).map(style => (
+                        <WindowButtonPreview
+                          key={style}
+                          style={style}
+                          label={t(`settings.windowButtons${style.charAt(0).toUpperCase() + style.slice(1)}` as any)}
+                          selected={auth.windowButtonStyle === style}
+                          onClick={() => auth.setWindowButtonStyle(style)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                  <div className="settings-section-divider" />
+                  <div className="settings-toggle-row">
+                    <div>
+                      <div style={{ fontWeight: 500 }}>{t('settings.showMinimizeButton')}</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{t('settings.showMinimizeButtonDesc')}</div>
+                    </div>
+                    <label className="toggle-switch" aria-label={t('settings.showMinimizeButton')}>
+                      <input type="checkbox" checked={auth.showMinimizeButton} onChange={e => auth.setShowMinimizeButton(e.target.checked)} />
+                      <span className="toggle-track" />
+                    </label>
+                  </div>
+                </>
+              )}
             </>
           )}
         </div>