fix: nextjs is slow dev server (#364)

* fix: nextjs slow compile time

* fix: change optimized package imports and transpile packages

* fix: format issue

apps/nextjs/src/app/[locale]/boards/[name]/@headeractions/page.tsx

@@ -1,6 +1,17 @@
 "use client";
 
 import { useCallback } from "react";
+import { Group, Menu } from "@mantine/core";
+import {
+  IconBox,
+  IconBoxAlignTop,
+  IconChevronDown,
+  IconPackageImport,
+  IconPencil,
+  IconPencilOff,
+  IconPlus,
+  IconSettings,
+} from "@tabler/icons-react";
 import { useAtom, useAtomValue } from "jotai";
 
 import { clientApi } from "@homarr/api/client";
@@ -10,18 +21,6 @@ import {
   showSuccessNotification,
 } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
-import {
-  Group,
-  IconBox,
-  IconBoxAlignTop,
-  IconChevronDown,
-  IconPackageImport,
-  IconPencil,
-  IconPencilOff,
-  IconPlus,
-  IconSettings,
-  Menu,
-} from "@homarr/ui";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";
 import { editModeAtom } from "~/components/board/editMode";

apps/nextjs/src/app/[locale]/boards/[name]/@headeractions/settings/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { IconLayoutBoard } from "@homarr/ui";
+import { IconLayoutBoard } from "@tabler/icons-react";
 
 import { HeaderButton } from "~/components/layout/header/button";
 import { useRequiredBoard } from "../../../_context";

apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx

@@ -1,24 +1,11 @@
 "use client";
 
 import { useCallback } from "react";
-
-import type { RouterOutputs } from "@homarr/api";
-import { clientApi } from "@homarr/api/client";
-import type { BoardPermission } from "@homarr/definitions";
-import { boardPermissions } from "@homarr/definitions";
-import { useForm } from "@homarr/form";
-import { createModal, useModalAction } from "@homarr/modals";
-import { useI18n } from "@homarr/translation/client";
-import type { SelectProps, TablerIcon } from "@homarr/ui";
+import type { SelectProps } from "@mantine/core";
 import {
   Button,
   Flex,
   Group,
-  IconCheck,
-  IconEye,
-  IconPencil,
-  IconPlus,
-  IconSettings,
   Select,
   Stack,
   Table,
@@ -28,7 +15,23 @@ import {
   TableThead,
   TableTr,
   Text,
-} from "@homarr/ui";
+} from "@mantine/core";
+import {
+  IconCheck,
+  IconEye,
+  IconPencil,
+  IconPlus,
+  IconSettings,
+} from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { clientApi } from "@homarr/api/client";
+import type { BoardPermission } from "@homarr/definitions";
+import { boardPermissions } from "@homarr/definitions";
+import { useForm } from "@homarr/form";
+import { createModal, useModalAction } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import type { TablerIcon } from "@homarr/ui";
 
 import type { Board } from "../../_types";
 

apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { Button, Grid, Group, Stack, TextInput } from "@mantine/core";
+
 import {
   backgroundImageAttachments,
   backgroundImageRepeats,
@@ -8,14 +10,9 @@ import {
 import { useForm } from "@homarr/form";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
-import type { SelectItemWithDescriptionBadge } from "@homarr/ui";
 import {
-  Button,
-  Grid,
-  Group,
+  SelectItemWithDescriptionBadge,
   SelectWithDescriptionBadge,
-  Stack,
-  TextInput,
 } from "@homarr/ui";
 
 import type { Board } from "../../_types";

apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx

@@ -1,9 +1,5 @@
 "use client";
 
-import { useDisclosure } from "@mantine/hooks";
-
-import { useForm } from "@homarr/form";
-import { useI18n } from "@homarr/translation/client";
 import {
   Anchor,
   Button,
@@ -18,7 +14,11 @@ import {
   Stack,
   Text,
   useMantineTheme,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+
+import { useForm } from "@homarr/form";
+import { useI18n } from "@homarr/translation/client";
 
 import { generateColors } from "../../_theme";
 import type { Board } from "../../_types";

apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx

@@ -2,11 +2,11 @@
 
 import { useCallback } from "react";
 import { useRouter } from "next/navigation";
+import { Button, Divider, Group, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
-import { Button, Divider, Group, Stack, Text } from "@homarr/ui";
 
 import { BoardRenameModal } from "~/components/board/modals/board-rename-modal";
 import { useRequiredBoard } from "../../_context";

apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx

@@ -1,24 +1,24 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import {
+  Button,
+  Grid,
+  Group,
+  Loader,
+  Stack,
+  TextInput,
+  Tooltip,
+} from "@mantine/core";
 import {
   useDebouncedValue,
   useDocumentTitle,
   useFavicon,
 } from "@mantine/hooks";
+import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { useForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import {
-  Button,
-  Grid,
-  Group,
-  IconAlertTriangle,
-  Loader,
-  Stack,
-  TextInput,
-  Tooltip,
-} from "@homarr/ui";
 
 import { useUpdateBoard } from "../../_client";
 import type { Board } from "../../_types";

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { Button, Grid, Group, Input, Slider, Stack } from "@mantine/core";
+
 import { useForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
-import { Button, Grid, Group, Input, Slider, Stack } from "@homarr/ui";
 
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";

apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx

@@ -1,15 +1,14 @@
 import type { PropsWithChildren } from "react";
-
-import { api } from "@homarr/api/server";
-import { capitalize } from "@homarr/common";
-import type { TranslationObject } from "@homarr/translation";
-import { getScopedI18n } from "@homarr/translation/server";
-import type { TablerIcon } from "@homarr/ui";
 import {
   AccordionControl,
   AccordionItem,
   AccordionPanel,
   Container,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
   IconAlertTriangle,
   IconBrush,
   IconFileTypeCss,
@@ -17,10 +16,13 @@ import {
   IconPhoto,
   IconSettings,
   IconUser,
-  Stack,
-  Text,
-  Title,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { api } from "@homarr/api/server";
+import { capitalize } from "@homarr/common";
+import type { TranslationObject } from "@homarr/translation";
+import { getScopedI18n } from "@homarr/translation/server";
+import type { TablerIcon } from "@homarr/ui";
 
 import { ActiveTabAccordion } from "../../../../../components/active-tab-accordion";
 import { AccessSettingsContent } from "./_access";

apps/nextjs/src/app/[locale]/boards/_client.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useCallback, useRef } from "react";
+import { Box, LoadingOverlay, Stack } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { Box, LoadingOverlay, Stack } from "@homarr/ui";
 
 import { BoardCategorySection } from "~/components/board/sections/category-section";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";

apps/nextjs/src/app/[locale]/boards/_creator.tsx

@@ -1,8 +1,8 @@
 import type { PropsWithChildren, ReactNode } from "react";
 import type { Metadata } from "next";
+import { AppShellMain } from "@mantine/core";
 
 import { capitalize } from "@homarr/common";
-import { AppShellMain } from "@homarr/ui";
 
 import { MainHeader } from "~/components/layout/header";
 import { BoardLogoWithTitle } from "~/components/layout/logo/board-logo";

apps/nextjs/src/app/[locale]/boards/_theme.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-
-import type { MantineColorsTuple } from "@homarr/ui";
-import { createTheme, darken, lighten, MantineProvider } from "@homarr/ui";
+import type { MantineColorsTuple } from "@mantine/core";
+import { createTheme, darken, lighten, MantineProvider } from "@mantine/core";
 
 import { useRequiredBoard } from "./_context";