homeio

1"use client";
2
3import { PopoverShell } from "@/modules/system/components/status-bar/popover-shell";
4import type { BatteryPopoverProps } from "@/modules/system/components/status-bar/types";
5import { safePercent } from "@/modules/system/components/status-bar/utils";
6import { BatteryCharging, BatteryFull } from "@/components/icons/platform-icons";
7
8function formatCapacityRatio(value: number | null | undefined) {
9  if (typeof value !== "number" || Number.isNaN(value)) return "--";
10  return `${value.toFixed(1)}%`;
11}
12
13export function BatteryPopover({ battery, onClose }: BatteryPopoverProps) {
14  const hasBattery = Boolean(battery?.hasBattery);
15  const batteryPercent =
16    typeof battery?.percent === "number" ? safePercent(battery.percent) : null;
17  const isCharging = Boolean(battery?.isCharging);
18  const acConnected = battery?.acConnected;
19  const manufacturer = battery?.manufacturer ?? null;
20  const cycleCount = battery?.cycleCount;
21  const capacityRatio = formatCapacityRatio(
22    battery?.designToMaxCapacityPercent,
23  );
24  const statusLabel = !hasBattery
25    ? "No battery detected"
26    : isCharging
27      ? "Charging"
28      : "On battery";
29
30  return (
31    <PopoverShell onClose={onClose} className="w-64">
32      <div className="p-4">
33        <div className="flex items-center gap-3 mb-4">
34          <div className="size-10 rounded-xl bg-status-green/15 flex items-center justify-center">
35            {isCharging ? (
36              <BatteryCharging className="size-5 text-status-green" />
37            ) : (
38              <BatteryFull className="size-5 text-status-amber" />
39            )}
40          </div>
41          <div>
42            <p className="text-sm font-semibold text-foreground">
43              Battery Status
44            </p>
45            <p className="text-xs text-muted-foreground">{statusLabel}</p>
46          </div>
47        </div>
48
49        <div className="space-y-3">
50          <div>
51            <div className="flex items-center justify-between text-xs mb-1">
52              <span className="text-muted-foreground">Charge Level</span>
53              <span className="text-foreground font-medium">
54                {batteryPercent === null ? "--" : `${batteryPercent}%`}
55              </span>
56            </div>
57            <div className="h-2 rounded-[var(--radius)] bg-muted overflow-hidden">
58              <div
59                className={`h-full rounded-[var(--radius)] ${
60                  batteryPercent === null
61                    ? "bg-muted-foreground/40"
62                    : batteryPercent < 20
63                      ? "bg-status-red"
64                      : batteryPercent < 50
65                        ? "bg-status-amber"
66                        : "bg-status-green"
67                }`}
68                style={{ width: `${batteryPercent ?? 0}%` }}
69              />
70            </div>
71          </div>
72
73          <div className="grid grid-cols-2 gap-3 pt-1">
74            <div className="flex flex-col gap-0.5">
75              <span className="text-xs text-muted-foreground uppercase tracking-wider">
76                AC Power
77              </span>
78              <span className="text-sm font-medium text-foreground">
79                {typeof acConnected === "boolean"
80                  ? acConnected
81                    ? "Connected"
82                    : "Disconnected"
83                  : "--"}
84              </span>
85            </div>
86            <div className="flex flex-col gap-0.5">
87              <span className="text-xs text-muted-foreground uppercase tracking-wider">
88                Cycle Count
89              </span>
90              <span className="text-sm font-medium text-foreground">
91                {typeof cycleCount === "number" ? cycleCount : "--"}
92              </span>
93            </div>
94            <div className="flex flex-col gap-0.5">
95              <span className="text-xs text-muted-foreground uppercase tracking-wider">
96                Design / Max
97              </span>
98              <span className="text-sm font-medium text-foreground">
99                {capacityRatio}
100              </span>
101            </div>
102            <div className="flex flex-col gap-0.5">
103              <span className="text-xs text-muted-foreground uppercase tracking-wider">
104                Manufacturer
105              </span>
106              <span className="text-sm font-medium text-foreground">
107                {manufacturer ?? "--"}
108              </span>
109            </div>
110          </div>
111        </div>
112      </div>
113    </PopoverShell>
114  );
115}
116