refactor(site): move package updates to own tab and tweak table

- show package updates in a separate Updates tab in the tabbed layout
- sort major version changes first in the change column
- use text-sm for version numbers

internal/site/src/components/routes/system.tsx

@@ -23,7 +23,7 @@ import {
 	LazyZfsTable,
 } from "./system/lazy-tables"
 import { LoadAverageChart } from "./system/charts/load-average-chart"
-import { ContainerIcon, CpuIcon, HardDriveIcon, NetworkIcon, TerminalSquareIcon } from "lucide-react"
+import { ContainerIcon, CpuIcon, HardDriveIcon, NetworkIcon, PackageIcon, TerminalSquareIcon } from "lucide-react"
 import { GpuIcon } from "../ui/icons"
 import SystemdTable from "../systemd-table/systemd-table"
 import ContainersTable from "../containers-table/containers-table"
@@ -83,6 +83,7 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 	if (hasGpu) tabs.push("gpu")
 	if (hasContainers) tabs.push("containers")
 	if (hasSystemd) tabs.push("services")
+	if (packageUpdates) tabs.push("updates")
 	tabsRef.current = tabs
 
 	// shared chart props
@@ -208,6 +209,12 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 							<Trans>Services</Trans>
 						</TabsTrigger>
 					)}
+					{packageUpdates && (
+						<TabsTrigger value="updates" className="w-full flex items-center gap-2">
+							<PackageIcon className="size-3.5" />
+							<Trans>Updates</Trans>
+						</TabsTrigger>
+					)}
 				</TabsList>
 
 				<TabsContent value="core" forceMount className={activeTab === "core" ? "contents" : "hidden"}>
@@ -221,7 +228,6 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						<BatteryChart system={system} {...coreProps} />
 						{pageBottomExtraMargin > 0 && <div style={{ marginBottom: pageBottomExtraMargin }}></div>}
 					</div>
-					{packageUpdates && <LazyPackageUpdatesTable systemId={system.id} counts={packageUpdates} />}
 				</TabsContent>
 
 				<TabsContent value="network" forceMount className={activeTab === "network" ? "contents" : "hidden"}>
@@ -302,6 +308,12 @@ export default memo(function SystemDetail({ id }: { id: string }) {
 						{mountedTabs.has("services") && <SystemdTable systemId={system.id} />}
 					</TabsContent>
 				)}
+
+				{packageUpdates && (
+					<TabsContent value="updates" forceMount className={activeTab === "updates" ? "contents" : "hidden"}>
+						{mountedTabs.has("updates") && <LazyPackageUpdatesTable systemId={system.id} counts={packageUpdates} />}
+					</TabsContent>
+				)}
 			</Tabs>
 		)
 	}

internal/site/src/components/routes/system/package-updates-table.tsx

@@ -35,8 +35,8 @@ interface PackageUpdateRow extends PackageUpdate {
 	change: VersionChange
 }
 
-/** Sort order of version changes, largest first. */
-const changeRank: Record<VersionChange, number> = { major: 4, minor: 3, patch: 2, revision: 1, other: 0 }
+/** Sort order of version changes, so ascending puts major first. */
+const changeRank: Record<VersionChange, number> = { major: 0, minor: 1, patch: 2, revision: 3, other: 4 }
 
 const changeVariant: Record<VersionChange, BadgeProps["variant"]> = {
 	major: "danger",
@@ -107,7 +107,7 @@ function getColumns(securityKnown: boolean): ColumnDef<PackageUpdateRow>[] {
 				</span>
 			),
 			cell: ({ getValue }) => (
-				<span className="ms-1.5 block font-mono text-xs text-muted-foreground">{(getValue() as string) || "-"}</span>
+				<span className="ms-1.5 block font-mono text-sm text-muted-foreground">{(getValue() as string) || "-"}</span>
 			),
 		},
 		{
@@ -120,7 +120,7 @@ function getColumns(securityKnown: boolean): ColumnDef<PackageUpdateRow>[] {
 					<Trans context="Package version available to install">Available</Trans>
 				</span>
 			),
-			cell: ({ getValue }) => <span className="ms-1.5 block font-mono text-xs">{getValue() as string}</span>,
+			cell: ({ getValue }) => <span className="ms-1.5 block font-mono text-sm">{getValue() as string}</span>,
 		},
 		{
 			id: "change",