Feat: Display MCP multiple selection bar #3221 (#8737)

### What problem does this PR solve?

Feat: Display MCP multiple selection bar #3221

### Type of change


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

web/src/pages/profile-setting/mcp/mcp-card.tsx

@@ -1,39 +1,48 @@
 import { MoreButton } from '@/components/more-button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Card, CardContent } from '@/components/ui/card';
-import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { Checkbox } from '@/components/ui/checkbox';
 import { IMcpServer } from '@/interfaces/database/mcp';
 import { formatDate } from '@/utils/date';
 import { McpDropdown } from './mcp-dropdown';
+import { UseBulkOperateMCPReturnType } from './use-bulk-operate-mcp';
 
 export type DatasetCardProps = {
   data: IMcpServer;
-};
-
-export function McpCard({ data }: DatasetCardProps) {
-  const { navigateToAgent } = useNavigatePage();
+} & Pick<UseBulkOperateMCPReturnType, 'handleSelectChange' | 'selectedList'>;
 
+export function McpCard({
+  data,
+  selectedList,
+  handleSelectChange,
+}: DatasetCardProps) {
   return (
-    <Card key={data.id} className="w-64" onClick={navigateToAgent(data.id)}>
+    <Card key={data.id} className="w-64">
       <CardContent className="p-2.5 pt-2 group">
-        <section className="flex justify-between mb-2">
-          <div className="flex gap-2 items-center">
-            <Avatar className="size-6 rounded-lg">
-              <AvatarImage src={data?.avatar} />
-              <AvatarFallback className="rounded-lg ">CN</AvatarFallback>
-            </Avatar>
+        <section className="flex justify-between pb-2">
+          <h3 className="text-lg font-semibold line-clamp-1">{data.name}</h3>
+          <div className="space-x-4">
+            <McpDropdown>
+              <MoreButton></MoreButton>
+            </McpDropdown>
+            <Checkbox
+              checked={selectedList.includes(data.id)}
+              onCheckedChange={(checked) => {
+                if (typeof checked === 'boolean') {
+                  handleSelectChange(data.id, checked);
+                }
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            />
           </div>
-          <McpDropdown>
-            <MoreButton></MoreButton>
-          </McpDropdown>
         </section>
         <div className="flex justify-between items-end">
           <div className="w-full">
-            <h3 className="text-lg font-semibold mb-2 line-clamp-1">
-              {data.name}
-            </h3>
-            <p className="text-xs text-text-sub-title">{data.description}</p>
-            <p className="text-xs text-text-sub-title">
+            <div className="text-base font-semibold mb-3 line-clamp-1 text-text-sub-title">
+              20 cached tools
+            </div>
+            <p className="text-sm text-text-sub-title">
               {formatDate(data.update_date)}
             </p>
           </div>