Changes:
1. Added clear (X) button in search bar
- Only appears when there's text
- Clears search query AND filters
- Clean X icon with hover effect
2. Fixed dropdown z-index
- Changed from z-index: 50 to z-index: 9999
- Now appears above all other UI elements
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Users can now:
1. Type a query and press Enter (without selecting a suggestion) to filter posts on the map
2. When picking a post suggestion, it navigates AND filters by that post's title
3. When picking a city/place, it navigates but clears the filter
Changes:
- SmartSearchBar: Added onSearch prop, triggers on Enter with no active item
- MapView: Added handleSearch() to set searchQuery for filtering
- Posts are automatically filtered by usePostsEngine's matchesSearch()
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1. Smart Search Integration (MapView.jsx, SmartSearchBar.jsx):
- Replace simple search bar with SmartSearchBar component
- Suggestions appear on focus (popular cities/regions)
- Suggestions update as user types (debounced 150ms)
- Click suggestion → fly to location with appropriate zoom
- Search triggers even with empty query for popular results
2. Navigation to Cities (MapView.jsx):
- New handlePickSuggestion() function
- Extracts coords from suggestion (supports coords array or lat/lon)
- Uses map.flyTo() with smart zoom levels per type:
* Cities: zoom 11
* Regions: zoom 7
* Posts: zoom 16
* Profiles: zoom 14
- Clears search after navigation
3. Fixed Marker Anchoring (markerManager.js):
- Changed anchor: "center" → "bottom"
- Markers now stay fixed at geographic position
- Pin design: circle image + triangular point (52px height)
- Point positioned at exact lat/lon location
- No more drifting when map moves!
4. Improved Pin Design:
- Circle (32px) with category color background
- White border + shadow for visibility
- Triangular point (16px) below circle
- Image inside circle if available
- Hover card positioned above pin (bottom: 58px)
- Smooth transitions on hover/click
Mobile-friendly: Works on cellphone without console, visual feedback
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes:
- Comment out early return when query is empty
- Allow recoSearch to be called with empty/trimmed query
- Backend returns popular cities/regions when query is empty
- Enables showing suggestions immediately on focus (UX improvement)
Backend test confirms it works:
$ curl "http://localhost:8081/api/suggestions?q="
Returns: 6 popular suggestions (Montreal, Quebec City, Toronto, etc.)
$ curl "http://localhost:8081/api/suggestions?q=to"
Returns: Toronto, Seattle, Boston
Now users will see suggestions as they type + popular items on focus
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement smart prioritization system to reduce map clutter:
- Create priority scoring based on reco score, category, freshness, distance, engagement
- Cluster nearby posts and show best post as full card, others as simple markers
- Simple markers: circular icons with category colors, hover preview, click to expand
- Max 15 full cards displayed, rest shown as compact markers
- Optimize search debounce: 220ms → 150ms for faster suggestions
New files:
- postPriority.js: Scoring and clustering algorithm
Updated:
- markerManager.js: Add createSimpleMarkerForPost() with hover cards
- usePostsEngine.js: Use prioritizePosts() to separate full cards vs simple markers
- SmartSearchBar.jsx: Faster debounce (150ms), increased limit to 12 suggestions
Result: Less visual clutter, better UX with prioritized content
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Your Name