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

Move setting files into new folder

Browse Source
This commit is contained in:
schroda
2024-10-05 22:53:22 +02:00
parent 57158d6abd
commit a16fef0aab
40 changed files with 150 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/app-updates/components/ServerUpdateChecker.tsx
View File

@@ -17,7 +17,7 @@ import Button from '@mui/material/Button';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { useUpdateChecker } from '@/modules/app-updates/hooks/useUpdateChecker.tsx';
import { VersionUpdateInfoDialog } from '@/modules/app-updates/components/VersionUpdateInfoDialog.tsx';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { getVersion } from '@/modules/app-updates/services/AppUpdateChecker.tsx';

2
src/modules/app-updates/components/WebUIUpdateChecker.tsx
View File

@@ -22,7 +22,7 @@ import { makeToast } from '@/lib/ui/Toast.ts';
import { ABOUT_WEBUI, WEBUI_UPDATE_CHECK } from '@/lib/graphql/fragments/InfoFragments.ts';
import { VersionUpdateInfoDialog } from '@/modules/app-updates/components/VersionUpdateInfoDialog.tsx';
import { useUpdateChecker } from '@/modules/app-updates/hooks/useUpdateChecker.tsx';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
const disabledUpdateCheck = () => Promise.resolve();

2
src/modules/backup/screens/Backup.tsx
View File

@@ -31,10 +31,10 @@ import { Progress } from '@/modules/core/components/Progress.tsx';
import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
import { TimeSetting } from '@/modules/core/components/settings/TimeSetting.tsx';
import { ServerSettings } from '@/typings.ts';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { ServerSettings } from '@/modules/settings/Settings.types.ts';
type BackupSettingsType = Pick<ServerSettings, 'backupPath' | 'backupTime' | 'backupInterval' | 'backupTTL'>;

4
src/modules/browse/screens/BrowseSettings.tsx
View File

@@ -16,18 +16,18 @@ import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.t
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
import { MutableListSetting } from '@/modules/core/components/settings/MutableListSetting.tsx';
import { ServerSettings as GqlServerSettings } from '@/typings.ts';
import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { MetadataBrowseSettings } from '@/modules/browse/Browse.types.ts';
import { ServerSettings as GqlServerSettings } from '@/modules/settings/Settings.types.ts';
type ExtensionsSettings = Pick<GqlServerSettings, 'maxSourcesInParallel' | 'localSourcePath' | 'extensionRepos'>;

2
src/modules/category/components/CategorySelect.tsx
View File

@@ -24,7 +24,7 @@ import { Categories } from '@/modules/category/services/Categories.ts';
import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
import { makeToast } from '@/lib/ui/Toast.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { updateMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { updateMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import {
GetCategoriesBaseQuery,
GetCategoriesBaseQueryVariables,

2
src/modules/chapter/components/actions/ChapterActionMenuItems.tsx
View File

@@ -38,7 +38,7 @@ import {
createShouldShowMenuItem,
} from '@/modules/core/components/menu/Menu.utils.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
type BaseProps = { onClose: () => void };

2
src/modules/chapter/components/actions/ChaptersDownloadActionMenuItems.tsx
View File

@@ -8,7 +8,7 @@
import MenuItem from '@mui/material/MenuItem';
import { useTranslation } from 'react-i18next';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';

2
src/modules/chapter/services/Chapters.ts
View File

