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

-import { useTranslation } from 'react-i18next';
+import { useLingui } from '@lingui/react/macro';
 import { TextSetting } from '@/base/components/settings/text/TextSetting.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';

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

    const [serverAddress, setServerAddress] = requestManager.useBaseUrl();

@@ -23,7 +23,7 @@ export const ServerAddressSetting = () => {

    return (
        <TextSetting
-            settingName={t('settings.about.server.label.address')}
+            settingName={t`Server address`}
            handleChange={handleServerAddressChange}
            value={serverAddress}
            placeholder="http://localhost:4567"
--- a/src/features/settings/components/globalUpdate/GlobalUpdateSettings.tsx
+++ b/src/features/settings/components/globalUpdate/GlobalUpdateSettings.tsx
@@ -8,10 +8,10 @@

 import List from '@mui/material/List';
 import ListSubheader from '@mui/material/ListSubheader';
-import { useTranslation } from 'react-i18next';
 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 {
    CategoriesInclusionSetting,
    CategoriesInclusionSettingProps,
@@ -30,7 +30,7 @@ export const GlobalUpdateSettings = ({
    serverSettings: ServerSettings;
    categories: CategoriesInclusionSettingProps['categories'];
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    const { updateMangas } = serverSettings;
    const [mutateSettings] = requestManager.useUpdateServerSettings();
@@ -42,7 +42,7 @@ export const GlobalUpdateSettings = ({
        try {
            await mutateSettings({ variables: { input: { settings: { [setting]: 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,7 +50,7 @@ export const GlobalUpdateSettings = ({
        <List
            subheader={
                <ListSubheader component="div" id="global-update-settings">
-                    {t('library.settings.global_update.title')}
+                    {t`Global update`}
                </ListSubheader>
            }
        >
@@ -59,12 +59,12 @@ export const GlobalUpdateSettings = ({
            <CategoriesInclusionSetting
                categories={categories}
                includeField="includeInUpdate"
-                dialogText={t('library.settings.global_update.categories.label.info')}
+                dialogText={t`Entries in excluded categories will not be updated even if they are also in included categories`}
            />
            <ListItem>
                <ListItemText
-                    primary={t('library.settings.global_update.metadata.label.title')}
-                    secondary={t('library.settings.global_update.metadata.label.description')}
+                    primary={t`Automatically refresh metadata`}
+                    secondary={t`Check for new cover and details when updating library`}
                />
                <Switch
                    edge="end"
--- a/src/features/settings/components/globalUpdate/GlobalUpdateSettingsEntries.tsx
+++ b/src/features/settings/components/globalUpdate/GlobalUpdateSettingsEntries.tsx
@@ -6,8 +6,6 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { t as translate } from 'i18next';
-import { useTranslation } from 'react-i18next';
 import { useEffect, useState } from 'react';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
@@ -16,6 +14,8 @@ import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
+import { useLingui } from '@lingui/react/macro';
+import { t as translate } from '@lingui/core/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { CheckboxContainer } from '@/base/components/inputs/CheckboxContainer.ts';
@@ -28,20 +28,20 @@ const getSkipMangasText = (settings: GlobalUpdateSkipEntriesSettings) => {
    const skipSettings: string[] = [];

    if (settings.excludeUnreadChapters) {
-        skipSettings.push(translate(GLOBAL_UPDATE_SKIP_ENTRIES_TO_TRANSLATION.excludeUnreadChapters) as string);
+        skipSettings.push(translate(GLOBAL_UPDATE_SKIP_ENTRIES_TO_TRANSLATION.excludeUnreadChapters));
    }

    if (settings.excludeNotStarted) {
-        skipSettings.push(translate(GLOBAL_UPDATE_SKIP_ENTRIES_TO_TRANSLATION.excludeNotStarted) as string);
+        skipSettings.push(translate(GLOBAL_UPDATE_SKIP_ENTRIES_TO_TRANSLATION.excludeNotStarted));
    }

    if (settings.excludeCompleted) {
-        skipSettings.push(translate(GLOBAL_UPDATE_SKIP_ENTRIES_TO_TRANSLATION.excludeCompleted) as string);
+        skipSettings.push(translate(GLOBAL_UPDATE_SKIP_ENTRIES_TO_TRANSLATION.excludeCompleted));
    }

    const isNothingExcluded = !skipSettings.length;
    if (isNothingExcluded) {
-        skipSettings.push(translate('global.label.none'));
+        skipSettings.push(translate`None`);
    }

    return skipSettings.join(', ');
@@ -54,7 +54,7 @@ const extractSkipEntriesSettings = (serverSettings: ServerSettings): GlobalUpdat
 });

 export const GlobalUpdateSettingsEntries = ({ serverSettings }: { serverSettings: ServerSettings }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    const globalUpdateSettings = extractSkipEntriesSettings(serverSettings);
    const [mutateSettings] = requestManager.useUpdateServerSettings();
@@ -81,7 +81,7 @@ export const GlobalUpdateSettingsEntries = ({ serverSettings }: { serverSettings
        try {
            await mutateSettings({ variables: { input: { settings: dialogSettings } } });
        } catch (e) {
-            makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e));
+            makeToast(t`Failed to save changes`, 'error', getErrorMessage(e));
        }
    };

@@ -106,14 +106,13 @@ export const GlobalUpdateSettingsEntries = ({ serverSettings }: { serverSettings
        <>
            <ListItemButton onClick={() => setIsDialogOpen(true)}>
                <ListItemText
-                    primary={t('library.settings.global_update.entries.title')}
+                    primary={t`Skip updating entries`}
                    secondary={skipEntriesText}
                    onClick={() => setIsDialogOpen(true)}
                />
            </ListItemButton>
-
            <Dialog open={isDialogOpen} onClose={closeDialog}>
-                <DialogTitle>{t('library.settings.global_update.entries.title')}</DialogTitle>
+                <DialogTitle>{t`Skip updating entries`}</DialogTitle>
                <DialogContent>
                    <CheckboxContainer>
                        {Object.entries(dialogSettings).map(([setting, value]) => (
@@ -137,10 +136,10 @@ export const GlobalUpdateSettingsEntries = ({ serverSettings }: { serverSettings
                </DialogContent>
                <DialogActions>
                    <Button onClick={closeDialog} color="primary">
-                        {t('global.button.cancel')}
+                        {t`Cancel`}
                    </Button>
                    <Button onClick={updateSettings} color="primary">
-                        {t('global.button.ok')}
+                        {t`Ok`}
                    </Button>
                </DialogActions>
            </Dialog>
--- a/src/features/settings/components/globalUpdate/GlobalUpdateSettingsInterval.tsx
+++ b/src/features/settings/components/globalUpdate/GlobalUpdateSettingsInterval.tsx
@@ -6,17 +6,17 @@
 * 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 { useCallback } from 'react';
+import { useLingui } from '@lingui/react/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/base/components/settings/NumberSetting.tsx';
 import { getPersistedServerSetting, usePersistedValue } from '@/base/hooks/usePersistedValue.tsx';
-
 import { ServerSettings } from '@/features/settings/Settings.types.ts';
+
 import { GLOBAL_UPDATE_INTERVAL } from '@/features/settings/Settings.constants.ts';

 export const GlobalUpdateSettingsInterval = ({
@@ -24,7 +24,7 @@ export const GlobalUpdateSettingsInterval = ({
 }: {
    globalUpdateInterval: ServerSettings['globalUpdateInterval'];
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    const autoUpdateIntervalHours = globalUpdateInterval;
    const doAutoUpdates = !!autoUpdateIntervalHours;
@@ -54,20 +54,18 @@ export const GlobalUpdateSettingsInterval = ({
    return (
        <List>
            <ListItem>
-                <ListItemText primary={t('library.settings.global_update.auto_update.label.title')} />
+                <ListItemText primary={t`Automatic updates`} />
                <Switch edge="end" checked={doAutoUpdates} onChange={(e) => setDoAutoUpdates(e.target.checked)} />
            </ListItem>
            <NumberSetting
-                settingTitle={t('library.settings.global_update.auto_update.interval.label.title')}
-                settingValue={t('library.settings.global_update.auto_update.interval.label.value', {
-                    hours: currentAutoUpdateIntervalHours,
-                })}
+                settingTitle={t`Automatic update interval`}
+                settingValue={t`${currentAutoUpdateIntervalHours}h`}
                value={currentAutoUpdateIntervalHours}
                minValue={GLOBAL_UPDATE_INTERVAL.min}
                maxValue={GLOBAL_UPDATE_INTERVAL.max}
                defaultValue={GLOBAL_UPDATE_INTERVAL.default}
                showSlider
-                valueUnit={t('global.time.hour_short')}
+                valueUnit={t`h`}
                handleUpdate={updateSetting}
                disabled={!doAutoUpdates}
            />
--- a/src/features/settings/components/images/KeyValueItem.tsx
+++ b/src/features/settings/components/images/KeyValueItem.tsx
@@ -6,12 +6,12 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
 import TextField from '@mui/material/TextField';
 import Stack from '@mui/material/Stack';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/material/styles';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { IMAGE_PROCESSING_INPUT_WIDTH } from '@/features/settings/Settings.constants.ts';
 import { TSettingsDownloadConversionKeyValueItem } from '@/features/settings/Settings.types';
@@ -26,7 +26,7 @@ export const KeyValueItem = ({
    isDuplicate: boolean;
    onChange: (header: TSettingsDownloadConversionKeyValueItem | null) => void;
 } & TSettingsDownloadConversionKeyValueItem) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
    const theme = useTheme();

    return (
@@ -51,10 +51,10 @@ export const KeyValueItem = ({
                <TextField
                    autoFocus
                    sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
-                    label={t('download.settings.conversion.headers.name')}
+                    label={t`Name`}
                    value={name}
                    error={isDuplicate}
-                    helperText={isDuplicate && t('global.error.label.invalid_input')}
+                    helperText={isDuplicate && t`Invalid input`}
                    onChange={(e) =>
                        onChange({
                            id,
@@ -65,7 +65,7 @@ export const KeyValueItem = ({
                />
                <TextField
                    sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
-                    label={t('download.settings.conversion.headers.value')}
+                    label={t`Value`}
                    value={value}
                    onChange={(e) =>
                        onChange({
@@ -76,7 +76,7 @@ export const KeyValueItem = ({
                    }
                />
            </Stack>
-            <CustomTooltip disabled={false} title={t('chapter.action.download.delete.label.action')}>
+            <CustomTooltip disabled={false} title={t`Delete`}>
                <IconButton
                    onClick={() => {
                        onChange(null);
--- a/src/features/settings/components/images/KeyValueItems.tsx
+++ b/src/features/settings/components/images/KeyValueItems.tsx
@@ -6,11 +6,11 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
+import { useLingui } from '@lingui/react/macro';
 import { Maybe } from '@/lib/graphql/generated/graphql.ts';
 import { addStableIdToKeyValueItems, isDuplicateKeyValueItem } from '@/features/settings/ImageProcessing.utils.ts';
 import { KeyValueItem } from '@/features/settings/components/images/KeyValueItem.tsx';
@@ -27,7 +27,7 @@ export const KeyValueItems = ({
    items: Maybe<TSettingsDownloadConversionKeyValueItem[] | undefined>;
    onChange: (items: Maybe<TSettingsDownloadConversionKeyValueItem[]>) => void;
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    return (
        <Collapse in={open}>
@@ -56,7 +56,7 @@ export const KeyValueItems = ({
                    variant="contained"
                    sx={{ width: 'fit-content' }}
                >
-                    {t('global.button.add')}
+                    {t`Add`}
                </Button>
            </Stack>
        </Collapse>
--- a/src/features/settings/components/images/MimeTypeTextField.tsx
+++ b/src/features/settings/components/images/MimeTypeTextField.tsx
@@ -6,9 +6,9 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
 import TextField from '@mui/material/TextField';
 import InputAdornment from '@mui/material/InputAdornment';
+import { useLingui } from '@lingui/react/macro';
 import { ImageProcessingTargetMode } from '@/features/settings/Settings.types.ts';
 import { IMAGE_PROCESSING_INPUT_WIDTH, MIME_TYPE_PREFIX } from '@/features/settings/Settings.constants.ts';
 import { isUrlTargetMode } from '@/features/settings/ImageProcessing.utils.ts';
@@ -30,7 +30,7 @@ export const MimeTypeTextField = ({
    onUpdate: (value: string) => void;
    mode: ImageProcessingTargetMode;
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    const isImageMode = mode === ImageProcessingTargetMode.IMAGE;
    const isValidUrl = !value.length || isUrlTargetMode(value);
@@ -44,7 +44,7 @@ export const MimeTypeTextField = ({
            value={value}
            disabled={isDefault}
            error={!isValid}
-            helperText={!isValid && t('global.error.label.invalid_input')}
+            helperText={!isValid && t`Invalid input`}
            slotProps={{
                input: {
                    startAdornment: (
--- a/src/features/settings/components/images/Processing.tsx
+++ b/src/features/settings/components/images/Processing.tsx
@@ -6,7 +6,6 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
 import TextField from '@mui/material/TextField';
 import Stack from '@mui/material/Stack';
@@ -20,9 +19,10 @@ import InputLabel from '@mui/material/InputLabel';
 import FormControl from '@mui/material/FormControl';
 import { d } from 'koration';
 import { useElementSize } from '@mantine/hooks';
+import { useLingui } from '@lingui/react/macro';
+import { MessageDescriptor } from '@lingui/core';
 import { KeyValueItems } from '@/features/settings/components/images/KeyValueItems.tsx';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
-import { TranslationKey } from '@/base/Base.types.ts';
 import {
    IMAGE_PROCESSING_CALL_TIMEOUT,
    IMAGE_PROCESSING_COMPRESSION,
@@ -55,7 +55,7 @@ export const Processing = ({
    onChange: (newConversion: TSettingsDownloadConversion | null) => void;
    isDuplicate: boolean;
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
    const theme = useTheme();

    const { ref: textFieldRef, height: textFieldHeight } = useElementSize();
@@ -101,7 +101,7 @@ export const Processing = ({
                        shouldAutoFocus
                        isDefault={isDefault}
                        isDuplicate={isDuplicate}
-                        label={t('download.settings.conversion.mime_type')}
+                        label={t`MIME-Type`}
                        value={mimeType}
                        onUpdate={(value) => {
                            onChange({
@@ -118,14 +118,12 @@ export const Processing = ({
                        →
                    </TypographyMaxLines>
                    <FormControl sx={{ minWidth: '100px' }}>
-                        <InputLabel id="image-conversion-target-mode-label">
-                            {t('download.settings.conversion.target_modes.title')}
-                        </InputLabel>
+                        <InputLabel id="image-conversion-target-mode-label">{t`Target mode`}</InputLabel>
                        <Select
                            ref={textFieldRef}
                            id="image-conversion-target-mode"
                            labelId="image-conversion-target-mode-label"
-                            label={t('download.settings.conversion.target_modes.title')}
+                            label={t`Target mode`}
                            value={mode}
                            onChange={(e) => {
                                if (!isUrlMode) {
@@ -145,7 +143,7 @@ export const Processing = ({
                        >
                            {IMAGE_PROCESSING_TARGET_MODES_SELECT_VALUES.map(([selectValue, { text: selectText }]) => (
                                <MenuItem key={selectValue} value={selectValue}>
-                                    {t(selectText as TranslationKey)}
+                                    {t(selectText as MessageDescriptor)}
                                </MenuItem>
                            ))}
                        </Select>
@@ -156,7 +154,7 @@ export const Processing = ({
                            shouldAutoFocus={false}
                            isDefault={false}
                            isDuplicate={false}
-                            label={t('download.settings.conversion.target')}
+                            label={t`MIME-Type target`}
                            value={target}
                            onUpdate={(value) => {
                                onChange({
@@ -176,11 +174,11 @@ export const Processing = ({
                            return (
                                <TextField
                                    sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
-                                    label={t('download.settings.conversion.compression_level')}
+                                    label={t`Compression level`}
                                    value={compressionLevel ?? ''}
                                    type="number"
                                    error={!isCompressionLevelValid}
-                                    helperText={!isCompressionLevelValid ? t('global.error.label.invalid_input') : ''}
+                                    helperText={!isCompressionLevelValid ? t`Invalid input` : ''}
                                    slotProps={{
                                        input: {
                                            inputProps: IMAGE_PROCESSING_COMPRESSION,
@@ -200,19 +198,15 @@ export const Processing = ({
                            <>
                                <TextField
                                    sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
-                                    label={t('download.settings.conversion.call_timeout')}
+                                    label={t`Call timeout`}
                                    value={callTimeout ? d(callTimeout).seconds.inWholeSeconds : ''}
                                    type="number"
                                    error={!isCallTimeoutValid}
-                                    helperText={!isCallTimeoutValid ? t('global.error.label.invalid_input') : ''}
+                                    helperText={!isCallTimeoutValid ? t`Invalid input` : ''}
                                    slotProps={{
                                        input: {
                                            inputProps: IMAGE_PROCESSING_CALL_TIMEOUT,
-                                            endAdornment: (
-                                                <InputAdornment position="end">
-                                                    {t('global.date.label.second_other')}
-                                                </InputAdornment>
-                                            ),
+                                            endAdornment: <InputAdornment position="end">{t`Second`}</InputAdornment>,
                                        },
                                    }}
                                    onChange={(e) => {
@@ -226,19 +220,15 @@ export const Processing = ({
                                />
                                <TextField
                                    sx={{ width: IMAGE_PROCESSING_INPUT_WIDTH }}
-                                    label={t('download.settings.conversion.connect_timeout')}
+                                    label={t`Connect timeout`}
                                    value={connectTimeout ? d(connectTimeout).seconds.inWholeSeconds : ''}
                                    type="number"
                                    error={!isConnectTimeoutValid}
-                                    helperText={!isConnectTimeoutValid ? t('global.error.label.invalid_input') : ''}
+                                    helperText={!isConnectTimeoutValid ? t`Invalid input` : ''}
                                    slotProps={{
                                        input: {
                                            inputProps: IMAGE_PROCESSING_CONNECT_TIMEOUT,
-                                            endAdornment: (
-                                                <InputAdornment position="end">
-                                                    {t('global.date.label.second_other')}
-                                                </InputAdornment>
-                                            ),
+                                            endAdornment: <InputAdornment position="end">{t`Second`}</InputAdornment>,
                                        },
                                    }}
                                    onChange={(e) => {
@@ -256,24 +246,20 @@ export const Processing = ({
                                    variant={areSearchParamsCollapsed ? 'outlined' : 'contained'}
                                    sx={{ height: textFieldHeight }}
                                >
-                                    {t('download.settings.conversion.search_params.button', {
-                                        count: searchParams?.length ?? 0,
-                                    })}
+                                    {t`Search parameters (${searchParams?.length ?? 0})`}
                                </Button>
                                <Button
                                    onClick={() => setAreHeadersCollapsed(!areHeadersCollapsed)}
                                    variant={areHeadersCollapsed ? 'outlined' : 'contained'}
                                    sx={{ height: textFieldHeight }}
                                >
-                                    {t('download.settings.conversion.headers.button', {
-                                        count: headers?.length ?? 0,
-                                    })}
+                                    {t`Headers (${headers?.length ?? 0})`}
                                </Button>
                            </>
                        );
                    })()}
                </Stack>
-                <CustomTooltip disabled={isDisabled} title={t('chapter.action.download.delete.label.action')}>
+                <CustomTooltip disabled={isDisabled} title={t`Delete`}>
                    <IconButton
                        disabled={isDisabled}
                        onClick={() => {
@@ -285,7 +271,7 @@ export const Processing = ({
                </CustomTooltip>
            </Stack>
            <KeyValueItems
-                title={t('download.settings.conversion.search_params.title')}
+                title={t`Search parameters`}
                open={isUrlMode && !areSearchParamsCollapsed}
                items={searchParams}
                onChange={(params) => {
@@ -300,7 +286,7 @@ export const Processing = ({
                }}
            />
            <KeyValueItems
-                title={t('download.settings.conversion.headers.title')}
+                title={t`Headers`}
                open={isUrlMode && !areHeadersCollapsed}
                items={headers}
                onChange={(updatedHeaders) =>
--- a/src/features/settings/components/koreaderSync/KoreaderSyncSettings.tsx
+++ b/src/features/settings/components/koreaderSync/KoreaderSyncSettings.tsx
@@ -6,12 +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 ListSubheader from '@mui/material/ListSubheader';
 import ListItemText from '@mui/material/ListItemText';
-
 import ListItemButton from '@mui/material/ListItemButton';
+
+import { useLingui } from '@lingui/react/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { SelectSetting } from '@/base/components/settings/SelectSetting.tsx';
 import { NumberSetting } from '@/base/components/settings/NumberSetting.tsx';
@@ -51,15 +51,13 @@ export const KoreaderSyncSettings = ({
        onCompletion?: (success: boolean) => void,
    ) => Promise<void>;
 } & Omit<KoSyncStatusPayload, '__typename'>) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    const handleLogout = async () => {
        const { data } = await requestManager.koSyncLogout().response;

        if (data?.logoutKoSyncAccount.status.isLoggedIn) {
-            throw new Error(
-                t('tracking.action.logout.label.failure', { name: t('settings.server.koreader.sync.title') }),
-            );
+            throw new Error(t`Could not log out from KOReader Sync`);
        }
    };

@@ -67,7 +65,7 @@ export const KoreaderSyncSettings = ({
        const { data } = await requestManager.koSyncLogin(serverAddress, username, password).response;

        if (!data?.connectKoSyncAccount.status.isLoggedIn) {
-            throw new Error(data?.connectKoSyncAccount.message ?? t('global.label.unknown'));
+            throw new Error(data?.connectKoSyncAccount.message ?? t`Unknown`);
        }
    };

@@ -78,20 +76,8 @@ export const KoreaderSyncSettings = ({
    ) => {
        const controlled = CredentialsLogin.showControlled(
            {
-                title: t(
-                    isLoggedIn
-                        ? 'settings.server.koreader.sync.connection.disconnect'
-                        : 'settings.server.koreader.sync.connection.connect',
-                    {
-                        name: t('settings.server.koreader.sync.title'),
-                    },
-                ),
-                description: isLoggedIn
-                    ? t('settings.server.koreader.sync.connection.connected', {
-                          username: initialUsername,
-                          serverAddress: initialServerAddress,
-                      })
-                    : undefined,
+                title: isLoggedIn ? t`Disconnect from KOReader Sync server` : t`Connect to KOReader Sync server`,
+                description: isLoggedIn ? t`Connected as ${initialUsername} to ${initialServerAddress}` : undefined,
                isLoading: false,
                isLoggedIn,
                withServerAddress: true,
@@ -107,11 +93,7 @@ export const KoreaderSyncSettings = ({

                            controlled.submit();
                        } catch (e) {
-                            makeToast(
-                                t('settings.server.koreader.sync.connection.message.disconnect_error'),
-                                'error',
-                                getErrorMessage(e),
-                            );
+                            makeToast(t`Failed to disconnect from KOReader Sync server.`, 'error', getErrorMessage(e));
                        }

                        return;
@@ -123,11 +105,7 @@ export const KoreaderSyncSettings = ({

                        controlled.submit();
                    } catch (e) {
-                        makeToast(
-                            t('settings.server.koreader.sync.connection.message.connect_error'),
-                            'error',
-                            getErrorMessage(e),
-                        );
+                        makeToast(t`Failed to connect to KOReader Sync server.`, 'error', getErrorMessage(e));

                        const RETRY_KEY = '__retry__';
                        const retry = await Promise.race([controlled.promise, Promise.resolve(RETRY_KEY)]);
@@ -145,7 +123,7 @@ export const KoreaderSyncSettings = ({
        <List
            subheader={
                <ListSubheader component="div" id="koreader-sync-settings">
-                    {t('settings.server.koreader.sync.title')}
+                    {t`KOReader Sync`}
                </ListSubheader>
            }
        >
@@ -153,42 +131,33 @@ export const KoreaderSyncSettings = ({
                onClick={() => handleLoginLogout(currentServerAddress ?? undefined, currentUsername ?? undefined)}
            >
                <ListItemText
-                    primary={t('settings.server.koreader.sync.connection.status')}
+                    primary={t`Sync status`}
                    secondary={
-                        isLoggedIn
-                            ? t('settings.server.koreader.sync.connection.connected', {
-                                  username: currentUsername,
-                                  serverAddress: currentServerAddress,
-                              })
-                            : t('settings.server.koreader.sync.connection.disconnected')
+                        isLoggedIn ? t`Connected as ${currentUsername} to ${currentServerAddress}` : t`Disconnected`
                    }
                />
            </ListItemButton>
-
            <SelectSetting<KoreaderSyncConflictStrategy>
-                settingName={t('settings.server.koreader.sync.strategy.forward_title')}
+                settingName={t`Sync to a newer state`}
                value={koreaderSyncStrategyForward}
                values={KOREADER_SYNC_CONFLICT_STRATEGY_SELECT_VALUES}
                handleChange={(value) => updateSetting('koreaderSyncStrategyForward', value)}
            />
-
            <SelectSetting<KoreaderSyncConflictStrategy>
-                settingName={t('settings.server.koreader.sync.strategy.backward_title')}
+                settingName={t`Sync to an older state`}
                value={koreaderSyncStrategyBackward}
                values={KOREADER_SYNC_CONFLICT_STRATEGY_SELECT_VALUES}
                handleChange={(value) => updateSetting('koreaderSyncStrategyBackward', value)}
            />
-
            <SelectSetting<KoreaderSyncChecksumMethod>
-                settingName={t('settings.server.koreader.sync.check_sum_method.title')}
+                settingName={t`Document matching method`}
                value={koreaderSyncChecksumMethod}
                values={KOREADER_SYNC_CHECKSUM_METHOD_SELECT_VALUES}
                handleChange={(value) => updateSetting('koreaderSyncChecksumMethod', value)}
            />
-
            <NumberSetting
-                settingTitle={t('settings.server.koreader.sync.tolerance.title')}
-                dialogDescription={t('settings.server.koreader.sync.tolerance.description')}
+                settingTitle={t`Percentage Tolerance`}
+                dialogDescription={t`Sync will not be triggered if the progress difference is within this tolerance.`}
                settingValue={koreaderSyncPercentageTolerance.toString()}
                value={koreaderSyncPercentageTolerance}
                defaultValue={KOREADER_SYNC_PERCENTAGE_TOLERANCE.default}
--- a/src/features/settings/components/webUI/WebUIUpdateIntervalSetting.tsx
+++ b/src/features/settings/components/webUI/WebUIUpdateIntervalSetting.tsx
@@ -6,12 +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 { useCallback } from 'react';
+import { useLingui } from '@lingui/react/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { NumberSetting } from '@/base/components/settings/NumberSetting.tsx';
 import { getPersistedServerSetting, usePersistedValue } from '@/base/hooks/usePersistedValue.tsx';
@@ -27,7 +27,7 @@ export const WebUIUpdateIntervalSetting = ({
    disabled?: boolean;
    updateCheckInterval: ServerSettings['webUIUpdateCheckInterval'];
 }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();

    const shouldAutoUpdate = !!updateCheckInterval;
    const [mutateSettings] = requestManager.useUpdateServerSettings();
@@ -44,7 +44,7 @@ export const WebUIUpdateIntervalSetting = ({
                webUIUpdateCheckInterval === 0 ? currentUpdateCheckInterval : webUIUpdateCheckInterval,
            );
            mutateSettings({ variables: { input: { settings: { webUIUpdateCheckInterval } } } }).catch((e) =>
-                makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
+                makeToast(t`Failed to save changes`, 'error', getErrorMessage(e)),
            );
        },
        [currentUpdateCheckInterval],
@@ -58,7 +58,7 @@ export const WebUIUpdateIntervalSetting = ({
    return (
        <List>
            <ListItem>
-                <ListItemText primary={t('settings.webui.auto_update.label.title')} />
+                <ListItemText primary={t`Automatically download the latest version`} />
                <Switch
                    disabled={disabled}
                    edge="end"
@@ -67,16 +67,14 @@ export const WebUIUpdateIntervalSetting = ({
                />
            </ListItem>
            <NumberSetting
-                settingTitle={t('settings.webui.auto_update.label.interval')}
-                settingValue={t('library.settings.global_update.auto_update.interval.label.value', {
-                    hours: currentUpdateCheckInterval,
-                })}
+                settingTitle={t`Update interval`}
+                settingValue={`${currentUpdateCheckInterval}${t`h`}`}
                value={currentUpdateCheckInterval}
                minValue={WEB_UI_UPDATE_INTERVAL.min}
                maxValue={WEB_UI_UPDATE_INTERVAL.max}
                defaultValue={WEB_UI_UPDATE_INTERVAL.default}
                showSlider
-                valueUnit={t('global.time.hour_short')}
+                valueUnit={t`h`}
                handleUpdate={updateSetting}
                disabled={disabled || !shouldAutoUpdate}
            />