лучшено уведомление пользователя: добавлен модальный компонент ValidationModal для отображения уведомлений о необходимости выбрать стикеры или ввести название стикерпака

src/components/shared/NotificationModal.module.css

@@ -74,6 +74,10 @@
   gap: var(--spacing-small);
 }
 
+.spacer {
+  flex: 1;
+}
+
 .button {
   flex: 1;
   padding: var(--spacing-small);

src/components/shared/ValidationModal.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styles from './NotificationModal.module.css';
+
+interface ValidationModalProps {
+  isVisible: boolean;
+  title: string;
+  message: string;
+  onContinue: () => void;
+}
+
+const ValidationModal: React.FC<ValidationModalProps> = ({
+  isVisible,
+  title,
+  message,
+  onContinue
+}) => {
+  if (!isVisible) return null;
+
+  return (
+    <div className={styles.overlay}>
+      <div className={styles.modal}>
+        <div className={styles.header}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.message}>{message}</div>
+        </div>
+
+        <div className={styles.buttons}>
+          <div className={styles.spacer}></div> {/* Пустой элемент для выравнивания */}
+          <button
+            className={`${styles.button} ${styles.primaryButton}`}
+            onClick={onContinue}
+          >
+            Продолжить
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ValidationModal;

src/screens/CreateStickerPack.module.css

@@ -5,6 +5,13 @@
   padding: calc(3rem + var(--spacing-small)) var(--spacing-medium) var(--spacing-large);
   width: 100%;
   box-sizing: border-box;
+  position: relative; /* Добавляем для позиционирования фиксированной кнопки */
+}
+
+.content {
+  position: relative;
+  min-height: 100vh; /* Обеспечиваем, чтобы контент занимал как минимум всю высоту экрана */
+  padding-bottom: calc(4rem + 80px + var(--safe-area-inset-bottom)); /* Отступ для кнопки */
 }
 
 .header {
@@ -132,19 +139,27 @@
   }
 }
 
-.actions {
+/* Стили для контейнера кнопки */
-  display: flex;
+.createButtonContainer {
-  justify-content: center;
+  position: fixed;
-  margin-top: var(--spacing-medium);
+  bottom: calc(6rem + var(--safe-area-inset-bottom)); /* Увеличенный отступ от навигации */
+  left: var(--spacing-medium);
+  right: var(--spacing-medium);
+  width: auto;
+  max-width: calc(28rem - 2 * var(--spacing-medium));
+  margin: 0 auto;
+  z-index: 90;
 }
 
 .createButton {
-  padding: var(--spacing-small) var(--spacing-large);
+  width: 100%;
+  padding: calc(var(--spacing-small) * 1.5) var(--spacing-large); /* Увеличенный вертикальный padding для толщины */
   background-color: var(--color-primary);
   color: white;
   border: none;
   border-radius: var(--border-radius);
   font-weight: 500;
+  font-size: 1.1rem; /* Увеличенный размер шрифта */
   cursor: pointer;
   transition: transform 0.2s;
 }

src/screens/CreateStickerPack.tsx

@@ -6,6 +6,7 @@ import apiService from '../services/api';
 import { GeneratedImage } from '../types/api';
 import { getCurrentUserId } from '../constants/user';
 import EmojiPickerModal from '../components/shared/EmojiPickerModal';
+import ValidationModal from '../components/shared/ValidationModal';
 
 /**
  * Транслитерирует кириллический текст в латиницу.
@@ -61,6 +62,11 @@ const CreateStickerPack: React.FC = () => {
   const [isEmojiPickerVisible, setIsEmojiPickerVisible] = useState(false);
   const [activeEmojiIndex, setActiveEmojiIndex] = useState<number | null>(null);
   
+  // Состояния для модального окна валидации
+  const [validationTitle, setValidationTitle] = useState<string>('');
+  const [validationMessage, setValidationMessage] = useState<string>('');
+  const [isValidationModalVisible, setIsValidationModalVisible] = useState<boolean>(false);
+  
   // Функция для сворачивания клавиатуры
   const dismissKeyboard = () => {
     if (titleInputRef.current) {
@@ -145,15 +151,24 @@ const CreateStickerPack: React.FC = () => {
     });
   };
 
+  // Обработчик закрытия модального окна валидации
+  const handleValidationModalClose = () => {
+    setIsValidationModalVisible(false);
+  };
+
   // Обработчик создания стикерпака
   const handleCreateStickerPack = async () => {
     if (!title.trim()) {
-      setError('Введите название стикерпака');
+      setValidationTitle('Название не указано');
+      setValidationMessage('Пожалуйста, введите название для вашего стикерпака.');
+      setIsValidationModalVisible(true);
       return;
     }
 
     if (selectedImages.length === 0) {
-      setError('Выберите хотя бы одно изображение');
+      setValidationTitle('Стикеры не выбраны');
+      setValidationMessage('Пожалуйста, выберите хотя бы одно изображение для вашего стикерпака.');
+      setIsValidationModalVisible(true);
       return;
     }
 
@@ -190,7 +205,9 @@ const CreateStickerPack: React.FC = () => {
       navigate('/packs');
     } catch (err) {
       console.error('Ошибка при создании стикерпака:', err);
-      setError('Не удалось создать стикерпак');
+      setValidationTitle('Ошибка');
+      setValidationMessage('Не удалось создать стикерпак. Пожалуйста, попробуйте еще раз.');
+      setIsValidationModalVisible(true);
     } finally {
       setCreating(false);
     }
@@ -208,6 +225,7 @@ const CreateStickerPack: React.FC = () => {
         <h1 className={styles.title}>Создание стикерпака</h1>
       </div>
 
+      <div className={styles.content}>
         <div className={styles.form}>
           <div className={styles.formGroup}>
             <label htmlFor="title" className={styles.label}>Название стикерпака</label>
@@ -272,17 +290,18 @@ const CreateStickerPack: React.FC = () => {
           </div>
 
           {error && <p className={styles.error}>{error}</p>}
+        </div>
+      </div>
 
-        <div className={styles.actions}>
+      <div className={styles.createButtonContainer}>
         <button 
           className={styles.createButton}
           onClick={handleCreateStickerPack}
-            disabled={creating || selectedImages.length === 0}
+          disabled={creating}
         >
           {creating ? 'Создание...' : 'Создать стикерпак'}
         </button>
       </div>
-      </div>
 
       {/* Модальное окно выбора эмодзи */}
       <EmojiPickerModal
@@ -291,6 +310,14 @@ const CreateStickerPack: React.FC = () => {
         onSelect={handleSelectEmoji}
         initialEmoji={activeEmojiIndex !== null ? (emojis[activeEmojiIndex] || '😊') : '😊'}
       />
+
+      {/* Модальное окно валидации */}
+      <ValidationModal
+        isVisible={isValidationModalVisible}
+        title={validationTitle}
+        message={validationMessage}
+        onContinue={handleValidationModalClose}
+      />
     </div>
   );
 };