fix: stabilize mini app login and safe area

src/GmRelay.Web/Components/App.razor

@@ -24,6 +24,22 @@
     <ReconnectModal />
     <script src="@Assets["_framework/blazor.web.js"]"></script>
     <script>
+        window.waitForTelegramMiniApp = async function (timeoutMs) {
+            var deadline = Date.now() + (timeoutMs || 3000);
+
+            while (Date.now() <= deadline) {
+                if (window.Telegram && window.Telegram.WebApp) {
+                    return window.Telegram.WebApp;
+                }
+
+                await new Promise(function (resolve) {
+                    setTimeout(resolve, 100);
+                });
+            }
+
+            return null;
+        };
+
         window.waitForTelegramMiniAppInitData = async function (timeoutMs) {
             var deadline = Date.now() + (timeoutMs || 3000);
 
@@ -40,30 +56,111 @@
             return null;
         };
 
-        (async function () {
-            var webApp = await window.waitForTelegramMiniAppInitData(1000);
+        window.syncTelegramMiniAppViewport = function (webApp) {
+            if (!webApp) {
+                return;
+            }
+
+            var root = document.documentElement;
+            var safeArea = webApp.safeAreaInset || {};
+            var contentSafeArea = webApp.contentSafeAreaInset || {};
+            var setPx = function (name, value) {
+                root.style.setProperty(name, Math.max(0, Number(value) || 0) + 'px');
+            };
+
+            setPx('--gm-tg-safe-top', safeArea.top);
+            setPx('--gm-tg-safe-right', safeArea.right);
+            setPx('--gm-tg-safe-bottom', safeArea.bottom);
+            setPx('--gm-tg-safe-left', safeArea.left);
+            setPx('--gm-tg-content-safe-top', contentSafeArea.top);
+            setPx('--gm-tg-content-safe-right', contentSafeArea.right);
+            setPx('--gm-tg-content-safe-bottom', contentSafeArea.bottom);
+            setPx('--gm-tg-content-safe-left', contentSafeArea.left);
+
+            if (webApp.viewportHeight) {
+                root.style.setProperty('--gm-tg-viewport-height', webApp.viewportHeight + 'px');
+            }
+        };
+
+        window.prepareTelegramMiniApp = function (webApp) {
             if (!webApp) {
                 return;
             }
 
             document.body.classList.add('telegram-mini-app');
-            webApp.ready();
+            window.syncTelegramMiniAppViewport(webApp);
+
+            try {
+                webApp.ready();
+            } catch (error) {
+            }
+
+            try {
+                webApp.expand();
+            } catch (error) {
+            }
+
+            if (webApp.onEvent && !window.gmRelayTelegramMiniAppViewportEventsRegistered) {
+                window.gmRelayTelegramMiniAppViewportEventsRegistered = true;
+                webApp.onEvent('safeAreaChanged', function () {
+                    window.syncTelegramMiniAppViewport(webApp);
+                });
+                webApp.onEvent('contentSafeAreaChanged', function () {
+                    window.syncTelegramMiniAppViewport(webApp);
+                });
+                webApp.onEvent('viewportChanged', function () {
+                    window.syncTelegramMiniAppViewport(webApp);
+                });
+            }
+        };
+
+        (async function () {
+            var webApp = await window.waitForTelegramMiniApp(1000);
+            window.prepareTelegramMiniApp(webApp);
         })();
 
         window.loadTelegramWidget = function (botUsername, authUrl) {
             var container = document.getElementById('telegram-login-container');
             if (!container) return;
             container.innerHTML = '';
+            window.gmRelayTelegramLoginAuthUrl = authUrl || '/auth/telegram-login';
             var script = document.createElement('script');
             script.async = true;
             script.src = 'https://telegram.org/js/telegram-widget.js?22';
             script.setAttribute('data-telegram-login', botUsername);
             script.setAttribute('data-size', 'large');
-            script.setAttribute('data-auth-url', authUrl);
+            script.setAttribute('data-onauth', 'window.handleTelegramLogin(user)');
             script.setAttribute('data-request-access', 'write');
             container.appendChild(script);
         };
 
+        window.handleTelegramLogin = async function (user) {
+            if (!user) {
+                window.location.href = '/login?error=auth_failed';
+                return;
+            }
+
+            try {
+                var response = await fetch(window.gmRelayTelegramLoginAuthUrl || '/auth/telegram-login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'same-origin',
+                    cache: 'no-store',
+                    body: JSON.stringify(user)
+                });
+
+                if (!response.ok) {
+                    window.location.href = '/login?error=auth_failed';
+                    return;
+                }
+
+                var payload = await response.json();
+                window.location.href = payload.redirectUrl || '/';
+            } catch (error) {
+                window.location.href = '/login?error=auth_failed';
+            }
+        };
+
         window.watchTelegramMiniAppLogin = function (statusUrl, redirectUrl, reloadOnReturn) {
             window.gmRelayMiniAppLoginReloadOnReturn =
                 window.gmRelayMiniAppLoginReloadOnReturn || reloadOnReturn === true;
@@ -161,29 +258,40 @@
         };
 
         window.authenticateTelegramMiniApp = async function (authUrl, redirectUrl) {
-            var webApp = await window.waitForTelegramMiniAppInitData(3000);
+            var webApp = await window.waitForTelegramMiniApp(3000);
             if (!webApp) {
-                return false;
+                return { authenticated: false, reason: 'telegram-webapp-missing' };
             }
 
-            document.body.classList.add('telegram-mini-app');
-            webApp.ready();
-            webApp.expand();
+            window.prepareTelegramMiniApp(webApp);
 
-            var response = await fetch(authUrl, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'same-origin',
-                body: JSON.stringify({ initData: webApp.initData })
-            });
-
-            if (!response.ok) {
-                return false;
+            if (!webApp.initData) {
+                return { authenticated: false, reason: 'telegram-init-data-empty' };
             }
 
-            var payload = await response.json();
-            window.location.href = payload.redirectUrl || redirectUrl || '/';
-            return true;
+            try {
+                var response = await fetch(authUrl, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'same-origin',
+                    cache: 'no-store',
+                    body: JSON.stringify({ initData: webApp.initData })
+                });
+
+                if (!response.ok) {
+                    return {
+                        authenticated: false,
+                        reason: 'telegram-auth-failed',
+                        status: response.status
+                    };
+                }
+
+                var payload = await response.json();
+                window.location.href = payload.redirectUrl || redirectUrl || '/';
+                return { authenticated: true, redirectUrl: payload.redirectUrl || redirectUrl || '/' };
+            } catch (error) {
+                return { authenticated: false, reason: 'telegram-auth-failed' };
+            }
         };
     </script>
 </body>

