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/downloads/components/DeleteChaptersWhileReadingSetting.tsx
+++ b/src/features/downloads/components/DeleteChaptersWhileReadingSetting.tsx
@@ -6,7 +6,8 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
+import { useLingui } from '@lingui/react/macro';
+import { msg } from '@lingui/core/macro';
 import {
    SelectSetting,
    SelectSettingValue,
@@ -14,33 +15,30 @@ import {
 } from '@/base/components/settings/SelectSetting.tsx';

 const CHAPTERS_TO_DELETE = [0, 1, 2, 3, 4, 5] as const;
-const CHAPTERS_TO_DELETE_TO_TRANSLATION_KEY: {
+const CHAPTERS_TO_DELETE_TO_TRANSLATION: {
    [flavor in (typeof CHAPTERS_TO_DELETE)[number]]: SelectSettingValueDisplayInfo;
 } = {
    0: {
-        text: 'global.label.disabled',
+        text: msg`Disabled`,
    },
    1: {
-        text: 'download.settings.delete_chapters.while_reading.option.label.first',
+        text: msg`Last read chapter`,
    },
    2: {
-        text: 'download.settings.delete_chapters.while_reading.option.label.second',
+        text: msg`Second to last read chapter`,
    },
    3: {
-        text: 'download.settings.delete_chapters.while_reading.option.label.third',
+        text: msg`Third to last read chapter`,
    },
    4: {
-        text: 'download.settings.delete_chapters.while_reading.option.label.fourth',
+        text: msg`Fourth to last read chapter`,
    },
    5: {
-        text: 'download.settings.delete_chapters.while_reading.option.label.fifth',
+        text: msg`Fifth to last read chapter`,
    },
 };
 const CHAPTERS_TO_DELETE_SELECT_VALUES: SelectSettingValue<(typeof CHAPTERS_TO_DELETE)[number]>[] =
-    CHAPTERS_TO_DELETE.map((chapterToDelete) => [
-        chapterToDelete,
-        CHAPTERS_TO_DELETE_TO_TRANSLATION_KEY[chapterToDelete],
-    ]);
+    CHAPTERS_TO_DELETE.map((chapterToDelete) => [chapterToDelete, CHAPTERS_TO_DELETE_TO_TRANSLATION[chapterToDelete]]);

 const getNormalizedChapterToDelete = (chapterToDelete: number | boolean) => {
    const isMigrationVersion0 = typeof chapterToDelete === 'boolean';
@@ -58,13 +56,13 @@ export const DeleteChaptersWhileReadingSetting = ({
    chapterToDelete: number;
    handleChange: (chapterToDelete: number) => void;
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    const normalizedChapterToDelete = getNormalizedChapterToDelete(chapterToDelete);

    return (
        <SelectSetting
-            settingName={t('download.settings.delete_chapters.while_reading.label.title')}
+            settingName={t`Delete finished chapters while reading`}
            value={normalizedChapterToDelete}
            values={CHAPTERS_TO_DELETE_SELECT_VALUES}
            handleChange={handleChange}
--- a/src/features/downloads/components/DownloadAheadSetting.tsx
+++ b/src/features/downloads/components/DownloadAheadSetting.tsx
@@ -6,11 +6,12 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
+import { useLingui } from '@lingui/react/macro';
+import { plural } from '@lingui/core/macro';
 import { NumberSetting } from '@/base/components/settings/NumberSetting.tsx';
 import { getPersistedServerSetting, usePersistedValue } from '@/base/hooks/usePersistedValue.tsx';
 import { updateMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
@@ -25,7 +26,7 @@ export const DownloadAheadSetting = ({
 }: {
    downloadAheadLimit: MetadataServerSettings['downloadAheadLimit'];
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    const shouldDownloadAhead = !!downloadAheadLimit;
    const [currentDownloadAheadLimit, persistDownloadAheadLimit] = usePersistedValue(
@@ -38,7 +39,7 @@ export const DownloadAheadSetting = ({
    const updateSetting = (value: MetadataDownloadSettings['downloadAheadLimit']) => {
        persistDownloadAheadLimit(value === 0 ? currentDownloadAheadLimit : value);
        updateMetadataServerSettings('downloadAheadLimit', value).catch((e) =>
-            makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
+            makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)),
        );
    };

@@ -50,14 +51,14 @@ export const DownloadAheadSetting = ({
    return (
        <List>
            <ListItem>
-                <ListItemText primary={t('download.settings.download_ahead.label.while_reading')} />
+                <ListItemText primary={t`Auto download while reading`} />
                <Switch edge="end" checked={shouldDownloadAhead} onChange={(e) => setDoAutoUpdates(e.target.checked)} />
            </ListItem>
            <NumberSetting
-                settingTitle={t('download.settings.download_ahead.label.unread_chapters_to_download')}
-                settingValue={t('download.settings.download_ahead.label.value', {
-                    chapters: currentDownloadAheadLimit,
-                    count: currentDownloadAheadLimit,
+                settingTitle={t`Number of unread chapters to download`}
+                settingValue={plural(currentDownloadAheadLimit, {
+                    one: '# Chapter',
+                    other: '# Chapters',
                })}
                value={currentDownloadAheadLimit}
                minValue={DOWNLOAD_AHEAD.min}
@@ -65,9 +66,9 @@ export const DownloadAheadSetting = ({
                defaultValue={DOWNLOAD_AHEAD.default}
                stepSize={DOWNLOAD_AHEAD.step}
                showSlider
-                dialogDescription={t('download.settings.download_ahead.label.description')}
-                dialogDisclaimer={t('download.settings.download_ahead.label.disclaimer')}
-                valueUnit={t('chapter.title_one')}
+                dialogDescription={t`How many chapters should get downloaded while reading.`}
+                dialogDisclaimer={t`Only works if the current chapter plus the next chapter are already downloaded.`}
+                valueUnit={t`Chapter`}
                handleUpdate={updateSetting}
                disabled={!shouldDownloadAhead}
            />
--- a/src/features/downloads/components/DownloadQueueChapterCard.tsx
+++ b/src/features/downloads/components/DownloadQueueChapterCard.tsx
@@ -14,7 +14,7 @@ import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import { memo, useCallback } from 'react';
 import { Link } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { ChapterDownloadRetryButton } from '@/features/chapter/components/buttons/ChapterDownloadRetryButton.tsx';
 import { DownloadStateIndicator } from '@/base/components/downloads/DownloadStateIndicator.tsx';
@@ -32,7 +32,7 @@ import { MediaQuery } from '@/base/utils/MediaQuery.tsx';

 export const DownloadQueueChapterCard = memo(
    ({ item, status }: { item: ChapterDownloadStatus; status: DownloaderState }) => {
-        const { t } = useTranslation();
+        const { t } = useLingui();
        const preventMobileContextMenu = MediaQuery.usePreventMobileContextMenu();

        const handleDelete = useCallback(
@@ -53,7 +53,7 @@ export const DownloadQueueChapterCard = memo(
                        requestManager.deleteDownloadedChapter(chapter.id).response,
                    ]);
                } catch (e) {
-                    makeToast(t('download.queue.error.label.failed_to_remove'), 'error', getErrorMessage(e));
+                    makeToast(t`Could not remove the download from the queue.`, 'error', getErrorMessage(e));
                }

                if (!isRunning) {
@@ -83,7 +83,7 @@ export const DownloadQueueChapterCard = memo(
                            <ChapterCardMetadata title={item.manga.title} secondaryText={item.chapter.name} />
                            <DownloadStateIndicator chapterId={item.chapter.id} />
                            <ChapterDownloadRetryButton chapterId={item.chapter.id} />
-                            <CustomTooltip title={t('chapter.action.download.delete.label.action')}>
+                            <CustomTooltip title={t`Delete`}>
                                <IconButton
                                    {...MUIUtil.preventRippleProp()}
                                    onClick={(e) => {
--- a/src/features/downloads/screens/DownloadQueue.tsx
+++ b/src/features/downloads/screens/DownloadQueue.tsx
@@ -11,11 +11,11 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import React, { useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
 import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { useWindowEvent } from '@mantine/hooks';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
@@ -34,9 +34,9 @@ import { ChapterDownloadStatus } from '@/features/chapter/Chapter.types.ts';
 import { VirtuosoPersisted } from '@/lib/virtuoso/Component/VirtuosoPersisted.tsx';

 export const DownloadQueue: React.FC = () => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

-    useAppTitle(t('download.title.queue'));
+    useAppTitle(t`Download queue`);

    const [reorderDownload, { reset: revertReorder }] = requestManager.useReorderChapterInDownloadQueue();

@@ -60,7 +60,7 @@ export const DownloadQueue: React.FC = () => {
        try {
            await requestManager.clearDownloads().response;
        } catch (e) {
-            makeToast(t('download.queue.error.label.failed_delete_all'), 'error', getErrorMessage(e));
+            makeToast(t`Could not remove all downloads from the queue`, 'error', getErrorMessage(e));
        }
    };

@@ -99,16 +99,13 @@ export const DownloadQueue: React.FC = () => {

    useAppAction(
        <>
-            <CustomTooltip title={t('download.queue.label.delete_all')}>
+            <CustomTooltip title={t`Delete all`}>
                <IconButton onClick={clearQueue} color="inherit">
                    <DeleteSweepIcon />
                </IconButton>
            </CustomTooltip>

-            <CustomTooltip
-                title={t(status === DownloaderState.Started ? 'global.button.stop' : 'global.button.start')}
-                disabled={isQueueEmpty}
-            >
+            <CustomTooltip title={status === DownloaderState.Started ? t`Stop` : t`Start`} disabled={isQueueEmpty}>
                <IconButton onClick={toggleQueueStatus} disabled={isQueueEmpty} color="inherit">
                    {status === DownloaderState.Stopped ? <PlayArrowIcon /> : <PauseIcon />}
                </IconButton>
@@ -135,7 +132,7 @@ export const DownloadQueue: React.FC = () => {
    if (error) {
        return (
            <EmptyViewAbsoluteCentered
-                message={t('global.error.label.failed_to_load_data')}
+                message={t`Unable to load data`}
                messageExtra={getErrorMessage(error)}
                retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadQueue::refetch'))}
            />
@@ -143,7 +140,7 @@ export const DownloadQueue: React.FC = () => {
    }

    if (isQueueEmpty) {
-        return <EmptyViewAbsoluteCentered message={t('download.queue.label.no_downloads')} />;
+        return <EmptyViewAbsoluteCentered message={t`No downloads`} />;
    }

    return (
--- a/src/features/downloads/screens/DownloadSettings.tsx
+++ b/src/features/downloads/screens/DownloadSettings.tsx
@@ -6,12 +6,13 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Switch from '@mui/material/Switch';
 import ListSubheader from '@mui/material/ListSubheader';
+import { useLingui } from '@lingui/react/macro';
+import { plural } from '@lingui/core/macro';
 import { TextSetting } from '@/base/components/settings/text/TextSetting.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { DownloadAheadSetting } from '@/features/downloads/components/DownloadAheadSetting.tsx';
@@ -47,9 +48,9 @@ type DownloadSettingsType = Pick<
 >;

 export const DownloadSettings = () => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

-    useAppTitle(t('download.title.download'));
+    useAppTitle(t`Downloads`);

    const categories = requestManager.useGetCategories<GetCategoriesSettingsQuery, GetCategoriesSettingsQueryVariables>(
        GET_CATEGORIES_SETTINGS,
@@ -71,7 +72,7 @@ export const DownloadSettings = () => {
    if (error) {
        return (
            <EmptyViewAbsoluteCentered
-                message={t('global.error.label.failed_to_load_data')}
+                message={t`Unable to load data`}
                messageExtra={getErrorMessage(error)}
                retry={() => {
                    if (serverSettings.error) {
@@ -101,28 +102,28 @@ export const DownloadSettings = () => {
        value: DownloadSettingsType[Setting],
    ): Promise<any> => {
        const mutation = mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
-        mutation.catch((e) => makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)));
+        mutation.catch((e) => makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)));

        return mutation;
    };

    const updateMetadataSetting = createUpdateMetadataServerSettings<keyof MetadataDownloadSettings>((e) =>
-        makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
+        makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)),
    );

    return (
        <List sx={{ pt: 0 }}>
            <TextSetting
-                settingName={t('download.settings.download_path.label.title')}
-                dialogDescription={t('download.settings.download_path.label.description')}
+                settingName={t`Download location`}
+                dialogDescription={t`The path to the directory on the server where downloaded files should get saved in`}
                value={downloadSettings?.downloadsPath}
                settingDescription={
-                    downloadSettings?.downloadsPath.length ? downloadSettings.downloadsPath : t('global.label.default')
+                    downloadSettings?.downloadsPath.length ? downloadSettings.downloadsPath : t`Default`
                }
                handleChange={(path) => updateSetting('downloadsPath', path)}
            />
            <ListItem>
-                <ListItemText primary={t('download.settings.file_type.label.cbz')} />
+                <ListItemText primary={t`Save as CBZ archive`} />
                <Switch
                    edge="end"
                    checked={!!downloadSettings?.downloadAsCbz}
@@ -130,17 +131,17 @@ export const DownloadSettings = () => {
                />
            </ListItem>
            <ListItemLink to={AppRoutes.settings.childRoutes.images.childRoutes.processingDownloads.path}>
-                <ListItemText primary={t('download.settings.conversion.title')} />
+                <ListItemText primary={t`Image download processing`} />
            </ListItemLink>
            <List
                subheader={
                    <ListSubheader component="div" id="download-settings-auto-delete-downloads">
-                        {t('download.settings.delete_chapters.title')}
+                        {t`Delete chapters`}
                    </ListSubheader>
                }
            >
                <ListItem>
-                    <ListItemText primary={t('download.settings.delete_chapters.label.manually_marked_as_read')} />
+                    <ListItemText primary={t`Delete chapter after manually marking it as read`} />
                    <Switch
                        edge="end"
                        checked={metadataSettings.deleteChaptersManuallyMarkedRead}
@@ -154,7 +155,7 @@ export const DownloadSettings = () => {
                    }
                />
                <ListItem>
-                    <ListItemText primary={t('download.settings.delete_chapters.label.allow_deletion_of_bookmarked')} />
+                    <ListItemText primary={t`Allow deleting bookmarked chapters`} />
                    <Switch
                        edge="end"
                        checked={metadataSettings.deleteChaptersWithBookmark}
@@ -165,12 +166,12 @@ export const DownloadSettings = () => {
            <List
                subheader={
                    <ListSubheader component="div" id="download-settings-auto-download">
-                        {t('download.settings.auto_download.title')}
+                        {t`Auto-download`}
                    </ListSubheader>
                }
            >
                <ListItem>
-                    <ListItemText primary={t('download.settings.auto_download.label.new_chapters')} />
+                    <ListItemText primary={t`Download new chapters`} />
                    <Switch
                        edge="end"
                        checked={!!downloadSettings?.autoDownloadNewChapters}
@@ -179,28 +180,28 @@ export const DownloadSettings = () => {
                </ListItem>
                <NumberSetting
                    disabled={!downloadSettings?.autoDownloadNewChapters}
-                    settingTitle={t('download.settings.auto_download.download_limit.label.title')}
-                    dialogDescription={t('download.settings.auto_download.download_limit.label.description')}
+                    settingTitle={t`Chapter download limit`}
+                    dialogDescription={t`Limit the amount of new chapters that are going to get downloaded.`}
                    value={downloadSettings?.autoDownloadNewChaptersLimit ?? 0}
                    settingValue={
                        !downloadSettings.autoDownloadNewChaptersLimit
-                            ? t('global.label.none')
-                            : t('download.settings.download_ahead.label.value', {
-                                  chapters: downloadSettings.autoDownloadNewChaptersLimit,
-                                  count: downloadSettings.autoDownloadNewChaptersLimit,
+                            ? t`None`
+                            : plural(downloadSettings.autoDownloadNewChaptersLimit, {
+                                  one: '# Chapter',
+                                  other: '# Chapters',
                              })
                    }
                    defaultValue={0}
                    minValue={0}
                    maxValue={20}
                    showSlider
-                    valueUnit={t('chapter.title_one')}
+                    valueUnit={t`Chapter`}
                    handleUpdate={(autoDownloadNewChaptersLimit) =>
                        updateSetting('autoDownloadNewChaptersLimit', autoDownloadNewChaptersLimit)
                    }
                />
                <ListItem>
-                    <ListItemText primary={t('download.settings.auto_download.label.ignore_with_unread_chapters')} />
+                    <ListItemText primary={t`Ignore automatic chapter downloads for entries with unread chapters`} />
                    <Switch
                        edge="end"
                        checked={!!downloadSettings?.excludeEntryWithUnreadChapters}
@@ -209,7 +210,7 @@ export const DownloadSettings = () => {
                    />
                </ListItem>
                <ListItem>
-                    <ListItemText primary={t('download.settings.auto_download.label.ignore_re_uploads')} />
+                    <ListItemText primary={t`Ignore re-uploaded chapters`} />
                    <Switch
                        edge="end"
                        checked={!!downloadSettings?.autoDownloadIgnoreReUploads}
@@ -220,13 +221,13 @@ export const DownloadSettings = () => {
                <CategoriesInclusionSetting
                    categories={categories.data!.categories.nodes}
                    includeField="includeInDownload"
-                    dialogText={t('download.settings.auto_download.categories.label.include_in_download')}
+                    dialogText={t`Entries in excluded categories will not be downloaded even if they are also in included categories`}
                />
            </List>
            <List
                subheader={
                    <ListSubheader component="div" id="download-settings-download-ahead">
-                        {t('download.settings.download_ahead.title')}
+                        {t`Download ahead`}
                    </ListSubheader>
                }
            >