refactor: simplify dashboard layout by removing unused navigation props and implementing a new DocumentsSidebar for better document management

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

@@ -27,8 +27,6 @@ export function DashboardClientLayout({
 }: {
 	children: React.ReactNode;
 	searchSpaceId: string;
-	navSecondary?: any[];
-	navMain?: any[];
 }) {
 	const t = useTranslations("dashboard");
 	const router = useRouter();

surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx

@@ -256,7 +256,7 @@ export default function EditorPage() {
 
 				setHasUnsavedChanges(false);
 				toast.success("Note created successfully! Reindexing in background...");
-				router.push(`/dashboard/${searchSpaceId}/documents`);
+				router.push(`/dashboard/${searchSpaceId}/new-chat`);
 			} else {
 				// Existing document — save
 				const response = await authenticatedFetch(
@@ -277,7 +277,7 @@ export default function EditorPage() {
 
 				setHasUnsavedChanges(false);
 				toast.success("Document saved! Reindexing in background...");
-				router.push(`/dashboard/${searchSpaceId}/documents`);
+				router.push(`/dashboard/${searchSpaceId}/new-chat`);
 			}
 		} catch (error) {
 			console.error("Error saving document:", error);
@@ -298,7 +298,7 @@ export default function EditorPage() {
 		if (hasUnsavedChanges) {
 			setShowUnsavedDialog(true);
 		} else {
-			router.push(`/dashboard/${searchSpaceId}/documents`);
+			router.push(`/dashboard/${searchSpaceId}/new-chat`);
 		}
 	};
 
@@ -311,7 +311,7 @@ export default function EditorPage() {
 			router.push(pendingNavigation);
 			setPendingNavigation(null);
 		} else {
-			router.push(`/dashboard/${searchSpaceId}/documents`);
+			router.push(`/dashboard/${searchSpaceId}/new-chat`);
 		}
 	};
 

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

@@ -10,43 +10,10 @@ export default function DashboardLayout({
 	params: Promise<{ search_space_id: string }>;
 	children: React.ReactNode;
 }) {
-	// Use React.use to unwrap the params Promise
 	const { search_space_id } = use(params);
 
-	const customNavSecondary = [
-		{
-			title: `All Search Spaces`,
-			url: `#`,
-			icon: "Info",
-		},
-		{
-			title: `All Search Spaces`,
-			url: "/dashboard",
-			icon: "Undo2",
-		},
-	];
-
-	const customNavMain = [
-		{
-			title: "Chat",
-			url: `/dashboard/${search_space_id}/new-chat`,
-			icon: "MessageCircle",
-			items: [],
-		},
-		{
-			title: "Documents",
-			url: `/dashboard/${search_space_id}/documents`,
-			icon: "SquareLibrary",
-			items: [],
-		},
-	];
-
 	return (
-		<DashboardClientLayout
-			searchSpaceId={search_space_id}
-			navSecondary={customNavSecondary}
-			navMain={customNavMain}
-		>
+		<DashboardClientLayout searchSpaceId={search_space_id}>
 			{children}
 		</DashboardClientLayout>
 	);

surfsense_web/components/assistant-ui/connector-popup.tsx

@@ -415,7 +415,6 @@ export const ConnectorIndicator: FC<{ hideTrigger?: boolean }> = ({ hideTrigger
 										activeDocumentTypes={activeDocumentTypes}
 										connectors={connectors as SearchSourceConnector[]}
 										indexingConnectorIds={indexingConnectorIds}
-										searchSpaceId={searchSpaceId}
 										onTabChange={handleTabChange}
 										onManage={handleStartEdit}
 										onViewAccountsList={handleViewAccountsList}

surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx

@@ -1,18 +1,13 @@
 "use client";
 
-import { ArrowRight, Cable } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { Cable } from "lucide-react";
 import type { FC } from "react";
-import { useState } from "react";
 import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
-import { Switch } from "@/components/ui/switch";
 import { TabsContent } from "@/components/ui/tabs";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-import type { LogActiveTask, LogSummary } from "@/contracts/types/log.types";
-import { connectorsApiService } from "@/lib/apis/connectors-api.service";
 import { cn } from "@/lib/utils";
 import { COMPOSIO_CONNECTORS, OAUTH_CONNECTORS } from "../constants/connector-constants";
 import { getDocumentCountForConnector } from "../utils/connector-document-mapping";
@@ -25,37 +20,21 @@ interface ActiveConnectorsTabProps {
 	activeDocumentTypes: Array<[string, number]>;
 	connectors: SearchSourceConnector[];
 	indexingConnectorIds: Set<number>;
-	searchSpaceId: string;
 	onTabChange: (value: string) => void;
 	onManage?: (connector: SearchSourceConnector) => void;
 	onViewAccountsList?: (connectorType: string, connectorTitle: string) => void;
 }
 
-/**
- * Check if a connector type is indexable
- */
-function isIndexableConnector(connectorType: string): boolean {
-	const nonIndexableTypes = ["MCP_CONNECTOR"];
-	return !nonIndexableTypes.includes(connectorType);
-}
-
 export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 	searchQuery,
 	hasSources,
 	activeDocumentTypes,
 	connectors,
 	indexingConnectorIds,
-	searchSpaceId,
-	onTabChange,
+	onTabChange: _onTabChange,
 	onManage,
 	onViewAccountsList,
 }) => {
-	const router = useRouter();
-
-	const handleViewAllDocuments = () => {
-		router.push(`/dashboard/${searchSpaceId}/documents`);
-	};
-
 	// Convert activeDocumentTypes array to Record for utility function
 	const documentTypeCounts = activeDocumentTypes.reduce(
 		(acc, [docType, count]) => {
@@ -300,15 +279,6 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 						<div className="space-y-4">
 							<div className="flex items-center justify-between">
 								<h3 className="text-sm font-semibold text-muted-foreground">Documents</h3>
-								<Button
-									variant="ghost"
-									size="sm"
-									onClick={handleViewAllDocuments}
-									className="h-7 text-xs text-muted-foreground hover:text-foreground gap-1.5"
-								>
-									View all documents
-									<ArrowRight className="size-3" />
-								</Button>
 							</div>
 							<div className="flex flex-wrap items-center gap-2">
 								{standaloneDocuments.map((doc) => (

surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx

@@ -3,7 +3,6 @@
 import { TagInput, type Tag as TagType } from "emblor";
 import { useAtom } from "jotai";
 import { ArrowLeft } from "lucide-react";
-import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { type FC, useState } from "react";
 import { toast } from "sonner";
@@ -24,7 +23,6 @@ interface YouTubeCrawlerViewProps {
 
 export const YouTubeCrawlerView: FC<YouTubeCrawlerViewProps> = ({ searchSpaceId, onBack }) => {
 	const t = useTranslations("add_youtube");
-	const router = useRouter();
 	const [videoTags, setVideoTags] = useState<TagType[]>([]);
 	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
 	const [error, setError] = useState<string | null>(null);
@@ -74,9 +72,7 @@ export const YouTubeCrawlerView: FC<YouTubeCrawlerViewProps> = ({ searchSpaceId,
 					toast(t("success_toast"), {
 						description: t("success_toast_desc"),
 					});
-					// Close the popup and navigate to documents
 					onBack();
-					router.push(`/dashboard/${searchSpaceId}/documents`);
 				},
 				onError: (error: unknown) => {
 					const errorMessage = error instanceof Error ? error.message : t("error_generic");

surfsense_web/components/dashboard-breadcrumb.tsx

@@ -118,7 +118,6 @@ export function DashboardBreadcrumb() {
 
 					// Handle editor sub-sections (document ID)
 					if (section === "editor") {
-						// Handle special cases for editor
 						let documentLabel: string;
 						if (subSection === "new") {
 							documentLabel = "New Note";
@@ -128,11 +127,9 @@ export function DashboardBreadcrumb() {
 
 						breadcrumbs.push({
 							label: t("documents"),
-							href: `/dashboard/${segments[1]}/documents`,
 						});
 						breadcrumbs.push({
 							label: sectionLabel,
-							href: `/dashboard/${segments[1]}/documents`,
 						});
 						breadcrumbs.push({ label: documentLabel });
 						return breadcrumbs;
@@ -148,7 +145,6 @@ export function DashboardBreadcrumb() {
 						const documentLabel = documentLabels[subSection] || subSection;
 						breadcrumbs.push({
 							label: t("documents"),
-							href: `/dashboard/${segments[1]}/documents`,
 						});
 						breadcrumbs.push({ label: documentLabel });
 						return breadcrumbs;

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -114,6 +114,9 @@ export function LayoutDataProvider({
 	const [isInboxSidebarOpen, setIsInboxSidebarOpen] = useState(false);
 	const [isInboxDocked, setIsInboxDocked] = useState(false);
 
+	// Documents sidebar state
+	const [isDocumentsSidebarOpen, setIsDocumentsSidebarOpen] = useState(false);
+
 	// Search space dialog state
 	const [isCreateSearchSpaceDialogOpen, setIsCreateSearchSpaceDialogOpen] = useState(false);
 
@@ -301,9 +304,9 @@ export function LayoutDataProvider({
 			},
 			{
 				title: "Documents",
-				url: `/dashboard/${searchSpaceId}/documents`,
+				url: "#documents",
 				icon: SquareLibrary,
-				isActive: pathname?.includes("/documents"),
+				isActive: isDocumentsSidebarOpen,
 			},
 			{
 				title: "Announcements",
@@ -313,7 +316,7 @@ export function LayoutDataProvider({
 				badge: announcementUnreadCount > 0 ? formatInboxCount(announcementUnreadCount) : undefined,
 			},
 		],
-		[searchSpaceId, pathname, isInboxSidebarOpen, totalUnreadCount, announcementUnreadCount]
+		[pathname, isInboxSidebarOpen, isDocumentsSidebarOpen, totalUnreadCount, announcementUnreadCount]
 	);
 
 	// Handlers
@@ -411,6 +414,19 @@ export function LayoutDataProvider({
 					if (!prev) {
 						setIsAllSharedChatsSidebarOpen(false);
 						setIsAllPrivateChatsSidebarOpen(false);
+						setIsDocumentsSidebarOpen(false);
+					}
+					return !prev;
+				});
+				return;
+			}
+			// Handle documents specially - toggle sidebar instead of navigating
+			if (item.url === "#documents") {
+				setIsDocumentsSidebarOpen((prev) => {
+					if (!prev) {
+						setIsInboxSidebarOpen(false);
+						setIsAllSharedChatsSidebarOpen(false);
+						setIsAllPrivateChatsSidebarOpen(false);
 					}
 					return !prev;
 				});
@@ -515,12 +531,14 @@ export function LayoutDataProvider({
 		setIsAllSharedChatsSidebarOpen(true);
 		setIsAllPrivateChatsSidebarOpen(false);
 		setIsInboxSidebarOpen(false);
+		setIsDocumentsSidebarOpen(false);
 	}, []);
 
 	const handleViewAllPrivateChats = useCallback(() => {
 		setIsAllPrivateChatsSidebarOpen(true);
 		setIsAllSharedChatsSidebarOpen(false);
 		setIsInboxSidebarOpen(false);
+		setIsDocumentsSidebarOpen(false);
 	}, []);
 
 	// Delete handlers
@@ -651,6 +669,10 @@ export function LayoutDataProvider({
 					onOpenChange: setIsAllPrivateChatsSidebarOpen,
 					searchSpaceId,
 				}}
+				documentsPanel={{
+					open: isDocumentsSidebarOpen,
+					onOpenChange: setIsDocumentsSidebarOpen,
+				}}
 			>
 				{children}
 			</LayoutShell>

surfsense_web/components/layout/ui/shell/LayoutShell.tsx

@@ -13,6 +13,7 @@ import { IconRail } from "../icon-rail";
 import {
 	AllPrivateChatsSidebar,
 	AllSharedChatsSidebar,
+	DocumentsSidebar,
 	InboxSidebar,
 	MobileSidebar,
 	MobileSidebarTrigger,
@@ -94,6 +95,10 @@ interface LayoutShellProps {
 		onOpenChange: (open: boolean) => void;
 		searchSpaceId: string;
 	};
+	documentsPanel?: {
+		open: boolean;
+		onOpenChange: (open: boolean) => void;
+	};
 }
 
 export function LayoutShell({
@@ -133,6 +138,7 @@ export function LayoutShell({
 	isLoadingChats = false,
 	allSharedChatsPanel,
 	allPrivateChatsPanel,
+	documentsPanel,
 }: LayoutShellProps) {
 	const isMobile = useIsMobile();
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -211,6 +217,14 @@ export function LayoutShell({
 							/>
 						)}
 
+						{/* Mobile Documents Sidebar - slide-out panel */}
+						{documentsPanel && (
+							<DocumentsSidebar
+								open={documentsPanel.open}
+								onOpenChange={documentsPanel.onOpenChange}
+							/>
+						)}
+
 						{/* Mobile All Shared Chats - slide-out panel */}
 						{allSharedChatsPanel && (
 							<AllSharedChatsSidebar
@@ -325,6 +339,14 @@ export function LayoutShell({
 							/>
 						)}
 
+						{/* Documents Sidebar - slide-out panel */}
+						{documentsPanel && (
+							<DocumentsSidebar
+								open={documentsPanel.open}
+								onOpenChange={documentsPanel.onOpenChange}
+							/>
+						)}
+
 						{/* All Shared Chats - slide-out panel */}
 						{allSharedChatsPanel && (
 							<AllSharedChatsSidebar

surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx

@@ -0,0 +1,333 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { ChevronLeft, SquareLibrary } from "lucide-react";
+import { useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { deleteDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
+import { Button } from "@/components/ui/button";
+import type { DocumentTypeEnum } from "@/contracts/types/document.types";
+import { useDocuments } from "@/hooks/use-documents";
+import { documentsApiService } from "@/lib/apis/documents-api.service";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import {
+	DocumentsFilters,
+} from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters";
+import {
+	DocumentsTableShell,
+	type SortKey,
+} from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell";
+import {
+	PAGE_SIZE,
+	PaginationControls,
+} from "@/app/dashboard/[search_space_id]/documents/(manage)/components/PaginationControls";
+import type { ColumnVisibility } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/types";
+import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
+
+function useDebounced<T>(value: T, delay = 250) {
+	const [debounced, setDebounced] = useState(value);
+	useEffect(() => {
+		const t = setTimeout(() => setDebounced(value), delay);
+		return () => clearTimeout(t);
+	}, [value, delay]);
+	return debounced;
+}
+
+interface DocumentsSidebarProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export function DocumentsSidebar({ open, onOpenChange }: DocumentsSidebarProps) {
+	const t = useTranslations("documents");
+	const tSidebar = useTranslations("sidebar");
+	const params = useParams();
+	const isMobile = !useMediaQuery("(min-width: 640px)");
+	const searchSpaceId = Number(params.search_space_id);
+
+	const [search, setSearch] = useState("");
+	const debouncedSearch = useDebounced(search, 250);
+	const [activeTypes, setActiveTypes] = useState<DocumentTypeEnum[]>([]);
+	const [columnVisibility, setColumnVisibility] = useState<ColumnVisibility>({
+		document_type: true,
+		created_by: false,
+		created_at: true,
+		status: true,
+	});
+	const [pageIndex, setPageIndex] = useState(0);
+	const [sortKey, setSortKey] = useState<SortKey>("created_at");
+	const [sortDesc, setSortDesc] = useState(true);
+	const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
+	const { mutateAsync: deleteDocumentMutation } = useAtomValue(deleteDocumentMutationAtom);
+
+	const {
+		documents: realtimeDocuments,
+		typeCounts: realtimeTypeCounts,
+		loading: realtimeLoading,
+		error: realtimeError,
+	} = useDocuments(searchSpaceId, activeTypes);
+
+	const isSearchMode = !!debouncedSearch.trim();
+
+	const searchQueryParams = useMemo(
+		() => ({
+			search_space_id: searchSpaceId,
+			page: pageIndex,
+			page_size: PAGE_SIZE,
+			title: debouncedSearch.trim(),
+			...(activeTypes.length > 0 && { document_types: activeTypes }),
+		}),
+		[searchSpaceId, pageIndex, activeTypes, debouncedSearch]
+	);
+
+	const {
+		data: searchResponse,
+		isLoading: isSearchLoading,
+		refetch: refetchSearch,
+		error: searchError,
+	} = useQuery({
+		queryKey: cacheKeys.documents.globalQueryParams(searchQueryParams),
+		queryFn: () => documentsApiService.searchDocuments({ queryParams: searchQueryParams }),
+		staleTime: 30 * 1000,
+		enabled: !!searchSpaceId && isSearchMode && open,
+	});
+
+	const sortedRealtimeDocuments = useMemo(() => {
+		const docs = [...realtimeDocuments];
+		docs.sort((a, b) => {
+			const av = a[sortKey] ?? "";
+			const bv = b[sortKey] ?? "";
+			let cmp: number;
+			if (sortKey === "created_at") {
+				cmp = new Date(av as string).getTime() - new Date(bv as string).getTime();
+			} else {
+				cmp = String(av).localeCompare(String(bv));
+			}
+			return sortDesc ? -cmp : cmp;
+		});
+		return docs;
+	}, [realtimeDocuments, sortKey, sortDesc]);
+
+	const paginatedRealtimeDocuments = useMemo(() => {
+		const start = pageIndex * PAGE_SIZE;
+		const end = start + PAGE_SIZE;
+		return sortedRealtimeDocuments.slice(start, end);
+	}, [sortedRealtimeDocuments, pageIndex]);
+
+	const displayDocs = isSearchMode
+		? (searchResponse?.items || []).map((item) => ({
+				id: item.id,
+				search_space_id: item.search_space_id,
+				document_type: item.document_type,
+				title: item.title,
+				created_by_id: item.created_by_id ?? null,
+				created_by_name: item.created_by_name ?? null,
+				created_by_email: item.created_by_email ?? null,
+				created_at: item.created_at,
+				status: (
+					item as {
+						status?: { state: "ready" | "pending" | "processing" | "failed"; reason?: string };
+					}
+				).status ?? { state: "ready" as const },
+			}))
+		: paginatedRealtimeDocuments;
+
+	const displayTotal = isSearchMode ? searchResponse?.total || 0 : sortedRealtimeDocuments.length;
+	const loading = isSearchMode ? isSearchLoading : realtimeLoading;
+	const error = isSearchMode ? searchError : realtimeError;
+	const pageEnd = Math.min((pageIndex + 1) * PAGE_SIZE, displayTotal);
+
+	const onToggleType = (type: DocumentTypeEnum, checked: boolean) => {
+		setActiveTypes((prev) => {
+			if (checked) {
+				return prev.includes(type) ? prev : [...prev, type];
+			}
+			return prev.filter((t) => t !== type);
+		});
+		setPageIndex(0);
+		setSelectedIds(new Set());
+	};
+
+	const onBulkDelete = async () => {
+		if (selectedIds.size === 0) {
+			toast.error(t("no_rows_selected"));
+			return;
+		}
+
+		const allDocs = isSearchMode
+			? (searchResponse?.items || []).map((item) => ({
+					id: item.id,
+					status: (item as { status?: { state: string } }).status,
+				}))
+			: sortedRealtimeDocuments.map((doc) => ({ id: doc.id, status: doc.status }));
+
+		const selectedDocs = allDocs.filter((doc) => selectedIds.has(doc.id));
+		const deletableIds = selectedDocs
+			.filter((doc) => doc.status?.state !== "pending" && doc.status?.state !== "processing")
+			.map((doc) => doc.id);
+		const inProgressCount = selectedIds.size - deletableIds.length;
+
+		if (inProgressCount > 0) {
+			toast.warning(
+				`${inProgressCount} document(s) are pending or processing and cannot be deleted.`
+			);
+		}
+
+		if (deletableIds.length === 0) return;
+
+		try {
+			let conflictCount = 0;
+			const results = await Promise.all(
+				deletableIds.map(async (id) => {
+					try {
+						await deleteDocumentMutation({ id });
+						return true;
+					} catch (error: unknown) {
+						const status =
+							(error as { response?: { status?: number } })?.response?.status ??
+							(error as { status?: number })?.status;
+						if (status === 409) conflictCount++;
+						return false;
+					}
+				})
+			);
+			const okCount = results.filter((r) => r === true).length;
+			if (okCount === deletableIds.length) {
+				toast.success(t("delete_success_count", { count: okCount }));
+			} else if (conflictCount > 0) {
+				toast.error(`${conflictCount} document(s) started processing. Please try again later.`);
+			} else {
+				toast.error(t("delete_partial_failed"));
+			}
+			if (isSearchMode) await refetchSearch();
+			setSelectedIds(new Set());
+		} catch (e) {
+			console.error(e);
+			toast.error(t("delete_error"));
+		}
+	};
+
+	const handleDeleteDocument = useCallback(
+		async (id: number): Promise<boolean> => {
+			try {
+				await deleteDocumentMutation({ id });
+				toast.success(t("delete_success") || "Document deleted");
+				if (isSearchMode) await refetchSearch();
+				return true;
+			} catch (e) {
+				console.error("Error deleting document:", e);
+				return false;
+			}
+		},
+		[deleteDocumentMutation, isSearchMode, refetchSearch, t]
+	);
+
+	const handleSortChange = useCallback((key: SortKey) => {
+		setSortKey((currentKey) => {
+			if (currentKey === key) {
+				setSortDesc((v) => !v);
+				return currentKey;
+			}
+			setSortDesc(false);
+			return key;
+		});
+	}, []);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: Reset page on search change
+	useEffect(() => {
+		setPageIndex(0);
+	}, [debouncedSearch]);
+
+	useEffect(() => {
+		if (!open) return;
+		const panelWidth = isMobile ? window.innerWidth : 720;
+		const isNarrow = panelWidth < 600;
+		setColumnVisibility((prev) => ({ ...prev, created_by: !isNarrow, created_at: !isNarrow }));
+	}, [open, isMobile]);
+
+	useEffect(() => {
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key === "Escape" && open) {
+				onOpenChange(false);
+			}
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [open, onOpenChange]);
+
+	const documentsContent = (
+		<>
+			<div className="shrink-0 p-4 pb-2">
+				<div className="flex items-center justify-between">
+					<div className="flex items-center gap-2">
+						{isMobile && (
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-8 w-8 rounded-full"
+								onClick={() => onOpenChange(false)}
+							>
+								<ChevronLeft className="h-4 w-4 text-muted-foreground" />
+								<span className="sr-only">{tSidebar("close") || "Close"}</span>
+							</Button>
+						)}
+						<SquareLibrary className="h-5 w-5 text-muted-foreground" />
+						<h2 className="text-lg font-semibold">{t("title") || "Documents"}</h2>
+					</div>
+				</div>
+			</div>
+
+			<div className="flex-1 overflow-y-auto overflow-x-hidden p-4 pt-0 space-y-4">
+				<DocumentsFilters
+					typeCounts={realtimeTypeCounts}
+					selectedIds={selectedIds}
+					onSearch={setSearch}
+					searchValue={search}
+					onBulkDelete={onBulkDelete}
+					onToggleType={onToggleType}
+					activeTypes={activeTypes}
+				/>
+
+				<DocumentsTableShell
+					documents={displayDocs}
+					loading={!!loading}
+					error={!!error}
+					selectedIds={selectedIds}
+					setSelectedIds={setSelectedIds}
+					columnVisibility={columnVisibility}
+					sortKey={sortKey}
+					sortDesc={sortDesc}
+					onSortChange={handleSortChange}
+					deleteDocument={handleDeleteDocument}
+					searchSpaceId={String(searchSpaceId)}
+				/>
+
+				<PaginationControls
+					pageIndex={pageIndex}
+					total={displayTotal}
+					onFirst={() => setPageIndex(0)}
+					onPrev={() => setPageIndex((i) => Math.max(0, i - 1))}
+					onNext={() => setPageIndex((i) => (pageEnd < displayTotal ? i + 1 : i))}
+					onLast={() => setPageIndex(Math.max(0, Math.ceil(displayTotal / PAGE_SIZE) - 1))}
+					canPrev={pageIndex > 0}
+					canNext={pageEnd < displayTotal}
+				/>
+			</div>
+		</>
+	);
+
+	return (
+		<SidebarSlideOutPanel
+			open={open}
+			onOpenChange={onOpenChange}
+			ariaLabel={t("title") || "Documents"}
+			width={isMobile ? undefined : 720}
+		>
+			{documentsContent}
+		</SidebarSlideOutPanel>
+	);
+}

surfsense_web/components/layout/ui/sidebar/index.ts

@@ -1,6 +1,7 @@
 export { AllPrivateChatsSidebar } from "./AllPrivateChatsSidebar";
 export { AllSharedChatsSidebar } from "./AllSharedChatsSidebar";
 export { ChatListItem } from "./ChatListItem";
+export { DocumentsSidebar } from "./DocumentsSidebar";
 export { InboxSidebar } from "./InboxSidebar";
 export { MobileSidebar, MobileSidebarTrigger } from "./MobileSidebar";
 export { NavSection } from "./NavSection";