feat(titlebar): custom Linux title bar with now-playing display

- set_decorations(false) on Linux at startup via #[cfg(target_os = "linux")]
- New TitleBar component: drag region + minimize/maximize/close buttons
- Currently playing track (▶/⏸ + artist – title) shown in the center
- app-shell grid gains a 32px titlebar row when data-titlebar is set
- IS_LINUX utility constant via navigator.platform
- macOS and Windows are completely unaffected

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-07 21:12:17 +02:00
parent dd4e2f1162
commit d49137475f
5 changed files with 165 additions and 1 deletions
+55
View File
@@ -0,0 +1,55 @@
import React from 'react';
import { getCurrentWindow } from '@tauri-apps/api/window';
import { X, Minus, Square } from 'lucide-react';
import { usePlayerStore } from '../store/playerStore';
const win = getCurrentWindow();
export default function TitleBar() {
const currentTrack = usePlayerStore(s => s.currentTrack);
const isPlaying = usePlayerStore(s => s.isPlaying);
return (
<div className="titlebar" data-tauri-drag-region>
<span className="titlebar-title" data-tauri-drag-region>Psysonic</span>
<div className="titlebar-track" data-tauri-drag-region>
{currentTrack && (
<>
<span className="titlebar-track-state">{isPlaying ? '▶' : '⏸'}</span>
<span className="titlebar-track-text truncate">
{currentTrack.artist && `${currentTrack.artist} `}{currentTrack.title}
</span>
</>
)}
</div>
<div className="titlebar-controls">
<button
className="titlebar-btn titlebar-btn-minimize"
onClick={() => win.minimize()}
data-tooltip="Minimize"
data-tooltip-pos="bottom"
>
<Minus size={10} />
</button>
<button
className="titlebar-btn titlebar-btn-maximize"
onClick={() => win.toggleMaximize()}
data-tooltip="Maximize"
data-tooltip-pos="bottom"
>
<Square size={9} />
</button>
<button
className="titlebar-btn titlebar-btn-close"
onClick={() => win.close()}
data-tooltip="Close"
data-tooltip-pos="bottom"
>
<X size={12} />
</button>
</div>
</div>
);
}