feat: UX gap fixes — 404 page, empty state, hover states#146
feat: UX gap fixes — 404 page, empty state, hover states#146ryota-murakami merged 3 commits intomainfrom
Conversation
- Add hover lift effect (-translate-y-1) to feature and step cards - Add group hover transitions to HowItWorksSection step cards - Add cursor-pointer to interactive cards - Add Privacy and Terms links to footer Closes #140
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR addresses three UX gaps by adding interactive hover effects to landing page components, introducing a branded 404 error page for unknown routes, and adding empty-state guidance to empty board columns to improve first-time user experience. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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. Comment |
🤖 Morph Preview Test⚡ Looks like you hit your rate limits! Please upgrade your limits here, or wait a few minutes and try again. If you need help, reach out to support@morphllm.com. Automated testing by Morph |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #146 +/- ##
==========================================
+ Coverage 69.26% 69.27% +0.01%
==========================================
Files 146 146
Lines 4552 4554 +2
Branches 1214 1216 +2
==========================================
+ Hits 3153 3155 +2
Misses 1377 1377
Partials 22 22 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/app/(landing)/FeaturesSection.tsx (1)
88-100: Hover lift effect looks good.Clean, consistent implementation. The
group+group-hover:scale-110on the icon at line 92 is a nice detail.One optional note:
cursor-pointeron a non-interactive<div>(noonClick/href) can be mildly misleading to pointer users who expect a click response. If these cards are purely decorative,cursor-defaultis semantically more accurate — or you can add anonClickthat anchors to the relevant section. The same pattern exists inHowItWorksSection.tsxline 52.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/`(landing)/FeaturesSection.tsx around lines 88 - 100, The top-level feature card div using the class string that includes "group ... cursor-pointer" is non-interactive and should not signal clickability; either replace "cursor-pointer" with "cursor-default" on that div in FeaturesSection (the container rendering feature.icon, feature.title, feature.description) or make the card truly interactive by adding an onClick handler or wrapping it in a semantic anchor/button that navigates to the related section; apply the same change to the analogous non-interactive card in HowItWorksSection (the div around line 52) to keep behavior consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/`(landing)/Footer.tsx:
- Around line 40-46: Add rel="noopener noreferrer" to the external anchor for
Laststance.io in Footer.tsx to prevent reverse tabnapping; locate the <a>
element with href="https://laststance.io/" (the Laststance.io link) and add
rel="noopener noreferrer" alongside target="_blank" to match the GitHub link's
protection.
In `@src/components/Board/StatusColumn.tsx`:
- Around line 188-196: The empty-state guidance in the StatusColumn component
always tells users to "click 'Add Repo' below" even when the optional onAddCard
prop isn't provided; update the JSX inside the cards.length === 0 block in
StatusColumn.tsx to conditionally render the guidance text based on the presence
of onAddCard (e.g., show "Drop repos here" only when onAddCard is undefined, or
append "or click 'Add Repo' below" only when onAddCard is defined) so the
message matches whether the Add Repo button will be rendered.
---
Nitpick comments:
In `@src/app/`(landing)/FeaturesSection.tsx:
- Around line 88-100: The top-level feature card div using the class string that
includes "group ... cursor-pointer" is non-interactive and should not signal
clickability; either replace "cursor-pointer" with "cursor-default" on that div
in FeaturesSection (the container rendering feature.icon, feature.title,
feature.description) or make the card truly interactive by adding an onClick
handler or wrapping it in a semantic anchor/button that navigates to the related
section; apply the same change to the analogous non-interactive card in
HowItWorksSection (the div around line 52) to keep behavior consistent.
| <a | ||
| href="https://laststance.io/" | ||
| target="_blank" | ||
| className="hover:text-foreground transition-colors" | ||
| > | ||
| Laststance.io | ||
| </a> |
There was a problem hiding this comment.
Add rel="noopener noreferrer" to the target="_blank" Laststance link.
The GitHub link in the same file already has it; the new Laststance.io link does not. Without it, the opened tab can access window.opener and redirect the originating page (reverse tabnapping).
🔒 Proposed fix
<a
href="https://laststance.io/"
target="_blank"
+ rel="noopener noreferrer"
className="hover:text-foreground transition-colors"
>
Laststance.io
</a>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/`(landing)/Footer.tsx around lines 40 - 46, Add rel="noopener
noreferrer" to the external anchor for Laststance.io in Footer.tsx to prevent
reverse tabnapping; locate the <a> element with href="https://laststance.io/"
(the Laststance.io link) and add rel="noopener noreferrer" alongside
target="_blank" to match the GitHub link's protection.
| {/* Empty column guidance */} | ||
| {cards.length === 0 && ( | ||
| <div className="flex flex-col items-center gap-2 py-8 text-center"> | ||
| <Inbox className="text-muted-foreground/40 h-8 w-8" /> | ||
| <p className="text-muted-foreground text-xs"> | ||
| Drop repos here or click "Add Repo" below | ||
| </p> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Empty state message references "Add Repo" even when onAddCard is not provided.
onAddCard is optional — when absent the "Add Repo" button (line 201) is not rendered, but the guidance still tells users to click it.
🛠️ Proposed fix
- <p className="text-muted-foreground text-xs">
- Drop repos here or click "Add Repo" below
- </p>
+ <p className="text-muted-foreground text-xs">
+ {onAddCard
+ ? 'Drop repos here or click "Add Repo" below'
+ : 'Drop repos here to get started'}
+ </p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {/* Empty column guidance */} | |
| {cards.length === 0 && ( | |
| <div className="flex flex-col items-center gap-2 py-8 text-center"> | |
| <Inbox className="text-muted-foreground/40 h-8 w-8" /> | |
| <p className="text-muted-foreground text-xs"> | |
| Drop repos here or click "Add Repo" below | |
| </p> | |
| </div> | |
| )} | |
| {/* Empty column guidance */} | |
| {cards.length === 0 && ( | |
| <div className="flex flex-col items-center gap-2 py-8 text-center"> | |
| <Inbox className="text-muted-foreground/40 h-8 w-8" /> | |
| <p className="text-muted-foreground text-xs"> | |
| {onAddCard | |
| ? 'Drop repos here or click "Add Repo" below' | |
| : 'Drop repos here to get started'} | |
| </p> | |
| </div> | |
| )} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/Board/StatusColumn.tsx` around lines 188 - 196, The
empty-state guidance in the StatusColumn component always tells users to "click
'Add Repo' below" even when the optional onAddCard prop isn't provided; update
the JSX inside the cards.length === 0 block in StatusColumn.tsx to conditionally
render the guidance text based on the presence of onAddCard (e.g., show "Drop
repos here" only when onAddCard is undefined, or append "or click 'Add Repo'
below" only when onAddCard is defined) so the message matches whether the Add
Repo button will be rendered.
🧪 E2E Coverage Report (Sharded: 12 parallel jobs)
📊 Full report available in workflow artifacts |
2 participants
Summary
Resolves 3 UX gap issues identified by the UX Gap Detector audit (score: 61/100).
Issue #138 (loading states) was already implemented — closing with comment.
src/app/not-found.tsx) with GitBox branding, dual CTA buttonsChanges
src/app/not-found.tsxsrc/components/Board/StatusColumn.tsxcards.length === 0src/app/(landing)/FeaturesSection.tsxhover:-translate-y-1 cursor-pointerto feature cardssrc/app/(landing)/HowItWorksSection.tsxgrouphover states, lift effect, step number scale animationsrc/app/(landing)/Footer.tsxTest plan
pnpm lint— passedpnpm typecheck— passedpnpm test— 1282 tests passedpnpm build—/_not-foundroute generatedpnpm e2e:parallel— all E2E tests passedCloses #137
Closes #139
Closes #140
Summary by CodeRabbit
Release Notes
New Features
Style