From 4c18348890b2ce9c5c933edebd523e20c9c4c45c Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 22 Dec 2025 21:14:07 +0100
Subject: [PATCH] Move "clear cache" to "images" settings page

---
 CHANGELOG.md                                  |  1 +
 .../settings/screens/ImagesSettings.tsx       | 45 ++++++++++++++-----
 src/features/settings/screens/Settings.tsx    | 26 -----------
 3 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8bf123a..5658d575 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**Category**) Prevent creating categories without a name
 - (**WebUI Update**) Do not require a forced page refresh when an update has been detected in case the app just got opened
 - (**Manga**) Change "duplicate entry detected" dialog "show entry" button to be a link instead of a button
+- (**Settings**) Move "Clear cache" setting to new "Images" setting page
 
 ### Fixed
 - (**General**) Fix tooltips sometimes causing a layout shift
diff --git a/src/features/settings/screens/ImagesSettings.tsx b/src/features/settings/screens/ImagesSettings.tsx
index 5f16985c..34ccdc6d 100644
--- a/src/features/settings/screens/ImagesSettings.tsx
+++ b/src/features/settings/screens/ImagesSettings.tsx
@@ -10,27 +10,50 @@ import { useTranslation } from 'react-i18next';
 import List from '@mui/material/List';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
+import ListItemButton from '@mui/material/ListItemButton';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
 import { ListItemLink } from '@/base/components/lists/ListItemLink.tsx';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { ImageCache } from '@/lib/service-worker/ImageCache.ts';
+import { makeToast } from '@/base/utils/Toast.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 
 export const ImagesSettings = () => {
     const { t } = useTranslation();
 
     useAppTitle(t('settings.images.title'));
 
+    const [triggerClearServerCache, { loading: isClearingServerCache }] = requestManager.useClearServerCache();
+
+    const clearCache = async () => {
+        try {
+            await Promise.all([triggerClearServerCache(), ImageCache.clear()]);
+            makeToast(t('settings.clear_cache.label.success'), 'success');
+        } catch (e) {
+            makeToast(t('settings.clear_cache.label.failure'), 'error', getErrorMessage(e));
+        }
+    };
+
     return (
-        <List
-            sx={{ pt: 0 }}
-            subheader={
-                <ListSubheader component="div" id="image-processing-settings">
-                    {t('settings.images.processing.title')}
-                </ListSubheader>
-            }
-        >
-            <ListItemLink to={AppRoutes.settings.childRoutes.images.childRoutes.processingDownloads.path}>
-                <ListItemText primary={t('download.settings.conversion.title')} />
-            </ListItemLink>
+        <List sx={{ pt: 0 }}>
+            <ListItemButton disabled={isClearingServerCache} onClick={clearCache}>
+                <ListItemText
+                    primary={t('settings.clear_cache.label.title')}
+                    secondary={t('settings.clear_cache.label.description')}
+                />
+            </ListItemButton>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="image-processing-settings">
+                        {t('settings.images.processing.title')}
+                    </ListSubheader>
+                }
+            >
+                <ListItemLink to={AppRoutes.settings.childRoutes.images.childRoutes.processingDownloads.path}>
+                    <ListItemText primary={t('download.settings.conversion.title')} />
+                </ListItemLink>
+            </List>
         </List>
     );
 };
diff --git a/src/features/settings/screens/Settings.tsx b/src/features/settings/screens/Settings.tsx
index daf0eedb..813627c2 100644
--- a/src/features/settings/screens/Settings.tsx
+++ b/src/features/settings/screens/Settings.tsx
@@ -11,13 +11,11 @@ import List from '@mui/material/List';
 import BackupIcon from '@mui/icons-material/Backup';
 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';
@@ -25,29 +23,14 @@ import PaletteIcon from '@mui/icons-material/Palette';
 import HistoryIcon from '@mui/icons-material/History';
 import ImageIcon from '@mui/icons-material/Image';
 import { ListItemLink } from '@/base/components/lists/ListItemLink.tsx';
-import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { makeToast } from '@/base/utils/Toast.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
-import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
-import { ImageCache } from '@/lib/service-worker/ImageCache.ts';
 
 export function Settings() {
     const { t } = useTranslation();
 
     useAppTitle(t('settings.title'));
 
-    const [triggerClearServerCache, { loading: isClearingServerCache }] = requestManager.useClearServerCache();
-
-    const clearCache = async () => {
-        try {
-            await Promise.all([triggerClearServerCache(), ImageCache.clear()]);
-            makeToast(t('settings.clear_cache.label.success'), 'success');
-        } catch (e) {
-            makeToast(t('settings.clear_cache.label.failure'), 'error', getErrorMessage(e));
-        }
-    };
-
     return (
         <List sx={{ padding: 0 }}>
             <ListItemLink to={AppRoutes.settings.childRoutes.appearance.path}>
@@ -93,15 +76,6 @@ export function Settings() {
                 <ListItemText primary={t('settings.backup.title')} />
             </ListItemLink>
 
-            <ListItemButton disabled={isClearingServerCache} onClick={clearCache}>
-                <ListItemIcon>
-                    <DeleteForeverIcon />
-                </ListItemIcon>
-                <ListItemText
-                    primary={t('settings.clear_cache.label.title')}
-                    secondary={t('settings.clear_cache.label.description')}
-                />
-            </ListItemButton>
             <ListItemLink to={AppRoutes.settings.childRoutes.browse.path}>
                 <ListItemIcon>
                     <ExploreOutlinedIcon />