feat: add miniapp icon to navbar right

src/renderer/src/components/Popups/AppStorePopover.tsx

@@ -0,0 +1,60 @@
+import { Center } from '@renderer/components/Layout'
+import { getAllMinApps } from '@renderer/config/minapps'
+import App from '@renderer/pages/apps/App'
+import { Popover } from 'antd'
+import { Empty } from 'antd'
+import { isEmpty } from 'lodash'
+import { FC, useState } from 'react'
+import styled from 'styled-components'
+
+import Scrollbar from '../Scrollbar'
+
+interface Props {
+  children: React.ReactNode
+}
+
+const AppStorePopover: FC<Props> = ({ children }) => {
+  const [open, setOpen] = useState(false)
+  const apps = getAllMinApps()
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const content = (
+    <PopoverContent>
+      <AppsContainer>
+        {apps.map((app) => (
+          <App key={app.id} app={app} onClick={handleClose} size={50} />
+        ))}
+        {isEmpty(apps) && (
+          <Center>
+            <Empty />
+          </Center>
+        )}
+      </AppsContainer>
+    </PopoverContent>
+  )
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      content={content}
+      trigger="click"
+      placement="bottomRight"
+      overlayInnerStyle={{ padding: 25 }}>
+      {children}
+    </Popover>
+  )
+}
+
+const PopoverContent = styled(Scrollbar)``
+
+const AppsContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 25px 35px;
+`
+
+export default AppStorePopover

src/renderer/src/pages/apps/App.tsx

@@ -5,16 +5,26 @@ import styled from 'styled-components'
 
 interface Props {
   app: MinAppType
+  onClick?: () => void
+  size?: number
 }
 
-const App: FC<Props> = ({ app }) => {
+const App: FC<Props> = ({ app, onClick, size = 60 }) => {
-  const onClick = () => {
+  const handleClick = () => {
     MinApp.start(app)
+    onClick?.()
   }
 
   return (
-    <Container onClick={onClick}>
+    <Container onClick={handleClick}>
-      <AppIcon src={app.logo} style={{ border: app.bodered ? '0.5px solid var(--color-border)' : 'none' }} />
+      <AppIcon
+        src={app.logo}
+        style={{
+          border: app.bodered ? '0.5px solid var(--color-border)' : 'none',
+          width: `${size}px`,
+          height: `${size}px`
+        }}
+      />
       <AppTitle>{app.name}</AppTitle>
     </Container>
   )
@@ -26,12 +36,9 @@ const Container = styled.div`
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  width: 65px;
 `
 
 const AppIcon = styled.img`
-  width: 60px;
-  height: 60px;
   border-radius: 16px;
   user-select: none;
   -webkit-user-drag: none;
@@ -43,6 +50,7 @@ const AppTitle = styled.div`
   color: var(--color-text-soft);
   text-align: center;
   user-select: none;
+  white-space: nowrap;
 `
 
 export default App

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

@@ -2,6 +2,7 @@ import { SearchOutlined } from '@ant-design/icons'
 import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
 import AssistantSettingsPopup from '@renderer/components/AssistantSettings'
 import { HStack } from '@renderer/components/Layout'
+import AppStorePopover from '@renderer/components/Popups/AppStorePopover'
 import SearchPopup from '@renderer/components/Popups/SearchPopup'
 import { isMac, isWindows } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
@@ -43,22 +44,22 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
     <Navbar>
       {showAssistants && (
         <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}>
-          <NewButton onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
+          <NavbarIcon onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
             <i className="iconfont icon-hide-sidebar" />
-          </NewButton>
+          </NavbarIcon>
-          <NewButton onClick={() => SearchPopup.show()}>
+          <NavbarIcon onClick={() => SearchPopup.show()}>
             <SearchOutlined />
-          </NewButton>
+          </NavbarIcon>
         </NavbarLeft>
       )}
       <NavbarRight style={{ justifyContent: 'space-between', paddingRight: isWindows ? 140 : 12, flex: 1 }}>
         <HStack alignItems="center">
           {!showAssistants && (
-            <NewButton
+            <NavbarIcon
               onClick={() => toggleShowAssistants()}
               style={{ marginRight: isMac ? 8 : 25, marginLeft: isMac ? 4 : 0 }}>
               <i className="iconfont icon-show-sidebar" />
-            </NewButton>
+            </NavbarIcon>
           )}
           <TitleText
             style={{ marginRight: 10, cursor: 'pointer' }}
@@ -69,10 +70,15 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
           <SelectModelButton assistant={assistant} />
         </HStack>
         <HStack alignItems="center">
+          <AppStorePopover>
+            <NavbarIcon style={{ marginRight: isMac ? 8 : 25, marginLeft: isMac ? 4 : 0 }}>
+              <i className="iconfont icon-appstore" />
+            </NavbarIcon>
+          </AppStorePopover>
           {topicPosition === 'right' && (
-            <NewButton onClick={toggleShowTopics}>
+            <NavbarIcon onClick={toggleShowTopics}>
               <i className={`iconfont icon-${showTopics ? 'show' : 'hide'}-sidebar`} />
-            </NewButton>
+            </NavbarIcon>
           )}
         </HStack>
       </NavbarRight>
@@ -80,7 +86,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
   )
 }
 
-export const NewButton = styled.div`
+export const NavbarIcon = styled.div`
   -webkit-app-region: none;
   border-radius: 8px;
   height: 30px;
@@ -100,6 +106,9 @@ export const NewButton = styled.div`
     &.icon-a-darkmode {
       font-size: 20px;
     }
+    &.icon-appstore {
+      font-size: 20px;
+    }
   }
   .anticon {
     color: var(--color-icon);