refactor(Navbar): simplify and modularize button components for search and expand functionality (#10036)

* fix macos

* delete
This commit is contained in:
beyondkmp 2025-09-08 13:03:46 +08:00 committed by GitHub
parent 8a67a87461
commit 0a554661ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -66,6 +66,36 @@ 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}>
@ -114,36 +144,8 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
<SelectModelButton assistant={assistant} />
</HStack>
<HStack alignItems="center" gap={6}>
<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>
)}
{/* For Mac, show search and expand without WindowControls */}
{!isWin && !isLinux && (
<>
<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>
</>
)}
{!isWin && !isLinux && <ControlButtons IconComponent={NarrowIcon} />}
</HStack>
{/* Search, Expand and WindowControls positioned at the right edge */}
{(isWin || isLinux) && (
@ -157,16 +159,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
alignItems: 'center',
gap: 6
}}>
<Tooltip title={t('chat.assistant.search.placeholder')} mouseEnterDelay={0.8}>
<NavbarIcon onClick={() => SearchPopup.show()}>
<Search size={18} />
</NavbarIcon>
</Tooltip>
<Tooltip title={t('navbar.expand')} mouseEnterDelay={0.8}>
<NavbarIcon onClick={handleNarrowModeToggle}>
<i className="iconfont icon-icon-adaptive-width"></i>
</NavbarIcon>
</Tooltip>
<ControlButtons IconComponent={NavbarIcon} />
<WindowControls />
</div>
)}