feat: add search for list pages

src/pages/Sight/SightListPage/index.tsx

@@ -6,6 +6,7 @@ import {
   languageStore,
   sightsStore,
   selectedCityStore,
+  SearchInput,
 } from "@shared";
 import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
@@ -28,6 +29,7 @@ export const SightListPage = observer(() => {
   });
   const { language } = languageStore;
   const canReadCities = authStore.canRead("cities");
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     const fetchSights = async () => {
@@ -120,13 +122,16 @@ export const SightListPage = observer(() => {
     });
   }, [sights, selectedCityStore.selectedCityId, canReadCities, authStore.meCities]);
 
-  const canWriteSights = authStore.canWrite("sights");
+  const query = searchQuery.toLowerCase();
+  const rows = filteredSights
+    .filter((sight: any) => !query || (sight.name ?? "").toLowerCase().includes(query))
+    .map((sight) => ({
+      id: sight.id,
+      name: sight.name,
+      city_id: sight.city_id,
+    }));
 
-  const rows = filteredSights.map((sight) => ({
-    id: sight.id,
-    name: sight.name,
-    city_id: sight.city_id,
-  }));
+  const canWriteSights = authStore.canWrite("sights");
 
   return (
     <>
@@ -155,6 +160,8 @@ export const SightListPage = observer(() => {
           </div>
         )}
 
+        <SearchInput value={searchQuery} onChange={setSearchQuery} />
+
         <DataGrid
           rows={rows}
           columns={columns}