@prenta/admin 1.17.6 → 1.17.8

package/src/views/MediaSeoAudit.tsx

@@ -24,6 +24,11 @@ export interface MediaSeoAuditItem {
   title?: string
   description?: string
   seoScore?: number
+  /**
+   * Derived server-side. `low-quality-alt` is an advisory that does not
+   * change `seoScore` (#715).
+   */
+  seoIssues?: Array<{ type: string }>
 }
 
 export interface MediaSeoAuditProps {
@@ -35,15 +40,21 @@ export interface MediaSeoAuditProps {
   onRetry?: () => void
 }
 
-type AuditFilter = 'all' | 'alt' | 'title' | 'poor'
+type AuditFilter = 'all' | 'alt' | 'quality' | 'title' | 'poor'
 
 const FILTERS: Array<[AuditFilter, string]> = [
   ['all', 'All items'],
   ['alt', 'Missing Alt'],
+  ['quality', 'Low-quality alt'],
   ['title', 'Missing Title'],
   ['poor', 'Poor score'],
 ]
 
+/** Topic-label or filename-stem alt. Advisory only — the score is unchanged. */
+export function hasLowQualityAlt(item: { seoIssues?: Array<{ type: string }> }): boolean {
+  return item.seoIssues?.some((issue) => issue.type === 'low-quality-alt') === true
+}
+
 const hasValue = (value?: string): boolean => Boolean(value?.trim())
 
 const hasAccessibleAlt = (item: MediaSeoAuditItem): boolean =>
@@ -107,7 +118,24 @@ function ScoreBar({ score }: { score: number }) {
   )
 }
 
-function SeoCheck({ set, missTone }: { set: boolean; missTone: 'err' | 'warn' }) {
+function SeoCheck({
+  set,
+  missTone,
+  review = false,
+}: {
+  set: boolean
+  missTone: 'err' | 'warn'
+  /** Present alt that still needs a human look (low-quality-alt). */
+  review?: boolean
+}) {
+  if (review) {
+    return (
+      <span className="inline-flex items-center gap-[3px] rounded-[4px] bg-[var(--warn-l)] px-[7px] py-[2px] text-[11px] font-medium text-[var(--warn)]">
+        <TriangleAlert size={10} aria-hidden />
+        Review
+      </span>
+    )
+  }
   if (set) {
     return (
       <span className="inline-flex items-center gap-[3px] rounded-[4px] bg-[var(--suc-l)] px-[7px] py-[2px] text-[11px] font-medium text-[var(--suc)]">
@@ -174,6 +202,8 @@ export function MediaSeoAudit({ items, onEdit, error, onRetry }: MediaSeoAuditPr
         return items
       case 'alt':
         return items.filter((it) => !hasAccessibleAlt(it))
+      case 'quality':
+        return items.filter((it) => hasLowQualityAlt(it))
       case 'title':
         return items.filter((it) => !hasValue(it.title))
       case 'poor':
@@ -329,7 +359,11 @@ export function MediaSeoAudit({ items, onEdit, error, onRetry }: MediaSeoAuditPr
                       </span>
                     </td>
                     <td className="px-3 py-[9px] align-middle">
-                      <SeoCheck set={hasAccessibleAlt(item)} missTone="err" />
+                      <SeoCheck
+                        set={hasAccessibleAlt(item)}
+                        missTone="err"
+                        review={hasLowQualityAlt(item)}
+                      />
                     </td>
                     <td className="px-3 py-[9px] align-middle">
                       <SeoCheck set={hasValue(item.title)} missTone="warn" />