From 02269417a9ecf4ca56dad4ad2cfb1c101853ba25 Mon Sep 17 00:00:00 2001
From: Zichao Lin <earthjasonlin@163.com>
Date: Tue, 7 Jul 2026 09:54:57 +0800
Subject: [PATCH] feat(ui): replace language dropdown with globe icon and
 expandable menu

---
 app/static/style.css    | 12 +++++++++---
 app/templates/base.html | 22 +++++++++++++++++-----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/app/static/style.css b/app/static/style.css
index 68c7ca9..5082f1b 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -30,9 +30,15 @@ a:hover { text-decoration: underline; }
 .nav-logout { color: var(--danger) !important; }
 .nav-lang-btn { background: none; border: 1px solid var(--border); border-radius: 4px; padding: .15rem .45rem; font-size: .72rem; color: var(--text-muted); cursor: pointer; line-height: 1; }
 .nav-lang-btn:hover { background: var(--bg); color: var(--primary); }
-.nav-lang-select { background: none; border: 1px solid var(--border); border-radius: 4px; padding: .15rem .3rem; font-size: .72rem; color: var(--text-muted); cursor: pointer; line-height: 1; outline: none; }
-.nav-lang-select:hover { background: var(--bg); color: var(--primary); }
-.nav-lang-select option { background: var(--card-bg); color: var(--text); }
+.lang-switcher { position: relative; }
+.lang-globe { background: none; border: none; cursor: pointer; font-size: 1rem; padding: .1rem .2rem; line-height: 1; border-radius: 4px; }
+.lang-globe:hover { background: var(--bg); }
+.lang-dropdown { display: none; position: absolute; right: 0; top: 100%; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12); z-index: 100; min-width: 100px; padding: .25rem 0; }
+.lang-dropdown.show { display: block; }
+.lang-dropdown form { margin: 0; }
+.lang-option { display: block; width: 100%; padding: .35rem .75rem; border: none; background: none; text-align: left; font-size: .8rem; color: var(--text); cursor: pointer; white-space: nowrap; }
+.lang-option:hover { background: var(--bg); color: var(--primary); }
+.lang-option.active { color: var(--primary); font-weight: 600; }
 
 /* Container */
 .container { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }
diff --git a/app/templates/base.html b/app/templates/base.html
index 4679bd6..26af45c 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -18,13 +18,17 @@
             <a href="/admin/invites">{{ 'nav.invites'|t(user.language) }}</a>
             {% endif %}
             <a href="/api/docs">{{ 'nav.api_docs'|t(user.language) }}</a>
-            <form method="post" action="/settings/language" class="inline" style="display:inline-flex;align-items:center;gap:0">
-                <select name="language" class="nav-lang-select" onchange="this.form.submit()">
+            <div class="lang-switcher" id="langSwitcher">
+                <button type="button" class="lang-globe" onclick="document.getElementById('langDropdown').classList.toggle('show')">🌐</button>
+                <div class="lang-dropdown" id="langDropdown">
                     {% for code, name in available_languages.items() %}
-                    <option value="{{ code }}" {% if user.language == code %}selected{% endif %}>{{ name }}</option>
+                    <form method="post" action="/settings/language">
+                        <input type="hidden" name="language" value="{{ code }}">
+                        <button type="submit" class="lang-option {% if user.language == code %}active{% endif %}">{{ name }}</button>
+                    </form>
                     {% endfor %}
-                </select>
-            </form>
+                </div>
+            </div>
             <a href="/logout" class="nav-logout">{{ 'nav.logout'|t(user.language) }}</a>
             {% endif %}
         </div>
@@ -41,5 +45,13 @@ document.addEventListener('submit', function(e) {
         el.value = el.value.trim();
     });
 }, true);
+// Close language dropdown when clicking outside
+document.addEventListener('click', function(e) {
+    var sw = document.getElementById('langSwitcher');
+    var dd = document.getElementById('langDropdown');
+    if (sw && dd && !sw.contains(e.target)) {
+        dd.classList.remove('show');
+    }
+});
 </script>
 </html>