Merge branch 'main' into AGE-1462/implement-global-config-for-swr

agenta-web/src/components/Layout/Layout.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from "react"
-import {Breadcrumb, ConfigProvider, Layout, Modal, Space, Typography, theme} from "antd"
+import {Breadcrumb, Button, ConfigProvider, Layout, Modal, Space, Typography, theme} from "antd"
 import Sidebar from "../Sidebar/Sidebar"
 import {GithubFilled, LinkedinFilled, TwitterOutlined} from "@ant-design/icons"
 import Link from "next/link"
@@ -95,6 +95,21 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             fontWeight: 600,
         },
     },
+    notFoundContainer: {
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "100vh",
+        alignItems: "center",
+        justifyContent: "center",
+        "& .ant-typography:nth-of-type(1)": {
+            fontSize: 24,
+            fontWeight: 600,
+        },
+        "& .ant-typography:nth-of-type(2)": {
+            fontSize: 14,
+            marginTop: 8,
+        },
+    },
 }))
 
 type LayoutProps = {
@@ -190,7 +205,19 @@ const App: React.FC<LayoutProps> = ({children}) => {
     }, [appTheme])
 
     // wait unitl we have the app id, if its an app route
-    if (isAppRoute && (!appId || !currentApp)) return null
+    if (isAppRoute && !appId) return null
+
+    if (appId && !currentApp)
+        return (
+            <div className={classes.notFoundContainer}>
+                <Typography.Text>404 - Page Not Found</Typography.Text>
+                <Typography.Text>This page could not be found.</Typography.Text>
+
+                <Button type="primary" onClick={() => router.push("/apps")}>
+                    Back To Apps
+                </Button>
+            </div>
+        )
 
     const isAuthRoute =
         router.pathname.includes("/auth") || router.pathname.includes("/post-signup")