Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,140 @@
+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';
+
+// 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'
+  }));
+};
+
+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 [notification, setNotification] = useState(null);
+
+  useEffect(() => {
+    loadThreads();
+  }, []);
+
+  const loadThreads = async () => {
+    setLoading(true);
+    // Simulate API delay
+    setTimeout(() => {
+      setThreads(generateMockThreads(20));
+      setLoading(false);
+    }, 1000);
+  };
+
+  const toggleSelection = (id) => {
+    setSelectedThreads(prev => 
+      prev.includes(id) ? prev.filter(t => t !== id) : [...prev, id]
+    );
+  };
+
+  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([]);
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col font-sans">
+      <Header />
+      
+      <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>
+
+        {/* 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>
+        )}
+
+        {/* Controls */}
+        <ExportControls 
+          count={selectedThreads.length} 
+          onExport={handleExport} 
+          exporting={exporting} 
+          progress={exportProgress}
+        />
+
+        {/* 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} 
+            />
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}