feat: Improve lesson menu UX with scrolling and reversed flow

- Add scrolling support for long lesson lists (52+ items)
- Reverse menu flow: select lesson first, then duration
- Display current lesson name in typing session header
- Update menu instructions to reflect new flow
- Add scroll position indicator when list exceeds viewport

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

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

Author: jrollin

src/app.rs

@@ -30,6 +30,7 @@ pub struct App {
     stats: Stats,
     selected_lesson: usize,
     lessons: Vec<Lesson>,
+    lesson_scroll_offset: usize,
     selected_duration: usize,
     selected_duration_value: crate::engine::SessionDuration,
     keyboard_visible: bool,
@@ -147,11 +148,12 @@ impl App {
 
         Ok(Self {
             session: None,
-            state: AppState::DurationMenu,
+            state: AppState::LessonMenu,  // Start with lesson selection
             storage,
             stats,
             selected_lesson: 0,
             lessons,
+            lesson_scroll_offset: 0,
             selected_duration: 2, // Default to 5 minutes (index 2)
             selected_duration_value: crate::engine::SessionDuration::FiveMinutes,
             keyboard_visible: true, // Default visible
@@ -212,12 +214,12 @@ impl App {
         loop {
             // Render
             terminal.draw(|f| match self.state {
+                AppState::LessonMenu => {
+                    ui::render_menu(f, &self.lessons, self.selected_lesson, self.lesson_scroll_offset);
+                }
                 AppState::DurationMenu => {
                     ui::render_duration_menu(f, self.selected_duration);
                 }
-                AppState::LessonMenu => {
-                    ui::render_menu(f, &self.lessons, self.selected_lesson);
-                }
                 AppState::Running | AppState::Completed => {
                     if let Some(session) = &self.session {
                         let result = calculate_results(session);
@@ -231,6 +233,7 @@ impl App {
                                 result.error_count,
                             );
                         } else {
+                            let lesson_name = &self.lessons[self.selected_lesson].title;
                             ui::render(
                                 f,
                                 session,
@@ -240,6 +243,7 @@ impl App {
                                 &self.keyboard_layout,
                                 &self.stats.adaptive_analytics,
                                 &self.keyboard_config,
+                                lesson_name,
                             );
                         }
                     }
@@ -292,63 +296,75 @@ impl App {
         }
 
         match self.state {
-            AppState::DurationMenu => match key.code {
+            AppState::LessonMenu => match key.code {
                 KeyCode::Esc | KeyCode::Char('q') => {
+                    // Quit from first menu
                     self.state = AppState::Quit;
                 }
                 KeyCode::Up | KeyCode::Char('k') => {
-                    if self.selected_duration > 0 {
-                        self.selected_duration -= 1;
+                    if self.selected_lesson > 0 {
+                        self.selected_lesson -= 1;
+                        // Scroll up if selection goes above viewport
+                        if self.selected_lesson < self.lesson_scroll_offset {
+                            self.lesson_scroll_offset = self.selected_lesson;
+                        }
                     }
                 }
                 KeyCode::Down | KeyCode::Char('j') => {
-                    let max_idx = crate::engine::SessionDuration::all().len() - 1;
-                    if self.selected_duration < max_idx {
-                        self.selected_duration += 1;
+                    if self.selected_lesson < self.lessons.len() - 1 {
+                        self.selected_lesson += 1;
+                        // Scroll down if selection goes below viewport (using conservative estimate of 20)
+                        let viewport_height = 20;
+                        if self.selected_lesson >= self.lesson_scroll_offset + viewport_height {
+                            self.lesson_scroll_offset = self.selected_lesson - viewport_height + 1;
+                        }
                     }
                 }
                 KeyCode::Enter | KeyCode::Char(' ') => {
-                    // Save selected duration and move to lesson menu
-                    self.selected_duration_value =
-                        crate::engine::SessionDuration::all()[self.selected_duration];
-                    self.state = AppState::LessonMenu;
+                    // Go to duration menu after lesson selected
+                    self.state = AppState::DurationMenu;
+                }
+                KeyCode::Char(c) if c.is_ascii_digit() => {
+                    // Allow direct selection with numbers
+                    if let Some(digit) = c.to_digit(10) {
+                        let index = (digit as usize).saturating_sub(1);
+                        if index < self.lessons.len() {
+                            self.selected_lesson = index;
+                            // Go to duration menu after lesson selected
+                            self.state = AppState::DurationMenu;
+                        }
+                    }
                 }
                 _ => {}
             },
-            AppState::LessonMenu => match key.code {
+            AppState::DurationMenu => match key.code {
                 KeyCode::Esc | KeyCode::Char('q') => {
-                    // Go back to duration menu
-                    self.state = AppState::DurationMenu;
+                    // Go back to lesson menu
+                    self.state = AppState::LessonMenu;
                 }
                 KeyCode::Up | KeyCode::Char('k') => {
-                    if self.selected_lesson > 0 {
-                        self.selected_lesson -= 1;
+                    if self.selected_duration > 0 {
+                        self.selected_duration -= 1;
                     }
                 }
                 KeyCode::Down | KeyCode::Char('j') => {
-                    if self.selected_lesson < self.lessons.len() - 1 {
-                        self.selected_lesson += 1;
+                    let max_idx = crate::engine::SessionDuration::all().len() - 1;
+                    if self.selected_duration < max_idx {
+                        self.selected_duration += 1;
                     }
                 }
                 KeyCode::Enter | KeyCode::Char(' ') => {
+                    // Save selected duration and start lesson
+                    self.selected_duration_value =
+                        crate::engine::SessionDuration::all()[self.selected_duration];
                     self.start_lesson(self.selected_lesson);
                 }
-                KeyCode::Char(c) if c.is_ascii_digit() => {
-                    // Allow direct selection with numbers 1-6
-                    if let Some(digit) = c.to_digit(10) {
-                        let index = (digit as usize).saturating_sub(1);
-                        if index < self.lessons.len() {
-                            self.selected_lesson = index;
-                            self.start_lesson(index);
-                        }
-                    }
-                }
                 _ => {}
             },
             AppState::Running => match key.code {
                 KeyCode::Esc => {
-                    // Return to duration menu (discard session)
-                    self.state = AppState::DurationMenu;
+                    // Return to lesson menu (discard session)
+                    self.state = AppState::LessonMenu;
                     self.session = None;
                 }
                 KeyCode::Tab => {
@@ -383,13 +399,13 @@ impl App {
             AppState::Completed => {
                 match key.code {
                     KeyCode::Char('q') | KeyCode::Esc => {
-                        // Return to duration menu
-                        self.state = AppState::DurationMenu;
+                        // Return to lesson menu
+                        self.state = AppState::LessonMenu;
                         self.session = None;
                     }
                     KeyCode::Char('r') => {
-                        // Restart same lesson with same duration
-                        self.start_lesson(self.selected_lesson);
+                        // Re-select duration for restart
+                        self.state = AppState::DurationMenu;
                     }
                     _ => {}
                 }

src/ui/render.rs

@@ -174,6 +174,7 @@ pub fn render(
     keyboard_layout: &AzertyLayout,
     analytics: &Option<AdaptiveAnalytics>,
     keyboard_config: &KeyboardConfig,
+    lesson_name: &str,
 ) {
     let terminal_height = f.area().height;
 
@@ -230,7 +231,7 @@ pub fn render(
     let mut chunk_idx = 0;
 
     // Header
-    render_header(f, chunks[chunk_idx]);
+    render_header(f, chunks[chunk_idx], lesson_name);
     chunk_idx += 1;
 
     // Stats (moved after header)
@@ -273,8 +274,9 @@ pub fn render(
 }
 
 /// Rendu du header
-fn render_header(f: &mut Frame, area: Rect) {
-    let title = Paragraph::new("TYPER CLI - Home Row Practice")
+fn render_header(f: &mut Frame, area: Rect, lesson_name: &str) {
+    let title_text = format!("TYPER CLI - {}", lesson_name);
+    let title = Paragraph::new(title_text)
         .style(
             Style::default()
                 .fg(Color::Cyan)
@@ -407,7 +409,12 @@ fn render_instructions(f: &mut Frame, area: Rect) {
 }
 
 /// Rendu du menu de sélection de leçon
-pub fn render_menu(f: &mut Frame, lessons: &[Lesson], selected: usize) {
+pub fn render_menu(
+    f: &mut Frame,
+    lessons: &[Lesson],
+    selected: usize,
+    scroll_offset: usize,
+) {
     let chunks = Layout::default()
         .direction(Direction::Vertical)
         .margin(2)
@@ -429,11 +436,14 @@ pub fn render_menu(f: &mut Frame, lessons: &[Lesson], selected: usize) {
         .block(Block::default().borders(Borders::ALL));
     f.render_widget(header, chunks[0]);
 
-    // Menu items with category separators
-    let mut items: Vec<ListItem> = Vec::new();
+    // Calculate visible area height (minus borders and padding)
+    let menu_area_height = chunks[1].height.saturating_sub(2) as usize;
+
+    // Build complete items list with category separators
+    let mut all_items: Vec<ListItem> = Vec::new();
 
     // PRIMARY section header
-    items.push(ListItem::new(Line::from(Span::styled(
+    all_items.push(ListItem::new(Line::from(Span::styled(
         "━━━ PRIMARY - Key Training ━━━",
         Style::default()
             .fg(Color::Cyan)
@@ -444,8 +454,8 @@ pub fn render_menu(f: &mut Frame, lessons: &[Lesson], selected: usize) {
     for (i, lesson) in lessons.iter().enumerate() {
         // Add SECONDARY separator before lesson 25 (0-indexed: 24)
         if i == 25 {
-            items.push(ListItem::new(Line::from("")));
-            items.push(ListItem::new(Line::from(Span::styled(
+            all_items.push(ListItem::new(Line::from("")));
+            all_items.push(ListItem::new(Line::from(Span::styled(
                 "━━━ SECONDARY - Programming & Languages ━━━",
                 Style::default()
                     .fg(Color::Cyan)
@@ -460,8 +470,8 @@ pub fn render_menu(f: &mut Frame, lessons: &[Lesson], selected: usize) {
                 crate::content::lesson::LessonType::Adaptive
             )
         {
-            items.push(ListItem::new(Line::from("")));
-            items.push(ListItem::new(Line::from(Span::styled(
+            all_items.push(ListItem::new(Line::from("")));
+            all_items.push(ListItem::new(Line::from(Span::styled(
                 "━━━ ADAPTIVE ━━━",
                 Style::default()
                     .fg(Color::Cyan)
@@ -480,12 +490,31 @@ pub fn render_menu(f: &mut Frame, lessons: &[Lesson], selected: usize) {
         let prefix = if i == selected { "▶ " } else { "  " };
         let content = format!("{}{}. {}", prefix, i + 1, lesson.title);
 
-        items.push(ListItem::new(Line::from(Span::styled(content, style))));
+        all_items.push(ListItem::new(Line::from(Span::styled(content, style))));
     }
 
-    let list = List::new(items).block(
+    // Calculate visible slice based on scroll offset
+    let total_items = all_items.len();
+    let visible_start = scroll_offset.min(total_items.saturating_sub(1));
+    let visible_end = (visible_start + menu_area_height).min(total_items);
+    let visible_items: Vec<ListItem> = all_items
+        .into_iter()
+        .skip(visible_start)
+        .take(visible_end - visible_start)
+        .collect();
+
+    // Add scroll indicator to title
+    let scroll_indicator = if total_items > menu_area_height {
+        format!(" (showing {}-{} of {})", visible_start + 1, visible_end, total_items)
+    } else {
+        String::new()
+    };
+
+    let title = format!("Typing Lessons{}", scroll_indicator);
+
+    let list = List::new(visible_items).block(
         Block::default()
-            .title("Typing Lessons")
+            .title(title)
             .borders(Borders::ALL),
     );
 
@@ -495,7 +524,7 @@ pub fn render_menu(f: &mut Frame, lessons: &[Lesson], selected: usize) {
     let instructions = vec![
         Line::from(""),
         Line::from(Span::styled(
-            "Use ↑/↓ or j/k to navigate  •  Press Enter/Space or 1-6 to start  •  ESC to quit",
+            "Use ↑/↓ or j/k to navigate  •  Press Enter/Space or 1-6 to select  •  ESC to quit",
             Style::default().fg(Color::Gray),
         )),
     ];
@@ -560,7 +589,7 @@ pub fn render_duration_menu(f: &mut Frame, selected: usize) {
     let instructions = vec![
         Line::from(""),
         Line::from(Span::styled(
-            "Use ↑/↓ or j/k to navigate  •  Press Enter/Space to continue  •  ESC to quit",
+            "Use ↑/↓ or j/k to navigate  •  Press Enter/Space to start  •  ESC to go back",
             Style::default().fg(Color::Gray),
         )),
     ];