fix(#562): add active state indicator to BottomNav

[dark-sarge]

PR: Active State Indicator for BottomNav — Fix #562

Summary

Fixes #562. The BottomNav component previously rendered navigation icons with no visual distinction for the current route. Users had no way to tell which section they were in. This PR adds a clear active state with proper accessibility attributes and smooth animated indicators.

Changes

File modified: frontend/src/components/ui/BottomNav.tsx

What changed

• aria-current="page" — applied to the active <Link> so screen readers and assistive technologies correctly identify the current page within the navigation landmark.

• Top-border pill — a bg-primary bar (h-0.5 w-8) is rendered at the top edge of the active item using Framer Motion's layoutId="activeBar". This slides smoothly between items as the route changes without unmounting/remounting.

• Background highlight pill — a bg-primary/10 rounded rectangle fills the active item area using layoutId="activeBg", providing a tinted background behind the icon and label for clear visual grouping.

• Filled icon + primary text — the active icon receives fill-primary and the label receives text-primary (retained from previous implementation, now working in conjunction with the new indicators).

• Reduced motion support — when prefers-reduced-motion is set, layoutId is set to undefined so Framer Motion skips the shared-element animation. Transitions use duration: 0.

• Fixed layoutId re-mount bug — the old implementation conditionally rendered a dot inside each item, which caused the element to unmount and remount on every route change, defeating Framer Motion's layoutId shared-element tracking. The new approach renders indicators only on the active item with stable layoutId values so the animation correctly interpolates position between items.

Route switching behaviour

usePathname() from next/navigation triggers a re-render of only the nav component on route change — no full page re-render. The layoutId mechanism animates the indicator's position via layout animation rather than opacity toggling.

Acceptance Criteria

Criterion	Status
Active item has aria-current="page"	✅
Visual indicator differentiates active item	✅ Top-border bar + background pill + filled icon + primary text
Switching routes updates indicator without full nav re-render	✅ usePathname() + Framer Motion layoutId

Testing

1. Open the app on a mobile viewport (or toggle DevTools mobile emulation).
2. Navigate between Home, Play, Tournaments, Leaderboard, and Profile.
3. Confirm the top-border bar and background pill slide to the new active item.
4. Inspect the active <a> element — it should have aria-current="page".
5. Enable prefers-reduced-motion in OS/browser settings and confirm indicators snap instantly with no animation.

Notes

• No new dependencies introduced.
• No changes to routing, layout, or other components.
• The Leaderboard item still uses the Trophy icon (same as Tournaments) — a separate icon swap can be tracked in a follow-up issue.

[vercel]

@dark-sarge is attempting to deploy a commit to the paul joseph's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@dark-sarge Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits