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

surfsense_web/app/dashboard/[search_space_id]/user-settings/page.tsx

@@ -0,0 +1,36 @@
+import { UserSettingsPanel, type UserSettingsTab } from "@/components/settings/user-settings-panel";
+
+const USER_SETTINGS_TABS = new Set<string>([
+	"profile",
+	"api-key",
+	"prompts",
+	"community-prompts",
+	"memory",
+	"agent-permissions",
+	"agent-status",
+	"purchases",
+	"desktop",
+	"desktop-shortcuts",
+]);
+
+function getInitialTab(tab: string | string[] | undefined): UserSettingsTab {
+	const value = Array.isArray(tab) ? tab[0] : tab;
+	return value && USER_SETTINGS_TABS.has(value) ? (value as UserSettingsTab) : "profile";
+}
+
+export default async function UserSettingsPage({
+	params,
+	searchParams,
+}: {
+	params: Promise<{ search_space_id: string }>;
+	searchParams: Promise<{ tab?: string | string[] }>;
+}) {
+	const [{ search_space_id }, resolvedSearchParams] = await Promise.all([params, searchParams]);
+
+	return (
+		<UserSettingsPanel
+			searchSpaceId={search_space_id}
+			initialTab={getInitialTab(resolvedSearchParams.tab)}
+		/>
+	);
+}

surfsense_web/atoms/settings/settings-dialog.atoms.ts

@@ -5,21 +5,11 @@ export interface SearchSpaceSettingsDialogState {
 	initialTab: string;
 }
 
-export interface UserSettingsDialogState {
-	open: boolean;
-	initialTab: string;
-}
-
 export const searchSpaceSettingsDialogAtom = atom<SearchSpaceSettingsDialogState>({
 	open: false,
 	initialTab: "general",
 });
 
-export const userSettingsDialogAtom = atom<UserSettingsDialogState>({
-	open: false,
-	initialTab: "profile",
-});
-
 export const teamDialogAtom = atom<boolean>(false);
 
 export const announcementsDialogAtom = atom<boolean>(false);

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -18,7 +18,6 @@ import {
 	announcementsDialogAtom,
 	searchSpaceSettingsDialogAtom,
 	teamDialogAtom,
-	userSettingsDialogAtom,
 } from "@/atoms/settings/settings-dialog.atoms";
 import { removeChatTabAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
@@ -26,7 +25,6 @@ import { ActionLogDialog } from "@/components/agent-action-log/action-log-dialog
 import { AnnouncementsDialog } from "@/components/announcements/AnnouncementsDialog";
 import { SearchSpaceSettingsDialog } from "@/components/settings/search-space-settings-dialog";
 import { TeamDialog } from "@/components/settings/team-dialog";
-import { UserSettingsDialog } from "@/components/settings/user-settings-dialog";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -382,14 +380,13 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		setIsCreateSearchSpaceDialogOpen(true);
 	}, []);
 
