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 />;
+}

surfsense_web/components/assistant-ui/connector-popup.tsx

@@ -396,7 +396,7 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 															onClick={() => {
 																handleOpenChange(false);
 																router.push(
-																	`/dashboard/${searchSpaceId}/search-space-settings?tab=models`
+																	`/dashboard/${searchSpaceId}/search-space-settings/models`
 																);
 															}}
 														>

surfsense_web/components/assistant-ui/document-upload-popup.tsx

@@ -162,7 +162,7 @@ const DocumentUploadPopupContent: FC<{
 											variant="outline"
 											onClick={() => {
 												onOpenChange(false);
-												router.push(`/dashboard/${searchSpaceId}/search-space-settings?tab=models`);
+												router.push(`/dashboard/${searchSpaceId}/search-space-settings/models`);
 											}}
 										>
 											<Settings className="mr-2 h-4 w-4" />

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -659,8 +659,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 isUserSettingsPage = pathname?.endsWith("/user-settings") === true;
-	const isSearchSpaceSettingsPage = pathname?.endsWith("/search-space-settings") === true;
+	const isUserSettingsPage = pathname?.includes("/user-settings") === true;
+	const isSearchSpaceSettingsPage = pathname?.includes("/search-space-settings") === true;
 	const useWorkspacePanel =
 		pathname?.endsWith("/buy-more") === true ||
 		pathname?.endsWith("/more-pages") === true ||

surfsense_web/components/new-chat/chat-share-button.tsx

@@ -149,7 +149,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 							size="icon"
 							onClick={() =>
 								router.push(
-									`/dashboard/${thread.search_space_id}/search-space-settings?tab=public-links`
+									`/dashboard/${thread.search_space_id}/search-space-settings/public-links`
 								)
 							}
 							className="size-8 bg-muted/50 hover:bg-accent hover:text-accent-foreground"

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

@@ -72,7 +72,7 @@ export const PromptPicker = forwardRef<PromptPickerRef, PromptPickerProps>(funct
 			if (index === createPromptIndex) {
 				onDone();
 				if (searchSpaceId) {
-					router.push(`/dashboard/${searchSpaceId}/user-settings?tab=prompts`);
+					router.push(`/dashboard/${searchSpaceId}/user-settings/prompts`);
 				}
 				return;
 			}

surfsense_web/components/settings/search-space-settings-panel.tsx

@@ -1,245 +0,0 @@
-"use client";
-
-import {
-	BookText,
-	Bot,
-	Brain,
-	CircleUser,
-	Earth,
-	ImageIcon,
-	ListChecks,
-	ScanEye,
-	UserKey,
-} from "lucide-react";
-import dynamic from "next/dynamic";
-import { useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import type React from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-
-const GeneralSettingsManager = dynamic(
-	() =>
-		import("@/components/settings/general-settings-manager").then((m) => ({
-			default: m.GeneralSettingsManager,
-		})),
-	{ ssr: false }
-);
-const AgentModelManager = dynamic(
-	() =>
-		import("@/components/settings/agent-model-manager").then((m) => ({
-			default: m.AgentModelManager,
-		})),
-	{ ssr: false }
-);
-const LLMRoleManager = dynamic(
-	() =>
-		import("@/components/settings/llm-role-manager").then((m) => ({ default: m.LLMRoleManager })),
-	{ ssr: false }
-);
-const ImageModelManager = dynamic(
-	() =>
-		import("@/components/settings/image-model-manager").then((m) => ({
-			default: m.ImageModelManager,
-		})),
-	{ ssr: false }
-);
-const VisionModelManager = dynamic(
-	() =>
-		import("@/components/settings/vision-model-manager").then((m) => ({
-			default: m.VisionModelManager,
-		})),
-	{ ssr: false }
-);
-const RolesManager = dynamic(
-	() => import("@/components/settings/roles-manager").then((m) => ({ default: m.RolesManager })),
-	{ ssr: false }
-);
-const PromptConfigManager = dynamic(
-	() =>
-		import("@/components/settings/prompt-config-manager").then((m) => ({
-			default: m.PromptConfigManager,
-		})),
-	{ ssr: false }
-);
-const PublicChatSnapshotsManager = dynamic(
-	() =>
-		import("@/components/public-chat-snapshots/public-chat-snapshots-manager").then((m) => ({
-			default: m.PublicChatSnapshotsManager,
-		})),
-	{ ssr: false }
-);
-const TeamMemoryManager = dynamic(
-	() =>
-		import("@/components/settings/team-memory-manager").then((m) => ({
-			default: m.TeamMemoryManager,
-		})),
-	{ ssr: false }
-);
-
-export type SearchSpaceSettingsTab =
-	| "general"
-	| "roles"
-	| "models"
-	| "image-models"
-	| "vision-models"
-	| "team-roles"
-	| "prompts"
-	| "team-memory"
-	| "public-links";
-
-interface SearchSpaceSettingsPanelProps {
-	searchSpaceId: string;
-	initialTab?: SearchSpaceSettingsTab;
-}
-
-export function SearchSpaceSettingsPanel({
-	searchSpaceId,
-	initialTab = "general",
-}: SearchSpaceSettingsPanelProps) {
-	const t = useTranslations("searchSpaceSettings");
-	const router = useRouter();
-	const numericSearchSpaceId = Number(searchSpaceId);
-	const [activeTab, setActiveTab] = useState<SearchSpaceSettingsTab>(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: "general", label: t("nav_general"), icon: <CircleUser className="h-4 w-4" /> },
-			{ value: "roles", label: t("nav_role_assignments"), icon: <ListChecks className="h-4 w-4" /> },
-			{ value: "models", label: t("nav_agent_models"), icon: <Bot className="h-4 w-4" /> },
-			{
-				value: "image-models",
-				label: t("nav_image_models"),
-				icon: <ImageIcon className="h-4 w-4" />,
-			},
-			{
-				value: "vision-models",
-				label: t("nav_vision_models"),
-				icon: <ScanEye className="h-4 w-4" />,
-			},
-			{ value: "team-roles", label: t("nav_team_roles"), icon: <UserKey className="h-4 w-4" /> },
-			{
-				value: "prompts",
-				label: t("nav_system_instructions"),
-				icon: <BookText className="h-4 w-4" />,
-			},
-			{
-				value: "team-memory",
-				label: "Team Memory",
-				icon: <Brain className="h-4 w-4" />,
-			},
-			{ value: "public-links", label: t("nav_public_links"), icon: <Earth className="h-4 w-4" /> },
-		],
-		[t]
-	);
-
-	const selectedTab = navItems.some((item) => item.value === activeTab) ? activeTab : "general";
-	const selectedLabel = navItems.find((item) => item.value === selectedTab)?.label ?? t("title");
-
-	const handleItemChange = (tab: SearchSpaceSettingsTab) => {
-		setActiveTab(tab);
-		const suffix = tab === "general" ? "" : `?tab=${tab}`;
-		router.replace(`/dashboard/${searchSpaceId}/search-space-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-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) => (
-						<Button
-							key={item.value}
-							type="button"
-							variant="ghost"
-							onClick={() => handleItemChange(item.value as SearchSpaceSettingsTab)}
-							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 SearchSpaceSettingsTab)}
-								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 === "general" && (
-						<GeneralSettingsManager searchSpaceId={numericSearchSpaceId} />
-					)}
-					{selectedTab === "models" && <AgentModelManager searchSpaceId={numericSearchSpaceId} />}
-					{selectedTab === "roles" && (
-						<LLMRoleManager key={searchSpaceId} searchSpaceId={numericSearchSpaceId} />
-					)}
-					{selectedTab === "image-models" && (
-						<ImageModelManager searchSpaceId={numericSearchSpaceId} />
-					)}
-					{selectedTab === "vision-models" && (
-						<VisionModelManager searchSpaceId={numericSearchSpaceId} />
-					)}
-					{selectedTab === "team-roles" && <RolesManager searchSpaceId={numericSearchSpaceId} />}
-					{selectedTab === "prompts" && (
-						<PromptConfigManager searchSpaceId={numericSearchSpaceId} />
-					)}
-					{selectedTab === "team-memory" && (
-						<TeamMemoryManager searchSpaceId={numericSearchSpaceId} />
-					)}
-					{selectedTab === "public-links" && (
-						<PublicChatSnapshotsManager searchSpaceId={numericSearchSpaceId} />
-					)}
-				</div>
-			</div>
-		</section>
-	);
-}

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

@@ -1,271 +0,0 @@
-"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 bg-border" />
-				</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>
-	);
-}