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/components/layout/background.tsx

@@ -1,6 +1,5 @@
 import { usePathname } from "next/navigation";
-
-import type { AppShellProps } from "@homarr/ui";
+import type { AppShellProps } from "@mantine/core";
 
 import { useOptionalBoard } from "~/app/[locale]/boards/_context";
 

apps/nextjs/src/components/layout/header.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
+import { AppShellHeader, Group, UnstyledButton } from "@mantine/core";
 
 import { Spotlight } from "@homarr/spotlight";
-import { AppShellHeader, Group, UnstyledButton } from "@homarr/ui";
 
 import { ClientBurger } from "./header/burger";
 import { DesktopSearchInput, MobileSearchButton } from "./header/search";

apps/nextjs/src/components/layout/header/burger.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { useCallback } from "react";
+import { Burger } from "@mantine/core";
 import { atom, useAtom } from "jotai";
 
-import { Burger } from "@homarr/ui";
-
 export const navigationCollapsedAtom = atom(true);
 
 export const ClientBurger = () => {

apps/nextjs/src/components/layout/header/button.tsx

@@ -1,9 +1,8 @@
 import type { ForwardedRef, ReactNode } from "react";
 import { forwardRef } from "react";
 import Link from "next/link";
-
-import type { ActionIconProps } from "@homarr/ui";
-import { ActionIcon } from "@homarr/ui";
+import type { ActionIconProps } from "@mantine/core";
+import { ActionIcon } from "@mantine/core";
 
 type HeaderButtonProps = (
   | {

apps/nextjs/src/components/layout/header/search.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { TextInput, UnstyledButton } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+
 import { openSpotlight } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
-import { IconSearch, TextInput, UnstyledButton } from "@homarr/ui";
 
 import { HeaderButton } from "./button";
 import classes from "./search.module.css";

apps/nextjs/src/components/layout/header/user.tsx

@@ -1,4 +1,4 @@
-import { UnstyledButton } from "@homarr/ui";
+import { UnstyledButton } from "@mantine/core";
 
 import { UserAvatar } from "~/components/user-avatar";
 import { UserAvatarMenu } from "~/components/user-avatar-menu";

apps/nextjs/src/components/layout/logo/logo.tsx

@@ -1,7 +1,6 @@
 import Image from "next/image";
-
-import type { TitleOrder } from "@homarr/ui";
-import { Group, Title } from "@homarr/ui";
+import type { TitleOrder } from "@mantine/core";
+import { Group, Title } from "@mantine/core";
 
 interface LogoProps {
   size: number;

apps/nextjs/src/components/layout/navigation-link.tsx

@@ -3,8 +3,7 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-
-import { NavLink } from "@homarr/ui";
+import { NavLink } from "@mantine/core";
 
 export const CommonNavLink = (props: ClientNavigationLink) =>
   "href" in props ? (

apps/nextjs/src/components/layout/navigation.tsx

@@ -1,5 +1,6 @@
+import { AppShellNavbar, AppShellSection, ScrollArea } from "@mantine/core";
+
 import type { TablerIcon } from "@homarr/ui";
-import { AppShellNavbar, AppShellSection, ScrollArea } from "@homarr/ui";
 
 import type { ClientNavigationLink } from "./navigation-link";
 import { CommonNavLink } from "./navigation-link";

apps/nextjs/src/components/layout/shell.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
+import { AppShell } from "@mantine/core";
 import { useAtomValue } from "jotai";
 
-import { AppShell } from "@homarr/ui";
-
 import { useOptionalBackgroundProps } from "./background";
 import { navigationCollapsedAtom } from "./header/burger";