feat(leaderboard): show accurate stage counts and add header explanations

Replace all uses of stagesCount with liveOrBetaStagesCount to reflect only
live or beta course stages. This improves accuracy of displayed stage numbers
across leaderboard and track cards.

Move stage count and score explanation tooltips into a dedicated header row
component for better structure and reusability.

Update header cells to display explanations for "Stages Completed" and "Score"
to clarify scoring and stage availability to users.

Author: rohitpaulk

app/components/leaderboard-page/entries-table.hbs

@@ -3,23 +3,7 @@
     <div>
       <table class="min-w-full bg-white">
         <thead>
-          <tr>
-            <LeaderboardPage::EntriesTable::HeaderRowCell @title="Rank" @alignment="left" />
-            <LeaderboardPage::EntriesTable::HeaderRowCell @title="User" @alignment="left" />
-
-            <LeaderboardPage::EntriesTable::HeaderRowCell
-              @title="Stages Completed"
-              @alignment="right"
-              class="hidden md:table-cell"
-              @explanationMarkdown={{this.explanationMarkdownForStagesCompleted}}
-            />
-
-            <LeaderboardPage::EntriesTable::HeaderRowCell
-              @title="Score"
-              @alignment="right"
-              @explanationMarkdown={{this.explanationMarkdownForScore}}
-            />
-          </tr>
+          <LeaderboardPage::EntriesTable::HeaderRow @language={{this.language}} />
         </thead>
         <tbody>
           {{#each this.sortedTopEntries as |entry index|}}

app/components/leaderboard-page/entries-table.ts

@@ -32,18 +32,6 @@ export default class LeaderboardPageEntriesTable extends Component<Signature> {
     }
   }
 
-  get explanationMarkdownForScore() {
-    return `
-The highest possible score for this track is ${this.args.language.leaderboard!.highestPossibleScore}.
-
-Harder stages have higher scores assigned to them.
-`.trim();
-  }
-
-  get explanationMarkdownForStagesCompleted() {
-    return `There are ${this.args.language.stagesCount} stages available in this track.`;
-  }
-
   get hasEntries() {
     return this.args.topEntries.length > 0;
   }

app/components/leaderboard-page/entries-table/header-row.hbs

@@ -0,0 +1,13 @@
+<tr ...attributes>
+  <LeaderboardPage::EntriesTable::HeaderRowCell @title="Rank" @alignment="left" />
+  <LeaderboardPage::EntriesTable::HeaderRowCell @title="User" @alignment="left" />
+
+  <LeaderboardPage::EntriesTable::HeaderRowCell
+    @title="Stages Completed"
+    @alignment="right"
+    class="hidden md:table-cell"
+    @explanationMarkdown={{this.explanationMarkdownForStagesCompleted}}
+  />
+
+  <LeaderboardPage::EntriesTable::HeaderRowCell @title="Score" @alignment="right" @explanationMarkdown={{this.explanationMarkdownForScore}} />
+</tr>

app/components/leaderboard-page/entries-table/header-row.ts

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import type LanguageModel from 'codecrafters-frontend/models/language';
+
+interface Signature {
+  Element: HTMLTableRowElement;
+
+  Args: {
+    language: LanguageModel;
+  };
+}
+
+export default class LeaderboardPageEntriesTableHeaderRow extends Component<Signature> {
+  get explanationMarkdownForScore() {
+    return `
+The highest possible score for this track is ${this.args.language.leaderboard!.highestPossibleScore}.
+
+Harder stages have higher scores assigned to them.
+`.trim();
+  }
+
+  get explanationMarkdownForStagesCompleted() {
+    return `There are ${this.args.language.liveOrBetaStagesCount} stages available in this track.`;
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'LeaderboardPage::EntriesTable::HeaderRow': typeof LeaderboardPageEntriesTableHeaderRow;
+  }
+}

app/components/leaderboard-page/header.ts

@@ -21,7 +21,7 @@ export default class LeaderboardPageHeader extends Component<Signature> {
     return this.store
       .peekAll('language')
       .sortBy('sortPositionForTrack')
-      .filter((language) => language.stagesCount > 0);
+      .filter((language) => language.liveOrBetaStagesCount > 0);
   }
 
   @action

app/components/track-page/header/index.hbs

@@ -27,7 +27,7 @@
         {{/if}}
       {{/if}}
 
-      <TrackPage::Header::Statistic @description="{{format-number @language.stagesCount}} exercises" @icon="terminal" class="shrink-0" />
+      <TrackPage::Header::Statistic @description="{{format-number @language.liveOrBetaStagesCount}} exercises" @icon="terminal" class="shrink-0" />
     </div>
 
     {{#if (has-block "cta")}}

app/components/tracks-page/track-card/index.hbs

@@ -28,11 +28,11 @@
   {{! Footer }}
   <div class="flex items-center justify-between">
     {{#if this.currentUserHasStartedTrack}}
-      <TracksPage::TrackCard::ProgressBar @completedStagesCount={{this.completedStagesCount}} @stagesCount={{this.stagesCount}} />
+      <TracksPage::TrackCard::ProgressBar @completedStagesCount={{this.completedStagesCount}} @stagesCount={{this.liveOrBetaStagesCount}} />
     {{else}}
       <div class="flex items-center">
         {{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
-        <span class="text-xs text-gray-500">{{this.stagesCount}} stages</span>
+        <span class="text-xs text-gray-500">{{this.liveOrBetaStagesCount}} stages</span>
       </div>
     {{/if}}
 

app/controllers/leaderboard.ts

@@ -13,6 +13,6 @@ export default class LeaderboardController extends Controller {
     return this.store
       .peekAll('language')
       .sortBy('sortPositionForTrack')
-      .filter((language) => language.stagesCount > 0);
+      .filter((language) => language.liveOrBetaStagesCount > 0);
   }
 }

app/models/language.ts

@@ -164,9 +164,10 @@ export default class LanguageModel extends Model {
     ].join('');
   }
 
-  get stagesCount() {
+  get liveOrBetaStagesCount() {
     return this.store
       .peekAll('course')
+      .filter((course) => course.releaseStatusIsLive || course.releaseStatusIsBeta)
       .filter((course) => course.betaOrLiveLanguages.includes(this))
       .map((course) => course.stages.length)
       .reduce((a, b) => a + b, 0);