feat: add search for list pages

src/pages/City/CityListPage/index.tsx

@@ -1,7 +1,7 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { authStore, languageStore, cityStore, countryStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, languageStore, cityStore, countryStore, SearchInput } from "@shared";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -24,6 +24,7 @@ export const CityListPage = observer(() => {
   });
   const { language } = languageStore;
   const canWriteCities = authStore.canWrite("cities");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchData = async () => {
@@ -57,6 +58,18 @@ export const CityListPage = observer(() => {
     setRows(newRows2 || []);
   }, [cities, countryStore.countries, language, isLoading]);
 
+  const filteredRows = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    if (!query) return rows;
+    return rows.filter((row) => {
+      const cityName = (row.name ?? "").toLowerCase();
+      const countryName = (
+        countryStore.countries[language]?.data?.find((c) => c.code === row.country)?.name ?? ""
+      ).toLowerCase();
+      return cityName.includes(query) || countryName.includes(query);
+    });
+  }, [rows, searchQuery, countryStore.countries, language]);
+
   const columns: GridColDef[] = [
     {
       field: "country",
@@ -142,8 +155,10 @@ export const CityListPage = observer(() => {
           </div>
         )}
 
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         <DataGrid
-          rows={rows}
+          rows={filteredRows}
           columns={columns}
           checkboxSelection={canWriteCities}
           disableRowSelectionExcludeModel