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/features/source/components/SourceLanguageSelect.tsx

@@ -17,10 +17,10 @@ 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 Box from '@mui/material/Box';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
+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';
@@ -56,7 +56,7 @@ export const SourceLanguageSelect = ({
         SourceIconInfo &
         SourceMetaInfo)[];
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
 
     const [tmpSourceIdToEnabledState, setTmpSourceIdToEnabledState] = useState<Record<SourceIdInfo['id'], boolean>>({});
 
@@ -88,7 +88,7 @@ export const SourceLanguageSelect = ({
             Object.entries(tmpSourceIdToEnabledState).map(([sourceId, enabled]) =>
                 updateSourceMetadata(sources.find((source) => source.id === sourceId)!, 'isEnabled', enabled),
             ),
-        ).catch((e) => makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)));
+        ).catch((e) => makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)));
         setTmpSourceIdToEnabledState({});
         setSelectedLanguages(toUniqueISOLanguageCodes(tmpSelectedLanguages));
     };
@@ -103,13 +103,13 @@ export const SourceLanguageSelect = ({
 
     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={{
@@ -178,10 +178,10 @@ export const SourceLanguageSelect = ({
                 </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>