fix: resolve deprecated warnings in console

src/pages/connections.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState, useCallback } from "react";
 import { useLockFn } from "ahooks";
 import { Box, Button, IconButton, MenuItem } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
@@ -15,7 +15,10 @@ import {
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
 import parseTraffic from "@/utils/parse-traffic";
-import { BaseSearchBox } from "@/components/base/base-search-box";
+import {
+  BaseSearchBox,
+  type SearchState,
+} from "@/components/base/base-search-box";
 import { BaseStyledSelect } from "@/components/base/base-styled-select";
 import useSWRSubscription from "swr/subscription";
 import { createSockette } from "@/utils/websocket";
@@ -135,6 +138,10 @@ const ConnectionsPage = () => {
 
   const detailRef = useRef<ConnectionDetailRef>(null!);
 
+  const handleSearch = useCallback((match: (content: string) => boolean) => {
+    setMatch(() => match);
+  }, []);
+
   return (
     <BasePage
       full
@@ -211,7 +218,7 @@ const ConnectionsPage = () => {
             ))}
           </BaseStyledSelect>
         )}
-        <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
+        <BaseSearchBox onSearch={handleSearch} />
       </Box>
 
       {filterConn.length === 0 ? (

src/pages/settings.tsx

@@ -1,4 +1,11 @@
-import { Box, ButtonGroup, Grid, IconButton } from "@mui/material";
+import {
+  Box,
+  ButtonGroup,
+  Grid,
+  IconButton,
+  Select,
+  MenuItem,
+} from "@mui/material";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { BasePage, Notice } from "@/components/base";
@@ -31,6 +38,12 @@ const SettingPage = () => {
   const mode = useThemeMode();
   const isDark = mode === "light" ? false : true;
 
+  const routers = [
+    { label: "Manual", path: "manual" },
+    { label: "TG Channel", path: "telegram" },
+    { label: "Github Repo", path: "github" },
+  ];
+
   return (
     <BasePage
       title={t("Settings")}
@@ -95,6 +108,15 @@ const SettingPage = () => {
           </Box>
         </Grid>
       </Grid>
+      <Select size="small" sx={{ width: 140, "> div": { py: "7.5px" } }}>
+        {routers.map((page: { label: string; path: string }) => {
+          return (
+            <MenuItem key={page.path} value={page.path}>
+              {t(page.label)}
+            </MenuItem>
+          );
+        })}
+      </Select>
     </BasePage>
   );
 };