feat: implement team management dialog and refactor team page structure

- Introduced `TeamDialog` component to manage team members within a modal.
- Created `TeamContent` component to encapsulate team management logic and UI.
- Refactored `TeamManagementPage` to utilize the new `TeamContent` component, improving code organization.
- Added `teamDialogAtom` for managing the open state of the team dialog.
- Updated `LayoutDataProvider` to integrate the new team dialog functionality.

surfsense_web/components/settings/team-dialog.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useAtom } from "jotai";
+import { useTranslations } from "next-intl";
+import { teamDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { TeamContent } from "@/app/dashboard/[search_space_id]/team/team-content";
+
+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(--background)] dark:[--card:oklch(0.205_0_0)] dark:[--background:oklch(0.205_0_0)]"
+				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>
+	);
+}