Course selection list and side panel

[rtibbles]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Create the course selection side panel with a paginated list of available courses that allows coaches to select a single course.

Design Reference

See parent product issue for screenshot showing course selection side panel with flat course list and "Course" pills.

Implementation

1. Side Panel Component

Reuse existing:

• Side panel shell/layout from lessons/quiz selection
• Side panel routing patterns
• Focus trapping and keyboard navigation

New code needed:

• Course-specific content and layout

2. Course List Display

Display paginated list of all available courses using ContentNodeResource:

ContentNodeResource.fetchCollection({
  getParams: { 
    modality: 'COURSE',
    max_results: 25  // Enable pagination
  }
})

• Display each course using existing folder/topic display component (courses are a special kind of folder)
• Add "Course" pill/badge to each course item
• Implement pagination (load more / infinite scroll)
• Single-select interaction (radio buttons or similar)

Reuse existing:

• Folder/topic display components
• Badge/pill components
• List rendering components
• Pagination patterns
• Selection state management patterns

New code needed:

• Adding "Course" badge to folder display
• Minimal wiring code

3. Continue Action

• "Continue" button proceeds to assignment step (implemented in separate issue)
• Validate that selected course hasn't already been assigned to this classroom

Reuse existing:

• Continue button component and patterns
• Side panel navigation/routing

Constraints

Per product requirements:

• Keep this issue focused on list display and selection only
• Reuse folder display for courses with added "Course" badge

References

• Quiz selection panel: kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/sidePanels/QuizResourceSelection/
• Side panel patterns: Existing Coach side panel components
• ContentNodeResource: packages/kolibri-common/apiResources/ContentNodeResource.js
• Pagination: Uses max_results param (see OptionalPagination in kolibri/core/content/api.py)