Add info about clear cache and reset before clicking buttons

src/frontend/screens/Settings/components/ClearCache.tsx

@@ -0,0 +1,81 @@
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { InfoBox } from 'frontend/components/UI'
+import ContextProvider from 'frontend/state/ContextProvider'
+import { CleaningServicesOutlined } from '@mui/icons-material'
+
+const ClearCache = () => {
+  const { refreshLibrary } = useContext(ContextProvider)
+  const { t } = useTranslation()
+
+  async function clearHeroicCache() {
+    const storage: Storage = window.localStorage
+    storage.removeItem('updates')
+    window.api.clearCache(true)
+    return refreshLibrary({ runInBackground: true })
+  }
+
+  return (
+    <>
+      <h3 className="settingSubheader">
+        {t('settings.advanced.title.clearCache', 'Clear Cache')}
+      </h3>
+      <InfoBox text={t('settings.advanced.details', 'Details')}>
+        {t(
+          'settings.advanced.clearCache.help1',
+          'This action will clear the following caches:'
+        )}
+        <ul>
+          <li>
+            {t(
+              'settings.advanced.clearCache.help2',
+              'Third-party game info (scores, steam compatibility, howlongtobeat, pcgamingwiki, applegamingwiki)'
+            )}
+          </li>
+          <li>
+            {t(
+              'settings.advanced.clearCache.help3',
+              'Legendary library info (list of games, install dialog info, game info)'
+            )}
+          </li>
+          <li>
+            {t(
+              'settings.advanced.clearCache.help4',
+              'GOG library info (list of games, install dialog info, api info -i.e: requirements-)'
+            )}
+          </li>
+          <li>
+            {t(
+              'settings.advanced.clearCache.help5',
+              'Amazon library info (list of games, install dialog info)'
+            )}
+          </li>
+        </ul>
+        {t('settings.advanced.clearCache.help6', 'This will NOT delete:')}
+        <ul>
+          <li>{t('settings.advanced.clearCache.help7', 'Store login')}</li>
+          <li>{t('settings.advanced.clearCache.help8', 'Installed games')}</li>
+          <li>{t('settings.advanced.clearCache.help9', 'Games settings')}</li>
+          <li>
+            {t('settings.advanced.clearCache.help10', 'Heroic configuration')}
+          </li>
+        </ul>
+      </InfoBox>
+      <button
+        className="button is-footer is-danger"
+        onClick={async () => clearHeroicCache()}
+      >
+        <div className="button-icontext-flex">
+          <div className="button-icon-flex">
+            <CleaningServicesOutlined />
+          </div>
+          <span className="button-icon-text">
+            {t('settings.clear-cache', 'Clear Heroic Cache')}
+          </span>
+        </div>
+      </button>
+    </>
+  )
+}
+
+export default ClearCache

src/frontend/screens/Settings/components/ResetHeroic.tsx

@@ -0,0 +1,36 @@
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { InfoBox } from 'frontend/components/UI'
+import ContextProvider from 'frontend/state/ContextProvider'
+import { DeleteOutline } from '@mui/icons-material'
+
+const ResetHeroic = () => {
+  const { showResetDialog } = useContext(ContextProvider)
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <h3 className="settingSubheader">
+        {t('settings.advanced.title.resetHeroic', 'Reset Heroic')}
+      </h3>
+      <InfoBox text={t('settings.advanced.details', 'Details')}>
+        {t(
+          'settings.advanced.resetHeroic.help',
+          "This will remove all Settings and Caching but won't remove your Installed games or your Epic credentials. Portable versions (AppImage, WinPortable, ...) of heroic needs to be restarted manually afterwards."
+        )}
+      </InfoBox>
+      <button className="button is-footer is-danger" onClick={showResetDialog}>
+        <div className="button-icontext-flex">
+          <div className="button-icon-flex">
+            <DeleteOutline />
+          </div>
+          <span className="button-icon-text">
+            {t('settings.reset-heroic', 'Reset Heroic')}
+          </span>
+        </div>
+      </button>
+    </>
+  )
+}
+
+export default ResetHeroic

