Use custom flag language picker

public/admin.css

@@ -247,22 +247,86 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   position: relative;
   display: block;
 }
-.language-select select {
+.native-language-select {
-  padding-left: 42px;
-}
-.selected-language-flag {
   position: absolute;
-  z-index: 1;
+  width: 1px;
-  left: 12px;
+  height: 1px;
-  top: 50%;
+  opacity: 0;
-  width: 18px;
-  height: 13px;
-  transform: translateY(-50%);
-  line-height: 1;
   pointer-events: none;
 }
-.selected-language-flag .flag-image {
+.language-picker {
-  display: block;
+  position: relative;
+  width: 100%;
+  height: 38px;
+  padding: 0 30px 0 11px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: white;
+  color: var(--ink);
+  font-size: 13px;
+  text-align: left;
+}
+.language-picker::after {
+  content: "";
+  position: absolute;
+  right: 11px;
+  top: 50%;
+  width: 7px;
+  height: 7px;
+  border-right: 1px solid var(--muted);
+  border-bottom: 1px solid var(--muted);
+  transform: translateY(-50%);
+  rotate: 45deg;
+}
+.language-picker span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.language-menu {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 5px);
+  left: 0;
+  right: 0;
+  max-height: 230px;
+  overflow: auto;
+  padding: 5px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: white;
+  box-shadow: 0 14px 30px rgb(23 33 29 / 14%);
+}
+.language-option {
+  width: 100%;
+  min-height: 32px;
+  padding: 6px 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ink);
+  font-size: 13px;
+  text-align: left;
+}
+.language-option:hover,
+.language-option.active {
+  background: #eaf6f1;
+  color: var(--brand);
+}
+.language-option span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.language-picker .flag-image,
+.language-option .flag-image {
+  flex: 0 0 auto;
 }
 .effect-settings .full-row {
   display: grid;

public/admin.html

@@ -124,8 +124,9 @@
                 </label>
                 <label>Default
                   <span class="language-select">
-                    <span id="defaultLanguageFlag" class="selected-language-flag" aria-hidden="true"></span>
+                    <select name="defaultLanguage" class="native-language-select" tabindex="-1" aria-hidden="true"></select>
-                    <select name="defaultLanguage"></select>
+                    <button id="defaultLanguagePicker" class="language-picker" type="button" aria-haspopup="listbox" aria-expanded="false"></button>
+                    <span id="defaultLanguageMenu" class="language-menu hidden" role="listbox"></span>
                   </span>
                 </label>
                 <small>Auto pouzije jazyk ze stranky. Default je vychozi jazyk i zaloha.</small>

public/admin.js

@@ -114,9 +114,26 @@ $("#settingsForm").brandHex.addEventListener("input", (event) => {
   if (color) $("#settingsForm").brand.value = color;
 });
 $("#settingsForm").defaultLanguage.addEventListener("change", () => {
-  updateDefaultLanguageFlag();
+  updateDefaultLanguagePicker();
   renderWidgetCopyFields($("#settingsForm").defaultLanguage.value);
 });
+$("#defaultLanguagePicker").addEventListener("click", (event) => {
+  event.stopPropagation();
+  toggleDefaultLanguageMenu();
+});
+$("#defaultLanguageMenu").addEventListener("click", (event) => {
+  const option = event.target.closest("[data-language-option]");
+  if (!option) return;
+  $("#settingsForm").defaultLanguage.value = option.dataset.languageOption;
+  $("#settingsForm").defaultLanguage.dispatchEvent(new Event("change", { bubbles: true }));
+  closeDefaultLanguageMenu();
+});
+document.addEventListener("click", (event) => {
+  if (!event.target.closest(".language-select")) closeDefaultLanguageMenu();
+});
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") closeDefaultLanguageMenu();
+});
 
 window.addEventListener("focus", syncAttentionWithUnread);
 document.addEventListener("visibilitychange", () => {
@@ -464,14 +481,12 @@ function renderWidgetLanguageOptions(form, settings) {
     .map(([code, label]) => `<option value="${code}">${code.toUpperCase()} - ${escapeHtml(label)}</option>`)
     .join("");
   form.defaultLanguage.innerHTML = options;
+  $("#defaultLanguageMenu").innerHTML = WIDGET_LANGUAGES
+    .map(([code, label]) => languageOptionHtml(code, label))
+    .join("");
   form.widgetLanguageMode.value = language.mode === "fixed" ? "default" : language.mode || "auto";
   form.defaultLanguage.value = language.defaultLanguage || "cs";
-  updateDefaultLanguageFlag();
+  updateDefaultLanguagePicker();
-}
-
-function languageFlag(language) {
-  const countryCode = languageCountryCode(language);
-  return countryCode ? flagEmoji(countryCode) : "";
 }
 
 function languageCountryCode(language) {
@@ -484,20 +499,51 @@ function languageCountryCode(language) {
   return countries[language] || "";
 }
 
-function flagEmoji(countryCode) {
+function flagImageHtml(countryCode) {
   const code = String(countryCode || "").toUpperCase();
-  if (!/^[A-Z]{2}$/.test(code)) return "";
+  if (!/^[A-Z]{2}$/.test(code)) return `<span class="flag-image">?</span>`;
-  return [...code].map((letter) => String.fromCodePoint(127397 + letter.charCodeAt(0))).join("");
+  return `<span class="flag-image" style="background-image:url('https://flagcdn.com/24x18/${code.toLowerCase()}.png')" aria-hidden="true"></span>`;
 }
 
-function updateDefaultLanguageFlag() {
+function languageOptionHtml(language, label) {
-  const flag = $("#defaultLanguageFlag");
+  const countryCode = languageCountryCode(language);
+  return `
+    <button class="language-option" type="button" role="option" data-language-option="${language}">
+      ${flagImageHtml(countryCode)}
+      <span>${language.toUpperCase()} - ${escapeHtml(label)}</span>
+    </button>
+  `;
+}
+
+function updateDefaultLanguagePicker() {
+  const picker = $("#defaultLanguagePicker");
+  const menu = $("#defaultLanguageMenu");
   const select = $("#settingsForm")?.defaultLanguage;
-  if (!flag || !select) return;
+  if (!picker || !select) return;
-  const countryCode = languageCountryCode(select.value || "cs");
+  const language = select.value || "cs";
-  flag.innerHTML = countryCode
+  const item = WIDGET_LANGUAGES.find(([code]) => code === language) || WIDGET_LANGUAGES[0];
-    ? `<span class="flag-image" style="background-image:url('https://flagcdn.com/24x18/${countryCode.toLowerCase()}.png')" aria-hidden="true"></span>`
+  picker.innerHTML = `${flagImageHtml(languageCountryCode(language))}<span>${item[0].toUpperCase()} - ${escapeHtml(item[1])}</span>`;
-    : "";
+  if (menu) {
+    menu.querySelectorAll("[data-language-option]").forEach((option) => {
+      option.classList.toggle("active", option.dataset.languageOption === language);
+    });
+  }
+}
+
+function toggleDefaultLanguageMenu() {
+  const menu = $("#defaultLanguageMenu");
+  const picker = $("#defaultLanguagePicker");
+  const isOpen = menu && !menu.classList.contains("hidden");
+  if (isOpen) closeDefaultLanguageMenu();
+  else {
+    menu?.classList.remove("hidden");
+    picker?.setAttribute("aria-expanded", "true");
+  }
+}
+
+function closeDefaultLanguageMenu() {
+  $("#defaultLanguageMenu")?.classList.add("hidden");
+  $("#defaultLanguagePicker")?.setAttribute("aria-expanded", "false");
 }
 
 function renderWidgetCopyFields(language) {