various performance refactors

src/renderer/layouts/default-layout.tsx

@@ -7,7 +7,7 @@ import styles from './default-layout.module.css';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { MainContent } from '/@/renderer/layouts/default-layout/main-content';
 import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
-import { useSettingsStore, useWindowSettings } from '/@/renderer/store/settings.store';
+import { useSettingsStore, useWindowBarStyle } from '/@/renderer/store/settings.store';
 import { Platform, PlayerType } from '/@/shared/types/types';
 
 if (!isElectron()) {
@@ -29,7 +29,7 @@ interface DefaultLayoutProps {
 }
 
 export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
-    const { windowBarStyle } = useWindowSettings();
+    const windowBarStyle = useWindowBarStyle();
 
     return (
         <>

src/renderer/layouts/default-layout/main-content.tsx

@@ -175,13 +175,18 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
     );
 
     useEffect(() => {
+        if (!isResizing && !isResizingRight) {
+            return;
+        }
+
         window.addEventListener('mousemove', resize);
         window.addEventListener('mouseup', stopResizing);
+
         return () => {
             window.removeEventListener('mousemove', resize);
             window.removeEventListener('mouseup', stopResizing);
         };
-    }, [resize, stopResizing]);
+    }, [isResizing, isResizingRight, resize, stopResizing]);
 
     return (
         <motion.div

src/renderer/layouts/mobile-layout/mobile-layout.tsx

@@ -10,8 +10,7 @@ import { FullScreenVisualizer } from '/@/renderer/features/player/components/ful
 import { MobileFullscreenPlayer } from '/@/renderer/features/player/components/mobile-fullscreen-player';
 import { MobileSidebar } from '/@/renderer/features/sidebar/components/mobile-sidebar';
 import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
-import { useFullScreenPlayerStore } from '/@/renderer/store';
-import { useWindowSettings } from '/@/renderer/store';
+import { useFullScreenPlayerOverlayState, useWindowBarStyle } from '/@/renderer/store';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Drawer } from '/@/shared/components/drawer/drawer';
 import { useDisclosure } from '/@/shared/hooks/use-disclosure';
@@ -32,8 +31,8 @@ export const MobileLayout = ({ shell }: MobileLayoutProps) => {
     const {
         expanded: isFullScreenPlayerExpanded,
         visualizerExpanded: isFullScreenVisualizerExpanded,
-    } = useFullScreenPlayerStore();
-    const { windowBarStyle } = useWindowSettings();
+    } = useFullScreenPlayerOverlayState();
+    const windowBarStyle = useWindowBarStyle();
 
     return (
         <>

src/renderer/layouts/responsive-layout.tsx

@@ -1,4 +1,5 @@
 import isElectron from 'is-electron';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router';
 
 import { useAppTracker } from '/@/renderer/features/analytics/hooks/use-app-tracker';
@@ -9,8 +10,8 @@ import { DefaultLayout } from '/@/renderer/layouts/default-layout';
 import { MobileLayout } from '/@/renderer/layouts/mobile-layout/mobile-layout';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
-    useCommandPalette,
-    useHotkeySettings,
+    useCommandPaletteState,
+    useLayoutHotkeyBindings,
     useSettingsStoreActions,
     useZoomFactor,
 } from '/@/renderer/store';
@@ -42,40 +43,72 @@ export const ResponsiveLayout = ({ shell }: ResponsiveLayoutProps) => {
     );
 };
 
+const localSettings = isElectron() ? window.api.localSettings : null;
+
 const LayoutHotkeys = () => {
     const navigate = useNavigate();
-    const localSettings = isElectron() ? window.api.localSettings : null;
     const zoomFactor = useZoomFactor();
     const { setSettings } = useSettingsStoreActions();
-    const { bindings } = useHotkeySettings();
-    const { opened, ...handlers } = useCommandPalette();
+    const bindings = useLayoutHotkeyBindings();
+    const { close, open, opened, toggle } = useCommandPaletteState();
 
-    const updateZoom = (increase: number) => {
-        const newVal = zoomFactor + increase;
-        if (newVal > 300 || newVal < 50 || !isElectron()) return;
-        setSettings({
-            general: {
-                zoomFactor: newVal,
-            },
-        });
-        localSettings?.setZoomFactor(zoomFactor);
-    };
-    localSettings?.setZoomFactor(zoomFactor);
+    const handlers = useMemo(
+        () => ({
+            close,
+            open,
+            toggle,
+        }),
+        [close, open, toggle],
+    );
 
-    const zoomHotkeys: HotkeyItem[] = [
-        [bindings.zoomIn.hotkey, () => updateZoom(5)],
-        [bindings.zoomOut.hotkey, () => updateZoom(-5)],
-    ];
+    const updateZoom = useCallback(
+        (increase: number) => {
+            const newVal = zoomFactor + increase;
+            if (newVal > 300 || newVal < 50 || !localSettings) return;
 
-    useHotkeys([
-        [bindings.globalSearch.hotkey, () => handlers.open()],
-        [bindings.browserBack.hotkey, () => navigate(-1)],
-        [bindings.browserForward.hotkey, () => navigate(1)],
-        [bindings.navigateHome.hotkey, () => navigate(AppRoute.HOME)],
-        ...(isElectron() ? zoomHotkeys : []),
-    ]);
+            setSettings({
+                general: {
+                    zoomFactor: newVal,
+                },
+            });
+            localSettings?.setZoomFactor(newVal);
+        },
+        [setSettings, zoomFactor],
+    );
 
-    return <CommandPalette modalProps={{ handlers, opened }} />;
+    useEffect(() => {
+        if (localSettings) {
+            localSettings?.setZoomFactor(zoomFactor);
+        }
+    }, [zoomFactor]);
+
+    const hotkeys = useMemo<HotkeyItem[]>(
+        () => [
+            [bindings.globalSearch.hotkey, open],
+            [bindings.browserBack.hotkey, () => navigate(-1)],
+            [bindings.browserForward.hotkey, () => navigate(1)],
+            [bindings.navigateHome.hotkey, () => navigate(AppRoute.HOME)],
+            ...(localSettings
+                ? ([
+                      [bindings.zoomIn.hotkey, () => updateZoom(5)],
+                      [bindings.zoomOut.hotkey, () => updateZoom(-5)],
+                  ] as HotkeyItem[])
+                : []),
+        ],
+        [bindings, navigate, open, updateZoom],
+    );
+
+    const modalProps = useMemo(
+        () => ({
+            handlers,
+            opened,
+        }),
+        [handlers, opened],
+    );
+
+    useHotkeys(hotkeys);
+
+    return <CommandPalette modalProps={modalProps} />;
 };
 
 const GarbageCollection = () => {