added filter on main feed

src/components/ImageViewer.jsx

@@ -1,9 +1,17 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
 import CloseIcon from "./icons/CloseIcon";
 import { API_URL } from "../config/authConstants";
+import { useChats } from "../hooks/useChats";
+import { useAuthContext } from "../context/AuthContext";
 
-export default function ImageViewer({ images, initialIndex = 0, onClose }) {
+export default function ImageViewer({ images, initialIndex = 0, onClose, postData }) {
   const [index, setIndex] = useState(initialIndex);
+  const touchStart = useRef(null);
+  const swiped = useRef(false);
+  const navigate = useNavigate();
+  const { createOrGetChat } = useChats();
+  const { isAuthenticated } = useAuthContext();
 
   const urls = images.map(u => (u.startsWith("http") ? u : `${API_URL}${u}`));
 
@@ -33,21 +41,68 @@ export default function ImageViewer({ images, initialIndex = 0, onClose }) {
     setIndex(initialIndex);
   }, [initialIndex]);
 
+  const handleTouchStart = useCallback((e) => {
+    touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+  }, []);
+
+  const handleTouchEnd = useCallback((e) => {
+    if (!touchStart.current) return;
+    const dx = e.changedTouches[0].clientX - touchStart.current.x;
+    const dy = e.changedTouches[0].clientY - touchStart.current.y;
+    const isHorizontal = Math.abs(dx) > Math.abs(dy);
+    if (isHorizontal && Math.abs(dx) > 50) {
+      swiped.current = true;
+      if (dx > 0) prev();
+      else next();
+      setTimeout(() => { swiped.current = false; }, 400);
+    }
+    touchStart.current = null;
+  }, [prev, next]);
+
+  const handleContact = useCallback(async () => {
+    if (!postData) return;
+    try {
+      const chat = await createOrGetChat(postData.userId, postData.id, {
+        title: postData.title,
+        images: postData.images,
+        emoji: postData.emoji,
+      });
+      onClose();
+      navigate(`/chats/${chat.id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  }, [postData, createOrGetChat, navigate, onClose]);
+
+  const showContact = isAuthenticated && postData && !postData.isOwner && postData.status !== 'CLOSED';
+
   if (!urls.length) return null;
 
   return (
-    <div className="f-viewer-bg" onClick={e => e.target === e.currentTarget && onClose()}>
+    <div
+      className="f-viewer-bg"
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onClick={e => e.target === e.currentTarget && !swiped.current && onClose()}
+    >
       <button className="f-viewer-close" onClick={onClose}>
         <CloseIcon />
       </button>
 
       <div className="f-viewer">
-        <img
-          src={urls[index]}
-          alt=""
-          className="f-viewer-img"
-          onClick={handleImgClick}
-        />
+        <div className="f-viewer-img-wrap" onClick={handleImgClick}>
+          <img
+            src={urls[index]}
+            alt=""
+            className="f-viewer-img"
+          />
+        </div>
+
+        {showContact && (
+          <button className="f-viewer-contact" onClick={handleContact}>
+            Написать
+          </button>
+        )}
 
         {urls.length > 1 && (
           <div className="f-viewer-dots">