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/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx

@@ -7,12 +7,12 @@
  */
 
 import Stack from '@mui/material/Stack';
-import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
 import DownloadIcon from '@mui/icons-material/Download';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { memo, useMemo, useRef } from 'react';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { Chapters } from '@/features/chapter/services/Chapters.ts';
 import { DownloadStateIndicator } from '@/base/components/downloads/DownloadStateIndicator.tsx';
@@ -26,7 +26,7 @@ import { useReaderChaptersStore, useReaderPagesStore } from '@/features/reader/s
 import { ChapterDownloadInfo, ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 
 const DownloadButton = ({ id = -1, isDownloaded }: ChapterIdInfo & ChapterDownloadInfo) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
 
     const downloadStatus = Chapters.useDownloadStatusFromCache(id);
 
@@ -67,7 +67,7 @@ export const ReaderNavBarDesktopActions = memo(() => {
         realUrl: state.chapters.currentChapter?.realUrl ?? FALLBACK_CHAPTER.realUrl,
     }));
 
-    const { t } = useTranslation();
+    const { t } = useLingui();
     const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderPagesStore((state) => ({
         pageLoadStates: state.pages.pageLoadStates,
         setPageLoadStates: state.pages.setPageLoadStates,
@@ -85,7 +85,7 @@ export const ReaderNavBarDesktopActions = memo(() => {
         <Stack sx={{ flexDirection: 'row', justifyContent: 'center', gap: 1 }}>
             <ReaderLibraryButton />
             <ReaderBookmarkButton id={id} isBookmarked={isBookmarked} />
-            <CustomTooltip title={t('reader.button.retry_load_pages')} disabled={!haveSomePagesFailedToLoad}>
+            <CustomTooltip title={t`Retry errored pages`} disabled={!haveSomePagesFailedToLoad}>
                 <IconButton
                     onClick={() => {
                         setPageLoadStates((statePageLoadStates) =>
@@ -104,12 +104,12 @@ export const ReaderNavBarDesktopActions = memo(() => {
                 </IconButton>
             </CustomTooltip>
             <DownloadButton id={id} isDownloaded={isDownloaded} />
-            <CustomTooltip title={t('global.button.open_browser')} disabled={!realUrl}>
+            <CustomTooltip title={t`Open in browser`} disabled={!realUrl}>
                 <IconButton disabled={!realUrl} href={realUrl ?? ''} rel="noreferrer" target="_blank" color="inherit">
                     <IconBrowser />
                 </IconButton>
             </CustomTooltip>
-            <CustomTooltip title={t('global.button.open_webview')} disabled={!realUrl}>
+            <CustomTooltip title={t`Open in WebView`} disabled={!realUrl}>
                 <IconButton
                     disabled={!realUrl}
                     href={realUrl ? requestManager.getWebviewUrl(realUrl) : ''}

src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopChapterNavigation.tsx

@@ -7,7 +7,6 @@
  */
 
 import Stack from '@mui/material/Stack';
-import { useTranslation } from 'react-i18next';
 import Box from '@mui/material/Box';
 import MenuItem from '@mui/material/MenuItem';
 import { memo, useLayoutEffect } from 'react';
@@ -16,6 +15,7 @@ import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { Link } from 'react-router-dom';
+import { useLingui } from '@lingui/react/macro';
 import { Select } from '@/base/components/inputs/Select.tsx';
 import { ReaderChapterList } from '@/features/reader/overlay/navigation/components/ReaderChapterList.tsx';
 import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopNextPreviousButton.tsx';
@@ -41,7 +41,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
 } & Pick<ReaderStateChapters, 'chapters' | 'previousChapter' | 'nextChapter'> & {
         readerThemeDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
     }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
 
     const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' });
 
@@ -53,27 +53,21 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
         <Stack sx={{ flexDirection: 'row', gap: 1 }} dir="ltr">
             <ReaderNavBarDesktopNextPreviousButton
                 type="previous"
-                title={t(
-                    getOptionForDirection(
-                        'reader.button.previous_chapter',
-                        'reader.button.next_chapter',
-                        readerThemeDirection,
-                    ),
-                )}
+                title={getOptionForDirection(t`Previous chapter`, t`Next chapter`, readerThemeDirection)}
                 onClick={() => {
                     ReaderControls.openChapter(getOptionForDirection('previous', 'next', readerThemeDirection));
                 }}
                 disabled={getOptionForDirection(!previousChapter, !nextChapter, readerThemeDirection)}
             />
             <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
-                <InputLabel id="reader-nav-bar-desktop-chapter-select">{t('chapter.title_one')}</InputLabel>
+                <InputLabel id="reader-nav-bar-desktop-chapter-select">{t`Chapter`}</InputLabel>
                 <Select
                     {...bindTrigger(popupState)}
                     open={popupState.isOpen}
                     value={currentChapterId ?? 0}
                     // hide actual select menu
                     MenuProps={{ sx: { visibility: 'hidden' } }}
-                    label={t('chapter.title_one')}
+                    label={t`Chapter`}
                     labelId="reader-nav-bar-desktop-chapter-select"
                 >
                     {/* hacky way to use the select component with a custom menu, the only possible value that is needed is the current chapter */}
@@ -85,13 +79,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
             <ReaderNavBarDesktopNextPreviousButton
                 component={Link}
                 type="next"
-                title={t(
-                    getOptionForDirection(
-                        'reader.button.next_chapter',
-                        'reader.button.previous_chapter',
-                        readerThemeDirection,
-                    ),
-                )}
+                title={getOptionForDirection(t`Next chapter`, t`Previous chapter`, readerThemeDirection)}
                 onClick={() => {
                     ReaderControls.openChapter(getOptionForDirection('next', 'previous', readerThemeDirection));
                 }}

src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx

@@ -7,11 +7,11 @@
  */
 
 import Stack from '@mui/material/Stack';
-import { useTranslation } from 'react-i18next';
 import MenuItem from '@mui/material/MenuItem';
 import { memo, useMemo } from 'react';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
+import { useLingui } from '@lingui/react/macro';
 import { Select } from '@/base/components/inputs/Select.tsx';
 import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
@@ -21,7 +21,7 @@ import { useReaderPagesStore, useReaderSettingsStore } from '@/features/reader/s
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 
 const BaseReaderNavBarDesktopPageNavigation = () => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
     const getOptionForDirection = useGetOptionForDirection();
     const { currentPageIndex, pages } = useReaderPagesStore((state) => ({
         currentPageIndex: state.pages.currentPageIndex,
@@ -36,7 +36,7 @@ const BaseReaderNavBarDesktopPageNavigation = () => {
         <Stack sx={{ flexDirection: 'row', gap: 1 }} dir="ltr">
             <ReaderNavBarDesktopNextPreviousButton
                 type="previous"
-                title={t(getOptionForDirection('reader.button.previous_page', 'reader.button.next_page', direction))}
+                title={getOptionForDirection(t`Previous page`, t`Next page`, direction)}
                 disabled={getOptionForDirection(
                     !currentPage.primary.index,
                     getNextIndexFromPage(currentPage) === getNextIndexFromPage(pages.slice(-1)[0]),
@@ -45,10 +45,10 @@ const BaseReaderNavBarDesktopPageNavigation = () => {
                 onClick={() => ReaderControls.openPage('previous', undefined, false)}
             />
             <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
-                <InputLabel id="reader-nav-bar-desktop-page-select">{t('reader.page_info.label.page')}</InputLabel>
+                <InputLabel id="reader-nav-bar-desktop-page-select">{t`Page`}</InputLabel>
                 <Select
                     labelId="reader-nav-bar-desktop-page-select"
-                    label={t('reader.page_info.label.page')}
+                    label={t`Page`}
                     value={getNextIndexFromPage(currentPage)}
                     onChange={(e) => ReaderControls.openPage(e.target.value as number, undefined, false)}
                 >
@@ -61,7 +61,7 @@ const BaseReaderNavBarDesktopPageNavigation = () => {
             </FormControl>
             <ReaderNavBarDesktopNextPreviousButton
                 type="next"
-                title={t(getOptionForDirection('reader.button.next_page', 'reader.button.previous_page', direction))}
+                title={getOptionForDirection(t`Next page`, t`Previous page`, direction)}
                 disabled={getOptionForDirection(
                     getNextIndexFromPage(currentPage) === getNextIndexFromPage(pages.slice(-1)[0]),
                     !currentPage.primary.index,