Feat: New search page components and features (#9344)

### What problem does this PR solve?

Feat: New search page components and features #3221

- Added search homepage, search settings, and ongoing search components
- Implemented features such as search app list, creating search apps,
and deleting search apps
- Optimized the multi-select component, adding disabled state and suffix
display
- Adjusted navigation hooks to support search page navigation

### Type of change

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

web/src/pages/next-searches/search-card.tsx

@@ -1,53 +1,58 @@
 import { MoreButton } from '@/components/more-button';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
-import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
-import { IFlow } from '@/interfaces/database/flow';
-import { formatPureDate } from '@/utils/date';
-import { ChevronRight, Trash2 } from 'lucide-react';
+import { formatDate } from '@/utils/date';
+import { ISearchAppProps } from './hooks';
+import { SearchDropdown } from './search-dropdown';
 
 interface IProps {
-  data: IFlow;
+  data: ISearchAppProps;
 }
-
 export function SearchCard({ data }: IProps) {
   const { navigateToSearch } = useNavigatePage();
 
   return (
-    <Card className="border-colors-outline-neutral-standard">
+    <Card
+      className="bg-bg-card  border-colors-outline-neutral-standard"
+      onClick={() => {
+        navigateToSearch(data?.id);
+      }}
+    >
       <CardContent className="p-4 flex gap-2 items-start group">
         <div className="flex justify-between mb-4">
           <RAGFlowAvatar
-            className="w-[70px] h-[70px]"
+            className="w-[32px] h-[32px]"
             avatar={data.avatar}
-            name={data.title}
+            name={data.name}
           />
         </div>
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col gap-1 flex-1">
           <section className="flex justify-between">
-            <div className="text-[20px] font-bold size-7 leading-5">
-              {data.title}
+            <div className="text-[20px] font-bold w-80% leading-5">
+              {data.name}
             </div>
-            <MoreButton></MoreButton>
+            <SearchDropdown dataset={data}>
+              <MoreButton></MoreButton>
+            </SearchDropdown>
           </section>
 
-          <div>An app that does things An app that does things</div>
+          <div>{data.description}</div>
           <section className="flex justify-between">
             <div>
               Search app
               <p className="text-sm opacity-80">
-                {formatPureDate(data.update_time)}
+                {formatDate(data.update_time)}
               </p>
             </div>
-            <div className="space-x-2 invisible group-hover:visible">
+            {/* <div className="space-x-2 invisible group-hover:visible">
               <Button variant="icon" size="icon" onClick={navigateToSearch}>
                 <ChevronRight className="h-6 w-6" />
               </Button>
               <Button variant="icon" size="icon">
                 <Trash2 />
               </Button>
-            </div>
+            </div> */}
           </section>
         </div>
       </CardContent>