Refactor and enhance UI components across the application

- Improved formatting and consistency in BotConfigPage, HomeSidebar, and Plugin components.
- Removed unnecessary Spin component to prevent layout collapse in BotConfigPage.
- Enhanced sidebar selection logic to reflect current URL path in HomeSidebar.
- Updated layout styles for better responsiveness and visual appeal.
- Implemented mock data fetching in PluginMarketComponent for improved testing and development.
- Added pagination and search functionality in PluginMarketComponent.
- Refactored PluginInstalledComponent to streamline plugin list rendering and modal handling.
- Adjusted CSS styles for better alignment and spacing in various components.
- Removed commented-out code in HttpClient for cleaner codebase.
- Enhanced NotFound component layout for better user experience.

web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx

@@ -1,65 +1,47 @@
-import styles from "./pluginCard.module.css";
+import styles from "./pluginCard.module.css"
 import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
-import { GithubOutlined, LinkOutlined, ToolOutlined } from "@ant-design/icons";
-import { Switch, Tag } from "antd";
-import { useState } from "react";
-import { httpClient } from "@/app/infra/http/HttpClient";
+import { GithubOutlined, LinkOutlined, ToolOutlined } from '@ant-design/icons';
+import { Tag } from 'antd'
 
 export default function PluginCardComponent({
-  cardVO
+    cardVO
 }: {
-  cardVO: PluginCardVO;
+    cardVO: PluginCardVO
 }) {
-  const [initialized, setInitialized] = useState(cardVO.isInitialized);
-  const [switchEnable, setSwitchEnable] = useState(true);
-
-  function handleEnable() {
-    setSwitchEnable(false);
-    httpClient
-      .togglePlugin(cardVO.author, cardVO.name, !initialized)
-      .then(() => {
-        setInitialized(!initialized);
-      })
-      .catch((err) => {
-        console.log("error: ", err);
-      })
-      .finally(() => {
-        setSwitchEnable(true);
-      });
-  }
-  return (
-    <div className={`${styles.cardContainer}`}>
-      {/*  header  */}
-      <div className={`${styles.cardHeader}`}>
-        {/* left author */}
-        <div className={`${styles.fontGray}`}>{cardVO.author}</div>
-        {/*  right icon & version  */}
-        <div className={`${styles.iconVersionContainer}`}>
-          <GithubOutlined style={{ fontSize: "26px" }} type="setting" />
-          <Tag color="#108ee9">v{cardVO.version}</Tag>
+    return (
+        <div className={`${styles.cardContainer}`}>
+            {/*  header  */}
+            <div className={`${styles.cardHeader}`}>
+                {/* left author */}
+                <div className={`${styles.fontGray}`}>{cardVO.author}</div>
+                {/*  right icon & version  */}
+                <div className={`${styles.iconVersionContainer}`}>
+                    <GithubOutlined
+                        style={{ fontSize: '26px' }}
+                        type="setting"
+                    />
+                    <Tag color="#108ee9">v{cardVO.version}</Tag>
+                </div>
+            </div>
+            {/*  content  */}
+            <div className={`${styles.cardContent}`}>
+                <div className={`${styles.boldFont}`}>{cardVO.name}</div>
+                <div className={`${styles.fontGray}`}>{cardVO.description}</div>
+            </div>
+            {/*  footer  */}
+            <div className={`${styles.cardFooter}`}>
+                <div className={`${styles.linkSettingContainer}`}>
+                    <div className={`${styles.link}`}>
+                        <LinkOutlined
+                            style={{ fontSize: '22px' }}
+                        />
+                        <span>1</span>
+                    </div>
+                    <ToolOutlined
+                        style={{ fontSize: '22px' }}
+                    />
+                </div>
+            </div>
         </div>
-      </div>
-      {/*  content  */}
-      <div className={`${styles.cardContent}`}>
-        <div className={`${styles.boldFont}`}>{cardVO.name}</div>
-        <div className={`${styles.fontGray}`}>{cardVO.description}</div>
-      </div>
-      {/*  footer  */}
-      <div className={`${styles.cardFooter}`}>
-        <div className={`${styles.linkSettingContainer}`}>
-          <div className={`${styles.link}`}>
-            <LinkOutlined style={{ fontSize: "22px" }} />
-            <span>1</span>
-          </div>
-          <ToolOutlined style={{ fontSize: "22px" }} />
-        </div>
-
-        <Switch
-          value={initialized}
-          onClick={handleEnable}
-          disabled={!switchEnable}
-        />
-      </div>
-    </div>
-  );
+    );
 }