From 2f57bf91ef8b4adda25ce651579bbaba28c1d25d Mon Sep 17 00:00:00 2001
From: Web-serfer <user@example.com>
Date: Wed, 6 May 2026 00:49:24 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D1=8B=D0=B9=20=D1=84=D1=83?=
 =?UTF-8?q?=D0=BD=D0=BA=D1=86=D0=B8=D0=BE=D0=BD=D0=B0=D0=BB=20=D0=B2=D1=85?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B0=20=D0=B8=20=D0=B2=D1=8B=D1=85=D0=BE=D0=B4?=
 =?UTF-8?q?=D0=B0=20=D0=B2=20=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=BC=20=D0=BC=D0=B5=D0=BD=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/base/Toast.astro      |  30 +++-
 .../src/components/layout/header/Header.astro |  25 +++-
 .../components/layout/header/MobileMenu.astro | 140 +++++++++++++++++-
 .../components/layout/header/UserMenu.astro   |   6 +-
 frontend/src/pages/auth/sign-in.astro         |   6 +
 5 files changed, 196 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/base/Toast.astro b/frontend/src/components/base/Toast.astro
index a2efb15..51ac5ea 100644
--- a/frontend/src/components/base/Toast.astro
+++ b/frontend/src/components/base/Toast.astro
@@ -36,7 +36,7 @@
           ${type === 'success' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>' : ''}
           ${type === 'error' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>' : ''}
           ${type === 'warning' ? '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><path fill="currentColor" d="M240 176h32v176h-32zm0 208h32v32h-32z"/><path fill="currentColor" d="M274.014 16h-36.028L16 445.174V496h480v-50.826ZM464 464H48v-11.041L256 50.826l208 402.133Z"/></svg>' : ''}
-          ${type === 'info' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>' : ''}
+          ${type === 'info' ? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>' : ''}
         </div>
         <span class="toast-message">${message}</span>
         <button class="toast-close" aria-label="Закрыть">
@@ -177,4 +177,32 @@
       max-width: none;
     }
   }
+
+  @media (max-width: 480px) {
+    .toast-container {
+      left: 0.5rem;
+      right: 0.5rem;
+      gap: 0.4rem;
+    }
+
+    :global(.toast-item) {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.75rem;
+      gap: 0.4rem;
+    }
+
+    :global(.toast-item .toast-icon) {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+
+    :global(.toast-item .toast-close) {
+      padding: 0.2rem;
+    }
+
+    :global(.toast-item .toast-close svg) {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/layout/header/Header.astro b/frontend/src/components/layout/header/Header.astro
index 583d146..20578a4 100644
--- a/frontend/src/components/layout/header/Header.astro
+++ b/frontend/src/components/layout/header/Header.astro
@@ -44,8 +44,8 @@ import { COMPANY } from "@constants";
 
       <div class="header-actions" id="auth-section"></div>
 
-      <div class="mobile-actions">
-        <a href={`tel:${COMPANY.phoneClean}`} class="mobile-phone-btn" aria-label="Позони��ь: {COMPANY.phone}">
+<div class="mobile-actions">
+        <a href={`tel:${COMPANY.phoneClean}`} class="mobile-phone-btn" aria-label="Позониь: {COMPANY.phone}">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -395,8 +395,10 @@ import { COMPANY } from "@constants";
           localStorage.removeItem('user');
           localStorage.removeItem('pocketbase_auth');
           document.querySelector('.header-right')?.classList.remove('auth-active');
-          // Редирект на текущую страницу
-          window.location.href = window.location.pathname + window.location.search + window.location.hash;
+          // Редирект на текущую страницу с параметром loggedout
+          const currentUrl = window.location.pathname + window.location.search + window.location.hash;
+          const separator = currentUrl.includes('?') ? '&' : '?';
+          window.location.href = currentUrl + separator + 'loggedout=true';
         });
         
         // Добавляем класс для изменения порядка
@@ -415,6 +417,19 @@ import { COMPANY } from "@constants";
     document.querySelector('.header-right')?.classList.remove('auth-active');
   }
 
+  // Проверка параметра loggedout и показ Toast
+  function checkLogoutToast() {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('loggedout') === 'true') {
+      // Очистить URL без перезагрузки
+      window.history.replaceState({}, '', window.location.pathname + window.location.hash);
+      // Показать Toast
+      setTimeout(() => {
+        window.toast?.show('Вы вышли из системы', 'info', 3000);
+      }, 100);
+    }
+  }
+
   // Стили
   const authStyle = `
     .header-right.auth-active {
@@ -485,6 +500,8 @@ import { COMPANY } from "@constants";
     document.head.appendChild(styleEl);
     
     initAuth();
+    checkLogoutToast();
+    
     const animatedElements = document.querySelectorAll(".animate-load");
 
     animatedElements.forEach((el) => {
diff --git a/frontend/src/components/layout/header/MobileMenu.astro b/frontend/src/components/layout/header/MobileMenu.astro
index 6fd959d..b179566 100644
--- a/frontend/src/components/layout/header/MobileMenu.astro
+++ b/frontend/src/components/layout/header/MobileMenu.astro
@@ -72,14 +72,14 @@ import { NAV_LINKS, COMPANY } from '@constants';
           <span class="contact-label">Ежедневно 9:00–21:00</span>
         </div>
 
-        <!-- Кнопка входа ОСТАВЛЕНА ВНИЗУ -->
-        <a href="/auth/sign-in" class="mobile-login-btn">
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <!-- Кнопка входа/выхода -->
+        <a href="/auth/sign-in" class="mobile-login-btn" id="mobile-auth-btn">
+          <svg id="mobile-auth-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
             <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
             <polyline points="10 17 15 12 10 7"></polyline>
             <line x1="15" y1="12" x2="3" y2="12"></line>
           </svg>
-          <span>Вход в аккаунт</span>
+          <span id="mobile-auth-text">Вход в аккаунт</span>
         </a>
       </div>
     </div>
@@ -396,6 +396,8 @@ import { NAV_LINKS, COMPANY } from '@constants';
     font-size: 0.95rem;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(234, 194, 110, 0.3);
+    border: none;
+    cursor: pointer;
   }
 
   .mobile-login-btn:hover {
@@ -407,6 +409,39 @@ import { NAV_LINKS, COMPANY } from '@constants';
     transform: translateY(0);
   }
 
+  /* Кнопка выхода - красная как в десктопе */
+  .mobile-login-btn.logout {
+    background: #ef4444;
+    color: #fff;
+    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+  }
+
+  .mobile-login-btn.logout:hover {
+    background: #dc2626;
+    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.4);
+  }
+
+  /* Сообщение о входе - жёлтое */
+  .mobile-login-btn.auth-message.login-message {
+    background: #f59e0b;
+    color: #1f2937;
+    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
+    cursor: default;
+  }
+
+  .mobile-login-btn.auth-message.login-message:hover {
+    background: #d97706;
+    box-shadow: 0 6px 25px rgba(245, 158, 11, 0.5);
+  }
+
+  /* Сообщение о выходе - серое */
+  .mobile-login-btn.auth-message.logout-message {
+    background: #6b7280;
+    color: #fff;
+    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
+    cursor: default;
+  }
+
   .mobile-menu::-webkit-scrollbar {
     width: 4px;
   }
@@ -486,5 +521,102 @@ import { NAV_LINKS, COMPANY } from '@constants';
       let touchEndX = (e as TouchEvent).changedTouches[0].screenX;
       if (touchEndX - touchStartX < -50) closeMenu(); // Свайп влево
     });
+
+    // Проверка авторизации и настройка кнопки
+    const authBtn = document.getElementById('mobile-auth-btn');
+    const authText = document.getElementById('mobile-auth-text');
+    const authIcon = document.getElementById('mobile-auth-icon');
+    
+    const token = localStorage.getItem('auth_token');
+    const userData = localStorage.getItem('user');
+    
+    // Функция показа сообщения в блоке авторизации
+    const showAuthMessage = (message: string, isLogin: boolean) => {
+      if (!authText || !authBtn || !authIcon) return;
+      
+      authText.textContent = message;
+      authBtn.classList.remove('logout');
+      authBtn.classList.add('auth-message');
+      if (isLogin) {
+        authBtn.classList.add('login-message');
+      } else {
+        authBtn.classList.add('logout-message');
+      }
+      authBtn.href = '#';
+      authIcon.innerHTML = isLogin 
+        ? '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline>'
+        : '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line>';
+    };
+    
+    // Функция восстановления кнопки "Войти"
+    const restoreLoginButton = () => {
+      if (!authText || !authBtn || !authIcon) return;
+      
+      authText.textContent = 'Вход в аккаунт';
+      authBtn.classList.remove('auth-message', 'login-message', 'logout-message');
+      authBtn.href = '/auth/sign-in';
+      authBtn.onclick = null;
+      authIcon.innerHTML = '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line>';
+    };
+    
+    // Функция восстановления кнопки "Выйти"
+    const restoreLogoutButton = () => {
+      if (!authText || !authBtn || !authIcon) return;
+      
+      authText.textContent = 'Выйти';
+      authBtn.classList.remove('auth-message', 'login-message', 'logout-message');
+      authBtn.classList.add('logout');
+      authBtn.href = '#';
+      authIcon.innerHTML = '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line>';
+      
+      // Добавляем обработчик выхода
+      authBtn.onclick = async (e) => {
+        e.preventDefault();
+        
+        // Показываем сообщение о выходе
+        showAuthMessage('Вы вышли из системы', false);
+        
+        // Удаляем данные
+        try {
+          await fetch('/api/auth/logout', { method: 'POST' });
+        } catch (err) {}
+        localStorage.removeItem('auth_token');
+        localStorage.removeItem('user');
+        localStorage.removeItem('pocketbase_auth');
+        
+        // Через 3 сек возвращаем кнопку входа
+        setTimeout(() => {
+          restoreLoginButton();
+        }, 3000);
+      };
+    };
+    
+    // Проверка флага сообщения о входе
+    const loginMessage = sessionStorage.getItem('showLoginMessage');
+    const shouldOpenMenu = sessionStorage.getItem('openMobileMenuOnLoad') === 'true';
+    
+    if (shouldOpenMenu) {
+      const overlay = document.getElementById('mobile-menu-overlay');
+      const body = document.body;
+      if (overlay) overlay.classList.add('active');
+      body?.classList.add('menu-open');
+      sessionStorage.removeItem('openMobileMenuOnLoad');
+      
+      // Если есть сообщение о входе - показываем его
+      if (loginMessage) {
+        showAuthMessage(`Добро пожаловать, ${loginMessage}!`, true);
+        sessionStorage.removeItem('showLoginMessage');
+        
+        // Через 3 сек меняем на кнопку выхода
+        setTimeout(() => {
+          restoreLogoutButton();
+        }, 3000);
+      }
+    }
+    
+    // Если авторизован и нет сообщения о входе - показываем кнопку выхода
+    if (token && userData && !loginMessage) {
+      restoreLogoutButton();
+    }
   });
 </script>
\ No newline at end of file
diff --git a/frontend/src/components/layout/header/UserMenu.astro b/frontend/src/components/layout/header/UserMenu.astro
index 771ee75..53ea5a3 100644
--- a/frontend/src/components/layout/header/UserMenu.astro
+++ b/frontend/src/components/layout/header/UserMenu.astro
@@ -112,8 +112,10 @@ const firstLetter = userName ? userName.charAt(0).toUpperCase() : userEmail?.cha
       localStorage.removeItem('user');
       localStorage.removeItem('pocketbase_auth');
       
-      // Перенаправляем на главную
-      window.location.href = '/';
+      // Перенаправляем на текущую страницу с параметром loggedout
+      const currentUrl = window.location.pathname + window.location.search + window.location.hash;
+      const separator = currentUrl.includes('?') ? '&' : '?';
+      window.location.href = currentUrl + separator + 'loggedout=true';
     });
   });
 </script>
\ No newline at end of file
diff --git a/frontend/src/pages/auth/sign-in.astro b/frontend/src/pages/auth/sign-in.astro
index 48ac856..e3e1e0a 100644
--- a/frontend/src/pages/auth/sign-in.astro
+++ b/frontend/src/pages/auth/sign-in.astro
@@ -624,6 +624,12 @@ import { SITE_URL } from '@constants';
                 const hash = new URLSearchParams(window.location.search).get('hash');
                 const finalUrl = hash ? `${redirectUrl}#comments` : redirectUrl;
                 
+                // Сохраняем флаг для показа сообщения о входе в мобильном меню
+                const user = typeof data.user === 'string' ? JSON.parse(data.user) : data.user;
+                const userName = user?.name || user?.email || 'Пользователь';
+                sessionStorage.setItem('showLoginMessage', userName);
+                sessionStorage.setItem('openMobileMenuOnLoad', 'true');
+                
                 window.location.href = finalUrl;
             } else if (data.error?.includes('подтверждён')) {
                 showError(emailInput, data.error);