-	const setUserSettingsDialog = useSetAtom(userSettingsDialogAtom);
 	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 	const setTeamDialogOpen = useSetAtom(teamDialogAtom);
 	const setAnnouncementsDialog = useSetAtom(announcementsDialogAtom);
 
 	const handleUserSettings = useCallback(() => {
-		setUserSettingsDialog({ open: true, initialTab: "profile" });
+		router.push(`/dashboard/${searchSpaceId}/user-settings`);
-	}, [setUserSettingsDialog]);
+	}, [router, searchSpaceId]);
 
 	const handleAnnouncements = useCallback(() => {
 		setAnnouncementsDialog(true);
@@ -668,8 +665,11 @@ 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 isUserSettingsPage = pathname?.endsWith("/user-settings") === true;
 	const useWorkspacePanel =
-		pathname?.endsWith("/buy-more") === true || pathname?.endsWith("/more-pages") === true;
+		pathname?.endsWith("/buy-more") === true ||
+		pathname?.endsWith("/more-pages") === true ||
+		isUserSettingsPage;
 
 	return (
 		<>
@@ -708,6 +708,10 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				setTheme={setTheme}
 				isChatPage={isChatPage}
 				useWorkspacePanel={useWorkspacePanel}
+				workspacePanelViewportClassName={
+					isUserSettingsPage ? "items-start justify-center px-6 py-8 md:px-10 md:py-10" : undefined
+				}
+				workspacePanelContentClassName={isUserSettingsPage ? "max-w-5xl" : undefined}
 				isLoadingChats={isLoadingThreads}
 				activeSlideoutPanel={activeSlideoutPanel}
 				onSlideoutPanelChange={setActiveSlideoutPanel}
@@ -887,9 +891,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				onOpenChange={setIsCreateSearchSpaceDialogOpen}
 			/>
 
-			{/* Settings Dialogs */}
 			<SearchSpaceSettingsDialog searchSpaceId={Number(searchSpaceId)} />
-			<UserSettingsDialog />
 			<TeamDialog searchSpaceId={Number(searchSpaceId)} />
 			<AnnouncementsDialog />
 

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>

surfsense_web/components/new-chat/prompt-picker.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import { Plus, Zap } from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
 import {
 	forwardRef,
 	useCallback,
@@ -14,7 +15,6 @@ import {
 } from "react";
 
 import { promptsAtom } from "@/atoms/prompts/prompts-query.atoms";
-import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
@@ -35,7 +35,8 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 	{ onSelect, onDone, externalSearch = "" },
 	ref
 ) {
-	const setUserSettingsDialog = useSetAtom(userSettingsDialogAtom);
+	const router = useRouter();
+	const params = useParams();
 	const { data: prompts, isLoading, isError } = useAtomValue(promptsAtom);
 	const [highlightedIndex, setHighlightedIndex] = useState(0);
 	const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -62,19 +63,24 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 
 	const createPromptIndex = filtered.length;
 	const totalItems = filtered.length + 1;
+	const searchSpaceId = Array.isArray(params?.search_space_id)
+		? params.search_space_id[0]
+		: params?.search_space_id;
 
 	const handleSelect = useCallback(
 		(index: number) => {
 			if (index === createPromptIndex) {
 				onDone();
-				setUserSettingsDialog({ open: true, initialTab: "prompts" });
+				if (searchSpaceId) {
+					router.push(`/dashboard/${searchSpaceId}/user-settings?tab=prompts`);
+				}
 				return;
 			}
 			const action = filtered[index];
 			if (!action) return;
 			onSelect({ name: action.name, prompt: action.prompt, mode: action.mode });
 		},
-		[filtered, onSelect, createPromptIndex, onDone, setUserSettingsDialog]
+		[filtered, onSelect, createPromptIndex, onDone, router, searchSpaceId]
 	);
 
 	useEffect(() => {

surfsense_web/components/settings/user-settings-dialog.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { useAtom } from "jotai";
-import {
-	Brain,
-	CircleUser,
-	Globe,
-	Keyboard,
-	KeyRound,
-	Monitor,
-	ReceiptText,
-	ShieldCheck,
-	Sparkles,
-	Workflow,
-} from "lucide-react";
-import dynamic from "next/dynamic";
-import { useTranslations } from "next-intl";
-import { useMemo } from "react";
-import { userSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
-import { SettingsDialog } from "@/components/settings/settings-dialog";
-import { usePlatform } from "@/hooks/use-platform";
-
-const ProfileContent = dynamic(
-	() =>
-		import("@/app/dashboard/[search_space_id]/user-settings/components/ProfileContent").then(
-			(m) => ({ default: m.ProfileContent })
-		),
-	{ ssr: false }
-);
-const ApiKeyContent = dynamic(
-	() =>
-		import("@/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent").then(
-			(m) => ({ default: m.ApiKeyContent })
-		),
-	{ ssr: false }
-);
-const PromptsContent = dynamic(
-	() =>
-		import("@/app/dashboard/[search_space_id]/user-settings/components/PromptsContent").then(
-			(m) => ({ default: m.PromptsContent })
-		),
-	{ ssr: false }
-);
-const CommunityPromptsContent = dynamic(
-	() =>
-		import(
-			"@/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent"
-		).then((m) => ({ default: m.CommunityPromptsContent })),
-	{ ssr: false }
-);
-const PurchaseHistoryContent = dynamic(
-	() =>
-		import(
-			"@/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent"
-		).then((m) => ({ default: m.PurchaseHistoryContent })),
-	{ ssr: false }
-);
-const DesktopContent = dynamic(
-	() =>
-		import("@/app/dashboard/[search_space_id]/user-settings/components/DesktopContent").then(
-			(m) => ({ default: m.DesktopContent })
-		),
-	{ ssr: false }
-);
-const DesktopShortcutsContent = dynamic(
-	() =>
-		import(
-			"@/app/dashboard/[search_space_id]/user-settings/components/DesktopShortcutsContent"
-		).then((m) => ({ default: m.DesktopShortcutsContent })),
-	{ ssr: false }
-);
-const MemoryContent = dynamic(
-	() =>
-		import("@/app/dashboard/[search_space_id]/user-settings/components/MemoryContent").then(
-			(m) => ({ default: m.MemoryContent })
-		),
-	{ ssr: false }
-);
-const AgentPermissionsContent = dynamic(
-	() =>
-		import(
-			"@/app/dashboard/[search_space_id]/user-settings/components/AgentPermissionsContent"
-		).then((m) => ({ default: m.AgentPermissionsContent })),
-	{ ssr: false }
-);
-const AgentStatusContent = dynamic(
-	() =>
-		import("@/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent").then(
-			(m) => ({ default: m.AgentStatusContent })
-		),
-	{ ssr: false }
-);
-
-export function UserSettingsDialog() {
-	const t = useTranslations("userSettings");
-	const [state, setState] = useAtom(userSettingsDialogAtom);
-	const { isDesktop } = usePlatform();
-
-	const navItems = useMemo(
-		() => [
-			{ value: "profile", label: t("profile_nav_label"), icon: <CircleUser className="h-4 w-4" /> },
-			{
-				value: "api-key",
-				label: t("api_key_nav_label"),
-				icon: <KeyRound className="h-4 w-4" />,
-			},
-			{
-				value: "prompts",
-				label: "My Prompts",
-				icon: <Sparkles className="h-4 w-4" />,
-			},
-			{
-				value: "community-prompts",
-				label: "Community Prompts",
-				icon: <Globe className="h-4 w-4" />,
-			},
-			{
-				value: "memory",
-				label: "Memory",
-				icon: <Brain className="h-4 w-4" />,
-			},
-			{
-				value: "agent-permissions",
-				label: "Agent Permissions",
-				icon: <ShieldCheck className="h-4 w-4" />,
-			},
-			{
-				value: "agent-status",
-				label: "Agent Status",
-				icon: <Workflow className="h-4 w-4" />,
-			},
-			{
-				value: "purchases",
-				label: "Purchase History",
-				icon: <ReceiptText className="h-4 w-4" />,
-			},
-			...(isDesktop
-				? [
-						{
-							value: "desktop",
-							label: "App Preferences",
-							icon: <Monitor className="h-4 w-4" />,
-						},
-						{
-							value: "desktop-shortcuts",
-							label: "Hotkeys",
-							icon: <Keyboard className="h-4 w-4" />,
-						},
-					]
-				: []),
-		],
-		[t, isDesktop]
-	);
-
-	return (
-		<SettingsDialog
-			open={state.open}
-			onOpenChange={(open) => setState((prev) => ({ ...prev, open }))}
-			title={t("title")}
-			navItems={navItems}
-			activeItem={state.initialTab}
-			onItemChange={(tab) => setState((prev) => ({ ...prev, initialTab: tab }))}
-		>
-			<div className="pt-4">
-				{state.initialTab === "profile" && <ProfileContent />}
-				{state.initialTab === "api-key" && <ApiKeyContent />}
-				{state.initialTab === "prompts" && <PromptsContent />}
-				{state.initialTab === "community-prompts" && <CommunityPromptsContent />}
-				{state.initialTab === "memory" && <MemoryContent />}
-				{state.initialTab === "agent-permissions" && <AgentPermissionsContent />}
-				{state.initialTab === "agent-status" && <AgentStatusContent />}
-				{state.initialTab === "purchases" && <PurchaseHistoryContent />}
-				{state.initialTab === "desktop" && <DesktopContent />}
-				{state.initialTab === "desktop-shortcuts" && <DesktopShortcutsContent />}
-			</div>
-		</SettingsDialog>
-	);
-}

surfsense_web/components/settings/user-settings-panel.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import {
+	Brain,
+	CircleUser,
+	Globe,
+	Keyboard,
+	KeyRound,
+	Monitor,
+	ReceiptText,
+	ShieldCheck,
+	Sparkles,
+	Workflow,
+} from "lucide-react";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { usePlatform } from "@/hooks/use-platform";
+import { cn } from "@/lib/utils";
+
+const ProfileContent = dynamic(
+	() =>
+		import("@/app/dashboard/[search_space_id]/user-settings/components/ProfileContent").then(
+			(m) => ({ default: m.ProfileContent })
+		),
+	{ ssr: false }
+);
+const ApiKeyContent = dynamic(
+	() =>
+		import("@/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent").then(
+			(m) => ({ default: m.ApiKeyContent })
+		),
+	{ ssr: false }
+);
+const PromptsContent = dynamic(
+	() =>
+		import("@/app/dashboard/[search_space_id]/user-settings/components/PromptsContent").then(
+			(m) => ({ default: m.PromptsContent })
+		),
+	{ ssr: false }
+);
+const CommunityPromptsContent = dynamic(
+	() =>
+		import(
+			"@/app/dashboard/[search_space_id]/user-settings/components/CommunityPromptsContent"
+		).then((m) => ({ default: m.CommunityPromptsContent })),
+	{ ssr: false }
+);
+const PurchaseHistoryContent = dynamic(
+	() =>
+		import(
+			"@/app/dashboard/[search_space_id]/user-settings/components/PurchaseHistoryContent"
+		).then((m) => ({ default: m.PurchaseHistoryContent })),
+	{ ssr: false }
+);
+const DesktopContent = dynamic(
+	() =>
+		import("@/app/dashboard/[search_space_id]/user-settings/components/DesktopContent").then(
+			(m) => ({ default: m.DesktopContent })
+		),
+	{ ssr: false }
+);
+const DesktopShortcutsContent = dynamic(
+	() =>
+		import(
+			"@/app/dashboard/[search_space_id]/user-settings/components/DesktopShortcutsContent"
+		).then((m) => ({ default: m.DesktopShortcutsContent })),
+	{ ssr: false }
+);
+const MemoryContent = dynamic(
+	() =>
+		import("@/app/dashboard/[search_space_id]/user-settings/components/MemoryContent").then(
+			(m) => ({ default: m.MemoryContent })
+		),
+	{ ssr: false }
+);
+const AgentPermissionsContent = dynamic(
+	() =>
+		import(
+			"@/app/dashboard/[search_space_id]/user-settings/components/AgentPermissionsContent"
+		).then((m) => ({ default: m.AgentPermissionsContent })),
+	{ ssr: false }
+);
+const AgentStatusContent = dynamic(
+	() =>
+		import("@/app/dashboard/[search_space_id]/user-settings/components/AgentStatusContent").then(
+			(m) => ({ default: m.AgentStatusContent })
+		),
+	{ ssr: false }
+);
+
+export type UserSettingsTab =
+	| "profile"
+	| "api-key"
+	| "prompts"
+	| "community-prompts"
+	| "memory"
+	| "agent-permissions"
+	| "agent-status"
+	| "purchases"
+	| "desktop"
+	| "desktop-shortcuts";
+
+interface UserSettingsPanelProps {
+	searchSpaceId: string;
+	initialTab?: UserSettingsTab;
+}
+
+export function UserSettingsPanel({
+	searchSpaceId,
+	initialTab = "profile",
+}: UserSettingsPanelProps) {
+	const t = useTranslations("userSettings");
+	const router = useRouter();
+	const { isDesktop } = usePlatform();
+	const [activeTab, setActiveTab] = useState<UserSettingsTab>(initialTab);
+	const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
+
+	useEffect(() => {
+		setActiveTab(initialTab);
+	}, [initialTab]);
+
+	const handleTabScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		const el = e.currentTarget;
+		const atStart = el.scrollLeft <= 2;
+		const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2;
+		setTabScrollPos(atStart ? "start" : atEnd ? "end" : "middle");
+	}, []);
+
+	const navItems = useMemo(
+		() => [
+			{ value: "profile", label: t("profile_nav_label"), icon: <CircleUser className="h-4 w-4" /> },
+			{
+				value: "api-key",
+				label: t("api_key_nav_label"),
+				icon: <KeyRound className="h-4 w-4" />,
+			},
+			{
+				value: "prompts",
+				label: "My Prompts",
+				icon: <Sparkles className="h-4 w-4" />,
+			},
+			{
+				value: "community-prompts",
+				label: "Community Prompts",
+				icon: <Globe className="h-4 w-4" />,
+			},
+			{
+				value: "memory",
+				label: "Memory",
+				icon: <Brain className="h-4 w-4" />,
+			},
+			{
+				value: "agent-permissions",
+				label: "Agent Permissions",
+				icon: <ShieldCheck className="h-4 w-4" />,
+			},
+			{
+				value: "agent-status",
+				label: "Agent Status",
+				icon: <Workflow className="h-4 w-4" />,
+			},
+			{
+				value: "purchases",
+				label: "Purchase History",
+				icon: <ReceiptText className="h-4 w-4" />,
+			},
+			...(isDesktop
+				? [
+						{
+							value: "desktop" as const,
+							label: "App Preferences",
+							icon: <Monitor className="h-4 w-4" />,
+						},
+						{
+							value: "desktop-shortcuts" as const,
+							label: "Hotkeys",
+							icon: <Keyboard className="h-4 w-4" />,
+						},
+					]
+				: []),
+		],
+		[t, isDesktop]
+	);
+
+	const selectedTab = navItems.some((item) => item.value === activeTab) ? activeTab : "profile";
+	const selectedLabel = navItems.find((item) => item.value === selectedTab)?.label ?? t("title");
+
+	const handleItemChange = (tab: UserSettingsTab) => {
+		setActiveTab(tab);
+		const suffix = tab === "profile" ? "" : `?tab=${tab}`;
+		router.replace(`/dashboard/${searchSpaceId}/user-settings${suffix}`, { scroll: false });
+	};
+
+	return (
+		<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:pt-10 md:flex-row">
+			<div className="md:w-[220px] md:shrink-0">
+				<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">{t("title")}</h1>
+				<nav className="hidden flex-col gap-0.5 md:flex">
+					{navItems.map((item) => (
+						<Button
+							key={item.value}
+							type="button"
+							variant="ghost"
+							onClick={() => handleItemChange(item.value as UserSettingsTab)}
+							className={cn(
+								"h-auto justify-start gap-3 px-3 py-2.5 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+								selectedTab === item.value
+									? "bg-accent text-accent-foreground"
+									: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+							)}
+						>
+							{item.icon}
+							{item.label}
+						</Button>
+					))}
+				</nav>
+				<div
+					className="overflow-x-auto border-b border-border pb-3 md:hidden"
+					onScroll={handleTabScroll}
+					style={{
+						maskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
+						WebkitMaskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
+					}}
+				>
+					<div className="flex gap-1">
+						{navItems.map((item) => (
+							<Button
+								key={item.value}
+								type="button"
+								variant="ghost"
+								onClick={() => handleItemChange(item.value as UserSettingsTab)}
+								className={cn(
+									"h-auto shrink-0 gap-2 px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+									selectedTab === item.value
+										? "bg-accent text-accent-foreground"
+										: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+								)}
+							>
+								{item.icon}
+								{item.label}
+							</Button>
+						))}
+					</div>
+				</div>
+			</div>
+
+			<div className="min-w-0 flex-1">
+				<div className="hidden md:block">
+					<h2 className="text-lg font-semibold">{selectedLabel}</h2>
+					<Separator className="mt-4" />
+				</div>
+				<div className="min-w-0 pt-4 md:max-w-3xl">
+					{selectedTab === "profile" && <ProfileContent />}
+					{selectedTab === "api-key" && <ApiKeyContent />}
+					{selectedTab === "prompts" && <PromptsContent />}
+					{selectedTab === "community-prompts" && <CommunityPromptsContent />}
+					{selectedTab === "memory" && <MemoryContent />}
+					{selectedTab === "agent-permissions" && <AgentPermissionsContent />}
+					{selectedTab === "agent-status" && <AgentStatusContent />}
+					{selectedTab === "purchases" && <PurchaseHistoryContent />}
+					{selectedTab === "desktop" && <DesktopContent />}
+					{selectedTab === "desktop-shortcuts" && <DesktopShortcutsContent />}
+				</div>
+			</div>
+		</section>
+	);
+}