feat(test-results-bar): introduce Pane component as a wrapper

Extract the TopSection and tab content into a new Pane component to improve
structure and reusability. Pane receives activeTabSlug, availableTabSlugs, and
onActiveTabSlugChange args and yields its block content, enabling better
composition in the TestResultsBar. Update usage in the index template to wrap
the conditional sections inside the new Pane component.

Author: rohitpaulk

app/components/course-page/test-results-bar/index.hbs

@@ -24,28 +24,27 @@
   >
     {{#if this.isExpanded}}
       <div class="flex flex-col grow border-b border-gray-800 px-6">
-        <CoursePage::TestResultsBar::TopSection
+        <CoursePage::TestResultsBar::Pane
           @activeTabSlug={{this.activeTabSlug}}
           @onActiveTabSlugChange={{fn (mut this.activeTabSlug)}}
           @availableTabSlugs={{this.availableTabSlugs}}
-          class="mt-3 mb-3"
-        />
-
-        {{#if (eq this.activeTabSlug "logs")}}
-          <CoursePage::TestResultsBar::LogsSection
-            @activeStep={{@activeStep}}
-            @currentStep={{@currentStep}}
-            @repository={{@repository}}
-            class="grow overflow-y-auto"
-          />
-        {{else if (eq this.activeTabSlug "autofix")}}
-          <CoursePage::TestResultsBar::AutofixSection
-            @activeStep={{@activeStep}}
-            @currentStep={{@currentStep}}
-            @repository={{@repository}}
-            class="grow overflow-y-auto"
-          />
-        {{/if}}
+        >
+          {{#if (eq this.activeTabSlug "logs")}}
+            <CoursePage::TestResultsBar::LogsSection
+              @activeStep={{@activeStep}}
+              @currentStep={{@currentStep}}
+              @repository={{@repository}}
+              class="grow overflow-y-auto"
+            />
+          {{else if (eq this.activeTabSlug "autofix")}}
+            <CoursePage::TestResultsBar::AutofixSection
+              @activeStep={{@activeStep}}
+              @currentStep={{@currentStep}}
+              @repository={{@repository}}
+              class="grow overflow-y-auto"
+            />
+          {{/if}}
+        </CoursePage::TestResultsBar::Pane>
       </div>
 
       <div

app/components/course-page/test-results-bar/pane.hbs

@@ -0,0 +1,10 @@
+<div ...attributes>
+  <CoursePage::TestResultsBar::TopSection
+    @activeTabSlug={{@activeTabSlug}}
+    @onActiveTabSlugChange={{@onActiveTabSlugChange}}
+    @availableTabSlugs={{@availableTabSlugs}}
+    class="mt-3 mb-3"
+  />
+
+  {{yield}}
+</div>

app/components/course-page/test-results-bar/pane.ts

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    activeTabSlug: string;
+    availableTabSlugs: string[];
+    onActiveTabSlugChange: (slug: string) => void;
+  };
+
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class Pane extends Component<Signature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'CoursePage::TestResultsBar::Pane': typeof Pane;
+  }
+}