diff --git a/src/renderer/src/components/Popups/AppStorePopover.tsx b/src/renderer/src/components/Popups/AppStorePopover.tsx new file mode 100644 index 00000000..c15d74fe --- /dev/null +++ b/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 = ({ children }) => { + const [open, setOpen] = useState(false) + const apps = getAllMinApps() + + const handleClose = () => { + setOpen(false) + } + + const content = ( + + + {apps.map((app) => ( + + ))} + {isEmpty(apps) && ( +
+ +
+ )} +
+
+ ) + + return ( + + {children} + + ) +} + +const PopoverContent = styled(Scrollbar)`` + +const AppsContainer = styled.div` + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 25px 35px; +` + +export default AppStorePopover diff --git a/src/renderer/src/pages/apps/App.tsx b/src/renderer/src/pages/apps/App.tsx index 02aa0379..e88da83f 100644 --- a/src/renderer/src/pages/apps/App.tsx +++ b/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 = ({ app }) => { - const onClick = () => { +const App: FC = ({ app, onClick, size = 60 }) => { + const handleClick = () => { MinApp.start(app) + onClick?.() } return ( - - + + {app.name} ) @@ -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 diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/Navbar.tsx index 23fa49f5..ed7c21f5 100644 --- a/src/renderer/src/pages/home/Navbar.tsx +++ b/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 = ({ activeAssistant }) => { {showAssistants && ( - + - - SearchPopup.show()}> + + SearchPopup.show()}> - + )} {!showAssistants && ( - toggleShowAssistants()} style={{ marginRight: isMac ? 8 : 25, marginLeft: isMac ? 4 : 0 }}> - + )} = ({ activeAssistant }) => { + + + + + {topicPosition === 'right' && ( - + - + )} @@ -80,7 +86,7 @@ const HeaderNavbar: FC = ({ 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);