Group "browse setting" settings

src/features/browse/screens/BrowseSettings.tsx

@@ -28,6 +28,10 @@ import type { MetadataBrowseSettings } from '@/features/browse/Browse.types.ts';
 import type { ServerSettings as GqlServerSettings } from '@/features/settings/Settings.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
+import ListSubheader from '@mui/material/ListSubheader';
 
 type ExtensionsSettings = Pick<GqlServerSettings, 'maxSourcesInParallel' | 'localSourcePath' | 'extensionRepos'>;
 
@@ -73,73 +77,95 @@ export const BrowseSettings = () => {
 
     return (
         <List sx={{ pt: 0 }}>
-            <ListItem>
+            <List
-                <ListItemText primary={t`Hide entries already in library`} />
+                subheader={
-                <Switch
+                    <ListSubheader component="div" id="browse-settings-source">
-                    edge="end"
+                        {t`Sources`}
-                    checked={hideLibraryEntries}
+                    </ListSubheader>
-                    onChange={() => updateMetadataServerSettings('hideLibraryEntries', !hideLibraryEntries)}
-                />
-            </ListItem>
-            <ListItem>
-                <ListItemText
-                    primary={t`Show NSFW (18+)`}
-                    secondary={t`Show NSFW (18+) sources in sources and extensions lists`}
-                />
-                <Switch
-                    edge="end"
-                    checked={showNsfw}
-                    onChange={() => updateMetadataServerSettings('showNsfw', !showNsfw)}
-                />
-            </ListItem>
-            <NumberSetting
-                settingTitle={t`Parallel source requests`}
-                settingValue={plural(serverSettings.maxSourcesInParallel, {
-                    one: '# Source',
-                    other: '# Sources',
-                })}
-                valueUnit={t`Source`}
-                value={serverSettings.maxSourcesInParallel}
-                defaultValue={6}
-                minValue={1}
-                maxValue={20}
-                showSlider
-                stepSize={1}
-                handleUpdate={(parallelSources) => updateSetting('maxSourcesInParallel', parallelSources)}
-            />
-            <MutableListSetting
-                settingName={t`Extension repositories`}
-                description={t`Add repositories from which extensions can be installed`}
-                dialogDisclaimer={
-                    <Trans>
-                        <strong>Suwayomi does not provide any support for 3rd party repositories or extensions!</strong>
-                        <br />
-                        Use with caution as there could be malicious actors making those repositories.
-                        <br />
-                        You as the user need to verify the security and that you trust any repository or extension.
-                    </Trans>
                 }
-                handleChange={(repos) => {
+                sx={{ pb: 0 }}
-                    updateSetting('extensionRepos', repos);
+            >
-                    requestManager.clearExtensionCache();
+                <ListItem>
-                }}
+                    <ListItemText primary={t`Hide entries already in library`} />
-                valueInfos={serverSettings.extensionRepos.map((extensionRepo) => [extensionRepo])}
+                    <Switch
-                addItemButtonTitle={t`Add repository`}
+                        edge="end"
-                placeholder="https://github.com/MY_ACCOUNT/MY_REPO/tree/repo"
+                        checked={hideLibraryEntries}
-                validateItem={(repo) =>
+                        onChange={() => updateMetadataServerSettings('hideLibraryEntries', !hideLibraryEntries)}
-                    !!repo.match(
+                    />
-                        /https:\/\/(www\.|raw\.)?(github|githubusercontent)\.com\/([^/]+)\/([^/]+)((\/tree|\/blob)?\/([^/\n]*))?(\/([^/\n]*\.json)?)?/g,
+                </ListItem>
-                    )
+                <NumberSetting
+                    settingTitle={t`Parallel source requests`}
+                    settingValue={plural(serverSettings.maxSourcesInParallel, {
+                        one: '# Source',
+                        other: '# Sources',
+                    })}
+                    valueUnit={t`Source`}
+                    value={serverSettings.maxSourcesInParallel}
+                    defaultValue={6}
+                    minValue={1}
+                    maxValue={20}
+                    showSlider
+                    stepSize={1}
+                    handleUpdate={(parallelSources) => updateSetting('maxSourcesInParallel', parallelSources)}
+                />
+                <MutableListSetting
+                    settingName={t`Extension repositories`}
+                    description={t`Add repositories from which extensions can be installed`}
+                    dialogDisclaimer={
+                        <Trans>
+                            <strong>
+                                Suwayomi does not provide any support for 3rd party repositories or extensions!
+                            </strong>
+                            <br />
+                            Use with caution as there could be malicious actors making those repositories.
+                            <br />
+                            You as the user need to verify the security and that you trust any repository or extension.
+                        </Trans>
+                    }
+                    handleChange={(repos) => {
+                        updateSetting('extensionRepos', repos);
+                        requestManager.clearExtensionCache();
+                    }}
+                    valueInfos={serverSettings.extensionRepos.map((extensionRepo) => [extensionRepo])}
+                    addItemButtonTitle={t`Add repository`}
+                    placeholder="https://github.com/MY_ACCOUNT/MY_REPO/tree/repo"
+                    validateItem={(repo) =>
+                        !!repo.match(
+                            /https:\/\/(www\.|raw\.)?(github|githubusercontent)\.com\/([^/]+)\/([^/]+)((\/tree|\/blob)?\/([^/\n]*))?(\/([^/\n]*\.json)?)?/g,
+                        )
+                    }
+                    invalidItemError={t`Invalid repository url`}
+                />
+                <TextSetting
+                    settingName={t`Local source location`}
+                    dialogDescription={t`The path to the directory on the server where local source files are saved in`}
+                    value={serverSettings.localSourcePath}
+                    settingDescription={
+                        serverSettings.localSourcePath.length ? serverSettings.localSourcePath : t`Default`
+                    }
+                    handleChange={(path) => updateSetting('localSourcePath', path)}
+                />
+            </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="browse-settings-source">
+                        {t`NSFW (18+) sources`}
+                    </ListSubheader>
                 }
-                invalidItemError={t`Invalid repository url`}
+            >
-            />
+                <ListItem>
-            <TextSetting
+                    <ListItemText primary={t`Show in sources and extensions lists`} />
-                settingName={t`Local source location`}
+                    <Switch
-                dialogDescription={t`The path to the directory on the server where local source files are saved in`}
+                        edge="end"
-                value={serverSettings.localSourcePath}
+                        checked={showNsfw}
-                settingDescription={serverSettings.localSourcePath.length ? serverSettings.localSourcePath : t`Default`}
+                        onChange={() => updateMetadataServerSettings('showNsfw', !showNsfw)}
-                handleChange={(path) => updateSetting('localSourcePath', path)}
+                    />
-            />
+                </ListItem>
+                <Stack sx={{ px: 2, gap: 1 }}>
+                    <ErrorOutlineOutlinedIcon />
+                    <Typography color="textSecondary">{t`This does not prevent unofficial or potentially incorrectly flagged extensions from surfacing NSFW (18+) content within the app.`}</Typography>
+                </Stack>
+            </List>
         </List>
     );
 };

src/i18n/locales/en.po

@@ -2493,6 +2493,10 @@ msgstr "Not yet released"
 msgid "Novel"
 msgstr "Novel"
 
+#: src/features/browse/screens/BrowseSettings.tsx
+msgid "NSFW (18+) sources"
+msgstr "NSFW (18+) sources"
+
 #: src/features/settings/screens/ServerSettings.tsx
 msgid ""
 "Number of items per page in OPDS feeds (e.g., Library History, Manga Chapters).\n"
@@ -3172,6 +3176,10 @@ msgstr "Show entry"
 msgid "Show icon in system tray"
 msgstr "Show icon in system tray"
 
+#: src/features/browse/screens/BrowseSettings.tsx
+msgid "Show in sources and extensions lists"
+msgstr "Show in sources and extensions lists"
+
 #: src/base/components/feedback/EmptyView.tsx
 #: src/features/tracker/components/cards/TrackerMangaCard.tsx
 msgid "Show less"
@@ -3185,14 +3193,6 @@ msgstr "Show less"
 msgid "Show more"
 msgstr "Show more"
 
-#: src/features/browse/screens/BrowseSettings.tsx
-msgid "Show NSFW (18+)"
-msgstr "Show NSFW (18+)"
-
-#: src/features/browse/screens/BrowseSettings.tsx
-msgid "Show NSFW (18+) sources in sources and extensions lists"
-msgstr "Show NSFW (18+) sources in sources and extensions lists"
-
 #: src/features/library/components/LibraryOptionsPanel.tsx
 msgid "Show number of items"
 msgstr "Show number of items"
@@ -3326,6 +3326,10 @@ msgstr "Source entry - {sourceTitle}"
 msgid "Source title"
 msgstr "Source title"
 
+#: src/features/browse/screens/BrowseSettings.tsx
+msgid "Sources"
+msgstr "Sources"
+
 #: src/features/settings/Settings.constants.ts
 msgid "Stable"
 msgstr "Stable"
@@ -3547,6 +3551,10 @@ msgstr "These options are slow and dangerous and may lead to restrictions from s
 msgid "Third to last read chapter"
 msgstr "Third to last read chapter"
 
+#: src/features/browse/screens/BrowseSettings.tsx
+msgid "This does not prevent unofficial or potentially incorrectly flagged extensions from surfacing NSFW (18+) content within the app."
+msgstr "This does not prevent unofficial or potentially incorrectly flagged extensions from surfacing NSFW (18+) content within the app."
+
 #: src/features/settings/screens/ServerSettings.tsx
 msgid "This icon will be shown on the system that is running the server"
 msgstr "This icon will be shown on the system that is running the server"