fix(mini-player): show action buttons on macOS too

The custom titlebar was rendered only on Win/Linux, so macOS users had
no way to toggle the queue, pin-on-top or expand back to the main
window — the native macOS titlebar takes care of dragging + close, but
those three actions live entirely in app code.

Render a slim transparent in-page strip on macOS as well, holding just
the queue / pin / maximize buttons right-aligned. Close is omitted on
macOS since the red traffic light already does that.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/MiniPlayer.tsx

@@ -326,41 +326,52 @@ export default function MiniPlayer() {
 
   return (
     <div className="mini-player-shell">
-      {!IS_MACOS && (
+      <div
-        <div className="mini-player__titlebar" data-tauri-drag-region>
+        className={`mini-player__titlebar${IS_MACOS ? ' mini-player__titlebar--mac' : ''}`}
+        {...(IS_MACOS ? {} : { 'data-tauri-drag-region': true })}
+      >
+        {!IS_MACOS ? (
           <span className="mini-player__titlebar-title" data-tauri-drag-region>
             {track?.title ?? 'Psysonic Mini'}
           </span>
-          <button
+        ) : (
-            type="button"
+          // macOS already shows the track title in the native titlebar; we
-            className={`mini-player__titlebar-btn${queueOpen ? ' mini-player__titlebar-btn--active' : ''}`}
+          // just need a flexible spacer so the action buttons sit right.
-            onClick={toggleQueue}
+          <span className="mini-player__titlebar-spacer" />
-            data-tauri-drag-region="false"
+        )}
-            data-tooltip={queueOpen ? t('miniPlayer.hideQueue') : t('miniPlayer.showQueue')}
+        <button
-            aria-label={queueOpen ? t('miniPlayer.hideQueue') : t('miniPlayer.showQueue')}
+          type="button"
-          >
+          className={`mini-player__titlebar-btn${queueOpen ? ' mini-player__titlebar-btn--active' : ''}`}
-            <ListMusic size={13} />
+          onClick={toggleQueue}
-          </button>
+          data-tauri-drag-region="false"
-          <button
+          data-tooltip={queueOpen ? t('miniPlayer.hideQueue') : t('miniPlayer.showQueue')}
-            type="button"
+          aria-label={queueOpen ? t('miniPlayer.hideQueue') : t('miniPlayer.showQueue')}
-            className={`mini-player__titlebar-btn${alwaysOnTop ? ' mini-player__titlebar-btn--active' : ''}`}
+        >
-            onClick={toggleOnTop}
+          <ListMusic size={13} />
-            data-tauri-drag-region="false"
+        </button>
-            data-tooltip={alwaysOnTop ? t('miniPlayer.pinOff') : t('miniPlayer.pinOnTop')}
+        <button
-            aria-label={alwaysOnTop ? t('miniPlayer.pinOff') : t('miniPlayer.pinOnTop')}
+          type="button"
-          >
+          className={`mini-player__titlebar-btn${alwaysOnTop ? ' mini-player__titlebar-btn--active' : ''}`}
-            {alwaysOnTop ? <Pin size={13} /> : <PinOff size={13} />}
+          onClick={toggleOnTop}
-          </button>
+          data-tauri-drag-region="false"
-          <button
+          data-tooltip={alwaysOnTop ? t('miniPlayer.pinOff') : t('miniPlayer.pinOnTop')}
-            type="button"
+          aria-label={alwaysOnTop ? t('miniPlayer.pinOff') : t('miniPlayer.pinOnTop')}
-            className="mini-player__titlebar-btn"
+        >
-            onClick={showMain}
+          {alwaysOnTop ? <Pin size={13} /> : <PinOff size={13} />}
-            data-tauri-drag-region="false"
+        </button>
-            data-tooltip={t('miniPlayer.openMainWindow')}
+        <button
-            aria-label={t('miniPlayer.openMainWindow')}
+          type="button"
-          >
+          className="mini-player__titlebar-btn"
-            <Maximize2 size={13} />
+          onClick={showMain}
-          </button>
+          data-tauri-drag-region="false"
+          data-tooltip={t('miniPlayer.openMainWindow')}
+          aria-label={t('miniPlayer.openMainWindow')}
+        >
+          <Maximize2 size={13} />
+        </button>
+        {/* macOS already provides Close via the red traffic light — skip
+            the duplicate so the in-app titlebar stays minimal. */}
+        {!IS_MACOS && (
           <button
             type="button"
             className="mini-player__titlebar-btn mini-player__titlebar-btn--close"
@@ -371,8 +382,8 @@ export default function MiniPlayer() {
           >
             <X size={13} />
           </button>
-        </div>
+        )}
-      )}
+      </div>
 
       <div className={`mini-player${queueOpen ? ' mini-player--queue-open' : ''}`}>
         <div className="mini-player__art">

src/styles/components.css

@@ -9069,7 +9069,10 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
   box-sizing: border-box;
 }
 
-/* ── Custom in-page titlebar (Linux + Windows; macOS keeps the native one) ── */
+/* ── Custom in-page titlebar.
+   Win/Linux: full bar with drag region, track title, and action buttons.
+   macOS:     slim transparent bar holding only the action buttons; the
+              native titlebar above already shows title + close. ── */
 .mini-player__titlebar {
   flex-shrink: 0;
   height: 26px;
@@ -9080,6 +9083,13 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
   background: color-mix(in srgb, var(--bg-app) 85%, var(--bg-card) 15%);
   border-bottom: 1px solid var(--border-subtle);
 }
+.mini-player__titlebar--mac {
+  height: 22px;
+  padding: 0 6px;
+  background: transparent;
+  border-bottom: none;
+  justify-content: flex-end;
+}
 .mini-player__titlebar-title {
   flex: 1;
   font-size: 11px;
@@ -9090,6 +9100,9 @@ html.no-compositing .fsr-lyric-line.fsrl-active .fsr-lyric-word.active {
   text-overflow: ellipsis;
   letter-spacing: 0.02em;
 }
+.mini-player__titlebar-spacer {
+  flex: 1;
+}
 .mini-player__titlebar-btn {
   width: 22px;
   height: 22px;