feat(i18n): add fr localization support (#902)

* feat: add fr support

* fix(i18n): ensure langs are sorted before being displayed.

packages/web/src/components/LanguageSwitcher.tsx

@@ -21,7 +21,7 @@ export default function LanguageSwitcher({
   disableHover = false,
 }: LanguageSwitcherProps) {
   const { i18n } = useTranslation("ui");
-  const { set: setLanguage, currentLanguage } = useLang();
+  const { set: setLanguage, current, getSupportedLangs } = useLang();
 
   const handleLanguageChange = useCallback(
     async (languageCode: LangCode) => {
@@ -65,12 +65,12 @@ export default function LanguageSwitcher({
                 "group-hover:text-gray-900 dark:group-hover:text-white",
             )}
           >
-            {currentLanguage?.name}
+            {current?.name}
           </Subtle>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="center" className="w-48">
-        {supportedLanguages.map((language) => (
+        {getSupportedLangs.map((language) => (
           <DropdownMenuItem
             key={language.code}
             onClick={() => handleLanguageChange(language.code)}

packages/web/src/core/hooks/useLang.ts

@@ -50,6 +50,11 @@ function useLang() {
     [i18n.language, i18n.changeLanguage, setLanguageInStorage],
   );
 
+  const getSupportedLangs = useMemo(
+    () => supportedLanguages.toSorted((a, b) => a.name.localeCompare(b.name)),
+    [],
+  );
+
   const compare = useCallback(
     (a: string, b: string) => {
       return collator.compare(a, b);
@@ -57,7 +62,7 @@ function useLang() {
     [collator],
   );
 
-  return { compare, set, currentLanguage };
+  return { compare, set, current: currentLanguage, getSupportedLangs };
 }
 
 export default useLang;

packages/web/src/i18n-config.ts

@@ -13,9 +13,10 @@ export type Lang = {
 export type LangCode = Lang["code"];
 
 export const supportedLanguages: Lang[] = [
+  { code: "fi", name: "Suomi", flag: "🇫🇮" },
   { code: "de", name: "Deutsch", flag: "🇩🇪" },
   { code: "en", name: "English", flag: "🇺🇸" },
-  { code: "fi", name: "Suomi", flag: "🇫🇮" },
+  { code: "fr", name: "Français", flag: "🇫🇷" },
   { code: "sv", name: "Svenska", flag: "🇸🇪" },
 ];
 
@@ -41,6 +42,7 @@ i18next
     fallbackLng: {
       default: [FALLBACK_LANGUAGE_CODE],
       fi: ["fi-FI", FALLBACK_LANGUAGE_CODE],
+      fr: ["fr-FR", FALLBACK_LANGUAGE_CODE],
       sv: ["sv-SE", FALLBACK_LANGUAGE_CODE],
       de: ["de-DE", FALLBACK_LANGUAGE_CODE],
     },

tsconfig.base.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES2022",
+    "target": "ES2023",
-    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "lib": ["DOM", "DOM.Iterable", "ES2023"],
     "module": "ESNext",
     "moduleResolution": "bundler",
     "strict": true,