Merge branch 'dev' into cache-invalidation

src/widgets/bookmark/BookmarkWidgetTile.tsx

@@ -21,7 +21,7 @@ import {
   IconPlaylistX,
   IconTrash,
   IconTypography,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { v4 } from 'uuid';

src/widgets/boundary.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import { openModal } from '@mantine/modals';
 import { withTranslation } from 'next-i18next';
 import { Button, Card, Center, Code, Group, Stack, Text, Title } from '@mantine/core';
-import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/icons';
+import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/icons-react';
 
 type ErrorBoundaryState = {
   hasError: boolean;

src/widgets/calendar/CalendarTile.tsx

@@ -1,6 +1,6 @@
 import { useMantineTheme } from '@mantine/core';
 import { Calendar } from '@mantine/dates';
-import { IconCalendarTime } from '@tabler/icons';
+import { IconCalendarTime } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { i18n } from 'next-i18next';
 import { useState } from 'react';

src/widgets/dashDot/DashDotCompactNetwork.tsx

@@ -1,5 +1,5 @@
 import { Group, Stack, Text } from '@mantine/core';
-import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons';
+import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { bytes } from '../../tools/bytesHelper';
 

src/widgets/dashDot/DashDotTile.tsx

@@ -1,5 +1,5 @@
 import { Center, createStyles, Grid, Stack, Text, Title } from '@mantine/core';
-import { IconUnlink } from '@tabler/icons';
+import { IconUnlink } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useTranslation } from 'next-i18next';

src/widgets/date/DateTile.tsx

@@ -1,6 +1,6 @@
 import { Stack, Text, Title } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconClock } from '@tabler/icons';
+import { IconClock } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
 import { useSetSafeInterval } from '../../hooks/useSetSafeInterval';

src/widgets/dnshole/DnsHoleControls.tsx

