Migrate to Mantine UI framework

frontend/src/app/(auth)/layout.tsx

@@ -3,5 +3,5 @@ interface AuthLayoutProps {
 }
 
 export default function AuthLayout({ children }: AuthLayoutProps) {
-    return <div className="min-h-screen">{children}</div>
+    return <div>{children}</div>
 }

frontend/src/app/(auth)/login/page.tsx

@@ -1,49 +1,7 @@
-"use client"
+'use client';
 
-import Link from "next/link";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-import { Icons } from "@/components/icons";
-import { ChevronLeftIcon } from "@radix-ui/react-icons";
-import { LoginForm } from "@/features/auth/components/login-form";
-import LegalTerms from "@/features/auth/components/legal-terms";
+import { LoginForm } from '@/features/auth/components/login-form';
 
 export default function LoginPage() {
-  return (
-    <div className="container flex h-screen w-screen flex-col items-center justify-center">
-
-      <Link
-        href="/"
-        className={cn(
-          buttonVariants({ variant: "ghost" }),
-          "absolute left-4 top-4 md:left-8 md:top-8")}>
-        <>
-          <ChevronLeftIcon className="mr-2 h-4 w-4" />Back
-        </>
-      </Link>
-
-      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-        <div className="flex flex-col space-y-2 text-center">
-          <Icons.logo className="mx-auto h-6 w-6" />
-          <h1 className="text-2xl font-semibold tracking-tight">
-            Welcome back
-          </h1>
-          <p className="text-sm text-muted-foreground">
-            Enter your email and password to continue
-          </p>
-        </div>
-        <LoginForm />
-        <p className="px-8 text-center text-sm text-muted-foreground">
-          <Link
-            href="/signup"
-            className="hover:text-brand underline underline-offset-4">
-            Don&apos;t have an account? Sign Up
-          </Link>
-        </p>
-
-        <LegalTerms />
-
-      </div>
-    </div>
-  );
+  return <LoginForm />;
 }

frontend/src/app/(auth)/signup/page.tsx

@@ -1,52 +1,7 @@
-"use client"
+'use client';
 
-import Link from "next/link";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-import { Icons } from "@/components/icons";
-import { ChevronLeftIcon } from "@radix-ui/react-icons";
-import { SignUpForm } from "@/features/auth/components/sign-up-form";
-import LegalTerms from "@/features/auth/components/legal-terms";
+import { SignUpForm } from '@/features/auth/components/sign-up-form';
 
 export default function SignUpPage() {
-
-  return (
-    <div className="container flex h-screen w-screen flex-col items-center justify-center">
-
-      <Link
-        href="/"
-        className={cn(
-          buttonVariants({ variant: "ghost" }),
-          "absolute left-4 top-4 md:left-8 md:top-8")}>
-        <>
-          <ChevronLeftIcon className="mr-2 h-4 w-4" />Back
-        </>
-      </Link>
-
-      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-        <div className="flex flex-col space-y-2 text-center">
-          <Icons.logo className="mx-auto h-6 w-6" />
-          <h1 className="text-2xl font-semibold tracking-tight">
-            Create an account
-          </h1>
-          <p className="text-sm text-muted-foreground">
-            Enter your name, email and password to signup
-          </p>
-        </div>
-
-        <SignUpForm />
-
-        <p className="px-8 text-center text-sm text-muted-foreground">
-          <Link
-            href="/login"
-            className="hover:text-brand underline underline-offset-4">
-            Already have an account? Sign In
-          </Link>
-        </p>
-
-        <LegalTerms />
-
-      </div>
-    </div>
-  );
+  return <SignUpForm />;
 }

frontend/src/app/(dashboard)/(page)/p/[pageId]/page.tsx

@@ -12,7 +12,7 @@ export default function Page() {
 
   return (
     <div className="w-full h-[500px]">
-      <Editor pageId={pageId} />
+      <Editor pageId={pageId as string} />
     </div>
   );
 }

frontend/src/app/(dashboard)/home/page.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import { useAtom } from "jotai";
-import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { useAtom } from 'jotai';
+import { currentUserAtom } from '@/features/user/atoms/current-user-atom';
 
