feat: 404 page

[reneaaron]

Minimalistic styles for the 404 page, currently looks a bit broken.

Before

After

Summary by CodeRabbit

• Style
  • Redesigned the 404 page not found screen with a cleaner, centered layout and simplified design. Updated messaging text for consistency. Improved visual presentation for a better user experience when encountering missing pages.

[coderabbitai]

📝 Walkthrough

Walkthrough

The NotFound component's UI has been refactored from a Card-based layout to a simplified, centered container design. The SearchXIcon has been replaced with AlbyHubIcon, and text content has been updated. No functional logic or export signatures changed.

Changes

Cohort / File(s)	Summary
NotFound Screen UI Refactor frontend/src/screens/NotFound.tsx	Replaced Card-based UI with centered layout. Removed SearchXIcon and Card components; added AlbyHubIcon. Updated text: "Page Not Found" → "Page not found" and adjusted description wording. Visual structure simplified to vertical, centered container.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A page once lost in cards so neat,
Now centered, simple, and quite sweet,
The AlbyHub icon shines so bright,
While SearchX fades from view tonight,
"Not found" it says with cleaner grace! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: 404 page' is concise and directly related to the main change, which is a redesigned 404 error page with improved styling and layout.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/404

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/screens/NotFound.tsx (1)

6-6: Consider using a semantic page landmark for the wrapper.

For a full-page error screen, using <main> improves screen-reader navigation with no visual impact.

♿ Optional semantic improvement

-    <div className="flex flex-col items-center justify-center min-h-screen gap-6 text-center px-4">
+    <main className="flex flex-col items-center justify-center min-h-screen gap-6 text-center px-4">
...
-    </div>
+    </main>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/screens/NotFound.tsx` at line 6, The top-level wrapper in the
NotFound component is a generic <div>; replace that full-page wrapper with a
semantic <main> landmark (keeping the same className "flex flex-col items-center
justify-center min-h-screen gap-6 text-center px-4") so screen readers can
better navigate the error page—locate the wrapper in the NotFound component and
swap the tag accordingly.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/src/screens/NotFound.tsx`:
- Line 6: The top-level wrapper in the NotFound component is a generic <div>;
replace that full-page wrapper with a semantic <main> landmark (keeping the same
className "flex flex-col items-center justify-center min-h-screen gap-6
text-center px-4") so screen readers can better navigate the error page—locate
the wrapper in the NotFound component and swap the tag accordingly.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a16d3026-3457-40a3-9060-2fc9c5b83c97

📥 Commits

Reviewing files that changed from the base of the PR and between 78d5eca and 5072093.

📒 Files selected for processing (1)

• frontend/src/screens/NotFound.tsx

[rolznz]

utACK