feat(web): add custom 404 pages for global and authenticated routes (#472)
All checks were successful
ci/woodpecker/push/web Pipeline was successful
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
This commit was merged in pull request #472.
This commit is contained in:
160
apps/web/src/app/(authenticated)/not-found.tsx
Normal file
160
apps/web/src/app/(authenticated)/not-found.tsx
Normal file
@@ -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'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>
|
||||||
|
);
|
||||||
|
}
|
||||||
175
apps/web/src/app/not-found.tsx
Normal file
175
apps/web/src/app/not-found.tsx
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import type { ReactElement } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "404 — Page Not Found | Mosaic Stack",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NotFound(): ReactElement {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
minHeight: "100vh",
|
||||||
|
background: "var(--bg)",
|
||||||
|
padding: "24px",
|
||||||
|
textAlign: "center",
|
||||||
|
gap: "32px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Mosaic logo mark — inline spans replicating the 5-element logo */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: 48,
|
||||||
|
height: 48,
|
||||||
|
position: "relative",
|
||||||
|
flexShrink: 0,
|
||||||
|
}}
|
||||||
|
role="img"
|
||||||
|
aria-label="Mosaic logo"
|
||||||
|
>
|
||||||
|
{/* Top-left: blue */}
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: 19,
|
||||||
|
height: 19,
|
||||||
|
borderRadius: 4,
|
||||||
|
background: "var(--ms-blue-500)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Top-right: purple */}
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
width: 19,
|
||||||
|
height: 19,
|
||||||
|
borderRadius: 4,
|
||||||
|
background: "var(--ms-purple-500)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Bottom-right: teal */}
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 0,
|
||||||
|
right: 0,
|
||||||
|
width: 19,
|
||||||
|
height: 19,
|
||||||
|
borderRadius: 4,
|
||||||
|
background: "var(--ms-teal-500)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Bottom-left: amber */}
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
width: 19,
|
||||||
|
height: 19,
|
||||||
|
borderRadius: 4,
|
||||||
|
background: "var(--ms-amber-500)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Center: pink circle */}
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: "50%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translate(-50%, -50%)",
|
||||||
|
width: 15,
|
||||||
|
height: 15,
|
||||||
|
borderRadius: "50%",
|
||||||
|
background: "var(--ms-pink-500)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 404 gradient text */}
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontFamily: "var(--mono)",
|
||||||
|
fontSize: "6rem",
|
||||||
|
fontWeight: 700,
|
||||||
|
lineHeight: 1,
|
||||||
|
margin: 0,
|
||||||
|
background: "linear-gradient(135deg, var(--ms-blue-400), var(--ms-purple-500))",
|
||||||
|
WebkitBackgroundClip: "text",
|
||||||
|
WebkitTextFillColor: "transparent",
|
||||||
|
backgroundClip: "text",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
404
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Heading + description */}
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
|
||||||
|
<h2
|
||||||
|
style={{
|
||||||
|
fontSize: "1.5rem",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "var(--text)",
|
||||||
|
margin: 0,
|
||||||
|
letterSpacing: "-0.025em",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Page not found
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
fontSize: "0.9375rem",
|
||||||
|
color: "var(--muted)",
|
||||||
|
margin: 0,
|
||||||
|
maxWidth: "400px",
|
||||||
|
lineHeight: 1.6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
The page you're looking for doesn't exist or has been moved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dashboard link styled as button */}
|
||||||
|
<Link
|
||||||
|
href="/"
|
||||||
|
style={{
|
||||||
|
display: "inline-flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
padding: "10px 24px",
|
||||||
|
background: "var(--ms-blue-500)",
|
||||||
|
color: "#ffffff",
|
||||||
|
borderRadius: "var(--r)",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
fontWeight: 500,
|
||||||
|
textDecoration: "none",
|
||||||
|
transition: "opacity 0.15s ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Go to Dashboard
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Subtle status footer */}
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
fontFamily: "var(--mono)",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
color: "var(--muted)",
|
||||||
|
margin: 0,
|
||||||
|
opacity: 0.6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
HTTP 404 — Not Found
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user