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

src/components/length-indicator.tsx

@@ -7,6 +7,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { getLengthIndicatorColor } from "@/lib/analysis";
 
 interface LengthIndicatorProps {
   length: number;
@@ -24,20 +25,24 @@ const DESCRIPTION_THRESHOLDS = {
 };
 
 export function LengthIndicator({ length, type }: LengthIndicatorProps) {
+  const color = getLengthIndicatorColor(length, type);
+
+  const colorClassMap = {
+    green: "bg-green-500",
+    yellow: "bg-yellow-500",
+    red: "bg-red-500",
+    gray: "bg-gray-400",
+  };
+
   const thresholds =
     type === "title" ? TITLE_THRESHOLDS : DESCRIPTION_THRESHOLDS;
-
-  let colorClass = "bg-red-500";
   let tooltipText = "Length is not optimal";
 
   if (length === 0) {
     tooltipText = "Not found";
-    colorClass = "bg-gray-400";
   } else if (length >= thresholds.good.min && length <= thresholds.good.max) {
-    colorClass = "bg-green-500";
     tooltipText = "Optimal length";
   } else if (length >= thresholds.ok.min && length <= thresholds.ok.max) {
-    colorClass = "bg-yellow-500";
     tooltipText = "Length could be improved";
   } else if (length < thresholds.ok.min) {
     tooltipText = "Too short";
@@ -49,7 +54,7 @@ export function LengthIndicator({ length, type }: LengthIndicatorProps) {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className={cn("h-3 w-3 rounded-full", colorClass)} />
+          <div className={cn("h-3 w-3 rounded-full", colorClassMap[color])} />
         </TooltipTrigger>
         <TooltipContent>
           <p>