feat(devtools): add navigation and display for heading structure and links preview in SEO tab

This commit enhances the SEO tab by introducing new navigation buttons for 'Heading Structure' and 'Links Preview', allowing users to easily switch between these views. It also updates the display logic to show the corresponding sections when selected, improving the overall user experience and accessibility of SEO insights. The SEO overview section has been adjusted to maintain a cohesive structure.

Author: abedshaaban

packages/devtools/src/tabs/seo-tab/index.tsx

@@ -25,6 +25,20 @@ export const SeoTab = () => {
         >
           SEO overview
         </button>
+        <button
+          type="button"
+          class={`${styles().seoSubNavLabel} ${activeView() === 'heading-structure' ? styles().seoSubNavLabelActive : ''}`}
+          onClick={() => setActiveView('heading-structure')}
+        >
+          Heading Structure
+        </button>
+        <button
+          type="button"
+          class={`${styles().seoSubNavLabel} ${activeView() === 'links-preview' ? styles().seoSubNavLabelActive : ''}`}
+          onClick={() => setActiveView('links-preview')}
+        >
+          Links Preview
+        </button>
         <button
           type="button"
           class={`${styles().seoSubNavLabel} ${activeView() === 'social-previews' ? styles().seoSubNavLabelActive : ''}`}
@@ -46,25 +60,17 @@ export const SeoTab = () => {
         >
           JSON-LD Preview
         </button>
-        <button
-          type="button"
-          class={`${styles().seoSubNavLabel} ${activeView() === 'heading-structure' ? styles().seoSubNavLabelActive : ''}`}
-          onClick={() => setActiveView('heading-structure')}
-        >
-          Heading Structure
-        </button>
-        <button
-          type="button"
-          class={`${styles().seoSubNavLabel} ${activeView() === 'links-preview' ? styles().seoSubNavLabelActive : ''}`}
-          onClick={() => setActiveView('links-preview')}
-        >
-          Links Preview
-        </button>
       </nav>
 
       <Show when={activeView() === 'overview'}>
         <SeoOverviewSection goTo={(view) => setActiveView(view)} />
       </Show>
+      <Show when={activeView() === 'heading-structure'}>
+        <HeadingStructurePreviewSection />
+      </Show>
+      <Show when={activeView() === 'links-preview'}>
+        <LinksPreviewSection />
+      </Show>
       <Show when={activeView() === 'social-previews'}>
         <SocialPreviewsSection />
       </Show>
@@ -74,12 +80,6 @@ export const SeoTab = () => {
       <Show when={activeView() === 'json-ld-preview'}>
         <JsonLdPreviewSection />
       </Show>
-      <Show when={activeView() === 'heading-structure'}>
-        <HeadingStructurePreviewSection />
-      </Show>
-      <Show when={activeView() === 'links-preview'}>
-        <LinksPreviewSection />
-      </Show>
     </MainPanel>
   )
 }

packages/devtools/src/tabs/seo-tab/seo-overview.tsx

@@ -139,11 +139,11 @@ export function SeoOverviewSection(props: { goTo: (view: SeoDetailView) => void
     const links = getLinksPreviewSummary()
 
     const rows: Array<OverviewRow> = [
+      { id: 'heading-structure', title: 'Heading structure', summary: headings },
+      { id: 'links-preview', title: 'Links', summary: links },
       { id: 'social-previews', title: 'Social previews', summary: social },
       { id: 'serp-preview', title: 'SERP preview', summary: serp },
       { id: 'json-ld-preview', title: 'JSON-LD', summary: jsonLd },
-      { id: 'heading-structure', title: 'Heading structure', summary: headings },
-      { id: 'links-preview', title: 'Links', summary: links },
     ]
 
     const canonicalSummary: SeoSectionSummary = {