From 7e101368bfec43a37ff574508481753341f090fa Mon Sep 17 00:00:00 2001
From: Scarriffle <guidoschmit@guidoschmit.com>
Date: Fri, 27 Mar 2026 15:30:15 +0100
Subject: [PATCH] =?UTF-8?q?i18n:=20Sprache=20oben,=20data-i18n=20erg=C3=A4?=
 =?UTF-8?q?nzt,=20localStorage-Persistenz=20-=20Sprachdropdown=20an=20den?=
 =?UTF-8?q?=20Anfang=20des=20Einstellungs-Panels=20verschoben=20-=20data-i?=
 =?UTF-8?q?18n=20f=C3=BCr=20Settings-Header,=20Speichern-Button=20und=20Na?=
 =?UTF-8?q?v-Tabs=20erg=C3=A4nzt,=20=20=20damit=20diese=20beim=20Sprachwec?=
 =?UTF-8?q?hsel=20sofort=20=C3=BCbersetzt=20werden=20-=20setLang()=20speic?=
 =?UTF-8?q?hert=20gew=C3=A4hlte=20Sprache=20in=20localStorage=20(bleibt=20?=
 =?UTF-8?q?=C3=BCber=20=20=20Seitenreloads=20hinweg=20erhalten);=20current?=
 =?UTF-8?q?Lang=20wird=20beim=20Modulstart=20aus=20=20=20localStorage=20in?=
 =?UTF-8?q?itialisiert=20-=20getLang()=20in=20openSettingsModal=20statt=20?=
 =?UTF-8?q?state.settings.language,=20damit=20=20=20das=20Dropdown=20immer?=
 =?UTF-8?q?=20die=20aktive=20Sprache=20zeigt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html     | 28 ++++++++++++++--------------
 frontend/js/calendar.js |  4 ++--
 frontend/js/i18n.js     |  5 ++++-
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index ecfdd9a..43348db 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -385,14 +385,14 @@
       <button class="icon-btn modal-close" data-modal="modal-settings" style="margin-right:8px">
         <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
       </button>
-      <h3>Einstellungen</h3>
-      <button class="btn btn-primary" id="settings-save" style="margin-left:auto">Speichern</button>
+      <h3 data-i18n="settings_title">Einstellungen</h3>
+      <button class="btn btn-primary" id="settings-save" style="margin-left:auto" data-i18n="save">Speichern</button>
     </div>
     <div class="settings-page-body">
       <nav class="settings-nav">
-        <button class="settings-nav-btn active" data-panel="general">Darstellung</button>
-        <button class="settings-nav-btn" data-panel="google">Google Konten</button>
-        <button class="settings-nav-btn hidden" data-panel="users" id="settings-nav-users">Benutzerverwaltung</button>
+        <button class="settings-nav-btn active" data-panel="general" data-i18n="settings_nav_appearance">Darstellung</button>
+        <button class="settings-nav-btn" data-panel="google" data-i18n="settings_nav_google">Google Konten</button>
+        <button class="settings-nav-btn hidden" data-panel="users" id="settings-nav-users" data-i18n="settings_nav_users">Benutzerverwaltung</button>
       </nav>
 
       <div class="settings-panels">
@@ -400,7 +400,15 @@
         <!-- Einstellungen (merged: Darstellung + Ansicht & Raster + Ausgeblendete Kalender) -->
         <div class="settings-panel active" id="settings-panel-general">
 
-          <h4 class="panel-title" data-i18n="settings_colors">Farben</h4>
+          <h4 class="panel-title" data-i18n="settings_language">Sprache</h4>
+          <div class="form-group">
+            <select id="cfg-language">
+              <option value="de">Deutsch</option>
+              <option value="en">English</option>
+            </select>
+          </div>
+
+          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_colors">Farben</h4>
           <div class="form-group">
             <label data-i18n="settings_primary_color">Primärfarbe</label>
             <div class="ev-color-row">
@@ -474,14 +482,6 @@
             <button class="contrast-btn" data-val="100"><span class="hour-preview">━━━━━</span><span class="contrast-lbl" data-i18n="hour_large">Gross</span></button>
           </div>
 
-          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_language">Sprache</h4>
-          <div class="form-group">
-            <select id="cfg-language">
-              <option value="de">Deutsch</option>
-              <option value="en">English</option>
-            </select>
-          </div>
-
           <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_hidden_cals">Ausgeblendete Kalender</h4>
           <div id="hidden-cals-list"><span style="font-size:13px;color:var(--text-3)" data-i18n="settings_no_hidden_cals">Keine ausgeblendeten Kalender</span></div>
         </div>
diff --git a/frontend/js/calendar.js b/frontend/js/calendar.js
index d9ee375..0c1fe33 100644
--- a/frontend/js/calendar.js
+++ b/frontend/js/calendar.js
@@ -4,7 +4,7 @@ import { renderMonth }  from './views/month.js';
 import { renderWeek }   from './views/week.js';
 import { renderAgenda } from './views/agenda.js';
 import { openColorPicker } from './color-picker.js';
-import { t, setLang, applyLang } from './i18n.js';
+import { t, setLang, getLang } from './i18n.js';
 
 // Fetch avatar image as blob URL (with auth header)
 function fetchAvatarBlob() {
@@ -1046,7 +1046,7 @@ function openSettingsModal() {
     document.getElementById(id + '-preview').style.background = val;
   });
   document.getElementById('cfg-dim-past').checked = !!s.dim_past_events;
-  document.getElementById('cfg-language').value = s.language || 'de';
+  document.getElementById('cfg-language').value = getLang();
 
   // Set active contrast/hour-height buttons
   [
diff --git a/frontend/js/i18n.js b/frontend/js/i18n.js
index 94095af..382451e 100644
--- a/frontend/js/i18n.js
+++ b/frontend/js/i18n.js
@@ -364,13 +364,16 @@ const translations = {
   },
 };
 
-let currentLang = 'de';
+let currentLang = (() => {
+  try { const l = localStorage.getItem('lang'); return (l && translations[l]) ? l : 'de'; } catch (_) { return 'de'; }
+})();
 
 export function getLang() { return currentLang; }
 
 export function setLang(lang) {
   currentLang = (lang && translations[lang]) ? lang : 'de';
   document.documentElement.lang = currentLang;
+  try { localStorage.setItem('lang', currentLang); } catch (_) {}
   applyLang();
 }