itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-21 22:15:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(floating-bar): liquid-glass look on macOS and Windows

Browse Source 
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 <html>.

Co-Authored-By: kveld9 <179108235+kveld9@users.noreply.github.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
2026-04-19 20:00:10 +02:00
parent fab1dbf863
commit 5a51c2c713
2 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+6 -1
View File
@@ -56,7 +56,7 @@ import GenreDetail from './pages/GenreDetail';
import ExportPickerModal from './components/ExportPickerModal'; import ExportPickerModal from './components/ExportPickerModal';
import AppUpdater from './components/AppUpdater'; import AppUpdater from './components/AppUpdater';
import TitleBar from './components/TitleBar'; 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 { version } from '../package.json';
import { useConnectionStatus } from './hooks/useConnectionStatus'; import { useConnectionStatus } from './hooks/useConnectionStatus';
import { useAuthStore } from './store/authStore'; import { useAuthStore } from './store/authStore';
@@ -112,6 +112,11 @@ function AppShell() {
}).catch(() => {}); }).catch(() => {});
}, []); }, []);
useEffect(() => {
const platform = IS_LINUX ? 'linux' : IS_MACOS ? 'macos' : IS_WINDOWS ? 'windows' : 'unknown';
document.documentElement.setAttribute('data-platform', platform);
}, []);
useEffect(() => { useEffect(() => {
const win = getCurrentWindow(); const win = getCurrentWindow();
// Check initial state (e.g. app launched maximised / already fullscreen). // Check initial state (e.g. app launched maximised / already fullscreen).
src/styles/layout.css
+15
View File
@@ -1244,6 +1244,21 @@
gap: 8px; 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 { .player-track-info {
display: flex; display: flex;
align-items: center; align-items: center;