Merge pull request #29 from ChicoState/battery

Battery widget

Author: bacurrah

src/App.tsx

@@ -9,6 +9,7 @@ import { Notepad } from "./widgets/Notepad";
 import { Search } from "./widgets/Search";
 import { Shortcut } from "./widgets/Shortcut";
 import styles from "./App.css";
+import BatteryWidget from "./widgets/BatteryWidget";
 import {
   PencilSimpleIcon,
   CheckIcon,
@@ -130,6 +131,13 @@ const App = () => {
         >
           <Shortcut url="https://stackoverflow.com"></Shortcut>
         </Widget>
+
+        <Widget
+          size={{ width: 2, height: 1 }}
+          position={{ gridX: 20, gridY: 0 }}
+        >
+          <BatteryWidget />
+        </Widget>
       </Grid>
 
       <Menu active={menuOpen}></Menu>

src/widgets/BatteryWidget.css

@@ -0,0 +1,60 @@
+.row {
+  --ok: #34c759;
+  --low: #ff3b30;
+  --stroke: rgba(255, 255, 255, 0.35);
+  --level: rgba(255, 255, 255, 0.25);
+
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 100%;
+  color: #fffc;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-color-scheme: light) {
+  .row {
+    --stroke: rgba(232, 225, 225, 0.35);
+    color: #a9a9b8;
+  }
+}
+
+.value {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+
+.icon {
+  width: 48px;
+  display: block;
+}
+
+.body {
+  fill: none;
+  stroke: var(--stroke);
+  stroke-width: 2;
+}
+
+.cap {
+  fill: var(--stroke);
+}
+
+.level {
+  fill: var(--level); /* overridden by state below */
+  transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.ok .level {
+  fill: var(--ok);
+} /* > 20% */
+.low .level {
+  fill: var(--low);
+} /* <= 20% */
+
+.neutral .level {
+  fill: var(--level);
+}

src/widgets/BatteryWidget.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+import styles from "./BatteryWidget.css";
+
+export default function BatteryWidget() {
+  const [percent, setPercent] = useState<number | null>(null);
+
+  useEffect(() => {
+    let cleanup: (() => void) | undefined;
+
+    (async () => {
+      const nav: any = navigator as any;
+      if (!nav.getBattery) return; // non-Chromium browsers: show "—%"
+
+      const mgr = await nav.getBattery();
+
+      const update = () => {
+        const lvl = typeof mgr.level === "number" ? mgr.level : 0; // 0..1
+        setPercent(Math.round(lvl * 100));
+      };
+
+      update(); // initial value
+      mgr.addEventListener("levelchange", update);
+
+      cleanup = () => {
+        mgr.removeEventListener("levelchange", update);
+      };
+    })();
+
+    return () => cleanup?.();
+  }, []);
+
+  const clamped = percent == null ? 0 : Math.max(0, Math.min(100, percent));
+  const tier = percent == null ? "neutral" : percent <= 20 ? "low" : "ok";
+
+  const INNER_MAX = 40;
+  const innerWidth = Math.round((clamped / 100) * INNER_MAX);
+
+  return (
+    <div className={`${styles.row} ${styles[tier]}`}>
+      <span className={styles.value}>
+        {percent != null ? `${percent}%` : "—%"}
+      </span>
+
+      <svg className={styles.icon} viewBox="0 0 52 24" aria-hidden="true">
+        {/* outline */}
+        <rect
+          x="1"
+          y="3"
+          width="44"
+          height="18"
+          rx="5"
+          className={styles.body}
+        />
+        {/* cap */}
+        <rect x="46" y="8" width="5" height="8" rx="2" className={styles.cap} />
+        {/* fill */}
+        <rect
+          x="3"
+          y="5"
+          width={innerWidth}
+          height="14"
+          rx="4"
+          className={styles.level}
+        />
+      </svg>
+    </div>
+  );
+}