6.21.1: Меню действий на экране желания

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

VERSION

@@ -1 +1 @@
-6.21.0
+6.21.1

play-life-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "play-life-web",
-  "version": "6.21.0",
+  "version": "6.21.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

play-life-web/src/components/WishlistForm.jsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
 import Cropper from 'react-easy-crop'
 import { useAuth } from './auth/AuthContext'
 import Toast from './Toast'
+import './Wishlist.css'
 import './WishlistForm.css'
 
 // Извлекает первый URL из текста
@@ -61,6 +62,10 @@ function WishlistForm({ onNavigate, wishlistId, editConditionIndex, newTaskId: n
   const [imageUrlInput, setImageUrlInput] = useState('') // Ссылка на картинку для загрузки по URL
   const [loadingImageFromUrl, setLoadingImageFromUrl] = useState(false)
   const [newTaskConsumed, setNewTaskConsumed] = useState(false) // Флаг что newTaskId уже добавлен как цель
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [isCopying, setIsCopying] = useState(false)
+  const [showActionMenu, setShowActionMenu] = useState(false)
+  const actionMenuHistoryRef = useRef(false)
   const fileInputRef = useRef(null)
 
   // Загрузка задач, проектов и саджестов групп
@@ -677,6 +682,77 @@ function WishlistForm({ onNavigate, wishlistId, editConditionIndex, newTaskId: n
     onNavigate?.('task-form', navParams)
   }
 
+  const openActionMenu = () => {
+    setShowActionMenu(true)
+    window.history.pushState({ actionMenu: true }, '')
+    actionMenuHistoryRef.current = true
+  }
+
+  const closeActionMenu = () => {
+    setShowActionMenu(false)
+    if (actionMenuHistoryRef.current) {
+      actionMenuHistoryRef.current = false
+      window.history.back()
+    }
+  }
+
+  // Обработка popstate для закрытия action menu кнопкой назад
+  useEffect(() => {
+    const handlePopState = () => {
+      if (showActionMenu) {
+        actionMenuHistoryRef.current = false
+        setShowActionMenu(false)
+      }
+    }
+    window.addEventListener('popstate', handlePopState)
+    return () => window.removeEventListener('popstate', handlePopState)
+  }, [showActionMenu])
+
+  const handleDelete = async () => {
+    if (!wishlistId) return
+
+    setShowActionMenu(false)
+    if (actionMenuHistoryRef.current) {
+      actionMenuHistoryRef.current = false
+      window.history.go(-2)
+    } else {
+      window.history.back()
+    }
+
+    setIsDeleting(true)
+    try {
+      const response = await authFetch(`${API_URL}/${wishlistId}`, { method: 'DELETE' })
+      if (!response.ok) {
+        throw new Error('Ошибка при удалении')
+      }
+    } catch (err) {
+      console.error('Error deleting wishlist item:', err)
+    }
+  }
+
+  const handleCopy = async () => {
+    if (!wishlistId) return
+
+    setShowActionMenu(false)
+    if (actionMenuHistoryRef.current) {
+      actionMenuHistoryRef.current = false
+      window.history.go(-2)
+    } else {
+      window.history.back()
+    }
+
+    setIsCopying(true)
+    try {
+      const response = await authFetch(`${API_URL}/${wishlistId}/copy`, { method: 'POST' })
+      if (!response.ok) {
+        const errorText = await response.text().catch(() => '')
+        throw new Error(errorText || 'Ошибка при копировании')
+      }
+    } catch (err) {
+      console.error('Error copying wishlist item:', err)
+    }
+  }
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     setError('')
@@ -1077,13 +1153,14 @@ function WishlistForm({ onNavigate, wishlistId, editConditionIndex, newTaskId: n
         zIndex: 1500,
         display: 'flex',
         justifyContent: 'center',
+        gap: '0.75rem',
       }}>
         <button
           type="submit"
           form="wishlist-form-element"
-          disabled={loading}
+          disabled={loading || isDeleting || isCopying}
           style={{
-            width: '100%',
+            flex: 1,
             maxWidth: '42rem',
             padding: '0.875rem',
             background: loading ? undefined : 'linear-gradient(to right, #10b981, #059669)',
@@ -1093,16 +1170,63 @@ function WishlistForm({ onNavigate, wishlistId, editConditionIndex, newTaskId: n
             borderRadius: '0.5rem',
             fontSize: '1rem',
             fontWeight: 600,
-            cursor: loading ? 'not-allowed' : 'pointer',
+            cursor: (loading || isDeleting || isCopying) ? 'not-allowed' : 'pointer',
             opacity: loading ? 0.6 : 1,
             transition: 'all 0.2s',
           }}
         >
           {loading ? 'Сохранение...' : 'Сохранить'}
         </button>
+        {wishlistId && (
+          <button
+            type="button"
+            onClick={openActionMenu}
+            disabled={loading || isDeleting || isCopying}
+            style={{
+              width: '52px',
+              height: '52px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'transparent',
+              color: '#059669',
+              border: '2px solid #059669',
+              borderRadius: '0.5rem',
+              fontSize: '1.25rem',
+              fontWeight: 700,
+              cursor: (loading || isDeleting || isCopying) ? 'not-allowed' : 'pointer',
+              lineHeight: 1,
+              flexShrink: 0,
+              padding: 0,
+              boxSizing: 'border-box',
+              transition: 'all 0.2s',
+            }}
+            title="Действия"
+          >
+            ⋮
+          </button>
+        )}
       </div>,
       document.body
     ) : null}
+    {showActionMenu && createPortal(
+      <div className="wishlist-modal-overlay" style={{ zIndex: 2000 }} onClick={closeActionMenu}>
+        <div className="wishlist-modal" onClick={(e) => e.stopPropagation()}>
+          <div className="wishlist-modal-header">
+            <h3>{name}</h3>
+          </div>
+          <div className="wishlist-modal-actions">
+            <button className="wishlist-modal-copy" onClick={handleCopy}>
+              Копировать
+            </button>
+            <button className="wishlist-modal-delete" onClick={handleDelete}>
+              Удалить
+            </button>
+          </div>
+        </div>
+      </div>,
+      document.body
+    )}
     </>
   )
 }