⬆️ Upgrade to @tabler/icons-react

src/components/Settings/Common/CacheButtons.tsx

@@ -0,0 +1,62 @@
+import { Button, Group, MultiSelect, Stack, Title } from '@mantine/core';
+import { useState } from 'react';
+import { notifications } from '@mantine/notifications';
+import { IconTrash } from '@tabler/icons-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' },
+];
+
+export function CacheButtons() {
+  const [value, setValue] = useState<string[]>([]);
+  return (
+    <Stack spacing="xs">
+      <Title order={4}>Cache cleaning</Title>
+      <MultiSelect
+        value={value}
+        searchable
+        onChange={setValue}
+        data={data}
+        label="Select the cache(s) to clear"
+      />
+      <Group>
+        <Button
+          color="red"
+          variant="light"
+          onClick={() =>
+            queryClient.invalidateQueries(value).then(() =>
+              notifications.show({
+                title: 'Cache cleared',
+                message: `Cache for ${value.join(', ')} has been cleared`,
+                color: 'teal',
+                icon: <IconTrash />,
+                autoClose: 5000,
+              })
+            )
+          }
+        >
+          Clear selected queries
+        </Button>
+        <Button
+          onClick={() =>
+            queryClient.invalidateQueries().then(() =>
+              notifications.show({
+                title: 'Cache cleared',
+                message: 'All cache has been cleared',
+                color: 'teal',
+                icon: <IconTrash />,
+                autoClose: 5000,
+              })
+            )
+          }
+        >
+          Clear all cache
+        </Button>
+      </Group>
+    </Stack>
+  );
+}

src/components/Settings/Common/Config/ConfigActions.tsx

@@ -10,7 +10,7 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { openConfirmModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
-import { IconAlertTriangle, IconCheck, IconCopy, IconDownload, IconTrash } from '@tabler/icons';
+import { IconAlertTriangle, IconCheck, IconCopy, IconDownload, IconTrash } from '@tabler/icons-react';
 import fileDownload from 'js-file-download';
 import { Trans, useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';

src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx

@@ -1,5 +1,5 @@
 import { Alert, Paper, SegmentedControl, Space, Stack, TextInput, Title } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons';
+import { IconInfoCircle } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';

src/components/Settings/Customization/CustomizationAccordeon.tsx

@@ -1,5 +1,5 @@
 import { Accordion, Checkbox, Grid, Group, Stack, Text } from '@mantine/core';
-import { IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons';
+import { IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons-react';
 import { i18n, useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { GridstackConfiguration } from './Layout/GridstackConfiguration';

src/components/Settings/Customization/Layout/GridstackConfiguration.tsx

@@ -1,6 +1,6 @@
 import { Alert, Button, Grid, Input, LoadingOverlay, Slider } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { IconCheck, IconReload } from '@tabler/icons';
+import { IconCheck, IconReload } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';