mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-25 19:15:18 +02:00
refactor: simplify DocumentUploadTab component by removing motion animations and enhancing file display logic for improved performance and readability
This commit is contained in:
Anish Sarkar
parent
f75b224c2c
commit
c02207e911
2 changed files with 99 additions and 125 deletions
|
|
@ -120,7 +120,12 @@ const DocumentUploadPopupContent: FC<{
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||||
<DialogContent className="select-none max-w-4xl w-[95vw] sm:w-full h-[calc(100dvh-2rem)] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 bg-muted dark:bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-12 [&>button]:top-3 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button]:z-[100] [&>button_svg]:size-4 sm:[&>button_svg]:size-5">
|
<DialogContent
|
||||||
|
onPointerDownOutside={(e) => e.preventDefault()}
|
||||||
|
onInteractOutside={(e) => e.preventDefault()}
|
||||||
|
onEscapeKeyDown={(e) => e.preventDefault()}
|
||||||
|
className="select-none max-w-4xl w-[95vw] sm:w-full h-[calc(100dvh-2rem)] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 bg-muted dark:bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-12 [&>button]:top-3 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button]:z-[100] [&>button_svg]:size-4 sm:[&>button_svg]:size-5"
|
||||||
|
>
|
||||||
<DialogTitle className="sr-only">Upload Document</DialogTitle>
|
<DialogTitle className="sr-only">Upload Document</DialogTitle>
|
||||||
|
|
||||||
{/* Scrollable container for mobile */}
|
{/* Scrollable container for mobile */}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
import { useAtom } from "jotai";
|
import { useAtom } from "jotai";
|
||||||
import { CheckCircle2, FileType, Info, Upload, X } from "lucide-react";
|
import { CheckCircle2, FileType, Info, Upload, X } from "lucide-react";
|
||||||
import { AnimatePresence, motion } from "motion/react";
|
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { useCallback, useMemo, useRef, useState } from "react";
|
import { useCallback, useMemo, useRef, useState } from "react";
|
||||||
import { useDropzone } from "react-dropzone";
|
import { useDropzone } from "react-dropzone";
|
||||||
|
|
@ -241,12 +241,7 @@ export function DocumentUploadTab({
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<div className="space-y-3 sm:space-y-6 max-w-4xl mx-auto pt-0">
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.3 }}
|
|
||||||
className="space-y-3 sm:space-y-6 max-w-4xl mx-auto pt-0"
|
|
||||||
>
|
|
||||||
<Alert className="border border-border bg-slate-400/5 dark:bg-white/5 flex items-start gap-3 [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg~*]:pl-0">
|
<Alert className="border border-border bg-slate-400/5 dark:bg-white/5 flex items-start gap-3 [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg~*]:pl-0">
|
||||||
<Info className="h-4 w-4 shrink-0 mt-0.5" />
|
<Info className="h-4 w-4 shrink-0 mt-0.5" />
|
||||||
<AlertDescription className="text-xs sm:text-sm leading-relaxed pt-0.5">
|
<AlertDescription className="text-xs sm:text-sm leading-relaxed pt-0.5">
|
||||||
|
|
@ -287,14 +282,10 @@ export function DocumentUploadTab({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : isDragActive ? (
|
) : isDragActive ? (
|
||||||
<motion.div
|
<div className="flex flex-col items-center gap-2 sm:gap-4">
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
|
||||||
className="flex flex-col items-center gap-2 sm:gap-4"
|
|
||||||
>
|
|
||||||
<Upload className="h-8 w-8 sm:h-12 sm:w-12 text-primary" />
|
<Upload className="h-8 w-8 sm:h-12 sm:w-12 text-primary" />
|
||||||
<p className="text-sm sm:text-lg font-medium text-primary">{t("drop_files")}</p>
|
<p className="text-sm sm:text-lg font-medium text-primary">{t("drop_files")}</p>
|
||||||
</motion.div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col items-center gap-2 sm:gap-4">
|
<div className="flex flex-col items-center gap-2 sm:gap-4">
|
||||||
<Upload className="h-8 w-8 sm:h-12 sm:w-12 text-muted-foreground" />
|
<Upload className="h-8 w-8 sm:h-12 sm:w-12 text-muted-foreground" />
|
||||||
|
|
@ -329,124 +320,102 @@ export function DocumentUploadTab({
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<AnimatePresence mode="wait">
|
{files.length > 0 && (
|
||||||
{files.length > 0 && (
|
<Card className={cardClass}>
|
||||||
<motion.div
|
<CardHeader className="p-4 sm:p-6">
|
||||||
initial={{ opacity: 0, height: 0 }}
|
<div className="flex items-center justify-between gap-2">
|
||||||
animate={{ opacity: 1, height: "auto" }}
|
<div className="min-w-0 flex-1">
|
||||||
exit={{ opacity: 0, height: 0 }}
|
<CardTitle className="text-base sm:text-2xl">
|
||||||
transition={{ duration: 0.3 }}
|
{t("selected_files", { count: files.length })}
|
||||||
>
|
</CardTitle>
|
||||||
<Card className={cardClass}>
|
<CardDescription className="text-xs sm:text-sm">
|
||||||
<CardHeader className="p-4 sm:p-6">
|
{t("total_size")}: {formatFileSize(totalFileSize)}
|
||||||
<div className="flex items-center justify-between gap-2">
|
</CardDescription>
|
||||||
<div className="min-w-0 flex-1">
|
</div>
|
||||||
<CardTitle className="text-base sm:text-2xl">
|
<Button
|
||||||
{t("selected_files", { count: files.length })}
|
variant="outline"
|
||||||
</CardTitle>
|
size="sm"
|
||||||
<CardDescription className="text-xs sm:text-sm">
|
className="text-xs sm:text-sm shrink-0"
|
||||||
{t("total_size")}: {formatFileSize(totalFileSize)}
|
onClick={() => setFiles([])}
|
||||||
</CardDescription>
|
disabled={isUploading}
|
||||||
|
>
|
||||||
|
{t("clear_all")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="p-4 sm:p-6 pt-0">
|
||||||
|
<div className="space-y-2 sm:space-y-3 max-h-[250px] sm:max-h-[400px] overflow-y-auto">
|
||||||
|
{files.map((file, index) => (
|
||||||
|
<div
|
||||||
|
key={`${file.name}-${index}`}
|
||||||
|
className={`flex items-center justify-between p-2 sm:p-4 rounded-lg border border-border ${cardClass} hover:bg-slate-400/10 dark:hover:bg-white/10 transition-colors`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 flex-1 min-w-0">
|
||||||
|
<FileType className="h-5 w-5 text-muted-foreground flex-shrink-0" />
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm sm:text-base font-medium truncate">{file.name}</p>
|
||||||
|
<div className="flex items-center gap-2 mt-1">
|
||||||
|
<Badge variant="secondary" className="text-xs">
|
||||||
|
{formatFileSize(file.size)}
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
{file.type || "Unknown type"}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="ghost"
|
||||||
size="sm"
|
size="icon"
|
||||||
className="text-xs sm:text-sm shrink-0"
|
onClick={() => setFiles((prev) => prev.filter((_, i) => i !== index))}
|
||||||
onClick={() => setFiles([])}
|
|
||||||
disabled={isUploading}
|
disabled={isUploading}
|
||||||
|
className="h-8 w-8"
|
||||||
>
|
>
|
||||||
{t("clear_all")}
|
<X className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
))}
|
||||||
<CardContent className="p-4 sm:p-6 pt-0">
|
</div>
|
||||||
<div className="space-y-2 sm:space-y-3 max-h-[250px] sm:max-h-[400px] overflow-y-auto">
|
|
||||||
<AnimatePresence>
|
|
||||||
{files.map((file, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={`${file.name}-${index}`}
|
|
||||||
initial={{ opacity: 0, x: -20 }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
exit={{ opacity: 0, x: 20 }}
|
|
||||||
className={`flex items-center justify-between p-2 sm:p-4 rounded-lg border border-border ${cardClass} hover:bg-slate-400/10 dark:hover:bg-white/10 transition-colors`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-3 flex-1 min-w-0">
|
|
||||||
<FileType className="h-5 w-5 text-muted-foreground flex-shrink-0" />
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-sm sm:text-base font-medium truncate">{file.name}</p>
|
|
||||||
<div className="flex items-center gap-2 mt-1">
|
|
||||||
<Badge variant="secondary" className="text-xs">
|
|
||||||
{formatFileSize(file.size)}
|
|
||||||
</Badge>
|
|
||||||
<Badge variant="outline" className="text-xs">
|
|
||||||
{file.type || "Unknown type"}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => setFiles((prev) => prev.filter((_, i) => i !== index))}
|
|
||||||
disabled={isUploading}
|
|
||||||
className="h-8 w-8"
|
|
||||||
>
|
|
||||||
<X className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</AnimatePresence>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isUploading && (
|
{isUploading && (
|
||||||
<motion.div
|
<div className="mt-3 sm:mt-6 space-y-2 sm:space-y-3">
|
||||||
initial={{ opacity: 0, y: 10 }}
|
<Separator className="bg-border" />
|
||||||
animate={{ opacity: 1, y: 0 }}
|
<div className="space-y-2">
|
||||||
className="mt-3 sm:mt-6 space-y-2 sm:space-y-3"
|
<div className="flex items-center justify-between text-xs sm:text-sm">
|
||||||
>
|
<span>{t("uploading_files")}</span>
|
||||||
<Separator className="bg-border" />
|
<span>{Math.round(uploadProgress)}%</span>
|
||||||
<div className="space-y-2">
|
</div>
|
||||||
<div className="flex items-center justify-between text-xs sm:text-sm">
|
<Progress value={uploadProgress} className="h-2" />
|
||||||
<span>{t("uploading_files")}</span>
|
</div>
|
||||||
<span>{Math.round(uploadProgress)}%</span>
|
</div>
|
||||||
</div>
|
)}
|
||||||
<Progress value={uploadProgress} className="h-2" />
|
|
||||||
</div>
|
<div className="mt-3 sm:mt-6">
|
||||||
</motion.div>
|
<SummaryConfig enabled={shouldSummarize} onEnabledChange={setShouldSummarize} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 sm:mt-6">
|
||||||
|
<Button
|
||||||
|
className="w-full py-3 sm:py-6 text-xs sm:text-base font-medium"
|
||||||
|
onClick={handleUpload}
|
||||||
|
disabled={isUploading || files.length === 0}
|
||||||
|
>
|
||||||
|
{isUploading ? (
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<Spinner size="sm" />
|
||||||
|
{t("uploading")}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<CheckCircle2 className="h-4 w-4 sm:h-5 sm:w-5" />
|
||||||
|
{t("upload_button", { count: files.length })}
|
||||||
|
</span>
|
||||||
)}
|
)}
|
||||||
|
</Button>
|
||||||
<div className="mt-3 sm:mt-6">
|
</div>
|
||||||
<SummaryConfig enabled={shouldSummarize} onEnabledChange={setShouldSummarize} />
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
|
)}
|
||||||
<motion.div
|
|
||||||
className="mt-3 sm:mt-6"
|
|
||||||
initial={{ opacity: 0, y: 10 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
className="w-full py-3 sm:py-6 text-xs sm:text-base font-medium"
|
|
||||||
onClick={handleUpload}
|
|
||||||
disabled={isUploading || files.length === 0}
|
|
||||||
>
|
|
||||||
{isUploading ? (
|
|
||||||
<span className="flex items-center gap-2">
|
|
||||||
<Spinner size="sm" />
|
|
||||||
{t("uploading")}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="flex items-center gap-2">
|
|
||||||
<CheckCircle2 className="h-4 w-4 sm:h-5 sm:w-5" />
|
|
||||||
{t("upload_button", { count: files.length })}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</motion.div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
)}
|
|
||||||
</AnimatePresence>
|
|
||||||
|
|
||||||
<Accordion
|
<Accordion
|
||||||
type="single"
|
type="single"
|
||||||
|
|
@ -479,6 +448,6 @@ export function DocumentUploadTab({
|
||||||
</AccordionContent>
|
</AccordionContent>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
</motion.div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue