refactor: implement SearchSpaceSettingsPage and SearchSpaceSettingsPanel components, replacing the previous settings dialog and enhancing tab navigation for search space settings

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

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

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue } from "jotai";
 import {
 	Calendar,
 	Check,
@@ -20,6 +20,7 @@ import {
 	UserPlus,
 	Users,
 } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
@@ -31,7 +32,6 @@ import {
 	updateMemberMutationAtom,
 } from "@/atoms/members/members-mutation.atoms";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
-import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -346,6 +346,7 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 						{owners.map((member) => (
 							<MemberRow
 								key={`member-${member.id}`}
+								searchSpaceId={searchSpaceId}
 								member={member}
 								roles={roles}
 								canManageRoles={canManageRoles}
@@ -357,6 +358,7 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 						{paginatedMembers.map((member) => (
 							<MemberRow
 								key={`member-${member.id}`}
+								searchSpaceId={searchSpaceId}
 								member={member}
 								roles={roles}
 								canManageRoles={canManageRoles}
@@ -433,6 +435,7 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 }
 
 function MemberRow({
+	searchSpaceId,
 	member,
 	roles,
 	canManageRoles,
@@ -440,6 +443,7 @@ function MemberRow({
 	onUpdateRole,
 	onRemoveMember,
 }: {
+	searchSpaceId: number;
 	member: Membership;
 	roles: Role[];
 	canManageRoles: boolean;
@@ -447,7 +451,7 @@ function MemberRow({
 	onUpdateRole: (membershipId: number, roleId: number | null) => Promise<Membership>;
 	onRemoveMember: (membershipId: number) => Promise<boolean>;
 }) {
-	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
+	const router = useRouter();
 	const initials = getAvatarInitials(member);
 	const displayName = member.user_display_name || member.user_email || "Unknown";
 	const roleName = member.is_owner ? "Owner" : member.role?.name || "No role";
@@ -541,10 +545,7 @@ function MemberRow({
 							<DropdownMenuSeparator className="dark:bg-white/5" />
 							<DropdownMenuItem
 								onClick={() =>
-									setSearchSpaceSettingsDialog({
-										open: true,
-										initialTab: "team-roles",
-									})
+									router.push(`/dashboard/${searchSpaceId}/search-space-settings?tab=team-roles`)
 								}
 							>
 								Manage Roles