UX Refinements (WANK 4.0)
Media Browser — Chat Navigation
Before
Clicking a contact in the media browser’s left sidebar loaded their media files in the right panel. To return to the conversation, the user had to manually navigate back.
After
Clicking a contact now calls selectChat(chat) from the WhatsApp context then navigate('/'). The user lands directly in the conversation.
Key insight: The chat page reads the active chat from React context (WhatsAppContext.selectChat), not from a URL query parameter. The correct pattern is selectChat(chat) first, then navigate('/').
Avatar Lightbox Sizing
Problem
WhatsApp profile pictures are typically 96×96 to 200×200 pixels. The lightbox rendered them at natural size — appearing tiny in the center of a dark overlay.
Fix
Added min-w-[300px] min-h-[300px] to the lightbox <img> element in CrmPanel.tsx. Higher-resolution images still scale naturally up to max-w-full max-h-[80vh].
Photo Grid Button Visibility
Problem
The three hover action buttons on photo thumbnails used muted colors with semi-transparent backgrounds. Hard to see on busy thumbnails.
Fix
| Button | Default | Hover |
|---|---|---|
| Remove everywhere | Orange icon, dark bg | Solid orange bg, white icon |
| Download | Blue icon, dark bg | Solid blue bg, white icon |
| Delete | Red icon, dark bg | Solid red bg, white icon |
All buttons updated to: full-opacity icon colors, bg-black/80, larger icons (w-4 h-4), larger hit targets (p-1.5), drop-shadow-lg, and color-fill hover states.
Files Modified
| File | Changes |
|---|---|
frontend/src/pages/MediaBrowserPage.tsx |
Chat navigation on sidebar click, brighter hover buttons |
frontend/src/components/CrmPanel.tsx |
Avatar lightbox min-w-[300px] min-h-[300px] |