wip pt3

app/page.tsx

@@ -4,11 +4,9 @@ export default function UploadPage() {
   return (
     <div className="container mx-auto py-8">
       <div className="max-w-3xl mx-auto">
-        <h1 className="text-3xl font-bold mb-6">Upload Image</h1>
-        <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+        <h1 className="text-3xl font-bold mb-6">Uploader</h1>
         <UploadComponent />
       </div>
     </div>
-    </div>
   )
 }

components/upload-component.tsx

@@ -7,20 +7,13 @@ import { Input } from "@/components/ui/input"
 import type { NostrEvent } from "nostr-tools"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerFooter,
-} from "@/components/ui/drawer"
 import { signEvent } from "@/lib/utils"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Copy, Check, ExternalLink, FileImage, Clock, Database } from "lucide-react"
+import { Copy, Check, ExternalLink, FileImage, Clock, Database, ArrowLeft } from "lucide-react"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Spinner } from "./spinner"
 
 interface UploadResponse {
   url: string
@@ -75,12 +68,20 @@ const CopyButton = ({ text }: { text: string }) => {
   )
 }
 
-const UploadResponseView = ({ data }: { data: UploadResponse }) => {
+const UploadResponseView = ({ data, onReset }: { data: UploadResponse; onReset: () => void }) => {
   const dimensions = data.nip94.tags.find((tag) => tag[0] === "dim")?.[1] || ""
   const blurhash = data.nip94.tags.find((tag) => tag[0] === "blurhash")?.[1] || ""
   const thumbUrl = data.nip94.tags.find((tag) => tag[0] === "thumb")?.[1] || ""
 
   return (
+    <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-300">
+      <div className="flex items-center">
+        <Button variant="ghost" size="sm" onClick={onReset} className="gap-1">
+          <ArrowLeft className="h-4 w-4" />
+          Upload Another
+        </Button>
+      </div>
+
       <Card className="w-full">
         <CardHeader>
           <div className="flex items-center justify-between">
@@ -214,10 +215,19 @@ const UploadResponseView = ({ data }: { data: UploadResponse }) => {
                 Open Image
               </a>
             </Button>
-          <Button>Copy Markdown</Button>
+            <Button
+              onClick={() => {
+                const markdown = `![Image](${data.url})`
+                navigator.clipboard.writeText(markdown)
+                alert("Markdown copied to clipboard!")
+              }}
+            >
+              Copy Markdown
+            </Button>
           </div>
         </CardContent>
       </Card>
+    </div>
   )
 }
 
@@ -262,7 +272,6 @@ const UploadComponent = () => {
   const loginType = typeof window !== "undefined" ? window.localStorage.getItem("loginType") : null
   const [previewUrl, setPreviewUrl] = useState("")
   const [isLoading, setIsLoading] = useState(false)
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [uploadedNoteId, setUploadedNoteId] = useState("")
   const [retryCount, setRetryCount] = useState(0)
   const [shouldFetch, setShouldFetch] = useState(false)
@@ -270,6 +279,7 @@ const UploadComponent = () => {
   const [events, setEvents] = useState<any[]>([])
   const [isNoteLoading, setIsNoteLoading] = useState(false)
   const [uploadResponse, setUploadResponse] = useState<UploadResponse | null>(null)
+  const [showUploadForm, setShowUploadForm] = useState(true)
 
   useEffect(() => {
     if (uploadedNoteId) {
@@ -322,6 +332,16 @@ const UploadComponent = () => {
     setServerChoice(value)
   }
 
+  const resetUpload = () => {
+    setUploadResponse(null)
+    setShowUploadForm(true)
+    setPreviewUrl("")
+    setUploadedNoteId("")
+    setEvents([])
+    setRetryCount(0)
+    setShouldFetch(false)
+  }
+
   async function onSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
     setIsLoading(true)
@@ -421,7 +441,7 @@ const UploadComponent = () => {
 
             setIsLoading(false)
             if (finalFileUrl != null) {
-              setIsDrawerOpen(true)
+              setShowUploadForm(false)
               setShouldFetch(true)
               setRetryCount(0)
             }
@@ -438,8 +458,8 @@ const UploadComponent = () => {
   }
 
   return (
-    <>
     <div className="w-full max-w-2xl mx-auto">
+      {showUploadForm ? (
         <form className="space-y-4" onSubmit={onSubmit}>
           <div className="grid w-full items-center gap-1.5">
             <Label htmlFor="file">Upload Image</Label>
@@ -474,25 +494,15 @@ const UploadComponent = () => {
             </Button>
           )}
         </form>
+      ) : uploadResponse ? (
+        <UploadResponseView data={uploadResponse} onReset={resetUpload} />
+      ) : (
+        <div className="flex flex-col items-center justify-center p-8">
+          <Spinner />
+          <p className="mt-4">Processing upload...</p>
+        </div>
+      )}
     </div>
-
-      <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
-        <DrawerContent className="max-h-[90vh] overflow-y-auto">
-          <DrawerHeader>
-            <DrawerTitle>Upload Result</DrawerTitle>
-            <DrawerDescription>Your file has been successfully uploaded</DrawerDescription>
-          </DrawerHeader>
-
-          <div className="px-4 py-2">{uploadResponse && <UploadResponseView data={uploadResponse} />}</div>
-
-          <DrawerFooter className="flex flex-col space-y-2">
-            <Button variant="outline" onClick={() => setIsDrawerOpen(false)} className="w-full">
-              Close
-            </Button>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    </>
   )
 }