feat(web): add custom 404 pages for global and authenticated routes (#472)

Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
2026-02-23 03:43:55 +00:00
parent 64e817cfb8
commit d0c720e6da
2 changed files with 335 additions and 0 deletions
--- a/apps/web/src/app/(authenticated)/not-found.tsx
+++ b/apps/web/src/app/(authenticated)/not-found.tsx
@@ -0,0 +1,160 @@
+import type { ReactElement } from "react";
+import Link from "next/link";
+
+export default function AuthenticatedNotFound(): ReactElement {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "60vh",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: "24px",
+          padding: "48px 40px",
+          background: "var(--surface)",
+          border: "1px solid var(--border)",
+          borderRadius: "var(--r-xl)",
+          boxShadow: "var(--shadow-md)",
+          textAlign: "center",
+          maxWidth: "420px",
+          width: "100%",
+        }}
+      >
+        {/* Compass icon in blue-tinted icon well */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 56,
+            height: 56,
+            borderRadius: "var(--r-lg)",
+            background: "rgba(47, 128, 255, 0.1)",
+            color: "var(--ms-blue-400)",
+          }}
+        >
+          <svg
+            width="28"
+            height="28"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <polygon
+              points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
+              fill="currentColor"
+              stroke="none"
+              opacity="0.3"
+            />
+            <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
+          </svg>
+        </div>
+
+        {/* 404 badge pill */}
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            padding: "4px 12px",
+            borderRadius: "9999px",
+            fontSize: "0.75rem",
+            fontWeight: 600,
+            fontFamily: "var(--mono)",
+            background: "rgba(47, 128, 255, 0.15)",
+            color: "var(--ms-blue-400)",
+          }}
+        >
+          404
+        </span>
+
+        {/* Heading + description */}
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+          <h2
+            style={{
+              fontSize: "1.25rem",
+              fontWeight: 600,
+              color: "var(--text)",
+              margin: 0,
+              letterSpacing: "-0.01em",
+            }}
+          >
+            Page not found
+          </h2>
+          <p
+            style={{
+              fontSize: "0.875rem",
+              color: "var(--muted)",
+              margin: 0,
+              lineHeight: 1.6,
+            }}
+          >
+            This page doesn&apos;t exist or you may not have permission to view it.
+          </p>
+        </div>
+
+        {/* Action buttons */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            marginTop: "8px",
+          }}
+        >
+          {/* Primary: Dashboard */}
+          <Link
+            href="/"
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "9px 20px",
+              background: "var(--ms-blue-500)",
+              color: "#ffffff",
+              borderRadius: "var(--r)",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              textDecoration: "none",
+              transition: "opacity 0.15s ease",
+            }}
+          >
+            Dashboard
+          </Link>
+
+          {/* Ghost: Settings */}
+          <Link
+            href="/settings"
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "9px 20px",
+              background: "transparent",
+              color: "var(--text-2)",
+              border: "1px solid var(--border)",
+              borderRadius: "var(--r)",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              textDecoration: "none",
+              transition: "all 0.15s ease",
+            }}
+          >
+            Settings
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}