6.19.0: Унификация кнопок сохранения в формах

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

play-life-web/package.json

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

play-life-web/src/App.jsx

@@ -1445,6 +1445,7 @@ function AppContent() {
                 boardId={tabParams.boardId}
                 previousTab={previousTab}
                 onSaved={() => setShoppingRefreshTrigger(prev => prev + 1)}
+                isActive={activeTab === 'shopping-item-form'}
               />
             </div>
           </div>

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

@@ -1061,19 +1061,38 @@ function ProjectPriorityManager({ allProjectsData, currentWeekData, shouldLoad,
         />
       )}
 
-      <div className={onClose
-        ? 'sticky bottom-0 pt-2 pb-4 mt-2'
-        : 'fixed bottom-0 left-0 right-0 bg-gray-100 px-4 pt-2 pb-4'
-      }>
-        <div className="max-w-2xl mx-auto">
-          <button
-            onClick={handleSave}
-            disabled={isSaving}
-            className="w-full py-3 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white font-semibold rounded-lg shadow transition-all"
-          >
-            {isSaving ? 'Сохранение...' : 'Сохранить'}
-          </button>
-        </div>
+      <div style={{
+        position: 'sticky',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: '0.75rem 0',
+        paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom))',
+        background: 'linear-gradient(to top, white 60%, rgba(255,255,255,0))',
+        display: 'flex',
+        justifyContent: 'center',
+      }}>
+        <button
+          onClick={handleSave}
+          disabled={isSaving}
+          style={{
+            width: '100%',
+            maxWidth: '42rem',
+            padding: '0.875rem',
+            background: isSaving ? undefined : 'linear-gradient(to right, #10b981, #059669)',
+            backgroundColor: isSaving ? '#9ca3af' : undefined,
+            color: 'white',
+            border: 'none',
+            borderRadius: '0.5rem',
+            fontSize: '1rem',
+            fontWeight: 600,
+            cursor: isSaving ? 'not-allowed' : 'pointer',
+            opacity: isSaving ? 0.6 : 1,
+            transition: 'all 0.2s',
+          }}
+        >
+          {isSaving ? 'Сохранение...' : 'Сохранить'}
+        </button>
       </div>
 
       {toastMessage && (

play-life-web/src/components/ShoppingItemForm.css

@@ -3,6 +3,7 @@
   max-width: 600px;
   margin: 0 auto;
   position: relative;
+  padding-bottom: 5rem;
 }
 
 .shopping-item-form h2 {

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

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { useAuth } from './auth/AuthContext'
 import Toast from './Toast'
 import SubmitButton from './SubmitButton'
 import DeleteButton from './DeleteButton'
 import './ShoppingItemForm.css'
 
-function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved }) {
+function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved, isActive }) {
   const { authFetch } = useAuth()
   const [name, setName] = useState('')
   const [description, setDescription] = useState('')
@@ -183,6 +184,7 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved })
   }
 
   return (
+    <>
     <div className="shopping-item-form">
       <button className="close-x-button" onClick={handleClose}>
         ✕
@@ -277,23 +279,6 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved })
           </div>
         </div>
 
-        <div className="form-actions">
-          <SubmitButton
-            onClick={handleSave}
-            loading={loading}
-            disabled={!name.trim() || !hasValidPeriod}
-          >
-            Сохранить
-          </SubmitButton>
-          {isEdit && (
-            <DeleteButton
-              onClick={handleDelete}
-              loading={isDeleting}
-              disabled={loading}
-              title="Удалить товар"
-            />
-          )}
-        </div>
       </div>
 
       {toastMessage && (
@@ -304,6 +289,53 @@ function ShoppingItemForm({ onNavigate, itemId, boardId, previousTab, onSaved })
         />
       )}
     </div>
+    {isActive ? createPortal(
+      <div style={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        padding: '0.75rem 1rem',
+        paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom))',
+        background: 'linear-gradient(to top, white 60%, rgba(255,255,255,0))',
+        zIndex: 1500,
+        display: 'flex',
+        justifyContent: 'center',
+        gap: '0.75rem',
+      }}>
+        <button
+          onClick={handleSave}
+          disabled={loading || isDeleting || !name.trim() || !hasValidPeriod}
+          style={{
+            flex: 1,
+            maxWidth: '42rem',
+            padding: '0.875rem',
+            background: loading ? undefined : 'linear-gradient(to right, #10b981, #059669)',
+            backgroundColor: loading ? '#9ca3af' : undefined,
+            color: 'white',
+            border: 'none',
+            borderRadius: '0.5rem',
+            fontSize: '1rem',
+            fontWeight: 600,
+            cursor: (loading || isDeleting) ? 'not-allowed' : 'pointer',
+            opacity: loading ? 0.6 : 1,
+            transition: 'all 0.2s',
+          }}
+        >
+          {loading ? 'Сохранение...' : 'Сохранить'}
+        </button>
+        {isEdit && (
+          <DeleteButton
+            onClick={handleDelete}
+            loading={isDeleting}
+            disabled={loading}
+            title="Удалить товар"
+          />
+        )}
+      </div>,
+      document.body
+    ) : null}
+    </>
   )
 }
 

play-life-web/src/components/TaskForm.css

@@ -3,7 +3,7 @@
   max-width: 800px;
   margin: 0 auto;
   position: relative;
-  padding-bottom: 5.5rem;
+  padding-bottom: 5rem;
 }
 
 .close-x-button {

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

@@ -1412,23 +1412,36 @@ function TaskForm({ onNavigate, taskId, wishlistId, returnTo, returnWishlistId,
       bottom: 0,
       left: 0,
       right: 0,
-      padding: '1.5rem 1rem 0.75rem',
+      padding: '0.75rem 1rem',
       paddingBottom: 'max(0.75rem, env(safe-area-inset-bottom))',
-      background: 'linear-gradient(to top, white 70%, rgba(255,255,255,0))',
+      background: 'linear-gradient(to top, white 60%, rgba(255,255,255,0))',
       zIndex: 1500,
       display: 'flex',
       justifyContent: 'center',
       gap: '0.75rem',
     }}>
-      <SubmitButton
+      <button
         type="submit"
         form="task-form-element"
-        loading={loading}
-        disabled={isDeleting}
-        style={{ flex: 1, maxWidth: '42rem' }}
+        disabled={loading || isDeleting}
+        style={{
+          flex: 1,
+          maxWidth: '42rem',
+          padding: '0.875rem',
+          background: loading ? undefined : 'linear-gradient(to right, #10b981, #059669)',
+          backgroundColor: loading ? '#9ca3af' : undefined,
+          color: 'white',
+          border: 'none',
+          borderRadius: '0.5rem',
+          fontSize: '1rem',
+          fontWeight: 600,
+          cursor: (loading || isDeleting) ? 'not-allowed' : 'pointer',
+          opacity: loading ? 0.6 : 1,
+          transition: 'all 0.2s',
+        }}
       >
-        Сохранить
-      </SubmitButton>
+        {loading ? 'Сохранение...' : 'Сохранить'}
+      </button>
       {taskId && (
         <DeleteButton
           onClick={handleDelete}