From cf953709ff9d782401522cb2fb9ca2f96d91f054 Mon Sep 17 00:00:00 2001
From: glpshchn <464976@niuitmo.ru>
Date: Thu, 4 Dec 2025 23:27:45 +0300
Subject: [PATCH] Update files

---
 backend/routes/auth.js                      |  2 ++
 frontend/src/components/CommentsModal.css   |  5 ++--
 frontend/src/components/CommentsModal.jsx   |  3 ++-
 frontend/src/components/CreatePostModal.jsx | 13 +++++++---
 frontend/src/components/FollowListModal.css |  4 ++-
 frontend/src/components/FollowListModal.jsx |  6 +++--
 frontend/src/components/PostCard.jsx        | 22 +++++++++-------
 frontend/src/components/PostMenu.css        | 10 +++++---
 frontend/src/components/PostMenu.jsx        | 18 +++++++++----
 frontend/src/pages/Profile.jsx              |  4 +--
 frontend/src/pages/Search.css               | 11 ++++++++
 frontend/src/pages/Search.jsx               | 28 ++++++++++++++++++---
 12 files changed, 93 insertions(+), 33 deletions(-)

diff --git a/backend/routes/auth.js b/backend/routes/auth.js
index 67a968e..4256095 100644
--- a/backend/routes/auth.js
+++ b/backend/routes/auth.js
@@ -55,6 +55,8 @@ const respondWithUser = async (user, res) => {
       role: populatedUser.role,
       followersCount: populatedUser.followers.length,
       followingCount: populatedUser.following.length,
+      followers: populatedUser.followers,
+      following: populatedUser.following,
       referralCode: populatedUser.referralCode,
       referralsCount: populatedUser.referralsCount || 0,
       settings,
diff --git a/frontend/src/components/CommentsModal.css b/frontend/src/components/CommentsModal.css
index aa4f123..487ce51 100644
--- a/frontend/src/components/CommentsModal.css
+++ b/frontend/src/components/CommentsModal.css
@@ -6,9 +6,10 @@
   right: 0;
   bottom: 0;
   background: var(--bg-secondary);
-  z-index: 999; /* Выше навигации (50) */
+  z-index: 10500;
   overflow: hidden;
-  /* Убираем touch-action: none чтобы не блокировать клики */
+  touch-action: none;
+  overscroll-behavior: contain;
 }
 
 .comments-modal {
diff --git a/frontend/src/components/CommentsModal.jsx b/frontend/src/components/CommentsModal.jsx
index 80ee082..8740051 100644
--- a/frontend/src/components/CommentsModal.jsx
+++ b/frontend/src/components/CommentsModal.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { createPortal } from 'react-dom'
 import { X, Send } from 'lucide-react'
 import { commentPost } from '../utils/api'
 import { hapticFeedback } from '../utils/telegram'
@@ -49,7 +50,7 @@ export default function CommentsModal({ post, onClose, onUpdate }) {
     }
   }
 
