added real time search

components/layout/Header.tsx

@@ -1,7 +1,7 @@
 // Header.tsx
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, Suspense } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { X, Search } from "lucide-react";
@@ -103,12 +103,14 @@ export default function Header({ locale = "ru" }: HeaderProps) {
             </div> */}
 
             {/* Desktop Search Bar */}
-            <SearchBar
-              isMobile={false}
-              searchPlaceholder={t("common.search")}
-              className="hidden flex-1 md:flex "
-              locale={locale}
-            />
+            <Suspense fallback={<div className="hidden flex-1 md:flex h-11 bg-gray-100 rounded-lg" />}>
+              <SearchBar
+                isMobile={false}
+                searchPlaceholder={t("common.search")}
+                className="hidden flex-1 md:flex "
+                locale={locale}
+              />
+            </Suspense>
 
             {/* Action Buttons */}
             <ActionButtons
@@ -121,13 +123,15 @@ export default function Header({ locale = "ru" }: HeaderProps) {
 
       <CategoryMenu isOpen={isCategoryOpen} onClose={closeCategoryMenu} />
 
-      <SearchBar
-        isMobile={true}
-        isOpen={isMobileSearchOpen}
-        onClose={() => setIsMobileSearchOpen(false)}
-        searchPlaceholder={t("common.search")}
-        locale={locale}
-      />
+      <Suspense fallback={null}>
+        <SearchBar
+          isMobile={true}
+          isOpen={isMobileSearchOpen}
+          onClose={() => setIsMobileSearchOpen(false)}
+          searchPlaceholder={t("common.search")}
+          locale={locale}
+        />
+      </Suspense>
 
       <AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
 

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(

features/home/components/CategoryGrid.tsx

@@ -55,7 +55,7 @@ export default function CategoryGrid({
         <Skeleton className="h-9 w-56 mb-6 rounded-xl" />
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
           {Array.from({ length: 12 }).map((_, i) => (
-            <div key={i} className="space-y-3">
+            <div key={i} className={`space-y-3 ${i >= 2 ? "hidden sm:block" : ""}`}>
               <Skeleton className="w-full h-36 rounded-2xl" />
               <Skeleton className="h-4 w-full rounded-lg" />
             </div>
@@ -69,11 +69,11 @@ export default function CategoryGrid({
     <section className="bg-white rounded-lg shadow-sm border border-gray-100 p-2 md:p-6">
       <h2 className="text-2xl font-bold mb-6 text-gray-900">{title}</h2>
       <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
-        {categories?.map((cat) => (
+        {categories?.map((cat, index) => (
           <Link
             key={cat.id}
             href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}
-            className="group"
+            className={`group ${index >= 2 ? "hidden sm:block" : ""}`}
           >
             <Card className="border p-2 border-gray-100 hover:border-gray-900 hover:shadow-lg transition-all duration-300 cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-gray-50 to-white">
               <div className="relative w-full h-40 overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100">

i18n/messages/ru.json

@@ -88,7 +88,7 @@
   "become_seller": "Стать продавцом",
   "choose_region": "Выберите регион",
   "choose_or_enter_address": "Выберите или введите свой адрес",
-  "note": "Заметка",
+  "note": "Aдрес",
   "seller_application_form": "Форма подачи заявления на открытие магазина",
   "phone": "Телефон",
   "unit_price": "Цена за 1 шт.:",