refactor: enhance layout structure by introducing WorkspacePanel and updating component styles

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -136,7 +136,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	// Documents sidebar state (shared atom so Composer can toggle it)
 	const [isDocumentsSidebarOpen, setIsDocumentsSidebarOpen] = useAtom(documentsSidebarOpenAtom);
 	const [isDocumentsDocked, setIsDocumentsDocked] = useState(true);
-	const [isRightPanelCollapsed, setIsRightPanelCollapsed] = useAtom(rightPanelCollapsedAtom);
+	const setIsRightPanelCollapsed = useSetAtom(rightPanelCollapsedAtom);
 
 	// Open documents sidebar by default on desktop (docked mode)
 	const documentsInitialized = useRef(false);
@@ -668,6 +668,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 
 	// Detect if we're on the chat page (needs overflow-hidden for chat's own scroll)
 	const isChatPage = pathname?.includes("/new-chat") ?? false;
+	const useWorkspacePanel =
+		pathname?.endsWith("/buy-more") === true || pathname?.endsWith("/more-pages") === true;
 
 	return (
 		<>
@@ -705,6 +707,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				theme={theme}
 				setTheme={setTheme}
 				isChatPage={isChatPage}
+				useWorkspacePanel={useWorkspacePanel}
 				isLoadingChats={isLoadingThreads}
 				activeSlideoutPanel={activeSlideoutPanel}
 				onSlideoutPanelChange={setActiveSlideoutPanel}

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

@@ -31,6 +31,7 @@ import {
 } from "../sidebar";
 import { SidebarSlideOutPanel } from "../sidebar/SidebarSlideOutPanel";
 import { TabBar } from "../tabs/TabBar";
+import { WorkspacePanel } from "./WorkspacePanel";
 
 const DocumentTabContent = dynamic(
 	() => import("../tabs/DocumentTabContent").then((m) => ({ default: m.DocumentTabContent })),
@@ -98,6 +99,7 @@ interface LayoutShellProps {
 	setTheme?: (theme: "light" | "dark" | "system") => void;
 	defaultCollapsed?: boolean;
 	isChatPage?: boolean;
+	useWorkspacePanel?: boolean;
 	children: React.ReactNode;
 	className?: string;
 	// Unified slide-out panel state
@@ -166,6 +168,10 @@ function MainContentPanel({
 	);
 }
 
+function DesktopWorkspaceRegion({ children }: { children: React.ReactNode }) {
+	return <div className="flex h-full min-w-0 flex-1 -mr-2">{children}</div>;
+}
+
 export function LayoutShell({
 	searchSpaces,
 	activeSearchSpaceId,
@@ -198,6 +204,7 @@ export function LayoutShell({
 	setTheme,
 	defaultCollapsed = false,
 	isChatPage = false,
+	useWorkspacePanel = false,
 	children,
 	className,
 	activeSlideoutPanel = null,
@@ -287,9 +294,13 @@ export function LayoutShell({
 							isLoadingChats={isLoadingChats}
 						/>
 
-						<main className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
-							{children}
-						</main>
+						{useWorkspacePanel ? (
+							<WorkspacePanel>{children}</WorkspacePanel>
+						) : (
+							<main className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+								{children}
+							</main>
+						)}
 
 						{/* Mobile unified slide-out panel */}
 						<SidebarSlideOutPanel
@@ -506,26 +517,32 @@ export function LayoutShell({
 						</SidebarSlideOutPanel>
 					</div>
 
-					{/* Main content panel */}
-					<MainContentPanel
-						isChatPage={isChatPage}
-						onTabSwitch={onTabSwitch}
-						onNewChat={onNewChat}
-					>
-						{children}
-					</MainContentPanel>
+					<DesktopWorkspaceRegion>
+						{useWorkspacePanel ? (
+							<WorkspacePanel>{children}</WorkspacePanel>
+						) : (
+							<>
+								{/* Main content panel */}
+								<MainContentPanel
+									isChatPage={isChatPage}
+									onTabSwitch={onTabSwitch}
+									onNewChat={onNewChat}
+								>
+									{children}
+								</MainContentPanel>
 
-					{/* Right panel — tabbed Sources/Report (desktop only) */}
-					{documentsPanel && (
-						<div className="-ml-2 -mr-2">
-							<RightPanel
-								documentsPanel={{
-									open: documentsPanel.open,
-									onOpenChange: documentsPanel.onOpenChange,
-								}}
-							/>
-						</div>
-					)}
+								{/* Right panel — tabbed Sources/Report (desktop only) */}
+								{documentsPanel ? (
+									<RightPanel
+										documentsPanel={{
+											open: documentsPanel.open,
+											onOpenChange: documentsPanel.onOpenChange,
+										}}
+									/>
+								) : null}
+							</>
+						)}
+					</DesktopWorkspaceRegion>
 				</div>
 			</TooltipProvider>
 		</SidebarProvider>

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+interface WorkspacePanelProps {
+	children: ReactNode;
+	className?: string;
+	contentClassName?: string;
+}
+
+/**
+ * Full workspace area to the right of the left rail/sidebar.
+ * Use this when a route should own the whole workspace instead of rendering
+ * inside the normal TabBar/Header/main/right-panel chrome.
+ */
+export function WorkspacePanel({ children, className, contentClassName }: WorkspacePanelProps) {
+	return (
+		<main
+			className={cn(
+				"relative isolate flex min-w-0 flex-1 flex-col overflow-hidden bg-panel",
+				className
+			)}
+		>
+			<div className="flex min-h-0 flex-1 items-center justify-center overflow-auto px-4 py-8">
+				<div className={cn("w-full max-w-md", contentClassName)}>{children}</div>
+			</div>
+		</main>
+	);
+}

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

@@ -1 +1,2 @@
 export { LayoutShell } from "./LayoutShell";
+export { WorkspacePanel } from "./WorkspacePanel";