From ae9c346015a6a91ff2b198fa0ef29a591c2f01c8 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 3 Jun 2026 21:49:17 +0530
Subject: [PATCH] refactor(dashboard): improve layout and accessibility of
 TeamContent and TriggerCard components, enhancing button visibility and
 member display

---
 .../components/trigger-card.tsx               |  17 +-
 .../[search_space_id]/team/team-content.tsx   | 156 +++++++++---------
 .../components/layout/ui/sidebar/Sidebar.tsx  |   2 +-
 surfsense_web/messages/en.json                |   1 +
 surfsense_web/messages/es.json                |   1 +
 surfsense_web/messages/hi.json                |   1 +
 surfsense_web/messages/pt.json                |   1 +
 surfsense_web/messages/zh.json                |   1 +
 8 files changed, 102 insertions(+), 78 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
index 74091f123..6e6f84bd0 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
@@ -346,9 +346,20 @@ export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: Tri
 							>
 								Cancel
 							</Button>
-							<Button type="button" size="sm" onClick={saveEdit} disabled={updating}>
-								{updating ? <Spinner size="xs" className="mr-1.5" /> : null}
-								Save
+							<Button
+								type="button"
+								size="sm"
+								onClick={saveEdit}
+								disabled={updating}
+								className="relative"
+							>
+								<span className={updating ? "opacity-0" : undefined}>Save</span>
+								{updating ? (
+									<Spinner
+										size="xs"
+										className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+									/>
+								) : null}
 							</Button>
 						</div>
 					</div>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
