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