dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Collapse lesson timelines by default for cleaner UX

Browse Source 
Changed timeline accordion behavior to keep all lesson chapters collapsed on page load. This prevents overwhelming users with too much content when viewing bootcamp curriculum previews.

## Before:
- All lesson timelines expanded by default
- 3 lessons × 8 chapters = 24+ items visible (~1500px+ scroll)
- Overwhelming visual clutter on product detail pages

## After:
- All timelines collapsed by default
- Shows "N timeline items" hint for each lesson
- Users can expand individual lessons they're interested in
- Cleaner, more professional appearance
- Better for conversion - product details remain prominent

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-01-04 16:05:20 +07:00
parent aeeb02d36b
commit e79e982401
1 changed files with 3 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/ProductDetail.tsx
View File

@@ -140,12 +140,8 @@ export default function ProductDetail() {
setExpandedModules(new Set([sorted[0].id])); setExpandedModules(new Set([sorted[0].id]));
} }
// Expand all lessons with chapters by default // Keep all lesson timelines collapsed by default for cleaner UX
const lessonsWithChapters = sorted setExpandedLessonChapters(new Set());
.flatMap(m => m.lessons)
.filter(l => l.chapters && l.chapters.length > 0)
.map(l => l.id);
setExpandedLessonChapters(new Set(lessonsWithChapters));
} }
}; };
@@ -448,7 +444,7 @@ export default function ProductDetail() {
open={expandedLessonChapters.has(lesson.id)} open={expandedLessonChapters.has(lesson.id)}
onOpenChange={() => toggleLessonChapters(lesson.id)} onOpenChange={() => toggleLessonChapters(lesson.id)}
> >
<CollapsibleTrigger className="flex items-center gap-2 ml-5 py-1 px-2 text-xs text-muted-foreground hover:bg-accent rounded transition-colors w-full"> <CollapsibleTrigger className="flex items-center gap-2 ml-5 mb-2 py-1 px-2 text-xs bg-muted text-muted-foreground hover:bg-accent rounded transition-colors w-full">
<Clock className="w-3 h-3" /> <Clock className="w-3 h-3" />
<span className="flex-1 text-left"> <span className="flex-1 text-left">
{lesson.chapters.length} timeline item{lesson.chapters.length > 1 ? 's' : ''} {lesson.chapters.length} timeline item{lesson.chapters.length > 1 ? 's' : ''}