-  return (
+  return createPortal(
     <div 
       className="comments-modal-overlay" 
       onMouseDown={(e) => e.stopPropagation()}
diff --git a/frontend/src/components/CreatePostModal.jsx b/frontend/src/components/CreatePostModal.jsx
index f3dc3e5..e1b19a6 100644
--- a/frontend/src/components/CreatePostModal.jsx
+++ b/frontend/src/components/CreatePostModal.jsx
@@ -1,4 +1,5 @@
 import { useState, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { X, Image as ImageIcon, Tag, AtSign } from 'lucide-react'
 import { createPost, searchUsers } from '../utils/api'
 import { hapticFeedback } from '../utils/telegram'
@@ -138,8 +139,13 @@ export default function CreatePostModal({ user, onClose, onPostCreated, initialI
     }
   }
 
-  return (
-    <div className="modal-overlay" onClick={onClose}>
+  return createPortal(
+    <div 
+      className="modal-overlay"
+      onMouseDown={(e) => e.stopPropagation()}
+      onTouchStart={(e) => e.stopPropagation()}
+      onClick={onClose}
+    >
       <div className="modal-content create-post-modal" onClick={e => e.stopPropagation()}>
         {/* Хедер */}
         <div className="modal-header">
@@ -293,7 +299,8 @@ export default function CreatePostModal({ user, onClose, onPostCreated, initialI
           </div>
         )}
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }
 
diff --git a/frontend/src/components/FollowListModal.css b/frontend/src/components/FollowListModal.css
index 21fce4d..f69a3fb 100644
--- a/frontend/src/components/FollowListModal.css
+++ b/frontend/src/components/FollowListModal.css
@@ -6,10 +6,12 @@
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 10000;
+  z-index: 10500;
   display: flex;
   align-items: flex-end;
   animation: fadeIn 0.2s ease-out;
+  touch-action: none;
+  overscroll-behavior: contain;
 }
 
 @keyframes fadeIn {
diff --git a/frontend/src/components/FollowListModal.jsx b/frontend/src/components/FollowListModal.jsx
index a2a2e1d..ca7bd88 100644
--- a/frontend/src/components/FollowListModal.jsx
+++ b/frontend/src/components/FollowListModal.jsx
@@ -1,6 +1,7 @@
 import { X, UserPlus, UserMinus } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import { useState } from 'react'
+import { createPortal } from 'react-dom'
 import { followUser, unfollowUser } from '../utils/api'
 import { hapticFeedback } from '../utils/telegram'
 import './FollowListModal.css'
@@ -56,7 +57,7 @@ export default function FollowListModal({ users, title, onClose, currentUser })
     }
   }
 
-  return (
+  return createPortal(
     <div 
       className="follow-list-modal-overlay"
       onMouseDown={(e) => e.stopPropagation()}
@@ -130,7 +131,8 @@ export default function FollowListModal({ users, title, onClose, currentUser })
           )}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }
 
diff --git a/frontend/src/components/PostCard.jsx b/frontend/src/components/PostCard.jsx
index a1c384c..43eb710 100644
--- a/frontend/src/components/PostCard.jsx
+++ b/frontend/src/components/PostCard.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { createPortal } from 'react-dom'
 import { Heart, MessageCircle, MoreVertical, ChevronLeft, ChevronRight, Download, Send, X, ZoomIn, Share2 } from 'lucide-react'
 import { likePost, deletePost, sendPhotoToTelegram } from '../utils/api'
 import { hapticFeedback, showConfirm, openTelegramLink } from '../utils/telegram'
@@ -261,8 +262,8 @@ export default function PostCard({ post, currentUser, onUpdate }) {
         </button>
       </div>
 
-      {/* Fullview модал */}
-      {showFullView && (
+      {/* Fullview модал через Portal */}
+      {showFullView && createPortal(
         <div 
           className="image-fullview" 
           onMouseDown={(e) => e.stopPropagation()}
@@ -325,20 +326,22 @@ export default function PostCard({ post, currentUser, onUpdate }) {
               ))}
             </div>
           )}
-        </div>
+        </div>,
+        document.body
       )}
 
