feat: Refactor document upload and connector management UI, enhance user experience with improved loading states, and streamline source addition process by removing unnecessary components.

surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx

@@ -38,7 +38,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
 	Dialog,
 	DialogContent,
@@ -348,12 +347,6 @@ export default function ConnectorsPage() {
 				</Button>
 			</motion.div>
 
-			<Card>
-				<CardHeader className="pb-3">
-					<CardTitle>{t("your_connectors")}</CardTitle>
-					<CardDescription>{t("view_manage")}</CardDescription>
-				</CardHeader>
-				<CardContent>
 			{isLoading ? (
 				<div className="flex justify-center py-8">
 					<div className="animate-pulse text-center">
@@ -561,8 +554,6 @@ export default function ConnectorsPage() {
 					</Table>
 				</div>
 			)}
-				</CardContent>
-			</Card>
 
 			{/* Date Picker Dialog */}
 			<Dialog open={datePickerOpen} onOpenChange={setDatePickerOpen}>

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

@@ -1,16 +1,36 @@
 "use client";
 
-import { useParams, useRouter } from "next/navigation";
+import { Upload } from "lucide-react";
-import { useEffect } from "react";
+import { motion } from "motion/react";
+import { useParams } from "next/navigation";
+import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
 
-export default function UploadDocumentsRedirect() {
+export default function UploadDocumentsPage() {
 	const params = useParams();
-	const router = useRouter();
 	const search_space_id = params.search_space_id as string;
 
-	useEffect(() => {
+	return (
-		router.replace(`/dashboard/${search_space_id}/sources/add?tab=documents`);
+		<div className="container mx-auto py-8 px-4 min-h-[calc(100vh-64px)]">
-	}, [search_space_id, router]);
+			<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>
 
-	return null;
+				{/* Document Upload */}
+				<DocumentUploadTab searchSpaceId={search_space_id} />
+			</motion.div>
+		</div>
+	);
 }

surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx

@@ -1,12 +1,11 @@
 "use client";
 
 import { IconBrandYoutube } from "@tabler/icons-react";
-import { Cable, Database, Globe, Upload } from "lucide-react";
+import { Cable, Database, Globe } from "lucide-react";
 import { motion } from "motion/react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { ConnectorsTab } from "@/components/sources/ConnectorsTab";
-import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
 import { YouTubeTab } from "@/components/sources/YouTubeTab";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { trackSourcesTabViewed } from "@/lib/posthog/events";
@@ -16,12 +15,12 @@ export default function AddSourcesPage() {
 	const router = useRouter();
 	const searchParams = useSearchParams();
 	const search_space_id = params.search_space_id as string;
-	const [activeTab, setActiveTab] = useState("documents");
+	const [activeTab, setActiveTab] = useState("youtube");
 
 	// Handle tab from query parameter
 	useEffect(() => {
 		const tabParam = searchParams.get("tab");
-		if (tabParam && ["documents", "youtube", "connectors"].includes(tabParam)) {
+		if (tabParam && ["youtube", "connectors"].includes(tabParam)) {
 			setActiveTab(tabParam);
 		}
 	}, [searchParams]);
@@ -62,12 +61,7 @@ export default function AddSourcesPage() {
 
 				{/* Tabs */}
 				<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-					<TabsList className="grid w-full max-w-3xl mx-auto grid-cols-4 h-12">
+					<TabsList className="grid w-full max-w-2xl mx-auto grid-cols-3 h-12">
-						<TabsTrigger value="documents" className="flex items-center gap-2">
-							<Upload className="h-4 w-4" />
-							<span className="hidden sm:inline">Documents</span>
-							<span className="sm:hidden">Docs</span>
-						</TabsTrigger>
 						<TabsTrigger value="youtube" className="flex items-center gap-2">
 							<IconBrandYoutube className="h-4 w-4" />
 							YouTube
@@ -85,10 +79,6 @@ export default function AddSourcesPage() {
 					</TabsList>
 
 					<div className="mt-8">
-						<TabsContent value="documents" className="space-y-6">
-							<DocumentUploadTab searchSpaceId={search_space_id} />
-						</TabsContent>
-
 						<TabsContent value="youtube" className="space-y-6">
 							<YouTubeTab searchSpaceId={search_space_id} />
 						</TabsContent>

surfsense_web/components/assistant-ui/attachment.tsx

@@ -325,7 +325,7 @@ export const ComposerAddAttachment: FC = () => {
 	const chatAttachmentInputRef = useRef<HTMLInputElement>(null);
 
 	const handleFileUpload = () => {
-		router.push(`/dashboard/${searchSpaceId}/sources/add?tab=documents`);
+		router.push(`/dashboard/${searchSpaceId}/documents/upload`);
 	};
 
 	const handleChatAttachment = () => {