src/frontend/screens/Settings/components/index.ts

@@ -49,3 +49,5 @@ export { default as WineVersionSelector } from './WineVersionSelector'
 export { default as WrappersTable } from './WrappersTable'
 export { default as EnableDXVKFpsLimit } from './EnableDXVKFpsLimit'
 export { default as PlaytimeSync } from './PlaytimeSync'
+export { default as ClearCache } from './ClearCache'
+export { default as ResetHeroic } from './ResetHeroic'

src/frontend/screens/Settings/index.css

@@ -211,7 +211,7 @@ a {
   margin: 0;
 }
 
-.eosSettings {
+.advancedSetting {
   text-align: start;
 }
 

src/frontend/screens/Settings/sections/AdvancedSettings/index.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  CleaningServicesOutlined,
   ContentCopyOutlined,
   DeleteOutline,
   CachedOutlined,
@@ -19,12 +18,14 @@ import {
   AltGOGdlBin,
   AltLegendaryBin,
   AltNileBin,
+  ClearCache,
   DisableLogs,
   DownloadNoHTTPS,
-  ExperimentalFeatures
+  ExperimentalFeatures,
+  ResetHeroic
 } from '../../components'
 
-export default function AdvancedSettings() {
+export default function AdvancedSetting() {
   const { config } = useContext(SettingsContext)
 
   const [isCopiedToClipboard, setCopiedToClipboard] = useState(false)
@@ -40,8 +41,7 @@ export default function AdvancedSettings() {
     useState(false)
   const eosOverlayAppName = '98bc04bc842e4906993fd6d6644ffb8d'
 
-  const { libraryStatus, platform, refreshLibrary, showResetDialog } =
-    useContext(ContextProvider)
+  const { libraryStatus, platform } = useContext(ContextProvider)
   const { t } = useTranslation()
   const isWindows = platform === 'win32'
 
@@ -161,13 +161,6 @@ export default function AdvancedSettings() {
     setEosOverlayCheckingForUpdates(false)
   }
 
-  async function clearHeroicCache() {
-    const storage: Storage = window.localStorage
-    storage.removeItem('updates')
-    window.api.clearCache(true)
-    return refreshLibrary({ runInBackground: true })
-  }
-
   return (
     <div>
       <h3 className="settingSubheader">{t('settings.navbar.advanced')}</h3>
@@ -184,7 +177,7 @@ export default function AdvancedSettings() {
 
       <hr />
 
-      <div className="eosSettings">
+      <div className="advancedSetting">
         <h3>EOS Overlay</h3>
         <div>{getMainEosText()}</div>
         <br />
@@ -295,11 +288,24 @@ export default function AdvancedSettings() {
             </button>
           )}
         </div>
-        <br />
         <hr />
+      </div>
+
+      <div className="advancedSetting">
         <ExperimentalFeatures />
         <hr />
       </div>
+
+      <div className="advancedSetting">
+        <ClearCache />
+        <hr />
+      </div>
+
+      <div className="advancedSetting">
+        <ResetHeroic />
+        <hr />
+      </div>
+
       <div className="footerFlex">
         <button
           className={classNames('button', 'is-footer', {
@@ -326,33 +332,6 @@ export default function AdvancedSettings() {
             </span>
           </div>
         </button>
-        <button
-          className="button is-footer is-danger"
-          onClick={async () => clearHeroicCache()}
-        >
-          <div className="button-icontext-flex">
-            <div className="button-icon-flex">
-              <CleaningServicesOutlined />
-            </div>
-            <span className="button-icon-text">
-              {t('settings.clear-cache', 'Clear Heroic Cache')}
-            </span>
-          </div>
-        </button>
-
-        <button
-          className="button is-footer is-danger"
-          onClick={showResetDialog}
-        >
-          <div className="button-icontext-flex">
-            <div className="button-icon-flex">
-              <DeleteOutline />
-            </div>
-            <span className="button-icon-text">
-              {t('settings.reset-heroic', 'Reset Heroic')}
-            </span>
-          </div>
-        </button>
       </div>
     </div>
   )