Skip to content

Commit 3b0048d

Browse files
sabaimransabaimran
committed
make the adding papers to project experience slightly more ergonomic with separate buttons/intents
1 parent 93261d1 commit 3b0048d

File tree

1 file changed

+84
-20
lines changed
  • client/src/app/(main)/projects/[projectId]

1 file changed

+84
-20
lines changed

‎client/src/app/(main)/projects/[projectId]/page.tsx‎

Lines changed: 84 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { AlertCircle, ArrowRight, Loader2, MessageCircle, Pencil, PlusCircle, Send, Sparkles } from "lucide-react";
3+
import { AlertCircle, ArrowLeft, ArrowRight, BookOpen, Library, Loader2, MessageCircle, Pencil, PlusCircle, Send, Sparkles, UploadCloud } from "lucide-react";
44
import { useEffect, useState, useCallback } from "react";
55
import { useParams, useRouter } from "next/navigation";
66
import { fetchFromApi } from "@/lib/api";
@@ -76,6 +76,7 @@ export default function ProjectPage() {
7676
const [currentTitle, setCurrentTitle] = useState("");
7777
const [currentDescription, setCurrentDescription] = useState("");
7878
const [isAddPapersSheetOpen, setIsAddPapersSheetOpen] = useState(false);
79+
const [addPapersView, setAddPapersView] = useState<'initial' | 'upload' | 'library'>('initial');
7980
const [isUploadDialogOpen, setIsUploadDialogOpen] = useState(false);
8081
const { subscription } = useSubscription();
8182

@@ -540,7 +541,12 @@ export default function ProjectPage() {
540541
<div className="w-full lg:w-1/3 px-4">
541542
<div className="flex justify-between items-center mb-4">
542543
<h2 className="text-2xl font-bold">Papers</h2>
543-
<Sheet open={isAddPapersSheetOpen} onOpenChange={setIsAddPapersSheetOpen}>
544+
<Sheet open={isAddPapersSheetOpen} onOpenChange={(isOpen) => {
545+
setIsAddPapersSheetOpen(isOpen);
546+
if (!isOpen) {
547+
setAddPapersView('initial');
548+
}
549+
}}>
544550
<SheetTrigger asChild>
545551
<Button variant="outline">
546552
<PlusCircle className="mr-2 h-4 w-4" />
@@ -552,25 +558,83 @@ export default function ProjectPage() {
552558
<SheetTitle>Add Papers to Project</SheetTitle>
553559
</SheetHeader>
554560
<div className="mt-0 px-6">
555-
<h3 className="text-lg font-semibold mb-2">Upload New Papers</h3>
556-
<h2>You can upload any additional papers to your library here. They will automatically be added to the project.</h2>
557-
<PdfDropzone onFileSelect={handleFileSelect} onUrlClick={handleLinkClick} disabled={isPaperUploadAtLimit(subscription)} />
558-
{isPaperUploadAtLimit(subscription) && (
559-
<Alert variant="destructive" className="mt-4">
560-
<AlertCircle className="h-4 w-4" />
561-
<AlertTitle>Upload Limit Reached</AlertTitle>
562-
<AlertDescription>
563-
You have reached your paper upload limit. Please{" "}
564-
<Link href="/pricing" className="font-bold underline">
565-
upgrade your plan
566-
</Link>{" "}
567-
to upload more papers.
568-
</AlertDescription>
569-
</Alert>
561+
{addPapersView === 'initial' && (
562+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
563+
<button
564+
onClick={() => setAddPapersView('upload')}
565+
className="flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group"
566+
>
567+
<div className="relative">
568+
<UploadCloud className="w-12 h-12 text-gray-400 group-hover:text-blue-500 mb-4 transition-colors" />
569+
<div className="absolute -top-1 -right-1 w-5 h-5 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
570+
<span className="text-xs font-medium text-blue-600 dark:text-blue-300"><PlusCircle className="h-4 w-4" /></span>
571+
</div>
572+
</div>
573+
<h3 className="text-lg font-semibold group-hover:text-blue-600 transition-colors">Upload New Papers</h3>
574+
<p className="text-sm text-gray-500 text-center mt-1">
575+
Upload PDFs from your computer or URL
576+
</p>
577+
<p className="text-xs mt-2 font-medium">
578+
Drag & drop or browse →
579+
</p>
580+
</button>
581+
<button
582+
onClick={() => setAddPapersView('library')}
583+
className="flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group"
584+
>
585+
<div className="relative">
586+
<Library className="w-12 h-12 text-gray-400 group-hover:text-blue-500 mb-4 transition-colors" />
587+
<div className="absolute -top-1 -right-1 w-5 h-5 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
588+
<span className="text-xs font-medium text-blue-600 dark:text-blue-300"><BookOpen className="h-4 w-4"/></span>
589+
</div>
590+
</div>
591+
<h3 className="text-lg font-semibold group-hover:text-blue-600 transition-colors">Add from Library</h3>
592+
<p className="text-sm text-gray-500 text-center mt-1">
593+
Choose from papers already in your library
594+
</p>
595+
<p className="text-xs mt-2 font-medium">
596+
Browse existing papers →
597+
</p>
598+
</button>
599+
</div>
600+
)}
601+
602+
{addPapersView === 'upload' && (
603+
<div>
604+
<Button variant="ghost" onClick={() => setAddPapersView('initial')} className="mb-4">
605+
<ArrowLeft className="mr-2 h-4 w-4" />
606+
Back
607+
</Button>
608+
<h3 className="text-lg font-semibold mb-2">Upload New Papers</h3>
609+
<p className="text-sm text-gray-500 mb-4">Upload papers to your library. They will be automatically added to this project.</p>
610+
<PdfDropzone onFileSelect={handleFileSelect} onUrlClick={handleLinkClick} disabled={isPaperUploadAtLimit(subscription)} />
611+
{isPaperUploadAtLimit(subscription) && (
612+
<Alert variant="destructive" className="mt-4">
613+
<AlertCircle className="h-4 w-4" />
614+
<AlertTitle>Upload Limit Reached</AlertTitle>
615+
<AlertDescription>
616+
You have reached your paper upload limit. Please{" "}
617+
<Link href="/pricing" className="font-bold underline">
618+
upgrade your plan
619+
</Link>{" "}
620+
to upload more papers.
621+
</AlertDescription>
622+
</Alert>
623+
)}
624+
{uploadError && <p className="text-red-500 mt-4">{uploadError}</p>}
625+
</div>
626+
)}
627+
628+
{addPapersView === 'library' && (
629+
<div>
630+
<Button variant="ghost" onClick={() => setAddPapersView('initial')} className="mb-4">
631+
<ArrowLeft className="mr-2 h-4 w-4" />
632+
Back
633+
</Button>
634+
<h3 className="text-lg font-semibold mb-2">Add from Library</h3>
635+
<AddFromLibrary projectId={projectId} onPapersAdded={getProjectPapers} projectPaperIds={papers.map(p => p.id)} />
636+
</div>
570637
)}
571-
{uploadError && <p className="text-red-500 mt-4">{uploadError}</p>}
572-
<h3 className="text-lg font-semibold mb-2">Add from Library</h3>
573-
<AddFromLibrary projectId={projectId} onPapersAdded={getProjectPapers} projectPaperIds={papers.map(p => p.id)} />
574638
</div>
575639
</SheetContent>
576640
</Sheet>

0 commit comments

Comments
 (0)