refactor(test-results-bar): move tab logic into pane component

Remove the TopSection component and inline its tab rendering 
directly inside the Pane template. Move the tabs getter and 
handleTabClick action from TopSection.ts to pane.ts. This 
simplifies the test results bar by consolidating tab-related 
logic and markup, reducing component indirection and improving 
maintainability.

Author: rohitpaulk

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

@@ -1,10 +1,15 @@
 <div ...attributes>
-  <CoursePage::TestResultsBar::TopSection
-    @activeTabSlug={{@activeTabSlug}}
-    @onActiveTabSlugChange={{@onActiveTabSlugChange}}
-    @availableTabSlugs={{@availableTabSlugs}}
-    class="mt-3 mb-3"
-  />
+  <ul class="flex items-center gap-2 overflow-x-auto mt-3 mb-3">
+    {{#each this.tabs as |tab|}}
+      <TabHeader
+        @size="small"
+        @icon={{tab.icon}}
+        @text={{tab.title}}
+        @isActive={{eq tab.slug @activeTabSlug}}
+        {{on "click" (fn this.handleTabClick tab)}}
+      />
+    {{/each}}
+  </ul>
 
   {{yield}}
 </div>

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

@@ -1,3 +1,4 @@
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
 interface Signature {
@@ -14,7 +15,29 @@ interface Signature {
   };
 }
 
-export default class Pane extends Component<Signature> {}
+export default class Pane extends Component<Signature> {
+  get tabs() {
+    const allTabs = [
+      {
+        slug: 'logs',
+        title: 'Logs',
+        icon: 'terminal',
+      },
+      {
+        slug: 'autofix',
+        title: 'AI Hints',
+        icon: 'sparkles',
+      },
+    ];
+
+    return allTabs.filter((tab) => this.args.availableTabSlugs.includes(tab.slug));
+  }
+
+  @action
+  handleTabClick(tab: { slug: string }) {
+    this.args.onActiveTabSlugChange(tab.slug);
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {