From 3bcbaf6d29990a40176d3ea9609196fb28a5ba74 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Fri, 20 Jun 2025 14:18:01 +0300
Subject: [PATCH] Replace language select dropdown with modal dialog

---
 app/assets/javascripts/language_selector.js   | 10 +++++---
 app/assets/stylesheets/common.scss            |  7 ------
 app/views/layouts/_header.html.erb            | 24 +++++++++++++++++--
 .../_select_language_button.html.erb}         | 11 ++-------
 .../layouts/_select_language_list.html.erb    | 12 ++++++++++
 config/locales/en.yml                         |  4 ++++
 test/system/site_test.rb                      | 12 +---------
 7 files changed, 48 insertions(+), 32 deletions(-)
 rename app/views/{shared/_language_selector.html.erb => layouts/_select_language_button.html.erb} (52%)
 create mode 100644 app/views/layouts/_select_language_list.html.erb

diff --git a/app/assets/javascripts/language_selector.js b/app/assets/javascripts/language_selector.js
index eac58e403..83525a54d 100644
--- a/app/assets/javascripts/language_selector.js
+++ b/app/assets/javascripts/language_selector.js
@@ -1,4 +1,8 @@
-$(document).on("change", ".language-change-trigger", function () {
-  Cookies.set("_osm_locale", this.value, { secure: true, path: "/", samesite: "lax" });
-  document.location.reload();
+$(document).on("click", "#select_language_dialog [data-language-code]", function (e) {
+  e.preventDefault();
+
+  const code = $(this).data("language-code");
+
+  Cookies.set("_osm_locale", code, { secure: true, path: "/", samesite: "lax" });
+  location.reload();
 });
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 15482b274..f023e0459 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -22,13 +22,6 @@ time[title] {
   color: $blue;
 }
 
-/* Utility for transparent color */
-
-.text-transparent {
-  color: transparent !important;
-  user-select: none;
-}
-
 /* Bootstrap contextual table classes overrides in dark mode */
 
 @include color-mode(dark) {
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 2713ebd25..2a1d09295 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -69,10 +69,14 @@
       <li class="nav-item ps-1 not-collapsible">
         <% if current_user && current_user.id %>
           <%= link_to(basic_preferences_path, :class => "nav-link text-secondary") do %>
-            <%= render "shared/language_selector", :classes => "", :disabled => true %>
+            <%= render "layouts/select_language_button" %>
           <% end %>
         <% else %>
-          <%= render "shared/language_selector", :classes => "nav-link text-secondary", :disabled => false %>
+          <%= tag.button :type => "button",
+                         :class => "btn btn-link p-0 text-secondary",
+                         :data => { :bs_toggle => "modal", :bs_target => "#select_language_dialog" } do %>
+            <%= render "layouts/select_language_button" %>
+          <% end %>
         <% end %>
       </li>
     </ul>
@@ -111,3 +115,19 @@
     <% end %>
   </nav>
 </header>
+
+<% unless current_user&.id %>
+<div class="modal fade" id="select_language_dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="select_language_dialog_label" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" id="select_language_dialog_label"><%= t ".select_language" %></h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<%= t "javascripts.close" %>"></button>
+      </div>
+      <div class="modal-body px-1">
+        <%= render "layouts/select_language_list" %>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
diff --git a/app/views/shared/_language_selector.html.erb b/app/views/layouts/_select_language_button.html.erb
similarity index 52%
rename from app/views/shared/_language_selector.html.erb
rename to app/views/layouts/_select_language_button.html.erb
index 9b64c7598..f88933c03 100644
--- a/app/views/shared/_language_selector.html.erb
+++ b/app/views/layouts/_select_language_button.html.erb
@@ -1,11 +1,4 @@
-<label class="position-relative d-flex <%= classes %>" role="button">
-  <svg width="20" height="20" fill="currentColor">
+  <svg width="20" height="20" fill="currentColor" class="d-block">
+    <title><%= t ".title" %></title>
     <path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z" />
   </svg>
-  <% unless disabled %>
-    <%= select_tag "language",
-                   options_for_select(AVAILABLE_LANGUAGES.map { |e| [e[:native_name], e[:code], { :class => "form-select" }] }, I18n.locale),
-                   :role => "button",
-                   :class => "p-0 position-absolute top-0 start-0 w-100 h-100 language-change-trigger text-transparent bg-transparent #{classes}" %>
-  <% end %>
-</label>
diff --git a/app/views/layouts/_select_language_list.html.erb b/app/views/layouts/_select_language_list.html.erb
new file mode 100644
index 000000000..3678269ad
--- /dev/null
+++ b/app/views/layouts/_select_language_list.html.erb
@@ -0,0 +1,12 @@
+<ul class="select_language_list list-unstyled column-gap-0">
+  <% AVAILABLE_LANGUAGES.each do |language| %>
+    <li>
+      <%= link_to({ :locale => language[:code] },
+                  { :class => "btn btn-link text-start",
+                    :data => { :bs_dismiss => "modal",
+                               :language_code => language[:code] } }) do %>
+        <%= language[:native_name] %>
+      <% end %>
+    </li>
+  <% end %>
+</ul>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 025740752..b082df236 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1721,6 +1721,10 @@ en:
     communities: Communities
     learn_more: "Learn More"
     more: More
+    header:
+      select_language: Select Language
+    select_language_button:
+      title: Select Language
     offline_flash:
       osm_offline: "The OpenStreetMap database is currently offline while essential maintenance work is carried out."
       osm_read_only: "The OpenStreetMap database is currently in read-only mode while essential maintenance work is carried out."
diff --git a/test/system/site_test.rb b/test/system/site_test.rb
index 09e14440a..54dcf744f 100644
--- a/test/system/site_test.rb
+++ b/test/system/site_test.rb
@@ -93,17 +93,7 @@ class SiteTest < ApplicationSystemTestCase
 
   test "language selector should exist when logged out" do
     visit "/"
-    assert_selector ".language-change-trigger", :visible => "all"
-    AVAILABLE_LANGUAGES.each do |locale|
-      assert_selector "option[value='#{locale[:code]}']", :visible => "all"
-    end
-  end
-
-  test "language selector should not exist when logged in" do
-    sign_in_as(create(:user))
-
-    visit "/"
-    assert_no_selector ".language-change-trigger", :visible => "all"
+    assert_button "Select Language"
   end
 
   private
-- 
2.39.5