added chat with another users

src/App.js

@@ -2,6 +2,9 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import RegisterPage from './components/Authentication';
 import MainFeed from './components/MainFeed';
+import ChatPage from './components/ChatPage';
+import ChatListPage from './components/ChatListPage';
+import './styles/chat.css';
 
 function App() {
   return (
@@ -12,6 +15,8 @@ function App() {
 
             <Route path="/register" element={<RegisterPage />} />
             <Route path="/feed" element={<MainFeed />} />
+            <Route path="/chats" element={<ChatListPage />} />
+            <Route path="/chats/:chatId" element={<ChatPage />} />
           </Routes>
         </BrowserRouter>
       </AuthProvider>

src/components/PostOnFeed.jsx

@@ -3,9 +3,25 @@ import CalendarIcon from "./icons/CalendarIcon";
 import PhoneIcon from "./icons/PhoneIcon";
 import MapIcon from "./icons/MapIcon";
 import HeartIcon from "./icons/HeartIcon";
+import { useNavigate } from "react-router-dom";
+import { useChats } from "../hooks/useChats";
+import { useAuthContext } from "../context/AuthContext";
 import { API_URL } from "../config/authConstants";
 
 export default function PostOnFeed({ ad, liked, onLike, onEdit, isOwner }) {
+  const navigate = useNavigate();
+  const { createOrGetChat } = useChats();
+  const { isAuthenticated } = useAuthContext();
+
+  const handleContact = async (e) => {
+    e.stopPropagation();
+    try {
+      const chat = await createOrGetChat(ad.userId, ad.id);
+      navigate(`/chats/${chat.id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
   const imageUrl = ad.images?.[0] ? `${API_URL}${ad.images[0]}` : null;
 
   // ✅ Формируем строку адреса из city + district
@@ -53,6 +69,11 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, isOwner }) {
                 )}
               </div>
               <div className="f-card-foot-right">
+                {isAuthenticated && !isOwner && (
+                    <button className="f-card-contact" onClick={handleContact}>
+                      Написать
+                    </button>
+                )}
                 {onEdit && isOwner && (
                     <button className="f-like-btn"
                             onClick={e => { e.stopPropagation(); onEdit(ad); }}>

src/components/Sidebar.jsx

@@ -2,6 +2,7 @@ import LogoIcon from "./icons/LogoIcon";
 import {NAV_BOTTOM, NAV_ITEMS} from "../config/feedConstants";
 import {NavIcons} from "./icons/NavIcons";
 import Profile from "./profile/Profile";
+import { useNavigate } from "react-router-dom";
 
 export default function Sidebar({
   open,
@@ -15,6 +16,7 @@ export default function Sidebar({
   onLoginClick,
   onRulesClick,
 }) {
+  const navigate = useNavigate();
   return (
       <>
         <div className={`f-overlay${open ? " show" : ""}`} onClick={onClose} />
@@ -27,9 +29,15 @@ export default function Sidebar({
             {NAV_ITEMS.map(({ icon, label }) => {
               const Ic = NavIcons[icon];
               const handleClick = () => {
-                // «Мои объявления» и «Чат» требуют авторизации
-                if (!isAuthenticated && (label === "Мои объявления" || label === "Чат")) {
+                // «Мои объявления» требует авторизации
+                if (!isAuthenticated && label === "Мои объявления") {
                   onLoginClick();
+                } else if (label === "Чат") {
+                  if (!isAuthenticated) {
+                    onLoginClick();
+                  } else {
+                    navigate("/chats");
+                  }
                 } else {
                   onNavClick(label);
                 }