From d53039c75db9fe5a590ef9886aa6b64223b55952 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Thu, 26 Feb 2026 12:06:55 +0100
Subject: [PATCH] =?UTF-8?q?Fix=20d=C3=A9tection=20langue=20Google=20pour?=
 =?UTF-8?q?=20les=20pages=20arabes=20:=20hreflang=20+=20localisation=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- decodeURIComponent dans getAlternateUrls pour matcher les pathnames arabes percent-encoded
- Localisation des aria-label et title (logo, menu mobile, dark mode toggle) via i18n.ts
- Ajout section ui dans les traductions (closeMenu, changeTheme, themeAuto/Light/Dark)
- Refacto logo.astro : utilise getHomePath/getLocaleFromUrl au lieu de logique dupliquée
- Refacto header.astro : utilise getLocaleFromUrl au lieu de détection manuelle
---
 src/components/DarkModeToggle.astro | 15 +++++++++++----
 src/components/header.astro         |  7 +++----
 src/components/logo.astro           | 10 +++++-----
 src/utils/i18n.ts                   |  7 +++++++
 src/utils/page-translations.ts      |  2 +-
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/DarkModeToggle.astro b/src/components/DarkModeToggle.astro
index 1e4954f..274e18e 100644
--- a/src/components/DarkModeToggle.astro
+++ b/src/components/DarkModeToggle.astro
@@ -1,12 +1,19 @@
 ---
-// DarkModeToggle component - cycles between auto / light / dark
+import { getLocaleFromUrl, t } from "../utils/i18n";
+
+const currentLang = getLocaleFromUrl(Astro.url);
 ---
 
 <button
   id="darkModeToggle"
   type="button"
   class="flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
-  aria-label="Changer le thème"
+  aria-label={t('ui', 'changeTheme', currentLang)}
+  data-theme-labels={JSON.stringify({
+    auto: t('ui', 'themeAuto', currentLang),
+    light: t('ui', 'themeLight', currentLang),
+    dark: t('ui', 'themeDark', currentLang),
+  })}
 >
   <!-- Auto icon (system preference) -->
   <svg
@@ -81,8 +88,8 @@
 
   function updateAriaLabel(preference: 'auto' | 'light' | 'dark') {
     const toggle = document.getElementById('darkModeToggle');
-    const labels = { auto: 'Thème : automatique', light: 'Thème : clair', dark: 'Thème : sombre' };
-    toggle?.setAttribute('aria-label', labels[preference]);
+    const labels = JSON.parse(toggle?.dataset.themeLabels || '{}');
+    toggle?.setAttribute('aria-label', labels[preference] || preference);
   }
 
   const cycle: Record<string, 'light' | 'dark' | 'auto'> = { auto: 'light', light: 'dark', dark: 'auto' };
diff --git a/src/components/header.astro b/src/components/header.astro
index 6a9a952..faf8124 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -1,9 +1,8 @@
 ---
 import Logo from "../components/logo.astro";
+import { getLocaleFromUrl, t } from "../utils/i18n";
 
-// Détection de la langue courante par le path uniquement
-const pathname = Astro.url.pathname;
-const currentLang = pathname.startsWith('/en') ? 'en' : pathname.startsWith('/ar') ? 'ar' : 'fr';
+const currentLang = getLocaleFromUrl(Astro.url);
 
 // Menu localisé
 const menus = {
@@ -40,7 +39,7 @@ const currentMenus = menus[currentLang] || menus.fr;
     <button
       id="mobileMenuBackground"
       type="button"
-      aria-label="Fermer le menu"
+      aria-label={t('ui', 'closeMenu', currentLang)}
       class="fixed inset-0 z-20 hidden w-screen h-screen duration-300 ease-out bg-white/90 dark:bg-neutral-950/90 appearance-none border-0 p-0 cursor-default"
     >
     </button>
diff --git a/src/components/logo.astro b/src/components/logo.astro
index f335697..0f0e0c9 100644
--- a/src/components/logo.astro
+++ b/src/components/logo.astro
@@ -1,17 +1,17 @@
 ---
 import HomeIcon from "./icons/HomeIcon.astro";
+import { getLocaleFromUrl, getHomePath, t } from "../utils/i18n";
 
-const pathname = Astro.url.pathname;
-const currentLang = pathname.startsWith('/en') ? 'en' : pathname.startsWith('/ar') ? 'ar' : 'fr';
-const isHome = pathname === '/' || pathname === '/en' || pathname === '/en/' || pathname === '/ar' || pathname === '/ar/';
-const homeUrl = currentLang === 'en' ? '/en' : currentLang === 'ar' ? '/ar' : '/';
+const currentLang = getLocaleFromUrl(Astro.url);
+const homeUrl = getHomePath(currentLang);
+const isHome = (Astro.url.pathname.replace(/\/$/, '') || '/') === homeUrl;
 ---
 
 {!isHome && (
   <a
     href={homeUrl}
     class="group relative z-30 flex items-center gap-3 text-neutral-600 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors"
-    title="Accueil"
+    title={t('nav', 'home', currentLang)}
   >
     <HomeIcon size={20} class="group-hover:scale-110 transition-transform duration-200" />
     <span class="font-medium text-lg tracking-wide whitespace-nowrap">Jalil Arfaoui</span>
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index 801c9bb..defb433 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -63,6 +63,13 @@ export const translations = {
 		darkMode: { fr: 'Mode sombre', en: 'Dark mode', ar: 'الوضع الداكن' },
 		lightMode: { fr: 'Mode clair', en: 'Light mode', ar: 'الوضع الفاتح' },
 	},
+	ui: {
+		closeMenu: { fr: 'Fermer le menu', en: 'Close menu', ar: 'إغلاق القائمة' },
+		changeTheme: { fr: 'Changer le thème', en: 'Change theme', ar: 'تغيير المظهر' },
+		themeAuto: { fr: 'Thème : automatique', en: 'Theme: auto', ar: 'المظهر: تلقائي' },
+		themeLight: { fr: 'Thème : clair', en: 'Theme: light', ar: 'المظهر: فاتح' },
+		themeDark: { fr: 'Thème : sombre', en: 'Theme: dark', ar: 'المظهر: داكن' },
+	},
 	categories: {
 		pro: { fr: 'Professionnel', en: 'Professional', ar: 'مهني' },
 		comedy: { fr: 'Comédie', en: 'Comedy', ar: 'كوميديا' },
diff --git a/src/utils/page-translations.ts b/src/utils/page-translations.ts
index 0763a97..fc8cefc 100644
--- a/src/utils/page-translations.ts
+++ b/src/utils/page-translations.ts
@@ -79,6 +79,6 @@ function matchDynamicPattern(
 export function getAlternateUrls(
 	pathname: string,
 ): Record<Locale, string> | undefined {
-	const normalized = pathname.replace(/\/$/, "") || "/";
+	const normalized = decodeURIComponent(pathname.replace(/\/$/, "") || "/");
 	return pathIndex.get(normalized) ?? matchDynamicPattern(normalized);
 }