fix(Navbar): some bugs in old ui for custom max/min/close menu (#10045)

* feat(Navbar): add WindowControls for Windows and Linux, clean up NavbarCenter component

* feat(Navbar): add NavbarRight component for improved layout in MinAppsPage

* feat(Navbar): enhance layout and styling for WindowControls and Navbar components

* lint err

* fix new ui

src/renderer/src/components/Tab/TabContainer.tsx

@@ -269,8 +269,8 @@ const TabsContainer: React.FC<TabsContainerProps> = ({ children }) => {
           <SettingsButton onClick={handleSettingsClick} $active={activeTabId === 'settings'}>
             <Settings size={16} />
           </SettingsButton>
-          <WindowControls />
         </RightButtonsContainer>
+        <WindowControls />
       </TabsBar>
       <TabContent>{children}</TabContent>
     </Container>

src/renderer/src/components/WindowControls/WindowControls.styled.ts

@@ -1,11 +1,15 @@
 import styled from 'styled-components'
 
 export const WindowControlsContainer = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
   display: flex;
   align-items: center;
-  height: 100%;
+  height: var(--navbar-height);
   -webkit-app-region: no-drag;
   user-select: none;
+  z-index: 9999;
 `
 
 export const ControlButton = styled.button<{ $isClose?: boolean }>`

src/renderer/src/components/app/Navbar.tsx

@@ -19,9 +19,12 @@ export const Navbar: FC<Props> = ({ children, ...props }) => {
   }
 
   return (
-    <NavbarContainer {...props} style={{ backgroundColor }}>
-      {children}
-    </NavbarContainer>
+    <>
+      <NavbarContainer {...props} style={{ backgroundColor }}>
+        {children}
+      </NavbarContainer>
+      {(isWin || isLinux) && <WindowControls />}
+    </>
   )
 }
 
@@ -30,17 +33,7 @@ export const NavbarLeft: FC<Props> = ({ children, ...props }) => {
 }
 
 export const NavbarCenter: FC<Props> = ({ children, ...props }) => {
-  return (
-    <NavbarCenterContainer {...props}>
-      {children}
-      {/* Add WindowControls for Windows and Linux in NavbarCenter */}
-      {(isWin || isLinux) && (
-        <div style={{ position: 'absolute', right: 0, top: 0, height: '100%', display: 'flex', alignItems: 'center' }}>
-          <WindowControls />
-        </div>
-      )}
-    </NavbarCenterContainer>
-  )
+  return <NavbarCenterContainer {...props}>{children}</NavbarCenterContainer>
 }
 
 export const NavbarRight: FC<Props> = ({ children, ...props }) => {
@@ -101,8 +94,8 @@ const NavbarRightContainer = styled.div<{ $isFullscreen: boolean }>`
   display: flex;
   align-items: center;
   padding: 0 12px;
-  padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWin ? '140px' : isLinux ? '120px' : '12px')};
   justify-content: flex-end;
+  flex: 1;
 `
 
 const NavbarMainContainer = styled.div<{ $isFullscreen: boolean }>`

src/renderer/src/pages/home/Navbar.tsx

@@ -1,7 +1,6 @@
 import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
 import SearchPopup from '@renderer/components/Popups/SearchPopup'
-import WindowControls from '@renderer/components/WindowControls'
 import { isLinux, isWin } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { modelGenerating } from '@renderer/hooks/useRuntime'
@@ -66,36 +65,6 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
     })
   }
 
-  const ControlButtons: FC<{ IconComponent: typeof NavbarIcon }> = ({ IconComponent }) => (
-    <>
-      <Tooltip title={t('chat.assistant.search.placeholder')} mouseEnterDelay={0.8}>
-        <IconComponent onClick={() => SearchPopup.show()}>
-          <Search size={18} />
-        </IconComponent>
-      </Tooltip>
-      <Tooltip title={t('navbar.expand')} mouseEnterDelay={0.8}>
-        <IconComponent onClick={handleNarrowModeToggle}>
-          <i className="iconfont icon-icon-adaptive-width"></i>
-        </IconComponent>
-      </Tooltip>
-      <UpdateAppButton />
-      {topicPosition === 'right' && !showTopics && (
-        <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}>
-          <NavbarIcon onClick={toggleShowTopics}>
-            <PanelLeftClose size={18} />
-          </NavbarIcon>
-        </Tooltip>
-      )}
-      {topicPosition === 'right' && showTopics && (
-        <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={2}>
-          <NavbarIcon onClick={toggleShowTopics}>
-            <PanelRightClose size={18} />
-          </NavbarIcon>
-        </Tooltip>
-      )}
-    </>
-  )
-
   return (
     <Navbar className="home-navbar">
       <AnimatePresence initial={false}>
@@ -116,53 +85,65 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
           </motion.div>
         )}
       </AnimatePresence>
+      {!showAssistants && (
+        <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={0.8}>
+          <NavbarIcon onClick={() => toggleShowAssistants()} style={{ marginRight: 8, marginLeft: -12 }}>
+            <PanelRightClose size={18} />
+          </NavbarIcon>
+        </Tooltip>
+      )}
+      <AnimatePresence initial={false}>
+        {!showAssistants && (
+          <motion.div
+            initial={{ width: 0, opacity: 0 }}
+            animate={{ width: 'auto', opacity: 1 }}
+            exit={{ width: 0, opacity: 0 }}
+            transition={{ duration: 0.3, ease: 'easeInOut' }}
+            style={{ overflow: 'hidden' }}>
+            <NavbarIcon onClick={onShowAssistantsDrawer} style={{ marginRight: 8 }}>
+              <Menu size={18} />
+            </NavbarIcon>
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <HStack alignItems="center" gap={6}>
+        <SelectModelButton assistant={assistant} />
+      </HStack>
       <NavbarRight
-        style={{ justifyContent: 'space-between', flex: 1, position: 'relative' }}
+        style={{
+          justifyContent: 'flex-end',
+          flex: 1,
+          position: 'relative',
+          paddingRight: isWin || isLinux ? '144px' : '6px'
+        }}
         className="home-navbar-right">
-        <HStack alignItems="center">
-          {!showAssistants && (
-            <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={0.8}>
-              <NavbarIcon onClick={() => toggleShowAssistants()} style={{ marginRight: 8, marginLeft: -12 }}>
+        <HStack alignItems="center" gap={6}>
+          <Tooltip title={t('chat.assistant.search.placeholder')} mouseEnterDelay={0.8}>
+            <NarrowIcon onClick={() => SearchPopup.show()}>
+              <Search size={18} />
+            </NarrowIcon>
+          </Tooltip>
+          <Tooltip title={t('navbar.expand')} mouseEnterDelay={0.8}>
+            <NarrowIcon onClick={handleNarrowModeToggle}>
+              <i className="iconfont icon-icon-adaptive-width"></i>
+            </NarrowIcon>
+          </Tooltip>
+          <UpdateAppButton />
+          {topicPosition === 'right' && !showTopics && (
+            <Tooltip title={t('navbar.show_sidebar')} mouseEnterDelay={2}>
+              <NavbarIcon onClick={toggleShowTopics}>
+                <PanelLeftClose size={18} />
+              </NavbarIcon>
+            </Tooltip>
+          )}
+          {topicPosition === 'right' && showTopics && (
+            <Tooltip title={t('navbar.hide_sidebar')} mouseEnterDelay={2}>
+              <NavbarIcon onClick={toggleShowTopics}>
                 <PanelRightClose size={18} />
               </NavbarIcon>
             </Tooltip>
           )}
-          <AnimatePresence initial={false}>
-            {!showAssistants && (
-              <motion.div
-                initial={{ width: 0, opacity: 0 }}
-                animate={{ width: 'auto', opacity: 1 }}
-                exit={{ width: 0, opacity: 0 }}
-                transition={{ duration: 0.3, ease: 'easeInOut' }}
-                style={{ overflow: 'hidden' }}>
-                <NavbarIcon onClick={onShowAssistantsDrawer} style={{ marginRight: 8 }}>
-                  <Menu size={18} />
-                </NavbarIcon>
-              </motion.div>
-            )}
-          </AnimatePresence>
-          <SelectModelButton assistant={assistant} />
         </HStack>
-        <HStack alignItems="center" gap={6}>
-          {/* For Mac, show search and expand without WindowControls */}
-          {!isWin && !isLinux && <ControlButtons IconComponent={NarrowIcon} />}
-        </HStack>
-        {/* Search, Expand and WindowControls positioned at the right edge */}
-        {(isWin || isLinux) && (
-          <div
-            style={{
-              position: 'absolute',
-              right: 0,
-              top: 0,
-              height: '100%',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 6
-            }}>
-            <ControlButtons IconComponent={NavbarIcon} />
-            <WindowControls />
-          </div>
-        )}
       </NavbarRight>
     </Navbar>
   )

src/renderer/src/pages/minapps/MinAppsPage.tsx

@@ -1,6 +1,7 @@
-import { Navbar, NavbarMain } from '@renderer/components/app/Navbar'
+import { Navbar, NavbarMain, NavbarRight } from '@renderer/components/app/Navbar'
 import App from '@renderer/components/MinApp/MinApp'
 import Scrollbar from '@renderer/components/Scrollbar'
+import { isLinux, isWin } from '@renderer/config/constant'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import { useNavbarPosition } from '@renderer/hooks/useSettings'
 import { Button, Input } from 'antd'
@@ -57,13 +58,21 @@ const AppsPage: FC = () => {
             value={search}
             onChange={(e) => setSearch(e.target.value)}
           />
+        </NavbarMain>
+        <NavbarRight
+          style={{
+            justifyContent: 'flex-end',
+            flex: 1,
+            position: 'relative',
+            paddingRight: isWin || isLinux ? '144px' : '6px'
+          }}>
           <Button
             type="text"
             className="nodrag"
             icon={<SettingsIcon size={18} color="var(--color-text-2)" />}
             onClick={MinappSettingsPopup.show}
           />
-        </NavbarMain>
+        </NavbarRight>
       </Navbar>
       <ContentContainer id="content-container">
         <MainContainer>

src/renderer/src/pages/settings/DataSettings/DataSettings.tsx

@@ -574,8 +574,8 @@ const DataSettings: FC = () => {
     }
 
     handleDataMigration()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     // dont add others to deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const onSkipBackupFilesChange = (value: boolean) => {