ui: switch language toggle to single button

Author: meintechblog

CHANGELOG.md

@@ -6,6 +6,12 @@ All notable changes to this project will be documented in this file.
 
 - Pending
 
+## [2.1.10] - 2026-02-10
+
+### Changed
+
+- Language switch is now a single DE/EN toggle button in the top-right corner.
+
 ## [2.1.9] - 2026-02-10
 
 ### Added

app/main.py

@@ -1725,7 +1725,7 @@ def compile_runner_cfg(state: AppState, runner_id: str, broker: EventBroker) ->
 notifier = NotificationWorker(broker, store)
 rm = RunnerManager(broker, notifier)
 
-app = FastAPI(title="command-runner", version="2.1.9")
+app = FastAPI(title="command-runner", version="2.1.10")
 templates = Jinja2Templates(directory=str(BASE_DIR / "templates"))
 app.mount("/static", StaticFiles(directory=str(BASE_DIR / "static")), name="static")
 

static/app.js

@@ -82,8 +82,8 @@ const I18N = {
     no_changes: "Keine Änderungen",
     open_info_title: "Öffnet die Programm-Info",
     lang_switch_aria: "Sprache",
-    lang_de_title: "Deutsch",
-    lang_en_title: "English",
+    lang_toggle_title_to_en: "Zu Englisch wechseln",
+    lang_toggle_title_to_de: "Zu Deutsch wechseln",
     notify_services_title: "Notification services",
     runners_title: "Runners",
     add_service: "+ Dienst",
@@ -243,8 +243,8 @@ const I18N = {
     no_changes: "No changes",
     open_info_title: "Open program info",
     lang_switch_aria: "Language",
-    lang_de_title: "German",
-    lang_en_title: "English",
+    lang_toggle_title_to_en: "Switch to English",
+    lang_toggle_title_to_de: "Switch to German",
     notify_services_title: "Notification services",
     runners_title: "Runners",
     add_service: "+ Service",
@@ -454,18 +454,11 @@ function applyLanguageToStaticDom() {
     infoEn.classList.toggle("hidden", !showEn);
   }
 
-  const langSwitch = el("langSwitch");
-  if (langSwitch) langSwitch.setAttribute("aria-label", t("lang_switch_aria"));
-
-  const deBtn = el("langDeBtn");
-  const enBtn = el("langEnBtn");
-  if (deBtn) {
-    deBtn.title = t("lang_de_title");
-    deBtn.classList.toggle("primary", ui.lang !== "en");
-  }
-  if (enBtn) {
-    enBtn.title = t("lang_en_title");
-    enBtn.classList.toggle("primary", ui.lang === "en");
+  const toggleBtn = el("langToggleBtn");
+  if (toggleBtn) {
+    toggleBtn.setAttribute("aria-label", t("lang_switch_aria"));
+    toggleBtn.textContent = ui.lang === "en" ? "EN" : "DE";
+    toggleBtn.title = ui.lang === "en" ? t("lang_toggle_title_to_de") : t("lang_toggle_title_to_en");
   }
 
   // Keep buttons consistent even before the first state render completes.
@@ -2412,8 +2405,9 @@ async function wireUI() {
   const closeInfoBtn = el("closeInfoBtn");
   const infoModal = el("infoModal");
 
-  el("langDeBtn")?.addEventListener("click", () => setLanguage("de"));
-  el("langEnBtn")?.addEventListener("click", () => setLanguage("en"));
+  el("langToggleBtn")?.addEventListener("click", () => {
+    setLanguage(ui.lang === "en" ? "de" : "en");
+  });
 
   openInfoTitle?.addEventListener("click", () => setInfoModalOpen(true));
   openInfoTitle?.addEventListener("keydown", (e) => {

static/style.css

@@ -21,8 +21,7 @@ h1 { font-size: 20px; margin: 0; }
 }
 #topHeader { gap: 12px; }
 .headerRight { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.langSwitch { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
-.langSwitch .btn { padding: 8px 10px; min-width: 46px; }
+.langToggle { padding: 8px 10px; min-width: 50px; font-weight: 650; }
 #flashDock {
   position: relative;
   width: clamp(240px, 40vw, 520px);

templates/index.html

@@ -11,19 +11,14 @@
       <header class="row between center" id="topHeader">
         <h1 id="openInfoTitle" class="titleInfoTrigger" role="button" tabindex="0" title="Öffnet die Programm-Info">command-runner</h1>
         <div class="headerRight">
-          <div class="row gap center wrapline">
-            <div class="langSwitch" id="langSwitch" aria-label="Sprache">
-              <button id="langDeBtn" class="btn" type="button" title="Deutsch">DE</button>
-              <button id="langEnBtn" class="btn" type="button" title="English">EN</button>
-            </div>
-            <div class="row gap center" id="runningStatus">
-              <div class="spinner hidden" id="globalSpinner"></div>
-              <span class="small" id="runningCount"></span>
-            </div>
+          <div class="row gap center" id="runningStatus">
+            <div class="spinner hidden" id="globalSpinner"></div>
+            <span class="small" id="runningCount"></span>
           </div>
           <div id="flashDock">
             <div id="uiFlash" class="flash info" aria-live="polite"></div>
           </div>
+          <button id="langToggleBtn" class="btn langToggle" type="button" aria-label="Sprache" title="DE/EN">DE</button>
         </div>
       </header>