AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 22:38:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add a minimal separator between pinned apps and unpinned apps in the explore page (#10871)

Browse Source
This commit is contained in:
kurokobo 2024-11-20 10:32:59 +09:00 committed by GitHub
parent 3087913b74
commit 07b5bbae06
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/app/components/explore/sidebar/index.tsx
View File

@ -11,6 +11,7 @@ import cn from '@/utils/classnames'
import { fetchInstalledAppList as doFetchInstalledAppList, uninstallApp, updatePinStatus } from '@/service/explore'
import ExploreContext from '@/context/explore-context'
import Confirm from '@/app/components/base/confirm'
import Divider from '@/app/components/base/divider'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
const SelectedDiscoveryIcon = () => (
@ -89,6 +90,7 @@ const SideBar: FC<IExploreSideBarProps> = ({
fetchInstalledAppList()
}, [controlUpdateInstalledApps])
const pinnedAppsCount = installedApps.filter(({ is_pinned }) => is_pinned).length
return (
<div className='w-fit sm:w-[216px] shrink-0 pt-6 px-4 border-gray-200 cursor-pointer'>
<div>
@ -109,10 +111,9 @@ const SideBar: FC<IExploreSideBarProps> = ({
height: 'calc(100vh - 250px)',
}}
>
{installedApps.map(({ id, is_pinned, uninstallable, app: { name, icon_type, icon, icon_url, icon_background } }) => {
return (
{installedApps.map(({ id, is_pinned, uninstallable, app: { name, icon_type, icon, icon_url, icon_background } }, index) => (
<React.Fragment key={id}>
<Item
key={id}
isMobile={isMobile}
name={name}
icon_type={icon_type}
@ -129,8 +130,9 @@ const SideBar: FC<IExploreSideBarProps> = ({
setShowConfirm(true)
}}
/>
)
})}
{index === pinnedAppsCount - 1 && index !== installedApps.length - 1 && <Divider />}
</React.Fragment>
))}
</div>
</div>
)}