refactor: implement new layout structure for search space and user settings with clear ownership

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/general/page.tsx

@@ -0,0 +1,10 @@
+import { GeneralSettingsManager } from "@/components/settings/general-settings-manager";
+
+export default async function Page({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+	return <GeneralSettingsManager searchSpaceId={Number(search_space_id)} />;
+}

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/image-models/page.tsx

@@ -0,0 +1,10 @@
+import { ImageModelManager } from "@/components/settings/image-model-manager";
+
+export default async function Page({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+	return <ImageModelManager searchSpaceId={Number(search_space_id)} />;
+}

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/layout-shell.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import {
+	BookText,
+	Bot,
+	Brain,
+	CircleUser,
+	Earth,
+	ImageIcon,
+	ListChecks,
+	ScanEye,
+	UserKey,
+} from "lucide-react";
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useCallback, useMemo, useState } from "react";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+export type SearchSpaceSettingsTab =
+	| "general"
+	| "roles"
+	| "models"
+	| "image-models"
+	| "vision-models"
+	| "team-roles"
+	| "prompts"
+	| "team-memory"
+	| "public-links";
+
+const DEFAULT_TAB: SearchSpaceSettingsTab = "general";
+
+interface SearchSpaceSettingsLayoutShellProps {
+	searchSpaceId: string;
+	children: React.ReactNode;
+}
+
+export function SearchSpaceSettingsLayoutShell({
+	searchSpaceId,
+	children,
+}: SearchSpaceSettingsLayoutShellProps) {
+	const t = useTranslations("searchSpaceSettings");
+	const segment = useSelectedLayoutSegment();
+	const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
+
+	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: "general" as const,
+				label: t("nav_general"),
+				icon: <CircleUser className="h-4 w-4" />,
+			},
+			{
+				value: "roles" as const,
+				label: t("nav_role_assignments"),
+				icon: <ListChecks className="h-4 w-4" />,
+			},
+			{
+				value: "models" as const,
+				label: t("nav_agent_models"),
+				icon: <Bot className="h-4 w-4" />,
+			},
+			{
+				value: "image-models" as const,
+				label: t("nav_image_models"),
+				icon: <ImageIcon className="h-4 w-4" />,
+			},
+			{
+				value: "vision-models" as const,
+				label: t("nav_vision_models"),
+				icon: <ScanEye className="h-4 w-4" />,
+			},
+			{
+				value: "team-roles" as const,
+				label: t("nav_team_roles"),
+				icon: <UserKey className="h-4 w-4" />,
+			},
+			{
+				value: "prompts" as const,
+				label: t("nav_system_instructions"),
+				icon: <BookText className="h-4 w-4" />,
+			},
+			{
+				value: "team-memory" as const,
+				label: "Team Memory",
+				icon: <Brain className="h-4 w-4" />,
+			},
+			{
+				value: "public-links" as const,
+				label: t("nav_public_links"),
+				icon: <Earth className="h-4 w-4" />,
+			},
+		],
+		[t]
+	);
+
+	const activeTab: SearchSpaceSettingsTab =
+		segment && navItems.some((item) => item.value === segment)
+			? (segment as SearchSpaceSettingsTab)
+			: DEFAULT_TAB;
+	const selectedLabel = navItems.find((item) => item.value === activeTab)?.label ?? t("title");
+
+	const hrefFor = (tab: SearchSpaceSettingsTab) =>
+		`/dashboard/${searchSpaceId}/search-space-settings/${tab}`;
+
+	return (
+		<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:pt-6 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) => (
+						<Link
+							key={item.value}
+							href={hrefFor(item.value)}
+							replace
+							scroll={false}
+							prefetch
+							className={cn(
+								"inline-flex h-auto items-center justify-start gap-3 rounded-md px-3 py-2.5 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+								activeTab === item.value
+									? "bg-accent text-accent-foreground"
+									: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+							)}
+						>
+							{item.icon}
+							{item.label}
+						</Link>
+					))}
+				</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) => (
+							<Link
+								key={item.value}
+								href={hrefFor(item.value)}
+								replace
+								scroll={false}
+								prefetch
+								className={cn(
+									"inline-flex h-auto shrink-0 items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+									activeTab === item.value
+										? "bg-accent text-accent-foreground"
+										: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+								)}
+							>
+								{item.icon}
+								{item.label}
+							</Link>
+						))}
+					</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">{children}</div>
+			</div>
+		</section>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/layout.tsx