@@ -1,6 +1,6 @@
 import { Badge, Box, Button, Card, Group, Image, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
-import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons';
+import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
 import { useConfigContext } from '../../config/provider';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
@@ -31,7 +31,7 @@ interface DnsHoleControlsWidgetProps {
 function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
   const { isInitialLoading, data, refetch } = useDnsHoleSummeryQuery();
   const { mutateAsync } = useDnsHoleControlMutation();
-  const { t } = useTranslation('modules/dns-hole-controls');
+  const { t } = useTranslation('common');
 
   const { config } = useConfigContext();
 
@@ -51,7 +51,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           variant="light"
           color="green"
         >
-          {t('card.buttons.enableAll')}
+          {t('enableAll')}
         </Button>
         <Button
           onClick={async () => {
@@ -62,7 +62,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           variant="light"
           color="red"
         >
-          {t('card.buttons.disableAll')}
+          {t('disableAll')}
         </Button>
       </Group>
 
@@ -101,18 +101,18 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
 }
 
 const StatusBadge = ({ status }: { status: PiholeApiSummaryType['status'] }) => {
-  const { t } = useTranslation('modules/dns-hole-controls');
+  const { t } = useTranslation('common');
   if (status === 'enabled') {
     return (
       <Badge variant="dot" color="green">
-        {t('card.status.enabled')}
+        {t('enabled')}
       </Badge>
     );
   }
 
   return (
     <Badge variant="dot" color="red">
-      {t('card.status.disabled')}
+      {t('disabled')}
     </Badge>
   );
 };

src/widgets/dnshole/DnsHoleSummary.tsx

@@ -1,6 +1,12 @@
 import { useTranslation } from 'next-i18next';
 import { Card, Center, Container, Stack, Text } from '@mantine/core';
-import { IconAd, IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from '@tabler/icons';
+import {
+  IconAd,
+  IconBarrierBlock,
+  IconPercentage,
+  IconSearch,
+  IconWorldWww,
+} from '@tabler/icons-react';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
@@ -103,12 +109,7 @@ function DnsHoleSummaryWidgetTile({ widget }: DnsHoleSummaryWidgetProps) {
         <Center h="100%">
           <Stack align="center" spacing="xs">
             <IconPercentage size={30} />
-            <div>
-              <Text align="center">{(data.adsBlockedTodayPercentage * 100).toFixed(2)}%</Text>
-              <Text align="center" lh={1.2} size="sm">
-                {t('card.metrics.queriesBlockedTodayPercentage')}
-              </Text>
-            </div>
+            <Text align="center">{(data.adsBlockedTodayPercentage * 100).toFixed(2)}%</Text>
           </Stack>
         </Center>
       </Card>

src/widgets/download-speed/Tile.tsx

@@ -12,7 +12,7 @@ import {
 import { useElementSize, useListState } from '@mantine/hooks';
 import { linearGradientDef } from '@nivo/core';
 import { Serie, Datum, ResponsiveLine } from '@nivo/line';
-import { IconDownload, IconUpload } from '@tabler/icons';
+import { IconDownload, IconUpload } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { AppAvatar } from '../../components/AppAvatar';

src/widgets/download-speed/TorrentNetworkTrafficTile.tsx

@@ -1,4 +1,4 @@
-import { IconArrowsUpDown } from '@tabler/icons';
+import { IconArrowsUpDown } from '@tabler/icons-react';
 
 import dynamic from 'next/dynamic';
 import { defineWidget } from '../helper';

src/widgets/iframe/IFrameTile.tsx

@@ -1,5 +1,5 @@
 import { Center, createStyles, Stack, Title, Text, Container } from '@mantine/core';
-import { IconBrowser, IconUnlink } from '@tabler/icons';
+import { IconBrowser, IconUnlink } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';

src/widgets/media-requests/MediaRequestListTile.tsx

@@ -1,6 +1,6 @@
 import { Badge, Card, Center, Flex, Group, Image, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
-import { IconGitPullRequest } from '@tabler/icons';
+import { IconGitPullRequest } from '@tabler/icons-react';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';

src/widgets/media-requests/MediaRequestStatsTile.tsx

@@ -1,5 +1,5 @@
 import { Card, Center, Flex, Stack, Text } from '@mantine/core';
-import { IconChartBar } from '@tabler/icons';
+import { IconChartBar } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';

src/widgets/media-server/DetailCollapseable.tsx

@@ -1,5 +1,5 @@
 import { Card, Divider, Flex, Grid, Group, Text } from '@mantine/core';
-import { IconDeviceMobile, IconId } from '@tabler/icons';
+import { IconDeviceMobile, IconId } from '@tabler/icons-react';
 import { GenericSessionInfo } from '../../types/api/media-server/session-info';
 
 export const DetailCollapseable = ({ session }: { session: GenericSessionInfo }) => {

src/widgets/media-server/MediaServerTile.tsx

@@ -9,7 +9,7 @@ import {
   Text,
   Title,
 } from '@mantine/core';
-import { IconAlertTriangle, IconMovie } from '@tabler/icons';
+import { IconAlertTriangle, IconMovie } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { AppAvatar } from '../../components/AppAvatar';
 import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';

src/widgets/media-server/NowPlayingDisplay.tsx

@@ -4,8 +4,8 @@ import {
   IconHeadphones,
   IconQuestionMark,
   IconVideo,
-  TablerIcon,
-} from '@tabler/icons';
+  Icon,
+} from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { GenericSessionInfo } from '../../types/api/media-server/session-info';
 
@@ -16,7 +16,7 @@ export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo })
     return null;
   }
 
-  const Icon = (): TablerIcon => {
+  const Icon = (): Icon => {
     switch (session.currentlyPlaying?.type) {
       case 'audio':
         return IconHeadphones;

src/widgets/rss/RssWidgetTile.tsx

@@ -15,7 +15,7 @@ import {
   Title,
   createStyles,
 } from '@mantine/core';
-import { IconClock, IconRefresh, IconRss } from '@tabler/icons';
+import { IconClock, IconRefresh, IconRss } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { useTranslation } from 'next-i18next';

src/widgets/torrent/TorrentQueueItem.tsx

@@ -22,7 +22,7 @@ import {
   IconPercentage,
   IconSortDescending,
   IconUpload,
-} from '@tabler/icons';
+} from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { calculateETA } from '../../tools/client/calculateEta';
 import { humanFileSize } from '../../tools/humanFileSize';

src/widgets/torrent/TorrentTile.tsx

@@ -14,7 +14,7 @@ import {
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 
-import { IconFileDownload, IconInfoCircle } from '@tabler/icons';
+import { IconFileDownload, IconInfoCircle } from '@tabler/icons-react';
 
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';

src/widgets/useNet/UseNetTile.tsx

@@ -1,5 +1,5 @@
 import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core';
-import { IconFileDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { IconFileDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 
 import { useElementSize } from '@mantine/hooks';

src/widgets/useNet/UsenetHistoryList.tsx

@@ -12,7 +12,7 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconAlertCircle } from '@tabler/icons';
+import { IconAlertCircle } from '@tabler/icons-react';
 import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';

src/widgets/useNet/UsenetQueueList.tsx

@@ -15,7 +15,7 @@ import {
   useMantineTheme,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
+import { IconAlertCircle, IconPlayerPause, IconPlayerPlay } from '@tabler/icons-react';
 import { AxiosError } from 'axios';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';

src/widgets/video/VideoStreamTile.tsx

@@ -1,5 +1,5 @@
 import { Center, Group, Stack, Title } from '@mantine/core';
-import { IconDeviceCctv, IconHeartBroken } from '@tabler/icons';
+import { IconDeviceCctv, IconHeartBroken } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import { defineWidget } from '../helper';

src/widgets/weather/WeatherIcon.tsx

@@ -8,8 +8,8 @@ import {
   IconQuestionMark,
   IconSnowflake,
   IconSun,
-  TablerIcon,
-} from '@tabler/icons';
+  Icon,
+} from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
 interface WeatherIconProps {
@@ -36,7 +36,7 @@ export const WeatherIcon = ({ code }: WeatherIconProps) => {
   );
 };
 
-type WeatherDefinitionType = { icon: TablerIcon; name: string; codes: number[] };
+type WeatherDefinitionType = { icon: Icon; name: string; codes: number[] };
 
 // 0 Clear sky
 // 1, 2, 3 Mainly clear, partly cloudy, and overcast

src/widgets/weather/WeatherTile.tsx

@@ -1,6 +1,6 @@
 import { Center, Group, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconArrowDownRight, IconArrowUpRight, IconCloudRain } from '@tabler/icons';
+import { IconArrowDownRight, IconArrowUpRight, IconCloudRain } from '@tabler/icons-react';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { useWeatherForCity } from './useWeatherForCity';

src/widgets/widgets.ts

@@ -7,7 +7,7 @@ import {
   SwitchProps,
   TextInputProps,
 } from '@mantine/core';
-import { TablerIcon } from '@tabler/icons';
+import { Icon } from '@tabler/icons-react';
 
 import { AreaType } from '../types/area';
 import { ShapeType } from '../types/shape';
@@ -130,7 +130,7 @@ export type IMultipleTextInputOptionValue = {
 // is used to type the widget definitions which will be used to display all widgets
 export type IWidgetDefinition<TKey extends string = string> = {
   id: TKey;
-  icon: TablerIcon | string;
+  icon: Icon | string;
   options: {
     [key: string]: IWidgetOptionValue;
   };