Skip to content

feat: implement LMS chapters list including filtering and sticky header#9

Open
Gowreesh-A-M wants to merge 2 commits intomainfrom
feat/lms-study-chapters-list
Open

feat: implement LMS chapters list including filtering and sticky header#9
Gowreesh-A-M wants to merge 2 commits intomainfrom
feat/lms-study-chapters-list

Conversation

@Gowreesh-A-M
Copy link
Collaborator

  • Created ChaptersListPage with filtering logic
  • Implemented CurriculumHeader with sticky behavior
  • Created ChapterCurriculumItem and LessonListItem with premium visual styling
  • Integrated courseDetailProvider and allCourseLessonsProvider for curriculum data
  • Updated app_router.dart and StudyScreen for seamless navigation
  • Added localized strings and generated assets

- Created ChaptersListPage with filtering logic
- Implemented CurriculumHeader with sticky behavior
- Created ChapterCurriculumItem and LessonListItem with premium visual styling
- Integrated courseDetailProvider and allCourseLessonsProvider for curriculum data
- Updated app_router.dart and StudyScreen for seamless navigation
- Added localized strings and generated assets
@gemini-code-assist
Copy link

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the LMS study experience by introducing a structured curriculum view. Users can now navigate through course chapters and lessons hierarchically, filter content by type, and benefit from a persistent sticky header for improved navigation. This change provides a more organized and user-friendly way to interact with complex course materials.

Highlights

  • New Chapters List Page: Implemented a dedicated ChaptersListPage to provide a hierarchical view of course content, including filtering capabilities.
  • Sticky Header and Filtering: Introduced a CurriculumHeader with sticky behavior for course title and back navigation, and a ChaptersFilterTabBar for content type filtering (e.g., Videos, PDFs).
  • Curriculum Item Widgets: Created ChapterCurriculumItem and LessonListItem widgets with premium visual styling to display chapters and lessons, including progress indicators.
  • Data Providers Integration: Integrated courseDetailProvider to fetch comprehensive course data with nested chapters and lessons, and allCourseLessonsProvider for flattened lesson lists used in filtering.
  • Routing and Localization: Updated app_router.dart for seamless navigation to the new chapters page and added new localized strings across multiple languages for curriculum-related UI elements.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • app/pubspec.lock
    • Updated characters package from 1.4.0 to 1.4.1.
    • Updated matcher package from 0.12.17 to 0.12.18.
    • Updated material_color_utilities package from 0.11.1 to 0.13.0.
    • Updated test_api package from 0.7.7 to 0.7.9.
  • openspec/changes/lms-study-chapters-list/.openspec.yaml
    • Added new OpenSpec YAML file for LMS study chapters list.
  • openspec/changes/lms-study-chapters-list/design.md
    • Added design document outlining context, goals, non-goals, decisions (unified filtered view, state-based tab filtering, subject-specific theme injection, router integration), and risks/trade-offs for the ChaptersListPage.
  • openspec/changes/lms-study-chapters-list/proposal.md
    • Added proposal document detailing the rationale, changes, new/modified capabilities, and impact of introducing the ChaptersListPage.
  • openspec/changes/lms-study-chapters-list/specs/lms-navigation-shell/spec.md
    • Modified navigation shell requirements to support sub-routing within tabs and navigation to curriculum with course ID.
  • openspec/changes/lms-study-chapters-list/specs/lms-study-chapters-list/spec.md
    • Added new requirements for ChaptersListPage, including course curriculum hierarchy, content type tabs, lesson status indicators, back navigation, and sticky header.
  • openspec/changes/lms-study-chapters-list/tasks.md
    • Added a task list for the implementation, covering data layer, UI components, routing, and polish/verification.
  • packages/core/lib/generated/l10n/app_localizations.dart
    • Updated filter strings to plural forms (e.g., 'Video' to 'Videos').
    • Added new localization keys for curriculum-related UI elements like back button, chapter count, 'All' filter, lesson/assessment labels, chapter metadata, and status labels.
  • packages/core/lib/generated/l10n/app_localizations_ar.dart
    • Added new Arabic localization strings for curriculum-related UI elements.
  • packages/core/lib/generated/l10n/app_localizations_en.dart
    • Updated filter strings to plural forms (e.g., 'Video' to 'Videos').
    • Added new English localization strings for curriculum-related UI elements.
  • packages/core/lib/generated/l10n/app_localizations_ml.dart
    • Added new Malayalam localization strings for curriculum-related UI elements.
  • packages/core/lib/l10n/app_en.arb
    • Updated filter strings to plural forms.
    • Added new English ARB entries for curriculum-related UI elements and their placeholders.
  • packages/courses/lib/courses.dart
    • Exported new screens and widgets: ChaptersListPage, ChaptersFilterTabBar, ChapterCurriculumItem, CurriculumHeader, LessonStatusBadge, LessonListItem.
    • Exported courseDetailProvider.
  • packages/courses/lib/providers/course_detail_provider.dart
    • Added courseDetailProvider to fetch course details with nested chapters and lessons.
    • Added allCourseLessonsProvider to flatten all lessons for a course into a single list for filtering.
  • packages/courses/lib/providers/course_detail_provider.g.dart
    • Generated Riverpod code for courseDetailProvider and allCourseLessonsProvider.
  • packages/courses/lib/screens/chapters_list_page.dart
    • Added ChaptersListPage to display course curriculum, including filtering logic and integration with CurriculumHeader and ChaptersFilterTabBar.
  • packages/courses/lib/screens/study_screen.dart
    • Modified CourseCard to navigate to the new ChaptersListPage when tapped.
  • packages/courses/lib/widgets/chapter_curriculum_item.dart
    • Added ChapterCurriculumItem widget to display individual chapters with title, metadata, and an icon.
  • packages/courses/lib/widgets/chapters_filter_tab_bar.dart
    • Added ChaptersFilterTabBar widget for content type filtering with pill-style tabs.
  • packages/courses/lib/widgets/course_card.dart
    • Modified CourseCard to include an onTap callback.
    • Updated typography from AppText.cardTitle to AppText.label and AppText.cardSubtitle to AppText.caption.
  • packages/courses/lib/widgets/curriculum_header.dart
    • Added CurriculumHeader widget for the sticky header, displaying a back button, course title, and chapter count.
  • packages/courses/lib/widgets/lesson_list_item.dart
    • Added LessonListItem widget to display individual lessons with type icon, title, chapter title, duration, and status badge.
  • packages/courses/lib/widgets/lesson_status_badge.dart
    • Added LessonStatusBadge widget to display lesson progress status (Completed, In Progress) using design tokens, removing 'locked' status for paid users.
  • packages/data/lib/models/chapter_dto.dart
    • Added a copyWith method to ChapterDto for immutability.
  • packages/data/lib/models/lesson_dto.dart
    • Added chapterTitle field to LessonDto.
    • Implemented copyWith, fromJson, and toJson methods for the new chapterTitle field in LessonDto.
  • packages/data/lib/providers/course_list_provider.dart
    • Imported ChapterDto and LessonDto.
    • Added courseChapters provider to fetch chapters for a specific course.
    • Added chapterLessons provider to fetch lessons for a specific chapter.
  • packages/data/lib/providers/course_list_provider.g.dart
    • Generated Riverpod code for courseChaptersProvider and chapterLessonsProvider.
  • packages/data/lib/providers/initialization_provider.g.dart
    • Updated the generated hash for appInitializationHash.
  • packages/data/pubspec.lock
    • Updated characters package from 1.4.0 to 1.4.1.
    • Updated matcher package from 0.12.17 to 0.12.18.
    • Updated material_color_utilities package from 0.11.1 to 0.13.0.
    • Updated test_api package from 0.7.7 to 0.7.9.
  • packages/testpress/lib/navigation/app_router.dart
    • Added a new GoRoute for /study/course/:courseId/chapters to navigate to the ChaptersListPage.