@@ -0,0 +1,19 @@
+import type React from "react";
+import { use } from "react";
+import { SearchSpaceSettingsLayoutShell } from "./layout-shell";
+
+export default function SearchSpaceSettingsLayout({
+	params,
+	children,
+}: {
+	params: Promise<{ search_space_id: string }>;
+	children: React.ReactNode;
+}) {
+	const { search_space_id } = use(params);
+
+	return (
+		<SearchSpaceSettingsLayoutShell searchSpaceId={search_space_id}>
+			{children}
+		</SearchSpaceSettingsLayoutShell>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/models/page.tsx

@@ -0,0 +1,10 @@
+import { AgentModelManager } from "@/components/settings/agent-model-manager";
+
+export default async function Page({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+	return <AgentModelManager searchSpaceId={Number(search_space_id)} />;
+}

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

@@ -1,40 +1,10 @@
-import {
-	SearchSpaceSettingsPanel,
-	type SearchSpaceSettingsTab,
-} from "@/components/settings/search-space-settings-panel";
-
-const SEARCH_SPACE_SETTINGS_TABS = new Set<string>([
-	"general",
-	"roles",
-	"models",
-	"image-models",
-	"vision-models",
-	"team-roles",
-	"prompts",
-	"team-memory",
-	"public-links",
-]);
-
-function getInitialTab(tab: string | string[] | undefined): SearchSpaceSettingsTab {
-	const value = Array.isArray(tab) ? tab[0] : tab;
-	return value && SEARCH_SPACE_SETTINGS_TABS.has(value)
-		? (value as SearchSpaceSettingsTab)
-		: "general";
-}
+import { redirect } from "next/navigation";
 
 export default async function SearchSpaceSettingsPage({
 	params,
-	searchParams,
 }: {
 	params: Promise<{ search_space_id: string }>;
-	searchParams: Promise<{ tab?: string | string[] }>;
 }) {
-	const [{ search_space_id }, resolvedSearchParams] = await Promise.all([params, searchParams]);
-
-	return (
-		<SearchSpaceSettingsPanel
-			searchSpaceId={search_space_id}
-			initialTab={getInitialTab(resolvedSearchParams.tab)}
-		/>
-	);
+	const { search_space_id } = await params;
+	redirect(`/dashboard/${search_space_id}/search-space-settings/general`);
 }

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/prompts/page.tsx

@@ -0,0 +1,10 @@
+import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
+
+export default async function Page({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+	return <PromptConfigManager searchSpaceId={Number(search_space_id)} />;
+}

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/public-links/page.tsx

@@ -0,0 +1,10 @@
+import { PublicChatSnapshotsManager } from "@/components/public-chat-snapshots/public-chat-snapshots-manager";
+
+export default async function Page({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+	return <PublicChatSnapshotsManager searchSpaceId={Number(search_space_id)} />;
+}

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/roles/page.tsx

@@ -0,0 +1,10 @@
+import { LLMRoleManager } from "@/components/settings/llm-role-manager";
+
+export default async function Page({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+	return <LLMRoleManager key={search_space_id} searchSpaceId={Number(search_space_id)} />;
+}

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/team-memory/page.tsx

@@ -0,0 +1,10 @@
+import { TeamMemoryManager } from "@/components/settings/team-memory-manager";
+
+export default async function Page({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+	return <TeamMemoryManager searchSpaceId={Number(search_space_id)} />;
+}

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/team-roles/page.tsx

@@ -0,0 +1,10 @@
+import { RolesManager } from "@/components/settings/roles-manager";
+
+export default async function Page({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+	return <RolesManager searchSpaceId={Number(search_space_id)} />;
+}

surfsense_web/app/dashboard/[search_space_id]/search-space-settings/vision-models/page.tsx

@@ -0,0 +1,10 @@
+import { VisionModelManager } from "@/components/settings/vision-model-manager";
+
+export default async function Page({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+	return <VisionModelManager searchSpaceId={Number(search_space_id)} />;
+}

surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx

@@ -545,7 +545,7 @@ function MemberRow({
 							<DropdownMenuSeparator className="dark:bg-white/5" />
 							<DropdownMenuItem
 								onClick={() =>
-									router.push(`/dashboard/${searchSpaceId}/search-space-settings?tab=team-roles`)
+									router.push(`/dashboard/${searchSpaceId}/search-space-settings/team-roles`)
 								}
 							>
 								Manage Roles

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

@@ -0,0 +1,5 @@
+import { AgentPermissionsContent } from "../components/AgentPermissionsContent";
+
+export default function Page() {
+	return <AgentPermissionsContent />;
+}

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

@@ -0,0 +1,5 @@
+import { AgentStatusContent } from "../components/AgentStatusContent";
+
+export default function Page() {
+	return <AgentStatusContent />;
+}

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

@@ -0,0 +1,5 @@
+import { ApiKeyContent } from "../components/ApiKeyContent";
+
+export default function Page() {
+	return <ApiKeyContent />;
+}

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

@@ -0,0 +1,5 @@
+import { CommunityPromptsContent } from "../components/CommunityPromptsContent";
+
+export default function Page() {
+	return <CommunityPromptsContent />;
+}

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

@@ -122,7 +122,7 @@ function HotkeyRow({
 	);
 }
 
-export function DesktopShortcutsContent() {
+export function HotkeysContent() {
 	const api = useElectronAPI();
 	const [shortcuts, setShortcuts] = useState(DEFAULT_SHORTCUTS);
 	const [shortcutsLoaded, setShortcutsLoaded] = useState(false);

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

@@ -0,0 +1,5 @@
+import { DesktopContent } from "../components/DesktopContent";
+
+export default function Page() {
+	return <DesktopContent />;
+}

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

@@ -0,0 +1,5 @@
+import { HotkeysContent } from "../components/HotkeysContent";
+
+export default function Page() {
+	return <HotkeysContent />;
+}

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

@@ -0,0 +1,191 @@
+"use client";
+
+import {
+	Brain,
+	CircleUser,
+	Globe,
+	Keyboard,
+	KeyRound,
+	Monitor,
+	ReceiptText,
+	ShieldCheck,
+	Sparkles,
+	Workflow,
+} from "lucide-react";
+import Link from "next/link";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useCallback, useMemo, useState } from "react";
+import { Separator } from "@/components/ui/separator";
+import { usePlatform } from "@/hooks/use-platform";
+import { cn } from "@/lib/utils";
+
+export type UserSettingsTab =
+	| "profile"
+	| "api-key"
+	| "prompts"
+	| "community-prompts"
+	| "memory"
+	| "agent-permissions"
+	| "agent-status"
+	| "purchases"
+	| "desktop"
+	| "hotkeys";
+
+const DEFAULT_TAB: UserSettingsTab = "profile";
+
+interface UserSettingsLayoutShellProps {
+	searchSpaceId: string;
+	children: React.ReactNode;
+}
+
+export function UserSettingsLayoutShell({
+	searchSpaceId,
+	children,
+}: UserSettingsLayoutShellProps) {
+	const t = useTranslations("userSettings");
+	const { isDesktop } = usePlatform();
+	const segment = useSelectedLayoutSegment();
+	const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
+
+	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" as const,
+				label: t("profile_nav_label"),
+				icon: <CircleUser className="h-4 w-4" />,
+			},
+			{
+				value: "api-key" as const,
+				label: t("api_key_nav_label"),
+				icon: <KeyRound className="h-4 w-4" />,
+			},
+			{
+				value: "prompts" as const,
+				label: "My Prompts",
+				icon: <Sparkles className="h-4 w-4" />,
+			},
+			{
+				value: "community-prompts" as const,
+				label: "Community Prompts",
+				icon: <Globe className="h-4 w-4" />,
+			},
+			{
+				value: "memory" as const,
+				label: "Memory",
+				icon: <Brain className="h-4 w-4" />,
+			},
+			{
+				value: "agent-permissions" as const,
+				label: "Agent Permissions",
+				icon: <ShieldCheck className="h-4 w-4" />,
+			},
+			{
+				value: "agent-status" as const,
+				label: "Agent Status",
+				icon: <Workflow className="h-4 w-4" />,
+			},
+			{
+				value: "purchases" as const,
+				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: "hotkeys" as const,
+							label: "Hotkeys",
+							icon: <Keyboard className="h-4 w-4" />,
+						},
+					]
+				: []),
+		],
+		[t, isDesktop]
+	);
+
+	const activeTab: UserSettingsTab =
+		segment && navItems.some((item) => item.value === segment)
+			? (segment as UserSettingsTab)
+			: DEFAULT_TAB;
+	const selectedLabel = navItems.find((item) => item.value === activeTab)?.label ?? t("title");
+
+	const hrefFor = (tab: UserSettingsTab) => `/dashboard/${searchSpaceId}/user-settings/${tab}`;
+
+	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) => (
+						<Link
+							key={item.value}
+							href={hrefFor(item.value)}
+							replace
+							scroll={false}
+							prefetch
+							className={cn(
+								"inline-flex h-auto items-center justify-start gap-3 rounded-md px-3 py-2.5 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+								activeTab === item.value
+									? "bg-accent text-accent-foreground"
+									: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+							)}
+						>
+							{item.icon}
+							{item.label}
+						</Link>
+					))}
+				</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) => (
+							<Link
+								key={item.value}
+								href={hrefFor(item.value)}
+								replace
+								scroll={false}
+								prefetch
+								className={cn(
+									"inline-flex h-auto shrink-0 items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
+									activeTab === item.value
+										? "bg-accent text-accent-foreground"
+										: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+								)}
+							>
+								{item.icon}
+								{item.label}
+							</Link>
+						))}
+					</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 bg-border" />
+				</div>
+				<div className="min-w-0 pt-4 md:max-w-3xl">{children}</div>
+			</div>
+		</section>
+	);
+}

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

