💄 Prettier codebase

2025-11-13 17:05:47 +01:00 · 2023-10-25 15:29:45 +02:00
parent 01ab01d159
commit 5ab0e5207b
99 changed files with 375 additions and 358 deletions
--- a/src/components/Board/Customize/Access/AccessCustomization.tsx
+++ b/src/components/Board/Customize/Access/AccessCustomization.tsx
@@ -7,7 +7,11 @@ export const AccessCustomization = () => {
  const form = useBoardCustomizationFormContext();
  return (
    <Stack>
-      <Switch label={t('allowGuests.label')} description={t('allowGuests.description')} {...form.getInputProps('access.allowGuests', { type: 'checkbox' })} />
+      <Switch
+        label={t('allowGuests.label')}
+        description={t('allowGuests.description')}
+        {...form.getInputProps('access.allowGuests', { type: 'checkbox' })}
+      />
    </Stack>
-  )
-}
+  );
+};
--- a/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx
+++ b/src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx
@@ -1,9 +1,9 @@
 import { ActionIcon, Space, createStyles } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
-
 import { useConfigContext } from '~/config/provider';
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
+
 import { MobileRibbonSidebarDrawer } from './MobileRibbonSidebarDrawer';

 export const MobileRibbons = () => {
--- a/src/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal.tsx
+++ b/src/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal.tsx
@@ -1,9 +1,9 @@
 import { SelectItem } from '@mantine/core';
 import { ContextModalProps, closeModal } from '@mantine/modals';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { AppType } from '~/types/app';
+
 import { useGridstackStore, useWrapperColumnCount } from '../../Wrappers/gridstack/store';
 import { ChangePositionModal } from './ChangePositionModal';

--- a/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx
+++ b/src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx
@@ -1,7 +1,6 @@
 import { Button, Flex, Grid, NumberInput, Select, SelectItem } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
-
 import { useConfigContext } from '~/config/provider';

 interface ChangePositionModalProps {
--- a/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx
+++ b/src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx
@@ -1,8 +1,8 @@
 import { SelectItem } from '@mantine/core';
 import { ContextModalProps, closeModal } from '@mantine/modals';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
+
 import widgets from '../../../../widgets';
 import { WidgetChangePositionModalInnerProps } from '../../Tiles/Widgets/WidgetsMenu';
 import { useGridstackStore, useWrapperColumnCount } from '../../Wrappers/gridstack/store';
--- a/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx
@@ -12,10 +12,10 @@ import {
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { AppType } from '~/types/app';
+
 import { DebouncedImage } from '../../../IconSelector/DebouncedImage';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { AppearanceTab } from './Tabs/AppereanceTab/AppereanceTab';
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx
@@ -3,9 +3,8 @@ import { UseFormReturnType } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useRef } from 'react';
-
-import { AppType } from '~/types/app';
 import { IconSelector } from '~/components/IconSelector/IconSelector';
+import { AppType } from '~/types/app';

 interface AppearanceTabProps {
  form: UseFormReturnType<AppType, (values: AppType) => AppType>;
@@ -83,7 +82,8 @@ export const AppearanceTab = ({
              data={[
                {
                  value: 'column',
-                  label: t('appearance.positionAppName.dropdown.top') as string },
+                  label: t('appearance.positionAppName.dropdown.top') as string,
+                },
                {
                  value: 'row-reverse',
                  label: t('appearance.positionAppName.dropdown.right') as string,
@@ -94,7 +94,8 @@ export const AppearanceTab = ({
                },
                {
                  value: 'row',
-                  label: t('appearance.positionAppName.dropdown.left') as string },
+                  label: t('appearance.positionAppName.dropdown.left') as string,
+                },
              ]}
              {...form.getInputProps('appearance.positionAppName')}
              onChange={(value) => {
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx
@@ -1,9 +1,18 @@
-import { Text, TextInput, Tooltip, Stack, Switch, Tabs, Group, useMantineTheme, HoverCard } from '@mantine/core';
+import {
+  Group,
+  HoverCard,
+  Stack,
+  Switch,
+  Tabs,
+  Text,
+  TextInput,
+  Tooltip,
+  useMantineTheme,
+} from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
-
+import { InfoCard } from '~/components/InfoCard/InfoCard';
 import { AppType } from '~/types/app';
-import { InfoCard } from '~/components/InfoCard/InfoCard'

 interface BehaviourTabProps {
  form: UseFormReturnType<AppType, (values: AppType) => AppType>;
@@ -19,7 +28,7 @@ export const BehaviourTab = ({ form }: BehaviourTabProps) => {
        <Switch
          label={t('behaviour.isOpeningNewTab.label')}
          description={t('behaviour.isOpeningNewTab.description')}
-          styles={{ label: { fontWeight: 500, }, description: { marginTop: 0, }, }}
+          styles={{ label: { fontWeight: 500 }, description: { marginTop: 0 } }}
          {...form.getInputProps('behaviour.isOpeningNewTab', { type: 'checkbox' })}
        />
        <Stack spacing="0.25rem">
@@ -27,13 +36,11 @@ export const BehaviourTab = ({ form }: BehaviourTabProps) => {
            <Text size="0.875rem" weight={500}>
              {t('behaviour.tooltipDescription.label')}
            </Text>
-            <InfoCard message={t('behaviour.tooltipDescription.description')}/>
+            <InfoCard message={t('behaviour.tooltipDescription.description')} />
          </Group>
-          <TextInput
-            {...form.getInputProps('behaviour.tooltipDescription')}
-          />
+          <TextInput {...form.getInputProps('behaviour.tooltipDescription')} />
        </Stack>
      </Stack>
    </Tabs.Panel>
  );
-};
+};
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx
@@ -2,8 +2,8 @@ import { Stack, Tabs, Text, TextInput } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-
 import { AppType } from '~/types/app';
+
 import { EditAppModalTab } from '../type';

 interface GeneralTabProps {
@@ -51,7 +51,7 @@ export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
            <Text color="red" mt="sm" size="sm">
              {t('behaviour.customProtocolWarning')}
            </Text>
-        )}
+          )}
      </Stack>
    </Tabs.Panel>
  );
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx
@@ -15,7 +15,6 @@ import {
 import { Icon } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-
 import { AppIntegrationPropertyAccessabilityType } from '~/types/app';

 interface GenericSecretInputProps {
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx
@@ -3,7 +3,6 @@ import { Group, Image, Select, SelectItem, Text } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 import { forwardRef } from 'react';
-
 import {
  AppIntegrationPropertyType,
  AppIntegrationType,
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
@@ -1,7 +1,6 @@
 import { Stack } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconKey } from '@tabler/icons-react';
-
 import {
  AppIntegrationPropertyType,
  AppType,
@@ -9,6 +8,7 @@ import {
  integrationFieldDefinitions,
  integrationFieldProperties,
 } from '~/types/app';
+
 import { GenericSecretInput } from '../InputElements/GenericSecretInput';

 interface IntegrationOptionsRendererProps {
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx
@@ -2,8 +2,8 @@ import { Alert, Divider, Tabs, Text } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
-
 import { AppType } from '~/types/app';
+
 import { IntegrationSelector } from './Components/InputElements/IntegrationSelector';
 import { IntegrationOptionsRenderer } from './Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer';

--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx
@@ -1,7 +1,6 @@
 import { MultiSelect, Stack, Switch, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
-
 import { StatusCodes } from '~/tools/acceptableStatusCodes';
 import { AppType } from '~/types/app';

@@ -20,7 +19,7 @@ export const NetworkTab = ({ form }: NetworkTabProps) => {
        <Switch
          label={t('network.statusChecker.label')}
          description={t('network.statusChecker.description')}
-          styles={{ label: { fontWeight: 500, }, description: { marginTop: 0, }, }}
+          styles={{ label: { fontWeight: 500 }, description: { marginTop: 0 } }}
          defaultChecked={form.values.network.enabledStatusChecker}
          {...form.getInputProps('network.enabledStatusChecker')}
        />
--- a/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
+++ b/src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx
@@ -3,10 +3,10 @@ import { showNotification } from '@mantine/notifications';
 import { Icon, IconChecks } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { v4 as uuidv4 } from 'uuid';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { IWidget, IWidgetDefinition } from '~/widgets/widgets';
+
 import { useEditModeStore } from '../../../../Views/useEditModeStore';
 import { GenericAvailableElementType } from '../Shared/GenericElementType';

--- a/src/components/Dashboard/Tiles/Apps/AppMenu.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppMenu.tsx
@@ -2,6 +2,7 @@ import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
 import { AppType } from '~/types/app';
+
 import { GenericTileMenu } from '../GenericTileMenu';

 interface TileMenuProps {
--- a/src/components/Dashboard/Tiles/Apps/AppPing.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppPing.tsx
@@ -4,10 +4,9 @@ import Consola from 'consola';
 import { TargetAndTransition, Transition, motion } from 'framer-motion';
 import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
-import { RouterOutputs, api } from '~/utils/api';
-
 import { useConfigContext } from '~/config/provider';
 import { AppType } from '~/types/app';
+import { RouterOutputs, api } from '~/utils/api';

 interface AppPingProps {
  app: AppType;
--- a/src/components/Dashboard/Tiles/Apps/AppTile.tsx
+++ b/src/components/Dashboard/Tiles/Apps/AppTile.tsx
@@ -2,8 +2,8 @@ import { Affix, Box, Text, Tooltip, UnstyledButton } from '@mantine/core';
 import { createStyles, useMantineTheme } from '@mantine/styles';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
-
 import { AppType } from '~/types/app';
+
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { BaseTileProps } from '../type';
@@ -111,7 +111,7 @@ const useStyles = createStyles((theme, _params, getRef) => ({
    overflow: 'visible',
    flexGrow: 5,
  },
-  appImage:{
+  appImage: {
    maxHeight: '100%',
    maxWidth: '100%',
    overflow: 'auto',
--- a/src/components/Dashboard/Tiles/GenericTileMenu.tsx
+++ b/src/components/Dashboard/Tiles/GenericTileMenu.tsx
@@ -1,8 +1,8 @@
 import { ActionIcon, Menu } from '@mantine/core';
 import { IconLayoutKanban, IconPencil, IconSettings, IconTrash } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-
 import { useColorTheme } from '~/tools/color';
+
 import { useEditModeStore } from '../Views/useEditModeStore';

 interface GenericTileMenuProps {
@@ -12,14 +12,12 @@ interface GenericTileMenuProps {
  displayEdit: boolean;
 }

-export const GenericTileMenu = (
-  {
-    handleClickEdit,
-    handleClickChangePosition,
-    handleClickDelete,
-    displayEdit,
-  }: GenericTileMenuProps
-) => {
+export const GenericTileMenu = ({
+  handleClickEdit,
+  handleClickChangePosition,
+  handleClickDelete,
+  displayEdit,
+}: GenericTileMenuProps) => {
  const { t } = useTranslation('common');
  const isEditMode = useEditModeStore((x) => x.enabled);

--- a/src/components/Dashboard/Tiles/Widgets/Inputs/DraggableList.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/Inputs/DraggableList.tsx
@@ -3,7 +3,6 @@ import { useDisclosure } from '@mantine/hooks';
 import { IconChevronDown, IconGripVertical } from '@tabler/icons-react';
 import { Reorder, useDragControls } from 'framer-motion';
 import { FC, useEffect, useRef } from 'react';
-
 import { IDraggableEditableListInputValue } from '~/widgets/widgets';

 interface DraggableListProps {
--- a/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx
@@ -3,7 +3,6 @@ import { useDisclosure } from '@mantine/hooks';
 import { IconChevronDown, IconGripVertical } from '@tabler/icons-react';
 import { Reorder, useDragControls } from 'framer-motion';
 import { FC, ReactNode, useEffect, useRef } from 'react';
-
 import { IDraggableListInputValue } from '~/widgets/widgets';

 const useStyles = createStyles((theme) => ({
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -18,13 +18,13 @@ import { ContextModalProps } from '@mantine/modals';
 import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { mapObject } from '~/tools/client/objects';
-import Widgets from '../../../../widgets';
 import type { IDraggableListInputValue, IWidgetOptionValue } from '~/widgets/widgets';
 import { IWidget } from '~/widgets/widgets';
+
+import Widgets from '../../../../widgets';
 import { InfoCard } from '../../../InfoCard/InfoCard';
 import { DraggableList } from './Inputs/DraggableList';
 import { LocationSelection } from './Inputs/LocationSelection';
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
@@ -1,9 +1,9 @@
 import { Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
-
 import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
-import WidgetsDefinitions from '../../../../widgets';
 import { IWidget } from '~/widgets/widgets';
+
+import WidgetsDefinitions from '../../../../widgets';
 import { useWrapperColumnCount } from '../../Wrappers/gridstack/store';
 import { GenericTileMenu } from '../GenericTileMenu';
 import { WidgetEditModalInnerProps } from './WidgetsEditModal';
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx
@@ -1,7 +1,6 @@
 import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { Trans, useTranslation } from 'next-i18next';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';

--- a/src/components/Dashboard/Views/DashboardView.tsx
+++ b/src/components/Dashboard/Views/DashboardView.tsx
@@ -1,11 +1,11 @@
 import { Group, Stack } from '@mantine/core';
 import { useEffect, useMemo, useRef } from 'react';
-
 import { useConfigContext } from '~/config/provider';
 import { useResize } from '~/hooks/use-resize';
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { CategoryType } from '~/types/category';
 import { WrapperType } from '~/types/wrapper';
+
 import { DashboardCategory } from '../Wrappers/Category/Category';
 import { DashboardSidebar } from '../Wrappers/Sidebar/Sidebar';
 import { DashboardWrapper } from '../Wrappers/Wrapper/Wrapper';
--- a/src/components/Dashboard/Views/ViewToggleButton.tsx
+++ b/src/components/Dashboard/Views/ViewToggleButton.tsx
@@ -1,8 +1,8 @@
 import { ActionIcon, Button, Text, Tooltip } from '@mantine/core';
 import { IconEdit, IconEditOff } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
+
 import { useEditModeStore } from './useEditModeStore';

 export const ViewToggleButton = () => {
--- a/src/components/Dashboard/Wrappers/Category/Category.tsx
+++ b/src/components/Dashboard/Wrappers/Category/Category.tsx
@@ -13,9 +13,9 @@ import { useLocalStorage } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { IconDotsVertical, IconShare3 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-
 import { useConfigContext } from '~/config/provider';
 import { CategoryType } from '~/types/category';
+
 import { useCardStyles } from '../../../layout/Common/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { WrapperContent } from '../WrapperContent';
--- a/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
+++ b/src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx
@@ -8,11 +8,11 @@ import {
  IconTransitionTop,
  IconTrash,
 } from '@tabler/icons-react';
-
+import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '~/config/provider';
 import { CategoryType } from '~/types/category';
+
 import { useCategoryActions } from './useCategoryActions';
-import { useTranslation } from 'next-i18next';

 interface CategoryEditMenuProps {
  category: CategoryType;
@@ -22,7 +22,7 @@ export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {
  const { name: configName } = useConfigContext();
  const { addCategoryAbove, addCategoryBelow, moveCategoryUp, moveCategoryDown, edit, remove } =
    useCategoryActions(configName, category);
-  const { t } = useTranslation(['layout/common','common']);
+  const { t } = useTranslation(['layout/common', 'common']);

  return (
    <Menu withinPortal withArrow>
@@ -33,28 +33,24 @@ export const CategoryEditMenu = ({ category }: CategoryEditMenuProps) => {
      </Menu.Target>
      <Menu.Dropdown>
        <Menu.Item icon={<IconEdit size={20} />} onClick={edit}>
-        {t('common:edit')}
+          {t('common:edit')}
        </Menu.Item>
        <Menu.Item icon={<IconTrash size={20} />} onClick={remove}>
          {t('common:remove')}
        </Menu.Item>
-        <Menu.Label>
-          {t('common:changePosition')}
-        </Menu.Label>
+        <Menu.Label>{t('common:changePosition')}</Menu.Label>
        <Menu.Item icon={<IconTransitionTop size={20} />} onClick={moveCategoryUp}>
          {t('menu.moveUp')}
        </Menu.Item>
        <Menu.Item icon={<IconTransitionBottom size={20} />} onClick={moveCategoryDown}>
          {t('menu.moveDown')}
        </Menu.Item>
-        <Menu.Label>
-          {t('menu.addCategory',{location: ''})}
-        </Menu.Label>
+        <Menu.Label>{t('menu.addCategory', { location: '' })}</Menu.Label>
        <Menu.Item icon={<IconRowInsertTop size={20} />} onClick={addCategoryAbove}>
-          {t('menu.addCategory',{location: t('menu.addAbove')})}
+          {t('menu.addCategory', { location: t('menu.addAbove') })}
        </Menu.Item>
        <Menu.Item icon={<IconRowInsertBottom size={20} />} onClick={addCategoryBelow}>
-          {t('menu.addCategory',{location: t('menu.addBelow')})}
+          {t('menu.addCategory', { location: t('menu.addBelow') })}
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
--- a/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx
+++ b/src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx
@@ -2,7 +2,6 @@ import { Button, Group, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { ContextModalProps } from '@mantine/modals';
 import { useTranslation } from 'next-i18next';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { CategoryType } from '~/types/category';
--- a/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx
+++ b/src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx
@@ -1,11 +1,11 @@
 import { v4 as uuidv4 } from 'uuid';
-
 import { useConfigStore } from '~/config/store';
 import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
 import { AppType } from '~/types/app';
 import { CategoryType } from '~/types/category';
 import { WrapperType } from '~/types/wrapper';
 import { IWidget } from '~/widgets/widgets';
+
 import { CategoryEditModalInnerProps } from './CategoryEditModal';

 export const useCategoryActions = (configName: string | undefined, category: CategoryType) => {
--- a/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
+++ b/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
@@ -1,4 +1,5 @@
 import { WrapperType } from '~/types/wrapper';
+
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { WrapperContent } from '../WrapperContent';
 import { useGridstack } from '../gridstack/use-gridstack';
--- a/src/components/Dashboard/Wrappers/WrapperContent.tsx
+++ b/src/components/Dashboard/Wrappers/WrapperContent.tsx
@@ -1,10 +1,10 @@
 import { GridStack } from 'fily-publish-gridstack';
 import { MutableRefObject, RefObject } from 'react';
-
 import { AppType } from '~/types/app';
-import Widgets from '../../../widgets';
 import { WidgetWrapper } from '~/widgets/WidgetWrapper';
 import { IWidget, IWidgetDefinition } from '~/widgets/widgets';
+
+import Widgets from '../../../widgets';
 import { appTileDefinition } from '../Tiles/Apps/AppTile';
 import { GridstackTileWrapper } from '../Tiles/TileWrapper';
 import { useGridstackStore } from './gridstack/store';
--- a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
+++ b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
@@ -1,6 +1,5 @@
 import { GridItemHTMLElement, GridStack, GridStackNode } from 'fily-publish-gridstack';
 import { MutableRefObject, RefObject } from 'react';
-
 import { AppType } from '~/types/app';
 import { ShapeType } from '~/types/shape';
 import { IWidget } from '~/widgets/widgets';
--- a/src/components/Dashboard/Wrappers/gridstack/store.tsx
+++ b/src/components/Dashboard/Wrappers/gridstack/store.tsx
@@ -1,5 +1,4 @@
 import { createWithEqualityFn } from 'zustand/traditional';
-
 import { useConfigContext } from '~/config/provider';
 import { GridstackBreakpoints } from '~/constants/gridstack-breakpoints';

--- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
+++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
@@ -1,11 +1,11 @@
 import { GridStack, GridStackNode } from 'fily-publish-gridstack';
 import { MutableRefObject, RefObject, createRef, useEffect, useMemo, useRef } from 'react';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { AppType } from '~/types/app';
 import { AreaType } from '~/types/area';
 import { IWidget } from '~/widgets/widgets';
+
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { TileWithUnknownLocation, initializeGridstack } from './init-gridstack';
 import { useGridstackStore, useWrapperColumnCount } from './store';
--- a/src/components/IconSelector/IconSelector.tsx
+++ b/src/components/IconSelector/IconSelector.tsx
@@ -15,9 +15,9 @@ import {
 import { IconSearch } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { forwardRef, useImperativeHandle, useState } from 'react';
+import { humanFileSize } from '~/tools/humanFileSize';
 import { api } from '~/utils/api';

-import { humanFileSize } from '~/tools/humanFileSize';
 import { DebouncedImage } from './DebouncedImage';

 export const IconSelector = forwardRef(
@@ -83,9 +83,7 @@ export const IconSelector = forwardRef(
          }
          icon={<DebouncedImage src={value ?? currentValue} width={20} height={20} />}
          rightSection={
-            (value ?? currentValue).length > 0 ? (
-              <CloseButton onClick={() => onChange("")} />
-            ) : null
+            (value ?? currentValue).length > 0 ? <CloseButton onClick={() => onChange('')} /> : null
          }
          itemComponent={AutoCompleteItem}
          className={classes.textInput}
--- a/src/components/InfoCard/InfoCard.tsx
+++ b/src/components/InfoCard/InfoCard.tsx
@@ -23,7 +23,9 @@ interface InfoCardProps {
 export const InfoCard = ({ bg, cardProp, message, link, hoverProp, position }: InfoCardProps) => {
  const { colorScheme } = useMantineTheme();
  const { t } = useTranslation('common');
-  const content = link? message + ` <a href=\"${link}\" target=\"_blank\">${t('seeMore')}</a>` : message;
+  const content = link
+    ? message + ` <a href=\"${link}\" target=\"_blank\">${t('seeMore')}</a>`
+    : message;
  const editor = useEditor({
    content,
    editable: false,
--- a/src/components/Manage/User/Create/review-input-step.tsx
+++ b/src/components/Manage/User/Create/review-input-step.tsx
@@ -23,7 +23,12 @@ export const ReviewInputStep = ({ values, prevStep, nextStep }: ReviewInputStepP
  const { t } = useTranslation('manage/users/create');

  const utils = api.useContext();
-  const { mutateAsync: createAsync, isLoading, isError, error } = api.user.create.useMutation({
+  const {
+    mutateAsync: createAsync,
+    isLoading,
+    isError,
+    error,
+  } = api.user.create.useMutation({
    onSettled: () => {
      void utils.user.all.invalidate();
    },
--- a/src/components/Onboarding/step-create-account.tsx
+++ b/src/components/Onboarding/step-create-account.tsx
@@ -57,8 +57,10 @@ export const StepCreateAccount = ({
        Create your administrator account
      </Title>
      <Text>
-        Your administrator account <b>must be secure</b>, that's why we have so many rules surrounding it.
-       <br/>Try not to make it adminadmin this time...
+        Your administrator account <b>must be secure</b>, that's why we have so many rules
+        surrounding it.
+        <br />
+        Try not to make it adminadmin this time...
      </Text>
      <form onSubmit={form.onSubmit(handleSubmit)}>
        <Stack>
--- a/src/components/Onboarding/step-update-path-mappings.tsx
+++ b/src/components/Onboarding/step-update-path-mappings.tsx
@@ -39,7 +39,7 @@ services:
 const added = { color: 'green', label: '+' };

 export const StepUpdatePathMappings = ({ next }: { next: () => void }) => {
-  const [selectedTab, setSelectedTab] = useState<TabsValue>("standard_docker");
+  const [selectedTab, setSelectedTab] = useState<TabsValue>('standard_docker');
  return (
    <OnboardingStepWrapper>
      <Title order={2} align="center" mb="md">
@@ -140,7 +140,9 @@ export const StepUpdatePathMappings = ({ next }: { next: () => void }) => {
                {dockerComposeCommand}
              </Prism>
            </List.Item>
-            <List.Item>Run <Code>docker compose up</Code>.</List.Item>
+            <List.Item>
+              Run <Code>docker compose up</Code>.
+            </List.Item>
            <List.Item>Refresh this page and click on "continue"</List.Item>
          </List>
        </Tabs.Panel>
--- a/src/components/Password/password-requirements.tsx
+++ b/src/components/Password/password-requirements.tsx
@@ -23,7 +23,6 @@ function getStrength(password: string) {
    score += 1;
  }
  return (score / goal) * 100;
-
 }

 export const PasswordRequirements = ({ value }: { value: string }) => {
--- a/src/components/ThemeSchemeToggle/ThemeSchemeToggle.tsx
+++ b/src/components/ThemeSchemeToggle/ThemeSchemeToggle.tsx
@@ -1,23 +1,14 @@
-import {
-  ActionIcon,
-  ActionIconProps,
-} from '@mantine/core';
-import { useColorScheme } from '~/hooks/use-colorscheme';
+import { ActionIcon, ActionIconProps } from '@mantine/core';
 import { IconMoonStars, IconSun } from '@tabler/icons-react';
+import { useColorScheme } from '~/hooks/use-colorscheme';

-export const ThemeSchemeToggle = (props : Partial<ActionIconProps>) => {
+export const ThemeSchemeToggle = (props: Partial<ActionIconProps>) => {
  const { colorScheme, toggleColorScheme } = useColorScheme();
  const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;

  return (
-    <ActionIcon
-      size={50}
-      variant="outline"
-      radius="md"
-      onClick={toggleColorScheme}
-      {...props}
-    >
-      <Icon size="66%"/>
+    <ActionIcon size={50} variant="outline" radius="md" onClick={toggleColorScheme} {...props}>
+      <Icon size="66%" />
    </ActionIcon>
  );
 };
--- a/src/components/layout/Background/PolkaElement.tsx
+++ b/src/components/layout/Background/PolkaElement.tsx
@@ -17,7 +17,7 @@ export const PolkaElement = ({
    <Box
      style={{
        transform: `rotate(${rotation}deg)`,
-        pointerEvents: 'none'
+        pointerEvents: 'none',
      }}
      className="polka"
      pos="absolute"
--- a/src/components/layout/Common/Logo.tsx
+++ b/src/components/layout/Common/Logo.tsx
@@ -1,7 +1,7 @@
 import { Group, Image, Text } from '@mantine/core';
+import { useConfigContext } from '~/config/provider';
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';

-import { useConfigContext } from '~/config/provider';
 import { usePrimaryGradient } from './useGradient';

 interface LogoProps {
--- a/src/components/layout/Common/useCardStyles.ts
+++ b/src/components/layout/Common/useCardStyles.ts
@@ -1,5 +1,4 @@
 import { createStyles } from '@mantine/core';
-
 import { useConfigContext } from '~/config/provider';

 export const useCardStyles = (isCategory: boolean) => {
--- a/src/components/layout/Common/useGradient.tsx
+++ b/src/components/layout/Common/useGradient.tsx
@@ -1,5 +1,4 @@
 import { MantineGradient } from '@mantine/core';
-
 import { useColorTheme } from '~/tools/color';

 export const usePrimaryGradient = () => {
--- a/src/components/layout/Meta/BoardHeadOverride.tsx
+++ b/src/components/layout/Meta/BoardHeadOverride.tsx
@@ -1,8 +1,7 @@
 import Head from 'next/head';
 import React from 'react';
-import { firstUpperCase } from '~/tools/shared/strings';
-
 import { useConfigContext } from '~/config/provider';
+import { firstUpperCase } from '~/tools/shared/strings';

 export const BoardHeadOverride = () => {
  const { config, name } = useConfigContext();
--- a/src/components/layout/header/About/AboutModal.tsx
+++ b/src/components/layout/header/About/AboutModal.tsx
@@ -7,8 +7,8 @@ import {
  Grid,
  Group,
  HoverCard,
-  Kbd,
  Image,
+  Kbd,
  Modal,
  Table,
  Text,
@@ -31,11 +31,11 @@ import { motion } from 'framer-motion';
 import { InitOptions } from 'i18next';
 import { Trans, i18n, useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
-
 import { useConfigContext } from '~/config/provider';
 import { useConfigStore } from '~/config/store';
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
 import { useColorTheme } from '~/tools/color';
+
 import { usePrimaryGradient } from '../../Common/useGradient';
 import Credits from './Credits';
 import Tip from './Tip';
@@ -75,13 +75,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
      opened={opened}
      title={
        <Group spacing="sm">
-          <Image
-            alt="Homarr logo"
-            src="/imgs/logo/logo.png"
-            width={30}
-            height={30}
-            fit="contain"
-          />
+          <Image alt="Homarr logo" src="/imgs/logo/logo.png" width={30} height={30} fit="contain" />
          <Title order={3} variant="gradient" gradient={colorGradiant}>
            {t('about')} Homarr
          </Title>
@@ -271,13 +265,17 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                  transition={{ duration: 0.8, ease: 'easeInOut' }}
                >
                  <Badge color="green" variant="filled">
-                    {t('version.new',{ newVersion: newVersionAvailable})}
+                    {t('version.new', { newVersion: newVersionAvailable })}
                  </Badge>
                </motion.div>
              </HoverCard.Target>
              <HoverCard.Dropdown>
                <Text>
-                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[0]}
+                  {
+                    t('version.dropdown', { currentVersion: attributes.packageVersion }).split(
+                      '{{newVersion}}'
+                    )[0]
+                  }
                  <b>
                    <Anchor
                      target="_blank"
@@ -286,7 +284,11 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                      {newVersionAvailable}
                    </Anchor>
                  </b>
-                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[1]}
+                  {
+                    t('version.dropdown', { currentVersion: attributes.packageVersion }).split(
+                      '{{newVersion}}'
+                    )[1]
+                  }
                </Text>
              </HoverCard.Dropdown>
            </HoverCard>
--- a/src/components/layout/header/About/Credits.tsx
+++ b/src/components/layout/header/About/Credits.tsx
@@ -1,7 +1,6 @@
 import { Anchor, Box, Collapse, Flex, Table, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
-
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';

 export default function Credits() {
--- a/src/config/init.ts
+++ b/src/config/init.ts
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-
 import { ConfigType } from '~/types/config';
+
 import { useConfigContext } from './provider';
 import { useConfigStore } from './store';

--- a/src/config/provider.tsx
+++ b/src/config/provider.tsx
@@ -1,8 +1,8 @@
 import { ReactNode, createContext, useContext, useEffect, useState } from 'react';
 import { shallow } from 'zustand/shallow';
-
 import { useColorTheme } from '~/tools/color';
 import { ConfigType } from '~/types/config';
+
 import { useConfigStore } from './store';

 export type ConfigContextType = {
--- a/src/config/store.ts
+++ b/src/config/store.ts
@@ -1,7 +1,6 @@
 import { createWithEqualityFn } from 'zustand/traditional';
-import { trcpProxyClient } from '~/utils/api';
-
 import { ConfigType } from '~/types/config';
+import { trcpProxyClient } from '~/utils/api';

 export const useConfigStore = createWithEqualityFn<UseConfigStoreType>(
  (set, get) => ({
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -48,7 +48,7 @@ const shouldRedirectToOnboard = async (): Promise<boolean> => {
  const cacheAndGetUserCount = async () => {
    cachedUserCount = await client.user.count.query();
    return cachedUserCount === 0;
-  }
+  };

  if (!env.DATABASE_URL?.startsWith('file:')) {
    return await cacheAndGetUserCount();
--- a/src/modules/common/MediaDisplay.tsx
+++ b/src/modules/common/MediaDisplay.tsx
@@ -2,9 +2,9 @@ import { Badge, Button, Group, Image, Stack, Text, Title } from '@mantine/core';
 import { IconDownload, IconExternalLink, IconPlayerPlay } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-
 import { useConfigContext } from '~/config/provider';
 import { useColorTheme } from '~/tools/color';
+
 import { RequestModal } from '../overseerr/RequestModal';
 import { Result } from '../overseerr/SearchResult';

--- a/src/modules/overseerr/RequestModal.tsx
+++ b/src/modules/overseerr/RequestModal.tsx
@@ -5,9 +5,9 @@ import Consola from 'consola';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { useConfigContext } from '~/config/provider';
+import { useColorTheme } from '~/tools/color';
 import { api } from '~/utils/api';

-import { useColorTheme } from '~/tools/color';
 import { MovieResult } from './Movie.d';
 import { Result } from './SearchResult';
 import { TvShowResult, TvShowResultSeason } from './TvShow.d';
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -5,9 +5,8 @@ import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import pageNotFoundImage from '~/images/undraw_page_not_found_re_e9o6.svg';
-import { pageNotFoundNamespaces } from '~/tools/server/translation-namespaces';
-
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
+import { pageNotFoundNamespaces } from '~/tools/server/translation-namespaces';

 export default function Custom404() {
  const { classes } = useStyles();
--- a/src/pages/manage/index.tsx
+++ b/src/pages/manage/index.tsx
@@ -2,11 +2,11 @@ import {
  Box,
  Card,
  Group,
+  Image,
  SimpleGrid,
  Stack,
  Text,
  Title,
-  Image,
  UnstyledButton,
  createStyles,
 } from '@mantine/core';
--- a/src/server/api/routers/app.ts
+++ b/src/server/api/routers/app.ts
@@ -10,54 +10,60 @@ import { AppType } from '~/types/app';
 import { createTRPCRouter, publicProcedure } from '../trpc';

 export const appRouter = createTRPCRouter({
-  ping: publicProcedure.input(z.object({
-    id: z.string(),
-    configName: z.string()
-  })).query(async ({ input }) => {
-    const agent = new https.Agent({ rejectUnauthorized: false });
-    const config = getConfig(input.configName);
-    const app = config.apps.find((app) => app.id === input.id);
+  ping: publicProcedure
+    .input(
+      z.object({
+        id: z.string(),
+        configName: z.string(),
+      })
+    )
+    .query(async ({ input }) => {
+      const agent = new https.Agent({ rejectUnauthorized: false });
+      const config = getConfig(input.configName);
+      const app = config.apps.find((app) => app.id === input.id);

-    if (!app?.url) {
-      Consola.error(`App ${input} not found`);
-      throw new TRPCError({
-        code: 'NOT_FOUND',
-        cause: input,
-        message: `App ${input.id} was not found`,
-      });
-    }
-    const res = await axios
-      .get(app.url, { httpsAgent: agent, timeout: 10000 })
-      .then((response) => ({
-        status: response.status,
-        statusText: response.statusText,
-        state: isStatusOk(app as AppType, response.status) ? 'online' : 'offline'
-      }))
-      .catch((error: AxiosError) => {
-        if (error.response) {
-          return {
-            state: isStatusOk(app as AppType, error.response.status) ? 'online' : 'offline',
-            status: error.response.status,
-            statusText: error.response.statusText,
-          };
-        }
-
-        if (error.code === 'ECONNABORTED') {
-          Consola.error(`Ping timed out for app with id '${input.id}' in config '${input.configName}' -> url: ${app.url})`);
-          throw new TRPCError({
-            code: 'TIMEOUT',
-            cause: input,
-            message: `Ping timed out`,
-          });
-        }
-
-        Consola.error(`Unexpected response: ${error.message}`);
+      if (!app?.url) {
+        Consola.error(`App ${input} not found`);
        throw new TRPCError({
-          code: 'UNPROCESSABLE_CONTENT',
+          code: 'NOT_FOUND',
          cause: input,
-          message: `Unexpected response: ${error.message}`,
+          message: `App ${input.id} was not found`,
        });
-      });
-    return res;
-  }),
+      }
+      const res = await axios
+        .get(app.url, { httpsAgent: agent, timeout: 10000 })
+        .then((response) => ({
+          status: response.status,
+          statusText: response.statusText,
+          state: isStatusOk(app as AppType, response.status) ? 'online' : 'offline',
+        }))
+        .catch((error: AxiosError) => {
+          if (error.response) {
+            return {
+              state: isStatusOk(app as AppType, error.response.status) ? 'online' : 'offline',
+              status: error.response.status,
+              statusText: error.response.statusText,
+            };
+          }
+
+          if (error.code === 'ECONNABORTED') {
+            Consola.error(
+              `Ping timed out for app with id '${input.id}' in config '${input.configName}' -> url: ${app.url})`
+            );
+            throw new TRPCError({
+              code: 'TIMEOUT',
+              cause: input,
+              message: `Ping timed out`,
+            });
+          }
+
+          Consola.error(`Unexpected response: ${error.message}`);
+          throw new TRPCError({
+            code: 'UNPROCESSABLE_CONTENT',
+            cause: input,
+            message: `Unexpected response: ${error.message}`,
+          });
+        });
+      return res;
+    }),
 });
--- a/src/server/api/routers/media-request.ts
+++ b/src/server/api/routers/media-request.ts
@@ -1,13 +1,13 @@
 import Consola from 'consola';
+import { removeTrailingSlash } from 'next/dist/shared/lib/router/utils/remove-trailing-slash';
 import { z } from 'zod';
 import { checkIntegrationsType } from '~/tools/client/app-properties';
 import { getConfig } from '~/tools/config/getConfig';
 import { MediaRequestListWidget } from '~/widgets/media-requests/MediaRequestListTile';
+import { MediaRequestStatsWidget } from '~/widgets/media-requests/MediaRequestStatsTile';
 import { MediaRequest, Users } from '~/widgets/media-requests/media-request-types';

 import { createTRPCRouter, publicProcedure } from '../trpc';
-import { MediaRequestStatsWidget } from '~/widgets/media-requests/MediaRequestStatsTile';
-import { removeTrailingSlash } from 'next/dist/shared/lib/router/utils/remove-trailing-slash';

 export const mediaRequestsRouter = createTRPCRouter({
  allMedia: publicProcedure
@@ -33,9 +33,11 @@ export const mediaRequestsRouter = createTRPCRouter({
        })
          .then(async (response) => {
            const body = (await response.json()) as OverseerrResponse;
-            let appUrl = input.widget.properties.replaceLinksWithExternalHost && app.behaviour.externalUrl?.length > 0
-              ? app.behaviour.externalUrl
-              : app.url;
+            let appUrl =
+              input.widget.properties.replaceLinksWithExternalHost &&
+              app.behaviour.externalUrl?.length > 0
+                ? app.behaviour.externalUrl
+                : app.url;

            appUrl = removeTrailingSlash(appUrl);

@@ -163,7 +165,7 @@ const retrieveDetailsForItem = async (
      backdropPath: series.backdropPath,
      posterPath: series.backdropPath,
    };
-  };
+  }

  const movieResponse = await fetch(`${baseUrl}/api/v1/movie/${id}`, {
    headers,
--- a/src/server/api/routers/media-server.ts
+++ b/src/server/api/routers/media-server.ts
@@ -2,21 +2,18 @@ import { Jellyfin } from '@jellyfin/sdk';
 import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models';
 import { getSessionApi } from '@jellyfin/sdk/lib/utils/api/session-api';
 import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
-
 import Consola from 'consola';
-
 import { z } from 'zod';
-
-import { createTRPCRouter, publicProcedure } from '../trpc';
-
-import { ConfigAppType } from '~/types/app';
 import { checkIntegrationsType, findAppProperty } from '~/tools/client/app-properties';
 import { getConfig } from '~/tools/config/getConfig';
+import { PlexClient } from '~/tools/server/sdk/plex/plexClient';
 import { trimStringEnding } from '~/tools/shared/strings';
 import { GenericMediaServer } from '~/types/api/media-server/media-server';
 import { MediaServersResponseType } from '~/types/api/media-server/response';
 import { GenericCurrentlyPlaying, GenericSessionInfo } from '~/types/api/media-server/session-info';
-import { PlexClient } from '~/tools/server/sdk/plex/plexClient';
+import { ConfigAppType } from '~/types/app';
+
+import { createTRPCRouter, publicProcedure } from '../trpc';

 const jellyfin = new Jellyfin({
  clientInfo: {
@@ -108,7 +105,13 @@ const handleServer = async (app: ConfigAppType): Promise<GenericMediaServer | un
      return {
        type: 'jellyfin',
        appId: app.id,
-        serverAddress: trimStringEnding(app.url, ['/web/index.html#!/home.html', '/web', '/web/index.html', '/web/', '/web/index.html#']),
+        serverAddress: trimStringEnding(app.url, [
+          '/web/index.html#!/home.html',
+          '/web',
+          '/web/index.html',
+          '/web/',
+          '/web/index.html#',
+        ]),
        version: infoApi.data.Version ?? undefined,
        sessions: sessions
          .filter((session) => session.NowPlayingItem)
@@ -180,7 +183,13 @@ const handleServer = async (app: ConfigAppType): Promise<GenericMediaServer | un

      if (!apiKey) {
        return {
-          serverAddress: trimStringEnding(app.url, ['/web', '/web/index.html', '/web/index.html#!', '/web/index.html#!/settings/web/general', '/web/']),
+          serverAddress: trimStringEnding(app.url, [
+            '/web',
+            '/web/index.html',
+            '/web/index.html#!',
+            '/web/index.html#!/settings/web/general',
+            '/web/',
+          ]),
          sessions: [],
          type: 'plex',
          appId: app.id,
--- a/src/server/api/routers/rss.ts
+++ b/src/server/api/routers/rss.ts
@@ -70,7 +70,7 @@ export const rssRouter = createTRPCRouter({
      }

      if (input.feedUrls.length === 0) {
-        return []
+        return [];
      }

      const result = await Promise.all(
--- a/src/server/api/routers/timezone.ts
+++ b/src/server/api/routers/timezone.ts
@@ -1,18 +1,19 @@
 import { z } from 'zod';
-const GeoTz = require('browser-geo-tz/dist/geotz.js');

 import { createTRPCRouter, publicProcedure } from '../trpc';

+const GeoTz = require('browser-geo-tz/dist/geotz.js');
+
 export const timezoneRouter = createTRPCRouter({
  at: publicProcedure
    .input(
-        z.object({
+      z.object({
        longitude: z.number(),
        latitude: z.number(),
-        })
+      })
    )
    .query(async ({ input }) => {
-        const timezone = GeoTz.find(input.latitude,input.longitude);
-        return Array.isArray(timezone) ? timezone[0] : timezone;
+      const timezone = GeoTz.find(input.latitude, input.longitude);
+      return Array.isArray(timezone) ? timezone[0] : timezone;
    }),
-})
+});
--- a/src/tools/config/getConfig.ts
+++ b/src/tools/config/getConfig.ts
@@ -1,7 +1,7 @@
 import Consola from 'consola';
 import { v4 as uuidv4 } from 'uuid';
-
 import { BackendConfigType, ConfigType } from '~/types/config';
+
 import { configExists } from './configExists';
 import { getFallbackConfig } from './getFallbackConfig';
 import { readConfig } from './readConfig';
--- a/src/tools/config/getFallbackConfig.ts
+++ b/src/tools/config/getFallbackConfig.ts
@@ -1,4 +1,5 @@
 import { ConfigType } from '~/types/config';
+
 import defaultConfig from '../../../data/configs/default.json';

 export const getFallbackConfig = (name?: string) => ({
@@ -11,7 +12,7 @@ export const getFallbackConfig = (name?: string) => ({
 export const getStaticFallbackConfig = (name: string): ConfigType => ({
  schemaVersion: 1,
  configProperties: {
-    name: name
+    name: name,
  },
  categories: [
    {
@@ -55,7 +56,7 @@ export const getStaticFallbackConfig = (name: string): ConfigType => ({
      },
      accessibility: {
        disablePingPulse: false,
-        replacePingDotsWithIcons: false
+        replacePingDotsWithIcons: false,
      },
      pageTitle: 'Homarr ⭐️',
      logoImageUrl: '/imgs/logo/logo.png',
--- a/src/tools/config/getFrontendConfig.ts
+++ b/src/tools/config/getFrontendConfig.ts
@@ -2,8 +2,8 @@ import Consola from 'consola';
 import fs from 'fs';
 import { fetchCity } from '~/server/api/routers/weather';
 import { IntegrationField } from '~/types/app';
-
 import { BackendConfigType, ConfigType } from '~/types/config';
+
 import { getConfig } from './getConfig';

 export const getFrontendConfig = async (name: string): Promise<ConfigType> => {
@@ -139,11 +139,11 @@ const migrateAppConfigs = (config: BackendConfigType) => {
      ...app,
      appearance: {
        ...app.appearance,
-        appNameStatus: app.appearance.appNameStatus?? 'normal',
-        positionAppName: app.appearance.positionAppName?? 'column',
-        appNameFontSize: app.appearance.appNameFontSize?? 16,
-        lineClampAppName: app.appearance.lineClampAppName?? 1,
-      }
-    }))
-  }
-}
+        appNameStatus: app.appearance.appNameStatus ?? 'normal',
+        positionAppName: app.appearance.positionAppName ?? 'column',
+        appNameFontSize: app.appearance.appNameFontSize ?? 16,
+        lineClampAppName: app.appearance.lineClampAppName ?? 1,
+      },
+    })),
+  };
+};
--- a/src/tools/config/writeConfig.ts
+++ b/src/tools/config/writeConfig.ts
@@ -1,6 +1,6 @@
 import fs from 'fs';
-
 import { BackendConfigType } from '~/types/config';
+
 import { generateConfigPath } from './generateConfigPath';

 export function writeConfig(config: BackendConfigType) {
--- a/src/tools/server/loginBuilder.ts
+++ b/src/tools/server/loginBuilder.ts
@@ -10,7 +10,7 @@ import { ParsedUrlQuery } from 'querystring';
 export const checkForSessionOrAskForLogin = (
  context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>,
  session: Session | null,
-  accessCallback: () => boolean,
+  accessCallback: () => boolean
 ): GetServerSidePropsResult<any> | undefined => {
  if (!session?.user) {
    console.log('detected logged out user!');
@@ -26,8 +26,8 @@ export const checkForSessionOrAskForLogin = (
  if (!accessCallback()) {
    return {
      props: {},
-      notFound: true
-    }
+      notFound: true,
+    };
  }

  return undefined;
--- a/src/tools/server/sdk/adGuard/adGuard.ts
+++ b/src/tools/server/sdk/adGuard/adGuard.ts
@@ -2,6 +2,7 @@ import axios from 'axios';
 import Consola from 'consola';
 import { z } from 'zod';
 import { trimStringEnding } from '~/tools/shared/strings';
+
 import {
  adGuardApiFilteringStatusSchema,
  adGuardApiStatsResponseSchema,
--- a/src/tools/server/sdk/pihole/piHole.spec.ts
+++ b/src/tools/server/sdk/pihole/piHole.spec.ts
@@ -171,7 +171,7 @@ describe('PiHole API client', () => {
        });
      }

-      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice'){
+      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice') {
        countTriedRequests += 1;
        return JSON.stringify({
          status: 'enabled',
@@ -213,9 +213,9 @@ describe('PiHole API client', () => {
        });
      }

-      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice'){
+      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice') {
        countTriedRequests += 1;
-        if(countTriedRequests < 10) {
+        if (countTriedRequests < 10) {
          return JSON.stringify({
            status: 'disabled',
          });
@@ -261,7 +261,7 @@ describe('PiHole API client', () => {
        });
      }

-      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice'){
+      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice') {
        countTriedRequests += 1;
        return JSON.stringify({
          status: 'disabled',
@@ -303,9 +303,9 @@ describe('PiHole API client', () => {
        });
      }

-      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice'){
+      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice') {
        countTriedRequests += 1;
-        if(countTriedRequests < 10) {
+        if (countTriedRequests < 10) {
          return JSON.stringify({
            status: 'enabled',
          });
@@ -351,7 +351,7 @@ describe('PiHole API client', () => {
        });
      }

-      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice'){
+      if (request.url === 'http://pi.hole/admin/api.php?summaryRaw&auth=nice') {
        countTriedRequests += 1;
        return JSON.stringify({
          status: 'disabled',
--- a/src/tools/server/sdk/pihole/piHole.ts
+++ b/src/tools/server/sdk/pihole/piHole.ts
@@ -1,4 +1,5 @@
 import { trimStringEnding } from '~/tools/shared/strings';
+
 import { PiHoleApiStatusChangeResponse, PiHoleApiSummaryResponse } from './piHole.type';

 export class PiHoleClient {
@@ -62,18 +63,18 @@ export class PiHoleClient {
      );
    }

-    for(let loops = 0; loops < 10; loops++){
-      const summary = await this.getSummary()
-      if (summary.status === action + 'd'){
+    for (let loops = 0; loops < 10; loops++) {
+      const summary = await this.getSummary();
+      if (summary.status === action + 'd') {
        return { status: summary.status } as PiHoleApiStatusChangeResponse;
      }
-      await new Promise ((resolve) => { setTimeout(resolve, 50)});
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+      });
    }

    return Promise.reject(
-      new Error(
-        `Although PiHole received the command, it failed to update it's status: ${json}`
-      )
-    )
+      new Error(`Although PiHole received the command, it failed to update it's status: ${json}`)
+    );
  }
 }
--- a/src/tools/server/sdk/plex/plexClient.ts
+++ b/src/tools/server/sdk/plex/plexClient.ts
@@ -1,9 +1,5 @@
 import { Element, xml2js } from 'xml-js';
-
-import {
-  GenericCurrentlyPlaying,
-  GenericSessionInfo,
-} from '~/types/api/media-server/session-info';
+import { GenericCurrentlyPlaying, GenericSessionInfo } from '~/types/api/media-server/session-info';

 export class PlexClient {
  constructor(
@@ -44,7 +40,6 @@ export class PlexClient {
        const { videoCodec, videoFrameRate, audioCodec, audioChannels, height, width, bitrate } =
          mediaElement;

-
        return {
          id: sessionElement?.id as string | undefined,
          username: userElement?.title ?? ('Anonymous' as string),
--- a/src/tools/shared/app.ts
+++ b/src/tools/shared/app.ts
@@ -11,7 +11,7 @@ export const generateDefaultApp = (wrapperId: string): AppType =>
      appNameStatus: 'normal',
      positionAppName: 'column',
      lineClampAppName: 1,
-      appNameFontSize: 16
+      appNameFontSize: 16,
    },
    network: {
      enabledStatusChecker: true,
--- a/src/types/api/downloads/queue/NormalizedDownloadQueueResponse.ts
+++ b/src/types/api/downloads/queue/NormalizedDownloadQueueResponse.ts
@@ -1,5 +1,4 @@
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
-
 import { UsenetQueueItem } from '~/widgets/useNet/types';

 export type NormalizedDownloadQueueResponse = {
--- a/src/types/app.ts
+++ b/src/types/app.ts
@@ -1,5 +1,5 @@
 import { Icon, IconKey, IconPassword, IconUser } from '@tabler/icons-react';
-import { Property } from 'csstype'
+import { Property } from 'csstype';

 import { TileBaseType } from './tile';

@@ -34,7 +34,7 @@ interface AppNetworkType {

 interface AppAppearanceType {
  iconUrl: string;
-  appNameStatus: "normal"|"hover"|"hidden";
+  appNameStatus: 'normal' | 'hover' | 'hidden';
  positionAppName: Property.FlexDirection;
  appNameFontSize: number;
  lineClampAppName: number;
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -1,4 +1,5 @@
 import { IWidget } from '~/widgets/widgets';
+
 import { AppType, ConfigAppType } from './app';
 import { CategoryType } from './category';
 import { SettingsType } from './settings';
--- a/src/utils/session.ts
+++ b/src/utils/session.ts
@@ -1,4 +1,4 @@
-import { randomUUID } from "crypto";
+import { randomUUID } from 'crypto';

 export const fromDate = (seconds: number, date = Date.now()) => {
  return new Date(date + seconds * 1000);
@@ -8,4 +8,3 @@ export const fromDate = (seconds: number, date = Date.now()) => {
 export const generateSessionToken = () => {
  return randomUUID();
 };
-
--- a/src/widgets/WidgetWrapper.tsx
+++ b/src/widgets/WidgetWrapper.tsx
@@ -1,8 +1,8 @@
 import { ComponentType } from 'react';
-
-import Widgets from '.';
 import { HomarrCardWrapper } from '~/components/Dashboard/Tiles/HomarrCardWrapper';
 import { WidgetsMenu } from '~/components/Dashboard/Tiles/Widgets/WidgetsMenu';
+
+import Widgets from '.';
 import ErrorBoundary from './boundary';
 import { IWidget } from './widgets';

--- a/src/widgets/bookmark/BookmarkWidgetTile.tsx
+++ b/src/widgets/bookmark/BookmarkWidgetTile.tsx
@@ -3,11 +3,11 @@ import {
  Box,
  Button,
  Card,
+  Divider,
  Flex,
  Group,
  Image,
  ScrollArea,
-  Divider,
  Stack,
  Switch,
  Text,
@@ -27,12 +27,12 @@ import {
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
+import React from 'react';
 import { v4 } from 'uuid';
 import { z } from 'zod';
-import React from 'react';
-
 import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
 import { IconSelector } from '~/components/IconSelector/IconSelector';
+
 import { defineWidget } from '../helper';
 import { IDraggableEditableListInputValue, IWidget } from '../widgets';

@@ -54,7 +54,7 @@ const definition = defineWidget({
      type: 'text',
      defaultValue: '',
      info: true,
-      infoLink: "https://homarr.dev/docs/widgets/bookmarks/",
+      infoLink: 'https://homarr.dev/docs/widgets/bookmarks/',
    },
    items: {
      type: 'draggable-editable-list',
@@ -84,11 +84,11 @@ const definition = defineWidget({
                return undefined;
              }

-              return t('item.validation.length', {shortest: "1", longest: "100"});
+              return t('item.validation.length', { shortest: '1', longest: '100' });
            },
            href: (value) => {
              if (!z.string().min(1).max(200).safeParse(value).success) {
-                return t('item.validation.length', {shortest: "1", longest: "200"});
+                return t('item.validation.length', { shortest: '1', longest: '200' });
              }

              if (!z.string().url().safeParse(value).success) {
@@ -102,7 +102,7 @@ const definition = defineWidget({
                return undefined;
              }

-              return t('item.validation.length', {shortest: "1", longest: "400"});
+              return t('item.validation.length', { shortest: '1', longest: '400' });
            },
          },
          validateInputOnChange: true,
@@ -174,11 +174,7 @@ const definition = defineWidget({
    } satisfies IDraggableEditableListInputValue<BookmarkItem>,
    layout: {
      type: 'select',
-      data: [
-        { value: 'autoGrid', },
-        { value: 'horizontal', },
-        { value: 'vertical', },
-      ],
+      data: [{ value: 'autoGrid' }, { value: 'horizontal' }, { value: 'vertical' }],
      defaultValue: 'autoGrid',
    },
  },
@@ -223,10 +219,12 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
    case 'autoGrid':
      return (
        <Stack h="100%" spacing={0}>
-          <Title size="h4" px="0.25rem">{widget.properties.name}</Title>
+          <Title size="h4" px="0.25rem">
+            {widget.properties.name}
+          </Title>
          <Box
            className={classes.grid}
-            mr={isEditModeEnabled && widget.properties.name === "" ? 'xl' : undefined}
+            mr={isEditModeEnabled && widget.properties.name === '' ? 'xl' : undefined}
            h="100%"
          >
            {widget.properties.items.map((item: BookmarkItem, index) => (
@@ -239,10 +237,12 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
                href={item.href}
                target={item.openNewTab ? '_blank' : undefined}
                withBorder
-                bg={colorScheme === 'dark' ? colors.dark[5].concat('80') : colors.blue[0].concat('80')}
+                bg={
+                  colorScheme === 'dark' ? colors.dark[5].concat('80') : colors.blue[0].concat('80')
+                }
                sx={{
-                  '&:hover': { backgroundColor: fn.primaryColor().concat('40'), }, //'40' = 25% opacity
-                  flex:'1 1 auto',
+                  '&:hover': { backgroundColor: fn.primaryColor().concat('40') }, //'40' = 25% opacity
+                  flex: '1 1 auto',
                }}
                display="flex"
              >
@@ -265,29 +265,29 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
            type="auto"
            h="100%"
            offsetScrollbars
-            mr={isEditModeEnabled && widget.properties.name === ""? 'xl' : undefined}
+            mr={isEditModeEnabled && widget.properties.name === '' ? 'xl' : undefined}
            styles={{
-              viewport:{
+              viewport: {
                //mantine being mantine again... this might break. Needed for taking 100% of widget space
-                '& div[style="min-width: 100%; display: table;"]':{
+                '& div[style="min-width: 100%; display: table;"]': {
                  display: 'flex !important',
-                  height:'100%',
+                  height: '100%',
                },
              },
            }}
          >
-            <Flex
-              direction={flexDirection}
-              gap="0"
-              h="100%"
-              w="100%"
-            >
+            <Flex direction={flexDirection} gap="0" h="100%" w="100%">
              {widget.properties.items.map((item: BookmarkItem, index) => (
-                <div key={index} style={{ display: 'flex', flex: '1', flexDirection: flexDirection, }}>
+                <div
+                  key={index}
+                  style={{ display: 'flex', flex: '1', flexDirection: flexDirection }}
+                >
                  <Divider
                    m="3px"
-                    orientation={ widget.properties.layout !== 'vertical' ? 'vertical' : 'horizontal' }
-                    color={index === 0 ? "transparent" : undefined}
+                    orientation={
+                      widget.properties.layout !== 'vertical' ? 'vertical' : 'horizontal'
+                    }
+                    color={index === 0 ? 'transparent' : undefined}
                  />
                  <Card
                    px="md"
@@ -298,13 +298,13 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
                    radius="md"
                    bg="transparent"
                    sx={{
-                      '&:hover': { backgroundColor: fn.primaryColor().concat('40'),}, //'40' = 25% opacity
-                      flex:'1 1 auto',
+                      '&:hover': { backgroundColor: fn.primaryColor().concat('40') }, //'40' = 25% opacity
+                      flex: '1 1 auto',
                      overflow: 'unset',
                    }}
                    display="flex"
                  >
-                    <BookmarkItemContent item={item}/>
+                    <BookmarkItemContent item={item} />
                  </Card>
                </div>
              ))}
@@ -320,26 +320,28 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
 const BookmarkItemContent = ({ item }: { item: BookmarkItem }) => {
  const { colorScheme } = useMantineTheme();
  return (
-  <Group spacing="0rem 1rem">
-    <Image
-      hidden={item.hideIcon}
-      src={item.iconUrl}
-      width={47}
-      height={47}
-      fit="contain"
-      withPlaceholder />
-    <Stack spacing={0}>
-      <Text size="md">{item.name}</Text>
-      <Text
-        color={colorScheme === 'dark' ? "gray.6" : "gray.7"}
-        size="sm"
-        hidden={item.hideHostname}
-      >
-        {new URL(item.href).hostname}
-      </Text>
-    </Stack>
-  </Group>
-)};
+    <Group spacing="0rem 1rem">
+      <Image
+        hidden={item.hideIcon}
+        src={item.iconUrl}
+        width={47}
+        height={47}
+        fit="contain"
+        withPlaceholder
+      />
+      <Stack spacing={0}>
+        <Text size="md">{item.name}</Text>
+        <Text
+          color={colorScheme === 'dark' ? 'gray.6' : 'gray.7'}
+          size="sm"
+          hidden={item.hideHostname}
+        >
+          {new URL(item.href).hostname}
+        </Text>
+      </Stack>
+    </Group>
+  );
+};

 const useStyles = createStyles(() => ({
  grid: {
--- a/src/widgets/boundary.tsx
+++ b/src/widgets/boundary.tsx
@@ -4,8 +4,8 @@ import { IconBrandGithub, IconBug, IconInfoCircle, IconRefresh } from '@tabler/i
 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';

 type ErrorBoundaryState = {
--- a/src/widgets/calendar/MediaList.tsx
+++ b/src/widgets/calendar/MediaList.tsx
@@ -1,13 +1,13 @@
 import { Divider, ScrollArea, createStyles } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 import React from 'react';
-
 import {
  LidarrMediaDisplay,
  RadarrMediaDisplay,
  ReadarrMediaDisplay,
  SonarrMediaDisplay,
 } from '~/modules/common';
+
 import { MediasType } from './type';

 interface MediaListProps {
--- a/src/widgets/calendar/bg-calculator.ts
+++ b/src/widgets/calendar/bg-calculator.ts
@@ -1,5 +1,4 @@
 import { ColorScheme, useMantineTheme } from '@mantine/core';
-
 import { isToday } from '~/tools/shared/time/date.tool';

 export const getBgColorByDateAndTheme = (colorScheme: ColorScheme, date: Date) => {
--- a/src/widgets/dashDot/DashDotCompactNetwork.tsx
+++ b/src/widgets/dashDot/DashDotCompactNetwork.tsx
@@ -1,9 +1,8 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-import { RouterOutputs } from '~/utils/api';
-
 import { bytes } from '~/tools/bytesHelper';
+import { RouterOutputs } from '~/utils/api';

 interface DashDotCompactNetworkProps {
  info: DashDotInfo;
--- a/src/widgets/dashDot/DashDotCompactStorage.tsx
+++ b/src/widgets/dashDot/DashDotCompactStorage.tsx
@@ -1,9 +1,9 @@
 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 { api } from '~/utils/api';
+
 import { DashDotInfo } from './DashDotCompactNetwork';

 interface DashDotCompactStorageProps {
--- a/src/widgets/dashDot/api.ts
+++ b/src/widgets/dashDot/api.ts
@@ -1,6 +1,13 @@
 import { useConfigContext } from '~/config/provider';
 import { RouterInputs, api } from '~/utils/api';
-import { UsenetHistoryRequestParams, UsenetInfoRequestParams, UsenetPauseRequestParams, UsenetQueueRequestParams, UsenetResumeRequestParams } from '../useNet/types';
+
+import {
+  UsenetHistoryRequestParams,
+  UsenetInfoRequestParams,
+  UsenetPauseRequestParams,
+  UsenetQueueRequestParams,
+  UsenetResumeRequestParams,
+} from '../useNet/types';

 const POLLING_INTERVAL = 2000;

--- a/src/widgets/date/DateTile.tsx
+++ b/src/widgets/date/DateTile.tsx
@@ -6,10 +6,10 @@ import timezones from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import { useSession } from 'next-auth/react';
 import { useEffect, useRef, useState } from 'react';
+import { useSetSafeInterval } from '~/hooks/useSetSafeInterval';
 import { getLanguageByCode } from '~/tools/language';
 import { api } from '~/utils/api';

-import { useSetSafeInterval } from '~/hooks/useSetSafeInterval';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';

@@ -108,8 +108,8 @@ function DateTile({ widget }: DateTileProps) {
  );
 }

-const useStyles = createStyles(()=>({
-  wrapper:{
+const useStyles = createStyles(() => ({
+  wrapper: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-evenly',
@@ -117,17 +117,17 @@ const useStyles = createStyles(()=>({
    height: '100%',
    gap: 0,
  },
-  clock:{
+  clock: {
    lineHeight: '1',
    whiteSpace: 'nowrap',
    fontWeight: 700,
    fontSize: '2.125rem',
  },
-  extras:{
+  extras: {
    lineHeight: '1',
    whiteSpace: 'nowrap',
-  }
-}))
+  },
+}));

 /**
 * State which updates when the minute is changing
@@ -142,7 +142,7 @@ const useDateState = (location?: { latitude: number; longitude: number }) => {
  const { data: userWithSettings } = api.user.withSettings.useQuery(undefined, {
    enabled: !!sessionData?.user,
  });
-  const userLanguage =  userWithSettings?.settings.language;
+  const userLanguage = userWithSettings?.settings.language;
  const [date, setDate] = useState(getNewDate(timezone));
  const setSafeInterval = useSetSafeInterval();
  const timeoutRef = useRef<NodeJS.Timeout>(); // reference for initial timeout until first minute change
--- a/src/widgets/dnshole/DnsHoleControls.tsx
+++ b/src/widgets/dnshole/DnsHoleControls.tsx
@@ -16,9 +16,9 @@ import { useElementSize } from '@mantine/hooks';
 import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
 import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
+import { useConfigContext } from '~/config/provider';
 import { api } from '~/utils/api';

-import { useConfigContext } from '~/config/provider';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
@@ -84,15 +84,19 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
  }

  if (data.status.length === 0) {
-    return(
+    return (
      <Center h="100%">
        <Stack align="center">
-          <IconDeviceGamepad size={40} strokeWidth={1}/>
-          <Title align="center" order={6}>{t('modules/dns-hole-controls:descriptor.errors.general.title')}</Title>
-          <Text align="center">{t('modules/dns-hole-controls:descriptor.errors.general.text')}</Text>
+          <IconDeviceGamepad size={40} strokeWidth={1} />
+          <Title align="center" order={6}>
+            {t('modules/dns-hole-controls:descriptor.errors.general.title')}
+          </Title>
+          <Text align="center">
+            {t('modules/dns-hole-controls:descriptor.errors.general.text')}
+          </Text>
        </Stack>
      </Center>
-    )
+    );
  }

  console.log(data);
@@ -136,15 +140,18 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
        >
          <Button
            onClick={async () => {
-              await mutateAsync({
-                action: 'enable',
-                configName,
-                appsToChange: getDnsStatus()?.disabled,
-              },{
-                onSettled: () => {
-                  reFetchSummaryDns();
+              await mutateAsync(
+                {
+                  action: 'enable',
+                  configName,
+                  appsToChange: getDnsStatus()?.disabled,
+                },
+                {
+                  onSettled: () => {
+                    reFetchSummaryDns();
+                  },
                }
-              });
+              );
            }}
            disabled={getDnsStatus()?.disabled.length === 0 || fetchingDnsSummary || changingStatus}
            leftIcon={<IconPlayerPlay size={20} />}
@@ -156,15 +163,18 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
          </Button>
          <Button
            onClick={async () => {
-              await mutateAsync({
-                action: 'disable',
-                configName,
-                appsToChange: getDnsStatus()?.enabled,
-              },{
-                onSettled: () => {
-                  reFetchSummaryDns();
+              await mutateAsync(
+                {
+                  action: 'disable',
+                  configName,
+                  appsToChange: getDnsStatus()?.enabled,
+                },
+                {
+                  onSettled: () => {
+                    reFetchSummaryDns();
+                  },
                }
-              });
+              );
            }}
            disabled={getDnsStatus()?.enabled.length === 0 || fetchingDnsSummary || changingStatus}
            leftIcon={<IconPlayerStop size={20} />}
--- a/src/widgets/dnshole/DnsHoleSummary.tsx
+++ b/src/widgets/dnshole/DnsHoleSummary.tsx
@@ -10,9 +10,9 @@ import {
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '~/config/provider';
+import { formatNumber, formatPercentage } from '~/tools/client/math';
 import { RouterOutputs, api } from '~/utils/api';

-import { formatNumber, formatPercentage } from '~/tools/client/math';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';
--- a/src/widgets/download-speed/Tile.tsx
+++ b/src/widgets/download-speed/Tile.tsx
@@ -15,17 +15,17 @@ 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 './useGetNetworkSpeed';
 import { useColorTheme } from '~/tools/color';
 import { humanFileSize } from '~/tools/humanFileSize';
 import {
  NormalizedDownloadQueueResponse,
  TorrentTotalDownload,
 } from '~/types/api/downloads/queue/NormalizedDownloadQueueResponse';
+
 import definition, { ITorrentNetworkTraffic } from './TorrentNetworkTrafficTile';
+import { useGetDownloadClientsQueue } from './useGetNetworkSpeed';

 interface TorrentNetworkTrafficTileProps {
  widget: ITorrentNetworkTraffic;
--- a/src/widgets/index.ts
+++ b/src/widgets/index.ts
@@ -9,12 +9,12 @@ import iframe from './iframe/IFrameTile';
 import mediaRequestsList from './media-requests/MediaRequestListTile';
 import mediaRequestsStats from './media-requests/MediaRequestStatsTile';
 import mediaServer from './media-server/MediaServerTile';
+import notebook from './notebook/NotebookWidgetTile';
 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 notebook from './notebook/NotebookWidgetTile';

 export default {
  calendar,
--- a/src/widgets/media-requests/MediaRequestStatsTile.tsx
+++ b/src/widgets/media-requests/MediaRequestStatsTile.tsx
@@ -57,7 +57,7 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
  const {
    data: usersData,
    isFetching: usersFetching,
-    isLoading: usersLoading
+    isLoading: usersLoading,
  } = useUsersQuery(widget);
  const { ref, height } = useElementSize();
  const { colorScheme } = useMantineTheme();
@@ -128,7 +128,7 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
              p={0}
              component="a"
              href={user.userLink}
-              target={widget.properties.openInNewTab ? "_blank" : "_self"}
+              target={widget.properties.openInNewTab ? '_blank' : '_self'}
              mah={95}
              mih={55}
              radius="md"
--- a/src/widgets/media-requests/media-request-query.tsx
+++ b/src/widgets/media-requests/media-request-query.tsx
@@ -1,9 +1,10 @@
 import { useConfigContext } from '~/config/provider';
-import { MediaRequestListWidget } from './MediaRequestListTile';
-import { MediaRequestStatsWidget } from './MediaRequestStatsTile';
 import { api } from '~/utils/api';

-export const useMediaRequestQuery = (widget: MediaRequestListWidget|MediaRequestStatsWidget) => {
+import { MediaRequestListWidget } from './MediaRequestListTile';
+import { MediaRequestStatsWidget } from './MediaRequestStatsTile';
+
+export const useMediaRequestQuery = (widget: MediaRequestListWidget | MediaRequestStatsWidget) => {
  const { name: configName } = useConfigContext();
  return api.mediaRequest.allMedia.useQuery(
    { configName: configName!, widget: widget },
@@ -13,7 +14,7 @@ export const useMediaRequestQuery = (widget: MediaRequestListWidget|MediaRequest
  );
 };

-export const useUsersQuery = (widget: MediaRequestListWidget|MediaRequestStatsWidget) => {
+export const useUsersQuery = (widget: MediaRequestListWidget | MediaRequestStatsWidget) => {
  const { name: configName } = useConfigContext();
  return api.mediaRequest.users.useQuery(
    { configName: configName!, widget: widget },
--- a/src/widgets/media-server/MediaServerTile.tsx
+++ b/src/widgets/media-server/MediaServerTile.tsx
@@ -11,13 +11,13 @@ import {
 } from '@mantine/core';
 import { IconAlertTriangle, IconMovie } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
-
 import { AppAvatar } from '~/components/AppAvatar';
 import { useConfigContext } from '~/config/provider';
-import { useGetMediaServers } from './useGetMediaServers';
+
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { TableRow } from './TableRow';
+import { useGetMediaServers } from './useGetMediaServers';

 const definition = defineWidget({
  id: 'media-server',
--- a/src/widgets/media-server/NowPlayingDisplay.tsx
+++ b/src/widgets/media-server/NowPlayingDisplay.tsx
@@ -6,11 +6,9 @@ import {
  IconQuestionMark,
  IconVideo,
 } from '@tabler/icons-react';
-
 import { GenericSessionInfo } from '~/types/api/media-server/session-info';

 export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo }) => {
-
  if (!session.currentlyPlaying) {
    return null;
  }
--- a/src/widgets/torrent/TorrentTile.tsx
+++ b/src/widgets/torrent/TorrentTile.tsx
@@ -18,10 +18,10 @@ import duration from 'dayjs/plugin/duration';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useTranslation } from 'next-i18next';
 import { useCardStyles } from '~/components/layout/Common/useCardStyles';
-
 import { MIN_WIDTH_MOBILE } from '~/constants/constants';
 import { NormalizedDownloadQueueResponse } from '~/types/api/downloads/queue/NormalizedDownloadQueueResponse';
 import { AppIntegrationType } from '~/types/app';
+
 import { useGetDownloadClientsQueue } from '../download-speed/useGetNetworkSpeed';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
--- a/src/widgets/useNet/UseNetTile.tsx
+++ b/src/widgets/useNet/UseNetTile.tsx
@@ -6,11 +6,11 @@ import duration from 'dayjs/plugin/duration';
 import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
-
 import { useConfigContext } from '~/config/provider';
 import { MIN_WIDTH_MOBILE } from '~/constants/constants';
 import { humanFileSize } from '~/tools/humanFileSize';
 import { AppIntegrationType } from '~/types/app';
+
 import {
  useGetUsenetInfo,
  usePauseUsenetQueueMutation,
--- a/src/widgets/weather/WeatherIcon.tsx
+++ b/src/widgets/weather/WeatherIcon.tsx
@@ -22,7 +22,7 @@ interface WeatherIconProps {
 * @param code weather code from api
 * @returns weather tile component
 */
-export const WeatherIcon = ({ code, size=50 }: WeatherIconProps) => {
+export const WeatherIcon = ({ code, size = 50 }: WeatherIconProps) => {
  const { t } = useTranslation('modules/weather');

  const { icon: Icon, name } =
--- a/src/widgets/weather/WeatherTile.tsx
+++ b/src/widgets/weather/WeatherTile.tsx
@@ -6,12 +6,12 @@ import {
  IconCloudRain,
  IconMapPin,
 } from '@tabler/icons-react';
+import { useTranslation } from 'react-i18next';
 import { api } from '~/utils/api';

 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { WeatherIcon } from './WeatherIcon';
-import { useTranslation } from 'react-i18next';

 const definition = defineWidget({
  id: 'weather',
--- a/src/widgets/widgets.ts
+++ b/src/widgets/widgets.ts
@@ -8,7 +8,6 @@ import {
 } from '@mantine/core';
 import { Icon } from '@tabler/icons-react';
 import React from 'react';
-
 import { AreaType } from '~/types/area';
 import { ShapeType } from '~/types/shape';

--- a/tests/pages/board/[slug].spec.ts
+++ b/tests/pages/board/[slug].spec.ts
@@ -1,20 +1,15 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-
 import { SSRConfig } from 'next-i18next';
-
 import { ParsedUrlQuery } from 'querystring';
-
 import { describe, expect, it, vitest } from 'vitest';
+import * as serverAuthModule from '~/server/auth';
+import { ConfigType } from '~/types/config';

 import { getServerSideProps } from '../../../src/pages/board/[slug]';
-
 import * as configExistsModule from '../../../src/tools/config/configExists';
 import * as getFrontendConfigModule from '../../../src/tools/config/getFrontendConfig';
 import * as getServerSideTranslationsModule from '../../../src/tools/server/getServerSideTranslations';

-import * as serverAuthModule from '~/server/auth';
-import { ConfigType } from '~/types/config';
-
 vitest.mock('./../../server/auth.ts', () => ({
  getServerAuthSession: () => null,
 }));
@@ -159,8 +154,8 @@ describe('[slug] page', () => {
    // assert
    expect(response).toEqual({
      redirect: {
-        destination: "/auth/login?redirectAfterLogin=/board/my-authentication-board",
-        permanent: false
+        destination: '/auth/login?redirectAfterLogin=/board/my-authentication-board',
+        permanent: false,
      },
      props: {},
    });