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/buttons/ButtonSelect.tsx

@@ -7,8 +7,8 @@
  */
 
 import Stack from '@mui/material/Stack';
-import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { MultiValueButtonProps } from '@/base/Base.types.ts';
 import { Superscript } from '@/base/components/texts/Superscript.tsx';
@@ -22,13 +22,13 @@ export const ButtonSelect = <Value extends string | number>({
     isDefaultable,
     onDefault,
 }: MultiValueButtonProps<Value>) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
 
     return (
         <Stack sx={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
             {isDefaultable && (
                 <Button key="default" onClick={onDefault} variant={value === undefined ? 'contained' : 'outlined'}>
-                    {t('global.label.default')}
+                    {t`Default`}
                 </Button>
             )}
             {values.map((displayValue) => {
@@ -39,13 +39,13 @@ export const ButtonSelect = <Value extends string | number>({
                     : t(valueToDisplayData[displayValue].title);
 
                 return (
-                    <CustomTooltip key={displayValue} title={isDefault ? t('reader.settings.active_setting') : ''}>
+                    <CustomTooltip key={displayValue} title={isDefault ? t`Active setting` : ''}>
                         <Button
                             onClick={() => setValue(displayValue)}
                             variant={displayValue === value ? 'contained' : 'outlined'}
                             startIcon={valueToDisplayData[displayValue].icon}
                         >
-                            {isDefault ? <Superscript i18nKey="global.label.footnote" value={text} /> : text}
+                            {isDefault ? <Superscript superscript="*" text={text} /> : text}
                         </Button>
                     </CustomTooltip>
                 );

src/base/components/buttons/ResetButton.tsx

@@ -7,9 +7,9 @@
  */
 
 import Button, { ButtonProps } from '@mui/material/Button';
-import { useTranslation } from 'react-i18next';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 
 type PropsIconButton = { asIconButton: true } & IconButtonProps;
@@ -17,11 +17,11 @@ type PropsButton = { asIconButton?: false } & ButtonProps;
 type Props = PropsIconButton | PropsButton;
 
 export const ResetButton = ({ asIconButton, ...props }: Props) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
 
     if (asIconButton) {
         return (
-            <CustomTooltip title={t('global.button.reset')}>
+            <CustomTooltip title={t`Reset`}>
                 <IconButton color="inherit" {...props}>
                     <RestartAltIcon />
                 </IconButton>
@@ -31,7 +31,7 @@ export const ResetButton = ({ asIconButton, ...props }: Props) => {
 
     return (
         <Button startIcon={<RestartAltIcon />} {...(props as ButtonProps)}>
-            {t('global.button.reset')}
+            {t`Reset`}
         </Button>
     );
 };

src/base/components/buttons/ValueRotationButton.tsx

@@ -6,9 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useTranslation } from 'react-i18next';
 import { ReactNode, useMemo } from 'react';
 import Button from '@mui/material/Button';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { MultiValueButtonProps } from '@/base/Base.types.ts';
 import { getNextRotationValue } from '@/base/utils/ValueRotationButton.utils.ts';
@@ -25,7 +25,7 @@ export const ValueRotationButton = <Value extends string | number>({
     onDefault,
     defaultIcon,
 }: MultiValueButtonProps<Value> & { defaultIcon?: ReactNode }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
 
     const isDefault = value === undefined;
     const indexOfValue = useMemo(() => {
@@ -47,11 +47,11 @@ export const ValueRotationButton = <Value extends string | number>({
                     size="large"
                 >
                     {defaultValue === undefined ? (
-                        t('global.label.default')
+                        t`Default`
                     ) : (
                         <Superscript
-                            i18nKey="settings.default_value"
-                            value={
+                            superscript={`(${t`Default`})`}
+                            text={
                                 valueToDisplayData[defaultValue].isTitleString
                                     ? valueToDisplayData[defaultValue].title
                                     : t(valueToDisplayData[defaultValue].title)