feat(header): improve sticky header with dynamic scroll tracking

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

@@ -0,0 +1,77 @@
+<div data-test-course-page-header ...attributes>
+  <div class="px-3 md:px-6 lg:pl-10 bg-gray-50 dark:bg-gray-900 pt-6 pb-5">
+    <CoursePage::Header::NavigationControls
+      @activeRepository={{@activeRepository}}
+      @activeStep={{@activeStep}}
+      @course={{@course}}
+      @currentStep={{@currentStep}}
+      @nextStep={{@nextStep}}
+      @onMobileSidebarButtonClick={{@onMobileSidebarButtonClick}}
+      @stepList={{@stepList}}
+      @track={{@track}}
+    />
+
+    <div class="mt-6">
+      <div class="flex flex-col items-start">
+        <div class="flex items-center flex-wrap gap-x-3">
+          <div class="text-lg sm:text-xl md:text-2xl">
+            {{#if (eq @currentStep.type "CourseStageStep")}}
+              <span
+                class="font-bold text-gray-700 dark:text-gray-300"
+                data-test-step-name
+              >{{this.currentStepAsCourseStageStep.courseStage.name}}</span>
+              <span class="font-mono text-base sm:text-lg md:text-xl">
+                <span class="text-gray-300 dark:text-gray-700">#</span><span
+                  class="font-mono text-gray-400 dark:text-gray-600 uppercase"
+                >{{this.currentStepAsCourseStageStep.courseStage.slug}}</span>
+              </span>
+            {{else}}
+              <span class="font-bold text-gray-700 dark:text-gray-200" data-test-step-name>{{@currentStep.title}}</span>
+            {{/if}}
+          </div>
+
+          <div class="flex items-center md:h-8 h-7 shrink-0">
+            <CoursePage::StepStatusPill @step={{@currentStep}} />
+          </div>
+        </div>
+
+        {{! For complete steps, we have the "You've completed this step" banner" }}
+        {{! For in-progress steps, users shouldn't be focused on this area anyway }}
+        {{#if (and (not-eq @currentStep.status "complete") (not-eq @currentStep.status "in_progress"))}}
+          <CoursePage::StepProgressIndicator @step={{@currentStep}} class="mt-2 ml-0.5" />
+        {{/if}}
+      </div>
+    </div>
+  </div>
+
+  <div {{in-viewport-did-change this.handleScrollMarkerInViewportDidChange}}>
+  </div>
+
+  <div
+    class="flex items-center justify-between border-b sticky top-0 z-20 px-3 md:px-6 lg:pl-10 bg-gray-50 dark:bg-gray-900
+      {{if this.isSticky 'shadow-xs pt-1 border-gray-300 dark:border-white/10' 'pt-0 border-gray-200 dark:border-white/5'}}
+      transition-all gap-x-3"
+    data-test-course-page-header-sticky-section
+  >
+    <CoursePage::Header::TabList
+      @course={{@course}}
+      @stepList={{@stepList}}
+      @currentStep={{@currentStep}}
+      @activeStep={{@activeStep}}
+      @nextStep={{@nextStep}}
+      class="-mb-px"
+    />
+
+    {{#if this.isSticky}}
+      <div class="shrink-0 flex items-center gap-x-3">
+        {{#if (eq @currentStep.type "CourseStageStep")}}
+          <div class="hidden sm:inline-flex items-center text-xs font-semibold text-gray-500">
+            Stage #<span class="uppercase">{{this.currentStepAsCourseStageStep.courseStage.slug}}</span>
+          </div>
+        {{/if}}
+
+        <CoursePage::StepStatusPill @step={{@currentStep}} class="shrink-0" />
+      </div>
+    {{/if}}
+  </div>
+</div>

app/components/course-page/header/sticky-section.ts → app/components/course-page/header/index.ts

@@ -1,27 +1,31 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import CourseModel from 'codecrafters-frontend/models/course';
+import RepositoryModel from 'codecrafters-frontend/models/repository';
 import StepDefinition from 'codecrafters-frontend/utils/course-page-step-list/step';
-import { action } from '@ember/object';
 import { StepListDefinition } from 'codecrafters-frontend/utils/course-page-step-list';
-import { tracked } from '@glimmer/tracking';
 import CourseStageStep from 'codecrafters-frontend/utils/course-page-step-list/course-stage-step';
 
 interface Signature {
   Element: HTMLDivElement;
 
   Args: {
+    activeRepository: RepositoryModel;
     activeStep: StepDefinition;
     course: CourseModel;
     currentStep: StepDefinition;
     nextStep: StepDefinition | null;
+    onMobileSidebarButtonClick: () => void;
     stepList: StepListDefinition;
+    track: string | undefined;
   };
 }
 
-export default class StickySection extends Component<Signature> {
+export default class Header extends Component<Signature> {
   @tracked scrollMarkerIsInViewport = true;
 
-  get currentStepAsCourseStageStep() {
+  get currentStepAsCourseStageStep(): CourseStageStep {
     return this.args.currentStep as CourseStageStep;
   }
 
@@ -37,6 +41,6 @@ export default class StickySection extends Component<Signature> {
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
-    'CoursePage::Header::StickySection': typeof StickySection;
+    'CoursePage::Header': typeof Header;
   }
 }

app/components/course-page/header/navigation-controls.hbs

@@ -4,18 +4,6 @@
       <button class="flex items-center py-1 lg:hidden" type="button" {{on "click" @onMobileSidebarButtonClick}}>
         {{svg-jar "menu" class="w-6 h-6 text-gray-500"}}
       </button>
-
-      <CoursePage::StepSwitcherContainer @currentStep={{@currentStep}} @stepList={{@stepList}} />
-
-      <div class="flex items-center">
-        {{#if @course.releaseStatusIsBeta}}
-          <BetaCourseLabel />
-        {{else if (and @course.isFree (not this.currentUser.canAccessMembershipBenefits))}}
-          <FreeCourseLabel @course={{@course}} />
-        {{else if (and (eq @currentStep.type "CourseStageStep") this.currentStepAsCourseStageStep.courseStage.primaryExtension)}}
-          <BetaCourseExtensionLabel />
-        {{/if}}
-      </div>
     </div>
 
     <div class="flex items-center gap-3 flex-wrap-reverse justify-end">

app/templates/course.hbs

@@ -60,7 +60,7 @@
       data-test-expand-sidebar-button
     />
 
-    <CoursePage::Header::MainSection
+    <CoursePage::Header
       @activeRepository={{@model.activeRepository}}
       @activeStep={{this.coursePageState.activeStep}}
       @course={{@model.course}}
@@ -69,16 +69,6 @@
       @onMobileSidebarButtonClick={{fn (mut this.sidebarIsExpandedOnMobile) true}}
       @stepList={{this.coursePageState.stepListAsStepListDefinition}}
       @track={{@model.track}}
-      class="px-3 md:px-6 lg:pl-10 bg-gray-50 dark:bg-gray-900 pt-6 pb-5"
-    />
-
-    <CoursePage::Header::StickySection
-      @course={{@model.course}}
-      @stepList={{this.coursePageState.stepListAsStepListDefinition}}
-      @currentStep={{this.coursePageState.currentStep}}
-      @activeStep={{this.coursePageState.activeStep}}
-      @nextStep={{this.coursePageState.nextStep}}
-      class="px-3 md:px-6 lg:pl-10 bg-gray-50 dark:bg-gray-900"
     />
     <div class="flex grow bg-white dark:bg-gray-850">
       <div class="grow shrink min-w-0">