refactor windowbar to prevent unnecessary renders

src/renderer/layouts/default-layout.tsx

@@ -10,7 +10,7 @@ import { CommandPalette } from '/@/renderer/features/search/components/command-p
 import { MainContent } from '/@/renderer/layouts/default-layout/main-content';
 import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useAppStore, useCommandPalette } from '/@/renderer/store';
+import { useCommandPalette } from '/@/renderer/store';
 import {
     useGeneralSettings,
     useHotkeySettings,
@@ -48,8 +48,6 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
     const settings = useGeneralSettings();
     const { setSettings } = useSettingsStoreActions();
 
-    const { privateMode } = useAppStore();
-
     const updateZoom = (increase: number) => {
         const newVal = settings.zoomFactor + increase;
         if (newVal > 300 || newVal < 50 || !isElectron()) return;
@@ -76,19 +74,6 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
         ...(isElectron() ? zoomHotkeys : []),
     ]);
 
-    // const title = useMemo(() => {
-    //     const statusString = playerStatus === PlayerStatus.PAUSED ? '(Paused) ' : '';
-    //     const queueString = length ? `(${index + 1} / ${length}) ` : '';
-    //     const privateModeString = privateMode ? '(Private mode)' : '';
-    //     const title = `${
-    //         length
-    //             ? `${statusString}${queueString}${currentSong?.name}${currentSong?.artistName ? ` — ${currentSong?.artistName} — Feishin` : ''}`
-    //             : 'Feishin'
-    //     }${privateMode ? ` ${privateModeString}` : ''}`;
-    //     document.title = title;
-    //     return title;
-    // }, [currentSong?.artistName, currentSong?.name, index, length, playerStatus, privateMode]);
-
     return (
         <>
             <div
@@ -98,7 +83,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
                 })}
                 id="default-layout"
             >
-                {windowBarStyle !== Platform.WEB && <WindowBar title="" />}
+                <WindowBar />
                 <MainContent shell={shell} />
                 <PlayerBar />
             </div>

src/renderer/layouts/window-bar.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import isElectron from 'is-electron';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { RiCheckboxBlankLine, RiCloseLine, RiSubtractLine } from 'react-icons/ri';
 
 import appIcon from '../../../assets/icons/32x32.png';
@@ -12,9 +12,9 @@ import macMinHover from './assets/min-mac-hover.png';
 import macMin from './assets/min-mac.png';
 import styles from './window-bar.module.css';
 
-import { useWindowSettings } from '/@/renderer/store';
+import { useAppStore, usePlayerData, usePlayerStatus, useWindowSettings } from '/@/renderer/store';
 import { Text } from '/@/shared/components/text/text';
-import { Platform } from '/@/shared/types/types';
+import { Platform, PlayerStatus } from '/@/shared/types/types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 
@@ -121,14 +121,13 @@ const MacOsControls = ({ controls, title }: WindowBarControlsProps) => {
     );
 };
 
-interface WindowBarProps {
+export const WindowBar = () => {
-    title: string;
-}
-
-export const WindowBar = ({ title }: WindowBarProps) => {
     const { windowBarStyle } = useWindowSettings();
+    const playerStatus = usePlayerStatus();
+    const { privateMode } = useAppStore();
     const handleMinimize = () => minimize();
 
+    const { currentSong, index, queueLength } = usePlayerData();
     const [max, setMax] = useState(localSettings?.env.START_MAXIMIZED || false);
 
     const handleMaximize = useCallback(() => {
@@ -142,6 +141,23 @@ export const WindowBar = ({ title }: WindowBarProps) => {
 
     const handleClose = useCallback(() => close(), []);
 
+    const title = useMemo(() => {
+        const statusString = playerStatus === PlayerStatus.PAUSED ? '(Paused) ' : '';
+        const queueString = queueLength ? `(${index + 1} / ${queueLength}) ` : '';
+        const privateModeString = privateMode ? '(Private mode)' : '';
+        const title = `${
+            queueLength
+                ? `${statusString}${queueString}${currentSong?.name}${currentSong?.artistName ? ` — ${currentSong?.artistName} — Feishin` : ''}`
+                : 'Feishin'
+        }${privateMode ? ` ${privateModeString}` : ''}`;
+        document.title = title;
+        return title;
+    }, [currentSong?.artistName, currentSong?.name, index, playerStatus, privateMode, queueLength]);
+
+    if (windowBarStyle === Platform.WEB) {
+        return null;
+    }
+
     return (
         <>
             {windowBarStyle === Platform.WINDOWS && (