From ed5fc86e39112d1abcbace226b4fd883ca9b2fdd Mon Sep 17 00:00:00 2001
From: jonny <coorhook@gmail.com>
Date: Mon, 23 Mar 2026 11:29:49 +0800
Subject: [PATCH] Replace language select with toggle menu

Replace the old <select> language picker with a custom toggle button and dropdown menu. Updates include new popup HTML (langToggle button, langMenu with menuitemradio buttons), new CSS for .lang-toggle/.lang-menu/.lang-menu-item (styling, hover/active states, shadow, rounded corners), and JS to manage label sync, menu state, click handlers, outside-click and Escape to close, and applying the selected UI language. Also update references in i18n code (setTitle target and language init flow) and persist language selection. Bump manifest version from 2026.03.24 to 2026.03.25.
---
 README.md     |  1 +
 css/main.css  | 72 +++++++++++++++++++++++++++++++++++++++++++++----
 js/i18n.js    | 75 +++++++++++++++++++++++++++++++++++++++++++--------
 manifest.json |  2 +-
 popup.html    | 23 +++++++++++-----
 5 files changed, 149 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 7297442..0b6297f 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@ Chrome 应用商店：<https://chrome.google.com/webstore/detail/memos-bber/cbhj
 一个通过浏览器插件发布 [Memos](https://usememos.com/) 的插件。基于 iSpeak-bber 修改，原作者为 [DreamyTZK](https://www.antmoe.com/)。
 
 ## 更新日志
+- 20260325 优化语言按钮样式
 - 20260323 优化中文显示效果
 - 20260322 适配移动端竖屏窗口
 - 20260310 记忆拖拽窗口大小,移除拖拽窗口动画
diff --git a/css/main.css b/css/main.css
index 7ab13f7..2ed8bcb 100644
--- a/css/main.css
+++ b/css/main.css
@@ -322,17 +322,79 @@ input.inputer{border-bottom: 1px solid #ccc;width:75%;}
     top: .55rem;
 }
 
-.lang-select{
-    border: 1px solid rgb(229,231,235);
-    border-radius: .25rem;
-    background-color: rgb(255,255,255);
+.lang-toggle{
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
     color: #666;
+    min-width: 24px;
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 0;
+    opacity: .6;
+}
+
+.lang-toggle:hover,
+.lang-toggle[aria-expanded="true"]{
+    background-color: transparent;
+    color: #666;
+    opacity: 1;
+}
+
+.lang-toggle-text{
+    display: inline-block;
+    min-width: 24px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 24px;
+    font-weight: 700;
+    letter-spacing: .02em;
+}
+
+.lang-menu{
+    position: absolute;
+    top: calc(100% + .35rem);
+    right: 0;
+    min-width: 8rem;
+    padding: .25rem;
+    border: 1px solid rgb(229,231,235);
+    border-radius: .5rem;
+    background-color: rgb(255,255,255);
+    box-shadow: 0 8px 24px rgba(15,23,42,.12);
+    z-index: 10;
+}
+
+.lang-menu.hidden{
+    display: none;
+}
+
+.lang-menu-item{
+    width: 100%;
+    display: block;
+    text-align: left;
+    padding: .4rem .5rem;
+    border-radius: .35rem;
+    background: transparent;
+    color: #555;
     font-size: .75rem;
     line-height: 1.25rem;
-    padding: .15rem .35rem;
     cursor: pointer;
 }
 
+.lang-menu-item:hover{
+    background-color: rgb(243,244,246);
+}
+
+.lang-menu-item.active{
+    background-color: rgb(220,252,231);
+    color: rgb(22,101,52);
+    font-weight: 600;
+}
+
 
 .tip{
     margin-left: 36%;
diff --git a/js/i18n.js b/js/i18n.js
index 11648ad..ade00f3 100644
--- a/js/i18n.js
+++ b/js/i18n.js
@@ -47,6 +47,36 @@ function formatSubstitutions(message, substitutions) {
 let currentUiLanguage = 'auto'
 let overrideMessages = null
 
+function getLanguageToggleLabel(lang) {
+	if (lang === 'en') return 'EN'
+	if (lang === 'zh_CN') return '中'
+	if (lang === 'ja') return '日'
+	if (lang === 'ko') return '한'
+	return 'A'
+}
+
+function syncLanguageToggleText(lang) {
+	const text = document.getElementById('langToggleText')
+	if (text) text.textContent = getLanguageToggleLabel(lang)
+}
+
+function syncLanguageMenuState(lang) {
+	const items = document.querySelectorAll('.lang-menu-item')
+	items.forEach((item) => {
+		const isActive = item.getAttribute('data-lang') === lang
+		item.classList.toggle('active', isActive)
+		item.setAttribute('aria-checked', isActive ? 'true' : 'false')
+	})
+}
+
+function setLanguageMenuOpen(isOpen) {
+	const toggle = document.getElementById('langToggle')
+	const menu = document.getElementById('langMenu')
+	if (!toggle || !menu) return
+	toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false')
+	menu.classList.toggle('hidden', !isOpen)
+}
+
 function t(key, substitutions) {
 	const msg = overrideMessages && overrideMessages[key] && overrideMessages[key].message
 	if (typeof msg === 'string' && msg.length > 0) {
@@ -100,7 +130,9 @@ function applyStaticI18n() {
 	setText('langOptionZhCN', 'langChineseSimplified')
 	setText('langOptionJa', 'langJapanese')
 	setText('langOptionKo', 'langKorean')
-	setTitle('langSelect', 'tipLanguage')
+	setTitle('langToggle', 'tipLanguage')
+	const langToggle = document.getElementById('langToggle')
+	if (langToggle) langToggle.setAttribute('aria-label', t('tipLanguage'))
 
 	// Native hover tooltips (title)
 	setTitle('opensite', 'tipOpenSite')
@@ -122,26 +154,47 @@ async function setUiLanguage(nextLang, { persist = true } = {}) {
 	currentUiLanguage = lang
 	overrideMessages = await loadLocaleMessages(lang)
 	applyStaticI18n()
-
-	const select = document.getElementById('langSelect')
-	if (select && select.value !== lang) select.value = lang
+	syncLanguageToggleText(lang)
+	syncLanguageMenuState(lang)
 
 	if (persist) await storageSyncSet({ [UI_LANGUAGE_STORAGE_KEY]: lang })
 	window.dispatchEvent(new CustomEvent('i18n:changed', { detail: { lang } }))
 }
 
 async function initLanguageSwitcher() {
-	const select = document.getElementById('langSelect')
-	if (select) {
-		select.addEventListener('change', async () => {
-			await setUiLanguage(select.value)
+	const switcher = document.getElementById('lang_switcher')
+	const toggle = document.getElementById('langToggle')
+	const langItems = document.querySelectorAll('.lang-menu-item')
+
+	if (toggle) {
+		toggle.addEventListener('click', (event) => {
+			event.stopPropagation()
+			const isOpen = toggle.getAttribute('aria-expanded') === 'true'
+			setLanguageMenuOpen(!isOpen)
 		})
 	}
 
-	const items = await storageSyncGet({ [UI_LANGUAGE_STORAGE_KEY]: 'auto' })
-	const stored = normalizeUiLanguage(items[UI_LANGUAGE_STORAGE_KEY])
-	if (select) select.value = stored
+	langItems.forEach((item) => {
+		item.addEventListener('click', async (event) => {
+			event.stopPropagation()
+			setLanguageMenuOpen(false)
+			await setUiLanguage(item.getAttribute('data-lang'))
+		})
+	})
+
+	document.addEventListener('click', (event) => {
+		if (!switcher || switcher.contains(event.target)) return
+		setLanguageMenuOpen(false)
+	})
+
+	document.addEventListener('keydown', (event) => {
+		if (event.key === 'Escape') setLanguageMenuOpen(false)
+	})
+
+	const storedItems = await storageSyncGet({ [UI_LANGUAGE_STORAGE_KEY]: 'auto' })
+	const stored = normalizeUiLanguage(storedItems[UI_LANGUAGE_STORAGE_KEY])
 	await setUiLanguage(stored, { persist: false })
+	setLanguageMenuOpen(false)
 }
 
 window.t = t
diff --git a/manifest.json b/manifest.json
index f6d68e1..d8f3ec0 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
    "manifest_version": 3,
    "name": "__MSG_extName__",
    "default_locale": "en",
-   "version": "2026.03.24",
+   "version": "2026.03.25",
    "version_name": "Supports 0.15.0 - 0.26.x",
    "action": {
       "default_popup": "popup.html",
diff --git a/popup.html b/popup.html
index b529bf0..c4bc72c 100644
--- a/popup.html
+++ b/popup.html
@@ -13,13 +13,22 @@
   <body class="body">
     <div class="title" id="opensite">MEMOS</div>
     <div id="lang_switcher" class="lang-switcher">
-      <select id="langSelect" class="lang-select" aria-label="Language" title="">
-        <option id="langOptionAuto" value="auto"></option>
-        <option id="langOptionEn" value="en"></option>
-        <option id="langOptionZhCN" value="zh_CN"></option>
-        <option id="langOptionJa" value="ja"></option>
-        <option id="langOptionKo" value="ko"></option>
-      </select>
+      <button
+        id="langToggle"
+        class="lang-toggle"
+        type="button"
+        aria-haspopup="true"
+        aria-expanded="false"
+      >
+        <span id="langToggleText" class="lang-toggle-text" aria-hidden="true">A</span>
+      </button>
+      <div id="langMenu" class="lang-menu hidden" role="menu" aria-labelledby="langToggle">
+        <button id="langOptionAuto" class="lang-menu-item" type="button" data-lang="auto" role="menuitemradio" aria-checked="false"></button>
+        <button id="langOptionEn" class="lang-menu-item" type="button" data-lang="en" role="menuitemradio" aria-checked="false"></button>
+        <button id="langOptionZhCN" class="lang-menu-item" type="button" data-lang="zh_CN" role="menuitemradio" aria-checked="false"></button>
+        <button id="langOptionJa" class="lang-menu-item" type="button" data-lang="ja" role="menuitemradio" aria-checked="false"></button>
+        <button id="langOptionKo" class="lang-menu-item" type="button" data-lang="ko" role="menuitemradio" aria-checked="false"></button>
+      </div>
     </div>
     <div id="blog_info_edit"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024">
       <path d="M914 432c-5-26-21-43-41-43h-4c-54 0-99-44-99-99 0-17 9-37 9-38 10-22 2-50-18-65l-103-57h-1c-21-9-49-4-64 12-12 12-50 44-79 44s-68-33-79-45a60 60 0 0 0-64-13l-106 58-2 1a54 54 0 0 0-18 65c0 1 9 21 9 38 0 55-45 99-99 99h-5c-19 0-35 17-40 43 0 2-9 45-9 80s9 79 9 81c5 25 21 42 41 42h4c54 0 99 45 99 99 0 18-9 37-9 38-10 23-2 51 18 65l101 56 1 1c21 9 49 3 65-13 14-15 52-47 80-47 30 0 69 35 81 48a58 58 0 0 0 64 14l104-58 2-1c20-14 28-42 18-65 0-1-9-20-9-38 0-54 45-99 99-99h5c19 0 35-17 40-42 0-2 9-46 9-81s-9-78-9-80m-51 80c0 23-5 52-7 64a158 158 0 0 0-134 215l-89 49c-4-5-17-18-35-31-31-23-61-35-88-35s-57 12-88 34c-17 13-30 26-34 31l-86-48a159 159 0 0 0-134-215c-2-12-7-41-7-64 0-22 5-51 7-64a157 157 0 0 0 134-214l91-50c4 4 17 17 35 29 30 22 59 33 86 33s55-11 85-32c18-13 31-25 35-29l88 49a159 159 0 0 0 134 214c2 13 7 42 7 64"/>