[dyad] Added status indicators to tabs - wrote 4 file(s)

src/components/meta-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -14,7 +14,11 @@ import {
   ImageOff,
   Search,
 } from "lucide-react";
-import { extractMetaData, type HeadlineNode, type ImageAltData } from "@/app/actions";
+import {
+  extractMetaData,
+  type HeadlineNode,
+  type ImageAltData,
+} from "@/app/actions";
 import { LengthIndicator } from "./length-indicator";
 import { CopyButton } from "./copy-button";
 import { SerpPreview } from "./serp-preview";
@@ -23,6 +27,8 @@ import { FaqDisplay } from "./faq-display";
 import { HeadlineTree } from "./headline-tree";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ImageAltDisplay } from "./image-alt-display";
+import { TabIndicator } from "./tab-indicator";
+import { getLengthIndicatorColor, type IndicatorColor } from "@/lib/analysis";
 
 interface MetaData {
   title: string;
@@ -57,6 +63,62 @@ export function MetaForm() {
     }
   }, [metaData]);
 
+  const tabColors = useMemo(() => {
+    if (!metaData) return null;
+
+    // Analysis Tab
+    const titleStatus = getLengthIndicatorColor(editableTitle.length, "title");
+    const descStatus = getLengthIndicatorColor(
+      editableDescription.length,
+      "description"
+    );
+    const analysisStatuses: IndicatorColor[] = [titleStatus, descStatus];
+    let analysisColor: IndicatorColor;
+    if (
+      analysisStatuses.includes("red") ||
+      analysisStatuses.includes("gray")
+    ) {
+      analysisColor = "red";
+    } else if (analysisStatuses.includes("yellow")) {
+      analysisColor = "yellow";
+    } else {
+      analysisColor = "green";
+    }
+
+    // Headlines Tab
+    let headlinesColor: IndicatorColor = "gray";
+    if (metaData.headlines && metaData.headlines.length > 0) {
+      const h1s = metaData.headlines.filter((h) => h.tag === "h1");
+      if (h1s.length === 0) {
+        headlinesColor = "red";
+      } else if (h1s.length > 1) {
+        headlinesColor = "yellow";
+      } else {
+        headlinesColor = "green";
+      }
+    }
+
+    // Images Tab
+    let imagesColor: IndicatorColor = "gray";
+    if (metaData.images && metaData.images.length > 0) {
+      const missingAltCount = metaData.images.filter((img) => !img.alt).length;
+      imagesColor = missingAltCount > 0 ? "red" : "green";
+    }
+
+    // FAQ Tab
+    let faqColor: IndicatorColor = "gray";
+    if (metaData.faq && metaData.faq.length > 0) {
+      faqColor = "green";
+    }
+
+    return {
+      analysis: analysisColor,
+      headlines: headlinesColor,
+      images: imagesColor,
+      faq: faqColor,
+    };
+  }, [metaData, editableTitle, editableDescription]);
+
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setLoading(true);
@@ -149,15 +211,27 @@ export function MetaForm() {
       {!loading && metaData && (
         <Tabs defaultValue="analysis" className="w-full">
           <TabsList className="mb-4">
-            <TabsTrigger value="analysis">Meta Analysis</TabsTrigger>
+            <TabsTrigger value="analysis">
+              {tabColors && <TabIndicator color={tabColors.analysis} />}
+              Meta Analysis
+            </TabsTrigger>
             {metaData.headlines && metaData.headlines.length > 0 && (
-              <TabsTrigger value="headlines">Headlines</TabsTrigger>
+              <TabsTrigger value="headlines">
+                {tabColors && <TabIndicator color={tabColors.headlines} />}
+                Headlines
+              </TabsTrigger>
             )}
             {metaData.images && metaData.images.length > 0 && (
-              <TabsTrigger value="images">Images</TabsTrigger>
+              <TabsTrigger value="images">
+                {tabColors && <TabIndicator color={tabColors.images} />}
+                Images
+              </TabsTrigger>
             )}
             {metaData.faq && metaData.faq.length > 0 && (
-              <TabsTrigger value="faq">FAQ</TabsTrigger>
+              <TabsTrigger value="faq">
+                {tabColors && <TabIndicator color={tabColors.faq} />}
+                FAQ
+              </TabsTrigger>
             )}
           </TabsList>