From 74272039c57f07aa76e8c0ac1a34519c3f3b1aa9 Mon Sep 17 00:00:00 2001
From: 3252a8 <3252a8@proton.me>
Date: Mon, 1 Jun 2026 19:06:27 +0300
Subject: [PATCH] feat: add login language selector

---
 frontend/src/App.svelte                    |  21 ++-
 frontend/src/styles/webapp.css             |  44 +++++++
 frontend/src/webapp/auth/AuthScreen.svelte | 144 ++++++++++++++++-----
 3 files changed, 173 insertions(+), 36 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index c71616c..6c0eb53 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -183,6 +183,7 @@
   let languageClickGuardArmed = false;
   let languageClickGuardTimer = null;
   let languageClickGuardArmTimer = null;
+  let guestLanguage = "";
   let emailAvatarUrl = "";
   let avatarHashToken = "";
   let token = MOCK ? "local-preview" : "";
@@ -213,12 +214,13 @@
   const i18n = createI18n({
     messages: I18N,
     defaultLang: "ru",
-    getLang: () => user?.language_code || CFG.language || "ru",
+    getLang: () => user?.language_code || guestLanguage || CFG.language || "ru",
   });
   const normalizeLangCode = i18n.normalizeLangCode;
   const t = i18n.t;
   const termUnitLabel = i18n.termUnitLabel;
   const languageName = i18n.languageName;
+  guestLanguage = normalizeLangCode(CFG.language || "ru");
   const apiClient = createApiClient({
     apiBase: CFG.apiBase,
     csrfCookieName: CSRF_COOKIE_NAME,
@@ -460,7 +462,7 @@
     activeTab = "settings";
   }
   $: referral = data?.referral || MOCK_SOURCE.data.referral;
-  $: currentLang = normalizeLangCode(user?.language_code || CFG.language || "ru");
+  $: currentLang = normalizeLangCode(user?.language_code || guestLanguage || CFG.language || "ru");
   $: languageCodes = uniqueLanguageCodes(
     WEBAPP_LANGUAGE_ORDER,
     CFG.languages,
@@ -939,6 +941,13 @@
     }, 260);
   }
 
+  function updateGuestLanguage(nextValue) {
+    const language = normalizeLangCode(nextValue);
+    setLanguageMenuOpen(false);
+    if (!language || language === currentLang) return;
+    guestLanguage = language;
+  }
+
   function readTelegramMiniAppInitDataFromLocation() {
     return telegramSdk.readInitDataFromLocation();
   }
@@ -2212,7 +2221,15 @@
             {telegramLoginUnavailableMessage}
             {privacyPolicyUrl}
             {userAgreementUrl}
+            {currentLang}
+            {currentLanguageOption}
+            {languageOptions}
+            {languageMenuOpen}
+            {languageClickGuard}
+            {languageClickGuardArmed}
             {t}
+            {setLanguageMenuOpen}
+            updateLoginLanguage={updateGuestLanguage}
             requestEmailCode={() => authStore.requestEmailCode((s) => (screen = s))}
             loginWithEmailPassword={authStore.loginWithEmailPassword}
             verifyEmailCode={authStore.verifyEmailCode}
diff --git a/frontend/src/styles/webapp.css b/frontend/src/styles/webapp.css
index 43707fa..ec2bae6 100644
--- a/frontend/src/styles/webapp.css
+++ b/frontend/src/styles/webapp.css
@@ -2378,6 +2378,50 @@ a {
   color: var(--accent);
 }
 
