added real time search

components/layout/ui/SearchBar.tsx

@@ -10,7 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { SearchIcon } from "@/components/icons";
 
 interface SearchBarProps {
@@ -31,8 +31,40 @@ export default function SearchBar({
   locale = "ru",
 }: SearchBarProps) {
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
   const [searchValue, setSearchValue] = useState("");
 
+  React.useEffect(() => {
+    // Sync URL param to input when URL changes
+    if (pathname?.includes("/search")) {
+      const q = searchParams?.get("q") || "";
+      if (q !== searchValue.trim()) {
+        setSearchValue(q);
+      }
+    } else {
+      setSearchValue("");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams, pathname]);
+
+  React.useEffect(() => {
+    // Debounce updates to the URL query when typing on search page
+    if (pathname?.includes("/search")) {
+      const delayDebounceFn = setTimeout(() => {
+        const q = searchParams?.get("q") || "";
+        const curVal = searchValue.trim();
+        if (curVal !== q && curVal !== "") {
+          router.push(`/${locale}/search?q=${encodeURIComponent(curVal)}`);
+        } else if (curVal === "" && q !== "") {
+          router.push(`/${locale}/search`);
+        }
+      }, 500);
+
+      return () => clearTimeout(delayDebounceFn);
+    }
+  }, [searchValue, pathname, router, locale, searchParams]);
+
   const performSearch = () => {
     if (searchValue.trim()) {
       router.push(