@prenta/admin 0.98.0 → 0.98.1

package/src/views/page-builder/SEOPanel.tsx

@@ -1,127 +1,17 @@
 'use client'
 
-import { useState, useMemo } from 'react'
-import { analyzeSEO } from '@prenta/core/page-builder'
-import type {
-  PageNode,
-  BuilderSEOAnalysis,
-  BuilderSEOCheck,
-  BuilderReadabilityResult,
-} from '@prenta/core'
+import { useMemo, useState } from 'react'
+import type { PageNode } from '@prenta/core'
+import { auditPage } from '@prenta/core/seo/page-audit'
+import { ChevronDown, ChevronUp, Eye, FileText, Globe, Search } from 'lucide-react'
+import { PageAuditPanel } from '../../components/seo/PageAuditPanel.js'
+import { buildPageAuditInputFromBuilder } from '../../lib/page-audit-input.js'
 import type { PageSettings } from '../../hooks/useBuilderState.js'
-import {
-  CheckCircle2,
-  AlertCircle,
-  XCircle,
-  ChevronDown,
-  ChevronUp,
-  Search,
-  Globe,
-  Type,
-  FileText,
-  Clock,
-  BarChart3,
-  Target,
-  Eye,
-} from 'lucide-react'
 
 export interface BuilderSEOPanelProps {
   tree: PageNode
   pageSettings: PageSettings
   onPageSettingsChange: (settings: Partial<PageSettings>) => void
-  selectedNodeId: string | null
-}
-
-function getScoreColor(score: number): string {
-  if (score >= 70) return 'text-success'
-  if (score >= 40) return 'text-warning'
-  return 'text-destructive'
-}
-
-function getRingStrokeColor(score: number): string {
-  if (score >= 70) return 'rgb(34, 197, 94)'
-  if (score >= 40) return 'rgb(245, 158, 11)'
-  return 'rgb(239, 68, 68)'
-}
-
-function getScoreLabel(score: number): string {
-  if (score >= 80) return 'Excellent'
-  if (score >= 70) return 'Good'
-  if (score >= 50) return 'Needs Work'
-  return 'Poor'
-}
-
-function StatusIcon({ status }: { status: BuilderSEOCheck['status'] }) {
-  switch (status) {
-    case 'good':
-      return <CheckCircle2 size={14} className="text-success shrink-0" />
-    case 'warning':
-      return <AlertCircle size={14} className="text-warning shrink-0" />
-    case 'error':
-      return <XCircle size={14} className="text-destructive shrink-0" />
-  }
-}
-
-function ScoreRing({ score }: { score: number }) {
-  const radius = 32
-  const strokeWidth = 6
-  const circumference = 2 * Math.PI * radius
-  const progress = Math.min(score, 100) / 100
-  const dashOffset = circumference * (1 - progress)
-  const size = (radius + strokeWidth) * 2
-
-  return (
-    <div className="relative">
-      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="-rotate-90">
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          fill="none"
-          stroke="var(--border)"
-          strokeWidth={strokeWidth}
-        />
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          fill="none"
-          stroke={getRingStrokeColor(score)}
-          strokeWidth={strokeWidth}
-          strokeDasharray={circumference}
-          strokeDashoffset={dashOffset}
-          strokeLinecap="round"
-          className="transition-all duration-700 ease-out"
-        />
-      </svg>
-      <div className="absolute inset-0 flex items-center justify-center">
-        <span className={`text-lg font-medium ${getScoreColor(score)}`}>{score}</span>
-      </div>
-    </div>
-  )
-}
-
-function ScoreSummary({ checks }: { checks: BuilderSEOCheck[] }) {
-  const passed = checks.filter((c) => c.status === 'good').length
-  const warnings = checks.filter((c) => c.status === 'warning').length
-  const errors = checks.filter((c) => c.status === 'error').length
-
-  return (
-    <div className="flex flex-col gap-1">
-      <div className="flex items-center gap-1.5">
-        <CheckCircle2 size={12} className="text-success" />
-        <span className="text-muted-foreground text-xs">{passed} passed</span>
-      </div>
-      <div className="flex items-center gap-1.5">
-        <AlertCircle size={12} className="text-warning" />
-        <span className="text-muted-foreground text-xs">{warnings} warnings</span>
-      </div>
-      <div className="flex items-center gap-1.5">
-        <XCircle size={12} className="text-destructive" />
-        <span className="text-muted-foreground text-xs">{errors} issues</span>
-      </div>
-    </div>
-  )
 }
 
 function CollapsibleSection({
@@ -160,95 +50,6 @@ function CollapsibleSection({
   )
 }
 
-function SEOChecksList({ checks }: { checks: BuilderSEOCheck[] }) {
-  return (
-    <div className="flex flex-col gap-2">
-      {checks.map((check) => (
-        <div key={check.id} className="flex items-start gap-2">
-          <StatusIcon status={check.status} />
-          <div className="flex flex-col">
-            <span className="text-foreground text-xs font-medium">{check.label}</span>
-            <span className="text-muted-foreground text-xs">{check.detail}</span>
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function ReadabilityGrid({ readability }: { readability: BuilderReadabilityResult }) {
-  const fleschLabel =
-    readability.fleschScore >= 60
-      ? 'Easy'
-      : readability.fleschScore >= 30
-        ? 'Moderate'
-        : 'Difficult'
-
-  return (
-    <div className="grid grid-cols-2 gap-3">
-      <div className="bg-muted/50 flex flex-col gap-1 rounded-md p-3">
-        <div className="flex items-center gap-1.5">
-          <BarChart3 size={12} className="text-muted-foreground" />
-          <span className="text-muted-foreground text-xs">Flesch Score</span>
-        </div>
-        <span className={`text-sm font-medium ${getScoreColor(readability.fleschScore)}`}>
-          {readability.fleschScore}
-        </span>
-        <span className="text-muted-foreground text-xs">{fleschLabel}</span>
-      </div>
-
-      <div className="bg-muted/50 flex flex-col gap-1 rounded-md p-3">
-        <div className="flex items-center gap-1.5">
-          <Type size={12} className="text-muted-foreground" />
-          <span className="text-muted-foreground text-xs">Word Count</span>
-        </div>
-        <span className="text-foreground text-sm font-medium">{readability.wordCount}</span>
-        <span className="text-muted-foreground text-xs">
-          {readability.wordCount >= 300 ? 'Good length' : 'Short'}
-        </span>
-      </div>
-
-      <div className="bg-muted/50 flex flex-col gap-1 rounded-md p-3">
-        <div className="flex items-center gap-1.5">
-          <FileText size={12} className="text-muted-foreground" />
-          <span className="text-muted-foreground text-xs">Avg Sentence</span>
-        </div>
-        <span className="text-foreground text-sm font-medium">
-          {readability.avgSentenceLength} words
-        </span>
-        <span className="text-muted-foreground text-xs">
-          {readability.avgSentenceLength <= 20 ? 'Good' : 'Long'}
-        </span>
-      </div>
-
-      <div className="bg-muted/50 flex flex-col gap-1 rounded-md p-3">
-        <div className="flex items-center gap-1.5">
-          <Clock size={12} className="text-muted-foreground" />
-          <span className="text-muted-foreground text-xs">Reading Time</span>
-        </div>
-        <span className="text-foreground text-sm font-medium">{readability.readingTime} min</span>
-        <span className="text-muted-foreground text-xs">~{readability.wordCount} words</span>
-      </div>
-    </div>
-  )
-}
-
-function PerBlockHints({ hints }: { hints: BuilderSEOCheck[] }) {
-  return (
-    <div className="flex flex-col gap-2">
-      {hints.map((hint, index) => (
-        <div key={`${hint.id}-${index}`} className="flex items-start gap-2">
-          <StatusIcon status={hint.status} />
-          <div className="flex flex-col">
-            <span className="text-foreground text-xs font-medium">{hint.label}</span>
-            <span className="text-muted-foreground text-xs">{hint.detail}</span>
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
 function BasicSEOFields({
   pageSettings,
   onPageSettingsChange,
@@ -263,7 +64,9 @@ function BasicSEOFields({
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-1.5">
         <div className="flex items-center justify-between">
-          <label className="text-foreground text-xs font-medium">Meta Title</label>
+          <label htmlFor="builder-meta-title" className="text-foreground text-xs font-medium">
+            Meta Title
+          </label>
           <span
             className={`text-xs ${metaTitleLength > 60 ? 'text-destructive' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}
           >
@@ -271,6 +74,7 @@ function BasicSEOFields({
           </span>
         </div>
         <input
+          id="builder-meta-title"
           type="text"
           value={pageSettings.metaTitle || ''}
           onChange={(e) => onPageSettingsChange({ metaTitle: e.target.value })}
@@ -358,14 +162,12 @@ export function BuilderSEOPanel({
   tree,
   pageSettings,
   onPageSettingsChange,
-  selectedNodeId,
 }: BuilderSEOPanelProps) {
-  const analysis = useMemo<BuilderSEOAnalysis>(
-    () => analyzeSEO(tree, pageSettings as any),
+  const audit = useMemo(
+    () => auditPage(buildPageAuditInputFromBuilder({ tree, pageSettings })),
     [tree, pageSettings],
   )
-
-  const [expandedSections, setExpandedSections] = useState<string[]>(['checks'])
+  const [expandedSections, setExpandedSections] = useState<string[]>(['basicSeo'])
 
   const toggleSection = (section: string) => {
     setExpandedSections((prev) =>
@@ -373,11 +175,6 @@ export function BuilderSEOPanel({
     )
   }
 
-  const blockHints = useMemo(() => {
-    if (!selectedNodeId) return []
-    return analysis.perBlockHints.get(selectedNodeId) || []
-  }, [analysis.perBlockHints, selectedNodeId])
-
   if (!tree.children || tree.children.length === 0) {
     return (
       <div className="flex min-h-[200px] flex-col items-center justify-center p-6 text-center">
@@ -392,73 +189,34 @@ export function BuilderSEOPanel({
 
   return (
     <div className="flex flex-col">
-      <div className="border-border flex items-center gap-4 border-b px-4 py-5">
-        <ScoreRing score={analysis.score} />
-        <div className="flex flex-col gap-1">
-          <span className="text-foreground text-xs font-medium">
-            {getScoreLabel(analysis.score)}
-          </span>
-          <ScoreSummary checks={analysis.checks} />
-        </div>
-      </div>
-
-      <div className="flex flex-col">
-        <CollapsibleSection
-          title="SEO Checks"
-          icon={Search}
-          expanded={expandedSections.includes('checks')}
-          onToggle={() => toggleSection('checks')}
-        >
-          <SEOChecksList checks={analysis.checks} />
-        </CollapsibleSection>
-
-        <CollapsibleSection
-          title="Readability"
-          icon={BarChart3}
-          expanded={expandedSections.includes('readability')}
-          onToggle={() => toggleSection('readability')}
-        >
-          <ReadabilityGrid readability={analysis.readability} />
-        </CollapsibleSection>
+      <PageAuditPanel audit={audit} />
 
-        {blockHints.length > 0 && (
-          <CollapsibleSection
-            title="Block Hints"
-            icon={Target}
-            expanded={expandedSections.includes('blockHints')}
-            onToggle={() => toggleSection('blockHints')}
-          >
-            <PerBlockHints hints={blockHints} />
-          </CollapsibleSection>
-        )}
-
-        <CollapsibleSection
-          title="Basic SEO"
-          icon={FileText}
-          expanded={expandedSections.includes('basicSeo')}
-          onToggle={() => toggleSection('basicSeo')}
-        >
-          <BasicSEOFields pageSettings={pageSettings} onPageSettingsChange={onPageSettingsChange} />
-        </CollapsibleSection>
-
-        <CollapsibleSection
-          title="Search Preview"
-          icon={Eye}
-          expanded={expandedSections.includes('searchPreview')}
-          onToggle={() => toggleSection('searchPreview')}
-        >
-          <SearchPreview pageSettings={pageSettings} />
-        </CollapsibleSection>
-
-        <CollapsibleSection
-          title="Social Preview"
-          icon={Globe}
-          expanded={expandedSections.includes('socialPreview')}
-          onToggle={() => toggleSection('socialPreview')}
-        >
-          <SocialPreview pageSettings={pageSettings} />
-        </CollapsibleSection>
-      </div>
+      <CollapsibleSection
+        title="Basic SEO"
+        icon={FileText}
+        expanded={expandedSections.includes('basicSeo')}
+        onToggle={() => toggleSection('basicSeo')}
+      >
+        <BasicSEOFields pageSettings={pageSettings} onPageSettingsChange={onPageSettingsChange} />
+      </CollapsibleSection>
+
+      <CollapsibleSection
+        title="Search Preview"
+        icon={Eye}
+        expanded={expandedSections.includes('searchPreview')}
+        onToggle={() => toggleSection('searchPreview')}
+      >
+        <SearchPreview pageSettings={pageSettings} />
+      </CollapsibleSection>
+
+      <CollapsibleSection
+        title="Social Preview"
+        icon={Globe}
+        expanded={expandedSections.includes('socialPreview')}
+        onToggle={() => toggleSection('socialPreview')}
+      >
+        <SocialPreview pageSettings={pageSettings} />
+      </CollapsibleSection>
     </div>
   )
 }