ui: small refactoring / auto formatting

internal/site/src/components/containers-table/containers-table.tsx

@@ -54,36 +54,34 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 					fields: "id,name,image,cpu,memory,net,health,status,system,updated",
 					filter: systemId ? pb.filter("system={:system}", { system: systemId }) : undefined,
 				})
-				.then(
-					({ items }) => {
-						if (items.length === 0) {
-							setData((curItems) => {
-								if (systemId) {
-									return curItems?.filter((item) => item.system !== systemId) ?? []
-								}
-								return []
-							})
-							return
-						}
+				.then(({ items }) => {
+					if (items.length === 0) {
 						setData((curItems) => {
-							const lastUpdated = Math.max(items[0].updated, items.at(-1)?.updated ?? 0)
-							const containerIds = new Set()
-							const newItems = []
-							for (const item of items) {
-								if (Math.abs(lastUpdated - item.updated) < 70_000) {
-									containerIds.add(item.id)
-									newItems.push(item)
-								}
+							if (systemId) {
+								return curItems?.filter((item) => item.system !== systemId) ?? []
 							}
-							for (const item of curItems ?? []) {
-								if (!containerIds.has(item.id) && lastUpdated - item.updated < 70_000) {
-									newItems.push(item)
-								}
-							}
-							return newItems
+							return []
 						})
+						return
 					}
-				)
+					setData((curItems) => {
+						const lastUpdated = Math.max(items[0].updated, items.at(-1)?.updated ?? 0)
+						const containerIds = new Set()
+						const newItems = []
+						for (const item of items) {
+							if (Math.abs(lastUpdated - item.updated) < 70_000) {
+								containerIds.add(item.id)
+								newItems.push(item)
+							}
+						}
+						for (const item of curItems ?? []) {
+							if (!containerIds.has(item.id) && lastUpdated - item.updated < 70_000) {
+								newItems.push(item)
+							}
+						}
+						return newItems
+					})
+				})
 		}
 
 		// initial load
@@ -285,7 +283,7 @@ async function getInfoHtml(container: ContainerRecord): Promise<string> {
 		])
 		try {
 			info = JSON.stringify(JSON.parse(info), null, 2)
-		} catch (_) { }
+		} catch (_) {}
 		return info ? highlighter.codeToHtml(info, { lang: "json", theme: syntaxTheme }) : t`No results.`
 	} catch (error) {
 		console.error(error)
@@ -342,12 +340,12 @@ function ContainerSheet({
 		setLogsDisplay("")
 		setInfoDisplay("")
 		if (!container) return
-			; (async () => {
-				const [logsHtml, infoHtml] = await Promise.all([getLogsHtml(container), getInfoHtml(container)])
-				setLogsDisplay(logsHtml)
-				setInfoDisplay(infoHtml)
-				setTimeout(scrollLogsToBottom, 20)
-			})()
+		;(async () => {
+			const [logsHtml, infoHtml] = await Promise.all([getLogsHtml(container), getInfoHtml(container)])
+			setLogsDisplay(logsHtml)
+			setInfoDisplay(infoHtml)
+			setTimeout(scrollLogsToBottom, 20)
+		})()
 	}, [container])
 
 	return (
@@ -473,7 +471,7 @@ const ContainerTableRow = memo(function ContainerTableRow({
 			{row.getVisibleCells().map((cell) => (
 				<TableCell
 					key={cell.id}
-					className="py-0"
+					className="py-0 ps-4.5"
 					style={{
 						height: virtualRow.size,
 					}}

internal/site/src/components/routes/system/info-bar.tsx

@@ -19,7 +19,7 @@ import { FreeBsdIcon, TuxIcon, WebSocketIcon, WindowsIcon } from "@/components/u
 import { Separator } from "@/components/ui/separator"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { ConnectionType, connectionTypeLabels, Os, SystemStatus } from "@/lib/enums"
-import { cn, formatBytes, getHostDisplayValue, secondsToString, toFixedFloat } from "@/lib/utils"
+import { cn, formatBytes, getHostDisplayValue, secondsToUptimeString, toFixedFloat } from "@/lib/utils"
 import type { ChartData, SystemDetailsRecord, SystemRecord } from "@/types"
 
 export default function InfoBar({
@@ -77,14 +77,6 @@ export default function InfoBar({
 			},
 		}
 
-		let uptime: string
-		if (system.info.u < 3600) {
-			uptime = secondsToString(system.info.u, "minute")
-		} else if (system.info.u < 360000) {
-			uptime = secondsToString(system.info.u, "hour")
-		} else {
-			uptime = secondsToString(system.info.u, "day")
-		}
 		const info = [
 			{ value: getHostDisplayValue(system), Icon: GlobeIcon },
 			{
@@ -94,7 +86,7 @@ export default function InfoBar({
 				// hide if hostname is same as host or name
 				hide: hostname === system.host || hostname === system.name,
 			},
-			{ value: uptime, Icon: ClockArrowUp, label: t`Uptime`, hide: !system.info.u },
+			{ value: secondsToUptimeString(system.info.u), Icon: ClockArrowUp, label: t`Uptime`, hide: !system.info.u },
 			osInfo[os],
 			{
 				value: cpuModel,

internal/site/src/components/routes/system/smart-table.tsx

@@ -174,8 +174,8 @@ export const columns: ColumnDef<SmartDeviceRecord>[] = [
 			<HeaderButton column={column} name={t({ message: "Power On", comment: "Power On Time" })} Icon={Clock} />
 		),
 		cell: ({ getValue }) => {
-			const hours = (getValue() ?? 0) as number
-			if (!hours && hours !== 0) {
+			const hours = getValue() as number | undefined
+			if (hours == null) {
 				return <div className="text-sm text-muted-foreground ms-1.5">N/A</div>
 			}
 			const seconds = hours * 3600
@@ -195,7 +195,7 @@ export const columns: ColumnDef<SmartDeviceRecord>[] = [
 		),
 		cell: ({ getValue }) => {
 			const cycles = getValue() as number | undefined
-			if (!cycles && cycles !== 0) {
+			if (cycles == null) {
 				return <div className="text-muted-foreground ms-1.5">N/A</div>
 			}
 			return <span className="ms-1.5">{cycles.toLocaleString()}</span>
@@ -206,9 +206,8 @@ export const columns: ColumnDef<SmartDeviceRecord>[] = [
 		invertSorting: true,
 		header: ({ column }) => <HeaderButton column={column} name={t`Temp`} Icon={ThermometerIcon} />,
 		cell: ({ getValue }) => {
-			const temp = getValue() as number | undefined | null
-			// Most devices won't report a real 0C temperature; treat 0 as "unknown".
-			if (temp == null || temp === 0) {
+			const temp = getValue() as number | null | undefined
+			if (!temp) {
 				return <div className="text-muted-foreground ms-1.5">N/A</div>
 			}
 			const { value, unit } = formatTemperature(temp)
@@ -309,41 +308,41 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 			? { fields: SMART_DEVICE_FIELDS, filter: pb.filter("system = {:system}", { system: systemId }) }
 			: { fields: SMART_DEVICE_FIELDS }
 
-			; (async () => {
-				try {
-					unsubscribe = await pb.collection("smart_devices").subscribe(
-						"*",
-						(event) => {
-							const record = event.record as SmartDeviceRecord
-							setSmartDevices((currentDevices) => {
-								const devices = currentDevices ?? []
-								const matchesSystemScope = !systemId || record.system === systemId
+		;(async () => {
+			try {
+				unsubscribe = await pb.collection("smart_devices").subscribe(
+					"*",
+					(event) => {
+						const record = event.record as SmartDeviceRecord
+						setSmartDevices((currentDevices) => {
+							const devices = currentDevices ?? []
+							const matchesSystemScope = !systemId || record.system === systemId
 
-								if (event.action === "delete") {
-									return devices.filter((device) => device.id !== record.id)
-								}
+							if (event.action === "delete") {
+								return devices.filter((device) => device.id !== record.id)
+							}
 
-								if (!matchesSystemScope) {
-									// Record moved out of scope; ensure it disappears locally.
-									return devices.filter((device) => device.id !== record.id)
-								}
+							if (!matchesSystemScope) {
+								// Record moved out of scope; ensure it disappears locally.
+								return devices.filter((device) => device.id !== record.id)
+							}
 
-								const existingIndex = devices.findIndex((device) => device.id === record.id)
-								if (existingIndex === -1) {
-									return [record, ...devices]
-								}
+							const existingIndex = devices.findIndex((device) => device.id === record.id)
+							if (existingIndex === -1) {
+								return [record, ...devices]
+							}
 
-								const next = [...devices]
-								next[existingIndex] = record
-								return next
-							})
-						},
-						pbOptions
-					)
-				} catch (error) {
-					console.error("Failed to subscribe to SMART device updates:", error)
-				}
-			})()
+							const next = [...devices]
+							next[existingIndex] = record
+							return next
+						})
+					},
+					pbOptions
+				)
+			} catch (error) {
+				console.error("Failed to subscribe to SMART device updates:", error)
+			}
+		})()
 
 		return () => {
 			unsubscribe?.()

internal/site/src/components/systems-table/systems-table-columns.tsx

@@ -35,7 +35,7 @@ import {
 	formatTemperature,
 	getMeterState,
 	parseSemVer,
-	secondsToString,
+	secondsToUptimeString,
 } from "@/lib/utils"
 import { batteryStateTranslations } from "@/lib/i18n"
 import type { SystemRecord } from "@/types"
@@ -154,11 +154,7 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 								{name}
 							</Link>
 						</span>
-						<Link
-							href={linkUrl}
-							className="inset-0 absolute size-full"
-							aria-label={name}
-						></Link>
+						<Link href={linkUrl} className="inset-0 absolute size-full" aria-label={name}></Link>
 					</>
 				)
 			},
@@ -382,20 +378,13 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 			size: 50,
 			Icon: ClockArrowUp,
 			header: sortableHeader,
+			hideSort: true,
 			cell(info) {
 				const uptime = info.getValue() as number
 				if (!uptime) {
 					return null
 				}
-				let formatted: string
-				if (uptime < 3600) {
-					formatted = secondsToString(uptime, "minute")
-				} else if (uptime < 360000) {
-					formatted = secondsToString(uptime, "hour")
-				} else {
-					formatted = secondsToString(uptime, "day")
-				}
-				return <span className="tabular-nums whitespace-nowrap">{formatted}</span>
+				return <span className="tabular-nums whitespace-nowrap">{secondsToUptimeString(uptime)}</span>
 			},
 		},
 		{
@@ -479,9 +468,9 @@ function TableCellWithMeter(info: CellContext<SystemRecord, unknown>) {
 	const meterClass = cn(
 		"h-full",
 		(info.row.original.status !== SystemStatus.Up && STATUS_COLORS.paused) ||
-		(threshold === MeterState.Good && STATUS_COLORS.up) ||
-		(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
-		STATUS_COLORS.down
+			(threshold === MeterState.Good && STATUS_COLORS.up) ||
+			(threshold === MeterState.Warn && STATUS_COLORS.pending) ||
+			STATUS_COLORS.down
 	)
 	return (
 		<div className="flex gap-2 items-center tabular-nums tracking-tight w-full">
@@ -593,7 +582,7 @@ export function IndicatorDot({ system, className }: { system: SystemRecord; clas
 	return (
 		<span
 			className={cn("shrink-0 size-2 rounded-full", className)}
-		// style={{ marginBottom: "-1px" }}
+			// style={{ marginBottom: "-1px" }}
 		/>
 	)
 }

internal/site/src/components/systems-table/systems-table.tsx

@@ -434,7 +434,7 @@ const SystemTableRow = memo(
 								width: cell.column.getSize(),
 								height: virtualRow.size,
 							}}
-							className="py-0"
+							className="py-0 ps-4.5"
 						>
 							{flexRender(cell.column.columnDef.cell, cell.getContext())}
 						</TableCell>

internal/site/src/lib/utils.ts

@@ -465,4 +465,15 @@ export function secondsToString(seconds: number, unit: "hour" | "minute" | "day"
 		case "day":
 			return plural(count, { one: `${countString} day`, other: `${countString} days` })
 	}
+}
+
+/** Format seconds to uptime string - "X minutes", "X hours", "X days" */
+export function secondsToUptimeString(seconds: number): string {
+	if (seconds < 3600) {
+		return secondsToString(seconds, "minute")
+	} else if (seconds < 360000) {
+		return secondsToString(seconds, "hour")
+	} else {
+		return secondsToString(seconds, "day")
+	}
 }