From e5f94c709e56846e5212c5e96ffac982cdd64cac Mon Sep 17 00:00:00 2001 From: Andy Li <1450947+andy1li@users.noreply.github.com> Date: Wed, 11 Feb 2026 09:20:48 +0900 Subject: [PATCH 1/3] Refactor overlays to use conditional rendering instead of animated containers for modal dismissal. This change improves performance and simplifies the component structure across current-step-complete, previous-steps-incomplete, and tests-passed overlays. --- .../tests-passed-overlay.hbs | 18 +++++++-------- .../current-step-complete-overlay.hbs | 22 +++++++++---------- .../previous-steps-incomplete-overlay.hbs | 18 +++++++-------- 3 files changed, 26 insertions(+), 32 deletions(-) diff --git a/app/components/course-page/course-stage-step/tests-passed-overlay.hbs b/app/components/course-page/course-stage-step/tests-passed-overlay.hbs index 7f9a8da653..cabebad466 100644 --- a/app/components/course-page/course-stage-step/tests-passed-overlay.hbs +++ b/app/components/course-page/course-stage-step/tests-passed-overlay.hbs @@ -5,16 +5,14 @@ ...attributes > <:content> - - {{#animated-if this.modalWasDismissed duration=150 use=this.transition}} - - {{/animated-if}} - + {{#if this.modalWasDismissed}} + + {{/if}} {{yield}} diff --git a/app/components/course-page/current-step-complete-overlay.hbs b/app/components/course-page/current-step-complete-overlay.hbs index 4009750832..4c57bcf541 100644 --- a/app/components/course-page/current-step-complete-overlay.hbs +++ b/app/components/course-page/current-step-complete-overlay.hbs @@ -5,18 +5,16 @@ ...attributes > <:content> - - {{#animated-if this.modalWasDismissed duration=150 use=this.transition}} - - {{/animated-if}} - + {{#if this.modalWasDismissed}} + + {{/if}} {{yield}} diff --git a/app/components/course-page/previous-steps-incomplete-overlay.hbs b/app/components/course-page/previous-steps-incomplete-overlay.hbs index 26730198e5..3cd90ad8e4 100644 --- a/app/components/course-page/previous-steps-incomplete-overlay.hbs +++ b/app/components/course-page/previous-steps-incomplete-overlay.hbs @@ -5,16 +5,14 @@ ...attributes > <:content> - - {{#animated-if this.modalWasDismissed duration=150 use=this.transition}} - - {{/animated-if}} - + {{#if this.modalWasDismissed}} + + {{/if}} {{yield}} From b2a4f853e904d12a223c9e575be812c7312a6241 Mon Sep 17 00:00:00 2001 From: Andy Li <1450947+andy1li@users.noreply.github.com> Date: Wed, 11 Feb 2026 09:31:08 +0900 Subject: [PATCH 2/3] Implement click handler for modal dismissal in TestsPassedOverlay component. This change replaces the previous click event binding with a dedicated action method, improving code clarity and maintainability. --- .../course-page/course-stage-step/tests-passed-overlay.hbs | 2 +- .../course-page/course-stage-step/tests-passed-overlay.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/course-page/course-stage-step/tests-passed-overlay.hbs b/app/components/course-page/course-stage-step/tests-passed-overlay.hbs index cabebad466..02d4df1831 100644 --- a/app/components/course-page/course-stage-step/tests-passed-overlay.hbs +++ b/app/components/course-page/course-stage-step/tests-passed-overlay.hbs @@ -10,7 +10,7 @@ class="sticky top-10 z-10 px-3 md:px-6 lg:px-10 w-full scroll-mt-20" {{! Ensure this is visible when modal is dismissed }} {{upscroll-on-insert scrollableContainer="#course-page-scrollable-area"}} - {{on "click" (fn (mut this.modalWasDismissed) false)}} + {{on "click" this.handleNoticeClick}} /> {{/if}} diff --git a/app/components/course-page/course-stage-step/tests-passed-overlay.ts b/app/components/course-page/course-stage-step/tests-passed-overlay.ts index 2ed286cfa7..b95d606e20 100644 --- a/app/components/course-page/course-stage-step/tests-passed-overlay.ts +++ b/app/components/course-page/course-stage-step/tests-passed-overlay.ts @@ -31,6 +31,11 @@ export default class TestsPassedOverlay extends Component { this.modalWasDismissed = true; } + @action + handleNoticeClick() { + this.modalWasDismissed = false; + } + @action handleStepIdUpdated() { if (this.args.currentStep.id === this.lastSeenStepId) { From 287cce0ef06f88ca0ebcbf93ca6b46e0e721bdd9 Mon Sep 17 00:00:00 2001 From: Andy Li <1450947+andy1li@users.noreply.github.com> Date: Wed, 11 Feb 2026 09:34:07 +0900 Subject: [PATCH 3/3] Remove unused fade transition from course page overlay components to streamline code and improve performance. --- .../course-page/course-stage-step/tests-passed-overlay.ts | 3 --- app/components/course-page/current-step-complete-overlay.ts | 3 --- .../course-page/previous-steps-incomplete-overlay.ts | 3 --- 3 files changed, 9 deletions(-) diff --git a/app/components/course-page/course-stage-step/tests-passed-overlay.ts b/app/components/course-page/course-stage-step/tests-passed-overlay.ts index b95d606e20..d1761f7313 100644 --- a/app/components/course-page/course-stage-step/tests-passed-overlay.ts +++ b/app/components/course-page/course-stage-step/tests-passed-overlay.ts @@ -2,7 +2,6 @@ import Component from '@glimmer/component'; import type CourseStageStep from 'codecrafters-frontend/utils/course-page-step-list/course-stage-step'; import { action } from '@ember/object'; import { tracked } from '@glimmer/tracking'; -import fade from 'ember-animated/transitions/fade'; interface Signature { Element: HTMLDivElement; @@ -17,8 +16,6 @@ interface Signature { } export default class TestsPassedOverlay extends Component { - transition = fade; - @tracked lastSeenStepId: string | null = null; @tracked modalWasDismissed = false; diff --git a/app/components/course-page/current-step-complete-overlay.ts b/app/components/course-page/current-step-complete-overlay.ts index aff7655988..885ef13cac 100644 --- a/app/components/course-page/current-step-complete-overlay.ts +++ b/app/components/course-page/current-step-complete-overlay.ts @@ -4,7 +4,6 @@ import { service } from '@ember/service'; import Component from '@glimmer/component'; import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state'; import { StepDefinition } from 'codecrafters-frontend/utils/course-page-step-list'; -import fade from 'ember-animated/transitions/fade'; interface Signature { Element: HTMLDivElement; @@ -19,8 +18,6 @@ interface Signature { } export default class CurrentStepCompleteOverlay extends Component { - transition = fade; - @tracked modalWasDismissed = false; @tracked lastSeenStepStatus: string | null = null; diff --git a/app/components/course-page/previous-steps-incomplete-overlay.ts b/app/components/course-page/previous-steps-incomplete-overlay.ts index f424956518..5a86574486 100644 --- a/app/components/course-page/previous-steps-incomplete-overlay.ts +++ b/app/components/course-page/previous-steps-incomplete-overlay.ts @@ -4,7 +4,6 @@ import { service } from '@ember/service'; import Component from '@glimmer/component'; import type CoursePageStateService from 'codecrafters-frontend/services/course-page-state'; import { StepDefinition } from 'codecrafters-frontend/utils/course-page-step-list'; -import fade from 'ember-animated/transitions/fade'; interface Signature { Element: HTMLDivElement; @@ -19,8 +18,6 @@ interface Signature { } export default class PreviousStepsIncompleteOverlay extends Component { - transition = fade; - @tracked modalWasDismissed = false; @tracked lastSeenStepStatus: string | null = null;