[dyad] Refactoring the app for modularity - wrote 12 file(s)

src/components/image-list.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { ImageFile, ConversionSettings } from "@/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Download, Trash2 } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { ImageListItem } from "./image-list-item";
+
+interface ImageListProps {
+  images: ImageFile[];
+  settings: ConversionSettings;
+  onClearAll: () => void;
+  onDownloadAll: () => void;
+  onDownloadSingle: (index: number) => void;
+  onRemove: (index: number) => void;
+  onFilenameChange: (index: number, newName: string) => void;
+  isConverting: boolean;
+  convertingIndex: number | null;
+}
+
+export function ImageList({
+  images,
+  settings,
+  onClearAll,
+  onDownloadAll,
+  onDownloadSingle,
+  onRemove,
+  onFilenameChange,
+  isConverting,
+  convertingIndex,
+}: ImageListProps) {
+  if (images.length === 0) {
+    return null;
+  }
+
+  const isProcessing = isConverting || convertingIndex !== null;
+
+  return (
+    <TooltipProvider>
+      <Card>
+        <CardHeader>
+          <div className="flex justify-between items-center">
+            <CardTitle>Uploaded Images</CardTitle>
+            <div className="flex items-center gap-2">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="sm" onClick={onClearAll} disabled={isProcessing}>
+                    <Trash2 className="mr-2 h-4 w-4" />Clear All
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent><p>Remove all uploaded images.</p></TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button onClick={onDownloadAll} disabled={isProcessing}>
+                    <Download className="mr-2 h-4 w-4" />
+                    {isConverting ? "Converting..." : `Download All (${images.length})`}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent><p>Convert and download all images with the current settings.</p></TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {images.map((image, index) => (
+              <ImageListItem
+                key={image.previewUrl}
+                image={image}
+                index={index}
+                settings={settings}
+                onFilenameChange={onFilenameChange}
+                onRemove={onRemove}
+                onDownload={onDownloadSingle}
+                isProcessing={isProcessing}
+              />
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </TooltipProvider>
+  );
+}