Fix admin subpages not having a layout

web/components/layouts/AdminLayout.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable @next/next/no-css-tags */
+import { AppProps } from 'next/app';
+import { FC } from 'react';
+import ServerStatusProvider from '../../utils/server-status-context';
+import AlertMessageProvider from '../../utils/alert-message-context';
+import { MainLayout } from '../admin/MainLayout';
+
+/*
+NOTE: A bunch of compiled css is loaded here for the Admin UI.
+These are old stylesheets that were converted from sass and should not be
+edited or maintained. Instead we are using css modules everywhere. So if you
+need to change a style rewrite the css file as a css module and import it
+into the component that needs it, removing it from this global list.
+*/
+export const AdminLayout: FC<AppProps> = ({ Component, pageProps }) => (
+  <>
+    <link rel="stylesheet" href="/styles/admin/main-layout.css" />
+    <link rel="stylesheet" href="/styles/admin/form-textfields.css" />
+    <link rel="stylesheet" href="/styles/admin/config-socialhandles.css" />
+    <link rel="stylesheet" href="/styles/admin/config-storage.css" />
+    <link rel="stylesheet" href="/styles/admin/config-edit-string-tags.css" />
+    <link rel="stylesheet" href="/styles/admin/config-video-variants.css" />
+    <link rel="stylesheet" href="/styles/admin/config-public-details.css" />
+    <link rel="stylesheet" href="/styles/admin/home.css" />
+    <link rel="stylesheet" href="/styles/admin/chat.css" />
+    <link rel="stylesheet" href="/styles/admin/pages.css" />
+    <link rel="stylesheet" href="/styles/admin/offline-notice.css" />
+
+    <ServerStatusProvider>
+      <AlertMessageProvider>
+        <MainLayout>
+          <Component {...pageProps} />
+        </MainLayout>
+      </AlertMessageProvider>
+    </ServerStatusProvider>
+  </>
+);

web/pages/_app.tsx

@@ -14,6 +14,9 @@ import { AppProps } from 'next/app';
 import { ReactElement, ReactNode } from 'react';
 import { NextPage } from 'next';
 import { RecoilRoot } from 'recoil';
+import { Router, useRouter } from 'next/router';
+
+import { AdminLayout } from '../components/layouts/AdminLayout';
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -24,10 +27,15 @@ type AppPropsWithLayout = AppProps & {
 };
 
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
-  // Use the layout defined at the page level, if available
+  const router = useRouter() as Router;
-  const getLayout = Component.getLayout ?? (page => page);
+  const isAdminPage = router.pathname.startsWith('/admin');
+  if (isAdminPage) {
+    return <AdminLayout pageProps={pageProps} Component={Component} router={router} />;
+  }
 
-  return getLayout(
+  const layout = Component.getLayout ?? (page => page);
+
+  return layout(
     <RecoilRoot>
       <Component {...pageProps} />
     </RecoilRoot>,

web/pages/admin/index.tsx

@@ -182,27 +182,3 @@ export default function Home() {
     </div>
   );
 }
-
-Home.getLayout = function getLayout(page: ReactElement) {
-  return (
-    <>
-      <link rel="stylesheet" href="/styles/admin/main-layout.css" />
-      <link rel="stylesheet" href="/styles/admin/form-textfields.css" />
-      <link rel="stylesheet" href="/styles/admin/config-socialhandles.css" />
-      <link rel="stylesheet" href="/styles/admin/config-storage.css" />
-      <link rel="stylesheet" href="/styles/admin/config-edit-string-tags.css" />
-      <link rel="stylesheet" href="/styles/admin/config-video-variants.css" />
-      <link rel="stylesheet" href="/styles/admin/config-public-details.css" />
-      <link rel="stylesheet" href="/styles/admin/home.css" />
-      <link rel="stylesheet" href="/styles/admin/chat.css" />
-      <link rel="stylesheet" href="/styles/admin/pages.css" />
-      <link rel="stylesheet" href="/styles/admin/offline-notice.css" />
-
-      <ServerStatusProvider>
-        <AlertMessageProvider>
-          <MainLayout>{page}</MainLayout>
-        </AlertMessageProvider>
-      </ServerStatusProvider>
-    </>
-  );
-};