Merge pull request #47 from SlimusMinus/fix-main_page

Fix main page

src/components/feed/FeedTopBar.jsx

@@ -1,10 +1,102 @@
+import { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import AppTopBar from "../layout/AppTopBar";
+import { useTranslation } from "react-i18next";
+
+export default function FeedTopBar({ onMenuClick, typeFilter, onTypeFilterChange }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+
+  const options = [
+    { key: "loss", label: t("feed.filterLoss") },
+    { key: null, label: t("feed.filterAll") },
+    { key: "found", label: t("feed.filterFound") },
+  ];
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (
+        menuRef.current && !menuRef.current.contains(e.target) &&
+        btnRef.current && !btnRef.current.contains(e.target)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  const handleSelect = (key) => {
+    onTypeFilterChange(key);
+    setOpen(false);
+  };
 
-export default function FeedTopBar({ onMenuClick }) {
   return (
+    <div className="f-topbar-dropdown-wrap">
       <AppTopBar
-          onMenuClick={onMenuClick}
+        onMenuClick={onMenuClick}
-          hideProfile
+        hideProfile
+        hideWordmark
+        centerContent={
+          <button
+            ref={btnRef}
+            className="f-topbar-dropdown-btn"
+            onClick={() => setOpen((v) => !v)}
+          >
+            <span>{t("app.name")}</span>
+            <svg
+              className={`f-topbar-chevron${open ? " open" : ""}`}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </button>
+        }
       />
+
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            className="f-topbar-dropdown-overlay"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15 }}
+            onClick={() => setOpen(false)}
+          />
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            ref={menuRef}
+            className="f-topbar-dropdown-menu"
+            initial={{ opacity: 0, scale: 0.95, y: -8 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: -8 }}
+            transition={{ duration: 0.18, ease: "easeOut" }}
+          >
+            {options.map((opt) => (
+              <button
+                key={opt.key ?? "all"}
+                className={`f-topbar-dropdown-item${typeFilter === opt.key ? " active" : ""}`}
+                onClick={() => handleSelect(opt.key)}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
   );
 }

src/components/layout/AppTopBar.jsx

@@ -15,6 +15,7 @@ export default function AppTopBar({
   onLoginClick,
   loginLabel,
   hideProfile = false,
+  hideWordmark = false,
 }) {
   const { t } = useTranslation();
   return (
@@ -22,7 +23,7 @@ export default function AppTopBar({
         <button className="f-menu-btn" onClick={onMenuClick}>
           <MenuIcon />
         </button>
-        <span className="f-topbar-wordmark">{t('app.name')}</span>
+        {!hideWordmark && <span className="f-topbar-wordmark">{t('app.name')}</span>}
         <div className="f-topbar-center">{centerContent}</div>
         {hideProfile ? (
             <span className="f-topbar-spacer" />

src/pages/MainFeed.jsx

@@ -13,7 +13,7 @@ import AuthModal from "../components/AuthModal";
 import RulesModal from "./RulesModal";
 import FeedTopBar from "../components/feed/FeedTopBar";
 import FeedSearchBar from "../components/feed/FeedSearchBar";
-import TypeFilterBar from "../components/feed/TypeFilterBar";
+
 import FeedContent from "../components/feed/FeedContent";
 import { useAuthContext } from "../context/AuthContext";
 import { useCities } from "../hooks/useCities";
@@ -74,7 +74,7 @@ export default function MainFeed() {
 
   const refreshCurrentList = useCallback(() => {
     if (selectedCities.length > 0) {
-      cityFeed.searchCities(selectedCities); // triggers internal effect via selectedCities dep isn't needed here
+      cityFeed.searchCities(selectedCities);
     } else {
       feed.loadFeed();
     }
@@ -214,7 +214,11 @@ export default function MainFeed() {
         />
 
         <div className="f-main f-main-feed">
-          <FeedTopBar onMenuClick={() => setSidebarOpen(v => !v)} />
+          <FeedTopBar
+            onMenuClick={() => setSidebarOpen(v => !v)}
+            typeFilter={typeFilter}
+            onTypeFilterChange={setTypeFilter}
+          />
 
           <div className="f-search-panel">
             <FeedSearchBar value={searchQuery} onChange={setSearchQuery} t={t} />
@@ -226,8 +230,6 @@ export default function MainFeed() {
             )}
           </div>
 
-          <TypeFilterBar value={typeFilter} onChange={setTypeFilter} t={t} />
-
           <div className="f-wrap">
             <div className="f-feed" ref={feedRef}>
               <FeedContent
@@ -309,4 +311,4 @@ export default function MainFeed() {
         />
       </div>
   );
-}
+}

src/pages/NakhodkaLanding.jsx

@@ -14,8 +14,8 @@ export default function NakhodkaLanding() {
   return (
     <div className="nk-page">
       <Hero onCtaClick={goToFeed} onLoginClick={goToFeedWithAuth} />
-      <StepsSection />
+      {/*<StepsSection />*/}
-      <FinalCta onClick={goToFeed} />
+      {/*<FinalCta onClick={goToFeed} />*/}
       <Footer />
     </div>
   );

src/styles/NakhodkaLanding.css

@@ -269,11 +269,6 @@
   color: var(--muted);
 }
 
-.nk-steps-section {
-  padding: 0 6vw 60px;
-  margin-top: -60px;
-}
-
 .nk-h2 {
   font-family: 'Fraunces', serif;
   font-size: clamp(24px, 3vw, 34px);
@@ -339,6 +334,11 @@
 }
 
 @media (max-width: 768px) {
+  .nk-page {
+    height: 100dvh;
+    overflow: hidden;
+  }
+
   .nk-hero {
     padding-bottom: 150px;
   }
@@ -370,6 +370,10 @@
     width: 18px;
     height: 18px;
   }
+
+  .nk-footer {
+    margin-top: -100px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

src/styles/auth.css

@@ -1,8 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');
 
 /* ─── Page ──────────────────────────────────────────────────────────────────── */
 .auth-page {
-  font-family: 'Nunito', sans-serif;
+  font-family: 'Onest', sans-serif;
   min-height: 100vh;
   display: flex; align-items: center; justify-content: center;
   background: radial-gradient(ellipse at 30% 40%, #1a2340 0%, #0d1018 60%);
@@ -120,7 +120,7 @@
   display: block; color: rgba(255,255,255,0.45);
   font-size: 0.73rem; font-weight: 700;
   letter-spacing: 0.6px; margin-bottom: 5px;
-  text-transform: uppercase; font-family: 'Nunito', sans-serif;
+  text-transform: uppercase; font-family: 'Onest', sans-serif;
 }
 
 .field {
@@ -128,7 +128,7 @@
   background: rgba(255,255,255,0.055);
   border: 1.5px solid rgba(255,255,255,0.09);
   border-radius: 14px; padding: 13px 18px;
-  color: #fff; font-family: 'Nunito', sans-serif;
+  color: #fff; font-family: 'Onest', sans-serif;
   font-size: 0.93rem; outline: none;
   transition: border-color .2s, background .2s, box-shadow .2s;
 }
@@ -181,7 +181,7 @@
 .err-msg {
   color: #ff6b6b; font-size: 0.8rem;
   margin-top: 5px; padding-left: 2px;
-  font-family: 'Nunito', sans-serif;
+  font-family: 'Onest', sans-serif;
 }
 
 /* ─── Confirm box ───────────────────────────────────────────────────────────── */
@@ -202,7 +202,7 @@
   background: linear-gradient(90deg, #1fc9b0, #2de0c8, #1fc9b0);
   background-size: 200% 100%;
   border: none; border-radius: 14px; padding: 15px;
-  color: #082320; font-family: 'Nunito', sans-serif;
+  color: #082320; font-family: 'Onest', sans-serif;
   font-size: 1.05rem; font-weight: 900; cursor: pointer;
   margin-top: 6px;
   box-shadow: 0 6px 24px rgba(45,224,200,0.32);
@@ -222,7 +222,7 @@
   display: block; width: 100%; text-align: center;
   color: #2de0c8; font-size: 0.87rem; margin-top: 13px;
   background: none; border: none; cursor: pointer;
-  font-family: 'Nunito', sans-serif;
+  font-family: 'Onest', sans-serif;
   transition: opacity .15s;
 }
 .ghost-btn:hover { opacity: 0.75; }
@@ -231,7 +231,7 @@
   display: block; width: 100%; text-align: center;
   color: rgba(255,255,255,0.35); font-size: 0.85rem; margin-top: 11px;
   background: none; border: none; cursor: pointer;
-  font-family: 'Nunito', sans-serif;
+  font-family: 'Onest', sans-serif;
   transition: color .15s;
 }
 .back-btn:hover { color: rgba(255,255,255,0.6); }
@@ -243,7 +243,7 @@
 }
 .link-btn {
   color: #2de0c8; background: none; border: none;
-  cursor: pointer; font-family: 'Nunito', sans-serif;
+  cursor: pointer; font-family: 'Onest', sans-serif;
   font-size: inherit; font-weight: 700; padding: 0;
   transition: opacity .15s;
 }

src/styles/base.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -9,7 +9,7 @@
   --border: #dbdbdb;
   --muted: #737373;
   --muted2: #c7c7c7;
-  --font: 'Nunito', sans-serif;
+  --font: 'Onest', sans-serif;
   --err: #ed4956;
 
   --bg-app: #fafafa;

src/styles/global.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');
 
 .fi {
   position: fixed;

src/styles/layout.css

@@ -121,6 +121,68 @@
   color: var(--teal); font-weight: 700;
 }
 
+/* ── Topbar Dropdown (Instagram-style) ── */
+.f-topbar-dropdown-wrap {
+  position: relative;
+}
+.f-topbar-dropdown-wrap .f-topbar {
+  position: sticky; top: 0; z-index: 10;
+}
+.f-topbar-dropdown-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  background: none; border: none; cursor: pointer;
+  color: var(--text-primary);
+  font-family: var(--font); font-weight: 900; font-size: 1.25rem;
+  letter-spacing: -.4px; white-space: nowrap;
+  padding: 4px 6px; border-radius: 8px;
+  transition: background .15s;
+}
+.f-topbar-dropdown-btn:hover { background: var(--hover-bg); }
+
+.f-topbar-chevron {
+  width: 18px; height: 18px; flex-shrink: 0;
+  transition: transform .25s ease;
+}
+.f-topbar-chevron.open { transform: rotate(180deg); }
+
+.f-topbar-dropdown-overlay {
+  position: fixed; inset: 0; z-index: 45;
+  background: transparent;
+}
+
+.f-topbar-dropdown-menu {
+  position: absolute; top: 100%; left: 0; right: 0;
+  z-index: 50;
+  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
+  padding: 8px 12px;
+  margin-top: 6px;
+  background: rgba(0, 0, 0, .72);
+  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, .08);
+  border-radius: 999px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
+}
+
+.f-topbar-dropdown-item {
+  display: flex; align-items: center; justify-content: center;
+  padding: 8px 16px;
+  border: none; border-radius: 999px;
+  background: rgba(255, 255, 255, .08);
+  color: rgba(255, 255, 255, .85);
+  font-family: var(--font); font-size: 0.85rem; font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background .15s, color .15s;
+}
+.f-topbar-dropdown-item:hover {
+  background: rgba(255, 255, 255, .14);
+  color: #fff;
+}
+.f-topbar-dropdown-item.active {
+  background: rgba(var(--teal-rgb), .25);
+  color: var(--teal);
+}
+
 /* ── City Multiselect ── */
 .f-city-filter-wrap {
   position: relative; z-index: 20;
@@ -360,9 +422,17 @@
   .f-city-ms-input { font-size: 0.85rem; }
   .f-city-ms-tag { font-size: 0.75rem; padding: 2px 8px; }
 
+  .f-topbar-dropdown-btn { font-size: 1.15rem; padding: 4px 4px; }
+  .f-topbar-chevron { width: 18px; height: 18px; }
+  .f-topbar-dropdown-menu {
+    padding: 6px 10px; gap: 5px;
+    margin-top: 4px; border-radius: 999px;
+  }
+  .f-topbar-dropdown-item { padding: 7px 13px; font-size: 0.8rem; }
+
   /* Нижняя панель fixed — освобождаем место в конце ленты */
   .f-feed {
-    padding-bottom: calc(72px + env(safe-area-inset-bottom));
+    padding-bottom: calc(130px + env(safe-area-inset-bottom));
   }
 }
 

src/styles/reviews.css

@@ -333,6 +333,7 @@
   .rv-layout {
     flex-direction: column;
     padding: 14px;
+    padding-bottom: calc(90px + env(safe-area-inset-bottom));
   }
   .rv-sidebar {
     width: 100%;