feat: Adding French language

frontend/src/components/SettingsModal.tsx

@@ -58,6 +58,7 @@ import {
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
 import { writeUiPref } from '@/lib/uiPref';
+import { useI18n, FlagGB, FlagFR, type Lang } from '@/lib/i18n';
 import { OperatingPanel } from '@/components/OperatingPanel';
 import { UDPIntegrationsPanel } from '@/components/UDPIntegrationsPanel';
 
@@ -3758,10 +3759,25 @@ export function SettingsModal({ onClose, onSaved, initialSection, onMainPaneChan
   }
 
   function GeneralPanel() {
+    const { lang, setLang, t } = useI18n();
     return (
       <>
         <SectionHeader title="General" hint="App behaviour (saved instantly)." />
         <div className="space-y-3 max-w-3xl">
+          <div className="flex items-center gap-3">
+            <Label className="text-sm w-40">{t('settings.language')}</Label>
+            <div className="inline-flex rounded-md border border-border overflow-hidden">
+              {([['en', FlagGB, 'English'], ['fr', FlagFR, 'Français']] as [Lang, typeof FlagGB, string][]).map(([code, Flag, label]) => (
+                <button key={code} type="button" onClick={() => setLang(code)}
+                  className={cn('flex items-center gap-2 px-3 py-1.5 text-sm font-medium border-l border-border first:border-l-0',
+                    lang === code ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
+                  <Flag className="w-5 rounded-[2px] border border-border/30" />
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+
           <label className="flex items-center gap-2 text-sm cursor-pointer">
             <Checkbox checked={autofocusWB} onCheckedChange={(c) => { const v = !!c; setAutofocusWB(v); writeUiPref('opslog.autofocusWB', v ? '1' : '0'); }} />
             Auto-focus "Worked before" for known stations