-      {/* Модалка комментариев */}
-      {showComments && (
+      {/* Модалка комментариев через Portal */}
+      {showComments && createPortal(
         <CommentsModal
           post={post}
           onClose={() => setShowComments(false)}
           onUpdate={onUpdate}
-        />
+        />,
+        document.body
       )}
 
-      {/* Модалка меню */}
-      {showMenu && (
+      {/* Модалка меню через Portal */}
+      {showMenu && createPortal(
         <PostMenu
           post={post}
           currentUser={currentUser}
@@ -347,7 +350,8 @@ export default function PostCard({ post, currentUser, onUpdate }) {
             await handleDelete()
             setShowMenu(false)
           }}
-        />
+        />,
+        document.body
       )}
     </div>
   )
diff --git a/frontend/src/components/PostMenu.css b/frontend/src/components/PostMenu.css
index 051cd36..0068115 100644
--- a/frontend/src/components/PostMenu.css
+++ b/frontend/src/components/PostMenu.css
@@ -6,12 +6,13 @@
   right: 0;
   bottom: 0;
   background: var(--bg-secondary);
-  z-index: 999; /* Выше навигации (50) */
+  z-index: 10500;
   display: flex;
   flex-direction: column;
   padding: 16px;
   overflow: hidden;
-  /* Убираем pointer-events и touch-action чтобы не блокировать клики */
+  touch-action: none;
+  overscroll-behavior: contain;
 }
 
 .report-modal-overlay {
@@ -21,10 +22,11 @@
   right: 0;
   bottom: 0;
   background: var(--bg-secondary);
-  z-index: 9999;
+  z-index: 10600;
   display: flex;
   flex-direction: column;
-  /* Убираем pointer-events и touch-action чтобы не блокировать клики */
+  touch-action: none;
+  overscroll-behavior: contain;
 }
 
 .menu-header {
diff --git a/frontend/src/components/PostMenu.jsx b/frontend/src/components/PostMenu.jsx
index 232112d..c8b1d2d 100644
--- a/frontend/src/components/PostMenu.jsx
+++ b/frontend/src/components/PostMenu.jsx
@@ -1,5 +1,6 @@
 import { X, Trash2, AlertCircle, Flag } from 'lucide-react'
 import { useState } from 'react'
+import { createPortal } from 'react-dom'
 import { reportPost } from '../utils/api'
 import { hapticFeedback, showConfirm } from '../utils/telegram'
 import './PostMenu.css'
@@ -41,8 +42,13 @@ export default function PostMenu({ post, currentUser, onClose, onDelete }) {
       }
     }
 
-    return (
-      <div className="report-modal-overlay" onClick={handleReportOverlayClick}>
+    return createPortal(
+      <div 
+        className="report-modal-overlay"
+        onMouseDown={(e) => e.stopPropagation()}
+        onTouchStart={(e) => e.stopPropagation()}
+        onClick={handleReportOverlayClick}
+      >
         <div className="report-modal-header" onClick={(e) => e.stopPropagation()}>
           <button className="menu-close-btn" onClick={onClose}>
             <X size={24} />
@@ -66,7 +72,8 @@ export default function PostMenu({ post, currentUser, onClose, onDelete }) {
             autoFocus
           />
         </div>
-      </div>
+      </div>,
+      document.body
     )
   }
 
@@ -77,7 +84,7 @@ export default function PostMenu({ post, currentUser, onClose, onDelete }) {
     }
   }
 
-  return (
+  return createPortal(
     <div 
       className="post-menu-overlay"
       onMouseDown={(e) => e.stopPropagation()}
@@ -110,7 +117,8 @@ export default function PostMenu({ post, currentUser, onClose, onDelete }) {
           <span>Отмена</span>
         </button>
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }
 
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index d73e397..79a6e4e 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -396,7 +396,7 @@ export default function Profile({ user, setUser }) {
       )}
 
       {/* Модалка подписчиков */}
-      {showFollowers && (
+      {showFollowers && user && (
         <FollowListModal
           users={user.followers || []}
           title="Подписчики"
@@ -406,7 +406,7 @@ export default function Profile({ user, setUser }) {
       )}
 
       {/* Модалка подписок */}
-      {showFollowing && (
+      {showFollowing && user && (
         <FollowListModal
           users={user.following || []}
           title="Подписки"
diff --git a/frontend/src/pages/Search.css b/frontend/src/pages/Search.css
index 9946aad..7f11d08 100644
--- a/frontend/src/pages/Search.css
+++ b/frontend/src/pages/Search.css
@@ -310,6 +310,17 @@
 
 /* Просмотрщик изображений */
 .image-viewer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.95);
+  z-index: 10500;
+  display: flex;
+  flex-direction: column;
+  touch-action: none;
+  overscroll-behavior: contain;
   position: fixed;
   top: 0;
   left: 0;
diff --git a/frontend/src/pages/Search.jsx b/frontend/src/pages/Search.jsx
index bcf0912..613b5d0 100644
--- a/frontend/src/pages/Search.jsx
+++ b/frontend/src/pages/Search.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { Search as SearchIcon, ChevronLeft, ChevronRight, Download, X, Plus } from 'lucide-react'
 import { searchFurry, searchAnime, getFurryTags, getAnimeTags } from '../utils/api'
 import { hapticFeedback, getTelegramUser } from '../utils/telegram'
@@ -463,9 +464,13 @@ const isVideoUrl = (url = '') => {
         )}
       </div>
 
-      {/* Просмотрщик изображений */}
-      {showViewer && results[currentIndex] && (
-        <div className="image-viewer">
+      {/* Просмотрщик изображений через Portal */}
+      {showViewer && results[currentIndex] && createPortal(
+        <div 
+          className="image-viewer"
+          onMouseDown={(e) => e.stopPropagation()}
+          onTouchStart={(e) => e.stopPropagation()}
+        >
           <div className="viewer-header">
             <button className="viewer-btn" onClick={() => setShowViewer(false)}>
               <X size={24} />
@@ -488,6 +493,7 @@ const isVideoUrl = (url = '') => {
             onTouchStart={handleTouchStart}
             onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}
+            onClick={(e) => e.stopPropagation()}
           >
             {isVideoUrl(results[currentIndex].url) ? (
               <video
@@ -546,7 +552,21 @@ const isVideoUrl = (url = '') => {
               <span>Source: {results[currentIndex].source}</span>
             </div>
           </div>
-        </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Модалка создания поста */}
+      {showCreatePost && (
+        <CreatePostModal
+          user={user}
+          onClose={() => setShowCreatePost(false)}
+          onPostCreated={() => {
+            setShowCreatePost(false)
+            setShowViewer(false)
+          }}
+          initialImage={results[currentIndex]?.url}
+        />
       )}
     </div>
   )