+.auth-language-trigger {
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  min-height: 26px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.auth-language-trigger:hover,
+.auth-language-trigger[data-state="open"] {
+  color: var(--accent);
+}
+
+.auth-language-trigger:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 42%, transparent);
+}
+
+.auth-language-trigger > span:last-of-type {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.auth-language-trigger > svg,
+.auth-language-trigger > .emoji-flag {
+  flex: 0 0 auto;
+}
+
+.auth-language-content {
+  width: min(188px, calc(100vw - 40px));
+  min-width: 154px;
+  transform-origin: top center;
+}
+
 .auth-bottom strong {
   color: var(--accent);
 }
diff --git a/frontend/src/webapp/auth/AuthScreen.svelte b/frontend/src/webapp/auth/AuthScreen.svelte
index a90981a..1c711b3 100644
--- a/frontend/src/webapp/auth/AuthScreen.svelte
+++ b/frontend/src/webapp/auth/AuthScreen.svelte
@@ -1,6 +1,14 @@
 <script>
-  import { LockKeyhole, Mail, Send, TriangleAlert } from "$components/ui/icons.js";
-  import { Tooltip } from "$components/ui/primitives.js";
+  import {
+    Check,
+    ChevronsUpDown,
+    Globe2,
+    LockKeyhole,
+    Mail,
+    Send,
+    TriangleAlert,
+  } from "$components/ui/icons.js";
+  import { Select, Tooltip } from "$components/ui/primitives.js";
 
   import Button from "$components/ui/button.svelte";
   import BrandMark from "$lib/webapp/BrandMark.svelte";
@@ -32,7 +40,15 @@
   export let telegramLoginUnavailableMessage;
   export let privacyPolicyUrl;
   export let userAgreementUrl;
+  export let currentLang = "ru";
+  export let currentLanguageOption = null;
+  export let languageOptions = [];
+  export let languageMenuOpen = false;
+  export let languageClickGuard = false;
+  export let languageClickGuardArmed = false;
   export let t;
+  export let setLanguageMenuOpen = () => {};
+  export let updateLoginLanguage = () => {};
   export let requestEmailCode;
   export let loginWithEmailPassword;
   export let verifyEmailCode;
@@ -48,6 +64,13 @@
   $: emailAuthEnabled = CFG.emailAuthEnabled !== false;
   $: passwordModeActive = Boolean(passwordLoginMode && emailAuthEnabled);
   $: authCardHeight = authPanelHeight ? `${authPanelHeight}px` : undefined;
+  $: showLanguageSelect = languageOptions.length > 1;
+
+  function closeLanguageFromGuard(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (languageClickGuardArmed) setLanguageMenuOpen(false);
+  }
 </script>
 
 {#if screen === "code"}
@@ -236,40 +259,93 @@
           </div>
         {/key}
       </section>
-      {#if userAgreementUrl || privacyPolicyUrl}
+      {#if userAgreementUrl || privacyPolicyUrl || showLanguageSelect}
         <div class="auth-legal">
-          <span class="auth-legal-intro">{t("wa_auth_legal_intro")}</span>
-          <div class="auth-legal-links">
-            {#if privacyPolicyUrl}
-              <a
-                href={privacyPolicyUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                onclick={(e) => {
-                  e.preventDefault();
-                  openExternalLink(privacyPolicyUrl);
-                }}
+          {#if userAgreementUrl || privacyPolicyUrl}
+            <span class="auth-legal-intro">{t("wa_auth_legal_intro")}</span>
+            <div class="auth-legal-links">
+              {#if privacyPolicyUrl}
+                <a
+                  href={privacyPolicyUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onclick={(e) => {
+                    e.preventDefault();
+                    openExternalLink(privacyPolicyUrl);
+                  }}
+                >
+                  {t("wa_auth_legal_privacy")}
+                </a>
+              {/if}
+              {#if privacyPolicyUrl && userAgreementUrl}
+                <span>{t("wa_auth_legal_and")}</span>
+              {/if}
+              {#if userAgreementUrl}
+                <a
+                  href={userAgreementUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onclick={(e) => {
+                    e.preventDefault();
+                    openExternalLink(userAgreementUrl);
+                  }}
+                >
+                  {t("wa_auth_legal_agreement")}
+                </a>
+              {/if}
+            </div>
+          {/if}
+          {#if showLanguageSelect}
+            {#if languageMenuOpen || languageClickGuard}
+              <button
+                class="language-select-guard"
+                class:language-select-guard--armed={languageClickGuardArmed}
+                type="button"
+                aria-label={t("wa_close")}
+                onpointerdown={closeLanguageFromGuard}
+                onclick={closeLanguageFromGuard}
+              ></button>
+            {/if}
+            <Select.Root
+              type="single"
+              bind:open={languageMenuOpen}
+              value={currentLang}
+              items={languageOptions}
+              onOpenChange={setLanguageMenuOpen}
+              onValueChange={updateLoginLanguage}
+            >
+              <Select.Trigger class="auth-language-trigger" aria-label={t("wa_settings_language")}>
+                <Globe2 size={13} />
+                <span class="emoji-flag" aria-hidden="true"
+                  >{currentLanguageOption?.flag || "🏳️"}</span
+                >
+                <span>{currentLanguageOption?.label || currentLang}</span>
+                <ChevronsUpDown size={12} />
+              </Select.Trigger>
+              <Select.Content
+                class="language-select-content auth-language-content"
+                side="bottom"
+                align="center"
+                sideOffset={7}
               >
-                {t("wa_auth_legal_privacy")}
-              </a>
-            {/if}
-            {#if privacyPolicyUrl && userAgreementUrl}
-              <span>{t("wa_auth_legal_and")}</span>
-            {/if}
-            {#if userAgreementUrl}
-              <a
-                href={userAgreementUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                onclick={(e) => {
-                  e.preventDefault();
-                  openExternalLink(userAgreementUrl);
-                }}
-              >
-                {t("wa_auth_legal_agreement")}
-              </a>
-            {/if}
-          </div>
+                <Select.Viewport class="language-select-viewport">
+                  {#each languageOptions as option (option.value)}
+                    <Select.Item
+                      value={option.value}
+                      label={option.label}
+                      class="language-select-item"
+                    >
+                      <span class="language-select-item-main">
+                        <span class="emoji-flag" aria-hidden="true">{option.flag}</span>
+                        <span>{option.label}</span>
+                      </span>
+                      <Check size={15} class="language-select-item-check" />
+                    </Select.Item>
+                  {/each}
+                </Select.Viewport>
+              </Select.Content>
+            </Select.Root>
+          {/if}
         </div>
       {/if}
     </div>