From 5a51c2c713d8fd507f2870f89dff6b69e7860f47 Mon Sep 17 00:00:00 2001 From: Psychotoxical Date: Sun, 19 Apr 2026 20:00:10 +0200 Subject: [PATCH] feat(floating-bar): liquid-glass look on macOS and Windows MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Inspired by kveld9's PR #211 proposal. Adapted to stay within WebView2 and WKWebView GPU budgets — 8px blur instead of 28, theme-token colours via color-mix instead of hardcoded white, no saturate/brightness/ contrast stack, no transitions, no !important. Linux keeps the solid floating bar from PR #216 on every compositing mode. Platform is detected once on mount via a data-platform attribute on . Co-Authored-By: kveld9 <179108235+kveld9@users.noreply.github.com> Co-Authored-By: Claude Opus 4.7 (1M context) --- src/App.tsx | 7 ++++++- src/styles/layout.css | 15 +++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 9c43580b..8789969b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -56,7 +56,7 @@ import GenreDetail from './pages/GenreDetail'; import ExportPickerModal from './components/ExportPickerModal'; import AppUpdater from './components/AppUpdater'; import TitleBar from './components/TitleBar'; -import { IS_LINUX, IS_WINDOWS } from './utils/platform'; +import { IS_LINUX, IS_MACOS, IS_WINDOWS } from './utils/platform'; import { version } from '../package.json'; import { useConnectionStatus } from './hooks/useConnectionStatus'; import { useAuthStore } from './store/authStore'; @@ -112,6 +112,11 @@ function AppShell() { }).catch(() => {}); }, []); + useEffect(() => { + const platform = IS_LINUX ? 'linux' : IS_MACOS ? 'macos' : IS_WINDOWS ? 'windows' : 'unknown'; + document.documentElement.setAttribute('data-platform', platform); + }, []); + useEffect(() => { const win = getCurrentWindow(); // Check initial state (e.g. app launched maximised / already fullscreen). diff --git a/src/styles/layout.css b/src/styles/layout.css index b2446711..b2d4c6a2 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -1244,6 +1244,21 @@ gap: 8px; } +/* Liquid-glass floating bar — macOS + Windows only. + Inspired by PR #211 (kveld9), adapted to theme tokens and reduced + blur so it stays within WebView2 / WKWebView GPU budgets. Linux + always keeps the solid look from PR #216, regardless of compositor. */ +html[data-platform="macos"] .player-bar.floating, +html[data-platform="windows"] .player-bar.floating { + background: color-mix(in srgb, var(--bg-player) 72%, transparent); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent); + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.45), + inset 0 1px 0 color-mix(in srgb, var(--text-primary) 12%, transparent); +} + .player-track-info { display: flex; align-items: center;