Only show previous steps incomplete modal for instructions & setup

app/components/course-page/previous-steps-incomplete-overlay.hbs

@@ -0,0 +1,18 @@
+<BlurredOverlay
+  @isBlurred={{this.shouldShowModal}}
+  {{did-update this.handleStepIdUpdated @currentStep.id}}
+  @overlayClass="bg-gray-200 bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20"
+  class="px-3 md:px-6 lg:px-10"
+  ...attributes
+>
+  <:content>
+    {{yield}}
+  </:content>
+  <:overlay>
+    <CoursePage::PreviousStepsIncompleteModal
+      class="mt-8 mx-3 md:mx-6"
+      @onClose={{this.handleModalDismissed}}
+      @activeStep={{this.coursePageState.activeStep}}
+    />
+  </:overlay>
+</BlurredOverlay>

app/components/course-page/previous-steps-incomplete-overlay.ts

@@ -0,0 +1,55 @@
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state';
+import { Step } from 'codecrafters-frontend/utils/course-page-step-list';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    currentStep: Step;
+  };
+
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class PreviousStepsIncompleteOverlayComponent extends Component<Signature> {
+  @tracked modalWasDismissed = false;
+  @tracked lastSeenStepId: string | null = null;
+
+  @service declare coursePageState: CoursePageStateService;
+
+  get shouldShowModal(): boolean {
+    // This _shouldn't_ happen as long as we're always rendered in the course page, but let's be safe
+    if (!this.coursePageState.activeStep) {
+      return false;
+    }
+
+    return !this.modalWasDismissed && this.args.currentStep.status === 'locked';
+  }
+
+  @action
+  handleModalDismissed() {
+    this.modalWasDismissed = true;
+  }
+
+  @action
+  handleStepIdUpdated() {
+    if (this.args.currentStep.id === this.lastSeenStepId) {
+      return;
+    }
+
+    this.lastSeenStepId = this.args.currentStep.id;
+    this.modalWasDismissed = false;
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::PreviousStepsIncompleteOverlay': typeof PreviousStepsIncompleteOverlayComponent;
+  }
+}

app/components/course-page/step-content.hbs

@@ -9,21 +9,7 @@
     />
   {{/if}}
 
-  <BlurredOverlay
-    @isBlurred={{this.shouldShowPreviousStepsIncompleteModal}}
-    @overlayClass="bg-gray-200 bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20"
-    class="px-3 md:px-6 lg:px-10"
-    {{did-update this.handleStepIdUpdated @step.id}}
-  >
-    <:content>
-      {{yield}}
-    </:content>
-    <:overlay>
-      <CoursePage::PreviousStepsIncompleteModal
-        class="mt-8 mx-3 md:mx-6"
-        @onClose={{this.handlePreviousStepsIncompleteModalDismissed}}
-        @activeStep={{this.coursePageState.activeStep}}
-      />
-    </:overlay>
-  </BlurredOverlay>
+  <CoursePage::PreviousStepsIncompleteOverlay @currentStep={{@step}}>
+    {{yield}}
+  </CoursePage::PreviousStepsIncompleteOverlay>
 </div>