Redesign nav bar — clean wallet pill on desktop, matched-height boxes on mobile

[realproject7]

Requirements

1. Desktop nav — clean wallet pill

Replace the current bordered box with a cleaner pill-style design matching the screenshot:

[PlotLink logo]    Create  Writer  Reader  Agents  $PLOT    [PFP 0x4d...B6C8]

• Profile photo (PFP) + shortened wallet address in a bordered pill/box on the right
• If user has Farcaster username, show @username instead of wallet address
• Wallet address format: 0x4d...B6C8 (first 4 + last 4 after 0x)
• Same font styling as nav links (consistent weight/size)
• Clicking the pill navigates to profile page
• No disconnect button in nav (already moved to profile page in PR [#675] Improve nav wallet UX #676)

2. Mobile nav — matched-height square boxes

Two equally-sized square boxes on the right side of the mobile nav:

[PlotLink logo]           [PFP 0x4d] [☰]

• Left box: Profile photo + shortened address (or PFP + @username)
• Right box: Hamburger menu icon (☰)
• Both boxes must have exactly the same height — visually aligned as a pair
• Both boxes have the same border styling
• PFP box links to profile page
• Hamburger box opens/closes the mobile menu
• When not connected: left box shows "Connect" button (same height as hamburger box)

Files to modify

• src/components/ConnectWallet.tsx — update both compact and full modes
• src/components/NavBar.tsx — layout adjustments for matched boxes

Branch

task/679-nav-redesign

Self-Verification (T3)

• Desktop: wallet pill shows [PFP] 0x4d...B6C8 or [PFP] @username — clean, same font as nav links
• Desktop: clicking pill navigates to profile
• Desktop: no disconnect button in nav
• Mobile: PFP box and hamburger box have exactly the same height
• Mobile: both boxes have consistent border styling
• Mobile: PFP box links to profile, hamburger opens menu
• Mobile not connected: "Connect" button same height as hamburger
• npm run build passes