Skip to content

Feat: Add smart fallback navigation to 404 page #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
metis-ai-agent wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Feat: Add smart fallback navigation to 404 page #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions frontend/src/pages/NotFoundPage.tsx
View file
Open in desktop
Copy link
Copy Markdown
Author

@metis-ai-agent metis-ai-agent bot Feb 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trailing Newline Missing in File

  • Severity: INFO
  • Category: STYLE

Issue

The file is missing a trailing newline at the end of the file, which is a common code style convention for text files and is often enforced by linters and git configurations.

Suggested Fix

Add a trailing newline at the end of the file after the closing brace.

METIS: See More Details

Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,20 @@ import { useNavigate } from 'react-router-dom';
export const NotFoundPage = () => {
const navigate = useNavigate();

const handleGoBack = () => {
// Check if there's history to go back to (more than just current page)
if (window.history.length > 1) {
navigate(-1);
} else {
// No useful history, go to home
navigate('/');
Comment on lines 13 to +20
Copy link
Copy Markdown
Author

@metis-ai-agent metis-ai-agent bot Feb 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Navigate Handlers Lack useCallback Optimization

  • Severity: WARNING
  • Category: PERFORMANCE

Issue

The handleGoBack and handleGoHome handlers are recreated on every render. While not causing issues here, using useCallback with proper dependencies is React best practice for event handlers, especially since other components in the codebase follow similar inline patterns without memoization.

Suggested Fix

Wrap handlers with useCallback: const handleGoBack = useCallback(() => { ... }, []); and const handleGoHome = useCallback(() => navigate('/'), [navigate]);. However, this is optional since the component is lightweight and these handlers are simple.

METIS: See More Details

}
};

const handleGoHome = () => {
navigate('/');
};

return (
<div
className="landing relative flex min-h-screen items-center justify-center p-4"
Expand Down Expand Up @@ -50,7 +64,7 @@ export const NotFoundPage = () => {
<h1 className="landing-display mb-2 text-8xl font-black tracking-tighter text-[var(--metis-red)]">
404
</h1>
<h2 className="landing-display text-2xl font-black">PAGE NOT FOUND</h2>
<h2 className="landing-display text-2xl font-black uppercase">Page Not Found</h2>
</div>

{/* Message */}
Expand All @@ -61,26 +75,26 @@ export const NotFoundPage = () => {
</div>

{/* Actions */}
<div className="flex gap-3">
<div className="flex flex-col gap-3 sm:flex-row">
<Button
onClick={() => navigate(-1)}
onClick={handleGoBack}
className="flex-1 border-2 border-black bg-white text-black shadow-[4px_4px_0px_0px_#000] transition-all hover:-translate-y-1 hover:shadow-[6px_6px_0px_0px_#000]"
size="lg"
>
<ArrowLeft className="mr-2 h-5 w-5" />
Go Back
</Button>
<Button
onClick={() => navigate('/')}
onClick={handleGoHome}
className="flex-1 border-2 border-black bg-[var(--metis-orange)] text-white shadow-[4px_4px_0px_0px_#000] transition-all hover:-translate-y-1 hover:shadow-[6px_6px_0px_0px_#000]"
size="lg"
>
<Home className="mr-2 h-5 w-5" />
Home
Go Home
</Button>
</div>
</CardContent>
</Card>
</div>
);
};
};