refactor(dashboard): improve layout and accessibility of TeamContent and TriggerCard components, enhancing button visibility and member display

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}>
+							<Button
-								{updating ? <Spinner size="xs" className="mr-1.5" /> : null}
+								type="button"
-								Save
+								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>

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">
+				<div className="flex items-center justify-between gap-4 flex-wrap">
-					<Button
+					<div className="flex items-baseline gap-3">
-						type="button"
+						<h1 className="text-xl md:text-2xl font-semibold text-foreground">Members</h1>
-						variant="outline"
+					</div>
-						size="sm"
+					<div className="flex items-center gap-2">
-						aria-disabled="true"
+						<Button
-						tabIndex={-1}
+							type="button"
-						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"
+							variant="outline"
-					>
+							size="sm"
-						<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
+							aria-disabled="true"
-						Invite members
+							tabIndex={-1}
-					</Button>
+							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"
-					<Button
+						>
-						type="button"
+							<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
-						variant="secondary"
+							Invite members
-						size="sm"
+						</Button>
-						aria-disabled="true"
+						<Button
-						tabIndex={-1}
+							type="button"
-						className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm"
+							variant="ghost"
-					>
+							size="sm"
-						<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
+							aria-disabled="true"
-						Active invites
+							tabIndex={-1}
-						<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">
+							className="pointer-events-none gap-1.5 md:gap-2 rounded-md bg-muted px-3 text-xs md:text-sm hover:bg-accent"
-							<Skeleton className="h-2.5 w-2.5 rounded-sm bg-neutral-500/60" />
+						>
-						</span>
+							<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
-					</Button>
+							Active invites
-					<div className="flex items-center gap-1 text-xs md:text-sm text-muted-foreground whitespace-nowrap">
+							<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-3 w-2 rounded-sm" />
+								<Skeleton className="h-2.5 w-2.5 rounded-sm bg-neutral-500/60" />
-						members
+							</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">
+			<div className="flex items-center justify-between gap-4 flex-wrap">
-				{canInvite &&
+				<div className="flex items-baseline gap-3">
-					(rolesLoading ? (
+					<h1 className="text-xl md:text-2xl font-semibold text-foreground">Members</h1>
-						<Button
+					<p className="text-sm text-muted-foreground whitespace-nowrap">
-							type="button"
+						{members.length} {members.length === 1 ? "member" : "members"}
-							variant="outline"
+					</p>
-							size="sm"
+				</div>
-							aria-disabled="true"
+				{canInvite && (
-							tabIndex={-1}
+					<div className="flex items-center gap-2">
-							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"
+						{rolesLoading ? (
-						>
+							<Button
-							<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
+								type="button"
-							Invite members
+								variant="outline"
-						</Button>
+								size="sm"
-					) : (
+								aria-disabled="true"
-						<CreateInviteDialog
+								tabIndex={-1}
-							roles={roles}
+								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"
-							onCreateInvite={handleCreateInvite}
+							>
-							searchSpaceId={searchSpaceId}
+								<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
-						/>
+								Invite members
-					))}
+							</Button>
-				{canInvite &&
+						) : (
-					(invitesLoading ? (
+							<CreateInviteDialog
-						<Button
+								roles={roles}
-							type="button"
+								onCreateInvite={handleCreateInvite}
-							variant="secondary"
+								searchSpaceId={searchSpaceId}
-							size="sm"
+							/>
-							aria-disabled="true"
+						)}
-							tabIndex={-1}
+						{invitesLoading ? (
-							className="pointer-events-none gap-1.5 md:gap-2 text-xs md:text-sm"
+							<Button
-						>
+								type="button"
-							<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
+								variant="ghost"
-							Active invites
+								size="sm"
-							<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">
+								aria-disabled="true"
-								<Skeleton className="h-2.5 w-2.5 rounded-sm bg-neutral-500/60" />
+								tabIndex={-1}
-							</span>
+								className="pointer-events-none gap-1.5 md:gap-2 rounded-md bg-muted px-3 text-xs md:text-sm hover:bg-accent"
-						</Button>
+							>
-					) : (
+								<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
-						activeInvites.length > 0 && (
+								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} />
-						)
+						)}
-					))}
+					</div>
-				<p className="text-xs md:text-sm text-muted-foreground whitespace-nowrap">
+				)}
-					{members.length} {members.length === 1 ? "member" : "members"}
-				</p>
 			</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">

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}

surfsense_web/messages/en.json

@@ -650,6 +650,7 @@
 		"created": "Created"
 	},
 	"sidebar": {
+		"recents": "Recents",
 		"chats": "Chats",
 		"shared_chats": "Shared Chats",
 		"search_chats": "Search chats",

surfsense_web/messages/es.json

@@ -650,6 +650,7 @@
 		"created": "Creado"
 	},
 	"sidebar": {
+		"recents": "Recientes",
 		"chats": "Chats",
 		"shared_chats": "Chats compartidos",
 		"search_chats": "Buscar chats",

surfsense_web/messages/hi.json

@@ -650,6 +650,7 @@
 		"created": "बनाया गया"
 	},
 	"sidebar": {
+		"recents": "हालिया",
 		"chats": "चैट",
 		"shared_chats": "साझा चैट",
 		"search_chats": "चैट खोजें",

surfsense_web/messages/pt.json

@@ -650,6 +650,7 @@
 		"created": "Criado"
 	},
 	"sidebar": {
+		"recents": "Recentes",
 		"chats": "Chats",
 		"shared_chats": "Chats compartilhados",
 		"search_chats": "Pesquisar chats",

surfsense_web/messages/zh.json

@@ -634,6 +634,7 @@
 		"created": "创建于"
 	},
 	"sidebar": {
+		"recents": "最近",
 		"chats": "对话",
 		"shared_chats": "共享对话",
 		"search_chats": "搜索对话...",