various performance refactors

src/renderer/router/app-outlet.tsx

@@ -1,37 +1,45 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Navigate, Outlet } from 'react-router';
+import { shallow } from 'zustand/shallow';
 
 import { isServerLock } from '/@/renderer/features/action-required/utils/window-properties';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useAuthStoreActions, useCurrentServer } from '/@/renderer/store';
+import { useAuthStore, useAuthStoreActions } from '/@/renderer/store';
 
 const normalizeUrl = (url: string) => url.replace(/\/$/, '');
 
 export const AppOutlet = () => {
-    const currentServer = useCurrentServer();
+    const currentServer = useAuthStore(
+        (state) =>
+            state.currentServer
+                ? {
+                      id: state.currentServer.id,
+                      url: state.currentServer.url,
+                  }
+                : null,
+        shallow,
+    );
     const { deleteServer, setCurrentServer } = useAuthStoreActions();
 
-    const isActionsRequired = useMemo(() => {
-        // When SERVER_LOCK is enabled and the configured URL has changed,
-        // clear the stale session so the user re-authenticates against the new server.
-        if (isServerLock() && currentServer && window.SERVER_URL) {
-            const configuredUrl = normalizeUrl(window.SERVER_URL);
-            const persistedUrl = normalizeUrl(currentServer.url);
-
-            if (configuredUrl !== persistedUrl) {
-                deleteServer(currentServer.id);
-                setCurrentServer(null);
-                return true;
-            }
+    const hasServerLockMismatch = useMemo(() => {
+        if (!isServerLock() || !currentServer || !window.SERVER_URL) {
+            return false;
         }
 
-        const isServerRequired = !currentServer;
+        const configuredUrl = normalizeUrl(window.SERVER_URL);
+        const persistedUrl = normalizeUrl(currentServer.url);
 
-        const actions = [isServerRequired];
-        const isActionRequired = actions.some((c) => c);
+        return configuredUrl !== persistedUrl;
+    }, [currentServer]);
 
-        return isActionRequired;
-    }, [currentServer, deleteServer, setCurrentServer]);
+    useEffect(() => {
+        if (hasServerLockMismatch && currentServer) {
+            deleteServer(currentServer.id);
+            setCurrentServer(null);
+        }
+    }, [currentServer, deleteServer, hasServerLockMismatch, setCurrentServer]);
+
+    const isActionsRequired = !currentServer || hasServerLockMismatch;
 
     if (isActionsRequired) {
         return <Navigate replace to={AppRoute.ACTION_REQUIRED} />;

src/renderer/router/app-router.tsx

@@ -186,22 +186,22 @@ const VisualizerSettingsContextModal = (props: any) => (
     </Suspense>
 );
 
+const appRouterModals = {
+    addToPlaylist: AddToPlaylistContextModal,
+    base: BaseContextModal,
+    lyricsSettings: LyricsSettingsContextModal,
+    saveAndReplace: SaveAndReplaceContextModal,
+    settings: SettingsContextModal,
+    shareItem: ShareItemContextModal,
+    shuffleAll: ShuffleAllContextModal,
+    updatePlaylist: UpdatePlaylistContextModal,
+    visualizerSettings: VisualizerSettingsContextModal,
+};
+
 export const AppRouter = () => {
     const router = (
         <HashRouter>
-            <ModalsProvider
-                modals={{
-                    addToPlaylist: AddToPlaylistContextModal,
-                    base: BaseContextModal,
-                    lyricsSettings: LyricsSettingsContextModal,
-                    saveAndReplace: SaveAndReplaceContextModal,
-                    settings: SettingsContextModal,
-                    shareItem: ShareItemContextModal,
-                    shuffleAll: ShuffleAllContextModal,
-                    updatePlaylist: UpdatePlaylistContextModal,
-                    visualizerSettings: VisualizerSettingsContextModal,
-                }}
-            >
+            <ModalsProvider modals={appRouterModals}>
                 <RouterErrorBoundary>
                     <Routes>
                         <Route element={<AuthenticationOutlet />}>

src/renderer/router/titlebar-outlet.tsx

@@ -3,11 +3,11 @@ import { Outlet } from 'react-router';
 import styles from './titlebar-outlet.module.css';
 
 import { Titlebar } from '/@/renderer/features/titlebar/components/titlebar';
-import { useWindowSettings } from '/@/renderer/store/settings.store';
+import { useWindowBarStyle } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/shared/types/types';
 
 export const TitlebarOutlet = () => {
-    const { windowBarStyle } = useWindowSettings();
+    const windowBarStyle = useWindowBarStyle();
 
     return (
         <>