index 3bc2459c1..9245d7bdd 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
@@ -236,35 +236,36 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 	if (accessLoading || membersLoading) {
 		return (
 			<div className="space-y-4 md:space-y-6">
-				<div className="flex items-center gap-2 flex-wrap">
-					<Button
-						type="button"
-						variant="outline"
-						size="sm"
-						aria-disabled="true"
-						tabIndex={-1}
-						className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm bg-black text-white dark:bg-white dark:text-black"
-					>
-						<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
-						Invite members
-					</Button>
-					<Button
-						type="button"
-						variant="secondary"
-						size="sm"
-						aria-disabled="true"
-						tabIndex={-1}
-						className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm"
-					>
-						<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
-						Active invites
-						<span className="inline-flex items-center justify-center h-4 md:h-5 min-w-4 md:min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200">
-							<Skeleton className="h-2.5 w-2.5 rounded-sm bg-neutral-500/60" />
-						</span>
-					</Button>
-					<div className="flex items-center gap-1 text-xs md:text-sm text-muted-foreground whitespace-nowrap">
-						<Skeleton className="h-3 w-2 rounded-sm" />
-						members
+				<div className="flex items-center justify-between gap-4 flex-wrap">
+					<div className="flex items-baseline gap-3">
+						<h1 className="text-xl md:text-2xl font-semibold text-foreground">Members</h1>
+					</div>
+					<div className="flex items-center gap-2">
+						<Button
+							type="button"
+							variant="outline"
+							size="sm"
+							aria-disabled="true"
+							tabIndex={-1}
+							className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm bg-black text-white dark:bg-white dark:text-black"
+						>
+							<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
+							Invite members
+						</Button>
+						<Button
+							type="button"
+							variant="ghost"
+							size="sm"
+							aria-disabled="true"
+							tabIndex={-1}
+							className="pointer-events-none gap-1.5 md:gap-2 rounded-md bg-muted px-3 text-xs md:text-sm hover:bg-accent"
+						>
+							<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
+							Active invites
+							<span className="inline-flex items-center justify-center h-4 md:h-5 min-w-4 md:min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200">
+								<Skeleton className="h-2.5 w-2.5 rounded-sm bg-neutral-500/60" />
+							</span>
+						</Button>
 					</div>
 				</div>
 				<div className="rounded-lg border border-border/60 bg-accent overflow-hidden">
@@ -319,51 +320,54 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
 
 	return (
 		<div className="space-y-4 md:space-y-6">
-			<div className="flex items-center gap-2 flex-wrap">
-				{canInvite &&
-					(rolesLoading ? (
-						<Button
-							type="button"
-							variant="outline"
-							size="sm"
-							aria-disabled="true"
-							tabIndex={-1}
-							className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm bg-black text-white dark:bg-white dark:text-black"
-						>
-							<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
-							Invite members
-						</Button>
-					) : (
-						<CreateInviteDialog
-							roles={roles}
-							onCreateInvite={handleCreateInvite}
-							searchSpaceId={searchSpaceId}
-						/>
-					))}
-				{canInvite &&
-					(invitesLoading ? (
-						<Button
-							type="button"
-							variant="secondary"
-							size="sm"
-							aria-disabled="true"
-							tabIndex={-1}
-							className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm"
-						>
-							<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
-							Active invites
-							<span className="inline-flex items-center justify-center h-4 md:h-5 min-w-4 md:min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200">
-								<Skeleton className="h-2.5 w-2.5 rounded-sm bg-neutral-500/60" />
-							</span>
-						</Button>
-					) : (
-						activeInvites.length > 0 && (
+			<div className="flex items-center justify-between gap-4 flex-wrap">
+				<div className="flex items-baseline gap-3">
+					<h1 className="text-xl md:text-2xl font-semibold text-foreground">Members</h1>
+					<p className="text-sm text-muted-foreground whitespace-nowrap">
+						{members.length} {members.length === 1 ? "member" : "members"}
+					</p>
+				</div>
+				{canInvite && (
+					<div className="flex items-center gap-2">
+						{rolesLoading ? (
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
+								aria-disabled="true"
+								tabIndex={-1}
+								className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm bg-black text-white dark:bg-white dark:text-black"
+							>
+								<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
+								Invite members
+							</Button>
+						) : (
+							<CreateInviteDialog
+								roles={roles}
+								onCreateInvite={handleCreateInvite}
+								searchSpaceId={searchSpaceId}
+							/>
+						)}
+						{invitesLoading ? (
+							<Button
+								type="button"
+								variant="ghost"
+								size="sm"
+								aria-disabled="true"
+								tabIndex={-1}
+								className="pointer-events-none gap-1.5 md:gap-2 rounded-md bg-muted px-3 text-xs md:text-sm hover:bg-accent"
+							>
+								<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
+								Active invites
+								<span className="inline-flex items-center justify-center h-4 md:h-5 min-w-4 md:min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200">
+									<Skeleton className="h-2.5 w-2.5 rounded-sm bg-neutral-500/60" />
+								</span>
+							</Button>
+						) : (
 							<AllInvitesDialog invites={activeInvites} onRevokeInvite={handleRevokeInvite} />
-						)
-					))}
-				<p className="text-xs md:text-sm text-muted-foreground whitespace-nowrap">
-					{members.length} {members.length === 1 ? "member" : "members"}
-				</p>
+						)}
+					</div>
+				)}
 			</div>
 
 			<div className="rounded-lg border border-border/60 bg-accent overflow-hidden">
@@ -859,7 +863,11 @@ function AllInvitesDialog({
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<Button variant="secondary" size="sm" className="gap-1.5 md:gap-2 text-xs md:text-sm">
+				<Button
+					variant="ghost"
+					size="sm"
+					className="gap-1.5 md:gap-2 rounded-md bg-muted px-3 text-xs md:text-sm hover:bg-accent"
+				>
 					<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
 					Active invites
 					<span className="inline-flex items-center justify-center h-4 md:h-5 min-w-4 md:min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200 text-[10px] md:text-xs font-medium">
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index b7c8d94c7..8974f16a2 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -259,7 +259,7 @@ export function Sidebar({
 			) : (
 				<div className="flex-1 flex flex-col gap-1 pt-2 w-full min-h-0 overflow-hidden">
 					<SidebarSection
-						title={t("chats")}
+						title={t("recents")}
 						defaultOpen={true}
 						fillHeight={true}
 						alwaysShowAction={!disableTooltips && isChatsPanelOpen}
diff --git a/surfsense_web/messages/en.json b/surfsense_web/messages/en.json
index de31e00b9..a13942e64 100644
--- a/surfsense_web/messages/en.json
+++ b/surfsense_web/messages/en.json
@@ -650,6 +650,7 @@
 		"created": "Created"
 	},
 	"sidebar": {
+		"recents": "Recents",
 		"chats": "Chats",
 		"shared_chats": "Shared Chats",
 		"search_chats": "Search chats",
diff --git a/surfsense_web/messages/es.json b/surfsense_web/messages/es.json
index 658c9f7cf..33ae79c52 100644
--- a/surfsense_web/messages/es.json
+++ b/surfsense_web/messages/es.json
@@ -650,6 +650,7 @@
 		"created": "Creado"
 	},
 	"sidebar": {
+		"recents": "Recientes",
 		"chats": "Chats",
 		"shared_chats": "Chats compartidos",
 		"search_chats": "Buscar chats",
diff --git a/surfsense_web/messages/hi.json b/surfsense_web/messages/hi.json
index 33a0c8a36..7a26d0c1d 100644
--- a/surfsense_web/messages/hi.json
+++ b/surfsense_web/messages/hi.json
@@ -650,6 +650,7 @@
 		"created": "बनाया गया"
 	},
 	"sidebar": {
+		"recents": "हालिया",
 		"chats": "चैट",
 		"shared_chats": "साझा चैट",
 		"search_chats": "चैट खोजें",
diff --git a/surfsense_web/messages/pt.json b/surfsense_web/messages/pt.json
index 6ea0ae5cf..61c22e086 100644
--- a/surfsense_web/messages/pt.json
+++ b/surfsense_web/messages/pt.json
@@ -650,6 +650,7 @@
 		"created": "Criado"
 	},
 	"sidebar": {
+		"recents": "Recentes",
 		"chats": "Chats",
 		"shared_chats": "Chats compartilhados",
 		"search_chats": "Pesquisar chats",
diff --git a/surfsense_web/messages/zh.json b/surfsense_web/messages/zh.json
index 1404c6ef0..7d0419cbd 100644
--- a/surfsense_web/messages/zh.json
+++ b/surfsense_web/messages/zh.json
@@ -634,6 +634,7 @@
 		"created": "创建于"
 	},
 	"sidebar": {
+		"recents": "最近",
 		"chats": "对话",
 		"shared_chats": "共享对话",
 		"search_chats": "搜索对话...",