Fix 404 page buttons and add 'Create this page' feature

- Replace non-functional action-based buttons with direct onClick handlers
- Add 'Create this page' button for document paths that suggests creating a new document
- Use react-router history.push() for reliable navigation
- Extract potential page names from URL paths for better UX

Fixes #9587

app/scenes/Errors/Error404.tsx

@@ -1,18 +1,42 @@
 import { useTranslation, Trans } from "react-i18next";
+import { useLocation, useHistory } from "react-router-dom";
 import Flex from "@shared/components/Flex";
 import Button from "~/components/Button";
 import Empty from "~/components/Empty";
 import Heading from "~/components/Heading";
 import Scene from "~/components/Scene";
-import {
-  navigateToHome,
-  navigateToSearch,
-} from "~/actions/definitions/navigation";
-import useActionContext from "~/hooks/useActionContext";
+import { homePath, searchPath } from "~/utils/routeHelpers";
 
 const Error404 = () => {
   const { t } = useTranslation();
-  const context = useActionContext();
+  const location = useLocation();
+  const history = useHistory();
+
+  // Extract potential page name from URL path
+  const pathname = location.pathname;
+  const isDocumentPath =
+    pathname.startsWith("/doc/") && pathname !== "/doc/new";
+  const potentialPageName = isDocumentPath
+    ? pathname.split("/").pop()?.replace(/-/g, " ") || ""
+    : "";
+
+  const handleCreatePage = () => {
+    if (potentialPageName) {
+      // Navigate to new document creation with the page name as title
+      history.push(`/doc/new?title=${encodeURIComponent(potentialPageName)}`);
+    } else {
+      // Fallback to regular document creation
+      history.push("/doc/new");
+    }
+  };
+
+  const handleHomeClick = () => {
+    history.push(homePath());
+  };
+
+  const handleSearchClick = () => {
+    history.push(searchPath());
+  };
 
   return (
     <Scene title={t("Not found")}>
@@ -20,17 +44,22 @@ const Error404 = () => {
       <Flex gap={20} style={{ maxWidth: 500 }} column>
         <Empty size="large">
           <Trans>
-            The page you’re looking for cannot be found. It might have been
+            The page you&apos;re looking for cannot be found. It might have been
             deleted or the link is incorrect.
           </Trans>
         </Empty>
         <Flex gap={8}>
-          <Button action={navigateToHome} context={context} hideIcon>
+          <Button onClick={handleHomeClick} hideIcon>
             {t("Home")}
           </Button>
-          <Button action={navigateToSearch} context={context} neutral>
+          <Button onClick={handleSearchClick} neutral>
             {t("Search")}…
           </Button>
+          {isDocumentPath && potentialPageName && (
+            <Button onClick={handleCreatePage} neutral>
+              {t("Create this page")}
+            </Button>
+          )}
         </Flex>
       </Flex>
     </Scene>

shared/i18n/locales/en_US/translation.json

@@ -736,7 +736,8 @@
   "It doesn’t look like you have permission to access this document.": "It doesn’t look like you have permission to access this document.",
   "Please request access from the document owner.": "Please request access from the document owner.",
   "Not found": "Not found",
-  "The page you’re looking for cannot be found. It might have been deleted or the link is incorrect.": "The page you’re looking for cannot be found. It might have been deleted or the link is incorrect.",
+  "The page you're looking for cannot be found. It might have been deleted or the link is incorrect.": "The page you're looking for cannot be found. It might have been deleted or the link is incorrect.",
+  "Create this page": "Create this page",
   "Offline": "Offline",
   "We were unable to load the document while offline.": "We were unable to load the document while offline.",
   "Your account has been suspended": "Your account has been suspended",