Split up config sections into pages

web/pages/components/key-value-table.tsx

@@ -0,0 +1,25 @@
+import { Table, Typography } from "antd";
+
+const { Title } = Typography;
+
+export default function KeyValueTable({ title, data }) {
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+    },
+    {
+      title: "Value",
+      dataIndex: "value",
+      key: "value",
+    },
+  ];
+
+  return (
+    <div>
+      <Title>{title}</Title>
+      <Table pagination={false} columns={columns} dataSource={data} />
+    </div>
+  );
+}

web/pages/components/main-layout.tsx

@@ -46,14 +46,14 @@ export default function MainLayout(props) {
       <Sider
         width={240}
         style={{
-          overflow: 'auto',
-          height: '100vh',
+          overflow: "auto",
+          height: "100vh",
         }}
       >
         <Menu
           theme="dark"
           defaultSelectedKeys={[route.substring(1)]}
-          defaultOpenKeys={['current-stream-menu', 'utilities-menu']}
+          defaultOpenKeys={["current-stream-menu", "utilities-menu"]}
           mode="inline"
         >
           <h1 className={adminStyles.owncastTitleContainer}>
@@ -66,24 +66,38 @@ export default function MainLayout(props) {
             <Link href="/">Home</Link>
           </Menu.Item>
 
-          <SubMenu key="current-stream-menu" icon={<LineChartOutlined />} title="Stream Details">
+          <SubMenu
+            key="current-stream-menu"
+            icon={<LineChartOutlined />}
+            title="Stream Details"
+          >
             <Menu.Item key="viewer-info">
               <Link href="/viewer-info">Viewers</Link>
             </Menu.Item>
             <Menu.Item key="hardware-info">
               <Link href="/hardware-info">Hardware</Link>
             </Menu.Item>
-            { broadcastActive ? (
+            {broadcastActive ? (
               <Menu.Item key="disconnect-stream" icon={<CloseCircleOutlined />}>
                 <Link href="/disconnect-stream">Disconnect Stream...</Link>
               </Menu.Item>
-             ) : null}
+            ) : null}
           </SubMenu>
-          
-          <SubMenu key="utilities-menu" icon={<SettingOutlined />} title="Utilities">
+
+          <SubMenu
+            key="utilities-menu"
+            icon={<SettingOutlined />}
+            title="Utilities"
+          >
             <Menu.Item key="update-server-config">
               <Link href="/update-server-config">Server Configuration</Link>
             </Menu.Item>
+            <Menu.Item key="video-config">
+              <Link href="/video-config">Video Configuration</Link>
+            </Menu.Item>
+            <Menu.Item key="storage">
+              <Link href="/storage">Storage</Link>
+            </Menu.Item>
             <Menu.Item key="update-stream-key">
               <Link href="/update-stream-key">Change Stream Key</Link>
             </Menu.Item>
@@ -94,19 +108,15 @@ export default function MainLayout(props) {
       <Layout>
         <Header className={adminStyles.header}>
           <div className={adminStyles.statusIndicatorContainer}>
-            <span className={adminStyles.statusLabel}>
-              {statusMessage}
-            </span>
-            <span className={adminStyles.statusIcon}>
-            {statusIcon}
-          </span>
+            <span className={adminStyles.statusLabel}>{statusMessage}</span>
+            <span className={adminStyles.statusIcon}>{statusIcon}</span>
           </div>
         </Header>
-        <Content className={adminStyles.contentMain}>
-          {children}
-        </Content>
-      
-        <Footer style={{ textAlign: 'center' }}><a href="https://owncast.online/">About Owncast</a></Footer>
+        <Content className={adminStyles.contentMain}>{children}</Content>
+
+        <Footer style={{ textAlign: "center" }}>
+          <a href="https://owncast.online/">About Owncast</a>
+        </Footer>
       </Layout>
     </Layout>
   );