fix: default to allcategories when search params is not from recommended (#2653)

web/app/components/explore/app-list/index.tsx

@@ -26,7 +26,8 @@ const Apps: FC = () => {
   const { isCurrentWorkspaceManager } = useAppContext()
   const router = useRouter()
   const { hasEditPermission } = useContext(ExploreContext)
-  const allCategoriesEn = t('explore.apps.allCategories')
+  const allCategoriesEn = t('explore.apps.allCategories', { lng: 'en' })
+
   const [currCategory, setCurrCategory] = useTabSearchParams({
     defaultTab: allCategoriesEn,
   })
@@ -47,11 +48,10 @@ const Apps: FC = () => {
     },
   )
 
-  const currList = (() => {
-    if (currCategory === allCategoriesEn)
-      return allList
-    return allList.filter(item => item.category === currCategory)
-  })()
+  const currList
+    = currCategory === allCategoriesEn
+      ? allList
+      : allList.filter(item => item.category === currCategory)
 
   const [currApp, setCurrApp] = React.useState<App | null>(null)
   const [isShowCreateModal, setIsShowCreateModal] = React.useState(false)
@@ -112,6 +112,7 @@ const Apps: FC = () => {
         list={categories}
         value={currCategory}
         onChange={setCurrCategory}
+        allCategoriesEn={allCategoriesEn}
       />
       <div className="relative flex flex-1 mt-6 pb-6 flex-col overflow-auto bg-gray-100 shrink-0 grow">
         <nav

web/app/components/explore/category.tsx

@@ -12,7 +12,11 @@ export type ICategoryProps = {
   className?: string
   list: AppCategory[]
   value: string
-  onChange: (value: AppCategory | '') => void
+  onChange: (value: AppCategory | string) => void
+  /**
+   * default value for searchparam 'category' in en
+   */
+  allCategoriesEn: string
 }
 
 const Category: FC<ICategoryProps> = ({
@@ -20,17 +24,24 @@ const Category: FC<ICategoryProps> = ({
   list,
   value,
   onChange,
+  allCategoriesEn,
 }) => {
   const { t } = useTranslation()
+  const isAllCategories = !list.includes(value)
+
+  const itemClassName = (isSelected: boolean) =>
+    cn(
+      isSelected
+        ? 'bg-white text-primary-600 border-gray-200 font-semibold shadow-[0px_1px_2px_rgba(16,24,40,0.05)]'
+        : 'border-transparent font-medium',
+      'flex items-center h-7 px-3 border cursor-pointer rounded-lg',
+    )
 
-  const itemClassName = (isSelected: boolean) => cn(isSelected ? 'bg-white text-primary-600 border-gray-200 font-semibold' : 'border-transparent font-medium', 'flex items-center h-7 px-3 border cursor-pointer rounded-lg')
-  const itemStyle = (isSelected: boolean) => isSelected ? { boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)' } : {}
   return (
     <div className={cn(className, 'flex space-x-1 text-[13px] flex-wrap')}>
       <div
-        className={itemClassName(value === '')}
-        style={itemStyle(value === '')}
-        onClick={() => onChange('')}
+        className={itemClassName(isAllCategories)}
+        onClick={() => onChange(allCategoriesEn)}
       >
         {t('explore.apps.allCategories')}
       </div>
@@ -38,7 +49,6 @@ const Category: FC<ICategoryProps> = ({
         <div
           key={name}
           className={itemClassName(name === value)}
-          style={itemStyle(name === value)}
           onClick={() => onChange(name)}
         >
           {categoryI18n[name] ? t(`explore.category.${name}`) : name}
@@ -47,4 +57,5 @@ const Category: FC<ICategoryProps> = ({
     </div>
   )
 }
+
 export default React.memo(Category)

web/app/components/share/chat/welcome/massive-component.tsx

@@ -23,9 +23,9 @@ export const AppInfo: FC<{ siteInfo: SiteInfo }> = ({ siteInfo }) => {
 export const PromptTemplate: FC<{ html: string }> = ({ html }) => {
   return (
     <div
-      className={' box-border text-sm text-gray-700'}
+      className={'box-border text-sm text-gray-700'}
       dangerouslySetInnerHTML={{ __html: html }}
-    ></div>
+    />
   )
 }