@actuate-media/cms-admin 0.4.0 → 0.7.0

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

@@ -0,0 +1,485 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { analyzeSEO } from '@actuate-media/cms-core';
+import type {
+  PageNode,
+  BuilderSEOAnalysis,
+  BuilderSEOCheck,
+  BuilderReadabilityResult,
+} from '@actuate-media/cms-core';
+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-green-500';
+  if (score >= 40) return 'text-amber-500';
+  return 'text-red-500';
+}
+
+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-green-500 shrink-0" />;
+    case 'warning':
+      return <AlertCircle size={14} className="text-amber-500 shrink-0" />;
+    case 'error':
+      return <XCircle size={14} className="text-red-500 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-green-500" />
+        <span className="text-xs text-muted-foreground">{passed} passed</span>
+      </div>
+      <div className="flex items-center gap-1.5">
+        <AlertCircle size={12} className="text-amber-500" />
+        <span className="text-xs text-muted-foreground">{warnings} warnings</span>
+      </div>
+      <div className="flex items-center gap-1.5">
+        <XCircle size={12} className="text-red-500" />
+        <span className="text-xs text-muted-foreground">{errors} issues</span>
+      </div>
+    </div>
+  );
+}
+
+function CollapsibleSection({
+  title,
+  icon: Icon,
+  expanded,
+  onToggle,
+  children,
+}: {
+  title: string;
+  icon: typeof Search;
+  expanded: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="border-b border-border last:border-b-0">
+      <button
+        type="button"
+        className="w-full text-left px-4 py-3 flex items-center justify-between hover:bg-muted/50 transition-colors"
+        onClick={onToggle}
+        aria-expanded={expanded}
+      >
+        <div className="flex items-center gap-2">
+          <Icon size={14} className="text-muted-foreground" />
+          <span className="text-xs font-medium text-foreground">{title}</span>
+        </div>
+        {expanded ? (
+          <ChevronUp size={14} className="text-muted-foreground" />
+        ) : (
+          <ChevronDown size={14} className="text-muted-foreground" />
+        )}
+      </button>
+      {expanded && <div className="px-4 pb-4">{children}</div>}
+    </div>
+  );
+}
+
+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-xs font-medium text-foreground">{check.label}</span>
+            <span className="text-xs text-muted-foreground">{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 rounded-md p-3 flex flex-col gap-1">
+        <div className="flex items-center gap-1.5">
+          <BarChart3 size={12} className="text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">Flesch Score</span>
+        </div>
+        <span className={`text-sm font-medium ${getScoreColor(readability.fleschScore)}`}>
+          {readability.fleschScore}
+        </span>
+        <span className="text-xs text-muted-foreground">{fleschLabel}</span>
+      </div>
+
+      <div className="bg-muted/50 rounded-md p-3 flex flex-col gap-1">
+        <div className="flex items-center gap-1.5">
+          <Type size={12} className="text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">Word Count</span>
+        </div>
+        <span className="text-sm font-medium text-foreground">
+          {readability.wordCount}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {readability.wordCount >= 300 ? 'Good length' : 'Short'}
+        </span>
+      </div>
+
+      <div className="bg-muted/50 rounded-md p-3 flex flex-col gap-1">
+        <div className="flex items-center gap-1.5">
+          <FileText size={12} className="text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">Avg Sentence</span>
+        </div>
+        <span className="text-sm font-medium text-foreground">
+          {readability.avgSentenceLength} words
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {readability.avgSentenceLength <= 20 ? 'Good' : 'Long'}
+        </span>
+      </div>
+
+      <div className="bg-muted/50 rounded-md p-3 flex flex-col gap-1">
+        <div className="flex items-center gap-1.5">
+          <Clock size={12} className="text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">Reading Time</span>
+        </div>
+        <span className="text-sm font-medium text-foreground">
+          {readability.readingTime} min
+        </span>
+        <span className="text-xs text-muted-foreground">
+          ~{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-xs font-medium text-foreground">{hint.label}</span>
+            <span className="text-xs text-muted-foreground">{hint.detail}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function BasicSEOFields({
+  pageSettings,
+  onPageSettingsChange,
+}: {
+  pageSettings: PageSettings;
+  onPageSettingsChange: (settings: Partial<PageSettings>) => void;
+}) {
+  const metaTitleLength = (pageSettings.metaTitle || '').length;
+  const metaDescLength = (pageSettings.metaDescription || '').length;
+
+  return (
+    <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-xs font-medium text-foreground">Meta Title</label>
+          <span className={`text-xs ${metaTitleLength > 60 ? 'text-red-500' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}>
+            {metaTitleLength}/60
+          </span>
+        </div>
+        <input
+          type="text"
+          value={pageSettings.metaTitle || ''}
+          onChange={(e) => onPageSettingsChange({ metaTitle: e.target.value })}
+          placeholder="Page title for search engines"
+          className="w-full px-3 py-2 text-sm bg-input-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <div className="flex items-center justify-between">
+          <label className="text-xs font-medium text-foreground">Meta Description</label>
+          <span className={`text-xs ${metaDescLength > 160 ? 'text-red-500' : metaDescLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}>
+            {metaDescLength}/160
+          </span>
+        </div>
+        <textarea
+          value={pageSettings.metaDescription || ''}
+          onChange={(e) => onPageSettingsChange({ metaDescription: e.target.value })}
+          placeholder="Brief description of the page content"
+          rows={3}
+          className="w-full px-3 py-2 text-sm bg-input-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary resize-none"
+        />
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <label className="text-xs font-medium text-foreground">Focus Keyphrase</label>
+        <input
+          type="text"
+          value={pageSettings.focusKeyphrase || ''}
+          onChange={(e) => onPageSettingsChange({ focusKeyphrase: e.target.value })}
+          placeholder="Primary keyword or phrase"
+          className="w-full px-3 py-2 text-sm bg-input-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+        />
+      </div>
+    </div>
+  );
+}
+
+function SearchPreview({ pageSettings }: { pageSettings: PageSettings }) {
+  const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page';
+  const description = pageSettings.metaDescription || 'No description set';
+  const slug = pageSettings.slug || 'page';
+
+  return (
+    <div className="bg-background rounded-md border border-border p-4">
+      <p className="text-xs text-muted-foreground mb-2">Google Search Preview</p>
+      <div className="flex flex-col gap-1">
+        <p className="text-sm text-primary truncate">
+          {title}
+        </p>
+        <p className="text-xs text-green-600 truncate">
+          example.com/{slug}
+        </p>
+        <p className="text-xs text-muted-foreground line-clamp-2">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function SocialPreview({ pageSettings }: { pageSettings: PageSettings }) {
+  const title = pageSettings.metaTitle || pageSettings.title || 'Untitled Page';
+  const description = pageSettings.metaDescription || 'No description set';
+
+  return (
+    <div className="bg-background rounded-md border border-border overflow-hidden">
+      <p className="text-xs text-muted-foreground px-4 pt-3 pb-2">Open Graph Preview</p>
+      {pageSettings.ogImage && (
+        <div className="w-full h-32 bg-muted flex items-center justify-center overflow-hidden">
+          <img
+            src={pageSettings.ogImage}
+            alt="OG preview"
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
+      {!pageSettings.ogImage && (
+        <div className="w-full h-32 bg-muted flex items-center justify-center">
+          <Globe size={24} className="text-muted-foreground" />
+        </div>
+      )}
+      <div className="p-3 flex flex-col gap-1">
+        <p className="text-xs text-muted-foreground uppercase">example.com</p>
+        <p className="text-sm font-medium text-foreground truncate">{title}</p>
+        <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export function BuilderSEOPanel({
+  tree,
+  pageSettings,
+  onPageSettingsChange,
+  selectedNodeId,
+}: BuilderSEOPanelProps) {
+  const analysis = useMemo<BuilderSEOAnalysis>(
+    () => analyzeSEO(tree, pageSettings as any),
+    [tree, pageSettings],
+  );
+
+  const [expandedSections, setExpandedSections] = useState<string[]>(['checks']);
+
+  const toggleSection = (section: string) => {
+    setExpandedSections((prev) =>
+      prev.includes(section)
+        ? prev.filter((s) => s !== section)
+        : [...prev, section]
+    );
+  };
+
+  const blockHints = useMemo(() => {
+    if (!selectedNodeId) return [];
+    return analysis.perBlockHints.get(selectedNodeId) || [];
+  }, [analysis.perBlockHints, selectedNodeId]);
+
+  if (!tree.children || tree.children.length === 0) {
+    return (
+      <div className="p-6 flex flex-col items-center justify-center text-center min-h-[200px]">
+        <Search size={32} className="text-muted-foreground mb-3" />
+        <p className="text-sm font-medium text-foreground mb-1">SEO Analysis</p>
+        <p className="text-xs text-muted-foreground">
+          Add content to your page to see SEO analysis
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex items-center gap-4 px-4 py-5 border-b border-border">
+        <ScoreRing score={analysis.score} />
+        <div className="flex flex-col gap-1">
+          <span className="text-xs font-medium text-foreground">{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>
+
+        {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>
+    </div>
+  );
+}