feat: integrate document upload dialog and enhance dashboard layout

- Added DocumentUploadDialogProvider to manage document upload dialog state across components.
- Updated DashboardClientLayout to include the DocumentUploadDialogProvider for improved user experience.
- Refactored DocumentsTableShell to utilize the new dialog for file uploads instead of navigating to a separate upload page.
- Removed the deprecated upload page and streamlined document upload handling within the dialog.
- Enhanced DocumentUploadTab with improved file type handling and user feedback during uploads.
- Updated GridPattern styling for better visual consistency.

surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx

@@ -20,6 +20,7 @@ import { AppSidebarProvider } from "@/components/sidebar/AppSidebarProvider";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { DocumentUploadDialogProvider } from "@/components/assistant-ui/document-upload-popup";
 
 export function DashboardClientLayout({
 	children,
@@ -240,32 +241,34 @@ export function DashboardClientLayout({
 	}
 
 	return (
-		<SidebarProvider className="h-full overflow-hidden" open={open} onOpenChange={setOpen}>
+		<DocumentUploadDialogProvider>
-			{/* Use AppSidebarProvider which fetches user, search space, and recent chats */}
+			<SidebarProvider className="h-full overflow-hidden" open={open} onOpenChange={setOpen}>
-			<AppSidebarProvider
+				{/* Use AppSidebarProvider which fetches user, search space, and recent chats */}
-				searchSpaceId={searchSpaceId}
+				<AppSidebarProvider
-				navSecondary={translatedNavSecondary}
+					searchSpaceId={searchSpaceId}
-				navMain={translatedNavMain}
+					navSecondary={translatedNavSecondary}
-			/>
+					navMain={translatedNavMain}
-			<SidebarInset className="h-full ">
+				/>
-				<main className="flex flex-col h-full">
+				<SidebarInset className="h-full ">
-					<header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 border-b">
+					<main className="flex flex-col h-full">
-						<div className="flex items-center justify-between w-full gap-2 px-4">
+						<header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 border-b">
-							<div className="flex items-center gap-2">
+							<div className="flex items-center justify-between w-full gap-2 px-4">
-								<SidebarTrigger className="-ml-1" />
+								<div className="flex items-center gap-2">
-								<div className="hidden md:flex items-center gap-2">
+									<SidebarTrigger className="-ml-1" />
-									<Separator orientation="vertical" className="h-6" />
+									<div className="hidden md:flex items-center gap-2">
-									<DashboardBreadcrumb />
+										<Separator orientation="vertical" className="h-6" />
+										<DashboardBreadcrumb />
+									</div>
+								</div>
+								<div className="flex items-center gap-2">
+									<LanguageSwitcher />
 								</div>
 							</div>
-							<div className="flex items-center gap-2">
+						</header>
-								<LanguageSwitcher />
+						<div className="flex-1 overflow-hidden">{children}</div>
-							</div>
+					</main>
-						</div>
+				</SidebarInset>
-					</header>
+			</SidebarProvider>
-					<div className="flex-1 overflow-hidden">{children}</div>
+		</DocumentUploadDialogProvider>
-				</main>
-			</SidebarInset>
-		</SidebarProvider>
 	);
 }

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx

@@ -2,9 +2,10 @@
 
 import { ChevronDown, ChevronUp, FileX, Plus } from "lucide-react";
 import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import React from "react";
+import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
 import { DocumentViewer } from "@/components/document-viewer";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -69,9 +70,9 @@ export function DocumentsTableShell({
 	onSortChange: (key: SortKey) => void;
 }) {
 	const t = useTranslations("documents");
-	const router = useRouter();
 	const params = useParams();
 	const searchSpaceId = params.search_space_id;
+	const { openDialog } = useDocumentUploadDialog();
 
 	const sorted = React.useMemo(
 		() => sortDocuments(documents, sortKey, sortDesc),
@@ -144,7 +145,7 @@ export function DocumentsTableShell({
 							</p>
 						</div>
 						<Button
-							onClick={() => router.push(`/dashboard/${searchSpaceId}/documents/upload`)}
+							onClick={openDialog}
 							className="mt-2"
 						>
 							<Plus className="mr-2 h-4 w-4" />

surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { Upload } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams } from "next/navigation";
-import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
-
-export default function UploadDocumentsPage() {
-	const params = useParams();
-	const search_space_id = params.search_space_id as string;
-
-	return (
-		<div className="container mx-auto py-8 px-4 min-h-[calc(100vh-64px)]">
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-				className="space-y-6"
-			>
-				{/* Header */}
-				<div className="text-center space-y-2">
-					<h1 className="text-2xl sm:text-4xl font-bold tracking-tight flex items-center justify-center gap-3">
-						<Upload className="h-6 w-6 sm:h-8 sm:w-8" />
-						Upload Documents
-					</h1>
-					<p className="text-muted-foreground text-sm sm:text-lg">
-						Upload documents to your search space for AI-powered search and chat
-					</p>
-				</div>
-
-				{/* Document Upload */}
-				<DocumentUploadTab searchSpaceId={search_space_id} />
-			</motion.div>
-		</div>
-	);
-}

surfsense_web/components/assistant-ui/attachment.tsx

@@ -9,8 +9,8 @@ import {
 } from "@assistant-ui/react";
 import { FileText, Loader2, Paperclip, PlusIcon, Upload, XIcon } from "lucide-react";
 import Image from "next/image";
-import { useParams, useRouter } from "next/navigation";
 import { type FC, type PropsWithChildren, useRef, useEffect, useState } from "react";
+import { useDocumentUploadDialog } from "./document-upload-popup";
 import { useShallow } from "zustand/shallow";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -319,19 +319,22 @@ export const ComposerAttachments: FC = () => {
 };
 
 export const ComposerAddAttachment: FC = () => {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
 	const chatAttachmentInputRef = useRef<HTMLInputElement>(null);
+	const { openDialog } = useDocumentUploadDialog();
 
 	const handleFileUpload = () => {
-		router.push(`/dashboard/${searchSpaceId}/documents/upload`);
+		openDialog();
 	};
 
 	const handleChatAttachment = () => {
 		chatAttachmentInputRef.current?.click();
 	};
 
+	// Prevent event bubbling when file input is clicked
+	const handleFileInputClick = (e: React.MouseEvent<HTMLInputElement>) => {
+		e.stopPropagation();
+	};
+
 	return (
 		<>
 			<DropdownMenu>
@@ -354,7 +357,7 @@ export const ComposerAddAttachment: FC = () => {
 					</DropdownMenuItem>
 					<DropdownMenuItem onClick={handleFileUpload} className="cursor-pointer">
 						<Upload className="size-4" />
-						<span>File upload</span>
+						<span>Upload Files</span>
 					</DropdownMenuItem>
 				</DropdownMenuContent>
 			</DropdownMenu>
@@ -365,6 +368,7 @@ export const ComposerAddAttachment: FC = () => {
 					multiple
 					className="hidden"
 					accept="image/*,application/pdf,.doc,.docx,.txt"
+					onClick={handleFileInputClick}
 				/>
 			</ComposerPrimitive.AddAttachment>
 		</>

surfsense_web/components/assistant-ui/document-upload-popup.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { type FC, createContext, useContext, useState, useCallback, useRef, type ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
+
+// Context for opening the dialog from anywhere
+interface DocumentUploadDialogContextType {
+	openDialog: () => void;
+	closeDialog: () => void;
+}
+
+const DocumentUploadDialogContext = createContext<DocumentUploadDialogContextType | null>(null);
+
+export const useDocumentUploadDialog = () => {
+	const context = useContext(DocumentUploadDialogContext);
+	if (!context) {
+		throw new Error("useDocumentUploadDialog must be used within DocumentUploadDialogProvider");
+	}
+	return context;
+};
+
+// Provider component
+export const DocumentUploadDialogProvider: FC<{ children: ReactNode }> = ({ children }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const isClosingRef = useRef(false);
+
+	const openDialog = useCallback(() => {
+		// Prevent opening if we just closed (debounce)
+		if (isClosingRef.current) {
+			return;
+		}
+		setIsOpen(true);
+	}, []);
+
+	const closeDialog = useCallback(() => {
+		isClosingRef.current = true;
+		setIsOpen(false);
+		// Reset the flag after a short delay to allow for file picker to close
+		setTimeout(() => {
+			isClosingRef.current = false;
+		}, 300);
+	}, []);
+
+	const handleOpenChange = useCallback((open: boolean) => {
+		if (!open) {
+			// Only close if not already in closing state
+			if (!isClosingRef.current) {
+				closeDialog();
+			}
+		} else {
+			// Only open if not in the middle of closing
+			if (!isClosingRef.current) {
+				setIsOpen(true);
+			}
+		}
+	}, [closeDialog]);
+
+	return (
+		<DocumentUploadDialogContext.Provider value={{ openDialog, closeDialog }}>
+			{children}
+			<DocumentUploadPopupContent isOpen={isOpen} onOpenChange={handleOpenChange} />
+		</DocumentUploadDialogContext.Provider>
+	);
+};
+
+// Internal component that renders the dialog
+const DocumentUploadPopupContent: FC<{
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+}> = ({ isOpen, onOpenChange }) => {
+	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
+	const router = useRouter();
+
+	if (!searchSpaceId) return null;
+
+	const handleSuccess = () => {
+		onOpenChange(false);
+		router.push(`/dashboard/${searchSpaceId}/documents`);
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={onOpenChange}>
+			<DialogContent className="max-w-4xl w-[95vw] sm:w-full h-[calc(100vh-2rem)] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-12 [&>button]:top-4 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button]:z-[100] [&>button_svg]:size-4 sm:[&>button_svg]:size-5">
+				<div className="flex-1 min-h-0 relative overflow-hidden">
+					<div className="h-full overflow-y-auto">
+						<div className="px-3 sm:px-12 pt-12 sm:pt-24 pb-6 sm:pb-16">
+							<DocumentUploadTab searchSpaceId={searchSpaceId} onSuccess={handleSuccess} />
+						</div>
+					</div>
+					{/* Bottom fade shadow */}
+					<div className="absolute bottom-0 left-0 right-0 h-2 sm:h-7 bg-gradient-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};
+

surfsense_web/components/sources/DocumentUploadTab.tsx

@@ -5,10 +5,11 @@ import { CheckCircle2, FileType, Info, Loader2, Tag, Upload, X } from "lucide-re
 import { AnimatePresence, motion } from "motion/react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState, useRef } from "react";
 import { useDropzone } from "react-dropzone";
 import { toast } from "sonner";
 import { uploadDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -24,115 +25,106 @@ import { GridPattern } from "./GridPattern";
 
 interface DocumentUploadTabProps {
 	searchSpaceId: string;
+	onSuccess?: () => void;
 }
 
-export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
+const audioFileTypes = {
+	"audio/mpeg": [".mp3", ".mpeg", ".mpga"],
+	"audio/mp4": [".mp4", ".m4a"],
+	"audio/wav": [".wav"],
+	"audio/webm": [".webm"],
+	"text/markdown": [".md", ".markdown"],
+	"text/plain": [".txt"],
+};
+
+const commonTypes = {
+	"application/pdf": [".pdf"],
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
+	"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
+	"text/html": [".html", ".htm"],
+	"text/csv": [".csv"],
+	"image/jpeg": [".jpg", ".jpeg"],
+	"image/png": [".png"],
+	"image/bmp": [".bmp"],
+	"image/webp": [".webp"],
+	"image/tiff": [".tiff"],
+};
+
+const FILE_TYPE_CONFIG: Record<string, Record<string, string[]>> = {
+	LLAMACLOUD: {
+		...commonTypes,
+		"application/msword": [".doc"],
+		"application/vnd.ms-word.document.macroEnabled.12": [".docm"],
+		"application/msword-template": [".dot"],
+		"application/vnd.ms-word.template.macroEnabled.12": [".dotm"],
+		"application/vnd.ms-powerpoint": [".ppt"],
+		"application/vnd.ms-powerpoint.template.macroEnabled.12": [".pptm"],
+		"application/vnd.ms-powerpoint.template": [".pot"],
+		"application/vnd.openxmlformats-officedocument.presentationml.template": [".potx"],
+		"application/vnd.ms-excel": [".xls"],
+		"application/vnd.ms-excel.sheet.macroEnabled.12": [".xlsm"],
+		"application/vnd.ms-excel.sheet.binary.macroEnabled.12": [".xlsb"],
+		"application/vnd.ms-excel.workspace": [".xlw"],
+		"application/rtf": [".rtf"],
+		"application/xml": [".xml"],
+		"application/epub+zip": [".epub"],
+		"text/tab-separated-values": [".tsv"],
+		"text/html": [".html", ".htm", ".web"],
+		"image/gif": [".gif"],
+		"image/svg+xml": [".svg"],
+		...audioFileTypes,
+	},
+	DOCLING: {
+		...commonTypes,
+		"text/asciidoc": [".adoc", ".asciidoc"],
+		"text/html": [".html", ".htm", ".xhtml"],
+		"image/tiff": [".tiff", ".tif"],
+		...audioFileTypes,
+	},
+	default: {
+		...commonTypes,
+		"application/msword": [".doc"],
+		"message/rfc822": [".eml"],
+		"application/epub+zip": [".epub"],
+		"image/heic": [".heic"],
+		"application/vnd.ms-outlook": [".msg"],
+		"application/vnd.oasis.opendocument.text": [".odt"],
+		"text/x-org": [".org"],
+		"application/pkcs7-signature": [".p7s"],
+		"application/vnd.ms-powerpoint": [".ppt"],
+		"text/x-rst": [".rst"],
+		"application/rtf": [".rtf"],
+		"text/tab-separated-values": [".tsv"],
+		"application/vnd.ms-excel": [".xls"],
+		"application/xml": [".xml"],
+		...audioFileTypes,
+	},
+};
+
+const cardClass = "border border-border bg-slate-400/5 dark:bg-white/5";
+
+export function DocumentUploadTab({ searchSpaceId, onSuccess }: DocumentUploadTabProps) {
 	const t = useTranslations("upload_documents");
 	const router = useRouter();
 	const [files, setFiles] = useState<File[]>([]);
 	const [uploadProgress, setUploadProgress] = useState(0);
-
-	// Use the uploadDocumentMutationAtom
 	const [uploadDocumentMutation] = useAtom(uploadDocumentMutationAtom);
 	const { mutate: uploadDocuments, isPending: isUploading } = uploadDocumentMutation;
+	const fileInputRef = useRef<HTMLInputElement>(null);
 
-	const audioFileTypes = {
+	const acceptedFileTypes = useMemo(() => {
-		"audio/mpeg": [".mp3", ".mpeg", ".mpga"],
-		"audio/mp4": [".mp4", ".m4a"],
-		"audio/wav": [".wav"],
-		"audio/webm": [".webm"],
-		"text/markdown": [".md", ".markdown"],
-		"text/plain": [".txt"],
-	};
-
-	const getAcceptedFileTypes = () => {
 		const etlService = process.env.NEXT_PUBLIC_ETL_SERVICE;
+		return FILE_TYPE_CONFIG[etlService || "default"] || FILE_TYPE_CONFIG.default;
+	}, []);
 
-		if (etlService === "LLAMACLOUD") {
+	const supportedExtensions = useMemo(
-			return {
+		() => Array.from(new Set(Object.values(acceptedFileTypes).flat())).sort(),
-				"application/pdf": [".pdf"],
+		[acceptedFileTypes]
-				"application/msword": [".doc"],
+	);
-				"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
-				"application/vnd.ms-word.document.macroEnabled.12": [".docm"],
-				"application/msword-template": [".dot"],
-				"application/vnd.ms-word.template.macroEnabled.12": [".dotm"],
-				"application/vnd.ms-powerpoint": [".ppt"],
-				"application/vnd.ms-powerpoint.template.macroEnabled.12": [".pptm"],
-				"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
-				"application/vnd.ms-powerpoint.template": [".pot"],
-				"application/vnd.openxmlformats-officedocument.presentationml.template": [".potx"],
-				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
-				"application/vnd.ms-excel": [".xls"],
-				"application/vnd.ms-excel.sheet.macroEnabled.12": [".xlsm"],
-				"application/vnd.ms-excel.sheet.binary.macroEnabled.12": [".xlsb"],
-				"application/vnd.ms-excel.workspace": [".xlw"],
-				"application/rtf": [".rtf"],
-				"application/xml": [".xml"],
-				"application/epub+zip": [".epub"],
-				"text/csv": [".csv"],
-				"text/tab-separated-values": [".tsv"],
-				"text/html": [".html", ".htm", ".web"],
-				"image/jpeg": [".jpg", ".jpeg"],
-				"image/png": [".png"],
-				"image/gif": [".gif"],
-				"image/bmp": [".bmp"],
-				"image/svg+xml": [".svg"],
-				"image/tiff": [".tiff"],
-				"image/webp": [".webp"],
-				...audioFileTypes,
-			};
-		} else if (etlService === "DOCLING") {
-			return {
-				"application/pdf": [".pdf"],
-				"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
-				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
-				"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
-				"text/asciidoc": [".adoc", ".asciidoc"],
-				"text/html": [".html", ".htm", ".xhtml"],
-				"text/csv": [".csv"],
-				"image/png": [".png"],
-				"image/jpeg": [".jpg", ".jpeg"],
-				"image/tiff": [".tiff", ".tif"],
-				"image/bmp": [".bmp"],
-				"image/webp": [".webp"],
-				...audioFileTypes,
-			};
-		} else {
-			return {
-				"image/bmp": [".bmp"],
-				"text/csv": [".csv"],
-				"application/msword": [".doc"],
-				"application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
-				"message/rfc822": [".eml"],
-				"application/epub+zip": [".epub"],
-				"image/heic": [".heic"],
-				"text/html": [".html"],
-				"image/jpeg": [".jpeg", ".jpg"],
-				"image/png": [".png"],
-				"application/vnd.ms-outlook": [".msg"],
-				"application/vnd.oasis.opendocument.text": [".odt"],
-				"text/x-org": [".org"],
-				"application/pkcs7-signature": [".p7s"],
-				"application/pdf": [".pdf"],
-				"application/vnd.ms-powerpoint": [".ppt"],
-				"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
-				"text/x-rst": [".rst"],
-				"application/rtf": [".rtf"],
-				"image/tiff": [".tiff"],
-				"text/tab-separated-values": [".tsv"],
-				"application/vnd.ms-excel": [".xls"],
-				"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
-				"application/xml": [".xml"],
-				...audioFileTypes,
-			};
-		}
-	};
-
-	const acceptedFileTypes = getAcceptedFileTypes();
-	const supportedExtensions = Array.from(new Set(Object.values(acceptedFileTypes).flat())).sort();
 
 	const onDrop = useCallback((acceptedFiles: File[]) => {
-		setFiles((prevFiles) => [...prevFiles, ...acceptedFiles]);
+		setFiles((prev) => [...prev, ...acceptedFiles]);
 	}, []);
 
 	const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -140,12 +132,12 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 		accept: acceptedFileTypes,
 		maxSize: 50 * 1024 * 1024,
 		noClick: false,
-		noKeyboard: false,
 	});
 
-	const removeFile = (index: number) => {
+	// Handle file input click to prevent event bubbling that might reopen dialog
-		setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+	const handleFileInputClick = useCallback((e: React.MouseEvent<HTMLInputElement>) => {
-	};
+		e.stopPropagation();
+	}, []);
 
 	const formatFileSize = (bytes: number) => {
 		if (bytes === 0) return "0 Bytes";
@@ -155,114 +147,93 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 		return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
 	};
 
+	const totalFileSize = files.reduce((total, file) => total + file.size, 0);
+
 	const handleUpload = async () => {
 		setUploadProgress(0);
+		trackDocumentUploadStarted(Number(searchSpaceId), files.length, totalFileSize);
 
-		// Track upload started
-		const totalSize = files.reduce((sum, file) => sum + file.size, 0);
-		trackDocumentUploadStarted(Number(searchSpaceId), files.length, totalSize);
-
-		// Create a progress interval to simulate progress
 		const progressInterval = setInterval(() => {
-			setUploadProgress((prev) => {
+			setUploadProgress((prev) => (prev >= 90 ? prev : prev + Math.random() * 10));
-				if (prev >= 90) return prev;
-				return prev + Math.random() * 10;
-			});
 		}, 200);
 
-		// Use the mutation to upload documents
 		uploadDocuments(
-			{
+			{ files, search_space_id: Number(searchSpaceId) },
-				files,
-				search_space_id: Number(searchSpaceId),
-			},
 			{
 				onSuccess: () => {
 					clearInterval(progressInterval);
 					setUploadProgress(100);
-
-					// Track upload success
 					trackDocumentUploadSuccess(Number(searchSpaceId), files.length);
-
+					toast(t("upload_initiated"), { description: t("upload_initiated_desc") });
-					toast(t("upload_initiated"), {
+					onSuccess?.() || router.push(`/dashboard/${searchSpaceId}/documents`);
-						description: t("upload_initiated_desc"),
-					});
-					router.push(`/dashboard/${searchSpaceId}/documents`);
 				},
-				onError: (error: any) => {
+				onError: (error: unknown) => {
 					clearInterval(progressInterval);
 					setUploadProgress(0);
-
+					const message = error instanceof Error ? error.message : "Upload failed";
-					// Track upload failure
+					trackDocumentUploadFailure(Number(searchSpaceId), message);
-					trackDocumentUploadFailure(Number(searchSpaceId), error.message || "Upload failed");
-
 					toast(t("upload_error"), {
-						description: `${t("upload_error_desc")}: ${error.message || "Upload failed"}`,
+						description: `${t("upload_error_desc")}: ${message}`,
 					});
 				},
 			}
 		);
 	};
 
-	const getTotalFileSize = () => {
-		return files.reduce((total, file) => total + file.size, 0);
-	};
-
 	return (
 		<motion.div
 			initial={{ opacity: 0, y: 20 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.3 }}
-			className="space-y-6 max-w-4xl mx-auto"
+			className="space-y-3 sm:space-y-6 max-w-4xl mx-auto"
 		>
-			<Alert>
+			<Alert className="border border-border bg-slate-400/5 dark:bg-white/5">
 				<Info className="h-4 w-4" />
 				<AlertDescription className="text-xs sm:text-sm">{t("file_size_limit")}</AlertDescription>
 			</Alert>
 
-			<Card className="relative overflow-hidden">
+			<Card className={`relative overflow-hidden ${cardClass}`}>
 				<div className="absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,white,transparent)] opacity-30">
 					<GridPattern />
 				</div>
-
+				<CardContent className="p-4 sm:p-10 relative z-10">
-				<CardContent className="p-10 relative z-10">
 					<div
 						{...getRootProps()}
-						className="flex flex-col items-center justify-center min-h-[300px] border-2 border-dashed border-muted-foreground/25 rounded-lg hover:border-primary/50 transition-colors cursor-pointer"
+						className="flex flex-col items-center justify-center min-h-[200px] sm:min-h-[300px] border-2 border-dashed border-border rounded-lg hover:border-primary/50 transition-colors cursor-pointer"
 					>
-						<input {...getInputProps()} className="hidden" />
+						<input 
-
+							{...getInputProps()} 
+							ref={fileInputRef}
+							className="hidden"
+							onClick={handleFileInputClick}
+						/>
 						{isDragActive ? (
 							<motion.div
 								initial={{ opacity: 0, scale: 0.8 }}
 								animate={{ opacity: 1, scale: 1 }}
-								className="flex flex-col items-center gap-4"
+								className="flex flex-col items-center gap-2 sm:gap-4"
 							>
-								<Upload className="h-12 w-12 text-primary" />
+								<Upload className="h-8 w-8 sm:h-12 sm:w-12 text-primary" />
-								<p className="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>
 						) : (
-							<motion.div
+							<div className="flex flex-col items-center gap-2 sm:gap-4">
-								initial={{ opacity: 0 }}
+								<Upload className="h-8 w-8 sm:h-12 sm:w-12 text-muted-foreground" />
-								animate={{ opacity: 1 }}
-								className="flex flex-col items-center gap-4"
-							>
-								<Upload className="h-12 w-12 text-muted-foreground" />
 								<div className="text-center">
-									<p className="text-base sm:text-lg font-medium">{t("drag_drop")}</p>
+									<p className="text-sm sm:text-lg font-medium">{t("drag_drop")}</p>
-									<p className="text-sm text-muted-foreground mt-1">{t("or_browse")}</p>
+									<p className="text-xs sm:text-sm text-muted-foreground mt-1">{t("or_browse")}</p>
 								</div>
-							</motion.div>
+							</div>
 						)}
-
+						<div className="mt-2 sm:mt-4">
-						<div className="mt-4">
 							<Button 
 								variant="outline" 
 								size="sm" 
+								className="text-xs sm:text-sm" 
 								onClick={(e) => {
 									e.stopPropagation();
-									const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+									e.preventDefault();
-									if (input) input.click();
+									fileInputRef.current?.click();
 								}}
 							>
 								{t("browse_files")}
@@ -280,29 +251,24 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 						exit={{ opacity: 0, height: 0 }}
 						transition={{ duration: 0.3 }}
 					>
-						<Card>
+						<Card className={cardClass}>
-							<CardHeader>
+							<CardHeader className="p-4 sm:p-6">
-								<div className="flex items-center justify-between">
+								<div className="flex items-center justify-between gap-2">
-									<div>
+									<div className="min-w-0 flex-1">
-										<CardTitle className="text-lg sm:text-2xl">
+										<CardTitle className="text-base sm:text-2xl">
 											{t("selected_files", { count: files.length })}
 										</CardTitle>
 										<CardDescription className="text-xs sm:text-sm">
-											{t("total_size")}: {formatFileSize(getTotalFileSize())}
+											{t("total_size")}: {formatFileSize(totalFileSize)}
 										</CardDescription>
 									</div>
-									<Button
+									<Button variant="outline" size="sm" className="text-xs sm:text-sm shrink-0" onClick={() => setFiles([])} disabled={isUploading}>
-										variant="outline"
-										size="sm"
-										onClick={() => setFiles([])}
-										disabled={isUploading}
-									>
 										{t("clear_all")}
 									</Button>
 								</div>
 							</CardHeader>
-							<CardContent>
+							<CardContent className="p-4 sm:p-6 pt-0">
-								<div className="space-y-3 max-h-[400px] overflow-y-auto">
+								<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
@@ -310,7 +276,7 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 												initial={{ opacity: 0, x: -20 }}
 												animate={{ opacity: 1, x: 0 }}
 												exit={{ opacity: 0, x: 20 }}
-												className="flex items-center justify-between p-4 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
+												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" />
@@ -329,7 +295,7 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 												<Button
 													variant="ghost"
 													size="icon"
-													onClick={() => removeFile(index)}
+													onClick={() => setFiles((prev) => prev.filter((_, i) => i !== index))}
 													disabled={isUploading}
 													className="h-8 w-8"
 												>
@@ -344,11 +310,11 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 									<motion.div
 										initial={{ opacity: 0, y: 10 }}
 										animate={{ opacity: 1, y: 0 }}
-										className="mt-6 space-y-3"
+										className="mt-3 sm:mt-6 space-y-2 sm:space-y-3"
 									>
-										<Separator />
+										<Separator className="bg-border" />
 										<div className="space-y-2">
-											<div className="flex items-center justify-between text-sm">
+											<div className="flex items-center justify-between text-xs sm:text-sm">
 												<span>{t("uploading_files")}</span>
 												<span>{Math.round(uploadProgress)}%</span>
 											</div>
@@ -358,23 +324,23 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 								)}
 
 								<motion.div
-									className="mt-6"
+									className="mt-3 sm:mt-6"
 									initial={{ opacity: 0, y: 10 }}
 									animate={{ opacity: 1, y: 0 }}
 								>
 									<Button
-										className="w-full py-4 sm:py-6 text-sm sm:text-base font-medium"
+										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">
-												<Loader2 className="h-5 w-5 animate-spin" />
+												<Loader2 className="h-4 w-4 sm:h-5 sm:w-5 animate-spin" />
 												{t("uploading")}
 											</span>
 										) : (
 											<span className="flex items-center gap-2">
-												<CheckCircle2 className="h-5 w-5" />
+												<CheckCircle2 className="h-4 w-4 sm:h-5 sm:w-5" />
 												{t("upload_button", { count: files.length })}
 											</span>
 										)}
@@ -386,24 +352,28 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 				)}
 			</AnimatePresence>
 
-			<Card>
+			<Accordion type="single" collapsible className={`w-full ${cardClass} border border-border rounded-lg`}>
-				<CardHeader>
+				<AccordionItem value="supported-file-types" className="border-0">
-					<CardTitle className="flex items-center gap-2">
+					<AccordionTrigger className="px-3 sm:px-6 py-3 sm:py-4 hover:no-underline">
-						<Tag className="h-5 w-5" />
+						<div className="flex items-center gap-2">
-						{t("supported_file_types")}
+							<Tag className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
-					</CardTitle>
+							<div className="text-left min-w-0">
-					<CardDescription>{t("file_types_desc")}</CardDescription>
+								<div className="font-semibold text-sm sm:text-base">{t("supported_file_types")}</div>
-				</CardHeader>
+								<div className="text-xs sm:text-sm text-muted-foreground font-normal">{t("file_types_desc")}</div>
-				<CardContent>
+							</div>
-					<div className="flex flex-wrap gap-2">
+						</div>
-						{supportedExtensions.map((ext) => (
+					</AccordionTrigger>
-							<Badge key={ext} variant="outline" className="text-xs">
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6">
-								{ext}
+						<div className="flex flex-wrap gap-2">
-							</Badge>
+							{supportedExtensions.map((ext) => (
-						))}
+								<Badge key={ext} variant="outline" className="text-xs">
-					</div>
+									{ext}
-				</CardContent>
+								</Badge>
-			</Card>
+							))}
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
 		</motion.div>
 	);
 }

surfsense_web/components/sources/GridPattern.tsx

@@ -2,7 +2,7 @@ export function GridPattern() {
 	const columns = 41;
 	const rows = 11;
 	return (
-		<div className="flex bg-gray-100 dark:bg-neutral-900 flex-shrink-0 flex-wrap justify-center items-center gap-x-px gap-y-px scale-105">
+		<div className="flex bg-transparent flex-shrink-0 flex-wrap justify-center items-center gap-x-px gap-y-px scale-105">
 			{Array.from({ length: rows }).map((_, row) =>
 				Array.from({ length: columns }).map((_, col) => {
 					const index = row * columns + col;
@@ -11,8 +11,8 @@ export function GridPattern() {
 							key={`${col}-${row}`}
 							className={`w-10 h-10 flex flex-shrink-0 rounded-[2px] ${
 								index % 2 === 0
-									? "bg-gray-50 dark:bg-neutral-950"
+									? "bg-slate-200/20 dark:bg-slate-400/10"
-									: "bg-gray-50 dark:bg-neutral-950 shadow-[0px_0px_1px_3px_rgba(255,255,255,1)_inset] dark:shadow-[0px_0px_1px_3px_rgba(0,0,0,1)_inset]"
+									: "bg-slate-300/30 dark:bg-slate-500/15 shadow-[0px_0px_1px_3px_rgba(255,255,255,0.1)_inset] dark:shadow-[0px_0px_1px_3px_rgba(255,255,255,0.05)_inset]"
 							}`}
 						/>
 					);