refactor: remove DashboardBreadcrumb component and related breadcrumb functionality, streamlining layout components and improving overall code maintainability

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

@@ -14,7 +14,6 @@ import {
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { DocumentUploadDialogProvider } from "@/components/assistant-ui/document-upload-popup";
-import { DashboardBreadcrumb } from "@/components/dashboard-breadcrumb";
 import { LayoutDataProvider } from "@/components/layout";
 import { OnboardingTour } from "@/components/onboarding-tour";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
@@ -187,7 +186,7 @@ export function DashboardClientLayout({
 	return (
 		<DocumentUploadDialogProvider>
 			<OnboardingTour />
-			<LayoutDataProvider searchSpaceId={searchSpaceId} breadcrumb={<DashboardBreadcrumb />}>
+			<LayoutDataProvider searchSpaceId={searchSpaceId}>
 				{children}
 			</LayoutDataProvider>
 		</DocumentUploadDialogProvider>

surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx

@@ -750,15 +750,6 @@ export default function NewChatPage() {
 								queryClient.invalidateQueries({
 									queryKey: ["threads", String(searchSpaceId)],
 								});
-								// Invalidate thread detail for breadcrumb update
-								queryClient.invalidateQueries({
-									queryKey: [
-										"threads",
-										String(searchSpaceId),
-										"detail",
-										String(titleData.threadId),
-									],
-								});
 							}
 							break;
 						}

surfsense_web/components/dashboard-breadcrumb.tsx

@@ -1,212 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { usePathname } from "next/navigation";
-import { useTranslations } from "next-intl";
-import React, { useEffect, useState } from "react";
-import {
-	Breadcrumb,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
-import { authenticatedFetch, getBearerToken } from "@/lib/auth-utils";
-import { getThreadFull } from "@/lib/chat/thread-persistence";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-
-interface BreadcrumbItemInterface {
-	label: string;
-	href?: string;
-}
-
-export function DashboardBreadcrumb() {
-	const t = useTranslations("breadcrumb");
-	const pathname = usePathname();
-	// Extract search space ID and chat ID from pathname
-	const segments = pathname.split("/").filter(Boolean);
-	const searchSpaceId = segments[0] === "dashboard" && segments[1] ? segments[1] : null;
-
-	const { data: searchSpace } = useQuery({
-		queryKey: cacheKeys.searchSpaces.detail(searchSpaceId || ""),
-		queryFn: () => searchSpacesApiService.getSearchSpace({ id: Number(searchSpaceId) }),
-		enabled: !!searchSpaceId,
-	});
-
-	// Extract chat thread ID from pathname for chat pages
-	const chatThreadId = segments[2] === "new-chat" && segments[3] ? segments[3] : null;
-
-	// Fetch thread details when on a chat page with a thread ID
-	const { data: threadData } = useQuery({
-		queryKey: ["threads", searchSpaceId, "detail", chatThreadId],
-		queryFn: () => getThreadFull(Number(chatThreadId)),
-		enabled: !!chatThreadId && !!searchSpaceId,
-	});
-
-	// State to store document title for editor breadcrumb
-	const [documentTitle, setDocumentTitle] = useState<string | null>(null);
-
-	// Fetch document title when on editor page
-	useEffect(() => {
-		if (segments[2] === "editor" && segments[3] && searchSpaceId) {
-			const documentId = segments[3];
-
-			// Skip fetch for "new" notes
-			if (documentId === "new") {
-				setDocumentTitle(null);
-				return;
-			}
-
-			const token = getBearerToken();
-
-			if (token) {
-				authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/editor-content`,
-					{ method: "GET" }
-				)
-					.then((res) => res.json())
-					.then((data) => {
-						if (data.title) {
-							setDocumentTitle(data.title);
-						}
-					})
-					.catch(() => {
-						// If fetch fails, just use the document ID
-						setDocumentTitle(null);
-					});
-			}
-		} else {
-			setDocumentTitle(null);
-		}
-	}, [segments, searchSpaceId]);
-
-	// Parse the pathname to create breadcrumb items
-	const generateBreadcrumbs = (path: string): BreadcrumbItemInterface[] => {
-		const segments = path.split("/").filter(Boolean);
-		const breadcrumbs: BreadcrumbItemInterface[] = [];
-
-		// Handle search space (start directly with search space, skip "Dashboard")
-		if (segments[0] === "dashboard" && segments[1]) {
-			// Use the actual search space name if available, otherwise fall back to the ID
-			const searchSpaceLabel = searchSpace?.name || `${t("search_space")} ${segments[1]}`;
-			breadcrumbs.push({
-				label: searchSpaceLabel,
-				href: `/dashboard/${segments[1]}`,
-			});
-
-			// Handle specific sections
-			if (segments[2]) {
-				const section = segments[2];
-				let sectionLabel = section.charAt(0).toUpperCase() + section.slice(1);
-
-				// Map section names to more readable labels
-				const sectionLabels: Record<string, string> = {
-					"new-chat": t("chat") || "Chat",
-					documents: t("documents"),
-					logs: t("logs"),
-					settings: t("settings"),
-					editor: t("editor"),
-				};
-
-				sectionLabel = sectionLabels[section] || sectionLabel;
-
-				// Handle sub-sections
-				if (segments[3]) {
-					const subSection = segments[3];
-
-					// Handle editor sub-sections (document ID)
-					if (section === "editor") {
-						let documentLabel: string;
-						if (subSection === "new") {
-							documentLabel = "New Note";
-						} else {
-							documentLabel = documentTitle || subSection;
-						}
-
-						breadcrumbs.push({
-							label: t("documents"),
-						});
-						breadcrumbs.push({
-							label: sectionLabel,
-						});
-						breadcrumbs.push({ label: documentLabel });
-						return breadcrumbs;
-					}
-
-					// Handle documents sub-sections
-					if (section === "documents") {
-						const documentLabels: Record<string, string> = {
-							upload: t("upload_documents"),
-							webpage: t("add_webpages"),
-						};
-
-						const documentLabel = documentLabels[subSection] || subSection;
-						breadcrumbs.push({
-							label: t("documents"),
-						});
-						breadcrumbs.push({ label: documentLabel });
-						return breadcrumbs;
-					}
-
-					// Handle new-chat sub-sections (thread IDs)
-					// Show the chat title if available, otherwise fall back to "Chat"
-					if (section === "new-chat") {
-						const chatLabel = threadData?.title || t("chat") || "Chat";
-						breadcrumbs.push({
-							label: chatLabel,
-						});
-						return breadcrumbs;
-					}
-
-					// Handle other sub-sections
-					let subSectionLabel = subSection.charAt(0).toUpperCase() + subSection.slice(1);
-					const subSectionLabels: Record<string, string> = {
-						upload: t("upload_documents"),
-						youtube: t("add_youtube"),
-						webpage: t("add_webpages"),
-						manage: t("manage"),
-					};
-
-					subSectionLabel = subSectionLabels[subSection] || subSectionLabel;
-
-					breadcrumbs.push({
-						label: sectionLabel,
-						href: `/dashboard/${segments[1]}/${section}`,
-					});
-					breadcrumbs.push({ label: subSectionLabel });
-				} else {
-					breadcrumbs.push({ label: sectionLabel });
-				}
-			}
-		}
-
-		return breadcrumbs;
-	};
-
-	const breadcrumbs = generateBreadcrumbs(pathname);
-
-	if (breadcrumbs.length === 0) {
-		return null; // Don't show breadcrumbs for root dashboard
-	}
-
-	return (
-		<Breadcrumb className="select-none">
-			<BreadcrumbList>
-				{breadcrumbs.map((item, index) => (
-					<React.Fragment key={`${index}-${item.href || item.label}`}>
-						<BreadcrumbItem>
-							{index === breadcrumbs.length - 1 ? (
-								<BreadcrumbPage>{item.label}</BreadcrumbPage>
-							) : (
-								<BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
-							)}
-						</BreadcrumbItem>
-						{index < breadcrumbs.length - 1 && <BreadcrumbSeparator />}
-					</React.Fragment>
-				))}
-			</BreadcrumbList>
-		</Breadcrumb>
-	);
-}

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -47,7 +47,6 @@ import { LayoutShell } from "../ui/shell";
 interface LayoutDataProviderProps {
 	searchSpaceId: string;
 	children: React.ReactNode;
-	breadcrumb?: React.ReactNode;
 }
 
 /**
@@ -64,7 +63,6 @@ function formatInboxCount(count: number): string {
 export function LayoutDataProvider({
 	searchSpaceId,
 	children,
-	breadcrumb,
 }: LayoutDataProviderProps) {
 	const t = useTranslations("dashboard");
 	const tCommon = useTranslations("common");
@@ -537,10 +535,6 @@ export function LayoutDataProvider({
 			queryClient.invalidateQueries({ queryKey: ["threads", searchSpaceId] });
 			queryClient.invalidateQueries({ queryKey: ["all-threads", searchSpaceId] });
 			queryClient.invalidateQueries({ queryKey: ["search-threads", searchSpaceId] });
-			// Invalidate thread detail for breadcrumb update
-			queryClient.invalidateQueries({
-				queryKey: ["threads", searchSpaceId, "detail", String(chatToRename.id)],
-			});
 		} catch (error) {
 			console.error("Error renaming thread:", error);
 			toast.error(tSidebar("error_renaming_chat") || "Failed to rename chat");
@@ -595,7 +589,6 @@ export function LayoutDataProvider({
 				onUserSettings={handleUserSettings}
 				onLogout={handleLogout}
 				pageUsage={pageUsage}
-				breadcrumb={breadcrumb}
 				theme={theme}
 				setTheme={setTheme}
 				isChatPage={isChatPage}

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

@@ -7,11 +7,10 @@ import { ChatShareButton } from "@/components/new-chat/chat-share-button";
 import type { ChatVisibility, ThreadRecord } from "@/lib/chat/thread-persistence";
 
 interface HeaderProps {
-	breadcrumb?: React.ReactNode;
 	mobileMenuTrigger?: React.ReactNode;
 }
 
-export function Header({ breadcrumb, mobileMenuTrigger }: HeaderProps) {
+export function Header({ mobileMenuTrigger }: HeaderProps) {
 	const pathname = usePathname();
 
 	// Check if we're on a chat page
@@ -46,10 +45,9 @@ export function Header({ breadcrumb, mobileMenuTrigger }: HeaderProps) {
 
 	return (
 		<header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-4">
-			{/* Left side - Mobile menu trigger + Breadcrumb */}
+			{/* Left side - Mobile menu trigger */}
 			<div className="flex flex-1 items-center gap-2 min-w-0">
 				{mobileMenuTrigger}
-				<div className="hidden md:block">{breadcrumb}</div>
 			</div>
 
 			{/* Right side - Actions */}

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

@@ -69,7 +69,6 @@ interface LayoutShellProps {
 	onUserSettings?: () => void;
 	onLogout?: () => void;
 	pageUsage?: PageUsage;
-	breadcrumb?: React.ReactNode;
 	theme?: string;
 	setTheme?: (theme: "light" | "dark" | "system") => void;
 	defaultCollapsed?: boolean;
@@ -122,7 +121,6 @@ export function LayoutShell({
 	onUserSettings,
 	onLogout,
 	pageUsage,
-	breadcrumb,
 	theme,
 	setTheme,
 	defaultCollapsed = false,
@@ -156,10 +154,9 @@ export function LayoutShell({
 			<SidebarProvider value={sidebarContextValue}>
 				<TooltipProvider delayDuration={0}>
 					<div className={cn("flex h-screen w-full flex-col bg-background", className)}>
-						<Header
+					<Header
-							breadcrumb={breadcrumb}
+						mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
-							mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
+					/>
-						/>
 
 						<MobileSidebar
 							isOpen={mobileMenuOpen}
@@ -308,7 +305,7 @@ export function LayoutShell({
 						)}
 
 						<main className="flex-1 flex flex-col min-w-0">
-							<Header breadcrumb={breadcrumb} />
+							<Header />
 
 							<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
 								{children}

surfsense_web/components/ui/breadcrumb.tsx

@@ -1,100 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
-	return (
-		<ol
-			data-slot="breadcrumb-list"
-			className={cn(
-				"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-				className
-			)}
-			{...props}
-		/>
-	);
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-	return (
-		<li
-			data-slot="breadcrumb-item"
-			className={cn("inline-flex items-center gap-1.5", className)}
-			{...props}
-		/>
-	);
-}
-
-function BreadcrumbLink({
-	asChild,
-	className,
-	...props
-}: React.ComponentProps<"a"> & {
-	asChild?: boolean;
-}) {
-	const Comp = asChild ? Slot : "a";
-
-	return (
-		<Comp
-			data-slot="breadcrumb-link"
-			className={cn("hover:text-foreground transition-colors", className)}
-			{...props}
-		/>
-	);
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
-	return (
-		<span
-			data-slot="breadcrumb-page"
-			aria-disabled="true"
-			aria-current="page"
-			className={cn("text-foreground font-normal", className)}
-			{...props}
-		/>
-	);
-}
-
-function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
-	return (
-		<li
-			data-slot="breadcrumb-separator"
-			role="presentation"
-			aria-hidden="true"
-			className={cn("[&>svg]:size-3.5", className)}
-			{...props}
-		>
-			{children ?? <ChevronRight />}
-		</li>
-	);
-}
-
-function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
-	return (
-		<span
-			data-slot="breadcrumb-ellipsis"
-			role="presentation"
-			aria-hidden="true"
-			className={cn("flex size-9 items-center justify-center", className)}
-			{...props}
-		>
-			<MoreHorizontal className="size-4" />
-			<span className="sr-only">More</span>
-		</span>
-	);
-}
-
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-};

surfsense_web/messages/en.json

@@ -638,23 +638,6 @@
 		"add_first_config": "Add First Configuration",
 		"created": "Created"
 	},
-	"breadcrumb": {
-		"dashboard": "Dashboard",
-		"search_space": "Search Space",
-		"chat": "Chat",
-		"documents": "Documents",
-		"connectors": "Connectors",
-		"editor": "Editor",
-		"logs": "Logs",
-		"settings": "Settings",
-		"upload_documents": "Upload Documents",
-		"add_youtube": "Add YouTube Videos",
-		"add_webpages": "Add Webpages",
-		"add_connector": "Add Connector",
-		"manage_connectors": "Manage Connectors",
-		"edit_connector": "Edit Connector",
-		"manage": "Manage"
-	},
 	"sidebar": {
 		"chats": "Private Chats",
 		"shared_chats": "Shared Chats",

surfsense_web/messages/es.json

@@ -638,23 +638,6 @@
 		"add_first_config": "Agregar primera configuración",
 		"created": "Creado"
 	},
-	"breadcrumb": {
-		"dashboard": "Panel de control",
-		"search_space": "Espacio de búsqueda",
-		"chat": "Chat",
-		"documents": "Documentos",
-		"connectors": "Conectores",
-		"editor": "Editor",
-		"logs": "Registros",
-		"settings": "Configuración",
-		"upload_documents": "Subir documentos",
-		"add_youtube": "Agregar videos de YouTube",
-		"add_webpages": "Agregar páginas web",
-		"add_connector": "Agregar conector",
-		"manage_connectors": "Administrar conectores",
-		"edit_connector": "Editar conector",
-		"manage": "Administrar"
-	},
 	"sidebar": {
 		"chats": "Chats privados",
 		"shared_chats": "Chats compartidos",

surfsense_web/messages/hi.json

@@ -638,23 +638,6 @@
 		"add_first_config": "पहली कॉन्फ़िगरेशन जोड़ें",
 		"created": "बनाया गया"
 	},
-	"breadcrumb": {
-		"dashboard": "डैशबोर्ड",
-		"search_space": "सर्च स्पेस",
-		"chat": "चैट",
-		"documents": "दस्तावेज़",
-		"connectors": "कनेक्टर",
-		"editor": "एडिटर",
-		"logs": "लॉग",
-		"settings": "सेटिंग्स",
-		"upload_documents": "दस्तावेज़ अपलोड करें",
-		"add_youtube": "YouTube वीडियो जोड़ें",
-		"add_webpages": "वेबपेज जोड़ें",
-		"add_connector": "कनेक्टर जोड़ें",
-		"manage_connectors": "कनेक्टर प्रबंधित करें",
-		"edit_connector": "कनेक्टर संपादित करें",
-		"manage": "प्रबंधित करें"
-	},
 	"sidebar": {
 		"chats": "निजी चैट",
 		"shared_chats": "साझा चैट",

surfsense_web/messages/pt.json

@@ -638,23 +638,6 @@
 		"add_first_config": "Adicionar primeira configuração",
 		"created": "Criado"
 	},
-	"breadcrumb": {
-		"dashboard": "Painel",
-		"search_space": "Espaço de pesquisa",
-		"chat": "Chat",
-		"documents": "Documentos",
-		"connectors": "Conectores",
-		"editor": "Editor",
-		"logs": "Logs",
-		"settings": "Configurações",
-		"upload_documents": "Enviar documentos",
-		"add_youtube": "Adicionar vídeos do YouTube",
-		"add_webpages": "Adicionar páginas web",
-		"add_connector": "Adicionar conector",
-		"manage_connectors": "Gerenciar conectores",
-		"edit_connector": "Editar conector",
-		"manage": "Gerenciar"
-	},
 	"sidebar": {
 		"chats": "Chats privados",
 		"shared_chats": "Chats compartilhados",

surfsense_web/messages/zh.json

@@ -622,23 +622,6 @@
 		"add_first_config": "添加首个配置",
 		"created": "创建于"
 	},
-	"breadcrumb": {
-		"dashboard": "仪表盘",
-		"search_space": "搜索空间",
-		"chat": "聊天",
-		"documents": "文档",
-		"connectors": "连接器",
-		"editor": "编辑器",
-		"logs": "日志",
-		"settings": "设置",
-		"upload_documents": "上传文档",
-		"add_youtube": "添加 YouTube 视频",
-		"add_webpages": "添加网页",
-		"add_connector": "添加连接器",
-		"manage_connectors": "管理连接器",
-		"edit_connector": "编辑连接器",
-		"manage": "管理"
-	},
 	"sidebar": {
 		"chats": "私人对话",
 		"shared_chats": "共享对话",