refactor: move route content rendering to its own component file

src/components/Shell/RouteContent.tsx

@@ -0,0 +1,43 @@
+import { PropsWithChildren } from 'react'
+import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
+
+import { DrawerHeader } from './DrawerHeader'
+import { drawerWidth } from './Drawer'
+
+const Main = styled('main', { shouldForwardProp: prop => prop !== 'open' })<{
+  open?: boolean
+}>(({ theme, open }) => ({
+  transition: theme.transitions.create('margin', {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  marginLeft: `-${drawerWidth}px`,
+  ...(open && {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginLeft: 0,
+  }),
+}))
+
+interface RouteContentProps extends PropsWithChildren {
+  isDrawerOpen: boolean
+}
+
+export const RouteContent = ({ children, isDrawerOpen }: RouteContentProps) => {
+  return (
+    <Main
+      open={isDrawerOpen}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+      }}
+    >
+      <DrawerHeader />
+      <Box sx={{ overflow: 'auto', flexGrow: 1 }}>{children}</Box>
+    </Main>
+  )
+}

src/components/Shell/Shell.tsx

@@ -8,7 +8,7 @@ import {
   useState,
 } from 'react'
 import CssBaseline from '@mui/material/CssBaseline'
-import { ThemeProvider, createTheme, styled } from '@mui/material/styles'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import { AlertColor } from '@mui/material/Alert'
 
@@ -16,28 +16,11 @@ import { ShellContext } from 'contexts/ShellContext'
 import { SettingsContext } from 'contexts/SettingsContext'
 import { AlertOptions } from 'models/shell'
 
-import { Drawer, drawerWidth } from './Drawer'
+import { Drawer } from './Drawer'
 import { UpgradeDialog } from './UpgradeDialog'
-import { DrawerHeader } from './DrawerHeader'
 import { ShellAppBar } from './ShellAppBar'
 import { NotificationArea } from './NotificationArea'
-
+import { RouteContent } from './RouteContent'
-const Main = styled('main', { shouldForwardProp: prop => prop !== 'open' })<{
-  open?: boolean
-}>(({ theme, open }) => ({
-  transition: theme.transitions.create('margin', {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  marginLeft: `-${drawerWidth}px`,
-  ...(open && {
-    transition: theme.transitions.create('margin', {
-      easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    marginLeft: 0,
-  }),
-}))
 
 export interface ShellProps extends PropsWithChildren {
   userPeerId: string
@@ -153,17 +136,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
             theme={theme}
             userPeerId={userPeerId}
           />
-          <Main
+          <RouteContent isDrawerOpen={isDrawerOpen}>{children}</RouteContent>
-            open={isDrawerOpen}
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              width: '100%',
-            }}
-          >
-            <DrawerHeader />
-            <Box sx={{ overflow: 'auto', flexGrow: 1 }}>{children}</Box>
-          </Main>
         </Box>
       </ThemeProvider>
     </ShellContext.Provider>