feat(frontend): dismissible flash banner and safe placement#79
feat(frontend): dismissible flash banner and safe placement#79evan-taylor merged 4 commits intodevfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 1 minutes and 11 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
📝 WalkthroughWalkthroughThis PR introduces a flash messaging system (temporary banner notifications) to the app by creating a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Screen as Screen Component
participant Flash as FlashProvider
participant Banner as Flash Banner
participant Timer as Auto-dismiss Timer
User->>Screen: Triggers action (e.g., create listing)
Screen->>Screen: Action succeeds
Screen->>Flash: setFlash("Listing created.")
Flash->>Flash: Clear existing timeout
Flash->>Flash: Set message state
Flash->>Banner: Render banner at bottom
Banner->>User: Display notification
Flash->>Timer: Schedule auto-dismiss (2000ms)
Timer->>Flash: Timeout fires
Flash->>Flash: Clear message state
Flash->>Banner: Remove banner from view
sequenceDiagram
participant User
participant ReportModal as Report Modal
participant API as API
participant Screen as Screen Component
participant Flash as FlashProvider
User->>ReportModal: Submit report
ReportModal->>API: POST report
API->>ReportModal: Success response
ReportModal->>Screen: onReportSuccess() callback
Screen->>Flash: setFlash("Report submitted...")
Flash->>User: Display confirmation banner
ReportModal->>ReportModal: handleClose()
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
|
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/app/listings/[id].tsx (1)
199-200: Flash wiring works, but extract shared report-success copy.The repeated string (
'Report submitted. Thanks for helping keep PolyBuys safe.') now appears in multiple screens. Consider a shared constant to prevent drift in future copy updates.Also applies to: 567-569
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/app/listings/`[id].tsx around lines 199 - 200, The same success copy is duplicated; extract it to a shared constant (e.g., REPORT_SUBMITTED_MESSAGE) and replace inline string occurrences where setFlash is called (referenced in this file around the setFlash calls in listings/[id].tsx, including the try/catch block that currently uses 'Report submitted. Thanks for helping keep PolyBuys safe.' and the other occurrence at lines ~567-569) so both places import and use the constant; add the constant to a shared module (or top-level of this file if already shared) and update imports/usages to reference REPORT_SUBMITTED_MESSAGE instead of the hard-coded literal.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/contexts/FlashContext.tsx`:
- Around line 19-21: The reduced-motion auto-dismiss timeout is shorter
(FLASH_DURATION_REDUCED_MS = 900) which makes confirmations harder to read when
reduceMotion === true; update FLASH_DURATION_REDUCED_MS to be at least as long
as FLASH_DURATION_MS (or longer, e.g., 2000–3000ms) and ensure the reduceMotion
branch that reads reduceMotion uses that constant so the auto-dismiss behavior
does not shorten for users who requested reduced motion (symbols to change:
FLASH_DURATION_MS, FLASH_DURATION_REDUCED_MS, and the reduceMotion conditional
in FlashContext/any dismiss logic).
---
Nitpick comments:
In `@frontend/app/listings/`[id].tsx:
- Around line 199-200: The same success copy is duplicated; extract it to a
shared constant (e.g., REPORT_SUBMITTED_MESSAGE) and replace inline string
occurrences where setFlash is called (referenced in this file around the
setFlash calls in listings/[id].tsx, including the try/catch block that
currently uses 'Report submitted. Thanks for helping keep PolyBuys safe.' and
the other occurrence at lines ~567-569) so both places import and use the
constant; add the constant to a shared module (or top-level of this file if
already shared) and update imports/usages to reference REPORT_SUBMITTED_MESSAGE
instead of the hard-coded literal.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f30eeab4-cc57-41cf-8bcb-96f371ddac2d
📒 Files selected for processing (7)
frontend/app/_layout.tsxfrontend/app/listings/[id].tsxfrontend/app/listings/[id]/edit.tsxfrontend/app/listings/new.tsxfrontend/app/profile/[userId].tsxfrontend/components/ReportModal.tsxfrontend/contexts/FlashContext.tsx
- Add FlashProvider with bottom-inset positioning above tab/home area - pointerEvents box-none/auto so banner receives taps; tap or Dismiss clears - Shorter auto-dismiss when reduce motion is enabled - Wire create/edit listing, mark sold, and report success to setFlash - ReportModal optional onReportSuccess for non-blocking confirmation Made-with: Cursor
- Add feedbackMessages constants for report success (flash + Alert) - Use REPORT_SUBMITTED_MESSAGE in listing and profile screens - Increase FLASH_DURATION_REDUCED_MS to 4000 for readability Made-with: Cursor
evan-taylor
force-pushed
the
fix/flash-banner-dismiss-and-placement
branch
from
5fa6cd3 to
3a9a22e
Compare
2 participants
Made-with: Cursor
Linked Issues
Closes #79
Linear: POLY-56 (e.g., POLY-123)
Summary
Briefly explain the change and why.
How to Test
Steps to verify locally:
npm run lintnpm run typechecknpm testnpm run dev:backend(in terminal A)npm run dev(in terminal B)Checklist
npm run lint)devScreenshots / Demos
(if UI or visible behavior - attach images, videos, or GIFs)
Summary by CodeRabbit
Release Notes