-export default function Home() {
+export default function HomeB() {
   const [currentUser] = useAtom(currentUserAtom);
 
   return (

frontend/src/app/(dashboard)/layout.tsx

@@ -1,9 +1,9 @@
-"use client"
+'use client';
 
-import dynamic from "next/dynamic";
-import { UserProvider } from "@/features/user/user-provider";
+import dynamic from 'next/dynamic';
+import { UserProvider } from '@/features/user/user-provider';
 
-const Shell = dynamic(() => import("./shell"), {
+const Shell = dynamic(() => import('./shell'), {
   ssr: false,
 });
 
@@ -14,11 +14,7 @@ export default function DashboardLayout({ children }: {
   return (
     <UserProvider>
       <Shell>
-        <div className="w-full flex justify-center z-10 flex-shrink-0">
-          <div className={`w-[900px]`}>
-            {children}
-          </div>
-        </div>
+        {children}
       </Shell>
     </UserProvider>
   );

frontend/src/app/(dashboard)/settings/account/page.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import AccountNameForm from '@/features/user/components/account-name-form';
-import ChangePassword from "@/features/user/components/change-password";
-import ChangeEmail from "@/features/user/components/change-email";
-import { Separator } from "@/components/ui/separator";
-import React from "react";
-
-export default function Home() {
-
-  return (
-    <>
-      <AccountNameForm />
-
-      <Separator className="my-4" />
-
-      <ChangeEmail />
-
-      <Separator className="my-4" />
-
-      <ChangePassword />
-    </>);
-}

frontend/src/app/(dashboard)/settings/layout.tsx

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-
-export default function SettingsLayout({ children }: { children: ReactNode }) {
-  return (
-    <>
-      {children}
-    </>
-  );
-}

frontend/src/app/(dashboard)/settings/page.tsx

@@ -1,14 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-
-export default function Home() {
-  const router = useRouter();
-
-  useEffect(() => {
-    router.push('/settings/account');
-  }, [router]);
-
-  return <></>;
-}

frontend/src/app/(dashboard)/settings/workspace/members/page.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { Separator } from "@/components/ui/separator";
-import WorkspaceInviteSection from "@/features/workspace/components/workspace-invite-section";
-import React from "react";
-import WorkspaceInviteDialog from "@/features/workspace/components/workspace-invite-dialog";
-
-const WorkspaceMembersTable = React.lazy(() => import('@/features/workspace/components/workspace-members-table'));
-
-export default function WorkspaceMembers() {
-  return (
-    <>
-      <WorkspaceInviteSection />
-
-      <Separator className="my-8" />
-
-      <div className="space-y-4">
-        <h4 className="font-semibold">Members</h4>
-
-        <WorkspaceInviteDialog />
-
-        <WorkspaceMembersTable />
-
-      </div>
-    </>
-  );
-}

frontend/src/app/(dashboard)/settings/workspace/page.tsx

@@ -1,9 +0,0 @@
-'use client';
-
-import WorkspaceNameForm from "@/features/workspace/components/workspace-name-form";
-
-
-export default function Home() {
-
-  return (<WorkspaceNameForm />);
-}

frontend/src/app/(dashboard)/shell.tsx

@@ -1,23 +1,54 @@
 'use client';
 
-import Sidebar from '@/components/sidebar/sidebar';
-import TopBar from '@/components/sidebar/topbar';
+import { desktopSidebarAtom } from '@/components/navbar/atoms/sidebar-atom';
+import { useToggleSidebar } from '@/components/navbar/hooks/use-toggle-sidebar';
+import { Navbar } from '@/components/navbar/navbar';
+import { AppShell, Burger, Group } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useAtom } from 'jotai';
 
 export default function Shell({ children }: { children: React.ReactNode }) {
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+  const [desktopOpened] = useAtom(desktopSidebarAtom);
+  const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
+
+
   return (
-    <div className="flex justify-start min-h-screen">
-      <Sidebar />
+    <AppShell
+      layout="alt"
+      header={{ height: 45 }}
+      navbar={{
+        width: 300,
+        breakpoint: 'sm',
+        collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
+      }}
+      padding="md"
+    >
+      <AppShell.Header>
+        <Group h="100%" px="md">
+          <Burger
+            opened={mobileOpened}
+            onClick={toggleMobile}
+            hiddenFrom="sm"
+            size="sm"
+          />
+          <Burger
+            opened={desktopOpened}
+            onClick={toggleDesktop}
+            visibleFrom="sm"
+            size="sm"
+          />
 
-      <div className="flex flex-col w-full overflow-hidden">
-        <TopBar />
+          Header
 
-        <main
-          className="overflow-y-auto overscroll-none w-full p-8"
-          style={{ height: 'calc(100vh - 50px)' }}
-        >
-          {children}
-        </main>
-      </div>
-    </div>
+        </Group>
+      </AppShell.Header>
+
+      <AppShell.Navbar>
+        <Navbar />
+      </AppShell.Navbar>
+
+      <AppShell.Main>{children}</AppShell.Main>
+    </AppShell>
   );
 }

frontend/src/app/globals.css

@@ -1,76 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 62.8% 50.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 0 0% 10%;
-    --foreground: 0 0% 85%;
-
-    --card: 0 0% 10%;
-    --card-foreground: 0 0% 85%;
-
-    --popover: 0 0% 10%;
-    --popover-foreground: 0 0% 85%;
-
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 85%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 85%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

frontend/src/app/layout.tsx

@@ -1,12 +1,9 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import { cn } from "@/lib/utils";
-import { ThemeProvider } from "@/components/providers/theme-provider";
-import { TanstackProvider } from "@/components/providers/tanstack-provider";
-import CustomToaster from "@/components/ui/custom-toaster";
-
-const inter = Inter({ subsets: ['latin'] })
+import '@mantine/core/styles.css';
+import type { Metadata } from 'next';
+import { TanstackProvider } from '@/components/providers/tanstack-provider';
+import CustomToaster from '@/components/ui/custom-toaster';
+import { theme } from '@/app/theme';
+import { ColorSchemeScript, MantineProvider } from '@mantine/core';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -16,25 +13,26 @@ export const metadata: Metadata = {
     initialScale: 1,
     maximumScale: 1,
   },
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
-
   return (
     <html lang="en" suppressHydrationWarning>
-    <body className={cn("min-h-screen bg-background antialiased", inter.className)}>
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <TanstackProvider>
-        {children}
-        <CustomToaster />
-      </TanstackProvider>
-    </ThemeProvider>
-    </body>
+      <head>
+        <ColorSchemeScript />
+      </head>
+      <body>
+        <MantineProvider theme={theme}>
+          <TanstackProvider>
+            {children}
+            <CustomToaster />
+          </TanstackProvider>
+        </MantineProvider>
+      </body>
     </html>
-  )
-
+  );
 }

frontend/src/app/page.tsx

@@ -1,18 +1,5 @@
-import {ThemeToggle} from "@/components/theme-toggle";
+import { Welcome } from '@/components/welcome/welcome';
 
 export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-z0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <ThemeToggle />
-        </div>
-      </div>
-
-    </main>
-  )
+  return <Welcome />;
 }

frontend/src/app/theme.ts

@@ -0,0 +1,7 @@
+'use client';
+
+import { createTheme } from '@mantine/core';
+
+export const theme = createTheme({
+
+});