refactor: use relative TS path

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

@@ -2,8 +2,8 @@ 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 { 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 { 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

@@ -2,7 +2,7 @@ import { Button, Flex, Grid, NumberInput, Select, SelectItem } from '@mantine/co
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 
-import { useConfigContext } from '../../../../config/provider';
+import { useConfigContext } from '~/config/provider';
 
 interface ChangePositionModalProps {
   initialX?: number;

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

@@ -13,9 +13,9 @@ import {
 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 { 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

@@ -4,8 +4,8 @@ import { useDebouncedValue } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useRef } from 'react';
 
-import { AppType } from '../../../../../../types/app';
-import { IconSelector } from '../../../../../IconSelector/IconSelector';
+import { AppType } from '~/types/app';
+import { IconSelector } from '~/components/IconSelector/IconSelector';
 
 interface AppearanceTabProps {
   form: UseFormReturnType<AppType, (values: AppType) => AppType>;

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

@@ -2,7 +2,7 @@ import { Text, TextInput, Tooltip, Stack, Switch, Tabs, Group, useMantineTheme,
 import { UseFormReturnType } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 
-import { AppType } from '../../../../../../types/app';
+import { AppType } from '~/types/app';
 import { InfoCard } from '~/components/InfoCard/InfoCard'
 
 interface BehaviourTabProps {

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

@@ -3,7 +3,7 @@ import { UseFormReturnType } from '@mantine/form';
 import { IconClick, IconCursorText, IconLink } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
-import { AppType } from '../../../../../../types/app';
+import { AppType } from '~/types/app';
 import { EditAppModalTab } from '../type';
 
 interface GeneralTabProps {

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

@@ -16,7 +16,7 @@ import { Icon } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
-import { AppIntegrationPropertyAccessabilityType } from '../../../../../../../../types/app';
+import { AppIntegrationPropertyAccessabilityType } from '~/types/app';
 
 interface GenericSecretInputProps {
   label: string;

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

@@ -11,7 +11,7 @@ import {
   IntegrationField,
   integrationFieldDefinitions,
   integrationFieldProperties,
-} from '../../../../../../../../types/app';
+} from '~/types/app';
 
 interface IntegrationSelectorProps {
   form: UseFormReturnType<AppType, (item: AppType) => AppType>;

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

@@ -8,7 +8,7 @@ import {
   IntegrationField,
   integrationFieldDefinitions,
   integrationFieldProperties,
-} from '../../../../../../../../types/app';
+} from '~/types/app';
 import { GenericSecretInput } from '../InputElements/GenericSecretInput';
 
 interface IntegrationOptionsRendererProps {

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

@@ -3,7 +3,7 @@ import { UseFormReturnType } from '@mantine/form';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
 
-import { AppType } from '../../../../../../types/app';
+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

@@ -2,8 +2,8 @@ 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';
+import { StatusCodes } from '~/tools/acceptableStatusCodes';
+import { AppType } from '~/types/app';
 
 interface NetworkTabProps {
   form: UseFormReturnType<AppType, (values: AppType) => AppType>;

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

@@ -7,10 +7,10 @@ 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';
-import { AppType } from '../../../../../../types/app';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
+import { AppType } from '~/types/app';
 import { CategoryEditModalInnerProps } from '../../../../Wrappers/Category/CategoryEditModal';
 import { useStyles } from '../Shared/styles';
 

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

@@ -4,9 +4,9 @@ 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 { 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

@@ -1,7 +1,7 @@
-import { useConfigContext } from '../../../../config/provider';
-import { useConfigStore } from '../../../../config/store';
-import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
-import { AppType } from '../../../../types/app';
+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

@@ -6,8 +6,8 @@ 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 { useConfigContext } from '~/config/provider';
+import { AppType } from '~/types/app';
 
 interface AppPingProps {
   app: AppType;

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

@@ -3,7 +3,7 @@ import { createStyles, useMantineTheme } from '@mantine/styles';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
 
-import { AppType } from '../../../../types/app';
+import { AppType } from '~/types/app';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { BaseTileProps } from '../type';

src/components/Dashboard/Tiles/GenericTileMenu.tsx

@@ -2,7 +2,7 @@ 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 { useColorTheme } from '~/tools/color';
 import { useEditModeStore } from '../Views/useEditModeStore';
 
 interface GenericTileMenuProps {

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

@@ -4,7 +4,7 @@ import { IconChevronDown, IconGripVertical } from '@tabler/icons-react';
 import { Reorder, useDragControls } from 'framer-motion';
 import { FC, useEffect, useRef } from 'react';
 
-import { IDraggableEditableListInputValue } from '../../../../../widgets/widgets';
+import { IDraggableEditableListInputValue } from '~/widgets/widgets';
 
 interface DraggableListProps {
   items: {

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

@@ -4,7 +4,7 @@ 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';
+import { IDraggableListInputValue } from '~/widgets/widgets';
 
 const useStyles = createStyles((theme) => ({
   container: {

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

@@ -19,12 +19,12 @@ 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 { 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 type { IDraggableListInputValue, IWidgetOptionValue } from '~/widgets/widgets';
+import { IWidget } from '~/widgets/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 { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
 import WidgetsDefinitions from '../../../../widgets';
-import { IWidget } from '../../../../widgets/widgets';
+import { IWidget } from '~/widgets/widgets';
 import { useWrapperColumnCount } from '../../Wrappers/gridstack/store';
 import { GenericTileMenu } from '../GenericTileMenu';
 import { WidgetEditModalInnerProps } from './WidgetsEditModal';

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

@@ -2,8 +2,8 @@ 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';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
 
 export type WidgetsRemoveModalInnerProps = {
   widgetId: string;

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

@@ -2,7 +2,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 { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { useEditModeStore } from './useEditModeStore';
 
 export const ViewToggleButton = () => {

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

@@ -14,8 +14,8 @@ 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 { 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

@@ -9,8 +9,8 @@ import {
   IconTrash,
 } from '@tabler/icons-react';
 
-import { useConfigContext } from '../../../../config/provider';
-import { CategoryType } from '../../../../types/category';
+import { useConfigContext } from '~/config/provider';
+import { CategoryType } from '~/types/category';
 import { useCategoryActions } from './useCategoryActions';
 import { useTranslation } from 'next-i18next';
 

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

@@ -3,9 +3,9 @@ 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';
+import { useConfigContext } from '~/config/provider';
+import { useConfigStore } from '~/config/store';
+import { CategoryType } from '~/types/category';
 
 export type CategoryEditModalInnerProps = {
   category: CategoryType;

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 { 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,4 @@
-import { WrapperType } from '../../../../types/wrapper';
+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 { AppType } from '~/types/app';
 import Widgets from '../../../widgets';
-import { WidgetWrapper } from '../../../widgets/WidgetWrapper';
-import { IWidget, IWidgetDefinition } from '../../../widgets/widgets';
+import { WidgetWrapper } from '~/widgets/WidgetWrapper';
+import { IWidget, IWidgetDefinition } from '~/widgets/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,9 +1,9 @@
 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';
+import { AppType } from '~/types/app';
+import { ShapeType } from '~/types/shape';
+import { IWidget } from '~/widgets/widgets';
 
 export const initializeGridstack = (
   areaType: 'wrapper' | 'category' | 'sidebar',

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

@@ -1,7 +1,7 @@
 import { createWithEqualityFn } from 'zustand/traditional';
 
-import { useConfigContext } from '../../../../config/provider';
-import { GridstackBreakpoints } from '../../../../constants/gridstack-breakpoints';
+import { useConfigContext } from '~/config/provider';
+import { GridstackBreakpoints } from '~/constants/gridstack-breakpoints';
 
 export const useGridstackStore = createWithEqualityFn<GridstackStoreType>(
   (set, get) => ({

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

@@ -17,7 +17,7 @@ import { useTranslation } from 'next-i18next';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 import { api } from '~/utils/api';
 
-import { humanFileSize } from '../../tools/humanFileSize';
+import { humanFileSize } from '~/tools/humanFileSize';
 import { DebouncedImage } from './DebouncedImage';
 
 export const IconSelector = forwardRef(

src/components/User/Preferences/Language/LanguageSelect.tsx

@@ -8,7 +8,7 @@ import { forwardRef, useState } from 'react';
 import { api } from '~/utils/api';
 
 import { COOKIE_LOCALE_KEY } from '../../../../../data/constants';
-import { Language, getLanguageByCode } from '../../../../tools/language';
+import { Language, getLanguageByCode } from '~/tools/language';
 
 export default function LanguageSelect() {
   const { data: sessionData } = useSession();

src/components/layout/Common/Logo.tsx

@@ -1,7 +1,7 @@
 import { Group, Image, Text } from '@mantine/core';
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 
-import { useConfigContext } from '../../../config/provider';
+import { useConfigContext } from '~/config/provider';
 import { usePrimaryGradient } from './useGradient';
 
 interface LogoProps {

src/components/layout/Common/useCardStyles.ts

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

src/components/layout/Common/useGradient.tsx

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

src/components/layout/Meta/BoardHeadOverride.tsx

@@ -2,7 +2,7 @@ import Head from 'next/head';
 import React from 'react';
 import { firstUpperCase } from '~/tools/shared/strings';
 
-import { useConfigContext } from '../../../config/provider';
+import { useConfigContext } from '~/config/provider';
 
 export const BoardHeadOverride = () => {
   const { config, name } = useConfigContext();

src/components/layout/header/About/AboutModal.tsx

@@ -32,10 +32,10 @@ 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 { usePackageAttributesStore } from '../../../../tools/client/zustands/usePackageAttributesStore';
-import { useColorTheme } from '../../../../tools/color';
+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';

src/components/layout/header/About/Credits.tsx

@@ -2,7 +2,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';
+import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
 
 export default function Credits() {
   const { t } = useTranslation('settings/common');

src/config/init.ts

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

src/config/provider.tsx

@@ -1,8 +1,8 @@
 import { ReactNode, createContext, useContext, useEffect, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
-import { useColorTheme } from '../tools/color';
-import { ConfigType } from '../types/config';
+import { useColorTheme } from '~/tools/color';
+import { ConfigType } from '~/types/config';
 import { useConfigStore } from './store';
 
 export type ConfigContextType = {

src/config/store.ts

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

src/modules/Docker/DockerModule.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { api } from '~/utils/api';
 
-import { useCardStyles } from '../../components/layout/Common/useCardStyles';
-import { useConfigContext } from '../../config/provider';
+import { useCardStyles } from '~/components/layout/Common/useCardStyles';
+import { useConfigContext } from '~/config/provider';
 import ContainerActionBar from './ContainerActionBar';
 import DockerTable from './DockerTable';
 

src/modules/Docker/DockerTable.tsx

@@ -14,7 +14,7 @@ import Dockerode, { ContainerInfo } from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 
-import { MIN_WIDTH_MOBILE } from '../../constants/constants';
+import { MIN_WIDTH_MOBILE } from '~/constants/constants';
 import ContainerState from './ContainerState';
 
 const useStyles = createStyles((theme) => ({

src/modules/common/MediaDisplay.tsx

@@ -3,8 +3,8 @@ import { IconDownload, IconExternalLink, IconPlayerPlay } from '@tabler/icons-re
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 
-import { useConfigContext } from '../../config/provider';
-import { useColorTheme } from '../../tools/color';
+import { useConfigContext } from '~/config/provider';
+import { useColorTheme } from '~/tools/color';
 import { RequestModal } from '../overseerr/RequestModal';
 import { Result } from '../overseerr/SearchResult';
 

src/modules/overseerr/RequestModal.tsx

@@ -7,7 +7,7 @@ import { useState } from 'react';
 import { useConfigContext } from '~/config/provider';
 import { api } from '~/utils/api';
 
-import { useColorTheme } from '../../tools/color';
+import { useColorTheme } from '~/tools/color';
 import { MovieResult } from './Movie.d';
 import { Result } from './SearchResult';
 import { TvShowResult, TvShowResultSeason } from './TvShow.d';

src/pages/404.tsx

@@ -7,7 +7,7 @@ import Link from 'next/link';
 import pageNotFoundImage from '~/images/undraw_page_not_found_re_e9o6.svg';
 import { pageNotFoundNamespaces } from '~/tools/server/translation-namespaces';
 
-import { getServerSideTranslations } from '../tools/server/getServerSideTranslations';
+import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 
 export default function Custom404() {
   const { classes } = useStyles();

src/pages/_app.tsx

@@ -26,15 +26,15 @@ import { colorSchemeParser } from '~/validations/user';
 
 import { COOKIE_COLOR_SCHEME_KEY, COOKIE_LOCALE_KEY } from '../../data/constants';
 import nextI18nextConfig from '../../next-i18next.config.js';
-import { ConfigProvider } from '../config/provider';
+import { ConfigProvider } from '~/config/provider';
 import '../styles/global.scss';
-import { usePackageAttributesStore } from '../tools/client/zustands/usePackageAttributesStore';
-import { ColorTheme } from '../tools/color';
+import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
+import { ColorTheme } from '~/tools/color';
 import {
   ServerSidePackageAttributesType,
   getServiceSidePackageAttributes,
-} from '../tools/server/getPackageVersion';
-import { theme } from '../tools/server/theme/theme';
+} from '~/tools/server/getPackageVersion';
+import { theme } from '~/tools/server/theme/theme';
 
 dayjs.extend(locale);
 dayjs.extend(utc);

src/server/api/routers/config.ts

@@ -10,7 +10,7 @@ import { BackendConfigType, ConfigType } from '~/types/config';
 import { boardCustomizationSchema } from '~/validations/boards';
 import { IRssWidget } from '~/widgets/rss/RssWidgetTile';
 
-import { getConfig } from '../../../tools/config/getConfig';
+import { getConfig } from '~/tools/config/getConfig';
 import { adminProcedure, createTRPCRouter, publicProcedure } from '../trpc';
 
 const configNameSchema = z.string().regex(/^[a-zA-Z0-9-_]+$/);

src/tools/client/app-properties.ts

@@ -1,4 +1,4 @@
-import { ConfigAppType, IntegrationField, IntegrationType } from '../../types/app';
+import { ConfigAppType, IntegrationField, IntegrationType } from '~/types/app';
 
 export const findAppProperty = (app: ConfigAppType, key: IntegrationField) =>
   app.integration?.properties.find((prop) => prop.field === key)?.value ?? '';

src/tools/config/getConfig.ts

@@ -1,7 +1,7 @@
 import Consola from 'consola';
 import { v4 as uuidv4 } from 'uuid';
 
-import { BackendConfigType, ConfigType } from '../../types/config';
+import { BackendConfigType, ConfigType } from '~/types/config';
 import { configExists } from './configExists';
 import { getFallbackConfig } from './getFallbackConfig';
 import { readConfig } from './readConfig';

src/tools/config/getFrontendConfig.ts

@@ -3,7 +3,7 @@ import fs from 'fs';
 import { fetchCity } from '~/server/api/routers/weather';
 import { IntegrationField } from '~/types/app';
 
-import { BackendConfigType, ConfigType } from '../../types/config';
+import { BackendConfigType, ConfigType } from '~/types/config';
 import { getConfig } from './getConfig';
 
 export const getFrontendConfig = async (name: string): Promise<ConfigType> => {

src/tools/config/writeConfig.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 
-import { BackendConfigType } from '../../types/config';
+import { BackendConfigType } from '~/types/config';
 import { generateConfigPath } from './generateConfigPath';
 
 export function writeConfig(config: BackendConfigType) {

src/tools/server/sdk/adGuard/adGuard.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { trimStringEnding } from '../../../shared/strings';
+import { trimStringEnding } from '~/tools/shared/strings';
 import {
   adGuardApiFilteringStatusSchema,
   adGuardApiStatsResponseSchema,

src/tools/server/sdk/pihole/piHole.ts

@@ -1,4 +1,4 @@
-import { trimStringEnding } from '../../../shared/strings';
+import { trimStringEnding } from '~/tools/shared/strings';
 import { PiHoleApiStatusChangeResponse, PiHoleApiSummaryResponse } from './piHole.type';
 
 export class PiHoleClient {

src/tools/server/sdk/plex/plexClient.ts

@@ -3,7 +3,7 @@ import { Element, xml2js } from 'xml-js';
 import {
   GenericCurrentlyPlaying,
   GenericSessionInfo,
-} from '../../../../types/api/media-server/session-info';
+} from '~/types/api/media-server/session-info';
 
 export class PlexClient {
   constructor(

src/types/api/downloads/queue/NormalizedDownloadQueueResponse.ts

@@ -1,6 +1,6 @@
 import { NormalizedTorrent } from '@ctrl/shared-torrent';
 
-import { UsenetQueueItem } from '../../../../widgets/useNet/types';
+import { UsenetQueueItem } from '~/widgets/useNet/types';
 
 export type NormalizedDownloadQueueResponse = {
   apps: NormalizedDownloadAppStat[];

src/types/config.ts

@@ -1,4 +1,4 @@
-import { IWidget } from '../widgets/widgets';
+import { IWidget } from '~/widgets/widgets';
 import { AppType, ConfigAppType } from './app';
 import { CategoryType } from './category';
 import { SettingsType } from './settings';

src/widgets/WidgetWrapper.tsx

@@ -1,8 +1,8 @@
 import { ComponentType } from 'react';
 
 import Widgets from '.';
-import { HomarrCardWrapper } from '../components/Dashboard/Tiles/HomarrCardWrapper';
-import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { HomarrCardWrapper } from '~/components/Dashboard/Tiles/HomarrCardWrapper';
+import { WidgetsMenu } from '~/components/Dashboard/Tiles/Widgets/WidgetsMenu';
 import ErrorBoundary from './boundary';
 import { IWidget } from './widgets';
 

src/widgets/bookmark/BookmarkWidgetTile.tsx

@@ -31,8 +31,8 @@ import { v4 } from 'uuid';
 import { z } from 'zod';
 import React from 'react';
 
-import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
-import { IconSelector } from '../../components/IconSelector/IconSelector';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { IconSelector } from '~/components/IconSelector/IconSelector';
 import { defineWidget } from '../helper';
 import { IDraggableEditableListInputValue, IWidget } from '../widgets';
 

src/widgets/boundary.tsx

@@ -5,7 +5,7 @@ import Consola from 'consola';
 import { withTranslation } from 'next-i18next';
 import React, { ReactNode } from 'react';
 
-import { WidgetsMenu } from '../components/Dashboard/Tiles/Widgets/WidgetsMenu';
+import { WidgetsMenu } from '~/components/Dashboard/Tiles/Widgets/WidgetsMenu';
 import { IWidget } from './widgets';
 
 type ErrorBoundaryState = {

src/widgets/calendar/CalendarTile.tsx

@@ -6,8 +6,8 @@ import { useState } from 'react';
 import { getLanguageByCode } from '~/tools/language';
 import { RouterOutputs, api } from '~/utils/api';
 
-import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
-import { useConfigContext } from '../../config/provider';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { useConfigContext } from '~/config/provider';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 import { CalendarDay } from './CalendarDay';

src/widgets/calendar/MediaList.tsx

@@ -7,7 +7,7 @@ import {
   RadarrMediaDisplay,
   ReadarrMediaDisplay,
   SonarrMediaDisplay,
-} from '../../modules/common';
+} from '~/modules/common';
 import { MediasType } from './type';
 
 interface MediaListProps {

src/widgets/calendar/bg-calculator.ts

@@ -1,6 +1,6 @@
 import { ColorScheme, useMantineTheme } from '@mantine/core';
 
-import { isToday } from '../../tools/shared/time/date.tool';
+import { isToday } from '~/tools/shared/time/date.tool';
 
 export const getBgColorByDateAndTheme = (colorScheme: ColorScheme, date: Date) => {
   if (!isToday(date)) {

src/widgets/dashDot/DashDotCompactNetwork.tsx

@@ -3,7 +3,7 @@ import { IconArrowNarrowDown, IconArrowNarrowUp } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { RouterOutputs } from '~/utils/api';
 
-import { bytes } from '../../tools/bytesHelper';
+import { bytes } from '~/tools/bytesHelper';
 
 interface DashDotCompactNetworkProps {
   info: DashDotInfo;

src/widgets/dashDot/DashDotCompactStorage.tsx

@@ -2,8 +2,8 @@ import { Group, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
 
-import { bytes } from '../../tools/bytesHelper';
-import { percentage } from '../../tools/shared/math/percentage.tool';
+import { bytes } from '~/tools/bytesHelper';
+import { percentage } from '~/tools/shared/math/percentage.tool';
 import { DashDotInfo } from './DashDotCompactNetwork';
 
 interface DashDotCompactStorageProps {

src/widgets/date/DateTile.tsx

@@ -9,7 +9,7 @@ import { useEffect, useRef, useState } from 'react';
 import { getLanguageByCode } from '~/tools/language';
 import { api } from '~/utils/api';
 
-import { useSetSafeInterval } from '../../hooks/useSetSafeInterval';
+import { useSetSafeInterval } from '~/hooks/useSetSafeInterval';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
 

src/widgets/dnshole/DnsHoleControls.tsx

@@ -5,7 +5,7 @@ import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
 
-import { useConfigContext } from '../../config/provider';
+import { useConfigContext } from '~/config/provider';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';

src/widgets/dnshole/DnsHoleSummary.tsx

@@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '~/config/provider';
 import { RouterOutputs, api } from '~/utils/api';
 
-import { formatNumber, formatPercentage } from '../../tools/client/math';
+import { formatNumber, formatPercentage } from '~/tools/client/math';
 import { defineWidget } from '../helper';
 import { WidgetLoading } from '../loading';
 import { IWidget } from '../widgets';

src/widgets/download-speed/Tile.tsx

@@ -16,15 +16,15 @@ import { IconDownload, IconUpload } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 
-import { AppAvatar } from '../../components/AppAvatar';
-import { useConfigContext } from '../../config/provider';
+import { AppAvatar } from '~/components/AppAvatar';
+import { useConfigContext } from '~/config/provider';
 import { useGetDownloadClientsQueue } from './useGetNetworkSpeed';
-import { useColorTheme } from '../../tools/color';
-import { humanFileSize } from '../../tools/humanFileSize';
+import { useColorTheme } from '~/tools/color';
+import { humanFileSize } from '~/tools/humanFileSize';
 import {
   NormalizedDownloadQueueResponse,
   TorrentTotalDownload,
-} from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
+} from '~/types/api/downloads/queue/NormalizedDownloadQueueResponse';
 import definition, { ITorrentNetworkTraffic } from './TorrentNetworkTrafficTile';
 
 interface TorrentNetworkTrafficTileProps {

src/widgets/media-server/DetailCollapseable.tsx

@@ -1,7 +1,7 @@
 import { Card, Divider, Flex, Grid, Group, Text } from '@mantine/core';
 import { IconDeviceMobile, IconId } from '@tabler/icons-react';
 
-import { GenericSessionInfo } from '../../types/api/media-server/session-info';
+import { GenericSessionInfo } from '~/types/api/media-server/session-info';
 import { useTranslation } from 'react-i18next';
 
 export const DetailCollapseable = ({ session }: { session: GenericSessionInfo }) => {

src/widgets/media-server/MediaServerTile.tsx

@@ -12,9 +12,9 @@ import {
 import { IconAlertTriangle, IconMovie } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
-import { AppAvatar } from '../../components/AppAvatar';
-import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
-import { useConfigContext } from '../../config/provider';
+import { AppAvatar } from '~/components/AppAvatar';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { useConfigContext } from '~/config/provider';
 import { useGetMediaServers } from './useGetMediaServers';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';

src/widgets/media-server/NowPlayingDisplay.tsx

@@ -9,7 +9,7 @@ import {
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 
-import { GenericSessionInfo } from '../../types/api/media-server/session-info';
+import { GenericSessionInfo } from '~/types/api/media-server/session-info';
 
 export const NowPlayingDisplay = ({ session }: { session: GenericSessionInfo }) => {
   const { t } = useTranslation();

src/widgets/media-server/TableRow.tsx

@@ -1,9 +1,9 @@
 import { Avatar, Collapse, Flex, Text, createStyles } from '@mantine/core';
 import { useState } from 'react';
 
-import { AppAvatar } from '../../components/AppAvatar';
-import { GenericSessionInfo } from '../../types/api/media-server/session-info';
-import { AppType } from '../../types/app';
+import { AppAvatar } from '~/components/AppAvatar';
+import { GenericSessionInfo } from '~/types/api/media-server/session-info';
+import { AppType } from '~/types/app';
 import { DetailCollapseable } from './DetailCollapseable';
 import { NowPlayingDisplay } from './NowPlayingDisplay';
 

src/widgets/notebook/NotebookEditor.tsx

@@ -9,8 +9,8 @@ import { useConfigStore } from '~/config/store';
 import { useColorTheme } from '~/tools/color';
 import { api } from '~/utils/api';
 
-import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
-import { useConfigContext } from '../../config/provider';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { useConfigContext } from '~/config/provider';
 import { WidgetLoading } from '../loading';
 import { INotebookWidget } from './NotebookWidgetTile';
 

src/widgets/torrent/TorrentQueueItem.tsx

@@ -27,9 +27,9 @@ import {
 import { useTranslation } from 'next-i18next';
 import { MIN_WIDTH_MOBILE } from '~/constants/constants';
 
-import { calculateETA } from '../../tools/client/calculateEta';
-import { humanFileSize } from '../../tools/humanFileSize';
-import { AppType } from '../../types/app';
+import { calculateETA } from '~/tools/client/calculateEta';
+import { humanFileSize } from '~/tools/humanFileSize';
+import { AppType } from '~/types/app';
 
 interface TorrentQueueItemProps {
   torrent: NormalizedTorrent;

src/widgets/torrent/TorrentTile.tsx

@@ -19,9 +19,9 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { useTranslation } from 'next-i18next';
 import { useCardStyles } from '~/components/layout/Common/useCardStyles';
 
-import { MIN_WIDTH_MOBILE } from '../../constants/constants';
-import { NormalizedDownloadQueueResponse } from '../../types/api/downloads/queue/NormalizedDownloadQueueResponse';
-import { AppIntegrationType } from '../../types/app';
+import { MIN_WIDTH_MOBILE } from '~/constants/constants';
+import { NormalizedDownloadQueueResponse } from '~/types/api/downloads/queue/NormalizedDownloadQueueResponse';
+import { AppIntegrationType } from '~/types/app';
 import { useGetDownloadClientsQueue } from '../download-speed/useGetNetworkSpeed';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';

src/widgets/useNet/UseNetTile.tsx

@@ -7,10 +7,10 @@ import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 
-import { useConfigContext } from '../../config/provider';
-import { MIN_WIDTH_MOBILE } from '../../constants/constants';
-import { humanFileSize } from '../../tools/humanFileSize';
-import { AppIntegrationType } from '../../types/app';
+import { useConfigContext } from '~/config/provider';
+import { MIN_WIDTH_MOBILE } from '~/constants/constants';
+import { humanFileSize } from '~/tools/humanFileSize';
+import { AppIntegrationType } from '~/types/app';
 import {
   useGetUsenetInfo,
   usePauseUsenetQueueMutation,

src/widgets/useNet/UsenetHistoryList.tsx

@@ -19,8 +19,8 @@ import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
 
 import { useGetUsenetHistory } from '../dashDot/api';
-import { parseDuration } from '../../tools/client/parseDuration';
-import { humanFileSize } from '../../tools/humanFileSize';
+import { parseDuration } from '~/tools/client/parseDuration';
+import { humanFileSize } from '~/tools/humanFileSize';
 
 dayjs.extend(duration);
 

src/widgets/useNet/UsenetQueueList.tsx

@@ -21,7 +21,7 @@ import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
 
-import { humanFileSize } from '../../tools/humanFileSize';
+import { humanFileSize } from '~/tools/humanFileSize';
 import { useGetUsenetDownloads } from '../dashDot/api';
 
 dayjs.extend(duration);

src/widgets/widgets.ts

@@ -9,8 +9,8 @@ import {
 import { Icon } from '@tabler/icons-react';
 import React from 'react';
 
-import { AreaType } from '../types/area';
-import { ShapeType } from '../types/shape';
+import { AreaType } from '~/types/area';
+import { ShapeType } from '~/types/shape';
 
 // Type of widgets which are saved to config
 export type IWidget<TKey extends string, TDefinition extends IWidgetDefinition> = {