✨ Basic console layout

package.json

@@ -18,6 +18,7 @@
     "@mui/material-nextjs": "^6.3.1",
     "@mui/x-charts": "^7.23.2",
     "@tailwindcss/typography": "^0.5.16",
+    "@toolpad/core": "^0.11.0",
     "@vercel/speed-insights": "^1.1.0",
     "animate.css": "^4.1.1",
     "axios": "^1.7.9",
@@ -51,6 +52,8 @@
     "@eslint/eslintrc": "^3.2.0"
   },
   "trustedDependencies": [
-    "@vercel/speed-insights"
+    "@vercel/speed-insights",
+    "esbuild",
+    "sharp"
   ]
 }

src/components/CapAppBar.tsx

@@ -47,7 +47,7 @@ export function CapAppBar() {
       <CapDrawer width={drawerWidth} open={open} onClose={() => setOpen(false)} />
 
       <AppBarScroll elevation={0}>
-        <AppBar position="sticky" elevation={0} color="transparent" className="backdrop-blur-md">
+        <AppBar position="sticky" elevation={0} color="transparent" className="backdrop-blur-md z-10">
           <Toolbar>
             <IconButton
               size="large"

src/components/CapDrawer.tsx

@@ -16,10 +16,11 @@ import Image from 'next/image'
 
 import ExploreIcon from '@mui/icons-material/Explore'
 import PhotoLibraryIcon from '@mui/icons-material/PhotoLibrary'
+import AppsIcon from '@mui/icons-material/Apps'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 
-interface NavLink {
+export interface NavLink {
   title: string
   icon?: JSX.Element
   href: string
@@ -39,6 +40,11 @@ export function CapDrawer({ width, open, onClose }: { width: number; open: boole
       icon: <PhotoLibraryIcon />,
       href: '/attachments',
     },
+    {
+      title: 'Matrix',
+      icon: <AppsIcon />,
+      href: '/matrix',
+    },
   ]
 
   const additionalLinks: NavLink[] = [

src/components/layouts/ConsoleLayout.tsx

@@ -0,0 +1,54 @@
+import { checkAuthenticatedClient, redirectToLogin } from '@/services/auth'
+import { JSX, useEffect } from 'react'
+import { DashboardLayout, Navigation } from '@toolpad/core'
+import { Stack, Typography } from '@mui/material'
+import NextLink from 'next/link'
+
+import AppsIcon from '@mui/icons-material/Apps'
+
+export function ConsoleLayout({ children }: { children: JSX.Element }) {
+  useEffect(() => {
+    if (!checkAuthenticatedClient()) redirectToLogin()
+  }, [])
+
+  const navigation: Navigation = [
+    {
+      segment: 'console/matrix',
+      title: 'Matrix',
+      icon: <AppsIcon />,
+    },
+  ]
+
+  return (
+    <DashboardLayout
+      navigation={navigation}
+      branding={{
+        homeUrl: '/console',
+      }}
+      slots={{
+        appTitle(_) {
+          return (
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <NextLink passHref href="/console">
+                <Typography variant="h6">Solar Network Console</Typography>
+              </NextLink>
+            </Stack>
+          )
+        },
+      }}
+      sidebarExpandedWidth={300}
+      defaultSidebarCollapsed
+    >
+      {children}
+    </DashboardLayout>
+  )
+}
+
+export function getConsoleStaticProps(original: any) {
+  if (original.props.title) {
+    original.props.title = 'Console | ' + original.props.title
+  }
+  original.props.showAppBar = false
+
+  return original
+}

src/pages/_app.tsx

@@ -4,6 +4,7 @@ import { Box, createTheme, CssBaseline, ThemeProvider } from '@mui/material'
 import { Roboto } from 'next/font/google'
 import { CapAppBar } from '@/components/CapAppBar'
 import { PagesProgressBar as ProgressBar } from 'next-nprogress-bar'
+import { AppProvider } from '@toolpad/core/nextjs'
 import { useUserStore } from '@/services/user'
 import { useEffect } from 'react'
 import Head from 'next/head'
@@ -56,20 +57,22 @@ export default function App({ Component, pageProps }: AppProps) {
         <link rel="apple-touch-icon" href="/apple-icon.png" type="image/png" />
       </Head>
 
-      <ThemeProvider theme={siteTheme}>
+      <AppProvider>
-        <CssBaseline />
+        <ThemeProvider theme={siteTheme}>
-        <ProgressBar
+          <CssBaseline />
-          height="4px"
+          <ProgressBar
-          color={siteTheme.palette.primary.main}
+            height="4px"
-          options={{ showSpinner: false }}
+            color={siteTheme.palette.primary.main}
-          shallowRouting
+            options={{ showSpinner: false }}
-        />
+            shallowRouting
+          />
 
-        <CapAppBar />
+          {(pageProps.showAppBar ?? true) && <CapAppBar />}
-        <Box sx={{ minHeight: 'calc(100vh - 64px)' }}>
+          <Box sx={{ minHeight: 'calc(100vh - 64px)' }}>
-          <Component {...pageProps} />
+            <Component {...pageProps} />
-        </Box>
+          </Box>
-      </ThemeProvider>
+        </ThemeProvider>
+      </AppProvider>
     </>
   )
 }

src/pages/console/index.tsx

@@ -0,0 +1,51 @@
+import { ConsoleLayout, getConsoleStaticProps } from '@/components/layouts/ConsoleLayout'
+import { Typography, Container, Box, Grid2 as Grid, Card, CardContent, CardActionArea } from '@mui/material'
+import NextLink from 'next/link'
+
+import DynamicFormIcon from '@mui/icons-material/DynamicForm'
+import AppsIcon from '@mui/icons-material/Apps'
+
+export function getStaticProps() {
+  return getConsoleStaticProps({
+    props: {
+      title: 'Welcome',
+    },
+  })
+}
+
+export default function ConsoleLanding() {
+  return (
+    <ConsoleLayout>
+      <Container sx={{ py: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <Box>
+          <DynamicFormIcon sx={{ fontSize: 64, mb: 2 }} />
+          <Typography variant="subtitle2">Welcome to the</Typography>
+          <Typography variant="h3" component="h1">
+            Console
+          </Typography>
+          <Typography variant="subtitle1">of the Solar Network</Typography>
+        </Box>
+
+        <Grid container columns={{ xs: 2, sm: 2, md: 3, lg: 4 }} spacing={4}>
+          <Grid size={1}>
+            <NextLink passHref href="/console/matrix">
+              <CardActionArea>
+                <Card sx={{ width: '100%' }} onClick={() => {}}>
+                  <CardContent>
+                    <AppsIcon sx={{ fontSize: 32, mb: 1.5 }} />
+                    <Typography variant="h5" gutterBottom>
+                      Matrix
+                    </Typography>
+                    <Typography variant="body1">
+                      Publish and versioning your application with Matrix Marketplace.
+                    </Typography>
+                  </CardContent>
+                </Card>
+              </CardActionArea>
+            </NextLink>
+          </Grid>
+        </Grid>
+      </Container>
+    </ConsoleLayout>
+  )
+}

src/pages/console/matrix/index.tsx

@@ -0,0 +1,22 @@
+import { ConsoleLayout, getConsoleStaticProps } from '@/components/layouts/ConsoleLayout'
+import { Typography, Container } from '@mui/material'
+
+export async function getStaticProps() {
+  return getConsoleStaticProps({
+    props: {
+      title: 'Matrix Marketplace',
+    },
+  })
+}
+
+export default function MatrixMarketplace() {
+  return (
+    <ConsoleLayout>
+      <Container sx={{ py: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <Typography variant="h3" component="h1">
+          Matrix Marketplace
+        </Typography>
+      </Container>
+    </ConsoleLayout>
+  )
+}

src/pages/matrix/index.tsx

@@ -0,0 +1,11 @@
+import { Typography, Container } from '@mui/material'
+
+export default function MatrixMarketplace() {
+  return (
+    <Container sx={{ py: 24, display: 'flex', flexDirection: 'column', gap: 32 }}>
+      <Typography variant="h3" component="h1">
+        Matrix Marketplace
+      </Typography>
+    </Container>
+  )
+}