From 9f08f7c9c279ff60173feb57ecd0cf317f683c20 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 14:26:56 +0530
Subject: [PATCH 01/18] feat: add team roles management feature with UI
 components and localization support

---
 .../[search_space_id]/settings/page.tsx       |   11 +
 .../dashboard/[search_space_id]/team/page.tsx | 2316 +++--------------
 .../components/settings/roles-manager.tsx     | 1396 ++++++++++
 surfsense_web/messages/en.json                |    2 +
 surfsense_web/messages/es.json                |    2 +
 surfsense_web/messages/hi.json                |    2 +
 surfsense_web/messages/pt.json                |    2 +
 surfsense_web/messages/zh.json                |    2 +
 8 files changed, 1767 insertions(+), 1966 deletions(-)
 create mode 100644 surfsense_web/components/settings/roles-manager.tsx

diff --git a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
index d6319c46a..36d0c5753 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
@@ -12,6 +12,7 @@ import {
 	Menu,
 	MessageSquare,
 	Settings,
+	Shield,
 	X,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -24,6 +25,7 @@ import { ImageModelManager } from "@/components/settings/image-model-manager";
 import { LLMRoleManager } from "@/components/settings/llm-role-manager";
 import { ModelConfigManager } from "@/components/settings/model-config-manager";
 import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
+import { RolesManager } from "@/components/settings/roles-manager";
 import { Button } from "@/components/ui/button";
 import { trackSettingsViewed } from "@/lib/posthog/events";
 import { cn } from "@/lib/utils";
@@ -72,6 +74,12 @@ const settingsNavItems: SettingsNavItem[] = [
 		descriptionKey: "nav_public_links_desc",
 		icon: Globe,
 	},
+	{
+		id: "team-roles",
+		labelKey: "nav_team_roles",
+		descriptionKey: "nav_team_roles_desc",
+		icon: Shield,
+	},
 ];
 
 function SettingsSidebar({
@@ -298,6 +306,9 @@ function SettingsContent({
 							{activeSection === "public-links" && (
 								<PublicChatSnapshotsManager searchSpaceId={searchSpaceId} />
 							)}
+							{activeSection === "team-roles" && (
+								<RolesManager searchSpaceId={searchSpaceId} />
+							)}
 						</motion.div>
 					</AnimatePresence>
 				</div>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 55b511957..a9213654a 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -3,31 +3,14 @@
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import {
-	Bot,
 	Calendar,
 	Check,
+	ChevronDown,
 	Clock,
 	Copy,
 	Crown,
-	Edit2,
-	FileText,
-	Globe,
 	Hash,
-	Link2,
-	LinkIcon,
-	Logs,
-	type LucideIcon,
-	MessageCircle,
-	MessageSquare,
-	Mic,
-	MoreHorizontal,
-	Plug,
-	Plus,
-	RefreshCw,
-	Search,
-	Settings,
 	Shield,
-	ShieldCheck,
 	Trash2,
 	UserMinus,
 	UserPlus,
@@ -47,12 +30,6 @@ import {
 	updateMemberMutationAtom,
 } from "@/atoms/members/members-mutation.atoms";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
-import { permissionsAtom } from "@/atoms/permissions/permissions-query.atoms";
-import {
-	createRoleMutationAtom,
-	deleteRoleMutationAtom,
-	updateRoleMutationAtom,
-} from "@/atoms/roles/roles-mutation.atoms";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -64,11 +41,8 @@ import {
 	AlertDialogTitle,
 	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Calendar as CalendarComponent } from "@/components/ui/calendar";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -88,7 +62,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
 	Select,
 	SelectContent,
@@ -105,7 +78,6 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type {
 	CreateInviteRequest,
 	DeleteInviteRequest,
@@ -116,46 +88,64 @@ import type {
 	Membership,
 	UpdateMembershipRequest,
 } from "@/contracts/types/members.types";
-import type { PermissionInfo } from "@/contracts/types/permissions.types";
-import type {
-	CreateRoleRequest,
-	DeleteRoleRequest,
-	Role,
-	UpdateRoleRequest,
-} from "@/contracts/types/roles.types";
+import type { Role } from "@/contracts/types/roles.types";
 import { invitesApiService } from "@/lib/apis/invites-api.service";
 import { rolesApiService } from "@/lib/apis/roles-api.service";
+import { formatRelativeDate } from "@/lib/format-date";
 import { trackSearchSpaceInviteSent, trackSearchSpaceUsersViewed } from "@/lib/posthog/events";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { cn } from "@/lib/utils";
 
-// Animation variants
-const fadeInUp = {
-	hidden: { opacity: 0, y: 20 },
-	visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" as const } },
-};
+const AVATAR_COLORS = [
+	"bg-amber-600",
+	"bg-blue-600",
+	"bg-emerald-600",
+	"bg-violet-600",
+	"bg-rose-600",
+	"bg-cyan-600",
+	"bg-orange-600",
+	"bg-teal-600",
+	"bg-pink-600",
+	"bg-indigo-600",
+];
 
-const staggerContainer = {
-	hidden: { opacity: 0 },
-	visible: {
-		opacity: 1,
-		transition: { staggerChildren: 0.1 },
-	},
-};
+function getAvatarColor(identifier: string): string {
+	let hash = 0;
+	for (let i = 0; i < identifier.length; i++) {
+		hash = identifier.charCodeAt(i) + ((hash << 5) - hash);
+	}
+	return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
 
-const cardVariants = {
-	hidden: { opacity: 0, scale: 0.95 },
-	visible: {
-		opacity: 1,
-		scale: 1,
-		transition: { type: "spring" as const, stiffness: 300, damping: 30 },
-	},
-};
+function getAvatarInitials(member: Membership): string {
+	if (member.user_display_name) {
+		const parts = member.user_display_name.trim().split(/\s+/);
+		if (parts.length >= 2) {
+			return (parts[0][0] + parts[1][0]).toUpperCase();
+		}
+		return member.user_display_name.slice(0, 2).toUpperCase();
+	}
+	if (member.user_email) {
+		const emailName = member.user_email.split("@")[0];
+		return emailName.slice(0, 2).toUpperCase();
+	}
+	return "U";
+}
+
+function getInviteInitials(invite: Invite): string {
+	if (invite.name) {
+		const parts = invite.name.trim().split(/\s+/);
+		if (parts.length >= 2) {
+			return (parts[0][0] + parts[1][0]).toUpperCase();
+		}
+		return invite.name.slice(0, 2).toUpperCase();
+	}
+	return "IN";
+}
 
 export default function TeamManagementPage() {
 	const params = useParams();
 	const searchSpaceId = Number(params.search_space_id);
-	const [activeTab, setActiveTab] = useState("members");
 
 	const { data: access = null, isLoading: accessLoading } = useAtomValue(myAccessAtom);
 
@@ -171,14 +161,9 @@ export default function TeamManagementPage() {
 	const {
 		data: members = [],
 		isLoading: membersLoading,
-		refetch: fetchMembers,
 	} = useAtomValue(membersAtom);
 
-	const { mutateAsync: createRole } = useAtomValue(createRoleMutationAtom);
-	const { mutateAsync: updateRole } = useAtomValue(updateRoleMutationAtom);
-	const { mutateAsync: deleteRole } = useAtomValue(deleteRoleMutationAtom);
 	const { mutateAsync: updateMember } = useAtomValue(updateMemberMutationAtom);
-
 	const { mutateAsync: deleteMember } = useAtomValue(deleteMemberMutationAtom);
 	const { mutateAsync: createInvite } = useAtomValue(createInviteMutationAtom);
 	const { mutateAsync: revokeInvite } = useAtomValue(deleteInviteMutationAtom);
@@ -206,57 +191,12 @@ export default function TeamManagementPage() {
 		[createInvite, searchSpaceId]
 	);
 
-	const handleUpdateRole = useCallback(
-		async (
-			roleId: number,
-			data: {
-				name?: string;
-				description?: string | null;
-				permissions?: string[];
-				is_default?: boolean;
-			}
-		): Promise<Role> => {
-			const request: UpdateRoleRequest = {
-				search_space_id: searchSpaceId,
-				role_id: roleId,
-				data: data,
-			};
-			return await updateRole(request);
-		},
-		[updateRole, searchSpaceId]
-	);
-
-	const handleDeleteRole = useCallback(
-		async (roleId: number): Promise<boolean> => {
-			const request: DeleteRoleRequest = {
-				search_space_id: searchSpaceId,
-				role_id: roleId,
-			};
-			await deleteRole(request);
-			return true;
-		},
-		[deleteRole, searchSpaceId]
-	);
-
-	const handleCreateRole = useCallback(
-		async (roleData: CreateRoleRequest["data"]): Promise<Role> => {
-			const request: CreateRoleRequest = {
-				search_space_id: searchSpaceId,
-				data: roleData,
-			};
-			return await createRole(request);
-		},
-		[createRole, searchSpaceId]
-	);
-
 	const handleUpdateMember = useCallback(
 		async (membershipId: number, roleId: number | null): Promise<Membership> => {
 			const request: UpdateMembershipRequest = {
 				search_space_id: searchSpaceId,
 				membership_id: membershipId,
-				data: {
-					role_id: roleId,
-				},
+				data: { role_id: roleId },
 			};
 			return (await updateMember(request)) as Membership;
 		},
@@ -270,51 +210,33 @@ export default function TeamManagementPage() {
 				membership_id: membershipId,
 			};
 			await deleteMember(request);
-
 			return true;
 		},
 		[deleteMember, searchSpaceId]
 	);
+
 	const {
 		data: roles = [],
-		isLoading: rolesLoading,
-		refetch: fetchRoles,
 	} = useQuery({
 		queryKey: cacheKeys.roles.all(searchSpaceId.toString()),
 		queryFn: () => rolesApiService.getRoles({ search_space_id: searchSpaceId }),
 		enabled: !!searchSpaceId,
 	});
+
 	const {
 		data: invites = [],
-		isLoading: invitesLoading,
-		refetch: fetchInvites,
 	} = useQuery({
 		queryKey: cacheKeys.invites.all(searchSpaceId.toString()),
 		queryFn: () => invitesApiService.getInvites({ search_space_id: searchSpaceId }),
 		staleTime: 5 * 60 * 1000,
 	});
 
-	const { data: permissionsData } = useAtomValue(permissionsAtom);
-	const permissions = permissionsData?.permissions || [];
-	const groupedPermissions = useMemo(() => {
-		const groups: Record<string, typeof permissions> = {};
-		for (const perm of permissions) {
-			if (!groups[perm.category]) {
-				groups[perm.category] = [];
-			}
-			groups[perm.category].push(perm);
-		}
-		return groups;
-	}, [permissions]);
+	const activeInvites = useMemo(() => invites.filter((i) => i.is_active), [invites]);
 
 	const canInvite = hasPermission("members:invite");
+	const canManageRoles = hasPermission("members:manage_roles");
+	const canRemove = hasPermission("members:remove");
 
-	const handleRefresh = useCallback(async () => {
-		await Promise.all([fetchMembers(), fetchRoles(), fetchInvites()]);
-		toast.success("Team data refreshed");
-	}, [fetchMembers, fetchRoles, fetchInvites]);
-
-	// Track users per search space when team page is viewed
 	useEffect(() => {
 		if (members.length > 0 && !membersLoading) {
 			const ownerCount = members.filter((m) => m.is_owner).length;
@@ -322,7 +244,7 @@ export default function TeamManagementPage() {
 		}
 	}, [members, membersLoading, searchSpaceId]);
 
-	if (accessLoading) {
+	if (accessLoading || membersLoading) {
 		return (
 			<div className="flex items-center justify-center min-h-[60vh]">
 				<motion.div
@@ -339,1011 +261,333 @@ export default function TeamManagementPage() {
 
 	return (
 		<motion.div
-			initial="hidden"
-			animate="visible"
-			variants={staggerContainer}
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			transition={{ duration: 0.3 }}
 			className="min-h-screen bg-background"
 		>
-			<div className="container max-w-7xl mx-auto p-4 md:p-6 lg:p-8">
-				<motion.div variants={fadeInUp} className="space-y-8">
-					{/* Header */}
-					<div className="space-y-4">
-						<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-							<div className="flex items-start space-x-3 md:items-center md:space-x-4">
-								<div className="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 ring-1 ring-primary/10 shrink-0">
-									<Users className="h-5 w-5 md:h-6 md:w-6 text-primary" />
-								</div>
-								<div className="space-y-1 min-w-0">
-									<h1 className="text-2xl md:text-3xl font-bold tracking-tight bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text">
-										Team Management
-									</h1>
-									<p className="text-xs md:text-sm text-muted-foreground">
-										Manage members, roles, and invite links for your search space
-									</p>
-								</div>
-							</div>
-							<div className="flex items-center gap-2">
-								<Button
-									onClick={handleRefresh}
-									variant="outline"
-									size="sm"
-									className="gap-2 w-full md:w-auto"
-								>
-									<RefreshCw className="h-4 w-4" />
-									Refresh
-								</Button>
-							</div>
-						</div>
+			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
+				<div className="space-y-6">
+					{/* Header row: Invite button on left, member count on right */}
+					<div className="flex items-center justify-between">
+						{canInvite && (
+							<CreateInviteDialog
+								roles={roles}
+								onCreateInvite={handleCreateInvite}
+								searchSpaceId={searchSpaceId}
+							/>
+						)}
+						{!canInvite && <div />}
+						<p className="text-sm text-muted-foreground">
+							{members.length} {members.length === 1 ? "member" : "members"}
+						</p>
 					</div>
 
-					{/* Summary Cards */}
-					<motion.div variants={staggerContainer} className="grid grid-cols-1 md:grid-cols-3 gap-4">
-						<motion.div variants={cardVariants}>
-							<Card className="relative overflow-hidden border-none bg-gradient-to-br from-blue-500/10 via-blue-500/5 to-transparent">
-								<div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-3xl -mr-16 -mt-16" />
-								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-									<CardTitle className="text-sm font-medium">Total Members</CardTitle>
-									<Users className="h-5 w-5 text-blue-500" />
-								</CardHeader>
-								<CardContent>
-									<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">
-										{members.length}
-									</div>
-									<p className="text-xs text-muted-foreground mt-1">
-										{members.filter((m) => m.is_owner).length} owner
-										{members.filter((m) => m.is_owner).length !== 1 ? "s" : ""}
-									</p>
-								</CardContent>
-							</Card>
-						</motion.div>
-
-						<motion.div variants={cardVariants}>
-							<Card className="relative overflow-hidden border-none bg-gradient-to-br from-violet-500/10 via-violet-500/5 to-transparent">
-								<div className="absolute top-0 right-0 w-32 h-32 bg-violet-500/10 rounded-full blur-3xl -mr-16 -mt-16" />
-								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-									<CardTitle className="text-sm font-medium">Active Roles</CardTitle>
-									<Shield className="h-5 w-5 text-violet-500" />
-								</CardHeader>
-								<CardContent>
-									<div className="text-3xl font-bold text-violet-600 dark:text-violet-400">
-										{roles.length}
-									</div>
-									<p className="text-xs text-muted-foreground mt-1">
-										{roles.filter((r) => r.is_system_role).length} system roles
-									</p>
-								</CardContent>
-							</Card>
-						</motion.div>
-
-						<motion.div variants={cardVariants}>
-							<Card className="relative overflow-hidden border-none bg-gradient-to-br from-emerald-500/10 via-emerald-500/5 to-transparent">
-								<div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl -mr-16 -mt-16" />
-								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-									<CardTitle className="text-sm font-medium">Active Invites</CardTitle>
-									<Link2 className="h-5 w-5 text-emerald-500" />
-								</CardHeader>
-								<CardContent>
-									<div className="text-3xl font-bold text-emerald-600 dark:text-emerald-400">
-										{invites.filter((i) => i.is_active).length}
-									</div>
-									<p className="text-xs text-muted-foreground mt-1">
-										{invites.reduce((acc, i) => acc + i.uses_count, 0)} total uses
-									</p>
-								</CardContent>
-							</Card>
-						</motion.div>
-					</motion.div>
-
-					{/* Tabs Content */}
-					<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
-						<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-							<div className="overflow-x-auto pb-1 md:pb-0">
-								<TabsList className="bg-muted/50 p-1 w-full md:w-fit grid grid-cols-3 md:flex">
-									<TabsTrigger
-										value="members"
-										className="gap-1.5 md:gap-2 data-[state=active]:bg-background whitespace-nowrap w-full text-xs md:text-sm flex-1"
-									>
-										<Users className="h-4 w-4 hidden md:block" />
-										<span>Members</span>
-										<Badge variant="secondary" className="ml-1 text-xs">
-											{members.length}
-										</Badge>
-									</TabsTrigger>
-									<TabsTrigger
-										value="roles"
-										className="gap-1.5 md:gap-2 data-[state=active]:bg-background whitespace-nowrap w-full text-xs md:text-sm flex-1"
-									>
-										<Shield className="h-4 w-4 hidden md:block" />
-										<span>Roles</span>
-										<Badge variant="secondary" className="ml-1 text-xs">
-											{roles.length}
-										</Badge>
-									</TabsTrigger>
-									<TabsTrigger
-										value="invites"
-										className="gap-1.5 md:gap-2 data-[state=active]:bg-background whitespace-nowrap w-full text-xs md:text-sm flex-1"
-									>
-										<LinkIcon className="h-4 w-4 hidden md:block" />
-										<span>Invites</span>
-										<Badge variant="secondary" className="ml-1 text-xs">
-											{invites.filter((i) => i.is_active).length}
-										</Badge>
-									</TabsTrigger>
-								</TabsList>
-							</div>
-
-							{activeTab === "invites" && canInvite && (
-								<CreateInviteDialog
-									roles={roles}
-									onCreateInvite={handleCreateInvite}
-									searchSpaceId={searchSpaceId}
-									className="w-full md:w-auto"
-								/>
-							)}
-						</div>
-
-						<TabsContent value="members" className="space-y-4">
-							<MembersTab
-								members={members}
-								roles={roles}
-								loading={membersLoading}
-								onUpdateRole={handleUpdateMember}
-								onRemoveMember={handleRemoveMember}
-								canManageRoles={hasPermission("members:manage_roles")}
-								canRemove={hasPermission("members:remove")}
-							/>
-						</TabsContent>
-
-						<TabsContent value="roles" className="space-y-4">
-							<RolesTab
-								roles={roles}
-								groupedPermissions={groupedPermissions}
-								loading={rolesLoading}
-								onUpdateRole={handleUpdateRole}
-								onDeleteRole={handleDeleteRole}
-								onCreateRole={handleCreateRole}
-								canUpdate={hasPermission("roles:update")}
-								canDelete={hasPermission("roles:delete")}
-								canCreate={hasPermission("roles:create")}
-							/>
-						</TabsContent>
-
-						<TabsContent value="invites" className="space-y-4">
-							<InvitesTab
-								invites={invites}
-								loading={invitesLoading}
-								onRevokeInvite={handleRevokeInvite}
-								canRevoke={canInvite}
-							/>
-						</TabsContent>
-					</Tabs>
-				</motion.div>
+					{/* Members & Invites Table */}
+					<div className="rounded-xl border bg-card overflow-hidden">
+						<Table>
+							<TableHeader>
+								<TableRow className="bg-muted/30 hover:bg-muted/30">
+									<TableHead className="w-[40%] px-4 md:px-6 font-normal text-muted-foreground">
+										Name
+									</TableHead>
+									<TableHead className="hidden md:table-cell font-normal text-muted-foreground">
+										Last logged in
+									</TableHead>
+									<TableHead className="text-right px-4 md:px-6 font-normal text-muted-foreground">
+										Role
+									</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{members.map((member) => (
+									<MemberRow
+										key={`member-${member.id}`}
+										member={member}
+										roles={roles}
+										canManageRoles={canManageRoles}
+										canRemove={canRemove}
+										onUpdateRole={handleUpdateMember}
+										onRemoveMember={handleRemoveMember}
+									/>
+								))}
+								{activeInvites.map((invite) => (
+									<InviteRow
+										key={`invite-${invite.id}`}
+										invite={invite}
+										canRevoke={canInvite}
+										onRevokeInvite={handleRevokeInvite}
+									/>
+								))}
+								{members.length === 0 && activeInvites.length === 0 && (
+									<TableRow>
+										<TableCell colSpan={3} className="text-center py-12">
+											<div className="flex flex-col items-center gap-2">
+												<Users className="h-8 w-8 text-muted-foreground/50" />
+												<p className="text-muted-foreground">No members yet</p>
+											</div>
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					</div>
+				</div>
 			</div>
 		</motion.div>
 	);
 }
 
-// ============ Members Tab ============
+// ============ Member Row ============
 
-// Helper function to get avatar initials
-function getAvatarInitials(member: Membership): string {
-	// Try display name first
-	if (member.user_display_name) {
-		const parts = member.user_display_name.trim().split(/\s+/);
-		if (parts.length >= 2) {
-			return (parts[0][0] + parts[1][0]).toUpperCase();
-		}
-		return member.user_display_name.slice(0, 2).toUpperCase();
-	}
-	// Try email
-	if (member.user_email) {
-		const emailName = member.user_email.split("@")[0];
-		return emailName.slice(0, 2).toUpperCase();
-	}
-	// Fallback
-	return "U";
-}
-
-function MembersTab({
-	members,
+function MemberRow({
+	member,
 	roles,
-	loading,
-	onUpdateRole,
-	onRemoveMember,
 	canManageRoles,
 	canRemove,
+	onUpdateRole,
+	onRemoveMember,
 }: {
-	members: Membership[];
+	member: Membership;
 	roles: Role[];
-	loading: boolean;
-	onUpdateRole: (membershipId: number, roleId: number | null) => Promise<Membership>;
-	onRemoveMember: (membershipId: number) => Promise<boolean>;
 	canManageRoles: boolean;
 	canRemove: boolean;
+	onUpdateRole: (membershipId: number, roleId: number | null) => Promise<Membership>;
+	onRemoveMember: (membershipId: number) => Promise<boolean>;
 }) {
-	const [searchQuery, setSearchQuery] = useState("");
-
-	const filteredMembers = useMemo(() => {
-		if (!searchQuery) return members;
-		const query = searchQuery.toLowerCase();
-		return members.filter(
-			(m) =>
-				m.user_email?.toLowerCase().includes(query) || m.role?.name.toLowerCase().includes(query)
-		);
-	}, [members, searchQuery]);
-
-	if (loading) {
-		return (
-			<div className="flex items-center justify-center py-12">
-				<Spinner size="md" className="text-primary" />
-			</div>
-		);
-	}
+	const initials = getAvatarInitials(member);
+	const avatarColor = getAvatarColor(member.user_id);
+	const displayName = member.user_display_name || member.user_email || "Unknown";
+	const roleName = member.is_owner ? "Owner" : (member.role?.name || "No role");
+	const showActions = canManageRoles || canRemove;
 
 	return (
-		<motion.div
-			initial={{ opacity: 0, y: 10 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: -10 }}
-			className="space-y-4"
-		>
-			{/* Search */}
-			<div className="flex items-center gap-4">
-				<div className="relative flex-1 max-w-sm">
-					<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-					<Input
-						placeholder="Search members"
-						value={searchQuery}
-						onChange={(e) => setSearchQuery(e.target.value)}
-						className="pl-9"
-					/>
-				</div>
-			</div>
-
-			{/* Members List */}
-			<div className="rounded-lg border bg-card overflow-x-auto">
-				<Table>
-					<TableHeader>
-						<TableRow className="bg-muted/50">
-							<TableHead className="w-auto md:w-[300px] px-2 md:px-4">
-								<div className="flex items-center gap-2">
-									<Users className="h-4 w-4" />
-									Member
-								</div>
-							</TableHead>
-							<TableHead className="px-2 md:px-4">
-								<div className="flex items-center gap-2">
-									<Shield className="h-4 w-4" />
-									Role
-								</div>
-							</TableHead>
-							<TableHead className="hidden md:table-cell">
-								<div className="flex items-center gap-2">
-									<Calendar className="h-4 w-4" />
-									Joined
-								</div>
-							</TableHead>
-							<TableHead className="text-right">
-								<div className="flex items-center justify-end gap-2">
-									<Settings className="h-4 w-4" />
-									Actions
-								</div>
-							</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{filteredMembers.length === 0 ? (
-							<TableRow>
-								<TableCell colSpan={4} className="text-center py-12">
-									<div className="flex flex-col items-center gap-2">
-										<Users className="h-8 w-8 text-muted-foreground/50" />
-										<p className="text-muted-foreground">No members found</p>
-									</div>
-								</TableCell>
-							</TableRow>
+		<TableRow className="group hover:bg-muted/30">
+			{/* Name + Avatar */}
+			<TableCell className="py-3 px-4 md:px-6">
+				<div className="flex items-center gap-3">
+					<div className="relative shrink-0">
+						{member.user_avatar_url ? (
+							<Image
+								src={member.user_avatar_url}
+								alt={displayName}
+								width={40}
+								height={40}
+								className="h-10 w-10 rounded-full object-cover"
+							/>
 						) : (
-							filteredMembers.map((member, index) => (
-								<motion.tr
-									key={member.id}
-									initial={{ opacity: 0, y: 10 }}
-									animate={{ opacity: 1, y: 0 }}
-									transition={{ delay: index * 0.05 }}
-									className="group border-b transition-colors hover:bg-muted/50"
-								>
-									<TableCell className="py-2 px-2 md:py-4 md:px-4 align-middle">
-										<div className="flex items-center gap-1.5 md:gap-3">
-											<div className="relative">
-												{member.user_avatar_url ? (
-													<Image
-														src={member.user_avatar_url}
-														alt={member.user_display_name || member.user_email || "User"}
-														width={40}
-														height={40}
-														className="h-8 w-8 md:h-10 md:w-10 rounded-full object-cover"
-													/>
-												) : (
-													<div className="h-8 w-8 md:h-10 md:w-10 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center">
-														<span className="text-xs md:text-sm font-medium text-primary">
-															{getAvatarInitials(member)}
-														</span>
-													</div>
-												)}
-												{member.is_owner && (
-													<div className="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-amber-500 flex items-center justify-center">
-														<Crown className="h-3 w-3 text-white" />
-													</div>
-												)}
-											</div>
-											<div className="min-w-0">
-												<p className="font-medium text-xs md:text-sm truncate">
-													{member.user_display_name || member.user_email || "Unknown"}
-												</p>
-												{member.user_display_name && member.user_email && (
-													<p className="text-[10px] md:text-xs text-muted-foreground truncate">
-														{member.user_email}
-													</p>
-												)}
-												{member.is_owner && (
-													<Badge
-														variant="outline"
-														className="text-[10px] md:text-xs mt-0.5 md:mt-1 bg-amber-500/10 text-amber-600 border-amber-500/20 hidden md:inline-flex"
-													>
-														Owner
-													</Badge>
-												)}
-											</div>
-										</div>
-									</TableCell>
-									<TableCell className="py-2 px-2 md:py-4 md:px-4 align-middle">
-										{canManageRoles && !member.is_owner ? (
-											<Select
-												value={member.role_id?.toString() || "none"}
-												onValueChange={(value) =>
-													onUpdateRole(member.id, value === "none" ? null : Number(value))
-												}
-											>
-												<SelectTrigger className="w-full md:w-[180px] h-8 md:h-10 text-xs md:text-sm">
-													<SelectValue placeholder="Select role" />
-												</SelectTrigger>
-												<SelectContent>
-													<SelectItem value="none">No role</SelectItem>
-													{roles.map((role) => (
-														<SelectItem key={role.id} value={role.id.toString()}>
-															{role.name}
-														</SelectItem>
-													))}
-												</SelectContent>
-											</Select>
-										) : (
-											<Badge variant="secondary" className="text-[10px] md:text-xs py-0 md:py-0.5">
-												{member.role?.name || "No role"}
-											</Badge>
-										)}
-									</TableCell>
-									<TableCell className="hidden md:table-cell">
-										<span className="text-sm text-muted-foreground">
-											{new Date(member.joined_at).toLocaleDateString()}
-										</span>
-									</TableCell>
-									<TableCell className="text-right py-2 px-2 md:py-4 md:px-4 align-middle">
-										{canRemove && !member.is_owner && (
-											<AlertDialog>
-												<AlertDialogTrigger asChild>
-													<Button
-														variant="ghost"
-														size="sm"
-														className="text-destructive hover:text-destructive hover:bg-destructive/10"
-													>
-														<UserMinus className="h-4 w-4" />
-													</Button>
-												</AlertDialogTrigger>
-												<AlertDialogContent>
-													<AlertDialogHeader>
-														<AlertDialogTitle>Remove member?</AlertDialogTitle>
-														<AlertDialogDescription>
-															This will remove{" "}
-															<span className="font-medium">{member.user_email}</span> from this
-															search space. They will lose access to all resources.
-														</AlertDialogDescription>
-													</AlertDialogHeader>
-													<AlertDialogFooter>
-														<AlertDialogCancel>Cancel</AlertDialogCancel>
-														<AlertDialogAction
-															onClick={() => onRemoveMember(member.id)}
-															className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-														>
-															Remove
-														</AlertDialogAction>
-													</AlertDialogFooter>
-												</AlertDialogContent>
-											</AlertDialog>
-										)}
-									</TableCell>
-								</motion.tr>
-							))
-						)}
-					</TableBody>
-				</Table>
-			</div>
-		</motion.div>
-	);
-}
-
-// ============ Role Permissions Display ============
-
-// Unified category configuration used across all role-related components
-const CATEGORY_CONFIG: Record<
-	string,
-	{ label: string; icon: LucideIcon; description: string; order: number }
-> = {
-	documents: {
-		label: "Documents",
-		icon: FileText,
-		description: "Manage files, notes, and content",
-		order: 1,
-	},
-	chats: {
-		label: "AI Chats",
-		icon: MessageSquare,
-		description: "Create and manage AI conversations",
-		order: 2,
-	},
-	comments: {
-		label: "Comments",
-		icon: MessageCircle,
-		description: "Add annotations to documents",
-		order: 3,
-	},
-	llm_configs: {
-		label: "AI Models",
-		icon: Bot,
-		description: "Configure AI model settings",
-		order: 4,
-	},
-	podcasts: {
-		label: "Podcasts",
-		icon: Mic,
-		description: "Generate AI podcasts from content",
-		order: 5,
-	},
-	connectors: {
-		label: "Integrations",
-		icon: Plug,
-		description: "Connect external data sources",
-		order: 6,
-	},
-	logs: {
-		label: "Activity Logs",
-		icon: Logs,
-		description: "View and manage audit trail",
-		order: 7,
-	},
-	members: {
-		label: "Team Members",
-		icon: Users,
-		description: "Manage team membership",
-		order: 8,
-	},
-	roles: {
-		label: "Roles",
-		icon: Shield,
-		description: "Configure role permissions",
-		order: 9,
-	},
-	settings: {
-		label: "Settings",
-		icon: Settings,
-		description: "Manage search space settings",
-		order: 10,
-	},
-	public_sharing: {
-		label: "Public Chat Sharing",
-		icon: Globe,
-		description: "Share chats publicly via links",
-		order: 11,
-	},
-};
-
-const ACTION_LABELS: Record<string, string> = {
-	create: "Create",
-	read: "Read",
-	update: "Update",
-	delete: "Delete",
-	invite: "Invite",
-	view: "View",
-	remove: "Remove",
-	manage_roles: "Manage Roles",
-};
-
-function RolePermissionsDisplay({ permissions }: { permissions: string[] }) {
-	if (permissions.includes("*")) {
-		return (
-			<div className="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-amber-500/10 to-orange-500/10 border border-amber-500/20">
-				<div className="h-10 w-10 rounded-full bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center shrink-0">
-					<Crown className="h-5 w-5 text-white" />
-				</div>
-				<div className="flex-1 min-w-0">
-					<p className="text-sm font-semibold">Full Access</p>
-					<p className="text-xs text-muted-foreground">All permissions granted</p>
-				</div>
-			</div>
-		);
-	}
-
-	// Group permissions by category
-	const grouped: Record<string, string[]> = {};
-	for (const perm of permissions) {
-		const [category, action] = perm.split(":");
-		if (!grouped[category]) grouped[category] = [];
-		grouped[category].push(action);
-	}
-
-	// Sort categories by predefined order
-	const sortedCategories = Object.keys(grouped).sort((a, b) => {
-		const orderA = CATEGORY_CONFIG[a]?.order ?? 99;
-		const orderB = CATEGORY_CONFIG[b]?.order ?? 99;
-		return orderA - orderB;
-	});
-
-	const categoryCount = sortedCategories.length;
-
-	return (
-		<Dialog>
-			<DialogTrigger asChild>
-				<button
-					type="button"
-					className="w-full flex items-center justify-between p-3 rounded-lg border border-border/50 bg-muted/30 hover:bg-muted/50 transition-colors cursor-pointer text-left"
-				>
-					<div className="flex items-center gap-3">
-						<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
-							<ShieldCheck className="h-5 w-5 text-primary" />
-						</div>
-						<div>
-							<p className="text-sm font-semibold">{permissions.length} Permissions</p>
-							<p className="text-xs text-muted-foreground">
-								Across {categoryCount} {categoryCount === 1 ? "category" : "categories"}
-							</p>
-						</div>
-					</div>
-					<div className="text-xs text-muted-foreground">View details</div>
-				</button>
-			</DialogTrigger>
-			<DialogContent className="w-[92vw] max-w-md p-0 gap-0">
-				<DialogHeader className="p-4 md:p-5 border-b">
-					<DialogTitle className="flex items-center gap-2 text-base">
-						<ShieldCheck className="h-4 w-4 text-primary" />
-						Role Permissions
-					</DialogTitle>
-					<DialogDescription className="text-xs">
-						{permissions.length} permissions across {categoryCount} categories
-					</DialogDescription>
-				</DialogHeader>
-				<ScrollArea className="max-h-[55vh]">
-					<div className="divide-y divide-border/50">
-						{sortedCategories.map((category) => {
-							const actions = grouped[category];
-							const config = CATEGORY_CONFIG[category] || { label: category, icon: FileText };
-							const IconComponent = config.icon;
-							return (
-								<div
-									key={category}
-									className="flex items-center justify-between gap-3 px-4 md:px-5 py-2.5"
-								>
-									<div className="flex items-center gap-2 shrink-0">
-										<IconComponent className="h-3.5 w-3.5 text-muted-foreground" />
-										<span className="text-sm text-muted-foreground">{config.label}</span>
-									</div>
-									<div className="flex flex-wrap justify-end gap-1">
-										{actions.map((action) => (
-											<span
-												key={action}
-												className="px-1.5 py-0.5 rounded bg-primary/10 text-primary text-[11px] font-medium"
-											>
-												{ACTION_LABELS[action] || action.replace(/_/g, " ")}
-											</span>
-										))}
-									</div>
-								</div>
-							);
-						})}
-					</div>
-				</ScrollArea>
-			</DialogContent>
-		</Dialog>
-	);
-}
-
-// ============ Roles Tab ============
-
-function RolesTab({
-	roles,
-	groupedPermissions,
-	loading,
-	onUpdateRole,
-	onDeleteRole,
-	onCreateRole,
-	canUpdate,
-	canDelete,
-	canCreate,
-}: {
-	roles: Role[];
-	groupedPermissions: Record<string, PermissionWithDescription[]>;
-	loading: boolean;
-	onUpdateRole: (
-		roleId: number,
-		data: {
-			name?: string;
-			description?: string | null;
-			permissions?: string[];
-			is_default?: boolean;
-		}
-	) => Promise<Role>;
-	onDeleteRole: (roleId: number) => Promise<boolean>;
-	onCreateRole: (data: CreateRoleRequest["data"]) => Promise<Role>;
-	canUpdate: boolean;
-	canDelete: boolean;
-	canCreate: boolean;
-}) {
-	const [showCreateRole, setShowCreateRole] = useState(false);
-	const [editingRoleId, setEditingRoleId] = useState<number | null>(null);
-
-	if (loading) {
-		return (
-			<div className="flex items-center justify-center py-12">
-				<Spinner size="md" className="text-primary" />
-			</div>
-		);
-	}
-
-	return (
-		<motion.div
-			initial={{ opacity: 0, y: 10 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: -10 }}
-			className="space-y-6"
-		>
-			{/* Create Role Button / Section */}
-			{canCreate && !showCreateRole && (
-				<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex justify-end">
-					<Button onClick={() => setShowCreateRole(true)} className="gap-2">
-						<Plus className="h-4 w-4" />
-						Create Custom Role
-					</Button>
-				</motion.div>
-			)}
-
-			{/* Create Role Form */}
-			{showCreateRole && (
-				<CreateRoleSection
-					groupedPermissions={groupedPermissions}
-					onCreateRole={onCreateRole}
-					onCancel={() => setShowCreateRole(false)}
-				/>
-			)}
-
-			{/* Edit Role Form */}
-			{editingRoleId !== null &&
-				(() => {
-					const roleToEdit = roles.find((r) => r.id === editingRoleId);
-					if (!roleToEdit) return null;
-					return (
-						<EditRoleSection
-							role={roleToEdit}
-							groupedPermissions={groupedPermissions}
-							onUpdateRole={onUpdateRole}
-							onCancel={() => setEditingRoleId(null)}
-						/>
-					);
-				})()}
-
-			{/* Roles Grid */}
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-				{roles.map((role, index) => (
-					<motion.div
-						key={role.id}
-						initial={{ opacity: 0, scale: 0.95 }}
-						animate={{ opacity: 1, scale: 1 }}
-						transition={{ delay: index * 0.05 }}
-					>
-						<Card
-							className={cn(
-								"relative overflow-hidden transition-all hover:shadow-lg",
-								role.is_system_role && "ring-1 ring-primary/20"
-							)}
-						>
-							{role.is_system_role && (
-								<div className="absolute top-0 right-0 px-2 py-1 bg-primary/10 text-primary text-xs font-medium rounded-bl-lg">
-									System Role
-								</div>
-							)}
-							<CardHeader>
-								<div className="flex items-start justify-between">
-									<div className="flex items-center gap-3">
-										<div
-											className={cn(
-												"h-10 w-10 rounded-lg flex items-center justify-center",
-												role.name === "Owner" && "bg-amber-500/20",
-												role.name === "Editor" && "bg-blue-500/20",
-												role.name === "Viewer" && "bg-gray-500/20",
-												!["Owner", "Editor", "Viewer"].includes(role.name) && "bg-primary/20"
-											)}
-										>
-											<ShieldCheck
-												className={cn(
-													"h-5 w-5",
-													role.name === "Owner" && "text-amber-600",
-													role.name === "Editor" && "text-blue-600",
-													role.name === "Viewer" && "text-gray-600",
-													!["Owner", "Editor", "Viewer"].includes(role.name) && "text-primary"
-												)}
-											/>
-										</div>
-										<div>
-											<CardTitle className="text-lg">{role.name}</CardTitle>
-											{role.is_default && (
-												<Badge variant="outline" className="text-xs mt-1">
-													Default
-												</Badge>
-											)}
-										</div>
-									</div>
-									{!role.is_system_role && (
-										<DropdownMenu>
-											<DropdownMenuTrigger asChild>
-												<Button variant="ghost" size="icon" className="h-8 w-8">
-													<MoreHorizontal className="h-4 w-4" />
-												</Button>
-											</DropdownMenuTrigger>
-											<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
-												{canUpdate && (
-													<DropdownMenuItem onClick={() => setEditingRoleId(role.id)}>
-														<Edit2 className="h-4 w-4 mr-2" />
-														Edit Role
-													</DropdownMenuItem>
-												)}
-												{canDelete && (
-													<>
-														<DropdownMenuSeparator />
-														<AlertDialog>
-															<AlertDialogTrigger asChild>
-																<DropdownMenuItem
-																	className="text-destructive focus:text-destructive"
-																	onSelect={(e) => e.preventDefault()}
-																>
-																	<Trash2 className="h-4 w-4 mr-2" />
-																	Delete Role
-																</DropdownMenuItem>
-															</AlertDialogTrigger>
-															<AlertDialogContent>
-																<AlertDialogHeader>
-																	<AlertDialogTitle>Delete role?</AlertDialogTitle>
-																	<AlertDialogDescription>
-																		This will permanently delete the "{role.name}" role. Members
-																		with this role will lose their permissions.
-																	</AlertDialogDescription>
-																</AlertDialogHeader>
-																<AlertDialogFooter>
-																	<AlertDialogCancel>Cancel</AlertDialogCancel>
-																	<AlertDialogAction
-																		onClick={() => onDeleteRole(role.id)}
-																		className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-																	>
-																		Delete
-																	</AlertDialogAction>
-																</AlertDialogFooter>
-															</AlertDialogContent>
-														</AlertDialog>
-													</>
-												)}
-											</DropdownMenuContent>
-										</DropdownMenu>
-									)}
-								</div>
-								{role.description && (
-									<CardDescription className="mt-2">{role.description}</CardDescription>
+							<div
+								className={cn(
+									"h-10 w-10 rounded-full flex items-center justify-center text-white font-medium text-sm",
+									avatarColor
 								)}
-							</CardHeader>
-							<CardContent>
-								<RolePermissionsDisplay permissions={role.permissions} />
-							</CardContent>
-						</Card>
-					</motion.div>
-				))}
-			</div>
-		</motion.div>
+							>
+								{initials}
+							</div>
+						)}
+						{member.is_owner && (
+							<div className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-amber-500 flex items-center justify-center ring-2 ring-background">
+								<Crown className="h-2.5 w-2.5 text-white" />
+							</div>
+						)}
+					</div>
+					<div className="min-w-0">
+						<p className="font-medium text-sm truncate">{displayName}</p>
+						{member.user_display_name && member.user_email && (
+							<p className="text-xs text-muted-foreground truncate">{member.user_email}</p>
+						)}
+					</div>
+				</div>
+			</TableCell>
+
+			{/* Last logged in */}
+			<TableCell className="hidden md:table-cell py-3 text-sm text-muted-foreground">
+				{formatRelativeDate(member.joined_at)}
+			</TableCell>
+
+			{/* Role */}
+			<TableCell className="text-right py-3 px-4 md:px-6">
+				{showActions && !member.is_owner ? (
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<button
+								type="button"
+								className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+							>
+								{roleName}
+								<ChevronDown className="h-4 w-4" />
+							</button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
+							{canManageRoles && (
+								<>
+									{roles.map((role) => (
+										<DropdownMenuItem
+											key={role.id}
+											onClick={() => onUpdateRole(member.id, role.id)}
+											className={cn(
+												member.role_id === role.id && "bg-accent"
+											)}
+										>
+											{role.name}
+										</DropdownMenuItem>
+									))}
+									<DropdownMenuItem
+										onClick={() => onUpdateRole(member.id, null)}
+										className={cn(!member.role_id && "bg-accent")}
+									>
+										No role
+									</DropdownMenuItem>
+								</>
+							)}
+							{canManageRoles && canRemove && <DropdownMenuSeparator />}
+							{canRemove && (
+								<AlertDialog>
+									<AlertDialogTrigger asChild>
+										<DropdownMenuItem
+											className="text-destructive focus:text-destructive"
+											onSelect={(e) => e.preventDefault()}
+										>
+											<UserMinus className="h-4 w-4 mr-2" />
+											Remove member
+										</DropdownMenuItem>
+									</AlertDialogTrigger>
+									<AlertDialogContent>
+										<AlertDialogHeader>
+											<AlertDialogTitle>Remove member?</AlertDialogTitle>
+											<AlertDialogDescription>
+												This will remove{" "}
+												<span className="font-medium">{member.user_email}</span>{" "}
+												from this search space. They will lose access to all resources.
+											</AlertDialogDescription>
+										</AlertDialogHeader>
+										<AlertDialogFooter>
+											<AlertDialogCancel>Cancel</AlertDialogCancel>
+											<AlertDialogAction
+												onClick={() => onRemoveMember(member.id)}
+												className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+											>
+												Remove
+											</AlertDialogAction>
+										</AlertDialogFooter>
+									</AlertDialogContent>
+								</AlertDialog>
+							)}
+						</DropdownMenuContent>
+					</DropdownMenu>
+				) : (
+					<span className={cn("text-sm", member.is_owner ? "text-foreground" : "text-muted-foreground")}>
+						{roleName}
+						{!member.is_owner && <ChevronDown className="inline h-4 w-4 ml-1" />}
+					</span>
+				)}
+			</TableCell>
+		</TableRow>
 	);
 }
 
-// ============ Invites Tab ============
+// ============ Invite Row ============
 
-function InvitesTab({
-	invites,
-	loading,
-	onRevokeInvite,
+function InviteRow({
+	invite,
 	canRevoke,
+	onRevokeInvite,
 }: {
-	invites: Invite[];
-	loading: boolean;
-	onRevokeInvite: (inviteId: number) => Promise<boolean>;
+	invite: Invite;
 	canRevoke: boolean;
+	onRevokeInvite: (inviteId: number) => Promise<boolean>;
 }) {
-	const [copiedId, setCopiedId] = useState<number | null>(null);
-
-	const copyInviteLink = useCallback((invite: Invite) => {
-		const link = `${window.location.origin}/invite/${invite.invite_code}`;
-		navigator.clipboard.writeText(link);
-		setCopiedId(invite.id);
-		toast.success("Invite link copied to clipboard");
-		setTimeout(() => setCopiedId(null), 2000);
-	}, []);
-
-	if (loading) {
-		return (
-			<div className="flex items-center justify-center py-12">
-				<Spinner size="md" className="text-primary" />
-			</div>
-		);
-	}
-
-	if (invites.length === 0) {
-		return (
-			<motion.div
-				initial={{ opacity: 0, y: 10 }}
-				animate={{ opacity: 1, y: 0 }}
-				className="flex flex-col items-center justify-center py-16 text-center"
-			>
-				<div className="h-16 w-16 rounded-full bg-muted flex items-center justify-center mb-4">
-					<LinkIcon className="h-8 w-8 text-muted-foreground" />
-				</div>
-				<h3 className="text-lg font-medium mb-1">No invite links</h3>
-				<p className="text-muted-foreground max-w-sm">
-					Create an invite link to allow others to join your search space with specific roles.
-				</p>
-			</motion.div>
-		);
-	}
+	const initials = getInviteInitials(invite);
+	const avatarColor = getAvatarColor(invite.invite_code);
+	const displayName = invite.name || "Unnamed Invite";
 
 	return (
-		<motion.div
-			initial={{ opacity: 0, y: 10 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: -10 }}
-			className="space-y-4"
-		>
-			{invites.map((invite, index) => {
-				const isExpired = invite.expires_at && new Date(invite.expires_at) < new Date();
-				const isMaxedOut = invite.max_uses && invite.uses_count >= invite.max_uses;
-				const isInactive = !invite.is_active || isExpired || isMaxedOut;
-
-				return (
-					<motion.div
-						key={invite.id}
-						initial={{ opacity: 0, x: -20 }}
-						animate={{ opacity: 1, x: 0 }}
-						transition={{ delay: index * 0.05 }}
+		<TableRow className="group hover:bg-muted/30">
+			<TableCell className="py-3 px-4 md:px-6">
+				<div className="flex items-center gap-3">
+					<div
+						className={cn(
+							"h-10 w-10 rounded-full flex items-center justify-center text-white font-medium text-sm shrink-0 opacity-60",
+							avatarColor
+						)}
 					>
-						<Card
-							className={cn("relative overflow-hidden transition-all", isInactive && "opacity-60")}
-						>
-							<CardContent className="p-4">
-								<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-									<div className="flex items-start md:items-center gap-4 flex-1 min-w-0">
-										<div
-											className={cn(
-												"h-10 w-10 md:h-12 md:w-12 rounded-xl flex items-center justify-center shrink-0",
-												invite.is_active && !isExpired && !isMaxedOut
-													? "bg-emerald-500/20"
-													: "bg-muted"
-											)}
+						{initials}
+					</div>
+					<div className="min-w-0">
+						<p className="font-medium text-sm truncate text-muted-foreground">{displayName}</p>
+						{invite.role?.name && (
+							<p className="text-xs text-muted-foreground/70 truncate">
+								Will join as {invite.role.name}
+							</p>
+						)}
+					</div>
+				</div>
+			</TableCell>
+
+			<TableCell className="hidden md:table-cell py-3 text-sm text-muted-foreground">
+				Never
+			</TableCell>
+
+			<TableCell className="text-right py-3 px-4 md:px-6">
+				{canRevoke ? (
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<button
+								type="button"
+								className="inline-flex items-center gap-1.5 text-sm text-muted-foreground/60"
+							>
+								Invited
+								<ChevronDown className="h-4 w-4" />
+							</button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
+							<DropdownMenuItem
+								onClick={() => {
+									const link = `${window.location.origin}/invite/${invite.invite_code}`;
+									navigator.clipboard.writeText(link);
+									toast.success("Invite link copied");
+								}}
+							>
+								<Copy className="h-4 w-4 mr-2" />
+								Copy invite link
+							</DropdownMenuItem>
+							<DropdownMenuSeparator />
+							<AlertDialog>
+								<AlertDialogTrigger asChild>
+									<DropdownMenuItem
+										className="text-destructive focus:text-destructive"
+										onSelect={(e) => e.preventDefault()}
+									>
+										<Trash2 className="h-4 w-4 mr-2" />
+										Revoke invite
+									</DropdownMenuItem>
+								</AlertDialogTrigger>
+								<AlertDialogContent>
+									<AlertDialogHeader>
+										<AlertDialogTitle>Revoke invite?</AlertDialogTitle>
+										<AlertDialogDescription>
+											This will permanently delete this invite link. Anyone with this link
+											will no longer be able to join.
+										</AlertDialogDescription>
+									</AlertDialogHeader>
+									<AlertDialogFooter>
+										<AlertDialogCancel>Cancel</AlertDialogCancel>
+										<AlertDialogAction
+											onClick={() => onRevokeInvite(invite.id)}
+											className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 										>
-											<Link2
-												className={cn(
-													"h-5 w-5 md:h-6 md:w-6",
-													invite.is_active && !isExpired && !isMaxedOut
-														? "text-emerald-600"
-														: "text-muted-foreground"
-												)}
-											/>
-										</div>
-										<div className="flex-1 min-w-0">
-											<div className="flex items-center gap-2 flex-wrap">
-												<p className="font-medium truncate">{invite.name || "Unnamed Invite"}</p>
-												{isExpired && (
-													<Badge variant="destructive" className="text-xs">
-														Expired
-													</Badge>
-												)}
-												{isMaxedOut && (
-													<Badge variant="secondary" className="text-xs">
-														Maxed
-													</Badge>
-												)}
-												{!invite.is_active && !isExpired && !isMaxedOut && (
-													<Badge variant="secondary" className="text-xs">
-														Inactive
-													</Badge>
-												)}
-											</div>
-											<div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 mt-1 text-sm text-muted-foreground">
-												<span className="flex items-center gap-1">
-													<Shield className="h-3 w-3" />
-													{invite.role?.name || "Default role"}
-												</span>
-												<span className="flex items-center gap-1">
-													<Hash className="h-3 w-3" />
-													{invite.uses_count}
-													{invite.max_uses ? ` / ${invite.max_uses} uses` : " uses"}
-												</span>
-												{invite.expires_at && (
-													<span className="flex items-center gap-1">
-														<Clock className="h-3 w-3" />
-														{isExpired
-															? "Expired"
-															: `Exp: ${new Date(invite.expires_at).toLocaleDateString()}`}
-													</span>
-												)}
-											</div>
-										</div>
-									</div>
-									<div className="flex items-center gap-2 shrink-0 self-end md:self-auto">
-										<Button
-											variant="outline"
-											size="sm"
-											className="gap-2 flex-1 md:flex-none"
-											onClick={() => copyInviteLink(invite)}
-											disabled={Boolean(isInactive)}
-										>
-											{copiedId === invite.id ? (
-												<>
-													<Check className="h-4 w-4 text-emerald-500" />
-													<span className="md:inline">Copied!</span>
-												</>
-											) : (
-												<>
-													<Copy className="h-4 w-4" />
-													<span className="md:inline">Copy</span>
-												</>
-											)}
-										</Button>
-										{canRevoke && (
-											<AlertDialog>
-												<AlertDialogTrigger asChild>
-													<Button
-														variant="ghost"
-														size="icon"
-														className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
-													>
-														<Trash2 className="h-4 w-4" />
-													</Button>
-												</AlertDialogTrigger>
-												<AlertDialogContent>
-													<AlertDialogHeader>
-														<AlertDialogTitle>Revoke invite?</AlertDialogTitle>
-														<AlertDialogDescription>
-															This will permanently delete this invite link. Anyone with this link
-															will no longer be able to join.
-														</AlertDialogDescription>
-													</AlertDialogHeader>
-													<AlertDialogFooter>
-														<AlertDialogCancel>Cancel</AlertDialogCancel>
-														<AlertDialogAction
-															onClick={() => onRevokeInvite(invite.id)}
-															className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-														>
-															Revoke
-														</AlertDialogAction>
-													</AlertDialogFooter>
-												</AlertDialogContent>
-											</AlertDialog>
-										)}
-									</div>
-								</div>
-							</CardContent>
-						</Card>
-					</motion.div>
-				);
-			})}
-		</motion.div>
+											Revoke
+										</AlertDialogAction>
+									</AlertDialogFooter>
+								</AlertDialogContent>
+							</AlertDialog>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				) : (
+					<span className="text-sm text-muted-foreground/60">Invited</span>
+				)}
+			</TableCell>
+		</TableRow>
 	);
 }
 
@@ -1353,12 +597,10 @@ function CreateInviteDialog({
 	roles,
 	onCreateInvite,
 	searchSpaceId,
-	className,
 }: {
 	roles: Role[];
 	onCreateInvite: (data: CreateInviteRequest["data"]) => Promise<Invite>;
 	searchSpaceId: number;
-	className?: string;
 }) {
 	const [open, setOpen] = useState(false);
 	const [creating, setCreating] = useState(false);
@@ -1381,7 +623,6 @@ function CreateInviteDialog({
 			const invite = await onCreateInvite(data);
 			setCreatedInvite(invite);
 
-			// Track invite sent event
 			const roleName =
 				roleId && roleId !== "default"
 					? roles.find((r) => r.id.toString() === roleId)?.name
@@ -1419,9 +660,9 @@ function CreateInviteDialog({
 	return (
 		<Dialog open={open} onOpenChange={(v) => (v ? setOpen(true) : handleClose())}>
 			<DialogTrigger asChild>
-				<Button className={cn("gap-2", className)}>
+				<Button variant="outline" className="gap-2">
 					<UserPlus className="h-4 w-4" />
-					Create Invite
+					Invite members
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6">
@@ -1475,7 +716,7 @@ function CreateInviteDialog({
 				) : (
 					<>
 						<DialogHeader>
-							<DialogTitle>Create Invite Link</DialogTitle>
+							<DialogTitle>Invite Members</DialogTitle>
 							<DialogDescription>
 								Create a link to invite people to this search space.
 							</DialogDescription>
@@ -1572,860 +813,3 @@ function CreateInviteDialog({
 		</Dialog>
 	);
 }
-
-// ============ Create Role Section ============
-
-// Preset permission sets for quick role creation
-const ROLE_PRESETS = {
-	editor: {
-		name: "Editor",
-		description: "Can create, read, and update content, but cannot delete or manage team settings",
-		permissions: [
-			"documents:create",
-			"documents:read",
-			"documents:update",
-			"chats:create",
-			"chats:read",
-			"chats:update",
-			"comments:create",
-			"comments:read",
-			"llm_configs:create",
-			"llm_configs:read",
-			"llm_configs:update",
-			"podcasts:create",
-			"podcasts:read",
-			"podcasts:update",
-			"connectors:create",
-			"connectors:read",
-			"connectors:update",
-			"logs:read",
-			"members:invite",
-			"members:view",
-			"roles:read",
-			"settings:view",
-		],
-	},
-	viewer: {
-		name: "Viewer",
-		description: "Read-only access with ability to add comments",
-		permissions: [
-			"documents:read",
-			"chats:read",
-			"comments:create",
-			"comments:read",
-			"llm_configs:read",
-			"podcasts:read",
-			"connectors:read",
-			"logs:read",
-			"members:view",
-			"roles:read",
-			"settings:view",
-		],
-	},
-	contributor: {
-		name: "Contributor",
-		description: "Can add and manage their own content",
-		permissions: [
-			"documents:create",
-			"documents:read",
-			"documents:update",
-			"chats:create",
-			"chats:read",
-			"comments:create",
-			"comments:read",
-			"llm_configs:read",
-			"podcasts:read",
-			"connectors:read",
-			"logs:read",
-			"members:view",
-			"roles:read",
-			"settings:view",
-		],
-	},
-};
-
-// Action display labels
-const ACTION_DISPLAY: Record<string, { label: string; color: string }> = {
-	create: { label: "Create", color: "text-emerald-600 bg-emerald-500/10" },
-	read: { label: "View", color: "text-blue-600 bg-blue-500/10" },
-	update: { label: "Edit", color: "text-amber-600 bg-amber-500/10" },
-	delete: { label: "Delete", color: "text-red-600 bg-red-500/10" },
-	invite: { label: "Invite", color: "text-violet-600 bg-violet-500/10" },
-	view: { label: "View", color: "text-blue-600 bg-blue-500/10" },
-	remove: { label: "Remove", color: "text-red-600 bg-red-500/10" },
-	manage_roles: { label: "Manage Roles", color: "text-violet-600 bg-violet-500/10" },
-};
-
-// Use the imported PermissionInfo type which now includes description
-type PermissionWithDescription = PermissionInfo;
-
-function CreateRoleSection({
-	groupedPermissions,
-	onCreateRole,
-	onCancel,
-}: {
-	groupedPermissions: Record<string, PermissionWithDescription[]>;
-	onCreateRole: (data: CreateRoleRequest["data"]) => Promise<Role>;
-	onCancel: () => void;
-}) {
-	const [creating, setCreating] = useState(false);
-	const [name, setName] = useState("");
-	const [description, setDescription] = useState("");
-	const [selectedPermissions, setSelectedPermissions] = useState<string[]>([]);
-	const [isDefault, setIsDefault] = useState(false);
-	const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
-
-	// Sort categories by order
-	const sortedCategories = useMemo(() => {
-		return Object.keys(groupedPermissions).sort((a, b) => {
-			const orderA = CATEGORY_CONFIG[a]?.order ?? 99;
-			const orderB = CATEGORY_CONFIG[b]?.order ?? 99;
-			return orderA - orderB;
-		});
-	}, [groupedPermissions]);
-
-	const handleCreate = async () => {
-		if (!name.trim()) {
-			toast.error("Please enter a role name");
-			return;
-		}
-
-		setCreating(true);
-		try {
-			await onCreateRole({
-				name: name.trim(),
-				description: description.trim() || null,
-				permissions: selectedPermissions,
-				is_default: isDefault,
-			});
-			onCancel();
-		} catch (error) {
-			console.error("Failed to create role:", error);
-		} finally {
-			setCreating(false);
-		}
-	};
-
-	const togglePermission = useCallback((perm: string) => {
-		setSelectedPermissions((prev) =>
-			prev.includes(perm) ? prev.filter((p) => p !== perm) : [...prev, perm]
-		);
-	}, []);
-
-	const toggleCategory = useCallback(
-		(category: string) => {
-			const categoryPerms = groupedPermissions[category]?.map((p) => p.value) || [];
-			const allSelected = categoryPerms.every((p) => selectedPermissions.includes(p));
-
-			if (allSelected) {
-				setSelectedPermissions((prev) => prev.filter((p) => !categoryPerms.includes(p)));
-			} else {
-				setSelectedPermissions((prev) => [...new Set([...prev, ...categoryPerms])]);
-			}
-		},
-		[groupedPermissions, selectedPermissions]
-	);
-
-	const toggleCategoryExpanded = useCallback((category: string) => {
-		setExpandedCategories((prev) =>
-			prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category]
-		);
-	}, []);
-
-	const applyPreset = useCallback(
-		(presetKey: keyof typeof ROLE_PRESETS) => {
-			const preset = ROLE_PRESETS[presetKey];
-			setSelectedPermissions(preset.permissions);
-			if (!name.trim()) {
-				setName(preset.name);
-				setDescription(preset.description);
-			}
-			toast.success(`Applied ${preset.name} preset`);
-		},
-		[name]
-	);
-
-	const getCategoryStats = useCallback(
-		(category: string) => {
-			const perms = groupedPermissions[category] || [];
-			const selected = perms.filter((p) => selectedPermissions.includes(p.value)).length;
-			return { selected, total: perms.length, allSelected: selected === perms.length };
-		},
-		[groupedPermissions, selectedPermissions]
-	);
-
-	return (
-		<motion.div
-			initial={{ opacity: 0, y: -10 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: -10 }}
-			className="mb-6"
-		>
-			<Card className="border-primary/20 bg-gradient-to-br from-primary/5 via-background to-background">
-				<CardHeader className="pb-4">
-					<div className="flex items-center justify-between">
-						<div className="flex items-center gap-3">
-							<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center">
-								<Plus className="h-5 w-5 text-primary" />
-							</div>
-							<div>
-								<CardTitle className="text-lg">Create Custom Role</CardTitle>
-								<CardDescription className="text-sm">
-									Define permissions for a new role in this search space
-								</CardDescription>
-							</div>
-						</div>
-						<Button variant="ghost" size="icon" onClick={onCancel}>
-							<Trash2 className="h-4 w-4" />
-						</Button>
-					</div>
-				</CardHeader>
-				<CardContent className="space-y-6">
-					{/* Quick Start with Presets */}
-					<div className="space-y-3">
-						<Label className="text-sm font-medium">Quick Start with a Template</Label>
-						<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-							{Object.entries(ROLE_PRESETS).map(([key, preset]) => (
-								<button
-									key={key}
-									type="button"
-									onClick={() => applyPreset(key as keyof typeof ROLE_PRESETS)}
-									className={cn(
-										"p-4 rounded-lg border-2 text-left transition-all hover:border-primary/50 hover:bg-primary/5",
-										selectedPermissions.length > 0 &&
-											preset.permissions.every((p) => selectedPermissions.includes(p))
-											? "border-primary bg-primary/10"
-											: "border-border"
-									)}
-								>
-									<div className="flex items-center gap-2 mb-1">
-										<ShieldCheck
-											className={cn(
-												"h-4 w-4",
-												key === "editor" && "text-blue-600",
-												key === "viewer" && "text-gray-600",
-												key === "contributor" && "text-emerald-600"
-											)}
-										/>
-										<span className="font-medium text-sm">{preset.name}</span>
-									</div>
-									<p className="text-xs text-muted-foreground">{preset.description}</p>
-								</button>
-							))}
-						</div>
-					</div>
-
-					{/* Role Details */}
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div className="space-y-2">
-							<Label htmlFor="role-name">Role Name *</Label>
-							<Input
-								id="role-name"
-								placeholder="e.g., Content Manager"
-								value={name}
-								onChange={(e) => setName(e.target.value)}
-							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="role-description">Description</Label>
-							<Input
-								id="role-description"
-								placeholder="Brief description of this role"
-								value={description}
-								onChange={(e) => setDescription(e.target.value)}
-							/>
-						</div>
-					</div>
-
-					{/* Default Role Checkbox */}
-					<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-						<Checkbox
-							id="is-default"
-							checked={isDefault}
-							onCheckedChange={(checked) => setIsDefault(checked === true)}
-						/>
-						<div className="flex-1">
-							<Label htmlFor="is-default" className="cursor-pointer font-medium">
-								Set as default role
-							</Label>
-							<p className="text-xs text-muted-foreground">
-								New members without a specific role will be assigned this role
-							</p>
-						</div>
-					</div>
-
-					{/* Permissions Section */}
-					<div className="space-y-3">
-						<div className="flex items-center justify-between">
-							<Label className="text-sm font-medium">
-								Permissions ({selectedPermissions.length} selected)
-							</Label>
-							<Button
-								type="button"
-								variant="ghost"
-								size="sm"
-								className="text-xs h-7"
-								onClick={() =>
-									setExpandedCategories(
-										expandedCategories.length === sortedCategories.length ? [] : sortedCategories
-									)
-								}
-							>
-								{expandedCategories.length === sortedCategories.length
-									? "Collapse All"
-									: "Expand All"}
-							</Button>
-						</div>
-
-						<div className="space-y-2">
-							{sortedCategories.map((category) => {
-								const config = CATEGORY_CONFIG[category] || {
-									label: category,
-									icon: FileText,
-									description: "",
-									order: 99,
-								};
-								const IconComponent = config.icon;
-								const stats = getCategoryStats(category);
-								const isExpanded = expandedCategories.includes(category);
-								const perms = groupedPermissions[category] || [];
-
-								return (
-									<div key={category} className="rounded-lg border bg-card overflow-hidden">
-										{/* Category Header */}
-										<div
-											className={cn(
-												"flex items-center justify-between p-3 cursor-pointer hover:bg-muted/50 transition-colors",
-												stats.allSelected && "bg-primary/5"
-											)}
-											onClick={() => toggleCategoryExpanded(category)}
-											onKeyDown={(e) => {
-												if (e.key === "Enter" || e.key === " ") {
-													e.preventDefault();
-													toggleCategoryExpanded(category);
-												}
-											}}
-											tabIndex={0}
-											role="button"
-										>
-											<div className="flex items-center gap-3">
-												<div
-													className={cn(
-														"h-8 w-8 rounded-lg flex items-center justify-center",
-														stats.selected > 0 ? "bg-primary/10" : "bg-muted"
-													)}
-												>
-													<IconComponent
-														className={cn(
-															"h-4 w-4",
-															stats.selected > 0 ? "text-primary" : "text-muted-foreground"
-														)}
-													/>
-												</div>
-												<div>
-													<div className="flex items-center gap-2">
-														<span className="font-medium text-sm">{config.label}</span>
-														<Badge
-															variant={stats.selected > 0 ? "default" : "secondary"}
-															className="text-xs h-5"
-														>
-															{stats.selected}/{stats.total}
-														</Badge>
-													</div>
-													<p className="text-xs text-muted-foreground hidden md:block">
-														{config.description}
-													</p>
-												</div>
-											</div>
-											<div className="flex items-center gap-2">
-												<Checkbox
-													checked={stats.allSelected}
-													onCheckedChange={() => toggleCategory(category)}
-													onClick={(e) => e.stopPropagation()}
-													aria-label={`Select all ${config.label} permissions`}
-												/>
-												<motion.div
-													animate={{ rotate: isExpanded ? 180 : 0 }}
-													transition={{ duration: 0.2 }}
-												>
-													<svg
-														className="h-4 w-4 text-muted-foreground"
-														fill="none"
-														viewBox="0 0 24 24"
-														stroke="currentColor"
-													>
-														<path
-															strokeLinecap="round"
-															strokeLinejoin="round"
-															strokeWidth={2}
-															d="M19 9l-7 7-7-7"
-														/>
-													</svg>
-												</motion.div>
-											</div>
-										</div>
-
-										{/* Permissions List */}
-										{isExpanded && (
-											<motion.div
-												initial={{ height: 0, opacity: 0 }}
-												animate={{ height: "auto", opacity: 1 }}
-												exit={{ height: 0, opacity: 0 }}
-												transition={{ duration: 0.2 }}
-												className="border-t"
-											>
-												<div className="p-3 space-y-1">
-													{perms.map((perm) => {
-														const action = perm.value.split(":")[1];
-														const actionConfig = ACTION_DISPLAY[action] || {
-															label: action,
-															color: "text-gray-600 bg-gray-500/10",
-														};
-														const isSelected = selectedPermissions.includes(perm.value);
-
-														return (
-															<div
-																key={perm.value}
-																className={cn(
-																	"flex items-center justify-between p-2 rounded-md cursor-pointer transition-colors",
-																	isSelected
-																		? "bg-primary/10 hover:bg-primary/15"
-																		: "hover:bg-muted/50"
-																)}
-																onClick={() => togglePermission(perm.value)}
-																onKeyDown={(e) => {
-																	if (e.key === "Enter" || e.key === " ") {
-																		e.preventDefault();
-																		togglePermission(perm.value);
-																	}
-																}}
-																tabIndex={0}
-																role="checkbox"
-																aria-checked={isSelected}
-															>
-																<div className="flex items-center gap-3 flex-1 min-w-0">
-																	<Checkbox
-																		checked={isSelected}
-																		onCheckedChange={() => togglePermission(perm.value)}
-																		onClick={(e) => e.stopPropagation()}
-																	/>
-																	<div className="flex-1 min-w-0">
-																		<div className="flex items-center gap-2">
-																			<span
-																				className={cn(
-																					"text-xs font-medium px-2 py-0.5 rounded",
-																					actionConfig.color
-																				)}
-																			>
-																				{actionConfig.label}
-																			</span>
-																		</div>
-																		<p className="text-xs text-muted-foreground mt-0.5 truncate">
-																			{perm.description}
-																		</p>
-																	</div>
-																</div>
-															</div>
-														);
-													})}
-												</div>
-											</motion.div>
-										)}
-									</div>
-								);
-							})}
-						</div>
-					</div>
-
-					{/* Actions */}
-					<div className="flex items-center justify-end gap-3 pt-4 border-t">
-						<Button variant="outline" onClick={onCancel}>
-							Cancel
-						</Button>
-						<Button onClick={handleCreate} disabled={creating || !name.trim()}>
-							{creating ? (
-								<>
-									<Spinner size="sm" className="mr-2" />
-									Creating...
-								</>
-							) : (
-								<>
-									<Check className="h-4 w-4 mr-2" />
-									Create Role
-								</>
-							)}
-						</Button>
-					</div>
-				</CardContent>
-			</Card>
-		</motion.div>
-	);
-}
-
-function EditRoleSection({
-	role,
-	groupedPermissions,
-	onUpdateRole,
-	onCancel,
-}: {
-	role: Role;
-	groupedPermissions: Record<string, PermissionWithDescription[]>;
-	onUpdateRole: (
-		roleId: number,
-		data: {
-			name?: string;
-			description?: string | null;
-			permissions?: string[];
-			is_default?: boolean;
-		}
-	) => Promise<Role>;
-	onCancel: () => void;
-}) {
-	const [saving, setSaving] = useState(false);
-	const [name, setName] = useState(role.name);
-	const [description, setDescription] = useState(role.description || "");
-	const [selectedPermissions, setSelectedPermissions] = useState<string[]>(role.permissions);
-	const [isDefault, setIsDefault] = useState(role.is_default);
-	const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
-
-	// Sort categories by order
-	const sortedCategories = useMemo(() => {
-		return Object.keys(groupedPermissions).sort((a, b) => {
-			const orderA = CATEGORY_CONFIG[a]?.order ?? 99;
-			const orderB = CATEGORY_CONFIG[b]?.order ?? 99;
-			return orderA - orderB;
-		});
-	}, [groupedPermissions]);
-
-	const handleSave = async () => {
-		if (!name.trim()) {
-			toast.error("Please enter a role name");
-			return;
-		}
-
-		setSaving(true);
-		try {
-			await onUpdateRole(role.id, {
-				name: name.trim(),
-				description: description.trim() || null,
-				permissions: selectedPermissions,
-				is_default: isDefault,
-			});
-			toast.success("Role updated successfully");
-			onCancel();
-		} catch (error) {
-			console.error("Failed to update role:", error);
-			toast.error("Failed to update role");
-		} finally {
-			setSaving(false);
-		}
-	};
-
-	const togglePermission = useCallback((perm: string) => {
-		setSelectedPermissions((prev) =>
-			prev.includes(perm) ? prev.filter((p) => p !== perm) : [...prev, perm]
-		);
-	}, []);
-
-	const toggleCategory = useCallback(
-		(category: string) => {
-			const categoryPerms = groupedPermissions[category]?.map((p) => p.value) || [];
-			const allSelected = categoryPerms.every((p) => selectedPermissions.includes(p));
-
-			if (allSelected) {
-				setSelectedPermissions((prev) => prev.filter((p) => !categoryPerms.includes(p)));
-			} else {
-				setSelectedPermissions((prev) => [...new Set([...prev, ...categoryPerms])]);
-			}
-		},
-		[groupedPermissions, selectedPermissions]
-	);
-
-	const toggleCategoryExpanded = useCallback((category: string) => {
-		setExpandedCategories((prev) =>
-			prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category]
-		);
-	}, []);
-
-	const getCategoryStats = useCallback(
-		(category: string) => {
-			const perms = groupedPermissions[category] || [];
-			const selected = perms.filter((p) => selectedPermissions.includes(p.value)).length;
-			return { selected, total: perms.length, allSelected: selected === perms.length };
-		},
-		[groupedPermissions, selectedPermissions]
-	);
-
-	return (
-		<motion.div
-			initial={{ opacity: 0, y: -10 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: -10 }}
-			className="mb-6"
-		>
-			<Card className="border-primary/20 bg-gradient-to-br from-primary/5 via-background to-background">
-				<CardHeader className="pb-4">
-					<div className="flex items-center justify-between">
-						<div className="flex items-center gap-3">
-							<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center">
-								<Edit2 className="h-5 w-5 text-primary" />
-							</div>
-							<div>
-								<CardTitle className="text-lg">Edit Role</CardTitle>
-								<CardDescription className="text-sm">
-									Modify permissions for "{role.name}"
-								</CardDescription>
-							</div>
-						</div>
-						<Button variant="ghost" size="icon" onClick={onCancel}>
-							<Trash2 className="h-4 w-4" />
-						</Button>
-					</div>
-				</CardHeader>
-				<CardContent className="space-y-6">
-					{/* Role Details */}
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div className="space-y-2">
-							<Label htmlFor="edit-role-name">Role Name *</Label>
-							<Input
-								id="edit-role-name"
-								placeholder="e.g., Content Manager"
-								value={name}
-								onChange={(e) => setName(e.target.value)}
-							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="edit-role-description">Description</Label>
-							<Input
-								id="edit-role-description"
-								placeholder="Brief description of this role"
-								value={description}
-								onChange={(e) => setDescription(e.target.value)}
-							/>
-						</div>
-					</div>
-
-					{/* Default Role Checkbox */}
-					<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-						<Checkbox
-							id="edit-is-default"
-							checked={isDefault}
-							onCheckedChange={(checked) => setIsDefault(checked === true)}
-						/>
-						<div className="flex-1">
-							<Label htmlFor="edit-is-default" className="cursor-pointer font-medium">
-								Set as default role
-							</Label>
-							<p className="text-xs text-muted-foreground">
-								New members without a specific role will be assigned this role
-							</p>
-						</div>
-					</div>
-
-					{/* Permissions Section */}
-					<div className="space-y-3">
-						<div className="flex items-center justify-between">
-							<Label className="text-sm font-medium">
-								Permissions ({selectedPermissions.length} selected)
-							</Label>
-							<Button
-								type="button"
-								variant="ghost"
-								size="sm"
-								className="text-xs h-7"
-								onClick={() =>
-									setExpandedCategories(
-										expandedCategories.length === sortedCategories.length ? [] : sortedCategories
-									)
-								}
-							>
-								{expandedCategories.length === sortedCategories.length
-									? "Collapse All"
-									: "Expand All"}
-							</Button>
-						</div>
-
-						<div className="space-y-2">
-							{sortedCategories.map((category) => {
-								const config = CATEGORY_CONFIG[category] || {
-									label: category,
-									icon: FileText,
-									description: "",
-									order: 99,
-								};
-								const IconComponent = config.icon;
-								const stats = getCategoryStats(category);
-								const isExpanded = expandedCategories.includes(category);
-								const perms = groupedPermissions[category] || [];
-
-								return (
-									<div key={category} className="rounded-lg border bg-card overflow-hidden">
-										{/* Category Header */}
-										<div
-											className={cn(
-												"flex items-center justify-between p-3 cursor-pointer hover:bg-muted/50 transition-colors",
-												stats.allSelected && "bg-primary/5"
-											)}
-											onClick={() => toggleCategoryExpanded(category)}
-											onKeyDown={(e) => {
-												if (e.key === "Enter" || e.key === " ") {
-													e.preventDefault();
-													toggleCategoryExpanded(category);
-												}
-											}}
-											tabIndex={0}
-											role="button"
-										>
-											<div className="flex items-center gap-3">
-												<div
-													className={cn(
-														"h-8 w-8 rounded-lg flex items-center justify-center",
-														stats.selected > 0 ? "bg-primary/10" : "bg-muted"
-													)}
-												>
-													<IconComponent
-														className={cn(
-															"h-4 w-4",
-															stats.selected > 0 ? "text-primary" : "text-muted-foreground"
-														)}
-													/>
-												</div>
-												<div>
-													<div className="flex items-center gap-2">
-														<span className="font-medium text-sm">{config.label}</span>
-														<Badge
-															variant={stats.selected > 0 ? "default" : "secondary"}
-															className="text-xs h-5"
-														>
-															{stats.selected}/{stats.total}
-														</Badge>
-													</div>
-													<p className="text-xs text-muted-foreground hidden md:block">
-														{config.description}
-													</p>
-												</div>
-											</div>
-											<div className="flex items-center gap-2">
-												<Checkbox
-													checked={stats.allSelected}
-													onCheckedChange={() => toggleCategory(category)}
-													onClick={(e) => e.stopPropagation()}
-													aria-label={`Select all ${config.label} permissions`}
-												/>
-												<motion.div
-													animate={{ rotate: isExpanded ? 180 : 0 }}
-													transition={{ duration: 0.2 }}
-												>
-													<svg
-														className="h-4 w-4 text-muted-foreground"
-														fill="none"
-														viewBox="0 0 24 24"
-														stroke="currentColor"
-													>
-														<path
-															strokeLinecap="round"
-															strokeLinejoin="round"
-															strokeWidth={2}
-															d="M19 9l-7 7-7-7"
-														/>
-													</svg>
-												</motion.div>
-											</div>
-										</div>
-
-										{/* Permissions List */}
-										{isExpanded && (
-											<motion.div
-												initial={{ height: 0, opacity: 0 }}
-												animate={{ height: "auto", opacity: 1 }}
-												exit={{ height: 0, opacity: 0 }}
-												transition={{ duration: 0.2 }}
-												className="border-t"
-											>
-												<div className="p-3 space-y-1">
-													{perms.map((perm) => {
-														const action = perm.value.split(":")[1];
-														const actionConfig = ACTION_DISPLAY[action] || {
-															label: action,
-															color: "text-gray-600 bg-gray-500/10",
-														};
-														const isSelected = selectedPermissions.includes(perm.value);
-
-														return (
-															<div
-																key={perm.value}
-																className={cn(
-																	"flex items-center justify-between p-2 rounded-md cursor-pointer transition-colors",
-																	isSelected
-																		? "bg-primary/10 hover:bg-primary/15"
-																		: "hover:bg-muted/50"
-																)}
-																onClick={() => togglePermission(perm.value)}
-																onKeyDown={(e) => {
-																	if (e.key === "Enter" || e.key === " ") {
-																		e.preventDefault();
-																		togglePermission(perm.value);
-																	}
-																}}
-																tabIndex={0}
-																role="checkbox"
-																aria-checked={isSelected}
-															>
-																<div className="flex items-center gap-3 flex-1 min-w-0">
-																	<Checkbox
-																		checked={isSelected}
-																		onCheckedChange={() => togglePermission(perm.value)}
-																		onClick={(e) => e.stopPropagation()}
-																	/>
-																	<div className="flex-1 min-w-0">
-																		<div className="flex items-center gap-2">
-																			<span
-																				className={cn(
-																					"text-xs font-medium px-2 py-0.5 rounded",
-																					actionConfig.color
-																				)}
-																			>
-																				{actionConfig.label}
-																			</span>
-																		</div>
-																		<p className="text-xs text-muted-foreground mt-0.5 truncate">
-																			{perm.description}
-																		</p>
-																	</div>
-																</div>
-															</div>
-														);
-													})}
-												</div>
-											</motion.div>
-										)}
-									</div>
-								);
-							})}
-						</div>
-					</div>
-
-					{/* Actions */}
-					<div className="flex items-center justify-end gap-3 pt-4 border-t">
-						<Button variant="outline" onClick={onCancel}>
-							Cancel
-						</Button>
-						<Button onClick={handleSave} disabled={saving || !name.trim()}>
-							{saving ? (
-								<>
-									<Spinner size="sm" className="mr-2" />
-									Saving...
-								</>
-							) : (
-								<>
-									<Check className="h-4 w-4 mr-2" />
-									Save Changes
-								</>
-							)}
-						</Button>
-					</div>
-				</CardContent>
-			</Card>
-		</motion.div>
-	);
-}
diff --git a/surfsense_web/components/settings/roles-manager.tsx b/surfsense_web/components/settings/roles-manager.tsx
new file mode 100644
index 000000000..a10f243d2
--- /dev/null
+++ b/surfsense_web/components/settings/roles-manager.tsx
@@ -0,0 +1,1396 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import {
+	Bot,
+	Check,
+	Crown,
+	Edit2,
+	FileText,
+	Globe,
+	type LucideIcon,
+	MessageCircle,
+	MessageSquare,
+	Mic,
+	MoreHorizontal,
+	Plug,
+	Plus,
+	Logs,
+	Settings,
+	Shield,
+	ShieldCheck,
+	Trash2,
+	Users,
+} from "lucide-react";
+import { motion } from "motion/react";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import {
+	createRoleMutationAtom,
+	deleteRoleMutationAtom,
+	updateRoleMutationAtom,
+} from "@/atoms/roles/roles-mutation.atoms";
+import { permissionsAtom } from "@/atoms/permissions/permissions-query.atoms";
+import { myAccessAtom } from "@/atoms/members/members-query.atoms";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Spinner } from "@/components/ui/spinner";
+import type { PermissionInfo } from "@/contracts/types/permissions.types";
+import type {
+	CreateRoleRequest,
+	DeleteRoleRequest,
+	Role,
+	UpdateRoleRequest,
+} from "@/contracts/types/roles.types";
+import { rolesApiService } from "@/lib/apis/roles-api.service";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { cn } from "@/lib/utils";
+
+const CATEGORY_CONFIG: Record<
+	string,
+	{ label: string; icon: LucideIcon; description: string; order: number }
+> = {
+	documents: {
+		label: "Documents",
+		icon: FileText,
+		description: "Manage files, notes, and content",
+		order: 1,
+	},
+	chats: {
+		label: "AI Chats",
+		icon: MessageSquare,
+		description: "Create and manage AI conversations",
+		order: 2,
+	},
+	comments: {
+		label: "Comments",
+		icon: MessageCircle,
+		description: "Add annotations to documents",
+		order: 3,
+	},
+	llm_configs: {
+		label: "AI Models",
+		icon: Bot,
+		description: "Configure AI model settings",
+		order: 4,
+	},
+	podcasts: {
+		label: "Podcasts",
+		icon: Mic,
+		description: "Generate AI podcasts from content",
+		order: 5,
+	},
+	connectors: {
+		label: "Integrations",
+		icon: Plug,
+		description: "Connect external data sources",
+		order: 6,
+	},
+	logs: {
+		label: "Activity Logs",
+		icon: Logs,
+		description: "View and manage audit trail",
+		order: 7,
+	},
+	members: {
+		label: "Team Members",
+		icon: Users,
+		description: "Manage team membership",
+		order: 8,
+	},
+	roles: {
+		label: "Roles",
+		icon: Shield,
+		description: "Configure role permissions",
+		order: 9,
+	},
+	settings: {
+		label: "Settings",
+		icon: Settings,
+		description: "Manage search space settings",
+		order: 10,
+	},
+	public_sharing: {
+		label: "Public Chat Sharing",
+		icon: Globe,
+		description: "Share chats publicly via links",
+		order: 11,
+	},
+};
+
+const ACTION_LABELS: Record<string, string> = {
+	create: "Create",
+	read: "Read",
+	update: "Update",
+	delete: "Delete",
+	invite: "Invite",
+	view: "View",
+	remove: "Remove",
+	manage_roles: "Manage Roles",
+};
+
+const ACTION_DISPLAY: Record<string, { label: string; color: string }> = {
+	create: { label: "Create", color: "text-emerald-600 bg-emerald-500/10" },
+	read: { label: "View", color: "text-blue-600 bg-blue-500/10" },
+	update: { label: "Edit", color: "text-amber-600 bg-amber-500/10" },
+	delete: { label: "Delete", color: "text-red-600 bg-red-500/10" },
+	invite: { label: "Invite", color: "text-violet-600 bg-violet-500/10" },
+	view: { label: "View", color: "text-blue-600 bg-blue-500/10" },
+	remove: { label: "Remove", color: "text-red-600 bg-red-500/10" },
+	manage_roles: {
+		label: "Manage Roles",
+		color: "text-violet-600 bg-violet-500/10",
+	},
+};
+
+const ROLE_PRESETS = {
+	editor: {
+		name: "Editor",
+		description:
+			"Can create, read, and update content, but cannot delete or manage team settings",
+		permissions: [
+			"documents:create",
+			"documents:read",
+			"documents:update",
+			"chats:create",
+			"chats:read",
+			"chats:update",
+			"comments:create",
+			"comments:read",
+			"llm_configs:create",
+			"llm_configs:read",
+			"llm_configs:update",
+			"podcasts:create",
+			"podcasts:read",
+			"podcasts:update",
+			"connectors:create",
+			"connectors:read",
+			"connectors:update",
+			"logs:read",
+			"members:invite",
+			"members:view",
+			"roles:read",
+			"settings:view",
+		],
+	},
+	viewer: {
+		name: "Viewer",
+		description: "Read-only access with ability to add comments",
+		permissions: [
+			"documents:read",
+			"chats:read",
+			"comments:create",
+			"comments:read",
+			"llm_configs:read",
+			"podcasts:read",
+			"connectors:read",
+			"logs:read",
+			"members:view",
+			"roles:read",
+			"settings:view",
+		],
+	},
+	contributor: {
+		name: "Contributor",
+		description: "Can add and manage their own content",
+		permissions: [
+			"documents:create",
+			"documents:read",
+			"documents:update",
+			"chats:create",
+			"chats:read",
+			"comments:create",
+			"comments:read",
+			"llm_configs:read",
+			"podcasts:read",
+			"connectors:read",
+			"logs:read",
+			"members:view",
+			"roles:read",
+			"settings:view",
+		],
+	},
+};
+
+type PermissionWithDescription = PermissionInfo;
+
+// ============ Roles Manager (for Settings page) ============
+
+export function RolesManager({ searchSpaceId }: { searchSpaceId: number }) {
+	const { data: access = null } = useAtomValue(myAccessAtom);
+
+	const hasPermission = useCallback(
+		(permission: string) => {
+			if (!access) return false;
+			if (access.is_owner) return true;
+			return access.permissions?.includes(permission) ?? false;
+		},
+		[access]
+	);
+
+	const {
+		data: roles = [],
+		isLoading: rolesLoading,
+	} = useQuery({
+		queryKey: cacheKeys.roles.all(searchSpaceId.toString()),
+		queryFn: () =>
+			rolesApiService.getRoles({ search_space_id: searchSpaceId }),
+		enabled: !!searchSpaceId,
+	});
+
+	const { data: permissionsData } = useAtomValue(permissionsAtom);
+	const permissions = permissionsData?.permissions || [];
+	const groupedPermissions = useMemo(() => {
+		const groups: Record<string, typeof permissions> = {};
+		for (const perm of permissions) {
+			if (!groups[perm.category]) {
+				groups[perm.category] = [];
+			}
+			groups[perm.category].push(perm);
+		}
+		return groups;
+	}, [permissions]);
+
+	const { mutateAsync: createRole } = useAtomValue(createRoleMutationAtom);
+	const { mutateAsync: updateRole } = useAtomValue(updateRoleMutationAtom);
+	const { mutateAsync: deleteRole } = useAtomValue(deleteRoleMutationAtom);
+
+	const handleUpdateRole = useCallback(
+		async (
+			roleId: number,
+			data: {
+				name?: string;
+				description?: string | null;
+				permissions?: string[];
+				is_default?: boolean;
+			}
+		): Promise<Role> => {
+			const request: UpdateRoleRequest = {
+				search_space_id: searchSpaceId,
+				role_id: roleId,
+				data: data,
+			};
+			return await updateRole(request);
+		},
+		[updateRole, searchSpaceId]
+	);
+
+	const handleDeleteRole = useCallback(
+		async (roleId: number): Promise<boolean> => {
+			const request: DeleteRoleRequest = {
+				search_space_id: searchSpaceId,
+				role_id: roleId,
+			};
+			await deleteRole(request);
+			return true;
+		},
+		[deleteRole, searchSpaceId]
+	);
+
+	const handleCreateRole = useCallback(
+		async (roleData: CreateRoleRequest["data"]): Promise<Role> => {
+			const request: CreateRoleRequest = {
+				search_space_id: searchSpaceId,
+				data: roleData,
+			};
+			return await createRole(request);
+		},
+		[createRole, searchSpaceId]
+	);
+
+	return (
+		<RolesContent
+			roles={roles}
+			groupedPermissions={groupedPermissions}
+			loading={rolesLoading}
+			onUpdateRole={handleUpdateRole}
+			onDeleteRole={handleDeleteRole}
+			onCreateRole={handleCreateRole}
+			canUpdate={hasPermission("roles:update")}
+			canDelete={hasPermission("roles:delete")}
+			canCreate={hasPermission("roles:create")}
+		/>
+	);
+}
+
+// ============ Role Permissions Display ============
+
+function RolePermissionsDisplay({
+	permissions,
+}: {
+	permissions: string[];
+}) {
+	if (permissions.includes("*")) {
+		return (
+			<div className="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-amber-500/10 to-orange-500/10 border border-amber-500/20">
+				<div className="h-10 w-10 rounded-full bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center shrink-0">
+					<Crown className="h-5 w-5 text-white" />
+				</div>
+				<div className="flex-1 min-w-0">
+					<p className="text-sm font-semibold">Full Access</p>
+					<p className="text-xs text-muted-foreground">
+						All permissions granted
+					</p>
+				</div>
+			</div>
+		);
+	}
+
+	const grouped: Record<string, string[]> = {};
+	for (const perm of permissions) {
+		const [category, action] = perm.split(":");
+		if (!grouped[category]) grouped[category] = [];
+		grouped[category].push(action);
+	}
+
+	const sortedCategories = Object.keys(grouped).sort((a, b) => {
+		const orderA = CATEGORY_CONFIG[a]?.order ?? 99;
+		const orderB = CATEGORY_CONFIG[b]?.order ?? 99;
+		return orderA - orderB;
+	});
+
+	const categoryCount = sortedCategories.length;
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<button
+					type="button"
+					className="w-full flex items-center justify-between p-3 rounded-lg border border-border/50 bg-muted/30 hover:bg-muted/50 transition-colors cursor-pointer text-left"
+				>
+					<div className="flex items-center gap-3">
+						<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
+							<ShieldCheck className="h-5 w-5 text-primary" />
+						</div>
+						<div>
+							<p className="text-sm font-semibold">
+								{permissions.length} Permissions
+							</p>
+							<p className="text-xs text-muted-foreground">
+								Across {categoryCount}{" "}
+								{categoryCount === 1 ? "category" : "categories"}
+							</p>
+						</div>
+					</div>
+					<div className="text-xs text-muted-foreground">View details</div>
+				</button>
+			</DialogTrigger>
+			<DialogContent className="w-[92vw] max-w-md p-0 gap-0">
+				<DialogHeader className="p-4 md:p-5 border-b">
+					<DialogTitle className="flex items-center gap-2 text-base">
+						<ShieldCheck className="h-4 w-4 text-primary" />
+						Role Permissions
+					</DialogTitle>
+					<DialogDescription className="text-xs">
+						{permissions.length} permissions across {categoryCount} categories
+					</DialogDescription>
+				</DialogHeader>
+				<ScrollArea className="max-h-[55vh]">
+					<div className="divide-y divide-border/50">
+						{sortedCategories.map((category) => {
+							const actions = grouped[category];
+							const config = CATEGORY_CONFIG[category] || {
+								label: category,
+								icon: FileText,
+							};
+							const IconComponent = config.icon;
+							return (
+								<div
+									key={category}
+									className="flex items-center justify-between gap-3 px-4 md:px-5 py-2.5"
+								>
+									<div className="flex items-center gap-2 shrink-0">
+										<IconComponent className="h-3.5 w-3.5 text-muted-foreground" />
+										<span className="text-sm text-muted-foreground">
+											{config.label}
+										</span>
+									</div>
+									<div className="flex flex-wrap justify-end gap-1">
+										{actions.map((action) => (
+											<span
+												key={action}
+												className="px-1.5 py-0.5 rounded bg-primary/10 text-primary text-[11px] font-medium"
+											>
+												{ACTION_LABELS[action] ||
+													action.replace(/_/g, " ")}
+											</span>
+										))}
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				</ScrollArea>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+// ============ Roles Content ============
+
+function RolesContent({
+	roles,
+	groupedPermissions,
+	loading,
+	onUpdateRole,
+	onDeleteRole,
+	onCreateRole,
+	canUpdate,
+	canDelete,
+	canCreate,
+}: {
+	roles: Role[];
+	groupedPermissions: Record<string, PermissionWithDescription[]>;
+	loading: boolean;
+	onUpdateRole: (
+		roleId: number,
+		data: {
+			name?: string;
+			description?: string | null;
+			permissions?: string[];
+			is_default?: boolean;
+		}
+	) => Promise<Role>;
+	onDeleteRole: (roleId: number) => Promise<boolean>;
+	onCreateRole: (data: CreateRoleRequest["data"]) => Promise<Role>;
+	canUpdate: boolean;
+	canDelete: boolean;
+	canCreate: boolean;
+}) {
+	const [showCreateRole, setShowCreateRole] = useState(false);
+	const [editingRoleId, setEditingRoleId] = useState<number | null>(null);
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center py-12">
+				<Spinner size="md" className="text-primary" />
+			</div>
+		);
+	}
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: 10 }}
+			animate={{ opacity: 1, y: 0 }}
+			exit={{ opacity: 0, y: -10 }}
+			className="space-y-6"
+		>
+			{canCreate && !showCreateRole && (
+				<motion.div
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					className="flex justify-end"
+				>
+					<Button onClick={() => setShowCreateRole(true)} className="gap-2">
+						<Plus className="h-4 w-4" />
+						Create Custom Role
+					</Button>
+				</motion.div>
+			)}
+
+			{showCreateRole && (
+				<CreateRoleSection
+					groupedPermissions={groupedPermissions}
+					onCreateRole={onCreateRole}
+					onCancel={() => setShowCreateRole(false)}
+				/>
+			)}
+
+			{editingRoleId !== null &&
+				(() => {
+					const roleToEdit = roles.find((r) => r.id === editingRoleId);
+					if (!roleToEdit) return null;
+					return (
+						<EditRoleSection
+							role={roleToEdit}
+							groupedPermissions={groupedPermissions}
+							onUpdateRole={onUpdateRole}
+							onCancel={() => setEditingRoleId(null)}
+						/>
+					);
+				})()}
+
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+				{roles.map((role, index) => (
+					<motion.div
+						key={role.id}
+						initial={{ opacity: 0, scale: 0.95 }}
+						animate={{ opacity: 1, scale: 1 }}
+						transition={{ delay: index * 0.05 }}
+					>
+						<Card
+							className={cn(
+								"relative overflow-hidden transition-all hover:shadow-lg",
+								role.is_system_role && "ring-1 ring-primary/20"
+							)}
+						>
+							{role.is_system_role && (
+								<div className="absolute top-0 right-0 px-2 py-1 bg-primary/10 text-primary text-xs font-medium rounded-bl-lg">
+									System Role
+								</div>
+							)}
+							<CardHeader>
+								<div className="flex items-start justify-between">
+									<div className="flex items-center gap-3">
+										<div
+											className={cn(
+												"h-10 w-10 rounded-lg flex items-center justify-center",
+												role.name === "Owner" && "bg-amber-500/20",
+												role.name === "Editor" && "bg-blue-500/20",
+												role.name === "Viewer" && "bg-gray-500/20",
+												!["Owner", "Editor", "Viewer"].includes(
+													role.name
+												) && "bg-primary/20"
+											)}
+										>
+											<ShieldCheck
+												className={cn(
+													"h-5 w-5",
+													role.name === "Owner" && "text-amber-600",
+													role.name === "Editor" && "text-blue-600",
+													role.name === "Viewer" && "text-gray-600",
+													!["Owner", "Editor", "Viewer"].includes(
+														role.name
+													) && "text-primary"
+												)}
+											/>
+										</div>
+										<div>
+											<CardTitle className="text-lg">
+												{role.name}
+											</CardTitle>
+											{role.is_default && (
+												<Badge
+													variant="outline"
+													className="text-xs mt-1"
+												>
+													Default
+												</Badge>
+											)}
+										</div>
+									</div>
+									{!role.is_system_role && (
+										<DropdownMenu>
+											<DropdownMenuTrigger asChild>
+												<Button
+													variant="ghost"
+													size="icon"
+													className="h-8 w-8"
+												>
+													<MoreHorizontal className="h-4 w-4" />
+												</Button>
+											</DropdownMenuTrigger>
+											<DropdownMenuContent
+												align="end"
+												onCloseAutoFocus={(e) =>
+													e.preventDefault()
+												}
+											>
+												{canUpdate && (
+													<DropdownMenuItem
+														onClick={() =>
+															setEditingRoleId(role.id)
+														}
+													>
+														<Edit2 className="h-4 w-4 mr-2" />
+														Edit Role
+													</DropdownMenuItem>
+												)}
+												{canDelete && (
+													<>
+														<DropdownMenuSeparator />
+														<AlertDialog>
+															<AlertDialogTrigger asChild>
+																<DropdownMenuItem
+																	className="text-destructive focus:text-destructive"
+																	onSelect={(e) =>
+																		e.preventDefault()
+																	}
+																>
+																	<Trash2 className="h-4 w-4 mr-2" />
+																	Delete Role
+																</DropdownMenuItem>
+															</AlertDialogTrigger>
+															<AlertDialogContent>
+																<AlertDialogHeader>
+																	<AlertDialogTitle>
+																		Delete role?
+																	</AlertDialogTitle>
+																	<AlertDialogDescription>
+																		This will permanently
+																		delete the &quot;
+																		{role.name}&quot; role.
+																		Members with this role
+																		will lose their
+																		permissions.
+																	</AlertDialogDescription>
+																</AlertDialogHeader>
+																<AlertDialogFooter>
+																	<AlertDialogCancel>
+																		Cancel
+																	</AlertDialogCancel>
+																	<AlertDialogAction
+																		onClick={() =>
+																			onDeleteRole(
+																				role.id
+																			)
+																		}
+																		className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+																	>
+																		Delete
+																	</AlertDialogAction>
+																</AlertDialogFooter>
+															</AlertDialogContent>
+														</AlertDialog>
+													</>
+												)}
+											</DropdownMenuContent>
+										</DropdownMenu>
+									)}
+								</div>
+								{role.description && (
+									<CardDescription className="mt-2">
+										{role.description}
+									</CardDescription>
+								)}
+							</CardHeader>
+							<CardContent>
+								<RolePermissionsDisplay
+									permissions={role.permissions}
+								/>
+							</CardContent>
+						</Card>
+					</motion.div>
+				))}
+			</div>
+		</motion.div>
+	);
+}
+
+// ============ Permissions Editor (shared by Create and Edit) ============
+
+function PermissionsEditor({
+	groupedPermissions,
+	selectedPermissions,
+	onTogglePermission,
+	onToggleCategory,
+}: {
+	groupedPermissions: Record<string, PermissionWithDescription[]>;
+	selectedPermissions: string[];
+	onTogglePermission: (perm: string) => void;
+	onToggleCategory: (category: string) => void;
+}) {
+	const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
+
+	const sortedCategories = useMemo(() => {
+		return Object.keys(groupedPermissions).sort((a, b) => {
+			const orderA = CATEGORY_CONFIG[a]?.order ?? 99;
+			const orderB = CATEGORY_CONFIG[b]?.order ?? 99;
+			return orderA - orderB;
+		});
+	}, [groupedPermissions]);
+
+	const toggleCategoryExpanded = useCallback((category: string) => {
+		setExpandedCategories((prev) =>
+			prev.includes(category)
+				? prev.filter((c) => c !== category)
+				: [...prev, category]
+		);
+	}, []);
+
+	const getCategoryStats = useCallback(
+		(category: string) => {
+			const perms = groupedPermissions[category] || [];
+			const selected = perms.filter((p) =>
+				selectedPermissions.includes(p.value)
+			).length;
+			return {
+				selected,
+				total: perms.length,
+				allSelected: selected === perms.length,
+			};
+		},
+		[groupedPermissions, selectedPermissions]
+	);
+
+	return (
+		<div className="space-y-3">
+			<div className="flex items-center justify-between">
+				<Label className="text-sm font-medium">
+					Permissions ({selectedPermissions.length} selected)
+				</Label>
+				<Button
+					type="button"
+					variant="ghost"
+					size="sm"
+					className="text-xs h-7"
+					onClick={() =>
+						setExpandedCategories(
+							expandedCategories.length === sortedCategories.length
+								? []
+								: sortedCategories
+						)
+					}
+				>
+					{expandedCategories.length === sortedCategories.length
+						? "Collapse All"
+						: "Expand All"}
+				</Button>
+			</div>
+
+			<div className="space-y-2">
+				{sortedCategories.map((category) => {
+					const config = CATEGORY_CONFIG[category] || {
+						label: category,
+						icon: FileText,
+						description: "",
+						order: 99,
+					};
+					const IconComponent = config.icon;
+					const stats = getCategoryStats(category);
+					const isExpanded = expandedCategories.includes(category);
+					const perms = groupedPermissions[category] || [];
+
+					return (
+						<div
+							key={category}
+							className="rounded-lg border bg-card overflow-hidden"
+						>
+							<button
+								type="button"
+								className={cn(
+									"w-full flex items-center justify-between p-3 cursor-pointer hover:bg-muted/50 transition-colors",
+									stats.allSelected && "bg-primary/5"
+								)}
+								onClick={() => toggleCategoryExpanded(category)}
+							>
+								<div className="flex items-center gap-3">
+									<div
+										className={cn(
+											"h-8 w-8 rounded-lg flex items-center justify-center",
+											stats.selected > 0
+												? "bg-primary/10"
+												: "bg-muted"
+										)}
+									>
+										<IconComponent
+											className={cn(
+												"h-4 w-4",
+												stats.selected > 0
+													? "text-primary"
+													: "text-muted-foreground"
+											)}
+										/>
+									</div>
+									<div>
+										<div className="flex items-center gap-2">
+											<span className="font-medium text-sm">
+												{config.label}
+											</span>
+											<Badge
+												variant={
+													stats.selected > 0
+														? "default"
+														: "secondary"
+												}
+												className="text-xs h-5"
+											>
+												{stats.selected}/{stats.total}
+											</Badge>
+										</div>
+										<p className="text-xs text-muted-foreground hidden md:block">
+											{config.description}
+										</p>
+									</div>
+								</div>
+								<div className="flex items-center gap-2">
+									<Checkbox
+										checked={stats.allSelected}
+										onCheckedChange={() =>
+											onToggleCategory(category)
+										}
+										onClick={(e) => e.stopPropagation()}
+										aria-label={`Select all ${config.label} permissions`}
+									/>
+									<motion.div
+										animate={{
+											rotate: isExpanded ? 180 : 0,
+										}}
+										transition={{ duration: 0.2 }}
+									>
+										<svg
+											className="h-4 w-4 text-muted-foreground"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+											aria-hidden="true"
+										>
+											<title>Toggle</title>
+											<path
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												strokeWidth={2}
+												d="M19 9l-7 7-7-7"
+											/>
+										</svg>
+									</motion.div>
+								</div>
+							</button>
+
+							{isExpanded && (
+								<motion.div
+									initial={{ height: 0, opacity: 0 }}
+									animate={{ height: "auto", opacity: 1 }}
+									exit={{ height: 0, opacity: 0 }}
+									transition={{ duration: 0.2 }}
+									className="border-t"
+								>
+									<div className="p-3 space-y-1">
+										{perms.map((perm) => {
+											const action =
+												perm.value.split(":")[1];
+											const actionConfig =
+												ACTION_DISPLAY[action] || {
+													label: action,
+													color: "text-gray-600 bg-gray-500/10",
+												};
+											const isSelected =
+												selectedPermissions.includes(
+													perm.value
+												);
+
+											return (
+												<button
+													key={perm.value}
+													type="button"
+													className={cn(
+														"w-full flex items-center justify-between p-2 rounded-md cursor-pointer transition-colors",
+														isSelected
+															? "bg-primary/10 hover:bg-primary/15"
+															: "hover:bg-muted/50"
+													)}
+													onClick={() =>
+														onTogglePermission(
+															perm.value
+														)
+													}
+												>
+													<div className="flex items-center gap-3 flex-1 min-w-0">
+														<Checkbox
+															checked={isSelected}
+															onCheckedChange={() =>
+																onTogglePermission(
+																	perm.value
+																)
+															}
+															onClick={(e) =>
+																e.stopPropagation()
+															}
+														/>
+														<div className="flex-1 min-w-0">
+															<div className="flex items-center gap-2">
+																<span
+																	className={cn(
+																		"text-xs font-medium px-2 py-0.5 rounded",
+																		actionConfig.color
+																	)}
+																>
+																	{
+																		actionConfig.label
+																	}
+																</span>
+															</div>
+															<p className="text-xs text-muted-foreground mt-0.5 truncate">
+																{
+																	perm.description
+																}
+															</p>
+														</div>
+													</div>
+												</button>
+											);
+										})}
+									</div>
+								</motion.div>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+}
+
+// ============ Create Role Section ============
+
+function CreateRoleSection({
+	groupedPermissions,
+	onCreateRole,
+	onCancel,
+}: {
+	groupedPermissions: Record<string, PermissionWithDescription[]>;
+	onCreateRole: (data: CreateRoleRequest["data"]) => Promise<Role>;
+	onCancel: () => void;
+}) {
+	const [creating, setCreating] = useState(false);
+	const [name, setName] = useState("");
+	const [description, setDescription] = useState("");
+	const [selectedPermissions, setSelectedPermissions] = useState<string[]>([]);
+	const [isDefault, setIsDefault] = useState(false);
+
+	const handleCreate = async () => {
+		if (!name.trim()) {
+			toast.error("Please enter a role name");
+			return;
+		}
+
+		setCreating(true);
+		try {
+			await onCreateRole({
+				name: name.trim(),
+				description: description.trim() || null,
+				permissions: selectedPermissions,
+				is_default: isDefault,
+			});
+			onCancel();
+		} catch (error) {
+			console.error("Failed to create role:", error);
+		} finally {
+			setCreating(false);
+		}
+	};
+
+	const togglePermission = useCallback((perm: string) => {
+		setSelectedPermissions((prev) =>
+			prev.includes(perm)
+				? prev.filter((p) => p !== perm)
+				: [...prev, perm]
+		);
+	}, []);
+
+	const toggleCategory = useCallback(
+		(category: string) => {
+			const categoryPerms =
+				groupedPermissions[category]?.map((p) => p.value) || [];
+			const allSelected = categoryPerms.every((p) =>
+				selectedPermissions.includes(p)
+			);
+
+			if (allSelected) {
+				setSelectedPermissions((prev) =>
+					prev.filter((p) => !categoryPerms.includes(p))
+				);
+			} else {
+				setSelectedPermissions((prev) => [
+					...new Set([...prev, ...categoryPerms]),
+				]);
+			}
+		},
+		[groupedPermissions, selectedPermissions]
+	);
+
+	const applyPreset = useCallback(
+		(presetKey: keyof typeof ROLE_PRESETS) => {
+			const preset = ROLE_PRESETS[presetKey];
+			setSelectedPermissions(preset.permissions);
+			if (!name.trim()) {
+				setName(preset.name);
+				setDescription(preset.description);
+			}
+			toast.success(`Applied ${preset.name} preset`);
+		},
+		[name]
+	);
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: -10 }}
+			animate={{ opacity: 1, y: 0 }}
+			exit={{ opacity: 0, y: -10 }}
+			className="mb-6"
+		>
+			<Card className="border-primary/20 bg-gradient-to-br from-primary/5 via-background to-background">
+				<CardHeader className="pb-4">
+					<div className="flex items-center justify-between">
+						<div className="flex items-center gap-3">
+							<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center">
+								<Plus className="h-5 w-5 text-primary" />
+							</div>
+							<div>
+								<CardTitle className="text-lg">
+									Create Custom Role
+								</CardTitle>
+								<CardDescription className="text-sm">
+									Define permissions for a new role in this
+									search space
+								</CardDescription>
+							</div>
+						</div>
+						<Button variant="ghost" size="icon" onClick={onCancel}>
+							<Trash2 className="h-4 w-4" />
+						</Button>
+					</div>
+				</CardHeader>
+				<CardContent className="space-y-6">
+					{/* Quick Start with Presets */}
+					<div className="space-y-3">
+						<Label className="text-sm font-medium">
+							Quick Start with a Template
+						</Label>
+						<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+							{Object.entries(ROLE_PRESETS).map(
+								([key, preset]) => (
+									<button
+										key={key}
+										type="button"
+										onClick={() =>
+											applyPreset(
+												key as keyof typeof ROLE_PRESETS
+											)
+										}
+										className={cn(
+											"p-4 rounded-lg border-2 text-left transition-all hover:border-primary/50 hover:bg-primary/5",
+											selectedPermissions.length > 0 &&
+												preset.permissions.every((p) =>
+													selectedPermissions.includes(
+														p
+													)
+												)
+												? "border-primary bg-primary/10"
+												: "border-border"
+										)}
+									>
+										<div className="flex items-center gap-2 mb-1">
+											<ShieldCheck
+												className={cn(
+													"h-4 w-4",
+													key === "editor" &&
+														"text-blue-600",
+													key === "viewer" &&
+														"text-gray-600",
+													key === "contributor" &&
+														"text-emerald-600"
+												)}
+											/>
+											<span className="font-medium text-sm">
+												{preset.name}
+											</span>
+										</div>
+										<p className="text-xs text-muted-foreground">
+											{preset.description}
+										</p>
+									</button>
+								)
+							)}
+						</div>
+					</div>
+
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<div className="space-y-2">
+							<Label htmlFor="role-name">Role Name *</Label>
+							<Input
+								id="role-name"
+								placeholder="e.g., Content Manager"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="role-description">
+								Description
+							</Label>
+							<Input
+								id="role-description"
+								placeholder="Brief description of this role"
+								value={description}
+								onChange={(e) => setDescription(e.target.value)}
+							/>
+						</div>
+					</div>
+
+					<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
+						<Checkbox
+							id="is-default"
+							checked={isDefault}
+							onCheckedChange={(checked) =>
+								setIsDefault(checked === true)
+							}
+						/>
+						<div className="flex-1">
+							<Label
+								htmlFor="is-default"
+								className="cursor-pointer font-medium"
+							>
+								Set as default role
+							</Label>
+							<p className="text-xs text-muted-foreground">
+								New members without a specific role will be
+								assigned this role
+							</p>
+						</div>
+					</div>
+
+					<PermissionsEditor
+						groupedPermissions={groupedPermissions}
+						selectedPermissions={selectedPermissions}
+						onTogglePermission={togglePermission}
+						onToggleCategory={toggleCategory}
+					/>
+
+					<div className="flex items-center justify-end gap-3 pt-4 border-t">
+						<Button variant="outline" onClick={onCancel}>
+							Cancel
+						</Button>
+						<Button
+							onClick={handleCreate}
+							disabled={creating || !name.trim()}
+						>
+							{creating ? (
+								<>
+									<Spinner size="sm" className="mr-2" />
+									Creating...
+								</>
+							) : (
+								<>
+									<Check className="h-4 w-4 mr-2" />
+									Create Role
+								</>
+							)}
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+		</motion.div>
+	);
+}
+
+// ============ Edit Role Section ============
+
+function EditRoleSection({
+	role,
+	groupedPermissions,
+	onUpdateRole,
+	onCancel,
+}: {
+	role: Role;
+	groupedPermissions: Record<string, PermissionWithDescription[]>;
+	onUpdateRole: (
+		roleId: number,
+		data: {
+			name?: string;
+			description?: string | null;
+			permissions?: string[];
+			is_default?: boolean;
+		}
+	) => Promise<Role>;
+	onCancel: () => void;
+}) {
+	const [saving, setSaving] = useState(false);
+	const [name, setName] = useState(role.name);
+	const [description, setDescription] = useState(role.description || "");
+	const [selectedPermissions, setSelectedPermissions] = useState<string[]>(
+		role.permissions
+	);
+	const [isDefault, setIsDefault] = useState(role.is_default);
+
+	const handleSave = async () => {
+		if (!name.trim()) {
+			toast.error("Please enter a role name");
+			return;
+		}
+
+		setSaving(true);
+		try {
+			await onUpdateRole(role.id, {
+				name: name.trim(),
+				description: description.trim() || null,
+				permissions: selectedPermissions,
+				is_default: isDefault,
+			});
+			toast.success("Role updated successfully");
+			onCancel();
+		} catch (error) {
+			console.error("Failed to update role:", error);
+			toast.error("Failed to update role");
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	const togglePermission = useCallback((perm: string) => {
+		setSelectedPermissions((prev) =>
+			prev.includes(perm)
+				? prev.filter((p) => p !== perm)
+				: [...prev, perm]
+		);
+	}, []);
+
+	const toggleCategory = useCallback(
+		(category: string) => {
+			const categoryPerms =
+				groupedPermissions[category]?.map((p) => p.value) || [];
+			const allSelected = categoryPerms.every((p) =>
+				selectedPermissions.includes(p)
+			);
+
+			if (allSelected) {
+				setSelectedPermissions((prev) =>
+					prev.filter((p) => !categoryPerms.includes(p))
+				);
+			} else {
+				setSelectedPermissions((prev) => [
+					...new Set([...prev, ...categoryPerms]),
+				]);
+			}
+		},
+		[groupedPermissions, selectedPermissions]
+	);
+
+	return (
+		<motion.div
+			initial={{ opacity: 0, y: -10 }}
+			animate={{ opacity: 1, y: 0 }}
+			exit={{ opacity: 0, y: -10 }}
+			className="mb-6"
+		>
+			<Card className="border-primary/20 bg-gradient-to-br from-primary/5 via-background to-background">
+				<CardHeader className="pb-4">
+					<div className="flex items-center justify-between">
+						<div className="flex items-center gap-3">
+							<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center">
+								<Edit2 className="h-5 w-5 text-primary" />
+							</div>
+							<div>
+								<CardTitle className="text-lg">
+									Edit Role
+								</CardTitle>
+								<CardDescription className="text-sm">
+									Modify permissions for &quot;{role.name}
+									&quot;
+								</CardDescription>
+							</div>
+						</div>
+						<Button variant="ghost" size="icon" onClick={onCancel}>
+							<Trash2 className="h-4 w-4" />
+						</Button>
+					</div>
+				</CardHeader>
+				<CardContent className="space-y-6">
+					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+						<div className="space-y-2">
+							<Label htmlFor="edit-role-name">
+								Role Name *
+							</Label>
+							<Input
+								id="edit-role-name"
+								placeholder="e.g., Content Manager"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+							/>
+						</div>
+						<div className="space-y-2">
+							<Label htmlFor="edit-role-description">
+								Description
+							</Label>
+							<Input
+								id="edit-role-description"
+								placeholder="Brief description of this role"
+								value={description}
+								onChange={(e) => setDescription(e.target.value)}
+							/>
+						</div>
+					</div>
+
+					<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
+						<Checkbox
+							id="edit-is-default"
+							checked={isDefault}
+							onCheckedChange={(checked) =>
+								setIsDefault(checked === true)
+							}
+						/>
+						<div className="flex-1">
+							<Label
+								htmlFor="edit-is-default"
+								className="cursor-pointer font-medium"
+							>
+								Set as default role
+							</Label>
+							<p className="text-xs text-muted-foreground">
+								New members without a specific role will be
+								assigned this role
+							</p>
+						</div>
+					</div>
+
+					<PermissionsEditor
+						groupedPermissions={groupedPermissions}
+						selectedPermissions={selectedPermissions}
+						onTogglePermission={togglePermission}
+						onToggleCategory={toggleCategory}
+					/>
+
+					<div className="flex items-center justify-end gap-3 pt-4 border-t">
+						<Button variant="outline" onClick={onCancel}>
+							Cancel
+						</Button>
+						<Button
+							onClick={handleSave}
+							disabled={saving || !name.trim()}
+						>
+							{saving ? (
+								<>
+									<Spinner size="sm" className="mr-2" />
+									Saving...
+								</>
+							) : (
+								<>
+									<Check className="h-4 w-4 mr-2" />
+									Save Changes
+								</>
+							)}
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+		</motion.div>
+	);
+}
diff --git a/surfsense_web/messages/en.json b/surfsense_web/messages/en.json
index 20e665586..319595f8e 100644
--- a/surfsense_web/messages/en.json
+++ b/surfsense_web/messages/en.json
@@ -746,6 +746,8 @@
 		"nav_system_instructions_desc": "SearchSpace-wide AI instructions",
 		"nav_public_links": "Public Chat Links",
 		"nav_public_links_desc": "Manage publicly shared chat links",
+		"nav_team_roles": "Team Roles",
+		"nav_team_roles_desc": "Manage team roles & permissions",
 		"general_name_label": "Name",
 		"general_name_placeholder": "Enter search space name",
 		"general_name_description": "A unique name for your search space.",
diff --git a/surfsense_web/messages/es.json b/surfsense_web/messages/es.json
index 9db0a99c9..acf0a184b 100644
--- a/surfsense_web/messages/es.json
+++ b/surfsense_web/messages/es.json
@@ -746,6 +746,8 @@
 		"nav_system_instructions_desc": "Instrucciones de IA a nivel del espacio de búsqueda",
 		"nav_public_links": "Enlaces de chat públicos",
 		"nav_public_links_desc": "Administrar enlaces de chat compartidos públicamente",
+		"nav_team_roles": "Team Roles",
+		"nav_team_roles_desc": "Manage team roles & permissions",
 		"general_name_label": "Nombre",
 		"general_name_placeholder": "Ingresa el nombre del espacio de búsqueda",
 		"general_name_description": "Un nombre único para tu espacio de búsqueda.",
diff --git a/surfsense_web/messages/hi.json b/surfsense_web/messages/hi.json
index 0c5370fd0..1c95ce203 100644
--- a/surfsense_web/messages/hi.json
+++ b/surfsense_web/messages/hi.json
@@ -746,6 +746,8 @@
 		"nav_system_instructions_desc": "सर्च स्पेस-व्यापी AI निर्देश",
 		"nav_public_links": "सार्वजनिक चैट लिंक",
 		"nav_public_links_desc": "सार्वजनिक रूप से साझा किए गए चैट लिंक प्रबंधित करें",
+		"nav_team_roles": "Team Roles",
+		"nav_team_roles_desc": "Manage team roles & permissions",
 		"general_name_label": "नाम",
 		"general_name_placeholder": "सर्च स्पेस का नाम दर्ज करें",
 		"general_name_description": "आपके सर्च स्पेस के लिए एक अद्वितीय नाम।",
diff --git a/surfsense_web/messages/pt.json b/surfsense_web/messages/pt.json
index 3803e066c..aaf3b36f7 100644
--- a/surfsense_web/messages/pt.json
+++ b/surfsense_web/messages/pt.json
@@ -746,6 +746,8 @@
 		"nav_system_instructions_desc": "Instruções de IA em nível do espaço de pesquisa",
 		"nav_public_links": "Links de chat públicos",
 		"nav_public_links_desc": "Gerenciar links de chat compartilhados publicamente",
+		"nav_team_roles": "Team Roles",
+		"nav_team_roles_desc": "Manage team roles & permissions",
 		"general_name_label": "Nome",
 		"general_name_placeholder": "Insira o nome do espaço de pesquisa",
 		"general_name_description": "Um nome único para seu espaço de pesquisa.",
diff --git a/surfsense_web/messages/zh.json b/surfsense_web/messages/zh.json
index 4c194a5dc..0096b68aa 100644
--- a/surfsense_web/messages/zh.json
+++ b/surfsense_web/messages/zh.json
@@ -730,6 +730,8 @@
 		"nav_system_instructions_desc": "搜索空间级别的 AI 指令",
 		"nav_public_links": "公开聊天链接",
 		"nav_public_links_desc": "管理公开分享的聊天链接",
+		"nav_team_roles": "Team Roles",
+		"nav_team_roles_desc": "Manage team roles & permissions",
 		"general_name_label": "名称",
 		"general_name_placeholder": "输入搜索空间名称",
 		"general_name_description": "您的搜索空间的唯一名称。",

From d76380334f91f64459a26a938f4bb0d84cffff09 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 19:19:41 +0530
Subject: [PATCH 02/18] feat: implement pagination and loading skeletons for
 team management page

---
 .../dashboard/[search_space_id]/team/page.tsx | 458 ++++++++++++------
 1 file changed, 317 insertions(+), 141 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index a9213654a..426c73e60 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -6,19 +6,22 @@ import {
 	Calendar,
 	Check,
 	ChevronDown,
+	ChevronFirst,
+	ChevronLast,
+	ChevronLeft,
+	ChevronRight,
 	Clock,
 	Copy,
-	Crown,
 	Hash,
-	Shield,
+	ShieldUser,
 	Trash2,
-	UserMinus,
 	UserPlus,
+	User,
 	Users,
 } from "lucide-react";
 import { motion } from "motion/react";
 import Image from "next/image";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
@@ -69,6 +72,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import {
 	Table,
@@ -143,6 +147,8 @@ function getInviteInitials(invite: Invite): string {
 	return "IN";
 }
 
+const PAGE_SIZE = 10;
+
 export default function TeamManagementPage() {
 	const params = useParams();
 	const searchSpaceId = Number(params.search_space_id);
@@ -237,6 +243,39 @@ export default function TeamManagementPage() {
 	const canManageRoles = hasPermission("members:manage_roles");
 	const canRemove = hasPermission("members:remove");
 
+	const owners = useMemo(() => members.filter((m) => m.is_owner), [members]);
+	const nonOwnerMembers = useMemo(() => members.filter((m) => !m.is_owner), [members]);
+
+	const [pageIndex, setPageIndex] = useState(0);
+	const totalItems = nonOwnerMembers.length + activeInvites.length;
+	const lastPage = Math.max(0, Math.ceil(totalItems / PAGE_SIZE) - 1);
+
+	useEffect(() => {
+		if (pageIndex > lastPage) setPageIndex(lastPage);
+	}, [pageIndex, lastPage]);
+
+	const paginatedMembers = useMemo(() => {
+		const start = pageIndex * PAGE_SIZE;
+		const end = start + PAGE_SIZE;
+		return nonOwnerMembers.slice(
+			Math.min(start, nonOwnerMembers.length),
+			Math.min(end, nonOwnerMembers.length)
+		);
+	}, [nonOwnerMembers, pageIndex]);
+
+	const paginatedInvites = useMemo(() => {
+		const start = pageIndex * PAGE_SIZE;
+		const end = start + PAGE_SIZE;
+		const inviteStart = Math.max(0, start - nonOwnerMembers.length);
+		const inviteEnd = Math.max(0, end - nonOwnerMembers.length);
+		return activeInvites.slice(inviteStart, inviteEnd);
+	}, [activeInvites, nonOwnerMembers.length, pageIndex]);
+
+	const displayStart = totalItems > 0 ? pageIndex * PAGE_SIZE + 1 : 0;
+	const displayEnd = Math.min((pageIndex + 1) * PAGE_SIZE, totalItems);
+	const canPrev = pageIndex > 0;
+	const canNext = displayEnd < totalItems;
+
 	useEffect(() => {
 		if (members.length > 0 && !membersLoading) {
 			const ownerCount = members.filter((m) => m.is_owner).length;
@@ -246,16 +285,66 @@ export default function TeamManagementPage() {
 
 	if (accessLoading || membersLoading) {
 		return (
-			<div className="flex items-center justify-center min-h-[60vh]">
-				<motion.div
-					initial={{ opacity: 0, scale: 0.9 }}
-					animate={{ opacity: 1, scale: 1 }}
-					className="flex flex-col items-center gap-4"
-				>
-					<Spinner size="lg" className="text-primary" />
-					<p className="text-muted-foreground">Loading team data...</p>
-				</motion.div>
-			</div>
+			<motion.div
+				initial={{ opacity: 0 }}
+				animate={{ opacity: 1 }}
+				transition={{ duration: 0.3 }}
+				className="min-h-screen bg-background"
+			>
+				<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
+					<div className="space-y-6">
+						<div className="flex items-center justify-between">
+							<Skeleton className="h-9 w-36 rounded-md" />
+							<Skeleton className="h-4 w-20" />
+						</div>
+						<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
+							<Table className="table-fixed w-full">
+								<TableHeader>
+									<TableRow className="hover:bg-transparent border-b border-border/40">
+										<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/40">
+											<Skeleton className="h-3 w-16" />
+										</TableHead>
+										<TableHead className="hidden md:table-cell w-[25%] border-r border-border/40">
+											<Skeleton className="h-3 w-24" />
+										</TableHead>
+										<TableHead className="w-[30%] px-4 md:px-6">
+											<div className="flex justify-end">
+												<Skeleton className="h-3 w-12" />
+											</div>
+										</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{Array.from({ length: PAGE_SIZE }).map((_, i) => (
+										<TableRow
+											key={`skeleton-${i}`}
+											className="border-b border-border/40 hover:bg-transparent"
+										>
+											<TableCell className="w-[45%] py-2.5 px-4 md:px-6 border-r border-border/40">
+												<div className="flex items-center gap-3">
+													<Skeleton className="h-10 w-10 rounded-full shrink-0" />
+													<div className="flex-1 min-w-0 space-y-1.5">
+														<Skeleton className="h-4 w-[60%]" />
+														<Skeleton className="h-3 w-[40%]" />
+													</div>
+												</div>
+											</TableCell>
+											<TableCell className="hidden md:table-cell w-[25%] py-2.5 border-r border-border/40">
+												<Skeleton className="h-4 w-24" />
+											</TableCell>
+											<TableCell className="w-[30%] py-2.5 px-4 md:px-6">
+												<div className="flex justify-end">
+													<Skeleton className="h-4 w-16" />
+												</div>
+											</TableCell>
+										</TableRow>
+									))}
+								</TableBody>
+							</Table>
+						</div>
+					</div>
+				</div>
+			</motion.div>
 		);
 	}
 
@@ -266,7 +355,7 @@ export default function TeamManagementPage() {
 			transition={{ duration: 0.3 }}
 			className="min-h-screen bg-background"
 		>
-			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
+			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
 				<div className="space-y-6">
 					{/* Header row: Invite button on left, member count on right */}
 					<div className="flex items-center justify-between">
@@ -284,54 +373,135 @@ export default function TeamManagementPage() {
 					</div>
 
 					{/* Members & Invites Table */}
-					<div className="rounded-xl border bg-card overflow-hidden">
-						<Table>
-							<TableHeader>
-								<TableRow className="bg-muted/30 hover:bg-muted/30">
-									<TableHead className="w-[40%] px-4 md:px-6 font-normal text-muted-foreground">
+					<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
+					<Table className="table-fixed w-full">
+						<TableHeader>
+							<TableRow className="hover:bg-transparent border-b border-border/40">
+								<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/40">
+									<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
+										<User size={14} className="opacity-60 text-muted-foreground" />
 										Name
-									</TableHead>
-									<TableHead className="hidden md:table-cell font-normal text-muted-foreground">
+									</span>
+								</TableHead>
+								<TableHead className="hidden md:table-cell w-[25%] border-r border-border/40">
+									<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
+										<Clock size={14} className="opacity-60 text-muted-foreground" />
 										Last logged in
-									</TableHead>
-									<TableHead className="text-right px-4 md:px-6 font-normal text-muted-foreground">
+									</span>
+								</TableHead>
+								<TableHead className="w-[30%] px-4 md:px-6">
+									<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70 justify-end">
+										<ShieldUser size={14} className="opacity-60 text-muted-foreground" />
 										Role
-									</TableHead>
+									</span>
+								</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{owners.map((member, index) => (
+								<MemberRow
+									key={`member-${member.id}`}
+									member={member}
+									roles={roles}
+									canManageRoles={canManageRoles}
+									canRemove={canRemove}
+									onUpdateRole={handleUpdateMember}
+									onRemoveMember={handleRemoveMember}
+									searchSpaceId={searchSpaceId}
+									index={index}
+								/>
+							))}
+							{paginatedMembers.map((member, index) => (
+								<MemberRow
+									key={`member-${member.id}`}
+									member={member}
+									roles={roles}
+									canManageRoles={canManageRoles}
+									canRemove={canRemove}
+									onUpdateRole={handleUpdateMember}
+									onRemoveMember={handleRemoveMember}
+									searchSpaceId={searchSpaceId}
+									index={owners.length + index}
+								/>
+							))}
+							{paginatedInvites.map((invite, index) => (
+								<InviteRow
+									key={`invite-${invite.id}`}
+									invite={invite}
+									canRevoke={canInvite}
+									onRevokeInvite={handleRevokeInvite}
+									index={owners.length + paginatedMembers.length + index}
+								/>
+							))}
+							{members.length === 0 && activeInvites.length === 0 && (
+								<TableRow>
+									<TableCell colSpan={3} className="text-center py-12">
+										<div className="flex flex-col items-center gap-2">
+											<Users className="h-8 w-8 text-muted-foreground/50" />
+											<p className="text-muted-foreground">No members yet</p>
+										</div>
+									</TableCell>
 								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{members.map((member) => (
-									<MemberRow
-										key={`member-${member.id}`}
-										member={member}
-										roles={roles}
-										canManageRoles={canManageRoles}
-										canRemove={canRemove}
-										onUpdateRole={handleUpdateMember}
-										onRemoveMember={handleRemoveMember}
-									/>
-								))}
-								{activeInvites.map((invite) => (
-									<InviteRow
-										key={`invite-${invite.id}`}
-										invite={invite}
-										canRevoke={canInvite}
-										onRevokeInvite={handleRevokeInvite}
-									/>
-								))}
-								{members.length === 0 && activeInvites.length === 0 && (
-									<TableRow>
-										<TableCell colSpan={3} className="text-center py-12">
-											<div className="flex flex-col items-center gap-2">
-												<Users className="h-8 w-8 text-muted-foreground/50" />
-												<p className="text-muted-foreground">No members yet</p>
-											</div>
-										</TableCell>
-									</TableRow>
-								)}
-							</TableBody>
-						</Table>
+							)}
+						</TableBody>
+					</Table>
 					</div>
+
+					{/* Pagination */}
+					{totalItems > PAGE_SIZE && (
+						<motion.div
+							className="flex items-center justify-end gap-3 py-3 px-2"
+							initial={{ opacity: 0, y: 10 }}
+							animate={{ opacity: 1, y: 0 }}
+							transition={{ type: "spring", stiffness: 300, damping: 30, delay: 0.3 }}
+						>
+							<span className="text-sm text-muted-foreground tabular-nums">
+								{displayStart}-{displayEnd} of {totalItems}
+							</span>
+							<div className="flex items-center gap-1">
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-8 w-8 disabled:opacity-40"
+									onClick={() => setPageIndex(0)}
+									disabled={!canPrev}
+									aria-label="Go to first page"
+								>
+									<ChevronFirst size={18} strokeWidth={2} />
+								</Button>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-8 w-8 disabled:opacity-40"
+									onClick={() => setPageIndex((i) => Math.max(0, i - 1))}
+									disabled={!canPrev}
+									aria-label="Go to previous page"
+								>
+									<ChevronLeft size={18} strokeWidth={2} />
+								</Button>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-8 w-8 disabled:opacity-40"
+									onClick={() => setPageIndex((i) => (canNext ? i + 1 : i))}
+									disabled={!canNext}
+									aria-label="Go to next page"
+								>
+									<ChevronRight size={18} strokeWidth={2} />
+								</Button>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-8 w-8 disabled:opacity-40"
+									onClick={() => setPageIndex(lastPage)}
+									disabled={!canNext}
+									aria-label="Go to last page"
+								>
+									<ChevronLast size={18} strokeWidth={2} />
+								</Button>
+							</div>
+						</motion.div>
+					)}
 				</div>
 			</div>
 		</motion.div>
@@ -347,6 +517,8 @@ function MemberRow({
 	canRemove,
 	onUpdateRole,
 	onRemoveMember,
+	searchSpaceId,
+	index,
 }: {
 	member: Membership;
 	roles: Role[];
@@ -354,19 +526,25 @@ function MemberRow({
 	canRemove: boolean;
 	onUpdateRole: (membershipId: number, roleId: number | null) => Promise<Membership>;
 	onRemoveMember: (membershipId: number) => Promise<boolean>;
+	searchSpaceId: number;
+	index: number;
 }) {
+	const router = useRouter();
 	const initials = getAvatarInitials(member);
 	const avatarColor = getAvatarColor(member.user_id);
 	const displayName = member.user_display_name || member.user_email || "Unknown";
 	const roleName = member.is_owner ? "Owner" : (member.role?.name || "No role");
-	const showActions = canManageRoles || canRemove;
+	const showActions = !member.is_owner && (canManageRoles || canRemove);
 
 	return (
-		<TableRow className="group hover:bg-muted/30">
-			{/* Name + Avatar */}
-			<TableCell className="py-3 px-4 md:px-6">
+		<motion.tr
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1, transition: { duration: 0.2, delay: index * 0.02 } }}
+			className="border-b border-border/40 transition-colors hover:bg-muted/30"
+		>
+			<TableCell className="w-[45%] py-2.5 px-4 md:px-6 max-w-0 border-r border-border/40">
 				<div className="flex items-center gap-3">
-					<div className="relative shrink-0">
+					<div className="shrink-0">
 						{member.user_avatar_url ? (
 							<Image
 								src={member.user_avatar_url}
@@ -385,11 +563,6 @@ function MemberRow({
 								{initials}
 							</div>
 						)}
-						{member.is_owner && (
-							<div className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-amber-500 flex items-center justify-center ring-2 ring-background">
-								<Crown className="h-2.5 w-2.5 text-white" />
-							</div>
-						)}
 					</div>
 					<div className="min-w-0">
 						<p className="font-medium text-sm truncate">{displayName}</p>
@@ -400,14 +573,12 @@ function MemberRow({
 				</div>
 			</TableCell>
 
-			{/* Last logged in */}
-			<TableCell className="hidden md:table-cell py-3 text-sm text-muted-foreground">
+			<TableCell className="hidden md:table-cell w-[25%] py-2.5 text-sm text-foreground border-r border-border/40">
 				{formatRelativeDate(member.joined_at)}
 			</TableCell>
 
-			{/* Role */}
-			<TableCell className="text-right py-3 px-4 md:px-6">
-				{showActions && !member.is_owner ? (
+			<TableCell className="w-[30%] text-right py-2.5 px-4 md:px-6">
+				{showActions ? (
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<button
@@ -419,28 +590,17 @@ function MemberRow({
 							</button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
-							{canManageRoles && (
-								<>
-									{roles.map((role) => (
+							{canManageRoles &&
+								roles
+									.filter((r) => r.name !== "Owner")
+									.map((role) => (
 										<DropdownMenuItem
 											key={role.id}
 											onClick={() => onUpdateRole(member.id, role.id)}
-											className={cn(
-												member.role_id === role.id && "bg-accent"
-											)}
 										>
-											{role.name}
+											Make {role.name}
 										</DropdownMenuItem>
 									))}
-									<DropdownMenuItem
-										onClick={() => onUpdateRole(member.id, null)}
-										className={cn(!member.role_id && "bg-accent")}
-									>
-										No role
-									</DropdownMenuItem>
-								</>
-							)}
-							{canManageRoles && canRemove && <DropdownMenuSeparator />}
 							{canRemove && (
 								<AlertDialog>
 									<AlertDialogTrigger asChild>
@@ -448,41 +608,45 @@ function MemberRow({
 											className="text-destructive focus:text-destructive"
 											onSelect={(e) => e.preventDefault()}
 										>
-											<UserMinus className="h-4 w-4 mr-2" />
-											Remove member
+											Remove
 										</DropdownMenuItem>
-									</AlertDialogTrigger>
-									<AlertDialogContent>
-										<AlertDialogHeader>
-											<AlertDialogTitle>Remove member?</AlertDialogTitle>
-											<AlertDialogDescription>
-												This will remove{" "}
-												<span className="font-medium">{member.user_email}</span>{" "}
-												from this search space. They will lose access to all resources.
-											</AlertDialogDescription>
-										</AlertDialogHeader>
-										<AlertDialogFooter>
-											<AlertDialogCancel>Cancel</AlertDialogCancel>
-											<AlertDialogAction
-												onClick={() => onRemoveMember(member.id)}
-												className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-											>
-												Remove
-											</AlertDialogAction>
-										</AlertDialogFooter>
-									</AlertDialogContent>
-								</AlertDialog>
+										</AlertDialogTrigger>
+										<AlertDialogContent>
+											<AlertDialogHeader>
+												<AlertDialogTitle>Remove member?</AlertDialogTitle>
+												<AlertDialogDescription>
+													This will remove{" "}
+													<span className="font-medium">{member.user_email}</span>{" "}
+													from this search space. They will lose access to all resources.
+												</AlertDialogDescription>
+											</AlertDialogHeader>
+											<AlertDialogFooter>
+												<AlertDialogCancel>Cancel</AlertDialogCancel>
+												<AlertDialogAction
+													onClick={() => onRemoveMember(member.id)}
+													className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+												>
+													Remove
+												</AlertDialogAction>
+											</AlertDialogFooter>
+										</AlertDialogContent>
+									</AlertDialog>
 							)}
+							<DropdownMenuSeparator />
+							<DropdownMenuItem
+								onClick={() => router.push(`/dashboard/${searchSpaceId}/settings?section=team-roles`)}
+							>
+								Manage Roles
+							</DropdownMenuItem>
 						</DropdownMenuContent>
 					</DropdownMenu>
 				) : (
-					<span className={cn("text-sm", member.is_owner ? "text-foreground" : "text-muted-foreground")}>
+					<span className="text-sm text-foreground">
 						{roleName}
-						{!member.is_owner && <ChevronDown className="inline h-4 w-4 ml-1" />}
 					</span>
 				)}
 			</TableCell>
-		</TableRow>
+		</motion.tr>
 	);
 }
 
@@ -492,18 +656,24 @@ function InviteRow({
 	invite,
 	canRevoke,
 	onRevokeInvite,
+	index,
 }: {
 	invite: Invite;
 	canRevoke: boolean;
 	onRevokeInvite: (inviteId: number) => Promise<boolean>;
+	index: number;
 }) {
 	const initials = getInviteInitials(invite);
 	const avatarColor = getAvatarColor(invite.invite_code);
 	const displayName = invite.name || "Unnamed Invite";
 
 	return (
-		<TableRow className="group hover:bg-muted/30">
-			<TableCell className="py-3 px-4 md:px-6">
+		<motion.tr
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1, transition: { duration: 0.2, delay: index * 0.02 } }}
+			className="border-b border-border/40 transition-colors hover:bg-muted/30"
+		>
+			<TableCell className="w-[45%] py-2.5 px-4 md:px-6 max-w-0 border-r border-border/40">
 				<div className="flex items-center gap-3">
 					<div
 						className={cn(
@@ -524,11 +694,11 @@ function InviteRow({
 				</div>
 			</TableCell>
 
-			<TableCell className="hidden md:table-cell py-3 text-sm text-muted-foreground">
+			<TableCell className="hidden md:table-cell w-[25%] py-2.5 text-sm text-foreground border-r border-border/40">
 				Never
 			</TableCell>
 
-			<TableCell className="text-right py-3 px-4 md:px-6">
+			<TableCell className="w-[30%] text-right py-2.5 px-4 md:px-6">
 				{canRevoke ? (
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
@@ -548,7 +718,7 @@ function InviteRow({
 									toast.success("Invite link copied");
 								}}
 							>
-								<Copy className="h-4 w-4 mr-2" />
+								<Copy className="h-4 w-4" />
 								Copy invite link
 							</DropdownMenuItem>
 							<DropdownMenuSeparator />
@@ -558,7 +728,7 @@ function InviteRow({
 										className="text-destructive focus:text-destructive"
 										onSelect={(e) => e.preventDefault()}
 									>
-										<Trash2 className="h-4 w-4 mr-2" />
+										<Trash2 className="h-4 w-4" />
 										Revoke invite
 									</DropdownMenuItem>
 								</AlertDialogTrigger>
@@ -587,7 +757,7 @@ function InviteRow({
 					<span className="text-sm text-muted-foreground/60">Invited</span>
 				)}
 			</TableCell>
-		</TableRow>
+		</motion.tr>
 	);
 }
 
@@ -611,22 +781,30 @@ function CreateInviteDialog({
 	const [createdInvite, setCreatedInvite] = useState<Invite | null>(null);
 	const [copiedLink, setCopiedLink] = useState(false);
 
+	const assignableRoles = useMemo(() => roles.filter((r) => r.name !== "Owner"), [roles]);
+	const defaultRole = useMemo(() => assignableRoles.find((r) => r.is_default), [assignableRoles]);
+
+	useEffect(() => {
+		if (defaultRole && !roleId) {
+			setRoleId(defaultRole.id.toString());
+		}
+	}, [defaultRole, roleId]);
+
 	const handleCreate = async () => {
 		setCreating(true);
 		try {
 			const data: CreateInviteRequest["data"] = {};
 			if (name) data.name = name;
-			if (roleId && roleId !== "default") data.role_id = Number(roleId);
+			if (roleId) data.role_id = Number(roleId);
 			if (maxUses) data.max_uses = Number(maxUses);
 			if (expiresAt) data.expires_at = expiresAt.toISOString();
 
 			const invite = await onCreateInvite(data);
 			setCreatedInvite(invite);
 
-			const roleName =
-				roleId && roleId !== "default"
-					? roles.find((r) => r.id.toString() === roleId)?.name
-					: undefined;
+			const roleName = roleId
+				? roles.find((r) => r.id.toString() === roleId)?.name
+				: undefined;
 			trackSearchSpaceInviteSent(searchSpaceId, {
 				roleName,
 				hasExpiry: !!expiresAt,
@@ -642,7 +820,7 @@ function CreateInviteDialog({
 	const handleClose = () => {
 		setOpen(false);
 		setName("");
-		setRoleId("");
+		setRoleId(defaultRole?.id.toString() ?? "");
 		setMaxUses("");
 		setExpiresAt(undefined);
 		setCreatedInvite(null);
@@ -692,7 +870,6 @@ function CreateInviteDialog({
 							</div>
 							<div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
 								<span className="flex items-center gap-1">
-									<Shield className="h-3 w-3" />
 									{createdInvite.role?.name || "Default role"}
 								</span>
 								{createdInvite.max_uses && (
@@ -735,20 +912,19 @@ function CreateInviteDialog({
 								<Label htmlFor="invite-role">Role</Label>
 								<Select value={roleId} onValueChange={setRoleId}>
 									<SelectTrigger>
-										<SelectValue placeholder="Select a role (default: Viewer)" />
+										<SelectValue placeholder="Assign a role" />
 									</SelectTrigger>
 									<SelectContent>
-										<SelectItem value="default">Default role (Viewer)</SelectItem>
-										{roles
-											.filter((r) => r.name !== "Owner")
-											.map((role) => (
-												<SelectItem key={role.id} value={role.id.toString()}>
-													<div className="flex items-center gap-2">
-														<Shield className="h-3 w-3" />
-														{role.name}
-													</div>
-												</SelectItem>
-											))}
+										{assignableRoles.map((role) => (
+											<SelectItem key={role.id} value={role.id.toString()}>
+												<span className="flex items-center gap-2">
+													{role.name}
+													{role.is_default && (
+														<span className="text-xs text-muted-foreground">(default)</span>
+													)}
+												</span>
+											</SelectItem>
+										))}
 									</SelectContent>
 								</Select>
 							</div>

From e3cabe877272380f5373562c99730a5a8e264d1d Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 19:23:38 +0530
Subject: [PATCH 03/18] feat: enhance UI by adding select-none class to improve
 text selection behavior in team management and breadcrumb components

---
 .../dashboard/[search_space_id]/team/page.tsx | 28 +++++++++----------
 .../components/dashboard-breadcrumb.tsx       |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 426c73e60..7b8fe49a5 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -289,12 +289,12 @@ export default function TeamManagementPage() {
 				initial={{ opacity: 0 }}
 				animate={{ opacity: 1 }}
 				transition={{ duration: 0.3 }}
-				className="min-h-screen bg-background"
-			>
-				<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
-					<div className="space-y-6">
-						<div className="flex items-center justify-between">
-							<Skeleton className="h-9 w-36 rounded-md" />
+		className="min-h-screen bg-background select-none"
+		>
+			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
+				<div className="space-y-6">
+					<div className="flex items-center justify-between">
+						<Skeleton className="h-9 w-36 rounded-md" />
 							<Skeleton className="h-4 w-20" />
 						</div>
 						<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
@@ -353,11 +353,11 @@ export default function TeamManagementPage() {
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			transition={{ duration: 0.3 }}
-			className="min-h-screen bg-background"
-		>
-			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
-				<div className="space-y-6">
-					{/* Header row: Invite button on left, member count on right */}
+		className="min-h-screen bg-background select-none"
+	>
+		<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
+			<div className="space-y-6">
+				{/* Header row: Invite button on left, member count on right */}
 					<div className="flex items-center justify-between">
 						{canInvite && (
 							<CreateInviteDialog
@@ -565,9 +565,9 @@ function MemberRow({
 						)}
 					</div>
 					<div className="min-w-0">
-						<p className="font-medium text-sm truncate">{displayName}</p>
+						<p className="font-medium text-sm truncate select-text">{displayName}</p>
 						{member.user_display_name && member.user_email && (
-							<p className="text-xs text-muted-foreground truncate">{member.user_email}</p>
+							<p className="text-xs text-muted-foreground truncate select-text">{member.user_email}</p>
 						)}
 					</div>
 				</div>
@@ -843,7 +843,7 @@ function CreateInviteDialog({
 					Invite members
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6">
+			<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6 select-none">
 				{createdInvite ? (
 					<>
 						<DialogHeader>
diff --git a/surfsense_web/components/dashboard-breadcrumb.tsx b/surfsense_web/components/dashboard-breadcrumb.tsx
index 5c6399ce0..d907ca6d1 100644
--- a/surfsense_web/components/dashboard-breadcrumb.tsx
+++ b/surfsense_web/components/dashboard-breadcrumb.tsx
@@ -196,7 +196,7 @@ export function DashboardBreadcrumb() {
 	}
 
 	return (
-		<Breadcrumb>
+		<Breadcrumb className="select-none">
 			<BreadcrumbList>
 				{breadcrumbs.map((item, index) => (
 					<React.Fragment key={`${index}-${item.href || item.label}`}>

From 802b4fe44ee7057f35fade81dd2b100e49e27080 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 20:33:31 +0530
Subject: [PATCH 04/18] feat: refactor team management page by removing invite
 handling logic and enhancing UI components for better user experience

---
 .../dashboard/[search_space_id]/team/page.tsx | 275 +++++++++---------
 .../components/layout/ui/sidebar/Sidebar.tsx  |   2 +-
 .../layout/ui/sidebar/SidebarHeader.tsx       |   8 +-
 .../layout/ui/sidebar/SidebarUserProfile.tsx  |  24 +-
 .../components/new-chat/model-selector.tsx    |   4 +-
 5 files changed, 149 insertions(+), 164 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 7b8fe49a5..34ad273e1 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -13,6 +13,7 @@ import {
 	Clock,
 	Copy,
 	Hash,
+	Link2,
 	ShieldUser,
 	Trash2,
 	UserPlus,
@@ -136,17 +137,6 @@ function getAvatarInitials(member: Membership): string {
 	return "U";
 }
 
-function getInviteInitials(invite: Invite): string {
-	if (invite.name) {
-		const parts = invite.name.trim().split(/\s+/);
-		if (parts.length >= 2) {
-			return (parts[0][0] + parts[1][0]).toUpperCase();
-		}
-		return invite.name.slice(0, 2).toUpperCase();
-	}
-	return "IN";
-}
-
 const PAGE_SIZE = 10;
 
 export default function TeamManagementPage() {
@@ -247,7 +237,7 @@ export default function TeamManagementPage() {
 	const nonOwnerMembers = useMemo(() => members.filter((m) => !m.is_owner), [members]);
 
 	const [pageIndex, setPageIndex] = useState(0);
-	const totalItems = nonOwnerMembers.length + activeInvites.length;
+	const totalItems = nonOwnerMembers.length;
 	const lastPage = Math.max(0, Math.ceil(totalItems / PAGE_SIZE) - 1);
 
 	useEffect(() => {
@@ -263,14 +253,6 @@ export default function TeamManagementPage() {
 		);
 	}, [nonOwnerMembers, pageIndex]);
 
-	const paginatedInvites = useMemo(() => {
-		const start = pageIndex * PAGE_SIZE;
-		const end = start + PAGE_SIZE;
-		const inviteStart = Math.max(0, start - nonOwnerMembers.length);
-		const inviteEnd = Math.max(0, end - nonOwnerMembers.length);
-		return activeInvites.slice(inviteStart, inviteEnd);
-	}, [activeInvites, nonOwnerMembers.length, pageIndex]);
-
 	const displayStart = totalItems > 0 ? pageIndex * PAGE_SIZE + 1 : 0;
 	const displayEnd = Math.min((pageIndex + 1) * PAGE_SIZE, totalItems);
 	const canPrev = pageIndex > 0;
@@ -358,7 +340,8 @@ export default function TeamManagementPage() {
 		<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
 			<div className="space-y-6">
 				{/* Header row: Invite button on left, member count on right */}
-					<div className="flex items-center justify-between">
+				<div className="flex items-center justify-between">
+					<div className="flex items-center gap-2">
 						{canInvite && (
 							<CreateInviteDialog
 								roles={roles}
@@ -366,7 +349,13 @@ export default function TeamManagementPage() {
 								searchSpaceId={searchSpaceId}
 							/>
 						)}
-						{!canInvite && <div />}
+						{canInvite && activeInvites.length > 0 && (
+							<AllInvitesDialog
+								invites={activeInvites}
+								onRevokeInvite={handleRevokeInvite}
+							/>
+						)}
+					</div>
 						<p className="text-sm text-muted-foreground">
 							{members.length} {members.length === 1 ? "member" : "members"}
 						</p>
@@ -424,16 +413,7 @@ export default function TeamManagementPage() {
 									index={owners.length + index}
 								/>
 							))}
-							{paginatedInvites.map((invite, index) => (
-								<InviteRow
-									key={`invite-${invite.id}`}
-									invite={invite}
-									canRevoke={canInvite}
-									onRevokeInvite={handleRevokeInvite}
-									index={owners.length + paginatedMembers.length + index}
-								/>
-							))}
-							{members.length === 0 && activeInvites.length === 0 && (
+						{members.length === 0 && (
 								<TableRow>
 									<TableCell colSpan={3} className="text-center py-12">
 										<div className="flex flex-col items-center gap-2">
@@ -650,117 +630,6 @@ function MemberRow({
 	);
 }
 
-// ============ Invite Row ============
-
-function InviteRow({
-	invite,
-	canRevoke,
-	onRevokeInvite,
-	index,
-}: {
-	invite: Invite;
-	canRevoke: boolean;
-	onRevokeInvite: (inviteId: number) => Promise<boolean>;
-	index: number;
-}) {
-	const initials = getInviteInitials(invite);
-	const avatarColor = getAvatarColor(invite.invite_code);
-	const displayName = invite.name || "Unnamed Invite";
-
-	return (
-		<motion.tr
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1, transition: { duration: 0.2, delay: index * 0.02 } }}
-			className="border-b border-border/40 transition-colors hover:bg-muted/30"
-		>
-			<TableCell className="w-[45%] py-2.5 px-4 md:px-6 max-w-0 border-r border-border/40">
-				<div className="flex items-center gap-3">
-					<div
-						className={cn(
-							"h-10 w-10 rounded-full flex items-center justify-center text-white font-medium text-sm shrink-0 opacity-60",
-							avatarColor
-						)}
-					>
-						{initials}
-					</div>
-					<div className="min-w-0">
-						<p className="font-medium text-sm truncate text-muted-foreground">{displayName}</p>
-						{invite.role?.name && (
-							<p className="text-xs text-muted-foreground/70 truncate">
-								Will join as {invite.role.name}
-							</p>
-						)}
-					</div>
-				</div>
-			</TableCell>
-
-			<TableCell className="hidden md:table-cell w-[25%] py-2.5 text-sm text-foreground border-r border-border/40">
-				Never
-			</TableCell>
-
-			<TableCell className="w-[30%] text-right py-2.5 px-4 md:px-6">
-				{canRevoke ? (
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<button
-								type="button"
-								className="inline-flex items-center gap-1.5 text-sm text-muted-foreground/60"
-							>
-								Invited
-								<ChevronDown className="h-4 w-4" />
-							</button>
-						</DropdownMenuTrigger>
-						<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
-							<DropdownMenuItem
-								onClick={() => {
-									const link = `${window.location.origin}/invite/${invite.invite_code}`;
-									navigator.clipboard.writeText(link);
-									toast.success("Invite link copied");
-								}}
-							>
-								<Copy className="h-4 w-4" />
-								Copy invite link
-							</DropdownMenuItem>
-							<DropdownMenuSeparator />
-							<AlertDialog>
-								<AlertDialogTrigger asChild>
-									<DropdownMenuItem
-										className="text-destructive focus:text-destructive"
-										onSelect={(e) => e.preventDefault()}
-									>
-										<Trash2 className="h-4 w-4" />
-										Revoke invite
-									</DropdownMenuItem>
-								</AlertDialogTrigger>
-								<AlertDialogContent>
-									<AlertDialogHeader>
-										<AlertDialogTitle>Revoke invite?</AlertDialogTitle>
-										<AlertDialogDescription>
-											This will permanently delete this invite link. Anyone with this link
-											will no longer be able to join.
-										</AlertDialogDescription>
-									</AlertDialogHeader>
-									<AlertDialogFooter>
-										<AlertDialogCancel>Cancel</AlertDialogCancel>
-										<AlertDialogAction
-											onClick={() => onRevokeInvite(invite.id)}
-											className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-										>
-											Revoke
-										</AlertDialogAction>
-									</AlertDialogFooter>
-								</AlertDialogContent>
-							</AlertDialog>
-						</DropdownMenuContent>
-					</DropdownMenu>
-				) : (
-					<span className="text-sm text-muted-foreground/60">Invited</span>
-				)}
-			</TableCell>
-		</motion.tr>
-	);
-}
-
 // ============ Create Invite Dialog ============
 
 function CreateInviteDialog({
@@ -843,8 +712,8 @@ function CreateInviteDialog({
 					Invite members
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6 select-none">
-				{createdInvite ? (
+		<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6 select-none" onOpenAutoFocus={(e) => e.preventDefault()}>
+			{createdInvite ? (
 					<>
 						<DialogHeader>
 							<DialogTitle className="flex items-center gap-2">
@@ -989,3 +858,119 @@ function CreateInviteDialog({
 		</Dialog>
 	);
 }
+
+// ============ All Invites Dialog ============
+
+function AllInvitesDialog({
+	invites,
+	onRevokeInvite,
+}: {
+	invites: Invite[];
+	onRevokeInvite: (inviteId: number) => Promise<boolean>;
+}) {
+	const [copiedId, setCopiedId] = useState<number | null>(null);
+
+	const copyLink = (invite: Invite) => {
+		const link = `${window.location.origin}/invite/${invite.invite_code}`;
+		navigator.clipboard.writeText(link);
+		setCopiedId(invite.id);
+		toast.success("Invite link copied");
+		setTimeout(() => setCopiedId(null), 2000);
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="outline" className="gap-2">
+					<Link2 className="h-4 w-4 rotate-315" />
+					Active invites
+					<span className="inline-flex items-center justify-center h-5 min-w-5 px-1 rounded-full bg-muted text-xs font-medium">
+						{invites.length}
+					</span>
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-lg p-4 md:p-6 select-none">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						Active Invite Links
+					</DialogTitle>
+					<DialogDescription>
+						{invites.length} active {invites.length === 1 ? "invite" : "invites"}. Copy a link or revoke access.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="max-h-[320px] overflow-y-auto -mx-1 px-1 space-y-3 py-2">
+					{invites.map((invite) => (
+						<div
+							key={invite.id}
+							className="rounded-lg border border-border/40 p-3 space-y-2.5 transition-colors hover:bg-muted/30"
+						>
+							<div className="flex items-center justify-between gap-2">
+								<div className="flex items-center gap-2 min-w-0">
+									<p className="text-sm font-medium truncate">
+										{invite.name || "Unnamed invite"}
+									</p>
+									<div className="flex flex-wrap gap-x-2 text-xs text-muted-foreground shrink-0">
+										{invite.role?.name && (
+											<span className="rounded bg-muted px-1.5 py-0.5">{invite.role.name}</span>
+										)}
+										{invite.max_uses != null && (
+											<span className="flex items-center gap-1 rounded bg-muted px-1.5 py-0.5">
+												<Hash className="h-3 w-3" />
+												{invite.uses_count}/{invite.max_uses}
+											</span>
+										)}
+										{invite.expires_at && (
+											<span className="flex items-center gap-1 rounded bg-muted px-1.5 py-0.5">
+												<Clock className="h-3 w-3" />
+												{new Date(invite.expires_at).toLocaleDateString()}
+											</span>
+										)}
+									</div>
+								</div>
+								<AlertDialog>
+									<AlertDialogTrigger asChild>
+										<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-destructive/60 hover:text-destructive">
+											<Trash2 className="h-3.5 w-3.5" />
+										</Button>
+									</AlertDialogTrigger>
+									<AlertDialogContent>
+										<AlertDialogHeader>
+											<AlertDialogTitle>Revoke invite?</AlertDialogTitle>
+											<AlertDialogDescription>
+												This will permanently delete this invite link. Anyone with this link
+												will no longer be able to join.
+											</AlertDialogDescription>
+										</AlertDialogHeader>
+										<AlertDialogFooter>
+											<AlertDialogCancel>Cancel</AlertDialogCancel>
+											<AlertDialogAction
+												onClick={() => onRevokeInvite(invite.id)}
+												className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+											>
+												Revoke
+											</AlertDialogAction>
+										</AlertDialogFooter>
+									</AlertDialogContent>
+								</AlertDialog>
+							</div>
+							<div className="flex items-center gap-2 rounded-md bg-muted p-2">
+								<code className="flex-1 min-w-0 text-sm select-all overflow-x-auto whitespace-nowrap">
+									{typeof window !== "undefined"
+										? `${window.location.origin}/invite/${invite.invite_code}`
+										: `/invite/${invite.invite_code}`}
+								</code>
+								<Button variant="outline" size="sm" className="shrink-0" onClick={() => copyLink(invite)}>
+									{copiedId === invite.id ? (
+										<Check className="h-4 w-4 text-emerald-500" />
+									) : (
+										<Copy className="h-4 w-4" />
+									)}
+								</Button>
+							</div>
+						</div>
+					))}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index aee98a290..4e95c381f 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -93,7 +93,7 @@ export function Sidebar({
 	return (
 		<div
 			className={cn(
-				"relative flex h-full flex-col bg-sidebar text-sidebar-foreground overflow-hidden",
+				"relative flex h-full flex-col bg-sidebar text-sidebar-foreground overflow-hidden select-none",
 				isCollapsed ? "w-[60px] transition-all duration-200" : "",
 				!isCollapsed && !isResizing ? "transition-all duration-200" : "",
 				className
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
index cdcf2384e..4cb8aa27c 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarHeader.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronsUpDown, Settings, Users } from "lucide-react";
+import { ChevronsUpDown, Settings, UserPen } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
@@ -51,14 +51,14 @@ export function SidebarHeader({
 						<ChevronsUpDown className="h-4 w-4 shrink-0 text-muted-foreground" />
 					</Button>
 				</DropdownMenuTrigger>
-				<DropdownMenuContent align="start" className="w-56">
+				<DropdownMenuContent align="start" className="w-48">
 					<DropdownMenuItem onClick={onManageMembers}>
-						<Users className="mr-2 h-4 w-4" />
+						<UserPen className="h-4 w-4" />
 						{t("manage_members")}
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />
 					<DropdownMenuItem onClick={onSettings}>
-						<Settings className="mr-2 h-4 w-4" />
+						<Settings className="h-4 w-4" />
 						{t("search_space_settings")}
 					</DropdownMenuItem>
 				</DropdownMenuContent>
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
index 3ba7bb2a0..7f3a97f93 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
@@ -177,7 +177,7 @@ export function SidebarUserProfile({
 						<TooltipContent side="right">{displayName}</TooltipContent>
 					</Tooltip>
 
-					<DropdownMenuContent className="w-56" side="right" align="center" sideOffset={8}>
+					<DropdownMenuContent className="w-48" side="right" align="center" sideOffset={8}>
 						<DropdownMenuLabel className="font-normal">
 							<div className="flex items-center gap-2">
 								<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
@@ -191,14 +191,14 @@ export function SidebarUserProfile({
 						<DropdownMenuSeparator />
 
 						<DropdownMenuItem onClick={onUserSettings}>
-							<Settings className="mr-2 h-4 w-4" />
+							<Settings className="h-4 w-4" />
 							{t("user_settings")}
 						</DropdownMenuItem>
 
 						{setTheme && (
 							<DropdownMenuSub>
 								<DropdownMenuSubTrigger>
-									<Sun className="mr-2 h-4 w-4" />
+									<Sun className="h-4 w-4" />
 									{t("theme")}
 								</DropdownMenuSubTrigger>
 								<DropdownMenuPortal>
@@ -216,7 +216,7 @@ export function SidebarUserProfile({
 														isSelected && "text-primary"
 													)}
 												>
-													<Icon className="mr-2 h-4 w-4" />
+													<Icon className="h-4 w-4" />
 													<span className="flex-1">{t(themeOption.value)}</span>
 													{isSelected && <Check className="h-4 w-4 shrink-0" />}
 												</DropdownMenuItem>
@@ -229,7 +229,7 @@ export function SidebarUserProfile({
 
 						<DropdownMenuSub>
 							<DropdownMenuSubTrigger>
-								<Languages className="mr-2 h-4 w-4" />
+								<Languages className="h-4 w-4" />
 								{t("language")}
 							</DropdownMenuSubTrigger>
 							<DropdownMenuPortal>
@@ -262,7 +262,7 @@ export function SidebarUserProfile({
 							{isLoggingOut ? (
 								<Spinner size="sm" className="mr-2" />
 							) : (
-								<LogOut className="mr-2 h-4 w-4" />
+								<LogOut className="h-4 w-4" />
 							)}
 							{isLoggingOut ? t("loggingOut") : t("logout")}
 						</DropdownMenuItem>
@@ -299,7 +299,7 @@ export function SidebarUserProfile({
 					</button>
 				</DropdownMenuTrigger>
 
-				<DropdownMenuContent className="w-56" side="top" align="center" sideOffset={4}>
+				<DropdownMenuContent className="w-48" side="top" align="center" sideOffset={4}>
 					<DropdownMenuLabel className="font-normal">
 						<div className="flex items-center gap-2">
 							<UserAvatar avatarUrl={user.avatarUrl} initials={initials} bgColor={bgColor} />
@@ -313,14 +313,14 @@ export function SidebarUserProfile({
 					<DropdownMenuSeparator />
 
 					<DropdownMenuItem onClick={onUserSettings}>
-						<Settings className="mr-2 h-4 w-4" />
+						<Settings className="h-4 w-4" />
 						{t("user_settings")}
 					</DropdownMenuItem>
 
 					{setTheme && (
 						<DropdownMenuSub>
 							<DropdownMenuSubTrigger>
-								<Sun className="mr-2 h-4 w-4" />
+								<Sun className="h-4 w-4" />
 								{t("theme")}
 							</DropdownMenuSubTrigger>
 							<DropdownMenuPortal>
@@ -338,7 +338,7 @@ export function SidebarUserProfile({
 													isSelected && "text-primary"
 												)}
 											>
-												<Icon className="mr-2 h-4 w-4" />
+												<Icon className="h-4 w-4" />
 												<span className="flex-1">{t(themeOption.value)}</span>
 												{isSelected && <Check className="h-4 w-4 shrink-0" />}
 											</DropdownMenuItem>
@@ -351,7 +351,7 @@ export function SidebarUserProfile({
 
 					<DropdownMenuSub>
 						<DropdownMenuSubTrigger>
-							<Languages className="mr-2 h-4 w-4" />
+							<Languages className="h-4 w-4" />
 							{t("language")}
 						</DropdownMenuSubTrigger>
 						<DropdownMenuPortal>
@@ -384,7 +384,7 @@ export function SidebarUserProfile({
 						{isLoggingOut ? (
 							<Spinner size="sm" className="mr-2" />
 						) : (
-							<LogOut className="mr-2 h-4 w-4" />
+							<LogOut className="h-4 w-4" />
 						)}
 						{isLoggingOut ? t("loggingOut") : t("logout")}
 					</DropdownMenuItem>
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index 98911fe38..d894fe252 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -226,7 +226,7 @@ export function ModelSelector({
 					size="sm"
 					role="combobox"
 					aria-expanded={open}
-					className={cn("h-8 gap-2 px-3 text-sm border-border/60", className)}
+					className={cn("h-8 gap-2 px-3 text-sm border-border/60 select-none", className)}
 				>
 					{isLoading ? (
 						<>
@@ -280,7 +280,7 @@ export function ModelSelector({
 			</PopoverTrigger>
 
 			<PopoverContent
-				className="w-[280px] md:w-[360px] p-0 rounded-lg shadow-lg border-border/60"
+				className="w-[280px] md:w-[360px] p-0 rounded-lg shadow-lg border-border/60 select-none"
 				align="start"
 				sideOffset={8}
 			>

From c7736aa62c4621063a1c3018b81b60808d447ed5 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 22:30:41 +0530
Subject: [PATCH 05/18] feat: adjust pagination size and enhance UI elements in
 team management and connector popup components

---
 .../dashboard/[search_space_id]/team/page.tsx |  20 +-
 .../assistant-ui/connector-popup.tsx          |   2 +-
 .../components/settings/roles-manager.tsx     | 957 +++++++-----------
 3 files changed, 375 insertions(+), 604 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 34ad273e1..6ed061916 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -137,7 +137,7 @@ function getAvatarInitials(member: Membership): string {
 	return "U";
 }
 
-const PAGE_SIZE = 10;
+const PAGE_SIZE = 5;
 
 export default function TeamManagementPage() {
 	const params = useParams();
@@ -271,7 +271,7 @@ export default function TeamManagementPage() {
 				initial={{ opacity: 0 }}
 				animate={{ opacity: 1 }}
 				transition={{ duration: 0.3 }}
-		className="min-h-screen bg-background select-none"
+		className="bg-background select-none"
 		>
 			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
 				<div className="space-y-6">
@@ -335,7 +335,7 @@ export default function TeamManagementPage() {
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			transition={{ duration: 0.3 }}
-		className="min-h-screen bg-background select-none"
+		className="bg-background select-none"
 	>
 		<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
 			<div className="space-y-6">
@@ -356,9 +356,9 @@ export default function TeamManagementPage() {
 							/>
 						)}
 					</div>
-						<p className="text-sm text-muted-foreground">
-							{members.length} {members.length === 1 ? "member" : "members"}
-						</p>
+					<p className="hidden md:block text-sm text-muted-foreground">
+						{members.length} {members.length === 1 ? "member" : "members"}
+					</p>
 					</div>
 
 					{/* Members & Invites Table */}
@@ -569,7 +569,7 @@ function MemberRow({
 								<ChevronDown className="h-4 w-4" />
 							</button>
 						</DropdownMenuTrigger>
-						<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
+						<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()} className="min-w-[180px] dark:bg-neutral-800 dark:border dark:border-neutral-700">
 							{canManageRoles &&
 								roles
 									.filter((r) => r.name !== "Owner")
@@ -612,7 +612,7 @@ function MemberRow({
 										</AlertDialogContent>
 									</AlertDialog>
 							)}
-							<DropdownMenuSeparator />
+							<DropdownMenuSeparator className="dark:bg-neutral-700" />
 							<DropdownMenuItem
 								onClick={() => router.push(`/dashboard/${searchSpaceId}/settings?section=team-roles`)}
 							>
@@ -707,7 +707,7 @@ function CreateInviteDialog({
 	return (
 		<Dialog open={open} onOpenChange={(v) => (v ? setOpen(true) : handleClose())}>
 			<DialogTrigger asChild>
-				<Button variant="outline" className="gap-2">
+				<Button variant="outline" className="gap-2 bg-black text-white dark:bg-white dark:text-black hover:bg-black/90 dark:hover:bg-white/90">
 					<UserPlus className="h-4 w-4" />
 					Invite members
 				</Button>
@@ -929,7 +929,7 @@ function AllInvitesDialog({
 								</div>
 								<AlertDialog>
 									<AlertDialogTrigger asChild>
-										<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-destructive/60 hover:text-destructive">
+										<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-destructive hover:text-destructive">
 											<Trash2 className="h-3.5 w-3.5" />
 										</Button>
 									</AlertDialogTrigger>
diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 143508977..24eb5bc60 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -221,7 +221,7 @@ export const ConnectorIndicator: FC<{ hideTrigger?: boolean }> = ({ hideTrigger
 				</TooltipIconButton>
 			)}
 
-			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
+			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5 select-none">
 				<DialogTitle className="sr-only">Manage Connectors</DialogTitle>
 				{/* YouTube Crawler View - shown when adding YouTube videos */}
 				{isYouTubeView && searchSpaceId ? (
diff --git a/surfsense_web/components/settings/roles-manager.tsx b/surfsense_web/components/settings/roles-manager.tsx
index a10f243d2..42301f99f 100644
--- a/surfsense_web/components/settings/roles-manager.tsx
+++ b/surfsense_web/components/settings/roles-manager.tsx
@@ -4,8 +4,6 @@ import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import {
 	Bot,
-	Check,
-	Crown,
 	Edit2,
 	FileText,
 	Globe,
@@ -19,12 +17,11 @@ import {
 	Logs,
 	Settings,
 	Shield,
-	ShieldCheck,
 	Trash2,
 	Users,
 } from "lucide-react";
 import { motion } from "motion/react";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
 	createRoleMutationAtom,
@@ -44,15 +41,7 @@ import {
 	AlertDialogTitle,
 	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
@@ -167,25 +156,11 @@ const ACTION_LABELS: Record<string, string> = {
 	manage_roles: "Manage Roles",
 };
 
-const ACTION_DISPLAY: Record<string, { label: string; color: string }> = {
-	create: { label: "Create", color: "text-emerald-600 bg-emerald-500/10" },
-	read: { label: "View", color: "text-blue-600 bg-blue-500/10" },
-	update: { label: "Edit", color: "text-amber-600 bg-amber-500/10" },
-	delete: { label: "Delete", color: "text-red-600 bg-red-500/10" },
-	invite: { label: "Invite", color: "text-violet-600 bg-violet-500/10" },
-	view: { label: "View", color: "text-blue-600 bg-blue-500/10" },
-	remove: { label: "Remove", color: "text-red-600 bg-red-500/10" },
-	manage_roles: {
-		label: "Manage Roles",
-		color: "text-violet-600 bg-violet-500/10",
-	},
-};
 
 const ROLE_PRESETS = {
 	editor: {
 		name: "Editor",
-		description:
-			"Can create, read, and update content, but cannot delete or manage team settings",
+		description: "Create, read, and edit content. No delete or admin access.",
 		permissions: [
 			"documents:create",
 			"documents:read",
@@ -353,32 +328,24 @@ export function RolesManager({ searchSpaceId }: { searchSpaceId: number }) {
 
 // ============ Role Permissions Display ============
 
-function RolePermissionsDisplay({
+function RolePermissionsDialog({
 	permissions,
+	roleName,
+	children,
 }: {
 	permissions: string[];
+	roleName: string;
+	children: React.ReactNode;
 }) {
-	if (permissions.includes("*")) {
-		return (
-			<div className="flex items-center gap-3 p-3 rounded-lg bg-gradient-to-r from-amber-500/10 to-orange-500/10 border border-amber-500/20">
-				<div className="h-10 w-10 rounded-full bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center shrink-0">
-					<Crown className="h-5 w-5 text-white" />
-				</div>
-				<div className="flex-1 min-w-0">
-					<p className="text-sm font-semibold">Full Access</p>
-					<p className="text-xs text-muted-foreground">
-						All permissions granted
-					</p>
-				</div>
-			</div>
-		);
-	}
+	const isFullAccess = permissions.includes("*");
 
 	const grouped: Record<string, string[]> = {};
-	for (const perm of permissions) {
-		const [category, action] = perm.split(":");
-		if (!grouped[category]) grouped[category] = [];
-		grouped[category].push(action);
+	if (!isFullAccess) {
+		for (const perm of permissions) {
+			const [category, action] = perm.split(":");
+			if (!grouped[category]) grouped[category] = [];
+			grouped[category].push(action);
+		}
 	}
 
 	const sortedCategories = Object.keys(grouped).sort((a, b) => {
@@ -392,78 +359,87 @@ function RolePermissionsDisplay({
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<button
-					type="button"
-					className="w-full flex items-center justify-between p-3 rounded-lg border border-border/50 bg-muted/30 hover:bg-muted/50 transition-colors cursor-pointer text-left"
-				>
-					<div className="flex items-center gap-3">
-						<div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
-							<ShieldCheck className="h-5 w-5 text-primary" />
-						</div>
-						<div>
-							<p className="text-sm font-semibold">
-								{permissions.length} Permissions
-							</p>
-							<p className="text-xs text-muted-foreground">
-								Across {categoryCount}{" "}
-								{categoryCount === 1 ? "category" : "categories"}
-							</p>
-						</div>
-					</div>
-					<div className="text-xs text-muted-foreground">View details</div>
-				</button>
+				{children}
 			</DialogTrigger>
 			<DialogContent className="w-[92vw] max-w-md p-0 gap-0">
-				<DialogHeader className="p-4 md:p-5 border-b">
-					<DialogTitle className="flex items-center gap-2 text-base">
-						<ShieldCheck className="h-4 w-4 text-primary" />
-						Role Permissions
+				<DialogHeader className="p-4 md:p-5">
+					<DialogTitle className="text-base">
+						{roleName} — Permissions
 					</DialogTitle>
 					<DialogDescription className="text-xs">
-						{permissions.length} permissions across {categoryCount} categories
+						{isFullAccess
+							? "This role has unrestricted access to all resources"
+							: `${permissions.length} permissions across ${categoryCount} categories`}
 					</DialogDescription>
 				</DialogHeader>
-				<ScrollArea className="max-h-[55vh]">
-					<div className="divide-y divide-border/50">
-						{sortedCategories.map((category) => {
-							const actions = grouped[category];
-							const config = CATEGORY_CONFIG[category] || {
-								label: category,
-								icon: FileText,
-							};
-							const IconComponent = config.icon;
-							return (
-								<div
-									key={category}
-									className="flex items-center justify-between gap-3 px-4 md:px-5 py-2.5"
-								>
-									<div className="flex items-center gap-2 shrink-0">
-										<IconComponent className="h-3.5 w-3.5 text-muted-foreground" />
-										<span className="text-sm text-muted-foreground">
-											{config.label}
-										</span>
-									</div>
-									<div className="flex flex-wrap justify-end gap-1">
-										{actions.map((action) => (
-											<span
-												key={action}
-												className="px-1.5 py-0.5 rounded bg-primary/10 text-primary text-[11px] font-medium"
-											>
-												{ACTION_LABELS[action] ||
-													action.replace(/_/g, " ")}
-											</span>
-										))}
-									</div>
-								</div>
-							);
-						})}
+				{isFullAccess ? (
+					<div className="flex items-center gap-3 px-4 md:px-5 py-6">
+						<div className="h-9 w-9 rounded-lg bg-muted/60 flex items-center justify-center shrink-0">
+							<Shield className="h-4 w-4 text-muted-foreground" />
+						</div>
+						<div>
+							<p className="text-sm font-medium">Full access</p>
+							<p className="text-xs text-muted-foreground">All permissions granted across every category</p>
+						</div>
 					</div>
-				</ScrollArea>
+				) : (
+					<ScrollArea className="max-h-[55vh]">
+						<div className="divide-y divide-border/50">
+							{sortedCategories.map((category) => {
+								const actions = grouped[category];
+								const config = CATEGORY_CONFIG[category] || {
+									label: category,
+									icon: FileText,
+								};
+								const IconComponent = config.icon;
+								return (
+									<div
+										key={category}
+										className="flex items-center justify-between gap-3 px-4 md:px-5 py-2.5"
+									>
+										<div className="flex items-center gap-2 shrink-0">
+											<IconComponent className="h-3.5 w-3.5 text-muted-foreground" />
+											<span className="text-sm text-muted-foreground">
+												{config.label}
+											</span>
+										</div>
+										<div className="flex flex-wrap justify-end gap-1">
+											{actions.map((action) => (
+												<span
+													key={action}
+													className="px-1.5 py-0.5 rounded bg-muted text-muted-foreground text-[11px] font-medium"
+												>
+													{ACTION_LABELS[action] ||
+														action.replace(/_/g, " ")}
+												</span>
+											))}
+										</div>
+									</div>
+								);
+							})}
+						</div>
+					</ScrollArea>
+				)}
 			</DialogContent>
 		</Dialog>
 	);
 }
 
+function PermissionsBadge({ permissions }: { permissions: string[] }) {
+	if (permissions.includes("*")) {
+		return (
+			<div className="px-2.5 py-1 rounded-md bg-muted/50 border border-border/60 text-muted-foreground">
+				<span className="text-xs font-medium whitespace-nowrap">Full access</span>
+			</div>
+		);
+	}
+	return (
+		<div className="px-2.5 py-1 rounded-md border border-border/60 bg-muted/50 text-muted-foreground">
+			<span className="text-xs font-medium whitespace-nowrap">{permissions.length} permissions</span>
+		</div>
+	);
+}
+
 // ============ Roles Content ============
 
 function RolesContent({
@@ -506,6 +482,8 @@ function RolesContent({
 		);
 	}
 
+	const editingRole = editingRoleId !== null ? roles.find((r) => r.id === editingRoleId) : null;
+
 	return (
 		<motion.div
 			initial={{ opacity: 0, y: 10 }}
@@ -513,123 +491,88 @@ function RolesContent({
 			exit={{ opacity: 0, y: -10 }}
 			className="space-y-6"
 		>
-			{canCreate && !showCreateRole && (
-				<motion.div
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					className="flex justify-end"
-				>
-					<Button onClick={() => setShowCreateRole(true)} className="gap-2">
+			{canCreate && (
+				<div className="flex justify-end">
+					<Button
+						variant="outline"
+						onClick={() => setShowCreateRole(true)}
+						className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
+					>
 						<Plus className="h-4 w-4" />
 						Create Custom Role
 					</Button>
-				</motion.div>
+				</div>
 			)}
 
-			{showCreateRole && (
-				<CreateRoleSection
+			<CreateRoleDialog
+				open={showCreateRole}
+				onOpenChange={setShowCreateRole}
+				groupedPermissions={groupedPermissions}
+				onCreateRole={onCreateRole}
+			/>
+
+			{editingRole && (
+				<EditRoleDialog
+					open={!!editingRole}
+					onOpenChange={(open) => { if (!open) setEditingRoleId(null); }}
+					role={editingRole}
 					groupedPermissions={groupedPermissions}
-					onCreateRole={onCreateRole}
-					onCancel={() => setShowCreateRole(false)}
+					onUpdateRole={onUpdateRole}
 				/>
 			)}
 
-			{editingRoleId !== null &&
-				(() => {
-					const roleToEdit = roles.find((r) => r.id === editingRoleId);
-					if (!roleToEdit) return null;
-					return (
-						<EditRoleSection
-							role={roleToEdit}
-							groupedPermissions={groupedPermissions}
-							onUpdateRole={onUpdateRole}
-							onCancel={() => setEditingRoleId(null)}
-						/>
-					);
-				})()}
-
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-				{roles.map((role, index) => (
+		<div className="space-y-3">
+			{roles.map((role, index) => (
 					<motion.div
 						key={role.id}
-						initial={{ opacity: 0, scale: 0.95 }}
-						animate={{ opacity: 1, scale: 1 }}
-						transition={{ delay: index * 0.05 }}
+						initial={{ opacity: 0, y: 6 }}
+						animate={{ opacity: 1, y: 0 }}
+						transition={{ delay: index * 0.04 }}
 					>
-						<Card
-							className={cn(
-								"relative overflow-hidden transition-all hover:shadow-lg",
-								role.is_system_role && "ring-1 ring-primary/20"
-							)}
-						>
-							{role.is_system_role && (
-								<div className="absolute top-0 right-0 px-2 py-1 bg-primary/10 text-primary text-xs font-medium rounded-bl-lg">
-									System Role
-								</div>
-							)}
-							<CardHeader>
-								<div className="flex items-start justify-between">
-									<div className="flex items-center gap-3">
-										<div
-											className={cn(
-												"h-10 w-10 rounded-lg flex items-center justify-center",
-												role.name === "Owner" && "bg-amber-500/20",
-												role.name === "Editor" && "bg-blue-500/20",
-												role.name === "Viewer" && "bg-gray-500/20",
-												!["Owner", "Editor", "Viewer"].includes(
-													role.name
-												) && "bg-primary/20"
-											)}
-										>
-											<ShieldCheck
-												className={cn(
-													"h-5 w-5",
-													role.name === "Owner" && "text-amber-600",
-													role.name === "Editor" && "text-blue-600",
-													role.name === "Viewer" && "text-gray-600",
-													!["Owner", "Editor", "Viewer"].includes(
-														role.name
-													) && "text-primary"
-												)}
-											/>
-										</div>
-										<div>
-											<CardTitle className="text-lg">
-												{role.name}
-											</CardTitle>
-											{role.is_default && (
-												<Badge
-													variant="outline"
-													className="text-xs mt-1"
-												>
-													Default
-												</Badge>
-											)}
-										</div>
+						<RolePermissionsDialog permissions={role.permissions} roleName={role.name}>
+							<button
+								type="button"
+								className="w-full text-left relative flex items-center gap-4 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/30 cursor-pointer"
+							>
+								<div className="flex-1 min-w-0">
+									<div className="flex items-center gap-2">
+										<span className="font-medium text-sm">{role.name}</span>
+										{role.is_system_role && (
+											<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
+												System
+											</span>
+										)}
+										{role.is_default && (
+											<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
+												Default
+											</span>
+										)}
 									</div>
-									{!role.is_system_role && (
+									{role.description && (
+										<p className="text-xs text-muted-foreground mt-0.5 truncate">
+											{role.description}
+										</p>
+									)}
+								</div>
+
+								<div className="shrink-0">
+									<PermissionsBadge permissions={role.permissions} />
+								</div>
+
+								{!role.is_system_role && (
+									<div className="shrink-0" role="none" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
 										<DropdownMenu>
 											<DropdownMenuTrigger asChild>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="h-8 w-8"
-												>
+												<Button variant="ghost" size="icon" className="h-8 w-8">
 													<MoreHorizontal className="h-4 w-4" />
 												</Button>
 											</DropdownMenuTrigger>
 											<DropdownMenuContent
 												align="end"
-												onCloseAutoFocus={(e) =>
-													e.preventDefault()
-												}
+												onCloseAutoFocus={(e) => e.preventDefault()}
 											>
 												{canUpdate && (
-													<DropdownMenuItem
-														onClick={() =>
-															setEditingRoleId(role.id)
-														}
-													>
+													<DropdownMenuItem onClick={() => setEditingRoleId(role.id)}>
 														<Edit2 className="h-4 w-4 mr-2" />
 														Edit Role
 													</DropdownMenuItem>
@@ -641,9 +584,7 @@ function RolesContent({
 															<AlertDialogTrigger asChild>
 																<DropdownMenuItem
 																	className="text-destructive focus:text-destructive"
-																	onSelect={(e) =>
-																		e.preventDefault()
-																	}
+																	onSelect={(e) => e.preventDefault()}
 																>
 																	<Trash2 className="h-4 w-4 mr-2" />
 																	Delete Role
@@ -651,28 +592,16 @@ function RolesContent({
 															</AlertDialogTrigger>
 															<AlertDialogContent>
 																<AlertDialogHeader>
-																	<AlertDialogTitle>
-																		Delete role?
-																	</AlertDialogTitle>
+																	<AlertDialogTitle>Delete role?</AlertDialogTitle>
 																	<AlertDialogDescription>
-																		This will permanently
-																		delete the &quot;
-																		{role.name}&quot; role.
-																		Members with this role
-																		will lose their
-																		permissions.
+																		This will permanently delete the &quot;{role.name}&quot; role.
+																		Members with this role will lose their permissions.
 																	</AlertDialogDescription>
 																</AlertDialogHeader>
 																<AlertDialogFooter>
-																	<AlertDialogCancel>
-																		Cancel
-																	</AlertDialogCancel>
+																	<AlertDialogCancel>Cancel</AlertDialogCancel>
 																	<AlertDialogAction
-																		onClick={() =>
-																			onDeleteRole(
-																				role.id
-																			)
-																		}
+																		onClick={() => onDeleteRole(role.id)}
 																		className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 																	>
 																		Delete
@@ -684,20 +613,10 @@ function RolesContent({
 												)}
 											</DropdownMenuContent>
 										</DropdownMenu>
-									)}
-								</div>
-								{role.description && (
-									<CardDescription className="mt-2">
-										{role.description}
-									</CardDescription>
+									</div>
 								)}
-							</CardHeader>
-							<CardContent>
-								<RolePermissionsDisplay
-									permissions={role.permissions}
-								/>
-							</CardContent>
-						</Card>
+							</button>
+						</RolePermissionsDialog>
 					</motion.div>
 				))}
 			</div>
@@ -776,7 +695,7 @@ function PermissionsEditor({
 				</Button>
 			</div>
 
-			<div className="space-y-2">
+			<div className="space-y-1.5">
 				{sortedCategories.map((category) => {
 					const config = CATEGORY_CONFIG[category] || {
 						label: category,
@@ -792,68 +711,29 @@ function PermissionsEditor({
 					return (
 						<div
 							key={category}
-							className="rounded-lg border bg-card overflow-hidden"
+							className="rounded-lg border border-border/60 overflow-hidden"
 						>
 							<button
 								type="button"
-								className={cn(
-									"w-full flex items-center justify-between p-3 cursor-pointer hover:bg-muted/50 transition-colors",
-									stats.allSelected && "bg-primary/5"
-								)}
+								className="w-full flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-muted/40 transition-colors"
 								onClick={() => toggleCategoryExpanded(category)}
 							>
-								<div className="flex items-center gap-3">
-									<div
-										className={cn(
-											"h-8 w-8 rounded-lg flex items-center justify-center",
-											stats.selected > 0
-												? "bg-primary/10"
-												: "bg-muted"
-										)}
-									>
-										<IconComponent
-											className={cn(
-												"h-4 w-4",
-												stats.selected > 0
-													? "text-primary"
-													: "text-muted-foreground"
-											)}
-										/>
-									</div>
-									<div>
-										<div className="flex items-center gap-2">
-											<span className="font-medium text-sm">
-												{config.label}
-											</span>
-											<Badge
-												variant={
-													stats.selected > 0
-														? "default"
-														: "secondary"
-												}
-												className="text-xs h-5"
-											>
-												{stats.selected}/{stats.total}
-											</Badge>
-										</div>
-										<p className="text-xs text-muted-foreground hidden md:block">
-											{config.description}
-										</p>
-									</div>
+								<div className="flex items-center gap-2.5">
+									<IconComponent className="h-4 w-4 text-muted-foreground shrink-0" />
+									<span className="font-medium text-sm">{config.label}</span>
+									<span className="text-[11px] text-muted-foreground tabular-nums">
+										{stats.selected}/{stats.total}
+									</span>
 								</div>
 								<div className="flex items-center gap-2">
 									<Checkbox
 										checked={stats.allSelected}
-										onCheckedChange={() =>
-											onToggleCategory(category)
-										}
+										onCheckedChange={() => onToggleCategory(category)}
 										onClick={(e) => e.stopPropagation()}
 										aria-label={`Select all ${config.label} permissions`}
 									/>
 									<motion.div
-										animate={{
-											rotate: isExpanded ? 180 : 0,
-										}}
+										animate={{ rotate: isExpanded ? 180 : 0 }}
 										transition={{ duration: 0.2 }}
 									>
 										<svg
@@ -881,70 +761,38 @@ function PermissionsEditor({
 									animate={{ height: "auto", opacity: 1 }}
 									exit={{ height: 0, opacity: 0 }}
 									transition={{ duration: 0.2 }}
-									className="border-t"
+									className="border-t border-border/60"
 								>
-									<div className="p-3 space-y-1">
+									<div className="p-2 space-y-0.5">
 										{perms.map((perm) => {
-											const action =
-												perm.value.split(":")[1];
-											const actionConfig =
-												ACTION_DISPLAY[action] || {
-													label: action,
-													color: "text-gray-600 bg-gray-500/10",
-												};
-											const isSelected =
-												selectedPermissions.includes(
-													perm.value
-												);
+											const action = perm.value.split(":")[1];
+											const actionLabel = ACTION_LABELS[action] || action.replace(/_/g, " ");
+											const isSelected = selectedPermissions.includes(perm.value);
 
 											return (
 												<button
 													key={perm.value}
 													type="button"
 													className={cn(
-														"w-full flex items-center justify-between p-2 rounded-md cursor-pointer transition-colors",
+														"w-full flex items-center justify-between gap-3 px-2.5 py-2 rounded-md cursor-pointer transition-colors",
 														isSelected
-															? "bg-primary/10 hover:bg-primary/15"
-															: "hover:bg-muted/50"
+															? "bg-muted/60 hover:bg-muted/80"
+															: "hover:bg-muted/40"
 													)}
-													onClick={() =>
-														onTogglePermission(
-															perm.value
-														)
-													}
+													onClick={() => onTogglePermission(perm.value)}
 												>
-													<div className="flex items-center gap-3 flex-1 min-w-0">
-														<Checkbox
-															checked={isSelected}
-															onCheckedChange={() =>
-																onTogglePermission(
-																	perm.value
-																)
-															}
-															onClick={(e) =>
-																e.stopPropagation()
-															}
-														/>
-														<div className="flex-1 min-w-0">
-															<div className="flex items-center gap-2">
-																<span
-																	className={cn(
-																		"text-xs font-medium px-2 py-0.5 rounded",
-																		actionConfig.color
-																	)}
-																>
-																	{
-																		actionConfig.label
-																	}
-																</span>
-															</div>
-															<p className="text-xs text-muted-foreground mt-0.5 truncate">
-																{
-																	perm.description
-																}
-															</p>
-														</div>
+													<div className="flex-1 min-w-0 text-left">
+														<span className="text-sm font-medium">{actionLabel}</span>
+														<p className="text-xs text-muted-foreground truncate">
+															{perm.description}
+														</p>
 													</div>
+													<Checkbox
+														checked={isSelected}
+														onCheckedChange={() => onTogglePermission(perm.value)}
+														onClick={(e) => e.stopPropagation()}
+														className="shrink-0"
+													/>
 												</button>
 											);
 										})}
@@ -959,16 +807,18 @@ function PermissionsEditor({
 	);
 }
 
-// ============ Create Role Section ============
+// ============ Create Role Dialog ============
 
-function CreateRoleSection({
+function CreateRoleDialog({
+	open,
+	onOpenChange,
 	groupedPermissions,
 	onCreateRole,
-	onCancel,
 }: {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
 	groupedPermissions: Record<string, PermissionWithDescription[]>;
 	onCreateRole: (data: CreateRoleRequest["data"]) => Promise<Role>;
-	onCancel: () => void;
 }) {
 	const [creating, setCreating] = useState(false);
 	const [name, setName] = useState("");
@@ -976,6 +826,14 @@ function CreateRoleSection({
 	const [selectedPermissions, setSelectedPermissions] = useState<string[]>([]);
 	const [isDefault, setIsDefault] = useState(false);
 
+	const handleClose = () => {
+		onOpenChange(false);
+		setName("");
+		setDescription("");
+		setSelectedPermissions([]);
+		setIsDefault(false);
+	};
+
 	const handleCreate = async () => {
 		if (!name.trim()) {
 			toast.error("Please enter a role name");
@@ -990,7 +848,7 @@ function CreateRoleSection({
 				permissions: selectedPermissions,
 				is_default: isDefault,
 			});
-			onCancel();
+			handleClose();
 		} catch (error) {
 			console.error("Failed to create role:", error);
 		} finally {
@@ -1041,175 +899,117 @@ function CreateRoleSection({
 	);
 
 	return (
-		<motion.div
-			initial={{ opacity: 0, y: -10 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: -10 }}
-			className="mb-6"
-		>
-			<Card className="border-primary/20 bg-gradient-to-br from-primary/5 via-background to-background">
-				<CardHeader className="pb-4">
-					<div className="flex items-center justify-between">
-						<div className="flex items-center gap-3">
-							<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center">
-								<Plus className="h-5 w-5 text-primary" />
-							</div>
-							<div>
-								<CardTitle className="text-lg">
-									Create Custom Role
-								</CardTitle>
-								<CardDescription className="text-sm">
-									Define permissions for a new role in this
-									search space
-								</CardDescription>
-							</div>
-						</div>
-						<Button variant="ghost" size="icon" onClick={onCancel}>
-							<Trash2 className="h-4 w-4" />
-						</Button>
-					</div>
-				</CardHeader>
-				<CardContent className="space-y-6">
-					{/* Quick Start with Presets */}
-					<div className="space-y-3">
-						<Label className="text-sm font-medium">
-							Quick Start with a Template
-						</Label>
-						<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
-							{Object.entries(ROLE_PRESETS).map(
-								([key, preset]) => (
+		<Dialog open={open} onOpenChange={(v) => (v ? onOpenChange(true) : handleClose())}>
+			<DialogContent className="!flex !flex-col w-[92vw] max-w-[92vw] sm:max-w-2xl p-0 gap-0 max-h-[85vh] overflow-hidden">
+				<DialogHeader className="px-5 pt-5 pb-4 shrink-0">
+					<DialogTitle className="text-lg">Create Custom Role</DialogTitle>
+					<DialogDescription className="text-sm text-muted-foreground">
+						Define permissions for a new role in this search space
+					</DialogDescription>
+				</DialogHeader>
+				<div className="flex-1 min-h-0 overflow-y-auto">
+					<div className="px-5 py-5 space-y-5">
+						<div className="space-y-2">
+							<Label className="text-sm font-medium">Start from a template</Label>
+							<div className="grid grid-cols-3 gap-2">
+								{Object.entries(ROLE_PRESETS).map(([key, preset]) => (
 									<button
 										key={key}
 										type="button"
-										onClick={() =>
-											applyPreset(
-												key as keyof typeof ROLE_PRESETS
-											)
-										}
+										onClick={() => applyPreset(key as keyof typeof ROLE_PRESETS)}
 										className={cn(
-											"p-4 rounded-lg border-2 text-left transition-all hover:border-primary/50 hover:bg-primary/5",
+											"p-3 rounded-lg border text-left transition-colors hover:bg-muted/40",
 											selectedPermissions.length > 0 &&
-												preset.permissions.every((p) =>
-													selectedPermissions.includes(
-														p
-													)
-												)
-												? "border-primary bg-primary/10"
-												: "border-border"
+												preset.permissions.every((p) => selectedPermissions.includes(p))
+												? "border-foreground/30 bg-muted/40"
+												: "border-border/60"
 										)}
 									>
-										<div className="flex items-center gap-2 mb-1">
-											<ShieldCheck
-												className={cn(
-													"h-4 w-4",
-													key === "editor" &&
-														"text-blue-600",
-													key === "viewer" &&
-														"text-gray-600",
-													key === "contributor" &&
-														"text-emerald-600"
-												)}
-											/>
-											<span className="font-medium text-sm">
-												{preset.name}
-											</span>
-										</div>
-										<p className="text-xs text-muted-foreground">
+										<span className="font-medium text-sm">{preset.name}</span>
+										<p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
 											{preset.description}
 										</p>
 									</button>
-								)
-							)}
+								))}
+							</div>
 						</div>
-					</div>
 
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div className="space-y-2">
-							<Label htmlFor="role-name">Role Name *</Label>
-							<Input
-								id="role-name"
-								placeholder="e.g., Content Manager"
-								value={name}
-								onChange={(e) => setName(e.target.value)}
-							/>
+						<div className="grid grid-cols-2 gap-3">
+							<div className="space-y-1.5">
+								<Label htmlFor="role-name">Role Name *</Label>
+								<Input
+									id="role-name"
+									placeholder="e.g., Content Manager"
+									value={name}
+									onChange={(e) => setName(e.target.value)}
+								/>
+							</div>
+							<div className="space-y-1.5">
+								<Label htmlFor="role-description">Description</Label>
+								<Input
+									id="role-description"
+									placeholder="Brief description of this role"
+									value={description}
+									onChange={(e) => setDescription(e.target.value)}
+								/>
+							</div>
 						</div>
-						<div className="space-y-2">
-							<Label htmlFor="role-description">
-								Description
-							</Label>
-							<Input
-								id="role-description"
-								placeholder="Brief description of this role"
-								value={description}
-								onChange={(e) => setDescription(e.target.value)}
-							/>
-						</div>
-					</div>
 
-					<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-						<Checkbox
-							id="is-default"
-							checked={isDefault}
-							onCheckedChange={(checked) =>
-								setIsDefault(checked === true)
-							}
+						<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/40">
+							<Checkbox
+								id="is-default"
+								checked={isDefault}
+								onCheckedChange={(checked) => setIsDefault(checked === true)}
+							/>
+							<div className="flex-1">
+								<Label htmlFor="is-default" className="cursor-pointer font-medium text-sm">
+									Set as default role
+								</Label>
+								<p className="text-xs text-muted-foreground">
+									New members without a specific role will be assigned this role
+								</p>
+							</div>
+						</div>
+
+						<PermissionsEditor
+							groupedPermissions={groupedPermissions}
+							selectedPermissions={selectedPermissions}
+							onTogglePermission={togglePermission}
+							onToggleCategory={toggleCategory}
 						/>
-						<div className="flex-1">
-							<Label
-								htmlFor="is-default"
-								className="cursor-pointer font-medium"
-							>
-								Set as default role
-							</Label>
-							<p className="text-xs text-muted-foreground">
-								New members without a specific role will be
-								assigned this role
-							</p>
-						</div>
 					</div>
-
-					<PermissionsEditor
-						groupedPermissions={groupedPermissions}
-						selectedPermissions={selectedPermissions}
-						onTogglePermission={togglePermission}
-						onToggleCategory={toggleCategory}
-					/>
-
-					<div className="flex items-center justify-end gap-3 pt-4 border-t">
-						<Button variant="outline" onClick={onCancel}>
-							Cancel
-						</Button>
-						<Button
-							onClick={handleCreate}
-							disabled={creating || !name.trim()}
-						>
-							{creating ? (
-								<>
-									<Spinner size="sm" className="mr-2" />
-									Creating...
-								</>
-							) : (
-								<>
-									<Check className="h-4 w-4 mr-2" />
-									Create Role
-								</>
-							)}
-						</Button>
-					</div>
-				</CardContent>
-			</Card>
-		</motion.div>
+				</div>
+				<div className="flex items-center justify-end gap-3 px-5 py-3 shrink-0">
+					<Button variant="outline" onClick={handleClose}>
+						Cancel
+					</Button>
+					<Button onClick={handleCreate} disabled={creating || !name.trim()}>
+						{creating ? (
+							<>
+								<Spinner size="sm" className="mr-2" />
+								Creating
+							</>
+						) : (
+							"Create Role"
+						)}
+					</Button>
+				</div>
+			</DialogContent>
+		</Dialog>
 	);
 }
 
-// ============ Edit Role Section ============
+// ============ Edit Role Dialog ============
 
-function EditRoleSection({
+function EditRoleDialog({
+	open,
+	onOpenChange,
 	role,
 	groupedPermissions,
 	onUpdateRole,
-	onCancel,
 }: {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
 	role: Role;
 	groupedPermissions: Record<string, PermissionWithDescription[]>;
 	onUpdateRole: (
@@ -1221,16 +1021,22 @@ function EditRoleSection({
 			is_default?: boolean;
 		}
 	) => Promise<Role>;
-	onCancel: () => void;
 }) {
 	const [saving, setSaving] = useState(false);
 	const [name, setName] = useState(role.name);
 	const [description, setDescription] = useState(role.description || "");
-	const [selectedPermissions, setSelectedPermissions] = useState<string[]>(
-		role.permissions
-	);
+	const [selectedPermissions, setSelectedPermissions] = useState<string[]>(role.permissions);
 	const [isDefault, setIsDefault] = useState(role.is_default);
 
+	useEffect(() => {
+		if (open) {
+			setName(role.name);
+			setDescription(role.description || "");
+			setSelectedPermissions(role.permissions);
+			setIsDefault(role.is_default);
+		}
+	}, [open, role]);
+
 	const handleSave = async () => {
 		if (!name.trim()) {
 			toast.error("Please enter a role name");
@@ -1246,7 +1052,7 @@ function EditRoleSection({
 				is_default: isDefault,
 			});
 			toast.success("Role updated successfully");
-			onCancel();
+			onOpenChange(false);
 		} catch (error) {
 			console.error("Failed to update role:", error);
 			toast.error("Failed to update role");
@@ -1285,112 +1091,77 @@ function EditRoleSection({
 	);
 
 	return (
-		<motion.div
-			initial={{ opacity: 0, y: -10 }}
-			animate={{ opacity: 1, y: 0 }}
-			exit={{ opacity: 0, y: -10 }}
-			className="mb-6"
-		>
-			<Card className="border-primary/20 bg-gradient-to-br from-primary/5 via-background to-background">
-				<CardHeader className="pb-4">
-					<div className="flex items-center justify-between">
-						<div className="flex items-center gap-3">
-							<div className="h-10 w-10 rounded-xl bg-primary/10 flex items-center justify-center">
-								<Edit2 className="h-5 w-5 text-primary" />
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent className="!flex !flex-col w-[92vw] max-w-[92vw] sm:max-w-2xl p-0 gap-0 max-h-[85vh] overflow-hidden">
+				<DialogHeader className="px-5 py-4 shrink-0">
+					<DialogTitle className="text-base">Edit Role</DialogTitle>
+					<DialogDescription className="text-xs">
+						Modify permissions for &quot;{role.name}&quot;
+					</DialogDescription>
+				</DialogHeader>
+				<div className="flex-1 min-h-0 overflow-y-auto">
+					<div className="px-5 py-5 space-y-5">
+						<div className="grid grid-cols-2 gap-3">
+							<div className="space-y-1.5">
+								<Label htmlFor="edit-role-name">Role Name *</Label>
+								<Input
+									id="edit-role-name"
+									placeholder="e.g., Content Manager"
+									value={name}
+									onChange={(e) => setName(e.target.value)}
+								/>
 							</div>
-							<div>
-								<CardTitle className="text-lg">
-									Edit Role
-								</CardTitle>
-								<CardDescription className="text-sm">
-									Modify permissions for &quot;{role.name}
-									&quot;
-								</CardDescription>
+							<div className="space-y-1.5">
+								<Label htmlFor="edit-role-description">Description</Label>
+								<Input
+									id="edit-role-description"
+									placeholder="Brief description of this role"
+									value={description}
+									onChange={(e) => setDescription(e.target.value)}
+								/>
 							</div>
 						</div>
-						<Button variant="ghost" size="icon" onClick={onCancel}>
-							<Trash2 className="h-4 w-4" />
-						</Button>
-					</div>
-				</CardHeader>
-				<CardContent className="space-y-6">
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-						<div className="space-y-2">
-							<Label htmlFor="edit-role-name">
-								Role Name *
-							</Label>
-							<Input
-								id="edit-role-name"
-								placeholder="e.g., Content Manager"
-								value={name}
-								onChange={(e) => setName(e.target.value)}
-							/>
-						</div>
-						<div className="space-y-2">
-							<Label htmlFor="edit-role-description">
-								Description
-							</Label>
-							<Input
-								id="edit-role-description"
-								placeholder="Brief description of this role"
-								value={description}
-								onChange={(e) => setDescription(e.target.value)}
-							/>
-						</div>
-					</div>
 
-					<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/50">
-						<Checkbox
-							id="edit-is-default"
-							checked={isDefault}
-							onCheckedChange={(checked) =>
-								setIsDefault(checked === true)
-							}
+						<div className="flex items-center gap-3 p-3 rounded-lg bg-muted/40">
+							<Checkbox
+								id="edit-is-default"
+								checked={isDefault}
+								onCheckedChange={(checked) => setIsDefault(checked === true)}
+							/>
+							<div className="flex-1">
+								<Label htmlFor="edit-is-default" className="cursor-pointer font-medium text-sm">
+									Set as default role
+								</Label>
+								<p className="text-xs text-muted-foreground">
+									New members without a specific role will be assigned this role
+								</p>
+							</div>
+						</div>
+
+						<PermissionsEditor
+							groupedPermissions={groupedPermissions}
+							selectedPermissions={selectedPermissions}
+							onTogglePermission={togglePermission}
+							onToggleCategory={toggleCategory}
 						/>
-						<div className="flex-1">
-							<Label
-								htmlFor="edit-is-default"
-								className="cursor-pointer font-medium"
-							>
-								Set as default role
-							</Label>
-							<p className="text-xs text-muted-foreground">
-								New members without a specific role will be
-								assigned this role
-							</p>
-						</div>
 					</div>
-
-					<PermissionsEditor
-						groupedPermissions={groupedPermissions}
-						selectedPermissions={selectedPermissions}
-						onTogglePermission={togglePermission}
-						onToggleCategory={toggleCategory}
-					/>
-
-					<div className="flex items-center justify-end gap-3 pt-4 border-t">
-						<Button variant="outline" onClick={onCancel}>
-							Cancel
-						</Button>
-						<Button
-							onClick={handleSave}
-							disabled={saving || !name.trim()}
-						>
-							{saving ? (
-								<>
-									<Spinner size="sm" className="mr-2" />
-									Saving...
-								</>
-							) : (
-								<>
-									<Check className="h-4 w-4 mr-2" />
-									Save Changes
-								</>
-							)}
-						</Button>
-					</div>
-				</CardContent>
-			</Card>
-		</motion.div>
+				</div>
+				<div className="flex items-center justify-end gap-3 px-5 py-3 border-t shrink-0">
+					<Button variant="outline" onClick={() => onOpenChange(false)}>
+						Cancel
+					</Button>
+					<Button onClick={handleSave} disabled={saving || !name.trim()}>
+						{saving ? (
+							<>
+								<Spinner size="sm" className="mr-2" />
+								Saving...
+							</>
+						) : (
+							"Save Changes"
+						)}
+					</Button>
+				</div>
+			</DialogContent>
+		</Dialog>
 	);
 }

From ccf8c063da1bebd7c0138b01501b88649bf6c49b Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 22:55:54 +0530
Subject: [PATCH 06/18] feat: update settings navigation to include section
 parameters for improved user experience

---
 .../[search_space_id]/onboard/page.tsx        |  2 +-
 .../[search_space_id]/settings/page.tsx       | 22 ++++++++++++++-----
 .../dashboard/[search_space_id]/team/page.tsx | 22 ++++++++++---------
 .../assistant-ui/connector-popup.tsx          |  2 +-
 .../assistant-ui/document-upload-popup.tsx    |  2 +-
 .../layout/providers/LayoutDataProvider.tsx   |  4 ++--
 .../layout/ui/sidebar/ChatListItem.tsx        |  4 ++--
 .../components/new-chat/chat-share-button.tsx |  2 +-
 .../public-chat-snapshot-row.tsx              | 18 ++++++++-------
 9 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
index 8709a4491..17db12ab7 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
@@ -259,7 +259,7 @@ export default function OnboardPage() {
 						You can add more configurations and customize settings anytime in{" "}
 						<button
 							type="button"
-							onClick={() => router.push(`/dashboard/${searchSpaceId}/settings`)}
+							onClick={() => router.push(`/dashboard/${searchSpaceId}/settings?section=general`)}
 							className="text-violet-500 hover:underline"
 						>
 							Settings
diff --git a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
index 36d0c5753..d72bcb977 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
@@ -16,7 +16,7 @@ import {
 	X,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useState } from "react";
 import { PublicChatSnapshotsManager } from "@/components/public-chat-snapshots/public-chat-snapshots-manager";
@@ -248,7 +248,7 @@ function SettingsContent({
 					{/* Section Header */}
 					<AnimatePresence mode="wait">
 						<motion.div
-							key={activeSection + "-header"}
+							key={`${activeSection}-header`}
 							initial={{ opacity: 0, y: 10 }}
 							animate={{ opacity: 1, y: 0 }}
 							exit={{ opacity: 0, y: -10 }}
@@ -317,14 +317,26 @@ function SettingsContent({
 	);
 }
 
+const VALID_SECTIONS = new Set(settingsNavItems.map((item) => item.id));
+const DEFAULT_SECTION = "general";
+
 export default function SettingsPage() {
 	const router = useRouter();
 	const params = useParams();
+	const searchParams = useSearchParams();
 	const searchSpaceId = Number(params.search_space_id);
-	const [activeSection, setActiveSection] = useState("general");
 	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
-	// Track settings section view
+	const sectionParam = searchParams.get("section");
+	const activeSection = sectionParam && VALID_SECTIONS.has(sectionParam) ? sectionParam : DEFAULT_SECTION;
+
+	const handleSectionChange = useCallback(
+		(section: string) => {
+			router.replace(`/dashboard/${searchSpaceId}/settings?section=${section}`, { scroll: false });
+		},
+		[router, searchSpaceId]
+	);
+
 	useEffect(() => {
 		trackSettingsViewed(searchSpaceId, activeSection);
 	}, [searchSpaceId, activeSection]);
@@ -344,7 +356,7 @@ export default function SettingsPage() {
 				<div className="flex h-full w-full overflow-hidden bg-background md:rounded-xl md:border md:shadow-sm">
 					<SettingsSidebar
 						activeSection={activeSection}
-						onSectionChange={setActiveSection}
+						onSectionChange={handleSectionChange}
 						onBackToApp={handleBackToApp}
 						isOpen={isSidebarOpen}
 						onClose={() => setIsSidebarOpen(false)}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 6ed061916..a3f644430 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -731,7 +731,7 @@ function CreateInviteDialog({
 								</code>
 								<Button variant="outline" size="sm" onClick={copyLink} className="shrink-0">
 									{copiedLink ? (
-										<Check className="h-4 w-4 text-emerald-500" />
+										<Check className="h-4 w-4" />
 									) : (
 										<Copy className="h-4 w-4" />
 									)}
@@ -902,7 +902,7 @@ function AllInvitesDialog({
 					{invites.map((invite) => (
 						<div
 							key={invite.id}
-							className="rounded-lg border border-border/40 p-3 space-y-2.5 transition-colors hover:bg-muted/30"
+							className="rounded-lg border border-border/40 p-3 space-y-2.5"
 						>
 							<div className="flex items-center justify-between gap-2">
 								<div className="flex items-center gap-2 min-w-0">
@@ -929,7 +929,7 @@ function AllInvitesDialog({
 								</div>
 								<AlertDialog>
 									<AlertDialogTrigger asChild>
-										<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-destructive hover:text-destructive">
+										<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive">
 											<Trash2 className="h-3.5 w-3.5" />
 										</Button>
 									</AlertDialogTrigger>
@@ -954,14 +954,16 @@ function AllInvitesDialog({
 								</AlertDialog>
 							</div>
 							<div className="flex items-center gap-2 rounded-md bg-muted p-2">
-								<code className="flex-1 min-w-0 text-sm select-all overflow-x-auto whitespace-nowrap">
-									{typeof window !== "undefined"
-										? `${window.location.origin}/invite/${invite.invite_code}`
-										: `/invite/${invite.invite_code}`}
-								</code>
-								<Button variant="outline" size="sm" className="shrink-0" onClick={() => copyLink(invite)}>
+								<div className="flex-1 min-w-0 overflow-x-auto scrollbar-hide">
+									<code className="text-sm select-all whitespace-nowrap">
+										{typeof window !== "undefined"
+											? `${window.location.origin}/invite/${invite.invite_code}`
+											: `/invite/${invite.invite_code}`}
+									</code>
+								</div>
+								<Button variant="ghost" size="sm" className="shrink-0" onClick={() => copyLink(invite)}>
 									{copiedId === invite.id ? (
-										<Check className="h-4 w-4 text-emerald-500" />
+										<Check className="h-4 w-4" />
 									) : (
 										<Copy className="h-4 w-4" />
 									)}
diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 24eb5bc60..bac5c44a3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -374,7 +374,7 @@ export const ConnectorIndicator: FC<{ hideTrigger?: boolean }> = ({ hideTrigger
 														: "You need to configure a Document Summary LLM before adding connectors. This LLM is used to process and summarize documents from your connected sources."}
 												</p>
 												<Button asChild size="sm" variant="outline">
-													<Link href={`/dashboard/${searchSpaceId}/settings`}>
+													<Link href={`/dashboard/${searchSpaceId}/settings?section=models`}>
 														<Settings className="mr-2 h-4 w-4" />
 														Go to Settings
 													</Link>
diff --git a/surfsense_web/components/assistant-ui/document-upload-popup.tsx b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
index b8f2eb1cf..b42994c65 100644
--- a/surfsense_web/components/assistant-ui/document-upload-popup.tsx
+++ b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
@@ -156,7 +156,7 @@ const DocumentUploadPopupContent: FC<{
 											: "You need to configure a Document Summary LLM before uploading files. This LLM is used to process and summarize your uploaded documents."}
 									</p>
 									<Button asChild size="sm" variant="outline">
-										<Link href={`/dashboard/${searchSpaceId}/settings`}>
+										<Link href={`/dashboard/${searchSpaceId}/settings?section=models`}>
 											<Settings className="mr-2 h-4 w-4" />
 											Go to Settings
 										</Link>
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index aa6d2984d..f45dcdbf5 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -334,7 +334,7 @@ export function LayoutDataProvider({
 
 	const handleSearchSpaceSettings = useCallback(
 		(space: SearchSpace) => {
-			router.push(`/dashboard/${space.id}/settings`);
+			router.push(`/dashboard/${space.id}/settings?section=general`);
 		},
 		[router]
 	);
@@ -478,7 +478,7 @@ export function LayoutDataProvider({
 	);
 
 	const handleSettings = useCallback(() => {
-		router.push(`/dashboard/${searchSpaceId}/settings`);
+		router.push(`/dashboard/${searchSpaceId}/settings?section=general`);
 	}, [router, searchSpaceId]);
 
 	const handleManageMembers = useCallback(() => {
diff --git a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
index 157a2ae04..c41964142 100644
--- a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
@@ -4,7 +4,7 @@ import {
 	ArchiveIcon,
 	MessageSquare,
 	MoreHorizontal,
-	PencilIcon,
+	PenLine,
 	RotateCcwIcon,
 	Trash2,
 } from "lucide-react";
@@ -74,7 +74,7 @@ export function ChatListItem({
 									onRename();
 								}}
 							>
-								<PencilIcon className="mr-2 h-4 w-4" />
+								<PenLine className="mr-2 h-4 w-4" />
 								<span>{t("rename") || "Rename"}</span>
 							</DropdownMenuItem>
 						)}
diff --git a/surfsense_web/components/new-chat/chat-share-button.tsx b/surfsense_web/components/new-chat/chat-share-button.tsx
index 0cd23b705..99da23ff8 100644
--- a/surfsense_web/components/new-chat/chat-share-button.tsx
+++ b/surfsense_web/components/new-chat/chat-share-button.tsx
@@ -144,7 +144,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 					<TooltipTrigger asChild>
 						<button
 							type="button"
-							onClick={() => router.push(`/dashboard/${params.search_space_id}/settings`)}
+							onClick={() => router.push(`/dashboard/${params.search_space_id}/settings?section=public-links`)}
 							className="flex items-center justify-center h-8 w-8 rounded-md bg-muted/50 hover:bg-muted transition-colors"
 						>
 							<Earth className="h-4 w-4 text-muted-foreground" />
diff --git a/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx b/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx
index 568c52ded..324665d05 100644
--- a/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx
+++ b/surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx
@@ -35,12 +35,12 @@ export function PublicChatSnapshotRow({
 	memberMap,
 }: PublicChatSnapshotRowProps) {
 	const [copied, setCopied] = useState(false);
-	const copyTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+	const copyTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
 
 	const handleCopyClick = useCallback(() => {
 		onCopy(snapshot);
 		setCopied(true);
-		clearTimeout(copyTimeoutRef.current);
+		if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current);
 		copyTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
 	}, [onCopy, snapshot]);
 
@@ -117,12 +117,14 @@ export function PublicChatSnapshotRow({
 
 				{/* Public URL – selectable fallback for manual copy */}
 				<div className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-2.5 py-1.5">
-					<p
-						className="min-w-0 flex-1 text-[10px] font-mono text-muted-foreground break-all select-all cursor-text"
-						title={snapshot.public_url}
-					>
-						{snapshot.public_url}
-					</p>
+					<div className="min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+						<p
+							className="text-[10px] font-mono text-muted-foreground whitespace-nowrap select-all cursor-text"
+							title={snapshot.public_url}
+						>
+							{snapshot.public_url}
+						</p>
+					</div>
 					<TooltipProvider>
 						<Tooltip>
 							<TooltipTrigger asChild>

From 3103727eff097239daba8692db30220f1eb9949c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 22:59:30 +0530
Subject: [PATCH 07/18] feat: remove unused icons from CreateSearchSpaceDialog
 for cleaner UI

---
 .../components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx b/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
index 63a430004..2523d08b7 100644
--- a/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
+++ b/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
@@ -2,7 +2,6 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAtomValue } from "jotai";
-import { Plus, Search } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -86,9 +85,6 @@ export function CreateSearchSpaceDialog({ open, onOpenChange }: CreateSearchSpac
 			<DialogContent className="max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
 				<DialogHeader className="space-y-2 pb-2">
 					<div className="flex items-center gap-2 sm:gap-3">
-						<div className="flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0">
-							<Search className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
-						</div>
 						<div className="flex-1 min-w-0">
 							<DialogTitle className="text-base sm:text-lg">{t("create_title")}</DialogTitle>
 							<DialogDescription className="text-xs sm:text-sm mt-0.5">
@@ -164,7 +160,6 @@ export function CreateSearchSpaceDialog({ open, onOpenChange }: CreateSearchSpac
 									</>
 								) : (
 									<>
-										<Plus className="-mr-1 h-4 w-4" />
 										{t("create_button")}
 									</>
 								)}

From 12b119be591f20961057943dee031864d5fee48c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 23:24:07 +0530
Subject: [PATCH 08/18] feat: enhance UI components by replacing unused icons
 and adding select-none class for improved text selection behavior

---
 .../(manage)/components/DocumentTypeIcon.tsx  |  2 +-
 .../(manage)/components/DocumentsFilters.tsx  | 10 +++---
 .../components/DocumentsTableShell.tsx        | 32 +++++++++----------
 .../components/PaginationControls.tsx         |  2 +-
 .../[search_space_id]/logs/(manage)/page.tsx  |  3 +-
 .../assistant-ui/document-upload-popup.tsx    |  2 +-
 6 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx
index dfd2c6d85..c07f34935 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx
@@ -67,7 +67,7 @@ export function DocumentTypeChip({ type, className }: { type: string; className?
 
 	const chip = (
 		<span
-			className={`inline-flex items-center gap-1.5 rounded-full bg-accent/80 px-2.5 py-1 text-xs font-medium text-accent-foreground/70 shadow-sm max-w-full overflow-hidden ${className ?? ""}`}
+			className={`inline-flex items-center gap-1.5 rounded-full bg-accent/80 px-2.5 py-1 text-xs font-medium text-accent-foreground shadow-sm max-w-full overflow-hidden ${className ?? ""}`}
 		>
 			<span className="flex-shrink-0">{icon}</span>
 			<span ref={textRef} className="truncate min-w-0">
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
index c954474c6..e31cb508b 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
@@ -3,13 +3,13 @@
 import { useSetAtom } from "jotai";
 import {
 	CircleAlert,
-	CircleX,
 	FilePlus2,
 	FileType,
 	ListFilter,
 	Search,
 	SlidersHorizontal,
 	Trash,
+	X,
 } from "lucide-react";
 import { motion } from "motion/react";
 import { useTranslations } from "next-intl";
@@ -81,7 +81,7 @@ export function DocumentsFilters({
 
 	return (
 		<motion.div
-			className="flex flex-col gap-4"
+			className="flex flex-col gap-4 select-none"
 			initial={{ opacity: 0, y: 10 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ type: "spring", stiffness: 300, damping: 30, delay: 0.1 }}
@@ -126,7 +126,7 @@ export function DocumentsFilters({
 					<Input
 						id={`${id}-input`}
 						ref={inputRef}
-						className="peer h-9 w-full pl-9 pr-9 text-sm bg-background border-border/60 focus-visible:ring-1 focus-visible:ring-ring/30"
+						className="peer h-9 w-full pl-9 pr-9 text-sm bg-background border-border/60 focus-visible:ring-1 focus-visible:ring-ring/30 select-none focus:select-text"
 						value={searchValue}
 						onChange={(e) => onSearch(e.target.value)}
 						placeholder="Filter by title"
@@ -135,7 +135,7 @@ export function DocumentsFilters({
 					/>
 					{Boolean(searchValue) && (
 						<motion.button
-							className="absolute inset-y-0 right-0 flex h-full w-9 items-center justify-center rounded-r-md text-muted-foreground/60 hover:text-foreground transition-colors"
+							className="absolute inset-y-0 right-0 flex h-full w-9 items-center justify-center rounded-r-md text-muted-foreground hover:text-foreground transition-colors"
 							aria-label="Clear filter"
 							onClick={() => {
 								onSearch("");
@@ -147,7 +147,7 @@ export function DocumentsFilters({
 							whileHover={{ scale: 1.1 }}
 							whileTap={{ scale: 0.9 }}
 						>
-							<CircleX size={14} strokeWidth={2} aria-hidden="true" />
+							<X size={14} strokeWidth={2} aria-hidden="true" />
 						</motion.button>
 					)}
 				</motion.div>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
index 02c359be9..905f00eae 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
@@ -336,7 +336,7 @@ export function DocumentsTableShell({
 
 	return (
 		<motion.div
-			className="rounded-lg border border-border/40 bg-background overflow-hidden"
+			className="rounded-lg border border-border/40 bg-background overflow-hidden select-none"
 			initial={{ opacity: 0, y: 20 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ type: "spring", stiffness: 300, damping: 30, delay: 0.2 }}
@@ -482,7 +482,7 @@ export function DocumentsTableShell({
 				</div>
 			) : (
 				<>
-					{/* Desktop Table View - Notion Style */}
+					{/* Desktop Table View */}
 					<div className="hidden md:flex md:flex-col">
 						{/* Fixed Header */}
 						<Table className="table-fixed w-full">
@@ -765,20 +765,20 @@ export function DocumentsTableShell({
 
 			{/* Document Content Viewer - lazy loads content on-demand */}
 			<Dialog open={!!viewingDoc} onOpenChange={(open) => !open && handleCloseViewer()}>
-				<DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
-					<DialogHeader>
-						<DialogTitle>{viewingDoc?.title}</DialogTitle>
-					</DialogHeader>
-					<div className="mt-4">
-						{viewingLoading ? (
-							<div className="flex items-center justify-center py-12">
-								<Spinner size="lg" className="text-muted-foreground" />
-							</div>
-						) : (
-							<MarkdownViewer content={viewingContent} />
-						)}
-					</div>
-				</DialogContent>
+			<DialogContent className="max-w-4xl max-h-[80vh] flex flex-col overflow-hidden pb-0">
+				<DialogHeader className="flex-shrink-0">
+					<DialogTitle>{viewingDoc?.title}</DialogTitle>
+				</DialogHeader>
+				<div className="mt-4 overflow-y-auto flex-1 min-h-0 px-6 select-text">
+					{viewingLoading ? (
+						<div className="flex items-center justify-center py-12">
+							<Spinner size="lg" className="text-muted-foreground" />
+						</div>
+					) : (
+						<MarkdownViewer content={viewingContent} />
+					)}
+				</div>
+			</DialogContent>
 			</Dialog>
 		</motion.div>
 	);
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/PaginationControls.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/PaginationControls.tsx
index bd8a9f1cc..03d5066b2 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/PaginationControls.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/PaginationControls.tsx
@@ -30,7 +30,7 @@ export function PaginationControls({
 
 	return (
 		<motion.div
-			className="flex items-center justify-end gap-3 py-3 px-2"
+			className="flex items-center justify-end gap-3 py-3 px-2 select-none"
 			initial={{ opacity: 0, y: 10 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ type: "spring", stiffness: 300, damping: 30, delay: 0.3 }}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
index 0070b20be..10c0843de 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
@@ -29,7 +29,6 @@ import {
 	ChevronRight,
 	ChevronUp,
 	CircleAlert,
-	CircleX,
 	Clock,
 	Columns3,
 	Filter,
@@ -741,7 +740,7 @@ function LogsFilters({
 								inputRef.current?.focus();
 							}}
 						>
-							<CircleX size={16} strokeWidth={2} />
+							<X size={16} strokeWidth={2} />
 						</Button>
 					)}
 				</motion.div>
diff --git a/surfsense_web/components/assistant-ui/document-upload-popup.tsx b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
index b42994c65..bb8bd3b71 100644
--- a/surfsense_web/components/assistant-ui/document-upload-popup.tsx
+++ b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
@@ -120,7 +120,7 @@ const DocumentUploadPopupContent: FC<{
 
 	return (
 		<Dialog open={isOpen} onOpenChange={onOpenChange}>
-			<DialogContent className="max-w-4xl w-[95vw] sm:w-full h-[calc(100dvh-2rem)] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-12 [&>button]:top-3 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button]:z-[100] [&>button_svg]:size-4 sm:[&>button_svg]:size-5">
+			<DialogContent className="select-none max-w-4xl w-[95vw] sm:w-full h-[calc(100dvh-2rem)] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-12 [&>button]:top-3 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button]:z-[100] [&>button_svg]:size-4 sm:[&>button_svg]:size-5">
 				<DialogTitle className="sr-only">Upload Document</DialogTitle>
 
 				{/* Scrollable container for mobile */}

From f3652ad7cf4fc104ea5854efd585eda371f7b37f Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 23:41:00 +0530
Subject: [PATCH 09/18] feat: add created_by_email field to document schema and
 update related components for improved user information display

---
 .../app/routes/documents_routes.py            | 12 ++++---
 surfsense_backend/app/schemas/documents.py    |  5 ++-
 .../components/DocumentsTableShell.tsx        | 31 ++++++++++++++----
 .../documents/(manage)/components/types.ts    |  1 +
 .../documents/(manage)/page.tsx               |  1 +
 .../contracts/types/document.types.ts         |  1 +
 surfsense_web/hooks/use-documents.ts          | 32 ++++++++++++++++---
 7 files changed, 65 insertions(+), 18 deletions(-)

diff --git a/surfsense_backend/app/routes/documents_routes.py b/surfsense_backend/app/routes/documents_routes.py
index ed4d6dea3..4349edc20 100644
--- a/surfsense_backend/app/routes/documents_routes.py
+++ b/surfsense_backend/app/routes/documents_routes.py
@@ -373,10 +373,11 @@ async def read_documents(
         # Convert database objects to API-friendly format
         api_documents = []
         for doc in db_documents:
-            # Get user name (display_name or email fallback)
             created_by_name = None
+            created_by_email = None
             if doc.created_by:
-                created_by_name = doc.created_by.display_name or doc.created_by.email
+                created_by_name = doc.created_by.display_name
+                created_by_email = doc.created_by.email
 
             # Parse status from JSONB
             status_data = None
@@ -400,6 +401,7 @@ async def read_documents(
                     search_space_id=doc.search_space_id,
                     created_by_id=doc.created_by_id,
                     created_by_name=created_by_name,
+                    created_by_email=created_by_email,
                     status=status_data,
                 )
             )
@@ -528,10 +530,11 @@ async def search_documents(
         # Convert database objects to API-friendly format
         api_documents = []
         for doc in db_documents:
-            # Get user name (display_name or email fallback)
             created_by_name = None
+            created_by_email = None
             if doc.created_by:
-                created_by_name = doc.created_by.display_name or doc.created_by.email
+                created_by_name = doc.created_by.display_name
+                created_by_email = doc.created_by.email
 
             # Parse status from JSONB
             status_data = None
@@ -555,6 +558,7 @@ async def search_documents(
                     search_space_id=doc.search_space_id,
                     created_by_id=doc.created_by_id,
                     created_by_name=created_by_name,
+                    created_by_email=created_by_email,
                     status=status_data,
                 )
             )
diff --git a/surfsense_backend/app/schemas/documents.py b/surfsense_backend/app/schemas/documents.py
index 2ca341921..be464f9ec 100644
--- a/surfsense_backend/app/schemas/documents.py
+++ b/surfsense_backend/app/schemas/documents.py
@@ -60,9 +60,8 @@ class DocumentRead(BaseModel):
     updated_at: datetime | None
     search_space_id: int
     created_by_id: UUID | None = None  # User who created/uploaded this document
-    created_by_name: str | None = (
-        None  # Display name or email of the user who created this document
-    )
+    created_by_name: str | None = None
+    created_by_email: str | None = None
     status: DocumentStatusSchema | None = (
         None  # Processing status (ready, processing, failed)
     )
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
index 905f00eae..6d4187593 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
@@ -453,7 +453,7 @@ export function DocumentsTableShell({
 			) : error ? (
 				<div className="flex h-[50vh] w-full items-center justify-center">
 					<div className="flex flex-col items-center gap-3">
-						<AlertCircle className="h-8 w-8 text-destructive/60" />
+						<AlertCircle className="h-8 w-8 text-destructive" />
 						<p className="text-sm text-destructive">{t("error_loading")}</p>
 					</div>
 				</div>
@@ -627,11 +627,30 @@ export function DocumentsTableShell({
 														<DocumentTypeChip type={doc.document_type} />
 													</TableCell>
 												)}
-												{columnVisibility.created_by && (
-													<TableCell className="w-36 py-2.5 text-sm text-foreground truncate border-r border-border/40">
-														{doc.created_by_name || "—"}
-													</TableCell>
-												)}
+											{columnVisibility.created_by && (
+												<TableCell className="w-36 py-2.5 text-sm text-foreground truncate border-r border-border/40">
+													{doc.created_by_name ? (
+														doc.created_by_email ? (
+															<Tooltip>
+																<TooltipTrigger asChild>
+																	<span className="cursor-default truncate block">
+																		{doc.created_by_name}
+																	</span>
+																</TooltipTrigger>
+																<TooltipContent side="top" align="start">
+																	{doc.created_by_email}
+																</TooltipContent>
+															</Tooltip>
+														) : (
+															<span className="truncate block">{doc.created_by_name}</span>
+														)
+													) : (
+														<span className="truncate block">
+															{doc.created_by_email || "—"}
+														</span>
+													)}
+												</TableCell>
+											)}
 												{columnVisibility.created_at && (
 													<TableCell className="w-32 py-2.5 text-sm text-foreground border-r border-border/40">
 														<Tooltip>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/types.ts b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/types.ts
index 9dcf0ef00..d87f7374b 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/types.ts
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/types.ts
@@ -16,6 +16,7 @@ export type Document = {
 	search_space_id: number;
 	created_by_id?: string | null;
 	created_by_name?: string | null;
+	created_by_email?: string | null;
 	status?: DocumentStatus;
 };
 
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
index 585a09c43..824460a5d 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
@@ -115,6 +115,7 @@ export default function DocumentsTable() {
 				title: item.title,
 				created_by_id: item.created_by_id ?? null,
 				created_by_name: item.created_by_name ?? null,
+				created_by_email: item.created_by_email ?? null,
 				created_at: item.created_at,
 				status: (
 					item as {
diff --git a/surfsense_web/contracts/types/document.types.ts b/surfsense_web/contracts/types/document.types.ts
index f96ecf85e..6ec577f51 100644
--- a/surfsense_web/contracts/types/document.types.ts
+++ b/surfsense_web/contracts/types/document.types.ts
@@ -44,6 +44,7 @@ export const document = z.object({
 	search_space_id: z.number(),
 	created_by_id: z.string().nullable().optional(),
 	created_by_name: z.string().nullable().optional(),
+	created_by_email: z.string().nullable().optional(),
 });
 
 export const extensionDocumentContent = z.object({
diff --git a/surfsense_web/hooks/use-documents.ts b/surfsense_web/hooks/use-documents.ts
index e3a315cd1..55d48c4f1 100644
--- a/surfsense_web/hooks/use-documents.ts
+++ b/surfsense_web/hooks/use-documents.ts
@@ -26,7 +26,7 @@ interface DocumentElectric {
 	status: DocumentStatusType | null;
 }
 
-// Document for display (with resolved user name)
+// Document for display (with resolved user name and email)
 export interface DocumentDisplay {
 	id: number;
 	search_space_id: number;
@@ -34,6 +34,7 @@ export interface DocumentDisplay {
 	title: string;
 	created_by_id: string | null;
 	created_by_name: string | null;
+	created_by_email: string | null;
 	created_at: string;
 	status: DocumentStatusType;
 }
@@ -94,8 +95,9 @@ export function useDocuments(
 	// Track if initial API load is complete (source of truth)
 	const apiLoadedRef = useRef(false);
 
-	// User cache: userId → displayName
+	// User cache: userId → displayName / email
 	const userCacheRef = useRef<Map<string, string>>(new Map());
+	const emailCacheRef = useRef<Map<string, string>>(new Map());
 
 	// Electric sync refs
 	const syncHandleRef = useRef<SyncHandle | null>(null);
@@ -119,10 +121,21 @@ export function useDocuments(
 
 	// Populate user cache from API response
 	const populateUserCache = useCallback(
-		(items: Array<{ created_by_id?: string | null; created_by_name?: string | null }>) => {
+		(
+			items: Array<{
+				created_by_id?: string | null;
+				created_by_name?: string | null;
+				created_by_email?: string | null;
+			}>
+		) => {
 			for (const item of items) {
-				if (item.created_by_id && item.created_by_name) {
-					userCacheRef.current.set(item.created_by_id, item.created_by_name);
+				if (item.created_by_id) {
+					if (item.created_by_name) {
+						userCacheRef.current.set(item.created_by_id, item.created_by_name);
+					}
+					if (item.created_by_email) {
+						emailCacheRef.current.set(item.created_by_id, item.created_by_email);
+					}
 				}
 			}
 		},
@@ -138,6 +151,7 @@ export function useDocuments(
 			title: string;
 			created_by_id?: string | null;
 			created_by_name?: string | null;
+			created_by_email?: string | null;
 			created_at: string;
 			status?: DocumentStatusType | null;
 		}): DocumentDisplay => ({
@@ -147,6 +161,7 @@ export function useDocuments(
 			title: item.title,
 			created_by_id: item.created_by_id ?? null,
 			created_by_name: item.created_by_name ?? null,
+			created_by_email: item.created_by_email ?? null,
 			created_at: item.created_at,
 			status: item.status ?? { state: "ready" },
 		}),
@@ -160,6 +175,9 @@ export function useDocuments(
 			created_by_name: doc.created_by_id
 				? (userCacheRef.current.get(doc.created_by_id) ?? null)
 				: null,
+			created_by_email: doc.created_by_id
+				? (emailCacheRef.current.get(doc.created_by_id) ?? null)
+				: null,
 			status: doc.status ?? { state: "ready" },
 		}),
 		[]
@@ -351,6 +369,9 @@ export function useDocuments(
 											created_by_name: doc.created_by_id
 												? (userCacheRef.current.get(doc.created_by_id) ?? null)
 												: null,
+											created_by_email: doc.created_by_id
+												? (emailCacheRef.current.get(doc.created_by_id) ?? null)
+												: null,
 										}))
 									);
 								}
@@ -455,6 +476,7 @@ export function useDocuments(
 			setAllDocuments([]);
 			apiLoadedRef.current = false;
 			userCacheRef.current.clear();
+			emailCacheRef.current.clear();
 		}
 		prevSearchSpaceIdRef.current = searchSpaceId;
 	}, [searchSpaceId]);

From f0d170a595d64f0df7c71855f6257f54abcecc2a Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 21 Feb 2026 23:59:04 +0530
Subject: [PATCH 10/18] feat: improve chat renaming functionality with dialog
 support in sidebar components

---
 .../(manage)/components/DocumentsFilters.tsx  |   4 +-
 .../assistant-ui/document-upload-popup.tsx    |   3 -
 .../layout/providers/LayoutDataProvider.tsx   |   3 +-
 .../ui/sidebar/AllPrivateChatsSidebar.tsx     | 101 ++++++++++++++++-
 .../ui/sidebar/AllSharedChatsSidebar.tsx      | 103 +++++++++++++++++-
 .../ui/sidebar/SidebarSlideOutPanel.tsx       |   2 +-
 .../components/sources/DocumentUploadTab.tsx  |   3 +-
 surfsense_web/messages/en.json                |   5 +-
 surfsense_web/messages/es.json                |   3 +-
 surfsense_web/messages/hi.json                |   3 +-
 surfsense_web/messages/pt.json                |   3 +-
 surfsense_web/messages/zh.json                |   3 +-
 12 files changed, 213 insertions(+), 23 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
index e31cb508b..ff9e1f246 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
@@ -3,12 +3,12 @@
 import { useSetAtom } from "jotai";
 import {
 	CircleAlert,
-	FilePlus2,
 	FileType,
 	ListFilter,
 	Search,
 	SlidersHorizontal,
 	Trash,
+	Upload,
 	X,
 } from "lucide-react";
 import { motion } from "motion/react";
@@ -96,7 +96,7 @@ export function DocumentsFilters({
 						size="sm"
 						className="h-9 gap-2 bg-white text-gray-700 border-white hover:bg-gray-50 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100"
 					>
-						<FilePlus2 size={16} />
+						<Upload size={16} />
 						<span>Upload documents</span>
 					</Button>
 					<Button
diff --git a/surfsense_web/components/assistant-ui/document-upload-popup.tsx b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
index bb8bd3b71..5e2a0e437 100644
--- a/surfsense_web/components/assistant-ui/document-upload-popup.tsx
+++ b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
@@ -129,9 +129,6 @@ const DocumentUploadPopupContent: FC<{
 					<div className="sticky top-0 z-20 bg-muted px-4 sm:px-12 pt-4 sm:pt-10 pb-2 sm:pb-0">
 						{/* Upload header */}
 						<div className="flex items-center gap-2 sm:gap-4 mb-2 sm:mb-6">
-							<div className="flex h-9 w-9 sm:h-14 sm:w-14 items-center justify-center rounded-lg sm:rounded-xl bg-primary/10 border border-primary/20 flex-shrink-0">
-								<Upload className="size-4 sm:size-7 text-primary" />
-							</div>
 							<div className="flex-1 min-w-0 pr-8 sm:pr-0">
 								<h2 className="text-base sm:text-2xl font-semibold tracking-tight">
 									Upload Documents
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index f45dcdbf5..0f6aaaf0d 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -703,7 +703,6 @@ export function LayoutDataProvider({
 				<DialogContent className="sm:max-w-md">
 					<DialogHeader>
 						<DialogTitle className="flex items-center gap-2">
-							<PencilIcon className="h-5 w-5" />
 							<span>{tSidebar("rename_chat") || "Rename Chat"}</span>
 						</DialogTitle>
 						<DialogDescription>
@@ -736,7 +735,7 @@ export function LayoutDataProvider({
 							{isRenamingChat ? (
 								<>
 									<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-									{tSidebar("renaming") || "Renaming..."}
+									{tSidebar("renaming") || "Renaming"}
 								</>
 							) : (
 								<>
diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index 3dd77ea1d..f3e659812 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -6,6 +6,7 @@ import {
 	ArchiveIcon,
 	MessageCircleMore,
 	MoreHorizontal,
+	PenLine,
 	RotateCcwIcon,
 	Search,
 	Trash2,
@@ -17,6 +18,14 @@ import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -69,6 +78,10 @@ export function AllPrivateChatsSidebar({
 	const [searchQuery, setSearchQuery] = useState("");
 	const [showArchived, setShowArchived] = useState(false);
 	const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
+	const [showRenameDialog, setShowRenameDialog] = useState(false);
+	const [renamingThread, setRenamingThread] = useState<{ id: number; title: string } | null>(null);
+	const [newTitle, setNewTitle] = useState("");
+	const [isRenaming, setIsRenaming] = useState(false);
 	const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
 
 	const isSearchMode = !!debouncedSearchQuery.trim();
@@ -187,6 +200,35 @@ export function AllPrivateChatsSidebar({
 		[queryClient, searchSpaceId, t]
 	);
 
+	const handleStartRename = useCallback((threadId: number, title: string) => {
+		setRenamingThread({ id: threadId, title });
+		setNewTitle(title);
+		setShowRenameDialog(true);
+	}, []);
+
+	const handleConfirmRename = useCallback(async () => {
+		if (!renamingThread || !newTitle.trim()) return;
+		setIsRenaming(true);
+		try {
+			await updateThread(renamingThread.id, { title: newTitle.trim() });
+			toast.success(t("chat_renamed") || "Chat renamed");
+			queryClient.invalidateQueries({ queryKey: ["all-threads", searchSpaceId] });
+			queryClient.invalidateQueries({ queryKey: ["search-threads", searchSpaceId] });
+			queryClient.invalidateQueries({ queryKey: ["threads", searchSpaceId] });
+			queryClient.invalidateQueries({
+				queryKey: ["threads", searchSpaceId, "detail", String(renamingThread.id)],
+			});
+		} catch (error) {
+			console.error("Error renaming thread:", error);
+			toast.error(t("error_renaming_chat") || "Failed to rename chat");
+		} finally {
+			setIsRenaming(false);
+			setShowRenameDialog(false);
+			setRenamingThread(null);
+			setNewTitle("");
+		}
+	}, [renamingThread, newTitle, queryClient, searchSpaceId, t]);
+
 	const handleClearSearch = useCallback(() => {
 		setSearchQuery("");
 	}, []);
@@ -355,11 +397,19 @@ export function AllPrivateChatsSidebar({
 												<span className="sr-only">{t("more_options") || "More options"}</span>
 											</Button>
 										</DropdownMenuTrigger>
-										<DropdownMenuContent align="end" className="w-40 z-80">
+									<DropdownMenuContent align="end" className="w-40 z-80">
+										{!thread.archived && (
 											<DropdownMenuItem
-												onClick={() => handleToggleArchive(thread.id, thread.archived)}
-												disabled={isArchiving}
+												onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
 											>
+												<PenLine className="mr-2 h-4 w-4" />
+												<span>{t("rename") || "Rename"}</span>
+											</DropdownMenuItem>
+										)}
+										<DropdownMenuItem
+											onClick={() => handleToggleArchive(thread.id, thread.archived)}
+											disabled={isArchiving}
+										>
 												{thread.archived ? (
 													<>
 														<RotateCcwIcon className="mr-2 h-4 w-4" />
@@ -412,6 +462,51 @@ export function AllPrivateChatsSidebar({
 					</div>
 				)}
 			</div>
+			<Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle className="flex items-center gap-2">
+							<span>{t("rename_chat") || "Rename Chat"}</span>
+						</DialogTitle>
+						<DialogDescription>
+							{t("rename_chat_description") || "Enter a new name for this conversation."}
+						</DialogDescription>
+					</DialogHeader>
+					<Input
+						value={newTitle}
+						onChange={(e) => setNewTitle(e.target.value)}
+						placeholder={t("chat_title_placeholder") || "Chat title"}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && !isRenaming && newTitle.trim()) {
+								handleConfirmRename();
+							}
+						}}
+					/>
+					<DialogFooter className="flex gap-2 sm:justify-end">
+						<Button
+							variant="outline"
+							onClick={() => setShowRenameDialog(false)}
+							disabled={isRenaming}
+						>
+							{t("cancel")}
+						</Button>
+						<Button
+							onClick={handleConfirmRename}
+							disabled={isRenaming || !newTitle.trim()}
+							className="gap-2"
+						>
+							{isRenaming ? (
+								<>
+									<Spinner size="xs" />
+									<span>{t("renaming") || "Renaming"}</span>
+								</>
+							) : (
+								<span>{t("rename") || "Rename"}</span>
+							)}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</SidebarSlideOutPanel>
 	);
 }
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index fae9fb05e..67a5c5804 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -6,6 +6,7 @@ import {
 	ArchiveIcon,
 	MessageCircleMore,
 	MoreHorizontal,
+	PenLine,
 	RotateCcwIcon,
 	Search,
 	Trash2,
@@ -17,6 +18,14 @@ import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -69,6 +78,10 @@ export function AllSharedChatsSidebar({
 	const [searchQuery, setSearchQuery] = useState("");
 	const [showArchived, setShowArchived] = useState(false);
 	const [openDropdownId, setOpenDropdownId] = useState<number | null>(null);
+	const [showRenameDialog, setShowRenameDialog] = useState(false);
+	const [renamingThread, setRenamingThread] = useState<{ id: number; title: string } | null>(null);
+	const [newTitle, setNewTitle] = useState("");
+	const [isRenaming, setIsRenaming] = useState(false);
 	const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
 
 	const isSearchMode = !!debouncedSearchQuery.trim();
@@ -187,6 +200,35 @@ export function AllSharedChatsSidebar({
 		[queryClient, searchSpaceId, t]
 	);
 
+	const handleStartRename = useCallback((threadId: number, title: string) => {
+		setRenamingThread({ id: threadId, title });
+		setNewTitle(title);
+		setShowRenameDialog(true);
+	}, []);
+
+	const handleConfirmRename = useCallback(async () => {
+		if (!renamingThread || !newTitle.trim()) return;
+		setIsRenaming(true);
+		try {
+			await updateThread(renamingThread.id, { title: newTitle.trim() });
+			toast.success(t("chat_renamed") || "Chat renamed");
+			queryClient.invalidateQueries({ queryKey: ["all-threads", searchSpaceId] });
+			queryClient.invalidateQueries({ queryKey: ["search-threads", searchSpaceId] });
+			queryClient.invalidateQueries({ queryKey: ["threads", searchSpaceId] });
+			queryClient.invalidateQueries({
+				queryKey: ["threads", searchSpaceId, "detail", String(renamingThread.id)],
+			});
+		} catch (error) {
+			console.error("Error renaming thread:", error);
+			toast.error(t("error_renaming_chat") || "Failed to rename chat");
+		} finally {
+			setIsRenaming(false);
+			setShowRenameDialog(false);
+			setRenamingThread(null);
+			setNewTitle("");
+		}
+	}, [renamingThread, newTitle, queryClient, searchSpaceId, t]);
+
 	const handleClearSearch = useCallback(() => {
 		setSearchQuery("");
 	}, []);
@@ -355,12 +397,20 @@ export function AllSharedChatsSidebar({
 												<span className="sr-only">{t("more_options") || "More options"}</span>
 											</Button>
 										</DropdownMenuTrigger>
-										<DropdownMenuContent align="end" className="w-40 z-80">
+									<DropdownMenuContent align="end" className="w-40 z-80">
+										{!thread.archived && (
 											<DropdownMenuItem
-												onClick={() => handleToggleArchive(thread.id, thread.archived)}
-												disabled={isArchiving}
+												onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
 											>
-												{thread.archived ? (
+												<PenLine className="mr-2 h-4 w-4" />
+												<span>{t("rename") || "Rename"}</span>
+											</DropdownMenuItem>
+										)}
+										<DropdownMenuItem
+											onClick={() => handleToggleArchive(thread.id, thread.archived)}
+											disabled={isArchiving}
+										>
+											{thread.archived ? (
 													<>
 														<RotateCcwIcon className="mr-2 h-4 w-4" />
 														<span>{t("unarchive") || "Restore"}</span>
@@ -412,6 +462,51 @@ export function AllSharedChatsSidebar({
 					</div>
 				)}
 			</div>
+			<Dialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle className="flex items-center gap-2">
+							<span>{t("rename_chat") || "Rename Chat"}</span>
+						</DialogTitle>
+						<DialogDescription>
+							{t("rename_chat_description") || "Enter a new name for this conversation."}
+						</DialogDescription>
+					</DialogHeader>
+					<Input
+						value={newTitle}
+						onChange={(e) => setNewTitle(e.target.value)}
+						placeholder={t("chat_title_placeholder") || "Chat title"}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && !isRenaming && newTitle.trim()) {
+								handleConfirmRename();
+							}
+						}}
+					/>
+					<DialogFooter className="flex gap-2 sm:justify-end">
+						<Button
+							variant="outline"
+							onClick={() => setShowRenameDialog(false)}
+							disabled={isRenaming}
+						>
+							{t("cancel")}
+						</Button>
+						<Button
+							onClick={handleConfirmRename}
+							disabled={isRenaming || !newTitle.trim()}
+							className="gap-2"
+						>
+							{isRenaming ? (
+								<>
+									<Spinner size="xs" />
+									<span>{t("renaming") || "Renaming"}</span>
+								</>
+							) : (
+								<span>{t("rename") || "Rename"}</span>
+							)}
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
 		</SidebarSlideOutPanel>
 	);
 }
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
index beb1c81c0..805911f88 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
@@ -65,7 +65,7 @@ export function SidebarSlideOutPanel({
 							exit={{ x: "-100%" }}
 							transition={{ type: "tween", duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
 							className={cn(
-								"h-full w-full bg-background flex flex-col pointer-events-auto",
+								"h-full w-full bg-background flex flex-col pointer-events-auto select-none",
 								"sm:border-r sm:shadow-xl"
 							)}
 							role="dialog"
diff --git a/surfsense_web/components/sources/DocumentUploadTab.tsx b/surfsense_web/components/sources/DocumentUploadTab.tsx
index 1018cbdf6..94ba187d6 100644
--- a/surfsense_web/components/sources/DocumentUploadTab.tsx
+++ b/surfsense_web/components/sources/DocumentUploadTab.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useAtom } from "jotai";
-import { CheckCircle2, FileType, Info, Tag, Upload, X } from "lucide-react";
+import { CheckCircle2, FileType, Info, Upload, X } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useTranslations } from "next-intl";
 import { useCallback, useMemo, useRef, useState } from "react";
@@ -452,7 +452,6 @@ export function DocumentUploadTab({
 				<AccordionItem value="supported-file-types" className="border-0">
 					<AccordionTrigger className="px-3 sm:px-6 py-3 sm:py-4 hover:no-underline !items-center [&>svg]:!translate-y-0">
 						<div className="flex items-center gap-2 flex-1">
-							<Tag className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
 							<div className="text-left min-w-0">
 								<div className="font-semibold text-sm sm:text-base">
 									{t("supported_file_types")}
diff --git a/surfsense_web/messages/en.json b/surfsense_web/messages/en.json
index 319595f8e..d7b062ce1 100644
--- a/surfsense_web/messages/en.json
+++ b/surfsense_web/messages/en.json
@@ -682,7 +682,7 @@
 		"rename_chat": "Rename Chat",
 		"rename_chat_description": "Enter a new name for this conversation.",
 		"chat_title_placeholder": "Chat title",
-		"renaming": "Renaming...",
+		"renaming": "Renaming",
 		"no_archived_chats": "No archived chats",
 		"error_archiving_chat": "Failed to archive chat",
 		"new_chat": "New chat",
@@ -720,7 +720,8 @@
 		"unread": "Unread",
 		"connectors": "Connectors",
 		"all_connectors": "All connectors",
-		"close": "Close"
+		"close": "Close",
+		"cancel": "Cancel"
 	},
 	"errors": {
 		"something_went_wrong": "Something went wrong",
diff --git a/surfsense_web/messages/es.json b/surfsense_web/messages/es.json
index acf0a184b..d21b635b5 100644
--- a/surfsense_web/messages/es.json
+++ b/surfsense_web/messages/es.json
@@ -720,7 +720,8 @@
 		"unread": "No leído",
 		"connectors": "Conectores",
 		"all_connectors": "Todos los conectores",
-		"close": "Cerrar"
+		"close": "Cerrar",
+		"cancel": "Cancelar"
 	},
 	"errors": {
 		"something_went_wrong": "Algo salió mal",
diff --git a/surfsense_web/messages/hi.json b/surfsense_web/messages/hi.json
index 1c95ce203..6a3cb7ffb 100644
--- a/surfsense_web/messages/hi.json
+++ b/surfsense_web/messages/hi.json
@@ -720,7 +720,8 @@
 		"unread": "अपठित",
 		"connectors": "कनेक्टर",
 		"all_connectors": "सभी कनेक्टर",
-		"close": "बंद करें"
+		"close": "बंद करें",
+		"cancel": "रद्द करें"
 	},
 	"errors": {
 		"something_went_wrong": "कुछ गलत हो गया",
diff --git a/surfsense_web/messages/pt.json b/surfsense_web/messages/pt.json
index aaf3b36f7..ddaa7c0d3 100644
--- a/surfsense_web/messages/pt.json
+++ b/surfsense_web/messages/pt.json
@@ -720,7 +720,8 @@
 		"unread": "Não lido",
 		"connectors": "Conectores",
 		"all_connectors": "Todos os conectores",
-		"close": "Fechar"
+		"close": "Fechar",
+		"cancel": "Cancelar"
 	},
 	"errors": {
 		"something_went_wrong": "Algo deu errado",
diff --git a/surfsense_web/messages/zh.json b/surfsense_web/messages/zh.json
index 0096b68aa..db29eb198 100644
--- a/surfsense_web/messages/zh.json
+++ b/surfsense_web/messages/zh.json
@@ -704,7 +704,8 @@
 		"unread": "未读",
 		"connectors": "连接器",
 		"all_connectors": "所有连接器",
-		"close": "关闭"
+		"close": "关闭",
+		"cancel": "取消"
 	},
 	"errors": {
 		"something_went_wrong": "出错了",

From 5695ec8d741401eaaa60f57819ae6d0483d40f5c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 22 Feb 2026 00:24:49 +0530
Subject: [PATCH 11/18] feat: enhance mobile sidebar functionality by adding
 close button and improving layout for shared and private chats

---
 .../ui/dialogs/CreateSearchSpaceDialog.tsx    |  6 +++---
 .../layout/ui/shell/LayoutShell.tsx           | 20 +++++++++++++++++++
 .../ui/sidebar/AllPrivateChatsSidebar.tsx     | 12 +++++++++++
 .../ui/sidebar/AllSharedChatsSidebar.tsx      | 12 +++++++++++
 .../layout/ui/sidebar/MobileSidebar.tsx       |  2 +-
 5 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx b/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
index 2523d08b7..b6318c956 100644
--- a/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
+++ b/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
@@ -138,20 +138,20 @@ export function CreateSearchSpaceDialog({ open, onOpenChange }: CreateSearchSpac
 							)}
 						/>
 
-						<DialogFooter className="flex-col sm:flex-row gap-2 pt-2 sm:pt-3">
+						<DialogFooter className="flex-row gap-2 pt-2 sm:pt-3">
 							<Button
 								type="button"
 								variant="outline"
 								onClick={() => handleOpenChange(false)}
 								disabled={isSubmitting}
-								className="w-full sm:w-auto h-9 sm:h-10 text-sm"
+								className="flex-1 sm:flex-none sm:w-auto h-8 sm:h-10 text-xs sm:text-sm"
 							>
 								{tCommon("cancel")}
 							</Button>
 							<Button
 								type="submit"
 								disabled={isSubmitting}
-								className="w-full sm:w-auto h-9 sm:h-10 text-sm"
+								className="flex-1 sm:flex-none sm:w-auto h-8 sm:h-10 text-xs sm:text-sm"
 							>
 								{isSubmitting ? (
 									<>
diff --git a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
index 2d5a3bba5..107e15d2b 100644
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@@ -210,6 +210,26 @@ export function LayoutShell({
 								onCloseMobileSidebar={() => setMobileMenuOpen(false)}
 							/>
 						)}
+
+						{/* Mobile All Shared Chats - slide-out panel */}
+						{allSharedChatsPanel && (
+							<AllSharedChatsSidebar
+								open={allSharedChatsPanel.open}
+								onOpenChange={allSharedChatsPanel.onOpenChange}
+								searchSpaceId={allSharedChatsPanel.searchSpaceId}
+								onCloseMobileSidebar={() => setMobileMenuOpen(false)}
+							/>
+						)}
+
+						{/* Mobile All Private Chats - slide-out panel */}
+						{allPrivateChatsPanel && (
+							<AllPrivateChatsSidebar
+								open={allPrivateChatsPanel.open}
+								onOpenChange={allPrivateChatsPanel.onOpenChange}
+								searchSpaceId={allPrivateChatsPanel.searchSpaceId}
+								onCloseMobileSidebar={() => setMobileMenuOpen(false)}
+							/>
+						)}
 					</div>
 				</TooltipProvider>
 			</SidebarProvider>
diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index f3e659812..37b335103 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -4,6 +4,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { format } from "date-fns";
 import {
 	ArchiveIcon,
+	ChevronLeft,
 	MessageCircleMore,
 	MoreHorizontal,
 	PenLine,
@@ -247,6 +248,17 @@ export function AllPrivateChatsSidebar({
 		>
 			<div className="shrink-0 p-4 pb-2 space-y-3">
 				<div className="flex items-center gap-2">
+					{isMobile && (
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 rounded-full"
+							onClick={() => onOpenChange(false)}
+						>
+							<ChevronLeft className="h-4 w-4 text-muted-foreground" />
+							<span className="sr-only">{t("close") || "Close"}</span>
+						</Button>
+					)}
 					<User className="h-5 w-5 text-primary" />
 					<h2 className="text-lg font-semibold">{t("chats") || "Private Chats"}</h2>
 				</div>
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index 67a5c5804..feee30447 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -4,6 +4,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { format } from "date-fns";
 import {
 	ArchiveIcon,
+	ChevronLeft,
 	MessageCircleMore,
 	MoreHorizontal,
 	PenLine,
@@ -247,6 +248,17 @@ export function AllSharedChatsSidebar({
 		>
 			<div className="shrink-0 p-4 pb-2 space-y-3">
 				<div className="flex items-center gap-2">
+					{isMobile && (
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 rounded-full"
+							onClick={() => onOpenChange(false)}
+						>
+							<ChevronLeft className="h-4 w-4 text-muted-foreground" />
+							<span className="sr-only">{t("close") || "Close"}</span>
+						</Button>
+					)}
 					<Users className="h-5 w-5 text-primary" />
 					<h2 className="text-lg font-semibold">{t("shared_chats") || "Shared Chats"}</h2>
 				</div>
diff --git a/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
index 567236498..f5909ef85 100644
--- a/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
@@ -131,7 +131,7 @@ export function MobileSidebar({
 				</div>
 
 				{/* Sidebar Content - right side */}
-				<div className="flex-1 overflow-hidden flex flex-col">
+				<div className="flex-1 overflow-hidden flex flex-col [&>*]:!w-full">
 					<Sidebar
 						searchSpace={searchSpace}
 						isCollapsed={false}

From 7a77ce4d2fa7d66ced54625a44e57b69ebda72f9 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 22 Feb 2026 00:30:56 +0530
Subject: [PATCH 12/18] feat: update XAI icon

---
 surfsense_web/components/icons/providers/xai.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/surfsense_web/components/icons/providers/xai.svg b/surfsense_web/components/icons/providers/xai.svg
index dee9b47e3..88003060c 100644
--- a/surfsense_web/components/icons/providers/xai.svg
+++ b/surfsense_web/components/icons/providers/xai.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M4.94 4.96a9.97 9.97 0 0 1 10.835-2.182a8.7 8.7 0 0 1 2.033 1.11l-3.006 1.39C12.003 4.101 8.797 4.9 6.84 6.86c-2.564 2.565-3.146 6.954-.36 9.922l.278.284L.124 23c1.875-1.973 3.771-4.427 2.636-7.19c-1.52-3.698-.635-8.03 2.18-10.85M23.9.1c-2.264 3.174-3.184 5.389-2.197 9.64l-.007-.007c.753 3.201-.052 6.75-2.653 9.355c-3.279 3.285-8.526 4.016-12.847 1.06L9.21 18.75c2.758 1.084 5.775.607 7.943-1.564c2.169-2.17 2.655-5.332 1.566-7.963c-.207-.5-.828-.625-1.263-.304L8.59 15.472l12.7-12.77v.01z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6.469 8.776L16.512 23h-4.464L2.005 8.776H6.47zm-.004 7.9l2.233 3.164L6.467 23H2l4.465-6.324zM22 2.582V23h-3.659V7.764L22 2.582zM22 1l-9.952 14.095-2.233-3.163L17.533 1H22z"/></svg>
\ No newline at end of file

From 87e4859a3915cff4f8dadda13fd2373cf8dc1d94 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 22 Feb 2026 03:58:04 +0530
Subject: [PATCH 13/18] feat: update styling in ModelSelector and
 provider-icons for improved UI consistency

---
 .../components/new-chat/model-selector.tsx    | 46 +++++++++----------
 surfsense_web/lib/provider-icons.tsx          |  2 +-
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index d894fe252..ab8248dd9 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -280,7 +280,7 @@ export function ModelSelector({
 			</PopoverTrigger>
 
 			<PopoverContent
-				className="w-[280px] md:w-[360px] p-0 rounded-lg shadow-lg border-border/60 select-none"
+				className="w-[280px] md:w-[360px] p-0 rounded-lg shadow-lg border-border/60 dark:bg-muted dark:border dark:border-neutral-700 select-none"
 				align="start"
 				sideOffset={8}
 			>
@@ -289,18 +289,18 @@ export function ModelSelector({
 					onValueChange={(v) => setActiveTab(v as "llm" | "image")}
 					className="w-full"
 				>
-					<div className="border-b border-border/40">
-						<TabsList className="w-full grid grid-cols-2 rounded-none rounded-t-lg bg-card h-11 p-0 gap-0">
+					<div className="border-b border-border/80 dark:border-white/5">
+						<TabsList className="w-full grid grid-cols-2 rounded-none rounded-t-lg bg-transparent h-11 p-0 gap-0">
 							<TabsTrigger
 								value="llm"
-								className="relative gap-2 text-sm font-medium rounded-none text-muted-foreground/60 transition-all duration-200 h-full data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:left-3 data-[state=active]:after:right-3 data-[state=active]:after:h-[2px] data-[state=active]:after:bg-white data-[state=active]:after:rounded-full"
+								className="gap-2 text-sm font-medium rounded-none text-muted-foreground/60 transition-all duration-200 h-full bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white data-[state=active]:text-foreground"
 							>
 								<Zap className="size-4" />
 								LLM
 							</TabsTrigger>
 							<TabsTrigger
 								value="image"
-								className="relative gap-2 text-sm font-medium rounded-none text-muted-foreground/60 transition-all duration-200 h-full data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none data-[state=active]:after:absolute data-[state=active]:after:bottom-0 data-[state=active]:after:left-3 data-[state=active]:after:right-3 data-[state=active]:after:h-[2px] data-[state=active]:after:bg-white data-[state=active]:after:rounded-full"
+								className="gap-2 text-sm font-medium rounded-none text-muted-foreground/60 transition-all duration-200 h-full bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white data-[state=active]:text-foreground"
 							>
 								<ImageIcon className="size-4" />
 								Image
@@ -312,7 +312,7 @@ export function ModelSelector({
 					<TabsContent value="llm" className="mt-0">
 						<Command
 							shouldFilter={false}
-							className="rounded-none rounded-b-lg relative [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2"
+							className="rounded-none rounded-b-lg relative dark:bg-muted [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2"
 						>
 							{totalLLMModels > 3 && (
 								<div className="px-2 md:px-3 py-1.5 md:py-2">
@@ -350,9 +350,9 @@ export function ModelSelector({
 													onSelect={() => handleSelectLLM(config)}
 													className={cn(
 														"mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
-														"hover:bg-accent/50",
-														isSelected && "bg-accent/80",
-														isAutoMode && "border border-violet-800"
+														"hover:bg-accent/50 dark:hover:bg-white/10",
+														isSelected && "bg-accent/80 dark:bg-white/10",
+														isAutoMode && ""
 													)}
 												>
 													<div className="flex items-center justify-between w-full gap-2">
@@ -366,7 +366,7 @@ export function ModelSelector({
 																	{isAutoMode && (
 																		<Badge
 																			variant="secondary"
-																			className="text-[9px] px-1 py-0 h-3.5 bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300 border-0"
+																			className="text-[9px] px-1 py-0 h-3.5 bg-violet-800 text-white dark:bg-violet-800 dark:text-white border-0"
 																		>
 																			Recommended
 																		</Badge>
@@ -426,8 +426,8 @@ export function ModelSelector({
 													onSelect={() => handleSelectLLM(config)}
 													className={cn(
 														"mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
-														"hover:bg-accent/50",
-														isSelected && "bg-accent/80"
+														"hover:bg-accent/50 dark:hover:bg-white/10",
+														isSelected && "bg-accent/80 dark:bg-white/10"
 													)}
 												>
 													<div className="flex items-center justify-between w-full gap-2">
@@ -471,11 +471,11 @@ export function ModelSelector({
 								)}
 
 								{/* Add New LLM Config */}
-								<div className="p-2 bg-muted/20">
+								<div className="p-2 bg-muted/20 dark:bg-muted">
 									<Button
 										variant="ghost"
 										size="sm"
-										className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50"
+										className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50 dark:hover:bg-white/10"
 										onClick={() => {
 											setOpen(false);
 											onAddNewLLM();
@@ -493,7 +493,7 @@ export function ModelSelector({
 					<TabsContent value="image" className="mt-0">
 						<Command
 							shouldFilter={false}
-							className="rounded-none rounded-b-lg [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2"
+							className="rounded-none rounded-b-lg dark:bg-muted [&_[data-slot=command-input-wrapper]]:border-0 [&_[data-slot=command-input-wrapper]]:px-0 [&_[data-slot=command-input-wrapper]]:gap-2"
 						>
 							{totalImageModels > 3 && (
 								<div className="px-2 md:px-3 py-1.5 md:py-2">
@@ -528,9 +528,9 @@ export function ModelSelector({
 													value={`img-g-${config.id}`}
 													onSelect={() => handleSelectImage(config.id)}
 													className={cn(
-														"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
-														isSelected && "bg-accent/80",
-														isAuto && "border border-violet-800"
+														"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/10",
+														isSelected && "bg-accent/80 dark:bg-white/10",
+														isAuto && ""
 													)}
 												>
 													<div className="flex items-center gap-3 min-w-0 flex-1">
@@ -543,7 +543,7 @@ export function ModelSelector({
 																{isAuto && (
 																	<Badge
 																		variant="secondary"
-																		className="text-[9px] px-1 py-0 h-3.5 bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300 border-0"
+																		className="text-[9px] px-1 py-0 h-3.5 bg-violet-800 text-white dark:bg-violet-800 dark:text-white border-0"
 																	>
 																		Recommended
 																	</Badge>
@@ -593,8 +593,8 @@ export function ModelSelector({
 														value={`img-u-${config.id}`}
 														onSelect={() => handleSelectImage(config.id)}
 														className={cn(
-															"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50",
-															isSelected && "bg-accent/80"
+															"mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/10",
+															isSelected && "bg-accent/80 dark:bg-white/10"
 														)}
 													>
 														<div className="flex items-center gap-3 min-w-0 flex-1">
@@ -634,11 +634,11 @@ export function ModelSelector({
 
 								{/* Add New Image Config */}
 								{onAddNewImage && (
-									<div className="p-2 bg-muted/20">
+									<div className="p-2 bg-muted/20 dark:bg-muted">
 										<Button
 											variant="ghost"
 											size="sm"
-											className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50"
+											className="w-full justify-start gap-2 h-9 rounded-lg hover:bg-accent/50 dark:hover:bg-white/10"
 											onClick={() => {
 												setOpen(false);
 												onAddNewImage();
diff --git a/surfsense_web/lib/provider-icons.tsx b/surfsense_web/lib/provider-icons.tsx
index b7f49fe33..e405b7766 100644
--- a/surfsense_web/lib/provider-icons.tsx
+++ b/surfsense_web/lib/provider-icons.tsx
@@ -43,7 +43,7 @@ export function getProviderIcon(
 	{ isAutoMode, className = "size-4" }: { isAutoMode?: boolean; className?: string } = {}
 ) {
 	if (isAutoMode || provider?.toUpperCase() === "AUTO") {
-		return <Shuffle className={cn(className, "text-violet-800")} />;
+		return <Shuffle className={cn(className, "text-muted-foreground")} />;
 	}
 
 	switch (provider?.toUpperCase()) {

From fe2b739fc4318a799416d6e7c5ceff481538b23a Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 22 Feb 2026 04:14:07 +0530
Subject: [PATCH 14/18] feat: add select-none class to InboxSidebar and
 ChatShareButton for improved text selection behavior

---
 surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx | 2 +-
 surfsense_web/components/new-chat/chat-share-button.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
index ce64adae9..9fc0a121a 100644
--- a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
@@ -727,7 +727,7 @@ export function InboxSidebar({
 								</Tooltip>
 								<DropdownMenuContent
 									align="end"
-									className={cn("z-80", activeTab === "status" ? "w-52" : "w-44")}
+									className={cn("z-80 select-none", activeTab === "status" ? "w-52" : "w-44")}
 								>
 									<DropdownMenuLabel className="text-xs text-muted-foreground/80 font-normal">
 										{t("filter") || "Filter"}
diff --git a/surfsense_web/components/new-chat/chat-share-button.tsx b/surfsense_web/components/new-chat/chat-share-button.tsx
index 99da23ff8..ab04fc4c9 100644
--- a/surfsense_web/components/new-chat/chat-share-button.tsx
+++ b/surfsense_web/components/new-chat/chat-share-button.tsx
@@ -181,7 +181,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 					sideOffset={8}
 					onCloseAutoFocus={(e) => e.preventDefault()}
 				>
-					<div className="p-1.5 space-y-1">
+					<div className="p-1.5 space-y-1 select-none">
 						{/* Visibility Options */}
 						{visibilityOptions.map((option) => {
 							const isSelected = currentVisibility === option.value;

From 0e1f0d09e5e8f050739e8e2cf615d7ffa9aabe9a Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 22 Feb 2026 04:20:46 +0530
Subject: [PATCH 15/18] feat: enhance file upload tooltip with detailed
 information on limits and guidelines

---
 surfsense_web/components/assistant-ui/thread.tsx      | 11 ++++++++++-
 .../components/assistant-ui/tooltip-icon-button.tsx   |  4 ++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 047ac25d8..14e474315 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -18,6 +18,7 @@ import {
 	ChevronLeftIcon,
 	ChevronRightIcon,
 	CopyIcon,
+	Dot,
 	DownloadIcon,
 	FileWarning,
 	Paperclip,
@@ -745,7 +746,15 @@ const ComposerAction: FC<ComposerActionProps> = ({
 		<div className="aui-composer-action-wrapper relative mx-2 mb-2 flex items-center justify-between">
 			<div className="flex items-center gap-1">
 				<TooltipIconButton
-					tooltip={isUploadingDocs ? "Uploading documents..." : "Upload and mention files"}
+					tooltip={
+						isUploadingDocs ? "Uploading documents..." : (
+							<div className="flex flex-col gap-0.5">
+								<span className="font-medium">Upload and mention files</span>
+								<span className="text-xs text-muted-foreground flex items-center">Max 10 files <Dot className="size-3" /> 50 MB each</span>
+								<span className="text-xs text-muted-foreground">Total upload limit: 200 MB</span>
+							</div>
+						)
+					}
 					side="bottom"
 					variant="ghost"
 					size="icon"
diff --git a/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx b/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx
index 154240cb4..55f7c6a2e 100644
--- a/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx
+++ b/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import { Slottable } from "@radix-ui/react-slot";
-import { type ComponentPropsWithRef, forwardRef } from "react";
+import { type ComponentPropsWithRef, type ReactNode, forwardRef } from "react";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
-	tooltip: string;
+	tooltip: ReactNode;
 	side?: "top" | "bottom" | "left" | "right";
 };
 

From ac0027e2d2eb6838c6c0eede629c9828ffab610e Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 22 Feb 2026 04:35:59 +0530
Subject: [PATCH 16/18] feat: update dropdown menu styling and structure for
 improved UI consistency and responsiveness

---
 .../dashboard/[search_space_id]/team/page.tsx |  2 +-
 .../components/report-panel/report-panel.tsx  | 78 +++++++------------
 2 files changed, 29 insertions(+), 51 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index a3f644430..44b3f63b6 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -569,7 +569,7 @@ function MemberRow({
 								<ChevronDown className="h-4 w-4" />
 							</button>
 						</DropdownMenuTrigger>
-						<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()} className="min-w-[180px] dark:bg-neutral-800 dark:border dark:border-neutral-700">
+						<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()} className="min-w-[120px] bg-muted dark:border dark:border-neutral-700">
 							{canManageRoles &&
 								roles
 									.filter((r) => r.name !== "Owner")
diff --git a/surfsense_web/components/report-panel/report-panel.tsx b/surfsense_web/components/report-panel/report-panel.tsx
index 300920951..36a9b2443 100644
--- a/surfsense_web/components/report-panel/report-panel.tsx
+++ b/surfsense_web/components/report-panel/report-panel.tsx
@@ -334,7 +334,7 @@ function ReportPanelContent({
 						</DropdownMenuTrigger>
 						<DropdownMenuContent
 							align="start"
-							className={`min-w-[180px] dark:bg-neutral-800 dark:border dark:border-neutral-700${insideDrawer ? " z-[100]" : ""}`}
+							className={`min-w-[180px] bg-muted dark:border dark:border-neutral-700${insideDrawer ? " z-[100]" : ""}`}
 						>
 							<DropdownMenuItem onClick={() => handleExport("md")}>
 								Download Markdown
@@ -361,56 +361,34 @@ function ReportPanelContent({
 					</DropdownMenu>
 
 					{/* Version switcher — only shown when multiple versions exist */}
-					{versions.length > 1 &&
-						(insideDrawer ? (
-							/* Mobile: compact dropdown */
-							<DropdownMenu modal={false}>
-								<DropdownMenuTrigger asChild>
-									<Button
-										variant="outline"
-										size="sm"
-										className="h-8 px-3.5 py-4 text-[15px] gap-1.5"
+					{versions.length > 1 && (
+						<DropdownMenu modal={insideDrawer ? false : undefined}>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="outline"
+									size="sm"
+									className="h-8 px-3.5 py-4 text-[15px] gap-1.5"
+								>
+									v{activeVersionIndex + 1}
+									<ChevronDownIcon className="size-3" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								align="start"
+								className={`min-w-[120px] bg-muted dark:border dark:border-neutral-700${insideDrawer ? " z-[100]" : ""}`}
+							>
+								{versions.map((v, i) => (
+									<DropdownMenuItem
+										key={v.id}
+										onClick={() => setActiveReportId(v.id)}
+										className={v.id === activeReportId ? "bg-accent font-medium" : ""}
 									>
-										v{activeVersionIndex + 1}
-										<ChevronDownIcon className="size-3" />
-									</Button>
-								</DropdownMenuTrigger>
-								<DropdownMenuContent align="start" className="min-w-[120px] z-[100]">
-									{versions.map((v, i) => (
-										<DropdownMenuItem
-											key={v.id}
-											onClick={() => setActiveReportId(v.id)}
-											className={v.id === activeReportId ? "bg-accent font-medium" : ""}
-										>
-											Version {i + 1}
-										</DropdownMenuItem>
-									))}
-								</DropdownMenuContent>
-							</DropdownMenu>
-						) : (
-							/* Desktop: inline version buttons */
-							<div className="flex items-center gap-1">
-								<div className="flex items-center gap-0.5 rounded-lg border bg-muted/30 p-0.5">
-									{versions.map((v, i) => (
-										<button
-											key={v.id}
-											type="button"
-											onClick={() => setActiveReportId(v.id)}
-											className={`px-2 py-0.5 rounded-md text-xs font-medium transition-colors ${
-												v.id === activeReportId
-													? "bg-primary text-primary-foreground shadow-sm"
-													: "text-muted-foreground hover:bg-muted hover:text-foreground"
-											}`}
-										>
-											v{i + 1}
-										</button>
-									))}
-								</div>
-								<span className="text-[10px] text-muted-foreground tabular-nums ml-1">
-									{activeVersionIndex + 1} of {versions.length}
-								</span>
-							</div>
-						))}
+										Version {i + 1}
+									</DropdownMenuItem>
+								))}
+							</DropdownMenuContent>
+						</DropdownMenu>
+					)}
 				</div>
 				{onClose && (
 					<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">

From aeb2613b2b1df247d41823b78d0b72c38b6ef72c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 22 Feb 2026 04:41:56 +0530
Subject: [PATCH 17/18] chore: linting

---
 .../components/DocumentsTableShell.tsx        |  72 ++--
 .../[search_space_id]/settings/page.tsx       |   7 +-
 .../dashboard/[search_space_id]/team/page.tsx | 308 +++++++++---------
 .../components/assistant-ui/thread.tsx        |   8 +-
 .../ui/dialogs/CreateSearchSpaceDialog.tsx    |   4 +-
 .../ui/sidebar/AllPrivateChatsSidebar.tsx     |  22 +-
 .../ui/sidebar/AllSharedChatsSidebar.tsx      |  24 +-
 .../layout/ui/sidebar/SidebarUserProfile.tsx  |   6 +-
 .../components/new-chat/chat-share-button.tsx |   4 +-
 .../components/report-panel/report-panel.tsx  |   6 +-
 .../components/settings/roles-manager.tsx     | 115 +++----
 11 files changed, 266 insertions(+), 310 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
index 6d4187593..93e1cadbf 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
@@ -627,30 +627,28 @@ export function DocumentsTableShell({
 														<DocumentTypeChip type={doc.document_type} />
 													</TableCell>
 												)}
-											{columnVisibility.created_by && (
-												<TableCell className="w-36 py-2.5 text-sm text-foreground truncate border-r border-border/40">
-													{doc.created_by_name ? (
-														doc.created_by_email ? (
-															<Tooltip>
-																<TooltipTrigger asChild>
-																	<span className="cursor-default truncate block">
-																		{doc.created_by_name}
-																	</span>
-																</TooltipTrigger>
-																<TooltipContent side="top" align="start">
-																	{doc.created_by_email}
-																</TooltipContent>
-															</Tooltip>
+												{columnVisibility.created_by && (
+													<TableCell className="w-36 py-2.5 text-sm text-foreground truncate border-r border-border/40">
+														{doc.created_by_name ? (
+															doc.created_by_email ? (
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<span className="cursor-default truncate block">
+																			{doc.created_by_name}
+																		</span>
+																	</TooltipTrigger>
+																	<TooltipContent side="top" align="start">
+																		{doc.created_by_email}
+																	</TooltipContent>
+																</Tooltip>
+															) : (
+																<span className="truncate block">{doc.created_by_name}</span>
+															)
 														) : (
-															<span className="truncate block">{doc.created_by_name}</span>
-														)
-													) : (
-														<span className="truncate block">
-															{doc.created_by_email || "—"}
-														</span>
-													)}
-												</TableCell>
-											)}
+															<span className="truncate block">{doc.created_by_email || "—"}</span>
+														)}
+													</TableCell>
+												)}
 												{columnVisibility.created_at && (
 													<TableCell className="w-32 py-2.5 text-sm text-foreground border-r border-border/40">
 														<Tooltip>
@@ -784,20 +782,20 @@ export function DocumentsTableShell({
 
 			{/* Document Content Viewer - lazy loads content on-demand */}
 			<Dialog open={!!viewingDoc} onOpenChange={(open) => !open && handleCloseViewer()}>
-			<DialogContent className="max-w-4xl max-h-[80vh] flex flex-col overflow-hidden pb-0">
-				<DialogHeader className="flex-shrink-0">
-					<DialogTitle>{viewingDoc?.title}</DialogTitle>
-				</DialogHeader>
-				<div className="mt-4 overflow-y-auto flex-1 min-h-0 px-6 select-text">
-					{viewingLoading ? (
-						<div className="flex items-center justify-center py-12">
-							<Spinner size="lg" className="text-muted-foreground" />
-						</div>
-					) : (
-						<MarkdownViewer content={viewingContent} />
-					)}
-				</div>
-			</DialogContent>
+				<DialogContent className="max-w-4xl max-h-[80vh] flex flex-col overflow-hidden pb-0">
+					<DialogHeader className="flex-shrink-0">
+						<DialogTitle>{viewingDoc?.title}</DialogTitle>
+					</DialogHeader>
+					<div className="mt-4 overflow-y-auto flex-1 min-h-0 px-6 select-text">
+						{viewingLoading ? (
+							<div className="flex items-center justify-center py-12">
+								<Spinner size="lg" className="text-muted-foreground" />
+							</div>
+						) : (
+							<MarkdownViewer content={viewingContent} />
+						)}
+					</div>
+				</DialogContent>
 			</Dialog>
 		</motion.div>
 	);
diff --git a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
index d72bcb977..7ccd35425 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
@@ -306,9 +306,7 @@ function SettingsContent({
 							{activeSection === "public-links" && (
 								<PublicChatSnapshotsManager searchSpaceId={searchSpaceId} />
 							)}
-							{activeSection === "team-roles" && (
-								<RolesManager searchSpaceId={searchSpaceId} />
-							)}
+							{activeSection === "team-roles" && <RolesManager searchSpaceId={searchSpaceId} />}
 						</motion.div>
 					</AnimatePresence>
 				</div>
@@ -328,7 +326,8 @@ export default function SettingsPage() {
 	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
 	const sectionParam = searchParams.get("section");
-	const activeSection = sectionParam && VALID_SECTIONS.has(sectionParam) ? sectionParam : DEFAULT_SECTION;
+	const activeSection =
+		sectionParam && VALID_SECTIONS.has(sectionParam) ? sectionParam : DEFAULT_SECTION;
 
 	const handleSectionChange = useCallback(
 		(section: string) => {
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 44b3f63b6..f8a9cecd0 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -154,10 +154,7 @@ export default function TeamManagementPage() {
 		[access]
 	);
 
-	const {
-		data: members = [],
-		isLoading: membersLoading,
-	} = useAtomValue(membersAtom);
+	const { data: members = [], isLoading: membersLoading } = useAtomValue(membersAtom);
 
 	const { mutateAsync: updateMember } = useAtomValue(updateMemberMutationAtom);
 	const { mutateAsync: deleteMember } = useAtomValue(deleteMemberMutationAtom);
@@ -211,17 +208,13 @@ export default function TeamManagementPage() {
 		[deleteMember, searchSpaceId]
 	);
 
-	const {
-		data: roles = [],
-	} = useQuery({
+	const { data: roles = [] } = useQuery({
 		queryKey: cacheKeys.roles.all(searchSpaceId.toString()),
 		queryFn: () => rolesApiService.getRoles({ search_space_id: searchSpaceId }),
 		enabled: !!searchSpaceId,
 	});
 
-	const {
-		data: invites = [],
-	} = useQuery({
+	const { data: invites = [] } = useQuery({
 		queryKey: cacheKeys.invites.all(searchSpaceId.toString()),
 		queryFn: () => invitesApiService.getInvites({ search_space_id: searchSpaceId }),
 		staleTime: 5 * 60 * 1000,
@@ -271,12 +264,12 @@ export default function TeamManagementPage() {
 				initial={{ opacity: 0 }}
 				animate={{ opacity: 1 }}
 				transition={{ duration: 0.3 }}
-		className="bg-background select-none"
-		>
-			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
-				<div className="space-y-6">
-					<div className="flex items-center justify-between">
-						<Skeleton className="h-9 w-36 rounded-md" />
+				className="bg-background select-none"
+			>
+				<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
+					<div className="space-y-6">
+						<div className="flex items-center justify-between">
+							<Skeleton className="h-9 w-36 rounded-md" />
 							<Skeleton className="h-4 w-20" />
 						</div>
 						<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
@@ -335,96 +328,93 @@ export default function TeamManagementPage() {
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			transition={{ duration: 0.3 }}
-		className="bg-background select-none"
-	>
-		<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
-			<div className="space-y-6">
-				{/* Header row: Invite button on left, member count on right */}
-				<div className="flex items-center justify-between">
-					<div className="flex items-center gap-2">
-						{canInvite && (
-							<CreateInviteDialog
-								roles={roles}
-								onCreateInvite={handleCreateInvite}
-								searchSpaceId={searchSpaceId}
-							/>
-						)}
-						{canInvite && activeInvites.length > 0 && (
-							<AllInvitesDialog
-								invites={activeInvites}
-								onRevokeInvite={handleRevokeInvite}
-							/>
-						)}
-					</div>
-					<p className="hidden md:block text-sm text-muted-foreground">
-						{members.length} {members.length === 1 ? "member" : "members"}
-					</p>
+			className="bg-background select-none"
+		>
+			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
+				<div className="space-y-6">
+					{/* Header row: Invite button on left, member count on right */}
+					<div className="flex items-center justify-between">
+						<div className="flex items-center gap-2">
+							{canInvite && (
+								<CreateInviteDialog
+									roles={roles}
+									onCreateInvite={handleCreateInvite}
+									searchSpaceId={searchSpaceId}
+								/>
+							)}
+							{canInvite && activeInvites.length > 0 && (
+								<AllInvitesDialog invites={activeInvites} onRevokeInvite={handleRevokeInvite} />
+							)}
+						</div>
+						<p className="hidden md:block text-sm text-muted-foreground">
+							{members.length} {members.length === 1 ? "member" : "members"}
+						</p>
 					</div>
 
 					{/* Members & Invites Table */}
 					<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
-					<Table className="table-fixed w-full">
-						<TableHeader>
-							<TableRow className="hover:bg-transparent border-b border-border/40">
-								<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/40">
-									<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-										<User size={14} className="opacity-60 text-muted-foreground" />
-										Name
-									</span>
-								</TableHead>
-								<TableHead className="hidden md:table-cell w-[25%] border-r border-border/40">
-									<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-										<Clock size={14} className="opacity-60 text-muted-foreground" />
-										Last logged in
-									</span>
-								</TableHead>
-								<TableHead className="w-[30%] px-4 md:px-6">
-									<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70 justify-end">
-										<ShieldUser size={14} className="opacity-60 text-muted-foreground" />
-										Role
-									</span>
-								</TableHead>
-							</TableRow>
-						</TableHeader>
-						<TableBody>
-							{owners.map((member, index) => (
-								<MemberRow
-									key={`member-${member.id}`}
-									member={member}
-									roles={roles}
-									canManageRoles={canManageRoles}
-									canRemove={canRemove}
-									onUpdateRole={handleUpdateMember}
-									onRemoveMember={handleRemoveMember}
-									searchSpaceId={searchSpaceId}
-									index={index}
-								/>
-							))}
-							{paginatedMembers.map((member, index) => (
-								<MemberRow
-									key={`member-${member.id}`}
-									member={member}
-									roles={roles}
-									canManageRoles={canManageRoles}
-									canRemove={canRemove}
-									onUpdateRole={handleUpdateMember}
-									onRemoveMember={handleRemoveMember}
-									searchSpaceId={searchSpaceId}
-									index={owners.length + index}
-								/>
-							))}
-						{members.length === 0 && (
-								<TableRow>
-									<TableCell colSpan={3} className="text-center py-12">
-										<div className="flex flex-col items-center gap-2">
-											<Users className="h-8 w-8 text-muted-foreground/50" />
-											<p className="text-muted-foreground">No members yet</p>
-										</div>
-									</TableCell>
+						<Table className="table-fixed w-full">
+							<TableHeader>
+								<TableRow className="hover:bg-transparent border-b border-border/40">
+									<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/40">
+										<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
+											<User size={14} className="opacity-60 text-muted-foreground" />
+											Name
+										</span>
+									</TableHead>
+									<TableHead className="hidden md:table-cell w-[25%] border-r border-border/40">
+										<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
+											<Clock size={14} className="opacity-60 text-muted-foreground" />
+											Last logged in
+										</span>
+									</TableHead>
+									<TableHead className="w-[30%] px-4 md:px-6">
+										<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70 justify-end">
+											<ShieldUser size={14} className="opacity-60 text-muted-foreground" />
+											Role
+										</span>
+									</TableHead>
 								</TableRow>
-							)}
-						</TableBody>
-					</Table>
+							</TableHeader>
+							<TableBody>
+								{owners.map((member, index) => (
+									<MemberRow
+										key={`member-${member.id}`}
+										member={member}
+										roles={roles}
+										canManageRoles={canManageRoles}
+										canRemove={canRemove}
+										onUpdateRole={handleUpdateMember}
+										onRemoveMember={handleRemoveMember}
+										searchSpaceId={searchSpaceId}
+										index={index}
+									/>
+								))}
+								{paginatedMembers.map((member, index) => (
+									<MemberRow
+										key={`member-${member.id}`}
+										member={member}
+										roles={roles}
+										canManageRoles={canManageRoles}
+										canRemove={canRemove}
+										onUpdateRole={handleUpdateMember}
+										onRemoveMember={handleRemoveMember}
+										searchSpaceId={searchSpaceId}
+										index={owners.length + index}
+									/>
+								))}
+								{members.length === 0 && (
+									<TableRow>
+										<TableCell colSpan={3} className="text-center py-12">
+											<div className="flex flex-col items-center gap-2">
+												<Users className="h-8 w-8 text-muted-foreground/50" />
+												<p className="text-muted-foreground">No members yet</p>
+											</div>
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
 					</div>
 
 					{/* Pagination */}
@@ -513,7 +503,7 @@ function MemberRow({
 	const initials = getAvatarInitials(member);
 	const avatarColor = getAvatarColor(member.user_id);
 	const displayName = member.user_display_name || member.user_email || "Unknown";
-	const roleName = member.is_owner ? "Owner" : (member.role?.name || "No role");
+	const roleName = member.is_owner ? "Owner" : member.role?.name || "No role";
 	const showActions = !member.is_owner && (canManageRoles || canRemove);
 
 	return (
@@ -547,7 +537,9 @@ function MemberRow({
 					<div className="min-w-0">
 						<p className="font-medium text-sm truncate select-text">{displayName}</p>
 						{member.user_display_name && member.user_email && (
-							<p className="text-xs text-muted-foreground truncate select-text">{member.user_email}</p>
+							<p className="text-xs text-muted-foreground truncate select-text">
+								{member.user_email}
+							</p>
 						)}
 					</div>
 				</div>
@@ -569,7 +561,11 @@ function MemberRow({
 								<ChevronDown className="h-4 w-4" />
 							</button>
 						</DropdownMenuTrigger>
-						<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()} className="min-w-[120px] bg-muted dark:border dark:border-neutral-700">
+						<DropdownMenuContent
+							align="end"
+							onCloseAutoFocus={(e) => e.preventDefault()}
+							className="min-w-[120px] bg-muted dark:border dark:border-neutral-700"
+						>
 							{canManageRoles &&
 								roles
 									.filter((r) => r.name !== "Owner")
@@ -590,40 +586,39 @@ function MemberRow({
 										>
 											Remove
 										</DropdownMenuItem>
-										</AlertDialogTrigger>
-										<AlertDialogContent>
-											<AlertDialogHeader>
-												<AlertDialogTitle>Remove member?</AlertDialogTitle>
-												<AlertDialogDescription>
-													This will remove{" "}
-													<span className="font-medium">{member.user_email}</span>{" "}
-													from this search space. They will lose access to all resources.
-												</AlertDialogDescription>
-											</AlertDialogHeader>
-											<AlertDialogFooter>
-												<AlertDialogCancel>Cancel</AlertDialogCancel>
-												<AlertDialogAction
-													onClick={() => onRemoveMember(member.id)}
-													className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-												>
-													Remove
-												</AlertDialogAction>
-											</AlertDialogFooter>
-										</AlertDialogContent>
-									</AlertDialog>
+									</AlertDialogTrigger>
+									<AlertDialogContent>
+										<AlertDialogHeader>
+											<AlertDialogTitle>Remove member?</AlertDialogTitle>
+											<AlertDialogDescription>
+												This will remove <span className="font-medium">{member.user_email}</span>{" "}
+												from this search space. They will lose access to all resources.
+											</AlertDialogDescription>
+										</AlertDialogHeader>
+										<AlertDialogFooter>
+											<AlertDialogCancel>Cancel</AlertDialogCancel>
+											<AlertDialogAction
+												onClick={() => onRemoveMember(member.id)}
+												className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+											>
+												Remove
+											</AlertDialogAction>
+										</AlertDialogFooter>
+									</AlertDialogContent>
+								</AlertDialog>
 							)}
 							<DropdownMenuSeparator className="dark:bg-neutral-700" />
 							<DropdownMenuItem
-								onClick={() => router.push(`/dashboard/${searchSpaceId}/settings?section=team-roles`)}
+								onClick={() =>
+									router.push(`/dashboard/${searchSpaceId}/settings?section=team-roles`)
+								}
 							>
 								Manage Roles
 							</DropdownMenuItem>
 						</DropdownMenuContent>
 					</DropdownMenu>
 				) : (
-					<span className="text-sm text-foreground">
-						{roleName}
-					</span>
+					<span className="text-sm text-foreground">{roleName}</span>
 				)}
 			</TableCell>
 		</motion.tr>
@@ -671,9 +666,7 @@ function CreateInviteDialog({
 			const invite = await onCreateInvite(data);
 			setCreatedInvite(invite);
 
-			const roleName = roleId
-				? roles.find((r) => r.id.toString() === roleId)?.name
-				: undefined;
+			const roleName = roleId ? roles.find((r) => r.id.toString() === roleId)?.name : undefined;
 			trackSearchSpaceInviteSent(searchSpaceId, {
 				roleName,
 				hasExpiry: !!expiresAt,
@@ -707,13 +700,19 @@ function CreateInviteDialog({
 	return (
 		<Dialog open={open} onOpenChange={(v) => (v ? setOpen(true) : handleClose())}>
 			<DialogTrigger asChild>
-				<Button variant="outline" className="gap-2 bg-black text-white dark:bg-white dark:text-black hover:bg-black/90 dark:hover:bg-white/90">
+				<Button
+					variant="outline"
+					className="gap-2 bg-black text-white dark:bg-white dark:text-black hover:bg-black/90 dark:hover:bg-white/90"
+				>
 					<UserPlus className="h-4 w-4" />
 					Invite members
 				</Button>
 			</DialogTrigger>
-		<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6 select-none" onOpenAutoFocus={(e) => e.preventDefault()}>
-			{createdInvite ? (
+			<DialogContent
+				className="w-[92vw] max-w-[92vw] sm:max-w-md p-4 md:p-6 select-none"
+				onOpenAutoFocus={(e) => e.preventDefault()}
+			>
+				{createdInvite ? (
 					<>
 						<DialogHeader>
 							<DialogTitle className="flex items-center gap-2">
@@ -730,11 +729,7 @@ function CreateInviteDialog({
 									{window.location.origin}/invite/{createdInvite.invite_code}
 								</code>
 								<Button variant="outline" size="sm" onClick={copyLink} className="shrink-0">
-									{copiedLink ? (
-										<Check className="h-4 w-4" />
-									) : (
-										<Copy className="h-4 w-4" />
-									)}
+									{copiedLink ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
 								</Button>
 							</div>
 							<div className="flex flex-wrap gap-2 text-sm text-muted-foreground">
@@ -891,24 +886,18 @@ function AllInvitesDialog({
 			</DialogTrigger>
 			<DialogContent className="w-[92vw] max-w-[92vw] sm:max-w-lg p-4 md:p-6 select-none">
 				<DialogHeader>
-					<DialogTitle className="flex items-center gap-2">
-						Active Invite Links
-					</DialogTitle>
+					<DialogTitle className="flex items-center gap-2">Active Invite Links</DialogTitle>
 					<DialogDescription>
-						{invites.length} active {invites.length === 1 ? "invite" : "invites"}. Copy a link or revoke access.
+						{invites.length} active {invites.length === 1 ? "invite" : "invites"}. Copy a link or
+						revoke access.
 					</DialogDescription>
 				</DialogHeader>
 				<div className="max-h-[320px] overflow-y-auto -mx-1 px-1 space-y-3 py-2">
 					{invites.map((invite) => (
-						<div
-							key={invite.id}
-							className="rounded-lg border border-border/40 p-3 space-y-2.5"
-						>
+						<div key={invite.id} className="rounded-lg border border-border/40 p-3 space-y-2.5">
 							<div className="flex items-center justify-between gap-2">
 								<div className="flex items-center gap-2 min-w-0">
-									<p className="text-sm font-medium truncate">
-										{invite.name || "Unnamed invite"}
-									</p>
+									<p className="text-sm font-medium truncate">{invite.name || "Unnamed invite"}</p>
 									<div className="flex flex-wrap gap-x-2 text-xs text-muted-foreground shrink-0">
 										{invite.role?.name && (
 											<span className="rounded bg-muted px-1.5 py-0.5">{invite.role.name}</span>
@@ -929,7 +918,11 @@ function AllInvitesDialog({
 								</div>
 								<AlertDialog>
 									<AlertDialogTrigger asChild>
-										<Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive">
+										<Button
+											variant="ghost"
+											size="icon"
+											className="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
+										>
 											<Trash2 className="h-3.5 w-3.5" />
 										</Button>
 									</AlertDialogTrigger>
@@ -937,8 +930,8 @@ function AllInvitesDialog({
 										<AlertDialogHeader>
 											<AlertDialogTitle>Revoke invite?</AlertDialogTitle>
 											<AlertDialogDescription>
-												This will permanently delete this invite link. Anyone with this link
-												will no longer be able to join.
+												This will permanently delete this invite link. Anyone with this link will no
+												longer be able to join.
 											</AlertDialogDescription>
 										</AlertDialogHeader>
 										<AlertDialogFooter>
@@ -961,7 +954,12 @@ function AllInvitesDialog({
 											: `/invite/${invite.invite_code}`}
 									</code>
 								</div>
-								<Button variant="ghost" size="sm" className="shrink-0" onClick={() => copyLink(invite)}>
+								<Button
+									variant="ghost"
+									size="sm"
+									className="shrink-0"
+									onClick={() => copyLink(invite)}
+								>
 									{copiedId === invite.id ? (
 										<Check className="h-4 w-4" />
 									) : (
diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 14e474315..91de2bb90 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -747,10 +747,14 @@ const ComposerAction: FC<ComposerActionProps> = ({
 			<div className="flex items-center gap-1">
 				<TooltipIconButton
 					tooltip={
-						isUploadingDocs ? "Uploading documents..." : (
+						isUploadingDocs ? (
+							"Uploading documents..."
+						) : (
 							<div className="flex flex-col gap-0.5">
 								<span className="font-medium">Upload and mention files</span>
-								<span className="text-xs text-muted-foreground flex items-center">Max 10 files <Dot className="size-3" /> 50 MB each</span>
+								<span className="text-xs text-muted-foreground flex items-center">
+									Max 10 files <Dot className="size-3" /> 50 MB each
+								</span>
 								<span className="text-xs text-muted-foreground">Total upload limit: 200 MB</span>
 							</div>
 						)
diff --git a/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx b/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
index b6318c956..2450d6cec 100644
--- a/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
+++ b/surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
@@ -159,9 +159,7 @@ export function CreateSearchSpaceDialog({ open, onOpenChange }: CreateSearchSpac
 										{t("creating")}
 									</>
 								) : (
-									<>
-										{t("create_button")}
-									</>
+									<>{t("create_button")}</>
 								)}
 							</Button>
 						</DialogFooter>
diff --git a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
index 37b335103..36a20cf3f 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
@@ -409,19 +409,19 @@ export function AllPrivateChatsSidebar({
 												<span className="sr-only">{t("more_options") || "More options"}</span>
 											</Button>
 										</DropdownMenuTrigger>
-									<DropdownMenuContent align="end" className="w-40 z-80">
-										{!thread.archived && (
+										<DropdownMenuContent align="end" className="w-40 z-80">
+											{!thread.archived && (
+												<DropdownMenuItem
+													onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
+												>
+													<PenLine className="mr-2 h-4 w-4" />
+													<span>{t("rename") || "Rename"}</span>
+												</DropdownMenuItem>
+											)}
 											<DropdownMenuItem
-												onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
+												onClick={() => handleToggleArchive(thread.id, thread.archived)}
+												disabled={isArchiving}
 											>
-												<PenLine className="mr-2 h-4 w-4" />
-												<span>{t("rename") || "Rename"}</span>
-											</DropdownMenuItem>
-										)}
-										<DropdownMenuItem
-											onClick={() => handleToggleArchive(thread.id, thread.archived)}
-											disabled={isArchiving}
-										>
 												{thread.archived ? (
 													<>
 														<RotateCcwIcon className="mr-2 h-4 w-4" />
diff --git a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
index feee30447..108ba4cde 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
@@ -409,20 +409,20 @@ export function AllSharedChatsSidebar({
 												<span className="sr-only">{t("more_options") || "More options"}</span>
 											</Button>
 										</DropdownMenuTrigger>
-									<DropdownMenuContent align="end" className="w-40 z-80">
-										{!thread.archived && (
+										<DropdownMenuContent align="end" className="w-40 z-80">
+											{!thread.archived && (
+												<DropdownMenuItem
+													onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
+												>
+													<PenLine className="mr-2 h-4 w-4" />
+													<span>{t("rename") || "Rename"}</span>
+												</DropdownMenuItem>
+											)}
 											<DropdownMenuItem
-												onClick={() => handleStartRename(thread.id, thread.title || "New Chat")}
+												onClick={() => handleToggleArchive(thread.id, thread.archived)}
+												disabled={isArchiving}
 											>
-												<PenLine className="mr-2 h-4 w-4" />
-												<span>{t("rename") || "Rename"}</span>
-											</DropdownMenuItem>
-										)}
-										<DropdownMenuItem
-											onClick={() => handleToggleArchive(thread.id, thread.archived)}
-											disabled={isArchiving}
-										>
-											{thread.archived ? (
+												{thread.archived ? (
 													<>
 														<RotateCcwIcon className="mr-2 h-4 w-4" />
 														<span>{t("unarchive") || "Restore"}</span>
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
index 7f3a97f93..1a0fac9e9 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
@@ -381,11 +381,7 @@ export function SidebarUserProfile({
 					<DropdownMenuSeparator />
 
 					<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
-						{isLoggingOut ? (
-							<Spinner size="sm" className="mr-2" />
-						) : (
-							<LogOut className="h-4 w-4" />
-						)}
+						{isLoggingOut ? <Spinner size="sm" className="mr-2" /> : <LogOut className="h-4 w-4" />}
 						{isLoggingOut ? t("loggingOut") : t("logout")}
 					</DropdownMenuItem>
 				</DropdownMenuContent>
diff --git a/surfsense_web/components/new-chat/chat-share-button.tsx b/surfsense_web/components/new-chat/chat-share-button.tsx
index ab04fc4c9..bfb6d91fc 100644
--- a/surfsense_web/components/new-chat/chat-share-button.tsx
+++ b/surfsense_web/components/new-chat/chat-share-button.tsx
@@ -144,7 +144,9 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 					<TooltipTrigger asChild>
 						<button
 							type="button"
-							onClick={() => router.push(`/dashboard/${params.search_space_id}/settings?section=public-links`)}
+							onClick={() =>
+								router.push(`/dashboard/${params.search_space_id}/settings?section=public-links`)
+							}
 							className="flex items-center justify-center h-8 w-8 rounded-md bg-muted/50 hover:bg-muted transition-colors"
 						>
 							<Earth className="h-4 w-4 text-muted-foreground" />
diff --git a/surfsense_web/components/report-panel/report-panel.tsx b/surfsense_web/components/report-panel/report-panel.tsx
index 36a9b2443..dc84ca258 100644
--- a/surfsense_web/components/report-panel/report-panel.tsx
+++ b/surfsense_web/components/report-panel/report-panel.tsx
@@ -364,11 +364,7 @@ function ReportPanelContent({
 					{versions.length > 1 && (
 						<DropdownMenu modal={insideDrawer ? false : undefined}>
 							<DropdownMenuTrigger asChild>
-								<Button
-									variant="outline"
-									size="sm"
-									className="h-8 px-3.5 py-4 text-[15px] gap-1.5"
-								>
+								<Button variant="outline" size="sm" className="h-8 px-3.5 py-4 text-[15px] gap-1.5">
 									v{activeVersionIndex + 1}
 									<ChevronDownIcon className="size-3" />
 								</Button>
diff --git a/surfsense_web/components/settings/roles-manager.tsx b/surfsense_web/components/settings/roles-manager.tsx
index 42301f99f..96ab2551f 100644
--- a/surfsense_web/components/settings/roles-manager.tsx
+++ b/surfsense_web/components/settings/roles-manager.tsx
@@ -156,7 +156,6 @@ const ACTION_LABELS: Record<string, string> = {
 	manage_roles: "Manage Roles",
 };
 
-
 const ROLE_PRESETS = {
 	editor: {
 		name: "Editor",
@@ -241,13 +240,9 @@ export function RolesManager({ searchSpaceId }: { searchSpaceId: number }) {
 		[access]
 	);
 
-	const {
-		data: roles = [],
-		isLoading: rolesLoading,
-	} = useQuery({
+	const { data: roles = [], isLoading: rolesLoading } = useQuery({
 		queryKey: cacheKeys.roles.all(searchSpaceId.toString()),
-		queryFn: () =>
-			rolesApiService.getRoles({ search_space_id: searchSpaceId }),
+		queryFn: () => rolesApiService.getRoles({ search_space_id: searchSpaceId }),
 		enabled: !!searchSpaceId,
 	});
 
@@ -358,14 +353,10 @@ function RolePermissionsDialog({
 
 	return (
 		<Dialog>
-			<DialogTrigger asChild>
-				{children}
-			</DialogTrigger>
+			<DialogTrigger asChild>{children}</DialogTrigger>
 			<DialogContent className="w-[92vw] max-w-md p-0 gap-0">
 				<DialogHeader className="p-4 md:p-5">
-					<DialogTitle className="text-base">
-						{roleName} — Permissions
-					</DialogTitle>
+					<DialogTitle className="text-base">{roleName} — Permissions</DialogTitle>
 					<DialogDescription className="text-xs">
 						{isFullAccess
 							? "This role has unrestricted access to all resources"
@@ -379,7 +370,9 @@ function RolePermissionsDialog({
 						</div>
 						<div>
 							<p className="text-sm font-medium">Full access</p>
-							<p className="text-xs text-muted-foreground">All permissions granted across every category</p>
+							<p className="text-xs text-muted-foreground">
+								All permissions granted across every category
+							</p>
 						</div>
 					</div>
 				) : (
@@ -399,9 +392,7 @@ function RolePermissionsDialog({
 									>
 										<div className="flex items-center gap-2 shrink-0">
 											<IconComponent className="h-3.5 w-3.5 text-muted-foreground" />
-											<span className="text-sm text-muted-foreground">
-												{config.label}
-											</span>
+											<span className="text-sm text-muted-foreground">{config.label}</span>
 										</div>
 										<div className="flex flex-wrap justify-end gap-1">
 											{actions.map((action) => (
@@ -409,8 +400,7 @@ function RolePermissionsDialog({
 													key={action}
 													className="px-1.5 py-0.5 rounded bg-muted text-muted-foreground text-[11px] font-medium"
 												>
-													{ACTION_LABELS[action] ||
-														action.replace(/_/g, " ")}
+													{ACTION_LABELS[action] || action.replace(/_/g, " ")}
 												</span>
 											))}
 										</div>
@@ -435,7 +425,9 @@ function PermissionsBadge({ permissions }: { permissions: string[] }) {
 	}
 	return (
 		<div className="px-2.5 py-1 rounded-md border border-border/60 bg-muted/50 text-muted-foreground">
-			<span className="text-xs font-medium whitespace-nowrap">{permissions.length} permissions</span>
+			<span className="text-xs font-medium whitespace-nowrap">
+				{permissions.length} permissions
+			</span>
 		</div>
 	);
 }
@@ -514,15 +506,17 @@ function RolesContent({
 			{editingRole && (
 				<EditRoleDialog
 					open={!!editingRole}
-					onOpenChange={(open) => { if (!open) setEditingRoleId(null); }}
+					onOpenChange={(open) => {
+						if (!open) setEditingRoleId(null);
+					}}
 					role={editingRole}
 					groupedPermissions={groupedPermissions}
 					onUpdateRole={onUpdateRole}
 				/>
 			)}
 
-		<div className="space-y-3">
-			{roles.map((role, index) => (
+			<div className="space-y-3">
+				{roles.map((role, index) => (
 					<motion.div
 						key={role.id}
 						initial={{ opacity: 0, y: 6 }}
@@ -560,17 +554,19 @@ function RolesContent({
 								</div>
 
 								{!role.is_system_role && (
-									<div className="shrink-0" role="none" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
+									<div
+										className="shrink-0"
+										role="none"
+										onClick={(e) => e.stopPropagation()}
+										onKeyDown={(e) => e.stopPropagation()}
+									>
 										<DropdownMenu>
 											<DropdownMenuTrigger asChild>
 												<Button variant="ghost" size="icon" className="h-8 w-8">
 													<MoreHorizontal className="h-4 w-4" />
 												</Button>
 											</DropdownMenuTrigger>
-											<DropdownMenuContent
-												align="end"
-												onCloseAutoFocus={(e) => e.preventDefault()}
-											>
+											<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
 												{canUpdate && (
 													<DropdownMenuItem onClick={() => setEditingRoleId(role.id)}>
 														<Edit2 className="h-4 w-4 mr-2" />
@@ -649,18 +645,14 @@ function PermissionsEditor({
 
 	const toggleCategoryExpanded = useCallback((category: string) => {
 		setExpandedCategories((prev) =>
-			prev.includes(category)
-				? prev.filter((c) => c !== category)
-				: [...prev, category]
+			prev.includes(category) ? prev.filter((c) => c !== category) : [...prev, category]
 		);
 	}, []);
 
 	const getCategoryStats = useCallback(
 		(category: string) => {
 			const perms = groupedPermissions[category] || [];
-			const selected = perms.filter((p) =>
-				selectedPermissions.includes(p.value)
-			).length;
+			const selected = perms.filter((p) => selectedPermissions.includes(p.value)).length;
 			return {
 				selected,
 				total: perms.length,
@@ -683,15 +675,11 @@ function PermissionsEditor({
 					className="text-xs h-7"
 					onClick={() =>
 						setExpandedCategories(
-							expandedCategories.length === sortedCategories.length
-								? []
-								: sortedCategories
+							expandedCategories.length === sortedCategories.length ? [] : sortedCategories
 						)
 					}
 				>
-					{expandedCategories.length === sortedCategories.length
-						? "Collapse All"
-						: "Expand All"}
+					{expandedCategories.length === sortedCategories.length ? "Collapse All" : "Expand All"}
 				</Button>
 			</div>
 
@@ -709,10 +697,7 @@ function PermissionsEditor({
 					const perms = groupedPermissions[category] || [];
 
 					return (
-						<div
-							key={category}
-							className="rounded-lg border border-border/60 overflow-hidden"
-						>
+						<div key={category} className="rounded-lg border border-border/60 overflow-hidden">
 							<button
 								type="button"
 								className="w-full flex items-center justify-between px-3 py-2.5 cursor-pointer hover:bg-muted/40 transition-colors"
@@ -775,9 +760,7 @@ function PermissionsEditor({
 													type="button"
 													className={cn(
 														"w-full flex items-center justify-between gap-3 px-2.5 py-2 rounded-md cursor-pointer transition-colors",
-														isSelected
-															? "bg-muted/60 hover:bg-muted/80"
-															: "hover:bg-muted/40"
+														isSelected ? "bg-muted/60 hover:bg-muted/80" : "hover:bg-muted/40"
 													)}
 													onClick={() => onTogglePermission(perm.value)}
 												>
@@ -858,28 +841,19 @@ function CreateRoleDialog({
 
 	const togglePermission = useCallback((perm: string) => {
 		setSelectedPermissions((prev) =>
-			prev.includes(perm)
-				? prev.filter((p) => p !== perm)
-				: [...prev, perm]
+			prev.includes(perm) ? prev.filter((p) => p !== perm) : [...prev, perm]
 		);
 	}, []);
 
 	const toggleCategory = useCallback(
 		(category: string) => {
-			const categoryPerms =
-				groupedPermissions[category]?.map((p) => p.value) || [];
-			const allSelected = categoryPerms.every((p) =>
-				selectedPermissions.includes(p)
-			);
+			const categoryPerms = groupedPermissions[category]?.map((p) => p.value) || [];
+			const allSelected = categoryPerms.every((p) => selectedPermissions.includes(p));
 
 			if (allSelected) {
-				setSelectedPermissions((prev) =>
-					prev.filter((p) => !categoryPerms.includes(p))
-				);
+				setSelectedPermissions((prev) => prev.filter((p) => !categoryPerms.includes(p)));
 			} else {
-				setSelectedPermissions((prev) => [
-					...new Set([...prev, ...categoryPerms]),
-				]);
+				setSelectedPermissions((prev) => [...new Set([...prev, ...categoryPerms])]);
 			}
 		},
 		[groupedPermissions, selectedPermissions]
@@ -1063,28 +1037,19 @@ function EditRoleDialog({
 
 	const togglePermission = useCallback((perm: string) => {
 		setSelectedPermissions((prev) =>
-			prev.includes(perm)
-				? prev.filter((p) => p !== perm)
-				: [...prev, perm]
+			prev.includes(perm) ? prev.filter((p) => p !== perm) : [...prev, perm]
 		);
 	}, []);
 
 	const toggleCategory = useCallback(
 		(category: string) => {
-			const categoryPerms =
-				groupedPermissions[category]?.map((p) => p.value) || [];
-			const allSelected = categoryPerms.every((p) =>
-				selectedPermissions.includes(p)
-			);
+			const categoryPerms = groupedPermissions[category]?.map((p) => p.value) || [];
+			const allSelected = categoryPerms.every((p) => selectedPermissions.includes(p));
 
 			if (allSelected) {
-				setSelectedPermissions((prev) =>
-					prev.filter((p) => !categoryPerms.includes(p))
-				);
+				setSelectedPermissions((prev) => prev.filter((p) => !categoryPerms.includes(p)));
 			} else {
-				setSelectedPermissions((prev) => [
-					...new Set([...prev, ...categoryPerms]),
-				]);
+				setSelectedPermissions((prev) => [...new Set([...prev, ...categoryPerms])]);
 			}
 		},
 		[groupedPermissions, selectedPermissions]

From e0d149c84482e7629c8cfefcb30a79641d3a84d8 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 22 Feb 2026 18:44:22 +0530
Subject: [PATCH 18/18] feat: add select-none class to MorePagesPage

---
 .../app/dashboard/[search_space_id]/more-pages/page.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx
index 446e209a2..f2e9fb731 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx
@@ -75,7 +75,7 @@ export default function MorePagesPage() {
 	const allCompleted = data?.tasks.every((t) => t.completed) ?? false;
 
 	return (
-		<div className="flex min-h-[calc(100vh-64px)] items-center justify-center px-4 py-8">
+		<div className="flex min-h-[calc(100vh-64px)] select-none items-center justify-center px-4 py-8">
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}
@@ -174,7 +174,7 @@ export default function MorePagesPage() {
 								Contact Us
 							</Button>
 						</DialogTrigger>
-						<DialogContent className="sm:max-w-md">
+						<DialogContent className="select-none sm:max-w-md">
 							<DialogHeader>
 								<DialogTitle>Contact Us</DialogTitle>
 								<DialogDescription>Schedule a meeting or send us an email.</DialogDescription>