From c1c34eb916c66d6d5c4d42cce7ee196cae21925f Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 4 May 2026 02:05:20 +0530
Subject: [PATCH] refactor(layout): implement background color management in
 DashboardClientLayout; streamline RightPanel and LayoutShell styles for
 consistency

---
 .../[search_space_id]/client-layout.tsx       | 22 +++++++++++++++----
 .../layout/ui/right-panel/RightPanel.tsx      |  2 +-
 .../layout/ui/shell/LayoutShell.tsx           |  4 ++--
 .../components/layout/ui/tabs/TabBar.tsx      |  4 ++--
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx b/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx
index d95aab6e8..759539ce3 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx
@@ -144,6 +144,19 @@ export function DashboardClientLayout({
 
 	const electronAPI = useElectronAPI();
 
+	useEffect(() => {
+		const htmlBackground = document.documentElement.style.backgroundColor;
+		const bodyBackground = document.body.style.backgroundColor;
+
+		document.documentElement.style.backgroundColor = "var(--panel)";
+		document.body.style.backgroundColor = "var(--panel)";
+
+		return () => {
+			document.documentElement.style.backgroundColor = htmlBackground;
+			document.body.style.backgroundColor = bodyBackground;
+		};
+	}, []);
+
 	useEffect(() => {
 		if (!electronAPI?.onChatScreenCapture) return;
 		return electronAPI.onChatScreenCapture((dataUrl: string) => {
@@ -163,12 +176,13 @@ export function DashboardClientLayout({
 		setActiveSearchSpaceIdState(activeSeacrhSpaceId);
 
 		// Sync to Electron store if stored value is null (first navigation)
-		if (electronAPI?.setActiveSearchSpace) {
+		if (electronAPI?.getActiveSearchSpace && electronAPI.setActiveSearchSpace) {
+			const setActiveSearchSpace = electronAPI.setActiveSearchSpace;
 			electronAPI
-				.getActiveSearchSpace?.()
-				.then((stored) => {
+				.getActiveSearchSpace()
+				.then((stored: string | null) => {
 					if (!stored) {
-						electronAPI.setActiveSearchSpace!(activeSeacrhSpaceId);
+						setActiveSearchSpace(activeSeacrhSpaceId);
 					}
 				})
 				.catch(() => {});
diff --git a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
index 1e543c885..a647ba26d 100644
--- a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
+++ b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
@@ -203,7 +203,7 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
 	return (
 		<aside
 			style={{ width: targetWidth }}
-			className="flex h-full shrink-0 flex-col border-l border-b bg-panel text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
+			className="flex h-full shrink-0 flex-col border-l bg-panel text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
 		>
 			<div className="relative flex-1 min-h-0 overflow-hidden">
 				{effectiveTab === "sources" && documentsOpen && documentsPanel && (
diff --git a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
index 1af8dcbc5..841190256 100644
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@@ -144,7 +144,7 @@ function MainContentPanel({
 				rightActions={<RightPanelExpandButton />}
 				className="min-w-0"
 			/>
-			<div className="relative flex flex-1 flex-col border border-l-0 border-r-0 border-t-0 bg-panel overflow-hidden min-w-0">
+			<div className="relative flex flex-1 flex-col bg-panel overflow-hidden min-w-0">
 				<Header />
 
 				{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
@@ -441,7 +441,7 @@ export function LayoutShell({
 								onPointerDown={onResizePointerDown}
 								style={{ touchAction: "none" }}
 								className={cn(
-									"absolute top-0 right-0 h-full w-4 translate-x-1/2 z-50 select-none cursor-col-resize",
+									"absolute top-0 right-0 h-full w-4 translate-x-1/2 z-50 m-0 border-0 bg-transparent p-0 select-none cursor-col-resize",
 									"after:content-[''] after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent hover:after:bg-border/80 after:transition-colors",
 									isResizing && "after:bg-border"
 								)}
diff --git a/surfsense_web/components/layout/ui/tabs/TabBar.tsx b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
index 27e87f600..432d101e4 100644
--- a/surfsense_web/components/layout/ui/tabs/TabBar.tsx
+++ b/surfsense_web/components/layout/ui/tabs/TabBar.tsx
@@ -170,11 +170,11 @@ export function TabBar({
 							{/* Hover-only gradient + close overlay (sidebar pattern) — keeps pill width fixed and avoids ellipsis shift. */}
 							<div
 								className={cn(
-									"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-6 pr-2 opacity-0 transition-opacity duration-150",
+									"pointer-events-none absolute right-0 top-0 bottom-0 flex items-center rounded-r-md pl-8 pr-2 opacity-0 transition-opacity duration-150",
 									"group-hover:opacity-100 group-focus-within:opacity-100",
 									isActive
 										? "bg-gradient-to-l from-muted from-60% to-transparent"
-										: "bg-gradient-to-l from-muted/50 from-60% to-transparent"
+										: "bg-gradient-to-l from-muted from-60% to-transparent"
 								)}
 							>
 								{/* biome-ignore lint/a11y/useSemanticElements: cannot nest button inside button */}