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

surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx

@@ -18,12 +18,11 @@ export default function BuyMorePage() {
 	const [activeTab, setActiveTab] = useState<TabId>("pages");
 
 	return (
-		<div className="flex min-h-[calc(100vh-64px)] select-none items-center justify-center px-4 py-8">
 		<motion.div
 			initial={{ opacity: 0, y: 20 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.3 }}
-				className="w-full max-w-md space-y-6"
+			className="w-full select-none space-y-6"
 		>
 			<div className="flex items-center justify-center rounded-lg border bg-muted/30 p-1">
 				{TABS.map((tab) => (
@@ -47,6 +46,5 @@ export default function BuyMorePage() {
 
 			{activeTab === "pages" ? <BuyPagesContent /> : <BuyTokensContent />}
 		</motion.div>
-		</div>
 	);
 }

surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx

@@ -5,15 +5,13 @@ import { MorePagesContent } from "@/components/settings/more-pages-content";
 
 export default function MorePagesPage() {
 	return (
-		<div className="flex min-h-[calc(100vh-64px)] select-none items-center justify-center px-4 py-8">
 		<motion.div
 			initial={{ opacity: 0, y: 20 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.3 }}
-				className="w-full max-w-md space-y-6"
+			className="w-full select-none space-y-6"
 		>
 			<MorePagesContent />
 		</motion.div>
-		</div>
 	);
 }

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}
 						/>
 
+						{useWorkspacePanel ? (
+							<WorkspacePanel>{children}</WorkspacePanel>
+						) : (
 							<main className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
 								{children}
 							</main>
+						)}
 
 						{/* Mobile unified slide-out panel */}
 						<SidebarSlideOutPanel
@@ -506,6 +517,11 @@ export function LayoutShell({
 						</SidebarSlideOutPanel>
 					</div>
 
+					<DesktopWorkspaceRegion>
+						{useWorkspacePanel ? (
+							<WorkspacePanel>{children}</WorkspacePanel>
+						) : (
+							<>
 								{/* Main content panel */}
 								<MainContentPanel
 									isChatPage={isChatPage}
@@ -516,16 +532,17 @@ export function LayoutShell({
 								</MainContentPanel>
 
 								{/* Right panel — tabbed Sources/Report (desktop only) */}
-					{documentsPanel && (
+								{documentsPanel ? (
-						<div className="-ml-2 -mr-2">
 									<RightPanel
 										documentsPanel={{
 											open: documentsPanel.open,
 											onOpenChange: documentsPanel.onOpenChange,
 										}}
 									/>
-						</div>
+								) : 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";