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>
+	)
+}