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]/manage/[...not-found]/page.tsx

@@ -1,5 +1,6 @@
+import { Center, Stack, Text, Title } from "@mantine/core";
+
 import { getScopedI18n } from "@homarr/translation/server";
-import { Center, Stack, Text, Title } from "@homarr/ui";
 
 export default async function NotFound() {
   const t = await getScopedI18n("management.notFound");

apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx

@@ -2,12 +2,13 @@
 
 import { useCallback } from "react";
 import Link from "next/link";
+import { Menu } from "@mantine/core";
+import { IconSettings, IconTrash } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
-import { IconSettings, IconTrash, Menu } from "@homarr/ui";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";
 

apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { useCallback } from "react";
+import { Button } from "@mantine/core";
+import { IconCategoryPlus } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import { Button, IconCategoryPlus } from "@homarr/ui";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";
 import { AddBoardModal } from "~/components/manage/boards/add-board-modal";

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

@@ -1,8 +1,4 @@
 import Link from "next/link";
-
-import type { RouterOutputs } from "@homarr/api";
-import { api } from "@homarr/api/server";
-import { getScopedI18n } from "@homarr/translation/server";
 import {
   ActionIcon,
   Button,
@@ -11,15 +7,17 @@ import {
   Grid,
   GridCol,
   Group,
-  IconDotsVertical,
-  IconLock,
-  IconWorld,
   Menu,
   MenuTarget,
   Text,
   Title,
   Tooltip,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconDotsVertical, IconLock, IconWorld } from "@tabler/icons-react";
+
+import type { RouterOutputs } from "@homarr/api";
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
 
 import { BoardCardMenuDropdown } from "./_components/board-card-menu-dropdown";
 import { CreateBoardButton } from "./_components/create-board-button";

apps/nextjs/src/app/[locale]/manage/layout.tsx

@@ -1,8 +1,6 @@
 import type { PropsWithChildren } from "react";
-
-import { getScopedI18n } from "@homarr/translation/server";
+import { AppShellMain } from "@mantine/core";
 import {
-  AppShellMain,
   IconBook2,
   IconBrandDiscord,
   IconBrandDocker,
@@ -17,7 +15,9 @@ import {
   IconTool,
   IconUser,
   IconUsers,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { getScopedI18n } from "@homarr/translation/server";
 
 import { MainHeader } from "~/components/layout/header";
 import type { NavigationLink } from "~/components/layout/navigation";

apps/nextjs/src/app/[locale]/manage/page.tsx

@@ -1,5 +1,6 @@
+import { Title } from "@mantine/core";
+
 import { getScopedI18n } from "@homarr/translation/server";
-import { Title } from "@homarr/ui";
 
 import { Test } from "./test";
 

apps/nextjs/src/app/[locale]/manage/test.tsx

@@ -2,9 +2,9 @@
 
 import { useCallback, useState } from "react";
 import type { ChangeEvent } from "react";
+import { Button, Stack, Text, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { Button, Stack, Text, TextInput } from "@homarr/ui";
 
 export const Test = () => {
   const [value, setValue] = useState("");

apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx

@@ -1,5 +1,6 @@
+import { Box } from "@mantine/core";
+
 import { getScopedI18n } from "@homarr/translation/server";
-import { Box } from "@homarr/ui";
 
 import "@xterm/xterm/css/xterm.css";
 

apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useEffect, useRef } from "react";
+import { Box } from "@mantine/core";
 import { CanvasAddon } from "@xterm/addon-canvas";
 import { FitAddon } from "@xterm/addon-fit";
 import { Terminal } from "@xterm/xterm";
 
 import { clientApi } from "@homarr/api/client";
-import { Box } from "@homarr/ui";
 
 import classes from "./terminal.module.css";
 

apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/dangerZone.accordion.tsx

@@ -2,11 +2,11 @@
 
 import React from "react";
 import { useRouter } from "next/navigation";
+import { Button, Divider, Group, Stack, Text } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
-import { Button, Divider, Group, Stack, Text } from "@homarr/ui";
 
 interface DangerZoneAccordionProps {
   user: NonNullable<RouterOutputs["user"]["getById"]>;

apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/profile.accordion.tsx

@@ -1,10 +1,11 @@
 "use client";
 
+import { Button, Stack, TextInput } from "@mantine/core";
+
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useForm, zodResolver } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
-import { Button, Stack, TextInput } from "@homarr/ui";
 import { validation } from "@homarr/validation";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";

apps/nextjs/src/app/[locale]/manage/users/[userId]/_components/security.accordion.tsx

@@ -1,11 +1,12 @@
 "use client";
 
+import { Button, PasswordInput, Stack, Title } from "@mantine/core";
+
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useForm, zodResolver } from "@homarr/form";
 import { showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
-import { Button, PasswordInput, Stack, Title } from "@homarr/ui";
 import { validation } from "@homarr/validation";
 
 import { revalidatePathAction } from "~/app/revalidatePathAction";

apps/nextjs/src/app/[locale]/manage/users/[userId]/page.tsx

@@ -1,7 +1,4 @@
 import { notFound } from "next/navigation";
-
-import { api } from "@homarr/api/server";
-import { getScopedI18n } from "@homarr/translation/server";
 import {
   Accordion,
   AccordionControl,
@@ -9,14 +6,19 @@ import {
   AccordionPanel,
   Avatar,
   Group,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import {
   IconAlertTriangleFilled,
   IconSettingsFilled,
   IconShieldLockFilled,
   IconUserFilled,
-  Stack,
-  Text,
-  Title,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
 
 import { DangerZoneAccordion } from "./_components/dangerZone.accordion";
 import { ProfileAccordion } from "./_components/profile.accordion";

apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx

@@ -2,21 +2,14 @@
 
 import { useMemo } from "react";
 import Link from "next/link";
+import { Avatar, Button, Group, Text, ThemeIcon, Title } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
 import { MantineReactTable, useMantineReactTable } from "mantine-react-table";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
-import {
-  Avatar,
-  Button,
-  Group,
-  IconCheck,
-  Text,
-  ThemeIcon,
-  Title,
-} from "@homarr/ui";
 
 interface UserListComponentProps {
   initialUserList: RouterOutputs["user"]["getAll"];

apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx

@@ -1,21 +1,21 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-
-import { clientApi } from "@homarr/api/client";
-import { useForm, zodResolver } from "@homarr/form";
-import { useScopedI18n } from "@homarr/translation/client";
 import {
   Avatar,
   Card,
-  IconUserCheck,
   PasswordInput,
   Stack,
   Stepper,
   Text,
   TextInput,
   Title,
-} from "@homarr/ui";
+} from "@mantine/core";
+import { IconUserCheck } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+import { useForm, zodResolver } from "@homarr/form";
+import { useScopedI18n } from "@homarr/translation/client";
 import { validation, z } from "@homarr/validation";
 
 import { StepperNavigationComponent } from "./stepper-navigation.component";

apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.component.tsx

@@ -1,15 +1,13 @@
 import Link from "next/link";
-
-import { useI18n } from "@homarr/translation/client";
+import { Button, Card, Group } from "@mantine/core";
 import {
-  Button,
-  Card,
-  Group,
   IconArrowBackUp,
   IconArrowLeft,
   IconArrowRight,
   IconRotate,
-} from "@homarr/ui";
+} from "@tabler/icons-react";
+
+import { useI18n } from "@homarr/translation/client";
 
 interface StepperNavigationComponentProps {
   hasPrevious: boolean;