@prenta/admin 1.6.1 → 1.7.0

package/src/views/seo/LinksTab.tsx

@@ -17,6 +17,7 @@ import {
 } from 'lucide-react'
 import { toast } from 'sonner'
 import {
+  applySeoInternalLink,
   fetchLinkGraphSnapshot,
   fetchLinkHealthIssues,
   fetchLinkSuggestions,
@@ -24,7 +25,9 @@ import {
   type LinkGraphEntityRef,
   type LinkSuggestion,
 } from '../../lib/seo-service.js'
-import { editPathForDoc } from '../../lib/collection-routes.js'
+import { editPathForDoc, sourceEditPath } from '../../lib/collection-routes.js'
+import { hasPlanFeature, type PlanInfo } from '../../lib/plan.js'
+import { PlanUpgradeCallout } from '../../components/PlanUpgradeCallout.js'
 import {
   SectionCard,
   SeoLoading,
@@ -88,10 +91,39 @@ function ActionCard({
 function SuggestionList({
   suggestions,
   loading,
+  targetEntityId,
+  onNavigate,
+  onApplied,
+  planInfo,
 }: {
   suggestions: LinkSuggestion[]
   loading: boolean
+  targetEntityId: string
+  onNavigate?: (path: string) => void
+  onApplied?: (suggestion: LinkSuggestion) => void
+  planInfo?: PlanInfo | null
 }) {
+  const [applyingKey, setApplyingKey] = useState<string | null>(null)
+  const inlineApplyEnabled = hasPlanFeature(planInfo, 'seo.inlineApply')
+
+  async function handleApprove(suggestion: LinkSuggestion) {
+    const key = `${suggestion.sourceEntityId}-${suggestion.fingerprint}`
+    setApplyingKey(key)
+    const res = await applySeoInternalLink({
+      sourceEntityId: suggestion.sourceEntityId,
+      targetEntityId,
+      anchorText: suggestion.anchorText,
+      fingerprint: suggestion.fingerprint,
+    })
+    setApplyingKey(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Link added.')
+    onApplied?.(suggestion)
+  }
+
   if (loading) {
     return (
       <p className="text-muted-foreground flex items-center gap-2 text-sm">
@@ -108,26 +140,64 @@ function SuggestionList({
     )
   }
   return (
-    <ul className="divide-border divide-y rounded-lg border">
-      {suggestions.map((s) => (
-        <li key={`${s.sourceEntityId}-${s.anchorText}`} className="px-4 py-3">
-          <p className="text-foreground text-sm font-medium">{s.sourceTitle}</p>
-          <p className="text-muted-foreground mt-0.5 text-xs">
-            Link &ldquo;{s.anchorText}&rdquo; → {s.sourceUrl || 'target page'}{' '}
-            <span className="text-muted-foreground/80 tabular-nums">
-              ({Math.round(s.confidence * 100)}% match)
-            </span>
-          </p>
-          {s.excerpt && (
-            <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">{s.excerpt}</p>
-          )}
-        </li>
-      ))}
-    </ul>
+    <div className="space-y-3">
+      {!inlineApplyEnabled && suggestions.some((s) => s.wrappable) ? (
+        <PlanUpgradeCallout feature="seo.inlineApply" upgradeUrl={planInfo?.upgradeUrl} />
+      ) : null}
+      <ul className="divide-border divide-y rounded-lg border">
+        {suggestions.map((s) => {
+          const key = `${s.sourceEntityId}-${s.fingerprint || s.anchorText}`
+          const busy = applyingKey === key
+          return (
+            <li key={key} className="px-4 py-3">
+              <p className="text-foreground text-sm font-medium">{s.sourceTitle}</p>
+              <p className="text-muted-foreground mt-0.5 text-xs">
+                Link &ldquo;{s.anchorText}&rdquo; → {s.sourceUrl || 'target page'}{' '}
+                <span className="text-muted-foreground/80 tabular-nums">
+                  ({Math.round(s.confidence * 100)}% match)
+                </span>
+              </p>
+              {s.excerpt && (
+                <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">{s.excerpt}</p>
+              )}
+              {s.wrappable && inlineApplyEnabled ? (
+                <div className="mt-2">
+                  <button
+                    type="button"
+                    className={btnPrimary}
+                    disabled={busy}
+                    onClick={() => void handleApprove(s)}
+                  >
+                    {busy ? <Loader2 className="h-4 w-4 animate-spin" aria-hidden /> : null}
+                    Approve link
+                  </button>
+                </div>
+              ) : onNavigate ? (
+                <div className="mt-2">
+                  <button
+                    type="button"
+                    className={btnSecondary}
+                    onClick={() => onNavigate(sourceEditPath(s.sourceCollection, s.sourceEntityId))}
+                  >
+                    Open in editor
+                  </button>
+                </div>
+              ) : null}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
   )
 }
 
-export function LinksTab({ onNavigate }: { onNavigate?: (path: string) => void }) {
+export function LinksTab({
+  onNavigate,
+  planInfo,
+}: {
+  onNavigate?: (path: string) => void
+  planInfo?: PlanInfo | null
+}) {
   const { data, loading, error, refetch } = useSeoResource(fetchLinkGraphSnapshot, [])
   const [indexing, setIndexing] = useState(false)
   const [healthLoading, setHealthLoading] = useState(false)
@@ -379,7 +449,26 @@ export function LinksTab({ onNavigate }: { onNavigate?: (path: string) => void }
               <p className="text-foreground mb-2 text-sm font-medium">
                 AI suggestions for &ldquo;{selectedOrphan.title}&rdquo;
               </p>
-              <SuggestionList suggestions={suggestions} loading={suggestLoading} />
+              <SuggestionList
+                suggestions={suggestions}
+                loading={suggestLoading}
+                targetEntityId={selectedOrphan.id}
+                onNavigate={onNavigate}
+                planInfo={planInfo}
+                onApplied={(applied) => {
+                  setSuggestions((prev) =>
+                    prev.filter(
+                      (row) =>
+                        !(
+                          row.fingerprint === applied.fingerprint &&
+                          row.sourceEntityId === applied.sourceEntityId
+                        ),
+                    ),
+                  )
+                  refetch()
+                  void loadSuggestions(selectedOrphan)
+                }}
+              />
             </div>
           )}
         </div>