feat: no apps

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

@@ -15,6 +15,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useGetInstalledApps, useUninstallApp, useUpdateAppPinStatus } from '@/service/use-explore'
 import { RiAppsFill, RiExpandRightLine, RiLayoutLeft2Line } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
+import NoApps from './no-apps'
 
 export type IExploreSideBarProps = {
   controlUpdateInstalledApps: number
@@ -89,8 +90,9 @@ const SideBar: FC<IExploreSideBarProps> = ({
       </Link>
       {installedApps.length > 0 && (
         <div className='mt-5'>
-          {!isMobile && !isFold && <p className='system-xs-medium-uppercase break-all pl-2 uppercase text-text-tertiary mobile:px-0'>{t('explore.sidebar.webApps')}</p>}
-          <div className='mt-1.5 space-y-0.5 overflow-y-auto overflow-x-hidden'
+          {!isMobile && !isFold && <p className='system-xs-medium-uppercase mb-1.5 break-all pl-2 uppercase text-text-tertiary mobile:px-0'>{t('explore.sidebar.webApps')}</p>}
+          {installedApps.length === 0 && !isMobile && !isFold && <NoApps />}
+          <div className='space-y-0.5 overflow-y-auto overflow-x-hidden'
             style={{
               height: 'calc(100vh - 250px)',
             }}

web/app/components/explore/sidebar/no-apps/index.tsx

@@ -0,0 +1,24 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import s from './style.module.css'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
+import { Theme } from '@/types/app'
+
+const i18nPrefix = 'explore.sidebar.noApps'
+
+const NoApps: FC = () => {
+  const { t } = useTranslation()
+  const { theme } = useTheme()
+  return (
+    <div className='rounded-xl bg-background-default-subtle p-4'>
+      <div className={cn('h-[35px] w-[86px] bg-contain bg-center bg-no-repeat', theme === Theme.dark ? s.dark : s.light)}></div>
+      <div className='system-sm-semibold mt-2 text-text-secondary'>{t(`${i18nPrefix}.title`)}</div>
+      <div className='system-xs-regular my-1 text-text-tertiary'>{t(`${i18nPrefix}.description`)}</div>
+      <a className='system-xs-regular text-text-accent' target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/en/guides/application-publishing/launch-your-webapp-quickly/README'>{t(`${i18nPrefix}.learnMore`)}</a>
+    </div>
+  )
+}
+export default React.memo(NoApps)

web/app/components/explore/sidebar/no-apps/style.module.css

@@ -0,0 +1,7 @@
+.light {
+  background-image: url('./no-web-apps-light.png');
+}
+
+.dark {
+  background-image: url('./no-web-apps-dark.png');
+}