🌐 Cache settings

public/locales/en/settings/general/cache-buttons.json

@@ -0,0 +1,24 @@
+{
+  "title": "Cache cleaning",
+  "selector": {
+    "label": "Select the cache(s) to clear",
+    "data": {
+      "ping": "Ping queries",
+      "repositoryIcons": "Remote/Local icons",
+      "calendar&medias": "Medias from the Calendar",
+      "weather": "Weather data"
+    }
+  },
+  "buttons": {
+    "notificationTitle": "Cache Cleared",
+    "clearAll":{
+      "text": "Clear all cache",
+      "notificationMessage": "All cache has been cleared"
+    },
+    "clearSelect":{
+      "text": "Clear selected queries",
+      "notificationMessageSingle": "Cache for {{value}} has been cleared",
+      "notificationMessageMulti": "Cache for {{values}} have been cleared"
+    }
+  }
+}

src/components/Settings/Common/CacheButtons.tsx

@@ -4,25 +4,29 @@ import { IconTrash } from '@tabler/icons-react';
 import { useState } from 'react';
 
 import { queryClient } from '../../../tools/server/configurations/tanstack/queryClient.tool';
-
-const data = [
-  { value: 'ping', label: 'Ping queries' },
-  { value: 'repository-icons', label: 'Remote/Local icons' },
-  { value: 'calendar/medias', label: 'Medais from the Calendar' },
-  { value: 'weather', label: 'Weather data' },
-];
+import { useTranslation } from 'react-i18next';
 
 export function CacheButtons() {
   const [value, setValue] = useState<string[]>([]);
+
+  const { t } = useTranslation('settings/general/cache-buttons')
+
+  const data = [
+    { value: 'ping', label: t('selector.data.ping') },
+    { value: 'repository-icons', label: t('selector.data.repositoryIcons') },
+    { value: 'calendar/medias', label: t('selector.data.calendar&medias') },
+    { value: 'weather', label: t('selector.data.weather') },
+  ];
+
   return (
     <Stack spacing="xs">
-      <Title order={4}>Cache cleaning</Title>
+      <Title order={4}>{t('title')}</Title>
       <MultiSelect
         value={value}
         searchable
         onChange={setValue}
         data={data}
-        label="Select the cache(s) to clear"
+        label={t('selector.label')}
       />
       <Group>
         <Button
@@ -31,8 +35,11 @@ export function CacheButtons() {
           onClick={() =>
             queryClient.invalidateQueries(value).then(() =>
               notifications.show({
-                title: 'Cache cleared',
-                message: `Cache for ${value.join(', ')} has been cleared`,
+                title: t('buttons.notificationTitle'),
+                message:
+                  value.length > 1 ?
+                  t('buttons.clearSelect.notificationMessageMulti', {values: value.join(', ')}) :
+                  t('buttons.clearSelect.notificationMessageSingle', {value: value[0]}),
                 color: 'teal',
                 icon: <IconTrash />,
                 autoClose: 5000,
@@ -40,14 +47,14 @@ export function CacheButtons() {
             )
           }
         >
-          Clear selected queries
+          {t('buttons.clearSelect.text')}
         </Button>
         <Button
           onClick={() =>
             queryClient.invalidateQueries().then(() =>
               notifications.show({
-                title: 'Cache cleared',
-                message: 'All cache has been cleared',
+                title: t('buttons.notificationTitle'),
+                message: t('buttons.clearAll.notificationMessage'),
                 color: 'teal',
                 icon: <IconTrash />,
                 autoClose: 5000,
@@ -55,7 +62,7 @@ export function CacheButtons() {
             )
           }
         >
-          Clear all cache
+          {t('buttons.clearAll.text')}
         </Button>
       </Group>
     </Stack>

src/tools/server/translation-namespaces.ts

@@ -8,11 +8,12 @@ export const dashboardNamespaces = [
   'layout/header/actions/toggle-edit-mode',
   'layout/mobile/drawer',
   'settings/common',
-  'settings/general/theme-selector',
+  'settings/general/cache-buttons',
   'settings/general/config-changer',
   'settings/general/edit-mode-toggle',
   'settings/general/internationalization',
   'settings/general/search-engine',
+  'settings/general/theme-selector',
   'settings/general/widget-positions',
   'settings/customization/accessibility',
   'settings/customization/general',