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"
2026-01-10 19:45:02 +01:00
parent c1ac58f4d6
commit 65a9a905be
287 changed files with 120766 additions and 37748 deletions
--- a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
+++ b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
@@ -7,13 +7,13 @@
 */

 import Stack from '@mui/material/Stack';
-import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
 import PushPinIcon from '@mui/icons-material/PushPin';
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
 import Divider from '@mui/material/Divider';
 import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import Drawer from '@mui/material/Drawer';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { ReaderNavContainer } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavContainer.tsx';
@@ -58,7 +58,7 @@ const BaseReaderNavBarDesktop = ({
    openSettings,
    setReaderNavBarWidth,
 }: ReaderNavBarDesktopProps & Pick<NavbarContextType, 'setReaderNavBarWidth'>) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
    const manga = useReaderStore((state) => state.manga);
    const {
        chapters,
@@ -112,7 +112,7 @@ const BaseReaderNavBarDesktop = ({
                <Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
                    <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                        <ReaderExitButton />
-                        <CustomTooltip title={t('reader.settings.label.static_navigation')}>
+                        <CustomTooltip title={t`Static navigation`}>
                            <IconButton
                                onClick={() => {
                                    setReaderNavBarWidth(0);
--- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx
+++ b/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) : ''}
--- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopChapterNavigation.tsx
+++ b/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));
                }}
--- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
+++ b/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,
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
@@ -7,10 +7,10 @@
 */

 import Stack from '@mui/material/Stack';
-import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { memo } from 'react';
+import { useLingui } from '@lingui/react/macro';
 import { ReaderNavBarDesktopPageScale } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx';
 import { ReaderNavBarDesktopReadingMode } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx';
 import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx';
@@ -21,7 +21,7 @@ import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/set
 import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';

 const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
    const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } =
        useReaderSettingsStore((state) => ({
            readingMode: state.settings.readingMode,
@@ -71,7 +71,7 @@ const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBa
                variant="contained"
                startIcon={<SettingsIcon />}
            >
-                {t('settings.title')}
+                {t`Settings`}
            </Button>
        </Stack>
    );
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx
@@ -6,8 +6,8 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
+import { useLingui } from '@lingui/react/macro';
 import { OffsetDoubleSpreadIcon } from '@/assets/icons/svg/OffsetDoubleSpreadIcon.tsx';
 import { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { isOffsetDoubleSpreadPagesEditable } from '@/features/reader/settings/ReaderSettings.utils.tsx';
@@ -19,7 +19,7 @@ export const ReaderNavBarDesktopOffsetDoubleSpread = ({
 }: Pick<IReaderSettings, 'readingMode' | 'shouldOffsetDoubleSpreads'> & {
    setShouldOffsetDoubleSpreads: (offset: boolean) => void;
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    if (!isOffsetDoubleSpreadPagesEditable(readingMode)) {
        return null;
@@ -34,7 +34,7 @@ export const ReaderNavBarDesktopOffsetDoubleSpread = ({
            variant="contained"
            startIcon={<OffsetDoubleSpreadIcon />}
        >
-            {t('reader.settings.label.offset_double_spread')}
+            {t`Offset double spreads`}
        </Button>
    );
 };
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx
@@ -7,8 +7,8 @@
 */

 import Stack from '@mui/material/Stack';
-import { useTranslation } from 'react-i18next';
 import FitScreenIcon from '@mui/icons-material/FitScreen';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { ValueRotationButton } from '@/base/components/buttons/ValueRotationButton.tsx';
 import {
@@ -36,13 +36,13 @@ export const ReaderNavBarDesktopPageScale = ({
            value: IReaderSettings[Setting],
        ) => void;
    }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    return (
        <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            <ValueRotationButton
                {...buttonSelectInputProps}
-                tooltip={t('reader.settings.page_scale.title')}
+                tooltip={t`Scale type`}
                value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
                defaultValue={pageScaleMode.isDefault ? pageScaleMode.value : undefined}
                values={READER_PAGE_SCALE_MODE_VALUES}
@@ -51,7 +51,7 @@ export const ReaderNavBarDesktopPageScale = ({
                defaultIcon={PAGE_SCALE_VALUE_TO_DISPLAY_DATA[pageScaleMode.value].icon}
            />
            {READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode.value] && (
-                <CustomTooltip title={t('reader.settings.page_scale.stretch')}>
+                <CustomTooltip title={t`Stretch small pages`}>
                    <CustomButtonIcon
                        onClick={() => updateSetting('shouldStretchPage', !shouldStretchPage.value)}
                        sx={{ px: undefined }}
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx
@@ -6,7 +6,7 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
+import { useLingui } from '@lingui/react/macro';
 import { ValueRotationButton } from '@/base/components/buttons/ValueRotationButton.tsx';
 import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
 import {
@@ -23,12 +23,12 @@ export const ReaderNavBarDesktopReadingDirection = ({
    Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
        setReadingDirection: (readingDirection: ReadingDirection) => void;
    }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    return (
        <ValueRotationButton
            {...buttonSelectInputProps}
-            tooltip={t('reader.settings.label.reading_direction')}
+            tooltip={t`Reading direction`}
            value={readingDirection.isDefault ? undefined : readingDirection.value}
            defaultValue={readingDirection.isDefault ? readingDirection.value : undefined}
            values={READING_DIRECTION_VALUES}
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx
@@ -6,7 +6,7 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
+import { useLingui } from '@lingui/react/macro';
 import { ValueRotationButton } from '@/base/components/buttons/ValueRotationButton.tsx';
 import { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/features/reader/Reader.types.ts';
 import {
@@ -23,12 +23,12 @@ export const ReaderNavBarDesktopReadingMode = ({
    Pick<MultiValueButtonDefaultableProps<ReadingMode>, 'isDefaultable' | 'onDefault'> & {
        setReadingMode: (mode: ReadingMode) => void;
    }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    return (
        <ValueRotationButton
            {...buttonSelectInputProps}
-            tooltip={t('reader.settings.label.reading_mode')}
+            tooltip={t`Reading mode`}
            value={readingMode.isDefault ? undefined : readingMode.value}
            defaultValue={readingMode.isDefault ? readingMode.value : undefined}
            values={READING_MODE_VALUES}