fixed start page and scroll in modal window

2026-08-18 01:06:50 +03:00
parent 272a0bd050
commit 10fea3cf2a
17 changed files with 142 additions and 68 deletions
--- a/src/components/AuthModal.jsx
+++ b/src/components/AuthModal.jsx
@@ -15,7 +15,7 @@ export default function AuthModal({ onClose }) {
  const { login: saveAuth } = useAuthContext();

  return (
-      <div className="f-modal-bg" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="f-modal-bg auth-modal-bg" onClick={e => e.target === e.currentTarget && onClose()}>
        <div className="f-modal auth-modal">
          <div className="f-modal-head">
          <span className="f-modal-title">
--- a/src/components/feed/FeedContent.jsx
+++ b/src/components/feed/FeedContent.jsx
@@ -8,6 +8,7 @@ export default function FeedContent({
  filteredAds,
  activeNav,
  liked,
+  likeCountAdj,
  onLike,
  onEdit,
  onDelete,
@@ -58,6 +59,7 @@ export default function FeedContent({
          key={ad.id}
          ad={ad}
          liked={liked.has(ad.id)}
+          likeCountAdj={likeCountAdj[ad.id] || 0}
          onLike={onLike}
          onEdit={activeNav === "myads" ? onEdit : undefined}
          onDelete={activeNav === "myads" ? onDelete : undefined}
--- a/src/components/landing/Navbar.jsx
+++ b/src/components/landing/Navbar.jsx
@@ -1,16 +1,23 @@
 import { useTranslation } from 'react-i18next';
 import GlobeIcon from "../icons/GlobeIcon";
+import MoonIcon from "../icons/MoonIcon";
+import SunIcon from "../icons/SunIcon";
 import { useLanguageToggle } from "../../hooks/useLanguageToggle";
+import { useTheme } from "../../context/ThemeContext";

 export default function Navbar({ onLoginClick }) {
  const { t } = useTranslation();
  const { language, toggleLanguage } = useLanguageToggle();
+  const { theme, toggle: toggleTheme } = useTheme();

  return (
      <nav className="nk-nav">
        <span className="nk-logo">{t('app.name')}</span>

        <div className="nk-nav-right">
+          <button className="nk-theme-btn" onClick={toggleTheme} title={theme === 'dark' ? t('sidebar.lightTheme') : t('sidebar.darkTheme')}>
+            {theme === 'dark' ? <SunIcon /> : <MoonIcon />}
+          </button>
          <button className="nk-lang-btn" onClick={toggleLanguage}>
            <GlobeIcon />
            {language === 'ru' ? 'EN' : 'RU'}
--- a/src/hooks/useFeedActions.jsx
+++ b/src/hooks/useFeedActions.jsx
@@ -1,5 +1,5 @@
 // src/hooks/useFeedActions.js
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef } from "react";
 import { useDeletePost } from "./useDeletePost";
 import { useFavorites } from "./useFavorites";
 import { usePostStatus } from "./usePostStatus";
@@ -22,12 +22,18 @@ import { usePostStatus } from "./usePostStatus";
 * @param {Function} onAuthRequired — вызывается когда нужна авторизация
 * @param {boolean} isAuthenticated
 */
-export function useFeedActions({ refresh, loadMyPosts, onAuthRequired, isAuthenticated, t }) {
+export function useFeedActions({ refresh, loadMyPosts, onAuthRequired, isAuthenticated, t, setLiked, setLikeCountAdj }) {
  const { deletePost } = useDeletePost();
  const { toggleFavorite } = useFavorites();
  const { markAsFound } = usePostStatus();

  const [error, setError] = useState("");
+  const likedRef = useRef(new Set());
+
+  const syncLikedRef = useCallback((prev) => {
+    likedRef.current = prev instanceof Set ? prev : new Set(prev);
+    return prev;
+  }, []);

  const afterMutation = useCallback(() => {
    refresh();
@@ -39,13 +45,35 @@ export function useFeedActions({ refresh, loadMyPosts, onAuthRequired, isAuthent
      onAuthRequired();
      return;
    }
+    if (setLiked) {
+      const wasCurrentlyLiked = likedRef.current.has(id);
+      const delta = wasCurrentlyLiked ? -1 : 1;
+
+      setLiked(prev => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id); else next.add(id);
+        likedRef.current = next;
+        return next;
+      });
+      if (setLikeCountAdj) {
+        setLikeCountAdj(prev => ({ ...prev, [id]: (prev[id] || 0) + delta }));
+      }
+
      const result = await toggleFavorite(id);
-    if (result.success) {
-      afterMutation();
-    } else {
+      if (!result.success) {
+        setLiked(prev => {
+          const next = new Set(prev);
+          if (next.has(id)) next.delete(id); else next.add(id);
+          likedRef.current = next;
+          return next;
+        });
+        if (setLikeCountAdj) {
+          setLikeCountAdj(prev => ({ ...prev, [id]: (prev[id] || 0) - delta }));
+        }
        setError(result.error);
      }
-  }, [isAuthenticated, onAuthRequired, toggleFavorite, afterMutation]);
+    }
+  }, [isAuthenticated, onAuthRequired, toggleFavorite, setLiked, setLikeCountAdj]);

  const handleDelete = useCallback(async (postId) => {
    if (!window.confirm(t('feed.confirmDelete'))) return;
@@ -75,6 +103,7 @@ export function useFeedActions({ refresh, loadMyPosts, onAuthRequired, isAuthent
    handleMarkFound,
    handleNewAd: afterMutation,
    handleEditSave: afterMutation,
+    syncLiked: syncLikedRef,
    error,
    clearError,
  };
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -208,8 +208,8 @@
  },
  "landing": {
    "eyebrow": "Service for finding lost pets and items",
-    "heroTitle": "Lost doesn't mean",
-    "heroAccent": "lost forever",
+    "heroTitle": "We believe that everything lost can be found.",
+    "heroAccent": "You are not alone — we are searching together.",
    "heroLead": "Post about your loss or find — Nakhodka will automatically match similar listings by photo, location, and description, showing matches near you.",
    "startSearch": "Start search",
    "howItWorks": "How it works",
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -209,8 +209,8 @@
  },
  "landing": {
    "eyebrow": "Сервис поиска пропавших питомцев и вещей",
-    "heroTitle": "Потерял — не значит",
-    "heroAccent": "потерял навсегда",
+    "heroTitle": "Верим, что всё потерянное можно найти.",
+    "heroAccent": "Ты не один — мы ищем вместе",
    "heroLead": "Разместите объявление о пропаже или находке — Находка сама сопоставит похожие записи по фото, месту и описанию и покажет совпадения рядом с вами.",
    "startSearch": "Начать поиск",
    "howItWorks": "Как это работает",
--- a/src/pages/CreateUpdatePost.jsx
+++ b/src/pages/CreateUpdatePost.jsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import CloseIcon from "../components/icons/CloseIcon";
-import RulesModal from "../components/RulesModal";
+import RulesModal from "./RulesModal";
 import { EMPTY_FORM, CATEGORY_KEYS } from "../config/feedConstants";
 import { useTranslation } from 'react-i18next';
 import { usePostMutation } from "../hooks/usePostMutation";
--- a/src/pages/MainFeed.jsx
+++ b/src/pages/MainFeed.jsx
@@ -10,7 +10,7 @@ import ImageViewer from "../components/ImageViewer";
 import CityFilter from "../components/CityFilter";
 import { ProfileModal } from "../components/profile";
 import AuthModal from "../components/AuthModal";
-import RulesModal from "../components/RulesModal";
+import RulesModal from "./RulesModal";
 import FeedTopBar from "../components/feed/FeedTopBar";
 import FeedSearchBar from "../components/feed/FeedSearchBar";
 import TypeFilterBar from "../components/feed/TypeFilterBar";
@@ -45,6 +45,7 @@ export default function MainFeed() {
  const [selectedCities, setSelectedCities] = useState([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [liked, setLiked] = useState(new Set());
+  const [likeCountAdj, setLikeCountAdj] = useState({});

  const feedRef = useRef(null);

@@ -85,15 +86,23 @@ export default function MainFeed() {
    onAuthRequired: () => modals.open("auth"),
    isAuthenticated,
    t,
+    setLiked,
+    setLikeCountAdj,
  });

  // Загружаем лайки пользователя при авторизации
  useEffect(() => {
    if (isAuthenticated && token) {
-      loadFavorites().then(favoriteIds => setLiked(new Set(favoriteIds)));
+      loadFavorites().then(favoriteIds => {
+        const s = new Set(favoriteIds);
+        actions.syncLiked(s);
+        setLiked(s);
+      });
    } else {
+      actions.syncLiked(new Set());
      setLiked(new Set());
    }
+    setLikeCountAdj({});
  }, [isAuthenticated, token, loadFavorites]);

  // Открываем модалку аутентификации если пришли с лендинга
@@ -102,7 +111,7 @@ export default function MainFeed() {
      modals.open("auth");
      window.history.replaceState({}, document.title);
    }
-  }, [location.state, modals]);
+  }, [location.state]); // eslint-disable-line react-hooks/exhaustive-deps

  // Первичная загрузка ленты (дебаунс поиска), только когда нет фильтра по городам
  useEffect(() => {
@@ -229,6 +238,7 @@ export default function MainFeed() {
                  filteredAds={filteredAds}
                  activeNav={activeNav}
                  liked={liked}
+                  likeCountAdj={likeCountAdj}
                  onLike={actions.toggleLike}
                  onEdit={handleEdit}
                  onDelete={actions.handleDelete}
--- a/src/pages/PostOnFeed.jsx
+++ b/src/pages/PostOnFeed.jsx
@@ -11,25 +11,18 @@ import DateCalendarPopup from "../components/DateCalendarPopup";
 import Toast from "../components/Toast";
 import {useTranslation} from 'react-i18next';

-export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMarkFound, isOwner, onImageClick, onAuthRequired }) {
+export default function PostOnFeed({ ad, liked, likeCountAdj, onLike, onEdit, onDelete, onMarkFound, isOwner, onImageClick, onAuthRequired }) {
  const { t } = useTranslation();
  const [showCalendar, setShowCalendar] = useState(false);
-  const [titleExpanded, setTitleExpanded] = useState(false);
  const [descExpanded, setDescExpanded] = useState(false);
-  const [titleTruncated, setTitleTruncated] = useState(false);
  const [descTruncated, setDescTruncated] = useState(false);
  const dateAnchorRef = useRef(null);
-  const titleRef = useRef(null);
  const descRef = useRef(null);
  const { isAuthenticated } = useAuthContext();
  const { contactSeller, error: contactError, clearError } = useContactSeller(ad);

-  // Определяем, обрезан ли title/description (тремя точками), и реагируем на ресайз
  useEffect(() => {
    const check = () => {
-      if (!titleExpanded && titleRef.current) {
-        setTitleTruncated(titleRef.current.scrollWidth > titleRef.current.clientWidth + 1);
-      }
      if (!descExpanded && descRef.current) {
        setDescTruncated(descRef.current.scrollHeight > descRef.current.clientHeight + 1);
      }
@@ -37,7 +30,7 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark
    check();
    window.addEventListener("resize", check);
    return () => window.removeEventListener("resize", check);
-  }, [titleExpanded, descExpanded]);
+  }, [descExpanded]);

  const handleContact = (e) => {
    e.stopPropagation();
@@ -68,9 +61,7 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark
        <div className="f-card-head">
          <div className="f-card-author">
            <div
-                ref={titleRef}
-                className={`f-card-author-name${titleTruncated ? " f-truncatable" : ""}${titleExpanded ? " f-expanded" : ""}`}
-                onClick={titleTruncated ? () => setTitleExpanded(v => !v) : undefined}
+                className="f-card-author-name"
            >
              {ad.title}
            </div>
@@ -100,7 +91,7 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark
                    }}>
              <HeartIcon filled={liked}/>
            </button>
-            <span className="f-card-like-count">{ad.likeCount || 0}</span>
+            <span className="f-card-like-count">{(ad.likeCount || 0) + likeCountAdj}</span>
          </div>
          <div className="f-card-actions-right">
            {onEdit && isOwner && !isClosed && (
--- a/src/pages/ReviewsPage.jsx
+++ b/src/pages/ReviewsPage.jsx
@@ -6,7 +6,7 @@ import Sidebar from "../components/Sidebar";
 import AppTopBar from "../components/layout/AppTopBar";
 import { ProfileModal } from "../components/profile";
 import AuthModal from "../components/AuthModal";
-import RulesModal from "../components/RulesModal";
+import RulesModal from "./RulesModal";
 import ReviewCard from "../components/reviews/ReviewCard";
 import ReviewForm from "../components/reviews/ReviewForm";
 import RatingSummary from "../components/reviews/RatingSummary";
--- a/src/components/RulesModal.jsx
+++ b/src/components/RulesModal.jsx
@@ -1,5 +1,6 @@
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import CloseIcon from "./icons/CloseIcon";
+import CloseIcon from "../components/icons/CloseIcon";
 import "../styles/rules.css";

 const RULES = [
@@ -147,6 +148,13 @@ const RULES = [

 export default function RulesModal({ onClose }) {
  const { t } = useTranslation();
+
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = prev; };
+  }, []);
+
  return (
    <div className="f-modal-bg" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="f-modal rules-modal">
--- a/src/styles/NakhodkaLanding.css
+++ b/src/styles/NakhodkaLanding.css
@@ -2,8 +2,8 @@

 .nk-page {
  font-family: 'Inter', sans-serif;
-  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
-  color: #262626;
+  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-app) 100%);
+  color: var(--text-primary);
  min-height: 100vh;
 }

@@ -71,10 +71,10 @@
 .nk-grid {
  position: absolute;
  inset: 0;
-  background-image: radial-gradient(rgba(38, 38, 38, 0.10) 1px, transparent 1px);
+  background-image: radial-gradient(var(--text-primary) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: drift 14s linear infinite;
-  opacity: 0.5;
+  opacity: 0.1;
 }

 .nk-glow {
@@ -100,7 +100,7 @@
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
-  color: #262626;
+  color: var(--text-primary);
 }

 .nk-nav-right {
@@ -109,10 +109,11 @@
  gap: 10px;
 }

-.nk-lang-btn {
-  background: #ffffff;
-  border: 1px solid #dbdbdb;
-  color: #262626;
+.nk-lang-btn,
+.nk-theme-btn {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 12px;
@@ -124,8 +125,13 @@
  transition: background 0.2s;
 }

-.nk-lang-btn:hover {
-  background: #f0f0f0;
+.nk-theme-btn {
+  padding: 9px;
+}
+
+.nk-lang-btn:hover,
+.nk-theme-btn:hover {
+  background: var(--hover-bg);
 }

 .nk-nav-btn {
@@ -194,16 +200,17 @@
  position: relative;
  z-index: 2;
  max-width: 620px;
-  margin-top: 90px;
+  margin-top: 40px;
  animation: riseIn 0.8s ease both;
 }

 .nk-eyebrow {
  display: inline-block;
-  font-size: 13px;
-  color: #737373;
+  font-size: 20px;
+  text-align: center;
+  color: var(--muted);
  letter-spacing: 0.04em;
-  margin-bottom: 18px;
+  margin-bottom: 30px;
  text-transform: uppercase;
  font-weight: 600;
 }
@@ -211,10 +218,10 @@
 .nk-h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
-  font-size: clamp(34px, 5.2vw, 58px);
+  font-size: clamp(30px, 6.76vw, 75px);
  line-height: 1.08;
  margin: 0 0 22px;
-  color: #262626;
+  color: var(--text-primary);
 }

 .nk-accent {
@@ -227,7 +234,7 @@
 .nk-lead {
  font-size: 17px;
  line-height: 1.6;
-  color: #737373;
+  color: var(--muted);
  max-width: 500px;
  margin-bottom: 34px;
 }
@@ -259,11 +266,12 @@

 .nk-cta-hint {
  font-size: 13px;
-  color: #737373;
+  color: var(--muted);
 }

 .nk-steps-section {
  padding: 0 6vw 60px;
+  margin-top: -60px;
 }

 .nk-h2 {
@@ -272,7 +280,7 @@
  font-weight: 600;
  margin-bottom: 42px;
  text-align: center;
-  color: #262626;
+  color: var(--text-primary);
 }

 .nk-steps-grid {
@@ -284,22 +292,22 @@
 }

 .nk-step-card {
-  background: #ffffff;
-  border: 1px solid #dbdbdb;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px 24px;
  transition: border-color 0.2s, box-shadow 0.2s;
 }

 .nk-step-card:hover {
-  border-color: rgba(0, 149, 246, 0.4);
+  border-color: rgba(var(--teal-rgb), 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
 }

 .nk-step-num {
  font-family: 'Fraunces', serif;
  font-size: 15px;
-  color: #0095f6;
+  color: var(--teal);
  font-weight: 600;
 }

@@ -307,13 +315,13 @@
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 8px;
-  color: #262626;
+  color: var(--text-primary);
 }

 .nk-step-text {
  font-size: 14.5px;
  line-height: 1.55;
-  color: #737373;
+  color: var(--muted);
 }

 .nk-final-cta {
@@ -327,7 +335,7 @@
  text-align: center;
  padding: 24px 0 34px;
  font-size: 13px;
-  color: #b0b0b0;
+  color: var(--muted2);
 }

@media (max-width: 768px) {
--- a/src/styles/card.css
+++ b/src/styles/card.css
@@ -31,13 +31,7 @@
 .f-card-author { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
 .f-card-author-name {
  color: var(--text-primary); font-weight: 800; font-size: 1.1rem;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
-}
-.f-card-author-name.f-truncatable { cursor: pointer; }
-.f-card-author-name.f-expanded {
-  white-space: normal;
-  overflow: visible;
-  text-overflow: clip;
+  word-break: break-word;
 }
 .f-card-author-loc {
  color: var(--muted); font-size: .78rem;
@@ -366,3 +360,10 @@
  position: relative;
 }
 .f-date-pill:hover { background: var(--hover-bg); }
+
+@media (max-width: 600px) {
+  .f-card-contact {
+    padding: 20px 56px;
+    font-size: 1.5rem;
+  }
+}
--- a/src/styles/chat.css
+++ b/src/styles/chat.css
@@ -70,6 +70,7 @@
 .chat-messages {
  flex: 1;
  overflow-y: auto;
+  overscroll-behavior: contain;
  padding: 20px;
  display: flex;
  flex-direction: column;
@@ -194,6 +195,7 @@
 .chat-list {
  flex: 1;
  overflow-y: auto;
+  overscroll-behavior: contain;
  padding: 8px;
  max-width: 560px;
  width: 100%;
@@ -352,4 +354,8 @@
  .chat-bubble {
    max-width: 85%;
  }
+  .f-card-contact {
+    padding: 10px 28px;
+    font-size: 0.9rem;
+  }
 }
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -306,7 +306,7 @@
 .f-wrap { display: flex; flex: 1; overflow: hidden; min-height: 0; }

 .f-feed {
-  flex: 1; overflow-y: scroll; min-height: 0;
+  flex: 1; overflow-y: scroll; overscroll-behavior: contain; min-height: 0;
  padding: 20px 16px; display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 660px; margin: 0 auto;
 }
--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -274,12 +274,23 @@
    align-items: flex-end;
  }

-  .f-modal {
+  .f-modal-bg.auth-modal-bg {
+    align-items: center;
+  }
+
+  .f-modal:not(.auth-modal) {
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px 32px; /* 32px снизу — отступ от home indicator */
  }
+
+  .auth-modal {
+    width: 100%;
+    max-height: 80vh;
+    border-radius: 20px;
+    padding: 20px 16px 32px;
+  }
 }

 /* ── Rules Checkbox ── */
--- a/src/styles/reviews.css
+++ b/src/styles/reviews.css
@@ -12,6 +12,7 @@
  padding: 20px;
  flex: 1;
  overflow-y: auto;
+  overscroll-behavior: contain;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;