Merge pull request #50 from SlimusMinus/add-search_map

added search in map in navigation bottom

src/pages/MainFeed.jsx

@@ -15,6 +15,7 @@ import FeedTopBar from "../components/feed/FeedTopBar";
 import FeedSearchBar from "../components/feed/FeedSearchBar";
 
 import FeedContent from "../components/feed/FeedContent";
+import MapView from "../components/MapView";
 import { useAuthContext } from "../context/AuthContext";
 import { useCities } from "../hooks/useCities";
 import { useFeedPosts } from "../hooks/useFeedPosts";
@@ -50,6 +51,7 @@ export default function MainFeed() {
   const feedRef = useRef(null);
 
   const isSearchView = new URLSearchParams(location.search).get("view") === "search";
+  const isMapView = new URLSearchParams(location.search).get("view") === "map";
   const hasActiveFilters = searchQuery.trim().length > 0 || selectedCities.length > 0;
   const hasSearchParams = searchQuery.trim().length > 0 || selectedCities.length > 0;
   const searchPrompt = isSearchView && !hasSearchParams;
@@ -163,20 +165,25 @@ export default function MainFeed() {
 
   const handleHomeClick = useCallback(() => {
     setActiveNav("home");
-    if (isSearchView) navigate("/feed");
+    if (isSearchView || isMapView) navigate("/feed");
     feedRef.current?.scrollTo({ top: 0, behavior: "smooth" });
-  }, [isSearchView, navigate]);
+  }, [isSearchView, isMapView, navigate]);
 
   const handleSearchClick = useCallback(() => {
     setActiveNav("home");
     setSearchQuery("");
     setSelectedCities([]);
     if (!isSearchView) navigate("/feed?view=search");
+    else if (isMapView) navigate("/feed?view=search");
     feedRef.current?.scrollTo({ top: 0, behavior: "smooth" });
-  }, [isSearchView, navigate]);
+  }, [isSearchView, isMapView, navigate]);
 
-  // Карта с объявлениями — иконка добавлена, функционал ещё не реализован
-  const handleMapClick = useCallback(() => {}, []);
+  // Карта с объявлениями
+  const handleMapClick = useCallback(() => {
+    setActiveNav("map");
+    if (!isMapView) navigate("/feed?view=map");
+    feedRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, [isMapView, navigate]);
 
   const handleProfileClick = useCallback(() => {
     if (!isAuthenticated) modals.open("auth");
@@ -209,7 +216,7 @@ export default function MainFeed() {
   const listError = activeNav === "myads" ? myPosts.error : feed.error;
 
   return (
-      <div className={`f-app${isSearchView ? " f-search-view" : ""}`}>
+      <div className={`f-app${isSearchView ? " f-search-view" : ""}${isMapView ? " f-map-view" : ""}`}>
         <Sidebar
             open={sidebarOpen}
             activeNav={activeNav}
@@ -242,6 +249,10 @@ export default function MainFeed() {
           </div>
 
           <div className="f-wrap">
+            {isMapView ? (
+              <MapView />
+            ) : (
+              <>
                 <div className="f-feed" ref={feedRef}>
               <FeedContent
                   loading={listLoading}
@@ -278,6 +289,8 @@ export default function MainFeed() {
                 onLoginClick={() => modals.open("auth")}
                 onNavClick={setActiveNav}
             />
+              </>
+            )}
           </div>
         </div>
 
@@ -311,7 +324,7 @@ export default function MainFeed() {
         )}
 
         <BottomNav
-            activeTab={isSearchView ? "search" : "home"}
+            activeTab={isMapView ? "map" : isSearchView ? "search" : "home"}
             hasFilters={hasActiveFilters}
             profileData={profileData}
             onHome={handleHomeClick}

src/styles/layout.css

@@ -410,6 +410,28 @@
 .f-search-panel { display: none; }
 .f-app.f-search-view .f-search-panel { display: block; }
 
+/* Map view */
+.f-mapview {
+  position: relative;
+  width: 100%; height: 100%;
+  flex: 1; min-height: 0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg-card);
+}
+.f-mapview-canvas {
+  width: 100%; height: 100%;
+}
+.f-mapview-status {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  z-index: 5;
+  background: var(--bg-card);
+}
+.f-mapview-error {
+  font-size: .9rem; color: var(--err);
+}
+
 /* ── Feed Wrap + Scroll ── */
 .f-wrap { display: flex; flex: 1; overflow: hidden; min-height: 0; }