💄 Prettier codebase

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