From fa8bf61532fdc5a1104d999c71c773b9f227f23c Mon Sep 17 00:00:00 2001
From: ousugo <dkzyxh@gmail.com>
Date: Mon, 17 Feb 2025 03:48:42 +0800
Subject: [PATCH] fix: sidebar navigation and active state handling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 当固定在侧边栏的小程序被打开时，对应图标显示为被选中
- 修复点击两次主题切换按钮会导致当前 Webview 被错误关闭的问题
- 修复当 Webview 处于打开状态，点击侧边栏按钮无法立即跳转到对应界面的问题
- 修复打开帮助文档，其按钮没有显示为被选中的问题
- 修复在设置界面时打开帮助文档，设置按钮继续显示为被选中的问题
---
 src/renderer/src/components/app/Sidebar.tsx | 33 ++++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index 355a30a5..94cd5610 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -77,9 +77,11 @@ const Sidebar: FC = () => {
           </AppsContainer>
         )}
       </MainMenusContainer>
-      <Menus onClick={MinApp.onClose}>
+      <Menus>
         <Tooltip title={t('docs.title')} mouseEnterDelay={0.8} placement="right">
-          <Icon onClick={onOpenDocs}>
+          <Icon
+            onClick={onOpenDocs}
+            className={minappShow && MinApp.app?.url === 'https://docs.cherry-ai.com/' ? 'active' : ''}>
             <QuestionCircleOutlined />
           </Icon>
         </Tooltip>
@@ -93,8 +95,14 @@ const Sidebar: FC = () => {
           </Icon>
         </Tooltip>
         <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">
-          <StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
-            <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
+          <StyledLink
+            onClick={async () => {
+              if (minappShow) {
+                await MinApp.close()
+              }
+              await to(isLocalAi ? '/settings/assistant' : '/settings/provider')
+            }}>
+            <Icon className={pathname.startsWith('/settings') && !minappShow ? 'active' : ''}>
               <i className="iconfont icon-setting" />
             </Icon>
           </StyledLink>
@@ -108,10 +116,11 @@ const MainMenus: FC = () => {
   const { t } = useTranslation()
   const { pathname } = useLocation()
   const { sidebarIcons } = useSettings()
+  const { minappShow } = useRuntime()
   const navigate = useNavigate()
 
-  const isRoute = (path: string): string => (pathname === path ? 'active' : '')
-  const isRoutes = (path: string): string => (pathname.startsWith(path) ? 'active' : '')
+  const isRoute = (path: string): string => (pathname === path && !minappShow ? 'active' : '')
+  const isRoutes = (path: string): string => (pathname.startsWith(path) && !minappShow ? 'active' : '')
 
   const iconMap = {
     assistants: <i className="iconfont icon-chat" />,
@@ -139,7 +148,13 @@ const MainMenus: FC = () => {
 
     return (
       <Tooltip key={icon} title={t(`${icon}.title`)} mouseEnterDelay={0.8} placement="right">
-        <StyledLink onClick={() => navigate(path)}>
+        <StyledLink
+          onClick={async () => {
+            if (minappShow) {
+              await MinApp.close()
+            }
+            navigate(path)
+          }}>
           <Icon className={isActive}>{iconMap[icon]}</Icon>
         </StyledLink>
       </Tooltip>
@@ -150,6 +165,7 @@ const MainMenus: FC = () => {
 const PinnedApps: FC = () => {
   const { pinned, updatePinnedMinapps } = useMinapps()
   const { t } = useTranslation()
+  const { minappShow } = useRuntime()
 
   return (
     <DragableList list={pinned} onUpdate={updatePinnedMinapps} listStyle={{ marginBottom: 5 }}>
@@ -164,11 +180,12 @@ const PinnedApps: FC = () => {
             }
           }
         ]
+        const isActive = minappShow && MinApp.app?.id === app.id
         return (
           <Tooltip key={app.id} title={app.name} mouseEnterDelay={0.8} placement="right">
             <StyledLink>
               <Dropdown menu={{ items: menuItems }} trigger={['contextMenu']}>
-                <Icon onClick={() => MinApp.start(app)}>
+                <Icon onClick={() => MinApp.start(app)} className={isActive ? 'active' : ''}>
                   <MinAppIcon size={20} app={app} style={{ borderRadius: 6 }} />
                 </Icon>
               </Dropdown>