feat: Adding French language
This commit is contained in:
@@ -0,0 +1,143 @@
|
||||
import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
|
||||
import { writeUiPref } from './uiPref';
|
||||
|
||||
// Lightweight i18n: a flat key→string dictionary per language, a context that
|
||||
// holds the active language, and a t() lookup with {var} interpolation. English
|
||||
// is the source/fallback; a missing French key falls back to English, then to
|
||||
// the key itself. Language is persisted (localStorage + portable UI pref) and
|
||||
// chosen once at first run via the flag gate below.
|
||||
export type Lang = 'en' | 'fr';
|
||||
const LS_KEY = 'opslog.lang';
|
||||
|
||||
type Dict = Record<string, string>;
|
||||
|
||||
const en: Dict = {
|
||||
// Menu bar
|
||||
'menu.file': 'File', 'menu.edit': 'Edit', 'menu.view': 'View', 'menu.tools': 'Tools',
|
||||
'file.import': 'Import ADIF…', 'file.export': 'Export ADIF…', 'file.exporting': 'Exporting…',
|
||||
'file.exportCabrillo': 'Export Cabrillo…', 'file.deleteAll': 'Delete all QSOs…', 'file.exit': 'Exit',
|
||||
'edit.editSel': 'Edit selected QSO…', 'edit.prefs': 'Preferences…',
|
||||
'view.refresh': 'Refresh', 'view.clearFilters': 'Clear filters',
|
||||
'tools.qslManager': 'QSL Manager…', 'tools.qslDesigner': 'QSL Card Designer…',
|
||||
'tools.winkeyer': 'WinKeyer CW keyer', 'tools.dvk': 'Digital Voice Keyer', 'tools.cwDecoder': 'CW decoder (RX audio)',
|
||||
'tools.net': 'NET Control', 'tools.alerts': 'Alert management…',
|
||||
// Tabs
|
||||
'tab.main': 'Main', 'tab.recent': 'Recent QSOs', 'tab.cluster': 'Cluster', 'tab.worked': 'Worked before',
|
||||
'tab.awards': 'Awards', 'tab.bandmap': 'Band Map', 'tab.contest': 'Contest', 'tab.net': 'Net',
|
||||
// Entry form
|
||||
'field.callsign': 'Callsign', 'field.name': 'Name', 'field.qth': 'QTH', 'field.grid': 'Grid',
|
||||
'field.band': 'Band', 'field.mode': 'Mode', 'field.country': 'Country', 'field.comment': 'Comment',
|
||||
'field.note': 'Note', 'field.rstTx': 'RST tx', 'field.rstRx': 'RST rx',
|
||||
'field.txFreq': 'TX Freq (MHz)', 'field.freq': 'Freq (MHz)', 'field.rxFreq': 'RX Freq (MHz)', 'field.rxBand': 'RX Band',
|
||||
'field.startUtc': 'Start UTC', 'field.endUtc': 'End UTC', 'field.snt': 'Snt', 'field.rcv': 'Rcv',
|
||||
'btn.logQso': 'Log QSO', 'btn.clear': 'Clear', 'btn.spot': 'Spot', 'btn.saving': '…',
|
||||
// Language chooser
|
||||
'lang.choose': 'Choose your language', 'lang.chooseHint': 'You can change this later in Settings → General.',
|
||||
'lang.english': 'English', 'lang.french': 'Français',
|
||||
'settings.language': 'Language', 'settings.languageHint': 'Interface language.',
|
||||
};
|
||||
|
||||
const fr: Dict = {
|
||||
'menu.file': 'Fichier', 'menu.edit': 'Édition', 'menu.view': 'Affichage', 'menu.tools': 'Outils',
|
||||
'file.import': 'Importer ADIF…', 'file.export': 'Exporter ADIF…', 'file.exporting': 'Export…',
|
||||
'file.exportCabrillo': 'Exporter Cabrillo…', 'file.deleteAll': 'Supprimer tous les QSO…', 'file.exit': 'Quitter',
|
||||
'edit.editSel': 'Éditer le QSO sélectionné…', 'edit.prefs': 'Préférences…',
|
||||
'view.refresh': 'Rafraîchir', 'view.clearFilters': 'Effacer les filtres',
|
||||
'tools.qslManager': 'Gestionnaire QSL…', 'tools.qslDesigner': 'Créateur de carte QSL…',
|
||||
'tools.winkeyer': 'Manipulateur CW WinKeyer', 'tools.dvk': 'Manipulateur vocal numérique', 'tools.cwDecoder': 'Décodeur CW (audio RX)',
|
||||
'tools.net': 'Contrôle de NET', 'tools.alerts': 'Gestion des alertes…',
|
||||
'tab.main': 'Principal', 'tab.recent': 'QSO récents', 'tab.cluster': 'Cluster', 'tab.worked': 'Déjà contacté',
|
||||
'tab.awards': 'Diplômes', 'tab.bandmap': 'Carte de bande', 'tab.contest': 'Contest', 'tab.net': 'NET',
|
||||
'field.callsign': 'Indicatif', 'field.name': 'Nom', 'field.qth': 'QTH', 'field.grid': 'Locator',
|
||||
'field.band': 'Bande', 'field.mode': 'Mode', 'field.country': 'Pays', 'field.comment': 'Commentaire',
|
||||
'field.note': 'Note', 'field.rstTx': 'RST tx', 'field.rstRx': 'RST rx',
|
||||
'field.txFreq': 'Fréq TX (MHz)', 'field.freq': 'Fréq (MHz)', 'field.rxFreq': 'Fréq RX (MHz)', 'field.rxBand': 'Bande RX',
|
||||
'field.startUtc': 'Début UTC', 'field.endUtc': 'Fin UTC', 'field.snt': 'Env', 'field.rcv': 'Reç',
|
||||
'btn.logQso': 'Enregistrer', 'btn.clear': 'Effacer', 'btn.spot': 'Spot', 'btn.saving': '…',
|
||||
'lang.choose': 'Choisissez votre langue', 'lang.chooseHint': 'Modifiable plus tard dans Réglages → Général.',
|
||||
'lang.english': 'English', 'lang.french': 'Français',
|
||||
'settings.language': 'Langue', 'settings.languageHint': "Langue de l'interface.",
|
||||
};
|
||||
|
||||
const dicts: Record<Lang, Dict> = { en, fr };
|
||||
|
||||
function translate(lang: Lang, key: string, vars?: Record<string, string | number>): string {
|
||||
let s = dicts[lang][key] ?? dicts.en[key] ?? key;
|
||||
if (vars) for (const k of Object.keys(vars)) s = s.replace(new RegExp(`\\{${k}\\}`, 'g'), String(vars[k]));
|
||||
return s;
|
||||
}
|
||||
|
||||
type Ctx = { lang: Lang; setLang: (l: Lang) => void; t: (key: string, vars?: Record<string, string | number>) => string; chosen: boolean };
|
||||
const I18nContext = createContext<Ctx>({ lang: 'en', setLang: () => {}, t: (k) => k, chosen: true });
|
||||
|
||||
export function I18nProvider({ children }: { children: ReactNode }) {
|
||||
const [lang, setLangState] = useState<Lang>(() => ((localStorage.getItem(LS_KEY) as Lang) || 'en'));
|
||||
const [chosen, setChosen] = useState<boolean>(() => !!localStorage.getItem(LS_KEY));
|
||||
const setLang = (l: Lang) => {
|
||||
setLangState(l);
|
||||
setChosen(true);
|
||||
localStorage.setItem(LS_KEY, l);
|
||||
writeUiPref(LS_KEY, l);
|
||||
};
|
||||
const t = useCallback((key: string, vars?: Record<string, string | number>) => translate(lang, key, vars), [lang]);
|
||||
return (
|
||||
<I18nContext.Provider value={{ lang, setLang, t, chosen }}>
|
||||
{children}
|
||||
{!chosen && <LanguageGate onPick={setLang} />}
|
||||
</I18nContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const useI18n = () => useContext(I18nContext);
|
||||
|
||||
// ── Flags (inline SVG — Windows doesn't render flag emoji) ──────────────────
|
||||
|
||||
export function FlagFR({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 3 2" className={className} aria-hidden>
|
||||
<rect width="1" height="2" x="0" fill="#0055A4" />
|
||||
<rect width="1" height="2" x="1" fill="#fff" />
|
||||
<rect width="1" height="2" x="2" fill="#EF4135" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FlagGB({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg viewBox="0 0 60 30" className={className} aria-hidden>
|
||||
<clipPath id="ujs"><path d="M0,0 v30 h60 v-30 z" /></clipPath>
|
||||
<clipPath id="ujt"><path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z" /></clipPath>
|
||||
<g clipPath="url(#ujs)">
|
||||
<path d="M0,0 v30 h60 v-30 z" fill="#012169" />
|
||||
<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" strokeWidth="6" />
|
||||
<path d="M0,0 L60,30 M60,0 L0,30" clipPath="url(#ujt)" stroke="#C8102E" strokeWidth="4" />
|
||||
<path d="M30,0 v30 M0,15 h60" stroke="#fff" strokeWidth="10" />
|
||||
<path d="M30,0 v30 M0,15 h60" stroke="#C8102E" strokeWidth="6" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
// LanguageGate — first-run modal to pick the interface language.
|
||||
function LanguageGate({ onPick }: { onPick: (l: Lang) => void }) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="rounded-2xl border border-border bg-card shadow-2xl p-8 w-[420px] max-w-[90vw] text-center">
|
||||
<div className="text-lg font-bold mb-1">Choose your language</div>
|
||||
<div className="text-sm text-muted-foreground mb-6">Choisissez votre langue</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<button type="button" onClick={() => onPick('en')}
|
||||
className="flex flex-col items-center gap-3 rounded-xl border-2 border-border p-5 hover:border-primary hover:bg-muted transition-colors">
|
||||
<FlagGB className="w-16 rounded shadow-sm" />
|
||||
<span className="font-bold">English</span>
|
||||
</button>
|
||||
<button type="button" onClick={() => onPick('fr')}
|
||||
className="flex flex-col items-center gap-3 rounded-xl border-2 border-border p-5 hover:border-primary hover:bg-muted transition-colors">
|
||||
<FlagFR className="w-16 rounded shadow-sm border border-border/40" />
|
||||
<span className="font-bold">Français</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user