feat: add search for list pages

src/pages/Snapshot/SnapshotListPage/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, snapshotStore } from "@shared";
-import { useEffect, useState } from "react";
+import { authStore, languageStore, snapshotStore, SearchInput } from "@shared";
+import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { DatabaseBackup, Trash2 } from "lucide-react";
 import { CreateButton, DeleteModal, SnapshotRestore } from "@widgets";
@@ -19,6 +19,7 @@ export const SnapshotListPage = observer(() => {
   const { language } = languageStore;
   const [isRestoreModalOpen, setIsRestoreModalOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
   const [paginationModel, setPaginationModel] = useState({
     page: 0,
     pageSize: 50,
@@ -89,22 +90,35 @@ export const SnapshotListPage = observer(() => {
     }] : []),
   ];
 
-  const rows = snapshots.map((snapshot) => ({
-    id: snapshot.ID,
-    name: snapshot.Name,
-    parent: snapshots.find((s) => s.ID === snapshot.ParentID)?.Name,
-    created_at: formatCreationTime(snapshot.CreationTime),
-  }));
+  const rows = useMemo(() => {
+    const query = searchQuery.toLowerCase();
+    return snapshots
+      .filter(
+        (snapshot) =>
+          !query ||
+          (snapshot.Name ?? "").toLowerCase().includes(query) ||
+          (snapshots.find((s) => s.ID === snapshot.ParentID)?.Name ?? "").toLowerCase().includes(query)
+      )
+      .map((snapshot) => ({
+        id: snapshot.ID,
+        name: snapshot.Name,
+        parent: snapshots.find((s) => s.ID === snapshot.ParentID)?.Name,
+        created_at: formatCreationTime(snapshot.CreationTime),
+      }));
+  }, [snapshots, searchQuery]);
 
   return (
     <>
       <div style={{ width: "100%" }}>
         <div className="flex justify-between items-center mb-10">
           <h1 className="text-2xl ">Экспорт Медиа</h1>
+
           {canCreateSnapshot && (
             <CreateButton label="Создать экспорт медиа" path="/snapshot/create" />
           )}
         </div>
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         <DataGrid
           rows={rows}
           columns={columns}