chore: use search-box in logs and connections

src/pages/rules.tsx

@@ -8,18 +8,18 @@ import { BaseEmpty, BasePage } from "@/components/base";
 import RuleItem from "@/components/rule/rule-item";
 import { ProviderButton } from "@/components/rule/provider-button";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
-import { BaseStyledTextField } from "@/components/base/base-styled-text-field";
+import { BaseSearchBox } from "@/components/base/base-search-box";
 
 const RulesPage = () => {
   const { t } = useTranslation();
   const { data = [] } = useSWR("getRules", getRules);
   const { theme } = useCustomTheme();
   const isDark = theme.palette.mode === "dark";
-  const [filterText, setFilterText] = useState("");
+  const [match, setMatch] = useState(() => (_: string) => true);
 
   const rules = useMemo(() => {
-    return data.filter((each) => each.payload.includes(filterText));
-  }, [data, filterText]);
+    return data.filter((item) => match(item.payload));
+  }, [data, match]);
 
   return (
     <BasePage
@@ -42,10 +42,7 @@ const RulesPage = () => {
           alignItems: "center",
         }}
       >
-        <BaseStyledTextField
-          value={filterText}
-          onChange={(e) => setFilterText(e.target.value)}
-        />
+        <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
       </Box>
 
       <Box