refactor: implement UserSettingsPage and UserSettingsPanel components, replacing UserSettingsDialog and enhancing user settings navigation

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

@@ -100,6 +100,8 @@ interface LayoutShellProps {
 	defaultCollapsed?: boolean;
 	isChatPage?: boolean;
 	useWorkspacePanel?: boolean;
+	workspacePanelViewportClassName?: string;
+	workspacePanelContentClassName?: string;
 	children: React.ReactNode;
 	className?: string;
 	// Unified slide-out panel state
@@ -205,6 +207,8 @@ export function LayoutShell({
 	defaultCollapsed = false,
 	isChatPage = false,
 	useWorkspacePanel = false,
+	workspacePanelViewportClassName,
+	workspacePanelContentClassName,
 	children,
 	className,
 	activeSlideoutPanel = null,
@@ -295,7 +299,12 @@ export function LayoutShell({
 						/>
 
 						{useWorkspacePanel ? (
-							<WorkspacePanel>{children}</WorkspacePanel>
+							<WorkspacePanel
+								viewportClassName={workspacePanelViewportClassName}
+								contentClassName={workspacePanelContentClassName}
+							>
+								{children}
+							</WorkspacePanel>
 						) : (
 							<main className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
 								{children}
@@ -519,7 +528,12 @@ export function LayoutShell({
 
 					<DesktopWorkspaceRegion>
 						{useWorkspacePanel ? (
-							<WorkspacePanel>{children}</WorkspacePanel>
+							<WorkspacePanel
+								viewportClassName={workspacePanelViewportClassName}
+								contentClassName={workspacePanelContentClassName}
+							>
+								{children}
+							</WorkspacePanel>
 						) : (
 							<>
 								{/* Main content panel */}

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

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils";
 interface WorkspacePanelProps {
 	children: ReactNode;
 	className?: string;
+	viewportClassName?: string;
 	contentClassName?: string;
 }
 
@@ -12,7 +13,12 @@ interface WorkspacePanelProps {
  * 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) {
+export function WorkspacePanel({
+	children,
+	className,
+	viewportClassName,
+	contentClassName,
+}: WorkspacePanelProps) {
 	return (
 		<main
 			className={cn(
@@ -20,7 +26,12 @@ export function WorkspacePanel({ children, className, contentClassName }: Worksp
 				className
 			)}
 		>
-			<div className="flex min-h-0 flex-1 items-center justify-center overflow-auto px-4 py-8">
+			<div
+				className={cn(
+					"flex min-h-0 flex-1 items-center justify-center overflow-auto px-4 py-8",
+					viewportClassName
+				)}
+			>
 				<div className={cn("w-full max-w-md", contentClassName)}>{children}</div>
 			</div>
 		</main>