Move "clear cache" to "images" settings page

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>
     );
 };

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 />