feat(leaderboard): prioritize preferred languages in dropdown

Update sortedLanguagesForDropdown to display the user's preferred
languages first, followed by all other languages sorted by track
position. This improves user experience by highlighting relevant
languages based on user preferences. Inject PreferredLanguageLeaderboardService
to access preferred language slugs for this ordering.

Author: rohitpaulk

app/components/leaderboard-page/header.ts

@@ -4,6 +4,7 @@ import { inject as service } from '@ember/service';
 import type LanguageModel from 'codecrafters-frontend/models/language';
 import type RouterService from '@ember/routing/router-service';
 import type Store from '@ember-data/store';
+import type PreferredLanguageLeaderboardService from 'codecrafters-frontend/services/preferred-language-leaderboard';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -14,14 +15,24 @@ interface Signature {
 }
 
 export default class LeaderboardPageHeader extends Component<Signature> {
+  @service declare preferredLanguageLeaderboard: PreferredLanguageLeaderboardService;
   @service declare router: RouterService;
   @service declare store: Store;
 
   get sortedLanguagesForDropdown(): LanguageModel[] {
-    return this.store
-      .peekAll('language')
-      .sortBy('sortPositionForTrack')
-      .filter((language) => language.liveOrBetaStagesCount > 0);
+    const allLanguages = this.store.peekAll('language');
+    const preferredLanguageSlugs = this.preferredLanguageLeaderboard.preferredLanguageSlugs;
+
+    return [
+      // First show the user's preferred languages
+      ...preferredLanguageSlugs.map((slug) => allLanguages.find((language) => language.slug === slug)).filter(Boolean),
+
+      // Next, show all languages alphabetically
+      ...allLanguages
+        .sortBy('sortPositionForTrack')
+        .reject((language) => preferredLanguageSlugs.includes(language.slug))
+        .filter((language) => language.liveOrBetaStagesCount > 0),
+    ];
   }
 
   @action