[FE] MobileNav: add wallet status indicator and missing Profile/Payments links

[gregemax]

Summary

app/(dashboard)/components/MobileNav.tsx (10 KB) renders the hamburger navigation for mobile viewports. It is missing two links and has no wallet connection status indicator.

What's needed

1. Add missing nav links:

   • Profile → /profile (once issue [FE] Build User Profile page — display and edit name, bio, Stellar public key #95 is implemented — can add with a placeholder until then)
   • Payments is present but should show the user's pending payout total as a badge (fetched from issue [BE] Add GET /payments/earnings — freelancer aggregate earnings dashboard #88)

2. Wallet status indicator:

   • Show a small green dot when Freighter is connected (uses useStellarWallet hook)
   • Show a "Connect Wallet" CTA in the nav when not connected
   • Tapping it opens the Freighter connect flow

3. Accessibility:

   • Ensure the mobile drawer traps focus when open
   • aria-expanded on the hamburger button

Acceptance criteria

• Profile link visible in mobile nav
• Wallet connection state reflected in nav
• Focus trap in open drawer
• No console warnings on nav interactions

Difficulty

Good first issue — MobileNav.tsx is self-contained and well-structured.

Related

• Issue [FE] Build User Profile page — display and edit name, bio, Stellar public key #95 — profile page
• Issue [FE] Persist Freighter wallet connection across page navigations using Zustand persist middleware #94 — wallet store persistence
• hooks/useStellarWallet.ts