From 10d909711dd72b2ba879e8fd5af48206df2e7342 Mon Sep 17 00:00:00 2001
From: glpshchn <464976@niuitmo.ru>
Date: Fri, 5 Dec 2025 01:28:51 +0300
Subject: [PATCH] Update files

---
 frontend/src/components/PostCard.jsx |  18 ++-
 frontend/src/components/PostMenu.css | 164 +++++++++++++++++++--------
 frontend/src/components/PostMenu.jsx | 135 +++++++++++++++++-----
 3 files changed, 243 insertions(+), 74 deletions(-)

diff --git a/frontend/src/components/PostCard.jsx b/frontend/src/components/PostCard.jsx
index 61e01cd..67b0ff2 100644
--- a/frontend/src/components/PostCard.jsx
+++ b/frontend/src/components/PostCard.jsx
@@ -29,6 +29,7 @@ export default function PostCard({ post, currentUser, onUpdate }) {
   const [showFullView, setShowFullView] = useState(false)
   const [showComments, setShowComments] = useState(false)
   const [showMenu, setShowMenu] = useState(false)
+  const [menuButtonPosition, setMenuButtonPosition] = useState(null)
   
   // Проверка на существование автора
   if (!post.author) {
@@ -168,8 +169,17 @@ export default function PostCard({ post, currentUser, onUpdate }) {
         
         <button 
           className="menu-btn" 
+          data-menu-button={post._id}
           onClick={(e) => {
             e.stopPropagation()
+            const button = e.currentTarget
+            const rect = button.getBoundingClientRect()
+            setMenuButtonPosition({
+              top: rect.top,
+              left: rect.left,
+              bottom: rect.bottom,
+              right: rect.right
+            })
             setShowMenu(true)
           }}
         >
@@ -346,11 +356,17 @@ export default function PostCard({ post, currentUser, onUpdate }) {
         <PostMenu
           post={post}
           currentUser={currentUser}
-          onClose={() => setShowMenu(false)}
+          onClose={() => {
+            setShowMenu(false)
+            setMenuButtonPosition(null)
+          }}
           onDelete={async () => {
             await handleDelete()
             setShowMenu(false)
+            setMenuButtonPosition(null)
           }}
+          onUpdate={onUpdate}
+          buttonPosition={menuButtonPosition}
         />,
         document.body
       )}
diff --git a/frontend/src/components/PostMenu.css b/frontend/src/components/PostMenu.css
index 0068115..523b8e8 100644
--- a/frontend/src/components/PostMenu.css
+++ b/frontend/src/components/PostMenu.css
@@ -5,11 +5,11 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--bg-secondary);
+  background: transparent;
   z-index: 10500;
   display: flex;
-  flex-direction: column;
-  padding: 16px;
+  align-items: flex-start;
+  justify-content: flex-start;
   overflow: hidden;
   touch-action: none;
   overscroll-behavior: contain;
@@ -29,75 +29,149 @@
   overscroll-behavior: contain;
 }
 
-.menu-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--divider-color);
+.menu-content {
+  background: var(--bg-secondary);
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 4px;
+  margin-top: 8px;
+  min-width: 140px;
+  z-index: 10501;
 }
 
