Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 7, 2025

Adds ability to navigate between applications in the details modal using arrow keys and visual chevron buttons.

Changes

ApplicationDetailsModal

  • Keyboard navigation via arrow keys (← previous, → next) with event listener that respects input/textarea/contenteditable focus
  • Visual chevron buttons positioned absolutely on modal sides with backdrop blur
  • Position indicator badge showing "current / total" count
  • New props: onNavigateNext, onNavigatePrevious, canNavigateNext, canNavigatePrevious, currentIndex, totalCount

Home page

  • Track selectedApplicationIndex alongside selected application
  • Navigation handlers update both index and application state atomically
  • Post-vote behavior: auto-advance to next application (or previous if voting on last), close modal when list empty
  • Index validation after filtering voted application from array
<ApplicationDetailsModal
  application={selectedApplication}
  onNavigateNext={handleNavigateNext}
  onNavigatePrevious={handleNavigatePrevious}
  canNavigateNext={selectedApplicationIndex < applications.length - 1}
  canNavigatePrevious={selectedApplicationIndex > 0}
  currentIndex={selectedApplicationIndex}
  totalCount={applications.length}
/>

Navigation arrows conditionally render and disable at boundaries. Keyboard events preventDefault to avoid scroll interference.

Original prompt

Quiero que por favor agregues la posibilidad de con las teclas de flechas y una flecha a los lados de los modales poder cambiar entre postulaciones.


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI self-assigned this Dec 7, 2025
Co-authored-by: Im-Fran <30329003+Im-Fran@users.noreply.github.com>
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Dec 7, 2025

Deploying tomas-exdev-cl with  Cloudflare Pages  Cloudflare Pages

Latest commit: a8b9836
Status: ✅  Deploy successful!
Preview URL: https://b10ad986.tomas-exdev-cl.pages.dev
Branch Preview URL: https://copilot-add-keyboard-navigat.tomas-exdev-cl.pages.dev

View logs

Co-authored-by: Im-Fran <30329003+Im-Fran@users.noreply.github.com>
Copilot AI changed the title [WIP] Add keyboard navigation for applications in modals Add keyboard and visual navigation between applications in modal Dec 7, 2025
Copilot AI requested a review from Im-Fran December 7, 2025 14:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants