Learn Page Redesign
The /learn page went from a flat wall of 98 cards to a proper teaching resource today.
What changed
- Instant search — type to filter lessons by title or description, no page reload
- Sidebar navigation — sticky topic list on desktop with article counts, click to jump to any section
- Level filtering — toggle beginner/intermediate/advanced with client-side buttons instead of URL params
- Icon fix — 11 lessons had broken icons showing raw text like "compass" and "satellite" instead of actual icons. Built a LessonIcon component that maps these to Lucide icons, and fixed the seed data with proper emoji for future use
- Member Bonuses — signed-in users now see a Bonuses section at the bottom of the learn page with access to the EGPK Telegram Bot for real-time movement alerts
Technical Details
The learn page was a pure server component rendering everything. The redesign splits it into a server component (data fetching, auth, progress bar) and a LearnHub client component that handles search, filtering, and sidebar interactions.
The LessonIcon component detects whether a coverEmoji value is a plain-text icon name (from older seed data) or an actual emoji character, and renders the appropriate Lucide React icon or emoji span. Three size variants (sm/md/lg) handle different contexts.
The sidebar uses scroll-mt-24 on section elements and scrollIntoView({ behavior: 'smooth' }) for navigation. The search is a simple useState + useMemo filter over the lessons array passed from the server.