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(
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 ( -
+ return createPortal( +
e.stopPropagation()} + onTouchStart={(e) => e.stopPropagation()} + onClick={onClose} + >
e.stopPropagation()}> {/* Хедер */}
@@ -293,7 +299,8 @@ export default function CreatePostModal({ user, onClose, onPostCreated, initialI
)}
-
+
, + 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(
e.stopPropagation()} @@ -130,7 +131,8 @@ export default function FollowListModal({ users, title, onClose, currentUser }) )}
- + , + 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 }) { - {/* Fullview модал */} - {showFullView && ( + {/* Fullview модал через Portal */} + {showFullView && createPortal(
e.stopPropagation()} @@ -325,20 +326,22 @@ export default function PostCard({ post, currentUser, onUpdate }) { ))}
)} - + , + document.body )} - {/* Модалка комментариев */} - {showComments && ( + {/* Модалка комментариев через Portal */} + {showComments && createPortal( setShowComments(false)} onUpdate={onUpdate} - /> + />, + document.body )} - {/* Модалка меню */} - {showMenu && ( + {/* Модалка меню через Portal */} + {showMenu && createPortal( + />, + document.body )} ) 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 ( -
+ return createPortal( +
e.stopPropagation()} + onTouchStart={(e) => e.stopPropagation()} + onClick={handleReportOverlayClick} + >
e.stopPropagation()}>
-
+
, + document.body ) } @@ -77,7 +84,7 @@ export default function PostMenu({ post, currentUser, onClose, onDelete }) { } } - return ( + return createPortal(
e.stopPropagation()} @@ -110,7 +117,8 @@ export default function PostMenu({ post, currentUser, onClose, onDelete }) { Отмена
- + , + 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 && ( { )} - {/* Просмотрщик изображений */} - {showViewer && results[currentIndex] && ( -
+ {/* Просмотрщик изображений через Portal */} + {showViewer && results[currentIndex] && createPortal( +
e.stopPropagation()} + onTouchStart={(e) => e.stopPropagation()} + >
-
+ , + document.body + )} + + {/* Модалка создания поста */} + {showCreatePost && ( + setShowCreatePost(false)} + onPostCreated={() => { + setShowCreatePost(false) + setShowViewer(false) + }} + initialImage={results[currentIndex]?.url} + /> )} )