[dyad] Added counter for missing alt tags - wrote 1 file(s)

src/components/image-alt-display.tsx

@@ -15,6 +15,8 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
   const [showMissingOnly, setShowMissingOnly] = useState(false);
   const [imageErrors, setImageErrors] = useState<Record<string, boolean>>({});
 
+  const missingAltCount = images.filter((img) => !img.alt).length;
+
   const filteredImages = showMissingOnly
     ? images.filter((img) => !img.alt)
     : images;
@@ -25,15 +27,27 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
 
   return (
     <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-muted/50 rounded-lg">
         <div className="flex items-center space-x-2">
           <Checkbox
             id="missing-alt"
             checked={showMissingOnly}
             onCheckedChange={(checked) => setShowMissingOnly(!!checked)}
           />
-        <Label htmlFor="missing-alt">
-          Show only images with missing alt text
-        </Label>
+          <Label htmlFor="missing-alt">Show only missing alt text</Label>
+        </div>
+        <div>
+          {missingAltCount > 0 ? (
+            <p className="text-sm font-medium text-destructive">
+              <span className="font-bold">{missingAltCount}</span> of{" "}
+              {images.length} images are missing alt text.
+            </p>
+          ) : (
+            <p className="text-sm font-medium text-green-600">
+              Great! All {images.length} images have alt text.
+            </p>
+          )}
+        </div>
       </div>
       <div className="space-y-4">
         {filteredImages.map((image, index) => (