From 92e9b1bbb17112582bbc9cedc7842cf4933f7f12 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 12 Mar 2024 16:55:34 +0800
Subject: [PATCH] update style of app list

---
 web/app/(commonLayout)/apps/AppCard.tsx       | 69 ++++++++++++++-----
 web/app/components/explore/app-card/index.tsx |  2 +-
 2 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
index 1d5415508b..a8722614c6 100644
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -5,8 +5,6 @@ import { useRouter } from 'next/navigation'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
-import style from '../list.module.css'
-import AppModeLabel from './AppModeLabel'
 import s from './style.module.css'
 import SettingsModal from '@/app/components/app/overview/settings'
 import type { ConfigParams } from '@/app/components/app/overview/settings'
@@ -25,6 +23,8 @@ import { asyncRunSafe } from '@/utils'
 import { getRedirection } from '@/utils/app-redirection'
 import { useProviderContext } from '@/context/provider-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
+import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
+import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
 
 export type AppCardProps = {
   app: App
@@ -209,16 +209,54 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           e.preventDefault()
           getRedirection(isCurrentWorkspaceManager, app, push)
         }}
-        className={style.listItem}
+        className='group flex col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
       >
-        <div className={style.listItemTitle}>
-          <AppIcon
-            size="large"
-            icon={app.icon}
-            background={app.icon_background}
-          />
-          <div className={style.listItemHeading}>
-            <div className={style.listItemHeadingContent}>{app.name}</div>
+        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+          <div className='relative shrink-0'>
+            <AppIcon
+              size="large"
+              icon={app.icon}
+              background={app.icon_background}
+            />
+            <span className='absolute bottom-[-3px] right-[-3px] w-4 h-4 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm'>
+              {app.mode === 'advanced-chat' && (
+                <ChatBot className='w-3 h-3 text-blue-600' />
+              )}
+              {app.mode === 'agent-chat' && (
+                <CuteRobote className='w-3 h-3 text-indigo-600' />
+              )}
+              {app.mode === 'chat' && (
+                <ChatBot className='w-3 h-3 text-blue-600' />
+              )}
+              {app.mode === 'completion' && (
+                <AiText className='w-3 h-3 text-gray-500' />
+              )}
+              {app.mode === 'workflow' && (
+                <Route className='w-3 h-3 text-[#f79009]' />
+              )}
+            </span>
+          </div>
+          <div className='grow w-0 py-[1px]'>
+            <div className='flex items-center text-sm leading-5 font-semibold text-gray-800'>
+              <div className='truncate' title={app.name}>{app.name}</div>
+            </div>
+            <div className='flex items-center text-[10px] leading-[18px] text-gray-500'>
+              {app.mode === 'advanced-chat' && (
+                <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>
+              )}
+              {app.mode === 'agent-chat' && (
+                <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>
+              )}
+              {app.mode === 'chat' && (
+                <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>
+              )}
+              {app.mode === 'completion' && (
+                <div className='truncate'>{t('app.types.completion').toUpperCase()}</div>
+              )}
+              {app.mode === 'workflow' && (
+                <div className='truncate'>{t('app.types.workflow').toUpperCase()}</div>
+              )}
+            </div>
           </div>
           {isCurrentWorkspaceManager && <CustomPopover
             onTriggerClick={() => {
@@ -232,19 +270,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             btnClassName={open =>
               cn(
                 open ? '!bg-gray-100 !shadow-none' : '!bg-transparent',
-                style.actionIconWrapper,
+                '!hidden h-8 w-8 !p-2 rounded-md border-none hover:!bg-gray-100 group-hover:!inline-flex',
               )
             }
             className={'!w-[128px] h-fit !z-20'}
             manualClose
           />}
         </div>
-        <div className={style.listItemDescription}>
-          {app.description}
-        </div>
-        <div className={style.listItemFooter}>
-          <AppModeLabel mode={app.mode} />
-        </div>
+        <div className='mb-1 px-[14px] text-xs leading-normal text-gray-500 line-clamp-4'>{app.description}</div>
         {showSettingsModal && detailState.detail && (
           <SettingsModal
             appInfo={detailState.detail}
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 01872323a6..68c56c3156 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -45,7 +45,7 @@ const AppCard = ({
             )}
           </span>
         </div>
-        <div className='grow w-0'>
+        <div className='grow w-0 py-[1px]'>
           <div className='flex items-center text-sm leading-5 font-semibold text-gray-800'>
             <div className='truncate' title={appBasicInfo.name}>{appBasicInfo.name}</div>
           </div>