From f0f4e6f23406b4f34b4b4a9de1b443896db9dcb0 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Wed, 30 Apr 2025 13:05:02 +0500
Subject: [PATCH] completed search page, some chasnges buttons in sequence

---
 src/components/Compass.tsx             |   4 +-
 src/components/DisclaimerButton.tsx    |   4 +-
 src/components/FullScreenButton.tsx    |  10 +--
 src/components/PrivacyPolicyButton.tsx |   2 +-
 src/components/SearchFilters.tsx       | 103 +++++++++++++++++++------
 src/components/SequenceSlider.tsx      |  36 ++++-----
 src/components/UnitTypesSelect.tsx     |   2 +-
 src/components/icons/SortIcon.tsx      |  14 ++++
 src/components/ui/Select.tsx           |   2 +-
 src/main.tsx                           |   2 -
 src/pages/SearchPage.tsx               |  79 ++++++++++++++++---
 11 files changed, 189 insertions(+), 69 deletions(-)
 create mode 100644 src/components/icons/SortIcon.tsx

diff --git a/src/components/Compass.tsx b/src/components/Compass.tsx
index 9c2e39b..33f467c 100644
--- a/src/components/Compass.tsx
+++ b/src/components/Compass.tsx
@@ -6,7 +6,7 @@ interface CompassProps {
 
 function Compass({ imgStyle }: CompassProps) {
   return (
-    <div className="select-none">
+    <div>
       <img
         src="/images/map/compass.png"
         className={clsx(
@@ -16,7 +16,7 @@ function Compass({ imgStyle }: CompassProps) {
       />
       <img
         src="/images/map/compass-mobile.png"
-        className="min-w-10 w-[12.345vw] pointer-events-none absolute left-3 bottom-3 md:hidden"
+        className="min-w-10 w-10 pointer-events-none absolute left-4 bottom-4 md:hidden"
       />
     </div>
   );
diff --git a/src/components/DisclaimerButton.tsx b/src/components/DisclaimerButton.tsx
index f66a37e..cbe8c04 100644
--- a/src/components/DisclaimerButton.tsx
+++ b/src/components/DisclaimerButton.tsx
@@ -8,11 +8,11 @@ export default function BottomButton() {
 
   return (
     <Button
-      size="medium"
+      size="small"
       variant="secondary"
       onClick={() => setModal(<DisclaimerModal />)}
     >
-      <span className="w-5 h-5 2xl:w-[1.389vw] 2xl:h-[1.389vw]">
+      <span className="w-4 h-4 2xl:w-[1.111vw] 2xl:h-[1.111vw]">
         <DisclaimerIcon />
       </span>
       <span>Disclaimer</span>
diff --git a/src/components/FullScreenButton.tsx b/src/components/FullScreenButton.tsx
index f543879..69f6ef1 100644
--- a/src/components/FullScreenButton.tsx
+++ b/src/components/FullScreenButton.tsx
@@ -30,14 +30,8 @@ function FullScreenButton({
   if (isMobileSafari) return null;
 
   return (
-    <Button
-      onlyIcon
-      size="small"
-      variant="secondary"
-      className="absolute 2xl:top-[2.222vw] 2xl:right-[2.222vw] top-4 right-4"
-      onClick={handleClick}
-    >
-      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
+    <Button onlyIcon size="small" variant="secondary" onClick={handleClick}>
+      <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
         {isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
       </span>
     </Button>
diff --git a/src/components/PrivacyPolicyButton.tsx b/src/components/PrivacyPolicyButton.tsx
index 08a2f84..1199371 100644
--- a/src/components/PrivacyPolicyButton.tsx
+++ b/src/components/PrivacyPolicyButton.tsx
@@ -13,7 +13,7 @@ export default function PrivacyPolicyButton() {
       onlyIcon
       onClick={() => setModal(<PrivacyPolicyModal />)}
     >
-      <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+      <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
         <QuestionIcon />
       </span>
     </Button>
diff --git a/src/components/SearchFilters.tsx b/src/components/SearchFilters.tsx
index b47c70f..c1153f5 100644
--- a/src/components/SearchFilters.tsx
+++ b/src/components/SearchFilters.tsx
@@ -15,6 +15,7 @@ import Select from "./ui/Select";
 import { AnimatePresence, motion } from "motion/react";
 import CloseIcon from "./icons/CloseIcon";
 import Project from "../types/Project";
+import FiltersIcon from "./icons/FiltersIcon";
 
 export interface Filters {
   unitTypes: string[];
@@ -206,16 +207,16 @@ function SearchFilters({
     <>
       {inModal && (
         <div
-          className="fixed inset-0 2xl:top-[4.444vw] bg-[#0D1922]/40 cursor-pointer"
+          className="fixed inset-0 z-20 bg-[#0D1922]/40 cursor-pointer"
           onClick={handleClose}
         />
       )}
       <div
         ref={ref}
         className={clsx(
-          "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4",
+          "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] md:rounded-t-3xl 2xl:space-y-[2.222vw] space-y-8",
           inModal &&
-            "fixed 2xl:top-[calc(2.778vw+4.444vw)] 2xl:left-[2.778vw] 2xl:right-[2.778vw] 2xl:rounded-[1.667vw] rounded-3xl md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-24"
+            "fixed z-20 max-md:pb-0 max-md:pt-6 2xl:top-[calc(2.778vw+4.444vw)] max-md:w-full 2xl:left-[2.222vw] 2xl:right-[2.222vw] 2xl:rounded-[1.667vw] md:max-2xl:rounded-3xl md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-24 max-md:bottom-0 max-md:overflow-auto max-md:!rounded-t-3xl max-md:max-h-[calc(100dvh-40px)]"
         )}
       >
         {inModal && (
@@ -229,22 +230,38 @@ function SearchFilters({
             </div>
           </Button>
         )}
-        <div className="2xl:space-y-[1.111vw] space-y-4">
-          <p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]">
-            Search
-          </p>
-          {project && (
-            <ProjectSelect
-              projects={projects}
-              onSelect={handleSelectProject}
-              defaultProject={projects.find(({ title }) => title === project)!}
-            />
-          )}
+        <div className="2xl:space-y-[2.222vw] space-y-8">
+          <div className="2xl:space-y-[1.111vw] space-y-4">
+            <p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]">
+              {inModal ? "Filters" : "Search"}
+            </p>
+            <div className={clsx(!inModal && "max-md:hidden")}>
+              {project && (
+                <ProjectSelect
+                  projects={projects}
+                  onSelect={handleSelectProject}
+                  defaultProject={
+                    projects.find(({ title }) => title === project)!
+                  }
+                />
+              )}
+            </div>
+          </div>
+          <hr
+            className={clsx(
+              "2xl:h-[0.069vw] h-px border-[#E2E2DC]",
+              !inModal && "max-md:hidden"
+            )}
+          />
         </div>
-        <hr className="2xl:h-[0.069vw] h-px border-[#E2E2DC]" />
         {filters && (
           <>
-            <div className="2xl:space-y-[0.556vw] space-y-2">
+            <div
+              className={clsx(
+                "2xl:space-y-[0.556vw] space-y-2",
+                !inModal && "max-md:hidden"
+              )}
+            >
               <p className="text-s text-[#0D1922]/70">Apartment type</p>
               <UnitTypesSelect
                 unitTypes={filters.unitTypes}
@@ -252,7 +269,12 @@ function SearchFilters({
                 defaultSelected={unitTypes}
               />
             </div>
-            <div className="grid 2xl:grid-cols-4 md:max-2xl:grid-cols-2 md:max-2xl:grid-rows-2 2xl:gap-[1.111vw] gap-4">
+            <div
+              className={clsx(
+                "grid 2xl:grid-cols-4 md:max-2xl:grid-cols-2 md:max-2xl:grid-rows-2 2xl:gap-[1.111vw] gap-6",
+                !inModal && "max-md:hidden"
+              )}
+            >
               <MultiRangeSlider
                 min={filters?.cost[0]}
                 max={filters?.cost[1]}
@@ -287,9 +309,15 @@ function SearchFilters({
                 onSelect={handleSelectView}
               />
             </div>
-            <div className="flex items-center 2xl:gap-[1.111vw] md:max-2xl:gap-4">
+            <div
+              className={clsx(
+                "flex items-center 2xl:gap-[1.111vw] md:max-2xl:gap-4 gap-2",
+                inModal &&
+                  "max-md:flex-col max-md:sticky max-md:shadow-[0px_-4px_20px_rgba(0,0,0,0.05)] max-md:rounded-t-2xl max-md:-m-4 max-md:p-4 bottom-0 bg-white"
+              )}
+            >
               {inModal ? (
-                <Button onClick={applyFilters}>
+                <Button onClick={applyFilters} className="max-md:w-full">
                   Show{" "}
                   <AnimatePresence mode="wait">
                     {count !== undefined && (
@@ -313,18 +341,49 @@ function SearchFilters({
                       initial={{ opacity: 0 }}
                       animate={{ opacity: 1 }}
                       exit={{ opacity: 0 }}
-                      className="text-[#00BED7] text-s"
+                      className={clsx(
+                        "text-[#00BED7] text-s",
+                        !inModal && "max-md:hidden"
+                      )}
                     >
                       {count} Apartments found
                     </motion.p>
                   )}
                 </AnimatePresence>
               )}
-              <Button variant="secondary" onClick={resetFilters}>
+              <Button
+                variant="secondary"
+                className={clsx(
+                  "hidden",
+                  !inModal && "max-md:flex !justify-center flex-1 !bg-[#F3F3F2]"
+                )}
+                onClick={() => setInModal(true)}
+              >
+                <div className="w-5 h-5">
+                  <FiltersIcon />
+                </div>
+                <p className="text-sm leading-0">Filters</p>
+              </Button>
+              <Button
+                variant="secondary"
+                onlyIcon={!inModal && innerWidth < 768}
+                onClick={resetFilters}
+                className={clsx(
+                  !inModal && "max-md:bg-[#F3F3F2]",
+                  "max-md:!transition-none"
+                )}
+              >
                 <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
                   <RestartIcon />
                 </span>
-                <p className="text-s">Reset filters</p>
+                <p
+                  className={clsx(
+                    "text-s max-md:w-full",
+                    !inModal && "max-md:hidden"
+                  )}
+                >
+                  Reset filters
+                </p>
               </Button>
             </div>
           </>
diff --git a/src/components/SequenceSlider.tsx b/src/components/SequenceSlider.tsx
index ec4c87e..6a08531 100644
--- a/src/components/SequenceSlider.tsx
+++ b/src/components/SequenceSlider.tsx
@@ -10,7 +10,6 @@ import Compass from "./Compass";
 import { useNavigate } from "react-router";
 import InfoIcon from "./icons/InfoIcon";
 import FullScreenButton from "./FullScreenButton";
-import BottomButton from "./DisclaimerButton";
 import PrivacyPolicyButton from "./PrivacyPolicyButton";
 import DisclaimerButton from "./DisclaimerButton";
 
@@ -167,9 +166,8 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
       </AnimatePresence>
       {imageLoaded === FRAME_COUNT && (
         <>
-          <div className="absolute flex 2xl:gap-[0.556vw] gap-2 2xl:left-[1.667vw] 2xl:top-[1.667vw] left-4 top-4">
+          <div className="absolute flex 2xl:gap-[0.556vw] justify-between gap-2 2xl:left-[2.222vw] 2xl:right-[2.222vw] 2xl:top-[2.222vw] max-w-full md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-6 left-4 right-4 top-4">
             <Button
-              onlyIcon
               variant="secondary"
               className="!bg-white"
               onClick={() => navigate("/")}
@@ -177,54 +175,52 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
               <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                 <ArrowLeftIcon />
               </span>
+              <span className="max-md:hidden">Map</span>
             </Button>
             <Button variant="secondary" size="small" className="max-md:hidden">
               <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
                 <InfoIcon />
               </span>
-              <span>About Complex</span>
+              <span>About</span>
             </Button>
           </div>
           <p className="absolute text-xl font-bold text-white -translate-x-1/2 select-none left-1/2 top-9 max-md:hidden">
             ROVE Home Marasi Drive
           </p>
 
-          <FullScreenButton
-            isFullScreen={isFullScreen}
-            onFullScreenChange={setIsFullScreen}
-            onClick={handleFullScreenClick}
-          />
-
           <Button
             onlyIcon
             variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 2xl:left-[1.111vw] left-4"
+            className="absolute top-1/2 -translate-y-1/2 2xl:left-[31.111vw] md:max-2xl:left-[8.854vw] left-4 !bg-[#0D1922]/40 backdrop-blur-md"
             roundedFull
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("prev")}
           >
-            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+            <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
               <ArrowLeftIcon />
             </span>
           </Button>
           <Button
             onlyIcon
             variant="secondary"
-            className="absolute top-1/2 -translate-y-1/2 2xl:right-[1.111vw] right-4"
+            className="absolute top-1/2 -translate-y-1/2 2xl:right-[31.111vw] md:max-2xl:right-[8.854vw] right-4 !bg-[#0D1922]/40 backdrop-blur-md"
             roundedFull
             disabled={isAnimating || !isShowVideo}
             onClick={() => handleSwipe("next")}
           >
-            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+            <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
               <ArrowRightIcon />
             </span>
           </Button>
-          <div className="max-md:hidden">
-            <Compass imgStyle={{ transform: `rotate(${currentIndex}deg)` }} />
-            <div className="absolute right-[28px] bottom-[32px] flex gap-2">
-              <DisclaimerButton />
-              <PrivacyPolicyButton />
-            </div>
+          <Compass imgStyle={{ transform: `rotate(${currentIndex}deg)` }} />
+          <div className="absolute 2xl:bottom-[2.222vw] 2xl:right-[2.222vw] 2xl:left-[2.222vw] max-w-full flex justify-end items-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:bottom-6 md:max-2xl:left-6 md:max-2xl:right-6 bottom-4 left-4 right-4">
+            <DisclaimerButton />
+            <PrivacyPolicyButton />
+            <FullScreenButton
+              isFullScreen={isFullScreen}
+              onFullScreenChange={setIsFullScreen}
+              onClick={handleFullScreenClick}
+            />
           </div>
         </>
       )}
diff --git a/src/components/UnitTypesSelect.tsx b/src/components/UnitTypesSelect.tsx
index b858e95..cfb0eb7 100644
--- a/src/components/UnitTypesSelect.tsx
+++ b/src/components/UnitTypesSelect.tsx
@@ -19,7 +19,7 @@ function UnitTypesSelect({
   useEffect(() => onSelect(selectedUnitTypes), [selectedUnitTypes]);
 
   return (
-    <div className="flex 2xl:gap-[0.556vw] gap-2">
+    <div className="flex flex-wrap 2xl:gap-[0.556vw] gap-2">
       {unitTypes.map((unitType) => (
         <p
           key={unitType}
diff --git a/src/components/icons/SortIcon.tsx b/src/components/icons/SortIcon.tsx
new file mode 100644
index 0000000..c049984
--- /dev/null
+++ b/src/components/icons/SortIcon.tsx
@@ -0,0 +1,14 @@
+function SortIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5 7h6.533M5 12h10M5 17h14"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default SortIcon;
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index 719d8a1..cccc25e 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -38,7 +38,7 @@ function Select({
       )}
       <button
         className={clsx(
-          "2xl:px-[1.111vw] px-4 2xl:py-[0.833vw] py-3 2xl:rounded-[0.833vw] rounded-xl 2xl:ring-[0.069vw] ring-1 transition-[box-shadow] w-full text-left flex items-center justify-between group",
+          "2xl:px-[1.111vw] px-4 2xl:py-[0.833vw] py-3 2xl:rounded-[0.833vw] rounded-xl 2xl:ring-[0.069vw] ring-1 transition-[box-shadow] w-full text-left flex items-center justify-between group bg-white",
           isShow ? " ring-[#00BED7]" : "ring-[#E2E2DC]"
         )}
         onClick={() => setIsShow(!isShow)}
diff --git a/src/main.tsx b/src/main.tsx
index f6bf20e..71273d5 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,4 @@
 import "./index.css";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router";
@@ -61,7 +60,6 @@ createRoot(document.getElementById("root")!).render(
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={route} />
       <ModalContainer />
-      <ReactQueryDevtools />
     </QueryClientProvider>
   </>
 );
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index 59b0965..d879ef1 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -1,22 +1,29 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
 import { api } from "../api/ky";
 import { IUnit } from "../types/IUnit";
 import UnitCard from "../components/UnitCard";
 import { useEffect, useRef, useState } from "react";
-import SearchFilters from "../components/SearchFilters";
-import { useNavigate, useSearchParams } from "react-router";
+import SearchFilters, { Filters } from "../components/SearchFilters";
+import { useSearchParams } from "react-router";
 import Button from "../components/ui/Button";
 import FiltersIcon from "../components/icons/FiltersIcon";
 import RestartIcon from "../components/icons/RestartIcon";
 import clsx from "clsx";
 import { AnimatePresence, motion } from "motion/react";
 import { useDebounce } from "../hooks/useDebounce";
+import Select from "../components/ui/Select";
+
+const SORT_OPTIONS = {
+  "Sort by ascending price": "cost asc",
+  "Sort by descending price": "cost desc",
+  "Sort by ascending area": "sqft asc",
+  "Sort by descending area": "sqft desc",
+};
 
 const STEP = 12;
 
 function SearchPage() {
   const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
 
   const project = searchParams.get("project");
   const unitTypes = searchParams.getAll("unitTypes");
@@ -32,6 +39,10 @@ function SearchPage() {
   const debouncedFloor = useDebounce(floor, 500);
   const debouncedArea = useDebounce(area, 500);
 
+  const [sort, setSort] = useState<keyof typeof SORT_OPTIONS>(
+    "Sort by ascending price"
+  );
+
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
       initialPageParam: 0,
@@ -43,6 +54,7 @@ function SearchPage() {
         debouncedCost,
         debouncedFloor,
         debouncedArea,
+        sort,
       ],
       enabled:
         !!project &&
@@ -71,7 +83,7 @@ function SearchPage() {
               debouncedArea.length > 0
                 ? `&area=${debouncedArea.map(Math.round).join(",")}`
                 : ""
-            }`
+            }${sort ? `&order=${SORT_OPTIONS[sort].split(" ").join(",")}` : ""}`
           )
           .json<IUnit[]>(),
       getNextPageParam: (lastPage, _, lastPageIndex) =>
@@ -125,6 +137,37 @@ function SearchPage() {
     };
   }, []);
 
+  const [activeFiltersCount, setActiveFiltersCount] = useState(0);
+
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    const filters = queryClient.getQueryData<Filters>(["filters", project]);
+    if (filters) {
+      setActiveFiltersCount(
+        +!!view +
+          +!!unitTypes.length +
+          +(debouncedCost[0] !== filters.cost[0]) +
+          +(debouncedCost[1] !== filters.cost[1]) +
+          +(debouncedArea[0] !== filters.area[0]) +
+          +(debouncedArea[1] !== filters.area[1]) +
+          +(debouncedFloor[0] !== filters.floor[0]) +
+          +(debouncedFloor[1] !== filters.floor[1])
+      );
+    }
+  }, [
+    queryClient,
+    unitTypes,
+    view,
+    project,
+    debouncedCost,
+    cost,
+    debouncedArea,
+    area,
+    debouncedFloor,
+    floor,
+  ]);
+
   return (
     <>
       <SearchFilters
@@ -133,13 +176,21 @@ function SearchPage() {
         setInModal={setFiltersInModal}
         {...{ area, cost, floor, setArea, setCost, setFloor }}
       />
-      <div className="2xl:p-[2.222vw] p-4 min-h-dvh">
+      <div className="2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4">
+        <Select
+          options={Object.keys(SORT_OPTIONS)}
+          defaultOption={sort}
+          onSelect={(opt) => setSort(opt as keyof typeof SORT_OPTIONS)}
+          className="2xl:max-w-[22.778vw] md:max-2xl:max-w-[45.833vw]"
+        />
+        <hr className="2xl:h-[0.069vw] border-[#E2E2DC]" />
         <AnimatePresence mode="wait">
           {project &&
             unitTypes &&
             debouncedCost &&
             debouncedArea &&
-            debouncedFloor && (
+            debouncedFloor &&
+            sort && (
               <motion.div
                 key={
                   project +
@@ -147,7 +198,8 @@ function SearchPage() {
                   view +
                   debouncedCost +
                   debouncedArea +
-                  debouncedFloor
+                  debouncedFloor +
+                  sort
                 }
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
@@ -170,16 +222,23 @@ function SearchPage() {
               : "top-[calc(100dvh-2.222vw)] -translate-y-full"
           )}
         >
-          <Button onClick={() => setFiltersInModal(true)}>
+          <Button onClick={() => setFiltersInModal(true)} className="relative">
             <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
               <FiltersIcon />
             </span>
             <span className="text-caption-m">Filters</span>
+            {!!activeFiltersCount && (
+              <div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]">
+                {activeFiltersCount}
+              </div>
+            )}
           </Button>
           <Button
             variant="secondary"
             className="2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]"
-            onClick={() => navigate("/search")}
+            onClick={() => {
+              window.location.href = "/search";
+            }}
           >
             <span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70">
               <RestartIcon />