Finalizing AI Transcribe upload functionality

apps/web/app/transcribe/page.tsx

@@ -12,7 +12,10 @@ import {
   Clock,
   User,
   Volume2,
-  FileText
+  FileText,
+  Upload,
+  X,
+  FileAudio
 } from 'lucide-react';
 
 // Mock transcription data for demonstration
@@ -31,9 +34,14 @@ export default function TranscribePage() {
   const [duration, setDuration] = useState(40);
   const [searchQuery, setSearchQuery] = useState("");
   const [playbackSpeed, setPlaybackSpeed] = useState(1);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  
   const audioRef = useRef<HTMLAudioElement>(null);
   const transcriptRef = useRef<HTMLDivElement>(null);
   const activeLineRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Auto-scroll logic
   useEffect(() => {
@@ -45,6 +53,30 @@ export default function TranscribePage() {
     }
   }, [currentTime]);
 
+  const handleUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setSelectedFile(file);
+      simulateUpload();
+    }
+  };
+
+  const simulateUpload = () => {
+    setIsUploading(true);
+    let progress = 0;
+    const interval = setInterval(() => {
+      progress += 10;
+      setUploadProgress(progress);
+      if (progress >= 100) {
+        clearInterval(interval);
+        setTimeout(() => {
+          setIsUploading(false);
+          setUploadProgress(0);
+        }, 500);
+      }
+    }, 200);
+  };
+
   const formatTime = (seconds: number) => {
     const h = Math.floor(seconds / 3600);
     const m = Math.floor((seconds % 3600) / 60);
@@ -73,6 +105,20 @@ export default function TranscribePage() {
           <p className="text-sm text-slate-500">Real-time synchronized media player and transcript.</p>
         </div>
         <div className="flex gap-2">
+          <input 
+            type="file" 
+            ref={fileInputRef} 
+            onChange={handleUpload} 
+            className="hidden" 
+            accept="audio/*,video/*"
+          />
+          <button 
+            onClick={() => fileInputRef.current?.click()}
+            className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg font-bold hover:bg-slate-800 transition-colors shadow-lg"
+          >
+            <Upload size={18} />
+            Upload Files or Folder
+          </button>
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
             <input 
@@ -90,12 +136,39 @@ export default function TranscribePage() {
         </div>
       </div>
 
+      {isUploading && (
+        <div className="mx-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 p-4 rounded-xl flex items-center gap-4">
+          <div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white">
+            <Upload size={20} className="animate-bounce" />
+          </div>
+          <div className="flex-1">
+            <div className="flex justify-between items-center mb-1">
+              <p className="text-sm font-bold text-blue-900 dark:text-blue-100">Processing: {selectedFile?.name}</p>
+              <p className="text-xs font-bold text-blue-600">{uploadProgress}%</p>
+            </div>
+            <div className="w-full bg-blue-200 dark:bg-blue-800 h-2 rounded-full overflow-hidden">
+              <div 
+                className="bg-blue-600 h-full transition-all duration-300" 
+                style={{ width: `${uploadProgress}%` }}
+              ></div>
+            </div>
+          </div>
+          <button onClick={() => setIsUploading(false)} className="text-blue-400 hover:text-blue-600">
+            <X size={20} />
+          </button>
+        </div>
+      )}
+
       <div className="flex-1 flex gap-6 overflow-hidden px-4">
         {/* Left: Media Player & Controls */}
         <div className="w-1/3 flex flex-col gap-4">
           <div className="bg-slate-900 rounded-2xl p-8 flex flex-col items-center justify-center text-white aspect-video relative overflow-hidden group">
-            <Volume2 size={64} className="text-blue-500/20 mb-4" />
-            <p className="font-bold">Evidentiary_Hearing_022426.mp3</p>
+            {selectedFile ? (
+              <FileAudio size={64} className="text-blue-500 mb-4" />
+            ) : (
+              <Volume2 size={64} className="text-blue-500/20 mb-4" />
+            )}
+            <p className="font-bold truncate max-w-full px-4">{selectedFile ? selectedFile.name : 'Evidentiary_Hearing_022426.mp3'}</p>
             <p className="text-xs text-slate-500">Matter: Barden v. State Farm</p>
             
             {/* Minimalist Player UI Overlay */}