From a4970df334e79a4bbd0b075cb60dd4ba5d5a5693 Mon Sep 17 00:00:00 2001
From: Khalid Abdi <xamza2009@gmail.com>
Date: Mon, 29 Jun 2026 21:00:01 +0300
Subject: [PATCH] frontend: add a language switcher to Profile settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A Language section in the Profile panel offers English / Français, wired to
i18n.changeLanguage (persisted to localStorage via the detector cache).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../settings/settings-preferences.tsx         | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/frontend/components/settings/settings-preferences.tsx b/frontend/components/settings/settings-preferences.tsx
index 14aa68a..6aeb553 100644
--- a/frontend/components/settings/settings-preferences.tsx
+++ b/frontend/components/settings/settings-preferences.tsx
@@ -16,6 +16,7 @@ import {
   ToggleRow,
 } from "@/components/settings/settings-parts";
 import { authClient } from "@/lib/auth-client";
+import { supportedLanguages } from "@/lib/i18n/config";
 import {
   getSettings,
   saveSettings,
@@ -53,10 +54,14 @@ const DEFAULT_PREFS: UserPreferences = {
 };
 
 export function ProfilePanel() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { data: session } = authClient.useSession();
   const user = session?.user;
 
+  // The active UI language — `i18n.changeLanguage` persists the choice to
+  // localStorage (the detector's cache), so it survives reloads.
+  const activeLang = i18n.resolvedLanguage ?? i18n.language;
+
   const [prefs, setPrefs] = useState<UserPreferences>(DEFAULT_PREFS);
   const [baseline, setBaseline] = useState<UserPreferences>(DEFAULT_PREFS);
   const [name, setName] = useState("");
@@ -211,6 +216,30 @@ export function ProfilePanel() {
         </SettingsCard>
       </SettingsSection>
 
+      <SettingsSection
+        description={t("settings.profile.language.description")}
+        title={t("settings.profile.language.title")}
+      >
+        <SettingsCard className="space-y-1.5 p-5">
+          <FieldLabel>{t("settings.profile.language.label")}</FieldLabel>
+          <div className="flex flex-wrap gap-2">
+            {supportedLanguages.map((lng) => (
+              <Button
+                aria-pressed={activeLang === lng}
+                className="rounded-3xl"
+                key={lng}
+                onClick={() => void i18n.changeLanguage(lng)}
+                size="sm"
+                type="button"
+                variant={activeLang === lng ? "default" : "outline"}
+              >
+                {t(`settings.profile.language.${lng}`)}
+              </Button>
+            ))}
+          </div>
+        </SettingsCard>
+      </SettingsSection>
+
       <SettingsSection
         description={t("settings.profile.patientNotificationsDescription")}
         title={t("settings.profile.patientNotifications")}