From e79e982401f420c63a14d78476c1612fd6a639f9 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Sun, 4 Jan 2026 16:05:20 +0700
Subject: [PATCH] Collapse lesson timelines by default for cleaner UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/pages/ProductDetail.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/pages/ProductDetail.tsx b/src/pages/ProductDetail.tsx
index ab0ac1d..ea958f4 100644
--- a/src/pages/ProductDetail.tsx
+++ b/src/pages/ProductDetail.tsx
@@ -140,12 +140,8 @@ export default function ProductDetail() {
         setExpandedModules(new Set([sorted[0].id]));
       }
 
-      // Expand all lessons with chapters by default
-      const lessonsWithChapters = sorted
-        .flatMap(m => m.lessons)
-        .filter(l => l.chapters && l.chapters.length > 0)
-        .map(l => l.id);
-      setExpandedLessonChapters(new Set(lessonsWithChapters));
+      // Keep all lesson timelines collapsed by default for cleaner UX
+      setExpandedLessonChapters(new Set());
     }
   };
 
@@ -448,7 +444,7 @@ export default function ProductDetail() {
                             open={expandedLessonChapters.has(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" />
                               <span className="flex-1 text-left">
                                 {lesson.chapters.length} timeline item{lesson.chapters.length > 1 ? 's' : ''}