💄 Prettier repository

src/widgets/WidgetWrapper.tsx

@@ -1,4 +1,5 @@
 import { ComponentType } from 'react';
+
 import Widgets from '.';
 import { HomarrCardWrapper } from '../components/Dashboard/Tiles/HomarrCardWrapper';
 import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';

src/widgets/bookmark/BookmarkWidgetTile.tsx

@@ -8,11 +8,11 @@ import {
   Image,
   ScrollArea,
   Stack,
+  Switch,
   Text,
   TextInput,
   Title,
   createStyles,
-  Switch,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import {
@@ -27,10 +27,11 @@ import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { v4 } from 'uuid';
 import { z } from 'zod';
+
+import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
 import { IconSelector } from '../../components/IconSelector/IconSelector';
 import { defineWidget } from '../helper';
 import { IDraggableEditableListInputValue, IWidget } from '../widgets';
-import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
 
 interface BookmarkItem {
   id: string;

src/widgets/boundary.tsx

@@ -1,9 +1,10 @@
-import Consola from 'consola';
-import React, { ReactNode } from 'react';
-import { openModal } from '@mantine/modals';
-import { withTranslation } from 'next-i18next';
 import { Button, Card, Center, Code, Group, ScrollArea, Stack, Text, Title } from '@mantine/core';
+import { openModal } from '@mantine/modals';
 import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/icons-react';
+import Consola from 'consola';
+import { withTranslation } from 'next-i18next';
+import React, { ReactNode } from 'react';
+
 import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';
 import { IWidget } from './widgets';
 

src/widgets/calendar/CalendarDay.tsx

@@ -1,9 +1,16 @@
-import { Container, Indicator, IndicatorProps, Popover, useMantineTheme, Button } from '@mantine/core';
+import {
+  Button,
+  Container,
+  Indicator,
+  IndicatorProps,
+  Popover,
+  useMantineTheme,
+} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+
 import { MediaList } from './MediaList';
 import { MediasType } from './type';
 
-
 interface CalendarDayProps {
   date: Date;
   medias: MediasType;
@@ -15,28 +22,28 @@ export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
   const { radius, fn } = useMantineTheme();
   var indicatorSize = 10;
   var indicatorOffset = -4;
-  switch(size){
-    case "xs": {
+  switch (size) {
+    case 'xs': {
       indicatorSize += 0;
       indicatorOffset -= 0;
       break;
     }
-    case "sm": {
+    case 'sm': {
       indicatorSize += 1;
       indicatorOffset -= 1;
       break;
     }
-    case "md": {
+    case 'md': {
       indicatorSize += 2;
       indicatorOffset -= 1;
       break;
     }
-    case "lg": {
+    case 'lg': {
       indicatorSize += 3;
       indicatorOffset -= 2;
       break;
     }
-    case "xl": {
+    case 'xl': {
       indicatorSize += 4;
       indicatorOffset -= 3;
       break;
@@ -62,18 +69,42 @@ export const CalendarDay = ({ date, medias, size }: CalendarDayProps) => {
           h="100%"
           w="100%"
           sx={{
-            padding:'18% !important',
-            borderRadius: ['xs','sm'].includes(size) ? radius.md : radius.lg,
-            borderStyle: "solid",
-            borderWidth: "0.2rem",
+            padding: '18% !important',
+            borderRadius: ['xs', 'sm'].includes(size) ? radius.md : radius.lg,
+            borderStyle: 'solid',
+            borderWidth: '0.2rem',
             borderColor: opened ? fn.primaryColor() : 'transparent',
           }}
         >
-          <DayIndicator size={indicatorSize} offset={indicatorOffset} color="red" position="bottom-start" medias={medias.books}>
-            <DayIndicator size={indicatorSize} offset={indicatorOffset} color="yellow" position="top-start" medias={medias.movies}>
-              <DayIndicator size={indicatorSize} offset={indicatorOffset} color="blue" position="top-end" medias={medias.tvShows}>
-                <DayIndicator size={indicatorSize} offset={indicatorOffset} color="green" position="bottom-end" medias={medias.musics}>
-                  <div style={{textAlign: 'center'}}>{date.getDate()}</div>
+          <DayIndicator
+            size={indicatorSize}
+            offset={indicatorOffset}
+            color="red"
+            position="bottom-start"
+            medias={medias.books}
+          >
+            <DayIndicator
+              size={indicatorSize}
+              offset={indicatorOffset}
+              color="yellow"
+              position="top-start"
+              medias={medias.movies}
+            >
+              <DayIndicator
+                size={indicatorSize}
+                offset={indicatorOffset}
+                color="blue"
+                position="top-end"
+                medias={medias.tvShows}
+              >
+                <DayIndicator
+                  size={indicatorSize}
+                  offset={indicatorOffset}
+                  color="green"
+                  position="bottom-end"
+                  medias={medias.musics}
+                >
+                  <div style={{ textAlign: 'center' }}>{date.getDate()}</div>
                 </DayIndicator>
               </DayIndicator>
             </DayIndicator>

src/widgets/calendar/CalendarTile.tsx

@@ -4,6 +4,7 @@ import { IconCalendarTime } from '@tabler/icons-react';
 import { i18n } from 'next-i18next';
 import { useState } from 'react';
 import { api } from '~/utils/api';
+
 import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
 import { useConfigContext } from '../../config/provider';
 import { defineWidget } from '../helper';
@@ -37,7 +38,7 @@ const definition = defineWidget({
         { label: 'Digital', value: 'digitalRelease' },
       ],
     },
-    fontSize:{
+    fontSize: {
       type: 'select',
       defaultValue: 'xs',
       data: [
@@ -46,7 +47,7 @@ const definition = defineWidget({
         { label: 'Medium', value: 'md' },
         { label: 'Large', value: 'lg' },
         { label: 'Extra Large', value: 'xl' },
-      ]
+      ],
     },
   },
   gridstack: {
@@ -102,10 +103,10 @@ function CalendarTile({ widget }: CalendarTileProps) {
           marginBottom: '0.35rem !important',
         },
         calendarHeaderLevel: {
-          height:"100%",
+          height: '100%',
         },
-        calendarHeaderControl:{
-          height:"100%",
+        calendarHeaderControl: {
+          height: '100%',
         },
         calendar: {
           height: '100%',
@@ -122,21 +123,25 @@ function CalendarTile({ widget }: CalendarTileProps) {
           flexDirection: 'column',
           width: '100%',
         },
-        monthCell:{
-          textAlign:'center',
+        monthCell: {
+          textAlign: 'center',
         },
         month: {
           flex: 1,
         },
-        day:{
-          borderRadius: ['xs','sm'].includes(widget.properties.fontSize) ? radius.md : radius.lg,
+        day: {
+          borderRadius: ['xs', 'sm'].includes(widget.properties.fontSize) ? radius.md : radius.lg,
         },
       }}
       getDayProps={(date) => ({
         bg: getBgColorByDateAndTheme(colorScheme, date),
       })}
       renderDay={(date) => (
-        <CalendarDay date={date} medias={getReleasedMediasForDate(medias, date, widget)} size={widget.properties.fontSize} />
+        <CalendarDay
+          date={date}
+          medias={getReleasedMediasForDate(medias, date, widget)}
+          size={widget.properties.fontSize}
+        />
       )}
     />
   );

src/widgets/calendar/MediaList.tsx

@@ -1,6 +1,7 @@
-import { createStyles, Divider, ScrollArea } from '@mantine/core';
+import { Divider, ScrollArea, createStyles } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 import React from 'react';
+
 import {
   LidarrMediaDisplay,
   RadarrMediaDisplay,

src/widgets/calendar/bg-calculator.ts

@@ -1,4 +1,5 @@
 import { ColorScheme, useMantineTheme } from '@mantine/core';
+
 import { isToday } from '../../tools/shared/time/date.tool';
 
 export const getBgColorByDateAndTheme = (colorScheme: ColorScheme, date: Date) => {

src/widgets/dashDot/DashDotCompactNetwork.tsx

@@ -1,9 +1,10 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-import { bytes } from '../../tools/bytesHelper';
 import { RouterOutputs } from '~/utils/api';
 
+import { bytes } from '../../tools/bytesHelper';
+
 interface DashDotCompactNetworkProps {
   info: DashDotInfo;
 }

src/widgets/dashDot/DashDotCompactStorage.tsx

@@ -1,6 +1,7 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
+
 import { bytes } from '../../tools/bytesHelper';
 import { percentage } from '../../tools/shared/math/percentage.tool';
 import { DashDotInfo } from './DashDotCompactNetwork';

src/widgets/dashDot/DashDotGraph.tsx

@@ -1,5 +1,6 @@
 import { Title, createStyles, getStylesRef, useMantineTheme } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
+
 import { DashDotCompactNetwork, DashDotInfo } from './DashDotCompactNetwork';
 import { DashDotCompactStorage } from './DashDotCompactStorage';
 

src/widgets/dashDot/DashDotTile.tsx

@@ -1,7 +1,8 @@
-import { Center, createStyles, Grid, Stack, Text, Title } from '@mantine/core';
+import { Center, Grid, Stack, Text, Title, createStyles } from '@mantine/core';
 import { IconUnlink } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
+
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { DashDotGraph } from './DashDotGraph';

src/widgets/date/DateTile.tsx

@@ -3,6 +3,7 @@ import { useElementSize } from '@mantine/hooks';
 import { IconClock } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
+
 import { useSetSafeInterval } from '../../hooks/useSetSafeInterval';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';

src/widgets/dnshole/DnsHoleSummary.tsx

@@ -9,6 +9,7 @@ import {
 import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '~/config/provider';
 import { api } from '~/utils/api';
+
 import { formatNumber } from '../../tools/client/math';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';

src/widgets/dnshole/type.ts

@@ -4,7 +4,7 @@ export type AdStatistics = {
   adsBlockedTodayPercentage: number;
   dnsQueriesToday: number;
   status: {
-    status: PiholeApiSummaryType['status'],
+    status: PiholeApiSummaryType['status'];
     appId: string;
   }[];
 };

src/widgets/download-speed/Tile.tsx

@@ -4,17 +4,18 @@ import {
   Card,
   Group,
   Stack,
-  Title,
   Text,
+  Title,
   Tooltip,
   useMantineTheme,
 } from '@mantine/core';
 import { useElementSize, useListState } from '@mantine/hooks';
 import { linearGradientDef } from '@nivo/core';
-import { Serie, Datum, ResponsiveLine } from '@nivo/line';
+import { Datum, ResponsiveLine, Serie } from '@nivo/line';
 import { IconDownload, IconUpload } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
+
 import { AppAvatar } from '../../components/AppAvatar';
 import { useConfigContext } from '../../config/provider';
 import { useGetDownloadClientsQueue } from '../../hooks/widgets/download-speed/useGetNetworkSpeed';

src/widgets/download-speed/TorrentNetworkTrafficTile.tsx

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

src/widgets/helper.ts

@@ -1,5 +1,4 @@
 // Method which allows to define the type verry specific and type checks all
-
 import { IWidgetDefinition } from './widgets';
 
 // The options of IWidgetDefinition are so heavily typed that it even used 'true' as type

src/widgets/iframe/IFrameTile.tsx

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

src/widgets/index.ts

@@ -1,19 +1,19 @@
+import bookmark from './bookmark/BookmarkWidgetTile';
 import calendar from './calendar/CalendarTile';
 import dashdot from './dashDot/DashDotTile';
 import date from './date/DateTile';
+import dnsHoleControls from './dnshole/DnsHoleControls';
+import dnsHoleSummary from './dnshole/DnsHoleSummary';
 import torrentNetworkTraffic from './download-speed/TorrentNetworkTrafficTile';
 import iframe from './iframe/IFrameTile';
+import mediaRequestsList from './media-requests/MediaRequestListTile';
+import mediaRequestsStats from './media-requests/MediaRequestStatsTile';
 import mediaServer from './media-server/MediaServerTile';
 import rss from './rss/RssWidgetTile';
 import torrent from './torrent/TorrentTile';
 import usenet from './useNet/UseNetTile';
 import videoStream from './video/VideoStreamTile';
 import weather from './weather/WeatherTile';
-import mediaRequestsList from './media-requests/MediaRequestListTile';
-import mediaRequestsStats from './media-requests/MediaRequestStatsTile';
-import dnsHoleSummary from './dnshole/DnsHoleSummary';
-import dnsHoleControls from './dnshole/DnsHoleControls';
-import bookmark from './bookmark/BookmarkWidgetTile';
 
 export default {
   calendar,

src/widgets/loading.tsx

@@ -1,7 +1,7 @@
 import { Center, Loader } from '@mantine/core';
 
 export const WidgetLoading = () => (
-    <Center h="100%">
-      <Loader variant="bars" />
-    </Center>
-  );
+  <Center h="100%">
+    <Loader variant="bars" />
+  </Center>
+);

src/widgets/media-requests/MediaRequestListTile.tsx

@@ -13,13 +13,14 @@ import {
 import { notifications } from '@mantine/notifications';
 import { IconCheck, IconGitPullRequest, IconThumbDown, IconThumbUp } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+import { useConfigContext } from '~/config/provider';
 import { api } from '~/utils/api';
+
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
 import { useMediaRequestQuery } from './media-request-query';
 import { MediaRequest, MediaRequestStatus } from './media-request-types';
-import { useConfigContext } from '~/config/provider';
 
 const definition = defineWidget({
   id: 'media-requests-list',

src/widgets/media-requests/MediaRequestStatsTile.tsx

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

src/widgets/media-requests/media-request-types.tsx

@@ -18,5 +18,5 @@ export type MediaRequest = {
 export enum MediaRequestStatus {
   PendingApproval = 1,
   Approved = 2,
-  Declined = 3
+  Declined = 3,
 }

src/widgets/media-server/DetailCollapseable.tsx

@@ -1,5 +1,6 @@
 import { Card, Divider, Flex, Grid, Group, Text } from '@mantine/core';
 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

@@ -11,6 +11,7 @@ import {
 } from '@mantine/core';
 import { IconAlertTriangle, IconMovie } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+
 import { AppAvatar } from '../../components/AppAvatar';
 import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
 import { useConfigContext } from '../../config/provider';

src/widgets/media-server/NowPlayingDisplay.tsx

@@ -1,12 +1,13 @@
 import { Flex, Stack, Text } from '@mantine/core';
 import {
+  Icon,
   IconDeviceTv,
   IconHeadphones,
   IconQuestionMark,
   IconVideo,
-  Icon,
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+
 import { GenericSessionInfo } from '../../types/api/media-server/session-info';
 
 export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo }) => {

src/widgets/media-server/TableRow.tsx

@@ -1,5 +1,6 @@
-import { Avatar, Collapse, createStyles, Flex, Text } from '@mantine/core';
+import { Avatar, Collapse, Flex, Text, createStyles } from '@mantine/core';
 import { useState } from 'react';
+
 import { AppAvatar } from '../../components/AppAvatar';
 import { GenericSessionInfo } from '../../types/api/media-server/session-info';
 import { AppType } from '../../types/app';

src/widgets/rss/RssWidgetTile.tsx

@@ -18,9 +18,9 @@ import { IconClock, IconRefresh, IconRss } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
-
 import { useConfigContext } from '~/config/provider';
 import { api } from '~/utils/api';
+
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 

src/widgets/torrent/TorrentQueueItem.tsx

@@ -24,6 +24,7 @@ import {
   IconUpload,
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+
 import { calculateETA } from '../../tools/client/calculateEta';
 import { humanFileSize } from '../../tools/humanFileSize';
 import { AppType } from '../../types/app';

src/widgets/torrent/TorrentTile.spec.ts

@@ -1,6 +1,5 @@
 import { NormalizedTorrent, TorrentState } from '@ctrl/shared-torrent';
-
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { ITorrent, filterTorrents } from './TorrentTile';
 
@@ -186,7 +185,7 @@ const constructTorrent = (
   name: string,
   isCompleted: boolean,
   downloadSpeed: number,
-  label?: string,
+  label?: string
 ): NormalizedTorrent => ({
   id,
   name,

src/widgets/torrent/TorrentTile.tsx

@@ -1,5 +1,4 @@
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
-
 import {
   Badge,
   Center,
@@ -13,22 +12,18 @@ import {
   Title,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-
 import { IconFileDownload, IconInfoCircle } from '@tabler/icons-react';
-
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
-
 import { useTranslation } from 'next-i18next';
 
-import { defineWidget } from '../helper';
-import { IWidget } from '../widgets';
 import { MIN_WIDTH_MOBILE } from '../../constants/constants';
-import { AppIntegrationType } from '../../types/app';
 import { useGetDownloadClientsQueue } from '../../hooks/widgets/download-speed/useGetNetworkSpeed';
 import { NormalizedDownloadQueueResponse } from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
-
+import { AppIntegrationType } from '../../types/app';
+import { defineWidget } from '../helper';
+import { IWidget } from '../widgets';
 import { BitTorrrentQueueItem } from './TorrentQueueItem';
 
 dayjs.extend(duration);

src/widgets/useNet/UseNetTile.tsx

@@ -1,11 +1,11 @@
 import { Badge, Button, Group, Select, Stack, Tabs, Text, Title } from '@mantine/core';
-import { IconFileDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
-
 import { useElementSize } from '@mantine/hooks';
+import { IconFileDownload, IconPlayerPause, IconPlayerPlay } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
+import { useEffect, useState } from 'react';
+
 import { useConfigContext } from '../../config/provider';
 import { MIN_WIDTH_MOBILE } from '../../constants/constants';
 import {

src/widgets/useNet/UsenetHistoryList.tsx

@@ -17,6 +17,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
+
 import { useGetUsenetHistory } from '../../hooks/widgets/dashDot/api';
 import { parseDuration } from '../../tools/client/parseDuration';
 import { humanFileSize } from '../../tools/humanFileSize';

src/widgets/video/VideoFeed.tsx

@@ -1,4 +1,4 @@
-import { createStyles, LoadingOverlay } from '@mantine/core';
+import { LoadingOverlay, createStyles } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';

src/widgets/video/VideoStreamTile.tsx

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

src/widgets/weather/WeatherIcon.tsx

@@ -1,5 +1,6 @@
 import { Box, Tooltip } from '@mantine/core';
 import {
+  Icon,
   IconCloud,
   IconCloudFog,
   IconCloudRain,
@@ -8,7 +9,6 @@ import {
   IconQuestionMark,
   IconSnowflake,
   IconSun,
-  Icon,
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 

src/widgets/weather/WeatherTile.tsx

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

src/widgets/widgets.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   MultiSelectProps,
   NumberInputProps,
@@ -8,6 +7,7 @@ import {
   TextInputProps,
 } from '@mantine/core';
 import { Icon } from '@tabler/icons-react';
+import React from 'react';
 
 import { AreaType } from '../types/area';
 import { ShapeType } from '../types/shape';