💄 Prettier codebase

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>
-  )
-}
+  );
+};

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

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';
 

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 {

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';

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';

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

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>
   );
-};
+};

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>
   );

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 {

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,

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 {

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';
 

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')}
         />

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';
 

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 {

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;

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',

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);
 

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 {

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

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';

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';

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';
 

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';

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

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';

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>

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';

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

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';

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';

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';

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';
 

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';

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}

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,

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();
     },

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>

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>

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

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>
   );
 };

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"

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 {

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

src/components/layout/Common/useGradient.tsx

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

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();

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>

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