various performance refactors

src/renderer/store/app.store.ts

@@ -4,6 +4,7 @@ import type { LibraryItem } from '/@/shared/types/domain-types';
 import merge from 'lodash/merge';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
+import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 
 import { AlbumListSort, SongListSort, SortOrder } from '/@/shared/types/domain-types';
@@ -280,6 +281,17 @@ export const useTitlebarStore = () => useAppStore((state) => state.titlebar);
 
 export const useCommandPalette = () => useAppStore((state) => state.commandPalette);
 
+export const useCommandPaletteState = () =>
+    useAppStore(
+        (state) => ({
+            close: state.commandPalette.close,
+            open: state.commandPalette.open,
+            opened: state.commandPalette.opened,
+            toggle: state.commandPalette.toggle,
+        }),
+        shallow,
+    );
+
 export const usePageSidebar = (key: string): [boolean, (value: boolean) => void] => {
     const isOpen = useAppStore((state) => state.pageSidebar[key] ?? false);
     const setPageSidebar = useAppStore((state) => state.actions.setPageSidebar);

src/renderer/store/full-screen-player.store.ts

@@ -1,6 +1,7 @@
 import merge from 'lodash/merge';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
+import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 
 export interface FullScreenPlayerSlice extends FullScreenPlayerState {
@@ -62,3 +63,12 @@ export const useFullScreenPlayerStoreActions = () =>
 
 export const useSetFullScreenPlayerStore = () =>
     useFullScreenPlayerStore((state) => state.actions.setStore);
+
+export const useFullScreenPlayerOverlayState = () =>
+    useFullScreenPlayerStore(
+        (state) => ({
+            expanded: state.expanded,
+            visualizerExpanded: state.visualizerExpanded,
+        }),
+        shallow,
+    );

src/renderer/store/player.store.ts

@@ -1,5 +1,6 @@
 import merge from 'lodash/merge';
 import { nanoid } from 'nanoid';
+import { useMemo } from 'react';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { useShallow } from 'zustand/react/shallow';
@@ -1636,10 +1637,13 @@ export const usePlayerActions = () => {
         })),
     );
 
-    return {
-        ...actions,
-        setTimestamp: setTimestampStore,
-    };
+    return useMemo(
+        () => ({
+            ...actions,
+            setTimestamp: setTimestampStore,
+        }),
+        [actions],
+    );
 };
 
 export type AddToQueueByPlayType = Play;

src/renderer/store/settings.store.ts

@@ -2421,8 +2421,26 @@ export const usePlayButtonBehavior = () =>
 
 export const useWindowSettings = () => useSettingsStore((state) => state.window, shallow);
 
+export const useWindowBarStyle = () =>
+    useSettingsStore((state) => state.window.windowBarStyle, shallow);
+
 export const useHotkeySettings = () => useSettingsStore((state) => state.hotkeys, shallow);
 
+export const useHotkeyBindings = () => useSettingsStore((state) => state.hotkeys.bindings, shallow);
+
+export const useLayoutHotkeyBindings = () =>
+    useSettingsStore(
+        (state) => ({
+            browserBack: state.hotkeys.bindings.browserBack,
+            browserForward: state.hotkeys.bindings.browserForward,
+            globalSearch: state.hotkeys.bindings.globalSearch,
+            navigateHome: state.hotkeys.bindings.navigateHome,
+            zoomIn: state.hotkeys.bindings.zoomIn,
+            zoomOut: state.hotkeys.bindings.zoomOut,
+        }),
+        shallow,
+    );
+
 export const useMpvSettings = () =>
     useSettingsStore((state) => state.playback.mpvProperties, shallow);