feat(devtools): enhance SEO tab with new styles and severity handling

This commit introduces new styles for the SEO tab components, including enhanced visual presentation for SEO analysis results. It refactors the handling of severity indicators across various sections, such as headings, JSON-LD, and links, utilizing a consistent design approach. Additionally, it improves the structure and readability of the code, ensuring a cohesive user experience throughout the SEO tab.

Author: abedshaaban

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

@@ -1,7 +1,7 @@
 import { For, Show } from 'solid-js'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
 import { useStyles } from '../../styles/use-styles'
-import { seoSeverityColor, type SeoSeverity } from './seo-severity'
+import { pickSeverityClass, type SeoSeverity } from './seo-severity'
 import type { SeoSectionSummary } from './seo-section-summary'
 
 type HeadingItem = {
@@ -50,14 +50,14 @@ function validateHeadings(headings: Array<HeadingItem>): Array<HeadingIssue> {
     })
   } else if (h1Count > 1) {
     issues.push({
-      severity: 'warning',
+      severity: 'error',
       message: `Multiple H1 headings detected (${h1Count}).`,
     })
   }
 
   if (headings[0] && headings[0].level !== 1) {
     issues.push({
-      severity: 'warning',
+      severity: 'error',
       message: `First heading is ${headings[0].tag.toUpperCase()} instead of H1.`,
     })
   }
@@ -66,15 +66,15 @@ function validateHeadings(headings: Array<HeadingItem>): Array<HeadingIssue> {
     const current = headings[index]!
     if (!current.text) {
       issues.push({
-        severity: 'warning',
+        severity: 'error',
         message: `${current.tag.toUpperCase()} is empty.`,
       })
     }
     if (index > 0) {
       const previous = headings[index - 1]!
       if (current.level - previous.level > 1) {
         issues.push({
-          severity: 'warning',
+          severity: 'error',
           message: `Skipped heading level from ${previous.tag.toUpperCase()} to ${current.tag.toUpperCase()}.`,
         })
       }
@@ -96,19 +96,66 @@ export function getHeadingStructureSummary(): SeoSectionSummary {
   }
 }
 
-const HEADING_LEVEL_COLORS: Record<number, string> = {
-  1: '#60a5fa',
-  2: '#34d399',
-  3: '#a78bfa',
-  4: '#f59e0b',
-  5: '#f87171',
-  6: '#94a3b8',
+function headingIndentClass(
+  s: ReturnType<ReturnType<typeof useStyles>>,
+  level: HeadingItem['level'],
+): string {
+  switch (level) {
+    case 1:
+      return s.seoHeadingTreeIndent1
+    case 2:
+      return s.seoHeadingTreeIndent2
+    case 3:
+      return s.seoHeadingTreeIndent3
+    case 4:
+      return s.seoHeadingTreeIndent4
+    case 5:
+      return s.seoHeadingTreeIndent5
+    case 6:
+      return s.seoHeadingTreeIndent6
+  }
+}
+
+function headingTagClass(
+  s: ReturnType<ReturnType<typeof useStyles>>,
+  level: HeadingItem['level'],
+): string {
+  const base = s.seoHeadingTag
+  switch (level) {
+    case 1:
+      return `${base} ${s.seoHeadingTagL1}`
+    case 2:
+      return `${base} ${s.seoHeadingTagL2}`
+    case 3:
+      return `${base} ${s.seoHeadingTagL3}`
+    case 4:
+      return `${base} ${s.seoHeadingTagL4}`
+    case 5:
+      return `${base} ${s.seoHeadingTagL5}`
+    case 6:
+      return `${base} ${s.seoHeadingTagL6}`
+  }
 }
 
 export function HeadingStructurePreviewSection() {
   const styles = useStyles()
   const headings = extractHeadings()
   const issues = validateHeadings(headings)
+  const s = styles()
+
+  const issueBulletClass = (sev: SeoSeverity) =>
+    `${s.seoIssueBullet} ${pickSeverityClass(sev, {
+      error: s.seoIssueBulletError,
+      warning: s.seoIssueBulletWarning,
+      info: s.seoIssueBulletInfo,
+    })}`
+
+  const issueBadgeClass = (sev: SeoSeverity) =>
+    `${s.seoIssueSeverityBadge} ${pickSeverityClass(sev, {
+      error: s.seoIssueSeverityBadgeError,
+      warning: s.seoIssueSeverityBadgeWarning,
+      info: s.seoIssueSeverityBadgeInfo,
+    })}`
 
   return (
     <Section>
@@ -117,114 +164,54 @@ export function HeadingStructurePreviewSection() {
         common hierarchy issues. This section scans once when opened.
       </SectionDescription>
 
-      {/* Heading tree */}
-      <div class={styles().serpPreviewBlock}>
-        <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' }}>
+      <div class={s.serpPreviewBlock}>
+        <div class={s.seoHeadingTreeHeaderRow}>
+          <div class={s.serpPreviewLabelFlat}>Heading tree</div>
+          <span class={s.seoHeadingTreeCount}>
             {headings.length} heading{headings.length === 1 ? '' : 's'}
           </span>
         </div>
         <Show
           when={headings.length > 0}
           fallback={
-            <div class={styles().seoMissingTagsSection}>
+            <div class={s.seoMissingTagsSection}>
               No headings found on this page.
             </div>
           }
         >
-          <ul
-            style={{
-              margin: '0',
-              padding: '0',
-              'list-style': 'none',
-              display: 'flex',
-              'flex-direction': 'column',
-              gap: '3px',
-            }}
-          >
+          <ul class={s.seoHeadingTreeList}>
             <For each={headings}>
-              {(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`,
-                    }}
+              {(heading) => (
+                <li
+                  class={`${s.seoHeadingTreeItem} ${headingIndentClass(s, heading.level)}`}
+                >
+                  <span class={headingTagClass(s, heading.level)}>
+                    {heading.tag.toUpperCase()}
+                  </span>
+                  <span
+                    class={
+                      heading.text ? s.seoHeadingLineText : s.seoHeadingLineTextEmpty
+                    }
                   >
-                    <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>
-                )
-              }}
+                    {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().seoIssueList}>
+        <div class={s.serpPreviewBlock}>
+          <div class={s.serpPreviewLabel}>Structure issues</div>
+          <ul class={s.seoIssueList}>
             <For each={issues}>
               {(issue) => (
-                <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 class={s.seoIssueRow}>
+                  <span class={issueBulletClass(issue.severity)}>●</span>
+                  <span class={s.seoIssueMessage}>{issue.message}</span>
+                  <span class={issueBadgeClass(issue.severity)}>{issue.severity}</span>
                 </li>
               )}
             </For>