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

web/app/components/explore/sidebar/index.tsx

@@ -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>
       )}