Fix bugs, convert thumbnail to png, add context menu

frontend/src/features/library/UploadArea.tsx

@@ -0,0 +1,86 @@
+import { useRef, useState } from 'react'
+import { useLibrary } from './useLibrary'
+
+export const UploadArea = ({ children }: { children: React.ReactNode }) => {
+  const { uploadDocument } = useLibrary()
+  const [isDragging, setIsDragging] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(true)
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+  }
+
+  const handleDrop = async (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+    
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      await processFiles(e.dataTransfer.files)
+    }
+  }
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      await processFiles(e.target.files)
+      // Reset input so the same file can be selected again
+      e.target.value = ''
+    }
+  }
+
+  const processFiles = async (files: FileList) => {
+    // For now, process one by one
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+      if (file.type === 'application/pdf') {
+        try {
+          await uploadDocument(file)
+        } catch (err) {
+          console.error('Failed to upload', file.name, err)
+          // Could show toast notification here
+        }
+      }
+    }
+  }
+
+  return (
+    <div 
+      className="relative min-h-screen"
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <input 
+        type="file" 
+        accept="application/pdf"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        className="hidden"
+        multiple
+      />
+      
+      {/* Invisible overlay that appears when dragging to prevent flickering */}
+      {isDragging && (
+        <div className="absolute inset-0 z-50 bg-indigo-500/10 dark:bg-indigo-900/20 backdrop-blur-sm border-4 border-dashed border-indigo-500 dark:border-indigo-400 rounded-3xl m-4 flex items-center justify-center transition-all pointer-events-none">
+          <div className="bg-white/90 dark:bg-gray-800/90 px-8 py-6 rounded-2xl shadow-2xl flex flex-col items-center">
+            <svg className="w-16 h-16 text-indigo-500 mb-4 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <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" />
+            </svg>
+            <h3 className="text-2xl font-bold text-gray-900 dark:text-white">Drop PDFs here</h3>
+            <p className="text-gray-500 dark:text-gray-400 mt-2">Release to upload to your library</p>
+          </div>
+        </div>
+      )}
+
+      {children}
+    </div>
+  )
+}