feat: Add image generation options and history

src/components/images/ImageView.tsx

@@ -2,8 +2,9 @@ import { useState } from "react";
 import { ChatHeader } from "@/components/ChatHeader";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
-import { Download, Copy, Trash2, Sparkles } from "lucide-react";
+import { Download, Copy, Trash2, Sparkles, Clock, Search } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -11,31 +12,82 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+interface GeneratedImage {
+  id: string;
+  url: string;
+  prompt: string;
+  size: string;
+  timestamp: string;
+}
 
 export const ImageView = () => {
   const [prompt, setPrompt] = useState("");
   const [isGenerating, setIsGenerating] = useState(false);
-  const [images, setImages] = useState<string[]>([]);
+  const [selectedSize, setSelectedSize] = useState("1024x1024");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [images, setImages] = useState<GeneratedImage[]>([
+    {
+      id: "1",
+      url: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
+      prompt: "Paisagem futurista com cidades voadoras",
+      size: "1024x1024",
+      timestamp: "Há 2 horas",
+    },
+    {
+      id: "2",
+      url: "https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?w=512&h=512&fit=crop",
+      prompt: "Robô humanoide em estilo cyberpunk",
+      size: "1024x1536",
+      timestamp: "Há 5 horas",
+    },
+  ]);
 
   const handleGenerate = () => {
     setIsGenerating(true);
     // Simulate image generation
     setTimeout(() => {
-      setImages((prev) => [
+      const newImage: GeneratedImage = {
-        "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
+        id: Date.now().toString(),
-        ...prev,
+        url: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
-      ]);
+        prompt: prompt,
+        size: selectedSize,
+        timestamp: "Agora",
+      };
+      setImages([newImage, ...images]);
       setIsGenerating(false);
+      setPrompt("");
     }, 3000);
   };
 
+  const handleDelete = (id: string) => {
+    setImages(images.filter((img) => img.id !== id));
+  };
+
+  const filteredImages = images.filter((img) =>
+    img.prompt.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
   return (
     <div className="flex flex-col h-full">
       <ChatHeader />
 
+      <div className="flex-1 flex overflow-hidden">
+        {/* Main Content */}
         <ScrollArea className="flex-1">
-        <div className="max-w-5xl mx-auto p-6 space-y-6">
+          <div className="max-w-5xl mx-auto p-6">
-          {/* Generation Form */}
+            <Tabs defaultValue="generate" className="space-y-6">
+              <TabsList className="grid w-full grid-cols-2 glass-effect">
+                <TabsTrigger value="generate">Gerar Imagem</TabsTrigger>
+                <TabsTrigger value="history">
+                  <Clock className="w-4 h-4 mr-2" />
+                  Histórico
+                </TabsTrigger>
+              </TabsList>
+
+              {/* Generate Tab */}
+              <TabsContent value="generate" className="space-y-6">
                 <div className="glass-effect rounded-xl p-6 space-y-4">
                   <div className="space-y-2">
                     <label className="text-sm font-medium text-foreground">
@@ -54,15 +106,14 @@ export const ImageView = () => {
                       <label className="text-sm font-medium text-foreground">
                         Tamanho
                       </label>
-                <Select defaultValue="1024x1024">
+                      <Select value={selectedSize} onValueChange={setSelectedSize}>
                         <SelectTrigger>
                           <SelectValue />
                         </SelectTrigger>
-                  <SelectContent>
+                        <SelectContent className="glass-effect bg-popover border-border z-50">
-                    <SelectItem value="512x512">512x512</SelectItem>
+                          <SelectItem value="1024x1024">1024x1024 (Quadrado)</SelectItem>
-                    <SelectItem value="1024x1024">1024x1024</SelectItem>
+                          <SelectItem value="1024x1536">1024x1536 (Retrato)</SelectItem>
-                    <SelectItem value="1792x1024">1792x1024 (Wide)</SelectItem>
+                          <SelectItem value="1536x1024">1536x1024 (Paisagem)</SelectItem>
-                    <SelectItem value="1024x1792">1024x1792 (Tall)</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
@@ -97,23 +148,81 @@ export const ImageView = () => {
                   </div>
                 )}
 
-          {/* Generated Images Grid */}
+                {/* Recent Images Preview */}
-          {images.length > 0 && (
+                {!isGenerating && images.length > 0 && (
                   <div>
-              <h3 className="text-lg font-semibold mb-4">Imagens Geradas</h3>
+                    <h3 className="text-lg font-semibold mb-4">Última Geração</h3>
-              <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
+                    <ImageCard 
-                {images.map((image, index) => (
+                      image={images[0]} 
-                  <div
+                      onDelete={handleDelete}
-                    key={index}
+                    />
-                    className="group relative glass-effect rounded-xl overflow-hidden aspect-square animate-fade-in"
+                  </div>
-                  >
+                )}
+              </TabsContent>
+
+              {/* History Tab */}
+              <TabsContent value="history" className="space-y-4">
+                {/* Search */}
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+                  <Input
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder="Buscar por descrição..."
+                    className="pl-9"
+                  />
+                </div>
+
+                {/* Images Grid */}
+                {filteredImages.length > 0 ? (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {filteredImages.map((image) => (
+                      <ImageCard 
+                        key={image.id} 
+                        image={image}
+                        onDelete={handleDelete}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="glass-effect rounded-xl p-12 text-center">
+                    <Clock className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
+                    <p className="text-muted-foreground">
+                      {searchQuery ? "Nenhuma imagem encontrada" : "Nenhuma imagem gerada ainda"}
+                    </p>
+                  </div>
+                )}
+              </TabsContent>
+            </Tabs>
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+};
+
+interface ImageCardProps {
+  image: GeneratedImage;
+  onDelete: (id: string) => void;
+}
+
+const ImageCard = ({ image, onDelete }: ImageCardProps) => {
+  return (
+    <div className="group glass-effect rounded-xl overflow-hidden animate-fade-in">
+      <div className="relative aspect-square">
         <img
-                      src={image}
+          src={image.url}
-                      alt={`Generated ${index}`}
+          alt={image.prompt}
           className="w-full h-full object-cover"
         />
         <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <div className="absolute bottom-0 left-0 right-0 p-3 flex gap-2">
+          <div className="absolute bottom-0 left-0 right-0 p-4 space-y-2">
+            <p className="text-sm text-white line-clamp-2">{image.prompt}</p>
+            <div className="flex items-center justify-between text-xs text-white/70">
+              <span>{image.size}</span>
+              <span>{image.timestamp}</span>
+            </div>
+            <div className="flex gap-2">
               <Button
                 size="sm"
                 variant="secondary"
@@ -129,18 +238,14 @@ export const ImageView = () => {
                 size="sm"
                 variant="destructive"
                 className="gap-1"
+                onClick={() => onDelete(image.id)}
               >
                 <Trash2 className="w-3 h-3" />
               </Button>
             </div>
           </div>
         </div>
-                ))}
       </div>
     </div>
-          )}
-        </div>
-      </ScrollArea>
-    </div>
   );
 };