feat(devtools): enhance SEO tab with new styles and structured issue reporting

This commit introduces new styles for the SEO tab components, improving the visual presentation of SEO analysis results. It adds structured issue reporting for SEO elements, including headings, JSON-LD, and links, utilizing a consistent design for severity indicators. Additionally, it refactors existing components to enhance readability and maintainability, ensuring a cohesive user experience across the SEO tab.

Author: abedshaaban

packages/devtools/src/styles/use-styles.ts

@@ -364,6 +364,81 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       color: ${t(colors.red[700], colors.red[400])};
       font-size: 0.875rem;
     `,
+    /**
+     * SEO validation rows: message uses default panel foreground; keep
+     * `seoSeverityColor` only on the bullet and severity label.
+     */
+    seoIssueList: css`
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    `,
+    seoIssueListNested: css`
+      margin: 6px 0 0 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    `,
+    seoIssueRow: css`
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+      font-size: 0.875rem;
+      line-height: 1.45;
+    `,
+    seoIssueRowCompact: css`
+      display: flex;
+      gap: 6px;
+      align-items: flex-start;
+      font-size: 0.6875rem;
+      line-height: 1.45;
+    `,
+    seoIssueBullet: css`
+      flex-shrink: 0;
+      padding-top: 1px;
+    `,
+    /** Default foreground for SEO issue copy (no layout). */
+    seoIssueText: css`
+      color: ${t(colors.gray[900], colors.gray[100])};
+      line-height: 1.45;
+    `,
+    seoIssueMessage: css`
+      flex: 1;
+      min-width: 0;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      line-height: 1.45;
+    `,
+    seoIssueSeverityBadge: css`
+      flex-shrink: 0;
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      font-weight: 600;
+      padding-top: 2px;
+    `,
+    seoMetaRow: css`
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+      font-size: 0.75rem;
+      padding: 5px 0;
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
+    `,
+    seoMetaRowLabel: css`
+      min-width: 130px;
+      flex-shrink: 0;
+      color: ${t(colors.gray[500], colors.gray[400])};
+    `,
+    seoMetaRowValue: css`
+      word-break: break-all;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      line-height: 1.45;
+    `,
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],
       isDetached: boolean,

packages/devtools/src/tabs/seo-tab/heading-structure-preview.tsx

@@ -36,13 +36,18 @@ function extractHeadings(): Array<HeadingItem> {
 
 function validateHeadings(headings: Array<HeadingItem>): Array<HeadingIssue> {
   if (headings.length === 0) {
-    return [{ severity: 'error', message: 'No heading tags found on this page.' }]
+    return [
+      { severity: 'error', message: 'No heading tags found on this page.' },
+    ]
   }
 
   const issues: Array<HeadingIssue> = []
   const h1Count = headings.filter((h) => h.level === 1).length
   if (h1Count === 0) {
-    issues.push({ severity: 'error', message: 'No H1 heading found on this page.' })
+    issues.push({
+      severity: 'error',
+      message: 'No H1 heading found on this page.',
+    })
   } else if (h1Count > 1) {
     issues.push({
       severity: 'warning',
@@ -91,6 +96,15 @@ export function getHeadingStructureSummary(): SeoSectionSummary {
   }
 }
 
+const HEADING_LEVEL_COLORS: Record<number, string> = {
+  1: '#60a5fa',
+  2: '#34d399',
+  3: '#a78bfa',
+  4: '#f59e0b',
+  5: '#f87171',
+  6: '#94a3b8',
+}
+
 export function HeadingStructurePreviewSection() {
   const styles = useStyles()
   const headings = extractHeadings()
@@ -102,9 +116,26 @@ export function HeadingStructurePreviewSection() {
         Visualizes heading structure (`h1`-`h6`) in DOM order and highlights
         common hierarchy issues. This section scans once when opened.
       </SectionDescription>
+
+      {/* Heading tree */}
       <div class={styles().serpPreviewBlock}>
-        <div class={styles().serpPreviewLabel}>
-          Total headings: {headings.length}
+        <div
+          style={{
+            display: 'flex',
+            'align-items': 'center',
+            'justify-content': 'space-between',
+            'margin-bottom': '10px',
+          }}
+        >
+          <div
+            class={styles().serpPreviewLabel}
+            style={{ 'margin-bottom': '0' }}
+          >
+            Heading tree
+          </div>
+          <span style={{ 'font-size': '11px', color: '#6b7280' }}>
+            {headings.length} heading{headings.length === 1 ? '' : 's'}
+          </span>
         </div>
         <Show
           when={headings.length > 0}
@@ -114,35 +145,86 @@ export function HeadingStructurePreviewSection() {
             </div>
           }
         >
-          <ul class={styles().serpErrorList} style={{ 'list-style': 'none', padding: '0' }}>
+          <ul
+            style={{
+              margin: '0',
+              padding: '0',
+              'list-style': 'none',
+              display: 'flex',
+              'flex-direction': 'column',
+              gap: '3px',
+            }}
+          >
             <For each={headings}>
-              {(heading) => (
-                <li
-                  style={{
-                    display: 'flex',
-                    gap: '8px',
-                    'align-items': 'baseline',
-                    'margin-top': '6px',
-                    'padding-left': `${(heading.level - 1) * 12}px`,
-                  }}
-                >
-                  <strong>{heading.tag.toUpperCase()}</strong>
-                  <span>{heading.text || '(empty heading)'}</span>
-                </li>
-              )}
+              {(heading) => {
+                const color = HEADING_LEVEL_COLORS[heading.level] ?? '#94a3b8'
+                return (
+                  <li
+                    style={{
+                      display: 'flex',
+                      gap: '8px',
+                      'align-items': 'baseline',
+                      'padding-left': `${(heading.level - 1) * 14}px`,
+                    }}
+                  >
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        'align-items': 'center',
+                        'justify-content': 'center',
+                        'min-width': '26px',
+                        height: '16px',
+                        'border-radius': '3px',
+                        'font-size': '10px',
+                        'font-weight': '700',
+                        'letter-spacing': '0.03em',
+                        background: `${color}18`,
+                        color,
+                        'flex-shrink': '0',
+                        'font-family': 'monospace',
+                      }}
+                    >
+                      {heading.tag.toUpperCase()}
+                    </span>
+                    <span
+                      class={styles().seoIssueText}
+                      style={{
+                        'font-size': '12px',
+                        'font-style': heading.text ? 'normal' : 'italic',
+                        opacity: heading.text ? 1 : 0.65,
+                      }}
+                    >
+                      {heading.text || '(empty)'}
+                    </span>
+                  </li>
+                )
+              }}
             </For>
           </ul>
         </Show>
       </div>
 
+      {/* Structure issues */}
       <Show when={issues.length > 0}>
         <div class={styles().serpPreviewBlock}>
           <div class={styles().serpPreviewLabel}>Structure issues</div>
-          <ul class={styles().serpErrorList}>
+          <ul class={styles().seoIssueList}>
             <For each={issues}>
               {(issue) => (
-                <li style={{ color: seoSeverityColor(issue.severity), 'margin-top': '4px' }}>
-                  [{issue.severity}] {issue.message}
+                <li class={styles().seoIssueRow}>
+                  <span
+                    class={styles().seoIssueBullet}
+                    style={{ color: seoSeverityColor(issue.severity) }}
+                  >
+                    ●
+                  </span>
+                  <span class={styles().seoIssueMessage}>{issue.message}</span>
+                  <span
+                    class={styles().seoIssueSeverityBadge}
+                    style={{ color: seoSeverityColor(issue.severity) }}
+                  >
+                    {issue.severity}
+                  </span>
                 </li>
               )}
             </For>