Activity
  • Gowreesh-A-M created ChaptersListPage with filtering logic.
  • Gowreesh-A-M implemented CurriculumHeader with sticky behavior.
  • Gowreesh-A-M created ChapterCurriculumItem and LessonListItem with premium visual styling.
  • Gowreesh-A-M integrated courseDetailProvider and allCourseLessonsProvider for curriculum data.
  • Gowreesh-A-M updated app_router.dart and StudyScreen for seamless navigation.
  • Gowreesh-A-M added localized strings and generated assets.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a new chapters list page with filtering, which is a great addition. My review focuses on improving the provider implementation for better performance and error handling, increasing the robustness of the filtering logic, completing the navigation flow, and addressing some minor maintainability and internationalization issues. The most significant suggestion involves refactoring the courseDetailProvider to be asynchronous, which will require updates to its consumers but will result in a more correct and performant data layer.

final l10n = L10n.of(context);

// Consistent blue for course/chapter icons as per reference
final iconTheme = design.study.pdf; // Blue theme (EFF6FF / 2563EB)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The iconTheme is hardcoded to use design.study.pdf. While the comment explains this is to get a consistent blue color, it creates a "magic link" between chapters and the PDF lesson type theme. This can be confusing for future developers and less maintainable if the PDF theme changes.

For better clarity and maintainability, consider defining a specific theme for chapters within DesignStudyTheme (e.g., design.study.chapter) or using a more generic theme if available.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant