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

add translation keys (#246)

Browse Source 
* Fix i18n tsc issue

"t" can return null by default.
This was already disabled in the config, but it had no effect on tsc.

* Fix translation in "DefaultNavBar"

key was missing and since this is a constant the translation wouldn't update in case the language got changed after first load.

* Enable typing for i18n translation keys

* Add translation keys
This commit is contained in:
schroda
2023-03-23 13:59:32 +01:00
committed by GitHub
parent 8c129f2e08
commit d58bd6cd92
56 changed files with 1030 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/library/LibraryOptionsPanel.tsx
View File

@@ -13,19 +13,20 @@ import ThreeStateCheckboxInput from 'components/atoms/ThreeStateCheckboxInput';
import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
import OptionsTabs from 'components/molecules/OptionsTabs';
import React from 'react';
import { LibraryOptions, LibrarySortMode } from 'typings';
import { LibraryOptions, LibrarySortMode, TranslationKey } from 'typings';
import { useTranslation } from 'react-i18next';
const TITLES = {
filter: 'Filter',
sort: 'Sort',
display: 'Display',
const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
filter: 'global.label.filter',
sort: 'global.label.sort',
display: 'global.label.display',
};
const SORT_OPTIONS: [LibrarySortMode, string][] = [
['sortToRead', 'By Unread chapters'],
['sortAlph', 'Alphabetically'],
['sortDateAdded', 'Date Added'],
['sortLastRead', 'Last Read'],
const SORT_OPTIONS: [LibrarySortMode, TranslationKey][] = [
['sortToRead', 'library.option.sort.label.by_unread_chapters'],
['sortAlph', 'library.option.sort.label.alphabetically'],
['sortDateAdded', 'library.option.sort.label.by_date_added'],
['sortLastRead', 'library.option.sort.label.by_last_read'],
];
interface IProps {
@@ -34,6 +35,7 @@ interface IProps {
}
const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
const { t } = useTranslation();
const { options, setOptions } = useLibraryOptionsContext();
const handleFilterChange = <T extends keyof LibraryOptions>(key: T, value: LibraryOptions[T]) => {
@@ -45,18 +47,18 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
open={open}
onClose={onClose}
tabs={['filter', 'sort', 'display']}
tabTitle={(key) => TITLES[key]}
tabTitle={(key) => t(TITLES[key])}
tabContent={(key) => {
if (key === 'filter') {
return (
<>
<ThreeStateCheckboxInput
label="Unread"
label={t('global.filter.label.unread')}
checked={options.unread}
onChange={(c) => handleFilterChange('unread', c)}
/>
<ThreeStateCheckboxInput
label="Downloaded"
label={t('global.filter.label.downloaded')}
checked={options.downloaded}
onChange={(c) => handleFilterChange('downloaded', c)}
/>
@@ -67,7 +69,7 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
return SORT_OPTIONS.map(([mode, label]) => (
<SortRadioInput
key={mode}
label={label}
label={t(label) as string}
checked={options.sorts === mode}
sortDescending={options.sortDesc}
onClick={() =>
@@ -82,36 +84,36 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
const { gridLayout, showDownloadBadge, showUnreadBadge } = options;
return (
<>
<FormLabel>Display mode</FormLabel>
<FormLabel>{t('global.grid_layout.title')}</FormLabel>
<RadioGroup
onChange={(e) => handleFilterChange('gridLayout', Number(e.target.value))}
value={gridLayout}
>
<RadioInput
label="Compact grid"
label={t('global.grid_layout.label.compact_grid')}
value={GridLayout.Compact}
checked={gridLayout == null || gridLayout === GridLayout.Compact}
/>
<RadioInput
label="Comfortable grid"
label={t('global.grid_layout.label.comfortable_grid')}
value={GridLayout.Comfortable}
checked={gridLayout === GridLayout.Comfortable}
/>
<RadioInput
label="List"
label={t('global.grid_layout.label.list')}
value={GridLayout.List}
checked={gridLayout === GridLayout.List}
/>
</RadioGroup>
<FormLabel sx={{ mt: 2 }}>Badges</FormLabel>
<FormLabel sx={{ mt: 2 }}>{t('library.option.display.badge.title')}</FormLabel>
<CheckboxInput
label="Unread Badges"
label={t('library.option.display.badge.label.unread_badges')}
checked={showUnreadBadge === true}
onChange={() => handleFilterChange('showUnreadBadge', !showUnreadBadge)}
/>
<CheckboxInput
label="Download Badges"
label={t('library.option.display.badge.label.download_badges')}
checked={showDownloadBadge === true}
onChange={() => handleFilterChange('showDownloadBadge', !showDownloadBadge)}
/>