Feat: Using IconFont as an additional icon library #3221 (#7427)

### What problem does this PR solve?
Feat: Using IconFont as an additional icon library #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/home/applications.tsx

@@ -1,48 +1,21 @@
+import { IconFont } from '@/components/icon-font';
 import { Segmented, SegmentedValue } from '@/components/ui/segmented';
 import { Routes } from '@/routes';
-import { Cpu, MessageSquare, Search } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'umi';
 import { Agents } from './agent-list';
-import { ApplicationCard, SeeAllAppCard } from './application-card';
+import { SeeAllAppCard } from './application-card';
 import { ChatList } from './chat-list';
 
-const applications = [
-  {
-    id: 1,
-    title: 'Jarvis chatbot',
-    type: 'Chat app',
-    update_time: '11/24/2024',
-    avatar: <MessageSquare className="h-6 w-6" />,
-  },
-  {
-    id: 2,
-    title: 'Search app 01',
-    type: 'Search app',
-    update_time: '11/24/2024',
-    avatar: <Search className="h-6 w-6" />,
-  },
-  {
-    id: 3,
-    title: 'Chatbot 01',
-    type: 'Chat app',
-    update_time: '11/24/2024',
-    avatar: <MessageSquare className="h-6 w-6" />,
-  },
-  {
-    id: 4,
-    title: 'Workflow 01',
-    type: 'Agent',
-    update_time: '11/24/2024',
-    avatar: <Cpu className="h-6 w-6" />,
-  },
-];
-
-const All = 'all';
+const IconMap = {
+  [Routes.Chats]: 'chat',
+  [Routes.Searches]: 'search',
+  [Routes.Agents]: 'agent',
+};
 
 export function Applications() {
-  const [val, setVal] = useState('all');
+  const [val, setVal] = useState(Routes.Chats);
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -52,10 +25,6 @@ export function Applications() {
 
   const options = useMemo(
     () => [
-      {
-        label: 'All',
-        value: All,
-      },
       { value: Routes.Chats, label: t('header.chat') },
       { value: Routes.Searches, label: t('header.search') },
       { value: Routes.Agents, label: t('header.flow') },
@@ -70,7 +39,13 @@ export function Applications() {
   return (
     <section className="mt-12">
       <div className="flex justify-between items-center mb-5">
-        <h2 className="text-2xl font-bold ">Applications</h2>
+        <h2 className="text-2xl font-bold flex gap-2.5">
+          <IconFont
+            name={IconMap[val as keyof typeof IconMap]}
+            className="size-8"
+          ></IconFont>
+          {options.find((x) => x.value === val)?.label}
+        </h2>
         <Segmented
           options={options}
           value={val}
@@ -79,14 +54,9 @@ export function Applications() {
         ></Segmented>
       </div>
       <div className="flex flex-wrap gap-4">
-        {(val === All || val === Routes.Searches) &&
-          [...Array(12)].map((_, i) => {
-            const app = applications[i % 4];
-            return <ApplicationCard key={i} app={app}></ApplicationCard>;
-          })}
         {val === Routes.Agents && <Agents></Agents>}
         {val === Routes.Chats && <ChatList></ChatList>}
-        {val === All || <SeeAllAppCard click={handleNavigate}></SeeAllAppCard>}
+        {<SeeAllAppCard click={handleNavigate}></SeeAllAppCard>}
       </div>
     </section>
   );