-.menu-header h2 {
-  font-size: 18px;
-  font-weight: 600;
+.menu-items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.menu-item {
+  width: 100%;
+  padding: 10px 12px;
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.menu-item:hover {
+  background: var(--bg-primary);
+}
+
+.menu-item:active {
+  opacity: 0.7;
 }
 
 .menu-close-btn {
-  width: 40px;
-  height: 40px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
-  background: var(--bg-primary);
+  background: transparent;
   color: var(--text-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   cursor: pointer;
-  /* Убираем pointer-events чтобы клики работали */
+  padding: 0;
 }
 
 .menu-close-btn svg {
   stroke: currentColor;
 }
 
-.menu-items {
-  padding-top: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  /* Убираем pointer-events и touch-action чтобы клики работали */
-}
-
-.menu-item {
-  width: 100%;
-  padding: 16px;
-  background: var(--bg-primary);
-  border: none;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  color: var(--text-primary);
-  font-size: 16px;
-  font-weight: 500;
-  border-radius: 12px;
-  cursor: pointer;
-  /* Убираем pointer-events и touch-action чтобы клики работали */
-}
-
 .menu-item svg {
   stroke: currentColor;
-}
-
-.menu-item:active {
-  opacity: 0.7;
-  transform: scale(0.98);
+  flex-shrink: 0;
 }
 
 .menu-item.danger {
   color: #FF3B30;
 }
 
+.menu-item.danger svg {
+  stroke: #FF3B30;
+}
+
+/* Edit modal styles */
+.edit-menu-content {
+  background: var(--bg-secondary);
+  border-radius: 16px;
+  padding: 16px;
+  max-width: 90vw;
+  width: 400px;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.edit-menu-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.edit-menu-header h3 {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.edit-content-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--divider-color);
+  border-radius: 12px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 15px;
+  line-height: 1.5;
+  resize: none;
+  font-family: inherit;
+}
+
+.edit-menu-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.edit-cancel-btn {
+  padding: 10px 16px;
+  border-radius: 8px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  border: 1px solid var(--divider-color);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.edit-save-btn {
+  padding: 10px 16px;
+  border-radius: 8px;
+  background: var(--button-accent);
+  color: white;
+  border: none;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.edit-save-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .report-modal-header {
   padding: 16px;
   border-bottom: 1px solid var(--divider-color);
diff --git a/frontend/src/components/PostMenu.jsx b/frontend/src/components/PostMenu.jsx
index c8b1d2d..9a49001 100644
--- a/frontend/src/components/PostMenu.jsx
+++ b/frontend/src/components/PostMenu.jsx
@@ -1,13 +1,15 @@
-import { X, Trash2, AlertCircle, Flag } from 'lucide-react'
+import { X, Trash2, AlertCircle, Flag, Edit2 } from 'lucide-react'
 import { useState } from 'react'
 import { createPortal } from 'react-dom'
-import { reportPost } from '../utils/api'
+import { reportPost, editPost } from '../utils/api'
 import { hapticFeedback, showConfirm } from '../utils/telegram'
 import './PostMenu.css'
 
-export default function PostMenu({ post, currentUser, onClose, onDelete }) {
+export default function PostMenu({ post, currentUser, onClose, onDelete, onUpdate, buttonPosition }) {
   const [showReportModal, setShowReportModal] = useState(false)
+  const [showEditModal, setShowEditModal] = useState(false)
   const [reportReason, setReportReason] = useState('')
+  const [editContent, setEditContent] = useState(post.content || '')
   const [submitting, setSubmitting] = useState(false)
 
   const isOwnPost = post.author._id === currentUser.id
@@ -77,6 +79,31 @@ export default function PostMenu({ post, currentUser, onClose, onDelete }) {
     )
   }
 
+  const handleEdit = async () => {
+    if (!editContent.trim()) {
+      alert('Текст поста не может быть пустым')
+      return
+    }
+
+    try {
+      setSubmitting(true)
+      hapticFeedback('light')
+      await editPost(post._id, { content: editContent })
+      hapticFeedback('success')
+      setShowEditModal(false)
+      onClose()
+      if (onUpdate) {
+        onUpdate()
+      }
+    } catch (error) {
+      console.error('Ошибка редактирования поста:', error)
+      hapticFeedback('error')
+      alert('Ошибка редактирования поста')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
   const handleOverlayClick = (e) => {
     // Закрывать только при клике на overlay, не на контент
     if (e.target === e.currentTarget) {
@@ -84,6 +111,63 @@ export default function PostMenu({ post, currentUser, onClose, onDelete }) {
     }
   }
 
+  if (showEditModal) {
+    return createPortal(
+      <div 
+        className="post-menu-overlay"
+        onMouseDown={(e) => e.stopPropagation()}
+        onTouchStart={(e) => e.stopPropagation()}
+        onClick={handleOverlayClick}
+      >
+        <div className="edit-menu-content" onClick={(e) => e.stopPropagation()}>
+          <div className="edit-menu-header">
+            <h3>Редактировать пост</h3>
+            <button className="menu-close-btn" onClick={() => setShowEditModal(false)}>
+              <X size={18} />
+            </button>
+          </div>
+          <textarea
+            className="edit-content-input"
+            value={editContent}
+            onChange={e => setEditContent(e.target.value)}
+            placeholder="Текст поста..."
+            maxLength={2000}
+            rows={6}
+            autoFocus
+          />
+          <div className="edit-menu-actions">
+            <button
+              className="edit-cancel-btn"
+              onClick={() => {
+                setShowEditModal(false)
+                setEditContent(post.content || '')
+              }}
+            >
+              Отмена
+            </button>
+            <button
+              className="edit-save-btn"
+              onClick={handleEdit}
+              disabled={submitting || !editContent.trim()}
+            >
+              {submitting ? 'Сохранение...' : 'Сохранить'}
+            </button>
+          </div>
+        </div>
+      </div>,
+      document.body
+    )
+  }
+
+  const menuStyle = buttonPosition ? {
+    position: 'fixed',
+    top: `${buttonPosition.bottom + 4}px`,
+    left: `${buttonPosition.left + (buttonPosition.right - buttonPosition.left) / 2}px`,
+    transform: 'translateX(-50%)',
+    width: 'auto',
+    minWidth: '140px'
+  } : {}
+
   return createPortal(
     <div 
       className="post-menu-overlay"
@@ -91,31 +175,26 @@ export default function PostMenu({ post, currentUser, onClose, onDelete }) {
       onTouchStart={(e) => e.stopPropagation()}
       onClick={handleOverlayClick}
     >
-      <div className="menu-header" onClick={(e) => e.stopPropagation()}>
-        <button className="menu-close-btn" onClick={onClose}>
-          <X size={24} />
-        </button>
-        <h2>Действия</h2>
-        <div style={{ width: 40 }} />
-      </div>
-
-      <div className="menu-items" onClick={(e) => e.stopPropagation()}>
-        {isOwnPost || isModerator ? (
-          <button className="menu-item danger" onClick={onDelete}>
-            <Trash2 size={20} />
-            <span>Удалить пост</span>
-          </button>
-        ) : (
-          <button className="menu-item" onClick={() => setShowReportModal(true)}>
-            <Flag size={20} />
-            <span>Пожаловаться</span>
-          </button>
-        )}
-        
-        <button className="menu-item" onClick={onClose}>
-          <X size={20} />
-          <span>Отмена</span>
-        </button>
+      <div className="menu-content" style={menuStyle} onClick={(e) => e.stopPropagation()}>
+        <div className="menu-items" onClick={(e) => e.stopPropagation()}>
+          {isOwnPost || isModerator ? (
+            <>
+              <button className="menu-item" onClick={() => setShowEditModal(true)}>
+                <Edit2 size={18} />
+                <span>Редактировать</span>
+              </button>
+              <button className="menu-item danger" onClick={onDelete}>
+                <Trash2 size={18} />
+                <span>Удалить</span>
+              </button>
+            </>
+          ) : (
+            <button className="menu-item" onClick={() => setShowReportModal(true)}>
+              <Flag size={18} />
+              <span>Пожаловаться</span>
+            </button>
+          )}
+        </div>
       </div>
     </div>,
     document.body