From 14cf2136e06e18687a47d4849822b3a610e021fd Mon Sep 17 00:00:00 2001
From: Ryan Gang <ryan-gg@outlook.com>
Date: Tue, 25 Feb 2025 19:30:36 +0530
Subject: [PATCH] feat(profile): limit language logos to 5 in course progress
 items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Display max 5 language logos per course progress item
- Prioritize completed languages first
- Sort by recency (completed or last submission date)
- Show recent incomplete languages if fewer than 5 completed ones

🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../course-progress-list-item/index.hbs       |  2 +-
 .../course-progress-list-item/index.js        | 25 +++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/components/user-page/course-progress-list-item/index.hbs b/app/components/user-page/course-progress-list-item/index.hbs
index e58bdc186e..a3fa29f944 100644
--- a/app/components/user-page/course-progress-list-item/index.hbs
+++ b/app/components/user-page/course-progress-list-item/index.hbs
@@ -45,7 +45,7 @@
     {{/if}}
 
     <div class="flex items-center space-x-1.5">
-      {{#each @courseParticipations as |courseParticipation|}}
+      {{#each this.languagesToDisplay as |courseParticipation|}}
         {{#if courseParticipation.isCompleted}}
           <LanguageLogo @language={{courseParticipation.language}} @variant="teal" class="h-4" />
         {{else}}
diff --git a/app/components/user-page/course-progress-list-item/index.js b/app/components/user-page/course-progress-list-item/index.js
index 740c7bcf3a..0e1fc0d1ce 100644
--- a/app/components/user-page/course-progress-list-item/index.js
+++ b/app/components/user-page/course-progress-list-item/index.js
@@ -3,6 +3,8 @@ import arrayToSentence from 'array-to-sentence';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
+const MAX_LANGUAGES_TO_DISPLAY = 5;
+
 export default class CourseProgressListItemComponent extends Component {
   @service router;
 
@@ -34,6 +36,29 @@ export default class CourseProgressListItemComponent extends Component {
     }
   }
 
+  get languagesToDisplay() {
+    // First, get all completed course participations sorted by completion time (most recent first)
+    const completedParticipations = this.completedCourseParticipations.sort(
+      (a, b) => new Date(b.completedAt).getTime() - new Date(a.completedAt).getTime()
+    );
+    
+    // Next, get incomplete participations sorted by activity time (most recent first)
+    const incompleteParticipations = this.args.courseParticipations
+      .filter(p => !p.isCompleted)
+      .sort((a, b) => new Date(b.lastSubmissionAt).getTime() - new Date(a.lastSubmissionAt).getTime());
+    
+    // If we have 5 or fewer completed participations, show all of them
+    if (completedParticipations.length >= MAX_LANGUAGES_TO_DISPLAY) {
+      return completedParticipations.slice(0, MAX_LANGUAGES_TO_DISPLAY);
+    }
+    
+    // Otherwise, show all completed participations + recent incomplete ones (up to 5 total)
+    return [
+      ...completedParticipations,
+      ...incompleteParticipations.slice(0, MAX_LANGUAGES_TO_DISPLAY - completedParticipations.length)
+    ];
+  }
+
   @action
   navigateToCourse() {
     this.router.transitionTo('course-overview', this.course.slug);