feat: add folder management features including creation, deletion, and organization of documents within folders

surfsense_web/components/layout/ui/header/Header.tsx

@@ -8,6 +8,7 @@ import { reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
 import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { activeTabAtom } from "@/atoms/tabs/tabs.atom";
 import { ChatHeader } from "@/components/new-chat/chat-header";
 import { ChatShareButton } from "@/components/new-chat/chat-share-button";
 import { Button } from "@/components/ui/button";
@@ -23,12 +24,14 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 	const pathname = usePathname();
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 	const isMobile = useIsMobile();
+	const activeTab = useAtomValue(activeTabAtom);
 
 	const isChatPage = pathname?.includes("/new-chat") ?? false;
+	const isDocumentTab = activeTab?.type === "document";
 
 	const currentThreadState = useAtomValue(currentThreadAtom);
 
-	const hasThread = isChatPage && currentThreadState.id !== null;
+	const hasThread = isChatPage && !isDocumentTab && currentThreadState.id !== null;
 
 	const threadForButton: ThreadRecord | null =
 		hasThread && currentThreadState.id !== null
@@ -58,7 +61,7 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 			{/* Left side - Mobile menu trigger + Model selector */}
 			<div className="flex flex-1 items-center gap-2 min-w-0">
 				{mobileMenuTrigger}
-				{isChatPage && searchSpaceId && (
+				{isChatPage && !isDocumentTab && searchSpaceId && (
 					<ChatHeader searchSpaceId={Number(searchSpaceId)} className="md:h-9 md:px-4 md:text-sm" />
 				)}
 			</div>

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

@@ -1,7 +1,9 @@
 "use client";
 
+import { useAtomValue } from "jotai";
 import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useMemo, useState } from "react";
+import { activeTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { InboxItem } from "@/hooks/use-inbox";
 import { useIsMobile } from "@/hooks/use-mobile";
@@ -23,6 +25,8 @@ import {
 	Sidebar,
 } from "../sidebar";
 import { SidebarSlideOutPanel } from "../sidebar/SidebarSlideOutPanel";
+import { DocumentTabContent } from "../tabs/DocumentTabContent";
+import { TabBar } from "../tabs/TabBar";
 
 // Per-tab data source
 interface TabDataSource {
@@ -97,6 +101,44 @@ interface LayoutShellProps {
 		isDocked?: boolean;
 		onDockedChange?: (docked: boolean) => void;
 	};
+	onTabSwitch?: (tab: Tab) => void;
+}
+
+function MainContentPanel({
+	isChatPage,
+	onTabSwitch,
+	onNewChat,
+	children,
+}: {
+	isChatPage: boolean;
+	onTabSwitch?: (tab: Tab) => void;
+	onNewChat?: () => void;
+	children: React.ReactNode;
+}) {
+	const activeTab = useAtomValue(activeTabAtom);
+	const isDocumentTab = activeTab?.type === "document";
+
+	return (
+		<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
+			<TabBar onTabSwitch={onTabSwitch} onNewChat={onNewChat} />
+			<Header />
+
+			{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
+				<div className="flex-1 overflow-hidden">
+					<DocumentTabContent
+						key={activeTab.documentId}
+						documentId={activeTab.documentId}
+						searchSpaceId={activeTab.searchSpaceId}
+						title={activeTab.title}
+					/>
+				</div>
+			) : (
+				<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+					{children}
+				</div>
+			)}
+		</div>
+	);
 }
 
 export function LayoutShell({
@@ -138,6 +180,7 @@ export function LayoutShell({
 	allSharedChatsPanel,
 	allPrivateChatsPanel,
 	documentsPanel,
+	onTabSwitch,
 }: LayoutShellProps) {
 	const isMobile = useIsMobile();
 	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -454,14 +497,14 @@ export function LayoutShell({
 						/>
 					)}
 
-					{/* Main content panel */}
-					<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
-						<Header />
-
-						<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
-							{children}
-						</div>
-					</div>
+				{/* Main content panel */}
+				<MainContentPanel
+					isChatPage={isChatPage}
+					onTabSwitch={onTabSwitch}
+					onNewChat={onNewChat}
+				>
+					{children}
+				</MainContentPanel>
 
 					{/* Right panel — tabbed Sources/Report (desktop only) */}
 					{documentsPanel && (

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { openDocumentTabAtom } from "@/atoms/tabs/tabs.atom";
 import { ChevronLeft, ChevronRight, Unplug } from "lucide-react";
 import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
@@ -15,15 +16,24 @@ import { sidebarSelectedDocumentsAtom } from "@/atoms/chat/mentioned-documents.a
 import { connectorDialogOpenAtom } from "@/atoms/connector-dialog/connector-dialog.atoms";
 import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
 import { deleteDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
+import { expandedFolderIdsAtom } from "@/atoms/documents/folder.atoms";
+import { CreateFolderDialog } from "@/components/documents/CreateFolderDialog";
+import type { DocumentNodeDoc } from "@/components/documents/DocumentNode";
+import { FolderPickerDialog } from "@/components/documents/FolderPickerDialog";
+import type { FolderDisplay } from "@/components/documents/FolderNode";
+import { FolderTreeView } from "@/components/documents/FolderTreeView";
 import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { DocumentTypeEnum } from "@/contracts/types/document.types";
+import { foldersApiService } from "@/lib/apis/folders-api.service";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useDocumentSearch } from "@/hooks/use-document-search";
 import { useDocuments } from "@/hooks/use-documents";
 import { useMediaQuery } from "@/hooks/use-media-query";
+import { useQuery } from "@rocicorp/zero/react";
+import { queries } from "@/zero/queries/index";
 import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
 
 const SHOWCASE_CONNECTORS = [
@@ -63,6 +73,7 @@ export function DocumentsSidebar({
 	const isMobile = !useMediaQuery("(min-width: 640px)");
 	const searchSpaceId = Number(params.search_space_id);
 	const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
+	const openDocumentTab = useSetAtom(openDocumentTabAtom);
 	const { data: connectors } = useAtomValue(connectorsAtom);
 	const connectorCount = connectors?.length ?? 0;
 
@@ -76,6 +87,219 @@ export function DocumentsSidebar({
 	const [sidebarDocs, setSidebarDocs] = useAtom(sidebarSelectedDocumentsAtom);
 	const mentionedDocIds = useMemo(() => new Set(sidebarDocs.map((d) => d.id)), [sidebarDocs]);
 
+	// Folder state
+	const [expandedFolderMap, setExpandedFolderMap] = useAtom(expandedFolderIdsAtom);
+	const expandedIds = useMemo(
+		() => new Set(expandedFolderMap[searchSpaceId] ?? []),
+		[expandedFolderMap, searchSpaceId],
+	);
+	const toggleFolderExpand = useCallback(
+		(folderId: number) => {
+			setExpandedFolderMap((prev) => {
+				const current = new Set(prev[searchSpaceId] ?? []);
+				if (current.has(folderId)) current.delete(folderId);
+				else current.add(folderId);
+				return { ...prev, [searchSpaceId]: [...current] };
+			});
+		},
+		[searchSpaceId, setExpandedFolderMap],
+	);
+
+	// Zero queries for tree data
+	const [zeroFolders] = useQuery(queries.folders.bySpace({ searchSpaceId }));
+	const [zeroAllDocs] = useQuery(queries.documents.bySpace({ searchSpaceId }));
+
+	const treeFolders: FolderDisplay[] = useMemo(
+		() =>
+			(zeroFolders ?? []).map((f) => ({
+				id: f.id,
+				name: f.name,
+				position: f.position,
+				parentId: f.parentId ?? null,
+				searchSpaceId: f.searchSpaceId,
+			})),
+		[zeroFolders],
+	);
+
+	const treeDocuments: DocumentNodeDoc[] = useMemo(
+		() =>
+			(zeroAllDocs ?? [])
+				.filter((d) => d.title && d.title.trim() !== "")
+				.map((d) => ({
+					id: d.id,
+					title: d.title,
+					document_type: d.documentType,
+					folderId: (d as { folderId?: number | null }).folderId ?? null,
+					status: d.status as { state: string; reason?: string | null } | undefined,
+				})),
+		[zeroAllDocs],
+	);
+
+	const foldersByParent = useMemo(() => {
+		const map: Record<string, FolderDisplay[]> = {};
+		for (const f of treeFolders) {
+			const key = String(f.parentId ?? "root");
+			(map[key] ??= []).push(f);
+		}
+		return map;
+	}, [treeFolders]);
+
+	// Folder actions
+	const [folderPickerOpen, setFolderPickerOpen] = useState(false);
+	const [folderPickerTarget, setFolderPickerTarget] = useState<{
+		type: "folder" | "document";
+		id: number;
+		disabledIds?: Set<number>;
+	} | null>(null);
+
+	// Create-folder dialog state
+	const [createFolderOpen, setCreateFolderOpen] = useState(false);
+	const [createFolderParentId, setCreateFolderParentId] = useState<number | null>(null);
+
+	const createFolderParentName = useMemo(() => {
+		if (createFolderParentId === null) return null;
+		return treeFolders.find((f) => f.id === createFolderParentId)?.name ?? null;
+	}, [createFolderParentId, treeFolders]);
+
+	const handleCreateFolder = useCallback(
+		(parentId: number | null) => {
+			setCreateFolderParentId(parentId);
+			setCreateFolderOpen(true);
+		},
+		[],
+	);
+
+	const handleCreateFolderConfirm = useCallback(
+		async (name: string) => {
+			try {
+				await foldersApiService.createFolder({
+					name,
+					parent_id: createFolderParentId,
+					search_space_id: searchSpaceId,
+				});
+				toast.success("Folder created");
+				if (createFolderParentId !== null) {
+					setExpandedFolderMap((prev) => {
+						const current = new Set(prev[searchSpaceId] ?? []);
+						current.add(createFolderParentId);
+						return { ...prev, [searchSpaceId]: [...current] };
+					});
+				}
+			} catch (e: any) {
+				toast.error(e?.message || "Failed to create folder");
+			}
+		},
+		[createFolderParentId, searchSpaceId, setExpandedFolderMap],
+	);
+
+	const handleRenameFolder = useCallback(
+		async (folder: FolderDisplay, newName: string) => {
+			try {
+				await foldersApiService.updateFolder(folder.id, { name: newName });
+				toast.success("Folder renamed");
+			} catch (e: any) {
+				toast.error(e?.message || "Failed to rename folder");
+			}
+		},
+		[],
+	);
+
+	const handleDeleteFolder = useCallback(
+		async (folder: FolderDisplay) => {
+			if (!confirm(`Delete folder "${folder.name}" and all its contents?`)) return;
+			try {
+				await foldersApiService.deleteFolder(folder.id);
+				toast.success("Folder deleted");
+			} catch (e: any) {
+				toast.error(e?.message || "Failed to delete folder");
+			}
+		},
+		[],
+	);
+
+	const handleMoveFolder = useCallback(
+		(folder: FolderDisplay) => {
+			const subtreeIds = new Set<number>();
+			function collectSubtree(id: number) {
+				subtreeIds.add(id);
+				for (const child of foldersByParent[String(id)] ?? []) {
+					collectSubtree(child.id);
+				}
+			}
+			collectSubtree(folder.id);
+			setFolderPickerTarget({
+				type: "folder",
+				id: folder.id,
+				disabledIds: subtreeIds,
+			});
+			setFolderPickerOpen(true);
+		},
+		[foldersByParent],
+	);
+
+	const handleMoveDocument = useCallback((doc: DocumentNodeDoc) => {
+		setFolderPickerTarget({ type: "document", id: doc.id });
+		setFolderPickerOpen(true);
+	}, []);
+
+	const handleFolderPickerSelect = useCallback(
+		async (targetFolderId: number | null) => {
+			if (!folderPickerTarget) return;
+			try {
+				if (folderPickerTarget.type === "folder") {
+					await foldersApiService.moveFolder(folderPickerTarget.id, {
+						new_parent_id: targetFolderId,
+					});
+					toast.success("Folder moved");
+				} else {
+					await foldersApiService.moveDocument(folderPickerTarget.id, {
+						folder_id: targetFolderId,
+					});
+					toast.success("Document moved");
+				}
+			} catch (e: any) {
+				toast.error(e?.message || "Failed to move item");
+			}
+			setFolderPickerTarget(null);
+		},
+		[folderPickerTarget],
+	);
+
+	const handleDropIntoFolder = useCallback(
+		async (itemType: "folder" | "document", itemId: number, targetFolderId: number | null) => {
+			try {
+				if (itemType === "folder") {
+					await foldersApiService.moveFolder(itemId, {
+						new_parent_id: targetFolderId,
+					});
+					toast.success("Folder moved");
+				} else {
+					await foldersApiService.moveDocument(itemId, {
+						folder_id: targetFolderId,
+					});
+					toast.success("Document moved");
+				}
+			} catch (e: any) {
+				toast.error(e?.message || "Failed to move item");
+			}
+		},
+		[],
+	);
+
+	const handleReorderFolder = useCallback(
+		async (folderId: number, beforePos: string | null, afterPos: string | null) => {
+			try {
+				await foldersApiService.reorderFolder(folderId, {
+					before_position: beforePos,
+					after_position: afterPos,
+				});
+			} catch (e: any) {
+				toast.error(e?.message || "Failed to reorder folder");
+			}
+		},
+		[],
+	);
+
 	const handleToggleChatMention = useCallback(
 		(doc: { id: number; title: string; document_type: string }, isMentioned: boolean) => {
 			if (isMentioned) {
@@ -123,14 +347,14 @@ export function DocumentsSidebar({
 	const loadingMore = isSearchMode ? searchLoadingMore : realtimeLoadingMore;
 	const onLoadMore = isSearchMode ? searchLoadMore : realtimeLoadMore;
 
-	const onToggleType = (type: DocumentTypeEnum, checked: boolean) => {
+	const onToggleType = useCallback((type: DocumentTypeEnum, checked: boolean) => {
 		setActiveTypes((prev) => {
 			if (checked) {
 				return prev.includes(type) ? prev : [...prev, type];
 			}
 			return prev.filter((t) => t !== type);
 		});
-	};
+	}, []);
 
 	const handleDeleteDocument = useCallback(
 		async (id: number): Promise<boolean> => {
@@ -340,27 +564,83 @@ export function DocumentsSidebar({
 						searchValue={search}
 						onToggleType={onToggleType}
 						activeTypes={activeTypes}
+						onCreateFolder={() => handleCreateFolder(null)}
 					/>
 				</div>
 
-				<DocumentsTableShell
-					documents={displayDocs}
-					loading={!!loading}
-					error={!!error}
-					sortKey={sortKey}
-					sortDesc={sortDesc}
-					onSortChange={handleSortChange}
-					deleteDocument={handleDeleteDocument}
-					bulkDeleteDocuments={handleBulkDeleteDocuments}
-					searchSpaceId={String(searchSpaceId)}
-					hasMore={hasMore}
-					loadingMore={loadingMore}
-					onLoadMore={onLoadMore}
-					mentionedDocIds={mentionedDocIds}
-					onToggleChatMention={handleToggleChatMention}
-					isSearchMode={isSearchMode || activeTypes.length > 0}
-				/>
+				{isSearchMode ? (
+					<DocumentsTableShell
+						documents={displayDocs}
+						loading={!!loading}
+						error={!!error}
+						sortKey={sortKey}
+						sortDesc={sortDesc}
+						onSortChange={handleSortChange}
+						deleteDocument={handleDeleteDocument}
+						bulkDeleteDocuments={handleBulkDeleteDocuments}
+						searchSpaceId={String(searchSpaceId)}
+						hasMore={hasMore}
+						loadingMore={loadingMore}
+						onLoadMore={onLoadMore}
+						mentionedDocIds={mentionedDocIds}
+						onToggleChatMention={handleToggleChatMention}
+						isSearchMode={isSearchMode || activeTypes.length > 0}
+					/>
+				) : (
+					<FolderTreeView
+						folders={treeFolders}
+						documents={treeDocuments}
+						expandedIds={expandedIds}
+						onToggleExpand={toggleFolderExpand}
+						mentionedDocIds={mentionedDocIds}
+						onToggleChatMention={handleToggleChatMention}
+						onRenameFolder={handleRenameFolder}
+						onDeleteFolder={handleDeleteFolder}
+						onMoveFolder={handleMoveFolder}
+						onCreateFolder={handleCreateFolder}
+					onPreviewDocument={(doc) => {
+						openDocumentTab({
+							documentId: doc.id,
+							searchSpaceId,
+							title: doc.title,
+						});
+					}}
+					onEditDocument={(doc) => {
+						openDocumentTab({
+							documentId: doc.id,
+							searchSpaceId,
+							title: doc.title,
+						});
+					}}
+						onDeleteDocument={(doc) => handleDeleteDocument(doc.id)}
+						onMoveDocument={handleMoveDocument}
+						activeTypes={activeTypes}
+						onDropIntoFolder={handleDropIntoFolder}
+						onReorderFolder={handleReorderFolder}
+					/>
+				)}
 			</div>
+
+			<FolderPickerDialog
+				open={folderPickerOpen}
+				onOpenChange={setFolderPickerOpen}
+				folders={treeFolders}
+				title={
+					folderPickerTarget?.type === "folder"
+						? "Move folder to..."
+						: "Move document to..."
+				}
+				description="Select a destination folder, or choose Root to move to the top level."
+				disabledFolderIds={folderPickerTarget?.disabledIds}
+				onSelect={handleFolderPickerSelect}
+			/>
+
+			<CreateFolderDialog
+				open={createFolderOpen}
+				onOpenChange={setCreateFolderOpen}
+				parentFolderName={createFolderParentName}
+				onConfirm={handleCreateFolderConfirm}
+			/>
 		</>
 	);
 

surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { AlertCircle, Pencil } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { MarkdownViewer } from "@/components/markdown-viewer";
+import { Button } from "@/components/ui/button";
+import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
+
+interface DocumentContent {
+	document_id: number;
+	title: string;
+	document_type?: string;
+	source_markdown: string;
+}
+
+function DocumentSkeleton() {
+	return (
+		<div className="space-y-6 p-8 max-w-4xl mx-auto">
+			<div className="h-8 w-3/4 rounded-md bg-muted/60 animate-pulse" />
+			<div className="space-y-3">
+				<div className="h-4 w-full rounded-md bg-muted/60 animate-pulse" />
+				<div className="h-4 w-[95%] rounded-md bg-muted/60 animate-pulse [animation-delay:100ms]" />
+				<div className="h-4 w-[88%] rounded-md bg-muted/60 animate-pulse [animation-delay:200ms]" />
+				<div className="h-4 w-[60%] rounded-md bg-muted/60 animate-pulse [animation-delay:300ms]" />
+			</div>
+			<div className="h-6 w-2/5 rounded-md bg-muted/60 animate-pulse [animation-delay:400ms]" />
+			<div className="space-y-3">
+				<div className="h-4 w-full rounded-md bg-muted/60 animate-pulse [animation-delay:500ms]" />
+				<div className="h-4 w-[92%] rounded-md bg-muted/60 animate-pulse [animation-delay:600ms]" />
+				<div className="h-4 w-[75%] rounded-md bg-muted/60 animate-pulse [animation-delay:700ms]" />
+			</div>
+		</div>
+	);
+}
+
+interface DocumentTabContentProps {
+	documentId: number;
+	searchSpaceId: number;
+	title?: string;
+}
+
+export function DocumentTabContent({ documentId, searchSpaceId, title }: DocumentTabContentProps) {
+	const [doc, setDoc] = useState<DocumentContent | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [isEditing, setIsEditing] = useState(false);
+	const [saving, setSaving] = useState(false);
+	const [editedMarkdown, setEditedMarkdown] = useState<string | null>(null);
+	const markdownRef = useRef<string>("");
+	const initialLoadDone = useRef(false);
+	const changeCountRef = useRef(0);
+
+	useEffect(() => {
+		let cancelled = false;
+		setIsLoading(true);
+		setError(null);
+		setDoc(null);
+		setIsEditing(false);
+		setEditedMarkdown(null);
+		initialLoadDone.current = false;
+		changeCountRef.current = 0;
+
+		const fetchContent = async () => {
+			const token = getBearerToken();
+			if (!token) {
+				redirectToLogin();
+				return;
+			}
+
+			try {
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/editor-content`,
+					{ method: "GET" }
+				);
+
+				if (cancelled) return;
+
+				if (!response.ok) {
+					const errorData = await response
+						.json()
+						.catch(() => ({ detail: "Failed to fetch document" }));
+					throw new Error(errorData.detail || "Failed to fetch document");
+				}
+
+				const data = await response.json();
+
+				if (data.source_markdown === undefined || data.source_markdown === null) {
+					setError("This document does not have viewable content.");
+					setIsLoading(false);
+					return;
+				}
+
+				markdownRef.current = data.source_markdown;
+				setDoc(data);
+				initialLoadDone.current = true;
+			} catch (err) {
+				if (cancelled) return;
+				console.error("Error fetching document:", err);
+				setError(err instanceof Error ? err.message : "Failed to fetch document");
+			} finally {
+				if (!cancelled) setIsLoading(false);
+			}
+		};
+
+		fetchContent();
+		return () => {
+			cancelled = true;
+		};
+	}, [documentId, searchSpaceId]);
+
+	const handleMarkdownChange = useCallback((md: string) => {
+		markdownRef.current = md;
+		if (!initialLoadDone.current) return;
+		changeCountRef.current += 1;
+		if (changeCountRef.current <= 1) return;
+		setEditedMarkdown(md);
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		const token = getBearerToken();
+		if (!token) {
+			toast.error("Please login to save");
+			redirectToLogin();
+			return;
+		}
+
+		setSaving(true);
+		try {
+			const response = await authenticatedFetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/save`,
+				{
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ source_markdown: markdownRef.current }),
+				}
+			);
+
+			if (!response.ok) {
+				const errorData = await response
+					.json()
+					.catch(() => ({ detail: "Failed to save document" }));
+				throw new Error(errorData.detail || "Failed to save document");
+			}
+
+			setDoc((prev) => (prev ? { ...prev, source_markdown: markdownRef.current } : prev));
+			setEditedMarkdown(null);
+			toast.success("Document saved! Reindexing in background...");
+		} catch (err) {
+			console.error("Error saving document:", err);
+			toast.error(err instanceof Error ? err.message : "Failed to save document");
+		} finally {
+			setSaving(false);
+		}
+	}, [documentId, searchSpaceId]);
+
+	if (isLoading) return <DocumentSkeleton />;
+
+	if (error || !doc) {
+		return (
+			<div className="flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center">
+				<AlertCircle className="size-10 text-destructive" />
+				<div>
+					<p className="font-medium text-foreground text-lg">Failed to load document</p>
+					<p className="text-sm text-muted-foreground mt-1">
+						{error || "An unknown error occurred"}
+					</p>
+				</div>
+			</div>
+		);
+	}
+
+	if (isEditing) {
+		return (
+			<div className="flex flex-col h-full overflow-hidden">
+				<div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
+					<div className="flex-1 min-w-0">
+						<h1 className="text-base font-semibold truncate">
+							{doc.title || title || "Untitled"}
+						</h1>
+						{editedMarkdown !== null && (
+							<p className="text-xs text-muted-foreground">Unsaved changes</p>
+						)}
+					</div>
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => {
+							setIsEditing(false);
+							setEditedMarkdown(null);
+							changeCountRef.current = 0;
+						}}
+					>
+						Done editing
+					</Button>
+				</div>
+				<div className="flex-1 overflow-hidden">
+					<PlateEditor
+						key={`edit-${documentId}`}
+						preset="full"
+						markdown={doc.source_markdown}
+						onMarkdownChange={handleMarkdownChange}
+						readOnly={false}
+						placeholder="Start writing..."
+						editorVariant="default"
+						onSave={handleSave}
+						hasUnsavedChanges={editedMarkdown !== null}
+						isSaving={saving}
+						defaultEditing={true}
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col h-full overflow-hidden">
+			<div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
+				<h1 className="text-base font-semibold truncate flex-1 min-w-0">
+					{doc.title || title || "Untitled"}
+				</h1>
+				{doc.document_type === "NOTE" && (
+					<Button variant="outline" size="sm" onClick={() => setIsEditing(true)} className="gap-1.5">
+						<Pencil className="size-3.5" />
+						Edit
+					</Button>
+				)}
+			</div>
+			<div className="flex-1 overflow-auto">
+				<div className="max-w-4xl mx-auto px-6 py-6">
+					<MarkdownViewer content={doc.source_markdown} />
+				</div>
+			</div>
+		</div>
+	);
+}

surfsense_web/components/layout/ui/tabs/TabBar.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useAtomValue, useSetAtom } from "jotai";
+import { FileText, MessageSquare, Plus, X } from "lucide-react";
+import { useCallback, useRef, useEffect } from "react";
+import {
+	activeTabIdAtom,
+	closeTabAtom,
+	switchTabAtom,
+	tabsAtom,
+	type Tab,
+} from "@/atoms/tabs/tabs.atom";
+import { cn } from "@/lib/utils";
+
+interface TabBarProps {
+	onTabSwitch?: (tab: Tab) => void;
+	onNewChat?: () => void;
+	className?: string;
+}
+
+export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
+	const tabs = useAtomValue(tabsAtom);
+	const activeTabId = useAtomValue(activeTabIdAtom);
+	const switchTab = useSetAtom(switchTabAtom);
+	const closeTab = useSetAtom(closeTabAtom);
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const handleTabClick = useCallback(
+		(tab: Tab) => {
+			if (tab.id === activeTabId) return;
+			switchTab(tab.id);
+			onTabSwitch?.(tab);
+		},
+		[activeTabId, switchTab, onTabSwitch]
+	);
+
+	const handleTabClose = useCallback(
+		(e: React.MouseEvent, tabId: string) => {
+			e.stopPropagation();
+			const fallback = closeTab(tabId);
+			if (fallback) {
+				onTabSwitch?.(fallback);
+			}
+		},
+		[closeTab, onTabSwitch]
+	);
+
+	// Scroll active tab into view
+	useEffect(() => {
+		if (!scrollRef.current || !activeTabId) return;
+		const activeEl = scrollRef.current.querySelector(`[data-tab-id="${activeTabId}"]`);
+		if (activeEl) {
+			activeEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+		}
+	}, [activeTabId]);
+
+	// Only show tab bar when there's more than one tab
+	if (tabs.length <= 1) return null;
+
+	return (
+		<div
+			className={cn(
+				"flex items-center shrink-0 border-b bg-main-panel",
+				className
+			)}
+		>
+			<div
+				ref={scrollRef}
+				className="flex items-center flex-1 overflow-x-auto scrollbar-none"
+			>
+				{tabs.map((tab) => {
+					const isActive = tab.id === activeTabId;
+					const Icon = tab.type === "document" ? FileText : MessageSquare;
+
+					return (
+						<button
+							key={tab.id}
+							type="button"
+							data-tab-id={tab.id}
+							onClick={() => handleTabClick(tab)}
+							className={cn(
+								"group relative flex items-center gap-1.5 px-3 h-9 min-w-0 max-w-[200px] text-xs font-medium border-r transition-colors shrink-0",
+								isActive
+									? "bg-main-panel text-foreground"
+									: "bg-muted/30 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+							)}
+						>
+							{isActive && (
+								<span className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary" />
+							)}
+							<Icon className="size-3.5 shrink-0" />
+							<span className="truncate">{tab.title}</span>
+							<span
+								role="button"
+								tabIndex={0}
+								onClick={(e) => handleTabClose(e, tab.id)}
+								onKeyDown={(e) => {
+									if (e.key === "Enter" || e.key === " ") {
+										e.preventDefault();
+										handleTabClose(e as unknown as React.MouseEvent, tab.id);
+									}
+								}}
+								className={cn(
+									"ml-auto shrink-0 rounded-sm p-0.5 transition-colors",
+									isActive
+										? "opacity-60 hover:opacity-100 hover:bg-muted"
+										: "opacity-0 group-hover:opacity-60 hover:opacity-100! hover:bg-muted"
+								)}
+							>
+								<X className="size-3" />
+							</span>
+						</button>
+					);
+				})}
+			</div>
+
+			{onNewChat && (
+				<button
+					type="button"
+					onClick={onNewChat}
+					className="flex items-center justify-center size-9 shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
+					title="New Chat"
+				>
+					<Plus className="size-3.5" />
+				</button>
+			)}
+		</div>
+	);
+}