src/GmRelay.Web/Components/Layout/NavMenu.razor

@@ -56,7 +56,7 @@
                     </button>
                 </form>
 
-                <div class="nav-version">v1.9.2</div>
+                <div class="nav-version">v1.9.3</div>
             </div>
         </Authorized>
         <NotAuthorized>

src/GmRelay.Web/Components/Pages/Login.razor

@@ -25,7 +25,6 @@
 
 @code {
     private string BotUsername => Configuration["Telegram:BotUsername"] ?? "GmRelayBot";
-    private string AuthUrl => Navigation.ToAbsoluteUri("/auth/telegram").ToString();
 
     [CascadingParameter]
     private Task<AuthenticationState>? AuthStateTask { get; set; }
@@ -46,8 +45,8 @@
     {
         if (firstRender)
         {
-            await JS.InvokeVoidAsync("loadTelegramWidget", BotUsername, AuthUrl);
-            await JS.InvokeVoidAsync("watchTelegramMiniAppLogin", "/auth/status", "/", true);
+            await JS.InvokeVoidAsync("loadTelegramWidget", BotUsername, "/auth/telegram-login");
+            await JS.InvokeVoidAsync("watchTelegramMiniAppLogin", "/auth/status", "/", false);
         }
     }
 }

src/GmRelay.Web/Components/Pages/MiniApp.razor

@@ -1,12 +1,13 @@
 @page "/miniapp"
 @using Microsoft.AspNetCore.Components.Authorization
+@using System.Text.Json.Serialization
 @inject IJSRuntime JS
 @inject NavigationManager Navigation
 
 <PageTitle>Mini App Dashboard — GM-Relay</PageTitle>
 
 <div class="mini-app-page">
-    <div class="mini-app-auth-card">
+    <div class="mini-app-auth-card" data-auth-status="@miniAppAuthStatus">
         <div class="mini-app-logo">🎲</div>
         <h1>GM-Relay</h1>
         <p>@statusMessage</p>
@@ -20,6 +21,7 @@
 
 @code {
     private string statusMessage = "Открываем dashboard внутри Telegram...";
+    private string miniAppAuthStatus = "starting";
     private bool showFallback;
 
     [CascadingParameter]
@@ -48,14 +50,17 @@
 
         try
         {
-            var authenticated = await JS.InvokeAsync<bool>(
+            var result = await JS.InvokeAsync<MiniAppAuthResult>(
                 "authenticateTelegramMiniApp",
                 "/auth/telegram-webapp",
                 "/");
 
-            if (!authenticated)
+            if (!result.Authenticated)
             {
-                statusMessage = "Mini App доступен из Telegram. Для браузера используйте обычный вход.";
+                miniAppAuthStatus = string.IsNullOrWhiteSpace(result.Reason)
+                    ? "telegram-auth-failed"
+                    : result.Reason;
+                statusMessage = GetStatusMessage(miniAppAuthStatus);
                 showFallback = true;
                 StateHasChanged();
                 await TryWatchLoginAsync();
@@ -63,6 +68,7 @@
         }
         catch (JSException)
         {
+            miniAppAuthStatus = "telegram-auth-failed";
             statusMessage = "Не удалось получить данные Telegram Mini App. Попробуйте открыть dashboard из бота.";
             showFallback = true;
             StateHasChanged();
@@ -80,4 +86,18 @@
         {
         }
     }
+
+    private static string GetStatusMessage(string reason) => reason switch
+    {
+        "telegram-webapp-missing" => "Mini App API не найден. Если страница открыта в браузере, войдите через Telegram.",
+        "telegram-init-data-empty" => "Telegram открыл страницу без Mini App initData. Попробуйте войти через Telegram на этом экране.",
+        "telegram-auth-failed" => "Не удалось проверить Telegram Mini App. Попробуйте войти через Telegram.",
+        _ => "Mini App доступен из Telegram. Для браузера используйте обычный вход."
+    };
+
+    private sealed record MiniAppAuthResult(
+        [property: JsonPropertyName("authenticated")] bool Authenticated,
+        [property: JsonPropertyName("reason")] string? Reason,
+        [property: JsonPropertyName("status")] int? Status,
+        [property: JsonPropertyName("redirectUrl")] string? RedirectUrl);
 }