[dyad] Replaced sort dropdown with icon button - wrote 1 file(s)

src/components/image-alt-display.tsx

@@ -5,15 +5,15 @@ import type { ImageAltData } from "@/app/actions";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
-import { ImageOff } from "lucide-react";
+import { ImageOff, ArrowDown, ArrowUp, ArrowDownUp } from "lucide-react";
 import { formatBytes } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 import {
-  Select,
+  Tooltip,
-  SelectContent,
+  TooltipContent,
-  SelectItem,
+  TooltipProvider,
-  SelectTrigger,
+  TooltipTrigger,
-  SelectValue,
+} from "@/components/ui/tooltip";
-} from "@/components/ui/select";
 
 interface ImageAltDisplayProps {
   images: ImageAltData[];
@@ -62,6 +62,18 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
     return "outline";
   };
 
+  const handleSortChange = () => {
+    if (sortOrder === "default") setSortOrder("desc");
+    else if (sortOrder === "desc") setSortOrder("asc");
+    else setSortOrder("default");
+  };
+
+  const sortTooltipText = {
+    default: "Sort by size (largest first)",
+    desc: "Sort by size (smallest first)",
+    asc: "Reset to default order",
+  };
+
   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">
@@ -87,26 +99,26 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
             <Label htmlFor="missing-alt">Show only missing alt text</Label>
           </div>
         </div>
-        <div className="flex items-center gap-2">
+        <TooltipProvider>
-          <Label htmlFor="sort-order" className="text-sm flex-shrink-0">
+          <Tooltip>
-            Sort by:
+            <TooltipTrigger asChild>
-          </Label>
+              <Button
-          <Select
+                variant="outline"
-            value={sortOrder}
+                size="icon"
-            onValueChange={(value) =>
+                onClick={handleSortChange}
-              setSortOrder(value as "default" | "asc" | "desc")
+                className="flex-shrink-0"
-            }
               >
-            <SelectTrigger className="w-full sm:w-[240px]" id="sort-order">
+                {sortOrder === "desc" && <ArrowDown className="h-4 w-4" />}
-              <SelectValue placeholder="Select sort order" />
+                {sortOrder === "asc" && <ArrowUp className="h-4 w-4" />}
-            </SelectTrigger>
+                {sortOrder === "default" && <ArrowDownUp className="h-4 w-4" />}
-            <SelectContent>
+                <span className="sr-only">Sort by size</span>
-              <SelectItem value="default">Default Order</SelectItem>
+              </Button>
-              <SelectItem value="desc">Size (Largest to Smallest)</SelectItem>
+            </TooltipTrigger>
-              <SelectItem value="asc">Size (Smallest to Largest)</SelectItem>
+            <TooltipContent>
-            </SelectContent>
+              <p>{sortTooltipText[sortOrder]}</p>
-          </Select>
+            </TooltipContent>
-        </div>
+          </Tooltip>
+        </TooltipProvider>
       </div>
       <div className="space-y-4">
         {sortedAndFilteredImages.map((image, index) => (