mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-07 22:10:21 +08:00
refactor(Navbar): remove MinAppsPopover component
- Deleted the MinAppsPopover component to streamline the Navbar. - Updated Navbar to remove references to MinAppsPopover, enhancing code maintainability.
This commit is contained in:
parent
074ba0ae05
commit
f9e88fb6ee
@ -1,82 +0,0 @@
|
|||||||
import { Center } from '@renderer/components/Layout'
|
|
||||||
import { useMinapps } from '@renderer/hooks/useMinapps'
|
|
||||||
import App from '@renderer/pages/apps/App'
|
|
||||||
import { Popover } from 'antd'
|
|
||||||
import { Empty } from 'antd'
|
|
||||||
import { isEmpty } from 'lodash'
|
|
||||||
import { FC, useEffect, useState } from 'react'
|
|
||||||
import { useHotkeys } from 'react-hotkeys-hook'
|
|
||||||
import styled from 'styled-components'
|
|
||||||
|
|
||||||
import Scrollbar from '../Scrollbar'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
children: React.ReactNode
|
|
||||||
}
|
|
||||||
|
|
||||||
const MinAppsPopover: FC<Props> = ({ children }) => {
|
|
||||||
const [open, setOpen] = useState(false)
|
|
||||||
const { minapps } = useMinapps()
|
|
||||||
|
|
||||||
useHotkeys('esc', () => {
|
|
||||||
setOpen(false)
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setOpen(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const [maxHeight, setMaxHeight] = useState(window.innerHeight - 100)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const handleResize = () => {
|
|
||||||
setMaxHeight(window.innerHeight - 100)
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize)
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', handleResize)
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const content = (
|
|
||||||
<PopoverContent maxHeight={maxHeight}>
|
|
||||||
<AppsContainer>
|
|
||||||
{minapps.map((app) => (
|
|
||||||
<App key={app.id} app={app} onClick={handleClose} size={50} />
|
|
||||||
))}
|
|
||||||
{isEmpty(minapps) && (
|
|
||||||
<Center>
|
|
||||||
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
|
|
||||||
</Center>
|
|
||||||
)}
|
|
||||||
</AppsContainer>
|
|
||||||
</PopoverContent>
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Popover
|
|
||||||
open={open}
|
|
||||||
onOpenChange={setOpen}
|
|
||||||
content={content}
|
|
||||||
trigger="click"
|
|
||||||
placement="bottomRight"
|
|
||||||
styles={{ body: { padding: 25 } }}>
|
|
||||||
{children}
|
|
||||||
</Popover>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const PopoverContent = styled(Scrollbar)<{ maxHeight: number }>`
|
|
||||||
max-height: ${(props) => props.maxHeight}px;
|
|
||||||
overflow-y: auto;
|
|
||||||
`
|
|
||||||
|
|
||||||
const AppsContainer = styled.div`
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(8, minmax(90px, 1fr));
|
|
||||||
gap: 18px;
|
|
||||||
`
|
|
||||||
|
|
||||||
export default MinAppsPopover
|
|
||||||
@ -1,7 +1,6 @@
|
|||||||
import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
|
import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
|
||||||
import { HStack } from '@renderer/components/Layout'
|
import { HStack } from '@renderer/components/Layout'
|
||||||
import FloatingSidebar from '@renderer/components/Popups/FloatingSidebar'
|
import FloatingSidebar from '@renderer/components/Popups/FloatingSidebar'
|
||||||
import MinAppsPopover from '@renderer/components/Popups/MinAppsPopover'
|
|
||||||
import SearchPopup from '@renderer/components/Popups/SearchPopup'
|
import SearchPopup from '@renderer/components/Popups/SearchPopup'
|
||||||
import { isMac } from '@renderer/config/constant'
|
import { isMac } from '@renderer/config/constant'
|
||||||
import { useAssistant } from '@renderer/hooks/useAssistant'
|
import { useAssistant } from '@renderer/hooks/useAssistant'
|
||||||
@ -16,7 +15,7 @@ import { setNarrowMode } from '@renderer/store/settings'
|
|||||||
import { Assistant, Topic } from '@renderer/types'
|
import { Assistant, Topic } from '@renderer/types'
|
||||||
import { Tooltip } from 'antd'
|
import { Tooltip } from 'antd'
|
||||||
import { t } from 'i18next'
|
import { t } from 'i18next'
|
||||||
import { LayoutGrid, MessageSquareDiff, PanelLeftClose, PanelRightClose, Search } from 'lucide-react'
|
import { MessageSquareDiff, PanelLeftClose, PanelRightClose, Search } from 'lucide-react'
|
||||||
import { FC, useCallback, useState } from 'react'
|
import { FC, useCallback, useState } from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
|
||||||
@ -35,7 +34,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
|
|||||||
const { assistant } = useAssistant(activeAssistant.id)
|
const { assistant } = useAssistant(activeAssistant.id)
|
||||||
const { showAssistants, toggleShowAssistants } = useShowAssistants()
|
const { showAssistants, toggleShowAssistants } = useShowAssistants()
|
||||||
const isFullscreen = useFullscreen()
|
const isFullscreen = useFullscreen()
|
||||||
const { topicPosition, sidebarIcons, narrowMode } = useSettings()
|
const { topicPosition, narrowMode } = useSettings()
|
||||||
const { showTopics, toggleShowTopics } = useShowTopics()
|
const { showTopics, toggleShowTopics } = useShowTopics()
|
||||||
const dispatch = useAppDispatch()
|
const dispatch = useAppDispatch()
|
||||||
const [sidebarHideCooldown, setSidebarHideCooldown] = useState(false)
|
const [sidebarHideCooldown, setSidebarHideCooldown] = useState(false)
|
||||||
@ -145,15 +144,6 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
|
|||||||
<i className="iconfont icon-icon-adaptive-width"></i>
|
<i className="iconfont icon-icon-adaptive-width"></i>
|
||||||
</NarrowIcon>
|
</NarrowIcon>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
{sidebarIcons.visible.includes('minapp') && (
|
|
||||||
<MinAppsPopover>
|
|
||||||
<Tooltip title={t('minapp.title')} mouseEnterDelay={0.8}>
|
|
||||||
<NarrowIcon>
|
|
||||||
<LayoutGrid size={18} />
|
|
||||||
</NarrowIcon>
|
|
||||||
</Tooltip>
|
|
||||||
</MinAppsPopover>
|
|
||||||
)}
|
|
||||||
{topicPosition === 'right' && !showTopics && !sidebarHideCooldown && (
|
{topicPosition === 'right' && !showTopics && !sidebarHideCooldown && (
|
||||||
<FloatingSidebar
|
<FloatingSidebar
|
||||||
activeAssistant={assistant}
|
activeAssistant={assistant}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user