ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate to lingui

Browse Source 
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"
This commit is contained in:
schroda
2026-01-10 19:45:02 +01:00
parent c1ac58f4d6
commit 65a9a905be
287 changed files with 120766 additions and 37748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/features/reader/settings/layout/components/ReaderSettingPageGap.tsx
View File

@@ -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 { IReaderSettings, IReaderSettingsWithDefaultFlag, ReadingMode } from '@/features/reader/Reader.types.ts';
import { SliderInput } from '@/base/components/inputs/SliderInput.tsx';
import { DEFAULT_READER_SETTINGS, PAGE_GAP } from '@/features/reader/settings/ReaderSettings.constants.tsx';
@@ -23,7 +23,7 @@ export const ReaderSettingPageGap = ({
Pick<MultiValueButtonDefaultableProps<IReaderSettings['pageGap']>, 'isDefaultable' | 'onDefault'> & {
updateSetting: (gap: number, commit: boolean) => void;
}) => {
const { t } = useTranslation();
const { t } = useLingui();
const isChangeable = readingMode.value !== ReadingMode.WEBTOON && isContinuousReadingMode(readingMode.value);
if (!isChangeable) {
@@ -32,8 +32,8 @@ export const ReaderSettingPageGap = ({
return (
<SliderInput
label={t('reader.settings.label.page_gap')}
value={t('global.value', { value: pageGap.value, unit: t('global.unit.px') })}
label={t`Page gap`}
value={`${pageGap.value}${t`px`}`}
onDefault={isDefaultable ? onDefault : undefined}
slotProps={{
slider: {

6
src/features/reader/settings/layout/components/ReaderSettingPageScaleMode.tsx
View File

@@ -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 { IReaderSettings, IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
import {
PAGE_SCALE_VALUE_TO_DISPLAY_DATA,
@@ -23,12 +23,12 @@ export const ReaderSettingPageScaleMode = ({
Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
setPageScaleMode: (mode: IReaderSettings['pageScaleMode']) => void;
}) => {
const { t } = useTranslation();
const { t } = useLingui();
return (
<ButtonSelectInput
{...buttonSelectInputProps}
label={t('reader.settings.page_scale.title')}
label={t`Scale type`}
value={pageScaleMode.isDefault ? undefined : pageScaleMode.value}
defaultValue={pageScaleMode.isDefault ? pageScaleMode.value : undefined}
values={READER_PAGE_SCALE_MODE_VALUES}

11
src/features/reader/settings/layout/components/ReaderSettingReadingDirection.tsx
View File

@@ -8,18 +8,19 @@
import ArrowCircleLeftIcon from '@mui/icons-material/ArrowCircleLeft';
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
import { useTranslation } from 'react-i18next';
import { useLingui } from '@lingui/react/macro';
import { msg } from '@lingui/core/macro';
import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
import { MultiValueButtonDefaultableProps, ValueToDisplayData } from '@/base/Base.types.ts';
import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.tsx';
const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReadingDirection> = {
[ReadingDirection.LTR]: {
title: 'reader.settings.reading_direction.ltr',
title: msg`Left to right`,
icon: <ArrowCircleRightIcon />,
},
[ReadingDirection.RTL]: {
title: 'reader.settings.reading_direction.rtl',
title: msg`Right to left`,
icon: <ArrowCircleLeftIcon />,
},
};
@@ -34,12 +35,12 @@ export const ReaderSettingReadingDirection = ({
Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
setReadingDirection: (readingDirection: ReadingDirection) => void;
}) => {
const { t } = useTranslation();
const { t } = useLingui();
return (
<ButtonSelectInput
{...buttonSelectInputProps}
label={t('reader.settings.label.reading_direction')}
label={t`Reading direction`}
value={readingDirection.isDefault ? undefined : readingDirection.value}
defaultValue={readingDirection.isDefault ? readingDirection.value : undefined}
values={READING_DIRECTION_VALUES}

6
src/features/reader/settings/layout/components/ReaderSettingReadingMode.tsx
View File

@@ -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 { IReaderSettingsWithDefaultFlag, ReadingMode } from '@/features/reader/Reader.types.ts';
import {
READING_MODE_VALUE_TO_DISPLAY_DATA,
@@ -23,12 +23,12 @@ export const ReaderSettingReadingMode = ({
Pick<MultiValueButtonDefaultableProps<ReadingMode>, 'isDefaultable' | 'onDefault'> & {
setReadingMode: (mode: ReadingMode) => void;
}) => {
const { t } = useTranslation();
const { t } = useLingui();
return (
<ButtonSelectInput
{...buttonSelectInputProps}
label={t('reader.settings.label.reading_mode')}
label={t`Reading mode`}
value={readingMode.isDefault ? undefined : readingMode.value}
defaultValue={readingMode.isDefault ? readingMode.value : undefined}
values={READING_MODE_VALUES}

6
src/features/reader/settings/layout/components/ReaderSettingStretchPage.tsx
View File

@@ -6,9 +6,9 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import { useLingui } from '@lingui/react/macro';
import { IReaderSettings } from '@/features/reader/Reader.types.ts';
import { READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED } from '@/features/reader/settings/ReaderSettings.constants.tsx';
@@ -19,7 +19,7 @@ export const ReaderSettingStretchPage = ({
}: Pick<IReaderSettings, 'pageScaleMode' | 'shouldStretchPage'> & {
setShouldStretchPage: (mode: IReaderSettings['shouldStretchPage']) => void;
}) => {
const { t } = useTranslation();
const { t } = useLingui();
if (!READER_PAGE_SCALE_MODE_TO_SCALING_ALLOWED[pageScaleMode]) {
return null;
@@ -31,7 +31,7 @@ export const ReaderSettingStretchPage = ({
onClick={() => setShouldStretchPage(!shouldStretchPage)}
variant={shouldStretchPage ? 'contained' : 'outlined'}
>
{t('reader.settings.page_scale.stretch')}
{t`Stretch small pages`}
</Button>
</Box>
);

15
src/features/reader/settings/layout/components/ReaderSettingTapZoneInvertMode.tsx
View File

@@ -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 { MultiValueButtonDefaultableProps, ValueToDisplayData } from '@/base/Base.types.ts';
import { IReaderSettings, IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
import { TapZoneInvertMode } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
@@ -21,19 +22,19 @@ enum TapZonesInvertOption {
const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<TapZonesInvertOption> = {
[TapZonesInvertOption.NONE]: {
title: 'global.label.none',
title: msg`None`,
icon: null,
},
[TapZonesInvertOption.HORIZONTAL]: {
title: 'global.label.horizontal',
title: msg`Horizontal`,
icon: null,
},
[TapZonesInvertOption.VERTICAL]: {
title: 'global.label.vertical',
title: msg`Vertical`,
icon: null,
},
[TapZonesInvertOption.BOTH]: {
title: 'global.label.both',
title: msg`Both`,
icon: null,
},
};
@@ -83,14 +84,14 @@ export const ReaderSettingTapZoneInvertMode = ({
Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
setTapZoneInvertMode: (invert: IReaderSettings['tapZoneInvertMode']) => void;
}) => {
const { t } = useTranslation();
const { t } = useLingui();
const tapZonesInvertOption = convertTapZoneInvertModeToOption(tapZoneInvertMode.value);
return (
<ButtonSelectInput
{...buttonSelectInputProps}
label={t('reader.settings.tap_zones.invert')}
label={t`Invert tap zones`}
value={tapZoneInvertMode.isDefault ? undefined : tapZonesInvertOption}
defaultValue={tapZoneInvertMode.isDefault ? tapZonesInvertOption : undefined}
values={TAP_ZONES_INVERT_OPTION_VALUES}

17
src/features/reader/settings/layout/components/ReaderSettingTapZoneLayout.tsx
View File

@@ -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 { TapZoneLayouts } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
import { MultiValueButtonDefaultableProps, ValueToDisplayData } from '@/base/Base.types.ts';
import { IReaderSettingsWithDefaultFlag, ReadingDirection } from '@/features/reader/Reader.types.ts';
@@ -14,23 +15,23 @@ import { ButtonSelectInput } from '@/base/components/inputs/ButtonSelectInput.ts
const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<TapZoneLayouts> = {
[TapZoneLayouts.EDGE]: {
title: 'reader.settings.tap_zones.edge',
title: msg`Edge`,
icon: null,
},
[TapZoneLayouts.KINDLE]: {
title: 'reader.settings.tap_zones.kindle',
title: msg`Kindle`,
icon: null,
},
[TapZoneLayouts.L_SHAPE]: {
title: 'reader.settings.tap_zones.l_shape',
title: msg`L-Shape`,
icon: null,
},
[TapZoneLayouts.RIGHT_LEFT]: {
title: 'reader.settings.tap_zones.right_left',
title: msg`Right and left`,
icon: null,
},
[TapZoneLayouts.DISABLED]: {
title: 'global.label.disabled',
title: msg`Disabled`,
icon: null,
},
};
@@ -45,12 +46,12 @@ export const ReaderSettingTapZoneLayout = ({
Pick<MultiValueButtonDefaultableProps<ReadingDirection>, 'isDefaultable' | 'onDefault'> & {
setTapZoneLayout: (layout: TapZoneLayouts) => void;
}) => {
const { t } = useTranslation();
const { t } = useLingui();
return (
<ButtonSelectInput
{...buttonSelectInputProps}
label={t('reader.settings.tap_zones.title')}
label={t`Tap zones`}
value={tapZoneLayout.isDefault ? undefined : tapZoneLayout.value}
defaultValue={tapZoneLayout.isDefault ? tapZoneLayout.value : undefined}
values={READER_TAP_ZONE_LAYOUT_VALUES}

10
src/features/reader/settings/layout/components/ReaderSettingWidth.tsx
View File

@@ -7,7 +7,7 @@
*/
import Stack from '@mui/material/Stack';
import { useTranslation } from 'react-i18next';
import { useLingui } from '@lingui/react/macro';
import { IReaderSettings } from '@/features/reader/Reader.types.ts';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
@@ -29,7 +29,7 @@ export const ReaderSettingWidth = ({
updateSetting: (...args: Parameters<typeof ReaderService.updateSetting>) => void;
setTransparent?: (transparent: boolean) => void;
}) => {
const { t } = useTranslation();
const { t } = useLingui();
if (!isReaderWidthEditable(pageScaleMode)) {
return null;
@@ -39,7 +39,7 @@ export const ReaderSettingWidth = ({
<Stack>
<Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<CheckboxInput
label={t('reader.settings.label.limit_reader_width')}
label={t`Limit reader width`}
checked={readerWidth.enabled}
onChange={(_, checked) => updateSetting('readerWidth', { ...readerWidth, enabled: checked }, true)}
/>
@@ -47,8 +47,8 @@ export const ReaderSettingWidth = ({
</Stack>
{readerWidth.enabled && (
<SliderInput
label={t('reader.settings.label.reader_width')}
value={t('global.value', { value: readerWidth.value, unit: '%' })}
label={t`Reader width`}
value={`${readerWidth.value}%`}
slotProps={{
slider: {
defaultValue: DEFAULT_READER_SETTINGS.readerWidth.value,