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

6
src/features/library/components/LibraryMangaGrid.tsx
View File

@@ -7,7 +7,7 @@
*/
import React, { useLayoutEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useLingui } from '@lingui/react/macro';
import { IMangaGridProps, MangaGrid } from '@/features/manga/components/MangaGrid.tsx';
import { GridLayout } from '@/base/Base.types.ts';
import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
@@ -27,7 +27,7 @@ export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
messageExtra,
...gridProps
}) => {
const { t } = useTranslation();
const { t } = useLingui();
const {
settings: { gridLayout },
@@ -46,7 +46,7 @@ export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
{...gridProps}
hasNextPage={false}
loadMore={loadMoreNoop}
message={showFilteredOutMessage ? t('library.error.label.no_matches') : message}
message={showFilteredOutMessage ? t`No manga matches this filter` : message}
messageExtra={showFilteredOutMessage ? undefined : messageExtra}
gridLayout={gridLayout}
/>

75
src/features/library/components/LibraryOptionsPanel.tsx
View File

@@ -6,9 +6,11 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { MessageDescriptor } from '@lingui/core';
import FormLabel from '@mui/material/FormLabel';
import RadioGroup from '@mui/material/RadioGroup';
import { useTranslation } from 'react-i18next';
import { useLingui } from '@lingui/react/macro';
import { msg } from '@lingui/core/macro';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
import { RadioInput } from '@/base/components/inputs/RadioInput.tsx';
import { SortRadioInput } from '@/base/components/inputs/SortRadioInput.tsx';
@@ -28,23 +30,23 @@ import {
import { LibrarySortMode } from '@/features/library/Library.types.ts';
import { CategoryMetadataInfo } from '@/features/category/Category.types.ts';
import { MANGA_STATUS_TO_TRANSLATION } from '@/features/manga/Manga.constants.ts';
import { GridLayout, TranslationKey } from '@/base/Base.types.ts';
import { GridLayout } from '@/base/Base.types';
import { getErrorMessage } from '@/lib/HelperFunctions.ts';
const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
filter: 'global.label.filter',
sort: 'global.label.sort',
display: 'global.label.display',
const TITLES: { [key in 'filter' | 'sort' | 'display']: MessageDescriptor } = {
filter: msg`Filter`,
sort: msg`Sort`,
display: msg`Display`,
};
const SORT_OPTIONS: [LibrarySortMode, TranslationKey][] = [
['unreadChapters', 'library.option.sort.label.by_unread_chapters'],
['totalChapters', 'library.option.sort.label.by_total_chapters'],
['alphabetically', 'library.option.sort.label.alphabetically'],
['dateAdded', 'library.option.sort.label.by_date_added'],
['lastRead', 'library.option.sort.label.by_last_read'],
['latestFetchedChapter', 'library.option.sort.label.by_latest_fetched_chapter'],
['latestUploadedChapter', 'library.option.sort.label.by_latest_uploaded_chapter'],
const SORT_OPTIONS: [LibrarySortMode, MessageDescriptor][] = [
['unreadChapters', msg`Unread chapters`],
['totalChapters', msg`Total chapters`],
['alphabetically', msg`A-Z`],
['dateAdded', msg`Recently added`],
['lastRead', msg`Recently read`],
['latestFetchedChapter', msg`Latest fetched chapter`],
['latestUploadedChapter', msg`Latest uploaded chapter`],
];
export const LibraryOptionsPanel = ({
@@ -56,21 +58,21 @@ export const LibraryOptionsPanel = ({
open: boolean;
onClose: () => void;
}) => {
const { t } = useTranslation();
const { t } = useLingui();
const trackerList = requestManager.useGetTrackerList<GetTrackersSettingsQuery>(GET_TRACKERS_SETTINGS);
const loggedInTrackers = Trackers.getLoggedIn(trackerList.data?.trackers.nodes ?? []);
const categoryLibraryOptions = useGetCategoryMetadata(category);
const updateCategoryLibraryOptions = createUpdateCategoryMetadata(category, (e) =>
makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)),
);
const {
settings: { showTabSize, showContinueReadingButton, showDownloadBadge, showUnreadBadge, gridLayout },
} = useMetadataServerSettings();
const setSettingValue = createUpdateMetadataServerSettings((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)),
);
return (
@@ -84,31 +86,31 @@ export const LibraryOptionsPanel = ({
return (
<>
<ThreeStateCheckboxInput
label={t('global.filter.label.unread')}
label={t`Unread`}
checked={categoryLibraryOptions.hasUnreadChapters}
onChange={(c) => updateCategoryLibraryOptions('hasUnreadChapters', c)}
/>
<ThreeStateCheckboxInput
label={t('global.filter.label.started')}
label={t`Started`}
checked={categoryLibraryOptions.hasReadChapters}
onChange={(c) => updateCategoryLibraryOptions('hasReadChapters', c)}
/>
<ThreeStateCheckboxInput
label={t('global.filter.label.downloaded')}
label={t`Downloaded`}
checked={categoryLibraryOptions.hasDownloadedChapters}
onChange={(c) => updateCategoryLibraryOptions('hasDownloadedChapters', c)}
/>
<ThreeStateCheckboxInput
label={t('global.filter.label.bookmarked')}
label={t`Bookmarked`}
checked={categoryLibraryOptions.hasBookmarkedChapters}
onChange={(c) => updateCategoryLibraryOptions('hasBookmarkedChapters', c)}
/>
<ThreeStateCheckboxInput
label={t('global.filter.label.duplicate_chapters')}
label={t`Duplicate chapters`}
checked={categoryLibraryOptions.hasDuplicateChapters}
onChange={(c) => updateCategoryLibraryOptions('hasDuplicateChapters', c)}
/>
<FormLabel sx={{ mt: 2 }}>{t('manga.label.status')}</FormLabel>
<FormLabel sx={{ mt: 2 }}>{t`Status`}</FormLabel>
{Object.values(MangaStatus).map((status) => (
<ThreeStateCheckboxInput
key={status}
@@ -122,7 +124,7 @@ export const LibraryOptionsPanel = ({
}
/>
))}
<FormLabel sx={{ mt: 2 }}>{t('global.filter.label.tracked')}</FormLabel>
<FormLabel sx={{ mt: 2 }}>{t`Tracked`}</FormLabel>
{loggedInTrackers.map((tracker) => (
<ThreeStateCheckboxInput
key={tracker.id}
@@ -157,50 +159,47 @@ export const LibraryOptionsPanel = ({
if (key === 'display') {
return (
<>
<FormLabel>{t('global.grid_layout.title')}</FormLabel>
<FormLabel>{t`Display mode`}</FormLabel>
<RadioGroup
onChange={(e) => updateMetadataServerSettings('gridLayout', Number(e.target.value))}
value={gridLayout}
>
<RadioInput
label={t('global.grid_layout.label.compact_grid')}
label={t`Compact grid`}
value={GridLayout.Compact}
checked={gridLayout == null || gridLayout === GridLayout.Compact}
/>
<RadioInput
label={t('global.grid_layout.label.comfortable_grid')}
label={t`Comfortable grid`}
value={GridLayout.Comfortable}
checked={gridLayout === GridLayout.Comfortable}
/>
<RadioInput
label={t('global.grid_layout.label.list')}
label={t`List`}
value={GridLayout.List}
checked={gridLayout === GridLayout.List}
/>
</RadioGroup>
<FormLabel sx={{ mt: 2 }}>{t('library.option.display.badge.title')}</FormLabel>
<FormLabel sx={{ mt: 2 }}>{t`Badges`}</FormLabel>
<CheckboxInput
label={t('library.option.display.badge.label.unread_badges')}
label={t`Unread badges`}
checked={showUnreadBadge}
onChange={() => updateMetadataServerSettings('showUnreadBadge', !showUnreadBadge)}
/>
<CheckboxInput
label={t('library.option.display.badge.label.download_badges')}
label={t`Download badges`}
checked={showDownloadBadge}
onChange={() => updateMetadataServerSettings('showDownloadBadge', !showDownloadBadge)}
/>
<FormLabel sx={{ mt: 2 }}>{t('library.option.display.tab.title')}</FormLabel>
<FormLabel sx={{ mt: 2 }}>{t`Tabs`}</FormLabel>
<CheckboxInput
label={t('library.option.display.tab.label.show_number_of_items')}
label={t`Show number of items`}
checked={showTabSize}
onChange={() => setSettingValue('showTabSize', !showTabSize)}
/>
<FormLabel sx={{ mt: 2 }}>{t('global.label.other')}</FormLabel>
<FormLabel sx={{ mt: 2 }}>{t`Other`}</FormLabel>
<CheckboxInput
label={t('library.option.display.other.label.show_continue_reading_button')}
label={t`Show continue reading button`}
checked={showContinueReadingButton}
onChange={() =>
updateMetadataServerSettings(

6
src/features/library/components/LibraryToolbarMenu.tsx
View File

@@ -9,7 +9,7 @@
import FilterList from '@mui/icons-material/FilterList';
import IconButton from '@mui/material/IconButton';
import { ComponentProps, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLingui } from '@lingui/react/macro';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import { LibraryOptionsPanel } from '@/features/library/components/LibraryOptionsPanel.tsx';
import { getCategoryMetadata } from '@/features/category/services/CategoryMetadata.ts';
@@ -19,7 +19,7 @@ export const LibraryToolbarMenu = ({
}: {
category: ComponentProps<typeof LibraryOptionsPanel>['category'];
}) => {
const { t } = useTranslation();
const { t } = useLingui();
const [open, setOpen] = useState(false);
const options = getCategoryMetadata(category);
@@ -34,7 +34,7 @@ export const LibraryToolbarMenu = ({
return (
<>
<CustomTooltip title={t('settings.title')}>
<CustomTooltip title={t`Settings`}>
<IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'inherit'}>
<FilterList />
</IconButton>

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>