@@ -11,7 +11,7 @@ import gql from 'graphql-tag';
import { DocumentNode } from '@apollo/client';
import { makeToast } from '@/lib/ui/Toast.ts';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { getMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { getMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import {
ChapterListFieldsFragment,
ChapterType,

2
src/modules/core/contexts/AppContext.tsx
View File

@@ -25,7 +25,7 @@ import { LibraryOptionsContextProvider } from '@/modules/library/contexts/Librar
import { ActiveDeviceContextProvider } from '@/modules/device/contexts/DeviceContext.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { AppThemes, getTheme } from '@/modules/theme/services/AppThemes.ts';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
interface Props {
children: React.ReactNode;

7
src/modules/device/screens/DeviceSetting.tsx
View File

@@ -12,8 +12,10 @@ import ListItemText from '@mui/material/ListItemText';
import MenuItem from '@mui/material/MenuItem';
import { useTranslation } from 'react-i18next';
import { useContext, useLayoutEffect } from 'react';
import { updateMetadataServerSettings, useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { MetadataServerSettingKeys, MetadataServerSettings } from '@/typings.ts';
import {
updateMetadataServerSettings,
useMetadataServerSettings,
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { MutableListSetting } from '@/modules/core/components/settings/MutableListSetting.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
@@ -23,6 +25,7 @@ import { LoadingPlaceholder } from '@/modules/core/components/placeholder/Loadin
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { DEFAULT_DEVICE } from '@/modules/device/services/Device.ts';
import { MetadataServerSettingKeys, MetadataServerSettings } from '@/modules/settings/Settings.types.ts';
export const DeviceSetting = () => {
const { t } = useTranslation();

4
src/modules/downloads/components/DownloadAheadSetting.tsx
View File

@@ -13,10 +13,10 @@ import ListItemText from '@mui/material/ListItemText';
import Switch from '@mui/material/Switch';
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
import { getPersistedServerSetting, usePersistedValue } from '@/modules/core/hooks/usePersistedValue.tsx';
import { updateMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { MetadataServerSettings } from '@/typings.ts';
import { updateMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { MetadataDownloadSettings } from '@/modules/downloads/Downloads.types.ts';
import { MetadataServerSettings } from '@/modules/settings/Settings.types.ts';
const MIN_LIMIT = 2;
const MAX_LIMIT = 10;

4
src/modules/downloads/screens/DownloadSettings.tsx
View File

@@ -15,13 +15,12 @@ import Switch from '@mui/material/Switch';
import ListSubheader from '@mui/material/ListSubheader';
import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { ServerSettings } from '@/typings.ts';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { DownloadAheadSetting } from '@/modules/downloads/components/DownloadAheadSetting.tsx';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { DeleteChaptersWhileReadingSetting } from '@/modules/downloads/components/DeleteChaptersWhileReadingSetting.tsx';
import { CategoriesInclusionSetting } from '@/modules/category/components/CategoriesInclusionSetting.tsx';
@@ -32,6 +31,7 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
import { GetCategoriesSettingsQuery, GetCategoriesSettingsQueryVariables } from '@/lib/graphql/generated/graphql.ts';
import { GET_CATEGORIES_SETTINGS } from '@/lib/graphql/queries/CategoryQuery.ts';
import { MetadataDownloadSettings } from '@/modules/downloads/Downloads.types.ts';
import { ServerSettings } from '@/modules/settings/Settings.types.ts';
type DownloadSettingsType = Pick<
ServerSettings,

2
src/modules/library/components/LibraryOptionsPanel.tsx
View File

@@ -26,7 +26,7 @@ import { makeToast } from '@/lib/ui/Toast.ts';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { TranslationKey } from '@/Base.types.ts';
import { LibrarySortMode } from '@/modules/library/Library.types.ts';
import { CategoryMetadataInfo } from '@/modules/category/Category.types.ts';

2
src/modules/library/hooks/useGetVisibleLibraryMangas.ts
View File

@@ -8,7 +8,7 @@
import { StringParam, useQueryParam } from 'use-query-params';
import { useMemo } from 'react';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { ChapterType, MangaType, SourceType, TrackRecordType } from '@/lib/graphql/generated/graphql.ts';
import { MangaChapterCountInfo, MangaIdInfo } from '@/modules/manga/services/Mangas.ts';
import { enhancedCleanup } from '@/lib/data/Strings.ts';

2
src/modules/library/screens/Library.tsx
View File

@@ -39,7 +39,7 @@ import { GET_CATEGORIES_LIBRARY } from '@/lib/graphql/queries/CategoryQuery.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { MANGA_CHAPTER_STAT_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
import { useLibraryOptionsContext } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { getCategoryMetadata } from '@/modules/category/services/CategoryMetadata.ts';
const TitleWithSizeTag = styled('span')({

4
src/modules/library/screens/LibrarySettings.tsx
View File

@@ -16,12 +16,12 @@ import Switch from '@mui/material/Switch';
import ListSubheader from '@mui/material/ListSubheader';
import { t as translate } from 'i18next';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { GlobalUpdateSettings } from '@/components/settings/globalUpdate/GlobalUpdateSettings.tsx';
import { GlobalUpdateSettings } from '@/modules/settings/components/globalUpdate/GlobalUpdateSettings.tsx';
import { makeToast } from '@/lib/ui/Toast.ts';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';

2
src/modules/manga/components/MangaDetails.tsx
View File

@@ -42,7 +42,7 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
import { MangaType, SourceType } from '@/lib/graphql/generated/graphql.ts';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
const DetailsWrapper = styled('div')(({ theme }) => ({

2
src/modules/manga/hooks/useManageMangaLibraryState.tsx
View File

@@ -13,7 +13,7 @@ import gql from 'graphql-tag';
import { useCategorySelect } from '@/modules/category/hooks/useCategorySelect.tsx';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { getMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { getMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { Categories } from '@/modules/category/services/Categories.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';

2
src/modules/manga/services/Mangas.ts
View File

@@ -25,7 +25,7 @@ import {
} from '@/lib/graphql/generated/graphql.ts';
import { Chapters } from '@/modules/chapter/services/Chapters.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { getMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { getMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { GET_MANGAS_BASE } from '@/lib/graphql/queries/MangaQuery.ts';
import { MANGA_BASE_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
import { TranslationKey } from '@/Base.types.ts';

2
src/modules/migration/components/MigrateDialog.tsx
View File

@@ -22,7 +22,7 @@ import { makeToast } from '@/lib/ui/Toast.ts';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { MetadataMigrationSettings } from '@/modules/migration/Migration.types.ts';

2
src/modules/migration/screens/Migration.tsx
View File

@@ -27,7 +27,7 @@ import { sortByToTranslationKey, sortOrderToTranslationKey } from '@/modules/mig
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';

2
src/modules/reader/screens/Reader.tsx
View File

@@ -34,7 +34,7 @@ import {
GetMangaReaderQuery,
UpdateChapterPatchInput,
} from '@/lib/graphql/generated/graphql.ts';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { ChapterIdInfo, Chapters } from '@/modules/chapter/services/Chapters.ts';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';

50
src/modules/settings/Settings.constants.ts Normal file
View File

@@ -0,0 +1,50 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { DEFAULT_DEVICE } from '@/modules/device/services/Device.ts';
import { DEFAULT_SORT_SETTINGS } from '@/modules/migration/Migration.constants.ts';
import { MetadataServerSettings } from '@/modules/settings/Settings.types.ts';
export const SERVER_SETTINGS_METADATA_DEFAULT: MetadataServerSettings = {
// downloads
deleteChaptersManuallyMarkedRead: false,
deleteChaptersWhileReading: 0,
deleteChaptersWithBookmark: false,
downloadAheadLimit: 0,
// library
showAddToLibraryCategorySelectDialog: true,
ignoreFilters: false,
removeMangaFromCategories: false,
showTabSize: false,
// client
devices: [DEFAULT_DEVICE],
// migration
migrateChapters: true,
migrateCategories: true,
migrateTracking: true,
deleteChapters: true,
migrateSortSettings: DEFAULT_SORT_SETTINGS,
// browse
hideLibraryEntries: false,
// tracking
updateProgressAfterReading: true,
updateProgressManualMarkRead: false,
// updates
webUIInformAvailableUpdate: true,
serverInformAvailableUpdate: true,
// themes
customThemes: {},
mangaThumbnailBackdrop: true,
};

36
src/modules/settings/Settings.types.ts Normal file
View File

@@ -0,0 +1,36 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { MetadataDownloadSettings } from '@/modules/downloads/Downloads.types.ts';
import { MetadataLibrarySettings } from '@/modules/library/Library.types.ts';
import { MetadataClientSettings } from '@/modules/device/Device.types.ts';
import { MetadataMigrationSettings } from '@/modules/migration/Migration.types.ts';
import { MetadataBrowseSettings } from '@/modules/browse/Browse.types.ts';
import { MetadataTrackingSettings } from '@/modules/tracker/Tracker.types.ts';
import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts';
import { GetServerSettingsQuery } from '@/lib/graphql/generated/graphql.ts';
export type MetadataServerSettingKeys = keyof MetadataServerSettings;
export type SearchMetadataKeys = keyof ISearchSettings;
export type MetadataServerSettings = MetadataDownloadSettings &
MetadataLibrarySettings &
MetadataClientSettings &
MetadataMigrationSettings &
MetadataBrowseSettings &
MetadataTrackingSettings &
MetadataUpdateSettings &
MetadataThemeSettings;
export interface ISearchSettings {
ignoreFilters: boolean;
}
export type ServerSettings = GetServerSettingsQuery['settings'];

78
src/modules/settings/components/globalUpdate/GlobalUpdateSettings.tsx Normal file
View File

@@ -0,0 +1,78 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
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 {
CategoriesInclusionSetting,
CategoriesInclusionSettingProps,
} from '@/modules/category/components/CategoriesInclusionSetting.tsx';
import { GlobalUpdateSettingsEntries } from '@/modules/settings/components/globalUpdate/GlobalUpdateSettingsEntries.tsx';
import { GlobalUpdateSettingsInterval } from '@/modules/settings/components/globalUpdate/GlobalUpdateSettingsInterval.tsx';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { ServerSettings } from '@/modules/settings/Settings.types.ts';
type LibrarySettingsType = Pick<ServerSettings, 'updateMangas'>;
export const GlobalUpdateSettings = ({
serverSettings,
categories,
}: {
serverSettings: ServerSettings;
categories: CategoriesInclusionSettingProps['categories'];
}) => {
const { t } = useTranslation();
const { updateMangas } = serverSettings;
const [mutateSettings] = requestManager.useUpdateServerSettings();
const updateSetting = async <Setting extends keyof LibrarySettingsType>(
setting: Setting,
value: LibrarySettingsType[Setting],
) => {
try {
await mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
} catch (error) {
makeToast(t('global.error.label.failed_to_save_changes'), 'error');
}
};
return (
<List
subheader={
<ListSubheader component="div" id="global-update-settings">
{t('library.settings.global_update.title')}
</ListSubheader>
}
>
<GlobalUpdateSettingsInterval globalUpdateInterval={serverSettings.globalUpdateInterval} />
<GlobalUpdateSettingsEntries serverSettings={serverSettings} />
<CategoriesInclusionSetting
categories={categories}
includeField="includeInUpdate"
dialogText={t('library.settings.global_update.categories.label.info')}
/>
<ListItem>
<ListItemText
primary={t('library.settings.global_update.metadata.label.title')}
secondary={t('library.settings.global_update.metadata.label.description')}
/>
<Switch
edge="end"
checked={updateMangas}
onChange={(e) => updateSetting('updateMangas', e.target.checked)}
/>
</ListItem>
</List>
);
};

157
src/modules/settings/components/globalUpdate/GlobalUpdateSettingsEntries.tsx Normal file
View File

@@ -0,0 +1,157 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* 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';
import Button from '@mui/material/Button';
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 { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { CheckboxContainer } from '@/modules/core/components/inputs/CheckboxContainer.ts';
import { CheckboxInput } from '@/modules/core/components/inputs/CheckboxInput.tsx';
import { TranslationKey } from '@/Base.types.ts';
import { ServerSettings } from '@/modules/settings/Settings.types.ts';
type GlobalUpdateSkipEntriesSettings = Pick<
ServerSettings,
'excludeUnreadChapters' | 'excludeNotStarted' | 'excludeCompleted'
>;
const settingToTextMap: { [setting in keyof GlobalUpdateSkipEntriesSettings]: TranslationKey } = {
excludeUnreadChapters: 'library.settings.global_update.entries.label.unread_chapters',
excludeNotStarted: 'library.settings.global_update.entries.label.not_started',
excludeCompleted: 'library.settings.global_update.entries.label.completed',
};
const getSkipMangasText = (settings: GlobalUpdateSkipEntriesSettings) => {
const skipSettings: string[] = [];
if (settings.excludeUnreadChapters) {
skipSettings.push(translate(settingToTextMap.excludeUnreadChapters) as string);
}
if (settings.excludeNotStarted) {
skipSettings.push(translate(settingToTextMap.excludeNotStarted) as string);
}
if (settings.excludeCompleted) {
skipSettings.push(translate(settingToTextMap.excludeCompleted) as string);
}
const isNothingExcluded = !skipSettings.length;
if (isNothingExcluded) {
skipSettings.push(translate('global.label.none'));
}
return skipSettings.join(', ');
};
const extractSkipEntriesSettings = (serverSettings: ServerSettings): GlobalUpdateSkipEntriesSettings => ({
excludeCompleted: serverSettings.excludeCompleted,
excludeNotStarted: serverSettings.excludeNotStarted,
excludeUnreadChapters: serverSettings.excludeUnreadChapters,
});
export const GlobalUpdateSettingsEntries = ({ serverSettings }: { serverSettings: ServerSettings }) => {
const { t } = useTranslation();
const globalUpdateSettings = extractSkipEntriesSettings(serverSettings);
const [mutateSettings] = requestManager.useUpdateServerSettings();
const [dialogSettings, setDialogSettings] = useState<GlobalUpdateSkipEntriesSettings>(
globalUpdateSettings ?? ({} as GlobalUpdateSkipEntriesSettings),
);
const [isDialogOpen, setIsDialogOpen] = useState(false);
const skipEntriesText = getSkipMangasText(globalUpdateSettings);
const updateSettings = async () => {
const didSettingsChange =
globalUpdateSettings?.excludeCompleted !== dialogSettings.excludeCompleted ||
globalUpdateSettings.excludeNotStarted !== dialogSettings.excludeNotStarted ||
globalUpdateSettings.excludeUnreadChapters !== dialogSettings.excludeUnreadChapters;
setIsDialogOpen(false);
if (!didSettingsChange) {
return;
}
try {
await mutateSettings({ variables: { input: { settings: dialogSettings } } });
} catch (error) {
makeToast(t('global.error.label.failed_to_save_changes'), 'error');
}
};
const closeDialog = () => {
setDialogSettings(globalUpdateSettings ?? ({} as GlobalUpdateSkipEntriesSettings));
setIsDialogOpen(false);
};
useEffect(() => {
if (!globalUpdateSettings) {
return;
}
setDialogSettings(globalUpdateSettings);
}, [
globalUpdateSettings?.excludeCompleted,
globalUpdateSettings?.excludeNotStarted,
globalUpdateSettings?.excludeUnreadChapters,
]);
return (
<>
<ListItemButton onClick={() => setIsDialogOpen(true)}>
<ListItemText
primary={t('library.settings.global_update.entries.title')}
secondary={skipEntriesText}
onClick={() => setIsDialogOpen(true)}
/>
</ListItemButton>
<Dialog open={isDialogOpen} onClose={closeDialog}>
<DialogContent>
<DialogTitle sx={{ paddingLeft: 0 }}>
{t('library.settings.global_update.entries.title')}
</DialogTitle>
<CheckboxContainer>
{Object.entries(dialogSettings).map(([setting, value]) => (
<CheckboxInput
key={setting}
label={t(settingToTextMap[setting as keyof GlobalUpdateSkipEntriesSettings])}
checked={value}
onChange={(_, checked) => {
setDialogSettings({
...dialogSettings,
[setting]: checked,
});
}}
/>
))}
</CheckboxContainer>
</DialogContent>
<DialogActions>
<Button onClick={closeDialog} color="primary">
{t('global.button.cancel')}
</Button>
<Button onClick={updateSettings} color="primary">
{t('global.button.ok')}
</Button>
</DialogActions>
</Dialog>
</>
);
};

79
src/modules/settings/components/globalUpdate/GlobalUpdateSettingsInterval.tsx Normal file
View File

@@ -0,0 +1,79 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* 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 { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
import { getPersistedServerSetting, usePersistedValue } from '@/modules/core/hooks/usePersistedValue.tsx';
import { ServerSettings } from '@/modules/settings/Settings.types.ts';
const DEFAULT_INTERVAL_HOURS = 12;
const MIN_INTERVAL_HOURS = 6;
const MAX_INTERVAL_HOURS = 24 * 7 * 4; // 1 month
export const GlobalUpdateSettingsInterval = ({
globalUpdateInterval,
}: {
globalUpdateInterval: ServerSettings['globalUpdateInterval'];
}) => {
const { t } = useTranslation();
const autoUpdateIntervalHours = globalUpdateInterval;
const doAutoUpdates = !!autoUpdateIntervalHours;
const [mutateSettings] = requestManager.useUpdateServerSettings();
const [currentAutoUpdateIntervalHours, persistAutoUpdateIntervalHours] = usePersistedValue(
'lastGlobalUpdateInterval',
DEFAULT_INTERVAL_HOURS,
autoUpdateIntervalHours,
getPersistedServerSetting,
);
const updateSetting = useCallback(
(newGlobalUpdateInterval: number) => {
persistAutoUpdateIntervalHours(
newGlobalUpdateInterval === 0 ? currentAutoUpdateIntervalHours : newGlobalUpdateInterval,
);
mutateSettings({ variables: { input: { settings: { globalUpdateInterval: newGlobalUpdateInterval } } } });
},
[currentAutoUpdateIntervalHours],
);
const setDoAutoUpdates = (enable: boolean) => {
const newGlobalUpdateInterval = enable ? currentAutoUpdateIntervalHours : 0;
updateSetting(newGlobalUpdateInterval);
};
return (
<List>
<ListItem>
<ListItemText primary={t('library.settings.global_update.auto_update.label.title')} />
<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,
})}
value={currentAutoUpdateIntervalHours}
minValue={MIN_INTERVAL_HOURS}
maxValue={MAX_INTERVAL_HOURS}
defaultValue={DEFAULT_INTERVAL_HOURS}
showSlider
valueUnit={t('global.time.hour_short')}
handleUpdate={updateSetting}
disabled={!doAutoUpdates}
/>
</List>
);
};

87
src/modules/settings/components/webUI/WebUIUpdateIntervalSetting.tsx Normal file
View File

@@ -0,0 +1,87 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* 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 { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
import { getPersistedServerSetting, usePersistedValue } from '@/modules/core/hooks/usePersistedValue.tsx';
import { makeToast } from '@/modules/core/utils/Toast.ts';
import { ServerSettings } from '@/modules/settings/Settings.types.ts';
const DEFAULT_VALUE = 23;
const MIN_VALUE = 1;
const MAX_VALUE = 23; // 1 month
export const WebUIUpdateIntervalSetting = ({
disabled = false,
updateCheckInterval,
}: {
disabled?: boolean;
updateCheckInterval: ServerSettings['webUIUpdateCheckInterval'];
}) => {
const { t } = useTranslation();
const shouldAutoUpdate = !!updateCheckInterval;
const [mutateSettings] = requestManager.useUpdateServerSettings();
const [currentUpdateCheckInterval, persistUpdateCheckInterval] = usePersistedValue(
'lastUpdateCheckInterval',
DEFAULT_VALUE,
updateCheckInterval,
getPersistedServerSetting,
);
const updateSetting = useCallback(
(webUIUpdateCheckInterval: number) => {
persistUpdateCheckInterval(
webUIUpdateCheckInterval === 0 ? currentUpdateCheckInterval : webUIUpdateCheckInterval,
);
mutateSettings({ variables: { input: { settings: { webUIUpdateCheckInterval } } } }).catch(() =>
makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
);
},
[currentUpdateCheckInterval],
);
const setDoAutoUpdates = (enable: boolean) => {
const globalUpdateInterval = enable ? currentUpdateCheckInterval : 0;
updateSetting(globalUpdateInterval);
};
return (
<List>
<ListItem>
<ListItemText primary={t('settings.webui.auto_update.label.title')} />
<Switch
disabled={disabled}
edge="end"
checked={shouldAutoUpdate}
onChange={(e) => setDoAutoUpdates(e.target.checked)}
/>
</ListItem>
<NumberSetting
settingTitle={t('settings.webui.auto_update.label.interval')}
settingValue={t('library.settings.global_update.auto_update.interval.label.value', {
hours: currentUpdateCheckInterval,
})}
value={currentUpdateCheckInterval}
minValue={MIN_VALUE}
maxValue={MAX_VALUE}
defaultValue={DEFAULT_VALUE}
showSlider
valueUnit={t('global.time.hour_short')}
handleUpdate={updateSetting}
disabled={disabled || !shouldAutoUpdate}
/>
</List>
);
};

183
src/modules/settings/screens/About.tsx Normal file
View File

@@ -0,0 +1,183 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useContext, useLayoutEffect } from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import { useTranslation } from 'react-i18next';
import ListSubheader from '@mui/material/ListSubheader';
import Divider from '@mui/material/Divider';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { UpdateState } from '@/lib/graphql/generated/graphql.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { getBuildTime, getVersion } from '@/modules/app-updates/services/AppUpdateChecker.tsx';
import { VersionInfo } from '@/modules/app-updates/components/VersionInfo.tsx';
export function About() {
const { t } = useTranslation();
const { setTitle, setAction } = useContext(NavBarContext);
useLayoutEffect(() => {
setTitle(t('settings.about.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const { data, loading, error, refetch } = requestManager.useGetAbout({ notifyOnNetworkStatusChange: true });
const {
data: serverUpdateCheckData,
loading: isCheckingForServerUpdate,
refetch: checkForServerUpdate,
error: serverUpdateCheckError,
} = requestManager.useCheckForServerUpdate({ notifyOnNetworkStatusChange: true });
const {
data: webUIUpdateData,
loading: isCheckingForWebUIUpdate,
refetch: checkForWebUIUpdate,
error: orgWebUIUpdateCheckError,
} = requestManager.useCheckForWebUIUpdate({ notifyOnNetworkStatusChange: true });
const webUIUpdateCheckError = orgWebUIUpdateCheckError || webUIUpdateData?.checkForWebUIUpdate.tag === '';
const { data: webUIUpdateStatusData } = requestManager.useGetWebUIUpdateStatus();
const { state: webUIUpdateState, progress: webUIUpdateProgress } = webUIUpdateStatusData?.getWebUIUpdateStatus ?? {
state: UpdateState.Idle,
progress: 0,
};
if (loading) {
return <LoadingPlaceholder />;
}
if (error) {
return (
<EmptyViewAbsoluteCentered
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('About::refetch'))}
/>
);
}
const { aboutServer, aboutWebUI } = data!;
const selectedServerChannelInfo = serverUpdateCheckData?.checkForServerUpdates?.find(
(channel) => channel.channel === aboutServer.buildType,
);
const isServerUpdateAvailable =
!!selectedServerChannelInfo?.tag && selectedServerChannelInfo.tag !== getVersion(aboutServer);
const isWebUIUpdateAvailable = !!webUIUpdateData?.checkForWebUIUpdate.updateAvailable;
return (
<List sx={{ pt: 0 }}>
<List
sx={{ padding: 0 }}
subheader={
<ListSubheader component="div" id="about-server-info">
{t('settings.server.title.server')}
</ListSubheader>
}
>
<ListItem>
<ListItemText
primary={t('settings.server.title.server')}
secondary={`${aboutServer.name} ${aboutServer.buildType}`}
/>
</ListItem>
<ListItem>
<ListItemText
primary={t('settings.about.server.label.version')}
secondary={
<VersionInfo
version={getVersion(aboutServer)}
isCheckingForUpdate={isCheckingForServerUpdate}
isUpdateAvailable={isServerUpdateAvailable}
updateCheckError={serverUpdateCheckError}
checkForUpdate={checkForServerUpdate}
downloadAsLink
url={selectedServerChannelInfo?.url ?? ''}
/>
}
/>
</ListItem>
<ListItem>
<ListItemText
primary={t('settings.about.server.label.build_time')}
secondary={getBuildTime(aboutServer)}
/>
</ListItem>
</List>
<Divider />
<List
sx={{ padding: 0 }}
subheader={
<ListSubheader component="div" id="about-webui-info">
{t('settings.webui.title.webui')}
</ListSubheader>
}
>
<ListItem>
<ListItemText
primary={t('settings.about.webui.label.channel')}
secondary={aboutWebUI.channel.toLocaleUpperCase()}
/>
</ListItem>
<ListItem>
<ListItemText
primary={t('settings.about.webui.label.version')}
secondary={
<VersionInfo
version={aboutWebUI.tag}
isCheckingForUpdate={isCheckingForWebUIUpdate}
isUpdateAvailable={isWebUIUpdateAvailable}
updateCheckError={webUIUpdateCheckError}
checkForUpdate={checkForWebUIUpdate}
triggerUpdate={() =>
requestManager
.updateWebUI()
.response.catch(defaultPromiseErrorHandler('About::updateWebUI'))
}
progress={webUIUpdateProgress}
updateState={webUIUpdateState}
/>
}
/>
</ListItem>
</List>
<Divider />
<List
subheader={
<ListSubheader component="div" id="about-links">
{t('global.label.links')}
</ListSubheader>
}
>
<ListItemLink to={aboutServer.github} target="_blank" rel="noreferrer">
<ListItemText primary={t('settings.about.server.label.github')} secondary={aboutServer.github} />
</ListItemLink>
<ListItemLink to="https://github.com/Suwayomi/Suwayomi-WebUI" target="_blank" rel="noreferrer">
<ListItemText
primary={t('settings.about.webui.label.github')}
secondary="https://github.com/Suwayomi/Suwayomi-WebUI"
/>
</ListItemLink>
<ListItemLink to={aboutServer.discord} target="_blank" rel="noreferrer">
<ListItemText primary={t('global.label.discord')} secondary={aboutServer.discord} />
</ListItemLink>
</List>
</List>
);
}

171
src/modules/settings/screens/Appearance.tsx Normal file
View File

@@ -0,0 +1,171 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import { useContext, useLayoutEffect } from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import MenuItem from '@mui/material/MenuItem';
import ListSubheader from '@mui/material/ListSubheader';
import Switch from '@mui/material/Switch';
import Link from '@mui/material/Link';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
import { Select } from '@/modules/core/components/inputs/Select.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { I18nResourceCode, i18nResources } from '@/i18n';
import { langCodeToName } from '@/lib/Languages.tsx';
import { getTheme } from '@/modules/theme/services/AppThemes.ts';
import { ThemeList } from '@/modules/theme/components/ThemeList.tsx';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts';
export const Appearance = () => {
const { t, i18n } = useTranslation();
const { themeMode, setThemeMode, pureBlackMode, setPureBlackMode, appTheme } = useContext(ThemeModeContext);
const { setTitle, setAction } = useContext(NavBarContext);
useLayoutEffect(() => {
setTitle(t('settings.appearance.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const {
settings,
request: { loading, error, refetch },
} = useMetadataServerSettings();
const updateMetadataSetting = createUpdateMetadataServerSettings<keyof MetadataThemeSettings>(() =>
makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
);
const isDarkMode =
getTheme(appTheme).muiTheme.palette?.mode === 'dark' || MediaQuery.getThemeMode() === ThemeMode.DARK;
const DEFAULT_ITEM_WIDTH = 300;
const [itemWidth, setItemWidth] = useLocalStorage<number>('ItemWidth', DEFAULT_ITEM_WIDTH);
if (loading) {
return <LoadingPlaceholder />;
}
if (error) {
return (
<EmptyViewAbsoluteCentered
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => refetch().catch(defaultPromiseErrorHandler('Appearance::refetch'))}
/>
);
}
return (
<List
subheader={
<ListSubheader component="div" id="appearance-theme">
{t('settings.appearance.theme.title')}
</ListSubheader>
}
>
<ListItem>
<ListItemText primary={t('settings.appearance.theme.device_theme')} />
<Select<ThemeMode> value={themeMode} onChange={(e) => setThemeMode(e.target.value as ThemeMode)}>
<MenuItem key={ThemeMode.SYSTEM} value={ThemeMode.SYSTEM}>
System
</MenuItem>
<MenuItem key={ThemeMode.DARK} value={ThemeMode.DARK}>
Dark
</MenuItem>
<MenuItem key={ThemeMode.LIGHT} value={ThemeMode.LIGHT}>
Light
</MenuItem>
</Select>
</ListItem>
<ThemeList />
{isDarkMode && (
<ListItem>
<ListItemText primary={t('settings.appearance.theme.pure_black_mode')} />
<Switch checked={pureBlackMode} onChange={(_, enabled) => setPureBlackMode(enabled)} />
</ListItem>
)}
<List
subheader={
<ListSubheader component="div" id="appearance-theme">
{t('global.label.display')}
</ListSubheader>
}
>
<ListItem>
<ListItemText
primary={t('global.language.label.language')}
secondary={
<>
<span>{t('settings.label.language_description')} </span>
<Link
href="https://hosted.weblate.org/projects/suwayomi/suwayomi-webui"
target="_blank"
rel="noreferrer"
>
{t('global.language.title.weblate')}
</Link>
</>
}
/>
<Select
value={i18nResources.includes(i18n.language as I18nResourceCode) ? i18n.language : 'en'}
onChange={({ target: { value: language } }) => i18n.changeLanguage(language)}
>
{i18nResources.map((language) => (
<MenuItem key={language} value={language}>
{langCodeToName(language)}
</MenuItem>
))}
</Select>
</ListItem>
<NumberSetting
settingTitle={t('settings.label.manga_item_width')}
settingValue={`px: ${itemWidth}`}
value={itemWidth}
defaultValue={DEFAULT_ITEM_WIDTH}
minValue={100}
maxValue={1000}
stepSize={10}
valueUnit="px"
showSlider
handleUpdate={setItemWidth}
/>
<ListItem>
<ListItemText
primary={t('settings.appearance.manga_thumbnail_backdrop.title')}
secondary={t('settings.appearance.manga_thumbnail_backdrop.description')}
/>
<Switch
edge="end"
checked={settings.mangaThumbnailBackdrop}
onChange={(e) => updateMetadataSetting('mangaThumbnailBackdrop', e.target.checked)}
/>
</ListItem>
</List>
</List>
);
};

453
src/modules/settings/screens/ServerSettings.tsx Normal file
View File

@@ -0,0 +1,453 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation, Trans } from 'react-i18next';
import { useContext, useLayoutEffect, useMemo } from 'react';
import Link from '@mui/material/Link';
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 ListSubheader from '@mui/material/ListSubheader';
import { t as translate } from 'i18next';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
import { NumberSetting } from '@/modules/core/components/settings/NumberSetting.tsx';
import { SelectSetting } from '@/modules/core/components/settings/SelectSetting.tsx';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
import { ServerSettings as GqlServerSettings } from '@/modules/settings/Settings.types.ts';
type ServerSettingsType = Pick<
GqlServerSettings,
| 'ip'
| 'port'
| 'socksProxyEnabled'
| 'socksProxyVersion'
| 'socksProxyHost'
| 'socksProxyPort'
| 'socksProxyUsername'
| 'socksProxyPassword'
| 'debugLogsEnabled'
| 'gqlDebugLogsEnabled'
| 'systemTrayEnabled'
| 'maxLogFiles'
| 'maxLogFileSize'
| 'maxLogFolderSize'
| 'basicAuthEnabled'
| 'basicAuthUsername'
| 'basicAuthPassword'
| 'flareSolverrEnabled'
| 'flareSolverrTimeout'
| 'flareSolverrUrl'
| 'flareSolverrSessionName'
| 'flareSolverrSessionTtl'
| 'flareSolverrAsResponseFallback'
>;
const extractServerSettings = (settings: GqlServerSettings): ServerSettingsType => ({
ip: settings.ip,
port: settings.port,
socksProxyEnabled: settings.socksProxyEnabled,
socksProxyVersion: settings.socksProxyVersion,
socksProxyHost: settings.socksProxyHost,
socksProxyPort: settings.socksProxyPort,
socksProxyUsername: settings.socksProxyUsername,
socksProxyPassword: settings.socksProxyPassword,
debugLogsEnabled: settings.debugLogsEnabled,
gqlDebugLogsEnabled: settings.gqlDebugLogsEnabled,
systemTrayEnabled: settings.systemTrayEnabled,
maxLogFiles: settings.maxLogFiles,
maxLogFileSize: settings.maxLogFileSize,
maxLogFolderSize: settings.maxLogFolderSize,
basicAuthEnabled: settings.basicAuthEnabled,
basicAuthUsername: settings.basicAuthUsername,
basicAuthPassword: settings.basicAuthPassword,
flareSolverrEnabled: settings.flareSolverrEnabled,
flareSolverrTimeout: settings.flareSolverrTimeout,
flareSolverrUrl: settings.flareSolverrUrl,
flareSolverrSessionName: settings.flareSolverrSessionName,
flareSolverrSessionTtl: settings.flareSolverrSessionTtl,
flareSolverrAsResponseFallback: settings.flareSolverrAsResponseFallback,
});
const getLogFilesCleanupDisplayValue = (ttl: number): string => {
if (ttl === 0) {
return translate('global.label.never');
}
return translate('settings.server.misc.log_files.file_cleanup.value', { days: ttl, count: ttl });
};
export const ServerSettings = () => {
const { t } = useTranslation();
const { setTitle, setAction } = useContext(NavBarContext);
useLayoutEffect(() => {
setTitle(t('settings.server.title.settings'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const {
settings: { serverInformAvailableUpdate },
loading: areMetadataServerSettingsLoading,
request: { error: metadataServerSettingsError, refetch: refetchServerMetadataSettings },
} = useMetadataServerSettings();
const updateMetadataServerSettings = createUpdateMetadataServerSettings<
keyof Pick<MetadataUpdateSettings, 'serverInformAvailableUpdate'>
>(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
const {
data,
loading: areServerSettingsLoading,
error: serverSettingsError,
refetch: refetchServerSettings,
} = requestManager.useGetServerSettings({
notifyOnNetworkStatusChange: true,
});
const [mutateSettings] = requestManager.useUpdateServerSettings();
const [serverAddress, setServerAddress] = useLocalStorage<string>('serverBaseURL', window.location.origin);
const handleServerAddressChange = (address: string) => {
const serverBaseUrl = address.replaceAll(/(\/)+$/g, '');
setServerAddress(serverBaseUrl);
requestManager.reset();
};
const updateSetting = <Setting extends keyof ServerSettingsType>(
setting: Setting,
value: ServerSettingsType[Setting],
) => {
mutateSettings({ variables: { input: { settings: { [setting]: value } } } }).catch(() =>
makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
);
};
const localSettings = useMemo(
() => (
<List
subheader={
<ListSubheader component="div" id="server-settings-client">
{t('global.label.client')}
</ListSubheader>
}
>
<TextSetting
settingName={t('settings.about.server.label.address')}
handleChange={handleServerAddressChange}
value={serverAddress}
placeholder="http://localhost:4567"
/>
<ListItem>
<ListItemText
primary={t('global.update.settings.inform.label.title')}
secondary={t('global.update.settings.inform.label.description')}
/>
<Switch
edge="end"
checked={serverInformAvailableUpdate}
onChange={(e) => updateMetadataServerSettings('serverInformAvailableUpdate', e.target.checked)}
/>
</ListItem>
</List>
),
[serverAddress, serverInformAvailableUpdate],
);
const loading = areMetadataServerSettingsLoading || areServerSettingsLoading;
if (loading) {
return (
<>
{localSettings}
<LoadingPlaceholder />
</>
);
}
const error = metadataServerSettingsError ?? serverSettingsError;
if (error) {
return (
<>
{localSettings}
<EmptyViewAbsoluteCentered
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => {
if (metadataServerSettingsError) {
refetchServerMetadataSettings().catch(
defaultPromiseErrorHandler('ServerSettings::refetchServerMetadataSettings'),
);
}
if (serverSettingsError) {
refetchServerSettings().catch(
defaultPromiseErrorHandler('ServerSettings::refetchServerSettings'),
);
}
}}
/>
</>
);
}
const serverSettings = extractServerSettings(data!.settings);
return (
<List sx={{ pt: 0 }}>
{localSettings}
<List
subheader={
<ListSubheader component="div" id="server-settings-server-address">
{t('settings.server.address.server.title')}
</ListSubheader>
}
>
<TextSetting
settingName={t('settings.server.address.server.label.ip')}
handleChange={(ip) => updateSetting('ip', ip)}
value={serverSettings.ip}
placeholder="0.0.0.0"
/>
<NumberSetting
settingTitle={t('settings.server.address.server.label.port')}
settingValue={serverSettings.port.toString()}
handleUpdate={(port) => updateSetting('port', port)}
value={serverSettings.port}
defaultValue={4567}
valueUnit={t('settings.server.address.server.label.port')}
/>
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-socks-proxy">
{t('settings.server.socks_proxy.title')}
</ListSubheader>
}
>
<ListItem>
<ListItemText primary={t('settings.server.socks_proxy.label.enable')} />
<Switch
edge="end"
checked={serverSettings.socksProxyEnabled}
onChange={(e) => updateSetting('socksProxyEnabled', e.target.checked)}
/>
</ListItem>
<SelectSetting<number>
settingName={t('settings.server.socks_proxy.label.version')}
value={serverSettings.socksProxyVersion}
values={[
[4, { text: '4' }],
[5, { text: '5' }],
]}
handleChange={(socksProxyVersion) => updateSetting('socksProxyVersion', socksProxyVersion)}
/>
<TextSetting
settingName={t('settings.server.socks_proxy.label.host')}
value={serverSettings.socksProxyHost}
handleChange={(proxyHost) => updateSetting('socksProxyHost', proxyHost)}
/>
<TextSetting
settingName={t('settings.server.socks_proxy.label.port')}
value={serverSettings.socksProxyPort}
handleChange={(proxyPort) => updateSetting('socksProxyPort', proxyPort)}
/>
<TextSetting
settingName={t('settings.server.socks_proxy.label.username')}
value={serverSettings.socksProxyUsername}
handleChange={(proxyUsername) => updateSetting('socksProxyUsername', proxyUsername)}
/>
<TextSetting
settingName={t('settings.server.socks_proxy.label.password')}
value={serverSettings.socksProxyPassword}
handleChange={(proxyPassword) => updateSetting('socksProxyPassword', proxyPassword)}
isPassword
/>
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-auth">
{t('settings.server.auth.title')}
</ListSubheader>
}
>
<ListItem>
<ListItemText primary={t('settings.server.auth.basic.label.enable')} />
<Switch
edge="end"
checked={serverSettings.basicAuthEnabled}
onChange={(e) => updateSetting('basicAuthEnabled', e.target.checked)}
/>
</ListItem>
<TextSetting
settingName={t('settings.server.auth.basic.label.username')}
value={serverSettings.basicAuthUsername}
handleChange={(authUsername) => updateSetting('basicAuthUsername', authUsername)}
/>
<TextSetting
settingName={t('settings.server.auth.basic.label.password')}
value={serverSettings.basicAuthPassword}
isPassword
handleChange={(authPassword) => updateSetting('basicAuthPassword', authPassword)}
/>
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-clouadflare-bypass">
{t('settings.server.cloudflare.title')}
</ListSubheader>
}
>
<ListItem>
<ListItemText
primary={t('settings.server.cloudflare.flaresolverr.enabled.label.title')}
secondary={
<Trans i18nKey="settings.server.cloudflare.flaresolverr.enabled.label.description">
See{' '}
<Link
href="https://github.com/FlareSolverr/FlareSolverr?tab=readme-ov-file#installation"
target="_blank"
rel="noreferrer"
>
FlareSolverr
</Link>{' '}
for information on how to set it up
</Trans>
}
/>
<Switch
edge="end"
checked={serverSettings.flareSolverrEnabled}
onChange={(e) => updateSetting('flareSolverrEnabled', e.target.checked)}
/>
</ListItem>
<TextSetting
settingName={t('settings.server.cloudflare.flaresolverr.url.label.title')}
dialogDescription={t('settings.server.cloudflare.flaresolverr.url.label.description')}
value={serverSettings.flareSolverrUrl}
handleChange={(url) => updateSetting('flareSolverrUrl', url)}
/>
<NumberSetting
settingTitle={t('settings.server.cloudflare.flaresolverr.timeout.label.title')}
settingValue={t('global.time.seconds.value', { count: serverSettings.flareSolverrTimeout })}
dialogDescription={t('settings.server.cloudflare.flaresolverr.timeout.label.description')}
value={serverSettings.flareSolverrTimeout}
defaultValue={60}
minValue={20}
maxValue={60 * 5}
stepSize={1}
showSlider
valueUnit={t('global.time.seconds.second_other')}
handleUpdate={(timeout) => updateSetting('flareSolverrTimeout', timeout)}
/>
<TextSetting
settingName={t('settings.server.cloudflare.flaresolverr.session.name.label.title')}
value={serverSettings.flareSolverrSessionName}
handleChange={(sessionName) => updateSetting('flareSolverrSessionName', sessionName)}
/>
<NumberSetting
settingTitle={t('settings.server.cloudflare.flaresolverr.session.ttl.label.title')}
settingValue={t('global.time.minutes.value', { count: serverSettings.flareSolverrSessionTtl })}
dialogDescription={t('settings.server.cloudflare.flaresolverr.session.ttl.label.description')}
value={serverSettings.flareSolverrSessionTtl}
defaultValue={15}
minValue={1}
maxValue={60}
stepSize={1}
showSlider
valueUnit={t('global.time.minutes.minute_other')}
handleUpdate={(sessionTTL) => updateSetting('flareSolverrSessionTtl', sessionTTL)}
/>
<ListItem>
<ListItemText
primary={t('settings.server.cloudflare.flaresolverr.response_fallback.label.title')}
secondary={t('settings.server.cloudflare.flaresolverr.response_fallback.label.description')}
/>
<Switch
edge="end"
checked={serverSettings.flareSolverrAsResponseFallback}
onChange={(e) => updateSetting('flareSolverrAsResponseFallback', e.target.checked)}
/>
</ListItem>
</List>
<List
subheader={
<ListSubheader component="div" id="server-settings-misc">
{t('settings.server.misc.title')}
</ListSubheader>
}
>
<ListItem>
<ListItemText primary={t('settings.server.misc.log_level.label.server')} />
<Switch
edge="end"
checked={serverSettings.debugLogsEnabled}
onChange={(e) => updateSetting('debugLogsEnabled', e.target.checked)}
/>
</ListItem>
<ListItem>
<ListItemText
primary={t('settings.server.misc.log_level.graphql.label.title')}
secondary={t('settings.server.misc.log_level.graphql.label.description')}
/>
<Switch
edge="end"
checked={serverSettings.gqlDebugLogsEnabled}
onChange={(e) => updateSetting('gqlDebugLogsEnabled', e.target.checked)}
/>
</ListItem>
<ListItem>
<ListItemText
primary={t('settings.server.misc.tray_icon.label.title')}
secondary={t('settings.server.misc.tray_icon.label.description')}
/>
<Switch
edge="end"
checked={serverSettings.systemTrayEnabled}
onChange={(e) => updateSetting('systemTrayEnabled', e.target.checked)}
/>
</ListItem>
<NumberSetting
settingTitle={t('settings.server.misc.log_files.file_cleanup.title')}
settingValue={getLogFilesCleanupDisplayValue(serverSettings.maxLogFiles)}
value={serverSettings.maxLogFiles}
valueUnit={t('global.date.label.day_one')}
handleUpdate={(maxFiles) => updateSetting('maxLogFiles', maxFiles)}
/>
<TextSetting
settingName={t('settings.server.misc.log_files.file_size.title')}
value={serverSettings.maxLogFileSize}
dialogDescription={t('settings.server.misc.log_files.file_size.description')}
validate={(value) => !!value.match(/^[0-9]+(|kb|KB|mb|MB|gb|GB)$/g)}
handleChange={(maxLogFileSize) => updateSetting('maxLogFileSize', maxLogFileSize)}
/>
<TextSetting
settingName={t('settings.server.misc.log_files.total_size.title')}
value={serverSettings.maxLogFolderSize}
dialogDescription={t('settings.server.misc.log_files.total_size.description')}
validate={(value) => !!value.match(/^[0-9]+(|kb|KB|mb|MB|gb|GB)$/g)}
handleChange={(maxLogFolderSize) => updateSetting('maxLogFolderSize', maxLogFolderSize)}
/>
</List>
</List>
);
};

144
src/modules/settings/screens/Settings.tsx Normal file
View File

@@ -0,0 +1,144 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useContext, useLayoutEffect } from 'react';
import AutoStoriesIcon from '@mui/icons-material/AutoStories';
import List from '@mui/material/List';
import ListAltIcon from '@mui/icons-material/ListAlt';
import BackupIcon from '@mui/icons-material/Backup';
import InfoIcon from '@mui/icons-material/Info';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import ListItemButton from '@mui/material/ListItemButton';
import { useTranslation } from 'react-i18next';
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
import DnsIcon from '@mui/icons-material/Dns';
import WebIcon from '@mui/icons-material/Web';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
import ExploreOutlinedIcon from '@mui/icons-material/ExploreOutlined';
import DevicesIcon from '@mui/icons-material/Devices';
import SyncIcon from '@mui/icons-material/Sync';
import PaletteIcon from '@mui/icons-material/Palette';
import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
export function Settings() {
const { t } = useTranslation();
const { setTitle, setAction } = useContext(NavBarContext);
useLayoutEffect(() => {
setTitle(t('settings.title'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const [triggerClearServerCache, { loading: isClearingServerCache }] = requestManager.useClearServerCache();
const clearServerCache = async () => {
try {
await triggerClearServerCache();
makeToast(t('settings.clear_cache.label.success'), 'success');
} catch (e) {
makeToast(t('settings.clear_cache.label.failure'), 'error');
}
};
return (
<List sx={{ padding: 0 }}>
<ListItemLink to="/settings/appearance">
<ListItemIcon>
<PaletteIcon />
</ListItemIcon>
<ListItemText primary={t('settings.appearance.title')} />
</ListItemLink>
<ListItemLink to="/settings/categories">
<ListItemIcon>
<ListAltIcon />
</ListItemIcon>
<ListItemText primary={t('category.title.category_other')} />
</ListItemLink>
<ListItemLink to="/settings/defaultReaderSettings">
<ListItemIcon>
<AutoStoriesIcon />
</ListItemIcon>
<ListItemText primary={t('reader.settings.title.default_reader_settings')} />
</ListItemLink>
<ListItemLink to="/settings/librarySettings">
<ListItemIcon>
<CollectionsOutlinedBookmarkIcon />
</ListItemIcon>
<ListItemText primary={t('library.title')} />
</ListItemLink>
<ListItemLink to="/settings/downloadSettings">
<ListItemIcon>
<GetAppOutlinedIcon />
</ListItemIcon>
<ListItemText primary={t('download.title')} />
</ListItemLink>
<ListItemLink to="/settings/trackingSettings">
<ListItemIcon>
<SyncIcon />
</ListItemIcon>
<ListItemText primary={t('tracking.title')} />
</ListItemLink>
<ListItemLink to="/settings/backup">
<ListItemIcon>
<BackupIcon />
</ListItemIcon>
<ListItemText primary={t('settings.backup.title')} />
</ListItemLink>
<ListItemButton disabled={isClearingServerCache} onClick={clearServerCache}>
<ListItemIcon>
<DeleteForeverIcon />
</ListItemIcon>
<ListItemText
primary={t('settings.clear_cache.label.title')}
secondary={t('settings.clear_cache.label.description')}
/>
</ListItemButton>
<ListItemLink to="/settings/browseSettings">
<ListItemIcon>
<ExploreOutlinedIcon />
</ListItemIcon>
<ListItemText primary={t('global.label.browse')} />
</ListItemLink>
<ListItemLink to="/settings/device">
<ListItemIcon>
<DevicesIcon />
</ListItemIcon>
<ListItemText primary={t('settings.device.title.device')} />
</ListItemLink>
<ListItemLink to="/settings/webUI">
<ListItemIcon>
<WebIcon />
</ListItemIcon>
<ListItemText primary={t('settings.webui.title.webui')} />
</ListItemLink>
<ListItemLink to="/settings/server">
<ListItemIcon>
<DnsIcon />
</ListItemIcon>
<ListItemText primary={t('settings.server.title.server')} />
</ListItemLink>
<ListItemLink to="/settings/about">
<ListItemIcon>
<InfoIcon />
</ListItemIcon>
<ListItemText primary={t('settings.about.title')} />
</ListItemLink>
</List>
);
}

254
src/modules/settings/screens/WebUISettings.tsx Normal file
View File

@@ -0,0 +1,254 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useTranslation } from 'react-i18next';
import { useContext, useLayoutEffect } from 'react';
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 { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { WebUIUpdateIntervalSetting } from '@/modules/settings/components/webUI/WebUIUpdateIntervalSetting.tsx';
import { TextSetting } from '@/modules/core/components/settings/text/TextSetting.tsx';
import {
SelectSetting,
SelectSettingValue,
SelectSettingValueDisplayInfo,
} from '@/modules/core/components/settings/SelectSetting.tsx';
import { WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { MetadataUpdateSettings } from '@/modules/app-updates/AppUpdateChecker.types.ts';
import { ServerSettings } from '@/modules/settings/Settings.types.ts';
type WebUISettingsType = Pick<
ServerSettings,
| 'webUIFlavor'
| 'initialOpenInBrowserEnabled'
| 'webUIInterface'
| 'electronPath'
| 'webUIChannel'
| 'webUIUpdateCheckInterval'
>;
const FLAVORS = Object.values(WebUiFlavor);
const FLAVOR_TO_TRANSLATION_KEY: { [flavor in WebUiFlavor]: SelectSettingValueDisplayInfo } = {
[WebUiFlavor.Webui]: {
text: 'settings.webui.title.webui',
description: 'settings.webui.flavor.option.webui.label.description',
disclaimer: 'settings.webui.flavor.label.info',
},
[WebUiFlavor.Vui]: {
text: 'settings.webui.flavor.option.vui.label.title',
description: 'settings.webui.flavor.option.vui.label.description',
disclaimer: 'settings.webui.flavor.label.info',
},
[WebUiFlavor.Custom]: {
text: 'settings.webui.flavor.option.custom.label.title',
description: 'settings.webui.flavor.option.custom.label.description',
},
};
const FLAVOR_SELECT_VALUES: SelectSettingValue<WebUiFlavor>[] = FLAVORS.map((flavor) => [
flavor,
FLAVOR_TO_TRANSLATION_KEY[flavor],
]);
const CHANNELS = Object.values(WebUiChannel);
const CHANNEL_TO_TRANSLATION_KEYS: {
[channel in WebUiChannel]: SelectSettingValueDisplayInfo;
} = {
[WebUiChannel.Bundled]: {
text: 'settings.webui.channel.option.bundled.label.title',
description: 'settings.webui.channel.option.bundled.label.description',
disclaimer: 'settings.webui.flavor.label.info',
},
[WebUiChannel.Stable]: {
text: 'settings.webui.channel.option.stable.label.title',
description: 'settings.webui.channel.option.stable.label.description',
disclaimer: 'settings.webui.flavor.label.info',
},
[WebUiChannel.Preview]: {
text: 'settings.webui.channel.option.preview.label.title',
description: 'settings.webui.channel.option.preview.label.description',
disclaimer: 'settings.webui.channel.option.preview.label.disclaimer',
},
};
const CHANNEL_SELECT_VALUES: SelectSettingValue<WebUiChannel>[] = CHANNELS.map((channel) => [
channel,
CHANNEL_TO_TRANSLATION_KEYS[channel],
]);
const INTERFACES = Object.values(WebUiInterface);
const INTERFACE_TO_TRANSLATION_KEYS: {
[webUIInterface in WebUiInterface]: SelectSettingValueDisplayInfo;
} = {
[WebUiInterface.Browser]: {
text: 'settings.webui.interface.option.label.browser',
description: 'settings.webui.interface.label.description',
},
[WebUiInterface.Electron]: {
text: 'settings.webui.interface.option.label.electron',
description: 'settings.webui.interface.label.description',
},
};
const INTERFACE_SELECT_VALUES: SelectSettingValue<WebUiInterface>[] = INTERFACES.map((webUIInterface) => [
webUIInterface,
INTERFACE_TO_TRANSLATION_KEYS[webUIInterface],
]);
const extractWebUISettings = (settings: ServerSettings): WebUISettingsType => ({
webUIFlavor: settings.webUIFlavor,
initialOpenInBrowserEnabled: settings.initialOpenInBrowserEnabled,
webUIInterface: settings.webUIInterface,
electronPath: settings.electronPath,
webUIChannel: settings.webUIChannel,
webUIUpdateCheckInterval: settings.webUIUpdateCheckInterval,
});
export const WebUISettings = () => {
const { t } = useTranslation();
const { setTitle, setAction } = useContext(NavBarContext);
useLayoutEffect(() => {
setTitle(t('settings.webui.title.settings'));
setAction(null);
return () => {
setTitle('');
setAction(null);
};
}, [t]);
const {
settings: { webUIInformAvailableUpdate },
loading: areMetadataServerSettingsLoading,
request: { error: metadataServerSettingsError, refetch: refetchServerMetadataSettings },
} = useMetadataServerSettings();
const updateMetadataServerSettings = createUpdateMetadataServerSettings<
keyof Pick<MetadataUpdateSettings, 'webUIInformAvailableUpdate'>
>(() => makeToast(t('global.error.label.failed_to_save_changes'), 'error'));
const {
data,
loading: areServerSettingsLoading,
error: serverSettingsError,
refetch: refetchServerSettings,
} = requestManager.useGetServerSettings({
notifyOnNetworkStatusChange: true,
});
const [mutateSettings] = requestManager.useUpdateServerSettings();
const updateSetting = <Setting extends keyof WebUISettingsType>(
setting: Setting,
value: WebUISettingsType[Setting],
) => {
if (setting === 'webUIChannel') {
requestManager.graphQLClient.client.cache.evict({ fieldName: 'checkForWebUIUpdate' });
}
mutateSettings({ variables: { input: { settings: { [setting]: value } } } }).catch(() =>
makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
);
};
const loading = areMetadataServerSettingsLoading || areServerSettingsLoading;
if (loading) {
return <LoadingPlaceholder />;
}
const error = metadataServerSettingsError ?? serverSettingsError;
if (error) {
return (
<EmptyViewAbsoluteCentered
message={t('global.error.label.failed_to_load_data')}
messageExtra={error.message}
retry={() => {
if (metadataServerSettingsError) {
refetchServerMetadataSettings().catch(
defaultPromiseErrorHandler('WebUISettings::refetchServerMetadataSettings'),
);
}
if (serverSettingsError) {
refetchServerSettings().catch(
defaultPromiseErrorHandler('WebUISettings::refetchServerSettings'),
);
}
}}
/>
);
}
const webUISettings = extractWebUISettings(data!.settings);
const isCustomWebUI = webUISettings.webUIFlavor === WebUiFlavor.Custom;
return (
<List sx={{ pt: 0 }}>
<SelectSetting<WebUiFlavor>
settingName={t('settings.webui.flavor.label.title')}
value={webUISettings.webUIFlavor}
values={FLAVOR_SELECT_VALUES}
handleChange={(flavor) => updateSetting('webUIFlavor', flavor)}
/>
<ListItem>
<ListItemText primary={t('settings.webui.label.initial_open_browser')} />
<Switch
edge="end"
checked={webUISettings.initialOpenInBrowserEnabled}
onChange={(e) => updateSetting('initialOpenInBrowserEnabled', e.target.checked)}
/>
</ListItem>
<SelectSetting<WebUiInterface>
settingName={t('settings.webui.interface.label.title')}
value={webUISettings.webUIInterface}
values={INTERFACE_SELECT_VALUES}
handleChange={(webUIInterface) => updateSetting('webUIInterface', webUIInterface)}
/>
<TextSetting
settingName={t('settings.webui.electron_path.label.title')}
dialogDescription={t('settings.webui.electron_path.label.description')}
value={webUISettings.electronPath}
settingDescription={
webUISettings.electronPath.length ? webUISettings.electronPath : t('global.label.default')
}
handleChange={(path) => updateSetting('electronPath', path)}
/>
<SelectSetting<WebUiChannel>
settingName={t('settings.webui.channel.label.title')}
value={webUISettings.webUIChannel}
values={CHANNEL_SELECT_VALUES}
handleChange={(channel) => updateSetting('webUIChannel', channel)}
disabled={isCustomWebUI}
/>
<WebUIUpdateIntervalSetting
disabled={isCustomWebUI}
updateCheckInterval={webUISettings.webUIUpdateCheckInterval}
/>
{!webUISettings.webUIUpdateCheckInterval && (
<ListItem>
<ListItemText
primary={t('global.update.settings.inform.label.title')}
secondary={t('global.update.settings.inform.label.description')}
/>
<Switch
edge="end"
checked={webUIInformAvailableUpdate}
onChange={(e) => updateMetadataServerSettings('webUIInformAvailableUpdate', e.target.checked)}
/>
</ListItem>
)}
</List>
);
};

92
src/modules/settings/services/ServerSettingsMetadata.ts Normal file
View File

@@ -0,0 +1,92 @@
/*
* Copyright (C) Contributors to the Suwayomi project
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { AllowedMetadataValueTypes, AppMetadataKeys, Metadata } from '@/typings.ts';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { convertFromGqlMeta, getMetadataFrom, requestUpdateServerMetadata } from '@/lib/metadata/metadata.ts';
import { jsonSaveParse } from '@/lib/HelperFunctions.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { MetadataMigrationSettings } from '@/modules/migration/Migration.types.ts';
import { MetadataThemeSettings } from '@/modules/theme/AppTheme.types.ts';
import { SERVER_SETTINGS_METADATA_DEFAULT } from '@/modules/settings/Settings.constants.ts';
import { MetadataServerSettingKeys, MetadataServerSettings } from '@/modules/settings/Settings.types.ts';
export const convertSettingsToMetadata = (
settings: Partial<MetadataServerSettings>,
): Metadata<string, AllowedMetadataValueTypes> => ({
...settings,
devices: JSON.stringify(settings.devices),
customThemes: JSON.stringify(settings.customThemes),
migrateSortSettings: JSON.stringify(settings.migrateSortSettings),
});
export const convertMetadataToSettings = (
metadata: Partial<Metadata<AppMetadataKeys, AllowedMetadataValueTypes>>,
): MetadataServerSettings =>
({
...SERVER_SETTINGS_METADATA_DEFAULT,
...(metadata as unknown as MetadataServerSettings),
devices:
jsonSaveParse<string[]>((metadata.devices as string) ?? '') ?? SERVER_SETTINGS_METADATA_DEFAULT.devices,
customThemes:
jsonSaveParse<MetadataThemeSettings['customThemes']>((metadata.customThemes as string) ?? '') ??
SERVER_SETTINGS_METADATA_DEFAULT.customThemes,
migrateSortSettings:
jsonSaveParse<MetadataMigrationSettings['migrateSortSettings']>(
(metadata.migrateSortSettings as string) ?? '',
) ?? SERVER_SETTINGS_METADATA_DEFAULT.migrateSortSettings,
}) satisfies MetadataServerSettings;
const getMetadataServerSettingsWithDefaultFallback = (
meta?: Metadata,
defaultSettings: MetadataServerSettings = SERVER_SETTINGS_METADATA_DEFAULT,
applyMetadataMigration: boolean = true,
): MetadataServerSettings =>
convertMetadataToSettings(
getMetadataFrom({ meta }, convertSettingsToMetadata(defaultSettings), applyMetadataMigration),
);
export const useMetadataServerSettings = (): {
metadata?: Metadata;
settings: MetadataServerSettings;
loading: boolean;
request: ReturnType<typeof requestManager.useGetGlobalMeta>;
} => {
const request = requestManager.useGetGlobalMeta({ notifyOnNetworkStatusChange: true });
const { data, loading } = request;
const metadata = convertFromGqlMeta(data?.metas.nodes);
const settings = getMetadataServerSettingsWithDefaultFallback(metadata);
return { metadata, settings, loading, request };
};
export const getMetadataServerSettings = async (): Promise<MetadataServerSettings> => {
const { data, error } = await requestManager.getGlobalMeta().response;
if (error) {
throw error;
}
const metadata = convertFromGqlMeta(data?.metas.nodes);
return getMetadataServerSettingsWithDefaultFallback(metadata);
};
export const updateMetadataServerSettings = async <
Settings extends MetadataServerSettingKeys = MetadataServerSettingKeys,
Setting extends Settings = Settings,
>(
setting: Setting,
value: MetadataServerSettings[Setting],
): Promise<void[]> =>
requestUpdateServerMetadata([[setting, convertSettingsToMetadata({ [setting]: value })[setting]]]);
export const createUpdateMetadataServerSettings =
<Settings extends MetadataServerSettingKeys>(
handleError: (error: any) => void = defaultPromiseErrorHandler('createUpdateMetadataServerSettings'),
): ((...args: Parameters<typeof updateMetadataServerSettings<Settings>>) => Promise<void | void[]>) =>
(setting, value) =>
updateMetadataServerSettings(setting, value).catch(handleError);

2
src/modules/source/screens/SourceMangas.tsx
View File

@@ -37,7 +37,7 @@ import {
GetSourceMangasFetchMutationVariables,
} from '@/lib/graphql/generated/graphql.ts';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { useLocalStorage, useSessionStorage } from '@/modules/core/hooks/useStorage.tsx';
import { AppStorage } from '@/lib/AppStorage.ts';
import { getGridSnapshotKey } from '@/modules/manga/components/MangaGrid.tsx';

2
src/modules/theme/components/CreateThemeDialog.tsx
View File

@@ -24,7 +24,7 @@ import { AppTheme, isThemeNameUnique } from '@/modules/theme/services/AppThemes.
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { EmptyView } from '@/modules/core/components/placeholder/EmptyView.tsx';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';

2
src/modules/theme/components/ThemeList.tsx
View File

@@ -13,7 +13,7 @@ import { appThemes } from '@/modules/theme/services/AppThemes.ts';
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { EmptyView } from '@/modules/core/components/placeholder/EmptyView.tsx';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';

2
src/modules/tracker/screens/TrackingSettings.tsx
View File

@@ -22,7 +22,7 @@ import { SettingsTrackerCard } from '@/modules/tracker/components/cards/Settings
import {
createUpdateMetadataServerSettings,
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
} from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';