Upload pages/index.js with huggingface_hub

pages/index.js

@@ -1,140 +1,93 @@
 import { useState, useEffect } from 'react';
 import Header from '../components/Header';
-import ThreadList from '../components/ThreadList';
-import ExportControls from '../components/ExportControls';
-import { Database, FileJson, FileText, RefreshCw, CheckCircle, AlertCircle } from 'lucide-react';
+import Sidebar from '../components/Sidebar';
+import EmailList from '../components/EmailList';
+import EmailDetail from '../components/EmailDetail';
+import { Search, Plus, Filter, CheckCircle2, AlertCircle } from 'lucide-react';
 
-// Mock data generator to simulate Perplexity threads
-const generateMockThreads = (count) => {
-  return Array.from({ length: count }).map((_, i) => ({
-    id: `thread-${Date.now()}-${i}`,
-    title: `Research Topic #${i + 1}: Artificial Intelligence in ${['Medicine', 'Finance', 'Education', 'Climate'][i % 4]}`,
-    date: new Date(Date.now() - i * 86400000).toLocaleDateString(),
-    query: `How does AI impact ${['healthcare', 'banking', 'schools', 'environment'][i % 4]}?`,
-    citations: Math.floor(Math.random() * 15) + 2,
-    status: 'completed'
-  }));
-};
+const MOCK_EMAILS = [
+  { id: '1', sender: 'Google Cloud', subject: 'Your monthly billing statement', body: 'Hello, your Google Cloud statement for October is now available for review...', date: '10:45 AM', read: false, label: 'Finance', priority: 'high' },
+  { id: '2', sender: 'LinkedIn', subject: 'New connection request from Sarah', body: 'Sarah Jenkins wants to connect with you. She is a Senior Engineer at TechCorp...', date: 'Yesterday', read: true, label: 'Social', priority: 'low' },
+  { id: '3', sender: 'GitHub', subject: '[Security] Dependabot alert for your repo', body: 'Dependabot has found a vulnerability in one of your dependencies. Please update...', date: 'Oct 24', read: false, label: 'Work', priority: 'high' },
+  { id: '4', sender: 'Netflix', subject: 'New arrival: Stranger Things Season 5', body: 'The wait is finally over. Dive back into the Upside Down now on Netflix...', date: 'Oct 23', read: true, label: 'Promotions', priority: 'low' },
+  { id: '5', sender: 'Amazon', subject: 'Your package has been delivered', body: 'Good news! Your order #123-456 has been delivered to your front porch...', date: 'Oct 22', read: true, label: 'Finance', priority: 'medium' },
+];
 
 export default function Home() {
-  const [threads, setThreads] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [exporting, setExporting] = useState(false);
-  const [exportProgress, setExportProgress] = useState(0);
-  const [selectedThreads, setSelectedThreads] = useState([]);
+  const [emails, setEmails] = useState(MOCK_EMAILS);
+  const [selectedId, setSelectedId] = useState(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeFilter, setActiveFilter] = useState('All');
   const [notification, setNotification] = useState(null);
 
-  useEffect(() => {
-    loadThreads();
-  }, []);
+  const filteredEmails = emails.filter(email => {
+    const matchesSearch = email.sender.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                          email.subject.toLowerCase().includes(searchQuery.toLowerCase());
+    const matchesFilter = activeFilter === 'All' || email.label === activeFilter;
+    return matchesSearch && matchesFilter;
+  });
 
-  const loadThreads = async () => {
-    setLoading(true);
-    // Simulate API delay
-    setTimeout(() => {
-      setThreads(generateMockThreads(20));
-      setLoading(false);
-    }, 1000);
+  const markAsRead = (id) => {
+    setEmails(prev => prev.map(e => e.id === id ? { ...e, read: true } : e));
   };
 
-  const toggleSelection = (id) => {
-    setSelectedThreads(prev => 
-      prev.includes(id) ? prev.filter(t => t !== id) : [...prev, id]
-    );
+  const deleteEmail = (id) => {
+    setEmails(prev => prev.filter(e => e.id !== id));
+    if (selectedId === id) setSelectedId(null);
+    setNotification({ type: 'success', message: 'Email moved to trash' });
+    setTimeout(() => setNotification(null), 3000);
   };
 
-  const handleExport = async (format) => {
-    if (selectedThreads.length === 0) {
-      setNotification({ type: 'error', message: 'Please select at least one thread.' });
-      return;
-    }
-
-    setExporting(true);
-    setExportProgress(0);
-    
-    // Simulate batch processing
-    const totalSteps = 5;
-    for (let i = 1; i <= totalSteps; i++) {
-      await new Promise(r => setTimeout(r, 400));
-      setExportProgress((i / totalSteps) * 100);
-    }
-
-    // Trigger download
-    const dataToExport = threads.filter(t => selectedThreads.includes(t.id));
-    const content = format === 'json' 
-      ? JSON.stringify(dataToExport, null, 2) 
-      : dataToExport.map(t => `${t.id},${t.title},${t.query}`).join('\n');
-    
-    const blob = new Blob([content], { type: format === 'json' ? 'application/json' : 'text/csv' });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `perplexity-batch-${Date.now()}.${format}`;
-    a.click();
-    window.URL.removeObjectURL(url);
-
-    setExporting(false);
-    setNotification({ type: 'success', message: `Successfully exported ${selectedThreads.length} threads as ${format.toUpperCase()}.` });
-    setSelectedThreads([]);
-  };
+  const selectedEmail = emails.find(e => e.id === selectedId);
 
   return (
-    <div className="min-h-screen flex flex-col font-sans">
-      <Header />
+    <div className="flex h-screen overflow-hidden bg-slate-50">
+      <Sidebar 
+        activeFilter={activeFilter} 
+        setActiveFilter={setActiveFilter} 
+      />
       
-      <main className="flex-1 p-6 max-w-7xl mx-auto w-full">
-        {/* Header Section */}
-        <div className="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
-          <div>
-            <h1 className="text-3xl font-bold text-white mb-2">Thread Exporter</h1>
-            <p className="text-gray-400">Manage and export your Perplexity research threads in batches.</p>
-          </div>
-          <div className="flex gap-3">
-            <button 
-              onClick={loadThreads}
-              disabled={loading}
-              className="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg transition-colors disabled:opacity-50"
-            >
-              <RefreshCw size={18} className={loading ? 'animate-spin' : ''} />
-              Refresh
-            </button>
-          </div>
-        </div>
+      <div className="flex-1 flex flex-col min-w-0">
+        <Header 
+          searchQuery={searchQuery} 
+          setSearchQuery={setSearchQuery} 
+        />
+        
+        <main className="flex-1 flex overflow-hidden">
+          <EmailList 
+            emails={filteredEmails} 
+            selectedId={selectedId} 
+            setSelectedId={(id) => {
+              setSelectedId(id);
+              markAsRead(id);
 
-        {/* Notification Toast */}
-        {notification && (
-          <div className={`mb-6 p-4 rounded-lg flex items-center gap-3 ${notification.type === 'success' ? 'bg-green-900/50 text-green-200 border border-green-800' : 'bg-red-900/50 text-red-200 border border-red-800'}`}>
-            {notification.type === 'success' ? <CheckCircle size={20} /> : <AlertCircle size={20} />}
-            {notification.message}
-            <button onClick={() => setNotification(null)} className="ml-auto hover:opacity-70">✕</button>
+          />
+          
+          <div className="flex-1 bg-white border-l border-slate-200 overflow-y-auto">
+            {selectedEmail ? (
+              <EmailDetail 
+                email={selectedEmail} 
+                onDelete={() => deleteEmail(selectedEmail.id)} 
+              />
+            ) : (
+              <div className="h-full flex flex-col items-center justify-center text-slate-400 p-8 text-center">
+                <div className="bg-slate-100 p-6 rounded-full mb-4">
+                  <Search size={48} className="text-slate-300" />
+                </div>
+                <h3 className="text-lg font-medium text-slate-600">No email selected</h3>
+                <p className="max-w-xs">Select an email from the list to read its contents or manage the conversation.</p>
+              </div>
+            )}
           </div>
-        )}
-
-        {/* Controls */}
-        <ExportControls 
-          count={selectedThreads.length} 
-          onExport={handleExport} 
-          exporting={exporting} 
-          progress={exportProgress}
-        />
+        </main>
+      </div>
 
-        {/* Content Grid */}
-        <div className="mt-6">
-          {loading ? (
-            <div className="flex justify-center py-20">
-              <div className="animate-pulse bg-slate-800 h-4 w-4 rounded-full"></div>
-              <div className="animate-pulse bg-slate-800 h-4 w-4 rounded-full ml-2"></div>
-              <div className="animate-pulse bg-slate-800 h-4 w-4 rounded-full ml-2"></div>
-            </div>
-          ) : (
-            <ThreadList 
-              threads={threads} 
-              selectedIds={selectedThreads} 
-              onSelect={toggleSelection} 
-            />
-          )}
+      {notification && (
+        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 px-4 py-3 rounded-lg shadow-2xl animate-bounce bg-slate-900 text-white border border-slate-700">
+          {notification.type === 'success' ? <CheckCircle2 size={18} className="text-green-400" /> : <AlertCircle size={18} className="text-red-400" />}
+          <span className="text-sm font-medium">{notification.message}</span>
         </div>
-      </main>
+      )}
     </div>
   );
 }