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');
+}

web/i18n/en-US/explore.ts

@@ -14,6 +14,11 @@ const translation = {
       title: 'Delete app',
       content: 'Are you sure you want to delete this app?',
     },
+    noApps: {
+      title: 'No web apps',
+      description: 'Published web apps will appear here',
+      learnMore: 'Learn more',
+    },
   },
   apps: {
     title: 'Try Dify\'s curated apps to find AI solutions for your business',

web/i18n/ja-JP/explore.ts

@@ -14,6 +14,11 @@ const translation = {
       title: 'アプリを削除',
       content: 'このアプリを削除してもよろしいですか？',
     },
+    noApps: {
+      title: 'Webアプリなし',
+      description: '公開されたWebアプリがここに表示されます',
+      learnMore: '詳細',
+    },
   },
   apps: {
     title: 'Difyの厳選アプリを試して、ビジネス向けのAIソリューションを見つけましょう',

web/i18n/zh-Hans/explore.ts

@@ -14,6 +14,11 @@ const translation = {
       title: '删除程序',
       content: '您确定要删除此程序吗？',
     },
+    noApps: {
+      title: '没有 web apps',
+      description: '已发布的 web apps 将出现在此处',
+      learnMore: '了解更多',
+    },
   },
   apps: {
     title: '试用 Dify 精选示例应用，为您的业务寻找 AI 解决方案',