add low battery alert (#1507)

internal/site/src/components/alerts/alerts-sheet.tsx

@@ -245,13 +245,23 @@ export function AlertContent({
 						{!singleDescription && (
 							<div>
 								<p id={`v${name}`} className="text-sm block h-8">
-									<Trans>
-										Average exceeds{" "}
-										<strong className="text-foreground">
-											{value}
-											{alertData.unit}
-										</strong>
-									</Trans>
+									{alertKey === "Battery" ? (
+										<Trans>
+											Average drops below{" "}
+											<strong className="text-foreground">
+												{value}
+												{alertData.unit}
+											</strong>
+										</Trans>
+									) : (
+										<Trans>
+											Average exceeds{" "}
+											<strong className="text-foreground">
+												{value}
+												{alertData.unit}
+											</strong>
+										</Trans>
+									)}
 								</p>
 								<div className="flex gap-3">
 									<Slider

internal/site/src/components/ui/icons.tsx

@@ -139,3 +139,11 @@ export function WebSocketIcon(props: SVGProps<SVGSVGElement>) {
 		</svg>
 	)
 }
+
+export function BatteryIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 256 256" {...props} fill="currentColor">
+			<path d="M176,32H80A24,24,0,0,0,56,56V224a24,24,0,0,0,24,24h96a24,24,0,0,0,24-24V56A24,24,0,0,0,176,32Zm8,192a8,8,0,0,1-8,8H80a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8h96a8,8,0,0,1,8,8Zm-16-24a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,200ZM88,8a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H96A8,8,0,0,1,88,8Zm80,152a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Z"></path>
+		</svg>
+	)
+}

internal/site/src/lib/alerts.ts

@@ -1,10 +1,11 @@
 import { t } from "@lingui/core/macro"
-import { CpuIcon, HardDriveIcon, HourglassIcon, MemoryStickIcon, ServerIcon, ThermometerIcon } from "lucide-react"
+import { CpuIcon, HardDriveIcon, MemoryStickIcon, ServerIcon } from "lucide-react"
 import type { RecordSubscription } from "pocketbase"
 import { EthernetIcon, GpuIcon } from "@/components/ui/icons"
 import { $alerts } from "@/lib/stores"
 import type { AlertInfo, AlertRecord } from "@/types"
 import { pb } from "./api"
+import { ThermometerIcon, BatteryIcon, HourglassIcon } from "@/components/ui/icons"
 
 /** Alert info for each alert type */
 export const alertInfo: Record<string, AlertInfo> = {
@@ -83,6 +84,13 @@ export const alertInfo: Record<string, AlertInfo> = {
 		step: 0.1,
 		desc: () => t`Triggers when 15 minute load average exceeds a threshold`,
 	},
+	Battery: {
+		name: () => t`Battery`,
+		unit: "%",
+		icon: BatteryIcon,
+		desc: () => t`Triggers when battery charge drops below a threshold`,
+		start: 20,
+	},
 } as const
 
 /** Helper to manage user alerts */