💄 Prettier repository

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) => {