Shrink UI controls and iconize language/edit/delete

wwwroot/app.js

@@ -45,13 +45,10 @@ function setupHandlers() {
     loginUser.addEventListener("blur", () => { delete loginUser.dataset.userEditing; });
   }
 
-  const langSelects = Array.from(document.querySelectorAll(".lang-select"));
-  const syncLanguageSelects = () => langSelects.forEach((sel) => (sel.value = getLanguage()));
-  syncLanguageSelects();
-  langSelects.forEach((sel) => sel.addEventListener("change", () => setLanguage(sel.value)));
+  setupLanguageSwitchers();
 
   onLanguageChange(() => {
-    syncLanguageSelects();
+    updateLanguageButtons();
     renderWelcome();
     renderPhasePill();
     renderCounts();
@@ -212,3 +209,47 @@ async function main() {
 }
 
 main();
+
+function languageEmoji(lang) {
+  const map = { en: "🇬🇧", de: "🇩🇪" };
+  return map[lang] || "🌐";
+}
+
+function updateLanguageButtons() {
+  document.querySelectorAll(".lang-button").forEach((btn) => {
+    btn.textContent = languageEmoji(getLanguage());
+    btn.title = t("lang.label");
+    btn.setAttribute("aria-label", t("lang.label"));
+  });
+}
+
+function setupLanguageSwitchers() {
+  const switches = document.querySelectorAll(".lang-switch");
+  const closeAll = () =>
+    switches.forEach((wrap) => wrap.querySelector(".lang-menu")?.classList.add("hidden"));
+
+  switches.forEach((wrap) => {
+    const btn = wrap.querySelector(".lang-button");
+    const menu = wrap.querySelector(".lang-menu");
+    if (!btn || !menu) return;
+    btn.addEventListener("click", (e) => {
+      e.preventDefault();
+      const isHidden = menu.classList.contains("hidden");
+      closeAll();
+      if (isHidden) menu.classList.remove("hidden");
+    });
+    menu.querySelectorAll("[data-lang]").forEach((item) =>
+      item.addEventListener("click", () => {
+        const lang = item.dataset.lang;
+        if (lang) setLanguage(lang);
+        closeAll();
+      }),
+    );
+  });
+
+  document.addEventListener("click", (e) => {
+    if (!e.target.closest(".lang-switch")) closeAll();
+  });
+
+  updateLanguageButtons();
+}