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

23
src/features/library/screens/Library.tsx
View File

@@ -11,10 +11,11 @@ import Tab from '@mui/material/Tab';
import { styled, useTheme } from '@mui/material/styles';
import { useCallback, useMemo, useState } from 'react';
import { useQueryParam, NumberParam, StringParam } from 'use-query-params';
import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import { Link } from 'react-router-dom';
import Box from '@mui/material/Box';
import { useLingui } from '@lingui/react/macro';
import { plural } from '@lingui/core/macro';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
@@ -59,7 +60,7 @@ const TitleSizeTag = ({ sx, ...props }: ChipProps) => (
);
export function Library() {
const { t } = useTranslation();
const { t } = useLingui();
const theme = useTheme();
const {
@@ -155,7 +156,7 @@ export function Library() {
}
return (
<SelectionFAB selectedItemsCount={selectedItemIds.length} title="manga.title">
<SelectionFAB title={plural(selectedItemIds.length, { one: '# manga', other: '# manga' })}>
{(handleClose, setHideMenu) => (
<MangaActionMenuItems
selectedMangas={selectedMangas}
@@ -181,7 +182,7 @@ export function Library() {
to={AppRoutes.sources.childRoutes.searchAll.path(query)}
sx={{ textTransform: 'none', width: '100%' }}
>
{t('library.action.label.search_globally', { query })}
{t`Search for "${query}" globally`}
</Button>
</Box>
),
@@ -190,7 +191,7 @@ export function Library() {
useAppTitle(
<TitleWithSizeTag>
{t('library.title')}
{t`Library`}
{showTabSize && (
<TitleSizeTag
sx={{ ...theme.applyStyles('light', { backgroundColor: 'background.paper' }) }}
@@ -198,7 +199,7 @@ export function Library() {
/>
)}
</TitleWithSizeTag>,
t('library.title'),
t`Library`,
[t, showTabSize, librarySize],
);
useAppAction(
@@ -240,7 +241,7 @@ export function Library() {
if (tabsError != null || librarySizeResponse.error) {
return (
<EmptyViewAbsoluteCentered
message={t('global.error.label.failed_to_load_data')}
message={t`Unable to load data`}
messageExtra={tabsError?.message ?? librarySizeResponse.error?.message}
retry={() => {
if (tabsError) {
@@ -260,7 +261,7 @@ export function Library() {
}
if (tabs.length === 0) {
return <EmptyViewAbsoluteCentered message={t('library.error.label.empty')} />;
return <EmptyViewAbsoluteCentered message={t`Your library is empty`} />;
}
if (tabs.length === 1) {
@@ -271,7 +272,7 @@ export function Library() {
// the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
key={filterKey}
mangas={mangas}
message={mangaError ? t('manga.error.label.request_failure') : t('library.error.label.empty')}
message={mangaError ? t`Could not load manga` : t`Your library is empty`}
messageExtra={mangaError?.message}
isLoading={mangaLoading}
selectedMangaIds={selectedItemIds}
@@ -310,9 +311,7 @@ export function Library() {
// the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
key={filterKey}
mangas={mangas}
message={
mangaError ? t('manga.error.label.request_failure') : t('category.error.label.empty')
}
message={mangaError ? t`Could not load manga` : t`The category is empty`}
messageExtra={mangaError?.message}
isLoading={mangaLoading}
selectedMangaIds={selectedItemIds}

10
src/features/library/screens/LibraryDuplicates.tsx
View File

@@ -6,7 +6,6 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import { useCallback, useEffect, useMemo, useState } from 'react';
import IconButton from '@mui/material/IconButton';
import SettingsIcon from '@mui/icons-material/Settings';
@@ -15,6 +14,7 @@ import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { useLingui } from '@lingui/react/macro';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { useLocalStorage } from '@/base/hooks/useStorage.tsx';
import { GridLayouts } from '@/base/components/GridLayouts.tsx';
@@ -37,7 +37,7 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { useAppTitleAndAction } from '@/features/navigation-bar/hooks/useAppTitleAndAction.ts';
export const LibraryDuplicates = () => {
const { t } = useTranslation();
const { t } = useLingui();
const [gridLayout, setGridLayout] = useLocalStorage('libraryDuplicatesGridLayout', GridLayout.List);
const [checkAlternativeTitles, setCheckAlternativeTitles] = useLocalStorage(
@@ -46,7 +46,7 @@ export const LibraryDuplicates = () => {
);
useAppTitleAndAction(
t('library.settings.advanced.duplicates.label.title'),
t`Duplicated entries`,
<>
<GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />
<PopupState variant="popover" popupId="library-dupliactes-settings">
@@ -58,7 +58,7 @@ export const LibraryDuplicates = () => {
<Menu {...bindMenu(popupState)}>
<MenuItem>
<CheckboxInput
label={t('library.settings.advanced.duplicates.settings.label.check_description')}
label={t`Check description`}
checked={checkAlternativeTitles}
onChange={(_, checked) => setCheckAlternativeTitles(checked)}
/>
@@ -130,7 +130,7 @@ export const LibraryDuplicates = () => {
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('LibraryDuplicates::refetch'))}
/>

51
src/features/library/screens/LibrarySettings.tsx
View File

@@ -6,14 +6,14 @@
* 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 ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Switch from '@mui/material/Switch';
import ListSubheader from '@mui/material/ListSubheader';
import { t as translate } from 'i18next';
import { useLingui } from '@lingui/react/macro';
import { plural, t as translate } from '@lingui/core/macro';
import { GlobalUpdateSettings } from '@/features/settings/components/globalUpdate/GlobalUpdateSettings.tsx';
import { makeToast } from '@/base/utils/Toast.ts';
import {
@@ -56,16 +56,16 @@ const removeNonLibraryMangasFromCategories = async (): Promise<void> => {
clearCategories: true,
}).response;
}
makeToast(translate('library.settings.advanced.database.cleanup.label.success'), 'success');
makeToast(translate`Removed non library manga from categories`, 'success');
} catch (e) {
makeToast(translate('library.settings.advanced.database.cleanup.label.error'), 'error', getErrorMessage(e));
makeToast(translate`Could not remove non library manga from categories`, 'error', getErrorMessage(e));
}
};
export function LibrarySettings() {
const { t } = useTranslation();
const { t } = useLingui();
useAppTitle(t('library.title'));
useAppTitle(t`Library`);
const categories = requestManager.useGetCategories<GetCategoriesSettingsQuery, GetCategoriesSettingsQueryVariables>(
GET_CATEGORIES_SETTINGS,
@@ -78,7 +78,7 @@ export function LibrarySettings() {
} = useMetadataServerSettings();
const setSettingValue = createUpdateMetadataServerSettings<keyof MetadataLibrarySettings>((e) =>
makeToast(t('search.error.label.failed_to_save_settings'), 'error', getErrorMessage(e)),
makeToast(t`Could not save the default search settings to the server`, 'error', getErrorMessage(e)),
);
// -1 for the DEFAULT category
@@ -93,7 +93,7 @@ export function LibrarySettings() {
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) {
@@ -121,20 +121,23 @@ export function LibrarySettings() {
<List
subheader={
<ListSubheader component="div" id="library-category-settings">
{t('category.title.category_other')}
{t`Categories`}
</ListSubheader>
}
>
<ListItemLink to={AppRoutes.settings.childRoutes.categories.path}>
<ListItemText
primary={t('category.dialog.title.edit_category_other')}
secondary={t('category.value', { count: categoryCount })}
primary={t`Edit categories`}
secondary={plural(categoryCount, {
one: '# category',
other: '# categories',
})}
/>
</ListItemLink>
<ListItem>
<ListItemText
primary={t('library.settings.general.add_to_library.category_selection.label.title')}
secondary={t('library.settings.general.add_to_library.category_selection.label.description')}
primary={t`Category selection dialog`}
secondary={t`Show the category selection dialog when adding a manga to the library`}
/>
<Switch
edge="end"
@@ -144,10 +147,8 @@ export function LibrarySettings() {
</ListItem>
<ListItem>
<ListItemText
primary={t('library.settings.general.remove_from_library.remove_from_categories.label.title')}
secondary={t(
'library.settings.general.remove_from_library.remove_from_categories.label.description',
)}
primary={t`Forget manga categories`}
secondary={t`Remove manga from categories when removing them from the library`}
/>
<Switch
edge="end"
@@ -159,14 +160,14 @@ export function LibrarySettings() {
<List
subheader={
<ListSubheader component="div" id="library-general-settings">
{t('global.label.general')}
{t`General`}
</ListSubheader>
}
>
<ListItem>
<ListItemText
primary={t('library.settings.general.search.ignore_filters.label.title')}
secondary={t('library.settings.general.search.ignore_filters.label.description')}
primary={t`Ignore filters when searching`}
secondary={t`Search results will include manga that do not match the current filters`}
/>
<Switch
edge="end"
@@ -182,20 +183,20 @@ export function LibrarySettings() {
<List
subheader={
<ListSubheader component="div" id="library-advanced">
{t('global.label.advanced')}
{t`Advanced`}
</ListSubheader>
}
>
<ListItemButton onClick={() => removeNonLibraryMangasFromCategories()}>
<ListItemText
primary={t('library.settings.advanced.database.cleanup.label.title')}
secondary={t('library.settings.advanced.database.cleanup.label.description')}
primary={t`Cleanup database`}
secondary={t`Remove non library manga from categories`}
/>
</ListItemButton>
<ListItemLink to={AppRoutes.settings.childRoutes.library.childRoutes.duplicates.path}>
<ListItemText
primary={t('library.settings.advanced.duplicates.label.title')}
secondary={t('library.settings.advanced.duplicates.label.description')}
primary={t`Duplicated entries`}
secondary={t`Show all duplicated entries in your library`}
/>
</ListItemLink>
</List>