Fix bugs, convert thumbnail to png, add context menu

frontend/src/pages/HomePage.tsx

@@ -1,61 +1,36 @@
-/**
- * Home page — recently edited, library, and trash tabs.
- * Full implementation in Phase 1.
- */
+import { useEffect, useState } from 'react'
+import { LibraryHeader } from '../features/library/LibraryHeader'
+import { UploadArea } from '../features/library/UploadArea'
+import { DocumentGrid } from '../features/library/DocumentGrid'
+import { useLibrary } from '../features/library/useLibrary'
+
 export function HomePage() {
+  const [currentTab, setCurrentTab] = useState<'library' | 'trash'>('library')
+  const { fetchDocuments, fetchTrash } = useLibrary()
+
+  // Initial fetch
+  useEffect(() => {
+    if (currentTab === 'library') {
+      fetchDocuments()
+    } else {
+      fetchTrash()
+    }
+  }, [currentTab, fetchDocuments, fetchTrash])
+
   return (
-    <div className="min-h-screen bg-neutral-50">
-      {/* Header */}
-      <header className="border-b border-neutral-200 bg-white">
-        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
-          <h1 className="text-xl font-semibold text-neutral-900">PaperJet</h1>
-          <button
-            type="button"
-            className="rounded-lg bg-accent-500 px-4 py-2 text-sm font-medium text-white
-                       transition-colors duration-150 hover:bg-accent-600"
-          >
-            Upload PDF
-          </button>
-        </div>
-      </header>
-
-      {/* Main content */}
-      <main className="mx-auto max-w-7xl px-6 py-8">
-        {/* Tab navigation */}
-        <nav className="mb-8 flex gap-1 rounded-lg bg-neutral-100 p-1">
-          <button
-            type="button"
-            className="rounded-md bg-white px-4 py-2 text-sm font-medium text-neutral-900
-                       shadow-sm transition-colors"
-          >
-            Recently Edited
-          </button>
-          <button
-            type="button"
-            className="rounded-md px-4 py-2 text-sm font-medium text-neutral-500
-                       transition-colors hover:text-neutral-700"
-          >
-            Library
-          </button>
-          <button
-            type="button"
-            className="rounded-md px-4 py-2 text-sm font-medium text-neutral-500
-                       transition-colors hover:text-neutral-700"
-          >
-            Trash
-          </button>
-        </nav>
-
-        {/* Empty state placeholder */}
-        <div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed
-                        border-neutral-300 py-20 text-center">
-          <div className="mb-4 text-5xl">📄</div>
-          <h2 className="text-lg font-medium text-neutral-700">No documents yet</h2>
-          <p className="mt-1 text-sm text-neutral-500">
-            Upload a PDF to get started
-          </p>
-        </div>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-950 transition-colors">
+      <LibraryHeader currentTab={currentTab} onTabChange={setCurrentTab} />
+      
+      <main className="max-w-7xl mx-auto px-6 py-8">
+        {currentTab === 'library' ? (
+          <UploadArea>
+            <DocumentGrid isTrash={false} />
+          </UploadArea>
+        ) : (
+          <DocumentGrid isTrash={true} />
+        )}
       </main>
     </div>
   )
 }
+