feat(ui): add Rust leaderboard rank alert to course completion

Replace the generic info alert with a custom RoadmapInfoAlert component 
showing the user's Rust leaderboard rank. Animate rank appearance with a fade 
transition and loading placeholder. This improves feedback on course 
progression by highlighting leaderboard status in a visually distinct alert.

Author: rohitpaulk

app/components/course-page/current-step-complete-modal.hbs

@@ -4,15 +4,25 @@
       🎉
     </div>
 
-    <div class="mb-1 font-bold text-2xl text-gray-700 dark:text-gray-100">
+    <div class="mb-5 font-bold text-2xl text-gray-700 dark:text-gray-100">
       {{if (eq this.currentStep.type "CourseStageStep") "Stage Completed!" "Step Completed!"}}
     </div>
 
-    <div class="prose dark:prose-invert mb-5" data-test-completion-message>
+    {{!-- <div class="prose dark:prose-invert mb-5" data-test-completion-message>
       <p>
         {{this.currentStep.completionNoticeMessage}}
       </p>
-    </div>
+    </div> --}}
+
+    {{! <AlertWithIcon @icon="presentation-chart-line" @type="success" class="mb-5">
+      Your leaderboard rank is now
+      <b>#1456</b>.
+    </AlertWithIcon> }}
+
+    <RoadmapInfoAlert @heading="Rust leaderboard" class="mb-5">
+      Your leaderboard rank is now
+      <b>#1456</b>.
+    </RoadmapInfoAlert>
 
     <PrimaryLinkButton
       @route={{this.stepForNextOrActiveStepButton.routeParams.route}}

app/components/roadmap-info-alert.hbs

@@ -1,15 +1,26 @@
-<Alert @color="blue" class="p-5" ...attributes>
-  <div class="prose prose-sm dark:prose-invert prose-blue prose-compact">
-    <h4>
-      <div class="flex items-center gap-1">
-        {{svg-jar "information-circle" class="w-5 h-5 fill-current text-blue-500/80"}}
-        <span>
-          {{@heading}}
-        </span>
+<div
+  class="relative p-5 pb-6 w-full max-w-xs group cursor-pointer bg-teal-100/20 hover:bg-teal-100/30 dark:bg-teal-900/20 border-teal-500/60 dark:border-teal-500/40 border rounded-sm transition-colors duration-100"
+  ...attributes
+>
+  <div class="flex flex-col items-center">
+    {{svg-jar "presentation-chart-line" class="w-8 h-8 fill-current text-teal-500/90 mb-2"}}
+
+    <span class="text-teal-700 text-xs mb-0.5 text-center">
+      Your Rust leaderboard rank is
+    </span>
+
+    <AnimatedContainer>
+      <div class="flex items-center w-full justify-center">
+        {{#animated-if (eq this.rank null) use=this.transition duration=300}}
+          <b class="text-2xl text-teal-600 border-b border-teal-600 group-hover:text-teal-500 border-dashed animate-pulse">
+            # ⋯
+          </b>
+        {{else}}
+          <b class="text-2xl text-teal-600 border-b border-teal-600 group-hover:text-teal-500 border-dashed">
+            #{{format-number this.rank}}
+          </b>
+        {{/animated-if}}
       </div>
-    </h4>
-    <p>
-      {{yield}}
-    </p>
+    </AnimatedContainer>
   </div>
-</Alert>
+</div>

app/components/roadmap-info-alert.ts

@@ -1,4 +1,6 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import fade from 'ember-animated/transitions/fade';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -10,7 +12,19 @@ interface Signature {
   };
 }
 
-export default class RoadmapInfoAlert extends Component<Signature> {}
+export default class RoadmapInfoAlert extends Component<Signature> {
+  transition = fade;
+
+  @tracked rank: number | null = null;
+
+  constructor(owner: unknown, args: Signature['Args']) {
+    super(owner, args);
+
+    setTimeout(() => {
+      this.rank = 15578;
+    }, 1350);
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {