From fab1dbf8636dad68b3fc036a37ecc20489024a21 Mon Sep 17 00:00:00 2001 From: Psychotoxical Date: Sun, 19 Apr 2026 19:44:17 +0200 Subject: [PATCH] perf(floating-bar): subscribe themeStore via selector MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Both AppShell and PlayerBar read floatingPlayerBar via destructured useThemeStore() without a selector, so every unrelated theme change (accent, font, scheduler state, …) would force a re-render. Switch to s => s.floatingPlayerBar so these components only re-render when the toggle actually flips. Follow-up to PR #216. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/App.tsx | 2 +- src/components/PlayerBar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1fdde255..9c43580b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -145,7 +145,7 @@ function AppShell() { const setEntityRatingSupport = useAuthStore(s => s.setEntityRatingSupport); const offlineAlbums = useOfflineStore(s => s.albums); const hasOfflineContent = Object.values(offlineAlbums).some(a => a.serverId === serverId); - const { floatingPlayerBar } = useThemeStore(); + const floatingPlayerBar = useThemeStore(s => s.floatingPlayerBar); // Mini player → main: route requests dispatched as `psy:navigate` // CustomEvents from the bridge land here so React Router can take over. diff --git a/src/components/PlayerBar.tsx b/src/components/PlayerBar.tsx index 821003b8..fb2df1f8 100644 --- a/src/components/PlayerBar.tsx +++ b/src/components/PlayerBar.tsx @@ -101,7 +101,7 @@ export default function PlayerBar() { setUserRatingOverride: s.setUserRatingOverride, }))); const { lastfmSessionKey } = useAuthStore(); - const { floatingPlayerBar } = useThemeStore(); + const floatingPlayerBar = useThemeStore(s => s.floatingPlayerBar); const [floatingStyle, setFloatingStyle] = useState({}); useEffect(() => {