refactor: Clean up and enhance upload component with improved UI and progress handling

src/app/page.tsx

@@ -5,7 +5,6 @@ import { useState, useEffect, useRef } from 'react';
 const CHUNK_SIZE = 8 * 1024 * 1024; // 8 MB
 const PARALLEL_UPLOADS = 4;
 
-// Helper to convert ArrayBuffer to Base64 string
 function bufferToBase64(buffer: ArrayBuffer) {
   let binary = '';
   const bytes = new Uint8Array(buffer);
@@ -16,14 +15,12 @@ function bufferToBase64(buffer: ArrayBuffer) {
   return window.btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
 }
 
-// Helper to format seconds into MM:SS
 function formatTime(seconds: number) {
     const minutes = Math.floor(seconds / 60);
     const remainingSeconds = Math.floor(seconds % 60);
     return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
 }
 
-// Helper to format bytes into a readable string
 function formatBytes(bytes: number, decimals = 2) {
     if (bytes === 0) return '0 Bytes';
     const k = 1024;
@@ -38,15 +35,19 @@ export default function Home() {
   const [uploadState, setUploadState] = useState<'idle' | 'processing' | 'uploading' | 'complete'>('idle');
   const [progress, setProgress] = useState(0);
   const [downloadUrl, setDownloadUrl] = useState('');
-  
-  // New state for detailed progress
   const [uploadedSize, setUploadedSize] = useState(0);
   const [uploadSpeed, setUploadSpeed] = useState(0);
   const [elapsedTime, setElapsedTime] = useState(0);
   const [etr, setEtr] = useState(0);
+  const [copyState, setCopyState] = useState<'idle' | 'copied'>('idle');
 
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const lastUploadedSizeRef = useRef(0);
+  const uploadedSizeRef = useRef(0);
+
+  useEffect(() => {
+    uploadedSizeRef.current = uploadedSize;
+  }, [uploadedSize]);
 
   useEffect(() => {
     if (uploadState === 'uploading') {
@@ -54,23 +55,17 @@ export default function Home() {
       lastUploadedSizeRef.current = 0;
 
       timerRef.current = setInterval(() => {
-        // elapsed time is based on a fixed start time
         setElapsedTime((Date.now() - startTime) / 1000);
-
+        const currentUploadedSize = uploadedSizeRef.current;
-        // Speed calculation
-        const currentUploadedSize = uploadedSizeRef.current; // Get latest size from ref
         const speed = currentUploadedSize - lastUploadedSizeRef.current;
         setUploadSpeed(speed > 0 ? speed : 0);
 
-        // ETR calculation
         if (speed > 0 && selectedFile) {
           const remainingSize = selectedFile.size - currentUploadedSize;
           setEtr(remainingSize / speed);
         }
-
         lastUploadedSizeRef.current = currentUploadedSize;
-      }, 1000); // Update every second
+      }, 1000);
-
     } else if (timerRef.current) {
       clearInterval(timerRef.current);
       timerRef.current = null;
@@ -84,12 +79,6 @@ export default function Home() {
     };
   }, [uploadState, selectedFile]);
 
-  // Ref to hold the latest uploaded size for the timer to access
-  const uploadedSizeRef = useRef(0);
-  useEffect(() => {
-    uploadedSizeRef.current = uploadedSize;
-  }, [uploadedSize]);
-
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.target.files;
     if (files && files.length > 0) {
@@ -114,6 +103,12 @@ export default function Home() {
     event.preventDefault();
   };
 
+  const handleCopy = () => {
+    navigator.clipboard.writeText(downloadUrl);
+    setCopyState('copied');
+    setTimeout(() => setCopyState('idle'), 2000);
+  };
+
   const startUploadProcess = async (file: File) => {
     if (!file) return;
 
@@ -124,14 +119,7 @@ export default function Home() {
     setElapsedTime(0);
     setEtr(0);
 
-    // 1. Generate encryption key
+    const fileKey = await window.crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
-    const fileKey = await window.crypto.subtle.generateKey(
-      { name: 'AES-GCM', length: 256 },
-      true,
-      ['encrypt', 'decrypt']
-    );
-
-    // 2. Call create-file API
     const numParts = Math.ceil(file.size / CHUNK_SIZE);
     const createResponse = await fetch('/api/create-file', {
       method: 'POST',
@@ -140,7 +128,6 @@ export default function Home() {
     });
     const { file_id } = await createResponse.json();
 
-    // 3. Chunk and encrypt file
     setUploadState('uploading');
     const chunks: { index: number; data: Blob }[] = [];
     for (let i = 0; i < numParts; i++) {
@@ -148,17 +135,11 @@ export default function Home() {
       const end = Math.min(start + CHUNK_SIZE, file.size);
       const chunk = file.slice(start, end);
       const iv = window.crypto.getRandomValues(new Uint8Array(12));
-      const encryptedChunk = await window.crypto.subtle.encrypt(
+      const encryptedChunk = await window.crypto.subtle.encrypt({ name: 'AES-GCM', iv: iv }, fileKey, await chunk.arrayBuffer());
-        { name: 'AES-GCM', iv: iv },
-        fileKey,
-        await chunk.arrayBuffer()
-      );
-      // Prepend IV to the encrypted data
       const combinedData = new Blob([iv, new Uint8Array(encryptedChunk)]);
       chunks.push({ index: i, data: combinedData });
     }
 
-    // 4. Upload parts with concurrency limit
     let uploadedCount = 0;
     const uploadChunk = async (chunk: { index: number; data: Blob }) => {
       const formData = new FormData();
@@ -186,7 +167,6 @@ export default function Home() {
         await Promise.race(active);
     }
 
-    // 5. Complete upload
     const completeResponse = await fetch('/api/complete-upload', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -194,7 +174,6 @@ export default function Home() {
     });
     const { download_token } = await completeResponse.json();
 
-    // 6. Generate and show download link
     const exportedKey = await window.crypto.subtle.exportKey('raw', fileKey);
     const keyString = bufferToBase64(exportedKey);
     setUploadState('complete');
@@ -202,59 +181,97 @@ export default function Home() {
   };
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-gray-900 text-white">
+    <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-gray-900 text-white font-sans">
-      <div className="w-full max-w-3xl text-center">
+        <div className="w-full max-w-xl">
-        <h1 className="text-4xl font-bold mb-4">Discord Storage</h1>
+            <div className="text-center mb-8">
-        <p className="text-lg text-gray-400 mb-8">Upload large files, encrypted and stored on Discord. 7-day retention.</p>
+                <h1 className="text-4xl font-bold">Discord Storage</h1>
-
+                <p className="text-lg text-gray-400">Upload large files, encrypted and stored on Discord. 7-day retention.</p>
-        {uploadState === 'idle' && (
-          <div 
-            onDrop={handleDrop} 
-            onDragOver={handleDragOver} 
-            className="bg-gray-800 border-2 border-dashed border-gray-600 rounded-lg p-12 cursor-pointer hover:border-gray-400 transition-colors"
-          >
-            <input type="file" className="hidden" id="file-upload" onChange={handleFileChange} />
-            <label htmlFor="file-upload" className="flex flex-col items-center cursor-pointer">
-              <svg className="w-16 h-16 text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
-              <p className="text-xl font-semibold">Drag & drop your file here</p>
-              <p className="text-gray-500">or click to select a file</p>
-            </label>
-          </div>
-        )}
-
-        {(uploadState === 'processing' || uploadState === 'uploading') && (
-          <div className="mt-8 w-full text-left">
-            <p className="mb-2 truncate text-center">{selectedFile?.name}</p>
-            <div className="bg-gray-700 rounded-full h-4 w-full mb-2">
-              <div className="bg-blue-600 h-4 rounded-full transition-width duration-300" style={{ width: `${progress}%` }}></div>
             </div>
-            <div className="flex justify-between text-sm text-gray-400">
-                <span>{formatBytes(uploadedSize)} / {selectedFile ? formatBytes(selectedFile.size) : '0 Bytes'}</span>
-                <span>{progress}%</span>
-            </div>
-            <div className="flex justify-between text-sm text-gray-400 mt-2">
-                <span>Speed: {formatBytes(uploadSpeed)}/s</span>
-                <span>Elapsed: {formatTime(elapsedTime)}</span>
-                <span>ETR: {etr > 0 && etr < Infinity ? formatTime(etr) : '--:--'}</span>
-            </div>
-          </div>
-        )}
 
-        {uploadState === 'complete' && (
+            <div className="w-full bg-gray-800 rounded-xl shadow-2xl p-8 space-y-6">
-            <div className="mt-8 w-full text-left bg-gray-800 rounded-lg p-4">
+                {uploadState === 'idle' && (
-                <p className="text-lg font-semibold">Upload Complete!</p>
+                    <div 
-                <p className="text-sm text-gray-400 mb-2">Save this link to download your file. The link contains the decryption key.</p>
+                        onDrop={handleDrop} 
-                <input 
+                        onDragOver={handleDragOver} 
-                    type="text" 
+                        className="border-2 border-dashed border-gray-600 rounded-lg p-12 text-center cursor-pointer hover:border-blue-400 hover:bg-gray-700/50 transition-colors duration-300"
-                    readOnly 
+                    >
-                    value={downloadUrl}
+                        <input type="file" className="hidden" id="file-upload" onChange={handleFileChange} />
-                    onClick={(e) => (e.target as HTMLInputElement).select()}
+                        <label htmlFor="file-upload" className="flex flex-col items-center justify-center cursor-pointer space-y-4">
-                    className="w-full p-2 bg-gray-900 rounded border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
-                />
+                                <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-            </div>
+                            </svg>
-        )}
+                            <p className="text-xl font-semibold">Drag & drop your file here</p>
+                            <p className="text-gray-500">or click to select a file</p>
+                        </label>
+                    </div>
+                )}
 
-      </div>
+                {(uploadState === 'processing' || uploadState === 'uploading') && (
+                    <div className="w-full space-y-4">
+                        <div className="flex items-center justify-between">
+                            <h2 className="text-2xl font-bold">Uploading...</h2>
+                            <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h5" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 20v-5h-5" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 20v-5h5" />
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 4v5h-5" />
+                            </svg>
+                        </div>
+                        <p className="text-gray-400 truncate text-center">{selectedFile?.name}</p>
+                        
+                        <div className="space-y-2">
+                            <div className="bg-gray-700 rounded-full h-4 w-full overflow-hidden">
+                                <div className="bg-gradient-to-r from-blue-500 to-green-500 h-4 rounded-full transition-all duration-300 ease-in-out" style={{ width: `${progress}%` }}></div>
+                            </div>
+                            <div className="flex justify-between text-sm font-mono text-gray-300">
+                                <span>{progress}%</span>
+                                <span>{formatBytes(uploadedSize)} / {selectedFile ? formatBytes(selectedFile.size) : '0 Bytes'}</span>
+                            </div>
+                        </div>
+
+                        <div className="grid grid-cols-3 gap-4 text-center text-sm font-mono text-gray-400 pt-2">
+                            <div>
+                                <p className="font-semibold">Speed</p>
+                                <p>{formatBytes(uploadSpeed)}/s</p>
+                            </div>
+                            <div>
+                                <p className="font-semibold">Elapsed</p>
+                                <p>{formatTime(elapsedTime)}</p>
+                            </div>
+                            <div>
+                                <p className="font-semibold">ETR</p>
+                                <p>{etr > 0 && etr < Infinity ? formatTime(etr) : '--:--'}</p>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {uploadState === 'complete' && (
+                    <div className="text-center space-y-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-green-400 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <h2 className="text-2xl font-bold text-green-400">Upload Complete!</h2>
+                        <p className="text-gray-300">Your file is ready. Save the link below.</p>
+                        <div className="relative">
+                            <input 
+                                type="text" 
+                                readOnly 
+                                value={downloadUrl}
+                                className="w-full p-3 pr-28 bg-gray-900 rounded-lg border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
+                            />
+                            <button 
+                                onClick={handleCopy}
+                                className="absolute inset-y-0 right-0 flex items-center px-4 bg-blue-600 hover:bg-blue-700 rounded-r-lg text-white font-semibold transition-colors duration-300"
+                            >
+                                {copyState === 'copied' ? 'Copied!' : 'Copy'}
+                            </button>
+                        </div>
+                        <p className="text-xs text-gray-500">This link contains the decryption key. Keep it safe!</p>
+                    </div>
+                )}
+            </div>
+        </div>
     </main>
   );
-}
+}