Add french language, use switch case instead of if's, correct one typo

web/README.md

@@ -5,7 +5,7 @@
 ```shell
 src
 ├── api                // backend api
-├── assets             // static resouces
+├── assets             // static resources
 ├── components         // public components
 ├── i18n               // i18n
 ├── jotai              // Global jotai variables

web/src/i18n/fr.ts

@@ -0,0 +1,144 @@
+export const fr = {
+  translation: {
+    language: 'Langue',
+    changePassword: 'Changer le mot de passe',
+    logout: 'Déconnexion',
+    keyboard: 'Clavier',
+    images: 'Images',
+    loading: 'Chargement',
+    empty: 'Vide',
+    settings: 'Réglages',
+    showMouse: 'Afficher la souris',
+    hideMouse: 'Masquer la souris',
+    power: 'Power',
+    reset: 'Reset',
+    powerShort: 'Power (appui court)',
+    powerLong: 'Power (appui long)',
+    hddLed: 'HDD LED',
+    checkLibFailed: 'Impossible de vérifier la bibliothèque d\'exécution, veuillez réessayer',
+    updateLibFailed: 'Impossible de mettre à jour la bibliothèque d\'exécution, veuillez réessayer',
+    updatingLib: 'Mise à jour de la bibliothèque d\'exécution. Veuillez rafraîchir la page après la mise à jour.',
+    checkForUpdate: 'Chercher des mises à jour',
+    head: {
+      desktop: 'Bureau à distance',
+      login: 'Connexion',
+      changePassword: 'Changer le mot de passe',
+      terminal: 'Terminal'
+    },
+    auth: {
+      login: 'Connexion',
+      placeholderUsername: 'Veuillez entrer votre nom d\'utilisateur',
+      placeholderPassword: 'Veuillez entrer votre mot de passe',
+      placeholderPassword2: 'Veuillez entrer votre mot de passe à nouveau',
+      noEmptyUsername: 'Le nom d\'utilisateur ne peut pas être vide',
+      noEmptyPassword: 'Le mot de passe ne peut pas être vide',
+      noAccount: 'Impossible de récupérer les informations de l\'utilisateur, veuillez rafraîchir la page ou réinitialiser le mot de passe',
+      invalidUser: 'Nom d\'utilisateur ou mot de passe invalide',
+      error: 'Erreur inattendue',
+      changePassword: 'Changer le mot de passe',
+      differentPassword: 'Les mots de passe ne correspondent pas',
+      illegalUsername: 'Le nom d\'utilisateur contient des caractères illégaux',
+      illegalPassword: 'Le mot de passe contient des caractères illégaux',
+      forgetPassword: 'Mot de passe oublié',
+      resetPassword: 'Réinitialiser le mot de passe',
+      reset1: 'Si vous avez oublié le mot de passe, veuillez suivre les étapes pour le réinitialiser:',
+      reset2: '1. Connectez-vous à l\'appareil NanoKVM via SSH;',
+      reset3: '2. Supprimez le fichier de l\'appareil: ',
+      reset4: '3. Utilisez le compte par défaut pour vous connecter: ',
+      ok: 'Se connecter',
+      cancel: 'Annuler'
+    },
+    screen: {
+      resolution: 'Résolution',
+      fps: 'FPS',
+      customizeFps: 'Personnaliser',
+      quality: 'Qualité',
+      frameDetect: 'Frame Detect',
+      frameDetectTip:
+        "Calcule la différence entre les images. Arrête la transmission du flux vidéo lorsqu'aucun changement n'est détecté sur l'écran de l'hôte distant"
+    },
+    cursor: {
+      default: 'Curseur par défaut',
+      pointer: 'Curseur de la souris',
+      cell: 'Curseur de cellule',
+      text: 'Curseur de texte',
+      grab: 'Curseur de poignée',
+      hide: 'Cacher le curseur',
+      mode: 'Mode de la souris',
+      absolute: 'Mode absolu',
+      relative: 'Mode relatif',
+      requestPointer: 'Utilisation du mode relatif. Veuillez cliquer sur le bureau pour obtenir le pointeur de la souris.',
+      resetHid: 'Réinitialiser le périphérique HID',
+    },
+    script: {
+      title: 'Script',
+      upload: 'Téléverser',
+      run: 'Executer',
+      runBackground: 'Executer en arrière-plan',
+      runFailed: 'Échec de l\'exécution',
+      attention: 'Attention',
+      delDesc: 'Etes-vous sûr de vouloir supprimer ce fichier?',
+      confirm: 'Oui',
+      cancel: 'Non',
+      delete: 'Supprimer',
+      close: 'Fermer'
+    },
+    terminal: {
+      title: 'Terminal',
+      nanokvm: 'Terminal NanoKVM',
+      serial: 'Terminal Port Série',
+      serialPort: 'Port série',
+      serialPortPlaceholder: 'Veuillez entrer le port série',
+      baudrate: 'Débit en bauds',
+      confirm: 'Ok'
+    },
+    wol: {
+      sending: 'Envoi de la commande...',
+      sent: 'Commande envoyée',
+      input: 'Veuillez entrer l\'adresse MAC',
+      ok: 'Ok'
+    },
+    about: {
+      title: 'A propos de NanoKVM',
+      information: 'Informations',
+      ip: 'IP',
+      mdns: 'mDNS',
+      firmware: 'Version de l\'application',
+      image: 'Version de l\'image',
+      deviceKey: 'Clé de l\'appareil',
+      queryFailed: 'Echec de la requête',
+      community: 'Communauté',
+    },
+    update: {
+      title: 'Vérifier les mises à jour',
+      queryFailed: 'Impossible de vérifier les mises à jour. Veuillez réessayer.',
+      updateFailed: 'Mis à jour échouée. Veuillez réessayer.',
+      isLatest: 'Vous avez déjà la dernière version.',
+      available: 'Une mise à jour est disponible. Voulez-vous vraiment mettre à jour?',
+      updating: 'Mise à jour en cours. Veuillez patienter...',
+      confirm: 'Confirmer',
+      cancel: 'Annuler'
+    },
+    virtualDevice: {
+      network: 'Réseau virtuel',
+      usb: 'USB virtuel'
+    },
+    tailscale: {
+      loading: 'Chargement...',
+      notInstalled: 'Tailscale non trouvé! Veuillez l\'installer.',
+      install: 'Installer',
+      installing: 'Installation...',
+      urlPeriod: 'L\'URL est valide pendant 10 minutes',
+      installed: 'Tailscale est déjà installé. Veuillez vous connecter.',
+      login: 'Connexion',
+      failed: 'Installation échouée',
+      retry: 'Veuillez rafraîchir et réessayer. Ou essayez d\'installer manuellement',
+      download: 'Télécharger le',
+      package: 'installation package',
+      unzip: 'et décompressez-le',
+      upTailscale: 'Téléverser tailscale dans le répertoire NanoKVM /usr/sbin/',
+      upTailscaled: 'Téléverser tailscaled dans le répertoire NanoKVM /usr/sbin/',
+      refresh: 'Rafraîchir la page courante'
+    }
+  }
+};

web/src/i18n/index.ts

@@ -5,13 +5,14 @@ import { getLanguage } from '@/lib/localstorage.ts';
 
 import { en } from './en';
 import { zh } from './zh';
+import { fr } from './fr';
 
 const lng = getLanguage();
 
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
   .init({
-    resources: { zh, en },
+    resources: { zh, en, fr },
     lng,
 
     interpolation: {

web/src/lib/localstorage.ts

@@ -44,11 +44,17 @@ export function getLanguage() {
   const lang = localStorage.getItem(LANGUAGE_KEY);
   if (lang) return lang;
 
-  if (navigator.language.indexOf('zh') > -1) {
+  const language = navigator.language;
-    return 'zh';
+
+  switch (true) {
+    case language.indexOf('zh') > -1:
+      return 'zh';
+    case language.indexOf('fr') > -1:
+      return 'fr';
+    default:
+      return 'en'; // Default language
   }
 
-  return 'en';
 }
 
 export function setLanguage(language: string) {

web/src/pages/desktop/menu-phone/settings/language.tsx

@@ -26,6 +26,16 @@ export const Language = () => {
         English
       </div>
 
+      <div
+        className={clsx(
+          'flex cursor-pointer select-none items-center space-x-1 rounded px-5 py-1',
+          i18n.language === 'fr' ? 'text-blue-500' : 'text-white hover:bg-neutral-700'
+        )}
+        onClick={() => changeLanguage('fr')}
+      >
+        Français
+      </div>
+
       <div
         className={clsx(
           'flex cursor-pointer select-none items-center space-x-1 rounded px-5 py-1',

web/src/pages/desktop/menu/settings/language.tsx

@@ -26,6 +26,16 @@ export const Language = () => {
         English
       </div>
 
+      <div
+        className={clsx(
+          'flex cursor-pointer select-none items-center space-x-1 rounded px-5 py-1',
+          i18n.language === 'fr' ? 'text-blue-500' : 'text-white hover:bg-neutral-700'
+        )}
+        onClick={() => changeLanguage('fr')}
+      >
+        Français
+      </div>
+
       <div
         className={clsx(
           'flex cursor-pointer select-none items-center space-x-1 rounded px-5 py-1',