@@ -0,0 +1,17 @@
+import type React from "react";
+import { use } from "react";
+import { UserSettingsLayoutShell } from "./layout-shell";
+
+export default function UserSettingsLayout({
+	params,
+	children,
+}: {
+	params: Promise<{ search_space_id: string }>;
+	children: React.ReactNode;
+}) {
+	const { search_space_id } = use(params);
+
+	return (
+		<UserSettingsLayoutShell searchSpaceId={search_space_id}>{children}</UserSettingsLayoutShell>
+	);
+}

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

@@ -0,0 +1,5 @@
+import { MemoryContent } from "../components/MemoryContent";
+
+export default function Page() {
+	return <MemoryContent />;
+}

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

@@ -1,36 +1,10 @@
-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";
-}
+import { redirect } from "next/navigation";
 
 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)}
-		/>
-	);
+	const { search_space_id } = await params;
+	redirect(`/dashboard/${search_space_id}/user-settings/profile`);
 }

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

@@ -0,0 +1,5 @@
+import { ProfileContent } from "../components/ProfileContent";
+
+export default function Page() {
+	return <ProfileContent />;
+}

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

@@ -0,0 +1,5 @@
+import { PromptsContent } from "../components/PromptsContent";
+
+export default function Page() {
+	return <PromptsContent />;
+}

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

@@ -0,0 +1,5 @@
+import { PurchaseHistoryContent } from "../components/PurchaseHistoryContent";
+
+export default function Page() {
+	return <PurchaseHistoryContent />;
+}