⚡ Code splitting up

pkg/views/src/main.tsx

@@ -13,17 +13,9 @@ import "@unocss/reset/tailwind.css";
 import "@fontsource/roboto/latin.css";
 
 import AppShell from "@/components/AppShell.tsx";
-import LandingPage from "@/pages/landing.tsx";
-import SignUpPage from "@/pages/auth/sign-up.tsx";
-import SignInPage from "@/pages/auth/sign-in.tsx";
-import OauthConnectPage from "@/pages/auth/connect.tsx";
-import DashboardPage from "@/pages/users/dashboard.tsx";
 import ErrorBoundary from "@/error.tsx";
 import AppLoader from "@/components/AppLoader.tsx";
 import UserLayout from "@/pages/users/layout.tsx";
-import NotificationsPage from "@/pages/users/notifications.tsx";
-import PersonalizePage from "@/pages/users/personalize.tsx";
-import SecurityPage from "@/pages/users/security.tsx";
 import { UserinfoProvider } from "@/stores/userinfo.tsx";
 import { WellKnownProvider } from "@/stores/wellKnown.tsx";
 import AuthLayout from "@/pages/auth/layout.tsx";
@@ -46,7 +38,7 @@ const router = createBrowserRouter([
     element: <AppShell><Outlet /></AppShell>,
     errorElement: <ErrorBoundary />,
     children: [
-      { path: "/", element: <LandingPage /> },
+      { path: "/", lazy: () => import("@/pages/landing.tsx") },
       {
         path: "/",
         element: <AuthGuard />,
@@ -55,10 +47,10 @@ const router = createBrowserRouter([
             path: "/users",
             element: <UserLayout />,
             children: [
-              { path: "/users", element: <DashboardPage /> },
+              { path: "/users", lazy: () => import("@/pages/users/dashboard.tsx") },
-              { path: "/users/notifications", element: <NotificationsPage /> },
+              { path: "/users/notifications", lazy: () => import("@/pages/users/notifications.tsx") },
-              { path: "/users/personalize", element: <PersonalizePage /> },
+              { path: "/users/personalize", lazy: () => import("@/pages/users/personalize.tsx") },
-              { path: "/users/security", element: <SecurityPage /> }
+              { path: "/users/security", lazy: () => import("@/pages/users/security.tsx") }
             ]
           }
         ]
@@ -70,9 +62,9 @@ const router = createBrowserRouter([
     element: <AuthLayout />,
     errorElement: <ErrorBoundary />,
     children: [
-      { path: "/auth/sign-up", element: <SignUpPage />, errorElement: <ErrorBoundary /> },
+      { path: "/auth/sign-up", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/sign-up.tsx") },
-      { path: "/auth/sign-in", element: <SignInPage />, errorElement: <ErrorBoundary /> },
+      { path: "/auth/sign-in", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/sign-in.tsx") },
-      { path: "/auth/o/connect", element: <OauthConnectPage />, errorElement: <ErrorBoundary /> }
+      { path: "/auth/o/connect", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/connect.tsx") }
     ]
   }
 ]);

pkg/views/src/pages/auth/connect.tsx

@@ -17,7 +17,7 @@ import { useSearchParams } from "react-router-dom";
 import OutletIcon from "@mui/icons-material/Outlet";
 import WhatshotIcon from "@mui/icons-material/Whatshot";
 
-export default function OauthConnectPage() {
+export function Component() {
   const { getAtk } = useUserinfo();
 
   const [panel, setPanel] = useState(0);

pkg/views/src/pages/auth/sign-in.tsx

@@ -25,7 +25,7 @@ import KeyIcon from "@mui/icons-material/Key";
 import PasswordIcon from "@mui/icons-material/Password";
 import EmailIcon from "@mui/icons-material/Email";
 
-export default function SignInPage() {
+export function Component() {
   const [panel, setPanel] = useState(0);
 
   const [error, setError] = useState<string | null>(null);

pkg/views/src/pages/auth/sign-up.tsx

@@ -21,7 +21,7 @@ import { FormEvent, useState } from "react";
 import { request } from "@/scripts/request.ts";
 import { useWellKnown } from "@/stores/wellKnown.tsx";
 
-export default function SignUpPage() {
+export function Component() {
   const [done, setDone] = useState(false);
 
   const [error, setError] = useState<string | null>(null);

pkg/views/src/pages/landing.tsx

@@ -1,7 +1,7 @@
 import { Button, Container, Grid, Typography } from "@mui/material";
 import { Link as RouterLink } from "react-router-dom";
 
-export default function LandingPage() {
+export function Component() {
   return (
     <Container sx={{ height: "calc(100vh - 64px)", display: "flex", alignItems: "center", textAlign: "center" }}>
       <Grid padding={5} spacing={8} container>

pkg/views/src/pages/users/dashboard.tsx

@@ -1,7 +1,7 @@
 import { Alert, Box, Card, CardContent, Container, Typography } from "@mui/material";
 import { useUserinfo } from "@/stores/userinfo.tsx";
 
-export default function DashboardPage() {
+export function Component() {
   const { userinfo } = useUserinfo();
 
   return (

pkg/views/src/pages/users/notifications.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { TransitionGroup } from "react-transition-group";
 import MarkEmailReadIcon from "@mui/icons-material/MarkEmailRead";
 
-export default function NotificationsPage() {
+export function Component() {
   const { userinfo, readProfiles, getAtk } = useUserinfo();
 
   const [loading, setLoading] = useState(true);

pkg/views/src/pages/users/personalize.tsx

@@ -37,7 +37,7 @@ const VisuallyHiddenInput = styled("input")({
   width: 1
 });
 
-export default function PersonalizePage() {
+export function Component() {
   const { userinfo, readProfiles, getAtk } = useUserinfo();
 
   const [done, setDone] = useState(false);

pkg/views/src/pages/users/security.tsx

@@ -19,7 +19,7 @@ import { request } from "@/scripts/request.ts";
 import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 
 
-export default function SecurityPage() {
+export function Component() {
   const dataDefinitions: { [id: string]: GridColDef[] } = {
     challenges: [
       { field: "id", headerName: "ID", width: 64 },