ui: EN/FR toggle in the What's-new dialog (defaults to UI language)
This commit is contained in:
+14
-2
@@ -1150,6 +1150,10 @@ export default function App() {
|
|||||||
// "What's new": the changelog for the version(s) since the operator last ran,
|
// "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).
|
// 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);
|
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(() => {
|
useEffect(() => {
|
||||||
GetWhatsNew().then((e: any) => { if (Array.isArray(e) && e.length) setWhatsNew(e); }).catch(() => {});
|
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" />
|
<Zap className="size-5 text-primary" />
|
||||||
<h2 className="text-lg font-bold tracking-tight">{t('whatsnew.title')}</h2>
|
<h2 className="text-lg font-bold tracking-tight">{t('whatsnew.title')}</h2>
|
||||||
<span className="flex-1" />
|
<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>
|
||||||
<div className="overflow-y-auto px-5 py-4 space-y-5">
|
<div className="overflow-y-auto px-5 py-4 space-y-5">
|
||||||
{whatsNew.map((e) => (
|
{whatsNew.map((e) => (
|
||||||
@@ -4169,7 +4181,7 @@ export default function App() {
|
|||||||
{e.date && <span className="text-[11px] text-muted-foreground">{e.date}</span>}
|
{e.date && <span className="text-[11px] text-muted-foreground">{e.date}</span>}
|
||||||
</div>
|
</div>
|
||||||
<ul className="space-y-1.5 text-sm">
|
<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">
|
<li key={i} className="flex gap-2">
|
||||||
<span className="text-primary mt-1.5 size-1.5 rounded-full bg-primary shrink-0" />
|
<span className="text-primary mt-1.5 size-1.5 rounded-full bg-primary shrink-0" />
|
||||||
<span>{line}</span>
|
<span>{line}</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user