From 240e75f0251f4074223be64c99aea463e92ffcf1 Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Sun, 21 Sep 2025 19:23:34 -0400
Subject: [PATCH] add sorted style to home table header buttons

---
 .../systems-table/systems-table-columns.tsx   |  3 +-
 .../systems-table/systems-table.tsx           | 39 +++++++++----------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/internal/site/src/components/systems-table/systems-table-columns.tsx b/internal/site/src/components/systems-table/systems-table-columns.tsx
index 8fc7e586..8515d184 100644
--- a/internal/site/src/components/systems-table/systems-table-columns.tsx
+++ b/internal/site/src/components/systems-table/systems-table-columns.tsx
@@ -306,10 +306,11 @@ function sortableHeader(context: HeaderContext<SystemRecord, unknown>) {
 	const { column } = context
 	// @ts-expect-error
 	const { Icon, hideSort, name }: { Icon: React.ElementType; name: () => string; hideSort: boolean } = column.columnDef
+	const isSorted = column.getIsSorted()
 	return (
 		<Button
 			variant="ghost"
-			className="h-9 px-3 flex"
+			className={cn("h-9 px-3 flex duration-50", isSorted && "bg-accent/70 light:bg-accent text-accent-foreground/90")}
 			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
 		>
 			{Icon && <Icon className="me-2 size-4" />}
diff --git a/internal/site/src/components/systems-table/systems-table.tsx b/internal/site/src/components/systems-table/systems-table.tsx
index 1098e1f7..ef6fd8fa 100644
--- a/internal/site/src/components/systems-table/systems-table.tsx
+++ b/internal/site/src/components/systems-table/systems-table.tsx
@@ -337,7 +337,7 @@ const AllSystemsTable = memo(
 				{/* add header height to table size */}
 				<div style={{ height: `${virtualizer.getTotalSize() + 50}px`, paddingTop, paddingBottom }}>
 					<table className="text-sm w-full h-full">
-						<SystemsTableHead table={table} colLength={colLength} />
+						<SystemsTableHead table={table} />
 						<TableBody onMouseEnter={preloadSystemDetail}>
 							{rows.length ? (
 								virtualRows.map((virtualRow) => {
@@ -367,26 +367,23 @@ const AllSystemsTable = memo(
 	}
 )
 
-function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>; colLength: number }) {
-	const { i18n } = useLingui()
-
-	return useMemo(() => {
-		return (
-			<TableHeader className="sticky top-0 z-20 w-full border-b-2">
-				{table.getHeaderGroups().map((headerGroup) => (
-					<tr key={headerGroup.id}>
-						{headerGroup.headers.map((header) => {
-							return (
-								<TableHead className="px-1.5" key={header.id}>
-									{flexRender(header.column.columnDef.header, header.getContext())}
-								</TableHead>
-							)
-						})}
-					</tr>
-				))}
-			</TableHeader>
-		)
-	}, [i18n.locale, colLength])
+function SystemsTableHead({ table }: { table: TableType<SystemRecord> }) {
+	const { t } = useLingui()
+	return (
+		<TableHeader className="sticky top-0 z-20 w-full border-b-2">
+			{table.getHeaderGroups().map((headerGroup) => (
+				<tr key={headerGroup.id}>
+					{headerGroup.headers.map((header) => {
+						return (
+							<TableHead className="px-1.5" key={header.id}>
+								{flexRender(header.column.columnDef.header, header.getContext())}
+							</TableHead>
+						)
+					})}
+				</tr>
+			))}
+		</TableHeader>
+	)
 }
 
 const SystemTableRow = memo(