add sorted style to home table header buttons

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" />}

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,10 +367,8 @@ const AllSystemsTable = memo(
 	}
 )
 
-function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>; colLength: number }) {
-	const { i18n } = useLingui()
-
-	return useMemo(() => {
+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) => (
@@ -386,7 +384,6 @@ function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>
 			))}
 		</TableHeader>
 	)
-	}, [i18n.locale, colLength])
 }
 
 const SystemTableRow = memo(