Make three notices sticky

[andy1li]

Cannot quite make the stickiness compatible with animation.

Checklist:

• I've thoroughly self-reviewed my changes
• I've added tests for my changes, unless they affect admin-only areas (or are otherwise not worth testing)
• I've verified any visual changes using Percy (add a commit with [percy] in the message to trigger)

---

Note

Low Risk
UI-only behavior and styling changes (animation removal + sticky positioning) with minimal logic impact; main risk is visual/regression around notice visibility and layering while scrolling.

Overview
When overlay modals are dismissed on the course page, the corresponding notices are now rendered as sticky banners (sticky top-10 z-10) instead of being shown via ember-animated (AnimatedContainer/animated-if).

This removes the fade transition wiring from the three overlay components, and updates the tests-passed notice to be clickable to re-open the modal (handleNoticeClick).

^{Written by Cursor Bugbot for commit 287cce0. This will update automatically on new commits. Configure here.}

[github-actions]

Test Results

  1 files  ±0    1 suites  ±0   7m 10s ⏱️ - 5m 1s
707 tests ±0  652 ✅ +3  55 💤 ±0  0 ❌ ±0 
722 runs  ±0  667 ✅ +6  55 💤 ±0  0 ❌  - 3 

Results for commit 287cce0. ± Comparison against base commit dceccf0.

♻️ This comment has been updated with latest results.

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...rse-page/course-stage-step/tests-passed-overlay.ts	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is ON. A Cloud Agent has been kicked off to fix the reported issue.}

[cursor]

Bugbot Autofix prepared fixes for 1 of the 1 bugs found in the latest run.

• ✅ Fixed: Unused transition property and fade import remain
  • Removed unused transition property and fade import from all three overlay component files after templates were refactored to use plain {{#if}} blocks instead of animated-if.

Or push these changes by commenting:

@cursor push 22f7fdd2ef

Preview (22f7fdd2ef)

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
--- 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 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 @@
 }
 
 export default class TestsPassedOverlay extends Component<Signature> {
-  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
--- 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 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 @@
 }
 
 export default class CurrentStepCompleteOverlay extends Component<Signature> {
-  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
--- 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 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 @@
 }
 
 export default class PreviousStepsIncompleteOverlay extends Component<Signature> {
-  transition = fade;
-
   @tracked modalWasDismissed = false;
   @tracked lastSeenStepStatus: string | null = null;

[codecov]

Bundle Report

Changes will increase total bundle size by 1.26kB (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
client-array-push	39.04MB	1.26kB (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: client-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/chunk.*.js	82 bytes	41.01kB	0.2%
assets/chunk.*.js	-385 bytes	404.37kB	-0.1%
assets/chunk.*.js	1.56kB	3.41MB	0.05%

[rohitpaulk]

Good idea - on my list for tomorrow!