Migrate to lingui

Switch to "lingui" for better DX.
Tried to persist existing languages as much as possible.

Removed "vite-plugin-node-polyfills" because it's incompatible with "lingui"

src/base/components/inputs/LanguageSelect.tsx

@@ -17,8 +17,8 @@ import IconButton from '@mui/material/IconButton';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import ListItemText from '@mui/material/ListItemText';
 import ListItem from '@mui/material/ListItem';
-import { useTranslation } from 'react-i18next';
 import { Virtuoso } from 'react-virtuoso';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { translateExtensionLanguage } from '@/features/extension/Extensions.utils.ts';
 import { languageSortComparator } from '@/base/utils/Languages.ts';
@@ -31,7 +31,7 @@ interface IProps {
 }
 
 export function LanguageSelect(props: IProps) {
-    const { t } = useTranslation();
+    const { t } = useLingui();
 
     const { selectedLanguages, setSelectedLanguages, languages } = props;
     const [tmpSelectedLanguages, setTmpSelectedLanguages] = useState(toUniqueISOLanguageCodes(selectedLanguages));
@@ -66,13 +66,13 @@ export function LanguageSelect(props: IProps) {
 
     return (
         <>
-            <CustomTooltip title={t('settings.title')}>
+            <CustomTooltip title={t`Settings`}>
                 <IconButton onClick={() => setOpen(true)} aria-label="display more actions" edge="end" color="inherit">
                     <FilterListIcon />
                 </IconButton>
             </CustomTooltip>
             <Dialog fullWidth maxWidth="xs" open={open} onClose={handleCancel}>
-                <DialogTitle>{t('global.language.title.enabled_languages')}</DialogTitle>
+                <DialogTitle>{t`Allowed Languages`}</DialogTitle>
                 <DialogContent dividers sx={{ padding: 0 }}>
                     <Virtuoso
                         style={{
@@ -97,10 +97,10 @@ export function LanguageSelect(props: IProps) {
                 </DialogContent>
                 <DialogActions>
                     <Button autoFocus onClick={handleCancel} color="primary">
-                        {t('global.button.cancel')}
+                        {t`Cancel`}
                     </Button>
                     <Button onClick={handleOk} color="primary">
-                        {t('global.button.ok')}
+                        {t`Ok`}
                     </Button>
                 </DialogActions>
             </Dialog>

src/base/components/inputs/PasswordTextField.tsx

@@ -12,10 +12,10 @@ import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Visibility from '@mui/icons-material/Visibility';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
-import { useTranslation } from 'react-i18next';
+import { useLingui } from '@lingui/react/macro';
 
 export const PasswordTextField = (props: TextFieldProps) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
     const [showPassword, setShowPassword] = useState(false);
 
     const handleClickShowPassword = () => setShowPassword((show) => !show);
@@ -24,7 +24,7 @@ export const PasswordTextField = (props: TextFieldProps) => {
         <TextField
             id="password"
             name="password"
-            label={t('global.label.password')}
+            label={t`Password`}
             type={showPassword ? 'text' : 'password'}
             slotProps={{
                 input: {