From aa5af4fc75b447c459a2d67992cb4d3fde192e8c Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Tue, 21 Jul 2026 00:36:39 +0200
Subject: [PATCH] ui: EN/FR toggle in the What's-new dialog (defaults to UI
 language)

---
 frontend/src/App.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d24837d..ac1e081 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1150,6 +1150,10 @@ export default function App() {
   // "What's new": the changelog for the version(s) since the operator last ran,
   // shown once on the first launch after an update (EN/FR per the UI language).
   const [whatsNew, setWhatsNew] = useState<Array<{ version: string; date: string; en: string[]; fr: string[] }> | null>(null);
+  // Which language the What's-new modal shows — defaults to the UI language but
+  // toggleable, so a French operator running the English UI can still read it.
+  const [clLang, setClLang] = useState<'en' | 'fr'>(lang);
+  useEffect(() => { setClLang(lang); }, [lang]);
   useEffect(() => {
     GetWhatsNew().then((e: any) => { if (Array.isArray(e) && e.length) setWhatsNew(e); }).catch(() => {});
   }, []);
@@ -4159,7 +4163,15 @@ export default function App() {
               <Zap className="size-5 text-primary" />
               <h2 className="text-lg font-bold tracking-tight">{t('whatsnew.title')}</h2>
               <span className="flex-1" />
-              <button onClick={() => setWhatsNew(null)} className="text-muted-foreground hover:text-foreground"><X className="size-4" /></button>
+              <div className="inline-flex rounded-md border border-border overflow-hidden text-[11px] font-semibold">
+                {(['en', 'fr'] as const).map((l) => (
+                  <button key={l} onClick={() => setClLang(l)}
+                    className={cn('px-2 py-0.5 uppercase', clLang === l ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted')}>
+                    {l}
+                  </button>
+                ))}
+              </div>
+              <button onClick={() => setWhatsNew(null)} className="text-muted-foreground hover:text-foreground ml-1"><X className="size-4" /></button>
             </div>
             <div className="overflow-y-auto px-5 py-4 space-y-5">
               {whatsNew.map((e) => (
@@ -4169,7 +4181,7 @@ export default function App() {
                     {e.date && <span className="text-[11px] text-muted-foreground">{e.date}</span>}
                   </div>
                   <ul className="space-y-1.5 text-sm">
-                    {(lang === 'fr' ? e.fr : e.en).map((line, i) => (
+                    {(clLang === 'fr' ? e.fr : e.en).map((line, i) => (
                       <li key={i} className="flex gap-2">
                         <span className="text-primary mt-1.5 size-1.5 rounded-full bg-primary shrink-0" />
                         <span>{line}</span>