[dyad] Added image file size sorting - wrote 1 file(s)

src/components/image-alt-display.tsx

@@ -7,6 +7,13 @@ import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { ImageOff } from "lucide-react";
 import { formatBytes } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 interface ImageAltDisplayProps {
   images: ImageAltData[];
@@ -15,6 +22,9 @@ interface ImageAltDisplayProps {
 export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
   const [showMissingOnly, setShowMissingOnly] = useState(false);
   const [imageErrors, setImageErrors] = useState<Record<string, boolean>>({});
+  const [sortOrder, setSortOrder] = useState<"default" | "asc" | "desc">(
+    "default"
+  );
 
   const missingAltCount = images.filter((img) => !img.alt).length;
 
@@ -22,6 +32,25 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
     ? images.filter((img) => !img.alt)
     : images;
 
+  const sortedAndFilteredImages = [...filteredImages].sort((a, b) => {
+    if (sortOrder === "default") {
+      return 0;
+    }
+
+    const sizeA = a.size;
+    const sizeB = b.size;
+
+    if (sizeA === null && sizeB === null) return 0;
+    if (sizeA === null) return 1;
+    if (sizeB === null) return -1;
+
+    if (sortOrder === "asc") {
+      return sizeA - sizeB;
+    } else {
+      return sizeB - sizeA;
+    }
+  });
+
   const handleImageError = (src: string) => {
     setImageErrors((prev) => ({ ...prev, [src]: true }));
   };
@@ -36,13 +65,35 @@ 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">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-4">
-          <Checkbox
+          <div className="flex items-center space-x-2">
-            id="missing-alt"
+            <Checkbox
-            checked={showMissingOnly}
+              id="missing-alt"
-            onCheckedChange={(checked) => setShowMissingOnly(!!checked)}
+              checked={showMissingOnly}
-          />
+              onCheckedChange={(checked) => setShowMissingOnly(!!checked)}
-          <Label htmlFor="missing-alt">Show only missing alt text</Label>
+            />
+            <Label htmlFor="missing-alt">Show only missing alt text</Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <Label htmlFor="sort-order" className="text-sm flex-shrink-0">
+              Sort by:
+            </Label>
+            <Select
+              value={sortOrder}
+              onValueChange={(value) =>
+                setSortOrder(value as "default" | "asc" | "desc")
+              }
+            >
+              <SelectTrigger className="w-full sm:w-[240px]" id="sort-order">
+                <SelectValue placeholder="Select sort order" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="default">Default Order</SelectItem>
+                <SelectItem value="desc">Size (Largest to Smallest)</SelectItem>
+                <SelectItem value="asc">Size (Smallest to Largest)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
         </div>
         <div>
           {missingAltCount > 0 ? (
@@ -58,7 +109,7 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
         </div>
       </div>
       <div className="space-y-4">
-        {filteredImages.map((image, index) => (
+        {sortedAndFilteredImages.map((image, index) => (
           <div
             key={index}
             className="flex items-start gap-4 p-4 border rounded-lg"