large performance refactor

src/renderer/layouts/default-layout/left-sidebar.tsx

@@ -5,7 +5,7 @@ import styles from './left-sidebar.module.css';
 import { ResizeHandle } from '/@/renderer/features/shared/components/resize-handle';
 import { CollapsedSidebar } from '/@/renderer/features/sidebar/components/collapsed-sidebar';
 import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
-import { useSidebarStore } from '/@/renderer/store';
+import { useAppStore } from '/@/renderer/store';
 
 interface LeftSidebarProps {
     isResizing: boolean;
@@ -14,7 +14,7 @@ interface LeftSidebarProps {
 
 export const LeftSidebar = ({ isResizing, startResizing }: LeftSidebarProps) => {
     const sidebarRef = useRef<HTMLDivElement | null>(null);
-    const { collapsed } = useSidebarStore();
+    const collapsed = useAppStore((state) => state.sidebar.collapsed);
 
     return (
         <aside className={styles.container} id="sidebar">

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

@@ -2,13 +2,14 @@ import clsx from 'clsx';
 import { motion } from 'motion/react';
 import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { Outlet } from 'react-router';
+import { shallow } from 'zustand/shallow';
 
 import styles from './main-content.module.css';
 
 import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
 import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
 import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
-import { useAppStoreActions, useSidebarStore } from '/@/renderer/store';
+import { useAppStore, useAppStoreActions } from '/@/renderer/store';
 import { useGeneralSettings } from '/@/renderer/store/settings.store';
 import { constrainRightSidebarWidth, constrainSidebarWidth } from '/@/renderer/utils';
 import { Spinner } from '/@/shared/components/spinner/spinner';
@@ -16,7 +17,15 @@ import { Spinner } from '/@/shared/components/spinner/spinner';
 const MINIMUM_SIDEBAR_WIDTH = 260;
 
 export const MainContent = ({ shell }: { shell?: boolean }) => {
-    const { collapsed, leftWidth, rightExpanded, rightWidth } = useSidebarStore();
+    const { collapsed, leftWidth, rightExpanded, rightWidth } = useAppStore(
+        (state) => ({
+            collapsed: state.sidebar.collapsed,
+            leftWidth: state.sidebar.leftWidth,
+            rightExpanded: state.sidebar.rightExpanded,
+            rightWidth: state.sidebar.rightWidth,
+        }),
+        shallow,
+    );
     const { setSideBar } = useAppStoreActions();
     const { sideQueueType } = useGeneralSettings();
     const [isResizing, setIsResizing] = useState(false);

src/renderer/layouts/default-layout/right-sidebar.tsx

@@ -4,7 +4,7 @@ import styles from './right-sidebar.module.css';
 
 import { SidebarPlayQueue } from '/@/renderer/features/now-playing/components/sidebar-play-queue';
 import { ResizeHandle } from '/@/renderer/features/shared/components/resize-handle';
-import { useGeneralSettings, useSidebarStore } from '/@/renderer/store';
+import { useAppStore, useGeneralSettings } from '/@/renderer/store';
 
 // const queueDrawerVariants: Variants = {
 //     closed: (windowBarStyle) => ({
@@ -54,7 +54,7 @@ export const RightSidebar = forwardRef(
         { isResizing: isResizingRight, startResizing }: RightSidebarProps,
         ref: Ref<HTMLDivElement>,
     ) => {
-        const { rightExpanded } = useSidebarStore();
+        const rightExpanded = useAppStore((state) => state.sidebar.rightExpanded);
         const { sideQueueType } = useGeneralSettings();
 
         return (

src/renderer/layouts/default-layout/side-drawer-queue.tsx

@@ -6,7 +6,7 @@ import styles from './side-drawer-queue.module.css';
 
 import { DrawerPlayQueue } from '/@/renderer/features/now-playing/components/drawer-play-queue';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useAppStore, useSidebarStore } from '/@/renderer/store';
+import { useAppStore } from '/@/renderer/store';
 import { Icon } from '/@/shared/components/icon/icon';
 import { useDisclosure } from '/@/shared/hooks/use-disclosure';
 import { useTimeout } from '/@/shared/hooks/use-timeout';
@@ -66,7 +66,7 @@ const queueDrawerButtonVariants: Variants = {
 export const SideDrawerQueue = () => {
     const location = useLocation();
     const [drawer, drawerHandler] = useDisclosure(false);
-    const { rightExpanded } = useSidebarStore();
+    const rightExpanded = useAppStore((state) => state.sidebar.rightExpanded);
 
     const drawerTimeout = useTimeout(() => drawerHandler.open(), 500);