📝 Description
The navbar search icon at Navbar.jsx:153 is a <Link to="/search/users"> that navigates to the full-page UserSearchPage. The map unmounts, the new page paints bg-background.
The notification button right next to it already uses the popover-from-navbar pattern (NotificationDropdown). User search should follow the same pattern on desktop so the map stays visible and the two icons feel consistent.
Scope:
- Extract
UserSearchPage's body (input + results list + pagination + states) into a reusable <UserSearchPanel> component.
- New
UserSearchDropdown mirrors NotificationDropdown: absolute popover anchored under the navbar icon, outside-click + Escape to close.
- Desktop (
sm: and up): navbar icon toggles the dropdown.
- Mobile: keep the existing
<Link to="/search/users"> so the panel takes the full screen , a popover would be cramped. (NotificationDropdown does the same fallback.)
- Keep the
/search/users route mounted with <UserSearchPanel> inside so direct URLs / shares still work.
Out of scope:
- Search algorithm / endpoint changes.
- i18n additions beyond what the existing UserSearchPage already covers.
📊 Type
Refactor / UX polish
✅ Acceptance Criteria
🧪 Test
- Desktop: click search → popover opens, map visible behind, type a query, click a result → lands on the profile
- Desktop: click outside / press Escape → popover closes
- Mobile (< sm): click search → routes to
/search/users as before
- Visit
/search/users directly → renders the same panel
⏱️ Review Time
~5 min
📝 Description
The navbar search icon at Navbar.jsx:153 is a
<Link to="/search/users">that navigates to the full-pageUserSearchPage. The map unmounts, the new page paintsbg-background.The notification button right next to it already uses the popover-from-navbar pattern (
NotificationDropdown). User search should follow the same pattern on desktop so the map stays visible and the two icons feel consistent.Scope:
UserSearchPage's body (input + results list + pagination + states) into a reusable<UserSearchPanel>component.UserSearchDropdownmirrorsNotificationDropdown: absolute popover anchored under the navbar icon, outside-click + Escape to close.sm:and up): navbar icon toggles the dropdown.<Link to="/search/users">so the panel takes the full screen , a popover would be cramped. (NotificationDropdowndoes the same fallback.)/search/usersroute mounted with<UserSearchPanel>inside so direct URLs / shares still work.Out of scope:
📊 Type
Refactor / UX polish
✅ Acceptance Criteria
/profile/<id>/search/users(full-page fallback)/search/usersURL keeps working for deep-links and renders the same panel🧪 Test
/search/usersas before/search/usersdirectly → renders the same panel⏱️ Review Time
~5 min