💄 Prettier repository

package.json

@@ -84,7 +84,7 @@
     "@next/eslint-plugin-next": "^13.4.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/dockerode": "^3.3.9",
     "@types/node": "18.16.19",
     "@types/prismjs": "^1.26.0",
@@ -155,6 +155,7 @@
       "^[./]"
     ],
     "importOrderSeparation": true,
+    "plugins": ["@trivago/prettier-plugin-sort-imports"],
     "importOrderSortSpecifiers": true
   },
   "eslintConfig": {

src/components/AppAvatar.test.tsx

@@ -1,5 +1,6 @@
-import { render, screen, cleanup } from '@testing-library/react';
+import { cleanup, render, screen } from '@testing-library/react';
-import { describe, expect, it, afterEach } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
+
 import { AppAvatar } from './AppAvatar';
 
 describe('AppAvatar', () => {

src/components/Config/ConfigChanger.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { api } from '~/utils/api';
+
 import { useConfigContext } from '../../config/provider';
 
 export default function ConfigChanger() {

src/components/Config/LoadConfig.tsx

@@ -5,9 +5,10 @@ import { IconCheck as Check, IconPhoto, IconUpload, IconX, IconX as X } from '@t
 import { setCookie } from 'cookies-next';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
+import { api } from '~/utils/api';
+
 import { useConfigStore } from '../../config/store';
 import { ConfigType } from '../../types/config';
-import { api } from '~/utils/api';
 
 export const LoadConfigComponent = () => {
   const theme = useMantineTheme();

src/components/Dashboard/Mobile/Ribbon/MobileRibbon.tsx

@@ -1,6 +1,7 @@
-import { ActionIcon, createStyles, Space } from '@mantine/core';
+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';

src/components/Dashboard/Mobile/Ribbon/MobileRibbonSidebarDrawer.tsx

@@ -1,5 +1,6 @@
 import { Drawer, Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
+
 import { DashboardSidebar } from '../../Wrappers/Sidebar/Sidebar';
 
 interface MobileRibbonSidebarDrawerProps {

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -4,7 +4,6 @@ import {
   Anchor,
   Badge,
   Button,
-  createStyles,
   Grid,
   Group,
   HoverCard,
@@ -14,6 +13,7 @@ import {
   Text,
   Title,
   Tooltip,
+  createStyles,
 } from '@mantine/core';
 import {
   IconAnchor,
@@ -29,17 +29,18 @@ import {
 } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
 import { InitOptions } from 'i18next';
-import { i18n, Trans, useTranslation } from 'next-i18next';
+import { Trans, i18n, useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import { ReactNode } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
 import { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore';
 import { useColorTheme } from '../../../../tools/color';
+import Credits from '../../../Settings/Common/Credits';
 import Tip from '../../../layout/Tip';
 import { usePrimaryGradient } from '../../../layout/useGradient';
-import Credits from '../../../Settings/Common/Credits';
 
 interface AboutModalProps {
   opened: boolean;

src/components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal.tsx

@@ -1,5 +1,6 @@
 import { SelectItem } from '@mantine/core';
-import { closeModal, ContextModalProps } from '@mantine/modals';
+import { ContextModalProps, closeModal } from '@mantine/modals';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { AppType } from '../../../../types/app';

src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx

@@ -1,6 +1,7 @@
 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 {

src/components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal.tsx

@@ -1,5 +1,6 @@
 import { SelectItem } from '@mantine/core';
-import { closeModal, ContextModalProps } from '@mantine/modals';
+import { ContextModalProps, closeModal } from '@mantine/modals';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import widgets from '../../../../widgets';

src/components/Dashboard/Modals/EditAppModal/EditAppModal.tsx

@@ -12,6 +12,7 @@ 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';

src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx

@@ -2,6 +2,7 @@ import { Flex, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useEffect, useRef } from 'react';
+
 import { AppType } from '../../../../../../types/app';
 import { IconSelector } from '../../../../../IconSelector/IconSelector';
 

src/components/Dashboard/Modals/EditAppModal/Tabs/BehaviourTab/BehaviourTab.tsx

@@ -1,6 +1,7 @@
-import { Tabs, Switch } from '@mantine/core';
+import { Switch, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
+
 import { AppType } from '../../../../../../types/app';
 
 interface BehaviourTabProps {

src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx

@@ -2,6 +2,7 @@ import { Tabs, 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';
 

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/GenericSecretInput.tsx

@@ -1,20 +1,21 @@
 import {
+  Badge,
   Button,
   Card,
-  createStyles,
   Flex,
   Grid,
   Group,
   PasswordInput,
+  Text,
   ThemeIcon,
   Title,
-  Text,
-  Badge,
   Tooltip,
+  createStyles,
 } from '@mantine/core';
 import { Icon } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+
 import { AppIntegrationPropertyAccessabilityType } from '../../../../../../../../types/app';
 
 interface GenericSecretInputProps {

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/InputElements/IntegrationSelector.tsx

@@ -3,13 +3,14 @@ import { Group, Image, Select, SelectItem, Text } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 import { forwardRef } from 'react';
+
 import {
-  IntegrationField,
-  integrationFieldDefinitions,
-  integrationFieldProperties,
   AppIntegrationPropertyType,
   AppIntegrationType,
   AppType,
+  IntegrationField,
+  integrationFieldDefinitions,
+  integrationFieldProperties,
 } from '../../../../../../../../types/app';
 
 interface IntegrationSelectorProps {

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx

@@ -1,12 +1,13 @@
 import { Stack } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { IconKey } from '@tabler/icons-react';
+
 import {
+  AppIntegrationPropertyType,
+  AppType,
   IntegrationField,
   integrationFieldDefinitions,
   integrationFieldProperties,
-  AppIntegrationPropertyType,
-  AppType,
 } from '../../../../../../../../types/app';
 import { GenericSecretInput } from '../InputElements/GenericSecretInput';
 

src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/IntegrationTab.tsx

@@ -2,6 +2,7 @@ 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';

src/components/Dashboard/Modals/EditAppModal/Tabs/NetworkTab/NetworkTab.tsx

@@ -1,6 +1,7 @@
-import { Tabs, Switch, MultiSelect } from '@mantine/core';
+import { MultiSelect, 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';
 

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -6,6 +6,7 @@ import { motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+
 import { useConfigContext } from '../../../../../../config/provider';
 import { useConfigStore } from '../../../../../../config/store';
 import { openContextModalGeneric } from '../../../../../../tools/mantineModalManagerExtensions';

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -3,6 +3,7 @@ import { Icon } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import React from 'react';
+
 import { useStyles } from './styles';
 
 interface GenericAvailableElementTypeProps {

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -1,6 +1,7 @@
 import { Grid, Text } from '@mantine/core';
 import { IconCursorText } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+
 import { GenericAvailableElementType } from '../Shared/GenericElementType';
 import { SelectorBackArrow } from '../Shared/SelectorBackArrow';
 

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/AvailableWidgetsTab.tsx

@@ -1,5 +1,6 @@
 import { Grid, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
+
 import widgets from '../../../../../../widgets';
 import { SelectorBackArrow } from '../Shared/SelectorBackArrow';
 import { WidgetElementType } from './WidgetElementType';

src/components/Dashboard/Modals/SelectElement/Components/WidgetsTab/WidgetElementType.tsx

@@ -1,8 +1,9 @@
 import { useModals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
-import { IconChecks, Icon } from '@tabler/icons-react';
+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';
@@ -37,11 +38,14 @@ export const WidgetElementType = ({ id, image, disabled, widget }: WidgetElement
           {
             id: uuidv4(),
             type: widget.id,
-            properties: Object.entries(widget.options).reduce((prev, [k, v]) => {
+            properties: Object.entries(widget.options).reduce(
-              const newPrev = prev;
+              (prev, [k, v]) => {
-              newPrev[k] = v.defaultValue;
+                const newPrev = prev;
-              return newPrev;
+                newPrev[k] = v.defaultValue;
-            }, {} as IWidget<string, any>['properties']),
+                return newPrev;
+              },
+              {} as IWidget<string, any>['properties']
+            ),
             area: {
               type: 'wrapper',
               properties: {

src/components/Dashboard/Modals/SelectElement/SelectElementModal.tsx

@@ -1,8 +1,9 @@
 import { ContextModalProps } from '@mantine/modals';
 import { useState } from 'react';
-import { AvailableIntegrationElements } from './Components/WidgetsTab/AvailableWidgetsTab';
+
 import { AvailableElementTypes } from './Components/Overview/AvailableElementsOverview';
 import { AvailableStaticTypes } from './Components/StaticElementsTab/AvailableStaticElementsTab';
+import { AvailableIntegrationElements } from './Components/WidgetsTab/AvailableWidgetsTab';
 
 export const SelectElementModal = ({ context, id }: ContextModalProps) => {
   const [activeTab, setActiveTab] = useState<undefined | 'integrations' | 'static_elements'>();

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -2,6 +2,7 @@ import { Box, Stack, Title, UnstyledButton } from '@mantine/core';
 import { createStyles } from '@mantine/styles';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
+
 import { AppType } from '../../../../types/app';
 import { useCardStyles } from '../../../layout/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';

src/components/Dashboard/Tiles/GenericTileMenu.tsx

@@ -1,6 +1,7 @@
 import { ActionIcon, Menu } from '@mantine/core';
 import { IconLayoutKanban, IconPencil, IconSettings, IconTrash } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+
 import { useEditModeStore } from '../Views/useEditModeStore';
 
 interface GenericTileMenuProps {

src/components/Dashboard/Tiles/HomarrCardWrapper.tsx

@@ -1,5 +1,6 @@
 import { Card, CardProps } from '@mantine/core';
 import { ReactNode } from 'react';
+
 import { useCardStyles } from '../../layout/useCardStyles';
 import { useEditModeStore } from '../Views/useEditModeStore';
 

src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx

@@ -1,26 +1,27 @@
 import {
-  Card,
-  Stack,
-  Text,
-  Title,
-  Group,
-  TextInput,
-  Button,
-  NumberInput,
-  Modal,
-  Table,
-  Tooltip,
   ActionIcon,
+  Button,
+  Card,
+  Group,
   Loader,
+  Modal,
+  NumberInput,
+  Stack,
+  Table,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { IconListSearch, IconClick } from '@tabler/icons-react';
+import { IconClick, IconListSearch } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IntegrationOptionsValueType } from '../WidgetsEditModal';
 import { City } from '~/server/api/routers/weather';
 import { api } from '~/utils/api';
 
+import { IntegrationOptionsValueType } from '../WidgetsEditModal';
+
 type LocationSelectionProps = {
   widgetId: string;
   propName: string;

src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx

@@ -1,8 +1,9 @@
-import { Collapse, createStyles, Flex, Stack, Text } from '@mantine/core';
+import { Collapse, Flex, Stack, Text, createStyles } from '@mantine/core';
 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) => ({
@@ -64,10 +65,10 @@ export const StaticDraggableList: FC<StaticDraggableListParams> = (props) => {
         as="div"
       >
         {props.value.map((item) => (
-            <ListItem key={item.key} item={item} label={props.labels[item.key]}>
+          <ListItem key={item.key} item={item} label={props.labels[item.key]}>
-              {props.children?.[item.key]}
+            {props.children?.[item.key]}
-            </ListItem>
+          </ListItem>
-          ))}
+        ))}
       </Reorder.Group>
     </div>
   );

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -18,6 +18,7 @@ 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';
@@ -47,7 +48,7 @@ export const WidgetsEditModal = ({
   const [moduleProperties, setModuleProperties] = useState(innerProps.options);
   const items = Object.entries(innerProps.widgetOptions ?? {}) as [
     string,
-    IntegrationOptionsValueType
+    IntegrationOptionsValueType,
   ][];
 
   // Find the Key in the "Widgets" Object that matches the widgetId

src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx

@@ -1,5 +1,6 @@
 import { Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
+
 import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
 import WidgetsDefinitions from '../../../../widgets';
 import { IWidget } from '../../../../widgets/widgets';

src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
 import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { Trans, useTranslation } from 'next-i18next';
+import React from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 

src/components/Dashboard/Views/DashboardView.tsx

@@ -1,5 +1,6 @@
 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';

src/components/Dashboard/Views/ViewToggleButton.tsx

@@ -1,6 +1,7 @@
 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';
 

src/components/Dashboard/Wrappers/Category/Category.tsx

@@ -2,23 +2,24 @@ import {
   Accordion,
   ActionIcon,
   Box,
-  Menu,
-  Title,
-  Text,
-  Stack,
   List,
+  Menu,
+  Stack,
+  Text,
+  Title,
   createStyles,
 } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
-import { IconDotsVertical, IconShare3 } from '@tabler/icons-react';
 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/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
-import { useGridstack } from '../gridstack/use-gridstack';
 import { WrapperContent } from '../WrapperContent';
+import { useGridstack } from '../gridstack/use-gridstack';
 import { CategoryEditMenu } from './CategoryEditMenu';
 
 interface DashboardCategoryProps {
@@ -108,10 +109,7 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
                 </ActionIcon>
               </Menu.Target>
               <Menu.Dropdown>
-                <Menu.Item
+                <Menu.Item onClick={handleMenuClick} icon={<IconShare3 size="1rem" />}>
-                  onClick={handleMenuClick}
-                  icon={<IconShare3 size="1rem" />}
-                >
                   {t('actions.category.openAllInNewTab')}
                 </Menu.Item>
               </Menu.Dropdown>

src/components/Dashboard/Wrappers/Category/CategoryEditMenu.tsx

@@ -1,13 +1,14 @@
 import { ActionIcon, Menu } from '@mantine/core';
 import {
-  IconTransitionTop,
-  IconTransitionBottom,
-  IconRowInsertTop,
-  IconRowInsertBottom,
   IconEdit,
-  IconTrash,
+  IconRowInsertBottom,
+  IconRowInsertTop,
   IconSettings,
+  IconTransitionBottom,
+  IconTransitionTop,
+  IconTrash,
 } from '@tabler/icons-react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { CategoryType } from '../../../../types/category';
 import { useCategoryActions } from './useCategoryActions';

src/components/Dashboard/Wrappers/Category/CategoryEditModal.tsx

@@ -2,6 +2,7 @@ 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';

src/components/Dashboard/Wrappers/Category/useCategoryActions.tsx

@@ -1,4 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
+
 import { useConfigStore } from '../../../../config/store';
 import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
 import { AppType } from '../../../../types/app';

src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx

@@ -1,8 +1,9 @@
 import { Card } from '@mantine/core';
 import { RefObject } from 'react';
+
 import { useCardStyles } from '../../../layout/useCardStyles';
-import { useGridstack } from '../gridstack/use-gridstack';
 import { WrapperContent } from '../WrapperContent';
+import { useGridstack } from '../gridstack/use-gridstack';
 
 interface DashboardSidebarProps extends DashboardSidebarInnerProps {
   location: 'right' | 'left';

src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx

@@ -1,7 +1,7 @@
 import { WrapperType } from '../../../../types/wrapper';
 import { useEditModeStore } from '../../Views/useEditModeStore';
-import { useGridstack } from '../gridstack/use-gridstack';
 import { WrapperContent } from '../WrapperContent';
+import { useGridstack } from '../gridstack/use-gridstack';
 
 interface DashboardWrapperProps {
   wrapper: WrapperType;

src/components/Dashboard/Wrappers/WrapperContent.tsx

@@ -1,5 +1,6 @@
 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';

src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts

@@ -1,5 +1,6 @@
 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';

src/components/Dashboard/Wrappers/gridstack/store.tsx

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+
 import { useConfigContext } from '../../../../config/provider';
 import { GridstackBreakpoints } from '../../../../constants/gridstack-breakpoints';
 

src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts

@@ -1,12 +1,13 @@
 import { GridStack, GridStackNode } from 'fily-publish-gridstack';
-import { createRef, MutableRefObject, RefObject, useEffect, useMemo, useRef } from 'react';
+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 { initializeGridstack, TileWithUnknownLocation } from './init-gridstack';
+import { TileWithUnknownLocation, initializeGridstack } from './init-gridstack';
 import { useGridstackStore, useWrapperColumnCount } from './store';
 
 interface UseGristackReturnType {

src/components/IconSelector/IconSelector.tsx

@@ -1,23 +1,24 @@
-import { forwardRef, useImperativeHandle, useState } from 'react';
 import {
   Autocomplete,
-  CloseButton,
-  Stack,
-  Title,
-  Text,
-  Group,
-  Loader,
-  createStyles,
   Box,
+  CloseButton,
+  Group,
   Image,
-  SelectItemProps,
+  Loader,
   ScrollArea,
+  SelectItemProps,
+  Stack,
+  Text,
+  Title,
+  createStyles,
 } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { api } from '~/utils/api';
+
 import { humanFileSize } from '../../tools/humanFileSize';
 import { DebouncedImage } from './DebouncedImage';
-import { api } from '~/utils/api';
 
 export const IconSelector = forwardRef(
   (

src/components/Settings/Common/CacheButtons.tsx

@@ -1,7 +1,8 @@
 import { Button, Group, MultiSelect, Stack, Title } from '@mantine/core';
-import { useState } from 'react';
 import { notifications } from '@mantine/notifications';
 import { IconTrash } from '@tabler/icons-react';
+import { useState } from 'react';
+
 import { queryClient } from '../../../tools/server/configurations/tanstack/queryClient.tool';
 
 const data = [

src/components/Settings/Common/CommonSettings.tsx

@@ -1,11 +1,12 @@
 import { ScrollArea, Space, Stack, Text } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
+
 import { useConfigContext } from '../../../config/provider';
 import ConfigChanger from '../../Config/ConfigChanger';
+import { CacheButtons } from './CacheButtons';
 import ConfigActions from './Config/ConfigActions';
 import LanguageSelect from './Language/LanguageSelect';
 import { SearchEngineSelector } from './SearchEngine/SearchEngineSelector';
-import { CacheButtons } from './CacheButtons';
 
 export default function CommonSettings() {
   const { config } = useConfigContext();

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

@@ -2,9 +2,9 @@ import {
   ActionIcon,
   Alert,
   Center,
-  createStyles,
   Flex,
   Text,
+  createStyles,
   useMantineTheme,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
@@ -21,11 +21,12 @@ import {
 import fileDownload from 'js-file-download';
 import { Trans, useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
+import { api } from '~/utils/api';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import Tip from '../../../layout/Tip';
 import { CreateConfigCopyModal } from './CreateCopyModal';
-import { api } from '~/utils/api';
 
 export default function ConfigActions() {
   const { t } = useTranslation(['settings/general/config-changer', 'settings/common', 'common']);

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

@@ -1,12 +1,13 @@
 import { Button, Group, Modal, TextInput, Title } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { useTranslation } from 'next-i18next';
-import { IconCheck, IconX } from '@tabler/icons-react';
 import { showNotification } from '@mantine/notifications';
-import { useConfigStore } from '../../../../config/store';
+import { IconCheck, IconX } from '@tabler/icons-react';
+import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '~/config/provider';
 import { api } from '~/utils/api';
 
+import { useConfigStore } from '../../../../config/store';
+
 interface CreateConfigCopyModalProps {
   opened: boolean;
   closeModal: () => void;

src/components/Settings/Common/Credits.tsx

@@ -1,6 +1,7 @@
 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() {

src/components/Settings/Common/Language/LanguageSelect.tsx

@@ -1,11 +1,11 @@
 import { Group, Select, Stack, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
-
+import { getCookie, setCookie } from 'cookies-next';
-import { forwardRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
-import { getCookie, setCookie } from 'cookies-next';
+import { forwardRef, useState } from 'react';
-import { getLanguageByCode, Language } from '../../../../tools/language';
+
+import { Language, getLanguageByCode } from '../../../../tools/language';
 
 export default function LanguageSelect() {
   const { t, i18n } = useTranslation('settings/general/internationalization');

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

@@ -2,6 +2,7 @@ import { Alert, Paper, SegmentedControl, Space, Stack, TextInput, Title } from '
 import { IconInfoCircle } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import {

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

@@ -1,6 +1,7 @@
 import { Switch } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { SearchEngineCommonSettingsType } from '../../../../types/settings';

src/components/Settings/Customization/Accessibility/AccessibilitySettings.tsx

@@ -1,10 +1,11 @@
 import { Alert, Stack, Switch } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { BaseSyntheticEvent } from 'react';
-import { useConfigStore } from '../../../../config/store';
-import { useConfigContext } from '../../../../config/provider';
 import { useTranslation } from 'react-i18next';
 
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
+
 export const AccessibilitySettings = () => {
   const { t } = useTranslation('settings/customization/accessibility');
   const { updateConfig } = useConfigStore();

src/components/Settings/Customization/CustomizationAccordeon.tsx

@@ -1,7 +1,16 @@
 import { Accordion, Checkbox, Grid, Group, Stack, Text } from '@mantine/core';
-import { IconAccessible, IconBrush, IconChartCandle, IconCode, IconDragDrop, IconLayout } from '@tabler/icons-react';
+import {
+  IconAccessible,
+  IconBrush,
+  IconChartCandle,
+  IconCode,
+  IconDragDrop,
+  IconLayout,
+} from '@tabler/icons-react';
 import { i18n, useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
+
+import { AccessibilitySettings } from './Accessibility/AccessibilitySettings';
 import { GridstackConfiguration } from './Layout/GridstackConfiguration';
 import { LayoutSelector } from './Layout/LayoutSelector';
 import { BackgroundChanger } from './Meta/BackgroundChanger';
@@ -13,7 +22,6 @@ import { ColorSelector } from './Theme/ColorSelector';
 import { CustomCssChanger } from './Theme/CustomCssChanger';
 import { DashboardTilesOpacitySelector } from './Theme/OpacitySelector';
 import { ShadeSelector } from './Theme/ShadeSelector';
-import { AccessibilitySettings } from './Accessibility/AccessibilitySettings';
 
 export const CustomizationSettingsAccordeon = () => {
   const items = getItems().map((item) => (

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -1,6 +1,7 @@
 import { ScrollArea, Stack, Text } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
+
 import { CustomizationSettingsAccordeon } from './CustomizationAccordeon';
 
 export default function CustomizationSettings() {

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

@@ -3,6 +3,7 @@ import { useForm } from '@mantine/form';
 import { IconCheck, IconReload } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { GridstackBreakpoints } from '../../../../constants/gridstack-breakpoints';

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

@@ -1,6 +1,5 @@
 import {
   Checkbox,
-  createStyles,
   Divider,
   Flex,
   Group,
@@ -9,9 +8,11 @@ import {
   Stack,
   Text,
   Title,
+  createStyles,
 } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { createDummyArray } from '../../../../tools/client/arrays';

src/components/Settings/Customization/Meta/BackgroundChanger.tsx

@@ -1,6 +1,7 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 

src/components/Settings/Customization/Meta/FaviconChanger.tsx

@@ -1,6 +1,7 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 

src/components/Settings/Customization/Meta/LogoImageChanger.tsx

@@ -1,6 +1,7 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 

src/components/Settings/Customization/Meta/MetaTitleChanger.tsx

@@ -1,6 +1,7 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 

src/components/Settings/Customization/Meta/PageTitleChanger.tsx

@@ -1,6 +1,7 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 

src/components/Settings/Customization/Theme/ColorSelector.tsx

@@ -10,6 +10,7 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { useColorTheme } from '../../../../tools/color';

src/components/Settings/Customization/Theme/CustomCssChanger.tsx

@@ -1,13 +1,14 @@
-import { Box, createStyles, Group, Loader, Stack, Text, useMantineTheme } from '@mantine/core';
+import { Box, Group, Loader, Stack, Text, createStyles, useMantineTheme } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
-import { useEffect, useState } from 'react';
-import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs';
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
 import 'prismjs/components/prism-css';
 import 'prismjs/themes/prism.css';
+import { useEffect, useState } from 'react';
+import Editor from 'react-simple-code-editor';
+
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 
 export const CustomCssChanger = () => {
   const { t } = useTranslation('settings/customization/page-appearance');

src/components/Settings/Customization/Theme/OpacitySelector.tsx

@@ -1,6 +1,7 @@
 import { Slider, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 

src/components/Settings/Customization/Theme/ShadeSelector.tsx

@@ -11,6 +11,7 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { useColorTheme } from '../../../../tools/color';

src/components/layout/Background.tsx

@@ -1,4 +1,5 @@
 import { Global } from '@mantine/core';
+
 import { useConfigContext } from '../../config/provider';
 
 export function Background() {

src/components/layout/Layout.tsx

@@ -1,4 +1,5 @@
 import { AppShell, createStyles } from '@mantine/core';
+
 import { useConfigContext } from '../../config/provider';
 import { Background } from './Background';
 import { Header } from './header/Header';

src/components/layout/Logo.tsx

@@ -1,4 +1,5 @@
 import { Group, Image, Text } from '@mantine/core';
+
 import { useConfigContext } from '../../config/provider';
 import { usePrimaryGradient } from './useGradient';
 

src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx

@@ -2,6 +2,7 @@ import { ActionIcon, Button, Tooltip } from '@mantine/core';
 import { openContextModal } from '@mantine/modals';
 import { IconApps } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+
 import { useCardStyles } from '../../../useCardStyles';
 
 interface AddElementActionProps {

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -5,10 +5,10 @@ import { IconEditCircle, IconEditCircleOff } from '@tabler/icons-react';
 import Consola from 'consola';
 import { getCookie } from 'cookies-next';
 import { Trans, useTranslation } from 'next-i18next';
+import { api } from '~/utils/api';
+
 import { useConfigContext } from '../../../../../config/provider';
 import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan';
-
-import { api } from '~/utils/api';
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
 import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store';
 import { useCardStyles } from '../../../useCardStyles';

src/components/layout/header/Header.tsx

@@ -1,5 +1,6 @@
-import { Box, createStyles, Group, Header as MantineHeader, Indicator } from '@mantine/core';
+import { Box, Group, Indicator, Header as MantineHeader, createStyles } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
+
 import { REPO_URL } from '../../../../data/constants';
 import { useEditModeInformationStore } from '../../../hooks/useEditModeInformation';
 import DockerMenuButton from '../../../modules/Docker/DockerModule';

src/components/layout/header/Meta/Head.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/no-invalid-html-attribute */
-import React from 'react';
 import NextHead from 'next/head';
-import { SafariStatusBarStyle } from './SafariStatusBarStyle';
+import React from 'react';
+
 import { useConfigContext } from '../../../../config/provider';
+import { SafariStatusBarStyle } from './SafariStatusBarStyle';
 
 export function Head() {
   const { config } = useConfigContext();

src/components/layout/header/SettingsMenu.tsx

@@ -2,6 +2,7 @@ import { Badge, Button, Menu } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconInfoCircle, IconMenu2, IconSettings } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+
 import { useEditModeInformationStore } from '../../../hooks/useEditModeInformation';
 import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';
 import { SettingsDrawer } from '../../Settings/SettingsDrawer';

src/components/layout/header/SettingsMenu/EditModeToggle.tsx

@@ -4,6 +4,7 @@ import { openModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import { IconEdit, IconEditOff } from '@tabler/icons-react';
 import axios from 'axios';
+
 import { useEditModeInformationStore } from '../../../../hooks/useEditModeInformation';
 
 function ModalContent() {

src/components/layout/useCardStyles.ts

@@ -1,4 +1,5 @@
 import { createStyles } from '@mantine/core';
+
 import { useConfigContext } from '../../config/provider';
 
 export const useCardStyles = (isCategory: boolean) => {

src/components/layout/useGradient.tsx

@@ -1,4 +1,5 @@
 import { MantineGradient } from '@mantine/core';
+
 import { useColorTheme } from '../../tools/color';
 
 export const usePrimaryGradient = (): MantineGradient => {

src/config/init.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 import { ConfigType } from '../types/config';
 import { useConfigContext } from './provider';
 import { useConfigStore } from './store';

src/config/provider.tsx

@@ -1,5 +1,6 @@
-import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+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';

src/config/store.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { trcpProxyClient } from '~/utils/api';
+
 import { ConfigType } from '../types/config';
 
 export const useConfigStore = create<UseConfigStoreType>((set, get) => ({

src/hooks/widgets/dashDot/api.ts

@@ -1,5 +1,6 @@
 import { useConfigContext } from '~/config/provider';
 import { RouterInputs, api } from '~/utils/api';
+
 import { UsenetInfoRequestParams } from '../../../pages/api/modules/usenet';
 import type { UsenetHistoryRequestParams } from '../../../pages/api/modules/usenet/history';
 import { UsenetPauseRequestParams } from '../../../pages/api/modules/usenet/pause';

src/modules/Docker/ContainerActionBar.tsx

@@ -15,6 +15,7 @@ import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { RouterInputs, api } from '~/utils/api';
+
 import { useConfigContext } from '../../config/provider';
 import { openContextModalGeneric } from '../../tools/mantineModalManagerExtensions';
 import { MatchingImages, ServiceType, tryMatchPort } from '../../tools/types';

src/modules/Docker/ContainerState.tsx

@@ -1,6 +1,6 @@
 import { Badge, BadgeProps, MantineSize } from '@mantine/core';
-import { useTranslation } from 'next-i18next';
 import Dockerode from 'dockerode';
+import { useTranslation } from 'next-i18next';
 
 export interface ContainerStateProps {
   state: Dockerode.ContainerInfo['State'];

src/modules/Docker/DockerModule.tsx

@@ -4,10 +4,10 @@ import { IconBrandDocker } from '@tabler/icons-react';
 import Docker from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
+import { api } from '~/utils/api';
+
 import { useCardStyles } from '../../components/layout/useCardStyles';
 import { useConfigContext } from '../../config/provider';
-
-import { api } from '~/utils/api';
 import ContainerActionBar from './ContainerActionBar';
 import DockerTable from './DockerTable';
 

src/modules/Docker/DockerTable.tsx

@@ -1,18 +1,19 @@
 import {
   Badge,
   Checkbox,
-  createStyles,
   Group,
   ScrollArea,
   Table,
   Text,
   TextInput,
+  createStyles,
 } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
+
 import { MIN_WIDTH_MOBILE } from '../../constants/constants';
 import ContainerState from './ContainerState';
 

src/modules/common/MediaDisplay.tsx

@@ -2,6 +2,7 @@ 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';

src/modules/overseerr/OverseerrModule.tsx

@@ -1,6 +1,7 @@
 import { IconEyeglass } from '@tabler/icons-react';
-import { OverseerrMediaDisplay } from '../common';
+
 import { IModule } from '../ModuleTypes';
+import { OverseerrMediaDisplay } from '../common';
 
 export const OverseerrModule: IModule = {
   title: 'Overseerr',

src/modules/overseerr/RequestModal.tsx

@@ -1,12 +1,12 @@
-import { Alert, Button, Checkbox, createStyles, Group, Modal, Stack, Table } from '@mantine/core';
+import { Alert, Button, Checkbox, Group, Modal, Stack, Table, createStyles } from '@mantine/core';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import { IconAlertCircle, IconCheck, IconDownload } from '@tabler/icons-react';
 import Consola from 'consola';
 import { useTranslation } from 'next-i18next';
-
 import { useState } from 'react';
 import { useConfigContext } from '~/config/provider';
 import { api } from '~/utils/api';
+
 import { useColorTheme } from '../../tools/color';
 import { MovieResult } from './Movie.d';
 import { Result } from './SearchResult.d';

src/pages/404.tsx

@@ -1,16 +1,16 @@
 import {
   Button,
   Container,
-  createStyles,
   Group,
   Text,
   Title,
+  createStyles,
   useMantineTheme,
 } from '@mantine/core';
-import React from 'react';
-
 import { GetServerSidePropsContext } from 'next';
 import Link from 'next/link';
+import React from 'react';
+
 import { getServerSideTranslations } from '../tools/server/getServerSideTranslations';
 
 const useStyles = createStyles((theme) => ({

src/pages/[slug].tsx

@@ -2,6 +2,7 @@ import { setCookie } from 'cookies-next';
 import fs from 'fs';
 import { GetServerSidePropsContext } from 'next';
 import path from 'path';
+
 import { LoadConfigComponent } from '../components/Config/LoadConfig';
 import { Dashboard } from '../components/Dashboard/Dashboard';
 import Layout from '../components/layout/Layout';

src/pages/_app.tsx

@@ -1,19 +1,22 @@
 import { ColorScheme, ColorSchemeProvider, MantineProvider, MantineTheme } from '@mantine/core';
 import { useColorScheme, useHotkeys, useLocalStorage } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
-import Consola from 'consola';
+import { Notifications } from '@mantine/notifications';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import Consola from 'consola';
 import { getCookie } from 'cookies-next';
 import { GetServerSidePropsContext } from 'next';
 import { appWithTranslation } from 'next-i18next';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useEffect, useState } from 'react';
-import { Notifications } from '@mantine/notifications';
 import 'video.js/dist/video-js.css';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { api } from '~/utils/api';
-import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+
-import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
+import nextI18nextConfig from '../../next-i18next.config';
 import { ChangeAppPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeAppPositionModal';
 import { ChangeWidgetPositionModal } from '../components/Dashboard/Modals/ChangePosition/ChangeWidgetPositionModal';
 import { EditAppModal } from '../components/Dashboard/Modals/EditAppModal/EditAppModal';
@@ -22,20 +25,17 @@ import { WidgetsEditModal } from '../components/Dashboard/Tiles/Widgets/WidgetsE
 import { WidgetsRemoveModal } from '../components/Dashboard/Tiles/Widgets/WidgetsRemoveModal';
 import { CategoryEditModal } from '../components/Dashboard/Wrappers/Category/CategoryEditModal';
 import { ConfigProvider } from '../config/provider';
+import { useEditModeInformationStore } from '../hooks/useEditModeInformation';
+import '../styles/global.scss';
 import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore';
 import { ColorTheme } from '../tools/color';
 import { queryClient } from '../tools/server/configurations/tanstack/queryClient.tool';
 import {
-  getServiceSidePackageAttributes,
   ServerSidePackageAttributesType,
+  getServiceSidePackageAttributes,
 } from '../tools/server/getPackageVersion';
 import { theme } from '../tools/server/theme/theme';
 
-import { useEditModeInformationStore } from '../hooks/useEditModeInformation';
-import '../styles/global.scss';
-import nextI18nextConfig from '../../next-i18next.config';
-import { api } from '~/utils/api';
-
 function App(
   this: any,
   props: AppProps<{

src/pages/api/configs/[slug].ts

@@ -1,10 +1,7 @@
-import fs from 'fs';
-
-import path from 'path';
-
 import Consola from 'consola';
-
+import fs from 'fs';
 import { NextApiRequest, NextApiResponse } from 'next';
+import path from 'path';
 
 import { getConfig } from '../../../tools/config/getConfig';
 import { BackendConfigType, ConfigType } from '../../../types/config';

src/pages/api/configs/index.ts

@@ -1,5 +1,5 @@
-import { NextApiRequest, NextApiResponse } from 'next';
 import fs from 'fs';
+import { NextApiRequest, NextApiResponse } from 'next';
 
 function Get(req: NextApiRequest, res: NextApiResponse) {
   // Get all the configs in the /data/configs folder

src/pages/api/docker/container/[id].tsx

@@ -1,4 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
+
 import DockerSingleton from '../DockerSingleton';
 
 const docker = DockerSingleton.getInstance();

src/pages/api/docker/containers.tsx

@@ -1,4 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
+
 import DockerSingleton from './DockerSingleton';
 
 async function Get(req: NextApiRequest, res: NextApiResponse) {

src/pages/api/icons/index.ts

@@ -1,4 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
+
 import { JsdelivrIconsRepository } from '../../../tools/server/images/jsdelivr-icons-repository';
 import { LocalIconsRepository } from '../../../tools/server/images/local-icons-repository';
 import { UnpkgIconsRepository } from '../../../tools/server/images/unpkg-icons-repository';

src/pages/api/migrate.ts

@@ -1,5 +1,6 @@
-import { NextApiRequest, NextApiResponse } from 'next';
 import fs from 'fs';
+import { NextApiRequest, NextApiResponse } from 'next';
+
 import { backendMigrateConfig } from '../../tools/config/backendMigrateConfig';
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {

src/pages/api/modules/calendar.ts

@@ -1,14 +1,12 @@
 import axios from 'axios';
-
 import Consola from 'consola';
-
 import { NextApiRequest, NextApiResponse } from 'next';
-
 import { z } from 'zod';
-import { AppIntegrationType, IntegrationType } from '../../../types/app';
-import { getConfig } from '../../../tools/config/getConfig';
 import { checkIntegrationsType } from '~/tools/client/app-properties';
 
+import { getConfig } from '../../../tools/config/getConfig';
+import { AppIntegrationType, IntegrationType } from '../../../types/app';
+
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   // Filter out if the reuqest is a POST or a GET
   if (req.method === 'GET') {