feat: add TeamPage component and remove TeamDialog for improved team management interface

surfsense_web/app/dashboard/[search_space_id]/team/page.tsx

@@ -0,0 +1,15 @@
+import { TeamContent } from "./team-content";
+
+export default async function TeamPage({
+	params,
+}: {
+	params: Promise<{ search_space_id: string }>;
+}) {
+	const { search_space_id } = await params;
+
+	return (
+		<div className="w-full select-none space-y-6">
+			<TeamContent searchSpaceId={Number(search_space_id)} />
+		</div>
+	);
+}

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

@@ -307,9 +307,9 @@ export function AgentPermissionsContent() {
 									<SelectValue />
 								</SelectTrigger>
 								<SelectContent>
-									<SelectItem value="allow">Allow — run without asking</SelectItem>
+									<SelectItem value="allow">Allow (run without asking)</SelectItem>
-									<SelectItem value="ask">Ask — pause for approval</SelectItem>
+									<SelectItem value="ask">Ask (pause for approval)</SelectItem>
-									<SelectItem value="deny">Deny — block silently</SelectItem>
+									<SelectItem value="deny">Deny (block silently)</SelectItem>
 								</SelectContent>
 							</Select>
 							<p className="text-[11px] text-muted-foreground">

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

@@ -285,8 +285,8 @@ export function AgentStatusContent() {
 					</AlertTitle>
 					<AlertDescription>
 						<p>
-							Showing a read-only mirror of the backend's <code>AgentFeatureFlags</code>. Flip an env
+							Showing a read-only mirror of the backend's <code>AgentFeatureFlags</code>. Flip an
-							var and restart the backend to change a value.
+							env var and restart the backend to change a value.
 						</p>
 					</AlertDescription>
 				</Alert>

surfsense_web/atoms/layout/dialogs.atom.ts

@@ -1,5 +1,3 @@
 import { atom } from "jotai";
 
-export const teamDialogAtom = atom<boolean>(false);
-
 export const announcementsDialogAtom = atom<boolean>(false);

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -11,7 +11,7 @@ import { toast } from "sonner";
 import { currentThreadAtom, resetCurrentThreadAtom } from "@/atoms/chat/current-thread.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
 import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
-import { announcementsDialogAtom, teamDialogAtom } from "@/atoms/layout/dialogs.atom";
+import { announcementsDialogAtom } from "@/atoms/layout/dialogs.atom";
 import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { deleteSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
 import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
@@ -19,7 +19,6 @@ import { removeChatTabAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { ActionLogDialog } from "@/components/agent-action-log/action-log-dialog";
 import { AnnouncementsDialog } from "@/components/announcements/AnnouncementsDialog";
-import { TeamDialog } from "@/components/settings/team-dialog";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -375,7 +374,6 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		setIsCreateSearchSpaceDialogOpen(true);
 	}, []);
 
-	const setTeamDialogOpen = useSetAtom(teamDialogAtom);
 	const setAnnouncementsDialog = useSetAtom(announcementsDialogAtom);
 
 	const handleUserSettings = useCallback(() => {
@@ -566,8 +564,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	}, [router, searchSpaceId]);
 
 	const handleManageMembers = useCallback(() => {
-		setTeamDialogOpen(true);
+		router.push(`/dashboard/${searchSpaceId}/team`);
-	}, [setTeamDialogOpen]);
+	}, [router, searchSpaceId]);
 
 	const handleLogout = useCallback(async () => {
 		try {
@@ -661,11 +659,13 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	const isChatPage = pathname?.includes("/new-chat") ?? false;
 	const isUserSettingsPage = pathname?.includes("/user-settings") === true;
 	const isSearchSpaceSettingsPage = pathname?.includes("/search-space-settings") === true;
+	const isTeamPage = pathname?.endsWith("/team") === true;
 	const useWorkspacePanel =
 		pathname?.endsWith("/buy-more") === true ||
 		pathname?.endsWith("/more-pages") === true ||
 		isUserSettingsPage ||
-		isSearchSpaceSettingsPage;
+		isSearchSpaceSettingsPage ||
+		isTeamPage;
 
 	return (
 		<>
@@ -705,12 +705,12 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				isChatPage={isChatPage}
 				useWorkspacePanel={useWorkspacePanel}
 				workspacePanelViewportClassName={
-					isUserSettingsPage || isSearchSpaceSettingsPage
+					isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage
 						? "items-start justify-center px-6 py-8 md:px-10 md:py-10"
 						: undefined
 				}
 				workspacePanelContentClassName={
-					isUserSettingsPage || isSearchSpaceSettingsPage ? "max-w-5xl" : undefined
+					isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage ? "max-w-5xl" : undefined
 				}
 				isLoadingChats={isLoadingThreads}
 				activeSlideoutPanel={activeSlideoutPanel}
@@ -891,7 +891,6 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				onOpenChange={setIsCreateSearchSpaceDialogOpen}
 			/>
 
-			<TeamDialog searchSpaceId={Number(searchSpaceId)} />
 			<AnnouncementsDialog />
 
 			{/* Agent action log + revert dialog */}

surfsense_web/components/settings/team-dialog.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import { useAtom } from "jotai";
-import { useTranslations } from "next-intl";
-import { TeamContent } from "@/app/dashboard/[search_space_id]/team/team-content";
-import { teamDialogAtom } from "@/atoms/layout/dialogs.atom";
-import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
-
-interface TeamDialogProps {
-	searchSpaceId: number;
-}
-
-export function TeamDialog({ searchSpaceId }: TeamDialogProps) {
-	const t = useTranslations("sidebar");
-	const [open, setOpen] = useAtom(teamDialogAtom);
-
-	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogContent
-				className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col p-0 gap-0 overflow-hidden [--card:var(--popover)]"
-				onOpenAutoFocus={(e) => e.preventDefault()}
-			>
-				<DialogTitle className="sr-only">{t("manage_members")}</DialogTitle>
-				<div className="flex-1 overflow-y-auto overflow-x-hidden">
-					<div className="px-6 md:px-8 py-6 min-w-0">
-						<TeamContent searchSpaceId={searchSpaceId} />
-					</div>
-				</div>
-			</DialogContent>
-		</Dialog>
-	);
-}