From e4dd0ae70e5b1ff689a59d579dc2b1253a751cf5 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 31 Dec 2025 01:49:03 +0100
Subject: [PATCH] fix(i18n): show current language and add RTL support for
 Arabic

- Language switcher now shows current language code (EN, DE, PL, etc.)
- Add RTL layout support for Arabic (dir="rtl" on html element)
- Sidebar slides from right in RTL mode
- Flip horizontal layouts, navigation, and text alignment for RTL
---
 src/i18n.js  | 30 +++++++++++++----------
 src/main.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 12 deletions(-)

diff --git a/src/i18n.js b/src/i18n.js
index 93105db..067caf3 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -10,8 +10,8 @@ const translations = {
 
 		// Header
 		menuOpen: "Open menu",
-		langSwitch: "DE",
-		langSwitchLabel: "Switch language: Deutsch",
+		langSwitch: "EN",
+		langSwitchLabel: "Switch language",
 		help: "Help",
 
 		// Instructions
@@ -109,8 +109,8 @@ const translations = {
 
 		// Header
 		menuOpen: "Menü öffnen",
-		langSwitch: "PL",
-		langSwitchLabel: "Zmień język: Polski",
+		langSwitch: "DE",
+		langSwitchLabel: "Sprache wechseln",
 		help: "Hilfe",
 
 		// Instructions
@@ -209,8 +209,8 @@ const translations = {
 
 		// Header
 		menuOpen: "Otwórz menu",
-		langSwitch: "ES",
-		langSwitchLabel: "Cambiar idioma: Español",
+		langSwitch: "PL",
+		langSwitchLabel: "Zmień język",
 		help: "Pomoc",
 
 		// Instructions
@@ -309,8 +309,8 @@ const translations = {
 
 		// Header
 		menuOpen: "Abrir menú",
-		langSwitch: "AR",
-		langSwitchLabel: "تغيير اللغة: العربية",
+		langSwitch: "ES",
+		langSwitchLabel: "Cambiar idioma",
 		help: "Ayuda",
 
 		// Instructions
@@ -409,8 +409,8 @@ const translations = {
 
 		// Header
 		menuOpen: "افتح القائمة",
-		langSwitch: "UK",
-		langSwitchLabel: "Змінити мову: Українська",
+		langSwitch: "AR",
+		langSwitchLabel: "تغيير اللغة",
 		help: "مساعدة",
 
 		// Instructions
@@ -509,8 +509,8 @@ const translations = {
 
 		// Header
 		menuOpen: "Відкрити меню",
-		langSwitch: "EN",
-		langSwitchLabel: "Switch language: English",
+		langSwitch: "UK",
+		langSwitchLabel: "Змінити мову",
 		help: "Допомога",
 
 		// Instructions
@@ -654,6 +654,9 @@ export function getLanguage() {
 /**
  * Set language and persist to localStorage
  */
+// RTL languages
+const rtlLanguages = ["ar"];
+
 export function setLanguage(lang) {
 	if (!translations[lang]) {
 		console.warn(`Language "${lang}" not supported, falling back to English`);
@@ -662,6 +665,9 @@ export function setLanguage(lang) {
 	currentLang = lang;
 	localStorage.setItem("codeCrispies.language", lang);
 	document.documentElement.lang = lang;
+
+	// Set text direction for RTL languages
+	document.documentElement.dir = rtlLanguages.includes(lang) ? "rtl" : "ltr";
 }
 
 /**
diff --git a/src/main.css b/src/main.css
index f7d473a..d2d8c15 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1307,3 +1307,71 @@ input:checked + .toggle-slider::before {
 		font-size: 13px;
 	}
 }
+
+/* ================== RTL SUPPORT ================== */
+
+/* RTL: Sidebar slides from right */
+[dir="rtl"] .sidebar-drawer {
+	left: auto;
+	right: calc(-1 * var(--sidebar-width));
+	transition: right 0.3s ease;
+}
+
+[dir="rtl"] .sidebar-drawer.open {
+	right: 0;
+}
+
+/* RTL: Content shifts to left when sidebar opens */
+[dir="rtl"] .app-container:has(.sidebar-drawer.open) .game-layout {
+	transform: translateX(calc(-1 * var(--sidebar-width) * 0.8));
+}
+
+/* RTL: Flip horizontal layouts */
+[dir="rtl"] .header-left,
+[dir="rtl"] .header-right {
+	flex-direction: row-reverse;
+}
+
+/* RTL: Editor tools */
+[dir="rtl"] .editor-tools {
+	flex-direction: row-reverse;
+}
+
+/* RTL: Navigation buttons */
+[dir="rtl"] .nav-controls {
+	flex-direction: row-reverse;
+}
+
+/* RTL: Hint layout */
+[dir="rtl"] .hint {
+	flex-direction: row-reverse;
+	text-align: right;
+}
+
+/* RTL: Module list items */
+[dir="rtl"] .module-header {
+	flex-direction: row-reverse;
+}
+
+[dir="rtl"] .lesson-list button {
+	text-align: right;
+}
+
+/* RTL: Lesson progress indicator */
+[dir="rtl"] .lesson-list button::before {
+	margin-left: var(--spacing-sm);
+	margin-right: 0;
+}
+
+/* RTL: Text alignment */
+[dir="rtl"] .lesson-description,
+[dir="rtl"] .task-instruction,
+[dir="rtl"] #lesson-title {
+	text-align: right;
+}
+
+/* RTL: Dialog close button */
+[dir="rtl"] .dialog-close {
+	left: var(--spacing-sm);
+	right: auto;
+}