fix: custom logos

src/layouts/Logo.tsx

@@ -1,13 +1,17 @@
 // @ts-nocheck
-import GpustackLogo from '@/assets/images/gpustack-logo.png';
-import SmallLogo from '@/assets/images/small-logo-200x200.png';
+import { useLogo } from '@/hooks/use-logo';
 import React from 'react';
 
 const LogoIcon: React.FC = () => {
-  return <img src={GpustackLogo} alt="logo" style={{ height: 24 }} />;
+  const { sidebarLogo } = useLogo();
+
+  return <img src={sidebarLogo} alt="logo" style={{ height: 24 }} />;
 };
+
 const SLogoIcon: React.FC = () => {
-  return <img src={SmallLogo} alt="logo" style={{ height: 24 }} />;
+  const { miniLogo } = useLogo();
+
+  return <img src={miniLogo} alt="logo" style={{ height: 24 }} />;
 };
 
 export { LogoIcon, SLogoIcon };

src/layouts/extraRender.tsx

@@ -119,6 +119,7 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
   };
 
   const { initialState } = initialInfo;
+  const GlobalSettings = pluginManager?.components?.GlobalSettings;
   console.log('plugin+++++++++', pluginManager);
 
   const navigate = useNavigate();
@@ -303,6 +304,7 @@ export const ExtraContent = (props: { isDarkTheme?: boolean }) => {
           />
         </IconWrapper>
       </DropdownActions>
+      {GlobalSettings && <GlobalSettings></GlobalSettings>}
       <DropdownActions menu={{ ...userMenu }} popupRender={userPopupRender}>
         <IconWrapper>
           <Avatar

src/layouts/index.tsx

@@ -39,7 +39,7 @@ import {
 import { Button, ConfigProvider, Modal, theme } from 'antd';
 import { useAtom } from 'jotai';
 import 'overlayscrollbars/overlayscrollbars.css';
-import { useEffect, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import { PageContainerInner } from '../pages/_components/page-box';
 import Exception from './Exception';
 import './Layout.css';
@@ -227,32 +227,6 @@ export default (props: any) => {
     return NO_CONTAINER_PAGES.includes(matchedRoute?.name as string);
   }, [matchedRoute]);
 
-  useEffect(() => {
-    const initializeScroller = () => {
-      // const body = document.querySelector('.ant-pro-grid-content-children');
-      // if (body) {
-      //   const ins = initialize(body);
-      //   window.__GPUSTACK_BODY_SCROLLER__ = ins;
-      //   return true;
-      // }
-      // return false;
-      return true;
-    };
-
-    // Try to initialize immediately
-    if (!initializeScroller()) {
-      // If element not found, retry with requestAnimationFrame
-      const rafId = requestAnimationFrame(() => {
-        if (!initializeScroller()) {
-          // If still not found, retry after a short delay
-          const timeoutId = setTimeout(initializeScroller, 100);
-          return () => clearTimeout(timeoutId);
-        }
-      });
-      return () => cancelAnimationFrame(rafId);
-    }
-  }, [initialize]);
-
   const collapsed = useMemo(() => {
     return userSettings.collapsed || false;
   }, [userSettings.collapsed]);
@@ -346,7 +320,6 @@ export default (props: any) => {
   return (
     <ConfigProvider
       componentSize="large"
-      key={userSettings.colorPrimary}
       theme={{
         algorithm: userSettings.isDarkTheme
           ? theme.darkAlgorithm